Files
arakrail/pages/admin/projects/index.vue
T
2021-12-31 17:01:17 +03:30

130 lines
3.4 KiB
Vue

<template>
<div class="container-fluid">
<div class="row">
<admin-title-bar :title="title">
<nuxt-link :to="{name: 'admin-projects-new'}">
<el-button type="success">جدید</el-button>
</nuxt-link>
</admin-title-bar>
<div class="col-12">
<admin-panel>
<el-table
:data="projects"
style="width: 100%">
<el-table-column
type="index"
label="#">
</el-table-column>
<el-table-column
label="تصویر"
width="230">
<template slot-scope="scope" v-if="scope.row.images[0]">
<el-image
style="width: 100%; height: 100%"
:src="scope.row.images[0].image"
fit="fit">
</el-image>
</template>
</el-table-column>
<el-table-column
prop="project_details.fa.name"
label="نام"
width="">
</el-table-column>
<el-table-column
prop="date"
label="تاریخ اجرا"
width="">
<template slot-scope="scope">
{{ jDate(scope.row.date) }}
</template>
</el-table-column>
<el-table-column
label="ویرایش"
width="150"
align="left">
<template slot-scope="scope">
<el-button type="warning" plain icon="el-icon-edit" @click="edit(scope.row._id)"></el-button>
<el-button type="danger" plain icon="el-icon-delete" @click="del(scope.row._id)"></el-button>
</template>
</el-table-column>
</el-table>
</admin-panel>
</div>
</div>
</div>
</template>
<script>
import moment from "moment-jalaali"
export default {
data() {
return {
title: 'لیست پروژه ها',
projects: null
}
},
head() {
return {
title: this.title,
}
},
methods: {
jDate(date) {
return moment(date).format('jYYYY/jMM/jDD')
},
edit(id) {
this.$router.push(`/admin/projects/${id}`)
},
del(id) {
this.$confirm('این پروژه حذف شود؟', 'هشدار', {
confirmButtonText: 'بله',
cancelButtonText: 'لغو',
type: 'warning'
}).then(() => {
this.$axios.delete(`/api/private/projects/${id}`)
.then(response => {
this.projects = this.projects.filter(item => {
return item._id !== id
})
this.$message({
type: 'success',
message: 'آیتم حذف شد'
})
})
.catch(err => {
this.$message({
type: 'error',
message: err.response.data.message
})
})
}).catch(() => {
this.$message({
type: 'warning',
message: 'عملیات لغو شد'
});
});
}
},
layout: 'admin',
async asyncData({$axios, store, error}) {
try {
let projects = await $axios.get(`/api/public/projects`)
return {
projects: projects.data
}
} catch (e) {
error({status: 404, message: 'There is a problem here'})
}
}
}
</script>