Reactivate Admin Panel, implement exercise 2.1, add feedback if exercise solved

This commit is contained in:
2024-10-24 20:23:28 +02:00
parent 8de3ca481a
commit 10d6142fff
18 changed files with 409 additions and 350 deletions

View File

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

View File

@@ -2,5 +2,5 @@
</script>
<template>
Accounts Page
Bands Admin Page
</template>

View File

@@ -1,31 +0,0 @@
<script setup lang="ts">
import cardView from '@/components/basics/cardView.vue';
// import { useProductStore } from '@/data/stores/productStore';
// const productStore = useProductStore()
const headers = [
{ title: "Name", value: "name" },
{ title: "Edit", value: "edit" },
]
</script>
<template>
<!-- <v-container max-width="800">
<v-row>
<v-col>
<card-view
:title="$t('brand', 2)"
icon="mdi-label"
:subtitle="productStore.brands.length + ' ' + $t('brand', productStore.brands.length)"
>
<v-data-table
:items="productStore.brands"
:headers="headers"
>
</v-data-table>
</card-view>
</v-col>
</v-row>
</v-container> -->
</template>

View File

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

View File

@@ -1,13 +0,0 @@
<script setup lang="ts">
import cardView from '@/components/basics/cardView.vue';
const headers = [
{ title: "Name", value: "name" },
{ title: "Icon", value: "icon" },
{ title: "Edit", value: "edit" },
]
</script>
<template>
</template>

View File

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

View File

@@ -1,6 +1,149 @@
<script setup lang="ts">
import { useRouter } from 'vue-router';
import outlinedButton from '@/components/basics/outlinedButton.vue';
import cardView from '@/components/basics/cardView.vue';
import { useConcertStore } from '@/stores/concert.store';
import { useBandStore } from '@/stores/band.store';
import { useAccountStore } from '@/stores/account.store';
import { useLocationStore } from '@/stores/location.store';
import { ref } from 'vue';
import { useExerciseStore } from '@/stores/exercise.store';
const router = useRouter()
const concertStore = useConcertStore()
const bandStore = useBandStore()
const accountStore = useAccountStore()
const locationStore = useLocationStore()
const soldOutConcerts = ref(0)
const exerciseStore = useExerciseStore()
exerciseStore.solveExercise(2, 1)
bandStore.getBands()
locationStore.getLocations()
concertStore.getConcerts()
.then(result => {
for(let concert of concertStore.concerts) {
concert.inStock == 0 ? soldOutConcerts.value++ : ""
}
})
</script>
<template>
Admin Dashboard Page
<v-container>
<v-row>
<v-col>
<card-view
:title="$t('band', 2)"
icon="mdi-guitar-electric"
>
<div class="text-h4 text-center">
{{ bandStore.bands.length }} {{ $t('band', 2) }}
</div>
<template #actions>
<outlined-button
@click="router.push('/admin/bands')"
>
{{ $t('more') }}
</outlined-button>
</template>
</card-view>
</v-col>
<v-col>
<card-view
:title="$t('concert', 2)"
icon="mdi-ticket"
>
<div class="text-h4 text-center">
{{ concertStore.concerts.length }} {{ $t('concert', 2) }}
</div>
<div class="text-disabled text-center">
{{ soldOutConcerts }} {{ $t('soldOut') }}
</div>
<template #actions>
<outlined-button
@click="router.push('/admin/concerts')"
>
{{ $t('more') }}
</outlined-button>
</template>
</card-view>
</v-col>
<v-col>
<card-view
:title="$t('location', 2)"
icon="mdi-city"
>
<div class="text-h4 text-center">
{{ locationStore.locations.length }} {{ $t('location', 2) }}
</div>
<template #actions>
<outlined-button
@click="router.push('/admin/locations')"
>
{{ $t('more') }}
</outlined-button>
</template>
</card-view>
</v-col>
</v-row>
<v-row>
<v-col>
<card-view
:title="$t('account', 2)"
icon="mdi-account"
>
</card-view>
</v-col>
<v-col>
<card-view
:title="$t('category', 2)"
icon="mdi-account"
>
<div class="text-h4 text-center">
{{ bandStore.availableGenres.length }} {{ $t('genres', 2) }}
</div>
<template #actions>
<outlined-button
@click="router.push('/admin/genres')"
>
{{ $t('more') }}
</outlined-button>
</template>
</card-view>
</v-col>
<v-col>
<card-view
:title="$t('genres', 2)"
icon="mdi-guitar-electric"
>
<div class="text-h4 text-center">
{{ bandStore.availableGenres.length }} {{ $t('genres', 2) }}
</div>
<template #actions>
<outlined-button
@click="router.push('/admin/genres')"
>
{{ $t('more') }}
</outlined-button>
</template>
</card-view>
</v-col>
</v-row>
</v-container>
</template>

View File

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

View File

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

View File

@@ -1,96 +0,0 @@
<script setup lang="ts">
import cardView from '@/components/basics/cardView.vue';
import productEditDialog from './productEditDialog.vue';
import { ref } from 'vue';
// const productStore = useProductStore()
// const editProduct = ref(new ProductModel())
const showEditProductDialog = ref(false)
const headers = [
{ title: "Category", value: "category.name" },
{ title: "Brand", value: "brand.name" },
{ title: "Name", value: "name" },
{ title: "Price", value: "price" },
{ title: "Discount", value: "discount" },
{ title: "Rating", value: "rating" },
{ title: "In stock", value: "inStock" },
{ title: "Edit", value: "edit" },
]
// function openEditProductDialog(product: ProductModel) {
// editProduct.value = product
// showEditProductDialog.value = true
// }
</script>
<template>
<v-container>
<v-row>
<!-- <v-col>
<card-view
:title="$t('product.product', 2)"
:subtitle="productStore.products.length + ' ' + $t('product.product', productStore.products.length)"
icon="mdi-store"
>
<v-data-table
:headers="headers"
:items="productStore.products"
>
<template v-slot:item.price="{ item }">
{{ item.price }}
</template>
<template v-slot:item.discount="{ item }">
<div v-if="item.discount > 0">
{{ item.discount }} %
</div>
</template>
<template v-slot:item.inStock="{ item }">
<div v-if="item.inStock > 5" class="text-green-lighten-1">
<v-icon icon="mdi-check" />
{{ $t("product.storedItemsAvailable", [item.inStock]) }}
</div>
<div v-else-if="item.inStock > 0" class="text-orange-lighten-1">
<v-icon icon="mdi-alert" />
{{ $t("product.storedItemsAvailable", [item.inStock]) }}
</div>
<div v-else class="text-red">
<v-icon icon="mdi-alert-circle" />
{{ $t("product.soldOut") }}
</div>
</template>
<template v-slot:item.edit="{ item }">
<v-btn
icon="mdi-pencil"
color="orange"
variant="text"
@click="openEditProductDialog(item)"
/>
<v-btn
icon="mdi-store-off"
color="red"
variant="text"
v-if="item.offered"
/>
<v-btn
icon="mdi-store"
color="green"
variant="text"
v-if="!item.offered"
/>
</template>
</v-data-table>
</card-view>
</v-col> -->
</v-row>
</v-container>
<!-- <product-edit-dialog
v-model="showEditProductDialog"
:edit-product="editProduct" /> -->
</template>

View File

@@ -1,116 +0,0 @@
<script setup lang="ts">
import actionDialog from '@/components/basics/actionDialog.vue';
import { ProductModel } from '@/data/models/productModel';
import outlinedButton from '@/components/basics/outlinedButton.vue';
import { useProductStore } from '@/data/stores/productStore';
import { ModelRef } from 'vue';
const showDialog: ModelRef<boolean> = defineModel()
const editProduct = defineModel("editProduct", { type: ProductModel, required: true})
const productStore = useProductStore()
function saveProduct() {
// todo
showDialog.value = false
}
</script>
<template>
<action-dialog
:title="$t('editProduct')"
icon="mdi-store-edit"
v-model="showDialog"
>
<v-row>
<v-col>
<v-select
:items="productStore.categories"
v-model="editProduct.category"
:label="$t('category')"
>
<template v-slot:item="{ props, item }">
<v-list-item v-bind="props" :prepend-icon="item.raw.icon" :title="item.raw.name" />
</template>
<template v-slot:selection="{ item }">
<v-list-item :prepend-icon="item.raw.icon" :title="item.raw.name" />
</template>
</v-select>
</v-col>
<v-col>
<v-select
:items="productStore.brands"
v-model="editProduct.brand"
:label="$t('brand')"
>
<template v-slot:item="{ props, item }">
<v-list-item v-bind="props" :title="item.raw.name" />
</template>
<template v-slot:selection="{ item }">
<v-list-item :title="item.raw.name" />
</template>
</v-select>
</v-col>
</v-row>
<v-row>
<v-col>
<v-text-field
v-model="editProduct.name"
:label="$t('product.productName')"
/>
</v-col>
</v-row>
<v-row>
<v-col>
<v-textarea
v-model="editProduct.description"
:label="$t('product.description')"
/>
</v-col>
</v-row>
<v-row>
<v-col>
<v-text-field
v-model="editProduct.price"
:label="$t('product.productPrice')"
suffix="€"
/>
</v-col>
<v-col>
<v-text-field
v-model="editProduct.discount"
:label="$t('product.discount')"
/>
</v-col>
</v-row>
<v-row>
<v-col>
<v-text-field
v-model="editProduct.inStock"
:label="$t('product.inStock')"
/>
</v-col>
</v-row>
<!-- todo -->
{{ editProduct.images }}
{{ editProduct.specs }}
<template #actions>
<outlined-button
color="green"
prepend-icon="mdi-content-save"
@click="saveProduct"
>
{{ $t('save') }}
</outlined-button>
</template>
</action-dialog>
</template>