feat: marketplaces editor in clients page
This commit is contained in:
@ -1,7 +1,7 @@
|
||||
import { FC } from "react";
|
||||
import { Group, TextInput } from "@mantine/core";
|
||||
import { useClientsContext } from "@/app/clients/contexts/ClientsContext";
|
||||
import useClientsActions from "@/app/clients/hooks/useClientsActions";
|
||||
import useClientsActions from "@/app/clients/hooks/utils/useClientsActions";
|
||||
import InlineButton from "@/components/ui/InlineButton/InlineButton";
|
||||
|
||||
const ClientDesktopHeader: FC = () => {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { FC } from "react";
|
||||
import { Flex, TextInput } from "@mantine/core";
|
||||
import { useClientsContext } from "@/app/clients/contexts/ClientsContext";
|
||||
import useClientsActions from "@/app/clients/hooks/useClientsActions";
|
||||
import useClientsActions from "@/app/clients/hooks/utils/useClientsActions";
|
||||
import InlineButton from "@/components/ui/InlineButton/InlineButton";
|
||||
|
||||
const ClientMobileHeader: FC = () => {
|
||||
|
||||
@ -3,18 +3,32 @@
|
||||
import { FC } from "react";
|
||||
import { useClientsTableColumns } from "@/app/clients/components/shared/ClientsTable/columns";
|
||||
import { useClientsContext } from "@/app/clients/contexts/ClientsContext";
|
||||
import useClientsActions from "@/app/clients/hooks/useClientsActions";
|
||||
import useClientsActions from "@/app/clients/hooks/utils/useClientsActions";
|
||||
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
|
||||
import BaseTable from "@/components/ui/BaseTable/BaseTable";
|
||||
import { useDrawersContext } from "@/drawers/DrawersContext";
|
||||
import useIsMobile from "@/hooks/utils/useIsMobile";
|
||||
import { ClientSchema } from "@/lib/client";
|
||||
|
||||
const ClientsTable: FC = () => {
|
||||
const isMobile = useIsMobile();
|
||||
const { modulesSet } = useProjectsContext();
|
||||
const { clientsCrud, clients } = useClientsContext();
|
||||
const { onUpdateClick } = useClientsActions();
|
||||
const { openDrawer } = useDrawersContext();
|
||||
|
||||
const onOpenMarketplacesList = (client: ClientSchema) => {
|
||||
openDrawer({
|
||||
key: "clientMarketplaceDrawer",
|
||||
props: { client },
|
||||
});
|
||||
};
|
||||
|
||||
const columns = useClientsTableColumns({
|
||||
onDelete: clientsCrud.onDelete,
|
||||
onChange: onUpdateClick,
|
||||
onOpenMarketplacesList,
|
||||
modulesSet,
|
||||
});
|
||||
|
||||
return (
|
||||
|
||||
@ -1,15 +1,24 @@
|
||||
import { useMemo } from "react";
|
||||
import { IconBasket } from "@tabler/icons-react";
|
||||
import { DataTableColumn } from "mantine-datatable";
|
||||
import { Center } from "@mantine/core";
|
||||
import UpdateDeleteTableActions from "@/components/ui/BaseTable/components/UpdateDeleteTableActions";
|
||||
import { ClientSchema } from "@/lib/client";
|
||||
import { ModuleNames } from "@/modules/modules";
|
||||
|
||||
type Props = {
|
||||
onChange: (client: ClientSchema) => void;
|
||||
onDelete: (client: ClientSchema) => void;
|
||||
onOpenMarketplacesList: (client: ClientSchema) => void;
|
||||
modulesSet: Set<ModuleNames>;
|
||||
};
|
||||
|
||||
export const useClientsTableColumns = ({ onChange, onDelete }: Props) => {
|
||||
export const useClientsTableColumns = ({
|
||||
onChange,
|
||||
onDelete,
|
||||
onOpenMarketplacesList,
|
||||
modulesSet,
|
||||
}: Props) => {
|
||||
return useMemo(
|
||||
() =>
|
||||
[
|
||||
@ -21,6 +30,17 @@ export const useClientsTableColumns = ({ onChange, onDelete }: Props) => {
|
||||
<UpdateDeleteTableActions
|
||||
onDelete={() => onDelete(client)}
|
||||
onChange={() => onChange(client)}
|
||||
otherActions={[
|
||||
{
|
||||
label: "Маркетплейсы",
|
||||
icon: <IconBasket />,
|
||||
onClick: () =>
|
||||
onOpenMarketplacesList(client),
|
||||
hidden: !modulesSet.has(
|
||||
ModuleNames.FULFILLMENT_BASE
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
),
|
||||
},
|
||||
|
||||
@ -4,11 +4,11 @@ import { Dispatch, SetStateAction } from "react";
|
||||
import {
|
||||
ClientsCrud,
|
||||
useClientsCrud,
|
||||
} from "@/app/clients/hooks/useClientsCrud";
|
||||
import useClientsFilter from "@/app/clients/hooks/useClientsFilter";
|
||||
import useClientsList from "@/app/clients/hooks/useClientsList";
|
||||
} from "@/app/clients/hooks/cruds/useClientsCrud";
|
||||
import useClientsFilter from "@/app/clients/hooks/utils/useClientsFilter";
|
||||
import { ClientSchema } from "@/lib/client";
|
||||
import makeContext from "@/lib/contextFactory/contextFactory";
|
||||
import useClientsList from "../hooks/lists/useClientsList";
|
||||
|
||||
type ClientsContextState = {
|
||||
clients: ClientSchema[];
|
||||
|
||||
@ -0,0 +1,50 @@
|
||||
"use client";
|
||||
|
||||
import React, { FC } from "react";
|
||||
import { Drawer } from "@mantine/core";
|
||||
import DrawerBody from "@/app/clients/drawers/ClientMarketplacesDrawer/components/DrawerBody";
|
||||
import { MarketplacesContextProvider } from "@/app/clients/drawers/ClientMarketplacesDrawer/contexts/MarketplacesContext";
|
||||
import { DrawerProps } from "@/drawers/types";
|
||||
import useIsMobile from "@/hooks/utils/useIsMobile";
|
||||
import { ClientSchema } from "@/lib/client";
|
||||
|
||||
type Props = {
|
||||
client: ClientSchema;
|
||||
};
|
||||
|
||||
const ClientMarketplaceDrawer: FC<DrawerProps<Props>> = ({
|
||||
opened,
|
||||
onClose,
|
||||
props,
|
||||
}) => {
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
size={isMobile ? "100%" : "40%"}
|
||||
position={"right"}
|
||||
onClose={onClose}
|
||||
removeScrollProps={{ allowPinchZoom: true }}
|
||||
withCloseButton={isMobile}
|
||||
opened={opened}
|
||||
trapFocus={false}
|
||||
title={isMobile ? "Маркетплейсы" : ""}
|
||||
styles={{
|
||||
body: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
height: isMobile ? "var(--mobile-page-height)" : "100%",
|
||||
padding: isMobile ? 0 : "var(--mantine-spacing-xs)",
|
||||
},
|
||||
header: {
|
||||
paddingBlock: 0,
|
||||
},
|
||||
}}>
|
||||
<MarketplacesContextProvider client={props.client}>
|
||||
<DrawerBody />
|
||||
</MarketplacesContextProvider>
|
||||
</Drawer>
|
||||
);
|
||||
};
|
||||
|
||||
export default ClientMarketplaceDrawer;
|
||||
@ -0,0 +1,53 @@
|
||||
import { FC } from "react";
|
||||
import {
|
||||
ActionIcon,
|
||||
ComboboxItem,
|
||||
ComboboxLikeRenderOptionInput,
|
||||
Image,
|
||||
} from "@mantine/core";
|
||||
import useBaseMarketplacesList from "@/app/clients/hooks/lists/useBaseMarketplacesList";
|
||||
import ObjectSelect, {
|
||||
ObjectSelectProps,
|
||||
} from "@/components/selects/ObjectSelect/ObjectSelect";
|
||||
import { BaseMarketplaceSchema } from "@/lib/client";
|
||||
|
||||
type Props = Omit<
|
||||
ObjectSelectProps<BaseMarketplaceSchema>,
|
||||
"data" | "getValueFn" | "getLabelFn"
|
||||
>;
|
||||
|
||||
const BaseMarketplaceSelect: FC<Props> = props => {
|
||||
const { baseMarketplaces } = useBaseMarketplacesList();
|
||||
|
||||
const renderOption = (
|
||||
baseMarketplace: ComboboxLikeRenderOptionInput<ComboboxItem>
|
||||
) => (
|
||||
<>
|
||||
<ActionIcon
|
||||
radius={"md"}
|
||||
variant={"transparent"}>
|
||||
<Image
|
||||
src={
|
||||
baseMarketplaces.find(
|
||||
el =>
|
||||
baseMarketplace.option.value ===
|
||||
el.id.toString()
|
||||
)?.iconUrl || ""
|
||||
}
|
||||
/>
|
||||
</ActionIcon>
|
||||
{baseMarketplace.option.label}
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<ObjectSelect
|
||||
renderOption={renderOption}
|
||||
getValueFn={baseMarketplace => baseMarketplace.id.toString()}
|
||||
getLabelFn={baseMarketplace => baseMarketplace.name}
|
||||
data={baseMarketplaces}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
export default BaseMarketplaceSelect;
|
||||
@ -0,0 +1,18 @@
|
||||
import React from "react";
|
||||
import { Flex } from "@mantine/core";
|
||||
import MarketplacesHeader from "@/app/clients/drawers/ClientMarketplacesDrawer/components/MarketplacesHeader";
|
||||
import MarketplacesTable from "@/app/clients/drawers/ClientMarketplacesDrawer/components/MarketplacesTable";
|
||||
|
||||
const DrawerBody = () => {
|
||||
return (
|
||||
<Flex
|
||||
gap={"xs"}
|
||||
h={"100%"}
|
||||
direction={"column"}>
|
||||
<MarketplacesHeader />
|
||||
<MarketplacesTable />
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default DrawerBody;
|
||||
@ -0,0 +1,21 @@
|
||||
import { FC } from "react";
|
||||
import BaseMarketplaceType from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/types/baseMarketplaceType";
|
||||
import OzonInputs from "./components/OzonInputs";
|
||||
import WildberriesInputs from "./components/WildberriesInputs";
|
||||
import YandexMarketInputs from "./components/YandexMarketInputs";
|
||||
import MpAuthDataInputProps from "./types/MpAuthDataInputProps";
|
||||
|
||||
const MarketplaceAuthDataInput: FC<MpAuthDataInputProps> = props => {
|
||||
switch (props.baseMarketplace.id) {
|
||||
case BaseMarketplaceType.WILDBERRIES:
|
||||
return <WildberriesInputs {...props} />;
|
||||
case BaseMarketplaceType.OZON:
|
||||
return <OzonInputs {...props} />;
|
||||
case BaseMarketplaceType.YANDEX_MARKET:
|
||||
return <YandexMarketInputs {...props} />;
|
||||
default:
|
||||
return <></>;
|
||||
}
|
||||
};
|
||||
|
||||
export default MarketplaceAuthDataInput;
|
||||
@ -0,0 +1,39 @@
|
||||
import { FC } from "react";
|
||||
import { omit } from "lodash";
|
||||
import { NumberInput, TextInput } from "@mantine/core";
|
||||
import MpAuthDataInputProps from "../types/MpAuthDataInputProps";
|
||||
|
||||
const OzonInputs: FC<MpAuthDataInputProps> = props => {
|
||||
const restProps = omit(props, ["baseMarketplace"]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<NumberInput
|
||||
{...restProps}
|
||||
label={"Client-Id"}
|
||||
placeholder={"Введите Client-Id"}
|
||||
value={props.value?.["Client-Id"] || undefined}
|
||||
onChange={value =>
|
||||
props.onChange({
|
||||
...props.value,
|
||||
"Client-Id": value.toString(),
|
||||
})
|
||||
}
|
||||
/>
|
||||
<TextInput
|
||||
{...restProps}
|
||||
label={"Api-Key"}
|
||||
placeholder={"Введите Api-Key"}
|
||||
value={props.value?.["Api-Key"] || ""}
|
||||
onChange={value =>
|
||||
props.onChange({
|
||||
...props.value,
|
||||
"Api-Key": value.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default OzonInputs;
|
||||
@ -0,0 +1,25 @@
|
||||
import { FC } from "react";
|
||||
import { omit } from "lodash";
|
||||
import { TextInput } from "@mantine/core";
|
||||
import MpAuthDataInputProps from "../types/MpAuthDataInputProps";
|
||||
|
||||
const WildberriesInputs: FC<MpAuthDataInputProps> = props => {
|
||||
const restProps = omit(props, ["baseMarketplace"]);
|
||||
|
||||
return (
|
||||
<TextInput
|
||||
{...restProps}
|
||||
label={"Ключ авторизации"}
|
||||
placeholder={"Введите ключ авторизации"}
|
||||
value={props.value?.Authorization || ""}
|
||||
onChange={value =>
|
||||
props.onChange({
|
||||
...props.value,
|
||||
Authorization: value.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default WildberriesInputs;
|
||||
@ -0,0 +1,25 @@
|
||||
import { FC } from "react";
|
||||
import { omit } from "lodash";
|
||||
import { TextInput } from "@mantine/core";
|
||||
import MpAuthDataInputProps from "../types/MpAuthDataInputProps";
|
||||
|
||||
const YandexMarketInputs: FC<MpAuthDataInputProps> = props => {
|
||||
const restProps = omit(props, ["baseMarketplace"]);
|
||||
|
||||
return (
|
||||
<TextInput
|
||||
{...restProps}
|
||||
label={"Api-Key"}
|
||||
placeholder={"Введите Api-Key"}
|
||||
value={props.value?.["Api-Key"] || ""}
|
||||
onChange={value => {
|
||||
props.onChange({
|
||||
...props.value,
|
||||
"Api-Key": value.target.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default YandexMarketInputs;
|
||||
@ -0,0 +1,12 @@
|
||||
import BaseFormInputProps from "@/utils/baseFormInputProps";
|
||||
import { BaseMarketplaceSchema } from "@/lib/client";
|
||||
|
||||
type RestProps = {
|
||||
baseMarketplace: BaseMarketplaceSchema;
|
||||
};
|
||||
|
||||
type MarketplaceAuthData = Record<string, string>;
|
||||
|
||||
type MpAuthDataInputProps = BaseFormInputProps<MarketplaceAuthData> & RestProps;
|
||||
|
||||
export default MpAuthDataInputProps;
|
||||
@ -0,0 +1,26 @@
|
||||
"use client";
|
||||
|
||||
import { IconPlus } from "@tabler/icons-react";
|
||||
import { Group } from "@mantine/core";
|
||||
import useMarketplacesActions from "@/app/clients/drawers/ClientMarketplacesDrawer/hooks/useMarketplaceActions";
|
||||
import InlineButton from "@/components/ui/InlineButton/InlineButton";
|
||||
import useIsMobile from "@/hooks/utils/useIsMobile";
|
||||
|
||||
const MarketplacesHeader = () => {
|
||||
const { onCreateClick } = useMarketplacesActions();
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
return (
|
||||
<Group>
|
||||
<InlineButton
|
||||
onClick={onCreateClick}
|
||||
mx={isMobile ? "xs" : ""}
|
||||
w={isMobile ? "100%" : "auto"}>
|
||||
<IconPlus />
|
||||
Создать
|
||||
</InlineButton>
|
||||
</Group>
|
||||
);
|
||||
};
|
||||
|
||||
export default MarketplacesHeader;
|
||||
@ -0,0 +1,44 @@
|
||||
"use client";
|
||||
|
||||
import { IconMoodSad } from "@tabler/icons-react";
|
||||
import { Group, Text } from "@mantine/core";
|
||||
import { useMarketplacesContext } from "@/app/clients/drawers/ClientMarketplacesDrawer/contexts/MarketplacesContext";
|
||||
import useMarketplacesActions from "@/app/clients/drawers/ClientMarketplacesDrawer/hooks/useMarketplaceActions";
|
||||
import { useMarketplacesTableColumns } from "@/app/clients/drawers/ClientMarketplacesDrawer/hooks/useMarketplacesTableColumns";
|
||||
import BaseTable from "@/components/ui/BaseTable/BaseTable";
|
||||
import useIsMobile from "@/hooks/utils/useIsMobile";
|
||||
|
||||
const MarketplacesTable = () => {
|
||||
const isMobile = useIsMobile();
|
||||
const { onUpdateClick } = useMarketplacesActions();
|
||||
const { marketplaces, marketplacesCrud } = useMarketplacesContext();
|
||||
|
||||
const columns = useMarketplacesTableColumns({
|
||||
onChange: onUpdateClick,
|
||||
onDelete: marketplacesCrud.onDelete,
|
||||
});
|
||||
|
||||
return (
|
||||
<BaseTable
|
||||
withTableBorder
|
||||
records={marketplaces}
|
||||
columns={columns}
|
||||
groups={undefined}
|
||||
verticalSpacing={"md"}
|
||||
mx={isMobile ? "xs" : ""}
|
||||
styles={{
|
||||
table: {
|
||||
height: "100%",
|
||||
},
|
||||
}}
|
||||
emptyState={
|
||||
<Group mt={marketplaces.length === 0 ? "xl" : 0}>
|
||||
<Text>Нет маркетплейсов</Text>
|
||||
<IconMoodSad />
|
||||
</Group>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default MarketplacesTable;
|
||||
@ -0,0 +1,41 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
MarketplacesCrud,
|
||||
useMarketplacesCrud,
|
||||
} from "@/app/clients/hooks/cruds/useMarketplacesCrud";
|
||||
import useMarketplacesList from "@/app/clients/hooks/lists/useMarketplacesList";
|
||||
import { ClientSchema, MarketplaceSchema } from "@/lib/client";
|
||||
import makeContext from "@/lib/contextFactory/contextFactory";
|
||||
|
||||
type MarketplacesContextState = {
|
||||
client: ClientSchema;
|
||||
marketplaces: MarketplaceSchema[];
|
||||
refetchMarketplaces: () => void;
|
||||
marketplacesCrud: MarketplacesCrud;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
client: ClientSchema;
|
||||
};
|
||||
|
||||
const useMarketplacesContextState = ({
|
||||
client,
|
||||
}: Props): MarketplacesContextState => {
|
||||
const marketplacesList = useMarketplacesList({ clientId: client.id });
|
||||
|
||||
const marketplacesCrud = useMarketplacesCrud(marketplacesList);
|
||||
|
||||
return {
|
||||
client,
|
||||
marketplaces: marketplacesList.marketplaces,
|
||||
refetchMarketplaces: marketplacesList.refetch,
|
||||
marketplacesCrud,
|
||||
};
|
||||
};
|
||||
|
||||
export const [MarketplacesContextProvider, useMarketplacesContext] =
|
||||
makeContext<MarketplacesContextState, Props>(
|
||||
useMarketplacesContextState,
|
||||
"Marketplaces"
|
||||
);
|
||||
@ -0,0 +1,39 @@
|
||||
import { modals } from "@mantine/modals";
|
||||
import { useMarketplacesContext } from "@/app/clients/drawers/ClientMarketplacesDrawer/contexts/MarketplacesContext";
|
||||
import { MarketplaceSchema } from "@/lib/client";
|
||||
|
||||
const useMarketplacesActions = () => {
|
||||
const { marketplacesCrud, client } = useMarketplacesContext();
|
||||
|
||||
const onCreateClick = () => {
|
||||
modals.openContextModal({
|
||||
modal: "marketplaceEditorModal",
|
||||
title: "Создание маркетплейса",
|
||||
innerProps: {
|
||||
onCreate: values =>
|
||||
marketplacesCrud.onCreate({ ...values, client }),
|
||||
isEditing: false,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const onUpdateClick = (marketplace: MarketplaceSchema) => {
|
||||
modals.openContextModal({
|
||||
modal: "marketplaceEditorModal",
|
||||
title: "Редактирование маркетплейса",
|
||||
innerProps: {
|
||||
onChange: updates =>
|
||||
marketplacesCrud.onUpdate(marketplace.id, updates),
|
||||
entity: marketplace,
|
||||
isEditing: true,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
onCreateClick,
|
||||
onUpdateClick,
|
||||
};
|
||||
};
|
||||
|
||||
export default useMarketplacesActions;
|
||||
@ -0,0 +1,48 @@
|
||||
import { useMemo } from "react";
|
||||
import { DataTableColumn } from "mantine-datatable";
|
||||
import { ActionIcon, Center, Flex, Image } from "@mantine/core";
|
||||
import UpdateDeleteTableActions from "@/components/ui/BaseTable/components/UpdateDeleteTableActions";
|
||||
import { MarketplaceSchema } from "@/lib/client";
|
||||
|
||||
type Props = {
|
||||
onDelete: (mp: MarketplaceSchema) => void;
|
||||
onChange: (mp: MarketplaceSchema) => void;
|
||||
};
|
||||
|
||||
export const useMarketplacesTableColumns = ({ onDelete, onChange }: Props) => {
|
||||
return useMemo(
|
||||
() =>
|
||||
[
|
||||
{
|
||||
accessor: "actions",
|
||||
title: <Center>Действия</Center>,
|
||||
width: "0%",
|
||||
render: mp => (
|
||||
<UpdateDeleteTableActions
|
||||
onDelete={() => onDelete(mp)}
|
||||
onChange={() => onChange(mp)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Маркетплейс",
|
||||
accessor: "baseMarketplace",
|
||||
cellsStyle: () => ({}),
|
||||
render: mp => (
|
||||
<Flex key={`${mp.id}mp`}>
|
||||
<ActionIcon variant={"transparent"}>
|
||||
<Image
|
||||
src={mp.baseMarketplace?.iconUrl || ""}
|
||||
/>
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessor: "name",
|
||||
title: "Название",
|
||||
},
|
||||
] as DataTableColumn<MarketplaceSchema>[],
|
||||
[]
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,3 @@
|
||||
import ClientMarketplaceDrawer from "./ClientMarketplacesDrawer";
|
||||
|
||||
export default ClientMarketplaceDrawer;
|
||||
@ -0,0 +1,87 @@
|
||||
"use client";
|
||||
|
||||
import { Stack, TextInput } from "@mantine/core";
|
||||
import { useForm } from "@mantine/form";
|
||||
import { ContextModalProps } from "@mantine/modals";
|
||||
import BaseMarketplaceSelect from "@/app/clients/drawers/ClientMarketplacesDrawer/components/BaseMarketplaceSelect";
|
||||
import MarketplaceAuthDataInput from "@/app/clients/drawers/ClientMarketplacesDrawer/components/MarketplaceAuthDataInput/MarketplaceAuthDataInput";
|
||||
import {
|
||||
CreateMarketplaceSchema,
|
||||
MarketplaceSchema,
|
||||
UpdateMarketplaceSchema,
|
||||
} from "@/lib/client";
|
||||
import BaseFormModal, {
|
||||
CreateEditFormProps,
|
||||
} from "@/modals/base/BaseFormModal/BaseFormModal";
|
||||
|
||||
type Props = CreateEditFormProps<
|
||||
MarketplaceSchema,
|
||||
CreateMarketplaceSchema,
|
||||
UpdateMarketplaceSchema
|
||||
>;
|
||||
|
||||
const MarketplaceEditorModal = ({
|
||||
context,
|
||||
id,
|
||||
innerProps,
|
||||
}: ContextModalProps<Props>) => {
|
||||
const initialValues: UpdateMarketplaceSchema | CreateMarketplaceSchema =
|
||||
innerProps.isEditing
|
||||
? innerProps.entity
|
||||
: {
|
||||
name: "",
|
||||
authData: {
|
||||
"Authorization": "",
|
||||
"Client-Id": "",
|
||||
"Api-Key": "",
|
||||
"CampaignId": "",
|
||||
},
|
||||
};
|
||||
|
||||
const form = useForm({
|
||||
initialValues,
|
||||
validate: {
|
||||
name: name =>
|
||||
(!name || name.trim() === "") &&
|
||||
"Необходимо ввести название маркетплейса",
|
||||
baseMarketplace: baseMarketplace =>
|
||||
!baseMarketplace && "Необходимо указать базовый маркетплейс",
|
||||
authData: authData =>
|
||||
!authData && "Необходимо указать данные авторизации",
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<BaseFormModal
|
||||
{...innerProps}
|
||||
closeOnSubmit
|
||||
form={form}
|
||||
onClose={() => context.closeContextModal(id)}>
|
||||
<Stack gap={"xs"}>
|
||||
<TextInput
|
||||
label={"Название"}
|
||||
placeholder={"Введите название маркетплейса"}
|
||||
{...form.getInputProps("name")}
|
||||
/>
|
||||
<BaseMarketplaceSelect
|
||||
label={"Базовый маркетплейс"}
|
||||
placeholder={"Выберите базовый маркетплейс"}
|
||||
{...form.getInputProps("baseMarketplace")}
|
||||
/>
|
||||
|
||||
{form.values.baseMarketplace && (
|
||||
<MarketplaceAuthDataInput
|
||||
baseMarketplace={form.values.baseMarketplace}
|
||||
value={form.values.authData as Record<string, string>}
|
||||
onChange={value =>
|
||||
form.setFieldValue("authData", value)
|
||||
}
|
||||
error={form.getInputProps("authData").error}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
</BaseFormModal>
|
||||
);
|
||||
};
|
||||
|
||||
export default MarketplaceEditorModal;
|
||||
50
src/app/clients/hooks/cruds/useMarketplacesCrud.tsx
Normal file
50
src/app/clients/hooks/cruds/useMarketplacesCrud.tsx
Normal file
@ -0,0 +1,50 @@
|
||||
import { useCrudOperations } from "@/hooks/cruds/baseCrud";
|
||||
import {
|
||||
CreateMarketplaceSchema,
|
||||
MarketplaceSchema,
|
||||
UpdateMarketplaceSchema,
|
||||
} from "@/lib/client";
|
||||
import {
|
||||
createMarketplaceMutation,
|
||||
deleteMarketplaceMutation,
|
||||
updateMarketplaceMutation,
|
||||
} from "@/lib/client/@tanstack/react-query.gen";
|
||||
|
||||
type UseMarketplacesProps = {
|
||||
queryKey: any[];
|
||||
};
|
||||
|
||||
export type MarketplacesCrud = {
|
||||
onCreate: (mp: CreateMarketplaceSchema) => void;
|
||||
onUpdate: (
|
||||
mpId: number,
|
||||
mp: UpdateMarketplaceSchema,
|
||||
onSuccess?: () => void
|
||||
) => void;
|
||||
onDelete: (mp: MarketplaceSchema) => void;
|
||||
};
|
||||
|
||||
export const useMarketplacesCrud = ({
|
||||
queryKey,
|
||||
}: UseMarketplacesProps): MarketplacesCrud => {
|
||||
return useCrudOperations<
|
||||
MarketplaceSchema,
|
||||
UpdateMarketplaceSchema,
|
||||
CreateMarketplaceSchema
|
||||
>({
|
||||
key: "getMarketplaces",
|
||||
queryKey,
|
||||
mutations: {
|
||||
create: createMarketplaceMutation(),
|
||||
update: updateMarketplaceMutation(),
|
||||
delete: deleteMarketplaceMutation(),
|
||||
},
|
||||
getUpdateEntity: (old, update) => ({
|
||||
...old,
|
||||
baseMarketplace: update.baseMarketplace ?? old.baseMarketplace,
|
||||
name: update.name ?? old.name,
|
||||
authData: update.authData ?? old.authData,
|
||||
}),
|
||||
getDeleteConfirmTitle: () => "Удаление маркетплейса",
|
||||
});
|
||||
};
|
||||
15
src/app/clients/hooks/lists/useBaseMarketplacesList.tsx
Normal file
15
src/app/clients/hooks/lists/useBaseMarketplacesList.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import {
|
||||
getBaseMarketplacesOptions,
|
||||
getBaseMarketplacesQueryKey,
|
||||
} from "@/lib/client/@tanstack/react-query.gen";
|
||||
|
||||
const useBaseMarketplacesList = () => {
|
||||
const { data, refetch } = useQuery(getBaseMarketplacesOptions());
|
||||
|
||||
const queryKey = getBaseMarketplacesQueryKey();
|
||||
|
||||
return { baseMarketplaces: data?.items ?? [], refetch, queryKey };
|
||||
};
|
||||
|
||||
export default useBaseMarketplacesList;
|
||||
21
src/app/clients/hooks/lists/useMarketplacesList.tsx
Normal file
21
src/app/clients/hooks/lists/useMarketplacesList.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import {
|
||||
getMarketplacesOptions,
|
||||
getMarketplacesQueryKey,
|
||||
} from "@/lib/client/@tanstack/react-query.gen";
|
||||
|
||||
type Props = {
|
||||
clientId: number;
|
||||
};
|
||||
|
||||
const useMarketplacesList = ({ clientId }: Props) => {
|
||||
const { data, refetch } = useQuery(
|
||||
getMarketplacesOptions({ path: { clientId } })
|
||||
);
|
||||
|
||||
const queryKey = getMarketplacesQueryKey({ path: { clientId } });
|
||||
|
||||
return { marketplaces: data?.items ?? [], refetch, queryKey };
|
||||
};
|
||||
|
||||
export default useMarketplacesList;
|
||||
Reference in New Issue
Block a user