GqlMutationFormWithNotes.vue

<template>
  <div>
    <GqlMutationForm v-bind="$attrs" @done="done">
      <template v-slot:form>
        <slot name="form" />
        <OperatorNote :note="note" @note-update="noteUpdate" />
      </template>

      <slot v-for="(_, name) in $slots" :slot="name" :name="name" />

      <template
        v-for="(_, name) in $scopedSlots"
        :slot="name"
        slot-scope="slotData"
      >
        <slot :name="name" v-bind="{ ...slotData }" />
      </template>
    </GqlMutationForm>
  </div>
</template>

<script>
import GqlMutationForm from '@/components/GqlMutationForm'
import OperatorNote from '@/components/note/Note.vue'
import { noteMutation } from '@/components/note/noteMutation.js'

export default {
  components: {
    GqlMutationForm,
    OperatorNote,
  },
  props: {
    type: {
      type: String,
      default: 'extract_method',
    },
  },
  methods: {
    done(entity) {
      this.$emit('done', entity)
      this.noteMutation(
        this.$route.params.id,
        this.type,
        this.note,
        this.$apollo
      )
    },
    noteUpdate(val) {
      this.note = val
    },
  },
}
</script>