%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/ugotscom/.trash/laravel/resources/js/components/
Upload File :
Create Path :
Current File : /home/ugotscom/.trash/laravel/resources/js/components/servicetickets.vue

<template>

    <div class="container">

      <div class="row">
        <div class="col">

            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Total Clients</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">  <p></p></div>
                 <router-link @click="say()">click me</router-link>
                </div>
            </div>
        </div>
        <div class="col">

            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Clients</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">220</div>
                </div>
            </div>
        </div>
        <div class="col">

            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Current Projects</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">12</div>
                </div>
            </div>
        </div>
        <div class="col">

            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Leads</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">220</div>
                </div>
            </div>
        </div>
    </div>
      <div class="row">
          <div class="col-md-9">
                 <input type="text" class="form-control" @input="isTyping = true" v-model="searchQuery" placeholder="Search Client">

          </div>
          <div class="col">
 <b-button v-b-toggle.add-client variant="primary">Add Ticket</b-button>
            <b-button v-b-toggle.add-client2 variant="primary">Add 2 </b-button>
            <b-sidebar id="add-client" class="w-50" title="Add Client" right shadow backdrop backdrop-variant="dark">
        
            <addserviceticket />
        
            </b-sidebar>
           <b-sidebar id="add-client2" class="w-50" title="Add Client" right shadow backdrop backdrop-variant="dark">
        
            <h2>Hello Whats ip</h2>
        
            </b-sidebar>
          </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-md-12">
           
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">Ticket Id</th>
      <th scope="col">Client Id</th>
      <th scope="col">Ticket</th>
      <th scope="col">Priority</th>
      <th scope="col">status</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
  <tbody>
      <tr v-for ="ticket in tickets.data" :key="ticket.ticket_id">
      <th scope="row">{{ticket.ticket_id}}</th>
      <td>{{ticket.name}}</td>
      <td>{{ticket.ticket}}</td>
      <td>{{ticket.Priority}}</td>
      <td>{{ticket.status}}</td>
     
      <td><router-link v-bind:to="'/viewclient/'+ticket.ticket_id">View</router-link></td>
       </tr>
 
  
  </tbody>

</table>
    <pagination :data="tickets" @pagination-change-page="getResults"></pagination>

 
             </div>
        </div>
    </div>

</template>
   
<script>


    import addserviceticket from './addserviceticket'

    export default {

           data(){
            return {
              tickets:{},
              variant: 'dark',
              tasks:[],
              searchQuery:'',
              isTyping: false,
              isLoading: false,
              
              
              
            }
        },
         components: {
    addserviceticket
  },
       
          watch: {
    searchQuery: _.debounce(function() {
      this.isTyping = false;
    }, 500),
    isTyping: function(value) {
      if (!value) {
        this.searchUser(this.searchQuery);
      }
    }
  },
        methods:{
        searchUser: function(searchQuery) {
    	this.isLoading = true;
        axios.get('servicetickets/searchquery?q=' + searchQuery)
        .then(response => {
        	this.isLoading = false;
          this.tickets = response.data;
        });
        },
            getResults:function(page = 1) {
			axios.get('servicetickets?page=' + page)
				.then(response => {
					this.tickets = response.data;
				});
		        },
            loadtickets:function(){
             axios.get('/servicetickets').then(({data})=> (this.tickets = data));
            },
             loadtotalcount(){
                axios.get('/client/totalcount') .then(response => {
                this.tasks = response.data
             })
            }, 
            getPosts:function () {
                axios.get('/servicetickets').then(function(response){
                    this.rows = response.data;
                }.bind(this));
            },
           
        },
    
        created: function(){
            this.loadtickets(),
            this.loadtotalcount()
          
         
        },
       
    }
</script>
<style scoped>
.b-sidebar{
    width:500px !important;
}

</style>

Zerion Mini Shell 1.0