Merge pull request #4848 from nocodb/fix/kanban-share-view

fix: kanban share view issues

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

@@ -84,11 +84,31 @@ const onMove = (_event: { moved: { newIndex: number } }) => {
   $e('a:fields:reorder')
 }
 
+const coverOptions = computed<SelectProps['options']>(() => {
+  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 coverImageColumnId = computed({
-  get: () =>
-    (activeView.value?.type === ViewTypes.GALLERY || activeView.value?.type === ViewTypes.KANBAN) && activeView.value?.view
-      ? (activeView.value?.view as GalleryType).fk_cover_image_col_id
-      : undefined,
+  get: () => {
+    const fk_cover_image_col_id =
+      (activeView.value?.type === ViewTypes.GALLERY || activeView.value?.type === ViewTypes.KANBAN) && activeView.value?.view
+        ? (activeView.value?.view as GalleryType).fk_cover_image_col_id
+        : undefined
+    // check if `fk_cover_image_col_id` is in `coverOptions`
+    // e.g. in share view, users may not share the cover image column
+    if (coverOptions.value?.find((o) => o.value === fk_cover_image_col_id)) return fk_cover_image_col_id
+    // set to `No Image`
+    return null
+  },
   set: async (val) => {
     if (
       (activeView.value?.type === ViewTypes.GALLERY || activeView.value?.type === ViewTypes.KANBAN) &&
@@ -113,19 +133,6 @@ const coverImageColumnId = computed({
   },
 })
 
-const coverOptions = computed<SelectProps['options']>(() => {
-  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) =>
   h(isVirtualCol(c) ? resolveComponent('SmartsheetHeaderVirtualCellIcon') : resolveComponent('SmartsheetHeaderCellIcon'), {
     columnMeta: c,

packages/nc-gui/components/smartsheet/toolbar/ShareView.vue

@@ -86,10 +86,17 @@ const genShareLink = async () => {
   if (!view.value?.id) return
 
   const response = (await $api.dbViewShare.create(view.value.id)) as SharedView
+
   const meta = isString(response.meta) ? JSON.parse(response.meta) : response.meta
 
   shared.value = { ...response, meta }
 
+  if (shared.value.type === ViewTypes.KANBAN) {
+    const { groupingFieldColumn } = useKanbanViewStoreOrThrow()
+    shared.value.meta = { ...shared.value.meta, groupingFieldColumn: groupingFieldColumn.value }
+    await updateSharedViewMeta(true)
+  }
+
   passwordProtected.value = !!shared.value.password && shared.value.password !== ''
 
   showShareModel = true
@@ -133,15 +140,15 @@ async function saveTheme() {
 
 // const saveTransitionDuration = useDebounceFn(updateSharedViewMeta, 1000, { maxWait: 2000 })
 
-async function updateSharedViewMeta() {
+async function updateSharedViewMeta(silentMessage = false) {
   try {
     const meta = shared.value.meta && isString(shared.value.meta) ? JSON.parse(shared.value.meta) : shared.value.meta
 
     await $api.dbViewShare.update(shared.value.id, {
       meta,
     })
 
-    message.success(t('msg.success.updated'))
+    if (!silentMessage) message.success(t('msg.success.updated'))
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }

packages/nc-gui/composables/useKanbanViewStore.ts

@@ -112,7 +112,10 @@ const [useProvideKanbanViewStore, useKanbanViewStore] = useInjectionState(
       let res
 
       if (isPublic.value) {
-        res = await fetchSharedViewGroupedData(groupingFieldColumn!.value!.id!)
+        res = await fetchSharedViewGroupedData(groupingFieldColumn!.value!.id!, {
+          sortsArr: sorts.value,
+          filtersArr: nestedFilters.value,
+        })
       } else {
         res = await api.dbViewRow.groupedDataList(
           'noco',
@@ -138,14 +141,15 @@ const [useProvideKanbanViewStore, useKanbanViewStore] = useInjectionState(
       if (stackTitle === null) {
         where = `(${groupingField.value},is,null)`
       }
+
       const response = !isPublic.value
         ? await api.dbViewRow.list('noco', project.value.id!, meta.value!.id!, viewMeta.value!.id!, {
             ...params,
             ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
             ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
             where,
           })
-        : await fetchSharedViewData({ sortsArr: sorts.value, filtersArr: nestedFilters.value })
+        : await fetchSharedViewData({ sortsArr: sorts.value, filtersArr: nestedFilters.value, offset: params.offset })
 
       formattedData.value.set(stackTitle, [...formattedData.value.get(stackTitle)!, ...formatData(response.list)])
     }
@@ -155,9 +159,12 @@ const [useProvideKanbanViewStore, useKanbanViewStore] = useInjectionState(
       kanbanMetaData.value = isPublic.value
         ? (sharedView.value?.view as KanbanType)
         : await $api.dbView.kanbanRead(viewMeta.value.id)
+
       // set groupingField
-      groupingFieldColumn.value =
-        (meta.value.columns as ColumnType[]).filter((f) => f.id === kanbanMetaData.value.fk_grp_col_id)[0] || {}
+      groupingFieldColumn.value = !isPublic.value
+        ? (meta.value.columns as ColumnType[]).filter((f) => f.id === kanbanMetaData.value.fk_grp_col_id)[0] || {}
+        : ((typeof sharedView.value?.meta === 'string' ? JSON.parse(sharedView.value?.meta) : sharedView.value?.meta)
+            .groupingFieldColumn! as ColumnType)
 
       groupingField.value = groupingFieldColumn.value.title!
 

packages/nc-gui/composables/useSharedView.ts

@@ -70,6 +70,7 @@ export function useSharedView() {
     meta.value = { ...viewMeta.model }
 
     let order = 1
+
     meta.value!.columns = [...viewMeta.model.columns]
       .filter((c) => c.show)
       .map((c) => ({ ...c, order: order++ }))
@@ -92,16 +93,27 @@ export function useSharedView() {
     Object.keys(relatedMetas).forEach((key) => setMeta(relatedMetas[key]))
   }
 
-  const fetchSharedViewData = async ({ sortsArr, filtersArr }: { sortsArr: SortType[]; filtersArr: FilterType[] }) => {
+  const fetchSharedViewData = async ({
+    sortsArr,
+    filtersArr,
+    offset,
+  }: {
+    sortsArr: SortType[]
+    filtersArr: FilterType[]
+    offset?: number
+  }) => {
     if (!sharedView.value) return
 
-    const page = paginationData.value.page || 1
-    const pageSize = paginationData.value.pageSize || appInfoDefaultLimit
+    if (!offset) {
+      const page = paginationData.value.page || 1
+      const pageSize = paginationData.value.pageSize || appInfoDefaultLimit
+      offset = (page - 1) * pageSize
+    }
 
     const { data } = await $api.public.dataList(
       sharedView.value.uuid!,
       {
-        offset: (page - 1) * pageSize,
+        offset,
         filterArrJson: JSON.stringify(filtersArr ?? nestedFilters.value),
         sortArrJson: JSON.stringify(sortsArr ?? sorts.value),
       } as any,
@@ -114,7 +126,10 @@ export function useSharedView() {
     return data
   }
 
-  const fetchSharedViewGroupedData = async (columnId: string, params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
+  const fetchSharedViewGroupedData = async (
+    columnId: string,
+    { sortsArr, filtersArr }: { sortsArr: SortType[]; filtersArr: FilterType[] },
+  ) => {
     if (!sharedView.value) return
 
     const page = paginationData.value.page || 1
@@ -125,9 +140,8 @@ export function useSharedView() {
       columnId,
       {
         offset: (page - 1) * pageSize,
-        filterArrJson: JSON.stringify(nestedFilters.value),
-        sortArrJson: JSON.stringify(sorts.value),
-        ...params,
+        filterArrJson: JSON.stringify(filtersArr ?? nestedFilters.value),
+        sortArrJson: JSON.stringify(sortsArr ?? sorts.value),
       } as any,
       {
         headers: {

packages/nc-gui/layouts/shared-view.vue

@@ -1,7 +1,10 @@
 <script lang="ts" setup>
 import { navigateTo, useEventListener, useRouter } from '#imports'
-const { isLoading, currentVersion } = useGlobal()
+
+const { isLoading, appInfo } = useGlobal()
+
 const { sharedView } = useSharedView()
+
 const router = useRouter()
 
 onMounted(() => {
@@ -43,7 +46,7 @@ export default {
         <div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105" @click="navigateTo('/')">
           <a-tooltip placement="bottom">
             <template #title>
-              {{ currentVersion }}
+              {{ appInfo.version }}
             </template>
             <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
           </a-tooltip>

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

@@ -2264,6 +2264,7 @@ export class Api<
      *
      * @tags DB table column
      * @name Delete
+     * @summary Column Delete
      * @request DELETE:/api/v1/db/meta/columns/{columnId}
      * @response `200` `void` OK
      */
@@ -2274,6 +2275,22 @@ export class Api<
         ...params,
       }),
 
+    /**
+     * No description
+     *
+     * @tags DB Table Column
+     * @name Get
+     * @summary Column Get
+     * @request GET:/api/v1/db/meta/columns/{columnId}
+     * @response `200` `void` OK
+     */
+    get: (columnId: string, params: RequestParams = {}) =>
+      this.request<void, any>({
+        path: `/api/v1/db/meta/columns/${columnId}`,
+        method: 'GET',
+        ...params,
+      }),
+
     /**
      * No description
      *
@@ -3576,6 +3593,7 @@ export class Api<
         where?: string;
         /** Query params for nested data */
         nested?: any;
+        offset?: number;
       },
       params: RequestParams = {}
     ) =>

packages/nocodb/src/lib/meta/api/columnApis.ts

@@ -101,6 +101,10 @@ async function createHmAndBtColumn(
   }
 }
 
+export async function columnGet(req: Request, res: Response) {
+  res.json(await Column.get({ colId: req.params.columnId }));
+}
+
 export async function columnAdd(
   req: Request<any, any, ColumnReqType & { uidt: UITypes }>,
   res: Response<TableType>
@@ -1811,21 +1815,31 @@ async function createColumnIndex({
 }
 
 const router = Router({ mergeParams: true });
+
 router.post(
   '/api/v1/db/meta/tables/:tableId/columns/',
   metaApiMetrics,
   ncMetaAclMw(columnAdd, 'columnAdd')
 );
+
 router.patch(
   '/api/v1/db/meta/columns/:columnId',
   metaApiMetrics,
   ncMetaAclMw(columnUpdate, 'columnUpdate')
 );
+
 router.delete(
   '/api/v1/db/meta/columns/:columnId',
   metaApiMetrics,
   ncMetaAclMw(columnDelete, 'columnDelete')
 );
+
+router.get(
+  '/api/v1/db/meta/columns/:columnId',
+  metaApiMetrics,
+  ncMetaAclMw(columnGet, 'columnGet')
+);
+
 router.post(
   '/api/v1/db/meta/columns/:columnId/primary',
   metaApiMetrics,

packages/nocodb/src/lib/meta/api/publicApis/publicDataExportApis.ts

@@ -28,16 +28,26 @@ async function exportExcel(req: Request, res: Response) {
   }
 
   const model = await view.getModelWithInfo();
+
   await view.getColumns();
 
   const { offset, dbRows, elapsed } = await getDbRows(model, view, req);
 
   const fields = req.query.fields as string[];
 
-  const data = XLSX.utils.json_to_sheet(dbRows, { header: fields });
+  const data = XLSX.utils.json_to_sheet(
+    dbRows.map((o: Record<string, any>) =>
+      Object.fromEntries(fields.map((f) => [f, o[f]]))
+    ),
+    { header: fields }
+  );
+
   const wb = XLSX.utils.book_new();
+
   XLSX.utils.book_append_sheet(wb, data, view.title);
+
   const buf = XLSX.write(wb, { type: 'base64', bookType: 'xlsx' });
+
   res.set({
     'Access-Control-Expose-Headers': 'nc-export-offset',
     'nc-export-offset': offset,

packages/nocodb/src/lib/meta/api/publicApis/publicMetaApis.ts

@@ -39,8 +39,6 @@ export async function viewMetaGet(req: Request, res: Response) {
   // todo: return only required props
   delete view['password'];
 
-  // const columnsById = c;
-
   view.model.columns = view.columns
     .filter((c) => {
       const column = view.model.columnsById[c.fk_column_id];