github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix(nc-gui): some ui changes

pull/7611/head
DarkPhoenix2704 10 months ago
parent
e6a938305b
commit
e9ac7f1672
3 changed files with 90 additions and 45 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      packages/nc-gui/components/nc/Button.vue
  2. 19
      packages/nc-gui/components/smartsheet/calendar/index.vue
  3. 113
      packages/nc-gui/composables/useCalendarViewStore.ts

3
packages/nc-gui/components/nc/Button.vue
Unescape View File

@ -20,6 +20,7 @@ interface Props {
type?: ButtonType | 'danger' | 'secondary' | undefined
size?: NcButtonSize
centered?: boolean
fullWidth?: boolean
iconOnly?: boolean
}
@ -27,6 +28,7 @@ const props = withDefaults(defineProps<Props>(), {
disabled: false,
size: 'medium',
type: 'primary',
fullWidth: false,
centered: true,
})
@ -110,6 +112,7 @@ useEventListener(NcButton, 'mousedown', () => {
v-if="!(size === 'xxsmall' && loading) && !props.iconOnly"
:class="{
'font-medium': type === 'primary' || type === 'danger',
'w-full': props.fullWidth,
}"
class="flex flex-row items-center"
>

19
packages/nc-gui/components/smartsheet/calendar/index.vue
Unescape View File

@ -132,11 +132,11 @@ const headerText = computed(() => {
return dayjs(selectedDate.value).format('D MMMM YYYY')
case 'week':
if (selectedDateRange.value.start.isSame(selectedDateRange.value.end, 'month')) {
return `${selectedDateRange.value.start.format('D')} - ${selectedDateRange.value.end.format('D MMM YYYY')}`
return `${selectedDateRange.value.start.format('D')} - ${selectedDateRange.value.end.format('D MMM YY')}`
} else if (selectedDateRange.value.start.isSame(selectedDateRange.value.end, 'year')) {
return `${selectedDateRange.value.start.format('D MMM')} - ${selectedDateRange.value.end.format('D MMM YYYY')}`
return `${selectedDateRange.value.start.format('D MMM')} - ${selectedDateRange.value.end.format('D MMM YY')}`
} else {
return `${selectedDateRange.value.start.format('D MMM YYYY')} - ${selectedDateRange.value.end.format('D MMM YYYY')}`
return `${selectedDateRange.value.start.format('D MMM YY')} - ${selectedDateRange.value.end.format('D MMM YY')}`
}
case 'month':
return dayjs(selectedMonth.value).format('MMMM YYYY')
@ -159,17 +159,8 @@ const headerText = computed(() => {
</NcTooltip>
<NcDropdown v-model:visible="calendarRangeDropdown" :auto-close="false" :trigger="['click']">
<NcButton
:class="{
'w-36': activeCalendarView === 'month',
'w-40': activeCalendarView === 'day',
'w-20': activeCalendarView === 'year',
'w-50': activeCalendarView === 'week',
}"
size="small"
type="secondary"
>
<div class="flex w-full px-3 py-1 items-center justify-between">
<NcButton :class="{ '!w-23': activeCalendarView === 'year' }" class="w-44" full-width size="small" type="secondary">
<div class="flex w-full px-3 py-1 w-full items-center justify-between">
<span class="font-bold text-center text-brand-500">{{ headerText }}</span>
<component :is="iconMap.arrowDown" class="h-4 w-4 text-gray-700" />
</div>

113
packages/nc-gui/composables/useCalendarViewStore.ts
Unescape View File

@ -72,6 +72,8 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
const isSidebarLoading = ref<boolean>(false)
const activeDates = ref<dayjs.Dayjs[]>([])
const sideBarFilterOption = ref<string>(activeCalendarView.value ?? 'allRecords')
const { api } = useApi()
@ -431,39 +433,79 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
return combinedFilters.children.length > 0 ? [combinedFilters] : []
})
// Set of Dates that have data
const activeDates = computed(() => {
if (!formattedData.value || !calendarRange.value) return []
const dates = new Set<dayjs.Dayjs>()
const fetchActiveDates = async () => {
if (!base?.value?.id || !meta.value?.id || !viewMeta.value?.id || !calendarRange.value) return
let prevDate: dayjs.Dayjs | string | null = null
let nextDate: dayjs.Dayjs | string | null = null
if (activeCalendarView.value === 'week' || activeCalendarView.value === 'day' || activeCalendarView.value === 'month') {
prevDate = pageDate.value.subtract(1, 'day').endOf('day')
nextDate = pageDate.value.add(1, 'day').startOf('day')
} else if (activeCalendarView.value === 'year') {
prevDate = selectedDate.value.startOf('year').subtract(1, 'day').endOf('day')
nextDate = selectedDate.value.endOf('year').add(1, 'day').startOf('day')
}
const activeDateFilter: Array<any> = []
calendarRange.value.forEach((range) => {
formattedData.value.forEach((row) => {
const start = row.row[range.fk_from_col?.title ?? '']
let end
if (range.fk_to_col) {
end = row.row[range.fk_to_col.title ?? '']
}
if (start && end) {
const startDate = dayjs(start)
let endDate = dayjs(end)
let currentDate = startDate
// We have to check whether the start is after the end date, if so, loop through the end date
if (startDate.isAfter(endDate)) {
endDate = startDate
currentDate = endDate
}
while (currentDate.isSameOrBefore(endDate)) {
dates.add(currentDate)
currentDate = currentDate.add(1, 'day')
}
} else if (start) {
dates.add(dayjs(start))
}
})
const fromCol = range.fk_from_col
const toCol = range.fk_to_col
let rangeFilter: any = []
if (fromCol && toCol) {
rangeFilter = [
{
is_group: true,
logical_op: 'and',
children: [
{
fk_column_id: fromCol.id,
comparison_op: 'lt',
comparison_sub_op: 'exactDate',
value: nextDate,
},
{
fk_column_id: toCol.id,
comparison_op: 'gt',
comparison_sub_op: 'exactDate',
value: prevDate,
},
],
},
]
} else if (fromCol) {
rangeFilter = [
{
fk_column_id: fromCol.id,
comparison_op: 'lt',
comparison_sub_op: 'exactDate',
value: nextDate,
},
{
fk_column_id: fromCol.id,
comparison_op: 'gt',
comparison_sub_op: 'exactDate',
value: prevDate,
},
]
}
activeDateFilter.push(rangeFilter)
})
return Array.from(dates)
})
if (!base?.value?.id || !meta.value?.id || !viewMeta.value?.id) return
const res = await api.dbViewRow.calendarCount('noco', base.value.id!, meta.value!.id!, viewMeta.value.id, {
...queryParams.value,
...{},
...{},
...{ filterArrJson: JSON.stringify([...filterJSON.value, ...activeDateFilter]) },
})
if (res) {
activeDates.value = res.map((dateObj: unknown) => dayjs(dateObj.date))
}
}
const changeCalendarView = async (view: 'month' | 'year' | 'day' | 'week') => {
try {
@ -669,7 +711,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
}
}
watch(selectedDate, async () => {
watch(selectedDate, async (value, oldValue) => {
if (activeCalendarView.value === 'month' || activeCalendarView.value === 'week') {
if (sideBarFilterOption.value === 'selectedDate') {
await loadSidebarData()
@ -677,6 +719,10 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
} else {
await Promise.all([loadCalendarData(), loadSidebarData()])
}
if (activeCalendarView.value === 'year' && value.year() !== oldValue.year()) {
await fetchActiveDates()
}
})
watch(selectedTime, async () => {
@ -726,7 +772,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
}
}
sideBarFilterOption.value = activeCalendarView.value ?? 'allRecords'
await Promise.all([loadCalendarData(), loadSidebarData()])
await Promise.all([loadCalendarData(), loadSidebarData(), fetchActiveDates()])
})
watch(sideBarFilterOption, async () => {
@ -737,6 +783,11 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
await loadSidebarData()
})
watch(pageDate, async () => {
if (activeCalendarView.value === 'year') return
await fetchActiveDates()
})
return {
formattedSideBarData,
loadMoreSidebarData,

Write Preview
Loading…
Cancel
Save