CreateListing.vue 7.18 KB
Newer Older
Khalid Ali's avatar
Khalid Ali committed
1
<template>
Khalid Ali's avatar
Khalid Ali committed
2
3
4
  <b-container class="b-form-container">
    <h1 class="text-center"><strong>SRCT</strong> BOOKSHARE</h1>
    <h3 class="text-center">Add Textbook</h3>
Khalid Ali's avatar
Khalid Ali committed
5
    <b-form @submit="onSubmit" @reset="onReset" v-if="show">
Khalid Ali's avatar
Khalid Ali committed
6
7
8
9
10
11
12
13
14
15
16
17
      <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
18
19
            :state="!$v.form.isbn.$invalid"
            aria-describedby="inputLiveHelp inputLiveFeedback"
Khalid Ali's avatar
Khalid Ali committed
20
            placeholder="Enter ISBN (8120321219)"
21
22
23
24
25
26
27
          />
          <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>
Khalid Ali's avatar
Khalid Ali committed
28
29
30
31
        </b-form-group>
        </b-col>
      </b-form-row>
      <b-form-group id="fieldset2" label="Course:" label-for="courses" label-text-align="left">
Khalid Ali's avatar
Khalid Ali committed
32
        <b-form-input
Khalid Ali's avatar
Khalid Ali committed
33
34
35
          id="courses"
          type="text"
          v-model="form.course"
Khalid Ali's avatar
Khalid Ali committed
36
          required
Khalid Ali's avatar
Khalid Ali committed
37
38
          :state="!$v.form.course.$invalid"
          aria-describedby="inputLiveHelp2 inputLiveFeedback2"
Khalid Ali's avatar
Khalid Ali committed
39
          placeholder="Enter Course Name (MATH 125)"
Khalid Ali's avatar
Khalid Ali committed
40
41
        >
        </b-form-input>
Khalid Ali's avatar
Khalid Ali committed
42
43
44
45
46
47
        <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>
Khalid Ali's avatar
Khalid Ali committed
48
      </b-form-group>
Khalid Ali's avatar
Khalid Ali committed
49
50
51
52
53
54
55
56
57
58
59
60
61
      <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"
      >
Khalid Ali's avatar
Khalid Ali committed
62
        <b-form-input
Khalid Ali's avatar
Khalid Ali committed
63
64
65
          id="price"
          type="number"
          v-model="form.price"
Khalid Ali's avatar
Khalid Ali committed
66
          required
Khalid Ali's avatar
Khalid Ali committed
67
68
69
70
71
72
73
74
75
76
          :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>
Khalid Ali's avatar
Khalid Ali committed
77
      </b-form-group>
Khalid Ali's avatar
Khalid Ali committed
78
79
      <b-form-group id="fieldset6" label="Images:" label-for="photo">
        <b-form-file
80
81
82
          id="files"
          ref="files"
          v-model="files"
Khalid Ali's avatar
Khalid Ali committed
83
84
85
86
87
          accept="image/*"
          multiple
          placeholder="Choose some photos..."
          drop-placeholder="Drop photos here..."
        />
Khalid Ali's avatar
Khalid Ali committed
88
      </b-form-group>
Khalid Ali's avatar
Khalid Ali committed
89
90
91
92
93
94
95
96
      <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"
        />
Khalid Ali's avatar
Khalid Ali committed
97
      </b-form-group>
98
      <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
Khalid Ali's avatar
Khalid Ali committed
99
100
101
102
      <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>
Khalid Ali's avatar
Khalid Ali committed
103
    </b-form>
Khalid Ali's avatar
Khalid Ali committed
104
  </b-container>
Khalid Ali's avatar
Khalid Ali committed
105
106
</template>

Khalid Ali's avatar
Khalid Ali committed
107
<script lang="ts">
Khalid Ali's avatar
Khalid Ali committed
108
import API from '../api';
Khalid Ali's avatar
Khalid Ali committed
109
import { Component, Vue } from 'vue-property-decorator';
110
import { Validation } from 'vuelidate';
Khalid Ali's avatar
Khalid Ali committed
111
import { required, minLength, maxLength, between, numeric, helpers } from 'vuelidate/lib/validators';
Khalid Ali's avatar
Khalid Ali committed
112

Khalid Ali's avatar
Khalid Ali committed
113
114
115
116
117
@Component({
  validations: {
    form: {
      isbn: {
        required,
Khalid Ali's avatar
Khalid Ali committed
118
        numeric,
119
120
121
        minLength: minLength(9),
        maxLength: maxLength(13),
      },
Khalid Ali's avatar
Khalid Ali committed
122
123
124
125
126
      course: {
        required,
        minLength: minLength(7),
        maxLength: maxLength(8),
      },
127
128
      price: {
        required,
Khalid Ali's avatar
Khalid Ali committed
129
130
        numeric,
        between: between(1, 1000),
131
132
      },
    },
Khalid Ali's avatar
Khalid Ali committed
133
134
  },
})
Khalid Ali's avatar
Khalid Ali committed
135
136
export default class CreateListing extends Vue {
  // Private Form Variables
137
  private form: {isbn: string, course: string, condition: number,
Khalid Ali's avatar
Khalid Ali committed
138
    accessCode: number, price: number, description: string} = {
139
    isbn: '', course: '', condition: 0, accessCode: 2, price: 0, description: '',
Khalid Ali's avatar
Khalid Ali committed
140
141
  };
  private show: boolean = true;
142
  private files: File[] = [];
Khalid Ali's avatar
Khalid Ali committed
143

Khalid Ali's avatar
Khalid Ali committed
144
  // List of options
Khalid Ali's avatar
Khalid Ali committed
145
146
147
148
149
150
151
152
153
  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'},
  ];
Khalid Ali's avatar
Khalid Ali committed
154

Khalid Ali's avatar
Khalid Ali committed
155
156
157
158
159
160
161
162
163
164
165
  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
Khalid Ali's avatar
Khalid Ali committed
166
167
168
    API.get("/").then(function (response) {
      const token = response.headers["x-csrf-token"];
      if (response.headers["x-csrf-token"] != null) {
169
170
        localStorage.setItem("csrf_token", token);
      }
Khalid Ali's avatar
Khalid Ali committed
171
172
    }).catch(function (error) {
      console.log(error.response);
173
174
175
    })
  }

Khalid Ali's avatar
Khalid Ali committed
176
177
  private onSubmit(evt: Event) {
    evt.preventDefault();
Khalid Ali's avatar
Khalid Ali committed
178

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

183
184
185
186
187
188
189
190
191
192
193
194
195
      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',
        }
196
197
198
199
    }).then(function(response) {console.log(response);})
    .catch(function (this: CreateListing, error) {
      //handle error
      console.log(error.response);
200
      // Redirect to backend login
201
      if (error.response == undefined || error.response.status == 403) {
Khalid Ali's avatar
Khalid Ali committed
202
        location.replace('https://localhost:9090/bs/api/login');
203
204
      }
    });
Khalid Ali's avatar
Khalid Ali committed
205
206
207
208
209
  }

  private onReset(evt: Event) {
    evt.preventDefault();
    /* Reset our form values */
Khalid Ali's avatar
Khalid Ali committed
210
211
    this.form.isbn = '';
    this.form.course = '';
Khalid Ali's avatar
Khalid Ali committed
212
213
    this.form.condition = 0;
    this.form.accessCode = 2;
Khalid Ali's avatar
Khalid Ali committed
214
215
    this.form.price = 0;
    this.form.description = '';
Khalid Ali's avatar
Khalid Ali committed
216
217
218
219
220
    /* Trick to reset/clear native browser form validation state */
    this.show = false;
    this.$nextTick(() => {
      this.show = true;
    });
Khalid Ali's avatar
Khalid Ali committed
221
  }
Khalid Ali's avatar
Khalid Ali committed
222
}
Khalid Ali's avatar
Khalid Ali committed
223
</script>
Khalid Ali's avatar
Khalid Ali committed
224
225
226
227
228
229

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