change: standardisation of UI

This commit is contained in:
Julian Krauser 2025-05-16 13:32:40 +02:00
parent 4ee16c624a
commit 04c01b6780
54 changed files with 199 additions and 462 deletions

View file

@ -1,57 +1,50 @@
<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 px-7 overflow-y-auto">
<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 }}
<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 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>
</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>