add update app on settings

resources/assets/js/plugins/en.js

@@ -528,7 +528,8 @@ export default {
       preferences: 'Preferences',
       notifications: 'Notifications',
       tax_types: 'Tax Types',
-      expense_category: 'Expense Categories'
+      expense_category: 'Expense Categories',
+      update_app: 'Update App'
     },
     title: 'Settings',
     setting: 'Settings | Settings',
@@ -664,6 +665,11 @@ export default {
       select_time_zone: 'select Time Zone',
       select_date_formate: 'select Date Formate',
       select_financial_year: 'select financial year'
+    },
+    update_app: {
+      title: 'Update App',
+      description: 'update app description',
+      update: 'Update'
     }
   },
   wizard: {

resources/assets/js/router.js

@@ -72,6 +72,7 @@ import UserProfile from './views/settings/UserProfile.vue'
 import TaxTypes from './views/settings/TaxTypes.vue'
 import ExpenseCategory from './views/settings/ExpenseCategory.vue'
 import MailConfig from './views/settings/MailConfig.vue'
+import UpdateApp from './views/settings/UpdateApp.vue'
 
 import Wizard from './views/wizard/Index.vue'
 
@@ -337,6 +338,11 @@ const routes = [
             path: 'notifications',
             name: 'notifications',
             component: Notifications
+          },
+          {
+            path: 'update-app',
+            name: 'updateapp',
+            component: UpdateApp
           }
         ]
       }

resources/assets/js/views/settings/UpdateApp.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="setting-main-container">
+    <div class="card setting-card">
+      <div class="page-header">
+        <h3 class="page-title">{{ $t('settings.update_app.title') }}</h3>
+        <p class="page-sub-title">
+          {{ $t('settings.update_app.description') }}
+        </p>
+        <base-button size="large" icon="sync-alt" color="theme" @click="onUpdateApp">
+          {{ $t('settings.update_app.update') }}
+        </base-button>
+        <div v-if="isShowProgressBar" class="progress mt-4">
+          <div
+            :style="[{'width': progress+'%'}]"
+            class="progress-bar progress-bar-striped progress-bar-animated"
+            role="progressbar"
+            aria-valuenow="0"
+            aria-valuemin="0"
+            aria-valuemax="100"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  data () {
+    return {
+      isShowProgressBar: false,
+      progress: 10,
+      interval: null
+    }
+  },
+  watch: {
+  },
+  mounted () {
+  },
+  methods: {
+    onUpdateApp () {
+      this.isShowProgressBar = true
+      this.interval = setInterval(() => {
+        if (this.progress >= 100) {
+          clearInterval(this.interval)
+          setTimeout(() => {
+            this.isShowProgressBar = false
+          }, 1000)
+        }
+        this.progress += 10
+      }, 250)
+    }
+  }
+}
+</script>

resources/assets/js/views/settings/layout/Index.vue

@@ -74,6 +74,12 @@ export default {
           title: 'settings.menu_title.notifications',
           icon: 'bell',
           iconType: 'far'
+        },
+        {
+          link: '/admin/settings/update-app',
+          title: 'settings.menu_title.update_app',
+          icon: 'sync-alt',
+          iconType: 'fas'
         }
       ]
     }

resources/assets/plugins/vue-font-awesome/index.js

@@ -50,7 +50,8 @@ import {
   faShare,
   faEllipsisH,
   faCopy,
-  faPaperPlane
+  faPaperPlane,
+  faSyncAlt
 } from '@fortawesome/free-solid-svg-icons'
 import { far } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -111,7 +112,8 @@ library.add(
   faShare,
   faEllipsisH,
   faCopy,
-  faPaperPlane
+  faPaperPlane,
+  faSyncAlt
 )
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)

resources/assets/sass/pages/estimates/index.scss

@@ -38,7 +38,7 @@
     }
 
     .filter-date {
-        flex: 1;
+        flex: 2;
         display: flex;
         margin-right: 40px;
         align-items: center;
@@ -60,7 +60,7 @@
         margin-top: 28px;
     }
 
-    @media(max-width: $medium-breakpoint ) {
+    @media(max-width: $large-breakpoint ) {
         .filter-container {
             flex-direction: column;
         }

resources/assets/sass/pages/invoices/index.scss

@@ -33,7 +33,7 @@
     }
 
     .filter-date {
-        flex: 1;
+        flex: 2;
         display: flex;
         margin-right: 40px;
         align-items: center;
@@ -55,7 +55,7 @@
         margin-top: 28px;
     }
 
-    @media(max-width: $medium-breakpoint ) {
+    @media(max-width: $large-breakpoint ) {
         .filter-container {
             flex-direction: column;
         }