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

dev: implement global views using MobX (#2404)

Browse Source 
* fix: selfhosted fixes (#2154)

* fix: selfhosted fixes

* fix: updated env example

* chore: dynamic position dropdown (#2138)

* chore: dynamic position state dropdown for issue view

* style: state select dropdown styling

* fix: state icon attribute names

* chore: state select dynamic dropdown

* chore: member select dynamic dropdown

* chore: label select dynamic dropdown

* chore: priority select dynamic dropdown

* chore: label select dropdown improvement

* refactor: state dropdown location

* chore: dropdown improvement and code refactor

* chore: dynamic dropdown hook type added

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>

* fix: fields not getting selected in the create issue form (#2212)

* fix: hydration error and draft issue workflow

* fix: build error

* fix: properties getting de-selected after create, module & cycle not getting auto-select on the form

* fix: display layout, props being updated directly

* chore: sub issues count in individual issue (#2221)

* Implemented nested issues in the sub issues section in issue detail page (#2233)

* feat: subissues infinte level

* feat: updated UI for sub issues

* feat: subissues new ui and nested sub issues in issue detail

* chore: removed repeated code

* refactor: product updates modal layout (#2225)

* fix: handle no issues in custom analytics (#2226)

* fix: activity label color (#2227)

* fix: profile issues layout switch (#2228)

* fix: issues resolved in sub issues (#2238)

* fix: aws region name (#2234)

* chore: updated docker naming conventions (#2239)

* naming convention changes

* dev: update docker-compose-hub in consistent with docker-compose

* dev: updated docker container name

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>

* chore: added state and priority order in workspace user profile (#2241)

* fix: changed priority from None to none (#2229)

* fix: cycle and module stats when issues are archived (#2185)

* fix: cycle and module stats when issues are archived

* fix: added draft filter

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>

* feat: quick add  (#2240)

* feat: quick add

* style: made text color muted

* chore: added epoch in draft (#2244)

* chore: added epoch in draft

* chore: removed extra spaces

* fix: resolved pending issue graph in analytics, user wishes in dashboard, and typo in projects list (#2247)

* style: settings page improvement (#2211)

* style: settings page improvement

* style: toggle switch styling

---------

Co-authored-by: Anmol Singh Bhatia <asb@Anmols-MacBook-Pro.local>

* chore: changed priority props in workspace and project (#2253)

* fix: bug fix related to fetching dropdown options for the profile issue (#2246)

* fix: sub issue state and member select build error (#2254)

* rename view to layout (#2255)

Co-authored-by: Your Name <you@example.com>

* fix: bug fixes and ui improvement (#2250)

* dev: remove auto filter endpoint

* feat: quick-add placement in spreadsheet and gantt  (#2259)

* feat: sticking quick-add at the bottom of the screen

fix: opening create issue modal instead of quick-add in draft-issues, my-issue and profile page

* fix: build error due to dynamic import

* fix: draft issue delete not working (#2249)

* fix: draft issue not deleting, project can't be changed in draft issue modal

* fix: removed mutation for view where draft issues are not shown

* fix: inline create issue for draft issue

* fix: clearing data from localstorage on discard click

* feat: Add peek overview in sub issues and updated UI for empty states. (#2263)

* chore: add tooltip to show full time on activity logs (#2235)

* fix: issue automation iterable error (#2208)

* fix: n+1 queries for cycle list and project member endpoints (#2257)

* [fix] nginx continuously rewriting and reloading on index page of spaces app  (#2236)

* chore: shifted index page to /home route

* chore: added rewrite logic, to rewrite index to /home

* chore: routed home to login route as login page

* chore: updated nginx config to route to login

* chore: updated path for home

* dev: migration for 0.13 (#2266)

* dev: updated migrations

* dev: migration for 0.13

* dev: re-split migrations into two different files (#2268)

* dev: split issue activity migration separate files

* dev: resplit migrations into two different files

* dev: changed the batch size

* chore: udpate date filters to support dynamic options

* fix: bugs in quick-add and draft issues (#2269)

* fix: 'Last Drafted Issue' making sidebar look weird on collapsed

* feat: scroll to the bottom when issue is created

* fix: 'Add Issue' button overlapping issue card in spreadsheet view

* fix: wrong placement of quick-add in calender layout

* fix: spacing for issue card in spreadsheet view

* chore: add instructions to contributing guide (#2270)

* chore: add instructions to contributing guide

* dev: update contributing.md to use the new configuration

---------

Co-authored-by: Nikhil <118773738+pablohashescobar@users.noreply.github.com>

* fix: user dashboard greeting timezone (#2267)

* chore: user greeting timezone

* fix: group by labels not working on workspace level

* feat: workspace global view, style: spreadsheet view revamp (#2273)

* chore: workspace view types, services and hooks added

* style: spreadsheet view revamp and code refactor

* feat: workspace view

* fix: build fix

* chore: sidebar workspace issues redirection updated

* style: gantt layout quick-add padding (#2272)

* fix: 'Last Drafted Issue' making sidebar look weird on collapsed

* feat: scroll to the bottom when issue is created

* fix: 'Add Issue' button overlapping issue card in spreadsheet view

* fix: wrong placement of quick-add in calender layout

* fix: spacing for issue card in spreadsheet view

* style: gantt layout quick-add padding

style: removed 'State group' from draft issue

* style: decrese shadow, quick-add position on calender layout, and 'add issue' sticky

* style: button color

* fix: block click happening while moving (#2275)

* dev: refactor date filters to a single function

* chore: handle calendar date range in frontend (#2277)

* chore: gantt chart empty state (#2279)

* chore: gantt empty state

* chore: Add heading to the gantt sidebar

* style: calender quick-add same width as single date (#2280)

* style: calender quick-add same width as single date

* style: margin bottom in quick-add in spreadsheet view

* fix: quick add opening in list-layout

* style: reduced margin left

* chore: updated created at in draft issue (#2278)

* chore: make target dates inclusive when filtering (#2276)

* chore: sort order and issue props for global views (#2283)

* chore: removed project filter (#2284)

* fix: inbox issue deletes (#2290)

* chore: views (#2288)

* chore: global views order by

* chore: update permissions for global views

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>

* chore: fetch issues from previous and next month in the calendar view (#2282)

* fix: issue activity estimate value bug fix (#2281)

* fix: issue activity estimate value bug fix

* fix: activity typo fix

* fix: ui and bugs (#2289)

* fix: 24 character limit on first & last name in onboarding page

* fix: no option: 'Add Issue' in archive issue page

* fix: in archive issue directly sending to issue detail page

* fix: issue type showing in archive issue

* fix: custom menu overflowing

* fix: changing subscriber in filters has no effect

* style: border in quick-add

* fix: on onboarding member role overflowing

* fix: inconsistent icons in issue detail

* style: spacing, borders and shadows in quick-add

* fix: custom menu truncate

* fix: notifications for created by me and assigned to me (#2292)

* chore: workspace view display filters and properties , code refactor (#2295)

* chore: spreadsheet view context

* chore: spreadsheet context provider

* chore: spreadsheet view context

* chore: display filters and properties added in workspace view and code refactor

* fix: build error fix

* chore: set sub-issue display option to false for global views

---------

Co-authored-by: gurusainath <gurusainath007@gmail.com>

* chore: label create error (#2299)

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

* chore: workspace view mutation fix ,bug fixes and code refactor (#2301)

* chore: workspace view mutation fix ,bug fixes and code refactor

* chore: update workspace view toast alert added

* chore: workspace view order by removed (#2303)

* dev: updated migrations for 0.13-dev (#2305)

* chore: epoch migration batch size changed

* chore: reoredered the migration files

* dev: updated migrations for 0.13-dev

* chore: added epoch field

* dev: merged the migration files

* fix: workspace view filters count fix (#2307)

* fix: unsplash api fix (#2310)

* fix: workspace view redirection fix, style: spreadsheet view shadow scroll fix (#2314)

* fix: workspace view redirection fix

* style: spreadsheet view scroll shadow fix

* fix: update build workflow for the deploy app (#2315)

* fix: workspace view add issue mutation fix (#2317)

* dev: create action to sync PR changes to the repo (#2333)

* fix: ui package readme added (#2334)

* fix: variable name for token (#2336)

* dev: update add permissions to the action (#2337)

* dev: rename token variables (#2338)

* fix: updated readme fixes (#2339)

* dev: update sync workflow to run only when the source repo is configured (#2346)

* dev: update sync workflow to run only when the source repo is configured

* fix: naming convention changes

---------

Co-authored-by: sriramveeraghanta <veeraghanta.sriram@gmail.com>

* fix: issue relation mutation and draft issue (#2340)

* fix: issue relation mutation and draft issue

* fix: 'New Issue' in gantt view

fix: emoji select going under

* fix: profile page typo

* fix: sync workflow fixes (#2365)

* fix: sync job pr description escaped values fix (#2366)

* Update index.tsx (#2343)

Fixes #2342

* dev: update apiserver configuration files (#2348)

* dev: update apiserver configuration files

* dev: add email and minio redirection urls

* fix: themening  validation in store init. (#2350)

* chore: member can change role (#2371)

* chore: removed the issue draft log from my profile (#2368)

* adding sync info in pr title (#2373)

* chore: layout access validation and switch in plane deploy issues route (#2351)

* chore: handled route validation and layout access validation in plane deploy issues

* chore: impoved validation condition

* show current version in the help section dropdown (#2353)

* fix: table menu positioning (#2354)

* fix: handle cross project issues in the sub-issues. (#2357)

* fix: login process validation based on api config (#2361)

* dev: configuration endpoint for frontend client (#2355)

* dev: configuration endpoint for frontend clients

* dev: configuration enable magic and email/password signup

* dev: update unsplash keys

* dev: add unsplash API and add  env for magic login

* fix: 404 when redirecting user clicks on Sign In button (#2349)

* fix: 404 when redirecting user to login page

* fix: next_path redirection not working

* fix: authentication workflow update in plane deploy

---------

Co-authored-by: gurusainath <gurusainath007@gmail.com>

* fix: project setting member role validation (#2369)

* fix: project setting member role validation

* chore: opacity removed from member setting page

* chore: member setting page validation

* chore: project covers endpoint (#2370)

* chore: project covers endpoint

* dev: remove print logs

* dev: formatting

---------

Co-authored-by: sriramveeraghanta <veeraghanta.sriram@gmail.com>

* feat: default project cover images tab on the change cover popover (#2375)

* feat: default project cover images tab

* chore: remove unnecessary env vars from turbo.json

* chore: remove unnecessary OAuth envs (#2378)

* chore: remove unnecessary oauth envs

* merge conflicts resolved

* fix: adding new service

---------

Co-authored-by: sriramveeraghanta <veeraghanta.sriram@gmail.com>

* fix: added user store variables in mobx store observable (#2380)

* fix: state group icons (#2381)

* fix: removed default theme setting in the index page (#2382)

* fix: removed default theme setting in the index page

* fix: empty space

* dev: global views and workspace filters store implemented

* sync CE Master to EE Develop

* refactor: create update view modal

* chore: static issue global views

* refactor: remove old code

* refactor: filters select dropdown

* chore: fix calendar layout

* chore: mobx store for new applied filters

* chore: dded search functionality

---------

Co-authored-by: Vamsi Kurama <vamsi.kurama@gmail.com>
Co-authored-by: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Co-authored-by: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Co-authored-by: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com>
Co-authored-by: guru_sainath <gurusainath007@gmail.com>
Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
Co-authored-by: Anmol Singh Bhatia <asb@Anmols-MacBook-Pro.local>
Co-authored-by: Rhea Jain <65884341+rhea0110@users.noreply.github.com>
Co-authored-by: Your Name <you@example.com>
Co-authored-by: pablohashescobar <nikhilschacko@gmail.com>
Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>
Co-authored-by: Thomas <git@thomasync.dev>
Co-authored-by: Luis Cruz <55716036+luis-cruzt@users.noreply.github.com>
Co-authored-by: Manish Gupta <manish@mgupta.me>
This commit is contained in:
Aaryan Khandelwal 2023-10-11 12:07:04 +05:30 committed by GitHub
parent 57e2ed24ad
commit 4dec6761d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
76 changed files with 2381 additions and 2749 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/components/core/views/spreadsheet-view/assignee-column/assignee-column.tsx
View File

@ -12,20 +12,13 @@ import { ICurrentUserResponse, IIssue, Properties } from "types";
type Props = {
issue: IIssue;
projectId: string;
partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
onChange: (formData: Partial<IIssue>) => void;
properties: Properties;
user: ICurrentUserResponse | undefined;
isNotAllowed: boolean;
};
export const AssigneeColumn: React.FC<Props> = ({
issue,
projectId,
partialUpdateIssue,
properties,
user,
isNotAllowed,
}) => {
export const AssigneeColumn: React.FC<Props> = ({ issue, projectId, onChange, properties, user, isNotAllowed }) => {
const router = useRouter();
const { workspaceSlug } = router.query;
@ -36,7 +29,7 @@ export const AssigneeColumn: React.FC<Props> = ({
if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
else newData.push(data);
partialUpdateIssue({ assignees_list: data }, issue);
onChange({ assignees_list: data });
trackEventServices.trackIssuePartialPropertyUpdateEvent(
{

8
web/components/core/views/spreadsheet-view/assignee-column/spreadsheet-assignee-column.tsx
View File

@ -10,7 +10,7 @@ import { ICurrentUserResponse, IIssue, Properties } from "types";
type Props = {
issue: IIssue;
projectId: string;
partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
handleUpdateIssue: (issueId: string, data: Partial<IIssue>) => void;
expandedIssues: string[];
properties: Properties;
user: ICurrentUserResponse | undefined;
@ -20,7 +20,7 @@ type Props = {
export const SpreadsheetAssigneeColumn: React.FC<Props> = ({
issue,
projectId,
partialUpdateIssue,
handleUpdateIssue,
expandedIssues,
properties,
user,
@ -36,7 +36,7 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = ({
issue={issue}
projectId={projectId}
properties={properties}
partialUpdateIssue={partialUpdateIssue}
onChange={(data) => handleUpdateIssue(issue.id, data)}
user={user}
isNotAllowed={isNotAllowed}
/>
@ -50,7 +50,7 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = ({
key={subIssue.id}
issue={subIssue}
projectId={subIssue.project_detail.id}
partialUpdateIssue={partialUpdateIssue}
handleUpdateIssue={handleUpdateIssue}
expandedIssues={expandedIssues}
properties={properties}
user={user}

15
web/components/core/views/spreadsheet-view/created-on-column/created-on-column.tsx
View File

@ -1,27 +1,16 @@
import React from "react";
// types
import { ICurrentUserResponse, IIssue, Properties } from "types";
import { IIssue, Properties } from "types";
// helper
import { renderLongDetailDateFormat } from "helpers/date-time.helper";
type Props = {
issue: IIssue;
projectId: string;
partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
properties: Properties;
user: ICurrentUserResponse | undefined;
isNotAllowed: boolean;
};
export const CreatedOnColumn: React.FC<Props> = ({
issue,
projectId,
partialUpdateIssue,
properties,
user,
isNotAllowed,
}) => (
export const CreatedOnColumn: React.FC<Props> = ({ issue, properties }) => (
<div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
<span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
{properties.created_on && (

18
web/components/core/views/spreadsheet-view/created-on-column/spreadsheet-created-on-column.tsx
View File

@ -9,8 +9,7 @@ import { ICurrentUserResponse, IIssue, Properties } from "types";
type Props = {
issue: IIssue;
projectId: string;
partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
handleUpdateIssue: (formData: Partial<IIssue>) => void;
expandedIssues: string[];
properties: Properties;
user: ICurrentUserResponse | undefined;
@ -19,8 +18,7 @@ type Props = {
export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({
issue,
projectId,
partialUpdateIssue,
handleUpdateIssue,
expandedIssues,
properties,
user,
@ -32,14 +30,7 @@ export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({
return (
<div>
<CreatedOnColumn
issue={issue}
projectId={projectId}
properties={properties}
partialUpdateIssue={partialUpdateIssue}
user={user}
isNotAllowed={isNotAllowed}
/>
<CreatedOnColumn issue={issue} properties={properties} />
{isExpanded &&
!isLoading &&
@ -49,8 +40,7 @@ export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({
<SpreadsheetCreatedOnColumn
key={subIssue.id}
issue={subIssue}
projectId={subIssue.project_detail.id}
partialUpdateIssue={partialUpdateIssue}
handleUpdateIssue={handleUpdateIssue}
expandedIssues={expandedIssues}
properties={properties}
user={user}

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

@ -6,16 +6,11 @@ import { useRouter } from "next/router";
import { Popover2 } from "@blueprintjs/popover2";
// icons
import { Icon } from "components/ui";
import {
EllipsisHorizontalIcon,
LinkIcon,
PencilIcon,
TrashIcon,
} from "@heroicons/react/24/outline";
import { EllipsisHorizontalIcon, LinkIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
// hooks
import useToast from "hooks/use-toast";
// types
import { IIssue, Properties, UserAuth } from "types";
import { IIssue, Properties } from "types";
// helper
import { copyTextToClipboard } from "helpers/string.helper";
@ -29,7 +24,6 @@ type Props = {
handleDeleteIssue: (issue: IIssue) => void;
setCurrentProjectId: React.Dispatch<React.SetStateAction<string | null>>;
disableUserActions: boolean;
userAuth: UserAuth;
nestingLevel: number;
};
@ -43,7 +37,6 @@ export const IssueColumn: React.FC<Props> = ({
handleDeleteIssue,
setCurrentProjectId,
disableUserActions,
userAuth,
nestingLevel,
}) => {
const [isOpen, setIsOpen] = useState(false);
@ -64,11 +57,8 @@ export const IssueColumn: React.FC<Props> = ({
};
const handleCopyText = () => {
const originURL =
typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
copyTextToClipboard(
`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`
).then(() => {
const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`).then(() => {
setToastAlert({
type: "success",
title: "Link Copied!",
@ -79,8 +69,6 @@ export const IssueColumn: React.FC<Props> = ({
const paddingLeft = `${nestingLevel * 54}px`;
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-100">
{properties.key && (
@ -93,7 +81,7 @@ export const IssueColumn: React.FC<Props> = ({
{issue.project_detail?.identifier}-{issue.sequence_id}
</span>
{!isNotAllowed && !disableUserActions && (
{!disableUserActions && (
<div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
<Popover2
isOpen={isOpen}

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

@ -5,7 +5,7 @@ import { IssueColumn } from "components/core";
// hooks
import useSubIssue from "hooks/use-sub-issue";
// types
import { IIssue, Properties, UserAuth } from "types";
import { IIssue, Properties } from "types";
type Props = {
issue: IIssue;
@ -16,7 +16,6 @@ type Props = {
handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
setCurrentProjectId: React.Dispatch<React.SetStateAction<string | null>>;
disableUserActions: boolean;
userAuth: UserAuth;
nestingLevel?: number;
};
@ -29,7 +28,6 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
handleIssueAction,
setCurrentProjectId,
disableUserActions,
userAuth,
nestingLevel = 0,
}) => {
const handleToggleExpand = (issueId: string) => {
@ -61,7 +59,6 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
handleDeleteIssue={() => handleIssueAction(issue, "delete")}
setCurrentProjectId={setCurrentProjectId}
disableUserActions={disableUserActions}
userAuth={userAuth}
nestingLevel={nestingLevel}
/>
@ -80,7 +77,6 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
handleIssueAction={handleIssueAction}
setCurrentProjectId={setCurrentProjectId}
disableUserActions={disableUserActions}
userAuth={userAuth}
nestingLevel={nestingLevel + 1}
/>
))}

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

@ -1,10 +1,9 @@
import React, { useCallback, useEffect, useRef, useState } from "react";
// next
import React, { useEffect, useRef, useState } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { KeyedMutator, mutate } from "swr";
// hooks
import useLocalStorage from "hooks/use-local-storage";
// components
import {
ListInlineCreateIssueForm,
@ -21,50 +20,34 @@ import {
} from "components/core";
import { CustomMenu, Icon, Spinner } from "components/ui";
import { IssuePeekOverview } from "components/issues";
// hooks
import useIssuesProperties from "hooks/use-issue-properties";
import useLocalStorage from "hooks/use-local-storage";
import { useWorkspaceView } from "hooks/use-workspace-view";
// types
import { ICurrentUserResponse, IIssue, ISubIssueResponse, TIssueOrderByOptions, UserAuth } from "types";
import {
CYCLE_DETAILS,
CYCLE_ISSUES_WITH_PARAMS,
MODULE_DETAILS,
MODULE_ISSUES_WITH_PARAMS,
PROJECT_ISSUES_LIST_WITH_PARAMS,
SUB_ISSUES,
VIEW_ISSUES,
WORKSPACE_VIEW_ISSUES,
} from "constants/fetch-keys";
import issueService from "services/issue.service";
import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssueOrderByOptions } from "types";
// icon
import { CheckIcon, ChevronDownIcon, PlusIcon } from "lucide-react";
type Props = {
spreadsheetIssues: IIssue[];
mutateIssues: KeyedMutator<
| IIssue[]
| {
[key: string]: IIssue[];
}
>;
displayProperties: IIssueDisplayProperties;
displayFilters: IIssueDisplayFilterOptions;
handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
issues: IIssue[] | undefined;
handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
handleUpdateIssue: (issueId: string, data: Partial<IIssue>) => void;
openIssuesListModal?: (() => void) | null;
disableUserActions: boolean;
user: ICurrentUserResponse | undefined;
userAuth: UserAuth;
};
export const SpreadsheetView: React.FC<Props> = ({
spreadsheetIssues,
mutateIssues,
handleIssueAction,
openIssuesListModal,
disableUserActions,
user,
userAuth,
}) => {
export const SpreadsheetView: React.FC<Props> = observer((props) => {
const {
displayProperties,
displayFilters,
handleDisplayFilterUpdate,
issues,
handleIssueAction,
handleUpdateIssue,
openIssuesListModal,
disableUserActions,
} = props;
const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
const [currentProjectId, setCurrentProjectId] = useState<string | null>(null);
@ -75,12 +58,10 @@ export const SpreadsheetView: React.FC<Props> = ({
const containerRef = useRef<HTMLDivElement | null>(null);
const router = useRouter();
const { workspaceSlug, projectId, cycleId, moduleId, viewId, globalViewId } = router.query;
const { workspaceSlug, cycleId, moduleId } = router.query;
const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
const { storedValue: selectedMenuItem, setValue: setSelectedMenuItem } = useLocalStorage(
"spreadsheetViewSorting",
""
@ -90,135 +71,9 @@ export const SpreadsheetView: React.FC<Props> = ({
""
);
const workspaceIssuesPath = [
{
params: {
sub_issue: false,
},
path: "workspace-views/all-issues",
},
{
params: {
assignees: user?.id ?? undefined,
sub_issue: false,
},
path: "workspace-views/assigned",
},
{
params: {
created_by: user?.id ?? undefined,
sub_issue: false,
},
path: "workspace-views/created",
},
{
params: {
subscriber: user?.id ?? undefined,
sub_issue: false,
},
path: "workspace-views/subscribed",
},
];
const currentWorkspaceIssuePath = workspaceIssuesPath.find((path) => router.pathname.includes(path.path));
const { params: workspaceViewParams, filters: workspaceViewFilters, handleFilters } = useWorkspaceView();
const workspaceViewProperties = workspaceViewFilters.display_properties;
const isWorkspaceView = globalViewId || currentWorkspaceIssuePath;
const currentViewProperties = isWorkspaceView ? workspaceViewProperties : properties;
const params = {};
const partialUpdateIssue = useCallback(
(formData: Partial<IIssue>, issue: IIssue) => {
if (!workspaceSlug || !issue) return;
const fetchKey = cycleId
? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)
: moduleId
? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
: viewId
? VIEW_ISSUES(viewId.toString(), params)
: globalViewId
? WORKSPACE_VIEW_ISSUES(globalViewId.toString(), workspaceViewParams)
: currentWorkspaceIssuePath
? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), currentWorkspaceIssuePath?.params)
: PROJECT_ISSUES_LIST_WITH_PARAMS(issue.project_detail.id, params);
if (issue.parent)
mutate<ISubIssueResponse>(
SUB_ISSUES(issue.parent.toString()),
(prevData) => {
if (!prevData) return prevData;
return {
...prevData,
sub_issues: (prevData.sub_issues ?? []).map((i) => {
if (i.id === issue.id) {
return {
...i,
...formData,
};
}
return i;
}),
};
},
false
);
else
mutate<IIssue[]>(
fetchKey,
(prevData) =>
(prevData ?? []).map((p) => {
if (p.id === issue.id) {
return {
...p,
...formData,
};
}
return p;
}),
false
);
issueService
.patchIssue(workspaceSlug as string, issue.project_detail.id, issue.id as string, formData, user)
.then(() => {
if (issue.parent) {
mutate(SUB_ISSUES(issue.parent as string));
} else {
mutate(fetchKey);
if (cycleId) mutate(CYCLE_DETAILS(cycleId as string));
if (moduleId) mutate(MODULE_DETAILS(moduleId as string));
}
})
.catch((error) => {
console.log(error);
});
},
[
workspaceSlug,
cycleId,
moduleId,
viewId,
globalViewId,
workspaceViewParams,
currentWorkspaceIssuePath,
params,
user,
]
);
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => {
if (globalViewId) handleFilters("display_filters", { order_by: order });
else setDisplayFilters({ order_by: order });
handleDisplayFilterUpdate({ order_by: order });
setSelectedMenuItem(`${order}_${itemKey}`);
setActiveSortingProperty(order === "-created_at" ? "" : itemKey);
};
@ -232,182 +87,177 @@ 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">
{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" : ""
}`}
>
{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" : ""
}`}
/>
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
className={`mt-0.5 ${
selectedMenuItem === `${descendingOrder}_${propertyName}` ? "bg-custom-background-80" : ""
<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" : ""
}`}
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>
</>
)}
{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>
<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>
)}
{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 `}>
<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) => (
{issues?.map((issue) => (
<Component
key={`${issue.id}_${index}`}
key={issue.id}
issue={issue}
projectId={issue.project_detail.id}
partialUpdateIssue={partialUpdateIssue}
handleUpdateIssue={handleUpdateIssue}
expandedIssues={expandedIssues}
properties={currentViewProperties}
user={user}
isNotAllowed={isNotAllowed}
properties={displayProperties}
isNotAllowed={disableUserActions}
/>
))}
</div>
@ -438,7 +288,6 @@ export const SpreadsheetView: React.FC<Props> = ({
return (
<>
<IssuePeekOverview
handleMutation={() => mutateIssues()}
projectId={currentProjectId ?? ""}
workspaceSlug={workspaceSlug?.toString() ?? ""}
readOnly={disableUserActions}
@ -446,7 +295,7 @@ export const SpreadsheetView: React.FC<Props> = ({
<div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-200">
<div className="h-full w-full flex flex-col">
<div ref={containerRef} className="flex max-h-full h-full overflow-y-auto">
{spreadsheetIssues ? (
{issues ? (
<>
<div className="sticky left-0 w-[28rem] z-[2]">
<div
@ -456,13 +305,13 @@ export const SpreadsheetView: React.FC<Props> = ({
}}
>
<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">
{currentViewProperties.key && (
{displayProperties.key && (
<span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">ID</span>
)}
<span className="flex items-center px-4 py-2.5 h-full w-full flex-grow">Issue</span>
</div>
{spreadsheetIssues.map((issue: IIssue, index) => (
{issues.map((issue: IIssue, index) => (
<SpreadsheetIssuesColumn
key={`${issue.id}_${index}`}
issue={issue}
@ -470,20 +319,19 @@ export const SpreadsheetView: React.FC<Props> = ({
expandedIssues={expandedIssues}
setExpandedIssues={setExpandedIssues}
setCurrentProjectId={setCurrentProjectId}
properties={currentViewProperties}
properties={displayProperties}
handleIssueAction={handleIssueAction}
disableUserActions={disableUserActions}
userAuth={userAuth}
/>
))}
</div>
</div>
{currentViewProperties.state &&
{displayProperties.state &&
renderColumn("State", "state", SpreadsheetStateColumn, "state__name", "-state__name")}
{currentViewProperties.priority &&
{displayProperties.priority &&
renderColumn("Priority", "priority", SpreadsheetPriorityColumn, "priority", "-priority")}
{currentViewProperties.assignee &&
{displayProperties.assignee &&
renderColumn(
"Assignees",
"assignee",
@ -491,17 +339,17 @@ export const SpreadsheetView: React.FC<Props> = ({
"assignees__first_name",
"-assignees__first_name"
)}
{currentViewProperties.labels &&
{displayProperties.labels &&
renderColumn("Label", "labels", SpreadsheetLabelColumn, "labels__name", "-labels__name")}
{currentViewProperties.start_date &&
{displayProperties.start_date &&
renderColumn("Start Date", "start_date", SpreadsheetStartDateColumn, "-start_date", "start_date")}
{currentViewProperties.due_date &&
{displayProperties.due_date &&
renderColumn("Due Date", "due_date", SpreadsheetDueDateColumn, "-target_date", "target_date")}
{currentViewProperties.estimate &&
{displayProperties.estimate &&
renderColumn("Estimate", "estimate", SpreadsheetEstimateColumn, "estimate_point", "-estimate_point")}
{currentViewProperties.created_on &&
{displayProperties.created_on &&
renderColumn("Created On", "created_on", SpreadsheetCreatedOnColumn, "-created_at", "created_at")}
{currentViewProperties.updated_on &&
{displayProperties.updated_on &&
renderColumn("Updated On", "updated_on", SpreadsheetUpdatedOnColumn, "-updated_at", "updated_at")}
</>
) : (
@ -565,4 +413,4 @@ export const SpreadsheetView: React.FC<Props> = ({
</div>
</>
);
};
});

10
web/components/core/views/spreadsheet-view/state-column/spreadsheet-state-column.tsx
View File

@ -10,7 +10,7 @@ import { ICurrentUserResponse, IIssue, Properties } from "types";
type Props = {
issue: IIssue;
projectId: string;
partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
handleUpdateIssue: (issueId: string, data: Partial<IIssue>) => void;
expandedIssues: string[];
properties: Properties;
user: ICurrentUserResponse | undefined;
@ -20,7 +20,7 @@ type Props = {
export const SpreadsheetStateColumn: React.FC<Props> = ({
issue,
projectId,
partialUpdateIssue,
handleUpdateIssue,
expandedIssues,
properties,
user,
@ -36,7 +36,7 @@ export const SpreadsheetStateColumn: React.FC<Props> = ({
issue={issue}
projectId={projectId}
properties={properties}
partialUpdateIssue={partialUpdateIssue}
onChange={(data) => handleUpdateIssue(issue.id, data)}
user={user}
isNotAllowed={isNotAllowed}
/>
@ -45,12 +45,12 @@ export const SpreadsheetStateColumn: React.FC<Props> = ({
!isLoading &&
subIssues &&
subIssues.length > 0 &&
subIssues.map((subIssue: IIssue) => (
subIssues.map((subIssue) => (
<SpreadsheetStateColumn
key={subIssue.id}
issue={subIssue}
projectId={subIssue.project_detail.id}
partialUpdateIssue={partialUpdateIssue}
handleUpdateIssue={handleUpdateIssue}
expandedIssues={expandedIssues}
properties={properties}
user={user}

22
web/components/core/views/spreadsheet-view/state-column/state-column.tsx
View File

@ -12,20 +12,13 @@ import { ICurrentUserResponse, IIssue, IState, Properties } from "types";
type Props = {
issue: IIssue;
projectId: string;
partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
onChange: (formData: Partial<IIssue>) => void;
properties: Properties;
user: ICurrentUserResponse | undefined;
isNotAllowed: boolean;
};
export const StateColumn: React.FC<Props> = ({
issue,
projectId,
partialUpdateIssue,
properties,
user,
isNotAllowed,
}) => {
export const StateColumn: React.FC<Props> = ({ issue, projectId, onChange, properties, user, isNotAllowed }) => {
const router = useRouter();
const { workspaceSlug } = router.query;
@ -34,13 +27,10 @@ export const StateColumn: React.FC<Props> = ({
const oldState = states?.find((s) => s.id === issue.state);
const newState = states?.find((s) => s.id === data);
partialUpdateIssue(
{
state: data,
state_detail: newState,
},
issue
);
onChange({
state: data,
state_detail: newState,
});
trackEventServices.trackIssuePartialPropertyUpdateEvent(
{
workspaceSlug,

158
web/components/headers/global-issues.tsx Normal file
View File

@ -0,0 +1,158 @@
import { useCallback, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "components/issues";
import { CreateUpdateWorkspaceViewModal } from "components/workspace";
// ui
import { PrimaryButton, Tooltip } from "components/ui";
// icons
import { List, PlusIcon, Sheet } from "lucide-react";
// types
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TStaticViewTypes } from "types";
// constants
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
const GLOBAL_VIEW_LAYOUTS = [
{ key: "list", title: "List", link: "/workspace-views", icon: List },
{ key: "spreadsheet", title: "Spreadsheet", link: "/workspace-views/all-issues", icon: Sheet },
];
type Props = {
activeLayout: "list" | "spreadsheet";
};
const STATIC_VIEW_TYPES: TStaticViewTypes[] = ["all-issues", "assigned", "created", "subscribed"];
export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
const { activeLayout } = props;
const [createViewModal, setCreateViewModal] = useState(false);
const router = useRouter();
const { workspaceSlug, globalViewId } = router.query;
const {
globalViews: globalViewsStore,
globalViewFilters: globalViewFiltersStore,
workspaceFilter: workspaceFilterStore,
workspace: workspaceStore,
project: projectStore,
} = useMobxStore();
const queryData = globalViewId ? globalViewsStore.globalViewDetails[globalViewId.toString()]?.query_data : undefined;
const storedFilters = globalViewId ? globalViewFiltersStore.storedFilters[globalViewId.toString()] : undefined;
const handleFiltersUpdate = useCallback(
(key: keyof IIssueFilterOptions, value: string | string[]) => {
if (!workspaceSlug || !globalViewId) return;
const newValues = queryData?.filters?.[key] ?? [];
if (Array.isArray(value)) {
value.forEach((val) => {
if (!newValues.includes(val)) newValues.push(val);
});
} else {
if (queryData?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
else newValues.push(value);
}
globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
[key]: newValues,
});
},
[globalViewId, globalViewFiltersStore, queryData, workspaceSlug]
);
const handleDisplayFiltersUpdate = useCallback(
(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
if (!workspaceSlug) return;
workspaceFilterStore.updateWorkspaceFilters(workspaceSlug.toString(), {
display_filters: updatedDisplayFilter,
});
},
[workspaceFilterStore, workspaceSlug]
);
const handleDisplayPropertiesUpdate = useCallback(
(property: Partial<IIssueDisplayProperties>) => {
if (!workspaceSlug) return;
workspaceFilterStore.updateWorkspaceFilters(workspaceSlug.toString(), {
display_properties: property,
});
},
[workspaceFilterStore, workspaceSlug]
);
useSWR(
workspaceSlug ? "USER_WORKSPACE_DISPLAY_FILTERS" : null,
workspaceSlug ? () => workspaceFilterStore.fetchUserWorkspaceFilters(workspaceSlug.toString()) : null
);
return (
<>
<CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
<div className="flex items-center gap-2">
<div className="flex items-center gap-1 p-1 rounded bg-custom-background-80">
{GLOBAL_VIEW_LAYOUTS.map((layout) => (
<Link key={layout.key} href={`/${workspaceSlug}/${layout.link}`}>
<a>
<Tooltip tooltipContent={layout.title}>
<div
className={`w-7 h-[22px] rounded grid place-items-center transition-all hover:bg-custom-background-100 overflow-hidden group ${
activeLayout === layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
}`}
>
<layout.icon
size={14}
strokeWidth={2}
className={`${activeLayout === layout.key ? "text-custom-text-100" : "text-custom-text-200"}`}
/>
</div>
</Tooltip>
</a>
</Link>
))}
</div>
{activeLayout === "spreadsheet" && (
<>
{!STATIC_VIEW_TYPES.some((word) => router.pathname.includes(word)) && (
<FiltersDropdown title="Filters">
<FilterSelection
filters={storedFilters ?? {}}
handleFiltersUpdate={handleFiltersUpdate}
layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
labels={workspaceStore.workspaceLabels ?? undefined}
projects={workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined}
/>
</FiltersDropdown>
)}
<FiltersDropdown title="View">
<DisplayFiltersSelection
displayFilters={workspaceFilterStore.workspaceDisplayFilters}
displayProperties={workspaceFilterStore.workspaceDisplayProperties}
handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
/>
</FiltersDropdown>
</>
)}
<PrimaryButton className="flex items-center gap-2" onClick={() => setCreateViewModal(true)}>
<PlusIcon className="h-4 w-4" />
New View
</PrimaryButton>
</div>
</>
);
});

1
web/components/headers/index.ts
View File

@ -1,2 +1,3 @@
export * from "./global-issues";
export * from "./module-issues";
export * from "./project-issues";

19
web/components/headers/module-issues.tsx
View File

@ -7,7 +7,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
// components
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
// types
import { IIssueDisplayFilterOptions, IIssueFilterOptions, TIssueLayouts } from "types";
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
// constants
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
@ -15,7 +15,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId, moduleId } = router.query;
const { issueFilter: issueFilterStore, moduleFilter: moduleFilterStore } = useMobxStore();
const { issueFilter: issueFilterStore, moduleFilter: moduleFilterStore, project: projectStore } = useMobxStore();
const activeLayout = issueFilterStore.userDisplayFilters.layout;
@ -67,6 +67,15 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
[issueFilterStore, projectId, workspaceSlug]
);
const handleDisplayPropertiesUpdate = useCallback(
(property: Partial<IIssueDisplayProperties>) => {
if (!workspaceSlug || !projectId) return;
issueFilterStore.updateDisplayProperties(workspaceSlug.toString(), projectId.toString(), property);
},
[issueFilterStore, projectId, workspaceSlug]
);
return (
<div className="flex items-center gap-2">
<LayoutSelection
@ -79,13 +88,17 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
filters={moduleFilterStore.moduleFilters}
handleFiltersUpdate={handleFiltersUpdate}
layoutDisplayFiltersOptions={activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined}
projectId={projectId?.toString() ?? ""}
labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
/>
</FiltersDropdown>
<FiltersDropdown title="View">
<DisplayFiltersSelection
displayFilters={issueFilterStore.userDisplayFilters}
displayProperties={issueFilterStore.userDisplayProperties}
handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
layoutDisplayFiltersOptions={activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined}
/>
</FiltersDropdown>

19
web/components/headers/project-issues.tsx
View File

@ -7,7 +7,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
// components
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
// types
import { IIssueDisplayFilterOptions, IIssueFilterOptions, TIssueLayouts } from "types";
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
// constants
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
@ -15,7 +15,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { issueFilter: issueFilterStore } = useMobxStore();
const { issueFilter: issueFilterStore, project: projectStore } = useMobxStore();
const activeLayout = issueFilterStore.userDisplayFilters.layout;
@ -69,6 +69,15 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
[issueFilterStore, projectId, workspaceSlug]
);
const handleDisplayPropertiesUpdate = useCallback(
(property: Partial<IIssueDisplayProperties>) => {
if (!workspaceSlug || !projectId) return;
issueFilterStore.updateDisplayProperties(workspaceSlug.toString(), projectId.toString(), property);
},
[issueFilterStore, projectId, workspaceSlug]
);
return (
<div className="flex items-center gap-2">
<LayoutSelection
@ -81,13 +90,17 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
filters={issueFilterStore.userFilters}
handleFiltersUpdate={handleFiltersUpdate}
layoutDisplayFiltersOptions={activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined}
projectId={projectId?.toString() ?? ""}
labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
/>
</FiltersDropdown>
<FiltersDropdown title="View">
<DisplayFiltersSelection
displayFilters={issueFilterStore.userDisplayFilters}
displayProperties={issueFilterStore.userDisplayProperties}
handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
layoutDisplayFiltersOptions={activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined}
/>
</FiltersDropdown>

8
web/components/issues/issue-layouts/calendar/calendar.tsx
View File

@ -12,14 +12,14 @@ import { IIssueGroupedStructure } from "store/issue";
type Props = {
issues: IIssueGroupedStructure | null;
layout: "month" | "week" | undefined;
};
export const CalendarChart: React.FC<Props> = observer((props) => {
const { issues } = props;
const { issues, layout } = props;
const { calendar: calendarStore, issueFilter: issueFilterStore } = useMobxStore();
const { calendar: calendarStore } = useMobxStore();
const calendarLayout = issueFilterStore.userDisplayFilters.calendar?.layout ?? "month";
const calendarPayload = calendarStore.calendarPayload;
const allWeeksOfActiveMonth = calendarStore.allWeeksOfActiveMonth;
@ -37,7 +37,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
<CalendarHeader />
<CalendarWeekHeader />
<div className="h-full w-full overflow-y-auto">
{calendarLayout === "month" ? (
{layout === "month" ? (
<div className="h-full w-full grid grid-cols-1 divide-y-[0.5px] divide-custom-border-200">
{allWeeksOfActiveMonth &&
Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (

7
web/components/issues/issue-layouts/calendar/module-root.tsx
View File

@ -9,7 +9,7 @@ import { CalendarChart } from "components/issues";
import { IIssueGroupedStructure } from "store/issue";
export const ModuleCalendarLayout: React.FC = observer(() => {
const { module: moduleStore } = useMobxStore();
const { module: moduleStore, issueFilter: issueFilterStore } = useMobxStore();
// TODO: add drag and drop functionality
const onDragEnd = (result: DropResult) => {
@ -29,7 +29,10 @@ export const ModuleCalendarLayout: React.FC = observer(() => {
return (
<div className="h-full w-full pt-4 bg-custom-background-100 overflow-hidden">
<DragDropContext onDragEnd={onDragEnd}>
<CalendarChart issues={issues as IIssueGroupedStructure | null} />
<CalendarChart
issues={issues as IIssueGroupedStructure | null}
layout={issueFilterStore.userDisplayFilters.calendar?.layout}
/>
</DragDropContext>
</div>
);

7
web/components/issues/issue-layouts/calendar/root.tsx
View File

@ -9,7 +9,7 @@ import { CalendarChart } from "components/issues";
import { IIssueGroupedStructure } from "store/issue";
export const CalendarLayout: React.FC = observer(() => {
const { issue: issueStore } = useMobxStore();
const { issue: issueStore, issueFilter: issueFilterStore } = useMobxStore();
// TODO: add drag and drop functionality
const onDragEnd = (result: DropResult) => {
@ -29,7 +29,10 @@ export const CalendarLayout: React.FC = observer(() => {
return (
<div className="h-full w-full pt-4 bg-custom-background-100 overflow-hidden">
<DragDropContext onDragEnd={onDragEnd}>
<CalendarChart issues={issues as IIssueGroupedStructure | null} />
<CalendarChart
issues={issues as IIssueGroupedStructure | null}
layout={issueFilterStore.userDisplayFilters.calendar?.layout}
/>
</DragDropContext>
</div>
);

34
web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
View File

@ -6,6 +6,7 @@ import {
AppliedLabelsFilters,
AppliedMembersFilters,
AppliedPriorityFilters,
AppliedProjectFilters,
AppliedStateFilters,
AppliedStateGroupFilters,
} from "components/issues";
@ -14,39 +15,49 @@ import { X } from "lucide-react";
// helpers
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
// types
import { IIssueFilterOptions, IIssueLabels, IStateResponse, IUserLite } from "types";
import { IIssueFilterOptions, IIssueLabels, IProject, IStateResponse, IUserLite } from "types";
type Props = {
appliedFilters: IIssueFilterOptions;
handleClearAllFilters: () => void;
handleRemoveFilter: (key: keyof IIssueFilterOptions, value: string | null) => void;
labels: IIssueLabels[] | undefined;
members: IUserLite[] | undefined;
states: IStateResponse | undefined;
labels?: IIssueLabels[] | undefined;
members?: IUserLite[] | undefined;
projects?: IProject[] | undefined;
states?: IStateResponse | undefined;
};
const membersFilters = ["assignees", "created_by", "subscriber"];
const dateFilters = ["start_date", "target_date"];
export const AppliedFiltersList: React.FC<Props> = observer((props) => {
const { appliedFilters, handleClearAllFilters, handleRemoveFilter, labels, members, states } = props;
const { appliedFilters, handleClearAllFilters, handleRemoveFilter, labels, members, projects, states } = props;
if (!appliedFilters) return null;
if (Object.keys(appliedFilters).length === 0) return null;
return (
<div className="flex items-stretch gap-2 flex-wrap bg-custom-background-100 p-4">
<div className="flex items-stretch gap-2 flex-wrap bg-custom-background-100">
{Object.entries(appliedFilters).map(([key, value]) => {
const filterKey = key as keyof IIssueFilterOptions;
if (!value) return;
return (
<div
key={filterKey}
className="capitalize py-1 px-2 border border-custom-border-200 rounded-md flex items-center gap-2 flex-wrap"
>
<span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
{(filterKey === "assignees" || filterKey === "created_by" || filterKey === "subscriber") && (
{membersFilters.includes(filterKey) && (
<AppliedMembersFilters
handleRemove={(val) => handleRemoveFilter(filterKey, val)}
members={members}
values={value}
/>
)}
{(filterKey === "start_date" || filterKey === "target_date") && (
{dateFilters.includes(filterKey) && (
<AppliedDateFilters handleRemove={(val) => handleRemoveFilter(filterKey, val)} values={value} />
)}
{filterKey === "labels" && (
@ -69,6 +80,13 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
{filterKey === "state_group" && (
<AppliedStateGroupFilters handleRemove={(val) => handleRemoveFilter("state_group", val)} values={value} />
)}
{filterKey === "project" && (
<AppliedProjectFilters
handleRemove={(val) => handleRemoveFilter("project", val)}
projects={projects}
values={value}
/>
)}
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"

102
web/components/issues/issue-layouts/filters/applied-filters/global-views-root.tsx Normal file
View File

@ -0,0 +1,102 @@
import { useEffect } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { AppliedFiltersList } from "components/issues";
// ui
import { PrimaryButton } from "components/ui";
// helpers
import { areFiltersDifferent } from "helpers/filter.helper";
// types
import { IIssueFilterOptions } from "types";
export const GlobalViewsAppliedFiltersRoot = observer(() => {
const router = useRouter();
const { workspaceSlug, globalViewId } = router.query;
const {
globalViews: globalViewsStore,
globalViewFilters: globalViewFiltersStore,
project: projectStore,
workspace: workspaceStore,
} = useMobxStore();
const viewDetails = globalViewId ? globalViewsStore.globalViewDetails[globalViewId.toString()] : undefined;
const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
if (!globalViewId) return;
// remove all values of the key if value is null
if (!value) {
globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
[key]: null,
});
return;
}
// remove the passed value from the key
let newValues = globalViewFiltersStore.storedFilters?.[globalViewId.toString()]?.[key] ?? [];
newValues = newValues.filter((val) => val !== value);
globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
[key]: newValues,
});
};
const handleClearAllFilters = () => {
if (!globalViewId || !storedFilters) return;
const newFilters: IIssueFilterOptions = {};
Object.keys(storedFilters).forEach((key) => {
newFilters[key as keyof IIssueFilterOptions] = null;
});
globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
...newFilters,
});
};
const handleUpdateView = () => {
if (!workspaceSlug || !globalViewId || !viewDetails) return;
globalViewsStore.updateGlobalView(workspaceSlug.toString(), globalViewId.toString(), {
query_data: {
...viewDetails.query_data,
filters: {
...(storedFilters ?? {}),
},
},
});
};
const storedFilters = globalViewId ? globalViewFiltersStore.storedFilters[globalViewId.toString()] : undefined;
// update stored filters when view details are fetched
useEffect(() => {
if (!globalViewId || !viewDetails) return;
if (!globalViewFiltersStore.storedFilters[globalViewId.toString()])
globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), viewDetails?.query_data?.filters ?? {});
}, [globalViewId, globalViewFiltersStore, storedFilters, viewDetails]);
return (
<div className="flex items-start justify-between gap-4 p-4">
<AppliedFiltersList
appliedFilters={storedFilters ?? {}}
handleClearAllFilters={handleClearAllFilters}
handleRemoveFilter={handleRemoveFilter}
labels={workspaceStore.workspaceLabels ?? undefined}
members={workspaceStore.workspaceMembers?.map((m) => m.member)}
projects={workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined}
/>
{storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data.filters ?? {}) && (
<PrimaryButton className="whitespace-nowrap" onClick={handleUpdateView}>
Update view
</PrimaryButton>
)}
</div>
);
});

2
web/components/issues/issue-layouts/filters/applied-filters/index.ts
View File

@ -1,9 +1,11 @@
export * from "./date";
export * from "./filters-list";
export * from "./global-views-root";
export * from "./label";
export * from "./members";
export * from "./module-root";
export * from "./priority";
export * from "./project";
export * from "./root";
export * from "./state";
export * from "./state-group";

49
web/components/issues/issue-layouts/filters/applied-filters/project.tsx Normal file
View File

@ -0,0 +1,49 @@
import { observer } from "mobx-react-lite";
// icons
import { X } from "lucide-react";
// types
import { IProject } from "types";
import { renderEmoji } from "helpers/emoji.helper";
type Props = {
handleRemove: (val: string) => void;
projects: IProject[] | undefined;
values: string[];
};
export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
const { handleRemove, projects, values } = props;
return (
<div className="flex items-center gap-1 flex-wrap">
{values.map((projectId) => {
const projectDetails = projects?.find((p) => p.id === projectId);
if (!projectDetails) return null;
return (
<div key={projectId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
{projectDetails.emoji ? (
<span className="grid flex-shrink-0 place-items-center">{renderEmoji(projectDetails.emoji)}</span>
) : projectDetails.icon_prop ? (
<div className="grid place-items-center flex-shrink-0 -my-1">{renderEmoji(projectDetails.icon_prop)}</div>
) : (
<span className="grid mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
{projectDetails?.name.charAt(0)}
</span>
)}
<span className="normal-case">{projectDetails.name}</span>
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(projectId)}
>
<X size={10} strokeWidth={2} />
</button>
</div>
);
})}
</div>
);
});

2
web/components/issues/issue-layouts/filters/applied-filters/root.tsx
View File

@ -12,7 +12,7 @@ export const AppliedFiltersRoot: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { issueFilter: issueFilterStore, project: projectStore, moduleFilter: moduleFilterStore } = useMobxStore();
const { issueFilter: issueFilterStore, project: projectStore } = useMobxStore();
const userFilters = issueFilterStore.userFilters;

44
web/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
View File

@ -11,17 +11,25 @@ import {
FilterSubGroupBy,
} from "components/issues";
// types
import { IIssueDisplayFilterOptions } from "types";
import { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "types";
import { ILayoutDisplayFiltersOptions } from "constants/issue";
type Props = {
displayFilters: IIssueDisplayFilterOptions;
displayProperties: IIssueDisplayProperties;
handleDisplayFiltersUpdate: (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => void;
handleDisplayPropertiesUpdate: (updatedDisplayProperties: Partial<IIssueDisplayProperties>) => void;
layoutDisplayFiltersOptions: ILayoutDisplayFiltersOptions | undefined;
};
export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
const { displayFilters, handleDisplayFiltersUpdate, layoutDisplayFiltersOptions } = props;
const {
displayFilters,
displayProperties,
handleDisplayFiltersUpdate,
handleDisplayPropertiesUpdate,
layoutDisplayFiltersOptions,
} = props;
const isDisplayFilterEnabled = (displayFilter: keyof IIssueDisplayFilterOptions) =>
Object.keys(layoutDisplayFiltersOptions?.display_filters ?? {}).includes(displayFilter);
@ -31,7 +39,7 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
{/* display properties */}
{layoutDisplayFiltersOptions?.display_properties && (
<div className="py-2">
<FilterDisplayProperties />
<FilterDisplayProperties displayProperties={displayProperties} handleUpdate={handleDisplayPropertiesUpdate} />
</div>
)}
@ -52,20 +60,22 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
)}
{/* sub-group by */}
{isDisplayFilterEnabled("sub_group_by") && displayFilters.group_by !== null && (
<div className="py-2">
<FilterSubGroupBy
selectedGroupBy={displayFilters.group_by}
selectedSubGroupBy={displayFilters.sub_group_by}
handleUpdate={(val) =>
handleDisplayFiltersUpdate({
sub_group_by: val,
})
}
subGroupByOptions={layoutDisplayFiltersOptions?.display_filters.sub_group_by ?? []}
/>
</div>
)}
{isDisplayFilterEnabled("sub_group_by") &&
displayFilters.group_by !== null &&
displayFilters.layout === "kanban" && (
<div className="py-2">
<FilterSubGroupBy
selectedGroupBy={displayFilters.group_by}
selectedSubGroupBy={displayFilters.sub_group_by}
handleUpdate={(val) =>
handleDisplayFiltersUpdate({
sub_group_by: val,
})
}
subGroupByOptions={layoutDisplayFiltersOptions?.display_filters.sub_group_by ?? []}
/>
</div>
)}
{/* order by */}
{isDisplayFilterEnabled("order_by") && (

29
web/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx
View File

@ -1,10 +1,6 @@
import React from "react";
import { useRouter } from "next/router";
// mobx
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { FilterHeader } from "../helpers/filter-header";
// types
@ -12,21 +8,16 @@ import { IIssueDisplayProperties } from "types";
// constants
import { ISSUE_DISPLAY_PROPERTIES } from "constants/issue";
export const FilterDisplayProperties = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
type Props = {
displayProperties: IIssueDisplayProperties;
handleUpdate: (updatedDisplayProperties: Partial<IIssueDisplayProperties>) => void;
};
const store = useMobxStore();
const { issueFilter: issueFilterStore } = store;
export const FilterDisplayProperties: React.FC<Props> = observer((props) => {
const { displayProperties, handleUpdate } = props;
const [previewEnabled, setPreviewEnabled] = React.useState(true);
const handleDisplayProperties = (property: Partial<IIssueDisplayProperties>) => {
if (!workspaceSlug || !projectId) return;
issueFilterStore.updateDisplayProperties(workspaceSlug.toString(), projectId.toString(), property);
};
return (
<>
<FilterHeader
@ -41,13 +32,13 @@ export const FilterDisplayProperties = observer(() => {
key={displayProperty.key}
type="button"
className={`rounded transition-all text-xs border px-2 py-0.5 ${
issueFilterStore?.userDisplayProperties?.[displayProperty.key]
displayProperties?.[displayProperty.key]
? "bg-custom-primary-100 border-custom-primary-100 text-white"
: "border-custom-border-200 hover:bg-custom-background-80"
}`}
onClick={() =>
handleDisplayProperties({
[displayProperty.key]: !issueFilterStore?.userDisplayProperties?.[displayProperty.key],
handleUpdate({
[displayProperty.key]: !displayProperties?.[displayProperty.key],
})
}
>

55
web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
View File

@ -1,14 +1,13 @@
import React, { useState } from "react";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import {
FilterAssignees,
FilterCreatedBy,
FilterLabels,
FilterPriority,
FilterProjects,
FilterStartDate,
FilterState,
FilterStateGroup,
@ -19,7 +18,7 @@ import { Search, X } from "lucide-react";
// helpers
import { getStatesList } from "helpers/state.helper";
// types
import { IIssueFilterOptions } from "types";
import { IIssueFilterOptions, IIssueLabels, IProject, IStateResponse, IUserLite } from "types";
// constants
import { ILayoutDisplayFiltersOptions, ISSUE_PRIORITIES, ISSUE_STATE_GROUPS } from "constants/issue";
import { DATE_FILTER_OPTIONS } from "constants/filters";
@ -28,7 +27,10 @@ type Props = {
filters: IIssueFilterOptions;
handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
layoutDisplayFiltersOptions: ILayoutDisplayFiltersOptions | undefined;
projectId: string;
labels?: IIssueLabels[] | undefined;
members?: IUserLite[] | undefined;
projects?: IProject[] | undefined;
states?: IStateResponse | undefined;
};
type ViewButtonProps = {
@ -55,13 +57,11 @@ const ViewButtons = ({ handleLess, handleMore, isViewLessVisible, isViewMoreVisi
);
export const FilterSelection: React.FC<Props> = observer((props) => {
const { filters, handleFiltersUpdate, layoutDisplayFiltersOptions, projectId } = props;
const { filters, handleFiltersUpdate, layoutDisplayFiltersOptions, labels, members, projects, states } = props;
const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
const { project: projectStore } = useMobxStore();
const statesList = getStatesList(projectStore.states?.[projectId?.toString() ?? ""]);
const statesList = getStatesList(states);
const [filtersToRender, setFiltersToRender] = useState<{
[key in keyof IIssueFilterOptions]: {
@ -71,20 +71,24 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
}>({
assignees: {
currentLength: 5,
totalLength: projectStore.members?.[projectId]?.length ?? 0,
totalLength: members?.length ?? 0,
},
created_by: {
currentLength: 5,
totalLength: projectStore.members?.[projectId]?.length ?? 0,
totalLength: members?.length ?? 0,
},
labels: {
currentLength: 5,
totalLength: projectStore.labels?.[projectId]?.length ?? 0,
totalLength: labels?.length ?? 0,
},
priority: {
currentLength: 5,
totalLength: ISSUE_PRIORITIES.length,
},
project: {
currentLength: 5,
totalLength: projects?.length ?? 0,
},
state_group: {
currentLength: 5,
totalLength: ISSUE_STATE_GROUPS.length,
@ -219,7 +223,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
handleUpdate={(val) => handleFiltersUpdate("state", val)}
itemsToRender={filtersToRender.state?.currentLength ?? 0}
searchQuery={filtersSearchQuery}
states={projectStore.states?.[projectId]}
states={states}
viewButtons={
<ViewButtons
isViewLessVisible={isViewLessVisible("state")}
@ -239,7 +243,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
appliedFilters={filters.assignees ?? null}
handleUpdate={(val) => handleFiltersUpdate("assignees", val)}
itemsToRender={filtersToRender.assignees?.currentLength ?? 0}
members={projectStore.members?.[projectId]?.map((m) => m.member) ?? undefined}
members={members}
searchQuery={filtersSearchQuery}
viewButtons={
<ViewButtons
@ -260,7 +264,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
appliedFilters={filters.created_by ?? null}
handleUpdate={(val) => handleFiltersUpdate("created_by", val)}
itemsToRender={filtersToRender.created_by?.currentLength ?? 0}
members={projectStore.members?.[projectId]?.map((m) => m.member) ?? undefined}
members={members}
searchQuery={filtersSearchQuery}
viewButtons={
<ViewButtons
@ -281,7 +285,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
appliedFilters={filters.labels ?? null}
handleUpdate={(val) => handleFiltersUpdate("labels", val)}
itemsToRender={filtersToRender.labels?.currentLength ?? 0}
labels={projectStore.labels?.[projectId] ?? undefined}
labels={labels}
searchQuery={filtersSearchQuery}
viewButtons={
<ViewButtons
@ -295,6 +299,27 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
</div>
)}
{/* project */}
{isFilterEnabled("project") && (
<div className="py-2">
<FilterProjects
appliedFilters={filters.project ?? null}
projects={projects}
handleUpdate={(val) => handleFiltersUpdate("project", val)}
itemsToRender={filtersToRender.project?.currentLength ?? 0}
searchQuery={filtersSearchQuery}
viewButtons={
<ViewButtons
isViewLessVisible={isViewLessVisible("project")}
isViewMoreVisible={isViewMoreVisible("project")}
handleLess={() => handleViewLess("project")}
handleMore={() => handleViewMore("project")}
/>
}
/>
</div>
)}
{/* start_date */}
{isFilterEnabled("start_date") && (
<div className="py-2">

1
web/components/issues/issue-layouts/filters/header/filters/index.ts
View File

@ -3,6 +3,7 @@ export * from "./created-by";
export * from "./filters-selection";
export * from "./labels";
export * from "./priority";
export * from "./project";
export * from "./start-date";
export * from "./state-group";
export * from "./state";

81
web/components/issues/issue-layouts/filters/header/filters/project.tsx Normal file
View File

@ -0,0 +1,81 @@
import React, { useState } from "react";
// components
import { FilterHeader, FilterOption } from "components/issues";
// ui
import { Loader } from "components/ui";
// helpers
import { renderEmoji } from "helpers/emoji.helper";
// types
import { IProject } from "types";
type Props = {
appliedFilters: string[] | null;
handleUpdate: (val: string) => void;
itemsToRender: number;
projects: IProject[] | undefined;
searchQuery: string;
viewButtons: React.ReactNode;
};
export const FilterProjects: React.FC<Props> = (props) => {
const { appliedFilters, handleUpdate, itemsToRender, projects, searchQuery, viewButtons } = props;
const [previewEnabled, setPreviewEnabled] = useState(true);
const appliedFiltersCount = appliedFilters?.length ?? 0;
const filteredOptions = projects?.filter((project) => project.name.toLowerCase().includes(searchQuery.toLowerCase()));
return (
<>
<FilterHeader
title={`Project${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
isPreviewEnabled={previewEnabled}
handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
/>
{previewEnabled && (
<div>
{filteredOptions ? (
filteredOptions.length > 0 ? (
<>
{filteredOptions.slice(0, itemsToRender).map((project) => (
<FilterOption
key={`project-${project.id}`}
isChecked={appliedFilters?.includes(project.id) ? true : false}
onClick={() => handleUpdate(project.id)}
icon={
project.emoji ? (
<span className="grid flex-shrink-0 place-items-center text-sm">
{renderEmoji(project.emoji)}
</span>
) : project.icon_prop ? (
<div className="grid place-items-center flex-shrink-0 -my-1">
{renderEmoji(project.icon_prop)}
</div>
) : (
<span className="grid mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
{project?.name.charAt(0)}
</span>
)
}
title={project.name}
/>
))}
{viewButtons}
</>
) : (
<p className="text-xs text-custom-text-400 italic">No matches found</p>
)
) : (
<Loader className="space-y-2">
<Loader.Item height="20px" />
<Loader.Item height="20px" />
<Loader.Item height="20px" />
</Loader>
)}
</div>
)}
</>
);
};

50
web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
View File

@ -1,7 +1,7 @@
import React, { Fragment } from "react";
// headless ui
import React, { Fragment, useState } from "react";
import { usePopper } from "react-popper";
import { Popover, Transition } from "@headlessui/react";
// icons
import { ChevronUp } from "lucide-react";
@ -13,24 +13,35 @@ type Props = {
export const FiltersDropdown: React.FC<Props> = (props) => {
const { children, title = "Dropdown" } = props;
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: "auto",
});
return (
<Popover className="relative">
<Popover>
{({ open }) => {
if (open) {
}
return (
<>
<Popover.Button
className={`outline-none border border-custom-border-200 text-xs rounded flex items-center gap-2 px-2 py-1.5 hover:bg-custom-background-80 ${
open ? "text-custom-text-100" : "text-custom-text-200"
}`}
>
<div className="font-medium">{title}</div>
<div
className={`w-3.5 h-3.5 flex items-center justify-center transition-all ${open ? "" : "rotate-180"}`}
<Popover.Button as={React.Fragment}>
<button
type="button"
className={`outline-none border border-custom-border-200 text-xs rounded flex items-center gap-2 px-2 py-1.5 hover:bg-custom-background-80 ${
open ? "text-custom-text-100" : "text-custom-text-200"
}`}
ref={setReferenceElement}
>
<ChevronUp width={14} strokeWidth={2} />
</div>
<div className="font-medium">{title}</div>
<div
className={`w-3.5 h-3.5 flex items-center justify-center transition-all ${open ? "" : "rotate-180"}`}
>
<ChevronUp width={14} strokeWidth={2} />
</div>
</button>
</Popover.Button>
<Transition
as={Fragment}
@ -41,8 +52,15 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute right-0 z-10 mt-1 bg-custom-background-100 border border-custom-border-200 shadow-custom-shadow-rg rounded overflow-hidden">
<div className="w-[18.75rem] max-h-[37.5rem] flex flex-col overflow-hidden">{children}</div>
<Popover.Panel>
<div
className="z-10 bg-custom-background-100 border border-custom-border-200 shadow-custom-shadow-rg rounded overflow-hidden"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<div className="w-[18.75rem] max-h-[37.5rem] flex flex-col overflow-hidden">{children}</div>
</div>
</Popover.Panel>
</Transition>
</>

2
web/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
View File

@ -27,7 +27,7 @@ export const FilterOption: React.FC<Props> = (props) => {
{isChecked && <Check size={10} strokeWidth={3} />}
</div>
<div className="flex items-center gap-2 truncate">
<div className="flex-shrink-0 grid place-items-center">{icon}</div>
{icon && <div className="flex-shrink-0 grid place-items-center w-5">{icon}</div>}
<div className="flex-grow truncate text-custom-text-200 text-xs">{title}</div>
</div>
</button>

88
web/components/issues/issue-layouts/global-views-all-layouts.tsx Normal file
View File

@ -0,0 +1,88 @@
import React, { useCallback } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { SpreadsheetView } from "components/core";
import { GlobalViewsAppliedFiltersRoot } from "components/issues";
// types
import { IIssueDisplayFilterOptions, TStaticViewTypes } from "types";
// fetch-keys
import { GLOBAL_VIEW_ISSUES } from "constants/fetch-keys";
type Props = {
type?: TStaticViewTypes;
};
export const GlobalViewsAllLayouts: React.FC<Props> = observer((props) => {
const { type } = props;
const router = useRouter();
const { workspaceSlug, globalViewId } = router.query;
const {
globalViews: globalViewsStore,
globalViewIssues: globalViewIssuesStore,
globalViewFilters: globalViewFiltersStore,
workspaceFilter: workspaceFilterStore,
} = useMobxStore();
const viewDetails = globalViewId ? globalViewsStore.globalViewDetails[globalViewId.toString()] : undefined;
const storedFilters = globalViewId ? globalViewFiltersStore.storedFilters[globalViewId.toString()] : undefined;
useSWR(
workspaceSlug && globalViewId && viewDetails ? GLOBAL_VIEW_ISSUES(globalViewId.toString()) : null,
workspaceSlug && globalViewId && viewDetails
? () => {
globalViewIssuesStore.fetchViewIssues(workspaceSlug.toString(), globalViewId.toString(), storedFilters ?? {});
}
: null
);
useSWR(
workspaceSlug && type ? GLOBAL_VIEW_ISSUES(type) : null,
workspaceSlug && type
? () => {
globalViewIssuesStore.fetchStaticIssues(workspaceSlug.toString(), type);
}
: null
);
const handleDisplayFiltersUpdate = useCallback(
(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
if (!workspaceSlug) return;
workspaceFilterStore.updateWorkspaceFilters(workspaceSlug.toString(), {
display_filters: updatedDisplayFilter,
});
},
[workspaceFilterStore, workspaceSlug]
);
const issues = type
? globalViewIssuesStore.viewIssues?.[type]
: globalViewId
? globalViewIssuesStore.viewIssues?.[globalViewId.toString()]
: undefined;
return (
<div className="relative w-full h-full flex flex-col overflow-auto">
<GlobalViewsAppliedFiltersRoot />
<div className="h-full w-full">
<SpreadsheetView
displayProperties={workspaceFilterStore.workspaceDisplayProperties}
displayFilters={workspaceFilterStore.workspaceDisplayFilters}
handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
issues={issues}
handleIssueAction={() => {}}
handleUpdateIssue={() => {}}
disableUserActions={false}
/>
</div>
</div>
);
});

1
web/components/issues/issue-layouts/index.ts
View File

@ -7,6 +7,7 @@ export * from "./calendar";
export * from "./gantt";
export * from "./kanban";
export * from "./spreadsheet";
export * from "./global-views-all-layouts";
// cycle root layout
export * from "./cycle-layout-root";

9
web/components/issues/modal.tsx
View File

@ -18,7 +18,6 @@ import useInboxView from "hooks/use-inbox-view";
import useProjects from "hooks/use-projects";
import useMyIssues from "hooks/my-issues/use-my-issues";
import useLocalStorage from "hooks/use-local-storage";
import { useWorkspaceView } from "hooks/use-workspace-view";
// components
import { IssueForm, ConfirmIssueDiscard } from "components/issues";
// types
@ -36,7 +35,7 @@ import {
VIEW_ISSUES,
INBOX_ISSUES,
PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS,
WORKSPACE_VIEW_ISSUES,
GLOBAL_VIEW_ISSUES,
} from "constants/fetch-keys";
// constants
import { INBOX_ISSUE_SOURCE } from "constants/inbox";
@ -92,7 +91,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
const { groupedIssues, mutateMyIssues } = useMyIssues(workspaceSlug?.toString());
const { params: globalViewParams } = useWorkspaceView();
const globalViewParams = {};
const { setValue: setValueInLocalStorage, clearValue: clearLocalStorageValue } = useLocalStorage<any>(
"draftedIssue",
@ -342,10 +341,10 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
if (globalViewId) mutate(WORKSPACE_VIEW_ISSUES(globalViewId.toString(), globalViewParams));
if (globalViewId) mutate(GLOBAL_VIEW_ISSUES(globalViewId.toString(), globalViewParams));
if (currentWorkspaceIssuePath)
mutate(WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), currentWorkspaceIssuePath?.params));
mutate(GLOBAL_VIEW_ISSUES(workspaceSlug.toString(), currentWorkspaceIssuePath?.params));
})
.catch(() => {
setToastAlert({

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

@ -1,232 +0,0 @@
import React, { useCallback, useState } from "react";
import useSWR from "swr";
import { useRouter } from "next/router";
// context
import { useProjectMyMembership } from "contexts/project-member.context";
// service
import projectIssuesServices from "services/issues.service";
// hooks
import useProjects from "hooks/use-projects";
import useUser from "hooks/use-user";
import { useWorkspaceView } from "hooks/use-workspace-view";
import useWorkspaceMembers from "hooks/use-workspace-members";
import useToast from "hooks/use-toast";
// components
import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
import { EmptyState, PrimaryButton } from "components/ui";
import { SpreadsheetView, WorkspaceFiltersList } from "components/core";
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
// icon
import { PlusIcon } from "components/icons";
// image
import emptyView from "public/empty-state/view.svg";
// constants
import { WORKSPACE_LABELS } from "constants/fetch-keys";
import { STATE_GROUP } from "constants/project";
// types
import { IIssue, IWorkspaceIssueFilterOptions } from "types";
export const WorkspaceViewIssues = () => {
const router = useRouter();
const { workspaceSlug, globalViewId } = router.query;
const { setToastAlert } = useToast();
const { memberRole } = useProjectMyMembership();
const { user } = useUser();
const { isGuest, isViewer } = useWorkspaceMembers(
workspaceSlug?.toString(),
Boolean(workspaceSlug)
);
const { filters, viewIssues, mutateViewIssues, handleFilters } = useWorkspaceView();
const [createViewModal, setCreateViewModal] = useState<any>(null);
// create issue modal
const [createIssueModal, setCreateIssueModal] = useState(false);
const [preloadedData, setPreloadedData] = useState<
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
>(undefined);
// update issue modal
const [editIssueModal, setEditIssueModal] = useState(false);
const [issueToEdit, setIssueToEdit] = useState<
(IIssue & { actionType: "edit" | "delete" }) | undefined
>(undefined);
// delete issue modal
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
const { projects: allProjects } = useProjects();
const joinedProjects = allProjects?.filter((p) => p.is_member);
const { data: workspaceLabels } = useSWR(
workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
workspaceSlug ? () => projectIssuesServices.getWorkspaceLabels(workspaceSlug.toString()) : null
);
const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
const makeIssueCopy = useCallback(
(issue: IIssue) => {
setCreateIssueModal(true);
setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
},
[setCreateIssueModal, setPreloadedData]
);
const handleEditIssue = useCallback(
(issue: IIssue) => {
setEditIssueModal(true);
setIssueToEdit({
...issue,
actionType: "edit",
cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
module: issue.issue_module ? issue.issue_module.module : null,
});
},
[setEditIssueModal, setIssueToEdit]
);
const handleDeleteIssue = useCallback(
(issue: IIssue) => {
setDeleteIssueModal(true);
setIssueToDelete(issue);
},
[setDeleteIssueModal, setIssueToDelete]
);
const handleIssueAction = useCallback(
(issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
if (action === "copy") makeIssueCopy(issue);
else if (action === "edit") handleEditIssue(issue);
else if (action === "delete") handleDeleteIssue(issue);
},
[makeIssueCopy, handleEditIssue, handleDeleteIssue]
);
const nullFilters =
filters.filters &&
Object.keys(filters.filters).filter(
(key) =>
filters.filters[key as keyof IWorkspaceIssueFilterOptions] === null ||
(filters.filters[key as keyof IWorkspaceIssueFilterOptions]?.length ?? 0) <= 0
);
const areFiltersApplied =
filters.filters &&
Object.keys(filters.filters).length > 0 &&
nullFilters.length !== Object.keys(filters.filters).length;
const isNotAllowed = isGuest || isViewer;
return (
<>
<CreateUpdateIssueModal
isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
handleClose={() => setCreateIssueModal(false)}
prePopulateData={{
...preloadedData,
}}
onSubmit={async () => mutateViewIssues()}
/>
<CreateUpdateIssueModal
isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
handleClose={() => setEditIssueModal(false)}
data={issueToEdit}
onSubmit={async () => mutateViewIssues()}
/>
<DeleteIssueModal
handleClose={() => setDeleteIssueModal(false)}
isOpen={deleteIssueModal}
data={issueToDelete}
user={user}
onSubmit={async () => mutateViewIssues()}
/>
<CreateUpdateWorkspaceViewModal
isOpen={createViewModal !== null}
handleClose={() => setCreateViewModal(null)}
preLoadedData={createViewModal}
/>
<div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
<div className="h-full w-full border-b border-custom-border-300">
<WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
{false ? (
<EmptyState
image={emptyView}
title="View does not exist"
description="The view you are looking for does not exist or has been deleted."
primaryButton={{
text: "View other views",
onClick: () => router.push(`/${workspaceSlug}/workspace-views`),
}}
/>
) : (
<div className="h-full w-full flex flex-col">
{areFiltersApplied && (
<>
<div className="flex items-center justify-between gap-2 px-5 pt-3 pb-0">
<WorkspaceFiltersList
filters={filters.filters}
setFilters={(updatedFilter) => handleFilters("filters", updatedFilter)}
labels={workspaceLabels}
members={workspaceMembers?.map((m) => m.member)}
stateGroup={STATE_GROUP}
project={joinedProjects}
clearAllFilters={() =>
handleFilters("filters", {
assignees: null,
created_by: null,
labels: null,
priority: null,
state_group: null,
start_date: null,
target_date: null,
subscriber: null,
project: null,
})
}
/>
<PrimaryButton
onClick={() => {
if (globalViewId) {
handleFilters("filters", filters.filters, true);
setToastAlert({
title: "View updated",
message: "Your view has been updated",
type: "success",
});
} else
setCreateViewModal({
query: filters.filters,
});
}}
className="flex items-center gap-2 text-sm"
>
{!globalViewId && <PlusIcon className="h-4 w-4" />}
{globalViewId ? "Update" : "Save"} view
</PrimaryButton>
</div>
{<div className="mt-3 border-t border-custom-border-200" />}
</>
)}
<SpreadsheetView
spreadsheetIssues={viewIssues}
mutateIssues={mutateViewIssues}
handleIssueAction={handleIssueAction}
disableUserActions={isNotAllowed ?? false}
user={user}
userAuth={memberRole}
/>
</div>
)}
</div>
</div>
</>
);
};

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

@ -1,236 +0,0 @@
import { useCallback, useState } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// hook
import useUser from "hooks/use-user";
import useWorkspaceMembers from "hooks/use-workspace-members";
import useProjects from "hooks/use-projects";
import { useWorkspaceView } from "hooks/use-workspace-view";
// context
import { useProjectMyMembership } from "contexts/project-member.context";
// services
import workspaceService from "services/workspace.service";
import projectIssuesServices from "services/issues.service";
// components
import { SpreadsheetView, WorkspaceFiltersList } from "components/core";
import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
// ui
import { PrimaryButton } from "components/ui";
// icons
import { PlusIcon } from "@heroicons/react/24/outline";
// fetch-keys
import { WORKSPACE_LABELS, WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
// constants
import { STATE_GROUP } from "constants/project";
// types
import { IIssue, IWorkspaceIssueFilterOptions } from "types";
export const WorkspaceAllIssue = () => {
const router = useRouter();
const { workspaceSlug, globalViewId } = router.query;
const [createViewModal, setCreateViewModal] = useState<any>(null);
// create issue modal
const [createIssueModal, setCreateIssueModal] = useState(false);
const [preloadedData, setPreloadedData] = useState<
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
>(undefined);
// update issue modal
const [editIssueModal, setEditIssueModal] = useState(false);
const [issueToEdit, setIssueToEdit] = useState<
(IIssue & { actionType: "edit" | "delete" }) | undefined
>(undefined);
// delete issue modal
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
const { user } = useUser();
const { memberRole } = useProjectMyMembership();
const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
const { data: workspaceLabels } = useSWR(
workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
workspaceSlug ? () => projectIssuesServices.getWorkspaceLabels(workspaceSlug.toString()) : null
);
const { filters, handleFilters } = useWorkspaceView();
const params: any = {
assignees: filters?.filters?.assignees ? filters?.filters?.assignees.join(",") : undefined,
subscriber: filters?.filters?.subscriber ? filters?.filters?.subscriber.join(",") : undefined,
state_group: filters?.filters?.state_group
? filters?.filters?.state_group.join(",")
: undefined,
priority: filters?.filters?.priority ? filters?.filters?.priority.join(",") : undefined,
labels: filters?.filters?.labels ? filters?.filters?.labels.join(",") : undefined,
created_by: filters?.filters?.created_by ? filters?.filters?.created_by.join(",") : undefined,
start_date: filters?.filters?.start_date ? filters?.filters?.start_date.join(",") : undefined,
target_date: filters?.filters?.target_date
? filters?.filters?.target_date.join(",")
: undefined,
project: filters?.filters?.project ? filters?.filters?.project.join(",") : undefined,
sub_issue: false,
type: undefined,
};
const { data: viewIssues, mutate: mutateViewIssues } = useSWR(
workspaceSlug ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
workspaceSlug ? () => workspaceService.getViewIssues(workspaceSlug.toString(), params) : null
);
const makeIssueCopy = useCallback(
(issue: IIssue) => {
setCreateIssueModal(true);
setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
},
[setCreateIssueModal, setPreloadedData]
);
const handleEditIssue = useCallback(
(issue: IIssue) => {
setEditIssueModal(true);
setIssueToEdit({
...issue,
actionType: "edit",
cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
module: issue.issue_module ? issue.issue_module.module : null,
});
},
[setEditIssueModal, setIssueToEdit]
);
const handleDeleteIssue = useCallback(
(issue: IIssue) => {
setDeleteIssueModal(true);
setIssueToDelete(issue);
},
[setDeleteIssueModal, setIssueToDelete]
);
const handleIssueAction = useCallback(
(issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
if (action === "copy") makeIssueCopy(issue);
else if (action === "edit") handleEditIssue(issue);
else if (action === "delete") handleDeleteIssue(issue);
},
[makeIssueCopy, handleEditIssue, handleDeleteIssue]
);
const nullFilters =
filters.filters &&
Object.keys(filters.filters).filter(
(key) =>
filters.filters[key as keyof IWorkspaceIssueFilterOptions] === null ||
(filters.filters[key as keyof IWorkspaceIssueFilterOptions]?.length ?? 0) <= 0
);
const areFiltersApplied =
filters.filters &&
Object.keys(filters.filters).length > 0 &&
nullFilters.length !== Object.keys(filters.filters).length;
const { projects: allProjects } = useProjects();
const joinedProjects = allProjects?.filter((p) => p.is_member);
return (
<>
<CreateUpdateIssueModal
isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
handleClose={() => setCreateIssueModal(false)}
prePopulateData={{
...preloadedData,
}}
onSubmit={async () => {
mutateViewIssues();
}}
/>
<CreateUpdateIssueModal
isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
handleClose={() => setEditIssueModal(false)}
data={issueToEdit}
onSubmit={async () => {
mutateViewIssues();
}}
/>
<DeleteIssueModal
handleClose={() => setDeleteIssueModal(false)}
isOpen={deleteIssueModal}
data={issueToDelete}
user={user}
onSubmit={async () => {
mutateViewIssues();
}}
/>
<CreateUpdateWorkspaceViewModal
isOpen={createViewModal !== null}
handleClose={() => setCreateViewModal(null)}
preLoadedData={createViewModal}
/>
<div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
<div className="h-full w-full border-b border-custom-border-300">
<WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
<div className="h-full w-full flex flex-col">
{areFiltersApplied && (
<>
<div className="flex items-center justify-between gap-2 px-5 pt-3 pb-0">
<WorkspaceFiltersList
filters={filters.filters}
setFilters={(updatedFilter) => handleFilters("filters", updatedFilter)}
labels={workspaceLabels}
members={workspaceMembers?.map((m) => m.member)}
stateGroup={STATE_GROUP}
project={joinedProjects}
clearAllFilters={() =>
handleFilters("filters", {
assignees: null,
created_by: null,
labels: null,
priority: null,
state_group: null,
start_date: null,
target_date: null,
subscriber: null,
project: null,
})
}
/>
<PrimaryButton
onClick={() => {
if (globalViewId) handleFilters("filters", filters.filters, true);
else
setCreateViewModal({
query: filters.filters,
});
}}
className="flex items-center gap-2 text-sm"
>
{!globalViewId && <PlusIcon className="h-4 w-4" />}
{globalViewId ? "Update" : "Save"} view
</PrimaryButton>
</div>
{<div className="mt-3 border-t border-custom-border-200" />}
</>
)}
<SpreadsheetView
spreadsheetIssues={viewIssues}
mutateIssues={mutateViewIssues}
handleIssueAction={handleIssueAction}
disableUserActions={false}
user={user}
userAuth={memberRole}
/>
</div>
</div>
</div>
</>
);
};

148
web/components/issues/workspace-views/workspace-assigned-issue.tsx
View File

@ -1,148 +0,0 @@
import React, { useCallback, useState } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// hook
import useUser from "hooks/use-user";
// context
import { useProjectMyMembership } from "contexts/project-member.context";
// services
import workspaceService from "services/workspace.service";
// components
import { SpreadsheetView } from "components/core";
import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
// fetch-keys
import { WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
// types
import { IIssue } from "types";
export const WorkspaceAssignedIssue = () => {
const [createViewModal, setCreateViewModal] = useState<any>(null);
// create issue modal
const [createIssueModal, setCreateIssueModal] = useState(false);
const [preloadedData, setPreloadedData] = useState<
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
>(undefined);
// update issue modal
const [editIssueModal, setEditIssueModal] = useState(false);
const [issueToEdit, setIssueToEdit] = useState<
(IIssue & { actionType: "edit" | "delete" }) | undefined
>(undefined);
// delete issue modal
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
const router = useRouter();
const { workspaceSlug } = router.query;
const { user } = useUser();
const { memberRole } = useProjectMyMembership();
const params: any = {
assignees: user?.id ?? undefined,
sub_issue: false,
};
const { data: viewIssues, mutate: mutateIssues } = useSWR(
workspaceSlug ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
workspaceSlug ? () => workspaceService.getViewIssues(workspaceSlug.toString(), params) : null
);
const makeIssueCopy = useCallback(
(issue: IIssue) => {
setCreateIssueModal(true);
setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
},
[setCreateIssueModal, setPreloadedData]
);
const handleEditIssue = useCallback(
(issue: IIssue) => {
setEditIssueModal(true);
setIssueToEdit({
...issue,
actionType: "edit",
cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
module: issue.issue_module ? issue.issue_module.module : null,
});
},
[setEditIssueModal, setIssueToEdit]
);
const handleDeleteIssue = useCallback(
(issue: IIssue) => {
setDeleteIssueModal(true);
setIssueToDelete(issue);
},
[setDeleteIssueModal, setIssueToDelete]
);
const handleIssueAction = useCallback(
(issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
if (action === "copy") makeIssueCopy(issue);
else if (action === "edit") handleEditIssue(issue);
else if (action === "delete") handleDeleteIssue(issue);
},
[makeIssueCopy, handleEditIssue, handleDeleteIssue]
);
return (
<>
<CreateUpdateIssueModal
isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
handleClose={() => setCreateIssueModal(false)}
prePopulateData={{
...preloadedData,
}}
onSubmit={async () => {
mutateIssues();
}}
/>
<CreateUpdateIssueModal
isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
handleClose={() => setEditIssueModal(false)}
data={issueToEdit}
onSubmit={async () => {
mutateIssues();
}}
/>
<DeleteIssueModal
handleClose={() => setDeleteIssueModal(false)}
isOpen={deleteIssueModal}
data={issueToDelete}
user={user}
onSubmit={async () => {
mutateIssues();
}}
/>
<CreateUpdateWorkspaceViewModal
isOpen={createViewModal !== null}
handleClose={() => setCreateViewModal(null)}
preLoadedData={createViewModal}
/>
<div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
<div className="h-full w-full border-b border-custom-border-300">
<WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
<div className="h-full w-full flex flex-col">
<SpreadsheetView
spreadsheetIssues={viewIssues}
mutateIssues={mutateIssues}
handleIssueAction={handleIssueAction}
disableUserActions={false}
user={user}
userAuth={memberRole}
/>
</div>
</div>
</div>
</>
);
};

147
web/components/issues/workspace-views/workspace-created-issues.tsx
View File

@ -1,147 +0,0 @@
import React, { useCallback, useState } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// hook
import useUser from "hooks/use-user";
// context
import { useProjectMyMembership } from "contexts/project-member.context";
// services
import workspaceService from "services/workspace.service";
// components
import { SpreadsheetView } from "components/core";
import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
// fetch-keys
import { WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
// types
import { IIssue } from "types";
export const WorkspaceCreatedIssues = () => {
const [createViewModal, setCreateViewModal] = useState<any>(null);
// create issue modal
const [createIssueModal, setCreateIssueModal] = useState(false);
const [preloadedData, setPreloadedData] = useState<
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
>(undefined);
// update issue modal
const [editIssueModal, setEditIssueModal] = useState(false);
const [issueToEdit, setIssueToEdit] = useState<
(IIssue & { actionType: "edit" | "delete" }) | undefined
>(undefined);
// delete issue modal
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
const router = useRouter();
const { workspaceSlug } = router.query;
const { user } = useUser();
const { memberRole } = useProjectMyMembership();
const params: any = {
created_by: user?.id ?? undefined,
sub_issue: false,
};
const { data: viewIssues, mutate: mutateIssues } = useSWR(
workspaceSlug ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
workspaceSlug ? () => workspaceService.getViewIssues(workspaceSlug.toString(), params) : null
);
const makeIssueCopy = useCallback(
(issue: IIssue) => {
setCreateIssueModal(true);
setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
},
[setCreateIssueModal, setPreloadedData]
);
const handleEditIssue = useCallback(
(issue: IIssue) => {
setEditIssueModal(true);
setIssueToEdit({
...issue,
actionType: "edit",
cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
module: issue.issue_module ? issue.issue_module.module : null,
});
},
[setEditIssueModal, setIssueToEdit]
);
const handleDeleteIssue = useCallback(
(issue: IIssue) => {
setDeleteIssueModal(true);
setIssueToDelete(issue);
},
[setDeleteIssueModal, setIssueToDelete]
);
const handleIssueAction = useCallback(
(issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
if (action === "copy") makeIssueCopy(issue);
else if (action === "edit") handleEditIssue(issue);
else if (action === "delete") handleDeleteIssue(issue);
},
[makeIssueCopy, handleEditIssue, handleDeleteIssue]
);
return (
<>
<CreateUpdateIssueModal
isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
handleClose={() => setCreateIssueModal(false)}
prePopulateData={{
...preloadedData,
}}
onSubmit={async () => {
mutateIssues();
}}
/>
<CreateUpdateIssueModal
isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
handleClose={() => setEditIssueModal(false)}
data={issueToEdit}
onSubmit={async () => {
mutateIssues();
}}
/>
<DeleteIssueModal
handleClose={() => setDeleteIssueModal(false)}
isOpen={deleteIssueModal}
data={issueToDelete}
user={user}
onSubmit={async () => {
mutateIssues();
}}
/>
<CreateUpdateWorkspaceViewModal
isOpen={createViewModal !== null}
handleClose={() => setCreateViewModal(null)}
preLoadedData={createViewModal}
/>
<div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
<div className="h-full w-full border-b border-custom-border-300">
<WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
<div className="h-full w-full flex flex-col">
<SpreadsheetView
spreadsheetIssues={viewIssues}
mutateIssues={mutateIssues}
handleIssueAction={handleIssueAction}
disableUserActions={false}
user={user}
userAuth={memberRole}
/>
</div>
</div>
</div>
</>
);
};

116
web/components/issues/workspace-views/workspace-issue-view-option.tsx
View File

@ -1,116 +0,0 @@
import React from "react";
import { useRouter } from "next/router";
// hooks
import { useWorkspaceView } from "hooks/use-workspace-view";
// components
import { GlobalSelectFilters } from "components/workspace/views/global-select-filters";
// ui
import { Tooltip } from "components/ui";
// icons
import { FormatListBulletedOutlined } from "@mui/icons-material";
import { CreditCard } from "lucide-react";
// helpers
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
import { checkIfArraysHaveSameElements } from "helpers/array.helper";
// types
import { TIssueViewOptions } from "types";
const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
{
type: "list",
Icon: FormatListBulletedOutlined,
},
{
type: "spreadsheet",
Icon: CreditCard,
},
];
export const WorkspaceIssuesViewOptions: React.FC = () => {
const router = useRouter();
const { workspaceSlug, globalViewId } = router.query;
const { filters, handleFilters } = useWorkspaceView();
const isWorkspaceViewPath = router.pathname.includes("workspace-views/all-issues");
const showFilters = isWorkspaceViewPath || globalViewId;
return (
<div className="flex items-center gap-2">
<div className="flex items-center gap-x- px-1 py-0.5 rounded bg-custom-sidebar-background-90 ">
{issueViewOptions.map((option) => (
<Tooltip
key={option.type}
tooltipContent={
<span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} View</span>
}
position="bottom"
>
<button
type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-100 duration-300 ${
filters.display_filters?.layout === option.type
? "bg-custom-sidebar-background-100 shadow-sm"
: "text-custom-sidebar-text-200"
}`}
onClick={() => {
handleFilters("display_filters", { layout: option.type }, true);
if (option.type === "spreadsheet")
router.push(`/${workspaceSlug}/workspace-views/all-issues`);
else router.push(`/${workspaceSlug}/workspace-views`);
}}
>
<option.Icon
sx={{
fontSize: 16,
}}
className={option.type === "spreadsheet" ? "h-4 w-4" : ""}
/>
</button>
</Tooltip>
))}
</div>
{showFilters && (
<>
<GlobalSelectFilters
filters={filters.filters}
onSelect={(option) => {
const key = option.key as keyof typeof filters.filters;
if (key === "start_date" || key === "target_date") {
const valueExists = checkIfArraysHaveSameElements(
filters.filters?.[key] ?? [],
option.value
);
handleFilters("filters", {
...filters,
[key]: valueExists ? null : option.value,
});
} else {
if (!filters?.filters?.[key]?.includes(option.value))
handleFilters("filters", {
...filters,
[key]: [...((filters?.filters?.[key] as any[]) ?? []), option.value],
});
else {
handleFilters("filters", {
...filters,
[key]: (filters?.filters?.[key] as any[])?.filter(
(item) => item !== option.value
),
});
}
}
}}
direction="left"
/>
</>
)}
</div>
);
};

148
web/components/issues/workspace-views/workspace-subscribed-issue.tsx
View File

@ -1,148 +0,0 @@
import React, { useCallback, useState } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// hook
import useUser from "hooks/use-user";
// context
import { useProjectMyMembership } from "contexts/project-member.context";
// services
import workspaceService from "services/workspace.service";
// components
import { SpreadsheetView } from "components/core";
import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
// fetch-keys
import { WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
// types
import { IIssue } from "types";
export const WorkspaceSubscribedIssues = () => {
const [createViewModal, setCreateViewModal] = useState<any>(null);
// create issue modal
const [createIssueModal, setCreateIssueModal] = useState(false);
const [preloadedData, setPreloadedData] = useState<
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
>(undefined);
// update issue modal
const [editIssueModal, setEditIssueModal] = useState(false);
const [issueToEdit, setIssueToEdit] = useState<
(IIssue & { actionType: "edit" | "delete" }) | undefined
>(undefined);
// delete issue modal
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
const router = useRouter();
const { workspaceSlug } = router.query;
const { user } = useUser();
const { memberRole } = useProjectMyMembership();
const params: any = {
subscriber: user?.id ?? undefined,
sub_issue: false,
};
const { data: viewIssues, mutate: mutateIssues } = useSWR(
workspaceSlug ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
workspaceSlug ? () => workspaceService.getViewIssues(workspaceSlug.toString(), params) : null
);
const makeIssueCopy = useCallback(
(issue: IIssue) => {
setCreateIssueModal(true);
setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
},
[setCreateIssueModal, setPreloadedData]
);
const handleEditIssue = useCallback(
(issue: IIssue) => {
setEditIssueModal(true);
setIssueToEdit({
...issue,
actionType: "edit",
cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
module: issue.issue_module ? issue.issue_module.module : null,
});
},
[setEditIssueModal, setIssueToEdit]
);
const handleDeleteIssue = useCallback(
(issue: IIssue) => {
setDeleteIssueModal(true);
setIssueToDelete(issue);
},
[setDeleteIssueModal, setIssueToDelete]
);
const handleIssueAction = useCallback(
(issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
if (action === "copy") makeIssueCopy(issue);
else if (action === "edit") handleEditIssue(issue);
else if (action === "delete") handleDeleteIssue(issue);
},
[makeIssueCopy, handleEditIssue, handleDeleteIssue]
);
return (
<>
<CreateUpdateIssueModal
isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
handleClose={() => setCreateIssueModal(false)}
prePopulateData={{
...preloadedData,
}}
onSubmit={async () => {
mutateIssues();
}}
/>
<CreateUpdateIssueModal
isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
handleClose={() => setEditIssueModal(false)}
data={issueToEdit}
onSubmit={async () => {
mutateIssues();
}}
/>
<DeleteIssueModal
handleClose={() => setDeleteIssueModal(false)}
isOpen={deleteIssueModal}
data={issueToDelete}
user={user}
onSubmit={async () => {
mutateIssues();
}}
/>
<CreateUpdateWorkspaceViewModal
isOpen={createViewModal !== null}
handleClose={() => setCreateViewModal(null)}
preLoadedData={createViewModal}
/>
<div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
<div className="h-full w-full border-b border-custom-border-300">
<WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
<div className="h-full w-full flex flex-col">
<SpreadsheetView
spreadsheetIssues={viewIssues}
mutateIssues={mutateIssues}
handleIssueAction={handleIssueAction}
disableUserActions={false}
user={user}
userAuth={memberRole}
/>
</div>
</div>
</div>
</>
);
};

1
web/components/workspace/index.ts
View File

@ -1,3 +1,4 @@
export * from "./views";
export * from "./activity-graph";
export * from "./completed-issues-graph";
export * from "./create-workspace-form";

36
web/components/workspace/views/default-view-list-item.tsx Normal file
View File

@ -0,0 +1,36 @@
import { useRouter } from "next/router";
import Link from "next/link";
import { observer } from "mobx-react-lite";
// icons
import { Sparkles } from "lucide-react";
// helpers
import { truncateText } from "helpers/string.helper";
type Props = { view: { key: string; label: string } };
export const GlobalDefaultViewListItem: React.FC<Props> = observer((props) => {
const { view } = props;
const router = useRouter();
const { workspaceSlug } = router.query;
return (
<div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
<Link href={`/${workspaceSlug}/workspace-views/${view.key}`}>
<a className="flex items-center justify-between relative rounded px-5 py-4 w-full">
<div className="flex items-center justify-between w-full">
<div className="flex items-center gap-4">
<div className="grid place-items-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
<Sparkles size={14} strokeWidth={2} />
</div>
<div className="flex flex-col">
<p className="truncate text-sm leading-4 font-medium">{truncateText(view.label, 75)}</p>
</div>
</div>
</div>
</a>
</Link>
</div>
);
});

78
web/components/workspace/views/delete-workspace-view-modal.tsx → web/components/workspace/views/delete-view-modal.tsx
View File

@ -1,13 +1,10 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import { mutate } from "swr";
// headless ui
import { Dialog, Transition } from "@headlessui/react";
// services
import workspaceService from "services/workspace.service";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
import useToast from "hooks/use-toast";
// ui
@ -16,58 +13,50 @@ import { DangerButton, SecondaryButton } from "components/ui";
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
// types
import { IWorkspaceView } from "types/workspace-views";
// fetch-keys
import { WORKSPACE_VIEWS_LIST } from "constants/fetch-keys";
type Props = {
data: IWorkspaceView;
isOpen: boolean;
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
data: IWorkspaceView | null;
onClose: () => void;
};
export const DeleteWorkspaceViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen }) => {
export const DeleteGlobalViewModal: React.FC<Props> = observer((props) => {
const { data, isOpen, onClose } = props;
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const router = useRouter();
const { workspaceSlug } = router.query;
const { globalViews: globalViewsStore } = useMobxStore();
const { setToastAlert } = useToast();
const handleClose = () => {
setIsOpen(false);
setIsDeleteLoading(false);
onClose();
};
const handleDeletion = async () => {
if (!workspaceSlug) return;
setIsDeleteLoading(true);
if (!workspaceSlug || !data) return;
await workspaceService
.deleteView(workspaceSlug as string, data.id)
.then(() => {
mutate<IWorkspaceView[]>(WORKSPACE_VIEWS_LIST(workspaceSlug as string), (views) =>
views?.filter((view) => view.id !== data.id)
);
handleClose();
setToastAlert({
type: "success",
title: "Success!",
message: "View deleted successfully.",
});
})
.catch(() => {
await globalViewsStore
.deleteGlobalView(workspaceSlug.toString(), data.id)
.catch(() =>
setToastAlert({
type: "error",
title: "Error!",
message: "View could not be deleted. Please try again.",
});
})
message: "Something went wrong while deleting the view. Please try again.",
})
)
.finally(() => {
setIsDeleteLoading(false);
handleClose();
});
// remove filters from local storage
localStorage.removeItem(`global_view_filters/${data.id}`);
};
return (
@ -100,26 +89,17 @@ export const DeleteWorkspaceViewModal: React.FC<Props> = ({ isOpen, data, setIsO
<div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
<ExclamationTriangleIcon
className="h-6 w-6 text-red-600"
aria-hidden="true"
/>
<ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-custom-text-100"
>
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
Delete View
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-custom-text-200">
Are you sure you want to delete view-{" "}
<span className="break-words font-medium text-custom-text-100">
{data?.name}
</span>
? All of the data related to the view will be permanently removed. This
action cannot be undone.
<span className="break-words font-medium text-custom-text-100">{data?.name}</span>? All of the
data related to the view will be permanently removed. This action cannot be undone.
</p>
</div>
</div>
@ -138,4 +118,4 @@ export const DeleteWorkspaceViewModal: React.FC<Props> = ({ isOpen, data, setIsO
</Dialog>
</Transition.Root>
);
};
});

185
web/components/workspace/views/form.tsx
View File

@ -1,38 +1,26 @@
import { useEffect } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { Controller, useForm } from "react-hook-form";
import useSWR from "swr";
// react-hook-form
import { useForm } from "react-hook-form";
// services
import issuesService from "services/issues.service";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
import useProjects from "hooks/use-projects";
import useWorkspaceMembers from "hooks/use-workspace-members";
// components
import { WorkspaceFiltersList } from "components/core";
import { GlobalSelectFilters } from "components/workspace/views/global-select-filters";
import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "components/issues";
// ui
import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
// helpers
import { checkIfArraysHaveSameElements } from "helpers/array.helper";
// types
import { IQuery } from "types";
import { IWorkspaceView } from "types/workspace-views";
// fetch-keys
import { WORKSPACE_LABELS } from "constants/fetch-keys";
import { STATE_GROUP } from "constants/project";
import { IWorkspaceView } from "types";
// constants
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
type Props = {
handleFormSubmit: (values: IWorkspaceView) => Promise<void>;
handleFormSubmit: (values: Partial<IWorkspaceView>) => Promise<void>;
handleClose: () => void;
status: boolean;
data?: IWorkspaceView | null;
preLoadedData?: Partial<IWorkspaceView> | null;
data?: IWorkspaceView;
preLoadedData?: Partial<IWorkspaceView>;
};
const defaultValues: Partial<IWorkspaceView> = {
@ -40,41 +28,31 @@ const defaultValues: Partial<IWorkspaceView> = {
description: "",
};
export const WorkspaceViewForm: React.FC<Props> = ({
handleFormSubmit,
handleClose,
status,
data,
preLoadedData,
}) => {
export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
const { handleFormSubmit, handleClose, data, preLoadedData } = props;
const router = useRouter();
const { workspaceSlug } = router.query;
const { workspace: workspaceStore, project: projectStore } = useMobxStore();
const {
register,
control,
formState: { errors, isSubmitting },
handleSubmit,
register,
reset,
watch,
setValue,
} = useForm<any>({
watch,
} = useForm({
defaultValues,
});
const filters = watch("query");
const { data: labelOptions } = useSWR(
workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
workspaceSlug ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString()) : null
);
const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
const memberOptions = workspaceMembers?.map((m) => m.member);
const { projects: allProjects } = useProjects();
const joinedProjects = allProjects?.filter((p) => p.is_member);
const handleCreateUpdateView = async (formData: IWorkspaceView) => {
const handleCreateUpdateView = async (formData: Partial<IWorkspaceView>) => {
await handleFormSubmit(formData);
reset({
@ -82,20 +60,6 @@ export const WorkspaceViewForm: React.FC<Props> = ({
});
};
const clearAllFilters = () => {
setValue("query", {
assignees: null,
created_by: null,
subscriber: null,
labels: null,
priority: null,
state_group: null,
start_date: null,
target_date: null,
project: null,
});
};
useEffect(() => {
reset({
...defaultValues,
@ -104,18 +68,24 @@ export const WorkspaceViewForm: React.FC<Props> = ({
});
}, [data, preLoadedData, reset]);
const selectedFilters = watch("query_data")?.filters;
const clearAllFilters = () => {
if (!selectedFilters) return;
setValue("query_data.filters", {});
};
useEffect(() => {
if (status && data) {
setValue("query", data.query_data);
}
}, [data, status, setValue]);
if (!data) return;
reset({ ...data });
}, [data, reset]);
return (
<form onSubmit={handleSubmit(handleCreateUpdateView)}>
<div className="space-y-5">
<h3 className="text-lg font-medium leading-6 text-custom-text-100">
{status ? "Update" : "Create"} View
</h3>
<h3 className="text-lg font-medium leading-6 text-custom-text-100">{data ? "Update" : "Create"} View</h3>
<div className="space-y-3">
<div>
<Input
@ -147,59 +117,56 @@ export const WorkspaceViewForm: React.FC<Props> = ({
/>
</div>
<div>
<GlobalSelectFilters
filters={filters}
onSelect={(option) => {
const key = option.key as keyof typeof filters;
<Controller
control={control}
name="query_data.filters"
render={({ field: { onChange, value: filters } }) => (
<FiltersDropdown title="Filters">
<FilterSelection
filters={filters ?? {}}
handleFiltersUpdate={(key, value) => {
const newValues = filters?.[key] ?? [];
if (key === "start_date" || key === "target_date") {
const valueExists = checkIfArraysHaveSameElements(
filters?.[key] ?? [],
option.value
);
if (Array.isArray(value)) {
value.forEach((val) => {
if (!newValues.includes(val)) newValues.push(val);
});
} else {
if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
else newValues.push(value);
}
setValue("query", {
...filters,
[key]: valueExists ? null : option.value,
} as IQuery);
} else {
if (!filters?.[key]?.includes(option.value))
setValue("query", {
...filters,
[key]: [...((filters?.[key] as any[]) ?? []), option.value],
});
else {
setValue("query", {
...filters,
[key]: (filters?.[key] as any[])?.filter((item) => item !== option.value),
});
}
}
}}
/>
</div>
<div>
<WorkspaceFiltersList
filters={filters}
labels={labelOptions}
members={memberOptions}
project={joinedProjects}
stateGroup={STATE_GROUP}
clearAllFilters={clearAllFilters}
setFilters={(query: any) => {
setValue("query", {
...filters,
...query,
});
}}
onChange({
...filters,
[key]: newValues,
});
}}
layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
labels={workspaceStore.workspaceLabels ?? undefined}
projects={workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined}
/>
</FiltersDropdown>
)}
/>
</div>
{selectedFilters && Object.keys(selectedFilters).length > 0 && (
<div>
<AppliedFiltersList
appliedFilters={selectedFilters}
handleClearAllFilters={clearAllFilters}
handleRemoveFilter={() => {}}
labels={workspaceStore.workspaceLabels ?? undefined}
members={memberOptions}
states={undefined}
/>
</div>
)}
</div>
</div>
<div className="mt-5 flex justify-end gap-2">
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<PrimaryButton type="submit" loading={isSubmitting}>
{status
{data
? isSubmitting
? "Updating View..."
: "Update View"
@ -210,4 +177,4 @@ export const WorkspaceViewForm: React.FC<Props> = ({
</div>
</form>
);
};
});

301
web/components/workspace/views/global-select-filters.tsx
View File

@ -1,301 +0,0 @@
import { useState } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// hook
import useProjects from "hooks/use-projects";
import useWorkspaceMembers from "hooks/use-workspace-members";
// services
import issuesService from "services/issues.service";
// components
import { DateFilterModal } from "components/core";
// ui
import { Avatar, MultiLevelDropdown } from "components/ui";
// icons
import { PriorityIcon, StateGroupIcon } from "components/icons";
// helpers
import { checkIfArraysHaveSameElements } from "helpers/array.helper";
// types
import { IWorkspaceIssueFilterOptions, TStateGroups } from "types";
// fetch-keys
import { WORKSPACE_LABELS } from "constants/fetch-keys";
// constants
import { GROUP_CHOICES, PRIORITIES } from "constants/project";
import { DATE_FILTER_OPTIONS } from "constants/filters";
type Props = {
filters: Partial<IWorkspaceIssueFilterOptions>;
onSelect: (option: any) => void;
direction?: "left" | "right";
height?: "sm" | "md" | "rg" | "lg";
};
export const GlobalSelectFilters: React.FC<Props> = ({
filters,
onSelect,
direction = "right",
height = "md",
}) => {
const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
const [dateFilterType, setDateFilterType] = useState<{
title: string;
type: "start_date" | "target_date";
}>({
title: "",
type: "start_date",
});
const router = useRouter();
const { workspaceSlug } = router.query;
const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
const { data: workspaceLabels } = useSWR(
workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
workspaceSlug ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString()) : null
);
const { projects: allProjects } = useProjects();
const joinedProjects = allProjects?.filter((p) => p.is_member);
const workspaceFilterOption = [
{
id: "project",
label: "Project",
value: joinedProjects,
hasChildren: true,
children: joinedProjects?.map((project) => ({
id: project.id,
label: <div className="flex items-center gap-2">{project.name}</div>,
value: {
key: "project",
value: project.id,
},
selected: filters?.project?.includes(project.id),
})),
},
{
id: "state_group",
label: "State groups",
value: GROUP_CHOICES,
hasChildren: true,
children: [
...Object.keys(GROUP_CHOICES).map((key) => ({
id: key,
label: (
<div className="flex items-center gap-2">
<StateGroupIcon stateGroup={key as TStateGroups} />
{GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]}
</div>
),
value: {
key: "state_group",
value: key,
},
selected: filters?.state_group?.includes(key),
})),
],
},
{
id: "labels",
label: "Labels",
value: workspaceLabels,
hasChildren: true,
children: workspaceLabels?.map((label) => ({
id: label.id,
label: (
<div className="flex items-center gap-2">
<div
className="h-2 w-2 rounded-full"
style={{
backgroundColor: label.color && label.color !== "" ? label.color : "#000000",
}}
/>
{label.name}
</div>
),
value: {
key: "labels",
value: label.id,
},
selected: filters?.labels?.includes(label.id),
})),
},
{
id: "priority",
label: "Priority",
value: PRIORITIES,
hasChildren: true,
children: PRIORITIES.map((priority) => ({
id: priority === null ? "null" : priority,
label: (
<div className="flex items-center gap-2 capitalize">
<PriorityIcon priority={priority} />
{priority ?? "None"}
</div>
),
value: {
key: "priority",
value: priority === null ? "null" : priority,
},
selected: filters?.priority?.includes(priority === null ? "null" : priority),
})),
},
{
id: "created_by",
label: "Created by",
value: workspaceMembers,
hasChildren: true,
children: workspaceMembers?.map((member) => ({
id: member.member.id,
label: (
<div className="flex items-center gap-2">
<Avatar user={member.member} />
{member.member.display_name}
</div>
),
value: {
key: "created_by",
value: member.member.id,
},
selected: filters?.created_by?.includes(member.member.id),
})),
},
{
id: "assignees",
label: "Assignees",
value: workspaceMembers,
hasChildren: true,
children: workspaceMembers?.map((member) => ({
id: member.member.id,
label: (
<div className="flex items-center gap-2">
<Avatar user={member.member} />
{member.member.display_name}
</div>
),
value: {
key: "assignees",
value: member.member.id,
},
selected: filters?.assignees?.includes(member.member.id),
})),
},
{
id: "subscriber",
label: "Subscriber",
value: workspaceMembers,
hasChildren: true,
children: workspaceMembers?.map((member) => ({
id: member.member.id,
label: (
<div className="flex items-center gap-2">
<Avatar user={member.member} />
{member.member.display_name}
</div>
),
value: {
key: "subscriber",
value: member.member.id,
},
selected: filters?.subscriber?.includes(member.member.id),
})),
},
{
id: "start_date",
label: "Start date",
value: DATE_FILTER_OPTIONS,
hasChildren: true,
children: [
...DATE_FILTER_OPTIONS.map((option) => ({
id: option.name,
label: option.name,
value: {
key: "start_date",
value: option.value,
},
selected: checkIfArraysHaveSameElements(filters?.start_date ?? [], option.value),
})),
{
id: "custom",
label: "Custom",
value: "custom",
element: (
<button
onClick={() => {
setIsDateFilterModalOpen(true);
setDateFilterType({
title: "Start date",
type: "start_date",
});
}}
className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
>
Custom
</button>
),
},
],
},
{
id: "target_date",
label: "Due date",
value: DATE_FILTER_OPTIONS,
hasChildren: true,
children: [
...DATE_FILTER_OPTIONS.map((option) => ({
id: option.name,
label: option.name,
value: {
key: "target_date",
value: option.value,
},
selected: checkIfArraysHaveSameElements(filters?.target_date ?? [], option.value),
})),
{
id: "custom",
label: "Custom",
value: "custom",
element: (
<button
onClick={() => {
setIsDateFilterModalOpen(true);
setDateFilterType({
title: "Due date",
type: "target_date",
});
}}
className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
>
Custom
</button>
),
},
],
},
];
return (
<>
{isDateFilterModalOpen && (
<DateFilterModal
title={dateFilterType.title}
field={dateFilterType.type}
filters={filters as IWorkspaceIssueFilterOptions}
handleClose={() => setIsDateFilterModalOpen(false)}
isOpen={isDateFilterModalOpen}
onSelect={onSelect}
/>
)}
<MultiLevelDropdown
label="Filters"
onSelect={onSelect}
direction={direction}
height={height}
options={workspaceFilterOption}
/>
</>
);
};

67
web/components/workspace/views/header.tsx Normal file
View File

@ -0,0 +1,67 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { CreateUpdateWorkspaceViewModal } from "components/workspace";
// icon
import { PlusIcon } from "lucide-react";
// constants
import { DEFAULT_GLOBAL_VIEWS_LIST } from "constants/workspace";
export const GlobalViewsHeader: React.FC = observer(() => {
const [createViewModal, setCreateViewModal] = useState(false);
const router = useRouter();
const { workspaceSlug, globalViewId } = router.query;
const { globalViews: globalViewsStore } = useMobxStore();
const isTabSelected = (tabKey: string) => router.pathname.includes(tabKey);
return (
<>
<CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
<div className="group flex items-center px-4 overflow-x-scroll relative border-b border-custom-border-200">
{DEFAULT_GLOBAL_VIEWS_LIST.map((tab) => (
<Link key={tab.key} href={`/${workspaceSlug}/workspace-views/${tab.key}`}>
<a
className={`border-b-2 min-w-min p-3 text-sm font-medium outline-none whitespace-nowrap flex-shrink-0 ${
isTabSelected(tab.key)
? "border-custom-primary-100 text-custom-primary-100"
: "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
}`}
>
{tab.label}
</a>
</Link>
))}
{globalViewsStore.globalViewsList?.map((view) => (
<Link key={view.id} href={`/${workspaceSlug}/workspace-views/${view.id}`}>
<a
className={`border-b-2 p-3 text-sm font-medium outline-none whitespace-nowrap flex-shrink-0 ${
view.id === globalViewId
? "border-custom-primary-100 text-custom-primary-100"
: "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
}`}
>
{view.name}
</a>
</Link>
))}
<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={() => setCreateViewModal(true)}
>
<PlusIcon className="h-4 w-4 text-custom-primary-200" />
</button>
</div>
</>
);
});

7
web/components/workspace/views/index.ts Normal file
View File

@ -0,0 +1,7 @@
export * from "./default-view-list-item";
export * from "./delete-view-modal";
export * from "./form";
export * from "./header";
export * from "./modal";
export * from "./view-list-item";
export * from "./views-list";

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

@ -1,116 +1,103 @@
import React from "react";
import { useRouter } from "next/router";
import { mutate } from "swr";
// headless ui
import { observer } from "mobx-react-lite";
import { Dialog, Transition } from "@headlessui/react";
// services
import workspaceService from "services/workspace.service";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
import useToast from "hooks/use-toast";
// components
import { WorkspaceViewForm } from "components/workspace/views/form";
import { WorkspaceViewForm } from "components/workspace";
// types
import { IWorkspaceView } from "types/workspace-views";
// fetch-keys
import { WORKSPACE_VIEWS_LIST } from "constants/fetch-keys";
type Props = {
data?: IWorkspaceView;
isOpen: boolean;
handleClose: () => void;
data?: IWorkspaceView | null;
preLoadedData?: Partial<IWorkspaceView> | null;
onClose: () => void;
preLoadedData?: Partial<IWorkspaceView>;
};
export const CreateUpdateWorkspaceViewModal: React.FC<Props> = ({
isOpen,
handleClose,
data,
preLoadedData,
}) => {
export const CreateUpdateWorkspaceViewModal: React.FC<Props> = observer((props) => {
const { isOpen, onClose, data, preLoadedData } = props;
const router = useRouter();
const { workspaceSlug } = router.query;
const { globalViews: globalViewsStore } = useMobxStore();
const { setToastAlert } = useToast();
const onClose = () => {
handleClose();
const handleClose = () => {
onClose();
};
const createView = async (payload: any) => {
const payloadData = {
const createView = async (payload: Partial<IWorkspaceView>) => {
if (!workspaceSlug) return;
const payloadData: Partial<IWorkspaceView> = {
...payload,
query_data: {
filters: payload.query,
query: {
...payload.query_data?.filters,
},
};
await workspaceService
.createView(workspaceSlug as string, payloadData)
await globalViewsStore
.createGlobalView(workspaceSlug.toString(), payloadData)
.then((res) => {
mutate(WORKSPACE_VIEWS_LIST(workspaceSlug as string));
handleClose();
router.replace(`/${workspaceSlug}/workspace-views/issues?globalViewId=${res.id}`);
setToastAlert({
type: "success",
title: "Success!",
message: "View created successfully.",
});
router.push(`/${workspaceSlug}/workspace-views/${res.id}`);
})
.catch(() => {
.catch(() =>
setToastAlert({
type: "error",
title: "Error!",
message: "View could not be created. Please try again.",
});
});
})
);
};
const updateView = async (payload: any) => {
const payloadData = {
const updateView = async (payload: Partial<IWorkspaceView>) => {
if (!workspaceSlug || !data) return;
const payloadData: Partial<IWorkspaceView> = {
...payload,
query_data: {
filters: payload.query,
query: {
...payload.query_data?.filters,
},
};
await workspaceService
.updateView(workspaceSlug as string, data?.id ?? "", payloadData)
.then((res) => {
mutate<IWorkspaceView[]>(
WORKSPACE_VIEWS_LIST(workspaceSlug as string),
(prevData) =>
prevData?.map((p) => {
if (p.id === res.id) return { ...p, ...payloadData };
return p;
}),
false
);
onClose();
await globalViewsStore
.updateGlobalView(workspaceSlug.toString(), data.id, payloadData)
.then(() =>
setToastAlert({
type: "success",
title: "Success!",
message: "View updated successfully.",
});
})
.catch(() => {
})
)
.catch(() =>
setToastAlert({
type: "error",
title: "Error!",
message: "View could not be updated. Please try again.",
});
});
})
);
};
const handleFormSubmit = async (formData: any) => {
const handleFormSubmit = async (formData: Partial<IWorkspaceView>) => {
if (!workspaceSlug) return;
if (!data) await createView(formData);
else await updateView(formData);
handleClose();
};
return (
@ -143,7 +130,6 @@ export const CreateUpdateWorkspaceViewModal: React.FC<Props> = ({
<WorkspaceViewForm
handleFormSubmit={handleFormSubmit}
handleClose={handleClose}
status={data ? true : false}
data={data}
preLoadedData={preLoadedData}
/>
@ -154,4 +140,4 @@ export const CreateUpdateWorkspaceViewModal: React.FC<Props> = ({
</Dialog>
</Transition.Root>
);
};
});

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

@ -1,110 +0,0 @@
import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";
// icons
import { TrashIcon, PencilIcon } from "@heroicons/react/24/outline";
import { PhotoFilterOutlined } from "@mui/icons-material";
//components
import { CustomMenu } from "components/ui";
import { IWorkspaceView } from "types/workspace-views";
// helpers
import { truncateText } from "helpers/string.helper";
type Props = {
view: IWorkspaceView;
handleEditView: () => void;
handleDeleteView: () => void;
};
export const SingleWorkspaceViewItem: React.FC<Props> = ({
view,
handleEditView,
handleDeleteView,
}) => {
const router = useRouter();
const { workspaceSlug } = router.query;
const viewRedirectionUrl = `/${workspaceSlug}/workspace-views/issues?globalViewId=${view.id}`;
return (
<div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
<Link href={viewRedirectionUrl}>
<a className="flex items-center justify-between relative rounded px-5 py-4 w-full">
<div className="flex items-center justify-between w-full">
<div className="flex items-center gap-4">
<div
className={`flex items-center justify-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100`}
>
<PhotoFilterOutlined className="!text-base !leading-6" />
</div>
<div className="flex flex-col">
<p className="truncate text-sm leading-4 font-medium">
{truncateText(view.name, 75)}
</p>
{view?.description && (
<p className="text-xs text-custom-text-200">{view.description}</p>
)}
</div>
</div>
<div className="ml-2 flex flex-shrink-0">
<div className="flex items-center gap-4">
<p className="rounded bg-custom-background-80 py-1 px-2 text-xs text-custom-text-200 opacity-0 group-hover:opacity-100">
{view.query_data.filters && Object.keys(view.query_data.filters).length > 0
? `${Object.keys(view.query_data.filters)
.map((key: string) =>
view.query_data.filters[key as keyof typeof view.query_data.filters] !==
null
? isNaN(
(
view.query_data.filters[
key as keyof typeof view.query_data.filters
] as any
).length
)
? 0
: (
view.query_data.filters[
key as keyof typeof view.query_data.filters
] as any
).length
: 0
)
.reduce((curr, prev) => curr + prev, 0)} filters`
: "0 filters"}
</p>
<CustomMenu width="auto" ellipsis>
<CustomMenu.MenuItem
onClick={(e: any) => {
e.preventDefault();
e.stopPropagation();
handleEditView();
}}
>
<span className="flex items-center justify-start gap-2">
<PencilIcon className="h-3.5 w-3.5" />
<span>Edit View</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={(e: any) => {
e.preventDefault();
e.stopPropagation();
handleDeleteView();
}}
>
<span className="flex items-center justify-start gap-2">
<TrashIcon className="h-3.5 w-3.5" />
<span>Delete View</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>
</div>
</div>
</div>
</a>
</Link>
</div>
);
};

97
web/components/workspace/views/view-list-item.tsx Normal file
View File

@ -0,0 +1,97 @@
import { useRouter } from "next/router";
import Link from "next/link";
import { observer } from "mobx-react-lite";
import { useState } from "react";
// components
import { CreateUpdateWorkspaceViewModal, DeleteGlobalViewModal } from "components/workspace";
// ui
import { CustomMenu } from "components/ui";
// icons
import { PencilIcon, Sparkles, TrashIcon } from "lucide-react";
// helpers
import { truncateText } from "helpers/string.helper";
// types
import { IWorkspaceView } from "types/workspace-views";
type Props = { view: IWorkspaceView };
export const GlobalViewListItem: React.FC<Props> = observer((props) => {
const { view } = props;
const [updateViewModal, setUpdateViewModal] = useState(false);
const [deleteViewModal, setDeleteViewModal] = useState(false);
const router = useRouter();
const { workspaceSlug } = router.query;
const totalFilters =
view?.query_data?.filters && Object.keys(view.query_data.filters).length > 0
? Object.keys(view.query_data.filters)
.map((key) =>
view.query_data.filters[key as keyof typeof view.query_data.filters] !== null
? isNaN((view.query_data.filters[key as keyof typeof view.query_data.filters] as any).length)
? 0
: (view.query_data.filters[key as keyof typeof view.query_data.filters] as any).length
: 0
)
.reduce((curr, prev) => curr + prev, 0)
: 0;
return (
<>
<CreateUpdateWorkspaceViewModal data={view} isOpen={updateViewModal} onClose={() => setUpdateViewModal(false)} />
<DeleteGlobalViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
<div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
<Link href={`/${workspaceSlug}/workspace-views/${view.id}`}>
<a className="flex items-center justify-between relative rounded px-5 py-4 w-full">
<div className="flex items-center justify-between w-full">
<div className="flex items-center gap-4">
<div className="grid place-items-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
<Sparkles size={14} strokeWidth={2} />
</div>
<div className="flex flex-col">
<p className="truncate text-sm leading-4 font-medium">{truncateText(view.name, 75)}</p>
{view?.description && <p className="text-xs text-custom-text-200">{view.description}</p>}
</div>
</div>
<div className="ml-2 flex flex-shrink-0">
<div className="flex items-center gap-4">
<p className="rounded bg-custom-background-80 py-1 px-2 text-xs text-custom-text-200 hidden group-hover:block">
{totalFilters} {totalFilters === 1 ? "filter" : "filters"}
</p>
<CustomMenu width="auto" ellipsis>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setUpdateViewModal(true);
}}
>
<span className="flex items-center justify-start gap-2">
<PencilIcon size={14} strokeWidth={2} />
<span>Edit View</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setDeleteViewModal(true);
}}
>
<span className="flex items-center justify-start gap-2">
<TrashIcon size={14} strokeWidth={2} />
<span>Delete View</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>
</div>
</div>
</div>
</a>
</Link>
</div>
</>
);
});

41
web/components/workspace/views/views-list.tsx Normal file
View File

@ -0,0 +1,41 @@
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { GlobalViewListItem } from "components/workspace";
// ui
import { Loader } from "components/ui";
type Props = {
searchQuery: string;
};
export const GlobalViewsList: React.FC<Props> = observer((props) => {
const { searchQuery } = props;
const { globalViews: globalViewsStore } = useMobxStore();
const viewsList = globalViewsStore.globalViewsList;
if (!viewsList)
return (
<Loader className="space-y-1.5">
<Loader.Item height="72px" />
<Loader.Item height="72px" />
<Loader.Item height="72px" />
<Loader.Item height="72px" />
<Loader.Item height="72px" />
</Loader>
);
const filteredViewsList = viewsList.filter((v) => v.name.toLowerCase().includes(searchQuery.toLowerCase()));
return (
<>
{filteredViewsList.map((view) => (
<GlobalViewListItem key={view.id} view={view} />
))}
</>
);
});

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

@ -1,105 +0,0 @@
import React from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// icon
import { PlusIcon } from "lucide-react";
// constant
import { WORKSPACE_VIEWS_LIST } from "constants/fetch-keys";
// service
import workspaceService from "services/workspace.service";
type Props = {
handleAddView: () => void;
};
export const WorkspaceViewsNavigation: React.FC<Props> = ({ handleAddView }) => {
const router = useRouter();
const { workspaceSlug, globalViewId } = router.query;
const { data: workspaceViews } = useSWR(
workspaceSlug ? WORKSPACE_VIEWS_LIST(workspaceSlug.toString()) : null,
workspaceSlug ? () => workspaceService.getAllViews(workspaceSlug.toString()) : null
);
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" });
}, [globalViewId, workspaceViews]);
const tabsList = [
{
key: "all",
label: "All Issues",
selected: isSelected("workspace-views/all-issues"),
onClick: () => router.replace(`/${workspaceSlug}/workspace-views/all-issues`),
},
{
key: "assigned",
label: "Assigned",
selected: isSelected("workspace-views/assigned"),
onClick: () => router.replace(`/${workspaceSlug}/workspace-views/assigned`),
},
{
key: "created",
label: "Created",
selected: isSelected("workspace-views/created"),
onClick: () => router.replace(`/${workspaceSlug}/workspace-views/created`),
},
{
key: "subscribed",
label: "Subscribed",
selected: isSelected("workspace-views/subscribed"),
onClick: () => router.replace(`/${workspaceSlug}/workspace-views/subscribed`),
},
];
return (
<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-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-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-min p-3 text-sm font-medium outline-none whitespace-nowrap flex-shrink-0 ${
view.id === globalViewId
? "border-custom-primary-100 text-custom-primary-100"
: "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
}`}
id={view.id === globalViewId ? `active-tab-global-view` : ``}
onClick={() =>
router.replace(`/${workspaceSlug}/workspace-views/issues?globalViewId=${view.id}`)
}
>
{view.name}
</button>
))}
<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>
);
};

9
web/constants/fetch-keys.ts
View File

@ -146,12 +146,9 @@ export const PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS = (projectId: string, params?
return `PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS${projectId.toUpperCase()}_${paramsKey}`;
};
export const WORKSPACE_VIEWS_LIST = (workspaceSlug: string) => `WORKSPACE_VIEWS_LIST_${workspaceSlug.toUpperCase()}`;
export const WORKSPACE_VIEW_DETAILS = (globalViewId: string) => `WORKSPACE_VIEW_DETAILS_${globalViewId.toUpperCase()}`;
export const WORKSPACE_VIEW_ISSUES = (globalViewId: string, params: any) => {
if (!params) return `WORKSPACE_VIEW_ISSUES_${globalViewId.toUpperCase()}`;
return `WORKSPACE_VIEW_ISSUES_${globalViewId.toUpperCase()}_${paramsToKey(params).toUpperCase()}`;
};
export const GLOBAL_VIEWS_LIST = (workspaceSlug: string) => `GLOBAL_VIEWS_LIST_${workspaceSlug.toUpperCase()}`;
export const GLOBAL_VIEW_DETAILS = (globalViewId: string) => `GLOBAL_VIEW_DETAILS_${globalViewId.toUpperCase()}`;
export const GLOBAL_VIEW_ISSUES = (globalViewId: string) => `GLOBAL_VIEW_ISSUES_${globalViewId.toUpperCase()}`;
export const PROJECT_ISSUES_DETAILS = (issueId: string) => `PROJECT_ISSUES_DETAILS_${issueId.toUpperCase()}`;
export const PROJECT_ISSUES_PROPERTIES = (projectId: string) => `PROJECT_ISSUES_PROPERTIES_${projectId.toUpperCase()}`;

19
web/constants/issue.ts
View File

@ -220,25 +220,10 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
[pageType: string]: { [layoutType: string]: ILayoutDisplayFiltersOptions };
} = {
my_issues: {
list: {
filters: ["priority", "state_group", "labels", "start_date", "target_date"],
spreadsheet: {
filters: ["priority", "state_group", "labels", "assignees", "created_by", "project", "start_date", "target_date"],
display_properties: true,
display_filters: {
group_by: ["state_detail.group", "project", "priority", "labels", null],
order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
type: [null, "active", "backlog"],
},
extra_options: {
access: true,
values: ["show_empty_groups", "sub_issue"],
},
},
kanban: {
filters: ["priority", "state_group", "labels", "start_date", "target_date"],
display_properties: true,
display_filters: {
group_by: ["state_detail.group", "project", "priority", "labels"],
sub_group_by: ["state_detail.group", "project", "priority", "labels", null],
order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
type: [null, "active", "backlog"],
},

23
web/constants/workspace.ts
View File

@ -4,6 +4,7 @@ import JiraLogo from "public/services/jira.png";
import CSVLogo from "public/services/csv.svg";
import ExcelLogo from "public/services/excel.svg";
import JSONLogo from "public/services/json.svg";
import { TStaticViewTypes } from "types";
export const ROLE = {
5: "Guest",
@ -67,3 +68,25 @@ export const EXPORTERS_LIST = [
logo: JSONLogo,
},
];
export const DEFAULT_GLOBAL_VIEWS_LIST: {
key: TStaticViewTypes;
label: string;
}[] = [
{
key: "all-issues",
label: "All issues",
},
{
key: "assigned",
label: "Assigned",
},
{
key: "created",
label: "Created",
},
{
key: "subscribed",
label: "Subscribed",
},
];

3
web/contexts/workspace-member.context.tsx
View File

@ -46,8 +46,7 @@ export const WorkspaceMemberProvider: React.FC<Props> = (props) => {
export const useWorkspaceMyMembership = () => {
const context = useContext(WorkspaceMemberContext);
if (context === undefined)
throw new Error(`useWorkspaceMember must be used within a WorkspaceMemberProvider.`);
if (context === undefined) throw new Error(`useWorkspaceMember must be used within a WorkspaceMemberProvider.`);
return {
...context,

19
web/helpers/emoji.helper.tsx
View File

@ -30,7 +30,7 @@ export const renderEmoji = (
if (typeof emoji === "object")
return (
<span style={{ color: emoji.color }} className="material-symbols-rounded text-lg">
<span style={{ color: emoji.color }} className="material-symbols-rounded !text-sm">
{emoji.name}
</span>
);
@ -41,16 +41,13 @@ export const groupReactions: (reactions: any[], key: string) => { [key: string]:
reactions: any,
key: string
) => {
const groupedReactions = reactions.reduce(
(acc: any, reaction: any) => {
if (!acc[reaction[key]]) {
acc[reaction[key]] = [];
}
acc[reaction[key]].push(reaction);
return acc;
},
{} as { [key: string]: any[] }
);
const groupedReactions = reactions.reduce((acc: any, reaction: any) => {
if (!acc[reaction[key]]) {
acc[reaction[key]] = [];
}
acc[reaction[key]].push(reaction);
return acc;
}, {} as { [key: string]: any[] });
return groupedReactions;
};

19
web/helpers/filter.helper.ts Normal file
View File

@ -0,0 +1,19 @@
// types
import { IIssueFilterOptions } from "types";
// check if there is any difference between the saved filters and the current filters
export const areFiltersDifferent = (filtersSet1: IIssueFilterOptions, filtersSet2: IIssueFilterOptions) => {
for (const [key, value] of Object.entries(filtersSet1) as [keyof IIssueFilterOptions, string[] | null][]) {
if (value) {
if (Array.isArray(value) && Array.isArray(filtersSet2[key])) {
if (value.length !== filtersSet2[key]?.length) return true;
for (let i = 0; i < value.length; i++) {
if (!filtersSet2[key]?.includes(value[i])) return true;
}
} else if (value !== filtersSet2[key]) return true;
}
}
return false;
};

6
web/lib/mobx/store-init.tsx
View File

@ -12,12 +12,13 @@ const MobxStoreInit = () => {
workspace: workspaceStore,
project: projectStore,
module: moduleStore,
globalViews: globalViewsStore,
} = useMobxStore();
// theme
const { setTheme } = useTheme();
// router
const router = useRouter();
const { workspaceSlug, projectId, moduleId } = router.query;
const { workspaceSlug, projectId, moduleId, globalViewId } = router.query;
useEffect(() => {
// sidebar collapsed toggle
@ -47,7 +48,8 @@ const MobxStoreInit = () => {
if (workspaceSlug) workspaceStore.setWorkspaceSlug(workspaceSlug.toString());
if (projectId) projectStore.setProjectId(projectId.toString());
if (moduleId) moduleStore.setModuleId(moduleId.toString());
}, [workspaceSlug, projectId, moduleId, workspaceStore, projectStore, moduleStore]);
if (globalViewId) globalViewsStore.setGlobalViewId(globalViewId.toString());
}, [workspaceSlug, projectId, moduleId, globalViewId, workspaceStore, projectStore, moduleStore, globalViewsStore]);
return <></>;
};

4
web/package.json
View File

@ -27,6 +27,7 @@
"@nivo/pie": "0.80.0",
"@nivo/scatterplot": "0.80.0",
"@plane/ui": "*",
"@popperjs/core": "^2.11.8",
"@sentry/nextjs": "^7.36.0",
"@tiptap/extension-code-block-lowlight": "^2.0.4",
"@tiptap/extension-color": "^2.0.4",
@ -74,6 +75,7 @@
"react-hook-form": "^7.38.0",
"react-markdown": "^8.0.7",
"react-moveable": "^0.54.1",
"react-popper": "^2.3.0",
"sharp": "^0.32.1",
"sonner": "^0.6.2",
"swr": "^2.1.3",
@ -84,6 +86,7 @@
"uuid": "^9.0.0"
},
"devDependencies": {
"@plane/ui": "*",
"@types/js-cookie": "^3.0.2",
"@types/node": "18.0.6",
"@types/nprogress": "^0.2.0",
@ -100,7 +103,6 @@
"prettier": "^2.8.7",
"tailwind-config-custom": "*",
"tsconfig": "*",
"@plane/ui": "*",
"typescript": "4.7.4"
},
"resolutions": {

57
web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx Normal file
View File

@ -0,0 +1,57 @@
import { useRouter } from "next/router";
import useSWR from "swr";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// layouts
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
// components
import { GlobalViewsHeader } from "components/workspace";
import { GlobalViewsAllLayouts } from "components/issues";
import { GlobalIssuesHeader } from "components/headers";
// icons
import { CheckCircle } from "lucide-react";
// types
import { NextPage } from "next";
// fetch-keys
import { GLOBAL_VIEWS_LIST, GLOBAL_VIEW_DETAILS } from "constants/fetch-keys";
const GlobalViewIssues: NextPage = () => {
const router = useRouter();
const { workspaceSlug, globalViewId } = router.query;
const { globalViews: globalViewsStore } = useMobxStore();
useSWR(
workspaceSlug ? GLOBAL_VIEWS_LIST(workspaceSlug.toString()) : null,
workspaceSlug ? () => globalViewsStore.fetchAllGlobalViews(workspaceSlug.toString()) : null
);
useSWR(
workspaceSlug && globalViewId ? GLOBAL_VIEW_DETAILS(globalViewId.toString()) : null,
workspaceSlug && globalViewId
? () => globalViewsStore.fetchGlobalViewDetails(workspaceSlug.toString(), globalViewId.toString())
: null
);
return (
<WorkspaceAuthorizationLayout
breadcrumbs={
<div className="flex gap-2 items-center">
<CheckCircle size={18} strokeWidth={1.5} />
<span className="text-sm font-medium">Workspace issues</span>
</div>
}
right={<GlobalIssuesHeader activeLayout="spreadsheet" />}
>
<div className="h-full overflow-hidden bg-custom-background-100">
<div className="h-full w-full flex flex-col border-b border-custom-border-300">
<GlobalViewsHeader />
<GlobalViewsAllLayouts />
</div>
</div>
</WorkspaceAuthorizationLayout>
);
};
export default GlobalViewIssues;

78
web/pages/[workspaceSlug]/workspace-views/all-issues.tsx
View File

@ -1,40 +1,50 @@
import { useRouter } from "next/router";
import useSWR from "swr";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { GlobalViewsHeader } from "components/workspace";
import { GlobalIssuesHeader } from "components/headers";
import { GlobalViewsAllLayouts } from "components/issues";
// layouts
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
import { PrimaryButton } from "components/ui";
// component
import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
import { WorkspaceAllIssue } from "components/issues/workspace-views/workspace-all-issue";
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
// icons
import { PlusIcon } from "@heroicons/react/24/outline";
import { CheckCircle } from "lucide-react";
// types
import { NextPage } from "next";
// fetch-keys
import { GLOBAL_VIEWS_LIST } from "constants/fetch-keys";
const WorkspaceViewAllIssue = () => (
<WorkspaceAuthorizationLayout
breadcrumbs={
<div className="flex gap-2 items-center">
<CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
<span className="text-sm font-medium">Workspace issues</span>
const GlobalViewAllIssues: NextPage = () => {
const router = useRouter();
const { workspaceSlug } = router.query;
const { globalViews: globalViewsStore } = useMobxStore();
useSWR(
workspaceSlug ? GLOBAL_VIEWS_LIST(workspaceSlug.toString()) : null,
workspaceSlug ? () => globalViewsStore.fetchAllGlobalViews(workspaceSlug.toString()) : null
);
return (
<WorkspaceAuthorizationLayout
breadcrumbs={
<div className="flex gap-2 items-center">
<CheckCircle size={18} strokeWidth={1.5} />
<span className="text-sm font-medium">Workspace issues</span>
</div>
}
right={<GlobalIssuesHeader activeLayout="spreadsheet" />}
>
<div className="h-full overflow-hidden bg-custom-background-100">
<div className="h-full w-full flex flex-col border-b border-custom-border-300">
<GlobalViewsHeader />
<GlobalViewsAllLayouts type="all-issues" />
</div>
</div>
}
right={
<div className="flex items-center gap-2">
<WorkspaceIssuesViewOptions />
</WorkspaceAuthorizationLayout>
);
};
<PrimaryButton
className="flex items-center gap-2"
onClick={() => {
const e = new KeyboardEvent("keydown", { key: "c" });
document.dispatchEvent(e);
}}
>
<PlusIcon className="h-4 w-4" />
Add Issue
</PrimaryButton>
</div>
}
>
<WorkspaceAllIssue />
</WorkspaceAuthorizationLayout>
);
export default WorkspaceViewAllIssue;
export default GlobalViewAllIssues;

80
web/pages/[workspaceSlug]/workspace-views/assigned.tsx
View File

@ -1,40 +1,50 @@
// layouts
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
import { useRouter } from "next/router";
import useSWR from "swr";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
import { WorkspaceAssignedIssue } from "components/issues/workspace-views/workspace-assigned-issue";
// ui
import { PrimaryButton } from "components/ui";
import { GlobalViewsHeader } from "components/workspace";
import { GlobalIssuesHeader } from "components/headers";
import { GlobalViewsAllLayouts } from "components/issues";
// layouts
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
// icons
import { PlusIcon } from "@heroicons/react/24/outline";
import { CheckCircle } from "lucide-react";
// types
import { NextPage } from "next";
// fetch-keys
import { GLOBAL_VIEWS_LIST } from "constants/fetch-keys";
const WorkspaceViewAssignedIssue: React.FC = () => (
<WorkspaceAuthorizationLayout
breadcrumbs={
<div className="flex gap-2 items-center">
<CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
<span className="text-sm font-medium">Workspace Issues</span>
</div>
}
right={
<div className="flex items-center gap-2">
<WorkspaceIssuesViewOptions />
<PrimaryButton
className="flex items-center gap-2"
onClick={() => {
const e = new KeyboardEvent("keydown", { key: "c" });
document.dispatchEvent(e);
}}
>
<PlusIcon className="h-4 w-4" />
Add Issue
</PrimaryButton>
</div>
}
>
<WorkspaceAssignedIssue />
</WorkspaceAuthorizationLayout>
);
const GlobalViewAssignedIssues: NextPage = () => {
const router = useRouter();
const { workspaceSlug } = router.query;
export default WorkspaceViewAssignedIssue;
const { globalViews: globalViewsStore } = useMobxStore();
useSWR(
workspaceSlug ? GLOBAL_VIEWS_LIST(workspaceSlug.toString()) : null,
workspaceSlug ? () => globalViewsStore.fetchAllGlobalViews(workspaceSlug.toString()) : null
);
return (
<WorkspaceAuthorizationLayout
breadcrumbs={
<div className="flex gap-2 items-center">
<CheckCircle size={18} strokeWidth={1.5} />
<span className="text-sm font-medium">Workspace issues</span>
</div>
}
right={<GlobalIssuesHeader activeLayout="spreadsheet" />}
>
<div className="h-full overflow-hidden bg-custom-background-100">
<div className="h-full w-full flex flex-col border-b border-custom-border-300">
<GlobalViewsHeader />
<GlobalViewsAllLayouts type="assigned" />
</div>
</div>
</WorkspaceAuthorizationLayout>
);
};
export default GlobalViewAssignedIssues;

80
web/pages/[workspaceSlug]/workspace-views/created.tsx
View File

@ -1,40 +1,50 @@
// layouts
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
import { useRouter } from "next/router";
import useSWR from "swr";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
import { WorkspaceCreatedIssues } from "components/issues/workspace-views/workspace-created-issues";
// ui
import { PrimaryButton } from "components/ui";
import { GlobalViewsHeader } from "components/workspace";
import { GlobalIssuesHeader } from "components/headers";
import { GlobalViewsAllLayouts } from "components/issues";
// layouts
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
// icons
import { PlusIcon } from "@heroicons/react/24/outline";
import { CheckCircle } from "lucide-react";
// types
import { NextPage } from "next";
// fetch-keys
import { GLOBAL_VIEWS_LIST } from "constants/fetch-keys";
const WorkspaceViewCreatedIssue: React.FC = () => (
<WorkspaceAuthorizationLayout
breadcrumbs={
<div className="flex gap-2 items-center">
<CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
<span className="text-sm font-medium">Workspace Issues</span>
</div>
}
right={
<div className="flex items-center gap-2">
<WorkspaceIssuesViewOptions />
<PrimaryButton
className="flex items-center gap-2"
onClick={() => {
const e = new KeyboardEvent("keydown", { key: "c" });
document.dispatchEvent(e);
}}
>
<PlusIcon className="h-4 w-4" />
Add Issue
</PrimaryButton>
</div>
}
>
<WorkspaceCreatedIssues />
</WorkspaceAuthorizationLayout>
);
const GlobalViewCreatedIssues: NextPage = () => {
const router = useRouter();
const { workspaceSlug } = router.query;
export default WorkspaceViewCreatedIssue;
const { globalViews: globalViewsStore } = useMobxStore();
useSWR(
workspaceSlug ? GLOBAL_VIEWS_LIST(workspaceSlug.toString()) : null,
workspaceSlug ? () => globalViewsStore.fetchAllGlobalViews(workspaceSlug.toString()) : null
);
return (
<WorkspaceAuthorizationLayout
breadcrumbs={
<div className="flex gap-2 items-center">
<CheckCircle size={18} strokeWidth={1.5} />
<span className="text-sm font-medium">Workspace issues</span>
</div>
}
right={<GlobalIssuesHeader activeLayout="spreadsheet" />}
>
<div className="h-full overflow-hidden bg-custom-background-100">
<div className="h-full w-full flex flex-col border-b border-custom-border-300">
<GlobalViewsHeader />
<GlobalViewsAllLayouts type="created" />
</div>
</div>
</WorkspaceAuthorizationLayout>
);
};
export default GlobalViewCreatedIssues;

177
web/pages/[workspaceSlug]/workspace-views/index.tsx
View File

@ -1,98 +1,38 @@
import React, { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import useSWR from "swr";
// services
import workspaceService from "services/workspace.service";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// layouts
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
// components
import { SingleWorkspaceViewItem } from "components/workspace/views/single-workspace-view-item";
import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
import { DeleteWorkspaceViewModal } from "components/workspace/views/delete-workspace-view-modal";
import { GlobalDefaultViewListItem, GlobalViewsList } from "components/workspace";
import { GlobalIssuesHeader } from "components/headers";
// ui
import { EmptyState, Input, Loader, PrimaryButton } from "components/ui";
import { Input } from "components/ui";
// icons
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { PlusIcon } from "lucide-react";
import { PhotoFilterOutlined } from "@mui/icons-material";
// image
import emptyView from "public/empty-state/view.svg";
// types
import type { NextPage } from "next";
import { IWorkspaceView } from "types/workspace-views";
// constants
import { WORKSPACE_VIEWS_LIST } from "constants/fetch-keys";
// helper
import { truncateText } from "helpers/string.helper";
import { DEFAULT_GLOBAL_VIEWS_LIST } from "constants/workspace";
// fetch-keys
import { GLOBAL_VIEWS_LIST } from "constants/fetch-keys";
const WorkspaceViews: NextPage = () => {
const [query, setQuery] = useState("");
const [createUpdateViewModal, setCreateUpdateViewModal] = useState(false);
const [selectedViewToUpdate, setSelectedViewToUpdate] = useState<IWorkspaceView | null>(null);
const [deleteViewModal, setDeleteViewModal] = useState(false);
const [selectedViewToDelete, setSelectedViewToDelete] = useState<IWorkspaceView | null>(null);
const router = useRouter();
const { workspaceSlug } = router.query;
const { data: workspaceViews } = useSWR(
workspaceSlug ? WORKSPACE_VIEWS_LIST(workspaceSlug as string) : null,
workspaceSlug ? () => workspaceService.getAllViews(workspaceSlug as string) : null
const { globalViews: globalViewsStore } = useMobxStore();
useSWR(
workspaceSlug ? GLOBAL_VIEWS_LIST(workspaceSlug.toString()) : null,
workspaceSlug ? () => globalViewsStore.fetchAllGlobalViews(workspaceSlug.toString()) : null
);
const defaultWorkspaceViewsList = [
{
key: "all",
label: "All Issues",
href: `/${workspaceSlug}/workspace-views/all-issues`,
},
{
key: "assigned",
label: "Assigned",
href: `/${workspaceSlug}/workspace-views/assigned`,
},
{
key: "created",
label: "Created",
href: `/${workspaceSlug}/workspace-views/created`,
},
{
key: "subscribed",
label: "Subscribed",
href: `/${workspaceSlug}/workspace-views/subscribed`,
},
];
const filteredDefaultOptions =
query === ""
? defaultWorkspaceViewsList
: defaultWorkspaceViewsList?.filter((option) =>
option.label.toLowerCase().includes(query.toLowerCase())
);
const filteredOptions =
query === ""
? workspaceViews
: workspaceViews?.filter((option) => option.name.toLowerCase().includes(query.toLowerCase()));
const handleEditView = (view: IWorkspaceView) => {
setSelectedViewToUpdate(view);
setCreateUpdateViewModal(true);
};
const handleDeleteView = (view: IWorkspaceView) => {
setSelectedViewToDelete(view);
setDeleteViewModal(true);
};
return (
<WorkspaceAuthorizationLayout
breadcrumbs={
@ -100,33 +40,8 @@ const WorkspaceViews: NextPage = () => {
<span className="text-sm font-medium">Workspace Views</span>
</div>
}
right={
<div className="flex items-center gap-2">
<WorkspaceIssuesViewOptions />
<PrimaryButton
className="flex items-center gap-2"
onClick={() => setCreateUpdateViewModal(true)}
>
<PlusIcon className="h-4 w-4" />
New View
</PrimaryButton>
</div>
}
right={<GlobalIssuesHeader activeLayout="list" />}
>
<CreateUpdateWorkspaceViewModal
isOpen={createUpdateViewModal}
handleClose={() => {
setCreateUpdateViewModal(false);
setSelectedViewToUpdate(null);
}}
data={selectedViewToUpdate}
/>
<DeleteWorkspaceViewModal
isOpen={deleteViewModal}
data={selectedViewToDelete}
setIsOpen={setDeleteViewModal}
/>
<div className="flex flex-col">
<div className="h-full w-full flex flex-col overflow-hidden">
<div className="flex items-center gap-2.5 w-full px-5 py-3 border-b border-custom-border-200">
@ -140,64 +55,10 @@ const WorkspaceViews: NextPage = () => {
/>
</div>
</div>
{filteredDefaultOptions &&
filteredDefaultOptions.length > 0 &&
filteredDefaultOptions.map((option) => (
<div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
<Link href={option.href}>
<a className="flex items-center justify-between relative rounded px-5 py-4 w-full">
<div className="flex items-center justify-between w-full">
<div className="flex items-center gap-4">
<div
className={`flex items-center justify-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100`}
>
<PhotoFilterOutlined className="!text-base !leading-6" />
</div>
<div className="flex flex-col">
<p className="truncate text-sm leading-4 font-medium">
{truncateText(option.label, 75)}
</p>
</div>
</div>
</div>
</a>
</Link>
</div>
))}
{filteredOptions ? (
filteredOptions.length > 0 ? (
<div>
{filteredOptions.map((view) => (
<SingleWorkspaceViewItem
key={view.id}
view={view}
handleEditView={() => handleEditView(view)}
handleDeleteView={() => handleDeleteView(view)}
/>
))}
</div>
) : (
<EmptyState
title="Get focused with views"
description="Views aid in saving your issues by applying various filters and grouping options."
image={emptyView}
primaryButton={{
icon: <PlusIcon className="h-4 w-4" />,
text: "New View",
onClick: () => setCreateUpdateViewModal(true),
}}
/>
)
) : (
<Loader className="space-y-1.5">
<Loader.Item height="72px" />
<Loader.Item height="72px" />
<Loader.Item height="72px" />
<Loader.Item height="72px" />
<Loader.Item height="72px" />
</Loader>
)}
{DEFAULT_GLOBAL_VIEWS_LIST.filter((v) => v.label.toLowerCase().includes(query.toLowerCase())).map((option) => (
<GlobalDefaultViewListItem key={option.key} view={option} />
))}
<GlobalViewsList searchQuery={query} />
</div>
</WorkspaceAuthorizationLayout>
);

40
web/pages/[workspaceSlug]/workspace-views/issues.tsx
View File

@ -1,40 +0,0 @@
// layouts
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
// components
import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
import { WorkspaceViewIssues } from "components/issues/workspace-views/workpace-view-issues";
// ui
import { PrimaryButton } from "components/ui";
// icons
import { PlusIcon } from "@heroicons/react/24/outline";
import { CheckCircle } from "lucide-react";
const WorkspaceView = () => (
<WorkspaceAuthorizationLayout
breadcrumbs={
<div className="flex gap-2 items-center">
<CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
<span className="text-sm font-medium">Workspace issues</span>
</div>
}
right={
<div className="flex items-center gap-2">
<WorkspaceIssuesViewOptions />
<PrimaryButton
className="flex items-center gap-2"
onClick={() => {
const e = new KeyboardEvent("keydown", { key: "c" });
document.dispatchEvent(e);
}}
>
<PlusIcon className="h-4 w-4" />
Add Issue
</PrimaryButton>
</div>
}
>
<WorkspaceViewIssues />
</WorkspaceAuthorizationLayout>
);
export default WorkspaceView;

80
web/pages/[workspaceSlug]/workspace-views/subscribed.tsx
View File

@ -1,40 +1,50 @@
// layouts
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
import { useRouter } from "next/router";
import useSWR from "swr";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
import { WorkspaceSubscribedIssues } from "components/issues/workspace-views/workspace-subscribed-issue";
// ui
import { PrimaryButton } from "components/ui";
import { GlobalViewsHeader } from "components/workspace";
import { GlobalIssuesHeader } from "components/headers";
import { GlobalViewsAllLayouts } from "components/issues";
// layouts
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
// icons
import { PlusIcon } from "@heroicons/react/24/outline";
import { CheckCircle } from "lucide-react";
// types
import { NextPage } from "next";
// fetch-keys
import { GLOBAL_VIEWS_LIST } from "constants/fetch-keys";
const WorkspaceViewSubscribedIssue: React.FC = () => (
<WorkspaceAuthorizationLayout
breadcrumbs={
<div className="flex gap-2 items-center">
<CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
<span className="text-sm font-medium">Workspace Issue</span>
</div>
}
right={
<div className="flex items-center gap-2">
<WorkspaceIssuesViewOptions />
<PrimaryButton
className="flex items-center gap-2"
onClick={() => {
const e = new KeyboardEvent("keydown", { key: "c" });
document.dispatchEvent(e);
}}
>
<PlusIcon className="h-4 w-4" />
Add Issue
</PrimaryButton>
</div>
}
>
<WorkspaceSubscribedIssues />
</WorkspaceAuthorizationLayout>
);
const GlobalViewSubscribedIssues: NextPage = () => {
const router = useRouter();
const { workspaceSlug } = router.query;
export default WorkspaceViewSubscribedIssue;
const { globalViews: globalViewsStore } = useMobxStore();
useSWR(
workspaceSlug ? GLOBAL_VIEWS_LIST(workspaceSlug.toString()) : null,
workspaceSlug ? () => globalViewsStore.fetchAllGlobalViews(workspaceSlug.toString()) : null
);
return (
<WorkspaceAuthorizationLayout
breadcrumbs={
<div className="flex gap-2 items-center">
<CheckCircle size={18} strokeWidth={1.5} />
<span className="text-sm font-medium">Workspace issues</span>
</div>
}
right={<GlobalIssuesHeader activeLayout="spreadsheet" />}
>
<div className="h-full overflow-hidden bg-custom-background-100">
<div className="h-full w-full flex flex-col border-b border-custom-border-300">
<GlobalViewsHeader />
<GlobalViewsAllLayouts type="subscribed" />
</div>
</div>
</WorkspaceAuthorizationLayout>
);
};
export default GlobalViewSubscribedIssues;

15
web/services/workspace.service.ts
View File

@ -14,9 +14,9 @@ import {
ICurrentUserResponse,
IWorkspaceBulkInviteFormData,
IWorkspaceViewProps,
IWorkspaceViewIssuesParams,
} from "types";
import { IWorkspaceView } from "types/workspace-views";
import { IIssueGroupWithSubGroupsStructure, IIssueGroupedStructure, IIssueUnGroupedStructure } from "store/issue";
export class WorkspaceService extends APIService {
constructor() {
@ -249,7 +249,7 @@ export class WorkspaceService extends APIService {
});
}
async createView(workspaceSlug: string, data: IWorkspaceView): Promise<any> {
async createView(workspaceSlug: string, data: Partial<IWorkspaceView>): Promise<IWorkspaceView> {
return this.post(`/api/workspaces/${workspaceSlug}/views/`, data)
.then((response) => response?.data)
.catch((error) => {
@ -257,11 +257,7 @@ export class WorkspaceService extends APIService {
});
}
async updateView(
workspaceSlug: string,
viewId: string,
data: Partial<IWorkspaceView>
): Promise<any> {
async updateView(workspaceSlug: string, viewId: string, data: Partial<IWorkspaceView>): Promise<IWorkspaceView> {
return this.patch(`/api/workspaces/${workspaceSlug}/views/${viewId}/`, data)
.then((response) => response?.data)
.catch((error) => {
@ -293,7 +289,10 @@ export class WorkspaceService extends APIService {
});
}
async getViewIssues(workspaceSlug: string, params: IWorkspaceViewIssuesParams): Promise<any> {
async getViewIssues(
workspaceSlug: string,
params: any
): Promise<IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure> {
return this.get(`/api/workspaces/${workspaceSlug}/issues/`, {
params,
})

0
web/store/global-views.ts
View File

70
web/store/global_view_filters.ts Normal file
View File

@ -0,0 +1,70 @@
import { observable, action, makeObservable, runInAction } from "mobx";
// types
import { RootStore } from "./root";
import { IIssueFilterOptions } from "types";
export interface IGlobalViewFiltersStore {
// states
loader: boolean;
error: any | null;
// observables
storedFilters: {
[viewId: string]: IIssueFilterOptions;
};
// actions
updateStoredFilters: (viewId: string, filters: Partial<IIssueFilterOptions>) => void;
deleteStoredFilters: (viewId: string) => void;
}
class GlobalViewFiltersStore implements IGlobalViewFiltersStore {
// states
loader: boolean = false;
error: any | null = null;
// observables
storedFilters: {
[viewId: string]: IIssueFilterOptions;
} = {};
// root store
rootStore;
constructor(_rootStore: RootStore) {
makeObservable(this, {
// states
loader: observable.ref,
error: observable.ref,
// observables
storedFilters: observable.ref,
// actions
updateStoredFilters: action,
deleteStoredFilters: action,
});
this.rootStore = _rootStore;
}
updateStoredFilters = (viewId: string, filters: Partial<IIssueFilterOptions>) => {
runInAction(() => {
this.storedFilters = {
...this.storedFilters,
[viewId]: { ...this.storedFilters[viewId], ...filters },
};
});
};
deleteStoredFilters = (viewId: string) => {
const updatedStoredFilters = { ...this.storedFilters };
delete updatedStoredFilters[viewId];
runInAction(() => {
this.storedFilters = updatedStoredFilters;
});
};
}
export default GlobalViewFiltersStore;

167
web/store/global_view_issues.ts Normal file
View File

@ -0,0 +1,167 @@
import { observable, action, makeObservable, runInAction } from "mobx";
// services
import { ProjectService } from "services/project.service";
import { WorkspaceService } from "services/workspace.service";
// helpers
import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
// types
import { RootStore } from "./root";
import { IIssue, IIssueFilterOptions, TStaticViewTypes } from "types";
export interface IGlobalViewIssuesStore {
// states
loader: boolean;
error: any | null;
// observables
viewIssues: {
[viewId: string]: IIssue[];
};
// actions
fetchViewIssues: (workspaceSlug: string, viewId: string, filters: IIssueFilterOptions) => Promise<any>;
fetchStaticIssues: (workspaceSlug: string, type: TStaticViewTypes) => Promise<any>;
}
class GlobalViewIssuesStore implements IGlobalViewIssuesStore {
// states
loader: boolean = false;
error: any | null = null;
// observables
viewIssues: {
[viewId: string]: IIssue[];
} = {};
// root store
rootStore;
// services
projectService;
workspaceService;
constructor(_rootStore: RootStore) {
makeObservable(this, {
// states
loader: observable.ref,
error: observable.ref,
// observables
viewIssues: observable.ref,
// actions
fetchViewIssues: action,
fetchStaticIssues: action,
});
this.rootStore = _rootStore;
this.projectService = new ProjectService();
this.workspaceService = new WorkspaceService();
}
computedFilter = (filters: any, filteredParams: any) => {
const computedFilters: any = {};
Object.keys(filters).map((key) => {
if (filters[key] != undefined && filteredParams.includes(key))
computedFilters[key] =
typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
});
return computedFilters;
};
fetchViewIssues = async (workspaceSlug: string, viewId: string, filters: IIssueFilterOptions) => {
try {
runInAction(() => {
this.loader = true;
});
const displayFilters = this.rootStore.workspaceFilter.workspaceDisplayFilters;
let filteredRouteParams: any = {
priority: filters?.priority || undefined,
project: filters?.project || undefined,
state_group: filters?.state_group || undefined,
state: filters?.state || undefined,
assignees: filters?.assignees || undefined,
created_by: filters?.created_by || undefined,
labels: filters?.labels || undefined,
start_date: filters?.start_date || undefined,
target_date: filters?.target_date || undefined,
order_by: displayFilters?.order_by || "-created_at",
type: displayFilters?.type || undefined,
sub_issue: false,
};
const filteredParams = handleIssueQueryParamsByLayout("spreadsheet", "my_issues");
if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
const response = await this.workspaceService.getViewIssues(workspaceSlug, filteredRouteParams);
runInAction(() => {
this.loader = false;
this.viewIssues = {
...this.viewIssues,
[viewId]: response as IIssue[],
};
});
return response;
} catch (error) {
runInAction(() => {
this.loader = false;
this.error = error;
});
throw error;
}
};
fetchStaticIssues = async (workspaceSlug: string, type: TStaticViewTypes) => {
try {
runInAction(() => {
this.loader = true;
});
const workspaceMemberResponse = await this.rootStore.workspaceFilter.fetchUserWorkspaceFilters(workspaceSlug);
const displayFilters = workspaceMemberResponse.view_props.display_filters;
let filteredRouteParams: any = {
order_by: displayFilters?.order_by || "-created_at",
type: displayFilters?.type || undefined,
sub_issue: false,
};
const filteredParams = handleIssueQueryParamsByLayout("spreadsheet", "my_issues");
if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
const currentUser = this.rootStore.user.currentUser;
if (type === "assigned" && currentUser) filteredRouteParams.assignees = currentUser.id;
if (type === "created" && currentUser) filteredRouteParams.created_by = currentUser.id;
if (type === "subscribed" && currentUser) filteredRouteParams.subscriber = currentUser.id;
const response = await this.workspaceService.getViewIssues(workspaceSlug, filteredRouteParams);
runInAction(() => {
this.loader = false;
this.viewIssues = {
...this.viewIssues,
[type]: response as IIssue[],
};
});
return response;
} catch (error) {
runInAction(() => {
this.loader = false;
this.error = error;
});
throw error;
}
};
}
export default GlobalViewIssuesStore;

207
web/store/global_views.ts Normal file
View File

@ -0,0 +1,207 @@
import { observable, action, makeObservable, runInAction } from "mobx";
// services
import { ProjectService } from "services/project.service";
import { WorkspaceService } from "services/workspace.service";
// types
import { RootStore } from "./root";
import { IWorkspaceView } from "types/workspace-views";
export interface IGlobalViewsStore {
// states
loader: boolean;
error: any | null;
// observables
globalViewId: string | null;
globalViewsList: IWorkspaceView[] | null;
globalViewDetails: {
[viewId: string]: IWorkspaceView;
};
// actions
setGlobalViewId: (viewId: string) => void;
fetchAllGlobalViews: (workspaceSlug: string) => Promise<IWorkspaceView[]>;
fetchGlobalViewDetails: (workspaceSlug: string, viewId: string) => Promise<IWorkspaceView>;
createGlobalView: (workspaceSlug: string, data: Partial<IWorkspaceView>) => Promise<IWorkspaceView>;
updateGlobalView: (workspaceSlug: string, viewId: string, data: Partial<IWorkspaceView>) => Promise<IWorkspaceView>;
deleteGlobalView: (workspaceSlug: string, viewId: string) => Promise<any>;
}
class GlobalViewsStore implements IGlobalViewsStore {
// states
loader: boolean = false;
error: any | null = null;
// observables
globalViewId: string | null = null;
globalViewsList: IWorkspaceView[] | null = null;
globalViewDetails: { [viewId: string]: IWorkspaceView } = {};
// root store
rootStore;
// services
projectService;
workspaceService;
constructor(_rootStore: RootStore) {
makeObservable(this, {
// states
loader: observable.ref,
error: observable.ref,
// observables
globalViewId: observable.ref,
globalViewsList: observable.ref,
globalViewDetails: observable.ref,
// actions
setGlobalViewId: action,
fetchAllGlobalViews: action,
fetchGlobalViewDetails: action,
createGlobalView: action,
updateGlobalView: action,
deleteGlobalView: action,
});
this.rootStore = _rootStore;
this.projectService = new ProjectService();
this.workspaceService = new WorkspaceService();
}
setGlobalViewId = (viewId: string) => {
this.globalViewId = viewId;
};
fetchAllGlobalViews = async (workspaceSlug: string): Promise<IWorkspaceView[]> => {
try {
runInAction(() => {
this.loader = true;
});
const response = await this.workspaceService.getAllViews(workspaceSlug);
runInAction(() => {
this.loader = false;
this.globalViewsList = response;
});
return response;
} catch (error) {
runInAction(() => {
this.loader = false;
this.error = error;
});
throw error;
}
};
fetchGlobalViewDetails = async (workspaceSlug: string, viewId: string): Promise<IWorkspaceView> => {
try {
runInAction(() => {
this.loader = true;
});
const response = await this.workspaceService.getViewDetails(workspaceSlug, viewId);
runInAction(() => {
this.loader = false;
this.globalViewDetails = {
...this.globalViewDetails,
[response.id]: response,
};
});
return response;
} catch (error) {
runInAction(() => {
this.loader = false;
this.error = error;
});
throw error;
}
};
createGlobalView = async (workspaceSlug: string, data: Partial<IWorkspaceView>): Promise<IWorkspaceView> => {
try {
const response = await this.workspaceService.createView(workspaceSlug, data);
runInAction(() => {
this.globalViewsList = [response, ...(this.globalViewsList ?? [])];
this.globalViewDetails = {
...this.globalViewDetails,
[response.id]: response,
};
});
return response;
} catch (error) {
runInAction(() => {
this.error = error;
});
throw error;
}
};
updateGlobalView = async (
workspaceSlug: string,
viewId: string,
data: Partial<IWorkspaceView>
): Promise<IWorkspaceView> => {
const viewToUpdate = { ...this.globalViewDetails[viewId], ...data };
try {
runInAction(() => {
this.globalViewsList = (this.globalViewsList ?? []).map((view) => {
if (view.id === viewId) return viewToUpdate;
return view;
});
this.globalViewDetails = {
...this.globalViewDetails,
[viewId]: viewToUpdate,
};
});
const response = await this.workspaceService.updateView(workspaceSlug, viewId, data);
return response;
} catch (error) {
this.fetchGlobalViewDetails(workspaceSlug, viewId);
runInAction(() => {
this.error = error;
});
throw error;
}
};
deleteGlobalView = async (workspaceSlug: string, viewId: string): Promise<any> => {
const newViewsList = (this.globalViewsList ?? []).filter((view) => view.id !== viewId);
try {
runInAction(() => {
this.globalViewsList = newViewsList;
});
await this.workspaceService.deleteView(workspaceSlug, viewId);
} catch (error) {
this.fetchAllGlobalViews(workspaceSlug);
runInAction(() => {
this.error = error;
});
throw error;
}
};
}
export default GlobalViewsStore;

6
web/store/project.ts
View File

@ -7,10 +7,6 @@ import { ProjectService } from "services/project.service";
import { IssueService } from "services/issue.service";
import { ProjectStateServices } from "services/project_state.service";
import { ProjectEstimateServices } from "services/project_estimates.service";
import { CycleService } from "services/cycles.service";
import { ModuleService } from "services/modules.service";
import { ViewService } from "services/views.service";
import { PageService } from "services/page.service";
export interface IProjectStore {
loader: boolean;
@ -18,7 +14,7 @@ export interface IProjectStore {
searchQuery: string;
projectId: string | null;
projects: { [key: string]: IProject[] };
projects: { [workspaceSlug: string]: IProject[] };
project_details: {
[projectId: string]: IProject; // projectId: project Info
};

24
web/store/root.ts
View File

@ -21,15 +21,21 @@ import IssueFilterStore, { IIssueFilterStore } from "./issue_filters";
import IssueViewDetailStore from "./issue_detail";
import IssueKanBanViewStore from "./kanban_view";
import CalendarStore, { ICalendarStore } from "./calendar";
import GlobalViewsStore, { IGlobalViewsStore } from "./global_views";
import GlobalViewIssuesStore, { IGlobalViewIssuesStore } from "./global_view_issues";
import WorkspaceFilterStore, { IWorkspaceFilterStore } from "./workspace_filters";
import GlobalViewFiltersStore, { IGlobalViewFiltersStore } from "./global_view_filters";
enableStaticRendering(typeof window === "undefined");
export class RootStore {
user;
theme;
projectPublish: IProjectPublishStore;
draftIssuesStore: DraftIssuesStore;
workspace: IWorkspaceStore;
workspaceFilter: IWorkspaceFilterStore;
projectPublish: IProjectPublishStore;
project: IProjectStore;
issue: IIssueStore;
@ -47,12 +53,21 @@ export class RootStore {
issueFilter: IIssueFilterStore;
issueDetail: IssueViewDetailStore;
issueKanBanView: IssueKanBanViewStore;
draftIssuesStore: DraftIssuesStore;
calendar: ICalendarStore;
globalViews: IGlobalViewsStore;
globalViewIssues: IGlobalViewIssuesStore;
globalViewFilters: IGlobalViewFiltersStore;
constructor() {
this.user = new UserStore(this);
this.theme = new ThemeStore(this);
this.workspace = new WorkspaceStore(this);
this.workspaceFilter = new WorkspaceFilterStore(this);
this.project = new ProjectStore(this);
this.projectPublish = new ProjectPublishStore(this);
@ -72,6 +87,11 @@ export class RootStore {
this.issueDetail = new IssueViewDetailStore(this);
this.issueKanBanView = new IssueKanBanViewStore(this);
this.draftIssuesStore = new DraftIssuesStore(this);
this.calendar = new CalendarStore(this);
this.globalViews = new GlobalViewsStore(this);
this.globalViewIssues = new GlobalViewIssuesStore(this);
this.globalViewFilters = new GlobalViewFiltersStore(this);
}
}

100
web/store/workspace.ts
View File

@ -1,62 +1,81 @@
import { action, computed, observable, makeObservable, runInAction } from "mobx";
import { RootStore } from "./root";
// types
import { IIssueLabels, IProject, IWorkspace } from "types";
import { IIssueLabels, IProject, IWorkspace, IWorkspaceMember } from "types";
// services
import { WorkspaceService } from "services/workspace.service";
import { ProjectService } from "services/project.service";
import { IssueService } from "services/issue.service";
export interface IWorkspaceStore {
// states
loader: boolean;
error: any | null;
// observables
workspaces: IWorkspace[];
labels: { [key: string]: IIssueLabels[] } | {}; // workspace_id: labels[]
workspaceSlug: string | null;
// computed
currentWorkspace: IWorkspace | null;
workspaceLabels: IIssueLabels[];
workspaces: IWorkspace[];
labels: { [workspaceSlug: string]: IIssueLabels[] } | {}; // workspaceSlug: labels[]
members: { [workspaceSlug: string]: IWorkspaceMember[] } | {}; // workspaceSlug: members[]
// actions
setWorkspaceSlug: (workspaceSlug: string) => void;
getWorkspaceBySlug: (workspaceSlug: string) => IWorkspace | null;
getWorkspaceLabelById: (workspaceSlug: string, labelId: string) => IIssueLabels | null;
fetchWorkspaces: () => Promise<void>;
fetchWorkspaceLabels: (workspaceSlug: string) => Promise<void>;
fetchWorkspaceMembers: (workspaceSlug: string) => Promise<void>;
// computed
currentWorkspace: IWorkspace | null;
workspaceLabels: IIssueLabels[] | null;
workspaceMembers: IWorkspaceMember[] | null;
}
class WorkspaceStore implements IWorkspaceStore {
// states
loader: boolean = false;
error: any | null = null;
// observables
workspaceSlug: string | null = null;
workspaces: IWorkspace[] = [];
projects: { [workspaceSlug: string]: IProject[] } = {}; // workspace_id: project[]
labels: { [workspaceSlug: string]: IIssueLabels[] } = {};
// root store
rootStore;
members: { [workspaceSlug: string]: IWorkspaceMember[] } = {};
// services
workspaceService;
projectService;
issueService;
// root store
rootStore;
constructor(_rootStore: RootStore) {
makeObservable(this, {
// states
loader: observable.ref,
error: observable.ref,
// objects
// observables
workspaceSlug: observable.ref,
workspaces: observable.ref,
labels: observable.ref,
workspaceSlug: observable.ref,
// computed
currentWorkspace: computed,
workspaceLabels: computed,
members: observable.ref,
// actions
setWorkspaceSlug: action,
getWorkspaceBySlug: action,
getWorkspaceLabelById: action,
fetchWorkspaces: action,
fetchWorkspaceLabels: action,
fetchWorkspaceMembers: action,
// computed
currentWorkspace: computed,
workspaceLabels: computed,
workspaceMembers: computed,
});
this.rootStore = _rootStore;
@ -70,11 +89,12 @@ class WorkspaceStore implements IWorkspaceStore {
*/
get currentWorkspace() {
if (!this.workspaceSlug) return null;
return this.workspaces?.find((workspace) => workspace.slug === this.workspaceSlug) || null;
}
/**
* computed value of workspace labels using the workspace id from the store
* computed value of workspace labels using the workspace slug from the store
*/
get workspaceLabels() {
if (!this.workspaceSlug) return [];
@ -82,6 +102,15 @@ class WorkspaceStore implements IWorkspaceStore {
return _labels && Object.keys(_labels).length > 0 ? _labels : [];
}
/**
* computed value of workspace members using the workspace slug from the store
*/
get workspaceMembers() {
if (!this.workspaceSlug) return [];
const _members = this.members?.[this.workspaceSlug];
return _members && Object.keys(_members).length > 0 ? _members : [];
}
/**
* set workspace slug in the store
* @param workspaceSlug
@ -132,8 +161,10 @@ class WorkspaceStore implements IWorkspaceStore {
*/
fetchWorkspaceLabels = async (workspaceSlug: string) => {
try {
this.loader = true;
this.error = null;
runInAction(() => {
this.loader = true;
this.error = null;
});
const labelsResponse = await this.issueService.getWorkspaceLabels(workspaceSlug);
@ -146,9 +177,40 @@ class WorkspaceStore implements IWorkspaceStore {
this.error = null;
});
} catch (error) {
console.log(error);
this.loader = false;
this.error = error;
runInAction(() => {
this.loader = false;
this.error = error;
});
}
};
/**
* fetch workspace members using workspace slug
* @param workspaceSlug
*/
fetchWorkspaceMembers = async (workspaceSlug: string) => {
try {
runInAction(() => {
this.loader = true;
this.error = null;
});
const membersResponse = await this.workspaceService.workspaceMembers(workspaceSlug);
runInAction(() => {
this.members = {
...this.members,
[workspaceSlug]: membersResponse,
};
this.loader = false;
this.error = null;
});
} catch (error) {
runInAction(() => {
this.loader = false;
this.error = error;
});
}
};
}

195
web/store/workspace_filters.ts Normal file
View File

@ -0,0 +1,195 @@
import { observable, action, computed, makeObservable, runInAction } from "mobx";
// services
import { WorkspaceService } from "services/workspace.service";
// helpers
import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
// types
import { RootStore } from "./root";
import {
IIssueDisplayFilterOptions,
IIssueDisplayProperties,
IIssueFilterOptions,
IWorkspaceMember,
IWorkspaceViewProps,
TIssueParams,
} from "types";
export interface IWorkspaceFilterStore {
// states
loader: boolean;
error: any | null;
// observables
workspaceFilters: IIssueFilterOptions;
workspaceDisplayFilters: IIssueDisplayFilterOptions;
workspaceDisplayProperties: IIssueDisplayProperties;
// actions
fetchUserWorkspaceFilters: (workspaceSlug: string) => Promise<IWorkspaceMember>;
updateWorkspaceFilters: (workspaceSlug: string, filterToUpdate: Partial<IWorkspaceViewProps>) => Promise<void>;
// computed
appliedFilters: TIssueParams[] | null;
}
class WorkspaceFilterStore implements IWorkspaceFilterStore {
// states
loader: boolean = false;
error: any | null = null;
// observables
workspaceFilters: IIssueFilterOptions = {};
workspaceDisplayFilters: IIssueDisplayFilterOptions = {};
workspaceDisplayProperties: IIssueDisplayProperties = {
assignee: true,
start_date: true,
due_date: true,
labels: true,
key: true,
priority: true,
state: true,
sub_issue_count: true,
link: true,
attachment_count: true,
estimate: true,
created_on: true,
updated_on: true,
};
// root store
rootStore;
// services
workspaceService;
constructor(_rootStore: RootStore) {
makeObservable(this, {
// states
loader: observable.ref,
error: observable.ref,
// observables
workspaceFilters: observable.ref,
workspaceDisplayFilters: observable.ref,
workspaceDisplayProperties: observable.ref,
// actions
fetchUserWorkspaceFilters: action,
updateWorkspaceFilters: action,
// computed
appliedFilters: computed,
});
this.rootStore = _rootStore;
this.workspaceService = new WorkspaceService();
}
computedFilter = (filters: any, filteredParams: any) => {
const computedFilters: any = {};
Object.keys(filters).map((key) => {
if (filters[key] != undefined && filteredParams.includes(key))
computedFilters[key] =
typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
});
return computedFilters;
};
get appliedFilters(): TIssueParams[] | null {
if (!this.workspaceFilters || !this.workspaceDisplayFilters) return null;
let filteredRouteParams: any = {
priority: this.workspaceFilters?.priority || undefined,
state_group: this.workspaceFilters?.state_group || undefined,
state: this.workspaceFilters?.state || undefined,
assignees: this.workspaceFilters?.assignees || undefined,
created_by: this.workspaceFilters?.created_by || undefined,
labels: this.workspaceFilters?.labels || undefined,
start_date: this.workspaceFilters?.start_date || undefined,
target_date: this.workspaceFilters?.target_date || undefined,
group_by: this.workspaceDisplayFilters?.group_by || "state",
order_by: this.workspaceDisplayFilters?.order_by || "-created_at",
sub_group_by: this.workspaceDisplayFilters?.sub_group_by || undefined,
type: this.workspaceDisplayFilters?.type || undefined,
sub_issue: this.workspaceDisplayFilters?.sub_issue || true,
show_empty_groups: this.workspaceDisplayFilters?.show_empty_groups || true,
start_target_date: this.workspaceDisplayFilters?.start_target_date || true,
};
const filteredParams = handleIssueQueryParamsByLayout(this.workspaceDisplayFilters.layout, "issues");
if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
if (this.workspaceDisplayFilters.layout === "calendar") filteredRouteParams.group_by = "target_date";
if (this.workspaceDisplayFilters.layout === "gantt_chart") filteredRouteParams.start_target_date = true;
return filteredRouteParams;
}
fetchUserWorkspaceFilters = async (workspaceSlug: string) => {
try {
const memberResponse = await this.workspaceService.workspaceMemberMe(workspaceSlug);
runInAction(() => {
this.workspaceFilters = memberResponse?.view_props?.filters;
this.workspaceDisplayFilters = memberResponse?.view_props?.display_filters ?? {};
this.workspaceDisplayProperties = memberResponse?.view_props?.display_properties;
});
return memberResponse;
} catch (error) {
runInAction(() => {
this.error = error;
});
throw error;
}
};
updateWorkspaceFilters = async (workspaceSlug: string, filterToUpdate: Partial<IWorkspaceViewProps>) => {
const newViewProps = {
display_filters: {
...this.workspaceDisplayFilters,
...filterToUpdate.display_filters,
},
display_properties: {
...this.workspaceDisplayProperties,
...filterToUpdate.display_properties,
},
filters: {
...this.workspaceFilters,
...filterToUpdate.filters,
},
};
// set sub_group_by to null if group_by is set to null
if (newViewProps.display_filters.group_by === null) newViewProps.display_filters.sub_group_by = null;
// set group_by to state if layout is switched to kanban and group_by is null
if (newViewProps.display_filters.layout === "kanban" && newViewProps.display_filters.group_by === null)
newViewProps.display_filters.group_by = "state";
try {
runInAction(() => {
this.workspaceDisplayFilters = newViewProps.display_filters;
this.workspaceDisplayProperties = newViewProps.display_properties;
this.workspaceFilters = newViewProps.filters;
});
this.workspaceService.updateWorkspaceView(workspaceSlug, {
view_props: newViewProps,
});
} catch (error) {
this.fetchUserWorkspaceFilters(workspaceSlug);
runInAction(() => {
this.error = error;
});
console.log("Failed to update user filters in issue filter store", error);
}
};
}
export default WorkspaceFilterStore;

1
web/types/index.d.ts vendored
View File

@ -19,6 +19,7 @@ export * from "./notifications";
export * from "./waitlist";
export * from "./reaction";
export * from "./view-props";
export * from "./workspace-views";
export type NestedKeyOf<ObjectType extends object> = {
[Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object

46
web/types/view-props.d.ts vendored
View File

@ -45,6 +45,7 @@ export type TIssueParams =
| "labels"
| "start_date"
| "target_date"
| "project"
| "group_by"
| "sub_group_by"
| "order_by"
@ -60,9 +61,10 @@ export interface IIssueFilterOptions {
created_by?: string[] | null;
labels?: string[] | null;
priority?: string[] | null;
start_date?: TStateGroups[] | null;
project?: string[] | null;
start_date?: string[] | null;
state?: string[] | null;
state_group?: TStateGroups[] | null;
state_group?: string[] | null;
subscriber?: string[] | null;
target_date?: string[] | null;
}
@ -97,41 +99,6 @@ export interface IIssueDisplayProperties {
updated_on: boolean;
}
export interface IWorkspaceIssueFilterOptions {
assignees?: string[] | null;
created_by?: string[] | null;
labels?: string[] | null;
priority?: string[] | null;
state_group?: string[] | null;
subscriber?: string[] | null;
start_date?: string[] | null;
target_date?: string[] | null;
project?: string[] | null;
}
export interface IWorkspaceGlobalViewDisplayFilterOptions {
order_by?: string | undefined;
type?: "active" | "backlog" | null;
sub_issue?: boolean;
layout?: TIssueViewOptions;
}
export interface IWorkspaceViewIssuesParams {
assignees?: string | undefined;
created_by?: string | undefined;
labels?: string | undefined;
priority?: string | undefined;
start_date?: string | undefined;
state?: string | undefined;
state_group?: string | undefined;
subscriber?: string | undefined;
target_date?: string | undefined;
project?: string | undefined;
order_by?: string | undefined;
type?: "active" | "backlog" | undefined;
sub_issue?: boolean;
}
export interface IProjectViewProps {
display_filters: IIssueDisplayFilterOptions | undefined;
filters: IIssueFilterOptions;
@ -142,8 +109,3 @@ export interface IWorkspaceViewProps {
display_filters: IIssueDisplayFilterOptions | undefined;
display_properties: Properties;
}
export interface IWorkspaceGlobalViewProps {
filters: IWorkspaceIssueFilterOptions;
display_filters: IWorkspaceIssueDisplayFilterOptions | undefined;
display_properties: Properties;
}

8
web/types/workspace-views.d.ts vendored
View File

@ -1,4 +1,4 @@
import { IWorkspaceGlobalViewProps } from "./view-props";
import { IWorkspaceViewProps } from "./view-props";
export interface IWorkspaceView {
id: string;
@ -10,8 +10,8 @@ export interface IWorkspaceView {
updated_by: string;
name: string;
description: string;
query: IWorkspaceGlobalViewProps;
query_data: IWorkspaceGlobalViewProps;
query: any;
query_data: IWorkspaceViewProps;
project: string;
workspace: string;
workspace_detail?: {
@ -20,3 +20,5 @@ export interface IWorkspaceView {
slug: string;
};
}
export type TStaticViewTypes = "all-issues" | "assigned" | "created" | "subscribed";