List Files | Just Commands | Repo | Logs

← back | Copy

<template>
  <ion-list>
    <ion-item
      button
      :detail="false"
      @click="navigateTo('/theme-settings')"
    >
      <ion-label>Theme</ion-label>
    </ion-item>

    <ion-item
      button
      :detail="false"
      @click="navigateTo('/profile')"
    >
      <ion-label>Profile</ion-label>
    </ion-item>

    <ion-item
      button
      :detail="false"
      @click="navigateTo('/price-list')"
    >
      <ion-label>Price List</ion-label>
    </ion-item>

    <ion-item
      id="currency-trigger"
      button
      :detail="false"
      @click="currencyOpen = true"
    >
      <ion-label>Currency</ion-label>
    </ion-item>

    <ion-item
      id="roles-trigger"
      button
      :detail="false"
      @click="rolesOpen = true"
    >
      <ion-label>Roles</ion-label>
    </ion-item>

    <ion-item
      button
      :detail="false"
      @click="handleDebug"
    >
      <ion-label>{{ debugLabel }}</ion-label>
    </ion-item>

    <ion-item
      button
      :detail="false"
      @click="handleClearServiceCall"
    >
      <ion-label color="warning">Clear Service Call</ion-label>
    </ion-item>

    <ion-item
      button
      :detail="false"
      @click="handleLogout"
      class="logout-item"
    >
      <ion-label color="danger">Logout</ion-label>
    </ion-item>
  </ion-list>

  <ion-popover
    trigger="currency-trigger"
    side="left"
    alignment="start"
    :isOpen="currencyOpen"
    @didDismiss="currencyOpen = false"
  >
    <ion-list>
      <ion-item
        v-for="currency of currencies"
        :key="currency.refId"
        button
        :detail="false"
        @click="() => chooseCurrency(currency.refId)"
      >
        {{ currency.symbol }} {{ currency.name }}
      </ion-item>
    </ion-list>
  </ion-popover>

  <ion-popover
    trigger="roles-trigger"
    side="left"
    alignment="start"
    :isOpen="rolesOpen"
    @didDismiss="rolesOpen = false"
  >
    <ion-list>
      <ion-item
        v-for="role of roles"
        :key="role.value"
        button
        :detail="false"
        @click="() => chooseRole(role.value)"
      >
        {{ role.label }}
      </ion-item>
    </ion-list>
  </ion-popover>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import {
  popoverController,
  IonList,
  IonItem,
  IonLabel,
  IonPopover,
} from "@ionic/vue";
import { useSessionStore } from "@/stores/session";
import { useTnfrStore } from "@/stores/tnfr";

const router = useRouter();
const sessionStore = useSessionStore();
const tnfrStore = useTnfrStore();

const props = defineProps<{
  currencies: any[];
  setCurrency: (currency: string) => void;
  onDebug?: () => void;
  onRoleChange?: (role: string) => void;
}>();

const debugLabel = computed(() => sessionStore.debugMode ? 'Debug: ON' : 'Debug: OFF');

const currencyOpen = ref(false);
const rolesOpen = ref(false);

const roles = [
  { value: 'tech-in-training', label: 'Tech in Training' },
  { value: 'tech', label: 'Tech' },
  { value: 'author', label: 'Author' },
  { value: 'admin', label: 'Admin' },
];

function chooseCurrency(currencyName: string) {
  currencyOpen.value = false;
  setTimeout(() => {
    props.setCurrency(currencyName);
  }, 200);
}

function chooseRole(role: string) {
  rolesOpen.value = false;
  setTimeout(() => {
    if (props.onRoleChange) {
      props.onRoleChange(role);
    }
  }, 200);
}

async function handleDebug() {
  // Toggle global debug mode
  sessionStore.toggleDebugMode();

  // Close the popover
  await popoverController.dismiss();
}

async function navigateTo(path: string) {
  await popoverController.dismiss();
  router.push(path);
}

async function handleClearServiceCall() {
  await popoverController.dismiss();
  tnfrStore.clear();
  await tnfrStore.save();
  router.push('/cart');
}

async function handleLogout() {
  await popoverController.dismiss();

  // Clear PocketBase auth
  const { getApi } = await import('@/dataAccess/getApi');
  const { pb } = await getApi();
  pb.authStore.clear();

  // Navigate to login
  router.push('/login');
}
</script>