mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-14 12:23:52 +02:00
refactor: Friends List Tab (#1173)
This commit is contained in:
pa
GitHub
281
src/app.js
281
src/app.js
@@ -48,6 +48,7 @@ import ModerationTab from './views/tabs/Moderation.vue';
|
||||
import ChartsTab from './views/tabs/Charts.vue';
|
||||
import SideBar from './views/SideBar.vue';
|
||||
import NavMenu from './views/NavMenu.vue';
|
||||
import FriendsListTab from './views/tabs/FriendsList.vue';
|
||||
|
||||
// components
|
||||
import SimpleSwitch from './components/settings/SimpleSwitch.vue';
|
||||
@@ -188,6 +189,7 @@ console.log(`isLinux: ${LINUX}`);
|
||||
// tabs
|
||||
ModerationTab,
|
||||
ChartsTab,
|
||||
FriendsListTab,
|
||||
// - others
|
||||
SideBar,
|
||||
NavMenu,
|
||||
@@ -212,7 +214,12 @@ console.log(`isLinux: ${LINUX}`);
|
||||
getWorldName: this.getWorldName,
|
||||
userImage: this.userImage,
|
||||
userStatusClass: this.userStatusClass,
|
||||
getGroupName: this.getGroupName
|
||||
getGroupName: this.getGroupName,
|
||||
userImageFull: this.userImageFull,
|
||||
showFullscreenImageDialog: this.showFullscreenImageDialog,
|
||||
statusClass: this.statusClass,
|
||||
getFaviconUrl: this.getFaviconUrl,
|
||||
openExternalLink: this.openExternalLink
|
||||
};
|
||||
},
|
||||
el: '#root',
|
||||
@@ -2964,8 +2971,6 @@ console.log(`isLinux: ${LINUX}`);
|
||||
}
|
||||
if (index === 'notification') {
|
||||
this.unseenNotifications = [];
|
||||
} else if (index === 'friendsList') {
|
||||
this.friendsListSearchChange();
|
||||
}
|
||||
};
|
||||
|
||||
@@ -4311,34 +4316,6 @@ console.log(`isLinux: ${LINUX}`);
|
||||
|
||||
$app.data.quickSearchItems = [];
|
||||
|
||||
var localeIncludes = function (str, search, comparer) {
|
||||
// These checks are stolen from https://stackoverflow.com/a/69623589/11030436
|
||||
if (search === '') {
|
||||
return true;
|
||||
} else if (!str || !search) {
|
||||
return false;
|
||||
}
|
||||
const strObj = String(str);
|
||||
const searchObj = String(search);
|
||||
|
||||
if (strObj.length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (searchObj.length > strObj.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Now simply loop through each substring and compare them
|
||||
for (let i = 0; i < str.length - searchObj.length + 1; i++) {
|
||||
const substr = strObj.substring(i, i + searchObj.length);
|
||||
if (comparer.compare(substr, searchObj) === 0) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
// Making a persistent comparer increases perf by like 10x lmao
|
||||
$app.data._stringComparer = undefined;
|
||||
$app.computed.stringComparer = function () {
|
||||
@@ -4365,14 +4342,14 @@ console.log(`isLinux: ${LINUX}`);
|
||||
}
|
||||
|
||||
const cleanName = removeConfusables(ctx.name);
|
||||
let match = localeIncludes(
|
||||
let match = $utils.localeIncludes(
|
||||
cleanName,
|
||||
cleanQuery,
|
||||
this.stringComparer
|
||||
);
|
||||
if (!match) {
|
||||
// Also check regular name in case search is with special characters
|
||||
match = localeIncludes(
|
||||
match = $utils.localeIncludes(
|
||||
ctx.name,
|
||||
cleanQuery,
|
||||
this.stringComparer
|
||||
@@ -4381,10 +4358,14 @@ console.log(`isLinux: ${LINUX}`);
|
||||
// Use query with whitespace for notes and memos as people are more
|
||||
// likely to include spaces in memos and notes
|
||||
if (!match && ctx.memo) {
|
||||
match = localeIncludes(ctx.memo, query, this.stringComparer);
|
||||
match = $utils.localeIncludes(
|
||||
ctx.memo,
|
||||
query,
|
||||
this.stringComparer
|
||||
);
|
||||
}
|
||||
if (!match && ctx.ref.note) {
|
||||
match = localeIncludes(
|
||||
match = $utils.localeIncludes(
|
||||
ctx.ref.note,
|
||||
query,
|
||||
this.stringComparer
|
||||
@@ -6988,23 +6969,6 @@ console.log(`isLinux: ${LINUX}`);
|
||||
layout: 'table',
|
||||
visible: false
|
||||
};
|
||||
$app.data.friendsListTable = {
|
||||
data: [],
|
||||
tableProps: {
|
||||
stripe: true,
|
||||
size: 'mini',
|
||||
defaultSort: {
|
||||
prop: '$friendNumber',
|
||||
order: 'descending'
|
||||
}
|
||||
},
|
||||
pageSize: 100,
|
||||
paginationProps: {
|
||||
small: true,
|
||||
layout: 'sizes,prev,pager,next,total',
|
||||
pageSizes: [50, 100, 250, 500]
|
||||
}
|
||||
};
|
||||
$app.data.socialStatusHistoryTable = {
|
||||
data: [],
|
||||
tableProps: {
|
||||
@@ -14225,80 +14189,8 @@ console.log(`isLinux: ${LINUX}`);
|
||||
// #endregion
|
||||
// #region | App: Friends List
|
||||
|
||||
API.$on('LOGIN', function () {
|
||||
$app.friendsListTable.data = [];
|
||||
});
|
||||
|
||||
$app.methods.selectFriendsListRow = function (val) {
|
||||
if (val === null) {
|
||||
return;
|
||||
}
|
||||
if (!val.id) {
|
||||
this.lookupUser(val);
|
||||
return;
|
||||
}
|
||||
this.showUserDialog(val.id);
|
||||
};
|
||||
|
||||
$app.data.friendsListSearch = '';
|
||||
$app.data.friendsListSearchFilterVIP = false;
|
||||
$app.data.friendsListSearchFilters = [];
|
||||
$app.data.friendsListSelectAllCheckbox = false;
|
||||
$app.data.friendsListBulkUnfriendMode = false;
|
||||
$app.data.friendsListBulkUnfriendForceUpdate = 0;
|
||||
|
||||
$app.methods.toggleFriendsListBulkUnfriendMode = function () {
|
||||
if (!this.friendsListBulkUnfriendMode) {
|
||||
this.friendsListTable.data.forEach((ref) => {
|
||||
ref.$selected = false;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
$app.methods.showBulkUnfriendSelectionConfirm = function () {
|
||||
var pendingUnfriendList = this.friendsListTable.data.reduce(
|
||||
(acc, ctx) => {
|
||||
if (ctx.$selected) {
|
||||
acc.push(ctx.displayName);
|
||||
}
|
||||
return acc;
|
||||
},
|
||||
[]
|
||||
);
|
||||
var elementsTicked = pendingUnfriendList.length;
|
||||
if (elementsTicked === 0) {
|
||||
return;
|
||||
}
|
||||
this.$confirm(
|
||||
`Are you sure you want to delete ${elementsTicked} friends?
|
||||
This can negatively affect your trust rank,
|
||||
This action cannot be undone.`,
|
||||
`Delete ${elementsTicked} friends?`,
|
||||
{
|
||||
confirmButtonText: 'Confirm',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'info',
|
||||
showInput: true,
|
||||
inputType: 'textarea',
|
||||
inputValue: pendingUnfriendList.join('\r\n'),
|
||||
callback: (action) => {
|
||||
if (action === 'confirm') {
|
||||
this.bulkUnfriendSelection();
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
$app.methods.bulkUnfriendSelection = function () {
|
||||
for (var ctx of this.friendsListTable.data) {
|
||||
if (ctx.$selected) {
|
||||
friendRequest.deleteFriend({
|
||||
userId: ctx.id
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
// $app.data.friendsListSelectAllCheckbox = false;
|
||||
|
||||
// $app.methods.showBulkUnfriendAllConfirm = function () {
|
||||
// this.$confirm(
|
||||
@@ -14327,91 +14219,6 @@ console.log(`isLinux: ${LINUX}`);
|
||||
// }
|
||||
// };
|
||||
|
||||
$app.methods.friendsListSearchChange = function () {
|
||||
let query;
|
||||
let cleanedQuery;
|
||||
this.friendsListTable.data = [];
|
||||
let filters = [...this.friendsListSearchFilters];
|
||||
if (filters.length === 0) {
|
||||
filters = ['Display Name', 'Rank', 'Status', 'Bio', 'Memo'];
|
||||
}
|
||||
const results = [];
|
||||
if (this.friendsListSearch) {
|
||||
query = this.friendsListSearch;
|
||||
cleanedQuery = removeWhitespace(query);
|
||||
}
|
||||
|
||||
for (const ctx of this.friends.values()) {
|
||||
if (typeof ctx.ref === 'undefined') {
|
||||
continue;
|
||||
}
|
||||
if (typeof ctx.ref.$selected === 'undefined') {
|
||||
ctx.ref.$selected = false;
|
||||
}
|
||||
if (this.friendsListSearchFilterVIP && !ctx.isVIP) {
|
||||
continue;
|
||||
}
|
||||
if (query && filters) {
|
||||
let match = false;
|
||||
if (
|
||||
!match &&
|
||||
filters.includes('Display Name') &&
|
||||
ctx.ref.displayName
|
||||
) {
|
||||
match =
|
||||
localeIncludes(
|
||||
ctx.ref.displayName,
|
||||
cleanedQuery,
|
||||
this.stringComparer
|
||||
) ||
|
||||
localeIncludes(
|
||||
removeConfusables(ctx.ref.displayName),
|
||||
cleanedQuery,
|
||||
this.stringComparer
|
||||
);
|
||||
}
|
||||
if (!match && filters.includes('Memo') && ctx.memo) {
|
||||
match = localeIncludes(
|
||||
ctx.memo,
|
||||
query,
|
||||
this.stringComparer
|
||||
);
|
||||
}
|
||||
if (!match && filters.includes('Bio') && ctx.ref.bio) {
|
||||
match = localeIncludes(
|
||||
ctx.ref.bio,
|
||||
query,
|
||||
this.stringComparer
|
||||
);
|
||||
}
|
||||
if (
|
||||
!match &&
|
||||
filters.includes('Status') &&
|
||||
ctx.ref.statusDescription
|
||||
) {
|
||||
match = localeIncludes(
|
||||
ctx.ref.statusDescription,
|
||||
query,
|
||||
this.stringComparer
|
||||
);
|
||||
}
|
||||
if (!match && filters.includes('Rank')) {
|
||||
match = String(ctx.ref.$trustLevel)
|
||||
.toUpperCase()
|
||||
.includes(query.toUpperCase());
|
||||
}
|
||||
if (!match) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
results.push(ctx.ref);
|
||||
}
|
||||
this.getAllUserStats();
|
||||
requestAnimationFrame(() => {
|
||||
this.friendsListTable.data = results;
|
||||
});
|
||||
};
|
||||
|
||||
$app.methods.getAllUserStats = async function () {
|
||||
var userIds = [];
|
||||
var displayNames = [];
|
||||
@@ -14481,60 +14288,6 @@ console.log(`isLinux: ${LINUX}`);
|
||||
/* eslint-enable require-atomic-updates */
|
||||
};
|
||||
|
||||
$app.watch.friendsListSearch = $app.methods.friendsListSearchChange;
|
||||
$app.data.friendsListLoading = false;
|
||||
$app.data.friendsListLoadingProgress = '';
|
||||
|
||||
$app.methods.friendsListLoadUsers = async function () {
|
||||
this.friendsListLoading = true;
|
||||
var i = 0;
|
||||
var toFetch = [];
|
||||
for (var ctx of this.friends.values()) {
|
||||
if (ctx.ref && !ctx.ref.date_joined) {
|
||||
toFetch.push(ctx.id);
|
||||
}
|
||||
}
|
||||
var length = toFetch.length;
|
||||
for (var userId of toFetch) {
|
||||
if (!this.friendsListLoading) {
|
||||
this.friendsListLoadingProgress = '';
|
||||
return;
|
||||
}
|
||||
i++;
|
||||
this.friendsListLoadingProgress = `${i}/${length}`;
|
||||
try {
|
||||
await userRequest.getUser({
|
||||
userId
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
this.friendsListLoadingProgress = '';
|
||||
this.friendsListLoading = false;
|
||||
};
|
||||
|
||||
$app.methods.sortAlphabetically = function (a, b, field) {
|
||||
if (!a[field] || !b[field]) {
|
||||
return 0;
|
||||
}
|
||||
return a[field].toLowerCase().localeCompare(b[field].toLowerCase());
|
||||
};
|
||||
|
||||
$app.methods.sortLanguages = function (a, b) {
|
||||
var sortedA = [];
|
||||
var sortedB = [];
|
||||
a.$languages.forEach((item) => {
|
||||
sortedA.push(item.value);
|
||||
});
|
||||
b.$languages.forEach((item) => {
|
||||
sortedB.push(item.value);
|
||||
});
|
||||
sortedA.sort();
|
||||
sortedB.sort();
|
||||
return JSON.stringify(sortedA).localeCompare(JSON.stringify(sortedB));
|
||||
};
|
||||
|
||||
$app.methods.genMd5 = async function (file) {
|
||||
var response = await AppApi.MD5File(file);
|
||||
return response;
|
||||
|
||||
14
src/app.pug
14
src/app.pug
@@ -67,8 +67,18 @@ doctype html
|
||||
+profileTab
|
||||
|
||||
//- friends list
|
||||
include ./mixins/tabs/friendsList.pug
|
||||
+friendsListTab
|
||||
friends-list-tab(
|
||||
:menu-active-index='menuActiveIndex'
|
||||
:friends='friends'
|
||||
:hide-tooltips='hideTooltips'
|
||||
:random-user-colours='randomUserColours'
|
||||
:sort-status='sortStatus'
|
||||
:language-class='languageClass'
|
||||
:confirm-delete-friend='confirmDeleteFriend'
|
||||
:friends-list-search.sync='friendsListSearch'
|
||||
@get-all-user-stats='getAllUserStats'
|
||||
@lookup-user='lookupUser'
|
||||
:string-comparer='stringComparer')
|
||||
|
||||
//- charts
|
||||
keep-alive
|
||||
|
||||
@@ -106,10 +106,6 @@
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.el-table__row:hover .el-table__cell .cell {
|
||||
-webkit-line-clamp: unset;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 20px;
|
||||
word-break: break-word;
|
||||
|
||||
@@ -375,5 +375,32 @@ export default {
|
||||
.join(', ');
|
||||
document.body.style.fontFamily = `${CJKFamily}, ${otherFonts}`;
|
||||
}
|
||||
},
|
||||
localeIncludes(str, search, comparer) {
|
||||
// These checks are stolen from https://stackoverflow.com/a/69623589/11030436
|
||||
if (search === '') {
|
||||
return true;
|
||||
} else if (!str || !search) {
|
||||
return false;
|
||||
}
|
||||
const strObj = String(str);
|
||||
const searchObj = String(search);
|
||||
|
||||
if (strObj.length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (searchObj.length > strObj.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Now simply loop through each substring and compare them
|
||||
for (let i = 0; i < str.length - searchObj.length + 1; i++) {
|
||||
const substr = strObj.substring(i, i + searchObj.length);
|
||||
if (comparer.compare(substr, searchObj) === 0) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,194 +0,0 @@
|
||||
mixin friendsListTab
|
||||
.x-container(v-show='menuActiveIndex === "friendsList"')
|
||||
div(style='padding: 0px 10px 0px 10px')
|
||||
span.header {{ $t('view.friend_list.header') }}
|
||||
div(style='float: right; font-size: 13px')
|
||||
div(v-if='friendsListBulkUnfriendMode' style='display: inline-block; margin-right: 10px')
|
||||
el-button(size='small' @click='showBulkUnfriendSelectionConfirm') {{ $t('view.friend_list.bulk_unfriend_selection') }}
|
||||
//- el-button(size="small" @click="showBulkUnfriendAllConfirm" style="margin-right:5px") Bulk Unfriend All
|
||||
div(style='display: inline-block; margin-right: 10px')
|
||||
span.name {{ $t('view.friend_list.bulk_unfriend') }}
|
||||
el-switch(
|
||||
@change='toggleFriendsListBulkUnfriendMode'
|
||||
v-model='friendsListBulkUnfriendMode'
|
||||
style='margin-left: 5px')
|
||||
span {{ $t('view.friend_list.load') }}
|
||||
template(v-if='friendsListLoading')
|
||||
span(v-text='friendsListLoadingProgress' style='margin-left: 5px')
|
||||
el-tooltip(
|
||||
placement='top'
|
||||
:content='$t("view.friend_list.cancel_tooltip")'
|
||||
:disabled='hideTooltips')
|
||||
el-button(
|
||||
@click='friendsListLoading = false'
|
||||
size='mini'
|
||||
icon='el-icon-loading'
|
||||
circle
|
||||
style='margin-left: 5px')
|
||||
template(v-else)
|
||||
el-tooltip(placement='top' :content='$t("view.friend_list.load_tooltip")' :disabled='hideTooltips')
|
||||
el-button(
|
||||
@click='friendsListLoadUsers'
|
||||
size='mini'
|
||||
icon='el-icon-refresh-left'
|
||||
circle
|
||||
style='margin-left: 5px')
|
||||
div(style='margin: 10px 0 0 10px; display: flex; align-items: center')
|
||||
div(style='flex: none; margin-right: 10px; display: flex; align-items: center')
|
||||
el-tooltip(
|
||||
placement='bottom'
|
||||
:content='$t("view.friend_list.favorites_only_tooltip")'
|
||||
:disabled='hideTooltips')
|
||||
el-switch(
|
||||
v-model='friendsListSearchFilterVIP'
|
||||
@change='friendsListSearchChange'
|
||||
active-color='#13ce66')
|
||||
el-input(
|
||||
v-model='friendsListSearch'
|
||||
:placeholder='$t("view.friend_list.search_placeholder")'
|
||||
@change='friendsListSearchChange'
|
||||
clearable
|
||||
style='flex: 1')
|
||||
el-select(
|
||||
v-model='friendsListSearchFilters'
|
||||
multiple
|
||||
clearable
|
||||
collapse-tags
|
||||
style='flex: none; width: 200px; margin: 0 10px'
|
||||
@change='friendsListSearchChange'
|
||||
:placeholder='$t("view.friend_list.filter_placeholder")')
|
||||
el-option(
|
||||
v-for='type in ["Display Name", "User Name", "Rank", "Status", "Bio", "Memo"]'
|
||||
:key='type'
|
||||
:label='type'
|
||||
:value='type')
|
||||
el-tooltip(placement='top' :content='$t("view.friend_list.refresh_tooltip")' :disabled='hideTooltips')
|
||||
el-button(
|
||||
type='default'
|
||||
@click='friendsListSearchChange'
|
||||
icon='el-icon-refresh'
|
||||
circle
|
||||
style='flex: none')
|
||||
data-tables(
|
||||
v-bind='friendsListTable'
|
||||
@row-click='selectFriendsListRow'
|
||||
:table-props='{ height: "calc(100vh - 170px)", size: "mini" }'
|
||||
style='margin-top: 10px; cursor: pointer')
|
||||
el-table-column(
|
||||
width='55'
|
||||
prop='$selected'
|
||||
v-if='friendsListBulkUnfriendMode'
|
||||
:key='friendsListBulkUnfriendForceUpdate')
|
||||
template(#default='scope')
|
||||
el-button(type='text' size='mini' @click.stop)
|
||||
el-checkbox(v-model='scope.row.$selected' @change='friendsListBulkUnfriendForceUpdate++')
|
||||
el-table-column(:label='$t("table.friendList.no")' width='70' prop='$friendNumber' sortable='custom')
|
||||
template(#default='scope')
|
||||
span {{ scope.row.$friendNumber ? scope.row.$friendNumber : '' }}
|
||||
el-table-column(:label='$t("table.friendList.avatar")' width='70' prop='photo')
|
||||
template(#default='scope')
|
||||
el-popover(placement='right' height='500px' trigger='hover')
|
||||
img.friends-list-avatar(slot='reference' v-lazy='userImage(scope.row)')
|
||||
img.friends-list-avatar(
|
||||
v-lazy='userImageFull(scope.row)'
|
||||
style='height: 500px; cursor: pointer'
|
||||
@click='showFullscreenImageDialog(userImageFull(scope.row))')
|
||||
el-table-column(
|
||||
:label='$t("table.friendList.displayName")'
|
||||
min-width='140'
|
||||
prop='displayName'
|
||||
sortable
|
||||
:sort-method='(a, b) => sortAlphabetically(a, b, "displayName")')
|
||||
template(#default='scope')
|
||||
span.name(
|
||||
v-if='randomUserColours'
|
||||
v-text='scope.row.displayName'
|
||||
:style='{ color: scope.row.$userColour }')
|
||||
span.name(v-else v-text='scope.row.displayName')
|
||||
el-table-column(
|
||||
:label='$t("table.friendList.rank")'
|
||||
width='110'
|
||||
prop='$trustSortNum'
|
||||
sortable='custom')
|
||||
template(#default='scope')
|
||||
span.name(
|
||||
v-if='randomUserColours'
|
||||
v-text='scope.row.$trustLevel'
|
||||
:class='scope.row.$trustClass')
|
||||
span.name(v-else v-text='scope.row.$trustLevel' :style='{ color: scope.row.$userColour }')
|
||||
el-table-column(
|
||||
:label='$t("table.friendList.status")'
|
||||
min-width='180'
|
||||
prop='status'
|
||||
sortable
|
||||
:sort-method='(a, b) => sortStatus(a.status, b.status)')
|
||||
template(#default='scope')
|
||||
i.x-user-status(
|
||||
v-if='scope.row.status !== "offline"'
|
||||
:class='statusClass(scope.row.status)'
|
||||
style='margin-right: 3px')
|
||||
span(v-text='scope.row.statusDescription')
|
||||
el-table-column(
|
||||
:label='$t("table.friendList.language")'
|
||||
width='110'
|
||||
prop='$languages'
|
||||
sortable
|
||||
:sort-method='(a, b) => sortLanguages(a, b)')
|
||||
template(#default='scope')
|
||||
el-tooltip(v-for='item in scope.row.$languages' :key='item.key' placement='top')
|
||||
template(#content)
|
||||
span {{ item.value }} ({{ item.key }})
|
||||
span.flags(
|
||||
:class='languageClass(item.key)'
|
||||
style='display: inline-block; margin-right: 5px')
|
||||
el-table-column(:label='$t("table.friendList.bioLink")' width='100' prop='bioLinks')
|
||||
template(#default='scope')
|
||||
el-tooltip(v-if='link' v-for='(link, index) in scope.row.bioLinks' :key='index')
|
||||
template(#content)
|
||||
span(v-text='link')
|
||||
img(
|
||||
:src='getFaviconUrl(link)'
|
||||
style='width: 16px; height: 16px; vertical-align: middle; margin-right: 5px; cursor: pointer'
|
||||
@click.stop='openExternalLink(link)')
|
||||
el-table-column(:label='$t("table.friendList.joinCount")' width='120' prop='$joinCount' sortable)
|
||||
el-table-column(:label='$t("table.friendList.timeTogether")' width='140' prop='$timeSpent' sortable)
|
||||
template(#default='scope')
|
||||
span(v-if='scope.row.$timeSpent') {{ timeToText(scope.row.$timeSpent) }}
|
||||
el-table-column(
|
||||
:label='$t("table.friendList.lastSeen")'
|
||||
width='170'
|
||||
prop='$lastSeen'
|
||||
sortable
|
||||
:sort-method='(a, b) => sortAlphabetically(a, b, "$lastSeen")')
|
||||
template(#default='scope')
|
||||
span {{ scope.row.$lastSeen | formatDate('long') }}
|
||||
el-table-column(
|
||||
:label='$t("table.friendList.lastActivity")'
|
||||
width='170'
|
||||
prop='last_activity'
|
||||
sortable
|
||||
:sort-method='(a, b) => sortAlphabetically(a, b, "last_activity")')
|
||||
template(#default='scope')
|
||||
span {{ scope.row.last_activity | formatDate('long') }}
|
||||
el-table-column(
|
||||
:label='$t("table.friendList.lastLogin")'
|
||||
width='170'
|
||||
prop='last_login'
|
||||
sortable
|
||||
:sort-method='(a, b) => sortAlphabetically(a, b, "last_login")')
|
||||
template(#default='scope')
|
||||
span {{ scope.row.last_login | formatDate('long') }}
|
||||
el-table-column(
|
||||
:label='$t("table.friendList.dateJoined")'
|
||||
width='120'
|
||||
prop='date_joined'
|
||||
sortable
|
||||
:sort-method='(a, b) => sortAlphabetically(a, b, "date_joined")')
|
||||
el-table-column(:label='$t("table.friendList.unfriend")' width='100' align='center')
|
||||
template(#default='scope')
|
||||
el-button(
|
||||
type='text'
|
||||
icon='el-icon-close'
|
||||
style='color: #f56c6c'
|
||||
size='mini'
|
||||
@click.stop='confirmDeleteFriend(scope.row.id)')
|
||||
@@ -70,14 +70,14 @@
|
||||
effect="plain"
|
||||
size="mini"
|
||||
style="margin-right: 5px; margin-top: 5px">
|
||||
PC
|
||||
PC<span
|
||||
v-if="worldDialog.bundleSizes['standalonewindows']"
|
||||
class="x-grey"
|
||||
style="margin-left: 5px; border-left: inherit; padding-left: 5px">
|
||||
{{ worldDialog.bundleSizes['standalonewindows'].fileSize }}
|
||||
</span>
|
||||
</el-tag>
|
||||
<span
|
||||
v-if="worldDialog.bundleSizes['standalonewindows']"
|
||||
class="x-grey"
|
||||
style="margin-left: 5px; border-left: inherit; padding-left: 5px">
|
||||
{{ worldDialog.bundleSizes['standalonewindows'].fileSize }}
|
||||
</span>
|
||||
|
||||
<el-tag
|
||||
v-if="worldDialog.isQuest"
|
||||
class="x-tag-platform-quest"
|
||||
@@ -85,14 +85,14 @@
|
||||
effect="plain"
|
||||
size="mini"
|
||||
style="margin-right: 5px; margin-top: 5px">
|
||||
Android
|
||||
Android<span
|
||||
v-if="worldDialog.bundleSizes['android']"
|
||||
class="x-grey"
|
||||
style="margin-left: 5px; border-left: inherit; padding-left: 5px">
|
||||
{{ worldDialog.bundleSizes['android'].fileSize }}
|
||||
</span>
|
||||
</el-tag>
|
||||
<span
|
||||
v-if="worldDialog.bundleSizes['android']"
|
||||
class="x-grey"
|
||||
style="margin-left: 5px; border-left: inherit; padding-left: 5px">
|
||||
{{ worldDialog.bundleSizes['android'].fileSize }}
|
||||
</span>
|
||||
|
||||
<el-tag
|
||||
v-if="worldDialog.isIos"
|
||||
class="x-tag-platform-ios"
|
||||
@@ -100,14 +100,14 @@
|
||||
effect="plain"
|
||||
size="mini"
|
||||
style="margin-right: 5px; margin-top: 5px">
|
||||
iOS
|
||||
iOS<span
|
||||
v-if="worldDialog.bundleSizes['ios']"
|
||||
class="x-grey"
|
||||
style="margin-left: 5px; border-left: inherit; padding-left: 5px">
|
||||
{{ worldDialog.bundleSizes['ios'].fileSize }}
|
||||
</span>
|
||||
</el-tag>
|
||||
<span
|
||||
v-if="worldDialog.bundleSizes['ios']"
|
||||
class="x-grey"
|
||||
style="margin-left: 5px; border-left: inherit; padding-left: 5px">
|
||||
{{ worldDialog.bundleSizes['ios'].fileSize }}
|
||||
</span>
|
||||
|
||||
<el-tag
|
||||
v-if="worldDialog.avatarScalingDisabled"
|
||||
type="warning"
|
||||
|
||||
510
src/views/tabs/FriendsList.vue
Normal file
510
src/views/tabs/FriendsList.vue
Normal file
@@ -0,0 +1,510 @@
|
||||
<template>
|
||||
<div v-show="menuActiveIndex === 'friendsList'" class="x-container">
|
||||
<div style="padding: 0 10px 0 10px">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<span class="header">{{ $t('view.friend_list.header') }}</span>
|
||||
<div style="font-size: 13px">
|
||||
<div v-if="friendsListBulkUnfriendMode" style="display: inline-block; margin-right: 10px">
|
||||
<el-button size="small" @click="showBulkUnfriendSelectionConfirm">
|
||||
{{ $t('view.friend_list.bulk_unfriend_selection') }}
|
||||
</el-button>
|
||||
<!-- el-button(size="small" @click="showBulkUnfriendAllConfirm" style="margin-right:5px") Bulk Unfriend All-->
|
||||
</div>
|
||||
<div style="display: inline-block; margin-right: 10px">
|
||||
<span class="name">{{ $t('view.friend_list.bulk_unfriend') }}</span>
|
||||
<el-switch
|
||||
v-model="friendsListBulkUnfriendMode"
|
||||
style="margin-left: 5px"
|
||||
@change="toggleFriendsListBulkUnfriendMode"></el-switch>
|
||||
</div>
|
||||
<span>{{ $t('view.friend_list.load') }}</span>
|
||||
<template v-if="friendsListLoading">
|
||||
<span style="margin-left: 5px" v-text="friendsListLoadingProgress"></span>
|
||||
<el-tooltip
|
||||
placement="top"
|
||||
:content="$t('view.friend_list.cancel_tooltip')"
|
||||
:disabled="hideTooltips">
|
||||
<el-button
|
||||
size="mini"
|
||||
icon="el-icon-loading"
|
||||
circle
|
||||
style="margin-left: 5px"
|
||||
@click="friendsListLoading = false"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-tooltip
|
||||
placement="top"
|
||||
:content="$t('view.friend_list.load_tooltip')"
|
||||
:disabled="hideTooltips">
|
||||
<el-button
|
||||
size="mini"
|
||||
icon="el-icon-refresh-left"
|
||||
circle
|
||||
style="margin-left: 5px"
|
||||
@click="friendsListLoadUsers"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin: 10px 0 0 10px; display: flex; align-items: center">
|
||||
<div style="flex: none; margin-right: 10px; display: flex; align-items: center">
|
||||
<el-tooltip
|
||||
placement="bottom"
|
||||
:content="$t('view.friend_list.favorites_only_tooltip')"
|
||||
:disabled="hideTooltips">
|
||||
<el-switch
|
||||
v-model="friendsListSearchFilterVIP"
|
||||
active-color="#13ce66"
|
||||
@change="friendsListSearchChange"></el-switch>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-input
|
||||
:value="friendsListSearch"
|
||||
:placeholder="$t('view.friend_list.search_placeholder')"
|
||||
clearable
|
||||
style="flex: 1"
|
||||
@input="$emit('update:friends-list-search', $event)"
|
||||
@change="friendsListSearchChange"></el-input>
|
||||
<el-select
|
||||
v-model="friendsListSearchFilters"
|
||||
multiple
|
||||
clearable
|
||||
collapse-tags
|
||||
style="flex: none; width: 200px; margin: 0 10px"
|
||||
:placeholder="$t('view.friend_list.filter_placeholder')"
|
||||
@change="friendsListSearchChange">
|
||||
<el-option
|
||||
v-for="type in ['Display Name', 'User Name', 'Rank', 'Status', 'Bio', 'Memo']"
|
||||
:key="type"
|
||||
:label="type"
|
||||
:value="type"></el-option>
|
||||
</el-select>
|
||||
<el-tooltip placement="top" :content="$t('view.friend_list.refresh_tooltip')" :disabled="hideTooltips">
|
||||
<el-button
|
||||
type="default"
|
||||
icon="el-icon-refresh"
|
||||
circle
|
||||
style="flex: none"
|
||||
@click="friendsListSearchChange"></el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<data-tables
|
||||
v-loading="friendsListLoading"
|
||||
v-bind="friendsListTable"
|
||||
:table-props="{ height: 'calc(100vh - 170px)', size: 'mini' }"
|
||||
style="margin-top: 10px; cursor: pointer"
|
||||
@row-click="selectFriendsListRow">
|
||||
<el-table-column
|
||||
v-if="friendsListBulkUnfriendMode"
|
||||
:key="friendsListBulkUnfriendForceUpdate"
|
||||
width="55"
|
||||
prop="$selected">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="mini" @click.stop>
|
||||
<el-checkbox
|
||||
v-model="scope.row.$selected"
|
||||
@change="friendsListBulkUnfriendForceUpdate++"></el-checkbox>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('table.friendList.no')" width="70" prop="$friendNumber" sortable="custom">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.$friendNumber ? scope.row.$friendNumber : '' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('table.friendList.avatar')" width="70" prop="photo">
|
||||
<template slot-scope="scope">
|
||||
<el-popover placement="right" height="500px" trigger="hover">
|
||||
<img slot="reference" v-lazy="userImage(scope.row)" class="friends-list-avatar" />
|
||||
<img
|
||||
v-lazy="userImageFull(scope.row)"
|
||||
class="friends-list-avatar"
|
||||
style="height: 500px; cursor: pointer"
|
||||
@click="showFullscreenImageDialog(userImageFull(scope.row))" />
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('table.friendList.displayName')"
|
||||
min-width="140"
|
||||
prop="displayName"
|
||||
sortable
|
||||
:sort-method="(a, b) => sortAlphabetically(a, b, 'displayName')">
|
||||
<template slot-scope="scope">
|
||||
<span :style="{ color: randomUserColours ? scope.row.$userColour : undefined }" class="name">{{
|
||||
scope.row.displayName
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('table.friendList.rank')"
|
||||
width="110"
|
||||
prop="$trustSortNum"
|
||||
sortable="custom">
|
||||
<template slot-scope="scope">
|
||||
<span
|
||||
v-if="randomUserColours"
|
||||
:class="scope.row.$trustClass"
|
||||
class="name"
|
||||
v-text="scope.row.$trustLevel"></span>
|
||||
<span
|
||||
v-else
|
||||
class="name"
|
||||
:style="{ color: scope.row.$userColour }"
|
||||
v-text="scope.row.$trustLevel"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('table.friendList.status')"
|
||||
min-width="180"
|
||||
prop="status"
|
||||
sortable
|
||||
:sort-method="(a, b) => sortStatus(a.status, b.status)">
|
||||
<template slot-scope="scope">
|
||||
<i
|
||||
v-if="scope.row.status !== 'offline'"
|
||||
:class="statusClass(scope.row.status)"
|
||||
style="margin-right: 3px"
|
||||
class="x-user-status"></i>
|
||||
<span v-text="scope.row.statusDescription"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('table.friendList.language')"
|
||||
width="110"
|
||||
prop="$languages"
|
||||
sortable
|
||||
:sort-method="(a, b) => sortLanguages(a, b)">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip v-for="item in scope.row.$languages" :key="item.key" placement="top">
|
||||
<template slot="content">
|
||||
<span>{{ item.value }} ({{ item.key }})</span>
|
||||
</template>
|
||||
<span
|
||||
:class="languageClass(item.key)"
|
||||
style="display: inline-block; margin-right: 5px"
|
||||
class="flags"></span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('table.friendList.bioLink')" width="100" prop="bioLinks">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip v-for="(link, index) in scope.row.bioLinks" v-if="link" :key="index">
|
||||
<template slot="content">
|
||||
<span v-text="link"></span>
|
||||
</template>
|
||||
<img
|
||||
:src="getFaviconUrl(link)"
|
||||
style="
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
"
|
||||
@click.stop="openExternalLink(link)" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('table.friendList.joinCount')"
|
||||
width="120"
|
||||
prop="$joinCount"
|
||||
sortable></el-table-column>
|
||||
<el-table-column :label="$t('table.friendList.timeTogether')" width="140" prop="$timeSpent" sortable>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.$timeSpent">{{ timeToText(scope.row.$timeSpent) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('table.friendList.lastSeen')"
|
||||
width="170"
|
||||
prop="$lastSeen"
|
||||
sortable
|
||||
:sort-method="(a, b) => sortAlphabetically(a, b, '$lastSeen')">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.$lastSeen | formatDate('long') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('table.friendList.lastActivity')"
|
||||
width="170"
|
||||
prop="last_activity"
|
||||
sortable
|
||||
:sort-method="(a, b) => sortAlphabetically(a, b, 'last_activity')">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.last_activity | formatDate('long') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('table.friendList.lastLogin')"
|
||||
width="170"
|
||||
prop="last_login"
|
||||
sortable
|
||||
:sort-method="(a, b) => sortAlphabetically(a, b, 'last_login')">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.last_login | formatDate('long') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('table.friendList.dateJoined')"
|
||||
width="120"
|
||||
prop="date_joined"
|
||||
sortable
|
||||
:sort-method="(a, b) => sortAlphabetically(a, b, 'date_joined')"></el-table-column>
|
||||
<el-table-column :label="$t('table.friendList.unfriend')" width="100" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
icon="el-icon-close"
|
||||
style="color: #f56c6c"
|
||||
size="mini"
|
||||
@click.stop="confirmDeleteFriend(scope.row.id)"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</data-tables>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import removeConfusables, { removeWhitespace } from '../../confusables';
|
||||
import utils from '../../classes/utils';
|
||||
import { friendRequest, userRequest } from '../../classes/request';
|
||||
|
||||
export default {
|
||||
name: 'FriendsListTab',
|
||||
inject: [
|
||||
'userImage',
|
||||
'userImageFull',
|
||||
'getFaviconUrl',
|
||||
'showFullscreenImageDialog',
|
||||
'showUserDialog',
|
||||
'statusClass',
|
||||
'openExternalLink'
|
||||
],
|
||||
props: {
|
||||
friends: {
|
||||
type: Map,
|
||||
required: true
|
||||
},
|
||||
hideTooltips: Boolean,
|
||||
randomUserColours: Boolean,
|
||||
sortStatus: Function,
|
||||
languageClass: Function,
|
||||
confirmDeleteFriend: Function,
|
||||
friendsListSearch: String,
|
||||
menuActiveIndex: String,
|
||||
stringComparer: Intl.Collator
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
friendsListSearchFilters: [],
|
||||
friendsListTable: {
|
||||
data: [],
|
||||
tableProps: {
|
||||
stripe: true,
|
||||
size: 'mini',
|
||||
defaultSort: {
|
||||
prop: '$friendNumber',
|
||||
order: 'descending'
|
||||
}
|
||||
},
|
||||
pageSize: 100,
|
||||
paginationProps: {
|
||||
small: true,
|
||||
layout: 'sizes,prev,pager,next,total',
|
||||
pageSizes: [50, 100, 250, 500]
|
||||
}
|
||||
},
|
||||
friendsListBulkUnfriendMode: false,
|
||||
friendsListLoading: false,
|
||||
friendsListLoadingProgress: '',
|
||||
friendsListSearchFilterVIP: false,
|
||||
// emm
|
||||
friendsListBulkUnfriendForceUpdate: 0
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
menuActiveIndex() {
|
||||
if (this.menuActiveIndex === 'friendsList') {
|
||||
requestAnimationFrame(() => {
|
||||
this.friendsListSearchChange();
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
friendsListSearchChange() {
|
||||
this.friendsListLoading = true;
|
||||
let query = '';
|
||||
let cleanedQuery = '';
|
||||
this.friendsListTable.data = [];
|
||||
let filters = [...this.friendsListSearchFilters];
|
||||
if (filters.length === 0) {
|
||||
filters = ['Display Name', 'Rank', 'Status', 'Bio', 'Memo'];
|
||||
}
|
||||
const results = [];
|
||||
if (this.friendsListSearch) {
|
||||
query = this.friendsListSearch;
|
||||
cleanedQuery = removeWhitespace(query);
|
||||
}
|
||||
|
||||
for (const ctx of this.friends.values()) {
|
||||
if (typeof ctx.ref === 'undefined') {
|
||||
continue;
|
||||
}
|
||||
if (typeof ctx.ref.$selected === 'undefined') {
|
||||
ctx.ref.$selected = false;
|
||||
}
|
||||
if (this.friendsListSearchFilterVIP && !ctx.isVIP) {
|
||||
continue;
|
||||
}
|
||||
if (query && filters) {
|
||||
let match = false;
|
||||
if (!match && filters.includes('Display Name') && ctx.ref.displayName) {
|
||||
match =
|
||||
utils.localeIncludes(ctx.ref.displayName, cleanedQuery, this.stringComparer) ||
|
||||
utils.localeIncludes(
|
||||
removeConfusables(ctx.ref.displayName),
|
||||
cleanedQuery,
|
||||
this.stringComparer
|
||||
);
|
||||
}
|
||||
if (!match && filters.includes('Memo') && ctx.memo) {
|
||||
match = utils.localeIncludes(ctx.memo, query, this.stringComparer);
|
||||
}
|
||||
if (!match && filters.includes('Bio') && ctx.ref.bio) {
|
||||
match = utils.localeIncludes(ctx.ref.bio, query, this.stringComparer);
|
||||
}
|
||||
if (!match && filters.includes('Status') && ctx.ref.statusDescription) {
|
||||
match = utils.localeIncludes(ctx.ref.statusDescription, query, this.stringComparer);
|
||||
}
|
||||
if (!match && filters.includes('Rank')) {
|
||||
match = String(ctx.ref.$trustLevel).toUpperCase().includes(query.toUpperCase());
|
||||
}
|
||||
if (!match) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
results.push(ctx.ref);
|
||||
}
|
||||
this.$emit('get-all-user-stats');
|
||||
requestAnimationFrame(() => {
|
||||
this.friendsListTable.data = results;
|
||||
this.friendsListLoading = false;
|
||||
});
|
||||
},
|
||||
toggleFriendsListBulkUnfriendMode() {
|
||||
if (!this.friendsListBulkUnfriendMode) {
|
||||
this.friendsListTable.data.forEach((ref) => {
|
||||
ref.$selected = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
showBulkUnfriendSelectionConfirm() {
|
||||
const pendingUnfriendList = this.friendsListTable.data.reduce((acc, ctx) => {
|
||||
if (ctx.$selected) {
|
||||
acc.push(ctx.displayName);
|
||||
}
|
||||
return acc;
|
||||
}, []);
|
||||
const elementsTicked = pendingUnfriendList.length;
|
||||
if (elementsTicked === 0) {
|
||||
return;
|
||||
}
|
||||
this.$confirm(
|
||||
`Are you sure you want to delete ${elementsTicked} friends?
|
||||
This can negatively affect your trust rank,
|
||||
This action cannot be undone.`,
|
||||
`Delete ${elementsTicked} friends?`,
|
||||
{
|
||||
confirmButtonText: 'Confirm',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'info',
|
||||
showInput: true,
|
||||
inputType: 'textarea',
|
||||
inputValue: pendingUnfriendList.join('\r\n'),
|
||||
callback: (action) => {
|
||||
if (action === 'confirm') {
|
||||
this.bulkUnfriendSelection();
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
bulkUnfriendSelection() {
|
||||
for (const ctx of this.friendsListTable.data) {
|
||||
if (ctx.$selected) {
|
||||
friendRequest.deleteFriend({
|
||||
userId: ctx.id
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
async friendsListLoadUsers() {
|
||||
this.friendsListLoading = true;
|
||||
let i = 0;
|
||||
const toFetch = [];
|
||||
for (const ctx of this.friends.values()) {
|
||||
if (ctx.ref && !ctx.ref.date_joined) {
|
||||
toFetch.push(ctx.id);
|
||||
}
|
||||
}
|
||||
const length = toFetch.length;
|
||||
for (const userId of toFetch) {
|
||||
if (!this.friendsListLoading) {
|
||||
this.friendsListLoadingProgress = '';
|
||||
return;
|
||||
}
|
||||
i++;
|
||||
this.friendsListLoadingProgress = `${i}/${length}`;
|
||||
try {
|
||||
await userRequest.getUser({
|
||||
userId
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
this.friendsListLoadingProgress = '';
|
||||
this.friendsListLoading = false;
|
||||
},
|
||||
selectFriendsListRow(val) {
|
||||
if (val === null) {
|
||||
return;
|
||||
}
|
||||
if (!val.id) {
|
||||
this.$emit('lookup-user', val);
|
||||
return;
|
||||
}
|
||||
this.showUserDialog(val.id);
|
||||
},
|
||||
sortAlphabetically(a, b, field) {
|
||||
if (!a[field] || !b[field]) {
|
||||
return 0;
|
||||
}
|
||||
return a[field].toLowerCase().localeCompare(b[field].toLowerCase());
|
||||
},
|
||||
sortLanguages(a, b) {
|
||||
const sortedA = [];
|
||||
const sortedB = [];
|
||||
a.$languages.forEach((item) => {
|
||||
sortedA.push(item.value);
|
||||
});
|
||||
b.$languages.forEach((item) => {
|
||||
sortedB.push(item.value);
|
||||
});
|
||||
sortedA.sort();
|
||||
sortedB.sort();
|
||||
return JSON.stringify(sortedA).localeCompare(JSON.stringify(sortedB));
|
||||
},
|
||||
timeToText(val) {
|
||||
return utils.timeToText(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user