mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
chore: workspace view order by removed (#2303)
This commit is contained in:
Anmol Singh Bhatia
GitHub
parent
2a770e4a95
commit
1b28125919
@ -234,8 +234,7 @@ export const SpreadsheetView: React.FC<Props> = ({
|
|||||||
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
||||||
|
|
||||||
const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => {
|
const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => {
|
||||||
if (!globalViewId || !currentWorkspaceIssuePath)
|
if (globalViewId) handleFilters("display_filters", { order_by: order });
|
||||||
handleFilters("display_filters", { order_by: order });
|
|
||||||
else setDisplayFilters({ order_by: order });
|
else setDisplayFilters({ order_by: order });
|
||||||
setSelectedMenuItem(`${order}_${itemKey}`);
|
setSelectedMenuItem(`${order}_${itemKey}`);
|
||||||
setActiveSortingProperty(order === "-created_at" ? "" : itemKey);
|
setActiveSortingProperty(order === "-created_at" ? "" : itemKey);
|
||||||
@ -250,199 +249,203 @@ export const SpreadsheetView: React.FC<Props> = ({
|
|||||||
) => (
|
) => (
|
||||||
<div className="relative flex flex-col h-max w-full bg-custom-background-100">
|
<div className="relative flex flex-col h-max w-full bg-custom-background-100">
|
||||||
<div className="flex items-center min-w-[9rem] px-4 py-2.5 text-sm font-medium z-[1] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-100">
|
<div className="flex items-center min-w-[9rem] px-4 py-2.5 text-sm font-medium z-[1] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-100">
|
||||||
<CustomMenu
|
{currentWorkspaceIssuePath ? (
|
||||||
customButtonClassName="!w-full"
|
<span>{header}</span>
|
||||||
className="!w-full"
|
) : (
|
||||||
position="left"
|
<CustomMenu
|
||||||
customButton={
|
customButtonClassName="!w-full"
|
||||||
<div
|
className="!w-full"
|
||||||
className={`relative group flex items-center justify-between gap-1.5 cursor-pointer text-sm text-custom-text-200 hover:text-custom-text-100 w-full py-3 px-2 ${
|
position="left"
|
||||||
activeSortingProperty === propertyName ? "bg-custom-background-80" : ""
|
customButton={
|
||||||
}`}
|
<div
|
||||||
>
|
className={`relative group flex items-center justify-between gap-1.5 cursor-pointer text-sm text-custom-text-200 hover:text-custom-text-100 w-full py-3 px-2 ${
|
||||||
{activeSortingProperty === propertyName && (
|
activeSortingProperty === propertyName ? "bg-custom-background-80" : ""
|
||||||
<div className="absolute top-1 right-1.5">
|
|
||||||
<Icon
|
|
||||||
iconName="filter_list"
|
|
||||||
className="flex items-center justify-center h-3.5 w-3.5 rounded-full bg-custom-primary text-xs text-white"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{header}
|
|
||||||
<ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
width="xl"
|
|
||||||
>
|
|
||||||
<CustomMenu.MenuItem
|
|
||||||
onClick={() => {
|
|
||||||
handleOrderBy(ascendingOrder, propertyName);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={`group flex gap-1.5 px-1 items-center justify-between ${
|
|
||||||
selectedMenuItem === `${ascendingOrder}_${propertyName}`
|
|
||||||
? "text-custom-text-100"
|
|
||||||
: "text-custom-text-200 hover:text-custom-text-100"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="flex gap-2 items-center">
|
|
||||||
{propertyName === "assignee" || propertyName === "labels" ? (
|
|
||||||
<>
|
|
||||||
<span className="relative flex items-center h-6 w-6">
|
|
||||||
<Icon
|
|
||||||
iconName="east"
|
|
||||||
className="absolute left-0 rotate-90 text-xs leading-3"
|
|
||||||
/>
|
|
||||||
<Icon iconName="sort" className="absolute right-0 text-sm" />
|
|
||||||
</span>
|
|
||||||
<span>A</span>
|
|
||||||
<Icon iconName="east" className="text-sm" />
|
|
||||||
<span>Z</span>
|
|
||||||
</>
|
|
||||||
) : propertyName === "due_date" ||
|
|
||||||
propertyName === "created_on" ||
|
|
||||||
propertyName === "updated_on" ? (
|
|
||||||
<>
|
|
||||||
<span className="relative flex items-center h-6 w-6">
|
|
||||||
<Icon
|
|
||||||
iconName="east"
|
|
||||||
className="absolute left-0 rotate-90 text-xs leading-3"
|
|
||||||
/>
|
|
||||||
<Icon iconName="sort" className="absolute right-0 text-sm" />
|
|
||||||
</span>
|
|
||||||
<span>New</span>
|
|
||||||
<Icon iconName="east" className="text-sm" />
|
|
||||||
<span>Old</span>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<span className="relative flex items-center h-6 w-6">
|
|
||||||
<Icon
|
|
||||||
iconName="east"
|
|
||||||
className="absolute left-0 rotate-90 text-xs leading-3"
|
|
||||||
/>
|
|
||||||
<Icon iconName="sort" className="absolute right-0 text-sm" />
|
|
||||||
</span>
|
|
||||||
<span>First</span>
|
|
||||||
<Icon iconName="east" className="text-sm" />
|
|
||||||
<span>Last</span>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<CheckIcon
|
|
||||||
className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
|
|
||||||
selectedMenuItem === `${ascendingOrder}_${propertyName}` ? "opacity-100" : ""
|
|
||||||
}`}
|
}`}
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</CustomMenu.MenuItem>
|
|
||||||
<CustomMenu.MenuItem
|
|
||||||
className={`mt-0.5 ${
|
|
||||||
selectedMenuItem === `${descendingOrder}_${propertyName}`
|
|
||||||
? "bg-custom-background-80"
|
|
||||||
: ""
|
|
||||||
}`}
|
|
||||||
key={propertyName}
|
|
||||||
onClick={() => {
|
|
||||||
handleOrderBy(descendingOrder, propertyName);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={`group flex gap-1.5 px-1 items-center justify-between ${
|
|
||||||
selectedMenuItem === `${descendingOrder}_${propertyName}`
|
|
||||||
? "text-custom-text-100"
|
|
||||||
: "text-custom-text-200 hover:text-custom-text-100"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="flex gap-2 items-center">
|
|
||||||
{propertyName === "assignee" || propertyName === "labels" ? (
|
|
||||||
<>
|
|
||||||
<span className="relative flex items-center h-6 w-6">
|
|
||||||
<Icon
|
|
||||||
iconName="east"
|
|
||||||
className="absolute left-0 -rotate-90 text-xs leading-3"
|
|
||||||
/>
|
|
||||||
<Icon
|
|
||||||
iconName="sort"
|
|
||||||
className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
<span>Z</span>
|
|
||||||
<Icon iconName="east" className="text-sm" />
|
|
||||||
<span>A</span>
|
|
||||||
</>
|
|
||||||
) : propertyName === "due_date" ? (
|
|
||||||
<>
|
|
||||||
<span className="relative flex items-center h-6 w-6">
|
|
||||||
<Icon
|
|
||||||
iconName="east"
|
|
||||||
className="absolute left-0 -rotate-90 text-xs leading-3"
|
|
||||||
/>
|
|
||||||
<Icon
|
|
||||||
iconName="sort"
|
|
||||||
className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
<span>Old</span>
|
|
||||||
<Icon iconName="east" className="text-sm" />
|
|
||||||
<span>New</span>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<span className="relative flex items-center h-6 w-6">
|
|
||||||
<Icon
|
|
||||||
iconName="east"
|
|
||||||
className="absolute left-0 -rotate-90 text-xs leading-3"
|
|
||||||
/>
|
|
||||||
<Icon
|
|
||||||
iconName="sort"
|
|
||||||
className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
<span>Last</span>
|
|
||||||
<Icon iconName="east" className="text-sm" />
|
|
||||||
<span>First</span>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<CheckIcon
|
|
||||||
className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
|
|
||||||
selectedMenuItem === `${descendingOrder}_${propertyName}` ? "opacity-100" : ""
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</CustomMenu.MenuItem>
|
|
||||||
{selectedMenuItem &&
|
|
||||||
selectedMenuItem !== "" &&
|
|
||||||
displayFilters?.order_by !== "-created_at" &&
|
|
||||||
selectedMenuItem.includes(propertyName) && (
|
|
||||||
<CustomMenu.MenuItem
|
|
||||||
className={`mt-0.5${
|
|
||||||
selectedMenuItem === `-created_at_${propertyName}`
|
|
||||||
? "bg-custom-background-80"
|
|
||||||
: ""
|
|
||||||
}`}
|
|
||||||
key={propertyName}
|
|
||||||
onClick={() => {
|
|
||||||
handleOrderBy("-created_at", propertyName);
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<div className={`group flex gap-1.5 px-1 items-center justify-between `}>
|
{activeSortingProperty === propertyName && (
|
||||||
<div className="flex gap-1.5 items-center">
|
<div className="absolute top-1 right-1.5">
|
||||||
<span className="relative flex items-center justify-center h-6 w-6">
|
<Icon
|
||||||
<Icon iconName="ink_eraser" className="text-sm" />
|
iconName="filter_list"
|
||||||
</span>
|
className="flex items-center justify-center h-3.5 w-3.5 rounded-full bg-custom-primary text-xs text-white"
|
||||||
|
/>
|
||||||
<span>Clear sorting</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{header}
|
||||||
|
<ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
width="xl"
|
||||||
|
>
|
||||||
|
<CustomMenu.MenuItem
|
||||||
|
onClick={() => {
|
||||||
|
handleOrderBy(ascendingOrder, propertyName);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`group flex gap-1.5 px-1 items-center justify-between ${
|
||||||
|
selectedMenuItem === `${ascendingOrder}_${propertyName}`
|
||||||
|
? "text-custom-text-100"
|
||||||
|
: "text-custom-text-200 hover:text-custom-text-100"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex gap-2 items-center">
|
||||||
|
{propertyName === "assignee" || propertyName === "labels" ? (
|
||||||
|
<>
|
||||||
|
<span className="relative flex items-center h-6 w-6">
|
||||||
|
<Icon
|
||||||
|
iconName="east"
|
||||||
|
className="absolute left-0 rotate-90 text-xs leading-3"
|
||||||
|
/>
|
||||||
|
<Icon iconName="sort" className="absolute right-0 text-sm" />
|
||||||
|
</span>
|
||||||
|
<span>A</span>
|
||||||
|
<Icon iconName="east" className="text-sm" />
|
||||||
|
<span>Z</span>
|
||||||
|
</>
|
||||||
|
) : propertyName === "due_date" ||
|
||||||
|
propertyName === "created_on" ||
|
||||||
|
propertyName === "updated_on" ? (
|
||||||
|
<>
|
||||||
|
<span className="relative flex items-center h-6 w-6">
|
||||||
|
<Icon
|
||||||
|
iconName="east"
|
||||||
|
className="absolute left-0 rotate-90 text-xs leading-3"
|
||||||
|
/>
|
||||||
|
<Icon iconName="sort" className="absolute right-0 text-sm" />
|
||||||
|
</span>
|
||||||
|
<span>New</span>
|
||||||
|
<Icon iconName="east" className="text-sm" />
|
||||||
|
<span>Old</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<span className="relative flex items-center h-6 w-6">
|
||||||
|
<Icon
|
||||||
|
iconName="east"
|
||||||
|
className="absolute left-0 rotate-90 text-xs leading-3"
|
||||||
|
/>
|
||||||
|
<Icon iconName="sort" className="absolute right-0 text-sm" />
|
||||||
|
</span>
|
||||||
|
<span>First</span>
|
||||||
|
<Icon iconName="east" className="text-sm" />
|
||||||
|
<span>Last</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</CustomMenu.MenuItem>
|
|
||||||
)}
|
<CheckIcon
|
||||||
</CustomMenu>
|
className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
|
||||||
|
selectedMenuItem === `${ascendingOrder}_${propertyName}` ? "opacity-100" : ""
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</CustomMenu.MenuItem>
|
||||||
|
<CustomMenu.MenuItem
|
||||||
|
className={`mt-0.5 ${
|
||||||
|
selectedMenuItem === `${descendingOrder}_${propertyName}`
|
||||||
|
? "bg-custom-background-80"
|
||||||
|
: ""
|
||||||
|
}`}
|
||||||
|
key={propertyName}
|
||||||
|
onClick={() => {
|
||||||
|
handleOrderBy(descendingOrder, propertyName);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`group flex gap-1.5 px-1 items-center justify-between ${
|
||||||
|
selectedMenuItem === `${descendingOrder}_${propertyName}`
|
||||||
|
? "text-custom-text-100"
|
||||||
|
: "text-custom-text-200 hover:text-custom-text-100"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex gap-2 items-center">
|
||||||
|
{propertyName === "assignee" || propertyName === "labels" ? (
|
||||||
|
<>
|
||||||
|
<span className="relative flex items-center h-6 w-6">
|
||||||
|
<Icon
|
||||||
|
iconName="east"
|
||||||
|
className="absolute left-0 -rotate-90 text-xs leading-3"
|
||||||
|
/>
|
||||||
|
<Icon
|
||||||
|
iconName="sort"
|
||||||
|
className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span>Z</span>
|
||||||
|
<Icon iconName="east" className="text-sm" />
|
||||||
|
<span>A</span>
|
||||||
|
</>
|
||||||
|
) : propertyName === "due_date" ? (
|
||||||
|
<>
|
||||||
|
<span className="relative flex items-center h-6 w-6">
|
||||||
|
<Icon
|
||||||
|
iconName="east"
|
||||||
|
className="absolute left-0 -rotate-90 text-xs leading-3"
|
||||||
|
/>
|
||||||
|
<Icon
|
||||||
|
iconName="sort"
|
||||||
|
className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span>Old</span>
|
||||||
|
<Icon iconName="east" className="text-sm" />
|
||||||
|
<span>New</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<span className="relative flex items-center h-6 w-6">
|
||||||
|
<Icon
|
||||||
|
iconName="east"
|
||||||
|
className="absolute left-0 -rotate-90 text-xs leading-3"
|
||||||
|
/>
|
||||||
|
<Icon
|
||||||
|
iconName="sort"
|
||||||
|
className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span>Last</span>
|
||||||
|
<Icon iconName="east" className="text-sm" />
|
||||||
|
<span>First</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<CheckIcon
|
||||||
|
className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
|
||||||
|
selectedMenuItem === `${descendingOrder}_${propertyName}` ? "opacity-100" : ""
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</CustomMenu.MenuItem>
|
||||||
|
{selectedMenuItem &&
|
||||||
|
selectedMenuItem !== "" &&
|
||||||
|
displayFilters?.order_by !== "-created_at" &&
|
||||||
|
selectedMenuItem.includes(propertyName) && (
|
||||||
|
<CustomMenu.MenuItem
|
||||||
|
className={`mt-0.5${
|
||||||
|
selectedMenuItem === `-created_at_${propertyName}`
|
||||||
|
? "bg-custom-background-80"
|
||||||
|
: ""
|
||||||
|
}`}
|
||||||
|
key={propertyName}
|
||||||
|
onClick={() => {
|
||||||
|
handleOrderBy("-created_at", propertyName);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className={`group flex gap-1.5 px-1 items-center justify-between `}>
|
||||||
|
<div className="flex gap-1.5 items-center">
|
||||||
|
<span className="relative flex items-center justify-center h-6 w-6">
|
||||||
|
<Icon iconName="ink_eraser" className="text-sm" />
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span>Clear sorting</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CustomMenu.MenuItem>
|
||||||
|
)}
|
||||||
|
</CustomMenu>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="h-full min-w-[9rem] w-full">
|
<div className="h-full min-w-[9rem] w-full">
|
||||||
{spreadsheetIssues.map((issue: IIssue, index) => (
|
{spreadsheetIssues.map((issue: IIssue, index) => (
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user