Merge branch 'virsion-check' into 'master'

Version check

See merge request mohit.panjvani/crater-web!470

app/Space/Updater.php

@@ -28,7 +28,19 @@ class Updater
             $data = $response->getBody()->getContents();
         }
 
-        return json_decode($data);
+        $data = json_decode($data);
+
+        if ($data->success && $data->version) {
+            $extensions = $data->version->extensions;
+            $extensionData = [];
+            foreach (json_decode($extensions) as $extension) {
+                $extensionData[$extension] = phpversion($extension) ? true : false;
+            }
+            $extensionData['php'. '('.$data->version->minimum_php_version.')'] = version_compare(phpversion(), $data->version->minimum_php_version, ">=");
+            $data->version->extensions = $extensionData;
+        }
+
+        return $data;
     }
 
     public static function download($new_version)

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",
@@ -802,7 +803,7 @@
       "running_migrations": "Running Migrations",
       "finishing_update": "Finishing Update",
       "update_failed": "Update Failed",
-      "update_failed_text": "Sorry! Your update failed on : {step} step"   
+      "update_failed_text": "Sorry! Your update failed on : {step} step"
     }
   },
   "wizard": {

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

@@ -36,16 +36,36 @@
           }}</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 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,8 +151,19 @@ export default {
         installed: '',
         version: '',
       },
+      requiredExtentions: null,
+      minPhpVesrion: null,
     }
   },
+  computed: {
+    allowToUpdate() {
+      if (this.requiredExtentions !== null) {
+        return Object.keys(this.requiredExtentions).every((k) => {
+          return this.requiredExtentions[k]
+        })
+      }
+    },
+  },
   created() {
     window.addEventListener('beforeunload', (event) => {
       if (this.isUpdating) {
@@ -177,6 +208,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 +219,12 @@ export default {
     },
     async onUpdateApp() {
       let path = null
-
+      if (!this.allowToUpdate) {
+        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 {
@@ -230,15 +268,17 @@ export default {
       }
     },
     onUpdateFailed(translationKey) {
-      let stepName = this.$t(translationKey) 
+      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) {
           this.onUpdateApp()
-          return 
+          return
         }
         this.isUpdating = false
       })
@@ -248,6 +288,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

@@ -2,325 +2,310 @@
 // -------------------------
 
 .settings-container {
-    margin-top: 40px;
+  margin-top: 40px;
 
-    .settings-sidebar {
+  .settings-sidebar {
-        list-style-type: none;
+    list-style-type: none;
-        padding: 0px;
+    padding: 0px;
 
-        .settings-menu-item {
+    .settings-menu-item {
-            padding: 10px 0px;
+      padding: 10px 0px;
-            font-weight: 500;
+      font-weight: 500;
-            font-size: 14px;
+      font-size: 14px;
-            line-height: 18px;
+      line-height: 18px;
-            color: $ls-color-black;
+      color: $ls-color-black;
 
-            .setting-icon {
+      .setting-icon {
-                width: 25px;
+        width: 25px;
-                color: $ls-color-gray;
+        color: $ls-color-gray;
-                font-size: 16px;
+        font-size: 16px;
-            }
+      }
-
-        }
-
-        .link-color {
-            color: $ls-color-gray--dark;
-            display: flex;
-            align-items: center;
-        }
-
-        .active-setting {
-            color: $ls-color-primary !important;
-            cursor: pointer;
-
-            .setting-icon {
-                color: $ls-color-primary !important;
-            }
-        }
     }
 
+    .link-color {
+      color: $ls-color-gray--dark;
+      display: flex;
+      align-items: center;
+    }
+
+    .active-setting {
+      color: $ls-color-primary !important;
+      cursor: pointer;
+
+      .setting-icon {
+        color: $ls-color-primary !important;
+      }
+    }
+  }
+
+  .setting-main-container {
+    .setting-card {
+      padding: 30px;
+      min-height: 620px;
+    }
+
+    .page-header {
+      margin: 0px;
+
+      .page-title {
+        margin: 0;
+        padding-bottom: 10px;
+        font-weight: 500;
+        font-size: 17.5px;
+        line-height: 21px;
+        letter-spacing: 0.1px;
+        color: #000000;
+      }
+
+      .page-sub-title {
+        max-width: 480px;
+        font-size: 14px;
+        line-height: 21px;
+        color: $ls-color-gray--dark;
+        margin-bottom: 30px;
+      }
+    }
+
+    .input-label {
+      font-style: normal;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 21px;
+      color: #55547a;
+    }
+  }
+
+  .expense-category {
+    td {
+      background-color: $ls-color-gray--very-light !important;
+    }
+  }
+
+  .tax-table {
+    td {
+      background-color: $ls-color-gray--very-light !important;
+    }
+
+    .tax-name {
+    }
+
+    .compound-tax {
+      display: inline;
+      padding: 2px 8px;
+      font-size: 10px;
+      line-height: 15px;
+      background: $red--very-light;
+      color: $red--dark;
+    }
+  }
+
+  .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;
+      color: $ls-color-gray--dark;
+    }
+
+    .update-steps-container {
+      list-style-type: none;
+      width: 100%;
+      padding: 0px;
+
+      .update-step {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        padding: 10px 0px;
+        border-bottom: 1px solid $ls-color-gray--light;
+
+        &:last-child {
+          border-bottom: 0px solid;
+        }
+      }
+    }
+
+    .update-step-text {
+      font-size: $font-size-base;
+      margin: 0px;
+      line-height: 2rem;
+    }
+
+    .update-status-container {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .update-time {
+        font-size: 10px;
+        color: $ls-color-gray--dark;
+        margin-right: 10px;
+      }
+
+      .update-status {
+        font-size: 13px;
+        width: 88px;
+        height: 28px;
+        display: block;
+        text-align: center;
+        border-radius: 30px;
+        text-transform: uppercase;
+        line-height: 2rem;
+      }
+
+      .status-pending {
+        background-color: #eaf1fb;
+        color: $ls-color-secondary;
+      }
+
+      .status-running {
+        background-color: rgba(21, 178, 236, 0.15);
+        color: $ls-color-light-blue;
+      }
+
+      .status-finished {
+        background-color: #d4f6ee;
+        color: $ls-color-green;
+      }
+
+      .status-error {
+        background-color: rgba(251, 113, 120, 0.22);
+        color: $ls-color-red;
+      }
+    }
+  }
+
+  .add-new-tax {
+    height: 45px;
+    white-space: nowrap;
+    z-index: 1;
+  }
+
+  .flex-box {
+    display: flex;
+  }
+
+  .left {
+    position: relative;
+    width: 50px;
+  }
+
+  .btn-switch {
+    position: absolute;
+    top: -18px;
+  }
+
+  .box-title {
+    margin-bottom: 5px;
+    padding: 0;
+    font-size: 16px;
+    line-height: 21px;
+    color: #55547a;
+  }
+
+  .box-desc {
+    margin: 0;
+    padding: 0;
+    max-width: 480px;
+    font-size: 12px;
+    line-height: 18px;
+    color: $ls-color-gray--dark;
+  }
+
+  .notes {
+    overflow: hidden;
+    width: 200px;
+
+    .note {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  }
+
+  .version {
+    background: #eaf1fb;
+    color: #a5acc1;
+    border: 1px solid #eaf1fb;
+    box-sizing: border-box;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 15px;
+  }
+}
+
+@media (max-width: $x-small-breakpoint) {
+  .settings-container {
     .setting-main-container {
+      .setting-card {
+        overflow: scroll;
+      }
 
-        .setting-card {
+      & .ml-15 {
-            padding: 30px;
+        margin-left: 15px;
-            min-height: 620px;
+      }
-        }
-
-        .page-header {
-            margin: 0px;
-
-            .page-title {
-                margin: 0;
-                padding-bottom: 10px;
-                font-weight: 500;
-                font-size: 17.5px;
-                line-height: 21px;
-                letter-spacing: 0.1px;
-                color: #000000;
-            }
-
-            .page-sub-title {
-                max-width: 480px;
-                font-size: 14px;
-                line-height: 21px;
-                color: $ls-color-gray--dark;
-                margin-bottom: 30px;
-            }
-
-        }
-
-        .input-label {
-            font-style: normal;
-            font-weight: 500;
-            font-size: 14px;
-            line-height: 21px;
-            color: #55547A;
-        }
 
+      .page-header {
+        flex-wrap: wrap;
+      }
     }
 
-    .expense-category {
+    .table-component {
-        td {
+      td:first-child {
-            background-color: $ls-color-gray--very-light !important;
+        height: auto;
-        }
+        min-height: 10px;
+        text-align: center;
+        justify-content: center;
+      }
     }
 
     .tax-table {
-        td {
+      .tax-name {
-            background-color: $ls-color-gray--very-light !important;
+        margin-top: 21px;
-        }
+        width: 76%;
-
+      }
-        .tax-name {
-
-        }
-
-        .compound-tax {
-            display: inline;
-            padding: 2px 8px;
-            font-size: 10px;
-            line-height: 15px;
-            background: $red--very-light;
-            color: $red--dark;
-        }
     }
 
-    .payment-tab {
+    .expense-category {
-
+      .table-component__table__body {
-        .dropdown-container {
+        tr:first-child {
-            right: 0;
+          td:nth-child(2) {
-            left: auto;
+            height: auto;
+            width: 101%;
+          }
         }
-
+      }
-    }
-
-    .item-tab {
-
-        .dropdown-container {
-            right: 0;
-            left: auto;
-        }
-
-    }
-
-    .update-container {
-
-        .update-spinner {
-            font-size: 30px;
-            color: $ls-color-gray--dark;
-        }
-
-        .update-steps-container {
-            list-style-type: none;
-            width: 100%;
-            padding: 0px;
-
-            .update-step {
-                display: flex;
-                width: 100%;
-                justify-content: space-between;
-                padding: 10px 0px;
-                border-bottom: 1px solid $ls-color-gray--light;
-
-                &:last-child {
-                    border-bottom: 0px solid;
-                }
-
-            }
-
-        }
-
-        .update-step-text {
-            font-size: $font-size-base;
-            margin: 0px;
-            line-height: 2rem;
-        }
-
-        .update-status-container {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-
-            .update-time {
-                font-size: 10px;
-                color: $ls-color-gray--dark;
-                margin-right: 10px;
-            }
-    
-            .update-status {
-                font-size: 13px;
-                width: 88px;
-                height: 28px;
-                display: block;
-                text-align: center;
-                border-radius: 30px;
-                text-transform: uppercase;
-                line-height: 2rem;
-            }
-    
-            .status-pending {
-                background-color: #EAF1FB;
-                color: $ls-color-secondary;
-            }
-    
-            .status-running {
-                background-color: rgba(21, 178, 236, 0.15);
-                color: $ls-color-light-blue;
-            }
-    
-            .status-finished {
-                background-color: #D4F6EE;
-                color: $ls-color-green;
-            }
-    
-            .status-error {
-                background-color: rgba(251, 113, 120, 0.22);
-                color: $ls-color-red;
-            }
-        }
-
     }
 
     .add-new-tax {
-        height: 45px;
+      position: relative;
-        white-space: nowrap;
+      z-index: 1;
-        z-index: 1;
-    }
-
-    .flex-box {
-        display: flex;
-    }
-
-    .left {
-        position: relative;
-        width: 50px;
-    }
-
-    .btn-switch {
-        position: absolute;
-        top: -18px;
-    }
-
-    .box-title {
-        margin-bottom: 5px;
-        padding: 0;
-        font-size: 16px;
-        line-height: 21px;
-        color: #55547A;
-    }
-
-    .box-desc {
-        margin: 0;
-        padding: 0;
-        max-width: 480px;
-        font-size: 12px;
-        line-height: 18px;
-        color: $ls-color-gray--dark;
-    }
-
-    .notes {
-        overflow: hidden;
-        width: 200px;
-
-        .note {
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-        }
-    }
-
-    .version {
-        background: #EAF1FB;
-        color: #A5ACC1;
-        border: 1px solid #EAF1FB;
-        box-sizing: border-box;
-        border-radius: 5px;
-        padding: 10px;
-        margin-bottom: 15px;
     }
-}
+  }
-
-@media(max-width: $x-small-breakpoint ) {
-
-    .settings-container {
-
-        .setting-main-container {
-
-            .setting-card {
-                overflow: scroll;
-            }
-
-            & .ml-15 {
-                margin-left: 15px;
-            }
-
-            .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;
-        }
-
-    }
-
 }