News form

create.vue

<template>
    <layout>
        <page-header :title="title"></page-header>
        <page-content>
            <news-form :onSubmit="onSubmit" :data="news" :loading="loading"></news-form>
        </page-content>
    </layout>
</template>

<script>
    import Layout from 'layouts/Main';
    import NewsForm from './partials/Form';
    import NewsRepository from 'repositories/News';
    import { NEWS_SHOW } from 'router/actions';

    export default {
        components: {
            Layout, NewsForm
        },
        data() {
            return {
                news: NewsRepository.structure,
                loading: false
            }
        },
        mounted() {
            this.news.author_id = this.user.id;
        },
        methods: {
            async onSubmit(data) {
                this.loading = true;
                this.$errors.flush();

                try {
                    let news = await NewsRepository.store(data);

                    this.$router.push({
                        name: NEWS_SHOW,
                        params: {id: news.id}
                    });

                } catch (e) {
                    this.$message.error(e.message);
                }
                this.loading = false;
            }
        },
        computed: {
            title() {
                return this.news.title || 'New Post';
            }
        }
    }
</script>

edit.vue

<template>
    <layout>
        <page-header :title="news.title"></page-header>
        <page-content>
            <news-form :onSubmit="onSubmit" :data="news" :loading="loading"></news-form>
        </page-content>
    </layout>
</template>

<script>
    import Layout from 'layouts/Main';
    import NewsForm from './partials/Form';
    import NewsRepository from 'repositories/News';
    import { PAGE_ERROR } from 'router/actions';

    export default {
        components: {
            Layout, NewsForm
        },
        data() {
            return {
                news: NewsRepository.structure,
                loading: false
            }
        },
        mounted() {
            this.loadNews();
        },
        methods: {
            async loadNews() {
                this.loading = true;
                this.$errors.flush();

                try {
                    this.news = await NewsRepository.show(this.$route.params.id, ['text_source']);
                } catch (e) {
                    this.$router.push({
                        name: PAGE_ERROR,
                        params: {error: e.message}
                    })
                }

                this.loading = false;
            },

            async onSubmit(data) {
                this.loading = true;

                try {
                    await NewsRepository.update(this.news.id, data)
                } catch (e) {
                    this.$message.error(e.message);
                }

                this.loading = false;
            }
        }
    }
</script>

form.vue

<template>
    <div class="panel" v-loading="loading">
        <div class="panel-body">
            <div class="form-group">
                <label class="form-control-label">Заголовок</label>
                <input class="form-control form-control-lg" type="text" v-model="data.title" />
                <error input="title" />
            </div>

            <div class="form-group">
                <label class="form-control-label">Дата публикации</label>
                <br />
                <el-date-picker
                        placeholder="Pick a date"
                        v-model="data.created_at"
                        type="date"
                        format="dd.MM.yyyy"
                        value-format="yyyy-MM-dd">
                </el-date-picker>

                <error input="created_at" />
            </div>

            <div class="form-group">
                <markdown-editor v-model="data.text_source" ref="markdownEditor"></markdown-editor>
                <error input="text_source" />
            </div>

            <div class="form-group">
                <label class="form-control-label">Изображение</label>
                <el-upload
                        class="image-uploader"
                        :show-file-list="false"
                        :before-upload="beforeImageUpload"
                        accept="image/x-png,image/gif,image/jpeg"
                        action="upload">

                    <img v-if="thumb" :src="thumb" class="news-image" @error="imgError">
                    <i v-else class="el-icon-plus image-uploader-icon"></i>
                </el-upload>
            </div>

            <div class="form-group">
                <label class="form-control-label">Автор</label>
                <user-select v-model="data.author_id">
                    <option :value="null">Не указан</option>
                </user-select>
                <error input="author_id" />
            </div>
        </div>

        <div class="panel-footer bg-grey-100 p-20">
            <button type="button" class="btn btn-lg btn-success btn-round" @click="submit" :disabled="loading">
                <icon name="check text-active"></icon> {{ saveButtonText }}
            </button>

            <button type="button" class="btn btn-default btn-round" @click="back" :disabled="loading">
                Отмена
            </button>
        </div>
    </div>
</template>

<script>
    import markdownEditor from 'components/Form/SimpleMDE';
    import UserSelect from 'components/Form/UserSelect';
    import NewsRepository from 'repositories/News';
    import {NEWS_LIST} from 'router/actions';

    export default {
        components: {
            markdownEditor, UserSelect
        },
        props: {
            loading: {
                type: Boolean,
                default() {
                    return false;
                }
            },
            data: {
                type: Object,
                default() {
                    return NewsRepository.structure;
                }
            },

            onSubmit: {
                type: Function,
                required: true
            }
        },
        data() {
            return {
                image: null
            }
        },
        computed: {
            saveButtonText() {
                return this.data.id ? 'Сохранить' : 'Создать';
            },
            thumb() {
                return this.image || this.data.links.thumb;
            }
        },
        methods: {
            submit() {
                this.onSubmit(this.data);
            },

            back() {
                this.$router.push({
                    name: NEWS_LIST
                });
            },

            beforeImageUpload(file) {
                this.$loader.start();

                this.data.upload_file = null;
                this.image = null;

                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('Изображение должно быть в формате jpeg.');
                }

                if (!isLt2M) {
                    this.$message.error('Размер изображение не должен превышать 2Мб.');
                }


                if (isJPG && isLt2M) {
                    this.data.upload_file = file;
                    let reader = new FileReader();
                    reader.addEventListener("load", () => {
                        this.image = reader.result;
                    }, false);

                    reader.readAsDataURL(file);
                }

                this.$loader.done();

                return false;
            }
        },
    }
</script>

<style>
    .image-uploader .el-upload {
        border:   1px dashed #d9d9d9;
        cursor:   pointer;
        position: relative;
        overflow: hidden;
    }

    .image-uploader .el-upload:hover {
        border-color: #409eff;
    }

    .image-uploader-icon {
        font-size:   28px;
        color:       #8c939d;
        width:       178px;
        height:      178px;
        line-height: 178px;
        text-align:  center;
    }

    .news-image {
        height:    200px;
        min-width: 200px;
        display:   block;
    }
</style>