isl-vue3/src/components/FellowPower/StandardItemsCard.vue

<script setup lang="ts">
import { usePowerItems } from '@/stores/powerItems'
import { storeToRefs } from 'pinia'
import { computed, ref } from 'vue'

const { standardFellowItems, standardFellowItemTotal } = storeToRefs(usePowerItems())
const headers = ref([
  {
    title: 'Name',
    align: 'start',
    sortable: true,
    value: '1.itemName'
  },
  {
    title: 'Power',
    align: ' d-none d-lg-table-cell',
    sortable: true,
    key: '1.minItemPower'
  },
  {
    title: 'Owned',
    align: 'end',
    sortable: true,
    key: `1.owned`
  },
  {
    title: 'Total Power',
    align: 'end',
    sortable: false,
    key: `1.totalPower`
  }
])
const sortBy = ref([
  {
    key: '1.minItemPower',
    order: 'asc'
  }
])

const getColor = computed(() => (rarity: number): string => {
  if (rarity === 4) {
    return 'amber'
  } else if (rarity === 3) {
    return 'purple'
  } else if (rarity === 2) {
    return 'blue'
  } else {
    return 'green'
  }
})
</script>

<template>
  <v-card>
    <v-card-title>Standard Items</v-card-title>
    <v-card-subtitle>Items that exist all the time</v-card-subtitle>
    <v-card-item>
      <v-data-table
        density="compact"
        v-model:sort-by="sortBy"
        :items="[...standardFellowItems.entries()]"
        :headers="headers"
      >
        <template v-slot:item.1.itemName="{ item }">
          <v-tooltip activator="parent" v-if="item[1].tooltip != undefined" content-class="custom-tooltip">
            <v-card variant="text" density="compact" max-width="25vw">
              <v-card-title class="px-2">Origin: {{ item[1].origin }}</v-card-title>
              <v-card-text class="px-2" v-if="item[1].tooltip !== ''">{{ item[1].tooltip }}</v-card-text>
            </v-card>
          </v-tooltip>
          <v-chip :color="`${getColor(item[1].rarity)}`">
            {{ item[1].itemName }}
          </v-chip>
        </template>
        <template v-slot:item.1.owned="{ item }">
          <v-text-field
            density="compact"
            hide-details="auto"
            v-model.number="item[1].owned"
            @update:model-value="usePowerItems().updateOwned(item[0], item[1].owned)"
          ></v-text-field>
        </template>
        <template v-slot:item.1.totalPower="{ item }">
          {{ item[1].minItemPower * item[1].owned }}
        </template>
        <template v-slot:tfoot>
          <tfoot>
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td class="px-0 text-right font-weight-bold">{{ standardFellowItemTotal }}</td>
            </tr>
          </tfoot>
        </template>
      </v-data-table>
    </v-card-item>
  </v-card>
</template>

<style lang="scss" scoped>
:global(.custom-tooltip) {
  padding: 0 !important;
}
</style>