From ae143e39a35492a7f05f9626ae8c64d8ee90e6a2 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 16 Sep 2022 01:55:51 +0800
Subject: [PATCH] feat(nc-gui): kanban collapsed stack

---
 .../nc-gui/components/smartsheet/Kanban.vue   | 320 ++++++++++--------
 1 file changed, 174 insertions(+), 146 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Kanban.vue b/packages/nc-gui/components/smartsheet/Kanban.vue
index 22e34065be..677cdf91ef 100644
--- a/packages/nc-gui/components/smartsheet/Kanban.vue
+++ b/packages/nc-gui/components/smartsheet/Kanban.vue
@@ -219,158 +219,180 @@ openNewRecordFormHook?.on(async (stackTitle) => {
         @change="onMoveStack($event)"
       >
         <template #item="{ element: stack, index }">
-          <a-card
-            :key="stack.id"
-            class="nc-kanban-stack mx-4 !bg-[#f0f2f5] flex flex-col w-[280px] h-full rounded-[12px]"
-            :class="{ 'not-draggable': stack.id === 'uncategorized' }"
-            head-style="padding-bottom: 0px;"
-            body-style="padding: 0px; height: 100%;"
-          >
-            <div :style="`background-color: ${stack.color}`" class="nc-kanban-stack-head-color h-[10px]"></div>
-            <a-skeleton v-if="!formattedData[stack.title]" class="p-4" />
-            <a-layout v-else class="px-[15px] !bg-[#f0f2f5]">
-              <a-layout-header>
-                <div class="nc-kanban-stack-head text-slate-500 font-bold flex items-center">
-                  <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-actions-menu">
-                    <div class="flex gap-2 items-center cursor-pointer">
-                      <GeneralTruncateText>{{ stack.title }}</GeneralTruncateText>
-                      <mdi-menu-down class="text-grey text-lg" />
-                    </div>
-                    <template #overlay>
-                      <a-menu class="ml-6 !text-sm !px-0 !py-2 !rounded">
-                        <a-menu-item @click="openNewRecordFormHook.trigger(stack.title)">
-                          <div class="py-2 flex gap-2 items-center">
-                            <mdi-plus class="text-gray-500" />
-                            <!-- TODO: i18n -->
-                            Add new record
-                          </div>
-                        </a-menu-item>
-                        <a-menu-item @click="collapseStack">
-                          <div class="py-2 flex gap-2 items-center">
-                            <mdi-arrow-collapse class="text-gray-500" />
-                            <!-- TODO: i18n -->
-                            Collapse Stack
-                          </div>
-                        </a-menu-item>
-                        <a-menu-item v-if="stack.title !== 'Uncategorized'" @click="renameStack">
-                          <div class="py-2 flex gap-2 items-center">
-                            <mdi-pencil class="text-gray-500" />
-                            <!-- TODO: i18n -->
-                            Rename Stack
-                          </div>
-                        </a-menu-item>
-                        <a-menu-item v-if="stack.title !== 'Uncategorized'" @click="handleDeleteStackClick(stack.title)">
-                          <div class="py-2 flex gap-2 items-center">
-                            <mdi-delete class="text-gray-500" />
-                            <!-- TODO: i18n -->
-                            Delete Stack
-                          </div>
-                        </a-menu-item>
-                      </a-menu>
-                    </template>
-                  </a-dropdown>
-                </div>
-              </a-layout-header>
-              <a-layout-content class="overflow-y-hidden">
-                <div :ref="kanbanListRef" class="nc-kanban-list h-full overflow-y-auto" :data-stack-title="stack.title">
-                  <Draggable
-                    v-model="formattedData[stack.title]"
-                    item-key="row.Id"
-                    draggable=".nc-kanban-item"
-                    group="kanban-card"
-                    class="h-full"
-                    @change="onMove($event, stack.title)"
-                  >
-                    <template #item="{ element: record }">
-                      <div class="nc-kanban-item py-2">
-                        <Row :row="record">
-                          <a-card
-                            hoverable
-                            :data-stack="stack.title"
-                            class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]"
-                            body-style="padding: 10px;"
-                            @click="expandFormClick($event, record)"
-                          >
-                            <!--                            <template #cover> -->
-                            <!--                              <a-carousel -->
-                            <!--                                v-if="!reloadAttachments && attachments(record).length" -->
-                            <!--                                autoplay -->
-                            <!--                                class="gallery-carousel" -->
-                            <!--                                arrows -->
-                            <!--                              > -->
-                            <!--                                <template #customPaging> -->
-                            <!--                                  <a> -->
-                            <!--                                    <div class="pt-[12px]"><div></div></div> -->
-                            <!--                                  </a> -->
-                            <!--                                </template> -->
-                            <!--                                <template #prevArrow> -->
-                            <!--                                  <div style="z-index: 1"></div> -->
-                            <!--                                </template> -->
-                            <!--                                <template #nextArrow> -->
-                            <!--                                  <div style="z-index: 1"></div> -->
-                            <!--                                </template> -->
-                            <!--                                <img -->
-                            <!--                                  v-for="(attachment, index) in attachments(record)" -->
-                            <!--                                  :key="`carousel-${record.row.id}-${index}`" -->
-                            <!--                                  class="h-52" -->
-                            <!--                                  :src="attachment.url" -->
-                            <!--                                /> -->
-                            <!--                              </a-carousel> -->
-                            <!--                            </template> -->
-
-                            <div
-                              v-for="col in fieldsWithoutCover"
-                              :key="`record-${record.row.id}-${col.id}`"
-                              class="flex flex-col space-y-1 px-1 mb-3 bg-gray-50 rounded-lg w-full"
+          <a-skeleton v-if="!formattedData[stack.title] || !countByStack" class="p-4" />
+          <div v-else class="nc-kanban-stack" :class="{ 'w-[50px]': stack.collapsed }">
+            <a-card
+              v-if="!stack.collapsed"
+              :key="stack.id"
+              class="mx-4!bg-[#f0f2f5] flex flex-col w-[280px] h-full rounded-[12px]"
+              :class="{ 'not-draggable': stack.id === 'uncategorized' }"
+              head-style="padding-bottom: 0px;"
+              body-style="padding: 0px; height: 100%;"
+            >
+              <div :style="`background-color: ${stack.color}`" class="nc-kanban-stack-head-color h-[10px]"></div>
+              <a-skeleton v-if="!formattedData[stack.title]" class="p-4" />
+              <a-layout v-else class="px-[15px] !bg-[#f0f2f5]">
+                <a-layout-header>
+                  <div class="nc-kanban-stack-head text-slate-500 font-bold flex items-center">
+                    <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-actions-menu">
+                      <div class="flex gap-2 items-center cursor-pointer">
+                        <GeneralTruncateText>{{ stack.title }}</GeneralTruncateText>
+                        <mdi-menu-down class="text-grey text-lg" />
+                      </div>
+                      <template #overlay>
+                        <a-menu class="ml-6 !text-sm !px-0 !py-2 !rounded">
+                          <a-menu-item @click="openNewRecordFormHook.trigger(stack.title)">
+                            <div class="py-2 flex gap-2 items-center">
+                              <mdi-plus class="text-gray-500" />
+                              <!-- TODO: i18n -->
+                              Add new record
+                            </div>
+                          </a-menu-item>
+                          <a-menu-item @click="collapseStack">
+                            <div class="py-2 flex gap-2 items-center">
+                              <mdi-arrow-collapse class="text-gray-500" />
+                              <!-- TODO: i18n -->
+                              Collapse Stack
+                            </div>
+                          </a-menu-item>
+                          <a-menu-item v-if="stack.title !== 'Uncategorized'" @click="renameStack">
+                            <div class="py-2 flex gap-2 items-center">
+                              <mdi-pencil class="text-gray-500" />
+                              <!-- TODO: i18n -->
+                              Rename Stack
+                            </div>
+                          </a-menu-item>
+                          <a-menu-item v-if="stack.title !== 'Uncategorized'" @click="handleDeleteStackClick(stack.title)">
+                            <div class="py-2 flex gap-2 items-center">
+                              <mdi-delete class="text-gray-500" />
+                              <!-- TODO: i18n -->
+                              Delete Stack
+                            </div>
+                          </a-menu-item>
+                        </a-menu>
+                      </template>
+                    </a-dropdown>
+                  </div>
+                </a-layout-header>
+                <a-layout-content class="overflow-y-hidden">
+                  <div :ref="kanbanListRef" class="nc-kanban-list h-full overflow-y-auto" :data-stack-title="stack.title">
+                    <Draggable
+                      v-model="formattedData[stack.title]"
+                      item-key="row.Id"
+                      draggable=".nc-kanban-item"
+                      group="kanban-card"
+                      class="h-full"
+                      @change="onMove($event, stack.title)"
+                    >
+                      <template #item="{ element: record }">
+                        <div class="nc-kanban-item py-2">
+                          <Row :row="record">
+                            <a-card
+                              hoverable
+                              :data-stack="stack.title"
+                              class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]"
+                              body-style="padding: 10px;"
+                              @click="expandFormClick($event, record)"
                             >
-                              <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">
-                                  <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
-                                  <SmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
+                              <!--                            <template #cover> -->
+                              <!--                              <a-carousel -->
+                              <!--                                v-if="!reloadAttachments && attachments(record).length" -->
+                              <!--                                autoplay -->
+                              <!--                                class="gallery-carousel" -->
+                              <!--                                arrows -->
+                              <!--                              > -->
+                              <!--                                <template #customPaging> -->
+                              <!--                                  <a> -->
+                              <!--                                    <div class="pt-[12px]"><div></div></div> -->
+                              <!--                                  </a> -->
+                              <!--                                </template> -->
+                              <!--                                <template #prevArrow> -->
+                              <!--                                  <div style="z-index: 1"></div> -->
+                              <!--                                </template> -->
+                              <!--                                <template #nextArrow> -->
+                              <!--                                  <div style="z-index: 1"></div> -->
+                              <!--                                </template> -->
+                              <!--                                <img -->
+                              <!--                                  v-for="(attachment, index) in attachments(record)" -->
+                              <!--                                  :key="`carousel-${record.row.id}-${index}`" -->
+                              <!--                                  class="h-52" -->
+                              <!--                                  :src="attachment.url" -->
+                              <!--                                /> -->
+                              <!--                              </a-carousel> -->
+                              <!--                            </template> -->
+
+                              <div
+                                v-for="col in fieldsWithoutCover"
+                                :key="`record-${record.row.id}-${col.id}`"
+                                class="flex flex-col space-y-1 px-1 mb-3 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="w-full text-gray-600">
+                                    <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :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 v-if="isRowEmpty(record, col)" class="h-3 bg-gray-200 px-5 rounded-lg"></div>
-                                <template v-else>
-                                  <SmartsheetVirtualCell
-                                    v-if="isVirtualCol(col)"
-                                    v-model="record.row[col.title]"
-                                    :column="col"
-                                    :row="record"
-                                  />
-                                  <SmartsheetCell
-                                    v-else
-                                    v-model="record.row[col.title]"
-                                    :column="col"
-                                    :edit-enabled="false"
-                                    :read-only="true"
-                                  />
-                                </template>
+                                <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>
+                                  <template v-else>
+                                    <SmartsheetVirtualCell
+                                      v-if="isVirtualCol(col)"
+                                      v-model="record.row[col.title]"
+                                      :column="col"
+                                      :row="record"
+                                    />
+                                    <SmartsheetCell
+                                      v-else
+                                      v-model="record.row[col.title]"
+                                      :column="col"
+                                      :edit-enabled="false"
+                                      :read-only="true"
+                                    />
+                                  </template>
+                                </div>
                               </div>
-                            </div>
-                          </a-card>
-                        </Row>
-                      </div>
-                    </template>
-                  </Draggable>
-                </div>
-              </a-layout-content>
-              <a-layout-footer>
-                <div v-if="formattedData[stack.title] && countByStack[stack.title] >= 0" class="mt-5 text-center">
-                  <mdi-plus
-                    class="text-pint-500 text-lg text-primary cursor-pointer"
-                    @click="openNewRecordFormHook.trigger(stack.title)"
-                  />
-                  <div class="nc-kanban-data-count">
-                    <!-- TODO: fix current count for Uncategorized -->
-                    {{ formattedData[stack.title].length }} / {{ countByStack[stack.title] }}
-                    {{ countByStack[stack.title] !== 1 ? $t('objects.records') : $t('objects.record') }}
+                            </a-card>
+                          </Row>
+                        </div>
+                      </template>
+                    </Draggable>
                   </div>
+                </a-layout-content>
+                <a-layout-footer>
+                  <div v-if="formattedData[stack.title] && countByStack[stack.title] >= 0" class="mt-5 text-center">
+                    <mdi-plus
+                      class="text-pint-500 text-lg text-primary cursor-pointer"
+                      @click="openNewRecordFormHook.trigger(stack.title)"
+                    />
+                    <div class="nc-kanban-data-count">
+                      <!-- TODO: fix current count for Uncategorized -->
+                      {{ formattedData[stack.title].length }} / {{ countByStack[stack.title] }}
+                      {{ countByStack[stack.title] !== 1 ? $t('objects.records') : $t('objects.record') }}
+                    </div>
+                  </div>
+                </a-layout-footer>
+              </a-layout>
+            </a-card>
+            <a-card
+              v-else
+              :key="stack.id"
+              class="nc-kanban-stack nc-kanban-collapsed-stack mx-4 flex !bg-[#f0f2f5] items-center w-[300px] h-[50px] rounded-[12px]"
+              :class="{ 'not-draggable': stack.id === 'uncategorized' }"
+              :body-style="'width: 100%;'"
+            >
+              <div class="items-center justify-between">
+                <div class="nc-kanban-data-count">
+                  <div class="float-right flex gap-2 items-center cursor-pointer">
+                    <GeneralTruncateText>{{ stack.title }}</GeneralTruncateText>
+                    <mdi-menu-down class="text-grey text-lg" />
+                  </div>
+                  {{ formattedData[stack.title].length }} / {{ countByStack[stack.title] }}
+                  {{ countByStack[stack.title] !== 1 ? $t('objects.records') : $t('objects.record') }}
                 </div>
-              </a-layout-footer>
-            </a-layout>
-          </a-card>
+              </div>
+            </a-card>
+          </div>
         </template>
       </Draggable>
     </div>
@@ -413,4 +435,10 @@ openNewRecordFormHook?.on(async (stackTitle) => {
 .ant-layout-header {
   @apply !h-[30px] !leading-[30px] !px-[5px] !my-[10px];
 }
+
+.nc-kanban-collapsed-stack {
+  transform: rotate(-90deg) translateX(-100%);
+  transform-origin: left top 0px;
+  transition: left 0.2s ease-in-out 0s;
+}
 </style>