tobias/eventmaster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

Genre Admin page, new Genre store

Browse Source
This commit is contained in:
Tobias Zoghaib
2024-10-26 16:23:00 +02:00
parent cdb3f02156
commit c570a04052
11 changed files with 218 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
software/src/layouts/adminDataLayout.vue Normal file
View File

@@ -0,0 +1,47 @@
<script setup lang="ts">
import outlinedButton from '@/components/basics/outlinedButton.vue';
import { useRouter } from 'vue-router';
const fetchInProgress = defineModel("fetchInProgress", { default: false })
const router = useRouter()
defineProps({
addButtonString: String,
onAddClick: {
type: Function,
default: () => {}
}
})
</script>
<template>
<v-container>
<v-row>
<v-col>
<outlined-button
prepend-icon="mdi-arrow-left"
@click="router.go(-1)"
>
{{ $t('misc.onePageBack') }}
</outlined-button>
</v-col>
<v-col class="text-end">
<outlined-button
prepend-icon="mdi-plus"
color="green"
:disabled="fetchInProgress"
@click="onAddClick()"
>
{{ addButtonString }}
</outlined-button>
</v-col>
</v-row>
<v-row>
<v-col>
<slot></slot>
</v-col>
</v-row>
</v-container>
</template>

4
software/src/locales/de.json
View File

@@ -40,7 +40,9 @@
"descriptionEn": "Beschreibung Englisch",
"addNewBand": "Neue Band hinzufügen",
"logo": "Band Logo",
"imageMember": "Bilder Mitglieder"
"imageMember": "Bilder Mitglieder",
"addNewGenre": "Neues Genre hinzufügen",
"editGenre": "Genre bearbeiten"
},
"ticket": {
"tickets": "Ticket | Tickets"

4
software/src/locales/en.json
View File

@@ -40,7 +40,9 @@
"descriptionEn": "Description English",
"addNewBand": "Add new Band",
"logo": "Band logo",
"imageMember": "Images Members"
"imageMember": "Images Members",
"addNewGenre": "Add new Genre",
"editGenre": "Edit Genre"
},
"ticket": {
"tickets": "Ticket | Tickets"

6
software/src/pages/admin/bandsAdminPage/bandEditDialog.vue
View File

@@ -3,8 +3,10 @@ import actionDialog from '@/components/basics/actionDialog.vue';
import OutlinedButton from '@/components/basics/outlinedButton.vue';
import { GenreModel } from '@/data/models/acts/genreModel';
import { useBandStore } from '@/stores/band.store';
import { useGenreStore } from '@/stores/genre.store';
const bandStore = useBandStore()
const genreStore = useGenreStore()
function itemProps(item: GenreModel) {
return {
@@ -15,7 +17,7 @@ function itemProps(item: GenreModel) {
<template>
<action-dialog
v-model="bandStore.showBandEditDialog"
v-model="bandStore.showEditDialog"
:title="$t('band.editBand')"
icon="mdi-pencil"
>
@@ -43,7 +45,7 @@ function itemProps(item: GenreModel) {
<v-select
:label="$t('band.genre', 2)"
v-model="bandStore.band.genres"
:items="bandStore.availableGenres"
:items="genreStore.genres"
:item-props="itemProps"
variant="outlined"
hide-details

5
software/src/pages/admin/dashboardPage/index.vue
View File

@@ -8,11 +8,13 @@ import { useAccountStore } from '@/stores/account.store';
import { useLocationStore } from '@/stores/location.store';
import { ref } from 'vue';
import { useExerciseStore } from '@/stores/exercise.store';
import { useGenreStore } from '@/stores/genre.store';
const router = useRouter()
const concertStore = useConcertStore()
const bandStore = useBandStore()
const accountStore = useAccountStore()
const genreStore = useGenreStore()
const locationStore = useLocationStore()
const soldOutConcerts = ref(0)
const exerciseStore = useExerciseStore()
@@ -21,6 +23,7 @@ exerciseStore.solveExercise(2, 1)
bandStore.getBands()
locationStore.getLocations()
genreStore.getGenres()
concertStore.getConcerts()
.then(result => {
for(let concert of concertStore.concerts) {
@@ -112,7 +115,7 @@ concertStore.getConcerts()
icon="mdi-account"
>
<div class="text-h4 text-center">
{{ bandStore.availableGenres.length }} {{ $t('band.genre', 2) }}
{{ genreStore.genres.length }} {{ $t('band.genre', 2) }}
</div>
<template #actions>

38
software/src/pages/admin/genresAdminPage/genreEditDialog.vue Normal file
View File

@@ -0,0 +1,38 @@
<script setup lang="ts">
import actionDialog from '@/components/basics/actionDialog.vue';
import outlinedButton from '@/components/basics/outlinedButton.vue';
import { useGenreStore } from '@/stores/genre.store';
const genreStore = useGenreStore()
</script>
<template>
<action-dialog
v-model="genreStore.showEditDialog"
:title="$t('band.editGenre')"
icon="mdi-pencil"
>
<v-container>
<v-row>
<v-col>
<v-text-field
:label="$t('band.genre')"
v-model="genreStore.genre.name"
variant="outlined"
hide-details
/>
</v-col>
</v-row>
</v-container>
<template #actions>
<outlined-button
color="green"
@click="genreStore.saveGenre"
:loading="genreStore.fetchInProgress"
>
{{ $t('misc.actions.save') }}
</outlined-button>
</template>
</action-dialog>
</template>

49
software/src/pages/admin/genresAdminPage/index.vue
View File

@@ -1,6 +1,53 @@
<script setup lang="ts">
import adminDataLayout from '@/layouts/adminDataLayout.vue';
import genreEditDialog from './genreEditDialog.vue';
import { useGenreStore } from '@/stores/genre.store';
const genreStore = useGenreStore()
const headers = [
{ title: "Name", value: "name" },
{ title: "Bands", value: "bands" },
{ title: "", value: "edit", width: 130 }
]
genreStore.getGenres()
</script>
<template>
Genres Admin Page
<admin-data-layout
:add-button-string="$t('band.addNewGenre')"
:fetch-in-progress="genreStore.fetchInProgress"
:on-add-click="() => { genreStore.newGenre() }"
>
<v-data-table
:loading="genreStore.fetchInProgress"
:items="genreStore.genres"
:headers="headers"
>
<template #item.bands="{ item }">
<v-chip v-for="band of item.bands" class="mx-1">
{{ band.name }}
</v-chip>
</template>
<template #item.edit="{ item }">
<v-btn
icon="mdi-pencil"
variant="plain"
color="orange"
@click="genreStore.editGenre(item)"
/>
<v-btn
icon="mdi-delete"
variant="plain"
color="red"
@click="genreStore.deleteGenre(item)"
/>
</template>
</v-data-table>
</admin-data-layout>
<genre-edit-dialog />
</template>

6
software/src/pages/bands/bandsPage/bandFilterbar.vue
View File

@@ -3,8 +3,10 @@ import cardView from '@/components/basics/cardView.vue';
import { useBandStore } from '@/stores/band.store';
import outlinedButton from '@/components/basics/outlinedButton.vue';
import { GenreModel } from '@/data/models/acts/genreModel';
import { useGenreStore } from '@/stores/genre.store';
const bandStore = useBandStore()
const genreStore = useGenreStore()
function itemProps(item: GenreModel) {
return {
@@ -21,8 +23,8 @@ function itemProps(item: GenreModel) {
<v-row>
<v-col>
<v-select
v-model="bandStore.filteredGenres"
:items="bandStore.availableGenres"
v-model="genreStore.filteredGenres"
:items="genreStore.genres"
variant="outlined"
:label="$t('band.genre', 2)"
:item-props="itemProps"

33
software/src/stores/band.store.ts
View File

@@ -3,10 +3,9 @@ import { ref } from "vue";
import { BandApiModel } from "../data/models/acts/bandApiModel";
import { fetchAllBands, fetchBandByName, patchBand, postBand } from "../data/api/bandApi";
import { BandDetailsApiModel } from "../data/models/acts/bandDetailsApiModel";
import { GenreModel } from "@/data/models/acts/genreModel";
import { fetchAllGenres } from "@/data/api/genreApi";
import { useFeedbackStore } from "./feedback.store";
import { BannerStateEnum } from "@/data/enums/bannerStateEnum";
import { useGenreStore } from "./genre.store";
export const useBandStore = defineStore("bandStore", {
state: () => ({
@@ -16,17 +15,11 @@ export const useBandStore = defineStore("bandStore", {
/** All information about a single band */
band: ref<BandDetailsApiModel>(new BandDetailsApiModel()),
/** Genres to filter bands for */
filteredGenres: ref<Array<GenreModel>>([]),
/** All available genres from server */
availableGenres: ref<Array<GenreModel>>([]),
/** Request to server sent, waiting for data response */
fetchInProgress: ref(false),
/** Show or hide the edit dialog for edit a band */
showBandEditDialog: ref(false)
/** Show or hide the edit dialog for edit a band or genre */
showEditDialog: ref(false)
}),
actions: {
@@ -34,17 +27,18 @@ export const useBandStore = defineStore("bandStore", {
* Get all bands from server
*/
async getBands() {
const genreStore = useGenreStore()
this.fetchInProgress = true
await fetchAllBands()
.then(result => {
this.bands = result.data.filter((band: BandApiModel) => {
if (this.filteredGenres.length == 0) {
if (genreStore.filteredGenres.length == 0) {
return true
}
for (let bandGenre of band.genres) {
for (let filteredGenres of this.filteredGenres) {
for (let filteredGenres of genreStore.filteredGenres) {
if (bandGenre.name == filteredGenres.name) {
return true
}
@@ -55,11 +49,6 @@ export const useBandStore = defineStore("bandStore", {
})
})
await fetchAllGenres()
.then(result => {
this.availableGenres = result.data
})
this.fetchInProgress = false
},
@@ -83,10 +72,10 @@ export const useBandStore = defineStore("bandStore", {
*/
newBand() {
this.band = new BandDetailsApiModel()
this.showBandEditDialog = true
this.showEditDialog = true
},
/**
* Edit a band. Fetch all information about the band, opens the edit dialog
*
@@ -95,7 +84,7 @@ export const useBandStore = defineStore("bandStore", {
async editBand(name: string) {
await this.getBand(name)
this.showBandEditDialog = true
this.showEditDialog = true
},
/**
@@ -112,7 +101,7 @@ export const useBandStore = defineStore("bandStore", {
feedbackStore.changeBanner(BannerStateEnum.BANDSAVEDSUCCESSFUL)
this.getBands()
this.showBandEditDialog = false
this.showEditDialog = false
} else {
feedbackStore.changeBanner(BannerStateEnum.BANDSAVEDERROR)
}
@@ -124,7 +113,7 @@ export const useBandStore = defineStore("bandStore", {
feedbackStore.changeBanner(BannerStateEnum.BANDSAVEDSUCCESSFUL)
this.getBands()
this.showBandEditDialog = false
this.showEditDialog = false
} else {
feedbackStore.changeBanner(BannerStateEnum.BANDSAVEDERROR)
}

53
software/src/stores/genre.store.ts Normal file
View File

@@ -0,0 +1,53 @@
import { fetchAllGenres } from "@/data/api/genreApi";
import { GenreApiModel } from "@/data/models/acts/genreApiModel";
import { defineStore } from "pinia";
import { ref } from "vue";
export const useGenreStore = defineStore("genreStore", {
state: () => ({
/** All available genres from server */
genres: ref<Array<GenreApiModel>>([]),
/** Currently edited genre */
genre: ref<GenreApiModel>(new GenreApiModel()),
/** Genres to filter bands for */
filteredGenres: ref<Array<GenreApiModel>>([]),
showEditDialog: ref(false),
fetchInProgress: ref(false)
}),
actions: {
getGenres() {
this.fetchInProgress = true
fetchAllGenres()
.then(response => {
this.genres = response.data
this.fetchInProgress = false
})
},
/**
* Prepare edit dialog for new genre, opens it
*/
newGenre() {
this.genre = new GenreApiModel()
this.showEditDialog = true
},
editGenre(genre: GenreApiModel) {
this.genre = genre
this.showEditDialog = true
},
saveGenre() {
// todo
},
deleteGenre(genre: GenreApiModel) {
// todo
}
}
})