feat: Add new properties to page component and update page state with…

… NgxsDataEntityCollectionsRepository

libs/core/src/lib/components/menu/store/menu.state.ts

@@ -13,7 +13,6 @@ import { SioCoreMenuInterface } from '../../../interfaces';
 })
 @Injectable()
 export class SioCoreMenuState extends NgxsDataEntityCollectionsRepository<SioCoreMenuInterface> {
-
   @DataAction()
   public go(url: string) {
     this.dispatch(new Navigate([url]) as unknown as ActionType);

libs/core/src/lib/components/page/page.component.ts

@@ -1,6 +1,9 @@
 import { Component, ElementRef, Input, OnInit } from '@angular/core';
 import { SioCoreLoggerService } from '../../services';
-import { SioCorePageComponentState } from './store';
+import {
+  SioCorePageComponentInterface,
+  SioCorePagesComponentState,
+} from './store';
 import { SioCoreAppComponentState } from '../app/store';
 
 import { AttributeBoolean } from '@angular-ru/cdk/decorators';
@@ -14,36 +17,44 @@ import { SioColorType } from '../../types';
   styleUrls: ['./page.component.scss'],
 })
 export class SioCorePageComponent implements OnInit {
-
   @Input() title: string;
   @Input() color: SioColorType;
 
   @AttributeBoolean() @Input() set toolbar(value: InputBoolean) {
-    this.sioCorePageComponentState.setToolbar(value as boolean);
+    if (this.page) {
+      this.page.toolbar = value;
+    }
   }
 
   @AttributeBoolean() @Input() set menu(value: InputBoolean) {
-    this.sioCorePageComponentState.setMenu(value as boolean);
+    if (this.page) {
+      this.page.menu = value;
+    }
   }
-  
+
   @AttributeBoolean() @Input() set back(value: InputBoolean) {
-    this.sioCorePageComponentState.setBack(value as boolean);
+    if (this.page) {
+      this.page.back = value;
+    }
   }
   @AttributeBoolean() @Input() set search(value: InputBoolean) {
-    this.sioCorePageComponentState.setSearch(value as boolean);
+    if (this.page) {
+      this.page.search = value;
+    }
   }
 
   @AttributeBoolean() @Input() set fullmode(value: InputBoolean) {
     this.sioCoreAppComponentState.SetFullmode(value as boolean);
   }
 
-  public split : boolean;
+
+  public split: boolean;
 
   constructor(
-    private elementRef: ElementRef, 
+    private elementRef: ElementRef,
     private sioLoggerService: SioCoreLoggerService,
     public sioCoreAppComponentState: SioCoreAppComponentState,
-    public sioCorePageComponentState: SioCorePageComponentState,
+    public sioCorePagesComponentState: SioCorePagesComponentState,
   ) {
     //this.sioCoreAppComponentState.SetFullmode(false);
     this.toolbar = true;
@@ -56,10 +67,11 @@ export class SioCorePageComponent implements OnInit {
     //this.sioCoreAppComponentState.setSidemenu('pricetags');
   }
 
-  //@Select(SioCoreAppComponentState.split) split$!: Observable<boolean>; 
+  //@Select(SioCoreAppComponentState.split) split$!: Observable<boolean>;
 
   ngOnInit(): void {
     this.sioLoggerService.debug(`[sioCorePageComponentState][ngOnInit]`);
+    this.page = this.sioCorePagesComponentState.selectOne('pageId');
     //this.split$.subscribe((value) => { this.split = value});
   }
-}
+}

libs/core/src/lib/components/page/store/page.model.ts

@@ -1,7 +1,9 @@
+import { InputBoolean } from '@angular-ru/cdk/typings';
+
 export interface SioCorePageComponentInterface {
-  toolbar?: boolean;
+  toolbar?: InputBoolean;
   title?: string;
-  back?: boolean;
-  menu?: boolean;
-  search?: boolean;
+  back?: InputBoolean;
+  menu?: InputBoolean;
+  search?: InputBoolean;
 }

libs/core/src/lib/components/page/store/page.state.ts

@@ -1,81 +1,15 @@
 import { Injectable } from '@angular/core';
-import { StateToken } from '@ngxs/store';
+import { NgxsDataEntityCollectionsRepository } from '@angular-ru/ngxs/repositories';
+import { createEntityCollections } from '@angular-ru/cdk/entity';
 import { SioCorePageComponentInterface } from './page.model';
 
 import { State } from '@ngxs/store';
-import {
-  Computed,
-  DataAction,
-  StateRepository,
-} from '@angular-ru/ngxs/decorators';
-import { NgxsDataRepository } from '@angular-ru/ngxs/repositories';
-
-const PAGE_STATE_TOKEN = new StateToken<SioCorePageComponentInterface>('page');
+import { StateRepository } from '@angular-ru/ngxs/decorators';
 
 @StateRepository()
-@State<SioCorePageComponentInterface>({
-  name: PAGE_STATE_TOKEN,
-  defaults: {
-    'toolbar': true, 
-    'title': 'T_PAGE',
-    'menu': false,
-    'back': false,
-    'search': false,
-  } as SioCorePageComponentInterface,
+@State({
+  name: 'pages',
+  defaults: createEntityCollections(),
 })
 @Injectable()
-export class SioCorePageComponentState extends NgxsDataRepository<SioCorePageComponentInterface> {
-
-  @Computed()
-  public get title(): string | undefined {
-    return this.snapshot.title;
-  }
-
-  @DataAction()
-  public setTitle(value: string) {
-    this.patchState({ 'title': value });
-  }
-
-  @DataAction()
-  public setMenu(value: boolean) {
-    this.patchState({ 'menu': value });
-  }
-
-  @Computed()
-  public get menu(): boolean | undefined {
-    return this.snapshot.menu;
-  }
-
-  @DataAction()
-  public setBack(value: boolean) {
-    this.patchState({ 'back': value });
-  }
-
-  @Computed()
-  public get back(): boolean | undefined {
-    return this.snapshot.back;
-  }
-
-  @DataAction()
-  public setSearch(value: boolean) {
-    this.patchState({ 'search': value });
-  }
-
-  @Computed()
-  public get search(): boolean | undefined {
-    return this.snapshot.search;
-  }
-
-  @DataAction()
-  public setToolbar(value: boolean | undefined) {
-    this.patchState({ 'toolbar': value });
-  }
-
-  @Computed()
-  public get toolbar(): boolean | undefined {
-    return this.snapshot.toolbar;
-  }
-
-
-
-}
+export class SioCorePagesComponentState extends NgxsDataEntityCollectionsRepository<SioCorePageComponentInterface> {}

libs/core/src/lib/interfaces/app.interface.ts

@@ -9,7 +9,7 @@ export interface SioCoreAppCompomentInterface {
     avaibles?: string[];
   };
   layout?: {
-    left_panel?: { 
+    left_panel?: {
       type?: SioSideMenuType;
       menu?: string | undefined;
     };