Added: Vuex & Store & loaders

package.json

@@ -30,7 +30,8 @@
     "save": "^2.3.3",
     "uimini": "^1.1.3",
     "vue": "^2.5.17",
-    "vue-chartjs": "^3.4.0"
+    "vue-chartjs": "^3.4.0",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.1.2",

src/components/UI/Messages.vue

@@ -1,33 +1,54 @@
 <template>
   <table class="ui-table">
-  <tbody>
-    <tr
-      v-for="message in messages"
-      :key="message.title" >
-      <td>
-        <a :href="message.link" :class="{ link : message.link}">
-          <span v-if="message.label === 'note'" class="ui-label ui-label--purple"> {{ message.label }}</span>
-          <span v-if="message.label === 'info'" class="ui-label ui-label--primary">{{ message.label }}</span>
-          <span v-if="message.titleRu && lang === 'ru' ">{{ message.titleRu }}</span>
-          <span v-else>{{ message.title }}</span>
-        </a>
-          <span class="time" v-if="message.time">{{ message.time }}</span>
-      </td>
-    </tr>
-  </tbody>
-</table>
+    <transition-group name="list" tag="tbody">
+      <tr
+        v-for="message in messages"
+        :key="message.title" >
+        <td>
+          <a :href="message.link" :class="{ link : message.link}">
+            <!-- whats label -->
+            <span v-if="message.label === 'note'" class="ui-label ui-label--purple"> {{ message.label }}</span>
+            <span v-if="message.label === 'info'" class="ui-label ui-label--primary">{{ message.label }}</span>
+            <!-- whats lang -->
+            <span v-if="message.titleRu && lang === 'ru' ">{{ message.titleRu }}</span>
+            <span v-else>{{ message.title }}</span>
+          </a>
+            <!-- set time -->
+            <span class="time" v-if="message.time">{{ message.time }}</span>
+          </td>
+      </tr>
+    </transition-group>
+
+    <!-- Load more -->
+    <div class="button-list button-list--center">
+      <button @click="$emit('more')" class="button button--round button-default icon-wrapper" :disabled="messagesLength === 0" :class="{ 'button--disable': messagesLength === 0 }">
+        <Preloader v-if="loading"></Preloader>
+        <span v-else>Load more</span>
+      </button>
+    </div>
+  </table>
 </template>
 
 <script>
+import Preloader from './Preloader.vue'
 export default {
+  components: { Preloader },
   props: {
     messages: {
-      type: Object,
+      type: Array,
       required: true
     },
     lang: {
       type: String,
       default: 'en'
+    },
+    messagesLength: {
+      type: Number,
+      default: 10
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -69,4 +90,27 @@ td {
 .ui-table td {
   min-height: unset;
 }
+.button-list {
+  margin-top: 20px;
+}
+.button-list--center{
+  display: flex;
+  justify-content: center;
+}
+.button--disable {
+  /* todo uimini */
+  cursor: default
+}
+/* Animation */
+.list-item {
+  display: inline-block;
+  margin-right: 10px;
+}
+.list-enter-active, .list-leave-active {
+  transition: all 1s;
+}
+.list-enter, .list-leave-to /* .list-leave-active до версии 2.1.8 */ {
+  opacity: 0;
+  transform: translateY(30px);
+}
 </style>

src/components/UI/Preloader.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="preloader">
+    <!-- todo =) -->
+    <div class="wBall" id="wBall_1"><div class="wInnerBall"></div></div>
+    <div class="wBall" id="wBall_2"><div class="wInnerBall"></div></div>
+    <div class="wBall" id="wBall_3"><div class="wInnerBall"></div></div>
+    <div class="wBall" id="wBall_4"><div class="wInnerBall"></div></div>
+    <div class="wBall" id="wBall_5"><div class="wInnerBall"></div></div>
+  </div>
+</template>
+
+<style scoped>
+.preloader {
+  position: relative;
+  display: inline-block;
+  width: 19px;
+  height: 19px;
+  margin:auto;
+}
+
+.wBall {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  opacity: 0;
+  transform: rotate(225deg);
+  animation: orbit 3.6325s infinite;
+}
+
+.wInnerBall{
+  position: absolute;
+  width: 2px;
+  height: 2px;
+  background: #444ce0;
+  left:0px;
+  top:0px;
+  border-radius: 3px;
+}
+
+#wBall_1 {
+  animation-delay: 0.796s;
+}
+
+#wBall_2 {
+  animation-delay: 0.153s;
+}
+
+#wBall_3 {
+  animation-delay: 0.3165s;
+}
+
+#wBall_4 {
+  animation-delay: 0.4695s;
+}
+
+#wBall_5 {
+  animation-delay: 0.633s;
+}
+
+@keyframes orbit {
+  0% {
+    opacity: 1;
+    z-index:99;
+    transform: rotate(180deg);
+    animation-timing-function: ease-out;
+  }
+
+  7% {
+    opacity: 1;
+    transform: rotate(300deg);
+    animation-timing-function: linear;
+    origin:0%;
+  }
+
+  30% {
+    opacity: 1;
+    transform:rotate(410deg);
+    animation-timing-function: ease-in-out;
+    origin:7%;
+  }
+
+  39% {
+    opacity: 1;
+    transform: rotate(645deg);
+    animation-timing-function: linear;
+    origin:30%;
+  }
+
+  70% {
+    opacity: 1;
+    transform: rotate(770deg);
+    animation-timing-function: ease-out;
+    origin:39%;
+  }
+
+  75% {
+    opacity: 1;
+    transform: rotate(900deg);
+    animation-timing-function: ease-out;
+    origin:70%;
+  }
+
+  76% {
+  opacity: 0;
+    transform:rotate(900deg);
+  }
+
+  100% {
+  opacity: 0;
+    transform: rotate(900deg);
+  }
+}
+</style>

src/components/dashboard/News.vue

@@ -1,11 +1,24 @@
 <template>
   <div class="news__wrapper ui-card ui-card--shadow">
+    <!-- //TODO fix all loading -->
+    <!-- titles -->
     <h3 v-if="lang === 'ru'" class="ui-title-3">Новостная лента</h3>
     <h3 v-else class="ui-title-3">News Feed</h3>
+    <!-- content -->
     <div class="notify__content" :class="{ loading: loading }">
+      <!-- find error TODO: err->connection -->
       <p v-if="error.error">Error: {{ error.message }}</p>
+      <!-- loading data TODO: rm use getter -->
       <div v-if="loading">Loading...</div>
-      <messages v-else :messages="notify" :lang="lang"></messages>
+      <!-- message table -->
+      <messages
+        v-else
+        :lang="lang"
+        :messages="messages"
+        :messagesLength="messagesLength"
+        :loading="loadingForBtn"
+        @more="loadMore">
+      </messages>
     </div>
   </div>
 </template>
@@ -23,8 +36,8 @@ export default {
   },
   data() {
     return {
-      notify: null,
       loading: true,
+      loadingForBtn: false,
       error: {
         error: false,
         message: null
@@ -35,14 +48,50 @@ export default {
     axios
       .get('https://vedees.ru/wcms/api.php', {})
       .then(response => {
-        this.notify = response.data.news
+        // data
+        let res = response.data.news,
+            news = [],
+            newsOld = [];
+
+        // 2 arrays created
+        for (let i = 0; i < res.length; i++) {
+          if (res[i].main) news.push(res[i])
+          else newsOld.push(res[i])
+        }
+        this.$store.dispatch('setNews', news)
+        this.$store.dispatch('setNewsOld', newsOld)
+        // Testing
+        // console.log(this.$store.getters.news)
+        // console.log(this.$store.getters.newsOldFilter)
       })
       .catch(error => {
         this.error.error = true
         this.error.message = error
         console.log(error)
       })
       .finally(() => (this.loading = false))
+  },
+  computed: {
+    messages () {
+      return this.$store.getters.newsMain
+    },
+    messagesLength () {
+      return this.$store.getters.newsOldFilter.length
+    }
+  },
+  methods: {
+    loadMore () {
+      this.loadingForBtn = true
+      //TODO =)
+      setTimeout(() => {
+        this.loadingForBtn = false
+        this.$store.dispatch('loadNews')
+          .catch(err => {
+            this.error.error = true
+            this.error.message = error
+          })
+      }, 500)
+    }
   }
 }
 </script>