diff --git a/src/app.js b/src/app.js index 16115a70..570d1915 100644 --- a/src/app.js +++ b/src/app.js @@ -31,6 +31,9 @@ import _apiInit from './classes/apiInit.js'; import _apiRequestHandler from './classes/apiRequestHandler.js'; import _vrcxJsonStorage from './classes/vrcxJsonStorage.js'; +// tabs +import ModerationTab from './views/tabs/Moderation.vue'; + // components import SimpleSwitch from './components/settings/SimpleSwitch.vue'; @@ -96,7 +99,8 @@ console.log(`isLinux: ${LINUX}`); const i18n = new VueI18n({ locale: 'en', fallbackLocale: 'en', - messages: localizedStrings + messages: localizedStrings, + silentTranslationWarn: true }); const $t = i18n.t.bind(i18n); Vue.use(ElementUI, { @@ -157,6 +161,11 @@ console.log(`isLinux: ${LINUX}`); }, watch: {}, components: { + // tabs + ModerationTab, + + // components + // - settings SimpleSwitch }, el: '#x-app', @@ -3838,12 +3847,15 @@ console.log(`isLinux: ${LINUX}`); workerTimers.setTimeout(() => { // fix some weird sorting bug when disabling data tables - if ( - typeof this.$refs.playerModerationTableRef?.sortData !== - 'undefined' - ) { - this.$refs.playerModerationTableRef.sortData.prop = 'created'; - } + + // looks like it's not needed anymore + // if ( + // typeof this.$refs.playerModerationTableRef?.sortData !== + // 'undefined' + // ) { + // this.$refs.playerModerationTableRef.sortData.prop = 'created'; + // } + if ( typeof this.$refs.notificationTableRef?.sortData !== 'undefined' ) { @@ -7511,33 +7523,7 @@ console.log(`isLinux: ${LINUX}`); $app.data.playerModerationTable = { data: [], - lastRunLength: 0, - filters: [ - { - prop: 'type', - value: [], - filterFn: (row, filter) => - filter.value.some((v) => v === row.type) - }, - { - prop: ['sourceDisplayName', 'targetDisplayName'], - value: '' - } - ], - tableProps: { - stripe: true, - size: 'mini', - defaultSort: { - prop: 'created', - order: 'descending' - } - }, - pageSize: $app.data.tablePageSize, - paginationProps: { - small: true, - layout: 'sizes,prev,pager,next,total', - pageSizes: [10, 15, 25, 50, 100] - } + pageSize: $app.data.tablePageSize }; API.$on('LOGIN', function () { @@ -7545,10 +7531,10 @@ console.log(`isLinux: ${LINUX}`); }); API.$on('PLAYER-MODERATION', function (args) { - var { ref } = args; - var array = $app.playerModerationTable.data; - var { length } = array; - for (var i = 0; i < length; ++i) { + let { ref } = args; + let array = $app.playerModerationTable.data; + let { length } = array; + for (let i = 0; i < length; ++i) { if (array[i].id === ref.id) { Vue.set(array, i, ref); return; @@ -7558,10 +7544,10 @@ console.log(`isLinux: ${LINUX}`); }); API.$on('PLAYER-MODERATION:@DELETE', function (args) { - var { ref } = args; - var array = $app.playerModerationTable.data; - var { length } = array; - for (var i = 0; i < length; ++i) { + let { ref } = args; + let array = $app.playerModerationTable.data; + let { length } = array; + for (let i = 0; i < length; ++i) { if (array[i].id === ref.id) { array.splice(i, 1); return; @@ -7569,26 +7555,6 @@ console.log(`isLinux: ${LINUX}`); } }); - $app.methods.deletePlayerModeration = function (row) { - API.deletePlayerModeration({ - moderated: row.targetUserId, - type: row.type - }); - }; - - $app.methods.deletePlayerModerationPrompt = function (row) { - this.$confirm(`Continue? Delete Moderation ${row.type}`, 'Confirm', { - confirmButtonText: 'Confirm', - cancelButtonText: 'Cancel', - type: 'info', - callback: (action) => { - if (action === 'confirm') { - this.deletePlayerModeration(row); - } - } - }); - }; - // #endregion // #region | App: Notification @@ -7844,10 +7810,6 @@ console.log(`isLinux: ${LINUX}`); 'VRCX_friendLogTableFilters', JSON.stringify(this.friendLogTable.filters[0].value) ); - await configRepository.setString( - 'VRCX_playerModerationTableFilters', - JSON.stringify(this.playerModerationTable.filters[0].value) - ); await configRepository.setString( 'VRCX_notificationTableFilters', JSON.stringify(this.notificationTable.filters[0].value) @@ -7871,12 +7833,6 @@ console.log(`isLinux: ${LINUX}`); $app.data.friendLogTable.filters[0].value = JSON.parse( await configRepository.getString('VRCX_friendLogTableFilters', '[]') ); - $app.data.playerModerationTable.filters[0].value = JSON.parse( - await configRepository.getString( - 'VRCX_playerModerationTableFilters', - '[]' - ) - ); $app.data.notificationTable.filters[0].value = JSON.parse( await configRepository.getString('VRCX_notificationTableFilters', '[]') ); diff --git a/src/index.pug b/src/index.pug index ec4450e8..404be6ba 100644 --- a/src/index.pug +++ b/src/index.pug @@ -71,8 +71,12 @@ html +friendLogTab() //- moderation - include ./mixins/tabs/moderation.pug - +moderationTab() + moderation-tab( + v-if="$refs.menu?.activeIndex === 'moderation'" + :Api='API' + :table-data='playerModerationTable' + :show-user-dialog='showUserDialog' + :shift-held='shiftHeld') //- notification include ./mixins/tabs/notifications.pug diff --git a/src/mixins/tabs/moderation.pug b/src/mixins/tabs/moderation.pug deleted file mode 100644 index 0a8bfbf0..00000000 --- a/src/mixins/tabs/moderation.pug +++ /dev/null @@ -1,30 +0,0 @@ -mixin moderationTab() - .x-container(v-if="$refs.menu && $refs.menu.activeIndex === 'moderation'") - data-tables(v-bind="playerModerationTable" ref="playerModerationTableRef" v-loading="API.isPlayerModerationsLoading") - template(#tool) - div(style="margin:0 0 10px;display:flex;align-items:center") - el-select(v-model="playerModerationTable.filters[0].value" @change="saveTableFilters" multiple clearable style="flex:1" :placeholder="$t('view.moderation.filter_placeholder')") - el-option(v-for="type in ['block', 'unblock', 'mute', 'unmute', 'interactOn', 'interactOff', 'muteChat']" :key="type" :label="$t('view.moderation.filters.' + type)" :value="type") - el-input(v-model="playerModerationTable.filters[1].value" :placeholder="$t('view.moderation.search_placeholder')" style="flex:none;width:150px;margin:0 10px") - el-tooltip(placement="bottom" :content="$t('view.moderation.refresh_tooltip')" :disabled="hideTooltips") - el-button(type="default" :loading="API.isPlayerModerationsLoading" @click="API.refreshPlayerModerations()" icon="el-icon-refresh" circle style="flex:none") - el-table-column(:label="$t('table.moderation.date')" prop="created" sortable="custom" width="120") - template(#default="scope") - el-tooltip(placement="right") - template(#content) - span {{ scope.row.created | formatDate('long') }} - span {{ scope.row.created | formatDate('short') }} - el-table-column(:label="$t('table.moderation.type')" prop="type" width="100") - template(#default="scope") - span(v-text="$t('view.moderation.filters.' + scope.row.type)") - el-table-column(:label="$t('table.moderation.source')" prop="sourceDisplayName") - template(#default="scope") - span.x-link(v-text="scope.row.sourceDisplayName" @click="showUserDialog(scope.row.sourceUserId)") - el-table-column(:label="$t('table.moderation.target')" prop="targetDisplayName") - template(#default="scope") - span.x-link(v-text="scope.row.targetDisplayName" @click="showUserDialog(scope.row.targetUserId)") - el-table-column(:label="$t('table.moderation.action')" width="80" align="right") - template(#default="scope") - template(v-if="scope.row.sourceUserId === API.currentUser.id") - el-button(v-if="shiftHeld" style="color:#f56c6c" type="text" icon="el-icon-close" size="mini" @click="deletePlayerModeration(scope.row)") - el-button(v-else type="text" icon="el-icon-close" size="mini" @click="deletePlayerModerationPrompt(scope.row)") diff --git a/src/views/tabs/Moderation.vue b/src/views/tabs/Moderation.vue new file mode 100644 index 00000000..1133f9c5 --- /dev/null +++ b/src/views/tabs/Moderation.vue @@ -0,0 +1,234 @@ + + + + +