jws-frontend/src/components/01_branch-management/TableCardComponent.vue

<script setup lang="ts">
import { Icon } from '@iconify/vue';
import { QTableProps } from 'quasar';
import { ref } from 'vue';

const color: string[] = ['pink', 'violet'];

defineProps<{
  subBranch?: boolean;
  rows: {
    id: string;
    name: string;
    branchName: string;
    address: string;
    telephoneNo: string;
    code: string;
    type: boolean;
    status: string;
  }[];
}>();

const columns = [
  {
    name: 'name',
    required: true,
    label: 'branchLabel',
    align: 'left',
    field: (row) => row.name,
    format: (val) => `${val}`,
    sortable: true,
  },
  {
    name: 'branchName',
    align: 'center',
    label: 'branchName',
    field: 'branchName',
    sortable: true,
  },
  { name: 'address', label: 'address', field: 'address', sortable: true },
  { name: 'telephoneNo', label: 'telephone', field: 'telephoneNo' },
  { name: 'code', label: 'code', field: 'code' },
  { name: 'type', label: 'type', field: 'type' },
  { name: 'status', label: 'status', field: 'status' },
] satisfies QTableProps['columns'];

const filter = ref('');
</script>

<template>
  <div v-if="rows.length > 0">
    <q-table
      :rows-per-page-options="[4]"
      flat
      bordered
      grid
      :rows="rows"
      :columns="columns"
      row-key="name"
      :filter="filter"
      hide-header
      card-container-class="q-col-gutter-lg"
    >
      <template #item="prop">
        <div
          class="col-6"
          @click.stop="!subBranch && $emit('navigate', prop.row)"
        >
          <div class="bordered rounded" style="overflow: hidden">
            <div
              class="bordered-b row q-px-md q-py-sm"
              :class="{
                [`table-card__${color[+(subBranch || false)]}`]: true,
                'table-header': i === 0,
                'table-row': i !== 0 && i % 2 === 0,
                dark: $q.dark.isActive,
              }"
              :key="i"
              v-for="([k, v], i) in Object.entries(prop.row).slice(1)"
            >
              <div
                avatar
                class="row items-center"
                style="width: 120px"
                :style="{ color: (i !== 0 && 'grey') || 'currentColor' }"
              >
                {{
                  $t(
                    k === 'name'
                      ? subBranch
                        ? 'branchLabel'
                        : 'branchHQLabel'
                      : prop.colsMap[k]?.label,
                  )
                }}
              </div>

              <div class="row items-center" style="flex-grow: 1">
                <div style="flex-grow: 1">
                  <template v-if="k === 'status'">
                    <span
                      class="q-px-sm"
                      style="
                        color: var(--teal-6);
                        background: hsla(var(--teal-6-hsl) / 0.08);
                        border-radius: 25px;
                      "
                    >
                      {{ v }}
                    </span>
                  </template>
                  <template v-else>
                    {{
                      k !== 'type'
                        ? v
                        : (v && $t('branchHQLabel')) || $t('branchLabel')
                    }}
                  </template>
                </div>
                <q-btn
                  size=".75rem"
                  v-if="i === 0"
                  outline
                  no-caps
                  class="q-px-md"
                  dense
                  :label="$t('viewDetail')"
                  @click.stop="$emit('showInfo', prop.row)"
                  :id="`view-detail-btn-${prop.row.id}`"
                >
                  <Icon
                    icon="mdi:navigate-next"
                    class="cursor-pointer"
                    v-if="i === 0"
                    width="20px"
                  />
                </q-btn>
              </div>
            </div>
          </div>
        </div>
      </template>
    </q-table>
  </div>
  <div
    v-else
    class="column items-center justify-center q-pb-xl"
    style="opacity: 0.3; height: 40vh"
  >
    <q-img
      src="/no-data.png"
      style="object-fit: cover; width: 128px; height: 128px"
    />
    <span class="text-body1">{{ $t('noData') }}</span>
  </div>
</template>

<style scoped>
.table-card__pink {
  --bg-table-card-header: var(--pink-6-hsl);
  --fg-table-card-header: var(--pink-0-hsl);
  &.dark {
    --bg-table-card-row: hsla(var(--gray-9-hsl) / 1);
  }
}

.table-card__violet {
  --bg-table-card-header: var(--purple-11-hsl);
  --fg-table-card-header: var(--violet-0-hsl);
  &.dark {
    --bg-table-card-row: hsla(var(--gray-9-hsl) / 1);
  }
}

.table-header {
  background: hsl(var(--bg-table-card-header));
  color: hsl(var(--fg-table-card-header));
}

.table-row {
  background: hsla(var(--bg-table-card-header) / 0.08);
}
</style>