@hashtagcms/admin-ui-kit 1.0.6

package/packages/components/src/sitewise-data.vue

@@ -0,0 +1,347 @@
+<template>
+  <div class="col col-4">
+    <div class="card border-0">
+      <div class="card-header">
+        <h5 class="card-title m-0" style="line-height: inherit">
+          Available {{ title }}
+          <span class="badge text-bg-secondary">{{ total }}</span>
+          <button
+            type="button"
+            title="Add Selected"
+            @click="doAction('add')"
+            class="hand pull-right btn btn-sm btn-primary"
+          >
+            Add Selected
+          </button>
+        </h5>
+      </div>
+      <div class="card-body p-2">
+        <div class="card-subtitle mb-2 text-muted" v-if="total > 0">
+          <label class="inline"
+            ><input
+              type="checkbox"
+              @click="selectAllData('table', $event.target)"
+            />
+            Select All</label
+          >
+        </div>
+        <div class="panel-sub-heading" style="padding: 4px" v-if="showSearch">
+          <div class="input-group">
+            <input
+              type="text"
+              placeholder="Search"
+              class="form-control"
+              aria-describedby="basic-addon3"
+              v-model="searchKey"
+            />
+          </div>
+        </div>
+        <ul class="list-group">
+          <li v-for="(data, index) in filterData()" class="list-group-item">
+            <label class="normal">
+              <input type="checkbox" v-model="data.selected" />
+              {{ getLabel(data) }}
+            </label>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="col col-4">
+    <div class="card border-0">
+      <div class="card-body p-0" v-if="message.length > 0">
+        <small
+          :class="alertCss"
+          v-html="message"
+          style="display: block"
+        ></small>
+      </div>
+      <div class="card-header">
+        <h5 class="card-title text-success m-0" style="line-height: inherit">
+          Added {{ title }}
+          <span class="badge text-bg-secondary">{{ selectedTotal }}</span>
+          <button
+            title="Remove Selected"
+            @click="doAction('remove')"
+            class="btn btn-sm btn-danger pull-right"
+          >
+            Remove Selected
+          </button>
+        </h5>
+      </div>
+      <div class="card-body">
+        <div v-if="selectedTotal > 0" class="card-subtitle mb-2 text-muted">
+          <label class="inline"
+            ><input
+              type="checkbox"
+              @click="selectAllData('sitewise', $event.target)"
+            />
+            Select All</label
+          >
+        </div>
+        <ul class="list-group">
+          <li v-for="(data, index) in siteData" class="list-group-item">
+            <label class="normal">
+              <input type="checkbox" v-model="data.selected" />
+              {{ getLabelForSite(data) }}
+            </label>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import AdminConfig from "@hashtagcms/helpers/admin-config";
+
+import { Loader, Toast } from "@hashtagcms/helpers/common";
+
+export default {
+  mounted() {
+    //console.log(this.siteData);
+    //  console.log(this.allData.data[0]);
+    //console.log(this.cuurent);
+    // this.initData();
+  },
+  created() {
+    //this.initData();
+  },
+
+  props: [
+    "dataMessage",
+    "dataAllData",
+    "dataSiteData",
+    "dataCurrentKey",
+    "dataSiteId",
+    "dataDefaultActionForSave",
+    "dataAlertCss",
+    "dataControllerName",
+  ],
+  data() {
+    return {
+      siteData:
+        typeof this.dataSiteData == "undefined" || this.dataSiteData === ""
+          ? []
+          : JSON.parse(this.dataSiteData),
+      allData:
+        typeof this.dataAllData == "undefined" || this.dataAllData === ""
+          ? []
+          : JSON.parse(this.dataAllData),
+      currentKey: this.dataCurrentKey,
+      searchKey: "",
+      siteId: parseInt(this.dataSiteId),
+      message: typeof this.dataMessage == "undefined" ? "" : this.dataMessage,
+      defaultActionForSave:
+        typeof this.dataDefaultActionForSave === "undefined"
+          ? "saveSettings"
+          : this.dataDefaultActionForSave,
+      alertCss:
+        typeof this.dataAlertCss == "undefined" || this.dataAlertCss === ""
+          ? "alert alert-info"
+          : this.dataAlertCss,
+      controllerName:
+        typeof this.dataControllerName === "undefined"
+          ? "site"
+          : this.dataControllerName,
+    };
+  },
+  computed: {
+    title() {
+      return this.allData.label;
+    },
+    total() {
+      return this.allData.data ? this.allData.data.length : 0;
+    },
+    selectedTotal() {
+      return this.siteData == null ? 0 : this.siteData.length;
+    },
+    showSearch() {
+      //return true;
+      return this.allData.data && this.allData.data.length > 10;
+    },
+  },
+  methods: {
+    saveNow(url, data) {
+      Loader.show(this, "Please wait. Making Changes...");
+      return new Promise((resolve, reject) => {
+        axios
+          .post(url, data)
+          .then((response) => {
+            resolve(response);
+          })
+          .catch((error) => {
+            reject(error.response);
+          })
+          .finally(() => {
+            Loader.hide(this);
+          });
+      });
+    },
+    doAction(action = "add") {
+      let $this = this;
+      //if action is add use left data to copy/reference to the right side
+      let currentData = action === "add" ? this.allData.data : this.siteData;
+      let ids = [];
+      let selectedArr = [];
+
+      if (currentData && currentData.length > 0) {
+        currentData.forEach(function (current) {
+          if (current.selected === true) {
+            ids.push(current.id);
+            selectedArr.push(current);
+          }
+        });
+
+        //if action is method/function. means it is being called from another component
+        if (typeof this.defaultActionForSave === "function") {
+          this.defaultActionForSave(action, currentData, selectedArr, ids);
+          return false;
+        }
+
+        if (ids.length > 0) {
+          let postParams = {};
+          postParams.key = this.currentKey;
+          postParams.ids = ids;
+          postParams.site_id = this.siteId;
+          postParams.action = action;
+          this.saveNow(
+            AdminConfig.admin_path(
+              this.controllerName + "/" + this.defaultActionForSave,
+            ),
+            postParams,
+          )
+            .then(function (res) {
+              feedback(res);
+            })
+            .catch(function (res) {
+              console.error("error: ", res);
+              Toast.show(
+                $this,
+                res?.data?.message || "I don't know what went wrong.",
+                5000,
+              );
+            });
+        }
+      }
+
+      function hasInArr(element, onwhat, value) {
+        return element[onwhat] === value;
+      }
+      //console.log(ids);
+      function feedback(res) {
+        console.log(res);
+        if (action === "add") {
+          //console.log("adding");
+          //console.log(selectedArr);
+          selectedArr.forEach(function (current) {
+            let id = current.id;
+
+            let found = $this.siteData.findIndex(function (c) {
+              return c.id === id;
+            });
+
+            if (found === -1) {
+              $this.siteData.push(current);
+            }
+          });
+        } else {
+          //remove from right side
+          selectedArr.forEach(function (current) {
+            let id = current.id;
+
+            let found = $this.siteData.findIndex(function (c) {
+              return c.id === id;
+            });
+
+            if (found !== -1) {
+              $this.siteData.splice(found, 1);
+            }
+          });
+        }
+      }
+    },
+    selectAllData(dataType, holder) {
+      let $this = this;
+      let currentData =
+        dataType === "table" ? this.allData.data : this.siteData;
+      let selected = holder.checked;
+      if (currentData && currentData.length > 0) {
+        currentData.forEach(function (current) {
+          //$this.$set(current, "selected", selected);
+          current.selected = selected;
+        });
+      }
+    },
+    getLabel(data) {
+      let label = "";
+      if (data.lang) {
+        label = typeof data.lang.name == "undefined" ? "" : data.lang.name;
+      } else {
+        label = data.name || data.alias || "";
+      }
+      return label;
+    },
+    getLabelForSite(data) {
+      //console.log(data);
+
+      if (typeof data.name != "undefined" || typeof data.alias != "undefined") {
+        return data.name || data.alias;
+      } else if (data.lang) {
+        return typeof data.lang.name == "undefined" ? "" : data.lang.name;
+      }
+
+      //Lang data can be found from the source too. Borrow it from left side if right side does not have it.
+      //fallback - get from source/left side data  compare id or link_rewrite
+
+      if (this.allData.data && this.allData.data.length > 0) {
+        let index = this.allData.data.findIndex(function (current) {
+          return (
+            current.id === data.id ||
+            (typeof data.link_rewrite != "undefined" &&
+              data.link_rewrite === current.link_rewrite)
+          );
+        });
+
+        return index === -1 ? "" : this.getLabel(this.allData.data[index]);
+      }
+
+      return "";
+    },
+    filterData() {
+      let $this = this;
+
+      let data = [];
+
+      let key = this.searchKey;
+
+      if (key !== "" && key != null) {
+        key = key.toLowerCase();
+
+        return this.allData.data.filter(function (current) {
+          return (
+            $this.getLabel(current).toLowerCase().includes(key) ||
+            current.id === key
+          );
+        });
+      } else {
+        //console.log("data ", this.allData.data);
+        return this.allData.data;
+      }
+    },
+    setData(key, data) {
+      //this.allData[key] = data;
+      //console.log(key, data);
+      this.allData[key] = data;
+      //this.$set(this.allData, key, data);
+    },
+    setSiteData(data) {
+      //this.allData[key] = data;
+      this.siteData = {};
+      this.siteData = data;
+      //this.$set(this, 'siteData', data);
+    },
+  },
+};
+</script>

package/packages/components/src/sorter.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="sortElem" @click="showHide($event)">
+    <ul id="sortableField">
+      <li
+        v-for="current in allData"
+        class="parent"
+        v-if="current.module_pid == 0"
+      >
+        <h3>
+          <a>
+            <i
+              v-if="hasChild(current)"
+              class="js_more fa fa-ellipsis-v pull-right adjustMore"
+            ></i>
+            <span class="text">{{ current.name }}</span>
+          </a>
+        </h3>
+        <ul v-if="hasChild(current)">
+          <li v-for="child in current.child">
+            <a>
+              <span class="text">{{ child.name }}</span>
+            </a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import AdminConfig from "@hashtagcms/helpers/admin-config";
+
+import Sortable from "sortablejs";
+import { Toast } from "@hashtagcms/helpers/common";
+import Form from "@hashtagcms/helpers/form";
+
+export default {
+  mounted() {
+    this.enableSorting();
+    console.log(this.controllerName);
+  },
+
+  props: ["dataAllModules", "dataControllerName"],
+
+  data() {
+    return {
+      allData:
+        this.dataAllModules && this.dataAllModules != "null"
+          ? JSON.parse(this.dataAllModules)
+          : [],
+      sortable: null,
+      sortingInterval: -1,
+      updateIndexUrl: AdminConfig.admin_path(
+        this.controllerName + "/updateIndex",
+      ),
+      lastTarget: "",
+    };
+  },
+  computed: {
+    controllerName() {
+      let cName =
+        typeof this.dataControllerName == "undefined"
+          ? ""
+          : this.dataControllerName.toLocaleLowerCase();
+      return cName.replace(/\s/g, "");
+    },
+  },
+  methods: {
+    hasChild(data) {
+      return data.child.length > 0;
+    },
+    hideAll() {
+      var $this = this;
+      document.querySelectorAll(".sortElem .parent").forEach(function (i) {
+        i.classList.remove("active");
+      });
+    },
+    showHide(event) {
+      let ele = event.target;
+      if (ele.parentElement.parentElement.parentElement != this.lastTarget) {
+        this.hideAll();
+        if (ele.classList.contains("js_more")) {
+          event.preventDefault();
+          ele.parentElement.parentElement.parentElement.classList.add(
+            "active",
+            "animated",
+            "fadeIn",
+          );
+        }
+        this.lastTarget = ele.parentElement.parentElement.parentElement;
+      } else {
+        if (
+          ele.parentElement.parentElement.parentElement.classList.contains(
+            "active",
+          )
+        ) {
+          ele.parentElement.parentElement.parentElement.classList.remove(
+            "active",
+          );
+        } else {
+          ele.parentElement.parentElement.parentElement.classList.add("active");
+        }
+      }
+    },
+    getActiveCss(controller_name, data) {
+      return this.isActive(controller_name, data) ? "active" : "";
+    },
+    isActive(controller_name, data) {
+      if (this.controllerName == controller_name) {
+        return true;
+      }
+
+      if (data && data.child && data.child.length > 0) {
+        var controllerName = this.controllerName;
+        return data.child.find(function (c) {
+          return c.controller_name == controllerName;
+        });
+      }
+    },
+    enableSorting() {
+      this.$nextTick(function () {
+        if (this.sortable != null) {
+          this.sortable.destroy();
+        }
+        var el = document.getElementById("sortableField");
+        this.sortable = Sortable.create(el, {
+          onEnd: this.sortingCallback,
+          onStart: this.cancelSortingCallback,
+        });
+      });
+    },
+    cancelSortingCallback() {
+      if (this.sortingInterval != -1) {
+        clearInterval(this.sortingInterval);
+      }
+    },
+    sortingCallback(evt) {
+      var text = "";
+      var $this = this;
+      var data = [];
+      // console.log(evt);
+      document
+        .querySelectorAll(".sortElem .parent")
+        .forEach(function (i, index) {
+          var text = i.children[0].children[0].innerText;
+          var indx = index;
+          for (var a = 0; a < $this.allData.length; a++) {
+            if (
+              $this.allData[a].module_pid == 0 &&
+              $this.allData[a].name == text
+            ) {
+              data[a] = {};
+              data[a].id = $this.allData[a].id;
+              data[a].position = index;
+              data[a].name = $this.allData[a].name;
+            }
+          }
+        });
+      // console.log(data);
+      this.updateIndex(data);
+      this.cancelSortingCallback();
+    },
+    submit(requestType, url, data) {
+      return new Promise((resolve, reject) => {
+        axios[requestType](url, data)
+          .then((response) => {
+            this.onSuccess(response);
+          })
+          .catch((error) => {
+            this.onFailure(error.response);
+          });
+      });
+    },
+    updateIndex(data) {
+      this.submit("post", this.updateIndexUrl, data)
+        .then((response) => this.onSuccess(response))
+        .catch((response) => this.onFailure(response));
+    },
+    onSuccess(res) {
+      Toast.show(this, "Modules Sorted.");
+    },
+    onFailure(res) {
+      console.log(res);
+    },
+  },
+};
+</script>
+
+<style>
+.sortElem {
+  margin-top: 15px;
+}
+
+.sortElem .parent {
+  list-style: none;
+  border: 1px solid #cacaca;
+  background: #fff;
+}
+
+.sortElem .parent h3 {
+  font-size: 16px;
+  margin: 0;
+}
+
+.sortElem ul {
+  padding: 0;
+}
+
+.sortElem .parent a {
+  padding: 10px;
+  color: #666;
+  display: block;
+}
+
+.sortElem .parent ul {
+  display: none;
+}
+
+.sortElem .parent.active ul {
+  display: block;
+  background: #ffff;
+  border-top: 1px solid #cacaca;
+}
+
+.sortElem .parent.active ul li {
+  list-style: none;
+  margin-left: 15px;
+  line-height: normal;
+}
+
+.sortElem .parent.active ul li a span {
+  color: #000;
+  font-weight: bold;
+}
+
+.sortElem .parent.sortable-chosen {
+  background: #f4f4f4;
+}
+</style>