List Files | Just Commands | Repo | Logs

← back | Copy

<template>
  <ion-header>
    <ion-toolbar>
      <ion-title>Job Information</ion-title>
      <ion-buttons slot="end">
        <ion-button @click="dismiss()">Close</ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">
    <h3 class="section-title">Job Description</h3>
    <p class="job-description">{{ jobDescription }}</p>

    <h3 class="section-title tech-handbook-title">Tech Handbook</h3>
    <div v-if="isLoading" class="loading-message">Loading tech handbook...</div>
    <div v-else-if="tierHandbooks.length > 0">
      <div v-for="tier in tierHandbooks" :key="tier.tierName" class="tier-section">
        <h4 class="tier-name">{{ tier.tierName }}</h4>
        <ul class="handbook-list">
          <li v-for="(item, index) in tier.items" :key="index">{{ item }}</li>
        </ul>
      </div>
    </div>
    <p v-else class="no-handbook">No tech handbook information available.</p>
  </ion-content>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import {
  IonHeader,
  IonToolbar,
  IonTitle,
  IonButtons,
  IonButton,
  IonContent,
  modalController,
} from '@ionic/vue';
import { loadTechHandbookForTiers, type TierTechHandbook } from '@/framework/jobContent';

const props = defineProps<{
  jobDescription: string;
  tiers: any[];
}>();

const tierHandbooks = ref<TierTechHandbook[]>([]);
const isLoading = ref(true);

onMounted(async () => {
  tierHandbooks.value = await loadTechHandbookForTiers(props.tiers);
  isLoading.value = false;
});

const dismiss = () => {
  modalController.dismiss();
};
</script>

<style scoped>
.section-title {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 600;
}

.tech-handbook-title {
  margin-top: 24px;
}

.job-description {
  color: var(--ion-text-color);
  line-height: 1.5;
}

.tier-section {
  margin-bottom: 16px;
}

.tier-name {
  margin: 16px 0 8px 0;
  color: var(--ion-color-primary);
  font-size: 16px;
  font-weight: 600;
}

.handbook-list {
  margin: 0;
  padding-left: 20px;
}

.handbook-list li {
  margin-bottom: 4px;
  line-height: 1.4;
}

.no-handbook {
  color: var(--ion-color-medium);
  font-style: italic;
}

.loading-message {
  color: var(--ion-color-medium);
  font-style: italic;
}
</style>