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: stabilising the views

Browse Source
This commit is contained in:
gurusainath 2024-02-13 12:28:05 +05:30
parent badb190c25
commit 608eea67f7
19 changed files with 132 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/components/view/applied-filters/filter-item.tsx
View File

@ -1,10 +1,9 @@
import { FC } from "react";
import { ImagePlus, X } from "lucide-react";
// hooks
import { useViewFilter } from "hooks/store";
import { useViewDetail, useViewFilter } from "hooks/store";
// types
import { TViewFilters, TViewTypes } from "@plane/types";
import { TViewOperations } from "../types";
type TViewAppliedFiltersItem = {
workspaceSlug: string;
@ -13,18 +12,18 @@ type TViewAppliedFiltersItem = {
viewType: TViewTypes;
filterKey: keyof TViewFilters;
propertyId: string;
viewOperations: TViewOperations;
};
export const ViewAppliedFiltersItem: FC<TViewAppliedFiltersItem> = (props) => {
const { workspaceSlug, projectId, filterKey, propertyId, viewOperations } = props;
const { workspaceSlug, projectId, viewId, viewType, filterKey, propertyId } = props;
// hooks
const viewDetailStore = useViewDetail(workspaceSlug, projectId, viewId, viewType);
const viewFilterHelper = useViewFilter(workspaceSlug, projectId);
const propertyDetail = viewFilterHelper?.propertyDetails(filterKey, propertyId) || undefined;
const removeFilterOption = () => {
viewOperations?.setFilters(filterKey, propertyId);
viewDetailStore?.setFilters(filterKey, propertyId);
};
return (

5
web/components/view/applied-filters/filter.tsx
View File

@ -8,7 +8,6 @@ import { useViewDetail, useViewFilter } from "hooks/store";
import { ViewAppliedFiltersItem } from "./filter-item";
// types
import { TViewFilters, TViewTypes } from "@plane/types";
import { TViewOperations } from "../types";
type TViewAppliedFilters = {
workspaceSlug: string;
@ -16,12 +15,11 @@ type TViewAppliedFilters = {
viewId: string;
viewType: TViewTypes;
filterKey: keyof TViewFilters;
viewOperations: TViewOperations;
propertyVisibleCount?: number | undefined;
};
export const ViewAppliedFilters: FC<TViewAppliedFilters> = observer((props) => {
const { workspaceSlug, projectId, viewId, viewType, filterKey, viewOperations, propertyVisibleCount } = props;
const { workspaceSlug, projectId, viewId, viewType, filterKey, propertyVisibleCount } = props;
// hooks
const viewDetailStore = useViewDetail(workspaceSlug, projectId, viewId, viewType);
const viewFilterStore = useViewFilter(workspaceSlug, projectId);
@ -58,7 +56,6 @@ export const ViewAppliedFilters: FC<TViewAppliedFilters> = observer((props) => {
viewType={viewType}
filterKey={filterKey}
propertyId={propertyId}
viewOperations={viewOperations}
/>
</Fragment>
))}

19
web/components/view/applied-filters/root.tsx
View File

@ -8,37 +8,27 @@ import { useViewDetail } from "hooks/store";
import { ViewAppliedFilters } from "./filter";
// types
import { TViewTypes, TViewFilters } from "@plane/types";
import { TViewOperations } from "../types";
type TViewAppliedFiltersRoot = {
workspaceSlug: string;
projectId: string | undefined;
viewId: string;
viewType: TViewTypes;
viewOperations: TViewOperations;
propertyVisibleCount?: number | undefined;
showClearAll?: boolean;
};
export const ViewAppliedFiltersRoot: FC<TViewAppliedFiltersRoot> = observer((props) => {
const {
workspaceSlug,
projectId,
viewId,
viewType,
viewOperations,
propertyVisibleCount = undefined,
showClearAll = false,
} = props;
const { workspaceSlug, projectId, viewId, viewType, propertyVisibleCount = undefined, showClearAll = false } = props;
// hooks
const viewDetailStore = useViewDetail(workspaceSlug, projectId, viewId, viewType);
const filterKeys =
viewDetailStore?.appliedFilters && !isEmpty(viewDetailStore?.appliedFilters?.filters)
? Object.keys(viewDetailStore?.appliedFilters?.filters)
viewDetailStore?.filtersToUpdate && !isEmpty(viewDetailStore?.filtersToUpdate?.filters)
? Object.keys(viewDetailStore?.filtersToUpdate?.filters)
: undefined;
const clearAllFilters = () => viewOperations?.setFilters(undefined, "clear_all");
const clearAllFilters = () => viewDetailStore?.setFilters(undefined, "clear_all");
if (!filterKeys || !viewDetailStore?.isFiltersApplied)
return (
@ -58,7 +48,6 @@ export const ViewAppliedFiltersRoot: FC<TViewAppliedFiltersRoot> = observer((pro
viewId={viewId}
viewType={viewType}
filterKey={filterKey}
viewOperations={viewOperations}
propertyVisibleCount={propertyVisibleCount}
/>
</Fragment>

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

@ -11,7 +11,6 @@ import { ViewDisplayPropertiesRoot } from "../";
// ui
import { Tooltip } from "@plane/ui";
// types
import { TViewOperations } from "../types";
import { TViewTypes } from "@plane/types";
type TViewDisplayFiltersDropdown = {
@ -19,7 +18,6 @@ type TViewDisplayFiltersDropdown = {
projectId: string | undefined;
viewId: string;
viewType: TViewTypes;
viewOperations: TViewOperations;
children?: ReactNode;
displayDropdownText?: boolean;
dropdownPlacement?: Placement;
@ -31,7 +29,6 @@ export const ViewDisplayFiltersDropdown: FC<TViewDisplayFiltersDropdown> = obser
projectId,
viewId,
viewType,
viewOperations,
children,
displayDropdownText = true,
dropdownPlacement = "bottom-start",
@ -121,7 +118,6 @@ export const ViewDisplayFiltersDropdown: FC<TViewDisplayFiltersDropdown> = obser
projectId={projectId}
viewId={viewId}
viewType={viewType}
viewOperations={viewOperations}
/>
</div>

6
web/components/view/display-properties/property-selection.tsx
View File

@ -4,25 +4,23 @@ import { observer } from "mobx-react-lite";
import { useViewDetail } from "hooks/store";
// types
import { TViewDisplayProperties, TViewTypes } from "@plane/types";
import { TViewOperations } from "../types";
type TViewDisplayPropertySelection = {
workspaceSlug: string;
projectId: string | undefined;
viewId: string;
viewType: TViewTypes;
viewOperations: TViewOperations;
property: keyof TViewDisplayProperties;
};
export const ViewDisplayPropertySelection: FC<TViewDisplayPropertySelection> = observer((props) => {
const { workspaceSlug, projectId, viewId, viewType, viewOperations, property } = props;
const { workspaceSlug, projectId, viewId, viewType, property } = props;
// hooks
const viewDetailStore = useViewDetail(workspaceSlug, projectId, viewId, viewType);
const propertyIsSelected = viewDetailStore?.appliedFilters?.display_properties?.[property];
const handlePropertySelection = () => viewOperations?.setDisplayProperties(property);
const handlePropertySelection = () => viewDetailStore?.setDisplayProperties(property);
return (
<div

5
web/components/view/display-properties/root.tsx
View File

@ -4,18 +4,16 @@ import { observer } from "mobx-react-lite";
import { ViewDisplayPropertySelection } from "../";
// types
import { TViewDisplayProperties, TViewTypes } from "@plane/types";
import { TViewOperations } from "../types";
type TViewDisplayPropertiesRoot = {
workspaceSlug: string;
projectId: string | undefined;
viewId: string;
viewType: TViewTypes;
viewOperations: TViewOperations;
};
export const ViewDisplayPropertiesRoot: FC<TViewDisplayPropertiesRoot> = observer((props) => {
const { workspaceSlug, projectId, viewId, viewType, viewOperations } = props;
const { workspaceSlug, projectId, viewId, viewType } = props;
const displayProperties: Partial<keyof TViewDisplayProperties>[] = [
"key",
@ -40,7 +38,6 @@ export const ViewDisplayPropertiesRoot: FC<TViewDisplayPropertiesRoot> = observe
projectId={projectId}
viewId={viewId}
viewType={viewType}
viewOperations={viewOperations}
property={property}
/>
</Fragment>

4
web/components/view/filters/dropdown.tsx
View File

@ -11,7 +11,6 @@ import { ViewFiltersRoot } from "../";
// ui
import { Tooltip } from "@plane/ui";
// types
import { TViewOperations } from "../types";
import { TViewTypes } from "@plane/types";
type TViewFiltersDropdown = {
@ -19,7 +18,6 @@ type TViewFiltersDropdown = {
projectId: string | undefined;
viewId: string;
viewType: TViewTypes;
viewOperations: TViewOperations;
children?: ReactNode;
displayDropdownText?: boolean;
dropdownPlacement?: Placement;
@ -31,7 +29,6 @@ export const ViewFiltersDropdown: FC<TViewFiltersDropdown> = observer((props) =>
projectId,
viewId,
viewType,
viewOperations,
children,
displayDropdownText = true,
dropdownPlacement = "bottom-start",
@ -133,7 +130,6 @@ export const ViewFiltersDropdown: FC<TViewFiltersDropdown> = observer((props) =>
projectId={projectId}
viewId={viewId}
viewType={viewType}
viewOperations={viewOperations}
dateCustomFilterToggle={dateCustomFilterToggle}
setDateCustomFilterToggle={setDateCustomFilterToggle}
/>

18
web/components/view/filters/edit-dropdown.tsx
View File

@ -50,20 +50,22 @@ export const ViewFiltersEditDropdown: FC<TViewFiltersEditDropdown> = observer((p
// dropdown options
const dropdownOptions: TViewFilterEditDropdownOptions[] = useMemo(
() => [
{
icon: PhotoFilterIcon,
key: "save_as_new",
label: "Save as new view",
onClick: () => viewOperations.update(),
},
// {
// icon: PhotoFilterIcon,
// key: "save_as_new",
// label: "Save as new view",
// onClick: () => {
// viewOperations.localViewCreateEdit(undefined, viewDetailStore?.filtersToUpdate);
// },
// },
{
icon: RotateCcw,
key: "reset_changes",
label: "Reset changes",
onClick: () => viewOperations.resetChanges(),
onClick: () => viewDetailStore?.resetChanges(),
},
],
[viewOperations]
[viewOperations, viewDetailStore]
);
if (!viewDetailStore?.isFiltersUpdateEnabled) return <></>;

22
web/components/view/filters/filter-item-root.tsx
View File

@ -6,7 +6,6 @@ import { useViewDetail, useViewFilter } from "hooks/store";
import { ViewFiltersItem, ViewFilterSelection } from "../";
import { DateFilterModal } from "components/core";
// types
import { TViewOperations } from "../types";
import { TViewFilters, TViewTypes } from "@plane/types";
type TViewFiltersItemRoot = {
@ -14,23 +13,14 @@ type TViewFiltersItemRoot = {
projectId: string | undefined;
viewId: string;
viewType: TViewTypes;
viewOperations: TViewOperations;
filterKey: keyof TViewFilters;
dateCustomFilterToggle: string | undefined;
setDateCustomFilterToggle: (value: string | undefined) => void;
};
export const ViewFiltersItemRoot: FC<TViewFiltersItemRoot> = observer((props) => {
const {
workspaceSlug,
projectId,
viewId,
viewType,
viewOperations,
filterKey,
dateCustomFilterToggle,
setDateCustomFilterToggle,
} = props;
const { workspaceSlug, projectId, viewId, viewType, filterKey, dateCustomFilterToggle, setDateCustomFilterToggle } =
props;
// hooks
const viewDetailStore = useViewDetail(workspaceSlug, projectId, viewId, viewType);
const viewFilterHelper = useViewFilter(workspaceSlug, projectId);
@ -47,15 +37,15 @@ export const ViewFiltersItemRoot: FC<TViewFiltersItemRoot> = observer((props) =>
const _propertyIds = viewDetailStore?.appliedFilters?.filters?.[filterKey] || [];
const selectedDates = _propertyIds.filter((id) => id.includes("-"));
if (selectedDates.length > 0)
selectedDates.forEach((date: string) => viewOperations?.setFilters(filterKey, date));
selectedDates.forEach((date: string) => viewDetailStore?.setFilters(filterKey, date));
else setDateCustomFilterToggle(filterKey);
} else viewOperations?.setFilters(filterKey, _propertyId);
} else viewOperations?.setFilters(filterKey, _propertyId);
} else viewDetailStore?.setFilters(filterKey, _propertyId);
} else viewDetailStore?.setFilters(filterKey, _propertyId);
};
const handleCustomDateSelection = (selectedDates: string[]) => {
selectedDates.forEach((date: string) => {
viewOperations?.setFilters(filterKey, date);
viewDetailStore?.setFilters(filterKey, date);
setDateCustomFilterToggle(undefined);
});
};

13
web/components/view/filters/root.tsx
View File

@ -9,7 +9,6 @@ import { useViewDetail } from "hooks/store";
// components
import { ViewFiltersItemRoot } from "../";
// types
import { TViewOperations } from "../types";
import { TViewFilters, TViewTypes } from "@plane/types";
import { VIEW_DEFAULT_FILTER_PARAMETERS } from "constants/view";
@ -18,21 +17,12 @@ type TViewFiltersRoot = {
projectId: string | undefined;
viewId: string;
viewType: TViewTypes;
viewOperations: TViewOperations;
dateCustomFilterToggle: string | undefined;
setDateCustomFilterToggle: (value: string | undefined) => void;
};
export const ViewFiltersRoot: FC<TViewFiltersRoot> = observer((props) => {
const {
workspaceSlug,
projectId,
viewId,
viewType,
viewOperations,
dateCustomFilterToggle,
setDateCustomFilterToggle,
} = props;
const { workspaceSlug, projectId, viewId, viewType, dateCustomFilterToggle, setDateCustomFilterToggle } = props;
// hooks
const viewDetailStore = useViewDetail(workspaceSlug, projectId, viewId, viewType);
// state
@ -70,7 +60,6 @@ export const ViewFiltersRoot: FC<TViewFiltersRoot> = observer((props) => {
projectId={projectId}
viewId={viewId}
viewType={viewType}
viewOperations={viewOperations}
filterKey={filterKey}
dateCustomFilterToggle={dateCustomFilterToggle}
setDateCustomFilterToggle={setDateCustomFilterToggle}

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

@ -7,14 +7,12 @@ import { useViewDetail } from "hooks/store";
import { Tooltip } from "@plane/ui";
// types
import { TViewLayouts, TViewTypes } from "@plane/types";
import { TViewOperations } from "./types";
type TViewLayoutRoot = {
workspaceSlug: string;
projectId: string | undefined;
viewId: string;
viewType: TViewTypes;
viewOperations: TViewOperations;
};
const LAYOUTS_DATA: { key: TViewLayouts; title: string; icon: LucideIcon }[] = [
@ -26,10 +24,11 @@ const LAYOUTS_DATA: { key: TViewLayouts; title: string; icon: LucideIcon }[] = [
];
export const ViewLayoutRoot: FC<TViewLayoutRoot> = observer((props) => {
const { workspaceSlug, projectId, viewId, viewType, viewOperations } = props;
const { workspaceSlug, projectId, viewId, viewType } = props;
// hooks
const viewDetailStore = useViewDetail(workspaceSlug, projectId, viewId, viewType);
if (!viewDetailStore) return <></>;
return (
<div className="relative flex gap-0.5 items-center bg-custom-background-80 rounded p-1 shadow-custom-shadow-2xs">
{LAYOUTS_DATA.map((layout) => (
@ -43,7 +42,7 @@ export const ViewLayoutRoot: FC<TViewLayoutRoot> = observer((props) => {
: `hover:bg-custom-background-100`
}
`}
onClick={() => viewOperations.setDisplayFilters({ layout: layout.key })}
onClick={() => viewDetailStore.setDisplayFilters({ layout: layout.key })}
>
<layout.icon size={12} />
</div>

70
web/components/view/root.tsx
View File

@ -1,7 +1,9 @@
import { FC, Fragment, useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { observer } from "mobx-react-lite";
import { CheckCircle, Pencil } from "lucide-react";
import { CheckCircle } from "lucide-react";
import { v4 as uuidV4 } from "uuid";
import cloneDeep from "lodash/cloneDeep";
// hooks
import { useView, useViewDetail } from "hooks/store";
import useToast from "hooks/use-toast";
@ -24,7 +26,7 @@ import { Spinner } from "@plane/ui";
import { viewLocalPayload } from "constants/view";
// types
import { TViewOperations } from "./types";
import { TView, TViewFilters, TViewDisplayFilters, TViewDisplayProperties, TViewTypes } from "@plane/types";
import { TView, TViewTypes } from "@plane/types";
type TGlobalViewRoot = {
workspaceSlug: string;
@ -63,11 +65,19 @@ export const GlobalViewRoot: FC<TGlobalViewRoot> = observer((props) => {
const viewOperations: TViewOperations = useMemo(
() => ({
localViewCreateEdit: (viewId: string | undefined) => {
localViewCreateEdit: (viewId: string | undefined, currentView = undefined) => {
if (viewId === undefined) {
const viewPayload = viewLocalPayload;
handleViewOperationsToggle("CREATE", viewPayload.id);
viewStore?.localViewCreate(viewPayload as TView);
if (currentView !== undefined) {
// creating new view
const currentViewPayload = cloneDeep({ ...currentView, id: uuidV4() });
handleViewOperationsToggle("CREATE", currentViewPayload.id);
viewStore?.localViewCreate(currentViewPayload as TView);
} else {
// if current view is available, create a new view with the same data
const viewPayload = viewLocalPayload;
handleViewOperationsToggle("CREATE", viewPayload.id);
viewStore?.localViewCreate(viewPayload as TView);
}
} else {
handleViewOperationsToggle("EDIT", viewId);
viewDetailCreateEditStore?.setIsEditable(true);
@ -75,35 +85,9 @@ export const GlobalViewRoot: FC<TGlobalViewRoot> = observer((props) => {
},
localViewCreateEditClear: async (viewId: string | undefined) => {
if (viewDetailCreateEditStore?.is_create && viewId) viewStore?.remove(viewId);
if (viewDetailCreateEditStore?.is_editable && viewId) viewDetailCreateEditStore.resetChanges();
handleViewOperationsToggle(undefined, undefined);
},
resetChanges: () => viewDetailStore?.resetChanges(),
setName: (name: string) => {
if (viewOperationsToggle.type && ["CREATE", "EDIT"].includes(viewOperationsToggle.type))
viewDetailCreateEditStore?.setName(name);
else viewDetailStore?.setName(name);
},
setDescription: (name: string) => {
if (viewOperationsToggle.type && ["CREATE", "EDIT"].includes(viewOperationsToggle.type))
viewDetailCreateEditStore?.setDescription(name);
else viewDetailStore?.setDescription(name);
},
setFilters: (filterKey: keyof TViewFilters | undefined, filterValue: "clear_all" | string) => {
if (viewOperationsToggle.type && ["CREATE", "EDIT"].includes(viewOperationsToggle.type))
viewDetailCreateEditStore?.setFilters(filterKey, filterValue);
else viewDetailStore?.setFilters(filterKey, filterValue);
},
setDisplayFilters: (display_filters: Partial<TViewDisplayFilters>) => {
if (viewOperationsToggle.type && ["CREATE", "EDIT"].includes(viewOperationsToggle.type))
viewDetailCreateEditStore?.setDisplayFilters(display_filters);
else viewDetailStore?.setDisplayFilters(display_filters);
},
setDisplayProperties: (displayPropertyKey: keyof TViewDisplayProperties) => {
if (viewOperationsToggle.type && ["CREATE", "EDIT"].includes(viewOperationsToggle.type))
viewDetailCreateEditStore?.setDisplayProperties(displayPropertyKey);
else viewDetailStore?.setDisplayProperties(displayPropertyKey);
},
fetch: async () => {
try {
@ -168,7 +152,7 @@ export const GlobalViewRoot: FC<TGlobalViewRoot> = observer((props) => {
}
},
}),
[viewStore, viewDetailStore, setToastAlert, viewOperationsToggle, viewDetailCreateEditStore]
[viewStore, viewDetailStore, setToastAlert, viewDetailCreateEditStore]
);
// fetch all views
@ -243,19 +227,12 @@ export const GlobalViewRoot: FC<TGlobalViewRoot> = observer((props) => {
projectId={projectId}
viewId={viewId}
viewType={viewType}
viewOperations={viewOperations}
propertyVisibleCount={5}
/>
</div>
<div className="flex-shrink-0">
<ViewLayoutRoot
workspaceSlug={workspaceSlug}
projectId={projectId}
viewId={viewId}
viewType={viewType}
viewOperations={viewOperations}
/>
<ViewLayoutRoot workspaceSlug={workspaceSlug} projectId={projectId} viewId={viewId} viewType={viewType} />
</div>
<div className="flex-shrink-0">
@ -264,7 +241,6 @@ export const GlobalViewRoot: FC<TGlobalViewRoot> = observer((props) => {
projectId={projectId}
viewId={viewId}
viewType={viewType}
viewOperations={viewOperations}
displayDropdownText={false}
/>
</div>
@ -275,12 +251,16 @@ export const GlobalViewRoot: FC<TGlobalViewRoot> = observer((props) => {
projectId={projectId}
viewId={viewId}
viewType={viewType}
viewOperations={viewOperations}
displayDropdownText={false}
/>
</div>
<ViewEditDropdown viewId={viewId} viewOperations={viewOperations} />
<ViewEditDropdown
workspaceSlug={workspaceSlug}
projectId={projectId}
viewId={viewId}
viewOperations={viewOperations}
/>
<ViewFiltersEditDropdown
workspaceSlug={workspaceSlug}

11
web/components/view/types.d.ts vendored
View File

@ -1,17 +1,10 @@
import { LucideIcon } from "lucide-react";
// types
import { TView, TViewFilters, TViewDisplayFilters, TViewDisplayProperties } from "@plane/types";
import { TView, TUpdateView } from "@plane/types";
export type TViewOperations = {
localViewCreateEdit: (viewId: string | undefined) => void;
localViewCreateEdit: (viewId: string | undefined, currentView?: TUpdateView | undefined) => void;
localViewCreateEditClear: (viewId: string | undefined) => Promise<void>;
resetChanges: () => void;
setName: (name: string) => void;
setDescription: (description: string) => void;
setFilters: (filterKey: keyof TViewFilters | undefined, filterValue: "clear_all" | string) => void;
setDisplayFilters: (display_filters: Partial<TViewDisplayFilters>) => void;
setDisplayProperties: (displayPropertyKey: keyof TViewDisplayProperties) => void;
fetch: () => Promise<void>;
create: (data: Partial<TView>) => Promise<void>;

40
web/components/view/views/create-edit-form.tsx
View File

@ -23,7 +23,7 @@ type TViewCreateEditForm = {
export const ViewCreateEditForm: FC<TViewCreateEditForm> = observer((props) => {
const { workspaceSlug, projectId, viewId, viewType, viewOperations } = props;
// hooks
const currentViewDetailStore = useViewDetail(workspaceSlug, projectId, viewId, viewType);
const viewDetailStore = useViewDetail(workspaceSlug, projectId, viewId, viewType);
const { getProjectById } = useProject();
// states
const [modalToggle, setModalToggle] = useState(false);
@ -43,12 +43,12 @@ export const ViewCreateEditForm: FC<TViewCreateEditForm> = observer((props) => {
const onContinue = async () => {
setLoader(true);
if (currentViewDetailStore?.is_create) {
const payload = currentViewDetailStore?.filtersToUpdate;
if (viewDetailStore?.is_create) {
const payload = viewDetailStore?.filtersToUpdate;
await viewOperations.create(payload);
modalClose();
} else {
const payload = currentViewDetailStore?.filtersToUpdate;
const payload = viewDetailStore?.filtersToUpdate;
if (!payload) return;
await viewOperations.update();
modalClose();
@ -58,7 +58,7 @@ export const ViewCreateEditForm: FC<TViewCreateEditForm> = observer((props) => {
const projectDetails = projectId ? getProjectById(projectId) : undefined;
if (!currentViewDetailStore?.id) return <></>;
if (!viewDetailStore) return <></>;
return (
<Transition.Root show={modalToggle} as={Fragment}>
<Dialog as="div" className="relative z-20" onClose={modalClose}>
@ -110,9 +110,9 @@ export const ViewCreateEditForm: FC<TViewCreateEditForm> = observer((props) => {
id="name"
name="name"
type="text"
value={currentViewDetailStore?.filtersToUpdate?.name || ""}
value={viewDetailStore?.filtersToUpdate?.name || ""}
onChange={(e) => {
viewOperations?.setName(e.target.value);
viewDetailStore?.setName(e.target.value);
}}
placeholder="What do you want to call this view?"
className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
@ -126,7 +126,6 @@ export const ViewCreateEditForm: FC<TViewCreateEditForm> = observer((props) => {
projectId={projectId}
viewId={viewId}
viewType={viewType}
viewOperations={viewOperations}
dropdownPlacement="right"
>
<div className="cursor-pointer relative rounded p-1.5 px-2 flex items-center gap-1 border border-custom-border-100 bg-custom-background-80">
@ -136,17 +135,19 @@ export const ViewCreateEditForm: FC<TViewCreateEditForm> = observer((props) => {
<div className="text-xs">Filters</div>
</div>
</ViewFiltersDropdown>
<div
className="cursor-pointer relative rounded p-1.5 px-2 flex items-center gap-1 border border-dashed border-custom-border-100 bg-custom-background-80"
onClick={() => {
viewOperations.setFilters(undefined, "clear_all");
}}
>
<div className="text-xs">Clear all filters</div>
<div className="flex-shrink-0 relative flex justify-center items-center w-4 h-4 overflow-hidden">
<X className="w-3 h-3" />
{viewDetailStore?.isFiltersApplied && (
<div
className="cursor-pointer relative rounded p-1.5 px-2 flex items-center gap-1 border border-dashed border-custom-border-100 bg-custom-background-80"
onClick={() => {
viewDetailStore.setFilters(undefined, "clear_all");
}}
>
<div className="text-xs">Clear all filters</div>
<div className="flex-shrink-0 relative flex justify-center items-center w-4 h-4 overflow-hidden">
<X className="w-3 h-3" />
</div>
</div>
</div>
)}
</div>
<div className="p-3 px-5 relative bg-custom-background-90 max-h-36 overflow-hidden overflow-y-auto">
@ -155,7 +156,6 @@ export const ViewCreateEditForm: FC<TViewCreateEditForm> = observer((props) => {
projectId={projectId}
viewId={viewId}
viewType={viewType}
viewOperations={viewOperations}
propertyVisibleCount={undefined}
/>
</div>
@ -165,7 +165,7 @@ export const ViewCreateEditForm: FC<TViewCreateEditForm> = observer((props) => {
Cancel
</Button>
<Button variant="primary" onClick={onContinue} disabled={loader}>
{loader ? `Saving...` : `${currentViewDetailStore?.is_create ? `Create` : `Update`} View`}
{loader ? `Saving...` : `${viewDetailStore?.is_create ? `Create` : `Update`} View`}
</Button>
</div>
</Dialog.Panel>

88
web/components/view/views/edit-dropdown.tsx
View File

@ -7,6 +7,8 @@ import { Copy, Eye, Globe2, Link2, Pencil, Trash } from "lucide-react";
import { TViewEditDropdownOptions, TViewOperations } from "../types";
type TViewEditDropdown = {
workspaceSlug: string;
projectId: string | undefined;
viewId: string;
viewOperations: TViewOperations;
};
@ -47,49 +49,49 @@ export const ViewEditDropdown: FC<TViewEditDropdown> = observer((props) => {
onClick: () => viewOperations.localViewCreateEdit(viewId),
children: undefined,
},
{
icon: Eye,
key: "accessability",
label: "Change Accessability",
onClick: () => {},
children: [
{
icon: Eye,
key: "private",
label: "Private",
onClick: () => viewOperations.create({}),
children: undefined,
},
{
icon: Globe2,
key: "public",
label: "Public",
onClick: () => viewOperations.create({}),
children: undefined,
},
],
},
{
icon: Copy,
key: "duplicate",
label: "Duplicate view",
onClick: () => viewOperations.remove(viewId),
children: undefined,
},
{
icon: Link2,
key: "copy_link",
label: "Copy view link",
onClick: () => viewOperations.remove(viewId),
children: undefined,
},
{
icon: Trash,
key: "delete",
label: "Delete view",
onClick: () => viewOperations.remove(viewId),
children: undefined,
},
// {
// icon: Eye,
// key: "accessability",
// label: "Change Accessability",
// onClick: () => {},
// children: [
// {
// icon: Eye,
// key: "private",
// label: "Private",
// onClick: () => viewOperations.create({}),
// children: undefined,
// },
// {
// icon: Globe2,
// key: "public",
// label: "Public",
// onClick: () => viewOperations.create({}),
// children: undefined,
// },
// ],
// },
// {
// icon: Copy,
// key: "duplicate",
// label: "Duplicate view",
// onClick: () => viewOperations.remove(viewId),
// children: undefined,
// },
// {
// icon: Link2,
// key: "copy_link",
// label: "Copy view link",
// onClick: () => viewOperations.remove(viewId),
// children: undefined,
// },
// {
// icon: Trash,
// key: "delete",
// label: "Delete view",
// onClick: () => viewOperations.remove(viewId),
// children: undefined,
// },
],
[viewOperations, viewId]
);

4
web/pages/[workspaceSlug]/projects/[projectId]/views/private/[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 ProjectPrivateViewPage: NextPageWithLayout = () => {
return (
<div className="h-full overflow-hidden bg-custom-background-100">
<div className="flex h-full w-full flex-col border-b border-custom-border-300">
<AllIssuesViewRoot
<GlobalViewRoot
workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()}
viewId={viewId.toString()}

4
web/pages/[workspaceSlug]/projects/[projectId]/views/private/index.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 ProjectPrivateViewPage: NextPageWithLayout = () => {
return (
<div className="h-full overflow-hidden bg-custom-background-100">
<div className="flex h-full w-full flex-col border-b border-custom-border-300">
<AllIssuesViewRoot
<GlobalViewRoot
workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()}
viewId={viewId.toString()}

4
web/pages/[workspaceSlug]/projects/[projectId]/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 ProjectPublicViewPage: 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()}

4
web/pages/[workspaceSlug]/views/private/[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 WorkspacePrivateViewPage: NextPageWithLayout = () => {
return (
<div className="h-full overflow-hidden bg-custom-background-100">
<div className="flex h-full w-full flex-col border-b border-custom-border-300">
<AllIssuesViewRoot
<GlobalViewRoot
workspaceSlug={workspaceSlug.toString()}
projectId={undefined}
viewId={viewId.toString()}