Added loading and empty state to experience list

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,