feat: admin - manage groups + permissions + page rules
This commit is contained in:
Nicolas Giard
302
client/components/admin/admin-groups-edit-rules.vue
Normal file
302
client/components/admin/admin-groups-edit-rules.vue
Normal file
@@ -0,0 +1,302 @@
|
||||
<template lang="pug">
|
||||
v-card.wiki-form
|
||||
v-card-text(v-if='group.id === 1')
|
||||
v-alert.radius-7(
|
||||
:class='$vuetify.dark ? "grey darken-4" : "orange lighten-5"'
|
||||
color='orange darken-2'
|
||||
outline
|
||||
:value='true'
|
||||
icon='lock_outline'
|
||||
) This group has access to everything.
|
||||
template(v-else)
|
||||
v-card-title(:class='$vuetify.dark ? `grey darken-3-d5` : `grey lighten-5`')
|
||||
v-alert.radius-7(
|
||||
:class='$vuetify.dark ? `grey darken-3-d3` : `white`'
|
||||
:value='true'
|
||||
color='grey'
|
||||
outline
|
||||
icon='info'
|
||||
) You must enable global content permissions (under Permissions tab) for page rules to have any effect.
|
||||
v-spacer
|
||||
v-btn(depressed, color='primary', @click='addRule')
|
||||
v-icon(left) add
|
||||
| Add Rule
|
||||
v-menu(
|
||||
right
|
||||
offset-y
|
||||
nudge-left='115'
|
||||
)
|
||||
v-btn.is-icon(slot='activator', flat, outline, color='primary')
|
||||
v-icon more_horiz
|
||||
v-list(dense)
|
||||
v-list-tile(@click='comingSoon')
|
||||
v-list-tile-avatar
|
||||
v-icon keyboard_capslock
|
||||
v-list-tile-title Load Preset
|
||||
v-divider
|
||||
v-list-tile(@click='comingSoon')
|
||||
v-list-tile-avatar
|
||||
v-icon publish
|
||||
v-list-tile-title Save As Preset
|
||||
v-divider
|
||||
v-list-tile(@click='comingSoon')
|
||||
v-list-tile-avatar
|
||||
v-icon cloud_upload
|
||||
v-list-tile-title Import Rules
|
||||
v-divider
|
||||
v-list-tile(@click='comingSoon')
|
||||
v-list-tile-avatar
|
||||
v-icon cloud_download
|
||||
v-list-tile-title Export Rules
|
||||
v-card-text(:class='$vuetify.dark ? `grey darken-4-l5` : `white`')
|
||||
.rules
|
||||
.caption(v-if='group.pageRules.length === 0')
|
||||
em(:class='$vuetify.dark ? `grey--text` : `blue-grey--text`') This group has no page rules yet.
|
||||
.rule(v-for='rule of group.pageRules', :key='rule.id')
|
||||
v-btn.ma-0.rule-deny-btn(
|
||||
solo
|
||||
:color='rule.deny ? "red" : "green"'
|
||||
dark
|
||||
@click='rule.deny = !rule.deny'
|
||||
)
|
||||
v-icon(v-if='rule.deny') block
|
||||
v-icon(v-else) check_circle
|
||||
//- Roles
|
||||
v-select.ml-1(
|
||||
solo
|
||||
:items='roles'
|
||||
v-model='rule.roles'
|
||||
placeholder='Select Role(s)...'
|
||||
hide-details
|
||||
multiple
|
||||
chips
|
||||
deletable-chips
|
||||
small-chips
|
||||
style='flex: 0 1 440px;'
|
||||
:menu-props='{ "maxHeight": 500 }'
|
||||
clearable
|
||||
dense
|
||||
)
|
||||
template(slot='selection', slot-scope='{ item, index }')
|
||||
v-chip.white--text.ml-0(v-if='index <= 2', small, label, :color='rule.deny ? `red` : `green`').caption {{ item.value }}
|
||||
v-chip.white--text.ml-0(v-if='index === 3', small, label, :color='rule.deny ? `red lighten-2` : `green lighten-2`').caption + {{ rule.roles.length - 3 }} more
|
||||
template(slot='item', slot-scope='props')
|
||||
v-list-tile-action(style='min-width: 30px;')
|
||||
v-checkbox(
|
||||
v-model='props.tile.props.value'
|
||||
hide-details
|
||||
color='primary'
|
||||
)
|
||||
v-icon.mr-2(:color='rule.deny ? `red` : `green`') {{props.item.icon}}
|
||||
v-list-tile-content
|
||||
v-list-tile-title.body-2 {{props.item.text}}
|
||||
v-chip.mr-2.grey--text(label, small, :color='$vuetify.dark ? `grey darken-4` : `grey lighten-4`').caption {{props.item.value}}
|
||||
|
||||
//- Match
|
||||
v-select.ml-1.mr-1(
|
||||
solo
|
||||
:items='matches'
|
||||
v-model='rule.match'
|
||||
placeholder='Match...'
|
||||
hide-details
|
||||
style='flex: 0 1 250px;'
|
||||
dense
|
||||
)
|
||||
template(slot='selection', slot-scope='{ item, index }')
|
||||
.body-1 {{item.text}}
|
||||
template(slot='item', slot-scope='data')
|
||||
v-list-tile-avatar
|
||||
v-avatar.white--text.radius-4(color='blue', size='30', tile) {{ data.item.icon }}
|
||||
v-list-tile-content
|
||||
v-list-tile-title(v-html='data.item.text')
|
||||
//- Locales
|
||||
v-select.mr-1(
|
||||
:background-color='$vuetify.dark ? `grey darken-3-d5` : `blue-grey lighten-5`'
|
||||
solo
|
||||
:items='locales'
|
||||
v-model='rule.locales'
|
||||
placeholder='Any Locale'
|
||||
multiple
|
||||
hide-details
|
||||
dense
|
||||
:menu-props='{ "minWidth": 250 }'
|
||||
style='flex: 0 1 150px;'
|
||||
)
|
||||
template(slot='selection', slot-scope='{ item, index }')
|
||||
v-chip.white--text.ml-0(v-if='rule.locales.length === 1', small, label, :color='rule.deny ? `red` : `green`').caption {{ item.value.toUpperCase() }}
|
||||
v-chip.white--text.ml-0(v-else-if='index === 0', small, label, :color='rule.deny ? `red` : `green`').caption {{ rule.locales.length }} locales
|
||||
v-list-tile(slot='prepend-item', @click='rule.locales = []')
|
||||
v-list-tile-action(style='min-width: 30px;')
|
||||
v-checkbox(
|
||||
:input-value='rule.locales.length === 0'
|
||||
hide-details
|
||||
color='primary'
|
||||
readonly
|
||||
)
|
||||
v-icon.mr-2(:color='rule.deny ? `red` : `green`') public
|
||||
v-list-tile-content
|
||||
v-list-tile-title.body-2 Any Locale
|
||||
v-divider(slot='prepend-item')
|
||||
template(slot='item', slot-scope='props')
|
||||
v-list-tile-action(style='min-width: 30px;')
|
||||
v-checkbox(
|
||||
v-model='props.tile.props.value'
|
||||
hide-details
|
||||
color='primary'
|
||||
)
|
||||
v-icon.mr-2(:color='rule.deny ? `red` : `green`') language
|
||||
v-list-tile-content
|
||||
v-list-tile-title.body-2 {{props.item.text}}
|
||||
v-chip.mr-2.grey--text(label, small, :color='$vuetify.dark ? `grey darken-4` : `grey lighten-4`').caption {{props.item.value.toUpperCase()}}
|
||||
|
||||
//- Path
|
||||
v-text-field(
|
||||
solo
|
||||
v-model='rule.path'
|
||||
label='Path'
|
||||
:prefix='rule.match !== `END` ? `/` : null'
|
||||
:placeholder='rule.match === `REGEX` ? `Regular Expression` : `Path`'
|
||||
:suffix='rule.match === `REGEX` ? `/` : null'
|
||||
hide-details
|
||||
:color='$vuetify.dark ? `grey` : `blue-grey`'
|
||||
)
|
||||
|
||||
v-btn(icon, @click='removeRule(rule.id)')
|
||||
v-icon(:color='$vuetify.dark ? `grey` : `blue-grey`') clear
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import nanoid from 'nanoid/non-secure/generate'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
roles: [
|
||||
{ text: 'Read Pages', value: 'READ', icon: 'insert_drive_file' },
|
||||
{ text: 'Create Pages', value: 'WRITE', icon: 'insert_drive_file' },
|
||||
{ text: 'Edit + Move Pages', value: 'MANAGE', icon: 'insert_drive_file' },
|
||||
{ text: 'Delete Pages', value: 'DELETE', icon: 'insert_drive_file' },
|
||||
{ text: 'Read / Use Assets', value: 'AS_READ', icon: 'camera' },
|
||||
{ text: 'Upload Assets', value: 'AS_WRITE', icon: 'camera' },
|
||||
{ text: 'Edit + Delete Assets', value: 'AS_MANAGE', icon: 'camera' },
|
||||
{ text: 'Read Comments', value: 'CM_READ', icon: 'insert_comment' },
|
||||
{ text: 'Create Comments', value: 'CM_WRITE', icon: 'insert_comment' },
|
||||
{ text: 'Edit + Delete Comments', value: 'CM_MANAGE', icon: 'insert_comment' }
|
||||
],
|
||||
matches: [
|
||||
{ text: 'Path Starts With...', value: 'START', icon: '/...' },
|
||||
{ text: 'Path is Exactly...', value: 'EXACT', icon: '=' },
|
||||
{ text: 'Path Ends With...', value: 'END', icon: '.../' },
|
||||
{ text: 'Path Matches Regex...', value: 'REGEX', icon: '$.*' }
|
||||
],
|
||||
locales: [
|
||||
{ text: 'English', value: 'en' },
|
||||
{ text: 'Français', value: 'fr' },
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
group: {
|
||||
get() { return this.value },
|
||||
set(val) { this.$set('input', val) }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addRule(group) {
|
||||
this.group.pageRules.push({
|
||||
id: nanoid('1234567890abcdef', 10),
|
||||
path: '',
|
||||
roles: [],
|
||||
match: 'START',
|
||||
deny: false,
|
||||
locales: []
|
||||
})
|
||||
},
|
||||
removeRule(rule) {
|
||||
this.group.pageRules.splice(_.findIndex(this.group.pageRules, ['id', rule.id]), 1)
|
||||
},
|
||||
comingSoon() {
|
||||
this.$store.commit('showNotification', {
|
||||
style: 'indigo',
|
||||
message: `Coming soon...`,
|
||||
icon: 'directions_boat'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.rules {
|
||||
background-color: mc('blue-grey', '50');
|
||||
border-radius: 4px;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
|
||||
@at-root .theme--dark & {
|
||||
background-color: mc('grey', '800');
|
||||
}
|
||||
}
|
||||
|
||||
.rule {
|
||||
display: flex;
|
||||
background-color: mc('blue-grey', '100');
|
||||
border-radius: 4px;
|
||||
padding: .5rem;
|
||||
|
||||
&-enter-active, &-leave-active {
|
||||
transition: all .5s ease;
|
||||
}
|
||||
&-enter, &-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@at-root .theme--dark & {
|
||||
background-color: mc('grey', '700');
|
||||
}
|
||||
|
||||
& + .rule {
|
||||
margin-top: .5rem;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '+';
|
||||
position: absolute;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
color: mc('blue-grey', '700');
|
||||
font-size: 1.25rem;
|
||||
background-color: mc('blue-grey', '50');
|
||||
left: -2rem;
|
||||
top: -1.3rem;
|
||||
|
||||
@at-root .theme--dark & {
|
||||
background-color: mc('grey', '800');
|
||||
color: mc('grey', '600');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group + * {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
&-deny-btn {
|
||||
height: 48px;
|
||||
border-radius: 2px 0 0 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user