jws-frontend/src/pages/05_quotation/TableRequest.vue

<script setup lang="ts">
import { QTableColumn, QTableSlots } from 'quasar';
import { RequestData, RequestDataStatus } from 'src/stores/request-list/types';
import BadgeComponent from 'components/BadgeComponent.vue';

withDefaults(
  defineProps<{
    rows: RequestData[];
  }>(),
  { rows: () => [] },
);

const columns = [
  {
    name: 'order',
    align: 'center',
    label: 'general.order',
    field: (e: RequestData & { _index: number }) => e._index + 1,
  },
  {
    name: '#codeRequest',
    align: 'center',
    label: 'quotation.tableColumnsRequest.code',
    field: (v: RequestData) => v.code,
  },

  {
    name: 'employeeName',
    align: 'left',
    label: 'customer.employee',
    field: (v: RequestData) => {
      return `${v.employee.firstName} ${v.employee.lastName}`;
    },
  },
  {
    name: '#requestDataStatus',
    align: 'left',
    label: 'general.status',
    field: (v: RequestData) => v.requestDataStatus,
  },
] satisfies QTableColumn[];

const emits = defineEmits<{
  (e: 'success'): void;
}>();

function goToRequestList(id: string) {
  const url = new URL(`/request-list/${id}`, window.location.origin);
  window.open(url.toString(), '_blank');
}
</script>

<template>
  <q-table
    :rows-per-page-options="[0]"
    :rows="
      rows.map((data, i) => ({
        ...data,
        _index: i,
      }))
    "
    :columns
    bordered
    flat
    selection="multiple"
    card-container-class="q-col-gutter-sm"
    :no-data-label="$t('general.noDataTable')"
    class="full-width"
    :pagination="{
      rowsPerPage: 0,
    }"
  >
    <template v-slot:header="props">
      <q-tr
        style="background-color: hsla(var(--info-bg) / 0.07)"
        :props="props"
      >
        <q-th v-for="col in columns" :key="col.name" :props="props">
          {{ $t(col.label) }}
        </q-th>
      </q-tr>
    </template>

    <template
      v-slot:body="props: {
        row: RequestData & { _index: number };
      } & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
    >
      <q-tr :class="{ dark: $q.dark.isActive }" class="text-center">
        <q-td v-for="col in columns" :align="col.align" :key="col.name">
          <!-- NOTE: custom column will starts with # -->
          <template v-if="!col.name.startsWith('#')">
            <span>
              {{
                typeof col.field === 'string'
                  ? props.row[col.field as keyof RequestData]
                  : col.field(props.row)
              }}
            </span>
          </template>

          <template v-if="col.name === '#codeRequest'">
            <span
              class="cursor-pointer link"
              :id="`go-to-request-list-${props.row.code}`"
              @click="goToRequestList(props.row.id)"
            >
              {{ props.row.code }}
            </span>
          </template>

          <template v-if="col.name === '#requestDataStatus'">
            <span>
              <BadgeComponent
                :hsla-color="
                  props.row.requestDataStatus === RequestDataStatus.Pending
                    ? '--orange-5-hsl'
                    : props.row.requestDataStatus ===
                        RequestDataStatus.InProgress
                      ? '--blue-6-hsl'
                      : props.row.requestDataStatus ===
                          RequestDataStatus.Completed
                        ? '--green-8-hsl'
                        : '--orange-5-hsl'
                "
                :title="
                  $t(`requestList.status.${props.row.requestDataStatus}`) || '-'
                "
              />
            </span>
          </template>
        </q-td>
      </q-tr>
    </template>
  </q-table>
</template>

<style scoped>
.link {
  color: hsl(var(--info-bg));
  text-decoration: underline;
}

.selectable-item {
  padding: 0;
  appearance: none;
  border: none;
  background: transparent;
  position: relative;
  color: inherit;

  & > .selectable-item__pos {
    display: none;
  }
}

.selectable-item__selected {
  & > :deep(*) {
    border: 1px solid var(--_color, var(--brand-1)) !important;
  }

  & > .selectable-item__pos {
    display: block;
    position: absolute;
    margin: var(--size-2);
    right: 0;
    top: 0;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    color: var(--surface-1);
    background: var(--brand-1);
    color: currentColor;
  }
}

.selectable-item__disabled {
  filter: grayscale(1);
  opacity: 0.5;

  & :deep(*) {
    cursor: not-allowed;
  }
}
</style>