autocomplete field
This commit is contained in:
bkfox
parent
4733d9ac7c
commit
4a00ecd691
|
|
@ -54,18 +54,13 @@ class LogInfoSerializer(serializers.Serializer):
|
||||||
|
|
||||||
|
|
||||||
class SoundSerializer(serializers.ModelSerializer):
|
class SoundSerializer(serializers.ModelSerializer):
|
||||||
# serializers.HyperlinkedIdentityField(view_name='sound', format='html')
|
file = serializers.FileField(use_url=False)
|
||||||
|
|
||||||
class Meta:
|
class Meta:
|
||||||
model = Sound
|
model = Sound
|
||||||
fields = ['pk', 'name', 'program', 'episode', 'type',
|
fields = ['pk', 'name', 'program', 'episode', 'type', 'file',
|
||||||
'duration', 'mtime', 'is_good_quality', 'is_public', 'url']
|
'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):
|
class PodcastSerializer(serializers.ModelSerializer):
|
||||||
# serializers.HyperlinkedIdentityField(view_name='sound', format='html')
|
# serializers.HyperlinkedIdentityField(view_name='sound', format='html')
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
\***********************************************************************************************************************************************************************************************/
|
\***********************************************************************************************************************************************************************************************/
|
||||||
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
/***/ (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__) {
|
/***/ (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");
|
||||||
|
|
||||||
/***/ }),
|
/***/ }),
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -53,8 +53,13 @@
|
||||||
{# TODO: select station => change the shit #}
|
{# TODO: select station => change the shit #}
|
||||||
<a-autocomplete class="is-fullwidth"
|
<a-autocomplete class="is-fullwidth"
|
||||||
url="{% url "aircox:sound-list" %}?station={{ station.pk }}&search=${query}"
|
url="{% url "aircox:sound-list" %}?station={{ station.pk }}&search=${query}"
|
||||||
name="sound_id" :model="Sound" field="path" value-field="id"
|
name="sound_id" :model="Sound" label-field="name"
|
||||||
placeholder="{% trans "Select a sound" %}" />
|
placeholder="{% trans "Select a sound" %}">
|
||||||
|
<template v-slot:item="{item}">
|
||||||
|
[[ item.data.name ]]
|
||||||
|
<span class="is-size-7 is-italic has-text-info">[[ item.data.file ]]</span>
|
||||||
|
</template>
|
||||||
|
</a-autocomplete>
|
||||||
<p class="help">
|
<p class="help">
|
||||||
{% trans "Add a sound to the queue (queue may start playing)" %}
|
{% trans "Add a sound to the queue (queue may start playing)" %}
|
||||||
</p>
|
</p>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,26 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="control">
|
<div :class="dropdownClass">
|
||||||
<datalist :id="listId">
|
<div class="dropdown-trigger is-fullwidth">
|
||||||
<option v-for="item in items" :key="item.path"
|
<div class="control is-expanded">
|
||||||
:value="item[field]"></option>
|
<input type="hidden" :name="name"
|
||||||
</datalist>
|
:value="selectedValue" />
|
||||||
<input type="text" :name="name" :placeholder="placeholder"
|
<input type="text" :placeholder="placeholder"
|
||||||
:list="listId" @keyup="onKeyUp"/>
|
ref="input" class="input is-fullwidth"
|
||||||
|
@keyup="onKeyUp" @focus="active=true" @click="active=true"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dropdown-menu is-fullwidth">
|
||||||
|
<div class="dropdown-content" style="overflow: hidden">
|
||||||
|
<a v-for="(item, index) in items" :key="item.id"
|
||||||
|
:class="['dropdown-item', index === this.selectedIndex ? 'is-active':'']"
|
||||||
|
@click="select(index); active=false" :title="item.data[labelField]">
|
||||||
|
<slot name="item" :index="index" :item="item" :value-field="valueField"
|
||||||
|
:labelField="labelField">
|
||||||
|
{{ item.data[labelField] }}
|
||||||
|
</slot>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -18,38 +33,79 @@ export default {
|
||||||
model: Function,
|
model: Function,
|
||||||
placeholder: String,
|
placeholder: String,
|
||||||
name: String,
|
name: String,
|
||||||
field: String,
|
labelField: String,
|
||||||
valueField: {type: String, default: 'id'},
|
valueField: {type: String, default: null},
|
||||||
count: {type: Number, count: 10},
|
count: {type: Number, count: 10},
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
active: false,
|
||||||
value: '',
|
value: '',
|
||||||
items: [],
|
items: [],
|
||||||
selected: null,
|
selectedIndex: -1,
|
||||||
isFetching: false,
|
isFetching: false,
|
||||||
listId: `autocomplete-${ Math.random() }`.replace('.',''),
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
computed: {
|
||||||
select(option, value=null) {
|
selected() {
|
||||||
if(!option && value !== null)
|
let index = this.selectedIndex
|
||||||
option = this.items.find(item => item[this.field] == value)
|
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
|
selectedLabel() {
|
||||||
this.$emit('select', option)
|
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) {
|
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
|
const value = event.target.value
|
||||||
if(value === this.value)
|
if(value === this.value)
|
||||||
return
|
return
|
||||||
|
|
||||||
if(value !== undefined && value !== null)
|
this.value = value;
|
||||||
this.value = value
|
|
||||||
|
|
||||||
if(!value)
|
if(!value)
|
||||||
return this.select(null)
|
return this.select(null)
|
||||||
|
|
||||||
|
|
@ -64,7 +120,7 @@ export default {
|
||||||
return this.model.fetch(this.url.replace('${query}', query), {many:true})
|
return this.model.fetch(this.url.replace('${query}', query), {many:true})
|
||||||
.then(items => { this.items = items || []
|
.then(items => { this.items = items || []
|
||||||
this.isFetching = false
|
this.isFetching = false
|
||||||
this.select(null, query)
|
this.active = items.length > 0
|
||||||
return items },
|
return items },
|
||||||
data => {this.isFetching = false; Promise.reject(data)})
|
data => {this.isFetching = false; Promise.reject(data)})
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user