feat(geo): split the add catalog dialog in tabs, predefined catalog a…

packages/geo/src/lib/catalog/catalog-library/add-catalog-dialog.component.html

@@ -1,104 +1,69 @@
-<h1 mat-dialog-title class="mat-typography">
-  {{ 'igo.geo.catalog.library.addTitle' | translate }}
-</h1>
-<div mat-dialog-content class="mat-typography">
-  <form class="igo-form" [formGroup]="form">
-    <div class="igo-input-container">
-      <mat-form-field>
-        <input
-          type="text"
-          formControlName="title"
-          placeholder="{{ 'igo.geo.printForm.title' | translate }}"
-          matInput
-          [matAutocomplete]="auto2"
-        />
-        <mat-autocomplete
-          #auto2="matAutocomplete"
-          (optionSelected)="changeUrlOrTitle($event.option.value)"
-        >
-          <mat-option
-            *ngFor="let predefinedCatalog of predefinedCatalogsList$ | async"
-            matTooltipShowDelay="500"
-            [matTooltip]="predefinedCatalog.title"
-            [value]="predefinedCatalog"
-          >
-            {{ predefinedCatalog.title }}
-          </mat-option>
-        </mat-autocomplete>
-      </mat-form-field>
-    </div>
-    <div class="igo-input-container">
-      <mat-form-field>
-        <input
-          type="text"
-          formControlName="url"
-          placeholder="URL"
-          matInput
-          [matAutocomplete]="auto"
-        />
-        <mat-autocomplete
-          #auto="matAutocomplete"
-          (optionSelected)="changeUrlOrTitle($event.option.value)"
-        >
-          <mat-option
-            *ngFor="let predefinedCatalog of predefinedCatalogsList$ | async"
-            matTooltipShowDelay="500"
-            [matTooltip]="predefinedCatalog.url"
-            [value]="predefinedCatalog"
-          >
-            {{ predefinedCatalog.url }}
-          </mat-option>
-        </mat-autocomplete>
-      </mat-form-field>
-    </div>
-    <div class="igo-input-container">
-      <mat-form-field>
-        <mat-select formControlName="type" placeholder="Type">
-          <mat-option
-            *ngFor="let type of typeCapabilities"
-            [value]="type"
-            (click)="$event.stopPropagation()"
-          >
-            <p matListItemTitle>{{ type }}</p>
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-    </div>
-  </form>
-  <span *ngIf="error && addedCatalog && emailAddress">
-    <p class="error">
-      {{
-        languageService.translate.instant(
-          'igo.geo.catalog.externalProvider.unavailableWithEmail',
-          { value: addedCatalog.url, email: emailAddress }
-        )
-      }}
-    </p>
-  </span>
-  <span *ngIf="error && addedCatalog && !emailAddress">
-    <p class="error">
-      {{
-        languageService.translate.instant('igo.geo.catalog.unavailable', {
-          value: addedCatalog.url
-        })
-      }}
-    </p>
-  </span>
-</div>
-<div mat-dialog-actions style="justify-content: center">
-  <div class="igo-form-button-group add-catalog-button-top-padding">
-    <button mat-raised-button type="button" (click)="cancel()">
-      {{ 'igo.geo.catalog.library.cancel' | translate }}
-    </button>
-    <button
-      id="addCatalogBtnDialog"
-      mat-raised-button
-      type="button"
-      color="primary"
-      [disabled]="!form.valid"
-      (click)="addCatalog(form.value)"
+<mat-tab-group
+  [selectedIndex]="!data.addedCatalog && data.predefinedCatalogs.length ? 0 : 1"
+>
+  <mat-tab
+    [label]="'igo.geo.catalog.library.predefined' | translate"
+    [disabled]="!data.predefinedCatalogs.length"
+  >
+    <igo-form
+      *ngIf="predefinedForm$ | async as form"
+      [form]="form"
+      [formData]="data$ | async"
+      (submitForm)="onPredefinedSubmit($any($event))"
     >
-      {{ 'igo.geo.catalog.library.add' | translate }}
-    </button>
-  </div>
-</div>
+      <div *ngIf="form.fields.length" class="form-container">
+        <igo-form-field
+          *ngFor="let field of form.fields"
+          [field]="field"
+        ></igo-form-field>
+      </div>
+
+      <div formButtons class="actions-container">
+        <button mat-flat-button type="submit" color="primary">
+          {{ 'igo.geo.catalog.library.add' | translate }}
+        </button>
+      </div>
+    </igo-form>
+  </mat-tab>
+
+  <mat-tab class="tabs" [label]="'igo.geo.catalog.library.custom' | translate">
+    <igo-form
+      *ngIf="customForm$ | async as form"
+      [form]="form"
+      [formData]="customData$ | async"
+      (submitForm)="onCustomSubmit($any($event))"
+    >
+      <div *ngIf="form.fields.length" class="form-container">
+        <igo-form-field
+          *ngFor="let field of form.fields"
+          [field]="field"
+        ></igo-form-field>
+      </div>
+
+      <div formButtons class="actions-container">
+        <button mat-flat-button type="submit" color="primary">
+          {{ 'igo.geo.catalog.library.add' | translate }}
+        </button>
+      </div>
+    </igo-form>
+    <span *ngIf="data.error && data.addedCatalog && emailAddress">
+      <p class="error">
+        {{
+          languageService.translate.instant(
+            'igo.geo.catalog.externalProvider.unavailableWithEmail',
+            { value: data.addedCatalog.url, email: emailAddress }
+          )
+        }}
+      </p>
+    </span>
+    <span *ngIf="data.error && data.addedCatalog && !emailAddress">
+      <p class="error">
+        {{
+          languageService.translate.instant('igo.geo.catalog.unavailable', {
+            value: data.addedCatalog.url
+          })
+        }}
+      </p>
+    </span>
+  </mat-tab>
+</mat-tab-group>

packages/geo/src/lib/catalog/catalog-library/add-catalog-dialog.component.scss

@@ -1,29 +1,27 @@
-mat-form-field {
-  width: 100%;
-}
-
-.add-catalog-button-top-padding {
-  padding-top: 25px;
-}
-
-.igo-form {
-  padding: 10px 5px 5px;
-}
+:host {
+  mat-tab-group {
+    padding: 10px;
+  }
+  igo-form {
+    overflow: hidden;
+  }
 
-.igo-form-button-group {
-  text-align: center;
-}
-
-button {
-  cursor: pointer;
-}
-
-button#addCatalogBtnDialog[disabled='true'] {
-  cursor: default;
-  background-color: rgba(0, 0, 0, 0.12);
-  color: rgba(0, 0, 0, 0.26);
-}
+  .actions-container {
+    button:not(:last-child) {
+      margin-right: 8px;
+    }
+  }
+  .form-container {
+    width: 100%;
+    height: auto;
+    padding: 10px;
 
-.error {
-  color: red;
+    igo-form-field {
+      display: block;
+      height: auto;
+    }
+  }
+  .error {
+    color: red;
+  }
 }