purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(Scrumboard) Drag-drop support

Browse Source
This commit is contained in:
mustafahlvc 2017-08-30 15:58:40 +03:00
parent 7d5693421f
commit ce6797a80b
10 changed files with 154 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/main/content/apps/scrumboard/board/board.component.html
View File

@ -49,12 +49,15 @@
<div fxFlex class="board-content-wrapper p-24">
<!-- BOARD -->
<div class="board-content" [class]="board.settings.color+'-100-bg'" fxLayout="row">
<div class="board-content ngx-dnd-container" [class]="board.settings.color+'-100-bg'" fxLayout="row"
ngxDroppable="list" [model]="board.lists" (out)="onDrop($event)">
<!-- LIST -->
<fuse-scrumboard-board-list
class="list-wrapper"
class="scrumboard-board-list list-wrapper ngx-dnd-item"
ngxDraggable
*ngFor="let list of board.lists"
[model]="list"
[list]="list">
</fuse-scrumboard-board-list>
<!-- / LIST -->

5
src/app/main/content/apps/scrumboard/board/board.component.ts
View File

@ -53,6 +53,11 @@ export class FuseScrumboardBoardComponent implements OnInit, OnDestroy
this.location.go('/apps/scrumboard/boards/' + this.board.id + '/' + this.board.uri);
}
onDrop(ev)
{
this.scrumboardService.updateBoard();
}
ngOnDestroy()
{
this.onBoardChanged.unsubscribe();

17
src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.ts
View File

@ -1,9 +1,10 @@
import { Component, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { MD_DIALOG_DATA, MdDialogRef, MdMenuTrigger } from '@angular/material';
import { MD_DIALOG_DATA, MdDialog, MdDialogRef, MdMenuTrigger } from '@angular/material';
import { Subscription } from 'rxjs/Subscription';
import { ScrumboardService } from '../../../scrumboard.service';
import { NgForm } from '@angular/forms/src/forms';
import { FuseUtils } from '../../../../../../../core/fuseUtils';
import { FuseConfirmDialogComponent } from '../../../../../../../core/components/confirm-dialog/confirm-dialog.component';
@Component({
selector : 'fuse-scrumboard-board-card-dialog',
@ -23,9 +24,12 @@ export class FuseScrumboardCardDialogComponent implements OnInit, OnDestroy
@ViewChild('checklistMenuTrigger') checklistMenu: MdMenuTrigger;
@ViewChild('newCheckListTitleField') newCheckListTitleField;
confirmDialogRef: MdDialogRef<FuseConfirmDialogComponent>;
constructor(
public dialogRef: MdDialogRef<FuseScrumboardCardDialogComponent>,
@Inject(MD_DIALOG_DATA) private data: any,
public dialog: MdDialog,
private scrumboardService: ScrumboardService
)
{
@ -242,10 +246,21 @@ export class FuseScrumboardCardDialogComponent implements OnInit, OnDestroy
* Remove Card
*/
removeCard()
{
this.confirmDialogRef = this.dialog.open(FuseConfirmDialogComponent, {
disableClose: false
});
this.confirmDialogRef.componentInstance.confirmMessage = 'Are you sure you want to delete the card?';
this.confirmDialogRef.afterClosed().subscribe(result => {
if ( result )
{
this.dialogRef.close();
this.scrumboardService.removeCard(this.card.id, this.list.id);
}
});
}
/**
* Update Card

39
src/app/main/content/apps/scrumboard/board/list/card/card.component.scss
View File

@ -1,6 +1,6 @@
@import "src/app/core/scss/fuse";
:host {
.scrumboard-board-card {
position: relative;
display: block;
width: 100%;
@ -111,4 +111,41 @@
}
}
}
&:not(.has-handle):not(.move-disabled),
&.has-handle [ngxdraghandle],
&.has-handle [ngxDragHandle] {
//cursor: move;
}
.ngx-dnd-content {
user-select: none;
}
&.gu-mirror {
position: fixed !important;
margin: 0 !important;
z-index: 9999 !important;
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
@include mat-elevation(7);
}
&.gu-hide {
display: none !important;
}
&.gu-unselectable {
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
}
&.gu-transit {
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
}
}

7
src/app/main/content/apps/scrumboard/board/list/card/card.component.ts
View File

@ -1,12 +1,13 @@
import { Component, Input, OnInit } from '@angular/core';
import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ScrumboardService } from '../../../scrumboard.service';
import * as moment from 'moment';
@Component({
selector : 'fuse-scrumboard-board-card',
templateUrl: './card.component.html',
styleUrls : ['./card.component.scss']
templateUrl : './card.component.html',
styleUrls : ['./card.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class FuseScrumboardBoardCardComponent implements OnInit
{

10
src/app/main/content/apps/scrumboard/board/list/list.component.html
View File

@ -24,12 +24,14 @@
<!-- LIST CONTENT -->
<div class="list-content" fxLayout="column">
<div class="list-cards" ui-sortable="sortableCardOptions" ng-model="list.idCards" perfect-scrollbar #listScroll>
<fuse-scrumboard-board-card
<div class="list-cards ngx-dnd-container"
[model]="list.idCards" ngxDroppable="card" (out)="onDrop($event)"
perfect-scrollbar #listScroll>
<fuse-scrumboard-board-card ngxDraggable
(click)="openCardDialog(cardId)"
class="list-card mat-elevation-z2"
class="scrumboard-board-card mat-elevation-z2 ngx-dnd-item"
*ngFor="let cardId of list.idCards"
[model]="cardId"
[cardId]="cardId">
</fuse-scrumboard-board-card>
</div>

47
src/app/main/content/apps/scrumboard/board/list/list.component.scss
View File

@ -1,4 +1,6 @@
:host {
@import "src/app/core/scss/fuse";
.scrumboard-board-list {
width: 344px;
min-width: 344px;
max-width: 344px;
@ -19,10 +21,9 @@
.list-header {
height: 64px;
min-height: 64px;
padding: 0 0 0 16px;
padding: 0 8px 0 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.list-content {
@ -54,4 +55,44 @@
}
}
&:not(.has-handle):not(.move-disabled),
&.has-handle [ngxdraghandle],
&.has-handle [ngxDragHandle] {
//cursor: move;
}
.ngx-dnd-content {
user-select: none;
}
&.gu-mirror {
position: fixed !important;
margin: 0 !important;
z-index: 9999 !important;
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
> .list {
@include mat-elevation(7);
}
}
&.gu-hide {
display: none !important;
}
&.gu-unselectable {
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
}
&.gu-transit {
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
}
}

28
src/app/main/content/apps/scrumboard/board/list/list.component.ts
View File

@ -1,16 +1,18 @@
import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { FuseUtils } from '../../../../../../core/fuseUtils';
import { ScrumboardService } from 'app/main/content/apps/scrumboard/scrumboard.service';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
import { MdDialog } from '@angular/material';
import { MdDialog, MdDialogRef } from '@angular/material';
import { FuseScrumboardCardDialogComponent } from '../dialogs/card/card.component';
import { FuseConfirmDialogComponent } from '../../../../../../core/components/confirm-dialog/confirm-dialog.component';
@Component({
selector : 'fuse-scrumboard-board-list',
templateUrl: './list.component.html',
styleUrls : ['./list.component.scss']
templateUrl : './list.component.html',
styleUrls : ['./list.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class FuseScrumboardBoardListComponent implements OnInit, OnDestroy
{
@ -22,6 +24,8 @@ export class FuseScrumboardBoardListComponent implements OnInit, OnDestroy
onBoardChanged: Subscription;
confirmDialogRef: MdDialogRef<FuseConfirmDialogComponent>;
constructor(
private route: ActivatedRoute,
private scrumboardService: ScrumboardService,
@ -78,9 +82,20 @@ export class FuseScrumboardBoardListComponent implements OnInit, OnDestroy
}
removeList(listId)
{
this.confirmDialogRef = this.dialog.open(FuseConfirmDialogComponent, {
disableClose: false
});
this.confirmDialogRef.componentInstance.confirmMessage = 'Are you sure you want to delete the list and it\'s all cards?';
this.confirmDialogRef.afterClosed().subscribe(result => {
if ( result )
{
this.scrumboardService.removeList(listId);
}
});
}
openCardDialog(cardId)
{
@ -97,6 +112,11 @@ export class FuseScrumboardBoardListComponent implements OnInit, OnDestroy
});
}
onDrop(ev)
{
this.scrumboardService.updateBoard();
}
ngOnDestroy()
{
this.onBoardChanged.unsubscribe();

4
src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.html
View File

@ -3,7 +3,7 @@
<div class="view" *ngSwitchCase="'main'" [@slideInLeft]>
<!-- SIDENAV HEADER -->
<div class="header md-accent-bg p-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="column" fxLayoutAlign="center center">
<div class="header md-accent-bg px-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="column" fxLayoutAlign="center center">
<div>Settings</div>
</div>
<!-- / SIDENAV HEADER -->
@ -58,7 +58,7 @@
<div class="view" *ngSwitchCase="'board-color'" [@slideInRight]>
<!-- SIDENAV HEADER -->
<div class="header md-accent-bg p-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="row" fxLayoutAlign="space-between center">
<div class="header md-accent-bg px-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="row" fxLayoutAlign="space-between center">
<div>Background Color</div>
<button md-icon-button (click)="view ='main'">
<md-icon class="s-16">arrow_back</md-icon>

2
src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.scss
View File

@ -24,6 +24,8 @@
> .header {
flex: 0 1 auto;
height: 64px;
min-height: 64px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}