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

project list

Browse Source
This commit is contained in:
hamid zarghami
2026-07-11 10:19:39 +03:30
parent b0737ea6ad
commit 47691a649f
11 changed files with 485 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/taskmanager/project/Create.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ const CreateProject: FC = () => {
createProject.mutate(values, {
onSuccess: () => {
toast.success(t("success"));
navigate(Pages.taskmanager.projectList);
navigate(`${Pages.taskmanager.projectList}${workspaceId}`);
},
onError: (error: ErrorType) => {
toast.error(error.response?.data?.error.message[0]);
src/pages/taskmanager/project/List.tsx
+31 -13
View File
@@ -1,29 +1,47 @@
import { useState } from "react";
import projectsData from "./data/projects.json";
import { FC, useState } from "react";
import { useParams } from "react-router-dom";
import PageLoading from "../../../components/PageLoading";
import { useGetWorkspaceDetail } from "../workspace/hooks/useWorkspaceData";
import { WorkspaceDetailType } from "../workspace/types/WorkspaceTypes";
import ProjectGrid from "./components/ProjectGrid";
import ProjectListHeader from "./components/ProjectListHeader";
import WorkspaceInfoBanner from "./components/WorkspaceInfoBanner";
import type { ProjectItem, WorkspaceInfo } from "./types/ProjectTypes";
import { useGetProjectsByWorkspace } from "./hooks/useProjectData";
import type { ProjectItem } from "./types/ProjectTypes";
const List = () => {
const { workspace, projects: initialProjects } = projectsData as {
workspace: WorkspaceInfo;
projects: ProjectItem[];
};
const List: FC = () => {
const { workspaceId = "" } = useParams();
const getProjects = useGetProjectsByWorkspace(workspaceId);
const getWorkspaceDetail = useGetWorkspaceDetail(workspaceId);
const [projects, setProjects] = useState<ProjectItem[]>(initialProjects);
const workspace: WorkspaceDetailType | undefined =
getWorkspaceDetail.data?.data?.workspace ?? getWorkspaceDetail.data?.data;
const apiProjects: ProjectItem[] =
getProjects.data?.data?.projects ?? getProjects.data?.data ?? [];
const [deletedIds, setDeletedIds] = useState<string[]>([]);
const projects = apiProjects.filter((project) => !deletedIds.includes(project.id));
const handleDelete = (id: string) => {
setProjects((prev) => prev.filter((project) => project.id !== id));
setDeletedIds((prev) => [...prev, id]);
};
const isLoading = getProjects.isPending || getWorkspaceDetail.isPending;
return (
<div className="w-full mt-4">
<ProjectListHeader title={workspace.name} />
<ProjectListHeader title={workspace?.name ?? ""} workspaceId={workspaceId} />
<WorkspaceInfoBanner description={workspace.description} />
{workspace?.description ? (
<WorkspaceInfoBanner description={workspace.description} />
) : null}
<ProjectGrid projects={projects} onDelete={handleDelete} />
{isLoading ? (
<PageLoading />
) : (
<ProjectGrid projects={projects} onDelete={handleDelete} />
)}
</div>
);
};
src/pages/taskmanager/project/components/ProjectCard.tsx
+15 -5
View File
@@ -1,4 +1,4 @@
import { FC } from "react";
import { CSSProperties, FC } from "react";
import { Link } from "react-router-dom";
import { Pages } from "../../../../config/Pages";
import type { ProjectItem } from "../types/ProjectTypes";
@@ -17,10 +17,20 @@ const hexToRgba = (hex: string, alpha: number) => {
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
};
const getCardBackground = (background: string) => {
const color = /^#[0-9A-Fa-f]{6}$/i.test(background) ? background : (background.match(/#[0-9A-Fa-f]{6}/i)?.[0] ?? "#A8E6CF");
const getCardBackgroundStyle = (project: ProjectItem): CSSProperties => {
if (project.backgroundPicture) {
return {
backgroundImage: `url(${project.backgroundPicture})`,
backgroundSize: "cover",
backgroundPosition: "center",
};
}
return `linear-gradient(135deg, ${color}, ${hexToRgba(color, 0.5)})`;
const color = project.backgroundColor ?? "#A8E6CF";
return {
background: `linear-gradient(135deg, ${color}, ${hexToRgba(color, 0.5)})`,
};
};
const ProjectCard: FC<Props> = ({ project, onDelete }) => {
@@ -31,7 +41,7 @@ const ProjectCard: FC<Props> = ({ project, onDelete }) => {
return (
<div className="bg-white rounded-[20px] overflow-hidden shadow-sm border border-border/40 p-3">
<Link to={Pages.taskmanager.workspace + project.id}>
<div className="h-[84px] w-full rounded-[16px]" style={{ background: getCardBackground(project.background) }} />
<div className="h-[84px] w-full rounded-[16px]" style={getCardBackgroundStyle(project)} />
</Link>
<div className="flex items-center justify-between mt-3.5">
src/pages/taskmanager/project/components/ProjectListHeader.tsx
+6 -2
View File
@@ -7,11 +7,15 @@ import { Pages } from "../../../../config/Pages";
type Props = {
title: string;
workspaceId?: string;
onSettingsClick?: () => void;
};
const ProjectListHeader: FC<Props> = ({ title, onSettingsClick }) => {
const ProjectListHeader: FC<Props> = ({ title, workspaceId, onSettingsClick }) => {
const { t } = useTranslation("global");
const createProjectLink = workspaceId
? `${Pages.taskmanager.createProject}?workspaceId=${workspaceId}`
: Pages.taskmanager.createProject;
return (
<div className="flex w-full justify-between items-center">
@@ -23,7 +27,7 @@ const ProjectListHeader: FC<Props> = ({ title, onSettingsClick }) => {
<span>{t("sidebar.setting")}</span>
</Button>
<Link to={Pages.taskmanager.createProject}>
<Link to={createProjectLink}>
<Button onClick={onSettingsClick} className="flex items-center gap-2 whitespace-nowrap px-4">
<Add size={18} color="white" />
<span>{t("taskmanager.new_project")}</span>
src/pages/taskmanager/project/hooks/useProjectData.ts
+11 -3
View File
@@ -1,15 +1,23 @@
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import * as api from "../service/ProjectService";
import { CreateProjectType } from "../types/ProjectTypes";
export const useGetProjectsByWorkspace = (workspaceId: string) => {
return useQuery({
queryKey: ["projects", workspaceId],
queryFn: () => api.getProjectsByWorkspace(workspaceId),
enabled: !!workspaceId,
});
};
export const useCreateProject = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (variables: CreateProjectType) => api.createProject(variables),
onSuccess: () => {
onSuccess: (_data, variables) => {
queryClient.invalidateQueries({
queryKey: ["projects"],
queryKey: ["projects", variables.workspaceId],
});
},
});
src/pages/taskmanager/project/service/ProjectService.ts
+7
View File
@@ -1,6 +1,13 @@
import axios from "../../../../config/axios";
import { CreateProjectType } from "../types/ProjectTypes";
export const getProjectsByWorkspace = async (workspaceId: string) => {
const { data } = await axios.get(
`/task-manager/projects/user/workspace/${workspaceId}`,
);
return data;
};
export const createProject = async (params: CreateProjectType) => {
const { data } = await axios.post(`/task-manager/projects`, params);
return data;
src/pages/taskmanager/project/types/ProjectTypes.ts
+2 -6
View File
@@ -1,12 +1,8 @@
export type ProjectItem = {
id: string;
name: string;
background: string;
};
export type WorkspaceInfo = {
name: string;
description: string;
backgroundColor?: string;
backgroundPicture?: string;
};
export type CreateProjectType = {
src/pages/taskmanager/workspace/List.tsx
+25 -17
View File
@@ -1,5 +1,5 @@
import { FC } from "react";
import { Add, Edit } from "iconsax-react";
import { FC } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";
@@ -9,10 +9,7 @@ import Td from "../../../components/Td";
import TrashWithConfrim from "../../../components/TrashWithConfrim";
import { Pages } from "../../../config/Pages";
import { ErrorType } from "../../../helpers/types";
import {
useDeleteWorkspace,
useGetWorkspaces,
} from "./hooks/useWorkspaceData";
import { useDeleteWorkspace, useGetWorkspaces } from "./hooks/useWorkspaceData";
import { WorkspaceItemType } from "./types/WorkspaceTypes";
const WorkspaceList: FC = () => {
@@ -20,10 +17,7 @@ const WorkspaceList: FC = () => {
const getWorkspaces = useGetWorkspaces();
const deleteWorkspace = useDeleteWorkspace();
const workspaces: WorkspaceItemType[] =
getWorkspaces.data?.data?.workspaces ??
getWorkspaces.data?.data ??
[];
const workspaces: WorkspaceItemType[] = getWorkspaces.data?.data?.workspaces ?? getWorkspaces.data?.data ?? [];
const handleDelete = (id: string) => {
deleteWorkspace.mutate(id, {
@@ -43,7 +37,10 @@ const WorkspaceList: FC = () => {
<Link to={Pages.taskmanager.createWorkspace}>
<Button className="px-5">
<div className="flex gap-2">
<Add className="size-5" color="#fff" />
<Add
className="size-5"
color="#fff"
/>
<div>{t("taskmanager.new_workspace")}</div>
</div>
</Button>
@@ -60,12 +57,16 @@ const WorkspaceList: FC = () => {
<Td text={t("taskmanager.workspacename")} />
<Td text={t("taskmanager.workspace_description")} />
<Td text={t("taskmanager.workspace_status")} />
<Td text={t("taskmanager.projects")} />
<Td text="" />
</tr>
</thead>
<tbody>
{workspaces.map((item) => (
<tr key={item.id} className="tr">
<tr
key={item.id}
className="tr"
>
<Td text="">
<div className="flex items-center gap-3">
<div
@@ -81,15 +82,22 @@ const WorkspaceList: FC = () => {
</div>
</Td>
<Td text={item.description ?? ""} />
<Td
text={
item.isActive ? t("slider.active") : t("slider.inactive")
}
/>
<Td text={item.isActive ? t("slider.active") : t("slider.inactive")} />
<Td text="">
<Link to={Pages.taskmanager.projectList + item.id}>
<Button
label="مدیریت پروژه ها"
className="bg-blue-400 w-fit px-3"
/>
</Link>
</Td>
<Td text="">
<div className="flex items-center gap-2">
<Link to={Pages.taskmanager.updateWorkspace + item.id}>
<Edit size={20} color="#8C90A3" />
<Edit
size={20}
color="#8C90A3"
/>
</Link>
<TrashWithConfrim
onDelete={() => handleDelete(item.id)}