|
| 1 | +<template> |
| 2 | + <div class="modal-content"> |
| 3 | + <div class="modal-data"> |
| 4 | + <label for="epicContent">Paste your roadmap here</label> |
| 5 | + <br/> |
| 6 | + <textarea name="roadmap" placeholder="Epic name... Epic status..." wrap="off" cols="30" rows="5" spellcheck="false" v-model="epicsImport"></textarea> |
| 7 | + <div class="modal-import-error" v-if="importError.status">{{ importError.message }}</div> |
| 8 | + <div class="modal-import-hint">Hint: paste your content from a .CSV (comma separated) file to add them to your current roadmap. We will only import your epics names and statuses. The accepted statuses can be either 'inProgress', 'soon', 'later' or 'done', anything else will be rejected.</div> |
| 9 | + </div> |
| 10 | + <div class="modal-actions"> |
| 11 | + <button type="button" class="bttn-secondary" @click="$emit('toggleModal')">Close</button> |
| 12 | + <button type="button" class="bttn-primary" @click="runVerification">Launch import</button> |
| 13 | + </div> |
| 14 | + </div> |
| 15 | +</template> |
| 16 | + |
| 17 | +<script> |
| 18 | + export default { |
| 19 | + data: function() { |
| 20 | + return { |
| 21 | + epicsImport: '', // controlled by user input. Consumed by importedRoadmap |
| 22 | + cleanedUpImport: [], // finished import |
| 23 | + importError: { |
| 24 | + status: false, |
| 25 | + message: '' |
| 26 | + } |
| 27 | + } |
| 28 | + }, |
| 29 | + methods: { |
| 30 | + runVerification() { |
| 31 | + this.cleanImport(); |
| 32 | +
|
| 33 | + if (this.isRoadmapEven() && this.verifyEpicStatuses()) { |
| 34 | + this.importRoadmap(); |
| 35 | + } else { |
| 36 | + return this.importError.message |
| 37 | + } |
| 38 | + }, |
| 39 | + importRoadmap() { |
| 40 | + this.$emit('importRoadmap', this.cleanedUpImport); |
| 41 | + }, |
| 42 | + isRoadmapEven() { |
| 43 | + if (Number.isInteger(this.importedRoadmap.length / 2)) { |
| 44 | + return true |
| 45 | + } else { |
| 46 | + this.importError.status = true; |
| 47 | + this.importError.message = 'Some of your epics seem to be missing a status'; |
| 48 | + return false |
| 49 | + } |
| 50 | + }, |
| 51 | + verifyEpicStatuses() { |
| 52 | + let statuses = true; |
| 53 | + let validStatuses = ['inProgress', 'soon', 'later', 'done']; |
| 54 | +
|
| 55 | + // We iterate two by two because we want to check the statuses, not each element |
| 56 | + for (let i = 0; i < this.importedRoadmap.length; i += 2) { |
| 57 | + if (validStatuses.includes(this.importedRoadmap[i + 1])){ |
| 58 | + statuses = true; |
| 59 | + } else { |
| 60 | + this.importError.status = true; |
| 61 | + this.importError.message = 'Some of your statuses are incorrect'; |
| 62 | + statuses = false; |
| 63 | + } |
| 64 | + } |
| 65 | + return statuses; |
| 66 | + }, |
| 67 | + cleanImport() { |
| 68 | + // removing empty lines / sections in array |
| 69 | + for (let i = 0; i < this.importedRoadmap.length; i++) { |
| 70 | + if (this.importedRoadmap[i] == '') { |
| 71 | + this.importedRoadmap.splice(i, 1); |
| 72 | + } |
| 73 | + } |
| 74 | +
|
| 75 | + // making the long array into many smaller arrays of pairs |
| 76 | + for (let i = 0; i < this.importedRoadmap.length; i += 2) { |
| 77 | + this.cleanedUpImport.push([this.importedRoadmap[i], this.importedRoadmap[i +1]]) |
| 78 | + } |
| 79 | + } |
| 80 | + }, |
| 81 | + computed: { |
| 82 | + importedRoadmap() { |
| 83 | + // transforms the epic import string into an array |
| 84 | + return this.epicsImport.replace(/\n/g, ', ').split(', '); |
| 85 | + } |
| 86 | + }, |
| 87 | + watch: { |
| 88 | + epicsImport: function () { |
| 89 | + if (this.epicsImport === ''){ |
| 90 | + this.importError.status = false; |
| 91 | + this.importError.message = ''; |
| 92 | + } |
| 93 | + } |
| 94 | + } |
| 95 | + } |
| 96 | +</script> |
0 commit comments