mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2024-10-30 01:08:47 +00:00
(apps/notes) New version of the Notes app
This commit is contained in:
parent
5ac7002a98
commit
77014174e8
|
@ -90,6 +90,7 @@ export const appRoutes: Route[] = [
|
||||||
{path: 'file-manager', loadChildren: () => import('app/modules/admin/apps/file-manager/file-manager.module').then(m => m.FileManagerModule)},
|
{path: 'file-manager', loadChildren: () => import('app/modules/admin/apps/file-manager/file-manager.module').then(m => m.FileManagerModule)},
|
||||||
{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: '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)},
|
||||||
]},
|
]},
|
||||||
|
|
||||||
|
|
264
src/app/mock-api/apps/notes/api.ts
Normal file
264
src/app/mock-api/apps/notes/api.ts
Normal file
|
@ -0,0 +1,264 @@
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { cloneDeep } from 'lodash-es';
|
||||||
|
import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service';
|
||||||
|
import { labels as labelsData, notes as notesData } from 'app/mock-api/apps/notes/data';
|
||||||
|
import { FuseMockApiUtils } from '@fuse/lib/mock-api';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class NotesMockApi
|
||||||
|
{
|
||||||
|
private _labels: any[] = labelsData;
|
||||||
|
private _notes: any[] = notesData;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constructor
|
||||||
|
*/
|
||||||
|
constructor(private _fuseMockApiService: FuseMockApiService)
|
||||||
|
{
|
||||||
|
// Register Mock API handlers
|
||||||
|
this.registerHandlers();
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Public methods
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Register Mock API handlers
|
||||||
|
*/
|
||||||
|
registerHandlers(): void
|
||||||
|
{
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Labels - GET
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
this._fuseMockApiService
|
||||||
|
.onGet('api/apps/notes/labels')
|
||||||
|
.reply(() => {
|
||||||
|
|
||||||
|
return [
|
||||||
|
200,
|
||||||
|
cloneDeep(this._labels)
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Labels - POST
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
this._fuseMockApiService
|
||||||
|
.onPost('api/apps/notes/labels')
|
||||||
|
.reply(({request}) => {
|
||||||
|
|
||||||
|
// Create a new label
|
||||||
|
const label = {
|
||||||
|
id : FuseMockApiUtils.guid(),
|
||||||
|
title: request.body.title
|
||||||
|
};
|
||||||
|
|
||||||
|
// Update the labels
|
||||||
|
this._labels.push(label);
|
||||||
|
|
||||||
|
return [
|
||||||
|
200,
|
||||||
|
cloneDeep(this._labels)
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Labels - PATCH
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
this._fuseMockApiService
|
||||||
|
.onPatch('api/apps/notes/labels')
|
||||||
|
.reply(({request}) => {
|
||||||
|
|
||||||
|
// Get label
|
||||||
|
const updatedLabel = request.body.label;
|
||||||
|
|
||||||
|
// Update the label
|
||||||
|
this._labels = this._labels.map((label) => {
|
||||||
|
if ( label.id === updatedLabel.id )
|
||||||
|
{
|
||||||
|
return {
|
||||||
|
...label,
|
||||||
|
title: updatedLabel.title
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return label;
|
||||||
|
});
|
||||||
|
|
||||||
|
return [
|
||||||
|
200,
|
||||||
|
cloneDeep(this._labels)
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Labels - DELETE
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
this._fuseMockApiService
|
||||||
|
.onDelete('api/apps/notes/labels')
|
||||||
|
.reply(({request}) => {
|
||||||
|
|
||||||
|
// Get label id
|
||||||
|
const id = request.params.get('id');
|
||||||
|
|
||||||
|
// Delete the label
|
||||||
|
this._labels = this._labels.filter((label) => label.id !== id);
|
||||||
|
|
||||||
|
// Go through notes and delete the label
|
||||||
|
this._notes = this._notes.map((note) => ({
|
||||||
|
...note,
|
||||||
|
labels: note.labels.filter((item) => item !== id)
|
||||||
|
}));
|
||||||
|
|
||||||
|
return [
|
||||||
|
200,
|
||||||
|
cloneDeep(this._labels)
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Note Tasks - POST
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
this._fuseMockApiService
|
||||||
|
.onPost('api/apps/notes/tasks')
|
||||||
|
.reply(({request}) => {
|
||||||
|
|
||||||
|
// Get note and task
|
||||||
|
let updatedNote = request.body.note;
|
||||||
|
const task = request.body.task;
|
||||||
|
|
||||||
|
// Update the note
|
||||||
|
this._notes = this._notes.map((note) => {
|
||||||
|
if ( note.id === updatedNote.id )
|
||||||
|
{
|
||||||
|
// Update the tasks
|
||||||
|
if ( !note.tasks )
|
||||||
|
{
|
||||||
|
note.tasks = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
note.tasks.push({
|
||||||
|
id : FuseMockApiUtils.guid(),
|
||||||
|
content : task,
|
||||||
|
completed: false
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update the updatedNote with the new task
|
||||||
|
updatedNote = cloneDeep(note);
|
||||||
|
|
||||||
|
return {
|
||||||
|
...note
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return note;
|
||||||
|
});
|
||||||
|
|
||||||
|
return [
|
||||||
|
200,
|
||||||
|
updatedNote
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Notes - GET
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
this._fuseMockApiService
|
||||||
|
.onGet('api/apps/notes/all')
|
||||||
|
.reply(() => {
|
||||||
|
|
||||||
|
// Clone the labels and notes
|
||||||
|
const labels = cloneDeep(this._labels);
|
||||||
|
let notes = cloneDeep(this._notes);
|
||||||
|
|
||||||
|
// Attach the labels to the notes
|
||||||
|
notes = notes.map((note) => (
|
||||||
|
{
|
||||||
|
...note,
|
||||||
|
labels: note.labels.map((labelId) => labels.find((label) => label.id === labelId))
|
||||||
|
}
|
||||||
|
));
|
||||||
|
|
||||||
|
return [
|
||||||
|
200,
|
||||||
|
notes
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Notes - POST
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
this._fuseMockApiService
|
||||||
|
.onPost('api/apps/notes')
|
||||||
|
.reply(({request}) => {
|
||||||
|
|
||||||
|
// Get note
|
||||||
|
const note = request.body.note;
|
||||||
|
|
||||||
|
// Add an id
|
||||||
|
note.id = FuseMockApiUtils.guid();
|
||||||
|
|
||||||
|
// Push the note
|
||||||
|
this._notes.push(note);
|
||||||
|
|
||||||
|
return [
|
||||||
|
200,
|
||||||
|
note
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Notes - PATCH
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
this._fuseMockApiService
|
||||||
|
.onPatch('api/apps/notes')
|
||||||
|
.reply(({request}) => {
|
||||||
|
|
||||||
|
// Get note
|
||||||
|
const updatedNote = request.body.updatedNote;
|
||||||
|
|
||||||
|
// Update the note
|
||||||
|
this._notes = this._notes.map((note) => {
|
||||||
|
if ( note.id === updatedNote.id )
|
||||||
|
{
|
||||||
|
return {
|
||||||
|
...updatedNote
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return note;
|
||||||
|
});
|
||||||
|
|
||||||
|
return [
|
||||||
|
200,
|
||||||
|
updatedNote
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Notes - DELETE
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
this._fuseMockApiService
|
||||||
|
.onDelete('api/apps/notes')
|
||||||
|
.reply(({request}) => {
|
||||||
|
|
||||||
|
// Get the id
|
||||||
|
const id = request.params.get('id');
|
||||||
|
|
||||||
|
// Find the note and delete it
|
||||||
|
this._notes.forEach((item, index) => {
|
||||||
|
|
||||||
|
if ( item.id === id )
|
||||||
|
{
|
||||||
|
this._notes.splice(index, 1);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Return the response
|
||||||
|
return [200, true];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
314
src/app/mock-api/apps/notes/data.ts
Normal file
314
src/app/mock-api/apps/notes/data.ts
Normal file
|
@ -0,0 +1,314 @@
|
||||||
|
/* tslint:disable:max-line-length */
|
||||||
|
import moment from 'moment';
|
||||||
|
|
||||||
|
export const labels = [
|
||||||
|
{
|
||||||
|
id : 'f47c92e5-20b9-44d9-917f-9ff4ad25dfd0',
|
||||||
|
title: 'Family'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'e2f749f5-41ed-49d0-a92a-1c83d879e371',
|
||||||
|
title: 'Work'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'b1cde9ee-e54d-4142-ad8b-cf55dafc9528',
|
||||||
|
title: 'Tasks'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : '6c288794-47eb-4605-8bdf-785b61a449d3',
|
||||||
|
title: 'Priority'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'bbc73458-940b-421c-8d5f-8dcd23a9b0d6',
|
||||||
|
title: 'Personal'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : '2dc11344-3507-48e0-83d6-1c047107f052',
|
||||||
|
title: 'Friends'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export const notes = [
|
||||||
|
{
|
||||||
|
id : '8f011ac5-b71c-4cd7-a317-857dcd7d85e0',
|
||||||
|
title : '',
|
||||||
|
content : 'Find a new company name',
|
||||||
|
tasks : null,
|
||||||
|
image : null,
|
||||||
|
reminder : null,
|
||||||
|
labels : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
|
||||||
|
archived : false,
|
||||||
|
createdAt: moment().hour(10).minute(19).subtract(98, 'day').toISOString(),
|
||||||
|
updatedAt: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'ced0a1ce-051d-41a3-b080-e2161e4ae621',
|
||||||
|
title : '',
|
||||||
|
content : 'Send the photos of last summer to John',
|
||||||
|
tasks : null,
|
||||||
|
image : 'assets/images/cards/14-640x480.jpg',
|
||||||
|
reminder : null,
|
||||||
|
labels : [
|
||||||
|
'bbc73458-940b-421c-8d5f-8dcd23a9b0d6',
|
||||||
|
'b1cde9ee-e54d-4142-ad8b-cf55dafc9528'
|
||||||
|
],
|
||||||
|
archived : false,
|
||||||
|
createdAt: moment().hour(15).minute(37).subtract(80, 'day').toISOString(),
|
||||||
|
updatedAt: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'd3ac02a9-86e4-4187-bbd7-2c965518b3a3',
|
||||||
|
title : '',
|
||||||
|
content : 'Update the design of the theme',
|
||||||
|
tasks : null,
|
||||||
|
image : null,
|
||||||
|
reminder : null,
|
||||||
|
labels : ['6c288794-47eb-4605-8bdf-785b61a449d3'],
|
||||||
|
archived : false,
|
||||||
|
createdAt: moment().hour(19).minute(27).subtract(74, 'day').toISOString(),
|
||||||
|
updatedAt: moment().hour(15).minute(36).subtract(50, 'day').toISOString()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : '89861bd4-0144-4bb4-8b39-332ca10371d5',
|
||||||
|
title : '',
|
||||||
|
content : 'Theming support for all apps',
|
||||||
|
tasks : null,
|
||||||
|
image : null,
|
||||||
|
reminder : moment().hour(12).minute(34).add(50, 'day').toISOString(),
|
||||||
|
labels : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
|
||||||
|
archived : false,
|
||||||
|
createdAt: moment().hour(12).minute(34).subtract(59, 'day').toISOString(),
|
||||||
|
updatedAt: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'ffd20f3c-2d43-4c6b-8021-278032fc9e92',
|
||||||
|
title : 'Gift Ideas',
|
||||||
|
content : 'Stephanie\'s birthday is coming and I need to pick a present for her. Take a look at the below list and buy one of them (or all of them)',
|
||||||
|
tasks : [
|
||||||
|
{
|
||||||
|
id : '330a924f-fb51-48f6-a374-1532b1dd353d',
|
||||||
|
content : 'Scarf',
|
||||||
|
completed: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : '781855a6-2ad2-4df4-b0af-c3cb5f302b40',
|
||||||
|
content : 'A new bike helmet',
|
||||||
|
completed: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'bcb8923b-33cd-42c2-9203-170994fa24f5',
|
||||||
|
content : 'Necklace',
|
||||||
|
completed: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : '726bdf6e-5cd7-408a-9a4f-0d7bb98c1c4b',
|
||||||
|
content : 'Flowers',
|
||||||
|
completed: false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
image : null,
|
||||||
|
reminder : null,
|
||||||
|
labels : ['f47c92e5-20b9-44d9-917f-9ff4ad25dfd0'],
|
||||||
|
archived : false,
|
||||||
|
createdAt: moment().hour(16).minute(4).subtract(47, 'day').toISOString(),
|
||||||
|
updatedAt: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : '71d223bb-abab-4183-8919-cd3600a950b4',
|
||||||
|
title : 'Shopping list',
|
||||||
|
content : '',
|
||||||
|
tasks : [
|
||||||
|
{
|
||||||
|
id : 'e3cbc986-641c-4448-bc26-7ecfa0549c22',
|
||||||
|
content : 'Bread',
|
||||||
|
completed: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : '34013111-ab2c-4b2f-9352-d2ae282f57d3',
|
||||||
|
content : 'Milk',
|
||||||
|
completed: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : '0fbdea82-cc79-4433-8ee4-54fd542c380d',
|
||||||
|
content : 'Onions',
|
||||||
|
completed: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : '66490222-743e-4262-ac91-773fcd98a237',
|
||||||
|
content : 'Coffee',
|
||||||
|
completed: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'ab367215-d06a-48b0-a7b8-e161a63b07bd',
|
||||||
|
content : 'Toilet Paper',
|
||||||
|
completed: true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
image : null,
|
||||||
|
reminder : moment().hour(10).minute(44).subtract(35, 'day').toISOString(),
|
||||||
|
labels : ['b1cde9ee-e54d-4142-ad8b-cf55dafc9528'],
|
||||||
|
archived : false,
|
||||||
|
createdAt: moment().hour(10).minute(44).subtract(35, 'day').toISOString(),
|
||||||
|
updatedAt: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : '11fbeb98-ae5e-41ad-bed6-330886fd7906',
|
||||||
|
title : 'Keynote Schedule',
|
||||||
|
content : '',
|
||||||
|
tasks : [
|
||||||
|
{
|
||||||
|
id : '2711bac1-7d8a-443a-a4fe-506ef51d3fcb',
|
||||||
|
content : 'Breakfast',
|
||||||
|
completed: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'e3a2d675-a3e5-4cef-9205-feeccaf949d7',
|
||||||
|
content : 'Opening ceremony',
|
||||||
|
completed: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : '7a721b6d-9d85-48e0-b6c3-f927079af582',
|
||||||
|
content : 'Talk 1: How we did it!',
|
||||||
|
completed: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'bdb4d5cd-5bb8-45e2-9186-abfd8307e429',
|
||||||
|
content : 'Talk 2: How can you do it!',
|
||||||
|
completed: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'c8293bb4-8ab4-4310-bbc2-52ecf8ec0c54',
|
||||||
|
content : 'Lunch break',
|
||||||
|
completed: false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
image : null,
|
||||||
|
reminder : moment().hour(11).minute(27).subtract(14, 'day').toISOString(),
|
||||||
|
labels : [
|
||||||
|
'b1cde9ee-e54d-4142-ad8b-cf55dafc9528',
|
||||||
|
'e2f749f5-41ed-49d0-a92a-1c83d879e371'
|
||||||
|
],
|
||||||
|
archived : false,
|
||||||
|
createdAt: moment().hour(11).minute(27).subtract(24, 'day').toISOString(),
|
||||||
|
updatedAt: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'd46dee8b-8761-4b6d-a1df-449d6e6feb6a',
|
||||||
|
title : '',
|
||||||
|
content : 'Organize the dad\'s surprise retirement party',
|
||||||
|
tasks : null,
|
||||||
|
image : null,
|
||||||
|
reminder : moment().hour(14).minute(56).subtract(25, 'day').toISOString(),
|
||||||
|
labels : ['f47c92e5-20b9-44d9-917f-9ff4ad25dfd0'],
|
||||||
|
archived : false,
|
||||||
|
createdAt: moment().hour(14).minute(56).subtract(20, 'day').toISOString(),
|
||||||
|
updatedAt: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : '6bc9f002-1675-417c-93c4-308fba39023e',
|
||||||
|
title : 'Plan the road trip',
|
||||||
|
content : '',
|
||||||
|
tasks : null,
|
||||||
|
image : 'assets/images/cards/17-640x480.jpg',
|
||||||
|
reminder : null,
|
||||||
|
labels : [
|
||||||
|
'2dc11344-3507-48e0-83d6-1c047107f052',
|
||||||
|
'b1cde9ee-e54d-4142-ad8b-cf55dafc9528'
|
||||||
|
],
|
||||||
|
archived : false,
|
||||||
|
createdAt: moment().hour(9).minute(32).subtract(15, 'day').toISOString(),
|
||||||
|
updatedAt: moment().hour(17).minute(6).subtract(12, 'day').toISOString()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : '15188348-78aa-4ed6-b5c2-028a214ba987',
|
||||||
|
title : 'Office Address',
|
||||||
|
content : '933 8th Street Stamford, CT 06902',
|
||||||
|
tasks : null,
|
||||||
|
image : null,
|
||||||
|
reminder : null,
|
||||||
|
labels : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
|
||||||
|
archived : false,
|
||||||
|
createdAt: moment().hour(20).minute(5).subtract(12, 'day').toISOString(),
|
||||||
|
updatedAt: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : '1dbfc685-1a0a-4070-9ca7-ed896c523037',
|
||||||
|
title : 'Tasks',
|
||||||
|
content : '',
|
||||||
|
tasks : [
|
||||||
|
{
|
||||||
|
id : '004638bf-3ee6-47a5-891c-3be7b9f3df09',
|
||||||
|
content : 'Wash the dishes',
|
||||||
|
completed: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : '86e6820b-1ae3-4c14-a13e-35605a0d654b',
|
||||||
|
content : 'Walk the dog',
|
||||||
|
completed: false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
image : null,
|
||||||
|
reminder : moment().hour(13).minute(43).subtract(2, 'day').toISOString(),
|
||||||
|
labels : ['bbc73458-940b-421c-8d5f-8dcd23a9b0d6'],
|
||||||
|
archived : false,
|
||||||
|
createdAt: moment().hour(13).minute(43).subtract(7, 'day').toISOString(),
|
||||||
|
updatedAt: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : '49548409-90a3-44d4-9a9a-f5af75aa9a66',
|
||||||
|
title : '',
|
||||||
|
content : 'Dinner with parents',
|
||||||
|
tasks : null,
|
||||||
|
image : null,
|
||||||
|
reminder : null,
|
||||||
|
labels : [
|
||||||
|
'f47c92e5-20b9-44d9-917f-9ff4ad25dfd0',
|
||||||
|
'6c288794-47eb-4605-8bdf-785b61a449d3'
|
||||||
|
],
|
||||||
|
archived : false,
|
||||||
|
createdAt: moment().hour(7).minute(12).subtract(2, 'day').toISOString(),
|
||||||
|
updatedAt: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'c6d13a35-500d-4491-a3f3-6ca05d6632d3',
|
||||||
|
title : '',
|
||||||
|
content : 'Re-fill the medicine cabinet',
|
||||||
|
tasks : null,
|
||||||
|
image : null,
|
||||||
|
reminder : null,
|
||||||
|
labels : [
|
||||||
|
'bbc73458-940b-421c-8d5f-8dcd23a9b0d6',
|
||||||
|
'6c288794-47eb-4605-8bdf-785b61a449d3'
|
||||||
|
],
|
||||||
|
archived : true,
|
||||||
|
createdAt: moment().hour(17).minute(14).subtract(100, 'day').toISOString(),
|
||||||
|
updatedAt: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'c6d13a35-500d-4491-a3f3-6ca05d6632d3',
|
||||||
|
title : '',
|
||||||
|
content : 'Update the icons pack',
|
||||||
|
tasks : null,
|
||||||
|
image : null,
|
||||||
|
reminder : null,
|
||||||
|
labels : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
|
||||||
|
archived : true,
|
||||||
|
createdAt: moment().hour(10).minute(29).subtract(85, 'day').toISOString(),
|
||||||
|
updatedAt: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : '46214383-f8e7-44da-aa2e-0b685e0c5027',
|
||||||
|
title : 'Team Meeting',
|
||||||
|
content : 'Talk about the future of the web apps',
|
||||||
|
tasks : null,
|
||||||
|
image : null,
|
||||||
|
reminder : null,
|
||||||
|
labels : [
|
||||||
|
'e2f749f5-41ed-49d0-a92a-1c83d879e371',
|
||||||
|
'b1cde9ee-e54d-4142-ad8b-cf55dafc9528'
|
||||||
|
],
|
||||||
|
archived : true,
|
||||||
|
createdAt: moment().hour(15).minute(30).subtract(69, 'day').toISOString(),
|
||||||
|
updatedAt: null
|
||||||
|
}
|
||||||
|
];
|
|
@ -127,6 +127,13 @@ export const defaultNavigation: FuseNavigationItem[] = [
|
||||||
classes: 'px-2 bg-pink-600 text-white rounded-full'
|
classes: 'px-2 bg-pink-600 text-white rounded-full'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id : 'apps.notes',
|
||||||
|
title: 'Notes',
|
||||||
|
type : 'basic',
|
||||||
|
icon : 'heroicons_outline:pencil-alt',
|
||||||
|
link : '/apps/notes'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id : 'apps.tasks',
|
id : 'apps.tasks',
|
||||||
title: 'Tasks',
|
title: 'Tasks',
|
||||||
|
@ -1242,6 +1249,13 @@ export const futuristicNavigation: FuseNavigationItem[] = [
|
||||||
classes: 'px-2 bg-black bg-opacity-25 text-white rounded-full'
|
classes: 'px-2 bg-black bg-opacity-25 text-white rounded-full'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id : 'apps.notes',
|
||||||
|
title: 'Notes',
|
||||||
|
type : 'basic',
|
||||||
|
icon : 'heroicons_outline:pencil-alt',
|
||||||
|
link : '/apps/notes'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id : 'apps.tasks',
|
id : 'apps.tasks',
|
||||||
title: 'Tasks',
|
title: 'Tasks',
|
||||||
|
|
|
@ -11,6 +11,7 @@ import { IconsMockApi } from 'app/mock-api/ui/icons/api';
|
||||||
import { MailboxMockApi } from 'app/mock-api/apps/mailbox/api';
|
import { MailboxMockApi } from 'app/mock-api/apps/mailbox/api';
|
||||||
import { MessagesMockApi } from 'app/mock-api/common/messages/api';
|
import { MessagesMockApi } from 'app/mock-api/common/messages/api';
|
||||||
import { NavigationMockApi } from 'app/mock-api/common/navigation/api';
|
import { NavigationMockApi } from 'app/mock-api/common/navigation/api';
|
||||||
|
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';
|
||||||
|
@ -32,6 +33,7 @@ export const mockApiServices = [
|
||||||
MailboxMockApi,
|
MailboxMockApi,
|
||||||
MessagesMockApi,
|
MessagesMockApi,
|
||||||
NavigationMockApi,
|
NavigationMockApi,
|
||||||
|
NotesMockApi,
|
||||||
NotificationsMockApi,
|
NotificationsMockApi,
|
||||||
ProjectMockApi,
|
ProjectMockApi,
|
||||||
SearchMockApi,
|
SearchMockApi,
|
||||||
|
|
176
src/app/modules/admin/apps/notes/details/details.component.html
Normal file
176
src/app/modules/admin/apps/notes/details/details.component.html
Normal file
|
@ -0,0 +1,176 @@
|
||||||
|
<div class="flex flex-col flex-auto w-160 min-w-160 -m-6">
|
||||||
|
<ng-container *ngIf="(note$ | async) as note">
|
||||||
|
<!-- Image -->
|
||||||
|
<ng-container *ngIf="note.image">
|
||||||
|
<div class="relative w-full">
|
||||||
|
<div class="absolute right-0 bottom-0 p-4">
|
||||||
|
<button
|
||||||
|
mat-icon-button
|
||||||
|
(click)="removeImage(note)">
|
||||||
|
<mat-icon
|
||||||
|
class="text-white"
|
||||||
|
[svgIcon]="'heroicons_outline:trash'"></mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
class="w-full object-cover"
|
||||||
|
[src]="note.image">
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
<div class="m-4">
|
||||||
|
<!-- Title -->
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
class="w-full p-2 text-2xl"
|
||||||
|
[placeholder]="'Title'"
|
||||||
|
[(ngModel)]="note.title"
|
||||||
|
(input)="updateNoteDetails(note)">
|
||||||
|
</div>
|
||||||
|
<!-- Note -->
|
||||||
|
<div>
|
||||||
|
<textarea
|
||||||
|
class="w-full my-2.5 p-2"
|
||||||
|
fuseAutogrow
|
||||||
|
[placeholder]="'Note'"
|
||||||
|
[(ngModel)]="note.content"
|
||||||
|
(input)="updateNoteDetails(note)"></textarea>
|
||||||
|
</div>
|
||||||
|
<!-- Tasks -->
|
||||||
|
<ng-container *ngIf="note.tasks">
|
||||||
|
<div class="mx-2 mt-4 space-y-1.5">
|
||||||
|
<ng-container *ngFor="let task of note.tasks; trackBy: trackByFn">
|
||||||
|
<div class="group flex items-center">
|
||||||
|
<mat-checkbox
|
||||||
|
class="flex items-center"
|
||||||
|
[color]="'primary'"
|
||||||
|
[(ngModel)]="task.completed"
|
||||||
|
(change)="updateTaskOnNote(note, task)"></mat-checkbox>
|
||||||
|
<input
|
||||||
|
class="w-full px-1 py-0.5"
|
||||||
|
[ngClass]="{'text-secondary line-through': task.completed}"
|
||||||
|
[placeholder]="'Task'"
|
||||||
|
[(ngModel)]="task.content"
|
||||||
|
(input)="updateTaskOnNote(note, task)">
|
||||||
|
<mat-icon
|
||||||
|
class="hidden group-hover:flex ml-auto icon-size-5 cursor-pointer"
|
||||||
|
[svgIcon]="'heroicons_solid:x'"
|
||||||
|
(click)="removeTaskFromNote(note, task)"></mat-icon>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<mat-icon
|
||||||
|
class="-ml-0.5 icon-size-5 text-hint"
|
||||||
|
[svgIcon]="'heroicons_solid:plus'"></mat-icon>
|
||||||
|
<input
|
||||||
|
class="w-full ml-1.5 px-1 py-0.5"
|
||||||
|
[placeholder]="'Add task'"
|
||||||
|
(keydown.enter)="addTaskToNote(note, newTaskInput.value); newTaskInput.value = ''"
|
||||||
|
#newTaskInput>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
<!-- Labels -->
|
||||||
|
<ng-container *ngIf="note.labels && note.labels.length">
|
||||||
|
<div class="flex flex-wrap items-center mx-1 mt-6">
|
||||||
|
<ng-container *ngFor="let label of note.labels; trackBy: trackByFn">
|
||||||
|
<div class="flex items-center m-1 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">
|
||||||
|
<div>
|
||||||
|
{{label.title}}
|
||||||
|
</div>
|
||||||
|
<mat-icon
|
||||||
|
class="ml-1 icon-size-4 cursor-pointer"
|
||||||
|
[svgIcon]="'heroicons_solid:x-circle'"
|
||||||
|
(click)="toggleLabelOnNote(note, label)"></mat-icon>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
<!-- Add Actions -->
|
||||||
|
<ng-container *ngIf="!note.id">
|
||||||
|
<div class="flex items-center justify-end mt-4">
|
||||||
|
<!-- Save -->
|
||||||
|
<button
|
||||||
|
mat-flat-button
|
||||||
|
[color]="'primary'"
|
||||||
|
[disabled]="!note.title && !note.content"
|
||||||
|
(click)="createNote(note)">
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
<!-- Edit Actions -->
|
||||||
|
<ng-container *ngIf="note.id">
|
||||||
|
<div class="flex items-center justify-between mt-4">
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<!-- Image -->
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
id="image-file-input"
|
||||||
|
class="absolute h-0 w-0 opacity-0 invisible pointer-events-none"
|
||||||
|
type="file"
|
||||||
|
[multiple]="false"
|
||||||
|
[accept]="'image/jpeg, image/png'"
|
||||||
|
(change)="uploadImage(note, imageFileInput.files)"
|
||||||
|
#imageFileInput>
|
||||||
|
<label
|
||||||
|
class="flex items-center justify-center w-10 h-10 rounded-full cursor-pointer hover:bg-gray-400 hover:bg-opacity-20 dark:hover:bg-black dark:hover:bg-opacity-5"
|
||||||
|
for="image-file-input"
|
||||||
|
matRipple>
|
||||||
|
<mat-icon [svgIcon]="'heroicons_outline:photograph'"></mat-icon>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<!-- Checklist -->
|
||||||
|
<button
|
||||||
|
mat-icon-button
|
||||||
|
(click)="addTasksToNote(note)">
|
||||||
|
<mat-icon [svgIcon]="'heroicons_outline:clipboard-list'"></mat-icon>
|
||||||
|
</button>
|
||||||
|
<!-- Labels -->
|
||||||
|
<button
|
||||||
|
mat-icon-button
|
||||||
|
[matMenuTriggerFor]="labelsMenu">
|
||||||
|
<mat-icon [svgIcon]="'heroicons_outline:tag'"></mat-icon>
|
||||||
|
</button>
|
||||||
|
<mat-menu #labelsMenu="matMenu">
|
||||||
|
<ng-container *ngIf="(labels$ | async) as labels">
|
||||||
|
<ng-container *ngFor="let label of labels">
|
||||||
|
<button
|
||||||
|
mat-menu-item
|
||||||
|
(click)="toggleLabelOnNote(note, label)">
|
||||||
|
<span class="flex items-center">
|
||||||
|
<mat-checkbox
|
||||||
|
class="flex items-center pointer-events-none"
|
||||||
|
[color]="'primary'"
|
||||||
|
[checked]="isNoteHasLabel(note, label)"
|
||||||
|
disableRipple></mat-checkbox>
|
||||||
|
<span class="ml-1 leading-5">{{label.title}}</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</ng-container>
|
||||||
|
</ng-container>
|
||||||
|
</mat-menu>
|
||||||
|
<!-- Archive -->
|
||||||
|
<button
|
||||||
|
mat-icon-button
|
||||||
|
(click)="toggleArchiveOnNote(note)">
|
||||||
|
<mat-icon [svgIcon]="'heroicons_outline:archive'"></mat-icon>
|
||||||
|
</button>
|
||||||
|
<!-- Delete -->
|
||||||
|
<button
|
||||||
|
mat-icon-button
|
||||||
|
(click)="deleteNote(note)">
|
||||||
|
<mat-icon [svgIcon]="'heroicons_outline:trash'"></mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Close -->
|
||||||
|
<button
|
||||||
|
mat-flat-button
|
||||||
|
matDialogClose>
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
</div>
|
346
src/app/modules/admin/apps/notes/details/details.component.ts
Normal file
346
src/app/modules/admin/apps/notes/details/details.component.ts
Normal file
|
@ -0,0 +1,346 @@
|
||||||
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
||||||
|
import { debounceTime, map, switchMap, takeUntil, tap } from 'rxjs/operators';
|
||||||
|
import { Observable, of, Subject } from 'rxjs';
|
||||||
|
import { NotesService } from 'app/modules/admin/apps/notes/notes.service';
|
||||||
|
import { Label, Note, Task } from 'app/modules/admin/apps/notes/notes.types';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector : 'notes-details',
|
||||||
|
templateUrl : './details.component.html',
|
||||||
|
encapsulation : ViewEncapsulation.None,
|
||||||
|
changeDetection: ChangeDetectionStrategy.OnPush
|
||||||
|
})
|
||||||
|
export class NotesDetailsComponent implements OnInit, OnDestroy
|
||||||
|
{
|
||||||
|
note$: Observable<Note>;
|
||||||
|
labels$: Observable<Label[]>;
|
||||||
|
|
||||||
|
noteChanged: Subject<Note> = new Subject<Note>();
|
||||||
|
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constructor
|
||||||
|
*/
|
||||||
|
constructor(
|
||||||
|
private _changeDetectorRef: ChangeDetectorRef,
|
||||||
|
@Inject(MAT_DIALOG_DATA) private _data: { note: Note },
|
||||||
|
private _notesService: NotesService,
|
||||||
|
private _matDialogRef: MatDialogRef<NotesDetailsComponent>
|
||||||
|
)
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Lifecycle hooks
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On init
|
||||||
|
*/
|
||||||
|
ngOnInit(): void
|
||||||
|
{
|
||||||
|
// Edit
|
||||||
|
if ( this._data.note.id )
|
||||||
|
{
|
||||||
|
// Request the data from the server
|
||||||
|
this._notesService.getNoteById(this._data.note.id).subscribe();
|
||||||
|
|
||||||
|
// Get the note
|
||||||
|
this.note$ = this._notesService.note$;
|
||||||
|
}
|
||||||
|
// Add
|
||||||
|
else
|
||||||
|
{
|
||||||
|
// Create an empty note
|
||||||
|
const note = {
|
||||||
|
id : null,
|
||||||
|
title : '',
|
||||||
|
content : '',
|
||||||
|
tasks : null,
|
||||||
|
image : null,
|
||||||
|
reminder : null,
|
||||||
|
labels : [],
|
||||||
|
archived : false,
|
||||||
|
createdAt: null,
|
||||||
|
updatedAt: null
|
||||||
|
};
|
||||||
|
|
||||||
|
this.note$ = of(note);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get the labels
|
||||||
|
this.labels$ = this._notesService.labels$;
|
||||||
|
|
||||||
|
// Subscribe to note updates
|
||||||
|
this.noteChanged
|
||||||
|
.pipe(
|
||||||
|
takeUntil(this._unsubscribeAll),
|
||||||
|
debounceTime(500),
|
||||||
|
switchMap((note) => this._notesService.updateNote(note)))
|
||||||
|
.subscribe(() => {
|
||||||
|
|
||||||
|
// Mark for check
|
||||||
|
this._changeDetectorRef.markForCheck();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On destroy
|
||||||
|
*/
|
||||||
|
ngOnDestroy(): void
|
||||||
|
{
|
||||||
|
// Unsubscribe from all subscriptions
|
||||||
|
this._unsubscribeAll.next();
|
||||||
|
this._unsubscribeAll.complete();
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Public methods
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create a new note
|
||||||
|
*
|
||||||
|
* @param note
|
||||||
|
*/
|
||||||
|
createNote(note: Note): void
|
||||||
|
{
|
||||||
|
this._notesService.createNote(note).pipe(
|
||||||
|
map(() => {
|
||||||
|
// Get the note
|
||||||
|
this.note$ = this._notesService.note$;
|
||||||
|
})).subscribe();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Upload image to given note
|
||||||
|
*
|
||||||
|
* @param note
|
||||||
|
* @param fileList
|
||||||
|
*/
|
||||||
|
uploadImage(note: Note, fileList: FileList): void
|
||||||
|
{
|
||||||
|
// Return if canceled
|
||||||
|
if ( !fileList.length )
|
||||||
|
{
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const allowedTypes = ['image/jpeg', 'image/png'];
|
||||||
|
const file = fileList[0];
|
||||||
|
|
||||||
|
// Return if the file is not allowed
|
||||||
|
if ( !allowedTypes.includes(file.type) )
|
||||||
|
{
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this._readAsDataURL(file).then((data) => {
|
||||||
|
|
||||||
|
// Update the image
|
||||||
|
note.image = data;
|
||||||
|
|
||||||
|
// Update the note
|
||||||
|
this.noteChanged.next(note);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the image on the given note
|
||||||
|
*
|
||||||
|
* @param note
|
||||||
|
*/
|
||||||
|
removeImage(note: Note): void
|
||||||
|
{
|
||||||
|
note.image = null;
|
||||||
|
|
||||||
|
// Update the note
|
||||||
|
this.noteChanged.next(note);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add an empty tasks array to note
|
||||||
|
*
|
||||||
|
* @param note
|
||||||
|
*/
|
||||||
|
addTasksToNote(note): void
|
||||||
|
{
|
||||||
|
if ( !note.tasks )
|
||||||
|
{
|
||||||
|
note.tasks = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add task to the given note
|
||||||
|
*
|
||||||
|
* @param note
|
||||||
|
* @param task
|
||||||
|
*/
|
||||||
|
addTaskToNote(note: Note, task: string): void
|
||||||
|
{
|
||||||
|
if ( task.trim() === '' )
|
||||||
|
{
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add the task
|
||||||
|
this._notesService.addTask(note, task).subscribe();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the given task from given note
|
||||||
|
*
|
||||||
|
* @param note
|
||||||
|
* @param task
|
||||||
|
*/
|
||||||
|
removeTaskFromNote(note: Note, task: Task): void
|
||||||
|
{
|
||||||
|
// Remove the task
|
||||||
|
note.tasks = note.tasks.filter((item) => item.id !== task.id);
|
||||||
|
|
||||||
|
// Update the note
|
||||||
|
this.noteChanged.next(note);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update the given task on the given note
|
||||||
|
*
|
||||||
|
* @param note
|
||||||
|
* @param task
|
||||||
|
*/
|
||||||
|
updateTaskOnNote(note: Note, task: Task): void
|
||||||
|
{
|
||||||
|
// If the task is already available on the item
|
||||||
|
if ( task.id )
|
||||||
|
{
|
||||||
|
// Update the note
|
||||||
|
this.noteChanged.next(note);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Is the given note has the given label
|
||||||
|
*
|
||||||
|
* @param note
|
||||||
|
* @param label
|
||||||
|
*/
|
||||||
|
isNoteHasLabel(note: Note, label: Label): boolean
|
||||||
|
{
|
||||||
|
return !!note.labels.find((item) => item.id === label.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggle the given label on the given note
|
||||||
|
*
|
||||||
|
* @param note
|
||||||
|
* @param label
|
||||||
|
*/
|
||||||
|
toggleLabelOnNote(note: Note, label: Label): void
|
||||||
|
{
|
||||||
|
// If the note already has the label
|
||||||
|
if ( this.isNoteHasLabel(note, label) )
|
||||||
|
{
|
||||||
|
note.labels = note.labels.filter((item) => item.id !== label.id);
|
||||||
|
}
|
||||||
|
// Otherwise
|
||||||
|
else
|
||||||
|
{
|
||||||
|
note.labels.push(label);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update the note
|
||||||
|
this.noteChanged.next(note);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggle archived status on the given note
|
||||||
|
*
|
||||||
|
* @param note
|
||||||
|
*/
|
||||||
|
toggleArchiveOnNote(note: Note): void
|
||||||
|
{
|
||||||
|
note.archived = !note.archived;
|
||||||
|
|
||||||
|
// Update the note
|
||||||
|
this.noteChanged.next(note);
|
||||||
|
|
||||||
|
// Close the dialog
|
||||||
|
this._matDialogRef.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update the note details
|
||||||
|
*
|
||||||
|
* @param note
|
||||||
|
*/
|
||||||
|
updateNoteDetails(note: Note): void
|
||||||
|
{
|
||||||
|
this.noteChanged.next(note);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Delete the given note
|
||||||
|
*
|
||||||
|
* @param note
|
||||||
|
*/
|
||||||
|
deleteNote(note: Note): void
|
||||||
|
{
|
||||||
|
this._notesService.deleteNote(note)
|
||||||
|
.subscribe((isDeleted) => {
|
||||||
|
|
||||||
|
// Return if the note wasn't deleted...
|
||||||
|
if ( !isDeleted )
|
||||||
|
{
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close the dialog
|
||||||
|
this._matDialogRef.close();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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 = () => {
|
||||||
|
resolve(reader.result);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Reject the promise on error
|
||||||
|
reader.onerror = (e) => {
|
||||||
|
reject(e);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Read the file as the
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,54 @@
|
||||||
|
<div class="flex flex-col flex-auto w-80 min-w-80 p-2 md:p-4">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="text-2xl font-semibold">Edit labels</div>
|
||||||
|
<button
|
||||||
|
matDialogClose
|
||||||
|
mat-icon-button>
|
||||||
|
<mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- New label -->
|
||||||
|
<mat-form-field
|
||||||
|
class="fuse-mat-dense w-full mt-8"
|
||||||
|
[floatLabel]="'always'">
|
||||||
|
<input
|
||||||
|
name="new-label"
|
||||||
|
[autocomplete]="'off'"
|
||||||
|
[placeholder]="'Create new label'"
|
||||||
|
matInput
|
||||||
|
#newLabelInput>
|
||||||
|
<button
|
||||||
|
[class.invisible]="newLabelInput.value.trim() === ''"
|
||||||
|
mat-icon-button
|
||||||
|
(click)="addLabel(newLabelInput.value); newLabelInput.value = ''"
|
||||||
|
matSuffix>
|
||||||
|
<mat-icon
|
||||||
|
class="icon-size-5"
|
||||||
|
[svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
|
||||||
|
</button>
|
||||||
|
</mat-form-field>
|
||||||
|
<!-- Labels -->
|
||||||
|
<div class="flex flex-col mt-4">
|
||||||
|
<ng-container *ngIf="(labels$ | async) as labels">
|
||||||
|
<ng-container *ngFor="let label of labels; trackBy: trackByFn">
|
||||||
|
<mat-form-field class="fuse-mat-dense w-full">
|
||||||
|
<button
|
||||||
|
mat-icon-button
|
||||||
|
matPrefix
|
||||||
|
(click)="deleteLabel(label.id)">
|
||||||
|
<mat-icon
|
||||||
|
class="icon-size-5"
|
||||||
|
[svgIcon]="'heroicons_solid:trash'"></mat-icon>
|
||||||
|
</button>
|
||||||
|
<input
|
||||||
|
[autocomplete]="'off'"
|
||||||
|
[(ngModel)]="label.title"
|
||||||
|
(input)="updateLabel(label)"
|
||||||
|
required
|
||||||
|
matInput>
|
||||||
|
</mat-form-field>
|
||||||
|
</ng-container>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
</div>
|
112
src/app/modules/admin/apps/notes/labels/labels.component.ts
Normal file
112
src/app/modules/admin/apps/notes/labels/labels.component.ts
Normal file
|
@ -0,0 +1,112 @@
|
||||||
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { NotesService } from 'app/modules/admin/apps/notes/notes.service';
|
||||||
|
import { Label } from 'app/modules/admin/apps/notes/notes.types';
|
||||||
|
import { debounceTime, filter, switchMap, takeUntil } from 'rxjs/operators';
|
||||||
|
import { Observable, Subject } from 'rxjs';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector : 'notes-labels',
|
||||||
|
templateUrl : './labels.component.html',
|
||||||
|
encapsulation : ViewEncapsulation.None,
|
||||||
|
changeDetection: ChangeDetectionStrategy.OnPush
|
||||||
|
})
|
||||||
|
export class NotesLabelsComponent implements OnInit, OnDestroy
|
||||||
|
{
|
||||||
|
labels$: Observable<Label[]>;
|
||||||
|
|
||||||
|
labelChanged: Subject<Label> = new Subject<Label>();
|
||||||
|
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constructor
|
||||||
|
*/
|
||||||
|
constructor(
|
||||||
|
private _changeDetectorRef: ChangeDetectorRef,
|
||||||
|
private _notesService: NotesService
|
||||||
|
)
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Lifecycle hooks
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On init
|
||||||
|
*/
|
||||||
|
ngOnInit(): void
|
||||||
|
{
|
||||||
|
// Get the labels
|
||||||
|
this.labels$ = this._notesService.labels$;
|
||||||
|
|
||||||
|
// Subscribe to label updates
|
||||||
|
this.labelChanged
|
||||||
|
.pipe(
|
||||||
|
takeUntil(this._unsubscribeAll),
|
||||||
|
debounceTime(500),
|
||||||
|
filter((label) => label.title.trim() !== ''),
|
||||||
|
switchMap((label) => this._notesService.updateLabel(label)))
|
||||||
|
.subscribe(() => {
|
||||||
|
|
||||||
|
// Mark for check
|
||||||
|
this._changeDetectorRef.markForCheck();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On destroy
|
||||||
|
*/
|
||||||
|
ngOnDestroy(): void
|
||||||
|
{
|
||||||
|
// Unsubscribe from all subscriptions
|
||||||
|
this._unsubscribeAll.next();
|
||||||
|
this._unsubscribeAll.complete();
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Public methods
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add label
|
||||||
|
*
|
||||||
|
* @param title
|
||||||
|
*/
|
||||||
|
addLabel(title: string): void
|
||||||
|
{
|
||||||
|
this._notesService.addLabel(title).subscribe();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update label
|
||||||
|
*/
|
||||||
|
updateLabel(label: Label): void
|
||||||
|
{
|
||||||
|
this.labelChanged.next(label);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Delete label
|
||||||
|
*
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
deleteLabel(id: string): void
|
||||||
|
{
|
||||||
|
this._notesService.deleteLabel(id).subscribe(() => {
|
||||||
|
|
||||||
|
// Mark for check
|
||||||
|
this._changeDetectorRef.markForCheck();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Track by function for ngFor loops
|
||||||
|
*
|
||||||
|
* @param index
|
||||||
|
* @param item
|
||||||
|
*/
|
||||||
|
trackByFn(index: number, item: any): any
|
||||||
|
{
|
||||||
|
return item.id || index;
|
||||||
|
}
|
||||||
|
}
|
221
src/app/modules/admin/apps/notes/list/list.component.html
Normal file
221
src/app/modules/admin/apps/notes/list/list.component.html
Normal file
|
@ -0,0 +1,221 @@
|
||||||
|
<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden">
|
||||||
|
|
||||||
|
<mat-drawer-container class="flex-auto h-full bg-card dark:bg-transparent">
|
||||||
|
|
||||||
|
<!-- Drawer -->
|
||||||
|
<mat-drawer
|
||||||
|
class="w-2/3 sm:w-72 lg:w-56 border-r-0 bg-default"
|
||||||
|
[mode]="drawerMode"
|
||||||
|
[opened]="drawerOpened"
|
||||||
|
#drawer>
|
||||||
|
<div class="p-6 lg:py-8 lg:pl-4 lg:pr-0">
|
||||||
|
<!-- Filters -->
|
||||||
|
<div class="space-y-2">
|
||||||
|
<!-- Notes -->
|
||||||
|
<div
|
||||||
|
class="relative flex items-center py-2 px-4 font-medium rounded-full cursor-pointer"
|
||||||
|
[ngClass]="{'bg-gray-200 dark:bg-gray-700 text-primary dark:text-primary-400': filterStatus === 'notes',
|
||||||
|
'text-hint hover:bg-hover': filterStatus !== 'notes'}"
|
||||||
|
(click)="resetFilter()"
|
||||||
|
matRipple
|
||||||
|
[matRippleDisabled]="filterStatus === 'notes'">
|
||||||
|
<mat-icon
|
||||||
|
class="text-current"
|
||||||
|
[svgIcon]="'heroicons_outline:pencil-alt'"></mat-icon>
|
||||||
|
<div class="ml-3 leading-5 select-none text-default">Notes</div>
|
||||||
|
</div>
|
||||||
|
<!-- Archive -->
|
||||||
|
<div
|
||||||
|
class="relative flex items-center py-2 px-4 font-medium rounded-full cursor-pointer"
|
||||||
|
[ngClass]="{'bg-gray-200 dark:bg-gray-700 text-primary dark:text-primary-400': filterStatus === 'archived',
|
||||||
|
'text-hint hover:bg-hover': filterStatus !== 'archived'}"
|
||||||
|
(click)="filterByArchived()"
|
||||||
|
matRipple
|
||||||
|
[matRippleDisabled]="filterStatus === 'archived'">
|
||||||
|
<mat-icon
|
||||||
|
class="text-current"
|
||||||
|
[svgIcon]="'heroicons_outline:archive'"></mat-icon>
|
||||||
|
<div class="ml-3 leading-5 select-none text-default">Archive</div>
|
||||||
|
</div>
|
||||||
|
<!-- Labels -->
|
||||||
|
<ng-container *ngIf="(labels$ | async) as labels">
|
||||||
|
<ng-container *ngFor="let label of labels; trackBy: trackByFn">
|
||||||
|
<div
|
||||||
|
class="relative flex items-center py-2 px-4 font-medium rounded-full cursor-pointer"
|
||||||
|
[ngClass]="{'bg-gray-200 dark:bg-gray-700 text-primary dark:text-primary-400': 'label:' + label.id === filterStatus,
|
||||||
|
'text-hint hover:bg-hover': 'label:' + label.id !== filterStatus}"
|
||||||
|
(click)="filterByLabel(label.id)"
|
||||||
|
matRipple
|
||||||
|
[matRippleDisabled]="'label:' + label.id === filterStatus">
|
||||||
|
<mat-icon
|
||||||
|
class="text-current"
|
||||||
|
[svgIcon]="'heroicons_outline:tag'"></mat-icon>
|
||||||
|
<div class="ml-3 leading-5 select-none text-default">{{label.title}}</div>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</ng-container>
|
||||||
|
<!-- Edit Labels -->
|
||||||
|
<div
|
||||||
|
class="relative flex items-center py-2 px-4 font-medium rounded-full cursor-pointer hover:bg-hover"
|
||||||
|
(click)="openEditLabelsDialog()"
|
||||||
|
matRipple>
|
||||||
|
<mat-icon
|
||||||
|
class="text-hint"
|
||||||
|
[svgIcon]="'heroicons_outline:pencil'"></mat-icon>
|
||||||
|
<div class="ml-3 leading-5 select-none">Edit labels</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</mat-drawer>
|
||||||
|
|
||||||
|
<mat-drawer-content class="flex flex-col bg-gray-100 dark:bg-transparent">
|
||||||
|
|
||||||
|
<!-- Main -->
|
||||||
|
<div class="flex flex-col flex-auto p-6 md:p-8">
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex items-center flex-auto">
|
||||||
|
<button
|
||||||
|
class="flex lg:hidden -ml-2"
|
||||||
|
mat-icon-button
|
||||||
|
(click)="drawer.toggle()">
|
||||||
|
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||||
|
</button>
|
||||||
|
<mat-form-field class="fuse-mat-rounded fuse-mat-dense fuse-mat-no-subscript flex-auto ml-4 lg:ml-0">
|
||||||
|
<mat-icon
|
||||||
|
class="icon-size-5"
|
||||||
|
[svgIcon]="'heroicons_solid:search'"
|
||||||
|
matPrefix></mat-icon>
|
||||||
|
<input
|
||||||
|
matInput
|
||||||
|
[autocomplete]="'off'"
|
||||||
|
[placeholder]="'Search notes'"
|
||||||
|
(input)="filterByQuery(searchInput.value)"
|
||||||
|
#searchInput>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
<!-- New note -->
|
||||||
|
<button
|
||||||
|
class="ml-4 px-1 sm:px-4 min-w-10"
|
||||||
|
mat-flat-button
|
||||||
|
[color]="'primary'"
|
||||||
|
(click)="addNewNote()">
|
||||||
|
<mat-icon
|
||||||
|
class="icon-size-5"
|
||||||
|
[svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
|
||||||
|
<span class="hidden sm:inline-block ml-2">New note</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Notes -->
|
||||||
|
<ng-container *ngIf="(notes$ | async) as notes; else loading">
|
||||||
|
<ng-container *ngIf="notes.length; else noNotes">
|
||||||
|
|
||||||
|
<!-- Masonry layout -->
|
||||||
|
<fuse-masonry
|
||||||
|
class="-mx-2 mt-8"
|
||||||
|
[items]="notes"
|
||||||
|
[columns]="masonryColumns"
|
||||||
|
[columnsTemplate]="columnsTemplate">
|
||||||
|
<!-- Columns template -->
|
||||||
|
<ng-template
|
||||||
|
#columnsTemplate
|
||||||
|
let-columns>
|
||||||
|
<!-- Columns -->
|
||||||
|
<ng-container *ngFor="let column of columns; trackBy: trackByFn">
|
||||||
|
<!-- Column -->
|
||||||
|
<div class="flex-1 px-2 space-y-4">
|
||||||
|
<ng-container *ngFor="let note of column.items; trackBy: trackByFn">
|
||||||
|
<!-- Note -->
|
||||||
|
<div
|
||||||
|
class="flex flex-col shadow rounded-2xl overflow-hidden cursor-pointer bg-card"
|
||||||
|
(click)="openNoteDialog(note)">
|
||||||
|
<!-- Image -->
|
||||||
|
<ng-container *ngIf="note.image">
|
||||||
|
<img
|
||||||
|
class="w-full object-cover"
|
||||||
|
[src]="note.image">
|
||||||
|
</ng-container>
|
||||||
|
<div class="flex flex-auto flex-col p-6 space-y-4">
|
||||||
|
<!-- Title -->
|
||||||
|
<ng-container *ngIf="note.title">
|
||||||
|
<div class="font-semibold line-clamp-3">
|
||||||
|
{{note.title}}
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
<!-- Content -->
|
||||||
|
<ng-container *ngIf="note.content">
|
||||||
|
<div [class.text-xl]="note.content.length < 70">
|
||||||
|
{{note.content}}
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
<!-- Tasks -->
|
||||||
|
<ng-container *ngIf="note.tasks">
|
||||||
|
<div class="space-y-1.5">
|
||||||
|
<ng-container *ngFor="let task of note.tasks; trackBy: trackByFn">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<ng-container *ngIf="!task.completed">
|
||||||
|
<div class="flex items-center justify-center w-5 h-5">
|
||||||
|
<div class="w-4 h-4 rounded-full border-2"></div>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container *ngIf="task.completed">
|
||||||
|
<mat-icon
|
||||||
|
class="text-hint icon-size-5"
|
||||||
|
[svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
|
||||||
|
</ng-container>
|
||||||
|
<div
|
||||||
|
class="ml-1.5 leading-5"
|
||||||
|
[ngClass]="{'text-secondary line-through': task.completed}">
|
||||||
|
{{task.content}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
<!-- Labels -->
|
||||||
|
<ng-container *ngIf="note.labels">
|
||||||
|
<div class="flex flex-wrap items-center -m-1">
|
||||||
|
<ng-container *ngFor="let label of note.labels; trackBy: trackByFn">
|
||||||
|
<div class="m-1 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>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</ng-template>
|
||||||
|
</fuse-masonry>
|
||||||
|
|
||||||
|
</ng-container>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Loading template -->
|
||||||
|
<ng-template #loading>
|
||||||
|
<div class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
|
||||||
|
<div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">Loading...</div>
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
<!-- No notes template -->
|
||||||
|
<ng-template #noNotes>
|
||||||
|
<div class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
|
||||||
|
<mat-icon
|
||||||
|
class="icon-size-24"
|
||||||
|
[svgIcon]="'iconsmind:file_hide'"></mat-icon>
|
||||||
|
<div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">There are no notes!</div>
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</mat-drawer-content>
|
||||||
|
|
||||||
|
</mat-drawer-container>
|
||||||
|
|
||||||
|
</div>
|
255
src/app/modules/admin/apps/notes/list/list.component.ts
Normal file
255
src/app/modules/admin/apps/notes/list/list.component.ts
Normal file
|
@ -0,0 +1,255 @@
|
||||||
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { MatDialog } from '@angular/material/dialog';
|
||||||
|
import { BehaviorSubject, combineLatest, Observable, Subject } from 'rxjs';
|
||||||
|
import { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';
|
||||||
|
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||||
|
import { NotesDetailsComponent } from 'app/modules/admin/apps/notes/details/details.component';
|
||||||
|
import { NotesLabelsComponent } from 'app/modules/admin/apps/notes/labels/labels.component';
|
||||||
|
import { NotesService } from 'app/modules/admin/apps/notes/notes.service';
|
||||||
|
import { Label, Note } from 'app/modules/admin/apps/notes/notes.types';
|
||||||
|
import { cloneDeep } from 'lodash-es';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector : 'notes-list',
|
||||||
|
templateUrl : './list.component.html',
|
||||||
|
encapsulation : ViewEncapsulation.None,
|
||||||
|
changeDetection: ChangeDetectionStrategy.OnPush
|
||||||
|
})
|
||||||
|
export class NotesListComponent implements OnInit, OnDestroy
|
||||||
|
{
|
||||||
|
labels$: Observable<Label[]>;
|
||||||
|
notes$: Observable<Note[]>;
|
||||||
|
|
||||||
|
drawerMode: 'over' | 'side' = 'side';
|
||||||
|
drawerOpened: boolean = true;
|
||||||
|
filter$: BehaviorSubject<string> = new BehaviorSubject('notes');
|
||||||
|
searchQuery$: BehaviorSubject<string> = new BehaviorSubject(null);
|
||||||
|
masonryColumns: number = 4;
|
||||||
|
|
||||||
|
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constructor
|
||||||
|
*/
|
||||||
|
constructor(
|
||||||
|
private _changeDetectorRef: ChangeDetectorRef,
|
||||||
|
private _fuseMediaWatcherService: FuseMediaWatcherService,
|
||||||
|
private _matDialog: MatDialog,
|
||||||
|
private _notesService: NotesService
|
||||||
|
)
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Accessors
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the filter status
|
||||||
|
*/
|
||||||
|
get filterStatus(): string
|
||||||
|
{
|
||||||
|
return this.filter$.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Lifecycle hooks
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On init
|
||||||
|
*/
|
||||||
|
ngOnInit(): void
|
||||||
|
{
|
||||||
|
// Request the data from the server
|
||||||
|
this._notesService.getLabels().subscribe();
|
||||||
|
this._notesService.getNotes().subscribe();
|
||||||
|
|
||||||
|
// Get labels
|
||||||
|
this.labels$ = this._notesService.labels$;
|
||||||
|
|
||||||
|
// Get notes
|
||||||
|
this.notes$ = combineLatest([this._notesService.notes$, this.filter$, this.searchQuery$]).pipe(
|
||||||
|
distinctUntilChanged(),
|
||||||
|
map(([notes, filter, searchQuery]) => {
|
||||||
|
|
||||||
|
if ( !notes || !notes.length )
|
||||||
|
{
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Store the filtered notes
|
||||||
|
let filteredNotes = notes;
|
||||||
|
|
||||||
|
// Filter by query
|
||||||
|
if ( searchQuery )
|
||||||
|
{
|
||||||
|
searchQuery = searchQuery.trim().toLowerCase();
|
||||||
|
filteredNotes = filteredNotes.filter((note) => note.title.toLowerCase().includes(searchQuery) || note.content.toLowerCase().includes(searchQuery));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show all
|
||||||
|
if ( filter === 'notes' )
|
||||||
|
{
|
||||||
|
// Do nothing
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show archive
|
||||||
|
const isArchive = filter === 'archived';
|
||||||
|
filteredNotes = filteredNotes.filter((note) => note.archived === isArchive);
|
||||||
|
|
||||||
|
// Filter by label
|
||||||
|
if ( filter.startsWith('label:') )
|
||||||
|
{
|
||||||
|
const labelId = filter.split(':')[1];
|
||||||
|
filteredNotes = filteredNotes.filter((note) => !!note.labels.find((item) => item.id === labelId));
|
||||||
|
}
|
||||||
|
|
||||||
|
return filteredNotes;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
// Subscribe to media changes
|
||||||
|
this._fuseMediaWatcherService.onMediaChange$
|
||||||
|
.pipe(takeUntil(this._unsubscribeAll))
|
||||||
|
.subscribe(({matchingAliases}) => {
|
||||||
|
|
||||||
|
// Set the drawerMode and drawerOpened if the given breakpoint is active
|
||||||
|
if ( matchingAliases.includes('lg') )
|
||||||
|
{
|
||||||
|
this.drawerMode = 'side';
|
||||||
|
this.drawerOpened = true;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
this.drawerMode = 'over';
|
||||||
|
this.drawerOpened = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set the masonry columns
|
||||||
|
//
|
||||||
|
// This if block structured in a way so that only the
|
||||||
|
// biggest matching alias will be used to set the column
|
||||||
|
// count.
|
||||||
|
if ( matchingAliases.includes('xl') )
|
||||||
|
{
|
||||||
|
this.masonryColumns = 5;
|
||||||
|
}
|
||||||
|
else if ( matchingAliases.includes('lg') )
|
||||||
|
{
|
||||||
|
this.masonryColumns = 4;
|
||||||
|
}
|
||||||
|
else if ( matchingAliases.includes('md') )
|
||||||
|
{
|
||||||
|
this.masonryColumns = 3;
|
||||||
|
}
|
||||||
|
else if ( matchingAliases.includes('sm') )
|
||||||
|
{
|
||||||
|
this.masonryColumns = 2;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
this.masonryColumns = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mark for check
|
||||||
|
this._changeDetectorRef.markForCheck();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On destroy
|
||||||
|
*/
|
||||||
|
ngOnDestroy(): void
|
||||||
|
{
|
||||||
|
// Unsubscribe from all subscriptions
|
||||||
|
this._unsubscribeAll.next();
|
||||||
|
this._unsubscribeAll.complete();
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Public methods
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add a new note
|
||||||
|
*/
|
||||||
|
addNewNote(): void
|
||||||
|
{
|
||||||
|
this._matDialog.open(NotesDetailsComponent, {
|
||||||
|
autoFocus: false,
|
||||||
|
data : {
|
||||||
|
note: {}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Open the edit labels dialog
|
||||||
|
*/
|
||||||
|
openEditLabelsDialog(): void
|
||||||
|
{
|
||||||
|
this._matDialog.open(NotesLabelsComponent, {autoFocus: false});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Open the note dialog
|
||||||
|
*/
|
||||||
|
openNoteDialog(note: Note): void
|
||||||
|
{
|
||||||
|
this._matDialog.open(NotesDetailsComponent, {
|
||||||
|
autoFocus: false,
|
||||||
|
data : {
|
||||||
|
note: cloneDeep(note)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Filter by archived
|
||||||
|
*/
|
||||||
|
filterByArchived(): void
|
||||||
|
{
|
||||||
|
this.filter$.next('archived');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Filter by label
|
||||||
|
*
|
||||||
|
* @param labelId
|
||||||
|
*/
|
||||||
|
filterByLabel(labelId: string): void
|
||||||
|
{
|
||||||
|
const filterValue = `label:${labelId}`;
|
||||||
|
this.filter$.next(filterValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Filter by query
|
||||||
|
*
|
||||||
|
* @param query
|
||||||
|
*/
|
||||||
|
filterByQuery(query: string): void
|
||||||
|
{
|
||||||
|
this.searchQuery$.next(query);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reset filter
|
||||||
|
*/
|
||||||
|
resetFilter(): void
|
||||||
|
{
|
||||||
|
this.filter$.next('notes');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Track by function for ngFor loops
|
||||||
|
*
|
||||||
|
* @param index
|
||||||
|
* @param item
|
||||||
|
*/
|
||||||
|
trackByFn(index: number, item: any): any
|
||||||
|
{
|
||||||
|
return item.id || index;
|
||||||
|
}
|
||||||
|
}
|
1
src/app/modules/admin/apps/notes/notes.component.html
Normal file
1
src/app/modules/admin/apps/notes/notes.component.html
Normal file
|
@ -0,0 +1 @@
|
||||||
|
<router-outlet></router-outlet>
|
17
src/app/modules/admin/apps/notes/notes.component.ts
Normal file
17
src/app/modules/admin/apps/notes/notes.component.ts
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector : 'notes',
|
||||||
|
templateUrl : './notes.component.html',
|
||||||
|
encapsulation : ViewEncapsulation.None,
|
||||||
|
changeDetection: ChangeDetectionStrategy.OnPush
|
||||||
|
})
|
||||||
|
export class NotesComponent
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Constructor
|
||||||
|
*/
|
||||||
|
constructor()
|
||||||
|
{
|
||||||
|
}
|
||||||
|
}
|
46
src/app/modules/admin/apps/notes/notes.module.ts
Normal file
46
src/app/modules/admin/apps/notes/notes.module.ts
Normal file
|
@ -0,0 +1,46 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { RouterModule } from '@angular/router';
|
||||||
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||||
|
import { MatDialogModule } from '@angular/material/dialog';
|
||||||
|
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 { MatRippleModule } from '@angular/material/core';
|
||||||
|
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||||
|
import { FuseAutogrowModule } from '@fuse/directives/autogrow';
|
||||||
|
import { FuseMasonryModule } from '@fuse/components/masonry/masonry.module';
|
||||||
|
import { SharedModule } from 'app/shared/shared.module';
|
||||||
|
import { NotesComponent } from 'app/modules/admin/apps/notes/notes.component';
|
||||||
|
import { NotesDetailsComponent } from 'app/modules/admin/apps/notes/details/details.component';
|
||||||
|
import { NotesListComponent } from 'app/modules/admin/apps/notes/list/list.component';
|
||||||
|
import { NotesLabelsComponent } from 'app/modules/admin/apps/notes/labels/labels.component';
|
||||||
|
import { notesRoutes } from 'app/modules/admin/apps/notes/notes.routing';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [
|
||||||
|
NotesComponent,
|
||||||
|
NotesDetailsComponent,
|
||||||
|
NotesListComponent,
|
||||||
|
NotesLabelsComponent
|
||||||
|
],
|
||||||
|
imports : [
|
||||||
|
RouterModule.forChild(notesRoutes),
|
||||||
|
MatButtonModule,
|
||||||
|
MatCheckboxModule,
|
||||||
|
MatDialogModule,
|
||||||
|
MatFormFieldModule,
|
||||||
|
MatIconModule,
|
||||||
|
MatInputModule,
|
||||||
|
MatMenuModule,
|
||||||
|
MatRippleModule,
|
||||||
|
MatSidenavModule,
|
||||||
|
FuseAutogrowModule,
|
||||||
|
FuseMasonryModule,
|
||||||
|
SharedModule
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class NotesModule
|
||||||
|
{
|
||||||
|
}
|
16
src/app/modules/admin/apps/notes/notes.routing.ts
Normal file
16
src/app/modules/admin/apps/notes/notes.routing.ts
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
import { Route } from '@angular/router';
|
||||||
|
import { NotesComponent } from 'app/modules/admin/apps/notes/notes.component';
|
||||||
|
import { NotesListComponent } from 'app/modules/admin/apps/notes/list/list.component';
|
||||||
|
|
||||||
|
export const notesRoutes: Route[] = [
|
||||||
|
{
|
||||||
|
path : '',
|
||||||
|
component: NotesComponent,
|
||||||
|
children : [
|
||||||
|
{
|
||||||
|
path : '',
|
||||||
|
component: NotesListComponent
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
239
src/app/modules/admin/apps/notes/notes.service.ts
Normal file
239
src/app/modules/admin/apps/notes/notes.service.ts
Normal file
|
@ -0,0 +1,239 @@
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { HttpClient } from '@angular/common/http';
|
||||||
|
import { BehaviorSubject, concat, Observable, of, throwError } from 'rxjs';
|
||||||
|
import { map, switchMap, take, tap } from 'rxjs/operators';
|
||||||
|
import { Label, Note, Task } from 'app/modules/admin/apps/notes/notes.types';
|
||||||
|
import { cloneDeep } from 'lodash-es';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class NotesService
|
||||||
|
{
|
||||||
|
// Private
|
||||||
|
private _labels: BehaviorSubject<Label[] | null> = new BehaviorSubject(null);
|
||||||
|
private _note: BehaviorSubject<Note | null> = new BehaviorSubject(null);
|
||||||
|
private _notes: BehaviorSubject<Note[] | null> = new BehaviorSubject(null);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constructor
|
||||||
|
*/
|
||||||
|
constructor(private _httpClient: HttpClient)
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Accessors
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Getter for labels
|
||||||
|
*/
|
||||||
|
get labels$(): Observable<Label[]>
|
||||||
|
{
|
||||||
|
return this._labels.asObservable();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Getter for notes
|
||||||
|
*/
|
||||||
|
get notes$(): Observable<Note[]>
|
||||||
|
{
|
||||||
|
return this._notes.asObservable();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Getter for note
|
||||||
|
*/
|
||||||
|
get note$(): Observable<Note>
|
||||||
|
{
|
||||||
|
return this._note.asObservable();
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Public methods
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get labels
|
||||||
|
*/
|
||||||
|
getLabels(): Observable<Label[]>
|
||||||
|
{
|
||||||
|
return this._httpClient.get<Label[]>('api/apps/notes/labels').pipe(
|
||||||
|
tap((response: Label[]) => {
|
||||||
|
this._labels.next(response);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add label
|
||||||
|
*
|
||||||
|
* @param title
|
||||||
|
*/
|
||||||
|
addLabel(title: string): Observable<Label[]>
|
||||||
|
{
|
||||||
|
return this._httpClient.post<Label[]>('api/apps/notes/labels', {title}).pipe(
|
||||||
|
tap((labels) => {
|
||||||
|
|
||||||
|
// Update the labels
|
||||||
|
this._labels.next(labels);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update label
|
||||||
|
*
|
||||||
|
* @param label
|
||||||
|
*/
|
||||||
|
updateLabel(label: Label): Observable<Label[]>
|
||||||
|
{
|
||||||
|
return this._httpClient.patch<Label[]>('api/apps/notes/labels', {label}).pipe(
|
||||||
|
tap((labels) => {
|
||||||
|
|
||||||
|
// Update the notes
|
||||||
|
this.getNotes().subscribe();
|
||||||
|
|
||||||
|
// Update the labels
|
||||||
|
this._labels.next(labels);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Delete a label
|
||||||
|
*
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
deleteLabel(id: string): Observable<Label[]>
|
||||||
|
{
|
||||||
|
return this._httpClient.delete<Label[]>('api/apps/notes/labels', {params: {id}}).pipe(
|
||||||
|
tap((labels) => {
|
||||||
|
|
||||||
|
// Update the notes
|
||||||
|
this.getNotes().subscribe();
|
||||||
|
|
||||||
|
// Update the labels
|
||||||
|
this._labels.next(labels);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get notes
|
||||||
|
*/
|
||||||
|
getNotes(): Observable<Note[]>
|
||||||
|
{
|
||||||
|
return this._httpClient.get<Note[]>('api/apps/notes/all').pipe(
|
||||||
|
tap((response: Note[]) => {
|
||||||
|
this._notes.next(response);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get note by id
|
||||||
|
*/
|
||||||
|
getNoteById(id: string): Observable<Note>
|
||||||
|
{
|
||||||
|
return this._notes.pipe(
|
||||||
|
take(1),
|
||||||
|
map((notes) => {
|
||||||
|
|
||||||
|
// Find within the folders and files
|
||||||
|
const note = notes.find(value => value.id === id) || null;
|
||||||
|
|
||||||
|
// Update the note
|
||||||
|
this._note.next(note);
|
||||||
|
|
||||||
|
// Return the note
|
||||||
|
return note;
|
||||||
|
}),
|
||||||
|
switchMap((note) => {
|
||||||
|
|
||||||
|
if ( !note )
|
||||||
|
{
|
||||||
|
return throwError('Could not found the note with id of ' + id + '!');
|
||||||
|
}
|
||||||
|
|
||||||
|
return of(note);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add task to the given note
|
||||||
|
*
|
||||||
|
* @param note
|
||||||
|
* @param task
|
||||||
|
*/
|
||||||
|
addTask(note: Note, task: string): Observable<Note>
|
||||||
|
{
|
||||||
|
return this._httpClient.post<Note>('api/apps/notes/tasks', {
|
||||||
|
note,
|
||||||
|
task
|
||||||
|
}).pipe(switchMap(() => this.getNotes().pipe(
|
||||||
|
switchMap(() => this.getNoteById(note.id))
|
||||||
|
)));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create note
|
||||||
|
*
|
||||||
|
* @param note
|
||||||
|
*/
|
||||||
|
createNote(note: Note): Observable<Note>
|
||||||
|
{
|
||||||
|
return this._httpClient.post<Note>('api/apps/notes', {note}).pipe(
|
||||||
|
switchMap((response) => this.getNotes().pipe(
|
||||||
|
switchMap(() => this.getNoteById(response.id).pipe(
|
||||||
|
map(() => response)
|
||||||
|
))
|
||||||
|
)));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update the note
|
||||||
|
*
|
||||||
|
* @param note
|
||||||
|
*/
|
||||||
|
updateNote(note: Note): Observable<Note>
|
||||||
|
{
|
||||||
|
// Clone the note to prevent accidental reference based updates
|
||||||
|
const updatedNote = cloneDeep(note) as any;
|
||||||
|
|
||||||
|
// Before sending the note to the server, handle the labels
|
||||||
|
if ( updatedNote.labels.length )
|
||||||
|
{
|
||||||
|
updatedNote.labels = updatedNote.labels.map((label) => label.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
return this._httpClient.patch<Note>('api/apps/notes', {updatedNote}).pipe(
|
||||||
|
tap((response) => {
|
||||||
|
|
||||||
|
// Update the notes
|
||||||
|
this.getNotes().subscribe();
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Delete the note
|
||||||
|
*
|
||||||
|
* @param note
|
||||||
|
*/
|
||||||
|
deleteNote(note: Note): Observable<boolean>
|
||||||
|
{
|
||||||
|
return this._httpClient.delete<boolean>('api/apps/notes', {params: {id: note.id}}).pipe(
|
||||||
|
map((isDeleted: boolean) => {
|
||||||
|
|
||||||
|
// Update the notes
|
||||||
|
this.getNotes().subscribe();
|
||||||
|
|
||||||
|
// Return the deleted status
|
||||||
|
return isDeleted;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
25
src/app/modules/admin/apps/notes/notes.types.ts
Normal file
25
src/app/modules/admin/apps/notes/notes.types.ts
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
export interface Task
|
||||||
|
{
|
||||||
|
id?: string;
|
||||||
|
content?: string;
|
||||||
|
completed?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Label
|
||||||
|
{
|
||||||
|
id?: string;
|
||||||
|
title?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Note
|
||||||
|
{
|
||||||
|
id?: string;
|
||||||
|
title?: string;
|
||||||
|
content?: string;
|
||||||
|
tasks?: Task[];
|
||||||
|
image?: string | null;
|
||||||
|
labels?: Label[];
|
||||||
|
archived?: boolean;
|
||||||
|
createdAt?: string;
|
||||||
|
updatedAt?: string | null;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user