fakz9/Crm-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: deal attributes with select and options

Browse Source
This commit is contained in:
AlexSserb
2025-10-29 19:36:58 +04:00
parent 8019fa566c
commit 4cc6360bb4
14 changed files with 489 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/deals/drawers/DealEditorDrawer/components/AttributeValueInput.tsx
View File

@ -1,6 +1,7 @@
import { CSSProperties, FC, JSX } from "react";
import { Checkbox, NumberInput, TextInput } from "@mantine/core";
import { DatePickerInput, DateTimePicker } from "@mantine/dates";
import AttrOptionSelect from "@/app/module-editor/[moduleId]/components/shared/AttrOptionSelect/AttrOptionSelect";
import { DealModuleAttributeSchema } from "@/lib/client";
import { naiveDateTimeStringToUtc } from "@/utils/datetime";
@ -25,15 +26,13 @@ const AttributeValueInput: FC<Props> = ({
error,
};
const renderCheckbox = () => {
return (
<Checkbox
{...commonProps}
checked={Boolean(value)}
onChange={e => onChange(e.currentTarget.checked)}
/>
);
};
const renderCheckbox = () => (
<Checkbox
{...commonProps}
checked={Boolean(value)}
onChange={e => onChange(e.currentTarget.checked)}
/>
);
const renderDatePicker = () => (
<DatePickerInput
@ -84,6 +83,18 @@ const AttributeValueInput: FC<Props> = ({
/>
);
const renderSelect = () => {
if (!attrInfo.select?.id) return <></>;
return (
<AttrOptionSelect
{...commonProps}
value={value}
onChange={onChange}
selectId={attrInfo.select.id}
/>
);
};
const renderingFuncMap: Record<string, () => JSX.Element> = {
bool: renderCheckbox,
date: renderDatePicker,
@ -91,6 +102,7 @@ const AttributeValueInput: FC<Props> = ({
str: renderTextInput,
int: renderNumberInput,
float: renderNumberInput,
select: renderSelect,
};
const render = renderingFuncMap[attrInfo.type.type];

51
src/app/module-editor/[moduleId]/components/shared/AttrOptionSelect/AttrOptionSelect.tsx Normal file
View File

@ -0,0 +1,51 @@
import { useEffect, useState } from "react";
import { omit } from "lodash";
import useAttributeOptionsList from "@/app/module-editor/[moduleId]/components/shared/AttrOptionSelect/useAttributeOptionsList";
import ObjectSelect from "@/components/selects/ObjectSelect/ObjectSelect";
import { AttrOptionSchema } from "@/lib/client";
type Props = {
value: any;
onChange: (val: any) => void;
selectId: number;
error?: string;
label?: string;
};
const AttrOptionSelect = (props: Props) => {
const { options } = useAttributeOptionsList(props);
const [selectedOption, setSelectedOption] = useState<AttrOptionSchema>();
useEffect(() => {
if (!props.value) {
setSelectedOption(undefined);
return;
}
setSelectedOption(options.find(option => option.value === props.value));
}, [props.value, options]);
const restProps = omit(props, ["value, onChange", "selectId"]);
return (
<ObjectSelect
label={"Значение"}
{...restProps}
data={options}
value={selectedOption}
onChange={option => {
setSelectedOption(option);
props.onChange(option.value);
}}
onClear={() => {
setSelectedOption(undefined);
props.onChange(null);
}}
getLabelFn={option => option.label}
clearable
searchable
/>
);
};
export default AttrOptionSelect;

19
src/app/module-editor/[moduleId]/components/shared/AttrOptionSelect/useAttributeOptionsList.ts Normal file
View File

@ -0,0 +1,19 @@
import { useQuery } from "@tanstack/react-query";
import { getAttrSelectOptionsOptions } from "@/lib/client/@tanstack/react-query.gen";
type Props = {
selectId: number;
};
const useAttributeSelectsList = ({ selectId }: Props) => {
const { data, refetch } = useQuery(
getAttrSelectOptionsOptions({ path: { selectId } })
);
return {
options: data?.items ?? [],
refetch,
};
};
export default useAttributeSelectsList;

24
src/app/module-editor/[moduleId]/components/shared/AttrSelectSelect/AttrSelectSelect.tsx Normal file
View File

@ -0,0 +1,24 @@
import ObjectSelect, { ObjectSelectProps } from "@/components/selects/ObjectSelect/ObjectSelect";
import { AttributeSelectSchema } from "@/lib/client";
import useAttributeSelectsList from "./useAttributeSelectsList";
type Props = Omit<
ObjectSelectProps<AttributeSelectSchema>,
"data" | "getLabelFn"
>;
const AttrSelectSelect = (props: Props) => {
const { selects } = useAttributeSelectsList();
return (
<ObjectSelect
label={"Объект для выбора"}
getLabelFn={select => select.label}
data={selects}
{...props}
/>
);
};
export default AttrSelectSelect;

13
src/app/module-editor/[moduleId]/components/shared/AttrSelectSelect/useAttributeSelectsList.ts Normal file
View File

@ -0,0 +1,13 @@
import { useQuery } from "@tanstack/react-query";
import { getAttrSelectsOptions } from "@/lib/client/@tanstack/react-query.gen";
const useAttributeSelectsList = () => {
const { data, refetch } = useQuery(getAttrSelectsOptions());
return {
selects: data?.items ?? [],
refetch,
};
};
export default useAttributeSelectsList;

4
src/app/module-editor/[moduleId]/components/shared/AttributesTable/useAttributesTableColumns.tsx
View File

@ -20,6 +20,10 @@ const useAttributesTableColumns = () => {
{
title: "Тип",
accessor: "type.name",
render: attr =>
attr.type.type === "select"
? `Выбор "${attr.label}"`
: attr.type.name,
},
{
accessor: "actions",

17
src/app/module-editor/[moduleId]/components/shared/DefaultAttributeValueInput/DefaultAttributeValueInput.tsx
View File

@ -1,11 +1,12 @@
import { Checkbox, NumberInput, TextInput } from "@mantine/core";
import { DatePickerInput, DateTimePicker } from "@mantine/dates";
import { UseFormReturnType } from "@mantine/form";
import { UpdateAttributeSchema } from "@/lib/client";
import AttrOptionSelect from "@/app/module-editor/[moduleId]/components/shared/AttrOptionSelect/AttrOptionSelect";
import { AttributeSchema } from "@/lib/client";
import { naiveDateTimeStringToUtc } from "@/utils/datetime";
type Props = {
form: UseFormReturnType<Partial<UpdateAttributeSchema>>;
form: UseFormReturnType<Partial<AttributeSchema>>;
};
const DefaultAttributeValueInput = ({ form }: Props) => {
@ -87,8 +88,18 @@ const DefaultAttributeValueInput = ({ form }: Props) => {
}
/>
);
} else if (type === "select") {
if (!form.values.select?.id) return <></>;
return (
<AttrOptionSelect
label={"Значение по умолчанию"}
{...form.getInputProps("defaultValue")}
value={form.values.defaultValue}
onChange={value => form.setFieldValue("defaultValue", value)}
selectId={form.values.select?.id}
/>
);
}
return <></>;
};

5
src/app/module-editor/[moduleId]/components/shared/ModuleAttribute/ModuleAttribute.tsx
View File

@ -40,7 +40,10 @@ const ModuleAttribute: FC<Props> = ({ attribute }) => {
align={"center"}>
<Stack gap={7}>
<>{getAttrLabelText()}</>
<Text>Тип: {attribute.type.name}</Text>
<Text>
Тип: {attribute.type.name}{" "}
{attribute.select && `"${attribute.select.label}"`}
</Text>
</Stack>
<Group
justify={"end"}

26
src/app/module-editor/[moduleId]/modals/AttributeEditorModal.tsx
View File

@ -5,6 +5,7 @@ import { Checkbox, Stack, Textarea, TextInput } from "@mantine/core";
import { useForm } from "@mantine/form";
import { ContextModalProps } from "@mantine/modals";
import AttributeTypeSelect from "@/app/module-editor/[moduleId]/components/shared/AttributeTypeSelect/AttributeTypeSelect";
import AttrSelectSelect from "@/app/module-editor/[moduleId]/components/shared/AttrSelectSelect/AttrSelectSelect";
import DefaultAttributeValueInput from "@/app/module-editor/[moduleId]/components/shared/DefaultAttributeValueInput/DefaultAttributeValueInput";
import {
AttributeSchema,
@ -30,7 +31,7 @@ const AttributeEditorModal = ({
const [isNullableInputShown, setIsNullableInputShown] = useState(true);
const [copyTypeId, setCopyTypeId] = useState<number>();
const form = useForm<Partial<UpdateAttributeSchema>>({
const form = useForm<any>({
initialValues: innerProps.isEditing
? innerProps.entity
: ({
@ -38,11 +39,13 @@ const AttributeEditorModal = ({
name: "",
typeId: undefined,
type: undefined,
selectId: undefined,
select: undefined,
isApplicableToGroup: false,
isNullable: false,
defaultValue: null,
description: "",
} as Partial<CreateAttributeSchema>),
} as Partial<AttributeSchema>),
validate: {
label: label => !label?.trim() && "Название не заполнено",
type: type => !type && "Тип атрибута не выбран",
@ -62,7 +65,7 @@ const AttributeEditorModal = ({
if (!isInitial) {
if (type === "bool") {
form.setFieldValue("isNullable", false);
form.setFieldValue("defaultValue", { value: false });
form.setFieldValue("defaultValue", false);
} else {
form.setFieldValue("defaultValue", null);
}
@ -88,10 +91,27 @@ const AttributeEditorModal = ({
disabled={innerProps.isEditing}
{...form.getInputProps("type")}
onChange={type => {
if (type.type !== "select") {
form.setFieldValue("select", undefined);
form.setFieldValue("selectId", undefined);
}
form.setFieldValue("type", type);
form.setFieldValue("typeId", type.id);
}}
/>
{form.values.type?.type === "select" && (
<AttrSelectSelect
withAsterisk
searchable
disabled={innerProps.isEditing}
{...form.getInputProps("select")}
onChange={select => {
form.setFieldValue("select", select);
form.setFieldValue("selectId", select.id);
form.setFieldValue("defaultValue", null);
}}
/>
)}
<Checkbox
label={"Значение синхронизировано в группе"}
{...form.getInputProps("isApplicableToGroup", {

4
src/app/modules/hooks/useAttributesInnerTableColumns.tsx
View File

@ -27,6 +27,10 @@ const useAttributesInnerTableColumns = () => {
{
title: "Тип",
accessor: "type.name",
render: attr =>
attr.type.type === "select"
? `Выбор "${attr.label}"`
: attr.type.name,
},
{
title: "Значение по умолчанию",

51
src/lib/client/@tanstack/react-query.gen.ts
View File

@ -53,6 +53,8 @@ import {
duplicateProductServices,
getAttributes,
getAttributeTypes,
getAttrSelectOptions,
getAttrSelects,
getBarcodeTemplateAttributes,
getBarcodeTemplates,
getBarcodeTemplateSizes,
@ -230,6 +232,8 @@ import type {
DuplicateProductServicesResponse,
GetAttributesData,
GetAttributeTypesData,
GetAttrSelectOptionsData,
GetAttrSelectsData,
GetBarcodeTemplateAttributesData,
GetBarcodeTemplatesData,
GetBarcodeTemplateSizesData,
@ -374,6 +378,53 @@ const createQueryKey = <TOptions extends Options>(
return [params];
};
export const getAttrSelectsQueryKey = (options?: Options<GetAttrSelectsData>) =>
createQueryKey("getAttrSelects", options);
/**
* Get Attr Selects
*/
export const getAttrSelectsOptions = (
options?: Options<GetAttrSelectsData>
) => {
return queryOptions({
queryFn: async ({ queryKey, signal }) => {
const { data } = await getAttrSelects({
...options,
...queryKey[0],
signal,
throwOnError: true,
});
return data;
},
queryKey: getAttrSelectsQueryKey(options),
});
};
export const getAttrSelectOptionsQueryKey = (
options: Options<GetAttrSelectOptionsData>
) => createQueryKey("getAttrSelectOptions", options);
/**
* Get Attr Select Options
*/
export const getAttrSelectOptionsOptions = (
options: Options<GetAttrSelectOptionsData>
) => {
return queryOptions({
queryFn: async ({ queryKey, signal }) => {
const { data } = await getAttrSelectOptions({
...options,
...queryKey[0],
signal,
throwOnError: true,
});
return data;
},
queryKey: getAttrSelectOptionsQueryKey(options),
});
};
export const getAttributesQueryKey = (options?: Options<GetAttributesData>) =>
createQueryKey("getAttributes", options);

55
src/lib/client/sdk.gen.ts
View File

@ -135,6 +135,11 @@ import type {
GetAttributesResponses,
GetAttributeTypesData,
GetAttributeTypesResponses,
GetAttrSelectOptionsData,
GetAttrSelectOptionsErrors,
GetAttrSelectOptionsResponses,
GetAttrSelectsData,
GetAttrSelectsResponses,
GetBarcodeTemplateAttributesData,
GetBarcodeTemplateAttributesResponses,
GetBarcodeTemplatesData,
@ -359,6 +364,10 @@ import {
zGetAttributesResponse,
zGetAttributeTypesData,
zGetAttributeTypesResponse,
zGetAttrSelectOptionsData,
zGetAttrSelectOptionsResponse,
zGetAttrSelectsData,
zGetAttrSelectsResponse,
zGetBarcodeTemplateAttributesData,
zGetBarcodeTemplateAttributesResponse,
zGetBarcodeTemplatesData,
@ -476,6 +485,52 @@ export type Options<
meta?: Record<string, unknown>;
};
/**
* Get Attr Selects
*/
export const getAttrSelects = <ThrowOnError extends boolean = false>(
options?: Options<GetAttrSelectsData, ThrowOnError>
) => {
return (options?.client ?? _heyApiClient).get<
GetAttrSelectsResponses,
unknown,
ThrowOnError
>({
requestValidator: async data => {
return await zGetAttrSelectsData.parseAsync(data);
},
responseType: "json",
responseValidator: async data => {
return await zGetAttrSelectsResponse.parseAsync(data);
},
url: "/crm/v1/attr-select/",
...options,
});
};
/**
* Get Attr Select Options
*/
export const getAttrSelectOptions = <ThrowOnError extends boolean = false>(
options: Options<GetAttrSelectOptionsData, ThrowOnError>
) => {
return (options.client ?? _heyApiClient).get<
GetAttrSelectOptionsResponses,
GetAttrSelectOptionsErrors,
ThrowOnError
>({
requestValidator: async data => {
return await zGetAttrSelectOptionsData.parseAsync(data);
},
responseType: "json",
responseValidator: async data => {
return await zGetAttrSelectOptionsResponse.parseAsync(data);
},
url: "/crm/v1/attr-select/{selectId}",
...options,
});
};
/**
* Get Attributes
*/

135
src/lib/client/types.gen.ts
View File

@ -24,6 +24,42 @@ export type AddAttributeResponse = {
message: string;
};
/**
* AttrOptionSchema
*/
export type AttrOptionSchema = {
/**
* Id
*/
id: number;
/**
* Label
*/
label: string;
/**
* Value
*/
value: unknown;
};
/**
* AttrSelectSchema
*/
export type AttrSelectSchema = {
/**
* Id
*/
id: number;
/**
* Label
*/
label: string;
/**
* Isbuiltin
*/
isBuiltIn: boolean;
};
/**
* AttributeSchema
*/
@ -52,6 +88,10 @@ export type AttributeSchema = {
* Typeid
*/
typeId: number;
/**
* Selectid
*/
selectId: number | null;
/**
* Id
*/
@ -61,6 +101,21 @@ export type AttributeSchema = {
*/
isBuiltIn: boolean;
type: AttributeTypeSchema;
select: AttributeSelectSchema | null;
};
/**
* AttributeSelectSchema
*/
export type AttributeSelectSchema = {
/**
* Id
*/
id: number;
/**
* Label
*/
label: string;
};
/**
@ -312,6 +367,10 @@ export type CreateAttributeSchema = {
* Typeid
*/
typeId: number;
/**
* Selectid
*/
selectId: number | null;
};
/**
@ -1039,6 +1098,7 @@ export type DealModuleAttributeSchema = {
*/
value: unknown | null;
type: AttributeTypeSchema;
select: AttributeSelectSchema | null;
/**
* Defaultvalue
*/
@ -1426,6 +1486,26 @@ export type DeleteStatusResponse = {
message: string;
};
/**
* GetAllAttrSelectOptionsResponse
*/
export type GetAllAttrSelectOptionsResponse = {
/**
* Items
*/
items: Array<AttrOptionSchema>;
};
/**
* GetAllAttrSelectsResponse
*/
export type GetAllAttrSelectsResponse = {
/**
* Items
*/
items: Array<AttrSelectSchema>;
};
/**
* GetAllAttributeTypesResponse
*/
@ -1775,6 +1855,10 @@ export type ModuleAttributeSchema = {
* Typeid
*/
typeId: number;
/**
* Selectid
*/
selectId: number | null;
/**
* Id
*/
@ -1784,6 +1868,7 @@ export type ModuleAttributeSchema = {
*/
isBuiltIn: boolean;
type: AttributeTypeSchema;
select: AttributeSelectSchema | null;
/**
* Originallabel
*/
@ -2373,7 +2458,6 @@ export type UpdateAttributeSchema = {
* Description
*/
description?: string | null;
type?: AttributeTypeSchema | null;
};
/**
@ -3076,6 +3160,55 @@ export type ValidationError = {
type: string;
};
export type GetAttrSelectsData = {
body?: never;
path?: never;
query?: never;
url: "/crm/v1/attr-select/";
};
export type GetAttrSelectsResponses = {
/**
* Successful Response
*/
200: GetAllAttrSelectsResponse;
};
export type GetAttrSelectsResponse =
GetAttrSelectsResponses[keyof GetAttrSelectsResponses];
export type GetAttrSelectOptionsData = {
body?: never;
path: {
/**
* Selectid
*/
selectId: number;
};
query?: never;
url: "/crm/v1/attr-select/{selectId}";
};
export type GetAttrSelectOptionsErrors = {
/**
* Validation Error
*/
422: HttpValidationError;
};
export type GetAttrSelectOptionsError =
GetAttrSelectOptionsErrors[keyof GetAttrSelectOptionsErrors];
export type GetAttrSelectOptionsResponses = {
/**
* Successful Response
*/
200: GetAllAttrSelectOptionsResponse;
};
export type GetAttrSelectOptionsResponse =
GetAttrSelectOptionsResponses[keyof GetAttrSelectOptionsResponses];
export type GetAttributesData = {
body?: never;
path?: never;

75
src/lib/client/zod.gen.ts
View File

@ -17,6 +17,24 @@ export const zAddAttributeResponse = z.object({
message: z.string(),
});
/**
* AttrOptionSchema
*/
export const zAttrOptionSchema = z.object({
id: z.int(),
label: z.string(),
value: z.unknown(),
});
/**
* AttrSelectSchema
*/
export const zAttrSelectSchema = z.object({
id: z.int(),
label: z.string(),
isBuiltIn: z.boolean(),
});
/**
* AttributeTypeSchema
*/
@ -26,6 +44,14 @@ export const zAttributeTypeSchema = z.object({
name: z.string(),
});
/**
* AttributeSelectSchema
*/
export const zAttributeSelectSchema = z.object({
id: z.int(),
label: z.string(),
});
/**
* AttributeSchema
*/
@ -36,9 +62,11 @@ export const zAttributeSchema = z.object({
defaultValue: z.union([z.unknown(), z.null()]),
description: z.string(),
typeId: z.int(),
selectId: z.union([z.int(), z.null()]),
id: z.int(),
isBuiltIn: z.boolean(),
type: zAttributeTypeSchema,
select: z.union([zAttributeSelectSchema, z.null()]),
});
/**
@ -102,14 +130,14 @@ export const zBoardSchema = z.object({
* Body_upload_product_barcode_image
*/
export const zBodyUploadProductBarcodeImage = z.object({
upload_file: z.string(),
upload_file: z.any(),
});
/**
* Body_upload_product_image
*/
export const zBodyUploadProductImage = z.object({
upload_file: z.string(),
upload_file: z.any(),
});
/**
@ -144,6 +172,7 @@ export const zCreateAttributeSchema = z.object({
defaultValue: z.union([z.unknown(), z.null()]),
description: z.string(),
typeId: z.int(),
selectId: z.union([z.int(), z.null()]),
});
/**
@ -833,6 +862,7 @@ export const zDealModuleAttributeSchema = z.object({
originalLabel: z.string(),
value: z.union([z.unknown(), z.null()]),
type: zAttributeTypeSchema,
select: z.union([zAttributeSelectSchema, z.null()]),
defaultValue: z.unknown(),
description: z.string(),
isApplicableToGroup: z.boolean(),
@ -996,6 +1026,20 @@ export const zDeleteStatusResponse = z.object({
message: z.string(),
});
/**
* GetAllAttrSelectOptionsResponse
*/
export const zGetAllAttrSelectOptionsResponse = z.object({
items: z.array(zAttrOptionSchema),
});
/**
* GetAllAttrSelectsResponse
*/
export const zGetAllAttrSelectsResponse = z.object({
items: z.array(zAttrSelectSchema),
});
/**
* GetAllAttributeTypesResponse
*/
@ -1027,9 +1071,11 @@ export const zModuleAttributeSchema = z.object({
defaultValue: z.union([z.unknown(), z.null()]),
description: z.string(),
typeId: z.int(),
selectId: z.union([z.int(), z.null()]),
id: z.int(),
isBuiltIn: z.boolean(),
type: zAttributeTypeSchema,
select: z.union([zAttributeSelectSchema, z.null()]),
originalLabel: z.string(),
});
@ -1344,7 +1390,6 @@ export const zUpdateAttributeSchema = z.object({
isNullable: z.optional(z.union([z.boolean(), z.null()])),
defaultValue: z.optional(z.union([z.unknown(), z.null()])),
description: z.optional(z.union([z.string(), z.null()])),
type: z.optional(z.union([zAttributeTypeSchema, z.null()])),
});
/**
@ -1805,6 +1850,30 @@ export const zUpdateStatusResponse = z.object({
message: z.string(),
});
export const zGetAttrSelectsData = z.object({
body: z.optional(z.never()),
path: z.optional(z.never()),
query: z.optional(z.never()),
});
/**
* Successful Response
*/
export const zGetAttrSelectsResponse = zGetAllAttrSelectsResponse;
export const zGetAttrSelectOptionsData = z.object({
body: z.optional(z.never()),
path: z.object({
selectId: z.int(),
}),
query: z.optional(z.never()),
});
/**
* Successful Response
*/
export const zGetAttrSelectOptionsResponse = zGetAllAttrSelectOptionsResponse;
export const zGetAttributesData = z.object({
body: z.optional(z.never()),
path: z.optional(z.never()),