You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.3 KiB
80 lines
2.3 KiB
<template>
|
|
<div class="box" :style="{'background-color': this.isConfirmed ? '#078f12' : '#ff4242'}">
|
|
<div class="box-header">
|
|
<h3 class="text-center">{{itemText}}</h3>
|
|
</div>
|
|
<div class="box-body">
|
|
<select class="form-control" @change="updateSelectedDocHeader($event)">
|
|
<option>{{firstValue}}</option>
|
|
<option v-for="headerObj in filteredHeaders" :key="headerObj.header.documentHeader" :value="headerObj.index">{{headerObj.header.documentHeader}}</option>
|
|
</select>
|
|
<button type="button" class="btn btn-primary" @click="changeA" :disabled="this.selectedDocHeaderIndex === null">Confirm Choice</button>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { store } from '@/store';
|
|
|
|
export default {
|
|
props: {
|
|
itemText: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
backgroundColor: "#ff6666",
|
|
selectedDocHeaderIndex: null,
|
|
isConfirmed: false,
|
|
store
|
|
}
|
|
},
|
|
methods: {
|
|
updateSelectedDocHeader(event) {
|
|
if (this.isConfirmed) { this.$emit('header-change', -1); }
|
|
this.isConfirmed = false;
|
|
// If the old index is not null, we need to update it's docHeader to be null
|
|
if (this.selectedDocHeaderIndex!== null) {
|
|
this.store.documentHeaders[this.selectedDocHeaderIndex].swapTemplateHeader(null);
|
|
}
|
|
this.selectedDocHeaderIndex = event.target.value;
|
|
console.log(this.selectedDocHeaderIndex);
|
|
|
|
},
|
|
changeA() {
|
|
// Change the templateHeader in the docHeader at selectedDocHeader
|
|
this.isConfirmed = true;
|
|
this.store.documentHeaders[this.selectedDocHeaderIndex].templateHeader = this.store.documentHeaders;
|
|
this.$emit('header-change', 1);
|
|
}
|
|
},
|
|
computed: {
|
|
filteredHeaders() {
|
|
return this.store.documentHeaders.filter(header => {
|
|
return !header.isSet();
|
|
}).map(header => {
|
|
return {
|
|
index: this.store.documentHeaders.indexOf(header),
|
|
header: header,
|
|
};
|
|
});
|
|
},
|
|
firstValue() {
|
|
return this.isConfirmed ? this.store.documentHeaders[this.selectedDocHeaderIndex].documentHeader : null
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.box {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
|