autocomplete field
This commit is contained in:
bkfox
parent
4733d9ac7c
commit
4a00ecd691
|
|
@ -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')
|
||||
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
||||
/***/ }),
|
||||
|
||||
|
|
|
|||
|
|
@ -53,8 +53,13 @@
|
|||
{# TODO: select station => change the shit #}
|
||||
<a-autocomplete class="is-fullwidth"
|
||||
url="{% url "aircox:sound-list" %}?station={{ station.pk }}&search=${query}"
|
||||
name="sound_id" :model="Sound" field="path" value-field="id"
|
||||
placeholder="{% trans "Select a sound" %}" />
|
||||
name="sound_id" :model="Sound" label-field="name"
|
||||
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">
|
||||
{% trans "Add a sound to the queue (queue may start playing)" %}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,26 @@
|
|||
<template>
|
||||
<div class="control">
|
||||
<datalist :id="listId">
|
||||
<option v-for="item in items" :key="item.path"
|
||||
:value="item[field]"></option>
|
||||
</datalist>
|
||||
<input type="text" :name="name" :placeholder="placeholder"
|
||||
:list="listId" @keyup="onKeyUp"/>
|
||||
<div :class="dropdownClass">
|
||||
<div class="dropdown-trigger is-fullwidth">
|
||||
<div class="control is-expanded">
|
||||
<input type="hidden" :name="name"
|
||||
:value="selectedValue" />
|
||||
<input type="text" :placeholder="placeholder"
|
||||
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>
|
||||
</template>
|
||||
|
||||
|
|
@ -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)})
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user