Merge remote-tracking branch 'origin/demo' into starter

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"
-                        }
-                    }
                 }
             }
         }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fuse/demo",
-    "version": "13.0.2",
+    "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/animations": "12.0.2",
-        "@angular/cdk": "12.0.0",
+        "@angular/cdk": "12.0.2",
-        "@angular/common": "12.0.0",
+        "@angular/common": "12.0.2",
-        "@angular/compiler": "12.0.0",
+        "@angular/compiler": "12.0.2",
-        "@angular/core": "12.0.0",
+        "@angular/core": "12.0.2",
-        "@angular/forms": "12.0.0",
+        "@angular/forms": "12.0.2",
-        "@angular/material": "12.0.0",
+        "@angular/material": "12.0.2",
-        "@angular/material-moment-adapter": "12.0.0",
+        "@angular/material-moment-adapter": "12.0.2",
-        "@angular/platform-browser": "12.0.0",
+        "@angular/platform-browser": "12.0.2",
-        "@angular/platform-browser-dynamic": "12.0.0",
+        "@angular/platform-browser-dynamic": "12.0.2",
-        "@angular/router": "12.0.0",
+        "@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-devkit/build-angular": "12.0.2",
-        "@angular-eslint/builder": "12.0.0",
+        "@angular-eslint/builder": "12.1.0",
-        "@angular-eslint/eslint-plugin": "12.0.0",
+        "@angular-eslint/eslint-plugin": "12.1.0",
-        "@angular-eslint/eslint-plugin-template": "12.0.0",
+        "@angular-eslint/eslint-plugin-template": "12.1.0",
-        "@angular-eslint/schematics": "12.0.0",
+        "@angular-eslint/schematics": "12.1.0",
-        "@angular-eslint/template-parser": "12.0.0",
+        "@angular-eslint/template-parser": "12.1.0",
-        "@angular/cli": "12.0.0",
+        "@angular/cli": "12.0.2",
-        "@angular/compiler-cli": "12.0.0",
+        "@angular/compiler-cli": "12.0.2",
-        "@angular/language-service": "12.0.0",
+        "@angular/language-service": "12.0.2",
-        "@tailwindcss/aspect-ratio": "0.2.0",
+        "@tailwindcss/aspect-ratio": "0.2.1",
-        "@tailwindcss/line-clamp": "0.2.0",
+        "@tailwindcss/line-clamp": "0.2.1",
-        "@tailwindcss/typography": "0.4.0",
+        "@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",
+        "@types/node": "12.20.14",
-        "@typescript-eslint/eslint-plugin": "4.24.0",
+        "@typescript-eslint/eslint-plugin": "4.26.0",
-        "@typescript-eslint/parser": "4.24.0",
+        "@typescript-eslint/parser": "4.26.0",
-        "autoprefixer": "10.2.5",
+        "autoprefixer": "10.2.6",
         "chroma-js": "2.1.2",
-        "eslint": "7.26.0",
+        "eslint": "7.27.0",
-        "eslint-plugin-import": "2.23.2",
+        "eslint-plugin-import": "2.23.4",
-        "eslint-plugin-jsdoc": "34.8.2",
+        "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.3",
-        "karma": "6.3.2",
         "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.4",
-        "tailwindcss": "2.1.2",
         "typescript": "4.2.4"
     }
 }

src/@fuse/components/highlight/highlight.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import * as hljs from 'highlight.js';
+import hljs from 'highlight.js';
 
 @Injectable({
     providedIn: 'root'

src/@fuse/directives/autogrow/autogrow.directive.ts

@@ -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();
-    }
-}

src/@fuse/directives/autogrow/autogrow.module.ts

@@ -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
-{
-}

src/@fuse/directives/autogrow/index.ts

@@ -1 +0,0 @@
-export * from '@fuse/directives/autogrow/public-api';

src/@fuse/directives/autogrow/public-api.ts

@@ -1,2 +0,0 @@
-export * from '@fuse/directives/autogrow/autogrow.directive';
-export * from '@fuse/directives/autogrow/autogrow.module';

src/@fuse/styles/overrides/angular-material.scss

@@ -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;
+                    margin: 14px 0;
-                    padding: 4px 6px 4px 0 !important;
+                    padding: 0 6px 0 0;
                     transform: none;
                 }
 

src/@fuse/version/fuse-version.ts

@@ -1,3 +1,3 @@
 import { Version } from '@fuse/version/version';
 
-export const FUSE_VERSION = new Version('13.0.2').full;
+export const FUSE_VERSION = new Version('13.0.3').full;

src/app/mock-api/apps/scrumboard/api.ts

@@ -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
+                ];
+            });
+    }
+}

src/app/mock-api/apps/scrumboard/data.ts

@@ -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'
+    }
+];

src/app/mock-api/index.ts

@@ -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

tailwind.config.js

@@ -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'],