feat: watermark with radios and inputs (DEV-3313)

apps/dsp-app/src/app/project/image-settings/image-settings.component.html

@@ -18,7 +18,8 @@
         </div>
       </div>
       <div *ngIf="imageSettings === imageSettingsEnum.RestrictImageSize" class="mb-6">
-        <div class="mb-2">
+        <mat-label>{{ 'appLabels.form.project.imageSettings.info' | translate }}</mat-label>
+        <div class="mb-2 mt-2">
           <mat-form-field>
             <input
               [imask]="inputMasks.minMaxInputMask(1, 99)"
@@ -53,9 +54,9 @@
         mat-raised-button
         type="submit"
         color="primary"
-        [disabled]="
-          imageSettings === imageSettingsEnum.RestrictImageSize 
-          && ((isPercentageSize && ratio <= 0) || (!isPercentageSize && !fixedWidth))"
+        [disabled]="!hasChanges
+          || (imageSettings === imageSettingsEnum.RestrictImageSize 
+            && ((isPercentageSize && ratio <= 0) || (!isPercentageSize && !fixedWidth)))"
         (click)="onSubmit()"
         appLoadingButton
         [isLoading]="isProjectsLoading$ | async">

apps/dsp-app/src/app/project/image-settings/image-settings.component.ts

@@ -1,7 +1,6 @@
 import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { ProjectRestrictedViewSettings } from '@dasch-swiss/dsp-js';
-import { SetRestrictedViewRequest } from '@dasch-swiss/vre/open-api';
 import { RouteConstants } from '@dasch-swiss/vre/shared/app-config';
 import { ProjectService } from '@dasch-swiss/vre/shared/app-helper-services';
 import { NotificationService } from '@dasch-swiss/vre/shared/app-notification';
@@ -35,12 +34,16 @@ export class ImageSettingsComponent implements OnInit {
   readonly inputMasks = InputMasks;
   readonly imageSettingsEnum = ImageSettingsEnum;
 
+  currentSettings: ProjectRestrictedViewSettings;
   imageSettings: ImageSettingsEnum = ImageSettingsEnum.Off;
   projectUuid = this.route.parent.parent.snapshot.paramMap.get(RouteConstants.uuidParameter);
   percentage: string = '99';
-
   fixedWidth: string;
 
+  get hasChanges(): boolean {
+    return JSON.stringify(this.currentSettings) !== JSON.stringify(this.getRequest());
+  }
+
   get ratio(): number {
     if (!this.percentage) {
       return 0;
@@ -70,16 +73,14 @@ export class ImageSettingsComponent implements OnInit {
   }
 
   onSubmit() {
-    const request: SetRestrictedViewRequest = {
-      size: this.getSizeForRequest(),
-      watermark: this.imageSettings === ImageSettingsEnum.Watermark,
-    };
-
-    this._store.dispatch(new UpdateProjectRestrictedViewSettingsAction(this.projectUuid, request)).subscribe(() => {
-      this._notification.openSnackBar(
-        this.translateService.instant('appLabels.form.project.imageSettings.updateConfirmation')
-      );
-    });
+    this._store
+      .dispatch(new UpdateProjectRestrictedViewSettingsAction(this.projectUuid, this.getRequest()))
+      .subscribe(() => {
+        this.currentSettings = this._store.selectSnapshot(ProjectsSelectors.projectRestrictedViewSettings);
+        this._notification.openSnackBar(
+          this.translateService.instant('appLabels.form.project.imageSettings.updateConfirmation')
+        );
+      });
   }
 
   onPercentageInputChange() {
@@ -90,19 +91,32 @@ export class ImageSettingsComponent implements OnInit {
     this.percentage = null;
   }
 
+  private getRequest(): any {
+    return this.imageSettings === ImageSettingsEnum.Watermark
+      ? { watermark: true }
+      : { size: this.getSizeForRequest() };
+  }
+
   private getImageSettings() {
     this._store
       .dispatch(new LoadProjectRestrictedViewSettingsAction(this._projectService.uuidToIri(this.projectUuid)))
       .pipe(
         switchMap(() =>
           this.viewSettings$.pipe(
             take(1),
-            takeWhile(settings => settings?.watermark !== null)
+            takeWhile(settings => settings !== null)
           )
         )
       )
       .subscribe(settings => {
-        if (settings.size === 'pct:100') {
+        if (!settings.watermark && settings.size) {
+          delete settings.watermark;
+        } else if (!settings.watermark) {
+          return;
+        }
+
+        this.currentSettings = settings;
+        if ((settings.watermark === false && !settings.size) || (settings.size && settings.size === 'pct:100')) {
           this.imageSettings = this.imageSettingsEnum.Off;
           return;
         }

apps/dsp-app/src/app/project/settings/settings.component.ts

@@ -16,12 +16,13 @@ export class SettingsComponent {
       route: RouteConstants.edit,
       icon: 'edit_square',
     },
-    /* {
-               label: 'Image Settings',
-               shortLabel: 'Image Settings',
-               route: RouteConstants.imageSettings,
-               icon: 'branding_watermark',
-             } */ {
+    {
+      label: 'Image Settings',
+      shortLabel: 'Image Settings',
+      route: RouteConstants.imageSettings,
+      icon: 'branding_watermark',
+    },
+    {
       label: 'Project Members',
       shortLabel: 'Members',
       route: RouteConstants.collaboration,

apps/dsp-app/src/assets/i18n/de.json

@@ -117,7 +117,8 @@
           "absoluteWidth": "Absolute Breite in Pixel von: {{min}} bis: {{max}}",
           "percentageValue": "Prozentwert",
           "percentage": "Prozentsatz",
-          "updateConfirmation": "Sie haben die Projektbildeinstellungen erfolgreich aktualisiert."
+          "updateConfirmation": "Sie haben die Projektbildeinstellungen erfolgreich aktualisiert.",
+          "info": "Um die Größe Ihres Bildes zu begrenzen, geben Sie entweder einen Prozentsatz oder eine absolute Pixelbreite ein. Sie können nicht für beide Optionen Werte angeben."
         }
       },
       "member": {

apps/dsp-app/src/assets/i18n/en.json

@@ -146,7 +146,8 @@
           "absoluteWidth": "Absolute width in pixels from: {{min}} to: {{max}}",
           "percentageValue": "Percentage value",
           "percentage": "Percentage",
-          "updateConfirmation": "You have successfully updated the project image settings."
+          "updateConfirmation": "You have successfully updated the project image settings.",
+          "info": "To limit the size of your image, input either a percentage or an absolute pixel width. You cannot provide values for both options."
         }
       },
       "member": {

libs/vre/open-api/src/generated/.openapi-generator/FILES

@@ -1,5 +1,4 @@
 .gitignore
-.openapi-generator-ignore
 README.md
 api.module.ts
 api/admin-files-api.service.ts
@@ -24,6 +23,7 @@ model/administrative-permissions-for-project-get-response-adm.ts
 model/arr.ts
 model/bad-credentials-exception.ts
 model/bad-request-exception.ts
+model/basic-user-information-change-request.ts
 model/bool.ts
 model/can-delete-list-response-adm.ts
 model/change-permission-group-api-request-adm.ts
@@ -42,9 +42,11 @@ model/default-object-access-permissions-for-project-get-response-adm.ts
 model/duplicate-value-exception.ts
 model/forbidden-exception.ts
 model/gravsearch-exception.ts
-model/group-adm.ts
+model/group-create-request.ts
 model/group-get-response-adm.ts
 model/group-members-get-response-adm.ts
+model/group-update-request.ts
+model/group.ts
 model/groups-get-response-adm.ts
 model/json.ts
 model/labels.ts
@@ -77,6 +79,7 @@ model/node-position-change-response-adm.ts
 model/not-found-exception.ts
 model/num.ts
 model/obj.ts
+model/password-change-request.ts
 model/permission-adm.ts
 model/permission-code-and-project-restricted-view-settings.ts
 model/permission-delete-response-adm.ts
@@ -89,32 +92,39 @@ model/project-admin-members-get-response-adm.ts
 model/project-create-request-description-inner.ts
 model/project-create-request.ts
 model/project-export-info-response.ts
-model/project-get-response-adm.ts
+model/project-get-response.ts
 model/project-import-response.ts
-model/project-keywords-get-response-adm.ts
+model/project-keywords-get-response.ts
 model/project-members-get-response-adm.ts
 model/project-operation-response-adm.ts
 model/project-restricted-view-settings-adm.ts
 model/project-restricted-view-settings-get-response-adm.ts
 model/project-update-request.ts
-model/projects-get-response-adm.ts
-model/projects-keywords-get-response-adm.ts
+model/projects-get-response.ts
+model/projects-keywords-get-response.ts
 model/rdf-data-object.ts
 model/resource-info-dto.ts
 model/restricted-view-response.ts
 model/root-node-info-get-response-adm.ts
 model/self-join.ts
 model/set-restricted-view-request.ts
+model/size.ts
+model/status-change-request.ts
 model/status.ts
 model/str.ts
 model/string-literal-sequence-v2.ts
 model/string-literal-v2.ts
 model/string-literal-v21.ts
+model/system-admin-change-request.ts
 model/tuple2-string-json.ts
-model/user-operation-response-adm.ts
+model/user-create-request.ts
+model/user-group-memberships-get-response-adm.ts
+model/user-project-admin-memberships-get-response-adm.ts
+model/user-project-memberships-get-response-adm.ts
 model/user-response-adm.ts
 model/user.ts
 model/users-get-response-adm.ts
 model/validation-exception.ts
+model/watermark.ts
 param.ts
 variables.ts