radiocheck.vue

<template>
  <div
    :class="cssClasses()"
    class="cmp-radio-wrap"
  >
    <input
      :type="type"
      :id="id"
      :name="name"
      :disabled="disabled"
      v-model="value"
      :value="inputValue"
      class="visually-hidden"
      @click="click"
    >
    <label
      :for="id"
      :key="id"
      :class="{'cmp-checkbox': type === 'checkbox'}"
      class="d-block"
    >
      {{ label }}
    </label>
  </div>
</template>

<script>
// TODO: research set radio checked
// https://jsfiddle.net/n8bdfhah/
export default {
  name: 'DxRadioCheck',
  props: {
    name: {
      type: String,
      required: true,
    },
    id: {
      type: String,
      default: '',
    },
    label: {
      type: String,
      default: 'I am the radio label',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    error: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: 'radio',
    },
    inputValue: {
      type: [String, Number, Boolean],
      default: '',
    },
    value: {
      type: [String, Number, Boolean],
      default: '',
    },
  },
  data() {
    return {
      updatedValue: '',
    }
  },
  methods: {
    cssClasses() {
      return {
        error: this.error,
      }
    },
    click(_event) {
      console.count('click')
      this.$emit('choose', this.inputValue)
    },
  },
}
</script>

<style lang="scss" scoped>
  @import "styles/index";
</style>

radiolist.vue

<template>
  <div>
    <label class="std-label">
      {{ label }}
    </label>
    <dx-radio-check
      v-for="(option, index) in options"
      :key="`${name}-${index}`"
      :id="`${name}-${index}`"
      :label="option.text"
      :name="name"
      :value.sync="value"
      :input-value="option.id"
      @choose="choose(option.id)"
    />
  </div>
</template>

<script>
import DxRadioCheck from '~/components/Forms/DX-RadioCheck'
import Vue from 'vue'

export default {
  name: 'DxRadioList',
  components: {
    DxRadioCheck,
  },
  props: {
    label: {
      type: String,
      default: '',
    },
    name: {
      type: String,
      default: '',
    },
    value: {
      type: [String, Number, Boolean],
      default: '',
    },
    options: {
      type: [Array, Object],
      default() {
        return [
          {
            id: this._uid.toString(), // eslint-disable-line
            text: '',
          },
        ]
      },
    },
  },
  methods: {
    choose(value) {
      console.log('____')
      Vue.nextTick(() => {
        console.count('choose')
        this.$emit('input', value)
      })
    },
  },
}
</script>

<style lang="scss" scoped>
  @import "styles/index";
</style>

toplevel.vue

<template>
  <div
    v-if="!$apollo.queries.profile.loading"
    class="personal-data-form"

  >
    <dx-edit-data-toggle
      :headline="personalDataHeadline"
      :callback="editAddressCallback"
      :collapsed.sync="collapsed"
    >
      <template slot="data-non-edit-mode">
        <ul
          v-if="!$apollo.queries.profile.loading"
          class="reset-list"
        >
          <li v-if="customerData.isCompany">{{ 'getCompany name here' }}</li>
          <li>{{ $t(customerData.salutation) + ' ' + customerData.firstname + ' ' + customerData.lastname }}</li>
          <li>{{ customerData.street + ' ' + customerData.number }}</li>
          <li>{{ customerData.zip + ' ' + customerData.city }}</li>
          <li
            v-if="customerData.isAdressMutation"
            class="mt-3"
          >
            {{ $t('willChangedAt') }}: {{ customerData.validFrom }}
          </li>
        </ul>
      </template>

      <template slot="data-edit-mode">
        <dx-radio-list
          :options="salutationOptions"
          v-model="customerData.salutation"
          label="Anrede"
          name="personal_data_gender"
          class="mb-4"
        />

        <dx-input
          v-if="profile.person.isCompany"
          :label="$t('company')"
          v-model="customerData.company"
          has-icon="orange-cross"
          class="mb-4"
        />

        <dx-input
          :label="$t('firstname')"
          v-model="customerData.firstname"
          has-icon="orange-cross"
          class="mb-4"
        />

        <dx-input
          :label="$t('lastname')"
          v-model="customerData.lastname"
          has-icon="orange-cross"
          class="mb-4"
        />

        <div class="d-flex mb-4">
          <dx-input
            :label="$t('street')"
            v-model="customerData.street"
            has-icon="orange-cross"
            class="mr-3 w-75"
          />
          <dx-input
            :label="$t('houseNumber')"
            v-model="customerData.number"
            has-icon="orange-cross"
            class="w-40"
          />
        </div>

        <div class="d-flex mb-4">
          <dx-input
            :label="$t('plz')"
            v-model="customerData.zip"
            has-icon="orange-cross"
            class="mr-3 w-40"
          />
          <dx-input
            v-model="customerData.city"
            plain-text
            class="w-60"
          />
        </div>

        <dx-input
          :label="$t('email')"
          v-model="customerData.email"
          type="email"
          has-icon="orange-cross"
          class="mb-4"
        />

        <dx-input
          v-if="customerDataChanged"
          v-model="customerData.validFrom"
          :label="$t('changedAt')"
          type="date"
          is-date-input
          class="mb-4"
        />

        <dx-radio-list
          v-if="customerDataChanged"
          :options="policyOptions"
          v-model="customerData.newPolice"
          label="Neue Policen generieren?"
          name="regenerate_policy"
          class="mb-4"
        />
      </template>
    </dx-edit-data-toggle>
  </div>
</template>

<script>
import DxEditDataToggle from '~/components/DX-EditDataToggle'
import DxInput from '~/components/Forms/DX-Input'
import DxRadioList from '~/components/Forms/DX-RadioList'
import DxSelect from '~/components/Forms/DX-Select'
import updateAddressMutation from '~/apollo/mutations/updateAddressMutation'
import createAddressMutation from '~/apollo/mutations/createAddressMutation'
import getProfile from '~/apollo/queries/getProfileDataForSelfServiceQuery'

export default {
  name: 'DxPersonalDataForm',
  components: {
    DxEditDataToggle,
    DxInput,
    DxRadioList,
    DxSelect,
  },
  data() {
    return {
      salutationOptions: [
        {
          text: this.$t('female'),
          id: 'female',
        },
        {
          text: this.$t('male'),
          id: 'male',
        },
      ],
      policyOptions: [
        {
          text: this.$t('yes'),
          id: true,
        },
        {
          text: this.$t('no'),
          id: false,
        },
      ],
      address: null,
      addressMutation: null,

      customerData: {
        isCompany: false,
        company: null,
        salutation: null,
        firstname: null,
        lastname: null,
        email: null,
        street: null,
        number: null,
        zip: null,
        city: null,
        validFrom: null,
        newPolice: false,
        isAdressMutation: false,
      },
      customerDataChanged: false,
      collapsed: false,
      personalDataHeadline: this.$t('adress'),
    }
  },
  watch: {
    customerData: {
      handler() {
        this.customerDataChanged = true
      },
      deep: true,
    },
  },
  apollo: {
    profile: {
      query: getProfile,
      result({ data }) {
        const { person } = data.profile

        this.customerData.salutation = person.salutation
        this.customerData.company = `${person.isCompany}`
        this.customerData.email = person.contactDetails.email
        this.customerData.firstname = person.firstName
        this.customerData.lastname = person.lastName

        if (person.addressMutation) {
          this.customerData.street = person.addressMutation.street
          this.customerData.number = person.addressMutation.number
          this.customerData.zip = person.addressMutation.zip
          this.customerData.city = person.addressMutation.city
          this.customerData.validFrom = person.addressMutation.validFrom
          this.customerData.isAdressMutation = true
        } else {
          this.customerData.street = person.address.street
          this.customerData.number = person.address.number
          this.customerData.zip = person.address.zip
          this.customerData.city = person.address.city
        }
      },
    },
  },
  methods: {
    foo() {
      debugger
    },
    editAddressCallback() {
      return this.addressMutation !== null ? this.updateAddressMutationFunction() : this.createAddressMutationFunction()
    },
    updateAddressMutationFunction() {
      const variables = {
        address: {
          street: this.customerData.street,
          number: this.customerData.number,
          zip: this.customerData.zip,
          city: this.customerData.city,
          validFrom: this.customerData.validFrom,
          newPolice: this.customerData.newPolice,
          hash: this.customerData.hash,
        },
      }
      this.$apollo.mutate({
        mutation: updateAddressMutation,
        variables,
      }).then(this.finishAddressMutation)
    },
    createAddressMutationFunction() {
      const variables = {
        address: {
          street: this.customerData.street,
          number: this.customerData.number,
          zip: this.customerData.zip,
          city: this.customerData.city,
          validFrom: this.customerData.validFrom,
          newPolice: this.customerData.newPolice,
        },
      }
      this.$apollo.mutate({
        mutation: createAddressMutation,
        variables,
      }).then(this.finishAddressMutation)
    },
    finishAddressMutation() {
      this.collapsed = false
      this.personalDataHeadline = `${this.personalDataHeadline} ${this.$t('changed')}`
    },
  },
}
</script>