aloha-vue 1.2.131 → 1.2.133

package/docs/src/views/PageTable/PageTableComplex/PageTableComplex.js

@@ -1,6 +1,7 @@
 import AlohaPage from "../../../global/components/AlohaPage/AlohaPage.vue";
 import ATranslation from "../../../../../src/ATranslation/ATranslation";
 import PageTableComplexExample from "./PageTableComplexExample/PageTableComplexExample.vue";
+import PageTableComplexSlotRowActions from "./PageTableComplexSlotRowActions/PageTableComplexSlotRowActions.vue";
 
 import PageTitleAPI from "./compositionAPI/PageTitleAPI";
 
@@ -10,6 +11,7 @@ export default {
     AlohaPage,
     ATranslation,
     PageTableComplexExample,
+    PageTableComplexSlotRowActions,
   },
   setup() {
     const {

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

@@ -11,3 +11,5 @@ aloha-page(
 
     page-table-complex-example
 
+    page-table-complex-slot-row-actions
+

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

@@ -36,6 +36,7 @@ aloha-example(
       @toggle-preview="togglePreview"
       @update-view="updateView"
       @update:model-columns-visible="changeModelColumnsVisible"
+      @update-model-is-table-without-scroll=""
       @init-table="initTable"
     )
       template(

package/docs/src/views/PageTable/PageTableComplex/PageTableComplexSlotRowActions/PageTableComplexSlotRowActions.js

@@ -0,0 +1,540 @@
+import AButton from "../../../../../../src/AButton/AButton";
+import AIcon from "../../../../../../src/AIcon/AIcon";
+import AlohaExample from "../../../../global/components/AlohaExample/AlohaExample.vue";
+import ASwitch from "../../../../../../src/ui/ASwitch/ASwitch";
+import ATable from "../../../../../../src/ATable/ATable";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+import {
+  cloneDeep,
+  times,
+} from "lodash-es";
+
+export default {
+  name: "PageTableComplexSlotRowActions",
+  components: {
+    AButton,
+    AIcon,
+    AlohaExample,
+    ASwitch,
+    ATable,
+  },
+  setup() {
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    return {
+      codeHtml,
+      codeJs,
+    };
+  },
+  data() {
+    return {
+      modelView: undefined,
+      modelLoading: false,
+      modelColumnsVisible: {
+        aloha: true,
+      },
+      modelColumnsOrdering: ["sdf", "ddsadsa", "aloha"],
+      columns: [
+        {
+          label: "_A_TABLE_COLUMN_1_",
+          id: "aloha",
+          keyLabel: "aloha",
+          sortId: "aloha",
+          locked: true,
+          grow: 2,
+          footerSlot: "footerAloha",
+          class: "a_text_right",
+          icon: "Close",
+          isRender: true,
+          title: "Aloha",
+        },
+        {
+          label: "_A_TABLE_COLUMN_2_",
+          id: "slot",
+          slot: "slot1",
+          title: "bbbbbbbbbb",
+          // hide: true,
+        },
+        {
+          label: "Alohafreidsfdsfdsfsdfdsfdsfdsfsd",
+          id: "number",
+          keyLabel: "number",
+          sortId: "number",
+          grow: 0,
+          footerKeyLabel: "number",
+          class: "a_justify_content_end",
+        },
+        {
+          label: "Hola",
+          id: "hola",
+          keyLabel: "hola",
+          sortId: "hola",
+          footerKeyLabel: "hola",
+        },
+        {
+          label: "Default",
+          id: "default",
+          keyLabel: "default",
+          defaultValue: "-",
+          footerKeyLabel: "default",
+          footerDefaultValue: "-",
+        },
+        {
+          label: "Hola2",
+          id: "hola2",
+          keyLabel: "hola",
+          sortId: "hola",
+          hide: true,
+          footerKeyLabel: "hola",
+        },
+        {
+          label: "Obj",
+          id: "obj",
+          keyLabel: "obj.aloha",
+          sortId: "obj.aloha",
+          slot: "get",
+          filter: "boolean",
+          footerKeyLabel: "obj.aloha",
+          width: 220,
+        },
+        {
+          label: "Test",
+          id: "test",
+          keyLabelSafeHtml: "test",
+          sortId: "test",
+          width: 200,
+        },
+        {
+          label: "Obj2",
+          id: "obj2",
+          keyLabel: "obj.aloha",
+          sortId: "obj.aloha",
+          footerKeyLabel: "obj.aloha",
+        },
+        {
+          label: "Obj3",
+          id: "obj3",
+          keyLabel: "obj.aloha",
+          footerKeyLabel: "obj.aloha",
+        },
+        {
+          label: "Obj4",
+          id: "obj4",
+          keyLabel: "obj.aloha",
+          footerKeyLabel: "obj.aloha",
+        },
+        {
+          label: "Geld",
+          id: "geld",
+          keyLabel: "geld",
+          footerKeyLabel: "geld",
+        },
+
+        {
+          label: "Slot2",
+          id: "slot2",
+          slot: "slot1",
+          hide: true,
+        },
+        {
+          label: "safeHtml",
+          id: "safeHtml",
+          keyLabelSafeHtml: "test",
+          sortId: "test",
+          width: 200,
+        },
+        {
+          label: "html",
+          id: "html",
+          keyLabelHtml: "test",
+          sortId: "test",
+          width: 200,
+        },
+      ],
+      rowsFooter: [
+        {
+          index: 1,
+        },
+        {
+          index: 2,
+        },
+      ],
+      data: [],
+      isLoadingOptions: false,
+      rowActions: [
+        {
+          type: "divider",
+        },
+        {
+          type: "divider",
+        },
+        {
+          type: "button",
+          text: "Click me",
+          title: "Click me title",
+          isHidden: false,
+          callback: this.clickMe,
+          class: "aloha a_dropdown__item",
+          disabled: false,
+          extraCallback: ({ row }) => ({
+            aloha: row.aloha,
+          }),
+        },
+        {
+          type: "divider",
+        },
+        {
+          type: "divider",
+        },
+        {
+          type: "divider",
+        },
+        {
+          type: "divider",
+        },
+        {
+          type: "button",
+          textCallback: ({ row, rowIndex }) => `${ rowIndex } Click ${ row.aloha }`,
+          titleCallback: ({ row, rowIndex }) => `${ rowIndex } Click ${ row.aloha } title`,
+          isHiddenCallback: ({ row, rowIndex }) => !!(rowIndex > 2 && row.aloha),
+          disabledCallback: ({ row, rowIndex }) => !(rowIndex > 2 && row.aloha),
+          callback: this.clickMe,
+        },
+        {
+          iconLeft: "Export",
+          type: "link",
+          hrefCallback: ({ row }) => `dokumente/${ row.number }/download/`,
+          text: "Dokument herunterladen",
+          target: "_blank",
+        },
+        {
+          type: "divider",
+        },
+        {
+          type: "divider",
+        },
+      ],
+      multipleActions: [
+        {
+          type: "divider",
+        },
+        {
+          type: "divider",
+        },
+        {
+          type: "button",
+          text: "Aloha1",
+          title: "Aloha1 Title",
+          isHidden: false,
+          callback: this.clickMe,
+          disabled: false,
+          icon: "Plus",
+          isConfirm: true,
+          isAllRowsSelected: true,
+        },
+        {
+          type: "divider",
+        },
+        {
+          type: "divider",
+        },
+        {
+          type: "divider",
+        },
+        {
+          type: "divider",
+        },
+        {
+          type: "button",
+          text: "Aloha1 modal",
+          title: "Aloha1 Title",
+          callback: this.clickMeModal,
+          disabled: false,
+          icon: "Plus",
+          isHidden: false,
+          isHiddenCallback: this.isHiddenMultiple,
+        },
+        {
+          type: "divider",
+        },
+        {
+          type: "divider",
+        },
+      ],
+      tableActions: [
+        {
+          text: "Aloha1",
+          title: "Aloha1 Title",
+          isHidden: false,
+          callback: this.clickMe,
+          type: "button",
+          classButton: "a_btn a_btn_primary",
+          iconLeft: "Plus",
+          id: "aloha_1"
+        },
+        {
+          type: "divider",
+        },
+        {
+          text: "Aloha2",
+          title: "Aloha2 Title",
+          callback: this.clickMe,
+          disabled: false,
+          classButton: "a_btn a_btn_secondary",
+          id: "aloha_2",
+          type: "button",
+        },
+        {
+          type: "divider",
+        },
+        {
+          text: "Aloha link to",
+          title: "Aloha link Title",
+          disabled: false,
+          classButton: "a_btn a_btn_secondary",
+          type: "link",
+          iconRight: "Plus",
+          to: "/spinner",
+        },
+        {
+          text: "Aloha link href",
+          title: "Aloha link Title",
+          disabled: false,
+          classButton: "a_btn a_btn_secondary",
+          type: "link",
+          href: "/spinner",
+          iconLeft: "Plus",
+        },
+        {
+          type: "divider",
+        },
+        {
+          text: "Aloha link Title",
+          disabled: false,
+          classButton: "a_btn a_btn_secondary",
+          type: "link",
+          href: "/spinner",
+          iconLeft: "Plus",
+        },
+      ],
+      modelQuickSearch: "",
+      modelFilters: {
+        group_switch: true,
+      },
+      views: [
+        {
+          id: "aloha1",
+          type: "table",
+          label: "Tabelle",
+          icon: "Table",
+          usePagination: true,
+        },
+        {
+          id: "aloha2",
+          type: "map",
+          label: "Karte",
+          icon: "GlobeEuropeAfrica",
+        },
+      ],
+      filters: [
+        {
+          type: "text",
+          id: "suche",
+          label: "Suche",
+          main: true,
+        },
+        {
+          type: "text",
+          id: "au_kbezbeobachter",
+          label: "Beobachter",
+        },
+        {
+          type: "switch",
+          id: "au_termin_sichtbar",
+          label: "Sichtbar",
+          alwaysVisible: true,
+        },
+        {
+          type: "date",
+          id: "datum",
+          label: "Datum",
+          alwaysVisible: true,
+        },
+        {
+          type: "oneCheckbox",
+          id: "au_ende",
+          label: "Bearbeitungsende",
+          alwaysVisible: true,
+        },
+        {
+          type: "group",
+          id: "group1",
+          label: "Group",
+          alwaysVisible: true,
+          classColumns: "a_d_flex a_flex_wrap",
+          children: [
+            {
+              type: "multiselect",
+              id: "dsdsfs",
+              classColumn: "a_flex_fill",
+              label: "Group",
+              labelClass: "a_sr_only",
+              data: [
+                {
+                  id: "1",
+                  bez: "Aloha 1",
+                },
+                {
+                  id: "2",
+                  bez: "Aloha 2",
+                },
+                {
+                  id: "3",
+                  bez: "Aloha 3",
+                },
+              ],
+              keyLabel: "bez",
+              keyId: "id",
+              search: true,
+              alwaysVisible: true,
+              slotName: "termin",
+            },
+            {
+              type: "switch",
+              label: "Group switch",
+              id: "group_switch",
+              classColumn: "a_ml_2",
+              labelClass: "a_sr_only",
+              hideFilterCenter: true,
+              trueLabel: "Eins",
+              falseLabel: "Alle",
+              title: "Alohadsfdsfdsf sdfsdfdsffds"
+            },
+          ],
+        },
+        {
+          type: "multiselect",
+          id: "terminberechnung",
+          label: "Termin",
+          data: [
+            {
+              id: "1",
+              bez: "Aloha 1",
+            },
+            {
+              id: "2",
+              bez: "Aloha 2",
+            },
+            {
+              id: "3",
+              bez: "Aloha 3",
+            },
+          ],
+          hasNotClose: true,
+          // url: "katalog/?fields=id&fields=bez&key=syterminberechnung",
+          keyLabel: "bez",
+          keyId: "id",
+          search: true,
+          alwaysVisible: true,
+          slotName: "termin",
+        },
+      ],
+    };
+  },
+  created() {
+    this.setData();
+    setTimeout(() => {
+      this.$refs.aloha.updateRow({ row: {
+        id: 1,
+        number: 1,
+        aloha: `test`,
+        hola: `hola test`,
+        geld: undefined,
+        obj: {
+          aloha: "dffdg",
+        },
+        test: "<div>aloha123</div>",
+      }, rowIndex: 1 });
+    }, 1000);
+  },
+  methods: {
+    changeColumnsOrdering({ modelColumnsOrdering }) {
+      this.modelColumnsOrdering = modelColumnsOrdering;
+      this.isLoadingOptions = true;
+      setTimeout(() => {
+        this.isLoadingOptions = false;
+      }, 1000);
+    },
+
+    setData() {
+      const DATA = [];
+      times(100, item => {
+        DATA.push({
+          id: item,
+          number: +item,
+          aloha: `aloha1111dfdsfdsfdsfaasasadadsadasdsadsa1111111${ item }`,
+          hola: `hola ${ item }`,
+          geld: `${ item } €`,
+          obj: {
+            aloha: `ertet ${ 100 - item }`,
+          },
+          test: "<div>aloha</div><div>aloha</div><div>aloha</div><div>aloha</div><div>aloha</div><div>aloha</div><div>aloha</div>",
+        });
+      });
+      this.data = DATA;
+    },
+
+    clickMe(arg) {
+      console.log("arg", arg);
+    },
+
+    clickMeModal({ rows, close }) {
+      console.log("rows", rows,);
+      setTimeout(() => {
+        close();
+      }, 5000);
+    },
+
+    updateModelFiltersLocal({ model }) {
+      console.log("modelFiltersLocal", model);
+      return model;
+    },
+
+    togglePreview({ row, rowIndex, typeToggle }) {
+      console.log("row: ", row);
+      console.log("rowIndex: ", rowIndex);
+      console.log("typeToggle: ", typeToggle);
+    },
+
+    isHiddenMultiple({ row }) {
+      return row.number % 2 === 0;
+    },
+
+    updateModelFilters({ _modelFilters } = {}) {
+      this.modelFilters = cloneDeep(_modelFilters);
+    },
+
+    updateView({ _modelView, view }) {
+      this.modelView = _modelView;
+      console.log("view", view);
+    },
+
+    changeModelColumnsVisible(model) {
+      this.modelColumnsVisible = model;
+    },
+
+    initTable({ columnsOrdering = {}, columnsVisible = {} } = {}) {
+      this.modelColumnsOrdering = columnsOrdering.model;
+      this.modelColumnsVisible = columnsVisible.model;
+    },
+  },
+};

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

@@ -0,0 +1,85 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_TABLE_GROUP_COMPLEX_HEADER_"
+  description="_A_TABLE_GROUP_COMPLEX_DESCRIPTION_"
+)
+  div
+    div
+      a-switch(
+        v-model="modelLoading"
+      )
+    a-table(
+      ref="aloha"
+      :column-actions-width="250"
+      :column-actions-width-min="150"
+      :columns="columns"
+      :data="data"
+      :is-loading-options="isLoadingOptions"
+      label="Example table"
+      :row-actions="rowActions"
+      :table-actions="tableActions"
+      :multiple-actions="multipleActions"
+      preview="right"
+      :is-quick-search="true"
+      :is-action-column-visible="true"
+      :is-columns-dnd="true"
+      :pagination="{ use: true }"
+      :is-loading-table="modelLoading"
+      :is-loading-multiple-actions="false"
+      :model-is-table-without-scroll-start="true"
+      v-model:modelQuickSearch="modelQuickSearch"
+      :model-columns-ordering="modelColumnsOrdering"
+      :model-columns-visible="modelColumnsVisible"
+      @change-columns-ordering="changeColumnsOrdering"
+      @toggle-preview="togglePreview"
+      @update:model-columns-visible="changeModelColumnsVisible"
+      @update-model-is-table-without-scroll=""
+      @init-table="initTable"
+    )
+      template(
+        v-slot:rowActions="{ row }"
+      )
+        .a_btn_group(
+          role="group"
+        )
+          a-button.a_btn.a_btn_primary(
+            icon-left="Pencil"
+          )
+          a-button.a_btn.a_btn_secondary(
+            icon-left="Trash"
+          )
+
+      template(
+        v-slot:slot1="vm"
+      )
+        router-link(
+          :to="{ name: 'PageTabs' }"
+        ) Tabs
+
+      template(
+        v-slot:preview="vm"
+      )
+        pre {{ vm }}
+
+      template(
+        v-slot:tableActions
+      )
+        button.a_btn.a_btn_primary Click me
+
+
+      template(
+        v-slot:termin="{ label, labelFiltered }"
+      )
+        a-icon.a_mr_1(
+          icon="Cog"
+        )
+        span(
+          v-if="labelFiltered"
+          v-html="labelFiltered"
+        )
+        span(
+          v-else
+          v-html="label"
+        )
+

package/docs/src/views/PageTable/PageTableComplex/PageTableComplexSlotRowActions/PageTableComplexSlotRowActions.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageTableComplexSlotRowActions.pug"></template>
+<script src="./PageTableComplexSlotRowActions.js"></script>

package/docs/src/views/PageTable/PageTableComplex/PageTableComplexSlotRowActions/compositionAPI/HtmlAPI.js

@@ -0,0 +1,40 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-table
+  ref="aloha"
+  :columns="columns"
+  :data="data"
+  :is-loading-options="isLoadingOptions"
+  label="Example table"
+  :row-actions="rowActions"
+  :table-actions="tableActions"
+  :multiple-actions="multipleActions"
+  preview="right"
+  :is-quick-search="true"
+  :is-action-column-visible="true"
+  :is-columns-dnd="true"
+  :pagination="{ use: true, limitsPerPage: ['10', '25', '50', '100', '500'] }"
+  :is-pagination="true"
+  :filter="{ filters }"
+  :rows-footer="rowsFooter"
+  :is-loading-table="false"
+  :is-loading-multiple-actions="false"
+  :views="views"
+  :model-view="modelView"
+  v-model:modelQuickSearch="modelQuickSearch"
+  :modelFilters="modelFilters"
+  :model-columns-ordering="modelColumnsOrdering"
+  :model-columns-visible="modelColumnsVisible"
+  @change-columns-ordering="changeColumnsOrdering"
+  :update-model-filters-local="updateModelFiltersLocal"
+  @toggle-preview="togglePreview"
+  @update-model-filters="updateModelFilters"
+  @update-view="updateView"
+  @update:model-columns-visible="changeModelColumnsVisible"
+  @init-table="initTable"
+>
+</a-table>`;
+
+  return {
+    codeHtml,
+  };
+}