chore: render custom attributes on the issue details sidebar

web/components/custom-attributes/attribute-forms/checkbox-attribute-form.tsx

@@ -26,7 +26,14 @@ const checkboxAttributeRepresentations = [
 export const CheckboxAttributeForm: React.FC<FormComponentProps> = ({ control }) => (
   <>
     <div className="space-y-3">
-      <Input placeholder="Enter field title" />
+      {" "}
+      <Controller
+        control={control}
+        name="display_name"
+        render={({ field: { onChange, value } }) => (
+          <Input placeholder="Enter field title" value={value} onChange={onChange} />
+        )}
+      />
       <div>
         <p className="text-xs">Default value</p>
         <div className="mt-2 flex items-center gap-6 accent-custom-primary-100">

web/components/custom-attributes/attribute-forms/date-time-attribute-form.tsx

@@ -3,7 +3,7 @@ import { Controller } from "react-hook-form";
 // components
 import { FormComponentProps, Input } from "components/custom-attributes";
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect, ToggleSwitch } from "components/ui";
 // constants
 import { DATE_FORMATS, TIME_FORMATS } from "constants/custom-attributes";
 
@@ -16,49 +16,73 @@ export const DateTimeAttributeForm: React.FC<FormComponentProps> = ({ control })
         <Input placeholder="Enter field title" value={value} onChange={onChange} />
       )}
     />
-    <Controller
+    <div>
-      control={control}
+      <Controller
-      name="extra_settings.date_format"
+        control={control}
-      render={({ field: { onChange, value } }) => (
+        name="extra_settings.date_format"
-        <CustomSelect
+        render={({ field: { onChange, value } }) => (
-          label={
+          <CustomSelect
-            <span className="text-xs">{DATE_FORMATS.find((f) => f.value === value)?.label}</span>
+            label={
-          }
+              <span className="text-xs">{DATE_FORMATS.find((f) => f.value === value)?.label}</span>
-          value={value}
+            }
-          onChange={onChange}
+            value={value}
-          buttonClassName="bg-custom-background-100 !px-3 !py-2 !border-custom-border-200 !rounded"
+            onChange={onChange}
-          optionsClassName="w-full"
+            buttonClassName="bg-custom-background-100 !px-3 !py-2 !border-custom-border-200 !rounded"
-          input
+            optionsClassName="w-full"
-        >
+            input
-          {DATE_FORMATS.map((format) => (
+          >
-            <CustomSelect.Option key={format.value} value={format.value}>
+            {DATE_FORMATS.map((format) => (
-              {format.label}
+              <CustomSelect.Option key={format.value} value={format.value}>
-            </CustomSelect.Option>
+                {format.label}
-          ))}
+              </CustomSelect.Option>
-        </CustomSelect>
+            ))}
-      )}
+          </CustomSelect>
-    />
+        )}
-    <Controller
+      />
-      control={control}
+      <Controller
-      name="extra_settings.time_format"
+        control={control}
-      render={({ field: { onChange, value } }) => (
+        name="extra_settings.hide_date"
-        <CustomSelect
+        render={({ field: { onChange, value } }) => (
-          label={
+          <div className="flex items-center justify-end gap-1 mt-2">
-            <span className="text-xs">{TIME_FORMATS.find((f) => f.value === value)?.label}</span>
+            <ToggleSwitch value={value ?? false} onChange={onChange} size="sm" />
-          }
+            <span className="text-xs">Don{"'"}t show date</span>
-          value={value}
+          </div>
-          onChange={onChange}
+        )}
-          buttonClassName="bg-custom-background-100 !px-3 !py-2 !border-custom-border-200 !rounded"
+      />
-          optionsClassName="w-full"
+    </div>
-          input
+    <div>
-        >
+      <Controller
-          {TIME_FORMATS.map((format) => (
+        control={control}
-            <CustomSelect.Option key={format.value} value={format.value}>
+        name="extra_settings.time_format"
-              {format.label}
+        render={({ field: { onChange, value } }) => (
-            </CustomSelect.Option>
+          <CustomSelect
-          ))}
+            label={
-        </CustomSelect>
+              <span className="text-xs">{TIME_FORMATS.find((f) => f.value === value)?.label}</span>
-      )}
+            }
-    />
+            value={value}
+            onChange={onChange}
+            buttonClassName="bg-custom-background-100 !px-3 !py-2 !border-custom-border-200 !rounded"
+            optionsClassName="w-full"
+            input
+          >
+            {TIME_FORMATS.map((format) => (
+              <CustomSelect.Option key={format.value} value={format.value}>
+                {format.label}
+              </CustomSelect.Option>
+            ))}
+          </CustomSelect>
+        )}
+      />
+      <Controller
+        control={control}
+        name="extra_settings.hide_time"
+        render={({ field: { onChange, value } }) => (
+          <div className="flex items-center justify-end gap-1 mt-2">
+            <ToggleSwitch value={value ?? false} onChange={onChange} size="sm" />
+            <span className="text-xs">Don{"'"}t show time</span>
+          </div>
+        )}
+      />
+    </div>
   </div>
 );

web/components/custom-attributes/attribute-forms/number-attribute-form.tsx

@@ -114,6 +114,9 @@ export const NumberAttributeForm: React.FC<FormComponentProps> = ({ control, wat
                     step={1}
                   />
                 )}
+                rules={{
+                  required: "This field is required",
+                }}
               />
             </div>
           </>

web/components/custom-attributes/attribute-forms/select-attribute/select-option.tsx

@@ -40,7 +40,7 @@ export const SelectOption: React.FC<Props> = observer(({ objectId, option }) =>
           <p
             className="text-custom-text-300 text-xs p-1 rounded inline truncate"
             style={{
-              backgroundColor: `${option.color}20`,
+              backgroundColor: `${option.color}40`,
             }}
           >
             {option.display_name}

web/components/custom-attributes/attributes/checkbox.tsx

@@ -0,0 +1,28 @@
+// ui
+import { ToggleSwitch } from "components/ui";
+// types
+import { Props } from "./types";
+
+export const CustomCheckboxAttribute: React.FC<Props & { value: boolean }> = ({
+  attributeDetails,
+  onChange,
+  value,
+}) => {
+  const handleUpdateCheckbox = (val: boolean | string) => onChange(val.toString());
+
+  return (
+    <>
+      {attributeDetails.extra_settings.representation === "toggle_switch" ? (
+        <ToggleSwitch value={value ?? false} onChange={handleUpdateCheckbox} />
+      ) : (
+        <div className="flex-shrink-0 flex items-center">
+          <input
+            type="checkbox"
+            defaultChecked={value}
+            onChange={(e) => handleUpdateCheckbox(e.target.checked)}
+          />
+        </div>
+      )}
+    </>
+  );
+};

web/components/custom-attributes/attributes/date-time.tsx

@@ -0,0 +1,44 @@
+import { useState } from "react";
+
+// types
+import { Props } from "./types";
+import { renderDateFormat } from "helpers/date-time.helper";
+
+export const CustomDateTimeAttribute: React.FC<Props & { value: Date | undefined }> = ({
+  onChange,
+  value,
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+
+  const handleUpdateDateTime = (val: string) => {
+    setIsEditing(false);
+
+    onChange(new Date(val));
+  };
+
+  return (
+    <div className="flex-shrink-0">
+      {!isEditing &&
+        (value ? (
+          <div
+            className="cursor-pointer text-xs px-2 py-0.5 bg-custom-background-80 rounded w-min max-w-full whitespace-nowrap outline-none"
+            onClick={() => setIsEditing(true)}
+          >
+            {renderDateFormat(value)}
+          </div>
+        ) : (
+          <div className="cursor-pointer text-xs truncate" onClick={() => setIsEditing(true)}>
+            Empty
+          </div>
+        ))}
+      {isEditing && (
+        <input
+          type="datetime-local"
+          className="text-xs px-2 py-0.5 bg-custom-background-80 rounded w-full outline-none"
+          defaultValue={value?.toString()}
+          onBlur={(e) => handleUpdateDateTime(e.target.value)}
+        />
+      )}
+    </div>
+  );
+};

web/components/custom-attributes/attributes/email.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from "react";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// types
+import { Props } from "./types";
+
+export const CustomEmailAttribute: React.FC<Props & { value: string | undefined }> = ({
+  onChange,
+  value,
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+
+  const { control, handleSubmit, reset, setFocus } = useForm({ defaultValues: { email: "" } });
+
+  const handleFormSubmit = (data: { email: string }) => {
+    setIsEditing(false);
+
+    onChange(data.email);
+  };
+
+  useEffect(() => {
+    if (isEditing) {
+      setFocus("email");
+    }
+  }, [isEditing, setFocus]);
+
+  useEffect(() => {
+    reset({ email: value?.toString() });
+  }, [reset, value]);
+
+  useEffect(() => {
+    const handleEscKeyPress = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setIsEditing(false);
+    };
+
+    document.addEventListener("keydown", handleEscKeyPress);
+
+    return () => {
+      document.removeEventListener("keydown", handleEscKeyPress);
+    };
+  }, []);
+
+  return (
+    <div className="flex-shrink-0">
+      {!isEditing && (
+        <div className="cursor-pointer text-xs truncate" onClick={() => setIsEditing(true)}>
+          {value ?? "Empty"}
+        </div>
+      )}
+      {isEditing && (
+        <form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center">
+          <Controller
+            control={control}
+            name="email"
+            render={({ field }) => (
+              <input
+                type="email"
+                className="text-xs px-2 py-0.5 bg-custom-background-80 rounded w-full outline-none"
+                {...field}
+              />
+            )}
+          />
+        </form>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,17 @@
+// types
+import { Props } from "./types";
+
+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>
+);

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

@@ -1 +1,9 @@
+export * from "./checkbox";
+export * from "./date-time";
+export * from "./email";
+export * from "./file";
+export * from "./number";
+export * from "./relation";
+export * from "./select";
 export * from "./text";
+export * from "./url";

web/components/custom-attributes/attributes/number.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useState } from "react";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// ui
+import { ProgressBar } from "components/ui";
+// types
+import { Props } from "./types";
+
+export const CustomNumberAttribute: React.FC<Props & { value: number | undefined }> = ({
+  attributeDetails,
+  onChange,
+  value,
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+
+  const { control, handleSubmit, reset, setFocus } = useForm({ defaultValues: { number: "" } });
+
+  const handleFormSubmit = (data: { number: string }) => {
+    setIsEditing(false);
+
+    onChange(data.number);
+  };
+
+  useEffect(() => {
+    if (isEditing) {
+      setFocus("number");
+    }
+  }, [isEditing, setFocus]);
+
+  useEffect(() => {
+    reset({ number: value?.toString() });
+  }, [reset, value]);
+
+  useEffect(() => {
+    const handleEscKeyPress = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setIsEditing(false);
+    };
+
+    document.addEventListener("keydown", handleEscKeyPress);
+
+    return () => {
+      document.removeEventListener("keydown", handleEscKeyPress);
+    };
+  }, []);
+
+  const extraSettings = attributeDetails.extra_settings;
+
+  return (
+    <div className="flex-shrink-0">
+      {!isEditing && (
+        <div className="cursor-pointer text-xs" onClick={() => setIsEditing(true)}>
+          {value ? (
+            <>
+              {extraSettings?.representation === "bar" ? (
+                <div className="flex items-center gap-2 w-full">
+                  {extraSettings?.show_number && (
+                    <span className="flex-shrink-0 font-medium">{value}</span>
+                  )}
+                  <div className="relative h-1.5 bg-custom-background-80 flex-grow w-full rounded-full overflow-hidden">
+                    <div
+                      className="absolute top-0 left-0 h-full"
+                      style={{
+                        backgroundColor: extraSettings?.color ?? "rgb(var(--color-primary-100))",
+                        width: `${(value / parseInt(extraSettings.divided_by, 10)) * 100}%`,
+                      }}
+                    />
+                  </div>
+                </div>
+              ) : extraSettings?.representation === "ring" ? (
+                <div className="flex items-center gap-2 w-full">
+                  {extraSettings?.show_number && (
+                    <span className="flex-shrink-0 font-medium">{value}</span>
+                  )}
+                  <ProgressBar
+                    activeStrokeColor={extraSettings?.color ?? "rgb(var(--color-primary-100))"}
+                    value={value}
+                    maxValue={parseInt(extraSettings.divided_by, 10)}
+                  />
+                </div>
+              ) : (
+                <span className="font-medium">{value}</span>
+              )}
+            </>
+          ) : (
+            "Empty"
+          )}
+        </div>
+      )}
+      {isEditing && (
+        <form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center">
+          <Controller
+            control={control}
+            name="number"
+            render={({ field }) => (
+              <input
+                type="number"
+                className="hide-arrows text-xs px-2 py-0.5 bg-custom-background-80 rounded w-full outline-none"
+                {...field}
+              />
+            )}
+          />
+        </form>
+      )}
+    </div>
+  );
+};

web/components/custom-attributes/attributes/relation.tsx

@@ -0,0 +1,122 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// headless ui
+import { Combobox, Transition } from "@headlessui/react";
+// services
+import cyclesService from "services/cycles.service";
+import modulesService from "services/modules.service";
+// icons
+import { Search } from "lucide-react";
+// types
+import { Props } from "./types";
+// fetch-keys
+import { CYCLES_LIST, MODULE_LIST } from "constants/fetch-keys";
+
+export const CustomRelationAttribute: React.FC<Props & { value: string | undefined }> = ({
+  attributeDetails,
+  onChange,
+  projectId,
+  value,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const [query, setQuery] = useState("");
+
+  const { data: cycles } = useSWR(
+    workspaceSlug && projectId && attributeDetails.unit === "cycle"
+      ? CYCLES_LIST(projectId.toString())
+      : null,
+    workspaceSlug && projectId && attributeDetails.unit === "cycle"
+      ? () =>
+          cyclesService.getCyclesWithParams(workspaceSlug.toString(), projectId.toString(), "all")
+      : null
+  );
+
+  const { data: modules } = useSWR(
+    workspaceSlug && projectId && attributeDetails.unit === "module"
+      ? MODULE_LIST(projectId as string)
+      : null,
+    workspaceSlug && projectId && attributeDetails.unit === "module"
+      ? () => modulesService.getModules(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const optionsList =
+    attributeDetails.unit === "cycle"
+      ? cycles?.map((c) => ({ id: c.id, name: c.name }))
+      : attributeDetails.unit === "module"
+      ? modules?.map((m) => ({ id: m.id, name: m.name }))
+      : [];
+
+  const selectedOption = (optionsList ?? []).find((option) => option.id === value);
+
+  const options = (optionsList ?? []).filter((option) =>
+    option.name.toLowerCase().includes(query.toLowerCase())
+  );
+
+  return (
+    <Combobox
+      as="div"
+      value={value}
+      onChange={(val) => onChange(val)}
+      className="relative flex-shrink-0 text-left"
+    >
+      {({ open }: { open: boolean }) => (
+        <>
+          <Combobox.Button className="flex items-center text-xs rounded px-2.5 py-0.5 truncate w-min max-w-full text-left bg-custom-background-80">
+            {selectedOption?.name ?? `Select ${attributeDetails.unit}`}
+          </Combobox.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"
+          >
+            <Combobox.Options className="fixed z-10 mb-2 border-[0.5px] border-custom-border-300 p-1 min-w-[10rem] max-h-60 max-w-[10rem] rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none mt-1 flex flex-col overflow-hidden">
+              <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">
+                <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"
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  placeholder="Type to search..."
+                  displayValue={(assigned: any) => assigned?.name}
+                />
+              </div>
+              <div className="mt-1 overflow-y-auto">
+                {options ? (
+                  options.length > 0 ? (
+                    options.map((option) => (
+                      <Combobox.Option
+                        key={option.id}
+                        value={option.id}
+                        className="flex items-center gap-1 cursor-pointer select-none truncate rounded px-1 py-1.5 hover:bg-custom-background-80 w-full"
+                      >
+                        <span className="px-1 rounded-sm truncate">{option.name}</span>
+                      </Combobox.Option>
+                    ))
+                  ) : (
+                    <p className="text-custom-text-300 text-center py-1">
+                      No {attributeDetails.unit}s found
+                    </p>
+                  )
+                ) : (
+                  <p className="text-custom-text-300 text-center py-1">Loading...</p>
+                )}
+              </div>
+            </Combobox.Options>
+          </Transition>
+        </>
+      )}
+    </Combobox>
+  );
+};

web/components/custom-attributes/attributes/select.tsx

@@ -0,0 +1,87 @@
+import React, { useState } from "react";
+
+// headless ui
+import { Combobox, Transition } from "@headlessui/react";
+// icons
+import { Search } from "lucide-react";
+// types
+import { Props } from "./types";
+
+export const CustomSelectAttribute: React.FC<Props & { value: string | undefined }> = ({
+  attributeDetails,
+  onChange,
+  value,
+}) => {
+  const [query, setQuery] = useState("");
+
+  const selectedOption =
+    attributeDetails.children.find((option) => option.id === value) ??
+    attributeDetails.children.find((option) => option.is_default);
+
+  const options = attributeDetails.children.filter((option) =>
+    option.display_name.toLowerCase().includes(query.toLowerCase())
+  );
+
+  return (
+    <Combobox
+      as="div"
+      value={value}
+      onChange={(val) => onChange(val)}
+      className="relative flex-shrink-0 text-left"
+    >
+      {({ open }: { open: boolean }) => (
+        <>
+          <Combobox.Button
+            className={`flex items-center text-xs rounded px-2.5 py-0.5 truncate w-min max-w-full text-left ${
+              selectedOption ? "" : "bg-custom-background-80"
+            }`}
+            style={{
+              backgroundColor: `${selectedOption?.color}40`,
+            }}
+          >
+            {selectedOption?.display_name ?? "Select"}
+          </Combobox.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"
+          >
+            <Combobox.Options className="fixed z-10 mb-2 border-[0.5px] border-custom-border-300 p-1 min-w-[10rem] max-h-60 max-w-[10rem] rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none mt-1 flex flex-col overflow-hidden">
+              <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">
+                <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"
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  placeholder="Type to search..."
+                  displayValue={(assigned: any) => assigned?.name}
+                />
+              </div>
+              <div className="mt-1 overflow-y-auto">
+                {(options ?? []).map((option) => (
+                  <Combobox.Option
+                    key={option.id}
+                    value={option.id}
+                    className="flex items-center gap-1 cursor-pointer select-none truncate rounded px-1 py-1.5 hover:bg-custom-background-80 w-full"
+                  >
+                    <span
+                      className="px-1 rounded-sm truncate"
+                      style={{ backgroundColor: `${option.color}40` }}
+                    >
+                      {option.display_name}
+                    </span>
+                  </Combobox.Option>
+                ))}
+              </div>
+            </Combobox.Options>
+          </Transition>
+        </>
+      )}
+    </Combobox>
+  );
+};

web/components/custom-attributes/attributes/text.tsx

@@ -1,26 +1,68 @@
+import { useEffect, useState } from "react";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
 // types
-import { ICustomAttribute } from "types";
+import { Props } from "./types";
 
-type Props = {
+export const CustomTextAttribute: React.FC<Props & { value: string | undefined }> = ({
-  attributeDetails: ICustomAttribute;
-  issueId: string;
-  onChange: (value: string) => void;
-  projectId: string;
-  value: string;
-};
-
-export const CustomTextAttribute: React.FC<Props> = ({
-  attributeDetails,
-  issueId,
   onChange,
   value,
-}) => (
+}) => {
-  <input
+  const [isEditing, setIsEditing] = useState(false);
-    className="border border-custom-border-200 rounded outline-none p-1 text-xs"
+
-    defaultValue={attributeDetails.default_value ?? ""}
+  const { control, handleSubmit, reset, setFocus } = useForm({ defaultValues: { text: "" } });
-    id={`attribute-${attributeDetails.display_name}-${attributeDetails.id}`}
+
-    name={`attribute-${attributeDetails.display_name}-${attributeDetails.id}`}
+  const handleFormSubmit = (data: { text: string }) => {
-    onChange={(e) => onChange(e.target.value)}
+    setIsEditing(false);
-    value={value}
+
-  />
+    onChange(data.text);
-);
+  };
+
+  useEffect(() => {
+    if (isEditing) {
+      setFocus("text");
+    }
+  }, [isEditing, setFocus]);
+
+  useEffect(() => {
+    reset({ text: value ?? "" });
+  }, [reset, value]);
+
+  useEffect(() => {
+    const handleEscKeyPress = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setIsEditing(false);
+    };
+
+    document.addEventListener("keydown", handleEscKeyPress);
+
+    return () => {
+      document.removeEventListener("keydown", handleEscKeyPress);
+    };
+  }, []);
+
+  return (
+    <div className="flex-shrink-0">
+      {!isEditing && (
+        <div className="cursor-pointer text-xs truncate" onClick={() => setIsEditing(true)}>
+          {value ?? "Empty"}
+        </div>
+      )}
+      {isEditing && (
+        <form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center">
+          <Controller
+            control={control}
+            name="text"
+            render={({ field }) => (
+              <input
+                type="text"
+                className="text-xs px-2 py-0.5 bg-custom-background-80 rounded w-full outline-none"
+                {...field}
+              />
+            )}
+          />
+        </form>
+      )}
+    </div>
+  );
+};

web/components/custom-attributes/attributes/types.d.ts

@@ -0,0 +1,9 @@
+// types
+import { ICustomAttribute } from "types";
+
+export type Props = {
+  attributeDetails: ICustomAttribute;
+  issueId: string;
+  onChange: (value: any) => void;
+  projectId: string;
+};

web/components/custom-attributes/attributes/url.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from "react";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// types
+import { Props } from "./types";
+
+export const CustomUrlAttribute: React.FC<Props & { value: string | undefined }> = ({
+  onChange,
+  value,
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+
+  const { control, handleSubmit, reset, setFocus } = useForm({ defaultValues: { url: "" } });
+
+  const handleFormSubmit = (data: { url: string }) => {
+    setIsEditing(false);
+
+    onChange(data.url);
+  };
+
+  useEffect(() => {
+    if (isEditing) {
+      setFocus("url");
+    }
+  }, [isEditing, setFocus]);
+
+  useEffect(() => {
+    reset({ url: value?.toString() });
+  }, [reset, value]);
+
+  useEffect(() => {
+    const handleEscKeyPress = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setIsEditing(false);
+    };
+
+    document.addEventListener("keydown", handleEscKeyPress);
+
+    return () => {
+      document.removeEventListener("keydown", handleEscKeyPress);
+    };
+  }, []);
+
+  return (
+    <div className="flex-shrink-0">
+      {!isEditing && (
+        <div className="cursor-pointer text-xs truncate" onClick={() => setIsEditing(true)}>
+          {value ?? "Empty"}
+        </div>
+      )}
+      {isEditing && (
+        <form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center">
+          <Controller
+            control={control}
+            name="url"
+            render={({ field }) => (
+              <input
+                type="url"
+                className="text-xs px-2 py-0.5 bg-custom-background-80 rounded w-full outline-none"
+                {...field}
+              />
+            )}
+          />
+        </form>
+      )}
+    </div>
+  );
+};

web/components/custom-attributes/objects-select.tsx

@@ -34,6 +34,8 @@ export const ObjectsSelect: React.FC<Props> = observer(({ onChange, projectId, v
   }));
   options?.unshift({ value: null, query: "default", content: "Default" });
 
+  console.log("entities", entities);
+
   useEffect(() => {
     if (!workspaceSlug) return;
 
@@ -42,7 +44,11 @@ export const ObjectsSelect: React.FC<Props> = observer(({ onChange, projectId, v
 
   return (
     <CustomSearchSelect
-      label={entities?.find((e) => e.id === value)?.display_name ?? "Default"}
+      customButton={
+        <button type="button" className="bg-custom-background-80 rounded text-xs px-2.5 py-0.5">
+          {entities?.find((e) => e.id === value)?.display_name ?? "Default"}
+        </button>
+      }
       value={value}
       maxHeight="md"
       optionsClassName="!min-w-[10rem]"

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

@@ -5,17 +5,25 @@ import { useRouter } from "next/router";
 // mobx
 import { useMobxStore } from "lib/mobx/store-provider";
 import { observer } from "mobx-react-lite";
+// components
+import {
+  CustomCheckboxAttribute,
+  CustomFileAttribute,
+  CustomSelectAttribute,
+  CustomTextAttribute,
+} from "components/custom-attributes";
+// ui
 import { Loader } from "components/ui";
-import { CustomTextAttribute } from "components/custom-attributes";
 
 type Props = {
   entityId: string;
   issueId: string;
+  onSubmit: () => Promise<void>;
   projectId: string;
 };
 
 export const CustomAttributesList: React.FC<Props> = observer(
-  ({ entityId, issueId, projectId }) => {
+  ({ entityId, issueId, onSubmit, projectId }) => {
     const router = useRouter();
     const { workspaceSlug } = router.query;
 
@@ -54,6 +62,33 @@ export const CustomAttributesList: React.FC<Props> = observer(
                     value={attribute.default_value ?? ""}
                   />
                 )}
+                {attribute.type === "select" && (
+                  <CustomSelectAttribute
+                    attributeDetails={attribute}
+                    issueId={issueId}
+                    onChange={() => {}}
+                    projectId={projectId}
+                    value={attribute.default_value ?? ""}
+                  />
+                )}
+                {attribute.type === "checkbox" && (
+                  <CustomCheckboxAttribute
+                    attributeDetails={attribute}
+                    issueId={issueId}
+                    onChange={() => {}}
+                    projectId={projectId}
+                    value={attribute.default_value === "checked" ? true : false}
+                  />
+                )}
+                {attribute.type === "files" && (
+                  <CustomFileAttribute
+                    attributeDetails={attribute}
+                    issueId={issueId}
+                    onChange={() => {}}
+                    projectId={projectId}
+                    value={null}
+                  />
+                )}
               </div>
             ))}
           </div>

web/components/issues/form.tsx

@@ -266,7 +266,7 @@ export const IssueForm: FC<IssueFormProps> = ({
               </h3>
             </div>
             <div className="flex-shrink-0">
-              {(fieldsToShow.includes("all") || fieldsToShow.includes("project")) && (
+              {(fieldsToShow.includes("all") || fieldsToShow.includes("entity")) && (
                 <Controller
                   control={control}
                   name="entity"
@@ -559,7 +559,7 @@ export const IssueForm: FC<IssueFormProps> = ({
             onClick={() => setCreateMore((prevData) => !prevData)}
           >
             <span className="text-xs">Create more</span>
-            <ToggleSwitch value={createMore} onChange={() => {}} size="md" />
+            <ToggleSwitch value={createMore} onChange={() => {}} size="sm" />
           </div>
           <div className="flex items-center gap-2">
             <SecondaryButton onClick={handleClose}>Discard</SecondaryButton>

web/components/issues/index.ts

@@ -13,6 +13,7 @@ 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/sidebar-custom-attributes-list.tsx

@@ -0,0 +1,177 @@
+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";
+// types
+import { ICustomAttributeValueFormData, IIssue } from "types";
+// constants
+import { CUSTOM_ATTRIBUTES_LIST } from "constants/custom-attributes";
+
+type Props = {
+  issue: IIssue | undefined;
+};
+
+export const SidebarCustomAttributesList: 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;
+
+  return (
+    <div>
+      {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 flex-wrap py-2">
+            <div className="flex-grow truncate flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
+              <typeMetaData.icon className="flex-shrink-0" size={16} strokeWidth={1.5} />
+              <p className="truncate">{attribute.display_name}</p>
+            </div>
+            <div className="flex-shrink-0 sm:w-1/2">
+              {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>
+        );
+      })}
+    </div>
+  );
+});

web/components/issues/sidebar.tsx

@@ -32,6 +32,7 @@ import {
   SidebarLabelSelect,
   SidebarDuplicateSelect,
   SidebarRelatesSelect,
+  SidebarCustomAttributesList,
 } from "components/issues";
 // ui
 import { CustomDatePicker, Icon } from "components/ui";
@@ -48,13 +49,14 @@ import {
   UserIcon,
   RectangleGroupIcon,
 } from "@heroicons/react/24/outline";
+import { ContrastIcon } from "components/icons";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
 import type { ICycle, IIssue, IIssueLink, linkDetails, IModule } from "types";
 // fetch-keys
 import { ISSUE_DETAILS } from "constants/fetch-keys";
-import { ContrastIcon } from "components/icons";
+import { ObjectsSelect } from "components/custom-attributes";
 
 type Props = {
   control: any;
@@ -62,6 +64,7 @@ type Props = {
   issueDetail: IIssue | undefined;
   watch: UseFormWatch<IIssue>;
   fieldsToShow?: (
+    | "entity"
     | "state"
     | "assignee"
     | "priority"
@@ -350,6 +353,27 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
           <div className={`divide-y-2 divide-custom-border-200 ${uneditable ? "opacity-60" : ""}`}>
             {showFirstSection && (
               <div className="py-1">
+                {/* {(fieldsToShow.includes("all") || fieldsToShow.includes("entity")) && (
+                  <div className="flex flex-wrap items-center py-2">
+                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+                      <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
+                      <p>Object</p>
+                    </div>
+                    <div className="sm:basis-1/2">
+                      <Controller
+                        control={control}
+                        name="entity"
+                        render={({ field: { value } }) => (
+                          <ObjectsSelect
+                            onChange={(val: string | null) => submitChanges({ entity: val })}
+                            projectId={projectId?.toString() ?? ""}
+                            value={value}
+                          />
+                        )}
+                      />
+                    </div>
+                  </div>
+                )} */}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
                   <div className="flex flex-wrap items-center py-2">
                     <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
@@ -371,49 +395,52 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                     </div>
                   </div>
                 )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && (
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) &&
-                  <div className="flex flex-wrap items-center py-2">
+                  watchIssue("entity") === null && (
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+                    <div className="flex flex-wrap items-center py-2">
-                      <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
+                      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <p>Assignees</p>
+                        <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
+                        <p>Assignees</p>
+                      </div>
+                      <div className="sm:basis-1/2">
+                        <Controller
+                          control={control}
+                          name="assignees_list"
+                          render={({ field: { value } }) => (
+                            <SidebarAssigneeSelect
+                              value={value}
+                              onChange={(val: string[]) => submitChanges({ assignees_list: val })}
+                              disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                            />
+                          )}
+                        />
+                      </div>
                     </div>
-                    <div className="sm:basis-1/2">
+                  )}
-                      <Controller
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) &&
-                        control={control}
+                  watchIssue("entity") === null && (
-                        name="assignees_list"
+                    <div className="flex flex-wrap items-center py-2">
-                        render={({ field: { value } }) => (
+                      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                          <SidebarAssigneeSelect
+                        <ChartBarIcon className="h-4 w-4 flex-shrink-0" />
-                            value={value}
+                        <p>Priority</p>
-                            onChange={(val: string[]) => submitChanges({ assignees_list: val })}
+                      </div>
-                            disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                      <div className="sm:basis-1/2">
-                          />
+                        <Controller
-                        )}
+                          control={control}
-                      />
+                          name="priority"
+                          render={({ field: { value } }) => (
+                            <SidebarPrioritySelect
+                              value={value}
+                              onChange={(val) => submitChanges({ priority: val })}
+                              disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                            />
+                          )}
+                        />
+                      </div>
                     </div>
-                  </div>
+                  )}
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
-                  <div className="flex flex-wrap items-center py-2">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <ChartBarIcon className="h-4 w-4 flex-shrink-0" />
-                      <p>Priority</p>
-                    </div>
-                    <div className="sm:basis-1/2">
-                      <Controller
-                        control={control}
-                        name="priority"
-                        render={({ field: { value } }) => (
-                          <SidebarPrioritySelect
-                            value={value}
-                            onChange={(val) => submitChanges({ priority: val })}
-                            disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
-                          />
-                        )}
-                      />
-                    </div>
-                  </div>
-                )}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) &&
+                  watchIssue("entity") === null &&
                   isEstimateActive && (
                     <div className="flex flex-wrap items-center py-2">
                       <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
@@ -439,7 +466,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                   )}
               </div>
             )}
-            {showSecondSection && (
+            {showSecondSection && watchIssue("entity") === null && (
               <div className="py-1">
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
                   <div className="flex flex-wrap items-center py-2">
@@ -603,7 +630,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                 )}
               </div>
             )}
-            {showThirdSection && (
+            {showThirdSection && watchIssue("entity") === null && (
               <div className="py-1">
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("cycle")) && (
                   <div className="flex flex-wrap items-center py-2">
@@ -638,43 +665,50 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
               </div>
             )}
           </div>
-          {(fieldsToShow.includes("all") || fieldsToShow.includes("label")) && (
+          {(fieldsToShow.includes("all") || fieldsToShow.includes("label")) &&
-            <SidebarLabelSelect
+            watchIssue("entity") === null && (
-              issueDetails={issueDetail}
+              <SidebarLabelSelect
-              issueControl={control}
+                issueDetails={issueDetail}
-              watchIssue={watchIssue}
+                issueControl={control}
-              submitChanges={submitChanges}
+                watchIssue={watchIssue}
-              isNotAllowed={isNotAllowed}
+                submitChanges={submitChanges}
-              uneditable={uneditable ?? false}
+                isNotAllowed={isNotAllowed}
-            />
+                uneditable={uneditable ?? false}
-          )}
+              />
-          {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && (
+            )}
-            <div className={`min-h-[116px] py-1 text-xs ${uneditable ? "opacity-60" : ""}`}>
+          {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) &&
-              <div className="flex items-center justify-between gap-2">
+            watchIssue("entity") === null && (
-                <h4>Links</h4>
+              <div className={`min-h-[116px] py-1 text-xs ${uneditable ? "opacity-60" : ""}`}>
-                {!isNotAllowed && (
+                <div className="flex items-center justify-between gap-2">
-                  <button
+                  <h4>Links</h4>
-                    type="button"
+                  {!isNotAllowed && (
-                    className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90 ${
+                    <button
-                      uneditable ? "cursor-not-allowed" : "cursor-pointer"
+                      type="button"
-                    }`}
+                      className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90 ${
-                    onClick={() => setLinkModal(true)}
+                        uneditable ? "cursor-not-allowed" : "cursor-pointer"
-                    disabled={uneditable}
+                      }`}
-                  >
+                      onClick={() => setLinkModal(true)}
-                    <PlusIcon className="h-4 w-4" />
+                      disabled={uneditable}
-                  </button>
+                    >
-                )}
+                      <PlusIcon className="h-4 w-4" />
-              </div>
+                    </button>
-              <div className="mt-2 space-y-2">
+                  )}
-                {issueDetail?.issue_link && issueDetail.issue_link.length > 0 ? (
+                </div>
-                  <LinksList
+                <div className="mt-2 space-y-2">
-                    links={issueDetail.issue_link}
+                  {issueDetail?.issue_link && issueDetail.issue_link.length > 0 ? (
-                    handleDeleteLink={handleDeleteLink}
+                    <LinksList
-                    handleEditLink={handleEditLink}
+                      links={issueDetail.issue_link}
-                    userAuth={memberRole}
+                      handleDeleteLink={handleDeleteLink}
-                  />
+                      handleEditLink={handleEditLink}
-                ) : null}
+                      userAuth={memberRole}
+                    />
+                  ) : null}
+                </div>
               </div>
+            )}
+          {watchIssue("entity") && (
+            <div className="py-1">
+              <SidebarCustomAttributesList issue={issueDetail} />
             </div>
           )}
         </div>

web/components/project/settings-sidebar.tsx

@@ -42,6 +42,10 @@ export const SettingsSidebar = () => {
       label: "Automations",
       href: `/${workspaceSlug}/projects/${projectId}/settings/automations`,
     },
+    {
+      label: "Custom Objects",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/custom-objects`,
+    },
   ];
   return (
     <div className="flex flex-col gap-2 w-80 px-9">

web/constants/custom-attributes.ts

@@ -34,6 +34,7 @@ export const CUSTOM_ATTRIBUTES_LIST: {
     },
     icon: CheckCircle,
     initialPayload: {
+      default_value: "checked",
       extra_settings: {
         representation: "check",
       },
@@ -51,6 +52,14 @@ export const CUSTOM_ATTRIBUTES_LIST: {
       is_required: false,
     },
     icon: Clock4,
+    initialPayload: {
+      extra_settings: {
+        date_format: "DD-MM-YYYY",
+        hide_date: false,
+        hide_time: false,
+        time_format: "12",
+      },
+    },
     label: "Date Time",
   },
   email: {

web/services/custom-attributes.service.ts

@@ -1,7 +1,7 @@
 // services
 import APIService from "services/api.service";
 // types
-import { ICustomAttribute } from "types";
+import { ICustomAttribute, ICustomAttributeValue, ICustomAttributeValueFormData } from "types";
 
 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
 
@@ -61,6 +61,36 @@ class CustomAttributesService extends APIService {
         throw error?.response?.data;
       });
   }
+
+  async getAttributeValues(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string
+  ): Promise<{ children: ICustomAttributeValue[] }> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/property-values/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createPropertyValues(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: ICustomAttributeValueFormData
+  ): Promise<{ children: ICustomAttributeValue[] }> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/property-values/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }
 
 const customAttributesService = new CustomAttributesService();

web/store/custom-attribute-values.ts

@@ -0,0 +1,104 @@
+// mobx
+import { action, observable, runInAction, makeAutoObservable } from "mobx";
+// services
+import customAttributesService from "services/custom-attributes.service";
+// types
+import type { ICustomAttributeValue, ICustomAttributeValueFormData } from "types";
+
+class CustomAttributeValuesStore {
+  issueAttributeValues: {
+    [key: string]: ICustomAttributeValue[];
+  } | null = null;
+  // loaders
+  fetchIssueAttributeValuesLoader = false;
+  // errors
+  error: any | null = null;
+  rootStore: any | null = null;
+
+  constructor(_rootStore: any | null = null) {
+    makeAutoObservable(this, {
+      issueAttributeValues: observable.ref,
+      fetchIssueAttributeValues: action,
+      createAttributeValue: action,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  fetchIssueAttributeValues = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      runInAction(() => {
+        this.fetchIssueAttributeValuesLoader = true;
+      });
+
+      const response = await customAttributesService.getAttributeValues(
+        workspaceSlug,
+        projectId,
+        issueId
+      );
+
+      runInAction(() => {
+        this.issueAttributeValues = {
+          ...this.issueAttributeValues,
+          [issueId]: response.children,
+        };
+        this.fetchIssueAttributeValuesLoader = false;
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.fetchIssueAttributeValuesLoader = false;
+        this.error = error;
+      });
+    }
+  };
+
+  createAttributeValue = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: ICustomAttributeValueFormData
+  ) => {
+    const newChildren = [...(this.issueAttributeValues?.[issueId] ?? [])];
+    const attributesToUpdate = [...Object.keys(data.issue_properties)];
+
+    newChildren.map((child) => {
+      if (attributesToUpdate.includes(child.id) && child)
+        child.prop_value = [{ type: "", value: data.issue_properties[child.id] }];
+
+      return child;
+    });
+
+    try {
+      runInAction(() => {
+        this.issueAttributeValues = {
+          ...this.issueAttributeValues,
+          [issueId]: [...newChildren],
+        };
+      });
+
+      const date = new Date();
+      const unixEpochTimeInSeconds = Math.floor(date.getTime() / 1000);
+
+      const response = await customAttributesService.createPropertyValues(
+        workspaceSlug,
+        projectId,
+        issueId,
+        { ...data, a_epoch: unixEpochTimeInSeconds }
+      );
+
+      runInAction(() => {
+        this.issueAttributeValues = {
+          ...this.issueAttributeValues,
+          [issueId]: response.children,
+        };
+        this.fetchIssueAttributeValuesLoader = false;
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+    }
+  };
+}
+
+export default CustomAttributeValuesStore;

web/store/custom-attributes.ts

@@ -41,7 +41,9 @@ class CustomAttributesStore {
 
   fetchEntities = async (workspaceSlug: string, projectId: string) => {
     try {
-      this.fetchEntitiesLoader = true;
+      runInAction(() => {
+        this.fetchEntitiesLoader = true;
+      });
 
       const response = await customAttributesService.getEntitiesList(workspaceSlug, {
         project: projectId,
@@ -63,7 +65,9 @@ class CustomAttributesStore {
 
   fetchEntityDetails = async (workspaceSlug: string, propertyId: string) => {
     try {
-      this.fetchEntityDetailsLoader = true;
+      runInAction(() => {
+        this.fetchEntityDetailsLoader = true;
+      });
 
       const response = await customAttributesService.getPropertyDetails(workspaceSlug, propertyId);
 
@@ -129,7 +133,9 @@ class CustomAttributesStore {
     data: Partial<ICustomAttribute> & { parent: string }
   ) => {
     try {
-      this.createEntityAttributeLoader = true;
+      runInAction(() => {
+        this.createEntityAttributeLoader = true;
+      });
 
       const response = await customAttributesService.createProperty(workspaceSlug, data);
 
@@ -207,7 +213,9 @@ class CustomAttributesStore {
     data: Partial<ICustomAttribute> & { parent: string }
   ) => {
     try {
-      this.createAttributeOptionLoader = true;
+      runInAction(() => {
+        this.createAttributeOptionLoader = true;
+      });
 
       const response = await customAttributesService.createProperty(workspaceSlug, data);
 
@@ -242,8 +250,6 @@ class CustomAttributesStore {
     data: Partial<ICustomAttribute>
   ) => {
     try {
-      this.createAttributeOptionLoader = true;
-
       const response = await customAttributesService.patchProperty(workspaceSlug, propertyId, data);
 
       const newOptions = this.entityAttributes[objectId][parentId].children.map((option) => ({
@@ -262,14 +268,12 @@ class CustomAttributesStore {
             },
           },
         };
-        this.createAttributeOptionLoader = false;
       });
 
       return response;
     } catch (error) {
       runInAction(() => {
         this.error = error;
-        this.createAttributeOptionLoader = false;
       });
     }
   };
@@ -281,8 +285,6 @@ class CustomAttributesStore {
     propertyId: string
   ) => {
     try {
-      this.createAttributeOptionLoader = true;
-
       const response = await customAttributesService.deleteProperty(workspaceSlug, propertyId);
 
       const newOptions = this.entityAttributes[objectId][parentId].children.filter(
@@ -300,14 +302,12 @@ class CustomAttributesStore {
             },
           },
         };
-        this.createAttributeOptionLoader = false;
       });
 
       return response;
     } catch (error) {
       runInAction(() => {
         this.error = error;
-        this.createAttributeOptionLoader = false;
       });
     }
   };

web/store/root.ts

@@ -7,6 +7,7 @@ import ProjectStore, { IProjectStore } from "./project";
 import ProjectPublishStore, { IProjectPublishStore } from "./project-publish";
 import IssuesStore from "./issues";
 import CustomAttributesStore from "./custom-attributes";
+import CustomAttributeValuesStore from "./custom-attribute-values";
 
 enableStaticRendering(typeof window === "undefined");
 
@@ -17,6 +18,7 @@ export class RootStore {
   projectPublish: IProjectPublishStore;
   issues: IssuesStore;
   customAttributes: CustomAttributesStore;
+  customAttributeValues: CustomAttributeValuesStore;
 
   constructor() {
     this.user = new UserStore(this);
@@ -25,5 +27,6 @@ export class RootStore {
     this.projectPublish = new ProjectPublishStore(this);
     this.issues = new IssuesStore(this);
     this.customAttributes = new CustomAttributesStore(this);
+    this.customAttributeValues = new CustomAttributeValuesStore(this);
   }
 }

web/styles/globals.css

@@ -359,3 +359,16 @@ body {
 .disable-scroll {
   overflow: hidden !important;
 }
+
+/* Chrome, Safari, Edge, Opera */
+input.hide-arrows::-webkit-outer-spin-button,
+input.hide-arrows::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input.hide-arrows[type="number"] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}

web/types/custom-attributes.d.ts

@@ -12,7 +12,7 @@ export type TCustomAttributeTypes =
   | "text"
   | "url";
 
-export type TCustomAttributeUnits = "cycle" | "issue" | "module" | "user";
+export type TCustomAttributeUnits = "cycle" | "issue" | "module" | "user" | null;
 
 export interface ICustomAttribute {
   children: ICustomAttribute[];
@@ -30,6 +30,27 @@ export interface ICustomAttribute {
   project: string | null;
   sort_order: number;
   type: TCustomAttributeTypes;
-  unit: TCustomAttributeUnits | null;
+  unit: TCustomAttributeUnits;
   workspace: string;
 }
+
+export interface ICustomAttributeValue {
+  children: ICustomAttributeValue[];
+  id: string;
+  name: string;
+  prop_value:
+    | {
+        type: string;
+        value: string;
+      }[]
+    | null;
+  type: TCustomAttributeTypes;
+  unit: TCustomAttributeUnits;
+}
+
+export interface ICustomAttributeValueFormData {
+  issue_properties: {
+    [key: string]: string;
+  };
+  a_epoch?: number;
+}