samling 0.13.1

App for managing apparel collections
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

import { t, Trans } from "@lingui/macro";
import {
  Dispatch,
  DispatchWithoutAction,
  SetStateAction,
  useState,
} from "react";
import api from "../../api";
import { useAppDispatch, useAppSelector } from "../../state/hooks";
import { match } from "oxide.ts";
import { apiErrorMessage } from "../../state/slices/user";
import Modal, { FormInput } from "./ModalBase";

interface Props {
  open: boolean;
  setOpen: Dispatch<SetStateAction<boolean>>;
  onCreate: DispatchWithoutAction;
}

export default function CreateGroupModal({ open, setOpen, onCreate }: Props) {
  const dispatch = useAppDispatch();
  const { token, activeOrganization } = useAppSelector((state) => state.user);
  const [name, setName] = useState("");
  const input: FormInput = {
    id: "name",
    name: "name",
    label: t`Name`,
    placeholder: t`North America sales reps`,
    htmlType: "text",
    required: true,
    value: name,
    onChange: (value) => setName(value),
  };

  function onSubmit() {
    api
      .createGroup(
        token as string,
        activeOrganization?.organization.id as number,
        { name },
      )
      .then((res) => {
        match(res, {
          Ok: () => {
            onCreate();
          },
          Err: (error) => {
            dispatch(apiErrorMessage(error));
          },
        });
        setOpen(false);
      });
  }

  return (
    <Modal
      title={`Create group`}
      description={
        <Trans>
          Groups are used to limit user access to collections and price lists.
        </Trans>
      }
      submitText={t`Create`}
      cancelButton
      open={open}
      close={() => setOpen(false)}
      onSubmit={onSubmit}
      controls={[input]}
    />
  );
}