forked from Wroclaw/WorkshopTasker
Initial commit
This commit is contained in:
commit
1e63e008af
48 changed files with 12715 additions and 0 deletions
26
.eslintrc.json
Normal file
26
.eslintrc.json
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"extends": ["@nuxtjs/eslint-config-typescript", "eslint:recommended"],
|
||||||
|
"ignorePatterns": ["*.md", "*.json"],
|
||||||
|
"rules": {
|
||||||
|
"@typescript-eslint/no-unused-vars": "off",
|
||||||
|
"no-unused-vars": "off",
|
||||||
|
"comma-dangle": ["error", "always-multiline"],
|
||||||
|
"curly": ["error", "multi-or-nest", "consistent"],
|
||||||
|
"eol-last": ["error", "always"],
|
||||||
|
"no-console": "off",
|
||||||
|
"no-undef": "warn",
|
||||||
|
"quotes": "off",
|
||||||
|
"semi": ["error", "always"],
|
||||||
|
"space-before-function-paren": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
"anonymous": "never",
|
||||||
|
"asyncArrow": "always",
|
||||||
|
"named": "never"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"vue/html-indent": "error",
|
||||||
|
"vue/multi-word-component-names": "off",
|
||||||
|
"vue/no-multiple-template-root": "off"
|
||||||
|
}
|
||||||
|
}
|
||||||
9
.gitignore
vendored
Normal file
9
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
node_modules
|
||||||
|
*.log*
|
||||||
|
.nuxt
|
||||||
|
.nitro
|
||||||
|
.cache
|
||||||
|
.output
|
||||||
|
.env
|
||||||
|
dist
|
||||||
|
.DS_Store
|
||||||
2
.npmrc
Normal file
2
.npmrc
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
shamefully-hoist=true
|
||||||
|
strict-peer-dependencies=false
|
||||||
50
.vscode/launch.json
vendored
Normal file
50
.vscode/launch.json
vendored
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
{
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"name": "Launch Edge",
|
||||||
|
"request": "launch",
|
||||||
|
"type": "msedge",
|
||||||
|
"url": "http://localhost:3000",
|
||||||
|
"webRoot": "${workspaceFolder}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Launch Vivaldi",
|
||||||
|
"request": "launch",
|
||||||
|
"type": "chrome",
|
||||||
|
"url": "http://localhost:3000",
|
||||||
|
"webRoot": "${workspaceFolder}",
|
||||||
|
"runtimeExecutable": "C:\\Program Files\\Vivaldi\\Application\\vivaldi.exe"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "firefox",
|
||||||
|
"request": "launch",
|
||||||
|
"reAttach": true,
|
||||||
|
"name": "Launch Firefox",
|
||||||
|
"url": "http://localhost:3000",
|
||||||
|
"webRoot": "${workspaceFolder}",
|
||||||
|
"pathMappings": [
|
||||||
|
{
|
||||||
|
"url": "http://localhost:3000/_nuxt/pages",
|
||||||
|
"path": "${workspaceFolder}/pages"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "node",
|
||||||
|
"name": "Nuxt: nuxi dev",
|
||||||
|
"request": "launch",
|
||||||
|
"program": "${workspaceFolder}/node_modules/nuxi/bin/nuxi.mjs",
|
||||||
|
"args": [
|
||||||
|
"dev"
|
||||||
|
],
|
||||||
|
"cwd": "${workspaceFolder}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "node-terminal",
|
||||||
|
"name": "Nuxt: npm run dev",
|
||||||
|
"request": "launch",
|
||||||
|
"command": "npm run dev",
|
||||||
|
"cwd": "${workspaceFolder}"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"typescript.tsdk": "node_modules/typescript/lib"
|
||||||
|
}
|
||||||
7
.vsls.json
Normal file
7
.vsls.json
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://json.schemastore.org/vsls",
|
||||||
|
"gitignore": "none",
|
||||||
|
"excludeFiles": [
|
||||||
|
".env"
|
||||||
|
]
|
||||||
|
}
|
||||||
15
app.vue
Normal file
15
app.vue
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<template>
|
||||||
|
<VApp>
|
||||||
|
<NuxtLayout />
|
||||||
|
<VMain>
|
||||||
|
<VContainer fluid>
|
||||||
|
<NuxtErrorBoundary />
|
||||||
|
<NuxtPage />
|
||||||
|
</VContainer>
|
||||||
|
</VMain>
|
||||||
|
</VApp>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
html { overflow-y: auto }
|
||||||
|
</style>
|
||||||
32
components/navigation/navigation.vue
Normal file
32
components/navigation/navigation.vue
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
<script setup>
|
||||||
|
import { useDisplay } from "vuetify/lib/framework.mjs";
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { navigateTo } from "#app";
|
||||||
|
|
||||||
|
const { mobile } = useDisplay();
|
||||||
|
const navOpen = ref(!mobile.value);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<VAppBar v-if="mobile" order="5">
|
||||||
|
<VAppBarNavIcon @click.end="navOpen = !navOpen" />
|
||||||
|
<VToolbarTitle>Database Project</VToolbarTitle>
|
||||||
|
</VAppBar>
|
||||||
|
<VNavigationDrawer v-model="navOpen" :temporary="mobile">
|
||||||
|
<VList>
|
||||||
|
<VListItem
|
||||||
|
prepend-avatar="https://cdn.discordapp.com/avatars/317001025074757632/248f503c44bc95ac75f55f5835e6ff9f.png?size=512"
|
||||||
|
title="Anonymous"
|
||||||
|
/>
|
||||||
|
</VList>
|
||||||
|
|
||||||
|
<VDivider />
|
||||||
|
|
||||||
|
<VList density="compact" nav>
|
||||||
|
<VListItem prepend-icon="mdi-home" title="Home" value="/" @click="navigateTo('/')" />
|
||||||
|
<VListItem prepend-icon="mdi-login" title="Login" value="/login" @click="navigateTo('/login')" />
|
||||||
|
<VListItem prepend-icon="mdi-table" title="Table Example" value="/tableExample" @click="navigateTo('/tableExample')" />
|
||||||
|
<VListItem prepend-icon="mdi-form-textarea" title="Echo Form" value="/forms" @click="navigateTo('/forms')" />
|
||||||
|
</VList>
|
||||||
|
</VNavigationDrawer>
|
||||||
|
</template>
|
||||||
34
components/pagedList.vue
Normal file
34
components/pagedList.vue
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
const props = defineProps<{
|
||||||
|
records: Array<any>,
|
||||||
|
recordKey: string,
|
||||||
|
variant?: "default" | "inset" | "accordion" | "popout",
|
||||||
|
modelValue?: any,
|
||||||
|
}>();
|
||||||
|
|
||||||
|
// eslint-disable-next-line func-call-spacing
|
||||||
|
defineEmits<{
|
||||||
|
(e: "update:modelValue", value: typeof props.modelValue): void,
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<VExpansionPanels
|
||||||
|
multiple
|
||||||
|
:v-model="modelValue"
|
||||||
|
@update:model-value="(e: any) => $emit('update:modelValue', e)"
|
||||||
|
>
|
||||||
|
<VExpansionPanel
|
||||||
|
v-for="record in records"
|
||||||
|
:key="record[recordKey]"
|
||||||
|
:variant="props.variant ?? 'default'"
|
||||||
|
>
|
||||||
|
<template #title>
|
||||||
|
<slot name="title" :record="record" />
|
||||||
|
</template>
|
||||||
|
<template #text>
|
||||||
|
<slot name="text" :record="record" />
|
||||||
|
</template>
|
||||||
|
</VExpansionPanel>
|
||||||
|
</VExpansionPanels>
|
||||||
|
</template>
|
||||||
56
components/pagedTable.vue
Normal file
56
components/pagedTable.vue
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
const props = defineProps<{
|
||||||
|
records: Array<any>,
|
||||||
|
recordKey: string,
|
||||||
|
fields: Array<string>,
|
||||||
|
buttons: boolean,
|
||||||
|
}>();
|
||||||
|
|
||||||
|
// eslint-disable-next-line func-call-spacing
|
||||||
|
defineEmits<{
|
||||||
|
(e: "click", recordKey: string): void,
|
||||||
|
(e: "click:edit", recordKey: string): void,
|
||||||
|
(e: "click:delete", recordKey: string): void,
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="record in props.records" :key="record[props.recordKey]">
|
||||||
|
<td
|
||||||
|
v-for="field in props.fields"
|
||||||
|
:key="field"
|
||||||
|
@click="$emit('click', record[recordKey])"
|
||||||
|
>
|
||||||
|
{{ record[field] }}
|
||||||
|
</td>
|
||||||
|
<td v-if="buttons" class="buttons">
|
||||||
|
<div>
|
||||||
|
<VBtn
|
||||||
|
icon="mdi-pencil"
|
||||||
|
variant="text"
|
||||||
|
@click="$emit('click:edit', record[recordKey])"
|
||||||
|
/>
|
||||||
|
<VBtn
|
||||||
|
icon="mdi-delete"
|
||||||
|
color="red"
|
||||||
|
variant="text"
|
||||||
|
@click="$emit('click:delete', record[recordKey])"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.buttons {
|
||||||
|
width: 0;
|
||||||
|
padding-right: 4px !important;
|
||||||
|
}
|
||||||
|
.buttons > div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
11
components/test.vue
Normal file
11
components/test.vue
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const count = ref(0);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<VBtn @click="count++">
|
||||||
|
Clicky {{ count }} times
|
||||||
|
</VBtn>
|
||||||
|
</template>
|
||||||
7
layouts/default.vue
Normal file
7
layouts/default.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<script setup>
|
||||||
|
import Navigation from "~/components/navigation/navigation.vue";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Navigation />
|
||||||
|
</template>
|
||||||
10
middleware/auth.ts
Normal file
10
middleware/auth.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { defineNuxtRouteMiddleware, navigateTo, useFetch } from "nuxt/app";
|
||||||
|
|
||||||
|
export default defineNuxtRouteMiddleware(async (to, from) => {
|
||||||
|
// FIXME: Check authorisation in another way (401 unauthorised) instead querying api directly
|
||||||
|
const me = await useFetch("/api/users/me", {});
|
||||||
|
|
||||||
|
if (!me.error.value) return;
|
||||||
|
if (process.client) console.log(me.error.value);
|
||||||
|
return navigateTo({ path: "/login", query: { redirect: to.fullPath } });
|
||||||
|
});
|
||||||
26
nuxt.config.ts
Normal file
26
nuxt.config.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
import { defineNuxtConfig } from "nuxt/config";
|
||||||
|
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||||
|
export default defineNuxtConfig({
|
||||||
|
pages: true,
|
||||||
|
build: {
|
||||||
|
transpile: ["vuetify"],
|
||||||
|
},
|
||||||
|
css: [
|
||||||
|
"vuetify/lib/styles/main.sass",
|
||||||
|
"@mdi/font/css/materialdesignicons.min.css",
|
||||||
|
],
|
||||||
|
ssr: true,
|
||||||
|
nitro: {
|
||||||
|
esbuild: {
|
||||||
|
options: {
|
||||||
|
target: "es2022",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
vite: {
|
||||||
|
// devBundler: "legacy"
|
||||||
|
},
|
||||||
|
imports: {
|
||||||
|
autoImport: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
11254
package-lock.json
generated
Normal file
11254
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
27
package.json
Normal file
27
package.json
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"build": "nuxt build",
|
||||||
|
"dev": "nuxt dev",
|
||||||
|
"generate": "nuxt generate",
|
||||||
|
"preview": "nuxt preview",
|
||||||
|
"postinstall": "nuxt prepare"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": "<19.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@mdi/font": "^7.2.96",
|
||||||
|
"@nuxtjs/eslint-config-typescript": "^12.0.0",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^5.59.0",
|
||||||
|
"@typescript-eslint/parser": "^5.59.0",
|
||||||
|
"eslint": "^8.39.0",
|
||||||
|
"nuxt": "3.4.0",
|
||||||
|
"sass": "^1.62.0",
|
||||||
|
"vite-plugin-vuetify": "^1.0.2",
|
||||||
|
"vuetify": "^3.1.15"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"mysql2": "^3.2.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
74
pages/client/[id].vue
Normal file
74
pages/client/[id].vue
Normal file
|
|
@ -0,0 +1,74 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useRoute, useFetch, createError } from "nuxt/app";
|
||||||
|
import { Ref } from "vue";
|
||||||
|
|
||||||
|
import PagedList from "~/components/pagedList.vue";
|
||||||
|
import { client as clientType } from "~/utils/types/database";
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const id = route.params.id;
|
||||||
|
|
||||||
|
const clientRequest = await useFetch(`/api/clients/${id}`);
|
||||||
|
if (clientRequest.error.value) throw createError(clientRequest.error.value?.data ?? "");
|
||||||
|
const client = clientRequest.data as Ref<clientType>;
|
||||||
|
console.log(client);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<VRow>
|
||||||
|
<VCol cols="12">
|
||||||
|
<div
|
||||||
|
class="text-h4"
|
||||||
|
:class="client.name === null ? ['font-italic'] : []"
|
||||||
|
>
|
||||||
|
{{ client.name ?? "[none]" }}
|
||||||
|
</div>
|
||||||
|
</VCol>
|
||||||
|
</VRow>
|
||||||
|
<VRow>
|
||||||
|
<VCol md="4" cols="12">
|
||||||
|
<VCard>
|
||||||
|
<VList>
|
||||||
|
<VListItem
|
||||||
|
v-if="client.address"
|
||||||
|
prepend-icon="mdi-map-marker"
|
||||||
|
>
|
||||||
|
<VListItemTitle class="text-wrap">
|
||||||
|
{{ client.address }}
|
||||||
|
</VListItemTitle>
|
||||||
|
</VListItem>
|
||||||
|
<VListItem
|
||||||
|
v-if="client.email"
|
||||||
|
prepend-icon="mdi-email"
|
||||||
|
>
|
||||||
|
<VListItemTitle class="text-wrap">
|
||||||
|
{{ client.email }}
|
||||||
|
</VListItemTitle>
|
||||||
|
</VListItem>
|
||||||
|
<VListItem
|
||||||
|
v-if="client.phone"
|
||||||
|
prepend-icon="mdi-phone"
|
||||||
|
>
|
||||||
|
<VListItemTitle class="text-wrap">
|
||||||
|
{{ client.phone }}
|
||||||
|
</VListItemTitle>
|
||||||
|
</VListItem>
|
||||||
|
</VList>
|
||||||
|
</VCard>
|
||||||
|
</VCol>
|
||||||
|
<VCol cols="12" md="8">
|
||||||
|
<PagedList
|
||||||
|
:records="[{a: 'owo'}, {a: 'uwu'}, {a: 'qwq'}]"
|
||||||
|
record-key="a"
|
||||||
|
>
|
||||||
|
<template #text="i">
|
||||||
|
{{ i }}
|
||||||
|
</template>
|
||||||
|
<template #title="i">
|
||||||
|
{{ i }}
|
||||||
|
</template>
|
||||||
|
</PagedList>
|
||||||
|
</VCol>
|
||||||
|
</VRow>
|
||||||
|
</template>
|
||||||
124
pages/clients.backup.vue
Normal file
124
pages/clients.backup.vue
Normal file
|
|
@ -0,0 +1,124 @@
|
||||||
|
<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>
|
||||||
105
pages/clients.vue
Normal file
105
pages/clients.vue
Normal file
|
|
@ -0,0 +1,105 @@
|
||||||
|
<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";
|
||||||
|
import pagedTable from "~/components/pagedTable.vue";
|
||||||
|
|
||||||
|
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>
|
||||||
|
<pagedTable
|
||||||
|
buttons
|
||||||
|
:records="clients"
|
||||||
|
:fields="['name', 'address']"
|
||||||
|
record-key="id"
|
||||||
|
@click="(id) => rowClicked(id, false)"
|
||||||
|
@click:edit="(id) => rowClicked(id, true)"
|
||||||
|
@click:delete="(id) => rowDelete(id)"
|
||||||
|
/>
|
||||||
|
</VTable>
|
||||||
|
</VCard>
|
||||||
|
<VCol>
|
||||||
|
<VBtn
|
||||||
|
v-if="clients.length < count.count"
|
||||||
|
color="primary"
|
||||||
|
:loading="loadingMore"
|
||||||
|
@click="loadBefore"
|
||||||
|
>
|
||||||
|
Load more
|
||||||
|
</VBtn>
|
||||||
|
</VCol>
|
||||||
|
</VCol>
|
||||||
|
</VRow>
|
||||||
|
</template>
|
||||||
28
pages/forms.vue
Normal file
28
pages/forms.vue
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
<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>
|
||||||
22
pages/index.vue
Normal file
22
pages/index.vue
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
<script setup>
|
||||||
|
import Test from '~/components/test.vue';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<h1>Hi mom!</h1><br>
|
||||||
|
<Test />
|
||||||
|
<Test />
|
||||||
|
<Test />
|
||||||
|
<Test />
|
||||||
|
<Test /><br>
|
||||||
|
<VCard
|
||||||
|
text="..."
|
||||||
|
variant="outlined"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
h1 {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
129
pages/login.vue
Normal file
129
pages/login.vue
Normal file
|
|
@ -0,0 +1,129 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
/* global $fetch */
|
||||||
|
import { ref, watch } from "vue";
|
||||||
|
import { VForm } from "vuetify/components";
|
||||||
|
import { navigateTo, useCookie, useFetch, useRoute } from "nuxt/app";
|
||||||
|
import { cookieSettings } from "~/utils/cookieSettings";
|
||||||
|
import { definePageMeta } from "~/.nuxt/imports";
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
const login = ref("");
|
||||||
|
const password = ref("");
|
||||||
|
const loading = ref(false);
|
||||||
|
const error = ref<true | string>(true);
|
||||||
|
const form = ref<VForm | null>(null);
|
||||||
|
const loggedIn = ref<boolean>(useCookie("token", cookieSettings).value != null);
|
||||||
|
|
||||||
|
const redirectTo = ref(route.redirectedFrom);
|
||||||
|
|
||||||
|
definePageMeta({
|
||||||
|
layout: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
async function submit() {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const result = await $fetch("/api/login", {
|
||||||
|
body: { login: login.value, password: password.value },
|
||||||
|
method: "POST",
|
||||||
|
});
|
||||||
|
console.log(result);
|
||||||
|
loggedIn.value = true;
|
||||||
|
password.value = "";
|
||||||
|
} catch (e) {
|
||||||
|
console.log(typeof e);
|
||||||
|
console.error(e);
|
||||||
|
console.log(e);
|
||||||
|
error.value = (e as any).data.message;
|
||||||
|
}
|
||||||
|
loading.value = false;
|
||||||
|
if (redirectTo.value) navigateTo(redirectTo.value.fullPath);
|
||||||
|
if (form.value) form.value.validate();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function logout() {
|
||||||
|
try {
|
||||||
|
await $fetch("/api/logout");
|
||||||
|
loggedIn.value = false;
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const userInfo = ref(JSON.stringify(useFetch("/api/users/me").data));
|
||||||
|
watch(loggedIn, updateUserInfo);
|
||||||
|
async function updateUserInfo() {
|
||||||
|
if (loggedIn.value) {
|
||||||
|
try {
|
||||||
|
userInfo.value = JSON.stringify(await $fetch("/api/users/me"));
|
||||||
|
} catch (e) {
|
||||||
|
// expected if the user is not logged in
|
||||||
|
userInfo.value = "";
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
userInfo.value = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUserInfo();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<VCard max-width="450px" class="mx-auto mt-16" variant="outlined">
|
||||||
|
<VProgressLinear
|
||||||
|
absolute
|
||||||
|
:active="loading"
|
||||||
|
:indeterminate="loading"
|
||||||
|
color="primary"
|
||||||
|
/>
|
||||||
|
<template #title>
|
||||||
|
Log in
|
||||||
|
</template>
|
||||||
|
<template #text>
|
||||||
|
<VForm v-if="!loggedIn" ref="form" class="form" :disabled="loading">
|
||||||
|
<VTextField
|
||||||
|
v-model="login"
|
||||||
|
label="Login"
|
||||||
|
:rules="[() => error]"
|
||||||
|
:disabled="loggedIn"
|
||||||
|
autocomplete="username"
|
||||||
|
variant="outlined"
|
||||||
|
color="primary"
|
||||||
|
/>
|
||||||
|
<VTextField
|
||||||
|
v-model="password"
|
||||||
|
label="Password"
|
||||||
|
type="password"
|
||||||
|
:rules="[() => error]"
|
||||||
|
:disabled="loggedIn"
|
||||||
|
autocomplete="current-password"
|
||||||
|
variant="outlined"
|
||||||
|
color="primary"
|
||||||
|
class="pt-4"
|
||||||
|
/>
|
||||||
|
</VForm>
|
||||||
|
<p v-if="loggedIn">
|
||||||
|
Logged in<br>{{ userInfo }}
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
<template #actions>
|
||||||
|
<VBtn
|
||||||
|
v-if="!loggedIn"
|
||||||
|
color="primary"
|
||||||
|
:disabled="loggedIn || loading"
|
||||||
|
@click="submit"
|
||||||
|
>
|
||||||
|
Login
|
||||||
|
</VBtn>
|
||||||
|
<VBtn
|
||||||
|
v-if="loggedIn"
|
||||||
|
color="primary"
|
||||||
|
:disabled="!loggedIn"
|
||||||
|
@click="logout"
|
||||||
|
>
|
||||||
|
Logout
|
||||||
|
</VBtn>
|
||||||
|
</template>
|
||||||
|
</VCard>
|
||||||
|
</template>
|
||||||
50
pages/tableExample.vue
Normal file
50
pages/tableExample.vue
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
<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>
|
||||||
16
plugins/vuetify.ts
Normal file
16
plugins/vuetify.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { createVuetify } from 'vuetify';
|
||||||
|
import * as components from 'vuetify/components';
|
||||||
|
import * as directives from 'vuetify/directives';
|
||||||
|
import { defineNuxtPlugin } from '#app';
|
||||||
|
|
||||||
|
export default defineNuxtPlugin((nuxtApp) => {
|
||||||
|
const vuetify = createVuetify({
|
||||||
|
ssr: true,
|
||||||
|
components,
|
||||||
|
directives,
|
||||||
|
theme: {
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
nuxtApp.vueApp.use(vuetify);
|
||||||
|
});
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
112
server/api/clients.get.ts
Normal file
112
server/api/clients.get.ts
Normal file
|
|
@ -0,0 +1,112 @@
|
||||||
|
/* global defineEventHandler getQuery, createError */
|
||||||
|
import { QueryObject } from "ufo";
|
||||||
|
|
||||||
|
import { data, database } from "../utils/database";
|
||||||
|
import { isString } from "../utils/isString";
|
||||||
|
import { client } from "~/utils/types/database";
|
||||||
|
|
||||||
|
type queryType = {
|
||||||
|
type: "before" | "after" | "around",
|
||||||
|
id: string
|
||||||
|
} | {
|
||||||
|
type: null
|
||||||
|
};
|
||||||
|
|
||||||
|
function getLocationParameterType(query: QueryObject): queryType {
|
||||||
|
const before = query.before;
|
||||||
|
const after = query.after;
|
||||||
|
const around = query.around;
|
||||||
|
|
||||||
|
let setLocationParametersCount = 0;
|
||||||
|
let rvalue: queryType = { type: null };
|
||||||
|
|
||||||
|
if (isString(before)) {
|
||||||
|
setLocationParametersCount++;
|
||||||
|
rvalue = { type: "before", id: before };
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isString(after)) {
|
||||||
|
setLocationParametersCount++;
|
||||||
|
rvalue = { type: "after", id: after };
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isString(around)) {
|
||||||
|
setLocationParametersCount++;
|
||||||
|
rvalue = { type: "around", id: around };
|
||||||
|
}
|
||||||
|
|
||||||
|
if (setLocationParametersCount > 1) {
|
||||||
|
throw createError({
|
||||||
|
statusCode: 400,
|
||||||
|
message: "multiple location parameters not allowed",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return rvalue;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getResults(
|
||||||
|
queryType: queryType,
|
||||||
|
limit = 50,
|
||||||
|
) {
|
||||||
|
switch (queryType.type) {
|
||||||
|
case "before": {
|
||||||
|
const [data] = await database.query(
|
||||||
|
"SELECT *, CONVERT(`id`, CHAR) AS `id` FROM `clients` WHERE `id` < ? ORDER BY `id` DESC LIMIT ?",
|
||||||
|
[queryType.id, limit],
|
||||||
|
) as unknown as data<client>;
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
case "after": {
|
||||||
|
const [data] = await database.query(
|
||||||
|
"SELECT *, CONVERT(`id`, CHAR) AS `id` FROM `clients` WHERE `id` > ? ORDER BY `id` DESC LIMIT ?",
|
||||||
|
[queryType.id, limit],
|
||||||
|
) as unknown as data<client>;
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
case "around": {
|
||||||
|
const [data] = await database.query(
|
||||||
|
"(SELECT *, CONVERT(`id`, CHAR) AS `id` FROM `clients` WHERE `id` >= ? ORDER BY `id` ASC LIMIT ?)\n" +
|
||||||
|
"UNION ALL\n" +
|
||||||
|
"(SELECT *, CONVERT(`id`, CHAR) AS `id` FROM `clients` WHERE `id` < ? ORDER BY `id` DESC LIMIT ?)\n" +
|
||||||
|
"ORDER BY `id` DESC",
|
||||||
|
[queryType.id, Math.ceil(limit / 2), queryType.id, Math.floor(limit / 2)],
|
||||||
|
) as unknown as data<client>;
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
case null: {
|
||||||
|
const [data] = await database.query(
|
||||||
|
"SELECT *, CONVERT(`id`, CHAR) AS `id` FROM `clients` ORDER BY `id` DESC LIMIT ?",
|
||||||
|
[limit],
|
||||||
|
) as unknown as data<client>;
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
throw createError("Not implemented");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineEventHandler(async (e) => {
|
||||||
|
const query = getQuery(e);
|
||||||
|
|
||||||
|
let limit = 50;
|
||||||
|
if (query.limit) limit = Number(query.limit);
|
||||||
|
if (limit > 200) {
|
||||||
|
throw createError({
|
||||||
|
statusCode: 400,
|
||||||
|
message: "Cannot retrieve more than 200 records",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (limit <= 0) {
|
||||||
|
throw createError({
|
||||||
|
statusCode: 400,
|
||||||
|
message: "Tried to retireve 0 or less records",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const queryData = getLocationParameterType(query);
|
||||||
|
|
||||||
|
const result = await getResults(queryData, limit);
|
||||||
|
|
||||||
|
return result;
|
||||||
|
});
|
||||||
67
server/api/clients.post.ts
Normal file
67
server/api/clients.post.ts
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
/* global defineEventHandler, createError, readBody */
|
||||||
|
|
||||||
|
import { database } from "../utils/database";
|
||||||
|
import Snowflake from "../utils/snowflake";
|
||||||
|
import { client } from "~/utils/types/database";
|
||||||
|
|
||||||
|
const clientKeys = [
|
||||||
|
"name",
|
||||||
|
"address",
|
||||||
|
"phone",
|
||||||
|
"email",
|
||||||
|
];
|
||||||
|
|
||||||
|
export function checkIsClient(
|
||||||
|
value: any,
|
||||||
|
required = true,
|
||||||
|
): value is Partial<Omit<client, "id">> {
|
||||||
|
const errors = new Map<string, string>();
|
||||||
|
|
||||||
|
if (typeof value !== "object") {
|
||||||
|
throw createError({
|
||||||
|
statusCode: 400,
|
||||||
|
message: "Invalid body",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!(typeof value.name === "string" || value.name === null || (!required && value.name === undefined))) errors.set("name", "is not string or null");
|
||||||
|
if (!(typeof value.address === "string" || value.address === null || (!required && value.address === undefined))) errors.set("address", "is not string or null");
|
||||||
|
if (!(typeof value.phone === "string" || value.phone === null || (!required && value.phone === undefined))) errors.set("phone", "is not string or null");
|
||||||
|
if (!(typeof value.email === "string" || value.email === null || (!required && value.email === undefined))) errors.set("email", "is not string or null");
|
||||||
|
|
||||||
|
for (const i in value)
|
||||||
|
if (!clientKeys.includes(i)) errors.set(i, `excessive property`);
|
||||||
|
|
||||||
|
if (errors.size !== 0) {
|
||||||
|
let message = "Invalid Parameters: ";
|
||||||
|
for (const i in errors)
|
||||||
|
message += i + ", ";
|
||||||
|
message = message.slice(0, -2);
|
||||||
|
throw createError({
|
||||||
|
statusCode: 400,
|
||||||
|
message,
|
||||||
|
data: {
|
||||||
|
errors: Object.fromEntries(errors),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineEventHandler(async (e) => {
|
||||||
|
const body = await readBody(e);
|
||||||
|
const id = new Snowflake().toString();
|
||||||
|
|
||||||
|
if (!checkIsClient(body)) return; // checkIsClient already throws an detailed error
|
||||||
|
|
||||||
|
await database.query(
|
||||||
|
"INSERT INTO `clients` VALUES (?, ?, ?, ?, ?)",
|
||||||
|
[id, body.name, body.address, body.phone, body.email],
|
||||||
|
);
|
||||||
|
|
||||||
|
// FIXME: data may be turncated in the database
|
||||||
|
// either throw an error when data is too large or
|
||||||
|
// reply with turncated data
|
||||||
|
return { id, ...body };
|
||||||
|
});
|
||||||
17
server/api/clients/[id].delete.ts
Normal file
17
server/api/clients/[id].delete.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
/* global defineEventHandler, createError */
|
||||||
|
import { ResultSetHeader } from "mysql2";
|
||||||
|
|
||||||
|
import { database } from "~/server/utils/database";
|
||||||
|
|
||||||
|
export default defineEventHandler(async (e) => {
|
||||||
|
const id = e.context.params?.id as string;
|
||||||
|
|
||||||
|
const [result] = await database.query(
|
||||||
|
"DELETE FROM `clients` WHERE `id` = ?",
|
||||||
|
[id],
|
||||||
|
) as unknown as [ResultSetHeader];
|
||||||
|
|
||||||
|
if (result.affectedRows === 0) throw createError({ statusCode: 404 });
|
||||||
|
|
||||||
|
return null;
|
||||||
|
});
|
||||||
20
server/api/clients/[id].get.ts
Normal file
20
server/api/clients/[id].get.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
/* global defineEventHandler, createError */
|
||||||
|
|
||||||
|
import { database, data } from "~/server/utils/database";
|
||||||
|
import { client } from "~/utils/types/database";
|
||||||
|
|
||||||
|
export default defineEventHandler(async (e) => {
|
||||||
|
const id = e.context.params?.id;
|
||||||
|
const [data] = await database.query(
|
||||||
|
"SELECT *, CONVERT(`id`, CHAR) AS `id` FROM `clients` WHERE `id` = ?",
|
||||||
|
[id],
|
||||||
|
) as unknown as data<client>;
|
||||||
|
|
||||||
|
if (!data[0]) {
|
||||||
|
throw createError({
|
||||||
|
statusCode: 404,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return data[0];
|
||||||
|
});
|
||||||
36
server/api/clients/[id].patch.ts
Normal file
36
server/api/clients/[id].patch.ts
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
/* global defineEventHandler, readBody, createError */
|
||||||
|
|
||||||
|
import { ResultSetHeader } from "mysql2";
|
||||||
|
|
||||||
|
import { checkIsClient } from "../clients.post";
|
||||||
|
import { client } from "~/utils/types/database";
|
||||||
|
import { database, data } from "~/server/utils/database";
|
||||||
|
|
||||||
|
export default defineEventHandler(async (e) => {
|
||||||
|
const body = await readBody(e);
|
||||||
|
const id = e.context.params?.id as string;
|
||||||
|
|
||||||
|
if (!checkIsClient(body, false)) return; // checkIsClient already throws an detailed error
|
||||||
|
|
||||||
|
for (const [k, v] of Object.entries(body)) {
|
||||||
|
const [res] = await database.query(
|
||||||
|
// I believe it is safe to put key in the template
|
||||||
|
// because it is limited to 4 values here
|
||||||
|
`UPDATE \`clients\` SET \`${k}\` = ? WHERE \`id\` = ?`,
|
||||||
|
[v, id],
|
||||||
|
) as unknown as [ResultSetHeader];
|
||||||
|
|
||||||
|
if (res.affectedRows !== 1) {
|
||||||
|
throw createError({
|
||||||
|
statusCode: 404,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const [data] = await database.query(
|
||||||
|
"SELECT *, CONVERT(`id`, CHAR) AS `id` FROM `clients` WHERE `id` = ?",
|
||||||
|
[id],
|
||||||
|
) as unknown as data<client>;
|
||||||
|
|
||||||
|
return data[0];
|
||||||
|
});
|
||||||
12
server/api/clients/count.get.ts
Normal file
12
server/api/clients/count.get.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
/* global defineEventHandler, createError */
|
||||||
|
|
||||||
|
import { database, data } from "~/server/utils/database";
|
||||||
|
|
||||||
|
export default defineEventHandler(async (e) => {
|
||||||
|
const [[data]] = await database.query(
|
||||||
|
"SELECT COUNT(*) as `count` FROM `clients`",
|
||||||
|
) as unknown as data<{count: number}>;
|
||||||
|
|
||||||
|
if (!data) throw createError("Database returned no rows");
|
||||||
|
return data;
|
||||||
|
});
|
||||||
9
server/api/dbtest.get.ts
Normal file
9
server/api/dbtest.get.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
/* global defineEventHandler */
|
||||||
|
|
||||||
|
import { database } from "../utils/database";
|
||||||
|
|
||||||
|
export default defineEventHandler(async () => {
|
||||||
|
const [owo] = await database.execute("SELECT * FROM `sch_baza_smartfony`.`lombardy`");
|
||||||
|
|
||||||
|
return owo as {id: number, nazwa: string, adres: string, kontakt: string}[];
|
||||||
|
});
|
||||||
26
server/api/dbtest.post.ts
Normal file
26
server/api/dbtest.post.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
/* global defineEventHandler, readBody */
|
||||||
|
|
||||||
|
import { RowDataPacket } from "mysql2";
|
||||||
|
|
||||||
|
import { database } from "../utils/database";
|
||||||
|
import { isString } from "../utils/isString";
|
||||||
|
|
||||||
|
export default defineEventHandler(async (e) => {
|
||||||
|
const data = await readBody(e);
|
||||||
|
|
||||||
|
const nazwa = data.nazwa;
|
||||||
|
const adres = data.adres;
|
||||||
|
const kontakt = data.kontakt;
|
||||||
|
|
||||||
|
if (!isString(nazwa)) throw new Error("nazwa is not string");
|
||||||
|
if (!isString(adres)) throw new Error("adres is not string");
|
||||||
|
if (!isString(kontakt)) throw new Error("kontakt is not string");
|
||||||
|
|
||||||
|
const [inserted] = await database.query("INSERT INTO `sch_baza_smartfony`.`lombardy` (`nazwa`, `adres`, `kontakt`) VALUES (?, ?, ?);", [nazwa, adres, kontakt]) as RowDataPacket[];
|
||||||
|
return {
|
||||||
|
id: inserted.insertId as number,
|
||||||
|
nazwa,
|
||||||
|
adres,
|
||||||
|
kontakt,
|
||||||
|
};
|
||||||
|
});
|
||||||
9
server/api/dbtest/[id].delete.ts
Normal file
9
server/api/dbtest/[id].delete.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
/* global defineEventHandler */
|
||||||
|
|
||||||
|
import { database } from "~/server/utils/database";
|
||||||
|
|
||||||
|
export default defineEventHandler(async (e) => {
|
||||||
|
if (!e.context.params?.id) return Error("id is not provided");
|
||||||
|
const rowID = e.context.params.id;
|
||||||
|
await database.execute("DELETE FROM `sch_baza_smartfony`.`lombardy` WHERE `id` = ?", [rowID]);
|
||||||
|
});
|
||||||
6
server/api/echo.post.ts
Normal file
6
server/api/echo.post.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
/* global defineEventHandler */
|
||||||
|
|
||||||
|
export default defineEventHandler((event) => {
|
||||||
|
const message = event.node.req.read();
|
||||||
|
return message;
|
||||||
|
});
|
||||||
5
server/api/hi.ts
Normal file
5
server/api/hi.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
/* global defineEventHandler */
|
||||||
|
|
||||||
|
export default defineEventHandler(() => {
|
||||||
|
return "Hi mom!";
|
||||||
|
});
|
||||||
40
server/api/login.post.ts
Normal file
40
server/api/login.post.ts
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
/* global defineEventHandler, getCookie, setCookie, readBody, createError */
|
||||||
|
import crypto from "crypto";
|
||||||
|
|
||||||
|
import { database, data } from "../utils/database";
|
||||||
|
import { isString } from "../utils/isString";
|
||||||
|
import Snowflake from "../utils/snowflake";
|
||||||
|
import { cookieSettings } from "../utils/rootUtils";
|
||||||
|
|
||||||
|
export default defineEventHandler(async (e) => {
|
||||||
|
if (getCookie(e, "token"))
|
||||||
|
throw createError({ statusCode: 501, message: "Case not implemented: logging in while cookie is set" });
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 420));
|
||||||
|
const data = await readBody(e);
|
||||||
|
|
||||||
|
const login = data.login;
|
||||||
|
const password = data.password;
|
||||||
|
|
||||||
|
if (!isString(login)) throw createError({ statusCode: 400, message: "Login is not string." });
|
||||||
|
if (!isString(password)) throw createError({ statusCode: 400, message: "Password is not string." });
|
||||||
|
|
||||||
|
const hashedPassword = crypto.createHmac("sha512", "42")
|
||||||
|
.update(password)
|
||||||
|
.digest("hex");
|
||||||
|
|
||||||
|
const [account] = await database.query(
|
||||||
|
"SELECT CONVERT(`id`, CHAR(32)) AS `id` from `users` WHERE `username` = ? AND LOWER(HEX(`password`)) = ? LIMIT 1",
|
||||||
|
[login, hashedPassword],
|
||||||
|
)as unknown as data<{id: string}>;
|
||||||
|
|
||||||
|
if (account.length === 0) throw createError({ statusCode: 400, message: "Invalid username or password." });
|
||||||
|
|
||||||
|
const sessionId = new Snowflake().toString();
|
||||||
|
|
||||||
|
await database.query(
|
||||||
|
"INSERT INTO `sessions` (`id`, `user`) VALUES ( ? , ? )",
|
||||||
|
[sessionId, account[0].id],
|
||||||
|
);
|
||||||
|
setCookie(e, "token", sessionId, cookieSettings);
|
||||||
|
return { message: "Login successful", token: sessionId };
|
||||||
|
});
|
||||||
29
server/api/logout.ts
Normal file
29
server/api/logout.ts
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
/* global defineEventHandler, createError, getCookie, deleteCookie */
|
||||||
|
|
||||||
|
import { isAuthorised } from "../middleware/auth";
|
||||||
|
import { database } from "../utils/database";
|
||||||
|
import { cookieSettings } from "../utils/rootUtils";
|
||||||
|
|
||||||
|
export default defineEventHandler(async (e) => {
|
||||||
|
const token = getCookie(e, "token");
|
||||||
|
if (token === undefined) {
|
||||||
|
throw createError({
|
||||||
|
statusCode: 401,
|
||||||
|
data: "You can't log out if you're already logged out (no session cookie)",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
deleteCookie(e, "token", cookieSettings);
|
||||||
|
if (!await isAuthorised(token)) {
|
||||||
|
throw createError({
|
||||||
|
statusCode: 401,
|
||||||
|
message: "You can't log out if you're already logged out (session expired or never existed)",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
database.query(
|
||||||
|
"DELETE FROM `sessions` WHERE `id` = ?",
|
||||||
|
[token],
|
||||||
|
);
|
||||||
|
return { message: "Logged out" };
|
||||||
|
});
|
||||||
14
server/api/users/me.get.ts
Normal file
14
server/api/users/me.get.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
/* global defineEventHandler, getCookie */
|
||||||
|
|
||||||
|
import { database, data } from "~/server/utils/database";
|
||||||
|
import { user } from "~/utils/types/database";
|
||||||
|
|
||||||
|
export default defineEventHandler(async (e) => {
|
||||||
|
const token = getCookie(e, "token");
|
||||||
|
const [[userData]] = await database.query(
|
||||||
|
"SELECT CONVERT(`users`.`id`, CHAR(32)) as `id`, `users`.`username` as `username`, `users`.`email` as `email`, `users`.`display_name` as `display_name` FROM `sessions` LEFT JOIN `users` ON `sessions`.`user` = `users`.`id` WHERE `sessions`.`id` = ?",
|
||||||
|
[token],
|
||||||
|
) as unknown as data<user>;
|
||||||
|
|
||||||
|
return userData;
|
||||||
|
});
|
||||||
40
server/middleware/auth.ts
Normal file
40
server/middleware/auth.ts
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
/* global defineEventHandler, createError, getCookie */
|
||||||
|
|
||||||
|
import { database, data } from "~/server/utils/database";
|
||||||
|
|
||||||
|
const endpointsWithoutAuth: string[] = [
|
||||||
|
"/dbtest",
|
||||||
|
"/echo",
|
||||||
|
"/hi",
|
||||||
|
"/login",
|
||||||
|
"/logout",
|
||||||
|
];
|
||||||
|
|
||||||
|
export default defineEventHandler(async (e) => {
|
||||||
|
const endpoint = e.path?.match(/^\/api(\/.*)/)?.[1];
|
||||||
|
|
||||||
|
// if client does not access api
|
||||||
|
if (!endpoint) return;
|
||||||
|
|
||||||
|
for (const i of endpointsWithoutAuth)
|
||||||
|
// if accessed endpoint doesn't require auth
|
||||||
|
if (endpoint.startsWith(i)) return;
|
||||||
|
|
||||||
|
const token = getCookie(e, "token");
|
||||||
|
if (!await isAuthorised(token))
|
||||||
|
throw createError({ statusCode: 401, message: "Unauthorized" });
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Checks if the token is authorised
|
||||||
|
* @param token the token to ckeck
|
||||||
|
*/
|
||||||
|
export async function isAuthorised(token: string | undefined): Promise<boolean> {
|
||||||
|
if (!token) return false;
|
||||||
|
const [[session]] = await database.query(
|
||||||
|
"SELECT EXISTS(SELECT `id` FROM `sessions` WHERE `id` = ? AND `expiry_date` >= NOW()) as `logged_in`",
|
||||||
|
[token],
|
||||||
|
) as unknown as data<{logged_in: number}>;
|
||||||
|
|
||||||
|
return session.logged_in === 1;
|
||||||
|
}
|
||||||
20
server/utils/baaPagination.ts
Normal file
20
server/utils/baaPagination.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
|
||||||
|
type queryType = {
|
||||||
|
type: "before" | "after" | "around",
|
||||||
|
id: string
|
||||||
|
} | {
|
||||||
|
type: null
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Before, around, after pagination wrapper
|
||||||
|
*/
|
||||||
|
export default class baaPagination<T> {
|
||||||
|
readonly table: string;
|
||||||
|
readonly key: string;
|
||||||
|
|
||||||
|
constructor(table: string, key: string) {
|
||||||
|
this.table = table;
|
||||||
|
this.key = key;
|
||||||
|
}
|
||||||
|
}
|
||||||
11
server/utils/database.ts
Normal file
11
server/utils/database.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
import mysql from "mysql2/promise";
|
||||||
|
|
||||||
|
export const database = await mysql.createConnection({
|
||||||
|
host: process.env.DB_HOST,
|
||||||
|
port: Number(process.env.DB_PORT),
|
||||||
|
user: process.env.DB_USER,
|
||||||
|
password: process.env.DB_PASSWORD,
|
||||||
|
database: process.env.DB_SCHEMA,
|
||||||
|
});
|
||||||
|
|
||||||
|
export type data<T> = [T[], mysql.FieldPacket[]];
|
||||||
3
server/utils/isString.ts
Normal file
3
server/utils/isString.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
export function isString(value: unknown): value is string {
|
||||||
|
return typeof value === "string";
|
||||||
|
}
|
||||||
1
server/utils/rootUtils.ts
Normal file
1
server/utils/rootUtils.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * from "../../utils/cookieSettings";
|
||||||
43
server/utils/snowflake.ts
Normal file
43
server/utils/snowflake.ts
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
export default class Snowflake {
|
||||||
|
static current_increment = 0n;
|
||||||
|
|
||||||
|
public static increment() {
|
||||||
|
this.current_increment = BigInt.asUintN(12, this.current_increment + 1n);
|
||||||
|
return this.current_increment;
|
||||||
|
}
|
||||||
|
|
||||||
|
state = 0n;
|
||||||
|
public set_timestamp(value: number | bigint) {
|
||||||
|
value = BigInt.asUintN(64 - 22, BigInt(value));
|
||||||
|
const state = BigInt.asUintN(22, this.state);
|
||||||
|
this.state = state + (value << 22n);
|
||||||
|
}
|
||||||
|
|
||||||
|
public set_machineid(value: number | bigint) {
|
||||||
|
value = BigInt.asUintN(12 - 17, BigInt(value));
|
||||||
|
const state = BigInt.asUintN(17, this.state) + (this.state >> 22n) << 22n;
|
||||||
|
this.state = state + (value << 12n);
|
||||||
|
}
|
||||||
|
|
||||||
|
public set_processid(value: number | bigint) {
|
||||||
|
value = BigInt.asUintN(17 - 12, BigInt(value));
|
||||||
|
const state = BigInt.asUintN(12, this.state) + (this.state >> 17n) << 17n;
|
||||||
|
this.state = state + (value << 12n);
|
||||||
|
}
|
||||||
|
|
||||||
|
public set_increment(value: number | bigint) {
|
||||||
|
value = BigInt.asUintN(12 - 0, BigInt(value));
|
||||||
|
const state = (this.state >> 12n) << 12n;
|
||||||
|
this.state = state + (value << 0n);
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.set_timestamp(Date.now());
|
||||||
|
this.set_processid(1);
|
||||||
|
this.set_increment(Snowflake.increment());
|
||||||
|
}
|
||||||
|
|
||||||
|
public toString() {
|
||||||
|
return this.state.toString();
|
||||||
|
}
|
||||||
|
}
|
||||||
4
tsconfig.json
Normal file
4
tsconfig.json
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
// https://nuxt.com/docs/guide/concepts/typescript
|
||||||
|
"extends": "./.nuxt/tsconfig.json",
|
||||||
|
}
|
||||||
6
utils/cookieSettings.ts
Normal file
6
utils/cookieSettings.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { CookieSerializeOptions } from "cookie-es";
|
||||||
|
|
||||||
|
export const cookieSettings: CookieSerializeOptions = {
|
||||||
|
sameSite: "lax",
|
||||||
|
maxAge: 60 * 60 * 24 * 30,
|
||||||
|
};
|
||||||
68
utils/types/database.ts
Normal file
68
utils/types/database.ts
Normal file
|
|
@ -0,0 +1,68 @@
|
||||||
|
export interface client {
|
||||||
|
id: string,
|
||||||
|
name: string | null,
|
||||||
|
address: string | null,
|
||||||
|
phone: string | null,
|
||||||
|
email: string | null,
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface user {
|
||||||
|
id: string,
|
||||||
|
username: string,
|
||||||
|
email: string,
|
||||||
|
display_name?: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface session {
|
||||||
|
id: string,
|
||||||
|
user: string,
|
||||||
|
expiry_date: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface imported_product {
|
||||||
|
id: string,
|
||||||
|
// order: string,
|
||||||
|
name?: string,
|
||||||
|
link: string,
|
||||||
|
price_imported: string,
|
||||||
|
price: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface offer {
|
||||||
|
id: string,
|
||||||
|
name: string,
|
||||||
|
description?: string,
|
||||||
|
recommended_price?: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface work {
|
||||||
|
id: string,
|
||||||
|
// order: string,
|
||||||
|
offer: string|offer,
|
||||||
|
price: string,
|
||||||
|
notes: string,
|
||||||
|
is_fulfilled: boolean,
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface order {
|
||||||
|
id: string,
|
||||||
|
client: client|string,
|
||||||
|
user: user|string,
|
||||||
|
is_draft: boolean,
|
||||||
|
imported_products: imported_product[],
|
||||||
|
work: work[],
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface work_template {
|
||||||
|
id: string,
|
||||||
|
// order_template: string,
|
||||||
|
offer: string|offer,
|
||||||
|
price: string,
|
||||||
|
notes?: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface order_template {
|
||||||
|
id: string,
|
||||||
|
name: string,
|
||||||
|
description?: string,
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue