feat: deal attributes editing
This commit is contained in:
@ -0,0 +1,101 @@
|
||||
import { CSSProperties, FC, JSX } from "react";
|
||||
import { Checkbox, NumberInput, TextInput } from "@mantine/core";
|
||||
import { DatePickerInput, DateTimePicker } from "@mantine/dates";
|
||||
import { DealModuleAttributeSchema } from "@/lib/client";
|
||||
import { naiveDateTimeStringToUtc } from "@/utils/datetime";
|
||||
|
||||
type Props = {
|
||||
attrInfo: DealModuleAttributeSchema;
|
||||
value: any;
|
||||
onChange: (value: any) => void;
|
||||
error?: string;
|
||||
style?: CSSProperties;
|
||||
};
|
||||
|
||||
const AttributeValueInput: FC<Props> = ({
|
||||
attrInfo,
|
||||
value,
|
||||
onChange,
|
||||
error,
|
||||
style,
|
||||
}) => {
|
||||
const commonProps = {
|
||||
label: attrInfo.label,
|
||||
style,
|
||||
error,
|
||||
};
|
||||
|
||||
const renderCheckbox = () => {
|
||||
const localValue = value === undefined ? false : value;
|
||||
return (
|
||||
<Checkbox
|
||||
{...commonProps}
|
||||
checked={localValue}
|
||||
onChange={e => onChange(e.currentTarget.checked)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const renderDatePicker = () => (
|
||||
<DatePickerInput
|
||||
{...commonProps}
|
||||
value={value ? new Date(String(value)) : null}
|
||||
onChange={val => {
|
||||
onChange(val ? new Date(val) : null);
|
||||
}}
|
||||
clearable
|
||||
locale={"ru"}
|
||||
valueFormat={"DD.MM.YYYY"}
|
||||
/>
|
||||
);
|
||||
|
||||
const renderDateTimePicker = () => (
|
||||
<DateTimePicker
|
||||
{...commonProps}
|
||||
value={value ? naiveDateTimeStringToUtc(value) : null}
|
||||
onChange={val => {
|
||||
if (!val) return;
|
||||
const localDate = new Date(val.replace(" ", "T"));
|
||||
const utcString = localDate
|
||||
.toISOString()
|
||||
.substring(0, 19)
|
||||
.replace("T", " ");
|
||||
onChange(utcString);
|
||||
}}
|
||||
clearable
|
||||
locale={"ru"}
|
||||
valueFormat={"DD.MM.YYYY HH:mm"}
|
||||
/>
|
||||
);
|
||||
|
||||
const renderTextInput = () => (
|
||||
<TextInput
|
||||
{...commonProps}
|
||||
value={value ?? ""}
|
||||
onChange={e => onChange(e.currentTarget.value)}
|
||||
/>
|
||||
);
|
||||
|
||||
const renderNumberInput = () => (
|
||||
<NumberInput
|
||||
{...commonProps}
|
||||
allowDecimal={attrInfo.type.type === "float"}
|
||||
value={Number(value)}
|
||||
onChange={value => onChange(Number(value))}
|
||||
/>
|
||||
);
|
||||
|
||||
const renderingFuncMap: Record<string, () => JSX.Element> = {
|
||||
bool: renderCheckbox,
|
||||
date: renderDatePicker,
|
||||
datetime: renderDateTimePicker,
|
||||
str: renderTextInput,
|
||||
int: renderNumberInput,
|
||||
float: renderNumberInput,
|
||||
};
|
||||
|
||||
const render = renderingFuncMap[attrInfo.type.type];
|
||||
return render();
|
||||
};
|
||||
|
||||
export default AttributeValueInput;
|
||||
@ -1,8 +1,9 @@
|
||||
import React, { FC, ReactNode } from "react";
|
||||
import { IconEdit, IconHistory } from "@tabler/icons-react";
|
||||
import { motion } from "framer-motion";
|
||||
import { IconBlocks, IconEdit, IconHistory } from "@tabler/icons-react";
|
||||
import { Box, Tabs, Text } from "@mantine/core";
|
||||
import DealEditorTabPanel from "@/app/deals/drawers/DealEditorDrawer/components/DealEditorTabPanel";
|
||||
import TabsList from "@/app/deals/drawers/DealEditorDrawer/components/TabsList";
|
||||
import CustomTab from "@/app/deals/drawers/DealEditorDrawer/tabs/CustomTab/CustomTab";
|
||||
import DealStatusHistoryTab from "@/app/deals/drawers/DealEditorDrawer/tabs/DealStatusHistoryTab/DealStatusHistoryTab";
|
||||
import GeneralTab from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab";
|
||||
import useIsMobile from "@/hooks/utils/useIsMobile";
|
||||
@ -20,23 +21,6 @@ type Props = {
|
||||
const DealEditorBody: FC<Props> = props => {
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
const getTabPanel = (value: string, component: ReactNode): ReactNode => (
|
||||
<Tabs.Panel
|
||||
key={value}
|
||||
value={value}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.2 }}>
|
||||
<Box
|
||||
h={"100%"}
|
||||
w={"100%"}>
|
||||
{component}
|
||||
</Box>
|
||||
</motion.div>
|
||||
</Tabs.Panel>
|
||||
);
|
||||
|
||||
const getTab = (key: string, label: string, icon: ReactNode) => (
|
||||
<Tabs.Tab
|
||||
key={key}
|
||||
@ -56,6 +40,13 @@ const DealEditorBody: FC<Props> = props => {
|
||||
const tabs: ReactNode[] = [];
|
||||
|
||||
for (const module of props.project.modules) {
|
||||
if (!module.isBuiltIn) {
|
||||
for (const tab of module.tabs) {
|
||||
tabs.push(getTab(tab.key, tab.label, <IconBlocks />));
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
const moduleInfo = MODULES[module.key];
|
||||
for (const tab of moduleInfo.tabs) {
|
||||
if (
|
||||
@ -76,6 +67,23 @@ const DealEditorBody: FC<Props> = props => {
|
||||
const tabPanels: ReactNode[] = [];
|
||||
|
||||
for (const module of props.project.modules) {
|
||||
if (!module.isBuiltIn) {
|
||||
const tabPanel = (
|
||||
<DealEditorTabPanel
|
||||
key={module.key}
|
||||
value={module.key}>
|
||||
<CustomTab
|
||||
key={module.key}
|
||||
module={module}
|
||||
deal={props.value}
|
||||
/>
|
||||
</DealEditorTabPanel>
|
||||
);
|
||||
|
||||
tabPanels.push(tabPanel);
|
||||
continue;
|
||||
}
|
||||
|
||||
const moduleInfo = MODULES[module.key];
|
||||
for (const tab of moduleInfo.tabs) {
|
||||
if (
|
||||
@ -84,7 +92,14 @@ const DealEditorBody: FC<Props> = props => {
|
||||
)
|
||||
continue;
|
||||
|
||||
tabPanels.push(getTabPanel(tab.key, tab.tab(props)));
|
||||
const tabPanel = (
|
||||
<DealEditorTabPanel
|
||||
key={tab.key}
|
||||
value={tab.key}>
|
||||
{tab.tab(props)}
|
||||
</DealEditorTabPanel>
|
||||
);
|
||||
tabPanels.push(tabPanel);
|
||||
}
|
||||
}
|
||||
|
||||
@ -105,8 +120,12 @@ const DealEditorBody: FC<Props> = props => {
|
||||
{getModuleTabs()}
|
||||
</TabsList>
|
||||
|
||||
{getTabPanel("general", <GeneralTab {...props} />)}
|
||||
{getTabPanel("history", <DealStatusHistoryTab {...props} />)}
|
||||
<DealEditorTabPanel value={"general"}>
|
||||
<GeneralTab {...props} />
|
||||
</DealEditorTabPanel>
|
||||
<DealEditorTabPanel value={"history"}>
|
||||
<DealStatusHistoryTab {...props} />
|
||||
</DealEditorTabPanel>
|
||||
{getModuleTabPanels()}
|
||||
</Tabs>
|
||||
);
|
||||
|
||||
@ -0,0 +1,31 @@
|
||||
import React, { FC, PropsWithChildren } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Box, Tabs } from "@mantine/core";
|
||||
|
||||
type Props = {
|
||||
value: string;
|
||||
};
|
||||
|
||||
const DealEditorTabPanel: FC<PropsWithChildren<Props>> = ({
|
||||
value,
|
||||
children,
|
||||
}) => {
|
||||
return (
|
||||
<Tabs.Panel
|
||||
key={value}
|
||||
value={value}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.2 }}>
|
||||
<Box
|
||||
h={"100%"}
|
||||
w={"100%"}>
|
||||
{children}
|
||||
</Box>
|
||||
</motion.div>
|
||||
</Tabs.Panel>
|
||||
);
|
||||
};
|
||||
|
||||
export default DealEditorTabPanel;
|
||||
@ -0,0 +1,76 @@
|
||||
import { useMemo } from "react";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { AxiosError } from "axios";
|
||||
import {
|
||||
DealModuleAttributeSchema,
|
||||
HttpValidationError,
|
||||
UpdateDealModuleAttributeSchema,
|
||||
} from "@/lib/client";
|
||||
import {
|
||||
getDealModuleAttributesOptions,
|
||||
updateDealModuleAttributesMutation,
|
||||
} from "@/lib/client/@tanstack/react-query.gen";
|
||||
import { notifications } from "@/lib/notifications";
|
||||
|
||||
type Props = {
|
||||
dealId: number;
|
||||
moduleId: number;
|
||||
};
|
||||
|
||||
const useDealAttributeValuesActions = ({ dealId, moduleId }: Props) => {
|
||||
const { data, refetch: refetchAttributes } = useQuery(
|
||||
getDealModuleAttributesOptions({
|
||||
path: {
|
||||
dealId,
|
||||
moduleId,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
const sortedAttributes = useMemo(() => {
|
||||
if (!data?.attributes) return [];
|
||||
const sortedAttributes: DealModuleAttributeSchema[] = [];
|
||||
for (const attr of data.attributes) {
|
||||
if (attr.type.type === "bool") sortedAttributes.push(attr);
|
||||
else sortedAttributes.unshift(attr);
|
||||
}
|
||||
return sortedAttributes;
|
||||
}, [data?.attributes]);
|
||||
|
||||
const onError = (error: AxiosError<HttpValidationError>) => {
|
||||
console.error(error);
|
||||
notifications.error({
|
||||
message: error.response?.data?.detail as string | undefined,
|
||||
});
|
||||
};
|
||||
|
||||
const updateAttributeValuesMutation = useMutation({
|
||||
...updateDealModuleAttributesMutation(),
|
||||
onError,
|
||||
onSuccess: ({ message }) => {
|
||||
notifications.success({ message });
|
||||
refetchAttributes();
|
||||
},
|
||||
});
|
||||
|
||||
const updateAttributeValues = (
|
||||
attributeValues: UpdateDealModuleAttributeSchema[]
|
||||
) => {
|
||||
updateAttributeValuesMutation.mutate({
|
||||
path: {
|
||||
moduleId,
|
||||
dealId,
|
||||
},
|
||||
body: {
|
||||
attributes: attributeValues,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
dealAttributes: sortedAttributes,
|
||||
updateAttributeValues,
|
||||
};
|
||||
};
|
||||
|
||||
export default useDealAttributeValuesActions;
|
||||
@ -0,0 +1,141 @@
|
||||
import React, {
|
||||
FC,
|
||||
ReactNode,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from "react";
|
||||
import { Flex, Group } from "@mantine/core";
|
||||
import AttributeValueInput from "@/app/deals/drawers/DealEditorDrawer/components/AttributeValueInput";
|
||||
import useDealAttributeValuesActions from "@/app/deals/drawers/DealEditorDrawer/hooks/useDealAttributeValuesActions";
|
||||
import FormFlexRow from "@/components/ui/FormFlexRow/FormFlexRow";
|
||||
import InlineButton from "@/components/ui/InlineButton/InlineButton";
|
||||
import {
|
||||
DealModuleAttributeSchema,
|
||||
DealSchema,
|
||||
ModuleSchemaOutput,
|
||||
UpdateDealModuleAttributeSchema,
|
||||
} from "@/lib/client";
|
||||
|
||||
type Props = {
|
||||
module: ModuleSchemaOutput;
|
||||
deal: DealSchema;
|
||||
};
|
||||
|
||||
type Value = {
|
||||
value?: any;
|
||||
};
|
||||
|
||||
const CustomTab: FC<Props> = ({ module, deal }) => {
|
||||
const { dealAttributes, updateAttributeValues } =
|
||||
useDealAttributeValuesActions({
|
||||
moduleId: module.id,
|
||||
dealId: deal.id,
|
||||
});
|
||||
|
||||
const [attributeValuesMap, setAttributeValuesMap] = useState<
|
||||
Map<number, Value | null>
|
||||
>(new Map());
|
||||
const [attributeErrorsMap, setAttributeErrorsMap] = useState<
|
||||
Map<number, string>
|
||||
>(new Map());
|
||||
|
||||
useEffect(() => {
|
||||
const values = new Map<number, Value | null>();
|
||||
for (const dealAttr of dealAttributes) {
|
||||
values.set(dealAttr.attributeId, dealAttr?.value);
|
||||
}
|
||||
setAttributeValuesMap(values);
|
||||
}, [dealAttributes]);
|
||||
|
||||
const onSubmit = () => {
|
||||
let isErrorFound = false;
|
||||
for (const attr of dealAttributes) {
|
||||
const value = attributeValuesMap.get(attr.attributeId);
|
||||
if (!attr.isNullable && (value === null || value === undefined)) {
|
||||
attributeErrorsMap.set(attr.attributeId, "Обязательное поле");
|
||||
isErrorFound = true;
|
||||
}
|
||||
}
|
||||
setAttributeErrorsMap(new Map(attributeErrorsMap));
|
||||
if (isErrorFound) return;
|
||||
|
||||
const attributeValues: UpdateDealModuleAttributeSchema[] =
|
||||
attributeValuesMap
|
||||
.entries()
|
||||
.map(
|
||||
([attributeId, value]) =>
|
||||
({
|
||||
attributeId,
|
||||
value,
|
||||
}) as UpdateDealModuleAttributeSchema
|
||||
)
|
||||
.toArray();
|
||||
|
||||
updateAttributeValues(attributeValues);
|
||||
};
|
||||
|
||||
const getAttributeElement = useCallback(
|
||||
(attribute: DealModuleAttributeSchema) => (
|
||||
<AttributeValueInput
|
||||
key={attribute.attributeId}
|
||||
attrInfo={attribute}
|
||||
value={attributeValuesMap.get(attribute.attributeId)?.value}
|
||||
onChange={value => {
|
||||
attributeValuesMap.set(attribute.attributeId, { value });
|
||||
setAttributeValuesMap(new Map(attributeValuesMap));
|
||||
attributeErrorsMap.delete(attribute.attributeId);
|
||||
setAttributeErrorsMap(new Map(attributeErrorsMap));
|
||||
}}
|
||||
style={{ flex: 1 }}
|
||||
error={attributeErrorsMap.get(attribute.attributeId)}
|
||||
/>
|
||||
),
|
||||
[attributeValuesMap, attributeErrorsMap]
|
||||
);
|
||||
|
||||
const attributesRows = useMemo(() => {
|
||||
if (!dealAttributes) return [];
|
||||
const boolAttributes = dealAttributes.filter(
|
||||
a => a.type.type === "bool"
|
||||
);
|
||||
const otherAttributes = dealAttributes.filter(
|
||||
a => a.type.type !== "bool"
|
||||
);
|
||||
|
||||
const rows: ReactNode[] = [];
|
||||
for (let i = 0; i < otherAttributes.length; i += 2) {
|
||||
const rightIdx = i + 1;
|
||||
|
||||
rows.push(
|
||||
<FormFlexRow key={`row${i}`}>
|
||||
{getAttributeElement(otherAttributes[i])}
|
||||
{rightIdx < otherAttributes.length &&
|
||||
getAttributeElement(otherAttributes[rightIdx])}
|
||||
</FormFlexRow>
|
||||
);
|
||||
}
|
||||
|
||||
for (const attr of boolAttributes) {
|
||||
rows.push(getAttributeElement(attr));
|
||||
}
|
||||
|
||||
return rows;
|
||||
}, [dealAttributes, getAttributeElement]);
|
||||
|
||||
return (
|
||||
<Flex
|
||||
direction={"column"}
|
||||
gap={"xs"}
|
||||
py={"xs"}
|
||||
px={"md"}>
|
||||
{attributesRows}
|
||||
<Group>
|
||||
<InlineButton onClick={onSubmit}>Сохранить</InlineButton>
|
||||
</Group>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomTab;
|
||||
Reference in New Issue
Block a user