feat: add UI for settings and app configuration (#90)

Add settings and app configuration UI for web app and self service applications.
2018-07-03 21:17:58 +05:30
parent 4bd7478bac
commit de6a041234
22 changed files with 481 additions and 7 deletions
@@ -0,0 +1,118 @@
+<mat-card class="container">
+
+  <mat-accordion>
+
+    <mat-expansion-panel>
+
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          Main Configuration
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+
+      <div fxLayout="column">
+
+        <mat-form-field>
+          <input matInput placeholder="Name of the Organisation">
+        </mat-form-field>
+
+        <mat-form-field>
+          <textarea matInput placeholder="Description"></textarea>
+        </mat-form-field>
+
+        <mat-form-field>
+          <textarea matInput placeholder="Summary"></textarea>
+        </mat-form-field>
+
+        <mat-form-field>
+          <mat-select placeholder="Default Language">
+            <mat-option *ngFor="let language of languages" [value]="language.value">
+              {{ language.viewValue }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <mat-form-field>
+          <mat-select placeholder="Default Date Format">
+            <mat-option *ngFor="let dateFormat of dateFormats" [value]="dateFormat.value">
+              {{ dateFormat.viewValue }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
+      </div>
+
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          Images
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+
+      <div fxLayout="column">
+
+        Favicon <mifosx-file-upload></mifosx-file-upload>
+        Cover Image <mifosx-file-upload></mifosx-file-upload>
+        Logo <mifosx-file-upload></mifosx-file-upload>
+        Logo with Organisation Name <mifosx-file-upload></mifosx-file-upload>
+
+      </div>
+
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          Theme and Font
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+
+      <div fxLayout="column">
+
+        Theme <mifosx-theme-picker></mifosx-theme-picker> <!-- TODO: Replace or Change to Show More Detail -->
+
+        <mat-form-field>
+          <mat-select placeholder="Default Font">
+            <mat-option *ngFor="let font of fonts" [value]="font.value">
+              {{ font.viewValue }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
+      </div>
+
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          Contact Information
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+
+      <div fxLayout="column">
+
+        <mat-form-field>
+          <input type="url" matInput placeholder="Website">
+        </mat-form-field>
+
+        <mat-form-field>
+          <input type="email" matInput placeholder="Email">
+        </mat-form-field>
+
+        <mat-form-field>
+          <input type="tel" matInput placeholder="Contact No">
+        </mat-form-field>
+
+      </div>
+
+    </mat-expansion-panel>
+
+  </mat-accordion>
+
+</mat-card>