mirror of https://github.com/nocodb/nocodb
DarkPhoenix2704
9 months ago
8 changed files with 316 additions and 85 deletions
@ -1,38 +1,76 @@
|
||||
<script setup lang="ts"> |
||||
import { UITypes } from 'nocodb-sdk' |
||||
<script lang="ts" setup> |
||||
import { UITypes } from 'nocodb-sdk'; |
||||
import { computed, ref, type Row } from '#imports'; |
||||
|
||||
interface Props { |
||||
isEmbed?: boolean |
||||
data?: Row[] | null |
||||
} |
||||
|
||||
const props = withDefaults(defineProps<Props>(), { |
||||
isEmbed: false, |
||||
data: null, |
||||
}) |
||||
|
||||
const emit = defineEmits(['expand-record']) |
||||
const meta = inject(MetaInj, ref()) |
||||
const fields = inject(FieldsInj, ref([])) |
||||
|
||||
const data = toRefs(props).data |
||||
|
||||
const displayField = computed(() => meta.value?.columns?.find((c) => c.pv && fields.value.includes(c)) ?? null) |
||||
|
||||
const { pageDate, selectedDate, calDataType, formattedData, calendarRange } = useCalendarViewStoreOrThrow() |
||||
|
||||
const hours = computed(() => { |
||||
const hours = [] |
||||
for (let i = 0; i < 24; i++) { |
||||
hours.push(i) |
||||
} |
||||
return hours |
||||
}) |
||||
|
||||
const renderData = computed(() => { |
||||
console.log(data.value) |
||||
if (data.value) { |
||||
|
||||
const { pageDate, selectedDate, calDataType } = useCalendarViewStoreOrThrow() |
||||
|
||||
const events = ref([ |
||||
{ |
||||
Id: 1, |
||||
Title: 'Event 01', |
||||
from_date_time: '2023-12-15', |
||||
to_date_time: '2023-12-20', |
||||
}, |
||||
{ |
||||
Id: 2, |
||||
Title: 'Event 02', |
||||
from_date_time: '2023-12-20', |
||||
to_date_time: '2023-12-25', |
||||
}, |
||||
]) |
||||
return data.value |
||||
} |
||||
return formattedData.value |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div v-if="calDataType === UITypes.Date" class="flex flex-col px-2 gap-4 pt-4"> |
||||
<template v-if="formattedData.length"> |
||||
<div |
||||
v-if="calDataType === UITypes.Date" |
||||
:class="{ |
||||
'h-calc(100vh-10.8rem) overflow-y-auto nc-scrollbar-md': !props.isEmbed, |
||||
'border-r-1 h-full border-gray-200 hover:bg-gray-50 ': props.isEmbed, |
||||
}" |
||||
class="flex flex-col pt-3 gap-2 h-full w-full px-1" |
||||
> |
||||
<LazySmartSheetRow v-for="(record, rowIndex) in renderData" :row="record"> |
||||
<LazySmartsheetCalendarRecordCard |
||||
v-for="event in events" |
||||
:key="event.Id" |
||||
:name="event.Title" |
||||
:date="event.from_date_time" |
||||
:key="rowIndex" |
||||
:date="record.row[calendarRange[0].fk_from_col.title]" |
||||
:name="record.row[displayField.title]" |
||||
color="blue" |
||||
size="medium" |
||||
@click="emit('expand-record', 'xxx')" |
||||
size="small" |
||||
@click="emit('expand-record', record)" |
||||
/> |
||||
</LazySmartSheetRow> |
||||
</div> |
||||
<div |
||||
v-else-if="calDataType === UITypes.DateTime" |
||||
:class="{ |
||||
'h-calc(100vh-10.8rem) overflow-y-auto nc-scrollbar-md': !props.isEmbed, |
||||
'border-r-1 h-full border-gray-200 ': props.isEmbed, |
||||
}" |
||||
class="flex flex-col mt-3 gap-2 w-full px-1" |
||||
></div> |
||||
</template> |
||||
<div v-else-if="!data" class="w-full h-full flex text-md font-bold text-gray-500 items-center justify-center">No Records in this day</div> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"></style> |
||||
<style lang="scss" scoped></style> |
||||
|
||||
@ -0,0 +1,42 @@
|
||||
<script lang="ts" setup> |
||||
import dayjs from 'dayjs'; |
||||
|
||||
const { selectedDateRange, formattedData, calendarRange } = useCalendarViewStoreOrThrow() |
||||
|
||||
const weekDates = computed(() => { |
||||
const startOfWeek = new Date(selectedDateRange.value.start) |
||||
const endOfWeek = new Date(selectedDateRange.value.end) |
||||
const datesArray = [] |
||||
while (startOfWeek <= endOfWeek) { |
||||
datesArray.push(new Date(startOfWeek)) |
||||
startOfWeek.setDate(startOfWeek.getDate() + 1) |
||||
} |
||||
return datesArray |
||||
}) |
||||
|
||||
const getData = (date: Date) => { |
||||
const range = calendarRange.value[0] |
||||
return formattedData.value.filter((record) => dayjs(date).isSame(dayjs(record.row[range.fk_from_col.title]))) |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="flex flex-col"> |
||||
<div class="flex"> |
||||
<div |
||||
v-for="date in weekDates" |
||||
:key="date" |
||||
class="w-1/7 text-center text-sm text-gray-500 w-full py-1 !last:mr-2.5 border-gray-200 border-b-1 border-r-1 bg-gray-50" |
||||
> |
||||
{{ dayjs(date).format('DD ddd') }} |
||||
</div> |
||||
</div> |
||||
<div class="flex overflow-auto nc-scrollbar-md h-[calc(100vh-12rem)]"> |
||||
<div v-for="date in weekDates" :key="date" class="flex flex-col items-center w-1/7"> |
||||
<LazySmartsheetCalendarDayView :data="getData(date)" :is-embed="true" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
Loading…
Reference in new issue