ApartmentList.vue

<script setup>
import ApartmentCard from '@/components/ApartmentCard.vue'
import NoData from '@/components/NoData.vue'
import { useApartmentStore } from '@/stores/apartments'
import { useBuildingStore } from '@/stores/buildings'

defineEmits(['onCreate'])

const apartments = useApartmentStore()
const buildings = useBuildingStore()
</script>

<template>
  <div class="apartment-list">
    <div class="apartment-list__grid" v-if="buildings.active && apartments.ofBuilding.length > 0">
      <ApartmentCard v-for="apartment in apartments.ofBuilding" :key="apartment._id" :data="apartment" />
    </div>
    <NoData v-else />
    <div class="content">
      <button class="button primary" type="button" @click="$emit('onCreate')" :disabled="!buildings.active">
        <span>Wohneinheit anlegen</span>
      </button>
    </div>
  </div>
</template>

<style scoped>
.apartment-list {
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.apartment-list__grid {
  overflow-y: auto;
  padding: var(--spacing);
  flex: 1;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: min-content;
  gap: var(--spacing);
}

@media (min-width: 48em) {
  .apartment-list__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>