feat(system): view, edit, delete code (#380)

- Add view code component - Add edit code component Fixes: #379
2019-05-21 20:19:41 +05:30
parent fbb7a1583a
commit e766a91ecf
16 changed files with 625 additions and 3 deletions
@@ -0,0 +1,87 @@
+<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" fxLayout.xs="column">
+
+  <button mat-raised-button color="primary" (click)="addCodeValueRow()">
+    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    Add Code Value
+  </button>
+
+  <button mat-raised-button color="primary" [routerLink]="['edit']" *ngIf="!codeData.systemDefined">
+    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    Edit Code
+  </button>
+
+  <button mat-raised-button color="warn" (click)="delete()" *ngIf="!codeData.systemDefined">
+    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    Delete Code
+  </button>
+
+</div>
+
+<div class="container">
+
+  <mat-card>
+
+    <mat-card-title>{{ codeData.name }}</mat-card-title>
+
+    <form [formGroup]="codeValuesForm">
+
+      <mat-card-content>
+
+        <div formArrayName="codeValues" *ngFor="let codeValue of codeValues.controls; let i = index;">
+
+          <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
+
+            <mat-form-field fxFlex="20%">
+              <mat-label>Name</mat-label>
+              <input required matInput formControlName="name">
+              <mat-error *ngIf="codeValues.at(i).controls.name.hasError('required')">
+                Name is <strong>required</strong>
+              </mat-error>
+            </mat-form-field>
+
+            <mat-form-field fxFlex="22%">
+              <mat-label>Description</mat-label>
+              <input matInput formControlName="description">
+            </mat-form-field>
+
+            <mat-form-field fxFlex="18%">
+              <mat-label>Position</mat-label>
+              <input required matInput formControlName="position" type="number">
+              <mat-error *ngIf="codeValues.at(i).controls.position.hasError('required')">
+                Name is <strong>required</strong>
+              </mat-error>
+            </mat-form-field>
+
+            <div class="active-wrapper" fxFlex="8%">
+              <mat-checkbox formControlName="isActive" class="active">Active</mat-checkbox>
+            </div>
+
+            <div fxLayoutGap="2%" fxFlex="22%" class="options-wrapper">
+              <button mat-stroked-button color="primary" *ngIf="codeValueRowStatus[i] === 'edit'" [disabled]="codeValues.at(i).pristine" (click)="updateCodeValue(i)">
+                Submit
+              </button>
+              <button mat-button *ngIf="codeValueRowStatus[i] === 'edit'" (click)="disableRow(i)">
+                Cancel
+              </button>
+              <button mat-icon-button color="primary" [disabled]="!codeValuesForm.get('codeValues').at(i).valid" *ngIf="codeValueRowStatus[i] === 'new'" matTooltip="Add" matTooltipPosition="above" (click)="addCodeValue(i)">
+                <fa-icon icon="plus" size="lg"></fa-icon>
+              </button>
+              <button type="button" color="primary" *ngIf="codeValueRowStatus[i] === 'disabled'" mat-icon-button matTooltip="Edit" matTooltipPosition="above" (click)="enableRow(i)">
+                <fa-icon icon="edit" size="lg"></fa-icon>
+              </button>
+              <button type="button" color="warn" mat-icon-button matTooltip="Delete" matTooltipPosition="above" (click)="codeValueRowStatus[i] === 'new' ? removeNewCodeValue(i) : deleteCodeValue(i)">
+                <fa-icon icon="trash" size="lg"></fa-icon>
+              </button>
+            </div>
+
+          </div>
+
+        </div>
+
+      </mat-card-content>
+
+    </form>
+
+  </mat-card>
+
+</div>