thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: global issues ui improvement and bug fixes (#2300)

Browse Source
This commit is contained in:
Anmol Singh Bhatia
2023-09-29 12:36:38 +05:30
committed by GitHub
parent 6cb4b222d0
commit 459999e8c9
11 changed files with 99 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx
View File

@@ -82,7 +82,7 @@ export const IssueColumn: React.FC<Props> = ({
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return (
<div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-r border-custom-border-200">
<div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-r border-custom-border-100">
<div
className="flex gap-1.5 px-4 pr-0 py-2.5 items-center w-24"
style={issue.parent && nestingLevel !== 0 ? { paddingLeft } : {}}
@@ -101,7 +101,7 @@ export const IssueColumn: React.FC<Props> = ({
onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
content={
<div
className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-200 bg-custom-background-90`}
className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-100 bg-custom-background-90`}
>
<button
type="button"

4
web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
View File

@@ -239,7 +239,7 @@ export const SpreadsheetView: React.FC<Props> = ({
descendingOrder: TIssueOrderByOptions
) => (
<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-200">
<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"
@@ -491,7 +491,7 @@ export const SpreadsheetView: React.FC<Props> = ({
isScrolled ? "shadow-r shadow-custom-shadow-xs" : ""
}`}
>
<div className="flex items-center text-sm font-medium z-[2] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-200">
<div className="flex items-center text-sm font-medium z-[2] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-100">
<span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">
ID
</span>

8
web/components/issues/workspace-views/workpace-view-issues.tsx
View File

@@ -31,7 +31,7 @@ import { IIssue, IWorkspaceIssueFilterOptions } from "types";
export const WorkspaceViewIssues = () => {
const router = useRouter();
const { workspaceSlug, workspaceViewId } = router.query;
const { workspaceSlug, viewId } = router.query;
const { memberRole } = useProjectMyMembership();
const { user } = useUser();
@@ -189,7 +189,7 @@ export const WorkspaceViewIssues = () => {
/>
<PrimaryButton
onClick={() => {
if (workspaceViewId) handleFilters("filters", filters.filters, true);
if (viewId) handleFilters("filters", filters.filters, true);
else
setCreateViewModal({
query: filters.filters,
@@ -197,8 +197,8 @@ export const WorkspaceViewIssues = () => {
}}
className="flex items-center gap-2 text-sm"
>
{!workspaceViewId && <PlusIcon className="h-4 w-4" />}
{workspaceViewId ? "Update" : "Save"} view
{!viewId && <PlusIcon className="h-4 w-4" />}
{viewId ? "Update" : "Save"} view
</PrimaryButton>
</div>
{<div className="mt-3 border-t border-custom-border-200" />}

8
web/components/issues/workspace-views/workspace-all-issue.tsx
View File

@@ -31,7 +31,7 @@ import { IIssue, IWorkspaceIssueFilterOptions } from "types";
export const WorkspaceAllIssue = () => {
const router = useRouter();
const { workspaceSlug, workspaceViewId } = router.query;
const { workspaceSlug, viewId } = router.query;
const [createViewModal, setCreateViewModal] = useState<any>(null);
@@ -203,7 +203,7 @@ export const WorkspaceAllIssue = () => {
/>
<PrimaryButton
onClick={() => {
if (workspaceViewId) handleFilters("filters", filters.filters, true);
if (viewId) handleFilters("filters", filters.filters, true);
else
setCreateViewModal({
query: filters.filters,
@@ -211,8 +211,8 @@ export const WorkspaceAllIssue = () => {
}}
className="flex items-center gap-2 text-sm"
>
{!workspaceViewId && <PlusIcon className="h-4 w-4" />}
{workspaceViewId ? "Update" : "Save"} view
{!viewId && <PlusIcon className="h-4 w-4" />}
{viewId ? "Update" : "Save"} view
</PrimaryButton>
</div>
{<div className="mt-3 border-t border-custom-border-200" />}

2
web/components/views/single-view-item.tsx
View File

@@ -91,7 +91,7 @@ export const SingleViewItem: React.FC<Props> = ({
const viewRedirectionUrl =
viewType === "project"
? `/${workspaceSlug}/projects/${projectId}/views/${view.id}`
: `/${workspaceSlug}/workspace-views/${view.id}`;
: `/${workspaceSlug}/workspace-views/issues?viewId=${view.id}`;
return (
<div className="group hover:bg-custom-background-90 border-b border-custom-border-200">

2
web/components/workspace/sidebar-menu.tsx
View File

@@ -34,7 +34,7 @@ const workspaceLinks = (workspaceSlug: string) => [
},
{
Icon: TaskAltOutlined,
name: "Issues",
name: "All Issues",
href: `/${workspaceSlug}/workspace-views/all-issues`,
},
];

4
web/components/workspace/views/modal.tsx
View File

@@ -48,10 +48,12 @@ export const CreateUpdateWorkspaceViewModal: React.FC<Props> = ({
};
await workspaceService
.createView(workspaceSlug as string, payloadData)
.then(() => {
.then((res) => {
mutate(WORKSPACE_VIEWS_LIST(workspaceSlug as string));
handleClose();
router.replace(`/${workspaceSlug}/workspace-views/issues?viewId=${res.id}`);
setToastAlert({
type: "success",
title: "Success!",

41
web/components/workspace/views/workpace-view-navigation.tsx
View File

@@ -17,7 +17,7 @@ type Props = {
export const WorkspaceViewsNavigation: React.FC<Props> = ({ handleAddView }) => {
const router = useRouter();
const { workspaceSlug, workspaceViewId } = router.query;
const { workspaceSlug, viewId } = router.query;
const { data: workspaceViews } = useSWR(
workspaceSlug ? WORKSPACE_VIEWS_LIST(workspaceSlug.toString()) : null,
@@ -25,67 +25,80 @@ export const WorkspaceViewsNavigation: React.FC<Props> = ({ handleAddView }) =>
);
const isSelected = (pathName: string) => router.pathname.includes(pathName);
React.useEffect(() => {
const activeTabElement = document.getElementById("active-tab-global-view");
if (activeTabElement) activeTabElement.scrollIntoView({ behavior: "smooth", inline: "center" });
}, [viewId, workspaceViews]);
const tabsList = [
{
key: "all",
label: "All Issues",
selected: isSelected("workspace-views/all-issues"),
onClick: () => router.push(`/${workspaceSlug}/workspace-views/all-issues`),
onClick: () => router.replace(`/${workspaceSlug}/workspace-views/all-issues`),
},
{
key: "assigned",
label: "Assigned",
selected: isSelected("workspace-views/assigned"),
onClick: () => router.push(`/${workspaceSlug}/workspace-views/assigned`),
onClick: () => router.replace(`/${workspaceSlug}/workspace-views/assigned`),
},
{
key: "created",
label: "Created",
selected: isSelected("workspace-views/created"),
onClick: () => router.push(`/${workspaceSlug}/workspace-views/created`),
onClick: () => router.replace(`/${workspaceSlug}/workspace-views/created`),
},
{
key: "subscribed",
label: "Subscribed",
selected: isSelected("workspace-views/subscribed"),
onClick: () => router.push(`/${workspaceSlug}/workspace-views/subscribed`),
onClick: () => router.replace(`/${workspaceSlug}/workspace-views/subscribed`),
},
];
return (
<div className="group flex items-center overflow-x-scroll">
<div className="group flex items-center gap-x-1 overflow-x-scroll relative">
{tabsList.map((tab) => (
<button
key={tab.key}
type="button"
onClick={tab.onClick}
className={`border-b-2 min-w-[96px] p-4 text-sm font-medium outline-none whitespace-nowrap ${
className={`border-b-2 min-w-min p-3 text-sm font-medium outline-none whitespace-nowrap flex-shrink-0 ${
tab.selected
? "border-custom-primary-100 text-custom-primary-100"
: "border-transparent hover:border-custom-primary-100 hover:text-custom-primary-100"
: "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
}`}
id={tab.selected ? `active-tab-global-view` : ``}
>
{tab.label}
</button>
))}
{workspaceViews &&
workspaceViews.length > 0 &&
workspaceViews?.map((view) => (
<button
className={`border-b-2 min-w-[96px] p-4 text-sm font-medium outline-none whitespace-nowrap ${
view.id === workspaceViewId
className={`border-b-2 min-w-min p-3 text-sm font-medium outline-none whitespace-nowrap flex-shrink-0 ${
view.id === viewId
? "border-custom-primary-100 text-custom-primary-100"
: "border-transparent hover:border-custom-primary-100 hover:text-custom-primary-100"
: "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
}`}
onClick={() => router.push(`/${workspaceSlug}/workspace-views/${view.id}`)}
id={view.id === viewId ? `active-tab-global-view` : ``}
onClick={() =>
router.replace(`/${workspaceSlug}/workspace-views/issues?viewId=${view.id}`)
}
>
{view.name}
</button>
))}
<button type="button" className="min-w-[96px] " onClick={handleAddView}>
<PlusIcon className="h-4 w-4 text-custom-primary-200 hover:text-current" />
<button
type="button"
className="flex items-center justify-center flex-shrink-0 sticky right-0 w-12 py-3 border-transparent bg-custom-background-100 hover:border-custom-border-200 hover:text-custom-text-400"
onClick={handleAddView}
>
<PlusIcon className="h-4 w-4 text-custom-primary-200" />
</button>
</div>
);