Wroclaw/WorkshopTasker
2
1
Fork 1
Code Issues Pull requests Activity Actions

remove playground junk

Browse source
This commit is contained in:
Wroclaw 2023-06-14 13:47:21 +02:00
parent 90932a49c8
commit 4720202d8a
8 changed files with 4 additions and 282 deletions
Download patch file Download diff file Expand all files Collapse all files

124
pages/clients.backup.vue
View file

@ -1,124 +0,0 @@
<script setup lang="ts">
/* global $fetch */
import { useFetch, createError } from "nuxt/app";
import { ref, Ref } from "vue";
import { definePageMeta } from "~/.nuxt/imports";
import { client as clientType } from "~/utils/types/database";
definePageMeta({ middleware: ["auth"] });
const clientsRequest = await useFetch("/api/clients");
if (clientsRequest.error.value) throw createError(clientsRequest.error.value?.data ?? "");
const clients = clientsRequest.data as Ref<NonNullable<typeof clientsRequest.data.value>>;
const countRequest = await useFetch("/api/clients/count");
if (countRequest.error.value) throw createError(countRequest.error.value?.data ?? "");
const count = countRequest.data as Ref<NonNullable<typeof countRequest.data.value>>;
function rowClicked(client: string, edit = false) {
console.log(client);
}
async function rowDelete(client: string) {
try {
await $fetch<clientType>(`/api/clients/${client}`, {
method: "DELETE",
});
clients.value = clients.value.filter(e => e.id !== client);
count.value.count--;
} catch (e) {
// FIXME: show the error
console.log(e);
}
}
const loadingMore = ref<boolean>(false);
async function loadBefore() {
loadingMore.value = true;
clients.value.push(...await $fetch("/api/clients", {
query: {
before: clients.value[clients.value.length - 1].id,
},
}));
loadingMore.value = false;
}
</script>
<template>
<VOverlay
model-value
origin="top center"
:scrim="false"
height="fit-content"
persistent
no-click-animation
>
<VAlert class="alert">
owowowowowowowowo
</VAlert>
</VOverlay>
<VRow>
<VCol>
<VBreadcrumbs :items="['Clients']" />
<VSpacer />
<div class="text-h4">
There are {{ count?.count }} clients in the database.
</div>
</VCol>
</VRow>
<VRow>
<VCol cols="12">
<VCard>
<VTable>
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th />
</tr>
</thead>
<tbody>
<tr v-for="client in clients" :key="client.id">
<td @click="() => rowClicked(client.id)">
{{ client.name }}
</td>
<td @click="() => rowClicked(client.id)">
{{ client.address }}
</td>
<td class="buttons">
<div>
<VBtn icon="mdi-pencil" variant="text" @click="() => rowClicked(client.id, true)" />
<VBtn icon="mdi-delete" color="red" variant="text" @click="() => rowDelete(client.id)" />
</div>
</td>
</tr>
</tbody>
</VTable>
</VCard>
<VCol>
<VBtn
v-if="clients.length < count.count"
color="primary"
:loading="loadingMore"
@click="loadBefore"
>
Load more
</VBtn>
</VCol>
</VCol>
</VRow>
</template>
<style scoped>
.buttons {
width: 0;
padding-right: 4px !important;
}
.buttons > div {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
</style>

28
pages/forms.vue
View file

@ -1,28 +0,0 @@
<script setup lang="ts">
/* global $fetch */
import { ref } from 'vue';
const question = ref();
const answer = ref();
async function getAnswer() {
const message = await $fetch("/api/echo", {
body: question.value,
method: "POST",
});
answer.value = message;
}
</script>
<template>
<VCard width="400px">
<template #text>
<VTextarea v-model="question" /><br>
<p>{{ answer }}</p>
<VBtn @click="getAnswer">
Send
</VBtn>
</template>
</VCard>
</template>

26
pages/index.vue
View file

@ -1,23 +1,5 @@
<script setup>
import Test from '~/components/test.vue';
<script setup lang="ts">
import { navigateTo } from 'nuxt/app';
navigateTo("/clients");
</script>
<template>
<h1>Hi mom!</h1>
<br>
<Test />
<Test />
<Test />
<Test />
<Test /><br>
<VCard
text="..."
variant="outlined"
/>
</template>
<style scoped>
h1 {
color: blue;
}
</style>

50
pages/tableExample.vue
View file

@ -1,50 +0,0 @@
<script setup lang="ts">
import { useFetch } from '#app';
import { ref } from 'vue';
const tableContent = ref(await useFetch("/api/dbtest").data);
</script>
<template>
<v-card width="min-content">
<v-table>
<thead>
<tr>
<th>id</th>
<th>nazwa</th>
<th>adres</th>
<th>kontakt</th>
<th />
</tr>
</thead>
<tbody>
<tr v-for="row in tableContent" :key="row.id">
<td>{{ row.id }}</td>
<td>{{ row.nazwa }}</td>
<td>{{ row.adres }}</td>
<td>{{ row.kontakt }}</td>
<td>
<v-btn-group variant="plain">
<v-btn icon="mdi-pencil" color="main" />
<v-btn icon="mdi-delete" color="red" />
</v-btn-group>
</td>
</tr>
<tr class="last">
<td>*</td>
<td><v-text-field label="nazwa" density="compact" /></td>
<td><v-text-field label="adres" density="compact" /></td>
<td><v-text-field label="kontakt" density="compact" /></td>
<td><v-btn icon="mdi-plus" variant="plain" class="rounded" /></td>
</tr>
</tbody>
</v-table>
</v-card>
</template>
<style scoped>
.last td:not(:last-child):not(:first-child) {
padding-left: 0;
padding-right: 0;
}
</style>