@hashtagcms/admin-ui-kit 1.0.6

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

@@ -0,0 +1,136 @@
+<template>
+  <div :class="modelCss" tabindex="-1" aria-hidden="true" :style="style">
+    <div
+      :class="
+        'modal-dialog modal-dialog-centered modal-dialog-scrollable ' +
+        dataModalCss
+      "
+      :style="modalWidth"
+    >
+      <div class="modal-content">
+        <div :class="titleCss + ' modal-header'">
+          <h5 class="modal-title" style="width: 100%">
+            <slot name="title">{{ title }}</slot>
+          </h5>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+            @click="sendData(0)"
+          ></button>
+        </div>
+        <div :class="contentCss + ' modal-body'">
+          <slot name="content">{{ content }}</slot>
+        </div>
+        <div :class="footerCss + ' modal-footer'" v-show="showFooter">
+          <slot name="footer">{{ footerContent }}</slot>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal-backdrop fade show" :style="backDropStyle"></div>
+</template>
+
+<script>
+export default {
+  emits: ["onClose"],
+  props: [
+    "dataShowModal",
+    "dataShowFooter",
+    "dataTitleCss",
+    "dataContentCss",
+    "dataFooterCss",
+    "dataModalCss",
+    "dataWidth",
+  ],
+  mounted() {
+    if (this.visible) {
+      this.open();
+    }
+  },
+  data() {
+    return {
+      modelCss: "modal modal-lg fade show",
+      titleCss:
+        typeof this.dataTitleCss === "undefined" ? "" : this.dataTitleCss,
+      contentCss:
+        typeof this.dataContentCss === "undefined" ? "" : this.dataContentCss,
+      footerCss:
+        typeof this.dataFooterCss === "undefined" ? "" : this.dataFooterCss,
+      visible:
+        this.dataShowModal !== undefined &&
+        this.dataShowModal.toString() === "true",
+      style: "",
+      toBeReturned: {},
+      title: "Alert",
+      content: "Modal Content",
+      footerContent: "",
+      backDropStyle: "display:none",
+    };
+  },
+  computed: {
+    showFooter() {
+      return (
+        (typeof this.dataShowFooter !== "undefined" &&
+          this.dataShowFooter.toString() === "true") ||
+        this.footerContent !== ""
+      );
+    },
+    modalWidth() {
+      if (typeof this.dataWidth != "undefined" && this.dataWidth !== "") {
+        return `width:${this.dataWidth}`;
+      } else {
+        return "";
+      }
+    },
+  },
+  methods: {
+    open(toBeReturned = {}) {
+      this.visible = true;
+      this.backDropStyle = this.style = "display:block";
+      this.modelCss = "modal modal-lg fade show animated bounceInDown";
+      this.toBeReturned = toBeReturned;
+    },
+    close() {
+      this.visible = false;
+      this.modelCss = "modal modal-lg animated bounceOutUp";
+      this.backDropStyle = "display:none";
+
+      if (typeof this.toBeReturned === "function") {
+        this.toBeReturned();
+      }
+    },
+    sendData(isOkay) {
+      this.close();
+      this.$emit("onClose", isOkay, this.toBeReturned);
+    },
+
+    show(message, position, callback, timeout) {
+      if (typeof message == "string") {
+        this.content = message;
+      } else {
+        if (message.title) {
+          this.title = message.title;
+        }
+        if (message.content) {
+          this.content = message.content;
+        }
+        if (message.footerContent) {
+          this.footerContent = message.footerContent;
+        }
+      }
+
+      //handle position
+      if (position) {
+        //align this
+      }
+
+      this.open(callback);
+    },
+    hide() {
+      this.close();
+    },
+  },
+};
+</script>

package/packages/components/src/library/split-button.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="dropdown">
+    <a
+      :class="'btn btn-secondary dropdown-toggle ' + btnCss"
+      href="#"
+      role="button"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+      @click="toggleMenu()"
+    >
+      {{ current.label }}
+    </a>
+    <ul class="dropdown-menu shadow" :style="display" ref="dropdownMenu">
+      <li
+        :class="isActive(item)"
+        v-for="(item, index) in lists"
+        @click="setCurrent(index)"
+      >
+        {{ item.label }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  mounted() {
+    this.normalizeData();
+    //console.log(this.lists);
+  },
+
+  props: [
+    "dataOptions",
+    "dataSelected",
+    "dataParser",
+    "dataOnChange",
+    "dataBtnCss",
+  ],
+  data() {
+    return {
+      display: "",
+      formatter: this.dataParser,
+      lists:
+        typeof this.dataOptions != "undefined" &&
+        typeof this.dataOptions == "string"
+          ? JSON.parse(this.dataOptions)
+          : this.dataOptions,
+      current: {},
+      selectedIndex:
+        typeof this.dataSelected == "undefined"
+          ? 0
+          : parseInt(this.dataSelected),
+      openCSS: "",
+      btnCss: typeof this.dataBtnCss == "undefined" ? "" : this.dataBtnCss,
+    };
+  },
+  computed: {
+    onChange() {
+      let method =
+        typeof this.dataOnChange == "undefined" ? null : this.dataOnChange;
+      if (typeof method == "string") {
+        return eval(method);
+      }
+      return method;
+    },
+  },
+  methods: {
+    toggleMenu() {
+      this.display = this.display === "" ? "display:block" : "";
+      if (this.display !== "") {
+        //this.openCSS = 'animated slideInDown';
+        this.bindDocumentClick();
+      }
+    },
+    isActive(item) {
+      if (this.current.value === item.value) {
+        return "dropdown-item active hand";
+      }
+      return "dropdown-item hand";
+    },
+    normalizeData() {
+      let formatter = this.formatter;
+      let arr = [];
+      this.lists.forEach(function (item, index) {
+        if (typeof formatter == "function") {
+          arr.push(formatter(item));
+        } else if (typeof index == "number") {
+          arr.push({ label: item, value: item });
+        }
+      });
+
+      this.lists = arr;
+      this.current = this.lists[this.selectedIndex];
+    },
+    setCurrent(index) {
+      this.current = this.lists[index];
+      this.current.index = index;
+
+      if (this.onChange != null && typeof this.onChange == "function") {
+        this.onChange(this.current);
+      }
+
+      this.$emit("change", this.current);
+    },
+    mangeShowHide(event) {
+      let element = this.$refs.dropdownMenu;
+      let target = event.target;
+
+      if (element !== target && !element.contains(target)) {
+        this.display = "";
+        this.unBindDocumentClick();
+      }
+    },
+    bindDocumentClick() {
+      document.addEventListener("mouseup", this.mangeShowHide);
+    },
+    unBindDocumentClick() {
+      document.removeEventListener("mouseup", this.mangeShowHide);
+    },
+    setData(data) {
+      this.lists = [];
+      this.lists = data;
+      this.normalizeData();
+    },
+  },
+};
+</script>

package/packages/components/src/library/timer-button.vue

@@ -0,0 +1,43 @@
+<template>
+  <a href="#" @click="goBack()" class="btn btn-outline-secondary"
+    ><slot>Back in </slot
+    ><span>{{ totalTime - timeRemaining }} {{ seconds }}</span></a
+  >
+</template>
+
+<script>
+export default {
+  props: ["dataBackUrl", "dataTimeout"],
+  data() {
+    return {
+      totalTime:
+        typeof this.dataTimeout == "undefined" ? 5 : parseInt(this.dataTimeout),
+      timeRemaining: 0,
+      intervalId: 0,
+      seconds: "Seconds",
+    };
+  },
+  mounted() {
+    this.intervalId = setInterval(this.updateTime, 1000);
+  },
+  methods: {
+    goBack() {
+      //console.log(this.dataBackUrl);
+      clearInterval(this.intervalId);
+      window.location.href = this.dataBackUrl;
+    },
+
+    updateTime() {
+      if (this.timeRemaining >= this.totalTime) {
+        clearInterval(this.intervalId);
+        this.goBack();
+      } else {
+        this.timeRemaining++;
+      }
+
+      this.seconds =
+        this.totalTime - this.timeRemaining <= 1 ? "Second" : "Seconds";
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,53 @@
+<template>
+  <div class="toasterHolder jsToast shadow" v-show="showMe">
+    <div class="toasterContent">
+      {{ message }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  mounted() {},
+  data() {
+    return {
+      showMe: false,
+      message: "Toast Content",
+      intervalId: 0,
+    };
+  },
+  methods: {
+    show(message = "", timeout = 3000, position) {
+      this.hide();
+      let $this = this;
+      this.showMe = true;
+      this.message = message !== "" ? message : "";
+      this.$nextTick(function () {
+        this.align(position);
+      });
+
+      this.intervalId = setTimeout(function () {
+        $this.hide();
+      }, timeout);
+    },
+    hide() {
+      this.showMe = false;
+      if (this.intervalId) {
+        clearInterval(this.intervalId);
+      }
+    },
+    align(position) {
+      let left =
+        position !== undefined
+          ? position.left
+          : window.innerWidth / 2 - this.$el.offsetWidth / 2;
+      let top =
+        position !== undefined
+          ? position.top
+          : window.innerHeight / 2 - this.$el.offsetHeight / 2 + window.scrollY;
+      this.$el.style.top = top + "px";
+      this.$el.style.left = left + "px";
+    },
+  },
+};
+</script>

package/packages/components/src/menu-sorter.vue

@@ -0,0 +1,265 @@
+<template>
+  <div>
+    <h4 v-if="showGroups">
+      Arrange Menus
+      <split-button
+        :data-options="groups"
+        @change="arrangeAgain"
+        :data-selected="selectedIndex"
+      >
+      </split-button>
+    </h4>
+    <ul class="sortable-list js_sortable">
+      <template v-for="(item, index) in allData">
+        <li
+          data-is-parent="true"
+          v-if="isParent(item)"
+          class="item"
+          :data-id="getId(item)"
+        >
+          <span v-html="getName(item)"></span>
+          <div v-if="hasChild(item)" class="inline">
+            <label :for="'item_' + index" class="accordion-header pull-right">
+              <span class="fa fa-ellipsis-v ellipsis"></span>
+            </label>
+            <input
+              :id="'item_' + index"
+              type="checkbox"
+              class="accordion-control"
+            />
+            <ul class="child accordion-body js_sortable">
+              <li
+                data-is-parent="false"
+                class="item"
+                v-for="child in item.child"
+                :data-id="getId(child)"
+              >
+                {{ getName(child) }}
+              </li>
+            </ul>
+          </div>
+        </li>
+      </template>
+    </ul>
+    <div class="center-align mt-3" v-if="allData.length > 1">
+      <input
+        type="button"
+        class="btn btn-success btn-from-submit"
+        value="Save"
+        @click="updateIndex()"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import AdminConfig from "@hashtagcms/helpers/admin-config";
+
+import Sortable from "sortablejs";
+import { Toast, Loader } from "@hashtagcms/helpers/common";
+
+import SplitButton from "./library/split-button.vue";
+
+export default {
+  components: {
+    "split-button": SplitButton,
+  },
+
+  mounted() {
+    this.enableSorting();
+    //console.log(this.controllerName);
+    //console.log(this.allData);
+  },
+
+  props: [
+    "dataAllData",
+    "dataFields",
+    "dataControllerName",
+    "dataControllerChildName",
+    "dataGroups",
+    "dataGroupName",
+    "dataShowGroups",
+  ],
+
+  data() {
+    return {
+      allData:
+        this.dataAllData && this.dataAllData !== "null"
+          ? JSON.parse(this.dataAllData)
+          : [],
+      groups:
+        this.dataGroups && this.dataGroups !== ""
+          ? JSON.parse(this.dataGroups)
+          : [],
+      groupName:
+        this.dataGroupName && this.dataGroupName !== ""
+          ? this.dataGroupName
+          : "",
+      showGroups: !!(this.dataShowGroups && this.dataShowGroups === "true"),
+    };
+  },
+  computed: {
+    fields() {
+      let fields =
+        this.dataFields && this.dataFields !== "null"
+          ? JSON.parse(this.dataFields)
+          : null;
+      if (fields === null) {
+        fields = {};
+        fields.id = "id";
+        fields.label = "name";
+        fields.isImage = false;
+      }
+      return fields;
+    },
+    controllerName() {
+      let cName =
+        typeof this.dataControllerName == "undefined"
+          ? ""
+          : this.dataControllerName.toLowerCase();
+      return cName.replace(/\s/g, "");
+    },
+    controlerChildName() {
+      let cName =
+        typeof this.dataControllerChildName == "undefined"
+          ? ""
+          : this.dataControllerChildName.toLowerCase();
+      return cName.replace(/\s/g, "");
+    },
+    selectedIndex() {
+      let index = 0;
+      for (let i = 0; i < this.groups.length; i++) {
+        if (this.groups[i] === this.groupName) {
+          index = i;
+          break;
+        }
+      }
+      return index;
+    },
+  },
+  methods: {
+    isParent(data) {
+      return data.parent_id === 0 || !data.parent_id;
+    },
+    arrangeAgain(data) {
+      window.location.href = AdminConfig.admin_path(
+        this.controllerName + "/sort/" + data.value,
+      );
+    },
+    hasChild(data) {
+      return data.child && data.child.length > 0;
+    },
+    getName(data) {
+      //Added media support
+      if (this.fields.isImage === true) {
+        let path = data[this.fields.label]
+          ? AdminConfig.get_media(data[this.fields.label])
+          : AdminConfig.get_media(data.lang[this.fields.label]);
+        return `<a href='${path}' target='_blank'><img height='30' src='${path}' /></a>`;
+      } else {
+        return data[this.fields.label]
+          ? data[this.fields.label]
+          : data.lang[this.fields.label];
+      }
+    },
+    getId(data) {
+      return data[this.fields.id];
+    },
+    enableSorting() {
+      let $this = this;
+      this.$nextTick(function () {
+        let list = document.querySelectorAll(".js_sortable");
+        list.forEach(function (current) {
+          Sortable.create(current, {
+            animation: 500,
+            ghostClass: "text-danger",
+            onUpdate: function (/**Event*/ evt) {
+              //console.log("onUpdate ", evt.item);
+              //let item = evt.item;
+              //let isParent = (item.getAttribute("data-is-parent") === "true");
+              //$this.updateIndex(isParent);
+            },
+          });
+        });
+      });
+    },
+    submit(requestType, url, data, controllerName) {
+      Loader.show(this, "Please wait. Saving sorting data...");
+      return new Promise((resolve, reject) => {
+        axios[requestType](url, data)
+          .then((response) => {
+            this.onSuccess(response, controllerName);
+          })
+          .catch((error) => {
+            this.onFailure(error.response);
+          })
+          .finally(() => {
+            Loader.hide(this);
+          });
+      });
+    },
+    updateIndex(isParent = false) {
+      let items = document.querySelectorAll(".item");
+      let datas = [];
+
+      let controllerName = this.controllerName;
+
+      let saveAll = true;
+
+      if (this.controlerChildName !== "") {
+        saveAll = false;
+      }
+
+      controllerName =
+        isParent === true
+          ? this.controllerName
+          : this.controlerChildName !== ""
+            ? this.controlerChildName
+            : this.controllerName;
+
+      let counter = 1;
+
+      console.log("saveAll " + saveAll);
+
+      items.forEach(function (current, index) {
+        if (saveAll === true) {
+          let id = current.getAttribute("data-id");
+          let position = counter;
+          datas.push({ position: position, where: { id: parseInt(id) } });
+          counter = counter + 1;
+        } else {
+          let isParentElement = current.getAttribute("data-is-parent");
+          let id = current.getAttribute("data-id");
+
+          if (isParent.toString() === isParentElement.toString()) {
+            let id = current.getAttribute("data-id");
+            let position = counter;
+            datas.push({ position: position, where: { id: parseInt(id) } });
+            counter = counter + 1;
+          }
+        }
+      });
+
+      let updateIndexUrl = AdminConfig.admin_path(
+        controllerName + "/updateIndex",
+      );
+
+      this.submit("post", updateIndexUrl, datas, controllerName);
+    },
+    onSuccess(res, controllerName) {
+      Toast.show(this, controllerName.toUpperCase() + " Sorted.");
+    },
+    onFailure(res) {
+      Toast.show(
+        this,
+        res?.statusText || "There is some error! Don't know the reason",
+        5000,
+      );
+      console.log(res);
+    },
+    setData(data) {
+      this.allData = data;
+    },
+  },
+};
+</script>