List Files | Just Commands | Repo | Logs

← back | Copy

<template>
  <BaseLayout title="Browse Offer">
    <ion-grid :fixed="true">
      <ion-row>
        <ion-col
          ><h1>Browse Offer - {{ offer?.name }}</h1></ion-col
        >
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-card>
            <ion-card-header>
              <ion-card-title>Material Costs</ion-card-title>
            </ion-card-header>
            <ion-card-content>
              <ion-list>
                <ion-item v-for="cost in offer?.costsMaterial" :key="cost.id">
                  <ion-icon
                    aria-hidden="true"
                    :icon="pricetagOutline"
                    slot="start"
                  ></ion-icon>
                  {{ cost.name }} -
                  <show-currency :currencyIn="cost.quantity" />
                </ion-item>
              </ion-list>
            </ion-card-content>
          </ion-card>
          <ion-card>
            <ion-card-header>
              <ion-card-title>Time Costs</ion-card-title>
            </ion-card-header>
            <ion-card-content>
              <ion-list>
                <ion-item v-for="cost in costsTime" :key="cost.id">
                  <ion-icon
                    aria-hidden="true"
                    :icon="pricetagOutline"
                    slot="start"
                  ></ion-icon>
                  {{ cost.name || 'Unnamed' }} - {{ cost.hours || 0 }} hours
                </ion-item>
              </ion-list>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </BaseLayout>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from "vue";
import { useRoute } from "vue-router";

import { IonIcon, IonGrid, IonRow, IonCol, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonList, IonItem } from "@ionic/vue";
import { pricetagOutline } from "ionicons/icons";

import type {
  BooksRecord,
  MenusRecord,
  OffersRecord,
} from "@/pocketbase-types.ts";

import type { OffersExpanded } from "@/types.ts";

import { getDb } from "@/dataAccess/getDb";
import BaseLayout from "@/components/BaseLayout.vue";
import ShowCurrency from "@/components/ShowCurrency.vue";

import { useCurrencyStore } from "@/stores/currency";
import { usePreferencesStore } from "@/stores/preferences";

const currencyStore = useCurrencyStore();
const preferences = usePreferencesStore();

const route = useRoute();

// type MenuData = MenusRecord & { offers: OffersRecord[] };

const offer = ref<OffersExpanded>();

const costsTime = computed(() => {
  return offer.value?.costsTime || [];
});

onMounted(async () => {
  const db = await getDb();
  await currencyStore.getRates();

  const offerResponse = await db.offers.byOfferId(route.params.id as string);
  if (offerResponse) {
    offer.value = offerResponse as OffersExpanded;
  }
  // if (book.value?.id) {
  //   menus.value = (await db.menus.byBookId(book.value.id)) || [];
  //
  //   for (const menu of menus.value) {
  //     console.log(menu);
  //     menu.offers = (await db.offers.byMenuId(menu.id)) as OffersRecord[];
  //   }
  // }
});
</script>