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

LocationsAdminPage data table

Browse Source
This commit is contained in:
Tobias Zoghaib
2024-10-26 23:52:38 +02:00
parent 57819f5a2f
commit f8e1a191b3
5 changed files with 148 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
software/src/pages/admin/bandsAdminPage/index.vue
View File

@@ -2,6 +2,7 @@
import { useBandStore } from '@/stores/band.store';
import outlinedButton from '@/components/basics/outlinedButton.vue';
import bandEditDialog from './bandEditDialog.vue';
import adminDataLayout from '@/layouts/adminDataLayout.vue';
import { useRouter } from 'vue-router';
import { useFeedbackStore } from '@/stores/feedback.store';
@@ -24,79 +25,57 @@ bandStore.getBands()
</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>
<admin-data-layout
:add-button-string="$t('band.addNewBand')"
:fetch-in-progress="bandStore.fetchInProgress"
:on-add-click="() => bandStore.newBand()"
>
<v-data-table
:items="bandStore.bands"
:headers="headers"
:loading="bandStore.fetchInProgress"
>
<template #item.genres="{ item }">
<v-chip v-for="genre of item.genres" class="mx-1">
{{ genre.name }}
</v-chip>
</template>
<v-col class="text-end">
<outlined-button
prepend-icon="mdi-plus"
color="green"
:disabled="bandStore.fetchInProgress"
@click="bandStore.newBand"
>
{{ $t('band.addNewBand') }}
</outlined-button>
</v-col>
</v-row>
<template #item.logo="{ item }">
<v-icon
:icon="item.logo != '' ? 'mdi-check' : 'mdi-close'"
:color="item.logo != '' ? 'green' : 'red'"
/>
</template>
<v-row>
<v-col>
<v-data-table
:items="bandStore.bands"
:headers="headers"
:loading="bandStore.fetchInProgress"
>
<template #item.genres="{ item }">
<v-chip v-for="genre of item.genres" class="mx-1">
{{ genre.name }}
</v-chip>
</template>
<template #item.imageMembers="{ item }">
<v-icon
:icon="item.imageMembers != '' ? 'mdi-check' : 'mdi-close'"
:color="item.imageMembers != '' ? 'green' : 'red'"
/>
</template>
<template #item.logo="{ item }">
<v-icon
:icon="item.logo != '' ? 'mdi-check' : 'mdi-close'"
:color="item.logo != '' ? 'green' : 'red'"
/>
</template>
<template #item.images="{ item }">
{{ item.images.length }} {{ $t('band.image', item.images.length) }}
</template>
<template #item.imageMembers="{ item }">
<v-icon
:icon="item.imageMembers != '' ? 'mdi-check' : 'mdi-close'"
:color="item.imageMembers != '' ? 'green' : 'red'"
/>
</template>
<template #item.edit="{ item }">
<v-btn
icon="mdi-pencil"
variant="plain"
color="orange"
@click="bandStore.editBand(item.name)"
/>
<template #item.images="{ item }">
{{ item.images.length }} {{ $t('band.image', item.images.length) }}
</template>
<template #item.edit="{ item }">
<v-btn
icon="mdi-pencil"
variant="plain"
color="orange"
@click="bandStore.editBand(item.name)"
/>
<v-btn
icon="mdi-delete"
variant="plain"
color="red"
@click="bandStore.deleteBand(item.id)"
/>
</template>
</v-data-table>
</v-col>
</v-row>
</v-container>
<v-btn
icon="mdi-delete"
variant="plain"
color="red"
@click="bandStore.deleteBand(item.id)"
/>
</template>
</v-data-table>
</admin-data-layout>
<band-edit-dialog />
</template>

66
software/src/pages/admin/locationsAdminPage/index.vue
View File

@@ -1,6 +1,70 @@
<script setup lang="ts">
import adminDataLayout from '@/layouts/adminDataLayout.vue';
import { useFeedbackStore } from '@/stores/feedback.store';
import { useLocationStore } from '@/stores/location.store';
const locationStore = useLocationStore()
const feedbackStore = useFeedbackStore()
const headers = [
{ title: feedbackStore.i18n.t('location.name'), value: "name" },
{ title: feedbackStore.i18n.t('location.address'), value: "address" },
{ title: feedbackStore.i18n.t('location.imageIndoor'), value: "imageIndoor" },
{ title: feedbackStore.i18n.t('location.imageOutdoor'), value: "imageOutdoor" },
{ title: feedbackStore.i18n.t('location.layoutNr'), value: "layout" },
{ title: feedbackStore.i18n.t('location.capacity'), value: "capacity" },
{ title: feedbackStore.i18n.t('location.city'), value: "city" },
{ title: feedbackStore.i18n.t('location.nrOfConcerts'), value: "nrOfConcerts" },
{ title: "", value: "edit", width: 130 }
]
locationStore.getLocations()
</script>
<template>
Locations Admin Page
<admin-data-layout
:fetch-in-progress="locationStore.fetchInProgress"
:add-button-string="$t('location.addLocation')"
:on-add-click="() => { locationStore.newLocation() }"
>
<v-data-table
:items="locationStore.locations"
:headers="headers"
:loading="locationStore.fetchInProgress"
>
<template #item.imageIndoor="{ item }">
<v-icon
:icon="item.imageIndoor != '' ? 'mdi-check' : 'mdi-close'"
:color="item.imageIndoor != '' ? 'green' : 'red'"
/>
</template>
<template #item.imageOutdoor="{ item }">
<v-icon
:icon="item.imageOutdoor != '' ? 'mdi-check' : 'mdi-close'"
:color="item.imageOutdoor != '' ? 'green' : 'red'"
/>
</template>
<template #item.city="{ item }">
{{ item.city.name }}
</template>
<template #item.edit="{ item }">
<v-btn
icon="mdi-pencil"
variant="plain"
color="orange"
@click="locationStore.editLocation(item)"
/>
<v-btn
icon="mdi-delete"
variant="plain"
color="red"
@click="locationStore.deleteLocation(item)"
/>
</template>
</v-data-table>
</admin-data-layout>
</template>