DiceCloud/app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue

<template lang="html">
  <div class="inventory">
    <column-layout wide-columns>
      <div>
        <v-card>
          <v-list>
            <v-list-item>
              <v-list-item-avatar>
                <v-icon>$vuetify.icons.injustice</v-icon>
              </v-list-item-avatar>
              <v-list-item-content>
                <v-list-item-title>
                  Weight Carried
                </v-list-item-title>
              </v-list-item-content>
              <v-list-item-action>
                <v-list-item-title>
                  {{ weightCarried }} lb
                </v-list-item-title>
              </v-list-item-action>
            </v-list-item>
            <v-list-item>
              <v-list-item-avatar>
                <v-icon>$vuetify.icons.cash</v-icon>
              </v-list-item-avatar>
              <v-list-item-content>
                <v-list-item-title>
                  Net worth
                </v-list-item-title>
              </v-list-item-content>
              <v-list-item-action>
                <v-list-item-title>
                  <coin-value :value="variables && variables.valueTotal && variables.valueTotal.value|| 0" />
                </v-list-item-title>
              </v-list-item-action>
            </v-list-item>
            <v-list-item v-if="variables && variables.itemsAttuned && variables.itemsAttuned.value">
              <v-list-item-avatar>
                <v-icon>$vuetify.icons.spell</v-icon>
              </v-list-item-avatar>
              <v-list-item-content>
                <v-list-item-title>
                  Items attuned
                </v-list-item-title>
              </v-list-item-content>
              <v-list-item-action>
                <v-list-item-title>
                  {{ variables.itemsAttuned.value }}
                </v-list-item-title>
              </v-list-item-action>
            </v-list-item>
          </v-list>
        </v-card>
      </div>
      <div>
        <toolbar-card transparent-toolbar>
          <v-toolbar-title slot="toolbar">
            Equipped
          </v-toolbar-title>
          <v-card-text class="px-0">
            <item-list
              equipment
              :items="equippedItems"
              :parent-ref="equipmentParentRef"
            />
          </v-card-text>
        </toolbar-card>
      </div>
      <div>
        <toolbar-card transparent-toolbar>
          <v-toolbar-title slot="toolbar">
            Carried
          </v-toolbar-title>
          <v-card-text class="px-0">
            <item-list
              :items="carriedItems"
              :parent-ref="carriedParentRef"
            />
          </v-card-text>
        </toolbar-card>
      </div>
      <div
        v-for="container in containersWithoutAncestorContainers"
        :key="container._id"
      >
        <container-card :model="container" />
      </div>
    </column-layout>
  </div>
</template>

<script lang="js">
import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
import Creatures from '/imports/api/creature/creatures/Creatures.js';
import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
import ContainerCard from '/imports/ui/properties/components/inventory/ContainerCard.vue';
import ToolbarCard from '/imports/ui/components/ToolbarCard.vue';
import ItemList from '/imports/ui/properties/components/inventory/ItemList.vue';
import getParentRefByTag from '/imports/api/creature/creatureProperties/methods/getParentRefByTag.js';
import BUILT_IN_TAGS from '/imports/constants/BUILT_IN_TAGS.js';
import CoinValue from '/imports/ui/components/CoinValue.vue';
import stripFloatingPointOddities from '/imports/api/engine/computation/utility/stripFloatingPointOddities.js';
import CreatureVariables from '../../../../api/creature/creatures/CreatureVariables';

export default {
  components: {
    ColumnLayout,
    ContainerCard,
    ToolbarCard,
    ItemList,
    CoinValue,
  },
  props: {
    creatureId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      organize: false,
    }
  },
  meteor: {
    containers() {
      return CreatureProperties.find({
        'ancestors.id': this.creatureId,
        type: 'container',
        removed: { $ne: true },
        inactive: { $ne: true },
      }, {
        sort: { order: 1 },
      });
    },
    creature() {
      return Creatures.findOne(this.creatureId, {
        fields: {
          color: 1,
          variables: 1,
        }
      });
    },
    variables() {
      return CreatureVariables.findOne({ _creatureId: this.creatureId }) || {};
    },
    containersWithoutAncestorContainers() {
      return CreatureProperties.find({
        'ancestors.id': {
          $eq: this.creatureId,
          $nin: this.containerIds
        },
        type: 'container',
        removed: { $ne: true },
        inactive: { $ne: true },
      }, {
        sort: { order: 1 },
      });
    },
    carriedItems() {
      return CreatureProperties.find({
        'ancestors.id': {
          $eq: this.creatureId,
          $nin: this.containerIds
        },
        type: 'item',
        equipped: { $ne: true },
        removed: { $ne: true },
        deactivatedByAncestor: { $ne: true },
      }, {
        sort: { order: 1 },
      });
    },
    equippedItems() {
      return CreatureProperties.find({
        'ancestors.id': {
          $eq: this.creatureId,
        },
        type: 'item',
        equipped: true,
        removed: { $ne: true },
        inactive: { $ne: true },
      }, {
        sort: { order: 1 },
      });
    },
    equipmentParentRef() {
      return getParentRefByTag(
        this.creatureId, BUILT_IN_TAGS.equipment
      ) || getParentRefByTag(
        this.creatureId, BUILT_IN_TAGS.inventory
      ) || {
        id: this.creatureId,
        collection: 'creatures'
      };
    },
    carriedParentRef() {
      return getParentRefByTag(
        this.creatureId, BUILT_IN_TAGS.carried
      ) || getParentRefByTag(
        this.creatureId, BUILT_IN_TAGS.inventory
      ) || {
        id: this.creatureId,
        collection: 'creatures'
      };
    },
  },
  computed: {
    containerIds() {
      return this.containers.map(container => container._id);
    },
    weightCarried() {
      return stripFloatingPointOddities(
        this.variables &&
        this.variables.weightCarried &&
        this.variables.weightCarried.value || 0
      );
    },
  },
  methods: {
    clickProperty(_id) {
      this.$store.commit('pushDialogStack', {
        component: 'creature-property-dialog',
        elementId: `tree-node-${_id}`,
        data: { _id },
      });
    },
  },
}
</script>

<style lang="css" scoped>

</style>