Merge pull request #3197 from nocodb/fix/followup-on-shared-view

Follow up on shared view

packages/nc-gui-v2/app.vue

@@ -1,5 +1,11 @@
+<script setup lang="ts">
+const route = useRoute()
+
+const disableBaseLayout = $computed(() => route.path.startsWith('/nc/view') || route.path.startsWith('/nc/form'))
+</script>
+
 <template>
-  <NuxtLayout name="base">
+  <NuxtLayout :name="disableBaseLayout ? false : 'base'">
     <NuxtPage />
   </NuxtLayout>
 </template>

packages/nc-gui-v2/components/cell/Checkbox.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { ColumnInj, IsFormInj, getMdiIcon, inject } from '#imports'
-import { EditModeInj } from '~/context'
+import { ColumnInj, IsFormInj, ReadonlyInj, getMdiIcon, inject } from '#imports'
 
 interface Props {
   modelValue?: boolean | undefined | number
@@ -20,7 +19,7 @@ const column = inject(ColumnInj)
 
 const isForm = inject(IsFormInj)
 
-const editEnabled = inject(EditModeInj)
+const readOnly = inject(ReadonlyInj)
 
 const checkboxMeta = $computed(() => {
   return {
@@ -34,14 +33,17 @@ const checkboxMeta = $computed(() => {
 })
 
 function onClick() {
-  if (editEnabled) {
+  if (!readOnly) {
     vModel = !vModel
   }
 }
 </script>
 
 <template>
-  <div class="flex" :class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !vModel }">
+  <div
+    class="flex"
+    :class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !vModel && !readOnly, 'opacity-0': readOnly && !vModel }"
+  >
     <div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel }" @click="onClick">
       <component
         :is="getMdiIcon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)"

packages/nc-gui-v2/components/shared-view/Grid.vue

@@ -4,23 +4,23 @@ import type { TableType } from 'nocodb-sdk'
 
 import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '~/context'
 
-const { sharedView, meta, columns } = useSharedView()
+const { sharedView, meta } = useSharedView()
 
 const reloadEventHook = createEventHook<void>()
 provide(ReloadViewDataHookInj, reloadEventHook)
-provide(ReadonlyInj, ref(true))
+provide(ReadonlyInj, true)
 provide(MetaInj, meta)
 provide(ActiveViewInj, sharedView)
-provide(FieldsInj, columns)
+provide(FieldsInj, ref(meta.value.columns as any[]))
 provide(IsPublicInj, ref(true))
 
 useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
 </script>
 
 <template>
-  <div class="nc-container flex flex-col h-full mt-4 px-6">
+  <div class="nc-container flex flex-col h-full mt-1.5 px-12">
     <SmartsheetToolbar />
-    <SmartsheetGrid class="px-3" />
+    <SmartsheetGrid />
   </div>
 </template>
 

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Draggable from 'vuedraggable'
-import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj } from '~/context'
+import { ActiveViewInj, FieldsInj, IsLockedInj, IsPublicInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import { computed, inject, useNuxtApp, useViewColumns, watch } from '#imports'
 
 const meta = inject(MetaInj)!
@@ -8,6 +8,7 @@ const activeView = inject(ActiveViewInj)!
 const reloadDataHook = inject(ReloadViewDataHookInj)!
 const rootFields = inject(FieldsInj)
 const isLocked = inject(IsLockedInj)
+const isPublic = inject(IsPublicInj)
 
 const { $e } = useNuxtApp()
 
@@ -88,9 +89,9 @@ const onMove = (event: { moved: { newIndex: number } }) => {
         </div>
         <div class="nc-fields-list py-1">
           <Draggable :list="fields" item-key="id" @change="onMove($event)">
-            <template #item="{ element: field }">
+            <template #item="{ element: field, index: index }">
               <div v-show="filteredFieldList.includes(field)" :key="field.id" class="px-2 py-1 flex" @click.stop>
-                <a-checkbox v-model:checked="field.show" class="flex-shrink" @change="saveOrUpdate(field, i)">
+                <a-checkbox v-model:checked="field.show" class="flex-shrink" @change="saveOrUpdate(field, index)">
                   <span class="">{{ field.title }}</span>
                 </a-checkbox>
                 <div class="flex-1" />
@@ -101,7 +102,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
         </div>
         <v-divider class="my-2" />
 
-        <div class="p-2 py-1 flex" @click.stop>
+        <div v-if="!isPublic" class="p-2 py-1 flex" @click.stop>
           <a-checkbox v-model:checked="showSystemFields">
             <span class="text-xs"> {{ $t('activity.showSystemFields') }}</span>
           </a-checkbox>

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

@@ -21,7 +21,7 @@ const { isUIAllowed } = useUIPermission()
 
 let showShareModel = $ref(false)
 
-const passwordProtected = $ref(false)
+let passwordProtected = $ref(false)
 
 const shared = ref()
 
@@ -100,6 +100,20 @@ const copyLink = () => {
   copy(sharedViewUrl?.value as string)
   message.success('Copied to clipboard')
 }
+
+watch(
+  () => passwordProtected,
+  (value) => {
+    if (!value) {
+      shared.value.password = ''
+      saveShareLinkPassword()
+    }
+  },
+)
+
+onMounted(() => {
+  if (shared.value?.password?.length) passwordProtected = true
+})
 </script>
 
 <template>
@@ -133,7 +147,6 @@ const copyLink = () => {
         <a-collapse-panel key="1" header="More Options">
           <div class="mb-2">
             <a-checkbox v-model:checked="passwordProtected" class="!text-xs">{{ $t('msg.info.beforeEnablePwd') }} </a-checkbox>
-            <!--           todo: add password toggle -->
             <div v-if="passwordProtected" class="flex gap-2 mt-2 mb-4">
               <a-input
                 v-model:value="shared.password"

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -41,7 +41,7 @@ const isPublicView = inject(IsPublicInj, ref(false))
 // keep a root fields variable and will get modified from
 // fields menu and get used in grid and gallery
 const fields = inject(FieldsInj, ref([]))
-const readonly = inject(ReadonlyInj, ref(false))
+const readOnly = inject(ReadonlyInj, false)
 const isLocked = inject(IsLockedInj, false)
 
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
@@ -59,7 +59,15 @@ const { xWhere, isPkAvail, cellRefs } = useSmartsheetStoreOrThrow()
 
 const addColumnDropdown = ref(false)
 
-const contextMenu = ref(false)
+const _contextMenu = ref(false)
+const contextMenu = computed({
+  get: () => _contextMenu.value,
+  set: (val) => {
+    if (!readOnly) {
+      _contextMenu.value = val
+    }
+  },
+})
 
 const contextMenuTarget = ref(false)
 const expandedFormDlg = ref(false)
@@ -302,15 +310,20 @@ const expandForm = (row: Row, state: Record<string, any>) => {
             <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
               <th>
                 <div class="w-full h-full bg-gray-100 flex min-w-[70px] pl-5 pr-1 items-center">
-                  <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
-                  <div
-                    :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
-                    class="nc-check-all w-full align-center"
-                  >
-                    <a-checkbox v-model:checked="selectedAllRecords" />
+                  <template v-if="!readOnly">
+                    <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
+                    <div
+                      :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
+                      class="nc-check-all w-full align-center"
+                    >
+                      <a-checkbox v-model:checked="selectedAllRecords" />
 
-                    <span class="flex-1" />
-                  </div>
+                      <span class="flex-1" />
+                    </div>
+                  </template>
+                  <template v-else>
+                    <div class="text-gray-500">#</div>
+                  </template>
                 </div>
               </th>
               <th
@@ -324,14 +337,13 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                 @xcresized="resizingCol = null"
               >
                 <div class="w-full h-full bg-gray-100 flex items-center">
-                  <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readonly" />
+                  <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readOnly" />
 
-                  <SmartsheetHeaderCell v-else :column="col" :hide-menu="readonly" />
+                  <SmartsheetHeaderCell v-else :column="col" :hide-menu="readOnly" />
                 </div>
               </th>
-              <!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
               <th
-                v-if="!readonly && isUIAllowed('add-column')"
+                v-if="!readOnly && isUIAllowed('add-column')"
                 v-t="['c:column:add']"
                 class="cursor-pointer"
                 @click.stop="addColumnDropdown = true"
@@ -360,18 +372,21 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                 <tr class="nc-grid-row">
                   <td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
                     <div class="align-center flex gap-1 min-w-[55px]">
-                      <div v-if="!readonly" class="nc-row-no text-xs text-gray-500" :class="{ hidden: row.rowMeta.selected }">
+                      <div v-if="!readOnly" class="nc-row-no text-xs text-gray-500" :class="{ hidden: row.rowMeta.selected }">
+                        {{ rowIndex + 1 }}
+                      </div>
+                      <div v-else class="text-xs text-gray-500">
                         {{ rowIndex + 1 }}
                       </div>
                       <div
-                        v-if="!readonly"
+                        v-if="!readOnly"
                         :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
                         class="nc-row-expand-and-checkbox"
                       >
                         <a-checkbox v-model:checked="row.rowMeta.selected" />
                       </div>
                       <span class="flex-1" />
-                      <div v-if="!readonly" class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
+                      <div v-if="!readOnly" class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
                         <span
                           v-if="row.rowMeta?.commentCount"
                           class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"

packages/nc-gui-v2/composables/useSharedView.ts

@@ -13,11 +13,10 @@ export function useSharedView() {
   const password = useState<string | undefined>('password')
   const allowCSVDownload = useState<boolean>('allowCSVDownload', () => false)
 
-  const meta = ref<TableType>(sharedView.value?.model)
-  const columns = ref<ColumnType[]>(sharedView.value?.model?.columns)
+  const meta = useState<TableType>('meta')
   const formColumns = computed(
     () =>
-      columns.value
+      meta.value.columns
         .filter(
           (f: Record<string, any>) =>
             f.show && f.uidt !== UITypes.Rollup && f.uidt !== UITypes.Lookup && f.uidt !== UITypes.Formula,
@@ -39,10 +38,14 @@ export function useSharedView() {
     allowCSVDownload.value = JSON.parse(viewMeta.meta).allowCSVDownload
 
     if (localPassword) password.value = localPassword
-    sharedView.value = viewMeta
+    sharedView.value = { ...viewMeta }
+    meta.value = { ...viewMeta.model }
 
-    meta.value = viewMeta.model
-    columns.value = viewMeta.model.columns
+    let order = 1
+    meta.value.columns = [...viewMeta.model.columns]
+      .filter((c) => c.show)
+      .map((c) => ({ ...c, order: order++ }))
+      .sort((a, b) => a.order - b.order)
 
     setMeta(viewMeta.model)
 
@@ -96,7 +99,6 @@ export function useSharedView() {
     sharedView,
     loadSharedView,
     meta,
-    columns,
     nestedFilters,
     fetchSharedViewData,
     paginationData,

packages/nc-gui-v2/composables/useViewColumns.ts

@@ -4,18 +4,11 @@ import { watch } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp } from '#app'
 import { IsPublicInj } from '#imports'
+import type { Field } from '~/lib'
 
 export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRef<TableType>, reloadData?: () => void) {
   const isPublic = inject(IsPublicInj, ref(false))
-  const fields = ref<
-    {
-      order: number
-      show: number | boolean
-      title: string
-      fk_column_id?: string
-      system?: boolean
-    }[]
-  >()
+  const fields = ref<Field[]>()
 
   const filterQuery = ref('')
 
@@ -39,7 +32,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
         }
       }, {})
       fields.value = meta.value?.columns
-        ?.map((column) => {
+        ?.map((column: ColumnType) => {
           const currentColumnField = fieldById[column.id!] || {}
 
           return {
@@ -50,13 +43,13 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
             system: isSystemColumn(currentColumnField.type || false),
           }
         })
-        .sort((a, b) => a.order - b.order)
+        .sort((a: Field, b: Field) => a.order - b.order)
     }
   }
 
   const showAll = async (ignoreIds?: any) => {
     if (isPublic.value) {
-      fields.value = fields.value?.map((field) => ({
+      fields.value = fields.value?.map((field: Field) => ({
         ...field,
         show: true,
       }))
@@ -79,7 +72,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
   }
   const hideAll = async (ignoreIds?: any) => {
     if (isPublic.value) {
-      fields.value = fields.value?.map((field) => ({
+      fields.value = fields.value?.map((field: Field) => ({
         ...field,
         show: false,
       }))
@@ -101,9 +94,9 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
   }
 
   const saveOrUpdate = async (field: any, index: number) => {
-    if (isPublic && fields.value) {
+    if (isPublic.value && fields.value) {
       fields.value[index] = field
-      meta.value.columns = meta.value?.columns?.map((column) => {
+      meta.value.columns = meta.value?.columns?.map((column: ColumnType) => {
         if (column.id === field.fk_column_id) {
           return {
             ...column,
@@ -128,14 +121,15 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
     reloadData?.()
   }
 
-  const metaColumnById = computed(() => {
-    return (
-      meta.value?.columns?.reduce<Record<string, ColumnType>>((acc, curr) => {
-        return {
-          ...acc,
-          [curr.id!]: curr,
-        }
-      }, {}) || {}
+  const metaColumnById = computed<Record<string, ColumnType>>(() => {
+    if (!meta.value?.columns) return {}
+
+    return meta.value?.columns?.reduce(
+      (acc: ColumnType, curr: ColumnType) => ({
+        ...acc,
+        [curr.id!]: curr,
+      }),
+      {} as any,
     )
   })
 
@@ -160,33 +154,33 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
 
   const filteredFieldList = computed(() => {
     return (
-      fields.value?.filter((field) => {
+      fields.value?.filter((field: Field) => {
         // hide system columns if not enabled
         if (!showSystemFields.value && isSystemColumn(metaColumnById?.value?.[field.fk_column_id!])) {
           return false
         }
 
         return !filterQuery?.value || field.title.toLowerCase().includes(filterQuery.value.toLowerCase())
-      }) || {}
+      }) || []
     )
   })
 
   const sortedAndFilteredFields = computed<ColumnType[]>(() => {
     return (fields?.value
-      ?.filter((c) => {
+      ?.filter((field: Field) => {
         // hide system columns if not enabled
         if (
           !showSystemFields.value &&
           metaColumnById.value &&
-          metaColumnById?.value?.[c.fk_column_id!] &&
-          isSystemColumn(metaColumnById.value?.[c.fk_column_id!])
+          metaColumnById?.value?.[field.fk_column_id!] &&
+          isSystemColumn(metaColumnById.value?.[field.fk_column_id!])
         ) {
           return false
         }
-        return c.show && metaColumnById?.value?.[c.fk_column_id!]
+        return field.show && metaColumnById?.value?.[field.fk_column_id!]
       })
-      ?.sort((a, b) => a.order - b.order)
-      ?.map((c) => metaColumnById?.value?.[c.fk_column_id!]) || []) as ColumnType[]
+      ?.sort((a: Field, b: Field) => a.order - b.order)
+      ?.map((field: Field) => metaColumnById?.value?.[field.fk_column_id!]) || []) as ColumnType[]
   })
 
   // reload view columns when table meta changes

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

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
 import { navigateTo } from '#app'
+const { isLoading } = useGlobal()
+const { sharedView } = useSharedView()
 </script>
 
 <script lang="ts">
@@ -10,12 +12,25 @@ export default {
 
 <template>
   <a-layout id="nc-app">
-    <a-layout class="!flex-col">
+    <a-layout class="!flex-col bg-white">
       <a-layout-header class="flex !bg-primary items-center text-white pl-3 pr-4 shadow-lg">
         <div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105" @click="navigateTo('/')">
           <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
         </div>
+        <div>
+          <div class="flex justify-center items-center">
+            <div class="flex items-center gap-2 ml-3">
+              <template v-if="isLoading">
+                {{ $t('general.loading') }}
 
+                <MdiReload :class="{ 'animate-infinite animate-spin': isLoading }" />
+              </template>
+              <div v-else class="text-xl font-semibold truncate">
+                {{ sharedView?.title }}
+              </div>
+            </div>
+          </div>
+        </div>
         <div class="flex-1" />
       </a-layout-header>
 

packages/nc-gui-v2/lib/types.ts

@@ -21,6 +21,14 @@ export interface ProjectMetaInfo {
   PackageVersion?: string
 }
 
+export interface Field {
+  order: number
+  show: number | boolean
+  title: string
+  fk_column_id?: string
+  system?: boolean
+}
+
 export type Roles = Record<Role, boolean>
 
 export type Filter = FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string; readOnly?: boolean }

packages/nc-gui-v2/middleware/auth.global.ts

@@ -26,6 +26,8 @@ export default defineNuxtRouteMiddleware((to, from) => {
   /** if shred base allow without validating */
   if (to.params?.projectType === 'base') return
 
+  if (to.meta.public) return
+
   /** if auth is required or unspecified (same as required) and user is not signed in, redirect to signin page */
   if ((to.meta.requiresAuth || typeof to.meta.requiresAuth === 'undefined') && !state.signedIn.value) {
     return navigateTo('/signin')

packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import { message } from 'ant-design-vue'
 import {
   ReadonlyInj,
   ReloadViewDataHookInj,
   createEventHook,
   definePageMeta,
+  extractSdkResponseErrorMsg,
   provide,
   ref,
   useRoute,
@@ -27,8 +29,13 @@ const showPassword = ref(false)
 
 try {
   await loadSharedView(route.params.viewId as string)
-} catch (e) {
-  showPassword.value = true
+} catch (e: any) {
+  if (e?.response?.status === 403) {
+    showPassword.value = true
+  } else {
+    console.error(e)
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
 }
 </script>