Browse Source

feat(nc-gui): calendar view sidebar

pull/7611/head
DarkPhoenix2704 9 months ago
parent
commit
699266e195
  1. 38
      packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
  2. 85
      packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
  3. 82
      packages/nc-gui/components/smartsheet/calendar/index.vue
  4. 6
      packages/nc-gui/components/tabs/Smartsheet.vue
  5. 1
      packages/nc-gui/context/index.ts

38
packages/nc-gui/components/smartsheet/calendar/RecordCard.vue

@ -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>

85
packages/nc-gui/components/smartsheet/calendar/SideMenu.vue

@ -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>

82
packages/nc-gui/components/smartsheet/calendar/index.vue

@ -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>

6
packages/nc-gui/components/tabs/Smartsheet.vue

@ -51,7 +51,7 @@ const { handleSidebarOpenOnMobileForNonViews } = useConfigStore()
const { activeTableId } = storeToRefs(useTablesStore())
const { activeView, openedViewsTab, activeViewTitleOrId } = storeToRefs(useViewsStore())
const { isGallery, isGrid, isForm, isKanban, isLocked, isMap } = useProvideSmartsheetStore(activeView, meta)
const { isGallery, isGrid, isForm, isKanban, isLocked, isMap, isCalendar } = useProvideSmartsheetStore(activeView, meta)
useSqlEditor()
@ -182,7 +182,11 @@ watch([activeViewTitleOrId, activeTableId], () => {
<LazySmartsheetKanban v-else-if="isKanban" />
<LazySmartsheetCalendar v-else-if="isCalendar" />
<LazySmartsheetMap v-else-if="isMap" />
<LazySmartsheetGallery v-else-if="isGallery" />
</template>
</div>
</div>

1
packages/nc-gui/context/index.ts

@ -54,5 +54,6 @@ export const TreeViewInj: InjectionKey<{
openRenameTableDialog: (table: TableType, rightClick: boolean) => void
contextMenuTarget: { type?: 'base' | 'base' | 'table' | 'main' | 'layout'; value?: any }
}> = Symbol('tree-view-functions-injection')
export const CalendarViewTypeInj: InjectionKey<Ref<'week' | 'month' | 'day' | 'year'>> = Symbol('calendar-view-type-injection')
export const JsonExpandInj: InjectionKey<Ref<boolean>> = Symbol('json-expand-injection')
export const AllFiltersInj: InjectionKey<Ref<Record<string, FilterType[]>>> = Symbol('all-filters-injection')

Loading…
Cancel
Save