fix: app dir build errors. (#4746)
This commit is contained in:
parent
f93803ace8
commit
c880e8b48c
8 changed files with 5 additions and 760 deletions
|
|
@ -1,200 +0,0 @@
|
|||
import { useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { CalendarCheck2, CalendarClock } from "lucide-react";
|
||||
// types
|
||||
import { TBulkIssueProperties } from "@plane/types";
|
||||
// ui
|
||||
import { Button, TOAST_TYPE, setToast } from "@plane/ui";
|
||||
// components
|
||||
import { DateDropdown, MemberDropdown, PriorityDropdown, StateDropdown } from "@/components/dropdowns";
|
||||
import { IssueLabelSelect } from "@/components/issues/select";
|
||||
import { CreateLabelModal } from "@/components/labels";
|
||||
// constants
|
||||
import { EErrorCodes, ERROR_DETAILS } from "@/constants/errors";
|
||||
import { EIssuesStoreType } from "@/constants/issue";
|
||||
// helpers
|
||||
import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
|
||||
// hooks
|
||||
import { useIssues } from "@/hooks/store";
|
||||
import { TSelectionHelper, TSelectionSnapshot } from "@/hooks/use-multiple-select";
|
||||
|
||||
type Props = {
|
||||
selectionHelpers: TSelectionHelper;
|
||||
snapshot: TSelectionSnapshot;
|
||||
};
|
||||
|
||||
const defaultValues: TBulkIssueProperties = {
|
||||
state_id: "",
|
||||
// @ts-expect-error priority should not be undefined, but it should be, in this case
|
||||
priority: undefined,
|
||||
assignee_ids: [],
|
||||
start_date: null,
|
||||
target_date: null,
|
||||
label_ids: [],
|
||||
};
|
||||
|
||||
export const IssueBulkOperationsProperties: React.FC<Props> = (props) => {
|
||||
const { snapshot } = props;
|
||||
// states
|
||||
const [createLabelModal, setCreateLabelModal] = useState(false);
|
||||
// router
|
||||
const { workspaceSlug, projectId } = useParams();
|
||||
// store hooks
|
||||
const {
|
||||
issues: { bulkUpdateProperties },
|
||||
} = useIssues(EIssuesStoreType.PROJECT);
|
||||
// form info
|
||||
const {
|
||||
control,
|
||||
formState: { dirtyFields, isDirty, isSubmitting },
|
||||
handleSubmit,
|
||||
reset,
|
||||
watch,
|
||||
} = useForm<TBulkIssueProperties>({
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
const handleBulkOperations = async (data: TBulkIssueProperties) => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
const payload: Partial<TBulkIssueProperties> = {};
|
||||
Object.keys(dirtyFields).forEach((key) => {
|
||||
const payloadKey = key as keyof typeof dirtyFields;
|
||||
// @ts-expect-error values might not match
|
||||
payload[payloadKey] = data[payloadKey];
|
||||
});
|
||||
|
||||
await bulkUpdateProperties(workspaceSlug.toString(), projectId.toString(), {
|
||||
issue_ids: snapshot.selectedEntityIds,
|
||||
properties: payload,
|
||||
})
|
||||
.then(() => {
|
||||
reset(defaultValues);
|
||||
})
|
||||
.catch((error) => {
|
||||
const errorInfo = ERROR_DETAILS[error?.error_code as EErrorCodes] ?? undefined;
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: errorInfo?.title ?? "Error!",
|
||||
message: errorInfo?.message ?? "Something went wrong. Please try again.",
|
||||
});
|
||||
});
|
||||
};
|
||||
const isUpdateDisabled = !snapshot.isSelectionActive;
|
||||
|
||||
const startDate = watch("start_date");
|
||||
const targetDate = watch("target_date");
|
||||
|
||||
const minDate = getDate(startDate);
|
||||
minDate?.setDate(minDate.getDate());
|
||||
|
||||
const maxDate = getDate(targetDate);
|
||||
maxDate?.setDate(maxDate.getDate());
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(handleBulkOperations)} className="size-full flex items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Controller
|
||||
name="state_id"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<StateDropdown
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
projectId={projectId?.toString() ?? ""}
|
||||
buttonVariant="border-with-text"
|
||||
disabled={isUpdateDisabled}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="priority"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<PriorityDropdown
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
buttonVariant="border-with-text"
|
||||
buttonClassName="!text-custom-text-300"
|
||||
disabled={isUpdateDisabled}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="assignee_ids"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<MemberDropdown
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
buttonVariant={value?.length > 0 ? "transparent-without-text" : "border-with-text"}
|
||||
buttonClassName={value?.length > 0 ? "hover:bg-transparent" : ""}
|
||||
placeholder="Assignees"
|
||||
multiple
|
||||
disabled={isUpdateDisabled}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="start_date"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<DateDropdown
|
||||
value={value}
|
||||
onChange={(val) => onChange(val ? renderFormattedPayloadDate(val) : null)}
|
||||
buttonVariant="border-with-text"
|
||||
placeholder="Start date"
|
||||
icon={<CalendarClock className="size-3 flex-shrink-0" />}
|
||||
disabled={isUpdateDisabled}
|
||||
maxDate={maxDate ?? undefined}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="target_date"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<DateDropdown
|
||||
value={value}
|
||||
onChange={(val) => onChange(val ? renderFormattedPayloadDate(val) : null)}
|
||||
buttonVariant="border-with-text"
|
||||
placeholder="Due date"
|
||||
icon={<CalendarCheck2 className="size-3 flex-shrink-0" />}
|
||||
disabled={isUpdateDisabled}
|
||||
minDate={minDate ?? undefined}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{projectId && (
|
||||
<Controller
|
||||
name="label_ids"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<>
|
||||
<CreateLabelModal
|
||||
isOpen={createLabelModal}
|
||||
handleClose={() => setCreateLabelModal(false)}
|
||||
projectId={projectId.toString()}
|
||||
onSuccess={(res) => onChange([...value, res.id])}
|
||||
/>
|
||||
<IssueLabelSelect
|
||||
value={value}
|
||||
projectId={projectId.toString()}
|
||||
onChange={onChange}
|
||||
setIsOpen={() => setCreateLabelModal(true)}
|
||||
buttonClassName="text-custom-text-300"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{isDirty && (
|
||||
<Button type="submit" variant="primary" size="sm" className="py-1" loading={isSubmitting}>
|
||||
{isSubmitting ? "Updating" : "Update"}
|
||||
</Button>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue