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

<template>
  <MainTemplate title="Query Builder">
    <template #main>
      <BuilderHost
        v-model="query"
        allow-predefined-select
        @query:run="sendQuery"
        @query:save="triggerSave"
        @results:clear="clearResults"
        @results:export="exportData"
      />
      <p>Ergebnisse:</p>
      <div
        v-if="loadingData == 'failed'"
        class="flex flex-col p-2 border border-red-600 bg-red-200 rounded-md select-none"
      >
        <p v-if="typeof queryError == 'string'">
          {{ queryError }}
        </p>
        <div v-else>
          <p>
            CODE: <br />
            {{ queryError.code }}
          </p>
          <br />
          <p>
            MSG: <br />
            {{ queryError.msg }}
          </p>
          <br />
          <p>
            RESULTING SQL: <br />
            {{ queryError.sql }}
          </p>
        </div>
      </div>
      <Pagination
        v-else
        :items="data"
        :totalCount="totalLength"
        :indicateLoading="loadingData == 'loading'"
        @load-data="(offset, count) => sendQuery(offset, count)"
      >
        <template #pageRow="{ row }: { row: { id: FieldType; [key: string]: FieldType } }">
          <p>{{ row }}</p>
        </template>
      </Pagination>
    </template>
  </MainTemplate>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState, mapWritableState } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import Pagination from "@/components/Pagination.vue";
import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
import BuilderHost from "@/components/queryBuilder/BuilderHost.vue";
import type { DynamicQueryStructure, FieldType } from "@/types/dynamicQueries";
import { useQueryStoreStore } from "@/stores/admin/configuration/queryStore";
</script>

<script lang="ts">
export default defineComponent({
  computed: {
    ...mapState(useQueryBuilderStore, ["loading", "loadingData", "data", "totalLength", "queryError"]),
    ...mapWritableState(useQueryBuilderStore, ["query"]),
  },
  methods: {
    ...mapActions(useQueryBuilderStore, ["sendQuery", "clearResults", "exportData"]),
    ...mapActions(useQueryStoreStore, ["triggerSave"]),
  },
});
</script>