From 8a8ed8f58f99f2d938eb4385dedbe50d2753d6ce Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Tue, 20 Feb 2024 07:16:21 +0000
Subject: [PATCH] fix(nc-gui): review pr

---
 .../dashboard/TreeView/CreateViewBtn.vue      |  4 +--
 .../nc-gui/components/nc/DateWeekSelector.vue | 31 ++++++++++---------
 .../components/nc/MonthYearSelector.vue       | 22 +++++++------
 .../components/shared-view/Calendar.vue       |  1 +
 .../smartsheet/calendar/DayView/DateField.vue |  1 +
 .../calendar/DayView/DateTimeField.vue        |  7 +++++
 .../smartsheet/calendar/MonthView.vue         |  4 +++
 .../smartsheet/calendar/RecordCard.vue        |  1 +
 .../smartsheet/calendar/SideMenu.vue          |  4 +--
 .../calendar/WeekView/DateField.vue           |  2 ++
 .../calendar/WeekView/DateTimeField.vue       |  2 ++
 .../components/smartsheet/calendar/index.vue  |  9 ++++--
 packages/nc-gui/lang/en.json                  |  1 +
 13 files changed, 59 insertions(+), 30 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue b/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
index 1aacdf4228..dc172b97cc 100644
--- a/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
@@ -159,11 +159,11 @@ async function onOpenModal({
           <div class="item">
             <div class="item-inner">
               <GeneralViewIcon :meta="{ type: ViewTypes.CALENDAR }" />
-              <div>Calendar</div>
+              <div>{{$t('objects.viewType.calendar')}}</div>
             </div>
 
             <GeneralLoader v-if="toBeCreateType === ViewTypes.CALENDAR && isViewListLoading" />
-            <GeneralIcon v-else class="plus" icon="plus" />
+            <GeneralIcon v-else class="text-brand-400" icon="plus" />
           </div>
         </NcMenuItem>
       </NcMenu>
diff --git a/packages/nc-gui/components/nc/DateWeekSelector.vue b/packages/nc-gui/components/nc/DateWeekSelector.vue
index 0e3a1446bd..7eb99b2d83 100644
--- a/packages/nc-gui/components/nc/DateWeekSelector.vue
+++ b/packages/nc-gui/components/nc/DateWeekSelector.vue
@@ -1,12 +1,13 @@
 <script lang="ts" setup>
 import dayjs from 'dayjs'
+
 interface Props {
   selectedDate?: dayjs.Dayjs | null
   isDisabled?: boolean
   pageDate?: dayjs.Dayjs
   activeDates?: Array<dayjs.Dayjs>
   isMondayFirst?: boolean
-  weekPicker?: boolean
+  isWeekPicker?: boolean
   disablePagination?: boolean
   selectedWeek?: {
     start: dayjs.Dayjs
@@ -19,7 +20,7 @@ const props = withDefaults(defineProps<Props>(), {
   isDisabled: false,
   isMondayFirst: true,
   pageDate: dayjs(),
-  weekPicker: false,
+  isWeekPicker: false,
   disablePagination: false,
   activeDates: [] as Array<dayjs.Dayjs>,
   selectedWeek: null,
@@ -27,8 +28,11 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits(['change', 'update:selectedDate', 'update:pageDate', 'update:selectedWeek'])
 // Page date is the date we use to manage which month/date that is currently being displayed
 const pageDate = useVModel(props, 'pageDate', emit)
+
 const selectedDate = useVModel(props, 'selectedDate', emit)
+
 const activeDates = useVModel(props, 'activeDates', emit)
+
 const selectedWeek = useVModel(props, 'selectedWeek', emit)
 
 const days = computed(() => {
@@ -40,13 +44,12 @@ const days = computed(() => {
 })
 
 // Used to display the current month and year
-const currentMonth = computed(() => {
+const currentMonthYear = computed(() => {
   return dayjs(pageDate.value).format('MMMM YYYY')
 })
 
 const selectWeek = (date: dayjs.Dayjs) => {
-  if (!date) return
-  const dayOffset = props.isMondayFirst ? 1 : 0
+  const dayOffset = +props.isMondayFirst
   const dayOfWeek = (date.day() - dayOffset + 7) % 7
   const startDate = date.subtract(dayOfWeek, 'day')
   selectedWeek.value = {
@@ -59,7 +62,7 @@ const selectWeek = (date: dayjs.Dayjs) => {
 // Includes all blank days at the start and end of the month
 const dates = computed(() => {
   const startOfMonth = dayjs(pageDate.value).startOf('month')
-  const dayOffset = props.isMondayFirst ? 1 : 0
+  const dayOffset = +props.isMondayFirst
   const firstDayOfWeek = startOfMonth.day()
   const startDay = startOfMonth.subtract((firstDayOfWeek - dayOffset + 7) % 7, 'day')
 
@@ -96,7 +99,7 @@ const isDayInPagedMonth = (date: dayjs.Dayjs) => {
 
 // Since we are using the same component for week picker and date picker we need to handle the date selection differently
 const handleSelectDate = (date: dayjs.Dayjs) => {
-  if (props.weekPicker) {
+  if (props.isWeekPicker) {
     selectWeek(date)
   } else {
     if (!isDayInPagedMonth(date)) {
@@ -122,9 +125,9 @@ const isActiveDate = (date: dayjs.Dayjs) => {
 const paginate = (action: 'next' | 'prev') => {
   let newDate = dayjs(pageDate.value)
   if (action === 'next') {
-    newDate = newDate.add(1, 'month').clone()
+    newDate = newDate.add(1, 'month')
   } else {
-    newDate = newDate.subtract(1, 'month').clone()
+    newDate = newDate.subtract(1, 'month')
   }
   pageDate.value = newDate
   emit('update:pageDate', newDate)
@@ -149,7 +152,7 @@ const paginate = (action: 'next' | 'prev') => {
         </template>
       </NcTooltip>
 
-      <span class="font-bold text-gray-700">{{ currentMonth }}</span>
+      <span class="font-bold text-gray-700">{{ currentMonthYear }}</span>
       <NcTooltip>
         <NcButton v-if="!disablePagination" size="small" type="secondary" @click="paginate('next')">
           <component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
@@ -170,10 +173,10 @@ const paginate = (action: 'next' | 'prev') => {
           v-for="(date, index) in dates"
           :key="index"
           :class="{
-            'rounded-lg': !weekPicker,
-            'bg-brand-50 border-1 !border-brand-500': isSelectedDate(date) && !weekPicker && isDayInPagedMonth(date),
-            'hover:(border-1 border-gray-200 bg-gray-100)': !isSelectedDate(date) && !weekPicker,
-            'nc-selected-week z-1': isDateInSelectedWeek(date) && weekPicker,
+            'rounded-lg': !isWeekPicker,
+            'bg-brand-50 border-1 !border-brand-500': isSelectedDate(date) && !isWeekPicker && isDayInPagedMonth(date),
+            'hover:(border-1 border-gray-200 bg-gray-100)': !isSelectedDate(date) && !isWeekPicker,
+            'nc-selected-week z-1': isDateInSelectedWeek(date) && isWeekPicker,
             'text-gray-400': !isDateInCurrentMonth(date),
             'nc-selected-week-start': isSameDate(date, selectedWeek?.start),
             'nc-selected-week-end': isSameDate(date, selectedWeek?.end),
diff --git a/packages/nc-gui/components/nc/MonthYearSelector.vue b/packages/nc-gui/components/nc/MonthYearSelector.vue
index e0ff7ecc61..c5c2b94346 100644
--- a/packages/nc-gui/components/nc/MonthYearSelector.vue
+++ b/packages/nc-gui/components/nc/MonthYearSelector.vue
@@ -5,18 +5,20 @@ interface Props {
   selectedDate?: dayjs.Dayjs | null
   isDisabled?: boolean
   pageDate?: dayjs.Dayjs
-  yearPicker?: boolean
+  isYearPicker?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   selectedDate: null,
   isDisabled: false,
   pageDate: dayjs(),
-  yearPicker: false,
+  isYearPicker: false,
 })
 const emit = defineEmits(['update:selectedDate', 'update:pageDate'])
-const pageDate = useVModel<dayjs.Dayjs>(props, 'pageDate', emit)
-const selectedDate = useVModel<dayjs.Dayjs>(props, 'selectedDate', emit)
+
+const pageDate = useVModel(props, 'pageDate', emit)
+
+const selectedDate = useVModel(props, 'selectedDate', emit)
 
 const years = computed(() => {
   const date = pageDate.value
@@ -60,16 +62,16 @@ const paginateMonth = (action: 'next' | 'prev') => {
 const paginateYear = (action: 'next' | 'prev') => {
   let date = dayjs(pageDate.value)
   if (action === 'next') {
-    date = date.add(12, 'year').clone()
+    date = date.add(12, 'year')
   } else {
-    date = date.subtract(12, 'year').clone()
+    date = date.subtract(12, 'year')
   }
   pageDate.value = date
   emit('update:pageDate', date)
 }
 
 const paginate = (action: 'next' | 'prev') => {
-  if (props.yearPicker) {
+  if (props.isYearPicker) {
     paginateYear(action)
   } else {
     paginateMonth(action)
@@ -93,7 +95,7 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
           <span>{{ $t('labels.previous') }}</span>
         </template>
       </NcTooltip>
-      <span class="font-bold text-gray-700">{{ yearPicker ? 'Select Year' : pageDate.year() }}</span>
+      <span class="font-bold text-gray-700">{{ isYearPicker ? $t('labels.selectYear') : pageDate.year() }}</span>
       <NcTooltip>
         <NcButton size="small" type="secondary" @click="paginate('next')">
           <component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
@@ -105,12 +107,12 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
     </div>
     <div class="rounded-y-xl max-w-[350px]">
       <div class="grid grid-cols-4 gap-2 p-2">
-        <template v-if="!yearPicker">
+        <template v-if="!isYearPicker">
           <span
             v-for="(month, id) in months"
             :key="id"
             :class="{
-              '!bg-brand-50 !border-1 !border-brand-500': isMonthSelected(month),
+              '!bg-brand-50 border-1 !border-brand-500': isMonthSelected(month),
             }"
             class="h-9 rounded-lg flex font-medium items-center justify-center hover:(border-1 border-gray-200 bg-gray-100) text-gray-500 cursor-pointer"
             @click="selectedDate = month"
diff --git a/packages/nc-gui/components/shared-view/Calendar.vue b/packages/nc-gui/components/shared-view/Calendar.vue
index 01cd692d47..83e91cd2a7 100644
--- a/packages/nc-gui/components/shared-view/Calendar.vue
+++ b/packages/nc-gui/components/shared-view/Calendar.vue
@@ -29,6 +29,7 @@ provide(IsPublicInj, ref(true))
 useProvideViewColumns(sharedView, meta, () => reloadEventHook?.trigger(), true)
 
 useProvideSmartsheetStore(sharedView, meta, true, ref([]), nestedFilters)
+
 useProvideKanbanViewStore(meta, sharedView)
 
 useProvideCalendarViewStore(meta, sharedView, true, nestedFilters)
diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
index 57f862e601..5ec354abaa 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
@@ -5,6 +5,7 @@ import { type Row, computed, ref } from '#imports'
 import { isRowEmpty } from '~/utils'
 
 const emit = defineEmits(['expand-record', 'new-record'])
+
 const meta = inject(MetaInj, ref())
 
 const container = ref()
diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index c606215c42..4e97f52bf8 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -246,12 +246,17 @@ const recordsAcrossAllRange = computed<{
 })
 
 const dragRecord = ref<Row | null>(null)
+
 const isDragging = ref(false)
+
 const draggingId = ref<string | null>(null)
+
 const dragElement = ref<HTMLElement | null>(null)
 
 const resizeDirection = ref<'right' | 'left' | null>()
+
 const resizeInProgress = ref(false)
+
 const resizeRecord = ref<Row | null>()
 
 const dragTimeout = ref<ReturnType<typeof setTimeout>>()
@@ -349,6 +354,7 @@ const onResizeEnd = () => {
   document.removeEventListener('mousemove', onResize)
   document.removeEventListener('mouseup', onResizeEnd)
 }
+
 const onResizeStart = (direction: 'right' | 'left', _event: MouseEvent, record: Row) => {
   if (!isUIAllowed('dataEdit')) return
   resizeInProgress.value = true
@@ -560,6 +566,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
   selectedTime.value = hour
   showSideMenu.value = true
 }
+
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index ca3f0ed28f..57afc5bece 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -42,19 +42,23 @@ const isDayInPagedMonth = (date: dayjs.Dayjs) => {
 }
 
 const dragElement = ref<HTMLElement | null>(null)
+
 const draggingId = ref<string | null>(null)
 
 const resizeInProgress = ref(false)
 
 const isDragging = ref(false)
+
 const dragRecord = ref<Row>()
 
 const hoverRecord = ref<string | null>()
+
 const dragTimeout = ref<ReturnType<typeof setTimeout>>()
 
 const focusedDate = ref<dayjs.Dayjs | null>(null)
 
 const resizeDirection = ref<'right' | 'left'>()
+
 const resizeRecord = ref<Row>()
 
 const dates = computed(() => {
diff --git a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
index fca3751e76..591cdfad33 100644
--- a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
@@ -21,6 +21,7 @@ withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits(['resize-start'])
+
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
index b8d84d4c6b..229c71239a 100644
--- a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
@@ -311,7 +311,7 @@ onUnmounted(() => {
         v-model:active-dates="activeDates"
         v-model:page-date="pageDate"
         v-model:selected-week="selectedDateRange"
-        week-picker
+        is-week-picker
       />
       <NcMonthYearSelector
         v-else-if="activeCalendarView === ('month' as const)"
@@ -322,7 +322,7 @@ onUnmounted(() => {
         v-else-if="activeCalendarView === ('year' as const)"
         v-model:page-date="pageDate"
         v-model:selected-date="selectedDate"
-        year-picker
+        is-year-picker
       />
     </div>
 
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
index d9c346fbad..358c51f71e 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
@@ -202,9 +202,11 @@ const resizeInProgress = ref(false)
 const dragTimeout = ref<ReturnType<typeof setTimeout>>()
 
 const isDragging = ref(false)
+
 const dragRecord = ref<Row>()
 
 const resizeDirection = ref<'right' | 'left' | null>()
+
 const resizeRecord = ref<Row | null>(null)
 
 const hoverRecord = ref<string | null>()
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index 6ff226f366..4f2f3d0914 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -321,9 +321,11 @@ const dragTimeout = ref<ReturnType<typeof setTimeout>>()
 const hoverRecord = ref<string | null>()
 
 const resizeDirection = ref<'right' | 'left' | null>()
+
 const resizeRecord = ref<Row | null>()
 
 const isDragging = ref(false)
+
 const dragRecord = ref<Row>()
 
 const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[], isDelete: boolean) => {
diff --git a/packages/nc-gui/components/smartsheet/calendar/index.vue b/packages/nc-gui/components/smartsheet/calendar/index.vue
index 4ed26fcd0d..50977327bd 100644
--- a/packages/nc-gui/components/smartsheet/calendar/index.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/index.vue
@@ -25,6 +25,7 @@ const meta = inject(MetaInj, ref())
 const view = inject(ActiveViewInj, ref())
 
 const reloadViewMetaHook = inject(ReloadViewMetaHookInj)
+
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
 
 const { isMobileMode } = useGlobal()
@@ -58,6 +59,7 @@ const {
 const calendarRangeDropdown = ref(false)
 
 const router = useRouter()
+
 const route = useRoute()
 
 const expandedFormOnRowIdDlg = computed({
@@ -76,7 +78,9 @@ const expandedFormOnRowIdDlg = computed({
 })
 
 const expandedFormDlg = ref(false)
+
 const expandedFormRow = ref<RowType>()
+
 const expandedFormRowState = ref<Record<string, any>>()
 
 const expandRecord = (row: RowType, state?: Record<string, any>) => {
@@ -122,6 +126,7 @@ onMounted(async () => {
 reloadViewMetaHook?.on(async () => {
   await loadCalendarMeta()
 })
+
 reloadViewDataHook?.on(async () => {
   await Promise.all([loadCalendarData(), loadSidebarData()])
 })
@@ -185,7 +190,7 @@ const headerText = computed(() => {
                   v-model:active-dates="activeDates"
                   v-model:page-date="pageDate"
                   v-model:selected-week="selectedDateRange"
-                  week-picker
+                  is-week-picker
                 />
                 <NcMonthYearSelector
                   v-else-if="activeCalendarView === ('month' as const)"
@@ -196,7 +201,7 @@ const headerText = computed(() => {
                   v-else-if="activeCalendarView === ('year' as const)"
                   v-model:page-date="pageDate"
                   v-model:selected-date="selectedDate"
-                  year-picker
+                  is-year-picker
                 />
               </div>
             </template>
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 03755c4222..dc7b649403 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -425,6 +425,7 @@
     }
   },
   "labels": {
+    "selectYear": "Select Year",
     "save": "Save",
     "cancel": "Cancel",
     "metadataUrl": "Metadata URL",