github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat(nc-gui): kanban collapsed stack

pull/3818/head
Wing-Kam Wong 2 years ago
parent
1cec3b1675
commit
ae143e39a3
1 changed files with 174 additions and 146 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 320
      packages/nc-gui/components/smartsheet/Kanban.vue

320
packages/nc-gui/components/smartsheet/Kanban.vue
Unescape View File

@ -219,158 +219,180 @@ openNewRecordFormHook?.on(async (stackTitle) => {
@change="onMoveStack($event)" @change="onMoveStack($event)"
> >
<template #item="{ element: stack, index }"> <template #item="{ element: stack, index }">
<a-card <a-skeleton v-if="!formattedData[stack.title] || !countByStack" class="p-4" />
:key="stack.id" <div v-else class="nc-kanban-stack" :class="{ 'w-[50px]': stack.collapsed }">
class="nc-kanban-stack mx-4 !bg-[#f0f2f5] flex flex-col w-[280px] h-full rounded-[12px]" <a-card
:class="{ 'not-draggable': stack.id === 'uncategorized' }" v-if="!stack.collapsed"
head-style="padding-bottom: 0px;" :key="stack.id"
body-style="padding: 0px; height: 100%;" class="mx-4!bg-[#f0f2f5] flex flex-col w-[280px] h-full rounded-[12px]"
> :class="{ 'not-draggable': stack.id === 'uncategorized' }"
<div :style="`background-color: ${stack.color}`" class="nc-kanban-stack-head-color h-[10px]"></div> head-style="padding-bottom: 0px;"
<a-skeleton v-if="!formattedData[stack.title]" class="p-4" /> body-style="padding: 0px; height: 100%;"
<a-layout v-else class="px-[15px] !bg-[#f0f2f5]"> >
<a-layout-header> <div :style="`background-color: ${stack.color}`" class="nc-kanban-stack-head-color h-[10px]"></div>
<div class="nc-kanban-stack-head text-slate-500 font-bold flex items-center"> <a-skeleton v-if="!formattedData[stack.title]" class="p-4" />
<a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-actions-menu"> <a-layout v-else class="px-[15px] !bg-[#f0f2f5]">
<div class="flex gap-2 items-center cursor-pointer"> <a-layout-header>
<GeneralTruncateText>{{ stack.title }}</GeneralTruncateText> <div class="nc-kanban-stack-head text-slate-500 font-bold flex items-center">
<mdi-menu-down class="text-grey text-lg" /> <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-actions-menu">
</div> <div class="flex gap-2 items-center cursor-pointer">
<template #overlay> <GeneralTruncateText>{{ stack.title }}</GeneralTruncateText>
<a-menu class="ml-6 !text-sm !px-0 !py-2 !rounded"> <mdi-menu-down class="text-grey text-lg" />
<a-menu-item @click="openNewRecordFormHook.trigger(stack.title)"> </div>
<div class="py-2 flex gap-2 items-center"> <template #overlay>
<mdi-plus class="text-gray-500" /> <a-menu class="ml-6 !text-sm !px-0 !py-2 !rounded">
<!-- TODO: i18n --> <a-menu-item @click="openNewRecordFormHook.trigger(stack.title)">
Add new record <div class="py-2 flex gap-2 items-center">
</div> <mdi-plus class="text-gray-500" />
</a-menu-item> <!-- TODO: i18n -->
<a-menu-item @click="collapseStack"> Add new record
<div class="py-2 flex gap-2 items-center"> </div>
<mdi-arrow-collapse class="text-gray-500" /> </a-menu-item>
<!-- TODO: i18n --> <a-menu-item @click="collapseStack">
Collapse Stack <div class="py-2 flex gap-2 items-center">
</div> <mdi-arrow-collapse class="text-gray-500" />
</a-menu-item> <!-- TODO: i18n -->
<a-menu-item v-if="stack.title !== 'Uncategorized'" @click="renameStack"> Collapse Stack
<div class="py-2 flex gap-2 items-center"> </div>
<mdi-pencil class="text-gray-500" /> </a-menu-item>
<!-- TODO: i18n --> <a-menu-item v-if="stack.title !== 'Uncategorized'" @click="renameStack">
Rename Stack <div class="py-2 flex gap-2 items-center">
</div> <mdi-pencil class="text-gray-500" />
</a-menu-item> <!-- TODO: i18n -->
<a-menu-item v-if="stack.title !== 'Uncategorized'" @click="handleDeleteStackClick(stack.title)"> Rename Stack
<div class="py-2 flex gap-2 items-center"> </div>
<mdi-delete class="text-gray-500" /> </a-menu-item>
<!-- TODO: i18n --> <a-menu-item v-if="stack.title !== 'Uncategorized'" @click="handleDeleteStackClick(stack.title)">
Delete Stack <div class="py-2 flex gap-2 items-center">
</div> <mdi-delete class="text-gray-500" />
</a-menu-item> <!-- TODO: i18n -->
</a-menu> Delete Stack
</template> </div>
</a-dropdown> </a-menu-item>
</div> </a-menu>
</a-layout-header> </template>
<a-layout-content class="overflow-y-hidden"> </a-dropdown>
<div :ref="kanbanListRef" class="nc-kanban-list h-full overflow-y-auto" :data-stack-title="stack.title"> </div>
<Draggable </a-layout-header>
v-model="formattedData[stack.title]" <a-layout-content class="overflow-y-hidden">
item-key="row.Id" <div :ref="kanbanListRef" class="nc-kanban-list h-full overflow-y-auto" :data-stack-title="stack.title">
draggable=".nc-kanban-item" <Draggable
group="kanban-card" v-model="formattedData[stack.title]"
class="h-full" item-key="row.Id"
@change="onMove($event, stack.title)" draggable=".nc-kanban-item"
> group="kanban-card"
<template #item="{ element: record }"> class="h-full"
<div class="nc-kanban-item py-2"> @change="onMove($event, stack.title)"
<Row :row="record"> >
<a-card <template #item="{ element: record }">
hoverable <div class="nc-kanban-item py-2">
:data-stack="stack.title" <Row :row="record">
class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]" <a-card
body-style="padding: 10px;" hoverable
@click="expandFormClick($event, record)" :data-stack="stack.title"
> class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]"
<!-- <template #cover> --> body-style="padding: 10px;"
<!-- <a-carousel --> @click="expandFormClick($event, record)"
<!-- 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"> <!-- <template #cover> -->
<div class="w-full text-gray-600"> <!-- <a-carousel -->
<SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" /> <!-- v-if="!reloadAttachments && attachments(record).length" -->
<SmartsheetHeaderCell v-else :column="col" :hide-menu="true" /> <!-- 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>
<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 <SmartsheetVirtualCell
v-if="isVirtualCol(col)" v-if="isVirtualCol(col)"
v-model="record.row[col.title]" v-model="record.row[col.title]"
:column="col" :column="col"
:row="record" :row="record"
/> />
<SmartsheetCell <SmartsheetCell
v-else v-else
v-model="record.row[col.title]" v-model="record.row[col.title]"
:column="col" :column="col"
:edit-enabled="false" :edit-enabled="false"
:read-only="true" :read-only="true"
/> />
</template> </template>
</div>
</div> </div>
</div> </a-card>
</a-card> </Row>
</Row> </div>
</div> </template>
</template> </Draggable>
</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-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> </div>
</a-layout-footer> </div>
</a-layout> </a-card>
</a-card> </div>
</template> </template>
</Draggable> </Draggable>
</div> </div>
@ -413,4 +435,10 @@ openNewRecordFormHook?.on(async (stackTitle) => {
.ant-layout-header { .ant-layout-header {
@apply !h-[30px] !leading-[30px] !px-[5px] !my-[10px]; @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> </style>

Write Preview
Loading…
Cancel
Save