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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161

import { Dispatch, SetStateAction, useMemo } from "react";
import {
  CategorySummary,
  CollectionItem,
  CollectionWithItems,
  NestedStyleSortOrder,
  PriceListSummary,
} from "../types/api";
import StyleFilter from "./filters/StyleFilter";
import CategoryFilter from "./filters/CategoryFilter";
import { ItemFilters } from "../types/filters";
import ActiveFilters from "./filters/ActiveFilters";
import _ from "lodash";
import CountryFilter from "./filters/CountryFilter";
import CollectionTableSortMenu from "./CollectionTableSortMenu";
import NewFilter from "./filters/NewFilter";
import CollectionTablePriceListsMenu from "./CollectionTablePriceListsMenu";
import ActivePriceLists from "./ActivePriceLists";
import CoreFilter from "./filters/CoreFilter";
import ServiceItemFilter from "./filters/ServiceItemFilter";
import ExportForm from "./ExportForm";

interface Props {
  collection: CollectionWithItems;
  items: CollectionItem[];
  allItems: CollectionItem[];
  itemFilters: ItemFilters;
  setItemFilters: Dispatch<SetStateAction<ItemFilters>>;
  sortOrder: NestedStyleSortOrder;
  setSortOrder: Dispatch<SetStateAction<NestedStyleSortOrder>>;
  allPriceLists: PriceListSummary[];
  priceLists: PriceListSummary[];
  setPriceLists: Dispatch<SetStateAction<PriceListSummary[]>>;
}

export default function CollectionFilters({
  collection,
  items,
  allItems,
  itemFilters,
  setItemFilters,
  sortOrder,
  setSortOrder,
  allPriceLists,
  priceLists,
  setPriceLists,
}: Props) {
  const allCategories = useMemo(() => {
    return _.sortBy(
      _.uniqBy(
        allItems.reduce((categories, item) => {
          item.style.categories.forEach((cat) => {
            categories.push(cat);
          });
          return categories;
        }, [] as CategorySummary[]),
        "slug",
      ),
      ["slug"],
    );
  }, [allItems]);

  const allCountryCodes = useMemo(() => {
    return _.sortedUniq(
      allItems
        .reduce((codes, item) => {
          if (!!item.style.country_of_origin) {
            codes.push(item.style.country_of_origin);
          }
          return codes;
        }, [] as string[])
        .sort(),
    );
  }, [allItems]);

  return (
    <div className="bg-white mx-4 sm:mx-6 lg:mx-8">
      <section className="print:hidden">
        <div className="mt-6 sm:flex flex-wrap gap-x-4">
          <div className="sm:w-70 shrink-0 grow">
            <StyleFilter
              allItems={allItems}
              itemFilters={itemFilters}
              setItemFilters={setItemFilters}
            />
          </div>
          <div className=" sm:w-48 shrink-0 grow">
            <CategoryFilter
              allCategories={allCategories}
              itemFilters={itemFilters}
              setItemFilters={setItemFilters}
            />
          </div>
          <div className="sm:w-30 shrink-0 grow-0">
            <CountryFilter
              allCountryCodes={allCountryCodes}
              itemFilters={itemFilters}
              setItemFilters={setItemFilters}
            />
          </div>
          <div className="sm:w-40 shrink-0 grow-0">
            <NewFilter
              itemFilters={itemFilters}
              setItemFilters={setItemFilters}
            />
          </div>
          <div className="sm:w-30 shrink-0 grow-0">
            <CoreFilter
              itemFilters={itemFilters}
              setItemFilters={setItemFilters}
            />
          </div>
          <div className="sm:w-38 shrink-0 grow-0">
            <ServiceItemFilter
              itemFilters={itemFilters}
              setItemFilters={setItemFilters}
            />
          </div>
          {/* TODO: Separate Sort By and Price Lists from filters! */}
          <div className="sm:w-52 shrink-0 grow-0">
            <CollectionTableSortMenu
              sortOrder={sortOrder}
              setSortOrder={setSortOrder}
            />
          </div>
          <div className="sm:w-44 shrink-0 grow-0">
            <CollectionTablePriceListsMenu
              allPriceLists={allPriceLists}
              priceLists={priceLists}
              setPriceLists={setPriceLists}
            />
          </div>
          <div className="sm:w-20">
            <ExportForm
              collection={collection}
              priceLists={priceLists}
              itemFilters={itemFilters}
            />
          </div>
        </div>
      </section>

      <section>
        <ActiveFilters
          itemFilters={itemFilters}
          setItemFilters={setItemFilters}
          items={items}
          allItems={allItems}
          allCategories={allCategories}
        />
      </section>

      <section>
        <ActivePriceLists
          priceLists={priceLists}
          setPriceLists={setPriceLists}
        />
      </section>
    </div>
  );
}