Client/inventory WIP (#8527)

* some stable work and faster less recompilation

*  user with zero tasks can use the app

* wip work to show loading status of resources

* revert changes to sync

website/client/app.vue

@@ -21,9 +21,9 @@ export default {
 };
 </script>
 
-<!-- Load CSS that doesn't belong to any specific component -->
+<style src="assets/less/semantic-ui/semantic.less" lang="less"></style>
-<style src="assets/css/index.css"></style>
 <style src="assets/less/index.less" lang="less"></style>
+<style src="assets/css/index.css"></style>
 
 <style scoped>
 .ui.fixed.menu + .ui.grid {

website/client/assets/less/index.less

@@ -1,5 +1,5 @@
 // CSS that doesn't belong to any specific Vue compoennt
-@import './semantic-ui/semantic.less';
+@import './utilities';
 @import './loading-screen';
 
 body {

website/client/assets/less/semantic-ui/semantic.less

@@ -22,9 +22,9 @@
 // & { @import "~semantic-ui-less/definitions/elements/divider"; }
 // & { @import "~semantic-ui-less/definitions/elements/flag"; }
 // & { @import "~semantic-ui-less/definitions/elements/header"; }
-// & { @import "~semantic-ui-less/definitions/elements/icon"; }
+& { @import "~semantic-ui-less/definitions/elements/icon"; }
 // & { @import "~semantic-ui-less/definitions/elements/image"; }
-// & { @import "~semantic-ui-less/definitions/elements/input"; }
+& { @import "~semantic-ui-less/definitions/elements/input"; }
 // & { @import "~semantic-ui-less/definitions/elements/label"; }
 & { @import "~semantic-ui-less/definitions/elements/list"; }
 // & { @import "~semantic-ui-less/definitions/elements/loader"; }
@@ -51,7 +51,7 @@
 
 /* Modules */
 // & { @import "~semantic-ui-less/definitions/modules/accordion"; }
-// & { @import "~semantic-ui-less/definitions/modules/checkbox"; }
+& { @import "~semantic-ui-less/definitions/modules/checkbox"; }
 // & { @import "~semantic-ui-less/definitions/modules/dimmer"; }
 & { @import "~semantic-ui-less/definitions/modules/dropdown"; }
 // & { @import "~semantic-ui-less/definitions/modules/embed"; }

website/client/assets/less/utilities.less

@@ -0,0 +1,7 @@
+// Center content inside a container using flexbox
+// SemanticUI's .centered only support grids
+.center-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

website/client/components/inventory/index.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 .row
   .sixteen.wide.column
-    .ui.secondary.menu
+    .ui.secondary.menu.center-content
       router-link.item(:to="{name: 'inventory'}", exact)
         span(v-once) {{ $t('inventory') }}
       router-link.item(:to="{name: 'equipment'}")

website/client/components/inventory/stable.vue

@@ -1,31 +1,84 @@
 <template lang="pug">
 .ui.grid
-  .four.wide.column
+  .three.wide.column
-    h2 Pets
+    .ui.left.icon.input
-    ul
+      i.search.icon
-      li(v-for="pet in listAnimals('pet', content.dropEggs, content.dropHatchingPotions)") {{pet}}
+      input(type="text", :placeholder="$t('search')")
+    h3(v-once) {{ $t('filter') }}
+
+    .ui.form
+      .field
+        .ui.checkbox
+          input(type='checkbox')
+          label.label-primary(v-once) {{ $t('pets') }}
+      .field.nested-field
+        .ui.checkbox
+          input(type='checkbox')
+          label(v-once) {{ $t('hatchingPotions') }}
+      .field.nested-field
+        .ui.checkbox
+          input(type='checkbox')
+          label(v-once) {{ $t('quest') }}
+      .field.nested-field
+        .ui.checkbox
+          input(type='checkbox')
+          label(v-once) {{ $t('special') }}
+      .field
+        .ui.checkbox
+          input(type='checkbox')
+          label.label-primary(v-once) {{ $t('mounts') }}
+      .field.nested-field
+        .ui.checkbox
+          input(type='checkbox')
+          label(v-once) {{ $t('hatchingPotions') }}
+      .field.nested-field
+        .ui.checkbox
+          input(type='checkbox')
+          label(v-once) {{ $t('quest') }}
+      .field.nested-field
+        .ui.checkbox
+          input(type='checkbox')
+          label(v-once) {{ $t('special') }}
+
+  .thirteen.wide.column
+    h2 Pets
+    .inventory-item-container(v-for="pet in listAnimals('pet', content.dropEggs, content.dropHatchingPotions)")
+      .PixelPaw
 
-  .four.wide.column
     h2 Magic Potions Pets
     ul
       li(v-for="pet in listAnimals('pet', content.dropEggs, content.premiumHatchingPotions)") {{pet}}
 
-  .four.wide.column
     h2 Quest Pets
     ul
       li(v-for="pet in listAnimals('pet', content.questEggs, content.dropHatchingPotions)") {{pet}}
 
-  //.four.wide.column
     h2 Rare Pets
     ul
       li(v-for="pet in listAnimals('pet', content.dropEggs, content.dropHatchingPotions)") {{pet}}
 
-    ul.row Mounts
+    h2 Mounts
-    ul.row Quest Mounts
+    h2 Quest Mounts
-    ul.row Rare Mounts
+    h2 Rare Mounts
 
 </template>
 
+<style>
+.label-primary {
+  font-weight: bold;
+}
+
+.nested-field {
+  padding-left: 1.5rem;
+}
+
+.inventory-item-container {
+  padding: 20px;
+  border: 1px solid;
+  display: inline-block;
+}
+</style>
+
 <script>
 import { mapState } from '../../store';
 import each from 'lodash/each';

website/client/main.js

@@ -37,7 +37,7 @@ store.watch(state => state.title, (title) => {
 
 // Mount the app when user and tasks are loaded
 let userDataWatcher = store.watch(state => [state.user, state.tasks], ([user, tasks]) => {
-  if (user && user._id && tasks && tasks.length) {
+  if (user && user._id && Array.isArray(tasks)) {
     userDataWatcher(); // remove the watcher
     app.$mount('#app');
   }

website/client/store/actions/user.js

@@ -1,6 +1,6 @@
 import axios from 'axios';
 
 export async function fetch (store) { // eslint-disable-line no-shadow
-  let response = await  axios.get('/api/v3/user');
+  let response = await axios.get('/api/v3/user');
   store.state.user = response.data.data;
 }

website/client/store/state.js

@@ -5,7 +5,7 @@ const state = {
   title: 'Habitica',
   user: null,
   tasks: null, // user tasks
-  // content data, frozen to prevent Vue from modifying it since it's static data that never changes
+  // content data, frozen to prevent Vue from modifying it since it's static and never changes
   // TODO apply freezing to the entire codebase (the server) and not only to the client side?
   // NOTE this takes about 10-15ms on a fast computer
   content: deepFreeze(content),