add pull to refresh and datetime render in sioItem component

silicia-apps · Feb 19, 2024 · e03da24 · e03da24
1 parent 1c6def7
commit e03da24
Show file tree

Hide file tree

Showing 7 changed files with 609 additions and 373 deletions.
diff --git a/apps/demo/src/app/database/database.page.ts b/apps/demo/src/app/database/database.page.ts
@@ -43,13 +43,13 @@ export class DatabasePageComponent {
     this.sioCoreLoggerService.log('you have right swiped ');
   }
 
-  public load(event: Record<string, number | string>) {
+  public load(event: Record<string, number | string>):void {
     this.sioCoreLoggerService.debug('[DatabasePageComponent][load]', event);
     this.taskState.load();
   }
 
-  public refresh(event: Record<string, number | string>){
-    console.log(event)
+  public refresh(event: Event): void {
+    this.sioCoreLoggerService.debug('[DatabasePageComponent][refresh]', event);
     this.taskState.setRemoteIndex('');
     this.taskState.load();
   }

diff --git a/libs/core/src/i18n/en.ts b/libs/core/src/i18n/en.ts
@@ -6,4 +6,5 @@ export const en = {
     'PAGE_COMPONENT_LINK' : 'Componet Page of ',
     'LIST_PULL_WAITING': 'Waiting...',
     'LIST_PULL_TEXT': 'Pull To Refresh',
+    'LIST_LOADING': "Loading more data...",
 }
diff --git a/libs/core/src/i18n/it.ts b/libs/core/src/i18n/it.ts
@@ -8,5 +8,5 @@ export const it = {
     'PAGE_COMPONENT_LINK' : 'questo è il componente pagina di ',
     'LIST_PULL_WAITING': 'Attendere...',
     'LIST_PULL_TEXT': 'Trascina per aggiornare',
-
+    'LIST_LOADING': "Caricamento dati...",
  }
diff --git a/libs/core/src/lib/components/item/item.component.ts b/libs/core/src/lib/components/item/item.component.ts
@@ -5,77 +5,115 @@ import { AttributeBoolean } from '@angular-ru/cdk/decorators';
 import { InputBoolean } from '@angular-ru/cdk/typings';
 import { SioColorType } from '../../types';
 
-
 @Component({
   selector: 'sio-item',
   templateUrl: './item.component.html',
   styleUrls: ['./item.component.scss'],
 })
 export class SioCoreItemComponent implements OnInit {
+  private _color: SioColorType = undefined;
 
-  private _color : SioColorType = undefined;
-
   @Input() public set color(value: SioColorType) {
     //console.error(value);
-    this._color = value?value:'none';
+    this._color = value ? value : 'none';
   }
 
-  public get color() : SioColorType {
+  public get color(): SioColorType {
     //console.error(value);
     return this._color;
   }
 
   @Input() public $id: string | number | undefined = undefined;
-  @Input() public header = 'NO_HEADER';
-  @Input() public label = 'NO_LABEL';
+
+  private _header = 'NO_HEADER';
+  private _label = 'NO_LABEL';
+  @Input() public set header(value: string) {
+    if (Date.parse(value)) {
+      console.log('test' + value);
+      this._header = new Date(value).toLocaleString();
+    } else {
+      this._header = value;
+    }
+  }
+
+  get header(): string {
+    return this._header;
+  }
+
+  @Input() public set label(value: string) {
+    if (Date.parse(value)) {
+      console.log('test' + value);
+      this._label = new Date(value).toLocaleString();
+    } else {
+      this._label = value;
+    }
+  }
+
+  get label(): string {
+    return this._label;
+  }
 
   @AttributeBoolean()
-  @Input() public button: InputBoolean = false;  
+  @Input()
+  public button: InputBoolean = false;
 
   @AttributeBoolean()
-  @Input() public disabled: InputBoolean = false;  
-
+  @Input()
+  public disabled: InputBoolean = false;
+
   @Input() public thumbnail: string | undefined = undefined;
   @Input() public avatar: string | undefined = undefined;
   @Input() public icon: string | undefined = undefined;
 
   @AttributeBoolean()
-  @Input() public LeftSwipe: InputBoolean = false;
-
+  @Input()
+  public LeftSwipe: InputBoolean = false;
+
   @AttributeBoolean()
-  @Input() public RightSwipe: InputBoolean = false;
-
-  @Input() public alt : string | undefined = undefined;
-
-  @Output() sioCoreItemClick = new EventEmitter<Record<string, number | string>>();
-  @Output() sioCoreItemLeftSwipe = new EventEmitter<Record<string, number | string>>();
-  @Output() sioCoreItemRightSwipe = new EventEmitter<Record<string, number | string>>();
+  @Input()
+  public RightSwipe: InputBoolean = false;
+
+  @Input() public alt: string | undefined = undefined;
+
+  @Output() sioCoreItemClick = new EventEmitter<
+    Record<string, number | string>
+  >();
+  @Output() sioCoreItemLeftSwipe = new EventEmitter<
+    Record<string, number | string>
+  >();
+  @Output() sioCoreItemRightSwipe = new EventEmitter<
+    Record<string, number | string>
+  >();
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  constructor(private sioCoreLoggerService: SioCoreLoggerService) {
-
-  }
+  constructor(private sioCoreLoggerService: SioCoreLoggerService) {}
 
   ngOnInit(): void {
     this.sioCoreLoggerService.debug('[SioCoreItemComponent][ngOnInit]');
   }
 
   public async doRightSwipe(slidingItem: IonItemSliding): Promise<void> {
     await slidingItem.closeOpened();
-    this.sioCoreLoggerService.debug('[SioCoreItemComponent][doLeftSwipe] You have left swiped', this.$id);
-    this.sioCoreItemRightSwipe.emit({id: this.$id!});
+    this.sioCoreLoggerService.debug(
+      '[SioCoreItemComponent][doLeftSwipe] You have left swiped',
+      this.$id,
+    );
+    this.sioCoreItemRightSwipe.emit({ id: this.$id! });
   }
 
   public async doLeftSwipe(slidingItem: IonItemSliding): Promise<void> {
     await slidingItem.closeOpened();
-    this.sioCoreLoggerService.debug('[SioCoreItemComponent][doLeftSwipe] You have left swiped', this.$id);
-    this.sioCoreItemLeftSwipe.emit({ id: this.$id!}); 
+    this.sioCoreLoggerService.debug(
+      '[SioCoreItemComponent][doLeftSwipe] You have left swiped',
+      this.$id,
+    );
+    this.sioCoreItemLeftSwipe.emit({ id: this.$id! });
   }
 
   public async Click(): Promise<void> {
     this.sioCoreLoggerService.info(
-      '[SioCoreMenuItemComponent][Click] raise event click'
+      '[SioCoreMenuItemComponent][Click] raise event click',
     );
-    this.sioCoreItemClick.emit({ id: this.$id!});
+    this.sioCoreItemClick.emit({ id: this.$id! });
   }
 }
diff --git a/libs/core/src/lib/components/list/list.component.html b/libs/core/src/lib/components/list/list.component.html
@@ -1,6 +1,6 @@
-<ion-refresher slot="fixed">
+<ion-refresher slot="fixed" (ionRefresh)="onRefresh($event)">
   <ion-refresher-content pullingIcon="chevron-down-circle-outline" pullingText="{{ 'LIST_PULL_TEXT' | translate }}"
-    refreshingSpinner="circles" refreshingText="{{ 'LIST_PULL_WAITING' | translate }}" (ionRefresh)="onRefresh($event)">
+    refreshingSpinner="circles" refreshingText="{{ 'LIST_PULL_WAITING' | translate }}" >
   </ion-refresher-content>
 </ion-refresher>
 <ion-list>
@@ -12,6 +12,6 @@
     (sioCoreItemRightSwipe)="this.receiveListLeftSwipe($event)"></sio-item>
 </ion-list>
 <ion-infinite-scroll *ngIf="this.infinite" threshold="20%" (ionInfinite)="this.onListInfinite($event)">
-  <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
+  <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="{{ 'LIST_LOADING' | translate }}">
   </ion-infinite-scroll-content>
 </ion-infinite-scroll>
diff --git a/libs/core/src/lib/components/list/list.component.ts b/libs/core/src/lib/components/list/list.component.ts
@@ -43,7 +43,7 @@ export class SioCoreListComponent implements OnInit {
   @Output() sioCoreListItemLeftSwipe  = new EventEmitter<Record<string, number | string>>();
   @Output() sioCoreListItemRightSwipe = new EventEmitter<Record<string, number | string>>();
   @Output() sioCoreListInfinite = new EventEmitter<Record<string, number | string>>();
-  @Output() sioCoreRefreshList = new EventEmitter<Record<string, number | string>>();
+  @Output() sioCoreRefreshList = new EventEmitter<void>();
 
   // @Output() public sioCoreMenuDidChange = new EventEmitter();
 
@@ -85,6 +85,7 @@ export class SioCoreListComponent implements OnInit {
 
   public onRefresh(data: Event) {
     this.sioCoreLoggerService.debug('[sioCoreListItemComponent][onRefresh]', data);
+    this.sioCoreRefreshList.emit();
     setTimeout(() => {
       (data as RefresherCustomEvent).target.complete();
     }, 500);