cubash-archive/frontend/src/components/routes/HiringApply.vue

<template>
  <main>
    <div class="hero is-info is-medium">
      <div class="hero-body">
        <div class="container has-text-centered">
          <h1 class="title">
            Welcome
          </h1>
          <h2 class="subtitle">
            Please fill out the form below with accurate and relevant information.
          </h2>
        </div>
      </div>
    </div>
    <template class="applyform">
      <div class="hero is-fullheight-with-navbar is-info">
        <center>
          <div class="column is-5">
            <div class="box" v-if="$store.state.username">
              <div class="card-content">
                <section>
                  <p>What would you like to do at Kaverti?</p>
                  <select-button :options='apply.option' v-model='apply.selectedOption' :touch-disabled='true'></select-button>
                  <div v-if='apply.selectedOption == "other"'>
                    <b-field label="Other">
                      <b-input
                        v-model='apply.otherForm'
                        :label-position="kavelabelPosition"
                        :error='apply.errors.otherForm'
                        placeholder='Suggest an option'
                        width='100%'
                      >
                      </b-input>
                    </b-field>
                  </div>
                  <p v-if="apply.selectedOption === 'devsite'">
                    Hello developer, here is some information you might want to know before applying:<br>
                    For our backend we use Express.js (Node.js) and Sequelize (MySQL ORM library)<br>
                    For our frontend we use Vue.js, and Axios for making requests.<br>
                    If you don't know any of these, and you still want to help develop the website, we assume that you are willing to learn, (I can help if needed)
                  </p>
                  <b-field label="What is your Kaverti username?">
                    <b-input
                      v-model='apply.username'
                      :label-position="kavelabelPosition"
                      :error='apply.errors.username'
                      :placeholder='$store.state.username'
                      width='100%'
                      required
                      disabled="disabled"
                    >
                    </b-input>
                  </b-field>
                  <b-field label="What is your email?">
                    <b-input
                      v-model='apply.email'
                      :label-position="kavelabelPosition"
                      :error='apply.errors.email'
                      :placeholder='$store.state.email'
                      width='100%'
                      type="email"
                      required
                      disabled="disabled"
                    >
                    </b-input>
                  </b-field>
                  <b-field label="What is your Date of Birth?">
                    <b-datepicker
                      v-model='apply.dob'
                      :label-position="kavelabelPosition"
                      :error='apply.errors.dob'
                      placeholder='Date of Birth'
                      width='100%'
                      required
                      trap-focus>
                    </b-datepicker>
                  </b-field>
                  <b-field label="Why do you want to work for Kaverti?">
                    <b-input
                      maxlength="1000"
                      type="textarea"
                      v-model='apply.whyWork'
                      placeholder="Try to be creative in your answer, and include as much information as possible."
                      :label-position="kavelabelPosition"
                      :error='apply.errors.whyWork'
                      width='100%'
                      required
                    ></b-input>
                  </b-field>
                  <b-field label="Do you have any suggestions on how we can improve Kaverti's website?">
                    <b-input
                      v-model='apply.suggestions'
                      :label-position="kavelabelPosition"
                      :error='apply.errors.suggestions'
                      placeholder="If you don't, Respond with No."
                      width='100%'
                      maxlength="250"
                      type="textarea"
                      required></b-input>
                  </b-field>
                  <b-field label="Do you have any past experience in this line of work? If so, where have you worked in the past?">
                    <b-input
                      v-model='apply.experience'
                      :label-position="kavelabelPosition"
                      :error='apply.errors.experience'
                      placeholder='Include as much information as you can'
                      width='100%'
                      maxlength="250"
                      type="textarea"
                      required></b-input>
                  </b-field>
                  <b-button :loading="loading" class="is-info" @click.stop='submitApplication'>Submit Application</b-button>
                </section>
              </div>
            </div>
            <div class="box" v-else>
            <article class="media">
              <div class="media-content">
                <center>
                  <div class="content">
                    <h1>Please login to do this action.</h1>
                    <p>Before you can apply, you'll need to login.</p>
                  </div>
                </center>
              </div>
            </article>
          </div>
          </div>
        </center>
      </div>
    </template>
  </main>
</template>
<script>
import AjaxErrorHandler from "../../assets/js/errorHandler";
import SelectButton from '../SelectButton';
export default {
  name: 'HiringApply',
  components: {
    SelectButton
  },
  data() {
    return {
      kavelabelPosition: 'on-border',
      apply: {
        username: '',
        dob: '',
        email: '',
        whyWork: '',
        otherForm: '',
        experience: '',
        suggestions: '',
        selectedOption: 0,
        option: [
          {name: 'Job Selection', disabled: true},
          {name: 'Moderator', value: 'moderator', disabled: true},
          {name: 'Modeler', value: 'modeler'},
          {name: 'Developer (Website)', value: 'devsite'},
          {name: 'Developer (Game)', value: 'devgame'},
          {name: 'Other (Specify)', value: 'other'}
        ],

        errors: {
          username: '',
          dob: '',
          email: '',
          whyWork: '',
          otherForm: '',
          selectedOption: '',
          experience: '',
          suggestions: ''
        },
      },
      loading: false,
      showMenu: false,
      ajaxErrorHandler: AjaxErrorHandler(this.$store)
    }
  },
  methods: {
    submitApplication() {
      this.loading = true

      this.axios
        .post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'kaverti/job-apply', {
          username: this.apply.username,
          dob: this.apply.dob,
          email: this.apply.email,
          whyWork: this.apply.whyWork,
          otherForm: this.apply.otherForm,
          experience: this.apply.experience,
          selectedOption: this.apply.selectedOption,
          suggestions: this.apply.suggestions
        })
        .then(() => {
          this.loading = false
          this.$router.push(`/jobs/thank-you`)
        })
        .catch(e => {
          this.loading = false
          AjaxErrorHandler(this.$store)(e)
        })
    }
  }
}
</script>