mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-12-19 08:57:09 +00:00
(apps/scrumboard) New version of the Scrumboard app
This commit is contained in:
sercan
@@ -0,0 +1,53 @@
|
||||
<div
|
||||
class="p-3 pt-0"
|
||||
[class.h-13]="!formVisible">
|
||||
<div class="relative flex w-full h-full rounded-lg">
|
||||
<button
|
||||
class="absolute inset-0 justify-start w-full px-5 rounded-lg"
|
||||
[ngClass]="{'opacity-0 pointer-events-none': formVisible}"
|
||||
mat-button
|
||||
(click)="toggleFormVisibility()"
|
||||
disableRipple>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_outline:plus-circle'"></mat-icon>
|
||||
<span class="ml-2 text-secondary">{{buttonTitle}}</span>
|
||||
</button>
|
||||
<form
|
||||
class="flex flex-col items-start w-full"
|
||||
[ngClass]="{'opacity-0': !formVisible}"
|
||||
[formGroup]="form">
|
||||
<div class="flex w-full p-5 rounded-lg shadow bg-card">
|
||||
<textarea
|
||||
class="w-full text-lg font-medium leading-5"
|
||||
[spellcheck]="'off'"
|
||||
[formControlName]="'title'"
|
||||
[placeholder]="'Enter card title...'"
|
||||
(keydown.enter)="save()"
|
||||
cdkTextareaAutosize
|
||||
#titleInput
|
||||
#titleAutosize="cdkTextareaAutosize">
|
||||
</textarea>
|
||||
</div>
|
||||
<div class="flex items-center mt-2">
|
||||
<button
|
||||
class="h-8 min-h-8"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
[type]="'button'"
|
||||
(click)="save()">
|
||||
Add card
|
||||
</button>
|
||||
<button
|
||||
class="ml-1 w-8 h-8 min-h-8"
|
||||
mat-icon-button
|
||||
[type]="'button'"
|
||||
(click)="toggleFormVisibility()">
|
||||
<mat-icon
|
||||
class="icon-size-4"
|
||||
[svgIcon]="'heroicons_solid:x'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,95 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { CdkTextareaAutosize } from '@angular/cdk/text-field';
|
||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector : 'scrumboard-board-add-card',
|
||||
templateUrl : './add-card.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ScrumboardBoardAddCardComponent implements OnInit
|
||||
{
|
||||
@ViewChild('titleInput') titleInput: ElementRef;
|
||||
@ViewChild('titleAutosize') titleAutosize: CdkTextareaAutosize;
|
||||
@Input() buttonTitle: string = 'Add a card';
|
||||
@Output() readonly saved: EventEmitter<string> = new EventEmitter<string>();
|
||||
|
||||
form: FormGroup;
|
||||
formVisible: boolean = false;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _formBuilder: FormBuilder
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Initialize the new list form
|
||||
this.form = this._formBuilder.group({
|
||||
title: ['']
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Save
|
||||
*/
|
||||
save(): void
|
||||
{
|
||||
// Get the new list title
|
||||
const title = this.form.get('title').value;
|
||||
|
||||
// Return, if the title is empty
|
||||
if ( !title || title.trim() === '' )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Execute the observable
|
||||
this.saved.next(title.trim());
|
||||
|
||||
// Clear the new list title and hide the form
|
||||
this.formVisible = false;
|
||||
this.form.get('title').setValue('');
|
||||
|
||||
// Reset the size of the textarea
|
||||
setTimeout(() => {
|
||||
this.titleInput.nativeElement.value = '';
|
||||
this.titleAutosize.reset();
|
||||
});
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the visibility of the form
|
||||
*/
|
||||
toggleFormVisibility(): void
|
||||
{
|
||||
// Toggle the visibility
|
||||
this.formVisible = !this.formVisible;
|
||||
|
||||
// If the form becomes visible, focus on the title field
|
||||
if ( this.formVisible )
|
||||
{
|
||||
this.titleInput.nativeElement.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
<div
|
||||
class="mt-11 w-64 py-2.5 px-2"
|
||||
[class.h-15]="!formVisible">
|
||||
<div class="relative flex w-full h-full overflow-hidden rounded-xl bg-gray-200">
|
||||
<button
|
||||
class="absolute inset-0 justify-start w-full px-3 rounded-xl bg-transparent"
|
||||
[ngClass]="{'opacity-0 pointer-events-none': formVisible}"
|
||||
mat-button
|
||||
(click)="toggleFormVisibility()"
|
||||
disableRipple>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_outline:plus-circle'"></mat-icon>
|
||||
<span class="ml-2 text-secondary">{{buttonTitle}}</span>
|
||||
</button>
|
||||
<form
|
||||
class="flex flex-col items-start w-full p-3"
|
||||
[ngClass]="{'opacity-0': !formVisible}"
|
||||
[formGroup]="form">
|
||||
<input
|
||||
class="w-full py-2 px-3 leading-5 rounded-md shadow-sm border border-gray-300 bg-white focus:border-primary"
|
||||
[autocomplete]="'off'"
|
||||
[formControlName]="'title'"
|
||||
[placeholder]="'Enter list title...'"
|
||||
(keydown.enter)="save()"
|
||||
#titleInput>
|
||||
<div class="flex items-center mt-2">
|
||||
<button
|
||||
class="h-8 min-h-8"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
[type]="'button'"
|
||||
(click)="save()">
|
||||
Add list
|
||||
</button>
|
||||
<button
|
||||
class="ml-1 w-8 h-8 min-h-8"
|
||||
mat-icon-button
|
||||
[type]="'button'"
|
||||
(click)="toggleFormVisibility()">
|
||||
<mat-icon
|
||||
class="icon-size-4"
|
||||
[svgIcon]="'heroicons_solid:x'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,87 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector : 'scrumboard-board-add-list',
|
||||
templateUrl : './add-list.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ScrumboardBoardAddListComponent implements OnInit
|
||||
{
|
||||
@ViewChild('titleInput') titleInput: ElementRef;
|
||||
@Input() buttonTitle: string = 'Add a list';
|
||||
@Output() readonly saved: EventEmitter<string> = new EventEmitter<string>();
|
||||
|
||||
form: FormGroup;
|
||||
formVisible: boolean = false;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _formBuilder: FormBuilder
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Initialize the new list form
|
||||
this.form = this._formBuilder.group({
|
||||
title: ['']
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Save
|
||||
*/
|
||||
save(): void
|
||||
{
|
||||
// Get the new list title
|
||||
const title = this.form.get('title').value;
|
||||
|
||||
// Return, if the title is empty
|
||||
if ( !title || title.trim() === '' )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Execute the observable
|
||||
this.saved.next(title.trim());
|
||||
|
||||
// Clear the new list title and hide the form
|
||||
this.form.get('title').setValue('');
|
||||
this.formVisible = false;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the visibility of the form
|
||||
*/
|
||||
toggleFormVisibility(): void
|
||||
{
|
||||
// Toggle the visibility
|
||||
this.formVisible = !this.formVisible;
|
||||
|
||||
// If the form becomes visible, focus on the title field
|
||||
if ( this.formVisible )
|
||||
{
|
||||
this.titleInput.nativeElement.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
182
src/app/modules/admin/apps/scrumboard/board/board.component.html
Normal file
182
src/app/modules/admin/apps/scrumboard/board/board.component.html
Normal file
@@ -0,0 +1,182 @@
|
||||
<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<!-- Title -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
{{board.title}}
|
||||
</h2>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
|
||||
<a
|
||||
mat-stroked-button
|
||||
[routerLink]="['..']">
|
||||
<mat-icon
|
||||
class="icon-size-5 mr-2"
|
||||
[svgIcon]="'heroicons_solid:view-boards'"></mat-icon>
|
||||
Boards
|
||||
</a>
|
||||
<button
|
||||
class="ml-3"
|
||||
mat-stroked-button>
|
||||
<mat-icon
|
||||
class="icon-size-5 mr-2"
|
||||
[svgIcon]="'heroicons_solid:cog'"></mat-icon>
|
||||
Settings
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main -->
|
||||
<div
|
||||
class="flex-auto p-6 sm:p-8 sm:pt-4 overflow-y-auto"
|
||||
cdkScrollable>
|
||||
|
||||
<!-- Lists -->
|
||||
<div
|
||||
class="flex"
|
||||
cdkDropList
|
||||
[cdkDropListData]="board.lists"
|
||||
[cdkDropListOrientation]="'horizontal'"
|
||||
(cdkDropListDropped)="listDropped($event)">
|
||||
|
||||
<!-- Group all cdkDropList's after this point together so that the cards can be transferred between lists -->
|
||||
<div
|
||||
class="flex items-start"
|
||||
cdkDropListGroup>
|
||||
|
||||
<!-- List -->
|
||||
<ng-container *ngFor="let list of board.lists; trackBy: trackByFn">
|
||||
<div
|
||||
class="flex-0 w-72 p-2 rounded-2xl bg-default"
|
||||
cdkDrag
|
||||
[cdkDragLockAxis]="'x'">
|
||||
|
||||
<div
|
||||
class="flex items-center justify-between"
|
||||
cdkDragHandle>
|
||||
<div class="flex items-center w-full py-2 px-3 rounded-md cursor-text border border-transparent focus-within:bg-white focus-within:shadow-sm focus-within:border-primary">
|
||||
<input
|
||||
class="w-full font-medium leading-5 bg-transparent"
|
||||
[spellcheck]="'false'"
|
||||
[value]="list.title"
|
||||
(focusout)="updateListTitle($event, list)"
|
||||
(keydown.enter)="listTitleInput.blur()"
|
||||
#listTitleInput>
|
||||
</div>
|
||||
<div class="flex items-center justify-center min-w-6 ml-4 text-sm font-semibold leading-6 rounded-full bg-gray-300 text-secondary">
|
||||
{{list.cards.length}}
|
||||
</div>
|
||||
<div class="ml-1">
|
||||
<button
|
||||
class="w-8 h-8 min-h-8"
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="listMenu">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
|
||||
</button>
|
||||
<mat-menu #listMenu="matMenu">
|
||||
<button
|
||||
mat-menu-item
|
||||
(click)="renameList(listTitleInput)">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
|
||||
Rename List
|
||||
</button>
|
||||
<button
|
||||
mat-menu-item
|
||||
(click)="deleteList(list.id)">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:trash'"></mat-icon>
|
||||
Delete List
|
||||
</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cards -->
|
||||
<div class="mt-2 rounded-xl bg-gray-400 bg-opacity-12">
|
||||
<div
|
||||
[id]="list.id"
|
||||
class="p-3 pb-0"
|
||||
cdkDropList
|
||||
[cdkDropListData]="list.cards"
|
||||
(cdkDropListDropped)="cardDropped($event)">
|
||||
|
||||
<!-- Card -->
|
||||
<ng-container *ngFor="let card of list.cards; trackBy: trackByFn">
|
||||
<a
|
||||
class="flex flex-col items-start mb-3 p-5 space-y-3 shadow rounded-lg overflow-hidden bg-card"
|
||||
[routerLink]="['card', card.id]"
|
||||
cdkDrag>
|
||||
<!-- Cover image -->
|
||||
<ng-container *ngIf="card.coverImage">
|
||||
<div class="-mx-5 -mt-5 mb-2">
|
||||
<img
|
||||
class="w-full object-cover"
|
||||
[src]="card.coverImage">
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Title -->
|
||||
<div class="text-lg font-medium leading-5">{{card.title}}</div>
|
||||
<!-- Labels -->
|
||||
<ng-container *ngIf="card.labels.length">
|
||||
<div>
|
||||
<div class="flex flex-wrap -mx-1 -mb-2">
|
||||
<ng-container *ngFor="let label of card.labels; trackBy: trackByFn">
|
||||
<div class="mx-1 mb-2 py-0.5 px-3 rounded-full text-sm font-medium text-gray-500 bg-gray-100 dark:text-gray-300 dark:bg-gray-700">
|
||||
{{label.title}}
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Due date -->
|
||||
<ng-container *ngIf="card.dueDate">
|
||||
<div
|
||||
class="flex items-center rounded text-sm font-medium leading-5 text-secondary"
|
||||
[ngClass]="{'text-red-600': isOverdue(card.dueDate)}">
|
||||
<mat-icon
|
||||
class="icon-size-4 text-current"
|
||||
[svgIcon]="'heroicons_outline:clock'"></mat-icon>
|
||||
<div class="ml-1">
|
||||
{{card.dueDate | date: 'longDate'}}
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</a>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<!-- New card -->
|
||||
<scrumboard-board-add-card
|
||||
(saved)="addCard(list, $event)"
|
||||
[buttonTitle]="list.cards.length ? 'Add another card' : 'Add a card'">
|
||||
</scrumboard-board-add-card>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- New list -->
|
||||
<scrumboard-board-add-list
|
||||
(saved)="addList($event)"
|
||||
[buttonTitle]="board.lists.length ? 'Add another list' : 'Add a list'">
|
||||
</scrumboard-board-add-list>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Invisible router-outlet for ScrumboardCard component -->
|
||||
<div class="absolute invisible w-0 h-0 opacity-0 pointer-events-none">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
@@ -0,0 +1,15 @@
|
||||
.cdk-drag-preview {
|
||||
@apply shadow-2xl;
|
||||
}
|
||||
|
||||
.cdk-drag-placeholder {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.cdk-drag-animating {
|
||||
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.cdk-drop-list-dragging div:not(.cdk-drag-placeholder) {
|
||||
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
298
src/app/modules/admin/apps/scrumboard/board/board.component.ts
Normal file
298
src/app/modules/admin/apps/scrumboard/board/board.component.ts
Normal file
@@ -0,0 +1,298 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { ScrumboardService } from 'app/modules/admin/apps/scrumboard/scrumboard.service';
|
||||
import { Board, Card, List } from 'app/modules/admin/apps/scrumboard/scrumboard.models';
|
||||
import * as moment from 'moment';
|
||||
|
||||
@Component({
|
||||
selector : 'scrumboard-board',
|
||||
templateUrl : './board.component.html',
|
||||
styleUrls : ['./board.component.scss'],
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ScrumboardBoardComponent implements OnInit, OnDestroy
|
||||
{
|
||||
board: Board;
|
||||
listTitleForm: FormGroup;
|
||||
|
||||
// Private
|
||||
private readonly _positionStep: number = 65536;
|
||||
private readonly _maxListCount: number = 200;
|
||||
private readonly _maxPosition: number = this._positionStep * 500;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _formBuilder: FormBuilder,
|
||||
private _scrumboardService: ScrumboardService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Initialize the list title form
|
||||
this.listTitleForm = this._formBuilder.group({
|
||||
title: ['']
|
||||
});
|
||||
|
||||
// Get the board
|
||||
this._scrumboardService.board$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((board: Board) => {
|
||||
this.board = {...board};
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Focus on the given element to start editing the list title
|
||||
*
|
||||
* @param listTitleInput
|
||||
*/
|
||||
renameList(listTitleInput: HTMLElement): void
|
||||
{
|
||||
// Use timeout so it can wait for menu to close
|
||||
setTimeout(() => {
|
||||
listTitleInput.focus();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Add new list
|
||||
*
|
||||
* @param title
|
||||
*/
|
||||
addList(title: string): void
|
||||
{
|
||||
// Limit the max list count
|
||||
if ( this.board.lists.length >= this._maxListCount )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Create a new list model
|
||||
const list = new List({
|
||||
boardId : this.board.id,
|
||||
position: this.board.lists.length ? this.board.lists[this.board.lists.length - 1].position + this._positionStep : this._positionStep,
|
||||
title : title
|
||||
});
|
||||
|
||||
// Save the list
|
||||
this._scrumboardService.createList(list).subscribe();
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the list title
|
||||
*
|
||||
* @param event
|
||||
* @param list
|
||||
*/
|
||||
updateListTitle(event: any, list: List): void
|
||||
{
|
||||
// Get the target element
|
||||
const element: HTMLInputElement = event.target;
|
||||
|
||||
// Get the new title
|
||||
const newTitle = element.value;
|
||||
|
||||
// If the title is empty...
|
||||
if ( !newTitle || newTitle.trim() === '' )
|
||||
{
|
||||
// Reset to original title and return
|
||||
element.value = list.title;
|
||||
return;
|
||||
}
|
||||
|
||||
// Update the list title and element value
|
||||
list.title = element.value = newTitle.trim();
|
||||
|
||||
// Update the list
|
||||
this._scrumboardService.updateList(list).subscribe();
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete the list
|
||||
*
|
||||
* @param id
|
||||
*/
|
||||
deleteList(id): void
|
||||
{
|
||||
// Delete the list
|
||||
this._scrumboardService.deleteList(id).subscribe();
|
||||
}
|
||||
|
||||
/**
|
||||
* Add new card
|
||||
*/
|
||||
addCard(list: List, title: string): void
|
||||
{
|
||||
// Create a new card model
|
||||
const card = new Card({
|
||||
boardId : this.board.id,
|
||||
listId : list.id,
|
||||
position: list.cards.length ? list.cards[list.cards.length - 1].position + this._positionStep : this._positionStep,
|
||||
title : title
|
||||
});
|
||||
|
||||
// Save the card
|
||||
this._scrumboardService.createCard(card).subscribe();
|
||||
}
|
||||
|
||||
/**
|
||||
* List dropped
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
listDropped(event: CdkDragDrop<List[]>): void
|
||||
{
|
||||
// Move the item
|
||||
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
|
||||
|
||||
// Calculate the positions
|
||||
const updated = this._calculatePositions(event);
|
||||
|
||||
// Update the lists
|
||||
this._scrumboardService.updateLists(updated).subscribe();
|
||||
}
|
||||
|
||||
/**
|
||||
* Card dropped
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
cardDropped(event: CdkDragDrop<Card[]>): void
|
||||
{
|
||||
// Move or transfer the item
|
||||
if ( event.previousContainer === event.container )
|
||||
{
|
||||
// Move the item
|
||||
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
|
||||
}
|
||||
else
|
||||
{
|
||||
// Transfer the item
|
||||
transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
|
||||
|
||||
// Update the card's list it
|
||||
event.container.data[event.currentIndex].listId = event.container.id;
|
||||
}
|
||||
|
||||
// Calculate the positions
|
||||
const updated = this._calculatePositions(event);
|
||||
|
||||
// Update the cards
|
||||
this._scrumboardService.updateCards(updated).subscribe();
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the given ISO_8601 date string is overdue
|
||||
*
|
||||
* @param date
|
||||
*/
|
||||
isOverdue(date: string): boolean
|
||||
{
|
||||
return moment(date, moment.ISO_8601).isBefore(moment(), 'days');
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Private methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Calculate and set item positions
|
||||
* from given CdkDragDrop event
|
||||
*
|
||||
* @param event
|
||||
* @private
|
||||
*/
|
||||
private _calculatePositions(event: CdkDragDrop<any[]>): any[]
|
||||
{
|
||||
// Get the items
|
||||
let items = event.container.data;
|
||||
const currentItem = items[event.currentIndex];
|
||||
const prevItem = items[event.currentIndex - 1] || null;
|
||||
const nextItem = items[event.currentIndex + 1] || null;
|
||||
|
||||
// If the item moved to the top...
|
||||
if ( !prevItem )
|
||||
{
|
||||
// If the item moved to an empty container
|
||||
if ( !nextItem )
|
||||
{
|
||||
currentItem.position = this._positionStep;
|
||||
}
|
||||
else
|
||||
{
|
||||
currentItem.position = nextItem.position / 2;
|
||||
}
|
||||
}
|
||||
// If the item moved to the bottom...
|
||||
else if ( !nextItem )
|
||||
{
|
||||
currentItem.position = prevItem.position + this._positionStep;
|
||||
}
|
||||
// If the item moved in between other items...
|
||||
else
|
||||
{
|
||||
currentItem.position = (prevItem.position + nextItem.position) / 2;
|
||||
}
|
||||
|
||||
// Check if all item positions need to be updated
|
||||
if ( !Number.isInteger(currentItem.position) || currentItem.position >= this._maxPosition )
|
||||
{
|
||||
// Re-calculate all orders
|
||||
items = items.map((value, index) => {
|
||||
value.position = (index + 1) * this._positionStep;
|
||||
return value;
|
||||
});
|
||||
|
||||
// Return items
|
||||
return items;
|
||||
}
|
||||
|
||||
// Return currentItem
|
||||
return [currentItem];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
<div
|
||||
class="absolute inset-0 flex flex-col min-w-0 overflow-y-auto"
|
||||
cdkScrollable>
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex flex-col flex-auto items-center p-6 sm:p-10">
|
||||
|
||||
<!-- Title -->
|
||||
<div class="mt-4 md:mt-24 text-3xl md:text-6xl font-extrabold tracking-tight leading-7 sm:leading-10">
|
||||
Scrumboard Boards
|
||||
</div>
|
||||
|
||||
<!-- Boards -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-8 md:mt-16">
|
||||
<ng-container *ngFor="let board of boards; trackBy: trackByFn">
|
||||
<a
|
||||
class="flex flex-col items-start w-56 p-6 rounded-lg shadow bg-card rounded-lg hover:shadow-xl transition-shadow duration-150 ease-in-out"
|
||||
[routerLink]="[board.id]">
|
||||
<div class="flex items-center justify-center p-4 rounded-full bg-primary-50 text-primary-700">
|
||||
<mat-icon
|
||||
class="text-current"
|
||||
[svgIcon]="board.icon"></mat-icon>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-5 text-lg font-medium leading-5">{{board.title}}</div>
|
||||
<!-- Description -->
|
||||
<div class="mt-0.5 line-clamp-2 text-secondary">{{board.description}}</div>
|
||||
<!-- Members -->
|
||||
<ng-container *ngIf="board.members?.length">
|
||||
<div class="w-12 h-1 mt-6 border-t-2"></div>
|
||||
<div class="flex items-center mt-6 -space-x-1.5">
|
||||
<ng-container *ngFor="let member of board.members.slice(0, 5); trackBy: trackByFn">
|
||||
<img
|
||||
class="flex-0 w-8 h-8 rounded-full ring ring-offset-1 ring-bg-card ring-offset-bg-card object-cover"
|
||||
[src]="member.avatar"
|
||||
alt="Member avatar">
|
||||
</ng-container>
|
||||
<ng-container *ngIf="board.members.length > 5">
|
||||
<div class="flex flex-0 items-center justify-center w-8 h-8 rounded-full ring ring-offset-1 ring-bg-card ring-offset-bg-card bg-gray-200 text-gray-500">
|
||||
<div class="text-md font-semibold">
|
||||
+{{ board.members.slice(5).length }}
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Last activity -->
|
||||
<div class="flex items-center mt-4 text-md font-md">
|
||||
<div class="text-secondary">Edited:</div>
|
||||
<div class="ml-1">{{formatDateAsRelative(board.lastActivity)}}</div>
|
||||
</div>
|
||||
</a>
|
||||
</ng-container>
|
||||
<!-- New board -->
|
||||
<div class="flex flex-col items-center justify-center w-56 rounded-lg cursor-pointer border-2 border-gray-300 border-dashed hover:bg-hover transition-colors duration-150 ease-in-out">
|
||||
<mat-icon
|
||||
class="icon-size-12 text-hint"
|
||||
[svgIcon]="'heroicons_outline:plus'"></mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import * as moment from 'moment';
|
||||
import { Board } from 'app/modules/admin/apps/scrumboard/scrumboard.models';
|
||||
import { ScrumboardService } from 'app/modules/admin/apps/scrumboard/scrumboard.service';
|
||||
|
||||
@Component({
|
||||
selector : 'scrumboard-boards',
|
||||
templateUrl : './boards.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ScrumboardBoardsComponent implements OnInit, OnDestroy
|
||||
{
|
||||
boards: Board[];
|
||||
|
||||
// Private
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _scrumboardService: ScrumboardService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the boards
|
||||
this._scrumboardService.boards$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((boards: Board[]) => {
|
||||
this.boards = boards;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Format the given ISO_8601 date as a relative date
|
||||
*
|
||||
* @param date
|
||||
*/
|
||||
formatDateAsRelative(date: string): string
|
||||
{
|
||||
return moment(date, moment.ISO_8601).fromNow();
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
SCRUMBOARD -> BOARDS -> LIST -> CARD
|
||||
43
src/app/modules/admin/apps/scrumboard/card/card.component.ts
Normal file
43
src/app/modules/admin/apps/scrumboard/card/card.component.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { ScrumboardCardDetailsComponent } from 'app/modules/admin/apps/scrumboard/card/details/details.component';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector : 'scrumboard-card',
|
||||
templateUrl : './card.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ScrumboardCardComponent implements OnInit
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _activatedRoute: ActivatedRoute,
|
||||
private _matDialog: MatDialog,
|
||||
private _router: Router
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Launch the modal
|
||||
this._matDialog.open(ScrumboardCardDetailsComponent, {autoFocus: false})
|
||||
.afterClosed()
|
||||
.subscribe(() => {
|
||||
|
||||
// Go up twice because card routes are setup like this; "card/CARD_ID"
|
||||
this._router.navigate(['./../..'], {relativeTo: this._activatedRoute});
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
<div class="flex flex-col flex-auto md:w-160 md:min-w-160 max-h-160 -m-6 overflow-y-auto">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-0 items-center justify-between h-16 pr-3 sm:pr-5 pl-6 sm:pl-8 bg-primary text-on-primary">
|
||||
<div class="text-lg font-medium">Card</div>
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="matDialogRef.close()"
|
||||
[tabIndex]="-1">
|
||||
<mat-icon
|
||||
class="text-current"
|
||||
[svgIcon]="'heroicons_outline:x'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Card form -->
|
||||
<form
|
||||
class="flex flex-col flex-0 items-start w-full p-6 sm:p-8 space-y-6 overflow-y-auto"
|
||||
[formGroup]="cardForm">
|
||||
|
||||
<!-- Title -->
|
||||
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
|
||||
<mat-label>Title</mat-label>
|
||||
<textarea
|
||||
matInput
|
||||
[formControlName]="'title'"
|
||||
[rows]="1"
|
||||
matTextareaAutosize
|
||||
[matAutosizeMinRows]="1">
|
||||
</textarea>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Description -->
|
||||
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
|
||||
<mat-label>Description</mat-label>
|
||||
<textarea
|
||||
matInput
|
||||
[formControlName]="'description'"
|
||||
[rows]="1"
|
||||
matTextareaAutosize
|
||||
[matAutosizeMinRows]="1">
|
||||
</textarea>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Due date -->
|
||||
<div>
|
||||
<div class="font-medium">Due date</div>
|
||||
<div
|
||||
class="relative flex items-center mt-1.5 px-4 leading-9 rounded-full cursor-pointer"
|
||||
[ngClass]="{'text-gray-500 bg-gray-100 dark:text-gray-300 dark:bg-gray-700': !card.dueDate,
|
||||
'text-green-800 bg-green-200 dark:text-green-100 dark:bg-green-500': card.dueDate && !isOverdue(card.dueDate),
|
||||
'text-red-800 bg-red-200 dark:text-red-100 dark:bg-red-500': card.dueDate && isOverdue(card.dueDate)}"
|
||||
(click)="dueDatePicker.open()">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-current"
|
||||
[svgIcon]="'heroicons_solid:calendar'"></mat-icon>
|
||||
<span class="ml-2 text-md font-medium">
|
||||
<ng-container *ngIf="card.dueDate">{{card.dueDate | date:'longDate'}}</ng-container>
|
||||
<ng-container *ngIf="!card.dueDate">Not set</ng-container>
|
||||
</span>
|
||||
<mat-form-field class="fuse-mat-no-subscript fuse-mat-dense invisible absolute inset-0 -mt-2.5 opacity-0 pointer-events-none">
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'dueDate'"
|
||||
[matDatepicker]="dueDatePicker">
|
||||
<mat-datepicker #dueDatePicker>
|
||||
<mat-datepicker-actions>
|
||||
<button
|
||||
mat-button
|
||||
(click)="cardForm.get('dueDate').setValue(null)"
|
||||
matDatepickerCancel>
|
||||
Clear
|
||||
</button>
|
||||
<button
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
matDatepickerApply>
|
||||
Select
|
||||
</button>
|
||||
</mat-datepicker-actions>
|
||||
</mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Labels -->
|
||||
<div class="w-full">
|
||||
<div class="font-medium">Labels</div>
|
||||
<div class="mt-1 rounded-md border border-gray-300 shadow-sm overflow-hidden">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center my-2 mx-3">
|
||||
<div class="flex items-center flex-auto min-w-0">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:search'"></mat-icon>
|
||||
<input
|
||||
class="min-w-0 ml-2 py-1 border-0"
|
||||
type="text"
|
||||
placeholder="Enter label name"
|
||||
(input)="filterLabels($event)"
|
||||
(keydown)="filterLabelsInputKeyDown($event)"
|
||||
[maxLength]="50">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Available labels -->
|
||||
<div class="max-h-40 leading-none overflow-y-auto border-t">
|
||||
<!-- Labels -->
|
||||
<ng-container *ngFor="let label of filteredLabels; trackBy: trackByFn">
|
||||
<mat-checkbox
|
||||
class="flex items-center h-10 min-h-10 px-4"
|
||||
[color]="'primary'"
|
||||
[checked]="hasLabel(label)"
|
||||
(change)="toggleProductTag(label, $event)">
|
||||
{{label.title}}
|
||||
</mat-checkbox>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,286 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { MatCheckboxChange } from '@angular/material/checkbox';
|
||||
import { MatDialogRef } from '@angular/material/dialog';
|
||||
import { Subject } from 'rxjs';
|
||||
import { debounceTime, takeUntil, tap } from 'rxjs/operators';
|
||||
import * as moment from 'moment';
|
||||
import { assign } from 'lodash-es';
|
||||
import { ScrumboardService } from 'app/modules/admin/apps/scrumboard/scrumboard.service';
|
||||
import { Board, Card, Label } from 'app/modules/admin/apps/scrumboard/scrumboard.models';
|
||||
|
||||
@Component({
|
||||
selector : 'scrumboard-card-details',
|
||||
templateUrl : './details.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ScrumboardCardDetailsComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@ViewChild('labelInput') labelInput: ElementRef<HTMLInputElement>;
|
||||
board: Board;
|
||||
card: Card;
|
||||
cardForm: FormGroup;
|
||||
labels: Label[];
|
||||
filteredLabels: Label[];
|
||||
|
||||
// Private
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
public matDialogRef: MatDialogRef<ScrumboardCardDetailsComponent>,
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _formBuilder: FormBuilder,
|
||||
private _scrumboardService: ScrumboardService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the board
|
||||
this._scrumboardService.board$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((board) => {
|
||||
|
||||
// Board data
|
||||
this.board = board;
|
||||
|
||||
// Get the labels
|
||||
this.labels = this.filteredLabels = board.labels;
|
||||
});
|
||||
|
||||
// Get the card details
|
||||
this._scrumboardService.card$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((card) => {
|
||||
this.card = card;
|
||||
});
|
||||
|
||||
// Prepare the card form
|
||||
this.cardForm = this._formBuilder.group({
|
||||
id : [''],
|
||||
title : ['', Validators.required],
|
||||
description: [''],
|
||||
labels : [[]],
|
||||
dueDate : [null]
|
||||
});
|
||||
|
||||
// Fill the form
|
||||
this.cardForm.setValue({
|
||||
id : this.card.id,
|
||||
title : this.card.title,
|
||||
description: this.card.description,
|
||||
labels : this.card.labels,
|
||||
dueDate : this.card.dueDate
|
||||
});
|
||||
|
||||
// Update card when there is a value change on the card form
|
||||
this.cardForm.valueChanges
|
||||
.pipe(
|
||||
tap((value) => {
|
||||
|
||||
// Update the card object
|
||||
this.card = assign(this.card, value);
|
||||
}),
|
||||
debounceTime(300),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
)
|
||||
.subscribe((value) => {
|
||||
|
||||
// Update the card on the server
|
||||
this._scrumboardService.updateCard(value.id, value).subscribe();
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Return whether the card has the given label
|
||||
*
|
||||
* @param label
|
||||
*/
|
||||
hasLabel(label: Label): boolean
|
||||
{
|
||||
return !!this.card.labels.find(cardLabel => cardLabel.id === label.id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter labels
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
filterLabels(event): void
|
||||
{
|
||||
// Get the value
|
||||
const value = event.target.value.toLowerCase();
|
||||
|
||||
// Filter the labels
|
||||
this.filteredLabels = this.labels.filter(label => label.title.toLowerCase().includes(value));
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter labels input key down event
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
filterLabelsInputKeyDown(event): void
|
||||
{
|
||||
// Return if the pressed key is not 'Enter'
|
||||
if ( event.key !== 'Enter' )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// If there is no label available...
|
||||
if ( this.filteredLabels.length === 0 )
|
||||
{
|
||||
// Return
|
||||
return;
|
||||
}
|
||||
|
||||
// If there is a label...
|
||||
const label = this.filteredLabels[0];
|
||||
const isLabelApplied = this.card.labels.find(cardLabel => cardLabel.id === label.id);
|
||||
|
||||
// If the found label is already applied to the card...
|
||||
if ( isLabelApplied )
|
||||
{
|
||||
// Remove the label from the card
|
||||
this.removeLabelFromCard(label);
|
||||
}
|
||||
else
|
||||
{
|
||||
// Otherwise add the label to the card
|
||||
this.addLabelToCard(label);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle card label
|
||||
*
|
||||
* @param label
|
||||
* @param change
|
||||
*/
|
||||
toggleProductTag(label: Label, change: MatCheckboxChange): void
|
||||
{
|
||||
if ( change.checked )
|
||||
{
|
||||
this.addLabelToCard(label);
|
||||
}
|
||||
else
|
||||
{
|
||||
this.removeLabelFromCard(label);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add label to the card
|
||||
*
|
||||
* @param label
|
||||
*/
|
||||
addLabelToCard(label: Label): void
|
||||
{
|
||||
// Add the label
|
||||
this.card.labels.unshift(label);
|
||||
|
||||
// Update the card form data
|
||||
this.cardForm.get('labels').patchValue(this.card.labels);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove label from the card
|
||||
*
|
||||
* @param label
|
||||
*/
|
||||
removeLabelFromCard(label: Label): void
|
||||
{
|
||||
// Remove the label
|
||||
this.card.labels.splice(this.card.labels.findIndex(cardLabel => cardLabel.id === label.id), 1);
|
||||
|
||||
// Update the card form data
|
||||
this.cardForm.get('labels').patchValue(this.card.labels);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the given date is overdue
|
||||
*/
|
||||
isOverdue(date: string): boolean
|
||||
{
|
||||
return moment(date, moment.ISO_8601).isBefore(moment(), 'days');
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Private methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Read the given file for demonstration purposes
|
||||
*
|
||||
* @param file
|
||||
*/
|
||||
private _readAsDataURL(file: File): Promise<any>
|
||||
{
|
||||
// Return a new promise
|
||||
return new Promise((resolve, reject) => {
|
||||
|
||||
// Create a new reader
|
||||
const reader = new FileReader();
|
||||
|
||||
// Resolve the promise on success
|
||||
reader.onload = (): void => {
|
||||
resolve(reader.result);
|
||||
};
|
||||
|
||||
// Reject the promise on error
|
||||
reader.onerror = (e): void => {
|
||||
reject(e);
|
||||
};
|
||||
|
||||
// Read the file as the
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<router-outlet></router-outlet>
|
||||
@@ -0,0 +1,17 @@
|
||||
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'scrumboard',
|
||||
templateUrl : './scrumboard.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ScrumboardComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
}
|
||||
190
src/app/modules/admin/apps/scrumboard/scrumboard.models.ts
Normal file
190
src/app/modules/admin/apps/scrumboard/scrumboard.models.ts
Normal file
@@ -0,0 +1,190 @@
|
||||
import { IBoard, ICard, ILabel, IList, IMember } from 'app/modules/admin/apps/scrumboard/scrumboard.types';
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Board
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
export class Board implements Required<IBoard>
|
||||
{
|
||||
id: string | null;
|
||||
title: string;
|
||||
description: string | null;
|
||||
icon: string | null;
|
||||
lastActivity: string | null;
|
||||
lists: List[];
|
||||
labels: Label[];
|
||||
members: Member[];
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(board: IBoard)
|
||||
{
|
||||
this.id = board.id || null;
|
||||
this.title = board.title;
|
||||
this.description = board.description || null;
|
||||
this.icon = board.icon || null;
|
||||
this.lastActivity = board.lastActivity || null;
|
||||
this.lists = [];
|
||||
this.labels = [];
|
||||
this.members = [];
|
||||
|
||||
// Lists
|
||||
if ( board.lists )
|
||||
{
|
||||
this.lists = board.lists.map((list) => {
|
||||
if ( !(list instanceof List) )
|
||||
{
|
||||
return new List(list);
|
||||
}
|
||||
|
||||
return list;
|
||||
});
|
||||
}
|
||||
|
||||
// Labels
|
||||
if ( board.labels )
|
||||
{
|
||||
this.labels = board.labels.map((label) => {
|
||||
if ( !(label instanceof Label) )
|
||||
{
|
||||
return new Label(label);
|
||||
}
|
||||
|
||||
return label;
|
||||
});
|
||||
}
|
||||
|
||||
// Members
|
||||
if ( board.members )
|
||||
{
|
||||
this.members = board.members.map((member) => {
|
||||
if ( !(member instanceof Member) )
|
||||
{
|
||||
return new Member(member);
|
||||
}
|
||||
|
||||
return member;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ List
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
export class List implements Required<IList>
|
||||
{
|
||||
id: string | null;
|
||||
boardId: string;
|
||||
position: number;
|
||||
title: string;
|
||||
cards: Card[];
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(list: IList)
|
||||
{
|
||||
this.id = list.id || null;
|
||||
this.boardId = list.boardId;
|
||||
this.position = list.position;
|
||||
this.title = list.title;
|
||||
this.cards = [];
|
||||
|
||||
// Cards
|
||||
if ( list.cards )
|
||||
{
|
||||
this.cards = list.cards.map((card) => {
|
||||
if ( !(card instanceof Card) )
|
||||
{
|
||||
return new Card(card);
|
||||
}
|
||||
|
||||
return card;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Card
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
export class Card implements Required<ICard>
|
||||
{
|
||||
id: string | null;
|
||||
boardId: string;
|
||||
listId: string;
|
||||
position: number;
|
||||
title: string;
|
||||
description: string | null;
|
||||
labels: Label[];
|
||||
dueDate: string | null;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(card: ICard)
|
||||
{
|
||||
this.id = card.id || null;
|
||||
this.boardId = card.boardId;
|
||||
this.listId = card.listId;
|
||||
this.position = card.position;
|
||||
this.title = card.title;
|
||||
this.description = card.description || null;
|
||||
this.labels = [];
|
||||
this.dueDate = card.dueDate || null;
|
||||
|
||||
// Labels
|
||||
if ( card.labels )
|
||||
{
|
||||
this.labels = card.labels.map((label) => {
|
||||
if ( !(label instanceof Label) )
|
||||
{
|
||||
return new Label(label);
|
||||
}
|
||||
|
||||
return label;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Member
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
export class Member implements Required<IMember>
|
||||
{
|
||||
id: string | null;
|
||||
name: string;
|
||||
avatar: string | null;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(member: IMember)
|
||||
{
|
||||
this.id = member.id || null;
|
||||
this.name = member.name;
|
||||
this.avatar = member.avatar || null;
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Label
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
export class Label implements Required<ILabel>
|
||||
{
|
||||
id: string | null;
|
||||
boardId: string;
|
||||
title: string;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(label: ILabel)
|
||||
{
|
||||
this.id = label.id || null;
|
||||
this.boardId = label.boardId;
|
||||
this.title = label.title;
|
||||
}
|
||||
}
|
||||
70
src/app/modules/admin/apps/scrumboard/scrumboard.module.ts
Normal file
70
src/app/modules/admin/apps/scrumboard/scrumboard.module.ts
Normal file
@@ -0,0 +1,70 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { DragDropModule } from '@angular/cdk/drag-drop';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MAT_DATE_FORMATS } from '@angular/material/core';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatMomentDateModule } from '@angular/material-moment-adapter';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import * as moment from 'moment';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { ScrumboardComponent } from 'app/modules/admin/apps/scrumboard/scrumboard.component';
|
||||
import { ScrumboardBoardsComponent } from 'app/modules/admin/apps/scrumboard/boards/boards.component';
|
||||
import { ScrumboardBoardComponent } from 'app/modules/admin/apps/scrumboard/board/board.component';
|
||||
import { ScrumboardBoardAddCardComponent } from 'app/modules/admin/apps/scrumboard/board/add-card/add-card.component';
|
||||
import { ScrumboardBoardAddListComponent } from 'app/modules/admin/apps/scrumboard/board/add-list/add-list.component';
|
||||
import { ScrumboardCardComponent } from 'app/modules/admin/apps/scrumboard/card/card.component';
|
||||
import { ScrumboardCardDetailsComponent } from 'app/modules/admin/apps/scrumboard/card/details/details.component';
|
||||
import { scrumboardRoutes } from 'app/modules/admin/apps/scrumboard/scrumboard.routing';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
ScrumboardComponent,
|
||||
ScrumboardBoardsComponent,
|
||||
ScrumboardBoardComponent,
|
||||
ScrumboardBoardAddCardComponent,
|
||||
ScrumboardBoardAddListComponent,
|
||||
ScrumboardCardComponent,
|
||||
ScrumboardCardDetailsComponent
|
||||
],
|
||||
imports : [
|
||||
RouterModule.forChild(scrumboardRoutes),
|
||||
DragDropModule,
|
||||
MatButtonModule,
|
||||
MatCheckboxModule,
|
||||
MatDatepickerModule,
|
||||
MatDialogModule,
|
||||
MatFormFieldModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
MatMenuModule,
|
||||
MatMomentDateModule,
|
||||
MatProgressBarModule,
|
||||
SharedModule
|
||||
],
|
||||
providers : [
|
||||
{
|
||||
provide : MAT_DATE_FORMATS,
|
||||
useValue: {
|
||||
parse : {
|
||||
dateInput: moment.ISO_8601
|
||||
},
|
||||
display: {
|
||||
dateInput : 'll',
|
||||
monthYearLabel : 'MMM YYYY',
|
||||
dateA11yLabel : 'LL',
|
||||
monthYearA11yLabel: 'MMMM YYYY'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
export class ScrumboardModule
|
||||
{
|
||||
}
|
||||
132
src/app/modules/admin/apps/scrumboard/scrumboard.resolvers.ts
Normal file
132
src/app/modules/admin/apps/scrumboard/scrumboard.resolvers.ts
Normal file
@@ -0,0 +1,132 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
|
||||
import { Observable, throwError } from 'rxjs';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { Board, Card } from 'app/modules/admin/apps/scrumboard/scrumboard.models';
|
||||
import { ScrumboardService } from 'app/modules/admin/apps/scrumboard/scrumboard.service';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ScrumboardBoardsResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _scrumboardService: ScrumboardService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Board[]>
|
||||
{
|
||||
return this._scrumboardService.getBoards();
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ScrumboardBoardResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _router: Router,
|
||||
private _scrumboardService: ScrumboardService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Board>
|
||||
{
|
||||
return this._scrumboardService.getBoard(route.paramMap.get('boardId'))
|
||||
.pipe(
|
||||
// Error here means the requested task is not available
|
||||
catchError((error) => {
|
||||
|
||||
// Log the error
|
||||
console.error(error);
|
||||
|
||||
// Get the parent url
|
||||
const parentUrl = state.url.split('/').slice(0, -1).join('/');
|
||||
|
||||
// Navigate to there
|
||||
this._router.navigateByUrl(parentUrl);
|
||||
|
||||
// Throw an error
|
||||
return throwError(error);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ScrumboardCardResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _router: Router,
|
||||
private _scrumboardService: ScrumboardService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Card>
|
||||
{
|
||||
return this._scrumboardService.getCard(route.paramMap.get('cardId'))
|
||||
.pipe(
|
||||
// Error here means the requested task is not available
|
||||
catchError((error) => {
|
||||
|
||||
// Log the error
|
||||
console.error(error);
|
||||
|
||||
// Get the parent url
|
||||
const parentUrl = state.url.split('/').slice(0, -1).join('/');
|
||||
|
||||
// Navigate to there
|
||||
this._router.navigateByUrl(parentUrl);
|
||||
|
||||
// Throw an error
|
||||
return throwError(error);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
31
src/app/modules/admin/apps/scrumboard/scrumboard.routing.ts
Normal file
31
src/app/modules/admin/apps/scrumboard/scrumboard.routing.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import { Route } from '@angular/router';
|
||||
import { ScrumboardBoardsComponent } from 'app/modules/admin/apps/scrumboard/boards/boards.component';
|
||||
import { ScrumboardBoardResolver, ScrumboardBoardsResolver, ScrumboardCardResolver } from 'app/modules/admin/apps/scrumboard/scrumboard.resolvers';
|
||||
import { ScrumboardBoardComponent } from 'app/modules/admin/apps/scrumboard/board/board.component';
|
||||
import { ScrumboardCardComponent } from 'app/modules/admin/apps/scrumboard/card/card.component';
|
||||
|
||||
export const scrumboardRoutes: Route[] = [
|
||||
{
|
||||
path : '',
|
||||
component: ScrumboardBoardsComponent,
|
||||
resolve : {
|
||||
boards: ScrumboardBoardsResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
path : ':boardId',
|
||||
component: ScrumboardBoardComponent,
|
||||
resolve : {
|
||||
board: ScrumboardBoardResolver
|
||||
},
|
||||
children : [
|
||||
{
|
||||
path : 'card/:cardId',
|
||||
component: ScrumboardCardComponent,
|
||||
resolve : {
|
||||
card: ScrumboardCardResolver
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
608
src/app/modules/admin/apps/scrumboard/scrumboard.service.ts
Normal file
608
src/app/modules/admin/apps/scrumboard/scrumboard.service.ts
Normal file
@@ -0,0 +1,608 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { BehaviorSubject, Observable, of, throwError } from 'rxjs';
|
||||
import { map, switchMap, take, tap } from 'rxjs/operators';
|
||||
import { Board, Card, Label, List } from 'app/modules/admin/apps/scrumboard/scrumboard.models';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ScrumboardService
|
||||
{
|
||||
// Private
|
||||
private _board: BehaviorSubject<Board | null>;
|
||||
private _boards: BehaviorSubject<Board[] | null>;
|
||||
private _card: BehaviorSubject<Card | null>;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _httpClient: HttpClient
|
||||
)
|
||||
{
|
||||
// Set the private defaults
|
||||
this._board = new BehaviorSubject(null);
|
||||
this._boards = new BehaviorSubject(null);
|
||||
this._card = new BehaviorSubject(null);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Getter for board
|
||||
*/
|
||||
get board$(): Observable<Board>
|
||||
{
|
||||
return this._board.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for boards
|
||||
*/
|
||||
get boards$(): Observable<Board[]>
|
||||
{
|
||||
return this._boards.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for card
|
||||
*/
|
||||
get card$(): Observable<Card>
|
||||
{
|
||||
return this._card.asObservable();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Get boards
|
||||
*/
|
||||
getBoards(): Observable<Board[]>
|
||||
{
|
||||
return this._httpClient.get<Board[]>('api/apps/scrumboard/boards').pipe(
|
||||
map(response => response.map(item => new Board(item))),
|
||||
tap(boards => this._boards.next(boards))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get board
|
||||
*
|
||||
* @param id
|
||||
*/
|
||||
getBoard(id: string): Observable<Board>
|
||||
{
|
||||
return this._httpClient.get<Board>('api/apps/scrumboard/board', {params: {id}}).pipe(
|
||||
map(response => new Board(response)),
|
||||
tap(board => this._board.next(board))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create board
|
||||
*
|
||||
* @param board
|
||||
*/
|
||||
createBoard(board: Board): Observable<Board>
|
||||
{
|
||||
return this.boards$.pipe(
|
||||
take(1),
|
||||
switchMap(boards => this._httpClient.put<Board>('api/apps/scrumboard/board', {board}).pipe(
|
||||
map((newBoard) => {
|
||||
|
||||
// Update the boards with the new board
|
||||
this._boards.next([...boards, newBoard]);
|
||||
|
||||
// Return new board from observable
|
||||
return newBoard;
|
||||
})
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the board
|
||||
*
|
||||
* @param id
|
||||
* @param board
|
||||
*/
|
||||
updateBoard(id: string, board: Board): Observable<Board>
|
||||
{
|
||||
return this.boards$.pipe(
|
||||
take(1),
|
||||
switchMap(boards => this._httpClient.patch<Board>('api/apps/scrumboard/board', {
|
||||
id,
|
||||
board
|
||||
}).pipe(
|
||||
map((updatedBoard) => {
|
||||
|
||||
// Find the index of the updated board
|
||||
const index = boards.findIndex(item => item.id === id);
|
||||
|
||||
// Update the board
|
||||
boards[index] = updatedBoard;
|
||||
|
||||
// Update the boards
|
||||
this._boards.next(boards);
|
||||
|
||||
// Return the updated board
|
||||
return updatedBoard;
|
||||
})
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete the board
|
||||
*
|
||||
* @param id
|
||||
*/
|
||||
deleteBoard(id: string): Observable<boolean>
|
||||
{
|
||||
return this.boards$.pipe(
|
||||
take(1),
|
||||
switchMap(boards => this._httpClient.delete('api/apps/scrumboard/board', {params: {id}}).pipe(
|
||||
map((isDeleted: boolean) => {
|
||||
|
||||
// Find the index of the deleted board
|
||||
const index = boards.findIndex(item => item.id === id);
|
||||
|
||||
// Delete the board
|
||||
boards.splice(index, 1);
|
||||
|
||||
// Update the boards
|
||||
this._boards.next(boards);
|
||||
|
||||
// Update the board
|
||||
this._board.next(null);
|
||||
|
||||
// Update the card
|
||||
this._card.next(null);
|
||||
|
||||
// Return the deleted status
|
||||
return isDeleted;
|
||||
})
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create list
|
||||
*
|
||||
* @param list
|
||||
*/
|
||||
createList(list: List): Observable<List>
|
||||
{
|
||||
return this._httpClient.post<List>('api/apps/scrumboard/board/list', {list}).pipe(
|
||||
map(response => new List(response)),
|
||||
tap((newList) => {
|
||||
|
||||
// Get the board value
|
||||
const board = this._board.value;
|
||||
|
||||
// Update the board lists with the new list
|
||||
board.lists = [...board.lists, newList];
|
||||
|
||||
// Sort the board lists
|
||||
board.lists.sort((a, b) => a.position - b.position);
|
||||
|
||||
// Update the board
|
||||
this._board.next(board);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the list
|
||||
*
|
||||
* @param list
|
||||
*/
|
||||
updateList(list: List): Observable<List>
|
||||
{
|
||||
return this._httpClient.patch<List>('api/apps/scrumboard/board/list', {list}).pipe(
|
||||
map(response => new List(response)),
|
||||
tap((updatedList) => {
|
||||
|
||||
// Get the board value
|
||||
const board = this._board.value;
|
||||
|
||||
// Find the index of the updated list
|
||||
const index = board.lists.findIndex(item => item.id === list.id);
|
||||
|
||||
// Update the list
|
||||
board.lists[index] = updatedList;
|
||||
|
||||
// Sort the board lists
|
||||
board.lists.sort((a, b) => a.position - b.position);
|
||||
|
||||
// Update the board
|
||||
this._board.next(board);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the lists
|
||||
*
|
||||
* @param lists
|
||||
*/
|
||||
updateLists(lists: List[]): Observable<List[]>
|
||||
{
|
||||
return this._httpClient.patch<List[]>('api/apps/scrumboard/board/lists', {lists}).pipe(
|
||||
map(response => response.map(item => new List(item))),
|
||||
tap((updatedLists) => {
|
||||
|
||||
// Get the board value
|
||||
const board = this._board.value;
|
||||
|
||||
// Go through the updated lists
|
||||
updatedLists.forEach((updatedList) => {
|
||||
|
||||
// Find the index of the updated list
|
||||
const index = board.lists.findIndex(item => item.id === updatedList.id);
|
||||
|
||||
// Update the list
|
||||
board.lists[index] = updatedList;
|
||||
});
|
||||
|
||||
// Sort the board lists
|
||||
board.lists.sort((a, b) => a.position - b.position);
|
||||
|
||||
// Update the board
|
||||
this._board.next(board);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete the list
|
||||
*
|
||||
* @param id
|
||||
*/
|
||||
deleteList(id: string): Observable<boolean>
|
||||
{
|
||||
return this._httpClient.delete<boolean>('api/apps/scrumboard/board/list', {params: {id}}).pipe(
|
||||
tap((isDeleted) => {
|
||||
|
||||
// Get the board value
|
||||
const board = this._board.value;
|
||||
|
||||
// Find the index of the deleted list
|
||||
const index = board.lists.findIndex(item => item.id === id);
|
||||
|
||||
// Delete the list
|
||||
board.lists.splice(index, 1);
|
||||
|
||||
// Sort the board lists
|
||||
board.lists.sort((a, b) => a.position - b.position);
|
||||
|
||||
// Update the board
|
||||
this._board.next(board);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get card
|
||||
*/
|
||||
getCard(id: string): Observable<Card>
|
||||
{
|
||||
return this._board.pipe(
|
||||
take(1),
|
||||
map((board) => {
|
||||
|
||||
// Find the card
|
||||
const card = board.lists.find(list => list.cards.some(item => item.id === id))
|
||||
.cards.find(item => item.id === id);
|
||||
|
||||
// Update the card
|
||||
this._card.next(card);
|
||||
|
||||
// Return the card
|
||||
return card;
|
||||
}),
|
||||
switchMap((card) => {
|
||||
|
||||
if ( !card )
|
||||
{
|
||||
return throwError('Could not found the card with id of ' + id + '!');
|
||||
}
|
||||
|
||||
return of(card);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create card
|
||||
*
|
||||
* @param card
|
||||
*/
|
||||
createCard(card: Card): Observable<Card>
|
||||
{
|
||||
return this._httpClient.put<Card>('api/apps/scrumboard/board/card', {card}).pipe(
|
||||
map(response => new Card(response)),
|
||||
tap((newCard) => {
|
||||
|
||||
// Get the board value
|
||||
const board = this._board.value;
|
||||
|
||||
// Find the list and push the new card in it
|
||||
board.lists.forEach((listItem, index, list) => {
|
||||
if ( listItem.id === newCard.listId )
|
||||
{
|
||||
list[index].cards.push(newCard);
|
||||
}
|
||||
});
|
||||
|
||||
// Update the board
|
||||
this._board.next(board);
|
||||
|
||||
// Return the new card
|
||||
return newCard;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the card
|
||||
*
|
||||
* @param id
|
||||
* @param card
|
||||
*/
|
||||
updateCard(id: string, card: Card): Observable<Card>
|
||||
{
|
||||
return this.board$.pipe(
|
||||
take(1),
|
||||
switchMap(board => this._httpClient.patch<Card>('api/apps/scrumboard/board/card', {
|
||||
id,
|
||||
card
|
||||
}).pipe(
|
||||
map((updatedCard) => {
|
||||
|
||||
// Find the card and update it
|
||||
board.lists.forEach((listItem) => {
|
||||
listItem.cards.forEach((cardItem, index, array) => {
|
||||
if ( cardItem.id === id )
|
||||
{
|
||||
array[index] = updatedCard;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Update the board
|
||||
this._board.next(board);
|
||||
|
||||
// Update the card
|
||||
this._card.next(updatedCard);
|
||||
|
||||
// Return the updated card
|
||||
return updatedCard;
|
||||
})
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the cards
|
||||
*
|
||||
* @param cards
|
||||
*/
|
||||
updateCards(cards: Card[]): Observable<Card[]>
|
||||
{
|
||||
return this._httpClient.patch<Card[]>('api/apps/scrumboard/board/cards', {cards}).pipe(
|
||||
map(response => response.map(item => new Card(item))),
|
||||
tap((updatedCards) => {
|
||||
|
||||
// Get the board value
|
||||
const board = this._board.value;
|
||||
|
||||
// Go through the updated cards
|
||||
updatedCards.forEach((updatedCard) => {
|
||||
|
||||
// Find the index of the updated card's list
|
||||
const listIndex = board.lists.findIndex(list => list.id === updatedCard.listId);
|
||||
|
||||
// Find the index of the updated card
|
||||
const cardIndex = board.lists[listIndex].cards.findIndex(item => item.id === updatedCard.id);
|
||||
|
||||
// Update the card
|
||||
board.lists[listIndex].cards[cardIndex] = updatedCard;
|
||||
|
||||
// Sort the cards
|
||||
board.lists[listIndex].cards.sort((a, b) => a.position - b.position);
|
||||
});
|
||||
|
||||
// Update the board
|
||||
this._board.next(board);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete the card
|
||||
*
|
||||
* @param id
|
||||
*/
|
||||
deleteCard(id: string): Observable<boolean>
|
||||
{
|
||||
return this.board$.pipe(
|
||||
take(1),
|
||||
switchMap(board => this._httpClient.delete('api/apps/scrumboard/board/card', {params: {id}}).pipe(
|
||||
map((isDeleted: boolean) => {
|
||||
|
||||
// Find the card and delete it
|
||||
board.lists.forEach((listItem) => {
|
||||
listItem.cards.forEach((cardItem, index, array) => {
|
||||
if ( cardItem.id === id )
|
||||
{
|
||||
array.splice(index, 1);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Update the board
|
||||
this._board.next(board);
|
||||
|
||||
// Update the card
|
||||
this._card.next(null);
|
||||
|
||||
// Return the deleted status
|
||||
return isDeleted;
|
||||
})
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update card positions
|
||||
*
|
||||
* @param cards
|
||||
*/
|
||||
updateCardPositions(cards: Card[]): void // Observable<Card[]>
|
||||
{
|
||||
/*return this._httpClient.patch<Card[]>('api/apps/scrumboard/board/card/positions', {cards}).pipe(
|
||||
map((response) => response.map((item) => new Card(item))),
|
||||
tap((updatedCards) => {
|
||||
|
||||
// Get the board value
|
||||
const board = this._board.value;
|
||||
|
||||
// Find the card and update it
|
||||
board.lists.forEach((listItem) => {
|
||||
listItem.cards.forEach((cardItem, index, array) => {
|
||||
if ( cardItem.id === id )
|
||||
{
|
||||
array[index] = updatedCard;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Update the lists
|
||||
board.lists = updatedLists;
|
||||
|
||||
// Sort the board lists
|
||||
board.lists.sort((a, b) => a.position - b.position);
|
||||
|
||||
// Update the board
|
||||
this._board.next(board);
|
||||
})
|
||||
);*/
|
||||
}
|
||||
|
||||
/**
|
||||
* Create label
|
||||
*
|
||||
* @param label
|
||||
*/
|
||||
createLabel(label: Label): Observable<Label>
|
||||
{
|
||||
return this.board$.pipe(
|
||||
take(1),
|
||||
switchMap(board => this._httpClient.post<Label>('api/apps/scrumboard/board/label', {label}).pipe(
|
||||
map((newLabel) => {
|
||||
|
||||
// Update the board labels with the new label
|
||||
board.labels = [...board.labels, newLabel];
|
||||
|
||||
// Update the board
|
||||
this._board.next(board);
|
||||
|
||||
// Return new label from observable
|
||||
return newLabel;
|
||||
})
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the label
|
||||
*
|
||||
* @param id
|
||||
* @param label
|
||||
*/
|
||||
updateLabel(id: string, label: Label): Observable<Label>
|
||||
{
|
||||
return this.board$.pipe(
|
||||
take(1),
|
||||
switchMap(board => this._httpClient.patch<Label>('api/apps/scrumboard/board/label', {
|
||||
id,
|
||||
label
|
||||
}).pipe(
|
||||
map((updatedLabel) => {
|
||||
|
||||
// Find the index of the updated label
|
||||
const index = board.labels.findIndex(item => item.id === id);
|
||||
|
||||
// Update the label
|
||||
board.labels[index] = updatedLabel;
|
||||
|
||||
// Update the board
|
||||
this._board.next(board);
|
||||
|
||||
// Return the updated label
|
||||
return updatedLabel;
|
||||
})
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete the label
|
||||
*
|
||||
* @param id
|
||||
*/
|
||||
deleteLabel(id: string): Observable<boolean>
|
||||
{
|
||||
return this.board$.pipe(
|
||||
take(1),
|
||||
switchMap(board => this._httpClient.delete('api/apps/scrumboard/board/label', {params: {id}}).pipe(
|
||||
map((isDeleted: boolean) => {
|
||||
|
||||
// Find the index of the deleted label
|
||||
const index = board.labels.findIndex(item => item.id === id);
|
||||
|
||||
// Delete the label
|
||||
board.labels.splice(index, 1);
|
||||
|
||||
// If the label is deleted...
|
||||
if ( isDeleted )
|
||||
{
|
||||
// Remove the label from any card that uses it
|
||||
board.lists.forEach((list) => {
|
||||
list.cards.forEach((card) => {
|
||||
const labelIndex = card.labels.findIndex(label => label.id === id);
|
||||
if ( labelIndex > -1 )
|
||||
{
|
||||
card.labels.splice(labelIndex, 1);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Update the board
|
||||
this._board.next(board);
|
||||
|
||||
// Return the deleted status
|
||||
return isDeleted;
|
||||
})
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Search within board cards
|
||||
*
|
||||
* @param query
|
||||
*/
|
||||
search(query: string): Observable<Card[] | null>
|
||||
{
|
||||
// @TODO: Update the board cards based on the search results
|
||||
return this._httpClient.get<Card[] | null>('api/apps/scrumboard/board/search', {params: {query}});
|
||||
}
|
||||
}
|
||||
46
src/app/modules/admin/apps/scrumboard/scrumboard.types.ts
Normal file
46
src/app/modules/admin/apps/scrumboard/scrumboard.types.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
export interface IBoard
|
||||
{
|
||||
id?: string | null;
|
||||
title: string;
|
||||
description?: string | null;
|
||||
icon?: string | null;
|
||||
lastActivity?: string | null;
|
||||
lists?: IList[];
|
||||
labels?: ILabel[];
|
||||
members?: IMember[];
|
||||
}
|
||||
|
||||
export interface IList
|
||||
{
|
||||
id?: string | null;
|
||||
boardId: string;
|
||||
position: number;
|
||||
title: string;
|
||||
cards?: ICard[];
|
||||
}
|
||||
|
||||
export interface ICard
|
||||
{
|
||||
id?: string | null;
|
||||
boardId: string;
|
||||
listId: string;
|
||||
position: number;
|
||||
title: string;
|
||||
description?: string | null;
|
||||
labels?: ILabel[];
|
||||
dueDate?: string | null;
|
||||
}
|
||||
|
||||
export interface IMember
|
||||
{
|
||||
id?: string | null;
|
||||
name: string;
|
||||
avatar?: string | null;
|
||||
}
|
||||
|
||||
export interface ILabel
|
||||
{
|
||||
id: string | null;
|
||||
boardId: string;
|
||||
title: string;
|
||||
}
|
||||
Reference in New Issue
Block a user