forked from github/plane
87abf3ccb1
* style: project settings navigation sidebar added * chore: emoji and image picker close on outside click added * style: project setting general page revamp * style: project setting member page revamp * style: project setting features page revamp * style: project setting state page revamp * style: project setting integrations page revamp * style: project setting estimates page revamp * style: project setting automation page revamp * style: project setting label page revamp * chore: member select improvement for member setting page * chore: toggle switch component improvement * style: project automation setting ui improvement * style: module icon added * style: toggle switch improvement * style: ui and spacing consistency * style: project label setting revamp * style: project state setting ui improvement * chore: integration setting repo select validation * chore: code refactor * fix: build fix
98 lines
3.6 KiB
TypeScript
98 lines
3.6 KiB
TypeScript
import React, { useState } from "react";
|
|
|
|
// component
|
|
import { CustomSelect, ToggleSwitch } from "components/ui";
|
|
import { SelectMonthModal } from "components/automation";
|
|
// icon
|
|
import { ArchiveRestore } from "lucide-react";
|
|
// constants
|
|
import { PROJECT_AUTOMATION_MONTHS } from "constants/project";
|
|
// types
|
|
import { IProject } from "types";
|
|
|
|
type Props = {
|
|
projectDetails: IProject | undefined;
|
|
handleChange: (formData: Partial<IProject>) => Promise<void>;
|
|
};
|
|
|
|
export const AutoArchiveAutomation: React.FC<Props> = ({ projectDetails, handleChange }) => {
|
|
const [monthModal, setmonthModal] = useState(false);
|
|
|
|
const initialValues: Partial<IProject> = { archive_in: 1 };
|
|
return (
|
|
<>
|
|
<SelectMonthModal
|
|
type="auto-archive"
|
|
initialValues={initialValues}
|
|
isOpen={monthModal}
|
|
handleClose={() => setmonthModal(false)}
|
|
handleChange={handleChange}
|
|
/>
|
|
<div className="flex flex-col gap-4 border-b border-custom-border-200 px-4 py-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex items-center justify-center p-3 rounded bg-custom-background-90">
|
|
<ArchiveRestore className="h-4 w-4 text-custom-text-100 flex-shrink-0" />
|
|
</div>
|
|
<div className="">
|
|
<h4 className="text-sm font-medium">Auto-archive closed issues</h4>
|
|
<p className="text-sm text-custom-text-200 tracking-tight">
|
|
Plane will auto archive issues that have been completed or canceled.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<ToggleSwitch
|
|
value={projectDetails?.archive_in !== 0}
|
|
onChange={() =>
|
|
projectDetails?.archive_in === 0
|
|
? handleChange({ archive_in: 1 })
|
|
: handleChange({ archive_in: 0 })
|
|
}
|
|
size="sm"
|
|
/>
|
|
</div>
|
|
|
|
{projectDetails?.archive_in !== 0 && (
|
|
<div className="ml-12">
|
|
<div className="flex items-center justify-between rounded px-5 py-4 bg-custom-background-90 border border-custom-border-200 gap-2 w-full">
|
|
<div className="w-1/2 text-sm font-medium">
|
|
Auto-archive issues that are closed for
|
|
</div>
|
|
<div className="w-1/2">
|
|
<CustomSelect
|
|
value={projectDetails?.archive_in}
|
|
label={`${projectDetails?.archive_in} ${
|
|
projectDetails?.archive_in === 1 ? "Month" : "Months"
|
|
}`}
|
|
onChange={(val: number) => {
|
|
handleChange({ archive_in: val });
|
|
}}
|
|
input
|
|
verticalPosition="bottom"
|
|
width="w-full"
|
|
>
|
|
<>
|
|
{PROJECT_AUTOMATION_MONTHS.map((month) => (
|
|
<CustomSelect.Option key={month.label} value={month.value}>
|
|
<span className="text-sm">{month.label}</span>
|
|
</CustomSelect.Option>
|
|
))}
|
|
|
|
<button
|
|
type="button"
|
|
className="flex w-full text-sm select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80"
|
|
onClick={() => setmonthModal(true)}
|
|
>
|
|
Customise Time Range
|
|
</button>
|
|
</>
|
|
</CustomSelect>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|