hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 01:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

65717: cdk install, table layout to divs, dragging support (no implementation yet)

Browse Source
This commit is contained in:
Kristof De Langhe
2019-10-22 15:58:41 +02:00
parent a30529e091
commit 5e6082c1c7
11 changed files with 177 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -74,6 +74,7 @@
},
"dependencies": {
"@angular/animations": "^6.1.4",
"@angular/cdk": "^7.3.7",
"@angular/cli": "^6.1.5",
"@angular/common": "^6.1.4",
"@angular/core": "^6.1.4",

1
resources/i18n/en.json5
View File

@@ -281,6 +281,7 @@
"item.edit.bitstreams.bundle.name": "BUNDLE: {{ name }}",
"item.edit.bitstreams.discard-button": "Discard",
"item.edit.bitstreams.edit.buttons.download": "Download",
"item.edit.bitstreams.edit.buttons.drag": "Drag",
"item.edit.bitstreams.edit.buttons.edit": "Edit",
"item.edit.bitstreams.edit.buttons.remove": "Remove",
"item.edit.bitstreams.edit.buttons.undo": "Undo changes",

4
src/app/+item-page/edit-item-page/edit-item-page.module.ts
View File

@@ -25,6 +25,7 @@ import { AbstractItemUpdateComponent } from './abstract-item-update/abstract-ite
import { ItemMoveComponent } from './item-move/item-move.component';
import { ItemEditBitstreamBundleComponent } from './item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component';
import { BundleDataService } from '../../core/data/bundle-data.service';
import { DragDropModule } from '@angular/cdk/drag-drop';
/**
* Module that contains all components related to the Edit Item page administrator functionality
@@ -34,7 +35,8 @@ import { BundleDataService } from '../../core/data/bundle-data.service';
CommonModule,
SharedModule,
EditItemPageRoutingModule,
SearchPageModule
SearchPageModule,
DragDropModule
],
declarations: [
EditItemPageComponent,

29
src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
View File

@@ -23,21 +23,20 @@
</button>
</div>
<table *ngIf="item && bundles?.length > 0" class="table table-responsive table-striped table-bordered mt-4">
<tbody>
<tr>
<th>{{'item.edit.bitstreams.headers.name' | translate}}</th>
<th>{{'item.edit.bitstreams.headers.description' | translate}}</th>
<th class="text-center">{{'item.edit.bitstreams.headers.format' | translate}}</th>
<th class="text-center">{{'item.edit.bitstreams.headers.actions' | translate}}</th>
</tr>
<ds-item-edit-bitstream-bundle *ngFor="let bundle of bundles"
[url]="url"
[bundle]="bundle"
[item]="item">
</ds-item-edit-bitstream-bundle>
</tbody>
</table>
<div *ngIf="item && bundles?.length > 0" class="container table-bordered mt-4" cdkDropListGroup>
<div class="row header-row font-weight-bold">
<div class="col-2 col-md-3 col-lg-4 row-element">{{'item.edit.bitstreams.headers.name' | translate}}</div>
<div class="col-2 col-sm-3 row-element">{{'item.edit.bitstreams.headers.description' | translate}}</div>
<div class="col-2 text-center row-element">{{'item.edit.bitstreams.headers.format' | translate}}</div>
<div class="col-6 col-sm-5 col-md-4 col-lg-3 text-center row-element">{{'item.edit.bitstreams.headers.actions' | translate}}</div>
</div>
<ds-item-edit-bitstream-bundle *ngFor="let bundle of bundles"
[url]="url"
[bundle]="bundle"
[item]="item"
(moveBitstream)="moveBitstream($event)">
</ds-item-edit-bitstream-bundle>
</div>
<div *ngIf="bundles?.length === 0"
class="alert alert-info w-100 d-inline-block mt-4" role="alert">
{{'item.edit.bitstreams.empty' | translate}}

36
src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss
View File

@@ -0,0 +1,36 @@
.header-row {
color: $table-dark-color;
background-color: $table-dark-bg;
border-color: $table-dark-border-color;
}
.bundle-row {
color: $table-head-color;
background-color: $table-head-bg;
border-color: $table-border-color;
}
.row-element {
padding: 12px;
padding: 0.75em;
border-top: $table-border-width solid $table-border-color;
}
.drag-handle:hover {
cursor: move;
}
.cdk-drag-preview {
margin-left: 0;
box-sizing: border-box;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
background-color: white;
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

16
src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts
View File

@@ -20,6 +20,7 @@ import { Item } from '../../../core/shared/item.model';
import { RemoteData } from '../../../core/data/remote-data';
import { PaginatedList } from '../../../core/data/paginated-list';
import { Bundle } from '../../../core/shared/bundle.model';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
@Component({
selector: 'ds-item-bitstreams',
@@ -152,6 +153,21 @@ export class ItemBitstreamsComponent extends AbstractItemUpdateComponent impleme
}
}
/**
* A bitstream was moved within or between bundles
* Send updates to the object update service to track this move
* @param event
*/
moveBitstream(event: CdkDragDrop<any>) {
const oldBundleId = event.previousContainer.id;
const newContainerId = event.container.id;
if (oldBundleId === newContainerId) {
// Move bitstreams within bundle
} else {
// Move bitstreams between bundles
}
}
/**
* Request the object updates service to discard all current changes to this item
* Shows a notification to remind the user that they can undo this

39
src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html
View File

@@ -1,7 +1,7 @@
<ng-template #bundleView>
<tr>
<td colspan="3" class="font-weight-bold">{{'item.edit.bitstreams.bundle.name' | translate:{ name: bundle.name } }}</td>
<td class="text-center">
<div class="row bundle-row">
<div class="col-6 col-sm-7 col-md-8 col-lg-9 font-weight-bold row-element">{{'item.edit.bitstreams.bundle.name' | translate:{ name: bundle.name } }}</div>
<div class="col-6 col-sm-5 col-md-4 col-lg-3 text-center row-element">
<div class="btn-group bundle-action-buttons">
<button [routerLink]="['/items/', item.id, 'bitstreams', 'new']"
[queryParams]="{bundle: bundle.id}"
@@ -10,19 +10,22 @@
<i class="fas fa-upload fa-fw"></i>
</button>
</div>
</td>
</tr>
<ng-container *ngVar="((updates$ | async) | dsObjectValues) as updateValues">
<tr *ngFor="let updateValue of updateValues"
ds-item-edit-bitstream
[fieldUpdate]="updateValue"
[url]="url"
[bundleUrl]="bundle.self"
[ngClass]="{
'table-warning': updateValue.changeType === 0,
'table-danger': updateValue.changeType === 2,
'table-success': updateValue.changeType === 1
}">
</tr>
</ng-container>
</div>
</div>
<div [id]="bundle.id" class="bundle-bitstreams-list" *ngVar="((updates$ | async) | dsObjectValues) as updateValues" cdkDropList (cdkDropListDropped)="drop($event)">
<div class="row" *ngFor="let updateValue of updateValues" cdkDrag>
<ds-item-edit-bitstream [fieldUpdate]="updateValue"
[url]="url"
[bundleUrl]="bundle.self"
[ngClass]="{
'table-warning': updateValue.changeType === 0,
'table-danger': updateValue.changeType === 2,
'table-success': updateValue.changeType === 1
}">
<button disabled slot="drag-handle" class="drag-handle btn btn-outline-secondary btn-sm" cdkDragHandle>
<i class="fas fa-grip-vertical fa-fw" [title]="'item.edit.bitstreams.edit.buttons.drag' | translate"></i>
</button>
</ds-item-edit-bitstream>
</div>
</div>
</ng-template>

15
src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.ts
View File

@@ -7,9 +7,11 @@ import { toBitstreamsArray } from '../../../../core/shared/item-bitstreams-utils
import { switchMap } from 'rxjs/operators';
import { Bitstream } from '../../../../core/shared/bitstream.model';
import { Item } from '../../../../core/shared/item.model';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
@Component({
selector: 'ds-item-edit-bitstream-bundle',
styleUrls: ['../item-bitstreams.component.scss'],
templateUrl: './item-edit-bitstream-bundle.component.html',
})
/**
@@ -37,6 +39,11 @@ export class ItemEditBitstreamBundleComponent implements OnInit {
*/
@Input() url: string;
/**
* Event emitter for moving a bitstream within or across bundles
*/
@Output() moveBitstream: EventEmitter<any> = new EventEmitter();
/**
* The updates to the current bundle
*/
@@ -55,4 +62,12 @@ export class ItemEditBitstreamBundleComponent implements OnInit {
this.viewContainerRef.createEmbeddedView(this.bundleView);
}
/**
* A bitstream was moved, emit the event to moveBitstream
* @param event
*/
drop(event: CdkDragDrop<any>) {
this.moveBitstream.emit(event);
}
}

66
src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html
View File

@@ -1,32 +1,36 @@
<td class="w-100">
{{ bitstream.name }}
</td>
<td>
{{ bitstream.description }}
</td>
<td class="text-center">
{{ (format$ | async).shortDescription }}
</td>
<td class="text-center">
<div class="btn-group relationship-action-buttons">
<a [href]="bitstream?.content"
class="btn btn-outline-primary btn-sm"
title="{{'item.edit.bitstreams.edit.buttons.download' | translate}}">
<i class="fas fa-download fa-fw"></i>
</a>
<button [routerLink]="['/bitstreams/', bitstream.id, 'edit']" class="btn btn-outline-primary btn-sm"
title="{{'item.edit.bitstreams.edit.buttons.edit' | translate}}">
<i class="fas fa-edit fa-fw"></i>
</button>
<button [disabled]="!canRemove()" (click)="remove()"
class="btn btn-outline-danger btn-sm"
title="{{'item.edit.bitstreams.edit.buttons.remove' | translate}}">
<i class="fas fa-trash-alt fa-fw"></i>
</button>
<button [disabled]="!canUndo()" (click)="undo()"
class="btn btn-outline-warning btn-sm"
title="{{'item.edit.bitstreams.edit.buttons.undo' | translate}}">
<i class="fas fa-undo-alt fa-fw"></i>
</button>
<ng-template #bitstreamView>
<div class="col-2 col-md-3 col-lg-4 row-element">
{{ bitstream.name }}
</div>
</td>
<div class="col-2 col-sm-3 row-element">
{{ bitstream.description }}
</div>
<div class="col-2 text-center row-element">
{{ (format$ | async).shortDescription }}
</div>
<div class="col-6 col-sm-5 col-md-4 col-lg-3 text-center row-element">
<div class="btn-group relationship-action-buttons">
<a [href]="bitstream?.content"
class="btn btn-outline-primary btn-sm"
title="{{'item.edit.bitstreams.edit.buttons.download' | translate}}">
<i class="fas fa-download fa-fw"></i>
</a>
<button [routerLink]="['/bitstreams/', bitstream.id, 'edit']" class="btn btn-outline-primary btn-sm"
title="{{'item.edit.bitstreams.edit.buttons.edit' | translate}}">
<i class="fas fa-edit fa-fw"></i>
</button>
<button [disabled]="!canRemove()" (click)="remove()"
class="btn btn-outline-danger btn-sm"
title="{{'item.edit.bitstreams.edit.buttons.remove' | translate}}">
<i class="fas fa-trash-alt fa-fw"></i>
</button>
<button [disabled]="!canUndo()" (click)="undo()"
class="btn btn-outline-warning btn-sm"
title="{{'item.edit.bitstreams.edit.buttons.undo' | translate}}">
<i class="fas fa-undo-alt fa-fw"></i>
</button>
<ng-content select="[slot=drag-handle]">
</ng-content>
</div>
</div>
</ng-template>

21
src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild, ViewContainerRef } from '@angular/core';
import { FieldUpdate } from '../../../../core/data/object-updates/object-updates.reducer';
import { Bitstream } from '../../../../core/shared/bitstream.model';
import { cloneDeep } from 'lodash';
@@ -9,14 +9,20 @@ import { BitstreamFormat } from '../../../../core/shared/bitstream-format.model'
import { getRemoteDataPayload, getSucceededRemoteData } from '../../../../core/shared/operators';
@Component({
// tslint:disable-next-line:component-selector
selector: '[ds-item-edit-bitstream]',
selector: 'ds-item-edit-bitstream',
styleUrls: ['../item-bitstreams.component.scss'],
templateUrl: './item-edit-bitstream.component.html',
})
/**
* Component that displays a single bitstream of an item on the edit page
*/
export class ItemEditBitstreamComponent implements OnChanges {
export class ItemEditBitstreamComponent implements OnChanges, OnInit {
/**
* The view on the bitstream
*/
@ViewChild('bitstreamView') bitstreamView;
/**
* The current field, value and state of the bitstream
*/
@@ -42,7 +48,12 @@ export class ItemEditBitstreamComponent implements OnChanges {
*/
format$: Observable<BitstreamFormat>;
constructor(private objectUpdatesService: ObjectUpdatesService) {
constructor(private objectUpdatesService: ObjectUpdatesService,
private viewContainerRef: ViewContainerRef) {
}
ngOnInit(): void {
this.viewContainerRef.createEmbeddedView(this.bitstreamView);
}
/**

19
yarn.lock
View File

@@ -35,6 +35,15 @@
dependencies:
tslib "^1.9.0"
"@angular/cdk@^7.3.7":
version "7.3.7"
resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-7.3.7.tgz#ce1ad53ba04beb9c8e950acc5691ea0143753764"
integrity sha512-xbXxhHHKGkVuW6K7pzPmvpJXIwpl0ykBnvA2g+/7Sgy5Pd35wCC+UtHD9RYczDM/mkygNxMQtagyCErwFnDtQA==
dependencies:
tslib "^1.7.1"
optionalDependencies:
parse5 "^5.0.0"
"@angular/cli@^6.1.5":
version "6.1.5"
resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-6.1.5.tgz#312c062631285ff06fd07ecde8afe22cdef5a0e1"
@@ -7757,6 +7766,11 @@ parse-passwd@^1.0.0:
resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
integrity sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=
parse5@^5.0.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2"
integrity sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==
parseqs@0.0.5:
version "0.0.5"
resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.5.tgz#d5208a3738e46766e291ba2ea173684921a8b89d"
@@ -10815,6 +10829,11 @@ tsickle@^0.32.1:
source-map "^0.6.0"
source-map-support "^0.5.0"
tslib@^1.7.1:
version "1.10.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0:
version "1.9.3"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"