Added Skill page + edit / delete

Author: YuukanOO

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-    "extends": "airbnb-base"
+    "extends": ["airbnb-base", "plugin:vue/recommended"],
+    "plugins": [
+        "vue"
+    ]
 }

package-lock.json

@@ -6,7 +6,7 @@
   "scripts": {
     "start": "webpack-dev-server",
     "build": "webpack",
-    "lint": "eslint src",
+    "lint": "eslint -c .eslintrc.json src",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "Julien LEICHER",
@@ -22,6 +22,7 @@
     "eslint": "^4.18.1",
     "eslint-config-airbnb-base": "^12.1.0",
     "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-vue": "^4.3.0",
     "html-webpack-plugin": "^2.30.1",
     "node-sass": "^4.7.2",
     "sass-loader": "^6.0.6",

package.json

@@ -1,8 +1,6 @@
 <template>
   <div class="pagebar">
-    <div>
-      <h1 class="pagebar__title">{{title}} <small>{{subtitle}}</small></h1>
-    </div>
+    <h1 class="pagebar__title">{{title}} <small>{{subtitle}}</small></h1>
     <div class="pagebar__actions">
       <slot />
     </div>
@@ -24,7 +22,7 @@ export default {
 @import "./../_vars.scss";
 
 .pagebar {
-  @include row($x: space-between, $y: center);
+  @include row($x: space-between, $y: center, $wrap: nowrap);
 
   margin-bottom: baseline();
   padding: baseline(0.5) 0;
@@ -33,6 +31,9 @@ export default {
     @include type(body);
     color: color(text-inverse);
     font-weight: bold;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
     small {
       @include type(small);

src/components/Pagebar.vue

@@ -4,10 +4,6 @@
       <btn inverse @click.prevent="create">Add an agent</btn>
     </pagebar>
 
-    <blankslate v-if="agents.length === 0" title="No agent yet!">
-      Looks like you do not have any agent yet! Go ahead and create one!
-    </blankslate>
-
     <list-item class="agents__list">
       <card 
         v-for="agent in agents"
@@ -21,6 +17,10 @@
       </card>
     </list-item>
 
+    <blankslate v-if="agents.length === 0" title="No agent yet!">
+      Looks like you do not have any agent yet! Go ahead and create one!
+    </blankslate>
+    
     <form>
       <modal title="Create an agent" v-model="agentModal">
         <textinput label="Name" v-model="agent.name" />

src/pages/Agents.vue

@@ -4,10 +4,6 @@
       <btn inverse @click.prevent="create">Add an entity</btn>
     </pagebar>
 
-    <blankslate v-if="entities.length === 0" title="No entity yet!">
-      Looks like you do not have any entity yet! Go ahead and create one!
-    </blankslate>
-
     <list-item class="entities__list">
       <card
         @click.prevent="edit(entity)"
@@ -21,6 +17,10 @@
       </card>
     </list-item>
 
+    <blankslate v-if="entities.length === 0" title="No entity yet!">
+      Looks like you do not have any entity yet! Go ahead and create one!
+    </blankslate>
+
     <form>
       <modal v-model="entityModal" :title="`${entity.id ? 'Update' : 'Create'} an entity`">
         <textinput label="Name" v-model="entity.name" />

src/pages/Entities.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="skill">
+    <pagebar :title="skill.name" :subtitle="skill.description">
+      <btn inverse @click.prevent="edit">Edit skill</btn>
+    </pagebar>
+
+    <form>
+      <modal title="Edit skill" v-model="skillModal">
+        <textinput label="Name" v-model="data.name" />
+        <textinput label="Description" v-model="data.description" />
+
+        <btn slot="actions" danger @click.prevent="remove">Delete</btn>
+        <btn submit slot="actions" @click.prevent="save">Save</btn>
+      </modal>
+    </form>
+  </div>
+</template>
+
+<script>
+import { actions } from './../store/agents';
+
+import Modal from './../components/Modal.vue';
+import Textinput from './../components/Textinput.vue';
+import Btn from './../components/Btn.vue';
+import Pagebar from './../components/Pagebar.vue';
+
+export default {
+  name: 'Skill',
+  components: { Pagebar, Btn, Modal, Textinput },
+  data() {
+    return {
+      skillModal: false,
+      data: {},
+    };
+  },
+  computed: {
+    skill() {
+      return this.$store.getters.skill(this.$route.params.id);
+    }
+  },
+  methods: {
+    edit() {
+      this.data = { ...this.skill };
+      this.skillModal = true;
+    },
+    async remove() {
+      await this.$store.dispatch(actions.removeSkill.name, this.data.id);
+      this.$router.push({ name: 'skills' });
+    },
+    async save() {
+      await this.$store.dispatch(actions.upsertSkill.name, this.data);
+      this.skillModal = false;
+    },
+  },
+}
+</script>

src/pages/Skill.vue

@@ -4,6 +4,19 @@
       <btn inverse @click.prevent="create">Add a skill</btn>
     </pagebar>
 
+    <list-item class="skills__list">
+      <card 
+        v-for="skill in skills"
+        :key="skill.id"
+        class="skills__item"
+        :to="{ name: 'skill', params: { id: skill.id } }"
+        :title="skill.name"
+        :subtitle="skill.description"
+      >
+        {{skill.intents.length}} intent{{skill.intents.length > 1 ? 's' : ''}}
+      </card>
+    </list-item>
+
     <blankslate v-if="skills.length === 0" title="No skill yet!">
       Looks like you do not have any skill yet! Go ahead and create one!
     </blankslate>
@@ -22,7 +35,10 @@
 <script>
 import { mapGetters } from 'vuex';
 
+import ListItem from './../animations/ListItem.vue';
+
 import Pagebar from './../components/Pagebar.vue';
+import Card from './../components/Card.vue';
 import Blankslate from './../components/Blankslate.vue';
 import Textinput from './../components/Textinput.vue';
 import Btn from './../components/Btn.vue';
@@ -31,7 +47,7 @@ import { actions } from './../store/agents';
 
 export default {
   name: 'Skills',
-  components: { Pagebar, Btn, Blankslate, Modal, Textinput },
+  components: { Pagebar, Btn, Blankslate, Modal, Textinput, Card, ListItem },
   data() {
     return {
       skillModal: false,
@@ -60,5 +76,21 @@ export default {
 .skills {
   @include col($x: stretch, $y: flex-start);
   flex: 1;
+
+  &__list {
+    @include row($gap: 27px);
+  }
+
+  &__item {
+    @include cell(1, $grow: 0);
+
+    @include on(tablet) {
+      @include cell(1/3, $grow: 0);
+    }
+
+    @include on(desktop) {
+      @include cell(1/4, $grow: 0);
+    }
+  }
 }
 </style>

src/pages/Skills.vue

@@ -4,6 +4,7 @@ import Router from 'vue-router';
 import Agents from './../pages/Agents.vue';
 import Agent from './../pages/Agent.vue';
 import Skills from './../pages/Skills.vue';
+import Skill from './../pages/Skill.vue';
 import Entities from './../pages/Entities.vue';
 
 Vue.use(Router);
@@ -31,6 +32,11 @@ export default function createRouter() {
         name: 'skills',
         component: Skills,
       },
+      {
+        path: '/skill/:id',
+        name: 'skill',
+        component: Skill,
+      },
     ],
   });
 }

src/router/index.js

@@ -63,15 +63,15 @@ const mutations = {
       id,
       name,
       description,
-      slots: {},
-      data: [],
+      intents: [],
     });
   },
-  setSkill(state, { id }) {
+  setSkill(state, { id, name, description }) {
     const skill = state.skills[id];
 
     if (skill) {
-
+      skill.name = name;
+      skill.description = description;
     }
   },
   deleteSkill(state, id) {
@@ -107,13 +107,17 @@ export const actions = {
       commit(mutations.addSkill.name, data);
     }
   },
+  removeSkill({ commit }, id) {
+    commit(mutations.deleteSkill.name, id);
+  },
 };
 
 const getters = {
   agents: state => Object.values(state.agents),
   skills: state => Object.values(state.skills),
   entities: state => Object.values(state.entities),
   agent: state => id => state.agents[id],
+  skill: state => id => state.skills[id],
 };
 
 const state = {