Completed folder stat grouping UI

2022-11-09 14:58:52 +02:00
parent 8377231254
commit 3d31d62860
15 changed files with 559 additions and 294 deletions
--- a/app/imports/ui/properties/components/attributes/AttributeCard.vue
+++ b/app/imports/ui/properties/components/attributes/AttributeCard.vue
@@ -5,54 +5,19 @@
    @mouseover="hasClickListener ? hovering = true : undefined"
    @mouseleave="hasClickListener ? hovering = false : undefined"
  >
-    <div class="layout align-center">
-      <roll-popup
-        v-if="model.attributeType === 'modifier' || model.type === 'skill'"
-        button-class="px-0"
-        text
-        height="70"
-        min-width="72"
-        :roll-text="computedValue && computedValue.toString()"
-        :name="model.name"
-        :advantage="model.advantage"
-        :loading="checkLoading"
-        :disabled="!context.editPermission"
-        @roll="check"
-      >
-        <v-card-title class="value text-h4 flex-shrink-0">
-          {{ computedValue }}
-        </v-card-title>
-      </roll-popup>
-      <v-card-title
-        v-else
-        class="value text-h4 flex-shrink-0"
-      >
-        {{ computedValue }}
-      </v-card-title>
-      <v-card-title class="name text-subtitle-1 text-truncate d-block pl-0">
-        {{ model.name }}
-      </v-card-title>
-    </div>
+    <attribute-card-content :model="model" />
    <card-highlight :active="hasClickListener && hovering" />
  </v-card>
 </template>

 <script lang="js">
-  import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
-  import RollPopup from '/imports/ui/components/RollPopup.vue';
-  import doCheck from '/imports/api/engine/actions/doCheck.js';
-  import {snackbar} from '/imports/ui/components/snackbars/SnackbarQueue.js';
  import CardHighlight from '/imports/ui/components/CardHighlight.vue';
+  import AttributeCardContent from '/imports/ui/properties/components/attributes/AttributeCardContent.vue';

  export default {
    components: {
-      RollPopup,
      CardHighlight,
-    },
-    inject: {
-      context: {
-        default: {},
-      },
+      AttributeCardContent,
    },
    props: {
      model: {
@@ -68,41 +33,11 @@
      hasClickListener(){
        return this.$listeners && !!this.$listeners.click
      },
-      computedValue(){
-        if (this.model.attributeType === 'modifier' || this.model.type === 'skill'){
-          return numberToSignedString(this.model.value);
-        } else {
-          return this.model.value
-        }
-      }
    },
    methods: {
-      signed: numberToSignedString,
      click(e){
        this.$emit('click', e);
      },
-      check({advantage}){
-        this.checkLoading = true;
-        doCheck.call({
-          propId: this.model._id,
-          scope: {
-            $checkAdvantage: advantage,
-          },
-        }, error => {
-          this.checkLoading = false;
-          if (error){
-            console.error(error);
-            snackbar({text: error.reason});
-          }
-        });
-      },
    },
  }
 </script>
-
-<style lang="css" scoped>
-  .value {
-    min-width: 72px;
-    justify-content: center;
-  }
-</style>
--- a/app/imports/ui/properties/components/attributes/AttributeCardContent.vue
+++ b/app/imports/ui/properties/components/attributes/AttributeCardContent.vue
@@ -0,0 +1,97 @@
+<template>
+  <div
+    class="layout align-center"
+    @click="$emit('click')" 
+    @mouseover="$emit('mouseover')"
+    @mouseleave="$emit('mouseleave')"
+  >
+    <roll-popup
+      v-if="model.attributeType === 'modifier' || model.type === 'skill'"
+      button-class="px-0"
+      text
+      height="70"
+      min-width="72"
+      :roll-text="computedValue && computedValue.toString()"
+      :name="model.name"
+      :advantage="model.advantage"
+      :loading="checkLoading"
+      :disabled="!context.editPermission"
+      @roll="check"
+    >
+      <v-card-title class="value text-h4 flex-shrink-0">
+        {{ computedValue }}
+      </v-card-title>
+    </roll-popup>
+    <v-card-title
+      v-else
+      class="value text-h4 flex-shrink-0"
+    >
+      {{ computedValue }}
+    </v-card-title>
+    <v-card-title class="name text-subtitle-1 text-truncate d-block pl-0">
+      {{ model.name }}
+    </v-card-title>
+  </div>
+</template>
+
+<script lang="js">
+import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
+import RollPopup from '/imports/ui/components/RollPopup.vue';
+import doCheck from '/imports/api/engine/actions/doCheck.js';
+import {snackbar} from '/imports/ui/components/snackbars/SnackbarQueue.js';
+
+export default {
+  components: {
+    RollPopup,
+  },
+  inject: {
+    context: {
+      default: {},
+    },
+  },
+  props: {
+    model: {
+      type: Object,
+      required: true,
+    },
+  },
+  data(){return {
+    checkLoading: false,
+    hovering: false,
+  }},
+  computed: {
+    computedValue(){
+      if (this.model.attributeType === 'modifier' || this.model.type === 'skill'){
+        return numberToSignedString(this.model.value);
+      } else {
+        return this.model.value
+      }
+    }
+  },
+  methods: {
+    signed: numberToSignedString,
+    check({advantage}){
+      this.checkLoading = true;
+      doCheck.call({
+        propId: this.model._id,
+        scope: {
+          $checkAdvantage: advantage,
+        },
+      }, error => {
+        this.checkLoading = false;
+        if (error){
+          console.error(error);
+          snackbar({text: error.reason});
+        }
+      });
+    },
+  },
+}
+</script>
+
+<style lang="css" scoped>
+  .value {
+    min-width: 72px;
+    justify-content: center;
+  }
+</style>
--- a/app/imports/ui/properties/components/attributes/HealthBar.vue
+++ b/app/imports/ui/properties/components/attributes/HealthBar.vue
@@ -6,7 +6,7 @@
    style="min-height: 42px;"
    :class="{ hover }"
    class="my-1 health-bar"
-    :data-id="_id"
+    :data-id="model._id"
  >
    <div
      class="subheading text-truncate pa-2 name"
@@ -14,14 +14,10 @@
      @mouseleave="hover = false"
      @click="$emit('click')"
    >
-      {{ name }}
+      {{ model.name }}
    </div>
    <v-flex
-      style="
-        height: 24px;
-        flex-basis: 300px;
-        flex-grow: 100;
-      "
+      style="height: 24px; flex-basis: 300px; flex-grow: 100;"
    >
      <div
        column
@@ -50,8 +46,7 @@
              'white--text': isTextLight,
              'black--text': !isTextLight,
            }"
-            style="
-              font-size: 15px;
+            style="font-size: 15px;
              line-height: 24px;
              font-weight: 600;
              position: absolute;
@@ -59,30 +54,30 @@
              top: 0;
              right: 0;
              bottom: 0;
-              text-align: center;
-
-            "
+              text-align: center;"
          >
-            {{ value }} / {{ maxValue }}
+            {{ model.value }} / {{ model.total }}
          </div>
        </div>
      </div>
-      <transition name="transition">
+      <v-menu
+        v-model="editing"
+        absolute
+        transition="scale-transition"
+        origin="center center"
+        content-class="no-menu-shadow"
+        :position-x="x"
+        :position-y="y"
+        :min-width="305"
+        :close-on-content-click="false"
+      >
        <increment-menu
-          v-show="editing"
-          :value="value"
+          :value="model.value"
          :open="editing"
          @change="changeIncrementMenu"
          @close="cancelEdit"
        />
-      </transition>
-      <transition name="background-transition">
-        <div
-          v-if="editing"
-          class="page-tint"
-          @click="cancelEdit"
-        />
-      </transition>
+      </v-menu>
    </v-flex>
  </v-layout>
 </template>
@@ -104,31 +99,9 @@ export default {
    },
  },
  props: {
-    value: {
-      type: Number,
-      default: undefined,
-    },
-    maxValue: {
-      type: Number,
-      default: undefined,
-    },
-    name: {
-      type: String,
-      default: undefined,
-    },
-    color: {
-      type: String,
-      default() {
-        return this.$vuetify.theme.currentTheme.primary
-      },
-    },
-    midColor: {
-      type: String,
-      default: undefined,
-    },
-    lowColor: {
-      type: String,
-      default: undefined,
+    model: {
+      type: Object,
+      required: true,
    },
    _id: String,
  },
@@ -136,24 +109,29 @@ export default {
    return {
      editing: false,
      hover: false,
+      x: 0,
+      y: 0,
    };
  },
  computed: {
    fillFraction() {
-      let fraction = this.value / this.maxValue;
+      let fraction = this.model.value / this.model.total;
      if (fraction < 0) fraction = 0;
      if (fraction > 1) fraction = 1;
      return fraction;
    },
+    color() {
+      return this.model.color || this.$vuetify.theme.currentTheme.primary
+    },
    barColor() {
-      const fraction = this.value / this.maxValue;
+      const fraction = this.model.value / this.model.total;
      if (!Number.isFinite(fraction)) return this.color;
      if (fraction > 0.5) {
        return this.color;
-      } else if (this.midColor && this.lowColor) {
-        return chroma.mix(this.lowColor, this.midColor, fraction * 2).hex();
-      } else if (this.midColor) {
-        return this.midColor;
+      } else if (this.model.healthBarColorMid && this.model.healthBarColorLow) {
+        return chroma.mix(this.model.healthBarColorLow, this.model.healthBarColorMid, fraction * 2).hex();
+      } else if (this.model.healthBarColorMid) {
+        return this.model.healthBarColorMid;
      }
      return this.color;
    },
@@ -166,7 +144,7 @@ export default {
    isTextLight() {
      return isDarkColor(this.barBackgroundColor);
      /* Change color at the halfway mark
-      const fraction = this.value / this.maxValue;
+      const fraction = this.model.value / this.model.total;
      if (fraction >= 0.5){
        return isDarkColor(this.barColor);
      } else {
@@ -176,8 +154,14 @@ export default {
    }
  },
  methods: {
-    edit() {
-      this.editing = true;
+    edit(e) {
+      e.preventDefault()
+      this.editing = false;
+      this.x = e.clientX - 165;
+      this.y = e.clientY - 24;
+      this.$nextTick(() => {
+        this.editing = true
+      });
    },
    cancelEdit() {
      this.editing = false;
@@ -199,6 +183,10 @@ export default {
  z-index: 7;
  position: relative;
 }
+
+.no-menu-shadow {
+  box-shadow: none !important;
+}
 </style>

 <style scoped>
--- a/app/imports/ui/properties/components/attributes/HealthBarCard.vue
+++ b/app/imports/ui/properties/components/attributes/HealthBarCard.vue
@@ -3,13 +3,7 @@
    <health-bar
      v-for="attribute in attributes"
      :key="attribute._id"
-      :value="attribute.value"
-      :max-value="attribute.total"
-      :name="attribute.name"
-      :color="attribute.color"
-      :mid-color="attribute.healthBarColorMid"
-      :low-color="attribute.healthBarColorLow"
-      :_id="attribute._id"
+      :model="attribute"
      @change="e => $emit('change', {_id: attribute._id, change: e})"
      @click="e => $emit('click', {_id: attribute._id})"
    />
--- a/app/imports/ui/properties/components/attributes/ResourceCard.vue
+++ b/app/imports/ui/properties/components/attributes/ResourceCard.vue
@@ -3,57 +3,26 @@
    class="resource-card"
    :class="hover ? 'elevation-8': ''"
  >
-    <v-layout>
-      <div class="buttons layout column justify-center pl-3">
-        <v-btn
-          icon
-          small
-          :disabled="(model.value >= model.total && !model.ignoreUpperLimit) || context.editPermission === false"
-          @click="increment(1)"
-        >
-          <v-icon>mdi-chevron-up</v-icon>
-        </v-btn>
-        <v-btn
-          icon
-          small
-          :disabled="(model.value <= 0 && !model.ignoreLowerLimit) || context.editPermission === false"
-          @click="increment(-1)"
-        >
-          <v-icon>mdi-chevron-down</v-icon>
-        </v-btn>
-      </div>
-      <div class="layout align-center value pl-2 pr-3">
-        <div class="text-h4">
-          {{ model.value }}
-        </div>
-        <div
-          v-if="model.total !== 0"
-          class="text-h6 ml-2 max-value"
-        >
-          /{{ model.total }}
-        </div>
-      </div>
-      <div
-        class="content layout align-center pr-3"
-        @click="click"
-        @mouseover="hover = true"
-        @mouseleave="hover = false"
-      >
-        <div class="text-truncate ">
-          {{ model.name }}
-        </div>
-      </div>
-    </v-layout>
+    <resource-card-content
+      :model="model"
+      :hover="hover"
+      @mouseover="hover = true"
+      @mouseleave="hover = false"
+      @click="$emit('click')"
+      @change="e => $emit('change', e)"
+    />
    <card-highlight :active="hover" />
  </v-card>
 </template>

 <script lang="js">
 import CardHighlight from '/imports/ui/components/CardHighlight.vue';
+import ResourceCardContent from '/imports/ui/properties/components/attributes/ResourceCardContent.vue';

 export default {
  components: {
    CardHighlight,
+    ResourceCardContent,
  },
  inject: {
    context: { default: {} }
@@ -69,46 +38,16 @@ export default {
      hover: false,
    }
  },
-  methods: {
-    click(e) {
-      this.$emit('click', e);
-    },
-    increment(value) {
-      this.$emit('change', { type: 'increment', value })
-    },
-  },
 };
 </script>

-<style lang="css" scoped>
+<style lang="css">
 .resource-card {
  transition: box-shadow .4s cubic-bezier(0.25, 0.8, 0.25, 1);
 }

-.resource-card>div {
+.resource-card > div {
  padding-top: 16px;
  padding-bottom: 16px;
 }
-
-.buttons,
-.value {
-  flex-shrink: 0;
-  flex-grow: 0;
-}
-
-.buttons>.v-btn {
-  margin: 0;
-}
-
-.content {
-  cursor: pointer;
-}
-
-.max-value {
-  color: rgba(0, 0, 0, .54);
-}
-
-.theme--dark .max-value {
-  color: rgba(255, 255, 255, 0.54);
-}
 </style>
--- a/app/imports/ui/properties/components/attributes/ResourceCardContent.vue
+++ b/app/imports/ui/properties/components/attributes/ResourceCardContent.vue
@@ -0,0 +1,89 @@
+<template>
+  <v-layout>
+    <div class="buttons layout column justify-center pl-3">
+      <v-btn
+        icon
+        small
+        :disabled="(model.value >= model.total && !model.ignoreUpperLimit) || context.editPermission === false"
+        @click="increment(1)"
+      >
+        <v-icon>mdi-chevron-up</v-icon>
+      </v-btn>
+      <v-btn
+        icon
+        small
+        :disabled="(model.value <= 0 && !model.ignoreLowerLimit) || context.editPermission === false"
+        @click="increment(-1)"
+      >
+        <v-icon>mdi-chevron-down</v-icon>
+      </v-btn>
+    </div>
+    <div class="layout align-center value pl-2 pr-3">
+      <div class="text-h4">
+        {{ model.value }}
+      </div>
+      <div
+        v-if="model.total !== 0"
+        class="text-h6 ml-2 max-value"
+      >
+        /{{ model.total }}
+      </div>
+    </div>
+    <div
+      class="content layout align-center pr-3"
+      @click="click"
+      @mouseover="$emit('mouseover')"
+      @mouseleave="$emit('mouseleave')"
+    >
+      <div class="text-truncate ">
+        {{ model.name }}
+      </div>
+    </div>
+  </v-layout>
+</template>
+
+<script lang="js">
+
+export default {
+  inject: {
+    context: { default: {} }
+  },
+  props: {
+    model: {
+      type: Object,
+      required: true,
+    },
+    hover: {
+      type: Boolean,
+    }
+  },
+  methods: {
+    click(e) {
+      this.$emit('click', e);
+    },
+    increment(value) {
+      this.$emit('change', { type: 'increment', value })
+    },
+  },
+};
+</script>
+
+<style lang="css" scoped>
+.buttons,
+.value {
+  flex-shrink: 0;
+  flex-grow: 0;
+}
+.buttons>.v-btn {
+  margin: 0;
+}
+.content {
+  cursor: pointer;
+}
+.max-value {
+  color: rgba(0, 0, 0, .54);
+}
+.theme--dark .max-value {
+  color: rgba(255, 255, 255, 0.54);
+}
+</style>
--- a/app/imports/ui/properties/components/attributes/SpellSlotListTile.vue
+++ b/app/imports/ui/properties/components/attributes/SpellSlotListTile.vue
@@ -61,7 +61,6 @@ export default {
      required: true,
    },
    dark: Boolean,
-    hideCastButton: Boolean,
    disabled: Boolean,
  },
  computed: {
--- a/app/imports/ui/properties/components/buffs/BuffListItem.vue
+++ b/app/imports/ui/properties/components/buffs/BuffListItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <v-list-item
+    @click="$emit('click')"
+  >
+    <v-list-item-content>
+      <v-list-item-title>
+        {{ model.name }}
+      </v-list-item-title>
+    </v-list-item-content>
+    <v-list-item-action v-if="!model.hideRemoveButton">
+      <v-btn
+        icon
+        @click.stop="$emit('remove')"
+      >
+        <v-icon>mdi-delete</v-icon>
+      </v-btn>
+    </v-list-item-action>
+  </v-list-item>
+</template>
+
+<script lang="js">
+export default {
+  props: {
+    model: {
+      type: Object,
+      required: true,
+    },
+  },
+}
+</script>
--- a/app/imports/ui/properties/components/folders/FolderGroupCard.vue
+++ b/app/imports/ui/properties/components/folders/FolderGroupCard.vue
@@ -1,15 +1,25 @@
 <template>
-  <v-card>
-    <v-subheader v-if="model.name">
-      {{ model.name }}
-    </v-subheader>
-    <component
-      :is="prop.type"
-      v-for="prop in properties"
-      :key="prop._id"
-      :model="prop"
-    />
-  </v-card>
+  <div
+    v-if="model.name || (properties && properties.length)"
+  >
+    <v-card
+      class="folder-group-card pb-2"
+    >
+      <v-subheader v-if="model.name">
+        {{ model.name }}
+      </v-subheader>
+      <component
+        :is="prop.type"
+        v-for="prop in properties"
+        :key="prop._id"
+        :model="prop"
+        :data-id="prop._id"
+        @click="$emit('click-property', {_id: prop._id})"
+        @sub-click="_id => $emit('sub-click', _id)"
+        @remove="$emit('remove', prop._id)"
+      />
+    </v-card>
+  </div>
 </template>

 <script lang="js">
@@ -28,12 +38,44 @@ export default {
  },
  meteor: {
    properties() {
-      return CreatureProperties.find({
-        'ancestors.id': this.model._id
+      const props = [];
+      CreatureProperties.find({
+        'parent.id': this.model._id,
+        removed: { $ne: true },
+        overridden: { $ne: true },
+        $or: [
+          {
+            type: 'toggle',
+            showUI: true,
+            deactivatedByAncestor: { $ne: true },
+          },
+          {
+            inactive: { $ne: true }
+          },
+        ],
+        $nor: [
+          { hideWhenTotalZero: true, total: 0 },
+          { hideWhenValueZero: true, value: 0 },
+        ],
      }, {
        sort: { order: 1 },
+      }).forEach(prop => {
+        if (this.$options.components[prop.type]) {
+          props.push(prop);
+        }
      });
+      return props;
    },
  },
 }
-</script>
+</script>
+
+<style>
+.folder-group-card .v-card {
+  box-shadow: none !important;
+  border-radius: 0 !important;
+}
+.folder-group-card .drag-handle {
+  display: none !important;
+}
+</style>
--- a/app/imports/ui/properties/components/folders/folderGroupComponents/ActionGroupComponent.vue
+++ b/app/imports/ui/properties/components/folders/folderGroupComponents/ActionGroupComponent.vue
@@ -0,0 +1,35 @@
+<template>
+  <div
+    v-if="model.actionType === 'event'"
+    class="d-flex justify-center"
+  >
+    <event-button
+      class="ma-1"
+      :model="model"
+    />
+  </div>
+  <action-card
+    v-else
+    :model="model"
+    @click="$emit('click')"
+    @sub-click="_id => $emit('sub-click', _id)"
+  />
+</template>
+
+<script lang="js">
+import ActionCard from '/imports/ui/properties/components/actions/ActionCard.vue';
+import EventButton from '/imports/ui/properties/components/actions/EventButton.vue';
+
+export default {
+  components: {
+    ActionCard,
+    EventButton,
+  },
+  props: {
+    model: {
+      type: Object,
+      required: true,
+    },
+  },
+}
+</script>
--- a/app/imports/ui/properties/components/folders/folderGroupComponents/AttributeGroupComponent.vue
+++ b/app/imports/ui/properties/components/folders/folderGroupComponents/AttributeGroupComponent.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="attribute">
+    <ability-list-tile
+      v-if="model.attributeType === 'ability'"
+      :model="model"
+      @click="$emit('click')"
+    />
+    <hit-dice-list-tile
+      v-else-if="model.attributeType === 'hitDice'"
+      :model="model"
+      @click="$emit('click')"
+      @change="({ type, value }) => damageProperty({type, value: -value})"
+    />
+    <health-bar
+      v-else-if="model.attributeType === 'healthBar'"
+      :model="model"
+      @change="damageProperty"
+      @click="$emit('click')"
+    />
+    <spell-slot-list-tile
+      v-else-if="model.attributeType === 'spellSlot'"
+      :model="model"
+      @click="$emit('click')"
+    />
+    <resource-card-content
+      v-else-if="model.attributeType === 'resource'"
+      :model="model"
+      @click="$emit('click')"
+      @change="({ type, value }) => damageProperty({type, value: -value})"
+      @mouseover="hover = true"
+      @mouseleave="hover = false"
+    />
+    <attribute-card-content
+      v-else-if="model.attributeType !== 'utility'"
+      class="pointer"
+      :model="model"
+      @click="$emit('click')"
+      @mouseover="hover = true"
+      @mouseleave="hover = false"
+    />
+    <card-highlight :active="hover" />
+  </div>
+</template>
+
+<script lang="js">
+import AbilityListTile from '/imports/ui/properties/components/attributes/AbilityListTile.vue';
+import HitDiceListTile from '/imports/ui/properties/components/attributes/HitDiceListTile.vue';
+import HealthBar from '/imports/ui/properties/components/attributes/HealthBar.vue';
+import SpellSlotListTile from '/imports/ui/properties/components/attributes/SpellSlotListTile.vue';
+import ResourceCardContent from '/imports/ui/properties/components/attributes/ResourceCardContent.vue';
+import AttributeCardContent from '/imports/ui/properties/components/attributes/AttributeCardContent.vue';
+import CardHighlight from '/imports/ui/components/CardHighlight.vue';
+
+import damageProperty from '/imports/api/creature/creatureProperties/methods/damageProperty.js';
+
+export default {
+  components: {
+    AbilityListTile,
+    HitDiceListTile,
+    HealthBar,
+    SpellSlotListTile,
+    ResourceCardContent,
+    AttributeCardContent,
+    CardHighlight,
+  },
+  props: {
+    model: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+    hover: false,
+  }},
+  methods: {
+    damageProperty(change) {
+      damageProperty.call({
+        _id: this.model._id,
+        operation: change.type,
+        value: change.value
+      });
+    },
+  }
+}
+</script>
+
+<style lang="css" scoped>
+  .attribute {
+    position: relative;
+  }
+  .pointer {
+    cursor: pointer;
+  }
+</style>
--- a/app/imports/ui/properties/components/folders/propertyComponentIndex.js
+++ b/app/imports/ui/properties/components/folders/propertyComponentIndex.js
@@ -1,27 +1,27 @@
-import action from '/imports/ui/properties/components/actions/EventButton.vue';
+import action from '/imports/ui/properties/components/folders/folderGroupComponents/ActionGroupComponent.vue';
 //import adjustment from '';
-import attribute from '/imports/ui/properties/components/attributes/SpellSlotListTile.vue';
-//import buff from '';
+import attribute from './folderGroupComponents/AttributeGroupComponent.vue';
+import buff from '/imports/ui/properties/components/buffs/BuffListItem.vue';
 //import buffRemover from '';
 //import branch from '';
 //import constant from '';
-//import container from '';
+import container from '/imports/ui/properties/components/inventory/ContainerCard.vue';
 //import classComponent from '';
 //import classLevel from '';
 //import damage from '';
 //import damageMultiplier from '';
 //import effect from '';
-//import feature from '';
-//import folder from '';
-//import item from '';
-//import note from '';
+import feature from '/imports/ui/properties/components/features/FeatureCard.vue';
+// import folder from '';
+import item from '/imports/ui/properties/components/inventory/ItemListTile.vue';
+import note from '/imports/ui/properties/components/persona/NoteCard.vue';
 //import pointBuy from '';
 //import proficiency from '';
 //import propertySlot from '';
 //import reference from '';
 //import roll from '';
 //import savingThrow from '';
-//import skill from '';
+import skill from '/imports/ui/properties/components/skills/SkillListTile.vue';
 //import slotFiller from '';
 //import spellList from '';
 //import spell from '';
@@ -32,27 +32,27 @@ export default {
  action,
  //adjustment,
  attribute,
-  //buff,
+  buff,
  //buffRemover,
  //branch,
  //constant,
-  //container,
+  container,
  //class: classComponent,
  //classLevel,
  //damage,
  //damageMultiplier,
  //effect,
-  //feature,
+  feature,
  //folder,
-  //item,
-  //note,
+  item,
+  note,
  //pointBuy,
  //proficiency,
  //propertySlot,
  //reference,
  //roll,
  //savingThrow,
-  //skill,
+  skill,
  //slotFiller,
  //spellList,
  //spell,
--- a/app/imports/ui/properties/components/inventory/ItemListTile.vue
+++ b/app/imports/ui/properties/components/inventory/ItemListTile.vue
@@ -32,7 +32,7 @@
        @change="changeQuantity"
      />
    </v-list-item-action>
-    <v-list-item-action>
+    <v-list-item-action class="drag-handle">
      <v-icon
        :disabled="context.editPermission === false"
        style="height: 100%; width: 40px; cursor: move;"