BlueFire/frontend/src/components/JobListing.vue

<template> 
            <div class="job-listing">
            <div class="categories">
                <div class="category">
                    <label>Countries</label>
                    <select class="bluefire-selector" id="selHeaderCountry" :value="countryId" @change="changeCountry">
                        <option value="0">All Countries</option>
                        <option v-for="country in $store.state.countries" :key="country.CountryID" :value="country.CountryID">{{ country.CountryName }}</option>
                    </select>
                </div>
                <div class="category">
                    <label>Cities</label>
                    <select class="bluefire-selector" id="selHeaderCity" :value="cityId" @change="changeCity">
                        <option value="0">All Cities</option>
                        <option v-for="city in $store.state.cities" :key="city.CityID" :value="city.CityID">{{ city.CityName }}</option>
                    </select>
                </div>
            </div>
            <div class="listing" >
                <div class="job-item" v-for="(job, i) in jobs" :key="job.JobID">
                    <span class="job-no">{{ i+1 }}</span>
                    <h2 class="job-title"><router-link :to="'/job/'+job.JobID">{{ job.JobName }}</router-link></h2>
                    <div class="job-location">
                        <div class="country">
                            <h2>Country</h2>
                            <p>{{ job.CountryName }}</p>
                        </div>
                        <div class="city">
                            <h2>City</h2>
                            <p>{{ job.CityName }}</p>
                        </div>
                        <div class="status" v-if="admin !== false">
                            <h2>Status</h2>
                            <p>{{ job.IsOpen == 1 ? "Open" : "Closed" }}</p>
                        </div>
                    </div>
                    <a class="button plain bookmark" v-if="admin === false" @click="bookmarkJob(job)">
                        <img src="../assets/images/bookmark.svg" >
                    </a>
                    <div class="row" v-if="admin !== false"> 
                        <a class="button plain" @click="editJob(job)">
                            <span class="material-icons">edit</span>
                        </a>
                        <a class="button plain">
                            <span class="material-icons" @click="deleteJob(job)">delete</span>
                        </a>
                    </div>
                </div>
                <!-- <div class="pagination">
                    <router-link class="page-link" to="./?page=1">1</router-link>
                    <router-link class="page-link" to="./?page=2">2</router-link>
                    <router-link class="page-link" to="./?page=3">3</router-link>
                    <router-link class="next" to="./?page=2"></router-link>
                </div> -->
            </div>
        </div>


</template>

<script>
import API from '../lib/API';

import { mapState } from 'vuex';

export default {
    props: {
        paginate: {
            default: false,
        },
        admin: {
            default: false,
        },
        bookmark: {
            default: false,
        }
    },
    data() {
        return {
            jobs_orig: [],
        }
    },
    computed: {
        ...mapState(['countryId','cityId']),
        jobs() {
            var result = this.jobs_orig;
            if(this.countryId != 0) {
                result = result.filter(x => x.CountryID == this.countryId);
            }
            if(this.cityId != 0) {
                result = result.filter(x => x.CityID == this.cityId);
            }
            return result;
        }
    },
    methods: { 
        changeCountry(e) {
          this.$store.commit('setCountryId',e.target.value);
        },
        changeCity(e) {
            this.$store.commit('setCityId',e.target.value);
        },
        editJob(job) {
            this.$router.push({
                name: 'admin-job-edit',
                params: {
                    id: job.JobID,
                }
            });
        },
        deleteJob(job) {
            // Jobs with applicants cannot be deleted
            if(job.ApplicantCount == 0) {
                return;
            }
            var formData = new FormData();
            formData.append("id",job.JobID);
            API.post("/deleteJob",formData, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                }
            })
            .then(() => {
                this.jobs_orig = this.jobs.filter(x => x.JobID != job.JobID)
            })
        },
        bookmarkJob(job) {
            if(this.bookmark === false ) {
                // Not in bookmark page, add to bookmark
                var formData = new FormData();
                formData.append("id",job.JobID);
                formData.append("userId",this.$store.state.apiKey);
                API.post("/insertBookmark",formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    }
                })
            } else {
                // In bookmark page, delete bookmark
                var formDataDelete = new FormData();
                formDataDelete.append("id",job.BookmarkID);
                API.post("/deleteBookmark",formDataDelete, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    }
                }).then(() =>{
                    this.jobs_orig = this.jobs_orig.filter(x => x.JobID != job.JobID);
                }).catch((err) => console.log(err));
            }
        }
    },
    mounted() {
        var APIpromise = null;
        if(this.bookmark !== false) {
            var formData = new FormData();
            formData.append("id",this.$store.state.apiKey);
            APIpromise = API.post("/getBookmark",formData,{
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            });
        } else {
            APIpromise = API.get("/getListJob");
        }
        if(APIpromise != null) {
            APIpromise.then((response) => {
                this.jobs_orig = response.data;
            });
        }
    },
}
</script>
<style>
.job-listing {
    display: flex;
    flex-direction: row;
}
.job-listing .categories {
    width: 25%;
}
.job-listing .listing {
    width: 75%;
}
.categories .category {
    background-color: rgba(242, 242, 242, 1);
    padding: 1.5rem;
    box-shadow: 5px 5px 14px rgba(0, 0, 0, 0.3);
    margin: 1rem 0.5rem;
}
.category label {
    font-size: 1.5rem;
    font-weight: bold;
    color: #322b6b;
}
.category .bluefire-selector {
    width: 100%;
    font-weight: bold;
    margin-top: 0.5rem;
}
.listing .job-item {
    background-color: rgba(242, 242, 242, 1);
    padding: 0.5rem 1.5rem;
    box-shadow: 5px 5px 14px rgba(0, 0, 0, 0.3);
    margin: 1rem 0.5rem;
    display: flex;
    flex-direction: row;
    font-size: 1rem;
    font-weight: bold;
}
.job-item .job-no {
    font-size: 1.5rem;
    color: #322b6b;
    margin-right: 1rem;
}
.job-item .job-title {
    font-size: 1.5rem;
    color: #333333;
    margin: 0;
}
.job-item .job-location {
    display: flex;
    flex-direction: row;
    margin-left: auto;
}
.job-item .job-location div {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.25rem;
    font-weight: normal;
    margin: 0.5rem 3rem;
}
.job-item .job-location h2 {
    font-size: 1.125rem;
    color: #322b6b;
    margin: 0 0 0.25rem 0 ;
}
.job-item .job-location p {
    font-size: 1.125rem;
    margin: 0;   
}
.job-item .bookmark img {
    height: 1.5rem;
    margin: 0.5rem 0;
}
.pagination {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
}
.pagination .page-link {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 0.75rem;
    color: rgba(60,53,113,1);
}
.pagination .next {
    color: #444444;
}
</style>