mirror/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-01-26 16:19:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-2431] chore: profile settings page UI improvement (#5838)

Browse Source 
* [WEB-2431] chore: timezone and language management.

* chore: remove project level timezone changes.

* chore: minor UI improvement.

* chore: minor improvements
This commit is contained in:
Prateek Shourya
2024-10-17 17:06:22 +05:30
committed by GitHub
parent e581ac890e
commit 173b49b4cb
4 changed files with 1466 additions and 803 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/types/src/project/projects.d.ts vendored
View File

@@ -54,6 +54,7 @@ export interface IProject {
updated_by: string;
workspace: IWorkspace | string;
workspace_detail: IWorkspaceLite;
timezone: string;
}
export interface IProjectLite {

416
web/app/profile/page.tsx
View File

@@ -6,14 +6,23 @@ import { Controller, useForm } from "react-hook-form";
import { ChevronDown, CircleUserRound } from "lucide-react";
import { Disclosure, Transition } from "@headlessui/react";
import type { IUser } from "@plane/types";
import { Button, CustomSelect, CustomSearchSelect, Input, TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";
import {
Button,
CustomSelect,
CustomSearchSelect,
Input,
TOAST_TYPE,
setPromiseToast,
setToast,
Tooltip,
} from "@plane/ui";
// components
import { DeactivateAccountModal } from "@/components/account";
import { LogoSpinner } from "@/components/common";
import { ImagePickerPopover, UserImageUploadModal, PageHead } from "@/components/core";
import { ProfileSettingContentWrapper } from "@/components/profile";
// constants
import { TIME_ZONES } from "@/constants/timezones";
import { TIME_ZONES, TTimezone } from "@/constants/timezones";
import { USER_ROLES } from "@/constants/workspace";
// helpers
import { getFileURL } from "@/helpers/file.helper";
@@ -107,10 +116,20 @@ const ProfileSettingsPage = observer(() => {
});
};
const getTimeZoneLabel = (timezone: TTimezone | undefined) => {
if (!timezone) return undefined;
return (
<div className="flex gap-1.5">
<span className="text-custom-text-400">{timezone.gmtOffset}</span>
<span className="text-custom-text-200">{timezone.name}</span>
</div>
);
};
const timeZoneOptions = TIME_ZONES.map((timeZone) => ({
value: timeZone.value,
query: timeZone.label + " " + timeZone.value,
content: timeZone.label,
query: timeZone.name + " " + timeZone.gmtOffset + " " + timeZone.value,
content: getTimeZoneLabel(timeZone),
}));
if (!currentUser)
@@ -143,14 +162,14 @@ const ProfileSettingsPage = observer(() => {
/>
<DeactivateAccountModal isOpen={deactivateAccountModal} onClose={() => setDeactivateAccountModal(false)} />
<form onSubmit={handleSubmit(onSubmit)}>
<div className="flex w-full flex-col gap-8">
<div className="flex w-full flex-col gap-6">
<div className="relative h-44 w-full">
<img
src={userCover ? getFileURL(userCover) : "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
className="h-44 w-full rounded-lg object-cover"
alt={currentUser?.first_name ?? "Cover image"}
/>
<div className="absolute -bottom-6 left-8 flex items-end justify-between">
<div className="absolute -bottom-6 left-6 flex items-end justify-between">
<div className="flex gap-3">
<div className="flex h-16 w-16 items-center justify-center rounded-lg bg-custom-background-90">
<button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
@@ -173,7 +192,6 @@ const ProfileSettingsPage = observer(() => {
</div>
</div>
</div>
<div className="absolute bottom-3 right-3 flex">
<Controller
control={control}
@@ -190,201 +208,207 @@ const ProfileSettingsPage = observer(() => {
/>
</div>
</div>
<div className="item-center mt-4 flex justify-between md:px-8">
<div className="item-center mt-6 flex justify-between">
<div className="flex flex-col">
<div className="item-center flex text-lg font-semibold text-custom-text-100">
<div className="item-center flex text-lg font-medium text-custom-text-200">
<span>{`${watch("first_name")} ${watch("last_name")}`}</span>
</div>
<span className="text-sm tracking-tight">{watch("email")}</span>
<span className="text-sm text-custom-text-300 tracking-tight">{watch("email")}</span>
</div>
{/* <Link href={`/profile/${currentUser.id}`}>
<span className="flex item-center gap-1 text-sm text-custom-primary-100 underline font-medium">
<ExternalLink className="h-4 w-4" />
Activity Overview
</span>
</Link> */}
</div>
<div className="grid grid-cols-1 gap-6 md:px-8 lg:grid-cols-2 2xl:grid-cols-3 pb-8">
<div className="flex flex-col gap-1">
<h4 className="text-sm">
First name<span className="text-red-500">*</span>
</h4>
<Controller
control={control}
name="first_name"
rules={{
required: "First name is required.",
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="first_name"
name="first_name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.first_name)}
placeholder="Enter your first name"
className={`w-full rounded-md ${errors.first_name ? "border-red-500" : ""}`}
maxLength={24}
autoComplete="on"
/>
<div className="flex flex-col gap-2">
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-x-6 gap-y-4">
<div className="flex flex-col gap-1">
<h4 className="text-sm font-medium text-custom-text-200">
First name<span className="text-red-500">*</span>
</h4>
<Controller
control={control}
name="first_name"
rules={{
required: "Please enter first name",
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="first_name"
name="first_name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.first_name)}
placeholder="Enter your first name"
className={`w-full rounded-md ${errors.first_name ? "border-red-500" : ""}`}
maxLength={24}
autoComplete="on"
/>
)}
/>
{errors.first_name && <span className="text-xs text-red-500">{errors.first_name.message}</span>}
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm font-medium text-custom-text-200">Last name</h4>
<Controller
control={control}
name="last_name"
render={({ field: { value, onChange, ref } }) => (
<Input
id="last_name"
name="last_name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.last_name)}
placeholder="Enter your last name"
className="w-full rounded-md"
maxLength={24}
autoComplete="on"
/>
)}
/>
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm font-medium text-custom-text-200">
Display name<span className="text-red-500">*</span>
</h4>
<Controller
control={control}
name="display_name"
rules={{
required: "Display name is required.",
validate: (value) => {
if (value.trim().length < 1) return "Display name can't be empty.";
if (value.split(" ").length > 1) return "Display name can't have two consecutive spaces.";
if (value.replace(/\s/g, "").length < 1)
return "Display name must be at least 1 character long.";
if (value.replace(/\s/g, "").length > 20)
return "Display name must be less than 20 characters long.";
return true;
},
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="display_name"
name="display_name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors?.display_name)}
placeholder="Enter your display name"
className={`w-full ${errors?.display_name ? "border-red-500" : ""}`}
maxLength={24}
/>
)}
/>
{errors?.display_name && (
<span className="text-xs text-red-500">{errors?.display_name?.message}</span>
)}
/>
{errors.first_name && <span className="text-xs text-red-500">Please enter first name</span>}
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm font-medium text-custom-text-200">
Email<span className="text-red-500">*</span>
</h4>
<Controller
control={control}
name="email"
rules={{
required: "Email is required.",
}}
render={({ field: { value, ref } }) => (
<Input
id="email"
name="email"
type="email"
value={value}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="Enter your email"
className={`w-full cursor-not-allowed rounded-md !bg-custom-background-90 ${
errors.email ? "border-red-500" : ""
}`}
autoComplete="on"
disabled
/>
)}
/>
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm font-medium text-custom-text-200">
Role<span className="text-red-500">*</span>
</h4>
<Controller
name="role"
control={control}
rules={{ required: "Role is required." }}
render={({ field: { value, onChange } }) => (
<CustomSelect
value={value}
onChange={onChange}
label={value ? value.toString() : "Select your role"}
buttonClassName={errors.role ? "border-red-500" : "border-none"}
className="rounded-md border-[0.5px] !border-custom-border-200"
optionsClassName="w-full"
input
>
{USER_ROLES.map((item) => (
<CustomSelect.Option key={item.value} value={item.value}>
{item.label}
</CustomSelect.Option>
))}
</CustomSelect>
)}
/>
{errors.role && <span className="text-xs text-red-500">Please select a role</span>}
</div>
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm">Last name</h4>
<Controller
control={control}
name="last_name"
render={({ field: { value, onChange, ref } }) => (
<Input
id="last_name"
name="last_name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.last_name)}
placeholder="Enter your last name"
className="w-full rounded-md"
maxLength={24}
autoComplete="on"
/>
)}
/>
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm">
Email<span className="text-red-500">*</span>
</h4>
<Controller
control={control}
name="email"
rules={{
required: "Email is required.",
}}
render={({ field: { value, ref } }) => (
<Input
id="email"
name="email"
type="email"
value={value}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="Enter your email"
className={`w-full cursor-not-allowed rounded-md !bg-custom-background-80 ${
errors.email ? "border-red-500" : ""
}`}
autoComplete="on"
</div>
<div className="flex flex-col gap-2 pt-4">
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-x-6 gap-y-4">
<div className="flex flex-col gap-1">
<h4 className="text-sm font-medium text-custom-text-200">
Timezone<span className="text-red-500">*</span>
</h4>
<Controller
name="user_timezone"
control={control}
rules={{ required: "Please select a timezone" }}
render={({ field: { value, onChange } }) => (
<CustomSearchSelect
value={value}
label={
value
? (getTimeZoneLabel(TIME_ZONES.find((t) => t.value === value)) ?? value)
: "Select a timezone"
}
options={timeZoneOptions}
onChange={onChange}
buttonClassName={errors.user_timezone ? "border-red-500" : ""}
className="rounded-md border-[0.5px] !border-custom-border-200"
optionsClassName="w-72"
input
/>
)}
/>
{errors.user_timezone && <span className="text-xs text-red-500">{errors.user_timezone.message}</span>}
</div>
<Tooltip tooltipContent="Coming soon" position="bottom">
<div className="flex flex-col gap-1">
<h4 className="text-sm font-medium text-custom-text-200">Language</h4>
<CustomSearchSelect
value="English (US)"
label="English (US)"
options={[]}
onChange={() => {}}
className="rounded-md bg-custom-background-90"
input
disabled
/>
)}
/>
</div>
</Tooltip>
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm">
Role<span className="text-red-500">*</span>
</h4>
<Controller
name="role"
control={control}
rules={{ required: "Role is required." }}
render={({ field: { value, onChange } }) => (
<CustomSelect
value={value}
onChange={onChange}
label={value ? value.toString() : "Select your role"}
buttonClassName={errors.role ? "border-red-500" : "border-none"}
className="rounded-md border-[0.5px] !border-custom-border-200"
optionsClassName="w-full"
input
>
{USER_ROLES.map((item) => (
<CustomSelect.Option key={item.value} value={item.value}>
{item.label}
</CustomSelect.Option>
))}
</CustomSelect>
)}
/>
{errors.role && <span className="text-xs text-red-500">Please select a role</span>}
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm">
Display name<span className="text-red-500">*</span>
</h4>
<Controller
control={control}
name="display_name"
rules={{
required: "Display name is required.",
validate: (value) => {
if (value.trim().length < 1) return "Display name can't be empty.";
if (value.split(" ").length > 1) return "Display name can't have two consecutive spaces.";
if (value.replace(/\s/g, "").length < 1)
return "Display name must be at least 1 characters long.";
if (value.replace(/\s/g, "").length > 20)
return "Display name must be less than 20 characters long.";
return true;
},
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="display_name"
name="display_name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors?.display_name)}
placeholder="Enter your display name"
className={`w-full ${errors?.display_name ? "border-red-500" : ""}`}
maxLength={24}
/>
)}
/>
{errors?.display_name && <span className="text-xs text-red-500">{errors?.display_name?.message}</span>}
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm">
Timezone<span className="text-red-500">*</span>
</h4>
<Controller
name="user_timezone"
control={control}
rules={{ required: "Time zone is required" }}
render={({ field: { value, onChange } }) => (
<CustomSearchSelect
value={value}
label={value ? (TIME_ZONES.find((t) => t.value === value)?.label ?? value) : "Select a timezone"}
options={timeZoneOptions}
onChange={onChange}
buttonClassName={errors.user_timezone ? "border-red-500" : "border-none"}
className="rounded-md border-[0.5px] !border-custom-border-200"
input
/>
)}
/>
{errors.role && <span className="text-xs text-red-500">Please select a time zone</span>}
</div>
<div className="flex items-center justify-between py-2">
<div className="flex items-center justify-between pt-6 pb-8">
<Button variant="primary" type="submit" loading={isLoading}>
{isLoading ? "Saving..." : "Save changes"}
</Button>
@@ -392,11 +416,11 @@ const ProfileSettingsPage = observer(() => {
</div>
</div>
</form>
<Disclosure as="div" className="border-t border-custom-border-100 md:px-8">
<Disclosure as="div" className="border-t border-custom-border-100">
{({ open }) => (
<>
<Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between py-4">
<span className="text-lg tracking-tight">Deactivate account</span>
<span className="text-lg font-medium tracking-tight">Deactivate account</span>
<ChevronDown className={`h-5 w-5 transition-all ${open ? "rotate-180" : ""}`} />
</Disclosure.Button>
<Transition
@@ -430,8 +454,4 @@ const ProfileSettingsPage = observer(() => {
);
});
// ProfileSettingsPage.getLayout = function getLayout(page: ReactElement) {
// return <ProfileSettingsLayout>{page}</ProfileSettingsLayout>;
// };
export default ProfileSettingsPage;

55
web/core/components/project/form.tsx
View File

@@ -16,6 +16,7 @@ import {
CustomEmojiIconPicker,
EmojiIconPickerTypes,
Tooltip,
// CustomSearchSelect,
} from "@plane/ui";
// components
import { Logo } from "@/components/common";
@@ -24,6 +25,7 @@ import { ImagePickerPopover } from "@/components/core";
import { PROJECT_UPDATED } from "@/constants/event-tracker";
import { NETWORK_CHOICES } from "@/constants/project";
// helpers
// import { TTimezone, TIME_ZONES } from "@/constants/timezones";
import { renderFormattedDate } from "@/helpers/date-time.helper";
import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
import { getFileURL } from "@/helpers/file.helper";
@@ -65,6 +67,21 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
},
});
// derived values
const currentNetwork = NETWORK_CHOICES.find((n) => n.key === project?.network);
// const getTimeZoneLabel = (timezone: TTimezone | undefined) => {
// if (!timezone) return undefined;
// return (
// <div className="flex gap-1.5">
// <span className="text-custom-text-400">{timezone.gmtOffset}</span>
// <span className="text-custom-text-200">{timezone.name}</span>
// </div>
// );
// };
// const timeZoneOptions = TIME_ZONES.map((timeZone) => ({
// value: timeZone.value,
// query: timeZone.name + " " + timeZone.gmtOffset + " " + timeZone.value,
// content: getTimeZoneLabel(timeZone),
// }));
const coverImage = watch("cover_image_url");
useEffect(() => {
@@ -76,12 +93,15 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [project, projectId]);
// handlers
const handleIdentifierChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { value } = event.target;
const alphanumericValue = value.replace(/[^a-zA-Z0-9]/g, "");
const formattedValue = alphanumericValue.toUpperCase();
setValue("identifier", formattedValue);
};
const handleUpdateChange = async (payload: Partial<IProject>) => {
if (!workspaceSlug || !project) return;
return updateProject(workspaceSlug.toString(), project.id, payload)
@@ -115,6 +135,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
});
});
};
const onSubmit = async (formData: IProject) => {
if (!workspaceSlug) return;
setIsLoading(true);
@@ -125,6 +146,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
description: formData.description,
cover_image_url: formData.cover_image_url,
logo_props: formData.logo_props,
// timezone: formData.timezone,
};
if (project.identifier !== formData.identifier)
@@ -139,7 +161,6 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
setIsLoading(false);
}, 300);
};
const currentNetwork = NETWORK_CHOICES.find((n) => n.key === project?.network);
return (
<form onSubmit={handleSubmit(onSubmit)}>
@@ -267,8 +288,8 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
)}
/>
</div>
<div className="flex w-full justify-between gap-10">
<div className="flex w-1/2 flex-col gap-1">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="flex flex-col gap-1">
<h4 className="text-sm">Project ID</h4>
<div className="relative">
<Controller
@@ -316,14 +337,13 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
<>{errors?.identifier?.message}</>
</span>
</div>
<div className="flex w-1/2 flex-col gap-1">
<div className="flex flex-col gap-1">
<h4 className="text-sm">Network</h4>
<Controller
name="network"
control={control}
render={({ field: { value, onChange } }) => {
const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === value);
return (
<CustomSelect
value={value}
@@ -361,6 +381,31 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
}}
/>
</div>
{/* <div className="flex flex-col gap-1 col-span-1 sm:col-span-2 xl:col-span-1">
<h4 className="text-sm">Project Timezone</h4>
<Controller
name="timezone"
control={control}
rules={{ required: "Please select a timezone" }}
render={({ field: { value, onChange } }) => (
<CustomSearchSelect
value={value}
label={
value
? (getTimeZoneLabel(TIME_ZONES.find((t) => t.value === value)) ?? value)
: "Select a timezone"
}
options={timeZoneOptions}
onChange={onChange}
buttonClassName={errors.timezone ? "border-red-500" : "border-none"}
className="rounded-md border-[0.5px] !border-custom-border-200"
optionsClassName="w-72"
input
/>
)}
/>
{errors.timezone && <span className="text-xs text-red-500">{errors.timezone.message}</span>}
</div> */}
</div>
<div className="flex items-center justify-between py-2">
<>

1797
web/core/constants/timezones.ts
View File

File diff suppressed because it is too large Load Diff