ihk24/gfi-ihk-2024/stories/components/search-form/SearchFormComponent.js

import './search-form.scss';
import $ from 'jquery';
import {createElement} from "../../_global/scripts/helpers";
import {createSearchInput} from "../../atoms/search-input/SearchInputComponent";
import {createSearchButton} from "../../atoms/search-button/SearchButtonComponent";
import {createFormElement} from "../form-element/FormElementComponent";
import {SearchTargetGroups} from "./SearchFormData";
import {createButton} from "../../atoms/button/ButtonComponent";
import IHKExtendedSearch from "./search-form";
import {createCheckboxGroup} from "../checkbox-group/CheckboxGroupComponent";

export const createSearchForm = ({
  isExtended = false,
}) => {
  const form = createElement('form', ['search-filter-form']);
  form.id = 'search-form';
  form.onsubmit = 'return false';

  const wrapper = createElement('div', ['search-results-search'], null, form);
  createElement('h2', [], isExtended ? 'Veranstaltungen' : 'Suche', wrapper);
  const fieldset = createElement('fieldset', [], null, wrapper);
  createElement('legend', ['visuallyhidden'], 'Suche', fieldset);

  fieldset.appendChild(createSearchInput({
    placeholder: 'Ihr Suchbegriff oder Nummer',
    id: 'query',
  }))
  fieldset.appendChild(createSearchButton({}));

  if (isExtended) {
    const toggleActions = createElement('div', ['toggle-actions'], null, wrapper);
    const expandButton = createButton({
      label: 'ERWEITERTE SUCHE',
      icon: 'plus',
      iconPosition: 'icon-left',
      size: 'small',
    });
    expandButton.id = 'search-expand-collapse';
    expandButton.ariaLabel = 'Suchen';
    toggleActions.appendChild(expandButton);
    wrapper.appendChild(createFormElement({
      inputType: 'checkbox',
      label: 'ODER-Suche',
      name: 'abfragemodus',
      wrapperClasses: 'extend-left',
    }))

    const extendedWrapper = createElement('div', ['extended-search'], null, form);
    extendedWrapper.ariaHidden = true;
    extendedWrapper.dataset.showExtendedSearch = 'false';

    const inputRow = createElement('div', ['input-row'], null, extendedWrapper);
    inputRow.appendChild(createFormElement({
      inputType: 'checkbox',
      label: 'Nur kostenfreie Veranstaltungen',
      wrapperClasses: 'input-wrapper',
      name: 'nur-kostenfreie',
    }))
    inputRow.appendChild(createFormElement({
      inputType: 'checkbox',
      label: 'Nur buchbare Termine',
      wrapperClasses: 'input-wrapper',
      name: 'nur-buchbare',
    }))

    extendedWrapper.appendChild(createSearchFormButton('Zielgruppe wählen'));
    const targetWrapper = createElement('div', ['ev-filter', 'ev-items'], null, extendedWrapper);
    const targets = SearchTargetGroups;
    targets.map((target, index) => {
      targetWrapper.appendChild(createFormElement({
        inputType: 'checkbox',
        label: target,
        name: 'target-' + index,
        wrapperClasses: 'ev-filter-wrapper',
      }))
    });

    extendedWrapper.appendChild(createSearchFormButton('Zeitraum wählen'));
    const timeWrapper = createElement('div', ['ev-filter'], null, extendedWrapper);
    const timeRow = createElement('div', ['row'], null, timeWrapper);
    timeRow.appendChild(createFormElement({
      wrapperClasses: 'ev-filter-wrapper data col-sm-3',
      name: 'von-datum',
      label: 'Von',
      inputType: 'date',
    }));
    timeRow.appendChild(createFormElement({
      wrapperClasses: 'ev-filter-wrapper data col-sm-3',
      name: 'bis-datum',
      label: 'Bis',
      inputType: 'date',
    }))

    extendedWrapper.appendChild(createSearchFormButton('Ort / Region wählen'));
    const placeWrapper = createElement('div', ['ev-filter'], null, extendedWrapper);
    const placeRow = createElement('div', ['row'], null, placeWrapper);
    const radiusRow = createElement('div', ['row'], null, placeWrapper);
    placeRow.appendChild(createFormElement({
      wrapperClasses: 'ev-filter-wrapper location col-sm-3',
      name: 'plzort',
      label: 'PLZ',
      inputType: 'number',
    }));
    placeRow.appendChild(createFormElement({
      wrapperClasses: 'ev-filter-wrapper location col-sm-6',
      name: 'ort',
      label: 'Bis',
    }))
    radiusRow.appendChild(createFormElement({
      wrapperClasses: 'ev-filter-wrapper location col-sm-9',
      name: 'bis-datum',
      label: 'Umkreis',
      inputType: 'select',
      placeholder: ' ',
      selectOptions: [
        {label: '1 km', value: '1'},
        {label: '5 km', value: '5'},
        {label: '10 km', value: '10'},
        {label: '20 km', value: '20'},
        {label: '50 km', value: '50'},
      ]
    }))

    extendedWrapper.appendChild(createSearchFormButton('Kategorie wählen'));
    const categoryWrapper = createElement('div', ['ev-filter', 'ev-items'], null, extendedWrapper);
    categoryWrapper.appendChild(createCheckboxGroup({}))
    categoryWrapper.appendChild(createCheckboxGroup({
      title: 'Innovation und Umwelt',
      namespace: 'innovation',
      items: ['E-Business / IuK-Wirtschaft', 'Energie und Umweltschutz', 'Energiefragen', 'Innovations- / Technologieberatung', 'Potentiale', 'Profile', 'Umwelt']
    }))
    categoryWrapper.appendChild(createCheckboxGroup({
      title: 'Recht und Fair Play',
      namespace: 'law',
      items: [
        'Arbeitsrecht',
        'Handels- und Gewerberecht',
        'Steuerrecht',
        'Wettbewerbsrecht',
      ]
    }))

    extendedWrapper.appendChild(createSearchFormButton('Veranstaltungsart wählen'));
    const typeWrapper = createElement('div', ['ev-filter', 'ev-items'], null, extendedWrapper);
    const types = SearchTargetGroups;
    types.map((typ, index) => {
      typeWrapper.appendChild(createFormElement({
        inputType: 'checkbox',
        label: typ,
        name: 'type-' + index,
        wrapperClasses: 'ev-filter-wrapper',
      }))
    });

    const btnWrapper = createElement('div', ['btn-wrapper'], null, extendedWrapper);
    const resetLink = createElement('a', ['reset'], 'Suchkriterien zurücksetzen', btnWrapper);
    resetLink.role = 'button';
    resetLink.href = '#';
    resetLink.id = 'search-reset';
    const submitButton = createButton({
      elementType: 'button',
      label: 'Suche starten',
      color: 'secondary',
      icon: 'suche',
      iconPosition: 'icon-right',
    })
    submitButton.type = 'submit';
    btnWrapper.appendChild(submitButton);

    $(document).ready(() => {
      new IHKExtendedSearch($(extendedWrapper));
    })
  }

  return form;
}

function createSearchFormButton(title) {
  const btn = createElement('div', ['ev-search-btn'], title);
  btn.role = 'button';
  btn.ariaPressed = false;
  btn.tabIndex = 0;
  return btn;
}