CreateListing.vue

<template>
  <b-container class="b-form-container">
    <h1 class="text-center"><strong>SRCT</strong> BOOKSHARE</h1>
    <h3 class="text-center">Add Textbook</h3>
    <b-form @submit="onSubmit" @reset="onReset" v-if="show">
      <b-form-row>
        <b-col>
        <b-form-group
          id="fieldset1"
          label="ISBN:"
          label-for="isbn"
        >
          <b-form-input
            id="isbn"
            type="number"
            v-model="form.isbn"
            required
            :state="!$v.form.isbn.$invalid"
            aria-describedby="inputLiveHelp inputLiveFeedback"
            placeholder="Enter ISBN (8120321219)"
          />
          <b-form-invalid-feedback id="inputLiveFeedback">
            This is a required field and must be have between 9 and 13 numbers.
          </b-form-invalid-feedback>
          <b-form-text id="inputLiveHelp">
            The ISBN is usually located on the back of the textbook.
          </b-form-text>
        </b-form-group>
        </b-col>
      </b-form-row>
      <b-form-group id="fieldset2" label="Course:" label-for="courses" label-text-align="left">
        <b-form-input
          id="courses"
          type="text"
          v-model="form.course"
          required
          :state="!$v.form.course.$invalid"
          aria-describedby="inputLiveHelp2 inputLiveFeedback2"
          placeholder="Enter Course Name (MATH 125)"
        >
        </b-form-input>
        <b-form-invalid-feedback id="inputLiveFeedback2">
          This is a required field and must be have between 7 and 8 characters.
        </b-form-invalid-feedback>
        <b-form-text id="inputLiveHelp2">
          The course number can be found Patriotweb.
        </b-form-text>
      </b-form-group>
      <b-form-group id="fieldset3" label="Condition:" label-for="condition">
        <b-form-select id="condition" :options="condition" required v-model="form.condition">
        </b-form-select>
      </b-form-group>
      <b-form-group id="fieldset4" label="Access Code:" label-for="accessCode">
        <b-form-select id="accessCode" :options="accessCode" required v-model="form.accessCode">
        </b-form-select>
      </b-form-group>
      <b-form-group
        id="fieldset5"
        label="Price:"
        label-for="price"
      >
        <b-form-input
          id="price"
          type="number"
          v-model="form.price"
          required
          :state="!$v.form.price.$invalid"
          aria-describedby="inputLiveHelp3 inputLiveFeedback3"
          placeholder="0"
        />
        <b-form-invalid-feedback id="inputLiveFeedback3">
          This is a required field and must be greater than 0.
        </b-form-invalid-feedback>
        <b-form-text id="inputLiveHelp3">
          The price should be the amount you intend to sell for.
        </b-form-text>
      </b-form-group>
      <b-form-group id="fieldset6" label="Images:" label-for="photo">
        <b-form-file
          id="files"
          ref="files"
          v-model="files"
          accept="image/*"
          multiple
          placeholder="Choose some photos..."
          drop-placeholder="Drop photos here..."
        />
      </b-form-group>
      <b-form-group id="fieldset7" label="Other Notes:" label-for="description">
        <b-form-textarea
          id="description"
          v-model="form.description"
          placeholder="Enter some useful information"
          rows="3"
          max-rows="6"
        />
      </b-form-group>
      <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
      <div class="text-center">
        <b-button class="mx-sm-1" type="submit" variant="primary" :disabled="$v.form.$invalid">Submit</b-button>
        <b-button class="mx-sm-1" type="reset" variant="danger">Reset</b-button>
      </div>
    </b-form>
  </b-container>
</template>

<script lang="ts">
import API from '../api';
import { Component, Vue } from 'vue-property-decorator';
import { Validation } from 'vuelidate';
import { required, minLength, maxLength, between, numeric, helpers } from 'vuelidate/lib/validators';

@Component({
  validations: {
    form: {
      isbn: {
        required,
        numeric,
        minLength: minLength(9),
        maxLength: maxLength(13),
      },
      course: {
        required,
        minLength: minLength(7),
        maxLength: maxLength(8),
      },
      price: {
        required,
        numeric,
        between: between(1, 1000),
      },
    },
  },
})
export default class CreateListing extends Vue {
  // Private Form Variables
  private form: {isbn: string, course: string, condition: number,
    accessCode: number, price: number, description: string} = {
    isbn: '', course: '', condition: 0, accessCode: 2, price: 0, description: '',
  };
  private show: boolean = true;
  private files: File[] = [];

  // List of options
  private condition: {value: number, text: string}[] = [
    {value: 5, text: 'New'}, {value: 4, text: 'Like New'},
    {value: 3, text: 'Very Good'}, {value: 2, text: 'Good'},
    {value: 1, text: 'Acceptable'}, {value: 0, text: 'Unacceptable'}];
  private accessCode: {value: number, text: string}[] = [
    {value: 2, text: 'Not Applicable'},
    {value: 1, text: 'Access Code Included'},
    {value: 0, text: 'Access Code NOT Included'},
  ];

  created() {
    // Must be logged in
    API.get("/bs/api/").catch(function (error) {
      console.log(error.response);
      // Redirect to backend login
      if (error.response == undefined || error.response.status == 403) {
        location.replace('https://localhost:9090/bs/api/login');
      }
    });

    // Get CSRF Token
    API.get("/").then(function (response) {
      const token = response.headers["x-csrf-token"];
      if (response.headers["x-csrf-token"] != null) {
        localStorage.setItem("csrf_token", token);
      }
    }).catch(function (error) {
      console.log(error.response);
    })
  }

  private onSubmit(evt: Event) {
    evt.preventDefault();

    let formData = new FormData();
    for( var i = 0; i < this.files.length; i++ ) {
      let file = this.files[i];

      formData.append('images', file, file.name);
      console.log(file);
    }
    console.log(formData.getAll('images'));
    
    formData.append('data', JSON.stringify(this.form));
    API.post('bs/api/listing', 
      formData,
      {
        headers: {
          'X-CSRF-TOKEN': localStorage.getItem('csrf_token'),
          'Content-Type': 'multipart/form-data',
        }
    }).then(function(response) {console.log(response);})
    .catch(function (this: CreateListing, error) {
      //handle error
      console.log(error.response);
      // Redirect to backend login
      if (error.response == undefined || error.response.status == 403) {
        location.replace('https://localhost:9090/bs/api/login');
      }
    });
  }

  private onReset(evt: Event) {
    evt.preventDefault();
    /* Reset our form values */
    this.form.isbn = '';
    this.form.course = '';
    this.form.condition = 0;
    this.form.accessCode = 2;
    this.form.price = 0;
    this.form.description = '';
    /* Trick to reset/clear native browser form validation state */
    this.show = false;
    this.$nextTick(() => {
      this.show = true;
    });
  }
}
</script>

<style>
.b-form-container {
  margin: 20px auto;
}
</style>