- 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
This commit is contained in:
Joris Slagter
304
components/Learning/ProductOverview/Texts.vue
Normal file
304
components/Learning/ProductOverview/Texts.vue
Normal file
@@ -0,0 +1,304 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user