feat(nc-gui): calendar view sidebar

5 months ago · 699266e195
5 changed files with 211 additions and 1 deletions
--- a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
+++ b/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>
--- a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
+++ b/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>
--- a/packages/nc-gui/components/smartsheet/calendar/index.vue
+++ b/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>
--- a/packages/nc-gui/components/tabs/Smartsheet.vue
+++ b/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>
--- a/packages/nc-gui/context/index.ts
+++ b/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')