danak/danak-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create project fix design select project

Browse Source
This commit is contained in:
hamid zarghami
2026-06-16 14:39:56 +03:30
parent 90cc91ac86
commit 8518662eee
1 changed files with 16 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/taskmanager/project/components/CreateProjectSidebar.tsx
+16 -61
View File
@@ -1,5 +1,5 @@
import { FC, useRef, useState } from "react";
import { CloseCircle, Gallery } from "iconsax-react";
import { FC, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import Select from "../../../../components/Select";
import SwitchComponent from "../../../../components/Switch";
@@ -19,8 +19,6 @@ const BACKGROUND_PRESETS = [
"linear-gradient(45deg, #3f2b96, #a8c0ff)",
"linear-gradient(45deg, #7f7fd5, #91eae4)",
"linear-gradient(45deg, #2c3e50, #4ca1af)",
"linear-gradient(45deg, #1cb5e0, #000851)",
"linear-gradient(45deg, #0052d4, #4364f7)",
] as const;
const CreateProjectSidebar: FC = () => {
@@ -31,18 +29,13 @@ const CreateProjectSidebar: FC = () => {
const [selectedColor, setSelectedColor] = useState("#A8E6CF");
const [selectedUsers, setSelectedUsers] = useState<SelectedUser[]>([]);
const [userSelectValue, setUserSelectValue] = useState("");
const [selectedBackground, setSelectedBackground] = useState<string>(
BACKGROUND_PRESETS[0],
);
const [selectedBackground, setSelectedBackground] = useState<string>(BACKGROUND_PRESETS[0]);
const [backgroundImage, setBackgroundImage] = useState<File | null>(null);
const fileInputRef = useRef<HTMLInputElement>(null);
const userItems =
getUsers.data?.data?.users
?.filter(
(user: UserItemType) =>
!selectedUsers.some((selected) => selected.id === user.id),
)
?.filter((user: UserItemType) => !selectedUsers.some((selected) => selected.id === user.id))
.map((user: UserItemType) => ({
label: `${user.firstName} ${user.lastName}`,
value: user.id,
@@ -52,15 +45,10 @@ const CreateProjectSidebar: FC = () => {
const value = e.target.value;
if (!value) return;
const user = getUsers.data?.data?.users?.find(
(item: UserItemType) => item.id === value,
);
const user = getUsers.data?.data?.users?.find((item: UserItemType) => item.id === value);
if (user) {
setSelectedUsers((prev) => [
...prev,
{ id: user.id, name: `${user.firstName} ${user.lastName}` },
]);
setSelectedUsers((prev) => [...prev, { id: user.id, name: `${user.firstName} ${user.lastName}` }]);
}
setUserSelectValue("");
@@ -70,9 +58,7 @@ const CreateProjectSidebar: FC = () => {
setSelectedUsers((prev) => prev.filter((user) => user.id !== id));
};
const handleBackgroundImageChange = (
event: React.ChangeEvent<HTMLInputElement>,
) => {
const handleBackgroundImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0] ?? null;
setBackgroundImage(file);
};
@@ -88,33 +74,16 @@ const CreateProjectSidebar: FC = () => {
</div>
<div className="mt-8">
<Select
label={t("taskmanager.users")}
placeholder={t("taskmanager.select_user")}
items={userItems}
value={userSelectValue}
onChange={handleUserSelect}
className="border"
/>
<Select label={t("taskmanager.users")} placeholder={t("taskmanager.select_user")} items={userItems} value={userSelectValue} onChange={handleUserSelect} className="border" />
<div className="mt-3 border border-dashed border-border rounded-xl p-4 flex gap-2 flex-wrap min-h-[52px]">
{selectedUsers.length === 0 ? (
<div className="text-description w-full text-center">
{t("taskmanager.no_users_added")}
</div>
<div className="text-description w-full text-center">{t("taskmanager.no_users_added")}</div>
) : (
selectedUsers.map((user) => (
<div
key={user.id}
className="bg-[#EBEEF5] flex gap-2 text-xs items-center px-2 py-2 rounded-lg"
>
<div key={user.id} className="bg-[#EBEEF5] flex gap-2 text-xs items-center px-2 py-2 rounded-lg">
<div>{user.name}</div>
<CloseCircle
variant="Bold"
className="size-4 cursor-pointer"
color="red"
onClick={() => handleRemoveUser(user.id)}
/>
<CloseCircle variant="Bold" className="size-4 cursor-pointer" color="red" onClick={() => handleRemoveUser(user.id)} />
</div>
))
)}
@@ -123,16 +92,15 @@ const CreateProjectSidebar: FC = () => {
<div className="mt-8">
<div className="text-sm mb-3">{t("taskmanager.background")}</div>
<div className="grid grid-cols-4 gap-2">
<div className="flex flex-wrap gap-2">
{BACKGROUND_PRESETS.map((background) => (
<button
key={background}
type="button"
className="h-8 rounded-md border"
className="w-20 h-10 border"
style={{
background,
borderColor:
selectedBackground === background ? "#000" : "#E2E8F0",
borderColor: selectedBackground === background ? "#000" : "#E2E8F0",
}}
onClick={() => setSelectedBackground(background)}
/>
@@ -142,10 +110,7 @@ const CreateProjectSidebar: FC = () => {
<div className="mt-8">
<div className="text-sm mb-3">{t("taskmanager.choose_color")}</div>
<WorkspaceColorPicker
selectedColor={selectedColor}
onChange={setSelectedColor}
/>
<WorkspaceColorPicker selectedColor={selectedColor} onChange={setSelectedColor} />
</div>
<div className="mt-8">
@@ -156,19 +121,9 @@ const CreateProjectSidebar: FC = () => {
className="w-full min-h-[112px] border border-dashed border-border rounded-xl flex flex-col items-center justify-center text-description px-4"
>
<Gallery size={26} color="#8C90A3" />
<div className="mt-2 text-xs text-center">
{backgroundImage
? backgroundImage.name
: t("taskmanager.upload_background")}
</div>
<div className="mt-2 text-xs text-center">{backgroundImage ? backgroundImage.name : t("taskmanager.upload_background")}</div>
</button>
<input
ref={fileInputRef}
type="file"
accept="image/*"
className="hidden"
onChange={handleBackgroundImageChange}
/>
<input ref={fileInputRef} type="file" accept="image/*" className="hidden" onChange={handleBackgroundImageChange} />
</div>
</div>
);