selectic 3.0.18 → 3.0.20

package/src/Store.tsx

@@ -5,7 +5,7 @@
  */
 
 import { reactive, watch, unref, computed, ComputedRef } from 'vue';
-import { convertToRegExp, assignObject, deepClone } from './tools';
+import { convertToRegExp, assignObject, deepClone, compareOptions } from './tools';
 
 /* {{{ Types definitions */
 
@@ -346,6 +346,7 @@ interface Messages {
     moreSelectedItem: string;
     moreSelectedItems: string;
     unknownPropertyValue: string;
+    wrongQueryResult: string;
 }
 
 export type PartialMessages = { [K in keyof Messages]?: Messages[K] };
@@ -376,6 +377,7 @@ let messages: Messages = {
     moreSelectedItem: '+1 other',
     moreSelectedItems: '+%d others',
     unknownPropertyValue: 'property "%s" has incorrect values.',
+    wrongQueryResult: 'Query did not return all results.',
 };
 
 let closePreviousSelectic: undefined | voidCaller;
@@ -1165,7 +1167,7 @@ export default class SelecticStore {
         return childOptions;
     }
 
-    private buildAllOptions(keepFetched = false) {
+    private buildAllOptions(keepFetched = false, stopFetch = false) {
         const allOptions: OptionValue[] = [];
         let listOptions: OptionValue[] = [];
         let elementOptions: OptionValue[] = [];
@@ -1242,13 +1244,26 @@ export default class SelecticStore {
             }
         }
 
-        this.state.filteredOptions = [];
-        this.state.totalFilteredOptions = Infinity;
+        if (!stopFetch) {
+            this.state.filteredOptions = [];
+            this.state.totalFilteredOptions = Infinity;
 
-        this.buildFilteredOptions().then(() => {
-            /* XXX: To recompute for strict mode and auto-select */
-            this.assertCorrectValue();
-        });
+            this.buildFilteredOptions().then(() => {
+                /* XXX: To recompute for strict mode and auto-select */
+                this.assertCorrectValue();
+            });
+        } else {
+            /* Do not fetch again just build filteredOptions */
+            const search = this.state.searchText;
+            if (!search) {
+                this.state.filteredOptions = this.buildGroupItems(allOptions);
+                this.state.totalFilteredOptions = this.state.filteredOptions.length;
+                return;
+            }
+            const options = this.filterOptions(allOptions, search);
+            this.state.filteredOptions = options;
+            this.state.totalFilteredOptions = this.state.filteredOptions.length;
+        }
     }
 
     private async buildFilteredOptions() {
@@ -1407,6 +1422,7 @@ export default class SelecticStore {
             const requestId = ++this.requestId;
             const {total: rTotal, result} = await fetchCallback(search, offset, limit);
             let total = rTotal;
+            let errorMessage = '';
 
             /* Assert result is correctly formatted */
             if (!Array.isArray(result)) {
@@ -1426,8 +1442,16 @@ export default class SelecticStore {
             if (!search) {
                 /* update cache */
                 state.totalDynOptions = total;
-                state.dynOptions.splice(offset, limit, ...result);
-                setTimeout(() => this.buildAllOptions(true), 0);
+                const old = state.dynOptions.splice(offset, limit, ...result);
+                if (compareOptions(old, result)) {
+                    /* Added options are the same as previous ones.
+                     * Stop fetching to avoid infinite loop
+                     */
+                    errorMessage = labels.wrongQueryResult;
+                    setTimeout(() => this.buildAllOptions(true, true), 0);
+                } else {
+                    setTimeout(() => this.buildAllOptions(true), 0);
+                }
             }
 
             /* Check request is not obsolete */
@@ -1456,12 +1480,12 @@ export default class SelecticStore {
                 this.addStaticFilteredOptions(true);
             }
 
-            state.status.errorMessage = '';
+            state.status.errorMessage = errorMessage;
         } catch (e) {
             state.status.errorMessage = (e as Error).message;
             if (!search) {
                 state.totalDynOptions = 0;
-                this.buildAllOptions(true);
+                this.buildAllOptions(true, true);
             }
         }
 

package/src/css/selectic.css

@@ -184,13 +184,21 @@
 
 .selectic__extended-list {
     position: fixed;
+    top: var(--top-position, 0);
     z-index: 2000;
     height: auto;
+    max-height: var(--availableSpace);
     background-color: var(--selectic-bg, #ffffff);
     box-shadow: 2px 5px 12px 0px #888888;
     border-radius: 0 0 4px 4px;
     padding: 0;
+    width: var(--list-width, 200px);
     min-width: 200px;
+    display: grid;
+    grid-template-rows: minmax(0, max-content) 1fr;
+}
+.selectic__extended-list.selectic-position-top {
+    box-shadow: 2px -3px 12px 0px #888888;
 }
 .selectic__extended-list__list-container{
     overflow: auto;

package/src/tools.ts

@@ -1,4 +1,5 @@
 import { unref } from 'vue';
+import { OptionValue } from './Store';
 
 /**
  * Clone the object and its inner properties.
@@ -86,3 +87,33 @@ export function assignObject<T>(obj: Partial<T>, ...sourceObjects: Array<Partial
     }
     return result as T;
 }
+
+/** Compare 2 list of options.
+ * @returns true if there are no difference
+ */
+export function compareOptions(oldOptions: OptionValue[], newOptions: OptionValue[]): boolean {
+    if (oldOptions.length !== newOptions.length) {
+        return false;
+    }
+
+    return oldOptions.every((oldOption, idx) => {
+        const newOption = newOptions[idx];
+        const keys = Object.keys(oldOption);
+        if (keys.length !== Object.keys(newOption).length) {
+            return false;
+        }
+        return keys.every((optionKey) => {
+            const key = optionKey as keyof OptionValue;
+            const oldValue = oldOption[key];
+            const newValue = newOption[key];
+
+            if (key === 'options') {
+                return compareOptions(oldValue, newValue);
+            }
+            if (key === 'data') {
+                return JSON.stringify(oldValue) === JSON.stringify(newValue);
+            }
+            return oldValue === newValue;
+        });
+    });
+}

package/test/Store/Store_creation.spec.js

@@ -1387,7 +1387,7 @@ tape.test('Store creation', (subT) => {
                 command1.fetch();
                 await _.nextVueTick(store1, spy1.promise);
 
-                t.is(store1.state.filteredOptions.length, 3);
+                t.is(store1.state.filteredOptions.length, 3, 'should contain the groups');
 
                 const command2 = {};
                 const spy2 = {};

package/test/Store/commit.spec.js

@@ -748,6 +748,186 @@ tape.test('commit()', (st) => {
                 t.true(toHaveBeenCalledWith(spy, ['', 100, 200]));
                 t.deepEqual(store.state.allOptions.length, 300);
                 t.deepEqual(store.state.offsetItem, 180);
+                t.is(store.state.status.errorMessage, '');
+
+                t.end();
+            });
+
+            sTest.test('should fetch only once', async (t) => {
+                const command = {};
+                let nbTry = 0;
+
+                const store = new Store({
+                    fetchCallback: buildFetchCb({ total: 500, command }),
+                });
+                command.usage = 0;
+                store.commit('isOpen', true);
+
+                nbTry = 0;
+                while (nbTry !== command.usage && nbTry < 10) {
+                    nbTry = command.usage;
+                    command.fetch();
+                    await _.nextVueTick(store, command.promise);
+                }
+
+                t.is(command.usage, 1, 'the fetch is done only once to get first page');
+                t.is(store.state.status.errorMessage, '');
+
+                command.usage = 0;
+                store.commit('offsetItem', 180);
+                nbTry = 0;
+                while (nbTry !== command.usage && nbTry < 10) {
+                    nbTry = command.usage;
+                    command.fetch();
+                    await _.nextVueTick(store, command.promise);
+                }
+
+                t.is(command.usage, 1, 'fetch missing options only once');
+                t.is(store.state.status.errorMessage, '');
+
+                t.deepEqual(store.state.allOptions.length, 300);
+
+                t.end();
+            });
+
+            sTest.test('should fetch several time if needed', async (t) => {
+                const command = {};
+                let nbTry = 0;
+
+                const store = new Store({
+                    fetchCallback: buildFetchCb({ total: 500, command }),
+                });
+                command.usage = 0;
+                store.commit('isOpen', true);
+
+                command.interceptResult = (result) => {
+                    switch (command.usage) {
+                        case 1:
+                            /* returns only some of the first options */
+                            result.result = result.result.slice(0, 15);
+                            break;
+                        case 2:
+                            /* returns only some options */
+                            result.result = result.result.slice(0, 25);
+                        default:
+                            /* do not change the result */
+                    }
+                    return result;
+                };
+
+                nbTry = 0;
+                while (nbTry !== command.usage && nbTry < 10) {
+                    nbTry = command.usage;
+                    command.fetch();
+                    await _.nextVueTick(store, command.promise);
+                }
+
+                t.is(command.usage > 1, true, 'should fetch first options with several fetch');
+                t.is(command.usage < 10, true, 'should have stop fetching by itself');
+                t.is(store.state.allOptions.length >= 50, true, 'should have retrieve the first options');
+                t.is(store.state.status.errorMessage, '');
+
+                command.usage = 0;
+                store.commit('offsetItem', 180);
+                nbTry = 0;
+                while (nbTry !== command.usage && nbTry < 10) {
+                    nbTry = command.usage;
+                    command.fetch();
+                    await _.nextVueTick(store, command.promise);
+                }
+
+                t.is(command.usage > 1, true, 'should fetch missing options with several fetch');
+                t.is(command.usage < 10, true, 'should have stop fetching by itself');
+
+                t.deepEqual(store.state.allOptions.length, 300);
+                t.is(store.state.status.errorMessage, '');
+
+                t.end();
+            });
+
+            sTest.test('should stop fetching with wrong result: similar results', async (t) => {
+                const command = {};
+                let nbTry = 0;
+
+                const store = new Store({
+                    fetchCallback: buildFetchCb({ total: 500, command }),
+                });
+                command.usage = 0;
+                store.commit('isOpen', true);
+
+                command.interceptResult = (result) => {
+                    /* Returns only the 2 first options */
+                    result.result = result.result.slice(0, 2);
+
+                    return result;
+                };
+
+                nbTry = 0;
+                while (nbTry !== command.usage && nbTry < 10) {
+                    nbTry = command.usage;
+                    command.fetch();
+                    await _.nextVueTick(store, command.promise);
+                }
+
+                t.is(command.usage > 1, true, 'should have try to fetch several times');
+                t.is(command.usage < 10, true, 'should have stop fetching');
+                t.is(store.state.status.errorMessage, store.data.labels.wrongQueryResult);
+
+                command.usage = 0;
+                store.commit('offsetItem', 180);
+                nbTry = 0;
+                while (nbTry !== command.usage && nbTry < 10) {
+                    nbTry = command.usage;
+                    command.fetch();
+                    await _.nextVueTick(store, command.promise);
+                }
+
+                t.is(command.usage < 10, true, 'should have stop fetching');
+                t.is(store.state.status.errorMessage, store.data.labels.wrongQueryResult);
+
+                t.end();
+            });
+
+            sTest.test('should stop fetching with wrong result: wrong total', async (t) => {
+                const command = {};
+                let nbTry = 0;
+
+                const store = new Store({
+                    fetchCallback: buildFetchCb({ total: 20, command }),
+                });
+                command.usage = 0;
+                store.commit('isOpen', true);
+
+                command.interceptResult = (result) => {
+                    result.total = 50;
+
+                    return result;
+                };
+
+                nbTry = 0;
+                while (nbTry !== command.usage && nbTry < 10) {
+                    nbTry = command.usage;
+                    command.fetch();
+                    await _.nextVueTick(store, command.promise);
+                }
+
+                t.is(command.usage > 1, true, 'should have try to fetch several times');
+                t.is(command.usage < 10, true, 'should have stop fetching');
+                t.is(store.state.status.errorMessage, store.data.labels.wrongQueryResult);
+
+                command.usage = 0;
+                store.commit('offsetItem', 30);
+                nbTry = 0;
+                while (nbTry !== command.usage && nbTry < 10) {
+                    nbTry = command.usage;
+                    command.fetch();
+                    await _.nextVueTick(store, command.promise);
+                }
+
+                t.is(command.usage < 10, true, 'should have stop fetching');
+                t.is(store.state.status.errorMessage, store.data.labels.wrongQueryResult);
+
+                t.deepEqual(store.state.allOptions.length, 20);
 
                 t.end();
             });

package/test/helper.js

@@ -101,6 +101,7 @@ function buildFetchCb({
         command.reject = () => {};
         command.promise = () => {};
         command.fetch = () => {};
+        command.usage = 0;
     }
 
     return (search, offset, limit) => {
@@ -128,10 +129,16 @@ function buildFetchCb({
             });
 
             function resolveFetch() {
-                resolve({
+                let result = {
                     total,
                     result: getOptions(nb, prefix, offset, groupName),
-                });
+                };
+
+                if (command && command.interceptResult) {
+                    result = command.interceptResult(result);
+                }
+
+                resolve(result);
             }
 
             if (command) {
@@ -145,6 +152,7 @@ function buildFetchCb({
 
         if (command) {
             command.promise = fetchPromise;
+            command.usage++;
         }
         spy.promise = fetchPromise;
 

package/types/ExtendedList.d.ts

@@ -18,12 +18,16 @@ export default class ExtendedList extends Vue<Props> {
     private topGroup;
     private listHeight;
     private listWidth;
+    private availableSpace;
+    /** check if the height of the box has been completely estimated. */
+    get isFullyEstimated(): boolean;
     get searchingLabel(): string;
     get searching(): boolean;
     get errorMessage(): string;
     get infoMessage(): string;
     get onKeyDown(): (evt: KeyboardEvent) => void;
     get bestPosition(): 'top' | 'bottom';
+    get position(): 'top' | 'bottom';
     get horizontalStyle(): string;
     get positionStyle(): string;
     onFilteredOptionsChange(): void;

package/types/MainInput.d.ts

@@ -11,13 +11,16 @@ export default class MainInput extends Vue<Props> {
     private store;
     private id;
     private nbHiddenItems;
+    private domObserver;
     get isDisabled(): boolean;
     get hasValue(): boolean;
     get displayPlaceholder(): boolean;
     get canBeCleared(): boolean;
     get showClearAll(): boolean;
     get clearedLabel(): string;
-    get singleSelectedItem(): string | false;
+    get singleSelectedItem(): undefined | OptionItem;
+    get singleSelectedItemText(): string;
+    get singleSelectedItemTitle(): string;
     get singleStyle(): string | undefined;
     get selecticId(): string | undefined;
     get isSelectionReversed(): boolean;
@@ -31,7 +34,10 @@ export default class MainInput extends Vue<Props> {
     private selectItem;
     private clearSelection;
     private computeSize;
+    private closeObserver;
+    private createObserver;
     onInternalChange(): void;
     updated(): void;
+    beforeUnmount(): void;
     render(): h.JSX.Element;
 }

package/types/Store.d.ts

@@ -139,6 +139,7 @@ interface Messages {
     moreSelectedItem: string;
     moreSelectedItems: string;
     unknownPropertyValue: string;
+    wrongQueryResult: string;
 }
 export declare type PartialMessages = {
     [K in keyof Messages]?: Messages[K];

package/types/tools.d.ts

@@ -1,3 +1,4 @@
+import { OptionValue } from './Store';
 /**
  * Clone the object and its inner properties.
  * @param obj The object to be clone.
@@ -20,3 +21,7 @@ export declare function deepClone<T = any>(origObject: T, ignoreAttributes?: str
 export declare function convertToRegExp(name: string, flag?: string): RegExp;
 /** Does the same as Object.assign but does not replace if value is undefined */
 export declare function assignObject<T>(obj: Partial<T>, ...sourceObjects: Array<Partial<T>>): T;
+/** Compare 2 list of options.
+ * @returns true if there are no difference
+ */
+export declare function compareOptions(oldOptions: OptionValue[], newOptions: OptionValue[]): boolean;