plane/web/store/member/project-member.store.ts
Aaryan Khandelwal 3e2355e223
[WEB-460] refactor: editors, chore: pages list improvement (#4090)
* fix: stroing the transactions in page

* fix: page details changes

* chore: page response change

* chore: removed duplicated endpoints

* chore: optimised the urls

* chore: removed archived and favorite pages

* chore: revamping pages store and components

* mentions loading state part done

* fixed mentions not showing in modals

* removed comments and cleaned up types

* removed unused types

* reset: head

* chore: pages store and component updates

* style: pages list item UI

* fix: improved colors and drag handle width

* fix: slash commands are no more shown in the code blocks

* fix: cleanup/hide drag handles post drop

* fix: hide/cleanup drag handles post drag start

* fix: aligning the drag handles better with the node post css changes of the length

* fix: juggling back and forth of drag handles in ordered and unordered lists

* chore: fix imports, ts errors and other things

* fix: clearing nodes to default node i.e paragraph before converting it to other types of nodes

For more reference on what this does, please refer https://tiptap.dev/docs/editor/api/commands/clear-nodes

* chore: clearNodes after delete in case of selections being present

* fix: hiding link selector in the bubble menu if inline code block is selected

* chore: filtering, ordering and searching implemented

* chore: updated pages store and updated UI

* chore: new core editor just for document editor created

* chore: removed setIsSubmitting prop in doc editor

* fix: fixed submitting state for image uploads

* refactor: setShouldShowAlert removed

* refactor: rerenderOnPropsChange prop removed

* chore: type inference magic in ref to expose an api for controlling editor menu items from outside

* fix: naming imports

* chore: change names of the exposed functions and removing old types

* refactor: remove debouncedUpdatesEnabled prop;

* refactor: editor heading markings now parsed using html

* chore: removed unrelated components from the document editor

* refactor: page details granular components

* fix: remove onActionCompleteHandler

* refactor: removed rerenderOnProps change prop

* feat: added getMarkDown function

* chore: update dropdown option actions

* fix: sidebar markings update logic

* chore: add image and to-do list actions to the toolbar

* fix: handling refs and populating them via callbacks

* feat: scroll to node api exposed

* cleaning up editor refs when the editor is destroyed

* feat: scrolling added to read only instance of the editor

* fix: markings logic

* fix: build errors with types

* fix: build erros

* fix: subscribing to transactions of editor via ref

* chore: remove debug statements

* fix: type errors

* fix: temporary different slash commands for document editor

* chore: inline code extension style

* chore: remove border from readOnly editor

* fix: editor bottom padding

* chore: pages improvements

* chore: handle Enter key on the page title

* feat: added loading indicator logic in mentions

* fix: mentions and slash commands now work well with multiple editors in one place

* refactor: page store structure, filtering logic

* feat: added better seperation in inline code blocks

* feat: list autojoining added

* fix: pages folder structure

* fix: image refocus from external parts

* working lists somewhat

* chore: implement page reactions

* fix: build errors

* fix: build errors

* fixed drag handles stuff

* task list item fixed

* working

* fix: working on multiple nested lists

* chore: remove debug statements

* fix: Tab key on first list item handled to not go out of editor focus

* feat: threshold auto scroll support added and multi nested list selection fixed

* fix: caret color bug with improved inline code blocks

* fix: node range error when bulk deleting with list

* fix: removed slash commands from working in code blocks

* chore: update typography margins

* chore: new field added in page model

* fix: better type inference in slash commands

* chore: code block UI

* feat: image insertion at correct position using ref added

* feat: added improved mentions support for space

* fix: type errors in mentions for comments in web app

* sync: core with document-core

* fix: build errors

* fix: fallback for appendTo not being able to find active container instantly

* fix: page store

* fix: page description

* fix: css quality issues

* chore: code cleanup

* chore: removed placeholder text in codeblocks

* chore: archived pages response change

* chore: archived pages response change

* fix: initial pages list fetch

* fix: pages list filters and ordering

* chore: add access change option in the quick actions dropdown

* fix: inline code block caret fixed

* regression: removing extra text

* chore: caret color removed

* feat: copy code button added in code blocks

* fix: initial load of page details

* fix: initial load of page details

* fix: image resizing weird behavior on click/expanding it too much fixed now

* chore: copy page response

* fix: todo list spacing

* chore: description html in the copy page

* chore: handle latest description on refetch

* fix: saner scroll behaviours

* fix: block menu positioning

* fix: updated empty string description

* feat: tab change sync support added

* fix: infinite rerendering with markings

* fix: block menu finally

* fix: intial load on reload bug fixed

* fix: nested lists alignment

* fix: editor padding

* fix: first level list items copyable

* chore: list spacing

* fix: title change

* fix: pages list block items interaction

* fix: saving chip position

* fix: delete action from block menu to focus properly

* fix: margin-bottom as 0 to avoid weird spacing when a paragraph node follows a list node

* style: table, chore: lite text editor toolbar

* fix: page description tab sync

* fix: lists spacing and alignment

* refactor: document editor props

* feat: rich text editor wrapper created and migrated core

* feat: created wrapper around lite text editor and merged core

* chore: add lite text editor toolbar

* fix: build errors

* fix: type errors and addead live updation of toolbar

* chore: pages migration

* fix: inbox issue

* refactor: remove redundant package

* refactor: unused files

* fix: add dompurify to space app

* fix: inline code margin

* fix: editor className props

* fix: build errors

* fix: traversing up the tree before assuming the parent is not a list item

* fix: drag handle positions for list items fixed

* fix: removed focus at end logic after deleting block

* fix: image wrapper overflow scroll fix with block menu's position

* fix: selection and deletion logic for nested lists fixed!!

* fix: hiding the block menu while scrolling in the document/app

* fix: merge conflicts resolved from develop

* fix: inbox issue description

* chore: move page title to the web app

* fix: handling edge cases for table selection

* chore: lint issues

* refactor: list item functions moved to same file

* refactor: use mention hook

* fix: added try catch blocks for mention suggestions

* chore: remove unused code

* fix: remove console logs

* fix: remove console logs

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Co-authored-by: gurusainath <gurusainath007@gmail.com>
Co-authored-by: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com>
2024-04-11 21:28:59 +05:30

217 lines
6.9 KiB
TypeScript

import set from "lodash/set";
import sortBy from "lodash/sortBy";
import { action, computed, makeObservable, observable, runInAction } from "mobx";
import { computedFn } from "mobx-utils";
// types
import { IProjectBulkAddFormData, IProjectMember, IProjectMembership, IUserLite } from "@plane/types";
// services
import { EUserProjectRoles } from "@/constants/project";
import { ProjectMemberService } from "@/services/project";
// types
import { IRouterStore } from "@/store/application/router.store";
import { RootStore } from "@/store/root.store";
import { IUserRootStore } from "@/store/user";
// constants
import { IMemberRootStore } from ".";
interface IProjectMemberDetails {
id: string;
member: IUserLite;
role: EUserProjectRoles;
}
export interface IProjectMemberStore {
// observables
projectMemberMap: {
[projectId: string]: Record<string, IProjectMembership>;
};
// computed
projectMemberIds: string[] | null;
// computed actions
getProjectMemberDetails: (userId: string) => IProjectMemberDetails | null;
getProjectMemberIds: (projectId: string) => string[] | null;
// fetch actions
fetchProjectMembers: (workspaceSlug: string, projectId: string) => Promise<IProjectMembership[]>;
// bulk operation actions
bulkAddMembersToProject: (
workspaceSlug: string,
projectId: string,
data: IProjectBulkAddFormData
) => Promise<IProjectMembership[]>;
// crud actions
updateMember: (
workspaceSlug: string,
projectId: string,
userId: string,
data: { role: EUserProjectRoles }
) => Promise<IProjectMember>;
removeMemberFromProject: (workspaceSlug: string, projectId: string, userId: string) => Promise<void>;
}
export class ProjectMemberStore implements IProjectMemberStore {
// observables
projectMemberMap: {
[projectId: string]: Record<string, IProjectMembership>;
} = {};
// stores
routerStore: IRouterStore;
userStore: IUserRootStore;
memberRoot: IMemberRootStore;
// services
projectMemberService;
constructor(_memberRoot: IMemberRootStore, _rootStore: RootStore) {
makeObservable(this, {
// observables
projectMemberMap: observable,
// computed
projectMemberIds: computed,
// actions
fetchProjectMembers: action,
bulkAddMembersToProject: action,
updateMember: action,
removeMemberFromProject: action,
});
// root store
this.routerStore = _rootStore.app.router;
this.userStore = _rootStore.user;
this.memberRoot = _memberRoot;
// services
this.projectMemberService = new ProjectMemberService();
}
/**
* @description get the list of all the user ids of all the members of the current project
*/
get projectMemberIds() {
const projectId = this.routerStore.projectId;
if (!projectId) return null;
let members = Object.values(this.projectMemberMap?.[projectId] ?? {});
members = sortBy(members, [
(m) => m.member !== this.userStore.currentUser?.id,
(m) => this.memberRoot.memberMap?.[m.member]?.display_name.toLowerCase(),
]);
const memberIds = members.map((m) => m.member);
return memberIds;
}
/**
* @description get the details of a project member
* @param userId
*/
getProjectMemberDetails = computedFn((userId: string) => {
const projectId = this.routerStore.projectId;
if (!projectId) return null;
const projectMember = this.projectMemberMap?.[projectId]?.[userId];
if (!projectMember) return null;
const memberDetails: IProjectMemberDetails = {
id: projectMember.id,
role: projectMember.role,
member: this.memberRoot?.memberMap?.[projectMember.member],
};
return memberDetails;
});
/**
* @description get the list of all the user ids of all the members of a project using projectId
* @param projectId
*/
getProjectMemberIds = computedFn((projectId: string): string[] | null => {
if (!this.projectMemberMap?.[projectId]) return null;
let members = Object.values(this.projectMemberMap?.[projectId]);
members = sortBy(members, [
(m) => m.member !== this.userStore.currentUser?.id,
(m) => this.memberRoot?.memberMap?.[m.member]?.display_name?.toLowerCase(),
]);
const memberIds = members.map((m) => m.member);
return memberIds;
});
/**
* @description fetch the list of all the members of a project
* @param workspaceSlug
* @param projectId
*/
fetchProjectMembers = async (workspaceSlug: string, projectId: string) =>
await this.projectMemberService.fetchProjectMembers(workspaceSlug, projectId).then((response) => {
runInAction(() => {
response.forEach((member) => {
set(this.projectMemberMap, [projectId, member.member], member);
});
});
return response;
});
/**
* @description bulk add members to a project
* @param workspaceSlug
* @param projectId
* @param data
* @returns Promise<IProjectMembership[]>
*/
bulkAddMembersToProject = async (workspaceSlug: string, projectId: string, data: IProjectBulkAddFormData) =>
await this.projectMemberService.bulkAddMembersToProject(workspaceSlug, projectId, data).then((response) => {
runInAction(() => {
response.forEach((member) => {
set(this.projectMemberMap, [projectId, member.member], member);
});
});
return response;
});
/**
* @description update the role of a member in a project
* @param workspaceSlug
* @param projectId
* @param userId
* @param data
*/
updateMember = async (
workspaceSlug: string,
projectId: string,
userId: string,
data: { role: EUserProjectRoles }
) => {
const memberDetails = this.getProjectMemberDetails(userId);
if (!memberDetails) throw new Error("Member not found");
// original data to revert back in case of error
const originalProjectMemberData = this.projectMemberMap?.[projectId]?.[userId];
try {
runInAction(() => {
set(this.projectMemberMap, [projectId, userId, "role"], data.role);
});
const response = await this.projectMemberService.updateProjectMember(
workspaceSlug,
projectId,
memberDetails?.id,
data
);
return response;
} catch (error) {
// revert back to original members in case of error
runInAction(() => {
set(this.projectMemberMap, [projectId, userId], originalProjectMemberData);
});
throw error;
}
};
/**
* @description remove a member from a project
* @param workspaceSlug
* @param projectId
* @param userId
*/
removeMemberFromProject = async (workspaceSlug: string, projectId: string, userId: string) => {
const memberDetails = this.getProjectMemberDetails(userId);
if (!memberDetails) throw new Error("Member not found");
await this.projectMemberService.deleteProjectMember(workspaceSlug, projectId, memberDetails?.id).then(() => {
runInAction(() => {
delete this.projectMemberMap?.[projectId]?.[userId];
});
});
};
}