feat: init

apps/web/core/components/modules/archived-modules/header.tsx

@@ -0,0 +1,156 @@
+import type { FC } from "react";
+import { useCallback, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// icons
+import { ListFilter, Search, X } from "lucide-react";
+// plane helpers
+import { useOutsideClickDetector } from "@plane/hooks";
+// types
+import type { TModuleFilters } from "@plane/types";
+import { cn, calculateTotalFilters } from "@plane/utils";
+// components
+import { ArchiveTabsList } from "@/components/archives";
+import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
+import { ModuleFiltersSelection, ModuleOrderByDropdown } from "@/components/modules";
+// helpers
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useModuleFilter } from "@/hooks/store/use-module-filter";
+
+export const ArchivedModulesHeader: FC = observer(() => {
+  // router
+  const { projectId } = useParams();
+  // refs
+  const inputRef = useRef<HTMLInputElement>(null);
+  // hooks
+  const {
+    currentProjectArchivedFilters,
+    currentProjectDisplayFilters,
+    archivedModulesSearchQuery,
+    updateFilters,
+    updateDisplayFilters,
+    updateArchivedModulesSearchQuery,
+  } = useModuleFilter();
+  const {
+    workspace: { workspaceMemberIds },
+  } = useMember();
+  // states
+  const [isSearchOpen, setIsSearchOpen] = useState(archivedModulesSearchQuery !== "" ? true : false);
+  // outside click detector hook
+  useOutsideClickDetector(inputRef, () => {
+    if (isSearchOpen && archivedModulesSearchQuery.trim() === "") setIsSearchOpen(false);
+  });
+
+  const handleFilters = useCallback(
+    (key: keyof TModuleFilters, value: string | string[]) => {
+      if (!projectId) return;
+      const newValues = currentProjectArchivedFilters?.[key] ?? [];
+
+      if (Array.isArray(value))
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
+        });
+      else {
+        if (currentProjectArchivedFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(projectId.toString(), { [key]: newValues }, "archived");
+    },
+    [currentProjectArchivedFilters, projectId, updateFilters]
+  );
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      if (archivedModulesSearchQuery && archivedModulesSearchQuery.trim() !== "") updateArchivedModulesSearchQuery("");
+      else {
+        setIsSearchOpen(false);
+        inputRef.current?.blur();
+      }
+    }
+  };
+
+  const isFiltersApplied = calculateTotalFilters(currentProjectArchivedFilters ?? {}) !== 0;
+
+  return (
+    <div className="group relative flex border-b border-custom-border-200">
+      <div className="flex w-full items-center overflow-x-auto px-4 gap-2 horizontal-scrollbar scrollbar-sm">
+        <ArchiveTabsList />
+      </div>
+      {/* filter options */}
+      <div className="h-full flex items-center gap-3 self-end px-8">
+        {!isSearchOpen && (
+          <button
+            type="button"
+            className="-mr-5 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
+            onClick={() => {
+              setIsSearchOpen(true);
+              inputRef.current?.focus();
+            }}
+          >
+            <Search className="h-3.5 w-3.5" />
+          </button>
+        )}
+        <div
+          className={cn(
+            "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+            {
+              "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
+            }
+          )}
+        >
+          <Search className="h-3.5 w-3.5" />
+          <input
+            ref={inputRef}
+            className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
+            placeholder="Search"
+            value={archivedModulesSearchQuery}
+            onChange={(e) => updateArchivedModulesSearchQuery(e.target.value)}
+            onKeyDown={handleInputKeyDown}
+          />
+          {isSearchOpen && (
+            <button
+              type="button"
+              className="grid place-items-center"
+              onClick={() => {
+                updateArchivedModulesSearchQuery("");
+                setIsSearchOpen(false);
+              }}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          )}
+        </div>
+        <ModuleOrderByDropdown
+          value={currentProjectDisplayFilters?.order_by}
+          onChange={(val) => {
+            if (!projectId || val === currentProjectDisplayFilters?.order_by) return;
+            updateDisplayFilters(projectId.toString(), {
+              order_by: val,
+            });
+          }}
+        />
+        <FiltersDropdown
+          icon={<ListFilter className="h-3 w-3" />}
+          title="Filters"
+          placement="bottom-end"
+          isFiltersApplied={isFiltersApplied}
+        >
+          <ModuleFiltersSelection
+            displayFilters={currentProjectDisplayFilters ?? {}}
+            filters={currentProjectArchivedFilters ?? {}}
+            handleDisplayFiltersUpdate={(val) => {
+              if (!projectId) return;
+              updateDisplayFilters(projectId.toString(), val);
+            }}
+            handleFiltersUpdate={handleFilters}
+            memberIds={workspaceMemberIds ?? undefined}
+            isArchived
+          />
+        </FiltersDropdown>
+      </div>
+    </div>
+  );
+});

apps/web/core/components/modules/archived-modules/index.ts

@@ -0,0 +1,4 @@
+export * from "./root";
+export * from "./view";
+export * from "./header";
+export * from "./modal";

apps/web/core/components/modules/archived-modules/modal.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { useState, Fragment } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+// ui
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  moduleId: string;
+  handleClose: () => void;
+  isOpen: boolean;
+  onSubmit?: () => Promise<void>;
+};
+
+export const ArchiveModuleModal: React.FC<Props> = (props) => {
+  const { workspaceSlug, projectId, moduleId, isOpen, handleClose } = props;
+  // router
+  const router = useAppRouter();
+  // states
+  const [isArchiving, setIsArchiving] = useState(false);
+  // store hooks
+  const { getModuleNameById, archiveModule } = useModule();
+
+  const moduleName = getModuleNameById(moduleId);
+
+  const onClose = () => {
+    setIsArchiving(false);
+    handleClose();
+  };
+
+  const handleArchiveModule = async () => {
+    setIsArchiving(true);
+    await archiveModule(workspaceSlug, projectId, moduleId)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Archive success",
+          message: "Your archives can be found in project archives.",
+        });
+        onClose();
+        router.push(`/${workspaceSlug}/projects/${projectId}/modules`);
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Module could not be archived. Please try again.",
+        })
+      )
+      .finally(() => setIsArchiving(false));
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={onClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                <div className="px-5 py-4">
+                  <h3 className="text-xl font-medium 2xl:text-2xl">Archive module {moduleName}</h3>
+                  <p className="mt-3 text-sm text-custom-text-200">
+                    Are you sure you want to archive the module? All your archives can be restored later.
+                  </p>
+                  <div className="mt-3 flex justify-end gap-2">
+                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button size="sm" tabIndex={1} onClick={handleArchiveModule} loading={isArchiving}>
+                      {isArchiving ? "Archiving" : "Archive"}
+                    </Button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};

apps/web/core/components/modules/archived-modules/root.tsx

@@ -0,0 +1,88 @@
+import React, { useCallback } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import type { TModuleFilters } from "@plane/types";
+// components
+import { calculateTotalFilters } from "@plane/utils";
+import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
+import { ArchivedModulesView, ModuleAppliedFiltersList } from "@/components/modules";
+import { CycleModuleListLayoutLoader } from "@/components/ui/loader/cycle-module-list-loader";
+// helpers
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useModuleFilter } from "@/hooks/store/use-module-filter";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+
+export const ArchivedModuleLayoutRoot: React.FC = observer(() => {
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  // plane hooks
+  const { t } = useTranslation();
+  // hooks
+  const { fetchArchivedModules, projectArchivedModuleIds, loader } = useModule();
+  const { clearAllFilters, currentProjectArchivedFilters, updateFilters } = useModuleFilter();
+  // derived values
+  const totalArchivedModules = projectArchivedModuleIds?.length ?? 0;
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/archived/empty-modules" });
+
+  useSWR(
+    workspaceSlug && projectId ? `ARCHIVED_MODULES_${workspaceSlug.toString()}_${projectId.toString()}` : null,
+    async () => {
+      if (workspaceSlug && projectId) {
+        await fetchArchivedModules(workspaceSlug.toString(), projectId.toString());
+      }
+    },
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  const handleRemoveFilter = useCallback(
+    (key: keyof TModuleFilters, value: string | null) => {
+      if (!projectId) return;
+      let newValues = currentProjectArchivedFilters?.[key] ?? [];
+
+      if (!value) newValues = [];
+      else newValues = newValues.filter((val) => val !== value);
+
+      updateFilters(projectId.toString(), { [key]: newValues }, "archived");
+    },
+    [currentProjectArchivedFilters, projectId, updateFilters]
+  );
+
+  if (!workspaceSlug || !projectId) return <></>;
+
+  if (loader || !projectArchivedModuleIds) {
+    return <CycleModuleListLayoutLoader />;
+  }
+
+  return (
+    <>
+      {calculateTotalFilters(currentProjectArchivedFilters ?? {}) !== 0 && (
+        <div className="border-b border-custom-border-200 px-5 py-3">
+          <ModuleAppliedFiltersList
+            appliedFilters={currentProjectArchivedFilters ?? {}}
+            handleClearAllFilters={() => clearAllFilters(projectId.toString(), "archived")}
+            handleRemoveFilter={handleRemoveFilter}
+            alwaysAllowEditing
+            isArchived
+          />
+        </div>
+      )}
+      {totalArchivedModules === 0 ? (
+        <div className="h-full place-items-center">
+          <DetailedEmptyState
+            title={t("project_module.empty_state.archived.title")}
+            description={t("project_module.empty_state.archived.description")}
+            assetPath={resolvedPath}
+          />
+        </div>
+      ) : (
+        <div className="relative h-full w-full overflow-auto">
+          <ArchivedModulesView workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
+        </div>
+      )}
+    </>
+  );
+});

apps/web/core/components/modules/archived-modules/view.tsx

@@ -0,0 +1,65 @@
+import type { FC } from "react";
+import { observer } from "mobx-react";
+import Image from "next/image";
+// components
+import { ModuleListItem, ModulePeekOverview } from "@/components/modules";
+// ui
+import { CycleModuleListLayoutLoader } from "@/components/ui/loader/cycle-module-list-loader";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useModuleFilter } from "@/hooks/store/use-module-filter";
+// assets
+import AllFiltersImage from "@/public/empty-state/module/all-filters.svg";
+import NameFilterImage from "@/public/empty-state/module/name-filter.svg";
+
+export interface IArchivedModulesView {
+  workspaceSlug: string;
+  projectId: string;
+}
+
+export const ArchivedModulesView: FC<IArchivedModulesView> = observer((props) => {
+  const { workspaceSlug, projectId } = props;
+  // store hooks
+  const { getFilteredArchivedModuleIds, loader } = useModule();
+  const { archivedModulesSearchQuery } = useModuleFilter();
+  // derived values
+  const filteredArchivedModuleIds = getFilteredArchivedModuleIds(projectId);
+
+  if (loader || !filteredArchivedModuleIds) return <CycleModuleListLayoutLoader />;
+
+  if (filteredArchivedModuleIds.length === 0)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <div className="text-center">
+          <Image
+            src={archivedModulesSearchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
+            className="h-36 sm:h-48 w-36 sm:w-48 mx-auto"
+            alt="No matching modules"
+          />
+          <h5 className="text-xl font-medium mt-7 mb-1">No matching modules</h5>
+          <p className="text-custom-text-400 text-base">
+            {archivedModulesSearchQuery.trim() === ""
+              ? "Remove the filters to see all modules"
+              : "Remove the search criteria to see all modules"}
+          </p>
+        </div>
+      </div>
+    );
+
+  return (
+    <div className="h-full overflow-y-auto">
+      <div className="flex h-full w-full justify-between">
+        <div className="flex h-full w-full flex-col overflow-y-auto vertical-scrollbar scrollbar-lg">
+          {filteredArchivedModuleIds.map((moduleId) => (
+            <ModuleListItem key={moduleId} moduleId={moduleId} />
+          ))}
+        </div>
+        <ModulePeekOverview
+          projectId={projectId?.toString() ?? ""}
+          workspaceSlug={workspaceSlug?.toString() ?? ""}
+          isArchived
+        />
+      </div>
+    </div>
+  );
+});