build: Use prettier for html

Stop ignoring html files in prettier and fix existing issues.

src/app/system/external-services/amazon-s3/amazon-s3.component.html

@@ -1,27 +1,23 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
 </div>
 
 <div class="container mat-elevation-z8">
-
   <table mat-table [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.name' | translate}} </th>
-      <td mat-cell *matCellDef="let configuration"> {{ configuration.name | translateKey:'inputs' }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+      <td mat-cell *matCellDef="let configuration">{{ configuration.name | translateKey: 'inputs' }}</td>
     </ng-container>
 
     <ng-container matColumnDef="value">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Value' | translate}} </th>
-      <td mat-cell *matCellDef="let configuration"> {{ getConfigurationValue(configuration) }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Value' | translate }}</th>
+      <td mat-cell *matCellDef="let configuration">{{ getConfigurationValue(configuration) }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
-
 </div>

src/app/system/external-services/amazon-s3/edit-amazon-s3/edit-amazon-s3.component.html

@@ -1,58 +1,71 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="amazonS3ConfigurationForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{'labels.inputs.S3 Bucket Name' | translate}}</mat-label>
-            <input matInput required formControlName="s3_bucket_name">
+            <mat-label>{{ 'labels.inputs.S3 Bucket Name' | translate }}</mat-label>
+            <input matInput required formControlName="s3_bucket_name" />
             <mat-error *ngIf="amazonS3ConfigurationForm.controls.s3_bucket_name.hasError('required')">
-              {{'labels.inputs.S3 Bucket Name' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.S3 Bucket Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.S3 Access Key' | translate}}</mat-label>
-            <input matInput required type="{{ accessKeyInputType }}" formControlName="s3_access_key">
-            <button mat-button *ngIf="amazonS3ConfigurationForm.controls.s3_access_key.value" matSuffix mat-icon-button
-              (mousedown)="accessKeyInputType = 'text'" (mouseup)="accessKeyInputType = 'password'">
+            <mat-label>{{ 'labels.inputs.S3 Access Key' | translate }}</mat-label>
+            <input matInput required type="{{ accessKeyInputType }}" formControlName="s3_access_key" />
+            <button
+              mat-button
+              *ngIf="amazonS3ConfigurationForm.controls.s3_access_key.value"
+              matSuffix
+              mat-icon-button
+              (mousedown)="accessKeyInputType = 'text'"
+              (mouseup)="accessKeyInputType = 'password'"
+            >
               <fa-icon *ngIf="accessKeyInputType === 'password'" icon="eye"></fa-icon>
               <fa-icon *ngIf="accessKeyInputType === 'text'" icon="eye-slash"></fa-icon>
             </button>
             <mat-error *ngIf="amazonS3ConfigurationForm.controls.s3_access_key.hasError('required')">
-              {{'labels.inputs.S3 Access Key' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.S3 Access Key' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.S3 Secret Key' | translate}}</mat-label>
-            <input matInput required type="{{ secretKeyInputType }}" formControlName="s3_secret_key">
-            <button mat-button *ngIf="amazonS3ConfigurationForm.controls.s3_secret_key.value" matSuffix mat-icon-button
-              (mousedown)="secretKeyInputType = 'text'" (mouseup)="secretKeyInputType = 'password'">
+            <mat-label>{{ 'labels.inputs.S3 Secret Key' | translate }}</mat-label>
+            <input matInput required type="{{ secretKeyInputType }}" formControlName="s3_secret_key" />
+            <button
+              mat-button
+              *ngIf="amazonS3ConfigurationForm.controls.s3_secret_key.value"
+              matSuffix
+              mat-icon-button
+              (mousedown)="secretKeyInputType = 'text'"
+              (mouseup)="secretKeyInputType = 'password'"
+            >
               <fa-icon *ngIf="secretKeyInputType === 'password'" icon="eye"></fa-icon>
               <fa-icon *ngIf="secretKeyInputType === 'text'" icon="eye-slash"></fa-icon>
             </button>
             <mat-error *ngIf="amazonS3ConfigurationForm.controls.s3_secret_key.hasError('required')">
-              {{'labels.inputs.S3 Secret Key' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.S3 Secret Key' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!amazonS3ConfigurationForm.valid || amazonS3ConfigurationForm.pristine">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!amazonS3ConfigurationForm.valid || amazonS3ConfigurationForm.pristine"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/system/external-services/email/edit-email/edit-email.component.html

@@ -1,81 +1,91 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="emailConfigurationForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Username' | translate}}</mat-label>
-            <input matInput required formControlName="username">
+            <mat-label>{{ 'labels.inputs.Username' | translate }}</mat-label>
+            <input matInput required formControlName="username" />
             <mat-error *ngIf="emailConfigurationForm.controls.username.hasError('required')">
-              {{'labels.inputs.Username' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Username' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Password' | translate}}</mat-label>
-            <input matInput required type="{{ passwordInputType }}" formControlName="password">
-            <button mat-button *ngIf="emailConfigurationForm.controls.password.value" matSuffix mat-icon-button
-              (mousedown)="passwordInputType = 'text'" (mouseup)="passwordInputType = 'password'">
+            <mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
+            <input matInput required type="{{ passwordInputType }}" formControlName="password" />
+            <button
+              mat-button
+              *ngIf="emailConfigurationForm.controls.password.value"
+              matSuffix
+              mat-icon-button
+              (mousedown)="passwordInputType = 'text'"
+              (mouseup)="passwordInputType = 'password'"
+            >
               <fa-icon *ngIf="passwordInputType === 'password'" icon="eye"></fa-icon>
               <fa-icon *ngIf="passwordInputType === 'text'" icon="eye-slash"></fa-icon>
             </button>
             <mat-error *ngIf="emailConfigurationForm.controls.password.hasError('required')">
-              {{'labels.inputs.Password' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Password' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Host' | translate}}</mat-label>
-            <input matInput required formControlName="host">
+            <mat-label>{{ 'labels.inputs.Host' | translate }}</mat-label>
+            <input matInput required formControlName="host" />
             <mat-error *ngIf="emailConfigurationForm.controls.host.hasError('required')">
-              {{'labels.inputs.Host' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Host' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Port' | translate}}</mat-label>
-            <input matInput type="number" required formControlName="port">
+            <mat-label>{{ 'labels.inputs.Port' | translate }}</mat-label>
+            <input matInput type="number" required formControlName="port" />
             <mat-error *ngIf="emailConfigurationForm.controls.port.hasError('required')">
-              {{'labels.inputs.Port' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Port' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="useTLS" class="margin-v">
-            {{'labels.inputs.Use TLS' | translate}}?
+            {{ 'labels.inputs.Use TLS' | translate }}?
           </mat-checkbox>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.From Email' | translate}}</mat-label>
-            <input matInput type="email" required formControlName="fromEmail">
+            <mat-label>{{ 'labels.inputs.From Email' | translate }}</mat-label>
+            <input matInput type="email" required formControlName="fromEmail" />
             <mat-error *ngIf="emailConfigurationForm.controls.fromEmail.hasError('required')">
-              {{'labels.inputs.From Email' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.From Email' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.From Name' | translate}}</mat-label>
-            <input matInput required formControlName="fromName">
+            <mat-label>{{ 'labels.inputs.From Name' | translate }}</mat-label>
+            <input matInput required formControlName="fromName" />
             <mat-error *ngIf="emailConfigurationForm.controls.fromName.hasError('required')">
-              {{'labels.inputs.From Name' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.From Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary"
-          [disabled]="!emailConfigurationForm.valid || emailConfigurationForm.pristine">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!emailConfigurationForm.valid || emailConfigurationForm.pristine"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/system/external-services/email/email.component.html

@@ -1,27 +1,23 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
 </div>
 
 <div class="container mat-elevation-z8">
-
   <table mat-table [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.name' | translate}} </th>
-      <td mat-cell *matCellDef="let configuration"> {{ configuration.name | translateKey:'text' }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+      <td mat-cell *matCellDef="let configuration">{{ configuration.name | translateKey: 'text' }}</td>
     </ng-container>
 
     <ng-container matColumnDef="value">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Value' | translate}} </th>
-      <td mat-cell *matCellDef="let configuration"> {{ configuration.value }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Value' | translate }}</th>
+      <td mat-cell *matCellDef="let configuration">{{ configuration.value }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
-
 </div>

src/app/system/external-services/external-services.component.html

@@ -1,67 +1,63 @@
 <div class="container">
-
   <mat-card>
-
     <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
-
       <div fxFlex="50%">
-
         <mat-nav-list>
-
           <mat-list-item>
             <mat-icon matListIcon [routerLink]="['amazon-s3']">
               <fa-icon icon="cloud" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['amazon-s3']">{{'labels.heading.S3 Amazon External Service' | translate}}</h4>
+            <h4 matLine [routerLink]="['amazon-s3']">{{ 'labels.heading.S3 Amazon External Service' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine [routerLink]="['amazon-s3']" *ngIf="arrowBooleans[0]">{{'labels.text.S3 Amazon Service Configuration' | translate}}</p>
+            <p matLine [routerLink]="['amazon-s3']" *ngIf="arrowBooleans[0]">
+              {{ 'labels.text.S3 Amazon Service Configuration' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item>
             <mat-icon matListIcon [routerLink]="['sms']">
               <fa-icon icon="comment-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['sms']">{{'labels.heading.SMS External Service' | translate}}</h4>
+            <h4 matLine [routerLink]="['sms']">{{ 'labels.heading.SMS External Service' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine [routerLink]="['sms']" *ngIf="arrowBooleans[1]">{{'labels.text.SMS Service Configuration' | translate}}</p>
+            <p matLine [routerLink]="['sms']" *ngIf="arrowBooleans[1]">
+              {{ 'labels.text.SMS Service Configuration' | translate }}
+            </p>
           </mat-list-item>
-
         </mat-nav-list>
-
       </div>
 
       <div fxFlex="50%">
-
         <mat-nav-list>
-
           <mat-list-item>
             <mat-icon matListIcon [routerLink]="['email']">
               <fa-icon icon="envelope" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['email']">{{'labels.heading.Email External Service' | translate}}</h4>
+            <h4 matLine [routerLink]="['email']">{{ 'labels.heading.Email External Service' | translate }}</h4>
             <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="!arrowBooleans[2]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="arrowBooleans[2]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine [routerLink]="['email']" *ngIf="arrowBooleans[2]">{{'labels.text.Email Service Configuration' | translate}}</p>
+            <p matLine [routerLink]="['email']" *ngIf="arrowBooleans[2]">
+              {{ 'labels.text.Email Service Configuration' | translate }}
+            </p>
           </mat-list-item>
 
           <mat-list-item>
             <mat-icon matListIcon [routerLink]="['notification']">
               <fa-icon icon="bell" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['notification']"> {{'labels.heading.Notification External Service' | translate}}</h4>
+            <h4 matLine [routerLink]="['notification']">
+              {{ 'labels.heading.Notification External Service' | translate }}
+            </h4>
             <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="!arrowBooleans[3]" icon="arrow-down" size="md"></fa-icon>
             <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="arrowBooleans[3]" icon="arrow-up" size="md"></fa-icon>
-            <p matLine [routerLink]="['notification']" *ngIf="arrowBooleans[3]">{{'labels.text.Notification Service Configuration' | translate}}</p>
+            <p matLine [routerLink]="['notification']" *ngIf="arrowBooleans[3]">
+              {{ 'labels.text.Notification Service Configuration' | translate }}
+            </p>
           </mat-list-item>
-
         </mat-nav-list>
-
       </div>
-
     </div>
-
   </mat-card>
-
 </div>

src/app/system/external-services/notification/edit-notification/edit-notification.component.html

@@ -1,48 +1,49 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="notificationConfigurationForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Server Key' | translate}}</mat-label>
-            <input matInput required formControlName="server_key">
+            <mat-label>{{ 'labels.inputs.Server Key' | translate }}</mat-label>
+            <input matInput required formControlName="server_key" />
             <mat-error *ngIf="notificationConfigurationForm.controls.server_key.hasError('required')">
-              {{'labels.inputs.Server Key' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Server Key' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.GCM End Point' | translate}}</mat-label>
-            <input matInput required formControlName="gcm_end_point">
+            <mat-label>{{ 'labels.inputs.GCM End Point' | translate }}</mat-label>
+            <input matInput required formControlName="gcm_end_point" />
             <mat-error *ngIf="notificationConfigurationForm.controls.gcm_end_point.hasError('required')">
-              {{'labels.inputs.GCM End Point' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.GCM End Point' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.FCM End Point' | translate}}</mat-label>
-            <input matInput required formControlName="fcm_end_point">
+            <mat-label>{{ 'labels.inputs.FCM End Point' | translate }}</mat-label>
+            <input matInput required formControlName="fcm_end_point" />
             <mat-error *ngIf="notificationConfigurationForm.controls.fcm_end_point.hasError('required')">
-              {{'labels.inputs.FCM End Point' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.FCM End Point' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
-
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!notificationConfigurationForm.valid || notificationConfigurationForm.pristine">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!notificationConfigurationForm.valid || notificationConfigurationForm.pristine"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/system/external-services/notification/notification.component.html

@@ -1,27 +1,23 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
 </div>
 
 <div class="container mat-elevation-z8">
-
   <table mat-table [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.name' | translate}} </th>
-      <td mat-cell *matCellDef="let configuration"> {{ configuration.name | translateKey:'text' }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+      <td mat-cell *matCellDef="let configuration">{{ configuration.name | translateKey: 'text' }}</td>
     </ng-container>
 
     <ng-container matColumnDef="value">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Value' | translate}} </th>
-      <td mat-cell *matCellDef="let configuration"> {{ getConfigurationValue(configuration) }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Value' | translate }}</th>
+      <td mat-cell *matCellDef="let configuration">{{ getConfigurationValue(configuration) }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
-
 </div>

src/app/system/external-services/sms/edit-sms/edit-sms.component.html

@@ -1,56 +1,58 @@
 <div class="container">
-
   <mat-card>
-
     <form [formGroup]="smsConfigurationForm" (ngSubmit)="submit()">
-
       <mat-card-content>
-
         <div fxLayout="column">
-
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Host Name' | translate}}</mat-label>
-            <input matInput required formControlName="host_name">
+            <mat-label>{{ 'labels.inputs.Host Name' | translate }}</mat-label>
+            <input matInput required formControlName="host_name" />
             <mat-error *ngIf="smsConfigurationForm.controls.host_name.hasError('required')">
-              {{'labels.inputs.Host Name' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Host Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.Port Number' | translate}}</mat-label>
-            <input matInput required formControlName="port_number">
+            <mat-label>{{ 'labels.inputs.Port Number' | translate }}</mat-label>
+            <input matInput required formControlName="port_number" />
             <mat-error *ngIf="smsConfigurationForm.controls.port_number.hasError('required')">
-              {{'labels.inputs.Port Number' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.Port Number' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>{{'labels.inputs.End Point' | translate}}</mat-label>
-            <input matInput required formControlName="end_point">
+            <mat-label>{{ 'labels.inputs.End Point' | translate }}</mat-label>
+            <input matInput required formControlName="end_point" />
             <mat-error *ngIf="smsConfigurationForm.controls.end_point.hasError('required')">
-              {{'labels.inputs.End Point' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+              {{ 'labels.inputs.End Point' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-              <mat-label>{{'labels.inputs.Tenant App Key' | translate}}</mat-label>
-              <input matInput required formControlName="tenant_app_key">
-              <mat-error *ngIf="smsConfigurationForm.controls.tenant_app_key.hasError('required')">
-                {{'labels.inputs.Tenant App Key' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
-              </mat-error>
-            </mat-form-field>
-
+            <mat-label>{{ 'labels.inputs.Tenant App Key' | translate }}</mat-label>
+            <input matInput required formControlName="tenant_app_key" />
+            <mat-error *ngIf="smsConfigurationForm.controls.tenant_app_key.hasError('required')">
+              {{ 'labels.inputs.Tenant App Key' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
         </div>
-
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!smsConfigurationForm.valid || smsConfigurationForm.pristine">{{'labels.buttons.Submit' | translate}}</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          [disabled]="!smsConfigurationForm.valid || smsConfigurationForm.pristine"
+        >
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
       </mat-card-actions>
-
     </form>
-
   </mat-card>
-
 </div>

src/app/system/external-services/sms/sms.component.html

@@ -1,27 +1,23 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{'labels.buttons.Edit' | translate}}
+    {{ 'labels.buttons.Edit' | translate }}
   </button>
 </div>
 
 <div class="container mat-elevation-z8">
-
   <table mat-table [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.name' | translate}} </th>
-      <td mat-cell *matCellDef="let configuration"> {{ configuration.name | translateKey:'text' }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+      <td mat-cell *matCellDef="let configuration">{{ configuration.name | translateKey: 'text' }}</td>
     </ng-container>
 
     <ng-container matColumnDef="value">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Value' | translate}} </th>
-      <td mat-cell *matCellDef="let configuration"> {{ configuration.value }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Value' | translate }}</th>
+      <td mat-cell *matCellDef="let configuration">{{ configuration.value }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
-
 </div>