Browse Source

Merge branch 'develop' into feat/gallery-share-view

Rebase to latest develop
pull/4007/head
Raju Udava 2 years ago
parent
commit
4253b6e309
  1. 2
      packages/nc-gui/components/cell/attachment/Carousel.vue
  2. 2
      packages/nc-gui/components/cell/attachment/index.vue
  3. 8
      packages/nc-gui/components/general/Overlay.vue
  4. 2
      packages/nc-gui/components/smartsheet/Gallery.vue
  5. 67
      packages/nc-gui/components/smartsheet/Kanban.vue
  6. 52
      packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
  7. 1
      packages/nocodb-sdk/src/lib/Api.ts
  8. 4
      packages/nocodb/src/lib/migrations/XcMigrationSourcev2.ts
  9. 41
      packages/nocodb/src/lib/migrations/v2/nc_022_add_kanban_fk_cover_image_col_id.ts
  10. 10
      packages/nocodb/src/lib/models/KanbanView.ts
  11. 21
      packages/nocodb/src/lib/models/View.ts
  12. 3
      scripts/sdk/swagger.json

2
packages/nc-gui/components/cell/attachment/Carousel.vue

@ -47,7 +47,7 @@ onClickOutside(carouselRef, () => {
</script>
<template>
<general-overlay v-model="selectedImage">
<general-overlay v-model="selectedImage" z-index="1001">
<template v-if="selectedImage">
<div class="overflow-hidden p-12 text-center relative">
<div class="text-white group absolute top-5 right-5">

2
packages/nc-gui/components/cell/attachment/index.vue

@ -197,7 +197,7 @@ watch(
</template>
<template v-if="isImage(item.title, item.mimetype ?? item.type) && (item.url || item.data)">
<div class="nc-attachment flex items-center justify-center" @click="selectedImage = item">
<div class="nc-attachment flex items-center justify-center" @click.stop="selectedImage = item">
<LazyNuxtImg
quality="75"
placeholder

8
packages/nc-gui/components/general/Overlay.vue

@ -11,15 +11,18 @@ interface Props {
target?: TeleportProps['to']
teleportDisabled?: TeleportProps['disabled']
transition?: boolean
zIndex?: string | number
}
interface Emits {
(event: 'update:modelValue', value: boolean): void
(event: 'close'): void
(event: 'open'): void
}
const { transition = true, teleportDisabled = false, inline = false, target, ...rest } = defineProps<Props>()
const { transition = true, teleportDisabled = false, inline = false, target, zIndex = 100, ...rest } = defineProps<Props>()
const emits = defineEmits<Emits>()
@ -47,8 +50,9 @@ export default {
<div
v-show="!!vModel"
v-bind="$attrs"
:style="{ zIndex }"
:class="[inline ? 'absolute' : 'fixed']"
class="z-100 top-0 left-0 bottom-0 right-0 bg-gray-700/75"
class="top-0 left-0 bottom-0 right-0 bg-gray-700/75"
>
<slot :is-open="vModel" />
</div>

2
packages/nc-gui/components/smartsheet/Gallery.vue

@ -177,7 +177,7 @@ watch(view, async (nextView) => {
class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]"
@click="expandFormClick($event, record)"
>
<template #cover>
<template v-if="galleryData.fk_cover_image_col_id" #cover>
<a-carousel v-if="!reloadAttachments && attachments(record).length" autoplay class="gallery-carousel" arrows>
<template #customPaging>
<a>

67
packages/nc-gui/components/smartsheet/Kanban.vue

@ -21,6 +21,10 @@ import {
} from '#imports'
import type { Row as RowType } from '~/lib'
interface Attachment {
url: string
}
const meta = inject(MetaInj, ref())
const view = inject(ActiveViewInj, ref())
@ -87,6 +91,16 @@ const hasEditPermission = $computed(() => isUIAllowed('xcDatatableEditable'))
const fields = inject(FieldsInj, ref([]))
const fieldsWithoutCover = computed(() => fields.value.filter((f) => f.id !== kanbanMetaData.value?.fk_cover_image_col_id))
const coverImageColumn: any = $(
computed(() =>
meta.value?.columnsById
? meta.value.columnsById[kanbanMetaData.value?.fk_cover_image_col_id as keyof typeof meta.value.columnsById]
: {},
),
)
const kanbanContainerRef = ref()
const selectedStackTitle = ref('')
@ -103,8 +117,24 @@ reloadViewDataHook?.on(async () => {
await loadKanbanData()
})
const attachments = (record: any): Attachment[] => {
try {
return coverImageColumn?.title && record.row[coverImageColumn.title] ? JSON.parse(record.row[coverImageColumn.title]) : []
} catch (e) {
return []
}
}
const reloadAttachments = ref(false)
reloadViewMetaHook?.on(async () => {
await loadKanbanMeta()
reloadAttachments.value = true
nextTick(() => {
reloadAttachments.value = false
})
})
const expandForm = (row: RowType, state?: Record<string, any>) => {
@ -400,8 +430,43 @@ watch(view, async (nextView) => {
@click="expandFormClick($event, record)"
@contextmenu="showContextMenu($event, record)"
>
<template v-if="kanbanMetaData.fk_cover_image_col_id" #cover>
<a-carousel
v-if="!reloadAttachments && attachments(record).length"
autoplay
class="gallery-carousel"
arrows
>
<template #customPaging>
<a>
<div class="pt-[12px]">
<div></div>
</div>
</a>
</template>
<template #prevArrow>
<div style="z-index: 1"></div>
</template>
<template #nextArrow>
<div style="z-index: 1"></div>
</template>
<LazyNuxtImg
v-for="(attachment, index) in attachments(record)"
:key="`carousel-${record.row.id}-${index}`"
quality="90"
placeholder
class="h-52 object-cover"
:src="attachment.url"
/>
</a-carousel>
<MdiFileImageBox v-else class="w-full h-48 my-4 text-cool-gray-200" />
</template>
<div
v-for="col in fields"
v-for="col in fieldsWithoutCover"
:key="`record-${record.row.id}-${col.id}`"
class="flex flex-col rounded-lg w-full"
>

52
packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { ColumnType, GalleryType } from 'nocodb-sdk'
import type { ColumnType, GalleryType, KanbanType } from 'nocodb-sdk'
import { UITypes, ViewTypes, isVirtualCol } from 'nocodb-sdk'
import Draggable from 'vuedraggable'
import type { SelectProps } from 'ant-design-vue'
@ -75,30 +75,44 @@ const onMove = (_event: { moved: { newIndex: number } }) => {
const coverImageColumnId = computed({
get: () =>
activeView.value?.type === ViewTypes.GALLERY && activeView.value?.view
(activeView.value?.type === ViewTypes.GALLERY || activeView.value?.type === ViewTypes.KANBAN) && activeView.value?.view
? (activeView.value?.view as GalleryType).fk_cover_image_col_id
: undefined,
set: async (val) => {
if (val && activeView.value?.type === ViewTypes.GALLERY && activeView.value?.id && activeView.value?.view) {
await $api.dbView.galleryUpdate(activeView.value?.id, {
...activeView.value?.view,
fk_cover_image_col_id: val,
})
;(activeView.value.view as GalleryType).fk_cover_image_col_id = val
if (
(activeView.value?.type === ViewTypes.GALLERY || activeView.value?.type === ViewTypes.KANBAN) &&
activeView.value?.id &&
activeView.value?.view
) {
if (activeView.value?.type === ViewTypes.GALLERY) {
await $api.dbView.galleryUpdate(activeView.value?.id, {
...activeView.value?.view,
fk_cover_image_col_id: val,
})
;(activeView.value.view as GalleryType).fk_cover_image_col_id = val
} else if (activeView.value?.type === ViewTypes.KANBAN) {
await $api.dbView.kanbanUpdate(activeView.value?.id, {
...activeView.value?.view,
fk_cover_image_col_id: val,
})
;(activeView.value.view as KanbanType).fk_cover_image_col_id = val
}
reloadViewMetaHook.trigger()
}
},
})
const coverOptions = computed<SelectProps['options']>(() => {
return fields.value
?.filter((el) => el.fk_column_id && metaColumnById.value[el.fk_column_id].uidt === UITypes.Attachment)
.map((field) => {
return {
value: field.fk_column_id,
label: field.title,
}
})
const filterFields =
fields.value
?.filter((el) => el.fk_column_id && metaColumnById.value[el.fk_column_id].uidt === UITypes.Attachment)
.map((field) => {
return {
value: field.fk_column_id,
label: field.title,
}
}) ?? []
return [{ value: null, label: 'No Image' }, ...filterFields]
})
const getIcon = (c: ColumnType) =>
@ -127,7 +141,11 @@ const getIcon = (c: ColumnType) =>
class="p-3 min-w-[280px] bg-gray-50 shadow-lg nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto !border"
@click.stop
>
<a-card v-if="activeView.type === ViewTypes.GALLERY" size="small" title="Cover image">
<a-card
v-if="activeView.type === ViewTypes.GALLERY || activeView.type === ViewTypes.KANBAN"
size="small"
title="Cover image"
>
<a-select
v-model:value="coverImageColumnId"
class="w-full"

1
packages/nocodb-sdk/src/lib/Api.ts

@ -383,6 +383,7 @@ export interface KanbanType {
columns?: KanbanColumnType[];
fk_model_id?: string;
fk_grp_col_id?: string | null;
fk_cover_image_col_id?: string;
meta?: string | object;
}

4
packages/nocodb/src/lib/migrations/XcMigrationSourcev2.ts

@ -9,6 +9,7 @@ import * as nc_018_add_meta_in_view from './v2/nc_018_add_meta_in_view';
import * as nc_019_add_meta_in_meta_tables from './v2/nc_019_add_meta_in_meta_tables';
import * as nc_020_add_kanban_meta_col from './v2/nc_020_add_kanban_meta_col';
import * as nc_021_rename_kanban_grp_col_id from './v2/nc_021_rename_kanban_grp_col_id';
import * as nc_022_add_kanban_fk_cover_image_col_id from './v2/nc_022_add_kanban_fk_cover_image_col_id';
// Create a custom migration source class
export default class XcMigrationSourcev2 {
@ -29,6 +30,7 @@ export default class XcMigrationSourcev2 {
'nc_019_add_meta_in_meta_tables',
'nc_020_add_kanban_meta_col',
'nc_021_rename_kanban_grp_col_id',
'nc_022_add_kanban_fk_cover_image_col_id'
]);
}
@ -60,6 +62,8 @@ export default class XcMigrationSourcev2 {
return nc_020_add_kanban_meta_col;
case 'nc_021_rename_kanban_grp_col_id':
return nc_021_rename_kanban_grp_col_id;
case 'nc_022_add_kanban_fk_cover_image_col_id':
return nc_022_add_kanban_fk_cover_image_col_id;
}
}
}

41
packages/nocodb/src/lib/migrations/v2/nc_022_add_kanban_fk_cover_image_col_id.ts

@ -0,0 +1,41 @@
import Knex from 'knex';
import { MetaTable } from '../../utils/globals';
const up = async (knex: Knex) => {
await knex.schema.alterTable(MetaTable.KANBAN_VIEW, (table) => {
table.string('fk_cover_image_col_id', 20);
table
.foreign('fk_cover_image_col_id')
.references(`${MetaTable.COLUMNS}.id`);
});
};
const down = async (knex) => {
await knex.schema.alterTable(MetaTable.KANBAN_VIEW, (table) => {
table.dropColumns('fk_cover_image_col_id');
});
};
export { up, down };
/**
* @copyright Copyright (c) 2021, Xgene Cloud Ltd
*
* @author Wing-Kam Wong <wingkwong.code@gmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/

10
packages/nocodb/src/lib/models/KanbanView.ts

@ -1,5 +1,5 @@
import Noco from '../Noco';
import { KanbanType } from 'nocodb-sdk';
import { KanbanType, UITypes } from 'nocodb-sdk';
import { CacheGetType, CacheScope, MetaTable } from '../utils/globals';
import View from './View';
import NocoCache from '../cache/NocoCache';
@ -10,6 +10,7 @@ export default class KanbanView implements KanbanType {
project_id?: string;
base_id?: string;
fk_grp_col_id?: string;
fk_cover_image_col_id?: string;
meta?: string | object;
// below fields are not in use at this moment
@ -58,11 +59,18 @@ export default class KanbanView implements KanbanType {
}
static async insert(view: Partial<KanbanView>, ncMeta = Noco.ncMeta) {
const columns = await View.get(view.fk_view_id, ncMeta)
.then((v) => v?.getModel(ncMeta))
.then((m) => m.getColumns(ncMeta));
const insertObj = {
project_id: view.project_id,
base_id: view.base_id,
fk_view_id: view.fk_view_id,
fk_grp_col_id: view.fk_grp_col_id,
fk_cover_image_col_id:
view?.fk_cover_image_col_id ||
columns?.find((c) => c.uidt === UITypes.Attachment)?.id,
meta: view.meta,
};

21
packages/nocodb/src/lib/models/View.ts

@ -355,8 +355,7 @@ export default class View implements ViewType {
{
let order = 1;
let galleryShowLimit = 0;
let kanbanShowCount = 0;
let kanbanAttachmentCount = 0;
let kanbanShowLimit = 0;
if (view.type === ViewTypes.KANBAN && !copyFromView) {
// sort by primary value & attachment first, then by singleLineText & Number
@ -401,22 +400,14 @@ export default class View implements ViewType {
if (vCol.id === kanbanView?.fk_grp_col_id) {
// include grouping field if it exists
show = true;
} else if (vCol.pv) {
// Show primary key
} else if (vCol.id === kanbanView.fk_cover_image_col_id || vCol.pv) {
// Show cover image or primary key
show = true;
kanbanShowCount++;
} else if (
vCol.uidt === UITypes.Attachment &&
kanbanAttachmentCount < 1
) {
// Show at most 1 attachment
show = true;
kanbanAttachmentCount++;
kanbanShowCount++;
} else if (kanbanShowCount < 3 && !isSystemColumn(vCol)) {
kanbanShowLimit++;
} else if (kanbanShowLimit < 3 && !isSystemColumn(vCol)) {
// show at most 3 non-system columns
show = true;
kanbanShowCount++;
kanbanShowLimit++;
} else {
// other columns will be hidden
show = false;

3
scripts/sdk/swagger.json

@ -7919,6 +7919,9 @@
"null"
]
},
"fk_cover_image_col_id": {
"type": "string"
},
"meta": {
"type": [
"string",

Loading…
Cancel
Save