Move Navigation from NavDrawer to AppBar, redesign page structure and routes

software/src/pages/shows/ticketsPage/productDetailsDialog.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { VNumberInput } from 'vuetify/labs/VNumberInput'
+import { ModelRef, ref, watch } from 'vue';
+import { useBasketStore } from '@/data/stores/basketStore';
+import { calcPrice } from '@/scripts/productScripts';
+import ActionDialog from '@/components/actionDialog.vue'
+import { ProductModel } from '@/data/models/productModel';
+import outlinedButton from '@/components/outlinedButton.vue';
+
+const props = defineProps({
+  product: {
+    type: ProductModel,
+    default: new ProductModel()
+  }
+})
+
+const showDialog: ModelRef<boolean> = defineModel()
+const nrOfArticles = ref(1)
+const basketStore = useBasketStore()
+const selectedImage = ref("")
+
+function addProductToBasket() {
+  basketStore.addItemToBasket(props.product, nrOfArticles.value)
+  nrOfArticles.value = 1
+  showDialog.value = false
+}
+
+watch(() => props.product.images, () => {
+  selectedImage.value = 'http://localhost:3000/static/' + props.product.images[0]
+})
+</script>
+
+<template>
+  <action-dialog
+    :title="product.brand.name + ': ' + product.name"
+    :icon="product.category.icon"
+    :subtitle="product.category.name"
+    v-model="showDialog"
+  >
+    <v-row>
+      <!-- Image col -->
+      <v-col>
+        <v-row>
+          <v-col class="py-0">
+            <v-sheet color="white">
+              <v-img :src="selectedImage" height="600" />
+            </v-sheet>
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-spacer />
+
+          <v-col v-for="image in product.images">
+            <v-card
+              width="60"
+              @click="selectedImage = 'http://localhost:3000/static/' + image"
+              color="white"
+            >
+              <v-img :src="'http://localhost:3000/static/' + image" height="60" />
+            </v-card>
+          </v-col>
+
+          <v-spacer />
+        </v-row>
+      </v-col>
+
+
+      <!-- Product description col -->
+      <v-col>
+        <v-row>
+          <v-col class="text-h6 pt-0">
+            {{ $t("product.description") }}
+          </v-col>
+        </v-row>
+
+        <v-row class="text-body-1 mt-0"  style="height: 450px; overflow-y: auto;">
+          <div v-if="product.description.length != 0">
+            <v-col class="text-body-1">
+            {{ product.description }}
+          </v-col>
+          </div>
+
+          <div v-if="product.specs.length > 1">
+            <v-list>
+              <v-list-item v-for="spec in product.specs">
+                <v-icon icon="mdi-circle-small" /> {{ spec }}
+              </v-list-item>
+            </v-list>
+          </div>
+        </v-row>
+
+        <v-divider class="my-4" />
+
+        <v-row>
+          <v-col class="pb-0">
+            <div class="d-flex align-center flex-column">
+              <div class="text-h3"> {{ product.rating }} <span class="text-h6 ml-n3">/5</span> </div>
+              <v-rating :model-value="product.rating" color="yellow-darken-3" half-increments disabled />
+            </div>
+          </v-col>
+        </v-row>
+
+        <v-divider class="my-4" />
+
+        <v-row>
+          <v-col cols="3">
+            <div class="pt-3">
+              <div v-if="product.inStock > 5" class="text-green-lighten-1">
+                {{ $t("product.storedItemsAvailable", [product.inStock]) }}
+              </div>
+              <div v-else-if="product.inStock > 0" class="text-orange-lighten-1">
+                {{ $t("product.storedItemsAvailable", [product.inStock]) }}
+              </div>
+              <div v-else class="text-red">
+                {{ $t("product.soldOut") }}
+              </div>
+            </div>
+          </v-col>
+          <v-col class="d-flex align-end flex-column my-auto">
+            <div v-if="product.discount == 0" class="text-h3">{{ product.price }} €</div>
+            <div v-else class="d-flex align-center flex-column my-auto">
+              <div class="text-h3"> 
+                <span class="text-red-lighten-1"> {{ calcPrice(product.price, product.discount) }} €</span>
+                <span class="text-h6 ml-2 text-decoration-line-through">{{ product.price }} € </span>
+                <span class="text-h6 ml-4 mb-1 bg-red">-{{ product.discount }} %</span>
+              </div>
+            </div>
+          </v-col>
+        </v-row>
+      </v-col>
+    </v-row>
+
+    <template #actions>
+      <v-number-input
+        max-width="200"
+        :reverse="false"
+        controlVariant="default"
+        :label="$t('quantity')"
+        :hideInput="false"
+        :inset="true"
+        v-model="nrOfArticles"
+        variant="outlined"
+        :min="1"
+        :max="product.inStock"
+        density="comfortable"
+        :hide-details="true"
+        :disabled="product.inStock == 0"
+      />
+
+      <outlined-button
+        prepend-icon="mdi-cart-plus"
+        @click="addProductToBasket"
+        height="50"
+        :disabled="product.inStock == 0"
+      >
+        {{ $t('addToBasket') }}
+      </outlined-button>
+    </template>
+  </action-dialog>
+</template>