github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat(gui-v2): gallery view 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2716/head
Pranav C 2 years ago
parent
c2086f62aa
commit
2156097504
3 changed files with 99 additions and 77 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 164
      packages/nc-gui-v2/components/smartsheet/Gallery.vue
  2. 1
      packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
  3. 11
      packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue

164
packages/nc-gui-v2/components/smartsheet/Gallery.vue
Unescape View File

@ -33,65 +33,76 @@ watch(
</script> </script>
<template> <template>
<v-container fluid> <v-container fluid class="nc-gallery-container">
<v-row class="align-stretch"> <!-- <v-row class="align-stretch">
<v-col v-for="({ row }, rowIndex) in data" :key="rowIndex" class="col-md-4 col-lg-3 col-sm-6 col-12"> <v-col v-for="({ row }, rowIndex) in data" :key="rowIndex"
<!-- <v-hover v-slot="{hover}"> --> md="4"
lg="3"
sm="6"
xs="12"> -->
<!-- <v-hover v-slot="{hover}"> -->
<div class="flex flex-wrap gap-4 justify-center">
<div v-for="({ row }, rowIndex) in data" :key="rowIndex" class="md:w-[300px] lg:w-[400px] xl:w-[500px]">
<v-card class="h-100"> <v-card class="h-100">
<!-- :elevation="hover ? 4 : 1" <!-- :elevation="hover ? 4 : 1"
:ripple="!isLocked" :ripple="!isLocked"
@click="!isLocked && $emit('expandForm', {row,rowIndex,rowMeta})" @click="!isLocked && $emit('expandForm', {row,rowIndex,rowMeta})"
> --> > -->
<!-- <v-carousel <!-- <v-carousel
v-if="attachmentColumn" v-if="attachmentColumn"
:continuous="false" :continuous="false"
:cycle="true" :cycle="true"
:show-arrows="false" :show-arrows="false"
hide-delimiter-background hide-delimiter-background
delimiter-icon="mdi-minus" delimiter-icon="mdi-minus"
height="200"
>
<v-carousel-item
v-for="(cover, i) in getCovers(row)"
:key="i"
>
<v-img
height="200" height="200"
:src="cover.url" >
:alt="cover.title" <v-carousel-item
/> v-for="(cover, i) in getCovers(row)"
</v-carousel-item> :key="i"
</v-carousel> --> >
<v-img
height="200"
:src="cover.url"
:alt="cover.title"
/>
</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-card-text>
<v-container> <v-container fluid>
<v-row class=""> <!-- <v-row class="">
<v-col v-for="col in meta.columns" :key="col.title" cols="3" class="col-12 mt-1 mb-2"> <v-col v-for="col in meta.columns" :key="col.title"
<!-- <v-col v-for="col in fields" v-show="showFields[col.title]" :key="col.title" class="col-12 mt-1 mb-2"> --> class="col-12"> -->
<!-- <div v-for="col in meta.columns" :key="col.title" class="my-8">
todo:header cell <!-- <v-col v-for="col in fields" v-show="showFields[col.title]" :key="col.title" class="col-12 mt-1 mb-2"> -->
<!--
<label :for="`data-table-form-${col.title}`" class="body-2 text-capitalize caption grey&#45;&#45;text"> todo:header cell
<virtual-header-cell -->
v-if="isVirtualCol(col)" <label :for="`data-table-form-${col.title}`" class="body-2 text-capitalize caption grey--text">
:column="col" <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
:nodes="nodes" <SmartsheetHeaderCell v-else :column="col" />
:is-form="true" <!-- <virtual-header-cell
:meta="meta" v-if="isVirtualCol(col)"
/> :column="col"
<header-cell :nodes="nodes"
v-else :is-form="true"
:is-form="true" :meta="meta"
:value="col.title" />
:column="col" <header-cell
/> v-else
:is-form="true"
</label> :value="col.title"
--> :column="col"
/> -->
</label>
<div class="mt-2">
<SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row[col.title]" :edit-enabled="false" :column="col" /> <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row[col.title]" :edit-enabled="false" :column="col" />
<SmartsheetCell <SmartsheetCell
@ -101,31 +112,36 @@ todo:header cell
:column="col" :column="col"
@update:model-value="updateRowProperty(row, col.title)" @update:model-value="updateRowProperty(row, col.title)"
/> />
<!-- <virtual-cell </div>
v-if="isVirtualCol(col)" <!-- <virtual-cell
ref="virtual" v-if="isVirtualCol(col)"
:column="col" ref="virtual"
:row="row" :column="col"
:nodes="nodes" :row="row"
:meta="meta" :nodes="nodes"
/> :meta="meta"
<table-cell />
v-else <table-cell
:value="row[col.title]" v-else
:column="col" :value="row[col.title]"
:sql-ui="sqlUi" :column="col"
:is-locked="isLocked" :sql-ui="sqlUi"
class="xc-input body-2" :is-locked="isLocked"
:meta="meta" class="xc-input body-2"
/> --> :meta="meta"
</v-col> /> -->
</v-row> <!-- </v-col> -->
<!-- </v-row> -->
</div>
</v-container> </v-container>
</v-card-text> </v-card-text>
</v-card> </v-card>
<!-- </v-hover> --> </div>
</v-col> </div>
</v-row>
<!-- </v-hover> -->
<!-- </v-col>
</v-row> -->
</v-container> </v-container>
</template> </template>
@ -223,3 +239,9 @@ export default {
</style> </style>
--> -->
<style scoped>
.nc-gallery-container {
height: calc(100vh - 160px);
overflow: auto;
}
</style>

1
packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
Unescape View File

@ -7,7 +7,6 @@ import useVirtualCell from '~/composables/useVirtualCell'
interface Props { interface Props {
column: ColumnType column: ColumnType
modelValue: any modelValue: any
editEnabled: boolean
} }
const { column, modelValue: value } = defineProps<Props>() const { column, modelValue: value } = defineProps<Props>()

11
packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
Unescape View File

@ -1,14 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { ReadonlyInj } from '~/components'
import MdiCloseThickIcon from '~icons/mdi/close-thick' import MdiCloseThickIcon from '~icons/mdi/close-thick'
interface Props { interface Props {
value: string | number | boolean value?: string | number | boolean
active: boolean active?: boolean
item: any item?: any
readonly: boolean
} }
const { value, active, item, readonly } = defineProps<Props>() const { value, active, item } = defineProps<Props>()
const readonly = inject(ReadonlyInj, false)
</script> </script>
<template> <template>

Write Preview
Loading…
Cancel
Save