associator_rewrite
parent
1d8d92d595
commit
6e59501a2d
@ -1,5 +1,8 @@ |
||||
module.exports = { |
||||
presets: [ |
||||
'@vue/cli-plugin-babel/preset' |
||||
], |
||||
plugins: [ |
||||
'@babel/plugin-proposal-private-methods' |
||||
] |
||||
} |
||||
|
||||
@ -0,0 +1,42 @@ |
||||
<template> |
||||
<div v-if="store.missingHeaders.length > 0" class="missing-headers"> |
||||
<h1>Missing Headers:</h1> |
||||
<div class="grid"> |
||||
<ColumnHeader v-for="header in store.missingHeaders" :key="header" :text="header"/> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { store } from '../store.js' |
||||
|
||||
export default { |
||||
components: { |
||||
}, |
||||
data() { |
||||
return { |
||||
store |
||||
} |
||||
}, |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.missing-headers { |
||||
text-align: center; |
||||
} |
||||
|
||||
.grid { |
||||
justify-content: center; |
||||
display: grid; |
||||
grid-template-columns: repeat(3, 1fr); |
||||
grid-gap: 10px; |
||||
margin-top: 10px; |
||||
padding: 15px; |
||||
border-color: darkgrey; |
||||
border-width: 10px; |
||||
background-color:#800000; |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,69 @@ |
||||
<template> |
||||
<div v-if="store.missingHeaders.length > 0" class="missing-headers" :style="isFixed ? {'background-color': '#0a6e11'} : {'background-color': '#990b0b'}" > |
||||
<h1>{{topMessage}}</h1> |
||||
<div class="grid" :style="isFixed ? {'background-color': '#0b3b0e'} : {'background-color': '#800000'}"> |
||||
<ItemReplace @header-change="itemChanged" v-for="header in itemList" :key="header" :itemText="header"/> |
||||
</div> |
||||
<button v-if="this.isFixed" class="submit-button" @click="submitCorrections">Submit Corrections</button> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { store } from '../store.js' |
||||
import ItemReplace from './ItemReplace.vue' |
||||
|
||||
export default { |
||||
props: { |
||||
itemList: Array, |
||||
topMessage: String |
||||
}, |
||||
data() { |
||||
return { |
||||
store, |
||||
correctedColumns : 0, |
||||
isFixed : false, |
||||
} |
||||
}, |
||||
components: { |
||||
ItemReplace |
||||
}, |
||||
methods: { |
||||
itemChanged(value) { |
||||
console.log("Value: " + value + " itemlistlen: "+ this.itemList.length) |
||||
this.correctedColumns += value; |
||||
this.isFixed = Boolean(this.correctedColumns == this.itemList.length) |
||||
console.log("isFixed: " + this.isFixed) |
||||
}, |
||||
submitCorrections() { |
||||
console.log("Correction Submitted!") |
||||
} |
||||
} |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.missing-headers { |
||||
text-align: center; |
||||
background-color: #ac3232; |
||||
} |
||||
|
||||
.grid { |
||||
justify-content: center; |
||||
display: grid; |
||||
grid-template-columns: repeat(3, 1fr); |
||||
grid-gap: 10px; |
||||
margin-top: 10px; |
||||
padding: 15px; |
||||
border-color: darkgrey; |
||||
border-width: 10px; |
||||
} |
||||
|
||||
.submit-button{ |
||||
text-align: center; |
||||
margin-top: 20px; |
||||
font-size: large; |
||||
} |
||||
|
||||
</style> |
||||
|
||||
@ -0,0 +1,80 @@ |
||||
<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> |
||||
|
||||
@ -1,6 +0,0 @@ |
||||
<template> |
||||
<form> |
||||
<input type="file" id="uploadInput" accept=".xlsx" @change="upload($event)"> |
||||
</form> |
||||
</template> |
||||
|
||||
@ -0,0 +1,52 @@ |
||||
export class HeaderAssociator { |
||||
/* |
||||
This class is used to track the headers of the excel file |
||||
uploaded by the user. The header can then be assoicate with a |
||||
header from our specified template. The cell address of the
|
||||
document header is also tracked. |
||||
*/ |
||||
|
||||
// The users excel header they want to associate with our template
|
||||
// type: (string)
|
||||
documentHeader; |
||||
// The excel address of the document header
|
||||
// This will be a string in A1 notation for Excel
|
||||
docHeaderAddress; |
||||
|
||||
// The template excel header they want to associate
|
||||
// the document header with
|
||||
// type: (string)
|
||||
templateHeader = null; |
||||
|
||||
isValidData = false; |
||||
|
||||
constructor(documentHeader, address) { |
||||
this.documentHeader = documentHeader |
||||
this.docHeaderAddress = address |
||||
} |
||||
|
||||
set isValidData(newValidData) { |
||||
if (typeof newValidData !== 'boolean') { |
||||
console.error(`${this.documentHeader} | HeaderAssociator.validData must be a boolean: ${newValidData}`); |
||||
this.isValidData = false; |
||||
} |
||||
else this.isValidData = newValidData; |
||||
} |
||||
|
||||
swapTemplateHeader(newTemplateHeader) { |
||||
// Set the template header and return the previous template header
|
||||
// May return null if nothing has been set
|
||||
let oldTemplateHeader = this.templateHeader |
||||
// Convert blank string to null
|
||||
this.templateHeader = newTemplateHeader === '' ? null : newTemplateHeader |
||||
return oldTemplateHeader |
||||
} |
||||
|
||||
toString(){ |
||||
return `${this.documentHeader} (${this.docHeaderAddress}) : ${this.templateHeader}` |
||||
} |
||||
|
||||
isSet() { |
||||
return this.templateHeader !== null |
||||
} |
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
// store.js
|
||||
import { reactive } from 'vue' |
||||
|
||||
export const store = reactive({ |
||||
// Template headers missing from the document (strings)
|
||||
// regex did not match on any headers found in the document
|
||||
missingHeaders: [], |
||||
|
||||
// Headers found by scanning the document (HeaderAssociator)
|
||||
// Contains the following data:
|
||||
// - docuemnt header
|
||||
// - document header address (excel A1 string)
|
||||
// - template header (or null)
|
||||
// - isValidDate : whether the excel row data is valid
|
||||
documentHeaders: [], |
||||
}) |
||||
Loading…
Reference in new issue