From 4a00ecd691857e6c3e67b031a9f5e0662d86220f Mon Sep 17 00:00:00 2001 From: bkfox Date: Sun, 20 Mar 2022 03:35:37 +0100 Subject: [PATCH] autocomplete field --- aircox/serializers.py | 11 +-- aircox/static/aircox/js/chunk-common.js | 4 +- .../aircox_streamer/source_item.html | 9 +- assets/src/components/AAutocomplete.vue | 98 +++++++++++++++---- 4 files changed, 89 insertions(+), 33 deletions(-) diff --git a/aircox/serializers.py b/aircox/serializers.py index 746ca55..751bcae 100644 --- a/aircox/serializers.py +++ b/aircox/serializers.py @@ -54,18 +54,13 @@ class LogInfoSerializer(serializers.Serializer): class SoundSerializer(serializers.ModelSerializer): - # serializers.HyperlinkedIdentityField(view_name='sound', format='html') + file = serializers.FileField(use_url=False) + class Meta: model = Sound - fields = ['pk', 'name', 'program', 'episode', 'type', + fields = ['pk', 'name', 'program', 'episode', 'type', 'file', 'duration', 'mtime', 'is_good_quality', 'is_public', 'url'] - def get_field_names(self, *args): - names = super().get_field_names(*args) - if 'request' in self.context and self.context['request'].user.is_staff: - names.append('file') - return names - class PodcastSerializer(serializers.ModelSerializer): # serializers.HyperlinkedIdentityField(view_name='sound', format='html') diff --git a/aircox/static/aircox/js/chunk-common.js b/aircox/static/aircox/js/chunk-common.js index 8e8abde..3b0b527 100644 --- a/aircox/static/aircox/js/chunk-common.js +++ b/aircox/static/aircox/js/chunk-common.js @@ -15,7 +15,7 @@ \***********************************************************************************************************************************************************************************************/ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { -eval("__webpack_require__.r(__webpack_exports__);\n// import debounce from 'lodash/debounce'\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n props: {\n url: String,\n model: Function,\n placeholder: String,\n name: String,\n field: String,\n valueField: {\n type: String,\n default: 'id'\n },\n count: {\n type: Number,\n count: 10\n }\n },\n\n data() {\n return {\n value: '',\n items: [],\n selected: null,\n isFetching: false,\n listId: `autocomplete-${Math.random()}`.replace('.', '')\n };\n },\n\n methods: {\n select(option, value = null) {\n if (!option && value !== null) option = this.items.find(item => item[this.field] == value);\n this.selected = option;\n this.$emit('select', option);\n },\n\n onKeyUp: function (event) {\n const value = event.target.value;\n if (value === this.value) return;\n if (value !== undefined && value !== null) this.value = value;\n if (!value) return this.select(null);\n this.fetch(value);\n },\n fetch: function (query) {\n if (!query || this.isFetching) return;\n this.isFetching = true;\n return this.model.fetch(this.url.replace('${query}', query), {\n many: true\n }).then(items => {\n this.items = items || [];\n this.isFetching = false;\n this.select(null, query);\n return items;\n }, data => {\n this.isFetching = false;\n Promise.reject(data);\n });\n }\n }\n});\n\n//# sourceURL=webpack://aircox-assets/./src/components/AAutocomplete.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D"); +eval("__webpack_require__.r(__webpack_exports__);\n// import debounce from 'lodash/debounce'\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n props: {\n url: String,\n model: Function,\n placeholder: String,\n name: String,\n labelField: String,\n valueField: {\n type: String,\n default: null\n },\n count: {\n type: Number,\n count: 10\n }\n },\n\n data() {\n return {\n active: false,\n value: '',\n items: [],\n selectedIndex: -1,\n isFetching: false\n };\n },\n\n computed: {\n selected() {\n let index = this.selectedIndex;\n if (index < 0) return null;\n index = Math.min(index, this.items.length - 1);\n return this.items[index];\n },\n\n selectedValue() {\n const sel = this.selected;\n return sel && (this.valueField ? sel.data[this.valueField] : sel.id);\n },\n\n selectedLabel() {\n const sel = this.selected;\n return sel && sel.data[this.labelField];\n },\n\n dropdownClass() {\n const active = this.active && this.items.length;\n return ['dropdown', active ? 'is-active' : ''];\n }\n\n },\n methods: {\n select(index, relative) {\n if (relative) index += this.selectedIndex;else if (index == this.selectedIndex) return;\n this.selectedIndex = Math.max(-1, Math.min(index, this.items.length - 1));\n\n if (index >= 0) {\n this.$refs.input.value = this.selectedLabel;\n this.$refs.input.focus();\n }\n\n this.$emit('select', index, this.selected, this.selectedValue);\n },\n\n onKeyUp: function (event) {\n this.active = true;\n\n switch (event.keyCode) {\n case 27:\n this.active = false;\n return;\n\n case 38:\n this.select(-1, true);\n return;\n\n case 40:\n this.select(1, true);\n return;\n }\n\n const value = event.target.value;\n if (value === this.value) return;\n this.value = value;\n if (!value) return this.select(null);\n this.fetch(value);\n },\n fetch: function (query) {\n if (!query || this.isFetching) return;\n this.isFetching = true;\n return this.model.fetch(this.url.replace('${query}', query), {\n many: true\n }).then(items => {\n this.items = items || [];\n this.isFetching = false;\n this.active = items.length > 0;\n return items;\n }, data => {\n this.isFetching = false;\n Promise.reject(data);\n });\n }\n }\n});\n\n//# sourceURL=webpack://aircox-assets/./src/components/AAutocomplete.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D"); /***/ }), @@ -115,7 +115,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _sou \***************************************************************************************************************************************************************************************************************************************************************************/ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"render\": function() { return /* binding */ render; }\n/* harmony export */ });\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n\nconst _hoisted_1 = {\n class: \"control\"\n};\nconst _hoisted_2 = [\"id\"];\nconst _hoisted_3 = [\"value\"];\nconst _hoisted_4 = [\"name\", \"placeholder\", \"list\"];\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"div\", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"datalist\", {\n id: $data.listId\n }, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($data.items, item => {\n return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"option\", {\n key: item.path,\n value: item[$props.field]\n }, null, 8\n /* PROPS */\n , _hoisted_3);\n }), 128\n /* KEYED_FRAGMENT */\n ))], 8\n /* PROPS */\n , _hoisted_2), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"input\", {\n type: \"text\",\n name: $props.name,\n placeholder: $props.placeholder,\n list: $data.listId,\n onKeyup: _cache[0] || (_cache[0] = (...args) => $options.onKeyUp && $options.onKeyUp(...args))\n }, null, 40\n /* PROPS, HYDRATE_EVENTS */\n , _hoisted_4)]);\n}\n\n//# sourceURL=webpack://aircox-assets/./src/components/AAutocomplete.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/templateLoader.js??ruleSet%5B1%5D.rules%5B3%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"render\": function() { return /* binding */ render; }\n/* harmony export */ });\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n\nconst _hoisted_1 = {\n class: \"dropdown-trigger is-fullwidth\"\n};\nconst _hoisted_2 = {\n class: \"control is-expanded\"\n};\nconst _hoisted_3 = [\"name\", \"value\"];\nconst _hoisted_4 = [\"placeholder\"];\nconst _hoisted_5 = {\n class: \"dropdown-menu is-fullwidth\"\n};\nconst _hoisted_6 = {\n class: \"dropdown-content\",\n style: {\n \"overflow\": \"hidden\"\n }\n};\nconst _hoisted_7 = [\"onClick\", \"title\"];\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"div\", {\n class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($options.dropdownClass)\n }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"input\", {\n type: \"hidden\",\n name: $props.name,\n value: $options.selectedValue\n }, null, 8\n /* PROPS */\n , _hoisted_3), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"input\", {\n type: \"text\",\n placeholder: $props.placeholder,\n ref: \"input\",\n class: \"input is-fullwidth\",\n onKeyup: _cache[0] || (_cache[0] = (...args) => $options.onKeyUp && $options.onKeyUp(...args)),\n onFocus: _cache[1] || (_cache[1] = $event => $data.active = true),\n onClick: _cache[2] || (_cache[2] = $event => $data.active = true)\n }, null, 40\n /* PROPS, HYDRATE_EVENTS */\n , _hoisted_4)])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_6, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($data.items, (item, index) => {\n return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"a\", {\n key: item.id,\n class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(['dropdown-item', index === this.selectedIndex ? 'is-active' : '']),\n onClick: $event => {\n $options.select(index);\n $data.active = false;\n },\n title: item.data[$props.labelField]\n }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"item\", {\n index: index,\n item: item,\n valueField: $props.valueField,\n labelField: $props.labelField\n }, () => [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)((0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(item.data[$props.labelField]), 1\n /* TEXT */\n )])], 10\n /* CLASS, PROPS */\n , _hoisted_7);\n }), 128\n /* KEYED_FRAGMENT */\n ))])])], 2\n /* CLASS */\n );\n}\n\n//# sourceURL=webpack://aircox-assets/./src/components/AAutocomplete.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/templateLoader.js??ruleSet%5B1%5D.rules%5B3%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D"); /***/ }), diff --git a/aircox_streamer/templates/aircox_streamer/source_item.html b/aircox_streamer/templates/aircox_streamer/source_item.html index 6c47b8b..4899931 100644 --- a/aircox_streamer/templates/aircox_streamer/source_item.html +++ b/aircox_streamer/templates/aircox_streamer/source_item.html @@ -53,8 +53,13 @@ {# TODO: select station => change the shit #} + name="sound_id" :model="Sound" label-field="name" + placeholder="{% trans "Select a sound" %}"> + +

{% trans "Add a sound to the queue (queue may start playing)" %}

diff --git a/assets/src/components/AAutocomplete.vue b/assets/src/components/AAutocomplete.vue index 0e45f02..f92cbbf 100644 --- a/assets/src/components/AAutocomplete.vue +++ b/assets/src/components/AAutocomplete.vue @@ -1,11 +1,26 @@ @@ -18,38 +33,79 @@ export default { model: Function, placeholder: String, name: String, - field: String, - valueField: {type: String, default: 'id'}, + labelField: String, + valueField: {type: String, default: null}, count: {type: Number, count: 10}, }, data() { return { + active: false, value: '', items: [], - selected: null, + selectedIndex: -1, isFetching: false, - listId: `autocomplete-${ Math.random() }`.replace('.',''), } }, - methods: { - select(option, value=null) { - if(!option && value !== null) - option = this.items.find(item => item[this.field] == value) + computed: { + selected() { + let index = this.selectedIndex + if(index<0) + return null + index = Math.min(index, this.items.length-1) + return this.items[index] + }, + + selectedValue() { + const sel = this.selected + return sel && (this.valueField ? + sel.data[this.valueField] : sel.id) + }, - this.selected = option - this.$emit('select', option) + selectedLabel() { + const sel = this.selected + return sel && sel.data[this.labelField] + }, + + dropdownClass() { + const active = this.active && this.items.length; + return ['dropdown', active ? 'is-active':''] + }, + }, + + methods: { + select(index, relative) { + if(relative) + index += this.selectedIndex + else if(index == this.selectedIndex) + return + + this.selectedIndex = Math.max(-1, Math.min(index, this.items.length-1)) + if(index >= 0) { + this.$refs.input.value = this.selectedLabel + this.$refs.input.focus() + } + this.$emit('select', index, this.selected, this.selectedValue) }, onKeyUp: function(event) { + this.active = true + switch(event.keyCode) { + case 27: this.active = false + return + case 38: this.select(-1, true) + return + case 40: this.select(1, true) + return + } + + const value = event.target.value if(value === this.value) return - if(value !== undefined && value !== null) - this.value = value - + this.value = value; if(!value) return this.select(null) @@ -64,7 +120,7 @@ export default { return this.model.fetch(this.url.replace('${query}', query), {many:true}) .then(items => { this.items = items || [] this.isFetching = false - this.select(null, query) + this.active = items.length > 0 return items }, data => {this.isFetching = false; Promise.reject(data)}) },