query views, router and store

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>