Merge branch 'master' into dev/TM-66_Nested_relation_state_changes

B3Partners · Apr 30, 2021 · b847f82 · b847f82
2 parents 09c7a62 + f31b031
commit b847f82
Show file tree

Hide file tree

Showing 11 changed files with 106 additions and 41 deletions.
diff --git a/pom.xml b/pom.xml
@@ -68,7 +68,7 @@
         or as part of a profile, see eg. 'gh-action' profile in viewer -->
         <test.skip.integrationtests>false</test.skip.integrationtests>
         <maven-surefire-plugin.version>3.0.0-M5</maven-surefire-plugin.version>
-        <tomcat.version>7.0.108</tomcat.version>
+        <tomcat.version>7.0.109</tomcat.version>
         <tomcat7-maven-plugin.version>2.2</tomcat7-maven-plugin.version>
         <jacoco-maven-plugin.version>0.8.6</jacoco-maven-plugin.version>
         <properties-maven-plugin.version>1.0.0</properties-maven-plugin.version>
@@ -701,7 +701,7 @@
                 <plugin>
                     <groupId>org.owasp</groupId>
                     <artifactId>dependency-check-maven</artifactId>
-                    <version>6.1.5</version>
+                    <version>6.1.6</version>
                     <configuration>
                         <skipSystemScope>true</skipSystemScope>
                         <format>ALL</format>

diff --git a/...map-components/projects/core/src/lib/feature-form/form-creator/form-creator.component.css b/...map-components/projects/core/src/lib/feature-form/form-creator/form-creator.component.css
@@ -1,22 +1,30 @@
 :host,
 form,
-mat-tab-group {
+mat-tab-group,
+.column-container {
   height: 100%;
 }
 
-.is-editing .tab {
-  padding-bottom: 16px;
+.column-container {
+  display: flex;
 }
 
 .column {
-  display: flex;
-  flex-direction: column;
+  flex: 1 0;
+}
+
+.is-editing .column {
+  padding-bottom: 16px;
+}
+
+.row {
+  min-height: 77px;
 }
 
-.column + .column {
+.row + .row {
   border-top: 1px solid rgba(216, 216, 216, 0.62);
 }
 
-.is-editing .column + .column {
+.is-editing .row + .row {
   border-top: 0 none;
 }
diff --git a/...ap-components/projects/core/src/lib/feature-form/form-creator/form-creator.component.html b/...ap-components/projects/core/src/lib/feature-form/form-creator/form-creator.component.html
@@ -1,15 +1,17 @@
 <form [formGroup]="formgroep">
   <mat-tab-group class="tab-group" [class.is-editing]="editing$ | async">
-    <mat-tab *ngFor="let tab of tabbedConfig; trackBy: trackByTabId" label="{{formConfig.tabConfig[tab.tabId]}}">
-      <div class="tab">
-        <div *ngFor="let attr of tab.attributes" class="column">
-          <tailormap-formfield
-            [value]=indexedAttributes.attrs.get(attr.key)?.value
-            [attribute]=indexedAttributes.attrs.get(attr.key)
-            [groep]="formgroep"
-            [isBulk]=isBulk
-            [editing]="(editing$ | async) || isBulk"
-          ></tailormap-formfield>
+    <mat-tab *ngFor="let tab of formTabs; trackBy: trackByTabId" label="{{tab.label}}">
+      <div class="column-container">
+        <div *ngFor="let column of tab.columns" class="column">
+          <div *ngFor="let attr of column.attributes" class="row">
+            <tailormap-formfield
+              [value]=indexedAttributes.attrs.get(attr.key)?.value
+              [attribute]=indexedAttributes.attrs.get(attr.key)
+              [groep]="formgroep"
+              [isBulk]=isBulk
+              [editing]="(editing$ | async) || isBulk"
+            ></tailormap-formfield>
+          </div>
         </div>
       </div>
     </mat-tab>

diff --git a/...rmap-components/projects/core/src/lib/feature-form/form-creator/form-creator.component.ts b/...rmap-components/projects/core/src/lib/feature-form/form-creator/form-creator.component.ts
@@ -51,7 +51,8 @@ export class FormCreatorComponent implements OnChanges, OnDestroy, AfterViewInit
   @Output()
   public formChanged = new EventEmitter<boolean>();
 
-  public tabbedConfig: Array<TabbedField> = [];
+  @Input()
+  public formTabs: TabbedField[] = [];
 
   public trackByTabId = (idx, tab: TabbedField) => tab.tabId;
 
@@ -66,7 +67,6 @@ export class FormCreatorComponent implements OnChanges, OnDestroy, AfterViewInit
   private destroyed = new Subject();
 
   public ngOnChanges() {
-    this.tabbedConfig = this.prepareFormConfig();
     if (this.feature) {
       this.indexedAttributes = FormCreatorHelpers.convertFeatureToIndexed(this.feature, this.formConfig);
       this.createFormControls();
@@ -84,15 +84,6 @@ export class FormCreatorComponent implements OnChanges, OnDestroy, AfterViewInit
     this.destroyed.complete();
   }
 
-  private prepareFormConfig(): Array<TabbedField> {
-    const tabbedFields = [];
-    const attrs = this.formConfig.fields;
-    for (let tabNr = 1; tabNr <= this.formConfig.tabs; tabNr++) {
-      tabbedFields.push({ tabId: tabNr, attributes: attrs.filter(attr => attr.tab === tabNr) });
-    }
-    return tabbedFields;
-  }
-
   private createFormControls() {
     const attrs = this.formConfig.fields;
     const formControls = {};
@@ -209,4 +200,5 @@ export class FormCreatorComponent implements OnChanges, OnDestroy, AfterViewInit
     }
     return features;
   }
+
 }
diff --git a/tailormap-components/projects/core/src/lib/feature-form/form-tree/form-tree.component.css b/tailormap-components/projects/core/src/lib/feature-form/form-tree/form-tree.component.css
@@ -1,5 +1,5 @@
 .tree {
-  right: 310px;
+  right: calc(var(--overlay-panel-form-columns) * var(--overlay-panel-width) + 10px);
   width: 350px;
 }
 
@@ -25,3 +25,7 @@
   flex: 1;
   overflow: auto;
 }
+
+.overlay-panel-toggle {
+  right: calc(var(--overlay-panel-form-columns) * var(--overlay-panel-width) + 10px);
+}
diff --git a/tailormap-components/projects/core/src/lib/feature-form/form/form-models.ts b/tailormap-components/projects/core/src/lib/feature-form/form/form-models.ts
@@ -66,6 +66,12 @@ export interface IndexedFeatureAttributes {
 
 export interface TabbedField {
   tabId: number;
+  label: string;
+  columns: TabColumn[];
+}
+
+export interface TabColumn {
+  columnId: number;
   attributes: Attribute[];
 }
 

diff --git a/tailormap-components/projects/core/src/lib/feature-form/form/form.component.css b/tailormap-components/projects/core/src/lib/feature-form/form/form.component.css
@@ -3,6 +3,14 @@
   height: 100%;
 }
 
+:host {
+  --overlay-panel-form-columns: 1;
+}
+
+.overlay-panel {
+  width: calc(var(--overlay-panel-form-columns) * var(--overlay-panel-width));
+}
+
 .container {
   display: flex;
   flex-direction: column;
@@ -50,3 +58,7 @@
 .button-separator {
   width: 16px;
 }
+
+.push-buttons {
+  width: calc(calc(var(--overlay-panel-form-columns) * var(--overlay-panel-width)) - var(--overlay-panel-width));
+}
diff --git a/tailormap-components/projects/core/src/lib/feature-form/form/form.component.html b/tailormap-components/projects/core/src/lib/feature-form/form/form.component.html
@@ -6,15 +6,18 @@ <h1>{{formConfig.name}} {{formDirty ? '*' : ''}}</h1>
   <div class="form-container">
     <div class="form">
       <tailormap-form-creator #formCreator
-                             [feature]="feature"
-                             [features]="features"
-                             [formConfig]="formConfig"
-                             [isBulk]="isBulk"
-                             (formChanged)="formChanged($event)"></tailormap-form-creator>
+                              [feature]="feature"
+                              [formTabs]="formTabs"
+                              [features]="features"
+                              [formConfig]="formConfig"
+                              [isBulk]="isBulk"
+                              (formChanged)="formChanged($event)"></tailormap-form-creator>
     </div>
   </div>
   <div class="bottom-bar">
 
+    <div class="push-buttons"></div>
+
     <button mat-flat-button color="accent" (click)="formCreator.resetForm()" *ngIf="formCreator.editing$ | async">
       Annuleren
     </button>

diff --git a/tailormap-components/projects/core/src/lib/feature-form/form/form.component.ts b/tailormap-components/projects/core/src/lib/feature-form/form/form.component.ts
@@ -1,8 +1,8 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { ConfirmDialogService } from '../../shared/confirm-dialog/confirm-dialog.service';
 import { filter, map, switchMap, take, takeUntil } from 'rxjs/operators';
 import { combineLatest, Observable, of, Subject } from 'rxjs';
-import { FormConfiguration } from './form-models';
+import { Attribute, FormConfiguration, TabbedField, TabColumn } from './form-models';
 import { Feature } from '../../shared/generated';
 import { FormActionsService } from '../form-actions/form-actions.service';
 import { MetadataService } from '../../application/services/metadata.service';
@@ -47,6 +47,7 @@ export class FormComponent implements OnDestroy, OnInit {
   public isHidden$: Observable<boolean>;
   public editing$: Observable<boolean>;
   public isMultiFormWorkflow$: Observable<boolean>;
+  public formTabs: TabbedField[] = [];
 
   constructor(
     private store$: Store<FormState | WorkflowState>,
@@ -55,6 +56,7 @@ export class FormComponent implements OnDestroy, OnInit {
     private featureInitializerService: FeatureInitializerService,
     public actions: FormActionsService,
     private editFeatureGeometryService: EditFeatureGeometryService,
+    private formElement: ElementRef,
   ) {
   }
 
@@ -116,6 +118,41 @@ export class FormComponent implements OnDestroy, OnInit {
         this.formsForNew.push(allFormConfigs.get(relationName));
       }
     });
+    this.formTabs = this.prepareFormConfig();
+    this.formElement.nativeElement.style.setProperty('--overlay-panel-form-columns', `${this.getColumnCount()}`);
+  }
+
+  private prepareFormConfig(): Array<TabbedField> {
+    const tabbedFields = [];
+    for (let tabNr = 1; tabNr <= this.formConfig.tabs; tabNr++) {
+      tabbedFields.push({
+        tabId: tabNr,
+        label: this.formConfig.tabConfig[tabNr],
+        columns: this.getColumns(tabNr),
+      });
+    }
+    return tabbedFields;
+  }
+
+  public getColumns(tabNr: number): TabColumn[] {
+    const columns: TabColumn[] = [];
+    const columnCount = this.getColumnCount();
+    for (let i = 1; i <= columnCount; i++) {
+      columns.push({
+        columnId: i,
+        attributes: this.getAttributes(i, tabNr),
+      });
+    }
+    return columns;
+  }
+
+  public getAttributes(column: number, tabNr: number): Attribute[] {
+    return this.formConfig.fields.filter(attr => attr.column === column && attr.tab === tabNr);
+  }
+
+  private getColumnCount() {
+    const columnNumbers = this.formConfig.fields.map(field => field.column);
+    return Math.max(...columnNumbers);
   }
 
   public ngOnDestroy() {

diff --git a/tailormap-components/projects/core/src/styles/styles.css b/tailormap-components/projects/core/src/styles/styles.css
@@ -6,6 +6,7 @@
   --top-panel-height: 0;
   --bottom-panel-height: 0;
   --overlay-panel-z-index: 25000;
+  --overlay-panel-width: 300px;
 }
 
 .cdk-overlay-container {
@@ -68,7 +69,7 @@
   right: 10px;
   top: 10px;
   bottom: 10px;
-  width: 300px;
+  width: var(--overlay-panel-width);
   background-color: #fff;
   z-index: var(--overlay-panel-z-index);
   padding-top: 30px;
@@ -78,7 +79,7 @@
 
 .overlay-panel-toggle {
   position: absolute;
-  right: 310px;
+  right: calc(var(--overlay-panel-width) + 10px);
   top: 10px;
   width: 35px;
   height: 62px;

diff --git a/viewer/src/main/webapp/viewer-html/package.json b/viewer/src/main/webapp/viewer-html/package.json
@@ -7,7 +7,7 @@
         "test": "jasmine"
     },
     "devDependencies": {
-        "grunt": "1.3.0",
+        "grunt": "1.4.0",
         "grunt-svgstore": "2.0.0",
         "http-server": "^0.12.1",
         "jasmine-core": "^3.4.0",