init

src/main/webapp/app/entities/charge/charge-details.component.spec.ts

@@ -0,0 +1,89 @@
+/* tslint:disable max-line-length */
+import { vitest } from 'vitest';
+import { type MountingOptions, shallowMount } from '@vue/test-utils';
+import sinon, { type SinonStubbedInstance } from 'sinon';
+import { type RouteLocation } from 'vue-router';
+
+import ChargeDetails from './charge-details.vue';
+import ChargeService from './charge.service';
+import AlertService from '@/shared/alert/alert.service';
+
+type ChargeDetailsComponentType = InstanceType<typeof ChargeDetails>;
+
+let route: Partial<RouteLocation>;
+const routerGoMock = vitest.fn();
+
+vitest.mock('vue-router', () => ({
+  useRoute: () => route,
+  useRouter: () => ({ go: routerGoMock }),
+}));
+
+const chargeSample = { id: 123 };
+
+describe('Component Tests', () => {
+  let alertService: AlertService;
+
+  afterEach(() => {
+    vitest.resetAllMocks();
+  });
+
+  describe('Charge Management Detail Component', () => {
+    let chargeServiceStub: SinonStubbedInstance<ChargeService>;
+    let mountOptions: MountingOptions<ChargeDetailsComponentType>['global'];
+
+    beforeEach(() => {
+      route = {};
+      chargeServiceStub = sinon.createStubInstance<ChargeService>(ChargeService);
+
+      alertService = new AlertService({
+        bvToast: {
+          toast: vitest.fn(),
+        } as any,
+      });
+
+      mountOptions = {
+        stubs: {
+          'font-awesome-icon': true,
+          'router-link': true,
+        },
+        provide: {
+          alertService,
+          chargeService: () => chargeServiceStub,
+        },
+      };
+    });
+
+    describe('Navigate to details', () => {
+      it('Should call load all on init', async () => {
+        // GIVEN
+        chargeServiceStub.find.resolves(chargeSample);
+        route = {
+          params: {
+            chargeId: `${123}`,
+          },
+        };
+        const wrapper = shallowMount(ChargeDetails, { global: mountOptions });
+        const comp = wrapper.vm;
+        // WHEN
+        await comp.$nextTick();
+
+        // THEN
+        expect(comp.charge).toMatchObject(chargeSample);
+      });
+    });
+
+    describe('Previous state', () => {
+      it('Should go previous state', async () => {
+        chargeServiceStub.find.resolves(chargeSample);
+        const wrapper = shallowMount(ChargeDetails, { global: mountOptions });
+        const comp = wrapper.vm;
+        await comp.$nextTick();
+
+        comp.previousState();
+        await comp.$nextTick();
+
+        expect(routerGoMock).toHaveBeenCalledWith(-1);
+      });
+    });
+  });
+});

src/main/webapp/app/entities/charge/charge-details.component.ts

@@ -0,0 +1,41 @@
+import { type Ref, defineComponent, inject, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import ChargeService from './charge.service';
+import { type ICharge } from '@/shared/model/charge.model';
+import { useAlertService } from '@/shared/alert/alert.service';
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'ChargeDetails',
+  setup() {
+    const chargeService = inject('chargeService', () => new ChargeService());
+    const alertService = inject('alertService', () => useAlertService(), true);
+
+    const route = useRoute();
+    const router = useRouter();
+
+    const previousState = () => router.go(-1);
+    const charge: Ref<ICharge> = ref({});
+
+    const retrieveCharge = async chargeId => {
+      try {
+        const res = await chargeService().find(chargeId);
+        charge.value = res;
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      }
+    };
+
+    if (route.params?.chargeId) {
+      retrieveCharge(route.params.chargeId);
+    }
+
+    return {
+      alertService,
+      charge,
+
+      previousState,
+    };
+  },
+});

src/main/webapp/app/entities/charge/charge-details.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="row justify-content-center">
+    <div class="col-8">
+      <div v-if="charge">
+        <h2 class="jh-entity-heading" data-cy="chargeDetailsHeading"><span>Charge</span> {{ charge.id }}</h2>
+        <dl class="row jh-entity-details">
+          <dt>
+            <span>Charge Date</span>
+          </dt>
+          <dd>
+            <span>{{ charge.chargeDate }}</span>
+          </dd>
+          <dt>
+            <span>Type</span>
+          </dt>
+          <dd>
+            <span>{{ charge.type }}</span>
+          </dd>
+          <dt>
+            <span>Amount</span>
+          </dt>
+          <dd>
+            <span>{{ charge.amount }}</span>
+          </dd>
+          <dt>
+            <span>Event</span>
+          </dt>
+          <dd>
+            <div v-if="charge.event">
+              <router-link :to="{ name: 'EventView', params: { eventId: charge.event.id } }">{{ charge.event.id }}</router-link>
+            </div>
+          </dd>
+          <dt>
+            <span>Registration</span>
+          </dt>
+          <dd>
+            <div v-if="charge.registration">
+              <router-link :to="{ name: 'RegistrationView', params: { registrationId: charge.registration.id } }">{{
+                charge.registration.id
+              }}</router-link>
+            </div>
+          </dd>
+          <dt>
+            <span>User</span>
+          </dt>
+          <dd>
+            {{ charge.user ? charge.user.login : '' }}
+          </dd>
+        </dl>
+        <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="charge.id" :to="{ name: 'ChargeEdit', params: { chargeId: charge.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>
+</template>
+
+<script lang="ts" src="./charge-details.component.ts"></script>

src/main/webapp/app/entities/charge/charge-update.component.spec.ts

@@ -0,0 +1,149 @@
+/* tslint:disable max-line-length */
+import { vitest } from 'vitest';
+import { type MountingOptions, shallowMount } from '@vue/test-utils';
+import sinon, { type SinonStubbedInstance } from 'sinon';
+import { type RouteLocation } from 'vue-router';
+
+import ChargeUpdate from './charge-update.vue';
+import ChargeService from './charge.service';
+import AlertService from '@/shared/alert/alert.service';
+
+import EventService from '@/entities/event/event.service';
+import RegistrationService from '@/entities/registration/registration.service';
+
+import UserService from '@/entities/user/user.service';
+
+type ChargeUpdateComponentType = InstanceType<typeof ChargeUpdate>;
+
+let route: Partial<RouteLocation>;
+const routerGoMock = vitest.fn();
+
+vitest.mock('vue-router', () => ({
+  useRoute: () => route,
+  useRouter: () => ({ go: routerGoMock }),
+}));
+
+const chargeSample = { id: 123 };
+
+describe('Component Tests', () => {
+  let mountOptions: MountingOptions<ChargeUpdateComponentType>['global'];
+  let alertService: AlertService;
+
+  describe('Charge Management Update Component', () => {
+    let comp: ChargeUpdateComponentType;
+    let chargeServiceStub: SinonStubbedInstance<ChargeService>;
+
+    beforeEach(() => {
+      route = {};
+      chargeServiceStub = sinon.createStubInstance<ChargeService>(ChargeService);
+      chargeServiceStub.retrieve.onFirstCall().resolves(Promise.resolve([]));
+
+      alertService = new AlertService({
+        bvToast: {
+          toast: vitest.fn(),
+        } as any,
+      });
+
+      mountOptions = {
+        stubs: {
+          'font-awesome-icon': true,
+          'b-input-group': true,
+          'b-input-group-prepend': true,
+          'b-form-datepicker': true,
+          'b-form-input': true,
+        },
+        provide: {
+          alertService,
+          chargeService: () => chargeServiceStub,
+          eventService: () =>
+            sinon.createStubInstance<EventService>(EventService, {
+              retrieve: sinon.stub().resolves({}),
+            } as any),
+          registrationService: () =>
+            sinon.createStubInstance<RegistrationService>(RegistrationService, {
+              retrieve: sinon.stub().resolves({}),
+            } as any),
+
+          userService: () =>
+            sinon.createStubInstance<UserService>(UserService, {
+              retrieve: sinon.stub().resolves({}),
+            } as any),
+        },
+      };
+    });
+
+    afterEach(() => {
+      vitest.resetAllMocks();
+    });
+
+    describe('save', () => {
+      it('Should call update service on save for existing entity', async () => {
+        // GIVEN
+        const wrapper = shallowMount(ChargeUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        comp.charge = chargeSample;
+        chargeServiceStub.update.resolves(chargeSample);
+
+        // WHEN
+        comp.save();
+        await comp.$nextTick();
+
+        // THEN
+        expect(chargeServiceStub.update.calledWith(chargeSample)).toBeTruthy();
+        expect(comp.isSaving).toEqual(false);
+      });
+
+      it('Should call create service on save for new entity', async () => {
+        // GIVEN
+        const entity = {};
+        chargeServiceStub.create.resolves(entity);
+        const wrapper = shallowMount(ChargeUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        comp.charge = entity;
+
+        // WHEN
+        comp.save();
+        await comp.$nextTick();
+
+        // THEN
+        expect(chargeServiceStub.create.calledWith(entity)).toBeTruthy();
+        expect(comp.isSaving).toEqual(false);
+      });
+    });
+
+    describe('Before route enter', () => {
+      it('Should retrieve data', async () => {
+        // GIVEN
+        chargeServiceStub.find.resolves(chargeSample);
+        chargeServiceStub.retrieve.resolves([chargeSample]);
+
+        // WHEN
+        route = {
+          params: {
+            chargeId: `${chargeSample.id}`,
+          },
+        };
+        const wrapper = shallowMount(ChargeUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        await comp.$nextTick();
+
+        // THEN
+        expect(comp.charge).toMatchObject(chargeSample);
+      });
+    });
+
+    describe('Previous state', () => {
+      it('Should go previous state', async () => {
+        chargeServiceStub.find.resolves(chargeSample);
+        const wrapper = shallowMount(ChargeUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        await comp.$nextTick();
+
+        comp.previousState();
+        await comp.$nextTick();
+
+        expect(routerGoMock).toHaveBeenCalledWith(-1);
+      });
+    });
+  });
+});

src/main/webapp/app/entities/charge/charge-update.component.ts

@@ -0,0 +1,140 @@
+import { type Ref, computed, defineComponent, inject, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useVuelidate } from '@vuelidate/core';
+
+import ChargeService from './charge.service';
+import { useValidation } from '@/shared/composables';
+import { useAlertService } from '@/shared/alert/alert.service';
+
+import EventService from '@/entities/event/event.service';
+import { type IEvent } from '@/shared/model/event.model';
+import RegistrationService from '@/entities/registration/registration.service';
+import { type IRegistration } from '@/shared/model/registration.model';
+import UserService from '@/entities/user/user.service';
+import { Charge, type ICharge } from '@/shared/model/charge.model';
+import { ChargeType } from '@/shared/model/enumerations/charge-type.model';
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'ChargeUpdate',
+  setup() {
+    const chargeService = inject('chargeService', () => new ChargeService());
+    const alertService = inject('alertService', () => useAlertService(), true);
+
+    const charge: Ref<ICharge> = ref(new Charge());
+
+    const eventService = inject('eventService', () => new EventService());
+
+    const events: Ref<IEvent[]> = ref([]);
+
+    const registrationService = inject('registrationService', () => new RegistrationService());
+
+    const registrations: Ref<IRegistration[]> = ref([]);
+    const userService = inject('userService', () => new UserService());
+    const users: Ref<Array<any>> = ref([]);
+    const chargeTypeValues: Ref<string[]> = ref(Object.keys(ChargeType));
+    const isSaving = ref(false);
+    const currentLanguage = inject('currentLanguage', () => computed(() => navigator.language ?? 'en'), true);
+
+    const route = useRoute();
+    const router = useRouter();
+
+    const previousState = () => router.go(-1);
+
+    const retrieveCharge = async chargeId => {
+      try {
+        const res = await chargeService().find(chargeId);
+        charge.value = res;
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      }
+    };
+
+    if (route.params?.chargeId) {
+      retrieveCharge(route.params.chargeId);
+    }
+
+    const initRelationships = () => {
+      eventService()
+        .retrieve()
+        .then(res => {
+          events.value = res.data;
+        });
+      registrationService()
+        .retrieve()
+        .then(res => {
+          registrations.value = res.data;
+        });
+      userService()
+        .retrieve()
+        .then(res => {
+          users.value = res.data;
+        });
+    };
+
+    initRelationships();
+
+    const validations = useValidation();
+    const validationRules = {
+      chargeDate: {
+        required: validations.required('This field is required.'),
+      },
+      type: {
+        required: validations.required('This field is required.'),
+      },
+      amount: {
+        required: validations.required('This field is required.'),
+      },
+      event: {},
+      registration: {},
+      user: {},
+    };
+    const v$ = useVuelidate(validationRules, charge as any);
+    v$.value.$validate();
+
+    return {
+      chargeService,
+      alertService,
+      charge,
+      previousState,
+      chargeTypeValues,
+      isSaving,
+      currentLanguage,
+      events,
+      registrations,
+      users,
+      v$,
+    };
+  },
+  created(): void {},
+  methods: {
+    save(): void {
+      this.isSaving = true;
+      if (this.charge.id) {
+        this.chargeService()
+          .update(this.charge)
+          .then(param => {
+            this.isSaving = false;
+            this.previousState();
+            this.alertService.showInfo(`A Charge is updated with identifier ${param.id}`);
+          })
+          .catch(error => {
+            this.isSaving = false;
+            this.alertService.showHttpError(error.response);
+          });
+      } else {
+        this.chargeService()
+          .create(this.charge)
+          .then(param => {
+            this.isSaving = false;
+            this.previousState();
+            this.alertService.showSuccess(`A Charge is created with identifier ${param.id}`);
+          })
+          .catch(error => {
+            this.isSaving = false;
+            this.alertService.showHttpError(error.response);
+          });
+      }
+    },
+  },
+});

src/main/webapp/app/entities/charge/charge-update.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="row justify-content-center">
+    <div class="col-8">
+      <form name="editForm" novalidate @submit.prevent="save()">
+        <h2 id="sasiedziApp.charge.home.createOrEditLabel" data-cy="ChargeCreateUpdateHeading">Create or edit a Charge</h2>
+        <div>
+          <div class="form-group" v-if="charge.id">
+            <label for="id">ID</label>
+            <input type="text" class="form-control" id="id" name="id" v-model="charge.id" readonly />
+          </div>
+          <div class="form-group">
+            <label class="form-control-label" for="charge-chargeDate">Charge Date</label>
+            <b-input-group class="mb-3">
+              <b-input-group-prepend>
+                <b-form-datepicker
+                  aria-controls="charge-chargeDate"
+                  v-model="v$.chargeDate.$model"
+                  name="chargeDate"
+                  class="form-control"
+                  :locale="currentLanguage"
+                  button-only
+                  today-button
+                  reset-button
+                  close-button
+                >
+                </b-form-datepicker>
+              </b-input-group-prepend>
+              <b-form-input
+                id="charge-chargeDate"
+                data-cy="chargeDate"
+                type="text"
+                class="form-control"
+                name="chargeDate"
+                :class="{ valid: !v$.chargeDate.$invalid, invalid: v$.chargeDate.$invalid }"
+                v-model="v$.chargeDate.$model"
+                required
+              />
+            </b-input-group>
+            <div v-if="v$.chargeDate.$anyDirty && v$.chargeDate.$invalid">
+              <small class="form-text text-danger" v-for="error of v$.chargeDate.$errors" :key="error.$uid">{{ error.$message }}</small>
+            </div>
+          </div>
+          <div class="form-group">
+            <label class="form-control-label" for="charge-type">Type</label>
+            <select
+              class="form-control"
+              name="type"
+              :class="{ valid: !v$.type.$invalid, invalid: v$.type.$invalid }"
+              v-model="v$.type.$model"
+              id="charge-type"
+              data-cy="type"
+              required
+            >
+              <option v-for="chargeType in chargeTypeValues" :key="chargeType" :value="chargeType">{{ chargeType }}</option>
+            </select>
+            <div v-if="v$.type.$anyDirty && v$.type.$invalid">
+              <small class="form-text text-danger" v-for="error of v$.type.$errors" :key="error.$uid">{{ error.$message }}</small>
+            </div>
+          </div>
+          <div class="form-group">
+            <label class="form-control-label" for="charge-amount">Amount</label>
+            <input
+              type="number"
+              class="form-control"
+              name="amount"
+              id="charge-amount"
+              data-cy="amount"
+              :class="{ valid: !v$.amount.$invalid, invalid: v$.amount.$invalid }"
+              v-model.number="v$.amount.$model"
+              required
+            />
+            <div v-if="v$.amount.$anyDirty && v$.amount.$invalid">
+              <small class="form-text text-danger" v-for="error of v$.amount.$errors" :key="error.$uid">{{ error.$message }}</small>
+            </div>
+          </div>
+          <div class="form-group">
+            <label class="form-control-label" for="charge-event">Event</label>
+            <select class="form-control" id="charge-event" data-cy="event" name="event" v-model="charge.event">
+              <option :value="null"></option>
+              <option
+                :value="charge.event && eventOption.id === charge.event.id ? charge.event : eventOption"
+                v-for="eventOption in events"
+                :key="eventOption.id"
+              >
+                {{ eventOption.id }}
+              </option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label class="form-control-label" for="charge-registration">Registration</label>
+            <select class="form-control" id="charge-registration" data-cy="registration" name="registration" v-model="charge.registration">
+              <option :value="null"></option>
+              <option
+                :value="charge.registration && registrationOption.id === charge.registration.id ? charge.registration : registrationOption"
+                v-for="registrationOption in registrations"
+                :key="registrationOption.id"
+              >
+                {{ registrationOption.id }}
+              </option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label class="form-control-label" for="charge-user">User</label>
+            <select class="form-control" id="charge-user" data-cy="user" name="user" v-model="charge.user">
+              <option :value="null"></option>
+              <option
+                :value="charge.user && userOption.id === charge.user.id ? charge.user : userOption"
+                v-for="userOption in users"
+                :key="userOption.id"
+              >
+                {{ userOption.login }}
+              </option>
+            </select>
+          </div>
+        </div>
+        <div>
+          <button type="button" id="cancel-save" data-cy="entityCreateCancelButton" class="btn btn-secondary" @click="previousState()">
+            <font-awesome-icon icon="ban"></font-awesome-icon>&nbsp;<span>Cancel</span>
+          </button>
+          <button
+            type="submit"
+            id="save-entity"
+            data-cy="entityCreateSaveButton"
+            :disabled="v$.$invalid || isSaving"
+            class="btn btn-primary"
+          >
+            <font-awesome-icon icon="save"></font-awesome-icon>&nbsp;<span>Save</span>
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+<script lang="ts" src="./charge-update.component.ts"></script>

src/main/webapp/app/entities/charge/charge.component.spec.ts

@@ -0,0 +1,100 @@
+/* tslint:disable max-line-length */
+import { vitest } from 'vitest';
+import { type MountingOptions, shallowMount } from '@vue/test-utils';
+import sinon, { type SinonStubbedInstance } from 'sinon';
+
+import Charge from './charge.vue';
+import ChargeService from './charge.service';
+import AlertService from '@/shared/alert/alert.service';
+
+type ChargeComponentType = InstanceType<typeof Charge>;
+
+const bModalStub = {
+  render: () => {},
+  methods: {
+    hide: () => {},
+    show: () => {},
+  },
+};
+
+describe('Component Tests', () => {
+  let alertService: AlertService;
+
+  describe('Charge Management Component', () => {
+    let chargeServiceStub: SinonStubbedInstance<ChargeService>;
+    let mountOptions: MountingOptions<ChargeComponentType>['global'];
+
+    beforeEach(() => {
+      chargeServiceStub = sinon.createStubInstance<ChargeService>(ChargeService);
+      chargeServiceStub.retrieve.resolves({ headers: {} });
+
+      alertService = new AlertService({
+        bvToast: {
+          toast: vitest.fn(),
+        } as any,
+      });
+
+      mountOptions = {
+        stubs: {
+          bModal: bModalStub as any,
+          'font-awesome-icon': true,
+          'b-badge': true,
+          'b-button': true,
+          'router-link': true,
+        },
+        directives: {
+          'b-modal': {},
+        },
+        provide: {
+          alertService,
+          chargeService: () => chargeServiceStub,
+        },
+      };
+    });
+
+    describe('Mount', () => {
+      it('Should call load all on init', async () => {
+        // GIVEN
+        chargeServiceStub.retrieve.resolves({ headers: {}, data: [{ id: 123 }] });
+
+        // WHEN
+        const wrapper = shallowMount(Charge, { global: mountOptions });
+        const comp = wrapper.vm;
+        await comp.$nextTick();
+
+        // THEN
+        expect(chargeServiceStub.retrieve.calledOnce).toBeTruthy();
+        expect(comp.charges[0]).toEqual(expect.objectContaining({ id: 123 }));
+      });
+    });
+    describe('Handles', () => {
+      let comp: ChargeComponentType;
+
+      beforeEach(async () => {
+        const wrapper = shallowMount(Charge, { global: mountOptions });
+        comp = wrapper.vm;
+        await comp.$nextTick();
+        chargeServiceStub.retrieve.reset();
+        chargeServiceStub.retrieve.resolves({ headers: {}, data: [] });
+      });
+
+      it('Should call delete service on confirmDelete', async () => {
+        // GIVEN
+        chargeServiceStub.delete.resolves({});
+
+        // WHEN
+        comp.prepareRemove({ id: 123 });
+
+        comp.removeCharge();
+        await comp.$nextTick(); // clear components
+
+        // THEN
+        expect(chargeServiceStub.delete.called).toBeTruthy();
+
+        // THEN
+        await comp.$nextTick(); // handle component clear watch
+        expect(chargeServiceStub.retrieve.callCount).toEqual(1);
+      });
+    });
+  });
+});

src/main/webapp/app/entities/charge/charge.component.ts

@@ -0,0 +1,75 @@
+import { type Ref, defineComponent, inject, onMounted, ref } from 'vue';
+
+import ChargeService from './charge.service';
+import { type ICharge } from '@/shared/model/charge.model';
+import { useAlertService } from '@/shared/alert/alert.service';
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'Charge',
+  setup() {
+    const chargeService = inject('chargeService', () => new ChargeService());
+    const alertService = inject('alertService', () => useAlertService(), true);
+
+    const charges: Ref<ICharge[]> = ref([]);
+
+    const isFetching = ref(false);
+
+    const clear = () => {};
+
+    const retrieveCharges = async () => {
+      isFetching.value = true;
+      try {
+        const res = await chargeService().retrieve();
+        charges.value = res.data;
+      } catch (err) {
+        alertService.showHttpError(err.response);
+      } finally {
+        isFetching.value = false;
+      }
+    };
+
+    const handleSyncList = () => {
+      retrieveCharges();
+    };
+
+    onMounted(async () => {
+      await retrieveCharges();
+    });
+
+    const removeId: Ref<number> = ref(null);
+    const removeEntity = ref<any>(null);
+    const prepareRemove = (instance: ICharge) => {
+      removeId.value = instance.id;
+      removeEntity.value.show();
+    };
+    const closeDialog = () => {
+      removeEntity.value.hide();
+    };
+    const removeCharge = async () => {
+      try {
+        await chargeService().delete(removeId.value);
+        const message = `A Charge is deleted with identifier ${removeId.value}`;
+        alertService.showInfo(message, { variant: 'danger' });
+        removeId.value = null;
+        retrieveCharges();
+        closeDialog();
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      }
+    };
+
+    return {
+      charges,
+      handleSyncList,
+      isFetching,
+      retrieveCharges,
+      clear,
+      removeId,
+      removeEntity,
+      prepareRemove,
+      closeDialog,
+      removeCharge,
+    };
+  },
+});

src/main/webapp/app/entities/charge/charge.service.spec.ts

@@ -0,0 +1,164 @@
+/* tslint:disable max-line-length */
+import axios from 'axios';
+import sinon from 'sinon';
+import dayjs from 'dayjs';
+
+import ChargeService from './charge.service';
+import { DATE_FORMAT } from '@/shared/composables/date-format';
+import { Charge } from '@/shared/model/charge.model';
+
+const error = {
+  response: {
+    status: null,
+    data: {
+      type: null,
+    },
+  },
+};
+
+const axiosStub = {
+  get: sinon.stub(axios, 'get'),
+  post: sinon.stub(axios, 'post'),
+  put: sinon.stub(axios, 'put'),
+  patch: sinon.stub(axios, 'patch'),
+  delete: sinon.stub(axios, 'delete'),
+};
+
+describe('Service Tests', () => {
+  describe('Charge Service', () => {
+    let service: ChargeService;
+    let elemDefault;
+    let currentDate: Date;
+
+    beforeEach(() => {
+      service = new ChargeService();
+      currentDate = new Date();
+      elemDefault = new Charge(123, currentDate, 'CHARGE', 0);
+    });
+
+    describe('Service methods', () => {
+      it('should find an element', async () => {
+        const returnedFromService = { chargeDate: dayjs(currentDate).format(DATE_FORMAT), ...elemDefault };
+        axiosStub.get.resolves({ data: returnedFromService });
+
+        return service.find(123).then(res => {
+          expect(res).toMatchObject(elemDefault);
+        });
+      });
+
+      it('should not find an element', async () => {
+        axiosStub.get.rejects(error);
+        return service
+          .find(123)
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should create a Charge', async () => {
+        const returnedFromService = { id: 123, chargeDate: dayjs(currentDate).format(DATE_FORMAT), ...elemDefault };
+        const expected = { chargeDate: currentDate, ...returnedFromService };
+
+        axiosStub.post.resolves({ data: returnedFromService });
+        return service.create({}).then(res => {
+          expect(res).toMatchObject(expected);
+        });
+      });
+
+      it('should not create a Charge', async () => {
+        axiosStub.post.rejects(error);
+
+        return service
+          .create({})
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should update a Charge', async () => {
+        const returnedFromService = { chargeDate: dayjs(currentDate).format(DATE_FORMAT), type: 'BBBBBB', amount: 1, ...elemDefault };
+
+        const expected = { chargeDate: currentDate, ...returnedFromService };
+        axiosStub.put.resolves({ data: returnedFromService });
+
+        return service.update(expected).then(res => {
+          expect(res).toMatchObject(expected);
+        });
+      });
+
+      it('should not update a Charge', async () => {
+        axiosStub.put.rejects(error);
+
+        return service
+          .update({})
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should partial update a Charge', async () => {
+        const patchObject = { chargeDate: dayjs(currentDate).format(DATE_FORMAT), type: 'BBBBBB', ...new Charge() };
+        const returnedFromService = Object.assign(patchObject, elemDefault);
+
+        const expected = { chargeDate: currentDate, ...returnedFromService };
+        axiosStub.patch.resolves({ data: returnedFromService });
+
+        return service.partialUpdate(patchObject).then(res => {
+          expect(res).toMatchObject(expected);
+        });
+      });
+
+      it('should not partial update a Charge', async () => {
+        axiosStub.patch.rejects(error);
+
+        return service
+          .partialUpdate({})
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should return a list of Charge', async () => {
+        const returnedFromService = { chargeDate: dayjs(currentDate).format(DATE_FORMAT), type: 'BBBBBB', amount: 1, ...elemDefault };
+        const expected = { chargeDate: currentDate, ...returnedFromService };
+        axiosStub.get.resolves([returnedFromService]);
+        return service.retrieve().then(res => {
+          expect(res).toContainEqual(expected);
+        });
+      });
+
+      it('should not return a list of Charge', async () => {
+        axiosStub.get.rejects(error);
+
+        return service
+          .retrieve()
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should delete a Charge', async () => {
+        axiosStub.delete.resolves({ ok: true });
+        return service.delete(123).then(res => {
+          expect(res.ok).toBeTruthy();
+        });
+      });
+
+      it('should not delete a Charge', async () => {
+        axiosStub.delete.rejects(error);
+
+        return service
+          .delete(123)
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+    });
+  });
+});

src/main/webapp/app/entities/charge/charge.service.ts

@@ -0,0 +1,85 @@
+import axios from 'axios';
+
+import { type ICharge } from '@/shared/model/charge.model';
+
+const baseApiUrl = 'api/charges';
+
+export default class ChargeService {
+  public find(id: number): Promise<ICharge> {
+    return new Promise<ICharge>((resolve, reject) => {
+      axios
+        .get(`${baseApiUrl}/${id}`)
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  public retrieve(): Promise<any> {
+    return new Promise<any>((resolve, reject) => {
+      axios
+        .get(baseApiUrl)
+        .then(res => {
+          resolve(res);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  public delete(id: number): Promise<any> {
+    return new Promise<any>((resolve, reject) => {
+      axios
+        .delete(`${baseApiUrl}/${id}`)
+        .then(res => {
+          resolve(res);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  public create(entity: ICharge): Promise<ICharge> {
+    return new Promise<ICharge>((resolve, reject) => {
+      axios
+        .post(`${baseApiUrl}`, entity)
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  public update(entity: ICharge): Promise<ICharge> {
+    return new Promise<ICharge>((resolve, reject) => {
+      axios
+        .put(`${baseApiUrl}/${entity.id}`, entity)
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  public partialUpdate(entity: ICharge): Promise<ICharge> {
+    return new Promise<ICharge>((resolve, reject) => {
+      axios
+        .patch(`${baseApiUrl}/${entity.id}`, entity)
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+}

src/main/webapp/app/entities/charge/charge.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <h2 id="page-heading" data-cy="ChargeHeading">
+      <span id="charge-heading">Charges</span>
+      <div class="d-flex justify-content-end">
+        <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>
+        </button>
+        <router-link :to="{ name: 'ChargeCreate' }" custom v-slot="{ navigate }">
+          <button
+            @click="navigate"
+            id="jh-create-entity"
+            data-cy="entityCreateButton"
+            class="btn btn-primary jh-create-entity create-charge"
+          >
+            <font-awesome-icon icon="plus"></font-awesome-icon>
+            <span>Create a new Charge</span>
+          </button>
+        </router-link>
+      </div>
+    </h2>
+    <br />
+    <div class="alert alert-warning" v-if="!isFetching && charges && charges.length === 0">
+      <span>No Charges found</span>
+    </div>
+    <div class="table-responsive" v-if="charges && charges.length > 0">
+      <table class="table table-striped" aria-describedby="charges">
+        <thead>
+          <tr>
+            <th scope="row"><span>ID</span></th>
+            <th scope="row"><span>Charge Date</span></th>
+            <th scope="row"><span>Type</span></th>
+            <th scope="row"><span>Amount</span></th>
+            <th scope="row"><span>Event</span></th>
+            <th scope="row"><span>Registration</span></th>
+            <th scope="row"><span>User</span></th>
+            <th scope="row"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="charge in charges" :key="charge.id" data-cy="entityTable">
+            <td>
+              <router-link :to="{ name: 'ChargeView', params: { chargeId: charge.id } }">{{ charge.id }}</router-link>
+            </td>
+            <td>{{ charge.chargeDate }}</td>
+            <td>{{ charge.type }}</td>
+            <td>{{ charge.amount }}</td>
+            <td>
+              <div v-if="charge.event">
+                <router-link :to="{ name: 'EventView', params: { eventId: charge.event.id } }">{{ charge.event.id }}</router-link>
+              </div>
+            </td>
+            <td>
+              <div v-if="charge.registration">
+                <router-link :to="{ name: 'RegistrationView', params: { registrationId: charge.registration.id } }">{{
+                  charge.registration.id
+                }}</router-link>
+              </div>
+            </td>
+            <td>
+              {{ charge.user ? charge.user.login : '' }}
+            </td>
+            <td class="text-right">
+              <div class="btn-group">
+                <router-link :to="{ name: 'ChargeView', params: { chargeId: charge.id } }" custom v-slot="{ navigate }">
+                  <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>
+                <router-link :to="{ name: 'ChargeEdit', params: { chargeId: charge.id } }" custom v-slot="{ navigate }">
+                  <button @click="navigate" class="btn btn-primary btn-sm edit" data-cy="entityEditButton">
+                    <font-awesome-icon icon="pencil-alt"></font-awesome-icon>
+                    <span class="d-none d-md-inline">Edit</span>
+                  </button>
+                </router-link>
+                <b-button
+                  @click="prepareRemove(charge)"
+                  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.charge.delete.question" data-cy="chargeDeleteDialogHeading">Confirm delete operation</span>
+      </template>
+      <div class="modal-body">
+        <p id="jhi-delete-charge-heading">Are you sure you want to delete Charge {{ 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-charge"
+            data-cy="entityConfirmDeleteButton"
+            @click="removeCharge()"
+          >
+            Delete
+          </button>
+        </div>
+      </template>
+    </b-modal>
+  </div>
+</template>
+
+<script lang="ts" src="./charge.component.ts"></script>

src/main/webapp/app/entities/entities-menu.vue

@@ -1,5 +1,17 @@
 <template>
   <div>
+    <b-dropdown-item to="/charge">
+      <font-awesome-icon icon="asterisk" />
+      <span>Charge</span>
+    </b-dropdown-item>
+    <b-dropdown-item to="/event">
+      <font-awesome-icon icon="asterisk" />
+      <span>Event</span>
+    </b-dropdown-item>
+    <b-dropdown-item to="/registration">
+      <font-awesome-icon icon="asterisk" />
+      <span>Registration</span>
+    </b-dropdown-item>
     <!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here -->
   </div>
 </template>

src/main/webapp/app/entities/entities.component.ts

@@ -1,5 +1,8 @@
 import { defineComponent, provide } from 'vue';
 
+import ChargeService from './charge/charge.service';
+import EventService from './event/event.service';
+import RegistrationService from './registration/registration.service';
 import UserService from '@/entities/user/user.service';
 // jhipster-needle-add-entity-service-to-entities-component-import - JHipster will import entities services here
 
@@ -8,6 +11,9 @@ export default defineComponent({
   name: 'Entities',
   setup() {
     provide('userService', () => new UserService());
+    provide('chargeService', () => new ChargeService());
+    provide('eventService', () => new EventService());
+    provide('registrationService', () => new RegistrationService());
     // jhipster-needle-add-entity-service-to-entities-component - JHipster will import entities services here
   },
 });

src/main/webapp/app/entities/event/event-details.component.spec.ts

@@ -0,0 +1,89 @@
+/* tslint:disable max-line-length */
+import { vitest } from 'vitest';
+import { type MountingOptions, shallowMount } from '@vue/test-utils';
+import sinon, { type SinonStubbedInstance } from 'sinon';
+import { type RouteLocation } from 'vue-router';
+
+import EventDetails from './event-details.vue';
+import EventService from './event.service';
+import AlertService from '@/shared/alert/alert.service';
+
+type EventDetailsComponentType = InstanceType<typeof EventDetails>;
+
+let route: Partial<RouteLocation>;
+const routerGoMock = vitest.fn();
+
+vitest.mock('vue-router', () => ({
+  useRoute: () => route,
+  useRouter: () => ({ go: routerGoMock }),
+}));
+
+const eventSample = { id: 123 };
+
+describe('Component Tests', () => {
+  let alertService: AlertService;
+
+  afterEach(() => {
+    vitest.resetAllMocks();
+  });
+
+  describe('Event Management Detail Component', () => {
+    let eventServiceStub: SinonStubbedInstance<EventService>;
+    let mountOptions: MountingOptions<EventDetailsComponentType>['global'];
+
+    beforeEach(() => {
+      route = {};
+      eventServiceStub = sinon.createStubInstance<EventService>(EventService);
+
+      alertService = new AlertService({
+        bvToast: {
+          toast: vitest.fn(),
+        } as any,
+      });
+
+      mountOptions = {
+        stubs: {
+          'font-awesome-icon': true,
+          'router-link': true,
+        },
+        provide: {
+          alertService,
+          eventService: () => eventServiceStub,
+        },
+      };
+    });
+
+    describe('Navigate to details', () => {
+      it('Should call load all on init', async () => {
+        // GIVEN
+        eventServiceStub.find.resolves(eventSample);
+        route = {
+          params: {
+            eventId: `${123}`,
+          },
+        };
+        const wrapper = shallowMount(EventDetails, { global: mountOptions });
+        const comp = wrapper.vm;
+        // WHEN
+        await comp.$nextTick();
+
+        // THEN
+        expect(comp.event).toMatchObject(eventSample);
+      });
+    });
+
+    describe('Previous state', () => {
+      it('Should go previous state', async () => {
+        eventServiceStub.find.resolves(eventSample);
+        const wrapper = shallowMount(EventDetails, { global: mountOptions });
+        const comp = wrapper.vm;
+        await comp.$nextTick();
+
+        comp.previousState();
+        await comp.$nextTick();
+
+        expect(routerGoMock).toHaveBeenCalledWith(-1);
+      });
+    });
+  });
+});

src/main/webapp/app/entities/event/event-details.component.ts

@@ -0,0 +1,46 @@
+import { type Ref, defineComponent, inject, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import EventService from './event.service';
+import useDataUtils from '@/shared/data/data-utils.service';
+import { type IEvent } from '@/shared/model/event.model';
+import { useAlertService } from '@/shared/alert/alert.service';
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'EventDetails',
+  setup() {
+    const eventService = inject('eventService', () => new EventService());
+    const alertService = inject('alertService', () => useAlertService(), true);
+
+    const dataUtils = useDataUtils();
+
+    const route = useRoute();
+    const router = useRouter();
+
+    const previousState = () => router.go(-1);
+    const event: Ref<IEvent> = ref({});
+
+    const retrieveEvent = async eventId => {
+      try {
+        const res = await eventService().find(eventId);
+        event.value = res;
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      }
+    };
+
+    if (route.params?.eventId) {
+      retrieveEvent(route.params.eventId);
+    }
+
+    return {
+      alertService,
+      event,
+
+      ...dataUtils,
+
+      previousState,
+    };
+  },
+});

src/main/webapp/app/entities/event/event-details.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="row justify-content-center">
+    <div class="col-8">
+      <div v-if="event">
+        <h2 class="jh-entity-heading" data-cy="eventDetailsHeading"><span>Event</span> {{ event.id }}</h2>
+        <dl class="row jh-entity-details">
+          <dt>
+            <span>Name</span>
+          </dt>
+          <dd>
+            <span>{{ event.name }}</span>
+          </dd>
+          <dt>
+            <span>Date</span>
+          </dt>
+          <dd>
+            <span>{{ event.date }}</span>
+          </dd>
+          <dt>
+            <span>Players Limit</span>
+          </dt>
+          <dd>
+            <span>{{ event.playersLimit }}</span>
+          </dd>
+          <dt>
+            <span>Cost</span>
+          </dt>
+          <dd>
+            <span>{{ event.cost }}</span>
+          </dd>
+          <dt>
+            <span>Comment</span>
+          </dt>
+          <dd>
+            <span>{{ event.comment }}</span>
+          </dd>
+        </dl>
+        <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>
+</template>
+
+<script lang="ts" src="./event-details.component.ts"></script>

src/main/webapp/app/entities/event/event-update.component.spec.ts

@@ -0,0 +1,131 @@
+/* tslint:disable max-line-length */
+import { vitest } from 'vitest';
+import { type MountingOptions, shallowMount } from '@vue/test-utils';
+import sinon, { type SinonStubbedInstance } from 'sinon';
+import { type RouteLocation } from 'vue-router';
+
+import EventUpdate from './event-update.vue';
+import EventService from './event.service';
+import AlertService from '@/shared/alert/alert.service';
+
+type EventUpdateComponentType = InstanceType<typeof EventUpdate>;
+
+let route: Partial<RouteLocation>;
+const routerGoMock = vitest.fn();
+
+vitest.mock('vue-router', () => ({
+  useRoute: () => route,
+  useRouter: () => ({ go: routerGoMock }),
+}));
+
+const eventSample = { id: 123 };
+
+describe('Component Tests', () => {
+  let mountOptions: MountingOptions<EventUpdateComponentType>['global'];
+  let alertService: AlertService;
+
+  describe('Event Management Update Component', () => {
+    let comp: EventUpdateComponentType;
+    let eventServiceStub: SinonStubbedInstance<EventService>;
+
+    beforeEach(() => {
+      route = {};
+      eventServiceStub = sinon.createStubInstance<EventService>(EventService);
+      eventServiceStub.retrieve.onFirstCall().resolves(Promise.resolve([]));
+
+      alertService = new AlertService({
+        bvToast: {
+          toast: vitest.fn(),
+        } as any,
+      });
+
+      mountOptions = {
+        stubs: {
+          'font-awesome-icon': true,
+          'b-input-group': true,
+          'b-input-group-prepend': true,
+          'b-form-datepicker': true,
+          'b-form-input': true,
+        },
+        provide: {
+          alertService,
+          eventService: () => eventServiceStub,
+        },
+      };
+    });
+
+    afterEach(() => {
+      vitest.resetAllMocks();
+    });
+
+    describe('save', () => {
+      it('Should call update service on save for existing entity', async () => {
+        // GIVEN
+        const wrapper = shallowMount(EventUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        comp.event = eventSample;
+        eventServiceStub.update.resolves(eventSample);
+
+        // WHEN
+        comp.save();
+        await comp.$nextTick();
+
+        // THEN
+        expect(eventServiceStub.update.calledWith(eventSample)).toBeTruthy();
+        expect(comp.isSaving).toEqual(false);
+      });
+
+      it('Should call create service on save for new entity', async () => {
+        // GIVEN
+        const entity = {};
+        eventServiceStub.create.resolves(entity);
+        const wrapper = shallowMount(EventUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        comp.event = entity;
+
+        // WHEN
+        comp.save();
+        await comp.$nextTick();
+
+        // THEN
+        expect(eventServiceStub.create.calledWith(entity)).toBeTruthy();
+        expect(comp.isSaving).toEqual(false);
+      });
+    });
+
+    describe('Before route enter', () => {
+      it('Should retrieve data', async () => {
+        // GIVEN
+        eventServiceStub.find.resolves(eventSample);
+        eventServiceStub.retrieve.resolves([eventSample]);
+
+        // WHEN
+        route = {
+          params: {
+            eventId: `${eventSample.id}`,
+          },
+        };
+        const wrapper = shallowMount(EventUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        await comp.$nextTick();
+
+        // THEN
+        expect(comp.event).toMatchObject(eventSample);
+      });
+    });
+
+    describe('Previous state', () => {
+      it('Should go previous state', async () => {
+        eventServiceStub.find.resolves(eventSample);
+        const wrapper = shallowMount(EventUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        await comp.$nextTick();
+
+        comp.previousState();
+        await comp.$nextTick();
+
+        expect(routerGoMock).toHaveBeenCalledWith(-1);
+      });
+    });
+  });
+});

src/main/webapp/app/entities/event/event-update.component.ts

@@ -0,0 +1,100 @@
+import { type Ref, computed, defineComponent, inject, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useVuelidate } from '@vuelidate/core';
+
+import EventService from './event.service';
+import useDataUtils from '@/shared/data/data-utils.service';
+import { useValidation } from '@/shared/composables';
+import { useAlertService } from '@/shared/alert/alert.service';
+
+import { Event, type IEvent } from '@/shared/model/event.model';
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'EventUpdate',
+  setup() {
+    const eventService = inject('eventService', () => new EventService());
+    const alertService = inject('alertService', () => useAlertService(), true);
+
+    const event: Ref<IEvent> = ref(new Event());
+    const isSaving = ref(false);
+    const currentLanguage = inject('currentLanguage', () => computed(() => navigator.language ?? 'en'), true);
+
+    const route = useRoute();
+    const router = useRouter();
+
+    const previousState = () => router.go(-1);
+
+    const retrieveEvent = async eventId => {
+      try {
+        const res = await eventService().find(eventId);
+        event.value = res;
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      }
+    };
+
+    if (route.params?.eventId) {
+      retrieveEvent(route.params.eventId);
+    }
+
+    const dataUtils = useDataUtils();
+
+    const validations = useValidation();
+    const validationRules = {
+      name: {
+        required: validations.required('This field is required.'),
+      },
+      date: {
+        required: validations.required('This field is required.'),
+      },
+      playersLimit: {},
+      cost: {},
+      comment: {},
+    };
+    const v$ = useVuelidate(validationRules, event as any);
+    v$.value.$validate();
+
+    return {
+      eventService,
+      alertService,
+      event,
+      previousState,
+      isSaving,
+      currentLanguage,
+      ...dataUtils,
+      v$,
+    };
+  },
+  created(): void {},
+  methods: {
+    save(): void {
+      this.isSaving = true;
+      if (this.event.id) {
+        this.eventService()
+          .update(this.event)
+          .then(param => {
+            this.isSaving = false;
+            this.previousState();
+            this.alertService.showInfo(`A Event is updated with identifier ${param.id}`);
+          })
+          .catch(error => {
+            this.isSaving = false;
+            this.alertService.showHttpError(error.response);
+          });
+      } else {
+        this.eventService()
+          .create(this.event)
+          .then(param => {
+            this.isSaving = false;
+            this.previousState();
+            this.alertService.showSuccess(`A Event is created with identifier ${param.id}`);
+          })
+          .catch(error => {
+            this.isSaving = false;
+            this.alertService.showHttpError(error.response);
+          });
+      }
+    },
+  },
+});

src/main/webapp/app/entities/event/event-update.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="row justify-content-center">
+    <div class="col-8">
+      <form name="editForm" novalidate @submit.prevent="save()">
+        <h2 id="sasiedziApp.event.home.createOrEditLabel" data-cy="EventCreateUpdateHeading">Create or edit a Event</h2>
+        <div>
+          <div class="form-group" v-if="event.id">
+            <label for="id">ID</label>
+            <input type="text" class="form-control" id="id" name="id" v-model="event.id" readonly />
+          </div>
+          <div class="form-group">
+            <label class="form-control-label" for="event-name">Name</label>
+            <input
+              type="text"
+              class="form-control"
+              name="name"
+              id="event-name"
+              data-cy="name"
+              :class="{ valid: !v$.name.$invalid, invalid: v$.name.$invalid }"
+              v-model="v$.name.$model"
+              required
+            />
+            <div v-if="v$.name.$anyDirty && v$.name.$invalid">
+              <small class="form-text text-danger" v-for="error of v$.name.$errors" :key="error.$uid">{{ error.$message }}</small>
+            </div>
+          </div>
+          <div class="form-group">
+            <label class="form-control-label" for="event-date">Date</label>
+            <b-input-group class="mb-3">
+              <b-input-group-prepend>
+                <b-form-datepicker
+                  aria-controls="event-date"
+                  v-model="v$.date.$model"
+                  name="date"
+                  class="form-control"
+                  :locale="currentLanguage"
+                  button-only
+                  today-button
+                  reset-button
+                  close-button
+                >
+                </b-form-datepicker>
+              </b-input-group-prepend>
+              <b-form-input
+                id="event-date"
+                data-cy="date"
+                type="text"
+                class="form-control"
+                name="date"
+                :class="{ valid: !v$.date.$invalid, invalid: v$.date.$invalid }"
+                v-model="v$.date.$model"
+                required
+              />
+            </b-input-group>
+            <div v-if="v$.date.$anyDirty && v$.date.$invalid">
+              <small class="form-text text-danger" v-for="error of v$.date.$errors" :key="error.$uid">{{ error.$message }}</small>
+            </div>
+          </div>
+          <div class="form-group">
+            <label class="form-control-label" for="event-playersLimit">Players Limit</label>
+            <input
+              type="number"
+              class="form-control"
+              name="playersLimit"
+              id="event-playersLimit"
+              data-cy="playersLimit"
+              :class="{ valid: !v$.playersLimit.$invalid, invalid: v$.playersLimit.$invalid }"
+              v-model.number="v$.playersLimit.$model"
+            />
+          </div>
+          <div class="form-group">
+            <label class="form-control-label" for="event-cost">Cost</label>
+            <input
+              type="number"
+              class="form-control"
+              name="cost"
+              id="event-cost"
+              data-cy="cost"
+              :class="{ valid: !v$.cost.$invalid, invalid: v$.cost.$invalid }"
+              v-model.number="v$.cost.$model"
+            />
+          </div>
+          <div class="form-group">
+            <label class="form-control-label" for="event-comment">Comment</label>
+            <textarea
+              class="form-control"
+              name="comment"
+              id="event-comment"
+              data-cy="comment"
+              :class="{ valid: !v$.comment.$invalid, invalid: v$.comment.$invalid }"
+              v-model="v$.comment.$model"
+            ></textarea>
+          </div>
+        </div>
+        <div>
+          <button type="button" id="cancel-save" data-cy="entityCreateCancelButton" class="btn btn-secondary" @click="previousState()">
+            <font-awesome-icon icon="ban"></font-awesome-icon>&nbsp;<span>Cancel</span>
+          </button>
+          <button
+            type="submit"
+            id="save-entity"
+            data-cy="entityCreateSaveButton"
+            :disabled="v$.$invalid || isSaving"
+            class="btn btn-primary"
+          >
+            <font-awesome-icon icon="save"></font-awesome-icon>&nbsp;<span>Save</span>
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+<script lang="ts" src="./event-update.component.ts"></script>

src/main/webapp/app/entities/event/event.component.spec.ts

@@ -0,0 +1,100 @@
+/* tslint:disable max-line-length */
+import { vitest } from 'vitest';
+import { type MountingOptions, shallowMount } from '@vue/test-utils';
+import sinon, { type SinonStubbedInstance } from 'sinon';
+
+import Event from './event.vue';
+import EventService from './event.service';
+import AlertService from '@/shared/alert/alert.service';
+
+type EventComponentType = InstanceType<typeof Event>;
+
+const bModalStub = {
+  render: () => {},
+  methods: {
+    hide: () => {},
+    show: () => {},
+  },
+};
+
+describe('Component Tests', () => {
+  let alertService: AlertService;
+
+  describe('Event Management Component', () => {
+    let eventServiceStub: SinonStubbedInstance<EventService>;
+    let mountOptions: MountingOptions<EventComponentType>['global'];
+
+    beforeEach(() => {
+      eventServiceStub = sinon.createStubInstance<EventService>(EventService);
+      eventServiceStub.retrieve.resolves({ headers: {} });
+
+      alertService = new AlertService({
+        bvToast: {
+          toast: vitest.fn(),
+        } as any,
+      });
+
+      mountOptions = {
+        stubs: {
+          bModal: bModalStub as any,
+          'font-awesome-icon': true,
+          'b-badge': true,
+          'b-button': true,
+          'router-link': true,
+        },
+        directives: {
+          'b-modal': {},
+        },
+        provide: {
+          alertService,
+          eventService: () => eventServiceStub,
+        },
+      };
+    });
+
+    describe('Mount', () => {
+      it('Should call load all on init', async () => {
+        // GIVEN
+        eventServiceStub.retrieve.resolves({ headers: {}, data: [{ id: 123 }] });
+
+        // WHEN
+        const wrapper = shallowMount(Event, { global: mountOptions });
+        const comp = wrapper.vm;
+        await comp.$nextTick();
+
+        // THEN
+        expect(eventServiceStub.retrieve.calledOnce).toBeTruthy();
+        expect(comp.events[0]).toEqual(expect.objectContaining({ id: 123 }));
+      });
+    });
+    describe('Handles', () => {
+      let comp: EventComponentType;
+
+      beforeEach(async () => {
+        const wrapper = shallowMount(Event, { global: mountOptions });
+        comp = wrapper.vm;
+        await comp.$nextTick();
+        eventServiceStub.retrieve.reset();
+        eventServiceStub.retrieve.resolves({ headers: {}, data: [] });
+      });
+
+      it('Should call delete service on confirmDelete', async () => {
+        // GIVEN
+        eventServiceStub.delete.resolves({});
+
+        // WHEN
+        comp.prepareRemove({ id: 123 });
+
+        comp.removeEvent();
+        await comp.$nextTick(); // clear components
+
+        // THEN
+        expect(eventServiceStub.delete.called).toBeTruthy();
+
+        // THEN
+        await comp.$nextTick(); // handle component clear watch
+        expect(eventServiceStub.retrieve.callCount).toEqual(1);
+      });
+    });
+  });
+});

src/main/webapp/app/entities/event/event.component.ts

@@ -0,0 +1,78 @@
+import { type Ref, defineComponent, inject, onMounted, ref } from 'vue';
+
+import EventService from './event.service';
+import { type IEvent } from '@/shared/model/event.model';
+import useDataUtils from '@/shared/data/data-utils.service';
+import { useAlertService } from '@/shared/alert/alert.service';
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'Event',
+  setup() {
+    const dataUtils = useDataUtils();
+    const eventService = inject('eventService', () => new EventService());
+    const alertService = inject('alertService', () => useAlertService(), true);
+
+    const events: Ref<IEvent[]> = ref([]);
+
+    const isFetching = ref(false);
+
+    const clear = () => {};
+
+    const retrieveEvents = async () => {
+      isFetching.value = true;
+      try {
+        const res = await eventService().retrieve();
+        events.value = res.data;
+      } catch (err) {
+        alertService.showHttpError(err.response);
+      } finally {
+        isFetching.value = false;
+      }
+    };
+
+    const handleSyncList = () => {
+      retrieveEvents();
+    };
+
+    onMounted(async () => {
+      await retrieveEvents();
+    });
+
+    const removeId: Ref<number> = ref(null);
+    const removeEntity = ref<any>(null);
+    const prepareRemove = (instance: IEvent) => {
+      removeId.value = instance.id;
+      removeEntity.value.show();
+    };
+    const closeDialog = () => {
+      removeEntity.value.hide();
+    };
+    const removeEvent = async () => {
+      try {
+        await eventService().delete(removeId.value);
+        const message = `A Event is deleted with identifier ${removeId.value}`;
+        alertService.showInfo(message, { variant: 'danger' });
+        removeId.value = null;
+        retrieveEvents();
+        closeDialog();
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      }
+    };
+
+    return {
+      events,
+      handleSyncList,
+      isFetching,
+      retrieveEvents,
+      clear,
+      removeId,
+      removeEntity,
+      prepareRemove,
+      closeDialog,
+      removeEvent,
+      ...dataUtils,
+    };
+  },
+});

src/main/webapp/app/entities/event/event.service.spec.ts

@@ -0,0 +1,178 @@
+/* tslint:disable max-line-length */
+import axios from 'axios';
+import sinon from 'sinon';
+import dayjs from 'dayjs';
+
+import EventService from './event.service';
+import { DATE_FORMAT } from '@/shared/composables/date-format';
+import { Event } from '@/shared/model/event.model';
+
+const error = {
+  response: {
+    status: null,
+    data: {
+      type: null,
+    },
+  },
+};
+
+const axiosStub = {
+  get: sinon.stub(axios, 'get'),
+  post: sinon.stub(axios, 'post'),
+  put: sinon.stub(axios, 'put'),
+  patch: sinon.stub(axios, 'patch'),
+  delete: sinon.stub(axios, 'delete'),
+};
+
+describe('Service Tests', () => {
+  describe('Event Service', () => {
+    let service: EventService;
+    let elemDefault;
+    let currentDate: Date;
+
+    beforeEach(() => {
+      service = new EventService();
+      currentDate = new Date();
+      elemDefault = new Event(123, 'AAAAAAA', currentDate, 0, 0, 'AAAAAAA');
+    });
+
+    describe('Service methods', () => {
+      it('should find an element', async () => {
+        const returnedFromService = { date: dayjs(currentDate).format(DATE_FORMAT), ...elemDefault };
+        axiosStub.get.resolves({ data: returnedFromService });
+
+        return service.find(123).then(res => {
+          expect(res).toMatchObject(elemDefault);
+        });
+      });
+
+      it('should not find an element', async () => {
+        axiosStub.get.rejects(error);
+        return service
+          .find(123)
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should create a Event', async () => {
+        const returnedFromService = { id: 123, date: dayjs(currentDate).format(DATE_FORMAT), ...elemDefault };
+        const expected = { date: currentDate, ...returnedFromService };
+
+        axiosStub.post.resolves({ data: returnedFromService });
+        return service.create({}).then(res => {
+          expect(res).toMatchObject(expected);
+        });
+      });
+
+      it('should not create a Event', async () => {
+        axiosStub.post.rejects(error);
+
+        return service
+          .create({})
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should update a Event', async () => {
+        const returnedFromService = {
+          name: 'BBBBBB',
+          date: dayjs(currentDate).format(DATE_FORMAT),
+          playersLimit: 1,
+          cost: 1,
+          comment: 'BBBBBB',
+          ...elemDefault,
+        };
+
+        const expected = { date: currentDate, ...returnedFromService };
+        axiosStub.put.resolves({ data: returnedFromService });
+
+        return service.update(expected).then(res => {
+          expect(res).toMatchObject(expected);
+        });
+      });
+
+      it('should not update a Event', async () => {
+        axiosStub.put.rejects(error);
+
+        return service
+          .update({})
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should partial update a Event', async () => {
+        const patchObject = { name: 'BBBBBB', date: dayjs(currentDate).format(DATE_FORMAT), cost: 1, ...new Event() };
+        const returnedFromService = Object.assign(patchObject, elemDefault);
+
+        const expected = { date: currentDate, ...returnedFromService };
+        axiosStub.patch.resolves({ data: returnedFromService });
+
+        return service.partialUpdate(patchObject).then(res => {
+          expect(res).toMatchObject(expected);
+        });
+      });
+
+      it('should not partial update a Event', async () => {
+        axiosStub.patch.rejects(error);
+
+        return service
+          .partialUpdate({})
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should return a list of Event', async () => {
+        const returnedFromService = {
+          name: 'BBBBBB',
+          date: dayjs(currentDate).format(DATE_FORMAT),
+          playersLimit: 1,
+          cost: 1,
+          comment: 'BBBBBB',
+          ...elemDefault,
+        };
+        const expected = { date: currentDate, ...returnedFromService };
+        axiosStub.get.resolves([returnedFromService]);
+        return service.retrieve().then(res => {
+          expect(res).toContainEqual(expected);
+        });
+      });
+
+      it('should not return a list of Event', async () => {
+        axiosStub.get.rejects(error);
+
+        return service
+          .retrieve()
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should delete a Event', async () => {
+        axiosStub.delete.resolves({ ok: true });
+        return service.delete(123).then(res => {
+          expect(res.ok).toBeTruthy();
+        });
+      });
+
+      it('should not delete a Event', async () => {
+        axiosStub.delete.rejects(error);
+
+        return service
+          .delete(123)
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+    });
+  });
+});

src/main/webapp/app/entities/event/event.service.ts

@@ -0,0 +1,85 @@
+import axios from 'axios';
+
+import { type IEvent } from '@/shared/model/event.model';
+
+const baseApiUrl = 'api/events';
+
+export default class EventService {
+  public find(id: number): Promise<IEvent> {
+    return new Promise<IEvent>((resolve, reject) => {
+      axios
+        .get(`${baseApiUrl}/${id}`)
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  public retrieve(): Promise<any> {
+    return new Promise<any>((resolve, reject) => {
+      axios
+        .get(baseApiUrl)
+        .then(res => {
+          resolve(res);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  public delete(id: number): Promise<any> {
+    return new Promise<any>((resolve, reject) => {
+      axios
+        .delete(`${baseApiUrl}/${id}`)
+        .then(res => {
+          resolve(res);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  public create(entity: IEvent): Promise<IEvent> {
+    return new Promise<IEvent>((resolve, reject) => {
+      axios
+        .post(`${baseApiUrl}`, entity)
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  public update(entity: IEvent): Promise<IEvent> {
+    return new Promise<IEvent>((resolve, reject) => {
+      axios
+        .put(`${baseApiUrl}/${entity.id}`, entity)
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  public partialUpdate(entity: IEvent): Promise<IEvent> {
+    return new Promise<IEvent>((resolve, reject) => {
+      axios
+        .patch(`${baseApiUrl}/${entity.id}`, entity)
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+}

src/main/webapp/app/entities/event/event.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <h2 id="page-heading" data-cy="EventHeading">
+      <span id="event-heading">Events</span>
+      <div class="d-flex justify-content-end">
+        <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>
+        </button>
+        <router-link :to="{ name: 'EventCreate' }" custom v-slot="{ navigate }">
+          <button
+            @click="navigate"
+            id="jh-create-entity"
+            data-cy="entityCreateButton"
+            class="btn btn-primary jh-create-entity create-event"
+          >
+            <font-awesome-icon icon="plus"></font-awesome-icon>
+            <span>Create a new Event</span>
+          </button>
+        </router-link>
+      </div>
+    </h2>
+    <br />
+    <div class="alert alert-warning" v-if="!isFetching && events && events.length === 0">
+      <span>No Events found</span>
+    </div>
+    <div class="table-responsive" v-if="events && events.length > 0">
+      <table class="table table-striped" aria-describedby="events">
+        <thead>
+          <tr>
+            <th scope="row"><span>ID</span></th>
+            <th scope="row"><span>Name</span></th>
+            <th scope="row"><span>Date</span></th>
+            <th scope="row"><span>Players Limit</span></th>
+            <th scope="row"><span>Cost</span></th>
+            <th scope="row"><span>Comment</span></th>
+            <th scope="row"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="event in events" :key="event.id" data-cy="entityTable">
+            <td>
+              <router-link :to="{ name: 'EventView', params: { eventId: event.id } }">{{ event.id }}</router-link>
+            </td>
+            <td>{{ event.name }}</td>
+            <td>{{ event.date }}</td>
+            <td>{{ event.playersLimit }}</td>
+            <td>{{ event.cost }}</td>
+            <td>{{ event.comment }}</td>
+            <td class="text-right">
+              <div class="btn-group">
+                <router-link :to="{ name: 'EventView', params: { eventId: event.id } }" custom v-slot="{ navigate }">
+                  <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>
+                <router-link :to="{ name: 'EventEdit', params: { eventId: event.id } }" custom v-slot="{ navigate }">
+                  <button @click="navigate" class="btn btn-primary btn-sm edit" data-cy="entityEditButton">
+                    <font-awesome-icon icon="pencil-alt"></font-awesome-icon>
+                    <span class="d-none d-md-inline">Edit</span>
+                  </button>
+                </router-link>
+                <b-button
+                  @click="prepareRemove(event)"
+                  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.event.delete.question" data-cy="eventDeleteDialogHeading">Confirm delete operation</span>
+      </template>
+      <div class="modal-body">
+        <p id="jhi-delete-event-heading">Are you sure you want to delete Event {{ 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-event"
+            data-cy="entityConfirmDeleteButton"
+            @click="removeEvent()"
+          >
+            Delete
+          </button>
+        </div>
+      </template>
+    </b-modal>
+  </div>
+</template>
+
+<script lang="ts" src="./event.component.ts"></script>

src/main/webapp/app/entities/registration/registration-details.component.spec.ts

@@ -0,0 +1,89 @@
+/* tslint:disable max-line-length */
+import { vitest } from 'vitest';
+import { type MountingOptions, shallowMount } from '@vue/test-utils';
+import sinon, { type SinonStubbedInstance } from 'sinon';
+import { type RouteLocation } from 'vue-router';
+
+import RegistrationDetails from './registration-details.vue';
+import RegistrationService from './registration.service';
+import AlertService from '@/shared/alert/alert.service';
+
+type RegistrationDetailsComponentType = InstanceType<typeof RegistrationDetails>;
+
+let route: Partial<RouteLocation>;
+const routerGoMock = vitest.fn();
+
+vitest.mock('vue-router', () => ({
+  useRoute: () => route,
+  useRouter: () => ({ go: routerGoMock }),
+}));
+
+const registrationSample = { id: 123 };
+
+describe('Component Tests', () => {
+  let alertService: AlertService;
+
+  afterEach(() => {
+    vitest.resetAllMocks();
+  });
+
+  describe('Registration Management Detail Component', () => {
+    let registrationServiceStub: SinonStubbedInstance<RegistrationService>;
+    let mountOptions: MountingOptions<RegistrationDetailsComponentType>['global'];
+
+    beforeEach(() => {
+      route = {};
+      registrationServiceStub = sinon.createStubInstance<RegistrationService>(RegistrationService);
+
+      alertService = new AlertService({
+        bvToast: {
+          toast: vitest.fn(),
+        } as any,
+      });
+
+      mountOptions = {
+        stubs: {
+          'font-awesome-icon': true,
+          'router-link': true,
+        },
+        provide: {
+          alertService,
+          registrationService: () => registrationServiceStub,
+        },
+      };
+    });
+
+    describe('Navigate to details', () => {
+      it('Should call load all on init', async () => {
+        // GIVEN
+        registrationServiceStub.find.resolves(registrationSample);
+        route = {
+          params: {
+            registrationId: `${123}`,
+          },
+        };
+        const wrapper = shallowMount(RegistrationDetails, { global: mountOptions });
+        const comp = wrapper.vm;
+        // WHEN
+        await comp.$nextTick();
+
+        // THEN
+        expect(comp.registration).toMatchObject(registrationSample);
+      });
+    });
+
+    describe('Previous state', () => {
+      it('Should go previous state', async () => {
+        registrationServiceStub.find.resolves(registrationSample);
+        const wrapper = shallowMount(RegistrationDetails, { global: mountOptions });
+        const comp = wrapper.vm;
+        await comp.$nextTick();
+
+        comp.previousState();
+        await comp.$nextTick();
+
+        expect(routerGoMock).toHaveBeenCalledWith(-1);
+      });
+    });
+  });
+});

src/main/webapp/app/entities/registration/registration-details.component.ts

@@ -0,0 +1,49 @@
+import { type Ref, defineComponent, inject, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import RegistrationService from './registration.service';
+import useDataUtils from '@/shared/data/data-utils.service';
+import { useDateFormat } from '@/shared/composables';
+import { type IRegistration } from '@/shared/model/registration.model';
+import { useAlertService } from '@/shared/alert/alert.service';
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'RegistrationDetails',
+  setup() {
+    const dateFormat = useDateFormat();
+    const registrationService = inject('registrationService', () => new RegistrationService());
+    const alertService = inject('alertService', () => useAlertService(), true);
+
+    const dataUtils = useDataUtils();
+
+    const route = useRoute();
+    const router = useRouter();
+
+    const previousState = () => router.go(-1);
+    const registration: Ref<IRegistration> = ref({});
+
+    const retrieveRegistration = async registrationId => {
+      try {
+        const res = await registrationService().find(registrationId);
+        registration.value = res;
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      }
+    };
+
+    if (route.params?.registrationId) {
+      retrieveRegistration(route.params.registrationId);
+    }
+
+    return {
+      ...dateFormat,
+      alertService,
+      registration,
+
+      ...dataUtils,
+
+      previousState,
+    };
+  },
+});

src/main/webapp/app/entities/registration/registration-details.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="row justify-content-center">
+    <div class="col-8">
+      <div v-if="registration">
+        <h2 class="jh-entity-heading" data-cy="registrationDetailsHeading"><span>Registration</span> {{ registration.id }}</h2>
+        <dl class="row jh-entity-details">
+          <dt>
+            <span>Date Time</span>
+          </dt>
+          <dd>
+            <span v-if="registration.dateTime">{{ formatDateLong(registration.dateTime) }}</span>
+          </dd>
+          <dt>
+            <span>Active</span>
+          </dt>
+          <dd>
+            <span>{{ registration.active }}</span>
+          </dd>
+          <dt>
+            <span>Player Name</span>
+          </dt>
+          <dd>
+            <span>{{ registration.playerName }}</span>
+          </dd>
+          <dt>
+            <span>Comment</span>
+          </dt>
+          <dd>
+            <span>{{ registration.comment }}</span>
+          </dd>
+          <dt>
+            <span>User</span>
+          </dt>
+          <dd>
+            {{ registration.user ? registration.user.login : '' }}
+          </dd>
+          <dt>
+            <span>Event</span>
+          </dt>
+          <dd>
+            <div v-if="registration.event">
+              <router-link :to="{ name: 'EventView', params: { eventId: registration.event.id } }">{{
+                registration.event.name
+              }}</router-link>
+            </div>
+          </dd>
+        </dl>
+        <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="registration.id"
+          :to="{ name: 'RegistrationEdit', params: { registrationId: registration.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>
+</template>
+
+<script lang="ts" src="./registration-details.component.ts"></script>

src/main/webapp/app/entities/registration/registration-update.component.spec.ts

@@ -0,0 +1,166 @@
+/* tslint:disable max-line-length */
+import { vitest } from 'vitest';
+import { type MountingOptions, shallowMount } from '@vue/test-utils';
+import sinon, { type SinonStubbedInstance } from 'sinon';
+import { type RouteLocation } from 'vue-router';
+
+import dayjs from 'dayjs';
+import RegistrationUpdate from './registration-update.vue';
+import RegistrationService from './registration.service';
+import { DATE_TIME_LONG_FORMAT } from '@/shared/composables/date-format';
+import AlertService from '@/shared/alert/alert.service';
+
+import UserService from '@/entities/user/user.service';
+import EventService from '@/entities/event/event.service';
+
+type RegistrationUpdateComponentType = InstanceType<typeof RegistrationUpdate>;
+
+let route: Partial<RouteLocation>;
+const routerGoMock = vitest.fn();
+
+vitest.mock('vue-router', () => ({
+  useRoute: () => route,
+  useRouter: () => ({ go: routerGoMock }),
+}));
+
+const registrationSample = { id: 123 };
+
+describe('Component Tests', () => {
+  let mountOptions: MountingOptions<RegistrationUpdateComponentType>['global'];
+  let alertService: AlertService;
+
+  describe('Registration Management Update Component', () => {
+    let comp: RegistrationUpdateComponentType;
+    let registrationServiceStub: SinonStubbedInstance<RegistrationService>;
+
+    beforeEach(() => {
+      route = {};
+      registrationServiceStub = sinon.createStubInstance<RegistrationService>(RegistrationService);
+      registrationServiceStub.retrieve.onFirstCall().resolves(Promise.resolve([]));
+
+      alertService = new AlertService({
+        bvToast: {
+          toast: vitest.fn(),
+        } as any,
+      });
+
+      mountOptions = {
+        stubs: {
+          'font-awesome-icon': true,
+          'b-input-group': true,
+          'b-input-group-prepend': true,
+          'b-form-datepicker': true,
+          'b-form-input': true,
+        },
+        provide: {
+          alertService,
+          registrationService: () => registrationServiceStub,
+
+          userService: () =>
+            sinon.createStubInstance<UserService>(UserService, {
+              retrieve: sinon.stub().resolves({}),
+            } as any),
+          eventService: () =>
+            sinon.createStubInstance<EventService>(EventService, {
+              retrieve: sinon.stub().resolves({}),
+            } as any),
+        },
+      };
+    });
+
+    afterEach(() => {
+      vitest.resetAllMocks();
+    });
+
+    describe('load', () => {
+      beforeEach(() => {
+        const wrapper = shallowMount(RegistrationUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+      });
+      it('Should convert date from string', () => {
+        // GIVEN
+        const date = new Date('2019-10-15T11:42:02Z');
+
+        // WHEN
+        const convertedDate = comp.convertDateTimeFromServer(date);
+
+        // THEN
+        expect(convertedDate).toEqual(dayjs(date).format(DATE_TIME_LONG_FORMAT));
+      });
+
+      it('Should not convert date if date is not present', () => {
+        expect(comp.convertDateTimeFromServer(null)).toBeNull();
+      });
+    });
+
+    describe('save', () => {
+      it('Should call update service on save for existing entity', async () => {
+        // GIVEN
+        const wrapper = shallowMount(RegistrationUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        comp.registration = registrationSample;
+        registrationServiceStub.update.resolves(registrationSample);
+
+        // WHEN
+        comp.save();
+        await comp.$nextTick();
+
+        // THEN
+        expect(registrationServiceStub.update.calledWith(registrationSample)).toBeTruthy();
+        expect(comp.isSaving).toEqual(false);
+      });
+
+      it('Should call create service on save for new entity', async () => {
+        // GIVEN
+        const entity = {};
+        registrationServiceStub.create.resolves(entity);
+        const wrapper = shallowMount(RegistrationUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        comp.registration = entity;
+
+        // WHEN
+        comp.save();
+        await comp.$nextTick();
+
+        // THEN
+        expect(registrationServiceStub.create.calledWith(entity)).toBeTruthy();
+        expect(comp.isSaving).toEqual(false);
+      });
+    });
+
+    describe('Before route enter', () => {
+      it('Should retrieve data', async () => {
+        // GIVEN
+        registrationServiceStub.find.resolves(registrationSample);
+        registrationServiceStub.retrieve.resolves([registrationSample]);
+
+        // WHEN
+        route = {
+          params: {
+            registrationId: `${registrationSample.id}`,
+          },
+        };
+        const wrapper = shallowMount(RegistrationUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        await comp.$nextTick();
+
+        // THEN
+        expect(comp.registration).toMatchObject(registrationSample);
+      });
+    });
+
+    describe('Previous state', () => {
+      it('Should go previous state', async () => {
+        registrationServiceStub.find.resolves(registrationSample);
+        const wrapper = shallowMount(RegistrationUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        await comp.$nextTick();
+
+        comp.previousState();
+        await comp.$nextTick();
+
+        expect(routerGoMock).toHaveBeenCalledWith(-1);
+      });
+    });
+  });
+});

src/main/webapp/app/entities/registration/registration-update.component.ts

@@ -0,0 +1,129 @@
+import { type Ref, computed, defineComponent, inject, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useVuelidate } from '@vuelidate/core';
+
+import RegistrationService from './registration.service';
+import useDataUtils from '@/shared/data/data-utils.service';
+import { useDateFormat, useValidation } from '@/shared/composables';
+import { useAlertService } from '@/shared/alert/alert.service';
+
+import UserService from '@/entities/user/user.service';
+import EventService from '@/entities/event/event.service';
+import { type IEvent } from '@/shared/model/event.model';
+import { type IRegistration, Registration } from '@/shared/model/registration.model';
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'RegistrationUpdate',
+  setup() {
+    const registrationService = inject('registrationService', () => new RegistrationService());
+    const alertService = inject('alertService', () => useAlertService(), true);
+
+    const registration: Ref<IRegistration> = ref(new Registration());
+    const userService = inject('userService', () => new UserService());
+    const users: Ref<Array<any>> = ref([]);
+
+    const eventService = inject('eventService', () => new EventService());
+
+    const events: Ref<IEvent[]> = ref([]);
+    const isSaving = ref(false);
+    const currentLanguage = inject('currentLanguage', () => computed(() => navigator.language ?? 'en'), true);
+
+    const route = useRoute();
+    const router = useRouter();
+
+    const previousState = () => router.go(-1);
+
+    const retrieveRegistration = async registrationId => {
+      try {
+        const res = await registrationService().find(registrationId);
+        res.dateTime = new Date(res.dateTime);
+        registration.value = res;
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      }
+    };
+
+    if (route.params?.registrationId) {
+      retrieveRegistration(route.params.registrationId);
+    }
+
+    const initRelationships = () => {
+      userService()
+        .retrieve()
+        .then(res => {
+          users.value = res.data;
+        });
+      eventService()
+        .retrieve()
+        .then(res => {
+          events.value = res.data;
+        });
+    };
+
+    initRelationships();
+
+    const dataUtils = useDataUtils();
+
+    const validations = useValidation();
+    const validationRules = {
+      dateTime: {
+        required: validations.required('This field is required.'),
+      },
+      active: {
+        required: validations.required('This field is required.'),
+      },
+      playerName: {},
+      comment: {},
+      user: {},
+      event: {},
+    };
+    const v$ = useVuelidate(validationRules, registration as any);
+    v$.value.$validate();
+
+    return {
+      registrationService,
+      alertService,
+      registration,
+      previousState,
+      isSaving,
+      currentLanguage,
+      users,
+      events,
+      ...dataUtils,
+      v$,
+      ...useDateFormat({ entityRef: registration }),
+    };
+  },
+  created(): void {},
+  methods: {
+    save(): void {
+      this.isSaving = true;
+      if (this.registration.id) {
+        this.registrationService()
+          .update(this.registration)
+          .then(param => {
+            this.isSaving = false;
+            this.previousState();
+            this.alertService.showInfo(`A Registration is updated with identifier ${param.id}`);
+          })
+          .catch(error => {
+            this.isSaving = false;
+            this.alertService.showHttpError(error.response);
+          });
+      } else {
+        this.registrationService()
+          .create(this.registration)
+          .then(param => {
+            this.isSaving = false;
+            this.previousState();
+            this.alertService.showSuccess(`A Registration is created with identifier ${param.id}`);
+          })
+          .catch(error => {
+            this.isSaving = false;
+            this.alertService.showHttpError(error.response);
+          });
+      }
+    },
+  },
+});

src/main/webapp/app/entities/registration/registration-update.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="row justify-content-center">
+    <div class="col-8">
+      <form name="editForm" novalidate @submit.prevent="save()">
+        <h2 id="sasiedziApp.registration.home.createOrEditLabel" data-cy="RegistrationCreateUpdateHeading">
+          Create or edit a Registration
+        </h2>
+        <div>
+          <div class="form-group" v-if="registration.id">
+            <label for="id">ID</label>
+            <input type="text" class="form-control" id="id" name="id" v-model="registration.id" readonly />
+          </div>
+          <div class="form-group">
+            <label class="form-control-label" for="registration-dateTime">Date Time</label>
+            <div class="d-flex">
+              <input
+                id="registration-dateTime"
+                data-cy="dateTime"
+                type="datetime-local"
+                class="form-control"
+                name="dateTime"
+                :class="{ valid: !v$.dateTime.$invalid, invalid: v$.dateTime.$invalid }"
+                required
+                :value="convertDateTimeFromServer(v$.dateTime.$model)"
+                @change="updateZonedDateTimeField('dateTime', $event)"
+              />
+            </div>
+            <div v-if="v$.dateTime.$anyDirty && v$.dateTime.$invalid">
+              <small class="form-text text-danger" v-for="error of v$.dateTime.$errors" :key="error.$uid">{{ error.$message }}</small>
+            </div>
+          </div>
+          <div class="form-group">
+            <label class="form-control-label" for="registration-active">Active</label>
+            <input
+              type="checkbox"
+              class="form-check"
+              name="active"
+              id="registration-active"
+              data-cy="active"
+              :class="{ valid: !v$.active.$invalid, invalid: v$.active.$invalid }"
+              v-model="v$.active.$model"
+              required
+            />
+            <div v-if="v$.active.$anyDirty && v$.active.$invalid">
+              <small class="form-text text-danger" v-for="error of v$.active.$errors" :key="error.$uid">{{ error.$message }}</small>
+            </div>
+          </div>
+          <div class="form-group">
+            <label class="form-control-label" for="registration-playerName">Player Name</label>
+            <input
+              type="text"
+              class="form-control"
+              name="playerName"
+              id="registration-playerName"
+              data-cy="playerName"
+              :class="{ valid: !v$.playerName.$invalid, invalid: v$.playerName.$invalid }"
+              v-model="v$.playerName.$model"
+            />
+          </div>
+          <div class="form-group">
+            <label class="form-control-label" for="registration-comment">Comment</label>
+            <textarea
+              class="form-control"
+              name="comment"
+              id="registration-comment"
+              data-cy="comment"
+              :class="{ valid: !v$.comment.$invalid, invalid: v$.comment.$invalid }"
+              v-model="v$.comment.$model"
+            ></textarea>
+          </div>
+          <div class="form-group">
+            <label class="form-control-label" for="registration-user">User</label>
+            <select class="form-control" id="registration-user" data-cy="user" name="user" v-model="registration.user">
+              <option :value="null"></option>
+              <option
+                :value="registration.user && userOption.id === registration.user.id ? registration.user : userOption"
+                v-for="userOption in users"
+                :key="userOption.id"
+              >
+                {{ userOption.login }}
+              </option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label class="form-control-label" for="registration-event">Event</label>
+            <select class="form-control" id="registration-event" data-cy="event" name="event" v-model="registration.event">
+              <option :value="null"></option>
+              <option
+                :value="registration.event && eventOption.id === registration.event.id ? registration.event : eventOption"
+                v-for="eventOption in events"
+                :key="eventOption.id"
+              >
+                {{ eventOption.name }}
+              </option>
+            </select>
+          </div>
+        </div>
+        <div>
+          <button type="button" id="cancel-save" data-cy="entityCreateCancelButton" class="btn btn-secondary" @click="previousState()">
+            <font-awesome-icon icon="ban"></font-awesome-icon>&nbsp;<span>Cancel</span>
+          </button>
+          <button
+            type="submit"
+            id="save-entity"
+            data-cy="entityCreateSaveButton"
+            :disabled="v$.$invalid || isSaving"
+            class="btn btn-primary"
+          >
+            <font-awesome-icon icon="save"></font-awesome-icon>&nbsp;<span>Save</span>
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+<script lang="ts" src="./registration-update.component.ts"></script>

src/main/webapp/app/entities/registration/registration.component.spec.ts

@@ -0,0 +1,100 @@
+/* tslint:disable max-line-length */
+import { vitest } from 'vitest';
+import { type MountingOptions, shallowMount } from '@vue/test-utils';
+import sinon, { type SinonStubbedInstance } from 'sinon';
+
+import Registration from './registration.vue';
+import RegistrationService from './registration.service';
+import AlertService from '@/shared/alert/alert.service';
+
+type RegistrationComponentType = InstanceType<typeof Registration>;
+
+const bModalStub = {
+  render: () => {},
+  methods: {
+    hide: () => {},
+    show: () => {},
+  },
+};
+
+describe('Component Tests', () => {
+  let alertService: AlertService;
+
+  describe('Registration Management Component', () => {
+    let registrationServiceStub: SinonStubbedInstance<RegistrationService>;
+    let mountOptions: MountingOptions<RegistrationComponentType>['global'];
+
+    beforeEach(() => {
+      registrationServiceStub = sinon.createStubInstance<RegistrationService>(RegistrationService);
+      registrationServiceStub.retrieve.resolves({ headers: {} });
+
+      alertService = new AlertService({
+        bvToast: {
+          toast: vitest.fn(),
+        } as any,
+      });
+
+      mountOptions = {
+        stubs: {
+          bModal: bModalStub as any,
+          'font-awesome-icon': true,
+          'b-badge': true,
+          'b-button': true,
+          'router-link': true,
+        },
+        directives: {
+          'b-modal': {},
+        },
+        provide: {
+          alertService,
+          registrationService: () => registrationServiceStub,
+        },
+      };
+    });
+
+    describe('Mount', () => {
+      it('Should call load all on init', async () => {
+        // GIVEN
+        registrationServiceStub.retrieve.resolves({ headers: {}, data: [{ id: 123 }] });
+
+        // WHEN
+        const wrapper = shallowMount(Registration, { global: mountOptions });
+        const comp = wrapper.vm;
+        await comp.$nextTick();
+
+        // THEN
+        expect(registrationServiceStub.retrieve.calledOnce).toBeTruthy();
+        expect(comp.registrations[0]).toEqual(expect.objectContaining({ id: 123 }));
+      });
+    });
+    describe('Handles', () => {
+      let comp: RegistrationComponentType;
+
+      beforeEach(async () => {
+        const wrapper = shallowMount(Registration, { global: mountOptions });
+        comp = wrapper.vm;
+        await comp.$nextTick();
+        registrationServiceStub.retrieve.reset();
+        registrationServiceStub.retrieve.resolves({ headers: {}, data: [] });
+      });
+
+      it('Should call delete service on confirmDelete', async () => {
+        // GIVEN
+        registrationServiceStub.delete.resolves({});
+
+        // WHEN
+        comp.prepareRemove({ id: 123 });
+
+        comp.removeRegistration();
+        await comp.$nextTick(); // clear components
+
+        // THEN
+        expect(registrationServiceStub.delete.called).toBeTruthy();
+
+        // THEN
+        await comp.$nextTick(); // handle component clear watch
+        expect(registrationServiceStub.retrieve.callCount).toEqual(1);
+      });
+    });
+  });
+});

src/main/webapp/app/entities/registration/registration.component.ts

@@ -0,0 +1,81 @@
+import { type Ref, defineComponent, inject, onMounted, ref } from 'vue';
+
+import RegistrationService from './registration.service';
+import { type IRegistration } from '@/shared/model/registration.model';
+import useDataUtils from '@/shared/data/data-utils.service';
+import { useDateFormat } from '@/shared/composables';
+import { useAlertService } from '@/shared/alert/alert.service';
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'Registration',
+  setup() {
+    const dateFormat = useDateFormat();
+    const dataUtils = useDataUtils();
+    const registrationService = inject('registrationService', () => new RegistrationService());
+    const alertService = inject('alertService', () => useAlertService(), true);
+
+    const registrations: Ref<IRegistration[]> = ref([]);
+
+    const isFetching = ref(false);
+
+    const clear = () => {};
+
+    const retrieveRegistrations = async () => {
+      isFetching.value = true;
+      try {
+        const res = await registrationService().retrieve();
+        registrations.value = res.data;
+      } catch (err) {
+        alertService.showHttpError(err.response);
+      } finally {
+        isFetching.value = false;
+      }
+    };
+
+    const handleSyncList = () => {
+      retrieveRegistrations();
+    };
+
+    onMounted(async () => {
+      await retrieveRegistrations();
+    });
+
+    const removeId: Ref<number> = ref(null);
+    const removeEntity = ref<any>(null);
+    const prepareRemove = (instance: IRegistration) => {
+      removeId.value = instance.id;
+      removeEntity.value.show();
+    };
+    const closeDialog = () => {
+      removeEntity.value.hide();
+    };
+    const removeRegistration = async () => {
+      try {
+        await registrationService().delete(removeId.value);
+        const message = `A Registration is deleted with identifier ${removeId.value}`;
+        alertService.showInfo(message, { variant: 'danger' });
+        removeId.value = null;
+        retrieveRegistrations();
+        closeDialog();
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      }
+    };
+
+    return {
+      registrations,
+      handleSyncList,
+      isFetching,
+      retrieveRegistrations,
+      clear,
+      ...dateFormat,
+      removeId,
+      removeEntity,
+      prepareRemove,
+      closeDialog,
+      removeRegistration,
+      ...dataUtils,
+    };
+  },
+});

src/main/webapp/app/entities/registration/registration.service.spec.ts

@@ -0,0 +1,176 @@
+/* tslint:disable max-line-length */
+import axios from 'axios';
+import sinon from 'sinon';
+import dayjs from 'dayjs';
+
+import RegistrationService from './registration.service';
+import { DATE_TIME_FORMAT } from '@/shared/composables/date-format';
+import { Registration } from '@/shared/model/registration.model';
+
+const error = {
+  response: {
+    status: null,
+    data: {
+      type: null,
+    },
+  },
+};
+
+const axiosStub = {
+  get: sinon.stub(axios, 'get'),
+  post: sinon.stub(axios, 'post'),
+  put: sinon.stub(axios, 'put'),
+  patch: sinon.stub(axios, 'patch'),
+  delete: sinon.stub(axios, 'delete'),
+};
+
+describe('Service Tests', () => {
+  describe('Registration Service', () => {
+    let service: RegistrationService;
+    let elemDefault;
+    let currentDate: Date;
+
+    beforeEach(() => {
+      service = new RegistrationService();
+      currentDate = new Date();
+      elemDefault = new Registration(123, currentDate, false, 'AAAAAAA', 'AAAAAAA');
+    });
+
+    describe('Service methods', () => {
+      it('should find an element', async () => {
+        const returnedFromService = { dateTime: dayjs(currentDate).format(DATE_TIME_FORMAT), ...elemDefault };
+        axiosStub.get.resolves({ data: returnedFromService });
+
+        return service.find(123).then(res => {
+          expect(res).toMatchObject(elemDefault);
+        });
+      });
+
+      it('should not find an element', async () => {
+        axiosStub.get.rejects(error);
+        return service
+          .find(123)
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should create a Registration', async () => {
+        const returnedFromService = { id: 123, dateTime: dayjs(currentDate).format(DATE_TIME_FORMAT), ...elemDefault };
+        const expected = { dateTime: currentDate, ...returnedFromService };
+
+        axiosStub.post.resolves({ data: returnedFromService });
+        return service.create({}).then(res => {
+          expect(res).toMatchObject(expected);
+        });
+      });
+
+      it('should not create a Registration', async () => {
+        axiosStub.post.rejects(error);
+
+        return service
+          .create({})
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should update a Registration', async () => {
+        const returnedFromService = {
+          dateTime: dayjs(currentDate).format(DATE_TIME_FORMAT),
+          active: true,
+          playerName: 'BBBBBB',
+          comment: 'BBBBBB',
+          ...elemDefault,
+        };
+
+        const expected = { dateTime: currentDate, ...returnedFromService };
+        axiosStub.put.resolves({ data: returnedFromService });
+
+        return service.update(expected).then(res => {
+          expect(res).toMatchObject(expected);
+        });
+      });
+
+      it('should not update a Registration', async () => {
+        axiosStub.put.rejects(error);
+
+        return service
+          .update({})
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should partial update a Registration', async () => {
+        const patchObject = { comment: 'BBBBBB', ...new Registration() };
+        const returnedFromService = Object.assign(patchObject, elemDefault);
+
+        const expected = { dateTime: currentDate, ...returnedFromService };
+        axiosStub.patch.resolves({ data: returnedFromService });
+
+        return service.partialUpdate(patchObject).then(res => {
+          expect(res).toMatchObject(expected);
+        });
+      });
+
+      it('should not partial update a Registration', async () => {
+        axiosStub.patch.rejects(error);
+
+        return service
+          .partialUpdate({})
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should return a list of Registration', async () => {
+        const returnedFromService = {
+          dateTime: dayjs(currentDate).format(DATE_TIME_FORMAT),
+          active: true,
+          playerName: 'BBBBBB',
+          comment: 'BBBBBB',
+          ...elemDefault,
+        };
+        const expected = { dateTime: currentDate, ...returnedFromService };
+        axiosStub.get.resolves([returnedFromService]);
+        return service.retrieve().then(res => {
+          expect(res).toContainEqual(expected);
+        });
+      });
+
+      it('should not return a list of Registration', async () => {
+        axiosStub.get.rejects(error);
+
+        return service
+          .retrieve()
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should delete a Registration', async () => {
+        axiosStub.delete.resolves({ ok: true });
+        return service.delete(123).then(res => {
+          expect(res.ok).toBeTruthy();
+        });
+      });
+
+      it('should not delete a Registration', async () => {
+        axiosStub.delete.rejects(error);
+
+        return service
+          .delete(123)
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+    });
+  });
+});

src/main/webapp/app/entities/registration/registration.service.ts

@@ -0,0 +1,85 @@
+import axios from 'axios';
+
+import { type IRegistration } from '@/shared/model/registration.model';
+
+const baseApiUrl = 'api/registrations';
+
+export default class RegistrationService {
+  public find(id: number): Promise<IRegistration> {
+    return new Promise<IRegistration>((resolve, reject) => {
+      axios
+        .get(`${baseApiUrl}/${id}`)
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  public retrieve(): Promise<any> {
+    return new Promise<any>((resolve, reject) => {
+      axios
+        .get(baseApiUrl)
+        .then(res => {
+          resolve(res);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  public delete(id: number): Promise<any> {
+    return new Promise<any>((resolve, reject) => {
+      axios
+        .delete(`${baseApiUrl}/${id}`)
+        .then(res => {
+          resolve(res);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  public create(entity: IRegistration): Promise<IRegistration> {
+    return new Promise<IRegistration>((resolve, reject) => {
+      axios
+        .post(`${baseApiUrl}`, entity)
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  public update(entity: IRegistration): Promise<IRegistration> {
+    return new Promise<IRegistration>((resolve, reject) => {
+      axios
+        .put(`${baseApiUrl}/${entity.id}`, entity)
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  public partialUpdate(entity: IRegistration): Promise<IRegistration> {
+    return new Promise<IRegistration>((resolve, reject) => {
+      axios
+        .patch(`${baseApiUrl}/${entity.id}`, entity)
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+}

src/main/webapp/app/entities/registration/registration.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <h2 id="page-heading" data-cy="RegistrationHeading">
+      <span id="registration-heading">Registrations</span>
+      <div class="d-flex justify-content-end">
+        <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>
+        </button>
+        <router-link :to="{ name: 'RegistrationCreate' }" custom v-slot="{ navigate }">
+          <button
+            @click="navigate"
+            id="jh-create-entity"
+            data-cy="entityCreateButton"
+            class="btn btn-primary jh-create-entity create-registration"
+          >
+            <font-awesome-icon icon="plus"></font-awesome-icon>
+            <span>Create a new Registration</span>
+          </button>
+        </router-link>
+      </div>
+    </h2>
+    <br />
+    <div class="alert alert-warning" v-if="!isFetching && registrations && registrations.length === 0">
+      <span>No Registrations found</span>
+    </div>
+    <div class="table-responsive" v-if="registrations && registrations.length > 0">
+      <table class="table table-striped" aria-describedby="registrations">
+        <thead>
+          <tr>
+            <th scope="row"><span>ID</span></th>
+            <th scope="row"><span>Date Time</span></th>
+            <th scope="row"><span>Active</span></th>
+            <th scope="row"><span>Player Name</span></th>
+            <th scope="row"><span>Comment</span></th>
+            <th scope="row"><span>User</span></th>
+            <th scope="row"><span>Event</span></th>
+            <th scope="row"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="registration in registrations" :key="registration.id" data-cy="entityTable">
+            <td>
+              <router-link :to="{ name: 'RegistrationView', params: { registrationId: registration.id } }">{{
+                registration.id
+              }}</router-link>
+            </td>
+            <td>{{ formatDateShort(registration.dateTime) || '' }}</td>
+            <td>{{ registration.active }}</td>
+            <td>{{ registration.playerName }}</td>
+            <td>{{ registration.comment }}</td>
+            <td>
+              {{ registration.user ? registration.user.login : '' }}
+            </td>
+            <td>
+              <div v-if="registration.event">
+                <router-link :to="{ name: 'EventView', params: { eventId: registration.event.id } }">{{
+                  registration.event.name
+                }}</router-link>
+              </div>
+            </td>
+            <td class="text-right">
+              <div class="btn-group">
+                <router-link :to="{ name: 'RegistrationView', params: { registrationId: registration.id } }" custom v-slot="{ navigate }">
+                  <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>
+                <router-link :to="{ name: 'RegistrationEdit', params: { registrationId: registration.id } }" custom v-slot="{ navigate }">
+                  <button @click="navigate" class="btn btn-primary btn-sm edit" data-cy="entityEditButton">
+                    <font-awesome-icon icon="pencil-alt"></font-awesome-icon>
+                    <span class="d-none d-md-inline">Edit</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>
+  </div>
+</template>
+
+<script lang="ts" src="./registration.component.ts"></script>

src/main/webapp/app/router/entities.ts

@@ -1,13 +1,98 @@
+import { Authority } from '@/shared/security/authority';
 /* tslint:disable */
 // prettier-ignore
 const Entities = () => import('@/entities/entities.vue');
 
+const Charge = () => import('@/entities/charge/charge.vue');
+const ChargeUpdate = () => import('@/entities/charge/charge-update.vue');
+const ChargeDetails = () => import('@/entities/charge/charge-details.vue');
+
+const Event = () => import('@/entities/event/event.vue');
+const EventUpdate = () => import('@/entities/event/event-update.vue');
+const EventDetails = () => import('@/entities/event/event-details.vue');
+
+const Registration = () => import('@/entities/registration/registration.vue');
+const RegistrationUpdate = () => import('@/entities/registration/registration-update.vue');
+const RegistrationDetails = () => import('@/entities/registration/registration-details.vue');
+
 // jhipster-needle-add-entity-to-router-import - JHipster will import entities to the router here
 
 export default {
   path: '/',
   component: Entities,
   children: [
+    {
+      path: 'charge',
+      name: 'Charge',
+      component: Charge,
+      meta: { authorities: [Authority.USER] },
+    },
+    {
+      path: 'charge/new',
+      name: 'ChargeCreate',
+      component: ChargeUpdate,
+      meta: { authorities: [Authority.USER] },
+    },
+    {
+      path: 'charge/:chargeId/edit',
+      name: 'ChargeEdit',
+      component: ChargeUpdate,
+      meta: { authorities: [Authority.USER] },
+    },
+    {
+      path: 'charge/:chargeId/view',
+      name: 'ChargeView',
+      component: ChargeDetails,
+      meta: { authorities: [Authority.USER] },
+    },
+    {
+      path: 'event',
+      name: 'Event',
+      component: Event,
+      meta: { authorities: [Authority.USER] },
+    },
+    {
+      path: 'event/new',
+      name: 'EventCreate',
+      component: EventUpdate,
+      meta: { authorities: [Authority.USER] },
+    },
+    {
+      path: 'event/:eventId/edit',
+      name: 'EventEdit',
+      component: EventUpdate,
+      meta: { authorities: [Authority.USER] },
+    },
+    {
+      path: 'event/:eventId/view',
+      name: 'EventView',
+      component: EventDetails,
+      meta: { authorities: [Authority.USER] },
+    },
+    {
+      path: 'registration',
+      name: 'Registration',
+      component: Registration,
+      meta: { authorities: [Authority.USER] },
+    },
+    {
+      path: 'registration/new',
+      name: 'RegistrationCreate',
+      component: RegistrationUpdate,
+      meta: { authorities: [Authority.USER] },
+    },
+    {
+      path: 'registration/:registrationId/edit',
+      name: 'RegistrationEdit',
+      component: RegistrationUpdate,
+      meta: { authorities: [Authority.USER] },
+    },
+    {
+      path: 'registration/:registrationId/view',
+      name: 'RegistrationView',
+      component: RegistrationDetails,
+      meta: { authorities: [Authority.USER] },
+    },
     // jhipster-needle-add-entity-to-router - JHipster will add entities to the router here
   ],
 };

src/main/webapp/app/shared/model/charge.model.ts

@@ -0,0 +1,26 @@
+import { type IEvent } from '@/shared/model/event.model';
+import { type IRegistration } from '@/shared/model/registration.model';
+import { type IUser } from '@/shared/model/user.model';
+
+import { type ChargeType } from '@/shared/model/enumerations/charge-type.model';
+export interface ICharge {
+  id?: number;
+  chargeDate?: Date;
+  type?: keyof typeof ChargeType;
+  amount?: number;
+  event?: IEvent | null;
+  registration?: IRegistration | null;
+  user?: IUser | null;
+}
+
+export class Charge implements ICharge {
+  constructor(
+    public id?: number,
+    public chargeDate?: Date,
+    public type?: keyof typeof ChargeType,
+    public amount?: number,
+    public event?: IEvent | null,
+    public registration?: IRegistration | null,
+    public user?: IUser | null,
+  ) {}
+}

src/main/webapp/app/shared/model/enumerations/charge-type.model.ts

@@ -0,0 +1,5 @@
+export enum ChargeType {
+  CHARGE = 'CHARGE',
+
+  PAYMENT = 'PAYMENT',
+}

src/main/webapp/app/shared/model/event.model.ts

@@ -0,0 +1,19 @@
+export interface IEvent {
+  id?: number;
+  name?: string;
+  date?: Date;
+  playersLimit?: number | null;
+  cost?: number | null;
+  comment?: string | null;
+}
+
+export class Event implements IEvent {
+  constructor(
+    public id?: number,
+    public name?: string,
+    public date?: Date,
+    public playersLimit?: number | null,
+    public cost?: number | null,
+    public comment?: string | null,
+  ) {}
+}

src/main/webapp/app/shared/model/registration.model.ts

@@ -0,0 +1,26 @@
+import { type IUser } from '@/shared/model/user.model';
+import { type IEvent } from '@/shared/model/event.model';
+
+export interface IRegistration {
+  id?: number;
+  dateTime?: Date;
+  active?: boolean;
+  playerName?: string | null;
+  comment?: string | null;
+  user?: IUser | null;
+  event?: IEvent | null;
+}
+
+export class Registration implements IRegistration {
+  constructor(
+    public id?: number,
+    public dateTime?: Date,
+    public active?: boolean,
+    public playerName?: string | null,
+    public comment?: string | null,
+    public user?: IUser | null,
+    public event?: IEvent | null,
+  ) {
+    this.active = this.active ?? false;
+  }
+}