show and hide loading when posting blog

hichina-main-front-mobile-first/src/boot/globalMixin.js

@@ -1,4 +1,5 @@
 import { boot } from "quasar/wrappers";
+import { useQuasar } from "quasar";
 import vueCountryRegionSelect from "vue3-country-region-select";
 // "async" is optional;
 // more info on params: https://v2.quasar.dev/quasar-cli/boot-files
@@ -8,6 +9,8 @@ export default boot(async (/* { app, router, ... } */ { app, router }) => {
     console.log("testGlobal2");
   };
 
+  const $qu = useQuasar();
+
   app.use(vueCountryRegionSelect);
 
   const normalizeMultiImageUrl = (input) => {
@@ -49,12 +52,22 @@ export default boot(async (/* { app, router, ... } */ { app, router }) => {
     }
   };
 
+  const showLoading = () => {
+    $qu.loading.show();
+  };
+
+  const hideLoading = () => {
+    $qu.loading.hide();
+  };
+
   app.config.globalProperties.$testGlobal2 = testGlobal2;
   app.config.globalProperties.$normalizeMultiImageUrl = normalizeMultiImageUrl;
   app.config.globalProperties.$removeHtmlTag = removeHtmlTag;
   app.config.globalProperties.$generalNotify = generalNotify;
   app.config.globalProperties.$goPage = goPage;
   app.config.globalProperties.$checkEmpty = checkEmpty;
+  app.config.globalProperties.$showLoading = showLoading;
+  app.config.globalProperties.$hideLoading = hideLoading;
 
   app.mixin({
     methods: {
@@ -67,6 +80,8 @@ export default boot(async (/* { app, router, ... } */ { app, router }) => {
       },
       goPage,
       checkEmpty,
+      showLoading,
+      hideLoading,
     },
   });
 });

hichina-main-front-mobile-first/src/pages/BlogCreatePage.vue

@@ -117,13 +117,17 @@ export default {
       params.content = content.value;
       params.headImageUrl = "";
 
+      gp.$showLoading();
+
       api
         .post("/api/v1/blog", params)
         .then((res) => {
           console.log(res.data.data.blogId);
+          gp.$hideLoading();
           gp.$goPage("/blog-detail/" + res.data.data.blogId);
         })
         .catch((err) => {
+          gp.$hideLoading();
           console.error("Error:", err);
         });
     }

hichina-main-front-mobile-first/src/pages/BlogEditPage.vue

@@ -128,13 +128,16 @@ export default {
       params.content = content.value;
       params.headImageUrl = "";
 
+      gp.$showLoading();
       api
         .put("/api/v1/blog/edit-basic/" + route.params.blogId, params)
         .then((res) => {
+          gp.$hideLoading();
           gp.$generalNotify($q, true, "Succeed updating blogs");
         })
         .catch((err) => {
           console.error("Error:", err);
+          $gp.$hideLoading();
           gp.$generalNotify($q, false, "Failed updating blogs");
         });
     }