Wmc/32_Vuejs/Spengernews.Client/src/views/CreateArticleView.vue at main · schletz/Wmc · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<script setup>
import axios from 'axios';
</script>

<template>
    <div id="createArticle">
        <h3>Neuer Artikel</h3>
        <div class="form">
            <div class="form-row">
                <div class="label">Headline</div>
                <div class="control">
                    <input type="text" v-model="model.headline" />
                    <div v-if="validation.headline" class="error">{{ validation.headline }}</div>
                </div>
            </div>
            <div class="form-row">
                <div class="label">Content</div>
                <div class="control">
                    <textarea v-model="model.content"></textarea>
                    <div v-if="validation.content" class="error">{{ validation.content }}</div>
                </div>
            </div>
            <div class="form-row">
                <div class="label">Image URL</div>
                <div class="control">
                    <input type="text" v-model="model.imageUrl" />
                    <div v-if="validation.imageUrl" class="error">{{ validation.imageUrl }}</div>
                </div>
            </div>
            <div class="form-row">
                <div class="label">Category</div>
                <div class="control">
                    <select v-model="model.categoryGuid">
                        <option v-for="c in categories" v-bind:key="c.guid" v-bind:value="c.guid">{{ c.name }}</option>
                    </select>
                    <div v-if="validation.categoryGuid" class="error">{{ validation.categoryGuid }}</div>
                </div>
            </div>
            <div class="form-row">
                <div class="label"></div>
                <div class="control">
                    <button type="submit" v-on:click="sendData()">Senden</button>
                    <div v-if="message">{{ message }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            categories: [],
            model: {},
            validation: {},
            message: ""
        };
    },
    async mounted() {
        try {
            this.categories = (await axios.get('category')).data;
        } catch (e) {
            alert('Fehler beim Laden der Daten.');
        }
    },
    methods: {
        async sendData() {
            this.validation = {};
            this.model.authorGuid = this.$store.state.user.guid;
            try {
                await axios.post('news', this.model);
                this.model = {};
                this.validation = {};
                this.message = "Dein Artikel wurde gespeichert.";
            } catch (e) {
                if (e.response.status == 400) {
                    this.validation = Object.keys(e.response.data.errors).reduce((prev, key) => {
                        const newKey = key.charAt(0).toLowerCase() + key.slice(1);
                        prev[newKey] = e.response.data.errors[key][0];
                        return prev;
                    }, {});
                    console.log(this.validation);
                }
            }
        },
    },
};
</script>

<style scoped>
h3 {
    color:white;
    margin-top:0;
    margin-bottom: 1rem;
}

input, textarea, select {
    background-color:rgba(255,255,255,70%);
    padding: 0.3rem 0rem;
}
.form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 40em;
}
.form-row {
    display: flex;
    flex-wrap: wrap;
}
.form-row .label {
    flex: 0 0 8em;
    color:white;

}
.form-row .control {
    flex-grow: 1;
}
.form-row .control input,
.form-row .control textarea {
    width: 100%;
}

</style>