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

style: attributes empty state design

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-09-16 01:38:02 +05:30
parent d36a8b1325
commit fb87bfc140
12 changed files with 461 additions and 397 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/components/custom-attributes/attribute-display/checkbox.tsx
View File

@ -11,7 +11,7 @@ export const CustomCheckboxAttribute: React.FC<Props & { value: boolean }> = ({
const handleUpdateCheckbox = (val: boolean | string) => onChange(val.toString());
return (
<>
<div className="bg-custom-background-80 flex items-center gap-2 rounded px-2.5 py-0.5 text-xs">
{attributeDetails.extra_settings.representation === "toggle_switch" ? (
<ToggleSwitch value={value ?? false} onChange={handleUpdateCheckbox} />
) : (
@ -23,6 +23,7 @@ export const CustomCheckboxAttribute: React.FC<Props & { value: boolean }> = ({
/>
</div>
)}
</>
<span>{attributeDetails.display_name}</span>
</div>
);
};

7
web/components/custom-attributes/attribute-display/email.tsx
View File

@ -45,8 +45,11 @@ export const CustomEmailAttribute: React.FC<Props & { value: string | undefined
return (
<div className="flex-shrink-0">
{!isEditing && (
<div className="cursor-pointer text-xs truncate" onClick={() => setIsEditing(true)}>
{value ?? "Empty"}
<div
className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 rounded"
onClick={() => setIsEditing(true)}
>
{value && value !== "" ? value : `Enter ${attributeDetails.display_name}`}
</div>
)}
{isEditing && (

12
web/components/custom-attributes/attribute-display/file.tsx
View File

@ -107,20 +107,20 @@ export const CustomFileAttribute: React.FC<Props & { value: string | undefined }
)}
<div
{...getRootProps()}
className={`flex items-center justify-center border-2 border-dashed text-custom-primary bg-custom-primary/5 text-xs rounded-md px-2.5 py-0.5 cursor-pointer ${
isDragActive ? "bg-custom-primary/10 border-custom-primary" : "border-custom-border-200"
className={`flex items-center justify-center bg-custom-background-80 text-xs rounded px-2.5 py-0.5 cursor-pointer ${
isDragActive ? "bg-custom-primary-100/10" : ""
} ${isDragReject ? "bg-red-500/10" : ""}`}
>
<input {...getInputProps()} />
<span className="flex items-center gap-2">
<span className="">
{isDragActive ? (
<p>Drop here...</p>
) : fileError ? (
<p className="text-center text-red-500">{fileError}</p>
<p className="text-red-500">{fileError}</p>
) : isUploading ? (
<p className="text-center">Uploading...</p>
<p>Uploading...</p>
) : (
<p className="text-center">Upload {value && value !== "" ? "new " : ""}file</p>
<p>Upload {value && value !== "" ? "new " : ""}file</p>
)}
</span>
</div>

7
web/components/custom-attributes/attribute-display/number.tsx
View File

@ -83,7 +83,12 @@ export const CustomNumberAttribute: React.FC<Props & { value: number | undefined
)}
</>
) : (
"Empty"
<div
className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 rounded"
onClick={() => setIsEditing(true)}
>
{value ?? `Enter ${attributeDetails.display_name}`}
</div>
)}
</div>
)}

56
web/components/custom-attributes/attribute-display/select.tsx
View File

@ -69,26 +69,52 @@ export const CustomSelectAttribute: React.FC<
if (multiple) comboboxProps.multiple = true;
return (
<Combobox as="div" className="flex-shrink-0 text-left" {...comboboxProps}>
<Combobox as="div" className="flex-shrink-0 text-left flex items-center" {...comboboxProps}>
{({ open }: { open: boolean }) => {
if (open) handleOnOpen();
return (
<>
<Combobox.Button
ref={dropdownButtonRef}
className={`flex items-center text-xs rounded px-2.5 py-0.5 truncate w-min max-w-full text-left ${
selectedOption ? "" : "bg-custom-background-80"
}`}
style={{
backgroundColor: `${selectedOption?.color}40`,
}}
>
{Array.isArray(value)
? value.length > 0
? value.map((v) => options.find((o) => o.id === v)?.display_name).join(", ")
: `Select ${attributeDetails.display_name}`
: value}
<Combobox.Button ref={dropdownButtonRef}>
{value ? (
Array.isArray(value) ? (
value.length > 0 ? (
<div className="flex items-center gap-1 flex-wrap">
{value.map((v) => {
const optionDetails = options.find((o) => o.id === v);
return (
<span
className="px-2.5 py-0.5 rounded text-xs"
style={{
backgroundColor: `${optionDetails?.color}40`,
}}
>
{optionDetails?.display_name}
</span>
);
})}
</div>
) : (
<div className="text-xs px-2.5 py-0.5 rounded bg-custom-background-80">
Select {attributeDetails.display_name}
</div>
)
) : (
<span
className="px-2.5 py-0.5 rounded text-xs"
style={{
backgroundColor: `${options.find((o) => o.id === value)?.color}40`,
}}
>
{options.find((o) => o.id === value)?.display_name}
</span>
)
) : (
<div className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 rounded">
Select {attributeDetails.display_name}
</div>
)}
</Combobox.Button>
<Transition
as={React.Fragment}

7
web/components/custom-attributes/attribute-display/text.tsx
View File

@ -45,8 +45,11 @@ export const CustomTextAttribute: React.FC<Props & { value: string | undefined }
return (
<div className="flex-shrink-0">
{!isEditing && (
<div className="cursor-pointer text-xs truncate" onClick={() => setIsEditing(true)}>
{value ?? "Empty"}
<div
className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 rounded"
onClick={() => setIsEditing(true)}
>
{value && value !== "" ? value : `Enter ${attributeDetails.display_name}`}
</div>
)}
{isEditing && (

7
web/components/custom-attributes/attribute-display/url.tsx
View File

@ -43,8 +43,11 @@ export const CustomUrlAttribute: React.FC<Props & { value: string | undefined }>
return (
<div className="flex-shrink-0">
{!isEditing && (
<div className="cursor-pointer text-xs truncate" onClick={() => setIsEditing(true)}>
{value ?? "Empty"}
<div
className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 rounded"
onClick={() => setIsEditing(true)}
>
{value && value !== "" ? value : `Enter ${attributeDetails.display_name}`}
</div>
)}
{isEditing && (

4
web/components/custom-attributes/attribute-forms/checkbox-attribute-form.tsx
View File

@ -41,7 +41,7 @@ export const CheckboxAttributeForm: React.FC<FormComponentProps> = ({ control })
<input
type="radio"
name="default_value"
value="checked"
value="true"
id="checked"
className="scale-75"
defaultChecked
@ -53,7 +53,7 @@ export const CheckboxAttributeForm: React.FC<FormComponentProps> = ({ control })
<input
type="radio"
name="default_value"
value="unchecked"
value="false"
id="unchecked"
className="scale-75"
/>

16
web/components/custom-attributes/attributes-list/issue-modal-attributes-list.tsx
View File

@ -23,7 +23,7 @@ import { Loader } from "components/ui";
type Props = {
entityId: string;
issueId: string;
onChange: (attributeId: string, val: string[]) => Promise<void>;
onChange: (attributeId: string, val: string[]) => void;
projectId: string;
values: { [key: string]: string[] };
};
@ -65,7 +65,7 @@ export const IssueModalCustomAttributesList: React.FC<Props> = observer(
issueId={issueId}
onChange={(val: string) => onChange(attribute.id, [val])}
projectId={projectId}
value={attribute.default_value === "checked" ? true : false}
value={values[attribute.id]?.[0] === "true" ? true : false}
/>
)}
{attribute.type === "datetime" && (
@ -75,7 +75,7 @@ export const IssueModalCustomAttributesList: React.FC<Props> = observer(
onChange={(val: string) => onChange(attribute.id, [val])}
projectId={projectId}
value={
attribute.default_value !== "" ? new Date(attribute.default_value) : undefined
values[attribute.id]?.[0] ? new Date(values[attribute.id]?.[0]) : undefined
}
/>
)}
@ -85,7 +85,7 @@ export const IssueModalCustomAttributesList: React.FC<Props> = observer(
issueId={issueId}
onChange={(val: string) => onChange(attribute.id, [val])}
projectId={projectId}
value={attribute.default_value}
value={values[attribute.id]?.[0]}
/>
)}
{attribute.type === "file" && (
@ -103,7 +103,7 @@ export const IssueModalCustomAttributesList: React.FC<Props> = observer(
issueId={issueId}
onChange={(val: string[]) => onChange(attribute.id, val)}
projectId={projectId}
value={[]}
value={values[attribute.id] ?? []}
multiple
/>
)}
@ -114,9 +114,7 @@ export const IssueModalCustomAttributesList: React.FC<Props> = observer(
onChange={(val: string) => onChange(attribute.id, [val])}
projectId={projectId}
value={
attribute.default_value !== ""
? parseInt(attribute.default_value, 10)
: undefined
values[attribute.id]?.[0] ? parseInt(values[attribute.id]?.[0]) : undefined
}
/>
)}
@ -126,7 +124,7 @@ export const IssueModalCustomAttributesList: React.FC<Props> = observer(
issueId={issueId}
onChange={(val: string) => onChange(attribute.id, [val])}
projectId={projectId}
value={attribute.default_value !== "" ? attribute.default_value : undefined}
value={values[attribute.id]?.[0]}
/>
)}
{attribute.type === "select" && (

25
web/components/issues/form.tsx
View File

@ -65,6 +65,8 @@ export interface IssueFormProps {
user: ICurrentUserResponse | undefined;
setIsConfirmDiscardOpen: React.Dispatch<React.SetStateAction<boolean>>;
handleFormDirty: (payload: Partial<IIssue> | null) => void;
customAttributesList: { [key: string]: string[] };
handleCustomAttributesChange: (attributeId: string, val: string[]) => void;
fieldsToShow: (
| "project"
| "name"
@ -95,6 +97,8 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
user,
fieldsToShow,
handleFormDirty,
customAttributesList,
handleCustomAttributesChange,
} = props;
const [stateModal, setStateModal] = useState(false);
@ -105,7 +109,6 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
const [gptAssistantModal, setGptAssistantModal] = useState(false);
const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
const [attributesList, setAttributesList] = useState<{ [key: string]: string[] }>({});
const { setValue: setValueInLocalStorage } = useLocalStorage<any>("draftedIssue", null);
const editorRef = useRef<any>(null);
@ -115,9 +118,6 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
const { setToastAlert } = useToast();
const { customAttributeValues: customAttributeValuesStore } = useMobxStore();
const { createAttributeValue } = customAttributeValuesStore;
const {
register,
formState: { errors, isSubmitting, isDirty },
@ -157,10 +157,6 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
if (!workspaceSlug) return;
await createAttributeValue(workspaceSlug.toString(), projectId, watch("id"), {
issue_properties: attributesList,
});
setGptAssistantModal(false);
reset({
@ -251,8 +247,6 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
const maxDate = targetDate ? new Date(targetDate) : null;
maxDate?.setDate(maxDate.getDate());
console.log("attributesList", attributesList);
return (
<>
{projectId && (
@ -579,16 +573,9 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
<IssueModalCustomAttributesList
entityId={watch("entity") ?? ""}
issueId={watch("id") ?? ""}
onChange={async (attributeId: string, val: string[]) => {
console.log(val);
setAttributesList((prev) => ({
...prev,
[attributeId]: val,
}));
}}
onChange={handleCustomAttributesChange}
projectId={projectId}
values={attributesList}
values={customAttributesList}
/>
)}
</div>

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

@ -39,6 +39,8 @@ import {
} from "constants/fetch-keys";
// constants
import { INBOX_ISSUE_SOURCE } from "constants/inbox";
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
export interface IssuesModalProps {
data?: IIssue | null;
@ -50,6 +52,7 @@ export interface IssuesModalProps {
| "project"
| "name"
| "description"
| "entity"
| "state"
| "priority"
| "assignee"
@ -63,221 +66,275 @@ export interface IssuesModalProps {
onSubmit?: (data: Partial<IIssue>) => Promise<void>;
}
export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
data,
handleClose,
isOpen,
isUpdatingSingleIssue = false,
prePopulateData,
fieldsToShow = ["all"],
onSubmit,
}) => {
// states
const [createMore, setCreateMore] = useState(false);
const [formDirtyState, setFormDirtyState] = useState<any>(null);
const [showConfirmDiscard, setShowConfirmDiscard] = useState(false);
const [activeProject, setActiveProject] = useState<string | null>(null);
export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer(
({
data,
handleClose,
isOpen,
isUpdatingSingleIssue = false,
prePopulateData,
fieldsToShow = ["all"],
onSubmit,
}) => {
// states
const [createMore, setCreateMore] = useState(false);
const [formDirtyState, setFormDirtyState] = useState<any>(null);
const [showConfirmDiscard, setShowConfirmDiscard] = useState(false);
const [activeProject, setActiveProject] = useState<string | null>(null);
const router = useRouter();
const { workspaceSlug, projectId, cycleId, moduleId, viewId, inboxId } = router.query;
const [customAttributesList, setCustomAttributesList] = useState<{ [key: string]: string[] }>(
{}
);
const { displayFilters, params } = useIssuesView();
const { params: calendarParams } = useCalendarIssuesView();
const { ...viewGanttParams } = params;
const { params: inboxParams } = useInboxView();
const { params: spreadsheetParams } = useSpreadsheetIssuesView();
const router = useRouter();
const { workspaceSlug, projectId, cycleId, moduleId, viewId, inboxId } = router.query;
const { user } = useUser();
const { projects } = useProjects();
const { customAttributeValues: customAttributeValuesStore } = useMobxStore();
const { createAttributeValue } = customAttributeValuesStore;
const { groupedIssues, mutateMyIssues } = useMyIssues(workspaceSlug?.toString());
const { displayFilters, params } = useIssuesView();
const { params: calendarParams } = useCalendarIssuesView();
const { ...viewGanttParams } = params;
const { params: inboxParams } = useInboxView();
const { params: spreadsheetParams } = useSpreadsheetIssuesView();
const { setToastAlert } = useToast();
const { user } = useUser();
const { projects } = useProjects();
if (cycleId) prePopulateData = { ...prePopulateData, cycle: cycleId as string };
if (moduleId) prePopulateData = { ...prePopulateData, module: moduleId as string };
if (router.asPath.includes("my-issues") || router.asPath.includes("assigned"))
prePopulateData = {
...prePopulateData,
assignees: [...(prePopulateData?.assignees ?? []), user?.id ?? ""],
const { groupedIssues, mutateMyIssues } = useMyIssues(workspaceSlug?.toString());
const { setToastAlert } = useToast();
if (cycleId) prePopulateData = { ...prePopulateData, cycle: cycleId as string };
if (moduleId) prePopulateData = { ...prePopulateData, module: moduleId as string };
if (router.asPath.includes("my-issues") || router.asPath.includes("assigned"))
prePopulateData = {
...prePopulateData,
assignees: [...(prePopulateData?.assignees ?? []), user?.id ?? ""],
};
const onClose = () => {
if (formDirtyState !== null) {
setShowConfirmDiscard(true);
} else {
handleClose();
setActiveProject(null);
setCustomAttributesList({});
}
};
const onClose = () => {
if (formDirtyState !== null) {
setShowConfirmDiscard(true);
} else {
const onDiscardClose = () => {
handleClose();
setActiveProject(null);
}
};
const onDiscardClose = () => {
handleClose();
setActiveProject(null);
};
const handleFormDirty = (data: any) => {
setFormDirtyState(data);
};
useEffect(() => {
// if modal is closed, reset active project to null
// and return to avoid activeProject being set to some other project
if (!isOpen) {
setActiveProject(null);
return;
}
// if data is present, set active project to the project of the
// issue. This has more priority than the project in the url.
if (data && data.project) {
setActiveProject(data.project);
return;
}
// 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]);
const addIssueToCycle = async (issueId: string, cycleId: string) => {
if (!workspaceSlug || !activeProject) return;
await issuesService
.addIssueToCycle(
workspaceSlug as string,
activeProject ?? "",
cycleId,
{
issues: [issueId],
},
user
)
.then(() => {
if (cycleId) {
mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId, params));
mutate(CYCLE_DETAILS(cycleId as string));
}
});
};
const addIssueToModule = async (issueId: string, moduleId: string) => {
if (!workspaceSlug || !activeProject) return;
await modulesService
.addIssuesToModule(
workspaceSlug as string,
activeProject ?? "",
moduleId as string,
{
issues: [issueId],
},
user
)
.then(() => {
if (moduleId) {
mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
mutate(MODULE_DETAILS(moduleId as string));
}
});
};
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 inboxServices
.createInboxIssue(
workspaceSlug.toString(),
activeProject.toString(),
inboxId.toString(),
payload,
user
)
.then((res) => {
setToastAlert({
type: "success",
title: "Success!",
message: "Issue created successfully.",
});
const handleFormDirty = (data: any) => {
setFormDirtyState(data);
};
router.push(
`/${workspaceSlug}/projects/${activeProject}/inbox/${inboxId}?inboxIssueId=${res.issue_inbox[0].id}`
);
useEffect(() => {
// if modal is closed, reset active project to null
// and return to avoid activeProject being set to some other project
if (!isOpen) {
setActiveProject(null);
return;
}
mutate(INBOX_ISSUES(inboxId.toString(), inboxParams));
})
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Issue could not be created. Please try again.",
});
});
};
// if data is present, set active project to the project of the
// issue. This has more priority than the project in the url.
if (data && data.project) {
setActiveProject(data.project);
return;
}
const calendarFetchKey = cycleId
? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), calendarParams)
: moduleId
? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), calendarParams)
: viewId
? VIEW_ISSUES(viewId.toString(), calendarParams)
: PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "", calendarParams);
// 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]);
const spreadsheetFetchKey = cycleId
? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), spreadsheetParams)
: moduleId
? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), spreadsheetParams)
: viewId
? VIEW_ISSUES(viewId.toString(), spreadsheetParams)
: PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "", spreadsheetParams);
const addIssueToCycle = async (issueId: string, cycleId: string) => {
if (!workspaceSlug || !activeProject) return;
const ganttFetchKey = cycleId
? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString())
: moduleId
? MODULE_ISSUES_WITH_PARAMS(moduleId.toString())
: viewId
? VIEW_ISSUES(viewId.toString(), viewGanttParams)
: PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "");
const createIssue = async (payload: Partial<IIssue>) => {
if (!workspaceSlug || !activeProject) return;
if (inboxId) await addIssueToInbox(payload);
else
await issuesService
.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);
.addIssueToCycle(
workspaceSlug as string,
activeProject ?? "",
cycleId,
{
issues: [issueId],
},
user
)
.then(() => {
if (cycleId) {
mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId, params));
mutate(CYCLE_DETAILS(cycleId as string));
}
});
};
if (displayFilters.layout === "calendar") mutate(calendarFetchKey);
if (displayFilters.layout === "gantt_chart")
mutate(ganttFetchKey, {
start_target_date: true,
order_by: "sort_order",
});
if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
if (groupedIssues) mutateMyIssues();
const addIssueToModule = async (issueId: string, moduleId: string) => {
if (!workspaceSlug || !activeProject) return;
await modulesService
.addIssuesToModule(
workspaceSlug as string,
activeProject ?? "",
moduleId as string,
{
issues: [issueId],
},
user
)
.then(() => {
if (moduleId) {
mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
mutate(MODULE_DETAILS(moduleId as string));
}
});
};
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 inboxServices
.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 calendarFetchKey = cycleId
? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), calendarParams)
: moduleId
? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), calendarParams)
: viewId
? VIEW_ISSUES(viewId.toString(), calendarParams)
: PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "", calendarParams);
const spreadsheetFetchKey = cycleId
? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), spreadsheetParams)
: moduleId
? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), spreadsheetParams)
: viewId
? VIEW_ISSUES(viewId.toString(), spreadsheetParams)
: PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "", spreadsheetParams);
const ganttFetchKey = cycleId
? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString())
: moduleId
? MODULE_ISSUES_WITH_PARAMS(moduleId.toString())
: viewId
? VIEW_ISSUES(viewId.toString(), viewGanttParams)
: PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "");
const createIssue = async (payload: Partial<IIssue>) => {
if (!workspaceSlug || !activeProject) return;
let issueToReturn: Partial<IIssue> = {};
if (inboxId) await addIssueToInbox(payload);
else
await issuesService
.createIssues(workspaceSlug as string, activeProject ?? "", payload, user)
.then(async (res) => {
issueToReturn = 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 === "calendar") mutate(calendarFetchKey);
if (displayFilters.layout === "gantt_chart")
mutate(ganttFetchKey, {
start_target_date: true,
order_by: "sort_order",
});
if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
if (groupedIssues) mutateMyIssues();
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));
})
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Issue could not be created. Please try again.",
});
});
if (!createMore) onDiscardClose();
return issueToReturn;
};
const createDraftIssue = async () => {
if (!workspaceSlug || !activeProject || !user) return;
const payload: Partial<IIssue> = {
...formDirtyState,
};
await issuesService
.createDraftIssue(workspaceSlug as string, activeProject ?? "", payload, user)
.then(() => {
mutate(PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
if (groupedIssues) mutateMyIssues();
setToastAlert({
type: "success",
title: "Success!",
message: "Draft Issue created successfully.",
});
handleClose();
setActiveProject(null);
setFormDirtyState(null);
setShowConfirmDiscard(false);
if (payload.assignees_list?.some((assignee) => assignee === user?.id))
mutate(USER_ISSUE(workspaceSlug as string));
@ -290,163 +347,144 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
message: "Issue could not be created. Please try again.",
});
});
if (!createMore) onDiscardClose();
};
const createDraftIssue = async () => {
if (!workspaceSlug || !activeProject || !user) return;
const payload: Partial<IIssue> = {
...formDirtyState,
};
await issuesService
.createDraftIssue(workspaceSlug as string, activeProject ?? "", payload, user)
.then(() => {
mutate(PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
if (groupedIssues) mutateMyIssues();
const updateIssue = async (payload: Partial<IIssue>) => {
if (!user) return;
setToastAlert({
type: "success",
title: "Success!",
message: "Draft Issue created successfully.",
let issueToReturn: Partial<IIssue> = {};
await issuesService
.patchIssue(workspaceSlug as string, activeProject ?? "", data?.id ?? "", payload, user)
.then((res) => {
issueToReturn = res;
if (isUpdatingSingleIssue) {
mutate<IIssue>(PROJECT_ISSUES_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
} else {
if (displayFilters.layout === "calendar") mutate(calendarFetchKey);
if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
if (payload.parent) mutate(SUB_ISSUES(payload.parent.toString()));
mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
}
if (payload.cycle && payload.cycle !== "") addIssueToCycle(res.id, payload.cycle);
if (payload.module && payload.module !== "") addIssueToModule(res.id, payload.module);
if (!createMore) onDiscardClose();
setToastAlert({
type: "success",
title: "Success!",
message: "Issue updated successfully.",
});
})
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Issue could not be updated. Please try again.",
});
});
handleClose();
setActiveProject(null);
setFormDirtyState(null);
setShowConfirmDiscard(false);
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));
})
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Issue could not be created. Please try again.",
});
});
};
const updateIssue = async (payload: Partial<IIssue>) => {
if (!user) return;
await issuesService
.patchIssue(workspaceSlug as string, activeProject ?? "", data?.id ?? "", payload, user)
.then((res) => {
if (isUpdatingSingleIssue) {
mutate<IIssue>(PROJECT_ISSUES_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
} else {
if (displayFilters.layout === "calendar") mutate(calendarFetchKey);
if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
if (payload.parent) mutate(SUB_ISSUES(payload.parent.toString()));
mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
}
if (payload.cycle && payload.cycle !== "") addIssueToCycle(res.id, payload.cycle);
if (payload.module && payload.module !== "") addIssueToModule(res.id, payload.module);
if (!createMore) onDiscardClose();
setToastAlert({
type: "success",
title: "Success!",
message: "Issue updated successfully.",
});
})
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Issue could not be updated. Please try again.",
});
});
};
const handleFormSubmit = async (formData: Partial<IIssue>) => {
if (!workspaceSlug || !activeProject) return;
const payload: Partial<IIssue> = {
...formData,
assignees_list: formData.assignees ?? [],
labels_list: formData.labels ?? [],
description: formData.description ?? "",
description_html: formData.description_html ?? "<p></p>",
return issueToReturn;
};
if (!data) await createIssue(payload);
else await updateIssue(payload);
const handleFormSubmit = async (formData: Partial<IIssue>) => {
if (!workspaceSlug || !activeProject) return;
if (onSubmit) await onSubmit(payload);
};
const payload: Partial<IIssue> = {
...formData,
assignees_list: formData.assignees ?? [],
labels_list: formData.labels ?? [],
description: formData.description ?? "",
description_html: formData.description_html ?? "<p></p>",
};
if (!projects || projects.length === 0) return null;
let issueResponse: Partial<IIssue> | undefined = {};
return (
<>
<ConfirmIssueDiscard
isOpen={showConfirmDiscard}
handleClose={() => setShowConfirmDiscard(false)}
onConfirm={createDraftIssue}
onDiscard={() => {
handleClose();
setActiveProject(null);
setFormDirtyState(null);
setShowConfirmDiscard(false);
}}
/>
if (!data) issueResponse = await createIssue(payload);
else issueResponse = await updateIssue(payload);
<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>
if (issueResponse && issueResponse.id && Object.keys(customAttributesList).length > 0)
await createAttributeValue(workspaceSlug.toString(), activeProject, issueResponse.id, {
issue_properties: customAttributesList,
});
<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">
<IssueForm
handleFormSubmit={handleFormSubmit}
initialData={data ?? prePopulateData}
createMore={createMore}
setCreateMore={setCreateMore}
handleClose={onClose}
handleDiscardClose={onDiscardClose}
setIsConfirmDiscardOpen={setShowConfirmDiscard}
projectId={activeProject ?? ""}
setActiveProject={setActiveProject}
status={data ? true : false}
user={user}
fieldsToShow={fieldsToShow}
handleFormDirty={handleFormDirty}
/>
</Dialog.Panel>
</Transition.Child>
if (onSubmit) await onSubmit(payload);
};
if (!projects || projects.length === 0) return null;
return (
<>
<ConfirmIssueDiscard
isOpen={showConfirmDiscard}
handleClose={() => setShowConfirmDiscard(false)}
onConfirm={createDraftIssue}
onDiscard={() => {
handleClose();
setActiveProject(null);
setFormDirtyState(null);
setShowConfirmDiscard(false);
}}
/>
<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">
<IssueForm
handleFormSubmit={handleFormSubmit}
initialData={data ?? prePopulateData}
createMore={createMore}
setCreateMore={setCreateMore}
handleClose={onClose}
handleDiscardClose={onDiscardClose}
setIsConfirmDiscardOpen={setShowConfirmDiscard}
projectId={activeProject ?? ""}
setActiveProject={setActiveProject}
status={data ? true : false}
user={user}
customAttributesList={customAttributesList}
handleCustomAttributesChange={(attributeId: string, val: string[]) => {
setCustomAttributesList((prev) => ({
...prev,
[attributeId]: val,
}));
}}
fieldsToShow={fieldsToShow}
handleFormDirty={handleFormDirty}
/>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</div>
</Dialog>
</Transition.Root>
</>
);
};
</Dialog>
</Transition.Root>
</>
);
}
);

2
web/constants/custom-attributes.ts
View File

@ -24,7 +24,7 @@ export const CUSTOM_ATTRIBUTES_LIST: {
} = {
checkbox: {
defaultFormValues: {
default_value: "checked",
default_value: "true",
display_name: "",
extra_settings: {
representation: "check",