feat: init

apps/web/core/components/modules/dropdowns/filters/index.ts

@@ -0,0 +1,6 @@
+export * from "./lead";
+export * from "./members";
+export * from "./root";
+export * from "./start-date";
+export * from "./status";
+export * from "./target-date";

apps/web/core/components/modules/dropdowns/filters/lead.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { sortBy } from "lodash-es";
+import { observer } from "mobx-react";
+// plane ui
+import { Avatar, Loader } from "@plane/ui";
+// components
+import { getFileURL } from "@plane/utils";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// helpers
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUser } from "@/hooks/store/user";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  memberIds: string[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterLead: React.FC<Props> = observer((props: Props) => {
+  const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
+  // states
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  // store hooks
+  const { getUserDetails } = useMember();
+  const { data: currentUser } = useUser();
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (memberIds || []).filter((memberId) =>
+      getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => memberId !== currentUser?.id,
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+
+  const handleViewToggle = () => {
+    if (!sortedOptions) return;
+
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Lead${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
+              <>
+                {sortedOptions.slice(0, itemsToRender).map((memberId) => {
+                  const member = getUserDetails(memberId);
+
+                  if (!member) return null;
+                  return (
+                    <FilterOption
+                      key={`lead-${member.id}`}
+                      isChecked={appliedFilters?.includes(member.id) ? true : false}
+                      onClick={() => handleUpdate(member.id)}
+                      icon={
+                        <Avatar
+                          name={member.display_name}
+                          src={getFileURL(member.avatar_url)}
+                          showTooltip={false}
+                          size="md"
+                        />
+                      }
+                      title={currentUser?.id === member.id ? "You" : member?.display_name}
+                    />
+                  );
+                })}
+                {sortedOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs italic text-custom-text-400">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+});

apps/web/core/components/modules/dropdowns/filters/members.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { sortBy } from "lodash-es";
+import { observer } from "mobx-react";
+// plane ui
+import { Avatar, Loader } from "@plane/ui";
+// components
+import { getFileURL } from "@plane/utils";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// helpers
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUser } from "@/hooks/store/user";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  memberIds: string[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterMembers: React.FC<Props> = observer((props: Props) => {
+  const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
+  // states
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  // store hooks
+  const { getUserDetails } = useMember();
+  const { data: currentUser } = useUser();
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (memberIds || []).filter((memberId) =>
+      getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => memberId !== currentUser?.id,
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+
+  const handleViewToggle = () => {
+    if (!sortedOptions) return;
+
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Members${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
+              <>
+                {sortedOptions.slice(0, itemsToRender).map((memberId) => {
+                  const member = getUserDetails(memberId);
+
+                  if (!member) return null;
+                  return (
+                    <FilterOption
+                      key={`member-${member.id}`}
+                      isChecked={appliedFilters?.includes(member.id) ? true : false}
+                      onClick={() => handleUpdate(member.id)}
+                      icon={
+                        <Avatar
+                          name={member.display_name}
+                          src={getFileURL(member.avatar_url)}
+                          showTooltip={false}
+                          size="md"
+                        />
+                      }
+                      title={currentUser?.id === member.id ? "You" : member?.display_name}
+                    />
+                  );
+                })}
+                {sortedOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs italic text-custom-text-400">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+});

apps/web/core/components/modules/dropdowns/filters/root.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { Search, X } from "lucide-react";
+// plane imports
+import type { TModuleStatus } from "@plane/propel/icons";
+import type { TModuleDisplayFilters, TModuleFilters } from "@plane/types";
+// components
+import { FilterOption } from "@/components/issues/issue-layouts/filters";
+import { FilterLead, FilterMembers, FilterStartDate, FilterStatus, FilterTargetDate } from "@/components/modules";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  displayFilters: TModuleDisplayFilters;
+  filters: TModuleFilters;
+  handleDisplayFiltersUpdate: (updatedDisplayProperties: Partial<TModuleDisplayFilters>) => void;
+  handleFiltersUpdate: (key: keyof TModuleFilters, value: string | string[]) => void;
+  memberIds?: string[] | undefined;
+  isArchived?: boolean;
+};
+
+export const ModuleFiltersSelection: React.FC<Props> = observer((props) => {
+  const {
+    displayFilters,
+    filters,
+    handleDisplayFiltersUpdate,
+    handleFiltersUpdate,
+    memberIds,
+    isArchived = false,
+  } = props;
+  // states
+  const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
+  // store
+  const { isMobile } = usePlatformOS();
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-hidden">
+      <div className="bg-custom-background-100 p-2.5 pb-0">
+        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 py-1 text-xs">
+          <Search className="text-custom-text-400" size={12} strokeWidth={2} />
+          <input
+            type="text"
+            className="w-full bg-custom-background-90 outline-none placeholder:text-custom-text-400"
+            placeholder="Search"
+            value={filtersSearchQuery}
+            onChange={(e) => setFiltersSearchQuery(e.target.value)}
+            autoFocus={!isMobile}
+          />
+          {filtersSearchQuery !== "" && (
+            <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
+              <X className="text-custom-text-300" size={12} strokeWidth={2} />
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="h-full w-full divide-y divide-custom-border-200 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
+        {!isArchived && (
+          <div className="py-2">
+            <FilterOption
+              isChecked={!!displayFilters.favorites}
+              onClick={() =>
+                handleDisplayFiltersUpdate({
+                  favorites: !displayFilters.favorites,
+                })
+              }
+              title="Favorites"
+            />
+          </div>
+        )}
+
+        {/* status */}
+        {!isArchived && (
+          <div className="py-2">
+            <FilterStatus
+              appliedFilters={(filters.status as TModuleStatus[]) ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("status", val)}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* lead */}
+        <div className="py-2">
+          <FilterLead
+            appliedFilters={filters.lead ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("lead", val)}
+            searchQuery={filtersSearchQuery}
+            memberIds={memberIds}
+          />
+        </div>
+
+        {/* members */}
+        <div className="py-2">
+          <FilterMembers
+            appliedFilters={filters.members ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("members", val)}
+            searchQuery={filtersSearchQuery}
+            memberIds={memberIds}
+          />
+        </div>
+
+        {/* start date */}
+        <div className="py-2">
+          <FilterStartDate
+            appliedFilters={filters.start_date ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("start_date", val)}
+            searchQuery={filtersSearchQuery}
+          />
+        </div>
+
+        {/* target date */}
+        <div className="py-2">
+          <FilterTargetDate
+            appliedFilters={filters.target_date ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("target_date", val)}
+            searchQuery={filtersSearchQuery}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});

apps/web/core/components/modules/dropdowns/filters/start-date.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+// constants
+import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
+// components
+import { isInDateFormat } from "@plane/utils";
+import { DateFilterModal } from "@/components/core/filters/date-filter-modal";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+
+// helpers
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string | string[]) => void;
+  searchQuery: string;
+};
+
+export const FilterStartDate: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = DATE_AFTER_FILTER_OPTIONS.filter((d) =>
+    d.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const isCustomDateSelected = () => {
+    const isValidDateSelected = appliedFilters?.filter((f) => isInDateFormat(f.split(";")[0])) || [];
+    return isValidDateSelected.length > 0 ? true : false;
+  };
+  const handleCustomDate = () => {
+    if (isCustomDateSelected()) {
+      const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
+      handleUpdate(updateAppliedFilters);
+    } else setIsDateFilterModalOpen(true);
+  };
+
+  return (
+    <>
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          handleClose={() => setIsDateFilterModalOpen(false)}
+          isOpen={isDateFilterModalOpen}
+          onSelect={(val) => handleUpdate(val)}
+          title="Start date"
+        />
+      )}
+      <FilterHeader
+        title={`Start date${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.map((option) => (
+                <FilterOption
+                  key={option.value}
+                  isChecked={appliedFilters?.includes(option.value) ? true : false}
+                  onClick={() => handleUpdate(option.value)}
+                  title={option.name}
+                  multiple
+                />
+              ))}
+              <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
+            </>
+          ) : (
+            <p className="text-xs italic text-custom-text-400">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});

apps/web/core/components/modules/dropdowns/filters/status.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import { MODULE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { ModuleStatusIcon } from "@plane/propel/icons";
+import type { TModuleStatus } from "@plane/types";
+// components
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+
+type Props = {
+  appliedFilters: TModuleStatus[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterStatus: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+  // states
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  const { t } = useTranslation();
+
+  const filteredOptions = MODULE_STATUS.filter((p) => p.value.includes(searchQuery.toLowerCase()));
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  return (
+    <>
+      <FilterHeader
+        title={`Status${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            filteredOptions.map((status) => (
+              <FilterOption
+                key={status.value}
+                isChecked={appliedFilters?.includes(status.value) ? true : false}
+                onClick={() => handleUpdate(status.value)}
+                icon={<ModuleStatusIcon status={status.value} />}
+                title={t(status.i18n_label)}
+              />
+            ))
+          ) : (
+            <p className="text-xs italic text-custom-text-400">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});

apps/web/core/components/modules/dropdowns/filters/target-date.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+// plane constants
+import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
+// components
+import { isInDateFormat } from "@plane/utils";
+import { DateFilterModal } from "@/components/core/filters/date-filter-modal";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// helpers
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string | string[]) => void;
+  searchQuery: string;
+};
+
+export const FilterTargetDate: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = DATE_AFTER_FILTER_OPTIONS.filter((d) =>
+    d.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const isCustomDateSelected = () => {
+    const isValidDateSelected = appliedFilters?.filter((f) => isInDateFormat(f.split(";")[0])) || [];
+    return isValidDateSelected.length > 0 ? true : false;
+  };
+  const handleCustomDate = () => {
+    if (isCustomDateSelected()) {
+      const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
+      handleUpdate(updateAppliedFilters);
+    } else setIsDateFilterModalOpen(true);
+  };
+
+  return (
+    <>
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          handleClose={() => setIsDateFilterModalOpen(false)}
+          isOpen={isDateFilterModalOpen}
+          onSelect={(val) => handleUpdate(val)}
+          title="Due date"
+        />
+      )}
+      <FilterHeader
+        title={`Due date${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.map((option) => (
+                <FilterOption
+                  key={option.value}
+                  isChecked={appliedFilters?.includes(option.value) ? true : false}
+                  onClick={() => handleUpdate(option.value)}
+                  title={option.name}
+                  multiple
+                />
+              ))}
+              <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
+            </>
+          ) : (
+            <p className="text-xs italic text-custom-text-400">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});

apps/web/core/components/modules/dropdowns/index.ts

@@ -0,0 +1,2 @@
+export * from "./filters";
+export * from "./order-by";

apps/web/core/components/modules/dropdowns/order-by.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check, ChevronDown } from "lucide-react";
+import { MODULE_ORDER_BY_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { getButtonStyling } from "@plane/propel/button";
+import type { TModuleOrderByOptions } from "@plane/types";
+// ui
+import { CustomMenu } from "@plane/ui";
+// helpers
+import { cn } from "@plane/utils";
+// types
+// constants
+
+type Props = {
+  onChange: (value: TModuleOrderByOptions) => void;
+  value: TModuleOrderByOptions | undefined;
+};
+
+export const ModuleOrderByDropdown: React.FC<Props> = (props) => {
+  const { onChange, value } = props;
+  // hooks
+  const { t } = useTranslation();
+
+  const orderByDetails = MODULE_ORDER_BY_OPTIONS.find((option) => value?.includes(option.key));
+
+  const isDescending = value?.[0] === "-";
+  const isManual = value?.includes("sort_order");
+
+  return (
+    <CustomMenu
+      customButton={
+        <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
+          {!isDescending ? <ArrowUpWideNarrow className="size-3 " /> : <ArrowDownWideNarrow className="size-3 " />}
+          {orderByDetails && t(orderByDetails?.i18n_label)}
+          <ChevronDown className="size-3" strokeWidth={2} />
+        </div>
+      }
+      placement="bottom-end"
+      maxHeight="lg"
+      closeOnSelect
+    >
+      {MODULE_ORDER_BY_OPTIONS.map((option) => (
+        <CustomMenu.MenuItem
+          key={option.key}
+          className="flex items-center justify-between gap-2"
+          onClick={() => {
+            if (isDescending && !isManual) onChange(`-${option.key}` as TModuleOrderByOptions);
+            else onChange(option.key);
+          }}
+        >
+          {t(option.i18n_label)}
+          {value?.includes(option.key) && <Check className="h-3 w-3" />}
+        </CustomMenu.MenuItem>
+      ))}
+      {!isManual && (
+        <>
+          <hr className="my-2 border-custom-border-200" />
+          <CustomMenu.MenuItem
+            className="flex items-center justify-between gap-2"
+            onClick={() => {
+              if (isDescending) onChange(value.slice(1) as TModuleOrderByOptions);
+            }}
+          >
+            Ascending
+            {!isDescending && <Check className="h-3 w-3" />}
+          </CustomMenu.MenuItem>
+          <CustomMenu.MenuItem
+            className="flex items-center justify-between gap-2"
+            onClick={() => {
+              if (!isDescending) onChange(`-${value}` as TModuleOrderByOptions);
+            }}
+          >
+            Descending
+            {isDescending && <Check className="h-3 w-3" />}
+          </CustomMenu.MenuItem>
+        </>
+      )}
+    </CustomMenu>
+  );
+};