diff --git a/app/javascript/vue/label_template/components/label_preview.vue b/app/javascript/vue/label_template/components/label_preview.vue index 5ddea1dc1..08fd34549 100644 --- a/app/javascript/vue/label_template/components/label_preview.vue +++ b/app/javascript/vue/label_template/components/label_preview.vue @@ -52,6 +52,14 @@ </div> </div> <div v-else> + <label>{{ i18n.t('label_templates.label_preview.units') }}</label> + <DropdownSelector + :disableSearch="true" + :options="[{ value: 'in', label: i18n.t(`label_templates.label_preview.in`) }, { value: 'mm', label: i18n.t(`label_templates.label_preview.mm`) }]" + :selectorId="'UnitSelector'" + :selectedValue="unit" + @dropdown:changed="updateUnit" /> + <div>{{ i18n.t('label_templates.label_preview.height') }}: {{ height }} {{ unit }} </div> <div>{{ i18n.t('label_templates.label_preview.width') }}: {{ width }} {{ unit }} </div> <div>{{ i18n.t('label_templates.label_preview.density') }}: {{ densityLabel() }}</div> diff --git a/app/javascript/vue/label_template/container.vue b/app/javascript/vue/label_template/container.vue index 22ae69b7c..2df13d7f6 100644 --- a/app/javascript/vue/label_template/container.vue +++ b/app/javascript/vue/label_template/container.vue @@ -188,8 +188,9 @@ this.editingContent = true; this.$nextTick(() => { this.$refs.contentInput.focus(); - $(this.$refs.contentInput).prop('selectionStart', this.cursorPos); - $(this.$refs.contentInput).prop('selectionEnd', this.cursorPos); + const contentInput = this.$refs.contentInput; + const contentLength = contentInput.value.length; + contentInput.setSelectionRange(contentLength, contentLength); }); }, disableContentEdit() { diff --git a/app/javascript/vue/label_template/insert_field_dropdown.vue b/app/javascript/vue/label_template/insert_field_dropdown.vue index 7f3f374d0..700e3f490 100644 --- a/app/javascript/vue/label_template/insert_field_dropdown.vue +++ b/app/javascript/vue/label_template/insert_field_dropdown.vue @@ -9,11 +9,12 @@ <label> {{ i18n.t('label_templates.show.insert_dropdown.button') }} </label> - <a class="close-dropdown" data-toggle="dropdown">{{ i18n.t('general.cancel')}}</a> + <a class="close-dropdown hover:cursor-pointer" data-toggle="dropdown">{{ i18n.t('general.cancel')}}</a> <input v-model="searchValue" type="text" - class="sci-input-field" + class="sci-input-field insert-field-dropdown autofocus" autofocus="true" :placeholder="i18n.t('label_templates.show.insert_dropdown.search_placeholder')" /> + <i class="fas fa-search relative left-60 bottom-7"></i> </div> <div class="fields-container"> <div :key="`default_${index}`" v-for="(field, index) in filteredFields.default" @@ -147,6 +148,9 @@ }); this.$nextTick(() => { $(this.$refs.dropdown).on('show.bs.dropdown', () => { + setTimeout(() => { + $('.insert-field-dropdown')[1].focus() + }, 50); this.searchValue = ''; }); }); @@ -161,7 +165,12 @@ this.$emit('insertTag', field.tag) }, filterArray(array, key) { - return array.filter(field => field[key].toLowerCase().indexOf(this.searchValue.toLowerCase()) !== -1) + return array.filter(field => { + return ( + field[key].toLowerCase().indexOf(this.searchValue.toLowerCase()) !== -1 || + field.tags + ); + }); } } }