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

chore: file type attribute added

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-09-15 14:14:08 +05:30
parent 057ddf1310
commit e713db48b3
13 changed files with 414 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,17 +1,129 @@
import { useCallback, useState } from "react";
import { useRouter } from "next/router";
// react-dropzone
import { useDropzone } from "react-dropzone";
// services
import fileService from "services/file.service";
// hooks
import useToast from "hooks/use-toast";
// icons
import { getFileIcon } from "components/icons";
// helpers
import { getFileExtension, getFileName } from "helpers/attachment.helper";
// types
import { Props } from "./types";
import useWorkspaceDetails from "hooks/use-workspace-details";
export const CustomFileAttribute: React.FC<Props & { value: any | null }> = ({
attributeDetails,
onChange,
value,
}) => (
<div className="flex-shrink-0">
<button
type="button"
className="flex items-center gap-2 px-2.5 py-0.5 bg-custom-background-80 rounded text-xs"
>
Upload file
</button>
</div>
);
const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5 MB
export const CustomFileAttribute: React.FC<Props & { value: string | undefined }> = (props) => {
const { attributeDetails, 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 { 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 !== "" && (
<a
href={value}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-1 p-1 rounded border border-custom-border-200 text-xs truncate"
>
<span className="flex-shrink-0 h-6 w-6">{getFileIcon(getFileExtension(value))}</span>
<span className="truncate">{getFileName(value)}</span>
</a>
)}
<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"
} ${isDragReject ? "bg-red-500/10" : ""}`}
>
<input {...getInputProps()} />
<span className="flex items-center gap-2">
{isDragActive ? (
<p>Drop here...</p>
) : fileError ? (
<p className="text-center text-red-500">{fileError}</p>
) : isUploading ? (
<p className="text-center">Uploading...</p>
) : (
<p className="text-center">Upload {value && value !== "" ? "new " : ""}file</p>
)}
</span>
</div>
</div>
);
};

3
web/components/custom-attributes/attributes-list/index.ts Normal file
View File

@ -0,0 +1,3 @@
export * from "./issue-modal-attributes-list";
export * from "./peek-overview-custom-attributes-list";
export * from "./sidebar-custom-attributes-list";

2
web/components/issues/custom-attributes-list.tsx → web/components/custom-attributes/attributes-list/issue-modal-attributes-list.tsx
View File

@ -22,7 +22,7 @@ type Props = {
projectId: string;
};
export const CustomAttributesList: React.FC<Props> = observer(
export const IssueModalCustomAttributesList: React.FC<Props> = observer(
({ entityId, issueId, onSubmit, projectId }) => {
const router = useRouter();
const { workspaceSlug } = router.query;

189
web/components/custom-attributes/attributes-list/peek-overview-custom-attributes-list.tsx Normal file
View File

@ -0,0 +1,189 @@
import { useEffect } from "react";
import { useRouter } from "next/router";
// mobx
import { useMobxStore } from "lib/mobx/store-provider";
import { observer } from "mobx-react-lite";
// components
import {
CustomCheckboxAttribute,
CustomDateTimeAttribute,
CustomEmailAttribute,
CustomNumberAttribute,
CustomRelationAttribute,
CustomSelectAttribute,
CustomTextAttribute,
CustomUrlAttribute,
} from "components/custom-attributes";
// ui
import { Loader } from "components/ui";
// types
import { ICustomAttributeValueFormData, IIssue } from "types";
// constants
import { CUSTOM_ATTRIBUTES_LIST } from "constants/custom-attributes";
type Props = {
issue: IIssue | undefined;
};
export const PeekOverviewCustomAttributesList: React.FC<Props> = observer(({ issue }) => {
const router = useRouter();
const { workspaceSlug } = router.query;
const {
customAttributes: customAttributesStore,
customAttributeValues: customAttributeValuesStore,
} = useMobxStore();
const { entityAttributes, fetchEntityDetails } = customAttributesStore;
const { issueAttributeValues, fetchIssueAttributeValues } = customAttributeValuesStore;
const handleAttributeUpdate = (attributeId: string, value: string) => {
if (!issue || !workspaceSlug) return;
const payload: ICustomAttributeValueFormData = {
issue_properties: {
[attributeId]: value,
},
};
customAttributeValuesStore.createAttributeValue(
workspaceSlug.toString(),
issue.project,
issue.id,
payload
);
};
// fetch the object details if object state has id
useEffect(() => {
if (!issue?.entity) return;
if (!entityAttributes[issue.entity]) {
if (!workspaceSlug) return;
fetchEntityDetails(workspaceSlug.toString(), issue.entity);
}
}, [issue?.entity, entityAttributes, fetchEntityDetails, workspaceSlug]);
// fetch issue attribute values
useEffect(() => {
if (!issue) return;
if (!issueAttributeValues || !issueAttributeValues[issue.id]) {
if (!workspaceSlug) return;
fetchIssueAttributeValues(workspaceSlug.toString(), issue.project, issue.id);
}
}, [fetchIssueAttributeValues, issue, issueAttributeValues, workspaceSlug]);
if (!issue || !issue?.entity) return null;
if (!entityAttributes[issue.entity] || !issueAttributeValues?.[issue.id])
return (
<Loader className="space-y-4">
<Loader.Item height="30px" />
<Loader.Item height="30px" />
<Loader.Item height="30px" />
<Loader.Item height="30px" />
</Loader>
);
return (
<>
{Object.values(entityAttributes?.[issue.entity] ?? {}).map((attribute) => {
const typeMetaData = CUSTOM_ATTRIBUTES_LIST[attribute.type];
const attributeValue = issueAttributeValues?.[issue.id].find(
(a) => a.id === attribute.id
)?.prop_value;
return (
<div key={attribute.id} className="flex items-center gap-2 text-sm">
<div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
<typeMetaData.icon className="flex-shrink-0" size={16} strokeWidth={1.5} />
<p className="flex-grow truncate">{attribute.display_name}</p>
</div>
<div className="w-3/4">
{attribute.type === "checkbox" && (
<CustomCheckboxAttribute
attributeDetails={attribute}
issueId={issue.id}
onChange={(val: string) => handleAttributeUpdate(attribute.id, val)}
projectId={issue.project}
value={
attributeValue ? (attributeValue?.[0]?.value === "true" ? true : false) : false
}
/>
)}
{attribute.type === "datetime" && (
<CustomDateTimeAttribute
attributeDetails={attribute}
issueId={issue.id}
onChange={(val: string) => handleAttributeUpdate(attribute.id, val)}
projectId={issue.project}
value={attributeValue ? new Date(attributeValue?.[0]?.value ?? "") : undefined}
/>
)}
{attribute.type === "email" && (
<CustomEmailAttribute
attributeDetails={attribute}
issueId={issue.id}
onChange={(val: string) => handleAttributeUpdate(attribute.id, val)}
projectId={issue.project}
value={attributeValue ? attributeValue?.[0]?.value : undefined}
/>
)}
{attribute.type === "number" && (
<CustomNumberAttribute
attributeDetails={attribute}
issueId={issue.id}
onChange={(val: string) => handleAttributeUpdate(attribute.id, val)}
projectId={issue.project}
value={
attributeValue ? parseInt(attributeValue?.[0]?.value ?? "0", 10) : undefined
}
/>
)}
{attribute.type === "relation" && (
<CustomRelationAttribute
attributeDetails={attribute}
issueId={issue.id}
onChange={(val: string) => handleAttributeUpdate(attribute.id, val)}
projectId={issue.project}
value={attributeValue ? attributeValue?.[0]?.value : undefined}
/>
)}
{attribute.type === "select" && (
<CustomSelectAttribute
attributeDetails={attribute}
issueId={issue.id}
onChange={(val: string) => handleAttributeUpdate(attribute.id, val)}
projectId={issue.project}
value={attributeValue ? attributeValue?.[0]?.value : undefined}
/>
)}
{attribute.type === "text" && (
<CustomTextAttribute
attributeDetails={attribute}
issueId={issue.id}
onChange={(val: string) => handleAttributeUpdate(attribute.id, val)}
projectId={issue.project}
value={attributeValue ? attributeValue?.[0].value : undefined}
/>
)}
{attribute.type === "url" && (
<CustomUrlAttribute
attributeDetails={attribute}
issueId={issue.id}
onChange={(val: string) => handleAttributeUpdate(attribute.id, val)}
projectId={issue.project}
value={attributeValue ? attributeValue?.[0]?.value : undefined}
/>
)}
</div>
</div>
);
})}
</>
);
});

13
web/components/issues/sidebar-custom-attributes-list.tsx → web/components/custom-attributes/attributes-list/sidebar-custom-attributes-list.tsx
View File

@ -10,17 +10,19 @@ import {
CustomCheckboxAttribute,
CustomDateTimeAttribute,
CustomEmailAttribute,
CustomFileAttribute,
CustomNumberAttribute,
CustomRelationAttribute,
CustomSelectAttribute,
CustomTextAttribute,
CustomUrlAttribute,
} from "components/custom-attributes";
// ui
import { Loader } from "components/ui";
// types
import { ICustomAttributeValueFormData, IIssue } from "types";
// constants
import { CUSTOM_ATTRIBUTES_LIST } from "constants/custom-attributes";
import { Loader } from "components/ui";
type Props = {
issue: IIssue | undefined;
@ -132,6 +134,15 @@ export const SidebarCustomAttributesList: React.FC<Props> = observer(({ issue })
value={attributeValue ? attributeValue?.[0]?.value : undefined}
/>
)}
{attribute.type === "file" && (
<CustomFileAttribute
attributeDetails={attribute}
issueId={issue.id}
onChange={(val: string) => handleAttributeUpdate(attribute.id, val)}
projectId={issue.project}
value={attributeValue ? attributeValue?.[0]?.value : undefined}
/>
)}
{attribute.type === "number" && (
<CustomNumberAttribute
attributeDetails={attribute}

7
web/components/custom-attributes/dropdowns/file-formats-dropdown.tsx
View File

@ -58,17 +58,14 @@ export const FileFormatsDropdown: React.FC<Props> = ({ onChange, value }) => {
<Combobox
as="div"
value={value}
onChange={(val) => {
console.log(val);
onChange(val);
}}
onChange={(val) => onChange(val)}
className="relative flex-shrink-0 text-left"
multiple
>
{({ open }: { open: boolean }) => (
<>
<Combobox.Button className="px-3 py-2 bg-custom-background-100 rounded border border-custom-border-200 text-xs w-full text-left">
All Formats
{value.length > 0 ? value.join(", ") : "Select file formats"}
</Combobox.Button>
<Transition
show={open}

1
web/components/custom-attributes/index.ts
View File

@ -1,5 +1,6 @@
export * from "./attribute-display";
export * from "./attribute-forms";
export * from "./attributes-list";
export * from "./dropdowns";
export * from "./delete-object-modal";
export * from "./input";

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

@ -10,7 +10,7 @@ import aiService from "services/ai.service";
import useToast from "hooks/use-toast";
// components
import { GptAssistantModal } from "components/core";
import { CustomAttributesList, ParentIssuesListModal } from "components/issues";
import { ParentIssuesListModal } from "components/issues";
import {
IssueAssigneeSelect,
IssueDateSelect,
@ -22,7 +22,7 @@ import {
} from "components/issues/select";
import { CreateStateModal } from "components/states";
import { CreateLabelModal } from "components/labels";
import { ObjectsSelect } from "components/custom-attributes";
import { IssueModalCustomAttributesList, ObjectsSelect } from "components/custom-attributes";
// ui
import { CustomMenu, Input, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
import { TipTapEditor } from "components/tiptap";
@ -543,9 +543,10 @@ export const IssueForm: FC<IssueFormProps> = ({
)}
</>
) : (
<CustomAttributesList
<IssueModalCustomAttributesList
entityId={watch("entity") ?? ""}
issueId=""
onSubmit={async () => {}}
projectId={projectId}
/>
)}

2
web/components/issues/index.ts
View File

@ -6,14 +6,12 @@ export * from "./peek-overview";
export * from "./sidebar-select";
export * from "./view-select";
export * from "./activity";
export * from "./custom-attributes-list";
export * from "./delete-issue-modal";
export * from "./description-form";
export * from "./form";
export * from "./main-content";
export * from "./modal";
export * from "./parent-issues-list-modal";
export * from "./sidebar-custom-attributes-list"
export * from "./sidebar";
export * from "./sub-issues-list";
export * from "./label";

142
web/components/issues/peek-overview/issue-properties.tsx
View File

@ -1,5 +1,3 @@
// mobx
import { observer } from "mobx-react-lite";
// headless ui
import { Disclosure } from "@headlessui/react";
import { StateGroupIcon } from "components/icons";
@ -14,12 +12,13 @@ import {
SidebarStateSelect,
TPeekOverviewModes,
} from "components/issues";
import { PeekOverviewCustomAttributesList } from "components/custom-attributes";
// ui
import { CustomDatePicker, Icon } from "components/ui";
// helpers
import { copyTextToClipboard } from "helpers/string.helper";
// types
import { IIssue, TIssuePriorities } from "types";
import { IIssue } from "types";
type Props = {
handleDeleteIssue: () => void;
@ -96,72 +95,77 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
/>
</div>
</div>
<div className="flex items-center gap-2 text-sm">
<div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
<Icon iconName="group" className="!text-base flex-shrink-0" />
<span className="flex-grow truncate">Assignees</span>
</div>
<div className="w-3/4">
<SidebarAssigneeSelect
value={issue.assignees}
onChange={(val: string[]) => handleUpdateIssue({ assignees_list: val })}
disabled={readOnly}
/>
</div>
</div>
<div className="flex items-center gap-2 text-sm">
<div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
<Icon iconName="signal_cellular_alt" className="!text-base flex-shrink-0" />
<span className="flex-grow truncate">Priority</span>
</div>
<div className="w-3/4">
<SidebarPrioritySelect
value={issue.priority}
onChange={(val) => handleUpdateIssue({ priority: val })}
disabled={readOnly}
/>
</div>
</div>
<div className="flex items-center gap-2 text-sm">
<div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
<Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
<span className="flex-grow truncate">Start date</span>
</div>
<div>
<CustomDatePicker
placeholder="Select start date"
value={issue.start_date}
onChange={(val) =>
handleUpdateIssue({
start_date: val,
})
}
className="bg-custom-background-80 border-none"
maxDate={maxDate ?? undefined}
disabled={readOnly}
/>
</div>
</div>
<div className="flex items-center gap-2 text-sm">
<div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
<Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
<span className="flex-grow truncate">Due date</span>
</div>
<div>
<CustomDatePicker
placeholder="Select due date"
value={issue.target_date}
onChange={(val) =>
handleUpdateIssue({
target_date: val,
})
}
className="bg-custom-background-80 border-none"
minDate={minDate ?? undefined}
disabled={readOnly}
/>
</div>
</div>
{issue.entity === null && (
<>
<div className="flex items-center gap-2 text-sm">
<div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
<Icon iconName="group" className="!text-base flex-shrink-0" />
<span className="flex-grow truncate">Assignees</span>
</div>
<div className="w-3/4">
<SidebarAssigneeSelect
value={issue.assignees}
onChange={(val: string[]) => handleUpdateIssue({ assignees_list: val })}
disabled={readOnly}
/>
</div>
</div>
<div className="flex items-center gap-2 text-sm">
<div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
<Icon iconName="signal_cellular_alt" className="!text-base flex-shrink-0" />
<span className="flex-grow truncate">Priority</span>
</div>
<div className="w-3/4">
<SidebarPrioritySelect
value={issue.priority}
onChange={(val) => handleUpdateIssue({ priority: val })}
disabled={readOnly}
/>
</div>
</div>
<div className="flex items-center gap-2 text-sm">
<div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
<Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
<span className="flex-grow truncate">Start date</span>
</div>
<div>
<CustomDatePicker
placeholder="Select start date"
value={issue.start_date}
onChange={(val) =>
handleUpdateIssue({
start_date: val,
})
}
className="bg-custom-background-80 border-none"
maxDate={maxDate ?? undefined}
disabled={readOnly}
/>
</div>
</div>
<div className="flex items-center gap-2 text-sm">
<div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
<Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
<span className="flex-grow truncate">Due date</span>
</div>
<div>
<CustomDatePicker
placeholder="Select due date"
value={issue.target_date}
onChange={(val) =>
handleUpdateIssue({
target_date: val,
})
}
className="bg-custom-background-80 border-none"
minDate={minDate ?? undefined}
disabled={readOnly}
/>
</div>
</div>
</>
)}
{issue.entity !== null && <PeekOverviewCustomAttributesList issue={issue} />}
{/* <div className="flex items-center gap-2 text-sm">
<div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
<Icon iconName="change_history" className="!text-base flex-shrink-0" />

3
web/components/issues/sidebar.tsx
View File

@ -32,8 +32,8 @@ import {
SidebarLabelSelect,
SidebarDuplicateSelect,
SidebarRelatesSelect,
SidebarCustomAttributesList,
} from "components/issues";
import { SidebarCustomAttributesList } from "components/custom-attributes";
// ui
import { CustomDatePicker, Icon } from "components/ui";
// icons
@ -56,7 +56,6 @@ import { copyTextToClipboard } from "helpers/string.helper";
import type { ICycle, IIssue, IIssueLink, linkDetails, IModule } from "types";
// fetch-keys
import { ISSUE_DETAILS } from "constants/fetch-keys";
import { ObjectsSelect } from "components/custom-attributes";
type Props = {
control: any;

2
web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
View File

@ -180,7 +180,7 @@ const ArchivedIssueDetailsPage: NextPage = () => {
</button>
</div>
)}
<div className="space-y-5 divide-y-2 divide-custom-border-200 opacity-60 pointer-events-none">
<div className="space-y-5 divide-y divide-custom-border-200 opacity-60 pointer-events-none">
<IssueMainContent
issueDetails={issueDetails}
submitChanges={submitChanges}

2
web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
View File

@ -145,7 +145,7 @@ const IssueDetailsPage: NextPage = () => {
/>
) : issueDetails && projectId ? (
<div className="flex h-full overflow-hidden">
<div className="w-2/3 h-full overflow-y-auto space-y-5 divide-y-2 divide-custom-border-300 p-5">
<div className="w-2/3 h-full overflow-y-auto space-y-5 divide-y divide-custom-border-200 p-5">
<IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} />
</div>
<div className="w-1/3 h-full space-y-5 border-l border-custom-border-300 py-5 overflow-hidden">