[CST-14425] add support to link

FrancescoMolinaro · FrancescoMolinaro · commit 7c0defa14f48 · 2024-04-24T16:36:22.000+02:00
diff --git a/src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/link-authority/link-authority.component.html b/src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/link-authority/link-authority.component.html
@@ -0,0 +1,8 @@
+<div [class]="field.styleValue">
+    <span>
+        <a class="metadata-text" href="{{link.href}}" rel="noopener noreferrer" target="_blank">
+            <i class="mr-2 fa-xl" [ngClass]="iconStyle"></i>
+            {{ link.text }}
+        </a>
+    </span>
+</div>
diff --git a/src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/link-authority/link-authority.component.scss b/src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/link-authority/link-authority.component.scss
diff --git a/src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/link-authority/link-authority.component.ts b/src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/link-authority/link-authority.component.ts
@@ -0,0 +1,72 @@
+import { Component, Inject, OnInit } from '@angular/core';
+
+import { TranslateService } from '@ngx-translate/core';
+
+import { FieldRenderingType, MetadataBoxFieldRendering } from '../metadata-box.decorator';
+import { MetadataLinkValue } from '../../../../../../models/cris-layout-metadata-link-value.model';
+import { RenderingTypeValueModelComponent } from '../rendering-type-value.model';
+import { Item } from '../../../../../../../core/shared/item.model';
+import { LayoutField } from '../../../../../../../core/layout/models/box.model';
+import { MetadataValue } from '../../../../../../../core/shared/metadata.models';
+
+/**
+ * This component renders the links metadata fields.
+ * The metadata value is used for href and text
+ */
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'span[ds-link-authority]',
+  templateUrl: './link-authority.component.html',
+  styleUrls: ['./link-authority.component.scss']
+})
+@MetadataBoxFieldRendering(FieldRenderingType.AUTHORITYLINK)
+export class LinkAuthorityComponent extends RenderingTypeValueModelComponent implements OnInit {
+
+  /**
+   * The link to render
+   */
+  link: MetadataLinkValue;
+  iconStyle: string;
+
+
+  constructor(
+    @Inject('fieldProvider') public fieldProvider: LayoutField,
+    @Inject('itemProvider') public itemProvider: Item,
+    @Inject('metadataValueProvider') public metadataValueProvider: MetadataValue,
+    @Inject('renderingSubTypeProvider') public renderingSubTypeProvider: string,
+    protected translateService: TranslateService
+  ) {
+    super(fieldProvider, itemProvider, metadataValueProvider, renderingSubTypeProvider, translateService);
+  }
+
+  ngOnInit(): void {
+    this.link = this.getLinkFromValue();
+    this.iconStyle = this.getWebsiteIcon();
+  }
+
+  /**
+   * Get the link value to render
+   */
+  getLinkFromValue(): MetadataLinkValue {
+    return {
+      href: this.metadataValue.authority,
+      text: this.metadataValue.value
+    };
+  }
+
+  getWebsiteIcon(): string {
+    const siteUrl = this.metadataValue.authority;
+    let iconStyle = '';
+
+    if (siteUrl.includes('linkedin')) {
+      iconStyle = 'fab fa-linkedin';
+    } else if (siteUrl.includes('twitter')) {
+      iconStyle = 'fa-brands fa-x-twitter';
+    } else if (siteUrl.includes('instagram')) {
+      iconStyle = 'fab fa-instagram';
+    } else if (siteUrl.includes('facebook')) {
+      iconStyle = 'fab fa-facebook';
+    }
+    return iconStyle;
+  }
+}
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts
@@ -75,10 +75,10 @@ export class DsoEditMetadataValue {
   confirmChanges(finishEditing = false) {
     this.reordered = this.originalValue.place !== this.newValue.place;
     if (hasNoValue(this.change) || this.change === DsoEditMetadataChangeType.UPDATE) {
-      if ((this.originalValue.value !== this.newValue.value || this.originalValue.language !== this.newValue.language)) {
+      if ((this.originalValue.value !== this.newValue.value || this.originalValue.language !== this.newValue.language || this.originalValue.authority !== this.newValue.authority)) {
         this.change = DsoEditMetadataChangeType.UPDATE;
-      } else {
-        this.change = undefined;
+      } else if (!hasValue(this.originalValue.authority) && hasValue(this.newValue.authority)) {
+        this.change = DsoEditMetadataChangeType.ADD;
       }
     }
     if (finishEditing) {
@@ -419,10 +419,11 @@ export class DsoEditMetadataForm {
           if (hasValue(value.change)) {
             if (value.change === DsoEditMetadataChangeType.UPDATE) {
               // Only changes to value or language are considered "replace" operations. Changes to place are considered "move", which is processed below.
-              if (value.originalValue.value !== value.newValue.value || value.originalValue.language !== value.newValue.language) {
+              if (value.originalValue.value !== value.newValue.value || value.originalValue.language !== value.newValue.language || value.originalValue.authority !== value.newValue.authority) {
                 replaceOperations.push(new MetadataPatchReplaceOperation(field, value.originalValue.place, {
                   value: value.newValue.value,
                   language: value.newValue.language,
+                  authority: value.newValue.authority,
                 }));
               }
               // "replace" the security level value
@@ -431,6 +432,7 @@ export class DsoEditMetadataForm {
                   securityLevel: value.newValue.securityLevel,
                   value: value.newValue.value,
                   language: value.newValue.language,
+                  authority: value.newValue.authority,
                 }));
               }
             } else if (value.change === DsoEditMetadataChangeType.REMOVE) {
@@ -440,7 +442,8 @@ export class DsoEditMetadataForm {
               addOperations.push(new MetadataPatchAddOperation(field, {
                 value: value.newValue.value,
                 language: value.newValue.language,
-                securityLevel: value.newValue.securityLevel
+                securityLevel: value.newValue.securityLevel,
+                authority: value.newValue.authority,
               }));
             } else {
               console.warn('Illegal metadata change state detected for', value);
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-headers/dso-edit-metadata-headers.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-headers/dso-edit-metadata-headers.component.html
@@ -4,6 +4,7 @@
     <div class="d-flex flex-row">
       <div class="flex-grow-1 ds-flex-cell ds-value-cell"><b class="dont-break-out preserve-line-breaks">{{ dsoType + '.edit.metadata.headers.value' | translate }}</b></div>
       <div class="ds-flex-cell ds-lang-cell"><b>{{ dsoType + '.edit.metadata.headers.language' | translate }}</b></div>
+      <div class="ds-flex-cell ds-authority-cell"><b>{{ dsoType + '.edit.metadata.headers.authority' | translate }}</b></div>
       <div class="ds-flex-cell ds-security-cell"><b>{{'item.edit.metadata.headers.security'| translate}}</b></div>
       <div class="text-center ds-flex-cell ds-edit-cell"><b>{{ dsoType + '.edit.metadata.headers.edit' | translate }}</b></div>
     </div>
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-headers/dso-edit-metadata-headers.component.spec.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-headers/dso-edit-metadata-headers.component.spec.ts
@@ -27,6 +27,6 @@ describe('DsoEditMetadataHeadersComponent', () => {
   });
 
   it('should display three headers', () => {
-    expect(fixture.debugElement.queryAll(By.css('.ds-flex-cell')).length).toEqual(4);
+    expect(fixture.debugElement.queryAll(By.css('.ds-flex-cell')).length).toEqual(5);
   });
 });
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-shared/dso-edit-metadata-cells.scss b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-shared/dso-edit-metadata-cells.scss
@@ -12,6 +12,11 @@
   max-width: var(--ds-dso-edit-lang-width);
 }
 
+.ds-authority-cell {
+  min-width: var(--ds-dso-edit-authority-width);
+  max-width: var(--ds-dso-edit-authority-width);
+}
+
 .ds-security-cell {
   min-width: var(--ds-dso-edit-security-width);
   max-width: var(--ds-dso-edit-security-width);
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component.html
@@ -1,5 +1,6 @@
 <div role="row" class="visually-hidden">
   <div role="columnheader">{{ dsoType + '.edit.metadata.headers.value' | translate }}</div>
   <div role="columnheader">{{ dsoType + '.edit.metadata.headers.language' | translate }}</div>
+  <div role="columnheader">{{ dsoType + '.edit.metadata.headers.authority' | translate }}</div>
   <div role="columnheader">{{ dsoType + '.edit.metadata.headers.edit' | translate }}</div>
 </div>
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html
@@ -15,6 +15,11 @@
     <input class="form-control" type="text" *ngIf="mdValue.editing" [(ngModel)]="mdValue.newValue.language"
            [dsDebounce]="300" (onDebounce)="confirm.emit(false)" />
   </div>
+  <div class="ds-flex-cell ds-authority-cell" role="cell">
+    <div class="dont-break-out preserve-line-breaks" *ngIf="!mdValue.editing">{{ mdValue.newValue.authority }}</div>
+    <textarea class="form-control" rows="5" *ngIf="mdValue.editing" [(ngModel)]="mdValue.newValue.authority"
+              [dsDebounce]="300" (onDebounce)="confirm.emit(false)"></textarea>
+  </div>
   <div class="flex-grow-1 ds-flex-cell ds-security-cell d-flex justify-content-center" role="cell">
     <div class="btn-group edit-field">
       <ds-edit-metadata-security *ngIf="canShowMetadataSecurity$ | async"
diff --git a/src/app/item-page/edit-item-page/edit-item-page.component.html b/src/app/item-page/edit-item-page/edit-item-page.component.html
@@ -1,4 +1,4 @@
-<div class="container">
+<div class="bern-component-container mt-4">
     <div class="row">
         <div class="col-12">
             <h2 class="border-bottom">{{'item.edit.head' | translate}}</h2>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-link.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-link.model.ts
@@ -0,0 +1,49 @@
+
+import { DynamicConcatModel } from './ds-dynamic-concat.model';
+import { DsDynamicInputModel } from './ds-dynamic-input.model';
+import { FormFieldMetadataValueObject } from '../../models/form-field-metadata-value.model';
+import { hasNoValue, isNotEmpty,  } from '../../../../empty.util';
+
+
+export class DynamicLinkModel extends DynamicConcatModel {
+    get value() {
+        const [firstValue, secondValue] = this.group.map((inputModel: DsDynamicInputModel) =>
+            (typeof inputModel.value === 'string') ?
+                Object.assign(new FormFieldMetadataValueObject(), {value: inputModel.value, display: inputModel.value}) :
+                (inputModel.value as any));
+        if (isNotEmpty(firstValue) && isNotEmpty(firstValue.value) && isNotEmpty(secondValue) && isNotEmpty(secondValue.value)) {
+            return Object.assign(new FormFieldMetadataValueObject(), firstValue, {value: firstValue.value, authority: secondValue.value});
+        } else if (isNotEmpty(firstValue) && isNotEmpty(firstValue.value)) {
+            return Object.assign(new FormFieldMetadataValueObject(), firstValue);
+        } else if (isNotEmpty(secondValue) && isNotEmpty(secondValue.value)) {
+            return Object.assign(new FormFieldMetadataValueObject(), secondValue, {value: secondValue.value, authority: secondValue.value});
+        } else {
+            return new FormFieldMetadataValueObject();
+        }
+    }
+
+    set value(value: FormFieldMetadataValueObject) {
+        let tempValue: string;
+
+        if (isNotEmpty(value)) {
+            tempValue = value?.value;
+        }
+
+        if (hasNoValue(tempValue)) {
+            tempValue = '';
+        }
+
+        if (value.value) {
+            (this.get(0) as DsDynamicInputModel).value = tempValue;
+        } else {
+            (this.get(0) as DsDynamicInputModel).value = undefined;
+        }
+        if (value?.authority && value.value) {
+            (this.get(1) as DsDynamicInputModel).value = value?.authority;
+        } else if (value?.authority && !value.value) {
+            (this.get(1) as DsDynamicInputModel).value = value?.authority;
+            (this.get(0) as DsDynamicInputModel).value = value?.authority;
+        }
+    }
+
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/link/dynamic-link.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/link/dynamic-link.model.ts
@@ -0,0 +1,25 @@
+import { AUTOCOMPLETE_OFF, DynamicFormControlLayout, serializable } from '@ng-dynamic-forms/core';
+import { DsDynamicInputModel, DsDynamicInputModelConfig } from '../ds-dynamic-input.model';
+
+export const DYNAMIC_FORM_CONTROL_TYPE_LINK = 'LINK';
+
+export interface DsDynamicLinkModelConfig extends DsDynamicInputModelConfig {
+  value?: any;
+  submissionScope?: string;
+}
+
+export class DynamicLinkModel extends DsDynamicInputModel {
+
+  @serializable() minChars: number;
+  @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_LINK;
+  @serializable() submissionScope: string;
+
+  constructor(config: DsDynamicLinkModelConfig, layout?: DynamicFormControlLayout) {
+
+    super(config, layout);
+
+    this.autoComplete = AUTOCOMPLETE_OFF;
+    this.submissionScope = config.submissionScope;
+  }
+
+}
diff --git a/src/app/shared/form/builder/parsers/link-field-parser.ts b/src/app/shared/form/builder/parsers/link-field-parser.ts
@@ -0,0 +1,125 @@
+import { Inject } from '@angular/core';
+import { FormFieldModel } from '../models/form-field.model';
+import { ConcatFieldParser } from './concat-field-parser';
+import { CONFIG_DATA, INIT_FORM_VALUES, PARSER_OPTIONS, SECURITY_CONFIG, SUBMISSION_ID } from './field-parser';
+import { ParserOptions } from './parser-options';
+import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
+import { DynamicFormControlLayout } from '@ng-dynamic-forms/core';
+import {
+    CONCAT_FIRST_INPUT_SUFFIX, CONCAT_SECOND_INPUT_SUFFIX,
+    DynamicConcatModelConfig
+} from '../ds-dynamic-form-ui/models/ds-dynamic-concat.model';
+import { DsDynamicInputModel, DsDynamicInputModelConfig } from '../ds-dynamic-form-ui/models/ds-dynamic-input.model';
+import { hasNoValue, hasValue, isNotEmpty } from '../../../empty.util';
+import { DynamicLinkModel } from '../ds-dynamic-form-ui/models/ds-dynamic-link.model';
+
+export class LinkFieldParser extends ConcatFieldParser {
+
+    constructor(
+        @Inject(SUBMISSION_ID) submissionId: string,
+        @Inject(CONFIG_DATA) configData: FormFieldModel,
+        @Inject(INIT_FORM_VALUES) initFormValues,
+        @Inject(PARSER_OPTIONS) parserOptions: ParserOptions,
+        @Inject(SECURITY_CONFIG) securityConfig: any = null
+    ) {
+        super(submissionId, configData, initFormValues, parserOptions, securityConfig, ',', 'Label', 'Value');
+    }
+
+    public modelFactory(fieldValue?: FormFieldMetadataValueObject | any, label?: boolean): any {
+        let clsGroup: DynamicFormControlLayout;
+        let clsInput1: DynamicFormControlLayout;
+        let clsInput2: DynamicFormControlLayout;
+        const id: string = this.configData.selectableMetadata[0].metadata;
+
+        clsInput1 = {
+            grid: {
+                host: 'col-sm-6'
+            }
+        };
+        clsInput2 = {
+            grid: {
+                host: 'col-sm-6 d-flex flex-column justify-content-start'
+            }
+        };
+
+        const concatGroup: DynamicConcatModelConfig = this.initModel(id, label, false, true);
+
+        concatGroup.group = [];
+
+        const input1ModelConfig: DsDynamicInputModelConfig = this.initModel(
+            id + CONCAT_FIRST_INPUT_SUFFIX,
+            false,
+            true,
+            true,
+            false
+        );
+        input1ModelConfig.name = this.getFieldId();
+        const input2ModelConfig: DsDynamicInputModelConfig = this.initModel(
+            id + CONCAT_SECOND_INPUT_SUFFIX,
+            false,
+            true,
+            false,
+            false
+        );
+
+        input1ModelConfig.hideErrorMessages = true;
+        input2ModelConfig.hideErrorMessages = true;
+
+        if (hasNoValue(concatGroup.hint) && hasValue(input1ModelConfig.hint) && hasNoValue(input2ModelConfig.hint)) {
+            concatGroup.hint = input1ModelConfig.hint;
+            input1ModelConfig.hint = undefined;
+        }
+
+        if (this.configData.mandatory) {
+            concatGroup.required = true;
+            input1ModelConfig.required = true;
+        }
+
+        concatGroup.disabled = input1ModelConfig.readOnly;
+
+        if (isNotEmpty(this.firstPlaceholder)) {
+            input1ModelConfig.placeholder = this.firstPlaceholder;
+        }
+
+        if (isNotEmpty(this.secondPlaceholder)) {
+            input2ModelConfig.placeholder = this.secondPlaceholder;
+        }
+
+        // Split placeholder if is like 'placeholder1/placeholder2'
+        const placeholder = this.configData.label.split('/');
+        if (placeholder.length === 2) {
+            input1ModelConfig.placeholder = placeholder[0];
+            input2ModelConfig.placeholder = placeholder[1];
+        }
+
+        const model1 = new DsDynamicInputModel(input1ModelConfig, clsInput1);
+        const model2 = new DsDynamicInputModel(input2ModelConfig, clsInput2);
+
+        // only for the first input add security visibility
+        (model1 as any).toggleSecurityVisibility = false;
+        (model2 as any).toggleSecurityVisibility = false;
+        // attach the security config for children
+        (model1 as any).securityConfigLevel = (concatGroup as any).securityConfigLevel;
+        (model2 as any).securityConfigLevel = (concatGroup as any).securityConfigLevel;
+        concatGroup.group.push(model1);
+        concatGroup.group.push(model2);
+
+        clsGroup = {
+            element: {
+                control: 'form-row',
+            }
+        };
+        this.initSecurityValue(concatGroup, fieldValue);
+        const concatModel = new DynamicLinkModel(concatGroup, clsGroup);
+        concatModel.name = this.getFieldId();
+        console.log(concatModel, fieldValue);
+        // Init values
+        if (isNotEmpty(fieldValue)) {
+            concatModel.value = fieldValue;
+        }
+
+
+        return concatModel;
+    }
+
+}
diff --git a/src/app/shared/form/builder/parsers/parser-factory.ts b/src/app/shared/form/builder/parsers/parser-factory.ts
diff --git a/src/app/shared/form/builder/parsers/parser-type.ts b/src/app/shared/form/builder/parsers/parser-type.ts
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div class="container">`
	`1`	`+<div class="bern-component-container mt-4">`
`2`	`2`	`<div class="row">`
`3`	`3`	`<div class="col-12">`
`4`	`4`	`<h2 class="border-bottom">{{'item.edit.head' \| translate}}</h2>`