Improved container and item forms and viewers

app/imports/api/properties/Containers.js

@@ -32,4 +32,16 @@ let ContainerSchema = new SimpleSchema({
 	},
 });
 
-export { ContainerSchema };
+const ComputedOnlyContainerSchema = new SimpleSchema({
+  // Weight of all the contents, zero if `contentsWeightless` is true
+  contentsWeight:{
+    type: Number,
+    optional: true,
+  },
+});
+
+const ComputedContainerSchema = new SimpleSchema()
+	.extend(ComputedOnlyContainerSchema)
+	.extend(ContainerSchema);
+
+export { ContainerSchema, ComputedContainerSchema };

app/imports/ui/properties/forms/ContainerForm.vue

@@ -1,11 +1,22 @@
 <template lang="html">
   <div class="attribute-form">
-    <text-field
+    <div class="layout row justify-space-between wrap">
-      label="Name"
+      <text-field
-      :value="model.name"
+        label="Name"
-      :error-messages="errors.name"
+        :value="model.name"
-      @change="change('name', ...arguments)"
+        :error-messages="errors.name"
-    />
+        @change="change('name', ...arguments)"
+      />
+      <div>
+        <smart-switch
+          label="Carried"
+          class="mx-3"
+          :value="model.carried"
+          :error-messages="errors.carried"
+          @change="change('carried', ...arguments)"
+        />
+      </div>
+    </div>
     <div class="layout row wrap">
       <text-field
         label="Value"
@@ -15,17 +26,19 @@
         hint="The value of the item in gold pieces, using decimals for values less than 1 gp"
         class="mx-1"
         style="flex-basis: 300px;"
+        prepend-inner-icon="$vuetify.icons.two_coins"
         :value="model.value"
         :error-messages="errors.value"
         @change="change('value', ...arguments)"
       />
       <text-field
         label="Weight"
-        suffix="lbs"
+        suffix="lb"
         type="number"
         min="0"
         class="mx-1"
         style="flex-basis: 300px;"
+        prepend-inner-icon="$vuetify.icons.weight"
         :value="model.weight"
         :error-messages="errors.weight"
         @change="change('weight', ...arguments)"
@@ -41,18 +54,16 @@
       name="Advanced"
       standalone
     >
-      <smart-switch
+      <div class="layout row justify-center">
-        label="Carried"
+        <div>
-        :value="model.carried"
+          <smart-switch
-        :error-messages="errors.carried"
+            label="Contents are weightless"
-        @change="change('carried', ...arguments)"
+            :value="model.contentsWeightless"
-      />
+            :error-messages="errors.contentsWeightless"
-      <smart-switch
+            @change="change('contentsWeightless', ...arguments)"
-        label="Contents are weightless"
+          />
-        :value="model.contentsWeightless"
+        </div>
-        :error-messages="errors.contentsWeightless"
+      </div>
-        @change="change('contentsWeightless', ...arguments)"
-      />
     </form-section>
   </div>
 </template>

app/imports/ui/properties/forms/ItemForm.vue

@@ -41,17 +41,19 @@
         hint="The value of the item in gold pieces, using decimals for values less than 1 gp"
         class="mx-1"
         style="flex-basis: 300px;"
+        prepend-inner-icon="$vuetify.icons.two_coins"
         :value="model.value"
         :error-messages="errors.value"
         @change="change('value', ...arguments)"
       />
       <text-field
         label="Weight"
-        suffix="lbs"
+        suffix="lb"
         type="number"
         min="0"
         class="mx-1"
         style="flex-basis: 300px;"
+        prepend-inner-icon="$vuetify.icons.weight"
         :value="model.weight"
         :error-messages="errors.weight"
         @change="change('weight', ...arguments)"
@@ -61,6 +63,7 @@
       label="Quantity"
       type="number"
       min="0"
+      prepend-inner-icon="$vuetify.icons.abacus"
       :value="model.quantity"
       :error-messages="errors.quantity"
       @change="change('quantity', ...arguments)"

app/imports/ui/properties/viewers/ContainerViewer.vue

@@ -1,26 +1,48 @@
 <template lang="html">
   <div class="container-viewer">
-    <property-name :value="model.name" />
+    <property-tags :tags="model.tags" />
-    <div
+    <div class="layout row wrap justify-space-around">
-      v-if="!model.carried"
+      <div
-      class="caption"
+        v-if="model.value !== undefined"
-    >
+        class="mr-3 my-3"
-      Not carried
+      >
+        <v-layout
+          row
+          align-center
+        >
+          <v-icon
+            class="mr-2"
+            x-large
+          >
+            $vuetify.icons.two_coins
+          </v-icon>
+          <coin-value
+            class="title mr-2"
+            :value="model.value"
+          />
+        </v-layout>
+      </div>
+      <div
+        v-if="model.weight !== undefined"
+        class="my-3"
+      >
+        <v-layout
+          row
+          align-center
+          justify-end
+        >
+          <span class="title mr-2">
+            {{ model.weight }} lb
+          </span>
+          <v-icon
+            class="ml-2"
+            x-large
+          >
+            $vuetify.icons.weight
+          </v-icon>
+        </v-layout>
+      </div>
     </div>
-    <div
-      v-if="model.contentsWeightless"
-      class="caption"
-    >
-      Contents are weightless
-    </div>
-    <property-field
-      name="Weight"
-      :value="`${model.weight} lbs`"
-    />
-    <property-field
-      name="Value"
-      :value="`${model.value} gp`"
-    />
     <property-description
       v-if="model.description"
       :value="model.description"
@@ -29,8 +51,12 @@
 </template>
 
 <script>
+import CoinValue from '/imports/ui/components/CoinValue.vue';
 import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
 export default {
+  components: {
+    CoinValue,
+  },
 	mixins: [propertyViewerMixin],
 }
 </script>

app/imports/ui/properties/viewers/ItemViewer.vue

@@ -1,14 +1,9 @@
 <template lang="html">
   <div class="item-viewer">
-    <div
+    <property-tags :tags="model.tags" />
-      v-if="tagString"
-      class="tags ma-3"
-    >
-      {{ tagString }}
-    </div>
     <div
       v-if="model.quantity > 1 || model.showIncrement"
-      class="layout column justify-center align-center"
+      class="layout row justify-center align-center wrap"
     >
       <div class="display-1">
         {{ model.quantity }}
@@ -22,9 +17,7 @@
         :value="model.quantity"
         @change="changeQuantity"
       >
-        <svg-icon
+        <v-icon>$vuetify.icons.abacus</v-icon>
-          :shape="getIcon('abacus').shape"
-        />
       </increment-button>
     </div>
     <div class="layout row wrap justify-space-around">
@@ -38,11 +31,12 @@
           align-center
           class="mb-2"
         >
-          <svg-icon
+          <v-icon
-            :shape="getIcon('cash').shape"
             class="mr-2"
             x-large
-          />
+          >
+            $vuetify.icons.cash
+          </v-icon>
           <coin-value
             class="title"
             :value="totalValue"
@@ -52,11 +46,12 @@
           row
           align-center
         >
-          <svg-icon
+          <v-icon
-            :shape="getIcon('two-coins').shape"
             class="mr-2"
             x-large
-          />
+          >
+            $vuetify.icons.two_coins
+          </v-icon>
           <coin-value
             class="title mr-2"
             :value="model.value"
@@ -83,11 +78,12 @@
           <span class="title">
             {{ totalWeight }} lb
           </span>
-          <svg-icon
+          <v-icon
-            :shape="getIcon('injustice').shape"
             class="ml-2"
             x-large
-          />
+          >
+            $vuetify.icons.injustice
+          </v-icon>
         </v-layout>
         <v-layout
           row
@@ -103,11 +99,12 @@
           >
             each
           </span>
-          <svg-icon
+          <v-icon
-            :shape="getIcon('weight').shape"
             class="ml-2"
             x-large
-          />
+          >
+            $vuetify.icons.weight
+          </v-icon>
         </v-layout>
       </div>
     </div>
@@ -135,9 +132,6 @@ export default {
     context: { default: {} }
   },
   computed:{
-    tagString(){
-      return this.model.tags && this.model.tags.join(', ');
-    },
     totalValue(){
       return this.model.value * this.model.quantity;
     },

app/imports/ui/properties/viewers/shared/PropertyTags.vue

@@ -0,0 +1,30 @@
+<template lang="html">
+  <div
+    v-if="tagString"
+    class="tags ma-3 "
+  >
+    {{ tagString }}
+  </div>
+</template>
+
+<script>
+export default {
+  props:{
+    tags: {
+      type: Array,
+      default: () => [],
+    }
+  },
+  computed:{
+    tagString(){
+      return this.tags.join(', ');
+    },
+  }
+}
+</script>
+
+<style lang="css" scoped>
+.tags {
+  font-style: italic;
+}
+</style>

app/imports/ui/properties/viewers/shared/propertyViewerMixin.js

@@ -2,6 +2,7 @@ import PropertyName from '/imports/ui/properties/viewers/shared/PropertyName.vue
 import PropertyVariableName from '/imports/ui/properties/viewers/shared/PropertyVariableName.vue';
 import PropertyField from '/imports/ui/properties/viewers/shared/PropertyField.vue';
 import PropertyDescription from '/imports/ui/properties/viewers/shared/PropertyDescription.vue';
+import PropertyTags from '/imports/ui/properties/viewers/shared/PropertyTags.vue';
 
 const propertyViewerMixin = {
   components: {
@@ -9,6 +10,7 @@ const propertyViewerMixin = {
     PropertyVariableName,
     PropertyField,
     PropertyDescription,
+    PropertyTags,
   },
   props: {
 		model: {

app/imports/ui/vueSetup.js

@@ -1,20 +1,35 @@
-import Vue from "vue";
+import Vue from 'vue';
-import Vuex from "vuex";
+import Vuetify from 'vuetify';
-import Vuetify from "vuetify";
+import store from '/imports/ui/vuexStore.js';
-import store from "/imports/ui/vuexStore.js";
 import VueMeteorTracker from 'vue-meteor-tracker';
 import AppLayout from '/imports/ui/layouts/AppLayout.vue';
 import ReactiveProvide from 'vue-reactive-provide';
-import router from "/imports/ui/router.js";
+import router from '/imports/ui/router.js';
 import { theme } from '/imports/ui/theme.js';
-import "vuetify/dist/vuetify.min.css";
+import 'vuetify/dist/vuetify.min.css';
 import '/imports/ui/components/global/globalIndex.js';
+import SvgIconByName from '/imports/ui/icons/SvgIconByName.vue';
+import SVG_ICONS from '/imports/constants/SVG_ICONS.js';
+
+let icons = {};
+
+for (const name in SVG_ICONS) {
+  let icon = SVG_ICONS[name];
+  icons[icon.name] = {
+    component: SvgIconByName,
+    props: {
+      name: name,
+    }
+  }
+}
+console.log(icons);
 
 Vue.use(VueMeteorTracker);
 Vue.config.meteor.freeze = true
 Vue.use(Vuetify, {
   theme,
-  iconfont: "md",
+  iconfont: 'md',
+  icons,
 });
 Vue.use(ReactiveProvide, {
   name: 'reactiveProvide', // default value
@@ -27,5 +42,5 @@ Meteor.startup(() => {
     router,
     store,
     ...AppLayout,
-  }).$mount("#app");
+  }).$mount('#app');
 });