mythic-insight/calcom
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

Add ability to select first day of week

Browse source
This commit is contained in:
Heath Daniel 2021-05-17 18:10:40 -04:00
parent 8e1d688ae2
commit 71e50c58d6
4 changed files with 34 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
pages/[user]/[type].tsx
View file

@ -86,7 +86,12 @@ export default function Type(props) {
}
// Create placeholder elements for empty days in first week
const weekdayOfFirst = dayjs().month(selectedMonth).date(1).day();
let weekdayOfFirst = dayjs().month(selectedMonth).date(1).day();
if (props.user.weekStart === 'Monday') {
weekdayOfFirst -= 1;
if (weekdayOfFirst < 0)
weekdayOfFirst = 6;
}
const emptyDays = Array(weekdayOfFirst).fill(null).map((day, i) =>
<div key={`e-${i}`} className={"text-center w-10 h-10 rounded-full mx-auto"}>
{null}
@ -283,9 +288,11 @@ export default function Type(props) {
</div>
</div>
<div className="grid grid-cols-7 gap-y-4 text-center">
<div className="uppercase text-gray-400 text-xs tracking-widest">
{props.user.weekStart !== 'Monday' ? (
<div className="uppercase text-gray-400 text-xs tracking-widest">
Sun
</div>
) : null}
<div className="uppercase text-gray-400 text-xs tracking-widest">
Mon
</div>
@ -304,6 +311,11 @@ export default function Type(props) {
<div className="uppercase text-gray-400 text-xs tracking-widest">
Sat
</div>
{props.user.weekStart === 'Monday' ? (
<div className="uppercase text-gray-400 text-xs tracking-widest">
Sun
</div>
) : null}
{calendar}
</div>
</div>
@ -358,7 +370,8 @@ export async function getServerSideProps(context) {
eventTypes: true,
startTime: true,
timeZone: true,
endTime: true
endTime: true,
weekStart: true,
}
});

2
pages/api/user/profile.ts
View file

@ -28,6 +28,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
const description = req.body.description;
const avatar = req.body.avatar;
const timeZone = req.body.timeZone;
const weekStart = req.body.weekStart;
const updateUser = await prisma.user.update({
where: {
@ -39,6 +40,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
avatar,
bio: description,
timeZone: timeZone,
weekStart: weekStart,
},
});

16
pages/settings/profile.tsx
View file

@ -20,6 +20,7 @@ export default function Settings(props) {
const avatarRef = useRef<HTMLInputElement>();
const [ selectedTimeZone, setSelectedTimeZone ] = useState({ value: props.user.timeZone });
const [ selectedWeekStartDay, setSelectedWeekStartDay ] = useState(props.user.weekStart || 'Sunday');
if (loading) {
return <p className="text-gray-400">Loading...</p>;
@ -35,12 +36,13 @@ export default function Settings(props) {
const enteredDescription = descriptionRef.current.value;
const enteredAvatar = avatarRef.current.value;
const enteredTimeZone = selectedTimeZone.value;
const enteredWeekStartDay = selectedWeekStartDay;
// TODO: Add validation
const response = await fetch('/api/user/profile', {
method: 'PATCH',
body: JSON.stringify({username: enteredUsername, name: enteredName, description: enteredDescription, avatar: enteredAvatar, timeZone: enteredTimeZone}),
body: JSON.stringify({username: enteredUsername, name: enteredName, description: enteredDescription, avatar: enteredAvatar, timeZone: enteredTimeZone, weekStart: enteredWeekStartDay}),
headers: {
'Content-Type': 'application/json'
}
@ -102,6 +104,17 @@ export default function Settings(props) {
<TimezoneSelect id="timeZone" value={selectedTimeZone} onChange={setSelectedTimeZone} className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md" />
</div>
</div>
<div>
<label htmlFor="weekStart" className="block text-sm font-medium text-gray-700">
First Day of Week
</label>
<div className="mt-1">
<select id="weekStart" value={selectedWeekStartDay} onChange={e => setSelectedWeekStartDay(e.target.value)} className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
</select>
</div>
</div>
</div>
<div className="mt-6 flex-grow lg:mt-0 lg:ml-6 lg:flex-grow-0 lg:flex-shrink-0">
@ -175,6 +188,7 @@ export async function getServerSideProps(context) {
bio: true,
avatar: true,
timeZone: true,
weekStart: true,
}
});

1
prisma/schema.prisma
View file

@ -39,6 +39,7 @@ model User {
bio String?
avatar String?
timeZone String @default("Europe/London")
weekStart String? @default("Sunday")
startTime Int @default(0)
endTime Int @default(1440)
createdDate DateTime @default(now()) @map(name: "created")