summaryrefslogtreecommitdiff
path: root/day9/task5_vue
diff options
context:
space:
mode:
Diffstat (limited to 'day9/task5_vue')
-rw-r--r--day9/task5_vue/backend_serve.py8
-rw-r--r--day9/task5_vue/src/App.vue34
-rw-r--r--day9/task5_vue/src/components/AddNewEntryButton.vue15
-rw-r--r--day9/task5_vue/src/components/EditFormBox.vue24
-rw-r--r--day9/task5_vue/src/components/Table.vue71
-rw-r--r--day9/task5_vue/src/components/UploadFileButton.vue2
6 files changed, 90 insertions, 64 deletions
diff --git a/day9/task5_vue/backend_serve.py b/day9/task5_vue/backend_serve.py
index abcbb2b..7aa89ef 100644
--- a/day9/task5_vue/backend_serve.py
+++ b/day9/task5_vue/backend_serve.py
@@ -29,7 +29,7 @@ def return_static(query, *args):
return ErrorResponse(404)
-@route('/api/upload', ['POST'])
+@route('/api/upload/?', ['POST'])
def upload_file(query, *args):
base_html = '<a href="/">Return to main page</a><br>%s'
@@ -77,7 +77,7 @@ def upload_file(query, *args):
return HtmlResponse(base_html % '<h1>File uploaded</h1>')
-@route('/api/update', ['POST'])
+@route('/api/update/?', ['POST'])
def update_post(query, *args):
print(query)
service_id = query['service_id']
@@ -98,7 +98,7 @@ def update_post(query, *args):
return HtmlResponse('<a href="/">Return to main page</a><br><h1>Database Updated</h1>')
-@route('/api/delete', ['POST'])
+@route('/api/delete/?', ['POST'])
def delete_post(query, *args):
service_id = query['service_id']
cursor = db.cursor()
@@ -107,7 +107,7 @@ def delete_post(query, *args):
return HtmlResponse('<a href="/">Return to main page</a><br><h1>Database Updated</h1>')
-@route('/api/add', ['POST'])
+@route('/api/add/?', ['POST'])
def add_post(query, *args):
header_fields = db_column_names()
headers = []
diff --git a/day9/task5_vue/src/App.vue b/day9/task5_vue/src/App.vue
index 3ce2035..2af8b20 100644
--- a/day9/task5_vue/src/App.vue
+++ b/day9/task5_vue/src/App.vue
@@ -1,12 +1,19 @@
<template>
<div>
- <Table v-bind:table-data="tableData"/>
- <UploadFileButton/>
- <AddNewEntryButton/>
+ <EditFormBox
+ v-bind:form-type="formType"
+ v-bind:cancel-callback="hideForm"
+ v-bind:table-row="formData"
+ v-if="isFormShown"
+ />
+ <Table v-bind:table-data="tableData" v-bind:show-form-callback="showForm"/>
+ <UploadFileButton v-if="!isFormShown"/>
+ <AddNewEntryButton v-if="!isFormShown" v-bind:show-form-callback="showForm"/>
</div>
</template>
<script>
+ import EditFormBox from "./components/EditFormBox.vue";
import Table from "./components/Table.vue";
import UploadFileButton from "./components/UploadFileButton.vue";
import AddNewEntryButton from './components/AddNewEntryButton.vue';
@@ -14,11 +21,14 @@
export default {
name: "App",
- components: {Table, UploadFileButton, AddNewEntryButton},
+ components: {EditFormBox, Table, UploadFileButton, AddNewEntryButton},
data() {
return {
- tableData: []
+ tableData: [],
+ formType: null,
+ formData: null,
+ isFormShown: false
}
},
@@ -33,6 +43,20 @@
.then(response => {
this.tableData = response.data;
})
+ },
+
+ methods: {
+ showForm(formType, formData) {
+ this.formType = formType;
+ this.formData = formData;
+ this.isFormShown = true;
+ },
+
+ hideForm() {
+ this.formType = null;
+ this.formData = null;
+ this.isFormShown = false;
+ }
}
}
</script>
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]}`)">&#9998</button>
</td>
<td>
- <button @click="showEditForm(`${row[0]}`)">&#10006</button>
+ <button @click="removeField(`${row[0]}`)">&#10006</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();
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-16 22:50:00 +0000