@saltcorn/mobile-app 0.8.6-beta.1 → 0.8.6-beta.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saltcorn/mobile-app",
   "displayName": "Saltcorn mobile app",
-  "version": "0.8.6-beta.1",
+  "version": "0.8.6-beta.11",
   "description": "Apache Cordova application with @saltcorn/markup",
   "main": "index.js",
   "scripts": {

package/www/index.html

@@ -10,6 +10,7 @@
     <script src="js/utils/iframe_view_utils.js"></script>
     <script src="js/utils/file_helpers.js"></script>
     <script src="js/utils/table_utils.js"></script>
+    <script src="js/utils/offline_mode_helper.js"></script>
 
     <script src="js/mocks/request.js"></script>
     <script src="js/mocks/response.js"></script>
@@ -17,9 +18,11 @@
     <script src="js/routes/auth.js"></script>
     <script src="js/routes/delete.js"></script>
     <script src="js/routes/edit.js"></script>
+    <script src="js/routes/api.js"></script>
     <script src="js/routes/error.js"></script>
     <script src="js/routes/page.js"></script>
     <script src="js/routes/view.js"></script>
+    <script src="js/routes/sync.js"></script>
     <script src="js/routes/init.js"></script>
 
     <script src="js/mocks/response.js"></script>
@@ -124,7 +127,7 @@
                 config.pluginHeaders.push(prepareHeader(header));
               }
             else if (typeof pluginHeaders === "function") {
-              const headerResult = pluginHeaders(row.configuration);
+              const headerResult = pluginHeaders(row.configuration || {});
               if (Array.isArray(headerResult)) {
                 for (const header of headerResult)
                   config.pluginHeaders.push(prepareHeader(header));
@@ -146,29 +149,15 @@
       const initJwt = async () => {
         if (!(await saltcorn.data.db.tableExists("jwt_table"))) {
           await createJwtTable();
-        }
-        else {
+        } else {
           const jwt = await getJwt();
-          if(jwt) {
+          if (jwt) {
             const state = saltcorn.data.state.getState();
             state.mobileConfig.jwt = jwt;
           }
         }
       };
 
-      const checkJWT = async () => {
-        const state = saltcorn.data.state.getState();
-        const jwt = state.mobileConfig.jwt;
-        if(jwt && jwt !== "undefined") {
-          const response = await apiCall({
-            method: "GET",
-            path: "/auth/authenticated",
-          });
-          return response.data.authenticated;
-        }
-        else return false;
-      };
-
       const initI18Next = async () => {
         const resources = {};
         for (const key of Object.keys(
@@ -188,8 +177,43 @@
         });
       };
 
+      // the app comes back from background
+      const onResume = async () => {
+        const state = saltcorn.data.state.getState();
+        const mobileConfig = state.mobileConfig;
+        if (mobileConfig?.allowOfflineMode) {
+          mobileConfig.networkState = navigator.connection.type;
+          if (
+            mobileConfig.networkState === "none" &&
+            !mobileConfig.isOfflineMode &&
+            mobileConfig.jwt
+          ) {
+            await offlineHelper.startOfflineMode();
+            clearHistory();
+            if (mobileConfig.user_id) await gotoEntryView();
+            else {
+              const decodedJwt = jwt_decode(mobileConfig.jwt);
+              mobileConfig.role_id = decodedJwt.user.role_id
+                ? decodedJwt.user.role_id
+                : 100;
+              mobileConfig.user_id = decodedJwt.user.id;
+              mobileConfig.user_name = decodedJwt.user.email;
+              mobileConfig.language = decodedJwt.user.language;
+              mobileConfig.isPublicUser = false;
+            }
+            addRoute({ route: entryPoint, query: undefined });
+            const page = await router.resolve({
+              pathname: mobileConfig.entry_point,
+              fullWrap: true,
+              alerts: [],
+            });
+          }
+        }
+      };
+
       // device is ready
       const init = async () => {
+        document.addEventListener("resume", onResume, false);
         const config = await readJSON(
           "config",
           `${cordova.file.applicationDirectory}www`
@@ -227,32 +251,86 @@
         setVersionTtag();
         const entryPoint = config.entry_point;
         await initI18Next();
+        state.mobileConfig.networkState = navigator.connection.type;
+        document.addEventListener(
+          "offline",
+          offlineHelper.offlineCallback,
+          false
+        );
+        document.addEventListener(
+          "online",
+          offlineHelper.onlineCallback,
+          false
+        );
+        const networkDisabled = state.mobileConfig.networkState === "none";
+        const jwt = state.mobileConfig.jwt;
         try {
-          if (await checkJWT()) {
+          const alerts = [];
+          if ((networkDisabled && jwt) || (await checkJWT(jwt))) {
             const mobileConfig = state.mobileConfig;
             const decodedJwt = jwt_decode(mobileConfig.jwt);
             mobileConfig.role_id = decodedJwt.user.role_id
               ? decodedJwt.user.role_id
-              : 10;
+              : 100;
+            mobileConfig.user_id = decodedJwt.user.id;
             mobileConfig.user_name = decodedJwt.user.email;
             mobileConfig.language = decodedJwt.user.language;
             mobileConfig.isPublicUser = false;
             await i18next.changeLanguage(mobileConfig.language);
+            if (mobileConfig.allowOfflineMode) {
+              const { offlineUser, upload_started_at, upload_ended_at } =
+                (await offlineHelper.getLastOfflineSession()) || {};
+              if (networkDisabled) {
+                if (offlineUser && offlineUser !== mobileConfig.user_name)
+                  throw new Error(
+                    `The offline mode is not available, '${offlineUser}' has not yet uploaded offline data.`
+                  );
+                else {
+                  await offlineHelper.startOfflineMode();
+                  alerts.push({
+                    type: "info",
+                    msg: offlineHelper.getOfflineMsg(),
+                  });
+                }
+              } else if (offlineUser) {
+                if (offlineUser === mobileConfig.user_name) {
+                  if (upload_started_at && !upload_ended_at) {
+                    alerts.push({
+                      type: "warning",
+                      msg: "Please check if your offline data is already online. An upload was started but did not finish.",
+                    });
+                  } else {
+                    alerts.push({
+                      type: "info",
+                      msg: "You have offline data, to handle it open the Network menu.",
+                    });
+                  }
+                } else
+                  alerts.push({
+                    type: "warning",
+                    msg: `'${offlineUser}' has not yet uploaded offline data.`,
+                  });
+              }
+            }
             addRoute({ route: entryPoint, query: undefined });
             const page = await router.resolve({
               pathname: entryPoint,
               fullWrap: true,
+              alerts,
             });
             await replaceIframe(page.content);
           } else {
             const page = await router.resolve({
               pathname: "get/auth/login",
+              alerts,
             });
-            replaceIframe(page.content);
+            await replaceIframe(page.content);
           }
         } catch (error) {
+          state.mobileConfig.inErrorState = true;
           const page = await router.resolve({
             pathname: "get/error_page",
+            fullWrap: true,
             alerts: [
               {
                 type: "error",
@@ -261,7 +339,6 @@
             ],
           });
           await replaceIframe(page.content);
-          console.error(error);
         }
       };
 

package/www/js/mocks/request.js

@@ -1,9 +1,13 @@
 /*global i18next, saltcorn*/
 
-function MobileRequest({ xhr = false, files = undefined, query = undefined }) {
-  const roleId = saltcorn.data.state.getState().mobileConfig.role_id
-    ? saltcorn.data.state.getState().mobileConfig.role_id
-    : 10;
+function MobileRequest({
+  xhr = false,
+  files = undefined,
+  query = undefined,
+} = {}) {
+  const cfg = saltcorn.data.state.getState().mobileConfig;
+  const roleId = cfg.role_id ? cfg.role_id : 100;
+  const userId = cfg.user_id ? cfg.user_id : undefined;
   const flashMessages = [];
 
   return {
@@ -21,6 +25,7 @@ function MobileRequest({ xhr = false, files = undefined, query = undefined }) {
       return mobileCfg?.language ? mobileCfg.language : "en";
     },
     user: {
+      id: userId,
       role_id: roleId,
     },
     flash: (type, msg) => {

package/www/js/routes/api.js

@@ -0,0 +1,39 @@
+/*global saltcorn, apiCall*/
+
+// post/api/:tableName/:id
+const updateTableRow = async (context) => {
+  const { tableName, id } = context.params;
+  const mobileConfig = saltcorn.data.state.getState().mobileConfig;
+  const user = {
+    id: mobileConfig.user_id,
+    role_id: mobileConfig.role_id || 100,
+  };
+  const table = saltcorn.data.models.Table.findOne({ name: tableName });
+  if (!table) throw new Error(`The table '${tableName}' does not exist.`);
+  if (
+    mobileConfig.isOfflineMode ||
+    mobileConfig.localTableIds.indexOf(table.id) >= 0
+  ) {
+    const row = {};
+    for (const [k, v] of new URLSearchParams(context.query).entries()) {
+      row[k] = v;
+    }
+    const errors = await saltcorn.data.web_mobile_commons.prepare_update_row(
+      table,
+      row,
+      id
+    );
+    if (errors.length > 0) throw new Error(errors.join(", "));
+    const ins_res = await table.tryUpdateRow(row, id, user);
+    if (ins_res.error)
+      throw new Error(`Update ${table.name} error: ${ins_res.error}`);
+    return { ins_res };
+  } else {
+    const response = await apiCall({
+      method: "POST",
+      path: `/api/${tableName}/${id}`,
+      body: context.query,
+    });
+    return response.data;
+  }
+};

package/www/js/routes/auth.js

@@ -1,4 +1,4 @@
-/*global sbAdmin2Layout, apiCall, removeJwt, saltcorn*/
+/*global sbAdmin2Layout, apiCall, removeJwt, saltcorn, clearHistory*/
 
 const prepareAuthForm = () => {
   return new saltcorn.data.models.Form({
@@ -35,7 +35,7 @@ const getAuthLinks = (current, entryPoint) => {
   return links;
 };
 
-const renderLoginView = (entryPoint, versionTag) => {
+const renderLoginView = (entryPoint, versionTag, alerts = []) => {
   const form = prepareAuthForm(entryPoint);
   form.onSubmit = `javascript:loginFormSubmit(this, '${entryPoint}')`;
   form.submitLabel = "Login";
@@ -43,7 +43,7 @@ const renderLoginView = (entryPoint, versionTag) => {
     title: "login",
     form: form,
     authLinks: getAuthLinks("login", entryPoint),
-    alerts: [],
+    alerts,
     headers: [
       { css: `static_assets/${versionTag}/saltcorn.css` },
       { script: "js/utils/iframe_view_utils.js" },
@@ -69,10 +69,14 @@ const renderSignupView = (entryPoint, versionTag) => {
   });
 };
 
-const getLoginView = async () => {
-  const config = saltcorn.data.state.getState().mobileConfig;
+const getLoginView = async (context) => {
+  const mobileConfig = saltcorn.data.state.getState().mobileConfig;
   return {
-    content: renderLoginView(config.entry_point, config.version_tag),
+    content: renderLoginView(
+      mobileConfig.entry_point,
+      mobileConfig.version_tag,
+      context.alerts ? context.alerts : []
+    ),
     replaceIframe: true,
   };
 };
@@ -90,6 +94,7 @@ const logoutAction = async () => {
   const response = await apiCall({ method: "GET", path: "/auth/logout" });
   if (response.data.success) {
     await removeJwt();
+    clearHistory();
     config.jwt = undefined;
     return {
       content: renderLoginView(config.entry_point, config.version_tag),

package/www/js/routes/common.js

@@ -25,7 +25,7 @@ const parseQuery = (queryStr) => {
 
 const layout = () => {
   const state = saltcorn.data.state.getState();
-  return state.getLayout({ role_id: state.mobileConfig.role_id });
+  return state.getLayout({ role_id: state.mobileConfig.role_id || 100 });
 };
 
 const sbAdmin2Layout = () => {
@@ -34,53 +34,87 @@ const sbAdmin2Layout = () => {
 
 const getMenu = (req) => {
   const state = saltcorn.data.state.getState();
-  const mobileCfg = saltcorn.data.state.getState().mobileConfig;
-  const role = mobileCfg.role_id || 10;
+  const mobileCfg = state.mobileConfig;
+  const role = mobileCfg.role_id || 100;
   const extraMenu = saltcorn.data.web_mobile_commons.get_extra_menu(
     role,
     req.__
   );
-  const allowSignup = state.getConfig("allow_signup");
-  const userName = mobileCfg.user_name;
-  const authItems = mobileCfg.isPublicUser
-    ? [
-        { link: "javascript:execLink('/auth/login')", label: req.__("Login") },
-        ...(allowSignup
-          ? [
+  if (mobileCfg.inErrorState) {
+    const entryLink = mobileCfg.entry_point?.startsWith("get")
+      ? mobileCfg.entry_point.substr(3)
+      : null;
+    return entryLink
+      ? [
+          {
+            section: "Reload",
+            items: [
               {
-                link: "javascript:execLink('/auth/signup')",
-                label: req.__("Sign up"),
+                link: `javascript:parent.gotoEntryView()`,
+                icon: "fas fa-sync",
+                label: "Reload",
               },
-            ]
-          : []),
-      ]
-    : [
-        {
-          label: req.__("User"),
-          icon: "far fa-user",
-          isUser: true,
-          subitems: [
-            { label: userName },
-            {
-              link: `javascript:logout();`,
-              icon: "fas fa-sign-out-alt",
-              label: "Logout",
-            },
-          ],
-        },
-      ];
-  const result = [];
-  if (extraMenu.length > 0)
+            ],
+          },
+        ]
+      : [];
+  } else {
+    const allowSignup = state.getConfig("allow_signup");
+    const userName = mobileCfg.user_name;
+    const authItems = mobileCfg.isPublicUser
+      ? [
+          {
+            link: "javascript:execNavbarLink('/auth/login')",
+            label: req.__("Login"),
+          },
+          ...(allowSignup
+            ? [
+                {
+                  link: "javascript:execNavbarLink('/auth/signup')",
+                  label: req.__("Sign up"),
+                },
+              ]
+            : []),
+        ]
+      : [
+          {
+            label: req.__("User"),
+            icon: "far fa-user",
+            isUser: true,
+            subitems: [
+              { label: userName },
+              {
+                link: `javascript:logout();`,
+                icon: "fas fa-sign-out-alt",
+                label: "Logout",
+              },
+            ],
+          },
+        ];
+    const result = [];
+    if (extraMenu.length > 0)
+      result.push({
+        section: req.__("Menu"),
+        items: extraMenu,
+      });
     result.push({
-      section: req.__("Menu"),
-      items: extraMenu,
+      section: req.__("User"),
+      isUser: true,
+      items: authItems,
     });
-  result.push({
-    section: req.__("User"),
-    isUser: true,
-    items: authItems,
-  });
-  return result;
+    if (mobileCfg.allowOfflineMode)
+      result.push({
+        section: "Network",
+        items: [
+          {
+            link: "javascript:execNavbarLink('/sync/sync_settings')",
+            icon: "fas fa-sync",
+            label: "Network",
+          },
+        ],
+      });
+    return result;
+  }
 };
 
 const prepareAlerts = (context, req) => {

package/www/js/routes/delete.js

@@ -1,18 +1,18 @@
-/*global i18next, apiCall, saltcorn*/
+/*global i18next, apiCall, saltcorn, offlineHelper*/
 
 // post/delete/:name/:id
 const deleteRows = async (context) => {
   const { name, id } = context.params;
   const table = await saltcorn.data.models.Table.findOne({ name });
-  const mobileConfig = saltcorn.data.state.getState().mobileConfig;
-
-  if (mobileConfig.localTableIds.indexOf(table.id) >= 0) {
-    if (mobileConfig.role_id <= table.min_role_write) {
+  const { isOfflineMode, localTableIds, role_id } =
+    saltcorn.data.state.getState().mobileConfig;
+  if (isOfflineMode || localTableIds.indexOf(table.id) >= 0) {
+    if (role_id <= table.min_role_write) {
       await table.deleteRows({ id });
-    }
-    // TODO 'table.is_owner' check?
-    else {
-      throw new Error(i18next.t("Not authorized"));
+      // TODO 'table.is_owner' check?
+    } else throw new Error(i18next.t("Not authorized"));
+    if (isOfflineMode && !(await offlineHelper.hasOfflineRows())) {
+      await offlineHelper.setOfflineSession(null);
     }
   } else {
     await apiCall({ method: "POST", path: `/delete/${name}/${id}` });

package/www/js/routes/edit.js

@@ -1,14 +1,18 @@
-/*global i18next, apiCall, saltcorn*/
+/*global i18next, apiCall, saltcorn, offlineHelper*/
 
 // /toggle/:name/:id/:field_name
 const postToggleField = async (context) => {
   const { name, id, field_name } = context.params;
   const table = await saltcorn.data.models.Table.findOne({ name });
-  const mobileConfig = saltcorn.data.state.getState().mobileConfig;
-  if (mobileConfig.localTableIds.indexOf(table.id) >= 0) {
-    if (mobileConfig.role_id > table.min_role_write)
+  const state = saltcorn.data.state.getState();
+  const { isOfflineMode, localTableIds, user_name, role_id } =
+    state.mobileConfig;
+  if (isOfflineMode || localTableIds.indexOf(table.id) >= 0) {
+    if (role_id > table.min_role_write)
       throw new Error(i18next.t("Not authorized"));
     await table.toggleBool(+id, field_name);
+    if (isOfflineMode && !(await offlineHelper.getLastOfflineSession()))
+      await offlineHelper.setOfflineSession({ offlineUser: user_name });
   } else {
     await apiCall({
       method: "POST",

package/www/js/routes/error.js

@@ -1,18 +1,5 @@
-/*global layout, getHeaders, saltcorn*/
+/*global wrapContents, MobileRequest */
 
 const getErrorView = async (context) => {
-  const state = saltcorn.data.state.getState();
-  const wrappedContent = layout().wrap({
-    title: "Error",
-    body: { above: [""] },
-    alerts: context.alerts ,
-    role: state.mobileConfig.role_id,
-    headers: getHeaders(),
-    menu: [],
-    bodyClass: "",
-    currentUrl: "",
-    brand: {},
-  });
-
-  return { content: wrappedContent, title: "Error" };
+  return wrapContents("", "Error", context, new MobileRequest());
 };

package/www/js/routes/init.js

@@ -1,4 +1,5 @@
-/*global postView, postViewRoute, getView, postToggleField, deleteRows, postPageAction, getPage, getLoginView, logoutAction, getSignupView, getErrorView, window*/
+/*global postView, postViewRoute, getView, postToggleField, deleteRows, postPageAction, getPage, getLoginView, logoutAction, getSignupView, getErrorView, window, getSyncSettingsView, getAskDeleteOfflineData, getAskUploadNotEnded, updateTableRow */
+// TODO module namespacese
 
 const initRoutes = async () => {
   const routes = [
@@ -14,6 +15,10 @@ const initRoutes = async () => {
       path: "get/view/:viewname",
       action: getView,
     },
+    {
+      path: "post/api/:tableName/:id",
+      action: updateTableRow,
+    },
     {
       path: "post/edit/toggle/:name/:id/:field_name",
       action: postToggleField,
@@ -46,6 +51,18 @@ const initRoutes = async () => {
       path: "get/error_page",
       action: getErrorView,
     },
+    {
+      path: "get/sync/sync_settings",
+      action: getSyncSettingsView,
+    },
+    {
+      path: "get/sync/ask_upload_not_ended",
+      action: getAskUploadNotEnded,
+    },
+    {
+      path: "get/sync/ask_delete_offline_data",
+      action: getAskDeleteOfflineData,
+    },
   ];
   window.router = new window.UniversalRouter(routes);
 };