Files
asan-service/pages/admin/contact-us/index.vue
T
2023-08-17 13:05:51 +03:30

117 lines
3.1 KiB
Vue

<template>
<div>
<CustomSubHeader>
<CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
<!-- <CButton size="sm" color="success" :to="{name: 'admin-FAQ-new'}" class="mr-auto">افزودن</CButton>-->
</CustomSubHeader>
<CRow>
<CCol col="col">
<CCard>
<CCardHeader>
<slot name="header">
<i class="fal fa-filter"></i>
<span>فیلتر</span>
</slot>
</CCardHeader>
<CCardBody>
<CButtonGroup>
<CButton color="primary" :class="filter === 'all' && 'selected'" @click="filter = 'all'">همه</CButton>
<CButton color="warning" :class="!filter && 'selected'" @click="filter = false">خوانده نشده</CButton>
<CButton color="success" :class="filter === true && 'selected'" @click="filter = true"
>خوانده شده</CButton
>
</CButtonGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CCard>
<CCardHeader>
<slot name="header">
<i class="fal fa-bars"></i>
<span>{{ list_title }}</span>
</slot>
</CCardHeader>
<CCardBody>
<el-table :data="filtered" :row-class-name="readStatus" style="width: 100%">
<el-table-column type="index" label="#"> </el-table-column>
<el-table-column prop="full_name" label="نام و نام خانوادگی" width=""> </el-table-column>
<el-table-column prop="email" label="ایمیل" width=""> </el-table-column>
<el-table-column label="مشاهده" width="70" align="left">
<template slot-scope="scope">
<CButton
:key="scope.row._id"
color="success"
variant="outline"
:to="`/admin/contact-us/${scope.row._id}`"
>
<i class="far fa-eye"></i>
</CButton>
</template>
</el-table-column>
</el-table>
</CCardBody>
</CCard>
</div>
</template>
<script>
export default {
name: 'AdminContactUsMsgList',
layout: 'admin',
async asyncData({ $axios, error }) {
try {
const messages = await $axios.get(`/api/admin/contact`)
return {
messages: messages.data
}
} catch (e) {
error({ status: 404, message: 'There is a problem here' })
}
},
data() {
return {
title: 'پیام ها',
list_title: 'لیست',
messages: null,
filter: 'all'
}
},
head() {
return {
title: this.title
}
},
computed: {
filtered() {
if (this.filter === 'all') return this.messages
else return this.messages.filter(item => item.read === this.filter)
}
},
methods: {
readStatus({ row, rowIndex }) {
return row.read ? null : 'unread'
}
}
}
</script>
<style>
.unread {
background: rgb(255, 173, 0, 0.12) !important;
}
.selected {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
z-index: 2;
}
</style>