List Files | Just Commands | Repo | Logs

← back | Copy

<template>
  <BaseLayout title="Technician - Organization">
    <!-- Toolbar at top of screen -->
    <Toolbar @help-clicked="openInfoModal" />

    <div class="org-container">
      <h2 class="org-title">Organization Details</h2>

      <!-- Organization Info Section -->
      <div class="section">
        <h3 class="section-heading">{{ org?.name }}</h3>
        <div class="action-buttons">
          <ion-button
            expand="block"
            color="primary"
            @click="navigateTo(`/organization/${org?.id}/manage`)"
          >
            <ion-icon slot="start" :icon="settingsOutline"></ion-icon>
            Manage Organization
          </ion-button>
        </div>
      </div>

      <!-- Pricebooks Section -->
      <div class="section">
        <h3 class="section-heading">Available Pricebooks</h3>
        <div v-if="books && books.length > 0" class="list-grid">
          <div
            v-for="book in books"
            :key="book.id"
            class="list-item"
            @click="navigateTo(`/books/${book?.id}/browse`)"
          >
            <ion-icon :icon="bookOutline" class="list-icon"></ion-icon>
            <div class="list-content">
              <span class="list-title">{{ book?.name }}</span>
            </div>
            <ion-icon :icon="eyeOutline" class="list-action-icon"></ion-icon>
          </div>
        </div>
        <div v-else class="empty-message">
          <p>No pricebooks available for this organization.</p>
        </div>
      </div>
    </div>

    <!-- Info Modal -->
    <ion-modal :is-open="isInfoModalOpen" @didDismiss="closeInfoModal">
      <ion-header>
        <ion-toolbar>
          <ion-title>Organization Data</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({ org, books }, null, 2) }}</pre>
        </div>
      </ion-content>
    </ion-modal>
  </BaseLayout>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getApi } from "@/dataAccess/getApi";
import { getDb } from "@/dataAccess/getDb";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";

import {
  IonIcon,
  IonButton,
  IonModal,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonButtons,
  IonContent,
} from "@ionic/vue";

import {
  eyeOutline,
  bookOutline,
  settingsOutline,
} from "ionicons/icons";

import { BooksRecord, OrganizationsRecord } from "@/pocketbase-types";
import BaseLayout from "@/components/BaseLayout.vue";
import Toolbar from "@/components/Toolbar.vue";

const router = useRouter();
const route = useRoute();
const org = ref<OrganizationsRecord>();
const books = ref<BooksRecord[]>();
const isInfoModalOpen = ref(false);

let pb: any = null;

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

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

const navigateTo = (path: string) => {
  router.push(path);
};

onMounted(async () => {
  const api = await getApi();
  const db = await getDb();
  pb = api.pb;
  org.value = await pb.collection("organizations").getOne(route.params.id);
  books.value = await db.books.getAll();
});
</script>

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

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

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

.section {
  margin-bottom: 40px;
}

.section-heading {
  margin: 0 0 20px 0;
  color: var(--ion-text-color);
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
  margin: 0 auto;
}

.list-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background-color: var(--ion-background-color-step-50);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background 0.2s;
}

.list-item:hover {
  background: rgba(118, 221, 84, 0.1);
}

.list-icon {
  font-size: 24px;
  color: var(--ion-color-primary);
  flex-shrink: 0;
}

.list-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.list-title {
  color: var(--ion-text-color);
  font-size: 16px;
  font-weight: 600;
}

.list-action-icon {
  font-size: 20px;
  color: var(--ion-color-medium);
  flex-shrink: 0;
}

.empty-message {
  text-align: center;
  padding: 40px 20px;
  color: var(--ion-color-medium);
  font-style: italic;
}

/* 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;
}

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

  .org-title {
    font-size: 28px;
  }

  .section-heading {
    font-size: 20px;
  }

  .list-item {
    padding: 12px;
  }

  .list-icon {
    font-size: 20px;
  }
}
</style>