inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-4522] Metadata value is not rolled back upon error (#5550)

Browse Source 
* * initial commit

* * removed breaking change

* * fixed ts

* * fixed minor changes

* * fixed changes

* * minor changes

* * fixed unit test

* * docs added

* * fixed date clear problem

* * fixed unit test
This commit is contained in:
dhrn
2020-03-17 16:17:08 +05:30
committed by GitHub
parent becf45d150
commit d720d36670
18 changed files with 191 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
lib/core/card-view/components/base-card-view.ts Normal file
View File

@@ -0,0 +1,47 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Input, OnDestroy } from '@angular/core';
import { CardViewUpdateService } from '../services/card-view.services';
import { CardViewItem } from '../interfaces/card-view.interfaces';
import { CardViewBaseItemModel } from '../models/card-view-baseitem.model';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
export abstract class BaseCardView<T extends CardViewItem> implements OnDestroy {
@Input()
property: T;
protected destroy$ = new Subject<boolean>();
constructor(protected cardViewUpdateService: CardViewUpdateService) {
this.cardViewUpdateService.updateItem$
.pipe(takeUntil(this.destroy$))
.subscribe((itemModel: CardViewBaseItemModel) => {
if (this.property.key === itemModel.key) {
this.property.value = itemModel.value;
}
});
}
ngOnDestroy(): void {
this.destroy$.next(true);
this.destroy$.complete();
}
}

13
lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.ts
View File

@@ -15,22 +15,21 @@
* limitations under the License.
*/
import { Component, Input } from '@angular/core';
import { Component } from '@angular/core';
import { CardViewArrayItemModel } from '../../models/card-view-arrayitem.model';
import { CardViewUpdateService } from '../../services/card-view-update.service';
import { BaseCardView } from '../base-card-view';
@Component({
selector: 'adf-card-view-arrayitem',
templateUrl: './card-view-arrayitem.component.html',
styleUrls: ['./card-view-arrayitem.component.scss']
})
export class CardViewArrayItemComponent {
export class CardViewArrayItemComponent extends BaseCardView<CardViewArrayItemModel> {
/** The CardViewArrayItemModel of data used to populate the cardView array items. */
@Input()
property: CardViewArrayItemModel;
constructor(private cardViewUpdateService: CardViewUpdateService) {}
constructor(cardViewUpdateService: CardViewUpdateService) {
super(cardViewUpdateService);
}
clicked(): void {
if (this.isClickable()) {

6
lib/core/card-view/components/card-view-boolitem/card-view-boolitem.component.spec.ts
View File

@@ -178,10 +178,11 @@ describe('CardViewBoolItemComponent', () => {
it('should trigger the update event when changing the checkbox', () => {
const cardViewUpdateService = TestBed.get(CardViewUpdateService);
spyOn(cardViewUpdateService, 'update');
const property = { ... component.property };
component.changed(<MatCheckboxChange> { checked: true });
expect(cardViewUpdateService.update).toHaveBeenCalledWith(component.property, true);
expect(cardViewUpdateService.update).toHaveBeenCalledWith(property, true);
});
it('should update the property value after a changed', async(() => {
@@ -198,10 +199,11 @@ describe('CardViewBoolItemComponent', () => {
const cardViewUpdateService = TestBed.get(CardViewUpdateService);
component.property.value = false;
fixture.detectChanges();
const property = { ...component.property };
const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe(
(updateNotification) => {
expect(updateNotification.target).toBe(component.property);
expect(updateNotification.target).toEqual(property);
expect(updateNotification.changed).toEqual({ boolkey: true });
disposableUpdate.unsubscribe();
done();

12
lib/core/card-view/components/card-view-boolitem/card-view-boolitem.component.ts
View File

@@ -19,6 +19,7 @@ import { Component, Input } from '@angular/core';
import { MatCheckboxChange } from '@angular/material';
import { CardViewBoolItemModel } from '../../models/card-view-boolitem.model';
import { CardViewUpdateService } from '../../services/card-view-update.service';
import { BaseCardView } from '../base-card-view';
@Component({
selector: 'adf-card-view-boolitem',
@@ -26,22 +27,21 @@ import { CardViewUpdateService } from '../../services/card-view-update.service';
styleUrls: ['./card-view-boolitem.component.scss']
})
export class CardViewBoolItemComponent {
@Input()
property: CardViewBoolItemModel;
export class CardViewBoolItemComponent extends BaseCardView<CardViewBoolItemModel> {
@Input()
editable: boolean;
constructor(private cardViewUpdateService: CardViewUpdateService) {}
constructor(cardViewUpdateService: CardViewUpdateService) {
super(cardViewUpdateService);
}
isEditable() {
return this.editable && this.property.editable;
}
changed(change: MatCheckboxChange) {
this.cardViewUpdateService.update(this.property, change.checked );
this.cardViewUpdateService.update(<CardViewBoolItemModel> { ...this.property }, change.checked );
this.property.value = change.checked;
}
}

6
lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts
View File

@@ -189,10 +189,11 @@ describe('CardViewDateItemComponent', () => {
const cardViewUpdateService = TestBed.get(CardViewUpdateService);
const expectedDate = moment('Jul 10 2017', 'MMM DD YY');
fixture.detectChanges();
const property = { ...component.property };
const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe(
(updateNotification) => {
expect(updateNotification.target).toBe(component.property);
expect(updateNotification.target).toEqual(property);
expect(updateNotification.changed).toEqual({ dateKey: expectedDate.toDate() });
disposableUpdate.unsubscribe();
done();
@@ -287,10 +288,11 @@ describe('CardViewDateItemComponent', () => {
component.property.value = 'Jul 10 2017';
fixture.detectChanges();
const cardViewUpdateService = TestBed.get(CardViewUpdateService);
const property = { ...component.property };
const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe(
(updateNotification) => {
expect(updateNotification.target).toBe(component.property);
expect(updateNotification.target).toEqual(property);
expect(updateNotification.changed).toEqual({ dateKey: null });
disposableUpdate.unsubscribe();
}

16
lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts
View File

@@ -15,10 +15,10 @@
* limitations under the License.
*/
import { Component, Input, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
import { MatDatetimepicker, DatetimeAdapter, MAT_DATETIME_FORMATS } from '@mat-datetimepicker/core';
import { MomentDatetimeAdapter, MAT_MOMENT_DATETIME_FORMATS } from '@mat-datetimepicker/moment';
import { DatetimeAdapter, MAT_DATETIME_FORMATS, MatDatetimepicker } from '@mat-datetimepicker/core';
import { MAT_MOMENT_DATETIME_FORMATS, MomentDatetimeAdapter } from '@mat-datetimepicker/moment';
import moment from 'moment-es6';
import { Moment } from 'moment';
import { CardViewDateItemModel } from '../../models/card-view-dateitem.model';
@@ -29,6 +29,7 @@ import { MOMENT_DATE_FORMATS } from '../../../utils/moment-date-formats.model';
import { AppConfigService } from '../../../app-config/app-config.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { BaseCardView } from '../base-card-view';
@Component({
providers: [
@@ -41,7 +42,7 @@ import { takeUntil } from 'rxjs/operators';
templateUrl: './card-view-dateitem.component.html',
styleUrls: ['./card-view-dateitem.component.scss']
})
export class CardViewDateItemComponent implements OnInit, OnDestroy {
export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemModel> implements OnInit, OnDestroy {
@Input()
property: CardViewDateItemModel;
@@ -63,10 +64,11 @@ export class CardViewDateItemComponent implements OnInit, OnDestroy {
private onDestroy$ = new Subject<boolean>();
constructor(private cardViewUpdateService: CardViewUpdateService,
constructor(cardViewUpdateService: CardViewUpdateService,
private dateAdapter: DateAdapter<Moment>,
private userPreferencesService: UserPreferencesService,
private appConfig: AppConfigService) {
super(cardViewUpdateService);
this.dateFormat = this.appConfig.get('dateValues.defaultDateFormat');
}
@@ -112,7 +114,7 @@ export class CardViewDateItemComponent implements OnInit, OnDestroy {
const momentDate = moment(newDateValue.value, this.dateFormat, true);
if (momentDate.isValid()) {
this.valueDate = momentDate;
this.cardViewUpdateService.update(this.property, momentDate.toDate());
this.cardViewUpdateService.update(<CardViewDateItemModel> { ...this.property }, momentDate.toDate());
this.property.value = momentDate.toDate();
}
}
@@ -120,7 +122,7 @@ export class CardViewDateItemComponent implements OnInit, OnDestroy {
onDateClear() {
this.valueDate = null;
this.cardViewUpdateService.update(this.property, null);
this.cardViewUpdateService.update(<CardViewDateItemModel> { ...this.property }, null);
this.property.value = null;
this.property.default = null;
}

12
lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.ts
View File

@@ -20,6 +20,7 @@ import { CardViewUpdateService } from '../../services/card-view-update.service';
import { CardViewKeyValuePairsItemModel } from '../../models/card-view.models';
import { CardViewKeyValuePairsItemType } from '../../interfaces/card-view.interfaces';
import { MatTableDataSource } from '@angular/material';
import { BaseCardView } from '../base-card-view';
@Component({
selector: 'adf-card-view-boolitem',
@@ -27,10 +28,7 @@ import { MatTableDataSource } from '@angular/material';
styleUrls: ['./card-view-keyvaluepairsitem.component.scss']
})
export class CardViewKeyValuePairsItemComponent implements OnChanges {
@Input()
property: CardViewKeyValuePairsItemModel;
export class CardViewKeyValuePairsItemComponent extends BaseCardView<CardViewKeyValuePairsItemModel> implements OnChanges {
@Input()
editable: boolean = false;
@@ -38,7 +36,9 @@ export class CardViewKeyValuePairsItemComponent implements OnChanges {
values: CardViewKeyValuePairsItemType[];
matTableValues: MatTableDataSource<CardViewKeyValuePairsItemType>;
constructor(private cardViewUpdateService: CardViewUpdateService) {}
constructor(cardViewUpdateService: CardViewUpdateService) {
super(cardViewUpdateService);
}
ngOnChanges() {
this.values = this.property.value || [];
@@ -68,7 +68,7 @@ export class CardViewKeyValuePairsItemComponent implements OnChanges {
const validValues = this.values.filter((i) => i.name.length && i.value.length);
if (remove || validValues.length) {
this.cardViewUpdateService.update(this.property, validValues);
this.cardViewUpdateService.update(<CardViewKeyValuePairsItemModel> { ...this.property }, validValues);
this.property.value = validValues;
}
}

7
lib/core/card-view/components/card-view-mapitem/card-view-mapitem.component.ts
View File

@@ -18,6 +18,7 @@
import { Component, Input } from '@angular/core';
import { CardViewMapItemModel } from '../../models/card-view-mapitem.model';
import { CardViewUpdateService } from '../../services/card-view-update.service';
import { BaseCardView } from '../base-card-view';
@Component({
selector: 'adf-card-view-mapitem',
@@ -25,14 +26,16 @@ import { CardViewUpdateService } from '../../services/card-view-update.service';
styleUrls: ['./card-view-mapitem.component.scss']
})
export class CardViewMapItemComponent {
export class CardViewMapItemComponent extends BaseCardView<CardViewMapItemModel> {
@Input()
property: CardViewMapItemModel;
@Input()
displayEmpty: boolean = true;
constructor(private cardViewUpdateService: CardViewUpdateService) {}
constructor(cardViewUpdateService: CardViewUpdateService) {
super(cardViewUpdateService);
}
showProperty() {
return this.displayEmpty || !this.property.isEmpty();

10
lib/core/card-view/components/card-view-selectitem/card-view-selectitem.component.ts
View File

@@ -21,14 +21,14 @@ import { CardViewUpdateService } from '../../services/card-view-update.service';
import { Observable } from 'rxjs';
import { CardViewSelectItemOption } from '../../interfaces/card-view.interfaces';
import { MatSelectChange } from '@angular/material';
import { BaseCardView } from '../base-card-view';
@Component({
selector: 'adf-card-view-selectitem',
templateUrl: './card-view-selectitem.component.html',
styleUrls: ['./card-view-selectitem.component.scss']
})
export class CardViewSelectItemComponent implements OnChanges {
@Input() property: CardViewSelectItemModel<string>;
export class CardViewSelectItemComponent extends BaseCardView<CardViewSelectItemModel<string>> implements OnChanges {
@Input() editable: boolean = false;
@@ -39,7 +39,9 @@ export class CardViewSelectItemComponent implements OnChanges {
value: string;
constructor(private cardViewUpdateService: CardViewUpdateService) {}
constructor(cardViewUpdateService: CardViewUpdateService) {
super(cardViewUpdateService);
}
ngOnChanges(): void {
this.value = this.property.value;
@@ -55,7 +57,7 @@ export class CardViewSelectItemComponent implements OnChanges {
onChange(event: MatSelectChange): void {
const selectedOption = event.value !== undefined ? event.value : null;
this.cardViewUpdateService.update(this.property, selectedOption);
this.cardViewUpdateService.update(<CardViewSelectItemModel<string>> { ...this.property }, selectedOption);
this.property.value = selectedOption;
}

33
lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
View File

@@ -265,7 +265,7 @@ describe('CardViewTextItemComponent', () => {
fixture.detectChanges();
const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
expect(updateNotification.target).toBe(component.property);
expect(updateNotification.target).toEqual({ ...component.property });
expect(updateNotification.changed).toEqual({ textkey: expectedText });
disposableUpdate.unsubscribe();
});
@@ -309,10 +309,11 @@ describe('CardViewTextItemComponent', () => {
const cardViewUpdateService = TestBed.get(CardViewUpdateService);
spyOn(cardViewUpdateService, 'update');
component.editedValue = 'updated-value';
const property = { ...component.property };
component.update(event);
expect(cardViewUpdateService.update).toHaveBeenCalledWith(component.property, 'updated-value');
expect(cardViewUpdateService.update).toHaveBeenCalledWith(property, 'updated-value');
});
it('should NOT trigger the update event if the editedValue is invalid', () => {
@@ -384,7 +385,7 @@ describe('CardViewTextItemComponent', () => {
const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe(
(updateNotification) => {
expect(updateNotification.target).toBe(component.property);
expect(updateNotification.target).toEqual({ ...component.property });
expect(updateNotification.changed).toEqual({ textkey: expectedText });
disposableUpdate.unsubscribe();
done();
@@ -413,7 +414,7 @@ describe('CardViewTextItemComponent', () => {
const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe(
(updateNotification) => {
expect(updateNotification.target).toBe(component.property);
expect(updateNotification.target).toEqual({ ...component.property });
expect(updateNotification.changed).toEqual({ textkey: expectedText });
disposableUpdate.unsubscribe();
}
@@ -437,6 +438,24 @@ describe('CardViewTextItemComponent', () => {
expect(component.property.value).toBe(expectedText);
}));
it('should update the value using the updateItem$ subject', async(() => {
component.inEdit = false;
component.property.isValid = () => true;
const cardViewUpdateService = TestBed.get(CardViewUpdateService);
const expectedText = 'changed text';
fixture.detectChanges();
const textItemReadOnly = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
expect(textItemReadOnly.nativeElement.textContent).toEqual('Lorem ipsum');
expect(component.property.value).toBe('Lorem ipsum');
cardViewUpdateService.updateElement({ key: component.property.key, value: expectedText });
fixture.detectChanges();
expect(textItemReadOnly.nativeElement.textContent).toEqual(expectedText);
expect(component.property.value).toBe(expectedText);
}));
it('should reset the value using the escape key', async(() => {
component.inEdit = false;
component.property.isValid = () => true;
@@ -488,7 +507,7 @@ describe('CardViewTextItemComponent', () => {
fixture.detectChanges();
const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
expect(updateNotification.target).toBe(component.property);
expect(updateNotification.target).toEqual({ ...component.property });
expect(updateNotification.changed).toEqual({ textkey: expectedText });
disposableUpdate.unsubscribe();
});
@@ -625,7 +644,7 @@ describe('CardViewTextItemComponent', () => {
expect(component.property.value).not.toEqual(expectedNumber);
const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
expect(updateNotification.target).toBe(component.property);
expect(updateNotification.target).toEqual({ ...component.property });
expect(updateNotification.changed).toEqual({ textkey: expectedNumber.toString() });
disposableUpdate.unsubscribe();
});
@@ -699,7 +718,7 @@ describe('CardViewTextItemComponent', () => {
fixture.detectChanges();
const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
expect(updateNotification.target).toBe(component.property);
expect(updateNotification.target).toEqual({ ...component.property });
expect(updateNotification.changed).toEqual({ textkey: expectedFloat.toString() });
disposableUpdate.unsubscribe();
});

11
lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts
View File

@@ -19,19 +19,17 @@ import { Component, Input, OnChanges, ViewChild } from '@angular/core';
import { CardViewTextItemModel } from '../../models/card-view-textitem.model';
import { CardViewUpdateService } from '../../services/card-view-update.service';
import { AppConfigService } from '../../../app-config/app-config.service';
import { BaseCardView } from '../base-card-view';
@Component({
selector: 'adf-card-view-textitem',
templateUrl: './card-view-textitem.component.html',
styleUrls: ['./card-view-textitem.component.scss']
})
export class CardViewTextItemComponent implements OnChanges {
export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemModel> implements OnChanges {
static DEFAULT_SEPARATOR = ', ';
@Input()
property: CardViewTextItemModel;
@Input()
editable: boolean = false;
@@ -46,8 +44,9 @@ export class CardViewTextItemComponent implements OnChanges {
errorMessages: string[];
valueSeparator: string;
constructor(private cardViewUpdateService: CardViewUpdateService,
constructor(cardViewUpdateService: CardViewUpdateService,
private appConfig: AppConfigService) {
super(cardViewUpdateService);
this.valueSeparator = this.appConfig.get<string>('content-metadata.multi-value-pipe-separator') || CardViewTextItemComponent.DEFAULT_SEPARATOR;
}
@@ -105,7 +104,7 @@ export class CardViewTextItemComponent implements OnChanges {
if (this.property.isValid(this.editedValue)) {
const updatedValue = this.prepareValueForUpload(this.property, this.editedValue);
this.cardViewUpdateService.update(this.property, updatedValue);
this.cardViewUpdateService.update(<CardViewTextItemModel> { ...this.property }, updatedValue);
this.property.value = updatedValue;
this.setEditMode(false);
this.resetErrorMessages();