@appscode/ui-builder/src/store/wizard.js

## Motivation

import { getValue } from "@/plugins/json-ref-resolver";
import { deepClone } from "fast-json-patch/module/core";
import { reactiveSet, reactiveDelete } from "@/plugins/json-ref-resolver";

export default {
  namespaced: true,

  state: () => ({
    ui: {},
    schema: {},
    model: {},
    keepEmptyModel: {},
    configureOptions: [],
    showSteps: [],
    functions: {},
    language: {},
    initialModel: {},
    modelPathWatchers: {},
    currentStep: 0,
    infoCenter: {
      isHide: true,
      title: "Information Center",
      description: "",
    },
    previewYamls: [],
  }),
  getters: {
    ui(state) {
      return state.ui;
    },
    schema(state) {
      return state.schema;
    },
    model(state) {
      return state.model;
    },
    keepEmptyModel(state) {
      return state.keepEmptyModel;
    },
    configureOptions(state) {
      return state.configureOptions;
    },
    showSteps(state) {
      return state.showSteps || [];
    },
    functions(state) {
      return state.functions;
    },
    language(state) {
      return state.language;
    },
    initialModel(state) {
      return state.initialModel;
    },
    modelPathWatchers(state) {
      return state.modelPathWatchers;
    },
    store$get(state, getters, rootState) {
      return (path) => {
        return getValue(rootState, path);
      };
    },

    infoCenter(state) {
      return state.infoCenter || {};
    },

    currentStep(state) {
      return state.currentStep;
    },

    previewYamls(state) {
      return state.previewYamls || [];
    },
  },
  mutations: {
    ui$set(state, ob) {
      state.ui = deepClone(ob);
    },
    schema$set(state, ob) {
      state.schema = deepClone(ob);
    },
    model$init(state, ob) {
      state.initialModel = deepClone(ob);
      state.model = deepClone(ob);
    },
    model$set(state, ob) {
      state.model = deepClone(ob);
    },
    model$update(state, ob) {
      const { path, value, force } = ob;
      // src: https://github.com/flitbit/json-ptr#settarget-pointer-value-force
      // console.log("update: ", path, value, force);
      reactiveSet(state.model, path, value, force);
      // execute functions to update corresponding single step form modelValue for this path and prefix paths
      // needed to update modelValues for single step form with the latest model
      // console.log("Update: ", path);
      Object.keys(state.modelPathWatchers).forEach((key) => {
        if (path.startsWith(key)) {
          const funcArr = state.modelPathWatchers[key] || [];
          funcArr.forEach((func) => func(key));
        }
      });
    },
    keepEmptyModel$update(state, ob) {
      const { path, value, force } = ob;
      // src: https://github.com/flitbit/json-ptr#settarget-pointer-value-force
      reactiveSet(state.keepEmptyModel, path, value, force);
    },
    model$delete(state, path) {
      // console.log("delete: ", path);
      reactiveDelete(state.model, path);
      // execute functions to update corresponding single step form modelValue for this path and sub paths
      // needed to update modelValues for single step form with the latest model
      // console.log("Delete: ", path);
      Object.keys(state.modelPathWatchers).forEach((key) => {
        if (key.startsWith(path)) {
          const funcArr = state.modelPathWatchers[key] || [];
          funcArr.forEach((func) => func(key));
        }
      });
    },
    modelPathWatchers$add(state, ob) {
      const { path, func } = ob;

      // add the func to all paths and parent paths
      function addPathFunc(path) {
        if (path) {
          const watcherArr = state.modelPathWatchers[path];
          if (watcherArr) {
            state.modelPathWatchers[path].push(func);
          } else state.modelPathWatchers[path] = [func];

          const pathArr = path.split("/");
          pathArr.pop();
          addPathFunc(pathArr.join("/"));
        }
      }

      addPathFunc(path);
    },
    configureOptions$set(state, items) {
      state.configureOptions = [...items];
    },
    showSteps$set(state, steps) {
      state.showSteps = steps || [];
    },
    showSteps$update(state, { stepId, show }) {
      const findStepItem = (steps, id) => {
        if (steps) {
          const step = steps.find((stp) => {
            return stp.id === id;
          });

          return step;
        } else return undefined;
      };

      const stepItem = findStepItem(state.showSteps, stepId);
      if (stepItem) {
        stepItem.show = show;
      } else {
        throw Error(`Step item with id "${stepId}" not found`);
      }
    },
    configureOptions$push(state, item) {
      state.configureOptions.push(item);
    },
    configureOptions$delete(state, item) {
      state.configureOptions = state.configureOptions.filter((v) => v !== item);
    },
    functions$set(state, ob) {
      state.functions = ob;
    },
    functions$update(state, ob) {
      const { path, value } = ob;
      reactiveSet(state.functions, path, value || {}, true);
    },

    language$set(state, ob) {
      state.language = deepClone(ob);
    },
    language$update(state, ob) {
      const { path, value } = ob;
      reactiveSet(state.language.en || {}, path, value.en || {}, true);
      reactiveSet(state.language.bn || {}, path, value.bn || {}, true);
    },

    infoCenter$set(state, ob) {
      state.infoCenter = { ...ob };
    },

    currentStep$set(state, ob) {
      state.currentStep = ob;
    },

    previewYamls$set(state, yamls) {
      state.previewYamls = [...yamls];
    },
  },
  actions: {},
};