Merge pull request #758 from Picturepark/bugfix/PP9-21170_hide_fields

Bugfix/PP9-21170 PP9-21178 - Fixed fields
Picturepark · Aug 8, 2024 · cbf7dff · cbf7dff
2 parents a4b10fa + 5002a6d
commit cbf7dff
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 62 deletions.
diff --git a/src/picturepark-sdk-v2-angular/package-lock.json b/src/picturepark-sdk-v2-angular/package-lock.json
diff --git a/src/picturepark-sdk-v2-angular/package.json b/src/picturepark-sdk-v2-angular/package.json
@@ -84,7 +84,7 @@
     "ng-packagr": "18.1.0",
     "normalize.css": "^8.0.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.4.1",
+    "prettier": "^3.3.3",
     "pretty-quick": "^2.0.1",
     "protractor": "~7.0.0",
     "puppeteer": "^5.3.1",

diff --git a/...rk-sdk-v2-angular-ui/src/lib/features-module/landing-dialog/landing-dialog.component.html b/...rk-sdk-v2-angular-ui/src/lib/features-module/landing-dialog/landing-dialog.component.html
@@ -7,7 +7,7 @@
     <div class="content-wrapper">
       <span>{{ 'LandingDialog.message' | pptranslate }}</span>
       <div class="toggle-wrap">
-        <mat-slide-toggle color="primary" [(ngModel)]="termsAccepted"></mat-slide-toggle>
+        <mat-slide-toggle color="accent" [(ngModel)]="termsAccepted"></mat-slide-toggle>
         <span class="toggle-label" [innerHTML]="terms$ | async | pptranslate"></span>
       </div>
     </div>

diff --git a/.../src/lib/features-module/layer-panels/components/layer-fields/layer-fields.component.html b/.../src/lib/features-module/layer-panels/components/layer-fields/layer-fields.component.html
@@ -1,53 +1,66 @@
 <div class="raw">
   @if (!noname) {
-  <div class="label" #name [matTooltip]="field.name">{{ field.name }}</div>
-  } @if (field.value && !field.markdown) {
-  <div class="value">{{ field.value }}</div>
-  } @if (field.value && field.markdown) {
-  <pp-read-more class="value"><div ppMarkdown [markdownText]="field.value"></div></pp-read-more>
-  } @if (field.tagboxFields.length) {
-  <div class="value">
-    @for (tagboxField of field.tagboxFields; track tagboxField; let last = $last; let i = $index) {
-    <span>
-      <a class="link" href="javascript:" (click)="showItem(tagboxField, $event)"> {{ tagboxField.value }}</a>
-      @if (!last) {
-      <span>, </span>
-      }
-    </span>
+    <div class="label" #name [matTooltip]="field().name">{{ field().name }}</div>
+  }
+  @if (hasValue()) {
+    @if (!field().markdown) {
+      <div class="value">{{ field().value }}</div>
+    }
+    @if (field().markdown) {
+      <pp-read-more class="value">
+        @if (field().value; as value) {
+          <div ppMarkdown [markdownText]="value"></div>
+        }
+      </pp-read-more>
     }
-  </div>
-  } @if (field.fieldsetFields.length) {
-  <div class="value">
-    @for (ref of field.fieldsetFields; track ref) {
-    <div class="field">
-      @if (ref.name === field.name) {
-      <mat-expansion-panel (opened)="ref.isOpened = true" (closed)="ref.isOpened = false">
-        <mat-expansion-panel-header>
-          <mat-panel-description>
-            {{ ref.isOpened ? ref.name : ref.title }}
-          </mat-panel-description>
-        </mat-expansion-panel-header>
-        <ng-template matExpansionPanelContent>
-          <pp-layer-fields [field]="ref" [noname]="true"></pp-layer-fields>
-        </ng-template>
-      </mat-expansion-panel>
-      } @else {
-      <pp-layer-fields [field]="ref"></pp-layer-fields>
+  }
+  @if (field().tagboxFields.length) {
+    <div class="value">
+      @for (tagboxField of field().tagboxFields; track tagboxField; let last = $last; let i = $index) {
+        <span>
+          <a class="link" href="javascript:" (click)="showItem(tagboxField, $event)"> {{ tagboxField.value }}</a>
+          @if (!last) {
+            <span>, </span>
+          }
+        </span>
       }
     </div>
-    }
-  </div>
-  } @if (field.relationFields.length) {
-  <div class="value">
-    @for (relationField of field.relationFields; track relationField) { @if (relationField.info | async; as info) {
-    <div class="relation field" (click)="relationClickHandler(info)">
-      <div class="image-wrap"><img [src]="info.fileUrl" /></div>
-      <div class="relationFields">
-        <div class="field relation-title" [innerHTML]="info.name"></div>
-        <div class="field relation-description" [innerHTML]="info.list"></div>
-      </div>
+  }
+  @if (field().fieldsetFields.length) {
+    <div class="value">
+      @for (ref of field().fieldsetFields; track ref) {
+        <div class="field">
+          @if (ref.name === field().name) {
+            <mat-expansion-panel (opened)="ref.isOpened = true" (closed)="ref.isOpened = false">
+              <mat-expansion-panel-header>
+                <mat-panel-description>
+                  {{ ref.isOpened ? ref.name : ref.title }}
+                </mat-panel-description>
+              </mat-expansion-panel-header>
+              <ng-template matExpansionPanelContent>
+                <pp-layer-fields [field]="ref" [noname]="true"></pp-layer-fields>
+              </ng-template>
+            </mat-expansion-panel>
+          } @else {
+            <pp-layer-fields [field]="ref"></pp-layer-fields>
+          }
+        </div>
+      }
+    </div>
+  }
+  @if (field().relationFields.length) {
+    <div class="value">
+      @for (relationField of field().relationFields; track relationField) {
+        @if (relationField.info | async; as info) {
+          <div class="relation field" (click)="relationClickHandler(info)">
+            <div class="image-wrap"><img [src]="info.fileUrl" /></div>
+            <div class="relationFields">
+              <div class="field relation-title" [innerHTML]="info.name"></div>
+              <div class="field relation-description" [innerHTML]="info.list"></div>
+            </div>
+          </div>
+        }
+      }
     </div>
-    } }
-  </div>
   }
 </div>
diff --git a/...ui/src/lib/features-module/layer-panels/components/layer-fields/layer-fields.component.ts b/...ui/src/lib/features-module/layer-panels/components/layer-fields/layer-fields.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, forwardRef } from '@angular/core';
+import { Component, Input, Output, EventEmitter, forwardRef, input, computed } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 
 import { LayerField } from '../../models/layer-field';
@@ -9,6 +9,7 @@ import { MarkdownDirective } from '../../directives/markdown-directive';
 import { ReadMoreComponent } from '../read-more/read-more.component';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { CommonModule } from '@angular/common';
+import { isEmptyOrUndefined } from '../../../../utilities/helper';
 
 @Component({
   selector: 'pp-layer-fields',
@@ -25,11 +26,13 @@ import { CommonModule } from '@angular/common';
   ],
 })
 export class LayerFieldsComponent {
-  @Input() field: LayerField;
+  field = input.required<LayerField>();
   @Input() noname = false;
 
   @Output() relationClick = new EventEmitter<RelationFieldInfo>();
 
+  hasValue = computed(() => isEmptyOrUndefined(this.field()?.value) === false);
+
   constructor(private dialog: MatDialog) {}
 
   showItem(item: any, event: any) {

diff --git a/...turepark-sdk-v2-angular-ui/src/lib/features-module/layer-panels/layer-panels.component.ts b/...turepark-sdk-v2-angular-ui/src/lib/features-module/layer-panels/layer-panels.component.ts
@@ -18,6 +18,7 @@ import { TranslatePipe } from '../../shared-module/pipes/translate.pipe';
 import { LayerFieldsComponent } from './components/layer-fields/layer-fields.component';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { NgFor } from '@angular/common';
+import { isEmptyOrUndefined } from '../../utilities/helper';
 
 const initialState = {
   layers: [] as Layer[],
@@ -138,7 +139,7 @@ export class LayerPanelsComponent extends StatefulComponent<typeof initialState>
       schema.fields.forEach(schemaField => {
         const fieldValue = schemaMetadata[schemaField.id];
 
-        if (fieldValue !== undefined && fieldValue !== null) {
+        if (!isEmptyOrUndefined(fieldValue)) {
           const layerField = this.layerFieldService.generate(
             schemaField,
             schemaMetadata,

diff --git a/...k-sdk-v2-angular/projects/picturepark-sdk-v2-angular-ui/src/lib/styles/global_styles.scss b/...k-sdk-v2-angular/projects/picturepark-sdk-v2-angular-ui/src/lib/styles/global_styles.scss
@@ -168,9 +168,19 @@ pp-share-content-dialog {
   }
 }
 
-.mat-mdc-slide-toggle > .mdc-form-field > .mdc-switch > .mdc-switch__handle-track > .mdc-switch__handle {
-  > .mdc-switch__ripple {
-    width: 38px;
-    height: 38px;
+.mat-mdc-slide-toggle {
+  padding-top: 1px;
+  padding-bottom: 2px;
+  > .mdc-form-field > .mdc-switch > .mdc-switch__handle-track > .mdc-switch__handle {
+    > .mdc-switch__ripple {
+      width: 38px;
+      height: 38px;
+    }
+    > .mdc-switch__icons {
+      display: none;
+    }
+    > .mdc-switch__shadow {
+      display: none;
+    }
   }
-}
+}
diff --git a/...urepark-sdk-v2-angular/projects/picturepark-sdk-v2-angular-ui/src/lib/utilities/helper.ts b/...urepark-sdk-v2-angular/projects/picturepark-sdk-v2-angular-ui/src/lib/utilities/helper.ts
@@ -23,3 +23,14 @@ export function groupBy<T, K>(list: T[], getKey: (item: T) => K): Map<K, T[]> {
 export function flatMap<T, U>(array: T[], mapFunc: (x: T) => U[]): U[] {
   return array.reduce((cumulus: U[], next: T) => [...mapFunc(next), ...cumulus], <U[]>[]);
 }
+
+/** Checks if the `value` is `null` `undefined` `NaN` `''` `[]` `{}` */
+export function isEmptyOrUndefined(data: any) {
+  const checks = [null, undefined, ''];
+  return (
+    checks.some(check => Object.is(data, check)) ||
+    (typeof data === 'number' && Number.isNaN(data)) ||
+    (Array.isArray(data) && (data?.length === 0 || data.every(isEmptyOrUndefined))) ||
+    (typeof data === 'object' && (Object.keys(data).length === 0 || Object.values(data).every(isEmptyOrUndefined)))
+  );
+}
diff --git a/src/picturepark-sdk-v2-angular/projects/share-viewer/src/theme.scss b/src/picturepark-sdk-v2-angular/projects/share-viewer/src/theme.scss
@@ -116,7 +116,7 @@ $mat-picturepark-primary: (
 );
 
 $picturepark-app-primary: mat.m2-define-palette($mat-picturepark-primary);
-$picturepark-app-accent: mat.m2-define-palette($mat-picturepark-accent, 400, 200, 700);
+$picturepark-app-accent: mat.m2-define-palette($mat-picturepark-accent, 600, 300, 800);
 $picturepark-app-warn: mat.m2-define-palette($mat-picturepark-warn);
 $picturepark-app-theme: mat.m2-define-light-theme(
   (