Refactor frontend, display tours with cards on ToursPage

software/src/pages/admin/brandsPage/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import cardView from '@/components/cardView.vue';
-import { useProductStore } from '@/data/stores/productStore';
+// import { useProductStore } from '@/data/stores/productStore';
 
-const productStore = useProductStore()
+// const productStore = useProductStore()
 
 const headers = [
   { title: "Name", value: "name" },
@@ -11,7 +11,7 @@ const headers = [
 </script>
 
 <template>
-  <v-container max-width="800">
+  <!-- <v-container max-width="800">
     <v-row>
       <v-col>
         <card-view
@@ -24,9 +24,8 @@ const headers = [
             :headers="headers"
           >
           </v-data-table>
-            <!-- todo: Edit/Delete -->
         </card-view>
       </v-col>
     </v-row>
-  </v-container>
+  </v-container> -->
 </template>

software/src/pages/admin/categoriesPage/index.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
 import cardView from '@/components/cardView.vue';
-import { useProductStore } from '@/data/stores/productStore';
-
-const productStore = useProductStore()
 
 const headers = [
   { title: "Name", value: "name" },
@@ -12,24 +9,5 @@ const headers = [
 </script>
 
 <template>
-  <v-container max-width="800">
-    <v-row>
-      <v-col>
-        <card-view
-          :title="$t('category', 2)"
-          icon="mdi-label"
-          :subtitle="productStore.categories.length + ' ' + $t('category', productStore.categories.length)"
-        >
-          <v-data-table
-            :items="productStore.categories"
-            :headers="headers"
-          >
-            <template v-slot:item.icon="{ item }">
-              <v-icon :icon="item.icon" />
-            </template>
-          </v-data-table>
-        </card-view>
-      </v-col>
-    </v-row>
-  </v-container>
+  
 </template>

software/src/pages/admin/productsPage/index.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import cardView from '@/components/cardView.vue';
-import { ProductModel } from '@/data/models/productModel';
-import { useProductStore } from '@/data/stores/productStore';
 import productEditDialog from './productEditDialog.vue';
 import { ref } from 'vue';
 
-const productStore = useProductStore()
-const editProduct = ref(new ProductModel())
+// const productStore = useProductStore()
+// const editProduct = ref(new ProductModel())
 const showEditProductDialog = ref(false)
 
 const headers = [
@@ -20,16 +18,16 @@ const headers = [
   { title: "Edit", value: "edit" },
 ]
 
-function openEditProductDialog(product: ProductModel) {
-  editProduct.value = product
-  showEditProductDialog.value = true
-}
+// function openEditProductDialog(product: ProductModel) {
+//   editProduct.value = product
+//   showEditProductDialog.value = true
+// }
 </script>
 
 <template>
   <v-container>
     <v-row>
-      <v-col>
+      <!-- <v-col>
         <card-view 
           :title="$t('product.product', 2)"
           :subtitle="productStore.products.length + ' ' + $t('product.product', productStore.products.length)"
@@ -88,11 +86,11 @@ function openEditProductDialog(product: ProductModel) {
             </template>
           </v-data-table>
         </card-view>
-      </v-col>
+      </v-col> -->
     </v-row>
   </v-container>
 
-  <product-edit-dialog
+  <!-- <product-edit-dialog
     v-model="showEditProductDialog"
-    :edit-product="editProduct" />
+    :edit-product="editProduct" /> -->
 </template>

software/src/pages/productsPage/index.vue

@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import productCard from "./productCard.vue"
-import productDetails from "./productDetailsDialog.vue"
-import { ref, watch } from "vue";
-import { useProductStore } from "@/data/stores/productStore";
-import filterNavDrawer from "./filterNavDrawer.vue";
-import { ProductModel } from '@/data/models/productModel';
-
-const productStore = useProductStore()
-
-const showProductDetails = ref(false)
-const dialogProduct = ref(new ProductModel())
-
-function showProductDialog(product: ProductModel) {
-  dialogProduct.value = product
-  showProductDetails.value = true
-}
-
-watch(() => productStore.filteredCategory, async () => { productStore.filterProducts() })
-watch(() => productStore.sortOrder, async () => { productStore.sortProducts() })
-watch(() => productStore.onlyDiscounts, async () => { productStore.filterProducts() })
-</script>
-
-<template>
-  <v-container max-width="1000">
-    <v-row dense>
-      <v-col
-        v-if="productStore.filteredProducts.length > 0"
-        v-for="product in productStore.filteredProducts"
-        cols="12"
-      >
-        <product-card
-          :product="product"
-          @click="showProductDialog(product)"
-        />
-      </v-col>
-      
-      <v-col v-else>
-        <v-empty-state
-          icon="mdi-magnify"
-          headline="Keine Artikel gefunden"
-        />
-      </v-col>
-    </v-row>
-  </v-container>
-
-  <filter-nav-drawer />
-
-  <product-details
-    v-model="showProductDetails"
-    :product="dialogProduct"
-  />
-</template>

software/src/pages/tourDetailPage/index.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+
+</template>

software/src/pages/toursPage/filterNavDrawer.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { SortOrder } from '@/data/enums/sortOrderEnum';
-import { useProductStore } from '@/data/stores/productStore';
+import { useTourStore } from '@/data/stores/tourStore';
 
-const productStore = useProductStore()
+const tourStore = useTourStore()
 const sortOrderItems = Object.values(SortOrder)
 </script>
 
@@ -11,15 +11,10 @@ const sortOrderItems = Object.values(SortOrder)
     <v-list>
       <v-list-subheader>Filter</v-list-subheader>
 
-      <v-list-item>
-        <v-checkbox :label="$t('offers')" v-model="productStore.onlyDiscounts" />
-      </v-list-item>
-
-      <v-list-item>
+      <!-- <v-list-item>
         <v-select
-          :items="productStore.categories"
+          :items="tourStore.genres"
           :label="$t('category', 2)"
-          v-model="productStore.filteredCategory"
         >
           <template v-slot:item="{ props, item }">
             <v-list-item v-bind="props" :prepend-icon="item.raw.icon" :title="item.raw.name" />
@@ -29,12 +24,12 @@ const sortOrderItems = Object.values(SortOrder)
             <v-list-item :prepend-icon="item.raw.icon" :title="item.raw.name" />
           </template>
         </v-select>
-      </v-list-item>
+      </v-list-item> -->
 
       <v-divider />
       <v-list-subheader>Sort</v-list-subheader>
 
-      <v-list-item>
+      <!-- <v-list-item>
         <v-select :label="$t('sortBy')" :items="sortOrderItems" v-model="productStore.sortOrder" >
           <template v-slot:item="{ props, item }">
             <v-list-item v-bind="props" :title="item.title" />
@@ -44,7 +39,7 @@ const sortOrderItems = Object.values(SortOrder)
             <v-list-item :title="item.title" />
           </template>
         </v-select>
-      </v-list-item>
+      </v-list-item> -->
     </v-list>
   </v-navigation-drawer>
 </template>

software/src/pages/toursPage/index.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import tourCard from "./tourCard.vue"
+import { ref, watch } from "vue";
+import filterNavDrawer from "./filterNavDrawer.vue";
+import { useTourStore } from "@/data/stores/tourStore";
+
+const tourStore = useTourStore()
+
+const showProductDetails = ref(false)
+// const dialogProduct = ref(new ProductModel())
+
+// function showProductDialog(product: ProductModel) {
+//   dialogProduct.value = product
+//   showProductDetails.value = true
+// }
+
+// watch(() => productStore.filteredCategory, async () => { productStore.filterProducts() })
+// watch(() => productStore.sortOrder, async () => { productStore.sortProducts() })
+// watch(() => productStore.onlyDiscounts, async () => { productStore.filterProducts() })
+</script>
+
+<template>
+  <v-container max-width="1200">
+    <v-row dense>
+      <v-col
+        v-if="tourStore.tours.length > 0"
+        v-for="tour in tourStore.tours"
+        cols="12"
+      >
+        <tour-card
+          :tour="tour"
+        />
+      </v-col>
+      
+      <v-col v-else>
+        <v-empty-state
+          icon="mdi-magnify"
+          headline="Keine Artikel gefunden"
+        />
+      </v-col>
+    </v-row>
+  </v-container>
+
+  <filter-nav-drawer />
+
+  <!-- <product-details
+    v-model="showProductDetails"
+    :product="dialogProduct"
+  /> -->
+</template>

software/src/pages/toursPage/tourCard.vue

@@ -1,35 +1,33 @@
 <script setup lang="ts">
-import { ProductModel } from '@/data/models/productModel';
+import { TourModel } from '@/data/models/tourModel';
 import cardView from '@/components/cardView.vue';
+import OutlinedButton from '@/components/outlinedButton.vue';
 
 defineProps({
-  product: {
+  tour: {
     required: true,
-    type: ProductModel
+    type: TourModel
   }
 })
 </script>
 
 <template>
-  <card-view link>
-    <template #withoutContainer>
-      <v-row>
-        <v-col cols="3">
-          <v-sheet color="white">
-            <v-img
-              :src="'http://127.0.0.1:3000/static/' + product.images[0]"
-              height="200"
-            >
-              <template #placeholder>
-                <v-skeleton-loader type="image" />
-              </template>
-            </v-img>
-          </v-sheet>
-        </v-col>
+  <card-view
+    :title="tour.band.name"
+    :subtitle="tour.name"
+    :prepend-image="'http://127.0.0.1:3000/static/bands/' + tour.band.images[0]"
+    link
+  >
+    {{ tour.band.descriptionDe }}
 
-        <v-col cols="7" class="pl-0 pt-5">
-          <div class="text-h6">{{ product.name }}</div>
-          <div>
+    <template #actions>
+      <OutlinedButton>
+        {{ tour.shows.length }} {{ $t('tours.concert', tour.shows.length) }}
+      </OutlinedButton>
+    </template>
+    
+    <!-- <template> -->
+          <!-- <div>
             <v-rating
               size="medium"
               :model-value="product.rating"
@@ -40,19 +38,19 @@ defineProps({
             />
 
             {{ product.rating }}/5
-          </div>
+          </div> -->
 
-          <div>
+          <!-- <div>
             <v-list class="pa-0">
               <v-list-item v-for="i in 2" class="pa-0 ma-0">
                 <v-icon icon="mdi-circle-small" /> {{ product.specs[i - 1] }}
               </v-list-item>
             </v-list>
-          </div>
-        </v-col>
+          </div> -->
+        <!-- </v-col> -->
 
-        <v-col cols="2" class="pt-5 pr-7">
-          <div v-if="product.discount == 0" class="font-weight-bold text-h5 text-right">
+        <!-- <v-col cols="2" class="pt-5 pr-7"> -->
+          <!-- <div v-if="product.discount == 0" class="font-weight-bold text-h5 text-right">
             {{ product.price }} €
           </div>
 
@@ -63,9 +61,9 @@ defineProps({
             <div>
               <div class="text-decoration-line-through text-right">{{ product.price }} €</div>
             </div>
-          </div>
+          </div> -->
 
-          <div style="position: absolute; bottom: 0; right: 0;" class="pr-2 pb-2">
+          <!-- <div style="position: absolute; bottom: 0; right: 0;" class="pr-2 pb-2">
             <div v-if="product.inStock > 5" class="text-green-lighten-1">
               {{ $t("product.storedItemsAvailable", [product.inStock]) }}
             </div>
@@ -75,10 +73,8 @@ defineProps({
             <div v-else class="text-red">
               {{ $t("product.soldOut") }}
             </div>
-          </div>
-        </v-col>
-      </v-row>
-    </template>
+          </div> -->
+    <!-- </template> -->
   </card-view>
 </template>