BlueFire/frontend/src/views/JobApply.vue

<template>
    <div>
        <div class="container">
            <div class="narrow-container">
                <h1 class="uppercase normal-heading apply-title">Submit your Application</h1>
                <form class="normal-form" method="POST">
                    <div class="form-group apply">
                        <div class="form-input horizontal">
                            <label class="required" for="FullName">Full Name</label>
                            <input type="text" name="full_name" id="FullName" v-model="full_name" readonly>
                        </div>
                        <div class="form-input horizontal">
                            <label class="required" for="Email">Email</label>
                            <input type="text" name="name" id="Name" v-model="name" readonly>
                        </div>
                        <div class="form-input horizontal">
                            <label class="required" for="PhoneNumber">Phone Number</label>
                            <input type="text" name="phone_number" id="PhoneNumber" v-model="phone_number" readonly>
                        </div>
                    </div>
                    <div class="form-space"></div>
                    <div class="form-group apply">
                        <div class="form-input horizontal">
                            <label for="PreviousCompanyName">Previous Company Name</label>
                            <input type="text" name="[revious_company_name" id="PreviousCompanyName" v-model="previous_company_name">
                            </div>
                        <div class="form-input horizontal">
                            <label for="PreviousCompanyPosition">Previous Position</label>
                            <input type="text" name="previous_company_position" id="PreviousCompanyPosition" v-model="previous_company_position">
                        </div>
                        <div class="form-input horizontal">
                            <label class="required" for="UniversityName">University Name</label>
                            <input type="text" name="university_name" id="UniversityName" v-model="university_name">
                        </div>
                    </div>
                    <div class="form-space"></div>
                    <div class="form-group apply">
                        <div class="form-input horizontal">
                            <label class="required" for="CVURL">CV URL</label>
                            <input type="file" name="cv_file" id="CVURL" @change="uploadCV">
                        </div>
                        <div class="form-input horizontal">
                            <label class="required" for="PortfolioURL">Portfolio URL</label>
                            <input type="file" name="portfolio_file" id="PortfolioURL" @change="uploadPortfolio">
                        </div>
                    </div>
                    <div class="form-notice">
                        <p class="required-notice">*Must be filled</p>
                        <p class="required-notice">{{ notice }}</p>
                    </div>
                    <div class="flex-center">
                        <button type="submit" class="button large w-50 uppercase" @click="applyJob">Submit Application</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
import API from '../lib/API';
export default {
    data() {
        return {
            full_name: this.$store.state.user.UserName,
            name: this.$store.state.user.Email,
            phone_number: this.$store.state.user.Phone,
            previous_company_name: "",
            previous_company_position: "",
            university_name: "",
            cv_url: "",
            cv_file: [],
            portfolio_file: [],
            portfolio_url: "",
            notice: "",
        }
    },
    mounted() {
        if(this.$store.state.apiKey == 0) {
            this.$router.push({
                name: 'login'
            });
        }
    },
    methods: {
        uploadCV(e) {
            var formData = new FormData();
            formData.append('file',e.target.files[0]);
            e.target.files;
            API.post("/uploadFile",formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(({ data }) => {
                this.cv_url = '/storage/'+data;
            })
        },
        uploadPortfolio(e) {
            var formData = new FormData();
            formData.append('file',e.target.files[0]);
            e.target.files;
            API.post("/uploadFile",formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(({ data }) => {
                this.portfolio_url = '/storage/'+data;
            })
        },
        applyJob(e) {
            e.preventDefault();
            this.notice = "";
            if(this.university_name == "") {
                this.notice = "University name must not be empty";
                return;
            } 
            if(this.cv_url == "") {
                this.notice = "Please upload your CV";
                return;
            }
            if(this.portfolio_url == "") {
                this.notice = "Please upload your Portfolio";
                return;
            } 
            var body = new FormData();
            body.append("userId",this.$store.state.user.UserID);
            body.append('jobId',this.$route.params.id);
            body.append('email',this.name);
            body.append('company',this.previous_company_name);
            body.append('position',this.previous_company_position);
            body.append('university',this.university_name);
            body.append('cv',this.cv_url);
            body.append('portofolio',this.portfolio_url);
            API.post("/submitApplication",body,{
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(()=> {
                this.$router.push({
                    name: 'job-detail',
                    params: this.$route.params
                });
            });
        }
    }
}
</script>
<style>

</style>