Added loading and empty state to experience list

app/imports/constants/SVG_ICONS.js

@@ -11,6 +11,10 @@ const SVG_ICONS = Object.freeze({
     name: 'attribute_damage',
     shape: 'M 150,53.907593 V 396.625 H 86.563 L 258.093,497.188 429.656,396.626 H 366.22 V 53.908593 Z M 260.25,94.782 c 0.684,-0.028 1.34,-0.018 2,0.094 34.59085,1.140414 45.59236,58.23402 22.719,86.438 41.13,7.74 60.86,67.412 48.75,125.75 h -33.033 l -7.562,101.563 h -72.5 l -6.688,-101.563 h -31.593 c -10.68,-56.805 3.537,-119.376 48.47,-126.343 -23.10419,-27.90601 -9.69693,-87.09653 27.375,-85.845 0.677,0 1.378,-0.066 2.062,-0.094 z',
   },
+  'baby-face': {
+    name: 'baby_face',
+    shape: 'M254.443 49.593c-9.011.085-18 1.243-25.056 3.412-7.057 2.17-11.811 5.395-13.676 8.17-7.133 10.617-9.076 19.519-8.1 27.63.977 8.11 5.102 15.92 12.159 23.443 9.846 10.495 25.39 19.81 42.857 26.955-7.836-14.753-11.888-28.818-10.357-42.717 1.826-16.589 11.956-31.077 29.351-43.768-.63-.174-1.186-.377-1.85-.533-7.244-1.703-16.316-2.676-25.328-2.592zm37.79 17.461c-14.638 10.454-20.887 20.609-22.075 31.4-1.474 13.394 5.377 30.64 20.887 52.175l14.023 19.468c12.6-8.667 25.012-12.72 36.782-12.959a54.52 54.52 0 0 1 5.888.2c15.544 1.368 29.047 8.774 41.418 17.423l-10.312 14.752c-11.223-7.846-21.99-13.307-32.684-14.248-10.693-.94-22.044 2.044-36.463 13.838l-11.394-13.932a102.983 102.983 0 0 1 5.824-4.43l-22.74-6.167c-28.693-7.783-56.841-20.93-74.742-40.012-8.951-9.54-15.368-20.858-16.903-33.607-.569-4.726-.43-9.582.42-14.502C121.752 105.216 73 177.51 73 262.775c0 110.751 82.246 199.637 183 199.637s183-88.886 183-199.637c0-97.123-63.252-177.427-146.768-195.72zM170.15 157.138c13.872.282 28.637 5.837 43.547 18.033l-11.394 13.932c-14.419-11.794-25.77-14.779-36.463-13.838-10.693.941-21.46 6.402-32.684 14.248l-10.312-14.752c12.371-8.649 25.874-16.055 41.418-17.424a54.52 54.52 0 0 1 5.888-.199zm-2.15 40c26.955 0 49 22.045 49 49s-22.045 48.998-49 48.998c-26.386 0-48.053-21.125-48.957-47.3a32.955 32.955 0 0 1 0-3.395c.904-26.175 22.571-47.303 48.957-47.303zm176 0c26.955 0 49 22.045 49 49s-22.045 48.998-49 48.998c-26.386 0-48.053-21.125-48.957-47.3a32.955 32.955 0 0 1 0-3.395c.904-26.175 22.571-47.303 48.957-47.303zm-176 17.998c-1.378 0-2.73.097-4.059.268C176.22 220.226 185 232.224 185 246.138c0 13.914-8.78 25.91-21.059 30.733 1.329.17 2.681.267 4.059.267 17.228 0 31-13.772 31-31s-13.772-31.002-31-31.002zm176 0c-1.378 0-2.73.097-4.059.268C352.22 220.226 361 232.224 361 246.138c0 13.914-8.78 25.91-21.059 30.733 1.329.17 2.681.267 4.059.267 17.228 0 31-13.772 31-31s-13.772-31.002-31-31.002zm-284.746 3.006c-14.197 2.45-23.466 7.41-29.065 13.145-7.967 8.162-9.918 18.531-7.39 30.328 3.681 17.18 18.154 35.225 36.076 43.775A235.517 235.517 0 0 1 55 262.775c0-15.287 1.47-30.215 4.254-44.633zm393.492 0A235.355 235.355 0 0 1 457 262.775c0 14.575-1.339 28.823-3.875 42.615 17.922-8.55 32.395-26.595 36.076-43.775 2.528-11.797.577-22.166-7.39-30.328-5.599-5.735-14.868-10.695-29.065-13.145zM152 231.136c-8.391 0-15 6.61-15 15.002 0 3.263 1.008 6.248 2.723 8.688l23.545-18.65c-2.732-3.099-6.734-5.04-11.268-5.04zm176 0c-8.391 0-15 6.61-15 15.002 0 3.263 1.008 6.248 2.723 8.688l23.545-18.65c-2.732-3.099-6.734-5.04-11.268-5.04zm-98.41 49.95c8 6.34 13.916 10.984 18.228 13.718 4.313 2.735 6.56 3.356 8.182 3.356 1.623 0 3.87-.621 8.182-3.356 4.312-2.734 10.228-7.378 18.228-13.718l11.18 14.103c-8 6.34-14.084 11.208-19.772 14.815-5.687 3.606-11.44 6.154-17.818 6.154-6.377 0-12.13-2.548-17.818-6.154-5.688-3.607-11.772-8.474-19.772-14.815zm-82.393 51.1h217.606l-4.336 12.046s-8.333 23.283-25.164 46.664C318.472 414.277 292.167 439.09 256 439.09c-36.167 0-62.472-24.812-79.303-48.193-16.83-23.38-25.164-46.664-25.164-46.664zM218 350.137v32h32v-32z',
+  },
   'back-and-forth': {
     name: 'effect',
     shape: 'M241.844 28.625l-21.188 5.063L33.25 78.53l-9.594 2.282 2.813 9.47 54.718 184.03 6.156 20.782 10.875-18.75 36.624-63.125 39.344 22.655 9.375-16.188-47.47-27.312L128 187.72l-4.656 8.06-30.406 52.47-45.75-153.844 156.625-37.47-30.344 52.345-4.69 8.126 8.126 4.656L332.75 211.75l-17.594 30.344 16.22 9.312 22.25-38.375 4.687-8.124-8.125-4.656-155.844-89.688 36.594-63.093 10.906-18.845zm-28.25 176.47l-57.438 99.31 155.22 89.5 8.093 4.658-4.69 8.093-44.06 76.25 218.81-52.5-63.874-215.47-44.094 76.25-4.656 8.064-8.094-4.656-155.218-89.5z',

app/imports/ui/creature/experiences/ExperienceForm.vue

@@ -21,6 +21,7 @@
         type="number"
         class="base-value-field text-xs-center large-format no-flex"
         suffix="XP"
+        autofocus
         :value="model.xp"
         :error-messages="errors.xp"
         @change="change('xp', ...arguments)"
@@ -28,6 +29,7 @@
     </div>
     <text-field
       label="Name"
+      :autofocus="milestone"
       :value="model.name"
       :error-messages="errors.name"
       @change="change('name', ...arguments)"

app/imports/ui/creature/experiences/ExperienceListDialog.vue

@@ -21,7 +21,27 @@
         <v-icon>refresh</v-icon>
       </v-btn>
     </template>
-    <v-list>
+    <div
+      v-if="!$subReady.experiences"
+      class="layout column align-center justify-center fill-height"
+    >
+      <v-progress-circular
+        indeterminate
+        size="240"
+      />
+    </div>
+    <div
+      v-else-if="experiences.length === 0"
+      class="layout column align-center justify-center fill-height"
+    >
+      <v-icon style="font-size: 240px; width: 240px; height: 240px;">
+        $vuetify.icons.baby_face
+      </v-icon>
+      <p class="headline">
+        No experiences
+      </p>
+    </div>
+    <v-list v-else>
       <v-slide-x-transition
         group
         mode="out"

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

@@ -1,57 +0,0 @@
-<template lang="html">
-  <div class="class-form">
-    <div class="layout row wrap">
-      <text-field
-        label="Title"
-        style="flex-basis: 300px;"
-        :value="model.name"
-        :error-messages="errors.name"
-        @change="change('name', ...arguments)"
-      />
-      <text-field
-        label="In-World date"
-        :value="model.worldDate"
-        style="flex-basis: 300px;"
-        hint="The date in-game that the experience occured"
-        :error-messages="errors.worldDate"
-        @change="change('worldDate', ...arguments)"
-      />
-      <date-picker
-        label="Real date"
-        :value="model.date"
-        style="flex-basis: 300px;"
-        hint="Real life date"
-        :error-messages="errors.date"
-        @change="change('date', ...arguments)"
-      />
-    </div>
-    <text-area
-      label="Description"
-      :value="model.description"
-      :error-messages="errors.description"
-      @change="change('description', ...arguments)"
-    />
-    <div class="layout column align-end">
-      <text-field
-        label="XP gained"
-        type="number"
-        class="base-value-field text-xs-center large-format no-flex"
-        hint="The number of experience points gained from this entry"
-        :value="model.value"
-        :error-messages="errors.value"
-        @change="change('value', ...arguments)"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
-
-export default {
-  mixins: [propertyFormMixin],
-};
-</script>
-
-<style lang="css" scoped>
-</style>

app/imports/ui/properties/forms/shared/propertyFormIndex.js

@@ -8,7 +8,6 @@ import ContainerForm from '/imports/ui/properties/forms/ContainerForm.vue';
 import DamageForm from '/imports/ui/properties/forms/DamageForm.vue';
 import DamageMultiplierForm from '/imports/ui/properties/forms/DamageMultiplierForm.vue';
 import EffectForm from '/imports/ui/properties/forms/EffectForm.vue';
-import ExperienceForm from '/imports/ui/properties/forms/ExperienceForm.vue';
 import FeatureForm from '/imports/ui/properties/forms/FeatureForm.vue';
 import FolderForm from '/imports/ui/properties/forms/FolderForm.vue';
 import ItemForm from '/imports/ui/properties/forms/ItemForm.vue';
@@ -31,7 +30,6 @@ export default {
   classLevel: ClassLevelForm,
   damage: DamageForm,
   damageMultiplier: DamageMultiplierForm,
-  experience:ExperienceForm,
   effect: EffectForm,
   feature: FeatureForm,
   folder: FolderForm,

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

@@ -1,34 +0,0 @@
-<template lang="html">
-  <div class="experience-viewer">
-    <div
-      v-if="model.value"
-      class="display-1"
-    >
-      {{ model.value }} XP
-    </div>
-    <div class="headline layout row mb-3">
-      <property-name :value="model.name" />
-      <v-spacer />
-      <div>
-        {{ model.worldDate }}
-      </div>
-    </div>
-    <p>
-      {{ model.date }}
-    </p>
-    <property-description
-      v-if="model.description"
-      :value="model.description"
-    />
-  </div>
-</template>
-
-<script>
-import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
-export default {
-	mixins: [propertyViewerMixin],
-}
-</script>
-
-<style lang="css" scoped>
-</style>

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

@@ -8,7 +8,6 @@ import ClassLevelViewer from '/imports/ui/properties/viewers/ClassLevelViewer.vu
 import DamageViewer from '/imports/ui/properties/viewers/DamageViewer.vue';
 import DamageMultiplierViewer from '/imports/ui/properties/viewers/DamageMultiplierViewer.vue';
 import EffectViewer from '/imports/ui/properties/viewers/EffectViewer.vue';
-import ExperienceViewer from '/imports/ui/properties/viewers/ExperienceViewer.vue';
 import FeatureViewer from '/imports/ui/properties/viewers/FeatureViewer.vue';
 import FolderViewer from '/imports/ui/properties/viewers/FolderViewer.vue';
 import ItemViewer from '/imports/ui/properties/viewers/ItemViewer.vue';
@@ -29,7 +28,6 @@ export default {
   classLevel: ClassLevelViewer,
   damage: DamageViewer,
   damageMultiplier: DamageMultiplierViewer,
-  experience: ExperienceViewer,
   effect: EffectViewer,
   feature: FeatureViewer,
   folder: FolderViewer,