Browse Source

feat: Enable customization in Gallery view

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/498/head
Pranav C 3 years ago
parent
commit
166142d351
  1. 2
      packages/nc-gui/components/project/spreadsheet/components/cell.vue
  2. 77
      packages/nc-gui/components/project/spreadsheet/components/fieldsMenu.vue
  3. 6
      packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
  4. 5
      packages/nc-gui/components/project/spreadsheet/dialog/createViewDialog.vue
  5. 11
      packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js
  6. 20
      packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
  7. 83
      packages/nc-gui/components/project/spreadsheet/views/galleryView.vue

2
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 {

77
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>
/deep/ .v-list-item {
<style scoped lang="scss">
::v-deep {
.v-list-item {
min-height: 30px;
}
}
/deep/ .v-input--checkbox .v-icon {
.v-input--checkbox .v-icon {
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: grab;*/
cursor: all-scroll; /*cursor: grab;*/
}
</style>

6
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 {

5
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,

11
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 = ''

20
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]
},

83
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
class="text-capitalize"
v-text="row[primaryValueColumn]"
<!-- <v-card-title-->
<!-- class="text-capitalize"-->
<!-- 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: {

Loading…
Cancel
Save