@hashtagcms/admin-ui-kit 1.0.6

package/packages/components/src/module-permission.vue

@@ -0,0 +1,334 @@
+<template>
+  <div>
+    <div v-if="superAdmin" class="alert alert-info">
+      <strong>{{ userModules.name }}</strong> is admin or super admin. No need
+      to provide module access.
+    </div>
+    <div v-if="superAdmin" class="row">
+      <div class="form-group center-align">
+        <a :href="dataBackUrl" class="btn btn-outline-primary">Okay :)</a>
+      </div>
+    </div>
+    <form
+      v-if="!superAdmin"
+      :action="permissionSaveUrl"
+      class="form-horizontal"
+      method="post"
+      role="form"
+      v-on:submit.prevent="saveData"
+    >
+      <div class="checkbox title">
+        <h4>
+          <label>
+            <input
+              v-model="selectAllModule"
+              type="checkbox"
+              @click="selectAll()"
+            />
+            Select
+          </label>
+          modules for
+          <span class="text-info"
+            >{{ userModules.name }} {{ userModules.last_name }}</span
+          >
+        </h4>
+      </div>
+      <ul class="list-unstyled list-permission">
+        <li class="clearfix" v-for="module in form.cmsModuleData">
+          <div v-if="isParent(module)" class="row p-2">
+            <div class="col">
+              <input
+                @click="selectMe(module)"
+                class="form-check-input"
+                type="checkbox"
+                v-model="module.selected"
+                :id="'check_' + module.id"
+                :data-id="module.id"
+                data-is-parent="true"
+              />
+              <label class="form-check-label" :for="'check_' + module.id"
+                >&nbsp;{{ module.name }}</label
+              >
+            </div>
+            <div class="col-auto">
+              <label>
+                <input
+                  :id="'check_readonly_' + module.id"
+                  v-model="module.readonly"
+                  type="checkbox"
+                  @click="selectReadOnly(module, $event)"
+                  data-is-readonly-checkbox="true"
+                />
+                Read Only</label
+              >
+            </div>
+          </div>
+          <ul
+            v-if="hasChild(module)"
+            class="list-unstyled clearfix"
+            style="margin-left: 20px"
+          >
+            <li v-for="child in module.child" class="clearfix">
+              <div class="row p-2">
+                <div class="col">
+                  <input
+                    @click="selectMe(child, module)"
+                    class="form-check-input"
+                    type="checkbox"
+                    v-model="child.selected"
+                    :id="'check_' + child.id"
+                    :data-id="child.id"
+                    data-is-parent="false"
+                  />
+                  <label
+                    class="form-check-label"
+                    :for="'check_' + child.id"
+                    data-is-readonly="true"
+                    >&nbsp;{{ child.name }}</label
+                  >
+                </div>
+                <div class="col-auto">
+                  <label>
+                    <input
+                      :id="'check_readonly_' + child.id"
+                      v-model="child.readonly"
+                      type="checkbox"
+                      @click="selectReadOnly(child, $event, true)"
+                      data-is-readonly-checkbox="true"
+                    />
+                    Read Only</label
+                  >
+                </div>
+              </div>
+            </li>
+          </ul>
+        </li>
+      </ul>
+
+      <div class="row">
+        <div v-if="errorMessage !== ''" class="alert alert-danger">
+          {{ errorMessage }}
+        </div>
+        <div class="form-group center-align">
+          <input
+            class="btn btn-success btn-from-submit"
+            name="submit"
+            type="submit"
+            value="Save"
+          />
+          <a :href="dataBackUrl" class="btn btn-outline-secondary">Back</a>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import AdminConfig from "@hashtagcms/helpers/admin-config";
+
+import Form from "@hashtagcms/helpers/form";
+import { Toast } from "@hashtagcms/helpers/common";
+import { EventBus } from "@hashtagcms/helpers/event-bus";
+
+export default {
+  mounted() {
+    this.form.cmsModuleData = this.allModules;
+    this.form.userId = this.userModules.id;
+    this.showSuperAdmin();
+    EventBus.on("on-paste", (data) => {
+      this.handlePaste(data);
+    });
+  },
+  props: [
+    "dataCmsModules",
+    "dataUserModules",
+    "dataControllerName",
+    "dataBackUrl",
+    "dataIsSuperAdmin",
+  ],
+  data() {
+    return {
+      userModules: this.dataUserModules ? JSON.parse(this.dataUserModules) : [],
+      form: new Form({
+        cmsModuleData: [],
+        userId: 0,
+      }),
+      selectAllModule: false,
+      superAdmin: false,
+      errorMessage: "",
+    };
+  },
+  computed: {
+    allModules() {
+      let userModules = this.userModules.cmsmodules;
+
+      let modules = this.dataCmsModules ? JSON.parse(this.dataCmsModules) : [];
+      //console.log(modules);
+      let filterModules = [];
+      if (modules.length > 0) {
+        for (let i = 0; i < modules.length; i++) {
+          let current = modules[i];
+          let found = findModule(current);
+          current.selected = found ? true : false;
+          current.readonly = found.readonly === 1;
+          if (current.parent_id === 0 && current.child.length > 0) {
+            for (let c = 0; c < current.child.length; c++) {
+              let child = current.child[c];
+              let foundChild = findModule(child);
+              child.selected = foundChild ? true : false;
+              child.readonly = foundChild.readonly === 1;
+            }
+          }
+          if (current.parent_id === 0) {
+            filterModules.push(current);
+          }
+        }
+      }
+      return filterModules;
+
+      function findModule(currentModule) {
+        if (userModules.length > 0) {
+          let found = userModules.find(function (current) {
+            return current.module_id.toString() === currentModule.id.toString();
+          });
+
+          return found === undefined ? false : found;
+        }
+        return false;
+      }
+    },
+    permissionSaveUrl() {
+      return AdminConfig.admin_path(
+        this.dataControllerName + "/saveModulePermissions",
+      );
+    },
+    csrfToken() {
+      return window.Laravel.csrfToken;
+    },
+  },
+  methods: {
+    handlePaste(data) {
+      let pastedData;
+      pastedData = JSON.parse(data);
+      this.form.cmsModuleData.forEach((item, index) => {
+        let id = item.id;
+        let status = isCheckBoxSelected(id);
+        if (status.selected) {
+          item.selected = true;
+          item.readonly = status.readonly;
+        }
+        if (item.child.length > 0) {
+          item.child.forEach((childItem, childIndex) => {
+            let childId = childItem.id;
+            let statusChild = isCheckBoxSelected(childId);
+            if (statusChild.selected) {
+              childItem.selected = true;
+              childItem.readonly = statusChild.readonly;
+            }
+          });
+        }
+      });
+
+      function isCheckBoxSelected(id) {
+        for (let key in pastedData) {
+          let ele = document.getElementById("check_" + id);
+          let readonlyEle = document.getElementById("check_readonly_" + id);
+          if (ele && ele.checked) {
+            return { selected: true, readonly: readonlyEle.checked };
+          }
+        }
+        return { selected: false, readonly: false };
+      }
+    },
+    hasChild(data) {
+      return data.child && data.child.length > 0;
+    },
+    isParent(data) {
+      return data.parent_id === 0;
+    },
+    selectReadOnly(current, event, isChild = false) {
+      let isChecked = event.target.checked;
+      if (current.selected !== true) {
+        current.selected = isChecked;
+      }
+      //current.readonly = (isChecked) ? 1 : 0;
+      if (isChild === true) {
+        //selected parent
+      }
+    },
+    selectAll() {
+      let shouldSelect = this.selectAllModule === false;
+
+      for (let i = 0; i < this.form.cmsModuleData.length; i++) {
+        let current = this.form.cmsModuleData[i];
+        current.selected = shouldSelect;
+
+        this.selectMe(current, undefined, shouldSelect);
+      }
+    },
+    selectMe(current, parentModule, forcedSelectAll = null) {
+      let shouldSelect = current.selected === false; //show previous state
+
+      //if forcing
+      if (forcedSelectAll !== null) {
+        shouldSelect = forcedSelectAll;
+      }
+
+      if (current.child && current.child.length > 0) {
+        current.child.map(function (c) {
+          c.selected = shouldSelect;
+          //reset readonly
+          if (!shouldSelect) {
+            c.readonly = false;
+          }
+        });
+      }
+
+      if (shouldSelect !== true) {
+        current.readonly = false;
+      }
+
+      //check if parent should be selected
+      if (parentModule) {
+        let isAnySelected = parentModule.child.find(function (current) {
+          //console.log("current.selected === true", current.selected === true)
+          return current.selected === true;
+        });
+
+        if (shouldSelect || isAnySelected) {
+          parentModule.selected = true;
+        }
+      }
+
+      //Check if one or more is unchecked. reset select all tab
+      if (shouldSelect === false) {
+        this.selectAllModule = false;
+      }
+    },
+    showSuperAdmin() {
+      if (
+        this.dataIsSuperAdmin.toString() === "1" ||
+        this.dataIsSuperAdmin.toString() === "true"
+      ) {
+        this.superAdmin = true;
+      }
+    },
+    saveData() {
+      this.form
+        .post(this.permissionSaveUrl, false)
+        .then((response) => this.afterFormSaved(response))
+        .catch((response) => this.afterFormSaved(response));
+    },
+    afterFormSaved(response) {
+      if (response.isSaved === true) {
+        Toast.show(this, "Saved Successfully. ");
+      } else {
+        Toast.show(this, "There is some error.");
+      }
+    },
+    goBack() {
+      window.location = this.dataBackUrl;
+    },
+  },
+};
+</script>

package/packages/components/src/pagination.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="row">
+    <div class="col-auto">
+      <span class="counters" v-if="totalCount > 0">
+        {{ dataFirstItem }} - {{ lastItem }} of {{ totalCount }}
+      </span>
+    </div>
+    <div class="col-auto">
+      <nav v-if="showPagination" class="shadow-sm">
+        <ul class="pagination">
+          <li v-for="page in allPages" :class="getCss(page)">
+            <a
+              class="page-link"
+              :href="getLink(page)"
+              v-html="getLabel(page.label)"
+            ></a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+    <div class="col float-end" v-if="totalCount > 0 && showDownload">
+      <span class="pull-right" style="margin-right: 16px">
+        <download-button
+          :data-controller-name="controllerName"
+        ></download-button>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { EventBus } from "@hashtagcms/helpers/event-bus";
+import DownloadButton from "./downlods.vue";
+
+export default {
+  components: {
+    "download-button": DownloadButton,
+  },
+  mounted() {
+    this.updatePageParams();
+    let $this = this;
+    EventBus.on("pagination-on-delete", function () {
+      $this.decreaseCounter();
+    });
+  },
+  props: [
+    "dataPaginator",
+    "dataFirstItem",
+    "dataLastItem",
+    "dataTotal",
+    "dataControllerName",
+    "dataNextLabel",
+    "dataPreviousLabel",
+    "dataShowDownload",
+  ],
+  data() {
+    return {
+      totalCount: parseInt(this.dataTotal),
+      lastItem: parseInt(this.dataLastItem),
+      controllerName: this.dataControllerName,
+      paginator: JSON.parse(this.dataPaginator),
+      pageLabel: {
+        "pagination.next": this.dataNextLabel,
+        "pagination.previous": this.dataPreviousLabel,
+      },
+      showDownload:
+        this.dataShowDownload === "true" || this.dataShowDownload === "1",
+    };
+  },
+  computed: {
+    hasPreviousPage() {
+      return this.paginator.prev_page_url != null;
+    },
+    allPages() {
+      return this.paginator.links;
+    },
+    showPagination() {
+      return this.allPages.length > 3; //["Previous", "1", "Next"]
+    },
+  },
+  methods: {
+    decreaseCounter() {
+      this.totalCount = this.totalCount - 1;
+      this.lastItem = this.lastItem - 1;
+    },
+    getLink(page) {
+      return page.url == null ? "javascript:void(0)" : page.url;
+    },
+    getLabel(label) {
+      //label is provided from view file
+      if (this.pageLabel[label]) {
+        return this.pageLabel[label];
+      }
+
+      return label;
+    },
+    getCss(page) {
+      if (page.url == null) {
+        return "page-item disabled";
+      }
+      return page.active === true ? "page-item active" : "page-item";
+    },
+    updatePageParams() {
+      let params = window.location.search.substring(1);
+      // console.log("params "+params);
+      let hasPage = params.match(/page=\d+/gi);
+      if (hasPage != null) {
+        params = params.replace(/page=\d+/, "");
+      }
+      if (params !== "") {
+        params = params.indexOf("&") === 0 ? params : "&" + params;
+        let elements = document.querySelectorAll(".pagination a");
+        elements.forEach(function (ele, index) {
+          let href = ele.href;
+          href = href + "" + params;
+          //remove last and double &
+          href = href.replace(/&$/, "");
+          href = href.replace(/&&/, "&");
+          ele.href = href;
+        });
+      }
+    },
+  },
+};
+</script>

package/packages/components/src/platform-button.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <select
+      :name="name"
+      :id="id"
+      @change="setPlatform"
+      v-model="selected"
+      :multiple="dataMultiple == 'true' ? multiple : false"
+    >
+      <option value="">Select Platform</option>
+      <option v-for="platform in platforms" :value="platform.id">
+        {{ platform.name }}
+      </option>
+    </select>
+    <i v-show="isLoading" class="fa fa-refresh fa-spin" aria-hidden="true"></i>
+  </div>
+</template>
+
+<script>
+import AdminConfig from "@hashtagcms/helpers/admin-config";
+import SplitButton from "./library/split-button.vue";
+import { EventBus } from "@hashtagcms/helpers/event-bus";
+
+export default {
+  components: {
+    "split-button": SplitButton,
+  },
+  props: [
+    "dataName",
+    "dataId",
+    "dataPlatforms",
+    "dataSelected",
+    "dataMultiple",
+    "dataSiteId",
+    "dataFetchOnInit",
+  ],
+  mounted() {
+    if (this.fetchOnInit !== false) {
+      this.init();
+    }
+
+    console.log("selected ", this.selected);
+
+    EventBus.$on("site_changed", this.populatePlatform);
+  },
+  computed: {
+    selected: {
+      get() {
+        //if this is not multiple
+        if (
+          typeof this.dataMultiple === "undefined" ||
+          this.dataMultiple !== "true"
+        ) {
+          return typeof this.dataSelected === "undefined"
+            ? 1
+            : parseInt(this.dataSelected);
+        }
+        //this is multiple
+        return typeof this.dataSelected === "undefined"
+          ? [1]
+          : JSON.parse(this.dataSelected);
+      },
+      set(newValue) {
+        return newValue;
+      },
+    },
+  },
+  data() {
+    return {
+      platforms:
+        typeof this.dataPlatforms === "undefined"
+          ? []
+          : JSON.parse(this.dataPlatforms),
+      name:
+        typeof this.dataName === "undefined" ? "platform_id" : this.dataName,
+      id: typeof this.dataId === "undefined" ? "platform_id" : this.dataId,
+      multiple:
+        typeof this.dataMultiple === "undefined" ? "" : "multiple='multiple'",
+      siteId:
+        typeof this.dataSiteId === "undefined" ? 1 : parseInt(this.dataSiteId),
+      fetchOnInit:
+        typeof this.dataFetchOnInit === "undefined" ||
+        this.dataFetchOnInit === "false"
+          ? false
+          : this.dataFetchOnInit,
+      isLoading: false,
+      selectedValue: this.selected,
+    };
+  },
+  methods: {
+    init() {
+      this.populatePlatform(this.siteId);
+    },
+    setPlatform() {
+      EventBus.$emit("platform_changed", this.selected);
+    },
+    populatePlatform(siteId = null) {
+      if (siteId === null || siteId === "") {
+        this.platforms = [];
+        return false;
+      }
+      this.isLoading = true;
+
+      let $this = this;
+      let platformUrl = AdminConfig.admin_path("ajax/getInfo/site/" + siteId);
+      axios
+        .get(platformUrl)
+        .then(function (res) {
+          $this.platforms = res.data.results.platform;
+          $this.isLoading = false;
+        })
+        .catch(function (res) {
+          console.error(res.data);
+        });
+    },
+  },
+};
+</script>