1 files changed, 47 insertions, 0 deletions
diff --git a/public/src/app/import-rules/import-rules.component.html b/public/src/app/import-rules/import-rules.component.html
new file mode 100644
index 0000000..b19c4e3
--- /dev/null
+++ b/public/src/app/import-rules/import-rules.component.html
@@ -0,0 +1,47 @@
+<div data-tests-id="import-rules-container">
+
+  <div>
+    <div style="font-size: 20px; margin-bottom:13px;">
+      Import
+    </div>
+  </div>
+
+  <div style="display:flex; flex-direction:column;">
+    <span class="field-label required space-down" style="margin-right: 10px; color: #5a5a5a; font-size:12px;">Mapping Target</span>
+
+    <select name="mappingTargetForImport" [(ngModel)]="mappingTarget" (ngModelChange)="onChangeMapping($event)" data-tests-id="mappingDdl"
+      style="width: 416px;
+      height: 35px;
+      margin-bottom:17px;
+      border-radius: 2px;
+      background-color: #ffffff;
+      border: solid 1px #d2d2d2;" class="field-select">
+      <option [ngValue]="null" disabled>Select Mapping</option>
+      <optgroup label="Rules Configured">
+        <option *ngFor="let target of advancedSetting" [hidden]="!target.isExist" [value]="target.name" data-tests-id="templateOptionsExist">{{target.name}}</option>
+      </optgroup>
+      <optgroup label="No Mapping Configuration">
+        <option *ngFor="let target of advancedSetting" [hidden]="target.isExist" [value]="target.name" data-tests-id="templateOptionsNotExist">{{target.name}}</option>
+      </optgroup>
+    </select>
+  </div>
+
+  <div style="margin-bottom:17px;">
+    <div style="font-size: 12px; color: #5a5a5a;">
+      Selected file
+    </div>
+    <div class="import-container">
+      <input type="text" class="field-text" [(ngModel)]="fileName" readonly style="width: 300px;
+          height: 35px;
+          border-radius: 2px;
+          margin-right: 20px;
+          background-color: #ffffff;
+          border: solid 1px #d2d2d2;">
+      <button mat-raised-button style="border: 1px solid #009fdb; color:#009fdb; font-size: 14px; font-family: 'Open Sans', sans-serif;text-align: center; height: 36px; width: 96px;">
+        Browse
+      </button>
+      <input type="file" id="file" accept=".json" (change)="handleFileInput($event.target.files)">
+    </div>
+  </div>
+
+</div>