1  import { useQuery } from "@tanstack/react-query";
  2  import { Tooltip } from "antd";
  3  import { ColumnFilterItem } from "antd/es/table/interface";
  4  import { IFilament } from "../pages/filaments/model";
  5  import { IVendor } from "../pages/vendors/model";
  6  import { getAPIURL } from "../utils/url";
  7  
  8  export function useSpoolmanFilamentFilter(enabled: boolean = false) {
  9    return useQuery<IFilament[], unknown, ColumnFilterItem[]>({
 10      enabled: enabled,
 11      queryKey: ["filaments"],
 12      queryFn: async () => {
 13        const response = await fetch(getAPIURL() + "/filament");
 14        if (!response.ok) {
 15          throw new Error("Network response was not ok");
 16        }
 17        return response.json();
 18      },
 19      select: (data) => {
 20        // Concatenate vendor name and filament name
 21        const names = data
 22          // Remove empty names
 23          .filter((filament) => {
 24            return filament.name !== null && filament.name !== undefined && filament.name !== "";
 25          })
 26          // Transform to ColumnFilterItem
 27          .map((filament) => {
 28            let name = "";
 29            if (filament.vendor?.name) {
 30              name = `${filament.vendor.name} - ${filament.name ?? "<unknown>"}`;
 31            } else {
 32              name = `${filament.name ?? "<unknown>"}`;
 33            }
 34  
 35            const tooltipParts: React.ReactNode[] = [];
 36            if (filament.color_hex) {
 37              tooltipParts.push(
 38                <div
 39                  key="color"
 40                  style={{
 41                    borderRadius: ".4em",
 42                    width: "1.4em",
 43                    height: "1.4em",
 44                    backgroundColor: "#" + filament.color_hex,
 45                  }}
 46                ></div>,
 47              );
 48            }
 49            if (filament.material) {
 50              tooltipParts.push(<div key="material">{filament.material}</div>);
 51            }
 52            if (filament.weight) {
 53              tooltipParts.push(<div key="weight">{filament.weight}g</div>);
 54            }
 55  
 56            return {
 57              text: (
 58                <Tooltip
 59                  title={
 60                    <div
 61                      style={{
 62                        display: "flex",
 63                        flexDirection: "row",
 64                        gap: ".5em",
 65                        alignContent: "center",
 66                      }}
 67                    >
 68                      {tooltipParts}
 69                    </div>
 70                  }
 71                >
 72                  {name}
 73                </Tooltip>
 74              ),
 75              value: filament.id,
 76              sortId: name,
 77            };
 78          })
 79          // Remove duplicates
 80          .filter((item, index, self) => self.findIndex((t) => t.value === item.value) === index)
 81          // Sort by name
 82          .sort((a, b) => a.sortId.localeCompare(b.sortId));
 83        return names;
 84      },
 85    });
 86  }
 87  
 88  export function useSpoolmanFilamentNames(enabled: boolean = false) {
 89    return useQuery<IFilament[], unknown, string[]>({
 90      enabled: enabled,
 91      queryKey: ["filaments"],
 92      queryFn: async () => {
 93        const response = await fetch(getAPIURL() + "/filament");
 94        if (!response.ok) {
 95          throw new Error("Network response was not ok");
 96        }
 97        return response.json();
 98      },
 99      select: (data) => {
100        // Concatenate vendor name and filament name
101        let names = data
102          .filter((filament) => {
103            return filament.name !== null && filament.name !== undefined && filament.name !== "";
104          })
105          .map((filament) => {
106            return filament.name ?? "<unknown>";
107          })
108          .sort();
109        // Remove duplicates
110        names = [...new Set(names)];
111        return names;
112      },
113    });
114  }
115  
116  export function useSpoolmanVendors(enabled: boolean = false) {
117    return useQuery<IVendor[], unknown, string[]>({
118      enabled: enabled,
119      queryKey: ["vendors"],
120      queryFn: async () => {
121        const response = await fetch(getAPIURL() + "/vendor");
122        if (!response.ok) {
123          throw new Error("Network response was not ok");
124        }
125        return response.json();
126      },
127      select: (data) => {
128        return data
129          .map((vendor) => {
130            return vendor.name ?? `ID ${vendor.id}`;
131          })
132          .sort();
133      },
134    });
135  }
136  
137  export function useSpoolmanMaterials(enabled: boolean = false) {
138    return useQuery<string[]>({
139      enabled: enabled,
140      queryKey: ["materials"],
141      queryFn: async () => {
142        const response = await fetch(getAPIURL() + "/material");
143        if (!response.ok) {
144          throw new Error("Network response was not ok");
145        }
146        return response.json();
147      },
148      select: (data) => {
149        return data.sort();
150      },
151    });
152  }
153  
154  export function useSpoolmanArticleNumbers(enabled: boolean = false) {
155    return useQuery<string[]>({
156      enabled: enabled,
157      queryKey: ["articleNumbers"],
158      queryFn: async () => {
159        const response = await fetch(getAPIURL() + "/article-number");
160        if (!response.ok) {
161          throw new Error("Network response was not ok");
162        }
163        return response.json();
164      },
165      select: (data) => {
166        return data.sort();
167      },
168    });
169  }
170  
171  export function useSpoolmanLotNumbers(enabled: boolean = false) {
172    return useQuery<string[]>({
173      enabled: enabled,
174      queryKey: ["lotNumbers"],
175      queryFn: async () => {
176        const response = await fetch(getAPIURL() + "/lot-number");
177        if (!response.ok) {
178          throw new Error("Network response was not ok");
179        }
180        return response.json();
181      },
182      select: (data) => {
183        return data.sort();
184      },
185    });
186  }
187  
188  export function useSpoolmanLocations(enabled: boolean = false) {
189    return useQuery<string[]>({
190      enabled: enabled,
191      queryKey: ["locations"],
192      queryFn: async () => {
193        const response = await fetch(getAPIURL() + "/location");
194        if (!response.ok) {
195          throw new Error("Network response was not ok");
196        }
197        return response.json();
198      },
199      select: (data) => {
200        return data.sort();
201      },
202    });
203  }