fix(gui): hide options based on role

re #168

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue

@@ -8,7 +8,7 @@
     @dragend="dragOver = false"
     @drop.prevent="onFileDrop"
   >
-    <div v-show="dragOver" class="drop-overlay">
+    <div v-show="_isUIAllowed('table-attachment') && dragOver" class="drop-overlay">
       <div>
         <v-icon small>
           mdi-cloud-upload-outline
@@ -58,7 +58,7 @@
         <v-icon v-if="uploading" small color="primary">
           mdi-loading mdi-spin
         </v-icon>
-        <v-icon v-else v-show="active" small color="primary">
+        <v-icon v-else-if="_isUIAllowed('table-attachment')" v-show="active" small color="primary">
           mdi-plus
         </v-icon>
       </div>
@@ -79,7 +79,7 @@
       <v-card class="h-100 images-modal">
         <v-card-text class="h-100 backgroundColor">
           <div class="d-flex mx-2">
-            <v-btn small class="my-4 " :loading="uploading" @click="addFile">
+            <v-btn v-if="_isUIAllowed('table-attachment')" small class="my-4 " :loading="uploading" @click="addFile">
               <v-icon small class="mr-2">
                 mdi-link-variant
               </v-icon>
@@ -96,7 +96,7 @@
                     height="200px"
                     style="position: relative"
                   >
-                    <v-icon small class="remove-icon" @click="removeItem(i)">
+                    <v-icon v-if="_isUIAllowed('table-attachment')" small class="remove-icon" @click="removeItem(i)">
                       mdi-close-circle
                     </v-icon>
                     <v-icon color="grey" class="download-icon" @click.stop="downloadItem(item,i)">
@@ -215,8 +215,8 @@
 </template>
 
 <script>
-import { isImage } from '@/components/project/spreadsheet/helpers/imageExt'
 import FileSaver from 'file-saver'
+import { isImage } from '@/components/project/spreadsheet/helpers/imageExt'
 export default {
   name: 'EditableAttachmentCell',
   props: ['dbAlias', 'value', 'active', 'isLocked', 'meta', 'column'],

packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue

@@ -44,7 +44,7 @@
         <v-btn small @click="$emit('cancel')">
           Cancel
         </v-btn>
-        <v-btn small color="primary" @click="save">
+        <v-btn :disabled="!_isUIAllowed('table-row-update')" small color="primary" @click="save">
           Save Row
         </v-btn>
       </div>
@@ -250,9 +250,9 @@
 
 <script>
 
+import dayjs from 'dayjs'
 import HeaderCell from '@/components/project/spreadsheet/components/headerCell'
 import EditableCell from '@/components/project/spreadsheet/components/editableCell'
-import dayjs from 'dayjs'
 import colors from '@/mixins/colors'
 import VirtualCell from '@/components/project/spreadsheet/components/virtualCell'
 import VirtualHeaderCell from '@/components/project/spreadsheet/components/virtualHeaderCell'

packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue

@@ -78,7 +78,7 @@
         </v-icon>
       </x-btn>
       <x-btn
-        v-if="relationType !== 'bt'"
+        v-if="_isUIAllowed('table-add-new-row') && relationType !== 'bt'"
         tooltip="Add new row"
         :disabled="isLocked"
         outlined
@@ -128,9 +128,13 @@
         :field-list="[...realFieldList, ...formulaFieldList]"
         dense
       />
-      <v-tooltip bottom>
+      <v-tooltip
+        v-if="_isUIAllowed('table-delete')"
+        bottom
+      >
         <template #activator="{on}">
           <v-btn
+            v-show="_isUIAllowed('table-delete')"
             class="nc-table-delete-btn"
             :disabled="isLocked"
             small
@@ -478,11 +482,11 @@
 
 <script>
 
+import { mapActions } from 'vuex'
+import debounce from 'debounce'
 import DebugMetas from '@/components/project/spreadsheet/components/debugMetas'
 
-import { mapActions } from 'vuex'
 import AdditionalFeatures from '@/components/project/spreadsheet/overlay/additinalFeatures'
-import debounce from 'debounce'
 import GalleryView from '@/components/project/spreadsheet/views/galleryView'
 import CalendarView from '@/components/project/spreadsheet/views/calendarView'
 import KanbanView from '@/components/project/spreadsheet/views/kanbanView'
@@ -988,6 +992,7 @@ export default {
       this.loadingData = false
     },
     showRowContextMenu(e, row, rowMeta, index, colIndex, col) {
+      if (!this._isUIAllowed('table-grid-context-menu')) { return }
       e.preventDefault()
       this.rowContextMenu = false
       this.$nextTick(() => {

packages/nc-gui/components/project/spreadsheet/xcTable.vue

@@ -196,6 +196,7 @@ export default {
     relationPrimaryValue: [String, Number]
   },
   data: () => ({
+    fieldsOrder: [],
     password: null,
     showPasswordModal: false,
     client: 'mysql',
@@ -262,20 +263,20 @@ export default {
     modelName: null
   }),
   computed: {
-    availableColumns() {
-      let columns
-      const hideCols = ['created_at', 'updated_at']
-
-      if (this.showSystemFields) {
-        columns = this.meta.columns || []
-      } else if (this.data && this.data.length) {
-        // c._cn in this.data[0].row &&
-        columns = (this.meta.columns.filter(c => !(c.pk && c.ai) && !hideCols.includes(c._cn))) || []
-      } else {
-        columns = (this.meta && this.meta.columns && this.meta.columns.filter(c => !(c.pk && c.ai) && !hideCols.includes(c._cn))) || []
-      }
-      return columns
-    },
+    // availableColumns() {
+    //   let columns
+    //   const hideCols = ['created_at', 'updated_at']
+    //
+    //   if (this.showSystemFields) {
+    //     columns = this.meta.columns || []
+    //   } else if (this.data && this.data.length) {
+    //     // c._cn in this.data[0].row &&
+    //     columns = (this.meta.columns.filter(c => !(c.pk && c.ai) && !hideCols.includes(c._cn))) || []
+    //   } else {
+    //     columns = (this.meta && this.meta.columns && this.meta.columns.filter(c => !(c.pk && c.ai) && !hideCols.includes(c._cn))) || []
+    //   }
+    //   return columns
+    // },
     concatenatedXWhere() {
       let where = ''
       if (this.searchField && this.searchQuery.trim()) {