791aebc346
Some checks failed
continuous-integration/drone/push Build is failing
- Complete GGZ Ecademy Nuxt.js user portal - Learning products browser and management - Member management interface - User authentication and roles - Multi-language support (NL/EN) - Vuex store for state management - Component-based architecture
304 lines
8.4 KiB
Vue
304 lines
8.4 KiB
Vue
<template>
|
|
<accordion-card :title="$t('learning.product_overview.texts')">
|
|
<v-row>
|
|
<v-col cols="12" sm="12" md="3">
|
|
<v-subheader class="txt--text font-weight-black">{{
|
|
$t('learning.product_overview.short_description')
|
|
}}</v-subheader>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6" class="pl-6">
|
|
<quill-editor
|
|
v-model="short_description"
|
|
id="short_description"
|
|
:options="editorOption"
|
|
class="quill"
|
|
:class="{ focused: selectedEditor === 'short_description' }"
|
|
@focus="onEditorFocus($event, 'short_description')"
|
|
@blur="onEditorBlur($event)"
|
|
@change="onEditorChange($event, 'short_description')"
|
|
v-if="editMode"
|
|
/>
|
|
<!-- @change="onEditorChange($event)" -->
|
|
|
|
<span v-html="short_description" v-else></span>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="3"> </v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col cols="12" sm="12" md="3">
|
|
<v-subheader class="txt--text font-weight-black">{{
|
|
$t('learning.product_overview.learning_goals')
|
|
}}</v-subheader>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6" class="pl-6">
|
|
<quill-editor
|
|
v-model="learning_goals"
|
|
:options="editorOption"
|
|
class="quill"
|
|
:class="{ focused: selectedEditor === 'learning_goals' }"
|
|
@focus="onEditorFocus($event, 'learning_goals')"
|
|
@blur="onEditorBlur($event)"
|
|
@change="onEditorChange($event, 'learning_goals')"
|
|
v-if="editMode"
|
|
/>
|
|
<span v-html="learning_goals" v-else></span>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="3"> </v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" sm="12" md="3">
|
|
<v-subheader class="txt--text font-weight-black">{{
|
|
$t('learning.product_overview.review')
|
|
}}</v-subheader>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6" class="pl-6">
|
|
<quill-editor
|
|
v-model="review"
|
|
:options="editorOption"
|
|
class="quill"
|
|
:class="{ focused: selectedEditor === 'review' }"
|
|
@focus="onEditorFocus($event, 'review')"
|
|
@blur="onEditorBlur($event)"
|
|
@change="onEditorChange($event, 'review')"
|
|
v-if="editMode"
|
|
/>
|
|
<span v-html="review" v-else></span>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="3"> </v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col cols="12" sm="12" md="3">
|
|
<v-subheader class="txt--text font-weight-black">{{
|
|
$t('learning.product_overview.certification')
|
|
}}</v-subheader>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6" class="pl-6">
|
|
<quill-editor
|
|
v-model="certification"
|
|
:options="editorOption"
|
|
class="quill"
|
|
:class="{ focused: selectedEditor === 'certification' }"
|
|
@focus="onEditorFocus($event, 'certification')"
|
|
@blur="onEditorBlur($event)"
|
|
@change="onEditorChange($event, 'certification')"
|
|
v-if="editMode"
|
|
/>
|
|
<span v-html="certification" v-else></span>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="3"> </v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col cols="12" sm="12" md="3">
|
|
<v-subheader class="txt--text font-weight-black">{{
|
|
$t('learning.product_overview.extra_information')
|
|
}}</v-subheader>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6" class="pl-6">
|
|
<quill-editor
|
|
v-model="extra_information"
|
|
:options="editorOption"
|
|
class="quill"
|
|
:class="{ focused: selectedEditor === 'extra_information' }"
|
|
@focus="onEditorFocus($event, 'extra_information')"
|
|
@blur="onEditorBlur($event)"
|
|
@change="onEditorChange($event, 'extra_information')"
|
|
v-if="editMode"
|
|
/>
|
|
<span v-html="extra_information" v-else></span>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="3"> </v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col cols="12" sm="12" md="3">
|
|
<v-subheader class="txt--text font-weight-black">{{
|
|
$t('learning.product_overview.target_audience')
|
|
}}</v-subheader>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6" class="pl-6">
|
|
<quill-editor
|
|
v-model="target_audience"
|
|
:options="editorOption"
|
|
class="quill"
|
|
:class="{ focused: selectedEditor === 'target_audience' }"
|
|
@focus="onEditorFocus($event, 'target_audience')"
|
|
@blur="onEditorBlur($event)"
|
|
@change="onEditorChange($event, 'target_audience')"
|
|
v-if="editMode"
|
|
/>
|
|
<span v-html="target_audience" v-else></span>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="3"> </v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col cols="12" sm="12" md="3">
|
|
<v-subheader class="txt--text font-weight-black">
|
|
Kwaliteitsstandaarden
|
|
</v-subheader>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6" class="pl-6">
|
|
<quill-editor
|
|
v-model="quality_standards"
|
|
:options="editorOption"
|
|
class="quill"
|
|
:class="{ focused: selectedEditor === 'quality_standards' }"
|
|
@focus="onEditorFocus($event, 'quality_standards')"
|
|
@blur="onEditorBlur($event)"
|
|
@change="onEditorChange($event, 'quality_standards')"
|
|
v-if="editMode"
|
|
/>
|
|
<span v-html="quality_standards" v-else></span>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="3"> </v-col>
|
|
</v-row>
|
|
</accordion-card>
|
|
</template>
|
|
|
|
<script>
|
|
import accordionCard from '@/components/UI/AccordionCard/AccordionCard'
|
|
|
|
import 'quill/dist/quill.core.css'
|
|
import 'quill/dist/quill.snow.css'
|
|
import 'quill/dist/quill.bubble.css'
|
|
import { quillEditor } from 'vue-quill-editor'
|
|
|
|
export default {
|
|
components: {
|
|
accordionCard,
|
|
quillEditor,
|
|
},
|
|
props: {
|
|
editMode: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
selectedEditor: '',
|
|
editorOption: {
|
|
modules: {
|
|
toolbar: [
|
|
[{ size: ['small', false, 'large'] }],
|
|
['bold', 'italic'],
|
|
[{ list: 'ordered' }, { list: 'bullet' }],
|
|
['link'],
|
|
],
|
|
},
|
|
},
|
|
}
|
|
},
|
|
computed: {
|
|
local() {
|
|
return this.$store.state.learning.local
|
|
},
|
|
|
|
short_description: {
|
|
get() {
|
|
return this.local.short_description
|
|
},
|
|
set(value) {
|
|
this.$store.commit('learning/UPDATE_FIELD', {
|
|
field: 'short_description',
|
|
value,
|
|
})
|
|
},
|
|
},
|
|
|
|
learning_goals: {
|
|
get() {
|
|
return this.local.learning_goals
|
|
},
|
|
set(value) {
|
|
this.$store.commit('learning/UPDATE_FIELD', {
|
|
field: 'learning_goals',
|
|
value,
|
|
})
|
|
},
|
|
},
|
|
|
|
review: {
|
|
get() {
|
|
return this.local.review
|
|
},
|
|
set(value) {
|
|
this.$store.commit('learning/UPDATE_FIELD', {
|
|
field: 'review',
|
|
value,
|
|
})
|
|
},
|
|
},
|
|
|
|
certification: {
|
|
get() {
|
|
return this.local.certification
|
|
},
|
|
set(value) {
|
|
this.$store.commit('learning/UPDATE_FIELD', {
|
|
field: 'certification',
|
|
value,
|
|
})
|
|
},
|
|
},
|
|
extra_information: {
|
|
get() {
|
|
return this.local.extra_information
|
|
},
|
|
set(value) {
|
|
this.$store.commit('learning/UPDATE_FIELD', {
|
|
field: 'extra_information',
|
|
value,
|
|
})
|
|
},
|
|
},
|
|
target_audience: {
|
|
get() {
|
|
return this.local.target_audience
|
|
},
|
|
set(value) {
|
|
this.$store.commit('learning/UPDATE_FIELD', {
|
|
field: 'target_audience',
|
|
value,
|
|
})
|
|
},
|
|
},
|
|
quality_standards: {
|
|
get() {
|
|
return this.local.quality_standards
|
|
},
|
|
set(value) {
|
|
this.$store.commit('learning/UPDATE_FIELD', {
|
|
field: 'quality_standards',
|
|
value,
|
|
})
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
onEditorBlur(editor) {
|
|
this.selectedEditor = ''
|
|
// console.log('editor blur!', editor)
|
|
},
|
|
onEditorFocus(editor, nameEditor) {
|
|
this.selectedEditor = nameEditor
|
|
},
|
|
onEditorReady(editor) {
|
|
// console.log('editor ready!', editor)
|
|
},
|
|
onEditorChange(editor, nameEditor) {
|
|
if (this.selectedEditor !== nameEditor) this.selectedEditor = nameEditor
|
|
// console.log('editor change!', editor)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.v-subheader {
|
|
display: unset;
|
|
}
|
|
</style> |