BuildingApartments.vue

<script setup>
import { ref } from 'vue'

import ApartmentList from '@/components/ApartmentList.vue'
import ContentPanel from '@/components/ContentPanel.vue'
import DataItem from '@/components/DataItem.vue'
import DataPage from '@/components/DataPage.vue'
import ModalContainer from '@/components/ModalContainer.vue'
import NoData from '@/components/NoData.vue'
import ApartmentForm from '@/components/forms/ApartmentForm.vue'
import { useApartmentStore } from '@/stores/apartments'
import { useBuildingStore } from '@/stores/buildings'

const showModal = ref(false)

const buildings = useBuildingStore()
const apartments = useApartmentStore()

function handleModal() {
  showModal.value = !showModal.value
}
</script>

<template>
  <ContentPanel label="Ihre Wohneinheiten">
    <DataPage>
      <div class="apartment-summary" v-if="buildings.active && apartments.count > 0">
        <div class="content stretched">
          <DataItem label="Wohneinheiten" :data="apartments.summary?.apartments" />
          <DataItem label="Fläche gesamt" :data="apartments.summary?.area" unit="m²" />
          <DataItem label="Fenster gesamt" :data="apartments.summary?.windows" />
        </div>
        <div class="content stretched">
          <DataItem label="Heizkörper" :data="apartments.summary?.heatingElements" />
          <DataItem label="Flächenheizung" :data="apartments.summary?.panelHeating" unit="m²" />
        </div>
      </div>
      <NoData v-else />
    </DataPage>
    <DataPage :stretch="true">
      <ApartmentList @on-create="() => showModal = true" />
    </DataPage>
  </ContentPanel>
  <ModalContainer v-if="showModal" label="Wohneinheit anlegen" @close-modal="handleModal">
    <ApartmentForm @close-modal="handleModal" />
  </ModalContainer>
</template>

<style scoped>
.apartment-summary {
  height: 100%;
  display: flex;
  flex-direction: column;
}

@media (min-width: 48em) {
  .apartment-summary {
    flex-direction: row;
    gap: var(--spacing);
  }
}
</style>