Commit 068cf8a8 authored by Khalid Ali's avatar Khalid Ali
Browse files

Add all fields to form

parent 04e32a24
......@@ -867,6 +867,14 @@
"integrity": "sha1-mqMMBNshKpoGSdaub9UKzMQHSKE=",
"dev": true
},
"@types/vuelidate": {
"version": "0.7.3",
"resolved": "https://registry.npmjs.org/@types/vuelidate/-/vuelidate-0.7.3.tgz",
"integrity": "sha512-iWeW7O6xX+b3kkmxTlz0lN61DrbWhB/nMTQQmqZxFWB8jUmpCt4LkSJPzYvAffgymYKrHwohR2QZTJaAJFgMog==",
"requires": {
"vue": "^2.5.16"
}
},
"@types/webpack-env": {
"version": "1.13.6",
"resolved": "http://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.13.6.tgz",
......@@ -14416,6 +14424,11 @@
"resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.8.1.tgz",
"integrity": "sha1-4uxPQtFrbHEuYYmcayC82x3xKMo="
},
"vuelidate": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/vuelidate/-/vuelidate-0.7.4.tgz",
"integrity": "sha512-QHZWYOL325Zo+2K7VBNEJTZ496Kd8Z31p85aQJFldKudUUGBmgw4zu4ghl4CyqPwjRCmqZ9lDdx4FSdMnu4fGg=="
},
"w3c-hr-time": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz",
......
......@@ -14,6 +14,7 @@
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"@types/vuelidate": "^0.7.3",
"axios": "^0.18.0",
"bootstrap": "^4.2.1",
"bootstrap-vue": "^2.0.0-rc.11",
......@@ -35,7 +36,8 @@
"vue-router": "^3.0.1",
"vue-style-loader": "^4.1.2",
"vue-svg-loader": "^0.11.0",
"vue-svgicon": "^3.2.2"
"vue-svgicon": "^3.2.2",
"vuelidate": "^0.7.4"
},
"devDependencies": {
"@types/jest": "^23.3.13",
......
......@@ -26,7 +26,6 @@ export default class App extends Vue {}
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
@import '~bootstrap/dist/css/bootstrap.css';
......
import Vue from 'vue';
import Vuelidate from 'vuelidate'
import BootstrapVue from 'bootstrap-vue';
import SvgIcon from 'vue-svgicon';
import App from './App.vue';
......@@ -9,6 +10,7 @@ import 'bootstrap';
Vue.config.productionTip = false;
Vue.use(SvgIcon);
Vue.use(BootstrapVue);
Vue.use(Vuelidate);
router.beforeEach((to, from, next) => {
document.title = to.meta.title;
......
<template>
<div>
<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-group
id="fieldset1"
label="ISBN:"
label-for="isbn"
>
<b-form-row>
<b-col>
<b-form-group
id="fieldset1"
label="ISBN:"
label-for="isbn"
:state="$v.form.isbn.$invalid"
>
<b-form-input
id="isbn"
type="number"
v-model="form.isbn"
required
placeholder="Enter ISBN (8120321219)"
>
</b-form-input>
</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="isbn"
type="number"
v-model="form.isbn"
id="courses"
type="text"
v-model="form.course"
required
placeholder="Enter ISBN"
placeholder="Enter Course Name (MATH 125)"
>
</b-form-input>
</b-form-group>
<b-form-group id="exampleInputGroup2" label="Your Name:" label-for="exampleInput2">
<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="exampleInput2"
type="text"
v-model="form.name"
id="price"
type="number"
v-model="form.price"
required
placeholder="Enter name"
placeholder="00"
>
</b-form-input>
</b-form-group>
<b-form-group id="exampleInputGroup3" label="Food:" label-for="exampleInput3">
<b-form-select id="exampleInput3" :options="foods" required v-model="form.food">
</b-form-select>
<b-form-group id="fieldset6" label="Images:" label-for="photo">
<b-form-file
id="photo"
v-model="form.photo"
accept="image/*"
multiple
placeholder="Choose some photos..."
drop-placeholder="Drop photos here..."
/>
</b-form-group>
<b-form-group id="exampleGroup4">
<b-form-checkbox-group v-model="form.checked" id="exampleChecks">
<b-form-checkbox value="me">Check me out</b-form-checkbox>
<b-form-checkbox value="that">Check that out</b-form-checkbox>
</b-form-checkbox-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>
<b-button type="submit" variant="primary">Submit</b-button>
<b-button type="reset" variant="danger">Reset</b-button>
<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>
</div>
</b-container>
</template>
<script lang="ts">
import axios from 'axios';
import { Component, Vue } from 'vue-property-decorator';
import { Validation } from 'vuelidate'
import { required, minLength, sameAs, helpers } from 'vuelidate/lib/validators'
@Component
@Component({
validations: {
form: {
isbn: {
required,
minLength: minLength(9)
}
}
},
})
export default class CreateListing extends Vue {
// Private Form Variables
private form: {isbn: string, course: string, condition: object, photo: object,
private form: {isbn: string, course: string, condition: object, photo: File[],
accessCode: object, price: number, description: string} = {
isbn: '', course: '', condition: {}, photo: {}, accessCode: {}, price: 0, description: '',
isbn: '', course: '', condition: {}, photo: [], accessCode: {}, price: 0, description: '',
};
private show: boolean = true;
// List of options
private condition: string[] = ['Select One', 'New', 'Like New',
private condition: string[] = ['New', 'Like New',
'Very Good', 'Good', 'Acceptable', 'Unacceptable'];
private accessCode: string[] = ['Not Applicable', 'Access Code Included',
'Access Code NOT Included'];
......@@ -71,7 +122,7 @@ export default class CreateListing extends Vue {
this.form.isbn = '';
this.form.course = '';
this.form.condition = {};
this.form.photo = {};
this.form.photo = [];
this.form.accessCode = {};
this.form.price = 0;
this.form.description = '';
......@@ -83,3 +134,9 @@ export default class CreateListing extends Vue {
}
}
</script>
<style>
.b-form-container {
margin: 20px auto;
}
</style>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment