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-1841] Content Metadata first iteration (#2666)

Browse Source 
* First try

* Small layout changes

* Add pipe support for CardViewTextItemModel

* property service

* Additional stuff

* Make CardViewUpdateService smarter

* Content metadata saving

* Rebase fix

* CardView Style fixes

* Fix core and content-services tests

* Fix CardView text item update UX
This commit is contained in:
Popovics András
2017-11-18 10:43:39 +00:00
committed by Eugenio Romano
parent 15cbd3a316
commit 4b76e6b4a9
32 changed files with 822 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
lib/content-services/content-metadata/content-metadata-card.component.html Normal file
View File

@@ -0,0 +1,25 @@
<mat-card *ngIf="node">
<mat-card-content>
<adf-content-metadata [node]="node" [editable]="editable" [maxPropertiesToShow]="maxPropertiesToShow"></adf-content-metadata>
</mat-card-content>
<mat-card-footer class="adf-viewer-default-sidebar-card-footer" fxLayout="row" fxLayoutAlign="space-between stretch">
<div>
<button mat-icon-button>
<mat-icon>star_border</mat-icon>
</button>
<button mat-icon-button (click)="toggleEdit()">
<mat-icon>mode_edit</mat-icon>
</button>
</div>
<button mat-button (click)="toggleExpanded()">
<ng-container *ngIf="!expanded">
<span>{{ 'ADF_VIEWER.SIDEBAR.METADATA.MORE_INFORMATION' | translate }}</span>
<mat-icon>keyboard_arrow_down</mat-icon>
</ng-container>
<ng-container *ngIf="expanded">
<span>{{ 'ADF_VIEWER.SIDEBAR.METADATA.LESS_INFORMATION' | translate }}</span>
<mat-icon>keyboard_arrow_up</mat-icon>
</ng-container>
</button>
</mat-card-footer>
</mat-card>

21
lib/content-services/content-metadata/content-metadata-card.component.scss Normal file
View File

@@ -0,0 +1,21 @@
@mixin adf-content-metadata-card-theme($theme) {
$primary: map-get($theme, primary);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
.adf-viewer-default-sidebar {
&-card-footer.mat-card-footer {
padding: 8px 12px;
border-top: 1px solid mat-color($foreground, text, 0.07);
button {
color: mat-color($foreground, text, 0.54);
&:hover {
color: mat-color($foreground, text, 0.87);
}
}
}
}
}

48
lib/content-services/content-metadata/content-metadata-card.component.ts Normal file
View File

@@ -0,0 +1,48 @@
/*!
* @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, Input, ViewEncapsulation } from '@angular/core';
import { MinimalNodeEntryEntity } from 'alfresco-js-api';
const PROPERTY_COUNTER_WHILE_COLLAPSED = 5;
@Component({
selector: 'adf-content-metadata-card',
templateUrl: './content-metadata-card.component.html',
styleUrls: ['./content-metadata-card.component.scss'],
encapsulation: ViewEncapsulation.None,
host: { 'class': 'adf-viewer-default-sidebar' }
})
export class ContentMetadataCardComponent {
@Input()
node: MinimalNodeEntryEntity;
editable: boolean = false;
expanded: boolean = false;
toggleEdit(): void {
this.editable = !this.editable;
}
toggleExpanded(): void {
this.expanded = !this.expanded;
}
get maxPropertiesToShow(): number {
return this.expanded ? Infinity : PROPERTY_COUNTER_WHILE_COLLAPSED;
}
}

3
lib/content-services/content-metadata/content-metadata.component.html Normal file
View File

@@ -0,0 +1,3 @@
<div class="adf-metadata-properties">
<adf-card-view [properties]="properties" [editable]="editable"></adf-card-view>
</div>

29
lib/content-services/content-metadata/content-metadata.component.scss Normal file
View File

@@ -0,0 +1,29 @@
@mixin adf-content-metadata-theme($theme) {
$primary: map-get($theme, primary);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
.adf {
&-metadata-properties {
.adf-property {
display: block;
margin-bottom: 20px;
.adf-property-label {
display: block;
padding: 0;
font-size: 12px;
color: mat-color($foreground, text, 0.4);
}
.adf-property-value {
display: block;
padding: 0;
font-size: 14px;
color: mat-color($foreground, text, 0.87);
}
}
}
}
}

82
lib/content-services/content-metadata/content-metadata.component.ts Normal file
View File

@@ -0,0 +1,82 @@
/*!
* @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 { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
import { MinimalNodeEntryEntity } from 'alfresco-js-api';
import { Observable } from 'rxjs/Rx';
import { CardViewItem, CardViewUpdateService, FileSizePipe, NodesApiService } from '@alfresco/adf-core';
import { ContentMetadataService } from './content-metadata.service';
@Component({
selector: 'adf-content-metadata',
templateUrl: './content-metadata.component.html',
styleUrls: ['./content-metadata.component.scss'],
host: { 'class': 'adf-content-metadata' },
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [ CardViewUpdateService ],
viewProviders: [ ContentMetadataService, FileSizePipe ]
})
export class ContentMetadataComponent implements OnChanges, OnInit {
@Input()
node: MinimalNodeEntryEntity;
@Input()
editable: boolean = false;
@Input()
maxPropertiesToShow: number = Infinity;
properties: CardViewItem[] = [];
constructor(private contentMetadataService: ContentMetadataService,
private cardViewUpdateService: CardViewUpdateService,
private nodesApi: NodesApiService) {}
ngOnInit(): void {
this.cardViewUpdateService.itemUpdated$
.switchMap(this.saveNode.bind(this))
.subscribe(
node => this.node = node,
error => this.handleError(error)
);
}
ngOnChanges(): void {
this.recalculateProperties();
}
private saveNode({ changed: nodeBody }): Observable<MinimalNodeEntryEntity> {
return this.nodesApi.updateNode(this.node.id, nodeBody);
}
private handleError(error): void {
/*tslint:disable-next-line*/
console.log(error);
}
private recalculateProperties(): void {
let basicProperties = this.contentMetadataService.getBasicProperties(this.node);
if (this.maxPropertiesToShow) {
basicProperties = basicProperties.slice(0, this.maxPropertiesToShow);
}
this.properties = [...basicProperties];
}
}

45
lib/content-services/content-metadata/content-metadata.module.ts Normal file
View File

@@ -0,0 +1,45 @@
/*!
* @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 { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { MaterialModule } from '../material.module';
import { CardViewModule } from '@alfresco/adf-core';
import { ContentMetadataComponent } from './content-metadata.component';
import { ContentMetadataCardComponent } from './content-metadata-card.component';
@NgModule({
imports: [
CommonModule,
MaterialModule,
TranslateModule,
FlexLayoutModule,
CardViewModule
],
exports: [
ContentMetadataComponent,
ContentMetadataCardComponent
],
declarations: [
ContentMetadataComponent,
ContentMetadataCardComponent
]
})
export class ContentMetadataModule {}

93
lib/content-services/content-metadata/content-metadata.service.ts Normal file
View File

@@ -0,0 +1,93 @@
/*!
* @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 { MinimalNodeEntryEntity } from 'alfresco-js-api';
import { CardViewDateItemModel, CardViewTextItemModel, FileSizePipe } from '@alfresco/adf-core';
@Injectable()
export class ContentMetadataService {
constructor(private fileSizePipe: FileSizePipe) {}
getBasicProperties(node: MinimalNodeEntryEntity) {
return [
new CardViewTextItemModel({
label: 'CORE.METADATA.BASIC.NAME',
value: node.name,
key: 'name',
editable: true
}),
new CardViewTextItemModel({
label: 'CORE.METADATA.BASIC.TITLE',
value: node.properties['cm:title'],
key: 'properties.cm:title',
editable: true
}),
new CardViewTextItemModel({
label: 'CORE.METADATA.BASIC.CREATOR',
value: node.createdByUser.displayName,
key: 'createdByUser.displayName',
editable: false
}),
new CardViewDateItemModel({
label: 'CORE.METADATA.BASIC.CREATED_DATE',
value: node.createdAt,
key: 'createdAt',
editable: false
}),
new CardViewTextItemModel({
label: 'CORE.METADATA.BASIC.SIZE',
value: node.content.sizeInBytes,
key: 'content.sizeInBytes',
pipes: [{ pipe: this.fileSizePipe }],
editable: false
}),
new CardViewTextItemModel({
label: 'CORE.METADATA.BASIC.MODIFIER',
value: node.modifiedByUser.displayName,
key: 'modifiedByUser.displayName',
editable: false
}),
new CardViewDateItemModel({
label: 'CORE.METADATA.BASIC.MODIFIED_DATE',
value: node.modifiedAt,
key: 'modifiedAt',
editable: false
}),
new CardViewTextItemModel({
label: 'CORE.METADATA.BASIC.MIMETYPE',
value: node.content.mimeTypeName,
key: 'content.mimeTypeName',
editable: false
}),
new CardViewTextItemModel({
label: 'CORE.METADATA.BASIC.AUTHOR',
value: node.properties['cm:author'],
key: 'properties.cm:author',
editable: true
}),
new CardViewTextItemModel({
label: 'CORE.METADATA.BASIC.DESCRIPTION',
value: node.properties['cm:description'],
key: 'properties.cm:description',
multiline: true,
editable: true
})
];
}
}

18
lib/content-services/content-metadata/index.ts Normal file
View File

@@ -0,0 +1,18 @@
/*!
* @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 * from './public-api';

21
lib/content-services/content-metadata/public-api.ts Normal file
View File

@@ -0,0 +1,21 @@
/*!
* @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 * from './content-metadata.component';
export * from './content-metadata.service';
export * from './content-metadata.module';

3
lib/content-services/content.module.ts
View File

@@ -35,6 +35,7 @@ import { VersionManagerModule } from './version-manager';
import { ContentNodeSelectorModule } from './content-node-selector';
import { DialogModule } from './dialogs';
import { DirectiveModule } from './directive';
import { ContentMetadataModule } from './content-metadata';
@NgModule({
imports: [
@@ -54,6 +55,7 @@ import { DirectiveModule } from './directive';
BreadcrumbModule,
VersionManagerModule,
ContentNodeSelectorModule,
ContentMetadataModule,
DialogModule,
DirectiveModule
],
@@ -79,6 +81,7 @@ import { DirectiveModule } from './directive';
BreadcrumbModule,
VersionManagerModule,
ContentNodeSelectorModule,
ContentMetadataModule,
DialogModule,
DirectiveModule
]

14
lib/content-services/i18n/en.json
View File

@@ -182,5 +182,19 @@
},
"PERMISSON": {
"LACKOF": "You don't have the {{permission}} permission to {{action}} the {{type}}"
},
"METADATA": {
"BASIC": {
"NAME": "Name",
"TITLE": "Title",
"DESCRIPTION": "Description",
"AUTHOR": "Author",
"MIMETYPE": "Mimetype",
"SIZE": "Size",
"CREATOR": "Creator",
"CREATED_DATE": "Created Date",
"MODIFIER": "Modifier",
"MODIFIED_DATE": "Modified Date"
}
}
}

1
lib/content-services/index.ts
View File

@@ -27,6 +27,7 @@ export * from './version-manager';
export * from './content-node-selector';
export * from './dialogs';
export * from './directive';
export * from './content-metadata';
export * from './mock';

2
lib/content-services/material.module.ts
View File

@@ -21,6 +21,7 @@ import {
MatChipsModule,
MatDialogModule,
MatIconModule,
MatCardModule,
MatInputModule,
MatListModule,
MatMenuModule,
@@ -37,6 +38,7 @@ export function modules() {
MatChipsModule,
MatDialogModule,
MatIconModule,
MatCardModule,
MatInputModule,
MatListModule,
MatProgressSpinnerModule,

5
lib/content-services/styles/index.scss
View File

@@ -11,6 +11,9 @@
@import '../dialogs/folder.dialog';
@import '../content-metadata/content-metadata.component';
@import '../content-metadata/content-metadata-card.component';
@mixin adf-content-services-theme($theme) {
@include adf-breadcrumb-theme($theme);
@include adf-breadcrumb-dropdown-theme($theme);
@@ -21,4 +24,6 @@
@include adf-search-control-theme($theme);
@include adf-search-autocomplete-theme($theme);
@include adf-dialog-theme($theme);
@include adf-content-metadata-theme($theme);
@include adf-content-metadata-card-theme($theme);
}