Skip to content

Commit

Permalink
uppdaterat filter-tag
Browse files Browse the repository at this point in the history
  • Loading branch information
@aljlo2
aljlo2 committed Aug 28, 2024
1 parent a785c2b commit 29796f6
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 73 deletions.
138 changes: 70 additions & 68 deletions src/app/filter-tag/filter-tag.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,84 +4,86 @@
<code>&lt;vgr-filter-tag&gt;</code> är avsedd att användas för att representera filter i en sökning. I kombination med
<code>&lt;vgr-filter-tag-group&gt;</code> kan filtren navigeras med piltangenterna.
</p>
<br>
<vgr-filter-tag>Filter</vgr-filter-tag>
<br>
<br>
<div class="oversikt">
<vgr-filter-tag>Aktiv</vgr-filter-tag>
<vgr-filter-tag [disabled]="true">Inaktiv</vgr-filter-tag>
</div>
<p>Förändras med tema:
<strong>ja</strong>
</p>
</div>
<div class="docs__examples">
<div style="margin-bottom: 20px">
<div><span style="font-weight: bold">Enkelt exempel</span> - den filtrerade texten finns i För- eller Efternamn.</div>
<vgr-input width="130px" style="display: inline-block; " #filterInput></vgr-input>
<vgr-button (click)="addFilter(filterInput.value)">Lägg till filter</vgr-button>
<vgr-button (click)="removeAllFilters()" style="margin-left: 20px;">Ta bort alla filter</vgr-button>
<vgr-button (click)="disableFilters()" style="margin-left: 20px;">{{disabled ? 'Aktivera' : 'Inaktivera'}} filtertaggar</vgr-button>
</div>
<div style="margin-bottom: 20px" *ngIf="filters.length">
<vgr-filter-tag-group>
<vgr-filter-tag *ngFor="let filter of filters" (remove)="filter.remove(filter)" [disabled]="filter.disabled">{{filter.text}}</vgr-filter-tag>
</vgr-filter-tag-group>
</div>
<ul>
<div *ngIf="filteredValues.length > 0" class="list-row">
<div class="list-column list-header">Förnamn</div>
<div class="list-column list-header">Efternamn</div>
<div style="margin: 20px 0;"><span style="font-weight: bold">Enkelt exempel</span> - skriv in text och tryck sedan på "lägg till filter" -knappen för att filtrera resultat i listan nedan.</div>
<div style="margin-left: 10px; margin-bottom: 30px;">
<div style="margin-bottom: 20px">
<vgr-input width="130px" style="display: inline-block; " #filterInput></vgr-input>
<vgr-button (click)="addFilter(filterInput.value)" style="margin-left: 20px;">Lägg till filter</vgr-button>
<vgr-button (click)="removeAllFilters()" buttonStyle="discreet" style="margin-left: 20px;"><vgr-icon icon="trash-alt" [solid]="true"></vgr-icon><span style="margin-left: 5px;">Rensa filtrering</span></vgr-button>
</div>
<div style="margin-bottom: 20px" *ngIf="filters.length">
<vgr-filter-tag-group>
<vgr-filter-tag *ngFor="let filter of filters" (remove)="filter.remove(filter)" [disabled]="filter.disabled">{{filter.text}}</vgr-filter-tag>
</vgr-filter-tag-group>
</div>
<li *ngFor="let value of filteredValues">
<div class="list-row">
<div class="list-column">{{value.firstName}}</div>
<div class="list-column">{{value.surname}}</div>
<ul>
<div *ngIf="filteredValues.length > 0" class="list-row">
<div class="list-column list-header">Förnamn</div>
<div class="list-column list-header">Efternamn</div>
</div>
</li>
</ul>
<br>
<div><span style="font-weight: bold">Avancerat exempel</span> - Filtrera på Namn (För- eller Efternamn) samt möjlighet att filtrera på minimiålder och kön.</div>
<form [formGroup]="advancedSearchForm" (ngSubmit)="advancedFilter()" novalidate>
<div style="margin-bottom: 20px">
<div style="display: flex; align-items: flex-end">
<div>
<div>Namn:</div>
<div>
<vgr-input formControlName="name"></vgr-input>
</div>
<li *ngFor="let value of filteredValues">
<div class="list-row">
<div class="list-column">{{value.firstName}}</div>
<div class="list-column">{{value.surname}}</div>
</div>
<div>
<div>Minimiålder:</div>
</li>
</ul>
</div>
<div style="margin: 20px 0;"><span style="font-weight: bold;">Avancerat exempel</span> - Filtrera på Namn (För- eller Efternamn) samt möjlighet att filtrera på minimiålder och kön.</div>
<div style="margin-left: 10px;">
<form [formGroup]="advancedSearchForm" (ngSubmit)="advancedFilter()" novalidate>
<div style="margin-bottom: 20px">
<div style="display: flex; align-items: flex-end">
<div style="margin-right: 20px;">
<div>Namn</div>
<div>
<vgr-input formControlName="name"></vgr-input>
</div>
</div>
<div style="margin-right: 20px;">
<div>Minimiålder</div>
<div>
<vgr-input formControlName="minimumAge" width="130px"></vgr-input>
</div>
</div>
<div>
<vgr-input formControlName="minimumAge" width="130px"></vgr-input>
<vgr-checkbox formControlName="women" [label]="'Kvinnor'" style="display: inline-block;"></vgr-checkbox>
<vgr-checkbox formControlName="men" [label]="'Män'" style="display: inline-block; margin-left: 10px;"></vgr-checkbox>
</div>
<vgr-button (click)="advancedFilter()" style="margin-left: 20px;">Filtrera</vgr-button>
<vgr-button (click)="removeAllAdvancedFilters()" buttonStyle="discreet" style="margin-left: 20px;"><vgr-icon icon="trash-alt" [solid]="true"></vgr-icon><span style="margin-left: 5px;">Rensa filtrering</span></vgr-button>
</div>
<div>
<vgr-checkbox formControlName="women" [label]="'Kvinnor'" style="display: inline-block;"></vgr-checkbox>
<vgr-checkbox formControlName="men" [label]="'Män'" style="display: inline-block; margin-left: 10px;"></vgr-checkbox>
</div>
<vgr-button (click)="advancedFilter()" style="margin-left: 20px;">Filtrera</vgr-button>
<vgr-button (click)="removeAllAdvancedFilters()" style="margin-left: 20px;">Ta bort alla filter</vgr-button>
</div>
</form>
<div style="margin-bottom: 20px" *ngIf="advancedFilterTags.length">
<vgr-filter-tag-group>
<vgr-filter-tag *ngFor="let tag of advancedFilterTags" (remove)="tag.remove()">{{tag.text}}</vgr-filter-tag>
</vgr-filter-tag-group>
</div>
</form>
<div style="margin-bottom: 20px" *ngIf="advancedFilterTags.length">
<vgr-filter-tag-group>
<vgr-filter-tag *ngFor="let tag of advancedFilterTags" (remove)="tag.remove()">{{tag.text}}</vgr-filter-tag>
</vgr-filter-tag-group>
</div>
<ul style="margin-bottom: 20px;">
<div *ngIf="advancedFilteredValues.length > 0" class="list-row">
<div class="list-column list-header">Förnamn</div>
<div class="list-column list-header">Efternamn</div>
<div class="list-column list-header">Ålder</div>
</div>
<li *ngFor="let value of advancedFilteredValues">
<div class="list-row">
<div class="list-column">{{value.firstName}}</div>
<div class="list-column">{{value.surname}}</div>
<div class="list-column">{{value.age}}</div>
<ul style="margin-bottom: 20px;">
<div *ngIf="advancedFilteredValues.length > 0" class="list-row">
<div class="list-column list-header">Förnamn</div>
<div class="list-column list-header">Efternamn</div>
<div class="list-column list-header">Ålder</div>
</div>
</li>
</ul>
<li *ngFor="let value of advancedFilteredValues">
<div class="list-row">
<div class="list-column">{{value.firstName}}</div>
<div class="list-column">{{value.surname}}</div>
<div class="list-column">{{value.age}}</div>
</div>
</li>
</ul>
</div>
</div>
<div class="docs__api">
<table class="property-table">
Expand Down Expand Up @@ -118,14 +120,14 @@
<td>focus()</td>
<td>Metod för att flytta fokus till komponenten</td>
<td>this.myFilterTag.focus()</td>
</tr>
</tr>
</table>
</div>
<div class="docs__wcag">
<p>
<code>&lt;vgr-filter-tag&gt;</code> har ett intern element av typen button och har alla dess WCAG egenskaper.
Default sätts <code>attr.aria-label</code> till "Ta bort filtrering [text]", där [text] är content för <code>&lt;vgr-filter-tag&gt;</code>.
<code>&lt;vgr-filter-tag&gt;</code> har ett intern element av typen button och har alla dess WCAG egenskaper.
Default sätts <code>attr.aria-label</code> till "Ta bort filtrering [text]", där [text] är content för <code>&lt;vgr-filter-tag&gt;</code>.
Om input variabeln [disabled] sätts till <code>true</code> sätts även <code> aria.aria-disabled</code> till <code>true</code>
</p>
</div>
</app-component-docs>
</app-component-docs>
14 changes: 13 additions & 1 deletion src/app/filter-tag/filter-tag.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@import "partials/_settings.sizes.scss";

.list-row {
width: 500px; display: flex;
width: 500px; display: flex;
}

.list-column {
Expand All @@ -9,3 +11,13 @@
.list-header {
font-weight: bold;
}

.oversikt {
margin: 20px 0;
display: flex;
justify-content: space-between;
width: 20%;
@media screen and (min-width: $desktop-width--medium) {
width: 22%;
}
}
8 changes: 4 additions & 4 deletions src/app/filter-tag/filter-tag.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,10 +87,10 @@ export class FilterTagComponent implements OnInit {
}
}

disableFilters() {
this.disabled = !this.disabled;
this.filters.forEach(x => x.disabled = this.disabled);
}
// disableFilters() {
// this.disabled = !this.disabled;
// this.filters.forEach(x => x.disabled = this.disabled);
// }

/********** Advanced example withe reactive forms **********/

Expand Down

0 comments on commit 29796f6

Please sign in to comment.