somewhere
This commit is contained in:
Swift
@@ -0,0 +1,370 @@
|
||||
<template>
|
||||
<div>
|
||||
<CustomSubHeader>
|
||||
<CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
|
||||
<el-tag v-if="download._creator && download._creator.first_name" type="primary">
|
||||
<span>ایجاد یا اصلاح کننده: </span>
|
||||
<span> {{ download._creator.first_name + ' ' + download._creator.last_name }} </span>
|
||||
</el-tag>
|
||||
<CButton
|
||||
size="sm"
|
||||
color="primary"
|
||||
class="mr-auto"
|
||||
:to="{ name: 'admin-downloads-page', params: { page: $route.params.page } }"
|
||||
>برگشت به صفحه قبل</CButton
|
||||
>
|
||||
<CButton size="sm" color="success" style="margin-right: 10px" :disabled="pending" @click="upload"
|
||||
>بروزرسانی</CButton
|
||||
>
|
||||
</CustomSubHeader>
|
||||
<CRow>
|
||||
<CCol xl="6">
|
||||
<CCard>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CSelect
|
||||
label="دسته بندی"
|
||||
placeholder="دسته بندی را انتخاب کنید"
|
||||
horizontal
|
||||
:options="mappedCategories(dCategories)"
|
||||
:value.sync="download.category"
|
||||
:description="validation.category ? validation.category.msg : null"
|
||||
:class="validation.category ? 'err' : null"
|
||||
>
|
||||
</CSelect>
|
||||
|
||||
<CInput
|
||||
v-model="download.title"
|
||||
label="عنوان"
|
||||
horizontal
|
||||
:description="validation.title ? validation.title.msg : null"
|
||||
:class="validation.title ? 'err' : null"
|
||||
/>
|
||||
|
||||
<CTextarea
|
||||
v-model="download.short_description"
|
||||
label="توضیح کوتاه"
|
||||
horizontal
|
||||
rows="3"
|
||||
:description="validation.short_description ? validation.short_description.msg : null"
|
||||
:class="validation.short_description ? 'err' : null"
|
||||
/>
|
||||
|
||||
<CRow form class="form-group" :class="validation.description ? 'err' : null">
|
||||
<CCol tag="label" sm="3" class="col-form-label">توضیحات</CCol>
|
||||
<CCol sm="9">
|
||||
<client-only>
|
||||
<ckeditor v-model="download.description" :config="editorConfig"></ckeditor>
|
||||
</client-only>
|
||||
<small v-if="validation.description" class="form-text text-muted w-100">
|
||||
{{ validation.description.msg }}
|
||||
</small>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xl="6">
|
||||
<CCard>
|
||||
<CCardBody>
|
||||
<h1>تصویر:</h1>
|
||||
<el-divider />
|
||||
<CRow>
|
||||
<CCol col="12" class="mb-3">
|
||||
<img :src="download.image" alt="" style="width: 100%; max-width: 500px" />
|
||||
</CCol>
|
||||
<CCol col="1">
|
||||
<span>کاور</span>
|
||||
</CCol>
|
||||
<CCol col="11">
|
||||
<input ref="image" type="file" @change="imagePreview" />
|
||||
</CCol>
|
||||
<CCol col="11" class="mr-auto mt-3">
|
||||
<small v-if="validation.image" class="form-text alert-danger w-100">
|
||||
{{ validation.image.msg }}
|
||||
</small>
|
||||
<small v-else class="form-text text-muted w-100">
|
||||
بهتر است تصویر با فرمت png و پسزمینه شفاف باشد.
|
||||
</small>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xl="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="far fa-plus"></i>
|
||||
<strong>افزودن فایل</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CSelect
|
||||
label="سیستم عامل"
|
||||
placeholder="سیستم عامل را انتخاب کنید"
|
||||
horizontal
|
||||
:options="mappedOS(appOS)"
|
||||
:value.sync="app.os"
|
||||
:description="validation.os ? validation.os.msg : null"
|
||||
:class="validation.os ? 'err' : null"
|
||||
>
|
||||
</CSelect>
|
||||
|
||||
<CInput
|
||||
v-model="app.name"
|
||||
label="نام"
|
||||
horizontal
|
||||
:description="validation.name ? validation.name.msg : null"
|
||||
:class="validation.name ? 'err' : null"
|
||||
/>
|
||||
|
||||
<CRow>
|
||||
<CCol col="3">
|
||||
<span>فایل برنامه</span>
|
||||
</CCol>
|
||||
<CCol col="9">
|
||||
<input ref="file" type="file" />
|
||||
</CCol>
|
||||
<CCol col="9" class="mr-auto mt-3">
|
||||
<small v-if="validation.file" class="form-text alert-danger w-100">
|
||||
{{ validation.file.msg }}
|
||||
</small>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CButton color="success" class="mt-3" :disabled="pending" @click.prevent="addApp">افزودن</CButton>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xl="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fas fa-list"></i>
|
||||
<strong>لیست فایل ها</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem
|
||||
v-for="(item, index) in download.files"
|
||||
:key="item._id"
|
||||
target="_blank"
|
||||
download
|
||||
:href="item.file"
|
||||
:color="index % 2 ? 'light' : 'dark'"
|
||||
>
|
||||
<CRow>
|
||||
<CCol col="11">
|
||||
{{ item.name }}
|
||||
</CCol>
|
||||
<CCol col="1" style="text-align: left">
|
||||
<i class="fas fa-trash-alt delete-btn" @click.prevent="delApp(item._id)"></i>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axiosUploadProcess from '@/mixins/axiosUploadProcess'
|
||||
|
||||
export default {
|
||||
name: 'AddminDownloadDetails',
|
||||
mixins: [axiosUploadProcess],
|
||||
layout: 'admin',
|
||||
async asyncData({ $axios, params, error }) {
|
||||
try {
|
||||
const dCategories = await $axios.get(`/api/public/dCategory`)
|
||||
const download = await $axios.get(`/api/public/downloads/${params.item}`)
|
||||
return {
|
||||
dCategories: dCategories.data,
|
||||
download: download.data
|
||||
}
|
||||
} catch (e) {
|
||||
error({ status: 404, message: 'Page not found' })
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: 'ویراش فایل',
|
||||
dCategories: null,
|
||||
download: null,
|
||||
editorConfig: {
|
||||
language: 'fa',
|
||||
extraPlugins: ['bidi', 'justify']
|
||||
},
|
||||
app: {
|
||||
name: '',
|
||||
os: '',
|
||||
file: ''
|
||||
},
|
||||
appOS: ['windows', 'linux', 'mac', 'android', 'ios'],
|
||||
validation: {},
|
||||
uploading: false,
|
||||
uploadProgress: null,
|
||||
pending: false
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.title
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
upload() {
|
||||
this.pending = true
|
||||
this.validation = {}
|
||||
const data = new FormData()
|
||||
data.append('title', this.download.title)
|
||||
data.append('short_description', this.download.short_description)
|
||||
data.append('description', this.download.description)
|
||||
data.append('category', this.download.category)
|
||||
if (this.$refs.image.files[0]) data.append('image', this.$refs.image.files[0])
|
||||
|
||||
this.$axios
|
||||
.put(`/api/admin/downloads/${this.download._id}`, data, this.axiosConfig)
|
||||
.then(response => {
|
||||
if (response.data) {
|
||||
this.pending = false
|
||||
this.$message({
|
||||
message: 'آیتم با موفقیت بروزرسانی شد.',
|
||||
type: 'success'
|
||||
})
|
||||
this.download = response.data
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
this.pending = false
|
||||
if (error.response.status === 422) {
|
||||
this.validation = error.response.data.validation
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
|
||||
})
|
||||
} else {
|
||||
this.$alert(error.response.data.message, 'خطا', {
|
||||
confirmButtonText: 'باشه'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
addApp() {
|
||||
this.pending = true
|
||||
this.validation = {}
|
||||
|
||||
const data = new FormData()
|
||||
data.append('page_id', this.download._id)
|
||||
data.append('name', this.app.name)
|
||||
data.append('os', this.app.os)
|
||||
data.append('file', this.$refs.file.files[0])
|
||||
|
||||
this.$axios
|
||||
.post(`/api/admin/downloads/file`, data, this.axiosConfig)
|
||||
.then(response => {
|
||||
this.pending = false
|
||||
if (response.data) {
|
||||
this.$message({
|
||||
message: 'آیتم با موفقیت افزوده شد.',
|
||||
type: 'success'
|
||||
})
|
||||
this.app = {
|
||||
name: '',
|
||||
os: '',
|
||||
file: ''
|
||||
}
|
||||
this.$refs.file.value = null
|
||||
this.download.files = response.data
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
this.pending = false
|
||||
if (error.response.status === 422) {
|
||||
this.validation = error.response.data.validation
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
|
||||
})
|
||||
} else {
|
||||
this.$alert(error.response.data.message, 'خطا', {
|
||||
confirmButtonText: 'باشه'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
delApp(id) {
|
||||
this.$confirm('این مورد حذف شود؟', 'هشدار', {
|
||||
confirmButtonText: 'بله',
|
||||
cancelButtonText: 'لغو',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
this.$axios
|
||||
.delete(`/api/admin/downloads/file/${id}`)
|
||||
.then(response => {
|
||||
this.download.files = this.download.files.filter(item => 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: 'عملیات لغو شد'
|
||||
})
|
||||
})
|
||||
},
|
||||
imagePreview(event) {
|
||||
this.download.image = URL.createObjectURL(event.target.files[0])
|
||||
},
|
||||
mappedCategories(arr) {
|
||||
return arr.map(item => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item._id
|
||||
}
|
||||
})
|
||||
},
|
||||
mappedOS(arr) {
|
||||
return arr.map(item => {
|
||||
return {
|
||||
label: item,
|
||||
value: item
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.delete-btn {
|
||||
transition: 0.1s;
|
||||
-webkit-transition: 0.1s;
|
||||
-moz-transition: 0.1s;
|
||||
-ms-transition: 0.1s;
|
||||
-o-transition: 0.1s;
|
||||
padding: 5px 10px;
|
||||
display: inline-block;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
|
||||
&:hover {
|
||||
color: red;
|
||||
border-color: red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div>
|
||||
<CustomSubHeader>
|
||||
<CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
|
||||
<CButton size="sm" color="success" :to="{ name: 'admin-downloads-new' }" class="mr-auto">افزودن</CButton>
|
||||
</CustomSubHeader>
|
||||
|
||||
<CCard>
|
||||
<CCardHeader :dir="paginate ? 'ltr' : 'rtl'" :style="{ textAlign: paginate ? 'center' : 'right' }">
|
||||
<el-pagination
|
||||
v-if="paginate"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:current-page="Number($route.params.page)"
|
||||
:page-count="Number(downloads.totalPages)"
|
||||
@current-change="pageNumber"
|
||||
>
|
||||
</el-pagination>
|
||||
|
||||
<slot v-else name="header">
|
||||
<CIcon name="cil-grid" />
|
||||
{{ list_title }}
|
||||
</slot>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<el-table :data="downloads.docs" style="width: 100%">
|
||||
<el-table-column type="index" label="#"> </el-table-column>
|
||||
|
||||
<el-table-column label="کاور" width="170">
|
||||
<template slot-scope="scope">
|
||||
<el-image style="width: 100%; height: 100%" :src="scope.row.image" fit="fit"> </el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="دسته بندی">
|
||||
<template slot-scope="scope">
|
||||
{{ categoryName(scope.row.category) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="title" label="عنوان" width=""> </el-table-column>
|
||||
|
||||
<el-table-column prop="short_description" label="توضیح کوتاه" width=""> </el-table-column>
|
||||
|
||||
<el-table-column label="ویرایش" width="105" align="left">
|
||||
<template slot-scope="scope">
|
||||
<CButton
|
||||
:key="scope.row._id"
|
||||
color="warning"
|
||||
variant="outline"
|
||||
:to="`/admin/downloads/${$route.params.page}/${scope.row._id}`"
|
||||
>
|
||||
<i class="fal fa-pencil"></i>
|
||||
</CButton>
|
||||
<CButton color="danger" variant="outline" @click="del(scope.row._id)">
|
||||
<i class="fal fa-trash-alt"></i>
|
||||
</CButton>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AddminDownloadsList',
|
||||
layout: 'admin',
|
||||
async asyncData({ $axios, params, error }) {
|
||||
try {
|
||||
const dCategories = await $axios.get(`/api/public/dCategory`)
|
||||
const downloads = await $axios.get(`/api/public/downloads/page/all/${params.page}`)
|
||||
return {
|
||||
dCategories: dCategories.data,
|
||||
downloads: downloads.data
|
||||
}
|
||||
} catch (err) {
|
||||
error({ status: 404, message: 'There is a problem here' })
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: 'دانلود ها',
|
||||
list_title: 'لیست',
|
||||
dCategories: null,
|
||||
downloads: null
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.title
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
paginate() {
|
||||
return this.downloads.totalPages > 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
categoryName(id) {
|
||||
return this.dCategories.filter(item => item._id === id)[0].name
|
||||
},
|
||||
pageNumber(val) {
|
||||
this.$router.push({ name: 'admin-downloads-page', params: { page: val } })
|
||||
},
|
||||
del(id) {
|
||||
this.$confirm('این مورد حذف شود؟', 'هشدار', {
|
||||
confirmButtonText: 'بله',
|
||||
cancelButtonText: 'لغو',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
this.$axios
|
||||
.delete(`/api/admin/downloads/${id}`)
|
||||
.then(response => {
|
||||
this.downloads.docs = this.downloads.docs.filter(item => 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: 'عملیات لغو شد'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user