List Files | Just Commands | Repo | Logs

← back | Copy

<template>
  <BaseLayout :title="menu.name">
    <ion-grid :fixed="true">
      <ion-row>
        <ion-col>
          <ion-card v-for="tier in menu?.tiers">
            <ion-card-header>
              <ion-card-title>
                {{ tier.title }}
              </ion-card-title>

              <ion-card-subtitle>
                {{ tier.name }}
              </ion-card-subtitle>
            </ion-card-header>
            <ion-card-content>
              <ion-grid>
                <ion-row>
                  <ion-col size="10">
                    <ion-list>
                      <span v-for="copy in tier.menuCopy">
                        <ion-item v-for="item in copy.contentItems">
                          {{ item.content }}
                        </ion-item>
                      </span>
                    </ion-list>
                  </ion-col>
                  <ion-col size="2"
                    ><ion-button>
                      <show-currency :currencyIn="tier.price" /> </ion-button
                  ></ion-col>
                </ion-row>
              </ion-grid>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </BaseLayout>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { getDb } from "@/dataAccess/getDb";
import BaseLayout from "@/components/BaseLayout.vue";
import ShowCurrency from "@/components/ShowCurrency.vue";
import calculatePrice from "@/framework/calculatePrice";
import legacyFormula from "@/lib/legacyFormula";
import { useCurrencyStore } from "@/stores/currency";
import {
  IonGrid,
  IonRow,
  IonCol,
  IonCard,
  IonCardHeader,
  IonCardTitle,
  IonCardSubtitle,
  IonCardContent,
  IonList,
  IonItem,
  IonButton,
} from "@ionic/vue";

const currencyStore = useCurrencyStore();

const route = useRoute();
const menu = ref<any>({ name: "" });

// TODO: all this is probably going to become a composable for all the menu
// templates to use

function populateFormulaVars(f: any, offer: any) {
  // TODO: this all needs to get populated with values from the database,
  // but just hardcoding some stuff for now to get it started.
  f.vars.hourlyFee = 9.857708577;
  f.vars.serviceCallFee = 2.602435064;
  f.vars.saDiscount = 1;
  f.vars.salesTax = 1.1;
  f.vars.multiplier = parseFloat(offer.multiplier);
  return f;
}

onMounted(async () => {
  await currencyStore.getRates();
  const db = await getDb();
  if (db) {
    const menuResponse = await db.menus.byMenuId(route.params.id as string);
    if (menuResponse) {
      menu.value = menuResponse;
      for (const tier of menu.value.tiers) {
        const f = populateFormulaVars(legacyFormula, tier.offer);
        const result = await calculatePrice(
          tier.offer.costsMaterial,
          tier.offer.costsTime,
          f,
        );
        tier.price = result.finalPrice;
        tier.priceConverted = result.finalPriceConverted;
        const titleItem = tier.contentItems.find((e: any) =>
          e.refId.includes("_title"),
        );
        tier.title = titleItem.content;
      }
      // console.log(menuResponse);
      // const offer = menuResponse.tiers[0].offer;
      // calculatePrice(offer.costsMaterial, offer.costsTime);
    }
  }
});
</script>

<script lang="ts">
/*

Menu variables will include data for the specific job that we're looking at,
e.g. the menu title, the costs, anything configured from the checklists.

Session variables are for the session, but accessible from all menus in the
session.

Org variables we get from the org, like hourly rate, tax rate, material markup
vars, etc.

It would be great if the menu was self-documenting, so we could always get a
list of all expected vars, their default values, and where they should be set
(menu, session, org).

A formula is NOT attached to a menu template, it is attached to a menu, so it
has it's own variables that it's looking for, all vars should have defaults,
and we still have just those three types (menu, session, org), but when
documenting the expected vars, we need to list both them menu template AND the
formula vars.

*/
</script>