forked from github/plane
chore: file upload in the issue modal
This commit is contained in:
Aaryan Khandelwal
parent
220c572461
commit
4c016c85f1
@ -1,9 +1,9 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
|
||||
// headless ui
|
||||
import { Combobox, Transition } from "@headlessui/react";
|
||||
import { Combobox } from "@headlessui/react";
|
||||
// hooks
|
||||
import useOutsideClickDetector from "hooks/use-outside-click-detector";
|
||||
import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
|
||||
// icons
|
||||
import { Check, Search, XIcon } from "lucide-react";
|
||||
// types
|
||||
@ -36,46 +36,21 @@ export const CustomSelectAttribute: React.FC<Props> = (props) => {
|
||||
option.display_name.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
|
||||
const handleOnOpen = () => {
|
||||
const dropdownButton = dropdownButtonRef.current;
|
||||
const dropdownOptions = dropdownOptionsRef.current;
|
||||
|
||||
if (!dropdownButton || !dropdownOptions) return;
|
||||
|
||||
const dropdownWidth = dropdownOptions.clientWidth;
|
||||
const dropdownHeight = dropdownOptions.clientHeight;
|
||||
|
||||
const dropdownBtnX = dropdownButton.getBoundingClientRect().x;
|
||||
const dropdownBtnY = dropdownButton.getBoundingClientRect().y;
|
||||
const dropdownBtnHeight = dropdownButton.clientHeight;
|
||||
|
||||
let top = dropdownBtnY + dropdownBtnHeight;
|
||||
if (dropdownBtnY + dropdownHeight > window.innerHeight)
|
||||
top = dropdownBtnY - dropdownHeight - 10;
|
||||
else top = top + 4;
|
||||
|
||||
let left = dropdownBtnX;
|
||||
if (dropdownBtnX + dropdownWidth > window.innerWidth) left = dropdownBtnX - dropdownWidth;
|
||||
|
||||
dropdownOptions.style.top = `${Math.round(top)}px`;
|
||||
dropdownOptions.style.left = `${Math.round(left)}px`;
|
||||
};
|
||||
|
||||
useOutsideClickDetector(dropdownOptionsRef, () => {
|
||||
if (isOpen) setIsOpen(false);
|
||||
});
|
||||
|
||||
const comboboxProps: any = {
|
||||
onChange,
|
||||
value,
|
||||
};
|
||||
|
||||
useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownButtonRef, dropdownOptionsRef);
|
||||
|
||||
if (multiple) comboboxProps.multiple = true;
|
||||
|
||||
return (
|
||||
<Combobox as="div" className="flex-shrink-0 text-left flex items-center" {...comboboxProps}>
|
||||
{({ open }: { open: boolean }) => {
|
||||
if (open) handleOnOpen();
|
||||
if (open) {
|
||||
if (!isOpen) setIsOpen(true);
|
||||
} else if (isOpen) setIsOpen(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -98,8 +73,7 @@ export const CustomSelectAttribute: React.FC<Props> = (props) => {
|
||||
{optionDetails?.display_name}
|
||||
{((attributeDetails.is_required && value.length > 1) ||
|
||||
!attributeDetails.is_required) && (
|
||||
<button
|
||||
type="button"
|
||||
<span
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
@ -108,7 +82,7 @@ export const CustomSelectAttribute: React.FC<Props> = (props) => {
|
||||
}}
|
||||
>
|
||||
<XIcon size={10} strokeWidth={1.5} />
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
@ -122,7 +96,6 @@ export const CustomSelectAttribute: React.FC<Props> = (props) => {
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<div
|
||||
className="px-2.5 py-0.5 rounded text-xs flex items-center justify-between gap-1"
|
||||
style={{
|
||||
@ -131,8 +104,7 @@ export const CustomSelectAttribute: React.FC<Props> = (props) => {
|
||||
>
|
||||
{options.find((o) => o.id === value)?.display_name}
|
||||
{!attributeDetails.is_required && (
|
||||
<button
|
||||
type="button"
|
||||
<span
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
@ -141,10 +113,9 @@ export const CustomSelectAttribute: React.FC<Props> = (props) => {
|
||||
}}
|
||||
>
|
||||
<XIcon size={10} strokeWidth={1.5} />
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div
|
||||
@ -154,21 +125,12 @@ export const CustomSelectAttribute: React.FC<Props> = (props) => {
|
||||
</div>
|
||||
)}
|
||||
</Combobox.Button>
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<div className="fixed z-10 top-0 left-0 h-full w-full cursor-auto">
|
||||
<div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
|
||||
<Combobox.Options
|
||||
ref={dropdownOptionsRef}
|
||||
className="fixed z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none w-48 whitespace-nowrap"
|
||||
className="fixed z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap mt-1"
|
||||
>
|
||||
<div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2 mb-1">
|
||||
<div className="flex w-full items-center justify-start rounded-sm border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2 mb-1">
|
||||
<Search className="text-custom-text-400" size={12} strokeWidth={1.5} />
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
|
||||
@ -205,7 +167,6 @@ export const CustomSelectAttribute: React.FC<Props> = (props) => {
|
||||
</div>
|
||||
</Combobox.Options>
|
||||
</div>
|
||||
</Transition>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
import { useEffect } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// mobx
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
import { observer } from "mobx-react-lite";
|
||||
@ -21,46 +17,30 @@ type Props = {
|
||||
export const CustomAttributesCheckboxes: React.FC<Props> = observer((props) => {
|
||||
const { entityId, issueId, onChange, projectId, values } = props;
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
const { customAttributes } = useMobxStore();
|
||||
|
||||
const { customAttributes: customAttributesStore } = useMobxStore();
|
||||
const { entityAttributes, fetchEntityDetails, fetchEntityDetailsLoader } = customAttributesStore;
|
||||
|
||||
const attributes = entityAttributes[entityId] ?? {};
|
||||
|
||||
// fetch entity details
|
||||
useEffect(() => {
|
||||
if (!entityAttributes[entityId]) {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
fetchEntityDetails(workspaceSlug.toString(), entityId);
|
||||
}
|
||||
}, [entityAttributes, entityId, fetchEntityDetails, workspaceSlug]);
|
||||
const attributes = customAttributes.entityAttributes[entityId] ?? {};
|
||||
|
||||
const checkboxFields = Object.values(attributes).filter((a) => a.type === "checkbox");
|
||||
|
||||
return (
|
||||
<>
|
||||
{fetchEntityDetailsLoader ? (
|
||||
<Loader className="flex items-center gap-2">
|
||||
<Loader.Item height="27px" width="90px" />
|
||||
<Loader.Item height="27px" width="90px" />
|
||||
<Loader.Item height="27px" width="90px" />
|
||||
{customAttributes.fetchEntityDetailsLoader ? (
|
||||
<Loader className="space-y-3.5">
|
||||
<Loader.Item height="35px" />
|
||||
<Loader.Item height="35px" />
|
||||
<Loader.Item height="35px" />
|
||||
</Loader>
|
||||
) : (
|
||||
<div>
|
||||
<h5 className="text-sm">Checkboxes</h5>
|
||||
<div className="mt-3.5 space-y-4">
|
||||
<div className="space-y-4">
|
||||
{Object.entries(checkboxFields).map(([attributeId, attribute]) => (
|
||||
<div key={attributeId} className="flex items-center gap-2">
|
||||
<Tooltip tooltipContent={attribute.display_name} position="top-left">
|
||||
<p className="text-xs text-custom-text-300 w-1/3 truncate">
|
||||
<p className="text-xs text-custom-text-300 w-2/5 truncate">
|
||||
{attribute.display_name}
|
||||
</p>
|
||||
</Tooltip>
|
||||
<div className="w-2/3 flex-shrink-0">
|
||||
{attribute.type === "checkbox" && (
|
||||
<div className="w-3/5 flex-shrink-0">
|
||||
<CustomCheckboxAttribute
|
||||
attributeDetails={attribute}
|
||||
issueId={issueId}
|
||||
@ -68,12 +48,10 @@ export const CustomAttributesCheckboxes: React.FC<Props> = observer((props) => {
|
||||
projectId={projectId}
|
||||
value={values[attribute.id]?.[0] === "true" ? true : false}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
import { useState } from "react";
|
||||
|
||||
// mobx
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
@ -25,26 +23,13 @@ type Props = {
|
||||
const DESCRIPTION_FIELDS: TCustomAttributeTypes[] = ["email", "number", "text", "url"];
|
||||
|
||||
export const CustomAttributesDescriptionFields: React.FC<Props> = observer((props) => {
|
||||
const { entityId, issueId, onChange, projectId, values } = props;
|
||||
const { entityId, onChange, values } = props;
|
||||
|
||||
const [hideOptionalFields, setHideOptionalFields] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
const { customAttributes } = useMobxStore();
|
||||
|
||||
const { customAttributes: customAttributesStore } = useMobxStore();
|
||||
const { entityAttributes, fetchEntityDetails, fetchEntityDetailsLoader } = customAttributesStore;
|
||||
|
||||
const attributes = entityAttributes[entityId] ?? {};
|
||||
|
||||
// fetch entity details
|
||||
useEffect(() => {
|
||||
if (!entityAttributes[entityId]) {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
fetchEntityDetails(workspaceSlug.toString(), entityId);
|
||||
}
|
||||
}, [entityAttributes, entityId, fetchEntityDetails, workspaceSlug]);
|
||||
const attributes = customAttributes.entityAttributes[entityId] ?? {};
|
||||
|
||||
const descriptionFields = Object.values(attributes).filter((a) =>
|
||||
DESCRIPTION_FIELDS.includes(a.type)
|
||||
@ -52,11 +37,11 @@ export const CustomAttributesDescriptionFields: React.FC<Props> = observer((prop
|
||||
|
||||
return (
|
||||
<>
|
||||
{fetchEntityDetailsLoader ? (
|
||||
<Loader className="flex items-center gap-2">
|
||||
<Loader.Item height="27px" width="90px" />
|
||||
<Loader.Item height="27px" width="90px" />
|
||||
<Loader.Item height="27px" width="90px" />
|
||||
{customAttributes.fetchEntityDetailsLoader ? (
|
||||
<Loader className="space-y-3.5">
|
||||
<Loader.Item height="35px" />
|
||||
<Loader.Item height="35px" />
|
||||
<Loader.Item height="35px" />
|
||||
</Loader>
|
||||
) : (
|
||||
<Disclosure defaultOpen>
|
||||
|
||||
@ -0,0 +1,225 @@
|
||||
import { useCallback, useState } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// mobx
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// react-dropzone
|
||||
import { useDropzone } from "react-dropzone";
|
||||
// services
|
||||
import fileService from "services/file.service";
|
||||
// hooks
|
||||
import useWorkspaceDetails from "hooks/use-workspace-details";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
// ui
|
||||
import { Loader, Tooltip } from "components/ui";
|
||||
// icons
|
||||
import { Plus, Trash2, X } from "lucide-react";
|
||||
import { getFileIcon } from "components/icons";
|
||||
// helpers
|
||||
import { getFileExtension } from "helpers/attachment.helper";
|
||||
// types
|
||||
import { ICustomAttribute } from "types";
|
||||
|
||||
type Props = {
|
||||
entityId: string;
|
||||
issueId: string;
|
||||
onChange: (attributeId: string, val: string | string[] | undefined) => void;
|
||||
projectId: string;
|
||||
values: { [key: string]: string[] };
|
||||
};
|
||||
|
||||
type FileUploadProps = {
|
||||
attributeDetails: ICustomAttribute;
|
||||
className?: string;
|
||||
issueId: string;
|
||||
projectId: string;
|
||||
value: string | undefined;
|
||||
onChange: (val: string | undefined) => void;
|
||||
};
|
||||
|
||||
const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5 MB
|
||||
|
||||
const UploadFile: React.FC<FileUploadProps> = (props) => {
|
||||
const { attributeDetails, className = "", onChange, value } = props;
|
||||
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const { workspaceDetails } = useWorkspaceDetails();
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const onDrop = useCallback(
|
||||
(acceptedFiles: File[]) => {
|
||||
if (!acceptedFiles[0] || !workspaceSlug) return;
|
||||
|
||||
const extension = getFileExtension(acceptedFiles[0].name);
|
||||
|
||||
if (!attributeDetails.extra_settings?.file_formats?.includes(`.${extension}`)) {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: `File format not accepted. Accepted file formats- ${attributeDetails.extra_settings?.file_formats?.join(
|
||||
", "
|
||||
)}`,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("asset", acceptedFiles[0]);
|
||||
formData.append(
|
||||
"attributes",
|
||||
JSON.stringify({
|
||||
name: acceptedFiles[0].name,
|
||||
size: acceptedFiles[0].size,
|
||||
})
|
||||
);
|
||||
setIsUploading(true);
|
||||
|
||||
fileService
|
||||
.uploadFile(workspaceSlug.toString(), formData)
|
||||
.then((res) => {
|
||||
const imageUrl = res.asset;
|
||||
|
||||
onChange(imageUrl);
|
||||
|
||||
if (value && value !== "" && workspaceDetails)
|
||||
fileService.deleteFile(workspaceDetails.id, value);
|
||||
})
|
||||
.finally(() => setIsUploading(false));
|
||||
},
|
||||
[
|
||||
attributeDetails.extra_settings?.file_formats,
|
||||
onChange,
|
||||
setToastAlert,
|
||||
value,
|
||||
workspaceDetails,
|
||||
workspaceSlug,
|
||||
]
|
||||
);
|
||||
|
||||
const handleRemoveFile = () => {
|
||||
if (!workspaceDetails || !value || value === "") return;
|
||||
|
||||
onChange(undefined);
|
||||
fileService.deleteFile(workspaceDetails.id, value);
|
||||
};
|
||||
|
||||
const { getRootProps, getInputProps, isDragActive, isDragReject, fileRejections } = useDropzone({
|
||||
onDrop,
|
||||
maxSize: MAX_FILE_SIZE,
|
||||
multiple: false,
|
||||
disabled: isUploading,
|
||||
});
|
||||
|
||||
const fileError =
|
||||
fileRejections.length > 0
|
||||
? `Invalid file type or size (max ${MAX_FILE_SIZE / 1024 / 1024} MB)`
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="flex-shrink-0 truncate space-y-1">
|
||||
{value && value !== "" ? (
|
||||
<div className="group flex items-center justify-between gap-1.5 h-10 px-2.5 rounded border border-custom-border-200 text-xs truncate w-full">
|
||||
<a
|
||||
href={value}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-1.5 flex-grow truncate"
|
||||
>
|
||||
<span className="flex-shrink-0 h-6 w-6 grid place-items-center border border-custom-border-200 p-1 rounded-sm">
|
||||
{getFileIcon(getFileExtension(value))}
|
||||
</span>
|
||||
<span className="truncate">
|
||||
{value.split("/")[value.split("/").length - 1].split("-")[1]}
|
||||
</span>
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
className="opacity-0 group-hover:opacity-100 grid place-items-center flex-shrink-0"
|
||||
onClick={handleRemoveFile}
|
||||
>
|
||||
<Trash2 size={12} strokeWidth={1.5} />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className={`flex items-center text-xs rounded cursor-pointer truncate w-full ${
|
||||
isDragActive ? "bg-custom-primary-100/10" : ""
|
||||
} ${isDragReject ? "bg-red-500/10" : ""} ${className}`}
|
||||
>
|
||||
<input className="flex-shrink-0" {...getInputProps()} />
|
||||
<div
|
||||
className={`border border-dashed flex items-center gap-1.5 h-10 px-2.5 rounded text-custom-text-400 w-full ${
|
||||
fileError ? "border-red-500" : "border-custom-primary-100"
|
||||
}`}
|
||||
>
|
||||
<span className="bg-custom-primary-100/10 rounded-sm text-custom-primary-100 h-4 w-4 grid place-items-center">
|
||||
<Plus size={10} strokeWidth={1.5} />
|
||||
</span>
|
||||
{isDragActive ? (
|
||||
<span>Drop here</span>
|
||||
) : fileError ? (
|
||||
<span>File error</span>
|
||||
) : isUploading ? (
|
||||
<span>Uploading...</span>
|
||||
) : (
|
||||
<span>Drag and drop files</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const CustomAttributesFileUploads: React.FC<Props> = observer((props) => {
|
||||
const { entityId, onChange, issueId, projectId, values } = props;
|
||||
|
||||
const { customAttributes } = useMobxStore();
|
||||
|
||||
const attributes = customAttributes.entityAttributes[entityId] ?? {};
|
||||
|
||||
const fileUploadFields = Object.values(attributes).filter((a) => a.type === "file");
|
||||
|
||||
return (
|
||||
<>
|
||||
{customAttributes.fetchEntityDetailsLoader ? (
|
||||
<Loader className="space-y-3.5">
|
||||
<Loader.Item height="35px" />
|
||||
<Loader.Item height="35px" />
|
||||
<Loader.Item height="35px" />
|
||||
</Loader>
|
||||
) : (
|
||||
<div>
|
||||
<h5 className="text-sm">File uploads</h5>
|
||||
<div className="mt-3.5 grid grid-cols-3 gap-4">
|
||||
{Object.entries(fileUploadFields).map(([attributeId, attribute]) => (
|
||||
<div key={attributeId}>
|
||||
<Tooltip tooltipContent={attribute.display_name} position="top-left">
|
||||
<p className="text-xs text-custom-text-300 truncate">{attribute.display_name}</p>
|
||||
</Tooltip>
|
||||
<div className="flex-shrink-0 mt-2">
|
||||
<UploadFile
|
||||
attributeDetails={attribute}
|
||||
issueId={issueId}
|
||||
onChange={(val) => onChange(attribute.id, val)}
|
||||
projectId={projectId}
|
||||
value={values[attribute.id]?.[0] ? values[attribute.id]?.[0] : undefined}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
@ -1,3 +1,4 @@
|
||||
export * from "./checkboxes";
|
||||
export * from "./description-fields";
|
||||
export * from "./file-uploads";
|
||||
export * from "./select-fields";
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
import { useEffect } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// mobx
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
import { observer } from "mobx-react-lite";
|
||||
@ -30,28 +26,15 @@ const SELECT_FIELDS: TCustomAttributeTypes[] = ["datetime", "multi_select", "rel
|
||||
export const CustomAttributesSelectFields: React.FC<Props> = observer((props) => {
|
||||
const { entityId, issueId, onChange, projectId, values } = props;
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
const { customAttributes } = useMobxStore();
|
||||
|
||||
const { customAttributes: customAttributesStore } = useMobxStore();
|
||||
const { entityAttributes, fetchEntityDetails, fetchEntityDetailsLoader } = customAttributesStore;
|
||||
|
||||
const attributes = entityAttributes[entityId] ?? {};
|
||||
|
||||
// fetch entity details
|
||||
useEffect(() => {
|
||||
if (!entityAttributes[entityId]) {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
fetchEntityDetails(workspaceSlug.toString(), entityId);
|
||||
}
|
||||
}, [entityAttributes, entityId, fetchEntityDetails, workspaceSlug]);
|
||||
const attributes = customAttributes.entityAttributes[entityId] ?? {};
|
||||
|
||||
const selectFields = Object.values(attributes).filter((a) => SELECT_FIELDS.includes(a.type));
|
||||
|
||||
return (
|
||||
<>
|
||||
{fetchEntityDetailsLoader ? (
|
||||
{customAttributes.fetchEntityDetailsLoader ? (
|
||||
<Loader className="flex items-center gap-2">
|
||||
<Loader.Item height="27px" width="90px" />
|
||||
<Loader.Item height="27px" width="90px" />
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import React from "react";
|
||||
import React, { useRef, useState } from "react";
|
||||
|
||||
// headless ui
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { Menu } from "@headlessui/react";
|
||||
// hooks
|
||||
import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
|
||||
// icons
|
||||
import { Plus } from "lucide-react";
|
||||
// types
|
||||
@ -13,25 +15,35 @@ type Props = {
|
||||
onClick: (type: TCustomAttributeTypes) => void;
|
||||
};
|
||||
|
||||
export const TypesDropdown: React.FC<Props> = ({ onClick }) => (
|
||||
<Menu as="div" className="relative flex-shrink-0 text-left">
|
||||
{({ open }: { open: boolean }) => (
|
||||
export const TypesDropdown: React.FC<Props> = ({ onClick }) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||
const optionsRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useDynamicDropdownPosition(isOpen, () => setIsOpen(false), buttonRef, optionsRef);
|
||||
|
||||
return (
|
||||
<Menu as="div" className="flex-shrink-0 text-left">
|
||||
{({ open }: { open: boolean }) => {
|
||||
if (open) {
|
||||
if (!isOpen) setIsOpen(true);
|
||||
} else if (isOpen) setIsOpen(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Menu.Button className="flex items-center gap-1 text-xs font-medium text-custom-primary-100">
|
||||
<Menu.Button
|
||||
ref={buttonRef}
|
||||
className="flex items-center gap-1 text-xs font-medium text-custom-primary-100"
|
||||
>
|
||||
<Plus size={14} strokeWidth={1.5} />
|
||||
Add Attribute
|
||||
</Menu.Button>
|
||||
<Transition
|
||||
show={open}
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
<div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
|
||||
<Menu.Items
|
||||
ref={optionsRef}
|
||||
className="fixed z-10 border-[0.5px] border-custom-border-300 p-1 min-w-[10rem] max-h-60 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none overflow-y-auto"
|
||||
>
|
||||
<Menu.Items className="fixed z-10 mb-2 border-[0.5px] border-custom-border-300 p-1 min-w-[10rem] max-h-60 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none overflow-y-auto">
|
||||
{Object.keys(CUSTOM_ATTRIBUTES_LIST).map((type) => {
|
||||
const typeMetaData = CUSTOM_ATTRIBUTES_LIST[type as TCustomAttributeTypes];
|
||||
|
||||
@ -49,8 +61,10 @@ export const TypesDropdown: React.FC<Props> = ({ onClick }) => (
|
||||
);
|
||||
})}
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
);
|
||||
}}
|
||||
</Menu>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
@ -4,6 +4,7 @@ import { useRouter } from "next/router";
|
||||
|
||||
// mobx
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// react-hook-form
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
// services
|
||||
@ -27,6 +28,7 @@ import { CreateLabelModal } from "components/labels";
|
||||
import {
|
||||
CustomAttributesCheckboxes,
|
||||
CustomAttributesDescriptionFields,
|
||||
CustomAttributesFileUploads,
|
||||
CustomAttributesSelectFields,
|
||||
ObjectsSelect,
|
||||
} from "components/custom-attributes";
|
||||
@ -103,6 +105,8 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const { customAttributes, customAttributeValues } = useMobxStore();
|
||||
|
||||
const {
|
||||
register,
|
||||
formState: { errors, isSubmitting, isDirty },
|
||||
@ -133,6 +137,8 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
|
||||
parent: getValues("parent"),
|
||||
};
|
||||
|
||||
const entityId = watch("entity");
|
||||
|
||||
useEffect(() => {
|
||||
if (isDirty) handleFormDirty(payload);
|
||||
else handleFormDirty(null);
|
||||
@ -234,6 +240,59 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
|
||||
const maxDate = targetDate ? new Date(targetDate) : null;
|
||||
maxDate?.setDate(maxDate.getDate());
|
||||
|
||||
// fetch entity/object details, including the list of attributes
|
||||
useEffect(() => {
|
||||
if (!entityId) return;
|
||||
|
||||
if (!customAttributes.entityAttributes[entityId]) {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
customAttributes.fetchEntityDetails(workspaceSlug.toString(), entityId);
|
||||
}
|
||||
}, [customAttributes, entityId, workspaceSlug]);
|
||||
|
||||
// fetch issue attribute values
|
||||
useEffect(() => {
|
||||
if (!initialData || !initialData.id) return;
|
||||
|
||||
if (
|
||||
!customAttributeValues.issueAttributeValues ||
|
||||
!customAttributeValues.issueAttributeValues[initialData.id]
|
||||
) {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
customAttributeValues
|
||||
.fetchIssueAttributeValues(workspaceSlug.toString(), projectId, initialData.id)
|
||||
.then(() => {
|
||||
const issueAttributeValues =
|
||||
customAttributeValues.issueAttributeValues?.[initialData.id ?? ""];
|
||||
|
||||
if (!issueAttributeValues || issueAttributeValues.length === 0) return;
|
||||
|
||||
issueAttributeValues.forEach((attributeValue) => {
|
||||
if (attributeValue.prop_value)
|
||||
handleCustomAttributesChange(
|
||||
attributeValue.id,
|
||||
attributeValue.prop_value.map((val) => val.value)
|
||||
);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
const issueAttributeValues =
|
||||
customAttributeValues.issueAttributeValues?.[initialData.id ?? ""];
|
||||
|
||||
if (!issueAttributeValues || issueAttributeValues.length === 0) return;
|
||||
|
||||
issueAttributeValues.forEach((attributeValue) => {
|
||||
if (attributeValue.prop_value)
|
||||
handleCustomAttributesChange(
|
||||
attributeValue.id,
|
||||
attributeValue.prop_value.map((val) => val.value)
|
||||
);
|
||||
});
|
||||
}
|
||||
}, [customAttributeValues, handleCustomAttributesChange, initialData, projectId, workspaceSlug]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{projectId && (
|
||||
@ -414,17 +473,24 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{watch("entity") !== null && (
|
||||
{entityId !== null && (
|
||||
<div className="space-y-5">
|
||||
<CustomAttributesDescriptionFields
|
||||
entityId={watch("entity") ?? ""}
|
||||
entityId={entityId ?? ""}
|
||||
issueId={watch("id") ?? ""}
|
||||
onChange={handleCustomAttributesChange}
|
||||
projectId={projectId}
|
||||
values={customAttributesList}
|
||||
/>
|
||||
<CustomAttributesCheckboxes
|
||||
entityId={watch("entity") ?? ""}
|
||||
entityId={entityId ?? ""}
|
||||
issueId={watch("id") ?? ""}
|
||||
onChange={handleCustomAttributesChange}
|
||||
projectId={projectId}
|
||||
values={customAttributesList}
|
||||
/>
|
||||
<CustomAttributesFileUploads
|
||||
entityId={entityId ?? ""}
|
||||
issueId={watch("id") ?? ""}
|
||||
onChange={handleCustomAttributesChange}
|
||||
projectId={projectId}
|
||||
@ -452,7 +518,7 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
|
||||
/>
|
||||
)}
|
||||
{/* default object properties */}
|
||||
{watch("entity") === null ? (
|
||||
{entityId === null ? (
|
||||
<>
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
|
||||
<Controller
|
||||
@ -580,7 +646,7 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
|
||||
</>
|
||||
) : (
|
||||
<CustomAttributesSelectFields
|
||||
entityId={watch("entity") ?? ""}
|
||||
entityId={entityId ?? ""}
|
||||
issueId={watch("id") ?? ""}
|
||||
onChange={handleCustomAttributesChange}
|
||||
projectId={projectId}
|
||||
|
||||
@ -92,8 +92,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer(
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, cycleId, moduleId, viewId, inboxId } = router.query;
|
||||
|
||||
const { customAttributeValues: customAttributeValuesStore } = useMobxStore();
|
||||
const { createAttributeValue } = customAttributeValuesStore;
|
||||
const { customAttributeValues } = useMobxStore();
|
||||
|
||||
const { displayFilters, params } = useIssuesView();
|
||||
const { params: calendarParams } = useCalendarIssuesView();
|
||||
@ -452,9 +451,14 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer(
|
||||
issueResponse.id &&
|
||||
Object.keys(customAttributesList).length > 0
|
||||
)
|
||||
await createAttributeValue(workspaceSlug.toString(), activeProject, issueResponse.id, {
|
||||
await customAttributeValues.createAttributeValue(
|
||||
workspaceSlug.toString(),
|
||||
activeProject,
|
||||
issueResponse.id,
|
||||
{
|
||||
issue_properties: customAttributesList,
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
if (onSubmit) await onSubmit(payload);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user