Stickers adding sticker support for entitities

src/app/pages/users/user/miscs/user-miscs.component.html

@@ -1,21 +1,29 @@
-<div class="row">
-  <div class="col-md-6">
-    <div class="form-group">
-      <mat-form-field>
-        <input [formControl]="iNumber" matInput
-          placeholder="{{'users.inumber' | translate}}" type="text">
-      </mat-form-field>
+<div>
+  <div class="row">
+    <div class="col-md-6">
+      <div class="form-group">
+        <mat-form-field>
+          <input [formControl]="iNumber" matInput
+            placeholder="{{'users.inumber' | translate}}" type="text">
+        </mat-form-field>
+      </div>
+    </div>
+    <div class="col-md-6">
+      <div class="form-group">
+        <mat-form-field>
+          <input [formControl]="costCenter" matInput
+            placeholder="{{'users.cost_center' | translate}}" type="text">
+          <mat-error *ngIf="costCenter.errors?.pattern">
+            {{"general.invalid_value" | translate}}
+          </mat-error>
+        </mat-form-field>
+      </div>
     </div>
   </div>
-  <div class="col-md-6">
-    <div class="form-group">
-      <mat-form-field>
-        <input [formControl]="costCenter" matInput
-          placeholder="{{'users.cost_center' | translate}}" type="text">
-        <mat-error *ngIf="costCenter.errors?.pattern">
-          {{"general.invalid_value" | translate}}
-        </mat-error>
-      </mat-form-field>
+  <div class="row">
+    <div class="col-md-12">
+      <app-stickers></app-stickers>
     </div>
   </div>
 </div>
+

src/app/pages/users/users.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
+import { StickersModule } from 'shared/stickers/stickers.module';
 
 import { MaterialModule } from '../../app.module';
 import { AddressModule } from '../../shared/address/address.module';
@@ -50,6 +51,7 @@ import { UserRoutes } from './users.routing';
     DialogsModule,
     CommonDirectivesModule,
     FormattersModule,
+    StickersModule,
   ],
   declarations: [
     UserStatusFormatterComponent,

src/app/shared/stickers/stickers.component.html

@@ -0,0 +1,18 @@
+<div>
+  <mat-form-field appearance="none">
+    <mat-chip-list #chipList aria-label="Stickers" class="chip-list">
+      <mat-chip *ngFor="let sticker of stickers" (removed)="remove(sticker)" class="single-chip">
+        {{sticker}}
+        <button matChipRemove>
+          <mat-icon>cancel</mat-icon>
+        </button>
+      </mat-chip>
+    </mat-chip-list>
+  </mat-form-field>
+  <mat-form-field class="example-chip-list" appearance="fill">
+    <mat-label>Stickers</mat-label>
+    <input matInput [placeholder]="placeholderText"
+            [(ngModel)]="newSticker"
+            (keyup.enter)="add()"/>
+  </mat-form-field>
+</div>

src/app/shared/stickers/stickers.component.scss

@@ -0,0 +1,8 @@
+.single-chip {
+  margin-right: 5px !important;
+  min-width: 5px !important;
+}
+
+.chip-list .mat-chip-list-wrapper {
+  justify-content: left !important;
+}

src/app/shared/stickers/stickers.component.ts

@@ -0,0 +1,38 @@
+import {COMMA, ENTER} from '@angular/cdk/keycodes';
+import { Component } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-stickers',
+  templateUrl: 'stickers.component.html',
+  styleUrls: ['stickers.component.scss']
+})
+export class StickersComponent {
+  public stickers: string[] = ['VIP', 'ZEN'];
+  public newSticker = '';
+  public readonly separatorKeysCodes = [ENTER, COMMA] as const;
+  public placeholderText = '';
+
+  public constructor(
+    public translateService: TranslateService
+  ) {
+    this.placeholderText = this.translateService.instant('general.add_new_sticker');
+  }
+
+  public add(): void {
+    if (this.newSticker) {
+      console.log(this.newSticker);
+      this.stickers.push(this.newSticker);
+    }
+    console.log(this.stickers);
+    this.newSticker = '';
+  }
+
+  public remove(sticker: string): void {
+    const index = this.stickers.indexOf(sticker);
+
+    if (index >= 0) {
+      this.stickers.splice(index, 1);
+    }
+  }
+}

src/app/shared/stickers/stickers.module.ts

@@ -0,0 +1,25 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { MaterialModule } from '../../app.module';
+import { StickersComponent } from './stickers.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    FormsModule,
+    TranslateModule,
+    MaterialModule,
+  ],
+  declarations: [
+    StickersComponent,
+  ],
+  exports: [
+    StickersComponent,
+  ],
+})
+export class StickersModule {
+}

src/assets/i18n/cs.json

@@ -160,6 +160,7 @@
     "invalid_file_error": "Poskytnutý soubor je neplatný",
     "invalid_file_csv_header_error": "Přinejmenším jedno z požadovaných záhlaví není poskytnuto v souboru CSV, akce byla přerušena",
     "import_already_ongoing": "Během importu nelze nahrát karty/čipy",
+    "add_new_sticker": "Type here to add new sticker",
     "menu": {
       "dashboard": "Ovládací panel",
       "charging_stations": "Nabíjecí stanice",

src/assets/i18n/de.json

@@ -160,6 +160,7 @@
     "invalid_file_error": "Die bereitgestellte Datei ist ungültig",
     "invalid_file_csv_header_error": "Mindestens ein erforderlicher Header wurde nicht in der CSV-Datei bereitgesellt, der Vorgang wurde abgebrochen.",
     "import_already_ongoing": "Badges können nicht hochgeladen werden, während ein Import stattfindet",
+    "add_new_sticker": "Type here to add new sticker",
     "menu": {
       "dashboard": "Dashboard",
       "charging_stations": "Ladestationen",

src/assets/i18n/en.json

@@ -160,6 +160,7 @@
     "invalid_file_error": "The provided file is invalid",
     "invalid_file_csv_header_error": "At least one of the required header was not provided in the CSV file, operation has been aborted",
     "import_already_ongoing": "Cannot upload the RFID cards while an import is ongoing",
+    "add_new_sticker": "Type here to add new sticker",
     "menu": {
       "dashboard": "Dashboard",
       "charging_stations": "Charging Stations",

src/assets/i18n/es.json

@@ -160,6 +160,7 @@
     "invalid_file_error": "El archivo es inválido",
     "invalid_file_csv_header_error": "Al menos uno de los campos requeridos no fue proporcionado en el archivo CSV, operación anulada",
     "import_already_ongoing": "Impossibile cargar las insignias durante el proceso de importación",
+    "add_new_sticker": "Type here to add new sticker",
     "menu": {
       "dashboard": "Tablero",
       "charging_stations": "Estaciones de carga",

src/assets/i18n/fr.json

@@ -160,6 +160,7 @@
     "invalid_file_error": "Le fichier fourni est invalide",
     "invalid_file_csv_header_error": "Au moins un des champs obligatoire n'a pas été fourni dans l'en-tête du fichier CSV, l'opération a été annulée",
     "import_already_ongoing": "Impossible de transférer les badges pendant qu'un import est en cours",
+    "add_new_sticker": "Type here to add new sticker",
     "menu": {
       "dashboard": "Tableau de bord",
       "charging_stations": "Bornes",

src/assets/i18n/it.json

@@ -160,6 +160,7 @@
     "invalid_file_error": "Il file non è valido",
     "invalid_file_csv_header_error": "Almeno uno dei campi obbligatori non è stato aggiunto nel file CSV, l'operazione è stata annullata",
     "import_already_ongoing": "Impossibile caricare un badge se un caricamento è già in corso",
+    "add_new_sticker": "Type here to add new sticker",
     "menu": {
       "dashboard": "Cruscotto",
       "charging_stations": "Stazioni di Ricarica",

src/assets/i18n/pt.json

@@ -160,6 +160,7 @@
     "invalid_file_error": "The provided file is invalid",
     "invalid_file_csv_header_error": "At least one of the required header was not provided in the CSV file, operation has been aborted",
     "import_already_ongoing": "Cannot upload the badges while an import is ongoing",
+    "add_new_sticker": "Type here to add new sticker",
     "menu": {
       "dashboard": "Painel de Controlo",
       "charging_stations": "Estações de Carga",