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

fix(nc-gui): disable ranges

pull/7753/head
DarkPhoenix2704 9 months ago
parent
9f3f66abd0
commit
891e357877
3 changed files with 59 additions and 32 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      packages/nc-gui/components/dlg/ViewCreate.vue
  2. 66
      packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
  3. 14
      packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue

11
packages/nc-gui/components/dlg/ViewCreate.vue
Unescape View File

@ -217,12 +217,14 @@ async function onSubmit() {
} }
} }
/*
const addCalendarRange = async () => { const addCalendarRange = async () => {
form.calendar_range.push({ form.calendar_range.push({
fk_from_column_id: viewSelectFieldOptions.value[0].value as string, fk_from_column_id: viewSelectFieldOptions.value[0].value as string,
fk_to_column_id: null, fk_to_column_id: null,
}) })
} }
*/
const isMetaLoading = ref(false) const isMetaLoading = ref(false)
@ -450,7 +452,7 @@ onMounted(async () => {
</div> </div>
</a-select-option> </a-select-option>
</NcSelect> </NcSelect>
<div <!-- <div
v-if="range.fk_to_column_id === null && isEeUI" v-if="range.fk_to_column_id === null && isEeUI"
class="cursor-pointer flex items-center text-gray-800 gap-1" class="cursor-pointer flex items-center text-gray-800 gap-1"
@click="range.fk_to_column_id = undefined" @click="range.fk_to_column_id = undefined"
@ -508,12 +510,13 @@ onMounted(async () => {
<component :is="iconMap.close" /> <component :is="iconMap.close" />
</NcButton> </NcButton>
</template> </template>
</div> </div> -->
<NcButton class="mt-2" size="small" type="secondary" @click="addCalendarRange"> <!-- <NcButton class="mt-2" size="small" type="secondary" @click="addCalendarRange">
<component :is="iconMap.plus" /> <component :is="iconMap.plus" />
Add another date field Add another date field
</NcButton> </NcButton> -->
</div>
</template> </template>
</a-form> </a-form>
<div v-else-if="!isNecessaryColumnsPresent" class="flex flex-row p-4 border-gray-200 border-1 gap-x-4 rounded-lg w-full"> <div v-else-if="!isNecessaryColumnsPresent" class="flex flex-row p-4 border-gray-200 border-1 gap-x-4 rounded-lg w-full">

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

@ -83,7 +83,7 @@ const calculateNewDates = ({
return { endDate, startDate } return { endDate, startDate }
} }
const getGridTime = (date: dayjs.Dayjs, round = false) => { /* const getGridTime = (date: dayjs.Dayjs, round = false) => {
const gridCalc = date.hour() * 60 + date.minute() const gridCalc = date.hour() * 60 + date.minute()
if (round) { if (round) {
return Math.ceil(gridCalc) return Math.ceil(gridCalc)
@ -97,9 +97,9 @@ const getGridTimeSlots = (from: dayjs.Dayjs, to: dayjs.Dayjs) => {
from: getGridTime(from, false), from: getGridTime(from, false),
to: getGridTime(to, true) - 1, to: getGridTime(to, true) - 1,
} }
} } */
const hasSlotForRecord = ( /* const hasSlotForRecord = (
record: Row, record: Row,
columnArray: Row[], columnArray: Row[],
dates: { dates: {
@ -132,9 +132,9 @@ const hasSlotForRecord = (
} }
} }
return true return true
} } */
const getMaxOfGrid = ( /* const getMaxOfGrid = (
{ {
fromDate, fromDate,
toDate, toDate,
@ -153,8 +153,8 @@ const getMaxOfGrid = (
} }
} }
return max return max
} } */
const isOverlaps = (row1: Row, row2: Row) => { /* const isOverlaps = (row1: Row, row2: Row) => {
const fromCol1 = row1.rowMeta.range?.fk_from_col const fromCol1 = row1.rowMeta.range?.fk_from_col
const toCol1 = row1.rowMeta.range?.fk_to_col const toCol1 = row1.rowMeta.range?.fk_to_col
const fromCol2 = row2.rowMeta.range?.fk_from_col const fromCol2 = row2.rowMeta.range?.fk_from_col
@ -177,9 +177,9 @@ const isOverlaps = (row1: Row, row2: Row) => {
}) })
return startDate1.isBetween(startDate2, endDate2, null, '[]') || endDate1.isBetween(startDate2, endDate2, null, '[]') return startDate1.isBetween(startDate2, endDate2, null, '[]') || endDate1.isBetween(startDate2, endDate2, null, '[]')
} } */
const getMaxOverlaps = ({ row, rowArray }: { row: Row; rowArray: Row[] }) => { /* const getMaxOverlaps = ({ row, rowArray }: { row: Row; rowArray: Row[] }) => {
let maxOverlaps = row.rowMeta.numberOfOverlaps let maxOverlaps = row.rowMeta.numberOfOverlaps
for (const record of rowArray) { for (const record of rowArray) {
if (isOverlaps(row, record)) { if (isOverlaps(row, record)) {
@ -190,7 +190,7 @@ const getMaxOverlaps = ({ row, rowArray }: { row: Row; rowArray: Row[] }) => {
} }
} }
return maxOverlaps return maxOverlaps
} } */
const recordsAcrossAllRange = computed<{ const recordsAcrossAllRange = computed<{
record: Row[] record: Row[]
@ -222,10 +222,10 @@ const recordsAcrossAllRange = computed<{
const perRecordHeight = 80 const perRecordHeight = 80
const columnArray: Array<Array<Row>> = [[]] /* const columnArray: Array<Array<Row>> = [[]]
const gridTimeMap = new Map() const gridTimeMap = new Map() */
const recordsByRange: Array<Row> = [] let recordsByRange: Array<Row> = []
calendarRange.value.forEach((range) => { calendarRange.value.forEach((range) => {
const fromCol = range.fk_from_col const fromCol = range.fk_from_col
@ -254,7 +254,7 @@ const recordsAcrossAllRange = computed<{
}) })
for (const record of sortedFormattedData) { for (const record of sortedFormattedData) {
const id = generateRandomNumber() const id = record.rowMeta.id ?? generateRandomNumber()
if (fromCol && endCol) { if (fromCol && endCol) {
const { endDate, startDate } = calculateNewDates({ const { endDate, startDate } = calculateNewDates({
@ -399,15 +399,41 @@ const recordsAcrossAllRange = computed<{
} }
} }
}) })
/*
recordsByRange.sort((a, b) => { recordsByRange.sort((a, b) => {
const fromColA = a.rowMeta.range?.fk_from_col const fromColA = a.rowMeta.range?.fk_from_col
const fromColB = b.rowMeta.range?.fk_from_col const fromColB = b.rowMeta.range?.fk_from_col
if (!fromColA || !fromColB) return 0 if (!fromColA || !fromColB) return 0
return dayjs(a.row[fromColA.title!]).isBefore(dayjs(b.row[fromColB.title!])) ? -1 : 1 return dayjs(a.row[fromColA.title!]).isBefore(dayjs(b.row[fromColB.title!])) ? -1 : 1
}) */
// We can't calculate the width & left of the records without knowing the number of records that overlap at a given time
// So we loop through the records again and calculate the width & left of the records based on the number of records that overlap at a given time
recordsByRange = recordsByRange.map((record) => {
// MaxOverlaps is the number of records that overlap at a given time
// overlapIndex is the index of the record in the list of records that overlap at a given time
let maxOverlaps = 1
let overlapIndex = 0
for (const minutes in overlaps) {
if (overlaps[minutes].id.includes(record.rowMeta.id!)) {
maxOverlaps = Math.max(maxOverlaps, overlaps[minutes].id.length - overlaps[minutes].overflowCount)
overlapIndex = Math.max(overlaps[minutes].id.indexOf(record.rowMeta.id!), overlapIndex)
}
}
const spacing = 0.25
const widthPerRecord = (100 - spacing * (maxOverlaps - 1)) / maxOverlaps
const leftPerRecord = (widthPerRecord + spacing) * overlapIndex
record.rowMeta.style = {
...record.rowMeta.style,
left: `${leftPerRecord - 0.08}%`,
width: `calc(${widthPerRecord}%)`,
}
return record
}) })
for (const record of recordsByRange) { // TODO: Rewrite the calculations for the style of the records
/* for (const record of recordsByRange) {
const fromCol = record.rowMeta.range?.fk_from_col const fromCol = record.rowMeta.range?.fk_from_col
const toCol = record.rowMeta.range?.fk_to_col const toCol = record.rowMeta.range?.fk_to_col
@ -449,8 +475,7 @@ const recordsAcrossAllRange = computed<{
columnArray.push([record]) columnArray.push([record])
} }
} }
for (const columnIndex in columnArray) {
for (const columnIndex in columnArray) {
for (const record of columnArray[columnIndex]) { for (const record of columnArray[columnIndex]) {
const recordRange = record.rowMeta.range const recordRange = record.rowMeta.range
const fromCol = recordRange?.fk_from_col const fromCol = recordRange?.fk_from_col
@ -476,7 +501,6 @@ const recordsAcrossAllRange = computed<{
record.rowMeta.overLapIteration = parseInt(columnIndex) + 1 record.rowMeta.overLapIteration = parseInt(columnIndex) + 1
} }
} }
for (const record of recordsByRange) { for (const record of recordsByRange) {
record.rowMeta.numberOfOverlaps = getMaxOverlaps({ record.rowMeta.numberOfOverlaps = getMaxOverlaps({
row: record, row: record,
@ -491,9 +515,7 @@ const recordsAcrossAllRange = computed<{
width: `${width.toFixed(2)}%`, width: `${width.toFixed(2)}%`,
left: `${left}%`, left: `${left}%`,
} }
} } */
console.log(columnArray)
return { return {
count: overlaps, count: overlaps,

14
packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue
Unescape View File

@ -93,7 +93,7 @@ const dateFieldOptions = computed<SelectProps['options']>(() => {
) )
}) })
const addCalendarRange = async () => { /* const addCalendarRange = async () => {
_calendar_ranges.value.push({ _calendar_ranges.value.push({
fk_from_column_id: dateFieldOptions.value![0].value as string, fk_from_column_id: dateFieldOptions.value![0].value as string,
fk_to_column_id: null, fk_to_column_id: null,
@ -109,7 +109,7 @@ const removeRange = async (id: number) => {
const saveCalendarRange = async (range: CalendarRangeType, value?) => { const saveCalendarRange = async (range: CalendarRangeType, value?) => {
range.fk_to_column_id = value range.fk_to_column_id = value
await saveCalendarRanges() await saveCalendarRanges()
} } */
</script> </script>
<template> <template>
@ -130,7 +130,7 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
</a-button> </a-button>
</div> </div>
<template #overlay> <template #overlay>
<div v-if="calendarRangeDropdown" class="w-full p-6 w-[36rem]" data-testid="nc-calendar-range-menu" @click.stop> <div v-if="calendarRangeDropdown" class="w-full p-6 w-[25rem]" data-testid="nc-calendar-range-menu" @click.stop>
<div <div
v-for="(range, id) in _calendar_ranges" v-for="(range, id) in _calendar_ranges"
:key="id" :key="id"
@ -165,7 +165,7 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
</a-select-option> </a-select-option>
</NcSelect> </NcSelect>
<div <!-- <div
v-if="range.fk_to_column_id === null && isEeUI" v-if="range.fk_to_column_id === null && isEeUI"
class="flex cursor-pointer flex text-gray-800 items-center gap-1" class="flex cursor-pointer flex text-gray-800 items-center gap-1"
data-testid="nc-calendar-range-add-end-date" data-testid="nc-calendar-range-add-end-date"
@ -209,14 +209,16 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
</NcButton> </NcButton>
</div> </div>
</template> </template>
<NcButton v-if="id !== 0" size="small" type="secondary" @click="removeRange(id)"> <NcButton v-if="id !== 0" size="small" type="secondary" @click="removeRange(id)">
<component :is="iconMap.close" /> <component :is="iconMap.close" />
</NcButton> </NcButton>
-->
</div> </div>
<NcButton class="mt-2" data-testid="nc-calendar-range-add-btn" size="small" type="secondary" @click="addCalendarRange"> <!-- <NcButton class="mt-2" data-testid="nc-calendar-range-add-btn" size="small" type="secondary" @click="addCalendarRange">
<component :is="iconMap.plus" /> <component :is="iconMap.plus" />
Add another date field Add another date field
</NcButton> </NcButton> -->
</div> </div>
</template> </template>
</NcDropdown> </NcDropdown>

Write Preview
Loading…
Cancel
Save