Skip to content

Commit ef66d9e

Browse files
jho44jho44
committed
mark row as available updates ui properly
1 parent 02e1a09 commit ef66d9e

File tree

10 files changed

+107
-171
lines changed

10 files changed

+107
-171
lines changed

‎src/lib/components/Calendar/Editor.svelte

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,18 +25,22 @@
2525
2626
const clickOnSave = async () => {
2727
try {
28-
await markRowAsAvailable({
28+
const newRow = await markRowAsAvailable({
2929
unsavedRow: unsavedRows[i],
3030
timeZone
3131
});
32-
dispatch('markedRow');
32+
33+
dispatch('markedRow', {
34+
i,
35+
newRow
36+
});
3337
} catch (err) {
3438
console.log(err);
3539
if (!(err instanceof Response)) {
3640
dispatch('markBadTime');
3741
}
3842
39-
// alert('Something went wrong with saving'); // TODO: come up with better UI for showing err
43+
alert('Something went wrong with saving'); // TODO: come up with better UI for showing err
4044
console.error('Something went wrong with marking row as available', err);
4145
}
4246
};

‎src/lib/components/Calendar/ScheduleTable.svelte

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
<script lang="ts">
22
import { EMOTICONS_REVERSE } from '$lib/constants';
3-
import {
4-
getRowColor,
5-
isAvailableOnRow,
6-
markRowUnavailableLocally,
7-
requestToMarkOneRow
8-
} from '$lib/logics/Calendar/ScheduleTable/logic';
3+
import { getRowColor, isAvailableOnRow } from '$lib/logics/Calendar/ScheduleTable/logic';
4+
import { requestToMarkOneRow } from '$lib/logics/Calendar/_shared/utils';
95
import type { Row, Unavailable } from '$lib/types';
106
import { AvailabilityStatus } from '@prisma/client';
117
import { createEventDispatcher, tick } from 'svelte';
@@ -174,7 +170,10 @@
174170
row: { ...displayedRows[i], emoticons: e.detail }
175171
});
176172
}}
177-
on:markedRow={() => dispatch('markedRow')}
173+
on:markedRow={(e) => {
174+
dispatch('markedRow:available', e.detail);
175+
closeEditor(i);
176+
}}
178177
/>
179178
{/if}
180179
{/each}
@@ -183,15 +182,14 @@
183182
<style>
184183
table {
185184
border-collapse: collapse;
186-
border: 1px solid #dddddd;
187185
}
188186
#schedule {
189187
width: 100%;
190188
}
191189
#schedule td {
192190
padding: 0.4rem 0rem;
193191
text-align: center;
194-
border-right: 1px solid #dddddd;
192+
border: 1px solid #dddddd;
195193
}
196194
#schedule td.day,
197195
#schedule td.date {

‎src/lib/logics/Calendar/Editor/logic.ts

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { destructRange } from '$lib/parse';
22
import type { Row } from '$lib/types';
33
import { AvailabilityStatus } from '@prisma/client';
44
import { DateTime } from 'luxon';
5-
import { requestToMarkOneRow } from '../ScheduleTable/logic';
6-
import type { AvailRangeParts } from '../Wrapper/types';
5+
import type { AvailRangeParts } from '../_shared/types';
6+
import { requestToMarkOneRow, extractAvailRange } from '../_shared/utils';
77

88
export const toggleEmoticon = ({
99
i,
@@ -130,7 +130,7 @@ export const markRowAsAvailable = async ({
130130
const startTime = availabilityValidation.val.startTime;
131131
const endTime = availabilityValidation.val.endTime;
132132

133-
await requestToMarkOneRow({
133+
const newRowContents = await requestToMarkOneRow({
134134
status: AvailabilityStatus.AVAILABLE,
135135
displayedRow: unsavedRow,
136136
availableDetails: {
@@ -139,4 +139,18 @@ export const markRowAsAvailable = async ({
139139
availRangeParts
140140
}
141141
});
142+
143+
return {
144+
...unsavedRow,
145+
notes: newRowContents.notes,
146+
availRange: extractAvailRange({
147+
dbDate: {
148+
status: AvailabilityStatus.AVAILABLE,
149+
startTime: new Date(newRowContents.startTime),
150+
endTime: new Date(newRowContents.endTime)
151+
},
152+
timeZone
153+
}),
154+
...destructRange(unsavedRow.availRange)
155+
};
142156
};

‎src/lib/logics/Calendar/ScheduleTable/logic.ts

Lines changed: 0 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import type { Row, Unavailable } from '$lib/types';
22
import { writeReq } from '$lib/utils';
33
import { AvailabilityStatus } from '@prisma/client';
4-
import type { DateTime } from 'luxon';
54
import { tick } from 'svelte';
6-
import type { AvailRangeParts } from '../Wrapper/types';
75
import { UNAVAILABLE } from '../_shared/constants';
86
import { LIGHT_BLUE, LIGHT_GRAY, WHITE } from './constants';
97

@@ -28,28 +26,6 @@ export const getRowColor = ({
2826
export const isAvailableOnRow = (row: Row) =>
2927
!!row.availRange && !UNAVAILABLE.includes(row.availRange);
3028

31-
export const updateRowColors = ({
32-
rowColors,
33-
rows,
34-
expandedRowInds
35-
}: {
36-
rowColors: string[];
37-
rows: Row[];
38-
expandedRowInds: Set<number>;
39-
}) => {
40-
const numRows = rows.length;
41-
[...Array(21).keys()].map((_, i) => {
42-
tick().then(() => {
43-
rowColors[i] = getRowColor({
44-
i,
45-
numRows,
46-
isAvailable: isAvailableOnRow(rows[i]),
47-
isRowExpanded: expandedRowInds.has(i)
48-
});
49-
});
50-
});
51-
};
52-
5329
export const markRowUnavailableLocally = ({
5430
i,
5531
displayedRows,
@@ -65,113 +41,13 @@ export const markRowUnavailableLocally = ({
6541
return displayedRows;
6642
};
6743

68-
// const updateDisplayedRow = async ({
69-
// i,
70-
// response,
71-
// startTime,
72-
// endTime,
73-
// status,
74-
// displayedRows,
75-
// dbRows,
76-
// availRangeParts
77-
// }: {
78-
// i: number;
79-
// response: Response;
80-
// startTime: DateTime;
81-
// endTime: DateTime;
82-
// status: AvailabilityStatus;
83-
// displayedRows: Row[];
84-
// dbRows: Row[];
85-
// availRangeParts: AvailRangeParts;
86-
// }) => {
87-
// await invalidate('data:calendar');
88-
// const { notes } = await response.json();
89-
// let newAvailRange: AvailabilityStatus | string = status;
90-
// if (status === AvailabilityStatus.AVAILABLE)
91-
// newAvailRange = `${dateTo12Hour(startTime.toLocal())}-${dateTo12Hour(endTime.toLocal())}`;
92-
93-
// displayedRows[i] = {
94-
// ...displayedRows[i],
95-
// notes,
96-
// availRange: newAvailRange,
97-
// ...availRangeParts
98-
// };
99-
// dbRows[i] = { ...displayedRows[i] };
100-
101-
// // updateRowColors();
102-
// };
103-
104-
export const requestToMarkOneRow = async ({
105-
status,
106-
displayedRow,
107-
availableDetails
108-
}: {
109-
status: AvailabilityStatus;
110-
displayedRow: Row;
111-
availableDetails: {
112-
startTime: DateTime;
113-
endTime: DateTime;
114-
availRangeParts: AvailRangeParts;
115-
} | null;
116-
}) => {
117-
const response = await writeReq('/db', {
118-
type: 'upsertDate',
119-
status,
120-
notes: displayedRow.notes,
121-
emoticons: Array.from(displayedRow.emoticons).join(','),
122-
monthDay: displayedRow.monthDay,
123-
...(status === AvailabilityStatus.AVAILABLE && !!availableDetails
124-
? {
125-
startTime: availableDetails.startTime.toJSDate(),
126-
endTime: availableDetails.endTime.toJSDate()
127-
}
128-
: {})
129-
});
130-
131-
const payload = await response.json()
132-
if (response.status === 200) return payload;
133-
134-
throw new Error((payload as Error).message);
135-
};
136-
13744
const requestToMarkMultipleRowsAsBusy = async (monthDays: string[]) => {
13845
await writeReq('/db', {
13946
type: 'scheduleMultipleBusy',
14047
days: monthDays
14148
});
14249
};
14350

144-
// export const markRowAsUnavailable = async ({
145-
// i,
146-
// displayedRows,
147-
// // dbRows,
148-
// openedRows,
149-
// status
150-
// }: {
151-
// i: number;
152-
// displayedRows: Row[];
153-
// // dbRows: Row[];
154-
// openedRows: Set<number>;
155-
// status: Unavailable;
156-
// }) => {
157-
// markRowUnavailableLocally({ i, displayedRows, status });
158-
159-
// // try {
160-
// // await requestToMarkOneRow({
161-
// // i,
162-
// // status,
163-
// // // dbRows,
164-
// // displayedRows,
165-
// // availableDetails: null
166-
// // });
167-
// // closeEditor({ i, openedRows });
168-
// // } catch (err) {
169-
// // console.error(err);
170-
// // console.error('Something went wrong with marking row as unavailable');
171-
// // throw new Error();
172-
// // }
173-
// };
174-
17551
export const markUnspecifiedRowsAsBusy = async ({
17652
displayedRows,
17753
dbRows

‎src/lib/logics/Calendar/Wrapper/logic.ts

Lines changed: 6 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,12 @@
11
import { DAYS } from '$lib/constants';
2-
import type { Row } from '$lib/types';
3-
import { dateTo12Hour, toLocalTimezone } from '$lib/date';
42
import { destructRange } from '$lib/parse';
5-
6-
import { UNAVAILABLE } from '$lib/logics/Calendar/_shared/constants';
3+
import type { Row } from '$lib/types';
74
import { AvailabilityStatus, type AvailabilityDate } from '@prisma/client';
5+
import { UNAVAILABLE } from '../_shared/constants';
6+
import { extractAvailRange } from '../_shared/utils';
87
import type { AvailabilityDates } from './types';
98

10-
const extractAvailRange = ({
11-
dbDate,
12-
timeZone
13-
}: {
14-
dbDate: AvailabilityDate;
15-
timeZone: string;
16-
}) => {
17-
if (UNAVAILABLE.includes(dbDate.status) || !dbDate.startTime || !dbDate.endTime)
18-
return dbDate.status;
19-
20-
return `${dateTo12Hour(toLocalTimezone(dbDate.startTime, timeZone))}-${dateTo12Hour(
21-
toLocalTimezone(dbDate.endTime, timeZone)
22-
)}`;
23-
};
24-
25-
const initRow = ({
9+
const convertAvailabilityDateToRow = ({
2610
dbDate,
2711
timeZone
2812
}: {
@@ -69,7 +53,7 @@ const initRow = ({
6953
/*
7054
init rows with next 21 days, including today
7155
*/
72-
const initRows = ({dbDates, timeZone}: { dbDates: AvailabilityDates; timeZone: string }) => {
56+
const initRows = ({ dbDates, timeZone }: { dbDates: AvailabilityDates; timeZone: string }) => {
7357
const now = new Date();
7458
return [...Array(21).keys()].map((x) => {
7559
const date = new Date(new Date().setDate(now.getDate() + x));
@@ -79,7 +63,7 @@ const initRows = ({dbDates, timeZone}: { dbDates: AvailabilityDates; timeZone: s
7963
return {
8064
englishDay,
8165
monthDay,
82-
...initRow({dbDate: dbDates?.[monthDay], timeZone})
66+
...convertAvailabilityDateToRow({ dbDate: dbDates?.[monthDay], timeZone })
8367
};
8468
});
8569
};
@@ -92,12 +76,10 @@ export const initVals = (dbVals: { dbDates: AvailabilityDates; timeZone: string
9276
emoticons: new Set(r.emoticons)
9377
// availRange: r.availRange === 'Busy' ? '' : r.availRange // edit on “busy” clears text box
9478
}));
95-
const unsavedInds: number[] = [];
9679

9780
return {
9881
dbRows,
9982
rowsOnMount,
10083
displayedRows,
101-
unsavedInds
10284
};
10385
};

‎src/lib/logics/Calendar/Wrapper/types.ts

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,3 @@ import type { AvailabilityDate } from '@prisma/client';
1414
export type AvailabilityDates = {
1515
[key: string]: AvailabilityDate;
1616
};
17-
18-
export type AvailRangeParts = {
19-
startHr?: number;
20-
startMin?: number;
21-
endHr?: number;
22-
endMin?: number;
23-
};

‎src/lib/logics/Calendar/_shared/types.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,10 @@ export type CircleInfo = {
1111
};
1212
}[];
1313
}[];
14+
15+
export type AvailRangeParts = {
16+
startHr?: number;
17+
startMin?: number;
18+
endHr?: number;
19+
endMin?: number;
20+
};

0 commit comments

Comments
 (0)