|
|
@ -287,15 +287,17 @@ onUnmounted(() => { |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div |
|
|
|
<div |
|
|
|
:class="{ |
|
|
|
:class="{ |
|
|
|
'w-0': !props.visible, |
|
|
|
'!w-0': !props.visible, |
|
|
|
'w-1/6 min-w-[22.1rem] nc-calendar-side-menu-open': props.visible, |
|
|
|
'min-w-[356px]': width > 1440 && props.visible, |
|
|
|
|
|
|
|
'min-w-[264px]': width <= 1440 && props.visible, |
|
|
|
|
|
|
|
'nc-calendar-side-menu-open': props.visible, |
|
|
|
}" |
|
|
|
}" |
|
|
|
class="h-full border-l-1 border-gray-200 transition-all" |
|
|
|
class="h-full border-l-1 border-gray-200 transition-all" |
|
|
|
data-testid="nc-calendar-side-menu" |
|
|
|
data-testid="nc-calendar-side-menu" |
|
|
|
> |
|
|
|
> |
|
|
|
<div |
|
|
|
<div |
|
|
|
:class="{ |
|
|
|
:class="{ |
|
|
|
'!hidden': width < 1440, |
|
|
|
'!hidden': width <= 1440, |
|
|
|
'px-4 pt-3 pb-4 ': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const), |
|
|
|
'px-4 pt-3 pb-4 ': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const), |
|
|
|
}" |
|
|
|
}" |
|
|
|
class="flex flex-col" |
|
|
|
class="flex flex-col" |
|
|
@ -328,11 +330,11 @@ onUnmounted(() => { |
|
|
|
|
|
|
|
|
|
|
|
<div |
|
|
|
<div |
|
|
|
:class="{ |
|
|
|
:class="{ |
|
|
|
'!border-t-0': width < 1440, |
|
|
|
'!border-t-0': width <= 1440, |
|
|
|
}" |
|
|
|
}" |
|
|
|
class="px-4 border-t-1 border-gray-200 relative flex flex-col gap-y-4 pt-3" |
|
|
|
class="border-t-1 border-gray-200 relative flex flex-col gap-y-4 pt-3" |
|
|
|
> |
|
|
|
> |
|
|
|
<div class="flex items-center gap-2"> |
|
|
|
<div class="flex px-4 items-center gap-2"> |
|
|
|
<a-input |
|
|
|
<a-input |
|
|
|
v-model:value="searchQuery.value" |
|
|
|
v-model:value="searchQuery.value" |
|
|
|
:class="{ |
|
|
|
:class="{ |
|
|
@ -370,11 +372,12 @@ onUnmounted(() => { |
|
|
|
v-if="calendarRange" |
|
|
|
v-if="calendarRange" |
|
|
|
:ref="sideBarListRef" |
|
|
|
:ref="sideBarListRef" |
|
|
|
:class="{ |
|
|
|
:class="{ |
|
|
|
'!h-[calc(100vh-10.5rem)]': width < 1440, |
|
|
|
'!h-[calc(100vh-10.5rem)]': width <= 1440, |
|
|
|
'h-[calc(100vh-36.2rem)]': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const) && width > 1440, |
|
|
|
'h-[calc(100vh-36.2rem)]': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const) && width >= 1440, |
|
|
|
'h-[calc(100vh-25.1rem)]': activeCalendarView === ('month' as const) || activeCalendarView === ('year' as const) && width > 1440, |
|
|
|
'h-[calc(100vh-25.1rem)]': activeCalendarView === ('month' as const) || activeCalendarView === ('year' as const) && width >= 1440, |
|
|
|
|
|
|
|
|
|
|
|
}" |
|
|
|
}" |
|
|
|
class="gap-2 flex flex-col nc-scrollbar-md overflow-y-auto nc-calendar-top-height" |
|
|
|
class="nc-scrollbar-md pl-4 pr-4 overflow-y-auto" |
|
|
|
data-testid="nc-calendar-side-menu-list" |
|
|
|
data-testid="nc-calendar-side-menu-list" |
|
|
|
@scroll="sideBarListScrollHandle" |
|
|
|
@scroll="sideBarListScrollHandle" |
|
|
|
> |
|
|
|
> |
|
|
@ -398,56 +401,58 @@ onUnmounted(() => { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<template v-else-if="renderData.length > 0"> |
|
|
|
<template v-else-if="renderData.length > 0"> |
|
|
|
<LazySmartsheetRow v-for="(record, rowIndex) in renderData" :key="rowIndex" :row="record"> |
|
|
|
<div class="gap-2 flex flex-col"> |
|
|
|
<LazySmartsheetCalendarSideRecordCard |
|
|
|
<LazySmartsheetRow v-for="(record, rowIndex) in renderData" :key="rowIndex" :row="record"> |
|
|
|
:draggable="sideBarFilterOption === 'withoutDates' && activeCalendarView !== 'year'" |
|
|
|
<LazySmartsheetCalendarSideRecordCard |
|
|
|
:from-date=" |
|
|
|
:draggable="sideBarFilterOption === 'withoutDates' && activeCalendarView !== 'year'" |
|
|
|
|
|
|
|
:from-date=" |
|
|
|
record.rowMeta.range?.fk_from_col |
|
|
|
record.rowMeta.range?.fk_from_col |
|
|
|
? calDataType === UITypes.Date |
|
|
|
? calDataType === UITypes.Date |
|
|
|
? dayjs(record.row[record.rowMeta.range.fk_from_col.title!]).format('DD MMM') |
|
|
|
? dayjs(record.row[record.rowMeta.range.fk_from_col.title!]).format('DD MMM') |
|
|
|
: dayjs(record.row[record.rowMeta.range.fk_from_col.title!]).format('DD MMM•HH:mm A') |
|
|
|
: dayjs(record.row[record.rowMeta.range.fk_from_col.title!]).format('DD MMM•HH:mm A') |
|
|
|
: null |
|
|
|
: null |
|
|
|
" |
|
|
|
" |
|
|
|
:invalid=" |
|
|
|
:invalid=" |
|
|
|
record.rowMeta.range!.fk_to_col && |
|
|
|
record.rowMeta.range!.fk_to_col && |
|
|
|
dayjs(record.row[record.rowMeta.range!.fk_from_col.title!]).isAfter( |
|
|
|
dayjs(record.row[record.rowMeta.range!.fk_from_col.title!]).isAfter( |
|
|
|
dayjs(record.row[record.rowMeta.range!.fk_to_col.title!]), |
|
|
|
dayjs(record.row[record.rowMeta.range!.fk_to_col.title!]), |
|
|
|
) |
|
|
|
) |
|
|
|
" |
|
|
|
" |
|
|
|
:row="record" |
|
|
|
:row="record" |
|
|
|
:to-date=" |
|
|
|
:to-date=" |
|
|
|
record.rowMeta.range!.fk_to_col |
|
|
|
record.rowMeta.range!.fk_to_col |
|
|
|
? calDataType === UITypes.Date |
|
|
|
? calDataType === UITypes.Date |
|
|
|
? dayjs(record.row[record.rowMeta.range!.fk_to_col.title!]).format('DD MMM') |
|
|
|
? dayjs(record.row[record.rowMeta.range!.fk_to_col.title!]).format('DD MMM') |
|
|
|
: dayjs(record.row[record.rowMeta.range!.fk_to_col.title!]).format('DD MMM•HH:mm A') |
|
|
|
: dayjs(record.row[record.rowMeta.range!.fk_to_col.title!]).format('DD MMM•HH:mm A') |
|
|
|
: null |
|
|
|
: null |
|
|
|
" |
|
|
|
" |
|
|
|
color="blue" |
|
|
|
color="blue" |
|
|
|
data-testid="nc-sidebar-record-card" |
|
|
|
data-testid="nc-sidebar-record-card" |
|
|
|
@click="emit('expand-record', record)" |
|
|
|
@click="emit('expand-record', record)" |
|
|
|
@dragstart="dragStart($event, record)" |
|
|
|
@dragstart="dragStart($event, record)" |
|
|
|
@dragover.prevent |
|
|
|
@dragover.prevent |
|
|
|
> |
|
|
|
> |
|
|
|
<template v-if="!isRowEmpty(record, displayField)"> |
|
|
|
<template v-if="!isRowEmpty(record, displayField)"> |
|
|
|
<div :class="{}"> |
|
|
|
<div :class="{}"> |
|
|
|
<LazySmartsheetVirtualCell |
|
|
|
<LazySmartsheetVirtualCell |
|
|
|
v-if="isVirtualCol(displayField)" |
|
|
|
v-if="isVirtualCol(displayField)" |
|
|
|
v-model="record.row[displayField.title]" |
|
|
|
v-model="record.row[displayField.title]" |
|
|
|
:column="displayField" |
|
|
|
:column="displayField" |
|
|
|
:row="record" |
|
|
|
:row="record" |
|
|
|
/> |
|
|
|
/> |
|
|
|
|
|
|
|
|
|
|
|
<LazySmartsheetCell |
|
|
|
<LazySmartsheetCell |
|
|
|
v-else |
|
|
|
v-else |
|
|
|
v-model="record.row[displayField.title]" |
|
|
|
v-model="record.row[displayField.title]" |
|
|
|
:column="displayField" |
|
|
|
:column="displayField" |
|
|
|
:edit-enabled="false" |
|
|
|
:edit-enabled="false" |
|
|
|
:read-only="true" |
|
|
|
:read-only="true" |
|
|
|
/> |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</LazySmartsheetCalendarSideRecordCard> |
|
|
|
</LazySmartsheetCalendarSideRecordCard> |
|
|
|
</LazySmartsheetRow> |
|
|
|
</LazySmartsheetRow> |
|
|
|
|
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|