From 29796f61c0a702ec7eb3b250acd42f9bf5c0b425 Mon Sep 17 00:00:00 2001
From: Junior <albertino-junior.lopes-livramento@vgregion.se>
Date: Wed, 28 Aug 2024 13:28:24 +0200
Subject: [PATCH] uppdaterat filter-tag

---
 src/app/filter-tag/filter-tag.component.html | 138 ++++++++++---------
 src/app/filter-tag/filter-tag.component.scss |  14 +-
 src/app/filter-tag/filter-tag.component.ts   |   8 +-
 3 files changed, 87 insertions(+), 73 deletions(-)

diff --git a/src/app/filter-tag/filter-tag.component.html b/src/app/filter-tag/filter-tag.component.html
index 9f1dcbb7..31584e3d 100644
--- a/src/app/filter-tag/filter-tag.component.html
+++ b/src/app/filter-tag/filter-tag.component.html
@@ -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">
@@ -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>
\ No newline at end of file
+</app-component-docs>
diff --git a/src/app/filter-tag/filter-tag.component.scss b/src/app/filter-tag/filter-tag.component.scss
index b4302d11..6dd24ee9 100644
--- a/src/app/filter-tag/filter-tag.component.scss
+++ b/src/app/filter-tag/filter-tag.component.scss
@@ -1,5 +1,7 @@
+@import "partials/_settings.sizes.scss";
+
 .list-row {
-  width: 500px; display: flex; 
+  width: 500px; display: flex;
 }
 
 .list-column {
@@ -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%;
+  }
+}
diff --git a/src/app/filter-tag/filter-tag.component.ts b/src/app/filter-tag/filter-tag.component.ts
index 683ffd77..2367586d 100644
--- a/src/app/filter-tag/filter-tag.component.ts
+++ b/src/app/filter-tag/filter-tag.component.ts
@@ -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  **********/