mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
dev: implemented inbox using MobX (#2440)
* chore: kanban refactoring * chore: Implemented new kanaban board UX and implemented draggable using react beautiful dnd * chore: updated yarn lock * chore: updated the store for issues and issue filters * chore: resolved build error * chore: created filters and updated the issue filters, display_filter and display_properties in mobx and components * chore: implemented filters for issues * chore: UI theming updates * chore: handled single and multi select in filter cards * chore: implemented filters and views in kanaban * chore: updating filters, display_filter and display properties * chore: filter, layout, display filters, extra filters and display properties render validation * chore: clean up and resolved import warnings * chore: type check * chore: renamed gantt key to gantt_chart * chore: filter render UI and Functionality implementation * chore: filter empty state handling in issue filter selection * Implementing list view * chore: kanban drag drop logic * filtering * chore: store setup * chore: handled build issues * chore: store setup * user filter * chore: store setup * chore: store fixes and static data setup * chore: store setup for build fixes * fix: merge conflicts (#2231) * 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) * fix: service imports * chore: rename csv service file --------- 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> * chore: store fixes * chore: update issue detail store to handle peek overview (#2237) * 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) * chore: update service imports * chore: update issue detail store to handle peek overview --------- 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> * chore: minor fixes * workspace project fixes * feat: project issues topbar (#2256) * chore: project issues topbar * style: theming and minor UI fixes * refactor: file structure * chore: layout wise authorization added * style: filter dropdowns * chore: add fetch keys * chore: minor fixes * chore: filters dropdown (#2260) * chore: project issues topbar * style: theming and minor UI fixes * refactor: file structure * chore: layout wise authorization added * style: filter dropdowns * chore: add fetch keys * feat: search option for filters * fix: sticky headers * chore: sub_group_by section added * fix: leave project fixes * refactor: project card component refactor * Implemented swimlanes and kanban view (#2262) * chore: issue store for kanban and calendar * chore: updated ui for kanba and swimlanes * chore: yarn.lock updated * fix: computed filters logic * chore: added sub_group_by in params and handled sub-group-by render error in display filter's * fix: ui package setup and project update form refactor * fix: ui package setup * fix: minor ui fixes * dev: calendar view layout revamp (#2293) * dev: calendar view init * chore: new render logic * chore: implement calendar view * chore: calendar view * refactor: calendar payload * chore: remove active month logic from backend * chore: setup new store for calendar * refactor: issues fetching structure * chore: months dropdown * chore: modify request query params for calendar layout * refactor: remove console logs and add comments * chore: removed demo m-store routes * cycles changes * chore: issues grouped kanban and swimlanes UI and functionality (#2294) * chore: updated the all the group_by and sub_group_by UI and functionality render in kanban * chore: kanban sorting in mobx and ui updates * chore: ui changes and drag and drop functionality changes in kanban * chore: issues count render in kanban default and swimlanes * chore: Added icons to the group_by and sub_group_by in kanban and swimlanes * refactor: filter components, constants and helper functions (#2297) * refactor: filters and display filters to accept handlers as props * refactor: filters and display filters folder structure * refactor: change issue layout options constant structure * chore: display filters validations * chore: view less filters functionality * fix: display filters validation * refactor: wrap functions around useCallback * chore: start and target date filter options added * refactor: query params generator function * fix: query params generator function * dev: gantt chart implementation using MobX (#2302) * dev: fetch project gantt issues using mobx * chore: handle group by options in the kanban layout * dev: spreadsheet layout implementation using MobX (#2306) * dev: implement spreadsheet view using mobx * refactor: remove console logs and props * chore: refactoring cycles list * feat: adding additional ui components * dev: applied filters list implementation using MobX (#2325) * dev: applied filters list UI * fix: filter item height * chore: remove unnecessary classes * fix: params generator * fix: cycles views list and board * fix: cycles list rendering fixes * fix: layout fixes * refactor: filter components (#2359) * fix: calendar layout dividers * refactor: filter selection components * fix: dropdown closing after selection * refactor: filters components * chore: issue properties for list and kanban layouts and implemented estimates in project store (#2363) * chore: issue properties for state, priorit, labels and members * feat: implemented assignee, labels properties * fix: implemented estimates in project store and issue properties * chore: staer_date and due_date and validation properties in kanban * chore: filters import conflict * dev: setup module and module filter store (#2364) * dev: implement module issues using mobx store * dev: module filter store setup * chore: module store crud operations * chore: issue list layout (#2367) * chore: merge develop (#2388) * fix: build erros * chore: cycles, modules store integration, list and kanban layouts and updated kanban logic (#2399) * chore: cycle, cycle-issue, cycle-filters, cycle-kanban, cycle layout setup * chore: cycles kanban and list view store * chore: cycles, modules kanban and list, kanban view store * refactor: change naming convention (#2383) * fix:auth layer revamp * chore: Implemented list and kanban views in project modules (#2402) * chore: updated kanban logic in project cycles and modules * chore: updated list and kanban in module * dev: implement global views using MobX (#2404) * 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> * fix: Auth fixes and Layout fixes (#2408) * fix: auth fixes and layout improvements * fix: layout fixes * fix: analytics page fixes * dev: implemented project views using MobX (#2410) * dev: implemented project views list using mobx * style: views list UI * dev: implemented view issues page using mobx * refactor: project view issues fetching * chore: plane ui library component and code refactor (#2406) * chore: swap input component with plane/ui package * chore: swap textarea component with plane/ui package * chore: swap button component with plane/ui package * chore: button component revamp * fix: button type fix * chore: secondary button revamp * chore: button props updated * chore: swap loader component with plane/ui package * fix: build error fix * chore: button component refactor * chore: code refactor * chore: swap toggle switch component with plane/ui package * chore: swap spinner component with plane/ui package * chore: swap progress bar componenet with plan/ui package * chore: code refactor * fix: gitignore fixes * fix: project card fixes * chore: ui component revamp (#2415) * chore: swap tooltip component with plane ui package * chore: swap linear progress component with plane ui package * fix: login button fix * chore: implement new worksapace wrapper for global views (#2412) * chore: implement new worksapace wrapper for global views pages * fix: merge conflicts * fix: merge conflicts * dev: add remaining layouts to cycle (#2413) * fix: workspace auth wrapper changes * chore: project card revamp and refactor (#2416) * removing dist from ui * refactor: analytics (#2419) * refactor: helper functions * chore: updated all the page headers * refactor: custom analytics * refactor: project analytics modal * refactor: folder structure, remove junk code (#2423) * refactor: folder structure * chore: ad order by target date option * refactor: remove old layout components * refactor: inbox folder structure * dev: inbox stores init * fix: services fixes * fix: store imports changes * fix: services export fixes * fix: services implementation fixes * fix: build issue fixes * fix: react library fixes * refactor: MobX store folder structure (#2435) * refactor: store folder structure * chore: update import statements * fix: service import errors (#2436) * fix: service imports * chore: update service imports in store * chore: fix remianing service imports * build fixes * editor ts config fixes * dev: implemented mobx logic in inbox components * fix: inbox crud operations * fix: build errors --------- Co-authored-by: gurusainath <gurusainath007@gmail.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: Vamsi Kurama <vamsi.kurama@gmail.com> Co-authored-by: Nikhil <118773738+pablohashescobar@users.noreply.github.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
GitHub
parent
a361dae185
commit
cb80c98413
@ -11,9 +11,7 @@ import { Dialog, Transition } from "@headlessui/react";
|
||||
// services
|
||||
import { WorkspaceService } from "services/workspace.service";
|
||||
import { IssueService } from "services/issue";
|
||||
import { InboxService } from "services/inbox.service";
|
||||
// hooks
|
||||
import useProjectDetails from "hooks/use-project-details";
|
||||
import useDebounce from "hooks/use-debounce";
|
||||
import useUser from "hooks/use-user";
|
||||
import useToast from "hooks/use-toast";
|
||||
@ -30,13 +28,13 @@ import { Icon } from "components/ui";
|
||||
import { Loader, ToggleSwitch, Tooltip } from "@plane/ui";
|
||||
// icons
|
||||
import { DiscordIcon, GithubIcon, SettingIcon } from "components/icons";
|
||||
import { InboxIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
|
||||
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
|
||||
// helpers
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
// types
|
||||
import { IIssue, IWorkspaceSearchResults } from "types";
|
||||
// fetch-keys
|
||||
import { INBOX_LIST, ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
|
||||
import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
deleteIssue: () => void;
|
||||
@ -47,7 +45,6 @@ type Props = {
|
||||
// services
|
||||
const workspaceService = new WorkspaceService();
|
||||
const issueService = new IssueService();
|
||||
const inboxService = new InboxService();
|
||||
|
||||
export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPaletteOpen }) => {
|
||||
const [placeholder, setPlaceholder] = useState("Type a command or search...");
|
||||
@ -80,7 +77,6 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const { user } = useUser();
|
||||
const { projectDetails } = useProjectDetails();
|
||||
|
||||
const { data: issueDetails } = useSWR(
|
||||
workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
|
||||
@ -89,11 +85,6 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
|
||||
: null
|
||||
);
|
||||
|
||||
const { data: inboxList } = useSWR(
|
||||
workspaceSlug && projectId ? INBOX_LIST(projectId as string) : null,
|
||||
workspaceSlug && projectId ? () => inboxService.getInboxes(workspaceSlug as string, projectId as string) : null
|
||||
);
|
||||
|
||||
const updateIssue = useCallback(
|
||||
async (formData: Partial<IIssue>) => {
|
||||
if (!workspaceSlug || !projectId || !issueId) return;
|
||||
@ -569,22 +560,6 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
|
||||
<kbd>D</kbd>
|
||||
</Command.Item>
|
||||
</Command.Group>
|
||||
{projectDetails && projectDetails.inbox_view && (
|
||||
<Command.Group heading="Inbox">
|
||||
<Command.Item
|
||||
onSelect={() => {
|
||||
setIsPaletteOpen(false);
|
||||
redirect(`/${workspaceSlug}/projects/${projectId}/inbox/${inboxList?.[0]?.id}`);
|
||||
}}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-custom-text-200">
|
||||
<InboxIcon className="h-4 w-4" color="#6b7280" />
|
||||
Open inbox
|
||||
</div>
|
||||
</Command.Item>
|
||||
</Command.Group>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
@ -41,7 +41,7 @@ export const CommandPalette: React.FC = observer(() => {
|
||||
const [isCreateUpdatePageModalOpen, setIsCreateUpdatePageModalOpen] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, issueId, inboxId, cycleId, moduleId } = router.query;
|
||||
const { workspaceSlug, projectId, issueId, cycleId, moduleId } = router.query;
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
@ -176,7 +176,6 @@ export const CommandPalette: React.FC = observer(() => {
|
||||
<CreateUpdateIssueModal
|
||||
isOpen={isIssueModalOpen}
|
||||
handleClose={() => setIsIssueModalOpen(false)}
|
||||
fieldsToShow={inboxId ? ["name", "description", "priority"] : ["all"]}
|
||||
prePopulateData={
|
||||
cycleId ? { cycle: cycleId.toString() } : moduleId ? { module: moduleId.toString() } : undefined
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
export * from "./cycle-issues";
|
||||
export * from "./global-issues";
|
||||
export * from "./module-issues";
|
||||
export * from "./project-inbox";
|
||||
export * from "./project-issues";
|
||||
export * from "./project-view-issues";
|
||||
export * from "./project-views";
|
||||
|
||||
21
web/components/headers/project-inbox.tsx
Normal file
21
web/components/headers/project-inbox.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import { useState } from "react";
|
||||
|
||||
// components
|
||||
import { CreateInboxIssueModal } from "components/inbox";
|
||||
// ui
|
||||
import { Button } from "@plane/ui";
|
||||
// icons
|
||||
import { Plus } from "lucide-react";
|
||||
|
||||
export const ProjectInboxHeader = () => {
|
||||
const [createIssueModal, setCreateIssueModal] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<CreateInboxIssueModal isOpen={createIssueModal} onClose={() => setCreateIssueModal(false)} />
|
||||
<Button onClick={() => setCreateIssueModal(true)} size="sm" prependIcon={<Plus />}>
|
||||
Add Issue
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -23,7 +23,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const { issueFilter: issueFilterStore, project: projectStore } = useMobxStore();
|
||||
const { issueFilter: issueFilterStore, project: projectStore, inbox: inboxStore } = useMobxStore();
|
||||
|
||||
const activeLayout = issueFilterStore.userDisplayFilters.layout;
|
||||
|
||||
@ -91,6 +91,8 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
|
||||
? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString())
|
||||
: undefined;
|
||||
|
||||
const inboxDetails = projectId ? inboxStore.inboxesList?.[projectId.toString()]?.[0] : undefined;
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProjectAnalyticsModal
|
||||
@ -127,18 +129,16 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
|
||||
}
|
||||
/>
|
||||
</FiltersDropdown>
|
||||
{/* TODO: add inbox redirection here */}
|
||||
{projectDetails?.inbox_view && (
|
||||
// <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxList?.[0]?.id}`}>
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/inbox/inboxId`}>
|
||||
{projectId && inboxStore.isInboxEnabled(projectId.toString()) && (
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxStore.getInboxId(projectId.toString())}`}>
|
||||
<a>
|
||||
<Button variant="neutral-primary" size="sm">
|
||||
<span>Inbox</span>
|
||||
{/* {inboxList && inboxList?.[0]?.pending_issue_count !== 0 && (
|
||||
<span className="absolute -top-1 -right-1 h-4 w-4 rounded-full text-custom-text-100 bg-custom-sidebar-background-80 border border-custom-sidebar-border-200">
|
||||
{inboxList?.[0]?.pending_issue_count}
|
||||
<Button variant="neutral-primary" size="sm" className="relative">
|
||||
Inbox
|
||||
{inboxDetails && (
|
||||
<span className="absolute -top-1.5 -right-1.5 h-4 w-4 rounded-full text-custom-text-100 bg-custom-sidebar-background-80 border border-custom-sidebar-border-200">
|
||||
{inboxDetails.pending_issue_count}
|
||||
</span>
|
||||
)} */}
|
||||
)}
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
@ -1,44 +1,31 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { mutate } from "swr";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import DatePicker from "react-datepicker";
|
||||
import { Popover } from "@headlessui/react";
|
||||
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// contexts
|
||||
import { useProjectMyMembership } from "contexts/project-member.context";
|
||||
// services
|
||||
import { InboxService } from "services/inbox.service";
|
||||
// hooks
|
||||
import useInboxView from "hooks/use-inbox-view";
|
||||
import useUserAuth from "hooks/use-user-auth";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import {
|
||||
AcceptIssueModal,
|
||||
DeclineIssueModal,
|
||||
DeleteIssueModal,
|
||||
DeleteInboxIssueModal,
|
||||
FiltersDropdown,
|
||||
SelectDuplicateInboxIssueModal,
|
||||
} from "components/inbox";
|
||||
// ui
|
||||
import { Button } from "@plane/ui";
|
||||
// icons
|
||||
import { InboxIcon, StackedLayersHorizontalIcon } from "components/icons";
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
ChevronUpIcon,
|
||||
CheckCircleIcon,
|
||||
ClockIcon,
|
||||
XCircleIcon,
|
||||
TrashIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import { CheckCircle2, ChevronDown, ChevronUp, Clock, FileStack, Inbox, Trash2, XCircle } from "lucide-react";
|
||||
// types
|
||||
import type { IInboxIssueDetail, TInboxStatus } from "types";
|
||||
// fetch-keys
|
||||
import { INBOX_ISSUE_DETAILS } from "constants/fetch-keys";
|
||||
import type { TInboxStatus } from "types";
|
||||
|
||||
const inboxService = new InboxService();
|
||||
|
||||
export const InboxActionHeader = () => {
|
||||
export const InboxActionsHeader = observer(() => {
|
||||
const [date, setDate] = useState(new Date());
|
||||
const [selectDuplicateIssue, setSelectDuplicateIssue] = useState(false);
|
||||
const [acceptIssueModal, setAcceptIssueModal] = useState(false);
|
||||
@ -48,42 +35,24 @@ export const InboxActionHeader = () => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, inboxId, inboxIssueId } = router.query;
|
||||
|
||||
const { user } = useUserAuth();
|
||||
const { inboxIssues: inboxIssuesStore, inboxIssueDetails: inboxIssueDetailsStore, user: userStore } = useMobxStore();
|
||||
|
||||
const user = userStore?.currentUser;
|
||||
const issuesList = inboxId ? inboxIssuesStore.inboxIssues[inboxId.toString()] : null;
|
||||
|
||||
const { memberRole } = useProjectMyMembership();
|
||||
const { issues: inboxIssues, mutate: mutateInboxIssues } = useInboxView();
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const markInboxStatus = async (data: TInboxStatus) => {
|
||||
if (!workspaceSlug || !projectId || !inboxId || !inboxIssueId) return;
|
||||
if (!workspaceSlug || !projectId || !inboxId || !inboxIssueId || !issuesList) return;
|
||||
|
||||
mutate<IInboxIssueDetail>(
|
||||
INBOX_ISSUE_DETAILS(inboxId as string, inboxIssueId as string),
|
||||
(prevData) => {
|
||||
if (!prevData) return prevData;
|
||||
|
||||
return {
|
||||
...prevData,
|
||||
issue_inbox: [{ ...prevData.issue_inbox[0], ...data }],
|
||||
};
|
||||
},
|
||||
false
|
||||
);
|
||||
mutateInboxIssues(
|
||||
(prevData: any) =>
|
||||
(prevData ?? []).map((i: any) =>
|
||||
i.bridge_id === inboxIssueId ? { ...i, issue_inbox: [{ ...i.issue_inbox[0], ...data }] } : i
|
||||
),
|
||||
false
|
||||
);
|
||||
|
||||
await inboxService
|
||||
.markInboxStatus(
|
||||
await inboxIssueDetailsStore
|
||||
.updateIssueStatus(
|
||||
workspaceSlug.toString(),
|
||||
projectId.toString(),
|
||||
inboxId.toString(),
|
||||
inboxIssues?.find((inboxIssue: any) => inboxIssue.bridge_id === inboxIssueId)?.bridge_id!,
|
||||
data,
|
||||
user
|
||||
issuesList.find((inboxIssue: any) => inboxIssue.issue_inbox[0].id === inboxIssueId)?.issue_inbox[0].id!,
|
||||
data
|
||||
)
|
||||
.catch(() =>
|
||||
setToastAlert({
|
||||
@ -91,15 +60,11 @@ export const InboxActionHeader = () => {
|
||||
title: "Error!",
|
||||
message: "Something went wrong while updating inbox status. Please try again.",
|
||||
})
|
||||
)
|
||||
.finally(() => {
|
||||
mutate(INBOX_ISSUE_DETAILS(inboxId as string, inboxIssueId as string));
|
||||
mutateInboxIssues();
|
||||
});
|
||||
);
|
||||
};
|
||||
|
||||
const issue = inboxIssues?.find((issue: any) => issue.bridge_id === inboxIssueId);
|
||||
const currentIssueIndex = inboxIssues?.findIndex((issue: any) => issue.bridge_id === inboxIssueId) ?? 0;
|
||||
const issue = issuesList?.find((issue) => issue.issue_inbox[0].id === inboxIssueId);
|
||||
const currentIssueIndex = issuesList?.findIndex((issue) => issue.issue_inbox[0].id === inboxIssueId) ?? 0;
|
||||
|
||||
useEffect(() => {
|
||||
if (!issue?.issue_inbox[0].snoozed_till) return;
|
||||
@ -117,48 +82,46 @@ export const InboxActionHeader = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<SelectDuplicateInboxIssueModal
|
||||
isOpen={selectDuplicateIssue}
|
||||
onClose={() => setSelectDuplicateIssue(false)}
|
||||
value={
|
||||
inboxIssues?.find((inboxIssue: any) => inboxIssue.bridge_id === inboxIssueId)?.issue_inbox[0].duplicate_to
|
||||
}
|
||||
onSubmit={(dupIssueId: string) => {
|
||||
markInboxStatus({
|
||||
status: 2,
|
||||
duplicate_to: dupIssueId,
|
||||
}).finally(() => setSelectDuplicateIssue(false));
|
||||
}}
|
||||
/>
|
||||
<AcceptIssueModal
|
||||
isOpen={acceptIssueModal}
|
||||
handleClose={() => setAcceptIssueModal(false)}
|
||||
data={inboxIssues?.find((i: any) => i.bridge_id === inboxIssueId)}
|
||||
onSubmit={async () => {
|
||||
await markInboxStatus({
|
||||
status: 1,
|
||||
}).finally(() => setAcceptIssueModal(false));
|
||||
}}
|
||||
/>
|
||||
<DeclineIssueModal
|
||||
isOpen={declineIssueModal}
|
||||
handleClose={() => setDeclineIssueModal(false)}
|
||||
data={inboxIssues?.find((i: any) => i.bridge_id === inboxIssueId)}
|
||||
onSubmit={async () => {
|
||||
await markInboxStatus({
|
||||
status: -1,
|
||||
}).finally(() => setDeclineIssueModal(false));
|
||||
}}
|
||||
/>
|
||||
<DeleteIssueModal
|
||||
isOpen={deleteIssueModal}
|
||||
handleClose={() => setDeleteIssueModal(false)}
|
||||
data={inboxIssues?.find((i: any) => i.bridge_id === inboxIssueId)}
|
||||
/>
|
||||
{issue && (
|
||||
<>
|
||||
<SelectDuplicateInboxIssueModal
|
||||
isOpen={selectDuplicateIssue}
|
||||
onClose={() => setSelectDuplicateIssue(false)}
|
||||
value={issue?.issue_inbox[0].duplicate_to}
|
||||
onSubmit={(dupIssueId) => {
|
||||
markInboxStatus({
|
||||
status: 2,
|
||||
duplicate_to: dupIssueId,
|
||||
}).finally(() => setSelectDuplicateIssue(false));
|
||||
}}
|
||||
/>
|
||||
<AcceptIssueModal
|
||||
data={issue}
|
||||
isOpen={acceptIssueModal}
|
||||
onClose={() => setAcceptIssueModal(false)}
|
||||
onSubmit={async () => {
|
||||
await markInboxStatus({
|
||||
status: 1,
|
||||
}).finally(() => setAcceptIssueModal(false));
|
||||
}}
|
||||
/>
|
||||
<DeclineIssueModal
|
||||
data={issue}
|
||||
isOpen={declineIssueModal}
|
||||
onClose={() => setDeclineIssueModal(false)}
|
||||
onSubmit={async () => {
|
||||
await markInboxStatus({
|
||||
status: -1,
|
||||
}).finally(() => setDeclineIssueModal(false));
|
||||
}}
|
||||
/>
|
||||
<DeleteInboxIssueModal data={issue} isOpen={deleteIssueModal} onClose={() => setDeleteIssueModal(false)} />
|
||||
</>
|
||||
)}
|
||||
<div className="grid grid-cols-4 border-b border-custom-border-200 divide-x divide-custom-border-200">
|
||||
<div className="col-span-1 flex justify-between p-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<InboxIcon className="h-4 w-4 text-custom-text-200" />
|
||||
<Inbox className="text-custom-text-200" size={16} strokeWidth={2} />
|
||||
<h3 className="font-medium">Inbox</h3>
|
||||
</div>
|
||||
<FiltersDropdown />
|
||||
@ -174,7 +137,7 @@ export const InboxActionHeader = () => {
|
||||
document.dispatchEvent(e);
|
||||
}}
|
||||
>
|
||||
<ChevronUpIcon className="h-3.5 w-3.5" />
|
||||
<ChevronUp size={14} strokeWidth={2} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@ -184,10 +147,10 @@ export const InboxActionHeader = () => {
|
||||
document.dispatchEvent(e);
|
||||
}}
|
||||
>
|
||||
<ChevronDownIcon className="h-3.5 w-3.5" />
|
||||
<ChevronDown size={14} strokeWidth={2} />
|
||||
</button>
|
||||
<div className="text-sm">
|
||||
{currentIssueIndex + 1}/{inboxIssues?.length ?? 0}
|
||||
{currentIssueIndex + 1}/{issuesList?.length ?? 0}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
@ -195,11 +158,7 @@ export const InboxActionHeader = () => {
|
||||
<div className="flex-shrink-0">
|
||||
<Popover className="relative">
|
||||
<Popover.Button as="button" type="button">
|
||||
<Button
|
||||
variant="neutral-primary"
|
||||
prependIcon={<ClockIcon className="text-custom-text-200" />}
|
||||
size="sm"
|
||||
>
|
||||
<Button variant="neutral-primary" prependIcon={<Clock size={14} strokeWidth={2} />} size="sm">
|
||||
Snooze
|
||||
</Button>
|
||||
</Popover.Button>
|
||||
@ -239,7 +198,7 @@ export const InboxActionHeader = () => {
|
||||
<Button
|
||||
variant="neutral-primary"
|
||||
size="sm"
|
||||
prependIcon={<StackedLayersHorizontalIcon className="text-custom-text-200" />}
|
||||
prependIcon={<FileStack size={14} strokeWidth={2} />}
|
||||
onClick={() => setSelectDuplicateIssue(true)}
|
||||
>
|
||||
Mark as duplicate
|
||||
@ -251,7 +210,7 @@ export const InboxActionHeader = () => {
|
||||
<Button
|
||||
variant="neutral-primary"
|
||||
size="sm"
|
||||
prependIcon={<CheckCircleIcon className="text-green-500" />}
|
||||
prependIcon={<CheckCircle2 className="text-green-500" size={14} strokeWidth={2} />}
|
||||
onClick={() => setAcceptIssueModal(true)}
|
||||
>
|
||||
Accept
|
||||
@ -263,7 +222,7 @@ export const InboxActionHeader = () => {
|
||||
<Button
|
||||
variant="neutral-primary"
|
||||
size="sm"
|
||||
prependIcon={<XCircleIcon className="text-red-500" />}
|
||||
prependIcon={<XCircle className="text-red-500" size={14} strokeWidth={2} />}
|
||||
onClick={() => setDeclineIssueModal(true)}
|
||||
>
|
||||
Decline
|
||||
@ -275,7 +234,7 @@ export const InboxActionHeader = () => {
|
||||
<Button
|
||||
variant="neutral-primary"
|
||||
size="sm"
|
||||
prependIcon={<TrashIcon className="text-red-500" />}
|
||||
prependIcon={<Trash2 className="text-red-500" size={14} strokeWidth={2} />}
|
||||
onClick={() => setDeleteIssueModal(true)}
|
||||
>
|
||||
Delete
|
||||
@ -288,4 +247,4 @@ export const InboxActionHeader = () => {
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
});
|
||||
@ -1,34 +1,53 @@
|
||||
// hooks
|
||||
import useInboxView from "hooks/use-inbox-view";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// ui
|
||||
import { MultiLevelDropdown } from "components/ui";
|
||||
// icons
|
||||
import { PriorityIcon } from "components/icons";
|
||||
// types
|
||||
import { IInboxFilterOptions } from "types";
|
||||
// constants
|
||||
import { PRIORITIES } from "constants/project";
|
||||
import { INBOX_STATUS } from "constants/inbox";
|
||||
|
||||
export const FiltersDropdown: React.FC = () => {
|
||||
const { filters, setFilters, filtersLength } = useInboxView();
|
||||
export const FiltersDropdown: React.FC = observer(() => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, inboxId } = router.query;
|
||||
|
||||
const { inboxFilters: inboxFiltersStore } = useMobxStore();
|
||||
|
||||
const filters = inboxId ? inboxFiltersStore.inboxFilters[inboxId.toString()]?.filters : undefined;
|
||||
|
||||
let filtersLength = 0;
|
||||
Object.keys(filters ?? {}).forEach((key) => {
|
||||
const filterKey = key as keyof IInboxFilterOptions;
|
||||
|
||||
if (filters?.[filterKey] && Array.isArray(filters[filterKey])) filtersLength += (filters[filterKey] ?? []).length;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<MultiLevelDropdown
|
||||
label="Filters"
|
||||
onSelect={(option) => {
|
||||
const key = option.key as keyof typeof filters;
|
||||
if (!workspaceSlug || !projectId || !inboxId) return;
|
||||
|
||||
const valueExists = (filters[key] as any[])?.includes(option.value);
|
||||
const key = option.key as keyof IInboxFilterOptions;
|
||||
const currentValue: any[] = filters?.[key] ?? [];
|
||||
|
||||
if (valueExists) {
|
||||
setFilters({
|
||||
[option.key]: ((filters[key] ?? []) as any[])?.filter((val) => val !== option.value),
|
||||
const valueExists = currentValue.includes(option.value);
|
||||
|
||||
if (valueExists)
|
||||
inboxFiltersStore.updateInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), {
|
||||
[option.key]: currentValue.filter((val) => val !== option.value),
|
||||
});
|
||||
} else {
|
||||
setFilters({
|
||||
[option.key]: [...((filters[key] ?? []) as any[]), option.value],
|
||||
else
|
||||
inboxFiltersStore.updateInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), {
|
||||
[option.key]: [...currentValue, option.value],
|
||||
});
|
||||
}
|
||||
}}
|
||||
direction="right"
|
||||
height="rg"
|
||||
@ -76,4 +95,4 @@ export const FiltersDropdown: React.FC = () => {
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
@ -1,34 +1,69 @@
|
||||
// hooks
|
||||
import useInboxView from "hooks/use-inbox-view";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// icons
|
||||
import { XMarkIcon } from "@heroicons/react/24/outline";
|
||||
import { PriorityIcon } from "components/icons";
|
||||
// helpers
|
||||
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
|
||||
// types
|
||||
import { TIssuePriorities } from "types";
|
||||
import { IInboxFilterOptions, TIssuePriorities } from "types";
|
||||
// constants
|
||||
import { INBOX_STATUS } from "constants/inbox";
|
||||
|
||||
export const InboxFiltersList = () => {
|
||||
const { filters, setFilters, clearAllFilters, filtersLength } = useInboxView();
|
||||
export const InboxFiltersList = observer(() => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, inboxId } = router.query;
|
||||
|
||||
if (filtersLength <= 0) return <></>;
|
||||
const { inboxFilters: inboxFiltersStore } = useMobxStore();
|
||||
|
||||
const filters = inboxId ? inboxFiltersStore.inboxFilters[inboxId.toString()]?.filters : undefined;
|
||||
|
||||
const handleUpdateFilter = (filter: Partial<IInboxFilterOptions>) => {
|
||||
if (!workspaceSlug || !projectId || !inboxId) return;
|
||||
|
||||
inboxFiltersStore.updateInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), filter);
|
||||
};
|
||||
|
||||
const handleClearAllFilters = () => {
|
||||
if (!workspaceSlug || !projectId || !inboxId) return;
|
||||
|
||||
const newFilters: IInboxFilterOptions = {};
|
||||
Object.keys(filters ?? {}).forEach((key) => {
|
||||
newFilters[key as keyof IInboxFilterOptions] = null;
|
||||
});
|
||||
|
||||
inboxFiltersStore.updateInboxFilters(
|
||||
workspaceSlug.toString(),
|
||||
projectId.toString(),
|
||||
inboxId.toString(),
|
||||
newFilters
|
||||
);
|
||||
};
|
||||
|
||||
let filtersLength = 0;
|
||||
Object.keys(filters ?? {}).forEach((key) => {
|
||||
const filterKey = key as keyof IInboxFilterOptions;
|
||||
|
||||
if (filters?.[filterKey] && Array.isArray(filters[filterKey])) filtersLength += (filters[filterKey] ?? []).length;
|
||||
});
|
||||
|
||||
if (!filters || filtersLength <= 0) return null;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 flex-wrap text-[0.65rem] p-3">
|
||||
{Object.keys(filters).map((key) => {
|
||||
const filterKey = key as keyof typeof filters;
|
||||
const filterKey = key as keyof IInboxFilterOptions;
|
||||
|
||||
if (filters[filterKey] !== null)
|
||||
if (filters[filterKey])
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
className="flex items-center gap-x-2 rounded-full border border-custom-border-200 bg-custom-background-80 px-2 py-1"
|
||||
>
|
||||
<span className="capitalize text-custom-text-200">
|
||||
{replaceUnderscoreIfSnakeCase(key)}:
|
||||
</span>
|
||||
<span className="capitalize text-custom-text-200">{replaceUnderscoreIfSnakeCase(key)}:</span>
|
||||
{filters[filterKey] === null || (filters[filterKey]?.length ?? 0) <= 0 ? (
|
||||
<span className="inline-flex items-center px-2 py-0.5 font-medium">None</span>
|
||||
) : (
|
||||
@ -57,7 +92,7 @@ export const InboxFiltersList = () => {
|
||||
type="button"
|
||||
className="cursor-pointer"
|
||||
onClick={() =>
|
||||
setFilters({
|
||||
handleUpdateFilter({
|
||||
priority: filters.priority?.filter((p) => p !== priority),
|
||||
})
|
||||
}
|
||||
@ -69,7 +104,7 @@ export const InboxFiltersList = () => {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setFilters({
|
||||
handleUpdateFilter({
|
||||
priority: null,
|
||||
})
|
||||
}
|
||||
@ -89,7 +124,7 @@ export const InboxFiltersList = () => {
|
||||
type="button"
|
||||
className="cursor-pointer"
|
||||
onClick={() =>
|
||||
setFilters({
|
||||
handleUpdateFilter({
|
||||
inbox_status: filters.inbox_status?.filter((p) => p !== status),
|
||||
})
|
||||
}
|
||||
@ -101,7 +136,7 @@ export const InboxFiltersList = () => {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setFilters({
|
||||
handleUpdateFilter({
|
||||
inbox_status: null,
|
||||
})
|
||||
}
|
||||
@ -119,7 +154,7 @@ export const InboxFiltersList = () => {
|
||||
})}
|
||||
<button
|
||||
type="button"
|
||||
onClick={clearAllFilters}
|
||||
onClick={handleClearAllFilters}
|
||||
className="flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-80 px-3 py-1.5 text-custom-text-200 hover:text-custom-text-100"
|
||||
>
|
||||
<span>Clear all</span>
|
||||
@ -127,4 +162,4 @@ export const InboxFiltersList = () => {
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
export * from "./modals";
|
||||
export * from "./action-headers";
|
||||
export * from "./actions-header";
|
||||
export * from "./filters-dropdown";
|
||||
export * from "./filters-list";
|
||||
export * from "./issue-activity";
|
||||
|
||||
@ -5,18 +5,11 @@ import Link from "next/link";
|
||||
import { Tooltip } from "@plane/ui";
|
||||
// icons
|
||||
import { PriorityIcon } from "components/icons";
|
||||
import {
|
||||
CalendarDaysIcon,
|
||||
CheckCircleIcon,
|
||||
ClockIcon,
|
||||
DocumentDuplicateIcon,
|
||||
ExclamationTriangleIcon,
|
||||
XCircleIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import { AlertTriangle, Calendar, CheckCircle2, Clock, Copy, XCircle } from "lucide-react";
|
||||
// helpers
|
||||
import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
|
||||
// types
|
||||
import type { IInboxIssue } from "types";
|
||||
import { IInboxIssue } from "types";
|
||||
// constants
|
||||
import { INBOX_STATUS } from "constants/inbox";
|
||||
|
||||
@ -34,7 +27,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
|
||||
const issueStatus = issue.issue_inbox[0].status;
|
||||
|
||||
return (
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}?inboxIssueId=${issue.bridge_id}`}>
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}?inboxIssueId=${issue.issue_inbox[0].id}`}>
|
||||
<a>
|
||||
<div
|
||||
id={issue.id}
|
||||
@ -71,7 +64,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
|
||||
tooltipContent={`${renderShortDateWithYearFormat(issue.created_at ?? "")}`}
|
||||
>
|
||||
<div className="flex items-center gap-1 rounded border border-custom-border-200 shadow-sm text-xs px-2 py-[0.19rem] text-custom-text-200">
|
||||
<CalendarDaysIcon className="h-3.5 w-3.5" />
|
||||
<Calendar size={12} strokeWidth={1.5} />
|
||||
<span>{renderShortDateWithYearFormat(issue.created_at ?? "")}</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
@ -85,29 +78,29 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
|
||||
>
|
||||
{issueStatus === -2 ? (
|
||||
<>
|
||||
<ExclamationTriangleIcon className="h-3.5 w-3.5" />
|
||||
<AlertTriangle size={14} strokeWidth={2} />
|
||||
<span>Pending</span>
|
||||
</>
|
||||
) : issueStatus === -1 ? (
|
||||
<>
|
||||
<XCircleIcon className="h-3.5 w-3.5" />
|
||||
<XCircle size={14} strokeWidth={2} />
|
||||
<span>Declined</span>
|
||||
</>
|
||||
) : issueStatus === 0 ? (
|
||||
<>
|
||||
<ClockIcon className="h-3.5 w-3.5" />
|
||||
<Clock size={14} strokeWidth={2} />
|
||||
<span>
|
||||
{new Date(issue.issue_inbox[0].snoozed_till ?? "") < new Date() ? "Snoozed date passed" : "Snoozed"}
|
||||
</span>
|
||||
</>
|
||||
) : issueStatus === 1 ? (
|
||||
<>
|
||||
<CheckCircleIcon className="h-3.5 w-3.5" />
|
||||
<CheckCircle2 size={14} strokeWidth={2} />
|
||||
<span>Accepted</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<DocumentDuplicateIcon className="h-3.5 w-3.5" />
|
||||
<Copy size={14} strokeWidth={2} />
|
||||
<span>Duplicate</span>
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -1,31 +1,35 @@
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
|
||||
// hooks
|
||||
import useInboxView from "hooks/use-inbox-view";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// components
|
||||
import { InboxIssueCard, InboxFiltersList } from "components/inbox";
|
||||
// ui
|
||||
import { Loader } from "@plane/ui";
|
||||
|
||||
export const IssuesListSidebar = () => {
|
||||
export const InboxIssuesListSidebar = observer(() => {
|
||||
const router = useRouter();
|
||||
const { inboxIssueId } = router.query;
|
||||
const { inboxId, inboxIssueId } = router.query;
|
||||
|
||||
const { issues: inboxIssues, filtersLength } = useInboxView();
|
||||
const { inboxIssues: inboxIssuesStore } = useMobxStore();
|
||||
|
||||
const issuesList = inboxId ? inboxIssuesStore.inboxIssues[inboxId.toString()] : undefined;
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col overflow-hidden">
|
||||
<InboxFiltersList />
|
||||
{inboxIssues ? (
|
||||
inboxIssues.length > 0 ? (
|
||||
{issuesList ? (
|
||||
issuesList.length > 0 ? (
|
||||
<div className="divide-y divide-custom-border-200 overflow-auto h-full">
|
||||
{inboxIssues.map((issue: any) => (
|
||||
<InboxIssueCard key={issue.id} active={issue.bridge_id === inboxIssueId} issue={issue} />
|
||||
{issuesList.map((issue) => (
|
||||
<InboxIssueCard key={issue.id} active={issue.issue_inbox[0].id === inboxIssueId} issue={issue} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full p-4 grid place-items-center text-center text-sm text-custom-text-200">
|
||||
{filtersLength > 0 && "No issues found for the selected filters. Try changing the filters."}
|
||||
{/* TODO: add filtersLength logic here */}
|
||||
{/* {filtersLength > 0 && "No issues found for the selected filters. Try changing the filters."} */}
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
@ -38,4 +42,4 @@ export const IssuesListSidebar = () => {
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
@ -1,71 +1,52 @@
|
||||
import { useCallback, useEffect } from "react";
|
||||
|
||||
import Router, { useRouter } from "next/router";
|
||||
|
||||
import useSWR, { mutate } from "swr";
|
||||
|
||||
// react hook form
|
||||
import { observer } from "mobx-react-lite";
|
||||
import useSWR from "swr";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { AlertTriangle, CheckCircle2, Clock, Copy, ExternalLink, Inbox, XCircle } from "lucide-react";
|
||||
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// contexts
|
||||
import { useProjectMyMembership } from "contexts/project-member.context";
|
||||
// services
|
||||
import { InboxService } from "services/inbox.service";
|
||||
// hooks
|
||||
import useInboxView from "hooks/use-inbox-view";
|
||||
import useUserAuth from "hooks/use-user-auth";
|
||||
// components
|
||||
import { IssueDescriptionForm, IssueDetailsSidebar, IssueReaction } from "components/issues";
|
||||
import { InboxIssueActivity } from "components/inbox";
|
||||
// ui
|
||||
import { Loader } from "@plane/ui";
|
||||
// icons
|
||||
import {
|
||||
ArrowTopRightOnSquareIcon,
|
||||
CheckCircleIcon,
|
||||
ClockIcon,
|
||||
DocumentDuplicateIcon,
|
||||
ExclamationTriangleIcon,
|
||||
InboxIcon,
|
||||
XCircleIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
// helpers
|
||||
import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
|
||||
// types
|
||||
import type { IInboxIssue, IIssue, IUser } from "types";
|
||||
// fetch-keys
|
||||
import { INBOX_ISSUES, INBOX_ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
|
||||
import { IInboxIssue, IIssue } from "types";
|
||||
|
||||
const defaultValues: Partial<IInboxIssue> = {
|
||||
name: "",
|
||||
description_html: "",
|
||||
estimate_point: null,
|
||||
assignees_list: [],
|
||||
priority: "low",
|
||||
target_date: new Date().toString(),
|
||||
labels_list: [],
|
||||
};
|
||||
|
||||
const inboxService = new InboxService();
|
||||
|
||||
export const InboxMainContent: React.FC = () => {
|
||||
export const InboxMainContent: React.FC = observer(() => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, inboxId, inboxIssueId } = router.query;
|
||||
|
||||
const { user } = useUserAuth();
|
||||
const { inboxIssues: inboxIssuesStore, inboxIssueDetails: inboxIssueDetailsStore, user: userStore } = useMobxStore();
|
||||
|
||||
const user = userStore.currentUser;
|
||||
|
||||
const { memberRole } = useProjectMyMembership();
|
||||
const { params, issues: inboxIssues } = useInboxView();
|
||||
|
||||
const { reset, control, watch } = useForm<IIssue>({
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
const { data: issueDetails, mutate: mutateIssueDetails } = useSWR(
|
||||
workspaceSlug && projectId && inboxId && inboxIssueId
|
||||
? INBOX_ISSUE_DETAILS(inboxId.toString(), inboxIssueId.toString())
|
||||
: null,
|
||||
useSWR(
|
||||
workspaceSlug && projectId && inboxId && inboxIssueId ? `INBOX_ISSUE_DETAILS_${inboxIssueId.toString()}` : null,
|
||||
workspaceSlug && projectId && inboxId && inboxIssueId
|
||||
? () =>
|
||||
inboxService.getInboxIssueById(
|
||||
inboxIssueDetailsStore.fetchIssueDetails(
|
||||
workspaceSlug.toString(),
|
||||
projectId.toString(),
|
||||
inboxId.toString(),
|
||||
@ -74,59 +55,29 @@ export const InboxMainContent: React.FC = () => {
|
||||
: null
|
||||
);
|
||||
|
||||
const issuesList = inboxId ? inboxIssuesStore.inboxIssues[inboxId.toString()] : undefined;
|
||||
const issueDetails = inboxIssueId ? inboxIssueDetailsStore.issueDetails[inboxIssueId.toString()] : undefined;
|
||||
|
||||
const submitChanges = useCallback(
|
||||
async (formData: Partial<IInboxIssue>) => {
|
||||
if (!workspaceSlug || !projectId || !inboxIssueId || !inboxId || !issueDetails) return;
|
||||
|
||||
mutateIssueDetails((prevData: any) => {
|
||||
if (!prevData) return prevData;
|
||||
|
||||
return {
|
||||
...prevData,
|
||||
...formData,
|
||||
};
|
||||
}, false);
|
||||
mutate<IInboxIssue[]>(
|
||||
INBOX_ISSUES(inboxId.toString(), params),
|
||||
(prevData) =>
|
||||
(prevData ?? []).map((i) => {
|
||||
if (i.bridge_id === inboxIssueId) {
|
||||
return {
|
||||
...i,
|
||||
...formData,
|
||||
};
|
||||
}
|
||||
|
||||
return i;
|
||||
}),
|
||||
false
|
||||
await inboxIssueDetailsStore.updateIssue(
|
||||
workspaceSlug.toString(),
|
||||
projectId.toString(),
|
||||
inboxId.toString(),
|
||||
issueDetails.issue_inbox[0].id,
|
||||
formData
|
||||
);
|
||||
|
||||
const payload = { issue: { ...formData } };
|
||||
|
||||
await inboxService
|
||||
.patchInboxIssue(
|
||||
workspaceSlug.toString(),
|
||||
projectId.toString(),
|
||||
inboxId.toString(),
|
||||
issueDetails.issue_inbox[0].id,
|
||||
payload,
|
||||
user as IUser
|
||||
)
|
||||
.then(() => {
|
||||
mutateIssueDetails();
|
||||
mutate(INBOX_ISSUES(inboxId.toString(), params));
|
||||
mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
|
||||
});
|
||||
},
|
||||
[workspaceSlug, inboxIssueId, projectId, mutateIssueDetails, inboxId, user, issueDetails, params]
|
||||
[workspaceSlug, inboxIssueId, projectId, inboxId, issueDetails, inboxIssueDetailsStore]
|
||||
);
|
||||
|
||||
const onKeyDown = useCallback(
|
||||
(e: KeyboardEvent) => {
|
||||
if (!inboxIssues || !inboxIssueId) return;
|
||||
if (!issuesList || !inboxIssueId) return;
|
||||
|
||||
const currentIssueIndex = inboxIssues.findIndex((issue: any) => issue.bridge_id === inboxIssueId);
|
||||
const currentIssueIndex = issuesList.findIndex((issue) => issue.issue_inbox[0].id === inboxIssueId);
|
||||
|
||||
switch (e.key) {
|
||||
case "ArrowUp":
|
||||
@ -135,8 +86,8 @@ export const InboxMainContent: React.FC = () => {
|
||||
query: {
|
||||
inboxIssueId:
|
||||
currentIssueIndex === 0
|
||||
? inboxIssues[inboxIssues.length - 1].bridge_id
|
||||
: inboxIssues[currentIssueIndex - 1].bridge_id,
|
||||
? issuesList[issuesList.length - 1].issue_inbox[0].id
|
||||
: issuesList[currentIssueIndex - 1].issue_inbox[0].id,
|
||||
},
|
||||
});
|
||||
break;
|
||||
@ -145,9 +96,9 @@ export const InboxMainContent: React.FC = () => {
|
||||
pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`,
|
||||
query: {
|
||||
inboxIssueId:
|
||||
currentIssueIndex === inboxIssues.length - 1
|
||||
? inboxIssues[0].bridge_id
|
||||
: inboxIssues[currentIssueIndex + 1].bridge_id,
|
||||
currentIssueIndex === issuesList.length - 1
|
||||
? issuesList[0].issue_inbox[0].id
|
||||
: issuesList[currentIssueIndex + 1].issue_inbox[0].id,
|
||||
},
|
||||
});
|
||||
break;
|
||||
@ -155,7 +106,7 @@ export const InboxMainContent: React.FC = () => {
|
||||
break;
|
||||
}
|
||||
},
|
||||
[workspaceSlug, projectId, inboxIssueId, inboxId, inboxIssues]
|
||||
[workspaceSlug, projectId, inboxIssueId, inboxId, issuesList]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@ -183,16 +134,13 @@ export const InboxMainContent: React.FC = () => {
|
||||
<div className="h-full p-4 grid place-items-center text-custom-text-200">
|
||||
<div className="grid h-full place-items-center">
|
||||
<div className="my-5 flex flex-col items-center gap-4">
|
||||
<InboxIcon height={60} width={60} />
|
||||
{inboxIssues && inboxIssues.length > 0 ? (
|
||||
<Inbox size={60} strokeWidth={1.5} />
|
||||
{issuesList && issuesList.length > 0 ? (
|
||||
<span className="text-custom-text-200">
|
||||
{inboxIssues?.length} issues found. Select an issue from the sidebar to view its details.
|
||||
{issuesList?.length} issues found. Select an issue from the sidebar to view its details.
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-custom-text-200">
|
||||
No issues found. Use <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre> shortcut
|
||||
to create a new issue
|
||||
</span>
|
||||
<span className="text-custom-text-200">No issues found</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -223,17 +171,17 @@ export const InboxMainContent: React.FC = () => {
|
||||
>
|
||||
{issueStatus === -2 ? (
|
||||
<>
|
||||
<ExclamationTriangleIcon className="h-5 w-5" />
|
||||
<AlertTriangle size={18} strokeWidth={2} />
|
||||
<p>This issue is still pending.</p>
|
||||
</>
|
||||
) : issueStatus === -1 ? (
|
||||
<>
|
||||
<XCircleIcon className="h-5 w-5" />
|
||||
<XCircle size={18} strokeWidth={2} />
|
||||
<p>This issue has been declined.</p>
|
||||
</>
|
||||
) : issueStatus === 0 ? (
|
||||
<>
|
||||
<ClockIcon className="h-5 w-5" />
|
||||
<Clock size={18} strokeWidth={2} />
|
||||
{new Date(issueDetails.issue_inbox[0].snoozed_till ?? "") < new Date() ? (
|
||||
<p>
|
||||
This issue was snoozed till{" "}
|
||||
@ -248,12 +196,12 @@ export const InboxMainContent: React.FC = () => {
|
||||
</>
|
||||
) : issueStatus === 1 ? (
|
||||
<>
|
||||
<CheckCircleIcon className="h-5 w-5" />
|
||||
<CheckCircle2 size={18} strokeWidth={2} />
|
||||
<p>This issue has been accepted.</p>
|
||||
</>
|
||||
) : issueStatus === 2 ? (
|
||||
<>
|
||||
<DocumentDuplicateIcon className="h-5 w-5" />
|
||||
<Copy size={18} strokeWidth={2} />
|
||||
<p className="flex items-center gap-1">
|
||||
This issue has been marked as a duplicate of
|
||||
<a
|
||||
@ -262,7 +210,7 @@ export const InboxMainContent: React.FC = () => {
|
||||
rel="noreferrer"
|
||||
className="underline flex items-center gap-2"
|
||||
>
|
||||
this issue <ArrowTopRightOnSquareIcon className="h-3 w-3" />
|
||||
this issue <ExternalLink size={12} strokeWidth={2} />
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
@ -286,7 +234,7 @@ export const InboxMainContent: React.FC = () => {
|
||||
<InboxIssueActivity issueDetails={issueDetails} />
|
||||
</div>
|
||||
|
||||
<div className="basis-1/3 space-y-5 border-custom-border-200 p-5">
|
||||
<div className="basis-1/3 space-y-5 border-custom-border-200 py-5">
|
||||
<IssueDetailsSidebar
|
||||
control={control}
|
||||
issueDetail={issueDetails}
|
||||
@ -314,4 +262,4 @@ export const InboxMainContent: React.FC = () => {
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
// headless ui
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
|
||||
// icons
|
||||
import { CheckCircleIcon } from "@heroicons/react/24/outline";
|
||||
// ui
|
||||
@ -10,18 +9,18 @@ import { Button } from "@plane/ui";
|
||||
import type { IInboxIssue } from "types";
|
||||
|
||||
type Props = {
|
||||
data: IInboxIssue;
|
||||
isOpen: boolean;
|
||||
handleClose: () => void;
|
||||
data: IInboxIssue | undefined;
|
||||
onClose: () => void;
|
||||
onSubmit: () => Promise<void>;
|
||||
};
|
||||
|
||||
export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, onSubmit }) => {
|
||||
export const AcceptIssueModal: React.FC<Props> = ({ isOpen, onClose, data, onSubmit }) => {
|
||||
const [isAccepting, setIsAccepting] = useState(false);
|
||||
|
||||
const onClose = () => {
|
||||
const handleClose = () => {
|
||||
setIsAccepting(false);
|
||||
handleClose();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleAccept = () => {
|
||||
@ -32,7 +31,7 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, o
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={React.Fragment}>
|
||||
<Dialog as="div" className="relative z-20" onClose={onClose}>
|
||||
<Dialog as="div" className="relative z-20" onClose={handleClose}>
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
@ -76,7 +75,7 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, o
|
||||
</p>
|
||||
</span>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="neutral-primary" onClick={onClose}>
|
||||
<Button variant="neutral-primary" onClick={handleClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="primary" onClick={handleAccept} loading={isAccepting}>
|
||||
|
||||
188
web/components/inbox/modals/create-issue-modal.tsx
Normal file
188
web/components/inbox/modals/create-issue-modal.tsx
Normal file
@ -0,0 +1,188 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { RichTextEditorWithRef } from "@plane/rich-text-editor";
|
||||
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// services
|
||||
import { FileService } from "services/file.service";
|
||||
// components
|
||||
import { IssuePrioritySelect } from "components/issues/select";
|
||||
// ui
|
||||
import { Button, Input, ToggleSwitch } from "@plane/ui";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
const defaultValues: Partial<IIssue> = {
|
||||
project: "",
|
||||
name: "",
|
||||
description_html: "<p></p>",
|
||||
parent: null,
|
||||
priority: "none",
|
||||
};
|
||||
|
||||
// services
|
||||
const fileService = new FileService();
|
||||
|
||||
export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
|
||||
const { isOpen, onClose } = props;
|
||||
|
||||
// states
|
||||
const [createMore, setCreateMore] = useState(false);
|
||||
|
||||
const editorRef = useRef<any>(null);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, inboxId } = router.query;
|
||||
|
||||
const { inboxIssueDetails: inboxIssueDetailsStore } = useMobxStore();
|
||||
|
||||
const {
|
||||
control,
|
||||
formState: { errors, isSubmitting },
|
||||
handleSubmit,
|
||||
reset,
|
||||
} = useForm({ defaultValues });
|
||||
|
||||
const handleClose = () => {
|
||||
onClose();
|
||||
reset(defaultValues);
|
||||
};
|
||||
|
||||
const handleFormSubmit = async (formData: Partial<IIssue>) => {
|
||||
if (!workspaceSlug || !projectId || !inboxId) return;
|
||||
|
||||
await inboxIssueDetailsStore
|
||||
.createIssue(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), formData)
|
||||
.then((res) => {
|
||||
if (!createMore) {
|
||||
router.push(`/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}?inboxIssueId=${res.issue_inbox[0].id}`);
|
||||
handleClose();
|
||||
} else reset(defaultValues);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={React.Fragment}>
|
||||
<Dialog as="div" className="relative z-20" onClose={onClose}>
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-10 overflow-y-auto">
|
||||
<div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
|
||||
<form onSubmit={handleSubmit(handleFormSubmit)}>
|
||||
<div className="space-y-5">
|
||||
<h3 className="text-xl font-semibold leading-6 text-custom-text-100">Create Inbox Issue</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="mt-2 space-y-3">
|
||||
<div>
|
||||
<Controller
|
||||
control={control}
|
||||
name="name"
|
||||
rules={{
|
||||
required: "Title is required",
|
||||
maxLength: {
|
||||
value: 255,
|
||||
message: "Title should be less than 255 characters",
|
||||
},
|
||||
}}
|
||||
render={({ field: { value, onChange, ref } }) => (
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
ref={ref}
|
||||
hasError={Boolean(errors.name)}
|
||||
placeholder="Title"
|
||||
className="resize-none text-xl w-full"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Controller
|
||||
name="description_html"
|
||||
control={control}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<RichTextEditorWithRef
|
||||
uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
|
||||
deleteFile={fileService.deleteImage}
|
||||
ref={editorRef}
|
||||
debouncedUpdatesEnabled={false}
|
||||
value={!value || value === "" ? "<p></p>" : value}
|
||||
customClassName="min-h-[150px]"
|
||||
onChange={(description, description_html: string) => {
|
||||
onChange(description_html);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Controller
|
||||
control={control}
|
||||
name="priority"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<IssuePrioritySelect value={value ?? "none"} onChange={onChange} />
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-200 px-5 pt-5">
|
||||
<div
|
||||
className="flex cursor-pointer items-center gap-1"
|
||||
onClick={() => setCreateMore((prevData) => !prevData)}
|
||||
>
|
||||
<span className="text-xs">Create more</span>
|
||||
<ToggleSwitch value={createMore} onChange={() => {}} size="md" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="neutral-primary" onClick={() => handleClose()}>
|
||||
Discard
|
||||
</Button>
|
||||
<Button variant="primary" type="submit" loading={isSubmitting}>
|
||||
{isSubmitting ? "Adding Issue..." : "Add Issue"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
});
|
||||
@ -1,7 +1,6 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
// headless ui
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
|
||||
// icons
|
||||
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
|
||||
// ui
|
||||
@ -10,18 +9,18 @@ import { Button } from "@plane/ui";
|
||||
import type { IInboxIssue } from "types";
|
||||
|
||||
type Props = {
|
||||
data: IInboxIssue;
|
||||
isOpen: boolean;
|
||||
handleClose: () => void;
|
||||
data: IInboxIssue | undefined;
|
||||
onClose: () => void;
|
||||
onSubmit: () => Promise<void>;
|
||||
};
|
||||
|
||||
export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, onSubmit }) => {
|
||||
export const DeclineIssueModal: React.FC<Props> = ({ isOpen, onClose, data, onSubmit }) => {
|
||||
const [isDeclining, setIsDeclining] = useState(false);
|
||||
|
||||
const onClose = () => {
|
||||
const handleClose = () => {
|
||||
setIsDeclining(false);
|
||||
handleClose();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleDecline = () => {
|
||||
@ -32,7 +31,7 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data,
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={React.Fragment}>
|
||||
<Dialog as="div" className="relative z-20" onClose={onClose}>
|
||||
<Dialog as="div" className="relative z-20" onClose={handleClose}>
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
@ -76,7 +75,7 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data,
|
||||
</p>
|
||||
</span>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="neutral-primary" onClick={onClose}>
|
||||
<Button variant="neutral-primary" onClick={handleClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="danger" onClick={handleDecline} loading={isDeclining}>
|
||||
|
||||
@ -1,69 +1,48 @@
|
||||
import React, { useState } 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 { InboxService } from "services/inbox.service";
|
||||
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
import useInboxView from "hooks/use-inbox-view";
|
||||
import useUser from "hooks/use-user";
|
||||
// icons
|
||||
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
|
||||
// ui
|
||||
import { Button } from "@plane/ui";
|
||||
// types
|
||||
import type { IInboxIssue } from "types";
|
||||
// fetch-keys
|
||||
import { INBOX_ISSUES } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
data: IInboxIssue;
|
||||
isOpen: boolean;
|
||||
handleClose: () => void;
|
||||
data: IInboxIssue | undefined;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
const inboxService = new InboxService();
|
||||
|
||||
export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data }) => {
|
||||
export const DeleteInboxIssueModal: React.FC<Props> = observer(({ isOpen, onClose, data }) => {
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, inboxId } = router.query;
|
||||
|
||||
const { user } = useUser();
|
||||
const { setToastAlert } = useToast();
|
||||
const { params } = useInboxView();
|
||||
const { inboxIssueDetails: inboxIssueDetailsStore } = useMobxStore();
|
||||
|
||||
const onClose = () => {
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const handleClose = () => {
|
||||
setIsDeleting(false);
|
||||
handleClose();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
if (!workspaceSlug || !projectId || !inboxId || !data) return;
|
||||
if (!workspaceSlug || !projectId || !inboxId) return;
|
||||
|
||||
setIsDeleting(true);
|
||||
|
||||
inboxService
|
||||
.deleteInboxIssue(
|
||||
workspaceSlug.toString(),
|
||||
projectId.toString(),
|
||||
inboxId.toString(),
|
||||
data.bridge_id.toString(),
|
||||
user
|
||||
)
|
||||
inboxIssueDetailsStore
|
||||
.deleteIssue(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), data.issue_inbox[0].id)
|
||||
.then(() => {
|
||||
mutate<IInboxIssue[]>(
|
||||
INBOX_ISSUES(inboxId.toString(), params),
|
||||
(prevData) => (prevData ?? []).filter((i) => i.id !== data.id),
|
||||
false
|
||||
);
|
||||
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
@ -75,7 +54,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
|
||||
pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`,
|
||||
});
|
||||
|
||||
onClose();
|
||||
handleClose();
|
||||
})
|
||||
.catch(() =>
|
||||
setToastAlert({
|
||||
@ -148,4 +127,4 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
export * from "./accept-issue-modal";
|
||||
export * from "./create-issue-modal";
|
||||
export * from "./decline-issue-modal";
|
||||
export * from "./delete-issue-modal";
|
||||
export * from "./select-duplicate";
|
||||
|
||||
@ -33,14 +33,6 @@ import { RichTextEditorWithRef } from "@plane/rich-text-editor";
|
||||
const defaultValues: Partial<IIssue> = {
|
||||
project: "",
|
||||
name: "",
|
||||
description: {
|
||||
type: "doc",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
},
|
||||
],
|
||||
},
|
||||
description_html: "<p></p>",
|
||||
estimate_point: null,
|
||||
state: "",
|
||||
|
||||
@ -5,12 +5,10 @@ import { Dialog, Transition } from "@headlessui/react";
|
||||
// services
|
||||
import { ModuleService } from "services/module.service";
|
||||
import { IssueService, IssueDraftService } from "services/issue";
|
||||
import { InboxService } from "services/inbox.service";
|
||||
// hooks
|
||||
import useUser from "hooks/use-user";
|
||||
import useIssuesView from "hooks/use-issues-view";
|
||||
import useToast from "hooks/use-toast";
|
||||
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";
|
||||
@ -29,12 +27,9 @@ import {
|
||||
CYCLE_DETAILS,
|
||||
MODULE_DETAILS,
|
||||
VIEW_ISSUES,
|
||||
INBOX_ISSUES,
|
||||
PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS,
|
||||
GLOBAL_VIEW_ISSUES,
|
||||
} from "constants/fetch-keys";
|
||||
// constants
|
||||
import { INBOX_ISSUE_SOURCE } from "constants/inbox";
|
||||
|
||||
export interface IssuesModalProps {
|
||||
data?: IIssue | null;
|
||||
@ -60,7 +55,6 @@ export interface IssuesModalProps {
|
||||
}
|
||||
|
||||
const moduleService = new ModuleService();
|
||||
const inboxService = new InboxService();
|
||||
const issueService = new IssueService();
|
||||
const issueDraftService = new IssueDraftService();
|
||||
|
||||
@ -81,19 +75,16 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
|
||||
const [prePopulateData, setPreloadedData] = useState<Partial<IIssue>>({});
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, cycleId, moduleId, viewId, globalViewId, inboxId } = router.query;
|
||||
const { workspaceSlug, projectId, cycleId, moduleId, viewId, globalViewId } = router.query;
|
||||
|
||||
const { displayFilters, params } = useIssuesView();
|
||||
const { ...viewGanttParams } = params;
|
||||
const { params: inboxParams } = useInboxView();
|
||||
|
||||
const { user } = useUser();
|
||||
const { projects } = useProjects();
|
||||
|
||||
const { groupedIssues, mutateMyIssues } = useMyIssues(workspaceSlug?.toString());
|
||||
|
||||
const globalViewParams = {};
|
||||
|
||||
const { setValue: setValueInLocalStorage, clearValue: clearLocalStorageValue } = useLocalStorage<any>(
|
||||
"draftedIssue",
|
||||
{}
|
||||
@ -235,43 +226,6 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
|
||||
});
|
||||
};
|
||||
|
||||
const addIssueToInbox = async (formData: Partial<IIssue>) => {
|
||||
if (!workspaceSlug || !activeProject || !inboxId) return;
|
||||
|
||||
const payload = {
|
||||
issue: {
|
||||
name: formData.name,
|
||||
description: formData.description,
|
||||
description_html: formData.description_html,
|
||||
priority: formData.priority,
|
||||
},
|
||||
source: INBOX_ISSUE_SOURCE,
|
||||
};
|
||||
|
||||
await inboxService
|
||||
.createInboxIssue(workspaceSlug.toString(), activeProject.toString(), inboxId.toString(), payload, user)
|
||||
.then((res) => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
message: "Issue created successfully.",
|
||||
});
|
||||
|
||||
router.push(
|
||||
`/${workspaceSlug}/projects/${activeProject}/inbox/${inboxId}?inboxIssueId=${res.issue_inbox[0].id}`
|
||||
);
|
||||
|
||||
mutate(INBOX_ISSUES(inboxId.toString(), inboxParams));
|
||||
})
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Issue could not be created. Please try again.",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const workspaceIssuesPath = [
|
||||
{
|
||||
params: {
|
||||
@ -315,45 +269,43 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
|
||||
const createIssue = async (payload: Partial<IIssue>) => {
|
||||
if (!workspaceSlug || !activeProject) return;
|
||||
|
||||
if (inboxId) await addIssueToInbox(payload);
|
||||
else
|
||||
await issueService
|
||||
.createIssues(workspaceSlug as string, activeProject ?? "", payload, user)
|
||||
.then(async (res) => {
|
||||
mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
|
||||
if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res.id, payload.cycle);
|
||||
if (payload.module && payload.module !== "") await addIssueToModule(res.id, payload.module);
|
||||
await issueService
|
||||
.createIssues(workspaceSlug as string, activeProject ?? "", payload, user)
|
||||
.then(async (res) => {
|
||||
mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
|
||||
if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res.id, payload.cycle);
|
||||
if (payload.module && payload.module !== "") await addIssueToModule(res.id, payload.module);
|
||||
|
||||
if (displayFilters.layout === "gantt_chart")
|
||||
mutate(ganttFetchKey, {
|
||||
start_target_date: true,
|
||||
order_by: "sort_order",
|
||||
});
|
||||
if (groupedIssues) mutateMyIssues();
|
||||
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
message: "Issue created successfully.",
|
||||
if (displayFilters.layout === "gantt_chart")
|
||||
mutate(ganttFetchKey, {
|
||||
start_target_date: true,
|
||||
order_by: "sort_order",
|
||||
});
|
||||
if (groupedIssues) mutateMyIssues();
|
||||
|
||||
if (payload.assignees_list?.some((assignee) => assignee === user?.id))
|
||||
mutate(USER_ISSUE(workspaceSlug as string));
|
||||
|
||||
if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
|
||||
|
||||
if (globalViewId) mutate(GLOBAL_VIEW_ISSUES(globalViewId.toString()));
|
||||
|
||||
if (currentWorkspaceIssuePath) mutate(GLOBAL_VIEW_ISSUES(workspaceSlug.toString()));
|
||||
})
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Issue could not be created. Please try again.",
|
||||
});
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
message: "Issue created successfully.",
|
||||
});
|
||||
|
||||
if (payload.assignees_list?.some((assignee) => assignee === user?.id))
|
||||
mutate(USER_ISSUE(workspaceSlug as string));
|
||||
|
||||
if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
|
||||
|
||||
if (globalViewId) mutate(GLOBAL_VIEW_ISSUES(globalViewId.toString()));
|
||||
|
||||
if (currentWorkspaceIssuePath) mutate(GLOBAL_VIEW_ISSUES(workspaceSlug.toString()));
|
||||
})
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Issue could not be created. Please try again.",
|
||||
});
|
||||
});
|
||||
|
||||
if (!createMore) onFormSubmitClose();
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
// react-poppper
|
||||
// react-popper
|
||||
import { usePopper } from "react-popper";
|
||||
// headless ui
|
||||
import { Combobox } from "@headlessui/react";
|
||||
@ -58,9 +58,7 @@ export const CustomSearchSelect = ({
|
||||
});
|
||||
|
||||
const filteredOptions =
|
||||
query === ""
|
||||
? options
|
||||
: options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
|
||||
query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
|
||||
|
||||
const props: any = {
|
||||
value,
|
||||
@ -105,9 +103,7 @@ export const CustomSearchSelect = ({
|
||||
} ${buttonClassName}`}
|
||||
>
|
||||
{label}
|
||||
{!noChevron && !disabled && (
|
||||
<ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
|
||||
)}
|
||||
{!noChevron && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
|
||||
</button>
|
||||
</Combobox.Button>
|
||||
)}
|
||||
@ -164,14 +160,10 @@ export const CustomSearchSelect = ({
|
||||
active || selected ? "opacity-100" : "opacity-0"
|
||||
}`}
|
||||
>
|
||||
<CheckIcon
|
||||
className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
|
||||
/>
|
||||
<CheckIcon className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
|
||||
</div>
|
||||
) : (
|
||||
<CheckIcon
|
||||
className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
|
||||
/>
|
||||
<CheckIcon className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -55,9 +55,7 @@ const CustomSelect = ({
|
||||
ref={setReferenceElement}
|
||||
type="button"
|
||||
className={`flex items-center justify-between gap-1 w-full text-xs ${
|
||||
disabled
|
||||
? "cursor-not-allowed text-custom-text-200"
|
||||
: "cursor-pointer hover:bg-custom-background-80"
|
||||
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
|
||||
} ${customButtonClassName}`}
|
||||
>
|
||||
{customButton}
|
||||
@ -71,15 +69,11 @@ const CustomSelect = ({
|
||||
className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${
|
||||
input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
|
||||
} ${
|
||||
disabled
|
||||
? "cursor-not-allowed text-custom-text-200"
|
||||
: "cursor-pointer hover:bg-custom-background-80"
|
||||
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
|
||||
} ${buttonClassName}`}
|
||||
>
|
||||
{label}
|
||||
{!noChevron && !disabled && (
|
||||
<ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
|
||||
)}
|
||||
{!noChevron && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
|
||||
</button>
|
||||
</Listbox.Button>
|
||||
)}
|
||||
@ -118,9 +112,9 @@ const Option: React.FC<OptionProps> = ({ children, value, className }) => (
|
||||
<Listbox.Option
|
||||
value={value}
|
||||
className={({ active, selected }) =>
|
||||
`cursor-pointer select-none truncate rounded px-1 py-1.5 ${
|
||||
active || selected ? "bg-custom-background-80" : ""
|
||||
} ${selected ? "text-custom-text-100" : "text-custom-text-200"} ${className}`
|
||||
`cursor-pointer select-none truncate rounded px-1 py-1.5 ${active || selected ? "bg-custom-background-80" : ""} ${
|
||||
selected ? "text-custom-text-100" : "text-custom-text-200"
|
||||
} ${className}`
|
||||
}
|
||||
>
|
||||
{({ selected }) => (
|
||||
|
||||
@ -4,8 +4,6 @@ import useSWR from "swr";
|
||||
// services
|
||||
import { ProjectStateService, ProjectService } from "services/project";
|
||||
import { IssueLabelService } from "services/issue";
|
||||
// components
|
||||
import { DateFilterModal } from "components/core";
|
||||
// ui
|
||||
import { Avatar, MultiLevelDropdown } from "components/ui";
|
||||
// icons
|
||||
@ -248,16 +246,6 @@ export const SelectFilters: React.FC<Props> = ({ filters, onSelect, direction =
|
||||
];
|
||||
return (
|
||||
<>
|
||||
{/* {isDateFilterModalOpen && (
|
||||
<DateFilterModal
|
||||
title={dateFilterType.title}
|
||||
field={dateFilterType.type}
|
||||
filters={filters as IIssueFilterOptions}
|
||||
handleClose={() => setIsDateFilterModalOpen(false)}
|
||||
isOpen={isDateFilterModalOpen}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
)} */}
|
||||
<MultiLevelDropdown
|
||||
label="Filters"
|
||||
onSelect={onSelect}
|
||||
|
||||
182
web/components/views/signin.tsx
Normal file
182
web/components/views/signin.tsx
Normal file
@ -0,0 +1,182 @@
|
||||
import useSWR from "swr";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import Image from "next/image";
|
||||
import { useRouter } from "next/router";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// services
|
||||
import { AuthService } from "services/auth.service";
|
||||
import { AppConfigService } from "services/app_config.service";
|
||||
// components
|
||||
import {
|
||||
GoogleLoginButton,
|
||||
GithubLoginButton,
|
||||
EmailCodeForm,
|
||||
EmailPasswordForm,
|
||||
EmailPasswordFormValues,
|
||||
} from "components/account";
|
||||
// ui
|
||||
import { Spinner } from "@plane/ui";
|
||||
// images
|
||||
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
|
||||
import { IUserSettings } from "types";
|
||||
|
||||
const appConfigService = new AppConfigService();
|
||||
const authService = new AuthService();
|
||||
|
||||
export const SignInView = observer(() => {
|
||||
const { user: userStore } = useMobxStore();
|
||||
// router
|
||||
const router = useRouter();
|
||||
// toast
|
||||
const { setToastAlert } = useToast();
|
||||
// fetch app config
|
||||
const { data } = useSWR("APP_CONFIG", () => appConfigService.envConfig());
|
||||
// fetch user info
|
||||
const { data: user, error } = useSWR("USER_INFO", () => userStore.fetchCurrentUser());
|
||||
// computed
|
||||
const enableEmailPassword =
|
||||
data?.email_password_login || !(data?.email_password_login || data?.magic_login || data?.google || data?.github);
|
||||
|
||||
const handleLoginRedirection = () =>
|
||||
userStore.fetchCurrentUserSettings().then((userSettings: IUserSettings) => {
|
||||
const workspaceSlug =
|
||||
userSettings?.workspace?.last_workspace_slug || userSettings?.workspace?.fallback_workspace_slug;
|
||||
router.push(`/${workspaceSlug}`);
|
||||
});
|
||||
|
||||
const handleGoogleSignIn = async ({ clientId, credential }: any) => {
|
||||
try {
|
||||
if (clientId && credential) {
|
||||
const socialAuthPayload = {
|
||||
medium: "google",
|
||||
credential,
|
||||
clientId,
|
||||
};
|
||||
const response = await authService.socialAuth(socialAuthPayload);
|
||||
if (response) {
|
||||
handleLoginRedirection();
|
||||
}
|
||||
} else {
|
||||
throw Error("Cant find credentials");
|
||||
}
|
||||
} catch (err: any) {
|
||||
setToastAlert({
|
||||
title: "Error signing in!",
|
||||
type: "error",
|
||||
message: err?.error || "Something went wrong. Please try again later or contact the support team.",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleGitHubSignIn = async (credential: string) => {
|
||||
try {
|
||||
if (data && data.github && credential) {
|
||||
const socialAuthPayload = {
|
||||
medium: "github",
|
||||
credential,
|
||||
clientId: data.github,
|
||||
};
|
||||
const response = await authService.socialAuth(socialAuthPayload);
|
||||
if (response) {
|
||||
handleLoginRedirection();
|
||||
}
|
||||
} else {
|
||||
throw Error("Cant find credentials");
|
||||
}
|
||||
} catch (err: any) {
|
||||
setToastAlert({
|
||||
title: "Error signing in!",
|
||||
type: "error",
|
||||
message: err?.error || "Something went wrong. Please try again later or contact the support team.",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handlePasswordSignIn = async (formData: EmailPasswordFormValues) => {
|
||||
await authService
|
||||
.emailLogin(formData)
|
||||
.then((response) => {
|
||||
if (response) {
|
||||
handleLoginRedirection();
|
||||
}
|
||||
})
|
||||
.catch((err) =>
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: err?.error || "Something went wrong. Please try again later or contact the support team.",
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const handleEmailCodeSignIn = async (response: any) => {
|
||||
try {
|
||||
if (response) {
|
||||
handleLoginRedirection();
|
||||
}
|
||||
} catch (err: any) {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: err?.error || "Something went wrong. Please try again later or contact the support team.",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{!user && !error ? (
|
||||
<div className="grid place-items-center h-screen">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<>
|
||||
<div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
|
||||
<div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
|
||||
<div className="grid place-items-center bg-custom-background-100">
|
||||
<div className="h-[30px] w-[30px]">
|
||||
<Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
<div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
|
||||
<div>
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
|
||||
Sign in to Plane
|
||||
</h1>
|
||||
<>
|
||||
{enableEmailPassword && <EmailPasswordForm onSubmit={handlePasswordSignIn} />}
|
||||
{data?.magic_login && (
|
||||
<div className="flex flex-col divide-y divide-custom-border-200">
|
||||
<div className="pb-7">
|
||||
<EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
|
||||
{data?.google && <GoogleLoginButton clientId={data?.google} handleSignIn={handleGoogleSignIn} />}
|
||||
{data?.github && <GithubLoginButton clientId={data?.github} handleSignIn={handleGitHubSignIn} />}
|
||||
</div>
|
||||
</>
|
||||
<p className="pt-16 text-custom-text-200 text-sm text-center">
|
||||
By signing up, you agree to the{" "}
|
||||
<a
|
||||
href="https://plane.so/terms-and-conditions"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-medium underline"
|
||||
>
|
||||
Terms & Conditions
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
@ -210,19 +210,6 @@ export const VIEW_ISSUES = (viewId: string, params: any) => {
|
||||
return `VIEW_ISSUES_${viewId.toUpperCase()}_${paramsKey.toUpperCase()}`;
|
||||
};
|
||||
|
||||
// inbox
|
||||
export const INBOX_LIST = (projectId: string) => `INBOX_LIST_${projectId.toUpperCase()}`;
|
||||
export const INBOX_DETAILS = (inboxId: string) => `INBOX_DETAILS_${inboxId.toUpperCase()}`;
|
||||
export const INBOX_ISSUES = (inboxId: string, params?: any) => {
|
||||
if (!params) return `INBOX_ISSUES_${inboxId.toUpperCase()}`;
|
||||
|
||||
const paramsKey = inboxParamsToKey(params);
|
||||
|
||||
return `INBOX_ISSUES_${inboxId.toUpperCase()}_${paramsKey.toUpperCase()}`;
|
||||
};
|
||||
export const INBOX_ISSUE_DETAILS = (inboxId: string, issueId: string) =>
|
||||
`INBOX_ISSUE_DETAILS_${inboxId.toUpperCase()}_${issueId.toUpperCase()}`;
|
||||
|
||||
// Issues
|
||||
export const ISSUE_DETAILS = (issueId: string) => `ISSUE_DETAILS_${issueId.toUpperCase()}`;
|
||||
export const SUB_ISSUES = (issueId: string) => `SUB_ISSUES_${issueId.toUpperCase()}`;
|
||||
|
||||
@ -1,177 +0,0 @@
|
||||
import { createContext, useCallback, useEffect, useReducer } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// components
|
||||
import ToastAlert from "components/toast-alert";
|
||||
// services
|
||||
import { InboxService } from "services/inbox.service";
|
||||
// types
|
||||
import { IInboxFilterOptions } from "types";
|
||||
// fetch-keys
|
||||
import { INBOX_DETAILS } from "constants/fetch-keys";
|
||||
|
||||
export const inboxViewContext = createContext<ContextType>({} as ContextType);
|
||||
const inboxServices = new InboxService();
|
||||
|
||||
type InboxViewProps = {
|
||||
filters: IInboxFilterOptions;
|
||||
};
|
||||
|
||||
type ReducerActionType = {
|
||||
type: "REHYDRATE_THEME" | "SET_FILTERS";
|
||||
payload?: Partial<InboxViewProps>;
|
||||
};
|
||||
|
||||
type ContextType = InboxViewProps & {
|
||||
setFilters: (filters: Partial<IInboxFilterOptions>) => void;
|
||||
clearAllFilters: () => void;
|
||||
};
|
||||
|
||||
type StateType = {
|
||||
filters: IInboxFilterOptions;
|
||||
};
|
||||
type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
|
||||
|
||||
export const initialState: StateType = {
|
||||
filters: {
|
||||
priority: null,
|
||||
inbox_status: null,
|
||||
},
|
||||
};
|
||||
|
||||
export const reducer: ReducerFunctionType = (state, action) => {
|
||||
const { type, payload } = action;
|
||||
|
||||
switch (type) {
|
||||
case "REHYDRATE_THEME": {
|
||||
return { ...initialState, ...payload };
|
||||
}
|
||||
|
||||
case "SET_FILTERS": {
|
||||
const newState = {
|
||||
...state,
|
||||
filters: {
|
||||
...state.filters,
|
||||
...payload?.filters,
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
...state,
|
||||
...newState,
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const saveDataToServer = async (workspaceSlug: string, projectId: string, inboxId: string, state: any) => {
|
||||
await inboxServices.patchInbox(workspaceSlug, projectId, inboxId, {
|
||||
view_props: state,
|
||||
});
|
||||
};
|
||||
|
||||
export const InboxViewContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
const [state, dispatch] = useReducer(reducer, initialState);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, inboxId } = router.query;
|
||||
|
||||
const { data: inboxDetails, mutate: mutateInboxDetails } = useSWR(
|
||||
workspaceSlug && projectId && inboxId ? INBOX_DETAILS(inboxId.toString()) : null,
|
||||
workspaceSlug && projectId && inboxId
|
||||
? () => inboxServices.getInboxById(workspaceSlug.toString(), projectId.toString(), inboxId.toString())
|
||||
: null
|
||||
);
|
||||
|
||||
const setFilters = useCallback(
|
||||
(property: Partial<IInboxFilterOptions>) => {
|
||||
Object.keys(property).forEach((key) => {
|
||||
if (property[key as keyof typeof property]?.length === 0) property[key as keyof typeof property] = null;
|
||||
});
|
||||
|
||||
dispatch({
|
||||
type: "SET_FILTERS",
|
||||
payload: {
|
||||
filters: {
|
||||
...state.filters,
|
||||
...property,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!workspaceSlug || !projectId || !inboxId) return;
|
||||
|
||||
const newViewProps = {
|
||||
...state,
|
||||
filters: {
|
||||
...state.filters,
|
||||
...property,
|
||||
},
|
||||
};
|
||||
|
||||
mutateInboxDetails((prevData: any) => {
|
||||
if (!prevData) return prevData;
|
||||
|
||||
return {
|
||||
...prevData,
|
||||
view_props: newViewProps,
|
||||
};
|
||||
}, false);
|
||||
|
||||
saveDataToServer(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), newViewProps);
|
||||
},
|
||||
[workspaceSlug, projectId, inboxId, mutateInboxDetails, state]
|
||||
);
|
||||
|
||||
const clearAllFilters = useCallback(() => {
|
||||
dispatch({
|
||||
type: "SET_FILTERS",
|
||||
payload: {
|
||||
filters: { ...initialState.filters },
|
||||
},
|
||||
});
|
||||
|
||||
if (!workspaceSlug || !projectId || !inboxId) return;
|
||||
|
||||
const newViewProps = {
|
||||
...state,
|
||||
filters: { ...initialState.filters },
|
||||
};
|
||||
|
||||
mutateInboxDetails((prevData: any) => {
|
||||
if (!prevData) return prevData;
|
||||
|
||||
return {
|
||||
...prevData,
|
||||
view_props: newViewProps,
|
||||
};
|
||||
}, false);
|
||||
|
||||
saveDataToServer(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), newViewProps);
|
||||
}, [inboxId, mutateInboxDetails, projectId, state, workspaceSlug]);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch({
|
||||
type: "REHYDRATE_THEME",
|
||||
payload: {
|
||||
...inboxDetails?.view_props,
|
||||
},
|
||||
});
|
||||
}, [inboxDetails]);
|
||||
|
||||
return (
|
||||
<inboxViewContext.Provider
|
||||
value={{
|
||||
filters: state.filters,
|
||||
setFilters,
|
||||
clearAllFilters,
|
||||
}}
|
||||
>
|
||||
<ToastAlert />
|
||||
{children}
|
||||
</inboxViewContext.Provider>
|
||||
);
|
||||
};
|
||||
@ -1,54 +0,0 @@
|
||||
import { useContext } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// contexts
|
||||
import { inboxViewContext } from "contexts/inbox-view-context";
|
||||
// services
|
||||
import { InboxService } from "services/inbox.service";
|
||||
// types
|
||||
import { IInboxQueryParams } from "types";
|
||||
// fetch-keys
|
||||
import { INBOX_ISSUES } from "constants/fetch-keys";
|
||||
|
||||
const inboxService = new InboxService();
|
||||
|
||||
const useInboxView = () => {
|
||||
const { filters, setFilters, clearAllFilters } = useContext(inboxViewContext);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, inboxId } = router.query;
|
||||
|
||||
const params: IInboxQueryParams = {
|
||||
priority: filters?.priority ? filters?.priority.join(",") : null,
|
||||
inbox_status: filters?.inbox_status ? filters?.inbox_status.join(",") : null,
|
||||
};
|
||||
|
||||
const { data: inboxIssues, mutate: mutateInboxIssues } = useSWR(
|
||||
workspaceSlug && projectId && inboxId && params ? INBOX_ISSUES(inboxId.toString(), params) : null,
|
||||
workspaceSlug && projectId && inboxId && params
|
||||
? () => inboxService.getInboxIssues(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), params)
|
||||
: null
|
||||
);
|
||||
|
||||
let filtersLength = 0;
|
||||
Object.keys(filters ?? {}).forEach((key) => {
|
||||
const filterKey = key as keyof typeof filters;
|
||||
|
||||
if (filters[filterKey] && Array.isArray(filters[filterKey])) filtersLength += (filters[filterKey] ?? []).length;
|
||||
});
|
||||
|
||||
return {
|
||||
filters,
|
||||
setFilters,
|
||||
clearAllFilters,
|
||||
filtersLength,
|
||||
params,
|
||||
issues: inboxIssues,
|
||||
mutate: mutateInboxIssues,
|
||||
} as const;
|
||||
};
|
||||
|
||||
export default useInboxView;
|
||||
@ -14,12 +14,13 @@ const MobxStoreInit = () => {
|
||||
module: moduleStore,
|
||||
globalViews: globalViewsStore,
|
||||
projectViews: projectViewsStore,
|
||||
inbox: inboxStore,
|
||||
} = useMobxStore();
|
||||
// theme
|
||||
const { setTheme } = useTheme();
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, moduleId, globalViewId, viewId } = router.query;
|
||||
const { workspaceSlug, projectId, moduleId, globalViewId, viewId, inboxId } = router.query;
|
||||
|
||||
useEffect(() => {
|
||||
// sidebar collapsed toggle
|
||||
@ -51,17 +52,20 @@ const MobxStoreInit = () => {
|
||||
if (moduleId) moduleStore.setModuleId(moduleId.toString());
|
||||
if (globalViewId) globalViewsStore.setGlobalViewId(globalViewId.toString());
|
||||
if (viewId) projectViewsStore.setViewId(viewId.toString());
|
||||
if (inboxId) inboxStore.setInboxId(inboxId.toString());
|
||||
}, [
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
moduleId,
|
||||
globalViewId,
|
||||
viewId,
|
||||
inboxId,
|
||||
workspaceStore,
|
||||
projectStore,
|
||||
moduleStore,
|
||||
globalViewsStore,
|
||||
projectViewsStore,
|
||||
inboxStore,
|
||||
]);
|
||||
|
||||
return <></>;
|
||||
|
||||
@ -1,64 +1,61 @@
|
||||
import { useRouter } from "next/router";
|
||||
import useSWR from "swr";
|
||||
|
||||
// hooks
|
||||
import useProjectDetails from "hooks/use-project-details";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// layouts
|
||||
import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
|
||||
// contexts
|
||||
import { InboxViewContextProvider } from "contexts/inbox-view-context";
|
||||
// components
|
||||
import { InboxActionHeader, InboxMainContent, IssuesListSidebar } from "components/inbox";
|
||||
import { InboxActionsHeader, InboxMainContent, InboxIssuesListSidebar } from "components/inbox";
|
||||
import { ProjectInboxHeader } from "components/headers";
|
||||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
// ui
|
||||
import { Button } from "@plane/ui";
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
// icons
|
||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import type { NextPage } from "next";
|
||||
|
||||
const ProjectInbox: NextPage = () => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
const { workspaceSlug, projectId, inboxId } = router.query;
|
||||
|
||||
const { projectDetails } = useProjectDetails();
|
||||
const { inboxIssues: inboxIssuesStore, inboxFilters: inboxFiltersStore, project: projectStore } = useMobxStore();
|
||||
|
||||
const projectDetails =
|
||||
workspaceSlug && projectId
|
||||
? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString())
|
||||
: undefined;
|
||||
|
||||
useSWR(
|
||||
workspaceSlug && projectId && inboxId ? `REVALIDATE_INBOX_${inboxId.toString()}` : null,
|
||||
workspaceSlug && projectId && inboxId
|
||||
? async () => {
|
||||
await inboxFiltersStore.fetchInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString());
|
||||
await inboxIssuesStore.fetchInboxIssues(workspaceSlug.toString(), projectId.toString(), inboxId.toString());
|
||||
}
|
||||
: null
|
||||
);
|
||||
|
||||
return (
|
||||
<InboxViewContextProvider>
|
||||
<ProjectAuthorizationWrapper
|
||||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
|
||||
<BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Inbox`} />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
right={
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="primary"
|
||||
prependIcon={<PlusIcon />}
|
||||
onClick={() => {
|
||||
const e = new KeyboardEvent("keydown", { key: "c" });
|
||||
document.dispatchEvent(e);
|
||||
}}
|
||||
>
|
||||
Add Issue
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="flex flex-col h-full">
|
||||
<InboxActionHeader />
|
||||
<div className="grid grid-cols-4 flex-1 divide-x divide-custom-border-200 overflow-hidden">
|
||||
<IssuesListSidebar />
|
||||
<div className="col-span-3 h-full overflow-auto">
|
||||
<InboxMainContent />
|
||||
</div>
|
||||
<ProjectAuthorizationWrapper
|
||||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
|
||||
<BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "", 32)} Inbox`} />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
right={<ProjectInboxHeader />}
|
||||
>
|
||||
<div className="flex flex-col h-full">
|
||||
<InboxActionsHeader />
|
||||
<div className="grid grid-cols-4 flex-1 divide-x divide-custom-border-200 overflow-hidden">
|
||||
<InboxIssuesListSidebar />
|
||||
<div className="col-span-3 h-full overflow-auto">
|
||||
<InboxMainContent />
|
||||
</div>
|
||||
</div>
|
||||
</ProjectAuthorizationWrapper>
|
||||
</InboxViewContextProvider>
|
||||
</div>
|
||||
</ProjectAuthorizationWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@ const ProjectIssues: NextPage = () => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const { issueFilter: issueFilterStore, project: projectStore } = useMobxStore();
|
||||
const { issueFilter: issueFilterStore, project: projectStore, inbox: inboxStore } = useMobxStore();
|
||||
|
||||
const { data: projectDetails } = useSWR(
|
||||
workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
|
||||
@ -63,6 +63,21 @@ const ProjectIssues: NextPage = () => {
|
||||
: null
|
||||
);
|
||||
|
||||
useSWR(
|
||||
workspaceSlug && projectId ? "REVALIDATE_PROJECT_DETAILS" : null,
|
||||
workspaceSlug && projectId
|
||||
? () => projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString())
|
||||
: null
|
||||
);
|
||||
|
||||
useSWR(
|
||||
workspaceSlug && projectId ? "REVALIDATE_INBOXES_LIST" : null,
|
||||
workspaceSlug && projectId
|
||||
? () => inboxStore.fetchInboxesList(workspaceSlug.toString(), projectId.toString())
|
||||
: null
|
||||
);
|
||||
// TODO: remove all the above fetching logic to project auth wrapper
|
||||
|
||||
return (
|
||||
<ProjectAuthorizationWrapper
|
||||
breadcrumbs={
|
||||
|
||||
@ -3,7 +3,7 @@ import { TrackEventService } from "services/track_event.service";
|
||||
// helpers
|
||||
import { API_BASE_URL } from "helpers/common.helper";
|
||||
// types
|
||||
import type { IInboxIssue, IInbox, TInboxStatus, IInboxIssueDetail, IUser, IInboxQueryParams } from "types";
|
||||
import type { IInboxIssue, IInbox, TInboxStatus, IUser, IInboxQueryParams } from "types";
|
||||
|
||||
const trackEventService = new TrackEventService();
|
||||
|
||||
@ -56,7 +56,7 @@ export class InboxService extends APIService {
|
||||
projectId: string,
|
||||
inboxId: string,
|
||||
inboxIssueId: string
|
||||
): Promise<IInboxIssueDetail> {
|
||||
): Promise<IInboxIssue> {
|
||||
return this.get(
|
||||
`/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/${inboxIssueId}/`
|
||||
)
|
||||
@ -77,7 +77,7 @@ export class InboxService extends APIService {
|
||||
`/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/${inboxIssueId}/`
|
||||
)
|
||||
.then((response) => {
|
||||
trackEventService.trackInboxEvent(response?.data, "INBOX_ISSUE_DELETE", user as IUser);
|
||||
if (user) trackEventService.trackInboxEvent(response?.data, "INBOX_ISSUE_DELETE", user);
|
||||
return response?.data;
|
||||
})
|
||||
.catch((error) => {
|
||||
@ -120,14 +120,14 @@ export class InboxService extends APIService {
|
||||
inboxId: string,
|
||||
inboxIssueId: string,
|
||||
data: { issue: Partial<IInboxIssue> },
|
||||
user: IUser
|
||||
): Promise<IInboxIssue> {
|
||||
user: IUser | undefined
|
||||
): Promise<any> {
|
||||
return this.patch(
|
||||
`/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/${inboxIssueId}/`,
|
||||
data
|
||||
)
|
||||
.then((response) => {
|
||||
trackEventService.trackInboxEvent(response?.data, "INBOX_ISSUE_UPDATE", user);
|
||||
if (user) trackEventService.trackInboxEvent(response?.data, "INBOX_ISSUE_UPDATE", user);
|
||||
return response?.data;
|
||||
})
|
||||
.catch((error) => {
|
||||
@ -141,10 +141,10 @@ export class InboxService extends APIService {
|
||||
inboxId: string,
|
||||
data: any,
|
||||
user: IUser | undefined
|
||||
): Promise<IInboxIssueDetail> {
|
||||
): Promise<IInboxIssue> {
|
||||
return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/`, data)
|
||||
.then((response) => {
|
||||
trackEventService.trackInboxEvent(response?.data, "INBOX_ISSUE_CREATE", user as IUser);
|
||||
if (user) trackEventService.trackInboxEvent(response?.data, "INBOX_ISSUE_CREATE", user);
|
||||
return response?.data;
|
||||
})
|
||||
.catch((error) => {
|
||||
|
||||
154
web/store/inbox/inbox.store.ts
Normal file
154
web/store/inbox/inbox.store.ts
Normal file
@ -0,0 +1,154 @@
|
||||
import { observable, action, makeObservable, runInAction } from "mobx";
|
||||
// types
|
||||
import { RootStore } from "../root";
|
||||
// services
|
||||
import { InboxService } from "services/inbox.service";
|
||||
// types
|
||||
import { IInbox } from "types";
|
||||
|
||||
export interface IInboxStore {
|
||||
// states
|
||||
loader: boolean;
|
||||
error: any | null;
|
||||
|
||||
// observables
|
||||
inboxId: string | null;
|
||||
|
||||
inboxesList: {
|
||||
[projectId: string]: IInbox[];
|
||||
};
|
||||
inboxDetails: {
|
||||
[inboxId: string]: IInbox;
|
||||
};
|
||||
|
||||
// actions
|
||||
setInboxId: (inboxId: string) => void;
|
||||
|
||||
isInboxEnabled: (projectId: string) => boolean;
|
||||
getInboxId: (projectId: string) => string | null;
|
||||
|
||||
fetchInboxesList: (workspaceSlug: string, projectId: string) => Promise<IInbox[]>;
|
||||
fetchInboxDetails: (workspaceSlug: string, projectId: string, inboxId: string) => Promise<IInbox>;
|
||||
}
|
||||
|
||||
export class InboxStore implements IInboxStore {
|
||||
// states
|
||||
loader: boolean = false;
|
||||
error: any | null = null;
|
||||
|
||||
// observables
|
||||
inboxId: string | null = null;
|
||||
|
||||
inboxesList: {
|
||||
[projectId: string]: IInbox[];
|
||||
} = {};
|
||||
inboxDetails: {
|
||||
[inboxId: string]: IInbox;
|
||||
} = {};
|
||||
|
||||
// root store
|
||||
rootStore;
|
||||
|
||||
// services
|
||||
inboxService;
|
||||
|
||||
constructor(_rootStore: RootStore) {
|
||||
makeObservable(this, {
|
||||
// states
|
||||
loader: observable.ref,
|
||||
error: observable.ref,
|
||||
|
||||
// observables
|
||||
inboxId: observable.ref,
|
||||
|
||||
inboxesList: observable.ref,
|
||||
inboxDetails: observable.ref,
|
||||
|
||||
// actions
|
||||
setInboxId: action,
|
||||
|
||||
fetchInboxesList: action,
|
||||
isInboxEnabled: action,
|
||||
getInboxId: action,
|
||||
});
|
||||
|
||||
this.rootStore = _rootStore;
|
||||
this.inboxService = new InboxService();
|
||||
}
|
||||
|
||||
isInboxEnabled = (projectId: string) => {
|
||||
const projectDetails = this.rootStore.project.project_details[projectId];
|
||||
|
||||
if (!projectDetails) return false;
|
||||
|
||||
return projectDetails.inbox_view;
|
||||
};
|
||||
|
||||
getInboxId = (projectId: string) => {
|
||||
const projectDetails = this.rootStore.project.project_details[projectId];
|
||||
|
||||
if (!projectDetails || !projectDetails.inbox_view) return null;
|
||||
|
||||
return this.inboxesList[projectId]?.[0]?.id ?? null;
|
||||
};
|
||||
|
||||
setInboxId = (inboxId: string) => {
|
||||
runInAction(() => {
|
||||
this.inboxId = inboxId;
|
||||
});
|
||||
};
|
||||
|
||||
fetchInboxesList = async (workspaceSlug: string, projectId: string) => {
|
||||
try {
|
||||
runInAction(() => {
|
||||
this.loader = true;
|
||||
});
|
||||
|
||||
const inboxesResponse = await this.inboxService.getInboxes(workspaceSlug, projectId);
|
||||
|
||||
runInAction(() => {
|
||||
this.loader = false;
|
||||
this.inboxesList = {
|
||||
...this.inboxesList,
|
||||
[projectId]: inboxesResponse,
|
||||
};
|
||||
});
|
||||
|
||||
return inboxesResponse;
|
||||
} catch (error) {
|
||||
runInAction(() => {
|
||||
this.loader = false;
|
||||
this.error = error;
|
||||
});
|
||||
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
fetchInboxDetails = async (workspaceSlug: string, projectId: string, inboxId: string) => {
|
||||
try {
|
||||
runInAction(() => {
|
||||
this.loader = true;
|
||||
});
|
||||
|
||||
const inboxDetailsResponse = await this.inboxService.getInboxById(workspaceSlug, projectId, inboxId);
|
||||
|
||||
runInAction(() => {
|
||||
this.loader = false;
|
||||
this.inboxDetails = {
|
||||
...this.inboxDetails,
|
||||
[inboxId]: inboxDetailsResponse,
|
||||
};
|
||||
});
|
||||
|
||||
return inboxDetailsResponse;
|
||||
} catch (error) {
|
||||
runInAction(() => {
|
||||
this.loader = false;
|
||||
this.error = error;
|
||||
});
|
||||
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
}
|
||||
146
web/store/inbox/inbox_filters.store.ts
Normal file
146
web/store/inbox/inbox_filters.store.ts
Normal file
@ -0,0 +1,146 @@
|
||||
import { observable, action, makeObservable, runInAction, computed } from "mobx";
|
||||
// types
|
||||
import { RootStore } from "../root";
|
||||
// services
|
||||
import { InboxService } from "services/inbox.service";
|
||||
// types
|
||||
import { IInbox, IInboxFilterOptions, IInboxQueryParams } from "types";
|
||||
|
||||
export interface IInboxFiltersStore {
|
||||
// states
|
||||
loader: boolean;
|
||||
error: any | null;
|
||||
|
||||
// observables
|
||||
inboxFilters: {
|
||||
[inboxId: string]: { filters: IInboxFilterOptions };
|
||||
};
|
||||
|
||||
// actions
|
||||
fetchInboxFilters: (workspaceSlug: string, projectId: string, inboxId: string) => Promise<IInbox>;
|
||||
updateInboxFilters: (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
inboxId: string,
|
||||
filters: Partial<IInboxFilterOptions>
|
||||
) => Promise<void>;
|
||||
|
||||
// computed
|
||||
appliedFilters: IInboxQueryParams | null;
|
||||
}
|
||||
|
||||
export class InboxFiltersStore implements IInboxFiltersStore {
|
||||
// states
|
||||
loader: boolean = false;
|
||||
error: any | null = null;
|
||||
|
||||
// observables
|
||||
inboxFilters: {
|
||||
[inboxId: string]: { filters: IInboxFilterOptions };
|
||||
} = {};
|
||||
|
||||
// root store
|
||||
rootStore;
|
||||
|
||||
// services
|
||||
inboxService;
|
||||
|
||||
constructor(_rootStore: RootStore) {
|
||||
makeObservable(this, {
|
||||
// states
|
||||
loader: observable.ref,
|
||||
error: observable.ref,
|
||||
|
||||
// observables
|
||||
inboxFilters: observable.ref,
|
||||
|
||||
// actions
|
||||
fetchInboxFilters: action,
|
||||
updateInboxFilters: action,
|
||||
|
||||
// computed
|
||||
appliedFilters: computed,
|
||||
});
|
||||
|
||||
this.rootStore = _rootStore;
|
||||
this.inboxService = new InboxService();
|
||||
}
|
||||
|
||||
get appliedFilters(): IInboxQueryParams | null {
|
||||
const inboxId = this.rootStore.inbox.inboxId;
|
||||
|
||||
if (!inboxId) return null;
|
||||
|
||||
const filtersList = this.inboxFilters[inboxId]?.filters;
|
||||
|
||||
if (!filtersList) return null;
|
||||
|
||||
const filteredRouteParams: IInboxQueryParams = {
|
||||
priority: filtersList.priority ? filtersList.priority.join(",") : null,
|
||||
inbox_status: filtersList.inbox_status ? filtersList.inbox_status.join(",") : null,
|
||||
};
|
||||
|
||||
return filteredRouteParams;
|
||||
}
|
||||
|
||||
fetchInboxFilters = async (workspaceSlug: string, projectId: string, inboxId: string) => {
|
||||
try {
|
||||
runInAction(() => {
|
||||
this.loader = true;
|
||||
});
|
||||
|
||||
const issuesResponse = await this.inboxService.getInboxById(workspaceSlug, projectId, inboxId);
|
||||
|
||||
runInAction(() => {
|
||||
this.loader = false;
|
||||
this.inboxFilters = {
|
||||
...this.inboxFilters,
|
||||
[inboxId]: issuesResponse.view_props,
|
||||
};
|
||||
});
|
||||
|
||||
return issuesResponse;
|
||||
} catch (error) {
|
||||
runInAction(() => {
|
||||
this.loader = false;
|
||||
this.error = error;
|
||||
});
|
||||
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
updateInboxFilters = async (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
inboxId: string,
|
||||
filters: Partial<IInboxFilterOptions>
|
||||
) => {
|
||||
const newViewProps = {
|
||||
...this.inboxFilters[inboxId],
|
||||
filters: {
|
||||
...this.inboxFilters[inboxId]?.filters,
|
||||
...filters,
|
||||
},
|
||||
};
|
||||
|
||||
try {
|
||||
runInAction(() => {
|
||||
this.inboxFilters = {
|
||||
...this.inboxFilters,
|
||||
[inboxId]: newViewProps,
|
||||
};
|
||||
});
|
||||
|
||||
await this.inboxService.patchInbox(workspaceSlug, projectId, inboxId, { view_props: newViewProps });
|
||||
} catch (error) {
|
||||
runInAction(() => {
|
||||
this.error = error;
|
||||
});
|
||||
|
||||
this.fetchInboxFilters(workspaceSlug, projectId, inboxId);
|
||||
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
}
|
||||
280
web/store/inbox/inbox_issue_detail.store.ts
Normal file
280
web/store/inbox/inbox_issue_detail.store.ts
Normal file
@ -0,0 +1,280 @@
|
||||
import { observable, action, makeObservable, runInAction } from "mobx";
|
||||
// types
|
||||
import { RootStore } from "../root";
|
||||
// services
|
||||
import { InboxService } from "services/inbox.service";
|
||||
// types
|
||||
import { IInboxIssue, IIssue, TInboxStatus } from "types";
|
||||
// constants
|
||||
import { INBOX_ISSUE_SOURCE } from "constants/inbox";
|
||||
|
||||
export interface IInboxIssueDetailsStore {
|
||||
// states
|
||||
loader: boolean;
|
||||
error: any | null;
|
||||
|
||||
// observables
|
||||
issueDetails: {
|
||||
[issueId: string]: IInboxIssue;
|
||||
};
|
||||
|
||||
// actions
|
||||
fetchIssueDetails: (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
inboxId: string,
|
||||
issueId: string
|
||||
) => Promise<IInboxIssue>;
|
||||
createIssue: (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
inboxId: string,
|
||||
data: Partial<IIssue>
|
||||
) => Promise<IInboxIssue>;
|
||||
updateIssue: (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
inboxId: string,
|
||||
issueId: string,
|
||||
data: Partial<IInboxIssue>
|
||||
) => Promise<void>;
|
||||
updateIssueStatus: (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
inboxId: string,
|
||||
issueId: string,
|
||||
data: TInboxStatus
|
||||
) => Promise<void>;
|
||||
deleteIssue: (workspaceSlug: string, projectId: string, inboxId: string, issueId: string) => Promise<void>;
|
||||
}
|
||||
|
||||
export class InboxIssueDetailsStore implements IInboxIssueDetailsStore {
|
||||
// states
|
||||
loader: boolean = false;
|
||||
error: any | null = null;
|
||||
|
||||
// observables
|
||||
issueDetails: { [issueId: string]: IInboxIssue } = {};
|
||||
|
||||
// root store
|
||||
rootStore;
|
||||
|
||||
// services
|
||||
inboxService;
|
||||
|
||||
constructor(_rootStore: RootStore) {
|
||||
makeObservable(this, {
|
||||
// states
|
||||
loader: observable.ref,
|
||||
error: observable.ref,
|
||||
|
||||
// observables
|
||||
issueDetails: observable.ref,
|
||||
|
||||
// actions
|
||||
fetchIssueDetails: action,
|
||||
createIssue: action,
|
||||
updateIssueStatus: action,
|
||||
deleteIssue: action,
|
||||
});
|
||||
|
||||
this.rootStore = _rootStore;
|
||||
this.inboxService = new InboxService();
|
||||
}
|
||||
|
||||
fetchIssueDetails = async (workspaceSlug: string, projectId: string, inboxId: string, issueId: string) => {
|
||||
try {
|
||||
runInAction(() => {
|
||||
this.loader = true;
|
||||
});
|
||||
|
||||
const issueResponse = await this.inboxService.getInboxIssueById(workspaceSlug, projectId, inboxId, issueId);
|
||||
|
||||
runInAction(() => {
|
||||
this.loader = false;
|
||||
this.issueDetails = {
|
||||
...this.issueDetails,
|
||||
[issueId]: issueResponse,
|
||||
};
|
||||
});
|
||||
|
||||
return issueResponse;
|
||||
} catch (error) {
|
||||
runInAction(() => {
|
||||
this.loader = false;
|
||||
this.error = error;
|
||||
});
|
||||
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
createIssue = async (workspaceSlug: string, projectId: string, inboxId: string, data: Partial<IIssue>) => {
|
||||
const payload = {
|
||||
issue: {
|
||||
name: data.name,
|
||||
description: data.description,
|
||||
description_html: data.description_html,
|
||||
priority: data.priority,
|
||||
},
|
||||
source: INBOX_ISSUE_SOURCE,
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await this.inboxService.createInboxIssue(
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
inboxId,
|
||||
payload,
|
||||
this.rootStore.user.currentUser ?? undefined
|
||||
);
|
||||
|
||||
runInAction(() => {
|
||||
this.issueDetails = {
|
||||
...this.issueDetails,
|
||||
[response.id]: response,
|
||||
};
|
||||
this.rootStore.inboxIssues.inboxIssues = {
|
||||
...this.rootStore.inboxIssues.inboxIssues,
|
||||
[inboxId]: [response, ...this.rootStore.inboxIssues.inboxIssues[inboxId]],
|
||||
};
|
||||
});
|
||||
|
||||
return response;
|
||||
} catch (error) {
|
||||
runInAction(() => {
|
||||
this.error = error;
|
||||
});
|
||||
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
updateIssue = async (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
inboxId: string,
|
||||
issueId: string,
|
||||
data: Partial<IInboxIssue>
|
||||
) => {
|
||||
const updatedIssue = { ...this.issueDetails[issueId], ...data };
|
||||
|
||||
try {
|
||||
runInAction(() => {
|
||||
this.issueDetails = {
|
||||
...this.issueDetails,
|
||||
[issueId]: updatedIssue,
|
||||
};
|
||||
this.rootStore.inboxIssues.inboxIssues = {
|
||||
...this.rootStore.inboxIssues.inboxIssues,
|
||||
[inboxId]: this.rootStore.inboxIssues.inboxIssues[inboxId].map((issue) => {
|
||||
if (issue.issue_inbox[0].id === issueId) return updatedIssue;
|
||||
|
||||
return issue;
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
await this.inboxService.patchInboxIssue(
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
inboxId,
|
||||
issueId,
|
||||
{ issue: data },
|
||||
this.rootStore.user.currentUser ?? undefined
|
||||
);
|
||||
} catch (error) {
|
||||
runInAction(() => {
|
||||
this.error = error;
|
||||
});
|
||||
|
||||
this.rootStore.inboxIssues.fetchInboxIssues(workspaceSlug, projectId, inboxId);
|
||||
this.fetchIssueDetails(workspaceSlug, projectId, inboxId, issueId);
|
||||
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
updateIssueStatus = async (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
inboxId: string,
|
||||
issueId: string,
|
||||
data: TInboxStatus
|
||||
) => {
|
||||
const updatedIssue = { ...this.issueDetails[issueId] };
|
||||
updatedIssue.issue_inbox[0] = {
|
||||
...updatedIssue.issue_inbox[0],
|
||||
...data,
|
||||
};
|
||||
|
||||
try {
|
||||
runInAction(() => {
|
||||
this.issueDetails = {
|
||||
...this.issueDetails,
|
||||
[issueId]: updatedIssue,
|
||||
};
|
||||
this.rootStore.inboxIssues.inboxIssues = {
|
||||
...this.rootStore.inboxIssues.inboxIssues,
|
||||
[inboxId]: this.rootStore.inboxIssues.inboxIssues[inboxId].map((issue) => {
|
||||
if (issue.issue_inbox[0].id === issueId) return updatedIssue as IInboxIssue;
|
||||
|
||||
return issue;
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
await this.inboxService.markInboxStatus(
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
inboxId,
|
||||
issueId,
|
||||
data,
|
||||
this.rootStore.user.currentUser ?? undefined
|
||||
);
|
||||
} catch (error) {
|
||||
runInAction(() => {
|
||||
this.error = error;
|
||||
});
|
||||
|
||||
this.rootStore.inboxIssues.fetchInboxIssues(workspaceSlug, projectId, inboxId);
|
||||
this.fetchIssueDetails(workspaceSlug, projectId, inboxId, issueId);
|
||||
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
deleteIssue = async (workspaceSlug: string, projectId: string, inboxId: string, issueId: string) => {
|
||||
const updatedIssues = { ...this.issueDetails };
|
||||
delete updatedIssues[issueId];
|
||||
|
||||
try {
|
||||
runInAction(() => {
|
||||
this.issueDetails = updatedIssues;
|
||||
this.rootStore.inboxIssues.inboxIssues = {
|
||||
...this.rootStore.inboxIssues.inboxIssues,
|
||||
[inboxId]: this.rootStore.inboxIssues.inboxIssues[inboxId]?.filter(
|
||||
(issue) => issue.issue_inbox[0].id !== issueId
|
||||
),
|
||||
};
|
||||
});
|
||||
|
||||
await this.inboxService.deleteInboxIssue(
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
inboxId,
|
||||
issueId,
|
||||
this.rootStore.user.currentUser ?? undefined
|
||||
);
|
||||
} catch (error) {
|
||||
runInAction(() => {
|
||||
this.error = error;
|
||||
});
|
||||
|
||||
this.rootStore.inboxIssues.fetchInboxIssues(workspaceSlug, projectId, inboxId);
|
||||
this.fetchIssueDetails(workspaceSlug, projectId, inboxId, issueId);
|
||||
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
}
|
||||
84
web/store/inbox/inbox_issues.store.ts
Normal file
84
web/store/inbox/inbox_issues.store.ts
Normal file
@ -0,0 +1,84 @@
|
||||
import { observable, action, makeObservable, runInAction } from "mobx";
|
||||
// types
|
||||
import { RootStore } from "../root";
|
||||
// services
|
||||
import { InboxService } from "services/inbox.service";
|
||||
// types
|
||||
import { IInboxIssue } from "types";
|
||||
|
||||
export interface IInboxIssuesStore {
|
||||
// states
|
||||
loader: boolean;
|
||||
error: any | null;
|
||||
|
||||
// observables
|
||||
inboxIssues: {
|
||||
[inboxId: string]: IInboxIssue[];
|
||||
};
|
||||
|
||||
// actions
|
||||
fetchInboxIssues: (workspaceSlug: string, projectId: string, inboxId: string) => Promise<IInboxIssue[]>;
|
||||
}
|
||||
|
||||
export class InboxIssuesStore implements IInboxIssuesStore {
|
||||
// states
|
||||
loader: boolean = false;
|
||||
error: any | null = null;
|
||||
|
||||
// observables
|
||||
inboxIssues: {
|
||||
[inboxId: string]: IInboxIssue[];
|
||||
} = {};
|
||||
|
||||
// root store
|
||||
rootStore;
|
||||
|
||||
// services
|
||||
inboxService;
|
||||
|
||||
constructor(_rootStore: RootStore) {
|
||||
makeObservable(this, {
|
||||
// states
|
||||
loader: observable.ref,
|
||||
error: observable.ref,
|
||||
|
||||
// observables
|
||||
inboxIssues: observable.ref,
|
||||
|
||||
// actions
|
||||
fetchInboxIssues: action,
|
||||
});
|
||||
|
||||
this.rootStore = _rootStore;
|
||||
this.inboxService = new InboxService();
|
||||
}
|
||||
|
||||
fetchInboxIssues = async (workspaceSlug: string, projectId: string, inboxId: string) => {
|
||||
try {
|
||||
runInAction(() => {
|
||||
this.loader = true;
|
||||
});
|
||||
|
||||
const queryParams = this.rootStore.inboxFilters.appliedFilters ?? undefined;
|
||||
|
||||
const issuesResponse = await this.inboxService.getInboxIssues(workspaceSlug, projectId, inboxId, queryParams);
|
||||
|
||||
runInAction(() => {
|
||||
this.loader = false;
|
||||
this.inboxIssues = {
|
||||
...this.inboxIssues,
|
||||
[inboxId]: issuesResponse,
|
||||
};
|
||||
});
|
||||
|
||||
return issuesResponse;
|
||||
} catch (error) {
|
||||
runInAction(() => {
|
||||
this.loader = false;
|
||||
this.error = error;
|
||||
});
|
||||
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
}
|
||||
4
web/store/inbox/index.ts
Normal file
4
web/store/inbox/index.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export * from "./inbox_filters.store";
|
||||
export * from "./inbox_issue_detail.store";
|
||||
export * from "./inbox_issues.store";
|
||||
export * from "./inbox.store";
|
||||
@ -53,6 +53,16 @@ import {
|
||||
IGlobalViewIssuesStore,
|
||||
IGlobalViewsStore,
|
||||
} from "store/global-view";
|
||||
import {
|
||||
IInboxFiltersStore,
|
||||
IInboxIssueDetailsStore,
|
||||
IInboxIssuesStore,
|
||||
IInboxStore,
|
||||
InboxFiltersStore,
|
||||
InboxIssueDetailsStore,
|
||||
InboxIssuesStore,
|
||||
InboxStore,
|
||||
} from "store/inbox";
|
||||
|
||||
enableStaticRendering(typeof window === "undefined");
|
||||
|
||||
@ -92,6 +102,11 @@ export class RootStore {
|
||||
globalViewIssues: IGlobalViewIssuesStore;
|
||||
globalViewFilters: IGlobalViewFiltersStore;
|
||||
|
||||
inbox: IInboxStore;
|
||||
inboxIssues: IInboxIssuesStore;
|
||||
inboxIssueDetails: IInboxIssueDetailsStore;
|
||||
inboxFilters: IInboxFiltersStore;
|
||||
|
||||
constructor() {
|
||||
this.user = new UserStore(this);
|
||||
this.theme = new ThemeStore(this);
|
||||
@ -127,5 +142,10 @@ export class RootStore {
|
||||
this.globalViews = new GlobalViewsStore(this);
|
||||
this.globalViewIssues = new GlobalViewIssuesStore(this);
|
||||
this.globalViewFilters = new GlobalViewFiltersStore(this);
|
||||
|
||||
this.inbox = new InboxStore(this);
|
||||
this.inboxIssues = new InboxIssuesStore(this);
|
||||
this.inboxIssueDetails = new InboxIssueDetailsStore(this);
|
||||
this.inboxFilters = new InboxFiltersStore(this);
|
||||
}
|
||||
}
|
||||
|
||||
36
web/types/inbox.d.ts
vendored
36
web/types/inbox.d.ts
vendored
@ -1,23 +1,7 @@
|
||||
import { IIssue, IIssueFilterOptions, IIssueLabels } from "./issues";
|
||||
import { IIssue } from "./issues";
|
||||
import type { IProjectLite } from "./projects";
|
||||
import { IState } from "./state";
|
||||
import { IUserLite } from "./users";
|
||||
|
||||
export interface IInboxIssue extends Partial<IIssue> {
|
||||
bridge_id: string;
|
||||
issue_inbox: {
|
||||
duplicate_to: string | null;
|
||||
snoozed_till: Date | null;
|
||||
source: string;
|
||||
status: -2 | -1 | 0 | 1 | 2;
|
||||
}[];
|
||||
}
|
||||
|
||||
export interface IInboxIssueDetail extends IIssue {
|
||||
id: string;
|
||||
project_detail: IProjectLite;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
export interface IInboxIssue extends IIssue {
|
||||
issue_inbox: {
|
||||
duplicate_to: string | null;
|
||||
id: string;
|
||||
@ -25,11 +9,8 @@ export interface IInboxIssueDetail extends IIssue {
|
||||
source: string;
|
||||
status: -2 | -1 | 0 | 1 | 2;
|
||||
}[];
|
||||
created_by: string;
|
||||
updated_by: string;
|
||||
project: string;
|
||||
workspace: string;
|
||||
}
|
||||
|
||||
export interface IInbox {
|
||||
id: string;
|
||||
project_detail: IProjectLite;
|
||||
@ -67,16 +48,11 @@ interface StatusDuplicate {
|
||||
duplicate_to: string;
|
||||
}
|
||||
|
||||
export type TInboxStatus =
|
||||
| StatusReject
|
||||
| StatusSnoozed
|
||||
| StatusAccepted
|
||||
| StatusDuplicate
|
||||
| StatePending;
|
||||
export type TInboxStatus = StatusReject | StatusSnoozed | StatusAccepted | StatusDuplicate | StatePending;
|
||||
|
||||
export interface IInboxFilterOptions {
|
||||
priority: string[] | null;
|
||||
inbox_status: number[] | null;
|
||||
priority?: string[] | null;
|
||||
inbox_status?: number[] | null;
|
||||
}
|
||||
|
||||
export interface IInboxQueryParams {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user