danak/arakrail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

handle all not found errors

Browse Source
This commit is contained in:
Amir Mohamadi
2021-12-31 17:01:17 +03:30
parent 5c07791225
commit 064d642b7e
47 changed files with 3386 additions and 3238 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/admin/slider/_slide.vue
+126 -124
View File
@@ -1,131 +1,133 @@
<template>
<div class="container-fluid">
<div class="row">
<admin-title-bar :title="title">
<el-button @click="$router.back()" type="primary">برگشت به صفحه قبل</el-button>
<el-button type="success" @click="upload">بروز رسانی</el-button>
</admin-title-bar>
<div class="col-6">
<admin-panel>
<el-form>
<el-form-item prop="title" :class="validation.fa_title ? 'is-error' : ''" label="عنوان فارسی">
<el-input v-model="formData.slider_details.fa.title"></el-input>
<p class="err" v-if="validation.fa_title">{{validation.fa_title.msg}}</p>
</el-form-item>
<el-form-item prop="title" :class="validation.en_title ? 'is-error' : ''" label="عنوان انگلیسی">
<el-input v-model="formData.slider_details.en.title"></el-input>
<p class="err" v-if="validation.en_title">{{validation.en_title.msg}}</p>
</el-form-item>
<el-form-item prop="title" :class="validation.fa_caption ? 'is-error' : ''" label="توضیحات فارسی">
<el-input v-model="formData.slider_details.fa.caption"></el-input>
<p class="err" v-if="validation.fa_caption">{{validation.fa_caption.msg}}</p>
</el-form-item>
<el-form-item prop="title" :class="validation.en_caption ? 'is-error' : ''" label="توضیحات انگلیسی">
<el-input v-model="formData.slider_details.en.caption"></el-input>
<p class="err" v-if="validation.en_caption">{{validation.en_caption.msg}}</p>
</el-form-item>
</el-form>
</admin-panel>
</div>
<div class="col-6">
<admin-panel>
<h2 class="secondTitle">تصویر</h2>
<el-divider></el-divider>
<img :src="formData.image" alt="" style="width: 100%">
<input type="file" ref="image" @change="preview">
<p class="err" v-if="validation.image">{{validation.image.msg}}</p>
</admin-panel>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<admin-title-bar :title="title">
<el-button @click="$router.back()" type="primary">برگشت به صفحه قبل</el-button>
<el-button type="success" @click="upload">بروز رسانی</el-button>
</admin-title-bar>
<div class="col-6">
<admin-panel>
<el-form>
<el-form-item prop="title" :class="validation.fa_title ? 'is-error' : ''" label="عنوان فارسی">
<el-input v-model="formData.slider_details.fa.title"></el-input>
<p class="err" v-if="validation.fa_title">{{ validation.fa_title.msg }}</p>
</el-form-item>
<el-form-item prop="title" :class="validation.en_title ? 'is-error' : ''" label="عنوان انگلیسی">
<el-input v-model="formData.slider_details.en.title"></el-input>
<p class="err" v-if="validation.en_title">{{ validation.en_title.msg }}</p>
</el-form-item>
<el-form-item prop="title" :class="validation.fa_caption ? 'is-error' : ''" label="توضیحات فارسی">
<el-input v-model="formData.slider_details.fa.caption"></el-input>
<p class="err" v-if="validation.fa_caption">{{ validation.fa_caption.msg }}</p>
</el-form-item>
<el-form-item prop="title" :class="validation.en_caption ? 'is-error' : ''" label="توضیحات انگلیسی">
<el-input v-model="formData.slider_details.en.caption"></el-input>
<p class="err" v-if="validation.en_caption">{{ validation.en_caption.msg }}</p>
</el-form-item>
</el-form>
</admin-panel>
</div>
<div class="col-6">
<admin-panel>
<h2 class="secondTitle">تصویر</h2>
<el-divider></el-divider>
<img :src="formData.image" alt="" style="width: 100%">
<input type="file" ref="image" @change="preview">
<p class="err" v-if="validation.image">{{ validation.image.msg }}</p>
</admin-panel>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
formData: null,
validation: {},
uploading: false,
uploadProgress: null
}
},
computed: {
title() {
if (!this.uploading) {
return 'ویرایش اسلاید'
} else {
return this.uploadProgress
}
}
},
methods: {
upload() {
this.validation = ''
const data = new FormData()
data.append('fa_title', this.formData.slider_details.fa.title)
data.append('en_title', this.formData.slider_details.en.title)
data.append('fa_caption', this.formData.slider_details.fa.caption)
data.append('en_caption', this.formData.slider_details.en.caption)
if (this.$refs.image.files[0]) {
data.append('image', this.$refs.image.files[0])
}
const axiosConfig = {
onUploadProgress: progressEvent => {
this.uploading = true
this.uploadProgress = 'درحال آپلود ' + Math.floor(((progressEvent.loaded / progressEvent.total) * 100)) + '%'
if ((progressEvent.loaded / progressEvent.total) * 100 === 100) {
this.uploading = false
}
}
}
this.$axios.put(`/api/private/slider/${this.formData._id}`, data, axiosConfig)
.then(response => {
if (response.data) {
this.$message({
message: 'تغییرات با موفقیت انجام شد.',
type: 'success'
});
}
}).catch(error => {
if (error.response.status === 422) {
this.validation = error.response.data.validation
this.$message({
type: 'error',
message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
})
} else {
this.$alert(error.response.data.error.message, 'خطا', {
confirmButtonText: 'باشه',
})
}
})
},
preview(event) {
this.formData.image = URL.createObjectURL(event.target.files[0]);
}
},
head() {
return {
title: this.title
}
},
layout: 'admin',
async asyncData({$axios, route}) {
const slide = await $axios.get(`/api/public/slider/${route.params.slide}`)
return {
formData: slide.data
}
export default {
data() {
return {
formData: null,
validation: {},
uploading: false,
uploadProgress: null
}
},
computed: {
title() {
if (!this.uploading) {
return 'ویرایش اسلاید'
} else {
return this.uploadProgress
}
}
}
},
methods: {
upload() {
this.validation = ''
const data = new FormData()
data.append('fa_title', this.formData.slider_details.fa.title)
data.append('en_title', this.formData.slider_details.en.title)
data.append('fa_caption', this.formData.slider_details.fa.caption)
data.append('en_caption', this.formData.slider_details.en.caption)
if (this.$refs.image.files[0]) {
data.append('image', this.$refs.image.files[0])
}
const axiosConfig = {
onUploadProgress: progressEvent => {
this.uploading = true
this.uploadProgress = 'درحال آپلود ' + Math.floor(((progressEvent.loaded / progressEvent.total) * 100)) + '%'
if ((progressEvent.loaded / progressEvent.total) * 100 === 100) {
this.uploading = false
}
}
}
this.$axios.put(`/api/private/slider/${this.formData._id}`, data, axiosConfig)
.then(response => {
if (response.data) {
this.$message({
message: 'تغییرات با موفقیت انجام شد.',
type: 'success'
});
}
}).catch(error => {
if (error.response.status === 422) {
this.validation = error.response.data.validation
this.$message({
type: 'error',
message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
})
} else {
this.$alert(error.response.data.error.message, 'خطا', {
confirmButtonText: 'باشه'
})
}
})
},
preview(event) {
this.formData.image = URL.createObjectURL(event.target.files[0])
}
},
head() {
return {
title: this.title
}
},
layout: 'admin',
async asyncData({$axios, route, error}) {
try {
const slide = await $axios.get(`/api/public/slider/${route.params.slide}`)
return {
formData: slide.data
}
} catch (e) {
error({status: 404, message: 'Page not found'})
}
}
}
</script>
pages/admin/slider/index.vue
+106 -102
View File
@@ -1,114 +1,118 @@
<template>
<div class="container-fluid">
<div class="row">
<admin-title-bar :title="title">
<nuxt-link :to="{name: 'admin-slider-new'}">
<el-button type="success">جدید</el-button>
</nuxt-link>
</admin-title-bar>
<div class="col-12">
<admin-panel>
<el-table
v-if="slides"
:data="slides"
style="width: 100%">
<el-table-column
type="index"
label="#">
</el-table-column>
<el-table-column
prop="image"
label="تصویر"
width="230">
<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
prop="slider_details.fa.title"
label="عنوان"
width="">
</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>
<div class="container-fluid">
<div class="row">
<admin-title-bar :title="title">
<nuxt-link :to="{name: 'admin-slider-new'}">
<el-button type="success">جدید</el-button>
</nuxt-link>
</admin-title-bar>
<div class="col-12">
<admin-panel>
<el-table
v-if="slides"
:data="slides"
style="width: 100%">
<el-table-column
type="index"
label="#">
</el-table-column>
<el-table-column
prop="image"
label="تصویر"
width="230">
<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
prop="slider_details.fa.title"
label="عنوان"
width="">
</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>
export default {
data() {
return {
title: 'اسلایدر',
slides: null,
}
},
head() {
return {
title: this.title,
}
},
methods: {
edit(id) {
this.$router.push(`/admin/slider/${id}`)
export default {
data() {
return {
title: 'اسلایدر',
slides: null,
}
},
head() {
return {
title: this.title,
}
},
methods: {
edit(id) {
this.$router.push(`/admin/slider/${id}`)
},
del(id) {
this.$confirm('این تصویر حذف شود؟', 'هشدار', {
confirmButtonText: 'بله',
cancelButtonText: 'لغو',
type: 'warning'
}).then(() => {
this.$axios.delete(`/api/private/slider/${id}`).then(response => {
this.slides = this.slides.filter(item => {
return item._id !== id
})
this.$message({
type: 'success',
message: 'تصویر حذف شد'
});
})
}).catch(() => {
this.$message({
type: 'warning',
message: 'عملیات لغو شد'
});
});
}
},
layout: 'admin',
async asyncData({$axios, store}) {
let slides = await $axios.get(`/api/public/slider`)
return {
slides: slides.data
}
},
del(id) {
this.$confirm('این تصویر حذف شود؟', 'هشدار', {
confirmButtonText: 'بله',
cancelButtonText: 'لغو',
type: 'warning'
}).then(() => {
this.$axios.delete(`/api/private/slider/${id}`).then(response => {
this.slides = this.slides.filter(item => {
return item._id !== id
})
this.$message({
type: 'success',
message: 'تصویر حذف شد'
});
})
}).catch(() => {
this.$message({
type: 'warning',
message: 'عملیات لغو شد'
});
});
}
},
layout: 'admin',
async asyncData({$axios, store, error}) {
try {
let slides = await $axios.get(`/api/public/slider`)
return {
slides: slides.data
}
}
} catch (e) {
error({status: 404, message: 'There is a problem here'})
}
}
}
</script>
<style>
.el-table .el-table__body-wrapper .el-table__row .is-left{
text-align: left !important;
}
.el-table .el-table__body-wrapper .el-table__row .is-left{
text-align: left !important;
}
</style>
pages/admin/slider/new.vue
+119 -121
View File
@@ -1,129 +1,127 @@
<template>
<div class="container-fluid">
<div class="row">
<admin-title-bar :title="title">
<el-button @click="$router.back()" type="primary">برگشت به صفحه قبل</el-button>
<el-button type="success" @click="upload">ایجاد</el-button>
</admin-title-bar>
<div class="col-6">
<admin-panel>
<el-form>
<el-form-item prop="title" :class="validation.fa_title ? 'is-error' : ''" label="عنوان فارسی">
<el-input v-model="formData.fa_title"></el-input>
<p class="err" v-if="validation.fa_title">{{validation.fa_title.msg}}</p>
</el-form-item>
<el-form-item prop="title" :class="validation.en_title ? 'is-error' : ''" label="عنوان انگلیسی">
<el-input v-model="formData.en_title"></el-input>
<p class="err" v-if="validation.en_title">{{validation.en_title.msg}}</p>
</el-form-item>
<el-form-item prop="title" :class="validation.fa_caption ? 'is-error' : ''" label="توضیحات فارسی">
<el-input v-model="formData.fa_caption"></el-input>
<p class="err" v-if="validation.fa_caption">{{validation.fa_caption.msg}}</p>
</el-form-item>
<el-form-item prop="title" :class="validation.en_caption ? 'is-error' : ''" label="توضیحات انگلیسی">
<el-input v-model="formData.en_caption"></el-input>
<p class="err" v-if="validation.en_caption">{{validation.en_caption.msg}}</p>
</el-form-item>
</el-form>
</admin-panel>
</div>
<div class="col-6">
<admin-panel>
<h2 class="secondTitle">تصویر</h2>
<el-divider></el-divider>
<img :src="formData.image" alt="" style="width: 100%">
<input type="file" ref="image" @change="preview">
<p class="err" v-if="validation.image">{{validation.image.msg}}</p>
</admin-panel>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<admin-title-bar :title="title">
<el-button @click="$router.back()" type="primary">برگشت به صفحه قبل</el-button>
<el-button type="success" @click="upload">ایجاد</el-button>
</admin-title-bar>
<div class="col-6">
<admin-panel>
<el-form>
<el-form-item prop="title" :class="validation.fa_title ? 'is-error' : ''" label="عنوان فارسی">
<el-input v-model="formData.fa_title"></el-input>
<p class="err" v-if="validation.fa_title">{{ validation.fa_title.msg }}</p>
</el-form-item>
<el-form-item prop="title" :class="validation.en_title ? 'is-error' : ''" label="عنوان انگلیسی">
<el-input v-model="formData.en_title"></el-input>
<p class="err" v-if="validation.en_title">{{ validation.en_title.msg }}</p>
</el-form-item>
<el-form-item prop="title" :class="validation.fa_caption ? 'is-error' : ''" label="توضیحات فارسی">
<el-input v-model="formData.fa_caption"></el-input>
<p class="err" v-if="validation.fa_caption">{{ validation.fa_caption.msg }}</p>
</el-form-item>
<el-form-item prop="title" :class="validation.en_caption ? 'is-error' : ''" label="توضیحات انگلیسی">
<el-input v-model="formData.en_caption"></el-input>
<p class="err" v-if="validation.en_caption">{{ validation.en_caption.msg }}</p>
</el-form-item>
</el-form>
</admin-panel>
</div>
<div class="col-6">
<admin-panel>
<h2 class="secondTitle">تصویر</h2>
<el-divider></el-divider>
<img :src="formData.image" alt="" style="width: 100%">
<input type="file" ref="image" @change="preview">
<p class="err" v-if="validation.image">{{ validation.image.msg }}</p>
</admin-panel>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
formData: {
fa_title: '',
en_title: '',
fa_caption: '',
en_caption: '',
image: ''
},
validation: {},
uploading: false,
uploadProgress: null
}
export default {
data() {
return {
formData: {
fa_title: '',
en_title: '',
fa_caption: '',
en_caption: '',
image: ''
},
computed: {
title() {
if (!this.uploading) {
return 'افزودن اسلاید'
} else {
return this.uploadProgress
validation: {},
uploading: false,
uploadProgress: null
}
},
computed: {
title() {
if (!this.uploading) {
return 'افزودن اسلاید'
} else {
return this.uploadProgress
}
}
},
methods: {
upload() {
this.validation = ''
const data = new FormData()
data.append('fa_title', this.formData.fa_title)
data.append('en_title', this.formData.en_title)
data.append('fa_caption', this.formData.fa_caption)
data.append('en_caption', this.formData.en_caption)
data.append('image', this.$refs.image.files[0])
const axiosConfig = {
onUploadProgress: progressEvent => {
this.uploading = true
this.uploadProgress = 'درحال آپلود ' + Math.floor(((progressEvent.loaded / progressEvent.total) * 100)) + '%'
if ((progressEvent.loaded / progressEvent.total) * 100 === 100) {
this.uploading = false
}
}
}
this.$axios.post(`/api/private/slider`, data, axiosConfig)
.then(response => {
if (response.data) {
this.$message({
message: 'اسلاید با موفقیت ثبت شد.',
type: 'success'
});
this.$router.push({name: 'admin-slider'})
}
}
},
methods: {
upload() {
this.validation = ''
const data = new FormData()
data.append('fa_title', this.formData.fa_title)
data.append('en_title', this.formData.en_title)
data.append('fa_caption', this.formData.fa_caption)
data.append('en_caption', this.formData.en_caption)
data.append('image', this.$refs.image.files[0])
const axiosConfig = {
onUploadProgress: progressEvent => {
this.uploading = true
this.uploadProgress = 'درحال آپلود ' + Math.floor(((progressEvent.loaded / progressEvent.total) * 100)) + '%'
if ((progressEvent.loaded / progressEvent.total) * 100 === 100) {
this.uploading = false
}
}
}
this.$axios.post(`/api/private/slider`, data, axiosConfig)
.then(response => {
if (response.data) {
this.$message({
message: 'اسلاید با موفقیت ثبت شد.',
type: 'success'
});
this.$router.push({name: 'admin-slider'})
}
}).catch(error => {
if (error.response.status === 422) {
this.validation = error.response.data.validation
this.$message({
type: 'error',
message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
})
} else {
this.$alert(error.response.data.error.message, 'خطا', {
confirmButtonText: 'باشه',
})
}
})
},
preview(event) {
this.formData.image = URL.createObjectURL(event.target.files[0]);
}
},
head() {
return {
title: this.title
}
},
layout: 'admin'
}
}).catch(error => {
if (error.response.status === 422) {
this.validation = error.response.data.validation
this.$message({
type: 'error',
message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
})
} else {
this.$alert(error.response.data.error.message, 'خطا', {
confirmButtonText: 'باشه'
})
}
})
},
preview(event) {
this.formData.image = URL.createObjectURL(event.target.files[0])
}
},
head() {
return {
title: this.title
}
},
layout: 'admin'
}
</script>