query views, router and store

src/components/Pagination.vue

@@ -64,7 +64,7 @@
   </div>
 </template>
 
-<script setup lang="ts" generic="T">
+<script setup lang="ts" generic="T extends { id: number }">
 import { computed, ref, watch } from "vue";
 import { ChevronRightIcon, ChevronLeftIcon, XMarkIcon } from "@heroicons/vue/20/solid";
 import Spinner from "./Spinner.vue";
@@ -105,6 +105,9 @@ const emit = defineEmits({
   search(search: string) {
     return typeof search == "number";
   },
+  clickRow(id: number) {
+    return typeof id == "number";
+  },
 });
 
 const entryCount = computed(() => props.totalCount ?? props.items.length);

src/router/index.ts

@@ -239,6 +239,13 @@ const router = createRouter({
                 },
               ],
             },
+            {
+              path: "query-builder",
+              name: "admin-club-query_builder",
+              component: () => import("@/views/admin/club/query/Builder.vue"),
+              meta: { type: "read", section: "club", module: "query" },
+              beforeEnter: [abilityAndNavUpdate],
+            },
           ],
         },
         {
@@ -324,22 +331,22 @@ const router = createRouter({
               ],
             },
             {
-              path: "communication",
-              name: "admin-settings-communication-route",
+              path: "communication-type",
+              name: "admin-settings-communication_type-route",
               component: () => import("@/views/RouterView.vue"),
-              meta: { type: "read", section: "settings", module: "communication" },
+              meta: { type: "read", section: "settings", module: "communication_type" },
               beforeEnter: [abilityAndNavUpdate],
               children: [
                 {
                   path: "",
-                  name: "admin-settings-communication",
+                  name: "admin-settings-communication_type",
                   component: () => import("@/views/admin/settings/CommunicationType.vue"),
                 },
                 {
                   path: ":id/edit",
-                  name: "admin-settings-communication-edit",
+                  name: "admin-settings-communication_type-edit",
                   component: () => import("@/views/admin/settings/CommunicationTypeEdit.vue"),
-                  meta: { type: "update", section: "settings", module: "communication" },
+                  meta: { type: "update", section: "settings", module: "communication_type" },
                   beforeEnter: [abilityAndNavUpdate],
                   props: true,
                 },
@@ -389,6 +396,28 @@ const router = createRouter({
                 },
               ],
             },
+            {
+              path: "query-store",
+              name: "admin-settings-query_store-route",
+              component: () => import("@/views/RouterView.vue"),
+              meta: { type: "read", section: "settings", module: "query" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-settings-query_store",
+                  component: () => import("@/views/admin/ViewSelect.vue"),
+                },
+                {
+                  path: ":id/edit",
+                  name: "admin-settings-query_store-edit",
+                  component: () => import("@/views/admin/ViewSelect.vue"),
+                  meta: { type: "update", section: "settings", module: "query" },
+                  beforeEnter: [abilityAndNavUpdate],
+                  props: true,
+                },
+              ],
+            },
           ],
         },
         {

src/stores/admin/navigation.ts

@@ -90,6 +90,7 @@ export const useNavigationStore = defineStore("navigation", {
             ...(abilityStore.can("read", "club", "calendar") ? [{ key: "calendar", title: "Kalender" }] : []),
             ...(abilityStore.can("read", "club", "protocol") ? [{ key: "protocol", title: "Protokolle" }] : []),
             ...(abilityStore.can("read", "club", "newsletter") ? [{ key: "newsletter", title: "Newsletter" }] : []),
+            ...(abilityStore.can("read", "club", "query") ? [{ key: "query_builder", title: "Query Builder" }] : []),
           ],
         },
         settings: {
@@ -102,8 +103,8 @@ export const useNavigationStore = defineStore("navigation", {
             ...(abilityStore.can("read", "settings", "executive_position")
               ? [{ key: "executive_position", title: "Vereinsämter" }]
               : []),
-            ...(abilityStore.can("read", "settings", "communication")
-              ? [{ key: "communication", title: "Kommunikationsarten" }]
+            ...(abilityStore.can("read", "settings", "communication_type")
+              ? [{ key: "communication_type", title: "Kommunikationsarten" }]
               : []),
             ...(abilityStore.can("read", "settings", "membership_status")
               ? [{ key: "membership_status", title: "Mitgliedsstatus" }]
@@ -111,6 +112,7 @@ export const useNavigationStore = defineStore("navigation", {
             ...(abilityStore.can("read", "settings", "calendar_type")
               ? [{ key: "calendar_type", title: "Terminarten" }]
               : []),
+            ...(abilityStore.can("read", "settings", "query") ? [{ key: "query_store", title: "Query Store" }] : []),
           ],
         },
         user: {

src/stores/admin/queryBuilder.ts

@@ -0,0 +1,50 @@
+import { defineStore } from "pinia";
+import type { CreateAwardViewModel, UpdateAwardViewModel, AwardViewModel } from "@/viewmodels/admin/award.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+import type { TableMeta } from "../../viewmodels/admin/query.models";
+import type { DynamicQueryStructure } from "../../types/dynamicQueries";
+
+export const useQueryBuilderStore = defineStore("queryBuilder", {
+  state: () => {
+    return {
+      tableMetas: [] as Array<TableMeta>,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      data: [] as Array<{ id: number; [key: string]: any }>,
+      totalLength: 0 as number,
+      loadingData: "failed" as "loading" | "fetched" | "failed",
+      query: undefined as undefined | DynamicQueryStructure,
+      isLoadedQuery: undefined as undefined | number,
+    };
+  },
+  actions: {
+    fetchTableMetas() {
+      this.loading = "loading";
+      http
+        .get("/admin/querybuilder/tables")
+        .then((result) => {
+          this.tableMetas = result.data;
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    sendQuery(offset = 0, count = 25) {
+      if (this.query == undefined) return;
+      this.loadingData = "loading";
+      http
+        .post(`/admin/querybuilder/query$offset=${offset}&count=${count}`, {
+          query: this.query,
+        })
+        .then((result) => {
+          this.data = result.data.rows;
+          this.totalLength = result.data.count;
+          this.loadingData = "fetched";
+        })
+        .catch((err) => {
+          this.loadingData = "failed";
+        });
+    },
+  },
+});

src/types/dynamicQueries.ts

@@ -0,0 +1,44 @@
+export interface DynamicQueryStructure {
+  select: string[] | "*";
+  table: string;
+  where?: Array<ConditionStructure>;
+  join?: Array<DynamicQueryStructure & { foreignColumn: string }>;
+  orderBy?: { [key: string]: "ASC" | "DESC" };
+}
+
+export type ConditionStructure = (
+  | {
+      column: string;
+      operation: WhereOperation;
+      value: ConditionValue;
+    }
+  | {
+      invert?: boolean;
+      condition: Array<ConditionStructure>;
+    }
+) & {
+  concat: WhereType;
+  structureType: "condition" | "nested";
+};
+
+export type ConditionValue = FieldType | Array<FieldType> | { start: FieldType; end: FieldType };
+export type FieldType = number | string | Date | boolean;
+
+export type WhereType = "OR" | "AND" | "_"; // _ represents initial where in (sub-)query
+
+export type WhereOperation =
+  | "eq" //	Equal
+  | "neq" //	Not equal
+  | "lt" //	Less than
+  | "lte" //	Less than or equal to
+  | "gt" //	Greater than
+  | "gte" //	Greater than or equal to
+  | "in" //	Included in an array
+  | "notIn" //	Not included in an array
+  | "contains" //	Contains
+  | "notContains" //	Does not contain
+  | "null" //	Is null
+  | "notNull" //	Is not null
+  | "between" //	Is between
+  | "startsWith" //	Starts with
+  | "endsWith"; //	Ends with

src/types/permissionTypes.ts

@@ -8,11 +8,13 @@ export type PermissionModule =
   | "qualification"
   | "award"
   | "executive_position"
-  | "communication"
+  | "communication_type"
   | "membership_status"
   | "calendar_type"
   | "user"
-  | "role";
+  | "role"
+  | "query"
+  | "query_store";
 
 export type PermissionType = "read" | "create" | "update" | "delete";
 
@@ -44,15 +46,25 @@ export const permissionModules: Array<PermissionModule> = [
   "qualification",
   "award",
   "executive_position",
-  "communication",
+  "communication_type",
   "membership_status",
   "calendar_type",
   "user",
   "role",
+  "query",
+  "query_store",
 ];
 export const permissionTypes: Array<PermissionType> = ["read", "create", "update", "delete"];
 export const sectionsAndModules: SectionsAndModulesObject = {
-  club: ["member", "calendar", "newsletter", "protocol"],
-  settings: ["qualification", "award", "executive_position", "communication", "membership_status", "calendar_type"],
+  club: ["member", "calendar", "newsletter", "protocol", "query"],
+  settings: [
+    "qualification",
+    "award",
+    "executive_position",
+    "communication_type",
+    "membership_status",
+    "calendar_type",
+    "query_store",
+  ],
   user: ["user", "role"],
 };

src/viewmodels/admin/query.models.ts

@@ -0,0 +1,5 @@
+export interface TableMeta {
+  tableName: string;
+  columns: Array<{ column: string; type: string }>;
+  relations: Array<{ column: string; relationType: string; referencedTableName: string }>;
+}

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

@@ -0,0 +1,49 @@
+<template>
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Query Builder</h1>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
+        <div class="border border-gray-300 rounded-md p-2">builder</div>
+        <Pagination
+          :items="data"
+          :totalCount="totalLength"
+          :indicateLoading="loadingData == 'loading'"
+          @load-data="(offset, count) => sendQuery(offset, count)"
+        >
+          <template #pageRow="{ row }: { row: { id: number; [key: string]: any } }">
+            <p>{{ row }}</p>
+          </template>
+        </Pagination>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import Pagination from "@/components/Pagination.vue";
+import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useQueryBuilderStore, ["loading", "loadingData", "tableMetas", "data", "totalLength"]),
+  },
+  mounted() {
+    this.fetchTableMetas();
+  },
+  methods: {
+    ...mapActions(useQueryBuilderStore, ["fetchTableMetas", "sendQuery"]),
+  },
+});
+</script>