Merge pull request #4 from Dual-Ice/week4

Week4

cypress.json

@@ -0,0 +1 @@
+{}

cypress/integration/login.js

@@ -0,0 +1,26 @@
+beforeEach(() => {
+  cy.visit("http://localhost:8080/admin")
+})
+it("На странице есть кнопка “Отправить”", () => {
+  cy.get('.login__btn').then($el => {
+    const text = $el.text()
+    cy.wrap(text).should("not.be.empty")
+    cy.wrap(text).should("not.contain", null)
+    cy.wrap(text).should("not.contain", undefined)
+    cy.wrap(text).should("contain", 'Отправить')
+  })
+});
+
+it("Форма имеет все необходимые поля", () => {
+  cy.get('input[name="login"]')
+  cy.get('input[name="password"]')
+  cy.get('.login__btn')
+});
+
+it("Кнопка “Отправить” заблокирована", () => {
+  cy.get('.login__btn').should('have.class', 'blocked')
+  cy.get('input[name="login"]').type('login')
+
+  cy.get('input[name="password"]').type('password')
+  cy.get('.login__btn').should('not.have.class', 'blocked')
+});

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "webpack-dev-server --mode=development --hot",
     "build": "rm -rf dist && webpack --mode=production --progress",
-    "reg": "node reg-util.js"
+    "reg": "node reg-util.js",
+    "cypress": "cypress open"
   },
   "keywords": [],
   "author": "Maxim Stogniy <[email protected]>",
@@ -47,8 +48,8 @@
     "svg-transform-loader": "^2.0.7",
     "svgo-loader": "^2.2.0",
     "terser-webpack-plugin": "^1.2.3",
-    "vue-loader": "^15.6.4",
-    "vue-template-compiler": "^2.6.7",
+    "vue-loader": "^15.9.2",
+    "vue-template-compiler": "^2.6.11",
     "webpack": "^4.29.5",
     "webpack-cli": "^3.2.3",
     "webpack-dev-server": "^3.2.0"
@@ -57,14 +58,18 @@
     "last 2 versions"
   ],
   "dependencies": {
+    "axios": "^0.19.2",
+    "babel-polyfill": "^6.26.0",
+    "cypress": "^4.6.0",
     "normalize.css": "^8.0.1",
     "promptly": "^3.0.3",
     "pug": "^2.0.3",
     "request": "^2.88.0",
     "signale": "^1.4.0",
-    "vue": "^2.6.7",
+    "vue": "^2.6.11",
     "vue-carousel": "^0.18.0",
-    "vue-router": "^3.0.2",
-    "vuelidate": "^0.7.5"
+    "vue-router": "^3.2.0",
+    "vuelidate": "^0.7.5",
+    "vuex": "^3.4.0"
   }
 }

src/admin/App.vue

@@ -1,35 +1,24 @@
 <template lang="pug">
   .root-container
-    header.header-container
-      Header
-    nav.nav-container
-      Navigation
+    router-view(name="header")
+    router-view(name="nav")
     main.content-container
-      router-view
-
+      keep-alive
+        router-view
+    toast()
 </template>
 <script>
-import Header from "./components/Header"
-import Navigation from "./components/Navigation"
-import About from "./components/About/About"
-import Works from "./components/Works/Works"
-import Reviews from "./components/Reviews/Reviews"
-
 export default {
   components: {
-    Header,
-    Navigation,
-    About,
-    Works,
-    Reviews
-  }  
+    toast: () => import('./components/partial/Toast')
+  }
 }
 </script>
 <style lang="postcss">
-@import "normalize.css";
-@import "../styles/mixins.pcss";
-@import "../styles/layout/base.pcss";
-@import "../styles/layout/fonts.pcss";
+  @import "normalize.css";
+  @import "../styles/mixins.pcss";
+  @import "../styles/layout/base.pcss";
+  @import "../styles/layout/fonts.pcss";
 
   .divider {
     margin: 0;
@@ -60,11 +49,6 @@ export default {
     color: $admin-font;
   }
 
-  .header-container {
-    padding: 17px 0;
-    background-image: linear-gradient(to right, #3e3e59 0%, #454573 100%);
-  }
-
   .page-title {
     font-size: 21px;
     font-weight: 700;
@@ -80,10 +64,6 @@ export default {
     }
   }
 
-  .nav-container {
-    background: $white;
-  }
-
   .content-container {
     background: url("../images/bg/bg-admin.jpg") center center /cover no-repeat;
     flex: 1;

src/admin/components/About/About.vue

@@ -8,23 +8,26 @@
             text="Добавить группу"
             size="small"
             type='button'
-            @click="showAddSkillGroup = true")
+            @click="showAddGroup = true")
     .about__content
       .container.about__content-container
         ul.skill-group__list
-          li.skill-group__item(v-if="showAddSkillGroup")
-            SkillGroup(:value="emptySkillGroup")
+          li.skill-group__item(v-if="showAddGroup")
+            SkillGroup(
+              :skillGroup="category"
+              @hide="hideAddGroup")
           li(
-            v-for="skillGroup in skillGroups"
-            :key="skillGroup.id"
+            v-for="category in categories"
+            :key="category.id"
           ).skill-group__item
             SkillGroup(
-              :value="skillGroup"
+              :skillGroup="category"
             )
 </template>
 <script>
-import AddBtn from "../AddBtn"
-import SkillGroup from "./SkillGroup"
+import SkillGroup from './SkillGroup'
+import AddBtn from '../partial/AddBtn'
+import { mapState, mapActions } from 'vuex'
 export default {
   components: {
     AddBtn,
@@ -33,69 +36,37 @@ export default {
 
   data () {
     return {
-      skillGroups: [
-        {
-          "id": 1,
-          "title": "Frontend",
-          "skills": [
-            {
-              "id": 1,
-              "title": "HTML5",
-              "percent": 100
-            },
-            {
-              "id": 2,
-              "title": "CSS3",
-              "percent": 50
-            },
-            {
-              "id": 3,
-              "title": "JavaScript",
-              "percent": 25
-            },
-            {
-              "id": 4,
-              "title": "VueJs",
-              "percent": 30
-            }
-          ]
-        },
-        {
-          "id": 2,
-          "title": "Workflow",
-          "skills": [
-            {
-              "id": 1,
-              "title": "GIT",
-              "percent": 45
-            },
-            {
-              "id": 2,
-              "title": "Terminal",
-              "percent": 60
-            },
-            {
-              "id": 3,
-              "title": "Gulp",
-              "percent": 30
-            },
-            {
-              "id": 4,
-              "title": "Webpack",
-              "percent": 75
-            }
-          ]
-        }
-      ],
-      emptySkillGroup: {
-        id: '',
-        title: '',
-        skills: []
+      category: {
+        category: ''
       },
-      showAddSkillGroup: false
+      showAddGroup: false
     }
-  }
+  },
+
+  computed: {
+    ...mapState('categories', ['categories']),
+    ...mapState('auth', ['user'])
+  },
   
+  beforeRouteLeave (to, from, next) {
+    this.showAddGroup = false
+    next()
+  },
+
+  created() {
+    this.loadCategories(this.user.id)
+  },
+
+  methods: {
+    ...mapActions('categories', ['loadCategories']),
+    
+    hideAddGroup () {
+      this.showAddGroup = false
+      this.category = {
+        category: ''
+      }
+    }
+  }
 }
 </script>
 <style lang="postcss" scoped>

src/admin/components/About/Skill.vue

@@ -13,9 +13,12 @@
         CardBtn(
           icon="trash"
           type="button"
-          @click="delSkill"
+          @click="deleteSkill(skill)"
         ).skill__btn
-    form(@submit.prevent="saveSkill")(v-else)
+    form(
+      v-else 
+      @submit.prevent="saveSkill"
+    )
       .skill__data
         .skill__field 
           CustomInput(
@@ -41,8 +44,9 @@
           ).skill__btn
 </template>
 <script>
-import CardBtn from "../CardBtn"
-import CustomInput from "../CustomInput"
+import { mapActions } from 'vuex';
+import CardBtn from '../partial/CardBtn'
+import CustomInput from '../partial/CustomInput'
 import { required, minLength, numeric, maxValue } from 'vuelidate/lib/validators'
 
 export default {
@@ -52,7 +56,12 @@ export default {
   },
   
   props: {
-    skill: Object
+    skill: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
   },
 
   data () {
@@ -77,12 +86,18 @@ export default {
   },
 
   methods: {
+    ...mapActions(
+      'categories',
+      ['deleteSkill', 'updateSkill']
+    ),
+
     switchEdit () {
+      this.editMode = !this.editMode
+
       if (this.editMode) {
         this.tmpSkill = {...this.skill}
+        this.$v.tmpSkill.$reset()
       }
-      this.editMode = !this.editMode
-      this.$v.tmpSkill.$reset()
     },
 
     validationMessage (field) {
@@ -112,16 +127,12 @@ export default {
       }
     },
 
-    saveSkill () {
+    async saveSkill () {
       this.$v.tmpSkill.$touch()
       if (!this.$v.tmpSkill.$error) {
+        await this.updateSkill(this.tmpSkill);
         this.switchEdit()
-        console.log("All is ok: ", this.tmpSkill)
       }
-    },
-
-    delSkill () {
-
     }
   }
 }
@@ -204,6 +215,7 @@ export default {
 
   .skill__btn {
     filter: grayscale(1) brightness(2.5);
+    transition: filter .3s ease-in;
 
     &:hover {
       filter: none;