@hashtagcms/admin-ui-kit 1.0.6

package/packages/components/src/left-nav.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="d-flex flex-column flex-shrink-0 t_left js_left_menu">
+    <ul class="list-unstyled ps-0">
+      <template v-for="current in allData">
+        <li v-if="current.parent_id === 0">
+          <a
+            :title="current.sub_title"
+            :href="getHref(current)"
+            :class="
+              'text-white ' + getActiveCss(current.controller_name, current)
+            "
+            aria-expanded="true"
+          >
+            <i
+              v-if="hasChild(current)"
+              class="js_more fa fa-ellipsis-v pull-right adjustMore"
+              @click="showHide($event)"
+            ></i>
+            <i :class="current.icon_css + ' fa-icons'" aria-hidden="true"></i>
+            {{ current.name }}
+          </a>
+          <template v-if="hasChild(current)">
+            <ul
+              :class="
+                'js_child btn-toggle-nav list-unstyled fw-normal ' +
+                getActiveCss(current.controller_name, current)
+              "
+            >
+              <li v-for="child in current.child">
+                <a
+                  :title="child.sub_title"
+                  :href="getHref(child)"
+                  :class="
+                    'text-white ' + getActiveCss(child.controller_name, child)
+                  "
+                >
+                  <i
+                    :class="child.icon_css + ' fa-icons'"
+                    aria-hidden="true"
+                  ></i>
+                  {{ child.name }}
+                </a>
+              </li>
+            </ul>
+          </template>
+        </li>
+      </template>
+    </ul>
+    <hr />
+    <div class="dropdown">
+      <a
+        title="Open HashtagCMS.org"
+        :href="linkForHashtag"
+        target="_blank"
+        class="d-flex align-items-center text-light text-decoration-none"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+      >
+        <strong>v{{ dataHashtagcmsVersion }}</strong>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+import AdminConfig from "@hashtagcms/helpers/admin-config";
+export default {
+  mounted() {},
+  props: [
+    "dataList",
+    "dataControllerName",
+    "dataModulesAllowed",
+    "dataIsAdmin",
+    "dataHashtagcmsVersion",
+  ],
+  data() {
+    return {
+      allData: this.dataList ? JSON.parse(this.dataList) : [],
+      modulesAllowed: this.dataModulesAllowed
+        ? JSON.parse(this.dataModulesAllowed)
+        : [],
+    };
+  },
+  computed: {
+    linkForHashtag() {
+      return `https://www.hashtagcms.org/?utm_src=${window.location.href}`;
+    },
+  },
+  methods: {
+    getIconLabel(data) {
+      return data.icon_css === "" || !data.icon_css
+        ? data.controller_name.charAt(0).toUpperCase()
+        : "";
+    },
+    getIconCss(data) {
+      return data.icon_css === "" || !data.icon_css
+        ? "badge badge-info text-small"
+        : data.icon_css;
+    },
+    hasChild(data) {
+      return data.child.length > 0;
+    },
+    getActiveCss(controller_name, data) {
+      return this.isActive(controller_name, data) ? "active" : "";
+    },
+    isActive(controller_name, data) {
+      if (this.dataControllerName === controller_name) {
+        return true;
+      }
+
+      if (data && data.child && data.child.length > 0) {
+        let controllerName = this.dataControllerName;
+        return data.child.find(function (c) {
+          return c.controller_name === controllerName;
+        });
+      }
+    },
+    getHref(data) {
+      return AdminConfig.admin_path(data.controller_name);
+    },
+    hideAll() {
+      let $this = this;
+      document
+        .querySelectorAll(".js_left_menu .js_child")
+        .forEach(function (ele) {
+          ele.classList.remove("active", "animated", "fadeIn");
+        });
+    },
+    showHide(event) {
+      this.hideAll();
+      let ele = event.target;
+      if (ele.classList.contains("js_more")) {
+        event.preventDefault();
+        //ele.nextSibling.style.display = "block";
+        ele.parentElement.nextElementSibling.classList.add(
+          "active",
+          "animated",
+          "fadeIn",
+        );
+      }
+    },
+    hasAccess(module_id) {
+      if (this.dataIsAdmin.toString() === "1") {
+        return true;
+      }
+      for (let i = 0; i < this.modulesAllowed.length; i++) {
+        let current = this.modulesAllowed[i];
+        if (current.module_id === module_id) {
+          return true;
+        }
+      }
+      return false;
+    },
+    getMinHeight() {
+      return `height:${window.innerHeight}px;`;
+    },
+  },
+};
+</script>

package/packages/components/src/library/copy-paste.vue

@@ -0,0 +1,186 @@
+<template>
+  <button
+    v-if="showCopy"
+    aria-label="Copy"
+    class="btn btn-outline-secondary"
+    title="Copy"
+    type="button"
+    @click="copyNow()"
+  >
+    <i aria-hidden="true" class="fa fa-copy"></i>
+  </button>
+  <button
+    v-if="showPaste"
+    aria-label="Paste"
+    class="btn btn-outline-secondary"
+    title="Paste"
+    type="button"
+    @click="pasteNow()"
+  >
+    <i aria-hidden="true" class="fa fa-paste"></i>
+  </button>
+</template>
+
+<script>
+import {
+  CopyToClipboard,
+  PasteFromClipboard,
+  Toast,
+  IsJson,
+} from "@hashtagcms/helpers/common";
+import { EventBus } from "@hashtagcms/helpers/event-bus";
+export default {
+  props: [
+    "dataIgnoreFields",
+    "dataPasteElement",
+    "dataForm",
+    "dataBackUrl",
+    "dataCopyPasteAutoInit",
+    "dataShowCopy",
+    "dataShowPaste",
+  ],
+  mounted() {
+    if (this.autoInit) {
+      this.init();
+    }
+  },
+  created() {},
+  data() {
+    return {
+      ignoreFields:
+        typeof this.dataIgnoreFields === "undefined"
+          ? [
+              "id",
+              "site_id",
+              "backURL",
+              "actionPerformed",
+              "platform_id",
+              "_token",
+              "insert_by",
+              "update_by",
+            ]
+          : JSON.parse(this.dataIgnoreFields),
+      copyKey: "cms_copy_data",
+      backURL:
+        typeof this.dataBackUrl === "undefined" || this.dataBackUrl === ""
+          ? ""
+          : this.dataBackUrl,
+      autoInit:
+        this.dataCopyPasteAutoInit === undefined ||
+        this.dataCopyPasteAutoInit?.toString() === "true",
+      showCopy:
+        this.dataShowCopy === undefined ||
+        this.dataShowCopy.toString() === "true",
+      showPaste:
+        this.dataShowPaste === undefined ||
+        this.dataShowPaste.toString() === "true",
+    };
+  },
+  computed: {
+    form() {
+      let holder;
+      if (
+        typeof this.dataForm !== "undefined" &&
+        document.getElementById(this.dataForm)
+      ) {
+        holder = document.getElementById(this.dataForm);
+      } else {
+        holder = document;
+      }
+      return holder;
+    },
+    pasteElement() {
+      let holder;
+      if (typeof this.dataPasteElement === "undefined") {
+        holder = this.form.querySelectorAll("input[type='text']")[0];
+      } else {
+        holder = this.form.getElementById(this.dataPasteElement);
+      }
+      //console.log("holder", holder);
+      return holder;
+    },
+  },
+  methods: {
+    init() {
+      let $this = this;
+      if (this.pasteElement) {
+        this.pasteElement.addEventListener("blur", function () {
+          if (IsJson(this.value)) {
+            $this.pasteNow();
+          }
+        });
+      }
+    },
+    copyNow() {
+      let $this = this;
+
+      let inputs = this.form.querySelectorAll("input");
+      let textAreas = this.form.querySelectorAll("textarea");
+      let selects = this.form.querySelectorAll("select");
+
+      let allElements = [...inputs, ...textAreas, ...selects];
+
+      let store = {};
+      allElements.forEach(function (current) {
+        let name = current.getAttribute("name") || current.getAttribute("id");
+
+        if (
+          name != null &&
+          typeof name !== "object" &&
+          shouldIgnore(name) === -1
+        ) {
+          store[name] =
+            current.type === "checkbox" || current.type === "radio"
+              ? current.checked
+              : current.value;
+        }
+      });
+
+      let data = JSON.stringify(store);
+      CopyToClipboard(data);
+
+      EventBus.emit("on-copy", data);
+      Toast.show(this, "Copied...", 1000);
+
+      function shouldIgnore(name) {
+        return $this.ignoreFields.findIndex(function (nm) {
+          return name === nm;
+        });
+      }
+    },
+    fillData: function (data) {
+      let form = this.form;
+      if (data) {
+        for (let i in data) {
+          try {
+            let ele = form[i] || document.getElementById(i);
+            let val = data[i];
+            if (ele.type === "checkbox" || ele.type === "radio") {
+              ele.checked = val;
+            } else {
+              ele.value = val;
+            }
+          } catch (e) {
+            console.info("unable to set value @ " + i);
+          }
+        }
+      }
+    },
+    pasteNow(cb) {
+      PasteFromClipboard()
+        .then((res) => {
+          if (IsJson(res)) {
+            this.fillData(JSON.parse(res));
+          }
+          if (cb) {
+            cb(JSON.parse(res));
+          }
+          EventBus.emit("on-paste", res);
+        })
+        .catch((res) => {
+          console.log("unable to paste");
+        });
+    },
+  },
+};
+</script>

package/packages/components/src/library/info-box.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="card mb-3 shadow info-box">
+    <span :class="getColor() + ' info-box-icon'"
+      ><i style="font-style: normal" :class="icon">{{ getIconText() }}</i></span
+    >
+    <div class="card-body">
+      <h5 class="card-title">
+        <a v-if="link !== ''" :href="link" class="info-box-text"
+          ><span class="info-box-text" v-html="content"></span
+        ></a>
+        <span v-if="link === ''" class="info-box-text">{{ content }}</span>
+      </h5>
+      <p class="card-text text-center" v-if="subTitle !== ''">
+        {{ subTitle }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Storage } from "@hashtagcms/admin-sdk";
+const Store = new Storage();
+
+export default {
+  mounted() {},
+  props: [
+    "dataInfo",
+    "dataColorIndex",
+    "dataSubTitle",
+    "dataTitle",
+    "dataIconCss",
+    "dataLink",
+  ],
+  data() {
+    return {
+      info:
+        typeof this.dataInfo == "undefined"
+          ? null
+          : typeof this.dataInfo == "string"
+            ? JSON.parse(this.dataInfo)
+            : this.dataInfo,
+      subTitle:
+        typeof this.dataSubTitle !== "undefined" ? this.dataSubTitle : "",
+      iconCss: this.dataIconCss,
+      link: typeof this.dataLink == "undefined" ? "" : this.dataLink,
+    };
+  },
+  computed: {
+    content() {
+      return this.info !== null
+        ? this.info.name || this.info.title
+        : this.dataTitle;
+    },
+    icon() {
+      if (
+        (typeof this.iconCss == "undefined" || this.iconCss === "") &&
+        this.info !== null
+      ) {
+        return this.info.icon_css || this.info.iconCss;
+      } else {
+        return this.iconCss;
+      }
+    },
+  },
+  methods: {
+    getIconText() {
+      return this.info?.icon_css || typeof this.iconCss === "undefined"
+        ? this.content
+            .replace(/[^a-zA-Z- ]/g, "")
+            .match(/\b\w/g)
+            .join("")
+        : "";
+    },
+    getColor: function () {
+      let n = !this.dataColorIndex
+        ? this.getSerialNumber()
+        : this.dataColorIndex;
+      return "color-" + n;
+    },
+    getRandom(min = 1, max = 10) {
+      //not in used
+      min = parseInt(min);
+      max = parseInt(max);
+      return Math.floor(Math.random() * (max - min)) + min;
+    },
+    getSerialNumber() {
+      if (Store.fetch("counter") === undefined) {
+        Store.store("counter", 1);
+      }
+
+      let counter = Store.fetch("counter");
+
+      if (counter > 10) {
+        counter = 1;
+      }
+      Store.store("counter", counter + 1);
+
+      return counter;
+    },
+  },
+};
+</script>

package/packages/components/src/library/left-menu-show-hide.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="btn-group">
+    <span @click="toggleMenu" :class="currentCss"></span>
+  </div>
+</template>
+
+<script>
+import { LeftMenu } from "@hashtagcms/helpers/common";
+import { EventBus } from "@hashtagcms/helpers/event-bus";
+
+export default {
+  mounted() {
+    LeftMenu.init();
+    this.init();
+  },
+  props: ["dataIconCss", "dataIconCssOff"],
+  data() {
+    return {
+      visible: true,
+      currentCss: "",
+      css:
+        typeof this.dataIconCss == "undefined" || this.dataIconCss === ""
+          ? "fa fa-arrow-left hand"
+          : this.dataIconCss,
+      cssOff:
+        typeof this.dataIconCssOff == "undefined" || this.dataIconCssOff === ""
+          ? "fa fa-arrow-right hand"
+          : this.dataIconCssOff,
+    };
+  },
+  methods: {
+    init() {
+      this.currentCss = LeftMenu.isVisible() ? this.css : this.cssOff;
+      EventBus.on("left-menu-on-show", () => {
+        this.currentCss = this.css;
+      });
+      EventBus.on("left-menu-on-hide", () => {
+        this.currentCss = this.cssOff;
+      });
+    },
+    toggleMenu() {
+      this.visible = !this.visible;
+      LeftMenu.toggleShow();
+    },
+  },
+};
+</script>

package/packages/components/src/library/loader.vue

@@ -0,0 +1,141 @@
+<template>
+  <div v-show="visible">
+    <div class="loaderModal" ref="loaderModal" v-show="asModal"></div>
+    <div class="loaderPanel" ref="loaderSpinner">
+      <div class="spinner">
+        <svg viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+          <circle
+            class="length"
+            fill="none"
+            stroke-width="8"
+            stroke-linecap="round"
+            cx="33"
+            cy="33"
+            r="28"
+          ></circle>
+        </svg>
+        <svg viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+          <circle
+            fill="none"
+            stroke-width="8"
+            stroke-linecap="round"
+            cx="33"
+            cy="33"
+            r="28"
+          ></circle>
+        </svg>
+        <svg viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+          <circle
+            fill="none"
+            stroke-width="8"
+            stroke-linecap="round"
+            cx="33"
+            cy="33"
+            r="28"
+          ></circle>
+        </svg>
+        <svg viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+          <circle
+            fill="none"
+            stroke-width="8"
+            stroke-linecap="round"
+            cx="33"
+            cy="33"
+            r="28"
+          ></circle>
+        </svg>
+      </div>
+
+      <span class="loaderText" v-html="loadingText"></span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["dataLoadingText", "dataAsModal"],
+  mounted() {
+    this.fixLayout();
+  },
+  data() {
+    return {
+      loadingText:
+        typeof this.dataLoadingText === "undefined"
+          ? "Loading. Please wait..."
+          : this.dataLoadingText,
+      asModal:
+        typeof dataAsModal === "undefined" || dataAsModal === true
+          ? true
+          : false,
+      visible: false,
+    };
+  },
+  methods: {
+    fixLayout(position = null) {
+      let heightWidth = getHeightWidth();
+
+      let loaderModal = this.$refs.loaderModal;
+      let loaderSpinner = this.$refs.loaderSpinner;
+
+      //loader width/height
+      loaderModal.style.width = heightWidth.width + "px";
+      loaderModal.style.height = heightWidth.height + "px";
+
+      if (position !== null) {
+        if (position.left) {
+          loaderSpinner.style.left = position.left + "px";
+        }
+
+        if (position.top) {
+          loaderSpinner.style.top = position.top + "px";
+        }
+
+        if (position.right) {
+          loaderSpinner.style.top = position.right + "px";
+        }
+      }
+
+      function getHeightWidth() {
+        var width = 0,
+          height = 0;
+        if (typeof window.innerWidth == "number") {
+          //Non-IE
+          width = window.innerWidth;
+          height = window.innerHeight;
+        } else if (
+          document.documentElement &&
+          (document.documentElement.clientWidth ||
+            document.documentElement.clientHeight)
+        ) {
+          //IE 6+ in 'standards compliant mode'
+          width = document.documentElement.clientWidth;
+          height = document.documentElement.clientHeight;
+        } else if (
+          document.body &&
+          (document.body.clientWidth || document.body.clientHeight)
+        ) {
+          //IE 4 compatible
+          width = document.body.clientWidth;
+          height = document.body.clientHeight;
+        }
+
+        return { width, height };
+      }
+
+      //console.log(width, height);
+    },
+    show(message = null, position = null) {
+      this.visible = true;
+
+      if (typeof message == "string") {
+        this.loadingText = message;
+      }
+
+      this.fixLayout(position);
+    },
+    hide() {
+      this.visible = false;
+    },
+  },
+};
+</script>