forked from github/plane
chore: render custom attributes on the issue details sidebar
This commit is contained in:
Aaryan Khandelwal
parent
cf384d3a4d
commit
529a286954
@ -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">
|
||||
|
||||
@ -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
|
||||
control={control}
|
||||
name="extra_settings.date_format"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<CustomSelect
|
||||
label={
|
||||
<span className="text-xs">{DATE_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
|
||||
>
|
||||
{DATE_FORMATS.map((format) => (
|
||||
<CustomSelect.Option key={format.value} value={format.value}>
|
||||
{format.label}
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="extra_settings.time_format"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<CustomSelect
|
||||
label={
|
||||
<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>
|
||||
)}
|
||||
/>
|
||||
<div>
|
||||
<Controller
|
||||
control={control}
|
||||
name="extra_settings.date_format"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<CustomSelect
|
||||
label={
|
||||
<span className="text-xs">{DATE_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
|
||||
>
|
||||
{DATE_FORMATS.map((format) => (
|
||||
<CustomSelect.Option key={format.value} value={format.value}>
|
||||
{format.label}
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="extra_settings.hide_date"
|
||||
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 date</span>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Controller
|
||||
control={control}
|
||||
name="extra_settings.time_format"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<CustomSelect
|
||||
label={
|
||||
<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>
|
||||
);
|
||||
|
||||
@ -114,6 +114,9 @@ export const NumberAttributeForm: React.FC<FormComponentProps> = ({ control, wat
|
||||
step={1}
|
||||
/>
|
||||
)}
|
||||
rules={{
|
||||
required: "This field is required",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -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}
|
||||
|
||||
28
web/components/custom-attributes/attributes/checkbox.tsx
Normal file
28
web/components/custom-attributes/attributes/checkbox.tsx
Normal file
@ -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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
44
web/components/custom-attributes/attributes/date-time.tsx
Normal file
44
web/components/custom-attributes/attributes/date-time.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
68
web/components/custom-attributes/attributes/email.tsx
Normal file
68
web/components/custom-attributes/attributes/email.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
17
web/components/custom-attributes/attributes/file.tsx
Normal file
17
web/components/custom-attributes/attributes/file.tsx
Normal file
@ -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>
|
||||
);
|
||||
@ -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";
|
||||
|
||||
107
web/components/custom-attributes/attributes/number.tsx
Normal file
107
web/components/custom-attributes/attributes/number.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
122
web/components/custom-attributes/attributes/relation.tsx
Normal file
122
web/components/custom-attributes/attributes/relation.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
87
web/components/custom-attributes/attributes/select.tsx
Normal file
87
web/components/custom-attributes/attributes/select.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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 = {
|
||||
attributeDetails: ICustomAttribute;
|
||||
issueId: string;
|
||||
onChange: (value: string) => void;
|
||||
projectId: string;
|
||||
value: string;
|
||||
};
|
||||
|
||||
export const CustomTextAttribute: React.FC<Props> = ({
|
||||
attributeDetails,
|
||||
issueId,
|
||||
export const CustomTextAttribute: React.FC<Props & { value: string | undefined }> = ({
|
||||
onChange,
|
||||
value,
|
||||
}) => (
|
||||
<input
|
||||
className="border border-custom-border-200 rounded outline-none p-1 text-xs"
|
||||
defaultValue={attributeDetails.default_value ?? ""}
|
||||
id={`attribute-${attributeDetails.display_name}-${attributeDetails.id}`}
|
||||
name={`attribute-${attributeDetails.display_name}-${attributeDetails.id}`}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
value={value}
|
||||
/>
|
||||
);
|
||||
}) => {
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
const { control, handleSubmit, reset, setFocus } = useForm({ defaultValues: { text: "" } });
|
||||
|
||||
const handleFormSubmit = (data: { text: string }) => {
|
||||
setIsEditing(false);
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
9
web/components/custom-attributes/attributes/types.d.ts
vendored
Normal file
9
web/components/custom-attributes/attributes/types.d.ts
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
// types
|
||||
import { ICustomAttribute } from "types";
|
||||
|
||||
export type Props = {
|
||||
attributeDetails: ICustomAttribute;
|
||||
issueId: string;
|
||||
onChange: (value: any) => void;
|
||||
projectId: string;
|
||||
};
|
||||
68
web/components/custom-attributes/attributes/url.tsx
Normal file
68
web/components/custom-attributes/attributes/url.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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]"
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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";
|
||||
|
||||
177
web/components/issues/sidebar-custom-attributes-list.tsx
Normal file
177
web/components/issues/sidebar-custom-attributes-list.tsx
Normal file
@ -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>
|
||||
);
|
||||
});
|
||||
@ -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")) && (
|
||||
<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">
|
||||
<UserGroupIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<p>Assignees</p>
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) &&
|
||||
watchIssue("entity") === null && (
|
||||
<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">
|
||||
<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
|
||||
control={control}
|
||||
name="assignees_list"
|
||||
render={({ field: { value } }) => (
|
||||
<SidebarAssigneeSelect
|
||||
value={value}
|
||||
onChange={(val: string[]) => submitChanges({ assignees_list: val })}
|
||||
disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) &&
|
||||
watchIssue("entity") === null && (
|
||||
<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>
|
||||
</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")) && (
|
||||
<SidebarLabelSelect
|
||||
issueDetails={issueDetail}
|
||||
issueControl={control}
|
||||
watchIssue={watchIssue}
|
||||
submitChanges={submitChanges}
|
||||
isNotAllowed={isNotAllowed}
|
||||
uneditable={uneditable ?? false}
|
||||
/>
|
||||
)}
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && (
|
||||
<div className={`min-h-[116px] py-1 text-xs ${uneditable ? "opacity-60" : ""}`}>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<h4>Links</h4>
|
||||
{!isNotAllowed && (
|
||||
<button
|
||||
type="button"
|
||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90 ${
|
||||
uneditable ? "cursor-not-allowed" : "cursor-pointer"
|
||||
}`}
|
||||
onClick={() => setLinkModal(true)}
|
||||
disabled={uneditable}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-2 space-y-2">
|
||||
{issueDetail?.issue_link && issueDetail.issue_link.length > 0 ? (
|
||||
<LinksList
|
||||
links={issueDetail.issue_link}
|
||||
handleDeleteLink={handleDeleteLink}
|
||||
handleEditLink={handleEditLink}
|
||||
userAuth={memberRole}
|
||||
/>
|
||||
) : null}
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("label")) &&
|
||||
watchIssue("entity") === null && (
|
||||
<SidebarLabelSelect
|
||||
issueDetails={issueDetail}
|
||||
issueControl={control}
|
||||
watchIssue={watchIssue}
|
||||
submitChanges={submitChanges}
|
||||
isNotAllowed={isNotAllowed}
|
||||
uneditable={uneditable ?? false}
|
||||
/>
|
||||
)}
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("link")) &&
|
||||
watchIssue("entity") === null && (
|
||||
<div className={`min-h-[116px] py-1 text-xs ${uneditable ? "opacity-60" : ""}`}>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<h4>Links</h4>
|
||||
{!isNotAllowed && (
|
||||
<button
|
||||
type="button"
|
||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90 ${
|
||||
uneditable ? "cursor-not-allowed" : "cursor-pointer"
|
||||
}`}
|
||||
onClick={() => setLinkModal(true)}
|
||||
disabled={uneditable}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-2 space-y-2">
|
||||
{issueDetail?.issue_link && issueDetail.issue_link.length > 0 ? (
|
||||
<LinksList
|
||||
links={issueDetail.issue_link}
|
||||
handleDeleteLink={handleDeleteLink}
|
||||
handleEditLink={handleEditLink}
|
||||
userAuth={memberRole}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{watchIssue("entity") && (
|
||||
<div className="py-1">
|
||||
<SidebarCustomAttributesList issue={issueDetail} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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();
|
||||
|
||||
104
web/store/custom-attribute-values.ts
Normal file
104
web/store/custom-attribute-values.ts
Normal file
@ -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;
|
||||
@ -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;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
25
web/types/custom-attributes.d.ts
vendored
25
web/types/custom-attributes.d.ts
vendored
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user