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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

import { useLocalize } from "../../../i18n";
import { t } from "@lingui/macro";
import { useGroupSummaries, useUserList } from "../../../api";
import Breadcrumbs from "../../../components/nav/Breadcrumbs";
import ApiError from "../errors/ApiError";
import Loading from "../../../components/Loading";
import { GroupSummary, Role, User, UserSortOrder } from "../../../types/api";
import UsersTable from "../../../components/admin/UsersTable";
import { Dispatch, SetStateAction, useMemo, useState } from "react";
import { useTitle } from "../../../hooks";

export default function AdminUsersPage() {
  useTitle([t`Admin`, t`Users`]);

  const [userSortBy, setUserSortBy] = useState(UserSortOrder.NameAsc);
  const [userRolesFilter, setUserRolesFilter] = useState([] as Role[]);
  const [userGroupsFilter, setUserGroupsFilter] = useState(
    [] as GroupSummary[],
  );

  const [groupsResult] = useGroupSummaries();
  const userFilters = useMemo(
    () => ({
      roles: userRolesFilter,
      groups: userGroupsFilter.length === 0 ? null : userGroupsFilter.map((g) => ({ id: g.id })),
    }),
    [userRolesFilter, userGroupsFilter],
  );
  const [usersResult, refreshUsers] = useUserList(userSortBy, userFilters);
  const [allUsersResult] = useUserList(userSortBy);

  if (groupsResult.isErr()) {
    return <ApiError error={groupsResult.unwrapErr()} />;
  }

  if (usersResult.isErr()) {
    return <ApiError error={usersResult.unwrapErr()} />;
  }

  const groups = groupsResult.unwrap();
  const users = usersResult.unwrap();
  const allUsers = allUsersResult.unwrap();

  if (groups === null || users === null || allUsers === null) {
    return <Loading />;
  } else {
    return (
      <AdminUsersInner
        groups={groups}
        users={users}
        allUsers={allUsers}
        refreshUsers={refreshUsers}
        userSortBy={userSortBy}
        setUserSortBy={setUserSortBy}
        userRolesFilter={userRolesFilter}
        setUserRolesFilter={setUserRolesFilter}
        userGroupsFilter={userGroupsFilter}
        setUserGroupsFilter={setUserGroupsFilter}
      />
    );
  }
}

interface AdminUsersInnerProps {
  groups: GroupSummary[];
  users: User[];
  allUsers: User[];
  refreshUsers: () => void;
  userSortBy: UserSortOrder;
  setUserSortBy: Dispatch<SetStateAction<UserSortOrder>>;
  userRolesFilter: Role[];
  setUserRolesFilter: Dispatch<SetStateAction<Role[]>>;
  userGroupsFilter: GroupSummary[];
  setUserGroupsFilter: Dispatch<SetStateAction<GroupSummary[]>>;
}

export function AdminUsersInner({
  groups,
  users,
  allUsers,
  refreshUsers,
  userSortBy,
  setUserSortBy,
  userRolesFilter,
  setUserRolesFilter,
  userGroupsFilter,
  setUserGroupsFilter,
}: AdminUsersInnerProps) {
  const { i18nLink } = useLocalize();
  const breadcrumbItems = [
    { title: t`Admin`, to: i18nLink("/app/admin"), current: false },
    { title: t`Users`, to: i18nLink("/app/admin/users"), current: true },
  ];

  return (
    <>
      <Breadcrumbs items={breadcrumbItems} />
      <div className="px-4 sm:px-6 lg:px-8">
        <UsersTable
          allUsers={allUsers}
          users={users}
          refreshUsers={refreshUsers}
          sortBy={userSortBy}
          setSortBy={setUserSortBy}
          roles={userRolesFilter}
          setRoles={setUserRolesFilter}
          groups={userGroupsFilter}
          setGroups={setUserGroupsFilter}
          allGroups={groups}
        />
      </div>
    </>
  );
}