forked from github/plane
style: attributes empty state design
This commit is contained in:
parent
d36a8b1325
commit
fb87bfc140
@ -11,7 +11,7 @@ export const CustomCheckboxAttribute: React.FC<Props & { value: boolean }> = ({
|
|||||||
const handleUpdateCheckbox = (val: boolean | string) => onChange(val.toString());
|
const handleUpdateCheckbox = (val: boolean | string) => onChange(val.toString());
|
||||||
|
|
||||||
return (
|
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" ? (
|
{attributeDetails.extra_settings.representation === "toggle_switch" ? (
|
||||||
<ToggleSwitch value={value ?? false} onChange={handleUpdateCheckbox} />
|
<ToggleSwitch value={value ?? false} onChange={handleUpdateCheckbox} />
|
||||||
) : (
|
) : (
|
||||||
@ -23,6 +23,7 @@ export const CustomCheckboxAttribute: React.FC<Props & { value: boolean }> = ({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</>
|
<span>{attributeDetails.display_name}</span>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -45,8 +45,11 @@ export const CustomEmailAttribute: React.FC<Props & { value: string | undefined
|
|||||||
return (
|
return (
|
||||||
<div className="flex-shrink-0">
|
<div className="flex-shrink-0">
|
||||||
{!isEditing && (
|
{!isEditing && (
|
||||||
<div className="cursor-pointer text-xs truncate" onClick={() => setIsEditing(true)}>
|
<div
|
||||||
{value ?? "Empty"}
|
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>
|
</div>
|
||||||
)}
|
)}
|
||||||
{isEditing && (
|
{isEditing && (
|
||||||
|
@ -107,20 +107,20 @@ export const CustomFileAttribute: React.FC<Props & { value: string | undefined }
|
|||||||
)}
|
)}
|
||||||
<div
|
<div
|
||||||
{...getRootProps()}
|
{...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 ${
|
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/10 border-custom-primary" : "border-custom-border-200"
|
isDragActive ? "bg-custom-primary-100/10" : ""
|
||||||
} ${isDragReject ? "bg-red-500/10" : ""}`}
|
} ${isDragReject ? "bg-red-500/10" : ""}`}
|
||||||
>
|
>
|
||||||
<input {...getInputProps()} />
|
<input {...getInputProps()} />
|
||||||
<span className="flex items-center gap-2">
|
<span className="">
|
||||||
{isDragActive ? (
|
{isDragActive ? (
|
||||||
<p>Drop here...</p>
|
<p>Drop here...</p>
|
||||||
) : fileError ? (
|
) : fileError ? (
|
||||||
<p className="text-center text-red-500">{fileError}</p>
|
<p className="text-red-500">{fileError}</p>
|
||||||
) : isUploading ? (
|
) : 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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -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>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
@ -69,26 +69,52 @@ export const CustomSelectAttribute: React.FC<
|
|||||||
if (multiple) comboboxProps.multiple = true;
|
if (multiple) comboboxProps.multiple = true;
|
||||||
|
|
||||||
return (
|
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 }) => {
|
{({ open }: { open: boolean }) => {
|
||||||
if (open) handleOnOpen();
|
if (open) handleOnOpen();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Combobox.Button
|
<Combobox.Button ref={dropdownButtonRef}>
|
||||||
ref={dropdownButtonRef}
|
{value ? (
|
||||||
className={`flex items-center text-xs rounded px-2.5 py-0.5 truncate w-min max-w-full text-left ${
|
Array.isArray(value) ? (
|
||||||
selectedOption ? "" : "bg-custom-background-80"
|
value.length > 0 ? (
|
||||||
}`}
|
<div className="flex items-center gap-1 flex-wrap">
|
||||||
style={{
|
{value.map((v) => {
|
||||||
backgroundColor: `${selectedOption?.color}40`,
|
const optionDetails = options.find((o) => o.id === v);
|
||||||
}}
|
|
||||||
>
|
return (
|
||||||
{Array.isArray(value)
|
<span
|
||||||
? value.length > 0
|
className="px-2.5 py-0.5 rounded text-xs"
|
||||||
? value.map((v) => options.find((o) => o.id === v)?.display_name).join(", ")
|
style={{
|
||||||
: `Select ${attributeDetails.display_name}`
|
backgroundColor: `${optionDetails?.color}40`,
|
||||||
: value}
|
}}
|
||||||
|
>
|
||||||
|
{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>
|
</Combobox.Button>
|
||||||
<Transition
|
<Transition
|
||||||
as={React.Fragment}
|
as={React.Fragment}
|
||||||
|
@ -45,8 +45,11 @@ export const CustomTextAttribute: React.FC<Props & { value: string | undefined }
|
|||||||
return (
|
return (
|
||||||
<div className="flex-shrink-0">
|
<div className="flex-shrink-0">
|
||||||
{!isEditing && (
|
{!isEditing && (
|
||||||
<div className="cursor-pointer text-xs truncate" onClick={() => setIsEditing(true)}>
|
<div
|
||||||
{value ?? "Empty"}
|
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>
|
</div>
|
||||||
)}
|
)}
|
||||||
{isEditing && (
|
{isEditing && (
|
||||||
|
@ -43,8 +43,11 @@ export const CustomUrlAttribute: React.FC<Props & { value: string | undefined }>
|
|||||||
return (
|
return (
|
||||||
<div className="flex-shrink-0">
|
<div className="flex-shrink-0">
|
||||||
{!isEditing && (
|
{!isEditing && (
|
||||||
<div className="cursor-pointer text-xs truncate" onClick={() => setIsEditing(true)}>
|
<div
|
||||||
{value ?? "Empty"}
|
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>
|
</div>
|
||||||
)}
|
)}
|
||||||
{isEditing && (
|
{isEditing && (
|
||||||
|
@ -41,7 +41,7 @@ export const CheckboxAttributeForm: React.FC<FormComponentProps> = ({ control })
|
|||||||
<input
|
<input
|
||||||
type="radio"
|
type="radio"
|
||||||
name="default_value"
|
name="default_value"
|
||||||
value="checked"
|
value="true"
|
||||||
id="checked"
|
id="checked"
|
||||||
className="scale-75"
|
className="scale-75"
|
||||||
defaultChecked
|
defaultChecked
|
||||||
@ -53,7 +53,7 @@ export const CheckboxAttributeForm: React.FC<FormComponentProps> = ({ control })
|
|||||||
<input
|
<input
|
||||||
type="radio"
|
type="radio"
|
||||||
name="default_value"
|
name="default_value"
|
||||||
value="unchecked"
|
value="false"
|
||||||
id="unchecked"
|
id="unchecked"
|
||||||
className="scale-75"
|
className="scale-75"
|
||||||
/>
|
/>
|
||||||
|
@ -23,7 +23,7 @@ import { Loader } from "components/ui";
|
|||||||
type Props = {
|
type Props = {
|
||||||
entityId: string;
|
entityId: string;
|
||||||
issueId: string;
|
issueId: string;
|
||||||
onChange: (attributeId: string, val: string[]) => Promise<void>;
|
onChange: (attributeId: string, val: string[]) => void;
|
||||||
projectId: string;
|
projectId: string;
|
||||||
values: { [key: string]: string[] };
|
values: { [key: string]: string[] };
|
||||||
};
|
};
|
||||||
@ -65,7 +65,7 @@ export const IssueModalCustomAttributesList: React.FC<Props> = observer(
|
|||||||
issueId={issueId}
|
issueId={issueId}
|
||||||
onChange={(val: string) => onChange(attribute.id, [val])}
|
onChange={(val: string) => onChange(attribute.id, [val])}
|
||||||
projectId={projectId}
|
projectId={projectId}
|
||||||
value={attribute.default_value === "checked" ? true : false}
|
value={values[attribute.id]?.[0] === "true" ? true : false}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{attribute.type === "datetime" && (
|
{attribute.type === "datetime" && (
|
||||||
@ -75,7 +75,7 @@ export const IssueModalCustomAttributesList: React.FC<Props> = observer(
|
|||||||
onChange={(val: string) => onChange(attribute.id, [val])}
|
onChange={(val: string) => onChange(attribute.id, [val])}
|
||||||
projectId={projectId}
|
projectId={projectId}
|
||||||
value={
|
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}
|
issueId={issueId}
|
||||||
onChange={(val: string) => onChange(attribute.id, [val])}
|
onChange={(val: string) => onChange(attribute.id, [val])}
|
||||||
projectId={projectId}
|
projectId={projectId}
|
||||||
value={attribute.default_value}
|
value={values[attribute.id]?.[0]}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{attribute.type === "file" && (
|
{attribute.type === "file" && (
|
||||||
@ -103,7 +103,7 @@ export const IssueModalCustomAttributesList: React.FC<Props> = observer(
|
|||||||
issueId={issueId}
|
issueId={issueId}
|
||||||
onChange={(val: string[]) => onChange(attribute.id, val)}
|
onChange={(val: string[]) => onChange(attribute.id, val)}
|
||||||
projectId={projectId}
|
projectId={projectId}
|
||||||
value={[]}
|
value={values[attribute.id] ?? []}
|
||||||
multiple
|
multiple
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
@ -114,9 +114,7 @@ export const IssueModalCustomAttributesList: React.FC<Props> = observer(
|
|||||||
onChange={(val: string) => onChange(attribute.id, [val])}
|
onChange={(val: string) => onChange(attribute.id, [val])}
|
||||||
projectId={projectId}
|
projectId={projectId}
|
||||||
value={
|
value={
|
||||||
attribute.default_value !== ""
|
values[attribute.id]?.[0] ? parseInt(values[attribute.id]?.[0]) : undefined
|
||||||
? parseInt(attribute.default_value, 10)
|
|
||||||
: undefined
|
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
@ -126,7 +124,7 @@ export const IssueModalCustomAttributesList: React.FC<Props> = observer(
|
|||||||
issueId={issueId}
|
issueId={issueId}
|
||||||
onChange={(val: string) => onChange(attribute.id, [val])}
|
onChange={(val: string) => onChange(attribute.id, [val])}
|
||||||
projectId={projectId}
|
projectId={projectId}
|
||||||
value={attribute.default_value !== "" ? attribute.default_value : undefined}
|
value={values[attribute.id]?.[0]}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{attribute.type === "select" && (
|
{attribute.type === "select" && (
|
||||||
|
@ -65,6 +65,8 @@ export interface IssueFormProps {
|
|||||||
user: ICurrentUserResponse | undefined;
|
user: ICurrentUserResponse | undefined;
|
||||||
setIsConfirmDiscardOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
setIsConfirmDiscardOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||||
handleFormDirty: (payload: Partial<IIssue> | null) => void;
|
handleFormDirty: (payload: Partial<IIssue> | null) => void;
|
||||||
|
customAttributesList: { [key: string]: string[] };
|
||||||
|
handleCustomAttributesChange: (attributeId: string, val: string[]) => void;
|
||||||
fieldsToShow: (
|
fieldsToShow: (
|
||||||
| "project"
|
| "project"
|
||||||
| "name"
|
| "name"
|
||||||
@ -95,6 +97,8 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
|
|||||||
user,
|
user,
|
||||||
fieldsToShow,
|
fieldsToShow,
|
||||||
handleFormDirty,
|
handleFormDirty,
|
||||||
|
customAttributesList,
|
||||||
|
handleCustomAttributesChange,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const [stateModal, setStateModal] = useState(false);
|
const [stateModal, setStateModal] = useState(false);
|
||||||
@ -105,7 +109,6 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
|
|||||||
const [gptAssistantModal, setGptAssistantModal] = useState(false);
|
const [gptAssistantModal, setGptAssistantModal] = useState(false);
|
||||||
const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
|
const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
|
||||||
|
|
||||||
const [attributesList, setAttributesList] = useState<{ [key: string]: string[] }>({});
|
|
||||||
const { setValue: setValueInLocalStorage } = useLocalStorage<any>("draftedIssue", null);
|
const { setValue: setValueInLocalStorage } = useLocalStorage<any>("draftedIssue", null);
|
||||||
|
|
||||||
const editorRef = useRef<any>(null);
|
const editorRef = useRef<any>(null);
|
||||||
@ -115,9 +118,6 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
|
|||||||
|
|
||||||
const { setToastAlert } = useToast();
|
const { setToastAlert } = useToast();
|
||||||
|
|
||||||
const { customAttributeValues: customAttributeValuesStore } = useMobxStore();
|
|
||||||
const { createAttributeValue } = customAttributeValuesStore;
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
formState: { errors, isSubmitting, isDirty },
|
formState: { errors, isSubmitting, isDirty },
|
||||||
@ -157,10 +157,6 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
|
|||||||
|
|
||||||
if (!workspaceSlug) return;
|
if (!workspaceSlug) return;
|
||||||
|
|
||||||
await createAttributeValue(workspaceSlug.toString(), projectId, watch("id"), {
|
|
||||||
issue_properties: attributesList,
|
|
||||||
});
|
|
||||||
|
|
||||||
setGptAssistantModal(false);
|
setGptAssistantModal(false);
|
||||||
|
|
||||||
reset({
|
reset({
|
||||||
@ -251,8 +247,6 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
|
|||||||
const maxDate = targetDate ? new Date(targetDate) : null;
|
const maxDate = targetDate ? new Date(targetDate) : null;
|
||||||
maxDate?.setDate(maxDate.getDate());
|
maxDate?.setDate(maxDate.getDate());
|
||||||
|
|
||||||
console.log("attributesList", attributesList);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{projectId && (
|
{projectId && (
|
||||||
@ -579,16 +573,9 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
|
|||||||
<IssueModalCustomAttributesList
|
<IssueModalCustomAttributesList
|
||||||
entityId={watch("entity") ?? ""}
|
entityId={watch("entity") ?? ""}
|
||||||
issueId={watch("id") ?? ""}
|
issueId={watch("id") ?? ""}
|
||||||
onChange={async (attributeId: string, val: string[]) => {
|
onChange={handleCustomAttributesChange}
|
||||||
console.log(val);
|
|
||||||
|
|
||||||
setAttributesList((prev) => ({
|
|
||||||
...prev,
|
|
||||||
[attributeId]: val,
|
|
||||||
}));
|
|
||||||
}}
|
|
||||||
projectId={projectId}
|
projectId={projectId}
|
||||||
values={attributesList}
|
values={customAttributesList}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -39,6 +39,8 @@ import {
|
|||||||
} from "constants/fetch-keys";
|
} from "constants/fetch-keys";
|
||||||
// constants
|
// constants
|
||||||
import { INBOX_ISSUE_SOURCE } from "constants/inbox";
|
import { INBOX_ISSUE_SOURCE } from "constants/inbox";
|
||||||
|
import { observer } from "mobx-react-lite";
|
||||||
|
import { useMobxStore } from "lib/mobx/store-provider";
|
||||||
|
|
||||||
export interface IssuesModalProps {
|
export interface IssuesModalProps {
|
||||||
data?: IIssue | null;
|
data?: IIssue | null;
|
||||||
@ -50,6 +52,7 @@ export interface IssuesModalProps {
|
|||||||
| "project"
|
| "project"
|
||||||
| "name"
|
| "name"
|
||||||
| "description"
|
| "description"
|
||||||
|
| "entity"
|
||||||
| "state"
|
| "state"
|
||||||
| "priority"
|
| "priority"
|
||||||
| "assignee"
|
| "assignee"
|
||||||
@ -63,221 +66,275 @@ export interface IssuesModalProps {
|
|||||||
onSubmit?: (data: Partial<IIssue>) => Promise<void>;
|
onSubmit?: (data: Partial<IIssue>) => Promise<void>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
|
export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer(
|
||||||
data,
|
({
|
||||||
handleClose,
|
data,
|
||||||
isOpen,
|
handleClose,
|
||||||
isUpdatingSingleIssue = false,
|
isOpen,
|
||||||
prePopulateData,
|
isUpdatingSingleIssue = false,
|
||||||
fieldsToShow = ["all"],
|
prePopulateData,
|
||||||
onSubmit,
|
fieldsToShow = ["all"],
|
||||||
}) => {
|
onSubmit,
|
||||||
// states
|
}) => {
|
||||||
const [createMore, setCreateMore] = useState(false);
|
// states
|
||||||
const [formDirtyState, setFormDirtyState] = useState<any>(null);
|
const [createMore, setCreateMore] = useState(false);
|
||||||
const [showConfirmDiscard, setShowConfirmDiscard] = useState(false);
|
const [formDirtyState, setFormDirtyState] = useState<any>(null);
|
||||||
const [activeProject, setActiveProject] = useState<string | null>(null);
|
const [showConfirmDiscard, setShowConfirmDiscard] = useState(false);
|
||||||
|
const [activeProject, setActiveProject] = useState<string | null>(null);
|
||||||
|
|
||||||
const router = useRouter();
|
const [customAttributesList, setCustomAttributesList] = useState<{ [key: string]: string[] }>(
|
||||||
const { workspaceSlug, projectId, cycleId, moduleId, viewId, inboxId } = router.query;
|
{}
|
||||||
|
);
|
||||||
|
|
||||||
const { displayFilters, params } = useIssuesView();
|
const router = useRouter();
|
||||||
const { params: calendarParams } = useCalendarIssuesView();
|
const { workspaceSlug, projectId, cycleId, moduleId, viewId, inboxId } = router.query;
|
||||||
const { ...viewGanttParams } = params;
|
|
||||||
const { params: inboxParams } = useInboxView();
|
|
||||||
const { params: spreadsheetParams } = useSpreadsheetIssuesView();
|
|
||||||
|
|
||||||
const { user } = useUser();
|
const { customAttributeValues: customAttributeValuesStore } = useMobxStore();
|
||||||
const { projects } = useProjects();
|
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 };
|
const { groupedIssues, mutateMyIssues } = useMyIssues(workspaceSlug?.toString());
|
||||||
if (moduleId) prePopulateData = { ...prePopulateData, module: moduleId as string };
|
|
||||||
if (router.asPath.includes("my-issues") || router.asPath.includes("assigned"))
|
const { setToastAlert } = useToast();
|
||||||
prePopulateData = {
|
|
||||||
...prePopulateData,
|
if (cycleId) prePopulateData = { ...prePopulateData, cycle: cycleId as string };
|
||||||
assignees: [...(prePopulateData?.assignees ?? []), user?.id ?? ""],
|
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 = () => {
|
const onDiscardClose = () => {
|
||||||
if (formDirtyState !== null) {
|
|
||||||
setShowConfirmDiscard(true);
|
|
||||||
} else {
|
|
||||||
handleClose();
|
handleClose();
|
||||||
setActiveProject(null);
|
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
|
const handleFormDirty = (data: any) => {
|
||||||
.createInboxIssue(
|
setFormDirtyState(data);
|
||||||
workspaceSlug.toString(),
|
};
|
||||||
activeProject.toString(),
|
|
||||||
inboxId.toString(),
|
|
||||||
payload,
|
|
||||||
user
|
|
||||||
)
|
|
||||||
.then((res) => {
|
|
||||||
setToastAlert({
|
|
||||||
type: "success",
|
|
||||||
title: "Success!",
|
|
||||||
message: "Issue created successfully.",
|
|
||||||
});
|
|
||||||
|
|
||||||
router.push(
|
useEffect(() => {
|
||||||
`/${workspaceSlug}/projects/${activeProject}/inbox/${inboxId}?inboxIssueId=${res.issue_inbox[0].id}`
|
// 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));
|
// if data is present, set active project to the project of the
|
||||||
})
|
// issue. This has more priority than the project in the url.
|
||||||
.catch(() => {
|
if (data && data.project) {
|
||||||
setToastAlert({
|
setActiveProject(data.project);
|
||||||
type: "error",
|
return;
|
||||||
title: "Error!",
|
}
|
||||||
message: "Issue could not be created. Please try again.",
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const calendarFetchKey = cycleId
|
// if data is not present, set active project to the project
|
||||||
? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), calendarParams)
|
// in the url. This has the least priority.
|
||||||
: moduleId
|
if (projects && projects.length > 0 && !activeProject)
|
||||||
? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), calendarParams)
|
setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);
|
||||||
: viewId
|
}, [activeProject, data, projectId, projects, isOpen]);
|
||||||
? VIEW_ISSUES(viewId.toString(), calendarParams)
|
|
||||||
: PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "", calendarParams);
|
|
||||||
|
|
||||||
const spreadsheetFetchKey = cycleId
|
const addIssueToCycle = async (issueId: string, cycleId: string) => {
|
||||||
? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), spreadsheetParams)
|
if (!workspaceSlug || !activeProject) return;
|
||||||
: 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;
|
|
||||||
|
|
||||||
if (inboxId) await addIssueToInbox(payload);
|
|
||||||
else
|
|
||||||
await issuesService
|
await issuesService
|
||||||
.createIssues(workspaceSlug as string, activeProject ?? "", payload, user)
|
.addIssueToCycle(
|
||||||
.then(async (res) => {
|
workspaceSlug as string,
|
||||||
mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
|
activeProject ?? "",
|
||||||
if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res.id, payload.cycle);
|
cycleId,
|
||||||
if (payload.module && payload.module !== "")
|
{
|
||||||
await addIssueToModule(res.id, payload.module);
|
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);
|
const addIssueToModule = async (issueId: string, moduleId: string) => {
|
||||||
if (displayFilters.layout === "gantt_chart")
|
if (!workspaceSlug || !activeProject) return;
|
||||||
mutate(ganttFetchKey, {
|
|
||||||
start_target_date: true,
|
|
||||||
order_by: "sort_order",
|
|
||||||
});
|
|
||||||
if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
|
|
||||||
if (groupedIssues) mutateMyIssues();
|
|
||||||
|
|
||||||
|
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({
|
setToastAlert({
|
||||||
type: "success",
|
type: "success",
|
||||||
title: "Success!",
|
title: "Success!",
|
||||||
message: "Issue created successfully.",
|
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))
|
if (payload.assignees_list?.some((assignee) => assignee === user?.id))
|
||||||
mutate(USER_ISSUE(workspaceSlug as string));
|
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.",
|
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
|
const updateIssue = async (payload: Partial<IIssue>) => {
|
||||||
.createDraftIssue(workspaceSlug as string, activeProject ?? "", payload, user)
|
if (!user) return;
|
||||||
.then(() => {
|
|
||||||
mutate(PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
|
|
||||||
if (groupedIssues) mutateMyIssues();
|
|
||||||
|
|
||||||
setToastAlert({
|
let issueToReturn: Partial<IIssue> = {};
|
||||||
type: "success",
|
|
||||||
title: "Success!",
|
await issuesService
|
||||||
message: "Draft Issue created successfully.",
|
.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();
|
return issueToReturn;
|
||||||
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>",
|
|
||||||
};
|
};
|
||||||
|
|
||||||
if (!data) await createIssue(payload);
|
const handleFormSubmit = async (formData: Partial<IIssue>) => {
|
||||||
else await updateIssue(payload);
|
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 (
|
if (!data) issueResponse = await createIssue(payload);
|
||||||
<>
|
else issueResponse = await updateIssue(payload);
|
||||||
<ConfirmIssueDiscard
|
|
||||||
isOpen={showConfirmDiscard}
|
|
||||||
handleClose={() => setShowConfirmDiscard(false)}
|
|
||||||
onConfirm={createDraftIssue}
|
|
||||||
onDiscard={() => {
|
|
||||||
handleClose();
|
|
||||||
setActiveProject(null);
|
|
||||||
setFormDirtyState(null);
|
|
||||||
setShowConfirmDiscard(false);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Transition.Root show={isOpen} as={React.Fragment}>
|
if (issueResponse && issueResponse.id && Object.keys(customAttributesList).length > 0)
|
||||||
<Dialog as="div" className="relative z-20" onClose={onClose}>
|
await createAttributeValue(workspaceSlug.toString(), activeProject, issueResponse.id, {
|
||||||
<Transition.Child
|
issue_properties: customAttributesList,
|
||||||
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">
|
if (onSubmit) await onSubmit(payload);
|
||||||
<div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
|
};
|
||||||
<Transition.Child
|
|
||||||
as={React.Fragment}
|
if (!projects || projects.length === 0) return null;
|
||||||
enter="ease-out duration-300"
|
|
||||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
return (
|
||||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
<>
|
||||||
leave="ease-in duration-200"
|
<ConfirmIssueDiscard
|
||||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
isOpen={showConfirmDiscard}
|
||||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
handleClose={() => setShowConfirmDiscard(false)}
|
||||||
>
|
onConfirm={createDraftIssue}
|
||||||
<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">
|
onDiscard={() => {
|
||||||
<IssueForm
|
handleClose();
|
||||||
handleFormSubmit={handleFormSubmit}
|
setActiveProject(null);
|
||||||
initialData={data ?? prePopulateData}
|
setFormDirtyState(null);
|
||||||
createMore={createMore}
|
setShowConfirmDiscard(false);
|
||||||
setCreateMore={setCreateMore}
|
}}
|
||||||
handleClose={onClose}
|
/>
|
||||||
handleDiscardClose={onDiscardClose}
|
|
||||||
setIsConfirmDiscardOpen={setShowConfirmDiscard}
|
<Transition.Root show={isOpen} as={React.Fragment}>
|
||||||
projectId={activeProject ?? ""}
|
<Dialog as="div" className="relative z-20" onClose={onClose}>
|
||||||
setActiveProject={setActiveProject}
|
<Transition.Child
|
||||||
status={data ? true : false}
|
as={React.Fragment}
|
||||||
user={user}
|
enter="ease-out duration-300"
|
||||||
fieldsToShow={fieldsToShow}
|
enterFrom="opacity-0"
|
||||||
handleFormDirty={handleFormDirty}
|
enterTo="opacity-100"
|
||||||
/>
|
leave="ease-in duration-200"
|
||||||
</Dialog.Panel>
|
leaveFrom="opacity-100"
|
||||||
</Transition.Child>
|
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>
|
||||||
</div>
|
</Dialog>
|
||||||
</Dialog>
|
</Transition.Root>
|
||||||
</Transition.Root>
|
</>
|
||||||
</>
|
);
|
||||||
);
|
}
|
||||||
};
|
);
|
||||||
|
@ -24,7 +24,7 @@ export const CUSTOM_ATTRIBUTES_LIST: {
|
|||||||
} = {
|
} = {
|
||||||
checkbox: {
|
checkbox: {
|
||||||
defaultFormValues: {
|
defaultFormValues: {
|
||||||
default_value: "checked",
|
default_value: "true",
|
||||||
display_name: "",
|
display_name: "",
|
||||||
extra_settings: {
|
extra_settings: {
|
||||||
representation: "check",
|
representation: "check",
|
||||||
|
Loading…
Reference in New Issue
Block a user