Drop Vue.js dynamic lookup as not supported by "vue-fomantic-ui" (#2041)

.github/workflows/test-unit.yml

@@ -82,7 +82,7 @@ jobs:
         php: ['7.4', '8.0', '8.1', '8.2']
         type: ['Phpunit', 'Phpunit Lowest']
         include:
-          - php: '8.1' # TODO replace with 'latest' once it represents at least PHP 8.1
+          - php: 'latest'
             type: 'Phpunit Burn'
     env:
       LOG_COVERAGE: "${{ fromJSON('{true: \"1\", false: \"\"}')[matrix.php == '8.0' && matrix.type == 'Phpunit' && (github.event_name == 'pull_request' || (github.event_name == 'push' && (github.ref == 'refs/heads/develop' || github.ref == 'refs/heads/master')))] }}"

js/src/vue-components/share/atk-lookup.js

@@ -1,11 +1,8 @@
-import atk from 'atk';
-
 /**
  * Wrapper for Fomantic-UI dropdown component into a lookup component.
  *
  * Properties:
  * config:
- * url: the callback URL. Callback should return model data in form of { key: modelId, text: modelTitle, value: modelId }
  * reference: the reference field name associate with model or hasOne name. This field name will be sent along with URL callback parameter as of 'field=name'.
  * Note: The remaining config object may contain any or SuiDropdown { props: value } pair.
  *
@@ -19,9 +16,7 @@ export default {
             v-bind="dropdownProps"
             ref="drop"
             :modelValue="getDropdownValue(modelValue)"
-            ` /* :loading="isLoading" */
-            + `@update:modelValue="onUpdate"
-            @filtered="onFiltered"
+            @update:modelValue="onUpdate"
         ></SuiDropdown>`,
     props: ['config', 'modelValue', 'optionalValue'],
     data: function () {
@@ -33,7 +28,6 @@ export default {
         return {
             dropdownProps: otherConfig,
             url: url || null,
-            isLoading: false,
             field: reference,
             query: '',
             temp: '',
@@ -52,43 +46,5 @@ export default {
         onUpdate: function (value) {
             this.$emit('update:modelValue', value.value);
         },
-        /**
-         * Receive user input text for search.
-         */
-        onFiltered: function (inputValue) {
-            if (inputValue) {
-                this.isLoading = true;
-            }
-
-            if (!this.onFiltered.debouncedFx) {
-                this.onFiltered.debouncedFx = atk.createDebouncedFx(() => {
-                    this.onFiltered.debouncedFx = null;
-                    if (this.query !== this.temp) {
-                        this.query = this.temp;
-                        if (this.query) {
-                            this.fetchItems(this.query);
-                        }
-                    }
-                }, 250);
-            }
-            this.temp = inputValue;
-            this.onFiltered.debouncedFx(this);
-        },
-        /**
-         * Fetch new data from server.
-         */
-        fetchItems: async function (q) {
-            try {
-                const data = { atkVueLookupQuery: q, atkVueLookupField: this.field };
-                const response = await atk.apiService.suiFetch(this.url, { method: 'get', data: data });
-                if (response.success) {
-                    this.dropdownProps.options = response.results;
-                }
-            } catch (e) {
-                console.error(e);
-            } finally {
-                this.isLoading = false;
-            }
-        },
     },
 };