github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: filter saving store and ui updates

Browse Source
This commit is contained in:
gurusainath 2024-02-10 14:15:57 +05:30
parent 0fb531e4b7
commit 5d9393cfa6
11 changed files with 176 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/components/view/display-filters/dropdown.tsx
View File

@ -2,6 +2,7 @@ import { FC, Fragment, ReactNode, useRef, useState } from "react";
import { observer } from "mobx-react-lite";
import { Combobox } from "@headlessui/react";
import { usePopper } from "react-popper";
import { Placement } from "@popperjs/core";
import { MonitorDot } from "lucide-react";
// hooks
import useOutsideClickDetector from "hooks/use-outside-click-detector";
@ -21,10 +22,20 @@ type TViewDisplayFiltersDropdown = {
viewOperations: TViewOperations;
children?: ReactNode;
displayDropdownText?: boolean;
dropdownPlacement?: Placement;
};
export const ViewDisplayFiltersDropdown: FC<TViewDisplayFiltersDropdown> = observer((props) => {
const { workspaceSlug, projectId, viewId, viewType, viewOperations, children, displayDropdownText = true } = props;
const {
workspaceSlug,
projectId,
viewId,
viewType,
viewOperations,
children,
displayDropdownText = true,
dropdownPlacement = "bottom-start",
} = props;
// state
const [dropdownToggle, setDropdownToggle] = useState(false);
// refs
@ -34,7 +45,7 @@ export const ViewDisplayFiltersDropdown: FC<TViewDisplayFiltersDropdown> = obser
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
// popper-js init
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: "bottom-start",
placement: dropdownPlacement,
modifiers: [
{
name: "preventOverflow",
@ -42,6 +53,12 @@ export const ViewDisplayFiltersDropdown: FC<TViewDisplayFiltersDropdown> = obser
padding: 12,
},
},
{
name: "offset",
options: {
offset: [0, 10],
},
},
],
});

49
web/components/view/helpers/filters.tsx
View File

@ -1,49 +0,0 @@
// hooks
import { useProject, useProjectState, useMember } from "hooks/store";
// types
import { TViewFilters } from "@plane/types";
type TFilterPropertyItemByFilterKeyAndId = {
key: keyof TViewFilters;
id: string;
icon: string;
title: string;
};
export const filterPropertyItemByFilterKeyAndId = (
key: keyof TViewFilters,
id: string
): TFilterPropertyItemByFilterKeyAndId | undefined => {
if (!key || id) return undefined;
switch (key) {
case "project":
return undefined; // store
case "module":
return undefined; // store
case "cycle":
return undefined; // store
case "priority":
return undefined; // constant
case "state":
return undefined; // store
case "state_group":
return undefined; // constant
case "assignees":
return undefined; // store -> workspace and project level
case "mentions":
return undefined; // store -> workspace and project level
case "subscriber":
return undefined; // store -> workspace and project level
case "created_by":
return undefined; // store -> workspace and project level
case "labels":
return undefined; // store -> workspace and project level
case "start_date":
return undefined; // constants
case "target_date":
return undefined; // constants
default:
return undefined;
}
};

9
web/components/view/index.ts
View File

@ -1,13 +1,12 @@
export * from "./all-issues-root";
export * from "./root";
// views
export * from "./views/root";
export * from "./views/view-item";
export * from "./views/dropdown/root";
export * from "./views/dropdown/dropdown-item";
export * from "./views/view-dropdown";
export * from "./views/view-dropdown-item";
export * from "./views/create-edit-form";
export * from "./views/edit-dropdown";
// layouts
export * from "./layout";

4
web/components/view/layout.tsx
View File

@ -6,7 +6,7 @@ import { useViewDetail } from "hooks/store";
// ui
import { Tooltip } from "@plane/ui";
// types
import { TViewTypes } from "@plane/types";
import { TViewLayouts, TViewTypes } from "@plane/types";
import { TViewOperations } from "./types";
type TViewLayoutRoot = {
@ -17,7 +17,7 @@ type TViewLayoutRoot = {
viewOperations: TViewOperations;
};
const LAYOUTS_DATA: { key: string; title: string; icon: LucideIcon }[] = [
const LAYOUTS_DATA: { key: TViewLayouts; title: string; icon: LucideIcon }[] = [
{ key: "list", title: "List Layout", icon: List },
{ key: "kanban", title: "Kanban Layout", icon: Kanban },
{ key: "calendar", title: "Calendar Layout", icon: Calendar },

59
web/components/view/all-issues-root.tsx → web/components/view/root.tsx
View File

@ -1,7 +1,7 @@
import { FC, Fragment, useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { observer } from "mobx-react-lite";
import { CheckCircle, ChevronDown, ChevronUp, Pencil } from "lucide-react";
import { CheckCircle, Pencil } from "lucide-react";
// hooks
import { useView, useViewDetail } from "hooks/store";
import useToast from "hooks/use-toast";
@ -15,6 +15,7 @@ import {
ViewAppliedFiltersRoot,
ViewDuplicateConfirmationModal,
ViewDeleteConfirmationModal,
ViewEditDropdown,
} from ".";
// ui
import { Spinner } from "@plane/ui";
@ -24,7 +25,7 @@ import { viewLocalPayload } from "constants/view";
import { TViewOperations } from "./types";
import { TView, TViewFilters, TViewDisplayFilters, TViewDisplayProperties, TViewTypes } from "@plane/types";
type TAllIssuesViewRoot = {
type TGlobalViewRoot = {
workspaceSlug: string;
projectId: string | undefined;
viewId: string;
@ -38,7 +39,7 @@ type TViewOperationsToggle = {
viewId: string | undefined;
};
export const AllIssuesViewRoot: FC<TAllIssuesViewRoot> = observer((props) => {
export const GlobalViewRoot: FC<TGlobalViewRoot> = observer((props) => {
const { workspaceSlug, projectId, viewId, viewType, baseRoute, workspaceViewTabOptions } = props;
// hooks
const viewStore = useView(workspaceSlug, projectId, viewType);
@ -112,7 +113,7 @@ export const AllIssuesViewRoot: FC<TAllIssuesViewRoot> = observer((props) => {
[viewStore, viewDetailStore, setToastAlert, viewOperationsToggle, viewDetailCreateStore]
);
// fetch all issues
// fetch all views
useEffect(() => {
const fetchViews = async () => {
await viewStore?.fetch(viewStore?.viewIds.length > 0 ? "mutation-loader" : "init-loader");
@ -130,28 +131,33 @@ export const AllIssuesViewRoot: FC<TAllIssuesViewRoot> = observer((props) => {
return (
<div className="relative w-full h-full">
<div className="relative flex justify-between items-center gap-2 px-5 py-4">
<div className="relative flex items-center gap-2">
<div className="relative flex items-center gap-2 px-5 py-4">
<div className="relative flex items-center gap-2 overflow-hidden">
<div className="flex-shrink-0 w-6 h-6 rounded relative flex justify-center items-center bg-custom-background-80">
<CheckCircle size={12} />
</div>
<div className="font-medium">All Issues</div>
<div className="font-medium inline-block whitespace-nowrap overflow-hidden truncate line-clamp-1">
All Issues
</div>
</div>
<div className="relative inline-flex items-center rounded border border-custom-border-200 bg-custom-background-80">
{workspaceViewTabOptions.map((tab) => (
<Link
key={tab.key}
href={tab.href}
className={`p-4 py-1.5 rounded text-sm transition-all cursor-pointer font-medium
<div className="ml-auto relative flex items-center gap-3">
<div className="relative flex items-center rounded border border-custom-border-200 bg-custom-background-80">
{workspaceViewTabOptions.map((tab) => (
<Link
key={tab.key}
href={tab.href}
className={`p-4 py-1.5 rounded text-sm transition-all cursor-pointer font-medium
${
viewType === tab.key
? "text-custom-text-100 bg-custom-background-100"
: "text-custom-text-200 bg-custom-background-80 hover:text-custom-text-100"
}`}
>
{tab.title}
</Link>
))}
>
{tab.title}
</Link>
))}
</div>
</div>
</div>
@ -201,7 +207,7 @@ export const AllIssuesViewRoot: FC<TAllIssuesViewRoot> = observer((props) => {
viewId={viewId}
viewType={viewType}
viewOperations={viewOperations}
displayDropdownText={true}
displayDropdownText={false}
/>
</div>
@ -212,7 +218,7 @@ export const AllIssuesViewRoot: FC<TAllIssuesViewRoot> = observer((props) => {
viewId={viewId}
viewType={viewType}
viewOperations={viewOperations}
displayDropdownText={true}
displayDropdownText={false}
/>
</div>
@ -222,14 +228,13 @@ export const AllIssuesViewRoot: FC<TAllIssuesViewRoot> = observer((props) => {
</div>
</div>
<div className=" relative flex items-center rounded h-7 transition-all cursor-pointer bg-custom-primary-100/20 text-custom-primary-100">
<div className="text-sm px-3 font-medium h-full border-r border-white/50 flex justify-center items-center rounded-l transition-all hover:bg-custom-primary-100/30">
Update
</div>
<div className="flex-shrink-0 px-1.5 hover:bg-custom-primary-100/30 h-full flex justify-center items-center rounded-r transition-all">
<ChevronDown size={16} />
</div>
</div>
<ViewEditDropdown
workspaceSlug={workspaceSlug}
projectId={projectId}
viewId={viewId}
viewType={viewType}
viewOperations={viewOperations}
/>
</div>
</>
)}

41
web/components/view/views/edit-dropdown.tsx Normal file
View File

@ -0,0 +1,41 @@
import { FC } from "react";
import { ChevronDown } from "lucide-react";
import { observer } from "mobx-react-lite";
// hooks
import { useViewDetail } from "hooks/store";
// components
// types
import { TViewTypes } from "@plane/types";
import { TViewOperations } from "../types";
type TViewEditDropdown = {
workspaceSlug: string;
projectId: string | undefined;
viewId: string;
viewType: TViewTypes;
viewOperations: TViewOperations;
};
export const ViewEditDropdown: FC<TViewEditDropdown> = observer((props) => {
const { workspaceSlug, projectId, viewId, viewType, viewOperations } = props;
// hooks
const viewDetailStore = useViewDetail(workspaceSlug, projectId, viewId, viewType);
if (!viewDetailStore?.isFiltersUpdateEnabled) return <></>;
return (
<>
<div className=" relative flex items-center rounded h-7 transition-all cursor-pointer bg-custom-primary-100/20 text-custom-primary-100">
<button
className="text-sm px-3 font-medium h-full border-r border-white/50 flex justify-center items-center rounded-l transition-all hover:bg-custom-primary-100/30"
disabled={viewDetailStore?.loader === "filters_submitting"}
onClick={() => viewOperations.update()}
>
Update
</button>
<div className="flex-shrink-0 px-1.5 hover:bg-custom-primary-100/30 h-full flex justify-center items-center rounded-r transition-all">
<ChevronDown size={16} />
</div>
</div>
</>
);
});

0
web/components/view/views/dropdown/dropdown-item.tsx → web/components/view/views/view-dropdown-item.tsx
View File

27
web/components/view/views/dropdown/root.tsx → web/components/view/views/view-dropdown.tsx
View File

@ -1,15 +1,16 @@
import { FC, Fragment, ReactNode, useRef, useState } from "react";
import { Combobox } from "@headlessui/react";
import { usePopper } from "react-popper";
import { Placement } from "@popperjs/core";
import { Plus, Search } from "lucide-react";
// hooks
import useOutsideClickDetector from "hooks/use-outside-click-detector";
import { useView } from "hooks/store";
// components
import { ViewDropdownItem } from "../../";
import { ViewDropdownItem } from "..";
// types
import { TViewTypes } from "@plane/types";
import { TViewOperations } from "../../types";
import { TViewOperations } from "../types";
type TViewDropdown = {
workspaceSlug: string;
@ -19,10 +20,20 @@ type TViewDropdown = {
viewOperations: TViewOperations;
children?: ReactNode;
baseRoute: string;
dropdownPlacement?: Placement;
};
export const ViewDropdown: FC<TViewDropdown> = (props) => {
const { workspaceSlug, projectId, viewId: currentViewId, viewType, viewOperations, children, baseRoute } = props;
const {
workspaceSlug,
projectId,
viewId: currentViewId,
viewType,
viewOperations,
children,
baseRoute,
dropdownPlacement = "bottom-start",
} = props;
// hooks
const viewStore = useView(workspaceSlug, projectId, viewType);
// states
@ -35,7 +46,7 @@ export const ViewDropdown: FC<TViewDropdown> = (props) => {
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
// popper-js init
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: "bottom-start",
placement: dropdownPlacement,
modifiers: [
{
name: "preventOverflow",
@ -43,6 +54,12 @@ export const ViewDropdown: FC<TViewDropdown> = (props) => {
padding: 12,
},
},
{
name: "offset",
options: {
offset: [0, 10],
},
},
],
});
@ -80,7 +97,7 @@ export const ViewDropdown: FC<TViewDropdown> = (props) => {
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
className="my-1 w-64 p-2 space-y-2 rounded bg-custom-background-100 border-[0.5px] border-custom-border-300 shadow-custom-shadow-rg focus:outline-none"
className="w-64 p-2 space-y-2 rounded bg-custom-background-100 border-[0.5px] border-custom-border-300 shadow-custom-shadow-rg focus:outline-none"
>
<div className="relative p-0.5 px-2 text-sm flex items-center gap-2 rounded border border-custom-border-100 bg-custom-background-90">
<Search className="h-3 w-3 text-custom-text-300" strokeWidth={1.5} />

4
web/pages/[workspaceSlug]/views/public/[viewId].tsx
View File

@ -3,7 +3,7 @@ import { useRouter } from "next/router";
// layouts
import { AppLayout } from "layouts/app-layout";
// components
import { AllIssuesViewRoot } from "components/view";
import { GlobalViewRoot } from "components/view";
// types
import { NextPageWithLayout } from "lib/types";
// constants
@ -33,7 +33,7 @@ const WorkspacePublicViewPage: NextPageWithLayout = () => {
return (
<div className="w-full h-full overflow-hidden bg-custom-background-100 relative flex flex-col">
<div className="flex-shrink-0 w-full">
<AllIssuesViewRoot
<GlobalViewRoot
workspaceSlug={workspaceSlug.toString()}
projectId={undefined}
viewId={viewId.toString()}

70
web/store/view/view.store.ts
View File

@ -3,6 +3,7 @@ import set from "lodash/set";
import update from "lodash/update";
import concat from "lodash/concat";
import pull from "lodash/pull";
import isEqual from "lodash/isEqual";
// store
import { RootStore } from "store/root.store";
// types
@ -18,7 +19,7 @@ import {
// helpers
import { FiltersHelper } from "./helpers/filters_helpers";
type TLoader = "submitting" | "submit" | undefined;
type TLoader = "filters_submit" | "filters_submitting" | "update" | "updating" | undefined;
export type TViewStore = TView & {
// observables
@ -28,6 +29,7 @@ export type TViewStore = TView & {
appliedFilters: TViewFilterProps | undefined;
appliedFiltersQueryParams: string | undefined;
isFiltersApplied: boolean;
isFiltersUpdateEnabled: boolean;
// helper actions
setName: (name: string) => void;
setDescription: (description: string) => void;
@ -37,11 +39,11 @@ export type TViewStore = TView & {
resetChanges: () => void;
saveChanges: () => Promise<void>;
// actions
update: (viewData: Partial<TView>) => Promise<void>;
lockView: () => Promise<void>;
unlockView: () => Promise<void>;
makeFavorite: () => Promise<void>;
removeFavorite: () => Promise<void>;
update: (viewData: Partial<TView>) => Promise<void>;
};
export class ViewStore extends FiltersHelper implements TViewStore {
@ -102,10 +104,14 @@ export class ViewStore extends FiltersHelper implements TViewStore {
this.updated_by = _view.updated_by;
this.created_at = _view.created_at;
this.updated_at = _view.updated_at;
this.is_local_view = _view.is_local_view;
this.is_create = _view.is_create;
this.is_editable = _view.is_editable;
this.filtersToUpdate = {
filters: this.computedFilters(_view.filters),
display_filters: this.computedDisplayFilters(_view.display_filters),
display_properties: this.computedDisplayProperties(_view.display_properties),
};
makeObservable(this, {
// observables
@ -137,6 +143,7 @@ export class ViewStore extends FiltersHelper implements TViewStore {
appliedFilters: computed,
appliedFiltersQueryParams: computed,
isFiltersApplied: computed,
isFiltersUpdateEnabled: computed,
// helper actions
setName: action,
setFilters: action,
@ -148,6 +155,8 @@ export class ViewStore extends FiltersHelper implements TViewStore {
update: action,
lockView: action,
unlockView: action,
makeFavorite: action,
removeFavorite: action,
});
}
@ -179,6 +188,17 @@ export class ViewStore extends FiltersHelper implements TViewStore {
return isFiltersApplied;
}
get isFiltersUpdateEnabled() {
const filters = this.filters;
const appliedFilters = this.appliedFilters?.filters;
let isFiltersUpdateEnabled = false;
Object.keys(appliedFilters).forEach((key) => {
const _key = key as keyof TViewFilters;
if (!isEqual(appliedFilters[_key].slice().sort(), filters[_key].slice().sort())) isFiltersUpdateEnabled = true;
});
return isFiltersUpdateEnabled;
}
// helper actions
setName = (name: string) => {
runInAction(() => {
@ -194,10 +214,8 @@ export class ViewStore extends FiltersHelper implements TViewStore {
setFilters = (filterKey: keyof TViewFilters | undefined = undefined, filterValue: "clear_all" | string) => {
runInAction(() => {
this.loader = "submit";
if (filterKey === undefined) {
if (filterValue === "clear_all") set(this.filtersToUpdate, ["filters"], {});
this.loader = undefined;
} else
update(this.filtersToUpdate, ["filters", filterKey], (_values = []) => {
if (filterValue === "clear_all") return [];
@ -238,7 +256,6 @@ export class ViewStore extends FiltersHelper implements TViewStore {
resetChanges = () => {
runInAction(() => {
this.loader = undefined;
this.filtersToUpdate = {
name: this.name,
description: this.description,
@ -251,11 +268,8 @@ export class ViewStore extends FiltersHelper implements TViewStore {
saveChanges = async () => {
try {
this.loader = "submitting";
if (this.filtersToUpdate) await this.update(this.filtersToUpdate);
this.loader = undefined;
} catch {
this.loader = undefined;
Object.keys(this.filtersToUpdate).forEach((key) => {
const _key = key as keyof TView;
set(this, _key, this.filtersToUpdate[_key]);
@ -264,6 +278,25 @@ export class ViewStore extends FiltersHelper implements TViewStore {
};
// actions
update = async (viewData: Partial<TView>) => {
try {
const { workspaceSlug, projectId } = this.store.app.router;
if (!workspaceSlug || !this.id) return;
const view = await this.service.update(workspaceSlug, this.id, viewData, projectId);
if (!view) return;
runInAction(() => {
Object.keys(viewData).forEach((key) => {
const _key = key as keyof TView;
set(this, _key, viewData[_key]);
});
});
} catch {
this.resetChanges();
}
};
lockView = async () => {
try {
const { workspaceSlug, projectId } = this.store.app.router;
@ -327,23 +360,4 @@ export class ViewStore extends FiltersHelper implements TViewStore {
this.is_favorite = this.is_favorite;
}
};
update = async (viewData: Partial<TView>) => {
try {
const { workspaceSlug, projectId } = this.store.app.router;
if (!workspaceSlug || !this.id) return;
const view = await this.service.update(workspaceSlug, this.id, viewData, projectId);
if (!view) return;
runInAction(() => {
Object.keys(viewData).forEach((key) => {
const _key = key as keyof TView;
set(this, _key, viewData[_key]);
});
});
} catch {
this.resetChanges();
}
};
}

18
yarn.lock
View File

@ -5012,7 +5012,7 @@ fault@^2.0.0:
dependencies:
format "^0.2.0"
fflate@^0.4.1:
fflate@^0.4.8:
version "0.4.8"
resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
@ -7171,12 +7171,18 @@ postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.29:
picocolors "^1.0.0"
source-map-js "^1.0.2"
posthog-js@^1.88.4:
version "1.96.1"
resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.96.1.tgz#4f9719a24e4e14037b0e72d430194d7cdb576447"
integrity sha512-kv1vQqYMt2BV3YHS+wxsbGuP+tz+M3y1AzNhz8TfkpY1HT8W/ONT0i0eQpeRr9Y+d4x/fZ6M4cXG5GMvi9lRCA==
posthog-js@^1.105.0:
version "1.105.6"
resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.105.6.tgz#3544de4389d5c7743fa420178bd127e49c4dc825"
integrity sha512-5ITXsh29XIuNohHLy21nawGnfFZDpyt+yfnWge9sJl5yv0nNuoUmLiDgw1tJafoqGrfd5CUasKyzSI21HxsSeQ==
dependencies:
fflate "^0.4.1"
fflate "^0.4.8"
preact "^10.19.3"
preact@^10.19.3:
version "10.19.4"
resolved "https://registry.yarnpkg.com/preact/-/preact-10.19.4.tgz#735d331d5b1bd2182cc36f2ba481fd6f0da3fe3b"
integrity sha512-dwaX5jAh0Ga8uENBX1hSOujmKWgx9RtL80KaKUFLc6jb4vCEAc3EeZ0rnQO/FO4VgjfPMfoLFWnNG8bHuZ9VLw==
prebuild-install@^7.1.1:
version "7.1.1"