update cuz presentation

components/alerts.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { VAlert } from 'vuetify/components';
+import { computed } from 'vue';
+export type AlertData = Pick<InstanceType<typeof VAlert>["$props"],
+  | "color"
+  | "icon"
+  | "text"
+  | "title"
+  | "type"
+  | "closable"
+  | "closeIcon"
+>;
+
+const props = defineProps<{
+  alerts: Array<AlertData>;
+}>();
+
+// eslint-disable-next-line func-call-spacing
+const emit = defineEmits<{
+  (e: "update:alerts", value: typeof props.alerts): void,
+}>();
+
+const alerts = computed({
+  get() { return props.alerts ?? []; },
+  set(value: typeof props.alerts) { emit("update:alerts", value); },
+});
+
+</script>
+
+<template>
+  <VOverlay
+    model-value
+    :scrim="false"
+    no-click-animation
+    persistent
+    class="alerts"
+  >
+    <VAlert
+      v-for="i of alerts"
+      :key="alerts.indexOf(i)"
+      class="alert"
+      :color=" i.color"
+      model-value
+      :icon="i.icon ?? false"
+      :text="i.text"
+      :title="i.title"
+      :type="i.type ?? 'error'"
+      :closable="i.closable ?? true"
+      :close-icon="i.closeIcon ?? undefined"
+    />
+  </VOverlay>
+</template>
+
+<style scoped>
+.alerts {
+  flex-direction: column-reverse;
+  align-items: center;
+}
+
+.alert {
+  margin: 0.5em;
+}
+</style>

components/entryEditor.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+type optionalMap<Optional> = Optional extends true ? undefined : string | number;
+// type typeMap<Type extends string = {};
+
+export type fieldDefinition<Optional extends boolean = boolean> = {
+  key: string,
+  label?: string,
+  type: "text" | "number",
+  optional?: Optional,
+  value?: optionalMap<Optional>,
+}
+
+const props = defineProps<{
+  fields: Array<fieldDefinition>,
+  modelValue?: any,
+}>();
+
+// eslint-disable-next-line func-call-spacing
+const emit = defineEmits<{
+  (e: "update:modelValue", value: any): void,
+  (e: "updateSubModelValue", key: fieldDefinition["key"], value: fieldDefinition["value"]): void,
+}>();
+
+const modelValue = ref<{[key: string]: string | number | undefined}>({});
+
+for (const i of props.fields) {
+  modelValue.value[i.key] = i.value;
+  emit("updateSubModelValue", i.key, i.value);
+}
+
+function updateModel(key: string, v: any) {
+  modelValue.value[key] = v;
+  emit("update:modelValue", modelValue.value);
+  emit("updateSubModelValue", key, v);
+}
+
+emit("update:modelValue", modelValue.value);
+</script>
+
+<template>
+  <VTextField
+    v-for="i of fields"
+    :key="i.key"
+    :model-value="modelValue[i.key]"
+    :label="i.label"
+    :type="i.type"
+    @update:model-value="v => updateModel(i.key, v)"
+  />
+</template>

components/navigation/navigation.vue

@@ -13,18 +13,20 @@ const navOpen = ref(!mobile.value);
     <VToolbarTitle>Database Project</VToolbarTitle>
   </VAppBar>
   <VNavigationDrawer v-model="navOpen" :temporary="mobile">
-    <VList>
+    <!-- <VList>
       <VListItem
         prepend-avatar="https://cdn.discordapp.com/avatars/317001025074757632/248f503c44bc95ac75f55f5835e6ff9f.png?size=512"
         title="Anonymous"
       />
-    </VList>
+    </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-account" title="Clients" value="/clients" @click="navigateTo('/clients')" />
+      <VDivider />
+      <VListItem prepend-icon="mdi-home" title="Home" value="/" @click="navigateTo('/')" />
       <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>

components/orderView.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { order as orderType } from '~/utils/types/database';
+
+const props = defineProps<{
+  order?: orderType
+}>();
+
+</script>
+
+<template>
+  <!-- <VRow v-if="props.order">
+    {{ props.order.id }}
+  </VRow> -->
+  <VCol>
+    <div v-if="props.order && props.order.work.length !== 0">
+      <span class="text-h4">Works</span>
+      <VTable class="noScroll">
+        <thead>
+          <tr>
+            <th>fulfilled</th>
+            <th>offer</th>
+            <th>price</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="i in props.order.work" :key="i.id">
+            <td>{{ i.is_fulfilled }}</td>
+            <td>
+              {{ i.offer.name }}
+            </td>
+            <td>{{ i.price }} PLN</td>
+          </tr>
+        </tbody>
+      </VTable>
+    </div>
+    <div v-if="props.order && props.order.imported_products.length !== 0">
+      <span class="text-h4">Imported products</span>
+      <VTable>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>link</th>
+            <th>price</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="i in props.order.imported_products" :key="i.id">
+            <td>{{ i.name }}</td>
+            <td>{{ i.link }}</td>
+            <td>{{ i.price }} PLN</td>
+          </tr>
+        </tbody>
+      </VTable>
+    </div>
+  </VCol>
+</template>

components/pagedList.vue

@@ -2,6 +2,7 @@
 const props = defineProps<{
   records: Array<any>,
   recordKey: string,
+  recordValue?: string,
   variant?: "default" | "inset" | "accordion" | "popout",
   modelValue?: any,
 }>();
@@ -22,6 +23,7 @@ defineEmits<{
       v-for="record in records"
       :key="record[recordKey]"
       :variant="props.variant ?? 'default'"
+      :value="recordValue !== undefined ? record[recordValue] : undefined"
     >
       <template #title>
         <slot name="title" :record="record" />

components/pagedTable.vue

@@ -53,4 +53,8 @@ defineEmits<{
     flex-direction: row;
     flex-wrap: nowrap;
   }
+
+  tr:hover {
+    background-color: rgba(var(--v-theme-on-background), calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier)));
+  }
 </style>