From 1b889449f13e1a83054c8e957dd4690afafd2065 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Sun, 8 Oct 2023 20:05:09 +0000
Subject: [PATCH] feat(nc-gui): kanban card design

---
 .../nc-gui/components/smartsheet/Kanban.vue   | 83 +++++++++++++------
 1 file changed, 56 insertions(+), 27 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Kanban.vue b/packages/nc-gui/components/smartsheet/Kanban.vue
index b9fd4b1e62..368f12528f 100644
--- a/packages/nc-gui/components/smartsheet/Kanban.vue
+++ b/packages/nc-gui/components/smartsheet/Kanban.vue
@@ -107,7 +107,9 @@ const hasEditPermission = computed(() => isUIAllowed('dataEdit'))
 
 const fields = inject(FieldsInj, ref([]))
 
-const fieldsWithoutCover = computed(() => fields.value.filter((f) => f.id !== kanbanMetaData.value?.fk_cover_image_col_id))
+const fieldsWithoutDisplay = computed(() => fields.value.filter((f) => !isPrimary(f)))
+
+const displayField = computed(() => meta.value?.columns?.find((c) => c.pv && fields.value.includes(c)) ?? null)
 
 const coverImageColumn: any = computed(() =>
   meta.value?.columnsById
@@ -520,22 +522,21 @@ watch(
                           <div class="nc-kanban-item py-2 pl-3 pr-2">
                             <LazySmartsheetRow :row="record">
                               <a-card
-                                hoverable
+                                class="!rounded-lg h-full border-gray-200 border-1 group overflow-hidden break-all max-w-[450px] shadow-sm hover:shadow-md cursor-pointer"
+                                :body-style="{ padding: '0px' }"
                                 :data-stack="stack.title"
-                                class="!rounded-xl h-full overflow-hidden break-all max-w-[450px]"
+                                :data-testid="`nc-gallery-card-${record.row.id}`"
                                 :class="{
                                   'not-draggable': isLocked || !hasEditPermission || isPublic,
                                   '!cursor-default': isLocked || !hasEditPermission || isPublic,
                                 }"
-                                :body-style="{ padding: '10px' }"
                                 @click="expandFormClick($event, record)"
                                 @contextmenu="showContextMenu($event, record)"
                               >
                                 <template v-if="kanbanMetaData?.fk_cover_image_col_id" #cover>
                                   <a-carousel
                                     v-if="!reloadAttachments && attachments(record).length"
-                                    autoplay
-                                    class="gallery-carousel"
+                                    class="gallery-carousel !border-b-1 !border-gray-200"
                                     arrows
                                   >
                                     <template #customPaging>
@@ -547,11 +548,19 @@ watch(
                                     </template>
 
                                     <template #prevArrow>
-                                      <div style="z-index: 1"></div>
+                                      <div class="z-10 arrow">
+                                        <MdiChevronLeft
+                                          class="text-gray-700 w-6 h-6 absolute left-1.5 bottom-[-90px] !opacity-0 !group-hover:opacity-100 !bg-white border-1 border-gray-200 rounded-md transition"
+                                        />
+                                      </div>
                                     </template>
 
                                     <template #nextArrow>
-                                      <div style="z-index: 1"></div>
+                                      <div class="z-10 arrow">
+                                        <MdiChevronRight
+                                          class="text-gray-700 w-6 h-6 absolute right-1.5 bottom-[-90px] !opacity-0 !group-hover:opacity-100 !bg-white border-1 border-gray-200 rounded-md transition"
+                                        />
+                                      </div>
                                     </template>
 
                                     <template v-for="(attachment, index) in attachments(record)">
@@ -560,51 +569,71 @@ watch(
                                         :key="`carousel-${record.row.id}-${index}`"
                                         class="h-52 object-cover"
                                         :srcs="getPossibleAttachmentSrc(attachment)"
+                                        @click="expandFormClick($event, record)"
                                       />
                                     </template>
                                   </a-carousel>
-
-                                  <component :is="iconMap.imagePlaceholder" v-else class="w-full h-48 my-4 text-cool-gray-200" />
+                                  <div
+                                    v-else
+                                    class="h-52 w-full !flex flex-row !border-b-1 !border-gray-200 items-center justify-center"
+                                  >
+                                    <img class="object-contain w-[48px] h-[48px]" src="~assets/icons/FileIconImageBox.png" />
+                                  </div>
                                 </template>
-                                <div
-                                  v-for="col in fieldsWithoutCover"
-                                  :key="`record-${record.row.id}-${col.id}`"
-                                  class="flex flex-col rounded-lg w-full"
-                                >
-                                  <div v-if="!isRowEmpty(record, col) || isLTAR(col.uidt, col.colOptions)">
-                                    <!-- Smartsheet Header (Virtual) Cell -->
-                                    <div class="flex flex-row w-full justify-start pt-2">
-                                      <div class="w-full text-gray-400">
+                                <h2 v-if="displayField" class="text-base mt-3 mx-3 font-bold">
+                                  <LazySmartsheetVirtualCell
+                                    v-if="isVirtualCol(displayField)"
+                                    v-model="record.row[displayField.title]"
+                                    class="!text-gray-600"
+                                    :column="displayField"
+                                    :row="record"
+                                  />
+
+                                  <LazySmartsheetCell
+                                    v-else
+                                    v-model="record.row[displayField.title]"
+                                    class="!text-gray-600"
+                                    :column="displayField"
+                                    :edit-enabled="false"
+                                    :read-only="true"
+                                  />
+                                </h2>
+
+                                <div v-for="col in fieldsWithoutDisplay" :key="`record-${record.row.id}-${col.id}`">
+                                  <div class="flex flex-col first:mt-3 ml-2 !pr-3.5 !mb-[0.75rem] rounded-lg w-full">
+                                    <div class="flex flex-row w-full justify-start scale-75">
+                                      <div class="w-full pb-1 text-gray-300">
                                         <LazySmartsheetHeaderVirtualCell
                                           v-if="isVirtualCol(col)"
                                           :column="col"
                                           :hide-menu="true"
+                                          :hide-icon="true"
                                         />
-                                        <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
+
+                                        <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="true" :hide-icon="true" />
                                       </div>
                                     </div>
 
-                                    <!--  Smartsheet (Virtual) Cell -->
                                     <div
-                                      class="flex flex-row w-full items-center justify-start"
-                                      :class="{ '!ml-[-12px] pl-3': col.uidt === UITypes.SingleSelect }"
+                                      v-if="!isRowEmpty(record, col)"
+                                      class="flex flex-row w-full text-gray-700 px-1 mt-[-0.25rem] items-center justify-start"
                                     >
                                       <LazySmartsheetVirtualCell
-                                        v-if="col.title && isVirtualCol(col)"
+                                        v-if="isVirtualCol(col)"
                                         v-model="record.row[col.title]"
-                                        class="text-sm pt-1 pl-5"
                                         :column="col"
                                         :row="record"
                                       />
+
                                       <LazySmartsheetCell
-                                        v-else-if="col.title"
+                                        v-else
                                         v-model="record.row[col.title]"
-                                        class="text-sm pt-1 pl-7.25"
                                         :column="col"
                                         :edit-enabled="false"
                                         :read-only="true"
                                       />
                                     </div>
+                                    <div v-else class="flex flex-row w-full h-[1.375rem] pl-1 items-center justify-start">-</div>
                                   </div>
                                 </div>
                               </a-card>