Merge pull request #48 from anexia-it/release-v1.20.7

v1.20.7 master

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anexia/vue-ui-components",
-  "version": "1.20.6",
+  "version": "1.20.7",
   "description": "A Vue component library containing several components, plugins and icons that match the Anexia Corporate Design guidelines",
   "author": "ANEXIA Internetdienstleistungs Gmbh <[email protected]> (https://anexia.com)",
   "license": "MIT",

src/components/AnxCrudTable/AnxCrudTable.spec.ts

@@ -58,9 +58,9 @@ const mockData = [
   {
     userId: 1,
     id: 8,
-    title: "dolorem dolore est ipsam",
+    title: "searchtext_anx in title",
     body:
-      "dignissimos aperiam dolorem qui eum\nfacilis quibusdam animi sint suscipit qui sint possimus cum\nquaerat magni maiores excepturi\nipsam ut commodi dolor voluptatum modi aut vitae"
+      "searchtext_anx in body\ndignissimos aperiam dolorem qui eum\nfacilis quibusdam animi sint suscipit qui sint possimus cum\nquaerat magni maiores excepturi\nipsam ut commodi dolor voluptatum modi aut vitae"
   },
   {
     userId: 1,
@@ -360,4 +360,53 @@ describe("AnxCrudTable.vue", () => {
       `Unknown search column ${searchColumns[0]}! Check if you are using the property properly.`
     );
   });
+
+  it("displays search result only once when found in several columns", async () => {
+    const modelClass = Posts;
+    const wrapper = mount(AnxCrudTable, {
+      propsData: { modelClass, searchColumns: ["title", "body"] }
+    });
+
+    // Data is loaded asynchronously, so we have to flush promises
+    await flushPromises();
+
+    const searchInput = wrapper.get(".anx-crud-header .crud-search input");
+    expect(searchInput.exists()).toBeTruthy();
+    await searchInput.setValue("searchtext_anx");
+    await searchInput.trigger("input");
+
+    // Check if the correct table row is displayed
+    const tableRow = wrapper.get(".anx-table-row");
+    expect(tableRow.exists()).toBeTruthy();
+    expect(tableRow.text()).toContain(mockData[7].title);
+    expect(tableRow.text()).toContain(mockData[7].body);
+
+    // Check if there is only one table row displayed
+    const rows = wrapper.findAll(".anx-table-row");
+    expect(rows).toHaveLength(1);
+  });
+
+  it("changes pagination on search", async () => {
+    const maxItems = 2;
+    const expectedPages = Math.ceil(mockData.length / maxItems);
+
+    const modelClass = Posts;
+    const wrapper = mount(AnxCrudTable, {
+      propsData: { modelClass, searchColumns: ["title", "body"], maxItems }
+    });
+
+    // Data is loaded asynchronously, so we have to flush promises
+    await flushPromises();
+
+    // Check page switch text
+    const pageSwitch = wrapper.get(".anx-crud-table .page-switch");
+    expect(pageSwitch.exists()).toBeTruthy();
+    expect(pageSwitch.text()).toContain("1 of " + expectedPages);
+
+    // Search for something and page switch should change
+    const searchInput = wrapper.get(".anx-crud-header .crud-search input");
+    await searchInput.setValue("searchtext_anx");
+    await searchInput.trigger("input");
+    expect(pageSwitch.text()).toContain("1 of 1");
+  });
 });

src/components/AnxCrudTable/AnxCrudTable.vue

@@ -93,29 +93,12 @@
         <span class="page-switch-link fast-forward" @click="page = 0"
           >&laquo;</span
         >
-        <span
-          class="page-switch-link backward"
-          @click="
-            () => {
-              if (page > 0) page--;
-            }
-          "
-          >&lt;</span
-        >
-        Page {{ Math.ceil(page) + 1 }} of
-        {{ Math.ceil(sortedInstances.length / maxItems) }}
-        <span
-          class="page-switch-link forward"
-          @click="
-            () => {
-              if (page < sortedInstances.length / maxItems - 1) page++;
-            }
-          "
-          >&gt;</span
-        >
+        <span class="page-switch-link backward" @click="page--">&lt;</span>
+        Page {{ page + 1 }} of {{ numberPages }}
+        <span class="page-switch-link forward" @click="page++">&gt;</span>
         <span
           class="page-switch-link fast-forward"
-          @click="page = sortedInstances.length / maxItems - 1"
+          @click="page = numberPages - 1"
           >&raquo;</span
         >
       </div>
@@ -262,9 +245,40 @@ export default class AnxCrudTable extends Vue {
     name: number;
     order: string;
   } = { name: 0, order: "ASC" };
-  page = 0;
+
   searchValue = "";
 
+  /** Number of pages should be at least 1 (even if there are no entries: "Page 1 of 1") */
+  private get numberPages() {
+    const num = Math.ceil(this.sortedInstances.length / this.maxItems);
+    if (num <= 0) {
+      return 1;
+    } else {
+      return num;
+    }
+  }
+
+  /** _page cannot be used as name for internal page */
+  page_ = 0;
+  private get page(): number {
+    if (this.page_ < this.numberPages) {
+      return this.page_;
+    } else {
+      this.page = this.numberPages - 1;
+      return this.page_;
+    }
+  }
+
+  private set page(page: number) {
+    if (page < 0 || this.numberPages <= 0) {
+      this.page_ = 0;
+    } else if (page >= this.numberPages && this.numberPages > 0) {
+      this.page_ = this.numberPages - 1;
+    } else {
+      this.page_ = page;
+    }
+  }
+
   mounted() {
     this.fetch();
 
@@ -358,18 +372,19 @@ export default class AnxCrudTable extends Vue {
     const instances: AbstractModel[] = [];
     this.instances.forEach((instance: AbstractModel) => {
       if (this.searchColumns) {
-        this.searchColumns.forEach((column: string) => {
-          if (column in instance) {
+        for (let i = 0; i < this.searchColumns.length; i++) {
+          if (this.searchColumns[i] in instance) {
             if (
               // eslint-disable-next-line
-              (instance as any)[column]
+              (instance as any)[this.searchColumns[i]]
                 .toLowerCase()
                 .indexOf(this.searchValue.toLowerCase()) >= 0
             ) {
               instances.push(instance);
+              break;
             }
           }
-        });
+        }
       }
     });
 

src/components/AnxModal/AnxModal.vue

@@ -78,7 +78,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from "vue-property-decorator";
+import { Component, Prop, Vue } from "vue-property-decorator";
 import AnxButton from "../AnxButton/AnxButton.vue";
 
 /**
@@ -107,7 +107,7 @@ export default class AnxModal extends Vue {
    */
   @Prop({ default: "center" }) closeButtonAlign!: string;
 
-  /** Show confirmation modal. A 'close' or a 'confirm' event will be emited, depending on the user input */
+  /** Show confirmation modal. A 'close' or a 'confirm' event will be emitted, depending on the user input */
   @Prop({ default: null }) confirm!: boolean | null;
 
   /** If the confirm option is true, this is the text for the confirm button */
@@ -126,7 +126,7 @@ export default class AnxModal extends Vue {
   /** This is the number of currently opened modals */
   private static numberModalsOpened = 0;
 
-  /** This is the layer of our modal (neccessary for displaying modals inside of modals) */
+  /** This is the layer of our modal (necessary for displaying modals inside of modals) */
   private modalLayer = 0;
 
   /** Add event listeners for click event on mount */
@@ -242,19 +242,24 @@ export default class AnxModal extends Vue {
   }
 
   .anx-modal-content {
+    display: flex;
+    flex-direction: column;
     background-color: $anx-primary-white;
     position: relative;
     border-radius: 0px;
     border: none !important;
+    max-height: 90vh;
+
     .anx-modal-header {
-      border-radius: 0px;
+      border-radius: 0;
       color: $anx-primary-white;
     }
     .anx-modal-body {
-      border-radius: 0px;
+      border-radius: 0;
+      overflow-y: auto;
     }
     .anx-modal-footer {
-      border-radius: 0px;
+      border-radius: 0;
 
       /**
        * Show buttons below each other on mobile
@@ -272,13 +277,13 @@ export default class AnxModal extends Vue {
           margin: 0 0 20px 0 !important;
 
           &:last-child {
-            margin-bottom: 0px !important;
+            margin-bottom: 0 !important;
           }
         }
       }
 
       .button {
-        margin-right: 0px !important;
+        margin-right: 0 !important;
 
         &.center {
           margin: auto !important;
@@ -296,7 +301,7 @@ export default class AnxModal extends Vue {
     background-color: $anx-primary-color;
     padding: 25px 40px 15px 40px;
     height: 94px;
-    border-bottom: 0px;
+    border-bottom: 0;
     display: block;
     text-align: left;
 
@@ -316,7 +321,7 @@ export default class AnxModal extends Vue {
       color: #fff;
       text-shadow: none;
       opacity: 1;
-      font-weight: ligther;
+      font-weight: lighter;
       max-width: 1px;
       font-size: medium;
       right: 0;
@@ -366,8 +371,7 @@ export default class AnxModal extends Vue {
   }
 
   .modal-body {
-    margin: 40px;
-    padding: 0 !important;
+    padding: 40px 40px 0 40px;
     text-align: center;
 
     @media screen and (max-width: 500px) {
@@ -377,7 +381,7 @@ export default class AnxModal extends Vue {
 
   .modal-footer {
     border: none;
-    padding: 0 2.5rem 2.5rem 2.5rem;
+    padding: 2.5rem 2.5rem 2.5rem 2.5rem;
     display: flex;
 
     &.footer-content-left {

src/lib/utils/AttributesHelper.ts

@@ -20,27 +20,35 @@ export class AttributesHelper {
    *   - uniqueIdPrefix: The prefix for the unique id
    */
   static attributes(
-    instance: {
-      id?: string | null;
-      name?: string | null;
-    },
+    instance: Vue,
     options?: { uniqueId?: boolean; uniqueIdPrefix?: string }
   ): { id?: string; name?: string } {
     const attributes: { id?: string; name?: string } = {};
 
-    /** Check if id is set */
-    if ("id" in instance && instance.id && instance.id !== "") {
-      attributes.id = instance.id;
-    } else if (options && options.uniqueId === true) {
-      /** Assign a unique id based on the counter */
-      attributes.id = AttributesHelper.getUniqueId({
-        prefix: options.uniqueIdPrefix
-      });
-    }
+    if (
+      instance &&
+      "$options" in instance &&
+      "propsData" in instance.$options
+    ) {
+      const properties = instance.$options.propsData as {
+        id?: string;
+        name?: string;
+      };
+
+      /** Check if id is set */
+      if ("id" in properties && properties.id && properties.id !== "") {
+        attributes.id = properties.id;
+      } else if (options && options.uniqueId === true) {
+        /** Assign a unique id based on the counter */
+        attributes.id = AttributesHelper.getUniqueId({
+          prefix: options.uniqueIdPrefix
+        });
+      }
 
-    /** Check if the name is set */
-    if ("name" in instance && instance.name && instance.name !== "") {
-      attributes.name = instance.name;
+      /** Check if the name is set */
+      if ("name" in properties && properties.name && properties.name !== "") {
+        attributes.name = properties.name;
+      }
     }
 
     return attributes;