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 handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => {
|
||||
if (!globalViewId || !currentWorkspaceIssuePath)
|
||||
handleFilters("display_filters", { order_by: order });
|
||||
if (globalViewId) handleFilters("display_filters", { order_by: order });
|
||||
else setDisplayFilters({ order_by: order });
|
||||
setSelectedMenuItem(`${order}_${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="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
|
||||
customButtonClassName="!w-full"
|
||||
className="!w-full"
|
||||
position="left"
|
||||
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 ? "bg-custom-background-80" : ""
|
||||
}`}
|
||||
>
|
||||
{activeSortingProperty === propertyName && (
|
||||
<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" : ""
|
||||
{currentWorkspaceIssuePath ? (
|
||||
<span>{header}</span>
|
||||
) : (
|
||||
<CustomMenu
|
||||
customButtonClassName="!w-full"
|
||||
className="!w-full"
|
||||
position="left"
|
||||
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 ? "bg-custom-background-80" : ""
|
||||
}`}
|
||||
/>
|
||||
</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>
|
||||
{activeSortingProperty === propertyName && (
|
||||
<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>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
</CustomMenu>
|
||||
|
||||
<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 `}>
|
||||
<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 className="h-full min-w-[9rem] w-full">
|
||||
{spreadsheetIssues.map((issue: IIssue, index) => (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user