commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 2.2k Packages Projects Releases Wiki Activity

fix: language update functionality #29900 (#29901)

Browse Source 
* removed bug of language update work properly

* feat: implement general settings view and user form components for profile configuration

---------

Co-authored-by: Bandhan Majumder <133476557+bandhan-majumder@users.noreply.github.com>
This commit is contained in:
AYUSHKUMAR_21JE0209
2026-08-05 06:31:10 +00:00
committed by GitHub
co-authored by Bandhan Majumder
parent 5e3fe3cbe6
commit b2c28a23ab
2 changed files with 31 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/modules/settings/my-account/general-view.tsx
+15 -12
View File
@@ -18,7 +18,7 @@ import { TimezoneSelect } from "@calcom/web/modules/timezone/components/Timezone
import TravelScheduleModal from "@components/settings/TravelScheduleModal";
import { revalidateSettingsGeneral } from "app/(use-page-wrapper)/settings/(settings-layout)/my-account/general/actions";
import { useSession } from "next-auth/react";
import { useState } from "react";
import { useMemo, useState } from "react";
import { Controller, useForm } from "react-hook-form";
export type FormValues = {
@@ -89,15 +89,18 @@ const GeneralView = ({ user, travelSchedules }: GeneralViewProps) => {
{ value: 24, label: t("24_hour") },
];
const weekStartOptions = [
{ value: "Sunday", label: nameOfDay(localeProp, 0) },
{ value: "Monday", label: nameOfDay(localeProp, 1) },
{ value: "Tuesday", label: nameOfDay(localeProp, 2) },
{ value: "Wednesday", label: nameOfDay(localeProp, 3) },
{ value: "Thursday", label: nameOfDay(localeProp, 4) },
{ value: "Friday", label: nameOfDay(localeProp, 5) },
{ value: "Saturday", label: nameOfDay(localeProp, 6) },
];
const weekStartOptions = useMemo(
() => [
{ value: "Sunday", label: nameOfDay(language || localeProp, 0) },
{ value: "Monday", label: nameOfDay(language || localeProp, 1) },
{ value: "Tuesday", label: nameOfDay(language || localeProp, 2) },
{ value: "Wednesday", label: nameOfDay(language || localeProp, 3) },
{ value: "Thursday", label: nameOfDay(language || localeProp, 4) },
{ value: "Friday", label: nameOfDay(language || localeProp, 5) },
{ value: "Saturday", label: nameOfDay(language || localeProp, 6) },
],
[language, localeProp]
);
const formMethods = useForm<FormValues>({
defaultValues: {
@@ -278,7 +281,7 @@ const GeneralView = ({ user, travelSchedules }: GeneralViewProps) => {
<>{t("time_format")}</>
</Label>
<Select
value={value}
value={timeFormatOptions.find((option) => option.value === (typeof value === "object" ? value?.value : value)) || value}
options={timeFormatOptions}
onChange={(event) => {
if (event) formMethods.setValue("timeFormat", { ...event }, { shouldDirty: true });
@@ -300,7 +303,7 @@ const GeneralView = ({ user, travelSchedules }: GeneralViewProps) => {
<>{t("start_of_week")}</>
</Label>
<Select
value={value}
value={weekStartOptions.find((option) => option.value === (typeof value === "object" ? value?.value : value)) || value}
options={weekStartOptions}
onChange={(event) => {
if (event) formMethods.setValue("weekStart", { ...event }, { shouldDirty: true });
apps/web/modules/users/components/UserForm.tsx
+16 -12
View File
@@ -1,5 +1,6 @@
"use client";
import { useMemo } from "react";
import { formatToLocalizedDate } from "@calcom/lib/dayjs";
import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -71,22 +72,25 @@ export function UserForm({
onSubmit: (data: FormValues) => void;
submitLabel?: string;
}) {
const { t } = useLocale();
const { t, i18n: { language } } = useLocale();
const timeFormatOptions = [
{ value: 12, label: t("12_hour") },
{ value: 24, label: t("24_hour") },
];
const weekStartOptions = [
{ value: "Sunday", label: nameOfDay(localeProp, 0) },
{ value: "Monday", label: nameOfDay(localeProp, 1) },
{ value: "Tuesday", label: nameOfDay(localeProp, 2) },
{ value: "Wednesday", label: nameOfDay(localeProp, 3) },
{ value: "Thursday", label: nameOfDay(localeProp, 4) },
{ value: "Friday", label: nameOfDay(localeProp, 5) },
{ value: "Saturday", label: nameOfDay(localeProp, 6) },
];
const weekStartOptions = useMemo(
() => [
{ value: "Sunday", label: nameOfDay(language || localeProp, 0) },
{ value: "Monday", label: nameOfDay(language || localeProp, 1) },
{ value: "Tuesday", label: nameOfDay(language || localeProp, 2) },
{ value: "Wednesday", label: nameOfDay(language || localeProp, 3) },
{ value: "Thursday", label: nameOfDay(language || localeProp, 4) },
{ value: "Friday", label: nameOfDay(language || localeProp, 5) },
{ value: "Saturday", label: nameOfDay(language || localeProp, 6) },
],
[language, localeProp]
);
const userRoleOptions = [
{ value: "USER", label: t("user") },
@@ -257,7 +261,7 @@ export function UserForm({
<>{t("time_format")}</>
</Label>
<Select
value={value}
value={timeFormatOptions.find((option) => option.value === (typeof value === "object" ? value?.value : value)) || value}
options={timeFormatOptions}
onChange={(event) => {
if (event) form.setValue("timeFormat", { ...event });
@@ -275,7 +279,7 @@ export function UserForm({
<>{t("start_of_week")}</>
</Label>
<Select
value={value}
value={weekStartOptions.find((option) => option.value === (typeof value === "object" ? value?.value : value)) || value}
options={weekStartOptions}
onChange={(event) => {
if (event) form.setValue("weekStart", { ...event });