(apps/scrumboard) New version of the Scrumboard app

This commit is contained in:
sercan 2021-06-02 11:42:22 +03:00
parent 84d40427a1
commit a78b087a68
27 changed files with 3284 additions and 4 deletions

View File

@ -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: '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: '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: '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)}, {path: 'tasks', loadChildren: () => import('app/modules/admin/apps/tasks/tasks.module').then(m => m.TasksModule)},
]}, ]},

View File

@ -0,0 +1,454 @@
import { Injectable } from '@angular/core';
import { assign, cloneDeep } from 'lodash-es';
import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api';
import { boards as boardsData, cards as cardsData, labels as labelsData, lists as listsData, members as membersData } from 'app/mock-api/apps/scrumboard/data';
@Injectable({
providedIn: 'root'
})
export class ScrumboardMockApi
{
// Private
private _boards: any[] = boardsData;
private _cards: any[] = cardsData;
private _labels: any[] = labelsData;
private _lists: any[] = listsData;
private _members: any[] = membersData;
/**
* Constructor
*/
constructor(private _fuseMockApiService: FuseMockApiService)
{
// Register Mock API handlers
this.registerHandlers();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Register Mock API handlers
*/
registerHandlers(): void
{
// -----------------------------------------------------------------------------------------------------
// @ Boards - GET
// -----------------------------------------------------------------------------------------------------
this._fuseMockApiService
.onGet('api/apps/scrumboard/boards')
.reply(({request}) => {
// Clone the boards
let boards = cloneDeep(this._boards);
// Go through the boards and inject the members
boards = boards.map(board => ({
...board,
members: board.members.map(boardMember => this._members.find(member => boardMember === member.id))
}));
return [
200,
boards
];
});
// -----------------------------------------------------------------------------------------------------
// @ Board - GET
// -----------------------------------------------------------------------------------------------------
this._fuseMockApiService
.onGet('api/apps/scrumboard/board')
.reply(({request}) => {
// Get the id
const id = request.params.get('id');
// Find the board
const board = this._boards.find(item => item.id === id);
// Attach the board lists
board.lists = this._lists.filter(item => item.boardId === id).sort((a, b) => a.position - b.position);
// Grab all cards that belong to this board and attach labels to them
let cards = this._cards.filter(item => item.boardId === id);
cards = cards.map(card => (
{
...card,
labels: card.labels.map(cardLabelId => this._labels.find(label => label.id === cardLabelId))
}
));
// Attach the board cards into corresponding lists
board.lists.forEach((list, index, array) => {
array[index].cards = cards.filter(item => item.boardId === id && item.listId === list.id).sort((a, b) => a.position - b.position);
});
// Attach the board labels
board.labels = this._labels.filter(item => item.boardId === id);
return [
200,
cloneDeep(board)
];
});
// -----------------------------------------------------------------------------------------------------
// @ List - POST
// -----------------------------------------------------------------------------------------------------
this._fuseMockApiService
.onPost('api/apps/scrumboard/board/list')
.reply(({request}) => {
// Get the list
const newList = cloneDeep(request.body.list);
// Generate a new GUID
newList.id = FuseMockApiUtils.guid();
// Store the new list
this._lists.push(newList);
return [
200,
newList
];
});
// -----------------------------------------------------------------------------------------------------
// @ List - PATCH
// -----------------------------------------------------------------------------------------------------
this._fuseMockApiService
.onPatch('api/apps/scrumboard/board/list')
.reply(({request}) => {
// Get the list
const list = cloneDeep(request.body.list);
// Prepare the updated list
let updatedList = null;
// Find the list and update it
this._lists.forEach((item, index, lists) => {
if ( item.id === list.id )
{
// Update the list
lists[index] = assign({}, lists[index], list);
// Store the updated list
updatedList = lists[index];
}
});
return [
200,
updatedList
];
});
// -----------------------------------------------------------------------------------------------------
// @ Lists - PATCH
// -----------------------------------------------------------------------------------------------------
this._fuseMockApiService
.onPatch('api/apps/scrumboard/board/lists')
.reply(({request}) => {
// Get the lists
const lists = cloneDeep(request.body.lists);
// Prepare the updated lists
const updatedLists = [];
// Go through the lists
lists.forEach((item) => {
// Find the list
const index = this._lists.findIndex(list => item.id === list.id);
// Update the list
this._lists[index] = assign({}, this._lists[index], item);
// Store in the updated lists
updatedLists.push(item);
});
return [
200,
updatedLists
];
});
// -----------------------------------------------------------------------------------------------------
// @ List - DELETE
// -----------------------------------------------------------------------------------------------------
this._fuseMockApiService
.onDelete('api/apps/scrumboard/board/list')
.reply(({request}) => {
// Get the id
const id = request.params.get('id');
// Find the list and delete it
const index = this._lists.findIndex(item => item.id === id);
this._lists.splice(index, 1);
// Filter out the cards that belonged to the list to delete them
this._cards = this._cards.filter(card => card.listId !== id);
return [
200,
true
];
});
// -----------------------------------------------------------------------------------------------------
// @ Card - PUT
// -----------------------------------------------------------------------------------------------------
this._fuseMockApiService
.onPut('api/apps/scrumboard/board/card')
.reply(({request}) => {
// Get the card
const newCard = cloneDeep(request.body.card);
// Generate a new GUID
newCard.id = FuseMockApiUtils.guid();
// Unshift the new card
this._cards.push(newCard);
return [
200,
newCard
];
});
// -----------------------------------------------------------------------------------------------------
// @ Card - PATCH
// -----------------------------------------------------------------------------------------------------
this._fuseMockApiService
.onPatch('api/apps/scrumboard/board/card')
.reply(({request}) => {
// Get the id and card
const id = request.body.id;
const card = cloneDeep(request.body.card);
// Prepare the updated card
let updatedCard = null;
// Go through the labels and leave only ids of them
card.labels = card.labels.map(itemLabel => itemLabel.id);
// Find the card and update it
this._cards.forEach((item, index, cards) => {
if ( item.id === id )
{
// Update the card
cards[index] = assign({}, cards[index], card);
// Store the updated card
updatedCard = cloneDeep(cards[index]);
}
});
// Attach the labels of the card
updatedCard.labels = updatedCard.labels.map(cardLabelId => this._labels.find(label => label.id === cardLabelId));
return [
200,
updatedCard
];
});
// -----------------------------------------------------------------------------------------------------
// @ Cards - PATCH
// -----------------------------------------------------------------------------------------------------
this._fuseMockApiService
.onPatch('api/apps/scrumboard/board/cards')
.reply(({request}) => {
// Get the cards
const cards = cloneDeep(request.body.cards);
// Prepare the updated cards
const updatedCards = [];
// Go through the cards
cards.forEach((item) => {
// Find the card
const index = this._cards.findIndex(card => item.id === card.id);
// Go through the labels and leave only ids of them
item.labels = item.labels.map(itemLabel => itemLabel.id);
// Update the card
this._cards[index] = assign({}, this._cards[index], item);
// Attach the labels of the card
item.labels = item.labels.map(cardLabelId => this._labels.find(label => label.id === cardLabelId));
// Store in the updated cards
updatedCards.push(item);
});
return [
200,
updatedCards
];
});
// -----------------------------------------------------------------------------------------------------
// @ Card - DELETE
// -----------------------------------------------------------------------------------------------------
this._fuseMockApiService
.onDelete('api/apps/scrumboard/board/card')
.reply(({request}) => {
// Get the id
const id = request.params.get('id');
// Find the card and delete it
const index = this._cards.findIndex(item => item.id === id);
this._cards.splice(index, 1);
return [
200,
true
];
});
// -----------------------------------------------------------------------------------------------------
// @ Card Positions - PATCH
// -----------------------------------------------------------------------------------------------------
this._fuseMockApiService
.onPatch('api/apps/scrumboard/board/card/positions')
.reply(({request}) => {
// Get the cards
const cards = request.body.cards;
// Go through the cards
this._cards.forEach((card) => {
// Find this card's index within the cards array that comes with the request
// and assign that index as the new position number for the card
card.position = cards.findIndex(item => item.id === card.id && item.listId === card.listId && item.boardId === card.boardId);
});
// Clone the cards
const updatedCards = cloneDeep(this._cards);
return [
200,
updatedCards
];
});
// -----------------------------------------------------------------------------------------------------
// @ Labels - GET
// -----------------------------------------------------------------------------------------------------
this._fuseMockApiService
.onGet('api/apps/scrumboard/board/labels')
.reply(({request}) => {
// Get the board id
const boardId = request.params.get('boardId');
// Filter the labels
const labels = this._labels.filter(item => item.boardId === boardId);
return [
200,
cloneDeep(labels)
];
});
// -----------------------------------------------------------------------------------------------------
// @ Label - PUT
// -----------------------------------------------------------------------------------------------------
this._fuseMockApiService
.onPut('api/apps/scrumboard/board/label')
.reply(({request}) => {
// Get the label
const newLabel = cloneDeep(request.body.label);
// Generate a new GUID
newLabel.id = FuseMockApiUtils.guid();
// Unshift the new label
this._labels.unshift(newLabel);
return [
200,
newLabel
];
});
// -----------------------------------------------------------------------------------------------------
// @ Label - PATCH
// -----------------------------------------------------------------------------------------------------
this._fuseMockApiService
.onPatch('api/apps/scrumboard/board/label')
.reply(({request}) => {
// Get the id and label
const id = request.body.id;
const label = cloneDeep(request.body.label);
// Prepare the updated label
let updatedLabel = null;
// Find the label and update it
this._labels.forEach((item, index, labels) => {
if ( item.id === id )
{
// Update the label
labels[index] = assign({}, labels[index], label);
// Store the updated label
updatedLabel = labels[index];
}
});
return [
200,
updatedLabel
];
});
// -----------------------------------------------------------------------------------------------------
// @ Label - DELETE
// -----------------------------------------------------------------------------------------------------
this._fuseMockApiService
.onDelete('api/apps/scrumboard/board/label')
.reply(({request}) => {
// Get the id
const id = request.params.get('id');
// Find the label and delete it
const index = this._labels.findIndex(item => item.id === id);
this._labels.splice(index, 1);
// Get the cards that have the label
const cardsWithLabel = this._cards.filter(card => card.labels.indexOf(id) > -1);
// Iterate through them and remove the label
cardsWithLabel.forEach((card) => {
card.tags.splice(card.tags.indexOf(id), 1);
});
return [
200,
true
];
});
}
}

View File

@ -0,0 +1,334 @@
/* eslint-disable */
import * as moment from 'moment';
export const boards = [
{
id : '2c82225f-2a6c-45d3-b18a-1132712a4234',
title : 'Admin Dashboard',
description : 'Roadmap for the new project',
icon : 'heroicons_outline:template',
lastActivity: moment().startOf('day').subtract(1, 'day').toISOString(),
members : [
'9c510cf3-460d-4a8c-b3be-bcc3db578c08',
'baa88231-0ee6-4028-96d5-7f187e0f4cd5',
'18bb18f3-ea7d-4465-8913-e8c9adf6f568'
]
},
{
id : '0168b519-3dab-4b46-b2ea-0e678e38a583',
title : 'Weekly Planning',
description : 'Job related tasks for the week',
icon : 'heroicons_outline:calendar',
lastActivity: moment().startOf('day').subtract(2, 'days').toISOString(),
members : [
'79ebb9ee-1e57-4706-810c-03edaec8f56d',
'319ecb5b-f99c-4ee4-81b2-3aeffd1d4735',
'5bf7ed5b-8b04-46b7-b364-005958b7d82e',
'd1f612e6-3e3b-481f-a8a9-f917e243b06e',
'fe0fec0d-002b-406f-87ab-47eb87ba577c',
'23a47d2c-c6cb-40cc-af87-e946a9df5028',
'6726643d-e8dc-42fa-83a6-b4ec06921a6b',
'0d1eb062-13d5-4286-b8d4-e0bea15f3d56'
]
},
{
id : 'bc7db965-3c4f-4233-abf5-69bd70c3c175',
title : 'Personal Tasks',
description : 'Personal tasks around the house',
icon : 'heroicons_outline:home',
lastActivity: moment().startOf('day').subtract(1, 'week').toISOString(),
members : [
'6f6a1c34-390b-4b2e-97c8-ff0e0d787839'
]
}
];
export const lists = [
{
id : 'a2df7786-519c-485a-a85f-c09a61cc5f37',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
position: 65536,
title : 'To do'
},
{
id : '83ca2a34-65af-49c0-a42e-94a34003fcf2',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
position: 131072,
title : 'In progress'
},
{
id : 'a85ea483-f8f7-42d9-a314-3fed6aac22ab',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
position: 196608,
title : 'In review'
},
{
id : '34cbef38-5687-4813-bd66-141a6df6d832',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
position: 262144,
title : 'Completed'
}
];
export const cards = [
{
id : 'e74e66e9-fe0f-441e-a8ce-28ed6eccc48d',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
listId : 'a2df7786-519c-485a-a85f-c09a61cc5f37',
position : 65536,
title : 'Example that showcase all of the available bits on the card with a fairly long title compared to other cards',
description: 'Example that showcase all of the available bits on the card with a fairly long title compared to other cards. Example that showcase all of the available bits on the card with a fairly long title compared to other cards.',
labels : [
'e0175175-2784-48f1-a519-a1d2e397c9b3',
'51779701-818a-4a53-bc16-137c3bd7a564',
'e8364d69-9595-46ce-a0f9-ce428632a0ac',
'caff9c9b-a198-4564-b1f4-8b3df1d345bb',
'f9eeb436-13a3-4208-a239-0d555960a567'
],
dueDate : moment().subtract(10, 'days').startOf('day').toISOString()
},
{
id : 'ed58add1-45a7-41db-887d-3ca7ee7f2719',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
listId : 'a2df7786-519c-485a-a85f-c09a61cc5f37',
position: 131072,
title : 'Do a research about most needed admin applications',
labels : [
'e0175175-2784-48f1-a519-a1d2e397c9b3'
],
dueDate : null
},
{
id : 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
listId : 'a2df7786-519c-485a-a85f-c09a61cc5f37',
position: 196608,
title : 'Implement the Project dashboard',
labels : [
'caff9c9b-a198-4564-b1f4-8b3df1d345bb'
],
dueDate : moment().startOf('day').toISOString()
},
{
id : '6da8747f-b474-4c9a-9eba-5ef212285500',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
listId : 'a2df7786-519c-485a-a85f-c09a61cc5f37',
position: 262144,
title : 'Implement the Analytics dashboard',
labels : [
'caff9c9b-a198-4564-b1f4-8b3df1d345bb'
],
dueDate : moment().subtract(1, 'day').startOf('day').toISOString()
},
{
id : '94fb1dee-dd83-4cca-acdd-02e96d3cc4f1',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
listId : '83ca2a34-65af-49c0-a42e-94a34003fcf2',
position: 65536,
title : 'Analytics dashboard design',
labels : [
'e8364d69-9595-46ce-a0f9-ce428632a0ac'
],
dueDate : null
},
{
id : 'fc16f7d8-957d-43ed-ba85-20f99b5ce011',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
listId : '83ca2a34-65af-49c0-a42e-94a34003fcf2',
position: 131072,
title : 'Project dashboard design',
labels : [
'e8364d69-9595-46ce-a0f9-ce428632a0ac'
],
dueDate : null
},
{
id : 'c0b32f1f-64ec-4f8d-8b11-a8dc809df331',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
listId : 'a85ea483-f8f7-42d9-a314-3fed6aac22ab',
position: 65536,
title : 'JWT Auth implementation',
labels : [
'caff9c9b-a198-4564-b1f4-8b3df1d345bb'
],
dueDate : null
},
{
id : '532c2747-be79-464a-9897-6a682bf22b64',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
listId : '34cbef38-5687-4813-bd66-141a6df6d832',
position: 65536,
title : 'Create low fidelity wireframes',
labels : [],
dueDate : null
},
{
id : '1d908efe-c830-476e-9e87-d06e30d89bc2',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
listId : '34cbef38-5687-4813-bd66-141a6df6d832',
position: 131072,
title : 'Create high fidelity wireframes',
labels : [],
dueDate : moment().subtract(10, 'day').startOf('day').toISOString()
},
{
id : 'b1da11ed-7896-4826-962d-4b7b718896d4',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
listId : '34cbef38-5687-4813-bd66-141a6df6d832',
position: 196608,
title : 'Collect information about most used admin layouts',
labels : [
'e0175175-2784-48f1-a519-a1d2e397c9b3'
],
dueDate : null
},
{
id : '3b7f3ceb-107f-42bc-a204-c268c9a56cb4',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
listId : '34cbef38-5687-4813-bd66-141a6df6d832',
position: 262144,
title : 'Do a research about latest UI trends',
labels : [
'e0175175-2784-48f1-a519-a1d2e397c9b3'
],
dueDate : null
},
{
id : 'cd7f01c5-a941-4076-8cef-37da0354e643',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
listId : '34cbef38-5687-4813-bd66-141a6df6d832',
position: 327680,
title : 'Learn more about UX',
labels : [
'e0175175-2784-48f1-a519-a1d2e397c9b3'
],
dueDate : null
}
];
export const labels = [
{
id : 'e0175175-2784-48f1-a519-a1d2e397c9b3',
boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
title : 'Research'
},
{
id : '51779701-818a-4a53-bc16-137c3bd7a564',
boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
title : 'Wireframing'
},
{
id : 'e8364d69-9595-46ce-a0f9-ce428632a0ac',
boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
title : 'Design'
},
{
id : 'caff9c9b-a198-4564-b1f4-8b3df1d345bb',
boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
title : 'Development'
},
{
id : 'f9eeb436-13a3-4208-a239-0d555960a567',
boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
title : 'Bug'
}
];
export const members = [
{
id : '6f6a1c34-390b-4b2e-97c8-ff0e0d787839',
name : 'Angeline Vinson',
avatar: 'assets/images/avatars/female-01.jpg'
},
{
id : '4ce4be48-c8c0-468d-9df8-ddfda14cdb37',
name : 'Roseann Greer',
avatar: 'assets/images/avatars/female-02.jpg'
},
{
id : '9c510cf3-460d-4a8c-b3be-bcc3db578c08',
name : 'Lorraine Barnett',
avatar: 'assets/images/avatars/female-03.jpg'
},
{
id : '7ec887d9-b01a-4057-b5dc-aaed18637cc1',
name : 'Middleton Bradford',
avatar: 'assets/images/avatars/male-01.jpg'
},
{
id : '74975a82-addb-427b-9b43-4d2e03331b68',
name : 'Sue Hays',
avatar: 'assets/images/avatars/female-04.jpg'
},
{
id : '18bb18f3-ea7d-4465-8913-e8c9adf6f568',
name : 'Keith Neal',
avatar: 'assets/images/avatars/male-02.jpg'
},
{
id : 'baa88231-0ee6-4028-96d5-7f187e0f4cd5',
name : 'Wilkins Gilmore',
avatar: 'assets/images/avatars/male-03.jpg'
},
{
id : '0d1eb062-13d5-4286-b8d4-e0bea15f3d56',
name : 'Baldwin Stein',
avatar: 'assets/images/avatars/male-04.jpg'
},
{
id : '5bf7ed5b-8b04-46b7-b364-005958b7d82e',
name : 'Bobbie Cohen',
avatar: 'assets/images/avatars/female-05.jpg'
},
{
id : '93b1a72b-e2db-4f77-82d6-272047433508',
name : 'Melody Peters',
avatar: 'assets/images/avatars/female-06.jpg'
},
{
id : 'd1f612e6-3e3b-481f-a8a9-f917e243b06e',
name : 'Marquez Ryan',
avatar: 'assets/images/avatars/male-05.jpg'
},
{
id : '79ebb9ee-1e57-4706-810c-03edaec8f56d',
name : 'Roberta Briggs',
avatar: 'assets/images/avatars/female-07.jpg'
},
{
id : '6726643d-e8dc-42fa-83a6-b4ec06921a6b',
name : 'Robbie Buckley',
avatar: 'assets/images/avatars/female-08.jpg'
},
{
id : '8af617d7-898e-4992-beda-d5ac1d7ceda4',
name : 'Garcia Whitney',
avatar: 'assets/images/avatars/male-06.jpg'
},
{
id : 'bcff44c4-9943-4adc-9049-08b1d922a658',
name : 'Spencer Pate',
avatar: 'assets/images/avatars/male-07.jpg'
},
{
id : '54160ca2-29c9-4475-88a1-31a9307ad913',
name : 'Monica Mcdaniel',
avatar: 'assets/images/avatars/female-09.jpg'
},
{
id : '51286603-3a43-444e-9242-f51fe57d5363',
name : 'Mcmillan Durham',
avatar: 'assets/images/avatars/male-08.jpg'
},
{
id : '319ecb5b-f99c-4ee4-81b2-3aeffd1d4735',
name : 'Jeoine Hebert',
avatar: 'assets/images/avatars/female-10.jpg'
},
{
id : 'fe0fec0d-002b-406f-87ab-47eb87ba577c',
name : 'Susanna Kline',
avatar: 'assets/images/avatars/female-11.jpg'
},
{
id : '23a47d2c-c6cb-40cc-af87-e946a9df5028',
name : 'Suzette Singleton',
avatar: 'assets/images/avatars/female-12.jpg'
}
];

View File

@ -134,6 +134,13 @@ export const defaultNavigation: FuseNavigationItem[] = [
icon : 'heroicons_outline:pencil-alt', icon : 'heroicons_outline:pencil-alt',
link : '/apps/notes' link : '/apps/notes'
}, },
{
id : 'apps.scrumboard',
title: 'Scrumboard',
type : 'basic',
icon : 'heroicons_outline:view-boards',
link : '/apps/scrumboard'
},
{ {
id : 'apps.tasks', id : 'apps.tasks',
title: 'Tasks', title: 'Tasks',
@ -141,7 +148,6 @@ export const defaultNavigation: FuseNavigationItem[] = [
icon : 'heroicons_outline:check-circle', icon : 'heroicons_outline:check-circle',
link : '/apps/tasks' link : '/apps/tasks'
} }
] ]
}, },
{ {
@ -1270,6 +1276,13 @@ export const futuristicNavigation: FuseNavigationItem[] = [
icon : 'heroicons_outline:pencil-alt', icon : 'heroicons_outline:pencil-alt',
link : '/apps/notes' link : '/apps/notes'
}, },
{
id : 'apps.scrumboard',
title: 'Scrumboard',
type : 'basic',
icon : 'heroicons_outline:view-boards',
link : '/apps/scrumboard'
},
{ {
id : 'apps.tasks', id : 'apps.tasks',
title: 'Tasks', title: 'Tasks',

View File

@ -16,6 +16,7 @@ import { NotesMockApi } from 'app/mock-api/apps/notes/api';
import { NotificationsMockApi } from 'app/mock-api/common/notifications/api'; import { NotificationsMockApi } from 'app/mock-api/common/notifications/api';
import { ProjectMockApi } from 'app/mock-api/dashboards/project/api'; import { ProjectMockApi } from 'app/mock-api/dashboards/project/api';
import { SearchMockApi } from 'app/mock-api/common/search/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 { ShortcutsMockApi } from 'app/mock-api/common/shortcuts/api';
import { TasksMockApi } from 'app/mock-api/apps/tasks/api'; import { TasksMockApi } from 'app/mock-api/apps/tasks/api';
import { UserMockApi } from 'app/mock-api/common/user/api'; import { UserMockApi } from 'app/mock-api/common/user/api';
@ -39,6 +40,7 @@ export const mockApiServices = [
NotificationsMockApi, NotificationsMockApi,
ProjectMockApi, ProjectMockApi,
SearchMockApi, SearchMockApi,
ScrumboardMockApi,
ShortcutsMockApi, ShortcutsMockApi,
TasksMockApi, TasksMockApi,
UserMockApi UserMockApi

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -0,0 +1,298 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { ScrumboardService } from 'app/modules/admin/apps/scrumboard/scrumboard.service';
import { Board, Card, List } from 'app/modules/admin/apps/scrumboard/scrumboard.models';
import * as moment from 'moment';
@Component({
selector : 'scrumboard-board',
templateUrl : './board.component.html',
styleUrls : ['./board.component.scss'],
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ScrumboardBoardComponent implements OnInit, OnDestroy
{
board: Board;
listTitleForm: FormGroup;
// Private
private readonly _positionStep: number = 65536;
private readonly _maxListCount: number = 200;
private readonly _maxPosition: number = this._positionStep * 500;
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
* Constructor
*/
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _formBuilder: FormBuilder,
private _scrumboardService: ScrumboardService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Initialize the list title form
this.listTitleForm = this._formBuilder.group({
title: ['']
});
// Get the board
this._scrumboardService.board$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((board: Board) => {
this.board = {...board};
// Mark for check
this._changeDetectorRef.markForCheck();
});
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Focus on the given element to start editing the list title
*
* @param listTitleInput
*/
renameList(listTitleInput: HTMLElement): void
{
// Use timeout so it can wait for menu to close
setTimeout(() => {
listTitleInput.focus();
});
}
/**
* Add new list
*
* @param title
*/
addList(title: string): void
{
// Limit the max list count
if ( this.board.lists.length >= this._maxListCount )
{
return;
}
// Create a new list model
const list = new List({
boardId : this.board.id,
position: this.board.lists.length ? this.board.lists[this.board.lists.length - 1].position + this._positionStep : this._positionStep,
title : title
});
// Save the list
this._scrumboardService.createList(list).subscribe();
}
/**
* Update the list title
*
* @param event
* @param list
*/
updateListTitle(event: any, list: List): void
{
// Get the target element
const element: HTMLInputElement = event.target;
// Get the new title
const newTitle = element.value;
// If the title is empty...
if ( !newTitle || newTitle.trim() === '' )
{
// Reset to original title and return
element.value = list.title;
return;
}
// Update the list title and element value
list.title = element.value = newTitle.trim();
// Update the list
this._scrumboardService.updateList(list).subscribe();
}
/**
* Delete the list
*
* @param id
*/
deleteList(id): void
{
// Delete the list
this._scrumboardService.deleteList(id).subscribe();
}
/**
* Add new card
*/
addCard(list: List, title: string): void
{
// Create a new card model
const card = new Card({
boardId : this.board.id,
listId : list.id,
position: list.cards.length ? list.cards[list.cards.length - 1].position + this._positionStep : this._positionStep,
title : title
});
// Save the card
this._scrumboardService.createCard(card).subscribe();
}
/**
* List dropped
*
* @param event
*/
listDropped(event: CdkDragDrop<List[]>): void
{
// Move the item
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
// Calculate the positions
const updated = this._calculatePositions(event);
// Update the lists
this._scrumboardService.updateLists(updated).subscribe();
}
/**
* Card dropped
*
* @param event
*/
cardDropped(event: CdkDragDrop<Card[]>): void
{
// Move or transfer the item
if ( event.previousContainer === event.container )
{
// Move the item
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
}
else
{
// Transfer the item
transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
// Update the card's list it
event.container.data[event.currentIndex].listId = event.container.id;
}
// Calculate the positions
const updated = this._calculatePositions(event);
// Update the cards
this._scrumboardService.updateCards(updated).subscribe();
}
/**
* Check if the given ISO_8601 date string is overdue
*
* @param date
*/
isOverdue(date: string): boolean
{
return moment(date, moment.ISO_8601).isBefore(moment(), 'days');
}
/**
* Track by function for ngFor loops
*
* @param index
* @param item
*/
trackByFn(index: number, item: any): any
{
return item.id || index;
}
// -----------------------------------------------------------------------------------------------------
// @ Private methods
// -----------------------------------------------------------------------------------------------------
/**
* Calculate and set item positions
* from given CdkDragDrop event
*
* @param event
* @private
*/
private _calculatePositions(event: CdkDragDrop<any[]>): any[]
{
// Get the items
let items = event.container.data;
const currentItem = items[event.currentIndex];
const prevItem = items[event.currentIndex - 1] || null;
const nextItem = items[event.currentIndex + 1] || null;
// If the item moved to the top...
if ( !prevItem )
{
// If the item moved to an empty container
if ( !nextItem )
{
currentItem.position = this._positionStep;
}
else
{
currentItem.position = nextItem.position / 2;
}
}
// If the item moved to the bottom...
else if ( !nextItem )
{
currentItem.position = prevItem.position + this._positionStep;
}
// If the item moved in between other items...
else
{
currentItem.position = (prevItem.position + nextItem.position) / 2;
}
// Check if all item positions need to be updated
if ( !Number.isInteger(currentItem.position) || currentItem.position >= this._maxPosition )
{
// Re-calculate all orders
items = items.map((value, index) => {
value.position = (index + 1) * this._positionStep;
return value;
});
// Return items
return items;
}
// Return currentItem
return [currentItem];
}
}

View File

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

View File

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

View File

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

View File

@ -0,0 +1,43 @@
import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ScrumboardCardDetailsComponent } from 'app/modules/admin/apps/scrumboard/card/details/details.component';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector : 'scrumboard-card',
templateUrl : './card.component.html',
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ScrumboardCardComponent implements OnInit
{
/**
* Constructor
*/
constructor(
private _activatedRoute: ActivatedRoute,
private _matDialog: MatDialog,
private _router: Router
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Launch the modal
this._matDialog.open(ScrumboardCardDetailsComponent, {autoFocus: false})
.afterClosed()
.subscribe(() => {
// Go up twice because card routes are setup like this; "card/CARD_ID"
this._router.navigate(['./../..'], {relativeTo: this._activatedRoute});
});
}
}

View File

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

View File

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

View File

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

View File

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

View File

@ -0,0 +1,190 @@
import { IBoard, ICard, ILabel, IList, IMember } from 'app/modules/admin/apps/scrumboard/scrumboard.types';
// -----------------------------------------------------------------------------------------------------
// @ Board
// -----------------------------------------------------------------------------------------------------
export class Board implements Required<IBoard>
{
id: string | null;
title: string;
description: string | null;
icon: string | null;
lastActivity: string | null;
lists: List[];
labels: Label[];
members: Member[];
/**
* Constructor
*/
constructor(board: IBoard)
{
this.id = board.id || null;
this.title = board.title;
this.description = board.description || null;
this.icon = board.icon || null;
this.lastActivity = board.lastActivity || null;
this.lists = [];
this.labels = [];
this.members = [];
// Lists
if ( board.lists )
{
this.lists = board.lists.map((list) => {
if ( !(list instanceof List) )
{
return new List(list);
}
return list;
});
}
// Labels
if ( board.labels )
{
this.labels = board.labels.map((label) => {
if ( !(label instanceof Label) )
{
return new Label(label);
}
return label;
});
}
// Members
if ( board.members )
{
this.members = board.members.map((member) => {
if ( !(member instanceof Member) )
{
return new Member(member);
}
return member;
});
}
}
}
// -----------------------------------------------------------------------------------------------------
// @ List
// -----------------------------------------------------------------------------------------------------
export class List implements Required<IList>
{
id: string | null;
boardId: string;
position: number;
title: string;
cards: Card[];
/**
* Constructor
*/
constructor(list: IList)
{
this.id = list.id || null;
this.boardId = list.boardId;
this.position = list.position;
this.title = list.title;
this.cards = [];
// Cards
if ( list.cards )
{
this.cards = list.cards.map((card) => {
if ( !(card instanceof Card) )
{
return new Card(card);
}
return card;
});
}
}
}
// -----------------------------------------------------------------------------------------------------
// @ Card
// -----------------------------------------------------------------------------------------------------
export class Card implements Required<ICard>
{
id: string | null;
boardId: string;
listId: string;
position: number;
title: string;
description: string | null;
labels: Label[];
dueDate: string | null;
/**
* Constructor
*/
constructor(card: ICard)
{
this.id = card.id || null;
this.boardId = card.boardId;
this.listId = card.listId;
this.position = card.position;
this.title = card.title;
this.description = card.description || null;
this.labels = [];
this.dueDate = card.dueDate || null;
// Labels
if ( card.labels )
{
this.labels = card.labels.map((label) => {
if ( !(label instanceof Label) )
{
return new Label(label);
}
return label;
});
}
}
}
// -----------------------------------------------------------------------------------------------------
// @ Member
// -----------------------------------------------------------------------------------------------------
export class Member implements Required<IMember>
{
id: string | null;
name: string;
avatar: string | null;
/**
* Constructor
*/
constructor(member: IMember)
{
this.id = member.id || null;
this.name = member.name;
this.avatar = member.avatar || null;
}
}
// -----------------------------------------------------------------------------------------------------
// @ Label
// -----------------------------------------------------------------------------------------------------
export class Label implements Required<ILabel>
{
id: string | null;
boardId: string;
title: string;
/**
* Constructor
*/
constructor(label: ILabel)
{
this.id = label.id || null;
this.boardId = label.boardId;
this.title = label.title;
}
}

View File

@ -0,0 +1,70 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDialogModule } from '@angular/material/dialog';
import { MAT_DATE_FORMATS } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatMomentDateModule } from '@angular/material-moment-adapter';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import * as moment from 'moment';
import { SharedModule } from 'app/shared/shared.module';
import { ScrumboardComponent } from 'app/modules/admin/apps/scrumboard/scrumboard.component';
import { ScrumboardBoardsComponent } from 'app/modules/admin/apps/scrumboard/boards/boards.component';
import { ScrumboardBoardComponent } from 'app/modules/admin/apps/scrumboard/board/board.component';
import { ScrumboardBoardAddCardComponent } from 'app/modules/admin/apps/scrumboard/board/add-card/add-card.component';
import { ScrumboardBoardAddListComponent } from 'app/modules/admin/apps/scrumboard/board/add-list/add-list.component';
import { ScrumboardCardComponent } from 'app/modules/admin/apps/scrumboard/card/card.component';
import { ScrumboardCardDetailsComponent } from 'app/modules/admin/apps/scrumboard/card/details/details.component';
import { scrumboardRoutes } from 'app/modules/admin/apps/scrumboard/scrumboard.routing';
@NgModule({
declarations: [
ScrumboardComponent,
ScrumboardBoardsComponent,
ScrumboardBoardComponent,
ScrumboardBoardAddCardComponent,
ScrumboardBoardAddListComponent,
ScrumboardCardComponent,
ScrumboardCardDetailsComponent
],
imports : [
RouterModule.forChild(scrumboardRoutes),
DragDropModule,
MatButtonModule,
MatCheckboxModule,
MatDatepickerModule,
MatDialogModule,
MatFormFieldModule,
MatIconModule,
MatInputModule,
MatMenuModule,
MatMomentDateModule,
MatProgressBarModule,
SharedModule
],
providers : [
{
provide : MAT_DATE_FORMATS,
useValue: {
parse : {
dateInput: moment.ISO_8601
},
display: {
dateInput : 'll',
monthYearLabel : 'MMM YYYY',
dateA11yLabel : 'LL',
monthYearA11yLabel: 'MMMM YYYY'
}
}
}
]
})
export class ScrumboardModule
{
}

View File

@ -0,0 +1,132 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { Board, Card } from 'app/modules/admin/apps/scrumboard/scrumboard.models';
import { ScrumboardService } from 'app/modules/admin/apps/scrumboard/scrumboard.service';
@Injectable({
providedIn: 'root'
})
export class ScrumboardBoardsResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(
private _scrumboardService: ScrumboardService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Board[]>
{
return this._scrumboardService.getBoards();
}
}
@Injectable({
providedIn: 'root'
})
export class ScrumboardBoardResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(
private _router: Router,
private _scrumboardService: ScrumboardService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Board>
{
return this._scrumboardService.getBoard(route.paramMap.get('boardId'))
.pipe(
// Error here means the requested task is not available
catchError((error) => {
// Log the error
console.error(error);
// Get the parent url
const parentUrl = state.url.split('/').slice(0, -1).join('/');
// Navigate to there
this._router.navigateByUrl(parentUrl);
// Throw an error
return throwError(error);
})
);
}
}
@Injectable({
providedIn: 'root'
})
export class ScrumboardCardResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(
private _router: Router,
private _scrumboardService: ScrumboardService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Card>
{
return this._scrumboardService.getCard(route.paramMap.get('cardId'))
.pipe(
// Error here means the requested task is not available
catchError((error) => {
// Log the error
console.error(error);
// Get the parent url
const parentUrl = state.url.split('/').slice(0, -1).join('/');
// Navigate to there
this._router.navigateByUrl(parentUrl);
// Throw an error
return throwError(error);
})
);
}
}

View File

@ -0,0 +1,31 @@
import { Route } from '@angular/router';
import { ScrumboardBoardsComponent } from 'app/modules/admin/apps/scrumboard/boards/boards.component';
import { ScrumboardBoardResolver, ScrumboardBoardsResolver, ScrumboardCardResolver } from 'app/modules/admin/apps/scrumboard/scrumboard.resolvers';
import { ScrumboardBoardComponent } from 'app/modules/admin/apps/scrumboard/board/board.component';
import { ScrumboardCardComponent } from 'app/modules/admin/apps/scrumboard/card/card.component';
export const scrumboardRoutes: Route[] = [
{
path : '',
component: ScrumboardBoardsComponent,
resolve : {
boards: ScrumboardBoardsResolver
}
},
{
path : ':boardId',
component: ScrumboardBoardComponent,
resolve : {
board: ScrumboardBoardResolver
},
children : [
{
path : 'card/:cardId',
component: ScrumboardCardComponent,
resolve : {
card: ScrumboardCardResolver
}
}
]
}
];

View File

@ -0,0 +1,608 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable, of, throwError } from 'rxjs';
import { map, switchMap, take, tap } from 'rxjs/operators';
import { Board, Card, Label, List } from 'app/modules/admin/apps/scrumboard/scrumboard.models';
@Injectable({
providedIn: 'root'
})
export class ScrumboardService
{
// Private
private _board: BehaviorSubject<Board | null>;
private _boards: BehaviorSubject<Board[] | null>;
private _card: BehaviorSubject<Card | null>;
/**
* Constructor
*/
constructor(
private _httpClient: HttpClient
)
{
// Set the private defaults
this._board = new BehaviorSubject(null);
this._boards = new BehaviorSubject(null);
this._card = new BehaviorSubject(null);
}
// -----------------------------------------------------------------------------------------------------
// @ Accessors
// -----------------------------------------------------------------------------------------------------
/**
* Getter for board
*/
get board$(): Observable<Board>
{
return this._board.asObservable();
}
/**
* Getter for boards
*/
get boards$(): Observable<Board[]>
{
return this._boards.asObservable();
}
/**
* Getter for card
*/
get card$(): Observable<Card>
{
return this._card.asObservable();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Get boards
*/
getBoards(): Observable<Board[]>
{
return this._httpClient.get<Board[]>('api/apps/scrumboard/boards').pipe(
map(response => response.map(item => new Board(item))),
tap(boards => this._boards.next(boards))
);
}
/**
* Get board
*
* @param id
*/
getBoard(id: string): Observable<Board>
{
return this._httpClient.get<Board>('api/apps/scrumboard/board', {params: {id}}).pipe(
map(response => new Board(response)),
tap(board => this._board.next(board))
);
}
/**
* Create board
*
* @param board
*/
createBoard(board: Board): Observable<Board>
{
return this.boards$.pipe(
take(1),
switchMap(boards => this._httpClient.put<Board>('api/apps/scrumboard/board', {board}).pipe(
map((newBoard) => {
// Update the boards with the new board
this._boards.next([...boards, newBoard]);
// Return new board from observable
return newBoard;
})
))
);
}
/**
* Update the board
*
* @param id
* @param board
*/
updateBoard(id: string, board: Board): Observable<Board>
{
return this.boards$.pipe(
take(1),
switchMap(boards => this._httpClient.patch<Board>('api/apps/scrumboard/board', {
id,
board
}).pipe(
map((updatedBoard) => {
// Find the index of the updated board
const index = boards.findIndex(item => item.id === id);
// Update the board
boards[index] = updatedBoard;
// Update the boards
this._boards.next(boards);
// Return the updated board
return updatedBoard;
})
))
);
}
/**
* Delete the board
*
* @param id
*/
deleteBoard(id: string): Observable<boolean>
{
return this.boards$.pipe(
take(1),
switchMap(boards => this._httpClient.delete('api/apps/scrumboard/board', {params: {id}}).pipe(
map((isDeleted: boolean) => {
// Find the index of the deleted board
const index = boards.findIndex(item => item.id === id);
// Delete the board
boards.splice(index, 1);
// Update the boards
this._boards.next(boards);
// Update the board
this._board.next(null);
// Update the card
this._card.next(null);
// Return the deleted status
return isDeleted;
})
))
);
}
/**
* Create list
*
* @param list
*/
createList(list: List): Observable<List>
{
return this._httpClient.post<List>('api/apps/scrumboard/board/list', {list}).pipe(
map(response => new List(response)),
tap((newList) => {
// Get the board value
const board = this._board.value;
// Update the board lists with the new list
board.lists = [...board.lists, newList];
// Sort the board lists
board.lists.sort((a, b) => a.position - b.position);
// Update the board
this._board.next(board);
})
);
}
/**
* Update the list
*
* @param list
*/
updateList(list: List): Observable<List>
{
return this._httpClient.patch<List>('api/apps/scrumboard/board/list', {list}).pipe(
map(response => new List(response)),
tap((updatedList) => {
// Get the board value
const board = this._board.value;
// Find the index of the updated list
const index = board.lists.findIndex(item => item.id === list.id);
// Update the list
board.lists[index] = updatedList;
// Sort the board lists
board.lists.sort((a, b) => a.position - b.position);
// Update the board
this._board.next(board);
})
);
}
/**
* Update the lists
*
* @param lists
*/
updateLists(lists: List[]): Observable<List[]>
{
return this._httpClient.patch<List[]>('api/apps/scrumboard/board/lists', {lists}).pipe(
map(response => response.map(item => new List(item))),
tap((updatedLists) => {
// Get the board value
const board = this._board.value;
// Go through the updated lists
updatedLists.forEach((updatedList) => {
// Find the index of the updated list
const index = board.lists.findIndex(item => item.id === updatedList.id);
// Update the list
board.lists[index] = updatedList;
});
// Sort the board lists
board.lists.sort((a, b) => a.position - b.position);
// Update the board
this._board.next(board);
})
);
}
/**
* Delete the list
*
* @param id
*/
deleteList(id: string): Observable<boolean>
{
return this._httpClient.delete<boolean>('api/apps/scrumboard/board/list', {params: {id}}).pipe(
tap((isDeleted) => {
// Get the board value
const board = this._board.value;
// Find the index of the deleted list
const index = board.lists.findIndex(item => item.id === id);
// Delete the list
board.lists.splice(index, 1);
// Sort the board lists
board.lists.sort((a, b) => a.position - b.position);
// Update the board
this._board.next(board);
})
);
}
/**
* Get card
*/
getCard(id: string): Observable<Card>
{
return this._board.pipe(
take(1),
map((board) => {
// Find the card
const card = board.lists.find(list => list.cards.some(item => item.id === id))
.cards.find(item => item.id === id);
// Update the card
this._card.next(card);
// Return the card
return card;
}),
switchMap((card) => {
if ( !card )
{
return throwError('Could not found the card with id of ' + id + '!');
}
return of(card);
})
);
}
/**
* Create card
*
* @param card
*/
createCard(card: Card): Observable<Card>
{
return this._httpClient.put<Card>('api/apps/scrumboard/board/card', {card}).pipe(
map(response => new Card(response)),
tap((newCard) => {
// Get the board value
const board = this._board.value;
// Find the list and push the new card in it
board.lists.forEach((listItem, index, list) => {
if ( listItem.id === newCard.listId )
{
list[index].cards.push(newCard);
}
});
// Update the board
this._board.next(board);
// Return the new card
return newCard;
})
);
}
/**
* Update the card
*
* @param id
* @param card
*/
updateCard(id: string, card: Card): Observable<Card>
{
return this.board$.pipe(
take(1),
switchMap(board => this._httpClient.patch<Card>('api/apps/scrumboard/board/card', {
id,
card
}).pipe(
map((updatedCard) => {
// Find the card and update it
board.lists.forEach((listItem) => {
listItem.cards.forEach((cardItem, index, array) => {
if ( cardItem.id === id )
{
array[index] = updatedCard;
}
});
});
// Update the board
this._board.next(board);
// Update the card
this._card.next(updatedCard);
// Return the updated card
return updatedCard;
})
))
);
}
/**
* Update the cards
*
* @param cards
*/
updateCards(cards: Card[]): Observable<Card[]>
{
return this._httpClient.patch<Card[]>('api/apps/scrumboard/board/cards', {cards}).pipe(
map(response => response.map(item => new Card(item))),
tap((updatedCards) => {
// Get the board value
const board = this._board.value;
// Go through the updated cards
updatedCards.forEach((updatedCard) => {
// Find the index of the updated card's list
const listIndex = board.lists.findIndex(list => list.id === updatedCard.listId);
// Find the index of the updated card
const cardIndex = board.lists[listIndex].cards.findIndex(item => item.id === updatedCard.id);
// Update the card
board.lists[listIndex].cards[cardIndex] = updatedCard;
// Sort the cards
board.lists[listIndex].cards.sort((a, b) => a.position - b.position);
});
// Update the board
this._board.next(board);
})
);
}
/**
* Delete the card
*
* @param id
*/
deleteCard(id: string): Observable<boolean>
{
return this.board$.pipe(
take(1),
switchMap(board => this._httpClient.delete('api/apps/scrumboard/board/card', {params: {id}}).pipe(
map((isDeleted: boolean) => {
// Find the card and delete it
board.lists.forEach((listItem) => {
listItem.cards.forEach((cardItem, index, array) => {
if ( cardItem.id === id )
{
array.splice(index, 1);
}
});
});
// Update the board
this._board.next(board);
// Update the card
this._card.next(null);
// Return the deleted status
return isDeleted;
})
))
);
}
/**
* Update card positions
*
* @param cards
*/
updateCardPositions(cards: Card[]): void // Observable<Card[]>
{
/*return this._httpClient.patch<Card[]>('api/apps/scrumboard/board/card/positions', {cards}).pipe(
map((response) => response.map((item) => new Card(item))),
tap((updatedCards) => {
// Get the board value
const board = this._board.value;
// Find the card and update it
board.lists.forEach((listItem) => {
listItem.cards.forEach((cardItem, index, array) => {
if ( cardItem.id === id )
{
array[index] = updatedCard;
}
});
});
// Update the lists
board.lists = updatedLists;
// Sort the board lists
board.lists.sort((a, b) => a.position - b.position);
// Update the board
this._board.next(board);
})
);*/
}
/**
* Create label
*
* @param label
*/
createLabel(label: Label): Observable<Label>
{
return this.board$.pipe(
take(1),
switchMap(board => this._httpClient.post<Label>('api/apps/scrumboard/board/label', {label}).pipe(
map((newLabel) => {
// Update the board labels with the new label
board.labels = [...board.labels, newLabel];
// Update the board
this._board.next(board);
// Return new label from observable
return newLabel;
})
))
);
}
/**
* Update the label
*
* @param id
* @param label
*/
updateLabel(id: string, label: Label): Observable<Label>
{
return this.board$.pipe(
take(1),
switchMap(board => this._httpClient.patch<Label>('api/apps/scrumboard/board/label', {
id,
label
}).pipe(
map((updatedLabel) => {
// Find the index of the updated label
const index = board.labels.findIndex(item => item.id === id);
// Update the label
board.labels[index] = updatedLabel;
// Update the board
this._board.next(board);
// Return the updated label
return updatedLabel;
})
))
);
}
/**
* Delete the label
*
* @param id
*/
deleteLabel(id: string): Observable<boolean>
{
return this.board$.pipe(
take(1),
switchMap(board => this._httpClient.delete('api/apps/scrumboard/board/label', {params: {id}}).pipe(
map((isDeleted: boolean) => {
// Find the index of the deleted label
const index = board.labels.findIndex(item => item.id === id);
// Delete the label
board.labels.splice(index, 1);
// If the label is deleted...
if ( isDeleted )
{
// Remove the label from any card that uses it
board.lists.forEach((list) => {
list.cards.forEach((card) => {
const labelIndex = card.labels.findIndex(label => label.id === id);
if ( labelIndex > -1 )
{
card.labels.splice(labelIndex, 1);
}
});
});
}
// Update the board
this._board.next(board);
// Return the deleted status
return isDeleted;
})
))
);
}
/**
* Search within board cards
*
* @param query
*/
search(query: string): Observable<Card[] | null>
{
// @TODO: Update the board cards based on the search results
return this._httpClient.get<Card[] | null>('api/apps/scrumboard/board/search', {params: {query}});
}
}

View File

@ -0,0 +1,46 @@
export interface IBoard
{
id?: string | null;
title: string;
description?: string | null;
icon?: string | null;
lastActivity?: string | null;
lists?: IList[];
labels?: ILabel[];
members?: IMember[];
}
export interface IList
{
id?: string | null;
boardId: string;
position: number;
title: string;
cards?: ICard[];
}
export interface ICard
{
id?: string | null;
boardId: string;
listId: string;
position: number;
title: string;
description?: string | null;
labels?: ILabel[];
dueDate?: string | null;
}
export interface IMember
{
id?: string | null;
name: string;
avatar?: string | null;
}
export interface ILabel
{
id: string | null;
boardId: string;
title: string;
}

View File

@ -336,19 +336,19 @@ const config = {
animation : [], animation : [],
backgroundAttachment : [], backgroundAttachment : [],
backgroundClip : [], backgroundClip : [],
backgroundColor : ['dark', 'responsive', 'group-hover', 'hover'], backgroundColor : ['dark', 'responsive', 'group-hover', 'hover', 'focus', 'focus-within'],
backgroundImage : [], backgroundImage : [],
backgroundOpacity : ['dark', 'hover'], backgroundOpacity : ['dark', 'hover'],
backgroundPosition : [], backgroundPosition : [],
backgroundRepeat : [], backgroundRepeat : [],
backgroundSize : [], backgroundSize : [],
borderCollapse : [], borderCollapse : [],
borderColor : ['dark', 'group-hover', 'hover'], borderColor : ['dark', 'group-hover', 'hover', 'focus', 'focus-within'],
borderOpacity : ['group-hover', 'hover'], borderOpacity : ['group-hover', 'hover'],
borderRadius : ['responsive'], borderRadius : ['responsive'],
borderStyle : [], borderStyle : [],
borderWidth : ['dark', 'responsive', 'first', 'last', 'odd', 'even'], borderWidth : ['dark', 'responsive', 'first', 'last', 'odd', 'even'],
boxShadow : ['dark', 'responsive', 'hover'], boxShadow : ['dark', 'responsive', 'hover', 'focus-within'],
boxSizing : [], boxSizing : [],
cursor : [], cursor : [],
display : ['dark', 'responsive', 'hover', 'group-hover'], display : ['dark', 'responsive', 'hover', 'group-hover'],