Basix/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add select for managing tags

Browse source
This commit is contained in:
Angelina Filippova 2020-10-04 22:01:09 +03:00
parent 37b2fb3199
commit ec739099b6
3 changed files with 119 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/lang/en.js
View file

@ -283,7 +283,8 @@ export default {
confirmEnablingTagPolicy: 'Are you sure you want to add TagPolicy to the list of enabled MRF policies?',
enableTagPolicySuccessMessage: 'MRF TagPolicy was enabled',
createCustomTag: 'Create custom tag and add it to user',
moderateTags: 'Moderate Tags'
customTags: 'Custom Tags',
defaultTags: 'Default Tags'
},
statuses: {
statuses: 'Statuses',

128
src/views/users/components/ModerationDropdown.vue
View file

@ -67,8 +67,8 @@
@click.native="handleConfirmationResend(user)">
{{ $t('users.resendConfirmation') }}
</el-dropdown-item>
<el-collapse accordion class="moderate-tags">
<el-collapse-item :title="$t('users.moderateTags')" name="open-tags">
<!-- <el-collapse accordion class="moderate-tags">
<el-collapse-item name="open-tags">
<el-dropdown-item
v-if="tagPolicyEnabled"
:divided="showAdminAction(user)"
@ -112,21 +112,35 @@
{{ $t('users.disableAnySubscription') }}
<i v-if="user.tags.includes('mrf_tag:disable-any-subscription')" class="el-icon-check"/>
</el-dropdown-item>
<el-dropdown-item divided class="custom-tags-titile">
{{ $t('users.customTags') }}
</el-dropdown-item>
<el-dropdown-item
v-if="user.local && tagPolicyEnabled"
icon="el-icon-plus"
@click.native="$emit('open-custom-tag-dialog', user)">
{{ $t('users.createCustomTag') }}
<el-popover
:title="`${$t('users.createCustomTag')} ${user.nickname}`"
placement="left"
width="400"
trigger="click">
<el-form :inline="true" :model="customTagForm" >
<el-form-item prop="name">
<el-input v-model="customTagForm.name" autofocus class="custom-tag-input"/>
</el-form-item>
<el-form-item class="close-custom-tag-button">
<el-button @click="closeCustomTagDialog">{{ $t('users.cancel') }}</el-button>
</el-form-item>
<el-form-item class="add-custom-tag-button">
<el-button type="primary" @click="addCustomTag">{{ $t('users.create') }}</el-button>
</el-form-item>
</el-form>
<span slot="reference">{{ $t('users.createCustomTag') }}</span>
<el-button slot="reference">Hover to activate</el-button>
</el-popover>
</el-dropdown-item>
</el-collapse-item>
</el-collapse>
<el-dropdown-item
v-if="!tagPolicyEnabled"
divided
class="no-hover"
@click.native="enableTagPolicy">
{{ $t('users.enableTagPolicy') }}
</el-dropdown-item>
</el-collapse> -->
<el-dropdown-item
v-if="user.local"
divided
@ -143,6 +157,37 @@
@click.native="disableMfa(user.nickname)">
{{ $t('users.disableMfa') }}
</el-dropdown-item>
<el-select
v-if="tagPolicyEnabled"
v-model="selectedTags"
multiple
filterable
allow-create
placeholder="Select Tags"
size="small"
class="select-tags">
<el-option-group :label="$t('users.defaultTags')">
<el-option
v-for="(value, name) in defaultTags"
:key="name"
:label="value"
:value="name"/>
</el-option-group>
<el-option-group :label="$t('users.customTags')">
<el-option
v-for="item in customTags"
:key="item"
:value="item"
class="capitalize"/>
</el-option-group>
</el-select>
<el-dropdown-item
v-if="!tagPolicyEnabled"
divided
class="no-hover"
@click.native="enableTagPolicy">
{{ $t('users.enableTagPolicy') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
@ -168,7 +213,7 @@ export default {
},
data() {
return {
tagsOpen: []
selectedTags: []
}
},
computed: {
@ -185,14 +230,48 @@ export default {
})
}
},
customTags() {
return this.$store.state.users.tags.filter(tag => !Object.keys(this.mapTags).includes(tag))
},
defaultTags() {
return Object.keys(this.mapTags)
.filter(tag => this.$store.state.users.tags.includes(tag))
.reduce((acc, el) => {
acc[el] = this.mapTags[el]
return acc
}, {})
},
isDesktop() {
return this.$store.state.app.device === 'desktop'
},
mapTags() {
return {
'mrf_tag:media-force-nsfw': 'NSFW',
'mrf_tag:media-strip': 'Strip Media',
'mrf_tag:force-unlisted': 'Unlisted',
'mrf_tag:sandbox': 'Sandbox',
'mrf_tag:verified': 'Verified',
'mrf_tag:disable-remote-subscription': 'Disable remote subscription',
'mrf_tag:disable-any-subscription': 'Disable any subscription'
}
},
tagPolicyEnabled() {
return this.$store.state.users.mrfPolicies.includes('Pleroma.Web.ActivityPub.MRF.TagPolicy')
}
},
methods: {
addCustomTag() {
this.$store.dispatch('AddTag', {
users: [this.customTagUser],
tag: this.customTagForm.name,
_userId: this.customTagUser.id,
_statusId: this.statusId
})
this.createCustomTagDialogOpen = false
},
closeCustomTagDialog() {
this.createCustomTagDialogOpen = false
},
disableMfa(nickname) {
this.$store.dispatch('DisableMfa', nickname)
},
@ -295,6 +374,17 @@ export default {
</script>
<style rel='stylesheet/scss' lang='scss'>
.capitalize {
text-transform: capitalize;
}
.el-form--inline {
.el-form-item.add-custom-tag-button {
margin-right: 0;
}
.el-form-item.close-custom-tag-button {
margin-right: 8px;
}
}
.el-dropdown-menu--small .el-dropdown-menu__item.el-dropdown-menu__item--divided.actor-type-dropdown:before {
margin: 0 0;
height: 0;
@ -326,8 +416,14 @@ export default {
}
}
.actor-type-select .el-input.is-focus .el-input__inner {
border-color: transparent;
}
border-color: transparent;
}
.custom-tags-titile {
padding-left: 20px;
font-size: 12px;
color: #909399;
line-height: 30px;
}
.moderate-user-button {
text-align: left;
width: 350px;
@ -359,6 +455,10 @@ export default {
margin-top: 0;
}
}
.select-tags {
padding: 2px 15px 0 15px;
width: 100%;
}
@media only screen and (max-width:480px) {
.moderate-user-button {
width: 100%

49
src/views/users/index.vue
View file

@ -25,8 +25,7 @@
</el-button>
<multiple-users-menu
:selected-users="selectedUsers"
@apply-action="clearSelection"
@open-custom-tag-dialog="openCustomTagDialog"/>
@apply-action="clearSelection"/>
</div>
<new-account-dialog
:dialog-form-visible="createAccountDialogOpen"
@ -103,8 +102,7 @@
v-if="propertyExists(scope.row, 'nickname')"
:user="scope.row"
:page="'users'"
@open-reset-token-dialog="openResetPasswordDialog"
@open-custom-tag-dialog="openCustomTagDialog"/>
@open-reset-token-dialog="openResetPasswordDialog"/>
<el-button v-else type="text" disabled>
{{ $t('users.moderation') }}
<i v-if="isDesktop" class="el-icon-arrow-down el-icon--right"/>
@ -115,24 +113,6 @@
<reset-password-dialog
:reset-password-dialog-open="resetPasswordDialogOpen"
@close-reset-token-dialog="closeResetPasswordDialog"/>
<el-dialog
:visible.sync="createCustomTagDialogOpen"
:show-close="false"
:title="`${$t('users.createCustomTag')} ${customTagUser.nickname}`"
@open="resetForm">
<el-form ref="customTagForm" :model="customTagForm" :label-width="isDesktop ? '120px' : '85px'">
<el-form-item :label="$t('users.name')" prop="name">
<el-input v-model="customTagForm.name" name="name" autofocus/>
</el-form-item>
<el-form-item :label="$t('users.label')" prop="label">
<el-input v-model="customTagForm.label" name="label"/>
</el-form-item>
</el-form>
<span slot="footer">
<el-button @click="closeCustomTagDialog">{{ $t('users.cancel') }}</el-button>
<el-button type="primary" @click="addCustomTag">{{ $t('users.create') }}</el-button>
</span>
</el-dialog>
<div v-if="!loading" class="pagination">
<el-pagination
:total="usersCount"
@ -176,13 +156,7 @@ export default {
search: '',
selectedUsers: [],
createAccountDialogOpen: false,
resetPasswordDialogOpen: false,
createCustomTagDialogOpen: false,
customTagForm: {
name: '',
label: ''
},
customTagUser: {}
resetPasswordDialogOpen: false
}
},
computed: {
@ -232,21 +206,9 @@ export default {
this.$store.dispatch('ClearUsersState')
},
methods: {
addCustomTag() {
this.$store.dispatch('AddTag', {
users: [this.customTagUser],
tag: this.customTagForm.name,
_userId: this.customTagUser.id,
_statusId: this.statusId
})
this.createCustomTagDialogOpen = false
},
clearSelection() {
this.$refs.usersTable.clearSelection()
},
closeCustomTagDialog() {
this.createCustomTagDialogOpen = false
},
closeResetPasswordDialog() {
this.resetPasswordDialogOpen = false
this.$store.dispatch('RemovePasswordToken')
@ -274,10 +236,6 @@ export default {
handleSelectionChange(value) {
this.$data.selectedUsers = value
},
openCustomTagDialog(user) {
this.customTagUser = user
this.createCustomTagDialogOpen = true
},
openResetPasswordDialog() {
this.resetPasswordDialogOpen = true
},
@ -287,7 +245,6 @@ export default {
regReason(reason) {
return reason && reason.length > 0
},
resetForm() {},
showDeactivatedButton(id) {
return this.$store.state.user.id !== id
}