forked from github/plane
style: my issue and profile page view dropdown (#1754)
This commit is contained in:
Anmol Singh Bhatia
GitHub
parent
2cd431b4a4
commit
d83a76a3aa
@ -146,105 +146,108 @@ export const MyIssuesViewOptions: React.FC = () => {
|
|||||||
<>
|
<>
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<h4 className="text-custom-text-200">Group by</h4>
|
<h4 className="text-custom-text-200">Group by</h4>
|
||||||
<CustomMenu
|
<div className="w-28">
|
||||||
label={
|
<CustomMenu
|
||||||
groupBy === "project"
|
label={
|
||||||
? "Project"
|
groupBy === "project"
|
||||||
: GROUP_BY_OPTIONS.find((option) => option.key === groupBy)?.name ??
|
? "Project"
|
||||||
"Select"
|
: GROUP_BY_OPTIONS.find((option) => option.key === groupBy)
|
||||||
}
|
?.name ?? "Select"
|
||||||
>
|
}
|
||||||
{GROUP_BY_OPTIONS.map((option) => {
|
className="!w-full"
|
||||||
if (issueView === "kanban" && option.key === null) return null;
|
buttonClassName="w-full"
|
||||||
if (option.key === "state" || option.key === "created_by")
|
>
|
||||||
return null;
|
{GROUP_BY_OPTIONS.map((option) => {
|
||||||
|
if (issueView === "kanban" && option.key === null) return null;
|
||||||
|
if (option.key === "state" || option.key === "created_by")
|
||||||
|
return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CustomMenu.MenuItem
|
<CustomMenu.MenuItem
|
||||||
key={option.key}
|
key={option.key}
|
||||||
onClick={() => setGroupBy(option.key)}
|
onClick={() => setGroupBy(option.key)}
|
||||||
>
|
>
|
||||||
{option.name}
|
{option.name}
|
||||||
</CustomMenu.MenuItem>
|
</CustomMenu.MenuItem>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</CustomMenu>
|
</CustomMenu>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<h4 className="text-custom-text-200">Order by</h4>
|
<h4 className="text-custom-text-200">Order by</h4>
|
||||||
<CustomMenu
|
<div className="w-28">
|
||||||
label={
|
<CustomMenu
|
||||||
ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ??
|
label={
|
||||||
"Select"
|
ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ??
|
||||||
}
|
"Select"
|
||||||
>
|
}
|
||||||
{ORDER_BY_OPTIONS.map((option) => {
|
className="!w-full"
|
||||||
if (groupBy === "priority" && option.key === "priority") return null;
|
buttonClassName="w-full"
|
||||||
if (option.key === "sort_order") return null;
|
>
|
||||||
|
{ORDER_BY_OPTIONS.map((option) => {
|
||||||
|
if (groupBy === "priority" && option.key === "priority")
|
||||||
|
return null;
|
||||||
|
if (option.key === "sort_order") return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CustomMenu.MenuItem
|
<CustomMenu.MenuItem
|
||||||
key={option.key}
|
key={option.key}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setOrderBy(option.key);
|
setOrderBy(option.key);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{option.name}
|
{option.name}
|
||||||
</CustomMenu.MenuItem>
|
</CustomMenu.MenuItem>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</CustomMenu>
|
</CustomMenu>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<h4 className="text-custom-text-200">Issue type</h4>
|
<h4 className="text-custom-text-200">Issue type</h4>
|
||||||
<CustomMenu
|
<div className="w-28">
|
||||||
label={
|
<CustomMenu
|
||||||
FILTER_ISSUE_OPTIONS.find((option) => option.key === filters?.type)
|
label={
|
||||||
?.name ?? "Select"
|
FILTER_ISSUE_OPTIONS.find((option) => option.key === filters?.type)
|
||||||
}
|
?.name ?? "Select"
|
||||||
>
|
}
|
||||||
{FILTER_ISSUE_OPTIONS.map((option) => (
|
className="!w-full"
|
||||||
<CustomMenu.MenuItem
|
buttonClassName="w-full"
|
||||||
key={option.key}
|
>
|
||||||
onClick={() =>
|
{FILTER_ISSUE_OPTIONS.map((option) => (
|
||||||
setFilters({
|
<CustomMenu.MenuItem
|
||||||
type: option.key,
|
key={option.key}
|
||||||
})
|
onClick={() =>
|
||||||
}
|
setFilters({
|
||||||
>
|
type: option.key,
|
||||||
{option.name}
|
})
|
||||||
</CustomMenu.MenuItem>
|
}
|
||||||
))}
|
>
|
||||||
</CustomMenu>
|
{option.name}
|
||||||
|
</CustomMenu.MenuItem>
|
||||||
|
))}
|
||||||
|
</CustomMenu>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{issueView !== "calendar" && issueView !== "spreadsheet" && (
|
{issueView !== "calendar" && issueView !== "spreadsheet" && (
|
||||||
<>
|
<>
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<h4 className="text-custom-text-200">Show empty states</h4>
|
<h4 className="text-custom-text-200">Show empty states</h4>
|
||||||
<ToggleSwitch value={showEmptyGroups} onChange={setShowEmptyGroups} />
|
<div className="w-28">
|
||||||
|
<ToggleSwitch value={showEmptyGroups} onChange={setShowEmptyGroups} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* <div className="relative flex justify-end gap-x-3">
|
|
||||||
<button type="button" onClick={() => resetFilterToDefault()}>
|
|
||||||
Reset to default
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="font-medium text-custom-primary"
|
|
||||||
onClick={() => setNewFilterDefaultView()}
|
|
||||||
>
|
|
||||||
Set as default
|
|
||||||
</button>
|
|
||||||
</div> */}
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2 py-3">
|
<div className="space-y-2 py-3">
|
||||||
<h4 className="text-sm text-custom-text-200">Display Properties</h4>
|
<h4 className="text-sm text-custom-text-200">Display Properties</h4>
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
<div className="flex flex-wrap items-center gap-2 text-custom-text-200">
|
||||||
{Object.keys(properties).map((key) => {
|
{Object.keys(properties).map((key) => {
|
||||||
if (key === "estimate" && !isEstimateActive) return null;
|
if (key === "estimate" && !isEstimateActive) return null;
|
||||||
|
|
||||||
|
|||||||
@ -172,106 +172,109 @@ export const ProfileIssuesViewOptions: React.FC = () => {
|
|||||||
<>
|
<>
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<h4 className="text-custom-text-200">Group by</h4>
|
<h4 className="text-custom-text-200">Group by</h4>
|
||||||
<CustomMenu
|
<div className="w-28">
|
||||||
label={
|
<CustomMenu
|
||||||
groupByProperty === "project"
|
label={
|
||||||
? "Project"
|
groupByProperty === "project"
|
||||||
: GROUP_BY_OPTIONS.find((option) => option.key === groupByProperty)
|
? "Project"
|
||||||
?.name ?? "Select"
|
: GROUP_BY_OPTIONS.find(
|
||||||
}
|
(option) => option.key === groupByProperty
|
||||||
>
|
)?.name ?? "Select"
|
||||||
{GROUP_BY_OPTIONS.map((option) => {
|
}
|
||||||
if (issueView === "kanban" && option.key === null) return null;
|
className="!w-full"
|
||||||
if (option.key === "state" || option.key === "created_by")
|
buttonClassName="w-full"
|
||||||
return null;
|
>
|
||||||
|
{GROUP_BY_OPTIONS.map((option) => {
|
||||||
|
if (issueView === "kanban" && option.key === null) return null;
|
||||||
|
if (option.key === "state" || option.key === "created_by")
|
||||||
|
return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CustomMenu.MenuItem
|
<CustomMenu.MenuItem
|
||||||
key={option.key}
|
key={option.key}
|
||||||
onClick={() => setGroupByProperty(option.key)}
|
onClick={() => setGroupByProperty(option.key)}
|
||||||
>
|
>
|
||||||
{option.name}
|
{option.name}
|
||||||
</CustomMenu.MenuItem>
|
</CustomMenu.MenuItem>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</CustomMenu>
|
</CustomMenu>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<h4 className="text-custom-text-200">Order by</h4>
|
<h4 className="text-custom-text-200">Order by</h4>
|
||||||
<CustomMenu
|
<div className="w-28">
|
||||||
label={
|
<CustomMenu
|
||||||
ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ??
|
label={
|
||||||
"Select"
|
ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ??
|
||||||
}
|
"Select"
|
||||||
>
|
}
|
||||||
{ORDER_BY_OPTIONS.map((option) => {
|
className="!w-full"
|
||||||
if (groupByProperty === "priority" && option.key === "priority")
|
buttonClassName="w-full"
|
||||||
return null;
|
>
|
||||||
if (option.key === "sort_order") return null;
|
{ORDER_BY_OPTIONS.map((option) => {
|
||||||
|
if (groupByProperty === "priority" && option.key === "priority")
|
||||||
|
return null;
|
||||||
|
if (option.key === "sort_order") return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CustomMenu.MenuItem
|
<CustomMenu.MenuItem
|
||||||
key={option.key}
|
key={option.key}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setOrderBy(option.key);
|
setOrderBy(option.key);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{option.name}
|
{option.name}
|
||||||
</CustomMenu.MenuItem>
|
</CustomMenu.MenuItem>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</CustomMenu>
|
</CustomMenu>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<h4 className="text-custom-text-200">Issue type</h4>
|
<h4 className="text-custom-text-200">Issue type</h4>
|
||||||
<CustomMenu
|
<div className="w-28">
|
||||||
label={
|
<CustomMenu
|
||||||
FILTER_ISSUE_OPTIONS.find((option) => option.key === filters?.type)
|
label={
|
||||||
?.name ?? "Select"
|
FILTER_ISSUE_OPTIONS.find((option) => option.key === filters?.type)
|
||||||
}
|
?.name ?? "Select"
|
||||||
>
|
}
|
||||||
{FILTER_ISSUE_OPTIONS.map((option) => (
|
className="!w-full"
|
||||||
<CustomMenu.MenuItem
|
buttonClassName="w-full"
|
||||||
key={option.key}
|
>
|
||||||
onClick={() =>
|
{FILTER_ISSUE_OPTIONS.map((option) => (
|
||||||
setFilters({
|
<CustomMenu.MenuItem
|
||||||
type: option.key,
|
key={option.key}
|
||||||
})
|
onClick={() =>
|
||||||
}
|
setFilters({
|
||||||
>
|
type: option.key,
|
||||||
{option.name}
|
})
|
||||||
</CustomMenu.MenuItem>
|
}
|
||||||
))}
|
>
|
||||||
</CustomMenu>
|
{option.name}
|
||||||
|
</CustomMenu.MenuItem>
|
||||||
|
))}
|
||||||
|
</CustomMenu>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{issueView !== "calendar" && issueView !== "spreadsheet" && (
|
{issueView !== "calendar" && issueView !== "spreadsheet" && (
|
||||||
<>
|
<>
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<h4 className="text-custom-text-200">Show empty states</h4>
|
<h4 className="text-custom-text-200">Show empty states</h4>
|
||||||
<ToggleSwitch value={showEmptyGroups} onChange={setShowEmptyGroups} />
|
<div className="w-28">
|
||||||
|
<ToggleSwitch value={showEmptyGroups} onChange={setShowEmptyGroups} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* <div className="relative flex justify-end gap-x-3">
|
|
||||||
<button type="button" onClick={() => resetFilterToDefault()}>
|
|
||||||
Reset to default
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="font-medium text-custom-primary"
|
|
||||||
onClick={() => setNewFilterDefaultView()}
|
|
||||||
>
|
|
||||||
Set as default
|
|
||||||
</button>
|
|
||||||
</div> */}
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2 py-3">
|
<div className="space-y-2 py-3">
|
||||||
<h4 className="text-sm text-custom-text-200">Display Properties</h4>
|
<h4 className="text-sm text-custom-text-200">Display Properties</h4>
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
<div className="flex flex-wrap items-center gap-2 text-custom-text-200">
|
||||||
{Object.keys(properties).map((key) => {
|
{Object.keys(properties).map((key) => {
|
||||||
if (key === "estimate" && !isEstimateActive) return null;
|
if (key === "estimate" && !isEstimateActive) return null;
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user