Capability form as a modal intead of collapse. #274.
This commit is contained in:
Mateus Machado Luna
parent
a8780f4e6b
commit
b5fbaccbd0
|
|
@ -25,9 +25,7 @@
|
||||||
</thead>
|
</thead>
|
||||||
<tbody v-if="!isLoading">
|
<tbody v-if="!isLoading">
|
||||||
<template v-for="(capability, index) of capabilities">
|
<template v-for="(capability, index) of capabilities">
|
||||||
<tr
|
<tr :key="index">
|
||||||
:key="index"
|
|
||||||
:style="index == editingCapability ? 'background-color: #f2f2f2' : ''">
|
|
||||||
<!-- Name -->
|
<!-- Name -->
|
||||||
<td
|
<td
|
||||||
class="column-default-width column-main-content"
|
class="column-default-width column-main-content"
|
||||||
|
|
@ -92,13 +90,11 @@
|
||||||
<td
|
<td
|
||||||
class="actions-cell column-default-width"
|
class="actions-cell column-default-width"
|
||||||
:label="$i18n.get('label_actions')">
|
:label="$i18n.get('label_actions')">
|
||||||
<div
|
<div class="actions-container">
|
||||||
class="actions-container"
|
|
||||||
:style="index == editingCapability ? 'background-color: #dbdbdb' : ''">
|
|
||||||
<a
|
<a
|
||||||
id="button-edit"
|
id="button-edit"
|
||||||
:aria-label="$i18n.get('edit')"
|
:aria-label="$i18n.get('edit')"
|
||||||
@click="toggleEditForm(index)">
|
@click="openCapabilitiyEditModal(index)">
|
||||||
<span
|
<span
|
||||||
v-tooltip="{
|
v-tooltip="{
|
||||||
content: $i18n.get('edit'),
|
content: $i18n.get('edit'),
|
||||||
|
|
@ -113,76 +109,6 @@
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
|
||||||
:key="index + '-form'"
|
|
||||||
class="capabilities-edit-form">
|
|
||||||
<transition name="form-capabilities">
|
|
||||||
<td
|
|
||||||
v-if="index == editingCapability"
|
|
||||||
class="tainacan-form"
|
|
||||||
colspan="5">
|
|
||||||
<div>
|
|
||||||
<template v-if="existingRoles && Object.values(existingRoles).length && capability.roles">
|
|
||||||
<b-field :addons="false">
|
|
||||||
<label class="label is-inline-block">
|
|
||||||
{{ $i18n.get('label_inherited_roles') }}
|
|
||||||
<help-button
|
|
||||||
:title="$i18n.get('label_inherited_roles')"
|
|
||||||
:message="$i18n.get('info_inherited_roles')"/>
|
|
||||||
</label>
|
|
||||||
<div class="roles-list">
|
|
||||||
<b-checkbox
|
|
||||||
v-if="capability.roles_inherited[role.slug]"
|
|
||||||
v-for="(role, roleIndex) of existingRoles"
|
|
||||||
:key="roleIndex"
|
|
||||||
size="is-small"
|
|
||||||
:value="capability.roles[role.slug] || capability.roles_inherited[role.slug] ? true : false"
|
|
||||||
name="roles_inherited"
|
|
||||||
disabled>
|
|
||||||
{{ role.name }}
|
|
||||||
</b-checkbox>
|
|
||||||
</div>
|
|
||||||
</b-field>
|
|
||||||
</template>
|
|
||||||
<p
|
|
||||||
v-else
|
|
||||||
class="is-italic has-text-gray">
|
|
||||||
{{ $i18n.get('info_no_role_associated_capability') }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<template v-if="existingRoles && Object.values(existingRoles).length && capability.roles">
|
|
||||||
<b-field :addons="false">
|
|
||||||
<label class="label is-inline-block">
|
|
||||||
{{ $i18n.get('label_associated_roles') }}
|
|
||||||
<help-button
|
|
||||||
:title="$i18n.get('label_associated_roles')"
|
|
||||||
:message="$i18n.get('info_associated_roles')"/>
|
|
||||||
</label>
|
|
||||||
<div class="roles-list">
|
|
||||||
<b-checkbox
|
|
||||||
v-if="!capability.roles_inherited[role.slug]"
|
|
||||||
v-for="(role, roleIndex) of existingRoles"
|
|
||||||
:key="roleIndex"
|
|
||||||
size="is-small"
|
|
||||||
:value="capability.roles[role.slug] || capability.roles_inherited[role.slug] ? true : false"
|
|
||||||
@input="($event) => updateRole(role.slug, index, $event)"
|
|
||||||
name="roles">
|
|
||||||
{{ role.name }}
|
|
||||||
</b-checkbox>
|
|
||||||
</div>
|
|
||||||
</b-field>
|
|
||||||
</template>
|
|
||||||
<p
|
|
||||||
v-else
|
|
||||||
class="is-italic has-text-gray">
|
|
||||||
{{ $i18n.get('info_no_role_associated_capability') }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
</transition>
|
|
||||||
</tr>
|
|
||||||
</template>
|
</template>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
@ -191,7 +117,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapActions } from 'vuex';
|
import CapabilityEditionModal from '../other/capability-edition-modal.vue';
|
||||||
|
|
||||||
// Auxiliary component for avoinding multiple calls to getCompleteRolesList
|
// Auxiliary component for avoinding multiple calls to getCompleteRolesList
|
||||||
const CompleteRolesList = {
|
const CompleteRolesList = {
|
||||||
|
|
@ -203,34 +129,22 @@
|
||||||
name: 'CapabilitiesList',
|
name: 'CapabilitiesList',
|
||||||
props: {
|
props: {
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
capabilities: Array,
|
capabilities: Array
|
||||||
editingCapability: ''
|
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
CompleteRolesList
|
CompleteRolesList
|
||||||
},
|
},
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
existingRoles: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions('capability', [
|
openCapabilitiyEditModal(capabilityKey) {
|
||||||
'fetchRoles',
|
this.$buefy.modal.open({
|
||||||
'addCapabilityToRole',
|
parent: this,
|
||||||
'removeCapabilityFromRole'
|
component: CapabilityEditionModal,
|
||||||
]),
|
props: {
|
||||||
toggleEditForm(capabilityKey) {
|
capability: this.capabilities[capabilityKey],
|
||||||
if (this.editingCapability == capabilityKey)
|
capabilityKey: capabilityKey
|
||||||
this.editingCapability = ''
|
},
|
||||||
else
|
trapFocus: true
|
||||||
this.editingCapability = capabilityKey;
|
});
|
||||||
},
|
|
||||||
updateRole(role, capabilityKey, value) {
|
|
||||||
if (value)
|
|
||||||
this.addCapabilityToRole({ capabilityKey: capabilityKey.replace('%d', 'all'), role: role })
|
|
||||||
else
|
|
||||||
this.removeCapabilityFromRole({ capabilityKey: capabilityKey.replace('%d', 'all'), role: role })
|
|
||||||
},
|
},
|
||||||
getCompleteRolesList(roles, rolesInherited) {
|
getCompleteRolesList(roles, rolesInherited) {
|
||||||
const rolesArray = roles && !Array.isArray(roles) ? Object.values(roles) : [];
|
const rolesArray = roles && !Array.isArray(roles) ? Object.values(roles) : [];
|
||||||
|
|
@ -256,9 +170,7 @@
|
||||||
return '<span class=is-italic>' + this.$i18n.get('info_no_associated_role') + '</span>';
|
return '<span class=is-italic>' + this.$i18n.get('info_no_associated_role') + '</span>';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
|
||||||
this.fetchRoles().then(roles => this.existingRoles = roles);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -266,47 +178,6 @@
|
||||||
|
|
||||||
.table-container .table-wrapper table.tainacan-table tbody tr {
|
.table-container .table-wrapper table.tainacan-table tbody tr {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
|
||||||
&.capabilities-edit-form td {
|
|
||||||
min-height: 120px;
|
|
||||||
padding: 12px 24px;
|
|
||||||
background-color: #f6f6f6;
|
|
||||||
vertical-align: top;
|
|
||||||
|
|
||||||
&>div {
|
|
||||||
display: table-cell;
|
|
||||||
padding: 12px 24px;
|
|
||||||
|
|
||||||
&:last-of-type {
|
|
||||||
border-left: 1px solid #cbcbcb;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.roles-list {
|
|
||||||
column-count: 3;
|
|
||||||
break-inside: avoid;
|
|
||||||
|
|
||||||
label {
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 1280px) {
|
|
||||||
.roles-list {
|
|
||||||
column-count: 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 1024px) {
|
|
||||||
.roles-list {
|
|
||||||
column-count: 1;
|
|
||||||
}
|
|
||||||
&>div:last-of-type {
|
|
||||||
border-left: 0px solid #cbcbcb;
|
|
||||||
border-top: 0px solid #cbcbcb;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.capabilities-edit-form:hover {
|
|
||||||
background-color: #f6f6f6 !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,154 @@
|
||||||
|
<template>
|
||||||
|
<div class="tainacan-form tainacan-modal-content">
|
||||||
|
<header class="tainacan-modal-title">
|
||||||
|
<h2 v-if="capability.display_name != undefined">{{ $i18n.get('label_editing_capabilitiy') + ' ' }} <span class="has-text-bold">{{ capability.display_name }}</span></h2>
|
||||||
|
<hr>
|
||||||
|
</header>
|
||||||
|
<div
|
||||||
|
v-if="!isLoading"
|
||||||
|
class="capabilities-edit-form">
|
||||||
|
<div>
|
||||||
|
<template v-if="existingRoles && Object.values(existingRoles).length && capability.roles">
|
||||||
|
<b-field :addons="false">
|
||||||
|
<label class="label is-inline-block">
|
||||||
|
{{ $i18n.get('label_associated_roles') }}
|
||||||
|
</label>
|
||||||
|
<p>{{ $i18n.get('info_associated_roles') }}</p>
|
||||||
|
<br>
|
||||||
|
<div class="roles-list">
|
||||||
|
<b-checkbox
|
||||||
|
v-if="!capability.roles_inherited[role.slug]"
|
||||||
|
v-for="(role, roleIndex) of existingRoles"
|
||||||
|
:key="roleIndex"
|
||||||
|
size="is-small"
|
||||||
|
:value="capability.roles[role.slug] || capability.roles_inherited[role.slug] ? true : false"
|
||||||
|
@input="($event) => updateRole(role.slug, $event)"
|
||||||
|
name="roles">
|
||||||
|
{{ role.name }}
|
||||||
|
</b-checkbox>
|
||||||
|
</div>
|
||||||
|
</b-field>
|
||||||
|
</template>
|
||||||
|
<p
|
||||||
|
v-else
|
||||||
|
class="is-italic has-text-gray">
|
||||||
|
{{ $i18n.get('info_no_role_associated_capability') }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<template v-if="existingRoles && Object.values(existingRoles).length && capability.roles">
|
||||||
|
<b-field :addons="false">
|
||||||
|
<label class="label is-inline-block">
|
||||||
|
{{ $i18n.get('label_inherited_roles') }}
|
||||||
|
</label>
|
||||||
|
<p>{{ $i18n.get('info_inherited_roles') }}</p>
|
||||||
|
<br>
|
||||||
|
<div class="roles-list">
|
||||||
|
<b-checkbox
|
||||||
|
v-if="capability.roles_inherited[role.slug]"
|
||||||
|
v-for="(role, roleIndex) of existingRoles"
|
||||||
|
:key="roleIndex"
|
||||||
|
size="is-small"
|
||||||
|
:value="capability.roles[role.slug] || capability.roles_inherited[role.slug] ? true : false"
|
||||||
|
name="roles_inherited"
|
||||||
|
disabled>
|
||||||
|
{{ role.name }}
|
||||||
|
</b-checkbox>
|
||||||
|
</div>
|
||||||
|
</b-field>
|
||||||
|
</template>
|
||||||
|
<p
|
||||||
|
v-else
|
||||||
|
class="is-italic has-text-gray">
|
||||||
|
{{ $i18n.get('info_no_role_associated_capability') }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<b-loading
|
||||||
|
is-full-page="false"
|
||||||
|
:active.sync="isLoading" />
|
||||||
|
</div>
|
||||||
|
<div class="field is-grouped form-submit">
|
||||||
|
<div class="control">
|
||||||
|
<button
|
||||||
|
id="button-cancel-importer-edition"
|
||||||
|
class="button is-outlined"
|
||||||
|
type="button"
|
||||||
|
@click="$parent.close()">
|
||||||
|
{{ $i18n.get('exit') }}</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapActions } from 'vuex';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'CapabilityEditionModal',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
existingRoles: [],
|
||||||
|
isLoading: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
capability: Object,
|
||||||
|
capabilityKey: String
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions('capability', [
|
||||||
|
'fetchRoles',
|
||||||
|
'addCapabilityToRole',
|
||||||
|
'removeCapabilityFromRole'
|
||||||
|
]),
|
||||||
|
updateRole(role, value) {
|
||||||
|
if (value)
|
||||||
|
this.addCapabilityToRole({ capabilityKey: this.capabilityKey.replace('%d', 'all'), role: role })
|
||||||
|
else
|
||||||
|
this.removeCapabilityFromRole({ capabilityKey: this.capabilityKey.replace('%d', 'all'), role: role })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.isLoading = true;
|
||||||
|
this.fetchRoles().then((roles) => {
|
||||||
|
this.existingRoles = roles;
|
||||||
|
this.isLoading = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.capabilities-edit-form {
|
||||||
|
min-height: 120px;
|
||||||
|
vertical-align: top;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
&>div {
|
||||||
|
padding: 12px 24px;
|
||||||
|
|
||||||
|
&:last-of-type {
|
||||||
|
border-left: 1px solid #cbcbcb;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.roles-list {
|
||||||
|
column-count: 2;
|
||||||
|
break-inside: avoid;
|
||||||
|
|
||||||
|
label {
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.roles-list {
|
||||||
|
column-count: 1;
|
||||||
|
}
|
||||||
|
&>div:last-of-type {
|
||||||
|
border-left: 0px solid #cbcbcb;
|
||||||
|
border-top: 0px solid #cbcbcb;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -86,7 +86,6 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
getIconForMimeType(mimeType) {
|
getIconForMimeType(mimeType) {
|
||||||
|
|
||||||
|
|
||||||
if (mimeType) {
|
if (mimeType) {
|
||||||
const type = mimeType.split('/');
|
const type = mimeType.split('/');
|
||||||
if (type[0] == 'application' && type[1] != undefined){
|
if (type[0] == 'application' && type[1] != undefined){
|
||||||
|
|
|
||||||
|
|
@ -454,6 +454,7 @@ return apply_filters( 'tainacan-admin-i18n', [
|
||||||
'label_user_roles' => __( 'User roles', 'tainacan' ),
|
'label_user_roles' => __( 'User roles', 'tainacan' ),
|
||||||
'label_associated_roles' => __( 'Associated roles', 'tainacan' ),
|
'label_associated_roles' => __( 'Associated roles', 'tainacan' ),
|
||||||
'label_inherited_roles' => __( 'Inherited roles', 'tainacan' ),
|
'label_inherited_roles' => __( 'Inherited roles', 'tainacan' ),
|
||||||
|
'label_editing_capabilitiy' => __( 'Editing capabilitiy', 'tainacan' ),
|
||||||
|
|
||||||
// Instructions. More complex sentences to guide user and placeholders
|
// Instructions. More complex sentences to guide user and placeholders
|
||||||
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),
|
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue