Refactor: layout
This commit is contained in:
@@ -2,45 +2,54 @@
|
||||
<v-card>
|
||||
<ValidationObserver ref="observer" v-slot="{ invalid }">
|
||||
<form @submit.prevent="submit">
|
||||
<v-card-title>Geschlossene Frage einreichen</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<ValidationProvider v-slot="{ errors }" name="frage" rules="required">
|
||||
<v-text-field v-model="question" required label="Frage" :error-messages="errors"></v-text-field>
|
||||
</ValidationProvider>
|
||||
</v-col>
|
||||
<v-col v-for="(n, index) in 4" :key="index">
|
||||
<ValidationProvider v-slot="{ errors }" :name="`antwort${n}`" rules="required">
|
||||
<v-text-field v-model="answers[index]" required :label="`Antwort #${n}`" :error-messages="errors"></v-text-field>
|
||||
</ValidationProvider>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<ValidationProvider v-slot="{ errors }" name="richtig" rules="required">
|
||||
<v-select v-model="correctAnswer" required :items="answers" label="Richtige Antwort" :error-messages="errors"></v-select>
|
||||
</ValidationProvider>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field
|
||||
v-model="comment"
|
||||
label="(Optional) Anmerkung"
|
||||
persistent-hint
|
||||
hint="Nur der Tutor kann deine Anmerkung sehen."
|
||||
>
|
||||
<template #message="{ message }">
|
||||
<v-icon small>mdi-information</v-icon>
|
||||
<span>{{ message }}</span>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn v-if="$config.NODE_ENV !== 'production'" depressed color="warning" @click="addQuestionsForTesting">+10 Fragen</v-btn>
|
||||
<v-spacer />
|
||||
<v-btn text color="primary" @click="clear">Reset</v-btn>
|
||||
<v-btn type="submit" depressed color="primary" :loading="loading" :disabled="invalid">Einreichen</v-btn>
|
||||
</v-card-actions>
|
||||
<v-card-title style="cursor: pointer;" @click="showBody = !showBody">
|
||||
<span class="flex-grow-1 flex-shrink-0 text-subtitle-1 font-weight-medium">Eigene Quizfrage einreichen</span>
|
||||
<v-btn icon @click.stop="showBody = !showBody">
|
||||
<v-icon>{{ showBody ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
<v-expand-transition>
|
||||
<div v-show="showBody">
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<ValidationProvider v-slot="{ errors }" name="frage" rules="required">
|
||||
<v-text-field v-model="question" required label="Frage" :error-messages="errors"></v-text-field>
|
||||
</ValidationProvider>
|
||||
</v-col>
|
||||
<v-col v-for="(n, index) in 4" :key="index" cols="6">
|
||||
<ValidationProvider v-slot="{ errors }" :name="`antwort${n}`" rules="required">
|
||||
<v-text-field v-model="answers[index]" required :label="`Antwort #${n}`" :error-messages="errors"></v-text-field>
|
||||
</ValidationProvider>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<ValidationProvider v-slot="{ errors }" name="richtig" rules="required">
|
||||
<v-select v-model="correctAnswer" required :items="answers" label="Richtige Antwort" :error-messages="errors"></v-select>
|
||||
</ValidationProvider>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field
|
||||
v-model="comment"
|
||||
label="(Optional) Anmerkung"
|
||||
persistent-hint
|
||||
hint="Nur der Tutor kann deine Anmerkung sehen."
|
||||
>
|
||||
<template #message="{ message }">
|
||||
<v-icon small>mdi-information</v-icon>
|
||||
<span>{{ message }}</span>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn v-if="$config.NODE_ENV !== 'production'" depressed color="warning" @click="addQuestionsForTesting">+10 Fragen</v-btn>
|
||||
<v-spacer />
|
||||
<v-btn text color="primary" @click="clear">Reset</v-btn>
|
||||
<v-btn type="submit" depressed color="primary" :loading="loading" :disabled="invalid">Einreichen</v-btn>
|
||||
</v-card-actions>
|
||||
</div>
|
||||
</v-expand-transition>
|
||||
</form>
|
||||
</ValidationObserver>
|
||||
</v-card>
|
||||
@@ -67,6 +76,7 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showBody: false,
|
||||
loading: false,
|
||||
question: '',
|
||||
answers: [],
|
||||
|
||||
@@ -2,43 +2,52 @@
|
||||
<v-card>
|
||||
<ValidationObserver ref="observer" v-slot="{ invalid }">
|
||||
<form @submit.prevent="submit">
|
||||
<v-card-title>Offene Frage einreichen</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<ValidationProvider v-slot="{ errors }" name="Frage/Aufgabenstellung" rules="required|min:20">
|
||||
<v-textarea
|
||||
v-model="question"
|
||||
required
|
||||
auto-grow
|
||||
filled
|
||||
counter
|
||||
label="Frage/Aufgabenstellung"
|
||||
:error-messages="errors"
|
||||
></v-textarea>
|
||||
</ValidationProvider>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<ValidationProvider v-slot="{ errors }" name="Musterlösung" rules="required|min:50">
|
||||
<v-textarea
|
||||
v-model="solution"
|
||||
required
|
||||
auto-grow
|
||||
filled
|
||||
counter
|
||||
label="Musterlösung"
|
||||
:error-messages="errors"
|
||||
></v-textarea>
|
||||
</ValidationProvider>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn v-if="$config.NODE_ENV !== 'production'" depressed color="warning" @click="addQuestionsForTesting">+10 Fragen</v-btn>
|
||||
<v-spacer />
|
||||
<v-btn text color="primary" @click="clear">Reset</v-btn>
|
||||
<v-btn type="submit" depressed color="primary" :loading="loading" :disabled="invalid">Einreichen</v-btn>
|
||||
</v-card-actions>
|
||||
<v-card-title style="cursor: pointer;" @click="showBody = !showBody">
|
||||
<span class="flex-grow-1 flex-shrink-0 text-subtitle-1 font-weight-medium">Eigene Frage einreichen</span>
|
||||
<v-btn icon @click.stop="showBody = !showBody">
|
||||
<v-icon>{{ showBody ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
<v-expand-transition>
|
||||
<div v-show="showBody">
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<ValidationProvider v-slot="{ errors }" name="Frage/Aufgabenstellung" rules="required|min:20">
|
||||
<v-textarea
|
||||
v-model="question"
|
||||
required
|
||||
auto-grow
|
||||
filled
|
||||
counter
|
||||
label="Frage/Aufgabenstellung"
|
||||
:error-messages="errors"
|
||||
></v-textarea>
|
||||
</ValidationProvider>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<ValidationProvider v-slot="{ errors }" name="Musterlösung" rules="required|min:50">
|
||||
<v-textarea
|
||||
v-model="solution"
|
||||
required
|
||||
auto-grow
|
||||
filled
|
||||
counter
|
||||
label="Musterlösung"
|
||||
:error-messages="errors"
|
||||
></v-textarea>
|
||||
</ValidationProvider>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn v-if="$config.NODE_ENV !== 'production'" depressed color="warning" @click="addQuestionsForTesting">+10 Fragen</v-btn>
|
||||
<v-spacer />
|
||||
<v-btn text color="primary" @click="clear">Reset</v-btn>
|
||||
<v-btn type="submit" depressed color="primary" :loading="loading" :disabled="invalid">Einreichen</v-btn>
|
||||
</v-card-actions>
|
||||
</div>
|
||||
</v-expand-transition>
|
||||
</form>
|
||||
</ValidationObserver>
|
||||
</v-card>
|
||||
@@ -70,6 +79,7 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showBody: false,
|
||||
loading: false,
|
||||
question: '',
|
||||
solution: ''
|
||||
|
||||
@@ -1,22 +1,10 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-subheader class="text-h5 text--primary">Offene Fragen</v-subheader>
|
||||
<v-card>
|
||||
<v-card-title>Community Fragen</v-card-title>
|
||||
<OpenEndedQuestionsList :questions="questions" />
|
||||
<v-divider></v-divider>
|
||||
<v-expansion-panels focusable class="my-3">
|
||||
<v-expansion-panel
|
||||
v-for="(item, i) in questions"
|
||||
:key="i"
|
||||
>
|
||||
<v-expansion-panel-header>
|
||||
{{ item.question }}
|
||||
</v-expansion-panel-header>
|
||||
<v-expansion-panel-content class="text-pre-wrap">
|
||||
<div class="text-pre-wrap">{{ item.solution }}</div>
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
<AddOpenEndedQuestion />
|
||||
</v-container>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
126
components/OpenEndedQuestionsList.vue
Normal file
126
components/OpenEndedQuestionsList.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<v-data-iterator
|
||||
:items="questions"
|
||||
:items-per-page.sync="itemsPerPage"
|
||||
:page.sync="page"
|
||||
:search="search"
|
||||
:sort-by="sortBy.toLowerCase()"
|
||||
:sort-desc="sortDesc"
|
||||
>
|
||||
<template #header>
|
||||
<v-toolbar
|
||||
flat
|
||||
class="mb-1"
|
||||
>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
clearable
|
||||
flat
|
||||
solo-inverted
|
||||
hide-details
|
||||
prepend-inner-icon="mdi-magnify"
|
||||
label="Search"
|
||||
></v-text-field>
|
||||
<template v-if="$vuetify.breakpoint.mdAndUp">
|
||||
<v-spacer></v-spacer>
|
||||
<v-select
|
||||
v-model="sortBy"
|
||||
flat
|
||||
solo-inverted
|
||||
hide-details
|
||||
:items="keys"
|
||||
prepend-inner-icon="mdi-magnify"
|
||||
label="Sort by"
|
||||
></v-select>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn-toggle
|
||||
v-model="sortDesc"
|
||||
mandatory
|
||||
>
|
||||
<v-btn
|
||||
large
|
||||
depressed
|
||||
color="blue"
|
||||
:value="false"
|
||||
>
|
||||
<v-icon>mdi-arrow-up</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
large
|
||||
depressed
|
||||
color="blue"
|
||||
:value="true"
|
||||
>
|
||||
<v-icon>mdi-arrow-down</v-icon>
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
</template>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<template #default="props">
|
||||
<v-container fluid>
|
||||
<v-card outlined>
|
||||
<v-expansion-panels hover accordion>
|
||||
<v-expansion-panel
|
||||
v-for="(item, i) in props.items"
|
||||
:key="i"
|
||||
>
|
||||
<v-expansion-panel-header>
|
||||
<strong>{{ item.question }}</strong>
|
||||
</v-expansion-panel-header>
|
||||
<v-expansion-panel-content class="text-pre-wrap">
|
||||
<div class="text-pre-wrap">{{ item.solution }}</div>
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
</v-data-iterator>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'OpenEndedQuestionsList',
|
||||
props: {
|
||||
questions: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
itemsPerPageArray: [10, 20, 30],
|
||||
search: '',
|
||||
filter: {},
|
||||
sortDesc: false,
|
||||
page: 1,
|
||||
itemsPerPage: 10,
|
||||
sortBy: 'created',
|
||||
keys: [
|
||||
'Created'
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
numberOfPages () {
|
||||
return Math.ceil(this.questions.length / this.itemsPerPage)
|
||||
},
|
||||
filteredKeys () {
|
||||
return this.keys.filter(key => key !== 'Name')
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
nextPage () {
|
||||
if (this.page + 1 <= this.numberOfPages) this.page += 1
|
||||
},
|
||||
formerPage () {
|
||||
if (this.page - 1 >= 1) this.page -= 1
|
||||
},
|
||||
updateItemsPerPage (number) {
|
||||
this.itemsPerPage = number
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,47 +1,45 @@
|
||||
<template>
|
||||
<v-container v-if="newQuestions.length > 0" fluid>
|
||||
<v-card class="my-3">
|
||||
<v-card-title class="text-h5 text--primary">
|
||||
<v-badge color="primary" offset-x="-5" offset-y="10" :content="newQuestions.length">
|
||||
Neue Fragen
|
||||
</v-badge>
|
||||
</v-card-title>
|
||||
<v-window
|
||||
continuous
|
||||
show-arrows
|
||||
<v-card v-if="newQuestions.length > 0">
|
||||
<v-card-title>
|
||||
<v-badge color="primary" offset-x="-5" offset-y="10" :content="newQuestions.length">
|
||||
Neue Fragen
|
||||
</v-badge>
|
||||
</v-card-title>
|
||||
<v-window
|
||||
continuous
|
||||
show-arrows
|
||||
>
|
||||
<v-window-item
|
||||
v-for="question, index in newQuestions" :key="index"
|
||||
>
|
||||
<v-window-item
|
||||
v-for="question, index in newQuestions" :key="index"
|
||||
>
|
||||
<v-card max-width="500" class="mx-auto">
|
||||
<v-card-title>{{ question.question }}</v-card-title>
|
||||
<v-card-text>
|
||||
<p>
|
||||
<ol v-for="answer, i in question.answers" :key="i" :start="i+1">
|
||||
<li>{{ answer }}</li>
|
||||
</ol>
|
||||
</p>
|
||||
<p>Richtig: {{ question.correctAnswer }}</p>
|
||||
<p v-if="question.comments.length > 0">
|
||||
User-Kommentar:<br />
|
||||
{{ question.comments[0] }}
|
||||
</p>
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<v-btn icon large color="success" @click="updateQuestion(question, true)">
|
||||
<v-icon>mdi-check</v-icon>
|
||||
</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon large color="error" @click="updateQuestion(question, false)">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</v-card>
|
||||
</v-container>
|
||||
<v-card max-width="500" class="mx-auto">
|
||||
<v-card-title>{{ question.question }}</v-card-title>
|
||||
<v-card-text>
|
||||
<p>
|
||||
<ol v-for="answer, i in question.answers" :key="i" :start="i+1">
|
||||
<li>{{ answer }}</li>
|
||||
</ol>
|
||||
</p>
|
||||
<p>Richtig: {{ question.correctAnswer }}</p>
|
||||
<p v-if="question.comments.length > 0">
|
||||
User-Kommentar:<br />
|
||||
{{ question.comments[0] }}
|
||||
</p>
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<v-btn icon large color="success" @click="updateQuestion(question, true)">
|
||||
<v-icon>mdi-check</v-icon>
|
||||
</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon large color="error" @click="updateQuestion(question, false)">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user