Filter-Dropdown
Einträge filtern
Aktuellen Filter speichern
Gespeicherten Filter laden
html
<div class="h-border h-border-radius h-box-shadow--decent m-b-l" id="al-filter">
<div class="h-flex h-stretch">
<div class="p-m p-r-reset">
<div class="h-inline-block h-pos-relative">
<button
type="button"
class="c-btn -primarylight -dropdown -filter -redesign js-collapse"
role="tab"
data-toggle="collapse"
data-target="#al-filter-dropdown"
aria-controls="al-filter"
>
<span class="fa fa-sliders-h" ></span>
<span class="c-btn__text">
Tabelle filtern
</span>
</button>
</div>
</div>
<div class="h-width-100 p-m">
<div id="ausgangsstoffliste-table_filter" class="c-float-container -has-input -has-btn -has-icon m-y-reset" data-activate-btn data-min-amount="2">
<button type="button" class="c-float-container__icon -clear js-search-clear" aria-controls="search-input">
<span class="far fa-times" ></span>
</button>
<label class="c-label -redesign" for="search-input">Tabelle durchsuchen nach ...</label>
<input
type="search"
class="c-input -icon js-search js-common-search"
aria-controls="ausgangsstoffliste-table"
id="search-input"
name="search"
value=""
>
<button type="submit" class="c-btn -square-btn -primary -input -redesign js-filter-load" disabled title="Suchen">
<span class="fa fa-search" ></span>
</button>
</div>
</div>
</div>
<div class="c-collapse h-pos-relative h-fullwidth" aria-expanded="false" id="al-filter-dropdown" role="tabpanel">
<div class="h-bg-color p-t-l p-b-xl p-x-l">
<div class="h-flex">
<div class="h-width-50 p-r-m">
<h5>Einträge filtern</h5>
<div class="c-float-container -has-autocomplete -has-icon -light m-t-s">
<div class="c-float-container__icon">
<span class="far fa-search" ></span>
</div>
<label class="c-label -redesign" for="al-filter-stoffname">Stoffname</label>
<input
type="text"
class="c-input -autocomplete -redesign js-stoffname-input"
data-placeholder="Nach Stoffname suchen ..."
id="al-filter-stoffname"
name=""
value=""
>
</div>
<div class="c-float-container -has-select -light">
<label class="c-label -redesign js-lagerartikel-select" for="lagerartikel">Lagerartikel</label>
<select class="js-select2 c-select -light -redesign js-lagerartikel-select" id="lagerartikel" name="lagerartikel">
<option value="—">
Alle Artikel
</option>
<option value="1">
Nur Lagerartikel
</option>
<option value="0">
Keine Lagerartikel
</option>
</select>
</div>
<div class="c-float-container -has-select -light">
<label class="c-label -redesign js-lager-select" for="lagerort">Lagerorte</label>
<select class="js-select2 c-select -light -redesign js-lagerort-select" id="lagerort" name="lagerort">
<option value="—">
—
</option>
</select>
</div>
<div class="h-flex c-float-container-group">
<div class="c-float-container -light m-t-reset -has-datepicker -has-icon">
<div class="c-float-container__icon">
<span class="far fa-calendar" ></span>
</div>
<label class="c-label -redesign " for="verwendbar-from-date">Verwendbar von...</label>
<input
type="text"
class="c-input -icon -redesign js-verwendbar js-verwendbar-from-date js-datepicker datepicker"
onkeydown="false"
id="verwendbar-from-date"
name="verwendbar-from-date"
value=""
>
</div>
<div class="c-float-container -light m-t-reset -has-datepicker">
<label class="c-label -redesign " for="verwendbar-to-date">bis...</label>
<input
type="text"
class="c-input -icon -redesign js-verwendbar js-verwendbar-to-date js-datepicker datepicker"
onkeydown="false"
id="verwendbar-to-date"
name="verwendbar-to-date"
value=""
>
</div>
</div>
<div class="h-flex c-float-container-group">
<div class="c-float-container -light m-y-reset -has-datepicker -has-icon">
<div class="c-float-container__icon">
<span class="far fa-calendar" ></span>
</div>
<label class="c-label -redesign " for="pruefdatum-from-date">Prüfdatum von...</label>
<input
type="text"
class="c-input -icon -redesign js-pruefdatum js-pruefdatum-from-date js-datepicker datepicker"
onkeydown="false"
id="pruefdatum-from-date"
name="pruefdatum-from-date"
value=""
>
</div>
<div class="c-float-container -light m-y-reset -has-datepicker">
<label class="c-label -redesign " for="pruefdatum-to-date">bis...</label>
<input
type="text"
class="c-input -icon -redesign js-pruefdatum js-pruefdatum-to-date js-datepicker datepicker"
onkeydown="false"
id="pruefdatum-to-date"
name="pruefdatum-to-date"
value=""
>
</div>
</div>
</div>
<div class="h-width-50 p-l-m h-flex h-flex-column">
<h5>Aktuellen Filter speichern</h5>
<div class="c-float-container -has-input -light -has-btn m-t-s" data-activate-btn data-min-amount="3">
<label class="c-label -redesign" for="al-new-filter-name">Name des Filters</label>
<input
type="text"
class="c-input -light -icon -redesign js-ausgangsstoffliste-filtername"
minlength="3"
maxlength="30"
data-placeholder="Name eingeben"
id="al-new-filter-name"
name=""
value=""
>
<button
type="submit"
class="c-btn -square-btn -primary -input -redesign js-tooltip js-filter-save"
disabled
data-spinner
title="Filter speichern"
>
<span class="fa fa-save" ></span>
</button>
</div>
<div class="m-t-auto h-bg-color-white h-border-radius-large p-y-m p-x-m">
<h5 class="m-t-xs">
Gespeicherten Filter laden
</h5>
<div class="c-float-container -has-icon -has-btn -has-select -is-active m-t-s">
<div class="c-float-container__icon">
<span class="far fa-sliders-h" ></span>
</div>
<label class="c-label -redesign" for="al-filter-auswahl">Filter auswählen</label>
<select class="js-select2 c-select -redesign js-saved-filters" id="al-filter-auswahl" name="filter-auswahl" ></select>
<button
type="button"
class="c-btn -square-btn -primary -input -redesign js-tooltip js-filter-delete"
title="Ausgewählten Filter löschen"
data-spinner
>
<span class="fa fa-trash" ></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>