purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2024-10-30 01:08:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

(apps/notes) New version of the Notes app

Browse Source
This commit is contained in:
sercan 2021-05-06 17:01:14 +03:00
parent 5ac7002a98
commit 77014174e8
17 changed files with 2103 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/app.routing.ts
View File

@ -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: 'help-center', loadChildren: () => import('app/modules/admin/apps/help-center/help-center.module').then(m => m.HelpCenterModule)},
{path: 'mailbox', loadChildren: () => import('app/modules/admin/apps/mailbox/mailbox.module').then(m => m.MailboxModule)},
{path: 'notes', loadChildren: () => import('app/modules/admin/apps/notes/notes.module').then(m => m.NotesModule)},
{path: '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
View 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
View 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
}
];

14
src/app/mock-api/common/navigation/data.ts
View File

@ -127,6 +127,13 @@ export const defaultNavigation: FuseNavigationItem[] = [
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',
title: 'Tasks',
@ -1242,6 +1249,13 @@ export const futuristicNavigation: FuseNavigationItem[] = [
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',
title: 'Tasks',

2
src/app/mock-api/index.ts
View File

@ -11,6 +11,7 @@ import { IconsMockApi } from 'app/mock-api/ui/icons/api';
import { MailboxMockApi } from 'app/mock-api/apps/mailbox/api';
import { MessagesMockApi } from 'app/mock-api/common/messages/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 { ProjectMockApi } from 'app/mock-api/dashboards/project/api';
import { SearchMockApi } from 'app/mock-api/common/search/api';
@ -32,6 +33,7 @@ export const mockApiServices = [
MailboxMockApi,
MessagesMockApi,
NavigationMockApi,
NotesMockApi,
NotificationsMockApi,
ProjectMockApi,
SearchMockApi,

176
src/app/modules/admin/apps/notes/details/details.component.html Normal file
View 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
View 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);
});
}
}

54
src/app/modules/admin/apps/notes/labels/labels.component.html Normal file
View 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
View 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
View 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
View 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
View File

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

17
src/app/modules/admin/apps/notes/notes.component.ts Normal file
View 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
View 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
View 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
View 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
View 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;
}