summaryrefslogtreecommitdiff
path: root/day9/task5_vue/src/App.vue
blob: 2af8b200245fb005b223fb830cbbeea599bcbb41 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<template>
    <div>
        <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';
    import axios from 'axios';

    export default {
        name: "App",
        components: {EditFormBox, Table, UploadFileButton, AddNewEntryButton},

        data() {
            return {
                tableData: [],
                formType: null,
                formData: null,
                isFormShown: false
            }
        },

        mounted() {
            axios
                .request({
                    url: '/api/get/',
                    method: 'post',
                    headers: {'Content-Type': 'application/json'},
                    data: JSON.stringify({'type': 'full'})
                })
                .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>

<style scoped>

</style>