jako tako

This commit is contained in:
2024-11-06 16:32:00 +01:00
parent 3c91f2dddb
commit 82687d3c16
7 changed files with 168 additions and 46 deletions
@@ -21,19 +21,25 @@
<b-nav-item to="/" exact> <b-nav-item to="/" exact>
<span> <span>
<font-awesome-icon icon="home" /> <font-awesome-icon icon="home" />
<span>Home</span> <span>Current Event</span>
</span> </span>
</b-nav-item> </b-nav-item>
<b-nav-item-dropdown right id="entity-menu" v-if="authenticated" active-class="active" class="pointer" data-cy="entity"> <b-nav-item to="/event" exact>
<template #button-content> <span>
<span class="navbar-dropdown-menu"> <font-awesome-icon icon="home" />
<font-awesome-icon icon="th-list" /> <span>All Events</span>
<span class="no-bold">Entities</span> </span>
</span> </b-nav-item>
</template> <!-- <b-nav-item-dropdown right id="entity-menu" v-if="authenticated" active-class="active" class="pointer" data-cy="entity">-->
<entities-menu></entities-menu> <!-- <template #button-content>-->
<!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here --> <!-- <span class="navbar-dropdown-menu">-->
</b-nav-item-dropdown> <!-- <font-awesome-icon icon="th-list" />-->
<!-- <span class="no-bold">Entities</span>-->
<!-- </span>-->
<!-- </template>-->
<!-- <entities-menu></entities-menu>-->
<!--&lt;!&ndash; jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here&ndash;&gt;-->
<!-- </b-nav-item-dropdown>-->
<b-nav-item-dropdown <b-nav-item-dropdown
right right
id="admin-menu" id="admin-menu"
@@ -5,6 +5,8 @@ import EventService from './event.service';
import useDataUtils from '@/shared/data/data-utils.service'; import useDataUtils from '@/shared/data/data-utils.service';
import { type IEvent } from '@/shared/model/event.model'; import { type IEvent } from '@/shared/model/event.model';
import { useAlertService } from '@/shared/alert/alert.service'; import { useAlertService } from '@/shared/alert/alert.service';
import { useDateFormat } from '@/shared/composables';
import type { IRegistration } from '@/shared/model/registration.model';
export default defineComponent({ export default defineComponent({
compatConfig: { MODE: 3 }, compatConfig: { MODE: 3 },
@@ -12,7 +14,7 @@ export default defineComponent({
setup() { setup() {
const eventService = inject('eventService', () => new EventService()); const eventService = inject('eventService', () => new EventService());
const alertService = inject('alertService', () => useAlertService(), true); const alertService = inject('alertService', () => useAlertService(), true);
const { formatDateShort } = useDateFormat();
const dataUtils = useDataUtils(); const dataUtils = useDataUtils();
const route = useRoute(); const route = useRoute();
@@ -20,27 +22,47 @@ export default defineComponent({
const previousState = () => router.go(-1); const previousState = () => router.go(-1);
const event: Ref<IEvent> = ref({}); const event: Ref<IEvent> = ref({});
const sortedAndIndexedRegistrations: Ref<IRegistration[]> = ref([]);
const retrieveEvent = async eventId => { const retrieveEvent = async (eventId: string) => {
try { try {
const res = await eventService().find(eventId); const res = await eventService().find(eventId);
event.value = res; event.value = res;
// sortedAndIndexedRegistrations.value = res.registrations;
sortedAndIndexedRegistrations.value = res.registrations.sort(
(a, b) => new Date(a.dateTime).getTime() - new Date(b.dateTime).getTime(),
);
} catch (error) { } catch (error) {
alertService.showHttpError(error.response); alertService.showHttpError(error.response);
} }
}; };
if (route.params?.eventId) { if (route.params?.eventId) {
retrieveEvent(route.params.eventId); retrieveEvent(route.params.eventId as string);
} }
// const sortedAndIndexedRegistrations = () => {
// console.log('asdfasdfasdf', event.value.registrations)
// console.log('asdfasdfasdf', event.value)
// return [...(event.value.registrations || [])].sort((a, b) =>
// new Date(a.dateTime).getTime() - new Date(b.dateTime).getTime()
// );
// };
const getRegistrationIndex = (index: number) => {
const activeCount = sortedAndIndexedRegistrations.value.slice(0, index).filter(r => r.active).length;
return sortedAndIndexedRegistrations.value[index].active ? activeCount + 1 : '';
};
// console.log('asdfasdf', sortedAndIndexedRegistrations())
return { return {
alertService, alertService,
event, event,
...dataUtils, ...dataUtils,
formatDateShort,
previousState, previousState,
sortedAndIndexedRegistrations,
getRegistrationIndex,
}; };
}, },
}); });
@@ -35,29 +35,93 @@
<span>{{ event.comment }}</span> <span>{{ event.comment }}</span>
</dd> </dd>
</dl> </dl>
<!-- Dodajemy sekcję dla rejestracji -->
<h3>Rejestracje</h3>
<ul>
<li v-for="registration in event.registrations" :key="registration.id">
{{ registration.playerName }}
<!-- lub inne pola, które chcesz pokazać -->
</li>
</ul>
<router-link :to="{ name: 'RegistrationCreateForEvent', params: { eventId: event.id } }" custom v-slot="{ navigate }"> <router-link :to="{ name: 'RegistrationCreateForEvent', params: { eventId: event.id } }" custom v-slot="{ navigate }">
<button @click="navigate" class="btn btn-primary"> <button @click="navigate" class="btn btn-primary">
<font-awesome-icon icon="plus"></font-awesome-icon>&nbsp;<span>Dodaj Rejestrację</span> <font-awesome-icon icon="plus"></font-awesome-icon>&nbsp;<span>Dołącz do wydarzenia</span>
</button> </button>
</router-link> </router-link>
<div class="table-responsive" v-if="event.registrations && event.registrations.length > 0">
<table class="table table-striped" aria-describedby="event.registrations">
<thead>
<tr>
<th scope="col"><span>#</span></th>
<th scope="col"><span>Date Time</span></th>
<th scope="col"><span>Player Name</span></th>
<th scope="col"><span>Comment</span></th>
<th scope="col"><span>Active</span></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr v-for="(registration, index) in sortedAndIndexedRegistrations" :key="registration.id" data-cy="entityTable">
<td>
<!-- Display row number or empty if not active -->
{{ getRegistrationIndex(index) }}
</td>
<td>{{ formatDateShort(registration.dateTime) || '' }}</td>
<td>{{ registration.playerName }}</td>
<td>{{ registration.comment }}</td>
<td>{{ registration.active }}</td>
<button type="submit" @click.prevent="previousState()" class="btn btn-info" data-cy="entityDetailsBackButton"> <td class="text-right">
<font-awesome-icon icon="arrow-left"></font-awesome-icon>&nbsp;<span>Back</span> <div class="btn-group">
</button> <router-link
<router-link v-if="event.id" :to="{ name: 'EventEdit', params: { eventId: event.id } }" custom v-slot="{ navigate }"> :to="{ name: 'RegistrationView', params: { registrationId: registration.id } }"
<button @click="navigate" class="btn btn-primary"> custom
<font-awesome-icon icon="pencil-alt"></font-awesome-icon>&nbsp;<span>Edit</span> v-slot="{ navigate }"
</button> >
</router-link> <button @click="navigate" class="btn btn-info btn-sm details" data-cy="entityDetailsButton">
<font-awesome-icon icon="eye"></font-awesome-icon>
<span class="d-none d-md-inline">View</span>
</button>
</router-link>
<!-- <b-button-->
<!-- @click="prepareRemove(registration)"-->
<!-- variant="danger"-->
<!-- class="btn btn-sm"-->
<!-- data-cy="entityDeleteButton"-->
<!-- v-b-modal.removeEntity-->
<!-- >-->
<!-- <font-awesome-icon icon="times"></font-awesome-icon>-->
<!-- <span class="d-none d-md-inline">Delete</span>-->
<!-- </b-button>-->
</div>
</td>
</tr>
</tbody>
</table>
</div>
<b-modal ref="removeEntity" id="removeEntity">
<template #modal-title>
<span id="sasiedziApp.registration.delete.question" data-cy="registrationDeleteDialogHeading">Confirm delete operation</span>
</template>
<div class="modal-body">
<p id="jhi-delete-registration-heading">Are you sure you want to delete Registration {{ removeId }}?</p>
</div>
<template #modal-footer>
<div>
<button type="button" class="btn btn-secondary" @click="closeDialog()">Cancel</button>
<button
type="button"
class="btn btn-primary"
id="jhi-confirm-delete-registration"
data-cy="entityConfirmDeleteButton"
@click="removeRegistration()"
>
Delete
</button>
</div>
</template>
</b-modal>
<!-- <button type="submit" @click.prevent="previousState()" class="btn btn-info" data-cy="entityDetailsBackButton">-->
<!-- <font-awesome-icon icon="arrow-left"></font-awesome-icon>&nbsp;<span>Back</span>-->
<!-- </button>-->
<!-- <router-link v-if="event.id" :to="{ name: 'EventEdit', params: { eventId: event.id } }" custom v-slot="{ navigate }">-->
<!-- <button @click="navigate" class="btn btn-primary">-->
<!-- <font-awesome-icon icon="pencil-alt"></font-awesome-icon>&nbsp;<span>Edit</span>-->
<!-- </button>-->
<!-- </router-link>-->
</div> </div>
</div> </div>
</div> </div>
@@ -1,9 +1,11 @@
import { type Ref, defineComponent, inject, onMounted, ref } from 'vue'; import { type Ref, defineComponent, inject, onMounted, ref, computed } from 'vue';
import EventService from './event.service'; import EventService from './event.service';
import { type IEvent } from '@/shared/model/event.model'; import { type IEvent } from '@/shared/model/event.model';
import useDataUtils from '@/shared/data/data-utils.service'; import useDataUtils from '@/shared/data/data-utils.service';
import { useAlertService } from '@/shared/alert/alert.service'; import { useAlertService } from '@/shared/alert/alert.service';
import { useDateFormat } from '@/shared/composables';
import type AccountService from '@/account/account.service';
export default defineComponent({ export default defineComponent({
compatConfig: { MODE: 3 }, compatConfig: { MODE: 3 },
@@ -12,8 +14,11 @@ export default defineComponent({
const dataUtils = useDataUtils(); const dataUtils = useDataUtils();
const eventService = inject('eventService', () => new EventService()); const eventService = inject('eventService', () => new EventService());
const alertService = inject('alertService', () => useAlertService(), true); const alertService = inject('alertService', () => useAlertService(), true);
const accountService = inject<AccountService>('accountService');
const events: Ref<IEvent[]> = ref([]); const events: Ref<IEvent[]> = ref([]);
const authenticated = computed(() => store.authenticated);
const hasAnyAuthorityValues: Ref<any> = ref({});
const dateFormat = useDateFormat();
const isFetching = ref(false); const isFetching = ref(false);
@@ -67,12 +72,26 @@ export default defineComponent({
isFetching, isFetching,
retrieveEvents, retrieveEvents,
clear, clear,
accountService,
hasAnyAuthorityValues,
authenticated,
removeId, removeId,
removeEntity, removeEntity,
prepareRemove, prepareRemove,
closeDialog, closeDialog,
removeEvent, removeEvent,
...dataUtils, ...dataUtils,
...dateFormat,
}; };
}, },
methods: {
hasAnyAuthority(authorities: any): boolean {
this.accountService.hasAnyAuthorityAndCheckAuth(authorities).then(value => {
if (this.hasAnyAuthorityValues[authorities] !== value) {
this.hasAnyAuthorityValues = { ...this.hasAnyAuthorityValues, [authorities]: value };
}
});
return this.hasAnyAuthorityValues[authorities] ?? false;
},
},
}); });
+8 -2
View File
@@ -6,7 +6,7 @@
<button class="btn btn-info mr-2" @click="handleSyncList" :disabled="isFetching"> <button class="btn btn-info mr-2" @click="handleSyncList" :disabled="isFetching">
<font-awesome-icon icon="sync" :spin="isFetching"></font-awesome-icon> <span>Refresh list</span> <font-awesome-icon icon="sync" :spin="isFetching"></font-awesome-icon> <span>Refresh list</span>
</button> </button>
<router-link :to="{ name: 'EventCreate' }" custom v-slot="{ navigate }"> <router-link :to="{ name: 'EventCreate' }" custom v-slot="{ navigate }" v-if="hasAnyAuthority('ROLE_ADMIN')">
<button <button
@click="navigate" @click="navigate"
id="jh-create-entity" id="jh-create-entity"
@@ -54,7 +54,12 @@
<span class="d-none d-md-inline">View</span> <span class="d-none d-md-inline">View</span>
</button> </button>
</router-link> </router-link>
<router-link :to="{ name: 'EventEdit', params: { eventId: event.id } }" custom v-slot="{ navigate }"> <router-link
:to="{ name: 'EventEdit', params: { eventId: event.id } }"
custom
v-slot="{ navigate }"
v-if="hasAnyAuthority('ROLE_ADMIN')"
>
<button @click="navigate" class="btn btn-primary btn-sm edit" data-cy="entityEditButton"> <button @click="navigate" class="btn btn-primary btn-sm edit" data-cy="entityEditButton">
<font-awesome-icon icon="pencil-alt"></font-awesome-icon> <font-awesome-icon icon="pencil-alt"></font-awesome-icon>
<span class="d-none d-md-inline">Edit</span> <span class="d-none d-md-inline">Edit</span>
@@ -65,6 +70,7 @@
variant="danger" variant="danger"
class="btn btn-sm" class="btn btn-sm"
data-cy="entityDeleteButton" data-cy="entityDeleteButton"
v-if="hasAnyAuthority('ROLE_ADMIN')"
v-b-modal.removeEntity v-b-modal.removeEntity
> >
<font-awesome-icon icon="times"></font-awesome-icon> <font-awesome-icon icon="times"></font-awesome-icon>
@@ -44,6 +44,7 @@ export default defineComponent({
...dataUtils, ...dataUtils,
previousState, previousState,
...dateFormat,
}; };
}, },
}); });
@@ -2,40 +2,44 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-8"> <div class="col-8">
<div v-if="registration"> <div v-if="registration">
<h2 class="jh-entity-heading" data-cy="registrationDetailsHeading"><span>Registration</span> {{ registration.id }}</h2> <h2 class="jh-entity-heading" data-cy="registrationDetailsHeading">
<span>Rejestracja na wydarzenie </span> {{ registration.event.name }}
</h2>
<dl class="row jh-entity-details"> <dl class="row jh-entity-details">
<dt> <dt>
<span>Date Time</span> <span>Data</span>
</dt> </dt>
<dd> <dd>
<span v-if="registration.dateTime">{{ formatDateLong(registration.dateTime) }}</span> <span v-if="registration.dateTime">{{ formatDateLong(registration.dateTime) }}</span>
</dd> </dd>
<dt> <dt>
<span>Active</span> <span>Aktywna</span>
</dt> </dt>
<dd> <dd>
<span>{{ registration.active }}</span> <span>{{ registration.active }}</span>
</dd> </dd>
<dt> <dt>
<span>Player Name</span> <span>Imię i Nazwisko gracza</span>
</dt> </dt>
<dd> <dd>
<span>{{ registration.playerName }}</span> <span>{{ registration.playerName }}</span>
</dd> </dd>
<dt> <dt>
<span>Comment</span> <span>Komentarz</span>
</dt> </dt>
<dd> <dd>
<span>{{ registration.comment }}</span> <span>{{ registration.comment }}</span>
</dd> </dd>
<dt> <dt>
<span>User</span> <span>Osoba rejestrująca/płacąca</span>
</dt> </dt>
<dd> <dd>
{{ registration.user ? registration.user.login : '' }} {{
registration.user ? registration.user.firstName + ' ' + registration.user.lastName + ' (' + registration.user.login + ')' : ''
}}
</dd> </dd>
<dt> <dt>
<span>Event</span> <span>Wydarzenie</span>
</dt> </dt>
<dd> <dd>
<div v-if="registration.event"> <div v-if="registration.event">