(apps/scrumboard) New version of the Scrumboard app

src/app/app.routing.ts

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

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/common/navigation/data.ts

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

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

src/app/modules/admin/apps/scrumboard/board/add-card/add-card.component.html

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

src/app/modules/admin/apps/scrumboard/board/add-card/add-card.component.ts

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

src/app/modules/admin/apps/scrumboard/board/add-list/add-list.component.html

@@ -0,0 +1,48 @@
+<div
+    class="mt-11 w-64 py-2.5 px-2"
+    [class.h-15]="!formVisible">
+    <div class="relative flex w-full h-full overflow-hidden rounded-xl bg-gray-200">
+        <button
+            class="absolute inset-0 justify-start w-full px-3 rounded-xl bg-transparent"
+            [ngClass]="{'opacity-0 pointer-events-none': formVisible}"
+            mat-button
+            (click)="toggleFormVisibility()"
+            disableRipple>
+            <mat-icon
+                class="icon-size-5"
+                [svgIcon]="'heroicons_outline:plus-circle'"></mat-icon>
+            <span class="ml-2 text-secondary">{{buttonTitle}}</span>
+        </button>
+        <form
+            class="flex flex-col items-start w-full p-3"
+            [ngClass]="{'opacity-0': !formVisible}"
+            [formGroup]="form">
+            <input
+                class="w-full py-2 px-3 leading-5 rounded-md shadow-sm border border-gray-300 bg-white focus:border-primary"
+                [autocomplete]="'off'"
+                [formControlName]="'title'"
+                [placeholder]="'Enter list title...'"
+                (keydown.enter)="save()"
+                #titleInput>
+            <div class="flex items-center mt-2">
+                <button
+                    class="h-8 min-h-8"
+                    mat-flat-button
+                    [color]="'primary'"
+                    [type]="'button'"
+                    (click)="save()">
+                    Add list
+                </button>
+                <button
+                    class="ml-1 w-8 h-8 min-h-8"
+                    mat-icon-button
+                    [type]="'button'"
+                    (click)="toggleFormVisibility()">
+                    <mat-icon
+                        class="icon-size-4"
+                        [svgIcon]="'heroicons_solid:x'"></mat-icon>
+                </button>
+            </div>
+        </form>
+    </div>
+</div>

src/app/modules/admin/apps/scrumboard/board/add-list/add-list.component.ts

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

src/app/modules/admin/apps/scrumboard/board/board.component.html

@@ -0,0 +1,182 @@
+<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden">
+
+    <!-- Header -->
+    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
+        <!-- Title -->
+        <div class="flex-1 min-w-0">
+            <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
+                {{board.title}}
+            </h2>
+        </div>
+        <!-- Actions -->
+        <div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
+            <a
+                mat-stroked-button
+                [routerLink]="['..']">
+                <mat-icon
+                    class="icon-size-5 mr-2"
+                    [svgIcon]="'heroicons_solid:view-boards'"></mat-icon>
+                Boards
+            </a>
+            <button
+                class="ml-3"
+                mat-stroked-button>
+                <mat-icon
+                    class="icon-size-5 mr-2"
+                    [svgIcon]="'heroicons_solid:cog'"></mat-icon>
+                Settings
+            </button>
+        </div>
+    </div>
+
+    <!-- Main -->
+    <div
+        class="flex-auto p-6 sm:p-8 sm:pt-4 overflow-y-auto"
+        cdkScrollable>
+
+        <!-- Lists -->
+        <div
+            class="flex"
+            cdkDropList
+            [cdkDropListData]="board.lists"
+            [cdkDropListOrientation]="'horizontal'"
+            (cdkDropListDropped)="listDropped($event)">
+
+            <!-- Group all cdkDropList's after this point together so that the cards can be transferred between lists -->
+            <div
+                class="flex items-start"
+                cdkDropListGroup>
+
+                <!-- List -->
+                <ng-container *ngFor="let list of board.lists; trackBy: trackByFn">
+                    <div
+                        class="flex-0 w-72 p-2 rounded-2xl bg-default"
+                        cdkDrag
+                        [cdkDragLockAxis]="'x'">
+
+                        <div
+                            class="flex items-center justify-between"
+                            cdkDragHandle>
+                            <div class="flex items-center w-full py-2 px-3 rounded-md cursor-text border border-transparent focus-within:bg-white focus-within:shadow-sm focus-within:border-primary">
+                                <input
+                                    class="w-full font-medium leading-5 bg-transparent"
+                                    [spellcheck]="'false'"
+                                    [value]="list.title"
+                                    (focusout)="updateListTitle($event, list)"
+                                    (keydown.enter)="listTitleInput.blur()"
+                                    #listTitleInput>
+                            </div>
+                            <div class="flex items-center justify-center min-w-6 ml-4 text-sm font-semibold leading-6 rounded-full bg-gray-300 text-secondary">
+                                {{list.cards.length}}
+                            </div>
+                            <div class="ml-1">
+                                <button
+                                    class="w-8 h-8 min-h-8"
+                                    mat-icon-button
+                                    [matMenuTriggerFor]="listMenu">
+                                    <mat-icon
+                                        class="icon-size-5"
+                                        [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
+                                </button>
+                                <mat-menu #listMenu="matMenu">
+                                    <button
+                                        mat-menu-item
+                                        (click)="renameList(listTitleInput)">
+                                        <mat-icon
+                                            class="icon-size-5"
+                                            [svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
+                                        Rename List
+                                    </button>
+                                    <button
+                                        mat-menu-item
+                                        (click)="deleteList(list.id)">
+                                        <mat-icon
+                                            class="icon-size-5"
+                                            [svgIcon]="'heroicons_solid:trash'"></mat-icon>
+                                        Delete List
+                                    </button>
+                                </mat-menu>
+                            </div>
+                        </div>
+
+                        <!-- Cards -->
+                        <div class="mt-2 rounded-xl bg-gray-400 bg-opacity-12">
+                            <div
+                                [id]="list.id"
+                                class="p-3 pb-0"
+                                cdkDropList
+                                [cdkDropListData]="list.cards"
+                                (cdkDropListDropped)="cardDropped($event)">
+
+                                <!-- Card -->
+                                <ng-container *ngFor="let card of list.cards; trackBy: trackByFn">
+                                    <a
+                                        class="flex flex-col items-start mb-3 p-5 space-y-3 shadow rounded-lg overflow-hidden bg-card"
+                                        [routerLink]="['card', card.id]"
+                                        cdkDrag>
+                                        <!-- Cover image -->
+                                        <ng-container *ngIf="card.coverImage">
+                                            <div class="-mx-5 -mt-5 mb-2">
+                                                <img
+                                                    class="w-full object-cover"
+                                                    [src]="card.coverImage">
+                                            </div>
+                                        </ng-container>
+                                        <!-- Title -->
+                                        <div class="text-lg font-medium leading-5">{{card.title}}</div>
+                                        <!-- Labels -->
+                                        <ng-container *ngIf="card.labels.length">
+                                            <div>
+                                                <div class="flex flex-wrap -mx-1 -mb-2">
+                                                    <ng-container *ngFor="let label of card.labels; trackBy: trackByFn">
+                                                        <div class="mx-1 mb-2 py-0.5 px-3 rounded-full text-sm font-medium text-gray-500 bg-gray-100 dark:text-gray-300 dark:bg-gray-700">
+                                                            {{label.title}}
+                                                        </div>
+                                                    </ng-container>
+                                                </div>
+                                            </div>
+                                        </ng-container>
+                                        <!-- Due date -->
+                                        <ng-container *ngIf="card.dueDate">
+                                            <div
+                                                class="flex items-center rounded text-sm font-medium leading-5 text-secondary"
+                                                [ngClass]="{'text-red-600': isOverdue(card.dueDate)}">
+                                                <mat-icon
+                                                    class="icon-size-4 text-current"
+                                                    [svgIcon]="'heroicons_outline:clock'"></mat-icon>
+                                                <div class="ml-1">
+                                                    {{card.dueDate | date: 'longDate'}}
+                                                </div>
+                                            </div>
+                                        </ng-container>
+                                    </a>
+                                </ng-container>
+                            </div>
+
+                            <!-- New card -->
+                            <scrumboard-board-add-card
+                                (saved)="addCard(list, $event)"
+                                [buttonTitle]="list.cards.length ? 'Add another card' : 'Add a card'">
+                            </scrumboard-board-add-card>
+                        </div>
+                    </div>
+                </ng-container>
+
+                <!-- New list -->
+                <scrumboard-board-add-list
+                    (saved)="addList($event)"
+                    [buttonTitle]="board.lists.length ? 'Add another list' : 'Add a list'">
+                </scrumboard-board-add-list>
+
+            </div>
+
+        </div>
+
+    </div>
+
+</div>
+
+<!-- Invisible router-outlet for ScrumboardCard component -->
+<div class="absolute invisible w-0 h-0 opacity-0 pointer-events-none">
+    <router-outlet></router-outlet>
+</div>

src/app/modules/admin/apps/scrumboard/board/board.component.scss

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

src/app/modules/admin/apps/scrumboard/board/board.component.ts

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

src/app/modules/admin/apps/scrumboard/boards/boards.component.html

@@ -0,0 +1,66 @@
+<div
+    class="absolute inset-0 flex flex-col min-w-0 overflow-y-auto"
+    cdkScrollable>
+
+    <!-- Main -->
+    <div class="flex flex-col flex-auto items-center p-6 sm:p-10">
+
+        <!-- Title -->
+        <div class="mt-4 md:mt-24 text-3xl md:text-6xl font-extrabold tracking-tight leading-7 sm:leading-10">
+            Scrumboard Boards
+        </div>
+
+        <!-- Boards -->
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-8 md:mt-16">
+            <ng-container *ngFor="let board of boards; trackBy: trackByFn">
+                <a
+                    class="flex flex-col items-start w-56 p-6 rounded-lg shadow bg-card rounded-lg hover:shadow-xl transition-shadow duration-150 ease-in-out"
+                    [routerLink]="[board.id]">
+                    <div class="flex items-center justify-center p-4 rounded-full bg-primary-50 text-primary-700">
+                        <mat-icon
+                            class="text-current"
+                            [svgIcon]="board.icon"></mat-icon>
+                    </div>
+                    <!-- Title -->
+                    <div class="mt-5 text-lg font-medium leading-5">{{board.title}}</div>
+                    <!-- Description -->
+                    <div class="mt-0.5 line-clamp-2 text-secondary">{{board.description}}</div>
+                    <!-- Members -->
+                    <ng-container *ngIf="board.members?.length">
+                        <div class="w-12 h-1 mt-6 border-t-2"></div>
+                        <div class="flex items-center mt-6 -space-x-1.5">
+                            <ng-container *ngFor="let member of board.members.slice(0, 5); trackBy: trackByFn">
+                                <img
+                                    class="flex-0 w-8 h-8 rounded-full ring ring-offset-1 ring-bg-card ring-offset-bg-card object-cover"
+                                    [src]="member.avatar"
+                                    alt="Member avatar">
+                            </ng-container>
+                            <ng-container *ngIf="board.members.length > 5">
+                                <div class="flex flex-0 items-center justify-center w-8 h-8 rounded-full ring ring-offset-1 ring-bg-card ring-offset-bg-card bg-gray-200 text-gray-500">
+                                    <div class="text-md font-semibold">
+                                        +{{ board.members.slice(5).length }}
+                                    </div>
+                                </div>
+                            </ng-container>
+                        </div>
+                    </ng-container>
+                    <!-- Last activity -->
+                    <div class="flex items-center mt-4 text-md font-md">
+                        <div class="text-secondary">Edited:</div>
+                        <div class="ml-1">{{formatDateAsRelative(board.lastActivity)}}</div>
+                    </div>
+                </a>
+            </ng-container>
+            <!-- New board -->
+            <div class="flex flex-col items-center justify-center w-56 rounded-lg cursor-pointer border-2 border-gray-300 border-dashed hover:bg-hover transition-colors duration-150 ease-in-out">
+                <mat-icon
+                    class="icon-size-12 text-hint"
+                    [svgIcon]="'heroicons_outline:plus'"></mat-icon>
+            </div>
+        </div>
+
+    </div>
+
+</div>
+
+

src/app/modules/admin/apps/scrumboard/boards/boards.component.ts

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

src/app/modules/admin/apps/scrumboard/card/card.component.html

@@ -0,0 +1 @@
+SCRUMBOARD -> BOARDS -> LIST -> CARD

src/app/modules/admin/apps/scrumboard/card/card.component.ts

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

src/app/modules/admin/apps/scrumboard/card/details/details.component.html

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

src/app/modules/admin/apps/scrumboard/card/details/details.component.ts

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

src/app/modules/admin/apps/scrumboard/scrumboard.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

src/app/modules/admin/apps/scrumboard/scrumboard.component.ts

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

src/app/modules/admin/apps/scrumboard/scrumboard.models.ts

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

src/app/modules/admin/apps/scrumboard/scrumboard.module.ts

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

src/app/modules/admin/apps/scrumboard/scrumboard.resolvers.ts

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

src/app/modules/admin/apps/scrumboard/scrumboard.routing.ts

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

src/app/modules/admin/apps/scrumboard/scrumboard.service.ts

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

src/app/modules/admin/apps/scrumboard/scrumboard.types.ts

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

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