List Files | Just Commands | Repo | Logs

← back | Copy

<template>
  <BaseLayout title="Browse Menu">
    <ion-grid :fixed="true">
      <ion-row>
        <ion-col>
          <h1>Browse Menu - {{ menu?.name }}</h1>
          <router-link :to="`/menus/${menu?.id}/show/legacy`"
            >Show Menu</router-link
          >
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-card v-for="tier in menu?.tiers">
            <ion-card-header>
              <ion-card-title>
                {{ tier.name }}
              </ion-card-title>
            </ion-card-header>
            <ion-card-content>
              {{ tier.offer.name }}
            </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 { getDb } from "@/dataAccess/getDb";
import BaseLayout from "@/components/BaseLayout.vue";
import { IonGrid, IonRow, IonCol, IonCard, IonCardHeader, IonCardTitle, IonCardContent } from "@ionic/vue";

const route = useRoute();

const menu = ref<any>();

onMounted(async () => {
  const db = await getDb();
  if (db) {
    const menuResponse = await db.menus.byMenuId(route.params.id as string);
    if (menuResponse) {
      menu.value = menuResponse;
    }
  }
});
</script>