@iankibetsh/vue-streamline 1.2.2 → 1.2.4

package/README.md

@@ -48,6 +48,14 @@ tasksService.getTasks().then(response => {
     console.log(response)
 })
 ```
+A swal popup asking the user to confirm the action will be shown before the action is called
+
+## Pre Confirm Calling a action/method 
+
+You can pre confirm calling an action/method in the service by calling the method on the service object
+```js
+const res = await tasksService.confirm('Are you sure you want to delete this task?').deleteTask(1)
+```
 
 
 ## Getting url to an action/method in the service

package/package.json

@@ -1,30 +1,28 @@
 {
-  "name": "@iankibetsh/vue-streamline",
-  "version": "1.2.2",
-  "description": "Vue library for streamlining laravel backend services with @iankibet/streamline composer package",
- "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "exports": {
-    ".": "./src/index.js"
-  },
-  "keywords": [],
-  "author": "Iankibet",
-  "license": "ISC",
-  "peerDependencies": {
-  },
-  "dependencies": {
-    "axios": "^1.7.3",
-    "vue": "^3.2.4"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^5.1.2",
-    "vite": "^5.4.1"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+      "name": "@iankibetsh/vue-streamline",
+      "version": "1.2.4",
+      "description": "Vue library for streamlining laravel backend services with @iankibet/streamline composer package",
+      "type": "module",
+      "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview"
+      },
+      "exports": {
+        ".": "./src/index.js"
+      },
+      "keywords": [],
+      "author": "Iankibet",
+      "license": "ISC",
+      "devDependencies": {
+        "@vitejs/plugin-vue": "^5.1.2",
+        "vite": "^5.4.1"
+      },
+      "peerDependencies": {
+        "@iankibetsh/shframework": "^5",
+        "vue": "^3"
+      },
+      "publishConfig": {
+        "access": "public"
+      }
+    }

package/src/App.vue

@@ -2,7 +2,7 @@
 import useStreamline from './composables/useStreamline.js'
 import { onMounted, ref, toRefs } from 'vue'
 
-const {loading, service:paybillService, getActionUrl,props} = useStreamline('mpesa/paybill')
+const {loading, service:paybillService, getActionUrl,props,confirmAction} = useStreamline('mpesa/paybill')
 
 
 const foundPaybill = ref(null)
@@ -13,8 +13,14 @@ onMounted(()=>{
   // })
 })
 const findPaybill = async ()=>{
-  foundPaybill.value = await paybillService.getPaybill(32)
-  console.log(getActionUrl('getPaybill',32))
+  // const res = confirmAction('Are you sure?')
+  // res.getPaybill(32).then(res=>{
+  //   foundPaybill.value = res
+  // })
+  foundPaybill.value =  await  paybillService.confirm().getPaybill(32)
+      .catch(err=>{
+    console.log(err)
+  })
 }
 </script>
 

package/src/composables/useStreamline.js

@@ -1,131 +1,143 @@
-import Axios from 'axios';
-import { inject, onMounted, reactive, ref } from 'vue';
+import { inject, onMounted, reactive, ref } from 'vue'
+import { shApis, shRepo } from '@iankibetsh/shframework'
 
 const useStreamline = (stream, ...initialArgs) => {
-    let formData = {};
-    const loading = ref(false);
-    const propertiesFetched = ref(false);
-    const fetching = ref(false);
-    // cache key for local storage, include initialArgs in the key
-    const cacheKey = `streamline_${stream}_${initialArgs.join('_')}`;
+    let formData = {}
+    const loading = ref(false)
+    const propertiesFetched = ref(false)
+    const confirmationMessage = ref(null)
+
+    // Cache key for local storage, include initialArgs in the key
+    const cacheKey = `streamline_${stream}_${initialArgs.join('_')}`
 
     // Inject headers and API endpoint
-    const streamlineUrl = inject('streamlineUrl');
-    const streamlineHeaders = inject('streamlineHeaders');
-    const enableCache = inject('enableCache');
+    const streamlineUrl = inject('streamlineUrl')
+    const enableCache = inject('enableCache')
 
-    const originalProps = reactive({});
+    const originalProps = reactive({})
 
-// Proxy to intercept access
+    // Proxy to intercept access
     const props = new Proxy(originalProps, {
         get(target, property, receiver) {
-            if(!propertiesFetched.value) {
-                fetchServiceProperties().then(() => target[property]);
+            if (!propertiesFetched.value) {
+                fetchServiceProperties().then(() => target[property])
             }
-            return Reflect.get(target, property, receiver); // Return the actual value
+            return Reflect.get(target, property, receiver) // Return the actual value
         },
         set(target, property, value, receiver) {
-            return Reflect.set(target, property, value, receiver); // Update the value
+            return Reflect.set(target, property, value, receiver) // Update the value
         }
     })
-    const axios = Axios.create({
-        headers: {
-            ...streamlineHeaders,
-        },
-    });
 
     const fetchServiceProperties = async () => {
-        if (loading.value || fetching.value || propertiesFetched.value) return;
-        fetching.value = true;
+        if (loading.value || propertiesFetched.value) return
 
         try {
-            loading.value = true;
-            const response = await axios.post(streamlineUrl, {
+            loading.value = true
+            const response = await shApis.doPost(streamlineUrl, {
                 action: 'onMounted',
                 stream,
-                params: initialArgs,
-            });
-            assignProperties(response.data);
-            enableCache && localStorage.setItem(cacheKey, JSON.stringify(response.data));
+                params: initialArgs
+            })
+            assignProperties(response.data)
+            enableCache && localStorage.setItem(cacheKey, JSON.stringify(response.data))
         } catch (error) {
-            console.error(`Error fetching properties for stream ${stream}`, error);
-            throw error;
+            console.error(`Error fetching properties for stream ${stream}`, error)
+            throw error
         } finally {
-            propertiesFetched.value = true;
-            fetching.value = false;
-            loading.value = false;
+            propertiesFetched.value = true
+            loading.value = false
         }
-    };
+    }
 
     const assignProperties = (data) => {
-        Object.assign(service, data.properties); // Assign the properties to the reactive service object
-        Object.assign(originalProps, data.properties); // Assign the properties to the reactive service object
-    };
+        Object.assign(service, data.properties)
+        Object.assign(originalProps, data.properties)
+    }
 
     const handler = {
         get(target, prop, receiver) {
             // Fetch properties if not already fetched
             if (!propertiesFetched.value && !loading.value) {
-                fetchServiceProperties().then(() => target[prop]);
+                fetchServiceProperties().then(() => target[prop])
             }
 
-            // Handle existing properties
             if (prop in target) {
-                return target[prop];
+                return target[prop]
             }
-            // Handle nonexistent properties or dynamic methods
+
             return (...args) => {
-                loading.value = true;
-                return axios
-                    .post(streamlineUrl, {
-                        action: prop,
-                        stream,
-                        ...formData,
-                        params: args,
-                    })
-                    .then((response) => {
-                        loading.value = false;
-                        return response.data;
+                if(prop === 'confirm'){
+                    return confirmAction(args[0] ?? 'Are you sure?')
+                }
+                let repo = null
+                const data = {
+                    action: prop,
+                    stream,
+                    ...formData,
+                    params: args
+                }
+                if (confirmationMessage.value) {
+                  repo = shRepo.runPlainRequest(streamlineUrl,null, confirmationMessage.value,data)
+                } else {
+                    repo = shApis
+                        .doPost(streamlineUrl, data);
+                }
+
+                loading.value = true
+                return repo.then((response) => {
+                    loading.value = false
+                    if(confirmationMessage.value){
+                        confirmationMessage.value = null
+
+                        if(!response.isConfirmed){
+                            return
+                        }
+                        if(response.value?.success){
+                            return response.value.response
+                        } else {
+                            // throw error
+                            throw response.value.error
+                        }
+
+                    }
+
+                        return response.data
                     })
                     .catch((error) => {
-                        loading.value = false;
-                        console.error(`Error calling ${prop} on stream ${stream}`, error);
-                        throw error;
-                    });
-            };
-        },
-    };
+                        loading.value = false
+                        console.error(`Error calling ${prop} on stream ${stream}`, error)
+                        throw error
+                    })
+            }
+        }
+    }
 
-    const getActionUrl = (action, ...args) => {
-        // console.log('getActionUrl called with:', action, args);
-        const post = {
-            action,
-            stream,
-            params: args,
-        };
-        return `${streamlineUrl}?${new URLSearchParams(post).toString()}`;
-    };
+    const service = reactive({})
 
-    const service = reactive({}); // Make the service object reactive
+    // Confirmation wrapper
+    const confirmAction = (message) => {
+        confirmationMessage.value = message
+        return new Proxy(service, handler)
+    }
 
     onMounted(() => {
-        if (!enableCache) return;
-        const cachedData = localStorage.getItem(cacheKey);
+        if (!enableCache) return
+        const cachedData = localStorage.getItem(cacheKey)
         if (cachedData) {
-            assignProperties(JSON.parse(cachedData));
+            assignProperties(JSON.parse(cachedData))
         }
         if (initialArgs.length > 0) {
-            fetchServiceProperties();
+            fetchServiceProperties()
         }
-
-    });
+    })
 
     return {
         loading,
         service: new Proxy(service, handler),
-        getActionUrl,
+        confirmAction,
         props
-    };
-};
+    }
+}
 
-export default useStreamline;
+export default useStreamline

package/src/plugins/streamline.js

@@ -1,7 +1,7 @@
 const streamline = {
     install(app, options) {
         app.provide('streamlineUrl', options.streamlineUrl)
-        app.provide('streamlineHeaders', options.streamlineHeaders)
+        // app.provide('streamlineHeaders', options.streamlineHeaders)
         app.provide('enableCache', options.enableCache)
     }
 }