- {dealSummary.shipmentWarehouseName &&
-
-
+ className={classNames(
+ styles["flex-row"],
+ styles["flex-row-right"]
+ )}>
+
-
-
- {new Date(dealSummary.deadline).toLocaleString('ru-RU').slice(0, -3)}
+
+
+ {new Date(dealSummary.deadline)
+ .toLocaleString("ru-RU")
+ .slice(0, -3)}
- {({copy, copied}) => (
-
+ {({ copy, copied }) => (
+
{
+ onClick={e => {
e.stopPropagation();
copy();
}}
- className={styles['flex-item']}>
-
+ className={styles["flex-item"]}>
+
ID: {dealSummary.id}
-
+
- ID сделки скопирован
+
+ ID сделки скопирован
+
-
)}
-
-
- )
-}
+ );
+};
export default DealSummaryCard;
diff --git a/src/components/DndList.module.css b/src/components/DndList.module.css
index 262ab12..af43fab 100644
--- a/src/components/DndList.module.css
+++ b/src/components/DndList.module.css
@@ -2,9 +2,13 @@
display: flex;
align-items: center;
border-radius: var(--mantine-radius-md);
- border: rem(1px) solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+ border: rem(1px) solid
+ light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
padding: var(--mantine-spacing-sm) var(--mantine-spacing-xl);
- background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-5));
+ background-color: light-dark(
+ var(--mantine-color-white),
+ var(--mantine-color-dark-5)
+ );
margin-bottom: var(--mantine-spacing-sm);
}
@@ -16,4 +20,4 @@
font-size: rem(30px);
font-weight: 700;
width: rem(60px);
-}
\ No newline at end of file
+}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 9f188b1..227ba95 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,26 +1,25 @@
-import styles from './Header.module.css';
-import {Button, TextInput} from "@mantine/core";
-import {FC} from "react";
-
-const Header: FC = ()=>{
+import styles from "./Header.module.css";
+import { Button, TextInput } from "@mantine/core";
+import { FC } from "react";
+const Header: FC = () => {
return (
-
-
+
+ variant={"default"}
+ className={styles["header-button"]}>
+ Поиск
+
- )
-}
+ );
+};
-export default Header;
\ No newline at end of file
+export default Header;
diff --git a/src/components/ImageDropzone/ImageDropzone.tsx b/src/components/ImageDropzone/ImageDropzone.tsx
index 6bc11f3..3f34ce2 100644
--- a/src/components/ImageDropzone/ImageDropzone.tsx
+++ b/src/components/ImageDropzone/ImageDropzone.tsx
@@ -1,31 +1,45 @@
-import {Dropzone, DropzoneProps, FileWithPath} from "@mantine/dropzone";
-import {FC, useState} from "react";
-import {Button, Fieldset, Flex, Group, Image, Loader, rem, Text} from "@mantine/core";
-import {IconPhoto, IconUpload, IconX} from "@tabler/icons-react";
-import {omit} from "lodash";
-import {BaseFormInputProps} from "../../types/utils.ts";
-import {notifications} from "../../shared/lib/notifications.ts";
-import {ProductService} from "../../client";
+import { Dropzone, DropzoneProps, FileWithPath } from "@mantine/dropzone";
+import { FC, useState } from "react";
+import {
+ Button,
+ Fieldset,
+ Flex,
+ Group,
+ Image,
+ Loader,
+ rem,
+ Text,
+} from "@mantine/core";
+import { IconPhoto, IconUpload, IconX } from "@tabler/icons-react";
+import { omit } from "lodash";
+import { BaseFormInputProps } from "../../types/utils.ts";
+import { notifications } from "../../shared/lib/notifications.ts";
+import { ProductService } from "../../client";
interface RestProps {
imageUrlInputProps?: BaseFormInputProps
;
productId?: number;
}
-
-type Props = Omit & RestProps;
+type Props = Omit & RestProps;
const ImageDropzone: FC = (props: Props) => {
const [showDropzone, setShowDropzone] = useState(
- !(typeof props.imageUrlInputProps?.value === 'string' &&
- props.imageUrlInputProps.value.trim() !== '')
+ !(
+ typeof props.imageUrlInputProps?.value === "string" &&
+ props.imageUrlInputProps.value.trim() !== ""
+ )
);
const [isLoading, setIsLoading] = useState(false);
- const restProps = omit(props, ['imageUrl', 'productId', 'imageUrlInputProps']);
+ const restProps = omit(props, [
+ "imageUrl",
+ "productId",
+ "imageUrlInputProps",
+ ]);
const onDrop = (files: FileWithPath[]) => {
if (!props.productId || !props.imageUrlInputProps) return;
if (files.length > 1) {
- notifications.error({message: "Прикрепите одно изображение"});
+ notifications.error({ message: "Прикрепите одно изображение" });
return;
}
const file = files[0];
@@ -34,33 +48,35 @@ const ImageDropzone: FC = (props: Props) => {
ProductService.uploadProductImage({
productId: props.productId,
formData: {
- upload_file: file
- }
- }).then(({ok, message, imageUrl}) => {
- notifications.guess(ok, {message});
- setIsLoading(false);
+ upload_file: file,
+ },
+ })
+ .then(({ ok, message, imageUrl }) => {
+ notifications.guess(ok, { message });
+ setIsLoading(false);
- if (!ok || !imageUrl) {
+ if (!ok || !imageUrl) {
+ setShowDropzone(true);
+
+ return;
+ }
+ props.imageUrlInputProps?.onChange(imageUrl);
+ setShowDropzone(false);
+ })
+ .catch(error => {
+ notifications.error({ message: error.toString() });
setShowDropzone(true);
-
- return;
- }
- props.imageUrlInputProps?.onChange(imageUrl);
- setShowDropzone(false);
- }).catch(error => {
- notifications.error({message: error.toString()});
- setShowDropzone(true);
- setIsLoading(false);
- });
- }
+ setIsLoading(false);
+ });
+ };
const getBody = () => {
return props.imageUrlInputProps?.value && !showDropzone ? (
-
+
) : (
-
= (props: Props) => {
"image/x-icon",
"image/webp",
"image/svg+xml",
- "image/heic"]}
+ "image/heic",
+ ]}
multiple={false}
- onDrop={onDrop}
-
- >
-
+ onDrop={onDrop}>
+
-
-
+
+
Перенесите изображение или нажмите чтоб выбрать файл
-
);
- }
+ };
return (
-
- )
-}
+ );
+};
-export default ImageDropzone;
\ No newline at end of file
+export default ImageDropzone;
diff --git a/src/components/Navbar/LinksGroup/LinksGroup.module.css b/src/components/Navbar/LinksGroup/LinksGroup.module.css
index 8241ebc..29d486c 100644
--- a/src/components/Navbar/LinksGroup/LinksGroup.module.css
+++ b/src/components/Navbar/LinksGroup/LinksGroup.module.css
@@ -1,34 +1,47 @@
.control {
- font-weight: 500;
- display: block;
- width: 100%;
- padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
- color: var(--mantine-color-text);
- font-size: var(--mantine-font-size-sm);
+ font-weight: 500;
+ display: block;
+ width: 100%;
+ padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
+ color: var(--mantine-color-text);
+ font-size: var(--mantine-font-size-sm);
- @mixin hover {
- background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
- color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
- }
+ @mixin hover {
+ background-color: light-dark(
+ var(--mantine-color-gray-0),
+ var(--mantine-color-dark-7)
+ );
+ color: light-dark(
+ var(--mantine-color-black),
+ var(--mantine-color-dark-0)
+ );
+ }
}
.link {
- font-weight: 500;
- display: block;
- text-decoration: none;
- padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
- padding-left: var(--mantine-spacing-md);
- margin-left: var(--mantine-spacing-xl);
- font-size: var(--mantine-font-size-sm);
- color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
- border-left: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+ font-weight: 500;
+ display: block;
+ text-decoration: none;
+ padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
+ padding-left: var(--mantine-spacing-md);
+ margin-left: var(--mantine-spacing-xl);
+ font-size: var(--mantine-font-size-sm);
+ color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+ border-left: 1px solid
+ light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
- @mixin hover {
- background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
- color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
- }
+ @mixin hover {
+ background-color: light-dark(
+ var(--mantine-color-gray-0),
+ var(--mantine-color-dark-7)
+ );
+ color: light-dark(
+ var(--mantine-color-black),
+ var(--mantine-color-dark-0)
+ );
+ }
}
.chevron {
- transition: transform 200ms ease;
-}
\ No newline at end of file
+ transition: transform 200ms ease;
+}
diff --git a/src/components/Navbar/LinksGroup/LinksGroup.tsx b/src/components/Navbar/LinksGroup/LinksGroup.tsx
index c74fdc3..55b8451 100644
--- a/src/components/Navbar/LinksGroup/LinksGroup.tsx
+++ b/src/components/Navbar/LinksGroup/LinksGroup.tsx
@@ -1,8 +1,15 @@
-import {useState} from 'react';
-import {Box, Collapse, Group, rem, ThemeIcon, UnstyledButton} from '@mantine/core';
-import {IconCalendarStats, IconChevronRight} from '@tabler/icons-react';
-import classes from './LinksGroup.module.css';
-import {Link} from "@tanstack/react-router";
+import { useState } from "react";
+import {
+ Box,
+ Collapse,
+ Group,
+ rem,
+ ThemeIcon,
+ UnstyledButton,
+} from "@mantine/core";
+import { IconCalendarStats, IconChevronRight } from "@tabler/icons-react";
+import classes from "./LinksGroup.module.css";
+import { Link } from "@tanstack/react-router";
interface LinksGroupProps {
icon: React.FC;
@@ -11,28 +18,36 @@ interface LinksGroupProps {
links?: { label: string; link: string }[];
}
-export function LinksGroup({icon: Icon, label, initiallyOpened, links}: LinksGroupProps) {
+export function LinksGroup({
+ icon: Icon,
+ label,
+ initiallyOpened,
+ links,
+}: LinksGroupProps) {
const hasLinks = Array.isArray(links);
const [opened, setOpened] = useState(initiallyOpened || false);
- const items = (hasLinks ? links : []).map((link) => (
-
-
+ const items = (hasLinks ? links : []).map(link => (
+
{link.label}
-
));
return (
<>
- setOpened((o) => !o)} className={classes.control}>
-
-
-
-
+ setOpened(o => !o)}
+ className={classes.control}>
+
+
+
+
{label}
@@ -43,7 +58,7 @@ export function LinksGroup({icon: Icon, label, initiallyOpened, links}: LinksGro
style={{
width: rem(16),
height: rem(16),
- transform: opened ? 'rotate(-90deg)' : 'none',
+ transform: opened ? "rotate(-90deg)" : "none",
}}
/>
)}
@@ -55,19 +70,21 @@ export function LinksGroup({icon: Icon, label, initiallyOpened, links}: LinksGro
}
const mockdata = {
- label: 'Releases',
+ label: "Releases",
icon: IconCalendarStats,
links: [
- {label: 'Upcoming releases', link: '/'},
- {label: 'Previous releases', link: '/'},
- {label: 'Releases schedule', link: '/'},
+ { label: "Upcoming releases", link: "/" },
+ { label: "Previous releases", link: "/" },
+ { label: "Releases schedule", link: "/" },
],
};
export function NavbarLinksGroup() {
return (
-
+
);
-}
\ No newline at end of file
+}
diff --git a/src/components/Navbar/Logo.tsx b/src/components/Navbar/Logo.tsx
index e2c65bd..79cd68d 100644
--- a/src/components/Navbar/Logo.tsx
+++ b/src/components/Navbar/Logo.tsx
@@ -1,12 +1,17 @@
-export function Logo(props: React.ComponentPropsWithoutRef<'svg'>) {
+export function Logo(props: React.ComponentPropsWithoutRef<"svg">) {
return (
-
-
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/src/components/Navbar/Navbar.module.css b/src/components/Navbar/Navbar.module.css
index f169a03..7a2a3c7 100644
--- a/src/components/Navbar/Navbar.module.css
+++ b/src/components/Navbar/Navbar.module.css
@@ -6,11 +6,15 @@
align-items: center;
@mixin dark {
background-color: var(--mantine-color-body);
- box-shadow: 0 2px 4px var(--mantine-color-dark-7), 0 4px 24px var(--mantine-color-dark-7);
+ box-shadow:
+ 0 2px 4px var(--mantine-color-dark-7),
+ 0 4px 24px var(--mantine-color-dark-7);
}
@mixin light {
background-color: #f9f9f9;
- box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 4px 24px rgba(0, 0, 0, .08);
+ box-shadow:
+ 0 2px 4px rgba(0, 0, 0, 0.08),
+ 0 4px 24px rgba(0, 0, 0, 0.08);
}
border-radius: rem(20);
width: 100%;
@@ -32,7 +36,10 @@
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
&:hover {
- background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
+ background-color: light-dark(
+ var(--mantine-color-gray-0),
+ var(--mantine-color-dark-5)
+ );
}
&[data-active] {
@@ -43,4 +50,3 @@
}
}
}
-
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index f82d8d4..348d9d6 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -1,20 +1,31 @@
-import {Center, Flex, Image, rem, Stack, Tooltip, UnstyledButton, useMantineColorScheme} from '@mantine/core';
+import {
+ Center,
+ Flex,
+ Image,
+ rem,
+ Stack,
+ Tooltip,
+ UnstyledButton,
+ useMantineColorScheme,
+} from "@mantine/core";
import {
IconBarcode,
- IconBox, IconBuildingWarehouse,
+ IconBox,
+ IconBuildingWarehouse,
IconCash,
IconDashboard,
IconFileBarcode,
IconHome2,
IconLogout,
IconMan,
- IconMoon, IconShoppingCart,
+ IconMoon,
+ IconShoppingCart,
IconSun,
-} from '@tabler/icons-react';
-import classes from './Navbar.module.css';
-import {useAppDispatch} from "../../redux/store.ts";
-import {logout} from "../../features/authSlice.ts";
-import {useNavigate, useRouterState} from "@tanstack/react-router";
+} from "@tabler/icons-react";
+import classes from "./Navbar.module.css";
+import { useAppDispatch } from "../../redux/store.ts";
+import { logout } from "../../features/authSlice.ts";
+import { useNavigate, useRouterState } from "@tanstack/react-router";
interface NavbarLinkProps {
icon: typeof IconHome2;
@@ -28,24 +39,31 @@ interface NavbarLinkProps {
}
function NavbarLink(props: NavbarLinkProps) {
- const {icon: Icon, label, active, onClick} = props;
+ const { icon: Icon, label, active, onClick } = props;
return (
-
- onClick && onClick(props)}
- className={classes.link}
- data-active={active || undefined}>
-
+
+ onClick && onClick(props)}
+ className={classes.link}
+ data-active={active || undefined}>
+
);
}
const mockdata = [
-
{
icon: IconCash,
- label: 'Сделки',
- href: '/leads'
+ label: "Сделки",
+ href: "/leads",
},
// {
// icon: IconTable,
@@ -54,48 +72,50 @@ const mockdata = [
// },
{
icon: IconMan,
- label: 'Клиенты',
- href: '/clients'
+ label: "Клиенты",
+ href: "/clients",
},
{
icon: IconBox,
- label: 'Услуги',
- href: '/services'
+ label: "Услуги",
+ href: "/services",
},
{
icon: IconBarcode,
- label: 'Товары',
- href: '/products'
+ label: "Товары",
+ href: "/products",
},
{
icon: IconFileBarcode,
- label: 'Штрихкоды',
- href: '/barcode'
+ label: "Штрихкоды",
+ href: "/barcode",
},
{
icon: IconBuildingWarehouse,
- label: 'Склады отгрузки',
- href: '/shipping_warehouses'
+ label: "Склады отгрузки",
+ href: "/shipping_warehouses",
},
{
- icon:IconShoppingCart,
- label: 'Маркетплейсы',
- href: '/marketplaces'
- }
+ icon: IconShoppingCart,
+ label: "Маркетплейсы",
+ href: "/marketplaces",
+ },
];
export function Navbar() {
const dispatch = useAppDispatch();
const navigate = useNavigate();
const router = useRouterState();
- const {colorScheme, toggleColorScheme} = useMantineColorScheme({keepTransitions: true});
+ const { colorScheme, toggleColorScheme } = useMantineColorScheme({
+ keepTransitions: true,
+ });
const onLogoutClick = () => {
dispatch(logout());
- navigate({to: '/login'});
- }
+ navigate({ to: "/login" });
+ };
const onNavlinkClick = (props: NavbarLinkProps) => {
- navigate({to: props.href});
- }
+ navigate({ to: props.href });
+ };
const links = mockdata.map((link, index) => (
-
-
+
+
-
+
{links}
-
- onNavlinkClick({href: "/admin", index: -1, icon: IconDashboard})}
+
+
+ onNavlinkClick({
+ href: "/admin",
+ index: -1,
+ icon: IconDashboard,
+ })
+ }
+ />
+
+
-
-
);
-}
\ No newline at end of file
+}
diff --git a/src/components/Navbar/UserButton/UserButton.module.css b/src/components/Navbar/UserButton/UserButton.module.css
index 4d3283f..c7d38be 100644
--- a/src/components/Navbar/UserButton/UserButton.module.css
+++ b/src/components/Navbar/UserButton/UserButton.module.css
@@ -1,10 +1,13 @@
.user {
- display: block;
- width: 100%;
- padding: var(--mantine-spacing-md);
- color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
+ display: block;
+ width: 100%;
+ padding: var(--mantine-spacing-md);
+ color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
- @mixin hover {
- background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
- }
-}
\ No newline at end of file
+ @mixin hover {
+ background-color: light-dark(
+ var(--mantine-color-gray-0),
+ var(--mantine-color-dark-8)
+ );
+ }
+}
diff --git a/src/components/Navbar/UserButton/UserButton.tsx b/src/components/Navbar/UserButton/UserButton.tsx
index 0970349..b80805d 100644
--- a/src/components/Navbar/UserButton/UserButton.tsx
+++ b/src/components/Navbar/UserButton/UserButton.tsx
@@ -1,6 +1,6 @@
-import { UnstyledButton, Group, Avatar, Text, rem } from '@mantine/core';
-import { IconChevronRight } from '@tabler/icons-react';
-import classes from './UserButton.module.css';
+import { UnstyledButton, Group, Avatar, Text, rem } from "@mantine/core";
+import { IconChevronRight } from "@tabler/icons-react";
+import classes from "./UserButton.module.css";
export function UserButton() {
return (
@@ -12,17 +12,24 @@ export function UserButton() {
/>
-
+
Harriette Spoonlicker
-
+
hspoonlicker@outlook.com
-
+
);
-}
\ No newline at end of file
+}
diff --git a/src/components/Navbar/data.ts b/src/components/Navbar/data.ts
index 57dddef..72fbc08 100644
--- a/src/components/Navbar/data.ts
+++ b/src/components/Navbar/data.ts
@@ -1,25 +1,23 @@
-import {IconAdjustments, IconGauge} from "@tabler/icons-react";
+import { IconAdjustments, IconGauge } from "@tabler/icons-react";
export const NavbarLinks = [
{
- label: 'Главная',
+ label: "Главная",
icon: IconGauge,
links: [
{
label: "123",
- link: "/login"
+ link: "/login",
},
-
],
},
{
- label: 'Настройки',
+ label: "Настройки",
icon: IconAdjustments,
- links:[
+ links: [
{
- label: "Профиль"
- }
- ]
+ label: "Профиль",
+ },
+ ],
},
-
];
diff --git a/src/components/ObjectAutocomplete/ObjectAutocomplete.tsx b/src/components/ObjectAutocomplete/ObjectAutocomplete.tsx
index 31caf64..6d71f10 100644
--- a/src/components/ObjectAutocomplete/ObjectAutocomplete.tsx
+++ b/src/components/ObjectAutocomplete/ObjectAutocomplete.tsx
@@ -1,40 +1,44 @@
-import {Autocomplete, AutocompleteProps} from "@mantine/core";
-import {useEffect, useMemo, useState} from "react";
-import {ObjectWithNameAndId} from "../../types/utils.ts";
-import {omit} from "lodash";
-
+import { Autocomplete, AutocompleteProps } from "@mantine/core";
+import { useEffect, useMemo, useState } from "react";
+import { ObjectWithNameAndId } from "../../types/utils.ts";
+import { omit } from "lodash";
export type AutocompleteObjectType = T;
type ControlledValueProps = {
- value: AutocompleteObjectType,
+ value: AutocompleteObjectType;
onChange: (value: string) => void;
-}
+};
type RestProps = {
- defaultValue?: AutocompleteObjectType
+ defaultValue?: AutocompleteObjectType;
onChange: (value: string) => void;
data: AutocompleteObjectType[];
filterBy?: (item: AutocompleteObjectType) => boolean;
-}
+};
export type ObjectAutocompleteProps =
- (RestProps & Partial>)
- & Omit;
+ (RestProps & Partial>) &
+ Omit;
-const ObjectAutocomplete = (props: ObjectAutocompleteProps) => {
-
- const isControlled = 'value' in props;
- const [internalValue, setInternalValue] = useState(props.defaultValue);
+const ObjectAutocomplete = (
+ props: ObjectAutocompleteProps
+) => {
+ const isControlled = "value" in props;
+ const [internalValue, setInternalValue] = useState(
+ props.defaultValue
+ );
const value = isControlled ? props.value?.name : internalValue;
const data = useMemo(() => {
- const propsData = props.filterBy ? props.data.filter(props.filterBy) : props.data;
+ const propsData = props.filterBy
+ ? props.data.filter(props.filterBy)
+ : props.data;
return propsData.map(item => ({
label: item.name,
- value: item.id.toString()
+ value: item.id.toString(),
}));
}, [props.data]);
@@ -45,13 +49,13 @@ const ObjectAutocomplete = (props: ObjectAutoco
return;
}
setInternalValue(event);
- }
+ };
useEffect(() => {
if (isControlled || !internalValue) return;
props.onChange(internalValue);
}, [internalValue]);
- const restProps = omit(props, ['filterBy', 'groupBy']);
+ const restProps = omit(props, ["filterBy", "groupBy"]);
return (
(props: ObjectAutoco
onChange={handleOnChange}
data={data}
/>
- )
-}
+ );
+};
-export default ObjectAutocomplete;
\ No newline at end of file
+export default ObjectAutocomplete;
diff --git a/src/components/ObjectMultiSelect/ObjectMultiSelect.tsx b/src/components/ObjectMultiSelect/ObjectMultiSelect.tsx
index 1f13c42..aaf8f70 100644
--- a/src/components/ObjectMultiSelect/ObjectMultiSelect.tsx
+++ b/src/components/ObjectMultiSelect/ObjectMultiSelect.tsx
@@ -1,83 +1,91 @@
-import {MultiSelect, MultiSelectProps} from "@mantine/core";
-import {useEffect, useMemo, useState} from "react";
-import {groupBy} from "lodash";
+import { MultiSelect, MultiSelectProps } from "@mantine/core";
+import { useEffect, useMemo, useState } from "react";
+import { groupBy } from "lodash";
interface ObjectWithIdAndName {
- id: number,
- name: string
+ id: number;
+ name: string;
}
export type MultiselectObjectType = T;
type ControlledValueProps = {
- value: MultiselectObjectType[],
+ value: MultiselectObjectType[];
onChange: (value: MultiselectObjectType[]) => void;
-}
+};
type CustomLabelAndKeyProps = {
getLabelFn: (item: MultiselectObjectType) => string;
getValueFn: (item: MultiselectObjectType) => string;
-}
+};
type RestProps = {
- defaultValue?: MultiselectObjectType[]
+ defaultValue?: MultiselectObjectType[];
onChange: (value: MultiselectObjectType[]) => void;
data: MultiselectObjectType[];
groupBy?: (item: MultiselectObjectType) => string;
filterBy?: (item: MultiselectObjectType) => boolean;
-}
+};
const defaultGetLabelFn = (item: T): string => {
return item.name;
-}
+};
const defaultGetValueFn = (item: T): string => {
return item.id.toString();
-}
-export type ObjectMultiSelectProps =
- (RestProps & Partial>)
- & Omit
- & (T extends ObjectWithIdAndName ? Partial> : CustomLabelAndKeyProps);
+};
+export type ObjectMultiSelectProps = (RestProps &
+ Partial>) &
+ Omit &
+ (T extends ObjectWithIdAndName
+ ? Partial>
+ : CustomLabelAndKeyProps);
-const ObjectMultiSelect = (props: ObjectMultiSelectProps) => {
+const ObjectMultiSelect = (props: ObjectMultiSelectProps) => {
+ const isControlled = "value" in props;
+ const haveGetValueFn = "getValueFn" in props;
+ const haveGetLabelFn = "getLabelFn" in props;
- const isControlled = 'value' in props;
- const haveGetValueFn = 'getValueFn' in props;
- const haveGetLabelFn = 'getLabelFn' in props;
-
- const [internalValue, setInternalValue] = useState[] | undefined>(props.defaultValue);
+ const [internalValue, setInternalValue] = useState<
+ MultiselectObjectType[] | undefined
+ >(props.defaultValue);
const value = (isControlled ? props.value : internalValue) || [];
- const getValueFn = (haveGetValueFn && props.getValueFn) || defaultGetValueFn;
- const getLabelFn = (haveGetLabelFn && props.getLabelFn) || defaultGetLabelFn;
+ const getValueFn =
+ (haveGetValueFn && props.getValueFn) || defaultGetValueFn;
+ const getLabelFn =
+ (haveGetLabelFn && props.getLabelFn) || defaultGetLabelFn;
const data = useMemo(() => {
- const propsData = props.filterBy ? props.data.filter(props.filterBy) : props.data;
+ const propsData = props.filterBy
+ ? props.data.filter(props.filterBy)
+ : props.data;
if (props.groupBy) {
-
const groupedData = groupBy(propsData, props.groupBy);
return Object.entries(groupedData).map(([group, items]) => ({
group,
items: items.map(item => ({
label: getLabelFn(item),
- value: getValueFn(item)
- }))
+ value: getValueFn(item),
+ })),
}));
} else {
return propsData.map(item => ({
label: getLabelFn(item),
- value: getValueFn(item)
+ value: getValueFn(item),
}));
}
}, [props.data, props.groupBy]);
const handleOnChange = (event: string[]) => {
- const objects = props.data.filter(item => event.includes(getValueFn(item)));
+ const objects = props.data.filter(item =>
+ event.includes(getValueFn(item))
+ );
if (isControlled) {
props.onChange(objects);
return;
}
setInternalValue(objects);
- }
+ };
useEffect(() => {
if (isControlled || !internalValue) return;
props.onChange(internalValue);
@@ -90,7 +98,7 @@ const ObjectMultiSelect = (props: ObjectMultiSelectProps) => {
onChange={handleOnChange}
data={data}
/>
- )
-}
+ );
+};
-export default ObjectMultiSelect;
\ No newline at end of file
+export default ObjectMultiSelect;
diff --git a/src/components/ObjectSelect/ObjectSelect.tsx b/src/components/ObjectSelect/ObjectSelect.tsx
index e99ba0c..9b92daf 100644
--- a/src/components/ObjectSelect/ObjectSelect.tsx
+++ b/src/components/ObjectSelect/ObjectSelect.tsx
@@ -1,73 +1,77 @@
-import {Select, SelectProps} from "@mantine/core";
-import {useEffect, useMemo, useState} from "react";
-import {groupBy, omit} from "lodash";
+import { Select, SelectProps } from "@mantine/core";
+import { useEffect, useMemo, useState } from "react";
+import { groupBy, omit } from "lodash";
interface ObjectWithIdAndName {
- id: number,
- name: string
+ id: number;
+ name: string;
}
export type SelectObjectType = T;
type ControlledValueProps = {
- value: SelectObjectType,
+ value: SelectObjectType;
onChange: (value: SelectObjectType) => void;
-}
+};
type CustomLabelAndKeyProps = {
getLabelFn: (item: SelectObjectType) => string;
getValueFn: (item: SelectObjectType) => string;
-}
+};
type RestProps = {
- defaultValue?: SelectObjectType
+ defaultValue?: SelectObjectType;
onChange: (value: SelectObjectType) => void;
data: SelectObjectType[];
groupBy?: (item: SelectObjectType) => string;
filterBy?: (item: SelectObjectType) => boolean;
};
const defaultGetLabelFn = (item: T): string => {
-
return item.name;
-}
+};
const defaultGetValueFn = (item: T): string => {
if (!item) return item;
return item.id.toString();
-}
-export type ObjectSelectProps =
- (RestProps & Partial>)
- & Omit
- & (T extends ObjectWithIdAndName ? Partial> : CustomLabelAndKeyProps)
+};
+export type ObjectSelectProps = (RestProps &
+ Partial>) &
+ Omit &
+ (T extends ObjectWithIdAndName
+ ? Partial>
+ : CustomLabelAndKeyProps);
-const ObjectSelect = (props: ObjectSelectProps) => {
-
- const isControlled = 'value' in props;
- const haveGetValueFn = 'getValueFn' in props;
- const haveGetLabelFn = 'getLabelFn' in props;
- const [internalValue, setInternalValue] = useState | undefined>(props.defaultValue);
+const ObjectSelect = (props: ObjectSelectProps) => {
+ const isControlled = "value" in props;
+ const haveGetValueFn = "getValueFn" in props;
+ const haveGetLabelFn = "getLabelFn" in props;
+ const [internalValue, setInternalValue] = useState<
+ SelectObjectType | undefined
+ >(props.defaultValue);
const value = isControlled ? props.value : internalValue;
-
- const getValueFn = (haveGetValueFn && props.getValueFn) || defaultGetValueFn;
- const getLabelFn = (haveGetLabelFn && props.getLabelFn) || defaultGetLabelFn;
+ const getValueFn =
+ (haveGetValueFn && props.getValueFn) || defaultGetValueFn;
+ const getLabelFn =
+ (haveGetLabelFn && props.getLabelFn) || defaultGetLabelFn;
const data = useMemo(() => {
- const propsData = props.filterBy ? props.data.filter(props.filterBy) : props.data;
+ const propsData = props.filterBy
+ ? props.data.filter(props.filterBy)
+ : props.data;
if (props.groupBy) {
-
const groupedData = groupBy(propsData, props.groupBy);
return Object.entries(groupedData).map(([group, items]) => ({
group,
items: items.map(item => ({
label: getLabelFn(item),
- value: getValueFn(item)
- }))
+ value: getValueFn(item),
+ })),
}));
} else {
return propsData.map(item => ({
label: getLabelFn(item),
- value: getValueFn(item)
+ value: getValueFn(item),
}));
}
}, [props.data, props.groupBy]);
@@ -81,14 +85,19 @@ const ObjectSelect = (props: ObjectSelectProps) => {
return;
}
setInternalValue(object);
- }
+ };
useEffect(() => {
if (isControlled || !internalValue) return;
props.onChange(internalValue);
}, [internalValue]);
- const restProps = omit(props, ['filterBy', 'groupBy', 'getValueFn', 'getLabelFn']);
+ const restProps = omit(props, [
+ "filterBy",
+ "groupBy",
+ "getValueFn",
+ "getLabelFn",
+ ]);
return (