Improved container and item forms and viewers

2020-05-31 18:50:00 +02:00
parent a5c42fea19
commit f7ee09470e
8 changed files with 167 additions and 74 deletions
--- 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 };
--- 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>
--- 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)"
--- 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>
--- 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;
    },
--- a/app/imports/ui/properties/viewers/shared/PropertyTags.vue
+++ 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>
--- 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: {
--- 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');
 });