update chip

app/Http/Controllers/AppController.php

@@ -12,7 +12,7 @@ class AppController extends Controller
     }
 
     public function show() {
-        $jobs = Job::select('jobs.id', 'jobs.job_title', 'companies.imageCompany', 'companies.company_name', 'companies.amphoe', 'companies.province','jobs.created_at')
+        $jobs = Job::select('jobs.id', 'jobs.job_title', 'jobs.job_type', 'jobs.department', 'jobs.num', 'companies.bts', 'companies.mrt', 'companies.arl', 'companies.imageCompany', 'companies.company_name', 'companies.amphoe', 'companies.province','jobs.created_at')
             ->join('companies', 'jobs.user_id', 'companies.user_id')
             ->orderBy('jobs.created_at', 'desc')
             ->get();

resources/js/views/Managejob.vue

@@ -63,6 +63,8 @@ export default {
     deleteJob(id) {
       axios.delete(`/api/jobs/${id}`)
         .then(res => {
+          const i = this.items.findIndex(x => x.job_id == id)
+          this.items.splice(i, 1);
           this.getData()
         })
         .catch(err => {console.log(err.response)})

resources/js/views/ShowJob.vue

 <template>
   <div>
     <v-layout row wrap fill-height justify-center>
-      <v-flex xs12 sm10 offset-sm-1>
+      <v-flex xs12 sm12>
         <v-layout row wrap justify-center>
-          <v-flex xs12 sm4 class="pr-2">
+          <v-flex xs12 sm3 class="pr-2">
             <v-flex xs12 sm12 class="white div-card pa-4">
               <v-flex xs12 sm12 class="mb-3">
                 <span class="title font-weight-bold ">เงื่อนไขการค้นหา</span>
@@ -11,41 +11,52 @@
               </v-flex>
               <v-flex xs12 sm12 class="">
                <label class="subheading font-weight-medium pb-1">ค้นหาโดยใช้คำหลัก</label>
+                <v-form @submit.prevent="searchKeyword()">
                 <v-text-field
                   single-line
                   label="ค้นหาโดยใช้คำหลัก"
                   class="fix-height"
+                  v-model="search"
                   outline
                 ></v-text-field>
+               </v-form>
               </v-flex>
               <v-flex xs12 sm12 class="">
                <label class="subheading font-weight-medium pb-1">ค้นหาตามประเภทงาน</label>
                <v-select
+                @change="change"
                 single-line
                 label="เลือกประเภทงาน"
+                v-model="select"
+                :items="jobs_type"
                 class="fix-height"
                 outline
                ></v-select>
               </v-flex>
               <v-flex xs12 sm12 class="">
                <label class="subheading font-weight-medium pb-1">ค้นหาโดยชื่อบริษัท</label>
+                <v-form @submit.prevent="searchCompany">
                   <v-text-field
                     single-line
+                    v-model="company"
                     label="พิมพ์ชื่อบริษัท"
                     class="fix-height"
                     outline
                   ></v-text-field>
+                </v-form>
               </v-flex>
               <v-flex xs12 sm12 class="mt-2">
                 <span class="subheading font-weight-bold ">BTS</span>
               </v-flex>
               <v-checkbox
-                v-model="checkbox"
+                v-model="chips.chip4"
+                @change="fillter"
                 :label="`BTS สายสีลม`"
                 class="height-chkbox"
               ></v-checkbox>
               <v-checkbox
-                v-model="checkbox"
+                v-model="chips.chip5"
+                @change="fillter"
                 :label="`BTS สายสุขุมวิท`"
                 class="height-chkbox"
               ></v-checkbox>
@@ -53,12 +64,14 @@
                 <span class="subheading font-weight-bold ">MRT</span>
               </v-flex>
               <v-checkbox
-                v-model="checkbox"
+                v-model="chips.chip6"
+                @change="fillter"
                 :label="`MRT สายน้ำเงิน`"
                 class="height-chkbox"
               ></v-checkbox>
               <v-checkbox
-                v-model="checkbox"
+                v-model="chips.chip7"
+                @change="fillter"
                 :label="`MRT สายสีม่วง`"
                 class="height-chkbox"
               ></v-checkbox>
@@ -66,39 +79,54 @@
                 <span class="subheading font-weight-bold ">ARL</span>
               </v-flex>
               <v-checkbox
-                v-model="checkbox"
                 :label="`ARL`"
+                v-model="chips.chip8"
+                @change="fillter"
                 class="height-chkbox"
               ></v-checkbox>
               
               
             </v-flex>
           </v-flex>
-          <v-flex xs12 sm8 class="pl-2">
-            <v-flex xs12 sm12 class="">
-              <span class="caption grey--text">แสดงผล 1 - 20 ตำแหน่งงาน จากทั้งหมด 89 งาน</span>
+          <v-flex xs12 sm9 class="pl-2">
+            <v-flex xs12 sm12 class="white div-card mb-2 px-3 py-2">
+              <span class="caption grey--text">แสดงผล {{ from }} - {{ to }} ตำแหน่งงาน จากทั้งหมด {{ jobs.length }} งาน</span>
+              <div v-if="chkChip">
+              กรองตาม: 
+              <v-chip @blur="fillter" v-model="chips.chip1" small close>คีย์เวิร์ด: {{ textChip.chip1 }}</v-chip>
+              <v-chip @blur="selectTypeJob" v-model="chips.chip2" small close>ประเภทงาน: {{ textChip.chip2 }}</v-chip>
+              <v-chip @blur="fillter" v-model="chips.chip3" small close>บริษัท: {{ textChip.chip3 }}</v-chip>
+              <v-chip @blur="fillter" v-model="chips.chip4" small close>BTS สายสีลม</v-chip>
+              <v-chip @blur="fillter" v-model="chips.chip5" small close>BTS สายสุขุมวิท</v-chip>
+              <v-chip @blur="fillter" v-model="chips.chip6" small close>MRT สายน้ำเงิน</v-chip>
+              <v-chip @blur="fillter" v-model="chips.chip7" small close>MRT สายสีม่วง</v-chip>
+              <v-chip @blur="fillter" v-model="chips.chip8" small close>ARL</v-chip>
+            </div>
             </v-flex>            
-            <div v-for="job in jobs" :key="job.id" class="mb-3">
+            <div v-for="job in jobs.slice((pagination.page-1)*pagination.rowsPerPage, pagination.page*pagination.rowsPerPage)" :key="job.id" class="mb-3">
               <v-flex xs12 sm12 class="white div-card">
                 <v-layout row wrap class="pa-2">
-                  <v-flex xs2 sm2>
+                  <v-flex xs3 sm2 class="text-sm-center text-xs-center">
                     <img class="" width="90" height="90" :src="job.imageCompany" alt="">
                   </v-flex>
-                  <v-flex xs10 sm7 class="pa-2">
+                  <v-flex xs9 sm8 class="pa-2">
                     <v-flex xs12 sm12>
-                      <label class="subheading font-weight-bold indigo--text ">{{ job.job_title }}</label>
+                      <label class="title font-weight-black indigo--text ">{{ job.job_title }}</label>
                     </v-flex>
                     <v-flex xs12 sm12 class="mb-1">
-                      <label class="subheading font-weight-medium black--text ">{{ job.company_name }}</label>
+                      <label class="subheading font-weight-medium black--text">{{ job.company_name }}</label>
                     </v-flex>
                     <v-flex xs12 sm12>
                       <label class="body-2 grey--text ">{{ job.amphoe }}, {{ job.province }} </label>
                     </v-flex>                   
                   </v-flex>
-                  <v-flex xs12 sm3>
+                  <v-flex xs12 sm2>
                     <v-layout row wrap justify-end>
                       <v-btn color="deep-orange " dark small depressed class="body-2">สมัครงานนี้</v-btn>
                     </v-layout>
+                    <v-layout row wrap justify-end class="px-2">
+                      <label class="font-weight-bold">{{ job.num ?  job.num + ' อัตรา' : '' }}</label>
+                    </v-layout>                  
                   </v-flex>                 
                 </v-layout>
                 <v-flex xs12 sm12 class="detail-bottom">
@@ -118,13 +146,16 @@
                 circle
                 v-model="pagination.page"
                 :length="pages"
+                :total-visible="10"
+                v-if="jobs.length > 0"
               ></v-pagination>
+              <span v-else>'ไม่มีข้อมูล'</span>
             </v-flex>
           </v-flex>
         </v-layout>
       </v-flex>
     </v-layout>
-      
+      {{chkChip}}
   </div>
 </template>
 
@@ -133,15 +164,191 @@ export default {
   data () {
     return {
       jobs: [],
+      jobs_data: [],
+      jobs_type: [],
       pagination: {
-        page: 0,
+        page: 1,
         rowsPerPage: 10
-      }
+      },
+      search: '',
+      select: '',
+      company: '',
+      chips: {
+        chip1: false,
+        chip2: false,
+        chip3: false,
+        chip4: false,
+        chip5: false,
+        chip6: false,
+        chip7: false,
+        chip8: false
+      },
+      textChip: {
+        chip1: '',
+        chip2: '',
+        chip3: ''
+      },
+      btsSilom: [
+        'บางหว้า',
+        'วุฒากาศ',
+        'ตลาดพลู',
+        'โพธิ์นิมิตร',
+        'วงเวียนใหญ่',
+        'ธนบุรี',
+        'สะพานตากสิน',
+        'สุรศักดิ์',
+        'ช่องนนทรี',
+        'ศาลาแดง',
+        'ราชดำริ',
+        'สยาม',
+        'สนามกีฬาแห่งชาติ'
+      ],
+      btsSukumwit: [
+        'หมอชิต',
+        'สะพานควาย',
+        'อารีย์',
+        'สนามเป้า',
+        'อนุสาวรีย์ชัยสมรภูมิ',
+        'พญาไท',
+        'ราชเทวี',
+        'สยาม',
+        'ชิดลม',
+        'เพลินจิต',
+        'นานา',
+        'อโศก',
+        'พร้อมพงษ์',
+        'ทองหล่อ',
+        'เอกมัย',
+        'พระโขนง',
+        'อ่อนนุช',
+        'บางจาก',
+        'ปุณณวิถี',
+        'อุดมสุข',
+        'บางนา',
+        'แบริ่ง'
+      ],
+      mrtBlue: [
+        'หัวลำโพง',
+        'สามย่าน',
+        'สีลม',
+        'ลุมพินี',
+        'คลองเตย',
+        'ศูนย์การประชุมแห่งชาติสิริกิติ์',
+        'สุขุมวิท',
+        'เพชรบุรี',
+        'พระราม 9',
+        'ศูนย์วัฒนธรรมแห่งประเทศไทย',
+        'ห้วยขวาง',
+        'สุทธิสาร',
+        'รัชดาภิเษก',
+        'ลาดพร้าว',
+        'พหลโยธิน',
+        'สวนจตุจักร',
+        'กำแพงเพชร',
+        'บางซื่อ',
+        'เตาปูน'
+      ],
+      mrtViolet: [
+        'คลองบางไผ่',
+        'ตลาดบางใหญ่',
+        'สามแยกบางใหญ่',
+        'บางพลู',
+        'บางรักใหญ่',
+        'บางรักน้อยท่าอิฐ',
+        'ไทรม้า',
+        'สะพานพระนั่งเกล้า',
+        'แยกนนทบุรี 1',
+        'บางกระสอ',
+        'ศูนย์ราชการนนทบุรี',
+        'กระทรวงสาธารณสุข',
+        'แยกติวานนท์',
+        'วงศ์สว่าง',
+        'บางซ่อน',
+        'เตาปูน'
+      ]
     }
   },
   computed: {
+    chkChip() {
+      return Object.values(this.chips).includes(true);
+    },
     pages () {
-      return this.pagination.rowsPerPage ? Math.ceil(this.jobs.length / this.pagination.rowsPerPage) : 0
+      return Math.ceil(this.jobs.length / this.pagination.rowsPerPage);
+    },
+    from () {
+      if (this.jobs.length) {
+        return ((this.pagination.page-1)*this.pagination.rowsPerPage) + 1
+      } else {
+        return 0
+      }
+    },
+    to () {
+      if (this.jobs.length) {
+        const t = this.jobs.length-(this.pagination.page-1)*this.pagination.rowsPerPage;
+        if (t < 10) {
+          return this.pagination.rowsPerPage*(this.pagination.page - 1) + t;
+        } else {
+          return this.pagination.page*this.pagination.rowsPerPage
+        }
+      } else {
+        return 0
+      }
+    }
+  },
+  methods: {
+    searchKeyword () {
+      if (this.search !== '') {
+        this.textChip.chip1 = this.search
+        this.chips.chip1 = true
+      } else {
+        this.chips.chip1 = false
+      }
+      this.fillter()
+    },
+    change () {
+      this.textChip.chip2 = this.select
+      this.chips.chip2 = true
+      this.fillter()
+    },
+    searchCompany () {
+      if (this.company !== '') {
+        this.textChip.chip3 = this.company
+        this.chips.chip3 = true;
+      } else {
+        this.chips.chip3 = false
+      }
+      this.fillter()
+    },
+    selectTypeJob () {
+      this.chips.chip2 = false
+      this.fillter()
+    },
+    fillter () {
+      this.jobs = this.jobs_data
+      if (this.chips.chip1) {
+        this.jobs = this.jobs.filter(x => x.job_title.includes(this.textChip.chip1))
+      }
+      if (this.chips.chip2) {
+        this.jobs = this.jobs.filter(x => x.job_type === this.select)
+      }
+      if (this.chips.chip3) {
+        this.jobs = this.jobs.filter(x => x.company_name.includes(this.textChip.chip3))
+      }
+      if (this.chips.chip4) {
+        this.jobs = this.jobs.filter(x => this.btsSilom.includes(x.bts))
+      }
+      if (this.chips.chip5) {
+        this.jobs = this.jobs.filter(x => this.btsSukumwit.includes(x.bts))
+      }
+      if (this.chips.chip6) {
+        this.jobs = this.jobs.filter(x => this.mrtBlue.includes(x.mrt))
+      }
+      if (this.chips.chip7) {
+        this.jobs = this.jobs.filter(x => this.mrtViolet.includes(x.mrt))
+      }
+      if (this.chips.chip8) {
+        this.jobs = this.jobs.filter(x => x.arl !== null)
+      }
     }
   },
   beforeMount() {
@@ -149,6 +356,8 @@ export default {
       .then(res => {
         console.log(res.data.jobs)
         this.jobs = res.data.jobs
+        this.jobs_data = res.data.jobs
+        this.jobs_type = this.jobs.map(x => x.job_type).filter((item, pos, self) => {return self.indexOf(item) == pos})
       })
       .catch(err => {console.log(err.response)})
   }