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

manage users

Browse Source
This commit is contained in:
hamid zarghami
2026-06-17 10:40:59 +03:30
parent a03a147d12
commit 908f5e72ed
9 changed files with 214 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Input.tsx
+83 -93
View File
@@ -1,115 +1,105 @@
import { FC, InputHTMLAttributes, useEffect, useState } from 'react'
import { clx } from '../helpers/utils';
import EyeIcon from '../assets/images/eye.svg'
import { SearchNormal } from 'iconsax-react';
import Error from './Error';
import { SearchNormal } from "iconsax-react";
import { FC, InputHTMLAttributes, useEffect, useState } from "react";
import EyeIcon from "../assets/images/eye.svg";
import { clx } from "../helpers/utils";
import Error from "./Error";
type Variant = "floating_outlined" | "primary" | "search";
type Props = {
label?: string;
className?: string;
variant?: Variant;
error_text?: string;
onEnter?: () => void;
unit?: string;
seprator?: boolean;
isNotRequired?: boolean;
onChangeSearchFinal?: (value: string) => void;
} & InputHTMLAttributes<HTMLInputElement>
label?: string;
className?: string;
variant?: Variant;
error_text?: string;
onEnter?: () => void;
unit?: string;
seprator?: boolean;
isNotRequired?: boolean;
onChangeSearchFinal?: (value: string) => void;
labelClassName?: string;
} & InputHTMLAttributes<HTMLInputElement>;
const formatNumber = (value: string | number): string => {
if (!value) return '';
const inputValue = String(value).replace(/,/g, '');
return inputValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
if (!value) return "";
const inputValue = String(value).replace(/,/g, "");
return inputValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};
const Input: FC<Props> = (props: Props) => {
const [formattedValue, setFormattedValue] = useState<string>(props.value ? formatNumber(props.value as string) : "");
const [formattedValue, setFormattedValue] = useState<string>(
props.value ? formatNumber(props.value as string) : ''
);
const [showPassword, setShowPassword] = useState<boolean>(false);
const [search, setSearch] = useState<string>("");
const [showPassword, setShowPassword] = useState<boolean>(false)
const [search, setSearch] = useState<string>('')
const inputClass = clx(
"w-full h-10 text-black block px-4 text-xs rounded-xl border border-border",
props.readOnly && "bg-gray-100 border-0 text-description",
props.variant === "search" && "bg-[#EEF0F7] border-0 ps-10",
props.className,
);
const inputClass = clx(
'w-full h-10 text-black block px-4 text-xs rounded-xl border border-border',
props.readOnly && 'bg-gray-100 border-0 text-description',
props.variant === 'search' && 'bg-[#EEF0F7] border-0 ps-10',
props.className
);
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
if (props.seprator) {
const inputValue = event.target.value.replace(/,/g, ""); // حذف کاماها
const formatted = formatNumber(inputValue);
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
if (props.seprator) {
const inputValue = event.target.value.replace(/,/g, ''); // حذف کاماها
const formatted = formatNumber(inputValue);
// به‌روزرسانی مقدار قالب‌بندی‌شده
setFormattedValue(formatted);
// به‌روزرسانی مقدار قالب‌بندی‌شده
setFormattedValue(formatted);
// ارسال مقدار خام به `onChange` والد
props.onChange?.({
...event,
target: {
...event.target,
value: inputValue,
},
});
} else {
props.onChange?.(event);
}
};
// ارسال مقدار خام به `onChange` والد
props.onChange?.({
...event,
target: {
...event.target,
value: inputValue,
},
});
} else {
props.onChange?.(event);
}
};
useEffect(() => {
if (props.value) {
setFormattedValue(formatNumber(props.value as string));
} else {
setFormattedValue("");
}
}, [props.value]);
useEffect(() => {
if (props.value) {
setFormattedValue(formatNumber(props.value as string));
} else {
setFormattedValue('');
}
}, [props.value])
useEffect(() => {
if (props.variant === "search" && props.onChangeSearchFinal) {
const timeout = setTimeout(() => {
props.onChangeSearchFinal?.(search);
}, 1000);
return () => clearTimeout(timeout);
}
}, [search, props]);
useEffect(() => {
if (props.variant === 'search' && props.onChangeSearchFinal) {
const timeout = setTimeout(() => {
props.onChangeSearchFinal?.(search)
}, 1000)
return () => clearTimeout(timeout)
}
}, [search, props])
return (
<div className="w-full">
<label className={clx("text-sm", props.labelClassName)}>{props.label}</label>
<div className="w-full relative mt-1">
<input
{...props}
onChange={(e) => {
setSearch(e.target.value);
handleInputChange(e);
}}
value={props.seprator ? formattedValue : props.value}
type={props.type === "password" && showPassword ? "text" : props.type === "password" ? "password" : undefined}
className={inputClass}
/>
return (
<div className='w-full'>
<label className='text-sm'>
{props.label}
</label>
{props.type === "password" && <img onClick={() => setShowPassword((oldValue) => !oldValue)} src={EyeIcon} className="w-5 absolute top-0 bottom-0 cursor-pointer my-auto left-3" />}
<div className='w-full relative mt-1'>
<input {...props} onChange={(e) => {
setSearch(e.target.value)
handleInputChange(e)
}} value={props.seprator ? formattedValue : props.value} type={props.type === 'password' && showPassword ? 'text' : props.type === 'password' ? 'password' : undefined} className={inputClass} />
{props.variant === "search" && <SearchNormal size={20} color="#8C90A3" className="absolute top-0 w-5 bottom-0 my-auto right-3" />}
{
props.type === 'password' &&
<img onClick={() => setShowPassword((oldValue) => !oldValue)} src={EyeIcon} className='w-5 absolute top-0 bottom-0 cursor-pointer my-auto left-3' />
}
{props.error_text && <Error errorText={props.error_text} />}
</div>
</div>
);
};
{
props.variant === 'search' &&
<SearchNormal size={20} color='#8C90A3' className='absolute top-0 w-5 bottom-0 my-auto right-3' />
}
{
props.error_text &&
<Error
errorText={props.error_text}
/>
}
</div>
</div>
)
}
export default Input
export default Input;
src/langs/fa.json
+2 -1
View File
@@ -1000,7 +1000,8 @@
"description_placeholder": "توضیحات خود را اضافه کنید",
"new_label": "برچسب جدید",
"label_title": "عنوان",
"choose_custom_color": "انتخاب رنگ دلخواه"
"choose_custom_color": "انتخاب رنگ دلخواه",
"members": "اعضا"
}
}
}
src/pages/taskmanager/components/task-detail/TaskDetailActionBar.tsx
+4 -3
View File
@@ -21,9 +21,10 @@ type Props = {
activeTab: TaskDetailTab | null;
onTabChange: (tab: TaskDetailTab) => void;
labelsPopover?: ReactNode;
usersPopover?: ReactNode;
};
const TaskDetailActionBar: FC<Props> = ({ activeTab, onTabChange, labelsPopover }) => {
const TaskDetailActionBar: FC<Props> = ({ activeTab, onTabChange, labelsPopover, usersPopover }) => {
const { t } = useTranslation("global");
return (
@@ -42,11 +43,11 @@ const TaskDetailActionBar: FC<Props> = ({ activeTab, onTabChange, labelsPopover
</button>
);
if (id === "labels") {
if (id === "labels" || id === "users") {
return (
<div key={id} className="relative">
{button}
{labelsPopover}
{id === "labels" ? labelsPopover : usersPopover}
</div>
);
}
src/pages/taskmanager/components/task-detail/TaskDetailMetadataPreview.tsx
+9 -5
View File
@@ -3,12 +3,14 @@ import { type FC } from "react";
import { useTranslation } from "react-i18next";
import AvatarImage from "../../../../assets/images/avatar_image.png";
import type { TaskLabel } from "./labels/types";
import type { TaskUser } from "./users/types";
type Props = {
selectedLabels: TaskLabel[];
selectedUsers: TaskUser[];
};
const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels }) => {
const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers }) => {
const { t } = useTranslation("global");
return (
@@ -37,10 +39,12 @@ const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels }) => {
<div>
<div className="text-xs font-medium mb-2">{t("taskmanager.users")}</div>
<div className="flex items-center gap-2">
<div className="size-8 rounded-full bg-[#D0D0D0] overflow-hidden">
<img src={AvatarImage} alt="" className="size-full object-cover" />
</div>
<div className="flex items-center gap-2 flex-wrap">
{selectedUsers.map((user) => (
<div key={user.id} className="size-8 rounded-full bg-[#D0D0D0] overflow-hidden">
<img src={user.avatar ?? AvatarImage} alt={user.name} className="size-full object-cover" />
</div>
))}
<button
type="button"
className="size-7 rounded-full border border-[#D0D0D0] bg-white/60 flex items-center justify-center cursor-pointer"
src/pages/taskmanager/components/task-detail/TaskDetailToolbar.tsx
+38 -7
View File
@@ -5,6 +5,8 @@ import type { LabelsView, TaskLabel } from "./labels/types";
import TaskDetailActionBar from "./TaskDetailActionBar";
import TaskDetailMetadataPreview from "./TaskDetailMetadataPreview";
import type { TaskDetailTab } from "./types";
import { DEFAULT_USERS } from "./users/constants";
import TaskDetailUsersPopover from "./users/TaskDetailUsersPopover";
type Props = {
activeTab: TaskDetailTab | null;
@@ -14,10 +16,13 @@ type Props = {
const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
const [labelsView, setLabelsView] = useState<LabelsView>("list");
const [labels, setLabels] = useState<TaskLabel[]>(DEFAULT_LABELS);
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set(["1"]));
const [selectedLabelIds, setSelectedLabelIds] = useState<Set<string>>(new Set(["1"]));
const [selectedUserIds, setSelectedUserIds] = useState<Set<string>>(new Set(["1"]));
const selectedLabels = labels.filter((label) => selectedIds.has(label.id));
const selectedLabels = labels.filter((label) => selectedLabelIds.has(label.id));
const selectedUsers = DEFAULT_USERS.filter((user) => selectedUserIds.has(user.id));
const isLabelsOpen = activeTab === "labels";
const isUsersOpen = activeTab === "users";
const handleTabChange = (tab: TaskDetailTab) => {
if (tab === "labels" && activeTab !== "labels") {
@@ -26,8 +31,20 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
onTabChange(tab);
};
const handleToggle = (id: string) => {
setSelectedIds((prev) => {
const handleLabelToggle = (id: string) => {
setSelectedLabelIds((prev) => {
const next = new Set(prev);
if (next.has(id)) {
next.delete(id);
} else {
next.add(id);
}
return next;
});
};
const handleUserToggle = (id: string) => {
setSelectedUserIds((prev) => {
const next = new Set(prev);
if (next.has(id)) {
next.delete(id);
@@ -45,7 +62,7 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
color,
};
setLabels((prev) => [...prev, newLabel]);
setSelectedIds((prev) => new Set([...prev, newLabel.id]));
setSelectedLabelIds((prev) => new Set([...prev, newLabel.id]));
setLabelsView("list");
};
@@ -55,11 +72,25 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
activeTab={activeTab}
onTabChange={handleTabChange}
labelsPopover={
isLabelsOpen ? <TaskDetailLabelsPopover view={labelsView} labels={labels} selectedIds={selectedIds} onViewChange={setLabelsView} onToggle={handleToggle} onCreate={handleCreate} /> : null
isLabelsOpen ? (
<TaskDetailLabelsPopover
view={labelsView}
labels={labels}
selectedIds={selectedLabelIds}
onViewChange={setLabelsView}
onToggle={handleLabelToggle}
onCreate={handleCreate}
/>
) : null
}
usersPopover={
isUsersOpen ? (
<TaskDetailUsersPopover users={DEFAULT_USERS} selectedIds={selectedUserIds} onToggle={handleUserToggle} />
) : null
}
/>
<TaskDetailMetadataPreview selectedLabels={selectedLabels} />
<TaskDetailMetadataPreview selectedLabels={selectedLabels} selectedUsers={selectedUsers} />
</div>
);
};
src/pages/taskmanager/components/task-detail/users/TaskDetailUsersList.tsx
+48
View File
@@ -0,0 +1,48 @@
import { type FC, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import Input from "../../../../../components/Input";
import type { TaskUser } from "./types";
type Props = {
users: TaskUser[];
selectedIds: Set<string>;
onToggle: (id: string) => void;
};
const TaskDetailUsersList: FC<Props> = ({ users }) => {
const { t } = useTranslation("global");
const [search, setSearch] = useState("");
const filteredUsers = useMemo(() => {
const query = search.trim().toLowerCase();
if (!query) return users;
return users.filter((user) => user.name.toLowerCase().includes(query));
}, [users, search]);
return (
<div className="flex flex-col gap-3">
<div>
<h3 className="text-xs font-bold text-center">{t("taskmanager.users")}</h3>
</div>
<Input label={t("search")} value={search} onChange={(e) => setSearch(e.target.value)} className="h-8 bg-white/63 border-white" labelClassName="text-xs" />
<div>
<div className="text-xs font-medium mb-2">{t("taskmanager.task_detail.members")}</div>
<div className="flex flex-col gap-2">
{filteredUsers.map((user) => {
return (
<div key={user.id} className="flex gap-1.5 items-center">
<div className="size-6 rounded-full bg-gray-400"></div>
<div className="text-[10px]">{user.name}</div>
</div>
);
})}
</div>
</div>
</div>
);
};
export default TaskDetailUsersList;
src/pages/taskmanager/components/task-detail/users/TaskDetailUsersPopover.tsx
+19
View File
@@ -0,0 +1,19 @@
import { type FC } from "react";
import TaskDetailUsersList from "./TaskDetailUsersList";
import type { TaskUser } from "./types";
type Props = {
users: TaskUser[];
selectedIds: Set<string>;
onToggle: (id: string) => void;
};
const TaskDetailUsersPopover: FC<Props> = ({ users, selectedIds, onToggle }) => {
return (
<div className="absolute top-full right-0 mt-2 z-30 w-[300px] bg-white/90 backdrop-blur-md rounded-2xl p-4 shadow-lg border border-white/80">
<TaskDetailUsersList users={users} selectedIds={selectedIds} onToggle={onToggle} />
</div>
);
};
export default TaskDetailUsersPopover;
src/pages/taskmanager/components/task-detail/users/constants.ts
+6
View File
@@ -0,0 +1,6 @@
import type { TaskUser } from "./types";
export const DEFAULT_USERS: TaskUser[] = [
{ id: "1", name: "فروغ براتی" },
{ id: "2", name: "پارسا مهرزاد" },
];
src/pages/taskmanager/components/task-detail/users/types.ts
+5
View File
@@ -0,0 +1,5 @@
export type TaskUser = {
id: string;
name: string;
avatar?: string;
};