select and query send

package.json

@@ -40,7 +40,7 @@
     "lodash.isequal": "^4.5.0",
     "nprogress": "^0.2.0",
     "pdf-dist": "^1.0.0",
-    "pinia": "^2.1.7",
+    "pinia": "^2.3.0",
     "qrcode": "^1.5.3",
     "qs": "^6.11.2",
     "socket.io-client": "^4.5.0",
@@ -76,7 +76,7 @@
     "typescript": "~5.4.0",
     "vite": "^5.3.1",
     "vite-plugin-pwa": "^0.17.4",
-    "vite-plugin-vue-devtools": "^7.3.1",
+    "vite-plugin-vue-devtools": "^7.6.8",
     "vue-tsc": "^2.0.21"
   }
 }

src/components/queryBuilder/BuilderHost.vue

@@ -1,17 +1,36 @@
 <template>
   <div class="flex flex-col border border-gray-300 rounded-md select-none">
     <div class="flex flex-row gap-2 border-b border-gray-300 p-2">
-      <div class="p-1 border border-gray-400 bg-green-200 rounded-md" title="Abfrage starten">
+      <div
+        class="p-1 border border-gray-400 bg-green-200 rounded-md"
+        title="Abfrage starten"
+        @click="$emit('query:run')"
+      >
         <PlayIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
       </div>
-      <div class="p-1 border border-gray-400 bg-gray-100 rounded-md" title="Abfrage speichern">
+      <div
+        class="p-1 border border-gray-400 bg-gray-100 rounded-md"
+        title="Abfrage speichern"
+        @click="$emit('query:save')"
+      >
         <InboxArrowDownIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
       </div>
-      <div class="p-1 border border-gray-400 bg-red-200 rounded-md" title="Ergebnisse leeren">
+      <div
+        class="p-1 border border-gray-400 bg-gray-100 rounded-md"
+        title="Ergebnisse exportieren"
+        @click="$emit('results:export')"
+      >
+        <ArchiveBoxArrowDownIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+      </div>
+      <div
+        class="p-1 border border-gray-400 bg-red-200 rounded-md"
+        title="Ergebnisse leeren"
+        @click="$emit('results:clear')"
+      >
         <NoSymbolIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
       </div>
     </div>
-    <div class="p-2 h-44 md:h-56 w-full overflow-y-scroll">
+    <div class="p-2 h-44 md:h-60 w-full overflow-y-scroll">
       <Table v-model="value" />
     </div>
   </div>
@@ -21,7 +40,7 @@
 import { defineComponent, type PropType } from "vue";
 import { mapActions, mapState } from "pinia";
 import type { DynamicQueryStructure } from "../../types/dynamicQueries";
-import { InboxArrowDownIcon, NoSymbolIcon, PlayIcon } from "@heroicons/vue/24/outline";
+import { ArchiveBoxArrowDownIcon, InboxArrowDownIcon, NoSymbolIcon, PlayIcon } from "@heroicons/vue/24/outline";
 import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
 import Table from "./Table.vue";
 </script>
@@ -40,7 +59,7 @@ export default defineComponent({
       },
     },
   },
-  emits: ["update:model-value"],
+  emits: ["update:model-value", "query:run", "query:save", "results:export", "results:clear"],
   computed: {
     ...mapState(useQueryBuilderStore, ["tableMetas", "loading"]),
     value: {

src/components/queryBuilder/ColumnSelect.vue

@@ -4,6 +4,8 @@
     <div class="flex flex-row flex-wrap gap-2 items-center">
       <p
         class="rounded-md shadow-sm relative block w-fit px-3 py-2 border border-gray-300 text-gray-900 rounded-b-md sm:text-sm"
+        :class="value == '*' ? 'border-gray-600 bg-gray-200' : ''"
+        @click="value = '*'"
       >
         *
       </p>
@@ -11,8 +13,10 @@
         v-for="col in activeTable?.columns"
         :key="col.column"
         class="rounded-md shadow-sm relative block w-fit px-3 py-2 border border-gray-300 text-gray-900 rounded-b-md sm:text-sm"
+        :class="value.includes(col.column) ? 'border-gray-600 bg-gray-200' : ''"
+        @click="value = [col.column]"
       >
-        {{ col.column }}:{{ col.type }}
+        {{ foreignColumns?.includes(col.column) ? "FK:" : "" }} {{ col.column }}:{{ col.type }}
       </p>
     </div>
   </div>
@@ -45,6 +49,32 @@ export default defineComponent({
     activeTable() {
       return this.tableMetas.find((tm) => tm.tableName == this.table);
     },
+    foreignColumns() {
+      return this.activeTable?.relations.map((r) => r.column);
+    },
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: "*" | Array<string>) {
+        let tmp = this.modelValue;
+        if (val == "*") {
+          tmp = val;
+        } else {
+          if (Array.isArray(tmp)) {
+            let index = tmp.findIndex((t) => t == val[0]);
+            if (index == -1) tmp.push(val[0]);
+            else tmp.splice(index, 1);
+          } else {
+            tmp = val;
+          }
+        }
+        if (tmp != "*" && tmp.length == 0) {
+          tmp = "*";
+        }
+        this.$emit("update:model-value", tmp);
+      },
+    },
   },
 });
 </script>

src/stores/admin/queryBuilder.ts

@@ -34,17 +34,21 @@ export const useQueryBuilderStore = defineStore("queryBuilder", {
       if (this.query == undefined) return;
       this.loadingData = "loading";
       http
-        .post(`/admin/querybuilder/query$offset=${offset}&count=${count}`, {
+        .post(`/admin/querybuilder/query?offset=${offset}&count=${count}`, {
           query: this.query,
         })
         .then((result) => {
           this.data = result.data.rows;
-          this.totalLength = result.data.count;
+          this.totalLength = result.data.total;
           this.loadingData = "fetched";
         })
         .catch((err) => {
           this.loadingData = "failed";
         });
     },
+    clearResults() {
+      this.data = [];
+      this.totalLength = 0;
+    },
   },
 });

src/views/admin/club/members/Member.vue

@@ -53,52 +53,6 @@ export default defineComponent({
   computed: {
     ...mapState(useMemberStore, ["members", "totalCount", "loading"]),
     ...mapState(useAbilityStore, ["can"]),
-    entryCount() {
-      return this.totalCount ?? this.members.length;
-    },
-    showingStart() {
-      return this.currentPage * this.maxEntriesPerPage;
-    },
-    showingEnd() {
-      let max = this.currentPage * this.maxEntriesPerPage + this.maxEntriesPerPage;
-      if (max > this.entryCount) max = this.entryCount;
-      return max;
-    },
-    showingText() {
-      return `${this.entryCount != 0 ? this.showingStart + 1 : 0} - ${this.showingEnd}`;
-    },
-    countOfPages() {
-      return Math.ceil(this.entryCount / this.maxEntriesPerPage);
-    },
-    displayedPagesNumbers(): Array<number | "."> {
-      //indicate if "." or page number gets pushed
-      let stateOfPush = false;
-
-      return [...new Array(this.countOfPages)].reduce((acc, curr, index) => {
-        if (
-          // always display first 2 pages
-          index <= 1 ||
-          // always display last 2 pages
-          index >= this.countOfPages - 2 ||
-          // always display 1 pages around current page
-          (this.currentPage - 1 <= index && index <= this.currentPage + 1)
-        ) {
-          acc.push(index);
-          stateOfPush = false;
-          return acc;
-        }
-        // abort if placeholder already added to array
-        if (stateOfPush == true) return acc;
-        // show placeholder if pagenumber is not actively rendered
-        acc.push(".");
-        stateOfPush = true;
-
-        return acc;
-      }, []);
-    },
-    visibleRows() {
-      return this.filterData(this.members, this.showingStart, this.showingEnd);
-    },
   },
   mounted() {
     this.fetchMembers(0, this.maxEntriesPerPage, true);
@@ -106,22 +60,6 @@ export default defineComponent({
   methods: {
     ...mapActions(useMemberStore, ["fetchMembers"]),
     ...mapActions(useModalStore, ["openModal"]),
-    loadPage(newPage: number | ".") {
-      if (newPage == ".") return;
-      if (newPage < 0 || newPage >= this.countOfPages) return;
-
-      let pageStart = newPage * this.maxEntriesPerPage;
-      let pageEnd = newPage * this.maxEntriesPerPage + this.maxEntriesPerPage;
-      if (pageEnd > this.entryCount) pageEnd = this.entryCount;
-
-      let loadedElementCount = this.filterData(this.members, pageStart, pageEnd).length;
-      if (loadedElementCount < this.maxEntriesPerPage) this.fetchMembers(pageStart, this.maxEntriesPerPage);
-
-      this.currentPage = newPage;
-    },
-    filterData(array: Array<any>, start: number, end: number): Array<any> {
-      return array.filter((elem, index) => (elem?.tab_pos ?? index) >= start && (elem?.tab_pos ?? index) < end);
-    },
     openCreateModal() {
       this.openModal(
         markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/CreateMemberModal.vue")))

src/views/admin/club/query/Builder.vue

@@ -7,7 +7,13 @@
     </template>
     <template #diffMain>
       <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
-        <BuilderHost v-model="query" />
+        <BuilderHost
+          v-model="query"
+          @query:run="sendQuery()"
+          @query:save=""
+          @results:clear="clearResults()"
+          @results:export=""
+        />
         <p>Ergebnisse:</p>
         <Pagination
           :items="data"
@@ -26,7 +32,7 @@
 
 <script setup lang="ts">
 import { defineComponent } from "vue";
-import { mapActions, mapState } from "pinia";
+import { mapActions, mapState, mapWritableState } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
 import Pagination from "@/components/Pagination.vue";
 import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
@@ -36,19 +42,15 @@ import type { DynamicQueryStructure } from "@/types/dynamicQueries";
 
 <script lang="ts">
 export default defineComponent({
-  data() {
-    return {
-      query: undefined as undefined | DynamicQueryStructure,
-    };
-  },
   computed: {
     ...mapState(useQueryBuilderStore, ["loading", "loadingData", "tableMetas", "data", "totalLength"]),
+    ...mapWritableState(useQueryBuilderStore, ["query"]),
   },
   mounted() {
     this.fetchTableMetas();
   },
   methods: {
-    ...mapActions(useQueryBuilderStore, ["fetchTableMetas", "sendQuery"]),
+    ...mapActions(useQueryBuilderStore, ["fetchTableMetas", "sendQuery", "clearResults"]),
   },
 });
 </script>