diff options
Diffstat (limited to 'day9/task5_vue/src/components')
| -rw-r--r-- | day9/task5_vue/src/components/AddNewEntryButton.vue | 15 | ||||
| -rw-r--r-- | day9/task5_vue/src/components/EditFormBox.vue | 24 | ||||
| -rw-r--r-- | day9/task5_vue/src/components/Table.vue | 71 | ||||
| -rw-r--r-- | day9/task5_vue/src/components/UploadFileButton.vue | 2 |
4 files changed, 57 insertions, 55 deletions
diff --git a/day9/task5_vue/src/components/AddNewEntryButton.vue b/day9/task5_vue/src/components/AddNewEntryButton.vue index fa52f8b..dc86907 100644 --- a/day9/task5_vue/src/components/AddNewEntryButton.vue +++ b/day9/task5_vue/src/components/AddNewEntryButton.vue @@ -2,7 +2,7 @@ <button @mouseenter="isHovered = true" @mouseleave="isHovered = false" - @click="showCreateForm"> + @click="showForm"> <div v-if="isHovered">Add new entry</div> <div v-else>+</div> </button> @@ -13,17 +13,24 @@ export default { name: "AddNewEntryButton", + props: ['showFormCallback'], components: {EditFormBox}, data() { return { - isHovered: false + isHovered: false, } }, methods: { - showCreateForm() { - + showForm() { + this.showFormCallback('create', { + service_id: '', servtype: '', subtype: '', + user_id: '', referrer_user_id: '', state: '', + creation_date: '', creation_time: '', + creation_request_sent_date: '', + notified_about_expiration: '' + }) } } } diff --git a/day9/task5_vue/src/components/EditFormBox.vue b/day9/task5_vue/src/components/EditFormBox.vue index 53bfd8b..389b549 100644 --- a/day9/task5_vue/src/components/EditFormBox.vue +++ b/day9/task5_vue/src/components/EditFormBox.vue @@ -1,7 +1,7 @@ <template> <div class="backgroundTint shown"> <div class="contentBox shown"> - <form id="tableForm" action="/api/update" method="post"> + <form ref="tableForm" action="/api/actionNotChanged" method="post"> <div class="formRow"> <div class="formRow-label">service_id</div> @@ -88,13 +88,11 @@ </div> </div> - <div class="formButtons" v-if="formType === 'update'"> + <div class="formButtons"> <button type="button" @click="cancelCallback">Cancel</button> - <button type="submit">Update</button> - </div> - <div class="formButtons" v-else-if="formType === 'create'"> - <button type="button">Cancel</button> - <button type="submit">Create</button> + + <button type="submit" v-if="formType === 'update'">Update</button> + <button type="submit" v-else-if="formType === 'create'">Create</button> </div> </form> </div> @@ -106,14 +104,12 @@ name: "EditFormBox", props: ['formType', 'cancelCallback', 'tableRow'], - data() { - return { - row: this.tableRow - } - }, - mounted() { - console.log(this.row); + let action = ''; + if (this.formType === 'create') action = '/api/add'; + else if (this.formType === 'update') action = '/api/update'; + + this.$refs.tableForm.action = action; } } </script> diff --git a/day9/task5_vue/src/components/Table.vue b/day9/task5_vue/src/components/Table.vue index 519af25..d9296d9 100644 --- a/day9/task5_vue/src/components/Table.vue +++ b/day9/task5_vue/src/components/Table.vue @@ -1,12 +1,5 @@ <template> - <div> - <EditFormBox - v-bind:form-type="formType" - v-bind:cancel-callback="hideEditForm" - v-bind:table-row="tableRow" - v-if="isFormShown" - /> - <table id="vueTable"> + <table> <thead> <tr> <th v-for="header in tableData.headers"> @@ -26,12 +19,11 @@ <button @click="showEditForm(`${row[0]}`)">✎</button> </td> <td> - <button @click="showEditForm(`${row[0]}`)">✖</button> + <button @click="removeField(`${row[0]}`)">✖</button> </td> </tr> </tbody> </table> - </div> </template> <script> @@ -40,40 +32,36 @@ export default { name: "Table", - props: ['tableData'], + props: ['tableData', 'showFormCallback'], components: {EditFormBox}, - data() { - return { - formType: null, - isFormShown: false, - tableRow: null - } - }, - methods: { showEditForm(serviceId) { - this.requestRowById(serviceId) + axios + .request({ + url: '/api/get/', + method: 'post', + headers: {'Content-Type': 'application/json'}, + data: JSON.stringify({'type': 'single_id', 'service_id': serviceId}) + }) .then(response => { - this.tableRow = response.data; - this.formType = 'update'; - this.isFormShown = true; + this.showFormCallback('update', response.data); }); }, - hideEditForm() { - this.formType = null; - this.isFormShown = false; - }, - - requestRowById(serviceId) { - return axios.request({ - url: '/api/get/', - method: 'post', - headers: {'Content-Type': 'application/json'}, - data: JSON.stringify({'type': 'single_id', 'service_id': serviceId}) - }) + removeField(serviceId) { + this.tableData.content = this.tableData.content.filter(row => row[0].toString() !== serviceId); + axios + .request({ + url: '/api/delete', method: 'post', + data: {'service_id': serviceId} + }) + .then(response => { + if (response.status === 200) + this.tableData = this.tableData.content.filter(row => row[0] !== serviceId); + }); } + } } </script> @@ -103,4 +91,17 @@ tbody > tr:nth-child(2n) { background-color: #f8f6ff; } + + button { + border: none; + border-radius: 2px; + } + + button:hover { + background-color: #dadada; + } + + button:focus { + background-color: #d5d5d5; + } </style>
\ No newline at end of file diff --git a/day9/task5_vue/src/components/UploadFileButton.vue b/day9/task5_vue/src/components/UploadFileButton.vue index f544088..96f3576 100644 --- a/day9/task5_vue/src/components/UploadFileButton.vue +++ b/day9/task5_vue/src/components/UploadFileButton.vue @@ -30,8 +30,6 @@ methods: { triggerUploadFile() { - console.log('Clicked'); - console.log(this.$refs.csvFileInput); this.$refs.csvFileInput.click(); } } |