fix/added pagination

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

@@ -53,42 +53,45 @@ const isRowEmpty = (record: any, col: any) => {
 </script>
 
 <template>
-  <div class="grid grid-cols-4 gap-x-4 gap-y-4 pt-4 overflow-y-scroll h-full px-3">
+  <div class="flex flex-col h-100 min-h-0 w-100">
-    <div v-for="(record, recordIndex) in data" :key="recordIndex" class="flex flex-col">
+    <div class="nc-gallery-container min-h-0 flex-1 grid grid-cols-4 gap-x-4 gap-y-4 my-4 px-3">
-      <a-card hoverable class="!rounded-lg h-full">
+      <div v-for="(record, recordIndex) in data" :key="recordIndex" class="flex flex-col">
-        <template #cover>
+        <a-card hoverable class="!rounded-lg h-full">
-          <img v-if="record.row[coverImageColumn?.title]" class="h-52 rounded-t-lg" :src="coverUrl(record)" />
+          <template #cover>
-          <ImageIcon v-else class="w-full h-48 my-4 text-cool-gray-200" />
+            <img v-if="record.row[coverImageColumn?.title]" class="h-52 rounded-t-lg" :src="coverUrl(record)" />
-        </template>
+            <ImageIcon v-else class="w-full h-48 my-4 text-cool-gray-200" />
+          </template>
 
-        <div
+          <div
-          v-for="(col, colIndex) in fields"
+            v-for="(col, colIndex) in fields"
-          :key="colIndex"
+            :key="colIndex"
-          class="flex flex-col space-y-1 px-4 mb-6 bg-gray-50 rounded-lg w-full"
+            class="flex flex-col space-y-1 px-4 mb-6 bg-gray-50 rounded-lg w-full"
-        >
+          >
-          <div class="flex flex-row w-full justify-start border-b-1 border-gray-100 py-2.5">
+            <div class="flex flex-row w-full justify-start border-b-1 border-gray-100 py-2.5">
-            <div class="w-full text-gray-600">
+              <div class="w-full text-gray-600">
-              <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
+                <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
-              <SmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
+                <SmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
+              </div>
             </div>
-          </div>
 
-          <div class="flex flex-row w-full pb-3 pt-2 pl-2 items-center justify-start">
+            <div class="flex flex-row w-full pb-3 pt-2 pl-2 items-center justify-start">
-            <div v-if="isRowEmpty(record, col)" class="h-3 bg-gray-200 px-5 rounded-lg"></div>
+              <div v-if="isRowEmpty(record, col)" class="h-3 bg-gray-200 px-5 rounded-lg"></div>
-            <template v-else>
+              <template v-else>
-              <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="record.row[col.title]" :column="col" />
+                <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="record.row[col.title]" :column="col" />
-              <SmartsheetCell v-else v-model="record.row[col.title]" :column="col" :edit-enabled="false" />
+                <SmartsheetCell v-else v-model="record.row[col.title]" :column="col" :edit-enabled="false" />
-            </template>
+              </template>
+            </div>
           </div>
-        </div>
+        </a-card>
-      </a-card>
+      </div>
     </div>
+    <SmartsheetPagination />
   </div>
 </template>
 
 <style scoped>
 .nc-gallery-container {
-  height: calc(100vh - 160px);
+  height: calc(100vh - 250px);
   overflow: auto;
 }
 </style>