https://ru-digital.de/build/routes/search/main-GWWLSBEE.js

1import {
2  create,
3  create2,
4  require_remix_validated_form_cjs,
5  require_remix_validated_form_with_yup_cjs,
6  useInView
7} from "/build/_shared/chunk-DGZZT3G5.js";
8import {
9  useMatchesData
10} from "/build/_shared/chunk-UHQDUM2S.js";
11import {
12  require_axios
13} from "/build/_shared/chunk-MOIKYNDV.js";
14import {
15  Breadcrumb,
16  MainFilter,
17  WeiterFilter,
18  slide_over_dialog_default
19} from "/build/_shared/chunk-LTL4HYOU.js";
20import "/build/_shared/chunk-EY65NO2V.js";
21import "/build/_shared/chunk-C3KA4SO6.js";
22import "/build/_shared/chunk-XYPXCSVK.js";
23import {
24  AdjustmentsHorizontalIcon_default,
25  ErrorBoundary,
26  Modal,
27  XMarkIcon_default,
28  default_default,
29  search_box_default,
30  spinner_default,
31  tabs_default
32} from "/build/_shared/chunk-Y6OIBGDA.js";
33import {
34  GetScreenSize,
35  class_names_default,
36  getURLsearchParamsFromState,
37  items_reorder_default,
38  sortFilterData
39} from "/build/_shared/chunk-P4WFY3UR.js";
40import "/build/_shared/chunk-VIU3M2OR.js";
41import {
42  Link,
43  Outlet,
44  init_esm,
45  useFetcher,
46  useLoaderData,
47  useLocation,
48  useOutletContext,
49  useParams,
50  useSearchParams,
51  useTransition
52} from "/build/_shared/chunk-46RNFGVL.js";
53import {
54  React,
55  __toESM,
56  init_react,
57  require_react
58} from "/build/_shared/chunk-BNRLY3XL.js";
59
60// browser-route-module:routes/search/main.tsx?browser
61init_react();
62
63// app/routes/search/main.tsx
64init_react();
65var import_react = __toESM(require_react());
66init_esm();
67var import_remix_validated_form = __toESM(require_remix_validated_form_cjs());
68var import_with_yup = __toESM(require_remix_validated_form_with_yup_cjs());
69var import_axios = __toESM(require_axios());
70var validator = (0, import_with_yup.withYup)(create({
71  curriculumIds: create2().nullable(),
72  secondaryEducationIds: create2().nullable(),
73  academicYearIds: create2().nullable(),
74  subjectAreaIds: create2().nullable(),
75  mediaKindIds: create2().nullable(),
76  subjectIds: create2().nullable(),
77  extentIds: create2().nullable(),
78  licenseIds: create2().nullable(),
79  mediaCompetenceIds: create2().nullable(),
80  educationalApplicationAreaIds: create2().nullable(),
81  specialIds: create2().nullable(),
82  authorIds: create2().nullable(),
83  tagIds: create2().nullable(),
84  q: create2().nullable(),
85  sort: create2().nullable(),
86  inclusions: create2().nullable()
87}));
88var tabs = [
89  {
90    name: "Medien",
91    status: "default",
92    id: 1
93  },
94  {
95    name: "Fachbeitr\xE4ge",
96    status: "default",
97    id: 2,
98    url: "/professional_article/main",
99    isInternal: true
100  },
101  {
102    name: "Veranstaltungen",
103    status: "inprogress",
104    id: 3,
105    url: "https://veranstaltungen.ru-digital.de"
106  }
107];
108var ErrorBoundary2 = ({ error }) => {
109  return /* @__PURE__ */ React.createElement(ErrorBoundary, {
110    error
111  });
112};
113function Main() {
114  const location = useLocation();
115  const matchdata = useMatchesData("/", location.pathname);
116  const [searchParams] = useSearchParams();
117  const authors = matchdata == null ? void 0 : matchdata.authors;
118  const tagsList = matchdata == null ? void 0 : matchdata.tagsList;
119  const mainFilterData = matchdata == null ? void 0 : matchdata.mainFilterData;
120  const filterData = matchdata == null ? void 0 : matchdata.filterData;
121  const weiterFilterData = sortFilterData(filterData);
122  const defaultValuesMainForm = matchdata == null ? void 0 : matchdata.defaultValuesMainForm;
123  const {
124    resultList,
125    currentPage,
126    totalPages,
127    totalEntries,
128    perPage,
129    searchToken,
130    weiterFilterCount,
131    searchAttributes,
132    mainFilterCount,
133    sort,
134    hasNextPage
135  } = useLoaderData();
136  const [weiterFilterOpen, setWeiterFilter] = (0, import_react.useState)(false);
137  const [MainFilteropen, setMainFilteropen] = (0, import_react.useState)(searchParams.get("openmoldal") === "1");
138  const [items, setItems] = (0, import_react.useState)({});
139  const [current, setCurrent] = (0, import_react.useState)({
140    status: "unassigned",
141    id: 1
142  });
143  const [mobileFiltersOpen, setMobileFiltersOpen] = (0, import_react.useState)(false);
144  const [query, setSearchQuery] = (0, import_react.useState)(searchParams && searchParams.getAll("q").length ? searchParams.getAll("q")[0] : "");
145  const [fieldValue, setFieldValue] = (0, import_react.useState)(defaultValues

145MainForm);
146  const { articleId } = useParams();
147  const transition = useTransition();
148  const fetcher = useFetcher();
149  const size = GetScreenSize();
150  const isFetchingNextPage = fetcher.state === "loading" && (resultList == null ? void 0 : resultList.length) > 39;
151  const { showPendingSpinner } = useOutletContext();
152  const page = (0, import_react.useRef)(1);
153  const formRef = (0, import_react.useRef)(null);
154  const { button } = default_default;
155  const { base, navBar, color } = button;
156  const { url } = getURLsearchParamsFromState({
157    fieldValue,
158    query,
159    currentPage
160  });
161  const formAction = `/search/main?${url}`;
162  const isStateItemshasNextPage = (items == null ? void 0 : items.currentPage) < (items == null ? void 0 : items.totalPages);
163  const isSearchedOrFilteredResultHasNexxtPage = currentPage < totalPages;
164  const { ref, entry } = useInView({
165    onChange: (inView, entery) => {
166      if (!inView || fetcher && isFetchingNextPage && articleId || !isSearchedOrFilteredResultHasNexxtPage || !isStateItemshasNextPage) {
167        return;
168      }
169      fetchNextPage(entery);
170    },
171    threshold: 0
172  });
173  const isIntersecting = (entry == null ? void 0 : entry.isIntersecting) && (resultList == null ? void 0 : resultList.length) > 39;
174  const [sortedData] = items_reorder_default({
175    stateData: items == null ? void 0 : items.resultList,
176    serverData: resultList,
177    mainFilterCount,
178    weiterFilterCount,
179    hasMore: isStateItemshasNextPage,
180    transitionState: transition.state,
181    size,
182    query
183  });
184  (0, import_react.useEffect)(() => {
185    const handleSetData = () => {
186      setItems({
187        resultList,
188        currentPage,
189        totalPages,
190        totalEntries,
191        perPage,
192        searchToken,
193        weiterFilterCount,
194        searchAttributes,
195        mainFilterCount,
196        defaultValuesMainForm,
197        sort,
198        hasNextPage
199      });
200    };
201    if ((resultList == null ? void 0 : resultList.length) > 39 && totalEntries !== (items == null ? void 0 : items.totalEntries)) {
202      handleSetData();
203    }
204  }, [
205    currentPage,
206    defaultValuesMainForm,
207    isSearchedOrFilteredResultHasNexxtPage,
208    items == null ? void 0 : items.totalEntries,
209    mainFilterCount,
210    perPage,
211    resultList,
212    searchAttributes,
213    searchToken,
214    sort,
215    totalEntries,
216    totalPages,
217    weiterFilterCount,
218    hasNextPage
219  ]);
220  (0, import_react.useEffect)(() => {
221    var _a;
222    const handleSetData = () => {
223      setItems(({
224        resultList: stateResult,
225        weiterFilterCount: weiterFilterCount2,
226        searchAttributes: searchAttributes2,
227        mainFilterCount: mainFilterCount2,
228        defaultValuesMainForm: defaultValuesMainForm2,
229        sort: sort2
230      }) => {
231        var _a2, _b, _c, _d, _e, _f, _g, _h;
232        return {
233          resultList: [...stateResult, ...(_a2 = fetcher == null ? void 0 : fetcher.data) == null ? void 0 : _a2.resultList],
234          currentPage: (_b = fetcher == null ? void 0 : fetcher.data) == null ? void 0 : _b.currentPage,
235          totalEntries: (_c = fetcher == null ? void 0 : fetcher.data) == null ? void 0 : _c.totalEntries,
236          totalPages: (_d = fetcher == null ? void 0 : fetcher.data) == null ? void 0 : _d.totalPages,
237          perPage: (_e = fetcher == null ? void 0 : fetcher.data) == null ? void 0 : _e.perPage,
238          searchToken: (_f = fetcher == null ? void 0 : fetcher.data) == null ? void 0 : _f.searchToken,
239          weiterFilterCount: weiterFilterCount2,
240          searchAttributes: searchAttributes2,
241          mainFilterCount: mainFilterCount2,
242          defaultValuesMainForm: defaultValuesMainForm2,
243          sort: sort2,
244          hasNextPage: ((_g = fetcher == null ? void 0 : fetcher.data) == null ? void 0 : _g.currentPage) < ((_h = fetcher == null ? void 0 : fetcher.data) == null ? void 0 : _h.totalPages)
245        };
246      });
247    };
248    if ((fetcher == null ? void 0 : fetcher.data) && isIntersecting && ((_a = fetcher == null ? void 0 : fetcher.data) == null ? void 0 : _a.currentPage) === (page == null ? void 0 : page.current)) {
249      handleSetData();
250    }
251  }, [isIntersecting, fetcher == null ? void 0 : fetcher.data, hasNextPage]);
252  (0, import_react.useEffect)(() => {
253    if (transition.state === "loading") {
254      page.current = 1;
255      setWeiterFilter(false);
256      setMainFilteropen(false);
257    }
258  }, [transition.state]);
259  (0, import_react.useEffect)(() => {
260    if (transition.state === "submitting") {
261      page.current = 1;
262      setMainFilteropen(false);
263      setWeiterFilter(false);
264    }
265  }, [transition.state]);
266  const fetchNextPage = (entery) => {
267    if (entery.isIntersecting) {
268      const stateParams = new URLSearchParams(url);

269      const urlParams = new URLSearchParams(location.search);
270      const urlAuthorIds = urlParams.get("authorIds");
271      if (urlAuthorIds) {
272        stateParams.set("authorIds", urlAuthorIds);
273      }
274      const urlTagIds = urlParams.get("tagIds");
275      if (urlTagIds) {
276        stateParams.set("tagIds", urlTagIds);
277      }
278      stateParams.set("page", String(page.current += 1));
279      fetcher.load(`/search/main?${stateParams.toString()}`);
280    }
281  };
282  const dataui = {
283    data: sortedData,
284    showPendingSpinner,
285    isFetchingNextPage,
286    isStateItemshasNextPage
287  };
288  const handleSetSearchFieldValue = (e, fieldValue2) => {
289    const { name, checked, id } = e.target;
290    setFieldValue((prev) => {
291      let idKeyValue = id.includes("subjectAreaIds") ? id.split("-")[0] : id;
292      let selectedValues = prev[idKeyValue] ? prev[idKeyValue] : [];
293      if (checked) {
294        let prevState = {
295          ...prev,
296          [idKeyValue]: [
297            ...selectedValues,
298            {
299              value: fieldValue2.id,
300              checked,
301              name,
302              id: fieldValue2.id,
303              title: fieldValue2.name
304            }
305          ]
306        };
307        return prevState;
308      } else {
309        let itemWIthOutCheckedITem = prev[idKeyValue].filter((item) => item ? item.id !== fieldValue2.id : []);
310        let prevState = {
311          ...prev,
312          [idKeyValue]: [
313            ...itemWIthOutCheckedITem
314          ]
315        };
316        return prevState;
317      }
318    });
319  };
320  const handleResetFilters = (filterName) => {
321    const mainFilterValues = [
322      "secondaryEducationIds",
323      "curriculumIds",
324      "academicYearIds",
325      "subjectAreaIds"
326    ];
327    setFieldValue((prev) => {
328      let newState = { ...prev };
329      for (const key in newState) {
330        if (filterName === "main" && mainFilterValues.includes(key)) {
331          delete newState[key];
332        }
333        if (filterName === "weiterFilter" && !mainFilterValues.includes(key)) {
334          delete newState[key];
335        }
336      }
337      return newState;
338    });
339  };
340  return /* @__PURE__ */ React.createElement(import_remix_validated_form.ValidatedForm, {
341    formRef,
342    className: "pb-10",
343    validator,
344    method: "get",
345    defaultValues: defaultValuesMainForm
346  }, /* @__PURE__ */ React.createElement("div", {
347    id: "main_filter"
348  }, /* @__PURE__ */ React.createElement("div", {
349    className: "section-wrapper"
350  }, !articleId ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", {
351    className: "mt-4 md:pb-4 md:pt-4"
352  }, /* @__PURE__ */ React.createElement(tabs_default, {
353    tabs,
354    onSelect: setCurrent,
355    current: current.id,
356    counter: 0
357  })), /* @__PURE__ */ React.createElement(search_box_default, {
358    formAction,
359    query,
360    setSearchQuery,
361    isLandingPage: false
362  }), /* @__PURE__ */ React.createElement("div", {
363    className: "flex w-full flex-col justify-between lg:mt-4 lg:flex-row lg:items-center"
364  }, /* @__PURE__ */ React.createElement("div", {
365    className: "order-last mt-4 flex md:mt-0 lg:order-first lg:block lg:border-0"
366  }, /* @__PURE__ */ React.createElement("span", {
367    className: "ml-2 font-bold text-textColor-light md:ml-0"
368  }

368, totalEntries, " Medien")), /* @__PURE__ */ React.createElement("div", {
369    className: "flex w-full flex-row md:w-auto md:justify-end"
370  }, /* @__PURE__ */ React.createElement("button", {
371    type: "button",
372    onClick: () => setMainFilteropen(!MainFilteropen),
373    className: class_names_default("group relative flex w-full px-5 text-xs font-normal text-primary", base, navBar)
374  }, " ", /* @__PURE__ */ React.createElement(AdjustmentsHorizontalIcon_default, {
375    className: class_names_default("-ml-0.5 mr-2 h-3 w-3 group-hover:text-gray-500 md:h-5 md:w-5"),
376    "aria-hidden": "true"
377  }), /* @__PURE__ */ React.createElement("span", null, "Lehrplanfilter"), mainFilterCount > 0 && /* @__PURE__ */ React.createElement("span", {
378    className: "absolute top-0 right-0 block h-3 w-3 rounded-full bg-red-400 ring-2 ring-white"
379  })), /* @__PURE__ */ React.createElement("button", {
380    type: "button",
381    onClick: () => setWeiterFilter(!weiterFilterOpen),
382    className: class_names_default("group relative w-full px-5 text-xs font-normal text-primary lg:my-0 lg:ml-3", base, navBar)
383  }, /* @__PURE__ */ React.createElement("span", null, "Weitere Filter"), weiterFilterCount > 0 && /* @__PURE__ */ React.createElement("span", {
384    className: "absolute top-0 right-0 block h-3 w-3 rounded-full bg-red-400 ring-2 ring-white"
385  })), /* @__PURE__ */ React.createElement(slide_over_dialog_default, {
386    open: weiterFilterOpen,
387    toggle: setWeiterFilter,
388    size
389  }, /* @__PURE__ */ React.createElement("div", {
390    className: "opacity-1 flex h-full w-full flex-col divide-y divide-gray-200 rounded-r-3xl bg-white pt-2 shadow-xl blur-none"
391  }, /* @__PURE__ */ React.createElement("div", {
392    className: "flex min-h-0 flex-1 flex-col overflow-y-scroll py-6"
393  }, /* @__PURE__ */ React.createElement("div", {
394    className: "px-4 sm:px-6"
395  }, /* @__PURE__ */ React.createElement("div", {
396    className: "flex items-start justify-between"
397  }, /* @__PURE__ */ React.createElement("div", {
398    className: "text-lg font-bold text-gray-900"
399  }, "Medien filtern"), /* @__PURE__ */ React.createElement("div", {
400    className: "ml-3 flex h-7 items-center"
401  }, /* @__PURE__ */ React.createElement("button", {
402    type: "button",
403    className: "rounded-full bg-primary text-white focus:outline-none focus:ring-2 focus:ring-btnColor-secondary",
404    onClick: () => setWeiterFilter(false)
405  }, /* @__PURE__ */ React.createElement("span", {
406    className: "sr-only"
407  }, "Close panel"), /* @__PURE__ */ React.createElement(XMarkIcon_default, {
408    className: "h-6 w-6",
409    "aria-hidden": "true"
410  }))))), /* @__PURE__ */ React.createElement("div", {
411    className: "relative mt-6 flex-1 px-4 sm:px-6"
412  }, /* @__PURE__ */ React.createElement(WeiterFilter, {
413    setFieldValue: handleSetSearchFieldValue,
414    fieldsValue: fieldValue,
415    tagsList,
416    authorList: authors,
417    filterData: weiterFilterData
418  }))), /* @__PURE__ */ React.createElement("div", {
419    className: "flex justify-between px-4 py-4"
420  }, /* @__PURE__ */ React.createElement("button", {
421    type: "button",
422    onClick: () => handleResetFilters("weiterFilter"),
423    className: class_names_default(base, "rounded-none border-b border-b-textColor-primary pb-1 text-sm hover:border-b-btnColor-secondary")
424  }, "Alle Filter l\xF6schen"), /* @__PURE__ */ React.createElement(Link, {
425    to: formAction,
426    className: class_names_default("px-6 text-base font-bold text-white", base, color.secondary)
427  }, "Speichern"))))))) : /* @__PURE__ */ React.createElement("div", {
428    className: "mt-5"
429  }, " ", /* @__PURE__ */ React.createElement(Breadcrumb, null))), /* @__PURE__ */ React.createElement(Modal, {
430    open: MainFilteropen,
431    setOpen: setMainFilteropen,
432    title: "Medien nach Lehrpl\xE4nen finden"
433  }, /* @__PURE__ */ React.createElement(MainFilter, {
434    mobileFiltersOpen,
435    setMobileFiltersOpen,
436    action: formAction,
437    setOpen: setMainFilteropen,
438    fieldsValue: fieldValue,
439    setFieldValue: handleSetSearchFieldValue,
440    filterData: mainFilterData,
441    handleResetMainFilter: handleResetFilters
442  }

442)), /* @__PURE__ */ React.createElement(Outlet, {
443    context: dataui
444  }), /* @__PURE__ */ React.createElement("div", {
445    className: "mt-2 mb-2 flex w-full justify-center p-3"
446  }, /* @__PURE__ */ React.createElement("button", {
447    className: "whitespace-nowrap text-right text-sm text-gray-700",
448    ref,
449    disabled: !isStateItemshasNextPage || isFetchingNextPage
450  }, isFetchingNextPage && !articleId ? /* @__PURE__ */ React.createElement(spinner_default, null) : null))));
451}
452export {
453  ErrorBoundary2 as ErrorBoundary,
454  Main as default
455};
456//# sourceMappingURL=/build/routes/search/main-GWWLSBEE.js.map