Skip to content

C
CO-OP Search
Commit 60590055 authored by Kittisak Maneewong's avatar Kittisak Maneewong
Browse files
Options

update chip

parent ce84048f
Hide whitespace changes
Inline Side-by-side
Showing with 245 additions and 34 deletions
app/Http/Controllers/AppController.php
View file @ 60590055
......@@ -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();
......
public/js/app.js
View file @ 60590055
This source diff could not be displayed because it is too large. You can view the blob instead.
resources/js/views/Managejob.vue
View file @ 60590055
......@@ -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
View file @ 60590055
<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-text-field
single-line
label="ค้นหาโดยใช้คำหลัก"
class="fix-height"
outline
></v-text-field>
<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-text-field
single-line
label="พิมพ์ชื่อบริษัท"
class="fix-height"
outline
></v-text-field>
<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,38 +79,53 @@
<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>
<div v-for="job in jobs" :key="job.id" class="mb-3">
<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.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>
......@@ -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)})
}
......
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