From f7ee09470e4f577c595f6e94c4ea116f74c73113 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Sun, 31 May 2020 18:50:00 +0200
Subject: [PATCH] Improved container and item forms and viewers

---
 app/imports/api/properties/Containers.js      | 14 +++-
 .../ui/properties/forms/ContainerForm.vue     | 49 ++++++++------
 app/imports/ui/properties/forms/ItemForm.vue  |  5 +-
 .../ui/properties/viewers/ContainerViewer.vue | 66 +++++++++++++------
 .../ui/properties/viewers/ItemViewer.vue      | 44 ++++++-------
 .../viewers/shared/PropertyTags.vue           | 30 +++++++++
 .../viewers/shared/propertyViewerMixin.js     |  2 +
 app/imports/ui/vueSetup.js                    | 31 ++++++---
 8 files changed, 167 insertions(+), 74 deletions(-)
 create mode 100644 app/imports/ui/properties/viewers/shared/PropertyTags.vue

diff --git a/app/imports/api/properties/Containers.js b/app/imports/api/properties/Containers.js
index 45f1ecef..94b36000 100644
--- a/app/imports/api/properties/Containers.js
+++ b/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 };
diff --git a/app/imports/ui/properties/forms/ContainerForm.vue b/app/imports/ui/properties/forms/ContainerForm.vue
index f8d4183f..3601d81a 100644
--- a/app/imports/ui/properties/forms/ContainerForm.vue
+++ b/app/imports/ui/properties/forms/ContainerForm.vue
@@ -1,11 +1,22 @@
 <template lang="html">
   <div class="attribute-form">
-    <text-field
-      label="Name"
-      :value="model.name"
-      :error-messages="errors.name"
-      @change="change('name', ...arguments)"
-    />
+    <div class="layout row justify-space-between wrap">
+      <text-field
+        label="Name"
+        :value="model.name"
+        :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
-        label="Carried"
-        :value="model.carried"
-        :error-messages="errors.carried"
-        @change="change('carried', ...arguments)"
-      />
-      <smart-switch
-        label="Contents are weightless"
-        :value="model.contentsWeightless"
-        :error-messages="errors.contentsWeightless"
-        @change="change('contentsWeightless', ...arguments)"
-      />
+      <div class="layout row justify-center">
+        <div>
+          <smart-switch
+            label="Contents are weightless"
+            :value="model.contentsWeightless"
+            :error-messages="errors.contentsWeightless"
+            @change="change('contentsWeightless', ...arguments)"
+          />
+        </div>
+      </div>
     </form-section>
   </div>
 </template>
diff --git a/app/imports/ui/properties/forms/ItemForm.vue b/app/imports/ui/properties/forms/ItemForm.vue
index 13082de6..8540208a 100644
--- a/app/imports/ui/properties/forms/ItemForm.vue
+++ b/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)"
diff --git a/app/imports/ui/properties/viewers/ContainerViewer.vue b/app/imports/ui/properties/viewers/ContainerViewer.vue
index bbd7dc5e..088346ee 100644
--- a/app/imports/ui/properties/viewers/ContainerViewer.vue
+++ b/app/imports/ui/properties/viewers/ContainerViewer.vue
@@ -1,26 +1,48 @@
 <template lang="html">
   <div class="container-viewer">
-    <property-name :value="model.name" />
-    <div
-      v-if="!model.carried"
-      class="caption"
-    >
-      Not carried
+    <property-tags :tags="model.tags" />
+    <div class="layout row wrap justify-space-around">
+      <div
+        v-if="model.value !== undefined"
+        class="mr-3 my-3"
+      >
+        <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>
diff --git a/app/imports/ui/properties/viewers/ItemViewer.vue b/app/imports/ui/properties/viewers/ItemViewer.vue
index 1c91b3f9..ba69bc05 100644
--- a/app/imports/ui/properties/viewers/ItemViewer.vue
+++ b/app/imports/ui/properties/viewers/ItemViewer.vue
@@ -1,14 +1,9 @@
 <template lang="html">
   <div class="item-viewer">
-    <div
-      v-if="tagString"
-      class="tags ma-3"
-    >
-      {{ tagString }}
-    </div>
+    <property-tags :tags="model.tags" />
     <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
-          :shape="getIcon('abacus').shape"
-        />
+        <v-icon>$vuetify.icons.abacus</v-icon>
       </increment-button>
     </div>
     <div class="layout row wrap justify-space-around">
@@ -38,11 +31,12 @@
           align-center
           class="mb-2"
         >
-          <svg-icon
-            :shape="getIcon('cash').shape"
+          <v-icon
             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
-            :shape="getIcon('two-coins').shape"
+          <v-icon
             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
-            :shape="getIcon('injustice').shape"
+          <v-icon
             class="ml-2"
             x-large
-          />
+          >
+            $vuetify.icons.injustice
+          </v-icon>
         </v-layout>
         <v-layout
           row
@@ -103,11 +99,12 @@
           >
             each
           </span>
-          <svg-icon
-            :shape="getIcon('weight').shape"
+          <v-icon
             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;
     },
diff --git a/app/imports/ui/properties/viewers/shared/PropertyTags.vue b/app/imports/ui/properties/viewers/shared/PropertyTags.vue
new file mode 100644
index 00000000..83e85271
--- /dev/null
+++ b/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>
diff --git a/app/imports/ui/properties/viewers/shared/propertyViewerMixin.js b/app/imports/ui/properties/viewers/shared/propertyViewerMixin.js
index d8f39b6b..ac3ae5e3 100644
--- a/app/imports/ui/properties/viewers/shared/propertyViewerMixin.js
+++ b/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: {
diff --git a/app/imports/ui/vueSetup.js b/app/imports/ui/vueSetup.js
index eb588b0d..416344fa 100644
--- a/app/imports/ui/vueSetup.js
+++ b/app/imports/ui/vueSetup.js
@@ -1,20 +1,35 @@
-import Vue from "vue";
-import Vuex from "vuex";
-import Vuetify from "vuetify";
-import store from "/imports/ui/vuexStore.js";
+import Vue from 'vue';
+import Vuetify from 'vuetify';
+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');
 });