<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>