mirror of
https://github.com/directus/directus.git
synced 2026-04-25 03:00:53 -04:00
Rework layout extension component management (#7489)
* Rework layout extension component management * Move cards layout to new system * Move calendar layout to new system * Move map layout to new system * Use new useLayout everywhere * Remove useLayoutState composable
This commit is contained in:
Nicola Krumschmidt
committed by
GitHub
GitHub
parent
a663b14f06
commit
f99b97720e
@@ -1,134 +1,149 @@
|
||||
<template>
|
||||
<private-view :title="title">
|
||||
<template v-if="breadcrumb" #headline>
|
||||
<v-breadcrumb :items="breadcrumb" />
|
||||
</template>
|
||||
<component
|
||||
:is="layoutWrapper"
|
||||
ref="layoutRef"
|
||||
v-slot="{ layoutState }"
|
||||
v-model:selection="selection"
|
||||
v-model:layout-options="layoutOptions"
|
||||
v-model:layout-query="layoutQuery"
|
||||
v-model:filters="layoutFilters"
|
||||
v-model:search-query="searchQuery"
|
||||
collection="directus_users"
|
||||
:reset-preset="resetPreset"
|
||||
>
|
||||
<private-view :title="title">
|
||||
<template v-if="breadcrumb" #headline>
|
||||
<v-breadcrumb :items="breadcrumb" />
|
||||
</template>
|
||||
|
||||
<template #title-outer:prepend>
|
||||
<v-button class="header-icon" rounded disabled icon secondary>
|
||||
<v-icon name="people_alt" outline />
|
||||
</v-button>
|
||||
</template>
|
||||
<template #title-outer:prepend>
|
||||
<v-button class="header-icon" rounded disabled icon secondary>
|
||||
<v-icon name="people_alt" outline />
|
||||
</v-button>
|
||||
</template>
|
||||
|
||||
<template #actions:prepend>
|
||||
<component :is="`layout-actions-${layout}`" />
|
||||
</template>
|
||||
<template #actions:prepend>
|
||||
<component :is="`layout-actions-${layout}`" v-bind="layoutState" />
|
||||
</template>
|
||||
|
||||
<template #actions>
|
||||
<search-input v-model="searchQuery" />
|
||||
<template #actions>
|
||||
<search-input v-model="searchQuery" />
|
||||
|
||||
<v-dialog v-if="selection.length > 0" v-model="confirmDelete" @esc="confirmDelete = false">
|
||||
<template #activator="{ on }">
|
||||
<v-button
|
||||
v-tooltip.bottom="batchDeleteAllowed ? t('delete_label') : t('not_allowed')"
|
||||
:disabled="batchDeleteAllowed !== true"
|
||||
rounded
|
||||
icon
|
||||
class="action-delete"
|
||||
@click="on"
|
||||
>
|
||||
<v-icon name="delete" outline />
|
||||
</v-button>
|
||||
<v-dialog v-if="selection.length > 0" v-model="confirmDelete" @esc="confirmDelete = false">
|
||||
<template #activator="{ on }">
|
||||
<v-button
|
||||
v-tooltip.bottom="batchDeleteAllowed ? t('delete_label') : t('not_allowed')"
|
||||
:disabled="batchDeleteAllowed !== true"
|
||||
rounded
|
||||
icon
|
||||
class="action-delete"
|
||||
@click="on"
|
||||
>
|
||||
<v-icon name="delete" outline />
|
||||
</v-button>
|
||||
</template>
|
||||
|
||||
<v-card>
|
||||
<v-card-title>{{ t('batch_delete_confirm', selection.length) }}</v-card-title>
|
||||
|
||||
<v-card-actions>
|
||||
<v-button secondary @click="confirmDelete = false">
|
||||
{{ t('cancel') }}
|
||||
</v-button>
|
||||
<v-button class="action-delete" :loading="deleting" @click="batchDelete">
|
||||
{{ t('delete_label') }}
|
||||
</v-button>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-button
|
||||
v-if="selection.length > 1"
|
||||
v-tooltip.bottom="batchEditAllowed ? t('edit') : t('not_allowed')"
|
||||
rounded
|
||||
icon
|
||||
class="action-batch"
|
||||
:disabled="batchEditAllowed === false"
|
||||
@click="batchEditActive = true"
|
||||
>
|
||||
<v-icon name="edit" outline />
|
||||
</v-button>
|
||||
|
||||
<v-button
|
||||
v-if="canInviteUsers"
|
||||
v-tooltip.bottom="t('invite_users')"
|
||||
rounded
|
||||
icon
|
||||
class="invite-user"
|
||||
@click="userInviteModalActive = true"
|
||||
>
|
||||
<v-icon name="person_add" />
|
||||
</v-button>
|
||||
|
||||
<v-button
|
||||
v-tooltip.bottom="createAllowed ? t('create_item') : t('not_allowed')"
|
||||
rounded
|
||||
icon
|
||||
:to="addNewLink"
|
||||
:disabled="createAllowed === false"
|
||||
>
|
||||
<v-icon name="add" />
|
||||
</v-button>
|
||||
</template>
|
||||
|
||||
<template #navigation>
|
||||
<users-navigation :current-role="role" />
|
||||
</template>
|
||||
|
||||
<users-invite v-if="canInviteUsers" v-model="userInviteModalActive" @update:model-value="refresh" />
|
||||
|
||||
<component :is="`layout-${layout}`" class="layout" v-bind="layoutState">
|
||||
<template #no-results>
|
||||
<v-info :title="t('no_results')" icon="search" center>
|
||||
{{ t('no_results_copy') }}
|
||||
|
||||
<template #append>
|
||||
<v-button @click="clearFilters">{{ t('clear_filters') }}</v-button>
|
||||
</template>
|
||||
</v-info>
|
||||
</template>
|
||||
|
||||
<v-card>
|
||||
<v-card-title>{{ t('batch_delete_confirm', selection.length) }}</v-card-title>
|
||||
<template #no-items>
|
||||
<v-info :title="t('user_count', 0)" icon="people_alt" center>
|
||||
{{ t('no_users_copy') }}
|
||||
|
||||
<v-card-actions>
|
||||
<v-button secondary @click="confirmDelete = false">
|
||||
{{ t('cancel') }}
|
||||
</v-button>
|
||||
<v-button class="action-delete" :loading="deleting" @click="batchDelete">
|
||||
{{ t('delete_label') }}
|
||||
</v-button>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<template v-if="canInviteUsers" #append>
|
||||
<v-button :to="role ? { path: `/users/roles/${role}/+` } : { path: '/users/+' }">
|
||||
{{ t('create_user') }}
|
||||
</v-button>
|
||||
</template>
|
||||
</v-info>
|
||||
</template>
|
||||
</component>
|
||||
|
||||
<v-button
|
||||
v-if="selection.length > 1"
|
||||
v-tooltip.bottom="batchEditAllowed ? t('edit') : t('not_allowed')"
|
||||
rounded
|
||||
icon
|
||||
class="action-batch"
|
||||
:disabled="batchEditAllowed === false"
|
||||
@click="batchEditActive = true"
|
||||
>
|
||||
<v-icon name="edit" outline />
|
||||
</v-button>
|
||||
<drawer-batch
|
||||
v-model:active="batchEditActive"
|
||||
:primary-keys="selection"
|
||||
collection="directus_users"
|
||||
@refresh="refresh"
|
||||
/>
|
||||
|
||||
<v-button
|
||||
v-if="canInviteUsers"
|
||||
v-tooltip.bottom="t('invite_users')"
|
||||
rounded
|
||||
icon
|
||||
class="invite-user"
|
||||
@click="userInviteModalActive = true"
|
||||
>
|
||||
<v-icon name="person_add" />
|
||||
</v-button>
|
||||
|
||||
<v-button
|
||||
v-tooltip.bottom="createAllowed ? t('create_item') : t('not_allowed')"
|
||||
rounded
|
||||
icon
|
||||
:to="addNewLink"
|
||||
:disabled="createAllowed === false"
|
||||
>
|
||||
<v-icon name="add" />
|
||||
</v-button>
|
||||
</template>
|
||||
|
||||
<template #navigation>
|
||||
<users-navigation :current-role="role" />
|
||||
</template>
|
||||
|
||||
<users-invite v-if="canInviteUsers" v-model="userInviteModalActive" @update:model-value="refresh" />
|
||||
|
||||
<component :is="`layout-${layout}`" class="layout">
|
||||
<template #no-results>
|
||||
<v-info :title="t('no_results')" icon="search" center>
|
||||
{{ t('no_results_copy') }}
|
||||
|
||||
<template #append>
|
||||
<v-button @click="clearFilters">{{ t('clear_filters') }}</v-button>
|
||||
</template>
|
||||
</v-info>
|
||||
<template #sidebar>
|
||||
<sidebar-detail icon="info_outline" :title="t('information')" close>
|
||||
<div v-md="t('page_help_users_collection')" class="page-description" />
|
||||
</sidebar-detail>
|
||||
<layout-sidebar-detail v-model="layout">
|
||||
<component :is="`layout-options-${layout}`" v-bind="layoutState" />
|
||||
</layout-sidebar-detail>
|
||||
<component :is="`layout-sidebar-${layout}`" v-bind="layoutState" />
|
||||
</template>
|
||||
|
||||
<template #no-items>
|
||||
<v-info :title="t('user_count', 0)" icon="people_alt" center>
|
||||
{{ t('no_users_copy') }}
|
||||
|
||||
<template v-if="canInviteUsers" #append>
|
||||
<v-button :to="role ? { path: `/users/roles/${role}/+` } : { path: '/users/+' }">
|
||||
{{ t('create_user') }}
|
||||
</v-button>
|
||||
</template>
|
||||
</v-info>
|
||||
</template>
|
||||
</component>
|
||||
|
||||
<drawer-batch
|
||||
v-model:active="batchEditActive"
|
||||
:primary-keys="selection"
|
||||
collection="directus_users"
|
||||
@refresh="refresh"
|
||||
/>
|
||||
|
||||
<template #sidebar>
|
||||
<sidebar-detail icon="info_outline" :title="t('information')" close>
|
||||
<div v-md="t('page_help_users_collection')" class="page-description" />
|
||||
</sidebar-detail>
|
||||
<layout-sidebar-detail v-model="layout" />
|
||||
<component :is="`layout-sidebar-${layout}`" />
|
||||
</template>
|
||||
</private-view>
|
||||
</private-view>
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { defineComponent, computed, ref, reactive } from 'vue';
|
||||
import { defineComponent, computed, ref } from 'vue';
|
||||
import UsersNavigation from '../components/navigation.vue';
|
||||
import UsersInvite from '@/views/private/components/users-invite';
|
||||
|
||||
@@ -163,6 +178,7 @@ export default defineComponent({
|
||||
const userStore = useUserStore();
|
||||
const permissionsStore = usePermissionsStore();
|
||||
|
||||
const layoutRef = ref();
|
||||
const selection = ref<Item[]>([]);
|
||||
|
||||
const { layout, layoutOptions, layoutQuery, filters, searchQuery, resetPreset } = usePreset(ref('directus_users'));
|
||||
@@ -172,7 +188,7 @@ export default defineComponent({
|
||||
|
||||
const { breadcrumb, title } = useBreadcrumb();
|
||||
|
||||
const layoutFilters = computed<any[]>({
|
||||
const layoutFilters = computed({
|
||||
get() {
|
||||
if (props.role !== null) {
|
||||
const roleFilter = {
|
||||
@@ -207,20 +223,7 @@ export default defineComponent({
|
||||
return !!usersCreatePermission && !!rolesReadPermission;
|
||||
});
|
||||
|
||||
const layoutState = useLayout(
|
||||
layout,
|
||||
reactive({
|
||||
collection: 'directus_users',
|
||||
selection,
|
||||
layoutOptions,
|
||||
layoutQuery,
|
||||
filters: layoutFilters,
|
||||
searchQuery,
|
||||
resetPreset,
|
||||
selectMode: false,
|
||||
readonly: false,
|
||||
})
|
||||
);
|
||||
const { layoutWrapper } = useLayout(layout);
|
||||
|
||||
const { batchEditAllowed, batchDeleteAllowed, createAllowed } = usePermissions();
|
||||
|
||||
@@ -230,8 +233,10 @@ export default defineComponent({
|
||||
addNewLink,
|
||||
breadcrumb,
|
||||
title,
|
||||
filters,
|
||||
layoutRef,
|
||||
layoutWrapper,
|
||||
selection,
|
||||
layoutFilters,
|
||||
layoutOptions,
|
||||
layoutQuery,
|
||||
layout,
|
||||
@@ -251,7 +256,7 @@ export default defineComponent({
|
||||
};
|
||||
|
||||
async function refresh() {
|
||||
await layoutState.value.refresh();
|
||||
await layoutRef.value?.state?.refresh?.();
|
||||
}
|
||||
|
||||
function useBatch() {
|
||||
@@ -274,7 +279,7 @@ export default defineComponent({
|
||||
data: batchPrimaryKeys,
|
||||
});
|
||||
|
||||
await layoutState.value.refresh();
|
||||
await refresh();
|
||||
|
||||
selection.value = [];
|
||||
confirmDelete.value = false;
|
||||
|
||||
Reference in New Issue
Block a user