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

feat: prettier

Browse Source
This commit is contained in:
admin
2024-09-27 04:47:04 +03:00
parent c5f839d9ef
commit de4fe450ab
253 changed files with 11322 additions and 10004 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/pages/MarketplacesPage/components/MarketplacesTable/MarketplacesTable.tsx
View File

@@ -1,100 +1,116 @@
import {CRUDTableProps} from "../../../../types/CRUDTable.tsx";
import {ClientSchema, MarketplaceSchema} from "../../../../client";
import {FC} from "react";
import {BaseTable} from "../../../../components/BaseTable/BaseTable.tsx";
import { CRUDTableProps } from "../../../../types/CRUDTable.tsx";
import { ClientSchema, MarketplaceSchema } from "../../../../client";
import { FC } from "react";
import { BaseTable } from "../../../../components/BaseTable/BaseTable.tsx";
import useMarketplacesTableColumns from "./columns.tsx";
import {MRT_TableOptions} from "mantine-react-table";
import {ActionIcon, Button, Flex, rem, Text, Tooltip} from "@mantine/core";
import {modals} from "@mantine/modals";
import {IconEdit, IconRefresh, IconTrash} from "@tabler/icons-react";
import { MRT_TableOptions } from "mantine-react-table";
import { ActionIcon, Button, Flex, rem, Text, Tooltip } from "@mantine/core";
import { modals } from "@mantine/modals";
import { IconEdit, IconRefresh, IconTrash } from "@tabler/icons-react";
type RestProps = {
client?: ClientSchema;
onSynchronize?: (marketplace: MarketplaceSchema) => void;
}
};
type Props = CRUDTableProps<MarketplaceSchema> & RestProps;
const MarketplacesTable: FC<Props> = ({onDelete, onChange, onCreate, items, client, onSynchronize}) => {
const MarketplacesTable: FC<Props> = ({
onDelete,
onChange,
onCreate,
items,
client,
onSynchronize,
}) => {
const columns = useMarketplacesTableColumns();
const onDeleteClick = (marketplace: MarketplaceSchema) => {
if (!onDelete) return;
modals.openConfirmModal({
title: 'Удаление маркетплейса',
title: "Удаление маркетплейса",
children: (
<Text size="sm">
Вы уверены что хотите удалить маркетплейс {marketplace.name}
</Text>
),
labels: {confirm: 'Да', cancel: "Нет"},
confirmProps: {color: 'red'},
onConfirm: () => onDelete(marketplace)
labels: { confirm: "Да", cancel: "Нет" },
confirmProps: { color: "red" },
onConfirm: () => onDelete(marketplace),
});
}
};
const onEditClick = (marketplace: MarketplaceSchema) => {
if (!onChange) return;
modals.openContextModal({
modal: "marketplaceFormModal",
withCloseButton: false,
innerProps: {
onChange: (event) => onChange(event),
element: marketplace
}
})
}
onChange: event => onChange(event),
element: marketplace,
},
});
};
const onCreateClick = () => {
if (!onCreate || !client) return;
modals.openContextModal({
modal: "marketplaceFormModal",
withCloseButton: false,
innerProps: {
onCreate: (event) => onCreate({...event, client: client})
}
})
}
onCreate: event => onCreate({ ...event, client: client }),
},
});
};
return (
<BaseTable
data={items}
columns={columns}
restProps={{
enableSorting: false,
enableColumnActions: false,
enableTopToolbar: true,
renderTopToolbar: (
<Flex p={rem(10)} justify="end">
<Button
disabled={!client}
variant={"default"}
onClick={() => onCreateClick()}>
Добавить
</Button>
</Flex>
),
enableRowActions: true,
renderRowActions: ({row}) => (
<Flex gap="md">
<Tooltip label="Редактировать">
<ActionIcon
onClick={() => onEditClick(row.original)}
variant={"default"}>
<IconEdit/>
</ActionIcon>
</Tooltip>
<Tooltip label="Удалить">
<ActionIcon onClick={() => onDeleteClick(row.original)} variant={"default"}>
<IconTrash/>
</ActionIcon>
</Tooltip>
<Tooltip label="Синхронизировать">
<ActionIcon onClick={() => onSynchronize && onSynchronize(row.original)}
variant={"default"}>
<IconRefresh/>
</ActionIcon>
</Tooltip>
</Flex>
)
} as MRT_TableOptions<MarketplaceSchema>}
restProps={
{
enableSorting: false,
enableColumnActions: false,
enableTopToolbar: true,
renderTopToolbar: (
<Flex
p={rem(10)}
justify="end">
<Button
disabled={!client}
variant={"default"}
onClick={() => onCreateClick()}>
Добавить
</Button>
</Flex>
),
enableRowActions: true,
renderRowActions: ({ row }) => (
<Flex gap="md">
<Tooltip label="Редактировать">
<ActionIcon
onClick={() => onEditClick(row.original)}
variant={"default"}>
<IconEdit />
</ActionIcon>
</Tooltip>
<Tooltip label="Удалить">
<ActionIcon
onClick={() => onDeleteClick(row.original)}
variant={"default"}>
<IconTrash />
</ActionIcon>
</Tooltip>
<Tooltip label="Синхронизировать">
<ActionIcon
onClick={() =>
onSynchronize &&
onSynchronize(row.original)
}
variant={"default"}>
<IconRefresh />
</ActionIcon>
</Tooltip>
</Flex>
),
} as MRT_TableOptions<MarketplaceSchema>
}
/>
)
}
export default MarketplacesTable;
);
};
export default MarketplacesTable;

69
src/pages/MarketplacesPage/components/MarketplacesTable/columns.tsx
View File

@@ -1,35 +1,40 @@
import {MarketplaceSchema} from "../../../../client";
import {MRT_ColumnDef} from "mantine-react-table";
import {useMemo} from "react";
import {ActionIcon, Image} from "@mantine/core";
import { MarketplaceSchema } from "../../../../client";
import { MRT_ColumnDef } from "mantine-react-table";
import { useMemo } from "react";
import { ActionIcon, Image } from "@mantine/core";
const useMarketplacesTableColumns = () => {
return useMemo<MRT_ColumnDef<MarketplaceSchema>[]>(() => [
{
header: "Маркетплейс",
size: 10,
Cell: ({row}) => (
<ActionIcon variant={"transparent"}>
<Image src={row.original.baseMarketplace?.iconUrl || ""}/>
</ActionIcon>
)
},
{
accessorKey: "name",
header: "Название",
enableSorting: false,
},
{
accessorKey: "client.name",
header: "Клиент",
enableSorting: false,
},
// {
// accessorKey: "authData",
// header: "Данные авторизации",
// enableSorting: false,
// },
], []);
}
return useMemo<MRT_ColumnDef<MarketplaceSchema>[]>(
() => [
{
header: "Маркетплейс",
size: 10,
Cell: ({ row }) => (
<ActionIcon variant={"transparent"}>
<Image
src={row.original.baseMarketplace?.iconUrl || ""}
/>
</ActionIcon>
),
},
{
accessorKey: "name",
header: "Название",
enableSorting: false,
},
{
accessorKey: "client.name",
header: "Клиент",
enableSorting: false,
},
// {
// accessorKey: "authData",
// header: "Данные авторизации",
// enableSorting: false,
// },
],
[]
);
};
export default useMarketplacesTableColumns;
export default useMarketplacesTableColumns;

132
src/pages/MarketplacesPage/hooks/useMarketplacesPageState.tsx
View File

@@ -1,9 +1,14 @@
import {useEffect, useState} from "react";
import {ClientSchema, MarketplaceSchema, MarketplaceService, TaskService} from "../../../client";
import {notifications} from "../../../shared/lib/notifications.ts";
import {RootState, useAppDispatch} from "../../../redux/store.ts";
import {addTask} from "../../../features/tasksSlice.tsx";
import {useSelector} from "react-redux";
import { useEffect, useState } from "react";
import {
ClientSchema,
MarketplaceSchema,
MarketplaceService,
TaskService,
} from "../../../client";
import { notifications } from "../../../shared/lib/notifications.ts";
import { RootState, useAppDispatch } from "../../../redux/store.ts";
import { addTask } from "../../../features/tasksSlice.tsx";
import { useSelector } from "react-redux";
const useMarketplacesPageState = () => {
const dispatch = useAppDispatch();
@@ -14,12 +19,12 @@ const useMarketplacesPageState = () => {
if (!client) return;
MarketplaceService.getClientMarketplaces({
requestBody: {
clientId: client.id
}
}).then((response) => {
clientId: client.id,
},
}).then(response => {
setItems(response.marketplaces);
})
}
});
};
const onCreate = (marketplace: MarketplaceSchema) => {
MarketplaceService.createMarketplace({
@@ -27,77 +32,78 @@ const useMarketplacesPageState = () => {
marketplace: {
...marketplace,
clientId: marketplace.client.id,
baseMarketplaceKey: marketplace.baseMarketplace.key
}
}
}).then(async ({ok, message}) => {
notifications.guess(ok, {message});
baseMarketplaceKey: marketplace.baseMarketplace.key,
},
},
}).then(async ({ ok, message }) => {
notifications.guess(ok, { message });
if (!ok) return;
await fetchMarketplaces();
})
}
});
};
const onDelete = (marketplace: MarketplaceSchema) => {
MarketplaceService.deleteMarketplace({
requestBody: {
marketplaceId: marketplace.id
}
}).then(async ({ok, message}) => {
notifications.guess(ok, {message});
marketplaceId: marketplace.id,
},
}).then(async ({ ok, message }) => {
notifications.guess(ok, { message });
if (!ok) return;
await fetchMarketplaces();
})
}
});
};
const onChange = (marketplace: MarketplaceSchema) => {
MarketplaceService.updateMarketplace({
requestBody: {
marketplace: marketplace
}
}).then(async ({ok, message}) => {
notifications.guess(ok, {message});
marketplace: marketplace,
},
}).then(async ({ ok, message }) => {
notifications.guess(ok, { message });
if (!ok) return;
await fetchMarketplaces();
})
}
});
};
const onSynchronize = (marketplace: MarketplaceSchema) => {
const task = tasks.find(task => task.info.marketplaceId === marketplace.id);
const task = tasks.find(
task => task.info.marketplaceId === marketplace.id
);
if (task) {
notifications.error({
title: 'Ошибка',
message: `Синхронизация маркетплейса ${marketplace.name} уже запущена`
title: "Ошибка",
message: `Синхронизация маркетплейса ${marketplace.name} уже запущена`,
});
return;
}
TaskService.createSynchronizeMarketplaceTask({
requestBody: {
marketplaceId:
marketplace.id
}
}).then(({taskId}) => {
dispatch(addTask({
id: taskId,
config: {
onErrorData: {
title: 'Ошибка',
message: `Ошибка синхронизации маркетплейса: ${marketplace.name}`
marketplaceId: marketplace.id,
},
}).then(({ taskId }) => {
dispatch(
addTask({
id: taskId,
config: {
onErrorData: {
title: "Ошибка",
message: `Ошибка синхронизации маркетплейса: ${marketplace.name}`,
},
onLoadingData: {
title: "Синхронизация",
message: `Синхронизация маркетплейса: ${marketplace.name}`,
},
onSuccessData: {
title: "Успех",
message: `Маркетплейс ${marketplace.name} успешно синхронизирован`,
},
},
onLoadingData: {
title: 'Синхронизация',
message: `Синхронизация маркетплейса: ${marketplace.name}`
info: {
marketplaceId: marketplace.id,
},
onSuccessData: {
title: 'Успех',
message: `Маркетплейс ${marketplace.name} успешно синхронизирован`
}
},
info: {
marketplaceId: marketplace.id
}
}));
})
}
})
);
});
};
useEffect(() => {
fetchMarketplaces();
}, [client]);
@@ -108,7 +114,7 @@ const useMarketplacesPageState = () => {
onDelete,
onChange,
onCreate,
onSynchronize
}
}
export default useMarketplacesPageState;
onSynchronize,
};
};
export default useMarketplacesPageState;

2
src/pages/MarketplacesPage/index.ts
View File

@@ -1 +1 @@
export {MarketplacesPage} from './ui/MarketplacesPage.tsx';
export { MarketplacesPage } from "./ui/MarketplacesPage.tsx";

72
src/pages/MarketplacesPage/modals/MarketplaceFormModal/MarketplaceAuthDataInput.tsx
View File

@@ -1,27 +1,33 @@
import {TextInput} from "@mantine/core";
import {BaseFormInputProps} from "../../../../types/utils.ts";
import {FC} from "react";
import {BaseMarketplaceSchema} from "../../../../client";
import {BaseMarketplaceType} from "../../../../shared/enums/BaseMarketplaceType.ts";
import { TextInput } from "@mantine/core";
import { BaseFormInputProps } from "../../../../types/utils.ts";
import { FC } from "react";
import { BaseMarketplaceSchema } from "../../../../client";
import { BaseMarketplaceType } from "../../../../shared/enums/BaseMarketplaceType.ts";
type RestProps = {
baseMarketplace: BaseMarketplaceSchema;
}
};
type Props = BaseFormInputProps<Record<string, string>> & RestProps;
const MarketplaceAuthDataInput: FC<Props> = (props: Props) => {
console.log(props.baseMarketplace);
const getWildberriesInputs = () => {
// return input that sets record "Authorization" to value
return <TextInput
{...props}
label={"Ключ авторизации"}
placeholder={"Введите ключ авторизации"}
value={props.value["Authorization"] || ""}
onChange={(value) => props.onChange({...props.value, Authorization: value.target.value})}
/>
}
return (
<TextInput
{...props}
label={"Ключ авторизации"}
placeholder={"Введите ключ авторизации"}
value={props.value["Authorization"] || ""}
onChange={value =>
props.onChange({
...props.value,
Authorization: value.target.value,
})
}
/>
);
};
const getOzonInputs = () => {
return (
<>
@@ -30,21 +36,29 @@ const MarketplaceAuthDataInput: FC<Props> = (props: Props) => {
label={"Client-Id"}
placeholder={"Введите Client-Id"}
value={props.value["Client-Id"] || ""}
onChange={(value) => props.onChange({...props.value, "Client-Id": value.target.value})}
onChange={value =>
props.onChange({
...props.value,
"Client-Id": value.target.value,
})
}
/>
<TextInput
{...props}
label={"Api-Key"}
placeholder={"Введите Api-Key"}
value={props.value["Api-Key"] || ""}
onChange={(value) => props.onChange({...props.value, "Api-Key": value.target.value})}
onChange={value =>
props.onChange({
...props.value,
"Api-Key": value.target.value,
})
}
/>
</>
)
}
const getYandexMarketInputs = () => {
}
);
};
const getYandexMarketInputs = () => {};
const getInputs = () => {
if (props.baseMarketplace.key === BaseMarketplaceType.WILDBERRIES) {
@@ -56,14 +70,10 @@ const MarketplaceAuthDataInput: FC<Props> = (props: Props) => {
if (props.baseMarketplace.key === BaseMarketplaceType.YANDEX_MARKET) {
return getYandexMarketInputs();
}
return <></>
}
return <></>;
};
return (
<>
{getInputs()}
</>
)
}
return <>{getInputs()}</>;
};
export default MarketplaceAuthDataInput;
export default MarketplaceAuthDataInput;

84
src/pages/MarketplacesPage/modals/MarketplaceFormModal/MarketplaceFormModal.tsx
View File

@@ -1,45 +1,51 @@
import {ContextModalProps} from "@mantine/modals";
import BaseFormModal, {CreateEditFormProps} from "../../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
import {MarketplaceSchema} from "../../../../client";
import {useForm} from "@mantine/form";
import {Fieldset, Flex, rem, TextInput} from "@mantine/core";
import { ContextModalProps } from "@mantine/modals";
import BaseFormModal, {
CreateEditFormProps,
} from "../../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
import { MarketplaceSchema } from "../../../../client";
import { useForm } from "@mantine/form";
import { Fieldset, Flex, rem, TextInput } from "@mantine/core";
import BaseMarketplaceSelect from "../../../../components/Selects/BaseMarketplaceSelect/BaseMarketplaceSelect.tsx";
import MarketplaceAuthDataInput from "./MarketplaceAuthDataInput.tsx";
type Props = CreateEditFormProps<MarketplaceSchema>
type Props = CreateEditFormProps<MarketplaceSchema>;
const MarketplaceFormModal = ({
context,
id,
innerProps
}: ContextModalProps<Props>) => {
const isEditing = 'element' in innerProps;
const initialValue: Partial<MarketplaceSchema> = isEditing ? innerProps.element : {
authData: {
Authorization: '',
"Client-Id": '',
"Api-Key": ''
},
};
context,
id,
innerProps,
}: ContextModalProps<Props>) => {
const isEditing = "element" in innerProps;
const initialValue: Partial<MarketplaceSchema> = isEditing
? innerProps.element
: {
authData: {
"Authorization": "",
"Client-Id": "",
"Api-Key": "",
},
};
const form = useForm<Partial<MarketplaceSchema>>({
initialValues: initialValue,
validate: {
baseMarketplace: (baseMarketplace) => !baseMarketplace && "Необходимо указать базовый маркетплейс",
name: (name) => !name && "Необходимо указать название маркетплейса",
authData: (authData) => !authData && "Необходимо указать данные авторизации"
}
baseMarketplace: baseMarketplace =>
!baseMarketplace && "Необходимо указать базовый маркетплейс",
name: name => !name && "Необходимо указать название маркетплейса",
authData: authData =>
!authData && "Необходимо указать данные авторизации",
},
});
return (
<BaseFormModal
form={form}
closeOnSubmit
onClose={() => context.closeContextModal(id)}
{...innerProps}
>
{...innerProps}>
<BaseFormModal.Body>
<>
<Fieldset legend={"Общие параметры"}>
<Flex direction={"column"} gap={rem(10)}>
<Flex
direction={"column"}
gap={rem(10)}>
<TextInput
label={"Название"}
placeholder={"Введите название маркетплейса"}
@@ -51,20 +57,28 @@ const MarketplaceFormModal = ({
{...form.getInputProps("baseMarketplace")}
/>
{form.values.baseMarketplace &&
{form.values.baseMarketplace && (
<MarketplaceAuthDataInput
baseMarketplace={form.values.baseMarketplace}
value={form.values.authData as Record<string, string>}
onChange={(value) => form.setFieldValue("authData", value)}
baseMarketplace={
form.values.baseMarketplace
}
value={
form.values.authData as Record<
string,
string
>
}
onChange={value =>
form.setFieldValue("authData", value)
}
error={form.getInputProps("authData").error}
/>
}
)}
</Flex>
</Fieldset>
</>
</BaseFormModal.Body>
</BaseFormModal>
)
}
export default MarketplaceFormModal;
);
};
export default MarketplaceFormModal;

1
src/pages/MarketplacesPage/ui/MarketplacesPage.module.css
View File

@@ -9,7 +9,6 @@
padding: rem(5);
gap: rem(10);
display: flex;
}
.top-panel-last-item {

17
src/pages/MarketplacesPage/ui/MarketplacesPage.tsx
View File

@@ -1,4 +1,4 @@
import styles from './MarketplacesPage.module.css';
import styles from "./MarketplacesPage.module.css";
import PageBlock from "../../../components/PageBlock/PageBlock.tsx";
import ClientSelectNew from "../../../components/Selects/ClientSelectNew/ClientSelectNew.tsx";
import useMarketplacesPageState from "../hooks/useMarketplacesPageState.tsx";
@@ -7,23 +7,20 @@ import MarketplacesTable from "../components/MarketplacesTable/MarketplacesTable
export const MarketplacesPage = () => {
const state = useMarketplacesPageState();
return (
<div className={styles['container']}>
<div className={styles["container"]}>
<PageBlock>
<div className={styles['top-panel']}>
<div className={styles["top-panel"]}>
<ClientSelectNew
placeholder={'Выберите клиента'}
placeholder={"Выберите клиента"}
onChange={state.setClient}
/>
</div>
</PageBlock>
<PageBlock>
<>
<MarketplacesTable
{...state}
/>
<MarketplacesTable {...state} />
</>
</PageBlock>
</div>
)
}
);
};