Skip to content

Commit

Permalink
fix(nc-gui): checkbox issue
Browse files Browse the repository at this point in the history
  • Loading branch information
@DarkPhoenix2704
DarkPhoenix2704 committed Feb 22, 2024
1 parent 4d30c88 commit 0d5eba0
Show file tree
Hide file tree
Showing 6 changed files with 53 additions and 55 deletions.
16 changes: 8 additions & 8 deletions packages/nc-gui/components/smartsheet/calendar/Cell.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@ const sqlUi = ref(column.value?.source_id ? sqlUis.value[column.value?.source_id
const abstractType = computed(() => column.value && sqlUi.value.getAbstractType(column.value))
const getCheckBoxValue = (modelValue: any) => {
return !modelValue && modelValue !== '0' && modelValue !== 0 && modelValue !== 'false'
const getCheckBoxValue = (modelValue: boolean | string | number | '0' | '1') => {
return !!modelValue && modelValue !== '0' && modelValue !== 0 && modelValue !== 'false'
}
const getMultiSelectValue = (modelValue: any, col: ColumnType): string => {
Expand Down Expand Up @@ -263,7 +263,7 @@ const getAttachmentValue = (modelValue: string | null | number | Array<any>) =>
}
const parseValue = (value: any, col: ColumnType): string => {
if (!value || !col) {
if (!col) {
return undefined
}
if (isGeoData(col)) {
Expand All @@ -274,7 +274,7 @@ const parseValue = (value: any, col: ColumnType): string => {
return getTextAreaValue(value, col)
}
if (isBoolean(col, abstractType)) {
return getCheckBoxValue(value) ? 'Checked' : 'UnChecked'
return getCheckBoxValue(value) ? 'Checked' : 'Un checked'
}
if (isMultiSelect(col)) {
return getMultiSelectValue(value, col)
Expand Down Expand Up @@ -335,13 +335,13 @@ const parseValue = (value: any, col: ColumnType): string => {
<template>
<span
:class="{
'font-bold': props.bold,
'italic': props.italic,
'underline': props.underline,
'font-bold': bold,
'italic': italic,
'underline': underline,
}"
data-testid="nc-calendar-cell"
>
{{ parseValue(props.modelValue, column) }}
{{ parseValue(modelValue, column) }}
</span>
</template>

Expand Down
4 changes: 1 addition & 3 deletions packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,10 +221,8 @@ const dropEvent = (event: DragEvent) => {
:underline="getFieldStyle(displayField!).underline"
/>
</template>
<template v-for="(field, id) in fieldsWithoutDisplay">
<template v-for="(field, id) in fieldsWithoutDisplay" :key="id">
<LazySmartsheetCalendarCell
v-if="!isRowEmpty(record, field)"
:key="id"
v-model="record.row[field!.title!]"
:bold="getFieldStyle(field).bold"
:column="field"
Expand Down
4 changes: 1 addition & 3 deletions packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -727,10 +727,8 @@ const viewMore = (hour: dayjs.Dayjs) => {
:underline="getFieldStyle(displayField!).underline"
/>
</template>
<template v-for="(field, id) in fieldsWithoutDisplay">
<template v-for="(field, id) in fieldsWithoutDisplay" :key="id">
<LazySmartsheetCalendarCell
v-if="!isRowEmpty(record, field)"
:key="id"
v-model="record.row[field!.title!]"
:bold="getFieldStyle(field).bold"
:column="field"
Expand Down
35 changes: 18 additions & 17 deletions packages/nc-gui/components/smartsheet/calendar/MonthView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,17 +64,18 @@ const fields = inject(FieldsInj, ref())
const { fields: _fields } = useViewColumnsOrThrow()
const getFieldStyle = (field: ColumnType) => {
const fi = _fields.value.find((f) => f.title === field.title)
const getFieldStyle = (field: ColumnType | undefined) => {
if (!field) return { underline: false, bold: false, italic: false }
const fi = _fields.value?.find((f) => f.title === field.title)
return {
underline: fi.underline,
bold: fi.bold,
italic: fi.italic,
underline: fi?.underline,
bold: fi?.bold,
italic: fi?.italic,
}
}
const fieldsWithoutDisplay = computed(() => fields.value.filter((f) => !isPrimary(f)))
const fieldsWithoutDisplay = computed(() => fields.value?.filter((f) => !isPrimary(f)))
const dates = computed(() => {
const startOfMonth = selectedMonth.value.startOf('month')
Expand Down Expand Up @@ -346,8 +347,8 @@ const calculateNewRow = (event: MouseEvent, updateSideBar?: boolean) => {
const percentY = (event.clientY - top - window.scrollY) / height
const percentX = (event.clientX - left - window.scrollX) / width
const fromCol = dragRecord.value.rowMeta.range?.fk_from_col
const toCol = dragRecord.value.rowMeta.range?.fk_to_col
const fromCol = dragRecord.value?.rowMeta.range?.fk_from_col
const toCol = dragRecord.value?.rowMeta.range?.fk_to_col
const week = Math.floor(percentY * dates.value.length)
const day = Math.floor(percentX * 7)
Expand All @@ -360,16 +361,16 @@ const calculateNewRow = (event: MouseEvent, updateSideBar?: boolean) => {
const newRow = {
...dragRecord.value,
row: {
...dragRecord.value.row,
...dragRecord.value?.row,
[fromCol!.title!]: dayjs(newStartDate).format('YYYY-MM-DD HH:mm:ssZ'),
},
}
const updateProperty = [fromCol!.title!]
if (toCol) {
const fromDate = dragRecord.value.row[fromCol!.title!] ? dayjs(dragRecord.value.row[fromCol!.title!]) : null
const toDate = dragRecord.value.row[toCol!.title!] ? dayjs(dragRecord.value.row[toCol!.title!]) : null
const fromDate = dragRecord.value?.row[fromCol!.title!] ? dayjs(dragRecord.value.row[fromCol!.title!]) : null
const toDate = dragRecord.value?.row[toCol!.title!] ? dayjs(dragRecord.value?.row[toCol!.title!]) : null
if (fromDate && toDate) {
endDate = dayjs(newStartDate).add(toDate.diff(fromDate, 'day'), 'day')
Expand Down Expand Up @@ -454,7 +455,7 @@ const onResize = (event: MouseEvent) => {
[toCol!.title!]: dayjs(newEndDate).format('YYYY-MM-DD HH:mm:ssZ'),
},
}
} else if (resizeDirection.value === 'left') {
} else {
let newStartDate = dates.value[week] ? dayjs(dates.value[week][day]) : null
updateProperty = [fromCol!.title!]
Expand All @@ -479,7 +480,9 @@ const onResize = (event: MouseEvent) => {
return pk === newPk ? newRow : r
})
useDebouncedRowUpdate(newRow, updateProperty, false)
if (newRow) {
useDebouncedRowUpdate(newRow, updateProperty, false)
}
}
const onResizeEnd = () => {
Expand Down Expand Up @@ -786,7 +789,7 @@ const isDateSelected = (date: dayjs.Dayjs) => {
: false
"
@resize-start="onResizeStart"
@dblclick.stop="emit('expand-record', record)"
@dblclick.stop="emit('expandRecord', record)"
>
<template v-if="!isRowEmpty(record, displayField)">
<LazySmartsheetCalendarCell
Expand All @@ -798,10 +801,8 @@ const isDateSelected = (date: dayjs.Dayjs) => {
:underline="getFieldStyle(displayField).underline"
/>
</template>
<template v-for="(field, id) in fieldsWithoutDisplay">
<template v-for="(field, id) in fieldsWithoutDisplay" :key="id">
<LazySmartsheetCalendarCell
v-if="!isRowEmpty(record, field)"
:key="id"
v-model="record.row[field!.title!]"
:bold="getFieldStyle(field).bold"
:column="field"
Expand Down
26 changes: 12 additions & 14 deletions packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,26 +22,26 @@ const fields = inject(FieldsInj, ref())
const { fields: _fields } = useViewColumnsOrThrow()
const getFieldStyle = (field: ColumnType) => {
const fi = _fields.value.find((f) => f.title === field.title)
const getFieldStyle = (field: ColumnType | undefined) => {
const fi = _fields.value?.find((f) => f.title === field.title)
return {
underline: fi.underline,
bold: fi.bold,
italic: fi.italic,
underline: fi?.underline,
bold: fi?.bold,
italic: fi?.italic,
}
}
const fieldsWithoutDisplay = computed(() => fields.value.filter((f) => !isPrimary(f)))
const fieldsWithoutDisplay = computed(() => fields.value?.filter((f) => !isPrimary(f)))
// Calculate the dates of the week
const weekDates = computed(() => {
const startOfWeek = new Date(selectedDateRange.value.start!)
const endOfWeek = new Date(selectedDateRange.value.end!)
let startOfWeek = dayjs(selectedDateRange.value.start)
const endOfWeek = dayjs(selectedDateRange.value.end)
const datesArray = []
while (startOfWeek.getTime() <= endOfWeek.getTime()) {
datesArray.push(new Date(startOfWeek))
startOfWeek.setDate(startOfWeek.getDate() + 1)
while (startOfWeek.isBefore(endOfWeek) || startOfWeek.isSame(endOfWeek, 'day')) {
datesArray.push(dayjs(startOfWeek))
startOfWeek = startOfWeek.add(1, 'day')
}
return datesArray
})
Expand Down Expand Up @@ -592,10 +592,8 @@ const dropEvent = (event: DragEvent) => {
:underline="getFieldStyle(displayField).underline"
/>
</template>
<template v-for="(field, index) in fieldsWithoutDisplay">
<template v-for="(field, index) in fieldsWithoutDisplay" :key="index">
<LazySmartsheetCalendarCell
v-if="!isRowEmpty(record, field)"
:key="index"
v-model="record.row[field!.title!]"
:bold="getFieldStyle(field).bold"
:column="field"
Expand Down
23 changes: 13 additions & 10 deletions packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,17 +34,18 @@ const fields = inject(FieldsInj, ref())
const { fields: _fields } = useViewColumnsOrThrow()
const getFieldStyle = (field: ColumnType) => {
const fi = _fields.value.find((f) => f.title === field.title)
const getFieldStyle = (field: ColumnType | undefined) => {
if (!field) return { underline: false, bold: false, italic: false }
const fi = _fields.value?.find((f) => f.title === field.title)
return {
underline: fi.underline,
bold: fi.bold,
italic: fi.italic,
underline: fi?.underline,
bold: fi?.bold,
italic: fi?.italic,
}
}
const fieldsWithoutDisplay = computed(() => fields.value.filter((f) => !isPrimary(f)))
const fieldsWithoutDisplay = computed(() => fields.value?.filter((f) => !isPrimary(f)))
// Since it is a datetime Week view, we need to create a 2D array of dayjs objects to represent the hours in a day for each day in the week
const datesHours = computed(() => {
Expand Down Expand Up @@ -84,7 +85,11 @@ const recordsAcrossAllRange = computed<{
}
}
}>(() => {
if (!formattedData.value || !calendarRange.value || !container.value) return { records: [], count: {} }
if (!formattedData.value || !calendarRange.value || !container.value || !scrollContainer.value)
return {
records: [],
count: {},
}
const { scrollHeight } = scrollContainer.value
Expand Down Expand Up @@ -769,10 +774,8 @@ const viewMore = (hour: dayjs.Dayjs) => {
:underline="getFieldStyle(displayField).underline"
/>
</template>
<template v-for="(field, id) in fieldsWithoutDisplay">
<template v-for="(field, id) in fieldsWithoutDisplay" :key="id">
<LazySmartsheetCalendarCell
v-if="!isRowEmpty(record, field)"
:key="id"
v-model="record.row[field!.title!]"
:bold="getFieldStyle(field).bold"
:column="field"
Expand Down

0 comments on commit 0d5eba0

Please sign in to comment.