# Ausgangsstoffliste
TIP
Using Filter-Dropdown and Data Table (tbd).
Ausgangsstoffliste
PapierkorbEinträge filtern
Aktuellen Filter speichern
Gespeicherten Filter laden
hide code
<div class="h-flex h-space-between">
<h1>Ausgangsstoffliste</h1>
<a class="c-link -icon-left" href="#" title="Zum Papierkorb">
<span class="fa fa-trash"></span>
Papierkorb
</a>
</div>
<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-secondary 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>
</div>
<div class="h-flex m-t-xxl">
<button type="button" class="c-btn m-r-l -icon-left" title="Liste als PDF speichern">
<span class="fa fa-download"></span>
Liste speichern (PDF)
</button>
<button type="button" class="c-btn -icon-left -secondary" title="Liste drucken">
<span class="fa fa-print"></span>
Liste drucken
</button>
</div>