Переписал приложение на Vue. Изменена верстка.

1 files changed, 106 insertions, 0 deletions

diff --git a/day9/task5_vue/src/components/Table.vue b/day9/task5_vue/src/components/Table.vue
new file mode 100644
index 0000000..519af25
--- /dev/null
+++ b/day9/task5_vue/src/components/Table.vue
@@ -0,0 +1,106 @@
+<template>
+    <div>
+        <EditFormBox
+                v-bind:form-type="formType"
+                v-bind:cancel-callback="hideEditForm"
+                v-bind:table-row="tableRow"
+                v-if="isFormShown"
+        />
+        <table id="vueTable">
+            <thead>
+                <tr>
+                    <th v-for="header in tableData.headers">
+                        {{ header }}
+                    </th>
+                    <th></th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="(row) in tableData.content">
+                    <td>{{ row[0] }}</td>
+                    <td v-for="(column) in row.slice(1)">
+                        {{ column }}
+                    </td>
+                    <td>
+                        <button @click="showEditForm(`${row[0]}`)">&#9998</button>
+                    </td>
+                    <td>
+                        <button @click="showEditForm(`${row[0]}`)">&#10006</button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+    import EditFormBox from "./EditFormBox.vue";
+    import axios from 'axios';
+
+    export default {
+        name: "Table",
+        props: ['tableData'],
+        components: {EditFormBox},
+
+        data() {
+            return {
+                formType: null,
+                isFormShown: false,
+                tableRow: null
+            }
+        },
+
+        methods: {
+            showEditForm(serviceId) {
+                this.requestRowById(serviceId)
+                    .then(response => {
+                        this.tableRow = response.data;
+                        this.formType = 'update';
+                        this.isFormShown = true;
+                    });
+            },
+
+            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})
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    table {
+        border-spacing: 0;
+        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
+    }
+
+    th {
+        background-color: #6c7ae0;
+        padding: 7px 15px;
+        font-size: 19px;
+        color: white;
+    }
+
+    td {
+        padding: 6px;
+        color: #505050;
+    }
+
+    tbody > tr:hover, tbody > tr:nth-child(2n):hover {
+        background-color: rgba(0, 0, 0, 0.1);
+    }
+
+    tbody > tr:nth-child(2n) {
+        background-color: #f8f6ff;
+    }
+</style>
\ No newline at end of file