aloha-vue 1.0.26 → 1.0.29

package/docs/src/main.js

@@ -2,7 +2,7 @@ import App from "./App/App.vue";
 import { createApp } from "vue";
 import store from "./store/index";
 import router from "./router/index";
-import i18nPlugin from "../../src/plugins/i18nPlugin";
+import AI18nPlugin from "../../src/plugins/AI18nPlugin";
 // import alohaPlugin from "../src/plugins/alohaPlugin";
 import AIconPlugin from "../../src/plugins/AIconPlugin";
 
@@ -23,7 +23,7 @@ const TRANSLATIONS = {
   hr: { ...hrGlobal, ...hr },
   ru: { ...ruGlobal, ...ru },
 };
-APP.use(i18nPlugin, TRANSLATIONS, "de");
+APP.use(AI18nPlugin, TRANSLATIONS, "de");
 APP.use(AIconPlugin, {
   Plus2: `<svg
     xmlns="http://www.w3.org/2000/svg"

package/docs/src/views/PageTable/PageTable.pug

@@ -9,6 +9,9 @@ div
     :table-actions="tableActions"
     preview="right"
     :is-quick-search="true"
+    :is-action-column-visible="true"
+    :is-columns-dnd="true"
+    :is-pagination="true"
     v-model:modelQuickSearch="modelQuickSearch"
     @change-columns-ordering="changeColumnsOrdering"
   )

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.26",
+  "version": "1.0.29",
   "author": "Ilia Brykin",
   "dependencies": {
     "@popperjs/core": "2.11.5",
-    "aloha-css": "1.0.29",
+    "aloha-css": "1.0.35",
+    "axios": "^0.27.2",
     "lodash-es": "^4.17.21",
     "vue": "3.2.37"
   }

package/src/APageTabTitle/APageTabTitle.js

@@ -0,0 +1,24 @@
+import {
+  toRef,
+} from "vue";
+
+import APageTabTitleAPI from "../compositionAPI/APageTabTitleAPI";
+
+// @vue/component
+export default {
+  name: "APageTabTitle",
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    APageTabTitleAPI({
+      title: toRef(props, "title"),
+    });
+  },
+  render() {
+    return "";
+  },
+};

package/src/ATable/ATable.js

@@ -141,6 +141,11 @@ export default {
       required: false,
       default: () => [],
     },
+    isPagination: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     isPaginationOutside: {
       type: Boolean,
       required: false,
@@ -174,6 +179,16 @@ export default {
       required: false,
       default: "",
     },
+    isActionColumnVisible: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    isColumnsDnd: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   emits: [
     "update:modelColumnsOrder",
@@ -195,6 +210,8 @@ export default {
       columns: computed(() => this.columns),
       columnActionsWidthLocal: computed(() => this.columnActionsWidth),
       columnWidthDefault: computed(() => this.columnWidthDefault),
+      isActionColumnVisible: computed(() => this.isActionColumnVisible),
+      isColumnsDnd: computed(() => this.isColumnsDnd),
       isLoadingOptions: computed(() => this.isLoadingOptions),
       isLoadingTable: computed(() => this.isLoadingTable),
       rowActions: computed(() => this.rowActions),
@@ -305,7 +322,7 @@ export default {
     },
 
     dataPaginated() {
-      if (this.limit && !this.isPaginationOutside) {
+      if (this.limit && !this.isPaginationOutside && this.isPagination) {
         const DATA_SORTED = cloneDeep(this.dataSorted);
         const INDEX_START = this.offset;
         const INDEX_END = INDEX_START + this.limit;
@@ -498,7 +515,7 @@ export default {
       !this.hasRows && h("div", {
         class: "a_table__empty_text",
       }, "Keine Einträge vorhanden."),
-      h("div", {
+      this.isPagination && h("div", {
         class: "a_pagination__parent"
       }, [
         h(ATableCountProPage, {

package/src/ATable/ATableHeader/ATableHeader.js

@@ -20,6 +20,7 @@ export default {
     },
   },
   inject: [
+    "isActionColumnVisible",
     "changeColumnsOrdering",
     "columnsOrdered",
   ],
@@ -72,7 +73,7 @@ export default {
             onDragendParent: this.dragend,
           });
         }),
-        h(ATableHeaderThAction),
+        this.isActionColumnVisible && h(ATableHeaderThAction),
       ]),
     ]);
   },

package/src/ATable/ATableHeaderTh/ATableHeaderTh.js

@@ -36,6 +36,7 @@ export default {
   ],
   inject: [
     "changeModelSort",
+    "isColumnsDnd",
     "isLoadingOptions",
     "isLoadingTable",
     "modelColumnsVisibleMapping",
@@ -77,8 +78,9 @@ export default {
     classForTh() {
       return [
         "a_table__th a_table__cell",
+        this.column.class,
         {
-          a_table__th_draggable: !this.isLocked && !this.isLoadingOptions,
+          a_table__th_draggable: !this.isLocked && !this.isLoadingOptions && this.isColumnsDnd,
           a_table__th_sorting: this.isSorting,
         }
       ];

package/src/ATable/ATableHeaderThAction/ATableHeaderThActionItem.js

@@ -45,6 +45,7 @@ export default {
     "changeColumnsOrdering",
     "changeModelColumnsVisible",
     "columnsOrdered",
+    "isColumnsDnd",
     "isLoadingOptions",
     "isLoadingTable",
     "modelColumnsVisibleLocal",
@@ -118,7 +119,7 @@ export default {
     },
 
     arrowButtons() {
-      if (!this.isLocked) {
+      if (!this.isLocked && this.isColumnsDnd) {
         return [
           this.isButtonArrowUpVisible && h("button", {
             id: this.idButtonArrowUp,
@@ -246,7 +247,7 @@ export default {
           }),
           ...this.arrowButtons,
         ]),
-        !this.isLocked && h(AIcon, {
+        (!this.isLocked && this.isColumnsDnd) && h(AIcon, {
           icon: "Dnd",
           class: "a_table__th__dropdown_item__icon_dnd"
         }),

package/src/ATable/ATableTd/ATableTd.js

@@ -64,9 +64,13 @@ export default {
     attributesForTd() {
       const ATTRIBUTES = {
         role: "cell",
-        class: ["a_table__td a_table__cell", {
-          a_table__cell_click: this.hasPreview,
-        }],
+        class: [
+          "a_table__td a_table__cell",
+          this.column.class,
+          {
+            a_table__cell_click: this.hasPreview,
+          },
+        ],
         style: this.columnsStyles,
       };
       if (this.hasPreview) {

package/src/ATable/ATableTr/ATableTr.js

@@ -24,6 +24,7 @@ export default {
   inject: [
     "columnsOrdered",
     "hasPreview",
+    "isActionColumnVisible",
     "previewRightRowIndex",
     "previewRightRowIndexLast",
     "tableId",
@@ -71,7 +72,7 @@ export default {
           rowIndex: this.rowIndex,
         }, this.$slots);
       }),
-      h(ATableTdAction, {
+      this.isActionColumnVisible && h(ATableTdAction, {
         row: this.row,
         rowIndex: this.rowIndex,
       }, this.$slots),

package/src/ATable/compositionAPI/DragAndDropChildAPI.js

@@ -10,6 +10,7 @@ export default function DragAndDropChildAPI(props, { emit }, { classOver = "" })
   const columnIndex = toRef(props, "columnIndex");
 
   const isLoadingOptions = inject("isLoadingOptions");
+  const isColumnsDnd = inject("isColumnsDnd");
 
   const root = ref(null);
 
@@ -60,7 +61,7 @@ export default function DragAndDropChildAPI(props, { emit }, { classOver = "" })
     const ATTRIBUTES = {
       ref: "root",
     };
-    if (!isLocked.value) {
+    if (!isLocked.value && isColumnsDnd.value) {
       ATTRIBUTES.draggable = !isLoadingOptions.value;
       ATTRIBUTES.onDragstart = dragstart;
       ATTRIBUTES.onDragend = dragend;

package/src/compositionAPI/AHttpAPI.js

@@ -0,0 +1,363 @@
+import {
+  ref,
+} from "vue";
+
+import axios from "axios";
+import {
+  forEach,
+  isArray,
+  isFunction,
+  isNil,
+  isPlainObject,
+  keyBy,
+} from "lodash-es";
+
+
+const BASE_URL = ref("/api/");
+const API = ref(axios.create());
+const API_SAVED = ref({});
+const ERROR_CALLBACKS = ref({});
+
+export function create({ axiosCreateOptions = {} }) {
+  API.value = axios.create(axiosCreateOptions);
+}
+
+export function setBaseUrl({ baseUrl = "" }) {
+  BASE_URL.value = baseUrl;
+}
+
+export function setErrorCallbacks({ errorCallbacks = {} }) {
+  ERROR_CALLBACKS.value = errorCallbacks;
+}
+
+export default function AHttpAPI() {
+  const checkErrorStatus = ({ error, showError, client, resolve, reject }) => {
+    if (!error) {
+      return true;
+    }
+    const ERROR_CALLBACK = () => {
+      const CALLBACK = ERROR_CALLBACKS[error.status];
+      if (isFunction(CALLBACK)) {
+        return CALLBACK({ error, showError, client, resolve, reject });
+      }
+    };
+
+    ERROR_CALLBACK();
+    // Let the promise handle the error
+    return true;
+  };
+
+  const callHttpRequestAndCheckSavedApi = ({
+    methodHttp,
+    url,
+    urlParams,
+    data,
+    headerParams,
+    responseType = "json",
+    apiSaveId,
+    keyId,
+    fullResponse,
+    showError = false,
+    expectedList
+  }) => {
+    let apiSavedData = undefined;
+    if (apiSaveId) {
+      apiSavedData = API_SAVED.value[apiSaveId];
+      if (apiSavedData) {
+        if (apiSavedData.loading) {
+          return apiSavedData.promise;
+        }
+      }
+    }
+
+    const PROMISE = new Promise((resolve, reject) => {
+      if (apiSavedData) {
+        if (!apiSavedData.loading) {
+          if (keyId) {
+            if (apiSavedData.keyData) {
+              return resolve(apiSavedData.keyData);
+            }
+            const KEY_DATA = setKeyData({ data: apiSavedData.data, keyId });
+            API_SAVED.value[apiSaveId].keyData = KEY_DATA;
+            return resolve(KEY_DATA);
+          }
+          return resolve(apiSavedData.data);
+        }
+      }
+      const URL_NEW = setUrlWithParams({ url, params: urlParams });
+      let url_full = `${ BASE_URL.value }${ URL_NEW }`;
+      url_full = url_full.replace(/\/\//g, "/");
+      API.value({
+        method: methodHttp,
+        url: url_full,
+        data,
+        headers: headerParams,
+        responseType,
+      }).then(
+        response => {
+          if (fullResponse) {
+            return resolve(response);
+          }
+          const DATA = checkedExpectedList({ expectedList, response });
+          const KEY_DATA = setKeyData({ data: DATA, keyId });
+          if (apiSaveId) {
+            API_SAVED.value[apiSaveId].data = DATA;
+            API_SAVED.value[apiSaveId].keyData = KEY_DATA;
+            API_SAVED.value[apiSaveId].loading = false;
+          }
+          if (keyId) {
+            return resolve(KEY_DATA);
+          }
+          return resolve(DATA);
+        },
+        error => {
+          if (checkErrorStatus({ error: error.response, showError, client: API, reject, resolve })) {
+            return reject(error.response);
+          }
+        }
+      );
+    });
+
+    if (!apiSavedData) {
+      API_SAVED.value[apiSaveId] = API_SAVED.value[apiSaveId] || {};
+      API_SAVED.value[apiSaveId].loading = true;
+      API_SAVED.value[apiSaveId].promise = PROMISE;
+    }
+
+    return PROMISE;
+  };
+
+  function getHttp({
+    url,
+    data,
+    urlParams = {},
+    headerParams,
+    responseType,
+    apiSaveId,
+    keyId,
+    fullResponse,
+    showError,
+  }) {
+    return callHttpRequestAndCheckSavedApi({
+      methodHttp: "get",
+      url,
+      urlParams,
+      data,
+      headerParams,
+      responseType,
+      apiSaveId,
+      keyId,
+      fullResponse,
+      showError,
+    });
+  }
+
+  function getListHttp({
+    url,
+    data,
+    urlParams = {},
+    headerParams,
+    responseType,
+    apiSaveId,
+    keyId,
+    fullResponse,
+    showError,
+  }) {
+    return callHttpRequestAndCheckSavedApi({
+      methodHttp: "get",
+      url,
+      urlParams,
+      data,
+      headerParams,
+      responseType,
+      apiSaveId,
+      keyId,
+      fullResponse,
+      showError,
+      expectedList: true,
+    });
+  }
+
+  function getOptionsHttp({
+    url,
+    data,
+    urlParams = {},
+    headerParams,
+    responseType,
+    keyId,
+    fullResponse,
+    showError,
+  }) {
+    return callHttpRequestAndCheckSavedApi({
+      methodHttp: "options",
+      url,
+      urlParams,
+      data,
+      headerParams,
+      responseType,
+      keyId,
+      fullResponse,
+      showError,
+    });
+  }
+
+  function postHttp({
+    url,
+    data,
+    urlParams = {},
+    headerParams,
+    responseType,
+    fullResponse,
+    showError,
+  }) {
+    return callHttpRequestAndCheckSavedApi({
+      methodHttp: "post",
+      url,
+      urlParams,
+      data,
+      headerParams,
+      responseType,
+      fullResponse,
+      showError,
+    });
+  }
+
+  function putHttp({
+    url,
+    data,
+    urlParams = {},
+    headerParams,
+    responseType,
+    fullResponse,
+    showError,
+  }) {
+    return callHttpRequestAndCheckSavedApi({
+      methodHttp: "put",
+      url,
+      urlParams,
+      data,
+      headerParams,
+      responseType,
+      fullResponse,
+      showError,
+    });
+  }
+
+  function patchHttp({
+    url,
+    data,
+    urlParams = {},
+    headerParams,
+    responseType,
+    fullResponse,
+    showError,
+  }) {
+    return callHttpRequestAndCheckSavedApi({
+      methodHttp: "patch",
+      url,
+      urlParams,
+      data,
+      headerParams,
+      responseType,
+      fullResponse,
+      showError,
+    });
+  }
+
+  function deleteHttp({
+    url,
+    data,
+    urlParams = {},
+    headerParams,
+    responseType,
+    fullResponse,
+    showError,
+  }) {
+    return callHttpRequestAndCheckSavedApi({
+      methodHttp: "delete",
+      url,
+      urlParams,
+      data,
+      headerParams,
+      responseType,
+      fullResponse,
+      showError,
+    });
+  }
+
+  return {
+    deleteHttp,
+    getHttp,
+    getListHttp,
+    getOptionsHttp,
+    patchHttp,
+    postHttp,
+    putHttp,
+  };
+}
+
+export function setUrlWithParams({ url, params }) {
+  const URL = url || "";
+  let urlParams = "";
+  forEach(params, (value, key) => {
+    if (isArray(value)) {
+      urlParams = setUrlForArray({ id: key, array: value, url: urlParams });
+    } else if (isPlainObject(value)) {
+      forEach(value, (v, k) => {
+        if (v) {
+          if (urlParams) {
+            urlParams += "&";
+          }
+          urlParams += `${ k }=${ v }`;
+        }
+      });
+    } else if (!isNil(value)) {
+      if (urlParams) {
+        urlParams += "&";
+      }
+      urlParams += `${ key }=${ value }`;
+    }
+  });
+  const prefix = urlParams && URL ? URL.indexOf("?") === -1 ? "?" : "&" : "";
+
+  return `${ URL }${ prefix }${ urlParams }`;
+}
+
+export function setUrlForArray({ array, url, id }) {
+  if (!array.length) {
+    return url;
+  }
+  let URL = url || "";
+  if (id === "fields") {
+    if (URL) {
+      URL += "&";
+    }
+    URL += `${ id }=`;
+    URL += array.join(",");
+  } else {
+    forEach(array, v => {
+      if (URL) {
+        URL += "&";
+      }
+      URL += `${ id }=${ v }`;
+    });
+  }
+  return URL;
+}
+
+function setKeyData({ data, keyId }) {
+  if (!keyId) {
+    return undefined;
+  }
+  return keyBy(data, keyId);
+}
+
+function checkedExpectedList({ expectedList, response }) {
+  if (expectedList) {
+    if (isArray(response.data)) {
+      return response.data;
+    }
+    return response.data.results ? response.data.results : [];
+  }
+  return response.data;
+}

package/src/compositionAPI/APageTabTitleAPI.js

@@ -0,0 +1,27 @@
+import {
+  ref, watch,
+} from "vue";
+
+const BASE_TITLE = ref("");
+
+export default function APageTabTitleAPI({
+  title = ref(""),
+}) {
+  const setPageTabTitle = () => {
+    let pageTitle = BASE_TITLE.value;
+    if (title.value) {
+      pageTitle = `${ title.value } - ${ pageTitle }`;
+    }
+    document.title = pageTitle;
+  };
+
+  setPageTabTitle();
+
+  watch(title, () => {
+    setPageTabTitle();
+  });
+}
+
+export function setBaseTitle({ baseTitle = "" }) {
+  BASE_TITLE.value = baseTitle;
+}

package/src/plugins/AHttpPlugin.js

@@ -0,0 +1,12 @@
+import {
+  create,
+  setBaseUrl, setErrorCallbacks,
+} from "../compositionAPI/AHttpAPI";
+
+export default {
+  install: (app, { axiosCreateOptions = {}, baseUrl = "/api/", errorCallbacks = {} } = {}) => {
+    create({ axiosCreateOptions });
+    setBaseUrl({ baseUrl });
+    setErrorCallbacks({ errorCallbacks });
+  },
+};

package/src/plugins/APageTabTitlePlugin.js

@@ -0,0 +1,9 @@
+import {
+  setBaseTitle,
+} from "../compositionAPI/APageTabTitleAPI";
+
+export default {
+  install: (app, baseTitle = "") => {
+    setBaseTitle({ baseTitle });
+  },
+};

package/src/styles/components/ATable.scss

@@ -171,6 +171,7 @@
 .a_table__top_panel__label {
   font-weight: bolder;
   display: inline-block;
+  font-size: 2rem;
 }
 .a_table__top_panel__label__count {
   padding-left: var(--a_table_between_actions_margin);