Initial commit: Plane

Synced from upstream: 8853637e981ed7d8a6cff32bd98e7afe20f54362

apps/web/core/components/modules/module-view-header.tsx

@@ -0,0 +1,193 @@
+"use client";
+
+import type { FC } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { ListFilter, Search } from "lucide-react";
+// plane helpers
+import { MODULE_VIEW_LAYOUTS } from "@plane/constants";
+import { useOutsideClickDetector } from "@plane/hooks";
+// types
+import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
+import { Tooltip } from "@plane/propel/tooltip";
+import type { TModuleFilters } from "@plane/types";
+// ui
+import { cn, calculateTotalFilters } from "@plane/utils";
+// plane utils
+// components
+import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
+import { ModuleFiltersSelection, ModuleOrderByDropdown } from "@/components/modules/dropdowns";
+// constants
+// helpers
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useModuleFilter } from "@/hooks/store/use-module-filter";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+import { ModuleLayoutIcon } from "./module-layout-icon";
+// i18n
+
+export const ModuleViewHeader: FC = observer(() => {
+  // refs
+  const inputRef = useRef<HTMLInputElement>(null);
+  // router
+  const { projectId } = useParams();
+  // hooks
+  const { isMobile } = usePlatformOS();
+  // store hooks
+  const {
+    workspace: { workspaceMemberIds },
+  } = useMember();
+  const {
+    currentProjectDisplayFilters: displayFilters,
+    currentProjectFilters: filters,
+    searchQuery,
+    updateDisplayFilters,
+    updateFilters,
+    updateSearchQuery,
+  } = useModuleFilter();
+  const { t } = useTranslation();
+
+  // states
+  const [isSearchOpen, setIsSearchOpen] = useState(searchQuery !== "" ? true : false);
+
+  // handlers
+  const handleFilters = useCallback(
+    (key: keyof TModuleFilters, value: string | string[]) => {
+      if (!projectId) return;
+      const newValues = filters?.[key] ?? [];
+
+      if (Array.isArray(value))
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
+        });
+      else {
+        if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(projectId.toString(), { [key]: newValues });
+    },
+    [filters, projectId, updateFilters]
+  );
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      if (searchQuery && searchQuery.trim() !== "") updateSearchQuery("");
+      else {
+        setIsSearchOpen(false);
+        inputRef.current?.blur();
+      }
+    }
+  };
+
+  // outside click detector hook
+  useOutsideClickDetector(inputRef, () => {
+    if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
+  });
+
+  useEffect(() => {
+    if (searchQuery.trim() !== "") setIsSearchOpen(true);
+  }, [searchQuery]);
+
+  const isFiltersApplied = calculateTotalFilters(filters ?? {}) !== 0 || displayFilters?.favorites;
+
+  return (
+    <div className="hidden h-full sm:flex items-center gap-3 self-end">
+      <div className="flex items-center">
+        {!isSearchOpen && (
+          <button
+            type="button"
+            className="-mr-1 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={searchQuery}
+            onChange={(e) => updateSearchQuery(e.target.value)}
+            onKeyDown={handleInputKeyDown}
+          />
+          {isSearchOpen && (
+            <button
+              type="button"
+              className="grid place-items-center"
+              onClick={() => {
+                // updateSearchQuery("");
+                setIsSearchOpen(false);
+              }}
+            >
+              <CloseIcon className="h-3 w-3" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      <ModuleOrderByDropdown
+        value={displayFilters?.order_by}
+        onChange={(val) => {
+          if (!projectId || val === displayFilters?.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={displayFilters ?? {}}
+          filters={filters ?? {}}
+          handleDisplayFiltersUpdate={(val) => {
+            if (!projectId) return;
+            updateDisplayFilters(projectId.toString(), val);
+          }}
+          handleFiltersUpdate={handleFilters}
+          memberIds={workspaceMemberIds ?? undefined}
+        />
+      </FiltersDropdown>
+      <div className="hidden md:flex items-center gap-1 rounded bg-custom-background-80 p-1">
+        {MODULE_VIEW_LAYOUTS.map((layout) => (
+          <Tooltip key={layout.key} tooltipContent={t(layout.i18n_title)} isMobile={isMobile}>
+            <button
+              type="button"
+              className={cn(
+                "group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100",
+                {
+                  "bg-custom-background-100 shadow-custom-shadow-2xs": displayFilters?.layout === layout.key,
+                }
+              )}
+              onClick={() => {
+                if (!projectId) return;
+                updateDisplayFilters(projectId.toString(), { layout: layout.key });
+              }}
+            >
+              <ModuleLayoutIcon layoutType={layout.key} />
+            </button>
+          </Tooltip>
+        ))}
+      </div>
+    </div>
+  );
+});