chore: file type attribute added

web/components/custom-attributes/attribute-display/file.tsx

@@ -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 }> = ({
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5 MB
-  attributeDetails,
+
-  onChange,
+export const CustomFileAttribute: React.FC<Props & { value: string | undefined }> = (props) => {
-  value,
+  const { attributeDetails, onChange, value } = props;
-}) => (
+
-  <div className="flex-shrink-0">
+  const [isUploading, setIsUploading] = useState(false);
-    <button
+
-      type="button"
+  const router = useRouter();
-      className="flex items-center gap-2 px-2.5 py-0.5 bg-custom-background-80 rounded text-xs"
+  const { workspaceSlug } = router.query;
-    >
+
-      Upload file
+  const { workspaceDetails } = useWorkspaceDetails();
-    </button>
+
-  </div>
+  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>
+  );
+};

web/components/custom-attributes/attributes-list/index.ts

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

web/components/custom-attributes/attributes-list/issue-modal-attributes-list.tsx

@@ -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;

web/components/custom-attributes/attributes-list/peek-overview-custom-attributes-list.tsx

@@ -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>
+        );
+      })}
+    </>
+  );
+});

web/components/custom-attributes/attributes-list/sidebar-custom-attributes-list.tsx

@@ -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}

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

@@ -58,17 +58,14 @@ export const FileFormatsDropdown: React.FC<Props> = ({ onChange, value }) => {
     <Combobox
       as="div"
       value={value}
-      onChange={(val) => {
+      onChange={(val) => onChange(val)}
-        console.log(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}

web/components/custom-attributes/index.ts

@@ -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";

web/components/issues/form.tsx

@@ -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}
                   />
                 )}

web/components/issues/index.ts

@@ -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";

web/components/issues/peek-overview/issue-properties.tsx

@@ -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">
+        {issue.entity === null && (
-          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+          <>
-            <Icon iconName="group" className="!text-base flex-shrink-0" />
+            <div className="flex items-center gap-2 text-sm">
-            <span className="flex-grow truncate">Assignees</span>
+              <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-          </div>
+                <Icon iconName="group" className="!text-base flex-shrink-0" />
-          <div className="w-3/4">
+                <span className="flex-grow truncate">Assignees</span>
-            <SidebarAssigneeSelect
+              </div>
-              value={issue.assignees}
+              <div className="w-3/4">
-              onChange={(val: string[]) => handleUpdateIssue({ assignees_list: val })}
+                <SidebarAssigneeSelect
-              disabled={readOnly}
+                  value={issue.assignees}
-            />
+                  onChange={(val: string[]) => handleUpdateIssue({ assignees_list: val })}
-          </div>
+                  disabled={readOnly}
-        </div>
+                />
-        <div className="flex items-center gap-2 text-sm">
+              </div>
-          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            </div>
-            <Icon iconName="signal_cellular_alt" className="!text-base flex-shrink-0" />
+            <div className="flex items-center gap-2 text-sm">
-            <span className="flex-grow truncate">Priority</span>
+              <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-          </div>
+                <Icon iconName="signal_cellular_alt" className="!text-base flex-shrink-0" />
-          <div className="w-3/4">
+                <span className="flex-grow truncate">Priority</span>
-            <SidebarPrioritySelect
+              </div>
-              value={issue.priority}
+              <div className="w-3/4">
-              onChange={(val) => handleUpdateIssue({ priority: val })}
+                <SidebarPrioritySelect
-              disabled={readOnly}
+                  value={issue.priority}
-            />
+                  onChange={(val) => handleUpdateIssue({ priority: val })}
-          </div>
+                  disabled={readOnly}
-        </div>
+                />
-        <div className="flex items-center gap-2 text-sm">
+              </div>
-          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            </div>
-            <Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
+            <div className="flex items-center gap-2 text-sm">
-            <span className="flex-grow truncate">Start date</span>
+              <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-          </div>
+                <Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
-          <div>
+                <span className="flex-grow truncate">Start date</span>
-            <CustomDatePicker
+              </div>
-              placeholder="Select start date"
+              <div>
-              value={issue.start_date}
+                <CustomDatePicker
-              onChange={(val) =>
+                  placeholder="Select start date"
-                handleUpdateIssue({
+                  value={issue.start_date}
-                  start_date: val,
+                  onChange={(val) =>
-                })
+                    handleUpdateIssue({
-              }
+                      start_date: val,
-              className="bg-custom-background-80 border-none"
+                    })
-              maxDate={maxDate ?? undefined}
+                  }
-              disabled={readOnly}
+                  className="bg-custom-background-80 border-none"
-            />
+                  maxDate={maxDate ?? undefined}
-          </div>
+                  disabled={readOnly}
-        </div>
+                />
-        <div className="flex items-center gap-2 text-sm">
+              </div>
-          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            </div>
-            <Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
+            <div className="flex items-center gap-2 text-sm">
-            <span className="flex-grow truncate">Due date</span>
+              <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-          </div>
+                <Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
-          <div>
+                <span className="flex-grow truncate">Due date</span>
-            <CustomDatePicker
+              </div>
-              placeholder="Select due date"
+              <div>
-              value={issue.target_date}
+                <CustomDatePicker
-              onChange={(val) =>
+                  placeholder="Select due date"
-                handleUpdateIssue({
+                  value={issue.target_date}
-                  target_date: val,
+                  onChange={(val) =>
-                })
+                    handleUpdateIssue({
-              }
+                      target_date: val,
-              className="bg-custom-background-80 border-none"
+                    })
-              minDate={minDate ?? undefined}
+                  }
-              disabled={readOnly}
+                  className="bg-custom-background-80 border-none"
-            />
+                  minDate={minDate ?? undefined}
-          </div>
+                  disabled={readOnly}
-        </div>
+                />
+              </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" />

web/components/issues/sidebar.tsx

@@ -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;

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

@@ -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}

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

@@ -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">