From 70c3b1e1c5e1bbc354fe5961bae613bd23c4d8a2 Mon Sep 17 00:00:00 2001
From: Andrew <saintruler@gmail.com>
Date: Thu, 18 Jul 2019 23:12:10 +0400
Subject: =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D0=BF=D0=B8=D1=81=D0=B0=D0=BB?=
 =?UTF-8?q?=20=D0=BF=D1=80=D0=B8=D0=BB=D0=BE=D0=B6=D0=B5=D0=BD=D0=B8=D0=B5?=
 =?UTF-8?q?=20=D0=BD=D0=B0=20Vue.=20=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D0=B2=D0=B5=D1=80=D1=81=D1=82=D0=BA=D0=B0.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 day9/task5_vue/src/components/Table.vue | 106 ++++++++++++++++++++++++++++++++
 1 file changed, 106 insertions(+)
 create mode 100644 day9/task5_vue/src/components/Table.vue

(limited to 'day9/task5_vue/src/components/Table.vue')

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
-- 
cgit v1.2.3

