feat: Enable customization in Gallery view

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

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

@@ -26,7 +26,7 @@ import SetListCell from '@/components/project/spreadsheet/components/cell/setLis
 import EnumCell from '@/components/project/spreadsheet/components/cell/enumCell'
 import EditableAttachmentCell from '@/components/project/spreadsheet/components/editableCell/editableAttachmentCell'
 import DateCell from './cell/dateCell'
-import DateTimeCell from './cell/timeCell'
+import DateTimeCell from './cell/dateTimeCell'
 import TimeCell from './cell/timeCell'
 
 export default {

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

@@ -27,7 +27,34 @@
     </template>
 
     <v-list dense class="pt-0" min-width="280" @click.stop>
-      <v-list-item dense class="">
+      <template v-if="isGallery">
+        <div class="pa-2">
+          <v-select
+            v-model="coverImageFieldLoc"
+            label="Cover Image"
+            class="caption cover-image"
+            dense
+            outlined
+            :items="attachmentFields"
+            item-text="alias"
+            item-value="_cn"
+            hide-details
+            @click.stop
+          >
+            <template #prepend-inner>
+              <v-icon small class="cover-image-icon">
+                mdi-image
+              </v-icon>
+            </template>
+          </v-select>
+        </div>
+        <v-divider />
+      </template>
+
+      <v-list-item
+        dense
+        class=""
+      >
         <v-text-field
           v-model="fieldFilter"
           dense
@@ -109,6 +136,8 @@ export default {
     draggable
   },
   props: {
+    coverImageField: String,
+    isGallery: Boolean,
     sqlUi: [Object, Function],
     meta: Object,
     fieldsOrder: [Array],
@@ -126,6 +155,20 @@ export default {
     fieldsOrderLoc: []
   }),
   computed: {
+    attachmentFields() {
+      return [...(this.meta && this.meta.columns ? this.meta.columns.filter(f => f.uidt === 'Attachment') : []), {
+        alias: 'None',
+        _cn: ''
+      }]
+    },
+    coverImageFieldLoc: {
+      get() {
+        return this.coverImageField
+      },
+      set(val) {
+        this.$emit('update:coverImageField', val)
+      }
+    },
     columnMeta() {
       return this.meta && this.meta.columns ? this.meta.columns.reduce((o, c) => ({ ...o, [c._cn]: c }), {}) : {}
     },
@@ -186,17 +229,37 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
-/deep/ .v-list-item {
+::v-deep {
-  min-height: 30px;
+  .v-list-item {
-}
+    min-height: 30px;
+  }
 
-/deep/ .v-input--checkbox .v-icon {
+  .v-input--checkbox .v-icon {
-  font-size: 12px !important;
+    font-size: 12px !important;
+  }
+
+  .cover-image {
+    .v-input__append-inner {
+      margin-top: 4px !important;
+    }
+
+    .v-input__slot {
+      min-height: 25px !important;
+    }
+
+    &.v-input input {
+      max-height: 20px !important;
+    }
+
+    .cover-image-icon{
+      margin-top: 2px;
+    }
+  }
 }
 
 .drag-icon {
-  cursor: all-scroll;
+  cursor: all-scroll; /*cursor: grab;*/
-  /*cursor: grab;*/
 }
+
 </style>

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

@@ -513,7 +513,9 @@ export default {
     currentApiUrl: String,
     fieldsOrder: Array,
     viewStatus: Object,
-    columnsWidth: Object
+    columnsWidth: Object,
+    coverImageField: String,
+    showSystemFields: Boolean
   },
   data: () => ({
     time: Date.now(),
@@ -562,6 +564,8 @@ export default {
         this.$emit('update:fieldsOrder', queryParams.fieldsOrder || [])
         this.$emit('update:viewStatus', queryParams.viewStatus || {})
         this.$emit('update:columnsWidth', queryParams.columnsWidth || {})
+        this.$emit('update:coverImageField', queryParams.coverImageField)
+        this.$emit('update:showSystemFields', queryParams.showSystemFields)
         if (queryParams.showFields) {
           this.$emit('update:showFields', queryParams.showFields)
         } else {

packages/nc-gui/components/project/spreadsheet/dialog/createViewDialog.vue

@@ -75,10 +75,10 @@ export default {
   methods: {
     async createView() {
       let showFields = null
-
+      let attachmentCol
       if (this.show_as === 'gallery') {
         showFields = { [this.primaryValueColumn]: true }
-        const attachmentCol = this.meta.columns.find(c => c.uidt === 'Attachment')
+        attachmentCol = this.meta.columns.find(c => c.uidt === 'Attachment')
         if (attachmentCol) {
           showFields[attachmentCol.cn] = true
         }
@@ -97,6 +97,7 @@ export default {
           title: this.view_name,
           query_params: {
             showFields,
+            coverImageField: attachmentCol ? attachmentCol._cn : '',
             ...this.queryParams
           },
           parent_model_title: this.table,

packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js

@@ -86,6 +86,7 @@ export default {
     availableColumns() {
       let columns = []
 
+      if (!this.meta) { return [] }
       // todo: generate hideCols based on default values
       const hideCols = ['created_at', 'updated_at']
 
@@ -277,6 +278,11 @@ export default {
       },
       deep: true
     },
+    coverImageField(v) {
+      if (!this.loadingMeta || !this.loadingData) {
+        this.syncDataDebounce(this)
+      }
+    },
     fieldsOrder: {
       handler(v) {
         if (!this.loadingMeta || !this.loadingData) {
@@ -285,6 +291,11 @@ export default {
       },
       deep: true
     },
+    showSystemFields(v) {
+      if (!this.loadingMeta || !this.loadingData) {
+        this.syncDataDebounce(this)
+      }
+    },
     filters: {
       async handler(filter) {
         let defaultQuery = ''

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

@@ -104,6 +104,8 @@
         :fields-order.sync="fieldsOrder"
         :sql-ui="sqlUi"
         :show-system-fields.sync="showSystemFields"
+        :cover-image-field.sync="coverImageField"
+        :is-gallery="isGallery"
       />
 
       <sort-list
@@ -217,7 +219,7 @@
               @loadMeta="loadMeta"
             />
           </template>
-          <template v-else-if="selectedView && selectedView.show_as === 'gallery' ">
+          <template v-else-if="isGallery ">
             <gallery-view
               :nodes="nodes"
               :table="table"
@@ -225,7 +227,9 @@
               :available-columns="availableColumns"
               :meta="meta"
               :data="data"
+              :sql-ui="sqlUi"
               :primary-value-column="primaryValueColumn"
+              :cover-image-field="coverImageField"
               @expandForm="({rowIndex,rowMeta}) => expandRow(rowIndex,rowMeta)"
             />
           </template>
@@ -237,6 +241,7 @@
               :available-columns="availableColumns"
               :meta="meta"
               :data="data"
+              :sql-ui="sqlUi"
               :primary-value-column="primaryValueColumn"
               @expandForm="({rowIndex,rowMeta}) => expandRow(rowIndex,rowMeta)"
             />
@@ -272,6 +277,7 @@
         :table="table"
         :meta="meta"
         :selected-view-id.sync="selectedViewId"
+        :cover-image-field.sync="coverImageField"
         :selected-view.sync="selectedView"
         :primary-value-column="primaryValueColumn"
         :concatenated-x-where="concatenatedXWhere"
@@ -285,6 +291,7 @@
         :fields-order.sync="fieldsOrder"
         :view-status.sync="viewStatus"
         :columns-width.sync="columnsWidth"
+        :show-system-fields.sync="showSystemFields"
         @mapFieldsAndShowFields="mapFieldsAndShowFields"
         @loadTableData="loadTableData"
         @showAdditionalFeatOverlay="showAdditionalFeatOverlay($event)"
@@ -519,6 +526,7 @@ export default {
       type: null
     },
     fieldsOrder: [],
+    coverImageField: null,
     showSystemFields: false,
     showAdvanceOptions: false,
     loadViews: false,
@@ -659,7 +667,12 @@ export default {
           showFields: this.showFields,
           fieldsOrder: this.fieldsOrder,
           viewStatus: this.viewStatus,
-          columnsWidth: this.columnsWidth
+          columnsWidth: this.columnsWidth,
+          showSystemFields: this.showSystemFields
+        }
+
+        if (this.isGallery) {
+          queryParams.coverImageField = this.coverImageField
         }
 
         this.$set(this.selectedView, 'query_params', JSON.stringify(queryParams))
@@ -978,6 +991,9 @@ export default {
     }
   },
   computed: {
+    isGallery() {
+      return this.selectedView && this.selectedView.show_as === 'gallery'
+    },
     meta() {
       return this.$store.state.meta.metas[this.table]
     },

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

@@ -1,6 +1,6 @@
 <template>
   <v-container fluid>
-    <v-row>
+    <v-row class="align-stretch">
       <v-col
         v-for="({row, rowMeta},rowIndex) in data"
         :key="rowIndex"
@@ -8,10 +8,12 @@
       >
         <v-hover v-slot="{hover}">
           <v-card
+            class="h-100"
             :elevation="hover ? 4 : 1"
             @click="$emit('expandForm', {row,rowIndex,rowMeta})"
           >
             <v-carousel
+              v-if="attachmentColumn"
               :continuous="false"
               :cycle="true"
               :show-arrows="false"
@@ -31,10 +33,56 @@
               </v-carousel-item>
             </v-carousel>
 
-            <v-card-title
+            <!--            <v-card-title-->
-              class="text-capitalize"
+            <!--              class="text-capitalize"-->
-              v-text="row[primaryValueColumn]"
+            <!--              v-text="row[primaryValueColumn]"-->
-            />
+            <!--            />-->
+            <v-card-text>
+              <v-container>
+                <v-row class="">
+                  <v-col
+                    v-for="(col) in fields"
+                    v-show="showFields[col.alias|| col._cn]"
+                    :key="col.alias || col._cn"
+                    class="col-12 mt-1 mb-2 "
+                  >
+                    <label :for="`data-table-form-${col._cn}`" class="body-2 text-capitalize caption grey--text">
+                      <virtual-header-cell
+                        v-if="col.virtual"
+                        :column="col"
+                        :nodes="nodes"
+                        :is-form="true"
+                        :meta="meta"
+                      />
+                      <header-cell
+                        v-else
+                        :is-form="true"
+                        :value="col._cn"
+                        :column="col"
+                      />
+
+                    </label>
+
+                    <virtual-cell
+                      v-if="col.virtual"
+                      ref="virtual"
+                      :column="col"
+                      :row="row"
+                      :nodes="nodes"
+                      :meta="meta"
+                    />
+                    <table-cell
+                      v-else
+                      :value="row[col._cn]"
+                      :column="col"
+                      :sql-ui="sqlUi"
+                      class="xc-input body-2"
+                      :meta="meta"
+                    />
+                  </v-col>
+                </v-row>
+              </v-container>
+            </v-card-text>
           </v-card>
         </v-hover>
       </v-col>
@@ -43,8 +91,13 @@
 </template>
 
 <script>
+import VirtualHeaderCell from '../components/virtualHeaderCell'
+import HeaderCell from '../components/headerCell'
+import VirtualCell from '../components/virtualCell'
+import TableCell from '../components/cell'
 export default {
   name: 'GalleryView',
+  components: { TableCell, VirtualCell, HeaderCell, VirtualHeaderCell },
   props: [
     'nodes',
     'table',
@@ -52,11 +105,29 @@ export default {
     'availableColumns',
     'meta',
     'data',
-    'primaryValueColumn'
+    'primaryValueColumn',
+    'showSystemFields',
+    'sqlUi',
+    'coverImageField'
   ],
   computed: {
     attachmentColumn() {
-      return this.meta && this.meta.columns && this.meta.columns.find(c => c.uidt === 'Attachment')
+      return this.coverImageField && this.meta && this.meta.columns && this.meta.columns.find(c => c._cn === this.coverImageField)
+    },
+    fields() {
+      if (this.availableColumns) {
+        return this.availableColumns
+      }
+
+      const hideCols = ['created_at', 'updated_at']
+
+      if (this.showSystemFields) {
+        return this.meta.columns || []
+      } else {
+        return this.meta.columns.filter(c => !(c.pk && c.ai) && !hideCols.includes(c.cn) &&
+          !((this.meta.v || []).some(v => v.bt && v.bt.cn === c.cn))
+        ) || []
+      }
     }
   },
   methods: {