From 3bbc050e0e989308b089dc3aaadb43506a11e866 Mon Sep 17 00:00:00 2001 From: Arthur Monney Date: Tue, 18 Oct 2022 03:45:06 +0100 Subject: [PATCH 1/5] export all components on module --- .../shared/components/alert/alert.module.ts | 14 ++++++ .../components/alert/error.component.ts | 2 - .../components/alert/success.component.ts | 1 - .../components/buttons/button.module.ts | 20 +++++++++ .../components/buttons/default.component.ts | 2 - .../components/buttons/link.component.ts | 3 +- .../components/buttons/primary.component.ts | 2 - .../components/headings/heading.module.ts | 14 ++++++ .../headings/page-heading.component.ts | 1 - .../shared/components/inputs/inputs.module.ts | 14 ++++++ .../overlaping-label.component.ts | 8 ---- .../components/skeletons/line.component.ts | 37 --------------- .../components/skeletons/skeleton.module.ts | 13 ++++++ .../user-profile-with-name.component.ts | 45 ------------------- .../components/snippets/snippet.module.ts | 14 ++++++ .../simple/simple.component.html | 0 .../simple/simple.component.ts | 8 +--- .../components/textarea/textarea.module.ts | 13 ++++++ 18 files changed, 104 insertions(+), 107 deletions(-) create mode 100644 src/app/shared/components/alert/alert.module.ts create mode 100644 src/app/shared/components/buttons/button.module.ts create mode 100644 src/app/shared/components/headings/heading.module.ts create mode 100644 src/app/shared/components/inputs/inputs.module.ts delete mode 100644 src/app/shared/components/skeletons/line.component.ts create mode 100644 src/app/shared/components/skeletons/skeleton.module.ts delete mode 100644 src/app/shared/components/skeletons/user-profile-with-name.component.ts create mode 100644 src/app/shared/components/snippets/snippet.module.ts rename src/app/shared/components/{textareas => textarea}/simple/simple.component.html (100%) rename src/app/shared/components/{textareas => textarea}/simple/simple.component.ts (99%) create mode 100644 src/app/shared/components/textarea/textarea.module.ts diff --git a/src/app/shared/components/alert/alert.module.ts b/src/app/shared/components/alert/alert.module.ts new file mode 100644 index 0000000..3c155b4 --- /dev/null +++ b/src/app/shared/components/alert/alert.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { ErrorComponent } from './error.component'; +import { SuccessComponent } from './success.component'; + +const COMPONENTS = [ErrorComponent, SuccessComponent]; + +@NgModule({ + declarations: COMPONENTS, + imports: [CommonModule], + exports: COMPONENTS, +}) +export class AlertModule {} diff --git a/src/app/shared/components/alert/error.component.ts b/src/app/shared/components/alert/error.component.ts index be2a857..6e8d9a8 100644 --- a/src/app/shared/components/alert/error.component.ts +++ b/src/app/shared/components/alert/error.component.ts @@ -34,8 +34,6 @@ import { Component, Input } from '@angular/core'; }) export class ErrorComponent { @Input() class!: string; - @Input() message!: string; - @Input() errors: string[] = []; } diff --git a/src/app/shared/components/alert/success.component.ts b/src/app/shared/components/alert/success.component.ts index 46d8b81..4b44992 100644 --- a/src/app/shared/components/alert/success.component.ts +++ b/src/app/shared/components/alert/success.component.ts @@ -27,6 +27,5 @@ import { Component, Input } from '@angular/core'; }) export class SuccessComponent { @Input() class!: string; - @Input() message!: string; } diff --git a/src/app/shared/components/buttons/button.module.ts b/src/app/shared/components/buttons/button.module.ts new file mode 100644 index 0000000..487b275 --- /dev/null +++ b/src/app/shared/components/buttons/button.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { ButtonPrimaryComponent } from './primary.component'; +import { ButtonLinkComponent } from './link.component'; +import { ButtonDefaultComponent } from './default.component'; +import { RouterModule } from '@angular/router'; + +const COMPONENTS = [ + ButtonPrimaryComponent, + ButtonLinkComponent, + ButtonDefaultComponent, +]; + +@NgModule({ + declarations: COMPONENTS, + imports: [CommonModule, RouterModule], + exports: COMPONENTS, +}) +export class ButtonModule {} diff --git a/src/app/shared/components/buttons/default.component.ts b/src/app/shared/components/buttons/default.component.ts index 57422fb..274a794 100644 --- a/src/app/shared/components/buttons/default.component.ts +++ b/src/app/shared/components/buttons/default.component.ts @@ -33,8 +33,6 @@ import { Observable } from 'rxjs'; }) export class ButtonDefaultComponent { @Input() type: string = 'button'; - @Input() loading$!: Observable; - @Input() class!: string; } diff --git a/src/app/shared/components/buttons/link.component.ts b/src/app/shared/components/buttons/link.component.ts index 5781a0f..8081216 100644 --- a/src/app/shared/components/buttons/link.component.ts +++ b/src/app/shared/components/buttons/link.component.ts @@ -6,13 +6,12 @@ import { Component, Input } from '@angular/core'; + class="inline-flex items-center rounded-md border border-transparent bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"> `, }) export class ButtonLinkComponent { @Input() link!: any; - @Input() class!: string; } diff --git a/src/app/shared/components/buttons/primary.component.ts b/src/app/shared/components/buttons/primary.component.ts index 1266d8b..e4cd906 100644 --- a/src/app/shared/components/buttons/primary.component.ts +++ b/src/app/shared/components/buttons/primary.component.ts @@ -35,8 +35,6 @@ import { Observable } from 'rxjs'; }) export class ButtonPrimaryComponent { @Input() type: string = 'button'; - @Input() loading$!: Observable; - @Input() class!: string; } diff --git a/src/app/shared/components/headings/heading.module.ts b/src/app/shared/components/headings/heading.module.ts new file mode 100644 index 0000000..87c7779 --- /dev/null +++ b/src/app/shared/components/headings/heading.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { PageHeadingWithActionComponent } from './page-heading-with-action.component'; +import { PageHeadingComponent } from './page-heading.component'; + +const COMPONENTS = [PageHeadingWithActionComponent, PageHeadingComponent]; + +@NgModule({ + declarations: COMPONENTS, + imports: [CommonModule], + exports: COMPONENTS, +}) +export class HeadingModule {} diff --git a/src/app/shared/components/headings/page-heading.component.ts b/src/app/shared/components/headings/page-heading.component.ts index 39b576c..5745db4 100644 --- a/src/app/shared/components/headings/page-heading.component.ts +++ b/src/app/shared/components/headings/page-heading.component.ts @@ -22,6 +22,5 @@ import { Component, Input } from '@angular/core'; }) export class PageHeadingComponent { @Input() title!: string; - @Input() description!: string; } diff --git a/src/app/shared/components/inputs/inputs.module.ts b/src/app/shared/components/inputs/inputs.module.ts new file mode 100644 index 0000000..add24f8 --- /dev/null +++ b/src/app/shared/components/inputs/inputs.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; + +import { OverlapingLabelComponent } from './overlaping-label/overlaping-label.component'; + +const COMPONENTS = [OverlapingLabelComponent]; + +@NgModule({ + declarations: COMPONENTS, + imports: [CommonModule, FormsModule, ReactiveFormsModule], + exports: COMPONENTS, +}) +export class InputsModule {} diff --git a/src/app/shared/components/inputs/overlaping-label/overlaping-label.component.ts b/src/app/shared/components/inputs/overlaping-label/overlaping-label.component.ts index 8c3e5fe..422c951 100644 --- a/src/app/shared/components/inputs/overlaping-label/overlaping-label.component.ts +++ b/src/app/shared/components/inputs/overlaping-label/overlaping-label.component.ts @@ -16,21 +16,13 @@ export class OverlapingLabelComponent implements ControlValueAccessor { value: string = ''; @Input() label!: string | null; - @Input() placeholder!: string | null; - @Input() name!: string; - @Input() type: string = 'text'; - @Input() required: boolean = false; - @Input() disabled!: boolean; - @Input() containerClass!: string; - @Input() inputClass!: string; - @Input() helpText!: string | null; writeValue(value: string): void { diff --git a/src/app/shared/components/skeletons/line.component.ts b/src/app/shared/components/skeletons/line.component.ts deleted file mode 100644 index f3cd7c2..0000000 --- a/src/app/shared/components/skeletons/line.component.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { Component, Input } from '@angular/core'; -import { NgxSkeletonLoaderConfigTheme } from 'ngx-skeleton-loader'; - -@Component({ - selector: 'loader-line-skeleton', - template: ` -
- -
- `, -}) -export class LineSkeletonComponent { - @Input() class!: string; - - @Input() theme!: NgxSkeletonLoaderConfigTheme; - - @Input() count: number = 1; - - @Input() animation: string = 'pulse'; - - defaultTheme: NgxSkeletonLoaderConfigTheme = { - borderRadius: '4px', - height: '16px', - margin: '0', - }; - - constructor() { - this.theme = { - ...this.defaultTheme, - ...this.theme, - }; - } -} diff --git a/src/app/shared/components/skeletons/skeleton.module.ts b/src/app/shared/components/skeletons/skeleton.module.ts new file mode 100644 index 0000000..50e8800 --- /dev/null +++ b/src/app/shared/components/skeletons/skeleton.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { BackdropLoaderComponent } from './backdrop-loader.component'; + +const COMPONENTS = [BackdropLoaderComponent]; + +@NgModule({ + declarations: COMPONENTS, + imports: [CommonModule], + exports: COMPONENTS, +}) +export class SkeletonModule {} diff --git a/src/app/shared/components/skeletons/user-profile-with-name.component.ts b/src/app/shared/components/skeletons/user-profile-with-name.component.ts deleted file mode 100644 index 6f7e74a..0000000 --- a/src/app/shared/components/skeletons/user-profile-with-name.component.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'loader-user-profile-with-name-skeleton', - template: ` -
-
- -
-
- - -
-
- `, -}) -export class UserProfileWithNameSkeletonComponent {} diff --git a/src/app/shared/components/snippets/snippet.module.ts b/src/app/shared/components/snippets/snippet.module.ts new file mode 100644 index 0000000..8e5f60c --- /dev/null +++ b/src/app/shared/components/snippets/snippet.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { DecreaseBadgeComponent } from './decrease.component'; +import { IncreaseBadgeComponent } from './increase.component'; + +const COMPONENTS = [DecreaseBadgeComponent, IncreaseBadgeComponent]; + +@NgModule({ + declarations: COMPONENTS, + imports: [CommonModule], + exports: COMPONENTS, +}) +export class SnippetModule {} diff --git a/src/app/shared/components/textareas/simple/simple.component.html b/src/app/shared/components/textarea/simple/simple.component.html similarity index 100% rename from src/app/shared/components/textareas/simple/simple.component.html rename to src/app/shared/components/textarea/simple/simple.component.html diff --git a/src/app/shared/components/textareas/simple/simple.component.ts b/src/app/shared/components/textarea/simple/simple.component.ts similarity index 99% rename from src/app/shared/components/textareas/simple/simple.component.ts rename to src/app/shared/components/textarea/simple/simple.component.ts index 6667e26..a7eb4f8 100644 --- a/src/app/shared/components/textareas/simple/simple.component.ts +++ b/src/app/shared/components/textarea/simple/simple.component.ts @@ -15,18 +15,12 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; export class TextareaSimpleComponent implements ControlValueAccessor { value: string = ''; + @Input() placeholder: string = ''; @Input() label!: string; - @Input() name!: string; - - @Input() placeholder: string = ''; - @Input() class!: string; - @Input() disabled!: boolean; - @Input() required!: boolean; - @Input() helpText!: string; writeValue(value: string): void { diff --git a/src/app/shared/components/textarea/textarea.module.ts b/src/app/shared/components/textarea/textarea.module.ts new file mode 100644 index 0000000..888a66b --- /dev/null +++ b/src/app/shared/components/textarea/textarea.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { TextareaSimpleComponent } from './simple/simple.component'; + +const COMPONENTS = [TextareaSimpleComponent]; + +@NgModule({ + declarations: COMPONENTS, + imports: [CommonModule], + exports: COMPONENTS, +}) +export class TextareaModule {} From f3da7e4e984c998c7ffb9620f2c362d271739d30 Mon Sep 17 00:00:00 2001 From: Arthur Monney Date: Tue, 18 Oct 2022 03:45:40 +0100 Subject: [PATCH 2/5] :recycle: refactoring components & modules --- .../forgot-password.component.ts | 29 +------- .../directives/click-outside.directive.ts | 4 +- src/app/shared/interfaces/values.interface.ts | 23 +++--- src/app/shared/pipes/status-value.pipe.ts | 4 +- src/app/shared/shared.module.ts | 71 +++++-------------- .../components/header/header.component.html | 4 +- .../components/header/header.component.scss | 3 - .../components/header/header.component.ts | 45 ++++++------ .../components/logo/logo.component.html | 11 --- .../themes/components/logo/logo.component.ts | 41 +++++++++-- .../themes/layouts/cpanel/cpanel.component.ts | 1 - .../pages/not-found/not-found.component.ts | 1 - src/app/shared/themes/theme.module.ts | 2 - 13 files changed, 97 insertions(+), 142 deletions(-) delete mode 100644 src/app/shared/themes/components/header/header.component.scss delete mode 100644 src/app/shared/themes/components/logo/logo.component.html diff --git a/src/app/modules/authentication/pages/forgot-password/forgot-password.component.ts b/src/app/modules/authentication/pages/forgot-password/forgot-password.component.ts index 7fc1a1a..1d23193 100644 --- a/src/app/modules/authentication/pages/forgot-password/forgot-password.component.ts +++ b/src/app/modules/authentication/pages/forgot-password/forgot-password.component.ts @@ -1,10 +1,8 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { Meta, Title } from '@angular/platform-browser'; import { Store } from '@ngrx/store'; import { Observable } from 'rxjs'; -import { environment } from 'environments/environment'; import { forgotPasswordAction } from '../../store/auth.actions'; import { selectError, @@ -15,7 +13,7 @@ import { @Component({ templateUrl: './forgot-password.component.html', }) -export class ForgotPasswordComponent implements OnInit { +export class ForgotPasswordComponent { public form: FormGroup = this.fb.group({ email: ['', [Validators.required, Validators.email]], }); @@ -26,28 +24,7 @@ export class ForgotPasswordComponent implements OnInit { public loading$: Observable = this.store.select(selectLoading); - constructor( - private fb: FormBuilder, - private store: Store, - private meta: Meta, - private title: Title - ) {} - - ngOnInit(): void { - this.title.setTitle($localize`Mot de passe oublié | Admin CPanel`); - this.meta.updateTag({ - property: 'og:url', - content: environment.baseUrl + '/forgot-password', - }); - this.meta.updateTag({ - property: 'og:title', - content: $localize`Mot de passe oublié | Admin CPanel`, - }); - this.meta.updateTag({ - property: 'og:description', - content: $localize`Réinitialisez votre mot de passe`, - }); - } + constructor(private fb: FormBuilder, private store: Store) {} public submit() { if (this.form.valid) { diff --git a/src/app/shared/directives/click-outside.directive.ts b/src/app/shared/directives/click-outside.directive.ts index 57759fe..f873ebc 100644 --- a/src/app/shared/directives/click-outside.directive.ts +++ b/src/app/shared/directives/click-outside.directive.ts @@ -10,10 +10,10 @@ import { selector: '[ClickOutside]', }) export class ClickOutsideDirective { - constructor(private elementRef: ElementRef) {} - @Output() clickOutside = new EventEmitter(); + constructor(private elementRef: ElementRef) {} + @HostListener('document:click', ['$event', '$event.target']) public onClick(event: MouseEvent, targetElement: HTMLElement): void { if (!targetElement) { diff --git a/src/app/shared/interfaces/values.interface.ts b/src/app/shared/interfaces/values.interface.ts index 438d29f..00c1ce4 100644 --- a/src/app/shared/interfaces/values.interface.ts +++ b/src/app/shared/interfaces/values.interface.ts @@ -1,3 +1,8 @@ +/** + * This pagination Object is the default structure of + * Laravel Eloquent Pagination Response + * @see https://laravel.com/docs/eloquent/pagination + */ export const pagination = { total: 0, per_page: 0, @@ -14,34 +19,34 @@ export const pagination = { export const status = { pending: { label: 'PENDING', - locale: 'En attente', + locale: $localize`En attente`, }, success: { label: 'SUCCESS', - locale: 'Réussi', + locale: $localize`Réussi`, }, failed: { label: 'FAILED', - locale: 'Échoué', + locale: $localize`Échoué`, }, rejected: { label: 'REJECTED', - locale: 'Rejeté', + locale: $localize`Rejeté`, }, canceled: { label: 'CANCELED', - locale: 'Annulé', + locale: $localize`Annulé`, }, completed: { label: 'COMPLETED', - locale: 'Terminé', + locale: $localize`Terminé`, }, refunded: { label: 'REFUNDED', - locale: 'Remboursé', + locale: $localize`Remboursé`, }, processing: { label: 'PROCESSING', - locale: 'En cours', + locale: $localize`En cours`, }, -} \ No newline at end of file +}; diff --git a/src/app/shared/pipes/status-value.pipe.ts b/src/app/shared/pipes/status-value.pipe.ts index 1ac4cd8..58211dc 100644 --- a/src/app/shared/pipes/status-value.pipe.ts +++ b/src/app/shared/pipes/status-value.pipe.ts @@ -3,7 +3,7 @@ import { Pipe, PipeTransform } from '@angular/core'; import { status } from '@app/shared/interfaces/values.interface'; @Pipe({ - name: 'statusValue' + name: 'statusValue', }) export class StatusValuePipe implements PipeTransform { transform(value: string): string { @@ -19,7 +19,7 @@ export class StatusValuePipe implements PipeTransform { case status.canceled.label: return status.canceled.locale; default: - return 'Pas disponible'; + return $localize`Pas disponible`; } } } diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 601fe47..3f90227 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -1,69 +1,34 @@ import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { NgxPermissionsModule } from 'ngx-permissions'; import { ThemeModule } from './themes/theme.module'; +import { InputsModule } from './components/inputs/inputs.module'; +import { AlertModule } from './components/alert/alert.module'; +import { ButtonModule } from './components/buttons/button.module'; +import { HeadingModule } from './components/headings/heading.module'; +import { SkeletonModule } from './components/skeletons/skeleton.module'; +import { SnippetModule } from './components/snippets/snippet.module'; +import { TextareaModule } from './components/textarea/textarea.module'; import { ClickOutsideDirective } from './directives/click-outside.directive'; - -import { OverlapingLabelComponent } from './components/inputs/overlaping-label/overlaping-label.component'; -import { ButtonPrimaryComponent } from './components/buttons/primary.component'; -import { ButtonLinkComponent } from './components/buttons/link.component'; -import { ButtonDefaultComponent } from './components/buttons/default.component'; -import { ErrorComponent } from './components/alert/error.component'; -import { SuccessComponent } from './components/alert/success.component'; -import { TextareaSimpleComponent } from './components/textareas/simple/simple.component'; -import { PageHeadingWithActionComponent } from './components/headings/page-heading-with-action.component'; -import { PageHeadingComponent } from './components/headings/page-heading.component'; -import { UserProfileWithNameSkeletonComponent } from './components/skeletons/user-profile-with-name.component'; -import { LineSkeletonComponent } from '@app/shared/components/skeletons/line.component'; -import { DecreaseBadgeComponent } from './components/snippets/decrease.component'; -import { IncreaseBadgeComponent } from './components/snippets/increase.component'; - import { StatusColorPipe } from './pipes/status-color.pipe'; import { StatusValuePipe } from './pipes/status-value.pipe'; -const DECLARATIONS = [ - // Buttons components - ButtonPrimaryComponent, - ButtonDefaultComponent, - ButtonLinkComponent, - - // Headings components - PageHeadingComponent, - PageHeadingWithActionComponent, - - // Forms components - OverlapingLabelComponent, - TextareaSimpleComponent, - - // Badges - DecreaseBadgeComponent, - IncreaseBadgeComponent, - - // Alerts & Notifications Components - ErrorComponent, - SuccessComponent, - - // Skeleton Components - UserProfileWithNameSkeletonComponent, - LineSkeletonComponent, - - // Directives - ClickOutsideDirective, - - // Pipes - StatusColorPipe, - StatusValuePipe, +const DECLARATIONS = [ClickOutsideDirective, StatusColorPipe, StatusValuePipe]; +const MODULES = [ + AlertModule, + ThemeModule, + ButtonModule, + InputsModule, + HeadingModule, + SkeletonModule, + SnippetModule, + TextareaModule, ]; -const MODULES = [CommonModule, ThemeModule]; - @NgModule({ declarations: DECLARATIONS, - imports: [FormsModule, ReactiveFormsModule, ...MODULES], - providers: [], + imports: [...MODULES], exports: [...DECLARATIONS, ...MODULES, NgxPermissionsModule], }) export class SharedModule {} diff --git a/src/app/shared/themes/components/header/header.component.html b/src/app/shared/themes/components/header/header.component.html index 0720c0e..12f8ac1 100644 --- a/src/app/shared/themes/components/header/header.component.html +++ b/src/app/shared/themes/components/header/header.component.html @@ -161,7 +161,7 @@ aria-haspopup="true" (click)="toggleMobileMenu()"> Ouvrir le menu utilisateur - - + -->
(); public user$: Observable = this.store.select(selectCurrentUser); - public loading$: Observable = this.store.select(selectLoading); + constructor(private store: Store) {} + + ngOnInit(): void { + const selectedTheme = window.localStorage.getItem('theme'); + + if (selectedTheme) { + document.documentElement.setAttribute('data-theme', selectedTheme); + } else { + const theme = this.themes.find( + theme => + theme.value === document.documentElement.getAttribute('data-theme') + ); + window.localStorage.setItem('theme', theme!.value); + } + + this.currentTheme = window.localStorage.getItem('theme')!; + } + get openCloseTrigger() { return this.mobileMenuOpen ? 'open' : 'closed'; } @@ -86,28 +99,10 @@ export class HeaderComponent implements OnInit { } } - constructor(private store: Store) {} - - ngOnInit(): void { - const selectedTheme = window.localStorage.getItem('theme'); - - if (selectedTheme) { - document.documentElement.setAttribute('data-theme', selectedTheme) - } else { - const theme = this.themes.find( - (theme) => - theme.value === document.documentElement.getAttribute('data-theme') - ); - window.localStorage.setItem('theme', theme!.value); - } - - this.currentTheme = window.localStorage.getItem('theme')!; - } - updateTheme(theme: string): void { document.documentElement.setAttribute('data-theme', theme); window.localStorage.setItem('theme', theme); - + this.currentTheme = theme; this.showDialog = false; } diff --git a/src/app/shared/themes/components/logo/logo.component.html b/src/app/shared/themes/components/logo/logo.component.html deleted file mode 100644 index 3f37390..0000000 --- a/src/app/shared/themes/components/logo/logo.component.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - \ No newline at end of file diff --git a/src/app/shared/themes/components/logo/logo.component.ts b/src/app/shared/themes/components/logo/logo.component.ts index 38d5645..b5f55ff 100644 --- a/src/app/shared/themes/components/logo/logo.component.ts +++ b/src/app/shared/themes/components/logo/logo.component.ts @@ -2,11 +2,42 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'logo-svg', - templateUrl: './logo.component.html', + template: ` + + + + + + + + + + + + `, }) export class LogoComponent { - @Input('class') - class: string = ''; - - constructor() {} + @Input() class!: string; } diff --git a/src/app/shared/themes/layouts/cpanel/cpanel.component.ts b/src/app/shared/themes/layouts/cpanel/cpanel.component.ts index c802468..4e81ed0 100644 --- a/src/app/shared/themes/layouts/cpanel/cpanel.component.ts +++ b/src/app/shared/themes/layouts/cpanel/cpanel.component.ts @@ -39,7 +39,6 @@ import { LoadingService } from '../../services/loading.service'; }) export class CpanelComponent implements OnInit { loading!: boolean; - mobileSidebarOpen!: boolean; toggleSidebar(): void { diff --git a/src/app/shared/themes/pages/not-found/not-found.component.ts b/src/app/shared/themes/pages/not-found/not-found.component.ts index dd43ae3..2991fb2 100644 --- a/src/app/shared/themes/pages/not-found/not-found.component.ts +++ b/src/app/shared/themes/pages/not-found/not-found.component.ts @@ -8,7 +8,6 @@ import { LocalStorageService } from '@app/modules/authentication/services/local- }) export class NotFoundComponent implements OnInit { homeUrl!: string; - isLoggedIn: boolean = false; constructor( diff --git a/src/app/shared/themes/theme.module.ts b/src/app/shared/themes/theme.module.ts index fe2e3c9..00367f2 100644 --- a/src/app/shared/themes/theme.module.ts +++ b/src/app/shared/themes/theme.module.ts @@ -1,7 +1,6 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; -import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { MatProgressBarModule } from '@angular/material/progress-bar'; import { MatSlideToggleModule } from '@angular/material/slide-toggle'; import { MatRippleModule } from '@angular/material/core'; @@ -17,7 +16,6 @@ import { NotFoundComponent } from './pages/not-found/not-found.component'; const MODULES = [ CommonModule, RouterModule, - NgxSkeletonLoaderModule, MatProgressBarModule, MatSlideToggleModule, MatRippleModule, From 59484d066eeee1248138e486abda3801085523ea Mon Sep 17 00:00:00 2001 From: Arthur Monney Date: Tue, 18 Oct 2022 03:48:29 +0100 Subject: [PATCH 3/5] :heavy_minus_sign: remove skeleton package --- package-lock.json | 42 ------------------------------------------ package.json | 1 - 2 files changed, 43 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8ad744b..2e41fdb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,7 +29,6 @@ "@tailwindcss/typography": "^0.5.6", "ngx-pagination": "^6.0.2", "ngx-permissions": "^13.0.1", - "ngx-skeleton-loader": "^6.0.0", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" @@ -11984,19 +11983,6 @@ "zone.js": ">=0.11.4 || >0.12" } }, - "node_modules/ngx-skeleton-loader": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/ngx-skeleton-loader/-/ngx-skeleton-loader-6.0.0.tgz", - "integrity": "sha512-CVvJPKuMVGbtwG7MhLDPfbagNYNnpSCnisqPjrz1rg5BKSZGqPW8mkDtHt6tMT78xdzAzPjr51p7YNUoKJrRUw==", - "dependencies": { - "perf-marks": "^1.13.4", - "tslib": "^2.0.0" - }, - "peerDependencies": { - "@angular/common": ">=8.0.0", - "@angular/core": ">=8.0.0" - } - }, "node_modules/nice-napi": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz", @@ -13150,17 +13136,6 @@ "node": ">=8" } }, - "node_modules/perf-marks": { - "version": "1.14.2", - "resolved": "https://registry.npmjs.org/perf-marks/-/perf-marks-1.14.2.tgz", - "integrity": "sha512-N0/bQcuTlETpgox/DsXS1voGjqaoamMoiyhncgeW3rSHy/qw8URVgmPRYfFDQns/+C6yFUHDbeSBGL7ixT6Y4A==", - "dependencies": { - "tslib": "^2.1.0" - }, - "engines": { - "node": ">=12" - } - }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -25865,15 +25840,6 @@ "tslib": "^2.1.0" } }, - "ngx-skeleton-loader": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/ngx-skeleton-loader/-/ngx-skeleton-loader-6.0.0.tgz", - "integrity": "sha512-CVvJPKuMVGbtwG7MhLDPfbagNYNnpSCnisqPjrz1rg5BKSZGqPW8mkDtHt6tMT78xdzAzPjr51p7YNUoKJrRUw==", - "requires": { - "perf-marks": "^1.13.4", - "tslib": "^2.0.0" - } - }, "nice-napi": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz", @@ -26755,14 +26721,6 @@ "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", "dev": true }, - "perf-marks": { - "version": "1.14.2", - "resolved": "https://registry.npmjs.org/perf-marks/-/perf-marks-1.14.2.tgz", - "integrity": "sha512-N0/bQcuTlETpgox/DsXS1voGjqaoamMoiyhncgeW3rSHy/qw8URVgmPRYfFDQns/+C6yFUHDbeSBGL7ixT6Y4A==", - "requires": { - "tslib": "^2.1.0" - } - }, "picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", diff --git a/package.json b/package.json index 39adfc1..b37edcf 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,6 @@ "@tailwindcss/typography": "^0.5.6", "ngx-pagination": "^6.0.2", "ngx-permissions": "^13.0.1", - "ngx-skeleton-loader": "^6.0.0", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" From 15371ec031c0909e6347ae083289ec19fd262982 Mon Sep 17 00:00:00 2001 From: Arthur Monney Date: Tue, 18 Oct 2022 04:21:13 +0100 Subject: [PATCH 4/5] create skeleton component --- .../skeletons/skeleton.component.ts | 20 +++++++++++++++++++ .../components/skeletons/skeleton.module.ts | 3 ++- 2 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 src/app/shared/components/skeletons/skeleton.component.ts diff --git a/src/app/shared/components/skeletons/skeleton.component.ts b/src/app/shared/components/skeletons/skeleton.component.ts new file mode 100644 index 0000000..670f41d --- /dev/null +++ b/src/app/shared/components/skeletons/skeleton.component.ts @@ -0,0 +1,20 @@ +import { + ChangeDetectionStrategy, + Component, + Input, + ViewEncapsulation, +} from '@angular/core'; + +@Component({ + selector: 'skeleton', + template: ` +
+ +
+ `, + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, +}) +export class SkeletonComponent { + @Input() styleClass!: string; +} diff --git a/src/app/shared/components/skeletons/skeleton.module.ts b/src/app/shared/components/skeletons/skeleton.module.ts index 50e8800..7b6d25e 100644 --- a/src/app/shared/components/skeletons/skeleton.module.ts +++ b/src/app/shared/components/skeletons/skeleton.module.ts @@ -2,8 +2,9 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { BackdropLoaderComponent } from './backdrop-loader.component'; +import { SkeletonComponent } from './skeleton.component'; -const COMPONENTS = [BackdropLoaderComponent]; +const COMPONENTS = [BackdropLoaderComponent, SkeletonComponent]; @NgModule({ declarations: COMPONENTS, From cdfcc55ae65f2e450e3bf5bb2dc2e0d9955b037a Mon Sep 17 00:00:00 2001 From: Arthur Monney Date: Tue, 18 Oct 2022 04:21:35 +0100 Subject: [PATCH 5/5] replace header profile picture skeleton --- .../themes/components/header/header.component.html | 13 +++---------- src/app/shared/themes/theme.module.ts | 3 +++ 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/app/shared/themes/components/header/header.component.html b/src/app/shared/themes/components/header/header.component.html index 12f8ac1..24d6b97 100644 --- a/src/app/shared/themes/components/header/header.component.html +++ b/src/app/shared/themes/components/header/header.component.html @@ -161,16 +161,9 @@ aria-haspopup="true" (click)="toggleMobileMenu()"> Ouvrir le menu utilisateur - + +
+