@solidev/data 0.0.2 → 0.0.3

package/fesm2020/solidev-data.mjs

@@ -3,7 +3,7 @@ import { InjectionToken, PLATFORM_ID, Injectable, Inject, Optional, Component, I
 import 'reflect-metadata';
 import * as i2$2 from '@angular/forms';
 import { FormControl, Validators, FormGroup, ReactiveFormsModule, UntypedFormControl, NG_VALUE_ACCESSOR, UntypedFormGroup } from '@angular/forms';
-import { throwError, ReplaySubject, share, combineLatest, of, takeUntil, NEVER, Subject, debounceTime, distinctUntilChanged, isObservable, firstValueFrom, timer, Observable, BehaviorSubject, merge } from 'rxjs';
+import { throwError, ReplaySubject, share, combineLatest, of, takeUntil, NEVER, Subject, debounceTime, distinctUntilChanged, firstValueFrom, isObservable, timer, Observable, BehaviorSubject, merge } from 'rxjs';
 import { tap, switchMap, map, throttleTime, filter, mergeMap, finalize, catchError, take, first } from 'rxjs/operators';
 import * as i2 from '@angular/platform-browser';
 import { makeStateKey } from '@angular/platform-browser';
@@ -2044,16 +2044,165 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImpor
                 type: Input
             }] } });
 
+class Level {
+    constructor(tree, level, choices) {
+        this.tree = tree;
+        this.level = level;
+        this.fc = new FormControl('');
+        this.choices = choices;
+        this.subs = this.fc.valueChanges.subscribe((val) => {
+            if (this.selected !== val) {
+                this.selected = val;
+                this.tree.updated(this);
+            }
+        });
+    }
+    close() {
+        this.subs.unsubscribe();
+    }
+}
+class Tree {
+    constructor(qs, maxLevel, display, filter) {
+        this.qs = qs;
+        this.maxLevel = maxLevel;
+        this.display = display;
+        this.filter = filter;
+        this.levels = [];
+        this.changed = new Subject();
+    }
+    /**
+     * Conditionnaly add level to current tree.
+     *
+     * - if previous level have non-empty selected value
+     * - if current level choices are non empty
+     */
+    async addLevel(fparent) {
+        let values = [];
+        if (this.levels.length === 0) {
+            values = await firstValueFrom(this.qs
+                .filter({ level: this.levels.length, parent: 'null', ...this.filter })
+                .get());
+        }
+        else {
+            const parent = fparent
+                ? fparent
+                : this.levels[this.levels.length - 1].selected;
+            if (parent) {
+                values = await firstValueFrom(this.qs
+                    .filter({
+                    level: this.levels.length,
+                    parent: this.levels[this.levels.length - 1].selected || 'null',
+                    ...this.filter,
+                })
+                    .get());
+            }
+        }
+        if (values.length > 0) {
+            const level = new Level(this, this.levels.length, []);
+            for (const v of values) {
+                level.choices.push({ value: v.id, desc: this.display(v) });
+            }
+            this.levels.push(level);
+            return level;
+        }
+        return null;
+    }
+    updated(level) {
+        const newLevels = [];
+        for (const l of this.levels) {
+            if (l.level <= level.level) {
+                newLevels.push(l);
+            }
+            else if (l.level > level.level) {
+                l.close();
+            }
+        }
+        this.levels = newLevels;
+        this.addLevel();
+        if (level.selected) {
+            this.changed.next(level.selected);
+        }
+        else {
+            this.changed.next(this.levels[level.level - 1]?.selected || null);
+        }
+    }
+    async prepare(value) {
+        // console.log('prepare', value);
+        const levels = [];
+        let cur = (await firstValueFrom(this.qs.filter({ id: value, ...this.filter }).get()))[0];
+        levels.push(cur);
+        let nlev = 0;
+        while (cur.parent !== null) {
+            cur = (await firstValueFrom(this.qs
+                .filter({
+                id: cur.parent,
+                ...this.filter,
+            })
+                .get()))[0];
+            levels.push(cur);
+            nlev++;
+            if (nlev > this.maxLevel) {
+                throw Error('Max level error, could not find root');
+            }
+        }
+        for (let i = levels.length - 1; i >= 0; i--) {
+            const lv = await this.addLevel();
+            if (lv !== null) {
+                lv.selected = levels[i].id;
+                lv.fc.setValue(levels[i].id, { emitEvent: false });
+            }
+        }
+        if (this.levels.length <= this.maxLevel) {
+            await this.addLevel();
+        }
+    }
+    reset() { }
+}
 class ModelListTreeFilterComponent {
     constructor() {
         this.classes = '';
     }
+    async ngOnInit() {
+        this.tree = new Tree(this.filter.queryset, this.filter.maxLevel, this.filter.display, this.filter.filter);
+        if (this.filter.get()) {
+            await this.tree.prepare(this.filter.get()?.value);
+        }
+        else {
+            await this.tree.addLevel();
+        }
+        this.tree.changed.pipe(debounceTime(250)).subscribe((val) => {
+            // console.log('changed', val);
+            if (val === null) {
+                this.filter.clear();
+                this.list.filters.update();
+            }
+            else {
+                if (this.filter.set(val, '')) {
+                    this.list.filters.update();
+                }
+            }
+        });
+        // this.tree.changed.subscribe((selected) => {
+        //   console.log('tree changed', selected);
+        //   this.filter.set(selected, '');
+        // });
+        // if (this.filter.getValue()) {
+        //   console.log('filter value', this.filter.getValue());
+        //   await this.tree.prepare(this.filter.getValue() as number);
+        // } else {
+        //   await this.tree.addLevel();
+        // }
+    }
+    disable() {
+        this.filter.enabled = false;
+        this.list.filters.update();
+    }
 }
 ModelListTreeFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: ModelListTreeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ModelListTreeFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: ModelListTreeFilterComponent, isStandalone: true, selector: "data-model-list-tree-filter", inputs: { list: "list", filter: "filter", classes: "classes" }, ngImport: i0, template: "<p>model-list-tree-filter works!</p>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+ModelListTreeFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: ModelListTreeFilterComponent, isStandalone: true, selector: "data-model-list-tree-filter", inputs: { list: "list", filter: "filter", classes: "classes" }, ngImport: i0, template: "\n<div class=\"filteritem\" [ngClass]=\"filter.displayClasses || classes\">\n  <div class=\"trash float-end\" (click)=\"disable()\"><i class=\"bi bi-trash\"></i></div>\n  <label>{{filter.label}}</label>\n  <div class=\"levelselect\" *ngFor=\"let l of tree.levels\">\n    <select class=\"form-select form-select-sm\" [formControl]=\"l.fc\">\n      <option value=\"\">{{filter.help}}</option>\n      <option *ngFor=\"let ch of l.choices\" [value]=\"ch.value\">{{ch.desc}}</option>\n    </select>\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: ModelListTreeFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'data-model-list-tree-filter', standalone: true, imports: [CommonModule], template: "<p>model-list-tree-filter works!</p>" }]
+            args: [{ selector: 'data-model-list-tree-filter', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "\n<div class=\"filteritem\" [ngClass]=\"filter.displayClasses || classes\">\n  <div class=\"trash float-end\" (click)=\"disable()\"><i class=\"bi bi-trash\"></i></div>\n  <label>{{filter.label}}</label>\n  <div class=\"levelselect\" *ngFor=\"let l of tree.levels\">\n    <select class=\"form-select form-select-sm\" [formControl]=\"l.fc\">\n      <option value=\"\">{{filter.help}}</option>\n      <option *ngFor=\"let ch of l.choices\" [value]=\"ch.value\">{{ch.desc}}</option>\n    </select>\n  </div>\n</div>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { list: [{
                 type: Input
             }], filter: [{
@@ -2242,6 +2391,9 @@ class ModelListFilter {
     getValue() {
         return `${this._value?.value}`;
     }
+    get() {
+        return this._value;
+    }
     mtoggle(value, desc, notify = true) {
         if (this._mvalue.has(`${value}`)) {
             this._mvalue.delete(`${value}`);
@@ -2535,15 +2687,19 @@ class ModelListTextFilter extends ModelListFilter {
     }
 }
 
-class ModelListTreeFilter extends ModelListFilter {
+class ModelListTreeFilter extends ModelListAutocompleteFilter {
     constructor(params) {
         super(params);
-        this.type = "tree";
-        if (this.label == "") {
-            this.label = "Sélectionnez dans la hiérarchie";
+        this.maxLevel = 5;
+        this.type = 'tree';
+        if (this.label == '') {
+            this.label = 'Sélectionnez dans la hiérarchie';
         }
-        if (this.help == "") {
-            this.help = "Texte à rechercher";
+        if (this.help == '') {
+            this.help = 'Texte à rechercher';
+        }
+        if (params.maxLevel) {
+            this.maxLevel = params.maxLevel;
         }
     }
 }