nuxt-frontend/components/Learning/ProductOverview/Administration.vue

<template>
  <accordion-card :title="$t('learning.product_overview.administration')">
    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text font-weight-black in_the_picture"
          >Van leden voor leden</v-subheader
        >
      </v-col>
      <v-col cols="12" sm="12" md="9" class="mb-4 d-flex flex-column">
        <div class="pb-0 mb-0 d-flex">
          <v-switch
            :disabled="!editMode"
            inset
            class="my-3 toggle"
            v-model="for_members"
          />
        </div>
      </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.owner')
        }}</v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <v-text-field
          v-model="owner"
          :placeholder="$t('learning.product_overview.placeholder.description')"
          :outlined="editMode"
          :solo="!editMode"
          :disabled="!editMode"
          :flat="!editMode"
        ></v-text-field>
      </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.partner')
        }}</v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <v-text-field
          v-model="partner"
          :placeholder="$t('learning.product_overview.placeholder.description')"
          :outlined="editMode"
          :solo="!editMode"
          :disabled="!editMode"
          :flat="!editMode"
        ></v-text-field>
      </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">
          Leverancier
        </v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <v-text-field
          v-model="supplier"
          :placeholder="$t('learning.product_overview.placeholder.description')"
          :outlined="editMode"
          :solo="!editMode"
          :disabled="!editMode"
          :flat="!editMode"
        ></v-text-field>
      </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.contract_agreements')
        }}</v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <quill-editor
          v-model="contract_agreements"
          :options="editorOption"
          class="quill"
          @focus="isEditorFocused = true"
          @blur="isEditorFocused = false"
          @change="onEditorChange()"
          :class="{ focused: isEditorFocused }"
          v-if="editMode"
        />

        <span v-html="contract_agreements" 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">
          Prognose gebruik aantal leden
        </v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <v-text-field
          v-model="prognosis_members"
          :outlined="editMode"
          :solo="!editMode"
          :disabled="!editMode"
          :flat="!editMode"
        ></v-text-field>
      </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">
          Prognose gebruik aantal deelnemers
        </v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <v-text-field
          v-model="prognosis_attendees"
          :outlined="editMode"
          :solo="!editMode"
          :disabled="!editMode"
          :flat="!editMode"
        ></v-text-field>
      </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 {
      isEditorFocused: false,
      editorOption: {
        modules: {
          toolbar: [
            [{ size: ['small', false, 'large'] }],
            ['bold', 'italic'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['link'],
          ],
        },
      },
    }
  },
  computed: {
    local() {
      return this.$store.state.learning.local
    },
    owner: {
      get() {
        return this.local.owner || ''
      },
      set(value) {
        this.$store.commit('learning/UPDATE_FIELD', {
          field: 'owner',
          value,
        })
      },
    },
    partner: {
      get() {
        return this.local.partner || ''
      },
      set(value) {
        this.$store.commit('learning/UPDATE_FIELD', {
          field: 'partner',
          value,
        })
      },
    },
    supplier: {
      get() {
        return this.local.supplier || ''
      },
      set(value) {
        this.$store.commit('learning/UPDATE_FIELD', {
          field: 'supplier',
          value,
        })
      },
    },
    contract_agreements: {
      get() {
        return this.local.contract_agreements || ''
      },
      set(value) {
        this.$store.commit('learning/UPDATE_FIELD', {
          field: 'contract_agreements',
          value,
        })
      },
    },
    prognosis_members: {
      get() {
        return this.local.prognosis_members || ''
      },
      set(value) {
        this.$store.commit('learning/UPDATE_FIELD', {
          field: 'prognosis_members',
          value,
        })
      },
    },
    prognosis_attendees: {
      get() {
        return this.local.prognosis_attendees || ''
      },
      set(value) {
        this.$store.commit('learning/UPDATE_FIELD', {
          field: 'prognosis_attendees',
          value,
        })
      },
    },
    for_members: {
      get() {
        return this.local.for_members
      },
      set(value) {
        this.$store.commit('learning/UPDATE_FIELD', {
          field: 'for_members',
          value,
        })
      },
    },
  },
  methods: {
    onEditorChange() {
      if (!this.isEditorFocused) this.isEditorFocused = true
      // console.log('editor change!', editor)
    },
  },
}
</script>