add version check validation

resources/assets/js/helpers/utilities.js

@@ -182,4 +182,40 @@ export default {
       }
     )
   },
+  compareVersion(v1, v2, options) {
+    const lexicographical = options && options.lexicographical
+    const zeroExtend = options && options.zeroExtend
+    let v1parts = v1.split('.')
+    let v2parts = v2.split('.')
+    function isValidPart(x) {
+      return (lexicographical ? /^\d+[A-Za-z]*$/ : /^\d+$/).test(x)
+    }
+    if (!v1parts.every(isValidPart) || !v2parts.every(isValidPart)) {
+      return NaN
+    }
+    if (zeroExtend) {
+      while (v1parts.length < v2parts.length) v1parts.push('0')
+      while (v2parts.length < v1parts.length) v2parts.push('0')
+    }
+    if (!lexicographical) {
+      v1parts = v1parts.map(Number)
+      v2parts = v2parts.map(Number)
+    }
+    for (let i = 0; i < v1parts.length; ++i) {
+      if (v2parts.length == i) {
+        return 1
+      }
+      if (v1parts[i] == v2parts[i]) {
+        continue
+      } else if (v1parts[i] > v2parts[i]) {
+        return 1
+      } else {
+        return -1
+      }
+    }
+    if (v1parts.length != v2parts.length) {
+      return -1
+    }
+    return 0
+  },
 }

resources/assets/js/plugins/en.json

@@ -790,6 +790,7 @@
       "check_update": "Check for updates",
       "avail_update": "New Update available",
       "next_version": "Next version",
+      "requirements": "Requirements",
       "update": "Update Now",
       "update_progress": "Update in progress...",
       "progress_text": "It will just take a few minutes. Please do not refresh the screen or close the window before the update finishes",

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

@@ -36,16 +36,44 @@
           }}</label
           ><br />
           <label class="version">{{ updateData.version }}</label>
-          <p class="page-sub-title" style="white-space: pre-wrap;">{{ description }}</p>
+          <p class="page-sub-title" style="white-space: pre-wrap;">
+            {{ description }}
+          </p>
+          <label class="input-label">
+            {{ $t('settings.update_app.requirements') }}
+          </label>
+          <div
+            v-for="(ext, i) in requiredExtentions"
+            :key="i"
+            class="col-md-8 p-0"
+          >
+            <div class="update-requirements">
+              <div v-if="i == 'php'" class="d-flex justify-content-between">
+                <span>{{ i }}({{ minPhpVesrion }})</span>
+                <span
+                  v-if="$utils.compareVersion(ext, minPhpVesrion) != -1"
+                  class="verified"
+                />
+                <span v-else class="not-verified" />
+              </div>
+              <div v-else class="d-flex justify-content-between">
+                <span>{{ i }}</span>
+                <span v-if="ext" class="verified" />
+                <span v-else class="not-verified" />
+              </div>
+            </div>
+          </div>
           <base-button
             size="large"
             icon="rocket"
             color="theme"
+            class="mt-5"
             @click="onUpdateApp"
           >
             {{ $t('settings.update_app.update') }}
           </base-button>
         </div>
+
         <div v-if="isUpdating" class="mt-4 content">
           <div class="d-flex flex-row justify-content-between">
             <div>
@@ -131,6 +159,8 @@ export default {
         installed: '',
         version: '',
       },
+      requiredExtentions: null,
+      minPhpVesrion: null,
     }
   },
   created() {
@@ -177,6 +207,8 @@ export default {
           this.updateData.version = response.data.version.version
           this.description = response.data.version.description
           this.isUpdateAvailable = true
+          this.requiredExtentions = response.data.version.extensions
+          this.minPhpVesrion = response.data.version.minimum_php_version
         }
       } catch (e) {
         this.isUpdateAvailable = false
@@ -186,7 +218,17 @@ export default {
     },
     async onUpdateApp() {
       let path = null
-
+      if (
+        this.$utils.compareVersion(
+          this.requiredExtentions.php,
+          this.minPhpVesrion
+        ) == -1
+      ) {
+        window.toastr['error'](
+          'Your current configuration does not match the update requirements. Please try again after all the requirements are fulfilled.  '
+        )
+        return true
+      }
       for (let index = 0; index < this.updateSteps.length; index++) {
         let currentStep = this.updateSteps[index]
         try {
@@ -233,7 +275,9 @@ export default {
       let stepName = this.$t(translationKey)
       swal({
         title: this.$t('settings.update_app.update_failed'),
-        text: this.$tc('settings.update_app.update_failed_text', stepName, {step: stepName}),
+        text: this.$tc('settings.update_app.update_failed_text', stepName, {
+          step: stepName,
+        }),
         buttons: [this.$t('general.cancel'), this.$t('general.retry')],
       }).then(async (value) => {
         if (value) {
@@ -248,6 +292,12 @@ export default {
 </script>
 
 <style scoped>
+.update-requirements {
+  /* display: flex;
+  justify-content: space-between; */
+  padding: 10px;
+  border: 1px solid #eaf1fb;
+}
 .update {
   transform: rotate(360deg);
   animation: rotating 1s linear infinite;

resources/assets/sass/pages/settings.scss

@@ -20,7 +20,6 @@
         color: $ls-color-gray;
         font-size: 16px;
       }
-
     }
 
     .link-color {
@@ -40,7 +39,6 @@
   }
 
   .setting-main-container {
-
     .setting-card {
       padding: 30px;
       min-height: 620px;
@@ -66,7 +64,6 @@
         color: $ls-color-gray--dark;
         margin-bottom: 30px;
       }
-
     }
 
     .input-label {
@@ -74,9 +71,8 @@
       font-weight: 500;
       font-size: 14px;
       line-height: 21px;
-            color: #55547A;
+      color: #55547a;
     }
-
   }
 
   .expense-category {
@@ -91,7 +87,6 @@
     }
 
     .tax-name {
-
     }
 
     .compound-tax {
@@ -105,24 +100,33 @@
   }
 
   .payment-tab {
-
     .dropdown-container {
       right: 0;
       left: auto;
     }
-
   }
 
   .item-tab {
-
     .dropdown-container {
       right: 0;
       left: auto;
     }
-
   }
 
   .update-container {
+    .verified,
+    .not-verified {
+      height: 15px;
+      width: 15px;
+      background-color: $brand-success;
+      display: inline-block;
+      margin: 0 10px;
+      border-radius: 50%;
+    }
+
+    .not-verified {
+      background-color: $brand-danger;
+    }
 
     .update-spinner {
       font-size: 30px;
@@ -144,9 +148,7 @@
         &:last-child {
           border-bottom: 0px solid;
         }
-
       }
-
     }
 
     .update-step-text {
@@ -178,7 +180,7 @@
       }
 
       .status-pending {
-                background-color: #EAF1FB;
+        background-color: #eaf1fb;
         color: $ls-color-secondary;
       }
 
@@ -188,7 +190,7 @@
       }
 
       .status-finished {
-                background-color: #D4F6EE;
+        background-color: #d4f6ee;
         color: $ls-color-green;
       }
 
@@ -197,7 +199,6 @@
         color: $ls-color-red;
       }
     }
-
   }
 
   .add-new-tax {
@@ -225,7 +226,7 @@
     padding: 0;
     font-size: 16px;
     line-height: 21px;
-        color: #55547A;
+    color: #55547a;
   }
 
   .box-desc {
@@ -249,9 +250,9 @@
   }
 
   .version {
-        background: #EAF1FB;
-        color: #A5ACC1;
-        border: 1px solid #EAF1FB;
+    background: #eaf1fb;
+    color: #a5acc1;
+    border: 1px solid #eaf1fb;
     box-sizing: border-box;
     border-radius: 5px;
     padding: 10px;
@@ -260,11 +261,8 @@
 }
 
 @media (max-width: $x-small-breakpoint) {
-
   .settings-container {
-
     .setting-main-container {
-
       .setting-card {
         overflow: scroll;
       }
@@ -276,51 +274,38 @@
       .page-header {
         flex-wrap: wrap;
       }
-
     }
 
     .table-component {
-
       td:first-child {
         height: auto;
         min-height: 10px;
         text-align: center;
         justify-content: center;
       }
-
     }
 
     .tax-table {
-
       .tax-name {
         margin-top: 21px;
         width: 76%;
       }
-
     }
 
     .expense-category {
-
       .table-component__table__body {
-
         tr:first-child {
-
           td:nth-child(2) {
             height: auto;
             width: 101%;
           }
-
         }
-
       }
-
     }
 
     .add-new-tax {
       position: relative;
       z-index: 1;
     }
-
   }
-
 }