github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-24 05:48:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

Start on permissions settings

Browse Source
This commit is contained in:
rijkvanzanten
2020-08-26 19:51:20 -04:00
parent dbdc8f2d90
commit fd4e903250
9 changed files with 266 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,6 +21,12 @@
"markdown": "Markdown",
"tabbed": "Tabbed",
"all_access": "All Access",
"no_access": "No Access",
"use_custom": "Use Custom",
"edit_custom": "Edit Custom",
"presentation_and_aliases": "Presentation & Aliases",
"revision_post_update": "Here is what this item looked like after the update...",

4
app/src/modules/settings/routes/roles/detail/components/permissions-overview/index.ts Normal file
View File

@@ -0,0 +1,4 @@
import PermissionsOverview from './permissions-overview.vue';
export { PermissionsOverview };
export default PermissionsOverview;

34
app/src/modules/settings/routes/roles/detail/components/permissions-overview/permissions-overview-header.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<div class="permissions-overview-header">
<span class="name">{{ $t('collection') }}</span>
<v-icon name="add" />
<v-icon name="visibility" />
<v-icon name="edit" />
<v-icon name="delete" />
</div>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
export default defineComponent({});
</script>
<style lang="scss" scoped>
.permissions-overview-header {
--v-icon-color: var(--foreground-subdued);
display: flex;
padding: 12px;
border-bottom: var(--border-width) solid var(--border-normal);
.name {
flex-grow: 1;
font-weight: 600;
}
.v-icon + .v-icon {
margin-left: 20px;
}
}
</style>

52
app/src/modules/settings/routes/roles/detail/components/permissions-overview/permissions-overview-row.vue Normal file
View File

@@ -0,0 +1,52 @@
<template>
<div class="permissions-overview-row">
<span class="name">
{{ collection.name }}
</span>
<permissions-overview-toggle :collection="collection" :role="role" action="create" />
<permissions-overview-toggle :collection="collection" :role="role" action="read" />
<permissions-overview-toggle :collection="collection" :role="role" action="update" />
<permissions-overview-toggle :collection="collection" :role="role" action="delete" />
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from '@vue/composition-api';
import { Collection } from '@/types';
import PermissionsOverviewToggle from './permissions-overview-toggle.vue';
export default defineComponent({
components: { PermissionsOverviewToggle },
props: {
role: {
type: String,
required: true,
},
collection: {
type: Object as PropType<Collection>,
required: true,
},
},
});
</script>
<style lang="scss" scoped>
.permissions-overview-row {
display: flex;
padding: 12px;
background-color: var(--background-page);
.name {
flex-grow: 1;
}
.permissions-overview-toggle + .permissions-overview-toggle {
margin-left: 20px;
}
& + .permissions-overview-row {
border-top: var(--border-width) solid var(--border-subdued);
}
}
</style>

73
app/src/modules/settings/routes/roles/detail/components/permissions-overview/permissions-overview-toggle.vue Normal file
View File

@@ -0,0 +1,73 @@
<template>
<div class="permissions-overview-toggle">
<v-menu show-arrow>
<template #activator="{ toggle }">
<v-icon @click="toggle" name="check" />
</template>
<v-list dense>
<v-list-item>
<v-list-item-icon>
<v-icon name="check" />
</v-list-item-icon>
<v-list-item-content>
{{ $t('all_access') }}
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-icon>
<v-icon name="block" />
</v-list-item-icon>
<v-list-item-content>
{{ $t('no_access') }}
</v-list-item-content>
</v-list-item>
<v-divider />
<v-list-item>
<v-list-item-icon>
<v-icon name="rule" />
</v-list-item-icon>
<v-list-item-content>
{{ $t('use_custom') }}
</v-list-item-content>
<v-list-item-icon>
<v-icon name="launch" />
</v-list-item-icon>
</v-list-item>
</v-list>
</v-menu>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from '@vue/composition-api';
import { Collection } from '@/types';
export default defineComponent({
props: {
collection: {
type: Object as PropType<Collection>,
required: true,
},
role: {
type: String,
required: true,
},
action: {
type: String,
required: true,
},
},
});
</script>
<style lang="scss" scoped>
.permissions-overview-toggle {
--v-icon-color: var(--success);
position: relative;
}
</style>

73
app/src/modules/settings/routes/roles/detail/components/permissions-overview/permissions-overview.vue Normal file
View File

@@ -0,0 +1,73 @@
<template>
<div class="permissions-overview">
<h2 class="title type-label">
{{ $t('permissions') }}
<span class="instant-save">{{ $t('saves_automatically') }}</span>
</h2>
<div class="table">
<permissions-overview-header />
<permissions-overview-row
v-for="collection in regularCollections"
:key="collection.collection"
:collection="collection"
:role="role"
/>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, computed } from '@vue/composition-api';
import { useCollectionsStore } from '@/stores';
import PermissionsOverviewHeader from './permissions-overview-header.vue';
import PermissionsOverviewRow from './permissions-overview-row.vue';
export default defineComponent({
components: { PermissionsOverviewHeader, PermissionsOverviewRow },
props: {
role: {
type: String,
required: true,
},
},
setup(props) {
const collectionsStore = useCollectionsStore();
const regularCollections = computed(() =>
collectionsStore.state.collections.filter(
(collection) => collection.collection.startsWith('directus_') === false
)
);
const systemCollections = computed(() =>
collectionsStore.state.collections.filter(
(collection) => collection.collection.startsWith('directus_') === false
)
);
return { regularCollections, systemCollections };
},
});
</script>
<style lang="scss" scoped>
.permissions-overview {
position: relative;
}
.title {
margin-bottom: 12px;
.instant-save {
margin-left: 4px;
color: var(--warning);
}
}
.table {
max-width: 792px;
background-color: var(--background-page);
border: var(--border-width) solid var(--border-normal);
border-radius: var(--border-radius);
}
</style>

41
app/src/modules/settings/routes/roles/detail/detail.vue
View File

@@ -1,5 +1,13 @@
<template>
<private-view :title="loading ? $t('loading') : (isNew === false)? $t('editing_role', { role: item && item.name }) : $t('creating_role') ">
<private-view
:title="
loading
? $t('loading')
: isNew === false
? $t('editing_role', { role: item && item.name })
: $t('creating_role')
"
>
<template #headline>{{ $t('settings_permissions') }}</template>
<template #title-outer:prepend>
<v-button class="header-icon" rounded icon exact :to="`/settings/roles/`">
@@ -61,23 +69,8 @@
</template>
<div class="roles">
<div class="permissions" v-if="primaryKey != 1">
<h2 class="title type-label">
{{ $t('permissions') }}
<span class="instant-save">{{ $t('saves_automatically') }}</span>
</h2>
<permissions-overview :role="primaryKey" />
<v-skeleton-loader v-if="loading" />
<template v-else>
<v-notice v-if="(edits.admin !== undefined ? edits.admin : item && item.admin) === true">
{{ $t('admins_have_all_permissions') }}
</v-notice>
<v-notice v-else>
Pre-Release: Feature not yet available
</v-notice>
</template>
</div>
<v-form
collection="directus_roles"
:primary-key="primaryKey"
@@ -105,6 +98,7 @@ import useItem from '@/composables/use-item';
import SaveOptions from '@/views/private/components/save-options';
import { useUserStore } from '@/stores/';
import RoleInfoDrawerDetail from './components/role-info-drawer-detail';
import PermissionsOverview from './components/permissions-overview';
type Values = {
[field: string]: any;
@@ -112,7 +106,7 @@ type Values = {
export default defineComponent({
name: 'roles-detail',
components: { SettingsNavigation, RevisionsDrawerDetail, SaveOptions, RoleInfoDrawerDetail },
components: { SettingsNavigation, RevisionsDrawerDetail, SaveOptions, RoleInfoDrawerDetail, PermissionsOverview },
props: {
primaryKey: {
type: String,
@@ -213,16 +207,7 @@ export default defineComponent({
--v-button-color-hover: var(--warning);
}
.title {
margin-bottom: 12px;
.instant-save {
margin-left: 4px;
color: var(--warning);
}
}
.permissions {
.permissions-overview {
margin-bottom: 48px;
}
</style>

1
app/src/types/index.ts
View File

@@ -4,3 +4,4 @@ export * from './relations';
export * from './presets';
export * from './notifications';
export * from './fields';
export * from './permissions';

10
app/src/types/permissions.ts Normal file
View File

@@ -0,0 +1,10 @@
export type Permission = {
id: number;
role: string | null;
collection: string;
operation: 'create' | 'read' | 'update' | 'validate' | 'delete';
permissions: Record<string, any> | null;
presets: Record<string, any> | null;
fields: string | null;
limit: number | null;
};