drawing-board-service/src/example/env.ts

import { computed, ref, watch } from "vue";

export const urlUpdateQuery = (
  link: string,
  params: Record<string, string>,
  rep = false
) => {
  const url = new URL(link);
  const ndx = url.hash.indexOf("?");
  let search: URLSearchParams;
  if (!rep && ~ndx) {
    search = new URLSearchParams({
      ...(urlGetQuery(link) as any),
      ...params,
    });
    for (const key in params) {
      search.set(key, params[key]);
    }
  } else {
    search = new URLSearchParams(params);
  }
  url.hash = url.hash.substring(0, ndx + 1) + search.toString();

  return url.toString();
};

export const urlGetQuery = (link: string) => {
  const url = new URL(link);
  const hash = url.hash;
  const ndx = hash.indexOf("?");
  if (!~ndx) return {};

  const sParams = new URLSearchParams(hash.substring(ndx));
  const rParams: Record<string, string> = {};
  [...sParams.entries()].forEach((item) => {
    rParams[item[0]] = item[1];
  });
  return rParams;
};

export const params = ref<Record<string, any>>({});
const sParams = new URLSearchParams(location.search);
[...sParams.entries()].forEach((item) => {
  params.value[item[0]] = item[1];
});
const updateParams = () => {
  const rParams = urlGetQuery(location.href);
  params.value = rParams;
  for (const key in params.value) {
    if (["tabulationId", "overviewId"].includes(key)) {
      params.value[key] = Number(params.value[key]);
    }
  }
};
updateParams();

let updateNeedReload = true;
export const preventReload = () => {
  updateNeedReload = false;
  setTimeout(() => (updateNeedReload = true));
};
watch(
  () => ({ ...params.value }),
  (nParams, oParams) => {
    const sParams = new URLSearchParams();
    for (const key in params.value) {
      params.value[key] && sParams.append(key, params.value[key]);
    }
    const ndx = location.hash.indexOf("?");
    const path =
      location.hash.substring(0, ~ndx ? ndx : undefined) +
      "?" +
      sParams.toString();

    if (location.hash) {
      location.replace(path);
    } else {
      location.replace(`#` + path);
    }
    if (!updateNeedReload) {
      return;
    }
    const keys = new Set([...Object.keys(nParams), ...Object.keys(oParams)]);
    for (const key of keys) {
      if (!nParams[key] || (nParams[key] && oParams[key])) {
        if (nParams[key] !== oParams[key]) {
          setTimeout(() => {
            location.reload();
          }, 100);
          return;
        }
      }
    }
  },
  { deep: true }
);

window.addEventListener("hashchange", updateParams);

const getQuisk = (key: string) =>
  computed({
    get() {
      return params.value[key];
    },
    set(val: string) {
      params.value[key] = val;
    },
  });

export const tabulationId = getQuisk("tabulationId");
export const overviewId = getQuisk("overviewId");
export const token = getQuisk("token");