@hashtagcms/admin-ui-kit 1.0.6

package/packages/components/src/html-slot.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  mounted() {
+    // console.log("html slot mounted");
+    for (var i in this) {
+      if (this.hasOwnProperty(i)) {
+        // console.log(i + " : "+ this[i].toString());
+      }
+    }
+  },
+  methods: {
+    getAllInputs: function () {
+      console.log("all inputs");
+    },
+  },
+};
+</script>

package/packages/components/src/image-gallery.vue

@@ -0,0 +1,144 @@
+<template>
+  <modal-box ref="imageModalBox" data-show-footer="true">
+    <template #title>
+      <div class="row">
+        <div class="col-2">Gallery</div>
+        <div class="col-auto d-flex">
+          <input
+            type="text"
+            class="form-control me-1"
+            placeholder="Search image"
+            @keydown.enter="searchImages"
+            v-model="searchKey"
+          />
+          <input
+            type="button"
+            class="btn btn-secondary me-1"
+            value="Search"
+            @click="searchImages"
+          />
+        </div>
+      </div>
+    </template>
+    <template #content>
+      <div class="row">
+        <span class="spinner-border text-info" role="status" v-if="loading">
+          <span class="visually-hidden">Loading...</span>
+        </span>
+        <div class="col-auto m-1 border" v-for="current in data">
+          <img
+            :src="getImage(current.path)"
+            width="100"
+            @click="insertContentToEditor(getImage(current.path))"
+          />
+        </div>
+        <div v-if="data.length === 0 && loading === false">No images found</div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="container-fluid">
+        <file-uploader data-accept="image/*"></file-uploader>
+      </div>
+    </template>
+  </modal-box>
+</template>
+
+<script>
+import AdminConfig from "@hashtagcms/helpers/admin-config";
+import ModalBox from "./library/modal-box.vue";
+import { EventBus } from "@hashtagcms/helpers/event-bus";
+import fileUploader from "./file-uploader.vue";
+
+export default {
+  components: {
+    "modal-box": ModalBox,
+    "file-uploader": fileUploader,
+  },
+  props: ["dataModel", "dataModuleRelations", "dataId", "dataEditor"],
+  mounted() {
+    EventBus.on("gallery-image-uploaded", (response) => {
+      this.data = [...response.data, ...this.data];
+    });
+  },
+  computed: {
+    galleryCreate() {
+      return AdminConfig.admin_path(
+        "gallery/create?return_url=" + encodeURIComponent(window.location.href),
+      );
+    },
+  },
+  data() {
+    return {
+      data: [],
+      loading: false,
+      searchKey: "",
+      editor: this.dataEditor,
+      form: {
+        file: "",
+      },
+    };
+  },
+  methods: {
+    loadData() {
+      this.data = [];
+      this.loading = true;
+      let url = AdminConfig.admin_path(`gallery/getAllImages`);
+      axios
+        .get(url)
+        .then((res) => {
+          this.data = res.data;
+        })
+        .catch((err) => {
+          console.log(err);
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    getImage(value) {
+      return AdminConfig.get_media(`${value}`);
+    },
+    insertContentToEditor(content) {
+      content = `<img src="${content}" />`;
+      if (this.editor) {
+        this.editor.insertContent(content);
+      }
+      this.close();
+    },
+    searchImages() {
+      if (this.searchKey.length > 0) {
+        this.data = [];
+        this.loading = true;
+        let url = AdminConfig.admin_path(
+          `gallery/searchImages/${this.searchKey}`,
+        );
+        axios
+          .get(url)
+          .then((res) => {
+            this.data = res.data;
+          })
+          .catch((err) => {
+            console.log(err);
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+      } else {
+        this.loadData();
+      }
+    },
+    open(editor) {
+      this.loadData();
+      if (editor) {
+        this.editor = editor;
+      }
+      this.$refs.imageModalBox.open();
+      EventBus.emit("image-gallery-open");
+    },
+    close() {
+      this.$refs.imageModalBox.close();
+      EventBus.emit("image-gallery-close");
+    },
+  },
+};
+</script>

package/packages/components/src/index.js

@@ -0,0 +1,53 @@
+import "@hashtagcms/styles/src/app.scss";
+export { default as ActionBar } from "./action-bar.vue";
+export { default as CategoryPlatform } from "./category-platform.vue";
+export { default as CategorySettings } from "./category-settings.vue";
+export { default as CmsModuleDropdown } from "./cms-module-dropdown.vue";
+export { default as DownloadButton } from "./downlods.vue";
+export { default as FileUploader } from "./file-uploader.vue";
+export { default as FrontendModuleCreator } from "./frontend-module-creator.vue";
+export { default as GlobalSiteButton } from "./global-site-button.vue";
+export { default as Homepage } from "./homepage.vue";
+export { default as HtmlSlot } from "./html-slot.vue";
+export { default as ImageGallery } from "./image-gallery.vue";
+export { default as InfoBoxes } from "./info-boxes.vue";
+export { default as InfoPopup } from "./info-popup.vue";
+export { default as LanguageButton } from "./language-button.vue";
+export { default as LanguageCopier } from "./language-copier.vue";
+export { default as LeftNav } from "./left-nav.vue";
+export { default as MenuSorter } from "./menu-sorter.vue";
+export { default as ModuleCreator } from "./module-creator.vue";
+export { default as ModulePermission } from "./module-permission.vue";
+export { default as Pagination } from "./pagination.vue";
+export { default as PlatformButton } from "./platform-button.vue";
+export { default as SearchBar } from "./search-bar.vue";
+export { default as SiteButton } from "./site-button.vue";
+export { default as SiteCloner } from "./site-cloner.vue";
+export { default as SitewiseCopier } from "./sitewise-copier.vue";
+export { default as SitewiseData } from "./sitewise-data.vue";
+export { default as Sorter } from "./sorter.vue";
+export { default as TabularView } from "./tabular-view.vue";
+export { default as TitleBar } from "./title-bar.vue";
+export { default as TopNav } from "./top-nav.vue";
+
+// Library exports
+export { default as CopyPaste } from "./library/copy-paste.vue";
+export { default as InfoBox } from "./library/info-box.vue";
+export { default as LeftMenuShowHide } from "./library/left-menu-show-hide.vue";
+export { default as Loader } from "./library/loader.vue";
+export { default as ModalBox } from "./library/modal-box.vue";
+export { default as SplitButton } from "./library/split-button.vue";
+export { default as TimerButton } from "./library/timer-button.vue";
+export { default as ToastBox } from "./library/toast-box.vue";
+
+// Helpers
+export { AdminConfig } from "@hashtagcms/helpers/admin-config";
+export * from "@hashtagcms/helpers/common"; // Exports Toast, Storage, Fetcher, etc.
+export { Dashboard } from "@hashtagcms/helpers/dashboard";
+export { EditorHelper, PageManager } from "@hashtagcms/helpers/editor";
+export { ErrorMessage } from "@hashtagcms/helpers/error-message-handler";
+export { default as MapAPI } from "@hashtagcms/helpers/map";
+export { default as Form } from "@hashtagcms/helpers/form";
+
+// Package Version
+export const VERSION = __VERSION__;

package/packages/components/src/info-boxes.vue

@@ -0,0 +1,68 @@
+<template>
+  <template v-for="(module, index) in allModules">
+    <div
+      v-if="hasAccess(module.id)"
+      class="col-auto hand"
+      @click="navigate(module)"
+      :title="module.name"
+    >
+      <info-box
+        :key="module.name + index"
+        :data-title="module.name"
+        :data-sub-title="module.sub_title"
+        :data-icon-css="module.icon_css"
+      >
+      </info-box>
+    </div>
+  </template>
+</template>
+
+<script>
+import AdminConfig from "@hashtagcms/helpers/admin-config";
+
+import InfoBox from "./library/info-box.vue";
+
+export default {
+  components: {
+    "info-box": InfoBox,
+  },
+  mounted() {
+    //console.log(this.modulesAllowed);
+    //
+  },
+  props: ["dataModules", "dataModulesAllowed", "dataIsAdmin"],
+  data() {
+    return {
+      modulesAllowed: this.dataModulesAllowed
+        ? JSON.parse(this.dataModulesAllowed)
+        : [],
+    };
+  },
+  computed: {
+    allModules() {
+      let modules =
+        typeof this.dataModules == "undefined"
+          ? []
+          : JSON.parse(this.dataModules);
+      return modules.child;
+    },
+  },
+  methods: {
+    navigate(current) {
+      window.location = AdminConfig.admin_path(current.controller_name);
+    },
+    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;
+    },
+  },
+};
+</script>

package/packages/components/src/info-popup.vue

@@ -0,0 +1,121 @@
+<template>
+  <modal-box ref="infoModal" data-show-footer="true">
+    <template #title>
+      <div style="text-transform: capitalize">{{ model }} Info</div>
+    </template>
+    <template #content>
+      <div class="row" style="max-height: 500px; overflow: scroll">
+        <table class="table table-striped">
+          <tbody>
+            <template v-for="(res, key) in resData">
+              <tr v-if="!shouldExclude(key)">
+                <td>
+                  {{ key }}
+                </td>
+                <td>
+                  <span v-if="key === 'id'" v-html="getValue(key, res)"></span>
+                  <span v-if="key !== 'id'" v-text="getValue(key, res)"></span>
+                </td>
+              </tr>
+            </template>
+            <tr v-if="errorMessage !== ''">
+              <td style="background-color: #fff; border: none">
+                <div class="text text-danger">
+                  {{ errorMessage }}
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </template>
+    <template #footer>
+      <button class="btn btn-outline-secondary" @click="close()">Close</button>
+    </template>
+  </modal-box>
+</template>
+
+<script>
+import AdminConfig from "@hashtagcms/helpers/admin-config";
+import { Toast, Loader } from "@hashtagcms/helpers/common";
+import ModalBox from "./library/modal-box.vue";
+import { EventBus } from "@hashtagcms/helpers/event-bus";
+
+export default {
+  components: {
+    "modal-box": ModalBox,
+  },
+  props: ["dataModel", "dataModuleRelations", "dataId"],
+  mounted() {
+    //console.log('Component mounted...')
+  },
+  data() {
+    return {
+      model:
+        typeof this.dataModel === "undefined" || this.dataModel === ""
+          ? null
+          : this.dataModel,
+      relation:
+        typeof this.dataModuleRelations === "undefined" ||
+        this.dataModuleRelations === ""
+          ? ""
+          : this.dataModuleRelations,
+      id:
+        typeof this.dataId === "undefined" || this.dataId === ""
+          ? 0
+          : parseInt(this.dataId),
+      resData: [],
+      errorMessage: "",
+      isEditable: true,
+      excludeFields: [],
+    };
+  },
+  methods: {
+    shouldExclude(key) {
+      return this.excludeFields.indexOf(key) >= 0;
+    },
+    getValue(key, value) {
+      if (!this.isEditable) {
+        return value;
+      }
+      if (key === "id" && this.isEditable) {
+        let path = `edit/${value}`;
+        path = AdminConfig.admin_path(`${this.model}/${path}`);
+        return `<a href="${path}">${value}</a>`;
+      }
+      return value;
+    },
+    showInfo(model, id, excludeFields = [], isEditable = true) {
+      this.isEditable = isEditable.toString() === "true";
+      this.excludeFields = excludeFields;
+      this.model = model;
+      let $this = this;
+      Loader.show(this);
+      axios
+        .get(AdminConfig.get("base_path") + `/ajax/getInfo/${model}/${id}`)
+        .then(function (res) {
+          $this.errorMessage = "";
+          $this.resData = {};
+          $this.resData = res.data.results;
+          if (res.data.error === true) {
+            $this.errorMessage = res.data.message;
+          }
+          $this.open();
+          Loader.hide($this);
+        })
+        .catch(function (res) {
+          Toast.show($this, res.message);
+          Loader.hide($this);
+        });
+    },
+    open() {
+      this.$refs.infoModal.open();
+      EventBus.emit("info-popup-open");
+    },
+    close() {
+      this.$refs.infoModal.close();
+      EventBus.emit("info-popup-close");
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,80 @@
+<template>
+  <split-button
+    v-if="hasLanguage()"
+    :data-options="dataLanguages"
+    @change="setLanguage"
+    :data-parser="parseLang"
+    :data-selected="currentIndex"
+    data-btn-css="lang"
+    >English</split-button
+  >
+</template>
+
+<script>
+import AdminConfig from "@hashtagcms/helpers/admin-config";
+import SplitButton from "./library/split-button.vue";
+
+export default {
+  components: {
+    "split-button": SplitButton,
+  },
+  props: ["dataLanguages", "dataSelectedLanguage"],
+  mounted() {
+    //console.log(this.languages);
+  },
+  data() {
+    return {
+      languages:
+        typeof this.dataLanguages == "undefined"
+          ? null
+          : JSON.parse(this.dataLanguages),
+      currentLang:
+        typeof this.dataSelectedLanguage == "undefined"
+          ? 1
+          : parseInt(this.dataSelectedLanguage),
+    };
+  },
+  computed: {
+    currentIndex() {
+      if (this.languages != null) {
+        for (var i = 0; i < this.languages.length; i++) {
+          var item = this.languages[i];
+
+          if (item.id == this.currentLang) {
+            return i;
+          }
+        }
+      }
+      //console.log($this.currentLang);
+      return 0;
+    },
+  },
+  methods: {
+    hasLanguage() {
+      //has language greate than one
+      return this.languages != null && this.languages.length > 1;
+    },
+    parseLang: function (row) {
+      //console.log(row);
+      return { label: row.name, value: row.id };
+    },
+    setLanguage(data) {
+      //console.log("changed happend")
+
+      let ajaxController = AdminConfig.admin_path(
+        `ajax/setLanguage/${data.value}`,
+      );
+
+      axios
+        .get(ajaxController)
+        .then(function (response) {
+          //console.log(response);
+          window.location.reload();
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+    },
+  },
+};
+</script>

package/packages/components/src/language-copier.vue

@@ -0,0 +1,177 @@
+<template>
+  <div>
+    <div class="col-lg-6">
+      <form
+        id="addEditFrm"
+        method="post"
+        class="form-horizontal"
+        role="form"
+        v-on:submit.prevent="saveNow"
+        v-on:keyup="hideErrorMessage($event)"
+      >
+        <div>
+          <div class="mb-2">
+            <p>
+              <strong>Source Language:</strong> Data will be copied from the
+              selected lanuage
+            </p>
+            <select
+              required
+              name="sourceLang"
+              class="form-select"
+              v-model="form.sourceLang"
+              @change="hideErrorMessage($event)"
+            >
+              <option value="">Select</option>
+              <option v-for="language in languages" :value="language.id">
+                {{ language.name }} - {{ language.iso_code }}
+              </option>
+            </select>
+            <div class="text text-danger">{{ this.errors.sourceLang }}</div>
+          </div>
+        </div>
+        <div>
+          <div class="mb-2">
+            <p>
+              <strong>Target Language:</strong> New record will be inserted with
+              this language id in selected tables
+            </p>
+            <select
+              required
+              name="targetLang"
+              class="form-select"
+              v-model="form.targetLang"
+              @change="hideErrorMessage($event)"
+            >
+              <option value="">Select</option>
+              <option v-for="language in languages" :value="language.id">
+                {{ language.name }} - {{ language.iso_code }}
+              </option>
+            </select>
+            <div class="text text-danger">{{ this.errors.targetLang }}</div>
+          </div>
+        </div>
+
+        <div>
+          <div class="mb-2">
+            <p>Select tables</p>
+            <select
+              required
+              style="height: 200px"
+              name="tables"
+              class="form-select"
+              multiple
+              v-model="form.tables"
+              @change="hideErrorMessage($event)"
+            >
+              <option v-for="langTable in languageTables">
+                {{ langTable.name }}
+              </option>
+            </select>
+            <div class="text text-danger">{{ this.errors.tables }}</div>
+          </div>
+        </div>
+        <div class="row">
+          <div
+            class="alert alert-danger"
+            v-show="typeof errorMessage == 'string' && errorMessage != ''"
+          >
+            {{ errorMessage }}
+          </div>
+
+          <div v-for="message in messages" :class="getCss(message)">
+            {{ message.message }}
+          </div>
+
+          <div class="form-group center-align">
+            <input
+              type="submit"
+              name="submit"
+              value="Submit and Hold on"
+              class="btn btn-success btn-large"
+            />
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+import AdminConfig from "@hashtagcms/helpers/admin-config";
+
+import Form from "@hashtagcms/helpers/form";
+import { Toast } from "@hashtagcms/helpers/common";
+export default {
+  mounted() {},
+  props: ["dataLanguages", "dataLanguageTables"],
+  data() {
+    return {
+      languages:
+        this.dataLanguages && this.dataLanguages !== "null"
+          ? JSON.parse(this.dataLanguages)
+          : [],
+      languageTables:
+        this.dataLanguageTables && this.dataLanguageTables !== "null"
+          ? JSON.parse(this.dataLanguageTables)
+          : [],
+      messages: [],
+      form: new Form({
+        tables: [],
+        sourceLang: "",
+        targetLang: "",
+      }),
+      errors: {},
+      saveUrl: "language/translateNow",
+      errorMessage: "",
+    };
+  },
+  methods: {
+    getCss(row) {
+      return row.status === 0 ? "text text-danger" : "text text-success";
+    },
+    showError(res) {
+      //console.log("res");
+      //console.log(res);
+      for (let i in res.errors) {
+        if (res.errors.hasOwnProperty(i)) {
+          this.errors[i] = res.errors[i][0];
+        }
+      }
+
+      this.errorMessage = res.message;
+    },
+    hideErrorMessage(event) {
+      let name = event.target.getAttribute("name");
+      this.errors[name] = "";
+      if (this.errorMessage !== "") {
+        this.errorMessage = "";
+      }
+    },
+    onSuccess(response) {
+      console.log(response);
+      //console.log("response.isSaved ",response.isSaved);
+      if (response.isSaved === 0) {
+        Toast.show(this, response.message);
+        this.errorMessage = {};
+        this.errorMessage = response.message;
+      } else {
+        this.errorMessage = "";
+        //Toast.show(this, response.message, 5000);
+        this.messages = response.message;
+      }
+    },
+    saveNow() {
+      let $this = this;
+      let url = AdminConfig.admin_path(this.saveUrl);
+
+      this.form
+        .post(url)
+        .then((response) => this.onSuccess(response))
+        .catch((response) => this.showError(response));
+
+      return false;
+    },
+  },
+};
+</script>