BasementForm.vue

<script setup>
import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
import useVuelidate from '@vuelidate/core'
import { required } from '@vuelidate/validators'

import CheckboxWrapper from '@/components/CheckboxWrapper.vue'
import InputGroup from '@/components/InputGroup.vue'
import MessageBox from '@/components/MessageBox.vue'
import SectionTitle from '@/components/SectionTitle.vue'
import { MESSAGES } from '@/data/messages'
import { INSULATING_MATERIAL_OPTIONS } from '@/data/options'
import { resetAlert } from '@/helpers'
import { useBuildingStore } from '@/stores/buildings'

let timeout = null

const message = ref(null)
const messageType = ref(null)

const buildings = useBuildingStore()

// Initial values
const state = reactive({
  basementInsulatingMaterial: null,
  basementInsulatingMaterialThickness: 0,
  basementRefurbishmentComment: '',
  heatedBasement: false,
  insulatedBasementCeiling: false,
  insulatedBasementFloor: false
})

const rules = computed(() => {
  return {
    basementInsulatingMaterial: { required },
    basementInsulatingMaterialThickness: { required },
    basementRefurbishmentComment: {},
    heatedBasement: {},
    insulatedBasementCeiling: {},
    insulatedBasementFloor: {}
  }
})

const v$ = useVuelidate(rules, state)

async function onSubmit() {
  try {
    clearTimeout(timeout)
    message.value = null

    const isValid = await v$.value.$validate()

    if (!isValid) {
      message.value = MESSAGES['INVALID_INPUT']
      messageType.value = 'warning'

      timeout = resetAlert(message)

      return
    }

    const response = await buildings.updateBuildingBasement(buildings.active, state)

    if (response.success) {
      message.value = MESSAGES[response.message]
      messageType.value = 'success'

      await buildings.fetchBuildings()
    } else {
      message.value = MESSAGES[response.message]
      messageType.value = 'danger'
    }

    timeout = resetAlert(message)
  } catch (error) {
    console.error('ERROR:', error.name)
  }
}

onMounted(() => {
  if (buildings.current) {
    state.basementInsulatingMaterial = buildings.current.data.basementInsulatingMaterial
    state.basementInsulatingMaterialThickness = buildings.current.data.basementInsulatingMaterialThickness
    state.basementRefurbishmentComment = buildings.current.data.basementRefurbishmentComment
    state.heatedBasement = buildings.current.data.heatedBasement
    state.insulatedBasementCeiling = buildings.current.data.insulatedBasementCeiling
    state.insulatedBasementFloor = buildings.current.data.insulatedBasementFloor
  }
})

onUnmounted(() => {
  clearTimeout(timeout)
})
</script>

<template>
  <div class="form">
    <form @submit.prevent="onSubmit">
      <div class="form-content">
        <SectionTitle value="Kellerdämmung" />
        <InputGroup :row="true">
          <InputGroup>
            <label for="basement-material">Material</label>
            <select id="basement-material" v-model="state.basementInsulatingMaterial">
              <option disabled>Bitte wählen</option>
              <option v-for="option in INSULATING_MATERIAL_OPTIONS" :value="option.value" :key="option.value">
                {{ option.name }}
              </option>
            </select>
          </InputGroup>
          <InputGroup>
            <label for="basement-thickness">Dicke Dämmstoff (cm)</label>
            <input class="number" id="basement-thickness" type="number"
              v-model="state.basementInsulatingMaterialThickness" />
          </InputGroup>
        </InputGroup>
        <InputGroup :row="true">
          <InputGroup>
            <label for="basement-ceiling">Kellerdecke</label>
            <CheckboxWrapper value="gedämmt">
              <input id="basement-ceiling" type="checkbox" v-model="state.insulatedBasementCeiling" />
            </CheckboxWrapper>
          </InputGroup>
          <InputGroup>
            <label for="basement-floor">Kellerboden</label>
            <CheckboxWrapper value="gedämmt">
              <input id="basement-floor" type="checkbox" v-model="state.insulatedBasementFloor" />
            </CheckboxWrapper>
          </InputGroup>
          <InputGroup>
            <label for="basement-heated">Keller beheizt</label>
            <CheckboxWrapper value="beheizt">
              <input id="basement-heated" type="checkbox" v-model="state.heatedBasement" />
            </CheckboxWrapper>
          </InputGroup>
        </InputGroup>
        <InputGroup>
          <label for="basement-comment">Zusätzliche Kommentare</label>
          <MessageBox msg="Tragen Sie weitere Informationen zum Keller ein." type="basic" />
          <textarea id="basement-comment" :rows="5" v-model="state.basementRefurbishmentComment" />
          <MessageBox v-if="state.heatedBasement && !state.insulatedBasementFloor"
            msg="Hinweis für die Bewertung: Der Kellerboden sollte gedämmt sein." type="success" />
          <MessageBox v-if="!state.heatedBasement && !state.insulatedBasementCeiling"
            msg="Hinweis für die Bewertung: Die Kellerdecke sollte gedämmt sein." type="success" />
        </InputGroup>
      </div>
      <div class="form-section">
        <MessageBox v-if="message" :msg="message" :type="messageType" />
        <button class="button primary" type="submit" :disabled="message">
          <span>Speichern</span>
        </button>
      </div>
    </form>
  </div>
</template>