WorkshopTasker/components/orderView.vue

<script setup lang="ts">
import type { useFetch } from '#imports';

type Order = Awaited<ReturnType<typeof useFetch<void, any, "/api/orders/:id", "get">>>["data"]["value"];

const props = defineProps<{
  order?: Order | undefined
}>();

</script>

<template>
  <!-- <VRow v-if="props.order">
    {{ props.order.id }}
  </VRow> -->
  <VCol>
    <div v-if="props.order && props.order.work.length !== 0">
      <span class="text-h4">Works</span>
      <VTable class="noScroll">
        <thead>
          <tr>
            <th>fulfilled</th>
            <th>offer</th>
            <th>price</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="i in props.order.work" :key="i.id">
            <td>{{ i.fulfilled }}</td>
            <td>
              {{ i.offer.name }}
            </td>
            <td>{{ i.price }} PLN</td>
          </tr>
        </tbody>
      </VTable>
    </div>
    <div v-if="props.order && props.order.imported_products.length !== 0">
      <span class="text-h4">Imported products</span>
      <VTable>
        <thead>
          <tr>
            <th>Name</th>
            <th>link</th>
            <th>price</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="i in props.order.imported_products" :key="i.id">
            <td>{{ i.name }}</td>
            <td>{{ i.link }}</td>
            <td>{{ i.price }} PLN</td>
          </tr>
        </tbody>
      </VTable>
    </div>
  </VCol>
</template>