Iterated on XP system

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

@@ -8,12 +8,6 @@
       @push="push"
       @pull="pull"
     />
-    <p
-      v-if="error"
-      class="error"
-    >
-      {{ error }}
-    </p>
     <div
       slot="actions"
       class="layout row justify-end"
@@ -21,7 +15,6 @@
       <v-btn
         flat
         :disabled="!valid"
-        :loading="loading"
         @click="insertExperience"
       >
         Insert
@@ -67,26 +60,20 @@ export default {
       schema: schema,
       validationContext: schema.newContext(),
       debounceTime: 0,
-      loading: false,
-      error: undefined,
     };
   },
   methods:{
     insertExperience(){
-      this.loading = true;
       let experience = this.schema.clean(this.model);
-      insertExperience.call({
+      let id = insertExperience.call({
         experience,
         creatureIds: this.creatureIds,
       }, (error) =>  {
-        this.loading = false;
         if (error){
-          this.error = error.message || error;
           console.error(error);
-        } else {
-          this.$store.dispatch('popDialogStack');
         }
       });
+      this.$store.dispatch('popDialogStack', id);
     }
   }
 }

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

@@ -5,6 +5,14 @@
         Experiences
       </v-toolbar-title>
       <v-spacer />
+      <v-btn
+        icon
+        flat
+        data-id="experience-add-button"
+        @click="addExperience"
+      >
+        <v-icon>add</v-icon>
+      </v-btn>
       <v-btn
         icon
         flat
@@ -14,33 +22,56 @@
       </v-btn>
     </template>
     <v-list>
-      <v-list-tile
-        v-for="experience in experiences"
-        :key="experience._id"
+      <v-slide-x-transition
+        group
+        mode="out"
       >
-        <v-list-tile-content>
-          <v-list-tile-title>
-            {{ experience.name }}
-          </v-list-tile-title>
-        </v-list-tile-content>
-        <v-list-tile-action>
-          <v-btn
-            icon
-            flat
-            :loading="experiencesRemovalLoading.has(experience._id)"
-            @click="removeExperience(experience._id)"
-          >
-            <v-icon>delete</v-icon>
-          </v-btn>
-        </v-list-tile-action>
-      </v-list-tile>
+        <v-list-tile
+          v-for="experience in experiences"
+          :key="experience._id"
+          :data-id="experience._id"
+        >
+          <v-list-tile-action class="mr-3">
+            <v-list-tile-action-text>
+              {{ formatDate(experience.date) }}
+            </v-list-tile-action-text>
+          </v-list-tile-action>
+          <v-list-tile-content>
+            <template v-if="experience.name">
+              <v-list-tile-title>
+                {{ experience.name }}
+              </v-list-tile-title>
+              <v-list-tile-sub-title>
+                {{ xpText(experience) }}
+              </v-list-tile-sub-title>
+            </template>
+            <template v-else>
+              <v-list-tile-title>
+                {{ xpText(experience) }}
+              </v-list-tile-title>
+            </template>
+          </v-list-tile-content>
+          <v-list-tile-action>
+            <v-btn
+              icon
+              flat
+              :loading="experiencesRemovalLoading.has(experience._id)"
+              @click="removeExperience(experience._id)"
+            >
+              <v-icon>delete</v-icon>
+            </v-btn>
+          </v-list-tile-action>
+        </v-list-tile>
+      </v-slide-x-transition>
     </v-list>
   </dialog-base>
 </template>
 
 <script>
+import { format } from 'date-fns';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import Experiences, { removeExperience, recomputeExperiences } from '/imports/api/creature/experience/Experiences.js';
+
 export default {
   components: {
     DialogBase,
@@ -50,6 +81,9 @@ export default {
       type: String,
       required: true,
     },
+    startAsMilestone: {
+      type: Boolean,
+    },
   },
   data(){ return {
     experiencesRemovalLoading: new Set(),
@@ -70,6 +104,21 @@ export default {
     }
   },
   methods: {
+    xpText(experience){
+      let xpText = [];
+      if (experience.levels === 1){
+        xpText.push('1 Milestone level');
+      } else if (experience.levels){
+        xpText.push(`${experience.levels} Milestone levels`);
+      }
+      if (experience.xp || !experience.levels){
+        xpText.push(`${experience.xp || 0} XP`);
+      }
+      return xpText.join(', ');
+    },
+    formatDate(date){
+      return format(date, 'YYYY-MM-DD');
+    },
     removeExperience(experienceId){
       this.experiencesRemovalLoading.add(experienceId);
       removeExperience.call({experienceId}, (error) => {
@@ -84,6 +133,19 @@ export default {
         if (error) console.error(error);
       });
     },
+    addExperience(){
+      this.$store.commit('pushDialogStack', {
+        component: 'experience-insert-dialog',
+        elementId: 'experience-add-button',
+        data: {
+          creatureIds: [this.creatureId],
+          startAsMilestone: this.startAsMilestone,
+        },
+        callback(id){
+          return id;
+        }
+      });
+    },
   },
 }
 </script>