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="fieldList_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
|
2021-03-18 10:26:08 +13:00
|
|
|
class="fieldList_itemDot"
|
|
|
|
side>
|
2021-03-08 11:07:40 +13:00
|
|
|
<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">
|
2021-02-09 15:21:48 +13:00
|
|
|
{{input.value}}
|
2021-03-08 11:07:40 +13:00
|
|
|
</span>
|
2021-03-18 10:26:08 +13:00
|
|
|
<span v-if="localInput[index].affix" class="inline-block q-ml-xs text-italic listNote">
|
2021-01-31 02:43:13 +13:00
|
|
|
({{localInput[index].affix}})
|
|
|
|
</span>
|
|
|
|
</q-item-section>
|
|
|
|
</q-item>
|
|
|
|
</q-list>
|
|
|
|
|
|
|
|
<div v-if="editMode">
|
|
|
|
<div class="row q-mb-sm"
|
|
|
|
v-for="(singleInput,index) in localInput"
|
|
|
|
:key="index"
|
|
|
|
>
|
|
|
|
<div class="col">
|
|
|
|
<q-input
|
|
|
|
v-model="localInput[index].value"
|
2021-03-18 10:26:08 +13:00
|
|
|
:class="`listField_input${index}_${inputDataBluePrint.id}`"
|
2021-01-31 02:43:13 +13:00
|
|
|
dense
|
|
|
|
@keyup="signalInput"
|
2021-03-18 10:26:08 +13:00
|
|
|
:outlined="!isDarkMode"
|
|
|
|
:filled="isDarkMode"
|
2021-01-31 02:43:13 +13:00
|
|
|
>
|
|
|
|
</q-input>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div
|
|
|
|
class="q-ml-lg justify-end flex"
|
|
|
|
style="max-width: 220px; width: 220px;"
|
|
|
|
v-if="hasExtraInput">
|
|
|
|
<q-select
|
|
|
|
style="width: 100%;"
|
|
|
|
dense
|
|
|
|
:options="localExtraInput"
|
|
|
|
use-input
|
|
|
|
:hide-dropdown-icon="!editMode"
|
2021-03-18 10:26:08 +13:00
|
|
|
:outlined="editMode && !isDarkMode"
|
2021-01-31 02:43:13 +13:00
|
|
|
:borderless="!editMode"
|
2021-03-18 10:26:08 +13:00
|
|
|
:filled="editMode && isDarkMode"
|
2021-01-31 02:43:13 +13:00
|
|
|
:readonly="!editMode"
|
|
|
|
input-debounce="0"
|
|
|
|
new-value-mode="add"
|
2021-03-08 11:07:40 +13:00
|
|
|
@input="signalInput"
|
|
|
|
@keydown="signalInput"
|
2021-02-09 15:21:48 +13:00
|
|
|
:label="(inputAffix) ? inputAffix : ''"
|
2021-01-31 02:43:13 +13:00
|
|
|
v-model="localInput[index].affix"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
|
2021-02-09 15:21:48 +13:00
|
|
|
<div style="width: 115px;" class="justify-end flex">
|
2021-01-31 02:43:13 +13:00
|
|
|
<q-btn
|
|
|
|
v-if="editMode"
|
2021-03-04 13:27:07 +13:00
|
|
|
color="secondary"
|
2021-03-18 10:26:08 +13:00
|
|
|
:outline="isDarkMode"
|
2021-01-31 02:43:13 +13:00
|
|
|
@click="removeFromList(index)"
|
|
|
|
label="Remove" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
2021-02-09 15:21:48 +13:00
|
|
|
<div class="row q-mt-xs" v-if="editMode">
|
2021-01-31 02:43:13 +13:00
|
|
|
<div class="col justify-start flex">
|
2021-03-18 10:26:08 +13:00
|
|
|
<q-btn
|
|
|
|
color="primary"
|
|
|
|
:outline="isDarkMode"
|
|
|
|
label="Add new"
|
|
|
|
@click="addNewInput" />
|
2021-01-31 02:43:13 +13:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
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"
|
|
|
|
|
|
|
|
import BaseClass from "src/BaseClass"
|
2021-03-08 15:08:17 +13:00
|
|
|
import { extend } from "quasar"
|
2021-01-31 02:43:13 +13:00
|
|
|
|
|
|
|
import { I_ExtraFields } from "src/interfaces/I_Blueprint"
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
components: { }
|
|
|
|
})
|
|
|
|
export default class Field_List extends BaseClass {
|
|
|
|
@Prop({ default: [] }) readonly inputDataBluePrint!: I_ExtraFields
|
|
|
|
|
2021-02-23 11:30:18 +13:00
|
|
|
@Prop({
|
|
|
|
default: () => {
|
|
|
|
return []
|
|
|
|
}
|
|
|
|
}) readonly inputDataValue!: {
|
2021-01-31 02:43:13 +13:00
|
|
|
value: string
|
|
|
|
affix?: string
|
|
|
|
}[]
|
|
|
|
|
|
|
|
@Prop() readonly isNew!: boolean
|
|
|
|
|
|
|
|
@Prop() readonly editMode!: boolean
|
|
|
|
|
2021-03-18 10:26:08 +13:00
|
|
|
isDarkMode = false
|
|
|
|
disableDocumentToolTips = false
|
|
|
|
|
|
|
|
@Watch("SGET_options", { immediate: true, deep: true })
|
|
|
|
onSettingsChange () {
|
|
|
|
const options = this.SGET_options
|
|
|
|
this.isDarkMode = options.darkMode
|
|
|
|
this.disableDocumentToolTips = options.disableDocumentToolTips
|
|
|
|
}
|
|
|
|
|
2021-01-31 02:43:13 +13:00
|
|
|
changedInput = false
|
|
|
|
localInput = [] as {
|
|
|
|
value: string
|
|
|
|
affix?: string
|
|
|
|
}[]
|
|
|
|
|
|
|
|
localExtraInput = []
|
|
|
|
|
|
|
|
@Watch("inputDataValue", { deep: true, immediate: true })
|
|
|
|
reactToInputChanges () {
|
|
|
|
this.localInput = (this.inputDataValue) ? this.inputDataValue : []
|
|
|
|
}
|
|
|
|
|
|
|
|
get inputAffix () {
|
|
|
|
return (this.inputDataBluePrint?.predefinedListExtras?.affix) || ""
|
|
|
|
}
|
|
|
|
|
|
|
|
removeFromList (index: number) {
|
|
|
|
this.localInput.splice(index, 1)
|
|
|
|
this.signalInput()
|
|
|
|
}
|
|
|
|
|
|
|
|
get inputIcon () {
|
|
|
|
return this.inputDataBluePrint?.icon
|
|
|
|
}
|
|
|
|
|
2021-02-21 01:06:21 +13:00
|
|
|
get toolTip () {
|
|
|
|
return this.inputDataBluePrint?.tooltip
|
|
|
|
}
|
|
|
|
|
2021-01-31 02:43:13 +13:00
|
|
|
get hasExtraInput () {
|
|
|
|
// @ts-ignore
|
|
|
|
this.localExtraInput = this.inputDataBluePrint?.predefinedListExtras?.extraSelectValueList
|
|
|
|
return this.inputDataBluePrint?.predefinedListExtras?.extraSelectValueList
|
|
|
|
}
|
|
|
|
|
|
|
|
@Emit()
|
|
|
|
signalInput () {
|
|
|
|
this.changedInput = true
|
2021-03-08 15:08:17 +13:00
|
|
|
|
|
|
|
const dataCopy: {
|
|
|
|
value: string
|
|
|
|
affix?: string
|
|
|
|
}[] = extend(true, [], this.localInput)
|
|
|
|
|
|
|
|
const returnValue = dataCopy.map(e => {
|
|
|
|
e.value = e.value.trim()
|
|
|
|
if (e.affix) {
|
|
|
|
e.affix = e.affix.trim()
|
|
|
|
}
|
|
|
|
return e
|
|
|
|
})
|
|
|
|
|
|
|
|
return returnValue
|
2021-01-31 02:43:13 +13:00
|
|
|
}
|
|
|
|
|
2021-03-18 10:26:08 +13:00
|
|
|
async addNewInput () {
|
2021-01-31 02:43:13 +13:00
|
|
|
this.localInput.push({
|
|
|
|
value: "",
|
|
|
|
affix: ""
|
|
|
|
})
|
2021-03-18 10:26:08 +13:00
|
|
|
|
|
|
|
const targetRefStringNamer = `.listField_input${this.localInput.length - 1}_${this.inputDataBluePrint.id}`
|
|
|
|
|
|
|
|
await this.$nextTick()
|
|
|
|
|
|
|
|
const newInput = document.querySelector(targetRefStringNamer) as HTMLInputElement
|
|
|
|
|
|
|
|
if (newInput) {
|
|
|
|
newInput.focus()
|
|
|
|
}
|
|
|
|
|
2021-01-31 02:43:13 +13:00
|
|
|
this.signalInput()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
2021-03-08 11:07:40 +13:00
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
.fieldList_list {
|
|
|
|
.q-item {
|
|
|
|
padding-right: 10px;
|
|
|
|
padding-left: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.q-item__section {
|
|
|
|
position: relative;
|
|
|
|
flex-direction: row;
|
|
|
|
justify-content: flex-start;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.fieldList_itemDot {
|
|
|
|
padding-right: 10px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|