List Files | Just Commands | Repo | Logs

← back | Copy

<template>
  <BaseLayout title="Technician - Add Jobs">
    <!-- Toolbar at top of screen -->
    <Toolbar :force-step4="true" @help-clicked="openInfoModal" />

    <div class="add-jobs-container">
      <h2 class="add-jobs-title">Is there more work to do on this service call?</h2>

      <div class="yes-no-buttons">
        <YesButton @click="handleYes" />
        <button
          @click="handleNo"
          class="no-button"
        >
          No
        </button>
      </div>

      <!-- Action Bar -->
      <ActionBar title="Show Menus" :flash="true" :disabled="true" @next="handleYes" />
    </div>

    <!-- Info Modal -->
    <ion-modal :is-open="isInfoModalOpen" @didDismiss="closeInfoModal">
      <ion-header>
        <ion-toolbar>
          <ion-title>Session Store</ion-title>
          <ion-buttons slot="end">
            <ion-button @click="closeInfoModal">Close</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding">
        <div class="info-content">
          <pre>{{ JSON.stringify(sessionStore.$state, null, 2) }}</pre>
        </div>
      </ion-content>
    </ion-modal>
  </BaseLayout>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  IonModal,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonButtons,
  IonButton,
  IonContent,
} from "@ionic/vue";
import BaseLayout from "@/components/BaseLayout.vue";
import Toolbar from "@/components/Toolbar.vue";
import ActionBar from "@/components/ActionBar.vue";
import YesButton from "@/components/YesButton.vue";
import { getDb } from "@/dataAccess/getDb";
import { useSessionStore } from "@/stores/session";
import type { ProblemsRecord } from "@/pocketbase-types";

const route = useRoute();
const router = useRouter();
const sessionStore = useSessionStore();

const problem = ref<ProblemsRecord | null>(null);
const isInfoModalOpen = ref(false);

onMounted(async () => {
  const problemId = route.params.problemId as string;
  const db = await getDb();

  if (db && problemId) {
    problem.value = await db.problems.byId(problemId);
  }

  // Load session to ensure we have the latest data
  await sessionStore.load();
});

const openInfoModal = () => {
  isInfoModalOpen.value = true;
};

const closeInfoModal = () => {
  isInfoModalOpen.value = false;
};

const handleYes = async () => {
  // Set step4 to "pending" to indicate repeating/adding more jobs (shows warning color)
  // Reset earlier steps to allow adding another job
  sessionStore.appProgress.step1 = false;
  sessionStore.appProgress.step2 = false;
  sessionStore.appProgress.step3 = false;
  sessionStore.appProgress.step4 = "pending";
  await sessionStore.save();

  // Navigate to service-call to see current jobs and add more
  router.push('/service-call');
};

const handleNo = async () => {
  // Set step4 to true (moving to pass to customer step)
  sessionStore.appProgress.step4 = true;
  await sessionStore.save();

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

<style scoped>
:deep(.ion-page) {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

.add-jobs-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

.add-jobs-title {
  margin: 0 0 32px 0;
  color: var(--ion-text-color);
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  font-variant: small-caps;
}

.yes-no-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}

.no-button {
  display: inline-block;
  padding: 16px 48px;
  font-size: 20px;
  font-weight: 600;
  color: var(--ion-color-secondary-contrast);
  background-color: var(--ion-color-secondary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.no-button:hover:not(:disabled) {
  transform: scale(1.05);
  background-color: var(--ion-color-secondary-shade);
}

.no-button:active:not(:disabled) {
  transform: scale(0.95);
}

.no-button:disabled {
  background-color: var(--ion-background-color);
  border: 3px solid var(--ion-color-secondary);
  color: var(--ion-color-secondary);
  opacity: 0.6;
  cursor: not-allowed;
}

.no-button:disabled:hover {
  background-color: var(--ion-background-color);
  transform: none;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .add-jobs-container {
    padding: 16px;
  }

  .add-jobs-title {
    font-size: 28px;
  }

  .no-button {
    font-size: 18px;
    padding: 12px 36px;
  }
}

/* Info Modal Styles */
.info-content {
  color: var(--ion-color-dark);
}

.info-content pre {
  background: var(--ion-color-light);
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>