disable actions based on permissions (#12316)

This commit is contained in:
Azri Kahar
2022-03-23 23:09:08 +08:00
committed by GitHub
parent d086b7dc82
commit 51ec656a06
3 changed files with 30 additions and 6 deletions

View File

@@ -340,8 +340,8 @@ export default defineComponent({
background-color: transparent;
}
.outlined:not(.active):focus,
.outlined:not(.active):hover {
.outlined:not(.active):not(:disabled):focus,
.outlined:not(.active):not(:disabled):hover {
color: var(--v-button-background-color-hover);
background-color: transparent;
border-color: var(--v-button-background-color-hover);

View File

@@ -58,7 +58,15 @@
<v-icon name="fullscreen" />
</v-button>
<v-button v-tooltip.bottom="t('edit_panels')" rounded icon outlined @click="editMode = !editMode">
<v-button
v-tooltip.bottom="t('edit_panels')"
class="edit"
rounded
icon
outlined
:disabled="!updateAllowed"
@click="editMode = !editMode"
>
<v-icon name="edit" />
</v-button>
</template>
@@ -146,7 +154,7 @@
<script lang="ts">
import InsightsNavigation from '../components/navigation.vue';
import { defineComponent, computed, ref, toRefs, watch } from 'vue';
import { useInsightsStore, useAppStore } from '@/stores';
import { useInsightsStore, useAppStore, usePermissionsStore } from '@/stores';
import InsightsNotFound from './not-found.vue';
import { Panel } from '@directus/shared/types';
import { nanoid } from 'nanoid';
@@ -179,6 +187,7 @@ export default defineComponent({
const insightsStore = useInsightsStore();
const appStore = useAppStore();
const permissionsStore = usePermissionsStore();
const { fullScreen } = toRefs(appStore);
@@ -192,6 +201,10 @@ export default defineComponent({
const zoomToFit = ref(false);
const updateAllowed = computed<boolean>(() => {
return permissionsStore.hasPermission('directus_panels', 'update');
});
useShortcut('meta+s', () => {
saveChanges();
});
@@ -305,6 +318,7 @@ export default defineComponent({
return {
currentDashboard,
editMode,
updateAllowed,
panels,
stagePanelEdits,
stagedPanels,

View File

@@ -51,7 +51,7 @@
</template>
<v-list>
<v-list-item class="warning" clickable @click="editDashboard = item">
<v-list-item class="warning" :disabled="!updateAllowed" clickable @click="editDashboard = item">
<v-list-item-icon>
<v-icon name="edit" />
</v-list-item-icon>
@@ -60,7 +60,7 @@
</v-list-item-content>
</v-list-item>
<v-list-item class="danger" clickable @click="confirmDelete = item.id">
<v-list-item class="danger" :disabled="!deleteAllowed" clickable @click="confirmDelete = item.id">
<v-list-item-icon>
<v-icon name="delete" />
</v-list-item-icon>
@@ -131,6 +131,14 @@ export default defineComponent({
return permissionsStore.hasPermission('directus_dashboards', 'create');
});
const updateAllowed = computed<boolean>(() => {
return permissionsStore.hasPermission('directus_dashboards', 'update');
});
const deleteAllowed = computed<boolean>(() => {
return permissionsStore.hasPermission('directus_dashboards', 'delete');
});
const tableHeaders = [
{
text: '',
@@ -155,6 +163,8 @@ export default defineComponent({
return {
dashboards,
createAllowed,
updateAllowed,
deleteAllowed,
tableHeaders,
navigateToDashboard,
createDialogActive,