List Files | Just Commands | Repo | Logs

← back | Copy

<template>
  <BaseLayout title="Browse Book">
    <ion-grid :fixed="true">
      <ion-row>
        <ion-col
          ><h1>Browse Book - {{ book?.name }}</h1></ion-col
        >
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-card v-for="problem in problems">
            <ion-card-header>
              <ion-card-title
                ><router-link :to="`/menus/${problem.menus?.[0]}/show/legacy`">{{
                  problem.name
                }}</router-link></ion-card-title
              >
            </ion-card-header>
          </ion-card>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col>
          <ion-card v-for="menu in menus">
            <ion-card-header>
              <ion-card-title
                ><router-link :to="`/menus/${menu.id}/browse`">{{
                  menu.name
                }}</router-link></ion-card-title
              >
            </ion-card-header>
            <ion-card-content>
              <ion-list>
                <ion-item v-for="offer in menu.offers">
                  <ion-icon
                    aria-hidden="true"
                    :icon="pricetagOutline"
                    slot="start"
                  ></ion-icon>
                  {{ offer.name }}
                  <router-link :to="`/offers/${offer.id}/browse`"
                    >link</router-link
                  >
                </ion-item>
              </ion-list>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </BaseLayout>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute, RouterLink } 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,
  ProblemsRecord,
} from "@/pocketbase-types.ts";

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

const route = useRoute();

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

const book = ref<BooksRecord>();
const menus = ref<MenuData[]>([]);
const problems = ref<ProblemsRecord[]>([]);

onMounted(async () => {
  const db = await getDb();
  if (db) {
    problems.value = (await db.problems.getAll()) || [];
    // problems.value = (await db.selectAll("poblems")) || [];
    const books = (await db.books.getAll()) || [];
    book.value = books.find((e: { id: string }) => e.id == route.params.id);
    if (book.value?.id) {
      menus.value = (await db.menus.byBookId(book.value.id)) || [];
      for (const menu of menus.value) {
        menu.offers = (await db.offers.byMenuId(menu.id)) as OffersRecord[];
      }
    }
  }
});
</script>