mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-18 22:33:50 +02:00
511 lines
23 KiB
Vue
511 lines
23 KiB
Vue
<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>
|