Dynamic Select setting (#13179)

* Dynamic Select setting
embeds select2 and uses ajax to call to backend for options
poller-group included

* fix validation a bit

* fix typehint

* move minProperties into the select schema

* Change dashboard-select to select-dynamic
Love deleting code

* Change dashboard-select to select-dynamic
Love deleting code
wire up a few select2 options

* fix whitespace

* Not a model, just an object

* Suggestion from @SourceDoctor autocomplete values of select and select-dynamic

Got a little creative with InternalHttpRequest...

resources/js/components/SettingDashboardSelect.vue

@@ -1,67 +0,0 @@
-<!--
-  - SettingDashboardSelect.vue
-  -
-  - Description-
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU General Public License as published by
-  - the Free Software Foundation, either version 3 of the License, or
-  - (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.See the
-  - GNU General Public License for more details.
-  -
-  - You should have received a copy of the GNU General Public License
-  - along with this program.  If not, see <https://www.gnu.org/licenses/>.
-  -
-  - @package    LibreNMS
-  - @link       https://www.librenms.org
-  - @copyright  2019 Tony Murray
-  - @author     Tony Murray <murraytony@gmail.com>
-  -->
-
-<template>
-    <v-select
-            :options="localOptions"
-            label="text"
-            :clearable="false"
-            :value="selected"
-            @input="$emit('input', $event.id)"
-            :required="required"
-            :disabled="disabled"
-    >
-    </v-select>
-</template>
-
-<script>
-
-    import BaseSetting from "./BaseSetting";
-
-    export default {
-        name: "SettingDashboardSelect",
-        mixins: [BaseSetting],
-        data() {
-            return {
-                ajaxData: {results: []},
-                default: {id: 0, text: this.$t('No Default Dashboard')}
-            }
-        },
-        mounted() {
-            axios.get(route('ajax.select.dashboard')).then((response) => this.ajaxData = response.data);
-        },
-        computed: {
-            localOptions() {
-                return [this.default].concat(this.ajaxData.results)
-            },
-            selected() {
-                return this.value === 0 ? this.default : this.ajaxData.results.find(dash => dash.id === this.value);
-            }
-        }
-    }
-</script>
-
-<style scoped>
-
-</style>

resources/js/components/SettingSelectDynamic.vue

@@ -0,0 +1,92 @@
+<!--
+  - SettingSelect2.vue
+  -
+  - Description-
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU General Public License as published by
+  - the Free Software Foundation, either version 3 of the License, or
+  - (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.See the
+  - GNU General Public License for more details.
+  -
+  - You should have received a copy of the GNU General Public License
+  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -
+  - @package    LibreNMS
+  - @link       http://librenms.org
+  - @copyright  2021 Tony Murray
+  - @author     Tony Murray <murraytony@gmail.com>
+  -->
+
+<template>
+    <div>
+        <select class="form-control"
+                :name="name"
+                :value="value"
+                :required="required"
+                :disabled="disabled"
+        >
+        </select>
+    </div>
+</template>
+
+<script>
+import BaseSetting from "./BaseSetting";
+
+export default {
+    name: "SettingSelectDynamic",
+    mixins: [BaseSetting],
+    data() {
+        return {
+            select2: null
+        };
+    },
+    watch: {
+        value(value) {
+            this.select2.val(value).trigger('change');
+        }
+    },
+    computed: {
+        settings() {
+            return {
+                theme: "bootstrap",
+                dropdownAutoWidth : true,
+                width: "auto",
+                allowClear: Boolean(this.options.allowClear),
+                placeholder: this.options.placeholder,
+                ajax: {
+                    url: route('ajax.select.' + this.options.target).toString(),
+                    delay: 250,
+                    data: this.options.callback
+                }
+            }
+        }
+    },
+    mounted() {
+        // load initial data
+        axios.get(route('ajax.select.' + this.options.target), {params: {id: this.value}}).then((response) => {
+            response.data.results.forEach((item) => {
+                if (item.id == this.value) {
+                    this.select2.append(new Option(item.text, item.id, true, true))
+                        .trigger('change');
+                }
+            })
+        });
+
+        this.select2 = $(this.$el)
+            .find('select')
+            .select2(this.settings);
+    },
+    beforeDestroy() {
+        this.select2.select2('destroy');
+    }
+}
+</script>
+
+<style scoped>
+
+</style>