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

fix(nc-gui): grid mis alignment, filter update

pull/7611/head
DarkPhoenix2704 8 months ago
parent
932153ec71
commit
9832b457e1
6 changed files with 98 additions and 106 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. 2
      packages/nc-gui/components/nc/Button.vue
  2. 32
      packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
  3. 4
      packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
  4. 20
      packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
  5. 10
      packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
  6. 136
      packages/nc-gui/composables/useCalendarViewStore.ts

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

@ -111,7 +111,7 @@ useEventListener(NcButton, 'mousedown', () => {
:class="{
'font-medium': type === 'primary' || type === 'danger',
}"
class="flex flex-row items-center w-full"
class="flex flex-row items-center"
>
<slot v-if="loading && slots.loading" name="loading" />

32
packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
Unescape View File

@ -10,8 +10,17 @@ const container = ref()
const { isUIAllowed } = useRoles()
const { selectedDate, selectedTime, formattedData, calendarRange, formattedSideBarData, updateRowProperty, displayField } =
useCalendarViewStoreOrThrow()
const {
selectedDate,
selectedTime,
formattedData,
calendarRange,
formattedSideBarData,
updateRowProperty,
displayField,
sideBarFilterOption,
showSideMenu,
} = useCalendarViewStoreOrThrow()
const hours = computed(() => {
const hours: Array<dayjs.Dayjs> = []
@ -101,6 +110,11 @@ const recordsAcrossAllRange = computed<{
let _startDate = startDate.clone()
const style: Partial<CSSStyleDeclaration> = {
height: `${heightInPixels}px`,
top: `${topInPixels + 5 + startHour * 2}px`,
}
while (_startDate.isBefore(endDate)) {
const timeKey = _startDate.format('HH:mm')
if (!overlaps[timeKey]) {
@ -120,13 +134,6 @@ const recordsAcrossAllRange = computed<{
_startDate = _startDate.add(15, 'minutes')
}
const finalTopInPixels = topInPixels + 5 + startHour * 2
const style: Partial<CSSStyleDeclaration> = {
top: `${finalTopInPixels}px`,
height: `${heightInPixels}px`,
}
let position = 'none'
const isSelectedDay = (date: dayjs.Dayjs) => date.isSame(selectedDate.value, 'day')
const isBeforeSelectedDay = (date: dayjs.Dayjs) => date.isBefore(selectedDate.value, 'day')
@ -169,7 +176,6 @@ const recordsAcrossAllRange = computed<{
while (_startDate.isBefore(endDate)) {
const timeKey = _startDate.format('HH:mm')
console.log('timeKey', timeKey)
if (!overlaps[timeKey]) {
overlaps[timeKey] = {
@ -551,6 +557,12 @@ const dragStart = (event: MouseEvent, record: Row) => {
document.addEventListener('mouseup', onMouseUp)
}
const viewMore = (hour: dayjs.Dayjs) => {
sideBarFilterOption.value = 'selectedHours'
selectedTime.value = hour
showSideMenu.value = true
}
</script>
<template>

4
packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
Unescape View File

@ -63,7 +63,7 @@ const emit = defineEmits(['resize-start'])
:class="{
'!block !border-2 !rounded-lg !border-brand-500': selected || hover,
}"
class="mt-0.6 h-7.1 hidden -left-4 resize"
class="mt-0.1 h-7.1 absolute hidden -left-4 resize"
>
<NcButton size="xsmall" type="secondary" @mousedown.stop="emit('resize-start', 'left', $event, record)">
<component :is="iconMap.drag" class="text-gray-400"></component>
@ -83,7 +83,7 @@ const emit = defineEmits(['resize-start'])
:class="{
'!block border-2 rounded-lg border-brand-500': selected || hover,
}"
class="absolute mt-0.6 hidden h-7.1 -right-4 border-1 resize !group-hover:(border-brand-500 border-2 block rounded-lg)"
class="absolute mt-0.1 hidden h-7.1 -right-4 border-1 resize !group-hover:(border-brand-500 border-2 block rounded-lg)"
>
<NcButton size="xsmall" type="secondary" @mousedown.stop="emit('resize-start', 'right', $event, record)">
<component :is="iconMap.drag" class="text-gray-400"></component>

20
packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
Unescape View File

@ -213,6 +213,8 @@ const dragRecord = ref<Row>()
const resizeDirection = ref<'right' | 'left' | null>()
const resizeRecord = ref<Row | null>(null)
const hoverRecord = ref<string | null>()
const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[], isDelete: boolean) => {
updateRowProperty(row, updateProperty, isDelete)
}, 500)
@ -581,19 +583,22 @@ const dropEvent = (event: DragEvent) => {
<div class="flex relative flex-col prevent-select" @drop="dropEvent">
<div class="flex">
<div
v-for="date in weekDates"
:key="date.toISOString()"
class="w-1/7 text-center text-sm text-gray-500 w-full py-1 border-gray-200 border-b-1 border-r-1 bg-gray-50"
v-for="(date, weekIndex) in weekDates"
:key="weekIndex"
:class="{
'!border-brand-500 !border-b-gray-200': dayjs(date).isSame(selectedDate, 'day'),
}"
class="w-1/7 text-center text-sm text-gray-500 w-full py-1 border-gray-200 border-l-gray-50 border-t-gray-50 last:border-r-0 border-1 bg-gray-50"
>
{{ dayjs(date).format('DD ddd') }}
</div>
</div>
<div ref="container" class="flex h-[calc(100vh-11.6rem)]">
<div
v-for="date in weekDates"
:key="date.toISOString()"
v-for="(date, dateIndex) in weekDates"
:key="dateIndex"
:class="{
'!border-1 border-brand-500': dayjs(date).isSame(selectedDate, 'day'),
'!border-1 !border-t-0 border-brand-500': dayjs(date).isSame(selectedDate, 'day'),
}"
class="flex flex-col border-r-1 min-h-[100vh] last:border-r-0 items-center w-1/7"
@click="selectedDate = date"
@ -613,9 +618,12 @@ const dropEvent = (event: DragEvent) => {
}"
class="absolute group draggable-record pointer-events-auto"
@mousedown="dragStart($event, record)"
@mouseleave="hoverRecord = null"
@mouseover="hoverRecord = record.rowMeta.id"
>
<LazySmartsheetRow :row="record">
<LazySmartsheetCalendarRecordCard
:hover="hoverRecord === record.rowMeta.id"
:position="record.rowMeta.position"
:record="record"
:resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"

10
packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
Unescape View File

@ -115,7 +115,7 @@ const recordsAcrossAllRange = computed<{
const startDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null
if (!startDate) return
const dateKey = startDate?.format('YYYY-MM-DD')
const hourKey = startDate?.format('HH:mm')
const hourKey = startDate?.startOf('hour').format('HH:mm')
const id = record.rowMeta.id ?? getRandomNumbers()
let style: Partial<CSSStyleDeclaration> = {}
@ -145,7 +145,10 @@ const recordsAcrossAllRange = computed<{
dayIndex = 6
}
const hourIndex = datesHours.value[dayIndex].findIndex((h) => h.format('HH:mm') === hourKey)
const hourIndex = Math.max(
datesHours.value[dayIndex].findIndex((h) => h.startOf('hour').format('HH:mm') === hourKey),
0,
)
style = {
...style,
@ -731,7 +734,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
<div
v-for="date in datesHours"
:key="date[0].toISOString()"
class="w-1/7 text-center text-sm text-gray-500 w-full py-1 border-gray-200 last:border-r-0 border-b-1 border-r-1 bg-gray-50"
class="w-1/7 text-center text-sm text-gray-500 w-full py-1 border-gray-200 last:border-r-0 border-b-1 border-l-1 bg-gray-50"
>
{{ dayjs(date[0]).format('DD ddd') }}
</div>
@ -743,6 +746,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
:key="hourIndex"
:class="{
'border-1 !border-brand-500': hour.isSame(selectedTime, 'hour'),
'!border-l-0': date[0].day() === selectedDateRange.start?.day(),
}"
class="text-center relative h-20 text-sm text-gray-500 w-full py-1 border-gray-200 first:border-l-none border-1 border-r-gray-50 border-t-gray-50 bg-gray-50"
@click="selectedTime = hour"

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

@ -170,9 +170,9 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
nextDate = selectedDate.value.add(1, 'day').startOf('day')
break
case 'week':
prevDate = selectedDateRange.value.start.subtract(1, 'day').endOf('day')
fromDate = selectedDateRange.value.start.startOf('day')
toDate = selectedDateRange.value.end.endOf('day')
prevDate = selectedDateRange.value.start.subtract(1, 'day').endOf('day')
nextDate = selectedDateRange.value.end.add(1, 'day').startOf('day')
break
case 'month': {
@ -190,7 +190,6 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
case 'year':
fromDate = selectedDate.value.startOf('year')
toDate = selectedDate.value.endOf('year')
prevDate = fromDate.subtract(1, 'day').endOf('day')
nextDate = toDate.add(1, 'day').startOf('day')
break
@ -225,53 +224,40 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
logical_op: 'and',
children: [
{
is_group: true,
logical_op: 'or',
children: [
{
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,
},
],
},
{
// Exact match check
is_group: true,
logical_op: 'or',
children: [
{
fk_column_id: fromCol.id,
comparison_op: 'eq',
logical_op: 'or',
comparison_sub_op: 'exactDate',
value: fromDate,
},
],
},
],
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,
},
],
},
{
fk_column_id: fromCol.id,
comparison_op: 'eq',
logical_op: 'or',
comparison_sub_op: 'exactDate',
value: fromDate,
},
]
} else if (fromCol) {
rangeFilter = [
{
fk_column_id: fromCol.id,
comparison_op: 'btw',
comparison_op: 'lt',
comparison_sub_op: 'exactDate',
value: `${prevDate},${nextDate}`,
value: nextDate,
},
{
fk_column_id: fromCol.id,
comparison_op: 'gt',
comparison_sub_op: 'exactDate',
value: prevDate,
},
]
}
@ -401,65 +387,47 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
logical_op: 'and',
children: [
{
is_group: true,
logical_op: 'or',
children: [
{
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,
},
],
},
{
// Exact match check
is_group: true,
logical_op: 'or',
children: [
{
fk_column_id: fromCol.id,
comparison_op: 'eq',
logical_op: 'or',
comparison_sub_op: 'exactDate',
value: fromDate,
},
],
},
],
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,
},
],
},
{
fk_column_id: fromCol.id,
comparison_op: 'eq',
logical_op: 'or',
comparison_sub_op: 'exactDate',
value: fromDate,
},
]
} else if (fromCol) {
rangeFilter = [
{
fk_column_id: fromCol.id,
comparison_op: 'btw',
comparison_op: 'lt',
comparison_sub_op: 'exactDate',
value: nextDate,
},
{
fk_column_id: fromCol.id,
comparison_op: 'gt',
comparison_sub_op: 'exactDate',
value: `${prevDate},${nextDate}`,
value: prevDate,
},
]
}
if (rangeFilter.length > 0) {
combinedFilters.children.push({
is_group: true,
logical_op: 'or',
children: rangeFilter,
})
combinedFilters.children.push(rangeFilter)
}
})
return combinedFilters.children.length > 0 ? [combinedFilters] : []
})

Write Preview
Loading…
Cancel
Save