inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-06-30 18:15:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

CardViewItem in demo-shell (#3562)

Browse Source
This commit is contained in:
Alex Bolboșenco 2018-07-05 16:46:38 +03:00 committed by Eugenio Romano
parent edf82d9c05
commit 65ac1d37c4
9 changed files with 187 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demo-shell/resources/i18n/en.json
View File

@ -55,6 +55,7 @@
"NODE-SELECTOR": "Node Selector",
"CONTENT_SERVICES": "Content Services",
"BREADCRUMB": "Breadcrumb",
"CARD_VIEW": "CardView",
"PROCESS_SERVICES": "Process Services",
"LOGIN": "Login",
"CUSTOM_SOURCES": "Custom Sources",

2
demo-shell/src/app/app.module.ts
View File

@ -55,6 +55,7 @@ import { BreadcrumbDemoComponent } from './components/breadcrumb-demo/breadcrumb
import { ContentNodeSelectorComponent } from './components/content-node-selector/content-node-selector.component';
import { NotificationsComponent } from './components/notifications/notifications.component';
import { ReportIssueComponent } from './components/report-issue/report-issue.component';
import { CardViewComponent } from './components/card-view/card-view.component';
@NgModule({
imports: [
@ -109,6 +110,7 @@ import { ReportIssueComponent } from './components/report-issue/report-issue.com
BlobPreviewComponent,
BreadcrumbDemoComponent,
NotificationsComponent,
CardViewComponent,
ContentNodeSelectorComponent,
ReportIssueComponent
],

11
demo-shell/src/app/app.routes.ts
View File

@ -50,6 +50,7 @@ import { DemoPermissionComponent } from './components/permissions/demo-permissio
import { BlobPreviewComponent } from './components/blob-preview/blob-preview.component';
import { BreadcrumbDemoComponent } from './components/breadcrumb-demo/breadcrumb-demo.component';
import { NotificationsComponent } from './components/notifications/notifications.component';
import { CardViewComponent } from './components/card-view/card-view.component';
import { ContentNodeSelectorComponent } from './components/content-node-selector/content-node-selector.component';
import { ReportIssueComponent } from './components/report-issue/report-issue.component';
@ -75,6 +76,16 @@ export const appRoutes: Routes = [
}
]
},
{
path: 'card-view',
component: AppLayoutComponent ,
children: [
{
path: '',
component: CardViewComponent
}
]
},
{
path: '',
component: AppLayoutComponent,

1
demo-shell/src/app/components/app-layout/app-layout.component.ts
View File

@ -34,6 +34,7 @@ export class AppLayoutComponent implements OnInit {
{ href: '/files', icon: 'folder_open', title: 'APP_LAYOUT.CONTENT_SERVICES' },
{ href: '/breadcrumb', icon: 'label', title: 'APP_LAYOUT.BREADCRUMB' },
{ href: '/notifications', icon: 'alarm', title: 'APP_LAYOUT.NOTIFICATIONS'},
{ href: '/card-view', icon: 'view_headline', title: 'APP_LAYOUT.CARD_VIEW'},
{ href: '/node-selector', icon: 'attachment', title: 'APP_LAYOUT.NODE-SELECTOR' },
{ href: '/activiti', icon: 'device_hub', title: 'APP_LAYOUT.PROCESS_SERVICES' },
{ href: '/login', icon: 'vpn_key', title: 'APP_LAYOUT.LOGIN' },

16
demo-shell/src/app/components/card-view/card-view.component.html Normal file
View File

@ -0,0 +1,16 @@
<div class="main-content">
<h1>CardView Component</h1>
<mat-card class="card-view">
<adf-card-view
[properties]="properties"
[editable]="true">
</adf-card-view>
</mat-card>
<div class="console" #console>
<h3>Changes log:</h3>
<p *ngFor="let log of logs">{{ log }}</p>
</div>
</div>

28
demo-shell/src/app/components/card-view/card-view.component.scss Normal file
View File

@ -0,0 +1,28 @@
.main-content {
padding: 0 15px;
}
.card-view {
width: 30%;
display: inline-block;
}
.console {
width: 60%;
display: inline-block;
vertical-align: top;
margin-left: 10px;
height: 500px;
overflow: scroll;
padding-bottom: 30px;
h3 {
margin-top: 0;
}
p {
display: block;
font-family: monospace, monospace;
margin: 0;
}
}

123
demo-shell/src/app/components/card-view/card-view.component.ts Normal file
View File

@ -0,0 +1,123 @@
/*!
* @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 { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import {
CardViewTextItemModel,
CardViewDateItemModel,
CardViewDatetimeItemModel,
CardViewBoolItemModel,
CardViewIntItemModel,
CardViewFloatItemModel,
CardViewKeyValuePairsItemModel,
CardViewSelectItemModel,
CardViewUpdateService,
UpdateNotification
} from '@alfresco/adf-core';
import { of } from 'rxjs/observable/of';
@Component({
templateUrl: './card-view.component.html',
styleUrls: ['./card-view.component.scss']
})
export class CardViewComponent implements OnInit {
@ViewChild('console') console: ElementRef;
properties: any;
logs: string[];
constructor(private cardViewUpdateService: CardViewUpdateService) {
this.logs = [];
this.properties = [
new CardViewTextItemModel({
label: 'CardView Text Item',
value: 'Spock',
key: 'name',
default: 'default bar' ,
multiline: false,
icon: 'icon',
editable: true
}),
new CardViewDateItemModel({
label: 'CardView Date Item',
value: new Date(),
key: 'date-of-birth',
default: new Date(),
format: 'DD.MM.YYYY',
editable: true
}),
new CardViewDatetimeItemModel({
label: 'CardView Datetime Item',
value: new Date(),
key: 'datetime-of-birth',
default: new Date(),
format: 'DD.MM.YYYY',
editable: true
}),
new CardViewBoolItemModel({
label: 'CardView Boolean Item',
value: true,
key: 'vulcanian',
default: false,
editable: true
}),
new CardViewIntItemModel({
label: 'CardView Int Item',
value: 213,
key: 'intelligence',
default: 1,
editable: true
}),
new CardViewFloatItemModel({
label: 'CardView Float Item',
value: 9.9,
key: 'mental-stability',
default: 0.0,
editable: true
}),
new CardViewKeyValuePairsItemModel({
label: 'CardView Key-Value Pairs Item',
value: [],
key: 'key-value-pairs',
editable: true
}),
new CardViewSelectItemModel({
label: 'CardView Select Item',
value: 'one',
options$: of([{ key: 'one', label: 'One' }, { key: 'two', label: 'Two' }]),
key: 'select',
editable: true
})
];
}
ngOnInit() {
this.cardViewUpdateService.itemUpdated$.subscribe(this.onItemChange.bind(this));
}
onItemChange(notification: UpdateNotification) {
let value = notification.changed[notification.target.key];
if (notification.target.type === 'keyvaluepairs') {
value = JSON.stringify(value);
}
this.logs.push(`[${notification.target.label}] - ${value}`);
this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
}
}

3
lib/core/card-view/components/card-view-selectitem/card-view-selectitem.component.scss Normal file
View File

@ -0,0 +1,3 @@
.mat-form-field-type-mat-select {
width: 100%;
}

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

@ -24,7 +24,8 @@ import { MatSelectChange } from '@angular/material';
@Component({
selector: 'adf-card-view-selectitem',
templateUrl: './card-view-selectitem.component.html'
templateUrl: './card-view-selectitem.component.html',
styleUrls: ['./card-view-selectitem.component.scss']
})
export class CardViewSelectItemComponent implements OnChanges {
@Input() property: CardViewSelectItemModel<string>;