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

Second pass on the new control flow syntax migration

Browse Source
This commit is contained in:
Sercan Yemen 2024-06-03 10:00:17 +03:00
parent 2fa8d0a8c1
commit c8f61f58cf
250 changed files with 5294 additions and 5523 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/layout/common/languages/languages.component.html
View File

@ -7,7 +7,7 @@
<!-- Language menu -->
<mat-menu [xPosition]="'before'" #languages="matMenu">
<ng-container *ngFor="let lang of availableLangs; trackBy: trackByFn">
@for (lang of availableLangs; track trackByFn($index, lang)) {
<button mat-menu-item (click)="setActiveLang(lang.id)">
<span class="flex items-center">
<ng-container
@ -19,7 +19,7 @@
<span class="ml-3">{{ lang.label }}</span>
</span>
</button>
</ng-container>
}
</mat-menu>
<!-- Flag image template -->

4
src/app/layout/common/languages/languages.component.ts
View File

@ -1,4 +1,4 @@
import { NgFor, NgTemplateOutlet } from '@angular/common';
import { NgTemplateOutlet } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
@ -23,7 +23,7 @@ import { take } from 'rxjs';
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs: 'languages',
standalone: true,
imports: [MatButtonModule, MatMenuModule, NgTemplateOutlet, NgFor],
imports: [MatButtonModule, MatMenuModule, NgTemplateOutlet],
})
export class LanguagesComponent implements OnInit, OnDestroy {
availableLangs: AvailableLangs;

46
src/app/layout/common/messages/messages.component.html
View File

@ -1,6 +1,6 @@
<!-- Messages toggle -->
<button mat-icon-button (click)="openPanel()" #messagesOrigin>
<ng-container *ngIf="unreadCount > 0">
@if (unreadCount > 0) {
<span
class="absolute left-0 right-0 top-0 flex h-3 items-center justify-center"
>
@ -10,7 +10,7 @@
{{ unreadCount }}
</span>
</span>
</ng-container>
}
<mat-icon [svgIcon]="'heroicons_outline:inbox'"></mat-icon>
</button>
@ -53,15 +53,15 @@
class="bg-card relative flex flex-auto flex-col divide-y overflow-y-auto sm:max-h-120"
>
<!-- Messages -->
<ng-container *ngFor="let message of messages; trackBy: trackByFn">
@for (message of messages; track trackByFn($index, message)) {
<div
class="group flex hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5"
[ngClass]="{ unread: !message.read }"
>
<!-- Message with a link -->
<ng-container *ngIf="message.link">
@if (message.link) {
<!-- Normal links -->
<ng-container *ngIf="!message.useRouter">
@if (!message.useRouter) {
<a
class="flex flex-auto cursor-pointer py-5 pl-6"
[href]="message.link"
@ -70,9 +70,9 @@
*ngTemplateOutlet="messageContent"
></ng-container>
</a>
</ng-container>
}
<!-- Router links -->
<ng-container *ngIf="message.useRouter">
@if (message.useRouter) {
<a
class="flex flex-auto cursor-pointer py-5 pl-6"
[routerLink]="message.link"
@ -81,17 +81,17 @@
*ngTemplateOutlet="messageContent"
></ng-container>
</a>
</ng-container>
</ng-container>
}
}
<!-- Message without a link -->
<ng-container *ngIf="!message.link">
@if (!message.link) {
<div class="flex flex-auto py-5 pl-6">
<ng-container
*ngTemplateOutlet="messageContent"
></ng-container>
</div>
</ng-container>
}
<!-- Actions -->
<div class="relative my-5 ml-2 mr-6 flex flex-col">
@ -109,7 +109,7 @@
[ngClass]="{
'bg-gray-400 dark:bg-gray-500 sm:opacity-0 sm:group-hover:opacity-100':
message.read,
'bg-primary': !message.read
'bg-primary': !message.read,
}"
></span>
</button>
@ -131,7 +131,7 @@
<!-- Message content template -->
<ng-template #messageContent>
<!-- Icon -->
<ng-container *ngIf="message.icon && !message.image">
@if (message.icon && !message.image) {
<div
class="mr-4 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700"
>
@ -141,38 +141,38 @@
>
</mat-icon>
</div>
</ng-container>
}
<!-- Image -->
<ng-container *ngIf="message.image">
@if (message.image) {
<img
class="mr-4 h-8 w-8 shrink-0 overflow-hidden rounded-full object-cover object-center"
[src]="message.image"
[alt]="'Message image'"
/>
</ng-container>
}
<!-- Title, description & time -->
<div class="flex flex-auto flex-col">
<ng-container *ngIf="message.title">
@if (message.title) {
<div
class="line-clamp-1 font-semibold"
[innerHTML]="message.title"
></div>
</ng-container>
<ng-container *ngIf="message.description">
}
@if (message.description) {
<div
class="line-clamp-2"
[innerHTML]="message.description"
></div>
</ng-container>
}
<div class="text-secondary mt-2 text-sm leading-none">
{{ message.time | date: 'MMM dd, h:mm a' }}
</div>
</div>
</ng-template>
</ng-container>
}
<!-- No messages -->
<ng-container *ngIf="!messages || !messages.length">
@if (!messages || !messages.length) {
<div
class="flex flex-auto flex-col items-center justify-center px-8 py-12 sm:justify-start"
>
@ -193,7 +193,7 @@
When you have messages, they will appear here.
</div>
</div>
</ng-container>
}
</div>
</div>
</ng-template>

10
src/app/layout/common/messages/messages.component.ts
View File

@ -1,12 +1,6 @@
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
import {
DatePipe,
NgClass,
NgFor,
NgIf,
NgTemplateOutlet,
} from '@angular/common';
import { DatePipe, NgClass, NgTemplateOutlet } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
@ -35,10 +29,8 @@ import { Subject, takeUntil } from 'rxjs';
standalone: true,
imports: [
MatButtonModule,
NgIf,
MatIconModule,
MatTooltipModule,
NgFor,
NgClass,
NgTemplateOutlet,
RouterLink,

53
src/app/layout/common/notifications/notifications.component.html
View File

@ -1,6 +1,6 @@
<!-- Notifications toggle -->
<button mat-icon-button (click)="openPanel()" #notificationsOrigin>
<ng-container *ngIf="unreadCount > 0">
@if (unreadCount > 0) {
<span
class="absolute left-0 right-0 top-0 flex h-3 items-center justify-center"
>
@ -10,7 +10,7 @@
{{ unreadCount }}
</span>
</span>
</ng-container>
}
<mat-icon [svgIcon]="'heroicons_outline:bell'"></mat-icon>
</button>
@ -53,17 +53,18 @@
class="bg-card relative flex flex-auto flex-col divide-y overflow-y-auto sm:max-h-120"
>
<!-- Notifications -->
<ng-container
*ngFor="let notification of notifications; trackBy: trackByFn"
>
@for (
notification of notifications;
track trackByFn($index, notification)
) {
<div
class="group flex hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5"
[ngClass]="{ unread: !notification.read }"
>
<!-- Notification with a link -->
<ng-container *ngIf="notification.link">
@if (notification.link) {
<!-- Normal links -->
<ng-container *ngIf="!notification.useRouter">
@if (!notification.useRouter) {
<a
class="flex flex-auto cursor-pointer py-5 pl-6"
[href]="notification.link"
@ -72,9 +73,9 @@
*ngTemplateOutlet="notificationContent"
></ng-container>
</a>
</ng-container>
}
<!-- Router links -->
<ng-container *ngIf="notification.useRouter">
@if (notification.useRouter) {
<a
class="flex flex-auto cursor-pointer py-5 pl-6"
[routerLink]="notification.link"
@ -83,17 +84,17 @@
*ngTemplateOutlet="notificationContent"
></ng-container>
</a>
</ng-container>
</ng-container>
}
}
<!-- Notification without a link -->
<ng-container *ngIf="!notification.link">
@if (!notification.link) {
<div class="flex flex-auto py-5 pl-6">
<ng-container
*ngTemplateOutlet="notificationContent"
></ng-container>
</div>
</ng-container>
}
<!-- Actions -->
<div class="relative my-5 ml-2 mr-6 flex flex-col">
@ -113,7 +114,7 @@
[ngClass]="{
'bg-gray-400 dark:bg-gray-500 sm:opacity-0 sm:group-hover:opacity-100':
notification.read,
'bg-primary': !notification.read
'bg-primary': !notification.read,
}"
></span>
</button>
@ -135,9 +136,7 @@
<!-- Notification content template -->
<ng-template #notificationContent>
<!-- Icon -->
<ng-container
*ngIf="notification.icon && !notification.image"
>
@if (notification.icon && !notification.image) {
<div
class="mr-4 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700"
>
@ -147,38 +146,38 @@
>
</mat-icon>
</div>
</ng-container>
}
<!-- Image -->
<ng-container *ngIf="notification.image">
@if (notification.image) {
<img
class="mr-4 h-8 w-8 shrink-0 overflow-hidden rounded-full object-cover object-center"
[src]="notification.image"
[alt]="'Notification image'"
/>
</ng-container>
}
<!-- Title, description & time -->
<div class="flex flex-auto flex-col">
<ng-container *ngIf="notification.title">
@if (notification.title) {
<div
class="line-clamp-1 font-semibold"
[innerHTML]="notification.title"
></div>
</ng-container>
<ng-container *ngIf="notification.description">
}
@if (notification.description) {
<div
class="line-clamp-2"
[innerHTML]="notification.description"
></div>
</ng-container>
}
<div class="text-secondary mt-2 text-sm leading-none">
{{ notification.time | date: 'MMM dd, h:mm a' }}
</div>
</div>
</ng-template>
</ng-container>
}
<!-- No notifications -->
<ng-container *ngIf="!notifications || !notifications.length">
@if (!notifications || !notifications.length) {
<div
class="flex flex-auto flex-col items-center justify-center px-8 py-12 sm:justify-start"
>
@ -199,7 +198,7 @@
When you have notifications, they will appear here.
</div>
</div>
</ng-container>
}
</div>
</div>
</ng-template>

10
src/app/layout/common/notifications/notifications.component.ts
View File

@ -1,12 +1,6 @@
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
import {
DatePipe,
NgClass,
NgFor,
NgIf,
NgTemplateOutlet,
} from '@angular/common';
import { DatePipe, NgClass, NgTemplateOutlet } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
@ -35,10 +29,8 @@ import { Subject, takeUntil } from 'rxjs';
standalone: true,
imports: [
MatButtonModule,
NgIf,
MatIconModule,
MatTooltipModule,
NgFor,
NgClass,
NgTemplateOutlet,
RouterLink,

149
src/app/layout/common/quick-chat/quick-chat.component.html
View File

@ -6,7 +6,7 @@
[ngClass]="{
'-translate-x-full shadow sm:-translate-x-96 lg:-translate-x-80':
opened,
'translate-x-0': !opened
'translate-x-0': !opened,
}"
>
<!-- Header -->
@ -15,7 +15,7 @@
(click)="toggle()"
>
<!-- Toggle -->
<ng-container *ngIf="!opened || (opened && !selectedChat)">
@if (!opened || (opened && !selectedChat)) {
<div class="flex flex-auto items-center justify-center">
<div class="flex w-16 flex-0 items-center justify-center">
<mat-icon
@ -34,28 +34,28 @@
></mat-icon>
</button>
</div>
</ng-container>
}
<!-- Contact info -->
<ng-container *ngIf="opened && selectedChat">
@if (opened && selectedChat) {
<div class="ml-3 flex flex-auto items-center">
<div
class="relative flex h-10 w-10 flex-0 items-center justify-center"
>
<ng-container *ngIf="chat.contact.avatar">
@if (chat.contact.avatar) {
<img
class="h-full w-full rounded-full object-cover"
[src]="chat.contact.avatar"
alt="Contact avatar"
/>
</ng-container>
<ng-container *ngIf="!chat.contact.avatar">
}
@if (!chat.contact.avatar) {
<div
class="flex h-full w-full items-center justify-center rounded-full bg-gray-200 text-lg uppercase text-gray-600 dark:bg-gray-700 dark:text-gray-200"
>
{{ chat.contact.name.charAt(0) }}
</div>
</ng-container>
}
</div>
<div class="ml-4 truncate text-lg font-medium leading-5">
{{ chat.contact.name }}
@ -66,7 +66,7 @@
></mat-icon>
</button>
</div>
</ng-container>
}
</div>
<!-- Content -->
@ -78,9 +78,7 @@
[fuseScrollbarOptions]="{ wheelPropagation: false }"
>
<div class="flex-auto">
<ng-container
*ngFor="let chat of chats; trackBy: trackByFn"
>
@for (chat of chats; track trackByFn($index, chat)) {
<div
class="flex cursor-pointer items-center px-4 py-3"
[ngClass]="{
@ -88,14 +86,14 @@
!selectedChat ||
selectedChat.id !== chat.id,
'bg-primary-50 dark:bg-hover':
selectedChat && selectedChat.id === chat.id
selectedChat && selectedChat.id === chat.id,
}"
(click)="selectChat(chat.id)"
>
<div
class="relative flex h-8 w-8 flex-0 items-center justify-center"
>
<ng-container *ngIf="chat.unreadCount > 0">
@if (chat.unreadCount > 0) {
<div
class="ring-bg-card absolute bottom-0 right-0 -ml-0.5 h-2 w-2 flex-0 rounded-full bg-primary text-on-primary ring-2 dark:bg-primary-500 dark:ring-gray-900"
[class.ring-primary-50]="
@ -103,24 +101,24 @@
selectedChat.id === chat.id
"
></div>
</ng-container>
<ng-container *ngIf="chat.contact.avatar">
}
@if (chat.contact.avatar) {
<img
class="h-full w-full rounded-full object-cover"
[src]="chat.contact.avatar"
alt="Contact avatar"
/>
</ng-container>
<ng-container *ngIf="!chat.contact.avatar">
}
@if (!chat.contact.avatar) {
<div
class="flex h-full w-full items-center justify-center rounded-full bg-gray-200 text-lg uppercase text-gray-600 dark:bg-gray-700 dark:text-gray-200"
>
{{ chat.contact.name.charAt(0) }}
</div>
</ng-container>
}
</div>
</div>
</ng-container>
}
</div>
</div>
@ -128,29 +126,25 @@
<div
class="flex flex-auto flex-col overflow-hidden border-l bg-gray-50 dark:bg-transparent"
>
<ng-container *ngIf="chat; else selectChatOrStartNew">
@if (chat) {
<div
class="flex flex-col-reverse overflow-y-auto overscroll-y-contain"
>
<div class="flex flex-auto shrink flex-col p-6">
<ng-container
*ngFor="
let message of chat.messages;
let i = index;
let first = first;
let last = last;
trackBy: trackByFn
"
>
@for (
message of chat.messages;
track trackByFn(i, message);
let i = $index;
let first = $first;
let last = $last
) {
<!-- Start of the day -->
<ng-container
*ngIf="
first ||
(chat.messages[i - 1].createdAt
| date: 'd') !==
(message.createdAt | date: 'd')
"
>
@if (
first ||
(chat.messages[i - 1].createdAt
| date: 'd') !==
(message.createdAt | date: 'd')
) {
<div
class="-mx-6 my-3 flex items-center justify-center"
>
@ -165,7 +159,7 @@
</div>
<div class="flex-auto border-b"></div>
</div>
</ng-container>
}
<div
class="flex flex-col"
[ngClass]="{
@ -178,7 +172,7 @@
'mt-3':
i > 0 &&
chat.messages[i - 1].isMine !==
message.isMine
message.isMine,
}"
>
<!-- Bubble -->
@ -188,24 +182,22 @@
'bg-blue-500 text-blue-50':
message.isMine,
'bg-gray-500 text-gray-50':
!message.isMine
!message.isMine,
}"
>
<!-- Speech bubble tail -->
<ng-container
*ngIf="
last ||
chat.messages[i + 1].isMine !==
message.isMine
"
>
@if (
last ||
chat.messages[i + 1].isMine !==
message.isMine
) {
<div
class="absolute bottom-0 w-3"
[ngClass]="{
'-right-1 -mr-px mb-px text-blue-500':
message.isMine,
'-left-1 -ml-px mb-px -scale-x-1 text-gray-500':
!message.isMine
!message.isMine,
}"
>
<ng-container
@ -214,7 +206,7 @@
"
></ng-container>
</div>
</ng-container>
}
<!-- Message -->
<div
class="min-w-4 leading-5"
@ -222,21 +214,19 @@
></div>
</div>
<!-- Time -->
<ng-container
*ngIf="
first ||
last ||
chat.messages[i + 1].isMine !==
message.isMine ||
chat.messages[i + 1].createdAt !==
message.createdAt
"
>
@if (
first ||
last ||
chat.messages[i + 1].isMine !==
message.isMine ||
chat.messages[i + 1].createdAt !==
message.createdAt
) {
<div
class="text-secondary my-0.5 text-sm font-medium"
[ngClass]="{
'mr-3': message.isMine,
'ml-3': !message.isMine
'ml-3': !message.isMine,
}"
>
{{
@ -244,9 +234,9 @@
| date: 'HH:mm'
}}
</div>
</ng-container>
}
</div>
</ng-container>
}
</div>
</div>
@ -274,28 +264,29 @@
</button>
</div>
</div>
</ng-container>
} @else {
<div
class="flex h-full w-full flex-auto flex-col items-center justify-center p-4"
>
<mat-icon
class="icon-size-24"
[svgIcon]="
'heroicons_outline:chat-bubble-bottom-center-text'
"
></mat-icon>
<div
class="text-secondary mt-4 text-center text-xl font-medium tracking-tight"
>
Select a conversation
</div>
</div>
}
</div>
</div>
</div>
</div>
<!-- Select chat or start new template -->
<ng-template #selectChatOrStartNew>
<div
class="flex h-full w-full flex-auto flex-col items-center justify-center p-4"
>
<mat-icon
class="icon-size-24"
[svgIcon]="'heroicons_outline:chat-bubble-bottom-center-text'"
></mat-icon>
<div
class="text-secondary mt-4 text-center text-xl font-medium tracking-tight"
>
Select a conversation
</div>
</div>
</ng-template>
<!-- Speech bubble tail SVG -->
<!-- prettier-ignore -->

11
src/app/layout/common/quick-chat/quick-chat.component.ts
View File

@ -1,13 +1,6 @@
import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
import { TextFieldModule } from '@angular/cdk/text-field';
import {
DOCUMENT,
DatePipe,
NgClass,
NgFor,
NgIf,
NgTemplateOutlet,
} from '@angular/common';
import { DOCUMENT, DatePipe, NgClass, NgTemplateOutlet } from '@angular/common';
import {
AfterViewInit,
Component,
@ -40,11 +33,9 @@ import { Subject, takeUntil } from 'rxjs';
standalone: true,
imports: [
NgClass,
NgIf,
MatIconModule,
MatButtonModule,
FuseScrollbarDirective,
NgFor,
NgTemplateOutlet,
MatFormFieldModule,
MatInputModule,

255
src/app/layout/common/search/search.component.html
View File

@ -1,98 +1,106 @@
<!-- Bar search -->
<ng-container *ngIf="appearance === 'bar'">
<button mat-icon-button *ngIf="!opened" (click)="open()">
<mat-icon [svgIcon]="'heroicons_outline:magnifying-glass'"></mat-icon>
</button>
<div
class="bg-card absolute inset-0 z-99 flex shrink-0 items-center"
*ngIf="opened"
@slideInTop
@slideOutTop
>
<mat-icon
class="absolute ml-6 sm:ml-8"
[svgIcon]="'heroicons_outline:magnifying-glass'"
></mat-icon>
<input
class="h-full w-full px-16 sm:px-18"
[formControl]="searchControl"
[matAutocomplete]="matAutocomplete"
[placeholder]="'Search...'"
(keydown)="onKeydown($event)"
#barSearchInput
/>
<mat-autocomplete
class="max-h-128 rounded-b border-t shadow-md sm:px-2"
[autoSelectActiveOption]="true"
[disableRipple]="true"
#matAutocomplete="matAutocomplete"
>
<mat-option
class="text-secondary pointer-events-none bg-transparent px-6 py-0 text-md"
*ngIf="resultSets && !resultSets.length"
>
No results found!
</mat-option>
<ng-container
*ngFor="let resultSet of resultSets; trackBy: trackByFn"
>
<mat-optgroup class="mt-2 flex items-center px-2">
<span
class="text-secondary text-sm font-semibold tracking-wider"
>{{ resultSet.label.toUpperCase() }}</span
>
</mat-optgroup>
<ng-container
*ngFor="let result of resultSet.results; trackBy: trackByFn"
>
<mat-option
class="group relative mb-1 rounded-md px-6 py-0 text-md dark:hover:bg-hover hover:bg-gray-100"
[routerLink]="result.link"
[value]="result.value"
>
<!-- Contacts -->
<ng-container *ngIf="resultSet.id === 'contacts'">
<ng-container
*ngTemplateOutlet="
contactResult;
context: { $implicit: result }
"
></ng-container>
</ng-container>
<!-- Pages -->
<ng-container *ngIf="resultSet.id === 'pages'">
<ng-container
*ngTemplateOutlet="
pageResult;
context: { $implicit: result }
"
></ng-container>
</ng-container>
<!-- Tasks -->
<ng-container *ngIf="resultSet.id === 'tasks'">
<ng-container
*ngTemplateOutlet="
taskResult;
context: { $implicit: result }
"
></ng-container>
</ng-container>
</mat-option>
</ng-container>
</ng-container>
</mat-autocomplete>
<button
class="absolute right-5 top-1/2 -mt-5 h-10 w-10 shrink-0 sm:right-7"
mat-icon-button
(click)="close()"
>
<mat-icon [svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
@if (appearance === 'bar') {
@if (!opened) {
<button mat-icon-button (click)="open()">
<mat-icon
[svgIcon]="'heroicons_outline:magnifying-glass'"
></mat-icon>
</button>
</div>
</ng-container>
}
@if (opened) {
<div
class="bg-card absolute inset-0 z-99 flex shrink-0 items-center"
@slideInTop
@slideOutTop
>
<mat-icon
class="absolute ml-6 sm:ml-8"
[svgIcon]="'heroicons_outline:magnifying-glass'"
></mat-icon>
<input
class="h-full w-full px-16 sm:px-18"
[formControl]="searchControl"
[matAutocomplete]="matAutocomplete"
[placeholder]="'Search...'"
(keydown)="onKeydown($event)"
#barSearchInput
/>
<mat-autocomplete
class="max-h-128 rounded-b border-t shadow-md sm:px-2"
[autoSelectActiveOption]="true"
[disableRipple]="true"
#matAutocomplete="matAutocomplete"
>
@if (resultSets && !resultSets.length) {
<mat-option
class="text-secondary pointer-events-none bg-transparent px-6 py-0 text-md"
>
No results found!
</mat-option>
}
@for (
resultSet of resultSets;
track trackByFn($index, resultSet)
) {
<mat-optgroup class="mt-2 flex items-center px-2">
<span
class="text-secondary text-sm font-semibold tracking-wider"
>{{ resultSet.label.toUpperCase() }}</span
>
</mat-optgroup>
@for (
result of resultSet.results;
track trackByFn($index, result)
) {
<mat-option
class="group relative mb-1 rounded-md px-6 py-0 text-md dark:hover:bg-hover hover:bg-gray-100"
[routerLink]="result.link"
[value]="result.value"
>
<!-- Contacts -->
@if (resultSet.id === 'contacts') {
<ng-container
*ngTemplateOutlet="
contactResult;
context: { $implicit: result }
"
></ng-container>
}
<!-- Pages -->
@if (resultSet.id === 'pages') {
<ng-container
*ngTemplateOutlet="
pageResult;
context: { $implicit: result }
"
></ng-container>
}
<!-- Tasks -->
@if (resultSet.id === 'tasks') {
<ng-container
*ngTemplateOutlet="
taskResult;
context: { $implicit: result }
"
></ng-container>
}
</mat-option>
}
}
</mat-autocomplete>
<button
class="absolute right-5 top-1/2 -mt-5 h-10 w-10 shrink-0 sm:right-7"
mat-icon-button
(click)="close()"
>
<mat-icon [svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
</button>
</div>
}
}
<!-- Basic search -->
<ng-container *ngIf="appearance === 'basic'">
@if (appearance === 'basic') {
<div class="w-full sm:min-w-80">
<mat-form-field class="w-full" [subscriptSizing]="'dynamic'">
<mat-icon
@ -113,62 +121,62 @@
[disableRipple]="true"
#matAutocomplete="matAutocomplete"
>
<mat-option
class="text-secondary pointer-events-none bg-transparent px-6 py-0 text-md"
*ngIf="resultSets && !resultSets.length"
>
No results found!
</mat-option>
<ng-container
*ngFor="let resultSet of resultSets; trackBy: trackByFn"
>
@if (resultSets && !resultSets.length) {
<mat-option
class="text-secondary pointer-events-none bg-transparent px-6 py-0 text-md"
>
No results found!
</mat-option>
}
@for (resultSet of resultSets; track trackByFn($index, resultSet)) {
<mat-optgroup class="mt-2 flex items-center px-2">
<span
class="text-secondary text-sm font-semibold tracking-wider"
>{{ resultSet.label.toUpperCase() }}</span
>
</mat-optgroup>
<ng-container
*ngFor="let result of resultSet.results; trackBy: trackByFn"
>
@for (
result of resultSet.results;
track trackByFn($index, result)
) {
<mat-option
class="group relative mb-1 rounded-md px-6 py-0 text-md dark:hover:bg-hover hover:bg-gray-100"
[routerLink]="result.link"
[value]="result.value"
>
<!-- Contacts -->
<ng-container *ngIf="resultSet.id === 'contacts'">
@if (resultSet.id === 'contacts') {
<ng-container
*ngTemplateOutlet="
contactResult;
context: { $implicit: result }
"
></ng-container>
</ng-container>
}
<!-- Pages -->
<ng-container *ngIf="resultSet.id === 'pages'">
@if (resultSet.id === 'pages') {
<ng-container
*ngTemplateOutlet="
pageResult;
context: { $implicit: result }
"
></ng-container>
</ng-container>
}
<!-- Tasks -->
<ng-container *ngIf="resultSet.id === 'tasks'">
@if (resultSet.id === 'tasks') {
<ng-container
*ngTemplateOutlet="
taskResult;
context: { $implicit: result }
"
></ng-container>
</ng-container>
}
</mat-option>
</ng-container>
</ng-container>
}
}
</mat-autocomplete>
</div>
</ng-container>
}
<!-- Contact result template -->
<ng-template #contactResult let-result>
@ -176,12 +184,15 @@
<div
class="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary-100 dark:bg-primary-800"
>
<img *ngIf="result.avatar" [src]="result.avatar" />
<mat-icon
class="m-0 text-primary icon-size-5 dark:text-primary-400"
*ngIf="!result.avatar"
[svgIcon]="'heroicons_outline:user-circle'"
></mat-icon>
@if (result.avatar) {
<img [src]="result.avatar" />
}
@if (!result.avatar) {
<mat-icon
class="m-0 text-primary icon-size-5 dark:text-primary-400"
[svgIcon]="'heroicons_outline:user-circle'"
></mat-icon>
}
</div>
<div class="ml-3 truncate">
<span [innerHTML]="result.name"></span>
@ -202,18 +213,18 @@
<!-- Task result template -->
<ng-template #taskResult let-result>
<div class="flex items-center">
<ng-container *ngIf="result.completed">
@if (result.completed) {
<mat-icon
class="mr-0 text-primary dark:text-primary-400"
[svgIcon]="'heroicons_outline:check-circle'"
></mat-icon>
</ng-container>
<ng-container *ngIf="!result.completed">
}
@if (!result.completed) {
<mat-icon
class="text-hint mr-0"
[svgIcon]="'heroicons_outline:check-circle'"
></mat-icon>
</ng-container>
}
<div
class="ml-3 truncate leading-normal"
[ngClass]="{ 'text-hint line-through': result.completed }"

4
src/app/layout/common/search/search.component.ts
View File

@ -1,5 +1,5 @@
import { Overlay } from '@angular/cdk/overlay';
import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
import { NgClass, NgTemplateOutlet } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import {
Component,
@ -44,14 +44,12 @@ import { Subject, debounceTime, filter, map, takeUntil } from 'rxjs';
animations: fuseAnimations,
standalone: true,
imports: [
NgIf,
MatButtonModule,
MatIconModule,
FormsModule,
MatAutocompleteModule,
ReactiveFormsModule,
MatOptionModule,
NgFor,
RouterLink,
NgTemplateOutlet,
MatFormFieldModule,

4
src/app/layout/common/settings/settings.component.html
View File

@ -50,7 +50,7 @@
<!-- Theme -->
<div class="text-secondary text-md font-semibold">THEME</div>
<div class="mt-6 grid grid-cols-2 gap-3 sm:grid-cols-3">
<ng-container *ngFor="let theme of config.themes">
@for (theme of config.themes; track theme) {
<div
class="bg-hover flex cursor-pointer items-center justify-center rounded-full px-4 py-3 ring-inset ring-primary"
[class.ring-2]="config.theme === theme.id"
@ -67,7 +67,7 @@
{{ theme.name }}
</div>
</div>
</ng-container>
}
</div>
<hr class="my-8" />

3
src/app/layout/common/settings/settings.component.ts
View File

@ -1,4 +1,4 @@
import { NgClass, NgFor } from '@angular/common';
import { NgClass } from '@angular/common';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@ -40,7 +40,6 @@ import { Subject, takeUntil } from 'rxjs';
MatIconModule,
FuseDrawerComponent,
MatButtonModule,
NgFor,
NgClass,
MatTooltipModule,
],

154
src/app/layout/common/shortcuts/shortcuts.component.html
View File

@ -22,21 +22,20 @@
</div>
<div class="flex items-center text-lg font-medium leading-10">
<span class="">Shortcuts</span>
<ng-container *ngIf="mode !== 'view'">
@if (mode !== 'view') {
<span class="ml-1">
<ng-container *ngIf="mode === 'add'"
>- Add new</ng-container
>
<ng-container
*ngIf="mode === 'modify' || mode === 'edit'"
>- Editing</ng-container
>
@if (mode === 'add') {
- Add new
}
@if (mode === 'modify' || mode === 'edit') {
- Editing
}
</span>
</ng-container>
}
</div>
<div class="ml-auto">
<!-- View mode -->
<ng-container *ngIf="mode === 'view'">
@if (mode === 'view') {
<!-- Enter 'modify' mode -->
<button
mat-icon-button
@ -59,10 +58,10 @@
[svgIcon]="'heroicons_solid:plus-circle'"
></mat-icon>
</button>
</ng-container>
}
<!-- Modify mode -->
<ng-container *ngIf="mode === 'modify'">
@if (mode === 'modify') {
<!-- Enter 'view' mode -->
<button
mat-icon-button
@ -74,10 +73,10 @@
[svgIcon]="'heroicons_solid:check-circle'"
></mat-icon>
</button>
</ng-container>
}
<!-- Add mode -->
<ng-container *ngIf="mode === 'add'">
@if (mode === 'add') {
<!-- Enter 'view' mode -->
<button
mat-icon-button
@ -89,10 +88,10 @@
[svgIcon]="'heroicons_solid:x-circle'"
></mat-icon>
</button>
</ng-container>
}
<!-- Edit mode -->
<ng-container *ngIf="mode === 'edit'">
@if (mode === 'edit') {
<!-- Enter 'modify' mode -->
<button
mat-icon-button
@ -104,70 +103,76 @@
[svgIcon]="'heroicons_solid:x-circle'"
></mat-icon>
</button>
</ng-container>
}
</div>
</div>
<div
class="bg-card relative -mb-px flex flex-auto flex-col overflow-y-auto sm:max-h-120"
>
<!-- View mode -->
<ng-container *ngIf="mode === 'view' || mode === 'modify'">
@if (mode === 'view' || mode === 'modify') {
<!-- Shortcuts -->
<div class="grid grid-flow-row grid-cols-2">
<!-- Shortcut -->
<ng-container
*ngFor="let shortcut of shortcuts; trackBy: trackByFn"
>
@for (
shortcut of shortcuts;
track trackByFn($index, shortcut)
) {
<div
class="group bg-card relative flex flex-col overflow-hidden border-b border-r even:border-r-0 hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5"
>
<ng-container *ngIf="mode === 'modify'">
@if (mode === 'modify') {
<div
class="absolute inset-0 z-99 cursor-pointer"
(click)="editShortcut(shortcut)"
></div>
</ng-container>
}
<!-- Normal links -->
<a
class="flex h-full w-full flex-col items-center justify-center py-6 no-underline"
*ngIf="!shortcut.useRouter"
[ngClass]="{
'pointer-events-none': mode === 'modify'
}"
[href]="shortcut.link"
>
<ng-container
*ngTemplateOutlet="linkContent"
></ng-container>
</a>
@if (!shortcut.useRouter) {
<a
class="flex h-full w-full flex-col items-center justify-center py-6 no-underline"
[ngClass]="{
'pointer-events-none':
mode === 'modify',
}"
[href]="shortcut.link"
>
<ng-container
*ngTemplateOutlet="linkContent"
></ng-container>
</a>
}
<!-- Router links -->
<a
class="flex h-full w-full flex-col items-center justify-center py-6 no-underline"
*ngIf="shortcut.useRouter"
[ngClass]="{
'pointer-events-none': mode === 'modify'
}"
[routerLink]="shortcut.link"
>
<ng-container
*ngTemplateOutlet="linkContent"
></ng-container>
</a>
@if (shortcut.useRouter) {
<a
class="flex h-full w-full flex-col items-center justify-center py-6 no-underline"
[ngClass]="{
'pointer-events-none':
mode === 'modify',
}"
[routerLink]="shortcut.link"
>
<ng-container
*ngTemplateOutlet="linkContent"
></ng-container>
</a>
}
<!-- Link content template -->
<ng-template #linkContent>
<div
class="relative mb-3 flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700"
>
<mat-icon
class="absolute z-20 opacity-0 icon-size-5 group-hover:opacity-100"
*ngIf="mode === 'modify'"
[svgIcon]="'heroicons_solid:pencil'"
></mat-icon>
@if (mode === 'modify') {
<mat-icon
class="absolute z-20 opacity-0 icon-size-5 group-hover:opacity-100"
[svgIcon]="'heroicons_solid:pencil'"
></mat-icon>
}
<mat-icon
class="z-10"
[ngClass]="{
'group-hover:opacity-0':
mode === 'modify'
mode === 'modify',
}"
[svgIcon]="shortcut.icon"
></mat-icon>
@ -180,11 +185,11 @@
</div>
</ng-template>
</div>
</ng-container>
}
</div>
<!-- No shortcuts -->
<ng-container *ngIf="!shortcuts || !shortcuts.length">
@if (!shortcuts || !shortcuts.length) {
<div
class="flex flex-auto flex-col items-center justify-center px-8 py-12 sm:justify-start"
>
@ -205,11 +210,11 @@
When you have shortcuts, they will appear here.
</div>
</div>
</ng-container>
</ng-container>
}
}
<!-- Add/Edit mode -->
<ng-container *ngIf="mode === 'add' || mode === 'edit'">
@if (mode === 'add' || mode === 'edit') {
<form class="p-6" [formGroup]="shortcutForm">
<mat-form-field class="w-full">
<mat-label>Label</mat-label>
@ -235,15 +240,16 @@
</mat-slide-toggle>
<!-- Actions -->
<div class="mt-4 flex items-center justify-end">
<button
class="mr-2"
*ngIf="mode === 'edit'"
mat-flat-button
type="button"
(click)="delete()"
>
Delete
</button>
@if (mode === 'edit') {
<button
class="mr-2"
mat-flat-button
type="button"
(click)="delete()"
>
Delete
</button>
}
<button
mat-flat-button
[color]="'primary'"
@ -251,16 +257,16 @@
type="button"
(click)="save()"
>
<ng-container *ngIf="mode === 'add'"
>Add</ng-container
>
<ng-container *ngIf="mode === 'edit'"
>Update</ng-container
>
@if (mode === 'add') {
Add
}
@if (mode === 'edit') {
Update
}
</button>
</div>
</form>
</ng-container>
}
</div>
</div>
</ng-template>

4
src/app/layout/common/shortcuts/shortcuts.component.ts
View File

@ -1,6 +1,6 @@
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
import { NgClass, NgTemplateOutlet } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
@ -40,9 +40,7 @@ import { Subject, takeUntil } from 'rxjs';
imports: [
MatButtonModule,
MatIconModule,
NgIf,
MatTooltipModule,
NgFor,
NgClass,
NgTemplateOutlet,
RouterLink,

15
src/app/layout/common/user/user.component.html
View File

@ -1,15 +1,12 @@
<!-- Button -->
<button mat-icon-button [matMenuTriggerFor]="userActions">
<span class="relative">
<img
class="h-7 w-7 rounded-full"
*ngIf="showAvatar && user.avatar"
[src]="user.avatar"
/>
<mat-icon
*ngIf="!showAvatar || !user.avatar"
[svgIcon]="'heroicons_outline:user-circle'"
></mat-icon>
@if (showAvatar && user.avatar) {
<img class="h-7 w-7 rounded-full" [src]="user.avatar" />
}
@if (!showAvatar || !user.avatar) {
<mat-icon [svgIcon]="'heroicons_outline:user-circle'"></mat-icon>
}
<span
class="absolute bottom-0 right-0 h-2 w-2 rounded-full"
[ngClass]="{

3
src/app/layout/common/user/user.component.ts
View File

@ -1,5 +1,5 @@
import { BooleanInput } from '@angular/cdk/coercion';
import { NgClass, NgIf } from '@angular/common';
import { NgClass } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
@ -28,7 +28,6 @@ import { Subject, takeUntil } from 'rxjs';
imports: [
MatButtonModule,
MatMenuModule,
NgIf,
MatIconModule,
NgClass,
MatDividerModule,

44
src/app/layout/layout.component.html
View File

@ -1,45 +1,67 @@
<!-- ----------------------------------------------------------------------------------------------------- -->
<!-- Empty layout -->
<!-- ----------------------------------------------------------------------------------------------------- -->
<empty-layout *ngIf="layout === 'empty'"></empty-layout>
@if (layout === 'empty') {
<empty-layout></empty-layout>
}
<!-- ----------------------------------------------------------------------------------------------------- -->
<!-- Layouts with horizontal navigation -->
<!-- ----------------------------------------------------------------------------------------------------- -->
<!-- Centered -->
<centered-layout *ngIf="layout === 'centered'"></centered-layout>
@if (layout === 'centered') {
<centered-layout></centered-layout>
}
<!-- Enterprise -->
<enterprise-layout *ngIf="layout === 'enterprise'"></enterprise-layout>
@if (layout === 'enterprise') {
<enterprise-layout></enterprise-layout>
}
<!-- Material -->
<material-layout *ngIf="layout === 'material'"></material-layout>
@if (layout === 'material') {
<material-layout></material-layout>
}
<!-- Modern -->
<modern-layout *ngIf="layout === 'modern'"></modern-layout>
@if (layout === 'modern') {
<modern-layout></modern-layout>
}
<!-- ----------------------------------------------------------------------------------------------------- -->
<!-- Layouts with vertical navigation -->
<!-- ----------------------------------------------------------------------------------------------------- -->
<!-- Classic -->
<classic-layout *ngIf="layout === 'classic'"></classic-layout>
@if (layout === 'classic') {
<classic-layout></classic-layout>
}
<!-- Classy -->
<classy-layout *ngIf="layout === 'classy'"></classy-layout>
@if (layout === 'classy') {
<classy-layout></classy-layout>
}
<!-- Compact -->
<compact-layout *ngIf="layout === 'compact'"></compact-layout>
@if (layout === 'compact') {
<compact-layout></compact-layout>
}
<!-- Dense -->
<dense-layout *ngIf="layout === 'dense'"></dense-layout>
@if (layout === 'dense') {
<dense-layout></dense-layout>
}
<!-- Futuristic -->
<futuristic-layout *ngIf="layout === 'futuristic'"></futuristic-layout>
@if (layout === 'futuristic') {
<futuristic-layout></futuristic-layout>
}
<!-- Thin -->
<thin-layout *ngIf="layout === 'thin'"></thin-layout>
@if (layout === 'thin') {
<thin-layout></thin-layout>
}
<!-- ----------------------------------------------------------------------------------------------------- -->
<!-- Settings drawer - Remove this to remove the drawer and its button -->

3
src/app/layout/layout.component.ts
View File

@ -1,4 +1,4 @@
import { DOCUMENT, NgIf } from '@angular/common';
import { DOCUMENT } from '@angular/common';
import {
Component,
Inject,
@ -33,7 +33,6 @@ import { ThinLayoutComponent } from './layouts/vertical/thin/thin.component';
encapsulation: ViewEncapsulation.None,
standalone: true,
imports: [
NgIf,
EmptyLayoutComponent,
CenteredLayoutComponent,
EnterpriseLayoutComponent,

4
src/app/layout/layouts/empty/empty.component.html
View File

@ -7,6 +7,8 @@
<div class="flex flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly.
Otherwise, layout changes won't be registered and the view won't be updated! -->
<router-outlet *ngIf="true"></router-outlet>
@if (true) {
<router-outlet></router-outlet>
}
</div>
</div>

3
src/app/layout/layouts/empty/empty.component.ts
View File

@ -1,4 +1,3 @@
import { NgIf } from '@angular/common';
import { Component, OnDestroy, ViewEncapsulation } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { FuseLoadingBarComponent } from '@fuse/components/loading-bar';
@ -9,7 +8,7 @@ import { Subject } from 'rxjs';
templateUrl: './empty.component.html',
encapsulation: ViewEncapsulation.None,
standalone: true,
imports: [FuseLoadingBarComponent, NgIf, RouterOutlet],
imports: [FuseLoadingBarComponent, RouterOutlet],
})
export class EmptyLayoutComponent implements OnDestroy {
private _unsubscribeAll: Subject<any> = new Subject<any>();

16
src/app/layout/layouts/horizontal/centered/centered.component.html
View File

@ -5,7 +5,7 @@
class="flex w-full flex-auto justify-center bg-gray-200 dark:bg-card sm:p-4 md:p-8"
>
<!-- Navigation -->
<ng-container *ngIf="isScreenSmall">
@if (isScreenSmall) {
<fuse-vertical-navigation
class="dark bg-gray-900 print:hidden"
[mode]="'over'"
@ -21,7 +21,7 @@
</div>
</ng-container>
</fuse-vertical-navigation>
</ng-container>
}
<!-- Wrapper -->
<div
@ -31,7 +31,7 @@
<div
class="bg-card relative z-49 flex h-16 w-full flex-0 items-center border-b px-4 dark:bg-default sm:h-20 md:px-6 print:hidden"
>
<ng-container *ngIf="!isScreenSmall">
@if (!isScreenSmall) {
<!-- Logo -->
<div class="mx-2 flex items-center lg:mr-8">
<div class="hidden lg:flex">
@ -61,9 +61,9 @@
[name]="'mainNavigation'"
[navigation]="navigation.horizontal"
></fuse-horizontal-navigation>
</ng-container>
}
<!-- Navigation toggle button -->
<ng-container *ngIf="isScreenSmall">
@if (isScreenSmall) {
<button
class="mr-2"
mat-icon-button
@ -71,7 +71,7 @@
>
<mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
</button>
</ng-container>
}
<!-- Components -->
<div class="ml-auto flex items-center space-x-1 pl-2 sm:space-x-2">
<languages></languages>
@ -88,7 +88,9 @@
<div class="bg-default flex w-full flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly.
Otherwise, layout changes won't be registered and the view won't be updated! -->
<router-outlet *ngIf="true"></router-outlet>
@if (true) {
<router-outlet></router-outlet>
}
</div>
<!-- Footer -->

2
src/app/layout/layouts/horizontal/centered/centered.component.ts
View File

@ -1,4 +1,3 @@
import { NgIf } from '@angular/common';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@ -28,7 +27,6 @@ import { Subject, takeUntil } from 'rxjs';
standalone: true,
imports: [
FuseLoadingBarComponent,
NgIf,
FuseVerticalNavigationComponent,
FuseHorizontalNavigationComponent,
MatButtonModule,

20
src/app/layout/layouts/horizontal/enterprise/enterprise.component.html
View File

@ -2,7 +2,7 @@
<fuse-loading-bar></fuse-loading-bar>
<!-- Navigation -->
<ng-container *ngIf="isScreenSmall">
@if (isScreenSmall) {
<fuse-vertical-navigation
class="dark bg-gray-900 print:hidden"
[mode]="'over'"
@ -22,7 +22,7 @@
</div>
</ng-container>
</fuse-vertical-navigation>
</ng-container>
}
<!-- Wrapper -->
<div
@ -38,7 +38,7 @@
>
<div class="flex h-16 w-full max-w-360 items-center sm:h-20">
<!-- Logo -->
<ng-container *ngIf="!isScreenSmall">
@if (!isScreenSmall) {
<div class="flex items-center">
<img
class="w-24"
@ -46,9 +46,9 @@
alt="Logo image"
/>
</div>
</ng-container>
}
<!-- Navigation toggle button -->
<ng-container *ngIf="isScreenSmall">
@if (isScreenSmall) {
<button
mat-icon-button
(click)="toggleNavigation('mainNavigation')"
@ -57,7 +57,7 @@
[svgIcon]="'heroicons_outline:bars-3'"
></mat-icon>
</button>
</ng-container>
}
<!-- Components -->
<div
class="ml-auto flex items-center space-x-0.5 pl-2 sm:space-x-2"
@ -84,7 +84,7 @@
</div>
</div>
<!-- Bottom bar -->
<ng-container *ngIf="!isScreenSmall">
@if (!isScreenSmall) {
<div
class="bg-card flex flex-auto justify-center px-4 dark:bg-gray-700 md:px-8"
>
@ -96,7 +96,7 @@
></fuse-horizontal-navigation>
</div>
</div>
</ng-container>
}
</div>
<!-- Content -->
@ -106,7 +106,9 @@
>
<!-- *ngIf="true" hack is required here for router-outlet to work correctly.
Otherwise, layout changes won't be registered and the view won't be updated! -->
<router-outlet *ngIf="true"></router-outlet>
@if (true) {
<router-outlet></router-outlet>
}
</div>
</div>

2
src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts
View File

@ -1,4 +1,3 @@
import { NgIf } from '@angular/common';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@ -29,7 +28,6 @@ import { Subject, takeUntil } from 'rxjs';
standalone: true,
imports: [
FuseLoadingBarComponent,
NgIf,
FuseVerticalNavigationComponent,
MatButtonModule,
MatIconModule,

20
src/app/layout/layouts/horizontal/material/material.component.html
View File

@ -2,7 +2,7 @@
<fuse-loading-bar></fuse-loading-bar>
<!-- Navigation -->
<ng-container *ngIf="isScreenSmall">
@if (isScreenSmall) {
<fuse-vertical-navigation
class="dark bg-gray-900 print:hidden"
[mode]="'over'"
@ -22,7 +22,7 @@
</div>
</ng-container>
</fuse-vertical-navigation>
</ng-container>
}
<!-- Wrapper -->
<div
@ -40,7 +40,7 @@
class="relative flex h-16 flex-0 flex-auto items-center px-4 md:px-6"
>
<!-- Logo -->
<ng-container *ngIf="!isScreenSmall">
@if (!isScreenSmall) {
<div class="mx-2 flex items-center">
<!-- Light version -->
<img
@ -55,9 +55,9 @@
alt="Logo image"
/>
</div>
</ng-container>
}
<!-- Navigation toggle button -->
<ng-container *ngIf="isScreenSmall">
@if (isScreenSmall) {
<button
mat-icon-button
(click)="toggleNavigation('mainNavigation')"
@ -66,7 +66,7 @@
[svgIcon]="'heroicons_outline:bars-3'"
></mat-icon>
</button>
</ng-container>
}
<!-- Components -->
<div
class="ml-auto flex items-center space-x-1 pl-2 sm:space-x-2"
@ -81,7 +81,7 @@
</div>
</div>
<!-- Bottom bar -->
<ng-container *ngIf="!isScreenSmall">
@if (!isScreenSmall) {
<div
class="relative flex h-16 flex-0 flex-auto items-center px-4"
>
@ -90,7 +90,7 @@
[navigation]="navigation.horizontal"
></fuse-horizontal-navigation>
</div>
</ng-container>
}
</div>
</div>
@ -101,7 +101,9 @@
>
<!-- *ngIf="true" hack is required here for router-outlet to work correctly.
Otherwise, layout changes won't be registered and the view won't be updated! -->
<router-outlet *ngIf="true"></router-outlet>
@if (true) {
<router-outlet></router-outlet>
}
</div>
</div>

2
src/app/layout/layouts/horizontal/material/material.component.ts
View File

@ -1,4 +1,3 @@
import { NgIf } from '@angular/common';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@ -28,7 +27,6 @@ import { Subject, takeUntil } from 'rxjs';
standalone: true,
imports: [
FuseLoadingBarComponent,
NgIf,
FuseVerticalNavigationComponent,
MatButtonModule,
MatIconModule,

16
src/app/layout/layouts/horizontal/modern/modern.component.html
View File

@ -2,7 +2,7 @@
<fuse-loading-bar></fuse-loading-bar>
<!-- Navigation -->
<ng-container *ngIf="isScreenSmall">
@if (isScreenSmall) {
<fuse-vertical-navigation
class="dark bg-gray-900 print:hidden"
[mode]="'over'"
@ -22,7 +22,7 @@
</div>
</ng-container>
</fuse-vertical-navigation>
</ng-container>
}
<!-- Wrapper -->
<div class="flex w-full min-w-0 flex-auto flex-col">
@ -30,7 +30,7 @@
<div
class="bg-card relative z-49 flex h-16 w-full flex-0 items-center px-4 shadow dark:border-b dark:bg-transparent dark:shadow-none sm:h-20 md:px-6 print:hidden"
>
<ng-container *ngIf="!isScreenSmall">
@if (!isScreenSmall) {
<!-- Logo -->
<div class="mx-2 flex items-center lg:mr-8">
<div class="hidden lg:flex">
@ -51,16 +51,16 @@
[name]="'mainNavigation'"
[navigation]="navigation.horizontal"
></fuse-horizontal-navigation>
</ng-container>
}
<!-- Navigation toggle button -->
<ng-container *ngIf="isScreenSmall">
@if (isScreenSmall) {
<button
mat-icon-button
(click)="toggleNavigation('mainNavigation')"
>
<mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
</button>
</ng-container>
}
<!-- Components -->
<div class="ml-auto flex items-center space-x-0.5 pl-2 sm:space-x-2">
<languages></languages>
@ -86,7 +86,9 @@
<div class="flex w-full flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly.
Otherwise, layout changes won't be registered and the view won't be updated! -->
<router-outlet *ngIf="true"></router-outlet>
@if (true) {
<router-outlet></router-outlet>
}
</div>
<!-- Footer -->

2
src/app/layout/layouts/horizontal/modern/modern.component.ts
View File

@ -1,4 +1,3 @@
import { NgIf } from '@angular/common';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@ -29,7 +28,6 @@ import { Subject, takeUntil } from 'rxjs';
standalone: true,
imports: [
FuseLoadingBarComponent,
NgIf,
FuseVerticalNavigationComponent,
FuseHorizontalNavigationComponent,
MatButtonModule,

4
src/app/layout/layouts/vertical/classic/classic.component.html
View File

@ -64,7 +64,9 @@
<div class="flex flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly.
Otherwise, layout changes won't be registered and the view won't be updated! -->
<router-outlet *ngIf="true"></router-outlet>
@if (true) {
<router-outlet></router-outlet>
}
</div>
<!-- Footer -->

2
src/app/layout/layouts/vertical/classic/classic.component.ts
View File

@ -1,4 +1,3 @@
import { NgIf } from '@angular/common';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@ -38,7 +37,6 @@ import { Subject, takeUntil } from 'rxjs';
MessagesComponent,
NotificationsComponent,
UserComponent,
NgIf,
RouterOutlet,
QuickChatComponent,
],

28
src/app/layout/layouts/vertical/classy/classy.component.html
View File

@ -25,17 +25,19 @@
<!-- User -->
<div class="flex w-full flex-col items-center p-4">
<div class="relative h-24 w-24">
<img
class="h-full w-full rounded-full"
*ngIf="user.avatar"
[src]="user.avatar"
alt="User avatar"
/>
<mat-icon
class="icon-size-24"
*ngIf="!user.avatar"
[svgIcon]="'heroicons_solid:user-circle'"
></mat-icon>
@if (user.avatar) {
<img
class="h-full w-full rounded-full"
[src]="user.avatar"
alt="User avatar"
/>
}
@if (!user.avatar) {
<mat-icon
class="icon-size-24"
[svgIcon]="'heroicons_solid:user-circle'"
></mat-icon>
}
</div>
<div class="mt-6 flex w-full flex-col items-center justify-center">
<div
@ -94,7 +96,9 @@
<div class="flex flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly.
Otherwise, layout changes won't be registered and the view won't be updated! -->
<router-outlet *ngIf="true"></router-outlet>
@if (true) {
<router-outlet></router-outlet>
}
</div>
<!-- Footer -->

2
src/app/layout/layouts/vertical/classy/classy.component.ts
View File

@ -1,4 +1,3 @@
import { NgIf } from '@angular/common';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@ -33,7 +32,6 @@ import { Subject, takeUntil } from 'rxjs';
FuseVerticalNavigationComponent,
NotificationsComponent,
UserComponent,
NgIf,
MatIconModule,
MatButtonModule,
LanguagesComponent,

4
src/app/layout/layouts/vertical/compact/compact.component.html
View File

@ -54,7 +54,9 @@
<div class="flex flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly.
Otherwise, layout changes won't be registered and the view won't be updated! -->
<router-outlet *ngIf="true"></router-outlet>
@if (true) {
<router-outlet></router-outlet>
}
</div>
<!-- Footer -->

2
src/app/layout/layouts/vertical/compact/compact.component.ts
View File

@ -1,4 +1,3 @@
import { NgIf } from '@angular/common';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@ -37,7 +36,6 @@ import { Subject, takeUntil } from 'rxjs';
MessagesComponent,
NotificationsComponent,
UserComponent,
NgIf,
RouterOutlet,
QuickChatComponent,
FuseVerticalNavigationComponent,

4
src/app/layout/layouts/vertical/dense/dense.component.html
View File

@ -69,7 +69,9 @@
<div class="flex flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly.
Otherwise, layout changes won't be registered and the view won't be updated! -->
<router-outlet *ngIf="true"></router-outlet>
@if (true) {
<router-outlet></router-outlet>
}
</div>
<!-- Footer -->

2
src/app/layout/layouts/vertical/dense/dense.component.ts
View File

@ -1,4 +1,3 @@
import { NgIf } from '@angular/common';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@ -38,7 +37,6 @@ import { Subject, takeUntil } from 'rxjs';
MessagesComponent,
NotificationsComponent,
UserComponent,
NgIf,
RouterOutlet,
QuickChatComponent,
],

4
src/app/layout/layouts/vertical/futuristic/futuristic.component.html
View File

@ -75,7 +75,9 @@
<div class="flex flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly.
Otherwise, layout changes won't be registered and the view won't be updated! -->
<router-outlet *ngIf="true"></router-outlet>
@if (true) {
<router-outlet></router-outlet>
}
</div>
<!-- Footer -->

2
src/app/layout/layouts/vertical/futuristic/futuristic.component.ts
View File

@ -1,4 +1,3 @@
import { NgIf } from '@angular/common';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@ -40,7 +39,6 @@ import { Subject, takeUntil } from 'rxjs';
ShortcutsComponent,
MessagesComponent,
NotificationsComponent,
NgIf,
RouterOutlet,
QuickChatComponent,
],

4
src/app/layout/layouts/vertical/thin/thin.component.html
View File

@ -58,7 +58,9 @@
<div class="flex flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly.
Otherwise, layout changes won't be registered and the view won't be updated! -->
<router-outlet *ngIf="true"></router-outlet>
@if (true) {
<router-outlet></router-outlet>
}
</div>
<!-- Footer -->

2
src/app/layout/layouts/vertical/thin/thin.component.ts
View File

@ -1,4 +1,3 @@
import { NgIf } from '@angular/common';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@ -38,7 +37,6 @@ import { Subject, takeUntil } from 'rxjs';
MessagesComponent,
NotificationsComponent,
UserComponent,
NgIf,
RouterOutlet,
QuickChatComponent,
],

10
src/app/mock-api/apps/chat/data.ts
View File

@ -187,7 +187,7 @@ export const messages = [
.toISO(),
},
{
id: '3a2d3a0e-839b-46e7-86ae-ca0826ecda7c',
id: 'd6f29648-c85c-4dfb-a6ff-6b7ebc40c993',
chatId: '',
contactId: 'me',
value: 'Then this virus thing happened and just after a week we moved in, they decided the whole department will be working remotely.',
@ -213,7 +213,7 @@ export const messages = [
.toISO(),
},
{
id: '415151b9-9ee9-40a4-a4ad-2d88146bc71b',
id: '26f2ccbf-aef7-4b49-88df-f6b59381110a',
chatId: '',
contactId: '',
value: "Ohh dude, I'm really sorry you had to go through all that in such a short period of time",
@ -252,7 +252,7 @@ export const messages = [
.toISO(),
},
{
id: '5329c20d-6754-47ec-af8c-660c72be3528',
id: '562e3524-15b7-464a-bbf6-9b2582e5e0ee',
chatId: '',
contactId: '',
value: 'Yeah dude. Hit me again next week so we can grab a coffee, remotely!',
@ -265,7 +265,7 @@ export const messages = [
.toISO(),
},
{
id: '5329c20d-6754-47ec-af8c-660c72be3528',
id: '9269c775-bad5-46e1-b33b-2de8704ec1d6',
chatId: '',
contactId: 'me',
value: ':) Sure, man! See you next week!',
@ -278,7 +278,7 @@ export const messages = [
.toISO(),
},
{
id: '5329c20d-6754-47ec-af8c-660c72be3528',
id: '779a27f2-bece-41c6-b9ca-c422570aee68',
chatId: '',
contactId: '',
value: 'See you later!',

60
src/app/modules/admin/apps/academy/details/details.component.html
View File

@ -25,12 +25,10 @@
</span>
</a>
<!-- Course category -->
<ng-container
*ngIf="
course.category
| fuseFindByKey: 'slug' : categories as category
"
>
@if (
course.category | fuseFindByKey: 'slug' : categories;
as category
) {
<div
class="mt-7 rounded-full px-3 py-0.5 text-sm font-semibold"
[ngClass]="{
@ -41,12 +39,12 @@
'bg-pink-100 text-pink-800 dark:bg-pink-500 dark:text-pink-50':
category.slug === 'cloud',
'bg-amber-100 text-amber-800 dark:bg-amber-500 dark:text-amber-50':
category.slug === 'firebase'
category.slug === 'firebase',
}"
>
{{ category.title }}
</div>
</ng-container>
}
<!-- Course title & description -->
<div class="mt-3 text-2xl font-semibold">
{{ course.title }}
@ -67,27 +65,25 @@
<!-- Steps -->
<div class="px-8 py-2">
<ol>
<ng-container
*ngFor="
let step of course.steps;
let last = last;
trackBy: trackByFn
"
>
@for (
step of course.steps;
track trackByFn($index, step);
let last = $last
) {
<li
class="group relative py-6"
[class.current-step]="step.order === currentStep"
>
<ng-container *ngIf="!last">
@if (!last) {
<div
class="absolute left-4 top-6 -ml-px h-full w-0.5"
[ngClass]="{
'bg-primary': step.order < currentStep,
'bg-gray-300 dark:bg-gray-600':
step.order >= currentStep
step.order >= currentStep,
}"
></div>
</ng-container>
}
<div
class="relative flex cursor-pointer items-start"
(click)="goToStep(step.order)"
@ -100,38 +96,32 @@
'ring-primary':
step.order === currentStep,
'ring-gray-300 group-hover:ring-gray-400 dark:ring-gray-600':
step.order > currentStep
step.order > currentStep,
}"
>
<!-- Check icon, show if the step is completed -->
<ng-container
*ngIf="step.order < currentStep"
>
@if (step.order < currentStep) {
<mat-icon
class="text-current icon-size-5"
[svgIcon]="'heroicons_solid:check'"
></mat-icon>
</ng-container>
}
<!-- Step order, show if the step is the current step -->
<ng-container
*ngIf="step.order === currentStep"
>
@if (step.order === currentStep) {
<div
class="text-md font-semibold text-primary dark:text-primary-500"
>
{{ step.order + 1 }}
</div>
</ng-container>
}
<!-- Step order, show if the step is not completed -->
<ng-container
*ngIf="step.order > currentStep"
>
@if (step.order > currentStep) {
<div
class="text-hint text-md font-semibold group-hover:text-secondary"
>
{{ step.order + 1 }}
</div>
</ng-container>
}
</div>
<div class="ml-4">
<div class="font-medium leading-4">
@ -145,7 +135,7 @@
</div>
</div>
</li>
</ng-container>
}
</ol>
</div>
</mat-drawer>
@ -181,9 +171,7 @@
[animationDuration]="'200'"
#courseSteps
>
<ng-container
*ngFor="let step of course.steps; trackBy: trackByFn"
>
@for (step of course.steps; track trackByFn($index, step)) {
<mat-tab>
<ng-template matTabContent>
<div
@ -192,7 +180,7 @@
></div>
</ng-template>
</mat-tab>
</ng-container>
}
</mat-tab-group>
<!-- Navigation - Desktop -->

4
src/app/modules/admin/apps/academy/details/details.component.ts
View File

@ -1,5 +1,5 @@
import { CdkScrollable } from '@angular/cdk/scrolling';
import { DOCUMENT, NgClass, NgFor, NgIf } from '@angular/common';
import { DOCUMENT, NgClass } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
@ -33,9 +33,7 @@ import { Subject, takeUntil } from 'rxjs';
MatSidenavModule,
RouterLink,
MatIconModule,
NgIf,
NgClass,
NgFor,
MatButtonModule,
MatProgressBarModule,
CdkScrollable,

163
src/app/modules/admin/apps/academy/list/list.component.html
View File

@ -51,16 +51,14 @@
(selectionChange)="filterByCategory($event)"
>
<mat-option [value]="'all'">All</mat-option>
<ng-container
*ngFor="
let category of categories;
trackBy: trackByFn
"
>
@for (
category of categories;
track trackByFn($index, category)
) {
<mat-option [value]="category.slug">{{
category.title
}}</mat-option>
</ng-container>
}
</mat-select>
</mat-form-field>
<mat-form-field
@ -88,16 +86,14 @@
</mat-slide-toggle>
</div>
<!-- Courses -->
<ng-container *ngIf="this.filteredCourses.length; else noCourses">
@if (this.filteredCourses.length) {
<div
class="mt-8 grid grid-cols-1 gap-8 sm:mt-10 sm:grid-cols-2 lg:grid-cols-3"
>
<ng-container
*ngFor="
let course of filteredCourses;
trackBy: trackByFn
"
>
@for (
course of filteredCourses;
track trackByFn($index, course)
) {
<!-- Course -->
<div
class="bg-card flex h-96 flex-col overflow-hidden rounded-2xl shadow"
@ -105,14 +101,13 @@
<div class="flex flex-col p-6">
<div class="flex items-center justify-between">
<!-- Course category -->
<ng-container
*ngIf="
course.category
| fuseFindByKey
: 'slug'
: categories as category
"
>
@if (
course.category
| fuseFindByKey
: 'slug'
: categories;
as category
) {
<div
class="rounded-full px-3 py-0.5 text-sm font-semibold"
[ngClass]="{
@ -123,19 +118,16 @@
'bg-pink-100 text-pink-800 dark:bg-pink-500 dark:text-pink-50':
category.slug === 'cloud',
'bg-amber-100 text-amber-800 dark:bg-amber-500 dark:text-amber-50':
category.slug === 'firebase'
category.slug ===
'firebase',
}"
>
{{ category.title }}
</div>
</ng-container>
}
<!-- Completed at least once -->
<div class="flex items-center">
<ng-container
*ngIf="
course.progress.completed > 0
"
>
@if (course.progress.completed > 0) {
<mat-icon
class="text-green-600 icon-size-5"
[svgIcon]="
@ -145,7 +137,7 @@
'You completed this course at least once'
"
></mat-icon>
</ng-container>
}
</div>
</div>
<!-- Course title & description -->
@ -178,42 +170,35 @@
'heroicons_solid:academic-cap'
"
></mat-icon>
<ng-container
*ngIf="course.progress.completed === 0"
>
@if (course.progress.completed === 0) {
<div class="ml-1.5">
Never completed
</div>
</ng-container>
<ng-container
*ngIf="course.progress.completed > 0"
>
}
@if (course.progress.completed > 0) {
<div class="ml-1.5">
<span>Completed</span>
<span class="ml-1">
<!-- Once -->
<ng-container
*ngIf="
course.progress
.completed === 1
"
>once</ng-container
>
@if (
course.progress
.completed === 1
) {
once
}
<!-- Twice -->
<ng-container
*ngIf="
course.progress
.completed === 2
"
>twice</ng-container
>
@if (
course.progress
.completed === 2
) {
twice
}
<!-- Others -->
<ng-container
*ngIf="
course.progress
.completed > 2
"
>{{
@if (
course.progress.completed >
2
) {
{{
course.progress
.completed
}}
@ -224,13 +209,13 @@
: {
'=0': 'time',
'=1': 'time',
other: 'times'
other: 'times',
}
}}
</ng-container>
}
</span>
</div>
</ng-container>
}
</div>
</div>
<!-- Footer -->
@ -266,41 +251,32 @@
>
<span class="inline-flex items-center">
<!-- Not started -->
<ng-container
*ngIf="
course.progress
.currentStep === 0
"
>
@if (
course.progress.currentStep ===
0
) {
<!-- Never completed -->
<ng-container
*ngIf="
course.progress
.completed === 0
"
>
@if (
course.progress
.completed === 0
) {
<span>Start</span>
</ng-container>
}
<!-- Completed before -->
<ng-container
*ngIf="
course.progress
.completed > 0
"
>
@if (
course.progress.completed >
0
) {
<span>Start again</span>
</ng-container>
</ng-container>
}
}
<!-- Started -->
<ng-container
*ngIf="
course.progress
.currentStep > 0
"
>
@if (
course.progress.currentStep > 0
) {
<span>Continue</span>
</ng-container>
}
<mat-icon
class="ml-1.5 icon-size-5"
@ -313,12 +289,9 @@
</div>
</div>
</div>
</ng-container>
}
</div>
</ng-container>
<!-- No courses -->
<ng-template #noCourses>
} @else {
<div
class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent"
>
@ -332,7 +305,9 @@
No courses found!
</div>
</div>
</ng-template>
}
<!-- No courses -->
</div>
</div>
</div>

10
src/app/modules/admin/apps/academy/list/list.component.ts
View File

@ -1,11 +1,5 @@
import { CdkScrollable } from '@angular/cdk/scrolling';
import {
I18nPluralPipe,
NgClass,
NgFor,
NgIf,
PercentPipe,
} from '@angular/common';
import { I18nPluralPipe, NgClass, PercentPipe } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
@ -43,11 +37,9 @@ import { BehaviorSubject, Subject, combineLatest, takeUntil } from 'rxjs';
MatFormFieldModule,
MatSelectModule,
MatOptionModule,
NgFor,
MatIconModule,
MatInputModule,
MatSlideToggleModule,
NgIf,
NgClass,
MatTooltipModule,
MatProgressBarModule,

93
src/app/modules/admin/apps/chat/chats/chats.component.html
View File

@ -8,20 +8,20 @@
#drawer
>
<!-- New chat -->
<ng-container *ngIf="drawerComponent === 'new-chat'">
@if (drawerComponent === 'new-chat') {
<chat-new-chat [drawer]="drawer"></chat-new-chat>
</ng-container>
}
<!-- Profile -->
<ng-container *ngIf="drawerComponent === 'profile'">
@if (drawerComponent === 'profile') {
<chat-profile [drawer]="drawer"></chat-profile>
</ng-container>
}
</mat-drawer>
<!-- Drawer content -->
<mat-drawer-content class="flex overflow-hidden">
<!-- Chats list -->
<ng-container *ngIf="chats && chats.length > 0; else noChats">
@if (chats && chats.length > 0) {
<div
class="bg-card relative flex w-full min-w-0 flex-auto flex-col dark:bg-transparent lg:min-w-100 lg:max-w-100"
>
@ -35,20 +35,20 @@
(click)="openProfile()"
>
<div class="h-10 w-10">
<ng-container *ngIf="profile.avatar">
@if (profile.avatar) {
<img
class="h-full w-full rounded-full object-cover object-cover"
class="h-full w-full rounded-full object-cover"
[src]="profile.avatar"
alt="Profile avatar"
/>
</ng-container>
<ng-container *ngIf="!profile.avatar">
}
@if (!profile.avatar) {
<div
class="flex h-full w-full items-center justify-center rounded-full bg-gray-200 text-lg uppercase text-gray-600 dark:bg-gray-700 dark:text-gray-200"
>
{{ profile.name.charAt(0) }}
</div>
</ng-container>
}
</div>
<div class="ml-4 truncate font-medium">
{{ profile.name }}
@ -152,15 +152,11 @@
<!-- Chats -->
<div class="flex-auto overflow-y-auto">
<ng-container
*ngIf="filteredChats.length > 0; else noChats"
>
<ng-container
*ngFor="
let chat of filteredChats;
trackBy: trackByFn
"
>
@if (filteredChats.length > 0) {
@for (
chat of filteredChats;
track trackByFn($index, chat)
) {
<a
class="z-20 flex cursor-pointer items-center border-b px-8 py-5"
[ngClass]="{
@ -169,16 +165,14 @@
selectedChat.id !== chat.id,
'bg-primary-50 dark:bg-hover':
selectedChat &&
selectedChat.id === chat.id
selectedChat.id === chat.id,
}"
[routerLink]="[chat.id]"
>
<div
class="relative flex h-10 w-10 flex-0 items-center justify-center"
>
<ng-container
*ngIf="chat.unreadCount > 0"
>
@if (chat.unreadCount > 0) {
<div
class="ring-bg-card absolute bottom-0 right-0 -ml-0.5 h-2 w-2 flex-0 rounded-full bg-primary text-on-primary ring-2 dark:bg-primary-500 dark:ring-gray-900"
[class.ring-primary-50]="
@ -186,19 +180,15 @@
selectedChat.id === chat.id
"
></div>
</ng-container>
<ng-container
*ngIf="chat.contact.avatar"
>
}
@if (chat.contact.avatar) {
<img
class="h-full w-full rounded-full object-cover"
[src]="chat.contact.avatar"
alt="Contact avatar"
/>
</ng-container>
<ng-container
*ngIf="!chat.contact.avatar"
>
}
@if (!chat.contact.avatar) {
<div
class="flex h-full w-full items-center justify-center rounded-full bg-gray-200 text-lg uppercase text-gray-600 dark:bg-gray-700 dark:text-gray-200"
>
@ -206,7 +196,7 @@
chat.contact.name.charAt(0)
}}
</div>
</ng-container>
}
</div>
<div class="ml-4 min-w-0">
<div
@ -234,24 +224,37 @@
>
{{ chat.lastMessageAt }}
</div>
<ng-container *ngIf="chat.muted">
@if (chat.muted) {
<mat-icon
class="text-hint icon-size-5"
[svgIcon]="
'heroicons_solid:speaker-x-mark'
"
></mat-icon>
</ng-container>
}
</div>
</a>
</ng-container>
</ng-container>
}
} @else {
<div
class="flex h-full flex-auto flex-col items-center justify-center"
>
<mat-icon
class="icon-size-24"
[svgIcon]="
'heroicons_outline:chat-bubble-oval-left-ellipsis'
"
></mat-icon>
<div
class="text-secondary mt-4 text-2xl font-semibold tracking-tight"
>
No chats
</div>
</div>
}
</div>
</div>
</ng-container>
<!-- No chats template -->
<ng-template #noChats>
} @else {
<div
class="flex h-full flex-auto flex-col items-center justify-center"
>
@ -267,21 +270,23 @@
No chats
</div>
</div>
</ng-template>
}
<!-- No chats template -->
<!-- Conversation -->
<ng-container *ngIf="chats && chats.length > 0">
@if (chats && chats.length > 0) {
<div
class="flex-auto border-l"
[ngClass]="{
'absolute inset-0 z-20 flex lg:static lg:inset-auto':
selectedChat && selectedChat.id,
'hidden lg:flex': !selectedChat || !selectedChat.id
'hidden lg:flex': !selectedChat || !selectedChat.id,
}"
>
<router-outlet></router-outlet>
</div>
</ng-container>
}
</mat-drawer-content>
</mat-drawer-container>
</div>

4
src/app/modules/admin/apps/chat/chats/chats.component.ts
View File

@ -1,4 +1,4 @@
import { NgClass, NgFor, NgIf } from '@angular/common';
import { NgClass } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
@ -28,7 +28,6 @@ import { Subject, takeUntil } from 'rxjs';
standalone: true,
imports: [
MatSidenavModule,
NgIf,
NewChatComponent,
ProfileComponent,
MatButtonModule,
@ -36,7 +35,6 @@ import { Subject, takeUntil } from 'rxjs';
MatMenuModule,
MatFormFieldModule,
MatInputModule,
NgFor,
NgClass,
RouterLink,
RouterOutlet,

38
src/app/modules/admin/apps/chat/contact-info/contact-info.component.html
View File

@ -13,20 +13,20 @@
<!-- Contact avatar & info -->
<div class="mt-8 flex flex-col items-center">
<div class="h-40 w-40 rounded-full">
<ng-container *ngIf="chat.contact.avatar">
@if (chat.contact.avatar) {
<img
class="h-full w-full rounded-full object-cover"
[src]="chat.contact.avatar"
[alt]="'Contact avatar'"
/>
</ng-container>
<ng-container *ngIf="!chat.contact.avatar">
}
@if (!chat.contact.avatar) {
<div
class="flex h-full w-full items-center justify-center rounded-full bg-gray-200 text-8xl font-semibold uppercase text-gray-600 dark:bg-gray-700 dark:text-gray-200"
>
{{ chat.contact.name.charAt(0) }}
</div>
</ng-container>
}
</div>
<div class="mt-4 text-lg font-medium">{{ chat.contact.name }}</div>
<div class="text-secondary mt-0.5 text-md">
@ -38,24 +38,22 @@
<!-- Media -->
<div class="text-lg font-medium">Media</div>
<div class="mt-4 grid grid-cols-4 gap-1">
<ng-container
*ngFor="let media of chat.contact.attachments.media"
>
@for (media of chat.contact.attachments.media; track media) {
<img class="h-20 rounded object-cover" [src]="media" />
</ng-container>
}
</div>
<!-- Details -->
<div class="mt-10 space-y-4">
<div class="mb-3 text-lg font-medium">Details</div>
<ng-container *ngIf="chat.contact.details.emails.length">
@if (chat.contact.details.emails.length) {
<div>
<div class="text-secondary font-medium">Email</div>
<div class="">
{{ chat.contact.details.emails[0].email }}
</div>
</div>
</ng-container>
<ng-container *ngIf="chat.contact.details.phoneNumbers.length">
}
@if (chat.contact.details.phoneNumbers.length) {
<div>
<div class="text-secondary font-medium">
Phone number
@ -66,31 +64,31 @@
}}
</div>
</div>
</ng-container>
<ng-container *ngIf="chat.contact.details.title">
}
@if (chat.contact.details.title) {
<div>
<div class="text-secondary font-medium">Title</div>
<div class="">{{ chat.contact.details.title }}</div>
</div>
</ng-container>
<ng-container *ngIf="chat.contact.details.company">
}
@if (chat.contact.details.company) {
<div>
<div class="text-secondary font-medium">Company</div>
<div class="">{{ chat.contact.details.company }}</div>
</div>
</ng-container>
<ng-container *ngIf="chat.contact.details.birthday">
}
@if (chat.contact.details.birthday) {
<div>
<div class="text-secondary font-medium">Birthday</div>
<div class="">{{ chat.contact.details.birthday }}</div>
</div>
</ng-container>
<ng-container *ngIf="chat.contact.details.address">
}
@if (chat.contact.details.address) {
<div>
<div class="text-secondary font-medium">Address</div>
<div class="">{{ chat.contact.details.address }}</div>
</div>
</ng-container>
}
</div>
</div>
</div>

3
src/app/modules/admin/apps/chat/contact-info/contact-info.component.ts
View File

@ -1,4 +1,3 @@
import { NgFor, NgIf } from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
@ -16,7 +15,7 @@ import { Chat } from 'app/modules/admin/apps/chat/chat.types';
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [MatButtonModule, MatIconModule, NgIf, NgFor],
imports: [MatButtonModule, MatIconModule],
})
export class ContactInfoComponent {
@Input() chat: Chat;

104
src/app/modules/admin/apps/chat/conversation/conversation.component.html
View File

@ -1,7 +1,7 @@
<div
class="bg-card flex flex-auto flex-col overflow-y-auto dark:bg-default lg:overflow-hidden"
>
<ng-container *ngIf="chat; else selectChatOrStartNew">
@if (chat) {
<mat-drawer-container class="h-full flex-auto" [hasBackdrop]="false">
<!-- Drawer -->
<mat-drawer
@ -45,20 +45,20 @@
<div
class="relative flex h-10 w-10 flex-0 items-center justify-center"
>
<ng-container *ngIf="chat.contact.avatar">
@if (chat.contact.avatar) {
<img
class="h-full w-full rounded-full object-cover"
[src]="chat.contact.avatar"
alt="Contact avatar"
/>
</ng-container>
<ng-container *ngIf="!chat.contact.avatar">
}
@if (!chat.contact.avatar) {
<div
class="flex h-full w-full items-center justify-center rounded-full bg-gray-200 text-lg uppercase text-gray-600 dark:bg-gray-700 dark:text-gray-200"
>
{{ chat.contact.name.charAt(0) }}
</div>
</ng-container>
}
</div>
<div
class="ml-4 truncate text-lg font-medium leading-5"
@ -92,22 +92,22 @@
mat-menu-item
(click)="toggleMuteNotifications()"
>
<ng-container *ngIf="!chat.muted">
@if (!chat.muted) {
<mat-icon
[svgIcon]="
'heroicons_outline:speaker-x-mark'
"
></mat-icon>
Mute notifications
</ng-container>
<ng-container *ngIf="chat.muted">
}
@if (chat.muted) {
<mat-icon
[svgIcon]="
'heroicons_outline:volume-up'
'heroicons_outline:speaker-wave'
"
></mat-icon>
Unmute notifications
</ng-container>
}
</button>
<button mat-menu-item>
<mat-icon
@ -130,24 +130,19 @@
<div
class="bg-card flex flex-auto shrink flex-col p-6 dark:bg-transparent"
>
<ng-container
*ngFor="
let message of chat.messages;
let i = index;
let first = first;
let last = last;
trackBy: trackByFn
"
>
@for (
message of chat.messages;
track trackByFn(i, message);
let i = $index;
let first = $first;
let last = $last
) {
<!-- Start of the day -->
<ng-container
*ngIf="
first ||
(chat.messages[i - 1].createdAt
| date: 'd') !==
(message.createdAt | date: 'd')
"
>
@if (
first ||
(chat.messages[i - 1].createdAt | date: 'd') !==
(message.createdAt | date: 'd')
) {
<div
class="-mx-6 my-3 flex items-center justify-center"
>
@ -161,7 +156,7 @@
</div>
<div class="flex-auto border-b"></div>
</div>
</ng-container>
}
<div
class="flex flex-col"
[ngClass]="{
@ -174,7 +169,7 @@
'mt-3':
i > 0 &&
chat.messages[i - 1].isMine !==
message.isMine
message.isMine,
}"
>
<!-- Bubble -->
@ -184,24 +179,22 @@
'bg-blue-500 text-blue-50':
message.isMine,
'bg-gray-500 text-gray-50':
!message.isMine
!message.isMine,
}"
>
<!-- Speech bubble tail -->
<ng-container
*ngIf="
last ||
chat.messages[i + 1].isMine !==
message.isMine
"
>
@if (
last ||
chat.messages[i + 1].isMine !==
message.isMine
) {
<div
class="absolute bottom-0 w-3"
[ngClass]="{
'-right-1 -mr-px mb-px text-blue-500':
message.isMine,
'-left-1 -ml-px mb-px -scale-x-1 text-gray-500':
!message.isMine
!message.isMine,
}"
>
<ng-container
@ -210,7 +203,7 @@
"
></ng-container>
</div>
</ng-container>
}
<!-- Message -->
<div
class="min-w-4 leading-5"
@ -218,28 +211,26 @@
></div>
</div>
<!-- Time -->
<ng-container
*ngIf="
first ||
last ||
chat.messages[i + 1].isMine !==
message.isMine ||
chat.messages[i + 1].createdAt !==
message.createdAt
"
>
@if (
first ||
last ||
chat.messages[i + 1].isMine !==
message.isMine ||
chat.messages[i + 1].createdAt !==
message.createdAt
) {
<div
class="text-secondary my-0.5 text-sm font-medium"
[ngClass]="{
'mr-3': message.isMine,
'ml-3': !message.isMine
'ml-3': !message.isMine,
}"
>
{{ message.createdAt | date: 'HH:mm' }}
</div>
</ng-container>
}
</div>
</ng-container>
}
</div>
</div>
@ -279,10 +270,7 @@
</div>
</mat-drawer-content>
</mat-drawer-container>
</ng-container>
<!-- Select chat or start new template -->
<ng-template #selectChatOrStartNew>
} @else {
<div
class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent"
>
@ -296,7 +284,9 @@
Select a conversation or start a new chat
</div>
</div>
</ng-template>
}
<!-- Select chat or start new template -->
<!-- Speech bubble tail SVG -->
<!-- prettier-ignore -->

10
src/app/modules/admin/apps/chat/conversation/conversation.component.ts
View File

@ -1,11 +1,5 @@
import { TextFieldModule } from '@angular/cdk/text-field';
import {
DatePipe,
NgClass,
NgFor,
NgIf,
NgTemplateOutlet,
} from '@angular/common';
import { DatePipe, NgClass, NgTemplateOutlet } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
@ -38,14 +32,12 @@ import { Subject, takeUntil } from 'rxjs';
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [
NgIf,
MatSidenavModule,
ContactInfoComponent,
MatButtonModule,
RouterLink,
MatIconModule,
MatMenuModule,
NgFor,
NgClass,
NgTemplateOutlet,
MatFormFieldModule,

52
src/app/modules/admin/apps/chat/new-chat/new-chat.component.html
View File

@ -14,28 +14,23 @@
</div>
<div class="relative overflow-y-auto">
<ng-container *ngIf="contacts.length; else noContacts">
<ng-container
*ngFor="
let contact of contacts;
let i = index;
trackBy: trackByFn
"
>
@if (contacts.length) {
@for (
contact of contacts;
track trackByFn(i, contact);
let i = $index
) {
<!-- Group -->
<ng-container
*ngIf="
i === 0 ||
contact.name.charAt(0) !==
contacts[i - 1].name.charAt(0)
"
>
@if (
i === 0 ||
contact.name.charAt(0) !== contacts[i - 1].name.charAt(0)
) {
<div
class="text-secondary sticky top-0 z-10 -mt-px border-b border-t bg-gray-100 px-6 py-1 font-medium uppercase dark:bg-gray-900 md:px-8"
>
{{ contact.name.charAt(0) }}
</div>
</ng-container>
}
<!-- Contact -->
<div
class="z-20 flex cursor-pointer items-center border-b px-6 py-4 dark:hover:bg-hover hover:bg-gray-100 md:px-8"
@ -43,20 +38,20 @@
<div
class="flex h-10 w-10 flex-0 items-center justify-center overflow-hidden rounded-full"
>
<ng-container *ngIf="contact.avatar">
@if (contact.avatar) {
<img
class="h-full w-full object-cover"
[src]="contact.avatar"
alt="Contact avatar"
/>
</ng-container>
<ng-container *ngIf="!contact.avatar">
}
@if (!contact.avatar) {
<div
class="flex h-full w-full items-center justify-center rounded-full bg-gray-200 text-lg uppercase text-gray-600 dark:bg-gray-700 dark:text-gray-200"
>
{{ contact.name.charAt(0) }}
</div>
</ng-container>
}
</div>
<div class="ml-4 min-w-0">
<div class="truncate font-medium leading-5">
@ -67,16 +62,15 @@
</div>
</div>
</div>
</ng-container>
</ng-container>
}
} @else {
<div
class="border-t p-8 text-center text-4xl font-semibold tracking-tight sm:p-16"
>
There are no contacts!
</div>
}
</div>
<!-- No contacts -->
<ng-template #noContacts>
<div
class="border-t p-8 text-center text-4xl font-semibold tracking-tight sm:p-16"
>
There are no contacts!
</div>
</ng-template>
</div>

3
src/app/modules/admin/apps/chat/new-chat/new-chat.component.ts
View File

@ -1,4 +1,3 @@
import { NgFor, NgIf } from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
@ -20,7 +19,7 @@ import { Subject, takeUntil } from 'rxjs';
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [MatButtonModule, MatIconModule, NgIf, NgFor],
imports: [MatButtonModule, MatIconModule],
})
export class NewChatComponent implements OnInit, OnDestroy {
@Input() drawer: MatDrawer;

8
src/app/modules/admin/apps/chat/profile/profile.component.html
View File

@ -27,20 +27,20 @@
Change Profile Photo
</div>
</div>
<ng-container *ngIf="profile.avatar">
@if (profile.avatar) {
<img
class="h-full w-full rounded-full object-cover"
[src]="profile.avatar"
[alt]="'Profile avatar'"
/>
</ng-container>
<ng-container *ngIf="!profile.avatar">
}
@if (!profile.avatar) {
<div
class="flex h-full w-full items-center justify-center rounded-full bg-gray-200 text-8xl font-semibold uppercase text-gray-600 dark:bg-gray-700 dark:text-gray-200"
>
{{ profile.name.charAt(0) }}
</div>
</ng-container>
}
</div>
<!-- Profile info -->

2
src/app/modules/admin/apps/chat/profile/profile.component.ts
View File

@ -1,4 +1,3 @@
import { NgIf } from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
@ -26,7 +25,6 @@ import { Subject, takeUntil } from 'rxjs';
imports: [
MatButtonModule,
MatIconModule,
NgIf,
MatFormFieldModule,
MatInputModule,
FormsModule,

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

@ -1,17 +1,17 @@
<div class="flex w-full flex-col">
<!-- View mode -->
<ng-container *ngIf="!editMode">
@if (!editMode) {
<!-- Header -->
<div
class="relative h-40 w-full bg-accent-100 px-8 dark:bg-accent-700 sm:h-48 sm:px-12"
>
<!-- Background -->
<ng-container *ngIf="contact.background">
@if (contact.background) {
<img
class="absolute inset-0 h-full w-full object-cover"
[src]="contact.background"
/>
</ng-container>
}
<!-- Close button -->
<div
class="mx-auto flex w-full max-w-3xl items-center justify-end pt-6"
@ -40,17 +40,19 @@
<div
class="ring-bg-card flex h-32 w-32 items-center justify-center overflow-hidden rounded-full ring-4"
>
<img
class="h-full w-full object-cover"
*ngIf="contact.avatar"
[src]="contact.avatar"
/>
<div
class="flex h-full w-full items-center justify-center overflow-hidden rounded bg-gray-200 text-8xl font-bold uppercase leading-none text-gray-600 dark:bg-gray-700 dark:text-gray-200"
*ngIf="!contact.avatar"
>
{{ contact.name.charAt(0) }}
</div>
@if (contact.avatar) {
<img
class="h-full w-full object-cover"
[src]="contact.avatar"
/>
}
@if (!contact.avatar) {
<div
class="flex h-full w-full items-center justify-center overflow-hidden rounded bg-gray-200 text-8xl font-bold uppercase leading-none text-gray-600 dark:bg-gray-700 dark:text-gray-200"
>
{{ contact.name.charAt(0) }}
</div>
}
</div>
<!-- Actions -->
<div class="mb-1 ml-auto flex items-center">
@ -73,16 +75,13 @@
</div>
<!-- Tags -->
<ng-container *ngIf="contact.tags.length">
@if (contact.tags.length) {
<div class="mt-2 flex flex-wrap items-center">
<!-- Tag -->
<ng-container
*ngFor="
let tag of contact.tags
| fuseFindByKey: 'id' : tags;
trackBy: trackByFn
"
>
@for (
tag of contact.tags | fuseFindByKey: 'id' : tags;
track trackByFn($index, tag)
) {
<div
class="mb-3 mr-3 flex items-center justify-center rounded-full bg-gray-100 px-3 py-1 leading-normal text-gray-500 dark:bg-gray-700 dark:text-gray-300"
>
@ -91,13 +90,13 @@
>{{ tag.title }}</span
>
</div>
</ng-container>
}
</div>
</ng-container>
}
<div class="mt-4 flex flex-col space-y-8 border-t pt-6">
<!-- Title -->
<ng-container *ngIf="contact.title">
@if (contact.title) {
<div class="flex sm:items-center">
<mat-icon
[svgIcon]="'heroicons_outline:briefcase'"
@ -106,10 +105,10 @@
{{ contact.title }}
</div>
</div>
</ng-container>
}
<!-- Company -->
<ng-container *ngIf="contact.company">
@if (contact.company) {
<div class="flex sm:items-center">
<mat-icon
[svgIcon]="
@ -120,21 +119,19 @@
{{ contact.company }}
</div>
</div>
</ng-container>
}
<!-- Emails -->
<ng-container *ngIf="contact.emails.length">
@if (contact.emails.length) {
<div class="flex">
<mat-icon
[svgIcon]="'heroicons_outline:envelope'"
></mat-icon>
<div class="ml-6 min-w-0 space-y-1">
<ng-container
*ngFor="
let email of contact.emails;
trackBy: trackByFn
"
>
@for (
email of contact.emails;
track trackByFn($index, email)
) {
<div class="flex items-center leading-6">
<a
class="text-primary-500 hover:underline"
@ -143,34 +140,33 @@
>
{{ email.email }}
</a>
<div
class="text-secondary truncate text-md"
*ngIf="email.label"
>
<span class="mx-2">&bull;</span>
<span class="font-medium">{{
email.label
}}</span>
</div>
@if (email.label) {
<div
class="text-secondary truncate text-md"
>
<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">
@if (contact.phoneNumbers.length) {
<div class="flex">
<mat-icon
[svgIcon]="'heroicons_outline:phone'"
></mat-icon>
<div class="ml-6 min-w-0 space-y-1">
<ng-container
*ngFor="
let phoneNumber of contact.phoneNumbers;
trackBy: trackByFn
"
>
@for (
phoneNumber of contact.phoneNumbers;
track trackByFn($index, phoneNumber)
) {
<div class="flex items-center leading-6">
<div
class="hidden h-4 w-6 overflow-hidden sm:flex"
@ -201,23 +197,24 @@
<div class="ml-2.5 font-mono">
{{ phoneNumber.phoneNumber }}
</div>
<div
class="text-secondary truncate text-md"
*ngIf="phoneNumber.label"
>
<span class="mx-2">&bull;</span>
<span class="font-medium">{{
phoneNumber.label
}}</span>
</div>
@if (phoneNumber.label) {
<div
class="text-secondary truncate text-md"
>
<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">
@if (contact.address) {
<div class="flex sm:items-center">
<mat-icon
[svgIcon]="'heroicons_outline:map-pin'"
@ -226,10 +223,10 @@
{{ contact.address }}
</div>
</div>
</ng-container>
}
<!-- Birthday -->
<ng-container *ngIf="contact.birthday">
@if (contact.birthday) {
<div class="flex sm:items-center">
<mat-icon
[svgIcon]="'heroicons_outline:cake'"
@ -238,10 +235,10 @@
{{ contact.birthday | date: 'longDate' }}
</div>
</div>
</ng-container>
}
<!-- Notes -->
<ng-container *ngIf="contact.notes">
@if (contact.notes) {
<div class="flex">
<mat-icon
[svgIcon]="
@ -253,25 +250,25 @@
[innerHTML]="contact.notes"
></div>
</div>
</ng-container>
}
</div>
</div>
</div>
</ng-container>
}
<!-- Edit mode -->
<ng-container *ngIf="editMode">
@if (editMode) {
<!-- Header -->
<div
class="relative h-40 w-full bg-accent-100 px-8 dark:bg-accent-700 sm:h-48 sm:px-12"
>
<!-- Background -->
<ng-container *ngIf="contact.background">
@if (contact.background) {
<img
class="absolute inset-0 h-full w-full object-cover"
[src]="contact.background"
/>
</ng-container>
}
<!-- Close button -->
<div
class="mx-auto flex w-full max-w-3xl items-center justify-end pt-6"
@ -347,17 +344,19 @@
</div>
</div>
<!-- Image/Letter -->
<img
class="h-full w-full object-cover"
*ngIf="contact.avatar"
[src]="contact.avatar"
/>
<div
class="flex h-full w-full items-center justify-center overflow-hidden rounded bg-gray-200 text-8xl font-bold uppercase leading-none text-gray-600 dark:bg-gray-700 dark:text-gray-200"
*ngIf="!contact.avatar"
>
{{ contact.name.charAt(0) }}
</div>
@if (contact.avatar) {
<img
class="h-full w-full object-cover"
[src]="contact.avatar"
/>
}
@if (!contact.avatar) {
<div
class="flex h-full w-full items-center justify-center overflow-hidden rounded bg-gray-200 text-8xl font-bold uppercase leading-none text-gray-600 dark:bg-gray-700 dark:text-gray-200"
>
{{ contact.name.charAt(0) }}
</div>
}
</div>
</div>
@ -385,14 +384,12 @@
<!-- Tags -->
<div class="-m-1.5 mt-6 flex flex-wrap items-center">
<!-- Tags -->
<ng-container *ngIf="contact.tags.length">
<ng-container
*ngFor="
let tag of contact.tags
| fuseFindByKey: 'id' : tags;
trackBy: trackByFn
"
>
@if (contact.tags.length) {
@for (
tag of contact.tags
| fuseFindByKey: 'id' : tags;
track trackByFn($index, tag)
) {
<div
class="m-1.5 flex items-center justify-center rounded-full bg-gray-100 px-4 leading-9 text-gray-500 dark:bg-gray-700 dark:text-gray-300"
>
@ -401,15 +398,15 @@
>{{ tag.title }}</span
>
</div>
</ng-container>
</ng-container>
}
}
<!-- Tags panel and its button -->
<div
class="m-1.5 flex cursor-pointer items-center justify-center rounded-full bg-gray-100 px-4 leading-9 text-gray-500 dark:bg-gray-700 dark:text-gray-300"
(click)="openTagsPanel()"
#tagsPanelOrigin
>
<ng-container *ngIf="contact.tags.length">
@if (contact.tags.length) {
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:pencil-square'"
@ -418,9 +415,9 @@
class="ml-1.5 whitespace-nowrap text-md font-medium"
>Edit</span
>
</ng-container>
}
<ng-container *ngIf="!contact.tags.length">
@if (!contact.tags.length) {
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:plus-circle'"
@ -429,7 +426,7 @@
class="ml-1.5 whitespace-nowrap text-md font-medium"
>Add</span
>
</ng-container>
}
<!-- Tags panel -->
<ng-template #tagsPanel>
@ -466,33 +463,33 @@
mat-icon-button
(click)="toggleTagsEditMode()"
>
<mat-icon
*ngIf="!tagsEditMode"
class="icon-size-5"
[svgIcon]="
'heroicons_solid:pencil-square'
"
></mat-icon>
<mat-icon
*ngIf="tagsEditMode"
class="icon-size-5"
[svgIcon]="
'heroicons_solid:check'
"
></mat-icon>
@if (!tagsEditMode) {
<mat-icon
class="icon-size-5"
[svgIcon]="
'heroicons_solid:pencil-square'
"
></mat-icon>
}
@if (tagsEditMode) {
<mat-icon
class="icon-size-5"
[svgIcon]="
'heroicons_solid:check'
"
></mat-icon>
}
</button>
</div>
<div
class="flex max-h-64 flex-col overflow-y-auto border-t py-2"
>
<!-- Tags -->
<ng-container *ngIf="!tagsEditMode">
<ng-container
*ngFor="
let tag of filteredTags;
trackBy: trackByFn
"
>
@if (!tagsEditMode) {
@for (
tag of filteredTags;
track trackByFn($index, tag)
) {
<div
class="flex h-10 min-h-10 cursor-pointer items-center pl-1 pr-4 hover:bg-hover"
(click)="
@ -513,17 +510,15 @@
</mat-checkbox>
<div>{{ tag.title }}</div>
</div>
</ng-container>
</ng-container>
}
}
<!-- Tags editing -->
<ng-container *ngIf="tagsEditMode">
@if (tagsEditMode) {
<div class="space-y-2 py-2">
<ng-container
*ngFor="
let tag of filteredTags;
trackBy: trackByFn
"
>
@for (
tag of filteredTags;
track trackByFn($index, tag)
) {
<div
class="flex items-center"
>
@ -563,36 +558,39 @@
</button>
</mat-form-field>
</div>
</ng-container>
}
</div>
</ng-container>
}
<!-- Create tag -->
<div
class="-ml-0.5 flex h-10 min-h-10 cursor-pointer items-center pl-4 pr-3 leading-none 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'
@if (
shouldShowCreateTagButton(
newTagInput.value
)
) {
<div
class="-ml-0.5 flex h-10 min-h-10 cursor-pointer items-center pl-4 pr-3 leading-none hover:bg-hover"
(click)="
createTag(
newTagInput.value
);
newTagInput.value = ''
"
></mat-icon>
<div class="break-all">
Create "<b>{{
newTagInput.value
}}</b
>"
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>
</div>
</ng-template>
@ -642,25 +640,21 @@
<!-- 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
"
>
@for (
email of contactForm.get('emails')['controls'];
track trackByFn(i, email);
let i = $index;
let first = $first;
let last = $last
) {
<div class="flex">
<mat-form-field
class="flex-auto"
[subscriptSizing]="'dynamic'"
>
<mat-label *ngIf="first"
>Email</mat-label
>
@if (first) {
<mat-label>Email</mat-label>
}
<mat-icon
matPrefix
class="hidden icon-size-5 sm:flex"
@ -679,9 +673,9 @@
class="ml-2 w-full max-w-24 flex-auto sm:ml-4 sm:max-w-40"
[subscriptSizing]="'dynamic'"
>
<mat-label *ngIf="first"
>Label</mat-label
>
@if (first) {
<mat-label>Label</mat-label>
}
<mat-icon
matPrefix
class="hidden icon-size-5 sm:flex"
@ -694,7 +688,7 @@
/>
</mat-form-field>
<!-- Remove email -->
<ng-container *ngIf="!(first && last)">
@if (!(first && last)) {
<div
class="flex w-10 items-center pl-2"
[ngClass]="{ 'mt-6': first }"
@ -713,9 +707,9 @@
></mat-icon>
</button>
</div>
</ng-container>
}
</div>
</ng-container>
}
</div>
<div
class="group -ml-4 mt-2 inline-flex cursor-pointer items-center rounded px-4 py-2"
@ -735,25 +729,23 @@
<!-- 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
"
>
@for (
phoneNumber of contactForm.get('phoneNumbers')[
'controls'
];
track trackByFn(i, phoneNumber);
let i = $index;
let first = $first;
let last = $last
) {
<div class="relative flex">
<mat-form-field
class="flex-auto"
[subscriptSizing]="'dynamic'"
>
<mat-label *ngIf="first"
>Phone</mat-label
>
@if (first) {
<mat-label>Phone</mat-label>
}
<input
matInput
[formControl]="
@ -798,12 +790,10 @@
>
</span>
</mat-select-trigger>
<ng-container
*ngFor="
let country of countries;
trackBy: trackByFn
"
>
@for (
country of countries;
track trackByFn($index, country)
) {
<mat-option
[value]="country.iso"
>
@ -833,16 +823,16 @@
>
</span>
</mat-option>
</ng-container>
}
</mat-select>
</mat-form-field>
<mat-form-field
class="ml-2 w-full max-w-24 flex-auto sm:ml-4 sm:max-w-40"
[subscriptSizing]="'dynamic'"
>
<mat-label *ngIf="first"
>Label</mat-label
>
@if (first) {
<mat-label>Label</mat-label>
}
<mat-icon
matPrefix
class="hidden icon-size-5 sm:flex"
@ -857,7 +847,7 @@
/>
</mat-form-field>
<!-- Remove phone number -->
<ng-container *ngIf="!(first && last)">
@if (!(first && last)) {
<div
class="flex w-10 items-center pl-2"
[ngClass]="{ 'mt-6': first }"
@ -878,9 +868,9 @@
></mat-icon>
</button>
</div>
</ng-container>
}
</div>
</ng-container>
}
</div>
<div
class="group -ml-4 mt-2 inline-flex cursor-pointer items-center rounded px-4 py-2"
@ -1006,5 +996,5 @@
</form>
</div>
</div>
</ng-container>
}
</div>

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

@ -1,7 +1,7 @@
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
import { TextFieldModule } from '@angular/cdk/text-field';
import { DatePipe, NgClass, NgFor, NgIf } from '@angular/common';
import { DatePipe, NgClass } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
@ -52,12 +52,10 @@ import { Subject, debounceTime, takeUntil } from 'rxjs';
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [
NgIf,
MatButtonModule,
MatTooltipModule,
RouterLink,
MatIconModule,
NgFor,
FormsModule,
ReactiveFormsModule,
MatRippleModule,

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

@ -30,16 +30,16 @@
Contacts
</div>
<div class="text-secondary ml-0.5 font-medium">
<ng-container *ngIf="contactsCount > 0">
@if (contactsCount > 0) {
{{ contactsCount }}
</ng-container>
}
{{
contactsCount
| i18nPlural
: {
'=0': 'No contacts',
'=1': 'contact',
other: 'contacts'
other: 'contacts',
}
}}
</div>
@ -85,29 +85,25 @@
<!-- 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
"
>
@if (contacts$ | async; as contacts) {
@if (contacts.length) {
@for (
contact of contacts;
track trackByFn(i, contact);
let i = $index
) {
<!-- Group -->
<ng-container
*ngIf="
i === 0 ||
contact.name.charAt(0) !==
contacts[i - 1].name.charAt(0)
"
>
@if (
i === 0 ||
contact.name.charAt(0) !==
contacts[i - 1].name.charAt(0)
) {
<div
class="text-secondary sticky top-0 z-10 -mt-px border-b border-t bg-gray-50 px-6 py-1 font-medium uppercase dark:bg-gray-900 md:px-8"
>
{{ contact.name.charAt(0) }}
</div>
</ng-container>
}
<!-- Contact -->
<a
class="z-20 flex cursor-pointer items-center border-b px-6 py-4 md:px-8"
@ -117,27 +113,27 @@
selectedContact.id !== contact.id,
'bg-primary-50 dark:bg-hover':
selectedContact &&
selectedContact.id === contact.id
selectedContact.id === contact.id,
}"
[routerLink]="['./', contact.id]"
>
<div
class="flex h-10 w-10 flex-0 items-center justify-center overflow-hidden rounded-full"
>
<ng-container *ngIf="contact.avatar">
@if (contact.avatar) {
<img
class="h-full w-full object-cover"
[src]="contact.avatar"
alt="Contact avatar"
/>
</ng-container>
<ng-container *ngIf="!contact.avatar">
}
@if (!contact.avatar) {
<div
class="flex h-full w-full items-center justify-center rounded-full bg-gray-200 text-lg uppercase text-gray-600 dark:bg-gray-700 dark:text-gray-200"
>
{{ contact.name.charAt(0) }}
</div>
</ng-container>
}
</div>
<div class="ml-4 min-w-0">
<div
@ -152,18 +148,17 @@
</div>
</div>
</a>
</ng-container>
</ng-container>
</ng-container>
}
} @else {
<div
class="border-t p-8 text-center text-4xl font-semibold tracking-tight sm:p-16"
>
There are no contacts!
</div>
}
}
<!-- No contacts -->
<ng-template #noContacts>
<div
class="border-t p-8 text-center text-4xl font-semibold tracking-tight sm:p-16"
>
There are no contacts!
</div>
</ng-template>
</div>
</div>
</mat-drawer-content>

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

@ -1,11 +1,4 @@
import {
AsyncPipe,
DOCUMENT,
I18nPluralPipe,
NgClass,
NgFor,
NgIf,
} from '@angular/common';
import { AsyncPipe, DOCUMENT, I18nPluralPipe, NgClass } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
@ -56,14 +49,12 @@ import {
imports: [
MatSidenavModule,
RouterOutlet,
NgIf,
MatFormFieldModule,
MatIconModule,
MatInputModule,
FormsModule,
ReactiveFormsModule,
MatButtonModule,
NgFor,
NgClass,
RouterLink,
AsyncPipe,

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

@ -6,9 +6,11 @@
class="relative flex flex-0 flex-col border-b px-6 py-8 sm:flex-row sm:items-center sm:justify-between md:px-8"
>
<!-- Loader -->
<div class="absolute inset-x-0 bottom-0" *ngIf="isLoading">
<mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
</div>
@if (isLoading) {
<div class="absolute inset-x-0 bottom-0">
<mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
</div>
}
<!-- Title -->
<div class="text-4xl font-extrabold tracking-tight">Inventory</div>
<!-- Actions -->
@ -49,8 +51,8 @@
<div
class="flex flex-auto flex-col overflow-hidden sm:mb-18 sm:overflow-y-auto"
>
<ng-container *ngIf="products$ | async as products">
<ng-container *ngIf="products.length > 0; else noProducts">
@if (products$ | async; as products) {
@if (products.length > 0) {
<div class="grid">
<!-- Header -->
<div
@ -87,13 +89,11 @@
<div class="hidden sm:block">Details</div>
</div>
<!-- Rows -->
<ng-container *ngIf="products$ | async as products">
<ng-container
*ngFor="
let product of products;
trackBy: trackByFn
"
>
@if (products$ | async; as products) {
@for (
product of products;
track trackByFn($index, product)
) {
<div
class="inventory-grid grid items-center gap-4 border-b px-6 py-3 md:px-8"
>
@ -102,20 +102,22 @@
<div
class="relative mr-6 flex h-12 w-12 flex-0 items-center justify-center overflow-hidden rounded border"
>
<img
class="w-8"
*ngIf="product.thumbnail"
[alt]="
'Product thumbnail image'
"
[src]="product.thumbnail"
/>
<div
class="flex h-full w-full items-center justify-center text-center text-xs font-semibold uppercase leading-none"
*ngIf="!product.thumbnail"
>
NO THUMB
</div>
@if (product.thumbnail) {
<img
class="w-8"
[alt]="
'Product thumbnail image'
"
[src]="product.thumbnail"
/>
}
@if (!product.thumbnail) {
<div
class="flex h-full w-full items-center justify-center text-center text-xs font-semibold uppercase leading-none"
>
NO THUMB
</div>
}
</div>
</div>
@ -146,55 +148,58 @@
{{ product.stock }}
</div>
<!-- Low stock -->
<div
class="ml-2 flex h-4 w-1 items-end overflow-hidden rounded bg-red-200"
*ngIf="product.stock < 20"
>
@if (product.stock < 20) {
<div
class="flex h-1/3 w-full bg-red-600"
></div>
</div>
class="ml-2 flex h-4 w-1 items-end overflow-hidden rounded bg-red-200"
>
<div
class="flex h-1/3 w-full bg-red-600"
></div>
</div>
}
<!-- Medium stock -->
<div
class="ml-2 flex h-4 w-1 items-end overflow-hidden rounded bg-orange-200"
*ngIf="
product.stock >= 20 &&
product.stock < 30
"
>
@if (
product.stock >= 20 &&
product.stock < 30
) {
<div
class="flex h-2/4 w-full bg-orange-400"
></div>
</div>
class="ml-2 flex h-4 w-1 items-end overflow-hidden rounded bg-orange-200"
>
<div
class="flex h-2/4 w-full bg-orange-400"
></div>
</div>
}
<!-- High stock -->
<div
class="ml-2 flex h-4 w-1 items-end overflow-hidden rounded bg-green-100"
*ngIf="product.stock >= 30"
>
@if (product.stock >= 30) {
<div
class="flex h-full w-full bg-green-400"
></div>
</div>
class="ml-2 flex h-4 w-1 items-end overflow-hidden rounded bg-green-100"
>
<div
class="flex h-full w-full bg-green-400"
></div>
</div>
}
</div>
<!-- Active -->
<div class="hidden lg:block">
<ng-container *ngIf="product.active">
@if (product.active) {
<mat-icon
class="text-green-400 icon-size-5"
[svgIcon]="
'heroicons_solid:check'
"
></mat-icon>
</ng-container>
<ng-container *ngIf="!product.active">
}
@if (!product.active) {
<mat-icon
class="text-gray-400 icon-size-5"
[svgIcon]="
'heroicons_solid:x-mark'
"
></mat-icon>
</ng-container>
}
</div>
<!-- Details button -->
@ -217,21 +222,17 @@
</div>
</div>
<div class="grid">
<ng-container
*ngIf="
selectedProduct?.id === product.id
"
>
@if (selectedProduct?.id === product.id) {
<ng-container
*ngTemplateOutlet="
rowDetailsTemplate;
context: { $implicit: product }
"
></ng-container>
</ng-container>
}
</div>
</ng-container>
</ng-container>
}
}
</div>
<mat-paginator
@ -243,8 +244,14 @@
[pageSizeOptions]="[5, 10, 25, 100]"
[showFirstLastButtons]="true"
></mat-paginator>
</ng-container>
</ng-container>
} @else {
<div
class="border-t p-8 text-center text-4xl font-semibold tracking-tight sm:p-16"
>
There are no products!
</div>
}
}
<ng-template #rowDetailsTemplate let-product>
<div class="overflow-hidden shadow-lg">
@ -263,14 +270,11 @@
<div
class="h-44 w-32 overflow-hidden rounded border"
>
<ng-container
*ngIf="
selectedProductForm.get(
'images'
).value.length;
else noImage
"
>
@if (
selectedProductForm.get(
'images'
).value.length
) {
<img
class="h-full w-full object-cover"
[src]="
@ -283,58 +287,57 @@
]
"
/>
</ng-container>
<ng-template #noImage>
} @else {
<span
class="flex min-h-20 items-center text-lg font-semibold"
>NO IMAGE</span
>
</ng-template>
}
</div>
<div
class="mt-2 flex items-center whitespace-nowrap"
*ngIf="
selectedProductForm.get(
'images'
).value.length
"
>
<button
mat-icon-button
(click)="cycleImages(false)"
@if (
selectedProductForm.get('images')
.value.length
) {
<div
class="mt-2 flex items-center whitespace-nowrap"
>
<mat-icon
class="icon-size-5"
[svgIcon]="
'heroicons_mini:arrow-long-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_mini:arrow-long-right'
"
></mat-icon>
</button>
</div>
<button
mat-icon-button
(click)="cycleImages(false)"
>
<mat-icon
class="icon-size-5"
[svgIcon]="
'heroicons_mini:arrow-long-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_mini:arrow-long-right'
"
></mat-icon>
</button>
</div>
}
</div>
<div class="mt-8 flex flex-col">
<span class="mb-2 font-semibold"
@ -398,11 +401,10 @@
'category'
"
>
<ng-container
*ngFor="
let category of categories
"
>
@for (
category of categories;
track category
) {
<mat-option
[value]="
category.id
@ -410,7 +412,7 @@
>
{{ category.name }}
</mat-option>
</ng-container>
}
</mat-select>
</mat-form-field>
<mat-form-field class="w-1/3 px-2">
@ -418,17 +420,16 @@
<mat-select
[formControlName]="'brand'"
>
<ng-container
*ngFor="
let brand of brands
"
>
@for (
brand of brands;
track brand
) {
<mat-option
[value]="brand.id"
>
{{ brand.name }}
</mat-option>
</ng-container>
}
</mat-select>
</mat-form-field>
<mat-form-field class="w-1/3 pl-2">
@ -436,17 +437,16 @@
<mat-select
[formControlName]="'vendor'"
>
<ng-container
*ngFor="
let vendor of vendors
"
>
@for (
vendor of vendors;
track vendor
) {
<mat-option
[value]="vendor.id"
>
{{ vendor.name }}
</mat-option>
</ng-container>
}
</mat-select>
</mat-form-field>
</div>
@ -570,20 +570,22 @@
toggleTagsEditMode()
"
>
<mat-icon
*ngIf="!tagsEditMode"
class="icon-size-5"
[svgIcon]="
'heroicons_solid:pencil-square'
"
></mat-icon>
<mat-icon
*ngIf="tagsEditMode"
class="icon-size-5"
[svgIcon]="
'heroicons_solid:check'
"
></mat-icon>
@if (!tagsEditMode) {
<mat-icon
class="icon-size-5"
[svgIcon]="
'heroicons_solid:pencil-square'
"
></mat-icon>
}
@if (tagsEditMode) {
<mat-icon
class="icon-size-5"
[svgIcon]="
'heroicons_solid:check'
"
></mat-icon>
}
</button>
</div>
<!-- Available tags -->
@ -591,15 +593,14 @@
class="h-44 overflow-y-auto border-t border-gray-300 leading-none dark:border-gray-500"
>
<!-- Tags -->
<ng-container
*ngIf="!tagsEditMode"
>
<ng-container
*ngFor="
let tag of filteredTags;
trackBy: trackByFn
"
>
@if (!tagsEditMode) {
@for (
tag of filteredTags;
track trackByFn(
$index,
tag
)
) {
<mat-checkbox
class="flex h-10 min-h-10 items-center pl-1 pr-4"
[color]="'primary'"
@ -617,19 +618,18 @@
>
{{ tag.title }}
</mat-checkbox>
</ng-container>
</ng-container>
}
}
<!-- Tags editing -->
<ng-container
*ngIf="tagsEditMode"
>
@if (tagsEditMode) {
<div class="space-y-2 p-4">
<ng-container
*ngFor="
let tag of filteredTags;
trackBy: trackByFn
"
>
@for (
tag of filteredTags;
track trackByFn(
$index,
tag
)
) {
<mat-form-field
class="fuse-mat-dense w-full"
[subscriptSizing]="
@ -665,37 +665,39 @@
></mat-icon>
</button>
</mat-form-field>
</ng-container>
}
</div>
</ng-container>
<div
class="-ml-0.5 flex h-10 min-h-10 cursor-pointer items-center border-t pl-4 pr-3 leading-none dark:hover:bg-hover hover:bg-gray-50"
*ngIf="
shouldShowCreateTagButton(
newTagInput.value
)
"
(click)="
createTag(
newTagInput.value
);
newTagInput.value = ''
"
matRipple
>
<mat-icon
class="mr-2 icon-size-5"
[svgIcon]="
'heroicons_solid:plus-circle'
}
@if (
shouldShowCreateTagButton(
newTagInput.value
)
) {
<div
class="-ml-0.5 flex h-10 min-h-10 cursor-pointer items-center border-t pl-4 pr-3 leading-none dark:hover:bg-hover hover:bg-gray-50"
(click)="
createTag(
newTagInput.value
);
newTagInput.value =
''
"
></mat-icon>
<div class="break-all">
Create "<b>{{
newTagInput.value
}}</b
>"
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>
</div>
</div>
@ -714,38 +716,33 @@
Delete
</button>
<div class="flex items-center">
<div
class="mr-4 flex items-center"
*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-mark'
"
></mat-icon>
<span class="ml-2"
>An error occurred, try
again!</span
>
</ng-container>
</div>
@if (flashMessage) {
<div class="mr-4 flex items-center">
@if (flashMessage === 'success') {
<mat-icon
class="text-green-500"
[svgIcon]="
'heroicons_outline:check'
"
></mat-icon>
<span class="ml-2"
>Product updated</span
>
}
@if (flashMessage === 'error') {
<mat-icon
class="text-red-500"
[svgIcon]="
'heroicons_outline:x-mark'
"
></mat-icon>
<span class="ml-2"
>An error occurred, try
again!</span
>
}
</div>
}
<button
mat-flat-button
[color]="'primary'"
@ -759,14 +756,6 @@
</div>
</div>
</ng-template>
<ng-template #noProducts>
<div
class="border-t p-8 text-center text-4xl font-semibold tracking-tight sm:p-16"
>
There are no products!
</div>
</ng-template>
</div>
</div>
</div>

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

@ -2,8 +2,6 @@ import {
AsyncPipe,
CurrencyPipe,
NgClass,
NgFor,
NgIf,
NgTemplateOutlet,
} from '@angular/common';
import {
@ -87,7 +85,6 @@ import {
animations: fuseAnimations,
standalone: true,
imports: [
NgIf,
MatProgressBarModule,
MatFormFieldModule,
MatIconModule,
@ -96,7 +93,6 @@ import {
ReactiveFormsModule,
MatButtonModule,
MatSortModule,
NgFor,
NgTemplateOutlet,
MatPaginatorModule,
NgClass,

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

@ -11,18 +11,18 @@
<div
class="flex h-full items-center justify-center rounded-lg border bg-gray-50 dark:bg-card"
>
<ng-container *ngIf="item.type === 'folder'">
@if (item.type === 'folder') {
<mat-icon
class="text-hint icon-size-24"
[svgIcon]="'heroicons_outline:folder'"
></mat-icon>
</ng-container>
<ng-container *ngIf="item.type !== 'folder'">
}
@if (item.type !== 'folder') {
<mat-icon
class="text-hint icon-size-24"
[svgIcon]="'heroicons_outline:document'"
></mat-icon>
</ng-container>
}
</div>
</div>
@ -61,12 +61,12 @@
<div class="text-secondary">Size</div>
<div>{{ item.size }}</div>
</div>
<ng-container *ngIf="item.contents">
@if (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 -->
@ -81,14 +81,14 @@
</div>
<div class="mt-2 flex border-t">
<div class="py-3">
<ng-container *ngIf="item.description">
@if (item.description) {
<div>{{ item.description }}</div>
</ng-container>
<ng-container *ngIf="!item.description">
}
@if (!item.description) {
<div class="text-secondary italic">
Click here to add a description
</div>
</ng-container>
}
</div>
</div>

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

@ -1,4 +1,3 @@
import { NgIf } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
@ -22,7 +21,7 @@ import { Subject, takeUntil } from 'rxjs';
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [MatButtonModule, RouterLink, MatIconModule, NgIf],
imports: [MatButtonModule, RouterLink, MatIconModule],
})
export class FileManagerDetailsComponent implements OnInit, OnDestroy {
item: Item;

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

@ -34,12 +34,12 @@
<div
class="text-secondary mt-0.5 flex items-center font-medium"
>
<ng-container *ngIf="!items.path.length">
@if (!items.path.length) {
{{ items.folders.length }} folders,
{{ items.files.length }} files
</ng-container>
}
<!-- Breadcrumbs -->
<ng-container *ngIf="items.path.length">
@if (items.path.length) {
<div class="flex items-center space-x-2">
<a
class="cursor-pointer text-primary"
@ -47,32 +47,30 @@
>Home
</a>
<div class="">/</div>
<ng-container
*ngFor="
let path of items.path;
let last = last;
trackBy: trackByFn
"
>
<ng-container *ngIf="!last">
@for (
path of items.path;
track trackByFn($index, path);
let last = $last
) {
@if (!last) {
<a
class="cursor-pointer text-primary"
[routerLink]="[
'/apps/file-manager/folders/',
path.id
path.id,
]"
>{{ path.name }}</a
>
</ng-container>
<ng-container *ngIf="last">
}
@if (last) {
<div>{{ path.name }}</div>
</ng-container>
<ng-container *ngIf="!last">
}
@if (!last) {
<div class="">/</div>
</ng-container>
</ng-container>
}
}
</div>
</ng-container>
}
</div>
</div>
<!-- Actions -->
@ -88,26 +86,20 @@
</div>
<!-- Items list -->
<ng-container
*ngIf="
items &&
(items.folders.length > 0 ||
items.files.length > 0);
else noItems
"
>
@if (
items &&
(items.folders.length > 0 || items.files.length > 0)
) {
<div class="space-y-8 p-6 md:p-8">
<!-- Folders -->
<ng-container *ngIf="items.folders.length > 0">
@if (items.folders.length > 0) {
<div>
<div class="font-medium">Folders</div>
<div class="-m-2 mt-2 flex flex-wrap">
<ng-container
*ngFor="
let folder of items.folders;
trackBy: trackByFn
"
>
@for (
folder of items.folders;
track trackByFn($index, folder)
) {
<div
class="bg-card relative m-2 h-40 w-40 rounded-2xl p-4 shadow"
>
@ -118,7 +110,7 @@
"
[routerLink]="[
'./details/',
folder.id
folder.id,
]"
mat-icon-button
>
@ -133,7 +125,7 @@
class="absolute inset-0 z-10 flex cursor-pointer flex-col p-4"
[routerLink]="[
'/apps/file-manager/folders/',
folder.id
folder.id,
]"
>
<div class="aspect-[9/6]">
@ -160,9 +152,7 @@
>
{{ folder.name }}
</div>
<ng-container
*ngIf="folder.contents"
>
@if (folder.contents) {
<div
class="text-secondary truncate"
>
@ -170,31 +160,29 @@
folder.contents
}}
</div>
</ng-container>
}
</div>
</a>
</div>
</ng-container>
}
</div>
</div>
</ng-container>
}
<!-- Files -->
<ng-container *ngIf="items.files.length > 0">
@if (items.files.length > 0) {
<div>
<div class="font-medium">Files</div>
<div class="-m-2 mt-2 flex flex-wrap">
<ng-container
*ngFor="
let file of items.files;
trackBy: trackByFn
"
>
@for (
file of items.files;
track trackByFn($index, file)
) {
<a
class="bg-card m-2 flex h-40 w-40 cursor-pointer flex-col rounded-2xl p-4 shadow"
[routerLink]="[
'./details/',
file.id
file.id,
]"
>
<div class="aspect-[9/6]">
@ -248,26 +236,21 @@
>
{{ file.name }}
</div>
<ng-container
*ngIf="file.contents"
>
@if (file.contents) {
<div
class="text-secondary truncate"
>
{{ file.contents }}
</div>
</ng-container>
}
</div>
</a>
</ng-container>
}
</div>
</div>
</ng-container>
}
</div>
</ng-container>
<!-- No items template -->
<ng-template #noItems>
} @else {
<div
class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent"
>
@ -281,7 +264,9 @@
There are no items!
</div>
</div>
</ng-template>
}
<!-- No items template -->
</div>
</mat-drawer-content>
</mat-drawer-container>

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

@ -1,4 +1,3 @@
import { NgFor, NgIf } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
@ -35,9 +34,7 @@ import { Subject, takeUntil } from 'rxjs';
imports: [
MatSidenavModule,
RouterOutlet,
NgIf,
RouterLink,
NgFor,
MatButtonModule,
MatIconModule,
MatTooltipModule,

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

@ -15,18 +15,20 @@
>
Frequently Asked Questions
</div>
<ng-container
*ngFor="let faqCategory of faqCategories; trackBy: trackByFn"
>
@for (
faqCategory of faqCategories;
track trackByFn($index, faqCategory)
) {
<div
class="mt-12 text-3xl font-bold leading-tight tracking-tight sm:mt-16"
>
{{ faqCategory.title }}
</div>
<mat-accordion class="mt-8 max-w-4xl">
<ng-container
*ngFor="let faq of faqCategory.faqs; trackBy: trackByFn"
>
@for (
faq of faqCategory.faqs;
track trackByFn($index, faq)
) {
<mat-expansion-panel>
<mat-expansion-panel-header
[collapsedHeight]="'56px'"
@ -38,9 +40,9 @@
</mat-expansion-panel-header>
{{ faq.answer }}
</mat-expansion-panel>
</ng-container>
}
</mat-accordion>
</ng-container>
}
</div>
</div>
</div>

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

@ -1,4 +1,3 @@
import { NgFor } from '@angular/common';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatExpansionModule } from '@angular/material/expansion';
@ -13,13 +12,7 @@ import { Subject, takeUntil } from 'rxjs';
templateUrl: './faqs.component.html',
encapsulation: ViewEncapsulation.None,
standalone: true,
imports: [
MatButtonModule,
RouterLink,
MatIconModule,
NgFor,
MatExpansionModule,
],
imports: [MatButtonModule, RouterLink, MatIconModule, MatExpansionModule],
})
export class HelpCenterFaqsComponent implements OnInit, OnDestroy {
faqCategories: FaqCategory[];

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

@ -17,19 +17,17 @@
</div>
<!-- Guides -->
<div class="mt-8 flex flex-col items-start space-y-2 sm:mt-12">
<ng-container
*ngFor="
let guide of guideCategory.guides;
trackBy: trackByFn
"
>
@for (
guide of guideCategory.guides;
track trackByFn($index, guide)
) {
<a
class="font-medium text-primary-500 hover:underline"
[routerLink]="[guide.slug]"
>
{{ guide.title }}
</a>
</ng-container>
}
</div>
</div>
</div>

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

@ -1,4 +1,3 @@
import { NgFor } from '@angular/common';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@ -12,7 +11,7 @@ import { Subject, takeUntil } from 'rxjs';
templateUrl: './category.component.html',
encapsulation: ViewEncapsulation.None,
standalone: true,
imports: [MatButtonModule, RouterLink, MatIconModule, NgFor],
imports: [MatButtonModule, RouterLink, MatIconModule],
})
export class HelpCenterGuidesCategoryComponent implements OnInit, OnDestroy {
guideCategory: GuideCategory;

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

@ -19,12 +19,10 @@
<div
class="mt-8 grid grid-flow-row grid-cols-1 gap-y-12 sm:mt-12 sm:grid-cols-2 sm:gap-x-4"
>
<ng-container
*ngFor="
let guideCategory of guideCategories;
trackBy: trackByFn
"
>
@for (
guideCategory of guideCategories;
track trackByFn($index, guideCategory)
) {
<div class="flex flex-col items-start">
<a
class="mb-1 flex items-center text-2xl font-semibold"
@ -32,37 +30,38 @@
>
{{ guideCategory.title }}
</a>
<ng-container
*ngFor="
let guide of guideCategory.guides;
trackBy: trackByFn
"
>
@for (
guide of guideCategory.guides;
track trackByFn($index, guide)
) {
<a
class="mt-3 font-medium text-primary-500 hover:underline"
[routerLink]="[guideCategory.slug, guide.slug]"
>
{{ guide.title }}
</a>
</ng-container>
<a
class="mt-5 flex cursor-pointer items-center rounded-full bg-gray-200 py-0.5 pl-4 pr-3 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700"
*ngIf="
guideCategory.totalGuides >
guideCategory.visibleGuides
"
[routerLink]="guideCategory.slug"
>
<span class="text-secondary text-sm font-medium"
>View All</span
}
@if (
guideCategory.totalGuides >
guideCategory.visibleGuides
) {
<a
class="mt-5 flex cursor-pointer items-center rounded-full bg-gray-200 py-0.5 pl-4 pr-3 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700"
[routerLink]="guideCategory.slug"
>
<mat-icon
class="ml-2 icon-size-5"
[svgIcon]="'heroicons_mini:arrow-long-right'"
></mat-icon>
</a>
<span class="text-secondary text-sm font-medium"
>View All</span
>
<mat-icon
class="ml-2 icon-size-5"
[svgIcon]="
'heroicons_mini:arrow-long-right'
"
></mat-icon>
</a>
}
</div>
</ng-container>
}
</div>
</div>
</div>

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

@ -1,4 +1,3 @@
import { NgFor, NgIf } from '@angular/common';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@ -12,7 +11,7 @@ import { Subject, takeUntil } from 'rxjs';
templateUrl: './guides.component.html',
encapsulation: ViewEncapsulation.None,
standalone: true,
imports: [MatButtonModule, RouterLink, MatIconModule, NgFor, NgIf],
imports: [MatButtonModule, RouterLink, MatIconModule],
})
export class HelpCenterGuidesComponent implements OnInit, OnDestroy {
guideCategories: GuideCategory[];

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

@ -134,16 +134,14 @@
getting started
</div>
<mat-accordion class="mt-12 max-w-4xl">
<ng-container
*ngFor="let faq of faqCategory.faqs; trackBy: trackByFn"
>
@for (faq of faqCategory.faqs; track trackByFn($index, faq)) {
<mat-expansion-panel>
<mat-expansion-panel-header [collapsedHeight]="'56px'">
<mat-panel-title>{{ faq.question }}</mat-panel-title>
</mat-expansion-panel-header>
{{ faq.answer }}
</mat-expansion-panel>
</ng-container>
}
</mat-accordion>
</div>
</div>

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

@ -1,4 +1,3 @@
import { NgFor } from '@angular/common';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
@ -20,7 +19,6 @@ import { Subject, takeUntil } from 'rxjs';
MatIconModule,
RouterLink,
MatExpansionModule,
NgFor,
],
})
export class HelpCenterComponent implements OnInit, OnDestroy {

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

@ -20,14 +20,15 @@
class="bg-card mt-8 rounded-2xl p-6 pb-7 shadow sm:mt-12 sm:p-10 sm:pb-7"
>
<!-- Alert -->
<fuse-alert
class="mb-8"
*ngIf="alert"
[type]="alert.type"
[showIcon]="false"
>
{{ alert.message }}
</fuse-alert>
@if (alert) {
<fuse-alert
class="mb-8"
[type]="alert.type"
[showIcon]="false"
>
{{ alert.message }}
</fuse-alert>
}
<form
class="space-y-3"
[formGroup]="supportForm"
@ -50,11 +51,9 @@
[required]="true"
/>
<mat-label>Name</mat-label>
<mat-error
*ngIf="supportForm.get('name').hasError('required')"
>
Required
</mat-error>
@if (supportForm.get('name').hasError('required')) {
<mat-error> Required </mat-error>
}
</mat-form-field>
<!-- Email -->
<mat-form-field class="w-full">
@ -65,18 +64,12 @@
[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>
@if (supportForm.get('email').hasError('required')) {
<mat-error> Required </mat-error>
}
@if (supportForm.get('email').hasError('email')) {
<mat-error> Enter a valid email address </mat-error>
}
</mat-form-field>
<!-- Subject -->
<mat-form-field class="w-full">
@ -86,13 +79,9 @@
[required]="true"
/>
<mat-label>Subject</mat-label>
<mat-error
*ngIf="
supportForm.get('subject').hasError('required')
"
>
Required
</mat-error>
@if (supportForm.get('subject').hasError('required')) {
<mat-error> Required </mat-error>
}
</mat-form-field>
<!-- Message -->
<mat-form-field class="w-full">
@ -104,13 +93,9 @@
cdkTextareaAutosize
></textarea>
<mat-label>Message</mat-label>
<mat-error
*ngIf="
supportForm.get('message').hasError('required')
"
>
Required
</mat-error>
@if (supportForm.get('message').hasError('required')) {
<mat-error> Required </mat-error>
}
</mat-form-field>
<!-- Actions -->
<div class="flex items-center justify-end">

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

@ -1,5 +1,5 @@
import { TextFieldModule } from '@angular/cdk/text-field';
import { NgIf } from '@angular/common';
import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import {
FormsModule,
@ -28,7 +28,6 @@ import { HelpCenterService } from 'app/modules/admin/apps/help-center/help-cente
MatButtonModule,
RouterLink,
MatIconModule,
NgIf,
FuseAlertComponent,
FormsModule,
ReactiveFormsModule,

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

@ -22,34 +22,40 @@
<mat-label>To</mat-label>
<input matInput [formControlName]="'to'" />
<div class="copy-fields-toggles" matSuffix>
<span
class="cursor-pointer select-none text-sm font-medium hover:underline"
*ngIf="!copyFields.cc"
(click)="showCopyField('cc')"
>
Cc
</span>
<span
class="ml-2 cursor-pointer select-none text-sm font-medium hover:underline"
*ngIf="!copyFields.bcc"
(click)="showCopyField('bcc')"
>
Bcc
</span>
@if (!copyFields.cc) {
<span
class="cursor-pointer select-none text-sm font-medium hover:underline"
(click)="showCopyField('cc')"
>
Cc
</span>
}
@if (!copyFields.bcc) {
<span
class="ml-2 cursor-pointer select-none text-sm font-medium hover:underline"
(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>
@if (copyFields.cc) {
<mat-form-field>
<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>
@if (copyFields.bcc) {
<mat-form-field>
<mat-label>Bcc</mat-label>
<input matInput [formControlName]="'bcc'" />
</mat-form-field>
}
<!-- Subject -->
<mat-form-field>

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

@ -1,4 +1,3 @@
import { NgIf } from '@angular/common';
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import {
FormsModule,
@ -26,7 +25,6 @@ import { QuillEditorComponent } from 'ngx-quill';
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
NgIf,
QuillEditorComponent,
],
})

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

@ -1,7 +1,7 @@
<div
class="bg-card flex flex-auto flex-col overflow-y-auto dark:bg-default lg:overflow-hidden"
>
<ng-container *ngIf="mail; else selectMailToRead">
@if (mail) {
<!-- Header -->
<div class="relative z-10 flex w-full flex-0 flex-col border-b">
<!-- Toolbar -->
@ -28,9 +28,7 @@
<mat-icon [svgIcon]="'heroicons_outline:tag'"></mat-icon>
</button>
<mat-menu #toggleLabelMenu="matMenu">
<ng-container
*ngFor="let label of labels; trackBy: trackByFn"
>
@for (label of labels; track trackByFn($index, label)) {
<div
mat-menu-item
(click)="toggleLabel(label)"
@ -45,7 +43,7 @@
{{ label.title }}
</mat-checkbox>
</div>
</ng-container>
}
</mat-menu>
<!-- Toggle important button -->
@ -56,7 +54,7 @@
>
<mat-icon
[ngClass]="{
'text-red-600 dark:text-red-500': mail.important
'text-red-600 dark:text-red-500': mail.important,
}"
[svgIcon]="'heroicons_outline:exclamation-circle'"
></mat-icon>
@ -66,7 +64,7 @@
<button class="ml-2" mat-icon-button (click)="toggleStar()">
<mat-icon
[ngClass]="{
'text-orange-500 dark:text-red-400': mail.starred
'text-orange-500 dark:text-red-400': mail.starred,
}"
[svgIcon]="'heroicons_outline:star'"
></mat-icon>
@ -84,61 +82,55 @@
</button>
<mat-menu #mailMenu="matMenu">
<!-- Mark as read / unread -->
<button
mat-menu-item
*ngIf="mail.unread"
(click)="toggleUnread(false)"
>
<mat-icon
[svgIcon]="'heroicons_outline:envelope-open'"
></mat-icon>
<span>Mark as read</span>
</button>
<button
mat-menu-item
*ngIf="!mail.unread"
(click)="toggleUnread(true)"
>
<mat-icon
[svgIcon]="'heroicons_outline:envelope'"
></mat-icon>
<span>Mark as unread</span>
</button>
@if (mail.unread) {
<button mat-menu-item (click)="toggleUnread(false)">
<mat-icon
[svgIcon]="'heroicons_outline:envelope-open'"
></mat-icon>
<span>Mark as read</span>
</button>
}
@if (!mail.unread) {
<button mat-menu-item (click)="toggleUnread(true)">
<mat-icon
[svgIcon]="'heroicons_outline:envelope'"
></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-triangle'"
></mat-icon>
<span>Spam</span>
</button>
<button
mat-menu-item
*ngIf="getCurrentFolder() === 'spam'"
(click)="moveToFolder('inbox')"
>
<mat-icon
[svgIcon]="'heroicons_outline:exclamation-triangle'"
></mat-icon>
<span>Not spam</span>
</button>
@if (
getCurrentFolder() !== 'spam' &&
getCurrentFolder() !== 'drafts'
) {
<button mat-menu-item (click)="moveToFolder('spam')">
<mat-icon
[svgIcon]="
'heroicons_outline:exclamation-triangle'
"
></mat-icon>
<span>Spam</span>
</button>
}
@if (getCurrentFolder() === 'spam') {
<button mat-menu-item (click)="moveToFolder('inbox')">
<mat-icon
[svgIcon]="
'heroicons_outline:exclamation-triangle'
"
></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>
@if (getCurrentFolder() !== 'trash') {
<button mat-menu-item (click)="moveToFolder('trash')">
<mat-icon
[svgIcon]="'heroicons_outline:trash'"
></mat-icon>
<span>Delete</span>
</button>
}
</mat-menu>
</div>
@ -149,25 +141,23 @@
{{ mail.subject }}
</div>
<!-- Labels -->
<ng-container *ngIf="mail.labels && mail.labels.length > 0">
@if (mail.labels && mail.labels.length > 0) {
<div
class="-mx-1 flex flex-wrap items-center justify-start"
>
<ng-container
*ngFor="
let label of mail.labels
| fuseFindByKey: 'id' : labels
"
>
@for (
label of mail.labels | fuseFindByKey: 'id' : labels;
track label
) {
<div
class="m-1 whitespace-nowrap rounded-full px-2.5 py-0.5 text-sm font-medium"
[ngClass]="labelColors[label.color].combined"
>
{{ label.title }}
</div>
</ng-container>
}
</div>
</ng-container>
}
</div>
</div>
@ -205,9 +195,7 @@
<div class="mt-0.5 flex items-center leading-5">
<div>to</div>
<div class="ml-1 font-semibold">me</div>
<ng-container
*ngIf="mail.ccCount + mail.bccCount > 0"
>
@if (mail.ccCount + mail.bccCount > 0) {
<div>
<span class="ml-1">and</span>
<span class="ml-1 font-semibold">{{
@ -227,7 +215,7 @@
>
</span>
</div>
</ng-container>
}
<!-- Info details panel button -->
<button
@ -276,7 +264,7 @@
</div>
</div>
<!-- Cc -->
<ng-container *ngIf="mail.cc">
@if (mail.cc) {
<div class="flex">
<div
class="min-w-14 text-right font-medium"
@ -289,9 +277,9 @@
{{ mail.cc.join(',\n') }}
</div>
</div>
</ng-container>
}
<!-- Bbc -->
<ng-container *ngIf="mail.bcc">
@if (mail.bcc) {
<div class="flex">
<div
class="min-w-14 text-right font-medium"
@ -304,7 +292,7 @@
{{ mail.bcc.join(',\n') }}
</div>
</div>
</ng-container>
}
<!-- Date -->
<div class="flex">
<div
@ -348,9 +336,7 @@
></div>
<!-- Attachments -->
<ng-container
*ngIf="mail.attachments && mail.attachments.length > 0"
>
@if (mail.attachments && mail.attachments.length > 0) {
<div class="flex w-full flex-col">
<!-- Title -->
<div class="mt-12 flex items-center">
@ -365,42 +351,43 @@
<!-- Files -->
<div class="-m-3 mt-3 flex flex-wrap">
<ng-container
*ngFor="let attachment of mail.attachments"
>
@for (
attachment of mail.attachments;
track attachment
) {
<div class="m-3 flex items-center">
<!-- Preview -->
<img
class="h-10 w-10 overflow-hidden rounded-md"
*ngIf="
attachment.type.startsWith(
'image/'
)
"
[src]="
'images/apps/mailbox/' +
attachment.preview
"
/>
<div
class="flex h-10 w-10 items-center justify-center overflow-hidden rounded-md bg-primary-100"
*ngIf="
attachment.type.startsWith(
'application/'
)
"
>
@if (
attachment.type.startsWith('image/')
) {
<img
class="h-10 w-10 overflow-hidden rounded-md"
[src]="
'images/apps/mailbox/' +
attachment.preview
"
/>
}
@if (
attachment.type.startsWith(
'application/'
)
) {
<div
class="text-primary-500-800 flex items-center justify-center text-sm font-semibold"
class="flex h-10 w-10 items-center justify-center overflow-hidden rounded-md bg-primary-100"
>
{{
attachment.type
.split('/')[1]
.trim()
.toUpperCase()
}}
<div
class="text-primary-500-800 flex items-center justify-center text-sm font-semibold"
>
{{
attachment.type
.split('/')[1]
.trim()
.toUpperCase()
}}
</div>
</div>
</div>
}
<!-- File info -->
<div class="ml-3">
<div
@ -421,10 +408,10 @@
</div>
</div>
</div>
</ng-container>
}
</div>
</div>
</ng-container>
}
</div>
<!-- Footer -->
@ -432,7 +419,7 @@
class="flex w-full border-t bg-gray-50 p-6 dark:bg-transparent"
>
<!-- Buttons -->
<ng-container *ngIf="!replyFormActive">
@if (!replyFormActive) {
<div class="-m-2 flex w-full flex-wrap">
<!-- Reply -->
<button
@ -481,10 +468,10 @@
<span class="ml-2">Forward</span>
</button>
</div>
</ng-container>
}
<!-- Reply form -->
<ng-container *ngIf="replyFormActive">
@if (replyFormActive) {
<div class="flex w-full flex-col" #replyForm>
<mat-form-field [subscriptSizing]="'dynamic'">
<textarea
@ -554,14 +541,11 @@
</div>
</div>
</div>
</ng-container>
}
</div>
</div>
</div>
</ng-container>
<!-- Select mail to read template -->
<ng-template #selectMailToRead>
} @else {
<div
class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent"
>
@ -575,5 +559,7 @@
Select a mail to read
</div>
</div>
</ng-template>
}
<!-- Select mail to read template -->
</div>

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

@ -4,8 +4,6 @@ import {
DatePipe,
DecimalPipe,
NgClass,
NgFor,
NgIf,
NgPlural,
NgPluralCase,
} from '@angular/common';
@ -44,12 +42,10 @@ import { Subject, takeUntil } from 'rxjs';
encapsulation: ViewEncapsulation.None,
standalone: true,
imports: [
NgIf,
MatButtonModule,
RouterLink,
MatIconModule,
MatMenuModule,
NgFor,
MatRippleModule,
MatCheckboxModule,
NgClass,

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

@ -1,6 +1,6 @@
<div class="bg-card relative flex w-full flex-auto dark:bg-transparent">
<!-- Mails list -->
<ng-container *ngIf="mails && mails.length > 0; else noMails">
@if (mails && mails.length > 0) {
<div
class="relative z-10 flex w-full min-w-0 flex-auto flex-col border-r lg:min-w-90 lg:max-w-90"
>
@ -43,7 +43,7 @@
'../' +
(pagination.currentPage > 1
? pagination.currentPage - 1
: 1)
: 1),
]"
>
<mat-icon
@ -62,7 +62,7 @@
'../' +
(pagination.currentPage < pagination.lastPage
? pagination.currentPage + 1
: pagination.lastPage)
: pagination.lastPage),
]"
>
<mat-icon
@ -73,23 +73,18 @@
</div>
<!-- Loading bar -->
<mat-progress-bar
class="absolute inset-x-0 bottom-0 h-0.5"
*ngIf="mailsLoading"
[mode]="'indeterminate'"
></mat-progress-bar>
@if (mailsLoading) {
<mat-progress-bar
class="absolute inset-x-0 bottom-0 h-0.5"
[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
"
>
@for (mail of mails; track trackByFn(i, mail); let i = $index) {
<!-- Item -->
<a
class="relative flex border-t hover:bg-hover first:border-0"
@ -102,7 +97,7 @@
[ngClass]="{
'border-primary': mail.unread,
'bg-primary-50 dark:bg-black dark:bg-opacity-5':
selectedMail && selectedMail.id === mail.id
selectedMail && selectedMail.id === mail.id,
}"
>
<!-- Info -->
@ -112,13 +107,14 @@
{{ mail.from.contact.split('<')[0].trim() }}
</div>
<!-- Important indicator -->
<mat-icon
class="mr-3 text-red-500 icon-size-4 dark:text-red-600"
*ngIf="mail.important"
[svgIcon]="
'heroicons_solid:exclamation-circle'
"
></mat-icon>
@if (mail.important) {
<mat-icon
class="mr-3 text-red-500 icon-size-4 dark:text-red-600"
[svgIcon]="
'heroicons_solid:exclamation-circle'
"
></mat-icon>
}
<!-- Date -->
<div
class="text-hint ml-auto whitespace-nowrap text-right text-md"
@ -133,30 +129,35 @@
mail.subject
}}</span>
<!-- Indicators -->
<div
class="ml-auto flex pl-2"
*ngIf="
(mail.attachments &&
mail.attachments.length > 0) ||
mail.starred
"
>
<!-- Attachments -->
<mat-icon
class="flex justify-center icon-size-4"
*ngIf="
@if (
(mail.attachments &&
mail.attachments.length > 0) ||
mail.starred
) {
<div class="ml-auto flex pl-2">
<!-- Attachments -->
@if (
mail.attachments &&
mail.attachments.length > 0
"
[svgIcon]="'heroicons_solid:paper-clip'"
></mat-icon>
<!-- Starred -->
<mat-icon
class="ml-1 flex justify-center text-orange-500 icon-size-4 dark:text-orange-400"
*ngIf="mail.starred"
[svgIcon]="'heroicons_solid:star'"
></mat-icon>
</div>
) {
<mat-icon
class="flex justify-center icon-size-4"
[svgIcon]="
'heroicons_solid:paper-clip'
"
></mat-icon>
}
<!-- Starred -->
@if (mail.starred) {
<mat-icon
class="ml-1 flex justify-center text-orange-500 icon-size-4 dark:text-orange-400"
[svgIcon]="
'heroicons_solid:star'
"
></mat-icon>
}
</div>
}
</div>
<!-- Excerpt -->
@ -167,13 +168,10 @@
</div>
</div>
</a>
</ng-container>
}
</div>
</div>
</ng-container>
<!-- No mails template -->
<ng-template #noMails>
} @else {
<div
class="z-100 absolute inset-0 flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent"
>
@ -187,19 +185,21 @@
There are no e-mails
</div>
</div>
</ng-template>
}
<!-- No mails template -->
<!-- Mail details -->
<ng-container *ngIf="mails && mails.length > 0">
@if (mails && mails.length > 0) {
<div
class="flex-auto"
[ngClass]="{
'absolute inset-0 z-20 flex lg:static lg:inset-auto':
selectedMail && selectedMail.id,
'hidden lg:flex': !selectedMail || !selectedMail.id
'hidden lg:flex': !selectedMail || !selectedMail.id,
}"
>
<router-outlet></router-outlet>
</div>
</ng-container>
}
</div>

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

@ -1,4 +1,4 @@
import { DatePipe, NgClass, NgFor, NgIf } from '@angular/common';
import { DatePipe, NgClass } from '@angular/common';
import {
Component,
ElementRef,
@ -25,12 +25,10 @@ import { Subject, takeUntil } from 'rxjs';
encapsulation: ViewEncapsulation.None,
standalone: true,
imports: [
NgIf,
MatButtonModule,
MatIconModule,
RouterLink,
MatProgressBarModule,
NgFor,
NgClass,
RouterOutlet,
DatePipe,

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

@ -48,23 +48,24 @@
Label color
</div>
<div class="mx-3 my-4 -mr-5 flex w-48 flex-wrap">
<ng-container *ngFor="let color of labelColors">
@for (color of labelColors; track color) {
<mat-option
class="relative flex h-12 w-12 cursor-pointer rounded-full bg-transparent p-0"
[value]="color"
#matOption="matOption"
>
<mat-icon
class="absolute m-3 text-white"
*ngIf="matOption.selected"
[svgIcon]="'heroicons_outline:check'"
></mat-icon>
@if (matOption.selected) {
<mat-icon
class="absolute m-3 text-white"
[svgIcon]="'heroicons_outline:check'"
></mat-icon>
}
<span
class="m-1 flex h-10 w-10 rounded-full"
[ngClass]="labelColorDefs[color].bg"
></span>
</mat-option>
</ng-container>
}
</div>
</mat-select>
<button
@ -90,9 +91,7 @@
[formArrayName]="'labels'"
>
<!-- Label -->
<ng-container
*ngFor="let label of labelsForm.get('labels')['controls']"
>
@for (label of labelsForm.get('labels')['controls']; track label) {
<mat-form-field class="w-full">
<input matInput [formControl]="label.get('title')" />
<mat-select
@ -113,23 +112,26 @@
Label color
</div>
<div class="mx-3 my-4 -mr-5 flex w-48 flex-wrap">
<ng-container *ngFor="let color of labelColors">
@for (color of labelColors; track color) {
<mat-option
class="relative flex h-12 w-12 cursor-pointer rounded-full bg-transparent p-0"
[value]="color"
#matOption="matOption"
>
<mat-icon
class="absolute m-3 text-white"
*ngIf="matOption.selected"
[svgIcon]="'heroicons_outline:check'"
></mat-icon>
@if (matOption.selected) {
<mat-icon
class="absolute m-3 text-white"
[svgIcon]="
'heroicons_outline:check'
"
></mat-icon>
}
<span
class="m-1 flex h-10 w-10 rounded-full"
[ngClass]="labelColorDefs[color].bg"
></span>
</mat-option>
</ng-container>
}
</div>
</mat-select>
<button
@ -143,7 +145,7 @@
></mat-icon>
</button>
</mat-form-field>
</ng-container>
}
</div>
</form>
</div>

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

@ -1,4 +1,4 @@
import { NgClass, NgFor, NgIf } from '@angular/common';
import { NgClass } from '@angular/common';
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import {
FormsModule,
@ -37,9 +37,7 @@ import { debounceTime, take } from 'rxjs';
MatInputModule,
MatSelectModule,
NgClass,
NgFor,
MatOptionModule,
NgIf,
],
})
export class MailboxSettingsComponent implements OnInit {

49
src/app/modules/admin/apps/notes/details/details.component.html
View File

@ -1,7 +1,7 @@
<div class="-m-6 flex flex-auto flex-col md:w-160 md:min-w-160">
<ng-container *ngIf="note$ | async as note">
@if (note$ | async; as note) {
<!-- Image -->
<ng-container *ngIf="note.image">
@if (note.image) {
<div class="relative w-full">
<div class="absolute bottom-0 right-0 p-4">
<button mat-icon-button (click)="removeImage(note)">
@ -13,7 +13,7 @@
</div>
<img class="w-full object-cover" [src]="note.image" />
</div>
</ng-container>
}
<div class="m-4">
<!-- Title -->
<div>
@ -35,11 +35,9 @@
></textarea>
</div>
<!-- Tasks -->
<ng-container *ngIf="note.tasks">
@if (note.tasks) {
<div class="mx-2 mt-4 space-y-1.5">
<ng-container
*ngFor="let task of note.tasks; trackBy: trackByFn"
>
@for (task of note.tasks; track trackByFn($index, task)) {
<div class="group flex items-center">
<mat-checkbox
class="flex items-center"
@ -51,7 +49,7 @@
class="w-full px-1 py-0.5"
[ngClass]="{
'text-secondary line-through':
task.completed
task.completed,
}"
[placeholder]="'Task'"
[(ngModel)]="task.content"
@ -63,7 +61,7 @@
(click)="removeTaskFromNote(note, task)"
></mat-icon>
</div>
</ng-container>
}
<div class="flex items-center">
<mat-icon
class="text-hint -ml-0.5 icon-size-5"
@ -80,13 +78,14 @@
/>
</div>
</div>
</ng-container>
}
<!-- Labels -->
<ng-container *ngIf="note.labels && note.labels.length">
@if (note.labels && note.labels.length) {
<div class="mx-1 mt-6 flex flex-wrap items-center">
<ng-container
*ngFor="let label of note.labels; trackBy: trackByFn"
>
@for (
label of note.labels;
track trackByFn($index, label)
) {
<div
class="m-1 flex items-center rounded-full bg-gray-100 px-3 py-0.5 text-sm font-medium text-gray-500 dark:bg-gray-700 dark:text-gray-300"
>
@ -99,11 +98,11 @@
(click)="toggleLabelOnNote(note, label)"
></mat-icon>
</div>
</ng-container>
}
</div>
</ng-container>
}
<!-- Add Actions -->
<ng-container *ngIf="!note.id">
@if (!note.id) {
<div class="mt-4 flex items-center justify-end">
<!-- Save -->
<button
@ -115,9 +114,9 @@
Save
</button>
</div>
</ng-container>
}
<!-- Edit Actions -->
<ng-container *ngIf="note.id">
@if (note.id) {
<div class="mt-4 flex items-center justify-between">
<div class="flex items-center space-x-2">
<!-- Image -->
@ -161,8 +160,8 @@
></mat-icon>
</button>
<mat-menu #labelsMenu="matMenu">
<ng-container *ngIf="labels$ | async as labels">
<ng-container *ngFor="let label of labels">
@if (labels$ | async; as labels) {
@for (label of labels; track label) {
<button
mat-menu-item
(click)="toggleLabelOnNote(note, label)"
@ -181,8 +180,8 @@
}}</span>
</span>
</button>
</ng-container>
</ng-container>
}
}
</mat-menu>
<!-- Archive -->
<button
@ -203,7 +202,7 @@
<!-- Close -->
<button mat-flat-button matDialogClose>Close</button>
</div>
</ng-container>
}
</div>
</ng-container>
}
</div>

4
src/app/modules/admin/apps/notes/details/details.component.ts
View File

@ -1,5 +1,5 @@
import { TextFieldModule } from '@angular/cdk/text-field';
import { AsyncPipe, NgClass, NgFor, NgIf } from '@angular/common';
import { AsyncPipe, NgClass } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
@ -39,12 +39,10 @@ import {
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [
NgIf,
MatButtonModule,
MatIconModule,
FormsModule,
TextFieldModule,
NgFor,
MatCheckboxModule,
NgClass,
MatRippleModule,

8
src/app/modules/admin/apps/notes/labels/labels.component.html
View File

@ -29,8 +29,8 @@
</mat-form-field>
<!-- Labels -->
<div class="mt-4 flex flex-col">
<ng-container *ngIf="labels$ | async as labels">
<ng-container *ngFor="let label of labels; trackBy: trackByFn">
@if (labels$ | async; as labels) {
@for (label of labels; track trackByFn($index, label)) {
<mat-form-field class="fuse-mat-dense w-full">
<button
mat-icon-button
@ -50,7 +50,7 @@
matInput
/>
</mat-form-field>
</ng-container>
</ng-container>
}
}
</div>
</div>

4
src/app/modules/admin/apps/notes/labels/labels.component.ts
View File

@ -1,4 +1,4 @@
import { AsyncPipe, NgFor, NgIf } from '@angular/common';
import { AsyncPipe } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
@ -36,8 +36,6 @@ import {
MatIconModule,
MatFormFieldModule,
MatInputModule,
NgIf,
NgFor,
FormsModule,
AsyncPipe,
],

167
src/app/modules/admin/apps/notes/list/list.component.html
View File

@ -16,7 +16,8 @@
[ngClass]="{
'bg-gray-200 text-primary dark:bg-gray-700 dark:text-primary-400':
filterStatus === 'notes',
'text-hint hover:bg-hover': filterStatus !== 'notes'
'text-hint hover:bg-hover':
filterStatus !== 'notes',
}"
(click)="resetFilter()"
matRipple
@ -37,7 +38,7 @@
'bg-gray-200 text-primary dark:bg-gray-700 dark:text-primary-400':
filterStatus === 'archived',
'text-hint hover:bg-hover':
filterStatus !== 'archived'
filterStatus !== 'archived',
}"
(click)="filterByArchived()"
matRipple
@ -52,17 +53,15 @@
</div>
</div>
<!-- Labels -->
<ng-container *ngIf="labels$ | async as labels">
<ng-container
*ngFor="let label of labels; trackBy: trackByFn"
>
@if (labels$ | async; as labels) {
@for (label of labels; track trackByFn($index, label)) {
<div
class="relative flex cursor-pointer items-center rounded-full px-4 py-2 font-medium"
[ngClass]="{
'bg-gray-200 text-primary dark:bg-gray-700 dark:text-primary-400':
'label:' + label.id === filterStatus,
'text-hint hover:bg-hover':
'label:' + label.id !== filterStatus
'label:' + label.id !== filterStatus,
}"
(click)="filterByLabel(label.id)"
matRipple
@ -80,8 +79,8 @@
{{ label.title }}
</div>
</div>
</ng-container>
</ng-container>
}
}
<!-- Edit Labels -->
<div
class="relative flex cursor-pointer items-center rounded-full px-4 py-2 font-medium hover:bg-hover"
@ -153,8 +152,8 @@
</div>
<!-- Notes -->
<ng-container *ngIf="notes$ | async as notes; else loading">
<ng-container *ngIf="notes.length; else noNotes">
@if (notes$ | async; as notes) {
@if (notes.length) {
<!-- Masonry layout -->
<fuse-masonry
class="-mx-2 mt-8"
@ -165,51 +164,41 @@
<!-- Columns template -->
<ng-template #columnsTemplate let-columns>
<!-- Columns -->
<ng-container
*ngFor="
let column of columns;
trackBy: trackByFn
"
>
@for (
column of columns;
track trackByFn($index, column)
) {
<!-- Column -->
<div class="flex-1 space-y-4 px-2">
<ng-container
*ngFor="
let note of column.items;
trackBy: trackByFn
"
>
@for (
note of column.items;
track trackByFn($index, note)
) {
<!-- Note -->
<div
class="bg-card flex cursor-pointer flex-col overflow-hidden rounded-2xl shadow"
(click)="openNoteDialog(note)"
>
<!-- Image -->
<ng-container
*ngIf="note.image"
>
@if (note.image) {
<img
class="w-full object-cover"
[src]="note.image"
/>
</ng-container>
}
<div
class="flex flex-auto flex-col space-y-4 p-6"
>
<!-- Title -->
<ng-container
*ngIf="note.title"
>
@if (note.title) {
<div
class="line-clamp-3 font-semibold"
>
{{ note.title }}
</div>
</ng-container>
}
<!-- Content -->
<ng-container
*ngIf="note.content"
>
@if (note.content) {
<div
[class.text-xl]="
note.content
@ -218,28 +207,25 @@
>
{{ note.content }}
</div>
</ng-container>
}
<!-- Tasks -->
<ng-container
*ngIf="note.tasks"
>
@if (note.tasks) {
<div
class="space-y-1.5"
>
<ng-container
*ngFor="
let task of note.tasks;
trackBy: trackByFn
"
>
@for (
task of note.tasks;
track trackByFn(
$index,
task
)
) {
<div
class="flex items-center"
>
<ng-container
*ngIf="
!task.completed
"
>
@if (
!task.completed
) {
<div
class="flex h-5 w-5 items-center justify-center"
>
@ -247,24 +233,22 @@
class="h-4 w-4 rounded-full border-2"
></div>
</div>
</ng-container>
<ng-container
*ngIf="
task.completed
"
>
}
@if (
task.completed
) {
<mat-icon
class="text-hint icon-size-5"
[svgIcon]="
'heroicons_solid:check-circle'
"
></mat-icon>
</ng-container>
}
<div
class="ml-1.5 leading-5"
[ngClass]="{
'text-secondary line-through':
task.completed
task.completed,
}"
>
{{
@ -272,22 +256,21 @@
}}
</div>
</div>
</ng-container>
}
</div>
</ng-container>
}
<!-- Labels -->
<ng-container
*ngIf="note.labels"
>
@if (note.labels) {
<div
class="-m-1 flex flex-wrap items-center"
>
<ng-container
*ngFor="
let label of note.labels;
trackBy: trackByFn
"
>
@for (
label of note.labels;
track trackByFn(
$index,
label
)
) {
<div
class="m-1 rounded-full bg-gray-100 px-3 py-0.5 text-sm font-medium text-gray-500 dark:bg-gray-700 dark:text-gray-300"
>
@ -295,21 +278,32 @@
label.title
}}
</div>
</ng-container>
}
</div>
</ng-container>
}
</div>
</div>
</ng-container>
}
</div>
</ng-container>
}
</ng-template>
</fuse-masonry>
</ng-container>
</ng-container>
<!-- Loading template -->
<ng-template #loading>
} @else {
<div
class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent"
>
<mat-icon
class="icon-size-24"
[svgIcon]="'heroicons_outline:document'"
></mat-icon>
<div
class="text-secondary mt-4 text-2xl font-semibold tracking-tight"
>
There are no notes!
</div>
</div>
}
} @else {
<div
class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent"
>
@ -319,24 +313,11 @@
Loading...
</div>
</div>
</ng-template>
}
<!-- Loading template -->
<!-- No notes template -->
<ng-template #noNotes>
<div
class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent"
>
<mat-icon
class="icon-size-24"
[svgIcon]="'heroicons_outline:document'"
></mat-icon>
<div
class="text-secondary mt-4 text-2xl font-semibold tracking-tight"
>
There are no notes!
</div>
</div>
</ng-template>
</div>
</mat-drawer-content>
</mat-drawer-container>

4
src/app/modules/admin/apps/notes/list/list.component.ts
View File

@ -1,4 +1,4 @@
import { AsyncPipe, NgClass, NgFor, NgIf } from '@angular/common';
import { AsyncPipe, NgClass } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
@ -42,8 +42,6 @@ import {
MatRippleModule,
NgClass,
MatIconModule,
NgIf,
NgFor,
MatButtonModule,
MatFormFieldModule,
MatInputModule,

49
src/app/modules/admin/apps/scrumboard/board/board.component.html
View File

@ -43,9 +43,7 @@
<!-- Group all cdkDropList's after this point together so that the cards can be transferred between lists -->
<div class="flex items-start" cdkDropListGroup>
<!-- List -->
<ng-container
*ngFor="let list of board.lists; trackBy: trackByFn"
>
@for (list of board.lists; track trackByFn($index, list)) {
<div
class="bg-default w-72 flex-0 rounded-2xl p-2"
cdkDrag
@ -124,26 +122,24 @@
(cdkDropListDropped)="cardDropped($event)"
>
<!-- Card -->
<ng-container
*ngFor="
let card of list.cards;
trackBy: trackByFn
"
>
@for (
card of list.cards;
track trackByFn($index, card)
) {
<a
class="bg-card mb-3 flex flex-col items-start space-y-3 overflow-hidden rounded-lg p-5 shadow"
[routerLink]="['card', card.id]"
cdkDrag
>
<!-- Cover image -->
<ng-container *ngIf="card.coverImage">
@if (card.coverImage) {
<div class="-mx-5 -mt-5 mb-2">
<img
class="w-full object-cover"
[src]="card.coverImage"
/>
</div>
</ng-container>
}
<!-- Title -->
<div
class="text-lg font-medium leading-5"
@ -151,36 +147,35 @@
{{ card.title }}
</div>
<!-- Labels -->
<ng-container
*ngIf="card.labels.length"
>
@if (card.labels.length) {
<div>
<div
class="-mx-1 -mb-2 flex flex-wrap"
>
<ng-container
*ngFor="
let label of card.labels;
trackBy: trackByFn
"
>
@for (
label of card.labels;
track trackByFn(
$index,
label
)
) {
<div
class="mx-1 mb-2 rounded-full bg-gray-100 px-3 py-0.5 text-sm font-medium text-gray-500 dark:bg-gray-700 dark:text-gray-300"
>
{{ label.title }}
</div>
</ng-container>
}
</div>
</div>
</ng-container>
}
<!-- Due date -->
<ng-container *ngIf="card.dueDate">
@if (card.dueDate) {
<div
class="text-secondary flex items-center rounded text-sm font-medium leading-5"
[ngClass]="{
'text-red-600': isOverdue(
card.dueDate
)
),
}"
>
<mat-icon
@ -196,9 +191,9 @@
}}
</div>
</div>
</ng-container>
}
</a>
</ng-container>
}
</div>
<!-- New card -->
@ -213,7 +208,7 @@
</scrumboard-board-add-card>
</div>
</div>
</ng-container>
}
<!-- New list -->
<scrumboard-board-add-list

4
src/app/modules/admin/apps/scrumboard/board/board.component.ts
View File

@ -8,7 +8,7 @@ import {
transferArrayItem,
} from '@angular/cdk/drag-drop';
import { CdkScrollable } from '@angular/cdk/scrolling';
import { DatePipe, NgClass, NgFor, NgIf } from '@angular/common';
import { DatePipe, NgClass } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
@ -48,11 +48,9 @@ import { ScrumboardBoardAddListComponent } from './add-list/add-list.component';
CdkScrollable,
CdkDropList,
CdkDropListGroup,
NgFor,
CdkDrag,
CdkDragHandle,
MatMenuModule,
NgIf,
NgClass,
ScrumboardBoardAddCardComponent,
ScrumboardBoardAddListComponent,

26
src/app/modules/admin/apps/scrumboard/boards/boards.component.html
View File

@ -15,9 +15,9 @@
<div
class="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 md:mt-16 lg:grid-cols-4"
>
<ng-container *ngFor="let board of boards; trackBy: trackByFn">
@for (board of boards; track trackByFn($index, board)) {
<a
class="bg-card flex w-56 flex-col items-start rounded-lg rounded-lg p-6 shadow transition-shadow duration-150 ease-in-out hover:shadow-xl"
class="bg-card flex w-56 flex-col items-start rounded-lg p-6 shadow transition-shadow duration-150 ease-in-out hover:shadow-xl"
[routerLink]="[board.id]"
>
<div
@ -37,22 +37,20 @@
{{ board.description }}
</div>
<!-- Members -->
<ng-container *ngIf="board.members?.length">
@if (board.members?.length) {
<div class="mt-6 h-1 w-12 border-t-2"></div>
<div class="mt-6 flex items-center -space-x-1.5">
<ng-container
*ngFor="
let member of board.members.slice(0, 5);
trackBy: trackByFn
"
>
@for (
member of board.members.slice(0, 5);
track trackByFn($index, member)
) {
<img
class="ring-bg-card h-8 w-8 flex-0 rounded-full object-cover ring ring-offset-1 ring-offset-transparent"
[src]="member.avatar"
alt="Member avatar"
/>
</ng-container>
<ng-container *ngIf="board.members.length > 5">
}
@if (board.members.length > 5) {
<div
class="ring-bg-card flex h-8 w-8 flex-0 items-center justify-center rounded-full bg-gray-200 text-gray-500 ring ring-offset-1 ring-offset-transparent"
>
@ -60,9 +58,9 @@
+{{ board.members.slice(5).length }}
</div>
</div>
</ng-container>
}
</div>
</ng-container>
}
<!-- Last activity -->
<div class="font-md mt-4 flex items-center text-md">
<div class="text-secondary">Edited:</div>
@ -71,7 +69,7 @@
</div>
</div>
</a>
</ng-container>
}
<!-- New board -->
<div
class="flex w-56 cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 transition-colors duration-150 ease-in-out hover:bg-hover"

4
src/app/modules/admin/apps/scrumboard/boards/boards.component.ts
View File

@ -1,5 +1,5 @@
import { CdkScrollable } from '@angular/cdk/scrolling';
import { NgFor, NgIf } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
@ -21,7 +21,7 @@ import { Subject, takeUntil } from 'rxjs';
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [CdkScrollable, NgFor, RouterLink, MatIconModule, NgIf],
imports: [CdkScrollable, RouterLink, MatIconModule],
})
export class ScrumboardBoardsComponent implements OnInit, OnDestroy {
boards: Board[];

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

@ -56,7 +56,7 @@
'bg-green-200 text-green-800 dark:bg-green-500 dark:text-green-100':
card.dueDate && !isOverdue(card.dueDate),
'bg-red-200 text-red-800 dark:bg-red-500 dark:text-red-100':
card.dueDate && isOverdue(card.dueDate)
card.dueDate && isOverdue(card.dueDate),
}"
(click)="dueDatePicker.open()"
>
@ -65,10 +65,12 @@
[svgIcon]="'heroicons_solid:calendar'"
></mat-icon>
<span class="ml-2 text-md font-medium">
<ng-container *ngIf="card.dueDate">{{
card.dueDate | date: 'longDate'
}}</ng-container>
<ng-container *ngIf="!card.dueDate">Not set</ng-container>
@if (card.dueDate) {
{{ card.dueDate | date: 'longDate' }}
}
@if (!card.dueDate) {
Not set
}
</span>
<mat-form-field
class="fuse-mat-dense pointer-events-none invisible absolute inset-0 -mt-2.5 opacity-0"
@ -127,9 +129,10 @@
<!-- Available labels -->
<div class="max-h-40 overflow-y-auto border-t leading-none">
<!-- Labels -->
<ng-container
*ngFor="let label of filteredLabels; trackBy: trackByFn"
>
@for (
label of filteredLabels;
track trackByFn($index, label)
) {
<mat-checkbox
class="flex h-10 min-h-10 items-center pl-1 pr-4"
[color]="'primary'"
@ -138,7 +141,7 @@
>
{{ label.title }}
</mat-checkbox>
</ng-container>
}
</div>
</div>
</div>

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

@ -1,5 +1,5 @@
import { TextFieldModule } from '@angular/cdk/text-field';
import { DatePipe, NgClass, NgFor, NgIf } from '@angular/common';
import { DatePipe, NgClass } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
@ -52,9 +52,7 @@ import { Subject, debounceTime, takeUntil, tap } from 'rxjs';
MatInputModule,
TextFieldModule,
NgClass,
NgIf,
MatDatepickerModule,
NgFor,
MatCheckboxModule,
DatePipe,
],

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

@ -8,17 +8,17 @@
<!-- Mark as ... button -->
<button class="pl-3.5 pr-4" mat-button (click)="toggleCompleted()">
<!-- Mark as complete -->
<ng-container *ngIf="!taskForm.get('completed').value">
@if (!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">
@if (taskForm.get('completed').value) {
<div class="flex items-center justify-center">
<mat-icon
class="text-primary"
@ -28,7 +28,7 @@
>MARK AS INCOMPLETE</span
>
</div>
</ng-container>
}
</button>
<div class="flex items-center">
@ -82,13 +82,11 @@
<div class="mb-1.5 font-medium">Tags</div>
<div class="-m-1.5 flex flex-wrap items-center">
<!-- Tags -->
<ng-container *ngIf="task.tags.length">
<ng-container
*ngFor="
let tag of task.tags | fuseFindByKey: 'id' : tags;
trackBy: trackByFn
"
>
@if (task.tags.length) {
@for (
tag of task.tags | fuseFindByKey: 'id' : tags;
track trackByFn($index, tag)
) {
<div
class="m-1.5 flex items-center justify-center rounded-full bg-gray-100 px-4 leading-9 text-gray-500 dark:bg-gray-700 dark:text-gray-300"
>
@ -97,14 +95,14 @@
>{{ tag.title }}</span
>
</div>
</ng-container>
</ng-container>
}
}
<div
class="m-1.5 flex cursor-pointer items-center justify-center rounded-full bg-gray-100 px-4 leading-9 text-gray-500 dark:bg-gray-700 dark:text-gray-300"
(click)="openTagsPanel()"
#tagsPanelOrigin
>
<ng-container *ngIf="task.tags.length">
@if (task.tags.length) {
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:pencil-square'"
@ -113,9 +111,9 @@
class="ml-1.5 whitespace-nowrap text-md font-medium"
>Edit</span
>
</ng-container>
}
<ng-container *ngIf="!task.tags.length">
@if (!task.tags.length) {
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:plus-circle'"
@ -124,7 +122,7 @@
class="ml-1.5 whitespace-nowrap text-md font-medium"
>Add</span
>
</ng-container>
}
<!-- Tags panel -->
<ng-template #tagsPanel>
@ -157,31 +155,31 @@
mat-icon-button
(click)="toggleTagsEditMode()"
>
<mat-icon
*ngIf="!tagsEditMode"
class="icon-size-5"
[svgIcon]="
'heroicons_solid:pencil-square'
"
></mat-icon>
<mat-icon
*ngIf="tagsEditMode"
class="icon-size-5"
[svgIcon]="'heroicons_solid:check'"
></mat-icon>
@if (!tagsEditMode) {
<mat-icon
class="icon-size-5"
[svgIcon]="
'heroicons_solid:pencil-square'
"
></mat-icon>
}
@if (tagsEditMode) {
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:check'"
></mat-icon>
}
</button>
</div>
<div
class="flex max-h-64 flex-col overflow-y-auto border-t py-2"
>
<!-- Tags -->
<ng-container *ngIf="!tagsEditMode">
<ng-container
*ngFor="
let tag of filteredTags;
trackBy: trackByFn
"
>
@if (!tagsEditMode) {
@for (
tag of filteredTags;
track trackByFn($index, tag)
) {
<div
class="flex h-10 min-h-10 cursor-pointer items-center pl-1 pr-4 hover:bg-hover"
(click)="toggleTaskTag(tag)"
@ -200,17 +198,15 @@
{{ tag.title }}
</div>
</div>
</ng-container>
</ng-container>
}
}
<!-- Tags editing -->
<ng-container *ngIf="tagsEditMode">
@if (tagsEditMode) {
<div class="space-y-2 py-2">
<ng-container
*ngFor="
let tag of filteredTags;
trackBy: trackByFn
"
>
@for (
tag of filteredTags;
track trackByFn($index, tag)
) {
<div class="flex items-center">
<mat-form-field
class="fuse-mat-dense mx-4 w-full"
@ -242,34 +238,35 @@
</button>
</mat-form-field>
</div>
</ng-container>
}
</div>
</ng-container>
}
<!-- Create tag -->
<div
class="-ml-0.5 flex h-10 min-h-10 cursor-pointer items-center pl-4 pr-3 leading-none 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'
@if (
shouldShowCreateTagButton(newTagInput.value)
) {
<div
class="-ml-0.5 flex h-10 min-h-10 cursor-pointer items-center pl-4 pr-3 leading-none hover:bg-hover"
(click)="
createTag(newTagInput.value);
newTagInput.value = ''
"
></mat-icon>
<div class="break-all">
Create "<b>{{ newTagInput.value }}</b
>"
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>
</div>
</ng-template>
@ -290,21 +287,21 @@
'bg-gray-200 text-gray-800 dark:bg-gray-500 dark:text-gray-100':
task.priority === 1,
'bg-red-200 text-red-800 dark:bg-red-500 dark:text-red-100':
task.priority === 2
task.priority === 2,
}"
[matMenuTriggerFor]="priorityMenu"
>
<!-- Low -->
<ng-container *ngIf="task.priority === 0">
@if (task.priority === 0) {
<mat-icon
class="text-current icon-size-4"
[svgIcon]="'heroicons_mini:arrow-long-down'"
></mat-icon>
<span class="ml-2 mr-1 text-md font-medium">Low</span>
</ng-container>
}
<!-- Normal -->
<ng-container *ngIf="task.priority === 1">
@if (task.priority === 1) {
<mat-icon
class="text-current icon-size-4"
[svgIcon]="'heroicons_solid:minus'"
@ -312,16 +309,16 @@
<span class="ml-2 mr-1 text-md font-medium"
>Normal</span
>
</ng-container>
}
<!-- High -->
<ng-container *ngIf="task.priority === 2">
@if (task.priority === 2) {
<mat-icon
class="text-current icon-size-4"
[svgIcon]="'heroicons_mini:arrow-long-up'"
></mat-icon>
<span class="ml-2 mr-1 text-md font-medium">High</span>
</ng-container>
}
</div>
<mat-menu #priorityMenu="matMenu">
<!-- Low -->
@ -388,7 +385,7 @@
'bg-green-200 text-green-800 dark:bg-green-500 dark:text-green-100':
task.dueDate && !isOverdue(),
'bg-red-200 text-red-800 dark:bg-red-500 dark:text-red-100':
task.dueDate && isOverdue()
task.dueDate && isOverdue(),
}"
(click)="dueDatePicker.open()"
>
@ -397,12 +394,12 @@
[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
>
@if (task.dueDate) {
{{ task.dueDate | date: 'longDate' }}
}
@if (!task.dueDate) {
Not set
}
</span>
<mat-form-field
class="fuse-mat-dense pointer-events-none invisible absolute inset-0 -mt-2.5 opacity-0"

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

@ -1,7 +1,7 @@
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
import { TextFieldModule } from '@angular/cdk/text-field';
import { DatePipe, NgClass, NgFor, NgIf } from '@angular/common';
import { DatePipe, NgClass } from '@angular/common';
import {
AfterViewInit,
ChangeDetectionStrategy,
@ -57,7 +57,6 @@ import { Subject, debounceTime, filter, takeUntil, tap } from 'rxjs';
FormsModule,
ReactiveFormsModule,
MatButtonModule,
NgIf,
MatIconModule,
MatMenuModule,
RouterLink,
@ -65,7 +64,6 @@ import { Subject, debounceTime, filter, takeUntil, tap } from 'rxjs';
MatFormFieldModule,
MatInputModule,
TextFieldModule,
NgFor,
MatRippleModule,
MatCheckboxModule,
NgClass,

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

@ -30,13 +30,15 @@
Tasks
</div>
<div class="text-secondary ml-0.5 font-medium">
<span *ngIf="tasksCount.incomplete === 0"
>All tasks completed!</span
>
<span *ngIf="tasksCount.incomplete !== 0"
>{{ tasksCount.incomplete }} remaining
tasks</span
>
@if (tasksCount.incomplete === 0) {
<span>All tasks completed!</span>
}
@if (tasksCount.incomplete !== 0) {
<span
>{{ tasksCount.incomplete }} remaining
tasks</span
>
}
</div>
</div>
<!-- Actions -->
@ -70,7 +72,7 @@
</div>
<!-- Tasks list -->
<ng-container *ngIf="tasks && tasks.length > 0; else noTasks">
@if (tasks && tasks.length > 0) {
<div
class="divide-y"
cdkDropList
@ -78,13 +80,11 @@
(cdkDropListDropped)="dropped($event)"
>
<!-- Task -->
<ng-container
*ngFor="
let task of tasks;
let first = first;
trackBy: trackByFn
"
>
@for (
task of tasks;
track trackByFn($index, task);
let first = $first
) {
<div
[id]="'task-' + task.id"
class="group w-full select-none dark:hover:bg-hover hover:bg-gray-100"
@ -92,7 +92,7 @@
'h-12 bg-gray-50 text-lg font-semibold dark:bg-transparent':
task.type === 'section',
'h-16': task.type === 'task',
'text-hint': task.completed
'text-hint': task.completed,
}"
[class.border-t]="first"
cdkDrag
@ -109,16 +109,14 @@
class="relative flex h-full items-center pl-10"
>
<!-- Selected indicator -->
<ng-container
*ngIf="
selectedTask &&
selectedTask.id === task.id
"
>
@if (
selectedTask &&
selectedTask.id === task.id
) {
<div
class="absolute -bottom-px -top-px right-0 z-10 flex w-1 flex-0 bg-primary"
></div>
</ng-container>
}
<!-- Drag handle -->
<div
@ -132,29 +130,30 @@
</div>
<!-- Complete task button -->
<button
class="-ml-2.5 mr-2 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>
@if (task.type === 'task') {
<button
class="-ml-2.5 mr-2 leading-none"
(click)="toggleCompleted(task)"
mat-icon-button
>
@if (task.completed) {
<mat-icon
class="text-primary"
[svgIcon]="
'heroicons_outline:check-circle'
"
></mat-icon>
}
@if (!task.completed) {
<mat-icon
class="text-hint"
[svgIcon]="
'heroicons_outline:check-circle'
"
></mat-icon>
}
</button>
}
<!-- Task link -->
<a
@ -163,10 +162,10 @@
>
<!-- Title & Placeholder -->
<div class="mr-2 flex-auto truncate">
<ng-container *ngIf="task.title">
@if (task.title) {
<span>{{ task.title }}</span>
</ng-container>
<ng-container *ngIf="!task.title">
}
@if (!task.title) {
<span
class="text-hint select-none"
>{{
@ -174,48 +173,50 @@
}}
title</span
>
</ng-container>
}
</div>
<!-- Priority -->
<ng-container
*ngIf="task.type === 'task'"
>
@if (task.type === 'task') {
<div class="mr-3 h-4 w-4">
<!-- Low -->
<mat-icon
class="text-green-600 icon-size-4 dark:text-green-400"
*ngIf="task.priority === 0"
[svgIcon]="
'heroicons_mini:arrow-long-down'
"
[title]="'Low'"
></mat-icon>
@if (task.priority === 0) {
<mat-icon
class="text-green-600 icon-size-4 dark:text-green-400"
[svgIcon]="
'heroicons_mini:arrow-long-down'
"
[title]="'Low'"
></mat-icon>
}
<!-- High -->
<mat-icon
class="text-red-600 icon-size-4 dark:text-red-400"
*ngIf="task.priority === 2"
[svgIcon]="
'heroicons_mini:arrow-long-up'
"
[title]="'High'"
></mat-icon>
@if (task.priority === 2) {
<mat-icon
class="text-red-600 icon-size-4 dark:text-red-400"
[svgIcon]="
'heroicons_mini:arrow-long-up'
"
[title]="'High'"
></mat-icon>
}
</div>
</ng-container>
}
<!-- Due date -->
<div
class="text-secondary whitespace-nowrap text-sm"
*ngIf="task.type === 'task'"
>
{{ task.dueDate | date: 'LLL dd' }}
</div>
@if (task.type === 'task') {
<div
class="text-secondary whitespace-nowrap text-sm"
>
{{
task.dueDate
| date: 'LLL dd'
}}
</div>
}
</a>
</div>
</div>
</ng-container>
}
</div>
</ng-container>
<ng-template #noTasks>
} @else {
<div
class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent"
>
@ -231,7 +232,7 @@
Add a task to start planning!
</div>
</div>
</ng-template>
}
</div>
</mat-drawer-content>
</mat-drawer-container>

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

@ -6,14 +6,7 @@ import {
CdkDropList,
moveItemInArray,
} from '@angular/cdk/drag-drop';
import {
DOCUMENT,
DatePipe,
NgClass,
NgFor,
NgIf,
TitleCasePipe,
} from '@angular/common';
import { DOCUMENT, DatePipe, NgClass, TitleCasePipe } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
@ -52,12 +45,10 @@ import { Subject, filter, fromEvent, takeUntil } from 'rxjs';
imports: [
MatSidenavModule,
RouterOutlet,
NgIf,
MatButtonModule,
MatTooltipModule,
MatIconModule,
CdkDropList,
NgFor,
CdkDrag,
NgClass,
CdkDragPreview,

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

@ -512,12 +512,11 @@
</div>
<div class="mt-8">
<div class="-my-3 divide-y">
<ng-container
*ngFor="
let dataset of data.newVsReturning.series;
let i = index
"
>
@for (
dataset of data.newVsReturning.series;
track dataset;
let i = $index
) {
<div class="grid grid-cols-3 py-3">
<div class="flex items-center">
<div
@ -541,7 +540,7 @@
{{ dataset }}%
</div>
</div>
</ng-container>
}
</div>
</div>
</div>
@ -586,12 +585,11 @@
</div>
<div class="mt-8">
<div class="-my-3 divide-y">
<ng-container
*ngFor="
let dataset of data.gender.series;
let i = index
"
>
@for (
dataset of data.gender.series;
track dataset;
let i = $index
) {
<div class="grid grid-cols-3 py-3">
<div class="flex items-center">
<div
@ -614,7 +612,7 @@
{{ dataset }}%
</div>
</div>
</ng-container>
}
</div>
</div>
</div>
@ -659,12 +657,11 @@
</div>
<div class="mt-8">
<div class="-my-3 divide-y">
<ng-container
*ngFor="
let dataset of data.age.series;
let i = index
"
>
@for (
dataset of data.age.series;
track dataset;
let i = $index
) {
<div class="grid grid-cols-3 py-3">
<div class="flex items-center">
<div
@ -687,7 +684,7 @@
{{ dataset }}%
</div>
</div>
</ng-container>
}
</div>
</div>
</div>
@ -732,12 +729,11 @@
</div>
<div class="mt-8">
<div class="-my-3 divide-y">
<ng-container
*ngFor="
let dataset of data.language.series;
let i = index
"
>
@for (
dataset of data.language.series;
track dataset;
let i = $index
) {
<div class="grid grid-cols-3 py-3">
<div class="flex items-center">
<div
@ -761,7 +757,7 @@
{{ dataset }}%
</div>
</div>
</ng-container>
}
</div>
</div>
</div>

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