2021-01-31 02:43:13 +13:00
|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<div class="flex justify-start items-center text-weight-bolder q-mb-sm q-mt-md">
|
2021-02-09 15:21:48 +13:00
|
|
|
<q-icon v-if="inputIcon" :name="inputIcon" :size="inputIcon.includes('fas')? '15px': '20px'" class="q-mr-md"/>
|
2021-01-31 02:43:13 +13:00
|
|
|
{{inputDataBluePrint.name}}
|
2021-03-18 10:26:08 +13:00
|
|
|
<q-icon v-if="toolTip && !disableDocumentToolTips" name="mdi-help-circle" size="16px" class="q-ml-md">
|
2021-02-26 14:50:46 +13:00
|
|
|
<q-tooltip :delay="500">
|
2021-02-21 01:06:21 +13:00
|
|
|
<span v-html="toolTip"/>
|
|
|
|
</q-tooltip>
|
|
|
|
</q-icon>
|
2021-01-31 02:43:13 +13:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<q-list
|
|
|
|
v-if="!editMode"
|
2021-03-08 11:07:40 +13:00
|
|
|
class="fieldMultiSelect_list"
|
2021-01-31 02:43:13 +13:00
|
|
|
dense>
|
|
|
|
<q-item v-for="(input,index) in localInput" :key="index">
|
2021-03-08 11:07:40 +13:00
|
|
|
<q-item-section
|
|
|
|
class="fieldMultiSelect_itemDot"
|
|
|
|
side
|
|
|
|
>
|
|
|
|
<q-icon
|
|
|
|
color="primary"
|
|
|
|
name="mdi-menu-right"
|
|
|
|
/>
|
2021-01-31 02:43:13 +13:00
|
|
|
</q-item-section>
|
|
|
|
<q-item-section>
|
2021-03-08 11:07:40 +13:00
|
|
|
<span class="text-weight-medium">
|
|
|
|
{{input}}
|
|
|
|
</span>
|
2021-01-31 02:43:13 +13:00
|
|
|
</q-item-section>
|
|
|
|
</q-item>
|
|
|
|
</q-list>
|
|
|
|
|
|
|
|
<q-select
|
|
|
|
v-if="editMode"
|
|
|
|
style="width: 100%;"
|
|
|
|
dense
|
2021-03-03 14:10:05 +13:00
|
|
|
dark
|
2021-03-04 13:27:07 +13:00
|
|
|
:ref="`multiSelectField${this.inputDataBluePrint.id}`"
|
|
|
|
menu-anchor="bottom middle"
|
2021-03-03 14:10:05 +13:00
|
|
|
menu-self="top middle"
|
|
|
|
class="multiSelect"
|
2021-01-31 02:43:13 +13:00
|
|
|
:options="extraInput"
|
|
|
|
use-input
|
2021-03-18 10:26:08 +13:00
|
|
|
:outlined="!isDarkMode"
|
|
|
|
:filled="isDarkMode"
|
2021-01-31 02:43:13 +13:00
|
|
|
use-chips
|
2021-02-09 15:21:48 +13:00
|
|
|
@filter="filterFn"
|
2021-01-31 02:43:13 +13:00
|
|
|
input-debounce="0"
|
|
|
|
new-value-mode="add"
|
|
|
|
multiple
|
|
|
|
v-model="localInput"
|
|
|
|
@input="signalInput"
|
|
|
|
@keydown="signalInput"
|
|
|
|
>
|
2021-03-05 12:51:41 +13:00
|
|
|
<template v-slot:selected-item="scope">
|
|
|
|
<q-chip
|
|
|
|
removable
|
|
|
|
dense
|
|
|
|
@remove="scope.removeAtIndex(scope.index)"
|
|
|
|
:tabindex="scope.tabindex"
|
|
|
|
color="accent"
|
|
|
|
text-color="dark"
|
|
|
|
class="text-bold"
|
|
|
|
>
|
|
|
|
{{ stripTags(scope.opt) }}
|
|
|
|
</q-chip>
|
|
|
|
</template>
|
|
|
|
|
2021-01-31 02:43:13 +13:00
|
|
|
</q-select>
|
|
|
|
|
2021-04-21 22:34:13 +12:00
|
|
|
<table class="q-mt-sm" v-if="editMode">
|
2021-04-20 23:58:13 +12:00
|
|
|
<tr
|
|
|
|
v-for="(single,index) in localInput"
|
|
|
|
:key="index"
|
|
|
|
>
|
|
|
|
<td>
|
|
|
|
<div class="flex">
|
|
|
|
<q-btn
|
|
|
|
tabindex="-1"
|
|
|
|
round
|
|
|
|
flat
|
|
|
|
dense
|
|
|
|
:disable="index === 0"
|
|
|
|
icon="mdi-arrow-up-bold"
|
|
|
|
class="q-mr-xs self-center"
|
|
|
|
size="10px"
|
|
|
|
:color="(index !== 0) ? 'primary' : ''"
|
|
|
|
@click="moveItem(index, 'up')"
|
|
|
|
>
|
|
|
|
<q-tooltip
|
|
|
|
:delay="300"
|
|
|
|
anchor="center left"
|
|
|
|
self="center right"
|
|
|
|
>
|
|
|
|
Move the item one place up
|
|
|
|
</q-tooltip>
|
|
|
|
</q-btn>
|
|
|
|
|
|
|
|
<q-btn
|
|
|
|
tabindex="-1"
|
|
|
|
round
|
|
|
|
flat
|
|
|
|
dense
|
|
|
|
:disable="index === localInput.length - 1"
|
|
|
|
icon="mdi-arrow-down-bold"
|
|
|
|
class="q-mr-xs self-center"
|
|
|
|
size="10px"
|
|
|
|
:color="(index !== localInput.length - 1) ? 'primary' : ''"
|
|
|
|
@click="moveItem(index, 'down')"
|
|
|
|
>
|
|
|
|
<q-tooltip
|
|
|
|
:delay="300"
|
|
|
|
anchor="center left"
|
|
|
|
self="center right"
|
|
|
|
>
|
|
|
|
Move the item one place down
|
|
|
|
</q-tooltip>
|
|
|
|
</q-btn>
|
|
|
|
<div class="grow-1 q-mt-sm q-mb-sm">
|
|
|
|
{{stripTags(single)}}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
|
2021-02-09 15:21:48 +13:00
|
|
|
<div class="separatorWrapper">
|
2021-03-08 11:07:40 +13:00
|
|
|
<q-separator color="grey q-mt-md" />
|
2021-02-09 15:21:48 +13:00
|
|
|
</div>
|
2021-01-31 02:43:13 +13:00
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
import { Component, Emit, Prop, Watch } from "vue-property-decorator"
|
|
|
|
|
2021-04-04 09:25:27 +12:00
|
|
|
import FieldBase from "src/components/fields/_FieldBase"
|
2021-01-31 02:43:13 +13:00
|
|
|
|
|
|
|
@Component({
|
|
|
|
components: { }
|
|
|
|
})
|
2021-04-04 09:25:27 +12:00
|
|
|
export default class Field_MultiSelect extends FieldBase {
|
|
|
|
/****************************************************************/
|
|
|
|
// BASIC FIELD DATA
|
|
|
|
/****************************************************************/
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Already existing value in the input field (IF one is there right now)
|
|
|
|
*/
|
2021-02-23 11:30:18 +13:00
|
|
|
@Prop({
|
|
|
|
default: () => {
|
|
|
|
return []
|
|
|
|
}
|
|
|
|
}) readonly inputDataValue!: []
|
2021-01-31 02:43:13 +13:00
|
|
|
|
2021-04-04 09:25:27 +12:00
|
|
|
/****************************************************************/
|
|
|
|
// INPUT HANDLING
|
|
|
|
/****************************************************************/
|
2021-01-31 02:43:13 +13:00
|
|
|
|
2021-04-04 09:25:27 +12:00
|
|
|
/**
|
|
|
|
* Watch changes to the prefilled data already existing in the field and update local input accordingly
|
|
|
|
*/
|
2021-01-31 02:43:13 +13:00
|
|
|
@Watch("inputDataValue", { deep: true, immediate: true })
|
|
|
|
reactToInputChanges () {
|
|
|
|
this.localInput = (this.inputDataValue) ? this.inputDataValue : []
|
|
|
|
}
|
|
|
|
|
2021-04-04 09:25:27 +12:00
|
|
|
/**
|
|
|
|
* Model for the local input
|
|
|
|
*/
|
|
|
|
localInput = []
|
2021-02-21 01:06:21 +13:00
|
|
|
|
2021-04-04 09:25:27 +12:00
|
|
|
/**
|
|
|
|
* List of extra input values
|
|
|
|
*/
|
2021-02-09 15:21:48 +13:00
|
|
|
extraInput: string[] = []
|
|
|
|
|
2021-04-04 09:25:27 +12:00
|
|
|
/**
|
|
|
|
* Load data into the extra input
|
|
|
|
*/
|
|
|
|
@Watch("inputDataBluePrint", { deep: true, immediate: true })
|
|
|
|
populateExtraInput () {
|
|
|
|
if (this.inputDataBluePrint?.predefinedSelectValues) {
|
|
|
|
this.extraInput = this.inputDataBluePrint?.predefinedSelectValues
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Defocus after filtering to avoid un-intuitive focus
|
|
|
|
*/
|
2021-03-04 13:27:07 +13:00
|
|
|
async defocusSelectRef () {
|
|
|
|
await this.$nextTick()
|
|
|
|
/*eslint-disable */
|
|
|
|
// @ts-ignore
|
|
|
|
this.$refs[`multiSelectField${this.inputDataBluePrint.id}`].setOptionIndex(-1)
|
|
|
|
/* eslint-enable */
|
|
|
|
}
|
|
|
|
|
2021-04-04 09:25:27 +12:00
|
|
|
/**
|
|
|
|
* Filter the input list
|
|
|
|
*/
|
2021-02-09 15:21:48 +13:00
|
|
|
filterFn (val: string, update: (fn: any) => void) {
|
|
|
|
if (val === "") {
|
|
|
|
update(() => {
|
|
|
|
if (this.inputDataBluePrint?.predefinedSelectValues) {
|
|
|
|
this.extraInput = this.inputDataBluePrint.predefinedSelectValues
|
|
|
|
}
|
|
|
|
})
|
2021-03-04 13:27:07 +13:00
|
|
|
this.defocusSelectRef().catch(e => console.log(e))
|
2021-02-09 15:21:48 +13:00
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
update(() => {
|
|
|
|
if (this.inputDataBluePrint?.predefinedSelectValues) {
|
|
|
|
const needle = val.toLowerCase()
|
|
|
|
this.extraInput = this.inputDataBluePrint.predefinedSelectValues.filter(v => v.toLowerCase().indexOf(needle) > -1)
|
|
|
|
}
|
2021-03-04 13:27:07 +13:00
|
|
|
this.defocusSelectRef().catch(e => console.log(e))
|
2021-02-09 15:21:48 +13:00
|
|
|
})
|
2021-01-31 02:43:13 +13:00
|
|
|
}
|
|
|
|
|
2021-04-20 23:58:13 +12:00
|
|
|
moveItem (index: number, direction: "up" | "down") {
|
|
|
|
const to = (direction === "up") ? index - 1 : index + 1
|
|
|
|
const from = index
|
|
|
|
|
|
|
|
this.localInput.splice(to, 0, this.localInput.splice(from, 1)[0])
|
|
|
|
|
|
|
|
this.signalInput()
|
|
|
|
}
|
|
|
|
|
2021-04-04 09:25:27 +12:00
|
|
|
/**
|
|
|
|
* Signals the input change to the document body parent component
|
|
|
|
*/
|
2021-01-31 02:43:13 +13:00
|
|
|
@Emit()
|
|
|
|
signalInput () {
|
|
|
|
return this.localInput
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
2021-03-08 11:07:40 +13:00
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
.fieldMultiSelect_list {
|
|
|
|
.q-item {
|
|
|
|
padding-right: 10px;
|
|
|
|
padding-left: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.q-item__section {
|
|
|
|
position: relative;
|
|
|
|
flex-direction: row;
|
|
|
|
justify-content: flex-start;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.fieldMultiSelect_itemDot {
|
|
|
|
padding-right: 10px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|