Extend database with more tables, rewrite API doc, improve API endpoints

2024-09-23 21:22:45 +02:00
parent 8b4db9ccc8
commit b245e3803a
41 changed files with 1345 additions and 1126 deletions
--- a/software/src/components/actionDialog.vue
+++ b/software/src/components/actionDialog.vue
@@ -10,8 +10,7 @@ defineProps({
    type: String
  },
  subtitle: {
-    type: String,
-    default: ""
+    type: String
  }
 })
 </script>
--- a/software/src/components/confirmDialog.vue
+++ b/software/src/components/confirmDialog.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ModelRef } from 'vue';
 import actionDialog from './actionDialog.vue';
+import outlinedButton from './outlinedButton.vue';

 const showDialog: ModelRef<boolean> = defineModel()

@@ -31,21 +32,19 @@ function confirmPressed() {
    </v-container>

    <template #actions>
-      <v-btn
+      <outlined-button
        @click="showDialog = false" 
        color="green"
-        variant="outlined"
      >
        {{ $t("dialog.cancel") }}
-      </v-btn>
+      </outlined-button>

-      <v-btn
+      <outlined-button
        @click="confirmPressed"
        color="red"
-        variant="outlined"
      >
        {{ $t("dialog.confirm") }}
-      </v-btn>
+      </outlined-button>
    </template>
  </action-dialog>
 </template>
--- a/software/src/components/outlinedButton.vue
+++ b/software/src/components/outlinedButton.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps({
+  prependIcon: String,
+  color: {
+    type: String,
+    default: "primary"
+  }
+})
+</script>
+
+<template>
+  <v-btn 
+    :prepend-icon="prependIcon"
+    variant="outlined"
+    :color="color"
+  >
+    <slot></slot>
+  </v-btn>
+</template>
--- a/software/src/data/api/orderApi.ts
+++ b/software/src/data/api/orderApi.ts
@@ -1,7 +1,16 @@
 import axios from "axios"
+import { OrderModel } from "../models/orderModel"
+import { BasketItemModel } from "../models/basketItemModel"

 const BASE_URL = "http://localhost:3000/orders"

 export async function getUserOrders(userId: number) {
  return axios.get(BASE_URL + "/" + userId)
+}
+
+export async function addOrder(accountId: number, basketItems: Array<BasketItemModel>) {
+  return axios.post(BASE_URL, {
+    "accountId": accountId,
+    "orderItem": basketItems
+  })
 }
--- a/software/src/data/models/basketItemModel.ts
+++ b/software/src/data/models/basketItemModel.ts
@@ -1,5 +1,5 @@
 export class BasketItemModel {
-  productId: number = -1
+  id: number = -1
  brand: string = ""
  name: string = ""
  categoryName: string = ""
--- a/software/src/data/stores/basketStore.ts
+++ b/software/src/data/stores/basketStore.ts
@@ -4,6 +4,9 @@ import { calcProductPrice } from "@/scripts/productScripts";
 import { BasketItemModel } from "../models/basketItemModel";
 import { useFeedbackStore } from "./feedbackStore";
 import { BannerStateEnum } from "../enums/bannerStateEnum";
+import { OrderModel } from "../models/orderModel";
+import { useUserStore } from "./userStore";
+import { addOrder } from "../api/orderApi";

 export const useBasketStore = defineStore('basket', {
  state: () => ({
@@ -42,6 +45,18 @@ export const useBasketStore = defineStore('basket', {
      } else {
        this.itemsInBasket.push(item)
      }
+    },
+
+    takeOrder() {
+      const userStore = useUserStore()
+// 
+      // const order = new OrderModel()
+      // order.accountId = userStore.userAccount.id
+      // order.orderItem = this.itemsInBasket
+// 
+      // console.log(order)
+
+      addOrder(userStore.userAccount.id, this.itemsInBasket)
    }
  }
 })
--- a/software/src/locales/de.json
+++ b/software/src/locales/de.json
@@ -46,7 +46,8 @@
    "ordered": "Bestellt",
    "preparingForShipping": "Versandvorbereitung",
    "shipped": "Versendet",
-    "delivered": "Geliefert"
+    "delivered": "Geliefert",
+    "inDelivery": "In Zustellung"
  },
  "userInfo": {
    "firstName": "Vorname",
@@ -90,7 +91,8 @@
  },
  "oclock": "Uhr",
  "ordering": {
-    "ordering": "Bestellabschluss"
+    "ordering": "Bestellabschluss",
+    "takeOrder": "Bestellung ausführen"
  },
  "dialog": {
    "cancel": "Abbrechen",
--- a/software/src/locales/en.json
+++ b/software/src/locales/en.json
@@ -46,7 +46,8 @@
    "ordered": "Ordered",
    "preparingForShipping": "Preparing for shipping",
    "shipped": "Shipped",
-    "delivered": "Delivered"
+    "delivered": "Delivered",
+    "inDelivery": "In Delivery"
  },
  "userInfo": {
    "firstName": "First Name",
@@ -90,7 +91,8 @@
  },
  "oclock": "o'clock",
  "ordering": {
-    "ordering": "Finish order"
+    "ordering": "Finish order",
+    "takeOrder": "Do order now"
  },
  "dialog": {
    "cancel": "Cancel",
--- a/software/src/pages/accountPage/accountDataCard.vue
+++ b/software/src/pages/accountPage/accountDataCard.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useUserStore } from '@/data/stores/userStore';
 import cardView from '@/components/cardView.vue';
+import outlinedButton from '@/components/outlinedButton.vue';

 const userStore = useUserStore()
 </script>
@@ -87,14 +88,13 @@ const userStore = useUserStore()
    </v-container>

    <template #actions>
-      <v-btn
+      <outlined-button
        @click="userStore.updateAccount()"
-        variant="outlined"
        prepend-icon="mdi-content-save"
        color="green"
      >
        Save
-      </v-btn>
+      </outlined-button>
    </template>
  </card-view>
 </template>
--- a/software/src/pages/accountPage/accountManagingCard.vue
+++ b/software/src/pages/accountPage/accountManagingCard.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import cardView from '@/components/cardView.vue';
 import confirmDialog from '@/components/confirmDialog.vue';
+import outlinedButton from '@/components/outlinedButton.vue';
 import { ref } from 'vue';

 const showConfirmDialog = ref(false)
@@ -15,14 +16,13 @@ function deleteAccount() {
    <v-container>
      <v-row>
        <v-col class="d-flex justify-center align-center">
-          <v-btn
+          <outlined-button
            prepend-icon="mdi-delete"
-            variant="outlined"
            color="red"
            @click="showConfirmDialog = true"
          >
            {{ $t("account.delete") }}
-          </v-btn>
+          </outlined-button>
        </v-col>
      </v-row>
    </v-container>
--- a/software/src/pages/basketPage/index.vue
+++ b/software/src/pages/basketPage/index.vue
@@ -5,6 +5,7 @@ import alertBanner from '@/components/alertBanner.vue';
 import cardView from '@/components/cardView.vue';
 import { useUserStore } from '@/data/stores/userStore';
 import orderingDialog from './orderingDialog.vue';
+import outlinedButton from '@/components/outlinedButton.vue';
 import { ref } from 'vue';

 const basketStore = useBasketStore()
@@ -44,7 +45,7 @@ const showOrderingDialog = ref()
          </v-card-text>

          <template #actions>
-            <v-btn
+            <outlined-button
              prepend-icon="mdi-basket-check"
              :disabled="basketStore.itemsInBasket.length == 0 || userStore.userAccount.id == null"
              variant="outlined"
@@ -52,7 +53,7 @@ const showOrderingDialog = ref()
              @click="showOrderingDialog = true"
            >
              {{ $t('orderNow') }}
-            </v-btn>
+            </outlined-button>
          </template>
        </card-view>
      </v-col>
--- a/software/src/pages/basketPage/orderingDialog.vue
+++ b/software/src/pages/basketPage/orderingDialog.vue
@@ -1,9 +1,25 @@
 <script setup lang="ts">
 import actionDialog from '@/components/actionDialog.vue';
+import { useBasketStore } from '@/data/stores/basketStore';
+import outlinedButton from '@/components/outlinedButton.vue';
+
+const basketStore = useBasketStore()
+
+function doOrder() {
+  basketStore.takeOrder()
+}
 </script>

 <template>
  <action-dialog
    :title="$t('ordering.ordering')"
-  />
+  >
+    <template #actions>
+      <outlined-button
+        @click="doOrder"
+      >
+        {{ $t('ordering.takeOrder') }}
+      </outlined-button>
+    </template>
+  </action-dialog>
 </template>
--- a/software/src/pages/loginPage/loginForm.vue
+++ b/software/src/pages/loginPage/loginForm.vue
@@ -2,6 +2,7 @@
 import { useUserStore } from '@/data/stores/userStore';
 import { ref } from 'vue';
 import cardView from '@/components/cardView.vue';
+import outlinedButton from '@/components/outlinedButton.vue';

 const userStore = useUserStore()
 const showRegisterCard = defineModel("showRegisterCard", { type: Boolean, default: false })
@@ -31,13 +32,19 @@ function startLogin() {
    </v-container>

    <template #actions>
-      <v-btn variant="outlined" @click="showRegisterCard = true" color="primary" prepend-icon="mdi-plus">
+      <outlined-button 
+        @click="showRegisterCard = true"
+        prepend-icon="mdi-plus"
+      >
        {{ $t('account.noAccountRegister') }}
-      </v-btn>
-      <v-spacer />
-      <v-btn variant="outlined" append-icon="mdi-arrow-right" color="primary"
-        @click="startLogin">{{ $t('menu.login') }}</v-btn>
-    </template>
+      </outlined-button>

+      <outlined-button
+        append-icon="mdi-arrow-right"
+        @click="startLogin"
+      >
+        {{ $t('menu.login') }}
+      </outlined-button>
+    </template>
  </card-view>
 </template>
--- a/software/src/pages/loginPage/registerForm.vue
+++ b/software/src/pages/loginPage/registerForm.vue
@@ -3,6 +3,7 @@ import { AccountModel } from '@/data/models/accountModel';
 import { useUserStore } from '@/data/stores/userStore';
 import { ref } from 'vue';
 import cardView from '@/components/cardView.vue';
+import outlinedButton from '@/components/outlinedButton.vue';

 const newUser = ref(new AccountModel())
 const showRegisterCard = defineModel("showRegisterCard", { type: Boolean, default: false })
@@ -78,15 +79,19 @@ const userStore = useUserStore()
    </v-container>

    <template #actions>
-      <v-btn prepend-icon="mdi-arrow-left" color="primary" variant="outlined" 
-        @click="showRegisterCard = false">
-          {{ $t('account.backToLogin') }}
-        </v-btn>
-      <v-spacer />
-      <v-btn prepend-icon="mdi-account-plus" color="primary" variant="outlined" 
-        @click="userStore.registerAccount(newUser)">
-          {{ $t('account.register') }}
-        </v-btn>
+      <outlined-button
+        prepend-icon="mdi-arrow-left" 
+        @click="showRegisterCard = false"
+      >
+        {{ $t('account.backToLogin') }}
+      </outlined-button>
+
+      <outlined-button
+        prepend-icon="mdi-account-plus"
+        @click="userStore.registerAccount(newUser)"
+      >
+        {{ $t('account.register') }}
+      </outlined-button>
    </template>
  </card-view>
 </template>
--- a/software/src/pages/ordersPage/ordersCard.vue
+++ b/software/src/pages/ordersPage/ordersCard.vue
@@ -6,13 +6,13 @@ defineProps({
  order: OrderModel
 })

-function getDotColor(order, step: number) {
-  if (order.shippingProgress == step)
-  {
-    return "orange"
-  } else if (order.shippingProgress >= step) 
+function getDotColor(order: OrderModel, step: number) {
+  if (order.shippingProgress >= step)
  {
    return "green"
+  } else if (order.shippingProgress + 1 == step) 
+  {
+    return "blue"
  } else 
  {
    return "grey"
@@ -32,7 +32,7 @@ function formatDateTimeString(string: string) {
    :title="$t('orders.orderFrom') + ' ' + formatDateTimeString(order.createdAt) + ' ' + $t('oclock')"
    :subtitle="$t('totalPrice') + ': ' + order.totalPrice + ' €'"
  >
-    <v-timeline direction="horizontal" side="start">
+    <v-timeline direction="horizontal" side="start" size="x-large">
      <v-timeline-item :dot-color="getDotColor(order, 1)" icon="mdi-basket-check">
        {{ $t('orders.ordered') }}
      </v-timeline-item>
@@ -41,11 +41,15 @@ function formatDateTimeString(string: string) {
        {{ $t('orders.preparingForShipping') }}
      </v-timeline-item>

-      <v-timeline-item :dot-color="getDotColor(order, 3)" icon="mdi-truck-fast">
+      <v-timeline-item :dot-color="getDotColor(order, 3)" icon="mdi-send">
        {{ $t('orders.shipped') }}
      </v-timeline-item>

-      <v-timeline-item :dot-color="getDotColor(order, 4)" icon="mdi-package-check">
+      <v-timeline-item :dot-color="getDotColor(order, 4)" icon="mdi-truck-fast">
+        {{ $t('orders.inDelivery') }}
+      </v-timeline-item>
+
+      <v-timeline-item :dot-color="getDotColor(order, 5)" icon="mdi-package-check">
        {{ $t('orders.delivered') }}
      </v-timeline-item>
    </v-timeline>
--- a/software/src/pages/preferencesPage/systemSetup.vue
+++ b/software/src/pages/preferencesPage/systemSetup.vue
@@ -3,7 +3,7 @@ import { BannerStateEnum } from '@/data/enums/bannerStateEnum';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import axios from 'axios';
 import cardView from '@/components/cardView.vue';
-import actionDialog from '@/components/actionDialog.vue';
+import outlinedButton from '@/components/outlinedButton.vue';
 import { ref } from 'vue';
 import confirmDialog from '@/components/confirmDialog.vue';

@@ -18,7 +18,7 @@ function resetDb() {
      }
    })

-  confirmDialog.value = false
+  showConfirmDialog.value = false
  // todo: Request all data
 }

@@ -32,24 +32,21 @@ function resetSettings() {
    <v-container>
      <v-row>
        <v-col class="d-flex justify-center align-center">
-          <v-btn
+          <outlined-button
            @click="showConfirmDialog = true"
            prepend-icon="mdi-database-refresh"
            color="red"
-            variant="outlined"
          >
            {{ $t('preferences.resetDatabase') }}
-          </v-btn>
+          </outlined-button>
        </v-col>
        <v-col class="d-flex justify-center align-center">
-          <v-btn
-            @click="resetDb"
+          <outlined-button
+            @click="resetSettings"
            prepend-icon="mdi-cog-counterclockwise"
-            color="primary"
-            variant="outlined"
          >
            {{ $t('preferences.resetPreferences') }}
-          </v-btn>
+          </outlined-button>
        </v-col>
      </v-row>
    </v-container>
@@ -59,5 +56,6 @@ function resetSettings() {
    :title="$t('dialog.resetConfirm.title')"
    :description="$t('dialog.resetConfirm.description')"
    v-model="showConfirmDialog"
+    :onConfirm="resetDb"
  />
 </template>
--- a/software/src/pages/productsPage/productDetailsDialog.vue
+++ b/software/src/pages/productsPage/productDetailsDialog.vue
@@ -5,7 +5,7 @@ import { useBasketStore } from '@/data/stores/basketStore';
 import { calcProductPrice, productToBasketItem } from '@/scripts/productScripts';
 import ActionDialog from '@/components/actionDialog.vue'
 import { ProductWithCategoryModel } from '@/data/models/productWithCategoryModel';
-import { BasketItemModel } from '@/data/models/basketItemModel';
+import outlinedButton from '@/components/outlinedButton.vue';

 const props = defineProps({
  product: {
@@ -20,9 +20,6 @@ const basketStore = useBasketStore()
 const selectedImage = ref("")

 function addProductToBasket() {
-  basketStore.addItemToBasket(
-    new BasketItemModel()
-  )
  basketStore.addItemToBasket(productToBasketItem(props.product, nrOfArticles.value))
  nrOfArticles.value = 1
  showDialog.value = false
@@ -67,7 +64,6 @@ watch(() => props.product.images, () => {

              <v-spacer />
            </v-row>
-            
          </v-col>


@@ -154,16 +150,14 @@ watch(() => props.product.images, () => {
        :disabled="product.storedItems == 0"
      />

-      <v-btn
+      <outlined-button
        prepend-icon="mdi-cart-plus"
        @click="addProductToBasket"
-        color="primary"
-        variant="outlined"
        height="50"
        :disabled="product.storedItems == 0"
      >
        {{ $t('addToBasket') }}
-      </v-btn>
+      </outlined-button>
    </template>
  </action-dialog>
 </template>