version controller and ui fixes

package.json

@@ -28,6 +28,7 @@
     "pm2": "^5.3.0",
     "roboto-fontface": "*",
     "sass": "^1.60.0",
+    "semver": "^7.5.4",
     "unplugin-fonts": "^1.0.3",
     "vite": "^4.2.0",
     "vite-plugin-vuetify": "^1.0.0",

src/components/instance/settings/Chatwoot.vue

@@ -133,12 +133,18 @@
               </template>
             </v-checkbox>
           </div>
-          <div v-if="chatwootData.auto_create !== undefined">
+
+          <div>
             <v-checkbox
               v-model="chatwootData.auto_create"
               label="Conversa pendente"
-              :disabled="loading"
-              hide-details
+              :disabled="loading || !AppStore.versionSatisfies('>=1.6.0')"
+              :error-messages="[
+                !AppStore.versionSatisfies('>=1.6.0')
+                  ? 'Disponível a partir da versão 1.6.0'
+                  : undefined,
+              ]"
+              hide-details="auto"
               class="mb-3"
               density="compact"
             >
@@ -185,7 +191,7 @@
 <script>
 import ChatwootConfig from "@/components/modal/ChatwootConfig.vue";
 import instanceController from "@/services/instanceController";
-
+import { useAppStore } from "@/store/app";
 const defaultObj = () => ({
   enabled: false,
   url: "",
@@ -210,6 +216,7 @@ export default {
     loading: false,
     error: false,
     valid: false,
+    AppStore: useAppStore(),
     chatwootData: {
       enabled: false,
       url: "",
@@ -264,12 +271,9 @@ export default {
         );
 
         const validData = chatwootData._doc || chatwootData;
-        
+
         this.chatwootData = Object.assign(defaultObj(), validData || {});
-        this.defaultChatwootData = Object.assign(
-          defaultObj(),
-          validData || {}
-        );
+        this.defaultChatwootData = Object.assign(defaultObj(), validData || {});
       } catch (e) {
         this.error = e.message?.message || e.message || e;
       } finally {

src/components/modal/ConnectPhone.vue

@@ -13,7 +13,7 @@
   </v-card>
   <v-dialog v-model="dialog" max-width="350px">
     <v-card :loading="loading && qrCode">
-      <v-card-text>
+      <v-card-text class="pt-6">
         <v-img v-if="qrCode" :src="qrCode" width="300px" height="300px" />
         <v-card
           v-else
@@ -32,8 +32,8 @@
           size="small"
           block
           @click="loadQr"
-          :loading="loading"
-          :disabled="disabledRefresh"
+          :loading="loading && qrCode"
+          :disabled="disabledRefresh || !qrCode"
           variant="tonal"
           class="mt-2"
         >
@@ -107,7 +107,7 @@ export default {
       clearTimeout(this.timeout);
       this.dialog = true;
       this.error = false;
-
+      this.qrCode = null;
       await this.loadQr();
       await this.AppStore.reconnect();
     },

src/layouts/default/AppBar.vue

@@ -13,11 +13,27 @@
       v-else-if="AppStore.validConnection"
       color="success"
       style="max-width: 35vw"
+      class="px-2"
     >
-      <v-icon color="success" start> mdi-check-circle </v-icon>
-      {{
-        AppStore.connection.host.replace(/https?:\/\//, "").replace(/\/$/, "")
-      }}
+      <div class="d-flex align-center gap-1">
+        <v-icon color="success"> mdi-check-circle </v-icon>
+        <div style="display: grid">
+          <p class="text-truncate">
+            {{
+              AppStore.connection.host
+                .replace(/https?:\/\//, "")
+                .replace(/\/$/, "")
+            }}
+          </p>
+        </div>
+        <v-chip
+          size="x-small"
+          color="grey"
+          class="flex-shrink-0"
+        >
+          <b>{{ AppStore.version }}</b>
+        </v-chip>
+      </div>
     </v-chip>
     <v-icon v-else color="error"> mdi-alert-circle </v-icon>
     <v-btn @click="openSettings" icon>

src/store/app.js

@@ -1,7 +1,7 @@
 // Utilities
 import axios from 'axios'
 import { defineStore } from 'pinia'
-
+import semver from 'semver'
 
 export const useAppStore = defineStore('app', {
   getters: {
@@ -14,10 +14,15 @@ export const useAppStore = defineStore('app', {
       return state.getInstance(instance).instance.apiKey ||
         state.instancesKeys[instance]
     },
+    version: (state) => state.connection.version,
+    versionSatisfies: (state) => (version) => {
+      return semver.satisfies(state.connection.version, version)
+    },
   },
   state: () => ({
     connecting: false,
     connection: {
+
       valid: false,
       host: null,
       globalApiKey: null,
@@ -33,6 +38,21 @@ export const useAppStore = defineStore('app', {
     async setConnection({ host, globalApiKey }) {
       try {
         this.connecting = true
+        const apiResponse = await axios({
+          method: 'GET',
+          baseURL: host,
+          headers: {
+            'Content-Type': 'application/json',
+            'apikey': globalApiKey
+          },
+          url: '/'
+        })
+
+        if (!apiResponse.data || !apiResponse.data.message || !apiResponse.data.message.includes('Evolution API')) {
+          throw new Error('Essa conexão não é uma instância da evolution-api')
+        }
+
+        const { version } = apiResponse.data
         const response = await axios({
           method: 'GET',
           baseURL: host,
@@ -43,10 +63,7 @@ export const useAppStore = defineStore('app', {
           url: '/instance/fetchInstances'
         })
 
-        if (!response.data || !Array.isArray(response.data)) throw new Error('Essa conexão não é uma instância da evolution-api')
-
-
-        this.saveConnection({ host, globalApiKey })
+        this.saveConnection({ host, globalApiKey, version })
         this.instancesList = response.data
       } catch (e) {
         this.connection.valid = false
@@ -59,18 +76,7 @@ export const useAppStore = defineStore('app', {
     async loadInstance(instanceName) {
       try {
         console.log('loadInstance', instanceName)
-        // const { host, globalApiKey } = this.connection;
         return this.reconnect()
-        // const response = await axios({
-        //   method: 'GET',
-        //   baseURL: host,
-        //   headers: {
-        //     'Content-Type': 'application/json',
-        //     'apikey': globalApiKey
-        //   },
-        //   url: `/instance/fetchInstances?instanceName=${instanceName}`
-        // })
-
       } catch (e) {
         this.connection.valid = false
         throw e.response?.data?.response?.message || e.response || e
@@ -92,9 +98,24 @@ export const useAppStore = defineStore('app', {
     async reconnect() {
       try {
         const { host, globalApiKey } = this.connection
-        if (!host || !globalApiKey) {
-          throw new Error('Invalid connection')
+        if (!host || !globalApiKey) throw new Error('Invalid connection')
+
+        const apiResponse = await axios({
+          method: 'GET',
+          baseURL: host,
+          headers: {
+            'Content-Type': 'application/json',
+            'apikey': globalApiKey
+          },
+          url: '/'
+        })
+
+        if (!apiResponse.data || !apiResponse.data.message || !apiResponse.data.message.includes('Evolution API')) {
+          throw new Error('Essa conexão não é uma instância da evolution-api')
         }
+
+        const { version } = apiResponse.data
+
         const response = await axios({
           method: 'GET',
           baseURL: host,
@@ -105,7 +126,7 @@ export const useAppStore = defineStore('app', {
           url: '/instance/fetchInstances'
         })
 
-        this.saveConnection({ host, globalApiKey })
+        this.saveConnection({ host, globalApiKey, version })
 
         this.instancesList = response.data
       } catch (e) {
@@ -144,11 +165,12 @@ export const useAppStore = defineStore('app', {
 
       this.saveLocalStorage()
     },
-    saveConnection({ host, globalApiKey }) {
+    saveConnection({ host, globalApiKey, version }) {
       this.connection = {
         valid: true,
         host,
         globalApiKey,
+        version
       }
 
       const currentKey = this.connectionsList.findIndex(