%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/ugotscom/3vfm3/resources/js/components/
Upload File :
Create Path :
Current File : /home/ugotscom/3vfm3/resources/js/components/addproperties.vue

<template>

        <form action="/properties" method="POST" @submit.prevent="addproperty()">
        <div class="form-group">
            <input type="text" placeholder="Enter Client Phone" v-model="searchQuery" @keyup="getData(searchQuery)" autocomplete="off" class="form-control input-lg" list="users"/>
                <datalist id="users" >
              <option v-for="user in users.data" :key='user'  :value="user.id">{{user.name}}-{{user.phone }}</option>
            </datalist>
            <a v-b-toggle href="#add-client" @click.prevent>Add Contact</a>
              <b-sidebar id="add-client" class="w-50" title="Add Client" right shadow backdrop backdrop-variant="dark">
        
         <addclients />
            </b-sidebar>
          </div>
         
        <div class="form-group">
            <label for="title">Title</label>
            <input type="text" v-model="title" class="form-control">
        </div>
          <div class="form-group">
            <label for="description">Description</label>
            <input type="textarea" v-model="description" class="form-control" rows="50" cols="50">
        </div>
        <input type="radio" name="buy" v-model="property_for" value="1" id="buy">Sale
         <input type="radio" name="rent" v-model="property_for" value="2" id="rent">Rent
          <div class="form-group">
              <label for="">Property Type</label>
            <select v-model="property_type" class="form-control"> 
   
          <optgroup label="Residential">
          <option value="1">Apartment</option>
          <option  value="2">House</option>
          <option  value="3">Villa</option>
          <option  value="4">Residential Land</option>
          </optgroup>
          <optgroup label="Commercial">
           <option  value="4">Commercial Office Space</option>
            <option  value="5">Office in IT Park/ SEZ</option>
            <option  value="6">Commercial Shop</option>
            <option  value="7">Commercial Showroom</option>
            <option  value="8">Commercial Land</option>
            <option  value="9">Warehouse/ Godown</option>          
          </optgroup>
        </select>
          </div>
          <div v-if="this.property_type==1">
            <label for="Area">Area</label>
            <input type="text" class="form-control" v-model="area">
            <label for="BHK">BHK</label>
            <input type="text" class="form-control" v-model="bhk">
            <label for="">Project</label>
            <input type="text" class="form-control" v-model="project">Project
            add
          </div>
           <div class="form-group">
               <label for="">Location</label>
            <select v-model="location" class="form-control">
             <option v-for="option in locationlist" :value="option.location_id" :key="option.location_id">{{option.location}}</option>

        </select>
          </div>
          <div class="form-group">
            <label for="latitude">Latitude</label>
<input type="text" class="form-control" v-model="latitude">
 <label for="Longitude">Longitude</label>
<input type="text" class="form-control"  v-model="longitude">
          </div>
          <div class="form-group">
            <label for="price">Price</label>
              <input type="text" class="form-control" v-model="price">
          </div>
 
  <button type="submit" value="submit" class="btn btn-primary">Submit</button>
</form>

   
</template>

<script>
 import addclients from './clients/addclients'

    export default {
      data(){
        return{
        client_id:'',
        title:'',
        description:'',
        property_for:'',
        property_type:'',
        location:'',
        price:'',
        latitude:'',
        longitude:'',
        title: '',
        clientid:'',
        area:'',
        bhk:'',
        project:'',
        locationlist:{},
          searchQuery:'',
          users:[],
    
        }
      
      },
             components: {
    addclients
  },
        
        methods: {
          addproperty(){
               axios
    .post('/properties', {
      client_id: this.searchQuery,
      title:this.title,
      description:this.description,
      property_for: this.property_for,
      property_type:this.property_type,
      price: this.price,
      latitude:this.latitude,
      longitude:this.longitude,
      location:this.location,
      area:this.area,
      bhk:this.bhk,
      project:this.project,
    }) .then( response => this.$router.push({ path: '/allproperties/'}));
            }, 
removeTag (index) {
      this.tags.splice(index, 1)
},
  getData:function(searchQuery) {
    	this.isLoading = true;
        axios.get('client/searchquery?q=' + searchQuery.replace(/\s+/g, ''))
        .then(response => {
          this.users = response.data;
        });
        },
         loadlocations:function(){
             axios.get('/locations').then(response=> {this.locationlist = response.data});
            },
        },
        created:function(){
          this.loadlocations()
        }

    }
    
</script>
<style scoped>
.tag-input {
  width: 100%;
  border: 1px solid #eee;
  font-size: 0.9em;
  height: 50px;
  box-sizing: border-box;
  padding: 0 10px;
}

.tag-input__tag {
  height: 30px;
  float: left;
  margin-right: 10px;
  background-color: #eee;
  margin-top: 10px;
  line-height: 30px;
  padding: 0 5px;
  border-radius: 5px;
}

.tag-input__tag > span {
  cursor: pointer;
  opacity: 0.75;
}

.tag-input__text {
  border: none;
  outline: none;
  font-size: 0.9em;
  line-height: 50px;
  background: none;
}
</style>

Zerion Mini Shell 1.0