purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-09 20:15:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Starter

Browse Source
This commit is contained in:
sercan 2021-04-15 17:23:49 +03:00
parent 700d52d815
commit c150a8902c
500 changed files with 52 additions and 62285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,15 +8,15 @@ import { InitialDataResolver } from 'app/app.resolvers';
// tslint:disable:max-line-length
export const appRoutes: Route[] = [
// Redirect empty path to '/dashboards/project'
{path: '', pathMatch : 'full', redirectTo: 'dashboards/project'},
// Redirect empty path to '/example'
{path: '', pathMatch : 'full', redirectTo: 'example'},
// Redirect signed in user to the '/dashboards/project'
// Redirect signed in user to the '/example'
//
// After the user signs in, the sign in page will redirect the user to the 'signed-in-redirect'
// path. Below is another redirection for that path to redirect the user to the desired
// location. This is a small convenience to keep all main routes together here on this file.
{path: 'signed-in-redirect', pathMatch : 'full', redirectTo: 'dashboards/project'},
{path: 'signed-in-redirect', pathMatch : 'full', redirectTo: 'example'},
// Auth routes for guests
{
@ -73,119 +73,7 @@ export const appRoutes: Route[] = [
initialData: InitialDataResolver,
},
children : [
// Dashboards
{path: 'dashboards', children: [
{path: 'project', loadChildren: () => import('app/modules/admin/dashboards/project/project.module').then(m => m.ProjectModule)},
{path: 'analytics', loadChildren: () => import('app/modules/admin/dashboards/analytics/analytics.module').then(m => m.AnalyticsModule)},
]},
// Apps
{path: 'apps', children: [
{path: 'calendar', loadChildren: () => import('app/modules/admin/apps/calendar/calendar.module').then(m => m.CalendarModule)},
{path: 'contacts', loadChildren: () => import('app/modules/admin/apps/contacts/contacts.module').then(m => m.ContactsModule)},
{path: 'ecommerce', loadChildren: () => import('app/modules/admin/apps/ecommerce/ecommerce.module').then(m => m.ECommerceModule)},
{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: 'tasks', loadChildren: () => import('app/modules/admin/apps/tasks/tasks.module').then(m => m.TasksModule)},
]},
// Pages
{path: 'pages', children: [
// Authentication
{path: 'authentication', loadChildren: () => import('app/modules/admin/pages/authentication/authentication.module').then(m => m.AuthenticationModule)},
// Coming soon
{path: 'coming-soon', loadChildren: () => import('app/modules/admin/pages/coming-soon/coming-soon.module').then(m => m.ComingSoonModule)},
// Error
{path: 'error', children: [
{path: '404', loadChildren: () => import('app/modules/admin/pages/error/error-404/error-404.module').then(m => m.Error404Module)},
{path: '500', loadChildren: () => import('app/modules/admin/pages/error/error-500/error-500.module').then(m => m.Error500Module)}
]},
// Invoice
{path: 'invoice', children: [
{path: 'printable', children: [
{path: 'compact', loadChildren: () => import('app/modules/admin/pages/invoice/printable/compact/compact.module').then(m => m.CompactModule)},
{path: 'modern', loadChildren: () => import('app/modules/admin/pages/invoice/printable/modern/modern.module').then(m => m.ModernModule)}
]}
]},
// Maintenance
{path: 'maintenance', loadChildren: () => import('app/modules/admin/pages/maintenance/maintenance.module').then(m => m.MaintenanceModule)},
// Pricing
{path: 'pricing', children: [
{path: 'modern', loadChildren: () => import('app/modules/admin/pages/pricing/modern/modern.module').then(m => m.PricingModernModule)},
{path: 'simple', loadChildren: () => import('app/modules/admin/pages/pricing/simple/simple.module').then(m => m.PricingSimpleModule)},
{path: 'single', loadChildren: () => import('app/modules/admin/pages/pricing/single/single.module').then(m => m.PricingSingleModule)},
{path: 'table', loadChildren: () => import('app/modules/admin/pages/pricing/table/table.module').then(m => m.PricingTableModule)}
]},
// Profile
{path: 'profile', loadChildren: () => import('app/modules/admin/pages/profile/profile.module').then(m => m.ProfileModule)},
]},
// User interface
{path: 'ui', children: [
// Angular Material
{path: 'angular-material', loadChildren: () => import('app/modules/admin/ui/angular-material/angular-material.module').then(m => m.AngularMaterialModule)},
// TailwindCSS
{path: 'tailwindcss', loadChildren: () => import('app/modules/admin/ui/tailwindcss/tailwindcss.module').then(m => m.TailwindCSSModule)},
// Animations
{path: 'animations', loadChildren: () => import('app/modules/admin/ui/animations/animations.module').then(m => m.AnimationsModule)},
// Cards
{path: 'cards', loadChildren: () => import('app/modules/admin/ui/cards/cards.module').then(m => m.CardsModule)},
// Colors
{path: 'colors', loadChildren: () => import('app/modules/admin/ui/colors/colors.module').then(m => m.ColorsModule)},
// Datatable
{path: 'datatable', loadChildren: () => import('app/modules/admin/ui/datatable/datatable.module').then(m => m.DatatableModule)},
// Forms
{path: 'forms', children: [
{path: 'fields', loadChildren: () => import('app/modules/admin/ui/forms/fields/fields.module').then(m => m.FormsFieldsModule)},
{path: 'layouts', loadChildren: () => import('app/modules/admin/ui/forms/layouts/layouts.module').then(m => m.FormsLayoutsModule)},
{path: 'wizards', loadChildren: () => import('app/modules/admin/ui/forms/wizards/wizards.module').then(m => m.FormsWizardsModule)}
]},
// Icons
{path: 'icons', loadChildren: () => import('app/modules/admin/ui/icons/icons.module').then(m => m.IconsModule)},
// Page layouts
{path: 'page-layouts', loadChildren: () => import('app/modules/admin/ui/page-layouts/page-layouts.module').then(m => m.PageLayoutsModule)},
// Typography
{path: 'typography', loadChildren: () => import('app/modules/admin/ui/typography/typography.module').then(m => m.TypographyModule)}
]},
// Documentation
{path: 'docs', children: [
// Changelog
{path: 'changelog', loadChildren: () => import('app/modules/admin/docs/changelog/changelog.module').then(m => m.ChangelogModule)},
// Guides
{path: 'guides', loadChildren: () => import('app/modules/admin/docs/guides/guides.module').then(m => m.GuidesModule)},
// Core features
{path: 'core-features', loadChildren: () => import('app/modules/admin/docs/core-features/core-features.module').then(m => m.CoreFeaturesModule)},
// Other components
{path: 'other-components', loadChildren: () => import('app/modules/admin/docs/other-components/other-components.module').then(m => m.OtherComponentsModule)},
]},
// 404 & Catch all
{path: '404-not-found', pathMatch: 'full', loadChildren: () => import('app/modules/admin/pages/error/error-404/error-404.module').then(m => m.Error404Module)},
{path: '**', redirectTo: '404-not-found'}
{path: 'example', loadChildren: () => import('app/modules/admin/example/example.module').then(m => m.ExampleModule)},
]
}
];

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

File diff suppressed because it is too large Load Diff

386
src/app/modules/admin/apps/calendar/calendar.component.html
View File

@ -1,386 +0,0 @@
<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden dark:bg-gray-900">
<mat-drawer-container class="flex-auto h-full bg-transparent">
<!-- Drawer -->
<mat-drawer
class="w-60 dark:bg-gray-900"
[autoFocus]="false"
[mode]="drawerMode"
[opened]="drawerOpened"
#drawer>
<calendar-sidebar (calendarUpdated)="onCalendarUpdated($event)"></calendar-sidebar>
</mat-drawer>
<mat-drawer-content class="flex">
<!-- Main -->
<div class="flex flex-col flex-auto">
<!-- Header -->
<div class="flex flex-0 flex-wrap items-center p-4 border-b bg-card">
<button
mat-icon-button
(click)="toggleDrawer()">
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
</button>
<div class="ml-4 text-2xl font-semibold tracking-tight whitespace-nowrap">
{{viewTitle}}
</div>
<button
class="ml-5"
mat-icon-button
(click)="previous()">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:chevron-left'"></mat-icon>
</button>
<button
mat-icon-button
(click)="next()">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
</button>
<button
class="hidden md:inline-flex"
mat-icon-button
(click)="today()">
<mat-icon [svgIcon]="'heroicons_outline:calendar'"></mat-icon>
</button>
<div class="hidden md:block ml-auto">
<mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-30 ml-2">
<mat-select
(selectionChange)="changeView(viewChanger.value)"
[value]="view"
#viewChanger="matSelect">
<mat-option [value]="'dayGridMonth'">Month</mat-option>
<mat-option [value]="'timeGridWeek'">Week</mat-option>
<mat-option [value]="'timeGridDay'">Day</mat-option>
<mat-option [value]="'listYear'">Schedule</mat-option>
</mat-select>
</mat-form-field>
</div>
<!-- Mobile menu -->
<div class="md:hidden ml-auto">
<button
class=""
[matMenuTriggerFor]="actionsMenu"
mat-icon-button>
<mat-icon [svgIcon]="'heroicons_outline:dots-vertical'"></mat-icon>
<mat-menu #actionsMenu="matMenu">
<button
mat-menu-item
(click)="today()">
<mat-icon [svgIcon]="'heroicons_outline:calendar'"></mat-icon>
<span>Go to today</span>
</button>
<button
[matMenuTriggerFor]="actionsViewsMenu"
mat-menu-item>
<mat-icon [svgIcon]="'heroicons_outline:view-grid'"></mat-icon>
<span>View</span>
</button>
</mat-menu>
<mat-menu #actionsViewsMenu="matMenu">
<button
mat-menu-item
[disabled]="view === 'dayGridMonth'"
(click)="changeView('dayGridMonth')">
<span>Month</span>
</button>
<button
mat-menu-item
[disabled]="view === 'timeGridWeek'"
(click)="changeView('timeGridWeek')">
<span>Week</span>
</button>
<button
mat-menu-item
[disabled]="view === 'timeGridDay'"
(click)="changeView('timeGridDay')">
<span>Day</span>
</button>
<button
mat-menu-item
[disabled]="view === 'listYear'"
(click)="changeView('listYear')">
<span>Schedule</span>
</button>
</mat-menu>
</button>
</div>
</div>
<!-- FullCalendar -->
<div class="flex flex-col flex-auto">
<full-calendar
[defaultView]="view"
[events]="events"
[firstDay]="settings.startWeekOn"
[handleWindowResize]="false"
[header]="false"
[height]="'parent'"
[plugins]="calendarPlugins"
[views]="views"
(dateClick)="onDateClick($event)"
(eventClick)="onEventClick($event)"
(eventRender)="onEventRender($event)"
#fullCalendar></full-calendar>
</div>
<!-- Event panel -->
<ng-template #eventPanel>
<!-- Preview mode -->
<ng-container *ngIf="panelMode === 'view'">
<div class="flex-auto p-8">
<!-- Info -->
<div class="flex">
<mat-icon [svgIcon]="'heroicons_outline:information-circle'"></mat-icon>
<div class="flex flex-auto justify-between ml-6">
<!-- Info -->
<div>
<div class="text-3xl font-semibold tracking-tight leading-none">{{event.title || '(No title)'}}</div>
<div class="mt-0.5 text-secondary">{{event.start | date:'EEEE, MMMM d'}}</div>
<div class="text-secondary">{{recurrenceStatus}}</div>
</div>
<!-- Actions -->
<div class="flex -mt-2 -mr-2 ml-10">
<!-- Non-recurring event -->
<ng-container *ngIf="!event.recurrence">
<!-- Edit -->
<button
mat-icon-button
(click)="changeEventPanelMode('edit', 'single')">
<mat-icon [svgIcon]="'heroicons_outline:pencil-alt'"></mat-icon>
</button>
<!-- Delete -->
<button
mat-icon-button
(click)="deleteEvent(event)">
<mat-icon [svgIcon]="'heroicons_outline:trash'"></mat-icon>
</button>
</ng-container>
<!-- Recurring event -->
<ng-container *ngIf="event.recurrence">
<!-- Edit -->
<button
mat-icon-button
[matMenuTriggerFor]="editMenu">
<mat-icon [svgIcon]="'heroicons_outline:pencil-alt'"></mat-icon>
</button>
<mat-menu #editMenu="matMenu">
<button
mat-menu-item
(click)="changeEventPanelMode('edit', 'single')">
This event
</button>
<button
mat-menu-item
*ngIf="!event.isFirstInstance"
(click)="changeEventPanelMode('edit', 'future')">
This and following events
</button>
<button
mat-menu-item
(click)="changeEventPanelMode('edit', 'all')">
All events
</button>
</mat-menu>
<!-- Delete -->
<button
mat-icon-button
[matMenuTriggerFor]="deleteMenu">
<mat-icon [svgIcon]="'heroicons_outline:trash'"></mat-icon>
</button>
<mat-menu #deleteMenu="matMenu">
<button
mat-menu-item
(click)="deleteEvent(event, 'single')">
This event
</button>
<button
mat-menu-item
*ngIf="!event.isFirstInstance"
(click)="deleteEvent(event, 'future')">
This and following events
</button>
<button
mat-menu-item
(click)="deleteEvent(event, 'all')">
All events
</button>
</mat-menu>
</ng-container>
</div>
</div>
</div>
<!-- Description -->
<div
class="flex mt-6"
*ngIf="event.description">
<mat-icon [svgIcon]="'heroicons_outline:menu-alt-2'"></mat-icon>
<div class="flex-auto ml-6">{{event.description}}</div>
</div>
<!-- Calendar -->
<div class="flex mt-6">
<mat-icon [svgIcon]="'heroicons_outline:calendar'"></mat-icon>
<div class="flex flex-auto items-center ml-6">
<div
class="w-2 h-2 rounded-full"
[ngClass]="getCalendar(event.calendarId).color"></div>
<div class="ml-3 leading-none">{{getCalendar(event.calendarId).title}}</div>
</div>
</div>
</div>
</ng-container>
<!-- Add / Edit mode -->
<ng-container *ngIf="panelMode === 'add' || panelMode === 'edit'">
<form
class="flex flex-col w-full p-6 pt-8 sm:pt-10 sm:pr-8"
[formGroup]="eventForm">
<!-- Title -->
<div class="flex items-center">
<mat-icon
class="hidden sm:inline-flex mr-6"
[svgIcon]="'heroicons_outline:pencil-alt'"></mat-icon>
<mat-form-field class="fuse-mat-no-subscript flex-auto">
<input
matInput
[formControlName]="'title'"
[placeholder]="'Event title'">
</mat-form-field>
</div>
<!-- Dates -->
<div class="flex items-start mt-6">
<mat-icon
class="hidden sm:inline-flex mt-3 mr-6"
[svgIcon]="'heroicons_outline:calendar'"></mat-icon>
<div class="flex-auto">
<fuse-date-range
[formControlName]="'range'"
[dateFormat]="settings.dateFormat"
[timeRange]="!eventForm.get('allDay').value"
[timeFormat]="settings.timeFormat"></fuse-date-range>
<mat-checkbox
class="mt-4"
[color]="'primary'"
[formControlName]="'allDay'">
All day
</mat-checkbox>
</div>
</div>
<!-- Recurrence -->
<div
class="flex items-center mt-6"
*ngIf="!event.recurrence || eventEditMode !== 'single'">
<mat-icon
class="hidden sm:inline-flex mr-6 transform -scale-x-1"
[svgIcon]="'heroicons_outline:refresh'"></mat-icon>
<div
class="flex flex-auto items-center h-12 px-4 rounded-md border cursor-pointer shadow-sm border-gray-300 dark:bg-black dark:bg-opacity-5 dark:border-gray-500"
(click)="openRecurrenceDialog()">
<div class="flex-auto">
{{recurrenceStatus || 'Does not repeat'}}
</div>
</div>
</div>
<!-- Calendar -->
<div class="flex items-center mt-6">
<mat-icon
class="hidden sm:inline-flex mr-6"
[svgIcon]="'heroicons_outline:tag'"></mat-icon>
<mat-form-field class="fuse-mat-no-subscript flex-auto">
<mat-select
[formControlName]="'calendarId'"
(change)="$event.stopImmediatePropagation()">
<mat-select-trigger class="inline-flex items-center leading-none">
<span
class="w-3 h-3 rounded-full"
[ngClass]="getCalendar(eventForm.get('calendarId').value)?.color"></span>
<span class="ml-3">{{getCalendar(eventForm.get('calendarId').value)?.title}}</span>
</mat-select-trigger>
<mat-option
*ngFor="let calendar of calendars"
[value]="calendar.id">
<div class="inline-flex items-center">
<span
class="w-3 h-3 rounded-full"
[ngClass]="calendar.color"></span>
<span class="ml-3">{{calendar.title}}</span>
</div>
</mat-option>
</mat-select>
</mat-form-field>
</div>
<!-- Description -->
<div class="flex items-start mt-6">
<mat-icon
class="hidden sm:inline-flex mr-6 mt-3"
[svgIcon]="'heroicons_outline:menu-alt-2'"></mat-icon>
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript flex-auto">
<textarea
matInput
cdkTextareaAutosize
[cdkAutosizeMinRows]="1"
[formControlName]="'description'"
[placeholder]="'Event description'">
</textarea>
</mat-form-field>
</div>
<!-- Actions -->
<div class="ml-auto mt-6">
<button
class="add"
*ngIf="panelMode === 'add'"
mat-flat-button
type="button"
[color]="'primary'"
(click)="addEvent()">
Add
</button>
<button
class="save"
*ngIf="panelMode === 'edit'"
mat-flat-button
type="button"
[color]="'primary'"
(click)="updateEvent()">
Save
</button>
</div>
</form>
</ng-container>
</ng-template>
</div>
</mat-drawer-content>
</mat-drawer-container>
</div>

121
src/app/modules/admin/apps/calendar/calendar.component.scss
View File

@ -1,121 +0,0 @@
calendar {
/* Tweak: FullCalendar CSS only height to improve resize performance */
/* With this tweak, we can disable "handleWindowResize" option of FullCalendar */
/* which disables the height calculations on window resize and increases the */
/* overall performance. */
/* This tweak only affects the Calendar app's FullCalendar. */
full-calendar {
display: flex;
flex-direction: column;
flex: 1 0 auto;
width: 100%;
height: 100%;
.fc-view-container {
display: flex;
flex-direction: column;
flex: 1 0 auto;
width: 100%;
height: 100%;
.fc-view {
/* Day grid - Month view */
/* Time grid - Week view */
/* Time grid - Day view */
&.fc-dayGridMonth-view,
&.fc-timeGridWeek-view,
&.fc-timeGridDay-view {
display: flex;
flex-direction: column;
flex: 1 0 auto;
width: 100%;
height: 100%;
> table {
display: flex;
flex-direction: column;
flex: 1 0 auto;
height: 100%;
> thead {
display: flex;
}
> tbody {
display: flex;
flex: 1 1 auto;
overflow: hidden;
> tr {
display: flex;
> td {
display: flex;
flex-direction: column;
.fc-scroller {
flex: 1 1 auto;
overflow: hidden scroll !important;
height: auto !important;
}
}
}
}
}
}
/* Day grid - Month view */
&.fc-dayGridMonth-view {
> table {
> tbody {
> tr {
> td {
.fc-scroller {
display: flex;
> .fc-day-grid {
display: flex;
flex-direction: column;
min-height: 580px;
> .fc-row {
flex: 1 0 0;
height: auto !important;
}
}
}
}
}
}
}
}
/* List - Year view */
&.fc-listYear-view {
width: 100%;
height: 100%;
.fc-scroller {
width: 100%;
height: 100% !important;
overflow: hidden !important;
}
}
}
}
}
}
/* Event panel */
.calendar-event-panel {
border-radius: 8px;
@apply shadow-2xl bg-card;
}

1011
src/app/modules/admin/apps/calendar/calendar.component.ts
View File

File diff suppressed because it is too large Load Diff

75
src/app/modules/admin/apps/calendar/calendar.module.ts
View File

@ -1,75 +0,0 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { MAT_DATE_FORMATS } from '@angular/material/core';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDatepickerModule } from '@angular/material/datepicker';
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 { MatMomentDateModule } from '@angular/material-moment-adapter';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatTooltipModule } from '@angular/material/tooltip';
import { FullCalendarModule } from '@fullcalendar/angular';
import { FuseDateRangeModule } from '@fuse/components/date-range';
import { SharedModule } from 'app/shared/shared.module';
import { CalendarComponent } from 'app/modules/admin/apps/calendar/calendar.component';
import { CalendarRecurrenceComponent } from 'app/modules/admin/apps/calendar/recurrence/recurrence.component';
import { CalendarSettingsComponent } from 'app/modules/admin/apps/calendar/settings/settings.component';
import { CalendarSidebarComponent } from 'app/modules/admin/apps/calendar/sidebar/sidebar.component';
import { calendarRoutes } from 'app/modules/admin/apps/calendar/calendar.routing';
@NgModule({
declarations: [
CalendarComponent,
CalendarRecurrenceComponent,
CalendarSettingsComponent,
CalendarSidebarComponent
],
imports : [
RouterModule.forChild(calendarRoutes),
ScrollingModule,
MatButtonModule,
MatButtonToggleModule,
MatCheckboxModule,
MatDatepickerModule,
MatDialogModule,
MatFormFieldModule,
MatIconModule,
MatInputModule,
MatMenuModule,
MatMomentDateModule,
MatRadioModule,
MatSelectModule,
MatSidenavModule,
MatTooltipModule,
FullCalendarModule,
FuseDateRangeModule,
SharedModule
],
providers : [
{
provide : MAT_DATE_FORMATS,
useValue: {
parse : {
dateInput: 'DD.MM.YYYY'
},
display: {
dateInput : 'DD.MM.YYYY',
monthYearLabel : 'MMM YYYY',
dateA11yLabel : 'DD.MM.YYYY',
monthYearA11yLabel: 'MMMM YYYY'
}
}
}
]
})
export class CalendarModule
{
}

89
src/app/modules/admin/apps/calendar/calendar.resolvers.ts
View File

@ -1,89 +0,0 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { CalendarService } from 'app/modules/admin/apps/calendar/calendar.service';
import { Calendar, CalendarSettings, CalendarWeekday } from 'app/modules/admin/apps/calendar/calendar.types';
@Injectable({
providedIn: 'root'
})
export class CalendarCalendarsResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(private _calendarService: CalendarService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Calendar[]>
{
return this._calendarService.getCalendars();
}
}
@Injectable({
providedIn: 'root'
})
export class CalendarSettingsResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(private _calendarService: CalendarService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<CalendarSettings>
{
return this._calendarService.getSettings();
}
}
@Injectable({
providedIn: 'root'
})
export class CalendarWeekdaysResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(private _calendarService: CalendarService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<CalendarWeekday[]>
{
return this._calendarService.getWeekdays();
}
}

23
src/app/modules/admin/apps/calendar/calendar.routing.ts
View File

@ -1,23 +0,0 @@
import { Route } from '@angular/router';
import { CalendarComponent } from 'app/modules/admin/apps/calendar/calendar.component';
import { CalendarSettingsComponent } from 'app/modules/admin/apps/calendar/settings/settings.component';
import { CalendarCalendarsResolver, CalendarSettingsResolver, CalendarWeekdaysResolver } from 'app/modules/admin/apps/calendar/calendar.resolvers';
export const calendarRoutes: Route[] = [
{
path : '',
component: CalendarComponent,
resolve : {
calendars: CalendarCalendarsResolver,
settings : CalendarSettingsResolver,
weekdays : CalendarWeekdaysResolver
}
},
{
path : 'settings',
component: CalendarSettingsComponent,
resolve : {
settings: CalendarSettingsResolver
}
}
];

475
src/app/modules/admin/apps/calendar/calendar.service.ts
View File

@ -1,475 +0,0 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable, of } from 'rxjs';
import { map, switchMap, take, tap } from 'rxjs/operators';
import { Moment } from 'moment';
import { Calendar, CalendarEvent, CalendarEventEditMode, CalendarSettings, CalendarWeekday } from 'app/modules/admin/apps/calendar/calendar.types';
@Injectable({
providedIn: 'root'
})
export class CalendarService
{
// Private
private _calendars: BehaviorSubject<Calendar[] | null> = new BehaviorSubject(null);
private _events: BehaviorSubject<CalendarEvent[] | null> = new BehaviorSubject(null);
private _loadedEventsRange: { start: Moment | null, end: Moment | null } = {
start: null,
end : null
};
private readonly _numberOfDaysToPrefetch = 60;
private _settings: BehaviorSubject<CalendarSettings | null> = new BehaviorSubject(null);
private _weekdays: BehaviorSubject<CalendarWeekday[] | null> = new BehaviorSubject(null);
/**
* Constructor
*/
constructor(private _httpClient: HttpClient)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Accessors
// -----------------------------------------------------------------------------------------------------
/**
* Getter for calendars
*/
get calendars$(): Observable<Calendar[]>
{
return this._calendars.asObservable();
}
/**
* Getter for events
*/
get events$(): Observable<CalendarEvent[]>
{
return this._events.asObservable();
}
/**
* Getter for settings
*/
get settings$(): Observable<CalendarSettings>
{
return this._settings.asObservable();
}
/**
* Getter for weekdays
*/
get weekdays$(): Observable<CalendarWeekday[]>
{
return this._weekdays.asObservable();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Get calendars
*/
getCalendars(): Observable<Calendar[]>
{
return this._httpClient.get<Calendar[]>('api/apps/calendar/calendars').pipe(
tap((response) => {
this._calendars.next(response);
})
);
}
/**
* Add calendar
*
* @param calendar
*/
addCalendar(calendar: Calendar): Observable<Calendar>
{
return this.calendars$.pipe(
take(1),
switchMap(calendars => this._httpClient.post<Calendar>('api/apps/calendar/calendars', {
calendar
}).pipe(
map((addedCalendar) => {
// Add the calendar
calendars.push(addedCalendar);
// Update the calendars
this._calendars.next(calendars);
// Return the added calendar
return addedCalendar;
})
))
);
}
/**
* Update calendar
*
* @param id
* @param calendar
*/
updateCalendar(id: string, calendar: Calendar): Observable<Calendar>
{
return this.calendars$.pipe(
take(1),
switchMap(calendars => this._httpClient.patch<Calendar>('api/apps/calendar/calendars', {
id,
calendar
}).pipe(
map((updatedCalendar) => {
// Find the index of the updated calendar
const index = calendars.findIndex(item => item.id === id);
// Update the calendar
calendars[index] = updatedCalendar;
// Update the calendars
this._calendars.next(calendars);
// Return the updated calendar
return updatedCalendar;
})
))
);
}
/**
* Delete calendar
*
* @param id
*/
deleteCalendar(id: string): Observable<any>
{
return this.calendars$.pipe(
take(1),
switchMap(calendars => this._httpClient.delete<Calendar>('api/apps/calendar/calendars', {
params: {id}
}).pipe(
map((isDeleted) => {
// Find the index of the deleted calendar
const index = calendars.findIndex(item => item.id === id);
// Delete the calendar
calendars.splice(index, 1);
// Update the calendars
this._calendars.next(calendars);
// Remove the events belong to deleted calendar
const events = this._events.value.filter((event) => event.calendarId !== id);
// Update the events
this._events.next(events);
// Return the deleted status
return isDeleted;
})
))
);
}
/**
* Get events
*
* @param start
* @param end
* @param replace
*/
getEvents(start: Moment, end: Moment, replace = false): Observable<CalendarEvent[]>
{
// Set the new start date for loaded events
if ( replace || !this._loadedEventsRange.start || start.isBefore(this._loadedEventsRange.start) )
{
this._loadedEventsRange.start = start;
}
// Set the new end date for loaded events
if ( replace || !this._loadedEventsRange.end || end.isAfter(this._loadedEventsRange.end) )
{
this._loadedEventsRange.end = end;
}
// Get the events
return this._httpClient.get<CalendarEvent[]>('api/apps/calendar/events', {
params: {
start: start.toISOString(true),
end : end.toISOString(true)
}
}).pipe(
switchMap(response => this._events.pipe(
take(1),
map((events) => {
// If replace...
if ( replace )
{
// Execute the observable with the response replacing the events object
this._events.next(response);
}
// Otherwise...
else
{
// If events is null, replace it with an empty array
events = events || [];
// Execute the observable by appending the response to the current events
this._events.next([...events, ...response]);
}
// Return the response
return response;
})
))
);
}
/**
* Reload events using the loaded events range
*/
reloadEvents(): Observable<CalendarEvent[]>
{
// Get the events
return this._httpClient.get<CalendarEvent[]>('api/apps/calendar/events', {
params: {
start: this._loadedEventsRange.start.toISOString(),
end : this._loadedEventsRange.end.toISOString()
}
}).pipe(
map((response) => {
// Execute the observable with the response replacing the events object
this._events.next(response);
// Return the response
return response;
})
);
}
/**
* Prefetch future events
*
* @param end
*/
prefetchFutureEvents(end: Moment): Observable<CalendarEvent[]>
{
// Calculate the remaining prefetched days
const remainingDays = this._loadedEventsRange.end.diff(end, 'days');
// Return if remaining days is bigger than the number
// of days to prefetch. This means we were already been
// there and fetched the events mock-api so no need for doing
// it again.
if ( remainingDays >= this._numberOfDaysToPrefetch )
{
return of([]);
}
// Figure out the start and end dates
const start = this._loadedEventsRange.end.clone().add(1, 'day');
end = this._loadedEventsRange.end.clone().add(this._numberOfDaysToPrefetch - remainingDays, 'days');
// Prefetch the events
return this.getEvents(start, end);
}
/**
* Prefetch past events
*
* @param start
*/
prefetchPastEvents(start: Moment): Observable<CalendarEvent[]>
{
// Calculate the remaining prefetched days
const remainingDays = start.diff(this._loadedEventsRange.start, 'days');
// Return if remaining days is bigger than the number
// of days to prefetch. This means we were already been
// there and fetched the events mock-api so no need for doing
// it again.
if ( remainingDays >= this._numberOfDaysToPrefetch )
{
return of([]);
}
// Figure out the start and end dates
start = this._loadedEventsRange.start.clone().subtract(this._numberOfDaysToPrefetch - remainingDays, 'days');
const end = this._loadedEventsRange.start.clone().subtract(1, 'day');
// Prefetch the events
return this.getEvents(start, end);
}
/**
* Add event
*
* @param event
*/
addEvent(event): Observable<CalendarEvent>
{
return this.events$.pipe(
take(1),
switchMap(events => this._httpClient.post<CalendarEvent>('api/apps/calendar/event', {
event
}).pipe(
map((addedEvent) => {
// Update the events
this._events.next(events);
// Return the added event
return addedEvent;
})
))
);
}
/**
* Update event
*
* @param id
* @param event
*/
updateEvent(id: string, event): Observable<CalendarEvent>
{
return this.events$.pipe(
take(1),
switchMap(events => this._httpClient.patch<CalendarEvent>('api/apps/calendar/event', {
id,
event
}).pipe(
map((updatedEvent) => {
// Find the index of the updated event
const index = events.findIndex(item => item.id === id);
// Update the event
events[index] = updatedEvent;
// Update the events
this._events.next(events);
// Return the updated event
return updatedEvent;
})
))
);
}
/**
* Update recurring event
*
* @param event
* @param originalEvent
* @param mode
*/
updateRecurringEvent(event, originalEvent, mode: CalendarEventEditMode): Observable<boolean>
{
return this._httpClient.patch<boolean>('api/apps/calendar/recurring-event', {
event,
originalEvent,
mode
});
}
/**
* Delete event
*
* @param id
*/
deleteEvent(id: string): Observable<CalendarEvent>
{
return this.events$.pipe(
take(1),
switchMap(events => this._httpClient.delete<CalendarEvent>('api/apps/calendar/event', {params: {id}}).pipe(
map((isDeleted) => {
// Find the index of the deleted event
const index = events.findIndex(item => item.id === id);
// Delete the event
events.splice(index, 1);
// Update the events
this._events.next(events);
// Return the deleted status
return isDeleted;
})
))
);
}
/**
* Delete recurring event
*
* @param event
* @param mode
*/
deleteRecurringEvent(event, mode: CalendarEventEditMode): Observable<boolean>
{
return this._httpClient.delete<boolean>('api/apps/calendar/recurring-event', {
params: {
event: JSON.stringify(event),
mode
}
});
}
/**
* Get settings
*/
getSettings(): Observable<CalendarSettings>
{
return this._httpClient.get<CalendarSettings>('api/apps/calendar/settings').pipe(
tap((response) => {
this._settings.next(response);
})
);
}
/**
* Update settings
*/
updateSettings(settings: CalendarSettings): Observable<CalendarSettings>
{
return this.events$.pipe(
take(1),
switchMap(events => this._httpClient.patch<CalendarSettings>('api/apps/calendar/settings', {
settings
}).pipe(
map((updatedSettings) => {
// Update the settings
this._settings.next(settings);
// Get weekdays again to get them in correct order
// in case the startWeekOn setting changes
this.getWeekdays().subscribe();
// Return the updated settings
return updatedSettings;
})
))
);
}
/**
* Get weekdays
*/
getWeekdays(): Observable<CalendarWeekday[]>
{
return this._httpClient.get<CalendarWeekday[]>('api/apps/calendar/weekdays').pipe(
tap((response) => {
this._weekdays.next(response);
})
);
}
}

47
src/app/modules/admin/apps/calendar/calendar.types.ts
View File

@ -1,47 +0,0 @@
export interface Calendar
{
id: string;
title: string;
color: string;
visible: boolean;
}
export type CalendarDrawerMode = 'over' | 'side';
export interface CalendarEvent
{
id: string;
calendarId: string;
recurringEventId: string | null;
isFirstInstance: boolean;
title: string;
description: string;
start: string | null;
end: string | null;
allDay: boolean;
recurrence: string;
}
export interface CalendarEventException
{
id: string;
eventId: string;
exdate: string;
}
export type CalendarEventPanelMode = 'view' | 'add' | 'edit';
export type CalendarEventEditMode = 'single' | 'future' | 'all';
export interface CalendarSettings
{
dateFormat: 'DD/MM/YYYY' | 'MM/DD/YYYY' | 'YYYY-MM-DD' | 'll';
timeFormat: '12' | '24';
startWeekOn: 6 | 0 | 1;
}
export interface CalendarWeekday
{
abbr: string;
label: string;
value: string;
}

120
src/app/modules/admin/apps/calendar/recurrence/recurrence.component.html
View File

@ -1,120 +0,0 @@
<form
class="flex flex-col w-full"
[formGroup]="recurrenceForm">
<div class="text-2xl font-semibold tracking-tight">Recurrence rules</div>
<!-- Interval and frequency -->
<div class="flex mt-12">
<mat-form-field class="fuse-mat-no-subscript w-24 -mt-6">
<mat-label>Repeat every</mat-label>
<input
type="number"
matInput
[autocomplete]="'off'"
[formControlName]="'interval'"
[min]="1">
</mat-form-field>
<mat-form-field class="fuse-mat-no-subscript w-40 ml-4">
<mat-select [formControlName]="'freq'">
<mat-option [value]="'DAILY'">day(s)</mat-option>
<mat-option [value]="'WEEKLY'">week(s)</mat-option>
<mat-option [value]="'MONTHLY'">month(s)</mat-option>
<mat-option [value]="'YEARLY'">year(s)</mat-option>
</mat-select>
</mat-form-field>
</div>
<!-- Weekly repeat options -->
<div
class="flex flex-col mt-6"
[formGroupName]="'weekly'"
*ngIf="recurrenceForm.get('freq').value === 'WEEKLY'">
<div class="font-medium">Repeat on</div>
<mat-button-toggle-group
class="mt-1.5 border-0 space-x-1"
[formControlName]="'byDay'"
[multiple]="true">
<mat-button-toggle
class="w-10 h-10 border-0 rounded-full"
*ngFor="let weekday of weekdays"
[disableRipple]="true"
[value]="weekday.value"
[matTooltip]="weekday.label">
{{weekday.abbr}}
</mat-button-toggle>
</mat-button-toggle-group>
</div>
<!-- Monthly repeat options -->
<div
class="flex mt-6"
[formGroupName]="'monthly'"
*ngIf="recurrenceForm.get('freq').value === 'MONTHLY'">
<mat-form-field class="fuse-mat-no-subscript w-full">
<mat-label>Repeat on</mat-label>
<mat-select [formControlName]="'repeatOn'">
<mat-option [value]="'date'">Monthly on day {{recurrenceForm.get('monthly.date').value}}</mat-option>
<mat-option [value]="'nthWeekday'">Monthly on the {{nthWeekdayText}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<!-- Ends -->
<div
class="flex flex-col mt-12"
[formGroupName]="'end'">
<div class="flex items-center">
<mat-form-field class="fuse-mat-no-subscript w-24 -mt-6">
<mat-label>Ends</mat-label>
<mat-select [formControlName]="'type'">
<mat-option [value]="'never'">Never</mat-option>
<mat-option [value]="'until'">On</mat-option>
<mat-option [value]="'count'">After</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field
class="fuse-mat-no-subscript w-40 ml-4"
*ngIf="recurrenceForm.get('end.type').value === 'until'">
<input
matInput
[matDatepicker]="untilDatePicker"
[formControlName]="'until'">
<mat-datepicker-toggle
matSuffix
[for]="untilDatePicker"></mat-datepicker-toggle>
<mat-datepicker #untilDatePicker></mat-datepicker>
</mat-form-field>
<mat-form-field
class="fuse-mat-no-subscript w-40 ml-4"
*ngIf="recurrenceForm.get('end.type').value === 'count'">
<input
type="number"
matInput
[autocomplete]="'off'"
[formControlName]="'count'"
[min]="1">
<span matSuffix>occurrence(s)</span>
</mat-form-field>
</div>
</div>
<!-- Actions -->
<div class="ml-auto mt-8">
<button
class="clear"
mat-button
[color]="'primary'"
(click)="clear()">
Clear
</button>
<button
mat-flat-button
[disabled]="recurrenceForm.invalid"
[color]="'primary'"
(click)="done()">
Done
</button>
</div>
</form>

341
src/app/modules/admin/apps/calendar/recurrence/recurrence.component.ts
View File

@ -1,341 +0,0 @@
import { Component, Inject, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import * as moment from 'moment';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { CalendarService } from 'app/modules/admin/apps/calendar/calendar.service';
import { CalendarWeekday } from 'app/modules/admin/apps/calendar/calendar.types';
@Component({
selector : 'calendar-recurrence',
templateUrl : './recurrence.component.html',
encapsulation: ViewEncapsulation.None
})
export class CalendarRecurrenceComponent implements OnInit, OnDestroy
{
nthWeekdayText: string;
recurrenceForm: FormGroup;
recurrenceFormValues: any;
weekdays: CalendarWeekday[];
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
* Constructor
*/
constructor(
@Inject(MAT_DIALOG_DATA) public data: any,
public matDialogRef: MatDialogRef<CalendarRecurrenceComponent>,
private _calendarService: CalendarService,
private _formBuilder: FormBuilder
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Get weekdays
this._calendarService.weekdays$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((weekdays) => {
// Store the weekdays
this.weekdays = weekdays;
});
// Initialize
this._init();
// Create the recurrence form
this.recurrenceForm = this._formBuilder.group({
freq : [null],
interval: [null, Validators.required],
weekly : this._formBuilder.group({
byDay: [[]]
}),
monthly : this._formBuilder.group({
repeatOn : [null], // date | nthWeekday
date : [null],
nthWeekday: [null]
}),
end : this._formBuilder.group({
type : [null], // never | until | count
until: [null],
count: [null]
})
});
// Subscribe to 'freq' field value changes
this.recurrenceForm.get('freq').valueChanges.subscribe((value) => {
// Set the end values
this._setEndValues(value);
});
// Subscribe to 'weekly.byDay' field value changes
this.recurrenceForm.get('weekly.byDay').valueChanges.subscribe((value) => {
// Get the event's start date
const startDate = moment(this.data.event.start);
// If nothing is selected, select the original value from
// the event form to prevent an empty value on the field
if ( !value || !value.length )
{
// Get the day of event start date
const eventStartDay = startDate.format('dd').toUpperCase();
// Set the original value back without emitting a
// change event to prevent an infinite loop
this.recurrenceForm.get('weekly.byDay').setValue([eventStartDay], {emitEvent: false});
}
});
// Patch the form with the values
this.recurrenceForm.patchValue(this.recurrenceFormValues);
// Set end values for the first time
this._setEndValues(this.recurrenceForm.get('freq').value);
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Clear
*/
clear(): void
{
// Close the dialog
this.matDialogRef.close({recurrence: 'cleared'});
}
/**
* Done
*/
done(): void
{
// Get the recurrence form values
const recurrenceForm = this.recurrenceForm.value;
// Prepare the rule array and add the base rules
const ruleArr = ['FREQ=' + recurrenceForm.freq, 'INTERVAL=' + recurrenceForm.interval];
// If monthly on certain days...
if ( recurrenceForm.freq === 'MONTHLY' && recurrenceForm.monthly.repeatOn === 'nthWeekday' )
{
ruleArr.push('BYDAY=' + recurrenceForm.monthly.nthWeekday);
}
// If weekly...
if ( recurrenceForm.freq === 'WEEKLY' )
{
// If byDay is an array...
if ( Array.isArray(recurrenceForm.weekly.byDay) )
{
ruleArr.push('BYDAY=' + recurrenceForm.weekly.byDay.join(','));
}
// Otherwise
else
{
ruleArr.push('BYDAY=' + recurrenceForm.weekly.byDay);
}
}
// If one of the end options is selected...
if ( recurrenceForm.end.type === 'until' )
{
ruleArr.push('UNTIL=' + moment(recurrenceForm.end.until).endOf('day').utc().format('YYYYMMDD[T]HHmmss[Z]'));
}
if ( recurrenceForm.end.type === 'count' )
{
ruleArr.push('COUNT=' + recurrenceForm.end.count);
}
// Generate rule text
const ruleText = ruleArr.join(';');
// Close the dialog
this.matDialogRef.close({recurrence: ruleText});
}
// -----------------------------------------------------------------------------------------------------
// @ Private methods
// -----------------------------------------------------------------------------------------------------
/**
* Initialize
*
* @private
*/
private _init(): void
{
// Get the event's start date
const startDate = moment(this.data.event.start);
// Calculate the weekday
const weekday = moment(this.data.event.start).format('dd').toUpperCase();
// Calculate the nthWeekday
let nthWeekdayNo = 1;
while ( startDate.clone().isSame(startDate.clone().subtract(nthWeekdayNo, 'week'), 'month') )
{
nthWeekdayNo++;
}
const nthWeekday = nthWeekdayNo + weekday;
// Calculate the nthWeekday as text
const ordinalNumberSuffixes = {
1: 'st',
2: 'nd',
3: 'rd',
4: 'th',
5: 'th'
};
this.nthWeekdayText = nthWeekday.slice(0, 1) + ordinalNumberSuffixes[nthWeekday.slice(0, 1)] + ' ' +
this.weekdays.find((item) => item.value === nthWeekday.slice(-2)).label;
// Set the defaults on recurrence form values
this.recurrenceFormValues = {
freq : 'DAILY',
interval: 1,
weekly : {
byDay: weekday
},
monthly : {
repeatOn : 'date',
date : moment(this.data.event.start).date(),
nthWeekday: nthWeekday
},
end : {
type : 'never',
until: null,
count: null
}
};
// If recurrence rule string is available on the
// event meaning that the is a recurring one...
if ( this.data.event.recurrence )
{
// Parse the rules
const parsedRules: any = {};
this.data.event.recurrence.split(';').forEach((rule) => {
parsedRules[rule.split('=')[0]] = rule.split('=')[1];
});
// Overwrite the recurrence form values
this.recurrenceFormValues.freq = parsedRules.FREQ;
this.recurrenceFormValues.interval = parsedRules.INTERVAL;
if ( parsedRules.FREQ === 'WEEKLY' )
{
this.recurrenceFormValues.weekly.byDay = parsedRules.BYDAY.split(',');
}
if ( parsedRules.FREQ === 'MONTHLY' )
{
this.recurrenceFormValues.monthly.repeatOn = parsedRules.BYDAY ? 'nthWeekday' : 'date';
}
this.recurrenceFormValues.end.type = parsedRules.UNTIL ? 'until' : (parsedRules.COUNT ? 'count' : 'never');
this.recurrenceFormValues.end.until = parsedRules.UNTIL || null;
this.recurrenceFormValues.end.count = parsedRules.COUNT || null;
}
}
/**
* Set the end value based on frequency
*
* @param freq
* @private
*/
private _setEndValues(freq: string): void
{
// Return if freq is not available
if ( !freq )
{
return;
}
// Get the event's start date
const startDate = moment(this.data.event.startDate);
// Get the end type
const endType = this.recurrenceForm.get('end.type').value;
// If until is not selected
if ( endType !== 'until' )
{
let until;
// Change the until's default value based on the frequency
if ( freq === 'DAILY' )
{
until = startDate.clone().add(1, 'month').toISOString();
}
if ( freq === 'WEEKLY' )
{
until = startDate.clone().add(12, 'weeks').toISOString();
}
if ( freq === 'MONTHLY' )
{
until = startDate.clone().add(12, 'months').toISOString();
}
if ( freq === 'YEARLY' )
{
until = startDate.clone().add(5, 'years').toISOString();
}
// Set the until
this.recurrenceForm.get('end.until').setValue(until);
}
// If count is not selected...
if ( endType !== 'count' )
{
let count;
// Change the count's default value based on the frequency
if ( freq === 'DAILY' )
{
count = 30;
}
if ( freq === 'WEEKLY' || freq === 'MONTHLY' )
{
count = 12;
}
if ( freq === 'YEARLY' )
{
count = 5;
}
// Set the count
this.recurrenceForm.get('end.count').setValue(count);
}
}
}

60
src/app/modules/admin/apps/calendar/settings/settings.component.html
View File

@ -1,60 +0,0 @@
<div
class="absolute inset-0 flex flex-col min-w-0 overflow-y-auto"
cdkScrollable>
<!-- Main -->
<div class="flex flex-col flex-auto">
<!-- Header -->
<div class="flex items-center h-16 px-4 sm:px-6 py-2 border-b">
<a
[routerLink]="['..']"
mat-icon-button>
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
</a>
<div class="ml-1 text-lg font-medium">Settings</div>
</div>
<div class="flex flex-auto p-6 sm:p-8">
<form
class="flex flex-col w-full max-w-xs"
[formGroup]="settingsForm">
<mat-form-field class="w-full">
<mat-label>Date format</mat-label>
<mat-select [formControlName]="'dateFormat'">
<mat-option [value]="'ll'">Aug 20, {{year}}</mat-option>
<mat-option [value]="'MM/DD/YYYY'">12/31/{{year}}</mat-option>
<mat-option [value]="'DD/MM/YYYY'">31/12/{{year}}</mat-option>
<mat-option [value]="'YYYY-MM-DD'">{{year}}-12-31</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="w-full">
<mat-label>Time format</mat-label>
<mat-select [formControlName]="'timeFormat'">
<mat-option [value]="'12'">1:00pm</mat-option>
<mat-option [value]="'24'">13:30</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="w-full">
<mat-label>Start week on</mat-label>
<mat-select [formControlName]="'startWeekOn'">
<mat-option [value]="6">Saturday</mat-option>
<mat-option [value]="0">Sunday</mat-option>
<mat-option [value]="1">Monday</mat-option>
</mat-select>
</mat-form-field>
<button
class="mt-4"
mat-flat-button
[color]="'primary'"
[disabled]="settingsForm.invalid || settingsForm.pristine"
(click)="updateSettings()">
Save
</button>
</form>
</div>
</div>
</div>

96
src/app/modules/admin/apps/calendar/settings/settings.component.ts
View File

@ -1,96 +0,0 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { CalendarService } from 'app/modules/admin/apps/calendar/calendar.service';
@Component({
selector : 'calendar-settings',
templateUrl : './settings.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation : ViewEncapsulation.None
})
export class CalendarSettingsComponent implements OnInit, OnDestroy
{
settingsForm: FormGroup;
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
* Constructor
*/
constructor(
private _calendarService: CalendarService,
private _changeDetectorRef: ChangeDetectorRef,
private _formBuilder: FormBuilder
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Accessors
// -----------------------------------------------------------------------------------------------------
/**
* Getter for current year
*/
get year(): string
{
return new Date().getFullYear().toString();
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Create the event form
this.settingsForm = this._formBuilder.group({
dateFormat : [''],
timeFormat : [''],
startWeekOn: ['']
});
// Get settings
this._calendarService.settings$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((settings) => {
// Fill the settings form
this.settingsForm.patchValue(settings);
// Mark for check
this._changeDetectorRef.markForCheck();
});
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
updateSettings(): void
{
// Get the settings
const settings = this.settingsForm.value;
// Update the settings on the server
this._calendarService.updateSettings(settings).subscribe((updatedSettings) => {
// Reset the form with the updated settings
this.settingsForm.reset(updatedSettings);
});
}
}

12
src/app/modules/admin/apps/calendar/sidebar/calendar-colors.ts
View File

@ -1,12 +0,0 @@
export const calendarColors = [
'bg-gray-500',
'bg-red-500',
'bg-orange-500',
'bg-yellow-500',
'bg-green-500',
'bg-teal-500',
'bg-blue-500',
'bg-indigo-500',
'bg-purple-500',
'bg-pink-500'
];

116
src/app/modules/admin/apps/calendar/sidebar/sidebar.component.html
View File

@ -1,116 +0,0 @@
<div class="flex flex-col flex-auto min-h-full p-8">
<div class="pb-6 text-4xl font-extrabold tracking-tight">Calendar</div>
<!-- Calendars -->
<div class="group flex items-center justify-between mb-3">
<span class="text-lg font-medium">Calendars</span>
<mat-icon
class="hidden group-hover:inline-flex icon-size-5 cursor-pointer"
[svgIcon]="'heroicons_solid:plus-circle'"
(click)="addCalendar()"></mat-icon>
</div>
<div
class="group flex items-center justify-between mt-2"
*ngFor="let calendar of calendars">
<div
class="flex items-center"
(click)="toggleCalendarVisibility(calendar)">
<mat-icon
class="cursor-pointer"
[svgIcon]="calendar.visible ? 'check_box' : 'check_box_outline_blank'"></mat-icon>
<span
class="w-3 h-3 ml-2 rounded-full"
[ngClass]="calendar.color"></span>
<span class="ml-2 leading-none">{{calendar.title}}</span>
</div>
<mat-icon
class="hidden group-hover:inline-flex icon-size-5 cursor-pointer"
[svgIcon]="'heroicons_solid:pencil-alt'"
(click)="openEditPanel(calendar)"></mat-icon>
</div>
<!-- Settings -->
<div class="-mx-4 mt-auto">
<a
class="flex items-center w-full py-3 px-4 rounded-full hover:bg-hover"
[routerLink]="['settings']">
<mat-icon [svgIcon]="'heroicons_outline:cog'"></mat-icon>
<span class="ml-2 font-medium leading-none">Settings</span>
</a>
</div>
<!-- Edit panel -->
<ng-template #editPanel>
<div class="flex flex-col w-80 p-8 shadow-2xl rounded-lg bg-card">
<div class="text-2xl font-semibold tracking-tight">
<ng-container *ngIf="!calendar.id">Add calendar</ng-container>
<ng-container *ngIf="calendar.id">Edit calendar</ng-container>
</div>
<div class="flex items-center mt-8">
<mat-form-field class="fuse-mat-no-subscript w-full">
<input
matInput
[(ngModel)]="calendar.title"
[placeholder]="'Title'"
required>
<mat-select
[(value)]="calendar.color"
[disableOptionCentering]="true"
matPrefix>
<mat-select-trigger class="h-6">
<mat-icon [svgIcon]="'heroicons_outline:color-swatch'"></mat-icon>
</mat-select-trigger>
<div class="px-4 pt-5 text-xl font-semibold">Calendar color</div>
<div class="flex flex-wrap w-48 my-4 mx-3 -mr-5">
<mat-option
class="relative flex w-12 h-12 p-0 cursor-pointer rounded-full bg-transparent"
*ngFor="let color of calendarColors"
[value]="color"
#matOption="matOption">
<mat-icon
class="absolute m-3 text-white"
*ngIf="matOption.selected"
[svgIcon]="'heroicons_outline:check'"></mat-icon>
<span
class="flex w-10 h-10 m-1 rounded-full"
[ngClass]="color"></span>
</mat-option>
</div>
</mat-select>
</mat-form-field>
</div>
<!-- Actions -->
<div class="ml-auto mt-8 space-x-2">
<button
mat-button
*ngIf="calendar.id"
(click)="deleteCalendar(calendar)">
Delete
</button>
<button
mat-flat-button
*ngIf="calendar.id"
[color]="'primary'"
[disabled]="!calendar.title"
(click)="saveCalendar(calendar)">
Update
</button>
<button
mat-button
*ngIf="!calendar.id"
(click)="closeEditPanel()">
Cancel
</button>
<button
mat-flat-button
*ngIf="!calendar.id"
[color]="'primary'"
[disabled]="!calendar.title"
(click)="saveCalendar(calendar)">
Add
</button>
</div>
</div>
</ng-template>
</div>

217
src/app/modules/admin/apps/calendar/sidebar/sidebar.component.ts
View File

@ -1,217 +0,0 @@
import { Component, EventEmitter, OnDestroy, OnInit, Output, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { cloneDeep } from 'lodash-es';
import { Calendar } from 'app/modules/admin/apps/calendar/calendar.types';
import { CalendarService } from 'app/modules/admin/apps/calendar/calendar.service';
import { calendarColors } from 'app/modules/admin/apps/calendar/sidebar/calendar-colors';
@Component({
selector : 'calendar-sidebar',
templateUrl : './sidebar.component.html',
encapsulation: ViewEncapsulation.None
})
export class CalendarSidebarComponent implements OnInit, OnDestroy
{
@ViewChild('editPanel') private _editPanel: TemplateRef<any>;
@Output() readonly calendarUpdated: EventEmitter<any> = new EventEmitter<any>();
calendar: Calendar | null;
calendarColors: any = calendarColors;
calendars: Calendar[];
private _editPanelOverlayRef: OverlayRef;
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
* Constructor
*/
constructor(
private _calendarService: CalendarService,
private _overlay: Overlay,
private _viewContainerRef: ViewContainerRef
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Get calendars
this._calendarService.calendars$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((calendars) => {
// Store the calendars
this.calendars = calendars;
});
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
// Dispose the overlay
if ( this._editPanelOverlayRef )
{
this._editPanelOverlayRef.dispose();
}
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Open edit panel
*/
openEditPanel(calendar: Calendar): void
{
// Set the calendar
this.calendar = cloneDeep(calendar);
// Create the overlay if it doesn't exist
if ( !this._editPanelOverlayRef )
{
this._createEditPanelOverlay();
}
// Attach the portal to the overlay
this._editPanelOverlayRef.attach(new TemplatePortal(this._editPanel, this._viewContainerRef));
}
/**
* Close the edit panel
*/
closeEditPanel(): void
{
// Detach the overlay from the portal
if ( this._editPanelOverlayRef )
{
this._editPanelOverlayRef.detach();
}
}
/**
* Toggle the calendar visibility
*
* @param calendar
*/
toggleCalendarVisibility(calendar: Calendar): void
{
// Toggle the visibility
calendar.visible = !calendar.visible;
// Update the calendar
this.saveCalendar(calendar);
}
/**
* Add calendar
*/
addCalendar(): void
{
// Create a new calendar with default values
const calendar = {
id : null,
title : '',
color : 'bg-blue-500',
visible: true
};
// Open the edit panel
this.openEditPanel(calendar);
}
/**
* Save the calendar
*
* @param calendar
*/
saveCalendar(calendar: Calendar): void
{
// If there is no id on the calendar...
if ( !calendar.id )
{
// Add calendar to the server
this._calendarService.addCalendar(calendar).subscribe(() => {
// Close the edit panel
this.closeEditPanel();
// Emit the calendarUpdated event
this.calendarUpdated.emit();
});
}
// Otherwise...
else
{
// Update the calendar on the server
this._calendarService.updateCalendar(calendar.id, calendar).subscribe(() => {
// Close the edit panel
this.closeEditPanel();
// Emit the calendarUpdated event
this.calendarUpdated.emit();
});
}
}
/**
* Delete the calendar
*
* @param calendar
*/
deleteCalendar(calendar: Calendar): void
{
// Delete the calendar on the server
this._calendarService.deleteCalendar(calendar.id).subscribe(() => {
// Close the edit panel
this.closeEditPanel();
// Emit the calendarUpdated event
this.calendarUpdated.emit();
});
}
// -----------------------------------------------------------------------------------------------------
// @ Private methods
// -----------------------------------------------------------------------------------------------------
/**
* Create the edit panel overlay
* @private
*/
private _createEditPanelOverlay(): void
{
// Create the overlay
this._editPanelOverlayRef = this._overlay.create({
hasBackdrop : true,
scrollStrategy : this._overlay.scrollStrategies.reposition(),
positionStrategy: this._overlay.position()
.global()
.centerHorizontally()
.centerVertically()
});
// Detach the overlay from the portal on backdrop click
this._editPanelOverlayRef.backdropClick().subscribe(() => {
this.closeEditPanel();
this.calendar = null;
});
}
}

1
src/app/modules/admin/apps/contacts/contacts.component.html
View File

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

17
src/app/modules/admin/apps/contacts/contacts.component.ts
View File

@ -1,17 +0,0 @@
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
@Component({
selector : 'contacts',
templateUrl : './contacts.component.html',
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ContactsComponent
{
/**
* Constructor
*/
constructor()
{
}
}

49
src/app/modules/admin/apps/contacts/contacts.guards.ts
View File

@ -1,49 +0,0 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { ContactsDetailsComponent } from 'app/modules/admin/apps/contacts/details/details.component';
@Injectable({
providedIn: 'root'
})
export class CanDeactivateContactsDetails implements CanDeactivate<ContactsDetailsComponent>
{
canDeactivate(
component: ContactsDetailsComponent,
currentRoute: ActivatedRouteSnapshot,
currentState: RouterStateSnapshot,
nextState: RouterStateSnapshot
): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
{
// Get the next route
let nextRoute: ActivatedRouteSnapshot = nextState.root;
while ( nextRoute.firstChild )
{
nextRoute = nextRoute.firstChild;
}
// If the next state doesn't contain '/contacts'
// it means we are navigating away from the
// contacts app
if ( !nextState.url.includes('/contacts') )
{
// Let it navigate
return true;
}
// If we are navigating to another contact...
if ( nextRoute.paramMap.get('id') )
{
// Just navigate
return true;
}
// Otherwise...
else
{
// Close the drawer first, and then navigate
return component.closeDrawer().then(() => {
return true;
});
}
}
}

75
src/app/modules/admin/apps/contacts/contacts.module.ts
View File

@ -1,75 +0,0 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MAT_DATE_FORMATS, MatRippleModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDividerModule } from '@angular/material/divider';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatMomentDateModule } from '@angular/material-moment-adapter';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import * as moment from 'moment';
import { FuseAutogrowModule } from '@fuse/directives/autogrow';
import { FuseFindByKeyPipeModule } from '@fuse/pipes/find-by-key';
import { SharedModule } from 'app/shared/shared.module';
import { contactsRoutes } from 'app/modules/admin/apps/contacts/contacts.routing';
import { ContactsComponent } from 'app/modules/admin/apps/contacts/contacts.component';
import { ContactsDetailsComponent } from 'app/modules/admin/apps/contacts/details/details.component';
import { ContactsListComponent } from 'app/modules/admin/apps/contacts/list/list.component';
@NgModule({
declarations: [
ContactsComponent,
ContactsListComponent,
ContactsDetailsComponent
],
imports : [
RouterModule.forChild(contactsRoutes),
MatButtonModule,
MatCheckboxModule,
MatDatepickerModule,
MatDividerModule,
MatFormFieldModule,
MatIconModule,
MatInputModule,
MatMenuModule,
MatMomentDateModule,
MatProgressBarModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatTableModule,
MatTooltipModule,
FuseAutogrowModule,
FuseFindByKeyPipeModule,
SharedModule
],
providers : [
{
provide : MAT_DATE_FORMATS,
useValue: {
parse : {
dateInput: moment.ISO_8601
},
display: {
dateInput : 'LL',
monthYearLabel : 'MMM YYYY',
dateA11yLabel : 'LL',
monthYearA11yLabel: 'MMMM YYYY'
}
}
}
]
})
export class ContactsModule
{
}

138
src/app/modules/admin/apps/contacts/contacts.resolvers.ts
View File

@ -1,138 +0,0 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { ContactsService } from 'app/modules/admin/apps/contacts/contacts.service';
import { Contact, Country, Tag } from 'app/modules/admin/apps/contacts/contacts.types';
@Injectable({
providedIn: 'root'
})
export class ContactsResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(private _contactsService: ContactsService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Contact[]>
{
return this._contactsService.getContacts();
}
}
@Injectable({
providedIn: 'root'
})
export class ContactsContactResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(
private _contactsService: ContactsService,
private _router: Router
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Contact>
{
return this._contactsService.getContactById(route.paramMap.get('id'))
.pipe(
// Error here means the requested contact is not available
catchError((error) => {
// Log the error
console.error(error);
// Get the parent url
const parentUrl = state.url.split('/').slice(0, -1).join('/');
// Navigate to there
this._router.navigateByUrl(parentUrl);
// Throw an error
return throwError(error);
})
);
}
}
@Injectable({
providedIn: 'root'
})
export class ContactsCountriesResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(private _contactsService: ContactsService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Country[]>
{
return this._contactsService.getCountries();
}
}
@Injectable({
providedIn: 'root'
})
export class ContactsTagsResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(private _contactsService: ContactsService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Tag[]>
{
return this._contactsService.getTags();
}
}

37
src/app/modules/admin/apps/contacts/contacts.routing.ts
View File

@ -1,37 +0,0 @@
import { Route } from '@angular/router';
import { CanDeactivateContactsDetails } from 'app/modules/admin/apps/contacts/contacts.guards';
import { ContactsContactResolver, ContactsCountriesResolver, ContactsResolver, ContactsTagsResolver } from 'app/modules/admin/apps/contacts/contacts.resolvers';
import { ContactsComponent } from 'app/modules/admin/apps/contacts/contacts.component';
import { ContactsListComponent } from 'app/modules/admin/apps/contacts/list/list.component';
import { ContactsDetailsComponent } from 'app/modules/admin/apps/contacts/details/details.component';
export const contactsRoutes: Route[] = [
{
path : '',
component: ContactsComponent,
resolve : {
tags: ContactsTagsResolver
},
children : [
{
path : '',
component: ContactsListComponent,
resolve : {
tasks : ContactsResolver,
countries: ContactsCountriesResolver
},
children : [
{
path : ':id',
component : ContactsDetailsComponent,
resolve : {
task : ContactsContactResolver,
countries: ContactsCountriesResolver
},
canDeactivate: [CanDeactivateContactsDetails]
}
]
}
]
}
];

389
src/app/modules/admin/apps/contacts/contacts.service.ts
View File

@ -1,389 +0,0 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable, of, throwError } from 'rxjs';
import { filter, map, switchMap, take, tap } from 'rxjs/operators';
import { Contact, Country, Tag } from 'app/modules/admin/apps/contacts/contacts.types';
@Injectable({
providedIn: 'root'
})
export class ContactsService
{
// Private
private _contact: BehaviorSubject<Contact | null> = new BehaviorSubject(null);
private _contacts: BehaviorSubject<Contact[] | null> = new BehaviorSubject(null);
private _countries: BehaviorSubject<Country[] | null> = new BehaviorSubject(null);
private _tags: BehaviorSubject<Tag[] | null> = new BehaviorSubject(null);
/**
* Constructor
*/
constructor(private _httpClient: HttpClient)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Accessors
// -----------------------------------------------------------------------------------------------------
/**
* Getter for contact
*/
get contact$(): Observable<Contact>
{
return this._contact.asObservable();
}
/**
* Getter for contacts
*/
get contacts$(): Observable<Contact[]>
{
return this._contacts.asObservable();
}
/**
* Getter for countries
*/
get countries$(): Observable<Country[]>
{
return this._countries.asObservable();
}
/**
* Getter for tags
*/
get tags$(): Observable<Tag[]>
{
return this._tags.asObservable();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Get contacts
*/
getContacts(): Observable<Contact[]>
{
return this._httpClient.get<Contact[]>('api/apps/contacts/all').pipe(
tap((contacts) => {
this._contacts.next(contacts);
})
);
}
/**
* Search contacts with given query
*
* @param query
*/
searchContacts(query: string): Observable<Contact[]>
{
return this._httpClient.get<Contact[]>('api/apps/contacts/search', {
params: {query}
}).pipe(
tap((contacts) => {
this._contacts.next(contacts);
})
);
}
/**
* Get contact by id
*/
getContactById(id: string): Observable<Contact>
{
return this._contacts.pipe(
take(1),
map((contacts) => {
// Find the contact
const contact = contacts.find(item => item.id === id) || null;
// Update the contact
this._contact.next(contact);
// Return the contact
return contact;
}),
switchMap((contact) => {
if ( !contact )
{
return throwError('Could not found contact with id of ' + id + '!');
}
return of(contact);
})
);
}
/**
* Create contact
*/
createContact(): Observable<Contact>
{
return this.contacts$.pipe(
take(1),
switchMap((contacts) => this._httpClient.post<Contact>('api/apps/contacts/contact', {}).pipe(
map((newContact) => {
// Update the contacts with the new contact
this._contacts.next([newContact, ...contacts]);
// Return the new contact
return newContact;
})
))
);
}
/**
* Update contact
*
* @param id
* @param contact
*/
updateContact(id: string, contact: Contact): Observable<Contact>
{
return this.contacts$.pipe(
take(1),
switchMap(contacts => this._httpClient.patch<Contact>('api/apps/contacts/contact', {
id,
contact
}).pipe(
map((updatedContact) => {
// Find the index of the updated contact
const index = contacts.findIndex(item => item.id === id);
// Update the contact
contacts[index] = updatedContact;
// Update the contacts
this._contacts.next(contacts);
// Return the updated contact
return updatedContact;
}),
switchMap(updatedContact => this.contact$.pipe(
take(1),
filter(item => item && item.id === id),
tap(() => {
// Update the contact if it's selected
this._contact.next(updatedContact);
// Return the updated contact
return updatedContact;
})
))
))
);
}
/**
* Delete the contact
*
* @param id
*/
deleteContact(id: string): Observable<boolean>
{
return this.contacts$.pipe(
take(1),
switchMap(contacts => this._httpClient.delete('api/apps/contacts/contact', {params: {id}}).pipe(
map((isDeleted: boolean) => {
// Find the index of the deleted contact
const index = contacts.findIndex(item => item.id === id);
// Delete the contact
contacts.splice(index, 1);
// Update the contacts
this._contacts.next(contacts);
// Return the deleted status
return isDeleted;
})
))
);
}
/**
* Get countries
*/
getCountries(): Observable<Country[]>
{
return this._httpClient.get<Country[]>('api/apps/contacts/countries').pipe(
tap((countries) => {
this._countries.next(countries);
})
);
}
/**
* Get tags
*/
getTags(): Observable<Tag[]>
{
return this._httpClient.get<Tag[]>('api/apps/contacts/tags').pipe(
tap((tags) => {
this._tags.next(tags);
})
);
}
/**
* Create tag
*
* @param tag
*/
createTag(tag: Tag): Observable<Tag>
{
return this.tags$.pipe(
take(1),
switchMap(tags => this._httpClient.post<Tag>('api/apps/contacts/tag', {tag}).pipe(
map((newTag) => {
// Update the tags with the new tag
this._tags.next([...tags, newTag]);
// Return new tag from observable
return newTag;
})
))
);
}
/**
* Update the tag
*
* @param id
* @param tag
*/
updateTag(id: string, tag: Tag): Observable<Tag>
{
return this.tags$.pipe(
take(1),
switchMap(tags => this._httpClient.patch<Tag>('api/apps/contacts/tag', {
id,
tag
}).pipe(
map((updatedTag) => {
// Find the index of the updated tag
const index = tags.findIndex(item => item.id === id);
// Update the tag
tags[index] = updatedTag;
// Update the tags
this._tags.next(tags);
// Return the updated tag
return updatedTag;
})
))
);
}
/**
* Delete the tag
*
* @param id
*/
deleteTag(id: string): Observable<boolean>
{
return this.tags$.pipe(
take(1),
switchMap(tags => this._httpClient.delete('api/apps/contacts/tag', {params: {id}}).pipe(
map((isDeleted: boolean) => {
// Find the index of the deleted tag
const index = tags.findIndex(item => item.id === id);
// Delete the tag
tags.splice(index, 1);
// Update the tags
this._tags.next(tags);
// Return the deleted status
return isDeleted;
}),
filter(isDeleted => isDeleted),
switchMap(isDeleted => this.contacts$.pipe(
take(1),
map((contacts) => {
// Iterate through the contacts
contacts.forEach((contact) => {
const tagIndex = contact.tags.findIndex(tag => tag === id);
// If the contact has the tag, remove it
if ( tagIndex > -1 )
{
contact.tags.splice(tagIndex, 1);
}
});
// Return the deleted status
return isDeleted;
})
))
))
);
}
/**
* Update the avatar of the given contact
*
* @param id
* @param avatar
*/
uploadAvatar(id: string, avatar: File): Observable<Contact>
{
return this.contacts$.pipe(
take(1),
switchMap(contacts => this._httpClient.post<Contact>('api/apps/contacts/avatar', {
id,
avatar
}, {
headers: {
'Content-Type': avatar.type
}
}).pipe(
map((updatedContact) => {
// Find the index of the updated contact
const index = contacts.findIndex(item => item.id === id);
// Update the contact
contacts[index] = updatedContact;
// Update the contacts
this._contacts.next(contacts);
// Return the updated contact
return updatedContact;
}),
switchMap(updatedContact => this.contact$.pipe(
take(1),
filter(item => item && item.id === id),
tap(() => {
// Update the contact if it's selected
this._contact.next(updatedContact);
// Return the updated contact
return updatedContact;
})
))
))
);
}
}

37
src/app/modules/admin/apps/contacts/contacts.types.ts
View File

@ -1,37 +0,0 @@
export interface Contact
{
id: string;
avatar?: string | null;
background?: string | null;
name: string;
emails?: {
email: string,
label: string
}[];
phoneNumbers?: {
country: string;
number: string;
label: string
}[];
title?: string;
company?: string;
birthday?: string | null;
address?: string | null;
notes?: string | null;
tags: string[];
}
export interface Country
{
id: string;
iso: string;
name: string;
code: string;
flagImagePos: string;
}
export interface Tag
{
id?: string;
title?: string;
}

641
src/app/modules/admin/apps/contacts/details/details.component.html
View File

@ -1,641 +0,0 @@
<div class="flex flex-col w-full">
<!-- View mode -->
<ng-container *ngIf="!editMode">
<!-- Header -->
<div class="relative w-full h-40 sm:h-48 px-8 sm:px-12 bg-accent-100 dark:bg-accent-700">
<!-- Background -->
<ng-container *ngIf="contact.background">
<img
class="absolute inset-0 object-cover w-full h-full"
[src]="contact.background">
</ng-container>
<!-- Close button -->
<div class="flex items-center justify-end w-full max-w-3xl mx-auto pt-6">
<button
mat-icon-button
[matTooltip]="'Close'"
[routerLink]="['../']">
<mat-icon
class="text-white"
[svgIcon]="'heroicons_outline:x'"></mat-icon>
</button>
</div>
</div>
<!-- Contact -->
<div class="relative flex flex-col flex-auto items-center p-6 pt-0 sm:p-12 sm:pt-0">
<div class="w-full max-w-3xl">
<!-- Avatar and actions -->
<div class="flex flex-auto items-end -mt-16">
<!-- Avatar -->
<div class="flex items-center justify-center w-32 h-32 rounded-full overflow-hidden ring-4 ring-bg-card">
<img
class="object-cover w-full h-full"
*ngIf="contact.avatar"
[src]="contact.avatar">
<div
class="flex items-center justify-center w-full h-full rounded overflow-hidden uppercase text-8xl font-bold leading-none bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200"
*ngIf="!contact.avatar">
{{contact.name.charAt(0)}}
</div>
</div>
<!-- Actions -->
<div class="flex items-center ml-auto mb-1">
<button
mat-stroked-button
(click)="toggleEditMode(true)">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
<span class="ml-2">Edit</span>
</button>
</div>
</div>
<!-- Name -->
<div class="mt-3 text-4xl font-bold truncate">{{contact.name}}</div>
<!-- Tags -->
<ng-container *ngIf="contact.tags.length">
<div class="flex flex-wrap items-center mt-2">
<!-- Tag -->
<ng-container *ngFor="let tag of (contact.tags | fuseFindByKey:'id':tags); trackBy: trackByFn">
<div class="flex items-center justify-center py-1 px-3 mr-3 mb-3 rounded-full leading-normal text-gray-500 bg-gray-100 dark:text-gray-300 dark:bg-gray-700">
<span class="text-sm font-medium whitespace-nowrap">{{tag.title}}</span>
</div>
</ng-container>
</div>
</ng-container>
<div class="flex flex-col mt-4 pt-6 border-t space-y-8">
<!-- Title -->
<ng-container *ngIf="contact.title">
<div class="flex sm:items-center">
<mat-icon [svgIcon]="'heroicons_outline:briefcase'"></mat-icon>
<div class="ml-6 leading-6">{{contact.title}}</div>
</div>
</ng-container>
<!-- Company -->
<ng-container *ngIf="contact.company">
<div class="flex sm:items-center">
<mat-icon [svgIcon]="'heroicons_outline:office-building'"></mat-icon>
<div class="ml-6 leading-6">{{contact.company}}</div>
</div>
</ng-container>
<!-- Emails -->
<ng-container *ngIf="contact.emails.length">
<div class="flex">
<mat-icon [svgIcon]="'heroicons_outline:mail'"></mat-icon>
<div class="min-w-0 ml-6 space-y-1">
<ng-container *ngFor="let email of contact.emails; trackBy: trackByFn">
<div class="flex items-center leading-6">
<a
class="hover:underline text-primary-500"
[href]="'mailto:' + email.email"
target="_blank">
{{email.email}}
</a>
<div
class="text-md truncate text-secondary"
*ngIf="email.label">
<span class="mx-2">&bull;</span>
<span class="font-medium">{{email.label}}</span>
</div>
</div>
</ng-container>
</div>
</div>
</ng-container>
<!-- Phone -->
<ng-container *ngIf="contact.phoneNumbers.length">
<div class="flex">
<mat-icon [svgIcon]="'heroicons_outline:phone'"></mat-icon>
<div class="min-w-0 ml-6 space-y-1">
<ng-container *ngFor="let phoneNumber of contact.phoneNumbers; trackBy: trackByFn">
<div class="flex items-center leading-6">
<div
class="hidden sm:flex w-6 h-4 overflow-hidden"
[matTooltip]="getCountryByIso(phoneNumber.country).name"
[style.background]="'url(\'/assets/images/apps/contacts/flags.png\') no-repeat 0 0'"
[style.backgroundSize]="'24px 3876px'"
[style.backgroundPosition]="getCountryByIso(phoneNumber.country).flagImagePos"></div>
<div class="sm:ml-3 font-mono">{{getCountryByIso(phoneNumber.country).code}}</div>
<div class="ml-2.5 font-mono">{{phoneNumber.number}}</div>
<div
class="text-md truncate text-secondary"
*ngIf="phoneNumber.label">
<span class="mx-2">&bull;</span>
<span class="font-medium">{{phoneNumber.label}}</span>
</div>
</div>
</ng-container>
</div>
</div>
</ng-container>
<!-- Address -->
<ng-container *ngIf="contact.address">
<div class="flex sm:items-center">
<mat-icon [svgIcon]="'heroicons_outline:location-marker'"></mat-icon>
<div class="ml-6 leading-6">{{contact.address}}</div>
</div>
</ng-container>
<!-- Birthday -->
<ng-container *ngIf="contact.birthday">
<div class="flex sm:items-center">
<mat-icon [svgIcon]="'heroicons_outline:cake'"></mat-icon>
<div class="ml-6 leading-6">{{contact.birthday | date:'longDate'}}</div>
</div>
</ng-container>
<!-- Notes -->
<ng-container *ngIf="contact.notes">
<div class="flex">
<mat-icon [svgIcon]="'heroicons_outline:menu-alt-2'"></mat-icon>
<div
class="max-w-none ml-6 prose prose-sm"
[innerHTML]="contact.notes"></div>
</div>
</ng-container>
</div>
</div>
</div>
</ng-container>
<!-- Edit mode -->
<ng-container *ngIf="editMode">
<!-- Header -->
<div class="relative w-full h-40 sm:h-48 px-8 sm:px-12 bg-accent-100 dark:bg-accent-700">
<!-- Background -->
<ng-container *ngIf="contact.background">
<img
class="absolute inset-0 object-cover w-full h-full"
[src]="contact.background">
</ng-container>
<!-- Close button -->
<div class="flex items-center justify-end w-full max-w-3xl mx-auto pt-6">
<button
mat-icon-button
[matTooltip]="'Close'"
[routerLink]="['../']">
<mat-icon
class="text-white"
[svgIcon]="'heroicons_outline:x'"></mat-icon>
</button>
</div>
</div>
<!-- Contact form -->
<div class="relative flex flex-col flex-auto items-center px-6 sm:px-12">
<div class="w-full max-w-3xl">
<form [formGroup]="contactForm">
<!-- Avatar -->
<div class="flex flex-auto items-end -mt-16">
<div class="relative flex items-center justify-center w-32 h-32 rounded-full overflow-hidden ring-4 ring-bg-card">
<!-- Upload / Remove avatar -->
<div class="absolute inset-0 bg-black bg-opacity-50 z-10"></div>
<div class="absolute inset-0 flex items-center justify-center z-20">
<div>
<input
id="avatar-file-input"
class="absolute h-0 w-0 opacity-0 invisible pointer-events-none"
type="file"
[multiple]="false"
[accept]="'image/jpeg, image/png'"
(change)="uploadAvatar(avatarFileInput.files)"
#avatarFileInput>
<label
class="flex items-center justify-center w-10 h-10 rounded-full cursor-pointer hover:bg-hover"
for="avatar-file-input"
matRipple>
<mat-icon
class="text-white"
[svgIcon]="'heroicons_outline:camera'"></mat-icon>
</label>
</div>
<div>
<button
mat-icon-button
(click)="removeAvatar()">
<mat-icon
class="text-white"
[svgIcon]="'heroicons_outline:trash'"></mat-icon>
</button>
</div>
</div>
<!-- Image/Letter -->
<img
class="object-cover w-full h-full"
*ngIf="contact.avatar"
[src]="contact.avatar">
<div
class="flex items-center justify-center w-full h-full rounded overflow-hidden uppercase text-8xl font-bold leading-none bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200"
*ngIf="!contact.avatar">
{{contact.name.charAt(0)}}
</div>
</div>
</div>
<!-- Name -->
<div class="mt-8">
<mat-form-field class="fuse-mat-no-subscript w-full">
<mat-label>Name</mat-label>
<mat-icon
matPrefix
class="hidden sm:flex icon-size-5"
[svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
<input
matInput
[formControlName]="'name'"
[placeholder]="'Name'"
[spellcheck]="false">
</mat-form-field>
</div>
<!-- Tags -->
<div class="flex flex-wrap items-center -m-1.5 mt-6">
<!-- Tags -->
<ng-container *ngIf="contact.tags.length">
<ng-container *ngFor="let tag of (contact.tags | fuseFindByKey:'id':tags); trackBy: trackByFn">
<div class="flex items-center justify-center px-4 m-1.5 rounded-full leading-9 text-gray-500 bg-gray-100 dark:text-gray-300 dark:bg-gray-700">
<span class="text-md font-medium whitespace-nowrap">{{tag.title}}</span>
</div>
</ng-container>
</ng-container>
<!-- Tags panel and its button -->
<div
class="flex items-center justify-center px-4 m-1.5 rounded-full leading-9 cursor-pointer text-gray-500 bg-gray-100 dark:text-gray-300 dark:bg-gray-700"
(click)="openTagsPanel()"
#tagsPanelOrigin>
<ng-container *ngIf="contact.tags.length">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
<span class="ml-1.5 text-md font-medium whitespace-nowrap">Edit</span>
</ng-container>
<ng-container *ngIf="!contact.tags.length">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
<span class="ml-1.5 text-md font-medium whitespace-nowrap">Add</span>
</ng-container>
<!-- Tags panel -->
<ng-template #tagsPanel>
<div class="w-60 rounded border shadow-md bg-card">
<!-- Tags panel header -->
<div class="flex items-center m-3 mr-2">
<div class="flex items-center">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:search'"></mat-icon>
<div class="ml-2">
<input
class="w-full min-w-0 py-1 border-0"
type="text"
placeholder="Enter tag name"
(input)="filterTags($event)"
(keydown)="filterTagsInputKeyDown($event)"
[maxLength]="30"
#newTagInput>
</div>
</div>
<button
class="ml-1"
mat-icon-button
(click)="toggleTagsEditMode()">
<mat-icon
*ngIf="!tagsEditMode"
class="icon-size-5"
[svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
<mat-icon
*ngIf="tagsEditMode"
class="icon-size-5"
[svgIcon]="'heroicons_solid:check'"></mat-icon>
</button>
</div>
<div
class="flex flex-col max-h-64 py-2 border-t overflow-y-auto">
<!-- Tags -->
<ng-container *ngIf="!tagsEditMode">
<div
*ngFor="let tag of filteredTags; trackBy: trackByFn"
class="flex items-center h-10 min-h-10 px-4 cursor-pointer hover:bg-hover"
(click)="toggleContactTag(tag)"
matRipple>
<mat-checkbox
class="flex items-center h-10 min-h-10"
[color]="'primary'"
[checked]="contact.tags.includes(tag.id)">
</mat-checkbox>
<div class="ml-1">{{tag.title}}</div>
</div>
</ng-container>
<!-- Tags editing -->
<ng-container *ngIf="tagsEditMode">
<div class="py-2 space-y-2">
<div
class="flex items-center"
*ngFor="let tag of filteredTags; trackBy: trackByFn">
<mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full mx-4">
<input
matInput
[value]="tag.title"
(input)="updateTagTitle(tag, $event)">
<button
mat-icon-button
(click)="deleteTag(tag)"
matSuffix>
<mat-icon
class="icon-size-5 ml-2"
[svgIcon]="'heroicons_solid:trash'"></mat-icon>
</button>
</mat-form-field>
</div>
</div>
</ng-container>
<!-- Create tag -->
<div
class="flex items-center h-10 min-h-10 -ml-0.5 pl-4 pr-3 leading-none cursor-pointer hover:bg-hover"
*ngIf="shouldShowCreateTagButton(newTagInput.value)"
(click)="createTag(newTagInput.value); newTagInput.value = ''"
matRipple>
<mat-icon
class="mr-2 icon-size-5"
[svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
<div class="break-all">Create "<b>{{newTagInput.value}}</b>"</div>
</div>
</div>
</div>
</ng-template>
</div>
</div>
<!-- Title -->
<div class="mt-8">
<mat-form-field class="fuse-mat-no-subscript w-full">
<mat-label>Title</mat-label>
<mat-icon
matPrefix
class="hidden sm:flex icon-size-5"
[svgIcon]="'heroicons_solid:briefcase'"></mat-icon>
<input
matInput
[formControlName]="'title'"
[placeholder]="'Job title'">
</mat-form-field>
</div>
<!-- Company -->
<div class="mt-8">
<mat-form-field class="fuse-mat-no-subscript w-full">
<mat-label>Company</mat-label>
<mat-icon
matPrefix
class="hidden sm:flex icon-size-5"
[svgIcon]="'heroicons_solid:office-building'"></mat-icon>
<input
matInput
[formControlName]="'company'"
[placeholder]="'Company'">
</mat-form-field>
</div>
<!-- Emails -->
<div class="mt-8">
<div class="space-y-4">
<ng-container *ngFor="let email of contactForm.get('emails')['controls']; let i = index; let first = first; let last = last; trackBy: trackByFn">
<div class="flex">
<mat-form-field class="fuse-mat-no-subscript flex-auto">
<mat-label *ngIf="first">Email</mat-label>
<mat-icon
matPrefix
class="hidden sm:flex icon-size-5"
[svgIcon]="'heroicons_solid:mail'"></mat-icon>
<input
matInput
[formControl]="email.get('email')"
[placeholder]="'Email address'"
[spellcheck]="false">
</mat-form-field>
<mat-form-field class="fuse-mat-no-subscript flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4">
<mat-label *ngIf="first">Label</mat-label>
<mat-icon
matPrefix
class="hidden sm:flex icon-size-5"
[svgIcon]="'heroicons_solid:tag'"></mat-icon>
<input
matInput
[formControl]="email.get('label')"
[placeholder]="'Label'">
</mat-form-field>
<!-- Remove email -->
<ng-container *ngIf="!(first && last)">
<div
class="flex items-center w-10 pl-2"
[ngClass]="{'mt-6': first}">
<button
class="w-8 h-8 min-h-8"
mat-icon-button
(click)="removeEmailField(i)"
matTooltip="Remove">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:trash'"></mat-icon>
</button>
</div>
</ng-container>
</div>
</ng-container>
</div>
<div
class="group inline-flex items-center mt-2 -ml-4 py-2 px-4 rounded cursor-pointer"
(click)="addEmailField()">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
<span class="ml-2 font-medium text-secondary group-hover:underline">Add an email address</span>
</div>
</div>
<!-- Phone numbers -->
<div class="mt-8">
<div class="space-y-4">
<ng-container *ngFor="let phoneNumber of contactForm.get('phoneNumbers')['controls']; let i = index; let first = first; let last = last; trackBy: trackByFn">
<div class="relative flex">
<mat-form-field class="fuse-mat-no-subscript flex-auto">
<mat-label *ngIf="first">Phone</mat-label>
<input
matInput
[formControl]="phoneNumber.get('number')"
[placeholder]="'Phone'">
<mat-select
class="mr-1.5"
[formControl]="phoneNumber.get('country')"
matPrefix>
<mat-select-trigger>
<span class="flex items-center">
<span
class="hidden sm:flex w-6 h-4 mr-1 overflow-hidden"
[style.background]="'url(\'/assets/images/apps/contacts/flags.png\') no-repeat 0 0'"
[style.backgroundSize]="'24px 3876px'"
[style.backgroundPosition]="getCountryByIso(phoneNumber.get('country').value).flagImagePos"></span>
<span class="sm:mx-0.5 font-medium text-default">{{getCountryByIso(phoneNumber.get('country').value).code}}</span>
</span>
</mat-select-trigger>
<mat-option
*ngFor="let country of countries; trackBy: trackByFn"
[value]="country.iso">
<span class="flex items-center">
<span
class="w-6 h-4 overflow-hidden"
[style.background]="'url(\'/assets/images/apps/contacts/flags.png\') no-repeat 0 0'"
[style.backgroundSize]="'24px 3876px'"
[style.backgroundPosition]="country.flagImagePos"></span>
<span class="ml-2">{{country.name}}</span>
<span class="ml-2 font-medium">{{country.code}}</span>
</span>
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="fuse-mat-no-subscript flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4">
<mat-label *ngIf="first">Label</mat-label>
<mat-icon
matPrefix
class="hidden sm:flex icon-size-5"
[svgIcon]="'heroicons_solid:tag'"></mat-icon>
<input
matInput
[formControl]="phoneNumber.get('label')"
[placeholder]="'Label'">
</mat-form-field>
<!-- Remove phone number -->
<ng-container *ngIf="!(first && last)">
<div
class="flex items-center w-10 pl-2"
[ngClass]="{'mt-6': first}">
<button
class="w-8 h-8 min-h-8"
mat-icon-button
(click)="removePhoneNumberField(i)"
matTooltip="Remove">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:trash'"></mat-icon>
</button>
</div>
</ng-container>
</div>
</ng-container>
</div>
<div
class="group inline-flex items-center mt-2 -ml-4 py-2 px-4 rounded cursor-pointer"
(click)="addPhoneNumberField()">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
<span class="ml-2 font-medium text-secondary group-hover:underline">Add a phone number</span>
</div>
</div>
<!-- Address -->
<div class="mt-8">
<mat-form-field class="fuse-mat-no-subscript w-full">
<mat-label>Address</mat-label>
<mat-icon
matPrefix
class="hidden sm:flex icon-size-5"
[svgIcon]="'heroicons_solid:location-marker'"></mat-icon>
<input
matInput
[formControlName]="'address'"
[placeholder]="'Address'">
</mat-form-field>
</div>
<!-- Birthday -->
<div class="mt-8">
<mat-form-field class="fuse-mat-no-subscript w-full">
<mat-label>Birthday</mat-label>
<mat-icon
matPrefix
class="hidden sm:flex icon-size-5"
[svgIcon]="'heroicons_solid:cake'"></mat-icon>
<input
matInput
[matDatepicker]="birthdayDatepicker"
[formControlName]="'birthday'"
[placeholder]="'Birthday'">
<mat-datepicker-toggle
matSuffix
[for]="birthdayDatepicker">
</mat-datepicker-toggle>
<mat-datepicker #birthdayDatepicker></mat-datepicker>
</mat-form-field>
</div>
<!-- Notes -->
<div class="mt-8">
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
<mat-label>Notes</mat-label>
<mat-icon
matPrefix
class="hidden sm:flex icon-size-5"
[svgIcon]="'heroicons_solid:menu-alt-2'"></mat-icon>
<textarea
matInput
fuseAutogrow
[rows]="5"
[formControlName]="'notes'"
[placeholder]="'Notes'"
[spellcheck]="false"></textarea>
</mat-form-field>
</div>
<!-- Actions -->
<div class="flex items-center mt-10 -mx-6 sm:-mx-12 py-4 pr-4 pl-1 sm:pr-12 sm:pl-7 border-t bg-gray-50 dark:bg-transparent">
<!-- Delete -->
<button
mat-button
[color]="'warn'"
[matTooltip]="'Delete'"
(click)="deleteContact()">
Delete
</button>
<!-- Cancel -->
<button
class="ml-auto"
mat-button
[matTooltip]="'Cancel'"
(click)="toggleEditMode(false)">
Cancel
</button>
<!-- Save -->
<button
class="ml-2"
mat-flat-button
[color]="'primary'"
[disabled]="contactForm.invalid"
[matTooltip]="'Save'"
(click)="updateContact()">
Save
</button>
</div>
</form>
</div>
</div>
</ng-container>
</div>

711
src/app/modules/admin/apps/contacts/details/details.component.ts
View File

@ -1,711 +0,0 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, Renderer2, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { TemplatePortal } from '@angular/cdk/portal';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { MatDrawerToggleResult } from '@angular/material/sidenav';
import { Subject } from 'rxjs';
import { debounceTime, takeUntil } from 'rxjs/operators';
import { Contact, Country, Tag } from 'app/modules/admin/apps/contacts/contacts.types';
import { ContactsListComponent } from 'app/modules/admin/apps/contacts/list/list.component';
import { ContactsService } from 'app/modules/admin/apps/contacts/contacts.service';
@Component({
selector : 'contacts-details',
templateUrl : './details.component.html',
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ContactsDetailsComponent implements OnInit, OnDestroy
{
@ViewChild('avatarFileInput') private _avatarFileInput: ElementRef;
@ViewChild('tagsPanel') private _tagsPanel: TemplateRef<any>;
@ViewChild('tagsPanelOrigin') private _tagsPanelOrigin: ElementRef;
editMode: boolean = false;
tags: Tag[];
tagsEditMode: boolean = false;
filteredTags: Tag[];
contact: Contact;
contactForm: FormGroup;
contacts: Contact[];
countries: Country[];
private _tagsPanelOverlayRef: OverlayRef;
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
* Constructor
*/
constructor(
private _activatedRoute: ActivatedRoute,
private _changeDetectorRef: ChangeDetectorRef,
private _contactsListComponent: ContactsListComponent,
private _contactsService: ContactsService,
private _formBuilder: FormBuilder,
private _renderer2: Renderer2,
private _router: Router,
private _overlay: Overlay,
private _viewContainerRef: ViewContainerRef
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Open the drawer
this._contactsListComponent.matDrawer.open();
// Create the contact form
this.contactForm = this._formBuilder.group({
id : [''],
avatar : [null],
name : ['', [Validators.required]],
emails : this._formBuilder.array([]),
phoneNumbers: this._formBuilder.array([]),
title : [''],
company : [''],
birthday : [null],
address : [null],
notes : [null],
tags : [[]]
});
// Get the contacts
this._contactsService.contacts$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((contacts: Contact[]) => {
this.contacts = contacts;
// Mark for check
this._changeDetectorRef.markForCheck();
});
// Get the contact
this._contactsService.contact$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((contact: Contact) => {
// Open the drawer in case it is closed
this._contactsListComponent.matDrawer.open();
// Get the contact
this.contact = contact;
// Clear the emails and phoneNumbers form arrays
(this.contactForm.get('emails') as FormArray).clear();
(this.contactForm.get('phoneNumbers') as FormArray).clear();
// Patch values to the form
this.contactForm.patchValue(contact);
// Setup the emails form array
const emailFormGroups = [];
if ( contact.emails.length > 0 )
{
// Iterate through them
contact.emails.forEach((email) => {
// Create an email form group
emailFormGroups.push(
this._formBuilder.group({
email: [email.email],
label: [email.label]
})
);
});
}
else
{
// Create an email form group
emailFormGroups.push(
this._formBuilder.group({
email: [''],
label: ['']
})
);
}
// Add the email form groups to the emails form array
emailFormGroups.forEach((emailFormGroup) => {
(this.contactForm.get('emails') as FormArray).push(emailFormGroup);
});
// Setup the phone numbers form array
const phoneNumbersFormGroups = [];
if ( contact.phoneNumbers.length > 0 )
{
// Iterate through them
contact.phoneNumbers.forEach((phoneNumber) => {
// Create an email form group
phoneNumbersFormGroups.push(
this._formBuilder.group({
country: [phoneNumber.country],
number : [phoneNumber.number],
label : [phoneNumber.label]
})
);
});
}
else
{
// Create a phone number form group
phoneNumbersFormGroups.push(
this._formBuilder.group({
country: ['us'],
number : [''],
label : ['']
})
);
}
// Add the phone numbers form groups to the phone numbers form array
phoneNumbersFormGroups.forEach((phoneNumbersFormGroup) => {
(this.contactForm.get('phoneNumbers') as FormArray).push(phoneNumbersFormGroup);
});
// Toggle the edit mode off
this.toggleEditMode(false);
// Mark for check
this._changeDetectorRef.markForCheck();
});
// Get the country telephone codes
this._contactsService.countries$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((codes: Country[]) => {
this.countries = codes;
// Mark for check
this._changeDetectorRef.markForCheck();
});
// Get the tags
this._contactsService.tags$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((tags: Tag[]) => {
this.tags = tags;
this.filteredTags = tags;
// Mark for check
this._changeDetectorRef.markForCheck();
});
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
// Dispose the overlays if they are still on the DOM
if ( this._tagsPanelOverlayRef )
{
this._tagsPanelOverlayRef.dispose();
}
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Close the drawer
*/
closeDrawer(): Promise<MatDrawerToggleResult>
{
return this._contactsListComponent.matDrawer.close();
}
/**
* Toggle edit mode
*
* @param editMode
*/
toggleEditMode(editMode: boolean | null = null): void
{
if ( editMode === null )
{
this.editMode = !this.editMode;
}
else
{
this.editMode = editMode;
}
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* Update the contact
*/
updateContact(): void
{
// Get the contact object
const contact = this.contactForm.getRawValue();
// Go through the contact object and clear empty values
contact.emails = contact.emails.filter((email) => {
return email.email;
});
contact.phoneNumbers = contact.phoneNumbers.filter((phoneNumber) => {
return phoneNumber.number;
});
// Update the contact on the server
this._contactsService.updateContact(contact.id, contact).subscribe(() => {
// Toggle the edit mode off
this.toggleEditMode(false);
});
}
/**
* Delete the contact
*/
deleteContact(): void
{
// Get the current contact's id
const id = this.contact.id;
// Get the next/previous contact's id
const currentContactIndex = this.contacts.findIndex(item => item.id === id);
const nextContactIndex = currentContactIndex + ((currentContactIndex === (this.contacts.length - 1)) ? -1 : 1);
const nextContactId = (this.contacts.length === 1 && this.contacts[0].id === id) ? null : this.contacts[nextContactIndex].id;
// Delete the contact
this._contactsService.deleteContact(id)
.subscribe((isDeleted) => {
// Return if the contact wasn't deleted...
if ( !isDeleted )
{
return;
}
// Get the current activated route
let route = this._activatedRoute;
while ( route.firstChild )
{
route = route.firstChild;
}
// Navigate to the next contact if available
if ( nextContactId )
{
this._router.navigate(['../', nextContactId], {relativeTo: route});
}
// Otherwise, navigate to the parent
else
{
this._router.navigate(['../'], {relativeTo: route});
}
// Toggle the edit mode off
this.toggleEditMode(false);
});
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* Upload avatar
*
* @param fileList
*/
uploadAvatar(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;
}
// Upload the avatar
this._contactsService.uploadAvatar(this.contact.id, file).subscribe();
}
/**
* Remove the avatar
*/
removeAvatar(): void
{
// Get the form control for 'avatar'
const avatarFormControl = this.contactForm.get('avatar');
// Set the avatar as null
avatarFormControl.setValue(null);
// Set the file input value as null
this._avatarFileInput.nativeElement.value = null;
// Update the contact
this.contact.avatar = null;
}
/**
* Open tags panel
*/
openTagsPanel(): void
{
// Create the overlay
this._tagsPanelOverlayRef = this._overlay.create({
backdropClass : '',
hasBackdrop : true,
scrollStrategy : this._overlay.scrollStrategies.block(),
positionStrategy: this._overlay.position()
.flexibleConnectedTo(this._tagsPanelOrigin.nativeElement)
.withFlexibleDimensions()
.withViewportMargin(64)
.withLockedPosition()
.withPositions([
{
originX : 'start',
originY : 'bottom',
overlayX: 'start',
overlayY: 'top'
}
])
});
// Subscribe to the attachments observable
this._tagsPanelOverlayRef.attachments().subscribe(() => {
// Add a class to the origin
this._renderer2.addClass(this._tagsPanelOrigin.nativeElement, 'panel-opened');
// Focus to the search input once the overlay has been attached
this._tagsPanelOverlayRef.overlayElement.querySelector('input').focus();
});
// Create a portal from the template
const templatePortal = new TemplatePortal(this._tagsPanel, this._viewContainerRef);
// Attach the portal to the overlay
this._tagsPanelOverlayRef.attach(templatePortal);
// Subscribe to the backdrop click
this._tagsPanelOverlayRef.backdropClick().subscribe(() => {
// Remove the class from the origin
this._renderer2.removeClass(this._tagsPanelOrigin.nativeElement, 'panel-opened');
// If overlay exists and attached...
if ( this._tagsPanelOverlayRef && this._tagsPanelOverlayRef.hasAttached() )
{
// Detach it
this._tagsPanelOverlayRef.detach();
// Reset the tag filter
this.filteredTags = this.tags;
// Toggle the edit mode off
this.tagsEditMode = false;
}
// If template portal exists and attached...
if ( templatePortal && templatePortal.isAttached )
{
// Detach it
templatePortal.detach();
}
});
}
/**
* Toggle the tags edit mode
*/
toggleTagsEditMode(): void
{
this.tagsEditMode = !this.tagsEditMode;
}
/**
* Filter tags
*
* @param event
*/
filterTags(event): void
{
// Get the value
const value = event.target.value.toLowerCase();
// Filter the tags
this.filteredTags = this.tags.filter(tag => tag.title.toLowerCase().includes(value));
}
/**
* Filter tags input key down event
*
* @param event
*/
filterTagsInputKeyDown(event): void
{
// Return if the pressed key is not 'Enter'
if ( event.key !== 'Enter' )
{
return;
}
// If there is no tag available...
if ( this.filteredTags.length === 0 )
{
// Create the tag
this.createTag(event.target.value);
// Clear the input
event.target.value = '';
// Return
return;
}
// If there is a tag...
const tag = this.filteredTags[0];
const isTagApplied = this.contact.tags.find((id) => id === tag.id);
// If the found tag is already applied to the contact...
if ( isTagApplied )
{
// Remove the tag from the contact
this.removeTagFromContact(tag);
}
else
{
// Otherwise add the tag to the contact
this.addTagToContact(tag);
}
}
/**
* Create a new tag
*
* @param title
*/
createTag(title: string): void
{
const tag = {
title
};
// Create tag on the server
this._contactsService.createTag(tag)
.subscribe((response) => {
// Add the tag to the contact
this.addTagToContact(response);
});
}
/**
* Update the tag title
*
* @param tag
* @param event
*/
updateTagTitle(tag: Tag, event): void
{
// Update the title on the tag
tag.title = event.target.value;
// Update the tag on the server
this._contactsService.updateTag(tag.id, tag)
.pipe(debounceTime(300))
.subscribe();
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* Delete the tag
*
* @param tag
*/
deleteTag(tag: Tag): void
{
// Delete the tag from the server
this._contactsService.deleteTag(tag.id).subscribe();
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* Add tag to the contact
*
* @param tag
*/
addTagToContact(tag: Tag): void
{
// Add the tag
this.contact.tags.unshift(tag.id);
// Update the contact form
this.contactForm.get('tags').patchValue(this.contact.tags);
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* Remove tag from the contact
*
* @param tag
*/
removeTagFromContact(tag: Tag): void
{
// Remove the tag
this.contact.tags.splice(this.contact.tags.findIndex(item => item === tag.id), 1);
// Update the contact form
this.contactForm.get('tags').patchValue(this.contact.tags);
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* Toggle contact tag
*
* @param tag
*/
toggleContactTag(tag: Tag): void
{
if ( this.contact.tags.includes(tag.id) )
{
this.removeTagFromContact(tag);
}
else
{
this.addTagToContact(tag);
}
}
/**
* Should the create tag button be visible
*
* @param inputValue
*/
shouldShowCreateTagButton(inputValue: string): boolean
{
return !!!(inputValue === '' || this.tags.findIndex(tag => tag.title.toLowerCase() === inputValue.toLowerCase()) > -1);
}
/**
* Add the email field
*/
addEmailField(): void
{
// Create an empty email form group
const emailFormGroup = this._formBuilder.group({
email: [''],
label: ['']
});
// Add the email form group to the emails form array
(this.contactForm.get('emails') as FormArray).push(emailFormGroup);
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* Remove the email field
*
* @param index
*/
removeEmailField(index: number): void
{
// Get form array for emails
const emailsFormArray = this.contactForm.get('emails') as FormArray;
// Remove the email field
emailsFormArray.removeAt(index);
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* Add an empty phone number field
*/
addPhoneNumberField(): void
{
// Create an empty phone number form group
const phoneNumberFormGroup = this._formBuilder.group({
country: ['us'],
number : [''],
label : ['']
});
// Add the phone number form group to the phoneNumbers form array
(this.contactForm.get('phoneNumbers') as FormArray).push(phoneNumberFormGroup);
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* Remove the phone number field
*
* @param index
*/
removePhoneNumberField(index: number): void
{
// Get form array for phone numbers
const phoneNumbersFormArray = this.contactForm.get('phoneNumbers') as FormArray;
// Remove the phone number field
phoneNumbersFormArray.removeAt(index);
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* Get country info by iso code
*
* @param iso
*/
getCountryByIso(iso: string): Country
{
return this.countries.find((country) => country.iso === iso);
}
/**
* Track by function for ngFor loops
*
* @param index
* @param item
*/
trackByFn(index: number, item: any): any
{
return item.id || index;
}
}

120
src/app/modules/admin/apps/contacts/list/list.component.html
View File

@ -1,120 +0,0 @@
<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"
(backdropClick)="onBackdropClicked()">
<!-- Drawer -->
<mat-drawer
class="w-full md:w-160 dark:bg-gray-900"
[mode]="drawerMode"
[opened]="false"
[position]="'end'"
[disableClose]="true"
#matDrawer>
<router-outlet></router-outlet>
</mat-drawer>
<mat-drawer-content class="flex flex-col">
<!-- Main -->
<div class="flex-auto">
<!-- Header -->
<div class="flex flex-col sm:flex-row md:flex-col flex-auto justify-between py-8 px-6 md:px-8 border-b">
<!-- Title -->
<div>
<div class="text-4xl font-extrabold tracking-tight leading-none">Contacts</div>
<div class="ml-0.5 font-medium text-secondary">
<ng-container *ngIf="contactsCount > 0">
{{contactsCount}}
</ng-container>
{{contactsCount | i18nPlural: {
'=0' : 'No contacts',
'=1' : 'contact',
'other': 'contacts'
} }}
</div>
</div>
<!-- Main actions -->
<div class="flex items-center mt-4 sm:mt-0 md:mt-4">
<!-- Search -->
<div class="flex-auto">
<mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full min-w-50">
<mat-icon
class="icon-size-5"
matPrefix
[svgIcon]="'heroicons_solid:search'"></mat-icon>
<input
matInput
[formControl]="searchInputControl"
[autocomplete]="'off'"
[placeholder]="'Search contacts'">
</mat-form-field>
</div>
<!-- Add contact button -->
<button
class="ml-4"
mat-flat-button
[color]="'primary'"
(click)="createContact()">
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
<span class="ml-2 mr-1">Add</span>
</button>
</div>
</div>
<!-- Contacts list -->
<div class="relative">
<ng-container *ngIf="contacts$ | async as contacts">
<ng-container *ngIf="contacts.length; else noContacts">
<ng-container *ngFor="let contact of contacts; let i = index; trackBy: trackByFn">
<!-- Group -->
<ng-container *ngIf="i === 0 || contact.name.charAt(0) !== contacts[i - 1].name.charAt(0)">
<div class="z-10 sticky top-0 -mt-px px-6 py-1 md:px-8 border-t border-b font-medium uppercase text-secondary bg-gray-50 dark:bg-gray-900">
{{contact.name.charAt(0)}}
</div>
</ng-container>
<!-- Contact -->
<div
class="z-20 flex items-center px-6 py-4 md:px-8 cursor-pointer hover:bg-hover border-b"
[ngClass]="{'bg-primary-50 dark:bg-hover': selectedContact && selectedContact.id === contact.id}"
(click)="goToContact(contact.id)">
<div class="flex flex-0 items-center justify-center w-10 h-10 rounded-full overflow-hidden">
<ng-container *ngIf="contact.avatar">
<img
class="object-cover w-full h-full"
[src]="contact.avatar"
alt="Contact avatar"/>
</ng-container>
<ng-container *ngIf="!contact.avatar">
<div class="flex items-center justify-center w-full h-full rounded-full text-lg uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
{{contact.name.charAt(0)}}
</div>
</ng-container>
</div>
<div class="min-w-0 ml-4">
<div class="font-medium leading-5 truncate">{{contact.name}}</div>
<div class="leading-5 truncate text-secondary">{{contact.title}}</div>
</div>
</div>
</ng-container>
</ng-container>
</ng-container>
<!-- No contacts -->
<ng-template #noContacts>
<div class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center">There are no contacts!</div>
</ng-template>
</div>
</div>
</mat-drawer-content>
</mat-drawer-container>
</div>

241
src/app/modules/admin/apps/contacts/list/list.component.ts
View File

@ -1,241 +0,0 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { ActivatedRoute, Router } from '@angular/router';
import { FormControl } from '@angular/forms';
import { MatDrawer } from '@angular/material/sidenav';
import { fromEvent, Observable, Subject } from 'rxjs';
import { filter, switchMap, takeUntil } from 'rxjs/operators';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { Contact, Country } from 'app/modules/admin/apps/contacts/contacts.types';
import { ContactsService } from 'app/modules/admin/apps/contacts/contacts.service';
@Component({
selector : 'contacts-list',
templateUrl : './list.component.html',
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ContactsListComponent implements OnInit, OnDestroy
{
@ViewChild('matDrawer', {static: true}) matDrawer: MatDrawer;
contacts$: Observable<Contact[]>;
contactsCount: number = 0;
contactsTableColumns: string[] = ['name', 'email', 'phoneNumber', 'job'];
countries: Country[];
drawerMode: 'side' | 'over';
searchInputControl: FormControl = new FormControl();
selectedContact: Contact;
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
* Constructor
*/
constructor(
private _activatedRoute: ActivatedRoute,
private _changeDetectorRef: ChangeDetectorRef,
private _contactsService: ContactsService,
@Inject(DOCUMENT) private _document: any,
private _router: Router,
private _fuseMediaWatcherService: FuseMediaWatcherService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Get the contacts
this.contacts$ = this._contactsService.contacts$;
this._contactsService.contacts$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((contacts: Contact[]) => {
// Update the counts
this.contactsCount = contacts.length;
// Mark for check
this._changeDetectorRef.markForCheck();
});
// Get the contact
this._contactsService.contact$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((contact: Contact) => {
// Update the selected contact
this.selectedContact = contact;
// Mark for check
this._changeDetectorRef.markForCheck();
});
// Get the countries
this._contactsService.countries$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((countries: Country[]) => {
// Update the countries
this.countries = countries;
// Mark for check
this._changeDetectorRef.markForCheck();
});
// Subscribe to search input field value changes
this.searchInputControl.valueChanges
.pipe(
takeUntil(this._unsubscribeAll),
switchMap((query) => {
// Search
return this._contactsService.searchContacts(query);
})
)
.subscribe();
// Subscribe to MatDrawer opened change
this.matDrawer.openedChange.subscribe((opened) => {
if ( !opened )
{
// Remove the selected contact when drawer closed
this.selectedContact = null;
// Mark for check
this._changeDetectorRef.markForCheck();
}
});
// Subscribe to media changes
this._fuseMediaWatcherService.onMediaChange$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(({matchingAliases}) => {
// Set the drawerMode if the given breakpoint is active
if ( matchingAliases.includes('lg') )
{
this.drawerMode = 'side';
}
else
{
this.drawerMode = 'over';
}
// Mark for check
this._changeDetectorRef.markForCheck();
});
// Listen for shortcuts
fromEvent(this._document, 'keydown')
.pipe(
takeUntil(this._unsubscribeAll),
filter<KeyboardEvent>((event) => {
return (event.ctrlKey === true || event.metaKey) // Ctrl or Cmd
&& (event.key === '/'); // '/'
})
)
.subscribe(() => {
this.createContact();
});
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Go to contact
*
* @param id
*/
goToContact(id: string): void
{
// Get the current activated route
let route = this._activatedRoute;
while ( route.firstChild )
{
route = route.firstChild;
}
// Go to contact
this._router.navigate(['../', id], {relativeTo: route});
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* On backdrop clicked
*/
onBackdropClicked(): void
{
// Get the current activated route
let route = this._activatedRoute;
while ( route.firstChild )
{
route = route.firstChild;
}
// Go to the parent route
this._router.navigate(['../'], {relativeTo: route});
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* Create contact
*/
createContact(): void
{
// Create the contact
this._contactsService.createContact().subscribe((newContact) => {
// Go to new contact
this.goToContact(newContact.id);
});
}
/**
* Get country code
*
* @param iso
*/
getCountryCode(iso: string): string
{
if ( !iso )
{
return '';
}
return this.countries.find((country) => country.iso === iso).code;
}
/**
* Track by function for ngFor loops
*
* @param index
* @param item
*/
trackByFn(index: number, item: any): any
{
return item.id || index;
}
}

48
src/app/modules/admin/apps/ecommerce/ecommerce.module.ts
View File

@ -1,48 +0,0 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
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 { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatRippleModule } from '@angular/material/core';
import { MatSortModule } from '@angular/material/sort';
import { MatSelectModule } from '@angular/material/select';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { SharedModule } from 'app/shared/shared.module';
import { InventoryComponent } from 'app/modules/admin/apps/ecommerce/inventory/inventory.component';
import { InventoryListComponent } from 'app/modules/admin/apps/ecommerce/inventory/list/inventory.component';
import { ecommerceRoutes } from 'app/modules/admin/apps/ecommerce/ecommerce.routing';
@NgModule({
declarations: [
InventoryComponent,
InventoryListComponent
],
imports : [
RouterModule.forChild(ecommerceRoutes),
MatButtonModule,
MatCheckboxModule,
MatFormFieldModule,
MatIconModule,
MatInputModule,
MatMenuModule,
MatPaginatorModule,
MatProgressBarModule,
MatRippleModule,
MatSortModule,
MatSelectModule,
MatSlideToggleModule,
MatTableModule,
MatTooltipModule,
SharedModule
]
})
export class ECommerceModule
{
}

50
src/app/modules/admin/apps/ecommerce/ecommerce.routing.ts
View File

@ -1,50 +0,0 @@
import { Route } from '@angular/router';
import { InventoryComponent } from 'app/modules/admin/apps/ecommerce/inventory/inventory.component';
import { InventoryListComponent } from 'app/modules/admin/apps/ecommerce/inventory/list/inventory.component';
import { InventoryBrandsResolver, InventoryCategoriesResolver, InventoryProductsResolver, InventoryTagsResolver, InventoryVendorsResolver } from 'app/modules/admin/apps/ecommerce/inventory/inventory.resolvers';
export const ecommerceRoutes: Route[] = [
{
path : '',
pathMatch : 'full',
redirectTo: 'inventory'
},
{
path : 'inventory',
component: InventoryComponent,
children : [
{
path : '',
component: InventoryListComponent,
resolve : {
brands : InventoryBrandsResolver,
categories: InventoryCategoriesResolver,
products : InventoryProductsResolver,
tags : InventoryTagsResolver,
vendors : InventoryVendorsResolver
}
}
]
/*children : [
{
path : '',
component: ContactsListComponent,
resolve : {
tasks : ContactsResolver,
countries: ContactsCountriesResolver
},
children : [
{
path : ':id',
component : ContactsDetailsComponent,
resolve : {
task : ContactsContactResolver,
countries: ContactsCountriesResolver
},
canDeactivate: [CanDeactivateContactsDetails]
}
]
}
]*/
}
];

1
src/app/modules/admin/apps/ecommerce/inventory/inventory.component.html
View File

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

17
src/app/modules/admin/apps/ecommerce/inventory/inventory.component.ts
View File

@ -1,17 +0,0 @@
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
@Component({
selector : 'inventory',
templateUrl : './inventory.component.html',
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class InventoryComponent
{
/**
* Constructor
*/
constructor()
{
}
}

194
src/app/modules/admin/apps/ecommerce/inventory/inventory.resolvers.ts
View File

@ -1,194 +0,0 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { InventoryService } from 'app/modules/admin/apps/ecommerce/inventory/inventory.service';
import { InventoryBrand, InventoryCategory, InventoryPagination, InventoryProduct, InventoryTag, InventoryVendor } from 'app/modules/admin/apps/ecommerce/inventory/inventory.types';
@Injectable({
providedIn: 'root'
})
export class InventoryBrandsResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(private _inventoryService: InventoryService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<InventoryBrand[]>
{
return this._inventoryService.getBrands();
}
}
@Injectable({
providedIn: 'root'
})
export class InventoryCategoriesResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(private _inventoryService: InventoryService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<InventoryCategory[]>
{
return this._inventoryService.getCategories();
}
}
@Injectable({
providedIn: 'root'
})
export class InventoryProductResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(
private _inventoryService: InventoryService,
private _router: Router
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<InventoryProduct>
{
return this._inventoryService.getProductById(route.paramMap.get('id'))
.pipe(
// Error here means the requested product is not available
catchError((error) => {
// Log the error
console.error(error);
// Get the parent url
const parentUrl = state.url.split('/').slice(0, -1).join('/');
// Navigate to there
this._router.navigateByUrl(parentUrl);
// Throw an error
return throwError(error);
})
);
}
}
@Injectable({
providedIn: 'root'
})
export class InventoryProductsResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(private _inventoryService: InventoryService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<{ pagination: InventoryPagination, products: InventoryProduct[] }>
{
return this._inventoryService.getProducts();
}
}
@Injectable({
providedIn: 'root'
})
export class InventoryTagsResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(private _inventoryService: InventoryService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<InventoryTag[]>
{
return this._inventoryService.getTags();
}
}
@Injectable({
providedIn: 'root'
})
export class InventoryVendorsResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(private _inventoryService: InventoryService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<InventoryVendor[]>
{
return this._inventoryService.getVendors();
}
}

441
src/app/modules/admin/apps/ecommerce/inventory/inventory.service.ts
View File

@ -1,441 +0,0 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable, of, throwError } from 'rxjs';
import { filter, map, switchMap, take, tap } from 'rxjs/operators';
import { InventoryBrand, InventoryCategory, InventoryPagination, InventoryProduct, InventoryTag, InventoryVendor } from 'app/modules/admin/apps/ecommerce/inventory/inventory.types';
@Injectable({
providedIn: 'root'
})
export class InventoryService
{
// Private
private _brands: BehaviorSubject<InventoryBrand[] | null> = new BehaviorSubject(null);
private _categories: BehaviorSubject<InventoryCategory[] | null> = new BehaviorSubject(null);
private _pagination: BehaviorSubject<InventoryPagination | null> = new BehaviorSubject(null);
private _product: BehaviorSubject<InventoryProduct | null> = new BehaviorSubject(null);
private _products: BehaviorSubject<InventoryProduct[] | null> = new BehaviorSubject(null);
private _tags: BehaviorSubject<InventoryTag[] | null> = new BehaviorSubject(null);
private _vendors: BehaviorSubject<InventoryVendor[] | null> = new BehaviorSubject(null);
/**
* Constructor
*/
constructor(private _httpClient: HttpClient)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Accessors
// -----------------------------------------------------------------------------------------------------
/**
* Getter for brands
*/
get brands$(): Observable<InventoryBrand[]>
{
return this._brands.asObservable();
}
/**
* Getter for categories
*/
get categories$(): Observable<InventoryCategory[]>
{
return this._categories.asObservable();
}
/**
* Getter for pagination
*/
get pagination$(): Observable<InventoryPagination>
{
return this._pagination.asObservable();
}
/**
* Getter for product
*/
get product$(): Observable<InventoryProduct>
{
return this._product.asObservable();
}
/**
* Getter for products
*/
get products$(): Observable<InventoryProduct[]>
{
return this._products.asObservable();
}
/**
* Getter for tags
*/
get tags$(): Observable<InventoryTag[]>
{
return this._tags.asObservable();
}
/**
* Getter for vendors
*/
get vendors$(): Observable<InventoryVendor[]>
{
return this._vendors.asObservable();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Get brands
*/
getBrands(): Observable<InventoryBrand[]>
{
return this._httpClient.get<InventoryBrand[]>('api/apps/ecommerce/inventory/brands').pipe(
tap((brands) => {
this._brands.next(brands);
})
);
}
/**
* Get categories
*/
getCategories(): Observable<InventoryCategory[]>
{
return this._httpClient.get<InventoryCategory[]>('api/apps/ecommerce/inventory/categories').pipe(
tap((categories) => {
this._categories.next(categories);
})
);
}
/**
* Get products
*
*
* @param page
* @param size
* @param sort
* @param order
* @param search
*/
getProducts(page: number = 0, size: number = 10, sort: string = 'name', order: 'asc' | 'desc' | '' = 'asc', search: string = ''):
Observable<{ pagination: InventoryPagination, products: InventoryProduct[] }>
{
return this._httpClient.get<{ pagination: InventoryPagination, products: InventoryProduct[] }>('api/apps/ecommerce/inventory/products', {
params: {
page: '' + page,
size: '' + size,
sort,
order,
search
}
}).pipe(
tap((response) => {
this._pagination.next(response.pagination);
this._products.next(response.products);
})
);
}
/**
* Get product by id
*/
getProductById(id: string): Observable<InventoryProduct>
{
return this._products.pipe(
take(1),
map((products) => {
// Find the product
const product = products.find(item => item.id === id) || null;
// Update the product
this._product.next(product);
// Return the product
return product;
}),
switchMap((product) => {
if ( !product )
{
return throwError('Could not found product with id of ' + id + '!');
}
return of(product);
})
);
}
/**
* Create product
*/
createProduct(): Observable<InventoryProduct>
{
return this.products$.pipe(
take(1),
switchMap((products) => this._httpClient.post<InventoryProduct>('api/apps/ecommerce/inventory/product', {}).pipe(
map((newProduct) => {
// Update the products with the new product
this._products.next([newProduct, ...products]);
// Return the new product
return newProduct;
})
))
);
}
/**
* Update product
*
* @param id
* @param product
*/
updateProduct(id: string, product: InventoryProduct): Observable<InventoryProduct>
{
return this.products$.pipe(
take(1),
switchMap(products => this._httpClient.patch<InventoryProduct>('api/apps/ecommerce/inventory/product', {
id,
product
}).pipe(
map((updatedProduct) => {
// Find the index of the updated product
const index = products.findIndex(item => item.id === id);
// Update the product
products[index] = updatedProduct;
// Update the products
this._products.next(products);
// Return the updated product
return updatedProduct;
}),
switchMap(updatedProduct => this.product$.pipe(
take(1),
filter(item => item && item.id === id),
tap(() => {
// Update the product if it's selected
this._product.next(updatedProduct);
// Return the updated product
return updatedProduct;
})
))
))
);
}
/**
* Delete the product
*
* @param id
*/
deleteProduct(id: string): Observable<boolean>
{
return this.products$.pipe(
take(1),
switchMap(products => this._httpClient.delete('api/apps/ecommerce/inventory/product', {params: {id}}).pipe(
map((isDeleted: boolean) => {
// Find the index of the deleted product
const index = products.findIndex(item => item.id === id);
// Delete the product
products.splice(index, 1);
// Update the products
this._products.next(products);
// Return the deleted status
return isDeleted;
})
))
);
}
/**
* Get tags
*/
getTags(): Observable<InventoryTag[]>
{
return this._httpClient.get<InventoryTag[]>('api/apps/ecommerce/inventory/tags').pipe(
tap((tags) => {
this._tags.next(tags);
})
);
}
/**
* Create tag
*
* @param tag
*/
createTag(tag: InventoryTag): Observable<InventoryTag>
{
return this.tags$.pipe(
take(1),
switchMap(tags => this._httpClient.post<InventoryTag>('api/apps/ecommerce/inventory/tag', {tag}).pipe(
map((newTag) => {
// Update the tags with the new tag
this._tags.next([...tags, newTag]);
// Return new tag from observable
return newTag;
})
))
);
}
/**
* Update the tag
*
* @param id
* @param tag
*/
updateTag(id: string, tag: InventoryTag): Observable<InventoryTag>
{
return this.tags$.pipe(
take(1),
switchMap(tags => this._httpClient.patch<InventoryTag>('api/apps/ecommerce/inventory/tag', {
id,
tag
}).pipe(
map((updatedTag) => {
// Find the index of the updated tag
const index = tags.findIndex(item => item.id === id);
// Update the tag
tags[index] = updatedTag;
// Update the tags
this._tags.next(tags);
// Return the updated tag
return updatedTag;
})
))
);
}
/**
* Delete the tag
*
* @param id
*/
deleteTag(id: string): Observable<boolean>
{
return this.tags$.pipe(
take(1),
switchMap(tags => this._httpClient.delete('api/apps/ecommerce/inventory/tag', {params: {id}}).pipe(
map((isDeleted: boolean) => {
// Find the index of the deleted tag
const index = tags.findIndex(item => item.id === id);
// Delete the tag
tags.splice(index, 1);
// Update the tags
this._tags.next(tags);
// Return the deleted status
return isDeleted;
}),
filter(isDeleted => isDeleted),
switchMap(isDeleted => this.products$.pipe(
take(1),
map((products) => {
// Iterate through the contacts
products.forEach((product) => {
const tagIndex = product.tags.findIndex(tag => tag === id);
// If the contact has the tag, remove it
if ( tagIndex > -1 )
{
product.tags.splice(tagIndex, 1);
}
});
// Return the deleted status
return isDeleted;
})
))
))
);
}
/**
* Get vendors
*/
getVendors(): Observable<InventoryVendor[]>
{
return this._httpClient.get<InventoryVendor[]>('api/apps/ecommerce/inventory/vendors').pipe(
tap((vendors) => {
this._vendors.next(vendors);
})
);
}
/**
* Update the avatar of the given contact
*
* @param id
* @param avatar
*/
/*uploadAvatar(id: string, avatar: File): Observable<Contact>
{
return this.contacts$.pipe(
take(1),
switchMap(contacts => this._httpClient.post<Contact>('api/apps/contacts/avatar', {
id,
avatar
}, {
headers: {
'Content-Type': avatar.type
}
}).pipe(
map((updatedContact) => {
// Find the index of the updated contact
const index = contacts.findIndex(item => item.id === id);
// Update the contact
contacts[index] = updatedContact;
// Update the contacts
this._contacts.next(contacts);
// Return the updated contact
return updatedContact;
}),
switchMap(updatedContact => this.contact$.pipe(
take(1),
filter(item => item && item.id === id),
tap(() => {
// Update the contact if it's selected
this._contact.next(updatedContact);
// Return the updated contact
return updatedContact;
})
))
))
);
}*/
}

60
src/app/modules/admin/apps/ecommerce/inventory/inventory.types.ts
View File

@ -1,60 +0,0 @@
export interface InventoryProduct
{
id: string;
category?: string;
name: string;
description?: string;
tags?: string[];
sku?: string | null;
barcode?: string | null;
brand?: string | null;
vendor: string | null;
stock: number;
reserved: number;
cost: number;
basePrice: number;
taxPercent: number;
price: number;
weight: number;
thumbnail: string;
images: string[];
active: boolean;
}
export interface InventoryPagination
{
length: number;
size: number;
page: number;
lastPage: number;
startIndex: number;
endIndex: number;
}
export interface InventoryCategory
{
id: string;
parentId: string;
name: string;
slug: string;
}
export interface InventoryBrand
{
id: string;
name: string;
slug: string;
}
export interface InventoryTag
{
id?: string;
title?: string;
}
export interface InventoryVendor
{
id: string;
name: string;
slug: string;
}

567
src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html
View File

@ -1,567 +0,0 @@
<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden bg-card dark:bg-transparent">
<!-- Header -->
<div class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-8 px-6 md:px-8 border-b">
<!-- Loader -->
<div
class="absolute inset-x-0 bottom-0"
*ngIf="isLoading">
<mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
</div>
<!-- Title -->
<div class="text-4xl font-extrabold tracking-tight">Inventory</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<!-- Search -->
<mat-form-field class="fuse-mat-dense fuse-mat-no-subscript min-w-50">
<mat-icon
matPrefix
[svgIcon]="'heroicons_outline:search'"></mat-icon>
<input
matInput
[formControl]="searchInputControl"
[autocomplete]="'off'"
[placeholder]="'Search products'">
</mat-form-field>
<!-- Add product button -->
<button
class="ml-4"
mat-flat-button
[color]="'primary'"
(click)="createProduct()">
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
<span class="ml-2 mr-1">Add</span>
</button>
</div>
</div>
<!-- Main -->
<div class="flex flex-auto overflow-hidden">
<!-- Products list -->
<div class="flex flex-col flex-auto sm:mb-18 overflow-hidden">
<ng-container *ngIf="productsCount > 0; else noProducts">
<!-- Table wrapper -->
<div
class="overflow-x-auto sm:overflow-y-auto"
cdkScrollable>
<!-- Table -->
<table
class="w-full min-w-320 table-fixed bg-transparent"
[ngClass]="{'pointer-events-none': isLoading}"
mat-table
matSort
[matSortActive]="'name'"
[matSortDisableClear]="true"
[matSortDirection]="'asc'"
[multiTemplateDataRows]="true"
[dataSource]="products$"
[trackBy]="trackByFn">
<!-- SKU -->
<ng-container matColumnDef="sku">
<th
class="w-56 pl-26 bg-gray-50 dark:bg-black dark:bg-opacity-5"
mat-header-cell
*matHeaderCellDef
mat-sort-header
disableClear>
SKU
</th>
<td
class="px-8"
mat-cell
*matCellDef="let product">
<div class="flex items-center">
<span class="relative flex flex-0 items-center justify-center w-12 h-12 mr-6 rounded overflow-hidden border">
<img
class="w-8"
*ngIf="product.thumbnail"
[src]="product.thumbnail">
<span
class="flex items-center justify-center w-full h-full text-xs font-semibold leading-none text-center uppercase"
*ngIf="!product.thumbnail">
No Image
</span>
</span>
<span class="truncate">{{product.sku}}</span>
</div>
</td>
</ng-container>
<!-- Name -->
<ng-container matColumnDef="name">
<th
class="bg-gray-50 dark:bg-black dark:bg-opacity-5"
mat-header-cell
*matHeaderCellDef
mat-sort-header
disableClear>
Name
</th>
<td
class="pr-8 truncate"
mat-cell
*matCellDef="let product">
{{product.name}}
</td>
</ng-container>
<!-- Price -->
<ng-container matColumnDef="price">
<th
class="w-40 bg-gray-50 dark:bg-black dark:bg-opacity-5"
mat-header-cell
*matHeaderCellDef
mat-sort-header
disableClear>
Price
</th>
<td
class="pr-4"
mat-cell
*matCellDef="let product">
{{product.price | currency:'USD':'symbol':'1.2-2'}}
</td>
</ng-container>
<!-- Stock -->
<ng-container matColumnDef="stock">
<th
class="w-24 bg-gray-50 dark:bg-black dark:bg-opacity-5"
mat-header-cell
*matHeaderCellDef
mat-sort-header
disableClear>
Stock
</th>
<td
class="pr-4"
mat-cell
*matCellDef="let product">
<span class="flex items-center">
<span class="min-w-4">{{product.stock}}</span>
<!-- Low stock -->
<span
class="flex items-end ml-2 w-1 h-4 bg-red-200 rounded overflow-hidden"
*ngIf="product.stock < 20">
<span class="flex w-full h-1/3 bg-red-600"></span>
</span>
<!-- Medium stock -->
<span
class="flex items-end ml-2 w-1 h-4 bg-orange-200 rounded overflow-hidden"
*ngIf="product.stock >= 20 && product.stock < 30">
<span class="flex w-full h-2/4 bg-orange-400"></span>
</span>
<!-- High stock -->
<span
class="flex items-end ml-2 w-1 h-4 bg-green-100 rounded overflow-hidden"
*ngIf="product.stock >= 30">
<span class="flex w-full h-full bg-green-400"></span>
</span>
</span>
</td>
</ng-container>
<!-- Active -->
<ng-container matColumnDef="active">
<th
class="w-24 bg-gray-50 dark:bg-black dark:bg-opacity-5"
mat-header-cell
*matHeaderCellDef
mat-sort-header
disableClear>
Active
</th>
<td
class="pr-4"
mat-cell
*matCellDef="let product">
<mat-icon
class="text-green-400 icon-size-5"
*ngIf="product.active"
[svgIcon]="'heroicons_solid:check'"></mat-icon>
<mat-icon
class="text-gray-400 icon-size-5"
*ngIf="!product.active"
[svgIcon]="'heroicons_solid:x'"></mat-icon>
</td>
</ng-container>
<!-- Details -->
<ng-container matColumnDef="details">
<th
class="w-24 pr-8 bg-gray-50 dark:bg-black dark:bg-opacity-5"
mat-header-cell
*matHeaderCellDef>
Details
</th>
<td
class="pr-8"
mat-cell
*matCellDef="let product">
<button
class="min-w-10 min-h-7 h-7 px-2 leading-6"
mat-stroked-button
(click)="toggleDetails(product.id)">
<mat-icon
class="icon-size-5"
[svgIcon]="selectedProduct?.id === product.id ? 'heroicons_solid:chevron-up' : 'heroicons_solid:chevron-down'"></mat-icon>
</button>
</td>
</ng-container>
<!-- Product details row -->
<ng-container matColumnDef="productDetails">
<td
class="p-0 border-b-0"
mat-cell
*matCellDef="let product"
[attr.colspan]="productsTableColumns.length">
<div
class="shadow-lg overflow-hidden"
[@expandCollapse]="selectedProduct?.id === product.id ? 'expanded' : 'collapsed'">
<div class="flex border-b">
<!-- Selected product form -->
<form
class="flex flex-col w-full"
[formGroup]="selectedProductForm">
<div class="flex p-8">
<!-- Product images and status -->
<div class="flex flex-col">
<div class="flex flex-col items-center">
<div class="p-3 border rounded">
<ng-container *ngIf="selectedProductForm.get('images').value.length; else noImage">
<img
class="w-30 min-w-30"
[src]="selectedProductForm.get('images').value[selectedProductForm.get('currentImageIndex').value]">
</ng-container>
<ng-template #noImage>
<span class="flex items-center min-h-20 text-lg font-semibold">NO IMAGE</span>
</ng-template>
</div>
<div
class="flex items-center mt-2"
*ngIf="selectedProductForm.get('images').value.length">
<button
mat-icon-button
(click)="cycleImages(false)">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:arrow-narrow-left'"></mat-icon>
</button>
<span class="font-sm mx-2">
{{selectedProductForm.get('currentImageIndex').value + 1}} of {{selectedProductForm.get('images').value.length}}
</span>
<button
mat-icon-button
(click)="cycleImages(true)">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:arrow-narrow-right'"></mat-icon>
</button>
</div>
</div>
<div class="flex flex-col mt-8">
<span class="font-semibold mb-2">Product status</span>
<mat-slide-toggle
[formControlName]="'active'"
[color]="'primary'">
{{selectedProductForm.get('active').value === true ? 'Active' : 'Disabled'}}
</mat-slide-toggle>
</div>
</div>
<div class="flex flex-auto">
<div class="flex flex-col w-2/4 pl-8">
<!-- Name -->
<mat-form-field class="w-full">
<mat-label>Name</mat-label>
<input
matInput
[formControlName]="'name'">
</mat-form-field>
<!-- SKU and Barcode -->
<div class="flex">
<mat-form-field class="w-1/3 pr-2">
<mat-label>SKU</mat-label>
<input
matInput
[formControlName]="'sku'">
</mat-form-field>
<mat-form-field class="w-2/3 pl-2">
<mat-label>Barcode</mat-label>
<input
matInput
[formControlName]="'barcode'">
</mat-form-field>
</div>
<!-- Category, Brand & Vendor -->
<div class="flex">
<mat-form-field class="w-1/3 pr-2">
<mat-label>Category</mat-label>
<mat-select [formControlName]="'category'">
<mat-option
*ngFor="let category of categories"
[value]="category.id">
{{category.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="w-1/3 px-2">
<mat-label>Brand</mat-label>
<mat-select [formControlName]="'brand'">
<mat-option
*ngFor="let brand of brands"
[value]="brand.id">
{{brand.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="w-1/3 pl-2">
<mat-label>Vendor</mat-label>
<mat-select [formControlName]="'vendor'">
<mat-option
*ngFor="let vendor of vendors"
[value]="vendor.id">
{{vendor.name}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<!-- Stock and Reserved -->
<div class="flex">
<mat-form-field class="w-1/3 pr-2">
<mat-label>Stock</mat-label>
<input
type="number"
matInput
[formControlName]="'stock'">
</mat-form-field>
<mat-form-field class="w-1/3 pl-2">
<mat-label>Reserved</mat-label>
<input
type="number"
matInput
[formControlName]="'reserved'">
</mat-form-field>
</div>
</div>
<!-- Cost, Base price, Tax & Price -->
<div class="flex flex-col w-1/4 pl-8">
<mat-form-field class="w-full">
<mat-label>Cost</mat-label>
<span matPrefix>$</span>
<input
matInput
[formControlName]="'cost'">
</mat-form-field>
<mat-form-field class="w-full">
<mat-label>Base Price</mat-label>
<span matPrefix>$</span>
<input
matInput
[formControlName]="'basePrice'">
</mat-form-field>
<mat-form-field class="w-full">
<mat-label>Tax</mat-label>
<span matSuffix>%</span>
<input
type="number"
matInput
[formControlName]="'taxPercent'">
</mat-form-field>
<mat-form-field class="w-full">
<mat-label>Price</mat-label>
<span matSuffix>$</span>
<input
matInput
[formControlName]="'price'">
</mat-form-field>
</div>
<!-- Weight & Tags -->
<div class="flex flex-col w-1/4 pl-8">
<mat-form-field class="w-full">
<mat-label>Weight</mat-label>
<span matSuffix>lbs.</span>
<input
matInput
[formControlName]="'weight'">
</mat-form-field>
<!-- Tags -->
<ng-container *ngIf="selectedProduct && selectedProduct.tags.length">
<span class="font-semibold">Tags</span>
<div class="mt-1 rounded-md border shadow-sm overflow-hidden">
<!-- Header -->
<div class="flex items-center my-2 mx-3">
<div class="flex items-center flex-auto min-w-0">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:search'"></mat-icon>
<input
class="min-w-0 ml-2 py-1 border-0"
type="text"
placeholder="Enter tag name"
(input)="filterTags($event)"
(keydown)="filterTagsInputKeyDown($event)"
[maxLength]="50"
#newTagInput>
</div>
<button
class="ml-3 w-8 h-8 min-h-8"
mat-icon-button
(click)="toggleTagsEditMode()">
<mat-icon
*ngIf="!tagsEditMode"
class="icon-size-5"
[svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
<mat-icon
*ngIf="tagsEditMode"
class="icon-size-5"
[svgIcon]="'heroicons_solid:check'"></mat-icon>
</button>
</div>
<!-- Available tags -->
<div class="max-h-40 leading-none overflow-y-auto border-t">
<!-- Tags -->
<ng-container *ngIf="!tagsEditMode">
<ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
<mat-checkbox
class="flex items-center h-10 min-h-10 px-4"
[color]="'primary'"
[checked]="selectedProduct.tags.includes(tag.id)"
(change)="toggleProductTag(tag, $event)">
{{tag.title}}
</mat-checkbox>
</ng-container>
</ng-container>
<!-- Tags editing -->
<ng-container *ngIf="tagsEditMode">
<div class="p-4 space-y-2">
<ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
<mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full">
<input
matInput
[value]="tag.title"
(input)="updateTagTitle(tag, $event)">
<button
mat-icon-button
(click)="deleteTag(tag)"
matSuffix>
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:trash'"></mat-icon>
</button>
</mat-form-field>
</ng-container>
</div>
</ng-container>
</div>
<div
class="flex items-center h-10 min-h-10 -ml-0.5 pl-4 pr-3 leading-none cursor-pointer border-t hover:bg-hover"
*ngIf="shouldShowCreateTagButton(newTagInput.value)"
(click)="createTag(newTagInput.value); newTagInput.value = ''"
matRipple>
<mat-icon
class="mr-2 icon-size-5"
[svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
<div class="break-all">Create "<b>{{newTagInput.value}}</b>"</div>
</div>
</div>
</ng-container>
</div>
</div>
</div>
<div class="flex items-center justify-between w-full border-t px-8 py-4">
<button
class="-ml-4"
mat-button
[color]="'warn'"
(click)="deleteSelectedProduct()">
Delete
</button>
<div class="flex items-center">
<div
class="flex items-center mr-4"
*ngIf="flashMessage">
<ng-container *ngIf="flashMessage === 'success'">
<mat-icon
class="text-green-500"
[svgIcon]="'heroicons_outline:check'"></mat-icon>
<span class="ml-2">Product updated</span>
</ng-container>
<ng-container *ngIf="flashMessage === 'error'">
<mat-icon
class="text-red-500"
[svgIcon]="'heroicons_outline:x'"></mat-icon>
<span class="ml-2">An error occurred, try again!</span>
</ng-container>
</div>
<button
mat-flat-button
[color]="'primary'"
(click)="updateSelectedProduct()">
Update
</button>
</div>
</div>
</form>
</div>
</div>
</td>
</ng-container>
<tr
class="shadow"
mat-header-row
*matHeaderRowDef="productsTableColumns; sticky: true"></tr>
<tr
class="h-18 hover:bg-hover"
mat-row
*matRowDef="let product; columns: productsTableColumns;"></tr>
<tr
class="h-0"
mat-row
*matRowDef="let row; columns: ['productDetails']"></tr>
</table>
</div>
<mat-paginator
class="sm:absolute sm:inset-x-0 sm:bottom-0 border-b sm:border-t sm:border-b-0 z-10 bg-gray-50 dark:bg-transparent"
[ngClass]="{'pointer-events-none': isLoading}"
[length]="pagination.length"
[pageIndex]="pagination.page"
[pageSize]="pagination.size"
[pageSizeOptions]="[5, 10, 25, 100]"
[showFirstLastButtons]="true"></mat-paginator>
</ng-container>
<ng-template #noProducts>
<div class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center">There are no products!</div>
</ng-template>
</div>
</div>
</div>

552
src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.ts
View File

@ -1,552 +0,0 @@
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { merge, Observable, Subject } from 'rxjs';
import { debounceTime, map, switchMap, takeUntil } from 'rxjs/operators';
import { FuseAnimations } from '@fuse/animations';
import { InventoryBrand, InventoryCategory, InventoryPagination, InventoryProduct, InventoryTag, InventoryVendor } from 'app/modules/admin/apps/ecommerce/inventory/inventory.types';
import { InventoryService } from 'app/modules/admin/apps/ecommerce/inventory/inventory.service';
@Component({
selector : 'inventory-list',
templateUrl : './inventory.component.html',
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
animations : FuseAnimations
})
export class InventoryListComponent implements OnInit, AfterViewInit, OnDestroy
{
@ViewChild(MatPaginator) private _paginator: MatPaginator;
@ViewChild(MatSort) private _sort: MatSort;
products$: Observable<InventoryProduct[]>;
brands: InventoryBrand[];
categories: InventoryCategory[];
filteredTags: InventoryTag[];
flashMessage: 'success' | 'error' | null = null;
isLoading: boolean = false;
pagination: InventoryPagination;
productsCount: number = 0;
productsTableColumns: string[] = ['sku', 'name', 'price', 'stock', 'active', 'details'];
searchInputControl: FormControl = new FormControl();
selectedProduct: InventoryProduct | null = null;
selectedProductForm: FormGroup;
tags: InventoryTag[];
tagsEditMode: boolean = false;
vendors: InventoryVendor[];
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
* Constructor
*/
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _formBuilder: FormBuilder,
private _inventoryService: InventoryService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Create the selected product form
this.selectedProductForm = this._formBuilder.group({
id : [''],
category : [''],
name : ['', [Validators.required]],
description : [''],
tags : [[]],
sku : [''],
barcode : [''],
brand : [''],
vendor : [''],
stock : [''],
reserved : [''],
cost : [''],
basePrice : [''],
taxPercent : [''],
price : [''],
weight : [''],
thumbnail : [''],
images : [[]],
currentImageIndex: [0], // Image index that is currently being viewed
active : [false]
});
// Get the brands
this._inventoryService.brands$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((brands: InventoryBrand[]) => {
// Update the brands
this.brands = brands;
// Mark for check
this._changeDetectorRef.markForCheck();
});
// Get the categories
this._inventoryService.categories$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((categories: InventoryCategory[]) => {
// Update the categories
this.categories = categories;
// Mark for check
this._changeDetectorRef.markForCheck();
});
// Get the pagination
this._inventoryService.pagination$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((pagination: InventoryPagination) => {
// Update the pagination
this.pagination = pagination;
// Mark for check
this._changeDetectorRef.markForCheck();
});
// Get the products
this.products$ = this._inventoryService.products$;
this._inventoryService.products$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((products: InventoryProduct[]) => {
// Update the counts
this.productsCount = products.length;
// Mark for check
this._changeDetectorRef.markForCheck();
});
// Get the tags
this._inventoryService.tags$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((tags: InventoryTag[]) => {
// Update the tags
this.tags = tags;
this.filteredTags = tags;
// Mark for check
this._changeDetectorRef.markForCheck();
});
// Get the vendors
this._inventoryService.vendors$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((vendors: InventoryVendor[]) => {
// Update the vendors
this.vendors = vendors;
// Mark for check
this._changeDetectorRef.markForCheck();
});
// Subscribe to search input field value changes
this.searchInputControl.valueChanges
.pipe(
takeUntil(this._unsubscribeAll),
debounceTime(300),
switchMap((query) => {
this.closeDetails();
this.isLoading = true;
return this._inventoryService.getProducts(0, 10, 'name', 'asc', query);
}),
map(() => {
this.isLoading = false;
})
)
.subscribe();
}
/**
* After view init
*/
ngAfterViewInit(): void
{
// If the user changes the sort order...
this._sort.sortChange
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(() => {
// Reset back to the first page
this._paginator.pageIndex = 0;
// Close the details
this.closeDetails();
});
// Get products if sort or page changes
merge(this._sort.sortChange, this._paginator.page).pipe(
switchMap(() => {
this.closeDetails();
this.isLoading = true;
return this._inventoryService.getProducts(this._paginator.pageIndex, this._paginator.pageSize, this._sort.active, this._sort.direction);
}),
map(() => {
this.isLoading = false;
})
).subscribe();
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle product details
*
* @param productId
*/
toggleDetails(productId: string): void
{
// If the product is already selected...
if ( this.selectedProduct && this.selectedProduct.id === productId )
{
// Close the details
this.closeDetails();
return;
}
// Get the product by id
this._inventoryService.getProductById(productId)
.subscribe((product) => {
// Set the selected product
this.selectedProduct = product;
// Mark for check
this._changeDetectorRef.markForCheck();
// Fill the form
this.selectedProductForm.patchValue(product);
// Mark for check
this._changeDetectorRef.markForCheck();
});
}
/**
* Close the details
*/
closeDetails(): void
{
this.selectedProduct = null;
}
/**
* Cycle through images of selected product
*/
cycleImages(forward: boolean = true): void
{
// Get the image count and current image index
const count = this.selectedProductForm.get('images').value.length;
const currentIndex = this.selectedProductForm.get('currentImageIndex').value;
// Calculate the next and previous index
const nextIndex = currentIndex + 1 === count ? 0 : currentIndex + 1;
const prevIndex = currentIndex - 1 < 0 ? count - 1 : currentIndex - 1;
// If cycling forward...
if ( forward )
{
this.selectedProductForm.get('currentImageIndex').setValue(nextIndex);
}
// If cycling backwards...
else
{
this.selectedProductForm.get('currentImageIndex').setValue(prevIndex);
}
}
/**
* Toggle the tags edit mode
*/
toggleTagsEditMode(): void
{
this.tagsEditMode = !this.tagsEditMode;
}
/**
* Filter tags
*
* @param event
*/
filterTags(event): void
{
// Get the value
const value = event.target.value.toLowerCase();
// Filter the tags
this.filteredTags = this.tags.filter(tag => tag.title.toLowerCase().includes(value));
}
/**
* Filter tags input key down event
*
* @param event
*/
filterTagsInputKeyDown(event): void
{
// Return if the pressed key is not 'Enter'
if ( event.key !== 'Enter' )
{
return;
}
// If there is no tag available...
if ( this.filteredTags.length === 0 )
{
// Create the tag
this.createTag(event.target.value);
// Clear the input
event.target.value = '';
// Return
return;
}
// If there is a tag...
const tag = this.filteredTags[0];
const isTagApplied = this.selectedProduct.tags.find((id) => id === tag.id);
// If the found tag is already applied to the contact...
if ( isTagApplied )
{
// Remove the tag from the contact
this.removeTagFromProduct(tag);
}
else
{
// Otherwise add the tag to the contact
this.addTagToProduct(tag);
}
}
/**
* Create a new tag
*
* @param title
*/
createTag(title: string): void
{
const tag = {
title
};
// Create tag on the server
this._inventoryService.createTag(tag)
.subscribe((response) => {
// Add the tag to the product
this.addTagToProduct(response);
});
}
/**
* Update the tag title
*
* @param tag
* @param event
*/
updateTagTitle(tag: InventoryTag, event): void
{
// Update the title on the tag
tag.title = event.target.value;
// Update the tag on the server
this._inventoryService.updateTag(tag.id, tag)
.pipe(debounceTime(300))
.subscribe();
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* Delete the tag
*
* @param tag
*/
deleteTag(tag: InventoryTag): void
{
// Delete the tag from the server
this._inventoryService.deleteTag(tag.id).subscribe();
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* Add tag to the product
*
* @param tag
*/
addTagToProduct(tag: InventoryTag): void
{
// Add the tag
this.selectedProduct.tags.unshift(tag.id);
// Update the selected product form
this.selectedProductForm.get('tags').patchValue(this.selectedProduct.tags);
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* Remove tag from the product
*
* @param tag
*/
removeTagFromProduct(tag: InventoryTag): void
{
// Remove the tag
this.selectedProduct.tags.splice(this.selectedProduct.tags.findIndex(item => item === tag.id), 1);
// Update the selected product form
this.selectedProductForm.get('tags').patchValue(this.selectedProduct.tags);
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* Toggle product tag
*
* @param tag
* @param change
*/
toggleProductTag(tag: InventoryTag, change: MatCheckboxChange): void
{
if ( change.checked )
{
this.addTagToProduct(tag);
}
else
{
this.removeTagFromProduct(tag);
}
}
/**
* Should the create tag button be visible
*
* @param inputValue
*/
shouldShowCreateTagButton(inputValue: string): boolean
{
return !!!(inputValue === '' || this.tags.findIndex(tag => tag.title.toLowerCase() === inputValue.toLowerCase()) > -1);
}
/**
* Create product
*/
createProduct(): void
{
// Create the product
this._inventoryService.createProduct().subscribe((newProduct) => {
// Go to new product
this.selectedProduct = newProduct;
// Fill the form
this.selectedProductForm.patchValue(newProduct);
// Mark for check
this._changeDetectorRef.markForCheck();
});
}
/**
* Update the selected product using the form mock-api
*/
updateSelectedProduct(): void
{
// Get the product object
const product = this.selectedProductForm.getRawValue();
// Remove the currentImageIndex field
delete product.currentImageIndex;
// Update the product on the server
this._inventoryService.updateProduct(product.id, product).subscribe(() => {
// Show a success message
this.showFlashMessage('success');
});
}
/**
* Delete the selected product using the form mock-api
*/
deleteSelectedProduct(): void
{
// Get the product object
const product = this.selectedProductForm.getRawValue();
// Delete the product on the server
this._inventoryService.deleteProduct(product.id).subscribe(() => {
// Close the details
this.closeDetails();
});
}
/**
* Show flash message
*/
showFlashMessage(type: 'success' | 'error'): void
{
// Show the message
this.flashMessage = type;
// Mark for check
this._changeDetectorRef.markForCheck();
// Hide it after 3 seconds
setTimeout(() => {
this.flashMessage = null;
// Mark for check
this._changeDetectorRef.markForCheck();
}, 3000);
}
/**
* Track by function for ngFor loops
*
* @param index
* @param item
*/
trackByFn(index: number, item: any): any
{
return item.id || index;
}
}

105
src/app/modules/admin/apps/file-manager/details/details.component.html
View File

@ -1,105 +0,0 @@
<div class="flex flex-col flex-auto p-6 md:p-8">
<!-- Close button -->
<div class="flex items-center justify-end">
<button
mat-icon-button
[routerLink]="['../']">
<mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
</button>
</div>
<!-- Preview -->
<div class="aspect-w-9 aspect-h-6 mt-8">
<div class="flex items-center justify-center border rounded-lg bg-gray-50 dark:bg-card">
<ng-container *ngIf="item.type === 'folder'">
<mat-icon
class="icon-size-14 text-hint"
[svgIcon]="'iconsmind:folder'"></mat-icon>
</ng-container>
<ng-container *ngIf="item.type !== 'folder'">
<mat-icon
class="icon-size-14 text-hint"
[svgIcon]="'iconsmind:file'"></mat-icon>
</ng-container>
</div>
</div>
<!-- Name & Type -->
<div class="flex flex-col items-start mt-8">
<div class="text-xl font-medium">{{item.name}}</div>
<div
class="mt-1 px-1.5 rounded text-sm font-semibold leading-5 text-white"
[class.bg-indigo-600]="item.type === 'folder'"
[class.bg-red-600]="item.type === 'PDF'"
[class.bg-blue-600]="item.type === 'DOC'"
[class.bg-green-600]="item.type === 'XLS'"
[class.bg-gray-600]="item.type === 'TXT'"
[class.bg-amber-600]="item.type === 'JPG'">
{{item.type.toUpperCase()}}
</div>
</div>
<!-- Information -->
<div class="text-lg font-medium mt-8">Information</div>
<div class="flex flex-col mt-4 border-t border-b divide-y font-medium">
<div class="flex items-center justify-between py-3">
<div class="text-secondary">Created By</div>
<div>{{item.createdBy}}</div>
</div>
<div class="flex items-center justify-between py-3">
<div class="text-secondary">Created At</div>
<div>{{item.createdAt}}</div>
</div>
<div class="flex items-center justify-between py-3">
<div class="text-secondary">Modified At</div>
<div>{{item.modifiedAt}}</div>
</div>
<div class="flex items-center justify-between py-3">
<div class="text-secondary">Size</div>
<div>{{item.size}}</div>
</div>
<ng-container *ngIf="item.contents">
<div class="flex items-center justify-between py-3">
<div class="text-secondary">Contents</div>
<div>{{item.contents}}</div>
</div>
</ng-container>
</div>
<!-- Description -->
<div class="flex items-center justify-between mt-8">
<div class="text-lg font-medium">Description</div>
<button mat-icon-button>
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:pencil'"></mat-icon>
</button>
</div>
<div class="flex mt-2 border-t">
<div class="py-3">
<ng-container *ngIf="item.description">
<div>{{item.description}}</div>
</ng-container>
<ng-container *ngIf="!item.description">
<div class="italic text-secondary">Click here to add a description</div>
</ng-container>
</div>
</div>
<!-- Actions -->
<div class="grid grid-cols-2 gap-4 w-full mt-8">
<button
class="flex-auto"
mat-flat-button
[color]="'primary'">
Download
</button>
<button
class="flex-auto"
mat-stroked-button>
Delete
</button>
</div>
</div>

91
src/app/modules/admin/apps/file-manager/details/details.component.ts
View File

@ -1,91 +0,0 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatDrawerToggleResult } from '@angular/material/sidenav';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { FileManagerListComponent } from 'app/modules/admin/apps/file-manager/list/list.component';
import { FileManagerService } from 'app/modules/admin/apps/file-manager/file-manager.service';
import { Item } from 'app/modules/admin/apps/file-manager/file-manager.types';
@Component({
selector : 'file-manager-details',
templateUrl : './details.component.html',
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class FileManagerDetailsComponent implements OnInit, OnDestroy
{
item: Item;
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
* Constructor
*/
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _fileManagerListComponent: FileManagerListComponent,
private _fileManagerService: FileManagerService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Open the drawer
this._fileManagerListComponent.matDrawer.open();
// Get the item
this._fileManagerService.item$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((item: Item) => {
// Open the drawer in case it is closed
this._fileManagerListComponent.matDrawer.open();
// Get the item
this.item = item;
// Mark for check
this._changeDetectorRef.markForCheck();
});
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Close the drawer
*/
closeDrawer(): Promise<MatDrawerToggleResult>
{
return this._fileManagerListComponent.matDrawer.close();
}
/**
* 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/file-manager/file-manager.component.html
View File

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

17
src/app/modules/admin/apps/file-manager/file-manager.component.ts
View File

@ -1,17 +0,0 @@
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
@Component({
selector : 'file-manager',
templateUrl : './file-manager.component.html',
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class FileManagerComponent
{
/**
* Constructor
*/
constructor()
{
}
}

49
src/app/modules/admin/apps/file-manager/file-manager.guards.ts
View File

@ -1,49 +0,0 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { FileManagerDetailsComponent } from 'app/modules/admin/apps/file-manager/details/details.component';
@Injectable({
providedIn: 'root'
})
export class CanDeactivateFileManagerDetails implements CanDeactivate<FileManagerDetailsComponent>
{
canDeactivate(
component: FileManagerDetailsComponent,
currentRoute: ActivatedRouteSnapshot,
currentState: RouterStateSnapshot,
nextState: RouterStateSnapshot
): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
{
// Get the next route
let nextRoute: ActivatedRouteSnapshot = nextState.root;
while ( nextRoute.firstChild )
{
nextRoute = nextRoute.firstChild;
}
// If the next state doesn't contain '/files'
// it means we are navigating away from the
// tasks app
if ( !nextState.url.includes('/file-manager') )
{
// Let it navigate
return true;
}
// If we are navigating to another task...
if ( nextRoute.paramMap.get('id') )
{
// Just navigate
return true;
}
// Otherwise...
else
{
// Close the drawer first, and then navigate
return component.closeDrawer().then(() => {
return true;
});
}
}
}

30
src/app/modules/admin/apps/file-manager/file-manager.module.ts
View File

@ -1,30 +0,0 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatTooltipModule } from '@angular/material/tooltip';
import { SharedModule } from 'app/shared/shared.module';
import { fileManagerRoutes } from 'app/modules/admin/apps/file-manager/file-manager.routing';
import { FileManagerComponent } from 'app/modules/admin/apps/file-manager/file-manager.component';
import { FileManagerDetailsComponent } from 'app/modules/admin/apps/file-manager/details/details.component';
import { FileManagerListComponent } from 'app/modules/admin/apps/file-manager/list/list.component';
@NgModule({
declarations: [
FileManagerComponent,
FileManagerDetailsComponent,
FileManagerListComponent
],
imports : [
RouterModule.forChild(fileManagerRoutes),
MatButtonModule,
MatIconModule,
MatSidenavModule,
MatTooltipModule,
SharedModule
]
})
export class FileManagerModule
{
}

82
src/app/modules/admin/apps/file-manager/file-manager.resolvers.ts
View File

@ -1,82 +0,0 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { FileManagerService } from 'app/modules/admin/apps/file-manager/file-manager.service';
import { Item } from 'app/modules/admin/apps/file-manager/file-manager.types';
@Injectable({
providedIn: 'root'
})
export class FileManagerItemsResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(private _fileManagerService: FileManagerService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Item[]>
{
return this._fileManagerService.getItems();
}
}
@Injectable({
providedIn: 'root'
})
export class FileManagerItemResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(
private _router: Router,
private _fileManagerService: FileManagerService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Item>
{
return this._fileManagerService.getItemById(route.paramMap.get('id'))
.pipe(
// Error here means the requested task is not available
catchError((error) => {
// Log the error
console.error(error);
// Get the parent url
const parentUrl = state.url.split('/').slice(0, -1).join('/');
// Navigate to there
this._router.navigateByUrl(parentUrl);
// Throw an error
return throwError(error);
})
);
}
}

32
src/app/modules/admin/apps/file-manager/file-manager.routing.ts
View File

@ -1,32 +0,0 @@
import { Route } from '@angular/router';
import { CanDeactivateFileManagerDetails } from 'app/modules/admin/apps/file-manager/file-manager.guards';
import { FileManagerComponent } from 'app/modules/admin/apps/file-manager/file-manager.component';
import { FileManagerListComponent } from 'app/modules/admin/apps/file-manager/list/list.component';
import { FileManagerDetailsComponent } from 'app/modules/admin/apps/file-manager/details/details.component';
import { FileManagerItemResolver, FileManagerItemsResolver } from 'app/modules/admin/apps/file-manager/file-manager.resolvers';
export const fileManagerRoutes: Route[] = [
{
path : '',
component: FileManagerComponent,
children : [
{
path : '',
component: FileManagerListComponent,
resolve : {
items: FileManagerItemsResolver
},
children : [
{
path : ':id',
component : FileManagerDetailsComponent,
resolve : {
item: FileManagerItemResolver
},
canDeactivate: [CanDeactivateFileManagerDetails]
}
]
}
]
}
];

88
src/app/modules/admin/apps/file-manager/file-manager.service.ts
View File

@ -1,88 +0,0 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable, of, throwError } from 'rxjs';
import { map, switchMap, take, tap } from 'rxjs/operators';
import { Item, Items } from 'app/modules/admin/apps/file-manager/file-manager.types';
@Injectable({
providedIn: 'root'
})
export class FileManagerService
{
// Private
private _item: BehaviorSubject<Item | null> = new BehaviorSubject(null);
private _items: BehaviorSubject<Items | null> = new BehaviorSubject(null);
/**
* Constructor
*/
constructor(private _httpClient: HttpClient)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Accessors
// -----------------------------------------------------------------------------------------------------
/**
* Getter for items
*/
get items$(): Observable<Items>
{
return this._items.asObservable();
}
/**
* Getter for item
*/
get item$(): Observable<Item>
{
return this._item.asObservable();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Get items
*/
getItems(): Observable<Item[]>
{
return this._httpClient.get<Items>('api/apps/file-manager').pipe(
tap((response: any) => {
this._items.next(response);
})
);
}
/**
* Get item by id
*/
getItemById(id: string): Observable<Item>
{
return this._items.pipe(
take(1),
map((items) => {
// Find within the folders and files
const item = [...items.folders, ...items.files].find(value => value.id === id) || null;
// Update the item
this._item.next(item);
// Return the item
return item;
}),
switchMap((item) => {
if ( !item )
{
return throwError('Could not found the item with id of ' + id + '!');
}
return of(item);
})
);
}
}

18
src/app/modules/admin/apps/file-manager/file-manager.types.ts
View File

@ -1,18 +0,0 @@
export interface Items
{
folders: Item[];
files: Item[];
}
export interface Item
{
id?: string;
name?: string;
createdBy?: string;
createdAt?: string;
modifiedAt?: string;
size?: string;
type?: string;
contents?: string | null;
description?: string | null;
}

133
src/app/modules/admin/apps/file-manager/list/list.component.html
View File

@ -1,133 +0,0 @@
<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"
(backdropClick)="onBackdropClicked()">
<!-- Drawer -->
<mat-drawer
class="w-full sm:w-100 dark:bg-gray-900"
[mode]="drawerMode"
[opened]="false"
[position]="'end'"
[disableClose]="true"
#matDrawer>
<router-outlet></router-outlet>
</mat-drawer>
<mat-drawer-content class="flex flex-col bg-gray-100 dark:bg-transparent">
<!-- Main -->
<div class="flex flex-col flex-auto">
<!-- Header -->
<div class="flex flex-col sm:flex-row items-start sm:items-center sm:justify-between p-6 sm:py-12 md:px-8 border-b bg-card dark:bg-transparent">
<!-- Title -->
<div>
<div class="text-4xl font-extrabold tracking-tight leading-none">File Manager</div>
<div class="flex items-center mt-0.5 font-medium text-secondary">
{{items.folders.length}} folders, {{items.files.length}} files
</div>
</div>
<!-- Actions -->
<div class="mt-4 sm:mt-0">
<!-- Upload button -->
<button
mat-flat-button
[color]="'primary'">
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
<span class="ml-2 mr-1">Upload file</span>
</button>
</div>
</div>
<!-- Items list -->
<ng-container *ngIf="items && items.folders.length && items.files.length > 0; else noItems">
<div class="p-6 md:p-8">
<!-- Folders -->
<div class="font-medium">Folders</div>
<div
class="grid gap-4 mt-4"
style="grid-template-columns: repeat(auto-fill,minmax(160px,1fr))">
<ng-container *ngFor="let folder of items.folders; trackBy:trackByFn">
<ng-container *ngTemplateOutlet="item, context: {$implicit: folder}"></ng-container>
</ng-container>
</div>
<!-- Files -->
<div class="font-medium mt-8">Files</div>
<div
class="grid gap-4 mt-4"
style="grid-template-columns: repeat(auto-fill,minmax(160px,1fr))">
<ng-container *ngFor="let file of items.files; trackBy:trackByFn">
<ng-container *ngTemplateOutlet="item, context: {$implicit: file}"></ng-container>
</ng-container>
</div>
</div>
</ng-container>
<!-- Item template -->
<ng-template
#item
let-item>
<div
class="flex flex-col shadow rounded-2xl cursor-pointer bg-card"
(click)="goToItem(item.id)">
<div class="aspect-w-9 aspect-h-6">
<div class="flex items-center justify-center">
<!-- Icons -->
<ng-container [ngSwitch]="item.type">
<!-- Folder -->
<ng-container *ngSwitchCase="'folder'">
<mat-icon
class="icon-size-14 text-hint"
[svgIcon]="'iconsmind:folder'"></mat-icon>
</ng-container>
<!-- File -->
<ng-container *ngSwitchDefault>
<div class="relative">
<mat-icon
class="icon-size-14 text-hint"
[svgIcon]="'iconsmind:file'"></mat-icon>
<div
class="absolute left-0 bottom-0 px-1.5 rounded text-sm font-semibold leading-5 text-white"
[class.bg-red-600]="item.type === 'PDF'"
[class.bg-blue-600]="item.type === 'DOC'"
[class.bg-green-600]="item.type === 'XLS'"
[class.bg-gray-600]="item.type === 'TXT'"
[class.bg-amber-600]="item.type === 'JPG'">
{{item.type.toUpperCase()}}
</div>
</div>
</ng-container>
</ng-container>
</div>
</div>
<div
class="pb-4 px-4 text-center text-sm font-medium"
[matTooltip]="item.name">
<div class="truncate">{{item.name}}</div>
<ng-container *ngIf="item.contents">
<div class="mt-0.5 text-secondary truncate">{{item.contents}}</div>
</ng-container>
</div>
</div>
</ng-template>
<!-- No items template -->
<ng-template #noItems>
<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 items!</div>
</div>
</ng-template>
</div>
</mat-drawer-content>
</mat-drawer-container>
</div>

147
src/app/modules/admin/apps/file-manager/list/list.component.ts
View File

@ -1,147 +0,0 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { ActivatedRoute, Router } from '@angular/router';
import { MatDrawer } from '@angular/material/sidenav';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { FuseNavigationService } from '@fuse/components/navigation';
import { FileManagerService } from 'app/modules/admin/apps/file-manager/file-manager.service';
import { Item, Items } from 'app/modules/admin/apps/file-manager/file-manager.types';
@Component({
selector : 'file-manager-list',
templateUrl : './list.component.html',
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class FileManagerListComponent implements OnInit, OnDestroy
{
@ViewChild('matDrawer', {static: true}) matDrawer: MatDrawer;
drawerMode: 'side' | 'over';
selectedItem: Item;
items: Items;
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
* Constructor
*/
constructor(
private _activatedRoute: ActivatedRoute,
private _changeDetectorRef: ChangeDetectorRef,
@Inject(DOCUMENT) private _document: any,
private _router: Router,
private _fileManagerService: FileManagerService,
private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fuseNavigationService: FuseNavigationService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Get the items
this._fileManagerService.items$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((items: Items) => {
this.items = items;
// Mark for check
this._changeDetectorRef.markForCheck();
});
// Get the item
this._fileManagerService.item$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((item: Item) => {
this.selectedItem = item;
// Mark for check
this._changeDetectorRef.markForCheck();
});
// Subscribe to media query change
this._fuseMediaWatcherService.onMediaQueryChange$('(min-width: 1440px)')
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((state) => {
// Calculate the drawer mode
this.drawerMode = state.matches ? 'side' : 'over';
// Mark for check
this._changeDetectorRef.markForCheck();
});
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Go to item
*
* @param id
*/
goToItem(id: string): void
{
// Get the current activated route
let route = this._activatedRoute;
while ( route.firstChild )
{
route = route.firstChild;
}
// Go to item
this._router.navigate(['../', id], {relativeTo: route});
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* On backdrop clicked
*/
onBackdropClicked(): void
{
// Get the current activated route
let route = this._activatedRoute;
while ( route.firstChild )
{
route = route.firstChild;
}
// Go back to the parent route
this._router.navigate(['../'], {relativeTo: route});
// 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;
}
}

32
src/app/modules/admin/apps/help-center/faqs/faqs.component.html
View File

@ -1,32 +0,0 @@
<div class="flex flex-col flex-auto min-w-0">
<!-- Main -->
<div class="flex flex-col items-center p-6 sm:p-10">
<div class="flex flex-col w-full max-w-4xl">
<div class="-ml-4 sm:mt-8">
<button
mat-button
[routerLink]="['../']"
[color]="'primary'">
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
<span class="ml-2">Back to Help Center</span>
</button>
</div>
<div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">
Frequently Asked Questions
</div>
<ng-container *ngFor="let faqCategory of faqCategories; trackBy: trackByFn">
<div class="mt-12 sm:mt-16 text-3xl font-bold leading-tight tracking-tight">{{faqCategory.title}}</div>
<mat-accordion class="max-w-4xl mt-8">
<mat-expansion-panel *ngFor="let faq of faqCategory.faqs; trackBy: trackByFn">
<mat-expansion-panel-header [collapsedHeight]="'56px'">
<mat-panel-title class="font-medium leading-tight">{{faq.question}}</mat-panel-title>
</mat-expansion-panel-header>
{{faq.answer}}
</mat-expansion-panel>
</mat-accordion>
</ng-container>
</div>
</div>
</div>

65
src/app/modules/admin/apps/help-center/faqs/faqs.component.ts
View File

@ -1,65 +0,0 @@
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { HelpCenterService } from 'app/modules/admin/apps/help-center/help-center.service';
import { FaqCategory } from 'app/modules/admin/apps/help-center/help-center.type';
@Component({
selector : 'help-center-faqs',
templateUrl : './faqs.component.html',
encapsulation: ViewEncapsulation.None
})
export class HelpCenterFaqsComponent implements OnInit, OnDestroy
{
faqCategories: FaqCategory[];
private _unsubscribeAll: Subject<any> = new Subject();
/**
* Constructor
*/
constructor(private _helpCenterService: HelpCenterService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Get the FAQs
this._helpCenterService.faqs$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((faqCategories) => {
this.faqCategories = faqCategories;
});
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Track by function for ngFor loops
*
* @param index
* @param item
*/
trackByFn(index: number, item: any): any
{
return item.id || index;
}
}

30
src/app/modules/admin/apps/help-center/guides/category/category.component.html
View File

@ -1,30 +0,0 @@
<div class="flex flex-col flex-auto min-w-0">
<!-- Main -->
<div class="flex flex-col items-center p-6 sm:p-10">
<div class="flex flex-col w-full max-w-4xl">
<div class="-ml-4 sm:mt-8">
<button
mat-button
[routerLink]="['../../../../']"
[color]="'primary'">
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
<span class="ml-2">Back to Help Center</span>
</button>
</div>
<div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">
{{guideCategory.title}}
</div>
<!-- Guides -->
<div class="flex flex-col items-start mt-8 sm:mt-12 space-y-2">
<ng-container *ngFor="let guide of guideCategory.guides; trackBy: trackByFn">
<a
class="font-medium hover:underline text-primary-500"
[routerLink]="[guide.slug]">
{{guide.title}}
</a>
</ng-container>
</div>
</div>
</div>
</div>

70
src/app/modules/admin/apps/help-center/guides/category/category.component.ts
View File

@ -1,70 +0,0 @@
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { HelpCenterService } from 'app/modules/admin/apps/help-center/help-center.service';
import { GuideCategory } from 'app/modules/admin/apps/help-center/help-center.type';
@Component({
selector : 'help-center-guides-category',
templateUrl : './category.component.html',
encapsulation: ViewEncapsulation.None
})
export class HelpCenterGuidesCategoryComponent implements OnInit, OnDestroy
{
guideCategory: GuideCategory;
private _unsubscribeAll: Subject<any> = new Subject();
/**
* Constructor
*/
constructor(
private _activatedRoute: ActivatedRoute,
private _helpCenterService: HelpCenterService,
private _router: Router
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Get the Guides
this._helpCenterService.guides$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((guideCategories) => {
this.guideCategory = guideCategories[0];
});
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Track by function for ngFor loops
*
* @param index
* @param item
*/
trackByFn(index: number, item: any): any
{
return item.id || index;
}
}

52
src/app/modules/admin/apps/help-center/guides/guide/guide.component.html
View File

@ -1,52 +0,0 @@
<div class="flex flex-col flex-auto min-w-0">
<!-- Main -->
<div class="flex flex-col items-center p-6 sm:p-10">
<div class="flex flex-col w-full max-w-4xl">
<div class="-ml-4 sm:mt-8">
<button
mat-button
[routerLink]="['../']"
[color]="'primary'">
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
<span class="ml-2">Back to {{guideCategory.title}}</span>
</button>
</div>
<div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">{{guideCategory.guides[0].title}}</div>
<div class="mt-1 sm:text-2xl tracking-tight text-secondary">{{guideCategory.guides[0].subtitle}}</div>
<!-- Guide -->
<div
class="mt-8 sm:mt-12 max-w-none prose prose-sm"
[innerHTML]="guideCategory.guides[0].content"></div>
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mt-10 pt-8 border-t">
<div class="text-sm font-medium text-secondary">Last updated 2 months ago</div>
<div class="flex items-center mt-2 sm:mt-0">
<div class="font-medium text-secondary">Was this page helpful?</div>
<div class="ml-4">
<button mat-icon-button>
<mat-icon [svgIcon]="'heroicons_outline:thumb-up'"></mat-icon>
</button>
<button mat-icon-button>
<mat-icon [svgIcon]="'heroicons_outline:thumb-down'"></mat-icon>
</button>
</div>
</div>
</div>
<!-- Next -->
<a
class="mt-8 flex items-center justify-between p-6 sm:px-10 rounded-2xl shadow hover:shadow-lg bg-card transform transition-shadow ease-in-out duration-150"
[routerLink]="'.'">
<div>
<div class="text-secondary">Next</div>
<div class="text-lg font-semibold">Removing a media from a project</div>
</div>
<mat-icon
class="ml-3"
[svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
</a>
</div>
</div>
</div>

65
src/app/modules/admin/apps/help-center/guides/guide/guide.component.ts
View File

@ -1,65 +0,0 @@
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { HelpCenterService } from 'app/modules/admin/apps/help-center/help-center.service';
import { GuideCategory } from 'app/modules/admin/apps/help-center/help-center.type';
@Component({
selector : 'help-center-guides-guide',
templateUrl : './guide.component.html',
encapsulation: ViewEncapsulation.None
})
export class HelpCenterGuidesGuideComponent implements OnInit, OnDestroy
{
guideCategory: GuideCategory;
private _unsubscribeAll: Subject<any> = new Subject();
/**
* Constructor
*/
constructor(private _helpCenterService: HelpCenterService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Get the Guides
this._helpCenterService.guide$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((guideCategory) => {
this.guideCategory = guideCategory;
});
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Track by function for ngFor loops
*
* @param index
* @param item
*/
trackByFn(index: number, item: any): any
{
return item.id || index;
}
}

48
src/app/modules/admin/apps/help-center/guides/guides.component.html
View File

@ -1,48 +0,0 @@
<div class="flex flex-col flex-auto min-w-0">
<!-- Main -->
<div class="flex flex-col items-center p-6 sm:p-10">
<div class="flex flex-col w-full max-w-4xl">
<div class="-ml-4 sm:mt-8">
<button
mat-button
[routerLink]="['../../../']"
[color]="'primary'">
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
<span class="ml-2">Back to Help Center</span>
</button>
</div>
<div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">
Guides & Resources
</div>
<!-- Guides -->
<div class="grid grid-cols-1 sm:grid-cols-2 grid-flow-row gap-y-12 sm:gap-x-4 mt-8 sm:mt-12">
<ng-container *ngFor="let guideCategory of guideCategories; trackBy: trackByFn">
<div class="flex flex-col items-start">
<a
class="flex items-center mb-1 text-2xl font-semibold"
[routerLink]="[guideCategory.slug]">
{{guideCategory.title}}
</a>
<ng-container *ngFor="let guide of guideCategory.guides; trackBy: trackByFn">
<a
class="mt-3 font-medium hover:underline text-primary-500"
[routerLink]="[guideCategory.slug, guide.slug]">
{{guide.title}}
</a>
</ng-container>
<a
class="flex items-center mt-5 pl-4 pr-3 py-0.5 rounded-full cursor-pointer bg-gray-200 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700"
*ngIf="guideCategory.totalGuides > guideCategory.visibleGuides"
[routerLink]="guideCategory.slug">
<span class="text-sm font-medium text-secondary">View All</span>
<mat-icon
class="ml-2 icon-size-5"
[svgIcon]="'heroicons_solid:arrow-narrow-right'"></mat-icon>
</a>
</div>
</ng-container>
</div>
</div>
</div>
</div>

65
src/app/modules/admin/apps/help-center/guides/guides.component.ts
View File

@ -1,65 +0,0 @@
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { HelpCenterService } from 'app/modules/admin/apps/help-center/help-center.service';
import { GuideCategory } from 'app/modules/admin/apps/help-center/help-center.type';
@Component({
selector : 'help-center-guides',
templateUrl : './guides.component.html',
encapsulation: ViewEncapsulation.None
})
export class HelpCenterGuidesComponent implements OnInit, OnDestroy
{
guideCategories: GuideCategory[];
private _unsubscribeAll: Subject<any> = new Subject();
/**
* Constructor
*/
constructor(private _helpCenterService: HelpCenterService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Get the Guide categories
this._helpCenterService.guides$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((guideCategories) => {
this.guideCategories = guideCategories;
});
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Track by function for ngFor loops
*
* @param index
* @param item
*/
trackByFn(index: number, item: any): any
{
return item.id || index;
}
}

104
src/app/modules/admin/apps/help-center/help-center.component.html
View File

@ -1,104 +0,0 @@
<div class="flex flex-col flex-auto min-w-0">
<!-- Header -->
<div class="relative pt-8 pb-28 px-4 sm:pt-20 sm:pb-48 sm:px-16 overflow-hidden bg-gray-800 dark">
<!-- Background - @formatter:off -->
<!-- Rings -->
<svg class="absolute inset-0 pointer-events-none"
viewBox="0 0 960 540" width="100%" height="100%" preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg">
<g class="text-gray-700 opacity-25" fill="none" stroke="currentColor" stroke-width="100">
<circle r="234" cx="196" cy="23"></circle>
<circle r="234" cx="790" cy="491"></circle>
</g>
</svg>
<!-- @formatter:on -->
<div class="z-10 relative flex flex-col items-center">
<h2 class="text-xl font-semibold">HELP CENTER</h2>
<div class="mt-1 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight text-center">
How can we help you today?
</div>
<div class="mt-3 sm:text-2xl text-center tracking-tight text-secondary">
Search for a topic or question, check out our FAQs and guides, contact us for detailed support
</div>
<mat-form-field class="fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full max-w-80 sm:max-w-120 mt-10 sm:mt-20">
<input
matInput
[placeholder]="'Enter a question, topic or keyword'">
<mat-icon
matPrefix
[svgIcon]="'heroicons_outline:search'"></mat-icon>
</mat-form-field>
</div>
</div>
<div class="flex flex-col items-center pb-6 px-6 sm:pb-10 sm:px-10">
<!-- Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-y-8 md:gap-y-0 md:gap-x-6 w-full max-w-sm md:max-w-4xl -mt-16 sm:-mt-24">
<!-- FAQs card -->
<div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transform transition-shadow ease-in-out duration-150">
<div class="flex flex-col flex-auto items-center p-8 text-center">
<div class="text-2xl font-semibold">FAQs</div>
<div class="md:max-w-40 mt-1 text-secondary">Frequently asked questions and answers</div>
</div>
<div class="flex items-center justify-center py-4 px-8 text-primary bg-gray-50 dark:bg-transparent dark:border-t">
<a
class="flex items-center"
[routerLink]="['faqs']">
<span class="absolute inset-0"></span>
<span class="font-medium">Go to FAQs</span>
<mat-icon
class="ml-2 icon-size-5 text-current"
[svgIcon]="'heroicons_solid:arrow-narrow-right'"></mat-icon>
</a>
</div>
</div>
<!-- Guides card -->
<div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transform transition-shadow ease-in-out duration-150">
<div class="flex flex-col flex-auto items-center p-8 text-center">
<div class="text-2xl font-semibold">Guides</div>
<div class="md:max-w-40 mt-1 text-secondary">Articles and resources to guide you</div>
</div>
<div class="flex items-center justify-center py-4 px-8 text-primary-500 bg-gray-50 dark:bg-transparent dark:border-t">
<a
class="flex items-center"
[routerLink]="['guides']">
<span class="absolute inset-0"></span>
<span class="font-medium">Check guides</span>
<mat-icon
class="ml-2 icon-size-5 text-current"
[svgIcon]="'heroicons_solid:arrow-narrow-right'"></mat-icon>
</a>
</div>
</div>
<!-- Support card -->
<div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transform transition-shadow ease-in-out duration-150">
<div class="flex flex-col flex-auto items-center p-8 text-center">
<div class="text-2xl font-semibold">Support</div>
<div class="md:max-w-40 mt-1 text-secondary">Contact us for more detailed support</div>
</div>
<div class="flex items-center justify-center py-4 px-8 text-primary-500 bg-gray-50 dark:bg-transparent dark:border-t">
<a
class="flex items-center"
[routerLink]="['support']">
<span class="absolute inset-0"></span>
<span class="font-medium">Contact us</span>
<mat-icon
class="ml-2 icon-size-5 text-current"
[svgIcon]="'heroicons_solid:arrow-narrow-right'"></mat-icon>
</a>
</div>
</div>
</div>
<!-- FAQs -->
<div class="mt-24 text-3xl sm:text-5xl font-extrabold leading-tight tracking-tight text-center">Most frequently asked questions</div>
<div class="mt-2 text-xl text-center text-secondary">Here are the most frequently asked questions you may check before getting started</div>
<mat-accordion class="max-w-4xl mt-12">
<mat-expansion-panel *ngFor="let faq of faqCategory.faqs; trackBy: trackByFn">
<mat-expansion-panel-header [collapsedHeight]="'56px'">
<mat-panel-title>{{faq.question}}</mat-panel-title>
</mat-expansion-panel-header>
{{faq.answer}}
</mat-expansion-panel>
</mat-accordion>
</div>
</div>

65
src/app/modules/admin/apps/help-center/help-center.component.ts
View File

@ -1,65 +0,0 @@
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { HelpCenterService } from 'app/modules/admin/apps/help-center/help-center.service';
import { FaqCategory } from 'app/modules/admin/apps/help-center/help-center.type';
@Component({
selector : 'help-center',
templateUrl : './help-center.component.html',
encapsulation: ViewEncapsulation.None
})
export class HelpCenterComponent implements OnInit, OnDestroy
{
faqCategory: FaqCategory;
private _unsubscribeAll: Subject<any> = new Subject();
/**
* Constructor
*/
constructor(private _helpCenterService: HelpCenterService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Get the FAQs
this._helpCenterService.faqs$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((faqCategories) => {
this.faqCategory = faqCategories[0];
});
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Track by function for ngFor loops
*
* @param index
* @param item
*/
trackByFn(index: number, item: any): any
{
return item.id || index;
}
}

40
src/app/modules/admin/apps/help-center/help-center.module.ts
View File

@ -1,40 +0,0 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { FuseAlertModule } from '@fuse/components/alert';
import { SharedModule } from 'app/shared/shared.module';
import { HelpCenterComponent } from 'app/modules/admin/apps/help-center/help-center.component';
import { HelpCenterFaqsComponent } from 'app/modules/admin/apps/help-center/faqs/faqs.component';
import { HelpCenterGuidesComponent } from 'app/modules/admin/apps/help-center/guides/guides.component';
import { HelpCenterGuidesCategoryComponent } from 'app/modules/admin/apps/help-center/guides/category/category.component';
import { HelpCenterGuidesGuideComponent } from 'app/modules/admin/apps/help-center/guides/guide/guide.component';
import { HelpCenterSupportComponent } from 'app/modules/admin/apps/help-center/support/support.component';
import { helpCenterRoutes } from 'app/modules/admin/apps/help-center/help-center.routing';
@NgModule({
declarations: [
HelpCenterComponent,
HelpCenterFaqsComponent,
HelpCenterGuidesComponent,
HelpCenterGuidesCategoryComponent,
HelpCenterGuidesGuideComponent,
HelpCenterSupportComponent
],
imports : [
RouterModule.forChild(helpCenterRoutes),
MatButtonModule,
MatExpansionModule,
MatFormFieldModule,
MatIconModule,
MatInputModule,
FuseAlertModule,
SharedModule
]
})
export class HelpCenterModule
{
}

145
src/app/modules/admin/apps/help-center/help-center.resolvers.ts
View File

@ -1,145 +0,0 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { HelpCenterService } from 'app/modules/admin/apps/help-center/help-center.service';
import { FaqCategory, GuideCategory } from 'app/modules/admin/apps/help-center/help-center.type';
@Injectable({
providedIn: 'root'
})
export class HelpCenterMostAskedFaqsResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(private _helpCenterService: HelpCenterService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<FaqCategory[]>
{
return this._helpCenterService.getFaqsByCategory('most-asked');
}
}
@Injectable({
providedIn: 'root'
})
export class HelpCenterFaqsResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(private _helpCenterService: HelpCenterService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<FaqCategory[]>
{
return this._helpCenterService.getAllFaqs();
}
}
@Injectable({
providedIn: 'root'
})
export class HelpCenterGuidesResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(private _helpCenterService: HelpCenterService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<GuideCategory[]>
{
return this._helpCenterService.getAllGuides();
}
}
@Injectable({
providedIn: 'root'
})
export class HelpCenterGuidesCategoryResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(private _helpCenterService: HelpCenterService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<GuideCategory[]>
{
return this._helpCenterService.getGuidesByCategory(route.paramMap.get('categorySlug'));
}
}
@Injectable({
providedIn: 'root'
})
export class HelpCenterGuidesGuideResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(private _helpCenterService: HelpCenterService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<GuideCategory>
{
return this._helpCenterService.getGuide(route.parent.paramMap.get('categorySlug'), route.paramMap.get('guideSlug'));
}
}

60
src/app/modules/admin/apps/help-center/help-center.routing.ts
View File

@ -1,60 +0,0 @@
import { Route } from '@angular/router';
import { HelpCenterComponent } from 'app/modules/admin/apps/help-center/help-center.component';
import { HelpCenterFaqsComponent } from 'app/modules/admin/apps/help-center/faqs/faqs.component';
import { HelpCenterGuidesComponent } from 'app/modules/admin/apps/help-center/guides/guides.component';
import { HelpCenterGuidesCategoryComponent } from 'app/modules/admin/apps/help-center/guides/category/category.component';
import { HelpCenterGuidesGuideComponent } from 'app/modules/admin/apps/help-center/guides/guide/guide.component';
import { HelpCenterSupportComponent } from 'app/modules/admin/apps/help-center/support/support.component';
import { HelpCenterFaqsResolver, HelpCenterGuidesCategoryResolver, HelpCenterGuidesGuideResolver, HelpCenterGuidesResolver, HelpCenterMostAskedFaqsResolver } from 'app/modules/admin/apps/help-center/help-center.resolvers';
export const helpCenterRoutes: Route[] = [
{
path : '',
component: HelpCenterComponent,
resolve : {
faqs: HelpCenterMostAskedFaqsResolver
}
},
{
path : 'faqs',
component: HelpCenterFaqsComponent,
resolve : {
faqs: HelpCenterFaqsResolver
}
},
{
path : 'guides',
children: [
{
path : '',
component: HelpCenterGuidesComponent,
resolve : {
guides: HelpCenterGuidesResolver
}
},
{
path : ':categorySlug',
children: [
{
path : '',
component: HelpCenterGuidesCategoryComponent,
resolve : {
guides: HelpCenterGuidesCategoryResolver
}
},
{
path : ':guideSlug',
component: HelpCenterGuidesGuideComponent,
resolve : {
guide: HelpCenterGuidesGuideResolver
}
}
]
}
]
},
{
path : 'support',
component: HelpCenterSupportComponent
}
];

134
src/app/modules/admin/apps/help-center/help-center.service.ts
View File

@ -1,134 +0,0 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, ReplaySubject } from 'rxjs';
import { tap } from 'rxjs/operators';
import { FaqCategory, Guide, GuideCategory } from 'app/modules/admin/apps/help-center/help-center.type';
@Injectable({
providedIn: 'root'
})
export class HelpCenterService
{
private _faqs: ReplaySubject<FaqCategory[]> = new ReplaySubject<FaqCategory[]>(1);
private _guides: ReplaySubject<GuideCategory[]> = new ReplaySubject<GuideCategory[]>(1);
private _guide: ReplaySubject<Guide> = new ReplaySubject<Guide>(1);
/**
* Constructor
*/
constructor(private _httpClient: HttpClient)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Accessors
// -----------------------------------------------------------------------------------------------------
/**
* Getter for FAQs
*/
get faqs$(): Observable<FaqCategory[]>
{
return this._faqs.asObservable();
}
/**
* Getter for guides
*/
get guides$(): Observable<GuideCategory[]>
{
return this._guides.asObservable();
}
/**
* Getter for guide
*/
get guide$(): Observable<GuideCategory>
{
return this._guide.asObservable();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Get all FAQs
*/
getAllFaqs(): Observable<FaqCategory[]>
{
return this._httpClient.get<FaqCategory[]>('api/apps/help-center/faqs').pipe(
tap((response: any) => {
this._faqs.next(response);
})
);
}
/**
* Get FAQs by category using category slug
*
* @param slug
*/
getFaqsByCategory(slug: string): Observable<FaqCategory[]>
{
return this._httpClient.get<FaqCategory[]>('api/apps/help-center/faqs', {
params: {slug}
}).pipe(
tap((response: any) => {
this._faqs.next(response);
})
);
}
/**
* Get all guides limited per category by the given number
*
* @param limit
*/
getAllGuides(limit = '4'): Observable<GuideCategory[]>
{
return this._httpClient.get<GuideCategory[]>('api/apps/help-center/guides', {
params: {limit}
}).pipe(
tap((response: any) => {
this._guides.next(response);
})
);
}
/**
* Get guides by category using category slug
*
* @param slug
*/
getGuidesByCategory(slug: string): Observable<GuideCategory[]>
{
return this._httpClient.get<GuideCategory[]>('api/apps/help-center/guides', {
params: {slug}
}).pipe(
tap((response: any) => {
this._guides.next(response);
})
);
}
/**
* Get guide by category and guide slug
*
* @param categorySlug
* @param guideSlug
*/
getGuide(categorySlug: string, guideSlug: string): Observable<GuideCategory>
{
return this._httpClient.get<GuideCategory>('api/apps/help-center/guide', {
params: {
categorySlug,
guideSlug
}
}).pipe(
tap((response: any) => {
this._guide.next(response);
})
);
}
}

35
src/app/modules/admin/apps/help-center/help-center.type.ts
View File

@ -1,35 +0,0 @@
export interface FaqCategory
{
id: string;
slug: string;
title: string;
faqs?: Faq[];
}
export interface Faq
{
id: string;
categoryId: string;
question: string;
answer: string;
}
export interface GuideCategory
{
id: string;
slug: string;
title: string;
totalGuides?: number;
visibleGuides?: number;
guides?: Guide[];
}
export interface Guide
{
id: string;
categoryId: string;
slug: string;
title: string;
subtitle?: string;
content?: string;
}

109
src/app/modules/admin/apps/help-center/support/support.component.html
View File

@ -1,109 +0,0 @@
<div class="flex flex-col flex-auto min-w-0">
<!-- Main -->
<div class="flex flex-col flex-auto items-center p-6 sm:p-10">
<div class="flex flex-col w-full max-w-4xl">
<div class="-ml-4 sm:mt-8">
<button
mat-button
[routerLink]="['../']"
[color]="'primary'">
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
<span class="ml-2">Back to Help Center</span>
</button>
</div>
<div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">
Contact support
</div>
<!-- Form -->
<div class="mt-8 sm:mt-12 p-6 pb-7 sm:p-10 sm:pb-7 shadow rounded-2xl bg-white">
<!-- Alert -->
<fuse-alert
class="mb-8"
*ngIf="alert"
[type]="alert.type"
[showIcon]="false">
{{alert.message}}
</fuse-alert>
<form
class="space-y-3"
[formGroup]="supportForm"
#supportNgForm="ngForm">
<div class="mb-6">
<div class="text-2xl font-bold tracking-tight">Submit your request</div>
<div class="text-secondary">Your request will be processed and our support staff will get back to you in 24 hours.</div>
</div>
<!-- Name -->
<mat-form-field class="w-full">
<input
matInput
[formControlName]="'name'"
[required]="true">
<mat-label>Name</mat-label>
<mat-error *ngIf="supportForm.get('name').hasError('required')">
Required
</mat-error>
</mat-form-field>
<!-- Email -->
<mat-form-field class="w-full">
<input
type="email"
matInput
[formControlName]="'email'"
[required]="true">
<mat-label>Email</mat-label>
<mat-error *ngIf="supportForm.get('email').hasError('required')">
Required
</mat-error>
<mat-error *ngIf="supportForm.get('email').hasError('email')">
Enter a valid email address
</mat-error>
</mat-form-field>
<!-- Subject -->
<mat-form-field class="w-full">
<input
matInput
[formControlName]="'subject'"
[required]="true">
<mat-label>Subject</mat-label>
<mat-error *ngIf="supportForm.get('subject').hasError('required')">
Required
</mat-error>
</mat-form-field>
<!-- Message -->
<mat-form-field class="fuse-mat-textarea w-full">
<textarea
matInput
[cdkTextareaAutosize]
[cdkAutosizeMinRows]="5"
[cdkAutosizeMaxRows]="5"
[formControlName]="'message'"
[required]="true"></textarea>
<mat-label>Message</mat-label>
<mat-error *ngIf="supportForm.get('message').hasError('required')">
Required
</mat-error>
</mat-form-field>
<!-- Actions -->
<div class="flex items-center justify-end">
<button
mat-button
[color]="'accent'"
[disabled]="supportForm.pristine || supportForm.untouched"
(click)="clearForm()">
Clear
</button>
<button
class="ml-2"
mat-flat-button
[color]="'primary'"
[disabled]="supportForm.pristine || supportForm.invalid"
(click)="sendForm()">
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</div>

82
src/app/modules/admin/apps/help-center/support/support.component.ts
View File

@ -1,82 +0,0 @@
import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
import { FuseAnimations } from '@fuse/animations';
import { HelpCenterService } from 'app/modules/admin/apps/help-center/help-center.service';
@Component({
selector : 'help-center-support',
templateUrl : './support.component.html',
encapsulation: ViewEncapsulation.None,
animations : FuseAnimations
})
export class HelpCenterSupportComponent implements OnInit
{
@ViewChild('supportNgForm') supportNgForm: NgForm;
alert: any;
supportForm: FormGroup;
/**
* Constructor
*/
constructor(
private _formBuilder: FormBuilder,
private _helpCenterService: HelpCenterService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Create the support form
this.supportForm = this._formBuilder.group({
name : ['', Validators.required],
email : ['', [Validators.required, Validators.email]],
subject: ['', Validators.required],
message: ['', Validators.required]
});
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Clear the form
*/
clearForm(): void
{
// Reset the form
this.supportNgForm.resetForm();
}
/**
* Send the form
*/
sendForm(): void
{
// Send your form here using an http request
console.log('Your message has been sent!');
// Show a success message (it can also be an error message)
// and remove it after 5 seconds
this.alert = {
type : 'success',
message: 'Your request has been delivered! A member of our support staff will respond as soon as possible.'
};
setTimeout(() => {
this.alert = null;
}, 7000);
// Clear the form
this.clearForm();
}
}

132
src/app/modules/admin/apps/mailbox/compose/compose.component.html
View File

@ -1,132 +0,0 @@
<div class="flex flex-col max-w-240 md:min-w-160 -m-6">
<!-- Header -->
<div class="flex flex-0 items-center justify-between h-16 pr-3 sm:pr-5 pl-6 sm:pl-8 bg-primary text-on-primary">
<div class="text-lg">New Message</div>
<button
mat-icon-button
(click)="saveAndClose()"
[tabIndex]="-1">
<mat-icon
class="text-current"
[svgIcon]="'heroicons_outline:x'"></mat-icon>
</button>
</div>
<!-- Compose form -->
<form
class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
[formGroup]="composeForm">
<!-- To -->
<mat-form-field>
<mat-label>To</mat-label>
<input
matInput
[formControlName]="'to'">
<div
class="copy-fields-toggles"
matSuffix>
<span
class="text-sm font-medium cursor-pointer select-none hover:underline"
*ngIf="!copyFields.cc"
(click)="showCopyField('cc')">
Cc
</span>
<span
class="ml-2 text-sm font-medium cursor-pointer select-none hover:underline"
*ngIf="!copyFields.bcc"
(click)="showCopyField('bcc')">
Bcc
</span>
</div>
</mat-form-field>
<!-- Cc -->
<mat-form-field
*ngIf="copyFields.cc">
<mat-label>Cc</mat-label>
<input
matInput
[formControlName]="'cc'">
</mat-form-field>
<!-- Bcc -->
<mat-form-field
*ngIf="copyFields.bcc">
<mat-label>Bcc</mat-label>
<input
matInput
[formControlName]="'bcc'">
</mat-form-field>
<!-- Subject -->
<mat-form-field>
<mat-label>Subject</mat-label>
<input
matInput
[formControlName]="'subject'">
</mat-form-field>
<!-- Body -->
<quill-editor
class="mt-2"
[formControlName]="'body'"
[modules]="quillModules"></quill-editor>
<!-- Actions -->
<div class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6">
<div class="-ml-2">
<!-- Attach file -->
<button mat-icon-button>
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:paper-clip'"></mat-icon>
</button>
<!-- Insert link -->
<button mat-icon-button>
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:link'"></mat-icon>
</button>
<!-- Insert emoji -->
<button mat-icon-button>
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:emoji-happy'"></mat-icon>
</button>
<!-- Insert image -->
<button mat-icon-button>
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:photograph'"></mat-icon>
</button>
</div>
<div class="flex items-center mt-4 sm:mt-0">
<!-- Discard -->
<button
class="ml-auto sm:ml-0"
mat-button
(click)="discard()">
Discard
</button>
<!-- Save as draft -->
<button
class="sm:mx-3"
mat-button
(click)="saveAsDraft()">
<span>Save as draft</span>
</button>
<!-- Send -->
<button
class="order-first sm:order-last"
mat-flat-button
[color]="'primary'"
(click)="send()">
Send
</button>
</div>
</div>
</form>
</div>

110
src/app/modules/admin/apps/mailbox/compose/compose.component.ts
View File

@ -1,110 +0,0 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';
@Component({
selector : 'mailbox-compose',
templateUrl : './compose.component.html',
encapsulation: ViewEncapsulation.None
})
export class MailboxComposeComponent implements OnInit
{
composeForm: FormGroup;
copyFields: { cc: boolean, bcc: boolean } = {
cc : false,
bcc: false
};
quillModules: any = {
toolbar: [
['bold', 'italic', 'underline'],
[{align: []}, {list: 'ordered'}, {list: 'bullet'}],
['clean']
]
};
/**
* Constructor
*/
constructor(
public matDialogRef: MatDialogRef<MailboxComposeComponent>,
private _formBuilder: FormBuilder
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Create the form
this.composeForm = this._formBuilder.group({
to : ['', [Validators.required, Validators.email]],
cc : ['', [Validators.email]],
bcc : ['', [Validators.email]],
subject: [''],
body : ['', [Validators.required]]
});
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Show the copy field with the given field name
*
* @param name
*/
showCopyField(name: string): void
{
// Return if the name is not one of the available names
if ( name !== 'cc' && name !== 'bcc' )
{
return;
}
// Show the field
this.copyFields[name] = true;
}
/**
* Save and close
*/
saveAndClose(): void
{
// Save the message as a draft
this.saveAsDraft();
// Close the dialog
this.matDialogRef.close();
}
/**
* Discard the message
*/
discard(): void
{
}
/**
* Save the message as a draft
*/
saveAsDraft(): void
{
}
/**
* Send the message
*/
send(): void
{
}
}

409
src/app/modules/admin/apps/mailbox/details/details.component.html
View File

@ -1,409 +0,0 @@
<div class="flex flex-col flex-auto overflow-y-auto lg:overflow-hidden bg-card dark:bg-default">
<ng-container *ngIf="mail; else selectMailToRead">
<!-- Header -->
<div class="z-10 relative flex flex-col flex-0 w-full border-b">
<!-- Toolbar -->
<div class="flex items-center min-h-16 px-4 md:px-6 border-b bg-gray-50 dark:bg-transparent">
<!-- Back button -->
<a
class="lg:hidden md:-ml-2"
mat-icon-button
[routerLink]="['./']">
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
</a>
<!-- Toggle labels button & menu -->
<button
class="ml-auto"
mat-icon-button
[matMenuTriggerFor]="toggleLabelMenu">
<mat-icon [svgIcon]="'heroicons_outline:tag'"></mat-icon>
</button>
<mat-menu #toggleLabelMenu="matMenu">
<ng-container *ngFor="let label of labels; trackBy: trackByFn">
<div mat-menu-item>
<mat-checkbox
(change)="toggleLabel(label)"
[color]="'primary'"
[checked]="mail.labels.includes(label.id)"
[disableRipple]="true">
{{label.title}}
</mat-checkbox>
</div>
</ng-container>
</mat-menu>
<!-- Toggle important button -->
<button
class="ml-2"
mat-icon-button
(click)="toggleImportant()">
<mat-icon
[ngClass]="{'text-red-600 dark:text-red-500': mail.important}"
[svgIcon]="'heroicons_outline:exclamation-circle'"></mat-icon>
</button>
<!-- Toggle starred button -->
<button
class="ml-2"
mat-icon-button
(click)="toggleStar()">
<mat-icon
[ngClass]="{'text-orange-500 dark:text-red-400': mail.starred}"
[svgIcon]="'heroicons_outline:star'"></mat-icon>
</button>
<!-- Other actions button & menu -->
<button
class="ml-2"
mat-icon-button
[matMenuTriggerFor]="mailMenu">
<mat-icon [svgIcon]="'heroicons_outline:dots-vertical'"></mat-icon>
</button>
<mat-menu #mailMenu="matMenu">
<!-- Mark as read / unread -->
<button
mat-menu-item
*ngIf="mail.unread"
(click)="toggleUnread(false)">
<mat-icon [svgIcon]="'heroicons_outline:mail-open'"></mat-icon>
<span>Mark as read</span>
</button>
<button
mat-menu-item
*ngIf="!mail.unread"
(click)="toggleUnread(true)">
<mat-icon [svgIcon]="'heroicons_outline:mail'"></mat-icon>
<span>Mark as unread</span>
</button>
<!-- Marks as spam / not span-->
<button
mat-menu-item
*ngIf="getCurrentFolder() !== 'spam' && getCurrentFolder() !== 'drafts'"
(click)="moveToFolder('spam')">
<mat-icon [svgIcon]="'heroicons_outline:exclamation'"></mat-icon>
<span>Spam</span>
</button>
<button
mat-menu-item
*ngIf="getCurrentFolder() === 'spam'"
(click)="moveToFolder('inbox')">
<mat-icon [svgIcon]="'heroicons_outline:exclamation'"></mat-icon>
<span>Not spam</span>
</button>
<!-- Delete -->
<button
mat-menu-item
*ngIf="getCurrentFolder() !== 'trash'"
(click)="moveToFolder('trash')">
<mat-icon [svgIcon]="'heroicons_outline:trash'"></mat-icon>
<span>Delete</span>
</button>
</mat-menu>
</div>
<!-- Subject and Labels -->
<div class="flex flex-wrap items-center py-5 px-6">
<!-- Subject -->
<div class="flex flex-auto my-1 mr-4 text-2xl">{{mail.subject}}</div>
<!-- Labels -->
<ng-container *ngIf="mail.labels && mail.labels.length > 0">
<div class="flex flex-wrap items-center justify-start -mx-1">
<ng-container *ngFor="let label of (mail.labels | fuseFindByKey:'id':labels)">
<div
class="m-1 py-0.5 px-2.5 rounded-full text-sm font-medium whitespace-nowrap"
[ngClass]="labelColors[label.color].combined">
{{label.title}}
</div>
</ng-container>
</div>
</ng-container>
</div>
</div>
<!-- Threads -->
<div
class="flex flex-col flex-auto flex-shrink-0 lg:flex-shrink p-3 lg:overflow-y-auto bg-gray-100 dark:bg-transparent"
fuseScrollReset>
<!-- Thread -->
<div class="flex flex-col flex-0 w-full border rounded-2xl overflow-hidden bg-card dark:bg-black dark:bg-opacity-10">
<div class="flex flex-col py-8 px-6">
<!-- Header -->
<div class="flex items-center w-full">
<!-- Sender avatar -->
<div class="flex flex-0 items-center justify-center w-10 h-10 rounded-full overflow-hidden">
<img
class="w-full h-full"
[src]="mail.from.avatar"
alt="User avatar">
</div>
<!-- Info -->
<div class="ml-4 min-w-0">
<!-- From -->
<div class="font-semibold truncate">{{mail.from.contact.split('<')[0].trim()}}</div>
<!-- To -->
<div class="flex items-center mt-0.5 leading-5">
<div>to</div>
<div class="ml-1 font-semibold">me</div>
<ng-container *ngIf="(mail.ccCount + mail.bccCount) > 0">
<div>
<span class="ml-1">and</span>
<span class="ml-1 font-semibold">{{mail.ccCount + mail.bccCount}}</span>
<span
class="ml-1 font-semibold"
[ngPlural]="(mail.ccCount + mail.bccCount)">
<ng-template ngPluralCase="=1">other</ng-template>
<ng-template ngPluralCase="other">others</ng-template>
</span>
</div>
</ng-container>
<!-- Info details panel button -->
<button
class="w-5 h-5 min-h-5 ml-1"
mat-icon-button
(click)="openInfoDetailsPanel()"
#infoDetailsPanelOrigin>
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:chevron-down'"></mat-icon>
</button>
<!-- Info details panel -->
<ng-template #infoDetailsPanel>
<div class="flex flex-col py-4 px-6 w-full max-w-160 space-y-1.5 border text-md rounded shadow-md overflow-auto bg-card">
<!-- From -->
<div class="flex">
<div class="min-w-14 font-medium text-right">from:</div>
<div class="pl-2 whitespace-pre-wrap">{{mail.from.contact}}</div>
</div>
<!-- To -->
<div class="flex">
<div class="min-w-14 font-medium text-right">to:</div>
<div class="pl-2 whitespace-pre-wrap">{{mail.to}}</div>
</div>
<!-- Cc -->
<ng-container *ngIf="mail.cc">
<div class="flex">
<div class="min-w-14 font-medium text-right">cc:</div>
<div class="pl-2 whitespace-pre-wrap">{{mail.cc.join(',\n')}}</div>
</div>
</ng-container>
<!-- Bbc -->
<ng-container *ngIf="mail.bcc">
<div class="flex">
<div class="min-w-14 font-medium text-right">bcc:</div>
<div class="pl-2 whitespace-pre-wrap">{{mail.bcc.join(',\n')}}</div>
</div>
</ng-container>
<!-- Date -->
<div class="flex">
<div class="min-w-14 font-medium text-right">date:</div>
<div class="pl-2 whitespace-pre-wrap">{{mail.date | date:'EEEE, MMMM d, y - hh:mm a'}}</div>
</div>
<!-- Subject -->
<div class="flex">
<div class="min-w-14 font-medium text-right">subject:</div>
<div class="pl-2 whitespace-pre-wrap">{{mail.subject}}</div>
</div>
</div>
</ng-template>
</div>
</div>
</div>
<!-- Content -->
<div
class="flex mt-8 whitespace-pre-line leading-relaxed"
[innerHTML]="mail.content">
</div>
<!-- Attachments -->
<ng-container *ngIf="mail.attachments && mail.attachments.length > 0">
<div class="flex flex-col w-full">
<!-- Title -->
<div class="flex items-center mt-12">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:paper-clip'"></mat-icon>
<div class="ml-2 font-semibold">{{mail.attachments.length}} Attachments</div>
</div>
<!-- Files -->
<div class="flex flex-wrap -m-3 mt-3">
<ng-container *ngFor="let attachment of mail.attachments">
<div class="flex items-center m-3">
<!-- Preview -->
<img
class="w-10 h-10 rounded-md overflow-hidden"
*ngIf="attachment.type.startsWith('image/')"
[src]="'assets/images/apps/mailbox/' + attachment.preview">
<div
class="flex items-center justify-center w-10 h-10 rounded-md overflow-hidden bg-primary-100"
*ngIf="attachment.type.startsWith('application/')">
<div class="flex items-center justify-center text-sm font-semibold text-primary-500-800">
{{attachment.type.split('/')[1].trim().toUpperCase()}}
</div>
</div>
<!-- File info -->
<div class="ml-3">
<div
class="text-md font-medium truncate"
[title]="attachment.name">
{{attachment.name}}
</div>
<div
class="text-sm font-medium truncate text-secondary"
[title]="attachment.size">
{{attachment.size / 1000 | number:'1.0-2'}} KB
</div>
</div>
</div>
</ng-container>
</div>
</div>
</ng-container>
</div>
<!-- Footer -->
<div class="flex w-full p-6 border-t bg-gray-50 dark:bg-transparent">
<!-- Buttons -->
<ng-container *ngIf="!replyFormActive">
<div class="flex flex-wrap w-full -m-2">
<!-- Reply -->
<button
class="m-2"
mat-stroked-button
[color]="'primary'"
(click)="reply()">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:reply'"></mat-icon>
<span class="ml-2">Reply</span>
</button>
<!-- Reply all -->
<button
class="m-2"
mat-stroked-button
[color]="'primary'"
(click)="replyAll()">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:reply'"></mat-icon>
<span class="ml-2">Reply All</span>
</button>
<!-- Forward -->
<button
class="m-2"
mat-stroked-button
[color]="'primary'"
(click)="forward()">
<mat-icon
class="icon-size-5"
[color]="'primary'"
[svgIcon]="'heroicons_solid:chevron-double-right'"></mat-icon>
<span class="ml-2">Forward</span>
</button>
</div>
</ng-container>
<!-- Reply form -->
<ng-container *ngIf="replyFormActive">
<div
class="flex flex-col w-full"
#replyForm>
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript">
<textarea
class="textarea"
matInput
[placeholder]="'Type your reply here'"
[rows]="4"></textarea>
</mat-form-field>
<div class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6">
<div class="-ml-2">
<!-- Attach file -->
<button mat-icon-button>
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:paper-clip'"></mat-icon>
</button>
<!-- Insert link -->
<button mat-icon-button>
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:link'"></mat-icon>
</button>
<!-- Insert emoji -->
<button mat-icon-button>
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:emoji-happy'"></mat-icon>
</button>
<!-- Insert image -->
<button mat-icon-button>
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:photograph'"></mat-icon>
</button>
</div>
<div class="flex items-center mt-4 sm:mt-0">
<!-- Discard -->
<button
class="order-last sm:order-first ml-3 sm:ml-0"
mat-button
(click)="discard()">
Discard
</button>
<!-- Send -->
<button
class="sm:ml-3"
mat-flat-button
[color]="'primary'"
(click)="send()">
Send
</button>
</div>
</div>
</div>
</ng-container>
</div>
</div>
</div>
</ng-container>
<!-- Select mail to read template -->
<ng-template #selectMailToRead>
<div class="flex flex-col flex-auto items-center justify-center bg-gray-100 dark:bg-transparent">
<mat-icon
class="icon-size-24"
[svgIcon]="'iconsmind:mailbox_empty'"></mat-icon>
<div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">Select a mail to read</div>
</div>
</ng-template>
</div>

375
src/app/modules/admin/apps/mailbox/details/details.component.ts
View File

@ -1,375 +0,0 @@
import { Component, ElementRef, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { TemplatePortal } from '@angular/cdk/portal';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { MatButton } from '@angular/material/button';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { MailboxService } from 'app/modules/admin/apps/mailbox/mailbox.service';
import { Mail, MailFolder, MailLabel } from 'app/modules/admin/apps/mailbox/mailbox.types';
import { labelColorDefs } from 'app/modules/admin/apps/mailbox/mailbox.constants';
@Component({
selector : 'mailbox-details',
templateUrl : './details.component.html',
encapsulation: ViewEncapsulation.None
})
export class MailboxDetailsComponent implements OnInit, OnDestroy
{
@ViewChild('infoDetailsPanelOrigin') private _infoDetailsPanelOrigin: MatButton;
@ViewChild('infoDetailsPanel') private _infoDetailsPanel: TemplateRef<any>;
folders: MailFolder[];
labelColors: any;
labels: MailLabel[];
mail: Mail;
replyFormActive: boolean = false;
private _overlayRef: OverlayRef;
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
* Constructor
*/
constructor(
private _activatedRoute: ActivatedRoute,
private _elementRef: ElementRef,
private _mailboxService: MailboxService,
private _overlay: Overlay,
private _router: Router,
private _viewContainerRef: ViewContainerRef
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Get the label colors
this.labelColors = labelColorDefs;
// Folders
this._mailboxService.folders$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((folders: MailFolder[]) => {
this.folders = folders;
});
// Labels
this._mailboxService.labels$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((labels: MailLabel[]) => {
this.labels = labels;
});
// Mail
this._mailboxService.mail$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((mail: Mail) => {
this.mail = mail;
});
// Selected mail changed
this._mailboxService.selectedMailChanged
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(() => {
// De-activate the reply form
this.replyFormActive = false;
});
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Get the current folder
*/
getCurrentFolder(): any
{
return this._activatedRoute.snapshot.paramMap.get('folder');
}
/**
* Move to folder
*
* @param folderSlug
*/
moveToFolder(folderSlug: string): void
{
// Find the folder details
const folder = this.folders.find((item) => {
return item.slug === folderSlug;
});
// Return if the current folder of the mail
// is already equals to the given folder
if ( this.mail.folder === folder.id )
{
return;
}
// Update the mail object
this.mail.folder = folder.id;
// Update the mail on the server
this._mailboxService.updateMail(this.mail.id, {folder: this.mail.folder}).subscribe();
// Navigate to the parent
this._router.navigate(['./'], {relativeTo: this._activatedRoute.parent});
}
/**
* Toggle label
*
* @param label
*/
toggleLabel(label: MailLabel): void
{
let deleted = false;
// Update the mail object
if ( this.mail.labels.includes(label.id) )
{
// Set the deleted
deleted = true;
// Delete the label
this.mail.labels.splice(this.mail.labels.indexOf(label.id), 1);
}
else
{
// Add the label
this.mail.labels.push(label.id);
}
// Update the mail on the server
this._mailboxService.updateMail(this.mail.id, {labels: this.mail.labels}).subscribe();
// If the label was deleted...
if ( deleted )
{
// If the current activated route has a label parameter and it equals to the one we are removing...
if ( this._activatedRoute.snapshot.paramMap.get('label') && this._activatedRoute.snapshot.paramMap.get('label') === label.slug )
{
// Navigate to the parent
this._router.navigate(['./'], {relativeTo: this._activatedRoute.parent});
}
}
}
/**
* Toggle important
*/
toggleImportant(): void
{
// Update the mail object
this.mail.important = !this.mail.important;
// Update the mail on the server
this._mailboxService.updateMail(this.mail.id, {important: this.mail.important}).subscribe();
// If the important was removed...
if ( !this.mail.important )
{
// If the current activated route has a filter parameter and it equals to the 'important'...
if ( this._activatedRoute.snapshot.paramMap.get('filter') && this._activatedRoute.snapshot.paramMap.get('filter') === 'important' )
{
// Navigate to the parent
this._router.navigate(['./'], {relativeTo: this._activatedRoute.parent});
}
}
}
/**
* Toggle star
*/
toggleStar(): void
{
// Update the mail object
this.mail.starred = !this.mail.starred;
// Update the mail on the server
this._mailboxService.updateMail(this.mail.id, {starred: this.mail.starred}).subscribe();
// If the star was removed...
if ( !this.mail.starred )
{
// If the current activated route has a filter parameter and it equals to the 'starred'...
if ( this._activatedRoute.snapshot.paramMap.get('filter') && this._activatedRoute.snapshot.paramMap.get('filter') === 'starred' )
{
// Navigate to the parent
this._router.navigate(['./'], {relativeTo: this._activatedRoute.parent});
}
}
}
/**
* Toggle unread
*
* @param unread
*/
toggleUnread(unread: boolean): void
{
// Update the mail object
this.mail.unread = unread;
// Update the mail on the server
this._mailboxService.updateMail(this.mail.id, {unread: this.mail.unread}).subscribe();
}
/**
* Reply
*/
reply(): void
{
// Activate the reply form
this.replyFormActive = true;
// Scroll to the bottom of the details pane
setTimeout(() => {
this._elementRef.nativeElement.scrollTop = this._elementRef.nativeElement.scrollHeight;
});
}
/**
* Reply all
*/
replyAll(): void
{
// Activate the reply form
this.replyFormActive = true;
// Scroll to the bottom of the details pane
setTimeout(() => {
this._elementRef.nativeElement.scrollTop = this._elementRef.nativeElement.scrollHeight;
});
}
/**
* Forward
*/
forward(): void
{
// Activate the reply form
this.replyFormActive = true;
// Scroll to the bottom of the details pane
setTimeout(() => {
this._elementRef.nativeElement.scrollTop = this._elementRef.nativeElement.scrollHeight;
});
}
/**
* Discard
*/
discard(): void
{
// Deactivate the reply form
this.replyFormActive = false;
}
/**
* Send
*/
send(): void
{
// Deactivate the reply form
this.replyFormActive = false;
}
/**
* Open info details panel
*/
openInfoDetailsPanel(): void
{
// Create the overlay
this._overlayRef = this._overlay.create({
backdropClass : '',
hasBackdrop : true,
scrollStrategy : this._overlay.scrollStrategies.block(),
positionStrategy: this._overlay.position()
.flexibleConnectedTo(this._infoDetailsPanelOrigin._elementRef.nativeElement)
.withFlexibleDimensions()
.withViewportMargin(16)
.withLockedPosition()
.withPositions([
{
originX : 'start',
originY : 'bottom',
overlayX: 'start',
overlayY: 'top'
},
{
originX : 'start',
originY : 'top',
overlayX: 'start',
overlayY: 'bottom'
},
{
originX : 'end',
originY : 'bottom',
overlayX: 'end',
overlayY: 'top'
},
{
originX : 'end',
originY : 'top',
overlayX: 'end',
overlayY: 'bottom'
}
])
});
// Create a portal from the template
const templatePortal = new TemplatePortal(this._infoDetailsPanel, this._viewContainerRef);
// Attach the portal to the overlay
this._overlayRef.attach(templatePortal);
// Subscribe to the backdrop click
this._overlayRef.backdropClick().subscribe(() => {
// If overlay exists and attached...
if ( this._overlayRef && this._overlayRef.hasAttached() )
{
// Detach it
this._overlayRef.detach();
}
// If template portal exists and attached...
if ( templatePortal && templatePortal.isAttached )
{
// Detach it
templatePortal.detach();
}
});
}
/**
* Track by function for ngFor loops
*
* @param index
* @param item
*/
trackByFn(index: number, item: any): any
{
return item.id || index;
}
}

154
src/app/modules/admin/apps/mailbox/list/list.component.html
View File

@ -1,154 +0,0 @@
<div class="relative flex flex-auto w-full bg-card dark:bg-transparent">
<!-- Mails list -->
<ng-container *ngIf="mails && mails.length > 0; else noMails">
<div class="relative flex flex-auto flex-col w-full min-w-0 lg:min-w-90 lg:max-w-90 border-r z-10">
<!-- Header -->
<div class="relative flex flex-0 items-center justify-between h-16 px-4 border-b bg-gray-50 dark:bg-transparent">
<div class="flex items-center">
<!-- Sidebar toggle button -->
<button
mat-icon-button
(click)="mailboxComponent.drawer.toggle()">
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
</button>
<!-- Category name -->
<div class="ml-2 font-semibold uppercase">{{category.name}}</div>
</div>
<!-- Pagination -->
<div class="flex items-center">
<!-- Info -->
<div class="flex items-center mr-3 text-md font-medium">
<span>{{pagination.startIndex + 1}}</span>
<span class="mx-1 text-secondary">-</span>
<span>{{pagination.endIndex + 1}}</span>
<span class="mx-1 text-secondary">of</span>
<span>{{pagination.totalResults}}</span>
</div>
<!-- Previous page button -->
<a
class="w-8 h-8 min-h-8"
mat-icon-button
[disabled]="pagination.currentPage === 1"
[routerLink]="['../' + (pagination.currentPage > 1 ? pagination.currentPage - 1 : 1 )]">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:chevron-left'"></mat-icon>
</a>
<!-- Next page button-->
<a
class="w-8 h-8 min-h-8"
mat-icon-button
[disabled]="pagination.currentPage === pagination.lastPage"
[routerLink]="['../' + (pagination.currentPage < pagination.lastPage ? pagination.currentPage + 1 : pagination.lastPage )]">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
</a>
</div>
<!-- Loading bar -->
<mat-progress-bar
class="absolute inset-x-0 bottom-0 h-0.5"
*ngIf="mailsLoading"
[mode]="'indeterminate'"></mat-progress-bar>
</div>
<!-- Mail list -->
<div
class="overflow-y-auto"
#mailList>
<!-- Item loop -->
<ng-container *ngFor="let mail of mails; let i = index; trackBy: trackByFn">
<!-- Item -->
<a
class="relative flex border-t first:border-0 hover:bg-hover"
[routerLink]="[mail.id]"
(click)="onMailSelected(mail)">
<!-- Item content -->
<div
class="flex flex-col items-start justify-start w-full py-6 pr-4 pl-5 border-l-4 border-transparent"
[ngClass]="{'border-primary': mail.unread,
'bg-primary-50 dark:bg-black dark:bg-opacity-5': selectedMail && selectedMail.id === mail.id}">
<!-- Info -->
<div class="flex items-center w-full">
<!-- Sender name -->
<div class="mr-2 font-semibold truncate">
{{mail.from.contact.split('<')[0].trim()}}
</div>
<!-- Important indicator -->
<mat-icon
class="mr-3 icon-size-4 text-red-500 dark:text-red-600"
*ngIf="mail.important"
[svgIcon]="'heroicons_solid:exclamation-circle'"></mat-icon>
<!-- Date -->
<div class="ml-auto text-md text-right whitespace-nowrap text-hint">
{{mail.date | date:'LLL dd'}}
</div>
</div>
<!-- Subject -->
<div class="flex items-center w-full mt-1">
<span class="leading-4 truncate">{{mail.subject}}</span>
<!-- Indicators -->
<div
class="flex ml-auto pl-2"
*ngIf="(mail.attachments && mail.attachments.length > 0) || mail.starred">
<!-- Attachments -->
<mat-icon
class="flex justify-center icon-size-4"
*ngIf="mail.attachments && mail.attachments.length > 0"
[svgIcon]="'heroicons_solid:paper-clip'"></mat-icon>
<!-- Starred -->
<mat-icon
class="flex justify-center icon-size-4 ml-1 text-orange-500 dark:text-orange-400"
*ngIf="mail.starred"
[svgIcon]="'heroicons_solid:star'"></mat-icon>
</div>
</div>
<!-- Excerpt -->
<div class="mt-2 leading-normal line-clamp-2 text-secondary">
{{mail.content}}...
</div>
</div>
</a>
</ng-container>
</div>
</div>
</ng-container>
<!-- No mails template -->
<ng-template #noMails>
<div class="z-100 absolute inset-0 flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
<mat-icon
class="icon-size-24"
[svgIcon]="'iconsmind:mailbox_empty'"></mat-icon>
<div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">There are no e-mails</div>
</div>
</ng-template>
<!-- Mail details -->
<ng-container *ngIf="mails && mails.length > 0">
<div
class="flex-auto"
[ngClass]="{'z-20 absolute inset-0 lg:static lg:inset-auto flex': selectedMail && selectedMail.id,
'hidden lg:flex': !selectedMail || !selectedMail.id}">
<router-outlet></router-outlet>
</div>
</ng-container>
</div>

203
src/app/modules/admin/apps/mailbox/list/list.component.ts
View File

@ -1,203 +0,0 @@
import { Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import * as moment from 'moment';
import { MailboxService } from 'app/modules/admin/apps/mailbox/mailbox.service';
import { MailboxComponent } from 'app/modules/admin/apps/mailbox/mailbox.component';
import { Mail, MailCategory } from 'app/modules/admin/apps/mailbox/mailbox.types';
@Component({
selector : 'mailbox-list',
templateUrl : './list.component.html',
encapsulation: ViewEncapsulation.None
})
export class MailboxListComponent implements OnInit, OnDestroy
{
@ViewChild('mailList') mailList: ElementRef;
category: MailCategory;
mails: Mail[];
mailsLoading: boolean = false;
pagination: any;
selectedMail: Mail;
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
* Constructor
*/
constructor(
public mailboxComponent: MailboxComponent,
private _mailboxService: MailboxService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Category
this._mailboxService.category$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((category: MailCategory) => {
this.category = category;
});
// Mails
this._mailboxService.mails$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((mails: Mail[]) => {
this.mails = mails;
});
// Mails loading
this._mailboxService.mailsLoading$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((mailsLoading: boolean) => {
this.mailsLoading = mailsLoading;
// If the mail list element is available & the mails are loaded...
if ( this.mailList && !mailsLoading )
{
// Reset the mail list element scroll position to top
this.mailList.nativeElement.scrollTo(0, 0);
}
});
// Pagination
this._mailboxService.pagination$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((pagination) => {
this.pagination = pagination;
});
// Selected mail
this._mailboxService.mail$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((mail: Mail) => {
this.selectedMail = mail;
});
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* On mail selected
*
* @param mail
*/
onMailSelected(mail: Mail): void
{
// If the mail is unread...
if ( mail.unread )
{
// Update the mail object
mail.unread = false;
// Update the mail on the server
this._mailboxService.updateMail(mail.id, {unread: false}).subscribe();
}
// Execute the mailSelected observable
this._mailboxService.selectedMailChanged.next(mail);
}
/**
* Generate and return mail list group label if necessary or return false
*
* @param index
*/
mailListGroupLabel(index: number): string | false
{
const previousMail = this.mails[index - 1];
const currentMail = this.mails[index];
// Generate and return label, if there is no previous mail
if ( !previousMail )
{
return this._generateMailListGroupLabel(this.mails[index].date);
}
// Return false, if the two dates are equal by day
if ( moment(previousMail.date, moment.ISO_8601).isSame(moment(currentMail.date, moment.ISO_8601), 'day') )
{
return false;
}
// Generate and return label
return this._generateMailListGroupLabel(this.mails[index].date);
}
// -----------------------------------------------------------------------------------------------------
// @ Private methods
// -----------------------------------------------------------------------------------------------------
/**
* Generate a mail list group label based on the date
*
* @param mailDate
* @private
*/
private _generateMailListGroupLabel(mailDate: string): string
{
const date = moment(mailDate, moment.ISO_8601);
const today = moment();
const yesterday = moment().subtract(1, 'day');
// Check if the mail date is today
if ( date.isSame(today, 'day') )
{
// Return 'Today'
return 'Today';
}
// Check if the mail date is yesterday
if ( date.isSame(yesterday, 'day') )
{
// Return 'Yesterday'
return 'Yesterday';
}
// Check if we are in the same year with the mail date...
if ( date.isSame(today, 'year') )
{
// Return a date without a year
return date.format('MMMM DD');
}
// Return a date
return date.format('LL');
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Track by function for ngFor loops
*
* @param index
* @param item
*/
trackByFn(index: number, item: any): any
{
return item.id || index;
}
}

29
src/app/modules/admin/apps/mailbox/mailbox.component.html
View File

@ -1,29 +0,0 @@
<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden">
<mat-drawer-container class="flex-auto h-full">
<!-- Drawer -->
<mat-drawer
class="w-72 dark:bg-gray-900"
[mode]="drawerMode"
[opened]="drawerOpened"
#drawer>
<!-- Mailbox sidebar -->
<mailbox-sidebar></mailbox-sidebar>
</mat-drawer>
<!-- Drawer content -->
<mat-drawer-content class="flex flex-col overflow-hidden">
<!-- Main -->
<div class="flex flex-auto overflow-hidden">
<router-outlet></router-outlet>
</div>
</mat-drawer-content>
</mat-drawer-container>
</div>

64
src/app/modules/admin/apps/mailbox/mailbox.component.ts
View File

@ -1,64 +0,0 @@
import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { MatDrawer } from '@angular/material/sidenav';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
@Component({
selector : 'mailbox',
templateUrl : './mailbox.component.html',
encapsulation: ViewEncapsulation.None
})
export class MailboxComponent implements OnInit, OnDestroy
{
@ViewChild('drawer') drawer: MatDrawer;
drawerMode: 'over' | 'side' = 'side';
drawerOpened: boolean = true;
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
* Constructor
*/
constructor(private _fuseMediaWatcherService: FuseMediaWatcherService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// 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('md') )
{
this.drawerMode = 'side';
this.drawerOpened = true;
}
else
{
this.drawerMode = 'over';
this.drawerOpened = false;
}
});
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
}

65
src/app/modules/admin/apps/mailbox/mailbox.constants.ts
View File

@ -1,65 +0,0 @@
export const labelColors = [
'gray',
'red',
'orange',
'yellow',
'green',
'teal',
'blue',
'indigo',
'purple',
'pink'
];
export const labelColorDefs = {
gray : {
text : 'text-gray-500',
bg : 'bg-gray-500',
combined: 'text-gray-800 bg-gray-100'
},
red : {
text : 'text-red-500',
bg : 'bg-red-500',
combined: 'text-red-800 bg-red-100'
},
orange: {
text : 'text-orange-500',
bg : 'bg-orange-500',
combined: 'text-orange-800 bg-orange-100'
},
yellow: {
text : 'text-yellow-500',
bg : 'bg-yellow-500',
combined: 'text-yellow-800 bg-yellow-100'
},
green : {
text : 'text-green-500',
bg : 'bg-green-500',
combined: 'text-green-800 bg-green-100'
},
teal : {
text : 'text-teal-500',
bg : 'bg-teal-500',
combined: 'text-teal-800 bg-teal-100'
},
blue : {
text : 'text-blue-500',
bg : 'bg-blue-500',
combined: 'text-blue-800 bg-blue-100'
},
indigo: {
text : 'text-indigo-500',
bg : 'bg-indigo-500',
combined: 'text-indigo-800 bg-indigo-100'
},
purple: {
text : 'text-purple-500',
bg : 'bg-purple-500',
combined: 'text-purple-800 bg-purple-100'
},
pink : {
text : 'text-pink-500',
bg : 'bg-pink-500',
combined: 'text-pink-800 bg-pink-100'
}
};

60
src/app/modules/admin/apps/mailbox/mailbox.module.ts
View File

@ -1,60 +0,0 @@
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 { MatDividerModule } from '@angular/material/divider';
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 { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { QuillModule } from 'ngx-quill';
import { FuseFindByKeyPipeModule } from '@fuse/pipes/find-by-key';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { FuseScrollbarModule } from '@fuse/directives/scrollbar';
import { FuseScrollResetModule } from '@fuse/directives/scroll-reset';
import { SharedModule } from 'app/shared/shared.module';
import { MailboxComponent } from 'app/modules/admin/apps/mailbox/mailbox.component';
import { MailboxComposeComponent } from 'app/modules/admin/apps/mailbox/compose/compose.component';
import { MailboxDetailsComponent } from 'app/modules/admin/apps/mailbox/details/details.component';
import { MailboxListComponent } from 'app/modules/admin/apps/mailbox/list/list.component';
import { MailboxSettingsComponent } from 'app/modules/admin/apps/mailbox/settings/settings.component';
import { MailboxSidebarComponent } from 'app/modules/admin/apps/mailbox/sidebar/sidebar.component';
import { mailboxRoutes } from 'app/modules/admin/apps/mailbox/mailbox.routing';
@NgModule({
declarations: [
MailboxComponent,
MailboxComposeComponent,
MailboxDetailsComponent,
MailboxListComponent,
MailboxSettingsComponent,
MailboxSidebarComponent
],
imports : [
RouterModule.forChild(mailboxRoutes),
MatButtonModule,
MatCheckboxModule,
MatDialogModule,
MatDividerModule,
MatFormFieldModule,
MatIconModule,
MatInputModule,
MatMenuModule,
MatProgressBarModule,
MatSelectModule,
MatSidenavModule,
QuillModule.forRoot(),
FuseFindByKeyPipeModule,
FuseNavigationModule,
FuseScrollbarModule,
FuseScrollResetModule,
SharedModule
]
})
export class MailboxModule
{
}

246
src/app/modules/admin/apps/mailbox/mailbox.resolvers.ts
View File

@ -1,246 +0,0 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
import { forkJoin, Observable, throwError } from 'rxjs';
import { catchError, finalize } from 'rxjs/operators';
import { MailboxService } from 'app/modules/admin/apps/mailbox/mailbox.service';
import { Mail, MailFilter, MailFolder, MailLabel } from 'app/modules/admin/apps/mailbox/mailbox.types';
@Injectable({
providedIn: 'root'
})
export class MailboxFoldersResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(private _mailboxService: MailboxService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<MailFolder[]>
{
return this._mailboxService.getFolders();
}
}
@Injectable({
providedIn: 'root'
})
export class MailboxFiltersResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(private _mailboxService: MailboxService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<MailFilter[]>
{
return this._mailboxService.getFilters();
}
}
@Injectable({
providedIn: 'root'
})
export class MailboxLabelsResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(private _mailboxService: MailboxService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<MailLabel[]>
{
return this._mailboxService.getLabels();
}
}
@Injectable({
providedIn: 'root'
})
export class MailboxMailsResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(
private _mailboxService: MailboxService,
private _router: Router
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Mail[]> | any
{
// Don't allow page param to go below 1
if ( route.paramMap.get('page') && parseInt(route.paramMap.get('page'), 10) <= 0 )
{
// Get the parent url
const url = state.url.split('/').slice(0, -1).join('/') + '/1';
// Navigate to there
this._router.navigateByUrl(url);
// Don't allow request to go through
return false;
}
// Create and build the sources array
const sources = [];
// If folder is set on the parameters...
if ( route.paramMap.get('folder') )
{
sources.push(this._mailboxService.getMailsByFolder(route.paramMap.get('folder'), route.paramMap.get('page')));
}
// If filter is set on the parameters...
if ( route.paramMap.get('filter') )
{
sources.push(this._mailboxService.getMailsByFilter(route.paramMap.get('filter'), route.paramMap.get('page')));
}
// If label is set on the parameters...
if ( route.paramMap.get('label') )
{
sources.push(this._mailboxService.getMailsByLabel(route.paramMap.get('label'), route.paramMap.get('page')));
}
// Fork join all the sources
return forkJoin(sources)
.pipe(
finalize(() => {
// Reset the mail every time mails list changes,
// if there is no selected mail. This will ensure
// that the mail will be reset while navigating
// between the folders/filters/labels but it won't
// reset on page reload if we are reading a mail.
// Try to get the current activated route
let currentRoute = route;
while ( currentRoute.firstChild )
{
currentRoute = currentRoute.firstChild;
}
// Make sure there is no 'id' parameter on the current route
if ( !currentRoute.paramMap.get('id') )
{
// Reset the mail
this._mailboxService.resetMail().subscribe();
}
}),
// Error here means the requested page is not available
catchError((error) => {
// Log the error
console.error(error.message);
// Get the parent url and append the last possible page number to the parent url
const url = state.url.split('/').slice(0, -1).join('/') + '/' + error.pagination.lastPage;
// Navigate to there
this._router.navigateByUrl(url);
// Throw an error
return throwError(error);
})
);
}
}
@Injectable({
providedIn: 'root'
})
export class MailboxMailResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(
private _mailboxService: MailboxService,
private _router: Router
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Mail>
{
return this._mailboxService.getMailById(route.paramMap.get('id'))
.pipe(
// Error here means the requested mail is either
// not available on the requested page or not
// available at all
catchError((error) => {
// Log the error
console.error(error);
// Get the parent url
const parentUrl = state.url.split('/').slice(0, -1).join('/');
// Navigate to there
this._router.navigateByUrl(parentUrl);
// Throw an error
return throwError(error);
})
);
}
}

162
src/app/modules/admin/apps/mailbox/mailbox.routing.ts
View File

@ -1,162 +0,0 @@
import { ActivatedRouteSnapshot, Route, UrlMatchResult, UrlSegment } from '@angular/router';
import { isEqual } from 'lodash-es';
import { MailboxComponent } from 'app/modules/admin/apps/mailbox/mailbox.component';
import { MailboxFiltersResolver, MailboxFoldersResolver, MailboxLabelsResolver, MailboxMailResolver, MailboxMailsResolver } from 'app/modules/admin/apps/mailbox/mailbox.resolvers';
import { MailboxListComponent } from 'app/modules/admin/apps/mailbox/list/list.component';
import { MailboxDetailsComponent } from 'app/modules/admin/apps/mailbox/details/details.component';
import { MailboxSettingsComponent } from 'app/modules/admin/apps/mailbox/settings/settings.component';
/**
* Mailbox custom route matcher
*
* @param url
*/
export function mailboxRouteMatcher(url: UrlSegment[]): UrlMatchResult
{
// Prepare consumed url and positional parameters
let consumed = url;
const posParams = {};
// Settings
if ( url[0].path === 'settings' )
{
// Do not match
return null;
}
// Filter or label
else if ( url[0].path === 'filter' || url[0].path === 'label' )
{
posParams[url[0].path] = url[1];
posParams['page'] = url[2];
// Remove the id if exists
if ( url[3] )
{
consumed = url.slice(0, -1);
}
}
// Folder
else
{
posParams['folder'] = url[0];
posParams['page'] = url[1];
// Remove the id if exists
if ( url[2] )
{
consumed = url.slice(0, -1);
}
}
return {
consumed,
posParams
};
}
export function mailboxRunGuardsAndResolvers(from: ActivatedRouteSnapshot, to: ActivatedRouteSnapshot): boolean
{
// If we are navigating from mail to mails, meaning there is an id in
// from's deepest first child and there isn't one in the to's, we will
// trigger the resolver
// Get the current activated route of the 'from'
let fromCurrentRoute = from;
while ( fromCurrentRoute.firstChild )
{
fromCurrentRoute = fromCurrentRoute.firstChild;
}
// Get the current activated route of the 'to'
let toCurrentRoute = to;
while ( toCurrentRoute.firstChild )
{
toCurrentRoute = toCurrentRoute.firstChild;
}
// Trigger the resolver if the condition met
if ( fromCurrentRoute.paramMap.get('id') && !toCurrentRoute.paramMap.get('id') )
{
return true;
}
// If the from and to params are equal, don't trigger the resolver
const fromParams = {};
const toParams = {};
from.paramMap.keys.forEach((key) => {
fromParams[key] = from.paramMap.get(key);
});
to.paramMap.keys.forEach((key) => {
toParams[key] = to.paramMap.get(key);
});
if ( isEqual(fromParams, toParams) )
{
return false;
}
// Trigger the resolver on other cases
return true;
}
export const mailboxRoutes: Route[] = [
{
path : '',
redirectTo: 'inbox/1',
pathMatch : 'full'
},
{
path : 'filter/:filter',
redirectTo: 'filter/:filter/1',
pathMatch : 'full'
},
{
path : 'label/:label',
redirectTo: 'label/:label/1',
pathMatch : 'full'
},
{
path : ':folder',
redirectTo: ':folder/1',
pathMatch : 'full'
},
{
path : '',
component: MailboxComponent,
resolve : {
filters: MailboxFiltersResolver,
folders: MailboxFoldersResolver,
labels : MailboxLabelsResolver
},
children : [
{
component : MailboxListComponent,
matcher : mailboxRouteMatcher,
runGuardsAndResolvers: mailboxRunGuardsAndResolvers,
resolve : {
mails: MailboxMailsResolver
},
children : [
{
path : '',
component: MailboxDetailsComponent,
children : [
{
path : ':id',
resolve: {
mail: MailboxMailResolver
}
}
]
}
]
},
{
path : 'settings',
component: MailboxSettingsComponent
}
]
}
];

396
src/app/modules/admin/apps/mailbox/mailbox.service.ts
View File

@ -1,396 +0,0 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable, of, throwError } from 'rxjs';
import { map, switchMap, take, tap } from 'rxjs/operators';
import { Mail, MailCategory, MailFilter, MailFolder, MailLabel } from 'app/modules/admin/apps/mailbox/mailbox.types';
@Injectable({
providedIn: 'root'
})
export class MailboxService
{
selectedMailChanged: BehaviorSubject<any> = new BehaviorSubject(null);
private _category: BehaviorSubject<MailCategory> = new BehaviorSubject(null);
private _filters: BehaviorSubject<MailFilter[]> = new BehaviorSubject(null);
private _folders: BehaviorSubject<MailFolder[]> = new BehaviorSubject(null);
private _labels: BehaviorSubject<MailLabel[]> = new BehaviorSubject(null);
private _mails: BehaviorSubject<Mail[]> = new BehaviorSubject(null);
private _mailsLoading: BehaviorSubject<boolean> = new BehaviorSubject(false);
private _mail: BehaviorSubject<Mail> = new BehaviorSubject(null);
private _pagination: BehaviorSubject<any> = new BehaviorSubject(null);
/**
* Constructor
*/
constructor(private _httpClient: HttpClient)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Accessors
// -----------------------------------------------------------------------------------------------------
/**
* Getter for category
*/
get category$(): Observable<MailCategory>
{
return this._category.asObservable();
}
/**
* Getter for filters
*/
get filters$(): Observable<MailFilter[]>
{
return this._filters.asObservable();
}
/**
* Getter for folders
*/
get folders$(): Observable<MailFolder[]>
{
return this._folders.asObservable();
}
/**
* Getter for labels
*/
get labels$(): Observable<MailLabel[]>
{
return this._labels.asObservable();
}
/**
* Getter for mails
*/
get mails$(): Observable<Mail[]>
{
return this._mails.asObservable();
}
/**
* Getter for mails loading
*/
get mailsLoading$(): Observable<boolean>
{
return this._mailsLoading.asObservable();
}
/**
* Getter for mail
*/
get mail$(): Observable<Mail>
{
return this._mail.asObservable();
}
/**
* Getter for pagination
*/
get pagination$(): Observable<any>
{
return this._pagination.asObservable();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Get filters
*/
getFilters(): Observable<any>
{
return this._httpClient.get<MailFilter[]>('api/apps/mailbox/filters').pipe(
tap((response: any) => {
this._filters.next(response);
})
);
}
/**
* Get folders
*/
getFolders(): Observable<any>
{
return this._httpClient.get<MailFolder[]>('api/apps/mailbox/folders').pipe(
tap((response: any) => {
this._folders.next(response);
})
);
}
/**
* Get labels
*/
getLabels(): Observable<any>
{
return this._httpClient.get<MailLabel[]>('api/apps/mailbox/labels').pipe(
tap((response: any) => {
this._labels.next(response);
})
);
}
/**
* Get mails by filter
*/
getMailsByFilter(filter: string, page: string = '1'): Observable<any>
{
// Execute the mails loading with true
this._mailsLoading.next(true);
return this._httpClient.get<Mail[]>('api/apps/mailbox/mails', {
params: {
filter,
page
}
}).pipe(
tap((response: any) => {
this._category.next({
type: 'filter',
name: filter
});
this._mails.next(response.mails);
this._pagination.next(response.pagination);
this._mailsLoading.next(false);
}),
switchMap((response) => {
if ( response.mails === null )
{
return throwError({
message : 'Requested page is not available!',
pagination: response.pagination
});
}
return of(response);
})
);
}
/**
* Get mails by folder
*/
getMailsByFolder(folder: string, page: string = '1'): Observable<any>
{
// Execute the mails loading with true
this._mailsLoading.next(true);
return this._httpClient.get<Mail[]>('api/apps/mailbox/mails', {
params: {
folder,
page
}
}).pipe(
tap((response: any) => {
this._category.next({
type: 'folder',
name: folder
});
this._mails.next(response.mails);
this._pagination.next(response.pagination);
this._mailsLoading.next(false);
}),
switchMap((response) => {
if ( response.mails === null )
{
return throwError({
message : 'Requested page is not available!',
pagination: response.pagination
});
}
return of(response);
})
);
}
/**
* Get mails by label
*/
getMailsByLabel(label: string, page: string = '1'): Observable<any>
{
// Execute the mails loading with true
this._mailsLoading.next(true);
return this._httpClient.get<Mail[]>('api/apps/mailbox/mails', {
params: {
label,
page
}
}).pipe(
tap((response: any) => {
this._category.next({
type: 'label',
name: label
});
this._mails.next(response.mails);
this._pagination.next(response.pagination);
this._mailsLoading.next(false);
}),
switchMap((response) => {
if ( response.mails === null )
{
return throwError({
message : 'Requested page is not available!',
pagination: response.pagination
});
}
return of(response);
})
);
}
/**
* Get mail by id
*/
getMailById(id: string): Observable<any>
{
return this._mails.pipe(
take(1),
map((mails) => {
// Find the mail
const mail = mails.find(item => item.id === id) || null;
// Update the mail
this._mail.next(mail);
// Return the mail
return mail;
}),
switchMap((mail) => {
if ( !mail )
{
return throwError('Could not found mail with id of ' + id + '!');
}
return of(mail);
})
);
}
/**
* Update mail
*
* @param id
* @param mail
*/
updateMail(id: string, mail: Mail): Observable<any>
{
return this._httpClient.patch('api/apps/mailbox/mail', {
id,
mail
}).pipe(
tap(() => {
// Re-fetch the folders on mail update
// to get the updated counts on the sidebar
this.getFolders().subscribe();
})
);
}
/**
* Reset the current mail
*/
resetMail(): Observable<boolean>
{
return of(true).pipe(
take(1),
tap(() => {
this._mail.next(null);
})
);
}
/**
* Add label
*
* @param label
*/
addLabel(label: MailLabel): Observable<any>
{
return this.labels$.pipe(
take(1),
switchMap(labels => this._httpClient.post<MailLabel>('api/apps/mailbox/label', {label}).pipe(
map((newLabel) => {
// Update the labels with the new label
this._labels.next([...labels, newLabel]);
// Return the new label
return newLabel;
})
))
);
}
/**
* Update label
*
* @param id
* @param label
*/
updateLabel(id: string, label: MailLabel): Observable<any>
{
return this.labels$.pipe(
take(1),
switchMap(labels => this._httpClient.patch<MailLabel>('api/apps/mailbox/label', {
id,
label
}).pipe(
map((updatedLabel: any) => {
// Find the index of the updated label within the labels
const index = labels.findIndex(item => item.id === id);
// Update the label
labels[index] = updatedLabel;
// Update the labels
this._labels.next(labels);
// Return the updated label
return updatedLabel;
})
))
);
}
/**
* Delete label
*
* @param id
*/
deleteLabel(id: string): Observable<any>
{
return this.labels$.pipe(
take(1),
switchMap(labels => this._httpClient.delete('api/apps/mailbox/label', {params: {id}}).pipe(
map((isDeleted: any) => {
// Find the index of the deleted label within the labels
const index = labels.findIndex(item => item.id === id);
// Delete the label
labels.splice(index, 1);
// Update the labels
this._labels.next(labels);
// Return the deleted status
return isDeleted;
})
))
);
}
}

60
src/app/modules/admin/apps/mailbox/mailbox.types.ts
View File

@ -1,60 +0,0 @@
export interface Mail
{
id?: string;
type?: string;
from?: {
avatar?: string;
contact?: string;
};
to?: string;
cc?: string[];
ccCount?: number;
bcc?: string[];
bccCount?: number;
date?: string;
subject?: string;
content?: string;
attachments?: {
type?: string;
name?: string;
size?: number;
preview?: string;
downloadUrl?: string;
}[];
starred?: boolean;
important?: boolean;
unread?: boolean;
folder?: string;
labels?: string[];
}
export interface MailCategory
{
type: 'folder' | 'filter' | 'label';
name: string;
}
export interface MailFolder
{
id: string;
title: string;
slug: string;
icon: string;
count?: number;
}
export interface MailFilter
{
id: string;
title: string;
slug: string;
icon: string;
}
export interface MailLabel
{
id: string;
title: string;
slug: string;
color: string;
}

121
src/app/modules/admin/apps/mailbox/settings/settings.component.html
View File

@ -1,121 +0,0 @@
<div class="flex flex-col flex-auto overflow-y-auto p-8">
<div class="flex items-center">
<!-- Sidebar toggle button -->
<div class="md:hidden -ml-2 mr-3">
<button
mat-icon-button
(click)="mailboxComponent.drawer.toggle()">
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
</button>
</div>
<!-- Title -->
<div>
<div class="text-3xl font-extrabold tracking-tight">Manage Labels</div>
<div class="text-secondary">Create, update and delete labels</div>
</div>
</div>
<!-- Labels form -->
<form
class="mt-8"
[formGroup]="labelsForm">
<!-- New label -->
<div
class="flex items-center justify-start w-full max-w-80 mt-6"
[formGroupName]="'newLabel'">
<mat-form-field class="w-full">
<mat-label>New Label</mat-label>
<input
matInput
[formControlName]="'title'"
[placeholder]="'Label title'">
<mat-select
[formControlName]="'color'"
[disableOptionCentering]="true"
matPrefix>
<mat-select-trigger class="h-6">
<mat-icon
[ngClass]="labelColorDefs[labelsForm.get('newLabel.color').value].text"
[svgIcon]="'heroicons_outline:tag'"></mat-icon>
</mat-select-trigger>
<div class="px-4 pt-5 text-xl font-semibold">Label color</div>
<div class="flex flex-wrap w-48 my-4 mx-3 -mr-5">
<mat-option
class="relative flex w-12 h-12 p-0 cursor-pointer rounded-full bg-transparent"
*ngFor="let color of labelColors"
[value]="color"
#matOption="matOption">
<mat-icon
class="absolute m-3 text-white"
*ngIf="matOption.selected"
[svgIcon]="'heroicons_outline:check'"></mat-icon>
<span
class="flex w-10 h-10 m-1 rounded-full"
[ngClass]="labelColorDefs[color].bg"></span>
</mat-option>
</div>
</mat-select>
<button
mat-icon-button
matSuffix
[disabled]="!labelsForm.get('newLabel').valid || !labelsForm.get('newLabel').dirty"
(click)="addLabel()">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
</button>
</mat-form-field>
</div>
<!-- Labels -->
<div
class="flex flex-col w-full max-w-80 mt-4"
[formArrayName]="'labels'">
<!-- Label -->
<ng-container *ngFor="let label of labelsForm.get('labels')['controls']">
<mat-form-field class="w-full">
<input
matInput
[formControl]="label.get('title')">
<mat-select
[formControl]="label.get('color')"
[disableOptionCentering]="true"
matPrefix>
<mat-select-trigger class="h-6">
<mat-icon
[ngClass]="labelColorDefs[label.get('color').value].text"
[svgIcon]="'heroicons_outline:tag'"></mat-icon>
</mat-select-trigger>
<div class="px-4 pt-5 text-xl font-semibold">Label color</div>
<div class="flex flex-wrap w-48 my-4 mx-3 -mr-5">
<mat-option
class="relative flex w-12 h-12 p-0 cursor-pointer rounded-full bg-transparent"
*ngFor="let color of labelColors"
[value]="color"
#matOption="matOption">
<mat-icon
class="absolute m-3 text-white"
*ngIf="matOption.selected"
[svgIcon]="'heroicons_outline:check'"></mat-icon>
<span
class="flex w-10 h-10 m-1 rounded-full"
[ngClass]="labelColorDefs[color].bg"></span>
</mat-option>
</div>
</mat-select>
<button
mat-icon-button
matSuffix
(click)="deleteLabel(label.get('id').value)">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:trash'"></mat-icon>
</button>
</mat-form-field>
</ng-container>
</div>
</form>
</div>

146
src/app/modules/admin/apps/mailbox/settings/settings.component.ts
View File

@ -1,146 +0,0 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { debounceTime, take } from 'rxjs/operators';
import { MailboxComponent } from 'app/modules/admin/apps/mailbox/mailbox.component';
import { MailboxService } from 'app/modules/admin/apps/mailbox/mailbox.service';
import { MailLabel } from 'app/modules/admin/apps/mailbox/mailbox.types';
import { labelColorDefs, labelColors } from 'app/modules/admin/apps/mailbox/mailbox.constants';
@Component({
selector : 'mailbox-settings',
templateUrl : './settings.component.html',
encapsulation: ViewEncapsulation.None
})
export class MailboxSettingsComponent implements OnInit
{
labelColors: any = labelColors;
labelColorDefs: any = labelColorDefs;
labels: MailLabel[];
labelsForm: FormGroup;
/**
* Constructor
*/
constructor(
public mailboxComponent: MailboxComponent,
private _formBuilder: FormBuilder,
private _mailboxService: MailboxService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Create the labels form
this.labelsForm = this._formBuilder.group({
labels : this._formBuilder.array([]),
newLabel: this._formBuilder.group({
title: ['', Validators.required],
color: ['orange']
})
});
// Labels
this._mailboxService.labels$
.pipe(take(1))
.subscribe((labels: MailLabel[]) => {
// Get the labels
this.labels = labels;
// Iterate through the labels
labels.forEach((label) => {
// Create a label form group
const labelFormGroup = this._formBuilder.group({
id : [label.id],
title: [label.title, Validators.required],
slug : [label.slug],
color: [label.color]
});
// Add the label form group to the labels form array
(this.labelsForm.get('labels') as FormArray).push(labelFormGroup);
});
});
// Update labels when there is a value change
this.labelsForm.get('labels').valueChanges
.pipe(debounceTime(500))
.subscribe(() => {
this.updateLabels();
});
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Add a label
*/
addLabel(): void
{
// Add label to the server
this._mailboxService.addLabel(this.labelsForm.get('newLabel').value).subscribe((addedLabel) => {
// Push the new label to the labels form array
(this.labelsForm.get('labels') as FormArray).push(this._formBuilder.group({
id : [addedLabel.id],
title: [addedLabel.title, Validators.required],
slug : [addedLabel.slug],
color: [addedLabel.color]
}));
// Reset the new label form
this.labelsForm.get('newLabel').markAsPristine();
this.labelsForm.get('newLabel').markAsUntouched();
this.labelsForm.get('newLabel.title').reset();
this.labelsForm.get('newLabel.title').clearValidators();
this.labelsForm.get('newLabel.title').updateValueAndValidity();
});
}
/**
* Delete a label
*/
deleteLabel(id: string): void
{
// Get the labels form array
const labelsFormArray = this.labelsForm.get('labels') as FormArray;
// Remove the label from the labels form array
labelsFormArray.removeAt(labelsFormArray.value.findIndex((label) => label.id === id));
// Delete label on the server
this._mailboxService.deleteLabel(id).subscribe();
}
/**
* Update labels
*/
updateLabels(): void
{
// Iterate through the labels form array controls
(this.labelsForm.get('labels') as FormArray).controls.forEach((labelFormGroup) => {
// If the label has been edited...
if ( labelFormGroup.dirty )
{
// Update the label on the server
this._mailboxService.updateLabel(labelFormGroup.value.id, labelFormGroup.value).subscribe();
}
});
// Reset the labels form array
this.labelsForm.get('labels').markAsPristine();
this.labelsForm.get('labels').markAsUntouched();
}
}

21
src/app/modules/admin/apps/mailbox/sidebar/sidebar.component.html
View File

@ -1,21 +0,0 @@
<div class="flex flex-col flex-auto w-full">
<!-- Title -->
<div class="mt-10 mb-8 mx-6 text-5xl font-extrabold tracking-tight leading-none">Mailbox</div>
<!-- Compose button -->
<button
class="mx-6"
mat-flat-button
[color]="'primary'"
(click)="openComposeDialog()">
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
<span class="ml-2">Compose</span>
</button>
<!-- Navigation -->
<fuse-vertical-navigation
[navigation]="menuData"
[inner]="true"
[mode]="'side'"
[opened]="true"></fuse-vertical-navigation>
</div>

9
src/app/modules/admin/apps/mailbox/sidebar/sidebar.component.scss
View File

@ -1,9 +0,0 @@
mailbox-sidebar {
fuse-vertical-navigation {
.fuse-vertical-navigation-wrapper {
box-shadow: none !important;
}
}
}

297
src/app/modules/admin/apps/mailbox/sidebar/sidebar.component.ts
View File

@ -1,297 +0,0 @@
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { FuseNavigationItem, FuseNavigationService } from '@fuse/components/navigation';
import { MailboxService } from 'app/modules/admin/apps/mailbox/mailbox.service';
import { MailboxComposeComponent } from 'app/modules/admin/apps/mailbox/compose/compose.component';
import { labelColorDefs } from 'app/modules/admin/apps/mailbox/mailbox.constants';
import { MailFilter, MailFolder, MailLabel } from 'app/modules/admin/apps/mailbox/mailbox.types';
@Component({
selector : 'mailbox-sidebar',
templateUrl : './sidebar.component.html',
styleUrls : ['./sidebar.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class MailboxSidebarComponent implements OnInit, OnDestroy
{
filters: MailFilter[];
folders: MailFolder[];
labels: MailLabel[];
menuData: FuseNavigationItem[] = [];
private _filtersMenuData: FuseNavigationItem[] = [];
private _foldersMenuData: FuseNavigationItem[] = [];
private _labelsMenuData: FuseNavigationItem[] = [];
private _otherMenuData: FuseNavigationItem[] = [];
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
* Constructor
*/
constructor(
private _mailboxService: MailboxService,
private _matDialog: MatDialog,
private _fuseNavigationService: FuseNavigationService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Filters
this._mailboxService.filters$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((filters: MailFilter[]) => {
this.filters = filters;
// Generate menu links
this._generateFiltersMenuLinks();
});
// Folders
this._mailboxService.folders$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((folders: MailFolder[]) => {
this.folders = folders;
// Generate menu links
this._generateFoldersMenuLinks();
// Update navigation badge
this._updateNavigationBadge(folders);
});
// Labels
this._mailboxService.labels$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((labels: MailLabel[]) => {
this.labels = labels;
// Generate menu links
this._generateLabelsMenuLinks();
});
// Generate other menu links
this._generateOtherMenuLinks();
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Open compose dialog
*/
openComposeDialog(): void
{
// Open the dialog
const dialogRef = this._matDialog.open(MailboxComposeComponent);
dialogRef.afterClosed()
.subscribe(result => {
console.log('Compose dialog was closed!');
});
}
// -----------------------------------------------------------------------------------------------------
// @ Private methods
// -----------------------------------------------------------------------------------------------------
/**
* Generate menus for folders
*
* @private
*/
private _generateFoldersMenuLinks(): void
{
// Reset the folders menu mock-api
this._foldersMenuData = [];
// Iterate through the folders
this.folders.forEach((folder) => {
// Generate menu item for the folder
const menuItem: FuseNavigationItem = {
id : folder.id,
title: folder.title,
type : 'basic',
icon : folder.icon,
link : '/apps/mailbox/' + folder.slug
};
// If the count is available and is bigger than zero...
if ( folder.count && folder.count > 0 )
{
// Add the count as a badge
menuItem['badge'] = {
title: folder.count + ''
};
}
// Push the menu item to the folders menu mock-api
this._foldersMenuData.push(menuItem);
});
// Update the menu mock-api
this._updateMenuData();
}
/**
* Generate menus for filters
*
* @private
*/
private _generateFiltersMenuLinks(): void
{
// Reset the filters menu
this._filtersMenuData = [];
// Iterate through the filters
this.filters.forEach((filter) => {
// Generate menu item for the filter
this._filtersMenuData.push({
id : filter.id,
title: filter.title,
type : 'basic',
icon : filter.icon,
link : '/apps/mailbox/filter/' + filter.slug
});
});
// Update the menu mock-api
this._updateMenuData();
}
/**
* Generate menus for labels
*
* @private
*/
private _generateLabelsMenuLinks(): void
{
// Reset the labels menu
this._labelsMenuData = [];
// Iterate through the labels
this.labels.forEach((label) => {
// Generate menu item for the label
this._labelsMenuData.push({
id : label.id,
title : label.title,
type : 'basic',
icon : 'heroicons_outline:tag',
classes: {
icon: labelColorDefs[label.color].text
},
link : '/apps/mailbox/label/' + label.slug
});
});
// Update the menu mock-api
this._updateMenuData();
}
/**
* Generate other menus
*
* @private
*/
private _generateOtherMenuLinks(): void
{
// Settings menu
this._otherMenuData.push({
title: 'Settings',
type : 'basic',
icon : 'heroicons_outline:cog',
link : '/apps/mailbox/settings'
});
// Update the menu mock-api
this._updateMenuData();
}
/**
* Update the menu mock-api
*
* @private
*/
private _updateMenuData(): void
{
this.menuData = [
{
title : 'MAILBOXES',
type : 'group',
children: [
...this._foldersMenuData
]
},
{
title : 'FILTERS',
type : 'group',
children: [
...this._filtersMenuData
]
},
{
title : 'LABELS',
type : 'group',
children: [
...this._labelsMenuData
]
},
{
type: 'spacer'
},
...this._otherMenuData
];
}
/**
* Update the navigation badge using the
* unread count of the inbox folder
*
* @param folders
* @private
*/
private _updateNavigationBadge(folders: MailFolder[]): void
{
// Get the inbox folder
const inboxFolder = this.folders.find((folder) => folder.slug === 'inbox');
// Get the component -> navigation mock-api -> item
const mainNavigationComponent = this._fuseNavigationService.getComponent('mainNavigation');
// If the main navigation component exists...
if ( mainNavigationComponent )
{
const mainNavigation = mainNavigationComponent.navigation;
const menuItem = this._fuseNavigationService.getItem('apps.mailbox', mainNavigation);
// Update the badge title of the item
menuItem.badge.title = inboxFolder.count + '';
// Refresh the navigation
mainNavigationComponent.refresh();
}
}
}

335
src/app/modules/admin/apps/tasks/details/details.component.html
View File

@ -1,335 +0,0 @@
<div class="flex flex-auto">
<form
class="flex flex-col flex-auto p-6 pt-10 sm:p-8 sm:pt-10 overflow-y-auto"
[formGroup]="taskForm">
<!-- Header -->
<div class="flex items-center justify-between -mt-3 -ml-4">
<!-- Mark as ... button -->
<button
class="pr-4 pl-3.5"
mat-button
(click)="toggleCompleted()">
<!-- Mark as complete -->
<ng-container *ngIf="!taskForm.get('completed').value">
<div class="flex items-center justify-center">
<mat-icon [svgIcon]="'heroicons_outline:check-circle'"></mat-icon>
<span class="ml-2 font-semibold">MARK AS COMPLETE</span>
</div>
</ng-container>
<!-- Mark as incomplete -->
<ng-container *ngIf="taskForm.get('completed').value">
<div class="flex items-center justify-center">
<mat-icon
class="text-primary"
[svgIcon]="'heroicons_outline:check-circle'"></mat-icon>
<span class="ml-2 font-semibold">MARK AS INCOMPLETE</span>
</div>
</ng-container>
</button>
<div class="flex items-center">
<!-- More menu -->
<button
mat-icon-button
[matMenuTriggerFor]="moreMenu">
<mat-icon [svgIcon]="'heroicons_outline:dots-vertical'"></mat-icon>
</button>
<mat-menu #moreMenu="matMenu">
<button
mat-menu-item
(click)="deleteTask()">
<mat-icon [svgIcon]="'heroicons_outline:trash'"></mat-icon>
<span>Delete {{task.type === 'task' ? 'task' : 'section'}}</span>
</button>
</mat-menu>
<!-- Close button -->
<button
mat-icon-button
[routerLink]="['../']">
<mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
</button>
</div>
</div>
<mat-divider class="mt-6 mb-8"></mat-divider>
<!-- Title -->
<div>
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
<mat-label>{{task.type === 'task' ? 'Task title' : 'Section title'}}</mat-label>
<textarea
matInput
fuseAutogrow
[formControlName]="'title'"
[spellcheck]="false"
#titleField></textarea>
</mat-form-field>
</div>
<!-- Tags -->
<div class="mt-8">
<div class="font-medium mb-1.5">Tags</div>
<div class="flex flex-wrap items-center -m-1.5">
<!-- Tags -->
<ng-container *ngIf="task.tags.length">
<ng-container *ngFor="let tag of (task.tags | fuseFindByKey:'id':tags); trackBy: trackByFn">
<div class="flex items-center justify-center px-4 m-1.5 rounded-full leading-9 text-gray-500 bg-gray-100 dark:text-gray-300 dark:bg-gray-700">
<span class="text-md font-medium whitespace-nowrap">{{tag.title}}</span>
</div>
</ng-container>
</ng-container>
<div
class="flex items-center justify-center px-4 m-1.5 rounded-full leading-9 cursor-pointer text-gray-500 bg-gray-100 dark:text-gray-300 dark:bg-gray-700"
(click)="openTagsPanel()"
#tagsPanelOrigin>
<ng-container *ngIf="task.tags.length">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
<span class="ml-1.5 text-md font-medium whitespace-nowrap">Edit</span>
</ng-container>
<ng-container *ngIf="!task.tags.length">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
<span class="ml-1.5 text-md font-medium whitespace-nowrap">Add</span>
</ng-container>
<!-- Tags panel -->
<ng-template #tagsPanel>
<div class="w-60 rounded border shadow-md bg-card">
<!-- Tags panel header -->
<div class="flex items-center m-3 mr-2">
<div class="flex items-center">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:search'"></mat-icon>
<div class="ml-2">
<input
class="w-full min-w-0 py-1 border-0"
type="text"
placeholder="Enter tag name"
(input)="filterTags($event)"
(keydown)="filterTagsInputKeyDown($event)"
[maxLength]="30"
#newTagInput>
</div>
</div>
<button
class="ml-1"
mat-icon-button
(click)="toggleTagsEditMode()">
<mat-icon
*ngIf="!tagsEditMode"
class="icon-size-5"
[svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
<mat-icon
*ngIf="tagsEditMode"
class="icon-size-5"
[svgIcon]="'heroicons_solid:check'"></mat-icon>
</button>
</div>
<div
class="flex flex-col max-h-64 py-2 border-t overflow-y-auto">
<!-- Tags -->
<ng-container *ngIf="!tagsEditMode">
<div
*ngFor="let tag of filteredTags; trackBy: trackByFn"
class="flex items-center h-10 min-h-10 px-4 cursor-pointer hover:bg-hover"
(click)="toggleTaskTag(tag)"
matRipple>
<mat-checkbox
class="flex items-center h-10 min-h-10"
[color]="'primary'"
[checked]="task.tags.includes(tag.id)">
</mat-checkbox>
<div class="ml-1">{{tag.title}}</div>
</div>
</ng-container>
<!-- Tags editing -->
<ng-container *ngIf="tagsEditMode">
<div class="py-2 space-y-2">
<div
class="flex items-center"
*ngFor="let tag of filteredTags; trackBy: trackByFn">
<mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full mx-4">
<input
matInput
[value]="tag.title"
(input)="updateTagTitle(tag, $event)">
<button
mat-icon-button
(click)="deleteTag(tag)"
matSuffix>
<mat-icon
class="icon-size-5 ml-2"
[svgIcon]="'heroicons_solid:trash'"></mat-icon>
</button>
</mat-form-field>
</div>
</div>
</ng-container>
<!-- Create tag -->
<div
class="flex items-center h-10 min-h-10 -ml-0.5 pl-4 pr-3 leading-none cursor-pointer hover:bg-hover"
*ngIf="shouldShowCreateTagButton(newTagInput.value)"
(click)="createTag(newTagInput.value); newTagInput.value = ''"
matRipple>
<mat-icon
class="mr-2 icon-size-5"
[svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
<div class="break-all">Create "<b>{{newTagInput.value}}</b>"</div>
</div>
</div>
</div>
</ng-template>
</div>
</div>
</div>
<!-- Priority and Due date -->
<div class="flex flex-wrap items-center mt-8">
<!-- Priority -->
<div>
<div class="font-medium">Priority</div>
<div
class="flex items-center mt-1.5 px-4 leading-9 rounded-full cursor-pointer"
[ngClass]="{'text-green-800 bg-green-200 dark:text-green-100 dark:bg-green-500': task.priority === 0,
'text-gray-800 bg-gray-200 dark:text-gray-100 dark:bg-gray-500': task.priority === 1,
'text-red-800 bg-red-200 dark:text-red-100 dark:bg-red-500': task.priority === 2}"
[matMenuTriggerFor]="priorityMenu">
<!-- Low -->
<ng-container *ngIf="task.priority === 0">
<mat-icon
class="icon-size-5 text-current"
[svgIcon]="'heroicons_solid:arrow-narrow-down'"></mat-icon>
<span class="ml-2 mr-1 text-md font-medium">Low</span>
</ng-container>
<!-- Normal -->
<ng-container *ngIf="task.priority === 1">
<mat-icon
class="icon-size-4 text-current"
[svgIcon]="'heroicons_solid:minus'"></mat-icon>
<span class="ml-2 mr-1 text-md font-medium">Normal</span>
</ng-container>
<!-- High -->
<ng-container *ngIf="task.priority === 2">
<mat-icon
class="icon-size-4 text-current"
[svgIcon]="'heroicons_solid:arrow-narrow-up'"></mat-icon>
<span class="ml-2 mr-1 text-md font-medium">High</span>
</ng-container>
</div>
<mat-menu #priorityMenu="matMenu">
<!-- Low -->
<button
[ngClass]="{'bg-hover': task.priority === 0}"
mat-menu-item
(click)="setTaskPriority(0)">
<span class="inline-flex items-center justify-between w-full min-w-30 leading-5">
<span class="font-medium">Low</span>
<mat-icon
class="mr-0 icon-size-4 text-green-600 dark:text-green-500"
[svgIcon]="'heroicons_solid:arrow-narrow-down'"></mat-icon>
</span>
</button>
<!-- Normal -->
<button
[ngClass]="{'bg-hover': task.priority === 1}"
mat-menu-item
(click)="setTaskPriority(1)">
<span class="inline-flex items-center justify-between w-full min-w-30 leading-5">
<span class="font-medium">Normal</span>
<mat-icon
class="mr-0 icon-size-4 text-gray-600 dark:text-gray-500"
[svgIcon]="'heroicons_solid:minus'"></mat-icon>
</span>
</button>
<!-- High -->
<button
[ngClass]="{'bg-hover': task.priority === 2}"
mat-menu-item
(click)="setTaskPriority(2)">
<span class="inline-flex items-center justify-between w-full min-w-30 leading-5">
<span class="font-medium">High</span>
<mat-icon
class="mr-0 icon-size-4 text-red-600 dark:text-red-500"
[svgIcon]="'heroicons_solid:arrow-narrow-up'"></mat-icon>
</span>
</button>
</mat-menu>
</div>
<!-- Due date -->
<div class="ml-6">
<div class="font-medium">Due date</div>
<div
class="relative flex items-center mt-1.5 px-4 leading-9 rounded-full cursor-pointer"
[ngClass]="{'text-gray-500 bg-gray-100 dark:text-gray-300 dark:bg-gray-700': !task.dueDate,
'text-green-800 bg-green-200 dark:text-green-100 dark:bg-green-500': task.dueDate && !isOverdue(),
'text-red-800 bg-red-200 dark:text-red-100 dark:bg-red-500': task.dueDate && isOverdue()}"
(click)="dueDatePicker.open()">
<mat-icon
class="icon-size-5 text-current"
[svgIcon]="'heroicons_solid:calendar'"></mat-icon>
<span class="ml-2 text-md font-medium">
<ng-container *ngIf="task.dueDate">{{task.dueDate | date:'longDate'}}</ng-container>
<ng-container *ngIf="!task.dueDate">Not set</ng-container>
</span>
<mat-form-field class="fuse-mat-no-subscript fuse-mat-dense invisible absolute inset-0 -mt-2.5 opacity-0 pointer-events-none">
<input
matInput
[formControlName]="'dueDate'"
[matDatepicker]="dueDatePicker">
<mat-datepicker #dueDatePicker>
<mat-datepicker-actions>
<button
mat-button
(click)="taskForm.get('dueDate').setValue(null)"
matDatepickerCancel>Clear
</button>
<button
class=""
mat-flat-button
[color]="'primary'"
matDatepickerApply>Select
</button>
</mat-datepicker-actions>
</mat-datepicker>
</mat-form-field>
</div>
</div>
</div>
<!-- Notes -->
<div class="mt-8">
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
<mat-label>Notes</mat-label>
<textarea
class="leading-relaxed"
matInput
fuseAutogrow
[formControlName]="'notes'"
[spellcheck]="false"></textarea>
</mat-form-field>
</div>
</form>
</div>

526
src/app/modules/admin/apps/tasks/details/details.component.ts
View File

@ -1,526 +0,0 @@
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, Renderer2, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { FormBuilder, FormGroup } from '@angular/forms';
import { TemplatePortal } from '@angular/cdk/portal';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { MatDrawerToggleResult } from '@angular/material/sidenav';
import { Subject } from 'rxjs';
import { debounceTime, filter, takeUntil, tap } from 'rxjs/operators';
import { assign } from 'lodash-es';
import * as moment from 'moment';
import { Tag, Task } from 'app/modules/admin/apps/tasks/tasks.types';
import { TasksListComponent } from 'app/modules/admin/apps/tasks/list/list.component';
import { TasksService } from 'app/modules/admin/apps/tasks/tasks.service';
@Component({
selector : 'tasks-details',
templateUrl : './details.component.html',
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TasksDetailsComponent implements OnInit, AfterViewInit, OnDestroy
{
@ViewChild('tagsPanelOrigin') private _tagsPanelOrigin: ElementRef;
@ViewChild('tagsPanel') private _tagsPanel: TemplateRef<any>;
@ViewChild('titleField') private _titleField: ElementRef;
tags: Tag[];
tagsEditMode: boolean = false;
filteredTags: Tag[];
task: Task;
taskForm: FormGroup;
tasks: Task[];
private _tagsPanelOverlayRef: OverlayRef;
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
* Constructor
*/
constructor(
private _activatedRoute: ActivatedRoute,
private _changeDetectorRef: ChangeDetectorRef,
private _formBuilder: FormBuilder,
private _renderer2: Renderer2,
private _router: Router,
private _tasksListComponent: TasksListComponent,
private _tasksService: TasksService,
private _overlay: Overlay,
private _viewContainerRef: ViewContainerRef
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Open the drawer
this._tasksListComponent.matDrawer.open();
// Create the task form
this.taskForm = this._formBuilder.group({
id : [''],
type : [''],
title : [''],
notes : [''],
completed: [false],
dueDate : [null],
priority : [0],
tags : [[]],
order : [0]
});
// Get the tags
this._tasksService.tags$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((tags: Tag[]) => {
this.tags = tags;
this.filteredTags = tags;
// Mark for check
this._changeDetectorRef.markForCheck();
});
// Get the tasks
this._tasksService.tasks$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((tasks: Task[]) => {
this.tasks = tasks;
// Mark for check
this._changeDetectorRef.markForCheck();
});
// Get the task
this._tasksService.task$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((task: Task) => {
// Open the drawer in case it is closed
this._tasksListComponent.matDrawer.open();
// Get the task
this.task = task;
// Patch values to the form from the task
this.taskForm.patchValue(task, {emitEvent: false});
// Mark for check
this._changeDetectorRef.markForCheck();
});
// Update task when there is a value change on the task form
this.taskForm.valueChanges
.pipe(
tap((value) => {
// Update the task object
this.task = assign(this.task, value);
}),
debounceTime(300),
takeUntil(this._unsubscribeAll)
)
.subscribe((value) => {
// Update the task on the server
this._tasksService.updateTask(value.id, value).subscribe();
// Mark for check
this._changeDetectorRef.markForCheck();
});
// Listen for NavigationEnd event to focus on the title field
this._router.events
.pipe(
takeUntil(this._unsubscribeAll),
filter(event => event instanceof NavigationEnd)
)
.subscribe(() => {
// Focus on the title field
this._titleField.nativeElement.focus();
});
}
/**
* After view init
*/
ngAfterViewInit(): void
{
// Listen for matDrawer opened change
this._tasksListComponent.matDrawer.openedChange
.pipe(
takeUntil(this._unsubscribeAll),
filter(opened => opened)
)
.subscribe(() => {
// Focus on the title element
this._titleField.nativeElement.focus();
});
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
// Dispose the overlay
if ( this._tagsPanelOverlayRef )
{
this._tagsPanelOverlayRef.dispose();
}
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Close the drawer
*/
closeDrawer(): Promise<MatDrawerToggleResult>
{
return this._tasksListComponent.matDrawer.close();
}
/**
* Toggle the completed status
*/
toggleCompleted(): void
{
// Get the form control for 'completed'
const completedFormControl = this.taskForm.get('completed');
// Toggle the completed status
completedFormControl.setValue(!completedFormControl.value);
}
/**
* Open tags panel
*/
openTagsPanel(): void
{
// Create the overlay
this._tagsPanelOverlayRef = this._overlay.create({
backdropClass : '',
hasBackdrop : true,
scrollStrategy : this._overlay.scrollStrategies.block(),
positionStrategy: this._overlay.position()
.flexibleConnectedTo(this._tagsPanelOrigin.nativeElement)
.withFlexibleDimensions()
.withViewportMargin(64)
.withLockedPosition()
.withPositions([
{
originX : 'start',
originY : 'bottom',
overlayX: 'start',
overlayY: 'top'
}
])
});
// Subscribe to the attachments observable
this._tagsPanelOverlayRef.attachments().subscribe(() => {
// Focus to the search input once the overlay has been attached
this._tagsPanelOverlayRef.overlayElement.querySelector('input').focus();
});
// Create a portal from the template
const templatePortal = new TemplatePortal(this._tagsPanel, this._viewContainerRef);
// Attach the portal to the overlay
this._tagsPanelOverlayRef.attach(templatePortal);
// Subscribe to the backdrop click
this._tagsPanelOverlayRef.backdropClick().subscribe(() => {
// If overlay exists and attached...
if ( this._tagsPanelOverlayRef && this._tagsPanelOverlayRef.hasAttached() )
{
// Detach it
this._tagsPanelOverlayRef.detach();
// Reset the tag filter
this.filteredTags = this.tags;
// Toggle the edit mode off
this.tagsEditMode = false;
}
// If template portal exists and attached...
if ( templatePortal && templatePortal.isAttached )
{
// Detach it
templatePortal.detach();
}
});
}
/**
* Toggle the tags edit mode
*/
toggleTagsEditMode(): void
{
this.tagsEditMode = !this.tagsEditMode;
}
/**
* Filter tags
*
* @param event
*/
filterTags(event): void
{
// Get the value
const value = event.target.value.toLowerCase();
// Filter the tags
this.filteredTags = this.tags.filter(tag => tag.title.toLowerCase().includes(value));
}
/**
* Filter tags input key down event
*
* @param event
*/
filterTagsInputKeyDown(event): void
{
// Return if the pressed key is not 'Enter'
if ( event.key !== 'Enter' )
{
return;
}
// If there is no tag available...
if ( this.filteredTags.length === 0 )
{
// Create the tag
this.createTag(event.target.value);
// Clear the input
event.target.value = '';
// Return
return;
}
// If there is a tag...
const tag = this.filteredTags[0];
const isTagApplied = this.task.tags.find((id) => id === tag.id);
// If the found tag is already applied to the task...
if ( isTagApplied )
{
// Remove the tag from the task
this.deleteTagFromTask(tag);
}
else
{
// Otherwise add the tag to the task
this.addTagToTask(tag);
}
}
/**
* Create a new tag
*
* @param title
*/
createTag(title: string): void
{
const tag = {
title
};
// Create tag on the server
this._tasksService.createTag(tag)
.subscribe((response) => {
// Add the tag to the task
this.addTagToTask(response);
});
}
/**
* Update the tag title
*
* @param tag
* @param event
*/
updateTagTitle(tag: Tag, event): void
{
// Update the title on the tag
tag.title = event.target.value;
// Update the tag on the server
this._tasksService.updateTag(tag.id, tag)
.pipe(debounceTime(300))
.subscribe();
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* Delete the tag
*
* @param tag
*/
deleteTag(tag: Tag): void
{
// Delete the tag from the server
this._tasksService.deleteTag(tag.id).subscribe();
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* Add tag to the task
*
* @param tag
*/
addTagToTask(tag: Tag): void
{
// Add the tag
this.task.tags.unshift(tag.id);
// Update the task form
this.taskForm.get('tags').patchValue(this.task.tags);
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* Delete tag from the task
*
* @param tag
*/
deleteTagFromTask(tag: Tag): void
{
// Remove the tag
this.task.tags.splice(this.task.tags.findIndex(item => item === tag.id), 1);
// Update the task form
this.taskForm.get('tags').patchValue(this.task.tags);
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* Toggle task tag
*
* @param tag
*/
toggleTaskTag(tag: Tag): void
{
if ( this.task.tags.includes(tag.id) )
{
this.deleteTagFromTask(tag);
}
else
{
this.addTagToTask(tag);
}
}
/**
* Should the create tag button be visible
*
* @param inputValue
*/
shouldShowCreateTagButton(inputValue: string): boolean
{
return !!!(inputValue === '' || this.tags.findIndex(tag => tag.title.toLowerCase() === inputValue.toLowerCase()) > -1);
}
/**
* Set the task priority
*
* @param priority
*/
setTaskPriority(priority): void
{
// Set the value
this.taskForm.get('priority').setValue(priority);
}
/**
* Check if the task is overdue or not
*/
isOverdue(): boolean
{
return moment(this.task.dueDate, moment.ISO_8601).isBefore(moment(), 'days');
}
/**
* Delete the task
*/
deleteTask(): void
{
// Get the current task's id
const id = this.task.id;
// Get the next/previous task's id
const currentTaskIndex = this.tasks.findIndex(item => item.id === id);
const nextTaskIndex = currentTaskIndex + ((currentTaskIndex === (this.tasks.length - 1)) ? -1 : 1);
const nextTaskId = (this.tasks.length === 1 && this.tasks[0].id === id) ? null : this.tasks[nextTaskIndex].id;
// Delete the task
this._tasksService.deleteTask(id)
.subscribe((isDeleted) => {
// Return if the task wasn't deleted...
if ( !isDeleted )
{
return;
}
// Get the current activated route
let route = this._activatedRoute;
while ( route.firstChild )
{
route = route.firstChild;
}
// Navigate to the next task if available
if ( nextTaskId )
{
this._router.navigate(['../', nextTaskId], {relativeTo: route});
}
// Otherwise, navigate to the parent
else
{
this._router.navigate(['../'], {relativeTo: route});
}
});
// 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;
}
}

180
src/app/modules/admin/apps/tasks/list/list.component.html
View File

@ -1,180 +0,0 @@
<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"
(backdropClick)="onBackdropClicked()">
<!-- Drawer -->
<mat-drawer
class="w-full sm:w-128 dark:bg-gray-900"
[mode]="drawerMode"
[opened]="false"
[position]="'end'"
[disableClose]="true"
#matDrawer>
<router-outlet></router-outlet>
</mat-drawer>
<mat-drawer-content class="flex flex-col">
<!-- Main -->
<div class="flex flex-col flex-auto">
<!-- Header -->
<div class="flex flex-col sm:flex-row items-start sm:items-center sm:justify-between py-8 px-6 md:px-8 border-b">
<!-- Title -->
<div>
<div class="text-4xl font-extrabold tracking-tight leading-none">Tasks</div>
<div class="ml-0.5 font-medium text-secondary">
<span *ngIf="tasksCount.incomplete === 0">All tasks completed!</span>
<span *ngIf="tasksCount.incomplete !== 0">{{tasksCount.incomplete}} remaining tasks</span>
</div>
</div>
<!-- Actions -->
<div class="mt-4 sm:mt-0">
<!-- Add section button -->
<button
mat-flat-button
[color]="'accent'"
(click)="createTask('section')"
[matTooltip]="'Shortcut: Ctrl + .'">
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
<span class="ml-2 mr-1">Add Section</span>
</button>
<!-- Add task button -->
<button
class="ml-3"
mat-flat-button
[color]="'primary'"
(click)="createTask('task')"
[matTooltip]="'Shortcut: Ctrl + /'">
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
<span class="ml-2 mr-1">Add Task</span>
</button>
</div>
</div>
<!-- Tasks list -->
<ng-container *ngIf="tasks && tasks.length > 0; else noTasks">
<div
class="divide-y"
cdkDropList
[cdkDropListData]="tasks"
(cdkDropListDropped)="dropped($event)">
<!-- Task -->
<div
[id]="'task-' + task.id"
class="group w-full h-16 select-none hover:bg-hover"
*ngFor="let task of tasks; trackBy: trackByFn"
[ngClass]="{'text-lg font-semibold bg-gray-100 dark:bg-card': task.type === 'section',
'text-hint': task.completed}"
cdkDrag
[cdkDragLockAxis]="'y'">
<!-- Drag preview -->
<div
class="flex flex-0 w-0 h-0"
*cdkDragPreview></div>
<!-- Task content -->
<div class="relative flex items-center h-full pl-10">
<!-- Selected indicator -->
<ng-container *ngIf="selectedTask && selectedTask.id === task.id">
<div class="z-10 absolute right-0 flex flex-0 w-1 h-full bg-primary"></div>
</ng-container>
<!-- Drag handle -->
<div
class="md:hidden absolute flex items-center justify-center inset-y-0 left-0 w-8 cursor-move md:group-hover:flex"
cdkDragHandle>
<mat-icon
class="icon-size-5 text-hint"
[svgIcon]="'heroicons_solid:menu'"></mat-icon>
</div>
<!-- Complete task button -->
<button
class="mr-2 -ml-2.5 leading-none"
*ngIf="task.type === 'task'"
(click)="toggleCompleted(task)"
mat-icon-button>
<ng-container *ngIf="task.completed">
<mat-icon
class="text-primary"
[svgIcon]="'heroicons_outline:check-circle'"></mat-icon>
</ng-container>
<ng-container *ngIf="!task.completed">
<mat-icon
class="text-hint"
[svgIcon]="'heroicons_outline:check-circle'"></mat-icon>
</ng-container>
</button>
<!-- Task link -->
<a
class="flex flex-auto items-center min-w-0 h-full pr-7"
[routerLink]="[task.id]">
<!-- Title & Placeholder -->
<div class="flex-auto mr-2 truncate">
<ng-container *ngIf="task.title">
<span>{{task.title}}</span>
</ng-container>
<ng-container *ngIf="!task.title">
<span class="select-none text-hint">{{task.type | titlecase}} title</span>
</ng-container>
</div>
<!-- Priority -->
<ng-container *ngIf="task.type === 'task'">
<div class="w-4 h-4 mr-3">
<!-- Low -->
<mat-icon
class="icon-size-4 text-green-600 dark:text-green-400"
*ngIf="task.priority === 0"
[svgIcon]="'heroicons_solid:arrow-narrow-down'"
[title]="'Low'"></mat-icon>
<!-- High -->
<mat-icon
class="icon-size-4 text-red-600 dark:text-red-400"
*ngIf="task.priority === 2"
[svgIcon]="'heroicons_solid:arrow-narrow-up'"
[title]="'High'"></mat-icon>
</div>
</ng-container>
<div
class="text-sm whitespace-nowrap text-secondary"
*ngIf="task.type === 'task'">
{{task.dueDate | date:'LLL dd'}}
</div>
</a>
</div>
</div>
</div>
</ng-container>
<ng-template #noTasks>
<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:bulleted_list'"></mat-icon>
<div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">Add a task to start planning!</div>
</div>
</ng-template>
</div>
</mat-drawer-content>
</mat-drawer-container>
</div>

264
src/app/modules/admin/apps/tasks/list/list.component.ts
View File

@ -1,264 +0,0 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { ActivatedRoute, Router } from '@angular/router';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { MatDrawer } from '@angular/material/sidenav';
import { fromEvent, Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { FuseNavigationService } from '@fuse/components/navigation';
import { Tag, Task } from 'app/modules/admin/apps/tasks/tasks.types';
import { TasksService } from 'app/modules/admin/apps/tasks/tasks.service';
@Component({
selector : 'tasks-list',
templateUrl : './list.component.html',
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TasksListComponent implements OnInit, OnDestroy
{
@ViewChild('matDrawer', {static: true}) matDrawer: MatDrawer;
drawerMode: 'side' | 'over';
selectedTask: Task;
tags: Tag[];
tasks: Task[];
tasksCount: any = {
completed : 0,
incomplete: 0,
total : 0
};
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
* Constructor
*/
constructor(
private _activatedRoute: ActivatedRoute,
private _changeDetectorRef: ChangeDetectorRef,
@Inject(DOCUMENT) private _document: any,
private _router: Router,
private _tasksService: TasksService,
private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fuseNavigationService: FuseNavigationService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Get the tags
this._tasksService.tags$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((tags: Tag[]) => {
this.tags = tags;
// Mark for check
this._changeDetectorRef.markForCheck();
});
// Get the tasks
this._tasksService.tasks$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((tasks: Task[]) => {
this.tasks = tasks;
// Update the counts
this.tasksCount.total = this.tasks.filter(task => task.type === 'task').length;
this.tasksCount.completed = this.tasks.filter(task => task.type === 'task' && task.completed).length;
this.tasksCount.incomplete = this.tasksCount.total - this.tasksCount.completed;
// Mark for check
this._changeDetectorRef.markForCheck();
// Update the count on the navigation
setTimeout(() => {
// Get the component -> navigation data -> item
const mainNavigationComponent = this._fuseNavigationService.getComponent('mainNavigation');
// If the main navigation component exists...
if ( mainNavigationComponent )
{
const mainNavigation = mainNavigationComponent.navigation;
const menuItem = this._fuseNavigationService.getItem('apps.tasks', mainNavigation);
// Update the subtitle of the item
menuItem.subtitle = this.tasksCount.incomplete + ' remaining tasks';
// Refresh the navigation
mainNavigationComponent.refresh();
}
});
});
// Get the task
this._tasksService.task$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((task: Task) => {
this.selectedTask = task;
// Mark for check
this._changeDetectorRef.markForCheck();
});
// Subscribe to media query change
this._fuseMediaWatcherService.onMediaQueryChange$('(min-width: 1440px)')
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((state) => {
// Calculate the drawer mode
this.drawerMode = state.matches ? 'side' : 'over';
// Mark for check
this._changeDetectorRef.markForCheck();
});
// Listen for shortcuts
fromEvent(this._document, 'keydown')
.pipe(
takeUntil(this._unsubscribeAll),
filter<KeyboardEvent>((event) => {
return (event.ctrlKey === true || event.metaKey) // Ctrl or Cmd
&& (event.key === '/' || event.key === '.'); // '/' or '.' key
})
)
.subscribe((event: KeyboardEvent) => {
// If the '/' pressed
if ( event.key === '/' )
{
this.createTask('task');
}
// If the '.' pressed
if ( event.key === '.' )
{
this.createTask('section');
}
});
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Go to task
*
* @param id
*/
goToTask(id: string): void
{
// Get the current activated route
let route = this._activatedRoute;
while ( route.firstChild )
{
route = route.firstChild;
}
// Go to task
this._router.navigate(['../', id], {relativeTo: route});
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* On backdrop clicked
*/
onBackdropClicked(): void
{
// Get the current activated route
let route = this._activatedRoute;
while ( route.firstChild )
{
route = route.firstChild;
}
// Go to the parent route
this._router.navigate(['../'], {relativeTo: route});
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* Create task
*
* @param type
*/
createTask(type: 'task' | 'section'): void
{
// Create the task
this._tasksService.createTask(type).subscribe((newTask) => {
// Go to new task
this.goToTask(newTask.id);
});
}
/**
* Toggle the completed status
* of the given task
*
* @param task
*/
toggleCompleted(task: Task): void
{
// Toggle the completed status
task.completed = !task.completed;
// Update the task on the server
this._tasksService.updateTask(task.id, task).subscribe();
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* Task dropped
*
* @param event
*/
dropped(event: CdkDragDrop<Task[]>): void
{
// Move the item in the array
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
// Save the new order
this._tasksService.updateTasksOrders(event.container.data).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;
}
}

1
src/app/modules/admin/apps/tasks/tasks.component.html
View File

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

17
src/app/modules/admin/apps/tasks/tasks.component.ts
View File

@ -1,17 +0,0 @@
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
@Component({
selector : 'tasks',
templateUrl : './tasks.component.html',
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TasksComponent
{
/**
* Constructor
*/
constructor()
{
}
}

49
src/app/modules/admin/apps/tasks/tasks.guards.ts
View File

@ -1,49 +0,0 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { TasksDetailsComponent } from 'app/modules/admin/apps/tasks/details/details.component';
@Injectable({
providedIn: 'root'
})
export class CanDeactivateTasksDetails implements CanDeactivate<TasksDetailsComponent>
{
canDeactivate(
component: TasksDetailsComponent,
currentRoute: ActivatedRouteSnapshot,
currentState: RouterStateSnapshot,
nextState: RouterStateSnapshot
): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
{
// Get the next route
let nextRoute: ActivatedRouteSnapshot = nextState.root;
while ( nextRoute.firstChild )
{
nextRoute = nextRoute.firstChild;
}
// If the next state doesn't contain '/tasks'
// it means we are navigating away from the
// tasks app
if ( !nextState.url.includes('/tasks') )
{
// Let it navigate
return true;
}
// If we are navigating to another task...
if ( nextRoute.paramMap.get('id') )
{
// Just navigate
return true;
}
// Otherwise...
else
{
// Close the drawer first, and then navigate
return component.closeDrawer().then(() => {
return true;
});
}
}
}

77
src/app/modules/admin/apps/tasks/tasks.module.ts
View File

@ -1,77 +0,0 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MAT_DATE_FORMATS, MatRippleModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDividerModule } from '@angular/material/divider';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatMomentDateModule } from '@angular/material-moment-adapter';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatTooltipModule } from '@angular/material/tooltip';
import * as moment from 'moment';
import { FuseAutogrowModule } from '@fuse/directives/autogrow';
import { FuseFindByKeyPipeModule } from '@fuse/pipes/find-by-key';
import { SharedModule } from 'app/shared/shared.module';
import { tasksRoutes } from 'app/modules/admin/apps/tasks/tasks.routing';
import { TasksComponent } from 'app/modules/admin/apps/tasks/tasks.component';
import { TasksDetailsComponent } from 'app/modules/admin/apps/tasks/details/details.component';
import { TasksListComponent } from 'app/modules/admin/apps/tasks/list/list.component';
@NgModule({
declarations: [
TasksComponent,
TasksDetailsComponent,
TasksListComponent
],
imports : [
RouterModule.forChild(tasksRoutes),
DragDropModule,
MatAutocompleteModule,
MatButtonModule,
MatCheckboxModule,
MatDatepickerModule,
MatDividerModule,
MatFormFieldModule,
MatIconModule,
MatInputModule,
MatMenuModule,
MatMomentDateModule,
MatProgressBarModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatTooltipModule,
FuseAutogrowModule,
FuseFindByKeyPipeModule,
SharedModule
],
providers : [
{
provide : MAT_DATE_FORMATS,
useValue: {
parse : {
dateInput: moment.ISO_8601
},
display: {
dateInput : 'll',
monthYearLabel : 'MMM YYYY',
dateA11yLabel : 'LL',
monthYearA11yLabel: 'MMMM YYYY'
}
}
}
]
})
export class TasksModule
{
}

110
src/app/modules/admin/apps/tasks/tasks.resolvers.ts
View File

@ -1,110 +0,0 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { TasksService } from 'app/modules/admin/apps/tasks/tasks.service';
import { Tag, Task } from 'app/modules/admin/apps/tasks/tasks.types';
@Injectable({
providedIn: 'root'
})
export class TasksTagsResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(private _tasksService: TasksService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Tag[]>
{
return this._tasksService.getTags();
}
}
@Injectable({
providedIn: 'root'
})
export class TasksResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(private _tasksService: TasksService)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Task[]>
{
return this._tasksService.getTasks();
}
}
@Injectable({
providedIn: 'root'
})
export class TasksTaskResolver implements Resolve<any>
{
/**
* Constructor
*/
constructor(
private _router: Router,
private _tasksService: TasksService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Task>
{
return this._tasksService.getTaskById(route.paramMap.get('id'))
.pipe(
// Error here means the requested task is not available
catchError((error) => {
// Log the error
console.error(error);
// Get the parent url
const parentUrl = state.url.split('/').slice(0, -1).join('/');
// Navigate to there
this._router.navigateByUrl(parentUrl);
// Throw an error
return throwError(error);
})
);
}
}

35
src/app/modules/admin/apps/tasks/tasks.routing.ts
View File

@ -1,35 +0,0 @@
import { Route } from '@angular/router';
import { CanDeactivateTasksDetails } from 'app/modules/admin/apps/tasks/tasks.guards';
import { TasksResolver, TasksTagsResolver, TasksTaskResolver } from 'app/modules/admin/apps/tasks/tasks.resolvers';
import { TasksComponent } from 'app/modules/admin/apps/tasks/tasks.component';
import { TasksListComponent } from 'app/modules/admin/apps/tasks/list/list.component';
import { TasksDetailsComponent } from 'app/modules/admin/apps/tasks/details/details.component';
export const tasksRoutes: Route[] = [
{
path : '',
component: TasksComponent,
resolve : {
tags: TasksTagsResolver
},
children : [
{
path : '',
component: TasksListComponent,
resolve : {
tasks: TasksResolver
},
children : [
{
path : ':id',
component : TasksDetailsComponent,
resolve : {
task: TasksTaskResolver
},
canDeactivate: [CanDeactivateTasksDetails]
}
]
}
]
}
];

327
src/app/modules/admin/apps/tasks/tasks.service.ts
View File

@ -1,327 +0,0 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable, of, throwError } from 'rxjs';
import { filter, map, switchMap, take, tap } from 'rxjs/operators';
import { Tag, Task } from 'app/modules/admin/apps/tasks/tasks.types';
@Injectable({
providedIn: 'root'
})
export class TasksService
{
// Private
private _tags: BehaviorSubject<Tag[] | null> = new BehaviorSubject(null);
private _task: BehaviorSubject<Task | null> = new BehaviorSubject(null);
private _tasks: BehaviorSubject<Task[] | null> = new BehaviorSubject(null);
/**
* Constructor
*/
constructor(private _httpClient: HttpClient)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Accessors
// -----------------------------------------------------------------------------------------------------
/**
* Getter for tags
*/
get tags$(): Observable<Tag[]>
{
return this._tags.asObservable();
}
/**
* Getter for task
*/
get task$(): Observable<Task>
{
return this._task.asObservable();
}
/**
* Getter for tasks
*/
get tasks$(): Observable<Task[]>
{
return this._tasks.asObservable();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Get tags
*/
getTags(): Observable<Tag[]>
{
return this._httpClient.get<Tag[]>('api/apps/tasks/tags').pipe(
tap((response: any) => {
this._tags.next(response);
})
);
}
/**
* Crate tag
*
* @param tag
*/
createTag(tag: Tag): Observable<Tag>
{
return this.tags$.pipe(
take(1),
switchMap(tags => this._httpClient.post<Tag>('api/apps/tasks/tag', {tag}).pipe(
map((newTag) => {
// Update the tags with the new tag
this._tags.next([...tags, newTag]);
// Return new tag from observable
return newTag;
})
))
);
}
/**
* Update the tag
*
* @param id
* @param tag
*/
updateTag(id: string, tag: Tag): Observable<Tag>
{
return this.tags$.pipe(
take(1),
switchMap(tags => this._httpClient.patch<Tag>('api/apps/tasks/tag', {
id,
tag
}).pipe(
map((updatedTag) => {
// Find the index of the updated tag
const index = tags.findIndex(item => item.id === id);
// Update the tag
tags[index] = updatedTag;
// Update the tags
this._tags.next(tags);
// Return the updated tag
return updatedTag;
})
))
);
}
/**
* Delete the tag
*
* @param id
*/
deleteTag(id: string): Observable<boolean>
{
return this.tags$.pipe(
take(1),
switchMap(tags => this._httpClient.delete('api/apps/tasks/tag', {params: {id}}).pipe(
map((isDeleted: boolean) => {
// Find the index of the deleted tag
const index = tags.findIndex(item => item.id === id);
// Delete the tag
tags.splice(index, 1);
// Update the tags
this._tags.next(tags);
// Return the deleted status
return isDeleted;
}),
filter(isDeleted => isDeleted),
switchMap(isDeleted => this.tasks$.pipe(
take(1),
map((tasks) => {
// Iterate through the tasks
tasks.forEach((task) => {
const tagIndex = task.tags.findIndex(tag => tag === id);
// If the task has a tag, remove it
if ( tagIndex > -1 )
{
task.tags.splice(tagIndex, 1);
}
});
// Return the deleted status
return isDeleted;
})
))
))
);
}
/**
* Get tasks
*/
getTasks(): Observable<Task[]>
{
return this._httpClient.get<Task[]>('api/apps/tasks/all').pipe(
tap((response) => {
this._tasks.next(response);
})
);
}
/**
* Update tasks orders
*
* @param tasks
*/
updateTasksOrders(tasks: Task[]): Observable<Task[]>
{
return this._httpClient.patch<Task[]>('api/apps/tasks/order', {tasks});
}
/**
* Search tasks with given query
*
* @param query
*/
searchTasks(query: string): Observable<Task[] | null>
{
return this._httpClient.get<Task[] | null>('api/apps/tasks/search', {params: {query}});
}
/**
* Get task by id
*/
getTaskById(id: string): Observable<Task>
{
return this._tasks.pipe(
take(1),
map((tasks) => {
// Find the task
const task = tasks.find(item => item.id === id) || null;
// Update the task
this._task.next(task);
// Return the task
return task;
}),
switchMap((task) => {
if ( !task )
{
return throwError('Could not found task with id of ' + id + '!');
}
return of(task);
})
);
}
/**
* Create task
*
* @param type
*/
createTask(type: string): Observable<Task>
{
return this.tasks$.pipe(
take(1),
switchMap((tasks) => this._httpClient.post<Task>('api/apps/tasks/task', {type}).pipe(
map((newTask) => {
// Update the tasks with the new task
this._tasks.next([newTask, ...tasks]);
// Return the new task
return newTask;
})
))
);
}
/**
* Update task
*
* @param id
* @param task
*/
updateTask(id: string, task: Task): Observable<Task>
{
return this.tasks$
.pipe(
take(1),
switchMap(tasks => this._httpClient.patch<Task>('api/apps/tasks/task', {
id,
task
}).pipe(
map((updatedTask) => {
// Find the index of the updated task
const index = tasks.findIndex(item => item.id === id);
// Update the task
tasks[index] = updatedTask;
// Update the tasks
this._tasks.next(tasks);
// Return the updated task
return updatedTask;
}),
switchMap(updatedTask => this.task$.pipe(
take(1),
filter(item => item && item.id === id),
tap(() => {
// Update the task if it's selected
this._task.next(updatedTask);
// Return the updated task
return updatedTask;
})
))
))
);
}
/**
* Delete the task
*
* @param id
*/
deleteTask(id: string): Observable<boolean>
{
return this.tasks$.pipe(
take(1),
switchMap(tasks => this._httpClient.delete('api/apps/tasks/task', {params: {id}}).pipe(
map((isDeleted: boolean) => {
// Find the index of the deleted task
const index = tasks.findIndex(item => item.id === id);
// Delete the task
tasks.splice(index, 1);
// Update the tasks
this._tasks.next(tasks);
// Return the deleted status
return isDeleted;
})
))
);
}
}

18
src/app/modules/admin/apps/tasks/tasks.types.ts
View File

@ -1,18 +0,0 @@
export interface Tag
{
id?: string;
title?: string;
}
export interface Task
{
id: string;
type: 'task' | 'section';
title: string;
notes: string;
completed: boolean;
dueDate: string | null;
priority: 0 | 1 | 2;
tags: string[];
order: number;
}

509
src/app/modules/admin/dashboards/analytics/analytics.component.html
View File

@ -1,509 +0,0 @@
<div class="flex flex-col flex-auto w-full">
<div class="flex flex-wrap w-full max-w-screen-xl mx-auto p-6 md:p-8">
<!-- Title and action buttons -->
<div class="flex items-center justify-between w-full">
<div>
<div class="text-3xl font-semibold tracking-tight leading-8">Analytics dashboard</div>
<div class="font-medium tracking-tight text-secondary">Monitor metrics, check reports and review performance</div>
</div>
<div class="flex items-center ml-6">
<button
class="hidden sm:inline-flex"
mat-stroked-button>
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:cog'"></mat-icon>
<span class="ml-2">Settings</span>
</button>
<button
class="hidden sm:inline-flex ml-3"
mat-flat-button
[color]="'primary'">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:save'"></mat-icon>
<span class="ml-2">Export</span>
</button>
<!-- Actions menu (visible on xs) -->
<div class="sm:hidden">
<button
[matMenuTriggerFor]="actionsMenu"
mat-icon-button>
<mat-icon [svgIcon]="'heroicons_outline:dots-vertical'"></mat-icon>
</button>
<mat-menu #actionsMenu="matMenu">
<button mat-menu-item>Export</button>
<button mat-menu-item>Settings</button>
</mat-menu>
</div>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 w-full mt-8">
<!-- Visitors overview -->
<div class="sm:col-span-2 lg:col-span-3 dark flex flex-col flex-auto bg-card shadow rounded-2xl overflow-hidden">
<div class="flex items-center justify-between mt-10 ml-10 mr-6 sm:mr-10">
<div class="flex flex-col">
<div class="mr-4 text-2xl md:text-3xl font-semibold tracking-tight leading-7">Visitors Overview</div>
<div class="font-medium text-secondary">Number of unique visitors</div>
</div>
<div class="ml-2">
<mat-button-toggle-group
class="hidden sm:inline-flex border-none space-x-1"
value="this-year"
#visitorsYearSelector="matButtonToggleGroup">
<mat-button-toggle
class="px-1.5 rounded-full overflow-hidden border-none font-medium"
value="last-year">Last Year
</mat-button-toggle>
<mat-button-toggle
class="px-1.5 rounded-full overflow-hidden border-none font-medium"
value="this-year">This Year
</mat-button-toggle>
</mat-button-toggle-group>
<div class="sm:hidden">
<button
mat-icon-button
[matMenuTriggerFor]="visitorsMenu">
<mat-icon [svgIcon]="'heroicons_outline:dots-vertical'"></mat-icon>
</button>
<mat-menu #visitorsMenu="matMenu">
<button mat-menu-item>This Year</button>
<button mat-menu-item>Last Year</button>
</mat-menu>
</div>
</div>
</div>
<div class="flex flex-col flex-auto h-80">
<apx-chart
class="flex-auto w-full h-full"
[chart]="chartVisitors.chart"
[colors]="chartVisitors.colors"
[dataLabels]="chartVisitors.dataLabels"
[fill]="chartVisitors.fill"
[grid]="chartVisitors.grid"
[series]="chartVisitors.series[visitorsYearSelector.value]"
[stroke]="chartVisitors.stroke"
[tooltip]="chartVisitors.tooltip"
[xaxis]="chartVisitors.xaxis"
[yaxis]="chartVisitors.yaxis"></apx-chart>
</div>
</div>
<!-- Conversions -->
<div class="sm:col-span-2 lg:col-span-1 flex flex-col flex-auto bg-card shadow rounded-2xl overflow-hidden">
<div class="flex items-start justify-between m-6 mb-0">
<div class="text-lg font-medium tracking-tight leading-6 truncate">Conversions</div>
<div class="ml-2">
<button
class="h-6 min-h-6 px-2 rounded-full bg-hover"
mat-button
[matMenuTriggerFor]="conversionMenu">
<span class="font-medium text-sm text-secondary">30 days</span>
</button>
<mat-menu #conversionMenu="matMenu">
<button mat-menu-item>30 days</button>
<button mat-menu-item>3 months</button>
<button mat-menu-item>9 months</button>
</mat-menu>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:items-center mx-6 mt-3">
<div class="text-7xl font-bold tracking-tighter leading-tight">{{data.conversions.amount | number:'1.0-0'}}</div>
<div class="flex lg:flex-col lg:ml-3">
<mat-icon
class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:trending-down'"></mat-icon>
<div class="flex items-center ml-1 lg:ml-0 lg:mt-0.5 text-md leading-none whitespace-nowrap text-secondary">
<span class="font-medium text-red-500">2%</span>
<span class="ml-1">below target</span>
</div>
</div>
</div>
<div class="flex flex-col flex-auto h-20">
<apx-chart
class="flex-auto w-full h-full"
[chart]="chartConversions.chart"
[colors]="chartConversions.colors"
[series]="chartConversions.series"
[stroke]="chartConversions.stroke"
[tooltip]="chartConversions.tooltip"
[xaxis]="chartConversions.xaxis"
[yaxis]="chartConversions.yaxis"></apx-chart>
</div>
</div>
<!-- Impressions -->
<div class="flex flex-col flex-auto bg-card shadow rounded-2xl overflow-hidden">
<div class="flex items-start justify-between m-6 mb-0">
<div class="text-lg font-medium tracking-tight leading-6 truncate">Impressions</div>
<div class="ml-2">
<button
class="h-6 min-h-6 px-2 rounded-full bg-hover"
mat-button
[matMenuTriggerFor]="impressionsMenu">
<span class="font-medium text-sm text-secondary">30 days</span>
</button>
<mat-menu #impressionsMenu="matMenu">
<button mat-menu-item>30 days</button>
<button mat-menu-item>3 months</button>
<button mat-menu-item>9 months</button>
</mat-menu>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:items-center mx-6 mt-3">
<div class="text-7xl font-bold tracking-tighter leading-tight">{{data.impressions.amount | number:'1.0-0'}}</div>
<div class="flex lg:flex-col lg:ml-3">
<mat-icon
class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:trending-down'"></mat-icon>
<div class="flex items-center ml-1 lg:ml-0 lg:mt-0.5 text-md leading-none whitespace-nowrap text-secondary">
<span class="font-medium text-red-500">4%</span>
<span class="ml-1">below target</span>
</div>
</div>
</div>
<div class="flex flex-col flex-auto h-20">
<apx-chart
class="flex-auto w-full h-full"
[chart]="chartImpressions.chart"
[colors]="chartImpressions.colors"
[series]="chartImpressions.series"
[stroke]="chartImpressions.stroke"
[tooltip]="chartImpressions.tooltip"
[xaxis]="chartImpressions.xaxis"
[yaxis]="chartImpressions.yaxis"></apx-chart>
</div>
</div>
<!-- Visits -->
<div class="flex flex-col flex-auto bg-card shadow rounded-2xl overflow-hidden">
<div class="flex items-start justify-between m-6 mb-0">
<div class="text-lg font-medium tracking-tight leading-6 truncate">Visits</div>
<div class="ml-2">
<button
class="h-6 min-h-6 px-2 rounded-full bg-hover"
mat-button
[matMenuTriggerFor]="impressionsMenu">
<span class="font-medium text-sm text-secondary">30 days</span>
</button>
<mat-menu #impressionsMenu="matMenu">
<button mat-menu-item>30 days</button>
<button mat-menu-item>3 months</button>
<button mat-menu-item>9 months</button>
</mat-menu>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:items-center mx-6 mt-3">
<div class="text-7xl font-bold tracking-tighter leading-tight">{{data.visits.amount | number:'1.0-0'}}</div>
<div class="flex lg:flex-col lg:ml-3">
<mat-icon
class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:trending-down'"></mat-icon>
<div class="flex items-center ml-1 lg:ml-0 lg:mt-0.5 text-md leading-none whitespace-nowrap text-secondary">
<span class="font-medium text-red-500">4%</span>
<span class="ml-1">below target</span>
</div>
</div>
</div>
<div class="flex flex-col flex-auto h-20">
<apx-chart
class="flex-auto w-full h-full"
[chart]="chartVisits.chart"
[colors]="chartVisits.colors"
[series]="chartVisits.series"
[stroke]="chartVisits.stroke"
[tooltip]="chartVisits.tooltip"
[xaxis]="chartVisits.xaxis"
[yaxis]="chartVisits.yaxis"></apx-chart>
</div>
</div>
</div>
<!-- Visitors vs. Page Views -->
<div class="flex flex-col flex-auto mt-8 bg-card shadow rounded-2xl overflow-hidden">
<div class="flex items-start justify-between m-6 mb-0">
<div class="text-lg font-medium tracking-tight leading-6 truncate">Visitors vs. Page Views</div>
<div class="ml-2">
<button
class="h-6 min-h-6 px-2 rounded-full bg-hover"
mat-button
[matMenuTriggerFor]="conversionMenu">
<span class="font-medium text-sm text-secondary">30 days</span>
</button>
<mat-menu #conversionMenu="matMenu">
<button mat-menu-item>30 days</button>
<button mat-menu-item>3 months</button>
<button mat-menu-item>9 months</button>
</mat-menu>
</div>
</div>
<div class="flex items-start mt-6 mx-6">
<div class="grid grid-cols-1 sm:grid-cols-3 gap-8 sm:gap-12">
<div class="flex flex-col">
<div class="flex items-center">
<div class="font-medium text-secondary leading-5">Overall Score</div>
<mat-icon
class="ml-1.5 icon-size-4 text-hint"
[svgIcon]="'heroicons_solid:information-circle'"
[matTooltip]="'Score is calculated by using the historical ratio between Page Views and Visitors. Best score is 1000, worst score is 0.'"></mat-icon>
</div>
<div class="flex items-start mt-2">
<div class="text-4xl font-bold tracking-tight leading-none">{{data.visitorsVsPageViews.overallScore}}</div>
<div class="flex items-center ml-2">
<mat-icon
class="icon-size-5 text-green-500"
[svgIcon]="'heroicons_solid:arrow-circle-up'"></mat-icon>
<div class="ml-1 text-md font-medium text-green-500">42.9%</div>
</div>
</div>
</div>
<div class="flex flex-col">
<div class="flex items-center">
<div class="font-medium text-secondary leading-5">Average Ratio</div>
<mat-icon
class="ml-1.5 icon-size-4 text-hint"
[svgIcon]="'heroicons_solid:information-circle'"
[matTooltip]="'Average Ratio is the average ratio between Page Views and Visitors'"></mat-icon>
</div>
<div class="flex items-start mt-2">
<div class="text-4xl font-bold tracking-tight leading-none">{{data.visitorsVsPageViews.averageRatio | number:'1.0-0'}}%</div>
<div class="flex items-center ml-2">
<mat-icon
class="icon-size-5 text-red-500"
[svgIcon]="'heroicons_solid:arrow-circle-down'"></mat-icon>
<div class="ml-1 text-md font-medium text-red-500">13.1%</div>
</div>
</div>
</div>
<div class="flex flex-col">
<div class="flex items-center">
<div class="font-medium text-secondary leading-5">Predicted Ratio</div>
<mat-icon
class="ml-1.5 icon-size-4 text-hint"
[svgIcon]="'heroicons_solid:information-circle'"
[matTooltip]="'Predicted Ratio is calculated by using historical ratio, current trends and your goal targets.'"></mat-icon>
</div>
<div class="flex items-start mt-2">
<div class="text-4xl font-bold tracking-tight leading-none">{{data.visitorsVsPageViews.predictedRatio | number:'1.0-0'}}%</div>
<div class="flex items-center ml-2">
<mat-icon
class="icon-size-5 text-green-500"
[svgIcon]="'heroicons_solid:arrow-circle-up'"></mat-icon>
<div class="ml-1 text-md font-medium text-green-500">22.2%</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col flex-auto h-80 mt-3">
<apx-chart
class="flex-auto w-full h-full"
[chart]="chartVisitorsVsPageViews.chart"
[colors]="chartVisitorsVsPageViews.colors"
[dataLabels]="chartVisitorsVsPageViews.dataLabels"
[grid]="chartVisitorsVsPageViews.grid"
[legend]="chartVisitorsVsPageViews.legend"
[series]="chartVisitorsVsPageViews.series"
[stroke]="chartVisitorsVsPageViews.stroke"
[tooltip]="chartVisitorsVsPageViews.tooltip"
[xaxis]="chartVisitorsVsPageViews.xaxis"
[yaxis]="chartVisitorsVsPageViews.yaxis"></apx-chart>
</div>
</div>
<!-- Section title -->
<div class="w-full mt-12">
<div class="text-2xl font-semibold tracking-tight leading-6">Your Audience</div>
<div class="font-medium tracking-tight text-secondary">Demographic properties of your users</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 w-full mt-6 md:mt-8">
<!-- New vs. Returning -->
<div class="flex flex-col flex-auto bg-card shadow rounded-2xl overflow-hidden p-6">
<div class="flex items-start justify-between">
<div class="text-lg font-medium tracking-tight leading-6 truncate">New vs. Returning</div>
<div class="ml-2">
<button
class="h-6 min-h-6 px-2 rounded-full bg-hover"
mat-button
[matMenuTriggerFor]="conversionMenu">
<span class="font-medium text-sm text-secondary">30 days</span>
</button>
<mat-menu #conversionMenu="matMenu">
<button mat-menu-item>30 days</button>
<button mat-menu-item>3 months</button>
<button mat-menu-item>9 months</button>
</mat-menu>
</div>
</div>
<div class="flex flex-col flex-auto mt-6 h-44">
<apx-chart
class="flex flex-auto items-center justify-center w-full h-full"
[chart]="chartNewVsReturning.chart"
[colors]="chartNewVsReturning.colors"
[labels]="chartNewVsReturning.labels"
[plotOptions]="chartNewVsReturning.plotOptions"
[series]="chartNewVsReturning.series"
[states]="chartNewVsReturning.states"
[tooltip]="chartNewVsReturning.tooltip"></apx-chart>
</div>
<div class="mt-8">
<div class="-my-3 divide-y">
<ng-container *ngFor="let dataset of data.newVsReturning.series; let i = index">
<div class="grid grid-cols-3 py-3">
<div class="flex items-center">
<div
class="flex-0 w-2 h-2 rounded-full"
[style.backgroundColor]="chartNewVsReturning.colors[i]"></div>
<div class="ml-3 truncate">{{data.newVsReturning.labels[i]}}</div>
</div>
<div class="font-medium text-right">{{data.newVsReturning.uniqueVisitors * dataset / 100 | number:'1.0-0'}}</div>
<div class="text-right text-secondary">{{dataset}}%</div>
</div>
</ng-container>
</div>
</div>
</div>
<!-- Gender -->
<div class="flex flex-col flex-auto bg-card shadow rounded-2xl overflow-hidden p-6">
<div class="flex items-start justify-between">
<div class="text-lg font-medium tracking-tight leading-6 truncate">Gender</div>
<div class="ml-2">
<button
class="h-6 min-h-6 px-2 rounded-full bg-hover"
mat-button
[matMenuTriggerFor]="conversionMenu">
<span class="font-medium text-sm text-secondary">30 days</span>
</button>
<mat-menu #conversionMenu="matMenu">
<button mat-menu-item>30 days</button>
<button mat-menu-item>3 months</button>
<button mat-menu-item>9 months</button>
</mat-menu>
</div>
</div>
<div class="flex flex-col flex-auto mt-6 h-44">
<apx-chart
class="flex flex-auto items-center justify-center w-full h-full"
[chart]="chartGender.chart"
[colors]="chartGender.colors"
[labels]="chartGender.labels"
[plotOptions]="chartGender.plotOptions"
[series]="chartGender.series"
[states]="chartGender.states"
[tooltip]="chartGender.tooltip"></apx-chart>
</div>
<div class="mt-8">
<div class="-my-3 divide-y">
<ng-container *ngFor="let dataset of data.gender.series; let i = index">
<div class="grid grid-cols-3 py-3">
<div class="flex items-center">
<div
class="flex-0 w-2 h-2 rounded-full"
[style.backgroundColor]="chartGender.colors[i]"></div>
<div class="ml-3 truncate">{{data.gender.labels[i]}}</div>
</div>
<div class="font-medium text-right">{{data.gender.uniqueVisitors * dataset / 100 | number:'1.0-0'}}</div>
<div class="text-right text-secondary">{{dataset}}%</div>
</div>
</ng-container>
</div>
</div>
</div>
<!-- Age -->
<div class="flex flex-col flex-auto bg-card shadow rounded-2xl overflow-hidden p-6">
<div class="flex items-start justify-between">
<div class="text-lg font-medium tracking-tight leading-6 truncate">Age</div>
<div class="ml-2">
<button
class="h-6 min-h-6 px-2 rounded-full bg-hover"
mat-button
[matMenuTriggerFor]="conversionMenu">
<span class="font-medium text-sm text-secondary">30 days</span>
</button>
<mat-menu #conversionMenu="matMenu">
<button mat-menu-item>30 days</button>
<button mat-menu-item>3 months</button>
<button mat-menu-item>9 months</button>
</mat-menu>
</div>
</div>
<div class="flex flex-col flex-auto mt-6 h-44">
<apx-chart
class="flex flex-auto items-center justify-center w-full h-full"
[chart]="chartAge.chart"
[colors]="chartAge.colors"
[labels]="chartAge.labels"
[plotOptions]="chartAge.plotOptions"
[series]="chartAge.series"
[states]="chartAge.states"
[tooltip]="chartAge.tooltip"></apx-chart>
</div>
<div class="mt-8">
<div class="-my-3 divide-y">
<ng-container *ngFor="let dataset of data.age.series; let i = index">
<div class="grid grid-cols-3 py-3">
<div class="flex items-center">
<div
class="flex-0 w-2 h-2 rounded-full"
[style.backgroundColor]="chartAge.colors[i]"></div>
<div class="ml-3 truncate">{{data.age.labels[i]}}</div>
</div>
<div class="font-medium text-right">{{data.age.uniqueVisitors * dataset / 100 | number:'1.0-0'}}</div>
<div class="text-right text-secondary">{{dataset}}%</div>
</div>
</ng-container>
</div>
</div>
</div>
<!-- Language -->
<div class="flex flex-col flex-auto bg-card shadow rounded-2xl overflow-hidden p-6">
<div class="flex items-start justify-between">
<div class="text-lg font-medium tracking-tight leading-6 truncate">Language</div>
<div class="ml-2">
<button
class="h-6 min-h-6 px-2 rounded-full bg-hover"
mat-button
[matMenuTriggerFor]="conversionMenu">
<span class="font-medium text-sm text-secondary">30 days</span>
</button>
<mat-menu #conversionMenu="matMenu">
<button mat-menu-item>30 days</button>
<button mat-menu-item>3 months</button>
<button mat-menu-item>9 months</button>
</mat-menu>
</div>
</div>
<div class="flex flex-col flex-auto mt-6 h-44">
<apx-chart
class="flex flex-auto items-center justify-center w-full h-full"
[chart]="chartLanguage.chart"
[colors]="chartLanguage.colors"
[labels]="chartLanguage.labels"
[plotOptions]="chartLanguage.plotOptions"
[series]="chartLanguage.series"
[states]="chartLanguage.states"
[tooltip]="chartLanguage.tooltip"></apx-chart>
</div>
<div class="mt-8">
<div class="-my-3 divide-y">
<ng-container *ngFor="let dataset of data.language.series; let i = index">
<div class="grid grid-cols-3 py-3">
<div class="flex items-center">
<div
class="flex-0 w-2 h-2 rounded-full"
[style.backgroundColor]="chartLanguage.colors[i]"></div>
<div class="ml-3 truncate">{{data.language.labels[i]}}</div>
</div>
<div class="font-medium text-right">{{data.language.uniqueVisitors * dataset / 100 | number:'1.0-0'}}</div>
<div class="text-right text-secondary">{{dataset}}%</div>
</div>
</ng-container>
</div>
</div>
</div>
</div>
</div>
</div>

676
src/app/modules/admin/dashboards/analytics/analytics.component.ts
View File

@ -1,676 +0,0 @@
import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { ApexOptions } from 'ng-apexcharts';
import { AnalyticsService } from 'app/modules/admin/dashboards/analytics/analytics.service';
@Component({
selector : 'analytics',
templateUrl : './analytics.component.html',
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AnalyticsComponent implements OnInit, OnDestroy
{
chartVisitors: ApexOptions;
chartConversions: ApexOptions;
chartImpressions: ApexOptions;
chartVisits: ApexOptions;
chartVisitorsVsPageViews: ApexOptions;
data: any;
private _unsubscribeAll: Subject<any> = new Subject<any>();
chartAge: ApexOptions;
averagePurchaseValueOptions: ApexOptions;
browsersOptions: ApexOptions;
channelsOptions: ApexOptions;
devicesOptions: ApexOptions;
chartGender: ApexOptions;
chartLanguage: ApexOptions;
chartNewVsReturning: ApexOptions;
refundsOptions: ApexOptions;
totalVisitsOptions: ApexOptions;
uniqueVisitorsOptions: ApexOptions;
uniquePurchasesOptions: ApexOptions;
/**
* Constructor
*/
constructor(
private _analyticsService: AnalyticsService,
private _router: Router
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Get the data
this._analyticsService.data$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((data) => {
// Store the data
this.data = data;
// Prepare the chart data
this._prepareChartData();
});
// Attach SVG fill fixer to all ApexCharts
window['Apex'] = {
chart: {
events: {
mounted: (chart: any, options?: any) => {
this._fixSvgFill(chart.el);
},
updated: (chart: any, options?: any) => {
this._fixSvgFill(chart.el);
}
}
}
};
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
// -----------------------------------------------------------------------------------------------------
// @ Private methods
// -----------------------------------------------------------------------------------------------------
/**
* Fix the SVG fill references. This fix must be applied to all ApexCharts
* charts in order to fix 'black color on gradient fills on certain browsers'
* issue caused by the '<base>' tag.
*
* Fix based on https://gist.github.com/Kamshak/c84cdc175209d1a30f711abd6a81d472
*
* @param element
* @private
*/
private _fixSvgFill(element: Element): void
{
// Current URL
const currentURL = this._router.url;
// 1. Find all elements with 'fill' attribute within the element
// 2. Filter out the ones that doesn't have cross reference so we only left with the ones that use the 'url(#id)' syntax
// 3. Insert the 'currentURL' at the front of the 'fill' attribute value
Array.from(element.querySelectorAll('*[fill]'))
.filter((el) => el.getAttribute('fill').indexOf('url(') !== -1)
.forEach((el) => {
const attrVal = el.getAttribute('fill');
el.setAttribute('fill', `url(${currentURL}${attrVal.slice(attrVal.indexOf('#'))}`);
});
}
/**
* Prepare the chart data from the data
*
* @private
*/
private _prepareChartData(): void
{
// Visitors
this.chartVisitors = {
chart : {
animations: {
speed : 400,
animateGradually: {
enabled: false
}
},
fontFamily: 'inherit',
foreColor : 'inherit',
width : '100%',
height : '100%',
type : 'area',
toolbar : {
show: false
},
zoom : {
enabled: false
}
},
colors : ['#818CF8'],
dataLabels: {
enabled: false
},
fill : {
colors: ['#312E81']
},
grid : {
show : true,
borderColor: '#334155',
padding : {
top : 10,
bottom: -40,
left : 0,
right : 0
},
position : 'back',
xaxis : {
lines: {
show: true
}
}
},
series : this.data.visitors.series,
stroke : {
width: 2
},
tooltip : {
followCursor: true,
theme : 'dark',
x : {
format: 'MMM dd, yyyy'
},
y : {
formatter(value: number): string
{
return `${value}`;
}
}
},
xaxis : {
axisBorder: {
show: false
},
axisTicks : {
show: false
},
crosshairs: {
stroke: {
color : '#475569',
dashArray: 0,
width : 2
}
},
labels : {
offsetY: -20,
style : {
colors: '#CBD5E1'
}
},
tickAmount: 20,
tooltip : {
enabled: false
},
type : 'datetime'
},
yaxis : {
axisTicks : {
show: false
},
axisBorder: {
show: false
},
min : min => min - 750,
max : max => max + 250,
tickAmount: 5,
show : false
}
};
// Conversions
this.chartConversions = {
chart : {
animations: {
enabled: false
},
fontFamily: 'inherit',
foreColor : 'inherit',
height : '100%',
type : 'area',
sparkline : {
enabled: true
}
},
colors : ['#38BDF8'],
fill : {
colors : ['#38BDF8'],
opacity: 0.5
},
series : this.data.conversions.series,
stroke : {
curve: 'smooth'
},
tooltip: {
followCursor: true,
theme : 'dark'
},
xaxis : {
type : 'category',
categories: this.data.conversions.labels
},
yaxis : {
labels: {
formatter: (val) => {
return val.toString();
}
}
}
};
// Impressions
this.chartImpressions = {
chart : {
animations: {
enabled: false
},
fontFamily: 'inherit',
foreColor : 'inherit',
height : '100%',
type : 'area',
sparkline : {
enabled: true
}
},
colors : ['#34D399'],
fill : {
colors : ['#34D399'],
opacity: 0.5
},
series : this.data.impressions.series,
stroke : {
curve: 'smooth'
},
tooltip: {
followCursor: true,
theme : 'dark'
},
xaxis : {
type : 'category',
categories: this.data.impressions.labels
},
yaxis : {
labels: {
formatter: (val) => {
return val.toString();
}
}
}
};
// Visits
this.chartVisits = {
chart : {
animations: {
enabled: false
},
fontFamily: 'inherit',
foreColor : 'inherit',
height : '100%',
type : 'area',
sparkline : {
enabled: true
}
},
colors : ['#FB7185'],
fill : {
colors : ['#FB7185'],
opacity: 0.5
},
series : this.data.visits.series,
stroke : {
curve: 'smooth'
},
tooltip: {
followCursor: true,
theme : 'dark'
},
xaxis : {
type : 'category',
categories: this.data.visits.labels
},
yaxis : {
labels: {
formatter: (val) => {
return val.toString();
}
}
}
};
// Visitors vs Page Views
this.chartVisitorsVsPageViews = {
chart : {
animations: {
enabled: false
},
fontFamily: 'inherit',
foreColor : 'inherit',
height : '100%',
type : 'area',
toolbar : {
show: false
},
zoom : {
enabled: false
}
},
colors : ['#64748B', '#94A3B8'],
dataLabels: {
enabled: false
},
fill : {
colors : ['#64748B', '#94A3B8'],
opacity: 0.5
},
grid : {
show : false,
padding: {
bottom: -40,
left : 0,
right : 0
}
},
legend : {
show: false
},
series : this.data.visitorsVsPageViews.series,
stroke : {
curve: 'smooth',
width: 2
},
tooltip : {
followCursor: true,
theme : 'dark',
x : {
format: 'MMM dd, yyyy'
}
},
xaxis : {
axisBorder: {
show: false
},
labels : {
offsetY: -20,
rotate : 0,
style : {
colors: 'var(--fuse-text-secondary)'
}
},
tickAmount: 3,
tooltip : {
enabled: false
},
type : 'datetime'
},
yaxis : {
labels : {
style: {
colors: 'var(--fuse-text-secondary)'
}
},
max : max => max + 250,
min : min => min - 250,
show : false,
tickAmount: 5
}
};
// New vs. returning
this.chartNewVsReturning = {
chart : {
animations: {
speed : 400,
animateGradually: {
enabled: false
}
},
fontFamily: 'inherit',
foreColor : 'inherit',
height : '100%',
type : 'donut',
sparkline : {
enabled: true
}
},
colors : ['#3182CE', '#63B3ED'],
labels : this.data.newVsReturning.labels,
plotOptions: {
pie: {
customScale : 0.9,
expandOnClick: false,
donut : {
size: '70%'
}
}
},
series : this.data.newVsReturning.series,
states : {
hover : {
filter: {
type: 'none'
}
},
active: {
filter: {
type: 'none'
}
}
},
tooltip : {
enabled : true,
fillSeriesColor: false,
theme : 'dark',
custom : ({
seriesIndex,
w
}) => {
return `<div class="flex items-center h-8 min-h-8 max-h-8 px-3">
<div class="w-3 h-3 rounded-full" style="background-color: ${w.config.colors[seriesIndex]};"></div>
<div class="ml-2 text-md leading-none">${w.config.labels[seriesIndex]}:</div>
<div class="ml-2 text-md font-bold leading-none">${w.config.series[seriesIndex]}%</div>
</div>`;
}
}
};
// Gender
this.chartGender = {
chart : {
animations: {
speed : 400,
animateGradually: {
enabled: false
}
},
fontFamily: 'inherit',
foreColor : 'inherit',
height : '100%',
type : 'donut',
sparkline : {
enabled: true
}
},
colors : ['#319795', '#4FD1C5'],
labels : this.data.gender.labels,
plotOptions: {
pie: {
customScale : 0.9,
expandOnClick: false,
donut : {
size: '70%'
}
}
},
series : this.data.gender.series,
states : {
hover : {
filter: {
type: 'none'
}
},
active: {
filter: {
type: 'none'
}
}
},
tooltip : {
enabled : true,
fillSeriesColor: false,
theme : 'dark',
custom : ({
seriesIndex,
w
}) => {
return `<div class="flex items-center h-8 min-h-8 max-h-8 px-3">
<div class="w-3 h-3 rounded-full" style="background-color: ${w.config.colors[seriesIndex]};"></div>
<div class="ml-2 text-md leading-none">${w.config.labels[seriesIndex]}:</div>
<div class="ml-2 text-md font-bold leading-none">${w.config.series[seriesIndex]}%</div>
</div>`;
}
}
};
// Age
this.chartAge = {
chart : {
animations: {
speed : 400,
animateGradually: {
enabled: false
}
},
fontFamily: 'inherit',
foreColor : 'inherit',
height : '100%',
type : 'donut',
sparkline : {
enabled: true
}
},
colors : ['#DD6B20', '#F6AD55'],
labels : this.data.age.labels,
plotOptions: {
pie: {
customScale : 0.9,
expandOnClick: false,
donut : {
size: '70%'
}
}
},
series : this.data.age.series,
states : {
hover : {
filter: {
type: 'none'
}
},
active: {
filter: {
type: 'none'
}
}
},
tooltip : {
enabled : true,
fillSeriesColor: false,
theme : 'dark',
custom : ({
seriesIndex,
w
}) => {
return `<div class="flex items-center h-8 min-h-8 max-h-8 px-3">
<div class="w-3 h-3 rounded-full" style="background-color: ${w.config.colors[seriesIndex]};"></div>
<div class="ml-2 text-md leading-none">${w.config.labels[seriesIndex]}:</div>
<div class="ml-2 text-md font-bold leading-none">${w.config.series[seriesIndex]}%</div>
</div>`;
}
}
};
// Language
this.chartLanguage = {
chart : {
animations: {
speed : 400,
animateGradually: {
enabled: false
}
},
fontFamily: 'inherit',
foreColor : 'inherit',
height : '100%',
type : 'donut',
sparkline : {
enabled: true
}
},
colors : ['#805AD5', '#B794F4'],
labels : this.data.language.labels,
plotOptions: {
pie: {
customScale : 0.9,
expandOnClick: false,
donut : {
size: '70%'
}
}
},
series : this.data.language.series,
states : {
hover : {
filter: {
type: 'none'
}
},
active: {
filter: {
type: 'none'
}
}
},
tooltip : {
enabled : true,
fillSeriesColor: false,
theme : 'dark',
custom : ({
seriesIndex,
w
}) => {
return `<div class="flex items-center h-8 min-h-8 max-h-8 px-3">
<div class="w-3 h-3 rounded-full" style="background-color: ${w.config.colors[seriesIndex]};"></div>
<div class="ml-2 text-md leading-none">${w.config.labels[seriesIndex]}:</div>
<div class="ml-2 text-md font-bold leading-none">${w.config.series[seriesIndex]}%</div>
</div>`;
}
}
};
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Track by function for ngFor loops
*
* @param index
* @param item
*/
trackByFn(index: number, item: any): any
{
return item.id || index;
}
}

Some files were not shown because too many files have changed in this diff Show More