github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-30 06:58:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

toggle all permissions per row

Browse Source
This commit is contained in:
Nitwel
2020-10-24 12:18:39 +02:00
parent fc8bdffeee
commit b9d44d052f
4 changed files with 1006 additions and 1092 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1826
app/src/lang/en-US/index.json
View File

File diff suppressed because it is too large Load Diff

48
app/src/modules/settings/routes/roles/item/components/permissions-overview-row.vue
View File

@@ -2,43 +2,50 @@
<div class="permissions-overview-row">
<span class="name">
{{ collection.name }}
<span class="actions">
<span class="all" @click="setFullAccessAll">{{ $t('allow_all') }}</span>
|
<span class="none" @click="setNoAccessAll">{{ $t('allow_none') }}</span>
</span>
</span>
<permissions-overview-toggle
action="create"
:collection="collection"
:role="role"
:permission="getPermission('create')"
:permissions="permissions"
:loading="isLoading('create')"
/>
<permissions-overview-toggle
action="read"
:collection="collection"
:role="role"
:permission="getPermission('read')"
:permissions="permissions"
:loading="isLoading('read')"
/>
<permissions-overview-toggle
action="update"
:collection="collection"
:role="role"
:permission="getPermission('update')"
:permissions="permissions"
:loading="isLoading('update')"
/>
<permissions-overview-toggle
action="delete"
:collection="collection"
:role="role"
:permission="getPermission('delete')"
:permissions="permissions"
:loading="isLoading('delete')"
/>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from '@vue/composition-api';
import { defineComponent, PropType, ref, inject, toRefs } from '@vue/composition-api';
import api from '@/api';
import { Collection, Permission } from '@/types';
import PermissionsOverviewToggle from './permissions-overview-toggle.vue';
import useUpdatePermissions from '../composables/use-update-permissions';
export default defineComponent({
components: { PermissionsOverviewToggle },
@@ -61,11 +68,10 @@ export default defineComponent({
},
},
setup(props) {
return { getPermission, isLoading };
const { collection, role, permissions } = toRefs(props);
const { setFullAccessAll, setNoAccessAll, getPermission } = useUpdatePermissions(collection, permissions, role);
function getPermission(action: string) {
return props.permissions.find((permission) => permission.action === action);
}
return { getPermission, isLoading, setFullAccessAll, setNoAccessAll };
function isLoading(action: string) {
const permission = getPermission(action);
@@ -86,6 +92,30 @@ export default defineComponent({
.name {
flex-grow: 1;
.actions {
margin-left: 20px;
color: var(--foreground-subdued);
font-size: 12px;
opacity: 0;
span {
cursor: pointer;
&:hover {
&.all {
color: var(--success);
}
&.none {
color: var(--danger);
}
}
}
}
}
&:hover .name .actions {
opacity: 1;
}
.permissions-overview-toggle + .permissions-overview-toggle {

86
app/src/modules/settings/routes/roles/item/components/permissions-overview-toggle.vue
View File

@@ -11,7 +11,7 @@
</template>
<v-list>
<v-list-item @click="setFullAccess">
<v-list-item @click="setFullAccess(action)">
<v-list-item-icon>
<v-icon name="check" />
</v-list-item-icon>
@@ -20,7 +20,7 @@
</v-list-item-content>
</v-list-item>
<v-list-item @click="setNoAccess">
<v-list-item @click="setNoAccess(action)">
<v-list-item-icon>
<v-icon name="block" />
</v-list-item-icon>
@@ -48,10 +48,11 @@
</template>
<script lang="ts">
import { defineComponent, PropType, computed, inject, ref } from '@vue/composition-api';
import { defineComponent, PropType, computed, inject, ref, toRefs } from '@vue/composition-api';
import { Collection, Permission } from '@/types';
import api from '@/api';
import router from '@/router';
import useUpdatePermissions from '../composables/use-update-permissions';
export default defineComponent({
props: {
@@ -67,8 +68,8 @@ export default defineComponent({
type: String,
required: true,
},
permission: {
type: Object as PropType<Permission>,
permissions: {
type: Array as PropType<Permission[]>,
default: null,
},
loading: {
@@ -77,17 +78,22 @@ export default defineComponent({
},
},
setup(props) {
const { collection, role, permissions } = toRefs(props);
const { setFullAccess, setNoAccess, getPermission } = useUpdatePermissions(collection, permissions, role);
const permission = computed(() => getPermission(props.action));
const permissionLevel = computed<'all' | 'none' | 'custom'>(() => {
if (props.permission === null) return 'none';
if (permission.value === undefined) return 'none';
if (hasAll() === true) return 'all';
return 'custom';
function hasAll() {
if (!props.permission) return false;
if (props.permission.fields !== '*') return false;
if (Object.keys(props.permission.permissions || {}).length > 0) return false;
if (Object.keys(props.permission.validation || {}).length > 0) return false;
if (!permission.value) return false;
if (permission.value.fields !== '*') return false;
if (Object.keys(permission.value.permissions || {}).length > 0) return false;
if (Object.keys(permission.value.validation || {}).length > 0) return false;
return true;
}
@@ -99,62 +105,6 @@ export default defineComponent({
return { permissionLevel, saving, setFullAccess, setNoAccess, openPermissions };
async function setFullAccess() {
saving.value = true;
// If this collection isn't "managed" yet, make sure to add it to directus_collections first
// before trying to associate any permissions with it
if (props.collection.meta === null) {
await api.patch(`/collections/${props.collection.collection}`, {
meta: {},
});
}
if (props.permission) {
try {
await api.patch(`/permissions/${props.permission.id}`, {
fields: '*',
permissions: null,
validation: null,
});
} catch (err) {
console.error(err);
} finally {
await refresh?.();
saving.value = false;
}
} else {
try {
await api.post('/permissions/', {
role: props.role,
collection: props.collection.collection,
action: props.action,
fields: '*',
});
} catch (err) {
console.error(err);
} finally {
await refresh?.();
saving.value = false;
}
}
}
async function setNoAccess() {
if (!props.permission) return;
saving.value = true;
try {
await api.delete(`/permissions/${props.permission.id}`);
} catch (err) {
console.error(err);
} finally {
await refresh?.();
saving.value = false;
}
}
async function openPermissions() {
// If this collection isn't "managed" yet, make sure to add it to directus_collections first
// before trying to associate any permissions with it
@@ -164,8 +114,8 @@ export default defineComponent({
});
}
if (props.permission) {
router.push(`/settings/roles/${props.role || 'public'}/${props.permission.id}`);
if (permission.value) {
router.push(`/settings/roles/${props.role || 'public'}/${permission.value.id}`);
} else {
saving.value = true;

138
app/src/modules/settings/routes/roles/item/composables/use-update-permissions.ts Normal file
View File

@@ -0,0 +1,138 @@
import { ref, inject, Ref } from '@vue/composition-api';
import api from '@/api';
import { Collection, Permission } from '@/types';
export default function useUpdatePermissions(
collection: Ref<Collection>,
permissions: Ref<Permission[]>,
role: Ref<string>
) {
const saving = ref(false);
const refresh = inject<() => Promise<void>>('refresh-permissions');
return { getPermission, setFullAccess, setNoAccess, setFullAccessAll, setNoAccessAll };
function getPermission(action: string) {
return permissions.value.find((permission) => permission.action === action);
}
async function setFullAccess(action: 'create' | 'read' | 'update' | 'delete') {
saving.value = true;
// If this collection isn't "managed" yet, make sure to add it to directus_collections first
// before trying to associate any permissions with it
if (collection.value.meta === null) {
await api.patch(`/collections/${collection.value.collection}`, {
meta: {},
});
}
const permission = getPermission(action);
if (permission) {
try {
await api.patch(`/permissions/${permission.id}`, {
fields: '*',
permissions: null,
validation: null,
});
} catch (err) {
console.error(err);
} finally {
await refresh?.();
saving.value = false;
}
} else {
try {
await api.post('/permissions/', {
role: role.value,
collection: collection.value.collection,
action: action,
fields: '*',
});
} catch (err) {
console.error(err);
} finally {
await refresh?.();
saving.value = false;
}
}
}
async function setNoAccess(action: 'create' | 'read' | 'update' | 'delete') {
const permission = getPermission(action);
if (!permission) return;
saving.value = true;
try {
await api.delete(`/permissions/${permission.id}`);
} catch (err) {
console.error(err);
} finally {
await refresh?.();
saving.value = false;
}
}
async function setFullAccessAll() {
saving.value = true;
// If this collection isn't "managed" yet, make sure to add it to directus_collections first
// before trying to associate any permissions with it
if (collection.value.meta === null) {
await api.patch(`/collections/${collection.value.collection}`, {
meta: {},
});
}
const actions = ['create', 'read', 'update', 'delete'];
await Promise.all(
actions.map((action) =>
(async () => {
const permission = getPermission(action);
if (permission) {
try {
await api.patch(`/permissions/${permission.id}`, {
fields: '*',
permissions: null,
validation: null,
});
} catch (err) {
console.error(err);
}
} else {
try {
await api.post('/permissions/', {
role: role.value,
collection: collection.value.collection,
action: action,
fields: '*',
});
} catch (err) {
console.error(err);
}
}
})()
)
);
await refresh?.();
saving.value = false;
}
async function setNoAccessAll() {
saving.value = true;
try {
await api.delete(`/permissions/${permissions.value.map((p) => p.id).join(',')}`);
} catch (err) {
console.error(err);
} finally {
await refresh?.();
saving.value = false;
}
}
}