purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-04-04 07:31: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 --> <!-- Language menu -->
<mat-menu [xPosition]="'before'" #languages="matMenu"> <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)"> <button mat-menu-item (click)="setActiveLang(lang.id)">
<span class="flex items-center"> <span class="flex items-center">
<ng-container <ng-container
@ -19,7 +19,7 @@
<span class="ml-3">{{ lang.label }}</span> <span class="ml-3">{{ lang.label }}</span>
</span> </span>
</button> </button>
</ng-container> }
</mat-menu> </mat-menu>
<!-- Flag image template --> <!-- 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 { import {
ChangeDetectionStrategy, ChangeDetectionStrategy,
ChangeDetectorRef, ChangeDetectorRef,
@ -23,7 +23,7 @@ import { take } from 'rxjs';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
exportAs: 'languages', exportAs: 'languages',
standalone: true, standalone: true,
imports: [MatButtonModule, MatMenuModule, NgTemplateOutlet, NgFor], imports: [MatButtonModule, MatMenuModule, NgTemplateOutlet],
}) })
export class LanguagesComponent implements OnInit, OnDestroy { export class LanguagesComponent implements OnInit, OnDestroy {
availableLangs: AvailableLangs; availableLangs: AvailableLangs;

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

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

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

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

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

@ -6,7 +6,7 @@
[ngClass]="{ [ngClass]="{
'-translate-x-full shadow sm:-translate-x-96 lg:-translate-x-80': '-translate-x-full shadow sm:-translate-x-96 lg:-translate-x-80':
opened, opened,
'translate-x-0': !opened 'translate-x-0': !opened,
}" }"
> >
<!-- Header --> <!-- Header -->
@ -15,7 +15,7 @@
(click)="toggle()" (click)="toggle()"
> >
<!-- Toggle --> <!-- Toggle -->
<ng-container *ngIf="!opened || (opened && !selectedChat)"> @if (!opened || (opened && !selectedChat)) {
<div class="flex flex-auto items-center justify-center"> <div class="flex flex-auto items-center justify-center">
<div class="flex w-16 flex-0 items-center justify-center"> <div class="flex w-16 flex-0 items-center justify-center">
<mat-icon <mat-icon
@ -34,28 +34,28 @@
></mat-icon> ></mat-icon>
</button> </button>
</div> </div>
</ng-container> }
<!-- Contact info --> <!-- Contact info -->
<ng-container *ngIf="opened && selectedChat"> @if (opened && selectedChat) {
<div class="ml-3 flex flex-auto items-center"> <div class="ml-3 flex flex-auto items-center">
<div <div
class="relative flex h-10 w-10 flex-0 items-center justify-center" class="relative flex h-10 w-10 flex-0 items-center justify-center"
> >
<ng-container *ngIf="chat.contact.avatar"> @if (chat.contact.avatar) {
<img <img
class="h-full w-full rounded-full object-cover" class="h-full w-full rounded-full object-cover"
[src]="chat.contact.avatar" [src]="chat.contact.avatar"
alt="Contact avatar" alt="Contact avatar"
/> />
</ng-container> }
<ng-container *ngIf="!chat.contact.avatar"> @if (!chat.contact.avatar) {
<div <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" 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) }} {{ chat.contact.name.charAt(0) }}
</div> </div>
</ng-container> }
</div> </div>
<div class="ml-4 truncate text-lg font-medium leading-5"> <div class="ml-4 truncate text-lg font-medium leading-5">
{{ chat.contact.name }} {{ chat.contact.name }}
@ -66,7 +66,7 @@
></mat-icon> ></mat-icon>
</button> </button>
</div> </div>
</ng-container> }
</div> </div>
<!-- Content --> <!-- Content -->
@ -78,9 +78,7 @@
[fuseScrollbarOptions]="{ wheelPropagation: false }" [fuseScrollbarOptions]="{ wheelPropagation: false }"
> >
<div class="flex-auto"> <div class="flex-auto">
<ng-container @for (chat of chats; track trackByFn($index, chat)) {
*ngFor="let chat of chats; trackBy: trackByFn"
>
<div <div
class="flex cursor-pointer items-center px-4 py-3" class="flex cursor-pointer items-center px-4 py-3"
[ngClass]="{ [ngClass]="{
@ -88,14 +86,14 @@
!selectedChat || !selectedChat ||
selectedChat.id !== chat.id, selectedChat.id !== chat.id,
'bg-primary-50 dark:bg-hover': 'bg-primary-50 dark:bg-hover':
selectedChat && selectedChat.id === chat.id selectedChat && selectedChat.id === chat.id,
}" }"
(click)="selectChat(chat.id)" (click)="selectChat(chat.id)"
> >
<div <div
class="relative flex h-8 w-8 flex-0 items-center justify-center" class="relative flex h-8 w-8 flex-0 items-center justify-center"
> >
<ng-container *ngIf="chat.unreadCount > 0"> @if (chat.unreadCount > 0) {
<div <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-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]=" [class.ring-primary-50]="
@ -103,24 +101,24 @@
selectedChat.id === chat.id selectedChat.id === chat.id
" "
></div> ></div>
</ng-container> }
<ng-container *ngIf="chat.contact.avatar"> @if (chat.contact.avatar) {
<img <img
class="h-full w-full rounded-full object-cover" class="h-full w-full rounded-full object-cover"
[src]="chat.contact.avatar" [src]="chat.contact.avatar"
alt="Contact avatar" alt="Contact avatar"
/> />
</ng-container> }
<ng-container *ngIf="!chat.contact.avatar"> @if (!chat.contact.avatar) {
<div <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" 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) }} {{ chat.contact.name.charAt(0) }}
</div> </div>
</ng-container> }
</div> </div>
</div> </div>
</ng-container> }
</div> </div>
</div> </div>
@ -128,29 +126,25 @@
<div <div
class="flex flex-auto flex-col overflow-hidden border-l bg-gray-50 dark:bg-transparent" 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 <div
class="flex flex-col-reverse overflow-y-auto overscroll-y-contain" class="flex flex-col-reverse overflow-y-auto overscroll-y-contain"
> >
<div class="flex flex-auto shrink flex-col p-6"> <div class="flex flex-auto shrink flex-col p-6">
<ng-container @for (
*ngFor=" message of chat.messages;
let message of chat.messages; track trackByFn(i, message);
let i = index; let i = $index;
let first = first; let first = $first;
let last = last; let last = $last
trackBy: trackByFn ) {
"
>
<!-- Start of the day --> <!-- Start of the day -->
<ng-container @if (
*ngIf=" first ||
first || (chat.messages[i - 1].createdAt
(chat.messages[i - 1].createdAt | date: 'd') !==
| date: 'd') !== (message.createdAt | date: 'd')
(message.createdAt | date: 'd') ) {
"
>
<div <div
class="-mx-6 my-3 flex items-center justify-center" class="-mx-6 my-3 flex items-center justify-center"
> >
@ -165,7 +159,7 @@
</div> </div>
<div class="flex-auto border-b"></div> <div class="flex-auto border-b"></div>
</div> </div>
</ng-container> }
<div <div
class="flex flex-col" class="flex flex-col"
[ngClass]="{ [ngClass]="{
@ -178,7 +172,7 @@
'mt-3': 'mt-3':
i > 0 && i > 0 &&
chat.messages[i - 1].isMine !== chat.messages[i - 1].isMine !==
message.isMine message.isMine,
}" }"
> >
<!-- Bubble --> <!-- Bubble -->
@ -188,24 +182,22 @@
'bg-blue-500 text-blue-50': 'bg-blue-500 text-blue-50':
message.isMine, message.isMine,
'bg-gray-500 text-gray-50': 'bg-gray-500 text-gray-50':
!message.isMine !message.isMine,
}" }"
> >
<!-- Speech bubble tail --> <!-- Speech bubble tail -->
<ng-container @if (
*ngIf=" last ||
last || chat.messages[i + 1].isMine !==
chat.messages[i + 1].isMine !== message.isMine
message.isMine ) {
"
>
<div <div
class="absolute bottom-0 w-3" class="absolute bottom-0 w-3"
[ngClass]="{ [ngClass]="{
'-right-1 -mr-px mb-px text-blue-500': '-right-1 -mr-px mb-px text-blue-500':
message.isMine, message.isMine,
'-left-1 -ml-px mb-px -scale-x-1 text-gray-500': '-left-1 -ml-px mb-px -scale-x-1 text-gray-500':
!message.isMine !message.isMine,
}" }"
> >
<ng-container <ng-container
@ -214,7 +206,7 @@
" "
></ng-container> ></ng-container>
</div> </div>
</ng-container> }
<!-- Message --> <!-- Message -->
<div <div
class="min-w-4 leading-5" class="min-w-4 leading-5"
@ -222,21 +214,19 @@
></div> ></div>
</div> </div>
<!-- Time --> <!-- Time -->
<ng-container @if (
*ngIf=" first ||
first || last ||
last || chat.messages[i + 1].isMine !==
chat.messages[i + 1].isMine !== message.isMine ||
message.isMine || chat.messages[i + 1].createdAt !==
chat.messages[i + 1].createdAt !== message.createdAt
message.createdAt ) {
"
>
<div <div
class="text-secondary my-0.5 text-sm font-medium" class="text-secondary my-0.5 text-sm font-medium"
[ngClass]="{ [ngClass]="{
'mr-3': message.isMine, 'mr-3': message.isMine,
'ml-3': !message.isMine 'ml-3': !message.isMine,
}" }"
> >
{{ {{
@ -244,9 +234,9 @@
| date: 'HH:mm' | date: 'HH:mm'
}} }}
</div> </div>
</ng-container> }
</div> </div>
</ng-container> }
</div> </div>
</div> </div>
@ -274,28 +264,29 @@
</button> </button>
</div> </div>
</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>
</div> </div>
</div> </div>
<!-- Select chat or start new template --> <!-- 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 --> <!-- Speech bubble tail SVG -->
<!-- prettier-ignore --> <!-- 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 { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
import { TextFieldModule } from '@angular/cdk/text-field'; import { TextFieldModule } from '@angular/cdk/text-field';
import { import { DOCUMENT, DatePipe, NgClass, NgTemplateOutlet } from '@angular/common';
DOCUMENT,
DatePipe,
NgClass,
NgFor,
NgIf,
NgTemplateOutlet,
} from '@angular/common';
import { import {
AfterViewInit, AfterViewInit,
Component, Component,
@ -40,11 +33,9 @@ import { Subject, takeUntil } from 'rxjs';
standalone: true, standalone: true,
imports: [ imports: [
NgClass, NgClass,
NgIf,
MatIconModule, MatIconModule,
MatButtonModule, MatButtonModule,
FuseScrollbarDirective, FuseScrollbarDirective,
NgFor,
NgTemplateOutlet, NgTemplateOutlet,
MatFormFieldModule, MatFormFieldModule,
MatInputModule, MatInputModule,

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

@ -1,98 +1,106 @@
<!-- Bar search --> <!-- Bar search -->
<ng-container *ngIf="appearance === 'bar'"> @if (appearance === 'bar') {
<button mat-icon-button *ngIf="!opened" (click)="open()"> @if (!opened) {
<mat-icon [svgIcon]="'heroicons_outline:magnifying-glass'"></mat-icon> <button mat-icon-button (click)="open()">
</button> <mat-icon
<div [svgIcon]="'heroicons_outline:magnifying-glass'"
class="bg-card absolute inset-0 z-99 flex shrink-0 items-center" ></mat-icon>
*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>
</button> </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 --> <!-- Basic search -->
<ng-container *ngIf="appearance === 'basic'"> @if (appearance === 'basic') {
<div class="w-full sm:min-w-80"> <div class="w-full sm:min-w-80">
<mat-form-field class="w-full" [subscriptSizing]="'dynamic'"> <mat-form-field class="w-full" [subscriptSizing]="'dynamic'">
<mat-icon <mat-icon
@ -113,62 +121,62 @@
[disableRipple]="true" [disableRipple]="true"
#matAutocomplete="matAutocomplete" #matAutocomplete="matAutocomplete"
> >
<mat-option @if (resultSets && !resultSets.length) {
class="text-secondary pointer-events-none bg-transparent px-6 py-0 text-md" <mat-option
*ngIf="resultSets && !resultSets.length" class="text-secondary pointer-events-none bg-transparent px-6 py-0 text-md"
> >
No results found! No results found!
</mat-option> </mat-option>
<ng-container }
*ngFor="let resultSet of resultSets; trackBy: trackByFn" @for (resultSet of resultSets; track trackByFn($index, resultSet)) {
>
<mat-optgroup class="mt-2 flex items-center px-2"> <mat-optgroup class="mt-2 flex items-center px-2">
<span <span
class="text-secondary text-sm font-semibold tracking-wider" class="text-secondary text-sm font-semibold tracking-wider"
>{{ resultSet.label.toUpperCase() }}</span >{{ resultSet.label.toUpperCase() }}</span
> >
</mat-optgroup> </mat-optgroup>
<ng-container @for (
*ngFor="let result of resultSet.results; trackBy: trackByFn" result of resultSet.results;
> track trackByFn($index, result)
) {
<mat-option <mat-option
class="group relative mb-1 rounded-md px-6 py-0 text-md dark:hover:bg-hover hover:bg-gray-100" class="group relative mb-1 rounded-md px-6 py-0 text-md dark:hover:bg-hover hover:bg-gray-100"
[routerLink]="result.link" [routerLink]="result.link"
[value]="result.value" [value]="result.value"
> >
<!-- Contacts --> <!-- Contacts -->
<ng-container *ngIf="resultSet.id === 'contacts'"> @if (resultSet.id === 'contacts') {
<ng-container <ng-container
*ngTemplateOutlet=" *ngTemplateOutlet="
contactResult; contactResult;
context: { $implicit: result } context: { $implicit: result }
" "
></ng-container> ></ng-container>
</ng-container> }
<!-- Pages --> <!-- Pages -->
<ng-container *ngIf="resultSet.id === 'pages'"> @if (resultSet.id === 'pages') {
<ng-container <ng-container
*ngTemplateOutlet=" *ngTemplateOutlet="
pageResult; pageResult;
context: { $implicit: result } context: { $implicit: result }
" "
></ng-container> ></ng-container>
</ng-container> }
<!-- Tasks --> <!-- Tasks -->
<ng-container *ngIf="resultSet.id === 'tasks'"> @if (resultSet.id === 'tasks') {
<ng-container <ng-container
*ngTemplateOutlet=" *ngTemplateOutlet="
taskResult; taskResult;
context: { $implicit: result } context: { $implicit: result }
" "
></ng-container> ></ng-container>
</ng-container> }
</mat-option> </mat-option>
</ng-container> }
</ng-container> }
</mat-autocomplete> </mat-autocomplete>
</div> </div>
</ng-container> }
<!-- Contact result template --> <!-- Contact result template -->
<ng-template #contactResult let-result> <ng-template #contactResult let-result>
@ -176,12 +184,15 @@
<div <div
class="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary-100 dark:bg-primary-800" 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" /> @if (result.avatar) {
<mat-icon <img [src]="result.avatar" />
class="m-0 text-primary icon-size-5 dark:text-primary-400" }
*ngIf="!result.avatar" @if (!result.avatar) {
[svgIcon]="'heroicons_outline:user-circle'" <mat-icon
></mat-icon> class="m-0 text-primary icon-size-5 dark:text-primary-400"
[svgIcon]="'heroicons_outline:user-circle'"
></mat-icon>
}
</div> </div>
<div class="ml-3 truncate"> <div class="ml-3 truncate">
<span [innerHTML]="result.name"></span> <span [innerHTML]="result.name"></span>
@ -202,18 +213,18 @@
<!-- Task result template --> <!-- Task result template -->
<ng-template #taskResult let-result> <ng-template #taskResult let-result>
<div class="flex items-center"> <div class="flex items-center">
<ng-container *ngIf="result.completed"> @if (result.completed) {
<mat-icon <mat-icon
class="mr-0 text-primary dark:text-primary-400" class="mr-0 text-primary dark:text-primary-400"
[svgIcon]="'heroicons_outline:check-circle'" [svgIcon]="'heroicons_outline:check-circle'"
></mat-icon> ></mat-icon>
</ng-container> }
<ng-container *ngIf="!result.completed"> @if (!result.completed) {
<mat-icon <mat-icon
class="text-hint mr-0" class="text-hint mr-0"
[svgIcon]="'heroicons_outline:check-circle'" [svgIcon]="'heroicons_outline:check-circle'"
></mat-icon> ></mat-icon>
</ng-container> }
<div <div
class="ml-3 truncate leading-normal" class="ml-3 truncate leading-normal"
[ngClass]="{ 'text-hint line-through': result.completed }" [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 { 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 { HttpClient } from '@angular/common/http';
import { import {
Component, Component,
@ -44,14 +44,12 @@ import { Subject, debounceTime, filter, map, takeUntil } from 'rxjs';
animations: fuseAnimations, animations: fuseAnimations,
standalone: true, standalone: true,
imports: [ imports: [
NgIf,
MatButtonModule, MatButtonModule,
MatIconModule, MatIconModule,
FormsModule, FormsModule,
MatAutocompleteModule, MatAutocompleteModule,
ReactiveFormsModule, ReactiveFormsModule,
MatOptionModule, MatOptionModule,
NgFor,
RouterLink, RouterLink,
NgTemplateOutlet, NgTemplateOutlet,
MatFormFieldModule, MatFormFieldModule,

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

@ -50,7 +50,7 @@
<!-- Theme --> <!-- Theme -->
<div class="text-secondary text-md font-semibold">THEME</div> <div class="text-secondary text-md font-semibold">THEME</div>
<div class="mt-6 grid grid-cols-2 gap-3 sm:grid-cols-3"> <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 <div
class="bg-hover flex cursor-pointer items-center justify-center rounded-full px-4 py-3 ring-inset ring-primary" 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" [class.ring-2]="config.theme === theme.id"
@ -67,7 +67,7 @@
{{ theme.name }} {{ theme.name }}
</div> </div>
</div> </div>
</ng-container> }
</div> </div>
<hr class="my-8" /> <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 { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
@ -40,7 +40,6 @@ import { Subject, takeUntil } from 'rxjs';
MatIconModule, MatIconModule,
FuseDrawerComponent, FuseDrawerComponent,
MatButtonModule, MatButtonModule,
NgFor,
NgClass, NgClass,
MatTooltipModule, MatTooltipModule,
], ],

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

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

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

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

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

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

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

@ -1,45 +1,67 @@
<!-- ----------------------------------------------------------------------------------------------------- --> <!-- ----------------------------------------------------------------------------------------------------- -->
<!-- Empty layout --> <!-- Empty layout -->
<!-- ----------------------------------------------------------------------------------------------------- --> <!-- ----------------------------------------------------------------------------------------------------- -->
<empty-layout *ngIf="layout === 'empty'"></empty-layout> @if (layout === 'empty') {
<empty-layout></empty-layout>
}
<!-- ----------------------------------------------------------------------------------------------------- --> <!-- ----------------------------------------------------------------------------------------------------- -->
<!-- Layouts with horizontal navigation --> <!-- Layouts with horizontal navigation -->
<!-- ----------------------------------------------------------------------------------------------------- --> <!-- ----------------------------------------------------------------------------------------------------- -->
<!-- Centered --> <!-- Centered -->
<centered-layout *ngIf="layout === 'centered'"></centered-layout> @if (layout === 'centered') {
<centered-layout></centered-layout>
}
<!-- Enterprise --> <!-- Enterprise -->
<enterprise-layout *ngIf="layout === 'enterprise'"></enterprise-layout> @if (layout === 'enterprise') {
<enterprise-layout></enterprise-layout>
}
<!-- Material --> <!-- Material -->
<material-layout *ngIf="layout === 'material'"></material-layout> @if (layout === 'material') {
<material-layout></material-layout>
}
<!-- Modern --> <!-- Modern -->
<modern-layout *ngIf="layout === 'modern'"></modern-layout> @if (layout === 'modern') {
<modern-layout></modern-layout>
}
<!-- ----------------------------------------------------------------------------------------------------- --> <!-- ----------------------------------------------------------------------------------------------------- -->
<!-- Layouts with vertical navigation --> <!-- Layouts with vertical navigation -->
<!-- ----------------------------------------------------------------------------------------------------- --> <!-- ----------------------------------------------------------------------------------------------------- -->
<!-- Classic --> <!-- Classic -->
<classic-layout *ngIf="layout === 'classic'"></classic-layout> @if (layout === 'classic') {
<classic-layout></classic-layout>
}
<!-- Classy --> <!-- Classy -->
<classy-layout *ngIf="layout === 'classy'"></classy-layout> @if (layout === 'classy') {
<classy-layout></classy-layout>
}
<!-- Compact --> <!-- Compact -->
<compact-layout *ngIf="layout === 'compact'"></compact-layout> @if (layout === 'compact') {
<compact-layout></compact-layout>
}
<!-- Dense --> <!-- Dense -->
<dense-layout *ngIf="layout === 'dense'"></dense-layout> @if (layout === 'dense') {
<dense-layout></dense-layout>
}
<!-- Futuristic --> <!-- Futuristic -->
<futuristic-layout *ngIf="layout === 'futuristic'"></futuristic-layout> @if (layout === 'futuristic') {
<futuristic-layout></futuristic-layout>
}
<!-- Thin --> <!-- 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 --> <!-- 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 { import {
Component, Component,
Inject, Inject,
@ -33,7 +33,6 @@ import { ThinLayoutComponent } from './layouts/vertical/thin/thin.component';
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
standalone: true, standalone: true,
imports: [ imports: [
NgIf,
EmptyLayoutComponent, EmptyLayoutComponent,
CenteredLayoutComponent, CenteredLayoutComponent,
EnterpriseLayoutComponent, EnterpriseLayoutComponent,

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

@ -7,6 +7,8 @@
<div class="flex flex-auto flex-col"> <div class="flex flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly. <!-- *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! --> 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>
</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 { Component, OnDestroy, ViewEncapsulation } from '@angular/core';
import { RouterOutlet } from '@angular/router'; import { RouterOutlet } from '@angular/router';
import { FuseLoadingBarComponent } from '@fuse/components/loading-bar'; import { FuseLoadingBarComponent } from '@fuse/components/loading-bar';
@ -9,7 +8,7 @@ import { Subject } from 'rxjs';
templateUrl: './empty.component.html', templateUrl: './empty.component.html',
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
standalone: true, standalone: true,
imports: [FuseLoadingBarComponent, NgIf, RouterOutlet], imports: [FuseLoadingBarComponent, RouterOutlet],
}) })
export class EmptyLayoutComponent implements OnDestroy { export class EmptyLayoutComponent implements OnDestroy {
private _unsubscribeAll: Subject<any> = new Subject<any>(); 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" class="flex w-full flex-auto justify-center bg-gray-200 dark:bg-card sm:p-4 md:p-8"
> >
<!-- Navigation --> <!-- Navigation -->
<ng-container *ngIf="isScreenSmall"> @if (isScreenSmall) {
<fuse-vertical-navigation <fuse-vertical-navigation
class="dark bg-gray-900 print:hidden" class="dark bg-gray-900 print:hidden"
[mode]="'over'" [mode]="'over'"
@ -21,7 +21,7 @@
</div> </div>
</ng-container> </ng-container>
</fuse-vertical-navigation> </fuse-vertical-navigation>
</ng-container> }
<!-- Wrapper --> <!-- Wrapper -->
<div <div
@ -31,7 +31,7 @@
<div <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" 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 --> <!-- Logo -->
<div class="mx-2 flex items-center lg:mr-8"> <div class="mx-2 flex items-center lg:mr-8">
<div class="hidden lg:flex"> <div class="hidden lg:flex">
@ -61,9 +61,9 @@
[name]="'mainNavigation'" [name]="'mainNavigation'"
[navigation]="navigation.horizontal" [navigation]="navigation.horizontal"
></fuse-horizontal-navigation> ></fuse-horizontal-navigation>
</ng-container> }
<!-- Navigation toggle button --> <!-- Navigation toggle button -->
<ng-container *ngIf="isScreenSmall"> @if (isScreenSmall) {
<button <button
class="mr-2" class="mr-2"
mat-icon-button mat-icon-button
@ -71,7 +71,7 @@
> >
<mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
</button> </button>
</ng-container> }
<!-- Components --> <!-- Components -->
<div class="ml-auto flex items-center space-x-1 pl-2 sm:space-x-2"> <div class="ml-auto flex items-center space-x-1 pl-2 sm:space-x-2">
<languages></languages> <languages></languages>
@ -88,7 +88,9 @@
<div class="bg-default flex w-full flex-auto flex-col"> <div class="bg-default flex w-full flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly. <!-- *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! --> 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>
<!-- Footer --> <!-- 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 { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
@ -28,7 +27,6 @@ import { Subject, takeUntil } from 'rxjs';
standalone: true, standalone: true,
imports: [ imports: [
FuseLoadingBarComponent, FuseLoadingBarComponent,
NgIf,
FuseVerticalNavigationComponent, FuseVerticalNavigationComponent,
FuseHorizontalNavigationComponent, FuseHorizontalNavigationComponent,
MatButtonModule, MatButtonModule,

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

@ -2,7 +2,7 @@
<fuse-loading-bar></fuse-loading-bar> <fuse-loading-bar></fuse-loading-bar>
<!-- Navigation --> <!-- Navigation -->
<ng-container *ngIf="isScreenSmall"> @if (isScreenSmall) {
<fuse-vertical-navigation <fuse-vertical-navigation
class="dark bg-gray-900 print:hidden" class="dark bg-gray-900 print:hidden"
[mode]="'over'" [mode]="'over'"
@ -22,7 +22,7 @@
</div> </div>
</ng-container> </ng-container>
</fuse-vertical-navigation> </fuse-vertical-navigation>
</ng-container> }
<!-- Wrapper --> <!-- Wrapper -->
<div <div
@ -38,7 +38,7 @@
> >
<div class="flex h-16 w-full max-w-360 items-center sm:h-20"> <div class="flex h-16 w-full max-w-360 items-center sm:h-20">
<!-- Logo --> <!-- Logo -->
<ng-container *ngIf="!isScreenSmall"> @if (!isScreenSmall) {
<div class="flex items-center"> <div class="flex items-center">
<img <img
class="w-24" class="w-24"
@ -46,9 +46,9 @@
alt="Logo image" alt="Logo image"
/> />
</div> </div>
</ng-container> }
<!-- Navigation toggle button --> <!-- Navigation toggle button -->
<ng-container *ngIf="isScreenSmall"> @if (isScreenSmall) {
<button <button
mat-icon-button mat-icon-button
(click)="toggleNavigation('mainNavigation')" (click)="toggleNavigation('mainNavigation')"
@ -57,7 +57,7 @@
[svgIcon]="'heroicons_outline:bars-3'" [svgIcon]="'heroicons_outline:bars-3'"
></mat-icon> ></mat-icon>
</button> </button>
</ng-container> }
<!-- Components --> <!-- Components -->
<div <div
class="ml-auto flex items-center space-x-0.5 pl-2 sm:space-x-2" class="ml-auto flex items-center space-x-0.5 pl-2 sm:space-x-2"
@ -84,7 +84,7 @@
</div> </div>
</div> </div>
<!-- Bottom bar --> <!-- Bottom bar -->
<ng-container *ngIf="!isScreenSmall"> @if (!isScreenSmall) {
<div <div
class="bg-card flex flex-auto justify-center px-4 dark:bg-gray-700 md:px-8" class="bg-card flex flex-auto justify-center px-4 dark:bg-gray-700 md:px-8"
> >
@ -96,7 +96,7 @@
></fuse-horizontal-navigation> ></fuse-horizontal-navigation>
</div> </div>
</div> </div>
</ng-container> }
</div> </div>
<!-- Content --> <!-- Content -->
@ -106,7 +106,9 @@
> >
<!-- *ngIf="true" hack is required here for router-outlet to work correctly. <!-- *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! --> 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>
</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 { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
@ -29,7 +28,6 @@ import { Subject, takeUntil } from 'rxjs';
standalone: true, standalone: true,
imports: [ imports: [
FuseLoadingBarComponent, FuseLoadingBarComponent,
NgIf,
FuseVerticalNavigationComponent, FuseVerticalNavigationComponent,
MatButtonModule, MatButtonModule,
MatIconModule, MatIconModule,

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

@ -2,7 +2,7 @@
<fuse-loading-bar></fuse-loading-bar> <fuse-loading-bar></fuse-loading-bar>
<!-- Navigation --> <!-- Navigation -->
<ng-container *ngIf="isScreenSmall"> @if (isScreenSmall) {
<fuse-vertical-navigation <fuse-vertical-navigation
class="dark bg-gray-900 print:hidden" class="dark bg-gray-900 print:hidden"
[mode]="'over'" [mode]="'over'"
@ -22,7 +22,7 @@
</div> </div>
</ng-container> </ng-container>
</fuse-vertical-navigation> </fuse-vertical-navigation>
</ng-container> }
<!-- Wrapper --> <!-- Wrapper -->
<div <div
@ -40,7 +40,7 @@
class="relative flex h-16 flex-0 flex-auto items-center px-4 md:px-6" class="relative flex h-16 flex-0 flex-auto items-center px-4 md:px-6"
> >
<!-- Logo --> <!-- Logo -->
<ng-container *ngIf="!isScreenSmall"> @if (!isScreenSmall) {
<div class="mx-2 flex items-center"> <div class="mx-2 flex items-center">
<!-- Light version --> <!-- Light version -->
<img <img
@ -55,9 +55,9 @@
alt="Logo image" alt="Logo image"
/> />
</div> </div>
</ng-container> }
<!-- Navigation toggle button --> <!-- Navigation toggle button -->
<ng-container *ngIf="isScreenSmall"> @if (isScreenSmall) {
<button <button
mat-icon-button mat-icon-button
(click)="toggleNavigation('mainNavigation')" (click)="toggleNavigation('mainNavigation')"
@ -66,7 +66,7 @@
[svgIcon]="'heroicons_outline:bars-3'" [svgIcon]="'heroicons_outline:bars-3'"
></mat-icon> ></mat-icon>
</button> </button>
</ng-container> }
<!-- Components --> <!-- Components -->
<div <div
class="ml-auto flex items-center space-x-1 pl-2 sm:space-x-2" class="ml-auto flex items-center space-x-1 pl-2 sm:space-x-2"
@ -81,7 +81,7 @@
</div> </div>
</div> </div>
<!-- Bottom bar --> <!-- Bottom bar -->
<ng-container *ngIf="!isScreenSmall"> @if (!isScreenSmall) {
<div <div
class="relative flex h-16 flex-0 flex-auto items-center px-4" class="relative flex h-16 flex-0 flex-auto items-center px-4"
> >
@ -90,7 +90,7 @@
[navigation]="navigation.horizontal" [navigation]="navigation.horizontal"
></fuse-horizontal-navigation> ></fuse-horizontal-navigation>
</div> </div>
</ng-container> }
</div> </div>
</div> </div>
@ -101,7 +101,9 @@
> >
<!-- *ngIf="true" hack is required here for router-outlet to work correctly. <!-- *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! --> 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>
</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 { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
@ -28,7 +27,6 @@ import { Subject, takeUntil } from 'rxjs';
standalone: true, standalone: true,
imports: [ imports: [
FuseLoadingBarComponent, FuseLoadingBarComponent,
NgIf,
FuseVerticalNavigationComponent, FuseVerticalNavigationComponent,
MatButtonModule, MatButtonModule,
MatIconModule, MatIconModule,

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

@ -2,7 +2,7 @@
<fuse-loading-bar></fuse-loading-bar> <fuse-loading-bar></fuse-loading-bar>
<!-- Navigation --> <!-- Navigation -->
<ng-container *ngIf="isScreenSmall"> @if (isScreenSmall) {
<fuse-vertical-navigation <fuse-vertical-navigation
class="dark bg-gray-900 print:hidden" class="dark bg-gray-900 print:hidden"
[mode]="'over'" [mode]="'over'"
@ -22,7 +22,7 @@
</div> </div>
</ng-container> </ng-container>
</fuse-vertical-navigation> </fuse-vertical-navigation>
</ng-container> }
<!-- Wrapper --> <!-- Wrapper -->
<div class="flex w-full min-w-0 flex-auto flex-col"> <div class="flex w-full min-w-0 flex-auto flex-col">
@ -30,7 +30,7 @@
<div <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" 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 --> <!-- Logo -->
<div class="mx-2 flex items-center lg:mr-8"> <div class="mx-2 flex items-center lg:mr-8">
<div class="hidden lg:flex"> <div class="hidden lg:flex">
@ -51,16 +51,16 @@
[name]="'mainNavigation'" [name]="'mainNavigation'"
[navigation]="navigation.horizontal" [navigation]="navigation.horizontal"
></fuse-horizontal-navigation> ></fuse-horizontal-navigation>
</ng-container> }
<!-- Navigation toggle button --> <!-- Navigation toggle button -->
<ng-container *ngIf="isScreenSmall"> @if (isScreenSmall) {
<button <button
mat-icon-button mat-icon-button
(click)="toggleNavigation('mainNavigation')" (click)="toggleNavigation('mainNavigation')"
> >
<mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
</button> </button>
</ng-container> }
<!-- Components --> <!-- Components -->
<div class="ml-auto flex items-center space-x-0.5 pl-2 sm:space-x-2"> <div class="ml-auto flex items-center space-x-0.5 pl-2 sm:space-x-2">
<languages></languages> <languages></languages>
@ -86,7 +86,9 @@
<div class="flex w-full flex-auto flex-col"> <div class="flex w-full flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly. <!-- *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! --> 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>
<!-- Footer --> <!-- 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 { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
@ -29,7 +28,6 @@ import { Subject, takeUntil } from 'rxjs';
standalone: true, standalone: true,
imports: [ imports: [
FuseLoadingBarComponent, FuseLoadingBarComponent,
NgIf,
FuseVerticalNavigationComponent, FuseVerticalNavigationComponent,
FuseHorizontalNavigationComponent, FuseHorizontalNavigationComponent,
MatButtonModule, MatButtonModule,

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

@ -64,7 +64,9 @@
<div class="flex flex-auto flex-col"> <div class="flex flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly. <!-- *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! --> 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>
<!-- Footer --> <!-- 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 { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
@ -38,7 +37,6 @@ import { Subject, takeUntil } from 'rxjs';
MessagesComponent, MessagesComponent,
NotificationsComponent, NotificationsComponent,
UserComponent, UserComponent,
NgIf,
RouterOutlet, RouterOutlet,
QuickChatComponent, QuickChatComponent,
], ],

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

@ -25,17 +25,19 @@
<!-- User --> <!-- User -->
<div class="flex w-full flex-col items-center p-4"> <div class="flex w-full flex-col items-center p-4">
<div class="relative h-24 w-24"> <div class="relative h-24 w-24">
<img @if (user.avatar) {
class="h-full w-full rounded-full" <img
*ngIf="user.avatar" class="h-full w-full rounded-full"
[src]="user.avatar" [src]="user.avatar"
alt="User avatar" alt="User avatar"
/> />
<mat-icon }
class="icon-size-24" @if (!user.avatar) {
*ngIf="!user.avatar" <mat-icon
[svgIcon]="'heroicons_solid:user-circle'" class="icon-size-24"
></mat-icon> [svgIcon]="'heroicons_solid:user-circle'"
></mat-icon>
}
</div> </div>
<div class="mt-6 flex w-full flex-col items-center justify-center"> <div class="mt-6 flex w-full flex-col items-center justify-center">
<div <div
@ -94,7 +96,9 @@
<div class="flex flex-auto flex-col"> <div class="flex flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly. <!-- *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! --> 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>
<!-- Footer --> <!-- 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 { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
@ -33,7 +32,6 @@ import { Subject, takeUntil } from 'rxjs';
FuseVerticalNavigationComponent, FuseVerticalNavigationComponent,
NotificationsComponent, NotificationsComponent,
UserComponent, UserComponent,
NgIf,
MatIconModule, MatIconModule,
MatButtonModule, MatButtonModule,
LanguagesComponent, LanguagesComponent,

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

@ -54,7 +54,9 @@
<div class="flex flex-auto flex-col"> <div class="flex flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly. <!-- *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! --> 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>
<!-- Footer --> <!-- 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 { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
@ -37,7 +36,6 @@ import { Subject, takeUntil } from 'rxjs';
MessagesComponent, MessagesComponent,
NotificationsComponent, NotificationsComponent,
UserComponent, UserComponent,
NgIf,
RouterOutlet, RouterOutlet,
QuickChatComponent, QuickChatComponent,
FuseVerticalNavigationComponent, FuseVerticalNavigationComponent,

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

@ -69,7 +69,9 @@
<div class="flex flex-auto flex-col"> <div class="flex flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly. <!-- *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! --> 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>
<!-- Footer --> <!-- 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 { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
@ -38,7 +37,6 @@ import { Subject, takeUntil } from 'rxjs';
MessagesComponent, MessagesComponent,
NotificationsComponent, NotificationsComponent,
UserComponent, UserComponent,
NgIf,
RouterOutlet, RouterOutlet,
QuickChatComponent, QuickChatComponent,
], ],

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

@ -75,7 +75,9 @@
<div class="flex flex-auto flex-col"> <div class="flex flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly. <!-- *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! --> 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>
<!-- Footer --> <!-- 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 { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
@ -40,7 +39,6 @@ import { Subject, takeUntil } from 'rxjs';
ShortcutsComponent, ShortcutsComponent,
MessagesComponent, MessagesComponent,
NotificationsComponent, NotificationsComponent,
NgIf,
RouterOutlet, RouterOutlet,
QuickChatComponent, QuickChatComponent,
], ],

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

@ -58,7 +58,9 @@
<div class="flex flex-auto flex-col"> <div class="flex flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly. <!-- *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! --> 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>
<!-- Footer --> <!-- 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 { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
@ -38,7 +37,6 @@ import { Subject, takeUntil } from 'rxjs';
MessagesComponent, MessagesComponent,
NotificationsComponent, NotificationsComponent,
UserComponent, UserComponent,
NgIf,
RouterOutlet, RouterOutlet,
QuickChatComponent, QuickChatComponent,
], ],

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

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

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

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

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

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

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

@ -8,20 +8,20 @@
#drawer #drawer
> >
<!-- New chat --> <!-- New chat -->
<ng-container *ngIf="drawerComponent === 'new-chat'"> @if (drawerComponent === 'new-chat') {
<chat-new-chat [drawer]="drawer"></chat-new-chat> <chat-new-chat [drawer]="drawer"></chat-new-chat>
</ng-container> }
<!-- Profile --> <!-- Profile -->
<ng-container *ngIf="drawerComponent === 'profile'"> @if (drawerComponent === 'profile') {
<chat-profile [drawer]="drawer"></chat-profile> <chat-profile [drawer]="drawer"></chat-profile>
</ng-container> }
</mat-drawer> </mat-drawer>
<!-- Drawer content --> <!-- Drawer content -->
<mat-drawer-content class="flex overflow-hidden"> <mat-drawer-content class="flex overflow-hidden">
<!-- Chats list --> <!-- Chats list -->
<ng-container *ngIf="chats && chats.length > 0; else noChats"> @if (chats && chats.length > 0) {
<div <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" 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()" (click)="openProfile()"
> >
<div class="h-10 w-10"> <div class="h-10 w-10">
<ng-container *ngIf="profile.avatar"> @if (profile.avatar) {
<img <img
class="h-full w-full rounded-full object-cover object-cover" class="h-full w-full rounded-full object-cover"
[src]="profile.avatar" [src]="profile.avatar"
alt="Profile avatar" alt="Profile avatar"
/> />
</ng-container> }
<ng-container *ngIf="!profile.avatar"> @if (!profile.avatar) {
<div <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" 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) }} {{ profile.name.charAt(0) }}
</div> </div>
</ng-container> }
</div> </div>
<div class="ml-4 truncate font-medium"> <div class="ml-4 truncate font-medium">
{{ profile.name }} {{ profile.name }}
@ -152,15 +152,11 @@
<!-- Chats --> <!-- Chats -->
<div class="flex-auto overflow-y-auto"> <div class="flex-auto overflow-y-auto">
<ng-container @if (filteredChats.length > 0) {
*ngIf="filteredChats.length > 0; else noChats" @for (
> chat of filteredChats;
<ng-container track trackByFn($index, chat)
*ngFor=" ) {
let chat of filteredChats;
trackBy: trackByFn
"
>
<a <a
class="z-20 flex cursor-pointer items-center border-b px-8 py-5" class="z-20 flex cursor-pointer items-center border-b px-8 py-5"
[ngClass]="{ [ngClass]="{
@ -169,16 +165,14 @@
selectedChat.id !== chat.id, selectedChat.id !== chat.id,
'bg-primary-50 dark:bg-hover': 'bg-primary-50 dark:bg-hover':
selectedChat && selectedChat &&
selectedChat.id === chat.id selectedChat.id === chat.id,
}" }"
[routerLink]="[chat.id]" [routerLink]="[chat.id]"
> >
<div <div
class="relative flex h-10 w-10 flex-0 items-center justify-center" class="relative flex h-10 w-10 flex-0 items-center justify-center"
> >
<ng-container @if (chat.unreadCount > 0) {
*ngIf="chat.unreadCount > 0"
>
<div <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-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]=" [class.ring-primary-50]="
@ -186,19 +180,15 @@
selectedChat.id === chat.id selectedChat.id === chat.id
" "
></div> ></div>
</ng-container> }
<ng-container @if (chat.contact.avatar) {
*ngIf="chat.contact.avatar"
>
<img <img
class="h-full w-full rounded-full object-cover" class="h-full w-full rounded-full object-cover"
[src]="chat.contact.avatar" [src]="chat.contact.avatar"
alt="Contact avatar" alt="Contact avatar"
/> />
</ng-container> }
<ng-container @if (!chat.contact.avatar) {
*ngIf="!chat.contact.avatar"
>
<div <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" 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) chat.contact.name.charAt(0)
}} }}
</div> </div>
</ng-container> }
</div> </div>
<div class="ml-4 min-w-0"> <div class="ml-4 min-w-0">
<div <div
@ -234,24 +224,37 @@
> >
{{ chat.lastMessageAt }} {{ chat.lastMessageAt }}
</div> </div>
<ng-container *ngIf="chat.muted"> @if (chat.muted) {
<mat-icon <mat-icon
class="text-hint icon-size-5" class="text-hint icon-size-5"
[svgIcon]=" [svgIcon]="
'heroicons_solid:speaker-x-mark' 'heroicons_solid:speaker-x-mark'
" "
></mat-icon> ></mat-icon>
</ng-container> }
</div> </div>
</a> </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>
</div> </div>
</ng-container> } @else {
<!-- No chats template -->
<ng-template #noChats>
<div <div
class="flex h-full flex-auto flex-col items-center justify-center" class="flex h-full flex-auto flex-col items-center justify-center"
> >
@ -267,21 +270,23 @@
No chats No chats
</div> </div>
</div> </div>
</ng-template> }
<!-- No chats template -->
<!-- Conversation --> <!-- Conversation -->
<ng-container *ngIf="chats && chats.length > 0"> @if (chats && chats.length > 0) {
<div <div
class="flex-auto border-l" class="flex-auto border-l"
[ngClass]="{ [ngClass]="{
'absolute inset-0 z-20 flex lg:static lg:inset-auto': 'absolute inset-0 z-20 flex lg:static lg:inset-auto':
selectedChat && selectedChat.id, selectedChat && selectedChat.id,
'hidden lg:flex': !selectedChat || !selectedChat.id 'hidden lg:flex': !selectedChat || !selectedChat.id,
}" }"
> >
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>
</ng-container> }
</mat-drawer-content> </mat-drawer-content>
</mat-drawer-container> </mat-drawer-container>
</div> </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 { import {
ChangeDetectionStrategy, ChangeDetectionStrategy,
ChangeDetectorRef, ChangeDetectorRef,
@ -28,7 +28,6 @@ import { Subject, takeUntil } from 'rxjs';
standalone: true, standalone: true,
imports: [ imports: [
MatSidenavModule, MatSidenavModule,
NgIf,
NewChatComponent, NewChatComponent,
ProfileComponent, ProfileComponent,
MatButtonModule, MatButtonModule,
@ -36,7 +35,6 @@ import { Subject, takeUntil } from 'rxjs';
MatMenuModule, MatMenuModule,
MatFormFieldModule, MatFormFieldModule,
MatInputModule, MatInputModule,
NgFor,
NgClass, NgClass,
RouterLink, RouterLink,
RouterOutlet, RouterOutlet,

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

@ -13,20 +13,20 @@
<!-- Contact avatar & info --> <!-- Contact avatar & info -->
<div class="mt-8 flex flex-col items-center"> <div class="mt-8 flex flex-col items-center">
<div class="h-40 w-40 rounded-full"> <div class="h-40 w-40 rounded-full">
<ng-container *ngIf="chat.contact.avatar"> @if (chat.contact.avatar) {
<img <img
class="h-full w-full rounded-full object-cover" class="h-full w-full rounded-full object-cover"
[src]="chat.contact.avatar" [src]="chat.contact.avatar"
[alt]="'Contact avatar'" [alt]="'Contact avatar'"
/> />
</ng-container> }
<ng-container *ngIf="!chat.contact.avatar"> @if (!chat.contact.avatar) {
<div <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" 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) }} {{ chat.contact.name.charAt(0) }}
</div> </div>
</ng-container> }
</div> </div>
<div class="mt-4 text-lg font-medium">{{ chat.contact.name }}</div> <div class="mt-4 text-lg font-medium">{{ chat.contact.name }}</div>
<div class="text-secondary mt-0.5 text-md"> <div class="text-secondary mt-0.5 text-md">
@ -38,24 +38,22 @@
<!-- Media --> <!-- Media -->
<div class="text-lg font-medium">Media</div> <div class="text-lg font-medium">Media</div>
<div class="mt-4 grid grid-cols-4 gap-1"> <div class="mt-4 grid grid-cols-4 gap-1">
<ng-container @for (media of chat.contact.attachments.media; track media) {
*ngFor="let media of chat.contact.attachments.media"
>
<img class="h-20 rounded object-cover" [src]="media" /> <img class="h-20 rounded object-cover" [src]="media" />
</ng-container> }
</div> </div>
<!-- Details --> <!-- Details -->
<div class="mt-10 space-y-4"> <div class="mt-10 space-y-4">
<div class="mb-3 text-lg font-medium">Details</div> <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>
<div class="text-secondary font-medium">Email</div> <div class="text-secondary font-medium">Email</div>
<div class=""> <div class="">
{{ chat.contact.details.emails[0].email }} {{ chat.contact.details.emails[0].email }}
</div> </div>
</div> </div>
</ng-container> }
<ng-container *ngIf="chat.contact.details.phoneNumbers.length"> @if (chat.contact.details.phoneNumbers.length) {
<div> <div>
<div class="text-secondary font-medium"> <div class="text-secondary font-medium">
Phone number Phone number
@ -66,31 +64,31 @@
}} }}
</div> </div>
</div> </div>
</ng-container> }
<ng-container *ngIf="chat.contact.details.title"> @if (chat.contact.details.title) {
<div> <div>
<div class="text-secondary font-medium">Title</div> <div class="text-secondary font-medium">Title</div>
<div class="">{{ chat.contact.details.title }}</div> <div class="">{{ chat.contact.details.title }}</div>
</div> </div>
</ng-container> }
<ng-container *ngIf="chat.contact.details.company"> @if (chat.contact.details.company) {
<div> <div>
<div class="text-secondary font-medium">Company</div> <div class="text-secondary font-medium">Company</div>
<div class="">{{ chat.contact.details.company }}</div> <div class="">{{ chat.contact.details.company }}</div>
</div> </div>
</ng-container> }
<ng-container *ngIf="chat.contact.details.birthday"> @if (chat.contact.details.birthday) {
<div> <div>
<div class="text-secondary font-medium">Birthday</div> <div class="text-secondary font-medium">Birthday</div>
<div class="">{{ chat.contact.details.birthday }}</div> <div class="">{{ chat.contact.details.birthday }}</div>
</div> </div>
</ng-container> }
<ng-container *ngIf="chat.contact.details.address"> @if (chat.contact.details.address) {
<div> <div>
<div class="text-secondary font-medium">Address</div> <div class="text-secondary font-medium">Address</div>
<div class="">{{ chat.contact.details.address }}</div> <div class="">{{ chat.contact.details.address }}</div>
</div> </div>
</ng-container> }
</div> </div>
</div> </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 { import {
ChangeDetectionStrategy, ChangeDetectionStrategy,
Component, Component,
@ -16,7 +15,7 @@ import { Chat } from 'app/modules/admin/apps/chat/chat.types';
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true, standalone: true,
imports: [MatButtonModule, MatIconModule, NgIf, NgFor], imports: [MatButtonModule, MatIconModule],
}) })
export class ContactInfoComponent { export class ContactInfoComponent {
@Input() chat: Chat; @Input() chat: Chat;

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

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

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

@ -14,28 +14,23 @@
</div> </div>
<div class="relative overflow-y-auto"> <div class="relative overflow-y-auto">
<ng-container *ngIf="contacts.length; else noContacts"> @if (contacts.length) {
<ng-container @for (
*ngFor=" contact of contacts;
let contact of contacts; track trackByFn(i, contact);
let i = index; let i = $index
trackBy: trackByFn ) {
"
>
<!-- Group --> <!-- Group -->
<ng-container @if (
*ngIf=" i === 0 ||
i === 0 || contact.name.charAt(0) !== contacts[i - 1].name.charAt(0)
contact.name.charAt(0) !== ) {
contacts[i - 1].name.charAt(0)
"
>
<div <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" 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) }} {{ contact.name.charAt(0) }}
</div> </div>
</ng-container> }
<!-- Contact --> <!-- Contact -->
<div <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" 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 <div
class="flex h-10 w-10 flex-0 items-center justify-center overflow-hidden rounded-full" 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 <img
class="h-full w-full object-cover" class="h-full w-full object-cover"
[src]="contact.avatar" [src]="contact.avatar"
alt="Contact avatar" alt="Contact avatar"
/> />
</ng-container> }
<ng-container *ngIf="!contact.avatar"> @if (!contact.avatar) {
<div <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" 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) }} {{ contact.name.charAt(0) }}
</div> </div>
</ng-container> }
</div> </div>
<div class="ml-4 min-w-0"> <div class="ml-4 min-w-0">
<div class="truncate font-medium leading-5"> <div class="truncate font-medium leading-5">
@ -67,16 +62,15 @@
</div> </div>
</div> </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> </div>
<!-- No contacts --> <!-- 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>

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 { import {
ChangeDetectionStrategy, ChangeDetectionStrategy,
Component, Component,
@ -20,7 +19,7 @@ import { Subject, takeUntil } from 'rxjs';
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true, standalone: true,
imports: [MatButtonModule, MatIconModule, NgIf, NgFor], imports: [MatButtonModule, MatIconModule],
}) })
export class NewChatComponent implements OnInit, OnDestroy { export class NewChatComponent implements OnInit, OnDestroy {
@Input() drawer: MatDrawer; @Input() drawer: MatDrawer;

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

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

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

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

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

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

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

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

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

@ -11,18 +11,18 @@
<div <div
class="flex h-full items-center justify-center rounded-lg border bg-gray-50 dark:bg-card" 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 <mat-icon
class="text-hint icon-size-24" class="text-hint icon-size-24"
[svgIcon]="'heroicons_outline:folder'" [svgIcon]="'heroicons_outline:folder'"
></mat-icon> ></mat-icon>
</ng-container> }
<ng-container *ngIf="item.type !== 'folder'"> @if (item.type !== 'folder') {
<mat-icon <mat-icon
class="text-hint icon-size-24" class="text-hint icon-size-24"
[svgIcon]="'heroicons_outline:document'" [svgIcon]="'heroicons_outline:document'"
></mat-icon> ></mat-icon>
</ng-container> }
</div> </div>
</div> </div>
@ -61,12 +61,12 @@
<div class="text-secondary">Size</div> <div class="text-secondary">Size</div>
<div>{{ item.size }}</div> <div>{{ item.size }}</div>
</div> </div>
<ng-container *ngIf="item.contents"> @if (item.contents) {
<div class="flex items-center justify-between py-3"> <div class="flex items-center justify-between py-3">
<div class="text-secondary">Contents</div> <div class="text-secondary">Contents</div>
<div>{{ item.contents }}</div> <div>{{ item.contents }}</div>
</div> </div>
</ng-container> }
</div> </div>
<!-- Description --> <!-- Description -->
@ -81,14 +81,14 @@
</div> </div>
<div class="mt-2 flex border-t"> <div class="mt-2 flex border-t">
<div class="py-3"> <div class="py-3">
<ng-container *ngIf="item.description"> @if (item.description) {
<div>{{ item.description }}</div> <div>{{ item.description }}</div>
</ng-container> }
<ng-container *ngIf="!item.description"> @if (!item.description) {
<div class="text-secondary italic"> <div class="text-secondary italic">
Click here to add a description Click here to add a description
</div> </div>
</ng-container> }
</div> </div>
</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 { import {
ChangeDetectionStrategy, ChangeDetectionStrategy,
ChangeDetectorRef, ChangeDetectorRef,
@ -22,7 +21,7 @@ import { Subject, takeUntil } from 'rxjs';
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true, standalone: true,
imports: [MatButtonModule, RouterLink, MatIconModule, NgIf], imports: [MatButtonModule, RouterLink, MatIconModule],
}) })
export class FileManagerDetailsComponent implements OnInit, OnDestroy { export class FileManagerDetailsComponent implements OnInit, OnDestroy {
item: Item; item: Item;

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

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

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

@ -15,18 +15,20 @@
> >
Frequently Asked Questions Frequently Asked Questions
</div> </div>
<ng-container @for (
*ngFor="let faqCategory of faqCategories; trackBy: trackByFn" faqCategory of faqCategories;
> track trackByFn($index, faqCategory)
) {
<div <div
class="mt-12 text-3xl font-bold leading-tight tracking-tight sm:mt-16" class="mt-12 text-3xl font-bold leading-tight tracking-tight sm:mt-16"
> >
{{ faqCategory.title }} {{ faqCategory.title }}
</div> </div>
<mat-accordion class="mt-8 max-w-4xl"> <mat-accordion class="mt-8 max-w-4xl">
<ng-container @for (
*ngFor="let faq of faqCategory.faqs; trackBy: trackByFn" faq of faqCategory.faqs;
> track trackByFn($index, faq)
) {
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header <mat-expansion-panel-header
[collapsedHeight]="'56px'" [collapsedHeight]="'56px'"
@ -38,9 +40,9 @@
</mat-expansion-panel-header> </mat-expansion-panel-header>
{{ faq.answer }} {{ faq.answer }}
</mat-expansion-panel> </mat-expansion-panel>
</ng-container> }
</mat-accordion> </mat-accordion>
</ng-container> }
</div> </div>
</div> </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 { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatExpansionModule } from '@angular/material/expansion'; import { MatExpansionModule } from '@angular/material/expansion';
@ -13,13 +12,7 @@ import { Subject, takeUntil } from 'rxjs';
templateUrl: './faqs.component.html', templateUrl: './faqs.component.html',
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
standalone: true, standalone: true,
imports: [ imports: [MatButtonModule, RouterLink, MatIconModule, MatExpansionModule],
MatButtonModule,
RouterLink,
MatIconModule,
NgFor,
MatExpansionModule,
],
}) })
export class HelpCenterFaqsComponent implements OnInit, OnDestroy { export class HelpCenterFaqsComponent implements OnInit, OnDestroy {
faqCategories: FaqCategory[]; faqCategories: FaqCategory[];

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

@ -17,19 +17,17 @@
</div> </div>
<!-- Guides --> <!-- Guides -->
<div class="mt-8 flex flex-col items-start space-y-2 sm:mt-12"> <div class="mt-8 flex flex-col items-start space-y-2 sm:mt-12">
<ng-container @for (
*ngFor=" guide of guideCategory.guides;
let guide of guideCategory.guides; track trackByFn($index, guide)
trackBy: trackByFn ) {
"
>
<a <a
class="font-medium text-primary-500 hover:underline" class="font-medium text-primary-500 hover:underline"
[routerLink]="[guide.slug]" [routerLink]="[guide.slug]"
> >
{{ guide.title }} {{ guide.title }}
</a> </a>
</ng-container> }
</div> </div>
</div> </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 { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
@ -12,7 +11,7 @@ import { Subject, takeUntil } from 'rxjs';
templateUrl: './category.component.html', templateUrl: './category.component.html',
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
standalone: true, standalone: true,
imports: [MatButtonModule, RouterLink, MatIconModule, NgFor], imports: [MatButtonModule, RouterLink, MatIconModule],
}) })
export class HelpCenterGuidesCategoryComponent implements OnInit, OnDestroy { export class HelpCenterGuidesCategoryComponent implements OnInit, OnDestroy {
guideCategory: GuideCategory; guideCategory: GuideCategory;

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

@ -19,12 +19,10 @@
<div <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" 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 @for (
*ngFor=" guideCategory of guideCategories;
let guideCategory of guideCategories; track trackByFn($index, guideCategory)
trackBy: trackByFn ) {
"
>
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<a <a
class="mb-1 flex items-center text-2xl font-semibold" class="mb-1 flex items-center text-2xl font-semibold"
@ -32,37 +30,38 @@
> >
{{ guideCategory.title }} {{ guideCategory.title }}
</a> </a>
<ng-container @for (
*ngFor=" guide of guideCategory.guides;
let guide of guideCategory.guides; track trackByFn($index, guide)
trackBy: trackByFn ) {
"
>
<a <a
class="mt-3 font-medium text-primary-500 hover:underline" class="mt-3 font-medium text-primary-500 hover:underline"
[routerLink]="[guideCategory.slug, guide.slug]" [routerLink]="[guideCategory.slug, guide.slug]"
> >
{{ guide.title }} {{ guide.title }}
</a> </a>
</ng-container> }
<a @if (
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" guideCategory.totalGuides >
*ngIf=" guideCategory.visibleGuides
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" [routerLink]="guideCategory.slug"
>
<span class="text-secondary text-sm font-medium"
>View All</span
> >
<mat-icon <span class="text-secondary text-sm font-medium"
class="ml-2 icon-size-5" >View All</span
[svgIcon]="'heroicons_mini:arrow-long-right'" >
></mat-icon> <mat-icon
</a> class="ml-2 icon-size-5"
[svgIcon]="
'heroicons_mini:arrow-long-right'
"
></mat-icon>
</a>
}
</div> </div>
</ng-container> }
</div> </div>
</div> </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 { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
@ -12,7 +11,7 @@ import { Subject, takeUntil } from 'rxjs';
templateUrl: './guides.component.html', templateUrl: './guides.component.html',
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
standalone: true, standalone: true,
imports: [MatButtonModule, RouterLink, MatIconModule, NgFor, NgIf], imports: [MatButtonModule, RouterLink, MatIconModule],
}) })
export class HelpCenterGuidesComponent implements OnInit, OnDestroy { export class HelpCenterGuidesComponent implements OnInit, OnDestroy {
guideCategories: GuideCategory[]; guideCategories: GuideCategory[];

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

@ -134,16 +134,14 @@
getting started getting started
</div> </div>
<mat-accordion class="mt-12 max-w-4xl"> <mat-accordion class="mt-12 max-w-4xl">
<ng-container @for (faq of faqCategory.faqs; track trackByFn($index, faq)) {
*ngFor="let faq of faqCategory.faqs; trackBy: trackByFn"
>
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header [collapsedHeight]="'56px'"> <mat-expansion-panel-header [collapsedHeight]="'56px'">
<mat-panel-title>{{ faq.question }}</mat-panel-title> <mat-panel-title>{{ faq.question }}</mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
{{ faq.answer }} {{ faq.answer }}
</mat-expansion-panel> </mat-expansion-panel>
</ng-container> }
</mat-accordion> </mat-accordion>
</div> </div>
</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 { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { MatExpansionModule } from '@angular/material/expansion'; import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
@ -20,7 +19,6 @@ import { Subject, takeUntil } from 'rxjs';
MatIconModule, MatIconModule,
RouterLink, RouterLink,
MatExpansionModule, MatExpansionModule,
NgFor,
], ],
}) })
export class HelpCenterComponent implements OnInit, OnDestroy { 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" class="bg-card mt-8 rounded-2xl p-6 pb-7 shadow sm:mt-12 sm:p-10 sm:pb-7"
> >
<!-- Alert --> <!-- Alert -->
<fuse-alert @if (alert) {
class="mb-8" <fuse-alert
*ngIf="alert" class="mb-8"
[type]="alert.type" [type]="alert.type"
[showIcon]="false" [showIcon]="false"
> >
{{ alert.message }} {{ alert.message }}
</fuse-alert> </fuse-alert>
}
<form <form
class="space-y-3" class="space-y-3"
[formGroup]="supportForm" [formGroup]="supportForm"
@ -50,11 +51,9 @@
[required]="true" [required]="true"
/> />
<mat-label>Name</mat-label> <mat-label>Name</mat-label>
<mat-error @if (supportForm.get('name').hasError('required')) {
*ngIf="supportForm.get('name').hasError('required')" <mat-error> Required </mat-error>
> }
Required
</mat-error>
</mat-form-field> </mat-form-field>
<!-- Email --> <!-- Email -->
<mat-form-field class="w-full"> <mat-form-field class="w-full">
@ -65,18 +64,12 @@
[required]="true" [required]="true"
/> />
<mat-label>Email</mat-label> <mat-label>Email</mat-label>
<mat-error @if (supportForm.get('email').hasError('required')) {
*ngIf=" <mat-error> Required </mat-error>
supportForm.get('email').hasError('required') }
" @if (supportForm.get('email').hasError('email')) {
> <mat-error> Enter a valid email address </mat-error>
Required }
</mat-error>
<mat-error
*ngIf="supportForm.get('email').hasError('email')"
>
Enter a valid email address
</mat-error>
</mat-form-field> </mat-form-field>
<!-- Subject --> <!-- Subject -->
<mat-form-field class="w-full"> <mat-form-field class="w-full">
@ -86,13 +79,9 @@
[required]="true" [required]="true"
/> />
<mat-label>Subject</mat-label> <mat-label>Subject</mat-label>
<mat-error @if (supportForm.get('subject').hasError('required')) {
*ngIf=" <mat-error> Required </mat-error>
supportForm.get('subject').hasError('required') }
"
>
Required
</mat-error>
</mat-form-field> </mat-form-field>
<!-- Message --> <!-- Message -->
<mat-form-field class="w-full"> <mat-form-field class="w-full">
@ -104,13 +93,9 @@
cdkTextareaAutosize cdkTextareaAutosize
></textarea> ></textarea>
<mat-label>Message</mat-label> <mat-label>Message</mat-label>
<mat-error @if (supportForm.get('message').hasError('required')) {
*ngIf=" <mat-error> Required </mat-error>
supportForm.get('message').hasError('required') }
"
>
Required
</mat-error>
</mat-form-field> </mat-form-field>
<!-- Actions --> <!-- Actions -->
<div class="flex items-center justify-end"> <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 { TextFieldModule } from '@angular/cdk/text-field';
import { NgIf } from '@angular/common';
import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { import {
FormsModule, FormsModule,
@ -28,7 +28,6 @@ import { HelpCenterService } from 'app/modules/admin/apps/help-center/help-cente
MatButtonModule, MatButtonModule,
RouterLink, RouterLink,
MatIconModule, MatIconModule,
NgIf,
FuseAlertComponent, FuseAlertComponent,
FormsModule, FormsModule,
ReactiveFormsModule, ReactiveFormsModule,

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

@ -22,34 +22,40 @@
<mat-label>To</mat-label> <mat-label>To</mat-label>
<input matInput [formControlName]="'to'" /> <input matInput [formControlName]="'to'" />
<div class="copy-fields-toggles" matSuffix> <div class="copy-fields-toggles" matSuffix>
<span @if (!copyFields.cc) {
class="cursor-pointer select-none text-sm font-medium hover:underline" <span
*ngIf="!copyFields.cc" class="cursor-pointer select-none text-sm font-medium hover:underline"
(click)="showCopyField('cc')" (click)="showCopyField('cc')"
> >
Cc Cc
</span> </span>
<span }
class="ml-2 cursor-pointer select-none text-sm font-medium hover:underline" @if (!copyFields.bcc) {
*ngIf="!copyFields.bcc" <span
(click)="showCopyField('bcc')" class="ml-2 cursor-pointer select-none text-sm font-medium hover:underline"
> (click)="showCopyField('bcc')"
Bcc >
</span> Bcc
</span>
}
</div> </div>
</mat-form-field> </mat-form-field>
<!-- Cc --> <!-- Cc -->
<mat-form-field *ngIf="copyFields.cc"> @if (copyFields.cc) {
<mat-label>Cc</mat-label> <mat-form-field>
<input matInput [formControlName]="'cc'" /> <mat-label>Cc</mat-label>
</mat-form-field> <input matInput [formControlName]="'cc'" />
</mat-form-field>
}
<!-- Bcc --> <!-- Bcc -->
<mat-form-field *ngIf="copyFields.bcc"> @if (copyFields.bcc) {
<mat-label>Bcc</mat-label> <mat-form-field>
<input matInput [formControlName]="'bcc'" /> <mat-label>Bcc</mat-label>
</mat-form-field> <input matInput [formControlName]="'bcc'" />
</mat-form-field>
}
<!-- Subject --> <!-- Subject -->
<mat-form-field> <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 { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { import {
FormsModule, FormsModule,
@ -26,7 +25,6 @@ import { QuillEditorComponent } from 'ngx-quill';
ReactiveFormsModule, ReactiveFormsModule,
MatFormFieldModule, MatFormFieldModule,
MatInputModule, MatInputModule,
NgIf,
QuillEditorComponent, QuillEditorComponent,
], ],
}) })

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

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

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

@ -4,8 +4,6 @@ import {
DatePipe, DatePipe,
DecimalPipe, DecimalPipe,
NgClass, NgClass,
NgFor,
NgIf,
NgPlural, NgPlural,
NgPluralCase, NgPluralCase,
} from '@angular/common'; } from '@angular/common';
@ -44,12 +42,10 @@ import { Subject, takeUntil } from 'rxjs';
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
standalone: true, standalone: true,
imports: [ imports: [
NgIf,
MatButtonModule, MatButtonModule,
RouterLink, RouterLink,
MatIconModule, MatIconModule,
MatMenuModule, MatMenuModule,
NgFor,
MatRippleModule, MatRippleModule,
MatCheckboxModule, MatCheckboxModule,
NgClass, 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"> <div class="bg-card relative flex w-full flex-auto dark:bg-transparent">
<!-- Mails list --> <!-- Mails list -->
<ng-container *ngIf="mails && mails.length > 0; else noMails"> @if (mails && mails.length > 0) {
<div <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" 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
? pagination.currentPage - 1 ? pagination.currentPage - 1
: 1) : 1),
]" ]"
> >
<mat-icon <mat-icon
@ -62,7 +62,7 @@
'../' + '../' +
(pagination.currentPage < pagination.lastPage (pagination.currentPage < pagination.lastPage
? pagination.currentPage + 1 ? pagination.currentPage + 1
: pagination.lastPage) : pagination.lastPage),
]" ]"
> >
<mat-icon <mat-icon
@ -73,23 +73,18 @@
</div> </div>
<!-- Loading bar --> <!-- Loading bar -->
<mat-progress-bar @if (mailsLoading) {
class="absolute inset-x-0 bottom-0 h-0.5" <mat-progress-bar
*ngIf="mailsLoading" class="absolute inset-x-0 bottom-0 h-0.5"
[mode]="'indeterminate'" [mode]="'indeterminate'"
></mat-progress-bar> ></mat-progress-bar>
}
</div> </div>
<!-- Mail list --> <!-- Mail list -->
<div class="overflow-y-auto" #mailList> <div class="overflow-y-auto" #mailList>
<!-- Item loop --> <!-- Item loop -->
<ng-container @for (mail of mails; track trackByFn(i, mail); let i = $index) {
*ngFor="
let mail of mails;
let i = index;
trackBy: trackByFn
"
>
<!-- Item --> <!-- Item -->
<a <a
class="relative flex border-t hover:bg-hover first:border-0" class="relative flex border-t hover:bg-hover first:border-0"
@ -102,7 +97,7 @@
[ngClass]="{ [ngClass]="{
'border-primary': mail.unread, 'border-primary': mail.unread,
'bg-primary-50 dark:bg-black dark:bg-opacity-5': 'bg-primary-50 dark:bg-black dark:bg-opacity-5':
selectedMail && selectedMail.id === mail.id selectedMail && selectedMail.id === mail.id,
}" }"
> >
<!-- Info --> <!-- Info -->
@ -112,13 +107,14 @@
{{ mail.from.contact.split('<')[0].trim() }} {{ mail.from.contact.split('<')[0].trim() }}
</div> </div>
<!-- Important indicator --> <!-- Important indicator -->
<mat-icon @if (mail.important) {
class="mr-3 text-red-500 icon-size-4 dark:text-red-600" <mat-icon
*ngIf="mail.important" class="mr-3 text-red-500 icon-size-4 dark:text-red-600"
[svgIcon]=" [svgIcon]="
'heroicons_solid:exclamation-circle' 'heroicons_solid:exclamation-circle'
" "
></mat-icon> ></mat-icon>
}
<!-- Date --> <!-- Date -->
<div <div
class="text-hint ml-auto whitespace-nowrap text-right text-md" class="text-hint ml-auto whitespace-nowrap text-right text-md"
@ -133,30 +129,35 @@
mail.subject mail.subject
}}</span> }}</span>
<!-- Indicators --> <!-- Indicators -->
<div @if (
class="ml-auto flex pl-2" (mail.attachments &&
*ngIf=" mail.attachments.length > 0) ||
(mail.attachments && mail.starred
mail.attachments.length > 0) || ) {
mail.starred <div class="ml-auto flex pl-2">
" <!-- Attachments -->
> @if (
<!-- Attachments -->
<mat-icon
class="flex justify-center icon-size-4"
*ngIf="
mail.attachments && mail.attachments &&
mail.attachments.length > 0 mail.attachments.length > 0
" ) {
[svgIcon]="'heroicons_solid:paper-clip'" <mat-icon
></mat-icon> class="flex justify-center icon-size-4"
<!-- Starred --> [svgIcon]="
<mat-icon 'heroicons_solid:paper-clip'
class="ml-1 flex justify-center text-orange-500 icon-size-4 dark:text-orange-400" "
*ngIf="mail.starred" ></mat-icon>
[svgIcon]="'heroicons_solid:star'" }
></mat-icon> <!-- Starred -->
</div> @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> </div>
<!-- Excerpt --> <!-- Excerpt -->
@ -167,13 +168,10 @@
</div> </div>
</div> </div>
</a> </a>
</ng-container> }
</div> </div>
</div> </div>
</ng-container> } @else {
<!-- No mails template -->
<ng-template #noMails>
<div <div
class="z-100 absolute inset-0 flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent" 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 There are no e-mails
</div> </div>
</div> </div>
</ng-template> }
<!-- No mails template -->
<!-- Mail details --> <!-- Mail details -->
<ng-container *ngIf="mails && mails.length > 0"> @if (mails && mails.length > 0) {
<div <div
class="flex-auto" class="flex-auto"
[ngClass]="{ [ngClass]="{
'absolute inset-0 z-20 flex lg:static lg:inset-auto': 'absolute inset-0 z-20 flex lg:static lg:inset-auto':
selectedMail && selectedMail.id, selectedMail && selectedMail.id,
'hidden lg:flex': !selectedMail || !selectedMail.id 'hidden lg:flex': !selectedMail || !selectedMail.id,
}" }"
> >
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>
</ng-container> }
</div> </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 { import {
Component, Component,
ElementRef, ElementRef,
@ -25,12 +25,10 @@ import { Subject, takeUntil } from 'rxjs';
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
standalone: true, standalone: true,
imports: [ imports: [
NgIf,
MatButtonModule, MatButtonModule,
MatIconModule, MatIconModule,
RouterLink, RouterLink,
MatProgressBarModule, MatProgressBarModule,
NgFor,
NgClass, NgClass,
RouterOutlet, RouterOutlet,
DatePipe, DatePipe,

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

@ -48,23 +48,24 @@
Label color Label color
</div> </div>
<div class="mx-3 my-4 -mr-5 flex w-48 flex-wrap"> <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 <mat-option
class="relative flex h-12 w-12 cursor-pointer rounded-full bg-transparent p-0" class="relative flex h-12 w-12 cursor-pointer rounded-full bg-transparent p-0"
[value]="color" [value]="color"
#matOption="matOption" #matOption="matOption"
> >
<mat-icon @if (matOption.selected) {
class="absolute m-3 text-white" <mat-icon
*ngIf="matOption.selected" class="absolute m-3 text-white"
[svgIcon]="'heroicons_outline:check'" [svgIcon]="'heroicons_outline:check'"
></mat-icon> ></mat-icon>
}
<span <span
class="m-1 flex h-10 w-10 rounded-full" class="m-1 flex h-10 w-10 rounded-full"
[ngClass]="labelColorDefs[color].bg" [ngClass]="labelColorDefs[color].bg"
></span> ></span>
</mat-option> </mat-option>
</ng-container> }
</div> </div>
</mat-select> </mat-select>
<button <button
@ -90,9 +91,7 @@
[formArrayName]="'labels'" [formArrayName]="'labels'"
> >
<!-- Label --> <!-- Label -->
<ng-container @for (label of labelsForm.get('labels')['controls']; track label) {
*ngFor="let label of labelsForm.get('labels')['controls']"
>
<mat-form-field class="w-full"> <mat-form-field class="w-full">
<input matInput [formControl]="label.get('title')" /> <input matInput [formControl]="label.get('title')" />
<mat-select <mat-select
@ -113,23 +112,26 @@
Label color Label color
</div> </div>
<div class="mx-3 my-4 -mr-5 flex w-48 flex-wrap"> <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 <mat-option
class="relative flex h-12 w-12 cursor-pointer rounded-full bg-transparent p-0" class="relative flex h-12 w-12 cursor-pointer rounded-full bg-transparent p-0"
[value]="color" [value]="color"
#matOption="matOption" #matOption="matOption"
> >
<mat-icon @if (matOption.selected) {
class="absolute m-3 text-white" <mat-icon
*ngIf="matOption.selected" class="absolute m-3 text-white"
[svgIcon]="'heroicons_outline:check'" [svgIcon]="
></mat-icon> 'heroicons_outline:check'
"
></mat-icon>
}
<span <span
class="m-1 flex h-10 w-10 rounded-full" class="m-1 flex h-10 w-10 rounded-full"
[ngClass]="labelColorDefs[color].bg" [ngClass]="labelColorDefs[color].bg"
></span> ></span>
</mat-option> </mat-option>
</ng-container> }
</div> </div>
</mat-select> </mat-select>
<button <button
@ -143,7 +145,7 @@
></mat-icon> ></mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
</ng-container> }
</div> </div>
</form> </form>
</div> </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 { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { import {
FormsModule, FormsModule,
@ -37,9 +37,7 @@ import { debounceTime, take } from 'rxjs';
MatInputModule, MatInputModule,
MatSelectModule, MatSelectModule,
NgClass, NgClass,
NgFor,
MatOptionModule, MatOptionModule,
NgIf,
], ],
}) })
export class MailboxSettingsComponent implements OnInit { 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"> <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 --> <!-- Image -->
<ng-container *ngIf="note.image"> @if (note.image) {
<div class="relative w-full"> <div class="relative w-full">
<div class="absolute bottom-0 right-0 p-4"> <div class="absolute bottom-0 right-0 p-4">
<button mat-icon-button (click)="removeImage(note)"> <button mat-icon-button (click)="removeImage(note)">
@ -13,7 +13,7 @@
</div> </div>
<img class="w-full object-cover" [src]="note.image" /> <img class="w-full object-cover" [src]="note.image" />
</div> </div>
</ng-container> }
<div class="m-4"> <div class="m-4">
<!-- Title --> <!-- Title -->
<div> <div>
@ -35,11 +35,9 @@
></textarea> ></textarea>
</div> </div>
<!-- Tasks --> <!-- Tasks -->
<ng-container *ngIf="note.tasks"> @if (note.tasks) {
<div class="mx-2 mt-4 space-y-1.5"> <div class="mx-2 mt-4 space-y-1.5">
<ng-container @for (task of note.tasks; track trackByFn($index, task)) {
*ngFor="let task of note.tasks; trackBy: trackByFn"
>
<div class="group flex items-center"> <div class="group flex items-center">
<mat-checkbox <mat-checkbox
class="flex items-center" class="flex items-center"
@ -51,7 +49,7 @@
class="w-full px-1 py-0.5" class="w-full px-1 py-0.5"
[ngClass]="{ [ngClass]="{
'text-secondary line-through': 'text-secondary line-through':
task.completed task.completed,
}" }"
[placeholder]="'Task'" [placeholder]="'Task'"
[(ngModel)]="task.content" [(ngModel)]="task.content"
@ -63,7 +61,7 @@
(click)="removeTaskFromNote(note, task)" (click)="removeTaskFromNote(note, task)"
></mat-icon> ></mat-icon>
</div> </div>
</ng-container> }
<div class="flex items-center"> <div class="flex items-center">
<mat-icon <mat-icon
class="text-hint -ml-0.5 icon-size-5" class="text-hint -ml-0.5 icon-size-5"
@ -80,13 +78,14 @@
/> />
</div> </div>
</div> </div>
</ng-container> }
<!-- Labels --> <!-- 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"> <div class="mx-1 mt-6 flex flex-wrap items-center">
<ng-container @for (
*ngFor="let label of note.labels; trackBy: trackByFn" label of note.labels;
> track trackByFn($index, label)
) {
<div <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" 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)" (click)="toggleLabelOnNote(note, label)"
></mat-icon> ></mat-icon>
</div> </div>
</ng-container> }
</div> </div>
</ng-container> }
<!-- Add Actions --> <!-- Add Actions -->
<ng-container *ngIf="!note.id"> @if (!note.id) {
<div class="mt-4 flex items-center justify-end"> <div class="mt-4 flex items-center justify-end">
<!-- Save --> <!-- Save -->
<button <button
@ -115,9 +114,9 @@
Save Save
</button> </button>
</div> </div>
</ng-container> }
<!-- Edit Actions --> <!-- Edit Actions -->
<ng-container *ngIf="note.id"> @if (note.id) {
<div class="mt-4 flex items-center justify-between"> <div class="mt-4 flex items-center justify-between">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<!-- Image --> <!-- Image -->
@ -161,8 +160,8 @@
></mat-icon> ></mat-icon>
</button> </button>
<mat-menu #labelsMenu="matMenu"> <mat-menu #labelsMenu="matMenu">
<ng-container *ngIf="labels$ | async as labels"> @if (labels$ | async; as labels) {
<ng-container *ngFor="let label of labels"> @for (label of labels; track label) {
<button <button
mat-menu-item mat-menu-item
(click)="toggleLabelOnNote(note, label)" (click)="toggleLabelOnNote(note, label)"
@ -181,8 +180,8 @@
}}</span> }}</span>
</span> </span>
</button> </button>
</ng-container> }
</ng-container> }
</mat-menu> </mat-menu>
<!-- Archive --> <!-- Archive -->
<button <button
@ -203,7 +202,7 @@
<!-- Close --> <!-- Close -->
<button mat-flat-button matDialogClose>Close</button> <button mat-flat-button matDialogClose>Close</button>
</div> </div>
</ng-container> }
</div> </div>
</ng-container> }
</div> </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 { TextFieldModule } from '@angular/cdk/text-field';
import { AsyncPipe, NgClass, NgFor, NgIf } from '@angular/common'; import { AsyncPipe, NgClass } from '@angular/common';
import { import {
ChangeDetectionStrategy, ChangeDetectionStrategy,
ChangeDetectorRef, ChangeDetectorRef,
@ -39,12 +39,10 @@ import {
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true, standalone: true,
imports: [ imports: [
NgIf,
MatButtonModule, MatButtonModule,
MatIconModule, MatIconModule,
FormsModule, FormsModule,
TextFieldModule, TextFieldModule,
NgFor,
MatCheckboxModule, MatCheckboxModule,
NgClass, NgClass,
MatRippleModule, MatRippleModule,

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

@ -29,8 +29,8 @@
</mat-form-field> </mat-form-field>
<!-- Labels --> <!-- Labels -->
<div class="mt-4 flex flex-col"> <div class="mt-4 flex flex-col">
<ng-container *ngIf="labels$ | async as labels"> @if (labels$ | async; as labels) {
<ng-container *ngFor="let label of labels; trackBy: trackByFn"> @for (label of labels; track trackByFn($index, label)) {
<mat-form-field class="fuse-mat-dense w-full"> <mat-form-field class="fuse-mat-dense w-full">
<button <button
mat-icon-button mat-icon-button
@ -50,7 +50,7 @@
matInput matInput
/> />
</mat-form-field> </mat-form-field>
</ng-container> }
</ng-container> }
</div> </div>
</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 { import {
ChangeDetectionStrategy, ChangeDetectionStrategy,
ChangeDetectorRef, ChangeDetectorRef,
@ -36,8 +36,6 @@ import {
MatIconModule, MatIconModule,
MatFormFieldModule, MatFormFieldModule,
MatInputModule, MatInputModule,
NgIf,
NgFor,
FormsModule, FormsModule,
AsyncPipe, AsyncPipe,
], ],

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

@ -16,7 +16,8 @@
[ngClass]="{ [ngClass]="{
'bg-gray-200 text-primary dark:bg-gray-700 dark:text-primary-400': 'bg-gray-200 text-primary dark:bg-gray-700 dark:text-primary-400':
filterStatus === 'notes', filterStatus === 'notes',
'text-hint hover:bg-hover': filterStatus !== 'notes' 'text-hint hover:bg-hover':
filterStatus !== 'notes',
}" }"
(click)="resetFilter()" (click)="resetFilter()"
matRipple matRipple
@ -37,7 +38,7 @@
'bg-gray-200 text-primary dark:bg-gray-700 dark:text-primary-400': 'bg-gray-200 text-primary dark:bg-gray-700 dark:text-primary-400':
filterStatus === 'archived', filterStatus === 'archived',
'text-hint hover:bg-hover': 'text-hint hover:bg-hover':
filterStatus !== 'archived' filterStatus !== 'archived',
}" }"
(click)="filterByArchived()" (click)="filterByArchived()"
matRipple matRipple
@ -52,17 +53,15 @@
</div> </div>
</div> </div>
<!-- Labels --> <!-- Labels -->
<ng-container *ngIf="labels$ | async as labels"> @if (labels$ | async; as labels) {
<ng-container @for (label of labels; track trackByFn($index, label)) {
*ngFor="let label of labels; trackBy: trackByFn"
>
<div <div
class="relative flex cursor-pointer items-center rounded-full px-4 py-2 font-medium" class="relative flex cursor-pointer items-center rounded-full px-4 py-2 font-medium"
[ngClass]="{ [ngClass]="{
'bg-gray-200 text-primary dark:bg-gray-700 dark:text-primary-400': 'bg-gray-200 text-primary dark:bg-gray-700 dark:text-primary-400':
'label:' + label.id === filterStatus, 'label:' + label.id === filterStatus,
'text-hint hover:bg-hover': 'text-hint hover:bg-hover':
'label:' + label.id !== filterStatus 'label:' + label.id !== filterStatus,
}" }"
(click)="filterByLabel(label.id)" (click)="filterByLabel(label.id)"
matRipple matRipple
@ -80,8 +79,8 @@
{{ label.title }} {{ label.title }}
</div> </div>
</div> </div>
</ng-container> }
</ng-container> }
<!-- Edit Labels --> <!-- Edit Labels -->
<div <div
class="relative flex cursor-pointer items-center rounded-full px-4 py-2 font-medium hover:bg-hover" class="relative flex cursor-pointer items-center rounded-full px-4 py-2 font-medium hover:bg-hover"
@ -153,8 +152,8 @@
</div> </div>
<!-- Notes --> <!-- Notes -->
<ng-container *ngIf="notes$ | async as notes; else loading"> @if (notes$ | async; as notes) {
<ng-container *ngIf="notes.length; else noNotes"> @if (notes.length) {
<!-- Masonry layout --> <!-- Masonry layout -->
<fuse-masonry <fuse-masonry
class="-mx-2 mt-8" class="-mx-2 mt-8"
@ -165,51 +164,41 @@
<!-- Columns template --> <!-- Columns template -->
<ng-template #columnsTemplate let-columns> <ng-template #columnsTemplate let-columns>
<!-- Columns --> <!-- Columns -->
<ng-container @for (
*ngFor=" column of columns;
let column of columns; track trackByFn($index, column)
trackBy: trackByFn ) {
"
>
<!-- Column --> <!-- Column -->
<div class="flex-1 space-y-4 px-2"> <div class="flex-1 space-y-4 px-2">
<ng-container @for (
*ngFor=" note of column.items;
let note of column.items; track trackByFn($index, note)
trackBy: trackByFn ) {
"
>
<!-- Note --> <!-- Note -->
<div <div
class="bg-card flex cursor-pointer flex-col overflow-hidden rounded-2xl shadow" class="bg-card flex cursor-pointer flex-col overflow-hidden rounded-2xl shadow"
(click)="openNoteDialog(note)" (click)="openNoteDialog(note)"
> >
<!-- Image --> <!-- Image -->
<ng-container @if (note.image) {
*ngIf="note.image"
>
<img <img
class="w-full object-cover" class="w-full object-cover"
[src]="note.image" [src]="note.image"
/> />
</ng-container> }
<div <div
class="flex flex-auto flex-col space-y-4 p-6" class="flex flex-auto flex-col space-y-4 p-6"
> >
<!-- Title --> <!-- Title -->
<ng-container @if (note.title) {
*ngIf="note.title"
>
<div <div
class="line-clamp-3 font-semibold" class="line-clamp-3 font-semibold"
> >
{{ note.title }} {{ note.title }}
</div> </div>
</ng-container> }
<!-- Content --> <!-- Content -->
<ng-container @if (note.content) {
*ngIf="note.content"
>
<div <div
[class.text-xl]=" [class.text-xl]="
note.content note.content
@ -218,28 +207,25 @@
> >
{{ note.content }} {{ note.content }}
</div> </div>
</ng-container> }
<!-- Tasks --> <!-- Tasks -->
<ng-container @if (note.tasks) {
*ngIf="note.tasks"
>
<div <div
class="space-y-1.5" class="space-y-1.5"
> >
<ng-container @for (
*ngFor=" task of note.tasks;
let task of note.tasks; track trackByFn(
trackBy: trackByFn $index,
" task
> )
) {
<div <div
class="flex items-center" class="flex items-center"
> >
<ng-container @if (
*ngIf=" !task.completed
!task.completed ) {
"
>
<div <div
class="flex h-5 w-5 items-center justify-center" class="flex h-5 w-5 items-center justify-center"
> >
@ -247,24 +233,22 @@
class="h-4 w-4 rounded-full border-2" class="h-4 w-4 rounded-full border-2"
></div> ></div>
</div> </div>
</ng-container> }
<ng-container @if (
*ngIf=" task.completed
task.completed ) {
"
>
<mat-icon <mat-icon
class="text-hint icon-size-5" class="text-hint icon-size-5"
[svgIcon]=" [svgIcon]="
'heroicons_solid:check-circle' 'heroicons_solid:check-circle'
" "
></mat-icon> ></mat-icon>
</ng-container> }
<div <div
class="ml-1.5 leading-5" class="ml-1.5 leading-5"
[ngClass]="{ [ngClass]="{
'text-secondary line-through': 'text-secondary line-through':
task.completed task.completed,
}" }"
> >
{{ {{
@ -272,22 +256,21 @@
}} }}
</div> </div>
</div> </div>
</ng-container> }
</div> </div>
</ng-container> }
<!-- Labels --> <!-- Labels -->
<ng-container @if (note.labels) {
*ngIf="note.labels"
>
<div <div
class="-m-1 flex flex-wrap items-center" class="-m-1 flex flex-wrap items-center"
> >
<ng-container @for (
*ngFor=" label of note.labels;
let label of note.labels; track trackByFn(
trackBy: trackByFn $index,
" label
> )
) {
<div <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" 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 label.title
}} }}
</div> </div>
</ng-container> }
</div> </div>
</ng-container> }
</div> </div>
</div> </div>
</ng-container> }
</div> </div>
</ng-container> }
</ng-template> </ng-template>
</fuse-masonry> </fuse-masonry>
</ng-container> } @else {
</ng-container> <div
class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent"
<!-- Loading template --> >
<ng-template #loading> <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 <div
class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent" class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent"
> >
@ -319,24 +313,11 @@
Loading... Loading...
</div> </div>
</div> </div>
</ng-template> }
<!-- Loading template -->
<!-- No notes 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> </div>
</mat-drawer-content> </mat-drawer-content>
</mat-drawer-container> </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 { import {
ChangeDetectionStrategy, ChangeDetectionStrategy,
ChangeDetectorRef, ChangeDetectorRef,
@ -42,8 +42,6 @@ import {
MatRippleModule, MatRippleModule,
NgClass, NgClass,
MatIconModule, MatIconModule,
NgIf,
NgFor,
MatButtonModule, MatButtonModule,
MatFormFieldModule, MatFormFieldModule,
MatInputModule, 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 --> <!-- Group all cdkDropList's after this point together so that the cards can be transferred between lists -->
<div class="flex items-start" cdkDropListGroup> <div class="flex items-start" cdkDropListGroup>
<!-- List --> <!-- List -->
<ng-container @for (list of board.lists; track trackByFn($index, list)) {
*ngFor="let list of board.lists; trackBy: trackByFn"
>
<div <div
class="bg-default w-72 flex-0 rounded-2xl p-2" class="bg-default w-72 flex-0 rounded-2xl p-2"
cdkDrag cdkDrag
@ -124,26 +122,24 @@
(cdkDropListDropped)="cardDropped($event)" (cdkDropListDropped)="cardDropped($event)"
> >
<!-- Card --> <!-- Card -->
<ng-container @for (
*ngFor=" card of list.cards;
let card of list.cards; track trackByFn($index, card)
trackBy: trackByFn ) {
"
>
<a <a
class="bg-card mb-3 flex flex-col items-start space-y-3 overflow-hidden rounded-lg p-5 shadow" class="bg-card mb-3 flex flex-col items-start space-y-3 overflow-hidden rounded-lg p-5 shadow"
[routerLink]="['card', card.id]" [routerLink]="['card', card.id]"
cdkDrag cdkDrag
> >
<!-- Cover image --> <!-- Cover image -->
<ng-container *ngIf="card.coverImage"> @if (card.coverImage) {
<div class="-mx-5 -mt-5 mb-2"> <div class="-mx-5 -mt-5 mb-2">
<img <img
class="w-full object-cover" class="w-full object-cover"
[src]="card.coverImage" [src]="card.coverImage"
/> />
</div> </div>
</ng-container> }
<!-- Title --> <!-- Title -->
<div <div
class="text-lg font-medium leading-5" class="text-lg font-medium leading-5"
@ -151,36 +147,35 @@
{{ card.title }} {{ card.title }}
</div> </div>
<!-- Labels --> <!-- Labels -->
<ng-container @if (card.labels.length) {
*ngIf="card.labels.length"
>
<div> <div>
<div <div
class="-mx-1 -mb-2 flex flex-wrap" class="-mx-1 -mb-2 flex flex-wrap"
> >
<ng-container @for (
*ngFor=" label of card.labels;
let label of card.labels; track trackByFn(
trackBy: trackByFn $index,
" label
> )
) {
<div <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" 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 }} {{ label.title }}
</div> </div>
</ng-container> }
</div> </div>
</div> </div>
</ng-container> }
<!-- Due date --> <!-- Due date -->
<ng-container *ngIf="card.dueDate"> @if (card.dueDate) {
<div <div
class="text-secondary flex items-center rounded text-sm font-medium leading-5" class="text-secondary flex items-center rounded text-sm font-medium leading-5"
[ngClass]="{ [ngClass]="{
'text-red-600': isOverdue( 'text-red-600': isOverdue(
card.dueDate card.dueDate
) ),
}" }"
> >
<mat-icon <mat-icon
@ -196,9 +191,9 @@
}} }}
</div> </div>
</div> </div>
</ng-container> }
</a> </a>
</ng-container> }
</div> </div>
<!-- New card --> <!-- New card -->
@ -213,7 +208,7 @@
</scrumboard-board-add-card> </scrumboard-board-add-card>
</div> </div>
</div> </div>
</ng-container> }
<!-- New list --> <!-- New list -->
<scrumboard-board-add-list <scrumboard-board-add-list

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

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

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

@ -15,9 +15,9 @@
<div <div
class="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 md:mt-16 lg:grid-cols-4" 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 <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]" [routerLink]="[board.id]"
> >
<div <div
@ -37,22 +37,20 @@
{{ board.description }} {{ board.description }}
</div> </div>
<!-- Members --> <!-- 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 h-1 w-12 border-t-2"></div>
<div class="mt-6 flex items-center -space-x-1.5"> <div class="mt-6 flex items-center -space-x-1.5">
<ng-container @for (
*ngFor=" member of board.members.slice(0, 5);
let member of board.members.slice(0, 5); track trackByFn($index, member)
trackBy: trackByFn ) {
"
>
<img <img
class="ring-bg-card h-8 w-8 flex-0 rounded-full object-cover ring ring-offset-1 ring-offset-transparent" class="ring-bg-card h-8 w-8 flex-0 rounded-full object-cover ring ring-offset-1 ring-offset-transparent"
[src]="member.avatar" [src]="member.avatar"
alt="Member avatar" alt="Member avatar"
/> />
</ng-container> }
<ng-container *ngIf="board.members.length > 5"> @if (board.members.length > 5) {
<div <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" 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 }} +{{ board.members.slice(5).length }}
</div> </div>
</div> </div>
</ng-container> }
</div> </div>
</ng-container> }
<!-- Last activity --> <!-- Last activity -->
<div class="font-md mt-4 flex items-center text-md"> <div class="font-md mt-4 flex items-center text-md">
<div class="text-secondary">Edited:</div> <div class="text-secondary">Edited:</div>
@ -71,7 +69,7 @@
</div> </div>
</div> </div>
</a> </a>
</ng-container> }
<!-- New board --> <!-- New board -->
<div <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" 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 { CdkScrollable } from '@angular/cdk/scrolling';
import { NgFor, NgIf } from '@angular/common';
import { import {
ChangeDetectionStrategy, ChangeDetectionStrategy,
ChangeDetectorRef, ChangeDetectorRef,
@ -21,7 +21,7 @@ import { Subject, takeUntil } from 'rxjs';
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true, standalone: true,
imports: [CdkScrollable, NgFor, RouterLink, MatIconModule, NgIf], imports: [CdkScrollable, RouterLink, MatIconModule],
}) })
export class ScrumboardBoardsComponent implements OnInit, OnDestroy { export class ScrumboardBoardsComponent implements OnInit, OnDestroy {
boards: Board[]; 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': 'bg-green-200 text-green-800 dark:bg-green-500 dark:text-green-100':
card.dueDate && !isOverdue(card.dueDate), card.dueDate && !isOverdue(card.dueDate),
'bg-red-200 text-red-800 dark:bg-red-500 dark:text-red-100': '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()" (click)="dueDatePicker.open()"
> >
@ -65,10 +65,12 @@
[svgIcon]="'heroicons_solid:calendar'" [svgIcon]="'heroicons_solid:calendar'"
></mat-icon> ></mat-icon>
<span class="ml-2 text-md font-medium"> <span class="ml-2 text-md font-medium">
<ng-container *ngIf="card.dueDate">{{ @if (card.dueDate) {
card.dueDate | date: 'longDate' {{ card.dueDate | date: 'longDate' }}
}}</ng-container> }
<ng-container *ngIf="!card.dueDate">Not set</ng-container> @if (!card.dueDate) {
Not set
}
</span> </span>
<mat-form-field <mat-form-field
class="fuse-mat-dense pointer-events-none invisible absolute inset-0 -mt-2.5 opacity-0" class="fuse-mat-dense pointer-events-none invisible absolute inset-0 -mt-2.5 opacity-0"
@ -127,9 +129,10 @@
<!-- Available labels --> <!-- Available labels -->
<div class="max-h-40 overflow-y-auto border-t leading-none"> <div class="max-h-40 overflow-y-auto border-t leading-none">
<!-- Labels --> <!-- Labels -->
<ng-container @for (
*ngFor="let label of filteredLabels; trackBy: trackByFn" label of filteredLabels;
> track trackByFn($index, label)
) {
<mat-checkbox <mat-checkbox
class="flex h-10 min-h-10 items-center pl-1 pr-4" class="flex h-10 min-h-10 items-center pl-1 pr-4"
[color]="'primary'" [color]="'primary'"
@ -138,7 +141,7 @@
> >
{{ label.title }} {{ label.title }}
</mat-checkbox> </mat-checkbox>
</ng-container> }
</div> </div>
</div> </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 { TextFieldModule } from '@angular/cdk/text-field';
import { DatePipe, NgClass, NgFor, NgIf } from '@angular/common'; import { DatePipe, NgClass } from '@angular/common';
import { import {
ChangeDetectionStrategy, ChangeDetectionStrategy,
ChangeDetectorRef, ChangeDetectorRef,
@ -52,9 +52,7 @@ import { Subject, debounceTime, takeUntil, tap } from 'rxjs';
MatInputModule, MatInputModule,
TextFieldModule, TextFieldModule,
NgClass, NgClass,
NgIf,
MatDatepickerModule, MatDatepickerModule,
NgFor,
MatCheckboxModule, MatCheckboxModule,
DatePipe, DatePipe,
], ],

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

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

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

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

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

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

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

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

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