@iankibetsh/shframework 1.8.9 → 1.9.0

package/dist/dist/library.mjs.css

@@ -1,36 +1,4 @@
 
-.colored-toast.swal2-icon-success {
-  background-color: #a5dc86 !important;
-}
-
-.colored-toast.swal2-icon-error {
-  background-color: #f27474 !important;
-}
-
-.colored-toast.swal2-icon-warning {
-  background-color: #f8bb86 !important;
-}
-
-.colored-toast.swal2-icon-info {
-  background-color: #3fc3ee !important;
-}
-
-.colored-toast.swal2-icon-question {
-  background-color: #87adbd !important;
-}
-
-.colored-toast .swal2-title {
-  color: white;
-}
-
-.colored-toast .swal2-close {
-  color: white;
-}
-
-.colored-toast .swal2-html-container {
-  color: white;
-}
-
 .sh-phone{
   display: flex;
   width: 100%;
@@ -63,6 +31,38 @@
   opacity: 0.5;
 }
 
+.colored-toast.swal2-icon-success {
+  background-color: #a5dc86 !important;
+}
+
+.colored-toast.swal2-icon-error {
+  background-color: #f27474 !important;
+}
+
+.colored-toast.swal2-icon-warning {
+  background-color: #f8bb86 !important;
+}
+
+.colored-toast.swal2-icon-info {
+  background-color: #3fc3ee !important;
+}
+
+.colored-toast.swal2-icon-question {
+  background-color: #87adbd !important;
+}
+
+.colored-toast .swal2-title {
+  color: white;
+}
+
+.colored-toast .swal2-close {
+  color: white;
+}
+
+.colored-toast .swal2-html-container {
+  color: white;
+}
+
 .permissions-main {
   background: #edeff2;
 }

package/dist/library.js

@@ -377,6 +377,7 @@ const updateSession = () =>{
   ShStorage.setItem('last_activity', timeNow);
 };
 
+const graphQlEndpoint = 'sh-ql';
 let apiUrl = undefined.VITE_APP_API_URL;
 // eslint-disable-next-line no-undef
 if (process.env.NODE_ENV === 'production') {
@@ -413,24 +414,23 @@ function doPost (endPoint, data) {
   )
 }
 function graphQlQuery(query) {
-  updateSession();
   const data = {
-    query: query
+    query
   };
-  return axios.get('sh-ql', {
-    params: data,
-    crossOrigin: true,
-    headers: {
-      Authorization: 'Bearer ' + ShStorage.getItem('access_token')
-      // 'X-CSRF-TOKEN': 'INVALID'
-    }
-  })
+  return doGet(graphQlEndpoint,data)
+}
+function graphQlMutate(mutation) {
+  const data = {
+    query: `mutation ${mutation}`
+  };
+  return doPost(graphQlEndpoint,data)
 }
 
 var shApis = {
   doGet,
   doPost,
-  graphQlQuery
+  graphQlQuery,
+  graphQlMutate
 };
 
 const countries = [
@@ -3094,7 +3094,7 @@ var script$n = {
     'textAreas',
     'currentData',
     'emails',
-    'phones','numbers','selects','dates'
+    'phones','numbers','selects','dates','gqlMutation'
 ],
   emits: ['success'],
   setup(__props, { emit }) {
@@ -3189,30 +3189,54 @@ const submitForm = e => {
   e.preventDefault();
   loading.value = true;
   const data = {};
-  formFields.value.map(field=>data[field.field] = field.value);
-  shApis.doPost(props.action,data).then(res=>{
-    loading.value = false;
-    emit('formSubmitted',res.data);
-    emit('success',res.data);
-    props.successMessage && shRepo.showToast(props.successMessage);
-    props.successCallback && props.successCallback(res.data);
-    !props.retainDataAfterSubmission && formFields.value.map(field=>field.value = null);
-    closeModal();
-  }).catch(reason=>{
-    console.log(reason);
-    loading.value = false;
-    const httpStatus = reason.response ? reason.response.status:0;
-    formError.value = httpStatus === 422 ? formError.value = null:reason.message ?? null;
-    let httpErrors = {};
-    httpStatus === 422 && typeof reason.response.data.errors === 'object' && (httpErrors = reason.response.data.errors);
-    if(httpErrors && reason.response){
-      Object.keys(httpErrors).map(key=>validationErrors.value[key] = typeof httpErrors[key] === 'string' ? httpErrors[key]:httpErrors[key][0]);
-    }
-    (httpStatus !== 422 && formError.value) && shRepo.showToast(formError.value,'error');
-    validationErrors.value;
+  formFields.value.map(field=>{
+    data[field.field] = field.value;
   });
+  if(props.gqlMutation) {
+    let args = `(`;
+    let selectFields = Object.keys(data);
+    selectFields.forEach(key=>{
+      if(data[key]) {
+        args +=`${key}: "${data[key]}",`;
+      }
+    });
+    args+=`)`;
+    args = args.replace(',)',')');
+    if(args == '()') {
+      args = '';
+    }
+    const mutation = `{\n${props.gqlMutation} ${args} {\n${selectFields.join(`\n`)}\n}\n}`;
+    console.log(mutation);
+    shApis.graphQlMutate(mutation).then(res=>handleSuccessRequest(res)).catch(reason=>handlefailedRequest(reason));
+  } else {
+    shApis.doPost(props.action,data).then(res=>handleSuccessRequest(res)).catch(reason=>handlefailedRequest(reason));
+  }
   return false
 };
+
+const handleSuccessRequest = res=>{
+  loading.value = false;
+  emit('formSubmitted',res.data);
+  emit('success',res.data);
+  props.successMessage && shRepo.showToast(props.successMessage);
+  props.successCallback && props.successCallback(res.data);
+  !props.retainDataAfterSubmission && formFields.value.map(field=>field.value = null);
+  closeModal();
+};
+
+const handlefailedRequest = reason=>{
+  console.log(reason);
+  loading.value = false;
+  const httpStatus = reason.response ? reason.response.status:0;
+  formError.value = httpStatus === 422 ? formError.value = null:reason.message ?? null;
+  let httpErrors = {};
+  httpStatus === 422 && typeof reason.response.data.errors === 'object' && (httpErrors = reason.response.data.errors);
+  if(httpErrors && reason.response){
+    Object.keys(httpErrors).map(key=>validationErrors.value[key] = typeof httpErrors[key] === 'string' ? httpErrors[key]:httpErrors[key][0]);
+  }
+  (httpStatus !== 422 && formError.value) && shRepo.showToast(formError.value,'error');
+  validationErrors.value;
+};
 const submitBtnWidth = vue.ref(null);
 const setExistingData = (existingData)=>{
   if (props.currentData) {
@@ -5616,7 +5640,7 @@ vue.watch(() => route.query.popup, pop => {
   const component =  route.query.comp || '';
    PopupComponent.value = vue.defineAsyncComponent({
      // the loader function
-     loader: () => (function (t) { return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(t)); }); })(`/src/views/popups/${component}Popup.vue`),
+     loader: () => (function (t) { return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(t)); }); })(/* @vite-ignore */ `/src/views/popups/${component}Popup.vue`),
 
      // A component to use while the async component is loading
      loadingComponent: script$8,

package/dist/library.mjs

@@ -347,6 +347,7 @@ const updateSession = () =>{
   ShStorage.setItem('last_activity', timeNow);
 };
 
+const graphQlEndpoint = 'sh-ql';
 let apiUrl = import.meta.env.VITE_APP_API_URL;
 // eslint-disable-next-line no-undef
 if (process.env.NODE_ENV === 'production') {
@@ -383,24 +384,23 @@ function doPost (endPoint, data) {
   )
 }
 function graphQlQuery(query) {
-  updateSession();
   const data = {
-    query: query
+    query
   };
-  return axios.get('sh-ql', {
-    params: data,
-    crossOrigin: true,
-    headers: {
-      Authorization: 'Bearer ' + ShStorage.getItem('access_token')
-      // 'X-CSRF-TOKEN': 'INVALID'
-    }
-  })
+  return doGet(graphQlEndpoint,data)
+}
+function graphQlMutate(mutation) {
+  const data = {
+    query: `mutation ${mutation}`
+  };
+  return doPost(graphQlEndpoint,data)
 }
 
 var shApis = {
   doGet,
   doPost,
-  graphQlQuery
+  graphQlQuery,
+  graphQlMutate
 };
 
 const countries = [
@@ -3064,7 +3064,7 @@ var script$n = {
     'textAreas',
     'currentData',
     'emails',
-    'phones','numbers','selects','dates'
+    'phones','numbers','selects','dates','gqlMutation'
 ],
   emits: ['success'],
   setup(__props, { emit }) {
@@ -3159,30 +3159,54 @@ const submitForm = e => {
   e.preventDefault();
   loading.value = true;
   const data = {};
-  formFields.value.map(field=>data[field.field] = field.value);
-  shApis.doPost(props.action,data).then(res=>{
-    loading.value = false;
-    emit('formSubmitted',res.data);
-    emit('success',res.data);
-    props.successMessage && shRepo.showToast(props.successMessage);
-    props.successCallback && props.successCallback(res.data);
-    !props.retainDataAfterSubmission && formFields.value.map(field=>field.value = null);
-    closeModal();
-  }).catch(reason=>{
-    console.log(reason);
-    loading.value = false;
-    const httpStatus = reason.response ? reason.response.status:0;
-    formError.value = httpStatus === 422 ? formError.value = null:reason.message ?? null;
-    let httpErrors = {};
-    httpStatus === 422 && typeof reason.response.data.errors === 'object' && (httpErrors = reason.response.data.errors);
-    if(httpErrors && reason.response){
-      Object.keys(httpErrors).map(key=>validationErrors.value[key] = typeof httpErrors[key] === 'string' ? httpErrors[key]:httpErrors[key][0]);
-    }
-    (httpStatus !== 422 && formError.value) && shRepo.showToast(formError.value,'error');
-    validationErrors.value;
+  formFields.value.map(field=>{
+    data[field.field] = field.value;
   });
+  if(props.gqlMutation) {
+    let args = `(`;
+    let selectFields = Object.keys(data);
+    selectFields.forEach(key=>{
+      if(data[key]) {
+        args +=`${key}: "${data[key]}",`;
+      }
+    });
+    args+=`)`;
+    args = args.replace(',)',')');
+    if(args == '()') {
+      args = '';
+    }
+    const mutation = `{\n${props.gqlMutation} ${args} {\n${selectFields.join(`\n`)}\n}\n}`;
+    console.log(mutation);
+    shApis.graphQlMutate(mutation).then(res=>handleSuccessRequest(res)).catch(reason=>handlefailedRequest(reason));
+  } else {
+    shApis.doPost(props.action,data).then(res=>handleSuccessRequest(res)).catch(reason=>handlefailedRequest(reason));
+  }
   return false
 };
+
+const handleSuccessRequest = res=>{
+  loading.value = false;
+  emit('formSubmitted',res.data);
+  emit('success',res.data);
+  props.successMessage && shRepo.showToast(props.successMessage);
+  props.successCallback && props.successCallback(res.data);
+  !props.retainDataAfterSubmission && formFields.value.map(field=>field.value = null);
+  closeModal();
+};
+
+const handlefailedRequest = reason=>{
+  console.log(reason);
+  loading.value = false;
+  const httpStatus = reason.response ? reason.response.status:0;
+  formError.value = httpStatus === 422 ? formError.value = null:reason.message ?? null;
+  let httpErrors = {};
+  httpStatus === 422 && typeof reason.response.data.errors === 'object' && (httpErrors = reason.response.data.errors);
+  if(httpErrors && reason.response){
+    Object.keys(httpErrors).map(key=>validationErrors.value[key] = typeof httpErrors[key] === 'string' ? httpErrors[key]:httpErrors[key][0]);
+  }
+  (httpStatus !== 422 && formError.value) && shRepo.showToast(formError.value,'error');
+  validationErrors.value;
+};
 const submitBtnWidth = ref(null);
 const setExistingData = (existingData)=>{
   if (props.currentData) {
@@ -5586,7 +5610,7 @@ watch(() => route.query.popup, pop => {
   const component =  route.query.comp || '';
    PopupComponent.value = defineAsyncComponent({
      // the loader function
-     loader: () => import(`/src/views/popups/${component}Popup.vue`),
+     loader: () => import(/* @vite-ignore */ `/src/views/popups/${component}Popup.vue`),
 
      // A component to use while the async component is loading
      loadingComponent: script$8,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iankibetsh/shframework",
-  "version": "1.8.9",
+  "version": "1.9.0",
   "description": "Vue library for handling laravel backend",
   "main": "dist/library.js",
   "module": "dist/library.mjs",