refactor: MobX store structure (#3228)
* query params from router as computed * chore: setup workspace store and sub-stores * chore: update router query store * chore: update store types * fix: pages store changes * change observables and retain object reference * fix build errors * chore: changed the structure of workspace, project, cycle, module and pages * fix: pages fixes * fix: merge conflicts resolved * chore: fixed workspace list * chore: update workspace store accroding to the new response * fix: adding page details to store * fix: adding new contexts and providers * dev: issues store and filters in new store * dev: optimised the issue fetching in issue base store * chore: project views id mapped * update lodash set to directly run inside runInaction since it mutates the object * fix: context changes * code refactor kanban for better mainatinability * optimize Kanban for performance * chore: implemented hooks for all the created stores * chore: removed bridge id * css change and refactor * chore: update cycle store structure * chore: implement the new label root store * chore: removed object structure * chore: implement project view hook * Kanban new store implementation for project issues * fix project root for kanban * feat: workspace and project members endpoint (#3092) * fix: merge conflicts resolved * issue properties optimization * chore: user stores * chore: create new store context and update hooks * chore: setup inbox store and implement router store * chore: initialize and implement project estimate store * chore: initialize global view store * kanban and list view optimization * chore: use new cycle and module store. (#3172) * chore: use new cycle and module store. * chore: minor improvements. * Revert "chore: merge develop" This reverts commit 9d2e0e29e7370b55b48fc2fee4fd126093a6cc48, reversing changes made to 9595493c42be3ea0ddd17b23a0b124555075c062. * chore: implement useGlobalView hook * refactor: projects & inbox store instances (#3179) * refactor: projects & inbox store instances * fix: formatting * fix: action usage * chore: implement useProjectState hook. (#3185) * dev: issue, cycle store optimiation * fix build for code * dev: removed dummy variables * dev: issue store * fix: adding todos * chore: removing legacy store * dev: issues store types and typos * chore: cycle module user properties * fix legacy store deletion issues * chore: change POST to PATCH * fix issues rendering for project root * chore: removed workspace details in workpsaceinvite * chore: created models for display properties * chore: setup member store and implement it everywhere * refactor: module store (#3202) * refactor: cycle store (#3192) * refator: cycle store * some more improvements. * chore: implement useLabel hook. (#3190) * refactor: inbox & project related stores. (#3193) * refactor: inbox -> filter, issues, inoxes & project -> publish, projects store * refactor: workspace-project-id name * fix kanban dropdown overlapping issue * fix kanban layout minor re rendering * chore: implement useMember store everywhere * chore: create and implement editor mention store * chore: removed the issue view user property * chore: created at id changed * dev: segway intgegration (#3132) * feat: implemented rabbitmq * dev: initialize segway with queue setup * dev: import refactors * dev: create communication with the segway server * dev: create new workers * dev: create celery node queue for consuming messages from django * dev: node to celery connection * dev: setup segway and django connection * dev: refactor the structure and add database integration to the app * dev: add external id and source added --------- Co-authored-by: NarayanBavisetti <narayan3119@gmail.com> * dev: github importer (#3205) * dev: initiate github import * dev: github importer all issues import * dev: github comments and links for the imported issues * dev: update controller to use logger and spread the resultData in getAllEntities * dev: removed console log * dev: update code structure and sync functions * dev: updated retry logic when exception * dev: add imported data as well * dev: update logger and repo fetch * dev: update jira integration to new structure * dev: update migrations * dev: update the reason field * chore: workspace object id removed * chore: view's creation fixed * refactor: mobx store improvements. (#3213) * fix: state and label errors * chore: remove legacy code * fix: branch build fix (#3214) * branch build fix for release-* in case of space,backend,proxy * fixes * chore: update store names and types * fix - file size limit not work on plane.settings.production (#3160) * fix - file size limit not work on plane.settings.production * fix - file size limit not work on plane.settings.production * fix - file size limit not work on plane.settings.production, move to common.py --------- Co-authored-by: luanduongtel4vn <hoangluan@tel4vn.com> Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com> * style: instance admin email settings ui & ux update. (#3186) * refactor: use-user-auth hook (#3215) * refactor: use-user-auth hook * fix: user store currentUserLoader * refactor: project-view & application related stores (#3207) * refactor: project-view & application related stores * rename: projectViews -> projectViewIds * fix: project-view favourite state in store * chore: remove unnecessary hooks and contexts (#3217) * chore: update issue assignee property component * chore: bug fixes & improvement (#3218) * chore: draft issue validation added to prevent saving empty or whitespace title * chore: resolve scrolling issue in page empty state * chore: kanban layout quick add issue improvement * fix: bugs & improvements (#3189) * fix: workspace invitation modal form values reset * fix: profile sidebar avatar letter * [refactor] Editor code refactoring (#3194) * removed relative imports from editor core * Update issue widget file paths and imports to use kebab case instead of camel case, to align with coding conventions and improve consistency. * Update Tiptap core and extensions versions to 2.1.13 and Tiptap React version to 2.1.13. Update Tiptap table imports to use the new location in package @tiptap/pm/tables. Update AlertLabel component to use the new type definition for LucideIcon. * updated lock file * removed default exports from editor/core * fixed injecting css into the core package itself * seperated css code to have single source of origin wrt to the package * removed default imports from document editor * all instances using index as key while mapping fixed * Update Lite Text Editor package.json to remove @plane/editor-types as a dependency. Update Lite Text Editor index.ts to update the import of IMentionSuggestion and IMentionHighlight from @plane/editor-types to @plane/editor-core. Update Lite Text Editor ui/index.tsx to update the import of UploadImage, DeleteImage, IMentionSuggestion, and RestoreImage from @plane/editor-types to @plane/editor-core. Update Lite Text Editor ui/menus/fixed-menu/index.tsx to update the import of UploadImage from @plane/editor-types to @plane/editor-core. Update turbo.json to remove @plane/editor-types#build as a dependency for @plane/lite-text-editor#build, @plane/rich-text-editor#build, and @plane/document-editor#build. * Remove deprecated import and adjust tippy.js usage in the slash-commands.tsx file of the editor extensions package. * Update dependencies in `rich-text-editor/package.json`, remove `@plane/editor-types` and add `@plane/editor-core` in `rich-text-editor/src/index.ts`, and update imports in `rich-text-editor/src/ui/extensions/index.tsx` and `rich-text-editor/src/ui/index.tsx` to use `@plane/editor-core` instead of `@plane/editor-types`. * Update package.json dependencies and add new types for image deletion, upload, restore, mention highlight, mention suggestion, and slash command item. * Update import statements in various files to use the new package "@plane/editor-core" instead of "@plane/editor-types". * fixed document editor to follow conventions * Refactor imports in the Rich Text Editor package to use relative paths instead of absolute paths. - Updated imports in `index.ts`, `ui/index.tsx`, and `ui/menus/bubble-menu/index.tsx` to use relative paths. - Updated `tsconfig.json` to include the `baseUrl` compiler option and adjust the `include` and `exclude` paths. * Refactor Lite Text Editor code to use relative import paths instead of absolute import paths. * Added LucideIconType to the exports in index.ts for use in other files. Created a new file lucide-icon.ts which contains the type LucideIconType. Updated the icon type in HeadingOneItem in menu-items/index.tsx to use LucideIconType. Updated the Icon type in AlertLabel in alert-label.tsx to use LucideIconType. Updated the Icon type in VerticalDropdownItemProps in vertical-dropdown-menu.tsx to use LucideIconType. Updated the Icon type in BubbleMenuItem in fixed-menu/index.tsx to use LucideIconType. Deleted the file tooltip.tsx since it is no longer used. Updated the Icon type in BubbleMenuItem in bubble-menu/index.tsx to use LucideIconType. * ♻️ refactor: simplify rendering logic in slash-commands.tsx The rendering logic in the file "slash-commands.tsx" has been simplified. Previously, the code used inline positioning for the popup, but it has now been removed. Instead of appending the popup to the document body, it is now appended to the element with the ID "tiptap-container". The "flip" option has also been removed. These changes have improved the readability and maintainability of the code. * fixed build errors caused due to core's internal imports * regression: fixed pages not saving issue and not duplicating with proper content issue * build: Update @tiptap dependencies Updated the @tiptap dependencies in the package.json files of `document-editor`, `extensions`, and `rich-text-editor` packages to version 2.1.13. * 🚑 fix: Correct appendTo selector in slash-commands.tsx Update the `appendTo` function call in `slash-commands.tsx` to use the correct selector `#editor-container` instead of `#tiptap-container`. This ensures that the component is appended to the appropriate container in the editor extension. Note: The commit message assumes that the change is a fix for an issue or error. If it's not a fix, please provide more context so that an appropriate commit type can be determined. * style: email placeholder changed across the platform (#3206) * style: email placeholder changed across the platform * fix: placeholder text * dev: updated new filter endpoints and restructured issue and issue filters store * implement issues and replace useMobxStore * remove all store legacy references * dev: updated the orderby and subgroupby filters data * dev:added projectId in issue filters for consistency * fix more build errors * dev: updated profile issues * dev: removed store legacy * dev: active cycle issues in the cycle issue store * fix additional build errors and memoize issueActions in each layout component * change store enums * remove all useMobxStore references * fix more build errors * dev: reverted workspace invitation * fix: build errors and warnings * fix: optimistic update for instant operations (#3221) * fix: update functions failed case * fix: typo * chore: revert back to optimistic update approach for all `update related actions` (#3219) * fix: merge conflicts resolved * chore: update memberMap logic in components * add assignees to kanban groups and properties * dev: migration fixes * final bit of optimization on list view * change all TODOs that are to be done before this release to FIXME * change base Kanban TODOs that are to be done before this release to FIXME * dev: add fields and expand for app serializers * dev: issue detail store * dev: update issue serializer to return object ids * fix: Instance key added in settings and converted issues list api to arry instead of dict * fix: removing segway files * dev: control expand through query parameters * revert: github importer * Revert "dev: segway intgegration (#3132)" This reverts commit 1cc18a09156d1790d114061dbac8c901e0f2754c. * dev: remove migrations for segway * dev: issue structure change and created workspacebasemodel * dev: issue detail serializer * fix: changed workspace dict * dev: updated new issue structure * chore: build fix * dev: issue detail store refactor * dev: created list endpoint for issue-relation * dev: added issue attachments in issue detail store * dev: added issue activity computed * fix: build error * chore: peek overview modal context added * chore: build error fix * dev: added sub_issues in issue details store * dev: added complete issue serializer for sub issues * dev: resolved type errors in issue root store * dev: changed the issue relation structure * chore: new global dropdowns * chore: build error fix * chore: cycle and module selection if disabled * dev: removed unnecessary code from the workspace root * chore: build error fix * chore: issue relation remove endpoint * fix: build error * dev: typos and implemented issue relation store * fix: yarn lock updated * style: update the UI of all the dropdowns * fix: state store fixes * fix: key issue * fix: state store console logs removed * refactor: member dropdowns * fix: moving types to packages * fix: dropdown arrow positioning * dev: removed logs * style: label dropdown * chore: restrict description notifications * chore: description changes * chore: update spreadsheet layout dropdowns * fix: build errors * chore: duplicate key change * fix: ui bugs * chore: relation activity change * chore: comment activity changes * chore: blocking issue removal * chore: added project_id for relation * chore: issue relation store and component * chore: issue redirection issue in the issue realtion in detail page * chore: created activity changed * chore: issue links new store implementation on the issue detail * chore: issue relation deletion acitivity changed * chore: issue attachments new store implementation on the issue detail * chore: workspace level issues * fix: build errors --------- Co-authored-by: rahulramesha <rahulramesham@gmail.com> Co-authored-by: gurusainath <gurusainath007@gmail.com> Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com> Co-authored-by: NarayanBavisetti <narayan3119@gmail.com> Co-authored-by: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com> Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com> Co-authored-by: Lakhan Baheti <94619783+1akhanBaheti@users.noreply.github.com> Co-authored-by: Nikhil <118773738+pablohashescobar@users.noreply.github.com> Co-authored-by: Manish Gupta <59428681+mguptahub@users.noreply.github.com> Co-authored-by: Hoang Luan <luandnh98@gmail.com> Co-authored-by: luanduongtel4vn <hoangluan@tel4vn.com> Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Co-authored-by: M. Palanikannan <73993394+Palanikannan1437@users.noreply.github.com> Co-authored-by: pablohashescobar <nikhilschacko@gmail.com> Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
1539340113
commit
804b7d8663
940 changed files with 26378 additions and 34411 deletions
|
|
@ -1,16 +1,16 @@
|
|||
import React, { useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// hooks
|
||||
import { useApplication, useModule } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// ui
|
||||
import { Button } from "@plane/ui";
|
||||
// icons
|
||||
import { AlertTriangle } from "lucide-react";
|
||||
// types
|
||||
import type { IModule } from "types";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
import type { IModule } from "@plane/types";
|
||||
|
||||
type Props = {
|
||||
data: IModule;
|
||||
|
|
@ -20,17 +20,17 @@ type Props = {
|
|||
|
||||
export const DeleteModuleModal: React.FC<Props> = observer((props) => {
|
||||
const { data, isOpen, onClose } = props;
|
||||
|
||||
// states
|
||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, moduleId, peekModule } = router.query;
|
||||
|
||||
// store hooks
|
||||
const {
|
||||
module: moduleStore,
|
||||
trackEvent: { postHogEventTracker },
|
||||
} = useMobxStore();
|
||||
|
||||
eventTracker: { postHogEventTracker },
|
||||
} = useApplication();
|
||||
const { deleteModule } = useModule();
|
||||
// toast alert
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const handleClose = () => {
|
||||
|
|
@ -43,8 +43,7 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
|
|||
|
||||
setIsDeleteLoading(true);
|
||||
|
||||
await moduleStore
|
||||
.deleteModule(workspaceSlug.toString(), projectId.toString(), data.id)
|
||||
await deleteModule(workspaceSlug.toString(), projectId.toString(), data.id)
|
||||
.then(() => {
|
||||
if (moduleId || peekModule) router.push(`/${workspaceSlug}/projects/${data.project}/modules`);
|
||||
handleClose();
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
import { useEffect } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
// components
|
||||
import { ModuleLeadSelect, ModuleMembersSelect, ModuleStatusSelect } from "components/modules";
|
||||
import { ModuleStatusSelect } from "components/modules";
|
||||
import { DateDropdown, ProjectDropdown, ProjectMemberDropdown } from "components/dropdowns";
|
||||
// ui
|
||||
import { DateSelect } from "components/ui";
|
||||
import { Button, Input, TextArea } from "@plane/ui";
|
||||
// helpers
|
||||
import { renderFormattedPayloadDate } from "helpers/date-time.helper";
|
||||
// types
|
||||
import { IModule } from "types";
|
||||
import { IssueProjectSelect } from "components/issues/select";
|
||||
import { IModule } from "@plane/types";
|
||||
|
||||
type Props = {
|
||||
handleFormSubmit: (values: Partial<IModule>) => Promise<void>;
|
||||
|
|
@ -79,19 +80,24 @@ export const ModuleForm: React.FC<Props> = ({
|
|||
<form onSubmit={handleSubmit(handleCreateUpdateModule)}>
|
||||
<div className="space-y-5">
|
||||
<div className="flex items-center gap-x-3">
|
||||
<Controller
|
||||
control={control}
|
||||
name="project"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<IssueProjectSelect
|
||||
value={value}
|
||||
onChange={(val: string) => {
|
||||
onChange(val);
|
||||
setActiveProject(val);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{!status && (
|
||||
<Controller
|
||||
control={control}
|
||||
name="project"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<div className="h-7">
|
||||
<ProjectDropdown
|
||||
value={value}
|
||||
onChange={(val) => {
|
||||
onChange(val);
|
||||
setActiveProject(val);
|
||||
}}
|
||||
buttonVariant="border-with-text"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<h3 className="text-xl font-medium leading-6 text-custom-text-200">{status ? "Update" : "New"} Module</h3>
|
||||
</div>
|
||||
|
||||
|
|
@ -144,40 +150,65 @@ export const ModuleForm: React.FC<Props> = ({
|
|||
control={control}
|
||||
name="start_date"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<DateSelect
|
||||
label="Start date"
|
||||
value={value}
|
||||
onChange={(val) => {
|
||||
onChange(val);
|
||||
}}
|
||||
maxDate={maxDate ?? undefined}
|
||||
/>
|
||||
<div className="h-7">
|
||||
<DateDropdown
|
||||
value={value}
|
||||
onChange={(date) => onChange(date ? renderFormattedPayloadDate(date) : null)}
|
||||
buttonVariant="border-with-text"
|
||||
placeholder="Start date"
|
||||
maxDate={maxDate ?? undefined}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="target_date"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<DateSelect
|
||||
label="Target date"
|
||||
value={value}
|
||||
onChange={(val) => {
|
||||
onChange(val);
|
||||
}}
|
||||
minDate={minDate ?? undefined}
|
||||
/>
|
||||
<div className="h-7">
|
||||
<DateDropdown
|
||||
value={value}
|
||||
onChange={(date) => onChange(date ? renderFormattedPayloadDate(date) : null)}
|
||||
buttonVariant="border-with-text"
|
||||
placeholder="Target date"
|
||||
minDate={minDate ?? undefined}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<ModuleStatusSelect control={control} error={errors.status} />
|
||||
<Controller
|
||||
control={control}
|
||||
name="lead"
|
||||
render={({ field: { value, onChange } }) => <ModuleLeadSelect value={value} onChange={onChange} />}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<div className="h-7">
|
||||
<ProjectMemberDropdown
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
projectId={projectId}
|
||||
multiple={false}
|
||||
buttonVariant="border-with-text"
|
||||
placeholder="Lead"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="members"
|
||||
render={({ field: { value, onChange } }) => <ModuleMembersSelect value={value} onChange={onChange} />}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<div className="h-7">
|
||||
<ProjectMemberDropdown
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
projectId={projectId}
|
||||
multiple
|
||||
buttonVariant={value && value.length > 0 ? "transparent-without-text" : "border-with-text"}
|
||||
buttonClassName={value && value.length > 0 ? "hover:bg-transparent px-0" : ""}
|
||||
placeholder="Members"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -187,13 +218,7 @@ export const ModuleForm: React.FC<Props> = ({
|
|||
Cancel
|
||||
</Button>
|
||||
<Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
|
||||
{status
|
||||
? isSubmitting
|
||||
? "Updating Module..."
|
||||
: "Update Module"
|
||||
: isSubmitting
|
||||
? "Creating Module..."
|
||||
: "Create Module"}
|
||||
{status ? (isSubmitting ? "Updating" : "Update module") : isSubmitting ? "Creating" : "Create module"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { Tooltip, ModuleStatusIcon } from "@plane/ui";
|
|||
// helpers
|
||||
import { renderFormattedDate } from "helpers/date-time.helper";
|
||||
// types
|
||||
import { IModule } from "types";
|
||||
import { IModule } from "@plane/types";
|
||||
// constants
|
||||
import { MODULE_STATUS } from "constants/module";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,49 +1,55 @@
|
|||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
import { useModule, useProject } from "hooks/store";
|
||||
// components
|
||||
import { GanttChartRoot, IBlockUpdateData, ModuleGanttSidebar } from "components/gantt-chart";
|
||||
import { ModuleGanttBlock } from "components/modules";
|
||||
// types
|
||||
import { IModule } from "types";
|
||||
import { IModule } from "@plane/types";
|
||||
|
||||
export const ModulesListGanttChartView: React.FC = observer(() => {
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
// store
|
||||
const { project: projectStore, module: moduleStore } = useMobxStore();
|
||||
const { currentProjectDetails } = projectStore;
|
||||
const modules = moduleStore.projectModules;
|
||||
const { projectModuleIds, moduleMap } = useModule();
|
||||
const { currentProjectDetails } = useProject();
|
||||
|
||||
const handleModuleUpdate = (module: IModule, payload: IBlockUpdateData) => {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
moduleStore.updateModuleGanttStructure(workspaceSlug.toString(), module.project, module, payload);
|
||||
// FIXME
|
||||
//updateModuleGanttStructure(workspaceSlug.toString(), module.project, module, payload);
|
||||
};
|
||||
|
||||
const blockFormat = (blocks: IModule[]) =>
|
||||
const blockFormat = (blocks: string[]) =>
|
||||
blocks && blocks.length > 0
|
||||
? blocks
|
||||
.filter((b) => b.start_date && b.target_date && new Date(b.start_date) <= new Date(b.target_date))
|
||||
.map((block) => ({
|
||||
data: block,
|
||||
id: block.id,
|
||||
sort_order: block.sort_order,
|
||||
start_date: new Date(block.start_date ?? ""),
|
||||
target_date: new Date(block.target_date ?? ""),
|
||||
}))
|
||||
.filter((blockId) => {
|
||||
const block = moduleMap[blockId];
|
||||
return block.start_date && block.target_date && new Date(block.start_date) <= new Date(block.target_date);
|
||||
})
|
||||
.map((blockId) => {
|
||||
const block = moduleMap[blockId];
|
||||
return {
|
||||
data: block,
|
||||
id: block.id,
|
||||
sort_order: block.sort_order,
|
||||
start_date: new Date(block.start_date ?? ""),
|
||||
target_date: new Date(block.target_date ?? ""),
|
||||
};
|
||||
})
|
||||
: [];
|
||||
|
||||
const isAllowed = currentProjectDetails?.member_role === 20 || currentProjectDetails?.member_role === 15;
|
||||
|
||||
const modules = projectModuleIds;
|
||||
return (
|
||||
<div className="h-full w-full overflow-y-auto">
|
||||
<GanttChartRoot
|
||||
title="Modules"
|
||||
loaderTitle="Modules"
|
||||
blocks={modules ? blockFormat(modules) : null}
|
||||
blocks={projectModuleIds ? blockFormat(projectModuleIds) : null}
|
||||
sidebarToRender={(props) => <ModuleGanttSidebar {...props} />}
|
||||
blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)}
|
||||
blockToRender={(data: IModule) => <ModuleGanttBlock data={data} />}
|
||||
|
|
|
|||
|
|
@ -2,14 +2,13 @@ import React, { useEffect, useState } from "react";
|
|||
import { observer } from "mobx-react-lite";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// hooks
|
||||
import { useApplication, useModule, useProject } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { ModuleForm } from "components/modules";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// types
|
||||
import type { IModule } from "types";
|
||||
import type { IModule } from "@plane/types";
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
|
|
@ -29,17 +28,15 @@ const defaultValues: Partial<IModule> = {
|
|||
|
||||
export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
|
||||
const { isOpen, onClose, data, workspaceSlug, projectId } = props;
|
||||
|
||||
// states
|
||||
const [activeProject, setActiveProject] = useState<string | null>(null);
|
||||
|
||||
// store hooks
|
||||
const {
|
||||
project: projectStore,
|
||||
module: moduleStore,
|
||||
trackEvent: { postHogEventTracker },
|
||||
} = useMobxStore();
|
||||
|
||||
const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
|
||||
|
||||
eventTracker: { postHogEventTracker },
|
||||
} = useApplication();
|
||||
const { workspaceProjectIds } = useProject();
|
||||
const { createModule, updateModuleDetails } = useModule();
|
||||
// toast alert
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const handleClose = () => {
|
||||
|
|
@ -51,11 +48,11 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
|
|||
defaultValues,
|
||||
});
|
||||
|
||||
const createModule = async (payload: Partial<IModule>) => {
|
||||
const handleCreateModule = async (payload: Partial<IModule>) => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
const selectedProjectId = payload.project ?? projectId.toString();
|
||||
await moduleStore
|
||||
.createModule(workspaceSlug.toString(), selectedProjectId, payload)
|
||||
await createModule(workspaceSlug.toString(), selectedProjectId, payload)
|
||||
.then((res) => {
|
||||
handleClose();
|
||||
|
||||
|
|
@ -81,11 +78,11 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
|
|||
});
|
||||
};
|
||||
|
||||
const updateModule = async (payload: Partial<IModule>) => {
|
||||
const handleUpdateModule = async (payload: Partial<IModule>) => {
|
||||
if (!workspaceSlug || !projectId || !data) return;
|
||||
|
||||
const selectedProjectId = payload.project ?? projectId.toString();
|
||||
await moduleStore
|
||||
.updateModuleDetails(workspaceSlug.toString(), selectedProjectId, data.id, payload)
|
||||
await updateModuleDetails(workspaceSlug.toString(), selectedProjectId, data.id, payload)
|
||||
.then((res) => {
|
||||
handleClose();
|
||||
|
||||
|
|
@ -117,8 +114,8 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
|
|||
const payload: Partial<IModule> = {
|
||||
...formData,
|
||||
};
|
||||
if (!data) await createModule(payload);
|
||||
else await updateModule(payload);
|
||||
if (!data) await handleCreateModule(payload);
|
||||
else await handleUpdateModule(payload);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -138,9 +135,9 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
|
|||
|
||||
// if data is not present, set active project to the project
|
||||
// in the url. This has the least priority.
|
||||
if (projects && projects.length > 0 && !activeProject)
|
||||
setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);
|
||||
}, [activeProject, data, projectId, projects, isOpen]);
|
||||
if (workspaceProjectIds && workspaceProjectIds.length > 0 && !activeProject)
|
||||
setActiveProject(projectId ?? workspaceProjectIds?.[0] ?? null);
|
||||
}, [activeProject, data, projectId, workspaceProjectIds, isOpen]);
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={React.Fragment}>
|
||||
|
|
|
|||
|
|
@ -2,76 +2,50 @@ import React, { useState } from "react";
|
|||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react";
|
||||
// hooks
|
||||
import { useModule, useUser } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
|
||||
// ui
|
||||
import { Avatar, AvatarGroup, CustomMenu, LayersIcon, Tooltip } from "@plane/ui";
|
||||
// icons
|
||||
import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react";
|
||||
// helpers
|
||||
import { copyUrlToClipboard } from "helpers/string.helper";
|
||||
import { renderFormattedDate } from "helpers/date-time.helper";
|
||||
// types
|
||||
import { IModule } from "types";
|
||||
// constants
|
||||
import { MODULE_STATUS } from "constants/module";
|
||||
import { EUserWorkspaceRoles } from "constants/workspace";
|
||||
import { EUserProjectRoles } from "constants/project";
|
||||
|
||||
type Props = {
|
||||
module: IModule;
|
||||
moduleId: string;
|
||||
};
|
||||
|
||||
export const ModuleCardItem: React.FC<Props> = observer((props) => {
|
||||
const { module } = props;
|
||||
|
||||
const { moduleId } = props;
|
||||
// states
|
||||
const [editModal, setEditModal] = useState(false);
|
||||
const [deleteModal, setDeleteModal] = useState(false);
|
||||
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
// toast alert
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const { module: moduleStore, user: userStore } = useMobxStore();
|
||||
|
||||
const { currentProjectRole } = userStore;
|
||||
|
||||
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
|
||||
|
||||
const moduleTotalIssues =
|
||||
module.backlog_issues +
|
||||
module.unstarted_issues +
|
||||
module.started_issues +
|
||||
module.completed_issues +
|
||||
module.cancelled_issues;
|
||||
|
||||
const completionPercentage = (module.completed_issues / moduleTotalIssues) * 100;
|
||||
|
||||
const endDate = new Date(module.target_date ?? "");
|
||||
const startDate = new Date(module.start_date ?? "");
|
||||
|
||||
const isDateValid = module.target_date || module.start_date;
|
||||
|
||||
const moduleStatus = MODULE_STATUS.find((status) => status.value === module.status);
|
||||
|
||||
const issueCount = module
|
||||
? !moduleTotalIssues || moduleTotalIssues === 0
|
||||
? "0 Issue"
|
||||
: moduleTotalIssues === module.completed_issues
|
||||
? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}`
|
||||
: `${module.completed_issues}/${moduleTotalIssues} Issues`
|
||||
: "0 Issue";
|
||||
// store hooks
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
const { getModuleById, addModuleToFavorites, removeModuleFromFavorites } = useModule();
|
||||
// derived values
|
||||
const moduleDetails = getModuleById(moduleId);
|
||||
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
|
||||
|
||||
const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
moduleStore.addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => {
|
||||
addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), moduleId).catch(() => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
|
|
@ -85,7 +59,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
|
|||
e.preventDefault();
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
moduleStore.removeModuleFromFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => {
|
||||
removeModuleFromFavorites(workspaceSlug.toString(), projectId.toString(), moduleId).catch(() => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
|
|
@ -97,7 +71,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
|
|||
const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${module.id}`).then(() => {
|
||||
copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${moduleId}`).then(() => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Link Copied!",
|
||||
|
|
@ -125,28 +99,56 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
|
|||
|
||||
router.push({
|
||||
pathname: router.pathname,
|
||||
query: { ...query, peekModule: module.id },
|
||||
query: { ...query, peekModule: moduleId },
|
||||
});
|
||||
};
|
||||
|
||||
if (!moduleDetails) return null;
|
||||
|
||||
const moduleTotalIssues =
|
||||
moduleDetails.backlog_issues +
|
||||
moduleDetails.unstarted_issues +
|
||||
moduleDetails.started_issues +
|
||||
moduleDetails.completed_issues +
|
||||
moduleDetails.cancelled_issues;
|
||||
|
||||
const completionPercentage = (moduleDetails.completed_issues / moduleTotalIssues) * 100;
|
||||
|
||||
const endDate = new Date(moduleDetails.target_date ?? "");
|
||||
const startDate = new Date(moduleDetails.start_date ?? "");
|
||||
|
||||
const isDateValid = moduleDetails.target_date || moduleDetails.start_date;
|
||||
|
||||
// const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
|
||||
|
||||
const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
|
||||
|
||||
const issueCount = module
|
||||
? !moduleTotalIssues || moduleTotalIssues === 0
|
||||
? "0 Issue"
|
||||
: moduleTotalIssues === moduleDetails.completed_issues
|
||||
? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}`
|
||||
: `${moduleDetails.completed_issues}/${moduleTotalIssues} Issues`
|
||||
: "0 Issue";
|
||||
|
||||
return (
|
||||
<>
|
||||
{workspaceSlug && projectId && (
|
||||
<CreateUpdateModuleModal
|
||||
isOpen={editModal}
|
||||
onClose={() => setEditModal(false)}
|
||||
data={module}
|
||||
data={moduleDetails}
|
||||
projectId={projectId.toString()}
|
||||
workspaceSlug={workspaceSlug.toString()}
|
||||
/>
|
||||
)}
|
||||
<DeleteModuleModal data={module} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
|
||||
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
|
||||
<DeleteModuleModal data={moduleDetails} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
|
||||
<Link href={`/${workspaceSlug}/projects/${moduleDetails.project}/modules/${moduleDetails.id}`}>
|
||||
<div className="flex h-44 w-full min-w-[250px] flex-col justify-between rounded border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
|
||||
<div>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<Tooltip tooltipContent={module.name} position="top">
|
||||
<span className="truncate text-base font-medium">{module.name}</span>
|
||||
<Tooltip tooltipContent={moduleDetails.name} position="top">
|
||||
<span className="truncate text-base font-medium">{moduleDetails.name}</span>
|
||||
</Tooltip>
|
||||
<div className="flex items-center gap-2">
|
||||
{moduleStatus && (
|
||||
|
|
@ -173,11 +175,11 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
|
|||
<LayersIcon className="h-4 w-4 text-custom-text-300" />
|
||||
<span className="text-xs text-custom-text-300">{issueCount ?? "0 Issue"}</span>
|
||||
</div>
|
||||
{module.members_detail.length > 0 && (
|
||||
<Tooltip tooltipContent={`${module.members_detail.length} Members`}>
|
||||
{moduleDetails.members_detail.length > 0 && (
|
||||
<Tooltip tooltipContent={`${moduleDetails.members_detail.length} Members`}>
|
||||
<div className="flex cursor-default items-center gap-1">
|
||||
<AvatarGroup showTooltip={false}>
|
||||
{module.members_detail.map((member) => (
|
||||
{moduleDetails.members_detail.map((member) => (
|
||||
<Avatar key={member.id} name={member.display_name} src={member.avatar} />
|
||||
))}
|
||||
</AvatarGroup>
|
||||
|
|
@ -220,7 +222,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
|
|||
|
||||
<div className="z-10 flex items-center gap-1.5">
|
||||
{isEditingAllowed &&
|
||||
(module.is_favorite ? (
|
||||
(moduleDetails.is_favorite ? (
|
||||
<button type="button" onClick={handleRemoveFromFavorites}>
|
||||
<Star className="h-3.5 w-3.5 fill-current text-amber-500" />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -2,65 +2,50 @@ import React, { useState } from "react";
|
|||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react";
|
||||
// hooks
|
||||
import { useModule, useUser } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
|
||||
// ui
|
||||
import { Avatar, AvatarGroup, CircularProgressIndicator, CustomMenu, Tooltip } from "@plane/ui";
|
||||
// icons
|
||||
import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react";
|
||||
// helpers
|
||||
import { copyUrlToClipboard } from "helpers/string.helper";
|
||||
import { renderFormattedDate } from "helpers/date-time.helper";
|
||||
// types
|
||||
import { IModule } from "types";
|
||||
// constants
|
||||
import { MODULE_STATUS } from "constants/module";
|
||||
import { EUserWorkspaceRoles } from "constants/workspace";
|
||||
import { EUserProjectRoles } from "constants/project";
|
||||
|
||||
type Props = {
|
||||
module: IModule;
|
||||
moduleId: string;
|
||||
};
|
||||
|
||||
export const ModuleListItem: React.FC<Props> = observer((props) => {
|
||||
const { module } = props;
|
||||
|
||||
const { moduleId } = props;
|
||||
// states
|
||||
const [editModal, setEditModal] = useState(false);
|
||||
const [deleteModal, setDeleteModal] = useState(false);
|
||||
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
// toast alert
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const { module: moduleStore, user: userStore } = useMobxStore();
|
||||
|
||||
const { currentProjectRole } = userStore;
|
||||
|
||||
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
|
||||
|
||||
const completionPercentage = ((module.completed_issues + module.cancelled_issues) / module.total_issues) * 100;
|
||||
|
||||
const endDate = new Date(module.target_date ?? "");
|
||||
const startDate = new Date(module.start_date ?? "");
|
||||
|
||||
const renderDate = module.start_date || module.target_date;
|
||||
|
||||
const moduleStatus = MODULE_STATUS.find((status) => status.value === module.status);
|
||||
|
||||
const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage);
|
||||
|
||||
const completedModuleCheck = module.status === "completed";
|
||||
// store hooks
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
const { getModuleById, addModuleToFavorites, removeModuleFromFavorites } = useModule();
|
||||
// derived values
|
||||
const moduleDetails = getModuleById(moduleId);
|
||||
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
|
||||
|
||||
const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
moduleStore.addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => {
|
||||
addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), moduleId).catch(() => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
|
|
@ -74,7 +59,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
|
|||
e.preventDefault();
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
moduleStore.removeModuleFromFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => {
|
||||
removeModuleFromFavorites(workspaceSlug.toString(), projectId.toString(), moduleId).catch(() => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
|
|
@ -86,7 +71,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
|
|||
const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${module.id}`).then(() => {
|
||||
copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${moduleId}`).then(() => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Link Copied!",
|
||||
|
|
@ -114,23 +99,41 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
|
|||
|
||||
router.push({
|
||||
pathname: router.pathname,
|
||||
query: { ...query, peekModule: module.id },
|
||||
query: { ...query, peekModule: moduleId },
|
||||
});
|
||||
};
|
||||
|
||||
if (!moduleDetails) return null;
|
||||
|
||||
const completionPercentage =
|
||||
((moduleDetails.completed_issues + moduleDetails.cancelled_issues) / moduleDetails.total_issues) * 100;
|
||||
|
||||
const endDate = new Date(moduleDetails.target_date ?? "");
|
||||
const startDate = new Date(moduleDetails.start_date ?? "");
|
||||
|
||||
const renderDate = moduleDetails.start_date || moduleDetails.target_date;
|
||||
|
||||
// const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
|
||||
|
||||
const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
|
||||
|
||||
const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage);
|
||||
|
||||
const completedModuleCheck = moduleDetails.status === "completed";
|
||||
|
||||
return (
|
||||
<>
|
||||
{workspaceSlug && projectId && (
|
||||
<CreateUpdateModuleModal
|
||||
isOpen={editModal}
|
||||
onClose={() => setEditModal(false)}
|
||||
data={module}
|
||||
data={moduleDetails}
|
||||
projectId={projectId.toString()}
|
||||
workspaceSlug={workspaceSlug.toString()}
|
||||
/>
|
||||
)}
|
||||
<DeleteModuleModal data={module} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
|
||||
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
|
||||
<DeleteModuleModal data={moduleDetails} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
|
||||
<Link href={`/${workspaceSlug}/projects/${moduleDetails.project}/modules/${moduleDetails.id}`}>
|
||||
<div className="group flex h-16 w-full items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90">
|
||||
<div className="flex w-full items-center gap-3 truncate">
|
||||
<div className="flex items-center gap-4 truncate">
|
||||
|
|
@ -149,8 +152,8 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
|
|||
)}
|
||||
</CircularProgressIndicator>
|
||||
</span>
|
||||
<Tooltip tooltipContent={module.name} position="top">
|
||||
<span className="truncate text-base font-medium">{module.name}</span>
|
||||
<Tooltip tooltipContent={moduleDetails.name} position="top">
|
||||
<span className="truncate text-base font-medium">{moduleDetails.name}</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<button onClick={openModuleOverview} className="z-10 hidden flex-shrink-0 group-hover:flex">
|
||||
|
|
@ -179,11 +182,11 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
|
|||
</span>
|
||||
)}
|
||||
|
||||
<Tooltip tooltipContent={`${module.members_detail.length} Members`}>
|
||||
<Tooltip tooltipContent={`${moduleDetails.members_detail.length} Members`}>
|
||||
<div className="flex w-16 cursor-default items-center justify-center gap-1">
|
||||
{module.members_detail.length > 0 ? (
|
||||
{moduleDetails.members_detail.length > 0 ? (
|
||||
<AvatarGroup showTooltip={false}>
|
||||
{module.members_detail.map((member) => (
|
||||
{moduleDetails.members_detail.map((member) => (
|
||||
<Avatar key={member.id} name={member.display_name} src={member.avatar} />
|
||||
))}
|
||||
</AvatarGroup>
|
||||
|
|
@ -196,7 +199,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
|
|||
</Tooltip>
|
||||
|
||||
{isEditingAllowed &&
|
||||
(module.is_favorite ? (
|
||||
(moduleDetails.is_favorite ? (
|
||||
<button type="button" onClick={handleRemoveFromFavorites} className="z-[1]">
|
||||
<Star className="h-3.5 w-3.5 fill-current text-amber-500" />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
import React, { useEffect } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// mobx
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// hooks
|
||||
import { useModule } from "hooks/store";
|
||||
// components
|
||||
import { ModuleDetailsSidebar } from "./sidebar";
|
||||
|
||||
|
|
@ -14,13 +12,13 @@ type Props = {
|
|||
};
|
||||
|
||||
export const ModulePeekOverview: React.FC<Props> = observer(({ projectId, workspaceSlug }) => {
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { peekModule } = router.query;
|
||||
|
||||
// refs
|
||||
const ref = React.useRef(null);
|
||||
|
||||
const { module: moduleStore } = useMobxStore();
|
||||
const { fetchModuleDetails } = moduleStore;
|
||||
// store hooks
|
||||
const { fetchModuleDetails } = useModule();
|
||||
|
||||
const handleClose = () => {
|
||||
delete router.query.peekModule;
|
||||
|
|
|
|||
|
|
@ -1,37 +1,35 @@
|
|||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Plus } from "lucide-react";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// hooks
|
||||
import { useApplication, useModule, useUser } from "hooks/store";
|
||||
import useLocalStorage from "hooks/use-local-storage";
|
||||
// components
|
||||
import { ModuleCardItem, ModuleListItem, ModulePeekOverview, ModulesListGanttChartView } from "components/modules";
|
||||
// ui
|
||||
import { Loader } from "@plane/ui";
|
||||
// constants
|
||||
import { EUserWorkspaceRoles } from "constants/workspace";
|
||||
import { EUserProjectRoles } from "constants/project";
|
||||
// assets
|
||||
import emptyModule from "public/empty-state/empty_modules.webp";
|
||||
import { NewEmptyState } from "components/common/new-empty-state";
|
||||
|
||||
export const ModulesListView: React.FC = observer(() => {
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, peekModule } = router.query;
|
||||
|
||||
// store hooks
|
||||
const { commandPalette: commandPaletteStore } = useApplication();
|
||||
const {
|
||||
module: moduleStore,
|
||||
commandPalette: commandPaletteStore,
|
||||
user: { currentProjectRole },
|
||||
} = useMobxStore();
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
const { projectModuleIds } = useModule();
|
||||
|
||||
const { storedValue: modulesView } = useLocalStorage("modules_view", "grid");
|
||||
|
||||
const modulesList = moduleStore.projectModules;
|
||||
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
|
||||
|
||||
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
|
||||
|
||||
if (!modulesList)
|
||||
if (!projectModuleIds)
|
||||
return (
|
||||
<Loader className="grid grid-cols-3 gap-4 p-8">
|
||||
<Loader.Item height="176px" />
|
||||
|
|
@ -45,14 +43,14 @@ export const ModulesListView: React.FC = observer(() => {
|
|||
|
||||
return (
|
||||
<>
|
||||
{modulesList.length > 0 ? (
|
||||
{projectModuleIds.length > 0 ? (
|
||||
<>
|
||||
{modulesView === "list" && (
|
||||
<div className="h-full overflow-y-auto">
|
||||
<div className="flex h-full w-full justify-between">
|
||||
<div className="flex h-full w-full flex-col overflow-y-auto">
|
||||
{modulesList.map((module) => (
|
||||
<ModuleListItem key={module.id} module={module} />
|
||||
{projectModuleIds.map((moduleId) => (
|
||||
<ModuleListItem key={moduleId} moduleId={moduleId} />
|
||||
))}
|
||||
</div>
|
||||
<ModulePeekOverview
|
||||
|
|
@ -72,8 +70,8 @@ export const ModulesListView: React.FC = observer(() => {
|
|||
: "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
|
||||
} auto-rows-max transition-all `}
|
||||
>
|
||||
{modulesList.map((module) => (
|
||||
<ModuleCardItem key={module.id} module={module} />
|
||||
{projectModuleIds.map((moduleId) => (
|
||||
<ModuleCardItem key={moduleId} moduleId={moduleId} />
|
||||
))}
|
||||
</div>
|
||||
<ModulePeekOverview
|
||||
|
|
@ -96,15 +94,11 @@ export const ModulesListView: React.FC = observer(() => {
|
|||
description:
|
||||
"A cart module, a chassis module, and a warehouse module are all good example of this grouping.",
|
||||
}}
|
||||
primaryButton={
|
||||
isEditingAllowed
|
||||
? {
|
||||
icon: <Plus className="h-4 w-4" />,
|
||||
text: "Build your first module",
|
||||
onClick: () => commandPaletteStore.toggleCreateModuleModal(true),
|
||||
}
|
||||
: null
|
||||
}
|
||||
primaryButton={{
|
||||
icon: <Plus className="h-4 w-4" />,
|
||||
text: "Build your first module",
|
||||
onClick: () => commandPaletteStore.toggleCreateModuleModal(true),
|
||||
}}
|
||||
disabled={!isEditingAllowed}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,3 +1 @@
|
|||
export * from "./lead";
|
||||
export * from "./members";
|
||||
export * from "./status";
|
||||
|
|
|
|||
|
|
@ -1,78 +0,0 @@
|
|||
import React from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import useSWR from "swr";
|
||||
// services
|
||||
import { ProjectMemberService } from "services/project";
|
||||
// ui
|
||||
import { Avatar, CustomSearchSelect } from "@plane/ui";
|
||||
// icons
|
||||
import { Combobox } from "@headlessui/react";
|
||||
import { UserCircle, UserCircle2 } from "lucide-react";
|
||||
// fetch-keys
|
||||
import { PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
value: string | null;
|
||||
onChange: () => void;
|
||||
};
|
||||
|
||||
const projectMemberService = new ProjectMemberService();
|
||||
|
||||
export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const { data: members } = useSWR(
|
||||
workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => projectMemberService.fetchProjectMembers(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
|
||||
const options = members?.map((member) => ({
|
||||
value: member.member.id,
|
||||
query: member.member.display_name,
|
||||
content: (
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar name={member?.member.display_name} src={member?.member.avatar} />
|
||||
{member.member.display_name}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
const selectedOption = members?.find((m) => m.member.id === value)?.member;
|
||||
|
||||
return (
|
||||
<CustomSearchSelect
|
||||
options={options}
|
||||
value={value}
|
||||
label={
|
||||
<div className="flex items-center gap-2">
|
||||
{selectedOption ? (
|
||||
<Avatar name={selectedOption.display_name} src={selectedOption.avatar} />
|
||||
) : (
|
||||
<UserCircle className="h-3 w-3 text-custom-text-300" />
|
||||
)}
|
||||
{selectedOption ? (
|
||||
selectedOption?.display_name
|
||||
) : (
|
||||
<span className={`${selectedOption ? "text-custom-text-200" : "text-custom-text-300"}`}>Lead</span>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
footerOption={
|
||||
<Combobox.Option
|
||||
value=""
|
||||
className="flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-custom-text-200"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<UserCircle2 className="h-4 w-4" />
|
||||
No lead
|
||||
</div>
|
||||
</Combobox.Option>
|
||||
}
|
||||
onChange={onChange}
|
||||
noChevron
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
import React from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import useSWR from "swr";
|
||||
// services
|
||||
import { ProjectMemberService } from "services/project";
|
||||
// ui
|
||||
import { Avatar, AvatarGroup, CustomSearchSelect, UserGroupIcon } from "@plane/ui";
|
||||
// fetch-keys
|
||||
import { PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
value: string[];
|
||||
onChange: () => void;
|
||||
};
|
||||
|
||||
const projectMemberService = new ProjectMemberService();
|
||||
|
||||
export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const { data: members } = useSWR(
|
||||
workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => projectMemberService.fetchProjectMembers(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
const options = members?.map((member) => ({
|
||||
value: member.member.id,
|
||||
query: member.member.display_name,
|
||||
content: (
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar name={member?.member.display_name} src={member?.member.avatar} />
|
||||
{member.member.display_name}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
return (
|
||||
<CustomSearchSelect
|
||||
value={value}
|
||||
label={
|
||||
<div className="flex items-center gap-2 text-custom-text-200">
|
||||
{value && value.length > 0 && Array.isArray(value) ? (
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<AvatarGroup>
|
||||
{value.map((assigneeId) => {
|
||||
const member = members?.find((m) => m.member.id === assigneeId)?.member;
|
||||
|
||||
if (!member) return null;
|
||||
|
||||
return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
|
||||
})}
|
||||
</AvatarGroup>
|
||||
<span className="text-custom-text-200">{value.length} Assignees</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center gap-2 text-custom-text-300">
|
||||
<UserGroupIcon className="h-3 w-3" />
|
||||
<span>Assignee</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
options={options}
|
||||
onChange={onChange}
|
||||
maxHeight="md"
|
||||
multiple
|
||||
noChevron
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -5,7 +5,7 @@ import { Controller, FieldError, Control } from "react-hook-form";
|
|||
// ui
|
||||
import { CustomSelect, DoubleCircleIcon, ModuleStatusIcon } from "@plane/ui";
|
||||
// types
|
||||
import type { IModule } from "types";
|
||||
import type { IModule } from "@plane/types";
|
||||
// constants
|
||||
import { MODULE_STATUS } from "constants/module";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1 @@
|
|||
export * from "./select-lead";
|
||||
export * from "./select-members";
|
||||
export * from "./select-status";
|
||||
|
|
|
|||
|
|
@ -1,92 +0,0 @@
|
|||
import { FC } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import useSWR from "swr";
|
||||
// services
|
||||
import { ProjectMemberService } from "services/project";
|
||||
// ui
|
||||
import { Avatar, CustomSearchSelect } from "@plane/ui";
|
||||
// icons
|
||||
import { ChevronDown, UserCircle2 } from "lucide-react";
|
||||
// fetch-keys
|
||||
import { PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
value: string | null | undefined;
|
||||
onChange: (val: string) => void;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
const projectMemberService = new ProjectMemberService();
|
||||
|
||||
export const SidebarLeadSelect: FC<Props> = (props) => {
|
||||
const { value, onChange, disabled = false } = props;
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
// fetch project members
|
||||
const { data: members } = useSWR(
|
||||
workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => projectMemberService.fetchProjectMembers(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
|
||||
const noLeadOption = {
|
||||
value: "",
|
||||
query: "No lead",
|
||||
content: (
|
||||
<div className="flex items-center gap-2">
|
||||
<UserCircle2 className="h-4 w-4" />
|
||||
No lead
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
const options = members?.map((member) => ({
|
||||
value: member.member.id,
|
||||
query: member.member.display_name,
|
||||
content: (
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar name={member?.member.display_name} src={member?.member.avatar} />
|
||||
{member.member.display_name}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
const leadOption = (options || []).concat(noLeadOption);
|
||||
|
||||
const selectedOption = members?.find((m) => m.member.id === value)?.member;
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
|
||||
<UserCircle2 className="h-4 w-4" />
|
||||
<span className="text-base">Lead</span>
|
||||
</div>
|
||||
<div className="flex w-1/2 items-center rounded-sm">
|
||||
<CustomSearchSelect
|
||||
disabled={disabled}
|
||||
className="w-full rounded-sm"
|
||||
value={value}
|
||||
customButtonClassName="rounded-sm"
|
||||
customButton={
|
||||
selectedOption ? (
|
||||
<div className="flex w-full items-center justify-start gap-2 p-0.5">
|
||||
<Avatar name={selectedOption.display_name} src={selectedOption.avatar} />
|
||||
<span className="text-sm text-custom-text-200">{selectedOption?.display_name}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="group flex w-full items-center justify-between gap-2 p-1 text-sm text-custom-text-400">
|
||||
<span>No lead</span>
|
||||
{!disabled && <ChevronDown className="hidden h-3.5 w-3.5 group-hover:flex" />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
options={leadOption}
|
||||
maxHeight="md"
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
import React from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import useSWR from "swr";
|
||||
// services
|
||||
import { ProjectMemberService } from "services/project";
|
||||
// ui
|
||||
import { Avatar, AvatarGroup, CustomSearchSelect, UserGroupIcon } from "@plane/ui";
|
||||
// icons
|
||||
import { ChevronDown } from "lucide-react";
|
||||
// fetch-keys
|
||||
import { PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
value: string[] | undefined;
|
||||
onChange: (val: string[]) => void;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
// services
|
||||
const projectMemberService = new ProjectMemberService();
|
||||
|
||||
export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const { data: members } = useSWR(
|
||||
workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => projectMemberService.fetchProjectMembers(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
|
||||
const options = members?.map((member) => ({
|
||||
value: member.member.id,
|
||||
query: member.member.display_name,
|
||||
content: (
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar name={member?.member.display_name} src={member?.member.avatar} showTooltip={false} />
|
||||
{member.member.display_name}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
|
||||
<UserGroupIcon className="h-4 w-4" />
|
||||
<span className="text-base">Members</span>
|
||||
</div>
|
||||
<div className="flex w-1/2 items-center rounded-sm ">
|
||||
<CustomSearchSelect
|
||||
disabled={disabled}
|
||||
className="w-full rounded-sm"
|
||||
value={value ?? []}
|
||||
customButtonClassName="rounded-sm"
|
||||
customButton={
|
||||
value && value.length > 0 && Array.isArray(value) ? (
|
||||
<div className="px-1">
|
||||
<AvatarGroup showTooltip={false}>
|
||||
{value.map((assigneeId) => {
|
||||
const member = members?.find((m) => m.member.id === assigneeId)?.member;
|
||||
|
||||
if (!member) return null;
|
||||
|
||||
return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
|
||||
})}
|
||||
</AvatarGroup>
|
||||
</div>
|
||||
) : (
|
||||
<div className="group flex w-full items-center justify-between gap-2 p-1 text-sm text-custom-text-400">
|
||||
<span>No members</span>
|
||||
{!disabled && <ChevronDown className="hidden h-3.5 w-3.5 group-hover:flex" />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
options={options}
|
||||
onChange={onChange}
|
||||
maxHeight="md"
|
||||
multiple
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -5,7 +5,7 @@ import { Control, Controller, UseFormWatch } from "react-hook-form";
|
|||
// ui
|
||||
import { CustomSelect, DoubleCircleIcon } from "@plane/ui";
|
||||
// types
|
||||
import { IModule } from "types";
|
||||
import { IModule } from "@plane/types";
|
||||
// common
|
||||
// constants
|
||||
import { MODULE_STATUS } from "constants/module";
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { Disclosure, Popover, Transition } from "@headlessui/react";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// hooks
|
||||
import { useModule, useUser } from "hooks/store";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
|
||||
import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules";
|
||||
import { DeleteModuleModal } from "components/modules";
|
||||
import ProgressChart from "components/core/sidebar/progress-chart";
|
||||
// ui
|
||||
import { CustomRangeDatePicker } from "components/ui";
|
||||
import { CustomMenu, Loader, LayersIcon, CustomSelect, ModuleStatusIcon } from "@plane/ui";
|
||||
import { CustomMenu, Loader, LayersIcon, CustomSelect, ModuleStatusIcon, UserGroupIcon } from "@plane/ui";
|
||||
// icon
|
||||
import {
|
||||
AlertCircle,
|
||||
|
|
@ -25,16 +25,17 @@ import {
|
|||
LinkIcon,
|
||||
Plus,
|
||||
Trash2,
|
||||
UserCircle2,
|
||||
} from "lucide-react";
|
||||
// helpers
|
||||
import { isDateGreaterThanToday, renderFormattedPayloadDate, renderFormattedDate } from "helpers/date-time.helper";
|
||||
import { copyUrlToClipboard } from "helpers/string.helper";
|
||||
// types
|
||||
import { IIssueFilterOptions, ILinkDetails, IModule, ModuleLink } from "types";
|
||||
import { EFilterType } from "store/issues/types";
|
||||
import { ILinkDetails, IModule, ModuleLink } from "@plane/types";
|
||||
// constant
|
||||
import { MODULE_STATUS } from "constants/module";
|
||||
import { EUserWorkspaceRoles } from "constants/workspace";
|
||||
import { EUserProjectRoles } from "constants/project";
|
||||
import { ProjectMemberDropdown } from "components/dropdowns";
|
||||
|
||||
const defaultValues: Partial<IModule> = {
|
||||
lead: "",
|
||||
|
|
@ -52,28 +53,20 @@ type Props = {
|
|||
// TODO: refactor this component
|
||||
export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
const { moduleId, handleClose } = props;
|
||||
|
||||
// states
|
||||
const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
|
||||
const [moduleLinkModal, setModuleLinkModal] = useState(false);
|
||||
const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<ILinkDetails | null>(null);
|
||||
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, peekModule } = router.query;
|
||||
|
||||
// store hooks
|
||||
const {
|
||||
module: {
|
||||
moduleDetails: _moduleDetails,
|
||||
updateModuleDetails,
|
||||
createModuleLink,
|
||||
updateModuleLink,
|
||||
deleteModuleLink,
|
||||
},
|
||||
moduleIssuesFilter: { issueFilters, updateFilters },
|
||||
user: userStore,
|
||||
} = useMobxStore();
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
const { getModuleById, updateModuleDetails, createModuleLink, updateModuleLink, deleteModuleLink } = useModule();
|
||||
|
||||
const userRole = userStore.currentProjectRole;
|
||||
const moduleDetails = _moduleDetails[moduleId] ?? undefined;
|
||||
const moduleDetails = getModuleById(moduleId);
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
|
|
@ -218,31 +211,6 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
}
|
||||
};
|
||||
|
||||
const handleFiltersUpdate = useCallback(
|
||||
(key: keyof IIssueFilterOptions, value: string | string[]) => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
const newValues = issueFilters?.filters?.[key] ?? [];
|
||||
|
||||
if (Array.isArray(value)) {
|
||||
value.forEach((val) => {
|
||||
if (!newValues.includes(val)) newValues.push(val);
|
||||
});
|
||||
} else {
|
||||
if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
|
||||
else newValues.push(value);
|
||||
}
|
||||
|
||||
updateFilters(
|
||||
workspaceSlug.toString(),
|
||||
projectId.toString(),
|
||||
EFilterType.FILTERS,
|
||||
{ [key]: newValues },
|
||||
moduleId
|
||||
);
|
||||
},
|
||||
[workspaceSlug, projectId, moduleId, issueFilters, updateFilters]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (moduleDetails)
|
||||
reset({
|
||||
|
|
@ -264,7 +232,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
|
||||
if (!moduleDetails)
|
||||
return (
|
||||
<Loader className="px-5">
|
||||
<Loader>
|
||||
<div className="space-y-2">
|
||||
<Loader.Item height="15px" width="50%" />
|
||||
<Loader.Item height="15px" width="30%" />
|
||||
|
|
@ -291,7 +259,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
: `${moduleDetails.total_issues}`
|
||||
: `${moduleDetails.completed_issues}/${moduleDetails.total_issues}`;
|
||||
|
||||
const isEditingAllowed = !!userRole && userRole >= EUserWorkspaceRoles.MEMBER;
|
||||
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -485,32 +453,64 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
<Controller
|
||||
control={control}
|
||||
name="lead"
|
||||
render={({ field: { value } }) => (
|
||||
<SidebarLeadSelect
|
||||
disabled={!isEditingAllowed}
|
||||
value={value}
|
||||
onChange={(val: string) => {
|
||||
submitChanges({ lead: val });
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="members"
|
||||
render={({ field: { value } }) => (
|
||||
<SidebarMembersSelect
|
||||
disabled={!isEditingAllowed}
|
||||
value={value}
|
||||
onChange={(val: string[]) => {
|
||||
submitChanges({ members: val });
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{moduleDetails.description && (
|
||||
<span className="w-full whitespace-normal break-words py-2.5 text-sm leading-5 text-custom-text-200">
|
||||
{moduleDetails.description}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-5 pb-6 pt-2.5">
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
|
||||
<UserCircle2 className="h-4 w-4" />
|
||||
<span className="text-base">Lead</span>
|
||||
</div>
|
||||
<Controller
|
||||
control={control}
|
||||
name="lead"
|
||||
render={({ field: { value } }) => (
|
||||
<div className="w-1/2">
|
||||
<ProjectMemberDropdown
|
||||
value={value ?? null}
|
||||
onChange={(val) => {
|
||||
submitChanges({ lead: val });
|
||||
}}
|
||||
projectId={projectId?.toString() ?? ""}
|
||||
multiple={false}
|
||||
buttonVariant="background-with-text"
|
||||
placeholder="Lead"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
|
||||
<UserGroupIcon className="h-4 w-4" />
|
||||
<span className="text-base">Members</span>
|
||||
</div>
|
||||
<Controller
|
||||
control={control}
|
||||
name="members"
|
||||
render={({ field: { value } }) => (
|
||||
<div className="w-1/2">
|
||||
<ProjectMemberDropdown
|
||||
value={value ?? []}
|
||||
onChange={(val: string[]) => {
|
||||
submitChanges({ members: val });
|
||||
}}
|
||||
multiple
|
||||
projectId={projectId?.toString() ?? ""}
|
||||
buttonVariant={value && value?.length > 0 ? "transparent-without-text" : "background-with-text"}
|
||||
buttonClassName={value && value.length > 0 ? "hover:bg-transparent px-0" : ""}
|
||||
disabled={!isEditingAllowed}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
|
||||
|
|
@ -599,8 +599,6 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
totalIssues={moduleDetails.total_issues}
|
||||
module={moduleDetails}
|
||||
isPeekView={Boolean(peekModule)}
|
||||
filters={issueFilters?.filters}
|
||||
handleFiltersUpdate={handleFiltersUpdate}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -628,7 +626,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
<Transition show={open}>
|
||||
<Disclosure.Panel>
|
||||
<div className="mt-2 flex h-72 w-full flex-col space-y-3 overflow-y-auto">
|
||||
{userRole && moduleDetails.link_module && moduleDetails.link_module.length > 0 ? (
|
||||
{currentProjectRole && moduleDetails.link_module && moduleDetails.link_module.length > 0 ? (
|
||||
<>
|
||||
{isEditingAllowed && (
|
||||
<div className="flex w-full items-center justify-end">
|
||||
|
|
@ -647,10 +645,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
handleEditLink={handleEditLink}
|
||||
handleDeleteLink={handleDeleteLink}
|
||||
userAuth={{
|
||||
isGuest: userRole === EUserWorkspaceRoles.GUEST,
|
||||
isViewer: userRole === EUserWorkspaceRoles.VIEWER,
|
||||
isMember: userRole === EUserWorkspaceRoles.MEMBER,
|
||||
isOwner: userRole === EUserWorkspaceRoles.ADMIN,
|
||||
isGuest: currentProjectRole === EUserProjectRoles.GUEST,
|
||||
isViewer: currentProjectRole === EUserProjectRoles.VIEWER,
|
||||
isMember: currentProjectRole === EUserProjectRoles.MEMBER,
|
||||
isOwner: currentProjectRole === EUserProjectRoles.ADMIN,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
|
|
@ -660,15 +658,13 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
<Info className="h-3.5 w-3.5 stroke-[1.5] text-custom-text-300" />
|
||||
<span className="p-0.5 text-xs text-custom-text-300">No links added yet</span>
|
||||
</div>
|
||||
{isEditingAllowed && (
|
||||
<button
|
||||
className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
|
||||
onClick={() => setModuleLinkModal(true)}
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
Add link
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
|
||||
onClick={() => setModuleLinkModal(true)}
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
Add link
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue