mirror of https://github.com/nocodb/nocodb
DarkPhoenix2704
10 months ago
5 changed files with 211 additions and 1 deletions
@ -0,0 +1,38 @@
|
||||
<script setup lang="ts"> |
||||
|
||||
interface Props { |
||||
name: string; |
||||
date?: string; |
||||
color?: string; |
||||
showDate?: boolean; |
||||
} |
||||
|
||||
const props = withDefaults(defineProps<Props>(), { |
||||
name: '', |
||||
date: '', |
||||
color: 'blue', |
||||
showDate: true, |
||||
}); |
||||
|
||||
</script> |
||||
|
||||
<template> |
||||
<div class="flex border-1 cursor-pointer border-gray-200 items-center px-2 py-3 rounded-lg"> |
||||
<span :class="{ |
||||
'bg-maroon-500': props.color === 'maroon', |
||||
'bg-blue-500': props.color === 'blue', |
||||
'bg-green-500': props.color === 'green', |
||||
'bg-yellow-500': props.color === 'yellow', |
||||
'bg-pink-500': props.color === 'pink', |
||||
'bg-purple-500': props.color === 'purple', |
||||
}" class="block h-10 w-1 rounded"></span> |
||||
<div class="flex flex-col gap-1 ml-3"> |
||||
<span class="text-sm font-bold text-gray-700">{{name}}</span> |
||||
<span v-if="showDate" class="text-xs text-gray-500">{{date}}</span> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"> |
||||
|
||||
</style> |
@ -0,0 +1,85 @@
|
||||
<script setup lang="ts"> |
||||
|
||||
import {CalendarViewTypeInj} from "#imports"; |
||||
|
||||
const props = defineProps<{ |
||||
visible: boolean |
||||
}>() |
||||
|
||||
const activeCalendarView = inject(CalendarViewTypeInj, ref('month' as const)) |
||||
|
||||
const {t} = useI18n() |
||||
|
||||
const emit = defineEmits(['expand-record']); |
||||
|
||||
const calendarViewType = inject(CalendarViewTypeInj, ref()) |
||||
|
||||
const options = computed(() => { |
||||
switch (calendarViewType.value) { |
||||
case 'day' as const: |
||||
return [ |
||||
{label: 'in this day', value: 'day'}, |
||||
{label: 'without dates', value: 'withoutDates'}, |
||||
{label: 'in selected hours', value: 'selectedHours'}, |
||||
{label: 'all records', value: 'allRecords'}, |
||||
] |
||||
case 'week' as const: |
||||
return [ |
||||
{label: 'in this week', value: 'week'}, |
||||
{label: 'without dates', value: 'withoutDates'}, |
||||
{label: 'in selected hours', value: 'selectedHours'}, |
||||
{label: 'all records', value: 'allRecords'}, |
||||
] |
||||
case 'month' as const: |
||||
return [ |
||||
{label: 'in this month', value: 'month'}, |
||||
{label: 'without dates', value: 'withoutDates'}, |
||||
{label: 'all records', value: 'allRecords'}, |
||||
{label: 'in selected date', value: 'selectedDate'}, |
||||
] |
||||
case 'year' as const: |
||||
return [ |
||||
{label: 'in this year', value: 'year'}, |
||||
{label: 'without dates', value: 'withoutDates'}, |
||||
{label: 'all records', value: 'allRecords'}, |
||||
{label: 'in selected date', value: 'selectedDate'}, |
||||
] |
||||
} |
||||
}) |
||||
|
||||
|
||||
|
||||
|
||||
</script> |
||||
|
||||
<template> |
||||
<div :class="{ |
||||
'w-0': !props.visible, |
||||
'w-1/4 min-w-[22.1rem]': props.visible, |
||||
'transition-all': true, |
||||
}" class="h-full border-l-1 border-gray-200"> |
||||
<NcDatePicker /> |
||||
<div class="px-4 flex flex-col gap-y-6 pt-4"> |
||||
<div class="flex justify-between items-center"> |
||||
<span class="text-2xl font-bold">{{ t('objects.records') }}</span> |
||||
<NcSelect :options="options" value="all records"/> |
||||
</div> |
||||
<a-input class="!rounded-lg !border-gray-200 !px-4 !py-2" placeholder="Search your records"> |
||||
<template #prefix> |
||||
<component :is="iconMap.search" class="h-4 w-4 mr-1 text-gray-500"/> |
||||
</template> |
||||
</a-input> |
||||
|
||||
<div class="gap-2 flex flex-col nc-scrollbar-md overflow-y-auto nc-calendar-top-height"> |
||||
<LazySmartsheetCalendarRecordCard v-for="(x, id) in Array(4)" :color="x%2 === 0 ? 'maroon': 'blue'" |
||||
date="27 April 2003" name="Saturday HackNight" @click="emit('expand-record', id)"/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"> |
||||
.nc-calendar-top-height { |
||||
height: calc(100vh - 40rem); |
||||
} |
||||
</style> |
@ -0,0 +1,82 @@
|
||||
<script lang="ts" setup> |
||||
|
||||
import { |
||||
ActiveViewInj, |
||||
CalendarViewTypeInj, |
||||
inject, |
||||
IsCalendarInj, |
||||
IsFormInj, |
||||
IsGalleryInj, |
||||
IsGridInj, |
||||
IsKanbanInj, |
||||
MetaInj, |
||||
provide, |
||||
ref, |
||||
useI18n, |
||||
} from '#imports' |
||||
|
||||
const meta = inject(MetaInj, ref()) |
||||
|
||||
const view = inject(ActiveViewInj, ref()) |
||||
|
||||
const {t} = useI18n() |
||||
|
||||
provide(IsFormInj, ref(false)) |
||||
|
||||
provide(IsGalleryInj, ref(false)) |
||||
|
||||
provide(IsGridInj, ref(false)) |
||||
|
||||
provide(IsKanbanInj, ref(false)) |
||||
|
||||
provide(IsCalendarInj, ref(true)) |
||||
|
||||
provide(CalendarViewTypeInj, ref('day' as const)) |
||||
|
||||
const showSideMenu = ref(true) |
||||
|
||||
const isExpanded = ref(false) |
||||
|
||||
const expandedRecordId = ref<string | null>(null); |
||||
|
||||
const expandRecord = (id: string) => { |
||||
isExpanded.value = true |
||||
expandedRecordId.value = id |
||||
} |
||||
|
||||
</script> |
||||
|
||||
|
||||
<template> |
||||
<div class="flex h-full flex-row"> |
||||
<div class="flex flex-col w-full"> |
||||
<div class="flex justify-between p-3 items-center border-b-1 border-gray-200"> |
||||
<div class="flex justify-start gap-3 items-center"> |
||||
<NcButton size="small" type="secondary"> |
||||
<component :is="iconMap.doubleLeftArrow" class="h-4 w-4"/> |
||||
</NcButton> |
||||
<span class="font-bold text-gray-700">27 December 2023</span> |
||||
<NcButton size="small" type="secondary"> |
||||
<component :is="iconMap.doubleRightArrow" class="h-4 w-4"/> |
||||
</NcButton> |
||||
</div> |
||||
<NcButton size="small" type="secondary" @click="showSideMenu = !showSideMenu"> |
||||
<component :is="iconMap.sidebarMinimise" :class="{ |
||||
'transform rotate-180': showSideMenu, |
||||
}" class="h-4 w-4 transition-all"/> |
||||
</NcButton> |
||||
</div> |
||||
</div> |
||||
<LazySmartsheetCalendarSideMenu :visible="showSideMenu" @expand-record="expandRecord"/> |
||||
</div> |
||||
|
||||
<LazySmartsheetExpandedForm v-model="isExpanded" :view="view" :row="{ |
||||
row: {}, |
||||
rowMeta: { |
||||
new: !expandedRecordId, |
||||
}, |
||||
|
||||
}" :meta="meta" /> |
||||
|
||||
|
||||
</template> |
Loading…
Reference in new issue