lifeto-shop/src/components/CharacterInventory.vue

<template>
  <HotTable
    ref="hotTableComponent"
    :settings="DefaultSettings()"
    ></HotTable>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { HotTable, HotColumn } from '@handsontable/vue3';

const {invs, activeTable, columns, tags, dirty} = useStoreRef()
const hotTableComponent = ref<any>(null)

const updateTable = ():TableRecipe | undefined => {
  if (invs.value.has(activeTable.value)) {
    const chardat = invs.value.get(activeTable.value)
    if (chardat) {
      const it = new InventoryTable(chardat, { columns: columns.value, tags: tags.value })
      const hot = (hotTableComponent.value.hotInstance as Handsontable)
      const build = it.BuildTable()
      hot.updateSettings(build.settings)
      return build
    }
  }
  return undefined
}
// register Handsontable's modules
registerAllModules();

watch([columns.value.dirty, tags.value.dirty, activeTable, dirty], () => {
log.debug(`${dirty.value} rendering inventory`, activeTable.value)
  let u = updateTable()
  if(u != undefined){
    saveStore()
  }
})

</script>

<script lang="ts">
import { defineComponent, computed, PropType, defineProps, defineEmits, watch} from 'vue';
import { registerAllModules } from 'handsontable/registry';
import { DefaultSettings, InventoryTable, TableRecipe } from '../lib/table';
import { Columns, ColumnByNames, ColumnInfo } from '../lib/columns';
import { TricksterItem, SampleData } from '../lib/trickster';
import Handsontable from 'handsontable';
import { useStoreRef, saveStore } from '../state/state';
import { storage } from '../session_storage';
import { LTOApi, LTOApiv0 } from '../lib/lifeto';
import log from 'loglevel';
</script>

<style src="handsontable/dist/handsontable.full.css">
</style>