feat: gallery view (#1051)

* feat: gallery view

* fix: lint type

* chore: update i18n

* fix: presort interaction

* fix: the rendering for group by date field validation

* fix: display tooltip when text ellipsis is activated

* fix: rendering of card title

Author: Sky-FE

README.md

@@ -78,8 +78,8 @@ Visualize and interact with data in various ways best suited for their specific
 - Grid View: The default view of the table, which displays data in a spreadsheet-like format.
 - Form View: Input data in a form format, which is useful for collecting data.
 - Kanban View: Displays data in a Kanban board, which is a visual representation of data in columns and cards.
+- Gallery View: Displays data in a gallery format, which is useful for displaying images and other media.
 - Calendar View: Displays data in a calendar format, which is useful for tracking dates and events. (coming soon)
-- Gallery View: Displays data in a gallery format, which is useful for displaying images and other media. (coming soon)
 - Gantt View: Displays data in a Gantt chart, which is useful for tracking project schedules. (coming soon)
 - Timeline View: Displays data in a timeline format, which is useful for tracking events over time. (coming soon)
 

apps/nestjs-backend/src/features/aggregation/aggregation.service.ts

@@ -284,7 +284,7 @@ export class AggregationService {
         where: {
           tableId,
           ...(withView?.viewId ? { id: withView.viewId } : {}),
-          type: { in: [ViewType.Grid, ViewType.Gantt, ViewType.Kanban] },
+          type: { in: [ViewType.Grid, ViewType.Gantt, ViewType.Kanban, ViewType.Gallery] },
           deletedTime: null,
         },
       })

apps/nestjs-backend/src/features/share/share.service.ts

@@ -351,7 +351,7 @@ export class ShareService {
       return this.getViewAllCollaborators(shareInfo);
     }
 
-    // only form and kanban view can get all records
+    // only form, kanban and plugin view can get all collaborators
     if ([ViewType.Form, ViewType.Kanban, ViewType.Plugin].includes(view.type)) {
       return this.getViewAllCollaborators(shareInfo);
     }

apps/nestjs-backend/src/features/view/model/factory.ts

@@ -3,6 +3,7 @@ import { assertNever, ViewType } from '@teable/core';
 import type { View } from '@teable/db-main-prisma';
 import { plainToInstance } from 'class-transformer';
 import { FormViewDto } from './form-view.dto';
+import { GalleryViewDto } from './gallery-view.dto';
 import { GridViewDto } from './grid-view.dto';
 import { KanbanViewDto } from './kanban-view.dto';
 import { PluginViewDto } from './plugin-view.dto';
@@ -15,11 +16,12 @@ export function createViewInstanceByRaw(viewRaw: View) {
       return plainToInstance(GridViewDto, viewVo);
     case ViewType.Kanban:
       return plainToInstance(KanbanViewDto, viewVo);
+    case ViewType.Gallery:
+      return plainToInstance(GalleryViewDto, viewVo);
     case ViewType.Form:
       return plainToInstance(FormViewDto, viewVo);
     case ViewType.Plugin:
       return plainToInstance(PluginViewDto, viewVo);
-    case ViewType.Gallery:
     case ViewType.Gantt:
     case ViewType.Calendar:
       throw new Error('did not implement yet');

apps/nestjs-backend/src/features/view/model/gallery-view.dto.ts

@@ -0,0 +1,8 @@
+import type { IShareViewMeta } from '@teable/core';
+import { GalleryViewCore } from '@teable/core';
+
+export class GalleryViewDto extends GalleryViewCore {
+  defaultShareMeta: IShareViewMeta = {
+    includeRecords: true,
+  };
+}

apps/nestjs-backend/src/features/view/view.service.ts

@@ -139,7 +139,7 @@ export class ViewService implements IReadonlyAdapterService {
     // create view compensation data
     const innerViewRo = { ...viewRo };
     // primary field set visible default
-    if (viewRo.type === ViewType.Kanban) {
+    if ([ViewType.Kanban, ViewType.Gallery].includes(viewRo.type)) {
       const primaryField = await this.prismaService.txClient().field.findFirstOrThrow({
         where: { tableId, isPrimary: true, deletedTime: null },
         select: { id: true },

apps/nestjs-backend/src/utils/is-not-hidden-field.ts

@@ -1,4 +1,4 @@
-import type { IKanbanViewOptions, IViewVo } from '@teable/core';
+import type { IGalleryViewOptions, IKanbanViewOptions, IViewVo } from '@teable/core';
 import { ViewType } from '@teable/core';
 
 export const isNotHiddenField = (
@@ -16,6 +16,13 @@ export const isNotHiddenField = (
     );
   }
 
+  if (viewType === ViewType.Gallery) {
+    const { coverFieldId } = (options ?? {}) as IGalleryViewOptions;
+    return (
+      fieldId === coverFieldId || Boolean((columnMeta[fieldId] as { visible?: boolean })?.visible)
+    );
+  }
+
   if ([ViewType.Form].includes(viewType)) {
     return Boolean((columnMeta[fieldId] as { visible?: boolean })?.visible);
   }

apps/nestjs-backend/test/data-helpers/caces/view-default-share-meta.ts

@@ -19,6 +19,12 @@ export const VIEW_DEFAULT_SHARE_META: {
       includeRecords: true,
     },
   },
+  {
+    viewType: ViewType.Gallery,
+    defaultShareMeta: {
+      includeRecords: true,
+    },
+  },
   {
     viewType: ViewType.Grid,
     defaultShareMeta: {

apps/nextjs-app/package.json

@@ -115,6 +115,7 @@
     "@tailwindcss/container-queries": "0.1.1",
     "@tanstack/react-query": "4.36.1",
     "@tanstack/react-table": "8.11.7",
+    "@tanstack/react-virtual": "3.2.0",
     "@teable/common-i18n": "workspace:^",
     "@teable/core": "workspace:^",
     "@teable/icons": "workspace:^",

apps/nextjs-app/src/features/app/blocks/share/view/ShareView.tsx

@@ -2,6 +2,7 @@ import { ViewType } from '@teable/core';
 import { ShareViewContext } from '@teable/sdk/context';
 import { useContext } from 'react';
 import { FormView } from './component/form/FormView';
+import { GalleryView } from './component/gallery/GalleryView';
 import { GridView } from './component/grid/GridView';
 import { KanbanView } from './component/kanban/KanbanView';
 import { PluginView } from './component/plugin/SharePluginView';
@@ -18,6 +19,8 @@ export const ShareView = () => {
         return <GridView />;
       case ViewType.Kanban:
         return <KanbanView />;
+      case ViewType.Gallery:
+        return <GalleryView />;
       case ViewType.Plugin:
         return <PluginView shareId={shareId} plugin={extra?.plugin} />;
       default: