-
-
-
-
+
diff --git a/ng2-components/ng2-alfresco-core/src/components/view/adf-card-view.component.scss b/ng2-components/ng2-alfresco-core/src/components/view/adf-card-view.component.scss
new file mode 100644
index 0000000000..d4e693ef24
--- /dev/null
+++ b/ng2-components/ng2-alfresco-core/src/components/view/adf-card-view.component.scss
@@ -0,0 +1,32 @@
+@import 'theming';
+
+.#{$ADF} {
+ &-property-list {
+ display: table;
+ width: 100%;
+ border-collapse: collapse;
+ border-spacing: 0;
+ }
+
+ &-property {
+ display: table-row;
+ }
+
+ &-property /deep/ &-property-label {
+ display: table-cell;
+ min-width: 100px;
+ padding-right: 30px;
+ word-wrap: break-word;
+ color: rgb(186, 186, 186);
+ vertical-align: top;
+ padding-bottom: 20px;
+ }
+
+ &-property /deep/ &-property-value {
+ width: 100%;
+ display: table-cell;
+ color: rgb(101, 101, 101);
+ vertical-align: top;
+ padding-bottom: 20px;
+ }
+}
diff --git a/ng2-components/ng2-alfresco-core/src/components/view/adf-card-view.component.spec.ts b/ng2-components/ng2-alfresco-core/src/components/view/adf-card-view.component.spec.ts
index 0a882630f2..1bb1d6e5e0 100644
--- a/ng2-components/ng2-alfresco-core/src/components/view/adf-card-view.component.spec.ts
+++ b/ng2-components/ng2-alfresco-core/src/components/view/adf-card-view.component.spec.ts
@@ -16,8 +16,17 @@
*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { MdDatepickerModule, MdIconModule, MdInputModule, MdNativeDateModule } from '@angular/material';
import { By } from '@angular/platform-browser';
-import { CardViewModel } from '../../models/card-view.model';
+import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
+import { CardViewDateItemModel } from '../../models/card-view-dateitem.model';
+import { CardViewTextItemModel } from '../../models/card-view-textitem.model';
+import { CardViewUpdateService } from '../../services/adf-card-view-update.service';
+import { AdfCardViewContentProxyDirective } from './adf-card-view-content-proxy.directive';
+import { CardViewDateItemComponent } from './adf-card-view-dateitem.component';
+import { CardViewItemDispatcherComponent } from './adf-card-view-item-dispatcher.component';
+import { CardViewTextItemComponent } from './adf-card-view-textitem.component';
import { CardViewComponent } from './adf-card-view.component';
describe('AdfCardView', () => {
@@ -27,12 +36,32 @@ describe('AdfCardView', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
+ imports: [
+ MdDatepickerModule,
+ MdIconModule,
+ MdInputModule,
+ MdNativeDateModule,
+ FormsModule
+ ],
declarations: [
- CardViewComponent
+ CardViewComponent,
+ CardViewItemDispatcherComponent,
+ AdfCardViewContentProxyDirective,
+ CardViewTextItemComponent,
+ CardViewDateItemComponent
],
providers: [
+ CardViewUpdateService
]
- }).compileComponents();
+ });
+
+ // entryComponents are not supported yet on TestBed, that is why this ugly workaround:
+ // https://github.com/angular/angular/issues/10760
+ TestBed.overrideModule(BrowserDynamicTestingModule, {
+ set: { entryComponents: [ CardViewTextItemComponent, CardViewDateItemComponent ] }
+ });
+
+ TestBed.compileComponents();
}));
beforeEach(() => {
@@ -41,59 +70,73 @@ describe('AdfCardView', () => {
});
it('should render the label and value', async(() => {
- component.properties = [new CardViewModel({label: 'My label', value: 'My value'})];
+ component.properties = [new CardViewTextItemModel({label: 'My label', value: 'My value', key: 'some key'})];
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
- let labelValue = fixture.debugElement.query(By.css('.adf-header__label'));
+ let labelValue = fixture.debugElement.query(By.css('.adf-property-label'));
expect(labelValue).not.toBeNull();
expect(labelValue.nativeElement.innerText).toBe('My label');
- let value = fixture.debugElement.query(By.css('.adf-header__value'));
+ let value = fixture.debugElement.query(By.css('.adf-property-value'));
expect(value).not.toBeNull();
expect(value.nativeElement.innerText).toBe('My value');
});
-
}));
+ it('should pass through editable property to the items', () => {
+ component.editable = true;
+ component.properties = [new CardViewDateItemModel({
+ label: 'My date label',
+ value: '2017-06-14',
+ key: 'some-key',
+ editable: true
+ })];
+
+ fixture.detectChanges();
+
+ let datePicker = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-some-key"]`));
+ expect(datePicker).not.toBeNull('Datepicker should be in DOM');
+ });
+
it('should render the date in the correct format', async(() => {
- component.properties = [new CardViewModel({
- label: 'My date label', value: '2017-06-14',
+ component.properties = [new CardViewDateItemModel({
+ label: 'My date label', value: '2017-06-14', key: 'some key',
format: 'MMM DD YYYY'
})];
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
- let labelValue = fixture.debugElement.query(By.css('.adf-header__label'));
+ let labelValue = fixture.debugElement.query(By.css('.adf-property-label'));
expect(labelValue).not.toBeNull();
expect(labelValue.nativeElement.innerText).toBe('My date label');
- let value = fixture.debugElement.query(By.css('.adf-header__value'));
+ let value = fixture.debugElement.query(By.css('.adf-property-value'));
expect(value).not.toBeNull();
expect(value.nativeElement.innerText).toBe('Jun 14 2017');
});
-
}));
it('should render the default value if the value is empty', async(() => {
- component.properties = [new CardViewModel({
+ component.properties = [new CardViewTextItemModel({
label: 'My default label',
- default: 'default value'
+ value: null,
+ default: 'default value',
+ key: 'some key'
})];
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
- let labelValue = fixture.debugElement.query(By.css('.adf-header__label'));
+ let labelValue = fixture.debugElement.query(By.css('.adf-property-label'));
expect(labelValue).not.toBeNull();
expect(labelValue.nativeElement.innerText).toBe('My default label');
- let value = fixture.debugElement.query(By.css('.adf-header__value'));
+ let value = fixture.debugElement.query(By.css('.adf-property-value'));
expect(value).not.toBeNull();
expect(value.nativeElement.innerText).toBe('default value');
});
-
}));
});
diff --git a/ng2-components/ng2-alfresco-core/src/components/view/adf-card-view.component.ts b/ng2-components/ng2-alfresco-core/src/components/view/adf-card-view.component.ts
index da0c931bff..0aca314346 100644
--- a/ng2-components/ng2-alfresco-core/src/components/view/adf-card-view.component.ts
+++ b/ng2-components/ng2-alfresco-core/src/components/view/adf-card-view.component.ts
@@ -16,26 +16,17 @@
*/
import { Component, Input } from '@angular/core';
-import * as moment from 'moment';
-import { CardViewModel } from '../../models/card-view.model';
+import { CardViewItem } from '../../interface/card-view-item.interface';
@Component({
selector: 'adf-card-view',
templateUrl: './adf-card-view.component.html',
- styleUrls: ['./adf-card-view.component.css']
+ styleUrls: ['./adf-card-view.component.scss']
})
export class CardViewComponent {
+ @Input()
+ properties: CardViewItem [];
@Input()
- properties: CardViewModel [];
-
- getPropertyValue(property: CardViewModel): string {
- if (!property.value) {
- return property.default;
- } else if (property.format) {
- return moment(property.value).format(property.format);
- }
- return property.value;
- }
-
+ editable: boolean;
}
diff --git a/ng2-components/ng2-alfresco-core/src/components/view/card-view.module.ts b/ng2-components/ng2-alfresco-core/src/components/view/card-view.module.ts
index 3a970e98e8..10ac39bdc3 100644
--- a/ng2-components/ng2-alfresco-core/src/components/view/card-view.module.ts
+++ b/ng2-components/ng2-alfresco-core/src/components/view/card-view.module.ts
@@ -17,14 +17,34 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MdButtonModule, MdDatepickerModule, MdIconModule, MdInputModule, MdNativeDateModule } from '@angular/material';
+import { AdfCardViewContentProxyDirective } from './adf-card-view-content-proxy.directive';
+import { CardViewDateItemComponent } from './adf-card-view-dateitem.component';
+import { CardViewItemDispatcherComponent } from './adf-card-view-item-dispatcher.component';
+import { CardViewTextItemComponent } from './adf-card-view-textitem.component';
import { CardViewComponent } from './adf-card-view.component';
@NgModule({
imports: [
- CommonModule
+ CommonModule,
+ MdDatepickerModule,
+ MdNativeDateModule,
+ MdInputModule,
+ MdIconModule,
+ MdButtonModule,
+ FormsModule
],
declarations: [
- CardViewComponent
+ CardViewComponent,
+ CardViewItemDispatcherComponent,
+ AdfCardViewContentProxyDirective,
+ CardViewTextItemComponent,
+ CardViewDateItemComponent
+ ],
+ entryComponents: [
+ CardViewTextItemComponent,
+ CardViewDateItemComponent
],
exports: [
CardViewComponent
diff --git a/ng2-components/ng2-alfresco-core/src/interface/card-view-item.interface.ts b/ng2-components/ng2-alfresco-core/src/interface/card-view-item.interface.ts
new file mode 100644
index 0000000000..b3496f234e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-core/src/interface/card-view-item.interface.ts
@@ -0,0 +1,26 @@
+/*!
+ * @license
+ * Copyright 2016 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.
+ */
+
+export interface CardViewItem {
+ label: string;
+ value: any;
+ key: string;
+ default?: any;
+ type: string;
+ displayValue: string;
+ editable?: boolean;
+}
diff --git a/ng2-components/ng2-alfresco-core/src/models/card-view.model.ts b/ng2-components/ng2-alfresco-core/src/models/card-view-baseitem.model.ts
similarity index 72%
rename from ng2-components/ng2-alfresco-core/src/models/card-view.model.ts
rename to ng2-components/ng2-alfresco-core/src/models/card-view-baseitem.model.ts
index 9c804d1413..4da54a4adc 100644
--- a/ng2-components/ng2-alfresco-core/src/models/card-view.model.ts
+++ b/ng2-components/ng2-alfresco-core/src/models/card-view-baseitem.model.ts
@@ -20,21 +20,29 @@
* This object represent the basic structure of a card view.
*
*
- * @returns {CardViewModel} .
+ * @returns {CardViewBaseItemModel} .
*/
-export class CardViewModel {
+export interface CardViewItemProperties {
label: string;
value: any;
key: any;
- format: string;
- default: string;
+ default?: string;
+ editable?: boolean;
+}
- constructor(obj?: any) {
+export abstract class CardViewBaseItemModel {
+ label: string;
+ value: any;
+ key: any;
+ default: string;
+ editable: boolean;
+
+ constructor(obj: CardViewItemProperties) {
this.label = obj.label || '';
this.value = obj.value;
this.key = obj.key;
- this.format = obj.format;
this.default = obj.default;
+ this.editable = obj.editable || false;
}
}
diff --git a/ng2-components/ng2-alfresco-core/src/models/card-view-dateitem.model.ts b/ng2-components/ng2-alfresco-core/src/models/card-view-dateitem.model.ts
new file mode 100644
index 0000000000..4ff4f6ef28
--- /dev/null
+++ b/ng2-components/ng2-alfresco-core/src/models/card-view-dateitem.model.ts
@@ -0,0 +1,50 @@
+/*!
+ * @license
+ * Copyright 2016 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.
+ */
+
+/**
+ *
+ * This object represent the basic structure of a card view.
+ *
+ *
+ * @returns {CardViewDateItemModel} .
+ */
+
+import * as moment from 'moment';
+import { CardViewItem } from '../interface/card-view-item.interface';
+import { CardViewBaseItemModel, CardViewItemProperties } from './card-view-baseitem.model';
+
+export interface CardViewDateItemProperties extends CardViewItemProperties {
+ format?: string;
+}
+
+export class CardViewDateItemModel extends CardViewBaseItemModel implements CardViewItem {
+ type: string = 'date';
+ format: string;
+
+ constructor(obj: CardViewDateItemProperties) {
+ super(obj);
+ this.format = obj.format || 'MMM DD YYYY';
+ }
+
+ get displayValue() {
+ if (!this.value) {
+ return this.default;
+ } else {
+ return moment(this.value).format(this.format);
+ }
+ }
+}
diff --git a/ng2-components/ng2-alfresco-core/src/models/card-view-textitem.model.ts b/ng2-components/ng2-alfresco-core/src/models/card-view-textitem.model.ts
new file mode 100644
index 0000000000..fccfddad5a
--- /dev/null
+++ b/ng2-components/ng2-alfresco-core/src/models/card-view-textitem.model.ts
@@ -0,0 +1,44 @@
+/*!
+ * @license
+ * Copyright 2016 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.
+ */
+
+/**
+ *
+ * This object represent the basic structure of a card view.
+ *
+ *
+ * @returns {CardViewTextItemModel} .
+ */
+
+import { CardViewItem } from '../interface/card-view-item.interface';
+import { CardViewBaseItemModel, CardViewItemProperties } from './card-view-baseitem.model';
+
+export interface CardViewTextItemProperties extends CardViewItemProperties {
+ multiline?: boolean;
+}
+export class CardViewTextItemModel extends CardViewBaseItemModel implements CardViewItem {
+ type: string = 'text';
+ multiline: boolean;
+
+ constructor(obj: CardViewTextItemProperties) {
+ super(obj);
+ this.multiline = obj.multiline || false;
+ }
+
+ get displayValue() {
+ return this.value || this.default;
+ }
+}
diff --git a/ng2-components/ng2-alfresco-core/src/models/index.ts b/ng2-components/ng2-alfresco-core/src/models/index.ts
index fff2631f30..956380ce41 100644
--- a/ng2-components/ng2-alfresco-core/src/models/index.ts
+++ b/ng2-components/ng2-alfresco-core/src/models/index.ts
@@ -15,5 +15,6 @@
* limitations under the License.
*/
-export * from './card-view.model';
+export * from './card-view-textitem.model';
+export * from './card-view-dateitem.model';
export * from './file.model';
diff --git a/ng2-components/ng2-alfresco-core/src/services/adf-card-view-update.service.ts b/ng2-components/ng2-alfresco-core/src/services/adf-card-view-update.service.ts
new file mode 100644
index 0000000000..3821af74ab
--- /dev/null
+++ b/ng2-components/ng2-alfresco-core/src/services/adf-card-view-update.service.ts
@@ -0,0 +1,42 @@
+/*!
+ * @license
+ * Copyright 2016 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 { Injectable } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+import { CardViewBaseItemModel } from '../models/card-view-baseitem.model';
+
+export interface UpdateNotification {
+ target: any;
+ changed: any;
+}
+
+@Injectable()
+export class CardViewUpdateService {
+
+ // Observable sources
+ private itemUpdatedSource = new Subject
();
+
+ // Observable streams
+ public itemUpdated$ = this.itemUpdatedSource.asObservable();
+
+ update(property: CardViewBaseItemModel, changed: any) {
+ this.itemUpdatedSource.next({
+ target: property,
+ changed
+ });
+ }
+}
diff --git a/ng2-components/ng2-alfresco-core/src/services/index.ts b/ng2-components/ng2-alfresco-core/src/services/index.ts
index 366db8fbb2..eb4bbb3393 100644
--- a/ng2-components/ng2-alfresco-core/src/services/index.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/index.ts
@@ -33,3 +33,4 @@ export * from './alfresco-translate-loader.service';
export * from './app-config.service';
export * from './thumbnail.service';
export * from './upload.service';
+export * from './adf-card-view-update.service';
diff --git a/ng2-components/ng2-alfresco-login/README.md b/ng2-components/ng2-alfresco-login/README.md
index 023f0ef82f..e4ca4d87ba 100644
--- a/ng2-components/ng2-alfresco-login/README.md
+++ b/ng2-components/ng2-alfresco-login/README.md
@@ -77,6 +77,7 @@ export class AppComponent {
| needHelpLink | string | | It will change the url of the NEED HELP link in the footer |
| registerLink | string | | It will change the url of the REGISTER link in the footer |
| logoImageUrl | string | Alfresco logo image | To change the logo image with a customised image |
+| copyrightText | string | © 2016 Alfresco Software, Inc. All Rights Reserved. | The copyright text below the login box |
| backgroundImageUrl | string | Alfresco background image | To change the background image with a customised image |
| fieldsValidation | { [key: string]: any; }, extra?: { [key: string]: any; } | | Use it to customise the validation rules of the login form |
| showRememberMe | boolean | false | Toggle `Remember me` checkbox visibility |
diff --git a/ng2-components/ng2-alfresco-login/config/webpack.common.js b/ng2-components/ng2-alfresco-login/config/webpack.common.js
index f90fe35645..53caec66fd 100644
--- a/ng2-components/ng2-alfresco-login/config/webpack.common.js
+++ b/ng2-components/ng2-alfresco-login/config/webpack.common.js
@@ -63,8 +63,17 @@ module.exports = {
exclude: [/node_modules/, /bundles/, /dist/, /demo/]
},
{
- test: /\.component.scss$/,
- use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+ test: /\.scss$/,
+ use: [{
+ loader: "to-string-loader"
+ }, {
+ loader: "raw-loader"
+ }, {
+ loader: "sass-loader",
+ options: {
+ includePaths: [ path.resolve(__dirname, '../../ng2-alfresco-core/styles')]
+ }
+ }],
exclude: [/node_modules/, /bundles/, /dist/, /demo/]
},
{
diff --git a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html
index 09851f9928..e862f8875e 100644
--- a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html
+++ b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html
@@ -107,7 +107,7 @@