Merge pull request #1512 from nocodb/fix/gallery

fix: gallery logic

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

@@ -18,6 +18,7 @@
       :column="column"
       :is-public-grid="isPublic && !isForm"
       :is-public-form="isPublic && isForm"
+      :is-locked="isLocked"
       v-on="$listeners"
     />
 

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

@@ -18,7 +18,8 @@
     </div>
 
     <div class="d-flex align-center img-container">
-      <div
+      <div class="d-flex no-overflow">
+        <div
         v-for="(item,i) in (isPublicForm ? localFilesState : localState)"
         :key="item.url || item.title"
         class="thumbnail align-center justify-center d-flex"
@@ -60,9 +61,9 @@
           </template>
           <span>{{ item.title }}</span>
         </v-tooltip>
+        </div>
       </div>
-
-      <div v-if="isForm || active && !isPublicGrid" class="add d-flex align-center justify-center px-1 nc-attachment-add" @click="addFile">
+      <div v-if="isForm || active && !isPublicGrid && !isLocked" class="add d-flex align-center justify-center px-1 nc-attachment-add" @click="addFile">
         <v-icon v-if="uploading" small color="primary" class="nc-attachment-add-spinner">
           mdi-loading mdi-spin
         </v-icon>
@@ -90,7 +91,6 @@
       </v-icon>
       <input ref="file" type="file" multiple class="d-none" @change="onFileSelection">
     </div>
-
     <v-dialog
       v-if="dialog"
       v-model="dialog"
@@ -100,7 +100,7 @@
         <v-card-text class="h-100 backgroundColor">
           <div class="d-flex mx-2">
             <v-btn
-              v-if="(isForm || _isUIAllowed('tableAttachment')) && !isPublicGrid"
+              v-if="(isForm || _isUIAllowed('tableAttachment')) && !isPublicGrid && !isLocked"
               small
               class="my-4 "
               :loading="uploading"
@@ -127,7 +127,7 @@
                     style="position: relative"
                   >
                     <v-icon
-                      v-if="_isUIAllowed('tableAttachment') && !isPublicGrid"
+                      v-if="_isUIAllowed('tableAttachment') && !isPublicGrid && !isLocked"
                       small
                       class="remove-icon"
                       @click="removeItem(i)"
@@ -389,6 +389,9 @@ export default {
         // eslint-disable-next-line eqeqeq
       } else if (e.keyCode == '39') {
         this.carousel = ++this.carousel % this.localState.length
+        // eslint-disable-next-line eqeqeq
+      } else if (e.keyCode == '27') {
+        this.hideIfVisible()
       }
     },
     async onFileDrop(e) {
@@ -405,6 +408,10 @@ export default {
   margin: 0 -2px;
 }
 
+.no-overflow {
+  overflow: hidden;
+}
+
 .add {
   transition: .2s background-color;
   /*background-color: #666666ee;*/
@@ -436,6 +443,7 @@ export default {
 }
 
 .expand-icon {
+  margin-left: 8px;
   border-radius: 2px;
   /*opacity: 0;*/
   transition: .3s background-color;
@@ -552,6 +560,7 @@ export default {
  *
  * @author Naveen MR <oof1lab@gmail.com>
  * @author Pranav C Balan <pranavxc@gmail.com>
+ * @author Wing-Kam Wong <wingkwong.code@gmail.com>
  *
  * @license GNU AGPL version 3 or any later version
  *

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

@@ -151,6 +151,7 @@
                       :meta="meta"
                       :sql-ui="sqlUi"
                       :is-form="true"
+                      :is-locked="isLocked"
                       @focus="active = col._cn"
                       @blur="active = ''"
                       @input="$set(changedColumns,col._cn, true)"
@@ -305,7 +306,8 @@ export default {
     availableColumns: [Object, Array],
     queryParams: Object,
     meta: Object,
-    presetValues: Object
+    presetValues: Object,
+    isLocked: Boolean,
   },
   data: () => ({
     showborder: false,

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

@@ -340,6 +340,7 @@
               :sql-ui="sqlUi"
               :primary-value-column="primaryValueColumn"
               :cover-image-field="coverImageField"
+              :is-locked="isLocked"
               @expandForm="({rowIndex,rowMeta}) => expandRow(rowIndex,rowMeta)"
             />
           </template>
@@ -606,6 +607,7 @@
         :query-params="queryParams"
         :show-next-prev="false"
         :preset-values="presetValues"
+        :is-locked="isLocked"
         @cancel="showExpandModal = false;"
         @input="showExpandModal = false; (kanban.selectedExpandRow && kanban.selectedExpandRow.rowMeta && delete kanban.selectedExpandRow.rowMeta.new) ; loadKanbanData(false)"
         @commented="reloadComments"
@@ -632,6 +634,7 @@
         :query-params="queryParams"
         :show-next-prev="true"
         :preset-values="presetValues"
+        :is-locked="isLocked"
         @cancel="showExpandModal = false;"
         @input="showExpandModal = false; (data[selectedExpandRowIndex] && data[selectedExpandRowIndex].rowMeta && delete data[selectedExpandRowIndex].rowMeta.new) ; loadTableData()"
         @commented="reloadComments"

packages/nc-gui/components/project/spreadsheet/views/galleryView.vue

@@ -10,7 +10,7 @@
           <v-card
             class="h-100"
             :elevation="hover ? 4 : 1"
-            @click="$emit('expandForm', {row,rowIndex,rowMeta})"
+            @click="!isLocked && $emit('expandForm', {row,rowIndex,rowMeta})"
           >
             <v-carousel
               v-if="attachmentColumn"
@@ -76,6 +76,7 @@
                       :value="row[col._cn]"
                       :column="col"
                       :sql-ui="sqlUi"
+                      :is-locked="isLocked"
                       class="xc-input body-2"
                       :meta="meta"
                     />
@@ -108,7 +109,8 @@ export default {
     'primaryValueColumn',
     'showSystemFields',
     'sqlUi',
-    'coverImageField'
+    'coverImageField',
+    'isLocked'
   ],
   computed: {
     attachmentColumn() {