SHARE
TWEET

Untitled

a guest Jul 21st, 2019 61 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2. <div class="container mt-3">
  3.  
  4.     <div class="row justify-content-center">
  5.  
  6.         <div class="col-8">
  7.             <div class="card">
  8.                 <div class="card-header bg-info">
  9.                     <h4 class="text-white mt-2">Add Room Types</h4>
  10.                 </div>
  11.                 <div class="card-body">
  12.                     <form action="#" method="post" @submit.prevent="addRoomType()">
  13.                         <div class="row form-group">
  14.                             <label for="name" class="col-form-label col-3 text-right">Name</label>
  15.                             <div class="col-9">
  16.                                 <input v-model="name" v-bind:class="{'is-invalid': errors.name || sErrors.name}" type="text" class="form-control">
  17.                                 <div v-if="errors.name || sErrors.name" class="invalid-feedback">
  18.                                     {{errors.name || sErrors.name[0]}}
  19.                                 </div>
  20.                             </div>
  21.                         </div>
  22.                         <div class="row form-group">
  23.                             <label class="col-form-label col-3 text-right">Price (&#8358;)</label>
  24.                             <div class="col-3">
  25.                                 <input v-model="price"  v-bind:class="{'is-invalid': errors.price || sErrors.price}"  type="text" class="form-control">
  26.                                 <div v-if="errors.price || sErrors.price" class="invalid-feedback">
  27.                                     {{errors.price || sErrors.price[0]}}
  28.                                 </div>
  29.                             </div>
  30.                         </div>
  31.                         <div class="row form-group">
  32.                             <label class="col-form-label col-3 text-right">Description</label>
  33.                             <div class="col-9">
  34.                                 <textarea v-model="description" v-bind:class="{'is-invalid': errors.description || sErrors.description}" class="form-control"></textarea>
  35.                                 <div v-if="errors.description || sErrors.description" class="invalid-feedback">
  36.                                     {{errors.description || sErrors.description[0]}}
  37.                                 </div>
  38.                             </div>
  39.                         </div>
  40.                         <div class="row form-group">
  41.                             <label for="amenities" class="col-form-label col-3 text-right">Amenities</label>
  42.                             <div class="col-9 mt-2">
  43.                                 <div v-for="(amenity) in allAmenities" v-bind:key="amenity.id" class="form-check form-check-inline">
  44.                                 <input v-model="amenities" class="form-check-input" type="checkbox" id="inlineCheckbox1" :value="amenity.id">
  45.                                 <label class="form-check-label" for="inlineCheckbox1">{{amenity.name}}</label>
  46.                                 </div>
  47.                             </div>
  48.                         </div>
  49.                         <div class="row form-group">
  50.                             <label for="amenities" class="col-form-label col-3 text-right">Images</label>
  51.                             <div class="col-9">
  52.                                 <input @change="onImageChange" :type="'file'" v-bind:class="{'is-invalid': errors.images || sErrors.images}" accept="image/*">
  53.                                 <div v-if="errors.images || sErrors.images" class="invalid-feedback">
  54.                                     {{errors.images || sErrors.images[0]}}
  55.                                 </div>
  56.                             </div>
  57.                         </div>
  58.                         <div class="row form-group">
  59.                             <div class="col-9 offset-3">
  60.                                 <input type="submit" value="Add Room Type" class="btn btn-outline-primary">
  61.                             </div>
  62.                         </div>
  63.                     </form>
  64.                 </div>
  65.             </div>
  66.  
  67.         </div>
  68.  
  69.     </div>
  70.  
  71. </div>
  72. </template>
  73. <script>
  74. import axios from 'axios';
  75. import roomTypeMixin from '../../mixins/common.mixins';
  76.  
  77. export default{
  78.     mixins: [roomTypeMixin],
  79.     data(){
  80.         return {
  81.             name: "",
  82.             price: "",
  83.             description: "",
  84.             image: new FormData,
  85.             attachment: '',
  86.             amenities: [],
  87.             allAmenities: {},
  88.             roomTypes: {},
  89.             errors: {},
  90.             sErrors: {},
  91.         }
  92.     },
  93.     methods: {
  94.         onImageChange(e){
  95.             this.attachment = e.target.files[0];
  96.             console.log(this.attachment);
  97.         },
  98.         addRoomType: function(){
  99.  
  100.  
  101.             axios.post('/admin/room-types',{
  102.                 name: this.name,
  103.                 price: this.price,
  104.                 description: this.description,
  105.                 amenities: this.amenities,
  106.                 image: this.attachment
  107.             }, {
  108.                 header: {
  109.                     'Content-Type': 'multipart/form-data'
  110.                 }
  111.             }).then((response)=>{
  112.                 this.errors = {};
  113.                 this.name = ""; this.price="";this.description="";this.sErrors={};this.amenities=[];
  114.                 this.roomTypes.push(response.data);
  115.             }).catch((error)=>{
  116.                 this.sErrors = error.response.data.errors;
  117.                 console.error(error.response.data);
  118.             });
  119.  
  120.  
  121.         },
  122.  
  123.     },
  124.  
  125.     props: {
  126.  
  127.     },
  128.     mounted(){
  129.         this.getRoomTypes().then((response)=>{
  130.             //console.log(response)
  131.             this.roomTypes = response.data;
  132.         });
  133.  
  134.         this.getAmenities().then((response)=>{
  135.             this.allAmenities = response.data;
  136.         });
  137.     }
  138. }
  139. </script>
  140. <style>
  141.  
  142. </style>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top