diff --git a/apps/demo/src/app/database/database.page.html b/apps/demo/src/app/database/database.page.html index 79a8a9a..79c69a5 100644 --- a/apps/demo/src/app/database/database.page.html +++ b/apps/demo/src/app/database/database.page.html @@ -1,15 +1,15 @@ - + enableLeftSwipe + [enableInfinite]="this.taskState.localTotals < this.taskState.remoteTotals" + (leftSwipe)="this.archive($event)" + (rightSwipe)="this.delete($event)" + (infinite)="this.load($event)" + (refresh)="this.refresh($event)" + > ):void { + public load(event: Event):void { this.sioCoreLoggerService.debug('[DatabasePageComponent][load]', event); } diff --git a/libs/core/src/lib/components/item/item.component.ts b/libs/core/src/lib/components/item/item.component.ts index 3a88cc4..4bddcd3 100644 --- a/libs/core/src/lib/components/item/item.component.ts +++ b/libs/core/src/lib/components/item/item.component.ts @@ -75,15 +75,9 @@ export class SioCoreItemComponent implements OnInit { @Input() public alt: string | undefined = undefined; - @Output() sioCoreItemClick = new EventEmitter< - Record - >(); - @Output() sioCoreItemLeftSwipe = new EventEmitter< - Record - >(); - @Output() sioCoreItemRightSwipe = new EventEmitter< - Record - >(); + @Output() sioCoreItemClick = new EventEmitter(); + @Output() sioCoreItemLeftSwipe = new EventEmitter(); + @Output() sioCoreItemRightSwipe = new EventEmitter(); // eslint-disable-next-line @typescript-eslint/no-empty-function constructor(private sioCoreLoggerService: SioCoreLoggerService) {} @@ -98,7 +92,7 @@ export class SioCoreItemComponent implements OnInit { '[SioCoreItemComponent][doLeftSwipe] You have left swiped', this.$id, ); - this.sioCoreItemRightSwipe.emit({ id: this.$id! }); + this.sioCoreItemRightSwipe.emit(); //{ id: this.$id ? this.$id : '' }); } public async doLeftSwipe(slidingItem: IonItemSliding): Promise { @@ -107,13 +101,13 @@ export class SioCoreItemComponent implements OnInit { '[SioCoreItemComponent][doLeftSwipe] You have left swiped', this.$id, ); - this.sioCoreItemLeftSwipe.emit({ id: this.$id! }); + this.sioCoreItemLeftSwipe.emit(); //{ id: this.$id ? this.$id : '' }); } public async Click(): Promise { this.sioCoreLoggerService.info( '[SioCoreMenuItemComponent][Click] raise event click', ); - this.sioCoreItemClick.emit({ id: this.$id! }); + this.sioCoreItemClick.emit(); // id: this.$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 index 74554ec..2e49b05 100644 --- a/libs/core/src/lib/components/list/list.component.html +++ b/libs/core/src/lib/components/list/list.component.html @@ -7,11 +7,11 @@ + [LeftSwipe]="this.leftSwipe !== null" [RightSwipe]="this.rightSwipe !== null" + (sioCoreItemLeftSwipe)="this.onLeftSwipe($event)" + (sioCoreItemRightSwipe)="this.onRightSwipe($event)"> - + \ No newline at end of file diff --git a/libs/core/src/lib/components/list/list.component.ts b/libs/core/src/lib/components/list/list.component.ts index 6d06ffd..73dc99d 100644 --- a/libs/core/src/lib/components/list/list.component.ts +++ b/libs/core/src/lib/components/list/list.component.ts @@ -26,7 +26,7 @@ export class SioCoreListComponent implements OnInit { @Input() public enableInfinite: InputBoolean = false; @AttributeBoolean() - @Input() public enableLeftSwipe: InputBoolean; + @Input() public enableLeftSwipe: InputBoolean = false; @AttributeBoolean() @Input() public enableRightSwipe: InputBoolean = true; @@ -39,11 +39,11 @@ export class SioCoreListComponent implements OnInit { // eslint-disable-next-line @typescript-eslint/no-explicit-any @Input() public data: any[] | undefined; - @Output() clickItem = new EventEmitter>(); - @Output() leftSwipe = new EventEmitter>(); - @Output() rightSwipe = new EventEmitter>(); - @Output() infinite = new EventEmitter>(); - @Output() refresh = new EventEmitter(); + @Output() clickItem = new EventEmitter(); + @Output() leftSwipe = new EventEmitter(); + @Output() rightSwipe = new EventEmitter(); + @Output() infinite = new EventEmitter(); + @Output() refresh = new EventEmitter(); // @Output() public sioCoreMenuDidChange = new EventEmitter(); @@ -74,28 +74,27 @@ export class SioCoreListComponent implements OnInit { return itemObject.id; } - public onLeftSwipe(data: Record) { + public onLeftSwipe(data: Event) { this.sioCoreLoggerService.debug('[sioCoreListItemComponent][receiveListLeftSwipe]', data); this.leftSwipe.emit(data); } - public onRighSwipe(data: Record) { + public onRightSwipe(data: Event) { this.sioCoreLoggerService.debug('[sioCoreListItemComponent][receiveListRightSwipe]', data); this.rightSwipe.emit(data); } - public onRefresh(data: Event) { - this.sioCoreLoggerService.debug('[sioCoreListItemComponent][onRefresh]', data); - this.refresh.emit(); + public onRefresh(event: RefresherCustomEvent) { + this.sioCoreLoggerService.debug('[sioCoreListItemComponent][onRefresh]', event); + this.refresh.emit(event); setTimeout(() => { - (data as RefresherCustomEvent).target.complete(); + event.target.complete(); }, 500); } - public onInfinite(data: Event) { - this.sioCoreLoggerService.debug('[sioCoreListItemComponent][receiveListInfinite]', data); - this.infinite.emit({ LastId : this.data!.pop().$id }); + public onInfinite(event: InfiniteScrollCustomEvent) { + this.sioCoreLoggerService.debug('[sioCoreListItemComponent][receiveListInfinite]', event); setTimeout(() => { - (data as InfiniteScrollCustomEvent).target.complete(); + event.target.complete(); }, 500); } } diff --git a/libs/database/src/index.ts b/libs/database/src/index.ts index 9ff175e..9678fc3 100644 --- a/libs/database/src/index.ts +++ b/libs/database/src/index.ts @@ -3,5 +3,4 @@ export * from './lib/services'; export * from './lib/interfaces'; export * from './lib/tokens'; export * from './lib/store'; -export * from './lib/helpers'; -export * from './lib/directives'; +export * from './lib/helpers'; \ No newline at end of file diff --git a/libs/database/src/lib/components/data-list/data-list.component.html b/libs/database/src/lib/components/data-list/data-list.component.html index 90f7c4d..a5c5f7d 100644 --- a/libs/database/src/lib/components/data-list/data-list.component.html +++ b/libs/database/src/lib/components/data-list/data-list.component.html @@ -1,12 +1,12 @@ diff --git a/libs/database/src/lib/components/data-list/data-list.component.scss b/libs/database/src/lib/components/data-list/data-list.component.scss index e69de29..082cbba 100644 --- a/libs/database/src/lib/components/data-list/data-list.component.scss +++ b/libs/database/src/lib/components/data-list/data-list.component.scss @@ -0,0 +1,19 @@ +:host { + .ion-content-scroll-host::before, + .ion-content-scroll-host::after { + position: absolute; + + width: 1px; + height: 1px; + + content: ''; + } + + .ion-content-scroll-host::before { + bottom: -1px; + } + + .ion-content-scroll-host::after { + top: -1px; + } +} diff --git a/libs/database/src/lib/components/data-list/data-list.component.ts b/libs/database/src/lib/components/data-list/data-list.component.ts index f63ea8c..928bbf6 100644 --- a/libs/database/src/lib/components/data-list/data-list.component.ts +++ b/libs/database/src/lib/components/data-list/data-list.component.ts @@ -10,12 +10,13 @@ import { SioDatabaseState } from '../../store'; @Component({ selector: 'sio-datalist', - templateUrl: './list.component.html', - styleUrls: ['./list.component.scss'], + templateUrl: './data-list.component.html', + styleUrls: ['./data-list.component.scss'], }) export class SioDatabaseListComponent implements OnInit { // input related to this component - @Input() public store: SioDatabaseState | undefined = undefined; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + @Input() public store: SioDatabaseState | undefined = undefined; // Wrapped input for subcomponents @@ -32,7 +33,7 @@ export class SioDatabaseListComponent implements OnInit { @AttributeBoolean() @Input() - public infinite: InputBoolean = false; + public enableInfinite: InputBoolean = false; @AttributeBoolean() @Input() @@ -48,11 +49,11 @@ export class SioDatabaseListComponent implements OnInit { @Input() public avatar: string | undefined; @Input() public thumbnail: string | undefined; - @Output() Click = new EventEmitter>(); - @Output() LeftSwipe = new EventEmitter>(); - @Output() RightSwipe = new EventEmitter>(); - @Output() Infinite = new EventEmitter>(); - @Output() Refresh = new EventEmitter>(); + @Output() Click = new EventEmitter(); + @Output() LeftSwipe = new EventEmitter(); + @Output() RightSwipe = new EventEmitter(); + @Output() infinite = new EventEmitter(); + @Output() refresh = new EventEmitter(); constructor(private sioCoreLoggerService: SioCoreLoggerService) { this.sioCoreLoggerService.debug('[SioDatabaseListComponent][constructor]'); @@ -62,30 +63,30 @@ export class SioDatabaseListComponent implements OnInit { this.sioCoreLoggerService.debug('[SioDatabaseListComponent][ngOnInit]'); } - public onLeftSwipe(data: Record) { + public onLeftSwipe(event: Event) { this.sioCoreLoggerService.debug( '[SioDatabaseListComponent][onLeftSwipe]', - data, + event, ); - this.LeftSwipe.emit(data); + this.LeftSwipe.emit(event); } - public onRighSwipe(data: Record) { + public onRightSwipe(event: Event) { this.sioCoreLoggerService.debug( '[SioDatabaseListComponent][onRightSwipe]', - data, + event, ); - this.RightSwipe.emit(data); + this.RightSwipe.emit(event); } - public onRefresh(data: Event) { + public onRefresh(event: RefresherCustomEvent) { this.sioCoreLoggerService.debug( '[SioDatabaseListComponent][onRefresh]', - data, + event, ); if (this.store) this.store.load(); - this.Refresh.emit(); + this.refresh.emit(); setTimeout(() => { - (data as RefresherCustomEvent).target.complete(); + (event as RefresherCustomEvent).target.complete(); }, 500); } @@ -94,7 +95,7 @@ export class SioDatabaseListComponent implements OnInit { '[sioDatabaseListComponent][onInfinite]', data, ); - this.Infinite.emit({ LastId: this.store!.pop().$id }); + this.infinite.emit(); //{ LastId: this.store.entitiesArray.pop().$id }); if (this.store) { this.store.setRemoteIndex(''); this.store.load(); diff --git a/libs/database/src/lib/components/index.ts b/libs/database/src/lib/components/index.ts new file mode 100644 index 0000000..a19157a --- /dev/null +++ b/libs/database/src/lib/components/index.ts @@ -0,0 +1 @@ +export * from './data-list'; \ No newline at end of file diff --git a/libs/database/src/lib/database.module.ts b/libs/database/src/lib/database.module.ts index 8b73ef3..c9c2e7d 100644 --- a/libs/database/src/lib/database.module.ts +++ b/libs/database/src/lib/database.module.ts @@ -4,17 +4,12 @@ import { CommonModule } from '@angular/common'; import { NgxsModule } from '@ngxs/store'; import { SioCommonModule } from '@silicia/core'; -import { SioListDataDirective } from './directives/list-data.directives' +import { SioDatabaseListComponent } from './components'; @NgModule({ - declarations: [SioListDataDirective], - imports: [ - CommonModule, - SioCommonModule, - NgxsModule.forFeature([]), - ], - exports: [SioListDataDirective], - providers: [] + declarations: [SioDatabaseListComponent], + imports: [CommonModule, SioCommonModule, NgxsModule.forFeature([])], + exports: [SioDatabaseListComponent], + providers: [], }) export class SioDatabaseModule {} -