aboutsummaryrefslogtreecommitdiff
path: root/resources/vue/components/feedback/FeedbackCreateDialog.vue
blob: 865cffd100498a86772e838b701ebe073fb8c9b5 (plain)
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
<template>
    <div>
        <studip-dialog
            :title="$gettext('Feedback erstellen')"
            :confirmText="$gettext('Erstellen')"
            :closeText="$gettext('Schließen')"
            closeClass="cancel"
            confirmClass="accept"
            height="420"
            width="500"
            @confirm="createFeedback"
            @close="$emit('close')"
        >
            <template v-slot:dialogContent>
                <form class="default" @submit.prevent="">
                    <label>
                        {{ $gettext('Frage') }}
                        <input type="text" v-model="question" >
                    </label>
                    <label>
                        {{ $gettext('Beschreibung') }}
                        <textarea v-model="description"></textarea>
                    </label>
                    <label>
                        <input type="checkbox" v-model="anonymous" >
                        {{ $gettext('Feedback kann anonym abgegeben werden') }}
                    </label>
                    <label>
                        <input type="checkbox" v-model="commentable" >
                        {{ $gettext('Abgegebenes Feedback kann einen Kommentar beinhalten') }}
                    </label>

                </form>
            </template>
        </studip-dialog>
    </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
    name: 'feedback-create-dialog',
    emits: ['close', 'created'],
    props: {
        defaultQuestion: {
            type: String,
            default: ''
        },
        defaultDescription: {
            type: String,
            default: ''
        },
        defaultCommentable: {
            type: Boolean,
            default: true
        },
        defaultAnonymous: {
            type: Boolean,
            default: false
        },
        rangeType: {
            type: String,
            required: true
        },
        rangeId: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            question: '',
            description: '',
            commentable: true,
            anonymous: false
        }
    },
    methods: {
        ...mapActions({
            createFeedbackElement: 'feedback-elements/create',
        }),
        createFeedback() {
            const data = {
                attributes: {
                    question: this.question,
                    description:this.description,
                    mode: 1,
                    'results-visible': true,
                    'is-commentable': this.commentable,
                    'anonymous-entries': this.anonymous,
                },
                relationships: {
                    range: {
                        data: {
                            type: this.rangeType,
                            id: this.rangeId,
                        },
                    },
                },
            };
            this.createFeedbackElement(data).then(() => {
                this.$emit('created');
                this.$emit('close');
            });
        },
        initData() {
            this.question = this.defaultQuestion;
            this.description = this.defaultDescription;
            this.commentable = this.defaultCommentable;
            this.anonymous = this.defaultAnonymous;
        }
    },
    mounted() {
        this.initData();
    }
};
</script>