mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-12-22 17:27:11 +00:00
Compare commits
14 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
2c5cd60c0a | ||
|
|
decb238f73 | ||
|
|
ab3ad4fd2f | ||
|
|
c2dd77d7a3 | ||
|
|
a78b087a68 | ||
|
|
84d40427a1 | ||
|
|
f295fd9061 | ||
|
|
b98cfc1d37 | ||
|
|
0ba5677c01 | ||
|
|
96ef1281ae | ||
|
|
466bf50de4 | ||
|
|
95bc7dc4db | ||
|
|
cfca19dc68 | ||
|
|
a0c20f8d59 |
14
angular.json
14
angular.json
@@ -120,7 +120,7 @@
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.scss"
|
||||
"src/styles/styles.scss"
|
||||
],
|
||||
"scripts": []
|
||||
}
|
||||
@@ -133,18 +133,6 @@
|
||||
"src/**/*.html"
|
||||
]
|
||||
}
|
||||
},
|
||||
"e2e": {
|
||||
"builder": "@angular-devkit/build-angular:protractor",
|
||||
"options": {
|
||||
"protractorConfig": "e2e/protractor.conf.js",
|
||||
"devServerTarget": "fuse:serve"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"devServerTarget": "fuse:serve:production"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
1987
package-lock.json
generated
1987
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
76
package.json
76
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@fuse/demo",
|
||||
"version": "13.0.1",
|
||||
"version": "13.0.3",
|
||||
"license": "https://themeforest.net/licenses/standard",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
@@ -12,17 +12,17 @@
|
||||
"e2e": "ng e2e"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "12.0.0",
|
||||
"@angular/cdk": "12.0.0",
|
||||
"@angular/common": "12.0.0",
|
||||
"@angular/compiler": "12.0.0",
|
||||
"@angular/core": "12.0.0",
|
||||
"@angular/forms": "12.0.0",
|
||||
"@angular/material": "12.0.0",
|
||||
"@angular/material-moment-adapter": "12.0.0",
|
||||
"@angular/platform-browser": "12.0.0",
|
||||
"@angular/platform-browser-dynamic": "12.0.0",
|
||||
"@angular/router": "12.0.0",
|
||||
"@angular/animations": "12.0.2",
|
||||
"@angular/cdk": "12.0.2",
|
||||
"@angular/common": "12.0.2",
|
||||
"@angular/compiler": "12.0.2",
|
||||
"@angular/core": "12.0.2",
|
||||
"@angular/forms": "12.0.2",
|
||||
"@angular/material": "12.0.2",
|
||||
"@angular/material-moment-adapter": "12.0.2",
|
||||
"@angular/platform-browser": "12.0.2",
|
||||
"@angular/platform-browser-dynamic": "12.0.2",
|
||||
"@angular/router": "12.0.2",
|
||||
"@fullcalendar/angular": "4.4.5-beta",
|
||||
"@fullcalendar/core": "4.4.2",
|
||||
"@fullcalendar/daygrid": "4.4.2",
|
||||
@@ -31,14 +31,14 @@
|
||||
"@fullcalendar/moment": "4.4.2",
|
||||
"@fullcalendar/rrule": "4.4.2",
|
||||
"@fullcalendar/timegrid": "4.4.2",
|
||||
"@ngneat/transloco": "2.20.1",
|
||||
"@ngneat/transloco": "2.21.0",
|
||||
"apexcharts": "3.26.3",
|
||||
"crypto-js": "3.3.0",
|
||||
"highlight.js": "10.7.2",
|
||||
"highlight.js": "11.0.0",
|
||||
"lodash-es": "4.17.21",
|
||||
"moment": "2.29.1",
|
||||
"ng-apexcharts": "1.5.10",
|
||||
"ngx-markdown": "12.0.0",
|
||||
"ngx-markdown": "12.0.1",
|
||||
"ngx-quill": "14.0.0",
|
||||
"perfect-scrollbar": "1.5.1",
|
||||
"quill": "1.3.7",
|
||||
@@ -49,44 +49,42 @@
|
||||
"zone.js": "0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "12.0.0",
|
||||
"@angular-eslint/builder": "12.0.0",
|
||||
"@angular-eslint/eslint-plugin": "12.0.0",
|
||||
"@angular-eslint/eslint-plugin-template": "12.0.0",
|
||||
"@angular-eslint/schematics": "12.0.0",
|
||||
"@angular-eslint/template-parser": "12.0.0",
|
||||
"@angular/cli": "12.0.0",
|
||||
"@angular/compiler-cli": "12.0.0",
|
||||
"@angular/language-service": "12.0.0",
|
||||
"@tailwindcss/aspect-ratio": "0.2.0",
|
||||
"@tailwindcss/line-clamp": "0.2.0",
|
||||
"@tailwindcss/typography": "0.4.0",
|
||||
"@angular-devkit/build-angular": "12.0.2",
|
||||
"@angular-eslint/builder": "12.1.0",
|
||||
"@angular-eslint/eslint-plugin": "12.1.0",
|
||||
"@angular-eslint/eslint-plugin-template": "12.1.0",
|
||||
"@angular-eslint/schematics": "12.1.0",
|
||||
"@angular-eslint/template-parser": "12.1.0",
|
||||
"@angular/cli": "12.0.2",
|
||||
"@angular/compiler-cli": "12.0.2",
|
||||
"@angular/language-service": "12.0.2",
|
||||
"@tailwindcss/aspect-ratio": "0.2.1",
|
||||
"@tailwindcss/line-clamp": "0.2.1",
|
||||
"@tailwindcss/typography": "0.4.1",
|
||||
"@types/chroma-js": "2.1.3",
|
||||
"@types/crypto-js": "3.1.47",
|
||||
"@types/highlight.js": "10.1.0",
|
||||
"@types/jasmine": "3.6.11",
|
||||
"@types/lodash": "4.14.169",
|
||||
"@types/lodash": "4.14.170",
|
||||
"@types/lodash-es": "4.17.4",
|
||||
"@types/node": "12.20.13",
|
||||
"@typescript-eslint/eslint-plugin": "4.24.0",
|
||||
"@typescript-eslint/parser": "4.24.0",
|
||||
"autoprefixer": "10.2.5",
|
||||
"@types/node": "12.20.14",
|
||||
"@typescript-eslint/eslint-plugin": "4.26.0",
|
||||
"@typescript-eslint/parser": "4.26.0",
|
||||
"autoprefixer": "10.2.6",
|
||||
"chroma-js": "2.1.2",
|
||||
"eslint": "7.26.0",
|
||||
"eslint-plugin-import": "2.23.2",
|
||||
"eslint-plugin-jsdoc": "34.8.2",
|
||||
"eslint": "7.27.0",
|
||||
"eslint-plugin-import": "2.23.4",
|
||||
"eslint-plugin-jsdoc": "35.1.2",
|
||||
"eslint-plugin-prefer-arrow": "1.2.3",
|
||||
"jasmine-core": "3.7.1",
|
||||
"jasmine-spec-reporter": "5.0.2",
|
||||
"karma": "6.3.2",
|
||||
"karma": "6.3.3",
|
||||
"karma-chrome-launcher": "3.1.0",
|
||||
"karma-coverage": "2.0.3",
|
||||
"karma-jasmine": "4.0.1",
|
||||
"karma-jasmine-html-reporter": "1.6.0",
|
||||
"lodash": "4.17.21",
|
||||
"postcss": "8.3.0",
|
||||
"protractor": "7.0.0",
|
||||
"tailwindcss": "2.1.2",
|
||||
"tailwindcss": "2.1.4",
|
||||
"typescript": "4.2.4"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import * as hljs from 'highlight.js';
|
||||
import hljs from 'highlight.js';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
|
||||
@@ -1,114 +0,0 @@
|
||||
import { ChangeDetectorRef, Directive, ElementRef, HostBinding, HostListener, Input, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
|
||||
@Directive({
|
||||
selector: 'textarea[fuseAutogrow]',
|
||||
exportAs: 'fuseAutogrow'
|
||||
})
|
||||
export class FuseAutogrowDirective implements OnChanges, OnInit, OnDestroy
|
||||
{
|
||||
// eslint-disable-next-line @angular-eslint/no-input-rename
|
||||
@Input('fuseAutogrowVerticalPadding') padding: number = 8;
|
||||
@HostBinding('rows') private _rows: number = 1;
|
||||
|
||||
private _height: string = 'auto';
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _elementRef: ElementRef,
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _ngZone: NgZone
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Host binding for component inline styles
|
||||
*/
|
||||
@HostBinding('style') get styleList(): any
|
||||
{
|
||||
return {
|
||||
'height' : this._height,
|
||||
'overflow': 'hidden',
|
||||
'resize' : 'none'
|
||||
};
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Decorated methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resize on 'input' and 'ngModelChange' events
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
@HostListener('input')
|
||||
@HostListener('ngModelChange')
|
||||
private _resize(): void
|
||||
{
|
||||
// This doesn't need to trigger Angular's change detection by itself
|
||||
this._ngZone.runOutsideAngular(() => {
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
// Set the height to 'auto' so we can correctly read the scrollHeight
|
||||
this._height = 'auto';
|
||||
|
||||
// Detect the changes so the height is applied
|
||||
this._changeDetectorRef.detectChanges();
|
||||
|
||||
// Get the scrollHeight and subtract the vertical padding
|
||||
this._height = `${this._elementRef.nativeElement.scrollHeight - this.padding}px`;
|
||||
|
||||
// Detect the changes one more time to apply the final height
|
||||
this._changeDetectorRef.detectChanges();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On changes
|
||||
*
|
||||
* @param changes
|
||||
*/
|
||||
ngOnChanges(changes: SimpleChanges): void
|
||||
{
|
||||
// Padding
|
||||
if ( 'fuseAutogrowVerticalPadding' in changes )
|
||||
{
|
||||
// Resize
|
||||
this._resize();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Resize for the first time
|
||||
this._resize();
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FuseAutogrowDirective } from '@fuse/directives/autogrow/autogrow.directive';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FuseAutogrowDirective
|
||||
],
|
||||
exports : [
|
||||
FuseAutogrowDirective
|
||||
]
|
||||
})
|
||||
export class FuseAutogrowModule
|
||||
{
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export * from '@fuse/directives/autogrow/public-api';
|
||||
@@ -1,2 +0,0 @@
|
||||
export * from '@fuse/directives/autogrow/autogrow.directive';
|
||||
export * from '@fuse/directives/autogrow/autogrow.module';
|
||||
@@ -410,6 +410,13 @@
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------------------------------- */
|
||||
/* @ Dialog
|
||||
/* ----------------------------------------------------------------------------------------------------- */
|
||||
.mat-dialog-container {
|
||||
border-radius: 16px !important;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------------------------------- */
|
||||
/* @ Drawer
|
||||
/* ----------------------------------------------------------------------------------------------------- */
|
||||
@@ -683,8 +690,8 @@
|
||||
align-self: stretch;
|
||||
min-height: 36px;
|
||||
height: auto;
|
||||
margin: 10px 0;
|
||||
padding: 4px 6px 4px 0 !important;
|
||||
margin: 14px 0;
|
||||
padding: 0 6px 0 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,21 +1,24 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use "sass:map";
|
||||
|
||||
/** Include the core Angular Material styles */
|
||||
/* Include the core Angular Material styles */
|
||||
@include mat.core();
|
||||
|
||||
/** Configure the Angular Material typography */
|
||||
@include mat.all-component-typographies(
|
||||
mat.define-typography-config(
|
||||
$font-family: theme('fontFamily.sans'),
|
||||
$title: mat.define-typography-level(1.25rem, 2rem, 600),
|
||||
$body-2: mat.define-typography-level(0.875rem, 1.5rem, 600),
|
||||
$button: mat.define-typography-level(0.875rem, 0.875rem, 500),
|
||||
$input: mat.define-typography-level(0.875rem, 1.2857142857, 400) // line-height: 20px
|
||||
)
|
||||
);
|
||||
/* Create a base theme without color.
|
||||
This will globally set the density and typography for all future color themes. */
|
||||
@include mat.all-component-themes((
|
||||
color: null,
|
||||
density: -2,
|
||||
typography: mat.define-typography-config(
|
||||
$font-family: theme('fontFamily.sans'),
|
||||
$title: mat.define-typography-level(1.25rem, 2rem, 600),
|
||||
$body-2: mat.define-typography-level(0.875rem, 1.5rem, 600),
|
||||
$button: mat.define-typography-level(0.875rem, 0.875rem, 500),
|
||||
$input: mat.define-typography-level(0.875rem, 1.2857142857, 400) /* line-height: 20px */
|
||||
)
|
||||
));
|
||||
|
||||
/** Prepare the Background and Foreground maps */
|
||||
/* Prepare the Background and Foreground maps */
|
||||
$background-light: (
|
||||
status-bar: #CBD5E1, /* blueGray.300 */
|
||||
app-bar: #FFFFFF,
|
||||
@@ -90,7 +93,7 @@ $foreground-dark: (
|
||||
slider-off-active: #94A3B8 /* blueGray.400 */
|
||||
);
|
||||
|
||||
/** Generate Primary, Accent and Warn palettes */
|
||||
/* Generate Primary, Accent and Warn palettes */
|
||||
$palettes: ();
|
||||
@each $name in (primary, accent, warn) {
|
||||
$palettes: map.merge($palettes, (#{$name}: (
|
||||
@@ -126,7 +129,7 @@ $palettes: ();
|
||||
)));
|
||||
}
|
||||
|
||||
/** Generate Angular Material themes. Since we are using CSS Custom Properties,
|
||||
/* Generate Angular Material themes. Since we are using CSS Custom Properties,
|
||||
we don't have to generate a separate Angular Material theme for each color
|
||||
set. We can just create one light and one dark theme and then switch the
|
||||
CSS Custom Properties to dynamically switch the colors. */
|
||||
@@ -144,11 +147,11 @@ body .light {
|
||||
is-dark: map.get(map.get($base-light-theme, color), is-dark),
|
||||
foreground: $foreground-light,
|
||||
background: $background-light
|
||||
),
|
||||
density: -2
|
||||
)
|
||||
);
|
||||
|
||||
@include mat.all-component-themes($light-theme);
|
||||
/* Use all-component-colors to only generate the colors */
|
||||
@include mat.all-component-colors($light-theme);
|
||||
}
|
||||
|
||||
body.dark,
|
||||
@@ -165,9 +168,9 @@ body .dark {
|
||||
is-dark: map.get(map.get($base-dark-theme, color), is-dark),
|
||||
foreground: $foreground-dark,
|
||||
background: $background-dark
|
||||
),
|
||||
density: -2
|
||||
)
|
||||
);
|
||||
|
||||
/* Use all-component-colors to only generate the colors */
|
||||
@include mat.all-component-colors($dark-theme);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
import { Version } from '@fuse/version/version';
|
||||
|
||||
export const FUSE_VERSION = new Version('13.0.1').full;
|
||||
export const FUSE_VERSION = new Version('13.0.3').full;
|
||||
|
||||
@@ -92,6 +92,7 @@ export const appRoutes: Route[] = [
|
||||
{path: 'help-center', loadChildren: () => import('app/modules/admin/apps/help-center/help-center.module').then(m => m.HelpCenterModule)},
|
||||
{path: 'mailbox', loadChildren: () => import('app/modules/admin/apps/mailbox/mailbox.module').then(m => m.MailboxModule)},
|
||||
{path: 'notes', loadChildren: () => import('app/modules/admin/apps/notes/notes.module').then(m => m.NotesModule)},
|
||||
{path: 'scrumboard', loadChildren: () => import('app/modules/admin/apps/scrumboard/scrumboard.module').then(m => m.ScrumboardModule)},
|
||||
{path: 'tasks', loadChildren: () => import('app/modules/admin/apps/tasks/tasks.module').then(m => m.TasksModule)},
|
||||
]},
|
||||
|
||||
|
||||
@@ -50,7 +50,7 @@ export class ECommerceInventoryMockApi
|
||||
// @ Products - GET
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
this._fuseMockApiService
|
||||
.onGet('api/apps/ecommerce/inventory/products', 625)
|
||||
.onGet('api/apps/ecommerce/inventory/products', 300)
|
||||
.reply(({request}) => {
|
||||
|
||||
// Get available queries
|
||||
|
||||
454
src/app/mock-api/apps/scrumboard/api.ts
Normal file
454
src/app/mock-api/apps/scrumboard/api.ts
Normal file
@@ -0,0 +1,454 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { assign, cloneDeep } from 'lodash-es';
|
||||
import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api';
|
||||
import { boards as boardsData, cards as cardsData, labels as labelsData, lists as listsData, members as membersData } from 'app/mock-api/apps/scrumboard/data';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ScrumboardMockApi
|
||||
{
|
||||
// Private
|
||||
private _boards: any[] = boardsData;
|
||||
private _cards: any[] = cardsData;
|
||||
private _labels: any[] = labelsData;
|
||||
private _lists: any[] = listsData;
|
||||
private _members: any[] = membersData;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _fuseMockApiService: FuseMockApiService)
|
||||
{
|
||||
// Register Mock API handlers
|
||||
this.registerHandlers();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Register Mock API handlers
|
||||
*/
|
||||
registerHandlers(): void
|
||||
{
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Boards - GET
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
this._fuseMockApiService
|
||||
.onGet('api/apps/scrumboard/boards')
|
||||
.reply(({request}) => {
|
||||
|
||||
// Clone the boards
|
||||
let boards = cloneDeep(this._boards);
|
||||
|
||||
// Go through the boards and inject the members
|
||||
boards = boards.map(board => ({
|
||||
...board,
|
||||
members: board.members.map(boardMember => this._members.find(member => boardMember === member.id))
|
||||
}));
|
||||
|
||||
return [
|
||||
200,
|
||||
boards
|
||||
];
|
||||
});
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Board - GET
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
this._fuseMockApiService
|
||||
.onGet('api/apps/scrumboard/board')
|
||||
.reply(({request}) => {
|
||||
|
||||
// Get the id
|
||||
const id = request.params.get('id');
|
||||
|
||||
// Find the board
|
||||
const board = this._boards.find(item => item.id === id);
|
||||
|
||||
// Attach the board lists
|
||||
board.lists = this._lists.filter(item => item.boardId === id).sort((a, b) => a.position - b.position);
|
||||
|
||||
// Grab all cards that belong to this board and attach labels to them
|
||||
let cards = this._cards.filter(item => item.boardId === id);
|
||||
cards = cards.map(card => (
|
||||
{
|
||||
...card,
|
||||
labels: card.labels.map(cardLabelId => this._labels.find(label => label.id === cardLabelId))
|
||||
}
|
||||
));
|
||||
|
||||
// Attach the board cards into corresponding lists
|
||||
board.lists.forEach((list, index, array) => {
|
||||
array[index].cards = cards.filter(item => item.boardId === id && item.listId === list.id).sort((a, b) => a.position - b.position);
|
||||
});
|
||||
|
||||
// Attach the board labels
|
||||
board.labels = this._labels.filter(item => item.boardId === id);
|
||||
|
||||
return [
|
||||
200,
|
||||
cloneDeep(board)
|
||||
];
|
||||
});
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ List - POST
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
this._fuseMockApiService
|
||||
.onPost('api/apps/scrumboard/board/list')
|
||||
.reply(({request}) => {
|
||||
|
||||
// Get the list
|
||||
const newList = cloneDeep(request.body.list);
|
||||
|
||||
// Generate a new GUID
|
||||
newList.id = FuseMockApiUtils.guid();
|
||||
|
||||
// Store the new list
|
||||
this._lists.push(newList);
|
||||
|
||||
return [
|
||||
200,
|
||||
newList
|
||||
];
|
||||
});
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ List - PATCH
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
this._fuseMockApiService
|
||||
.onPatch('api/apps/scrumboard/board/list')
|
||||
.reply(({request}) => {
|
||||
|
||||
// Get the list
|
||||
const list = cloneDeep(request.body.list);
|
||||
|
||||
// Prepare the updated list
|
||||
let updatedList = null;
|
||||
|
||||
// Find the list and update it
|
||||
this._lists.forEach((item, index, lists) => {
|
||||
|
||||
if ( item.id === list.id )
|
||||
{
|
||||
// Update the list
|
||||
lists[index] = assign({}, lists[index], list);
|
||||
|
||||
// Store the updated list
|
||||
updatedList = lists[index];
|
||||
}
|
||||
});
|
||||
|
||||
return [
|
||||
200,
|
||||
updatedList
|
||||
];
|
||||
});
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lists - PATCH
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
this._fuseMockApiService
|
||||
.onPatch('api/apps/scrumboard/board/lists')
|
||||
.reply(({request}) => {
|
||||
|
||||
// Get the lists
|
||||
const lists = cloneDeep(request.body.lists);
|
||||
|
||||
// Prepare the updated lists
|
||||
const updatedLists = [];
|
||||
|
||||
// Go through the lists
|
||||
lists.forEach((item) => {
|
||||
|
||||
// Find the list
|
||||
const index = this._lists.findIndex(list => item.id === list.id);
|
||||
|
||||
// Update the list
|
||||
this._lists[index] = assign({}, this._lists[index], item);
|
||||
|
||||
// Store in the updated lists
|
||||
updatedLists.push(item);
|
||||
});
|
||||
|
||||
return [
|
||||
200,
|
||||
updatedLists
|
||||
];
|
||||
});
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ List - DELETE
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
this._fuseMockApiService
|
||||
.onDelete('api/apps/scrumboard/board/list')
|
||||
.reply(({request}) => {
|
||||
|
||||
// Get the id
|
||||
const id = request.params.get('id');
|
||||
|
||||
// Find the list and delete it
|
||||
const index = this._lists.findIndex(item => item.id === id);
|
||||
this._lists.splice(index, 1);
|
||||
|
||||
// Filter out the cards that belonged to the list to delete them
|
||||
this._cards = this._cards.filter(card => card.listId !== id);
|
||||
|
||||
return [
|
||||
200,
|
||||
true
|
||||
];
|
||||
});
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Card - PUT
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
this._fuseMockApiService
|
||||
.onPut('api/apps/scrumboard/board/card')
|
||||
.reply(({request}) => {
|
||||
|
||||
// Get the card
|
||||
const newCard = cloneDeep(request.body.card);
|
||||
|
||||
// Generate a new GUID
|
||||
newCard.id = FuseMockApiUtils.guid();
|
||||
|
||||
// Unshift the new card
|
||||
this._cards.push(newCard);
|
||||
|
||||
return [
|
||||
200,
|
||||
newCard
|
||||
];
|
||||
});
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Card - PATCH
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
this._fuseMockApiService
|
||||
.onPatch('api/apps/scrumboard/board/card')
|
||||
.reply(({request}) => {
|
||||
|
||||
// Get the id and card
|
||||
const id = request.body.id;
|
||||
const card = cloneDeep(request.body.card);
|
||||
|
||||
// Prepare the updated card
|
||||
let updatedCard = null;
|
||||
|
||||
// Go through the labels and leave only ids of them
|
||||
card.labels = card.labels.map(itemLabel => itemLabel.id);
|
||||
|
||||
// Find the card and update it
|
||||
this._cards.forEach((item, index, cards) => {
|
||||
|
||||
if ( item.id === id )
|
||||
{
|
||||
// Update the card
|
||||
cards[index] = assign({}, cards[index], card);
|
||||
|
||||
// Store the updated card
|
||||
updatedCard = cloneDeep(cards[index]);
|
||||
}
|
||||
});
|
||||
|
||||
// Attach the labels of the card
|
||||
updatedCard.labels = updatedCard.labels.map(cardLabelId => this._labels.find(label => label.id === cardLabelId));
|
||||
|
||||
return [
|
||||
200,
|
||||
updatedCard
|
||||
];
|
||||
});
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Cards - PATCH
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
this._fuseMockApiService
|
||||
.onPatch('api/apps/scrumboard/board/cards')
|
||||
.reply(({request}) => {
|
||||
|
||||
// Get the cards
|
||||
const cards = cloneDeep(request.body.cards);
|
||||
|
||||
// Prepare the updated cards
|
||||
const updatedCards = [];
|
||||
|
||||
// Go through the cards
|
||||
cards.forEach((item) => {
|
||||
|
||||
// Find the card
|
||||
const index = this._cards.findIndex(card => item.id === card.id);
|
||||
|
||||
// Go through the labels and leave only ids of them
|
||||
item.labels = item.labels.map(itemLabel => itemLabel.id);
|
||||
|
||||
// Update the card
|
||||
this._cards[index] = assign({}, this._cards[index], item);
|
||||
|
||||
// Attach the labels of the card
|
||||
item.labels = item.labels.map(cardLabelId => this._labels.find(label => label.id === cardLabelId));
|
||||
|
||||
// Store in the updated cards
|
||||
updatedCards.push(item);
|
||||
});
|
||||
|
||||
return [
|
||||
200,
|
||||
updatedCards
|
||||
];
|
||||
});
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Card - DELETE
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
this._fuseMockApiService
|
||||
.onDelete('api/apps/scrumboard/board/card')
|
||||
.reply(({request}) => {
|
||||
|
||||
// Get the id
|
||||
const id = request.params.get('id');
|
||||
|
||||
// Find the card and delete it
|
||||
const index = this._cards.findIndex(item => item.id === id);
|
||||
this._cards.splice(index, 1);
|
||||
|
||||
return [
|
||||
200,
|
||||
true
|
||||
];
|
||||
});
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Card Positions - PATCH
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
this._fuseMockApiService
|
||||
.onPatch('api/apps/scrumboard/board/card/positions')
|
||||
.reply(({request}) => {
|
||||
|
||||
// Get the cards
|
||||
const cards = request.body.cards;
|
||||
|
||||
// Go through the cards
|
||||
this._cards.forEach((card) => {
|
||||
|
||||
// Find this card's index within the cards array that comes with the request
|
||||
// and assign that index as the new position number for the card
|
||||
card.position = cards.findIndex(item => item.id === card.id && item.listId === card.listId && item.boardId === card.boardId);
|
||||
});
|
||||
|
||||
// Clone the cards
|
||||
const updatedCards = cloneDeep(this._cards);
|
||||
|
||||
return [
|
||||
200,
|
||||
updatedCards
|
||||
];
|
||||
});
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Labels - GET
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
this._fuseMockApiService
|
||||
.onGet('api/apps/scrumboard/board/labels')
|
||||
.reply(({request}) => {
|
||||
|
||||
// Get the board id
|
||||
const boardId = request.params.get('boardId');
|
||||
|
||||
// Filter the labels
|
||||
const labels = this._labels.filter(item => item.boardId === boardId);
|
||||
|
||||
return [
|
||||
200,
|
||||
cloneDeep(labels)
|
||||
];
|
||||
});
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Label - PUT
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
this._fuseMockApiService
|
||||
.onPut('api/apps/scrumboard/board/label')
|
||||
.reply(({request}) => {
|
||||
|
||||
// Get the label
|
||||
const newLabel = cloneDeep(request.body.label);
|
||||
|
||||
// Generate a new GUID
|
||||
newLabel.id = FuseMockApiUtils.guid();
|
||||
|
||||
// Unshift the new label
|
||||
this._labels.unshift(newLabel);
|
||||
|
||||
return [
|
||||
200,
|
||||
newLabel
|
||||
];
|
||||
});
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Label - PATCH
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
this._fuseMockApiService
|
||||
.onPatch('api/apps/scrumboard/board/label')
|
||||
.reply(({request}) => {
|
||||
|
||||
// Get the id and label
|
||||
const id = request.body.id;
|
||||
const label = cloneDeep(request.body.label);
|
||||
|
||||
// Prepare the updated label
|
||||
let updatedLabel = null;
|
||||
|
||||
// Find the label and update it
|
||||
this._labels.forEach((item, index, labels) => {
|
||||
|
||||
if ( item.id === id )
|
||||
{
|
||||
// Update the label
|
||||
labels[index] = assign({}, labels[index], label);
|
||||
|
||||
// Store the updated label
|
||||
updatedLabel = labels[index];
|
||||
}
|
||||
});
|
||||
|
||||
return [
|
||||
200,
|
||||
updatedLabel
|
||||
];
|
||||
});
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Label - DELETE
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
this._fuseMockApiService
|
||||
.onDelete('api/apps/scrumboard/board/label')
|
||||
.reply(({request}) => {
|
||||
|
||||
// Get the id
|
||||
const id = request.params.get('id');
|
||||
|
||||
// Find the label and delete it
|
||||
const index = this._labels.findIndex(item => item.id === id);
|
||||
this._labels.splice(index, 1);
|
||||
|
||||
// Get the cards that have the label
|
||||
const cardsWithLabel = this._cards.filter(card => card.labels.indexOf(id) > -1);
|
||||
|
||||
// Iterate through them and remove the label
|
||||
cardsWithLabel.forEach((card) => {
|
||||
card.tags.splice(card.tags.indexOf(id), 1);
|
||||
});
|
||||
|
||||
return [
|
||||
200,
|
||||
true
|
||||
];
|
||||
});
|
||||
}
|
||||
}
|
||||
334
src/app/mock-api/apps/scrumboard/data.ts
Normal file
334
src/app/mock-api/apps/scrumboard/data.ts
Normal file
@@ -0,0 +1,334 @@
|
||||
/* eslint-disable */
|
||||
import * as moment from 'moment';
|
||||
|
||||
export const boards = [
|
||||
{
|
||||
id : '2c82225f-2a6c-45d3-b18a-1132712a4234',
|
||||
title : 'Admin Dashboard',
|
||||
description : 'Roadmap for the new project',
|
||||
icon : 'heroicons_outline:template',
|
||||
lastActivity: moment().startOf('day').subtract(1, 'day').toISOString(),
|
||||
members : [
|
||||
'9c510cf3-460d-4a8c-b3be-bcc3db578c08',
|
||||
'baa88231-0ee6-4028-96d5-7f187e0f4cd5',
|
||||
'18bb18f3-ea7d-4465-8913-e8c9adf6f568'
|
||||
]
|
||||
},
|
||||
{
|
||||
id : '0168b519-3dab-4b46-b2ea-0e678e38a583',
|
||||
title : 'Weekly Planning',
|
||||
description : 'Job related tasks for the week',
|
||||
icon : 'heroicons_outline:calendar',
|
||||
lastActivity: moment().startOf('day').subtract(2, 'days').toISOString(),
|
||||
members : [
|
||||
'79ebb9ee-1e57-4706-810c-03edaec8f56d',
|
||||
'319ecb5b-f99c-4ee4-81b2-3aeffd1d4735',
|
||||
'5bf7ed5b-8b04-46b7-b364-005958b7d82e',
|
||||
'd1f612e6-3e3b-481f-a8a9-f917e243b06e',
|
||||
'fe0fec0d-002b-406f-87ab-47eb87ba577c',
|
||||
'23a47d2c-c6cb-40cc-af87-e946a9df5028',
|
||||
'6726643d-e8dc-42fa-83a6-b4ec06921a6b',
|
||||
'0d1eb062-13d5-4286-b8d4-e0bea15f3d56'
|
||||
]
|
||||
},
|
||||
{
|
||||
id : 'bc7db965-3c4f-4233-abf5-69bd70c3c175',
|
||||
title : 'Personal Tasks',
|
||||
description : 'Personal tasks around the house',
|
||||
icon : 'heroicons_outline:home',
|
||||
lastActivity: moment().startOf('day').subtract(1, 'week').toISOString(),
|
||||
members : [
|
||||
'6f6a1c34-390b-4b2e-97c8-ff0e0d787839'
|
||||
]
|
||||
}
|
||||
];
|
||||
export const lists = [
|
||||
{
|
||||
id : 'a2df7786-519c-485a-a85f-c09a61cc5f37',
|
||||
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
|
||||
position: 65536,
|
||||
title : 'To do'
|
||||
},
|
||||
{
|
||||
id : '83ca2a34-65af-49c0-a42e-94a34003fcf2',
|
||||
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
|
||||
position: 131072,
|
||||
title : 'In progress'
|
||||
},
|
||||
{
|
||||
id : 'a85ea483-f8f7-42d9-a314-3fed6aac22ab',
|
||||
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
|
||||
position: 196608,
|
||||
title : 'In review'
|
||||
},
|
||||
{
|
||||
id : '34cbef38-5687-4813-bd66-141a6df6d832',
|
||||
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
|
||||
position: 262144,
|
||||
title : 'Completed'
|
||||
}
|
||||
];
|
||||
export const cards = [
|
||||
{
|
||||
id : 'e74e66e9-fe0f-441e-a8ce-28ed6eccc48d',
|
||||
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
|
||||
listId : 'a2df7786-519c-485a-a85f-c09a61cc5f37',
|
||||
position : 65536,
|
||||
title : 'Example that showcase all of the available bits on the card with a fairly long title compared to other cards',
|
||||
description: 'Example that showcase all of the available bits on the card with a fairly long title compared to other cards. Example that showcase all of the available bits on the card with a fairly long title compared to other cards.',
|
||||
labels : [
|
||||
'e0175175-2784-48f1-a519-a1d2e397c9b3',
|
||||
'51779701-818a-4a53-bc16-137c3bd7a564',
|
||||
'e8364d69-9595-46ce-a0f9-ce428632a0ac',
|
||||
'caff9c9b-a198-4564-b1f4-8b3df1d345bb',
|
||||
'f9eeb436-13a3-4208-a239-0d555960a567'
|
||||
],
|
||||
dueDate : moment().subtract(10, 'days').startOf('day').toISOString()
|
||||
},
|
||||
{
|
||||
id : 'ed58add1-45a7-41db-887d-3ca7ee7f2719',
|
||||
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
|
||||
listId : 'a2df7786-519c-485a-a85f-c09a61cc5f37',
|
||||
position: 131072,
|
||||
title : 'Do a research about most needed admin applications',
|
||||
labels : [
|
||||
'e0175175-2784-48f1-a519-a1d2e397c9b3'
|
||||
],
|
||||
dueDate : null
|
||||
},
|
||||
{
|
||||
id : 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
|
||||
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
|
||||
listId : 'a2df7786-519c-485a-a85f-c09a61cc5f37',
|
||||
position: 196608,
|
||||
title : 'Implement the Project dashboard',
|
||||
labels : [
|
||||
'caff9c9b-a198-4564-b1f4-8b3df1d345bb'
|
||||
],
|
||||
dueDate : moment().startOf('day').toISOString()
|
||||
},
|
||||
{
|
||||
id : '6da8747f-b474-4c9a-9eba-5ef212285500',
|
||||
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
|
||||
listId : 'a2df7786-519c-485a-a85f-c09a61cc5f37',
|
||||
position: 262144,
|
||||
title : 'Implement the Analytics dashboard',
|
||||
labels : [
|
||||
'caff9c9b-a198-4564-b1f4-8b3df1d345bb'
|
||||
],
|
||||
dueDate : moment().subtract(1, 'day').startOf('day').toISOString()
|
||||
},
|
||||
{
|
||||
id : '94fb1dee-dd83-4cca-acdd-02e96d3cc4f1',
|
||||
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
|
||||
listId : '83ca2a34-65af-49c0-a42e-94a34003fcf2',
|
||||
position: 65536,
|
||||
title : 'Analytics dashboard design',
|
||||
labels : [
|
||||
'e8364d69-9595-46ce-a0f9-ce428632a0ac'
|
||||
],
|
||||
dueDate : null
|
||||
},
|
||||
{
|
||||
id : 'fc16f7d8-957d-43ed-ba85-20f99b5ce011',
|
||||
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
|
||||
listId : '83ca2a34-65af-49c0-a42e-94a34003fcf2',
|
||||
position: 131072,
|
||||
title : 'Project dashboard design',
|
||||
labels : [
|
||||
'e8364d69-9595-46ce-a0f9-ce428632a0ac'
|
||||
],
|
||||
dueDate : null
|
||||
},
|
||||
{
|
||||
id : 'c0b32f1f-64ec-4f8d-8b11-a8dc809df331',
|
||||
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
|
||||
listId : 'a85ea483-f8f7-42d9-a314-3fed6aac22ab',
|
||||
position: 65536,
|
||||
title : 'JWT Auth implementation',
|
||||
labels : [
|
||||
'caff9c9b-a198-4564-b1f4-8b3df1d345bb'
|
||||
],
|
||||
dueDate : null
|
||||
},
|
||||
{
|
||||
id : '532c2747-be79-464a-9897-6a682bf22b64',
|
||||
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
|
||||
listId : '34cbef38-5687-4813-bd66-141a6df6d832',
|
||||
position: 65536,
|
||||
title : 'Create low fidelity wireframes',
|
||||
labels : [],
|
||||
dueDate : null
|
||||
},
|
||||
{
|
||||
id : '1d908efe-c830-476e-9e87-d06e30d89bc2',
|
||||
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
|
||||
listId : '34cbef38-5687-4813-bd66-141a6df6d832',
|
||||
position: 131072,
|
||||
title : 'Create high fidelity wireframes',
|
||||
labels : [],
|
||||
dueDate : moment().subtract(10, 'day').startOf('day').toISOString()
|
||||
},
|
||||
{
|
||||
id : 'b1da11ed-7896-4826-962d-4b7b718896d4',
|
||||
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
|
||||
listId : '34cbef38-5687-4813-bd66-141a6df6d832',
|
||||
position: 196608,
|
||||
title : 'Collect information about most used admin layouts',
|
||||
labels : [
|
||||
'e0175175-2784-48f1-a519-a1d2e397c9b3'
|
||||
],
|
||||
dueDate : null
|
||||
},
|
||||
{
|
||||
id : '3b7f3ceb-107f-42bc-a204-c268c9a56cb4',
|
||||
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
|
||||
listId : '34cbef38-5687-4813-bd66-141a6df6d832',
|
||||
position: 262144,
|
||||
title : 'Do a research about latest UI trends',
|
||||
labels : [
|
||||
'e0175175-2784-48f1-a519-a1d2e397c9b3'
|
||||
],
|
||||
dueDate : null
|
||||
},
|
||||
{
|
||||
id : 'cd7f01c5-a941-4076-8cef-37da0354e643',
|
||||
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
|
||||
listId : '34cbef38-5687-4813-bd66-141a6df6d832',
|
||||
position: 327680,
|
||||
title : 'Learn more about UX',
|
||||
labels : [
|
||||
'e0175175-2784-48f1-a519-a1d2e397c9b3'
|
||||
],
|
||||
dueDate : null
|
||||
}
|
||||
];
|
||||
export const labels = [
|
||||
{
|
||||
id : 'e0175175-2784-48f1-a519-a1d2e397c9b3',
|
||||
boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
|
||||
title : 'Research'
|
||||
},
|
||||
{
|
||||
id : '51779701-818a-4a53-bc16-137c3bd7a564',
|
||||
boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
|
||||
title : 'Wireframing'
|
||||
},
|
||||
{
|
||||
id : 'e8364d69-9595-46ce-a0f9-ce428632a0ac',
|
||||
boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
|
||||
title : 'Design'
|
||||
},
|
||||
{
|
||||
id : 'caff9c9b-a198-4564-b1f4-8b3df1d345bb',
|
||||
boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
|
||||
title : 'Development'
|
||||
},
|
||||
{
|
||||
id : 'f9eeb436-13a3-4208-a239-0d555960a567',
|
||||
boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
|
||||
title : 'Bug'
|
||||
}
|
||||
];
|
||||
export const members = [
|
||||
{
|
||||
id : '6f6a1c34-390b-4b2e-97c8-ff0e0d787839',
|
||||
name : 'Angeline Vinson',
|
||||
avatar: 'assets/images/avatars/female-01.jpg'
|
||||
},
|
||||
{
|
||||
id : '4ce4be48-c8c0-468d-9df8-ddfda14cdb37',
|
||||
name : 'Roseann Greer',
|
||||
avatar: 'assets/images/avatars/female-02.jpg'
|
||||
},
|
||||
{
|
||||
id : '9c510cf3-460d-4a8c-b3be-bcc3db578c08',
|
||||
name : 'Lorraine Barnett',
|
||||
avatar: 'assets/images/avatars/female-03.jpg'
|
||||
},
|
||||
{
|
||||
id : '7ec887d9-b01a-4057-b5dc-aaed18637cc1',
|
||||
name : 'Middleton Bradford',
|
||||
avatar: 'assets/images/avatars/male-01.jpg'
|
||||
},
|
||||
{
|
||||
id : '74975a82-addb-427b-9b43-4d2e03331b68',
|
||||
name : 'Sue Hays',
|
||||
avatar: 'assets/images/avatars/female-04.jpg'
|
||||
},
|
||||
{
|
||||
id : '18bb18f3-ea7d-4465-8913-e8c9adf6f568',
|
||||
name : 'Keith Neal',
|
||||
avatar: 'assets/images/avatars/male-02.jpg'
|
||||
},
|
||||
{
|
||||
id : 'baa88231-0ee6-4028-96d5-7f187e0f4cd5',
|
||||
name : 'Wilkins Gilmore',
|
||||
avatar: 'assets/images/avatars/male-03.jpg'
|
||||
},
|
||||
{
|
||||
id : '0d1eb062-13d5-4286-b8d4-e0bea15f3d56',
|
||||
name : 'Baldwin Stein',
|
||||
avatar: 'assets/images/avatars/male-04.jpg'
|
||||
},
|
||||
{
|
||||
id : '5bf7ed5b-8b04-46b7-b364-005958b7d82e',
|
||||
name : 'Bobbie Cohen',
|
||||
avatar: 'assets/images/avatars/female-05.jpg'
|
||||
},
|
||||
{
|
||||
id : '93b1a72b-e2db-4f77-82d6-272047433508',
|
||||
name : 'Melody Peters',
|
||||
avatar: 'assets/images/avatars/female-06.jpg'
|
||||
},
|
||||
{
|
||||
id : 'd1f612e6-3e3b-481f-a8a9-f917e243b06e',
|
||||
name : 'Marquez Ryan',
|
||||
avatar: 'assets/images/avatars/male-05.jpg'
|
||||
},
|
||||
{
|
||||
id : '79ebb9ee-1e57-4706-810c-03edaec8f56d',
|
||||
name : 'Roberta Briggs',
|
||||
avatar: 'assets/images/avatars/female-07.jpg'
|
||||
},
|
||||
{
|
||||
id : '6726643d-e8dc-42fa-83a6-b4ec06921a6b',
|
||||
name : 'Robbie Buckley',
|
||||
avatar: 'assets/images/avatars/female-08.jpg'
|
||||
},
|
||||
{
|
||||
id : '8af617d7-898e-4992-beda-d5ac1d7ceda4',
|
||||
name : 'Garcia Whitney',
|
||||
avatar: 'assets/images/avatars/male-06.jpg'
|
||||
},
|
||||
{
|
||||
id : 'bcff44c4-9943-4adc-9049-08b1d922a658',
|
||||
name : 'Spencer Pate',
|
||||
avatar: 'assets/images/avatars/male-07.jpg'
|
||||
},
|
||||
{
|
||||
id : '54160ca2-29c9-4475-88a1-31a9307ad913',
|
||||
name : 'Monica Mcdaniel',
|
||||
avatar: 'assets/images/avatars/female-09.jpg'
|
||||
},
|
||||
{
|
||||
id : '51286603-3a43-444e-9242-f51fe57d5363',
|
||||
name : 'Mcmillan Durham',
|
||||
avatar: 'assets/images/avatars/male-08.jpg'
|
||||
},
|
||||
{
|
||||
id : '319ecb5b-f99c-4ee4-81b2-3aeffd1d4735',
|
||||
name : 'Jeoine Hebert',
|
||||
avatar: 'assets/images/avatars/female-10.jpg'
|
||||
},
|
||||
{
|
||||
id : 'fe0fec0d-002b-406f-87ab-47eb87ba577c',
|
||||
name : 'Susanna Kline',
|
||||
avatar: 'assets/images/avatars/female-11.jpg'
|
||||
},
|
||||
{
|
||||
id : '23a47d2c-c6cb-40cc-af87-e946a9df5028',
|
||||
name : 'Suzette Singleton',
|
||||
avatar: 'assets/images/avatars/female-12.jpg'
|
||||
}
|
||||
];
|
||||
@@ -1,8 +1,7 @@
|
||||
/* eslint-disable */
|
||||
import * as moment from 'moment';
|
||||
import { Message } from 'app/layout/common/messages/messages.types';
|
||||
|
||||
export const messages: Message[] = [
|
||||
export const messages = [
|
||||
{
|
||||
id : '832276cc-c5e9-4fcc-8e23-d38e2e267bc9',
|
||||
image : 'assets/images/avatars/male-01.jpg',
|
||||
|
||||
@@ -134,6 +134,13 @@ export const defaultNavigation: FuseNavigationItem[] = [
|
||||
icon : 'heroicons_outline:pencil-alt',
|
||||
link : '/apps/notes'
|
||||
},
|
||||
{
|
||||
id : 'apps.scrumboard',
|
||||
title: 'Scrumboard',
|
||||
type : 'basic',
|
||||
icon : 'heroicons_outline:view-boards',
|
||||
link : '/apps/scrumboard'
|
||||
},
|
||||
{
|
||||
id : 'apps.tasks',
|
||||
title: 'Tasks',
|
||||
@@ -141,7 +148,6 @@ export const defaultNavigation: FuseNavigationItem[] = [
|
||||
icon : 'heroicons_outline:check-circle',
|
||||
link : '/apps/tasks'
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -927,7 +933,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
|
||||
icon : 'heroicons_outline:speakerphone',
|
||||
link : '/docs/changelog',
|
||||
badge: {
|
||||
title : '13.0.1',
|
||||
title : '13.0.3',
|
||||
classes: 'px-2 bg-yellow-300 text-black rounded-full'
|
||||
}
|
||||
},
|
||||
@@ -1270,6 +1276,13 @@ export const futuristicNavigation: FuseNavigationItem[] = [
|
||||
icon : 'heroicons_outline:pencil-alt',
|
||||
link : '/apps/notes'
|
||||
},
|
||||
{
|
||||
id : 'apps.scrumboard',
|
||||
title: 'Scrumboard',
|
||||
type : 'basic',
|
||||
icon : 'heroicons_outline:view-boards',
|
||||
link : '/apps/scrumboard'
|
||||
},
|
||||
{
|
||||
id : 'apps.tasks',
|
||||
title: 'Tasks',
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
/* eslint-disable */
|
||||
import * as moment from 'moment';
|
||||
import { Notification } from 'app/layout/common/notifications/notifications.types';
|
||||
|
||||
export const notifications: Notification[] = [
|
||||
export const notifications = [
|
||||
{
|
||||
id : '493190c9-5b61-4912-afe5-78c21f1044d7',
|
||||
icon : 'heroicons_outline:star',
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
/* eslint-disable */
|
||||
import { Shortcut } from 'app/layout/common/shortcuts/shortcuts.types';
|
||||
|
||||
export const shortcuts: Shortcut[] = [
|
||||
export const shortcuts = [
|
||||
{
|
||||
id : 'a1ae91d3-e2cb-459b-9be9-a184694f548b',
|
||||
label : 'Changelog',
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/* eslint-disable */
|
||||
export const user: any = {
|
||||
export const user = {
|
||||
id : 'cfaad35d-07a3-4447-a6c3-d8c3d54fd5df',
|
||||
name : 'Brian Hughes',
|
||||
email : 'hughes.brian@company.com',
|
||||
|
||||
@@ -16,6 +16,7 @@ import { NotesMockApi } from 'app/mock-api/apps/notes/api';
|
||||
import { NotificationsMockApi } from 'app/mock-api/common/notifications/api';
|
||||
import { ProjectMockApi } from 'app/mock-api/dashboards/project/api';
|
||||
import { SearchMockApi } from 'app/mock-api/common/search/api';
|
||||
import { ScrumboardMockApi } from 'app/mock-api/apps/scrumboard/api';
|
||||
import { ShortcutsMockApi } from 'app/mock-api/common/shortcuts/api';
|
||||
import { TasksMockApi } from 'app/mock-api/apps/tasks/api';
|
||||
import { UserMockApi } from 'app/mock-api/common/user/api';
|
||||
@@ -39,6 +40,7 @@ export const mockApiServices = [
|
||||
NotificationsMockApi,
|
||||
ProjectMockApi,
|
||||
SearchMockApi,
|
||||
ScrumboardMockApi,
|
||||
ShortcutsMockApi,
|
||||
TasksMockApi,
|
||||
UserMockApi
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
/* eslint-disable */
|
||||
import * as moment from 'moment';
|
||||
import { Activity } from 'app/modules/admin/pages/activities/activities.types';
|
||||
|
||||
export const activities: Activity[] = [
|
||||
export const activities = [
|
||||
{
|
||||
id : '493190c9-5b61-4912-afe5-78c21f1044d7',
|
||||
icon : 'heroicons_solid:star',
|
||||
|
||||
@@ -341,8 +341,8 @@
|
||||
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript flex-auto">
|
||||
<textarea
|
||||
matInput
|
||||
cdkTextareaAutosize
|
||||
[cdkAutosizeMinRows]="1"
|
||||
matTextareaAutosize
|
||||
[matAutosizeMinRows]="1"
|
||||
[formControlName]="'description'"
|
||||
[placeholder]="'Event description'">
|
||||
</textarea>
|
||||
|
||||
@@ -7,7 +7,6 @@ import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { FuseAutogrowModule } from '@fuse/directives/autogrow';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { chatRoutes } from 'app/modules/admin/apps/chat/chat.routing';
|
||||
import { ChatComponent } from 'app/modules/admin/apps/chat/chat.component';
|
||||
@@ -35,7 +34,6 @@ import { ProfileComponent } from 'app/modules/admin/apps/chat/profile/profile.co
|
||||
MatInputModule,
|
||||
MatMenuModule,
|
||||
MatSidenavModule,
|
||||
FuseAutogrowModule,
|
||||
SharedModule
|
||||
]
|
||||
})
|
||||
|
||||
@@ -17,7 +17,6 @@ import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import * as moment from 'moment';
|
||||
import { FuseAutogrowModule } from '@fuse/directives/autogrow';
|
||||
import { FuseFindByKeyPipeModule } from '@fuse/pipes/find-by-key';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { contactsRoutes } from 'app/modules/admin/apps/contacts/contacts.routing';
|
||||
@@ -49,7 +48,6 @@ import { ContactsListComponent } from 'app/modules/admin/apps/contacts/list/list
|
||||
MatSidenavModule,
|
||||
MatTableModule,
|
||||
MatTooltipModule,
|
||||
FuseAutogrowModule,
|
||||
FuseFindByKeyPipeModule,
|
||||
SharedModule
|
||||
],
|
||||
|
||||
@@ -598,11 +598,11 @@
|
||||
[svgIcon]="'heroicons_solid:menu-alt-2'"></mat-icon>
|
||||
<textarea
|
||||
matInput
|
||||
fuseAutogrow
|
||||
[rows]="5"
|
||||
[formControlName]="'notes'"
|
||||
[placeholder]="'Notes'"
|
||||
[spellcheck]="false"></textarea>
|
||||
[rows]="5"
|
||||
[spellcheck]="false"
|
||||
matTextareaAutosize></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -221,6 +221,14 @@
|
||||
mat-cell
|
||||
*matCellDef="let product"
|
||||
[attr.colspan]="productsTableColumns.length">
|
||||
<ng-container *ngIf="selectedProduct?.id === product.id">
|
||||
<ng-container *ngTemplateOutlet="rowDetailsTemplate; context: {$implicit: product}"></ng-container>
|
||||
</ng-container>
|
||||
</td>
|
||||
|
||||
<ng-template
|
||||
#rowDetailsTemplate
|
||||
let-product>
|
||||
<div
|
||||
class="shadow-lg overflow-hidden"
|
||||
[@expandCollapse]="selectedProduct?.id === product.id ? 'expanded' : 'collapsed'">
|
||||
@@ -403,7 +411,7 @@
|
||||
<!-- Tags -->
|
||||
<ng-container *ngIf="selectedProduct && selectedProduct.tags.length">
|
||||
<span class="font-semibold">Tags</span>
|
||||
<div class="mt-1 rounded-md border shadow-sm overflow-hidden">
|
||||
<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">
|
||||
@@ -525,7 +533,7 @@
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
|
||||
<tr
|
||||
|
||||
@@ -239,9 +239,6 @@ export class InventoryListComponent implements OnInit, AfterViewInit, OnDestroy
|
||||
// Set the selected product
|
||||
this.selectedProduct = product;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
|
||||
// Fill the form
|
||||
this.selectedProductForm.patchValue(product);
|
||||
|
||||
@@ -335,15 +332,15 @@ export class InventoryListComponent implements OnInit, AfterViewInit, OnDestroy
|
||||
const tag = this.filteredTags[0];
|
||||
const isTagApplied = this.selectedProduct.tags.find(id => id === tag.id);
|
||||
|
||||
// If the found tag is already applied to the contact...
|
||||
// If the found tag is already applied to the product...
|
||||
if ( isTagApplied )
|
||||
{
|
||||
// Remove the tag from the contact
|
||||
// Remove the tag from the product
|
||||
this.removeTagFromProduct(tag);
|
||||
}
|
||||
else
|
||||
{
|
||||
// Otherwise add the tag to the contact
|
||||
// Otherwise add the tag to the product
|
||||
this.addTagToProduct(tag);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -74,11 +74,10 @@
|
||||
<mat-form-field class="fuse-mat-textarea w-full">
|
||||
<textarea
|
||||
matInput
|
||||
[cdkTextareaAutosize]
|
||||
[cdkAutosizeMinRows]="5"
|
||||
[cdkAutosizeMaxRows]="5"
|
||||
[formControlName]="'message'"
|
||||
[required]="true"></textarea>
|
||||
[required]="true"
|
||||
[rows]="5"
|
||||
matTextareaAutosize></textarea>
|
||||
<mat-label>Message</mat-label>
|
||||
<mat-error *ngIf="supportForm.get('message').hasError('required')">
|
||||
Required
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
<!-- 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">New Message</div>
|
||||
<div class="text-lg font-medium">New Message</div>
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="saveAndClose()"
|
||||
|
||||
@@ -27,13 +27,13 @@
|
||||
(input)="updateNoteDetails(note)">
|
||||
</div>
|
||||
<!-- Note -->
|
||||
<div>
|
||||
<div class="flex w-full py-5 px-2">
|
||||
<textarea
|
||||
class="w-full my-2.5 p-2"
|
||||
fuseAutogrow
|
||||
class="w-full"
|
||||
[placeholder]="'Note'"
|
||||
[(ngModel)]="note.content"
|
||||
(input)="updateNoteDetails(note)"></textarea>
|
||||
(input)="updateNoteDetails(note)"
|
||||
matTextareaAutosize></textarea>
|
||||
</div>
|
||||
<!-- Tasks -->
|
||||
<ng-container *ngIf="note.tasks">
|
||||
|
||||
@@ -9,7 +9,6 @@ import { MatInputModule } from '@angular/material/input';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatRippleModule } from '@angular/material/core';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { FuseAutogrowModule } from '@fuse/directives/autogrow';
|
||||
import { FuseMasonryModule } from '@fuse/components/masonry';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { NotesComponent } from 'app/modules/admin/apps/notes/notes.component';
|
||||
@@ -36,7 +35,6 @@ import { notesRoutes } from 'app/modules/admin/apps/notes/notes.routing';
|
||||
MatMenuModule,
|
||||
MatRippleModule,
|
||||
MatSidenavModule,
|
||||
FuseAutogrowModule,
|
||||
FuseMasonryModule,
|
||||
SharedModule
|
||||
]
|
||||
|
||||
@@ -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 dark:bg-gray-700">
|
||||
<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 dark:border-gray-500 dark:focus:border-primary dark:bg-black dark:bg-opacity-5"
|
||||
[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 dark:focus-within:bg-gray-900">
|
||||
<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 dark:bg-gray-700">
|
||||
{{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 dark:bg-transparent dark:border">
|
||||
<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 dark:bg-primary dark:text-on-primary">
|
||||
<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-transparent 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-transparent 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;
|
||||
}
|
||||
@@ -66,9 +66,9 @@
|
||||
<mat-label>{{task.type === 'task' ? 'Task title' : 'Section title'}}</mat-label>
|
||||
<textarea
|
||||
matInput
|
||||
fuseAutogrow
|
||||
[formControlName]="'title'"
|
||||
[spellcheck]="false"
|
||||
matTextareaAutosize
|
||||
#titleField></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@@ -323,11 +323,10 @@
|
||||
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
|
||||
<mat-label>Notes</mat-label>
|
||||
<textarea
|
||||
class="leading-relaxed"
|
||||
matInput
|
||||
fuseAutogrow
|
||||
[formControlName]="'notes'"
|
||||
[spellcheck]="false"></textarea>
|
||||
[spellcheck]="false"
|
||||
matTextareaAutosize></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -18,7 +18,6 @@ import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import * as moment from 'moment';
|
||||
import { FuseAutogrowModule } from '@fuse/directives/autogrow';
|
||||
import { FuseFindByKeyPipeModule } from '@fuse/pipes/find-by-key';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { tasksRoutes } from 'app/modules/admin/apps/tasks/tasks.routing';
|
||||
@@ -51,7 +50,6 @@ import { TasksListComponent } from 'app/modules/admin/apps/tasks/list/list.compo
|
||||
MatSelectModule,
|
||||
MatSidenavModule,
|
||||
MatTooltipModule,
|
||||
FuseAutogrowModule,
|
||||
FuseFindByKeyPipeModule,
|
||||
SharedModule
|
||||
],
|
||||
|
||||
@@ -11,6 +11,51 @@ export class ChangelogComponent
|
||||
{
|
||||
changelog: any[] = [
|
||||
|
||||
// v13.0.3
|
||||
{
|
||||
version : 'v13.0.3',
|
||||
releaseDate: 'June 03, 2021',
|
||||
changes : [
|
||||
{
|
||||
type: 'Added',
|
||||
list: [
|
||||
'(apps/scrumboard) New, initial version of the Scrumboard app'
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'Changed',
|
||||
list: [
|
||||
'(fuse/autogrow) BREAKING: Removed "fuseAutogrow" in favor of "matTextareaAutosize" since all of its problems solved, use [matTextareaAutosize] without any vertical padding on the textarea itself',
|
||||
'(Angular Material) Increased default MatDialog border radius to 16px for better consistency',
|
||||
'(apps/ecommerce) Small tweaks and improvements',
|
||||
'(apps/mailbox) Small tweaks and improvements',
|
||||
'(angular.json) Removed "e2e" entry, fixed the styles file path for "test"',
|
||||
'(dependencies) Updated Angular, Angular Material & various other packages'
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'Fixed',
|
||||
list: [
|
||||
'(Angular Material) Density setting is not being applied correctly on Dark themes'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// v13.0.2
|
||||
{
|
||||
version : 'v13.0.2',
|
||||
releaseDate: 'May 24, 2021',
|
||||
changes : [
|
||||
{
|
||||
type: 'Changed',
|
||||
list: [
|
||||
'(mockApi) Removed typings from data files',
|
||||
'(apps/ecommerce/inventory) Performance improvements, decreased the mockApi delay',
|
||||
'(pages/settings) Fixed: Settings container component width is not filling the container'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// v13.0.1
|
||||
{
|
||||
version : 'v13.0.1',
|
||||
|
||||
@@ -96,12 +96,6 @@ export class CoreFeaturesComponent implements OnInit, OnDestroy
|
||||
title : 'Directives',
|
||||
type : 'group',
|
||||
children: [
|
||||
{
|
||||
id : 'core-features.directives.autogrow',
|
||||
title: 'Autogrow',
|
||||
type : 'basic',
|
||||
link : '/docs/core-features/directives/autogrow'
|
||||
},
|
||||
{
|
||||
id : 'core-features.directives.scrollbar',
|
||||
title: 'Scrollbar',
|
||||
|
||||
@@ -23,7 +23,6 @@ import { DrawerComponent } from 'app/modules/admin/docs/core-features/components
|
||||
import { HighlightComponent } from 'app/modules/admin/docs/core-features/components/highlight/highlight.component';
|
||||
import { NavigationComponent } from 'app/modules/admin/docs/core-features/components/navigation/navigation.component';
|
||||
import { MasonryComponent } from 'app/modules/admin/docs/core-features/components/masonry/masonry.component';
|
||||
import { AutogrowComponent } from 'app/modules/admin/docs/core-features/directives/autogrow/autogrow.component';
|
||||
import { ScrollbarComponent } from 'app/modules/admin/docs/core-features/directives/scrollbar/scrollbar.component';
|
||||
import { ScrollResetComponent } from 'app/modules/admin/docs/core-features/directives/scroll-reset/scroll-reset.component';
|
||||
import { ConfigComponent } from 'app/modules/admin/docs/core-features/services/config/config.component';
|
||||
@@ -44,7 +43,6 @@ import { coreFeaturesRoutes } from 'app/modules/admin/docs/core-features/core-fe
|
||||
HighlightComponent,
|
||||
MasonryComponent,
|
||||
NavigationComponent,
|
||||
AutogrowComponent,
|
||||
ScrollbarComponent,
|
||||
ScrollResetComponent,
|
||||
ConfigComponent,
|
||||
|
||||
@@ -8,7 +8,6 @@ import { DrawerComponent } from 'app/modules/admin/docs/core-features/components
|
||||
import { HighlightComponent } from 'app/modules/admin/docs/core-features/components/highlight/highlight.component';
|
||||
import { MasonryComponent } from 'app/modules/admin/docs/core-features/components/masonry/masonry.component';
|
||||
import { NavigationComponent } from 'app/modules/admin/docs/core-features/components/navigation/navigation.component';
|
||||
import { AutogrowComponent } from 'app/modules/admin/docs/core-features/directives/autogrow/autogrow.component';
|
||||
import { ScrollbarComponent } from 'app/modules/admin/docs/core-features/directives/scrollbar/scrollbar.component';
|
||||
import { ScrollResetComponent } from 'app/modules/admin/docs/core-features/directives/scroll-reset/scroll-reset.component';
|
||||
import { ConfigComponent } from 'app/modules/admin/docs/core-features/services/config/config.component';
|
||||
@@ -80,11 +79,7 @@ export const coreFeaturesRoutes: Route[] = [
|
||||
{
|
||||
path : '',
|
||||
pathMatch : 'full',
|
||||
redirectTo: 'autogrow'
|
||||
},
|
||||
{
|
||||
path : 'autogrow',
|
||||
component: AutogrowComponent
|
||||
redirectTo: 'scrollbar'
|
||||
},
|
||||
{
|
||||
path : 'scrollbar',
|
||||
|
||||
@@ -1,99 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- 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">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Core Features</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Directives</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
Autogrow
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
<strong>fuseAutogrow</strong> is a <code><textarea></code> directive to make them automatically grow depending on their content. It's an alternative for
|
||||
Angular Material's <strong>cdkTextareaAutosize</strong> directive with a more native and lightweight approach.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Exported as: </strong><code>fuseAutogrow</code>
|
||||
</p>
|
||||
|
||||
<h2>Module</h2>
|
||||
<textarea
|
||||
fuse-highlight
|
||||
lang="typescript">
|
||||
import { FuseAutogrowModule } from '@fuse/directives/autogrow';
|
||||
</textarea>
|
||||
|
||||
<h2>Usage</h2>
|
||||
<p>
|
||||
Here's the basic usage of the <code>fuseAutogrow</code>:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="html">
|
||||
<textarea fuseAutogrow
|
||||
[fuseAutogrowVerticalPadding]="12">
|
||||
Content of the textarea
|
||||
</textarea>
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
<h2>Properties</h2>
|
||||
<div class="bg-card py-3 px-6 rounded shadow">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Input()</div>
|
||||
<div>fuseAutogrowVerticalPadding: number</div>
|
||||
</td>
|
||||
<td>
|
||||
Padding of the textarea. Must be inline with textarea's padding style.
|
||||
</td>
|
||||
<td>
|
||||
<code class="whitespace-nowrap">8</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,30 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
|
||||
|
||||
@Component({
|
||||
selector : 'autogrow',
|
||||
templateUrl: './autogrow.component.html',
|
||||
styles : ['']
|
||||
})
|
||||
export class AutogrowComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._coreFeaturesComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -541,9 +541,9 @@
|
||||
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
|
||||
<textarea
|
||||
matInput
|
||||
cdkTextareaAutosize
|
||||
[cdkAutosizeMinRows]="3"
|
||||
placeholder="What's on your mind?"></textarea>
|
||||
[placeholder]="'What\'s on your mind?'"
|
||||
[rows]="3"
|
||||
matTextareaAutosize></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex items-center mt-6 sm:mt-8 -mx-3">
|
||||
@@ -804,9 +804,9 @@
|
||||
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
|
||||
<textarea
|
||||
matInput
|
||||
cdkTextareaAutosize
|
||||
[cdkAutosizeMinRows]="3"
|
||||
placeholder="Write a comment..."></textarea>
|
||||
[placeholder]="'Write a comment...'"
|
||||
[rows]="3"
|
||||
matTextareaAutosize></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex items-center mt-3 ml-auto -mr-3">
|
||||
|
||||
@@ -67,10 +67,10 @@
|
||||
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
|
||||
<mat-label>About</mat-label>
|
||||
<textarea
|
||||
matInput
|
||||
[formControlName]="'about'"
|
||||
[cdkTextareaAutosize]
|
||||
cdkAutosizeMinRows="5"
|
||||
matInput></textarea>
|
||||
matTextareaAutosize
|
||||
[matAutosizeMinRows]="5"></textarea>
|
||||
</mat-form-field>
|
||||
<div class="mt-1 text-md text-hint">Brief description for your profile. Basic HTML and Emoji are allowed.</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="flex flex-col min-w-0 sm:absolute sm:inset-0 sm:overflow-hidden">
|
||||
<div class="flex flex-col w-full min-w-0 sm:absolute sm:inset-0 sm:overflow-hidden">
|
||||
|
||||
<mat-drawer-container class="flex-auto sm:h-full">
|
||||
|
||||
|
||||
@@ -9,7 +9,6 @@ import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { FuseAlertModule } from '@fuse/components/alert';
|
||||
import { FuseAutogrowModule } from '@fuse/directives/autogrow';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { SettingsComponent } from 'app/modules/admin/pages/settings/settings.component';
|
||||
import { SettingsAccountComponent } from 'app/modules/admin/pages/settings/account/account.component';
|
||||
@@ -39,7 +38,6 @@ import { settingsRoutes } from 'app/modules/admin/pages/settings/settings.routin
|
||||
MatSidenavModule,
|
||||
MatSlideToggleModule,
|
||||
FuseAlertModule,
|
||||
FuseAutogrowModule,
|
||||
SharedModule
|
||||
]
|
||||
})
|
||||
|
||||
@@ -2176,9 +2176,9 @@
|
||||
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
|
||||
<textarea
|
||||
matInput
|
||||
cdkTextareaAutosize
|
||||
[cdkAutosizeMinRows]="3"
|
||||
placeholder="What's on your mind?"></textarea>
|
||||
[placeholder]="'What\'s on your mind?'"
|
||||
[rows]="3"
|
||||
matTextareaAutosize></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex items-center mt-6 sm:mt-8 -mx-3">
|
||||
@@ -2440,9 +2440,9 @@
|
||||
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
|
||||
<textarea
|
||||
matInput
|
||||
cdkTextareaAutosize
|
||||
[cdkAutosizeMinRows]="3"
|
||||
placeholder="Write a comment..."></textarea>
|
||||
[rows]="3"
|
||||
[placeholder]="'Write a comment...'"
|
||||
matTextareaAutosize></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex items-center mt-3 ml-auto -mr-3">
|
||||
@@ -4012,8 +4012,9 @@
|
||||
<textarea
|
||||
class="leading-normal my-2"
|
||||
matInput
|
||||
cdkTextareaAutosize
|
||||
placeholder="Write a comment..."></textarea>
|
||||
[placeholder]="'Write a comment...'"
|
||||
matTextareaAutosize
|
||||
[rows]="3"></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex items-center mt-3 ml-auto -mr-3">
|
||||
|
||||
@@ -70,8 +70,8 @@
|
||||
<mat-label>Address</mat-label>
|
||||
<textarea
|
||||
matInput
|
||||
cdkTextareaAutosize
|
||||
cdkAutosizeMinRows="3"></textarea>
|
||||
[rows]="3"
|
||||
matTextareaAutosize></textarea>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
matSuffix
|
||||
@@ -357,7 +357,7 @@
|
||||
<mat-label>Textarea with autosize</mat-label>
|
||||
<textarea
|
||||
matInput
|
||||
fuseAutogrow></textarea>
|
||||
matTextareaAutosize></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex">
|
||||
@@ -367,7 +367,7 @@
|
||||
<mat-label>Textarea with autosize, prefix & suffix</mat-label>
|
||||
<textarea
|
||||
matInput
|
||||
fuseAutogrow></textarea>
|
||||
matTextareaAutosize></textarea>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
matPrefix
|
||||
@@ -625,8 +625,8 @@
|
||||
class="fuse-mat-textarea flex-auto">
|
||||
<textarea
|
||||
matInput
|
||||
fuseAutogrow
|
||||
[placeholder]="'Textarea with autosize'"></textarea>
|
||||
[placeholder]="'Textarea with autosize'"
|
||||
matTextareaAutosize></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex">
|
||||
@@ -635,8 +635,8 @@
|
||||
class="fuse-mat-textarea flex-auto">
|
||||
<textarea
|
||||
matInput
|
||||
fuseAutogrow
|
||||
[placeholder]="'Textarea with autosize, prefix & suffix'"></textarea>
|
||||
[placeholder]="'Textarea with autosize, prefix & suffix'"
|
||||
matTextareaAutosize></textarea>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
matPrefix
|
||||
|
||||
@@ -11,7 +11,6 @@ import { MatInputModule } from '@angular/material/input';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatMomentDateModule } from '@angular/material-moment-adapter';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { FuseAutogrowModule } from '@fuse/directives/autogrow';
|
||||
import { FuseHighlightModule } from '@fuse/components/highlight';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { FormsFieldsComponent } from 'app/modules/admin/ui/forms/fields/fields.component';
|
||||
@@ -40,7 +39,6 @@ export const routes: Route[] = [
|
||||
MatMenuModule,
|
||||
MatMomentDateModule,
|
||||
MatSelectModule,
|
||||
FuseAutogrowModule,
|
||||
FuseHighlightModule,
|
||||
SharedModule
|
||||
]
|
||||
|
||||
@@ -336,19 +336,19 @@ const config = {
|
||||
animation : [],
|
||||
backgroundAttachment : [],
|
||||
backgroundClip : [],
|
||||
backgroundColor : ['dark', 'responsive', 'group-hover', 'hover'],
|
||||
backgroundColor : ['dark', 'responsive', 'group-hover', 'hover', 'focus', 'focus-within'],
|
||||
backgroundImage : [],
|
||||
backgroundOpacity : ['dark', 'hover'],
|
||||
backgroundPosition : [],
|
||||
backgroundRepeat : [],
|
||||
backgroundSize : [],
|
||||
borderCollapse : [],
|
||||
borderColor : ['dark', 'group-hover', 'hover'],
|
||||
borderColor : ['dark', 'group-hover', 'hover', 'focus', 'focus-within'],
|
||||
borderOpacity : ['group-hover', 'hover'],
|
||||
borderRadius : ['responsive'],
|
||||
borderStyle : [],
|
||||
borderWidth : ['dark', 'responsive', 'first', 'last', 'odd', 'even'],
|
||||
boxShadow : ['dark', 'responsive', 'hover'],
|
||||
boxShadow : ['dark', 'responsive', 'hover', 'focus-within'],
|
||||
boxSizing : [],
|
||||
cursor : [],
|
||||
display : ['dark', 'responsive', 'hover', 'group-hover'],
|
||||
|
||||
Reference in New Issue
Block a user