This commit is contained in:
Maidul Islam
2025-04-06 21:17:51 -04:00
parent 0e073cc9fc
commit 5ab853d3e6
4 changed files with 36 additions and 17 deletions
@@ -86,19 +86,18 @@ export const ProductOverviewPage = ({ type }: Props) => {
</div> </div>
} }
description={formatDescription(type)} description={formatDescription(type)}
> />
</PageHeader>
</div> </div>
{projectListView === ProjectListView.MyProjects ? ( {projectListView === ProjectListView.MyProjects ? (
<MyProjectView <MyProjectView
type={type} type={type}
onAddNewProject={() => handlePopUpOpen("addNewWs")} onAddNewProject={() => handlePopUpOpen("addNewWs")}
onUpgradePlan={() => handlePopUpOpen("upgradePlan")} onUpgradePlan={() => handlePopUpOpen("upgradePlan")}
isAddingProjectsAllowed={isAddingProjectsAllowed} isAddingProjectsAllowed={isAddingProjectsAllowed}
/> />
) : ( ) : (
<AllProjectView <AllProjectView
type={type} type={type}
onAddNewProject={() => handlePopUpOpen("addNewWs")} onAddNewProject={() => handlePopUpOpen("addNewWs")}
onUpgradePlan={() => handlePopUpOpen("upgradePlan")} onUpgradePlan={() => handlePopUpOpen("upgradePlan")}
isAddingProjectsAllowed={isAddingProjectsAllowed} isAddingProjectsAllowed={isAddingProjectsAllowed}
@@ -26,10 +26,10 @@ import {
Skeleton, Skeleton,
Tooltip Tooltip
} from "@app/components/v2"; } from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
import { getProjectHomePage } from "@app/helpers/project"; import { getProjectHomePage } from "@app/helpers/project";
import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks"; import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
import { useRequestProjectAccess, useSearchProjects } from "@app/hooks/api"; import { useRequestProjectAccess, useSearchProjects } from "@app/hooks/api";
import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
import { ProjectType, Workspace } from "@app/hooks/api/workspace/types"; import { ProjectType, Workspace } from "@app/hooks/api/workspace/types";
type Props = { type Props = {
@@ -86,7 +86,12 @@ const RequestAccessModal = ({ projectId, onPopUpToggle }: RequestAccessModalProp
); );
}; };
export const AllProjectView = ({ type, onAddNewProject, onUpgradePlan, isAddingProjectsAllowed }: Props) => { export const AllProjectView = ({
type,
onAddNewProject,
onUpgradePlan,
isAddingProjectsAllowed
}: Props) => {
const navigate = useNavigate(); const navigate = useNavigate();
const [searchFilter, setSearchFilter] = useState(""); const [searchFilter, setSearchFilter] = useState("");
const [debouncedSearch] = useDebounce(searchFilter); const [debouncedSearch] = useDebounce(searchFilter);
@@ -42,7 +42,12 @@ enum ProjectsViewMode {
LIST = "list" LIST = "list"
} }
export const MyProjectView = ({ type, onAddNewProject, onUpgradePlan, isAddingProjectsAllowed }: Props) => { export const MyProjectView = ({
type,
onAddNewProject,
onUpgradePlan,
isAddingProjectsAllowed
}: Props) => {
const navigate = useNavigate(); const navigate = useNavigate();
const { currentOrg } = useOrganization(); const { currentOrg } = useOrganization();
@@ -1,6 +1,7 @@
import { Select, SelectItem } from "@app/components/v2";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronDown } from "@fortawesome/free-solid-svg-icons"; import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Select, SelectItem } from "@app/components/v2";
export enum ProjectListView { export enum ProjectListView {
MyProjects = "my-projects", MyProjects = "my-projects",
@@ -13,18 +14,27 @@ type Props = {
}; };
export const ProjectListToggle = ({ value, onChange }: Props) => { export const ProjectListToggle = ({ value, onChange }: Props) => {
const getDisplayText = (value: ProjectListView) => { const getDisplayText = (listView: ProjectListView) => {
return value === ProjectListView.MyProjects ? "My Projects" : "All Projects"; return listView === ProjectListView.MyProjects ? "My Projects" : "All Projects";
}; };
return ( return (
<div className="flex items-center gap-2 relative group cursor-pointer"> <div className="group relative flex cursor-pointer items-center gap-2">
<h1 className="text-3xl font-semibold group-hover:text-gray-500 transition-colors">{getDisplayText(value)}</h1> <h1 className="text-3xl font-semibold transition-colors group-hover:text-gray-500">
<Select value={value} onValueChange={onChange} className="absolute left-0 top-0 w-full h-full opacity-0 cursor-pointer"> {getDisplayText(value)}
</h1>
<Select
value={value}
onValueChange={onChange}
className="absolute left-0 top-0 h-full w-full cursor-pointer opacity-0"
>
<SelectItem value={ProjectListView.MyProjects}>My Projects</SelectItem> <SelectItem value={ProjectListView.MyProjects}>My Projects</SelectItem>
<SelectItem value={ProjectListView.AllProjects}>All Projects</SelectItem> <SelectItem value={ProjectListView.AllProjects}>All Projects</SelectItem>
</Select> </Select>
<FontAwesomeIcon icon={faChevronDown} className="group-hover:text-gray-500 transition-colors text-lg" /> <FontAwesomeIcon
icon={faChevronDown}
className="text-lg transition-colors group-hover:text-gray-500"
/>
</div> </div>
); );
}; };