feat(nc-gui): placeholder for table and multi field editor

packages/nc-gui/components/project/AllTables.vue

@@ -122,47 +122,55 @@ const onCreateBaseClick = () => {
       </component>
     </div>
     <template v-if="activeTables.length">
-    
+      <div class="flex flex-row w-full text-gray-400 border-b-1 border-gray-50 py-3 px-2.5">
-    <div class="flex flex-row w-full text-gray-400 border-b-1 border-gray-50 py-3 px-2.5">
+        <div class="w-2/5">{{ $t('objects.table') }}</div>
-      <div class="w-2/5">{{ $t('objects.table') }}</div>
+        <div class="w-1/5">{{ $t('general.source') }}</div>
-      <div class="w-1/5">{{ $t('general.source') }}</div>
+        <div class="w-1/5">{{ $t('labels.createdOn') }}</div>
-      <div class="w-1/5">{{ $t('labels.createdOn') }}</div>
+      </div>
-    </div>
-    <div
-      class="nc-base-view-all-table-list nc-scrollbar-md"
-      :style="{
-        height: 'calc(100vh - var(--topbar-height) - 18rem)',
-      }"
-    >
       <div
-        v-for="table in [...activeTables].sort(
+        class="nc-base-view-all-table-list nc-scrollbar-md"
+        :style="{
+          height: 'calc(100vh - var(--topbar-height) - 18rem)',
+        }"
+      >
+        <div
+          v-for="table in [...activeTables].sort(
           (a, b) => a.source_id!.localeCompare(b.source_id!) * 20
         )"
-        :key="table.id"
+          :key="table.id"
-        class="py-4 flex flex-row w-full cursor-pointer hover:bg-gray-100 border-b-1 border-gray-100 px-2.25"
+          class="py-4 flex flex-row w-full cursor-pointer hover:bg-gray-100 border-b-1 border-gray-100 px-2.25"
-        data-testid="proj-view-list__item"
+          data-testid="proj-view-list__item"
-        @click="openTable(table)"
+          @click="openTable(table)"
-      >
+        >
-        <div class="flex flex-row w-2/5 items-center gap-x-2" data-testid="proj-view-list__item-title">
+          <div class="flex flex-row w-2/5 items-center gap-x-2" data-testid="proj-view-list__item-title">
-          <div class="min-w-5 flex items-center justify-center">
+            <div class="min-w-5 flex items-center justify-center">
-            <GeneralTableIcon :meta="table" class="text-gray-500" />
+              <GeneralTableIcon :meta="table" class="text-gray-500" />
+            </div>
+            {{ table?.title }}
           </div>
-          {{ table?.title }}
+          <div class="w-1/5 text-gray-600" data-testid="proj-view-list__item-type">
-        </div>
+            <div v-if="table.source_id === defaultBase?.id" class="ml-0.75">-</div>
-        <div class="w-1/5 text-gray-600" data-testid="proj-view-list__item-type">
+            <div v-else class="capitalize flex flex-row items-center gap-x-0.5">
-          <div v-if="table.source_id === defaultBase?.id" class="ml-0.75">-</div>
+              <GeneralBaseLogo class="w-4 mr-1" />
-          <div v-else class="capitalize flex flex-row items-center gap-x-0.5">
+              {{ sources.get(table.source_id!)?.alias }}
-            <GeneralBaseLogo class="w-4 mr-1" />
+            </div>
-            {{ sources.get(table.source_id!)?.alias }}
+          </div>
+          <div class="w-1/5 text-gray-400 ml-0.25" data-testid="proj-view-list__item-created-at">
+            {{ dayjs(table?.created_at).fromNow() }}
           </div>
         </div>
-        <div class="w-1/5 text-gray-400 ml-0.25" data-testid="proj-view-list__item-created-at">
+      </div>
-          {{ dayjs(table?.created_at).fromNow() }}
+    </template>
+    <div v-else class="py-3 flex items-center gap-6 <lg:flex-col">
+      <img src="~assets/img/placeholder/table.png" class="!w-[23rem] flex-none" />
+      <div class="text-center lg:text-left">
+        <div class="text-2xl text-gray-800 font-bold">{{ $t('placeholder.createTable') }}</div>
+        <div class="text-sm text-gray-700 pt-6">
+          {{ $t('placeholder.createTableLabel') }}
         </div>
       </div>
     </div>
-  </template>
+
-<template v-else>fdas</template>
     <ProjectImportModal v-if="defaultBase" v-model:visible="isImportModalOpen" :source="defaultBase" />
     <LazyDashboardSettingsDataSourcesCreateBase v-model:open="isNewBaseModalOpen" />
   </div>
@@ -177,7 +185,7 @@ const onCreateBaseClick = () => {
   }
 
   .label {
-    @apply text-base font-medium;
+    @apply text-base font-medium break-normal;
   }
 }
 

packages/nc-gui/components/smartsheet/details/Fields.vue

@@ -1254,7 +1254,7 @@ watch(
                 @add="onFieldAdd"
               />
               <div v-else class="w-[25rem] flex flex-col justify-center p-4 items-center">
-                <img src="~assets/img/fieldPlaceholder.svg" class="!w-[18rem]" />
+                <img src="~assets/img/placeholder/multi-field-editor.png" class="!w-[18rem]" />
                 <div class="text-2xl text-gray-600 font-bold text-center pt-6">{{ $t('labels.multiField.selectField') }}</div>
                 <div class="text-center text-sm px-2 text-gray-500 pt-6">
                   {{ $t('labels.multiField.selectFieldLabel') }}

packages/nc-gui/lang/en.json

@@ -959,7 +959,9 @@
     "decimal7": "1.0000000",
     "decimal8": "1.00000000",
     "value": "Value",
-    "key": "Key"
+    "key": "Key",
+    "createTable": "Create your First Table!",
+    "createTableLabel": "From scratch or import or connect to external database"
   },
   "msg": {
     "clickToCopyFieldId": "Click to copy Field Id",