Fe 140 jamselect refactorizar jamselect

projects/ngx-jsonapi-material/package.json

@@ -1,6 +1,6 @@
 {
     "name": "ngx-jsonapi-material",
-    "version": "0.22.55",
+    "version": "1.0.0",
     "authors": [
         "Reyesoft"
     ],

projects/ngx-jsonapi-material/src/lib/autocomplete/autocomplete.component.html

@@ -2,9 +2,9 @@
     appearance="outline" floatLabel="never" color="accent"
 >
     <input matInput aria-label="Escribe algo que buscar" name="autocomplete-resource"
-        [placeholder]="toggleResource?.attributes[displayAttributes[0]] || placeholder"
+        [placeholder]="toRelate?.attributes[displayAttributes[0]] || placeholder"
         type="text"
-        [ngClass]="toggleResource?.attributes[displayAttributes[0]] ? 'custom-placeholder' : null"
+        [ngClass]="toRelate?.attributes[displayAttributes[0]] ? 'custom-placeholder' : null"
         [matAutocomplete]="auto"
         [formControl]="autocompleteCtrl"
         (blur)="closeAutocomplete()"
@@ -17,9 +17,9 @@
         (optionSelected)="selectedResource($event.option.value)">
         <div *ngIf="showList">
             <mat-option [value]="null" (click)="clearDisplay()">-- Ninguna --</mat-option>
-            <mat-option [ngClass]="toggleResource?.id === resource.id ? 'mat-selected mat-active' : null"
+            <mat-option [ngClass]="toRelate?.id === resource.id ? 'mat-selected mat-active' : null"
                 [value]="resource"
-                *ngFor="let resource of filtered_resource | async; trackBy: trackByFn"
+                *ngFor="let resource of filteredCollection | async; trackBy: trackByFn"
             >
                 <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="4px">
                     <mat-icon *ngIf="icon">{{ icon }}</mat-icon>
@@ -36,7 +36,7 @@
 
     <div fxLayout="row" matSuffix fxLayoutAlign="end center">
         <button mat-icon-button type="button" class="mat-button" matSuffix matTooltip="Limpiar selección"
-            *ngIf="toggleResource?.attributes[displayAttributes[0]] || autocompleteCtrl.value"
+            *ngIf="toRelate?.attributes[displayAttributes[0]] || autocompleteCtrl.value"
             [disabled]="!collection?.loaded"
             (click)="clearDisplay()"
         >

projects/ngx-jsonapi-material/src/lib/autocomplete/autocomplete.component.ts

@@ -1,78 +1,45 @@
 import { Component, OnInit, OnDestroy, Input, ElementRef, ViewChild, EventEmitter, Output, ChangeDetectorRef, TrackByFunction } from '@angular/core';
-import { Observable, Subject } from 'rxjs';
-import { Resource, DocumentCollection, Service, IParamsCollection } from 'ngx-jsonapi';
-import { FormControl, FormGroup } from '@angular/forms';
-import { timeout, filter, tap } from 'rxjs/operators';
+import { Resource } from 'ngx-jsonapi';
+import { timeout } from 'rxjs/operators';
 import { MatAutocompleteTrigger } from '@angular/material';
-import { filterOrRequest } from '../../lib/batch';
 import { Destroyer } from '../../lib/destroyer';
+import { ParentAutocomplete } from '../parent-autocomplete';
 
 @Component({
   selector: 'jam-autocomplete',
   styleUrls: ['./autocomplete.component.scss'],
   templateUrl: 'autocomplete.component.html'
 })
-export class JamAutocompleteComponent implements OnInit, OnDestroy {
+export class JamAutocompleteComponent extends ParentAutocomplete implements OnInit, OnDestroy {
     /**
      * @param  {boolean} previewSelected
      * @usageNotes By default it is `false`.
      * In case it is `true`, the autocomplete,
      * shows in the placeholder or matLabel a preview of the selected item.
      */
     @Input() public previewSelected: boolean = false;
-    /**
-     * @param {string} displayText
-     * @usageNotes Text of the selected item.
-     */
-    @Input() public toggleResource: Resource;
-    @Input() public placeholder: string = 'Escribe algo que buscar';
-    @Input() public services: Service;
-    @Input() public displayAttributes: Array<string> = [];
-    @Input() public remoteFilter = {};
-    @Input() public include: Array<string> = [];
-    @Input() public sort: Array<string> = [];
     @Input() public icon: string;
     @Input() public showList: boolean = true;
-    @Output() public toggleResourceChange = new EventEmitter<Resource>();
     @ViewChild(MatAutocompleteTrigger) public autocompleteResource: MatAutocompleteTrigger;
     @ViewChild('autocompleteResource') public autocompleteResourceInput: ElementRef;
 
-    public collection: DocumentCollection;
-    public filtered_resource: Observable<Array<Resource>>;
-    public dataArrived: Subject<string> = new Subject();
-    public myForm: FormGroup;
-    public autocompleteCtrl: FormControl = new FormControl();
-    public resourceArray: Array<Resource> = [];
-    public use_is_loading = true;
     public trackByFn: TrackByFunction<Resource>;
-    public resourceArrayLastFilterValue: string;
-
     private destroyer = new Destroyer();
-    private readonly collectionPerPage = 100; // 500
-    private readonly resource_max_on_list = 50;
 
     public constructor(
         private changeDetectorRef: ChangeDetectorRef
-    ) {}
+    ) {
+        super();
+    }
 
     public ngOnDestroy() {
         this.destroyer.destroy();
     }
 
     public ngOnInit(): void {
         this.clearDisplay();
-        this.collection = this.services.newCollection();
-        this.filtered_resource = this.autocompleteCtrl.valueChanges.pipe(
-            this.destroyer.pipe(),
-            filterOrRequest({
-                attribute_to_search: this.displayAttributes[0],
-                resourcesArray: this.resourceArray,
-                getAllFc: this.getAll.bind(this),
-                last_filter_value: this.resourceArrayLastFilterValue,
-                collection: this.collection,
-                page_size: this.collectionPerPage
-            })
-        );
+        this.collection = this.service.newCollection();
+        this.reload();
     }
 
     public closeAutocomplete() {
@@ -92,61 +59,13 @@ export class JamAutocompleteComponent implements OnInit, OnDestroy {
         }
 
         if (this.previewSelected) {
-            this.toggleResource = resource;
+            this.toRelate = resource;
         }
 
-        this.toggleResourceChange.emit(resource);
+        this.toRelateChange.emit(resource);
     }
 
     public displayFn(resource?: Resource): string {
         return ''; // clear input after item selection
     }
-
-    public refresh() {
-        this.services.clearCacheMemory();
-        this.use_is_loading = false;
-    }
-
-    public getAll(search_text: string): Observable<DocumentCollection> {
-        let params: IParamsCollection = {
-            page: {
-                number: 1,
-                size: this.collectionPerPage
-            },
-            remotefilter: this.remoteFilter,
-            include: this.include
-        };
-        if (search_text) {
-            params.remotefilter = { [this.displayAttributes[0]]: search_text };
-        }
-
-        return this.services.all(params).pipe(
-            filter(collection => collection.builded),
-            tap(collection => {
-                this.collection = collection;
-            })
-        );
-    }
-
-    public clearDisplay(): void {
-        this.toggleResource = null;
-        this.autocompleteCtrl.setValue('');
-    }
-
-    private filterResourceByName(value: string | Resource): Array<Resource> {
-        const filterValue = typeof value === 'string' ? value.toLowerCase() : '';
-        let count = 0;
-
-        this.showList = !value && filterValue.length > 0;
-
-        return this.resourceArray.filter((resource: Resource) => {
-            if (
-                count < this.resource_max_on_list &&
-                (resource.attributes[this.displayAttributes[0]].toLowerCase().indexOf(filterValue) === 0 ||
-                    resource.attributes[this.displayAttributes[0]].toLowerCase().indexOf(' ' + filterValue) > 0)
-            ) {
-                return count += 1;
-            }
-        });
-    }
 }

projects/ngx-jsonapi-material/src/lib/parent-autocomplete.ts

@@ -0,0 +1,81 @@
+import { Resource, Service, DocumentCollection, IParamsCollection } from 'ngx-jsonapi';
+import { Output, EventEmitter, Input } from '@angular/core';
+import { Observable } from 'rxjs';
+import { filter, tap } from 'rxjs/operators';
+import { FormControl } from '@angular/forms';
+import { filterOrRequest } from './batch';
+
+export class ParentAutocomplete {
+    @Input() public toRelate: Resource;
+    @Input() public remoteFilter: { [key: string]: any };
+    @Input() public placeholder: string;
+    @Input() public service: Service;
+    @Input() public matLabel: string;
+    @Input() public disabled: boolean;
+    @Input() public hasRefresh: boolean = false;
+    @Input() public include: Array<string> = [];
+    @Input() public displayAttributes: Array<string> = [];
+    @Input() public sort: Array<string> = [];
+    @Input() public appareance: 'fill' | 'outline' | 'legacy' | 'standard' = 'outline';
+    @Output() public toRelateChange = new EventEmitter<Resource>();
+
+    public autocompleteCtrl: FormControl = new FormControl();
+    public collection: DocumentCollection;
+    public filteredCollection: Observable<Array<Resource>>;
+    protected collectionArrayLastFilterValue: string;
+    protected collectionArray: Array<Resource> = [];
+    protected readonly collectionPerPage = 100;
+
+    public selectedResource(resource: Resource) {
+        if (!resource) {
+            return;
+        }
+
+        this.toRelate = resource;
+        this.toRelateChange.emit(resource);
+    }
+
+    public refresh() {
+        this.service.clearCacheMemory();
+        this.reload();
+    }
+
+    public clearDisplay(): void {
+        this.toRelate = null;
+        this.autocompleteCtrl.setValue('');
+    }
+
+    protected reload(): void {
+        console.log('😈 entro aca', this.filteredCollection);
+        this.filteredCollection = this.autocompleteCtrl.valueChanges.pipe(
+            filterOrRequest({
+                attribute_to_search: this.displayAttributes[0],
+                resourcesArray: this.collectionArray,
+                getAllFc: this.getAll.bind(this),
+                last_filter_value: this.collectionArrayLastFilterValue,
+                collection: this.collection,
+                page_size: this.collectionPerPage
+            })
+        );
+    }
+
+    private getAll(search_text: string): Observable<DocumentCollection> {
+        let params: IParamsCollection = {
+            page: { number: 1, size: this.collectionPerPage },
+            remotefilter: this.remoteFilter,
+            sort: this.sort,
+            include: this.include
+        };
+
+        if (search_text) {
+            params.remotefilter = { [this.displayAttributes[0]]: search_text };
+        }
+
+        return this.service.all(params).pipe(
+            filter(collection => collection.builded),
+            tap(collection => {
+                this.collection = collection;
+            })
+        );
+    }
+}

projects/ngx-jsonapi-material/src/lib/select/select.component.html

@@ -3,18 +3,18 @@
     [appearance]="appareance"
 >
     <mat-label>
-        {{ label || 'Seleccione una opción' }}
+        {{ matLabel || 'Seleccione una opción' }}
         <i *ngIf="!toRelate">(Ninguna)</i>
     </mat-label>
     <mat-select
         [ngModel]="toRelate"
-        (ngModelChange)="updateRelationships($event)"
+        (ngModelChange)="selectedResource($event)"
         [disabled]="disabled || false"
         [placeholder]="placeholder || 'Seleccione una opción'"
         [multiple]="multiple || false"
         >
 
-        <div class="mat-option-header" *ngIf="adaptiveArray.length >= 10">
+        <div class="mat-option-header">
             <jam-search-input
                 [text]="searchText"
                 [opened]="true"
@@ -24,14 +24,18 @@
 
         <mat-divider></mat-divider>
 
-        <mat-option *ngIf="removeRelationships" [value]="clear_relationships">-- Ninguna --</mat-option>
+        <mat-option *ngIf="removeRelationships"
+            (click)="clearDisplay()"
+        >
+            -- Ninguna --
+        </mat-option>
 
-        <ng-container *ngFor="let resource of adaptiveArray | filter: searchText">
+        <ng-container *ngFor="let resource of filteredCollection | async | filter: searchText">
             <mat-option [value]="resource" *ngIf="parentId && resource.id !== parentId">
-                {{ resource.attributes[displayAttribute] }}
+                {{ resource.attributes[displayAttributes[0]] }}
             </mat-option>
             <mat-option [value]="resource" *ngIf="!parentId">
-                {{ resource.attributes[displayAttribute] }}
+                {{ resource.attributes[displayAttributes[0]] }}
             </mat-option>
         </ng-container>
 
@@ -41,7 +45,7 @@
     </mat-select>
 
     <button matSuffix mat-icon-button class="mat-button" *ngIf="hasRefresh"
-        (click)="refresh.emit()">
+        (click)="refresh()">
         <div fxLayout="row" fxLayoutAlign="center center">
             <mat-icon class="mat-hint">refresh</mat-icon>
         </div>