Add extension file in format fields

src/app/components/formats/edit/format-form.component.html

@@ -30,6 +30,19 @@
         </div>
       </div>
 
+      <div class="field">
+        <label class="label required" for="fileExtension">Extension de fichier</label>
+        <div class="control">
+          <input class="input" type="text" [value]="format.fileExtension" formControlName="fileExtension"
+            id="fileExtension">
+        </div>
+        <div *ngIf="fileExtension.invalid && (fileExtension.dirty || fileExtension.touched)" class="alert alert-danger">
+          <p *ngIf="fileExtension.errors['required']" class="help is-danger">
+            L'extension de ficher est obligatoire.
+          </p>
+        </div>
+      </div>
+
       <div class="has-text-right">
         <button class="button button-gl" type="submit" [disabled]="formInvalid == true">Valider</button>
       </div>

src/app/components/formats/edit/format-form.component.ts

@@ -45,6 +45,7 @@ export class FormatFormComponent implements OnInit {
       id: [this.format.id],
       name: [this.format.name, Validators.required],
       mapServerType: [this.format.mapServerType, Validators.required],
+      fileExtension: [this.format.fileExtension, Validators.required],
     });
   }
 
@@ -72,6 +73,10 @@ export class FormatFormComponent implements OnInit {
     return this.form.controls['mapServerType'];
   }
 
+  get fileExtension() {
+    return this.form.controls['fileExtension'];
+  }
+
   get formInvalid() {
     return this.form.invalid;
   }

src/app/components/formats/list/formats.component.html

@@ -38,7 +38,23 @@
             MapServer</span>
         </span>
       </div>
-      <div class="column is-offset-7 is-1 has-text-centered">
+      <div class="column is-2">
+        <span (click)="sortBy('fileExtension')" class="is-sortable">
+          <span class="sort-icons">
+            <span class="icon">
+              <i class="fas fa-sort-up"
+                [ngClass]="{'icon-red': sortOptions.value === 'fileExtension' && sortOptions.order === 'desc'}"></i>
+            </span>
+            <span class="icon">
+              <i class="fas fa-sort-down"
+                [ngClass]="{'icon-red': sortOptions.value === 'fileExtension' && sortOptions.order === 'asc'}"></i>
+            </span>
+          </span>
+          <span class="column-title" [ngClass]="{'active': sortOptions.value === fileExtension}">Extension de
+            fichier</span>
+        </span>
+      </div>
+      <div class="column is-offset-5 is-1 has-text-centered">
         <span class="column-title">Actions</span>
       </div>
     </div>
@@ -51,7 +67,10 @@
         <div class="column is-2">
           <span>{{ format.mapServerType}}</span>
         </div>
-        <div class="column is-offset-7 is-1 has-text-centered actions">
+        <div class="column is-2">
+          <span>{{ format.fileExtension}}</span>
+        </div>
+        <div class="column is-offset-5 is-1 has-text-centered actions">
           <app-crud-buttons [id]="format.id" (delete)="displayDeletePopup($event)"></app-crud-buttons>
         </div>
       </div>

src/app/models/format.model.ts

@@ -2,6 +2,7 @@ export class Format {
   id?: number;
   name: string;
   mapServerType: string;
+  fileExtension: string;
 
   constructor(format?: IFormat) {
     if (format) {
@@ -10,9 +11,11 @@ export class Format {
       }
       this.name = format.name;
       this.mapServerType = format.mapServerType;
+      this.fileExtension = format.fileExtension;
     } else {
       this.name = '';
       this.mapServerType = '';
+      this.fileExtension = '';
     }
   }
 }
@@ -31,4 +34,5 @@ export interface IFormat {
   id: number;
   name: string;
   mapServerType: string;
+  fileExtension: string;
 }