Generate question bank domain model from JDL

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

@@ -0,0 +1,91 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { type RouteLocation } from 'vue-router';
+
+import { type MountingOptions, shallowMount } from '@vue/test-utils';
+
+import AlertService from '@/shared/alert/alert.service';
+
+import ChoiceDetails from './choice-details.vue';
+
+type ChoiceDetailsComponentType = InstanceType<typeof ChoiceDetails>;
+
+let route: Partial<RouteLocation>;
+const routerGoMock = vi.fn();
+
+vi.mock('vue-router', () => ({
+  useRoute: () => route,
+  useRouter: () => ({ go: routerGoMock }),
+}));
+
+const choiceSample = { id: 123 };
+
+describe('Component Tests', () => {
+  let alertService: AlertService;
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  describe('Choice Management Detail Component', () => {
+    let choiceServiceStub: any;
+    let mountOptions: MountingOptions<ChoiceDetailsComponentType>['global'];
+
+    beforeEach(() => {
+      route = {};
+      choiceServiceStub = {
+        find: vi.fn(),
+      };
+
+      alertService = new AlertService({
+        i18n: { t: vi.fn() } as any,
+        toast: {
+          create: vi.fn(),
+        } as any,
+      });
+
+      mountOptions = {
+        stubs: {
+          'font-awesome-icon': true,
+          'router-link': true,
+        },
+        provide: {
+          alertService,
+          choiceService: () => choiceServiceStub,
+        },
+      };
+    });
+
+    describe('Navigate to details', () => {
+      it('Should call load all on init', async () => {
+        // GIVEN
+        choiceServiceStub.find.mockResolvedValue(choiceSample);
+        route = {
+          params: {
+            choiceId: `${123}`,
+          },
+        };
+        const wrapper = shallowMount(ChoiceDetails, { global: mountOptions });
+        const comp = wrapper.vm;
+        // WHEN
+        await comp.$nextTick();
+
+        // THEN
+        expect(comp.choice).toMatchObject(choiceSample);
+      });
+    });
+
+    describe('Previous state', () => {
+      it('Should go previous state', async () => {
+        choiceServiceStub.find.mockResolvedValue(choiceSample);
+        const wrapper = shallowMount(ChoiceDetails, { global: mountOptions });
+        const comp = wrapper.vm;
+        await comp.$nextTick();
+
+        comp.previousState();
+        await comp.$nextTick();
+
+        expect(routerGoMock).toHaveBeenCalledWith(-1);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,42 @@
+import { type Ref, defineComponent, inject, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { useAlertService } from '@/shared/alert/alert.service';
+import { type IChoice } from '@/shared/model/choice.model';
+
+import ChoiceService from './choice.service';
+
+export default defineComponent({
+  name: 'ChoiceDetails',
+  setup() {
+    const choiceService = inject('choiceService', () => new ChoiceService());
+    const alertService = inject('alertService', () => useAlertService(), true);
+
+    const route = useRoute();
+    const router = useRouter();
+
+    const previousState = () => router.go(-1);
+    const choice: Ref<IChoice> = ref({});
+
+    const retrieveChoice = async choiceId => {
+      try {
+        const res = await choiceService().find(choiceId);
+        choice.value = res;
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      }
+    };
+
+    if (route.params?.choiceId) {
+      retrieveChoice(route.params.choiceId);
+    }
+
+    return {
+      choice,
+
+      previousState,
+      t$: useI18n().t,
+    };
+  },
+});

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

@@ -0,0 +1,55 @@
+<template>
+  <div class="d-flex justify-content-center">
+    <div class="col-8">
+      <div v-if="choice">
+        <h2 class="jh-entity-heading" data-cy="choiceDetailsHeading">
+          <span>{{ t$('questionBankApp.choice.detail.title') }}</span> {{ choice.id }}
+        </h2>
+        <dl class="row-md jh-entity-details">
+          <dt>
+            <span>{{ t$('questionBankApp.choice.optionKey') }}</span>
+          </dt>
+          <dd>
+            <span>{{ t$('questionBankApp.OptionKey.' + choice.optionKey) }}</span>
+          </dd>
+          <dt>
+            <span>{{ t$('questionBankApp.choice.content') }}</span>
+          </dt>
+          <dd>
+            <span>{{ choice.content }}</span>
+          </dd>
+          <dt>
+            <span>{{ t$('questionBankApp.choice.displayOrder') }}</span>
+          </dt>
+          <dd>
+            <span>{{ choice.displayOrder }}</span>
+          </dd>
+          <dt>
+            <span>{{ t$('questionBankApp.choice.correct') }}</span>
+          </dt>
+          <dd>
+            <span>{{ choice.correct }}</span>
+          </dd>
+          <dt>
+            <span>{{ t$('questionBankApp.choice.question') }}</span>
+          </dt>
+          <dd>
+            <div v-if="choice.question">
+              <router-link :to="{ name: 'QuestionView', params: { questionId: choice.question.id } }">{{ choice.question.id }}</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>{{ t$('entity.action.back') }}</span>
+        </button>
+        <router-link v-if="choice.id" :to="{ name: 'ChoiceEdit', params: { choiceId: choice.id } }" custom v-slot="{ navigate }">
+          <button @click="navigate" class="btn btn-primary">
+            <font-awesome-icon icon="pencil-alt"></font-awesome-icon>&nbsp;<span>{{ t$('entity.action.edit') }}</span>
+          </button>
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./choice-details.component.ts"></script>

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

@@ -0,0 +1,139 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { type RouteLocation } from 'vue-router';
+
+import { type MountingOptions, shallowMount } from '@vue/test-utils';
+
+import AlertService from '@/shared/alert/alert.service';
+
+import ChoiceUpdate from './choice-update.vue';
+
+type ChoiceUpdateComponentType = InstanceType<typeof ChoiceUpdate>;
+
+let route: Partial<RouteLocation>;
+const routerGoMock = vi.fn();
+
+vi.mock('vue-router', () => ({
+  useRoute: () => route,
+  useRouter: () => ({ go: routerGoMock }),
+}));
+
+const choiceSample = { id: 123 };
+
+describe('Component Tests', () => {
+  let mountOptions: MountingOptions<ChoiceUpdateComponentType>['global'];
+  let alertService: AlertService;
+
+  describe('Choice Management Update Component', () => {
+    let comp: ChoiceUpdateComponentType;
+    let choiceServiceStub: any;
+
+    beforeEach(() => {
+      route = {};
+      choiceServiceStub = {
+        retrieve: vi.fn(),
+        find: vi.fn(),
+        update: vi.fn(),
+        create: vi.fn(),
+      };
+      choiceServiceStub.retrieve.mockResolvedValueOnce([]);
+
+      alertService = new AlertService({
+        i18n: { t: vi.fn() } as any,
+        toast: {
+          create: vi.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,
+          choiceService: () => choiceServiceStub,
+          questionService: () => ({
+            retrieve: vi.fn().mockResolvedValue({}),
+          }),
+        },
+      };
+    });
+
+    afterEach(() => {
+      vi.resetAllMocks();
+    });
+
+    describe('save', () => {
+      it('Should call update service on save for existing entity', async () => {
+        // GIVEN
+        const wrapper = shallowMount(ChoiceUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        comp.choice = choiceSample;
+        choiceServiceStub.update.mockResolvedValue(choiceSample);
+
+        // WHEN
+        comp.save();
+        await comp.$nextTick();
+
+        // THEN
+        expect(choiceServiceStub.update).toHaveBeenCalledWith(choiceSample);
+        expect(comp.isSaving).toEqual(false);
+      });
+
+      it('Should call create service on save for new entity', async () => {
+        // GIVEN
+        const entity = {};
+        choiceServiceStub.create.mockResolvedValue(entity);
+        const wrapper = shallowMount(ChoiceUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        comp.choice = entity;
+
+        // WHEN
+        comp.save();
+        await comp.$nextTick();
+
+        // THEN
+        expect(choiceServiceStub.create).toHaveBeenCalledWith(entity);
+        expect(comp.isSaving).toEqual(false);
+      });
+    });
+
+    describe('Before route enter', () => {
+      it('Should retrieve data', async () => {
+        // GIVEN
+        choiceServiceStub.find.mockResolvedValue(choiceSample);
+        choiceServiceStub.retrieve.mockResolvedValue([choiceSample]);
+
+        // WHEN
+        route = {
+          params: {
+            choiceId: `${choiceSample.id}`,
+          },
+        };
+        const wrapper = shallowMount(ChoiceUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        await comp.$nextTick();
+
+        // THEN
+        expect(comp.choice).toMatchObject(choiceSample);
+      });
+    });
+
+    describe('Previous state', () => {
+      it('Should go previous state', async () => {
+        choiceServiceStub.find.mockResolvedValue(choiceSample);
+        const wrapper = shallowMount(ChoiceUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        await comp.$nextTick();
+
+        comp.previousState();
+        await comp.$nextTick();
+
+        expect(routerGoMock).toHaveBeenCalledWith(-1);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,129 @@
+import { type Ref, computed, defineComponent, inject, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { useVuelidate } from '@vuelidate/core';
+
+import QuestionService from '@/entities/question/question.service';
+import { useAlertService } from '@/shared/alert/alert.service';
+import { useValidation } from '@/shared/composables';
+import { Choice, type IChoice } from '@/shared/model/choice.model';
+import { OptionKey } from '@/shared/model/enumerations/option-key.model';
+import { type IQuestion } from '@/shared/model/question.model';
+
+import ChoiceService from './choice.service';
+
+export default defineComponent({
+  name: 'ChoiceUpdate',
+  setup() {
+    const choiceService = inject('choiceService', () => new ChoiceService());
+    const alertService = inject('alertService', () => useAlertService(), true);
+
+    const choice: Ref<IChoice> = ref(new Choice());
+
+    const questionService = inject('questionService', () => new QuestionService());
+
+    const questions: Ref<IQuestion[]> = ref([]);
+    const optionKeyValues: Ref<string[]> = ref(Object.keys(OptionKey));
+    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 retrieveChoice = async choiceId => {
+      try {
+        const res = await choiceService().find(choiceId);
+        choice.value = res;
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      }
+    };
+
+    if (route.params?.choiceId) {
+      retrieveChoice(route.params.choiceId);
+    }
+
+    const initRelationships = () => {
+      questionService()
+        .retrieve()
+        .then(res => {
+          questions.value = res.data;
+        });
+    };
+
+    initRelationships();
+
+    const { t: t$ } = useI18n();
+    const validations = useValidation();
+    const validationRules = {
+      optionKey: {
+        required: validations.required(t$('entity.validation.required').toString()),
+      },
+      content: {
+        required: validations.required(t$('entity.validation.required').toString()),
+        maxLength: validations.maxLength(t$('entity.validation.maxlength', { max: 500 }).toString(), 500),
+      },
+      displayOrder: {
+        required: validations.required(t$('entity.validation.required').toString()),
+        integer: validations.integer(t$('entity.validation.number').toString()),
+        min: validations.minValue(t$('entity.validation.min', { min: 1 }).toString(), 1),
+        max: validations.maxValue(t$('entity.validation.max', { max: 4 }).toString(), 4),
+      },
+      correct: {
+        required: validations.required(t$('entity.validation.required').toString()),
+      },
+      question: {
+        required: validations.required(t$('entity.validation.required').toString()),
+      },
+    };
+    const v$ = useVuelidate(validationRules, choice as any);
+    v$.value.$validate();
+
+    return {
+      choiceService,
+      alertService,
+      choice,
+      previousState,
+      optionKeyValues,
+      isSaving,
+      currentLanguage,
+      questions,
+      v$,
+      t$,
+    };
+  },
+  created(): void {},
+  methods: {
+    save(): void {
+      this.isSaving = true;
+      if (this.choice.id) {
+        this.choiceService()
+          .update(this.choice)
+          .then(param => {
+            this.isSaving = false;
+            this.previousState();
+            this.alertService.showInfo(this.t$('questionBankApp.choice.updated', { param: param.id }));
+          })
+          .catch(error => {
+            this.isSaving = false;
+            this.alertService.showHttpError(error.response);
+          });
+      } else {
+        this.choiceService()
+          .create(this.choice)
+          .then(param => {
+            this.isSaving = false;
+            this.previousState();
+            this.alertService.showSuccess(this.t$('questionBankApp.choice.created', { param: param.id }).toString());
+          })
+          .catch(error => {
+            this.isSaving = false;
+            this.alertService.showHttpError(error.response);
+          });
+      }
+    },
+  },
+});

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

@@ -0,0 +1,120 @@
+<template>
+  <div class="d-flex justify-content-center">
+    <div class="col-8">
+      <form name="editForm" novalidate @submit.prevent="save()">
+        <h2 id="questionBankApp.choice.home.createOrEditLabel" data-cy="ChoiceCreateUpdateHeading">
+          {{ t$('questionBankApp.choice.home.createOrEditLabel') }}
+        </h2>
+        <div>
+          <div class="mb-3" v-if="choice.id">
+            <label for="id">{{ t$('global.field.id') }}</label>
+            <input type="text" class="form-control" id="id" name="id" v-model="choice.id" readonly />
+          </div>
+          <div class="mb-3">
+            <label class="form-control-label" for="choice-optionKey">{{ t$('questionBankApp.choice.optionKey') }}</label>
+            <select
+              class="form-control"
+              name="optionKey"
+              :class="{ valid: !v$.optionKey.$invalid, invalid: v$.optionKey.$invalid }"
+              v-model="v$.optionKey.$model"
+              id="choice-optionKey"
+              data-cy="optionKey"
+              required
+            >
+              <option
+                v-for="optionKey in optionKeyValues"
+                :key="optionKey"
+                :value="optionKey"
+                :label="t$('questionBankApp.OptionKey.' + optionKey)"
+              >
+                {{ optionKey }}
+              </option>
+            </select>
+            <div v-if="v$.optionKey.$anyDirty && v$.optionKey.$invalid">
+              <small class="form-text text-danger" v-for="error of v$.optionKey.$errors" :key="error.$uid">{{ error.$message }}</small>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-control-label" for="choice-content">{{ t$('questionBankApp.choice.content') }}</label>
+            <input
+              type="text"
+              class="form-control"
+              name="content"
+              id="choice-content"
+              data-cy="content"
+              :class="{ valid: !v$.content.$invalid, invalid: v$.content.$invalid }"
+              v-model="v$.content.$model"
+              required
+            />
+            <div v-if="v$.content.$anyDirty && v$.content.$invalid">
+              <small class="form-text text-danger" v-for="error of v$.content.$errors" :key="error.$uid">{{ error.$message }}</small>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-control-label" for="choice-displayOrder">{{ t$('questionBankApp.choice.displayOrder') }}</label>
+            <input
+              type="number"
+              class="form-control"
+              name="displayOrder"
+              id="choice-displayOrder"
+              data-cy="displayOrder"
+              :class="{ valid: !v$.displayOrder.$invalid, invalid: v$.displayOrder.$invalid }"
+              v-model.number="v$.displayOrder.$model"
+              required
+            />
+            <div v-if="v$.displayOrder.$anyDirty && v$.displayOrder.$invalid">
+              <small class="form-text text-danger" v-for="error of v$.displayOrder.$errors" :key="error.$uid">{{ error.$message }}</small>
+            </div>
+          </div>
+          <div class="mb-3 form-check">
+            <input
+              type="checkbox"
+              class="form-check-input"
+              name="correct"
+              id="choice-correct"
+              data-cy="correct"
+              :class="{ valid: !v$.correct.$invalid, invalid: v$.correct.$invalid }"
+              v-model="v$.correct.$model"
+              required
+            />
+            <label class="form-check-label" for="choice-correct">{{ t$('questionBankApp.choice.correct') }}</label>
+            <div v-if="v$.correct.$anyDirty && v$.correct.$invalid">
+              <small class="form-text text-danger" v-for="error of v$.correct.$errors" :key="error.$uid">{{ error.$message }}</small>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-control-label" for="choice">{{ t$('questionBankApp.choice.question') }}</label>
+            <select class="form-control" id="choice-question" data-cy="question" name="question" v-model="choice.question" required>
+              <option v-if="!choice.question" :value="null" selected></option>
+              <option
+                :value="choice.question && questionOption.id === choice.question.id ? choice.question : questionOption"
+                v-for="questionOption in questions"
+                :key="questionOption.id"
+              >
+                {{ questionOption.id }}
+              </option>
+            </select>
+          </div>
+          <div v-if="v$.question.$anyDirty && v$.question.$invalid">
+            <small class="form-text text-danger" v-for="error of v$.question.$errors" :key="error.$uid">{{ error.$message }}</small>
+          </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>{{ t$('entity.action.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>{{ t$('entity.action.save') }}</span>
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+<script lang="ts" src="./choice-update.component.ts"></script>

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

@@ -0,0 +1,103 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { type MountingOptions, shallowMount } from '@vue/test-utils';
+
+import AlertService from '@/shared/alert/alert.service';
+
+import Choice from './choice.vue';
+
+type ChoiceComponentType = InstanceType<typeof Choice>;
+
+const bModalStub = {
+  render: () => {},
+  methods: {
+    hide: () => {},
+    show: () => {},
+  },
+};
+
+describe('Component Tests', () => {
+  let alertService: AlertService;
+
+  describe('Choice Management Component', () => {
+    let choiceServiceStub: any;
+    let mountOptions: MountingOptions<ChoiceComponentType>['global'];
+
+    beforeEach(() => {
+      choiceServiceStub = {
+        retrieve: vi.fn(),
+        delete: vi.fn(),
+      };
+      choiceServiceStub.retrieve.mockResolvedValue({ headers: {} });
+
+      alertService = new AlertService({
+        i18n: { t: vi.fn() } as any,
+        toast: {
+          create: vi.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,
+          choiceService: () => choiceServiceStub,
+        },
+      };
+    });
+
+    describe('Mount', () => {
+      it('Should call load all on init', async () => {
+        // GIVEN
+        choiceServiceStub.retrieve.mockResolvedValue({ headers: {}, data: [{ id: 123 }] });
+
+        // WHEN
+        const wrapper = shallowMount(Choice, { global: mountOptions });
+        const comp = wrapper.vm;
+        await comp.$nextTick();
+
+        // THEN
+        expect(choiceServiceStub.retrieve).toHaveBeenCalledOnce();
+        expect(comp.choices[0]).toEqual(expect.objectContaining({ id: 123 }));
+      });
+    });
+    describe('Handles', () => {
+      let comp: ChoiceComponentType;
+
+      beforeEach(async () => {
+        const wrapper = shallowMount(Choice, { global: mountOptions });
+        comp = wrapper.vm;
+        await comp.$nextTick();
+        choiceServiceStub.retrieve.mockReset();
+        choiceServiceStub.retrieve.mockResolvedValue({ headers: {}, data: [] });
+      });
+
+      it('Should call delete service on confirmDelete', async () => {
+        // GIVEN
+        choiceServiceStub.delete.mockResolvedValue({});
+
+        // WHEN
+        comp.prepareRemove({ id: 123 });
+
+        comp.removeChoice();
+        await comp.$nextTick(); // clear components
+
+        // THEN
+        expect(choiceServiceStub.delete).toHaveBeenCalled();
+
+        // THEN
+        await comp.$nextTick(); // handle component clear watch
+        expect(choiceServiceStub.retrieve).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,78 @@
+import { type Ref, defineComponent, inject, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { useAlertService } from '@/shared/alert/alert.service';
+import { type IChoice } from '@/shared/model/choice.model';
+
+import ChoiceService from './choice.service';
+
+export default defineComponent({
+  name: 'Choice',
+  setup() {
+    const { t: t$ } = useI18n();
+    const choiceService = inject('choiceService', () => new ChoiceService());
+    const alertService = inject('alertService', () => useAlertService(), true);
+
+    const choices: Ref<IChoice[]> = ref([]);
+
+    const isFetching = ref(false);
+
+    const clear = () => {};
+
+    const retrieveChoices = async () => {
+      isFetching.value = true;
+      try {
+        const res = await choiceService().retrieve();
+        choices.value = res.data;
+      } catch (err) {
+        alertService.showHttpError(err.response);
+      } finally {
+        isFetching.value = false;
+      }
+    };
+
+    const handleSyncList = () => {
+      retrieveChoices();
+    };
+
+    onMounted(async () => {
+      await retrieveChoices();
+    });
+
+    const removeId: Ref<number> = ref(null);
+    const removeEntity = ref<any>(null);
+    const prepareRemove = (instance: IChoice) => {
+      removeId.value = instance.id;
+      removeEntity.value.show();
+    };
+    const closeDialog = () => {
+      removeEntity.value.hide();
+    };
+    const removeChoice = async () => {
+      try {
+        await choiceService().delete(removeId.value);
+        const message = t$('questionBankApp.choice.deleted', { param: removeId.value }).toString();
+        alertService.showInfo(message, { variant: 'danger' });
+        removeId.value = null;
+        retrieveChoices();
+        closeDialog();
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      }
+    };
+
+    return {
+      choices,
+      handleSyncList,
+      isFetching,
+      retrieveChoices,
+      clear,
+      removeId,
+      removeEntity,
+      prepareRemove,
+      closeDialog,
+      removeChoice,
+      t$,
+    };
+  },
+});

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

@@ -0,0 +1,161 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import axios from 'axios';
+
+import { Choice } from '@/shared/model/choice.model';
+
+import ChoiceService from './choice.service';
+
+const error = {
+  response: {
+    status: null,
+    data: {
+      type: null,
+    },
+  },
+};
+
+const axiosStub = {
+  get: vi.spyOn(axios, 'get'),
+  post: vi.spyOn(axios, 'post'),
+  put: vi.spyOn(axios, 'put'),
+  patch: vi.spyOn(axios, 'patch'),
+  delete: vi.spyOn(axios, 'delete'),
+};
+
+describe('Service Tests', () => {
+  describe('Choice Service', () => {
+    let service: ChoiceService;
+    let elemDefault;
+
+    beforeEach(() => {
+      service = new ChoiceService();
+      elemDefault = new Choice(123, 'A', 'AAAAAAA', 0, false);
+    });
+
+    describe('Service methods', () => {
+      it('should find an element', async () => {
+        const returnedFromService = { ...elemDefault };
+        axiosStub.get.mockResolvedValue({ data: returnedFromService });
+
+        return service.find(123).then(res => {
+          expect(res).toMatchObject(elemDefault);
+        });
+      });
+
+      it('should not find an element', async () => {
+        axiosStub.get.mockRejectedValue(error);
+        return service
+          .find(123)
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should create a Choice', async () => {
+        const returnedFromService = { id: 123, ...elemDefault };
+        const expected = { ...returnedFromService };
+
+        axiosStub.post.mockResolvedValue({ data: returnedFromService });
+        return service.create({}).then(res => {
+          expect(res).toMatchObject(expected);
+        });
+      });
+
+      it('should not create a Choice', async () => {
+        axiosStub.post.mockRejectedValue(error);
+
+        return service
+          .create({})
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should update a Choice', async () => {
+        const returnedFromService = { optionKey: 'BBBBBB', content: 'BBBBBB', displayOrder: 1, correct: true, ...elemDefault };
+
+        const expected = { ...returnedFromService };
+        axiosStub.put.mockResolvedValue({ data: returnedFromService });
+
+        return service.update(expected).then(res => {
+          expect(res).toMatchObject(expected);
+        });
+      });
+
+      it('should not update a Choice', async () => {
+        axiosStub.put.mockRejectedValue(error);
+
+        return service
+          .update({})
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should partial update a Choice', async () => {
+        const patchObject = { content: 'BBBBBB', ...new Choice() };
+        const returnedFromService = Object.assign(patchObject, elemDefault);
+
+        const expected = { ...returnedFromService };
+        axiosStub.patch.mockResolvedValue({ data: returnedFromService });
+
+        return service.partialUpdate(patchObject).then(res => {
+          expect(res).toMatchObject(expected);
+        });
+      });
+
+      it('should not partial update a Choice', async () => {
+        axiosStub.patch.mockRejectedValue(error);
+
+        return service
+          .partialUpdate({})
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should return a list of Choice', async () => {
+        const returnedFromService = { optionKey: 'BBBBBB', content: 'BBBBBB', displayOrder: 1, correct: true, ...elemDefault };
+        const expected = { ...returnedFromService };
+        axiosStub.get.mockResolvedValue([returnedFromService]);
+        return service.retrieve().then(res => {
+          expect(res).toContainEqual(expected);
+        });
+      });
+
+      it('should not return a list of Choice', async () => {
+        axiosStub.get.mockRejectedValue(error);
+
+        return service
+          .retrieve()
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should delete a Choice', async () => {
+        axiosStub.delete.mockResolvedValue({ ok: true });
+        return service.delete(123).then(res => {
+          expect(res.ok).toBeTruthy();
+        });
+      });
+
+      it('should not delete a Choice', async () => {
+        axiosStub.delete.mockRejectedValue(error);
+
+        return service
+          .delete(123)
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+    });
+  });
+});

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

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

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

@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <h2 id="page-heading" data-cy="ChoiceHeading">
+      <span id="choice">{{ t$('questionBankApp.choice.home.title') }}</span>
+      <div class="d-flex justify-content-end">
+        <button class="btn btn-info me-2" @click="handleSyncList" :disabled="isFetching">
+          <font-awesome-icon icon="sync" :spin="isFetching"></font-awesome-icon>
+          <span>{{ t$('questionBankApp.choice.home.refreshListLabel') }}</span>
+        </button>
+        <router-link :to="{ name: 'ChoiceCreate' }" custom v-slot="{ navigate }">
+          <button
+            @click="navigate"
+            id="jh-create-entity"
+            data-cy="entityCreateButton"
+            class="btn btn-primary jh-create-entity create-choice"
+          >
+            <font-awesome-icon icon="plus"></font-awesome-icon>
+            <span>{{ t$('questionBankApp.choice.home.createLabel') }}</span>
+          </button>
+        </router-link>
+      </div>
+    </h2>
+    <br />
+    <div class="alert alert-warning" v-if="!isFetching && choices?.length === 0">
+      <span>{{ t$('questionBankApp.choice.home.notFound') }}</span>
+    </div>
+    <div class="table-responsive" v-if="choices?.length > 0">
+      <table class="table table-striped" aria-describedby="choices">
+        <thead>
+          <tr>
+            <th scope="col">
+              <span>{{ t$('global.field.id') }}</span>
+            </th>
+            <th scope="col">
+              <span>{{ t$('questionBankApp.choice.optionKey') }}</span>
+            </th>
+            <th scope="col">
+              <span>{{ t$('questionBankApp.choice.content') }}</span>
+            </th>
+            <th scope="col">
+              <span>{{ t$('questionBankApp.choice.displayOrder') }}</span>
+            </th>
+            <th scope="col">
+              <span>{{ t$('questionBankApp.choice.correct') }}</span>
+            </th>
+            <th scope="col">
+              <span>{{ t$('questionBankApp.choice.question') }}</span>
+            </th>
+            <th scope="col"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="choice in choices" :key="choice.id" data-cy="entityTable">
+            <td>
+              <router-link :to="{ name: 'ChoiceView', params: { choiceId: choice.id } }">{{ choice.id }}</router-link>
+            </td>
+            <td>{{ t$('questionBankApp.OptionKey.' + choice.optionKey) }}</td>
+            <td>{{ choice.content }}</td>
+            <td>{{ choice.displayOrder }}</td>
+            <td>{{ choice.correct }}</td>
+            <td>
+              <div v-if="choice.question">
+                <router-link :to="{ name: 'QuestionView', params: { questionId: choice.question.id } }">{{
+                  choice.question.id
+                }}</router-link>
+              </div>
+            </td>
+            <td class="text-end">
+              <div class="btn-group">
+                <router-link :to="{ name: 'ChoiceView', params: { choiceId: choice.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">{{ t$('entity.action.view') }}</span>
+                  </button>
+                </router-link>
+                <router-link :to="{ name: 'ChoiceEdit', params: { choiceId: choice.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">{{ t$('entity.action.edit') }}</span>
+                  </button>
+                </router-link>
+                <b-button @click="prepareRemove(choice)" variant="danger" class="btn btn-sm" data-cy="entityDeleteButton">
+                  <font-awesome-icon icon="times"></font-awesome-icon>
+                  <span class="d-none d-md-inline">{{ t$('entity.action.delete') }}</span>
+                </b-button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <b-modal ref="removeEntity" id="removeEntity">
+      <template #title>
+        <span id="questionBankApp.choice.delete.question" data-cy="choiceDeleteDialogHeading">{{ t$('entity.delete.title') }}</span>
+      </template>
+      <div class="modal-body">
+        <p id="jhi-delete-choice-heading">{{ t$('questionBankApp.choice.delete.question', { id: removeId }) }}</p>
+      </div>
+      <template #footer>
+        <div>
+          <button type="button" class="btn btn-secondary" @click="closeDialog()">{{ t$('entity.action.cancel') }}</button>
+          <button
+            type="button"
+            class="btn btn-primary"
+            id="jhi-confirm-delete-choice"
+            data-cy="entityConfirmDeleteButton"
+            @click="removeChoice"
+          >
+            {{ t$('entity.action.delete') }}
+          </button>
+        </div>
+      </template>
+    </b-modal>
+  </div>
+</template>
+
+<script lang="ts" src="./choice.component.ts"></script>

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

@@ -1,5 +1,25 @@
 <template>
   <div>
+    <b-dropdown-item to="/subject">
+      <font-awesome-icon icon="asterisk" />
+      <span>{{ t$('global.menu.entities.subject') }}</span>
+    </b-dropdown-item>
+    <b-dropdown-item to="/question">
+      <font-awesome-icon icon="asterisk" />
+      <span>{{ t$('global.menu.entities.question') }}</span>
+    </b-dropdown-item>
+    <b-dropdown-item to="/choice">
+      <font-awesome-icon icon="asterisk" />
+      <span>{{ t$('global.menu.entities.choice') }}</span>
+    </b-dropdown-item>
+    <b-dropdown-item to="/exam-attempt">
+      <font-awesome-icon icon="asterisk" />
+      <span>{{ t$('global.menu.entities.examAttempt') }}</span>
+    </b-dropdown-item>
+    <b-dropdown-item to="/exam-answer">
+      <font-awesome-icon icon="asterisk" />
+      <span>{{ t$('global.menu.entities.examAnswer') }}</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,12 +1,23 @@
 import { defineComponent, provide } from 'vue';
 
 import UserService from '@/entities/user/user.service';
+
+import ChoiceService from './choice/choice.service';
+import ExamAnswerService from './exam-answer/exam-answer.service';
+import ExamAttemptService from './exam-attempt/exam-attempt.service';
+import QuestionService from './question/question.service';
+import SubjectService from './subject/subject.service';
 // jhipster-needle-add-entity-service-to-entities-component-import - JHipster will import entities services here
 
 export default defineComponent({
   name: 'Entities',
   setup() {
     provide('userService', () => new UserService());
+    provide('subjectService', () => new SubjectService());
+    provide('questionService', () => new QuestionService());
+    provide('choiceService', () => new ChoiceService());
+    provide('examAttemptService', () => new ExamAttemptService());
+    provide('examAnswerService', () => new ExamAnswerService());
     // jhipster-needle-add-entity-service-to-entities-component - JHipster will import entities services here
   },
 });

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

@@ -0,0 +1,91 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { type RouteLocation } from 'vue-router';
+
+import { type MountingOptions, shallowMount } from '@vue/test-utils';
+
+import AlertService from '@/shared/alert/alert.service';
+
+import ExamAnswerDetails from './exam-answer-details.vue';
+
+type ExamAnswerDetailsComponentType = InstanceType<typeof ExamAnswerDetails>;
+
+let route: Partial<RouteLocation>;
+const routerGoMock = vi.fn();
+
+vi.mock('vue-router', () => ({
+  useRoute: () => route,
+  useRouter: () => ({ go: routerGoMock }),
+}));
+
+const examAnswerSample = { id: 123 };
+
+describe('Component Tests', () => {
+  let alertService: AlertService;
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  describe('ExamAnswer Management Detail Component', () => {
+    let examAnswerServiceStub: any;
+    let mountOptions: MountingOptions<ExamAnswerDetailsComponentType>['global'];
+
+    beforeEach(() => {
+      route = {};
+      examAnswerServiceStub = {
+        find: vi.fn(),
+      };
+
+      alertService = new AlertService({
+        i18n: { t: vi.fn() } as any,
+        toast: {
+          create: vi.fn(),
+        } as any,
+      });
+
+      mountOptions = {
+        stubs: {
+          'font-awesome-icon': true,
+          'router-link': true,
+        },
+        provide: {
+          alertService,
+          examAnswerService: () => examAnswerServiceStub,
+        },
+      };
+    });
+
+    describe('Navigate to details', () => {
+      it('Should call load all on init', async () => {
+        // GIVEN
+        examAnswerServiceStub.find.mockResolvedValue(examAnswerSample);
+        route = {
+          params: {
+            examAnswerId: `${123}`,
+          },
+        };
+        const wrapper = shallowMount(ExamAnswerDetails, { global: mountOptions });
+        const comp = wrapper.vm;
+        // WHEN
+        await comp.$nextTick();
+
+        // THEN
+        expect(comp.examAnswer).toMatchObject(examAnswerSample);
+      });
+    });
+
+    describe('Previous state', () => {
+      it('Should go previous state', async () => {
+        examAnswerServiceStub.find.mockResolvedValue(examAnswerSample);
+        const wrapper = shallowMount(ExamAnswerDetails, { global: mountOptions });
+        const comp = wrapper.vm;
+        await comp.$nextTick();
+
+        comp.previousState();
+        await comp.$nextTick();
+
+        expect(routerGoMock).toHaveBeenCalledWith(-1);
+      });
+    });
+  });
+});

src/main/webapp/app/entities/exam-answer/exam-answer-details.component.ts

@@ -0,0 +1,42 @@
+import { type Ref, defineComponent, inject, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { useAlertService } from '@/shared/alert/alert.service';
+import { type IExamAnswer } from '@/shared/model/exam-answer.model';
+
+import ExamAnswerService from './exam-answer.service';
+
+export default defineComponent({
+  name: 'ExamAnswerDetails',
+  setup() {
+    const examAnswerService = inject('examAnswerService', () => new ExamAnswerService());
+    const alertService = inject('alertService', () => useAlertService(), true);
+
+    const route = useRoute();
+    const router = useRouter();
+
+    const previousState = () => router.go(-1);
+    const examAnswer: Ref<IExamAnswer> = ref({});
+
+    const retrieveExamAnswer = async examAnswerId => {
+      try {
+        const res = await examAnswerService().find(examAnswerId);
+        examAnswer.value = res;
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      }
+    };
+
+    if (route.params?.examAnswerId) {
+      retrieveExamAnswer(route.params.examAnswerId);
+    }
+
+    return {
+      examAnswer,
+
+      previousState,
+      t$: useI18n().t,
+    };
+  },
+});

src/main/webapp/app/entities/exam-answer/exam-answer-details.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="d-flex justify-content-center">
+    <div class="col-8">
+      <div v-if="examAnswer">
+        <h2 class="jh-entity-heading" data-cy="examAnswerDetailsHeading">
+          <span>{{ t$('questionBankApp.examAnswer.detail.title') }}</span> {{ examAnswer.id }}
+        </h2>
+        <dl class="row-md jh-entity-details">
+          <dt>
+            <span>{{ t$('questionBankApp.examAnswer.questionTextSnapshot') }}</span>
+          </dt>
+          <dd>
+            <span>{{ examAnswer.questionTextSnapshot }}</span>
+          </dd>
+          <dt>
+            <span>{{ t$('questionBankApp.examAnswer.explanationSnapshot') }}</span>
+          </dt>
+          <dd>
+            <span>{{ examAnswer.explanationSnapshot }}</span>
+          </dd>
+          <dt>
+            <span>{{ t$('questionBankApp.examAnswer.selectedOption') }}</span>
+          </dt>
+          <dd>
+            <span>{{ t$('questionBankApp.OptionKey.' + examAnswer.selectedOption) }}</span>
+          </dd>
+          <dt>
+            <span>{{ t$('questionBankApp.examAnswer.selectedContentSnapshot') }}</span>
+          </dt>
+          <dd>
+            <span>{{ examAnswer.selectedContentSnapshot }}</span>
+          </dd>
+          <dt>
+            <span>{{ t$('questionBankApp.examAnswer.correct') }}</span>
+          </dt>
+          <dd>
+            <span>{{ examAnswer.correct }}</span>
+          </dd>
+          <dt>
+            <span>{{ t$('questionBankApp.examAnswer.awardedPoints') }}</span>
+          </dt>
+          <dd>
+            <span>{{ examAnswer.awardedPoints }}</span>
+          </dd>
+          <dt>
+            <span>{{ t$('questionBankApp.examAnswer.question') }}</span>
+          </dt>
+          <dd>
+            <div v-if="examAnswer.question">
+              <router-link :to="{ name: 'QuestionView', params: { questionId: examAnswer.question.id } }">{{
+                examAnswer.question.id
+              }}</router-link>
+            </div>
+          </dd>
+          <dt>
+            <span>{{ t$('questionBankApp.examAnswer.attempt') }}</span>
+          </dt>
+          <dd>
+            <div v-if="examAnswer.attempt">
+              <router-link :to="{ name: 'ExamAttemptView', params: { examAttemptId: examAnswer.attempt.id } }">{{
+                examAnswer.attempt.id
+              }}</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>{{ t$('entity.action.back') }}</span>
+        </button>
+        <router-link
+          v-if="examAnswer.id"
+          :to="{ name: 'ExamAnswerEdit', params: { examAnswerId: examAnswer.id } }"
+          custom
+          v-slot="{ navigate }"
+        >
+          <button @click="navigate" class="btn btn-primary">
+            <font-awesome-icon icon="pencil-alt"></font-awesome-icon>&nbsp;<span>{{ t$('entity.action.edit') }}</span>
+          </button>
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./exam-answer-details.component.ts"></script>

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

@@ -0,0 +1,142 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { type RouteLocation } from 'vue-router';
+
+import { type MountingOptions, shallowMount } from '@vue/test-utils';
+
+import AlertService from '@/shared/alert/alert.service';
+
+import ExamAnswerUpdate from './exam-answer-update.vue';
+
+type ExamAnswerUpdateComponentType = InstanceType<typeof ExamAnswerUpdate>;
+
+let route: Partial<RouteLocation>;
+const routerGoMock = vi.fn();
+
+vi.mock('vue-router', () => ({
+  useRoute: () => route,
+  useRouter: () => ({ go: routerGoMock }),
+}));
+
+const examAnswerSample = { id: 123 };
+
+describe('Component Tests', () => {
+  let mountOptions: MountingOptions<ExamAnswerUpdateComponentType>['global'];
+  let alertService: AlertService;
+
+  describe('ExamAnswer Management Update Component', () => {
+    let comp: ExamAnswerUpdateComponentType;
+    let examAnswerServiceStub: any;
+
+    beforeEach(() => {
+      route = {};
+      examAnswerServiceStub = {
+        retrieve: vi.fn(),
+        find: vi.fn(),
+        update: vi.fn(),
+        create: vi.fn(),
+      };
+      examAnswerServiceStub.retrieve.mockResolvedValueOnce([]);
+
+      alertService = new AlertService({
+        i18n: { t: vi.fn() } as any,
+        toast: {
+          create: vi.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,
+          examAnswerService: () => examAnswerServiceStub,
+          questionService: () => ({
+            retrieve: vi.fn().mockResolvedValue({}),
+          }),
+          examAttemptService: () => ({
+            retrieve: vi.fn().mockResolvedValue({}),
+          }),
+        },
+      };
+    });
+
+    afterEach(() => {
+      vi.resetAllMocks();
+    });
+
+    describe('save', () => {
+      it('Should call update service on save for existing entity', async () => {
+        // GIVEN
+        const wrapper = shallowMount(ExamAnswerUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        comp.examAnswer = examAnswerSample;
+        examAnswerServiceStub.update.mockResolvedValue(examAnswerSample);
+
+        // WHEN
+        comp.save();
+        await comp.$nextTick();
+
+        // THEN
+        expect(examAnswerServiceStub.update).toHaveBeenCalledWith(examAnswerSample);
+        expect(comp.isSaving).toEqual(false);
+      });
+
+      it('Should call create service on save for new entity', async () => {
+        // GIVEN
+        const entity = {};
+        examAnswerServiceStub.create.mockResolvedValue(entity);
+        const wrapper = shallowMount(ExamAnswerUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        comp.examAnswer = entity;
+
+        // WHEN
+        comp.save();
+        await comp.$nextTick();
+
+        // THEN
+        expect(examAnswerServiceStub.create).toHaveBeenCalledWith(entity);
+        expect(comp.isSaving).toEqual(false);
+      });
+    });
+
+    describe('Before route enter', () => {
+      it('Should retrieve data', async () => {
+        // GIVEN
+        examAnswerServiceStub.find.mockResolvedValue(examAnswerSample);
+        examAnswerServiceStub.retrieve.mockResolvedValue([examAnswerSample]);
+
+        // WHEN
+        route = {
+          params: {
+            examAnswerId: `${examAnswerSample.id}`,
+          },
+        };
+        const wrapper = shallowMount(ExamAnswerUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        await comp.$nextTick();
+
+        // THEN
+        expect(comp.examAnswer).toMatchObject(examAnswerSample);
+      });
+    });
+
+    describe('Previous state', () => {
+      it('Should go previous state', async () => {
+        examAnswerServiceStub.find.mockResolvedValue(examAnswerSample);
+        const wrapper = shallowMount(ExamAnswerUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        await comp.$nextTick();
+
+        comp.previousState();
+        await comp.$nextTick();
+
+        expect(routerGoMock).toHaveBeenCalledWith(-1);
+      });
+    });
+  });
+});

src/main/webapp/app/entities/exam-answer/exam-answer-update.component.ts

@@ -0,0 +1,144 @@
+import { type Ref, computed, defineComponent, inject, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { useVuelidate } from '@vuelidate/core';
+
+import ExamAttemptService from '@/entities/exam-attempt/exam-attempt.service';
+import QuestionService from '@/entities/question/question.service';
+import { useAlertService } from '@/shared/alert/alert.service';
+import { useValidation } from '@/shared/composables';
+import { OptionKey } from '@/shared/model/enumerations/option-key.model';
+import { ExamAnswer, type IExamAnswer } from '@/shared/model/exam-answer.model';
+import { type IExamAttempt } from '@/shared/model/exam-attempt.model';
+import { type IQuestion } from '@/shared/model/question.model';
+
+import ExamAnswerService from './exam-answer.service';
+
+export default defineComponent({
+  name: 'ExamAnswerUpdate',
+  setup() {
+    const examAnswerService = inject('examAnswerService', () => new ExamAnswerService());
+    const alertService = inject('alertService', () => useAlertService(), true);
+
+    const examAnswer: Ref<IExamAnswer> = ref(new ExamAnswer());
+
+    const questionService = inject('questionService', () => new QuestionService());
+
+    const questions: Ref<IQuestion[]> = ref([]);
+
+    const examAttemptService = inject('examAttemptService', () => new ExamAttemptService());
+
+    const examAttempts: Ref<IExamAttempt[]> = ref([]);
+    const optionKeyValues: Ref<string[]> = ref(Object.keys(OptionKey));
+    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 retrieveExamAnswer = async examAnswerId => {
+      try {
+        const res = await examAnswerService().find(examAnswerId);
+        examAnswer.value = res;
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      }
+    };
+
+    if (route.params?.examAnswerId) {
+      retrieveExamAnswer(route.params.examAnswerId);
+    }
+
+    const initRelationships = () => {
+      questionService()
+        .retrieve()
+        .then(res => {
+          questions.value = res.data;
+        });
+      examAttemptService()
+        .retrieve()
+        .then(res => {
+          examAttempts.value = res.data;
+        });
+    };
+
+    initRelationships();
+
+    const { t: t$ } = useI18n();
+    const validations = useValidation();
+    const validationRules = {
+      questionTextSnapshot: {
+        required: validations.required(t$('entity.validation.required').toString()),
+        maxLength: validations.maxLength(t$('entity.validation.maxlength', { max: 2000 }).toString(), 2000),
+      },
+      explanationSnapshot: {
+        maxLength: validations.maxLength(t$('entity.validation.maxlength', { max: 2000 }).toString(), 2000),
+      },
+      selectedOption: {},
+      selectedContentSnapshot: {
+        maxLength: validations.maxLength(t$('entity.validation.maxlength', { max: 500 }).toString(), 500),
+      },
+      correct: {},
+      awardedPoints: {
+        integer: validations.integer(t$('entity.validation.number').toString()),
+        min: validations.minValue(t$('entity.validation.min', { min: 0 }).toString(), 0),
+      },
+      question: {
+        required: validations.required(t$('entity.validation.required').toString()),
+      },
+      attempt: {
+        required: validations.required(t$('entity.validation.required').toString()),
+      },
+    };
+    const v$ = useVuelidate(validationRules, examAnswer as any);
+    v$.value.$validate();
+
+    return {
+      examAnswerService,
+      alertService,
+      examAnswer,
+      previousState,
+      optionKeyValues,
+      isSaving,
+      currentLanguage,
+      questions,
+      examAttempts,
+      v$,
+      t$,
+    };
+  },
+  created(): void {},
+  methods: {
+    save(): void {
+      this.isSaving = true;
+      if (this.examAnswer.id) {
+        this.examAnswerService()
+          .update(this.examAnswer)
+          .then(param => {
+            this.isSaving = false;
+            this.previousState();
+            this.alertService.showInfo(this.t$('questionBankApp.examAnswer.updated', { param: param.id }));
+          })
+          .catch(error => {
+            this.isSaving = false;
+            this.alertService.showHttpError(error.response);
+          });
+      } else {
+        this.examAnswerService()
+          .create(this.examAnswer)
+          .then(param => {
+            this.isSaving = false;
+            this.previousState();
+            this.alertService.showSuccess(this.t$('questionBankApp.examAnswer.created', { param: param.id }).toString());
+          })
+          .catch(error => {
+            this.isSaving = false;
+            this.alertService.showHttpError(error.response);
+          });
+      }
+    },
+  },
+});

src/main/webapp/app/entities/exam-answer/exam-answer-update.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="d-flex justify-content-center">
+    <div class="col-8">
+      <form name="editForm" novalidate @submit.prevent="save()">
+        <h2 id="questionBankApp.examAnswer.home.createOrEditLabel" data-cy="ExamAnswerCreateUpdateHeading">
+          {{ t$('questionBankApp.examAnswer.home.createOrEditLabel') }}
+        </h2>
+        <div>
+          <div class="mb-3" v-if="examAnswer.id">
+            <label for="id">{{ t$('global.field.id') }}</label>
+            <input type="text" class="form-control" id="id" name="id" v-model="examAnswer.id" readonly />
+          </div>
+          <div class="mb-3">
+            <label class="form-control-label" for="exam-answer-questionTextSnapshot">{{
+              t$('questionBankApp.examAnswer.questionTextSnapshot')
+            }}</label>
+            <input
+              type="text"
+              class="form-control"
+              name="questionTextSnapshot"
+              id="exam-answer-questionTextSnapshot"
+              data-cy="questionTextSnapshot"
+              :class="{ valid: !v$.questionTextSnapshot.$invalid, invalid: v$.questionTextSnapshot.$invalid }"
+              v-model="v$.questionTextSnapshot.$model"
+              required
+            />
+            <div v-if="v$.questionTextSnapshot.$anyDirty && v$.questionTextSnapshot.$invalid">
+              <small class="form-text text-danger" v-for="error of v$.questionTextSnapshot.$errors" :key="error.$uid">{{
+                error.$message
+              }}</small>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-control-label" for="exam-answer-explanationSnapshot">{{
+              t$('questionBankApp.examAnswer.explanationSnapshot')
+            }}</label>
+            <input
+              type="text"
+              class="form-control"
+              name="explanationSnapshot"
+              id="exam-answer-explanationSnapshot"
+              data-cy="explanationSnapshot"
+              :class="{ valid: !v$.explanationSnapshot.$invalid, invalid: v$.explanationSnapshot.$invalid }"
+              v-model="v$.explanationSnapshot.$model"
+            />
+            <div v-if="v$.explanationSnapshot.$anyDirty && v$.explanationSnapshot.$invalid">
+              <small class="form-text text-danger" v-for="error of v$.explanationSnapshot.$errors" :key="error.$uid">{{
+                error.$message
+              }}</small>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-control-label" for="exam-answer-selectedOption">{{ t$('questionBankApp.examAnswer.selectedOption') }}</label>
+            <select
+              class="form-control"
+              name="selectedOption"
+              :class="{ valid: !v$.selectedOption.$invalid, invalid: v$.selectedOption.$invalid }"
+              v-model="v$.selectedOption.$model"
+              id="exam-answer-selectedOption"
+              data-cy="selectedOption"
+            >
+              <option
+                v-for="optionKey in optionKeyValues"
+                :key="optionKey"
+                :value="optionKey"
+                :label="t$('questionBankApp.OptionKey.' + optionKey)"
+              >
+                {{ optionKey }}
+              </option>
+            </select>
+          </div>
+          <div class="mb-3">
+            <label class="form-control-label" for="exam-answer-selectedContentSnapshot">{{
+              t$('questionBankApp.examAnswer.selectedContentSnapshot')
+            }}</label>
+            <input
+              type="text"
+              class="form-control"
+              name="selectedContentSnapshot"
+              id="exam-answer-selectedContentSnapshot"
+              data-cy="selectedContentSnapshot"
+              :class="{ valid: !v$.selectedContentSnapshot.$invalid, invalid: v$.selectedContentSnapshot.$invalid }"
+              v-model="v$.selectedContentSnapshot.$model"
+            />
+            <div v-if="v$.selectedContentSnapshot.$anyDirty && v$.selectedContentSnapshot.$invalid">
+              <small class="form-text text-danger" v-for="error of v$.selectedContentSnapshot.$errors" :key="error.$uid">{{
+                error.$message
+              }}</small>
+            </div>
+          </div>
+          <div class="mb-3 form-check">
+            <input
+              type="checkbox"
+              class="form-check-input"
+              name="correct"
+              id="exam-answer-correct"
+              data-cy="correct"
+              :class="{ valid: !v$.correct.$invalid, invalid: v$.correct.$invalid }"
+              v-model="v$.correct.$model"
+            />
+            <label class="form-check-label" for="exam-answer-correct">{{ t$('questionBankApp.examAnswer.correct') }}</label>
+          </div>
+          <div class="mb-3">
+            <label class="form-control-label" for="exam-answer-awardedPoints">{{ t$('questionBankApp.examAnswer.awardedPoints') }}</label>
+            <input
+              type="number"
+              class="form-control"
+              name="awardedPoints"
+              id="exam-answer-awardedPoints"
+              data-cy="awardedPoints"
+              :class="{ valid: !v$.awardedPoints.$invalid, invalid: v$.awardedPoints.$invalid }"
+              v-model.number="v$.awardedPoints.$model"
+            />
+            <div v-if="v$.awardedPoints.$anyDirty && v$.awardedPoints.$invalid">
+              <small class="form-text text-danger" v-for="error of v$.awardedPoints.$errors" :key="error.$uid">{{ error.$message }}</small>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-control-label" for="exam-answer">{{ t$('questionBankApp.examAnswer.question') }}</label>
+            <select
+              class="form-control"
+              id="exam-answer-question"
+              data-cy="question"
+              name="question"
+              v-model="examAnswer.question"
+              required
+            >
+              <option v-if="!examAnswer.question" :value="null" selected></option>
+              <option
+                :value="examAnswer.question && questionOption.id === examAnswer.question.id ? examAnswer.question : questionOption"
+                v-for="questionOption in questions"
+                :key="questionOption.id"
+              >
+                {{ questionOption.id }}
+              </option>
+            </select>
+          </div>
+          <div v-if="v$.question.$anyDirty && v$.question.$invalid">
+            <small class="form-text text-danger" v-for="error of v$.question.$errors" :key="error.$uid">{{ error.$message }}</small>
+          </div>
+          <div class="mb-3">
+            <label class="form-control-label" for="exam-answer">{{ t$('questionBankApp.examAnswer.attempt') }}</label>
+            <select class="form-control" id="exam-answer-attempt" data-cy="attempt" name="attempt" v-model="examAnswer.attempt" required>
+              <option v-if="!examAnswer.attempt" :value="null" selected></option>
+              <option
+                :value="examAnswer.attempt && examAttemptOption.id === examAnswer.attempt.id ? examAnswer.attempt : examAttemptOption"
+                v-for="examAttemptOption in examAttempts"
+                :key="examAttemptOption.id"
+              >
+                {{ examAttemptOption.id }}
+              </option>
+            </select>
+          </div>
+          <div v-if="v$.attempt.$anyDirty && v$.attempt.$invalid">
+            <small class="form-text text-danger" v-for="error of v$.attempt.$errors" :key="error.$uid">{{ error.$message }}</small>
+          </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>{{ t$('entity.action.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>{{ t$('entity.action.save') }}</span>
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+<script lang="ts" src="./exam-answer-update.component.ts"></script>

src/main/webapp/app/entities/exam-answer/exam-answer.component.spec.ts

@@ -0,0 +1,103 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { type MountingOptions, shallowMount } from '@vue/test-utils';
+
+import AlertService from '@/shared/alert/alert.service';
+
+import ExamAnswer from './exam-answer.vue';
+
+type ExamAnswerComponentType = InstanceType<typeof ExamAnswer>;
+
+const bModalStub = {
+  render: () => {},
+  methods: {
+    hide: () => {},
+    show: () => {},
+  },
+};
+
+describe('Component Tests', () => {
+  let alertService: AlertService;
+
+  describe('ExamAnswer Management Component', () => {
+    let examAnswerServiceStub: any;
+    let mountOptions: MountingOptions<ExamAnswerComponentType>['global'];
+
+    beforeEach(() => {
+      examAnswerServiceStub = {
+        retrieve: vi.fn(),
+        delete: vi.fn(),
+      };
+      examAnswerServiceStub.retrieve.mockResolvedValue({ headers: {} });
+
+      alertService = new AlertService({
+        i18n: { t: vi.fn() } as any,
+        toast: {
+          create: vi.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,
+          examAnswerService: () => examAnswerServiceStub,
+        },
+      };
+    });
+
+    describe('Mount', () => {
+      it('Should call load all on init', async () => {
+        // GIVEN
+        examAnswerServiceStub.retrieve.mockResolvedValue({ headers: {}, data: [{ id: 123 }] });
+
+        // WHEN
+        const wrapper = shallowMount(ExamAnswer, { global: mountOptions });
+        const comp = wrapper.vm;
+        await comp.$nextTick();
+
+        // THEN
+        expect(examAnswerServiceStub.retrieve).toHaveBeenCalledOnce();
+        expect(comp.examAnswers[0]).toEqual(expect.objectContaining({ id: 123 }));
+      });
+    });
+    describe('Handles', () => {
+      let comp: ExamAnswerComponentType;
+
+      beforeEach(async () => {
+        const wrapper = shallowMount(ExamAnswer, { global: mountOptions });
+        comp = wrapper.vm;
+        await comp.$nextTick();
+        examAnswerServiceStub.retrieve.mockReset();
+        examAnswerServiceStub.retrieve.mockResolvedValue({ headers: {}, data: [] });
+      });
+
+      it('Should call delete service on confirmDelete', async () => {
+        // GIVEN
+        examAnswerServiceStub.delete.mockResolvedValue({});
+
+        // WHEN
+        comp.prepareRemove({ id: 123 });
+
+        comp.removeExamAnswer();
+        await comp.$nextTick(); // clear components
+
+        // THEN
+        expect(examAnswerServiceStub.delete).toHaveBeenCalled();
+
+        // THEN
+        await comp.$nextTick(); // handle component clear watch
+        expect(examAnswerServiceStub.retrieve).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+});

src/main/webapp/app/entities/exam-answer/exam-answer.component.ts

@@ -0,0 +1,78 @@
+import { type Ref, defineComponent, inject, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { useAlertService } from '@/shared/alert/alert.service';
+import { type IExamAnswer } from '@/shared/model/exam-answer.model';
+
+import ExamAnswerService from './exam-answer.service';
+
+export default defineComponent({
+  name: 'ExamAnswer',
+  setup() {
+    const { t: t$ } = useI18n();
+    const examAnswerService = inject('examAnswerService', () => new ExamAnswerService());
+    const alertService = inject('alertService', () => useAlertService(), true);
+
+    const examAnswers: Ref<IExamAnswer[]> = ref([]);
+
+    const isFetching = ref(false);
+
+    const clear = () => {};
+
+    const retrieveExamAnswers = async () => {
+      isFetching.value = true;
+      try {
+        const res = await examAnswerService().retrieve();
+        examAnswers.value = res.data;
+      } catch (err) {
+        alertService.showHttpError(err.response);
+      } finally {
+        isFetching.value = false;
+      }
+    };
+
+    const handleSyncList = () => {
+      retrieveExamAnswers();
+    };
+
+    onMounted(async () => {
+      await retrieveExamAnswers();
+    });
+
+    const removeId: Ref<number> = ref(null);
+    const removeEntity = ref<any>(null);
+    const prepareRemove = (instance: IExamAnswer) => {
+      removeId.value = instance.id;
+      removeEntity.value.show();
+    };
+    const closeDialog = () => {
+      removeEntity.value.hide();
+    };
+    const removeExamAnswer = async () => {
+      try {
+        await examAnswerService().delete(removeId.value);
+        const message = t$('questionBankApp.examAnswer.deleted', { param: removeId.value }).toString();
+        alertService.showInfo(message, { variant: 'danger' });
+        removeId.value = null;
+        retrieveExamAnswers();
+        closeDialog();
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      }
+    };
+
+    return {
+      examAnswers,
+      handleSyncList,
+      isFetching,
+      retrieveExamAnswers,
+      clear,
+      removeId,
+      removeEntity,
+      prepareRemove,
+      closeDialog,
+      removeExamAnswer,
+      t$,
+    };
+  },
+});

src/main/webapp/app/entities/exam-answer/exam-answer.service.spec.ts

@@ -0,0 +1,177 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import axios from 'axios';
+
+import { ExamAnswer } from '@/shared/model/exam-answer.model';
+
+import ExamAnswerService from './exam-answer.service';
+
+const error = {
+  response: {
+    status: null,
+    data: {
+      type: null,
+    },
+  },
+};
+
+const axiosStub = {
+  get: vi.spyOn(axios, 'get'),
+  post: vi.spyOn(axios, 'post'),
+  put: vi.spyOn(axios, 'put'),
+  patch: vi.spyOn(axios, 'patch'),
+  delete: vi.spyOn(axios, 'delete'),
+};
+
+describe('Service Tests', () => {
+  describe('ExamAnswer Service', () => {
+    let service: ExamAnswerService;
+    let elemDefault;
+
+    beforeEach(() => {
+      service = new ExamAnswerService();
+      elemDefault = new ExamAnswer(123, 'AAAAAAA', 'AAAAAAA', 'A', 'AAAAAAA', false, 0);
+    });
+
+    describe('Service methods', () => {
+      it('should find an element', async () => {
+        const returnedFromService = { ...elemDefault };
+        axiosStub.get.mockResolvedValue({ data: returnedFromService });
+
+        return service.find(123).then(res => {
+          expect(res).toMatchObject(elemDefault);
+        });
+      });
+
+      it('should not find an element', async () => {
+        axiosStub.get.mockRejectedValue(error);
+        return service
+          .find(123)
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should create a ExamAnswer', async () => {
+        const returnedFromService = { id: 123, ...elemDefault };
+        const expected = { ...returnedFromService };
+
+        axiosStub.post.mockResolvedValue({ data: returnedFromService });
+        return service.create({}).then(res => {
+          expect(res).toMatchObject(expected);
+        });
+      });
+
+      it('should not create a ExamAnswer', async () => {
+        axiosStub.post.mockRejectedValue(error);
+
+        return service
+          .create({})
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should update a ExamAnswer', async () => {
+        const returnedFromService = {
+          questionTextSnapshot: 'BBBBBB',
+          explanationSnapshot: 'BBBBBB',
+          selectedOption: 'BBBBBB',
+          selectedContentSnapshot: 'BBBBBB',
+          correct: true,
+          awardedPoints: 1,
+          ...elemDefault,
+        };
+
+        const expected = { ...returnedFromService };
+        axiosStub.put.mockResolvedValue({ data: returnedFromService });
+
+        return service.update(expected).then(res => {
+          expect(res).toMatchObject(expected);
+        });
+      });
+
+      it('should not update a ExamAnswer', async () => {
+        axiosStub.put.mockRejectedValue(error);
+
+        return service
+          .update({})
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should partial update a ExamAnswer', async () => {
+        const patchObject = { questionTextSnapshot: 'BBBBBB', explanationSnapshot: 'BBBBBB', ...new ExamAnswer() };
+        const returnedFromService = Object.assign(patchObject, elemDefault);
+
+        const expected = { ...returnedFromService };
+        axiosStub.patch.mockResolvedValue({ data: returnedFromService });
+
+        return service.partialUpdate(patchObject).then(res => {
+          expect(res).toMatchObject(expected);
+        });
+      });
+
+      it('should not partial update a ExamAnswer', async () => {
+        axiosStub.patch.mockRejectedValue(error);
+
+        return service
+          .partialUpdate({})
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should return a list of ExamAnswer', async () => {
+        const returnedFromService = {
+          questionTextSnapshot: 'BBBBBB',
+          explanationSnapshot: 'BBBBBB',
+          selectedOption: 'BBBBBB',
+          selectedContentSnapshot: 'BBBBBB',
+          correct: true,
+          awardedPoints: 1,
+          ...elemDefault,
+        };
+        const expected = { ...returnedFromService };
+        axiosStub.get.mockResolvedValue([returnedFromService]);
+        return service.retrieve().then(res => {
+          expect(res).toContainEqual(expected);
+        });
+      });
+
+      it('should not return a list of ExamAnswer', async () => {
+        axiosStub.get.mockRejectedValue(error);
+
+        return service
+          .retrieve()
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should delete a ExamAnswer', async () => {
+        axiosStub.delete.mockResolvedValue({ ok: true });
+        return service.delete(123).then(res => {
+          expect(res.ok).toBeTruthy();
+        });
+      });
+
+      it('should not delete a ExamAnswer', async () => {
+        axiosStub.delete.mockRejectedValue(error);
+
+        return service
+          .delete(123)
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+    });
+  });
+});

src/main/webapp/app/entities/exam-answer/exam-answer.service.ts

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

src/main/webapp/app/entities/exam-answer/exam-answer.vue

@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <h2 id="page-heading" data-cy="ExamAnswerHeading">
+      <span id="exam-answer">{{ t$('questionBankApp.examAnswer.home.title') }}</span>
+      <div class="d-flex justify-content-end">
+        <button class="btn btn-info me-2" @click="handleSyncList" :disabled="isFetching">
+          <font-awesome-icon icon="sync" :spin="isFetching"></font-awesome-icon>
+          <span>{{ t$('questionBankApp.examAnswer.home.refreshListLabel') }}</span>
+        </button>
+        <router-link :to="{ name: 'ExamAnswerCreate' }" custom v-slot="{ navigate }">
+          <button
+            @click="navigate"
+            id="jh-create-entity"
+            data-cy="entityCreateButton"
+            class="btn btn-primary jh-create-entity create-exam-answer"
+          >
+            <font-awesome-icon icon="plus"></font-awesome-icon>
+            <span>{{ t$('questionBankApp.examAnswer.home.createLabel') }}</span>
+          </button>
+        </router-link>
+      </div>
+    </h2>
+    <br />
+    <div class="alert alert-warning" v-if="!isFetching && examAnswers?.length === 0">
+      <span>{{ t$('questionBankApp.examAnswer.home.notFound') }}</span>
+    </div>
+    <div class="table-responsive" v-if="examAnswers?.length > 0">
+      <table class="table table-striped" aria-describedby="examAnswers">
+        <thead>
+          <tr>
+            <th scope="col">
+              <span>{{ t$('global.field.id') }}</span>
+            </th>
+            <th scope="col">
+              <span>{{ t$('questionBankApp.examAnswer.questionTextSnapshot') }}</span>
+            </th>
+            <th scope="col">
+              <span>{{ t$('questionBankApp.examAnswer.explanationSnapshot') }}</span>
+            </th>
+            <th scope="col">
+              <span>{{ t$('questionBankApp.examAnswer.selectedOption') }}</span>
+            </th>
+            <th scope="col">
+              <span>{{ t$('questionBankApp.examAnswer.selectedContentSnapshot') }}</span>
+            </th>
+            <th scope="col">
+              <span>{{ t$('questionBankApp.examAnswer.correct') }}</span>
+            </th>
+            <th scope="col">
+              <span>{{ t$('questionBankApp.examAnswer.awardedPoints') }}</span>
+            </th>
+            <th scope="col">
+              <span>{{ t$('questionBankApp.examAnswer.question') }}</span>
+            </th>
+            <th scope="col">
+              <span>{{ t$('questionBankApp.examAnswer.attempt') }}</span>
+            </th>
+            <th scope="col"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="examAnswer in examAnswers" :key="examAnswer.id" data-cy="entityTable">
+            <td>
+              <router-link :to="{ name: 'ExamAnswerView', params: { examAnswerId: examAnswer.id } }">{{ examAnswer.id }}</router-link>
+            </td>
+            <td>{{ examAnswer.questionTextSnapshot }}</td>
+            <td>{{ examAnswer.explanationSnapshot }}</td>
+            <td>{{ t$('questionBankApp.OptionKey.' + examAnswer.selectedOption) }}</td>
+            <td>{{ examAnswer.selectedContentSnapshot }}</td>
+            <td>{{ examAnswer.correct }}</td>
+            <td>{{ examAnswer.awardedPoints }}</td>
+            <td>
+              <div v-if="examAnswer.question">
+                <router-link :to="{ name: 'QuestionView', params: { questionId: examAnswer.question.id } }">{{
+                  examAnswer.question.id
+                }}</router-link>
+              </div>
+            </td>
+            <td>
+              <div v-if="examAnswer.attempt">
+                <router-link :to="{ name: 'ExamAttemptView', params: { examAttemptId: examAnswer.attempt.id } }">{{
+                  examAnswer.attempt.id
+                }}</router-link>
+              </div>
+            </td>
+            <td class="text-end">
+              <div class="btn-group">
+                <router-link :to="{ name: 'ExamAnswerView', params: { examAnswerId: examAnswer.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">{{ t$('entity.action.view') }}</span>
+                  </button>
+                </router-link>
+                <router-link :to="{ name: 'ExamAnswerEdit', params: { examAnswerId: examAnswer.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">{{ t$('entity.action.edit') }}</span>
+                  </button>
+                </router-link>
+                <b-button @click="prepareRemove(examAnswer)" variant="danger" class="btn btn-sm" data-cy="entityDeleteButton">
+                  <font-awesome-icon icon="times"></font-awesome-icon>
+                  <span class="d-none d-md-inline">{{ t$('entity.action.delete') }}</span>
+                </b-button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <b-modal ref="removeEntity" id="removeEntity">
+      <template #title>
+        <span id="questionBankApp.examAnswer.delete.question" data-cy="examAnswerDeleteDialogHeading">{{ t$('entity.delete.title') }}</span>
+      </template>
+      <div class="modal-body">
+        <p id="jhi-delete-examAnswer-heading">{{ t$('questionBankApp.examAnswer.delete.question', { id: removeId }) }}</p>
+      </div>
+      <template #footer>
+        <div>
+          <button type="button" class="btn btn-secondary" @click="closeDialog()">{{ t$('entity.action.cancel') }}</button>
+          <button
+            type="button"
+            class="btn btn-primary"
+            id="jhi-confirm-delete-examAnswer"
+            data-cy="entityConfirmDeleteButton"
+            @click="removeExamAnswer"
+          >
+            {{ t$('entity.action.delete') }}
+          </button>
+        </div>
+      </template>
+    </b-modal>
+  </div>
+</template>
+
+<script lang="ts" src="./exam-answer.component.ts"></script>

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

@@ -0,0 +1,91 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { type RouteLocation } from 'vue-router';
+
+import { type MountingOptions, shallowMount } from '@vue/test-utils';
+
+import AlertService from '@/shared/alert/alert.service';
+
+import ExamAttemptDetails from './exam-attempt-details.vue';
+
+type ExamAttemptDetailsComponentType = InstanceType<typeof ExamAttemptDetails>;
+
+let route: Partial<RouteLocation>;
+const routerGoMock = vi.fn();
+
+vi.mock('vue-router', () => ({
+  useRoute: () => route,
+  useRouter: () => ({ go: routerGoMock }),
+}));
+
+const examAttemptSample = { id: 123 };
+
+describe('Component Tests', () => {
+  let alertService: AlertService;
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  describe('ExamAttempt Management Detail Component', () => {
+    let examAttemptServiceStub: any;
+    let mountOptions: MountingOptions<ExamAttemptDetailsComponentType>['global'];
+
+    beforeEach(() => {
+      route = {};
+      examAttemptServiceStub = {
+        find: vi.fn(),
+      };
+
+      alertService = new AlertService({
+        i18n: { t: vi.fn() } as any,
+        toast: {
+          create: vi.fn(),
+        } as any,
+      });
+
+      mountOptions = {
+        stubs: {
+          'font-awesome-icon': true,
+          'router-link': true,
+        },
+        provide: {
+          alertService,
+          examAttemptService: () => examAttemptServiceStub,
+        },
+      };
+    });
+
+    describe('Navigate to details', () => {
+      it('Should call load all on init', async () => {
+        // GIVEN
+        examAttemptServiceStub.find.mockResolvedValue(examAttemptSample);
+        route = {
+          params: {
+            examAttemptId: `${123}`,
+          },
+        };
+        const wrapper = shallowMount(ExamAttemptDetails, { global: mountOptions });
+        const comp = wrapper.vm;
+        // WHEN
+        await comp.$nextTick();
+
+        // THEN
+        expect(comp.examAttempt).toMatchObject(examAttemptSample);
+      });
+    });
+
+    describe('Previous state', () => {
+      it('Should go previous state', async () => {
+        examAttemptServiceStub.find.mockResolvedValue(examAttemptSample);
+        const wrapper = shallowMount(ExamAttemptDetails, { global: mountOptions });
+        const comp = wrapper.vm;
+        await comp.$nextTick();
+
+        comp.previousState();
+        await comp.$nextTick();
+
+        expect(routerGoMock).toHaveBeenCalledWith(-1);
+      });
+    });
+  });
+});

src/main/webapp/app/entities/exam-attempt/exam-attempt-details.component.ts

@@ -0,0 +1,45 @@
+import { type Ref, defineComponent, inject, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { useAlertService } from '@/shared/alert/alert.service';
+import { useDateFormat } from '@/shared/composables';
+import { type IExamAttempt } from '@/shared/model/exam-attempt.model';
+
+import ExamAttemptService from './exam-attempt.service';
+
+export default defineComponent({
+  name: 'ExamAttemptDetails',
+  setup() {
+    const dateFormat = useDateFormat();
+    const examAttemptService = inject('examAttemptService', () => new ExamAttemptService());
+    const alertService = inject('alertService', () => useAlertService(), true);
+
+    const route = useRoute();
+    const router = useRouter();
+
+    const previousState = () => router.go(-1);
+    const examAttempt: Ref<IExamAttempt> = ref({});
+
+    const retrieveExamAttempt = async examAttemptId => {
+      try {
+        const res = await examAttemptService().find(examAttemptId);
+        examAttempt.value = res;
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      }
+    };
+
+    if (route.params?.examAttemptId) {
+      retrieveExamAttempt(route.params.examAttemptId);
+    }
+
+    return {
+      ...dateFormat,
+      examAttempt,
+
+      previousState,
+      t$: useI18n().t,
+    };
+  },
+});

src/main/webapp/app/entities/exam-attempt/exam-attempt-details.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="d-flex justify-content-center">
+    <div class="col-8">
+      <div v-if="examAttempt">
+        <h2 class="jh-entity-heading" data-cy="examAttemptDetailsHeading">
+          <span>{{ t$('questionBankApp.examAttempt.detail.title') }}</span> {{ examAttempt.id }}
+        </h2>
+        <dl class="row-md jh-entity-details">
+          <dt>
+            <span>{{ t$('questionBankApp.examAttempt.startedAt') }}</span>
+          </dt>
+          <dd>
+            <span v-if="examAttempt.startedAt">{{ formatDateLong(examAttempt.startedAt) }}</span>
+          </dd>
+          <dt>
+            <span>{{ t$('questionBankApp.examAttempt.submittedAt') }}</span>
+          </dt>
+          <dd>
+            <span v-if="examAttempt.submittedAt">{{ formatDateLong(examAttempt.submittedAt) }}</span>
+          </dd>
+          <dt>
+            <span>{{ t$('questionBankApp.examAttempt.status') }}</span>
+          </dt>
+          <dd>
+            <span>{{ t$('questionBankApp.AttemptStatus.' + examAttempt.status) }}</span>
+          </dd>
+          <dt>
+            <span>{{ t$('questionBankApp.examAttempt.score') }}</span>
+          </dt>
+          <dd>
+            <span>{{ examAttempt.score }}</span>
+          </dd>
+          <dt>
+            <span>{{ t$('questionBankApp.examAttempt.subject') }}</span>
+          </dt>
+          <dd>
+            <div v-if="examAttempt.subject">
+              <router-link :to="{ name: 'SubjectView', params: { subjectId: examAttempt.subject.id } }">{{
+                examAttempt.subject.name
+              }}</router-link>
+            </div>
+          </dd>
+          <dt>
+            <span>{{ t$('questionBankApp.examAttempt.user') }}</span>
+          </dt>
+          <dd>
+            {{ examAttempt.user ? examAttempt.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>{{ t$('entity.action.back') }}</span>
+        </button>
+        <router-link
+          v-if="examAttempt.id"
+          :to="{ name: 'ExamAttemptEdit', params: { examAttemptId: examAttempt.id } }"
+          custom
+          v-slot="{ navigate }"
+        >
+          <button @click="navigate" class="btn btn-primary">
+            <font-awesome-icon icon="pencil-alt"></font-awesome-icon>&nbsp;<span>{{ t$('entity.action.edit') }}</span>
+          </button>
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./exam-attempt-details.component.ts"></script>

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

@@ -0,0 +1,166 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { type RouteLocation } from 'vue-router';
+
+import { type MountingOptions, shallowMount } from '@vue/test-utils';
+import dayjs from 'dayjs';
+
+import AlertService from '@/shared/alert/alert.service';
+import { DATE_TIME_LONG_FORMAT } from '@/shared/composables/date-format';
+
+import ExamAttemptUpdate from './exam-attempt-update.vue';
+
+type ExamAttemptUpdateComponentType = InstanceType<typeof ExamAttemptUpdate>;
+
+let route: Partial<RouteLocation>;
+const routerGoMock = vi.fn();
+
+vi.mock('vue-router', () => ({
+  useRoute: () => route,
+  useRouter: () => ({ go: routerGoMock }),
+}));
+
+const examAttemptSample = { id: 123 };
+
+describe('Component Tests', () => {
+  let mountOptions: MountingOptions<ExamAttemptUpdateComponentType>['global'];
+  let alertService: AlertService;
+
+  describe('ExamAttempt Management Update Component', () => {
+    let comp: ExamAttemptUpdateComponentType;
+    let examAttemptServiceStub: any;
+
+    beforeEach(() => {
+      route = {};
+      examAttemptServiceStub = {
+        retrieve: vi.fn(),
+        find: vi.fn(),
+        update: vi.fn(),
+        create: vi.fn(),
+      };
+      examAttemptServiceStub.retrieve.mockResolvedValueOnce([]);
+
+      alertService = new AlertService({
+        i18n: { t: vi.fn() } as any,
+        toast: {
+          create: vi.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,
+          examAttemptService: () => examAttemptServiceStub,
+          subjectService: () => ({
+            retrieve: vi.fn().mockResolvedValue({}),
+          }),
+
+          userService: () => ({
+            retrieve: vi.fn().mockResolvedValue({}),
+          }),
+        },
+      };
+    });
+
+    afterEach(() => {
+      vi.resetAllMocks();
+    });
+
+    describe('load', () => {
+      beforeEach(() => {
+        const wrapper = shallowMount(ExamAttemptUpdate, { 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(ExamAttemptUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        comp.examAttempt = examAttemptSample;
+        examAttemptServiceStub.update.mockResolvedValue(examAttemptSample);
+
+        // WHEN
+        comp.save();
+        await comp.$nextTick();
+
+        // THEN
+        expect(examAttemptServiceStub.update).toHaveBeenCalledWith(examAttemptSample);
+        expect(comp.isSaving).toEqual(false);
+      });
+
+      it('Should call create service on save for new entity', async () => {
+        // GIVEN
+        const entity = {};
+        examAttemptServiceStub.create.mockResolvedValue(entity);
+        const wrapper = shallowMount(ExamAttemptUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        comp.examAttempt = entity;
+
+        // WHEN
+        comp.save();
+        await comp.$nextTick();
+
+        // THEN
+        expect(examAttemptServiceStub.create).toHaveBeenCalledWith(entity);
+        expect(comp.isSaving).toEqual(false);
+      });
+    });
+
+    describe('Before route enter', () => {
+      it('Should retrieve data', async () => {
+        // GIVEN
+        examAttemptServiceStub.find.mockResolvedValue(examAttemptSample);
+        examAttemptServiceStub.retrieve.mockResolvedValue([examAttemptSample]);
+
+        // WHEN
+        route = {
+          params: {
+            examAttemptId: `${examAttemptSample.id}`,
+          },
+        };
+        const wrapper = shallowMount(ExamAttemptUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        await comp.$nextTick();
+
+        // THEN
+        expect(comp.examAttempt).toMatchObject(examAttemptSample);
+      });
+    });
+
+    describe('Previous state', () => {
+      it('Should go previous state', async () => {
+        examAttemptServiceStub.find.mockResolvedValue(examAttemptSample);
+        const wrapper = shallowMount(ExamAttemptUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        await comp.$nextTick();
+
+        comp.previousState();
+        await comp.$nextTick();
+
+        expect(routerGoMock).toHaveBeenCalledWith(-1);
+      });
+    });
+  });
+});

src/main/webapp/app/entities/exam-attempt/exam-attempt-update.component.ts

@@ -0,0 +1,140 @@
+import { type Ref, computed, defineComponent, inject, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { useVuelidate } from '@vuelidate/core';
+
+import SubjectService from '@/entities/subject/subject.service';
+import UserService from '@/entities/user/user.service';
+import { useAlertService } from '@/shared/alert/alert.service';
+import { useDateFormat, useValidation } from '@/shared/composables';
+import { AttemptStatus } from '@/shared/model/enumerations/attempt-status.model';
+import { ExamAttempt, type IExamAttempt } from '@/shared/model/exam-attempt.model';
+import { type ISubject } from '@/shared/model/subject.model';
+
+import ExamAttemptService from './exam-attempt.service';
+
+export default defineComponent({
+  name: 'ExamAttemptUpdate',
+  setup() {
+    const examAttemptService = inject('examAttemptService', () => new ExamAttemptService());
+    const alertService = inject('alertService', () => useAlertService(), true);
+
+    const examAttempt: Ref<IExamAttempt> = ref(new ExamAttempt());
+
+    const subjectService = inject('subjectService', () => new SubjectService());
+
+    const subjects: Ref<ISubject[]> = ref([]);
+    const userService = inject('userService', () => new UserService());
+    const users: Ref<Array<any>> = ref([]);
+    const attemptStatusValues: Ref<string[]> = ref(Object.keys(AttemptStatus));
+    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 retrieveExamAttempt = async examAttemptId => {
+      try {
+        const res = await examAttemptService().find(examAttemptId);
+        res.startedAt = new Date(res.startedAt);
+        res.submittedAt = new Date(res.submittedAt);
+        examAttempt.value = res;
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      }
+    };
+
+    if (route.params?.examAttemptId) {
+      retrieveExamAttempt(route.params.examAttemptId);
+    }
+
+    const initRelationships = () => {
+      subjectService()
+        .retrieve()
+        .then(res => {
+          subjects.value = res.data;
+        });
+      userService()
+        .retrieve()
+        .then(res => {
+          users.value = res.data;
+        });
+    };
+
+    initRelationships();
+
+    const { t: t$ } = useI18n();
+    const validations = useValidation();
+    const validationRules = {
+      startedAt: {
+        required: validations.required(t$('entity.validation.required').toString()),
+      },
+      submittedAt: {},
+      status: {
+        required: validations.required(t$('entity.validation.required').toString()),
+      },
+      score: {
+        integer: validations.integer(t$('entity.validation.number').toString()),
+        min: validations.minValue(t$('entity.validation.min', { min: 0 }).toString(), 0),
+      },
+      answers: {},
+      subject: {
+        required: validations.required(t$('entity.validation.required').toString()),
+      },
+      user: {
+        required: validations.required(t$('entity.validation.required').toString()),
+      },
+    };
+    const v$ = useVuelidate(validationRules, examAttempt as any);
+    v$.value.$validate();
+
+    return {
+      examAttemptService,
+      alertService,
+      examAttempt,
+      previousState,
+      attemptStatusValues,
+      isSaving,
+      currentLanguage,
+      subjects,
+      users,
+      v$,
+      ...useDateFormat({ entityRef: examAttempt }),
+      t$,
+    };
+  },
+  created(): void {},
+  methods: {
+    save(): void {
+      this.isSaving = true;
+      if (this.examAttempt.id) {
+        this.examAttemptService()
+          .update(this.examAttempt)
+          .then(param => {
+            this.isSaving = false;
+            this.previousState();
+            this.alertService.showInfo(this.t$('questionBankApp.examAttempt.updated', { param: param.id }));
+          })
+          .catch(error => {
+            this.isSaving = false;
+            this.alertService.showHttpError(error.response);
+          });
+      } else {
+        this.examAttemptService()
+          .create(this.examAttempt)
+          .then(param => {
+            this.isSaving = false;
+            this.previousState();
+            this.alertService.showSuccess(this.t$('questionBankApp.examAttempt.created', { param: param.id }).toString());
+          })
+          .catch(error => {
+            this.isSaving = false;
+            this.alertService.showHttpError(error.response);
+          });
+      }
+    },
+  },
+});

src/main/webapp/app/entities/exam-attempt/exam-attempt-update.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="d-flex justify-content-center">
+    <div class="col-8">
+      <form name="editForm" novalidate @submit.prevent="save()">
+        <h2 id="questionBankApp.examAttempt.home.createOrEditLabel" data-cy="ExamAttemptCreateUpdateHeading">
+          {{ t$('questionBankApp.examAttempt.home.createOrEditLabel') }}
+        </h2>
+        <div>
+          <div class="mb-3" v-if="examAttempt.id">
+            <label for="id">{{ t$('global.field.id') }}</label>
+            <input type="text" class="form-control" id="id" name="id" v-model="examAttempt.id" readonly />
+          </div>
+          <div class="mb-3">
+            <label class="form-control-label" for="exam-attempt-startedAt">{{ t$('questionBankApp.examAttempt.startedAt') }}</label>
+            <div class="d-flex">
+              <input
+                id="exam-attempt-startedAt"
+                data-cy="startedAt"
+                type="datetime-local"
+                class="form-control"
+                name="startedAt"
+                :class="{ valid: !v$.startedAt.$invalid, invalid: v$.startedAt.$invalid }"
+                required
+                :value="convertDateTimeFromServer(v$.startedAt.$model)"
+                @change="updateInstantField('startedAt', $event)"
+              />
+            </div>
+            <div v-if="v$.startedAt.$anyDirty && v$.startedAt.$invalid">
+              <small class="form-text text-danger" v-for="error of v$.startedAt.$errors" :key="error.$uid">{{ error.$message }}</small>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-control-label" for="exam-attempt-submittedAt">{{ t$('questionBankApp.examAttempt.submittedAt') }}</label>
+            <div class="d-flex">
+              <input
+                id="exam-attempt-submittedAt"
+                data-cy="submittedAt"
+                type="datetime-local"
+                class="form-control"
+                name="submittedAt"
+                :class="{ valid: !v$.submittedAt.$invalid, invalid: v$.submittedAt.$invalid }"
+                :value="convertDateTimeFromServer(v$.submittedAt.$model)"
+                @change="updateInstantField('submittedAt', $event)"
+              />
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-control-label" for="exam-attempt-status">{{ t$('questionBankApp.examAttempt.status') }}</label>
+            <select
+              class="form-control"
+              name="status"
+              :class="{ valid: !v$.status.$invalid, invalid: v$.status.$invalid }"
+              v-model="v$.status.$model"
+              id="exam-attempt-status"
+              data-cy="status"
+              required
+            >
+              <option
+                v-for="attemptStatus in attemptStatusValues"
+                :key="attemptStatus"
+                :value="attemptStatus"
+                :label="t$('questionBankApp.AttemptStatus.' + attemptStatus)"
+              >
+                {{ attemptStatus }}
+              </option>
+            </select>
+            <div v-if="v$.status.$anyDirty && v$.status.$invalid">
+              <small class="form-text text-danger" v-for="error of v$.status.$errors" :key="error.$uid">{{ error.$message }}</small>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-control-label" for="exam-attempt-score">{{ t$('questionBankApp.examAttempt.score') }}</label>
+            <input
+              type="number"
+              class="form-control"
+              name="score"
+              id="exam-attempt-score"
+              data-cy="score"
+              :class="{ valid: !v$.score.$invalid, invalid: v$.score.$invalid }"
+              v-model.number="v$.score.$model"
+            />
+            <div v-if="v$.score.$anyDirty && v$.score.$invalid">
+              <small class="form-text text-danger" v-for="error of v$.score.$errors" :key="error.$uid">{{ error.$message }}</small>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-control-label" for="exam-attempt">{{ t$('questionBankApp.examAttempt.subject') }}</label>
+            <select class="form-control" id="exam-attempt-subject" data-cy="subject" name="subject" v-model="examAttempt.subject" required>
+              <option v-if="!examAttempt.subject" :value="null" selected></option>
+              <option
+                :value="examAttempt.subject && subjectOption.id === examAttempt.subject.id ? examAttempt.subject : subjectOption"
+                v-for="subjectOption in subjects"
+                :key="subjectOption.id"
+              >
+                {{ subjectOption.name }}
+              </option>
+            </select>
+          </div>
+          <div v-if="v$.subject.$anyDirty && v$.subject.$invalid">
+            <small class="form-text text-danger" v-for="error of v$.subject.$errors" :key="error.$uid">{{ error.$message }}</small>
+          </div>
+          <div class="mb-3">
+            <label class="form-control-label" for="exam-attempt">{{ t$('questionBankApp.examAttempt.user') }}</label>
+            <select class="form-control" id="exam-attempt-user" data-cy="user" name="user" v-model="examAttempt.user" required>
+              <option v-if="!examAttempt.user" :value="null" selected></option>
+              <option
+                :value="examAttempt.user && userOption.id === examAttempt.user.id ? examAttempt.user : userOption"
+                v-for="userOption in users"
+                :key="userOption.id"
+              >
+                {{ userOption.login }}
+              </option>
+            </select>
+          </div>
+          <div v-if="v$.user.$anyDirty && v$.user.$invalid">
+            <small class="form-text text-danger" v-for="error of v$.user.$errors" :key="error.$uid">{{ error.$message }}</small>
+          </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>{{ t$('entity.action.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>{{ t$('entity.action.save') }}</span>
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+<script lang="ts" src="./exam-attempt-update.component.ts"></script>

src/main/webapp/app/entities/exam-attempt/exam-attempt.component.spec.ts

@@ -0,0 +1,167 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { type MountingOptions, shallowMount } from '@vue/test-utils';
+
+import AlertService from '@/shared/alert/alert.service';
+
+import ExamAttempt from './exam-attempt.vue';
+
+type ExamAttemptComponentType = InstanceType<typeof ExamAttempt>;
+
+const bModalStub = {
+  render: () => {},
+  methods: {
+    hide: () => {},
+    show: () => {},
+  },
+};
+
+describe('Component Tests', () => {
+  let alertService: AlertService;
+
+  describe('ExamAttempt Management Component', () => {
+    let examAttemptServiceStub: any;
+    let mountOptions: MountingOptions<ExamAttemptComponentType>['global'];
+
+    beforeEach(() => {
+      examAttemptServiceStub = {
+        retrieve: vi.fn(),
+        delete: vi.fn(),
+      };
+      examAttemptServiceStub.retrieve.mockResolvedValue({ headers: {} });
+
+      alertService = new AlertService({
+        i18n: { t: vi.fn() } as any,
+        toast: {
+          create: vi.fn(),
+        } as any,
+      });
+
+      mountOptions = {
+        stubs: {
+          jhiItemCount: true,
+          bPagination: true,
+          bModal: bModalStub as any,
+          'font-awesome-icon': true,
+          'b-badge': true,
+          'jhi-sort-indicator': true,
+          'b-button': true,
+          'router-link': true,
+        },
+        directives: {
+          'b-modal': {},
+        },
+        provide: {
+          alertService,
+          examAttemptService: () => examAttemptServiceStub,
+        },
+      };
+    });
+
+    describe('Mount', () => {
+      it('Should call load all on init', async () => {
+        // GIVEN
+        examAttemptServiceStub.retrieve.mockResolvedValue({ headers: {}, data: [{ id: 123 }] });
+
+        // WHEN
+        const wrapper = shallowMount(ExamAttempt, { global: mountOptions });
+        const comp = wrapper.vm;
+        await comp.$nextTick();
+
+        // THEN
+        expect(examAttemptServiceStub.retrieve).toHaveBeenCalledOnce();
+        expect(comp.examAttempts[0]).toEqual(expect.objectContaining({ id: 123 }));
+      });
+
+      it('should calculate the sort attribute for an id', async () => {
+        // WHEN
+        const wrapper = shallowMount(ExamAttempt, { global: mountOptions });
+        const comp = wrapper.vm;
+        await comp.$nextTick();
+
+        // THEN
+        expect(examAttemptServiceStub.retrieve.mock.lastCall?.[0]).toMatchObject({
+          sort: ['id,asc'],
+        });
+      });
+    });
+    describe('Handles', () => {
+      let comp: ExamAttemptComponentType;
+
+      beforeEach(async () => {
+        const wrapper = shallowMount(ExamAttempt, { global: mountOptions });
+        comp = wrapper.vm;
+        await comp.$nextTick();
+        examAttemptServiceStub.retrieve.mockReset();
+        examAttemptServiceStub.retrieve.mockResolvedValue({ headers: {}, data: [] });
+      });
+
+      it('should load a page', async () => {
+        // GIVEN
+        examAttemptServiceStub.retrieve.mockResolvedValue({ headers: {}, data: [{ id: 123 }] });
+
+        // WHEN
+        comp.page = 2;
+        await comp.$nextTick();
+
+        // THEN
+        expect(examAttemptServiceStub.retrieve).toHaveBeenCalled();
+        expect(comp.examAttempts[0]).toEqual(expect.objectContaining({ id: 123 }));
+      });
+
+      it('should not load a page if the page is the same as the previous page', () => {
+        // WHEN
+        comp.page = 1;
+
+        // THEN
+        expect(examAttemptServiceStub.retrieve).not.toHaveBeenCalled();
+      });
+
+      it('should re-initialize the page', async () => {
+        // GIVEN
+        comp.page = 2;
+        await comp.$nextTick();
+        examAttemptServiceStub.retrieve.mockReset();
+        examAttemptServiceStub.retrieve.mockResolvedValue({ headers: {}, data: [{ id: 123 }] });
+
+        // WHEN
+        comp.clear();
+        await comp.$nextTick();
+
+        // THEN
+        expect(comp.page).toEqual(1);
+        expect(examAttemptServiceStub.retrieve).toHaveBeenCalledTimes(1);
+        expect(comp.examAttempts[0]).toEqual(expect.objectContaining({ id: 123 }));
+      });
+
+      it('should calculate the sort attribute for a non-id attribute', async () => {
+        // WHEN
+        comp.propOrder = 'name';
+        await comp.$nextTick();
+
+        // THEN
+        expect(examAttemptServiceStub.retrieve.mock.lastCall?.[0]).toMatchObject({
+          sort: ['name,asc', 'id'],
+        });
+      });
+
+      it('Should call delete service on confirmDelete', async () => {
+        // GIVEN
+        examAttemptServiceStub.delete.mockResolvedValue({});
+
+        // WHEN
+        comp.prepareRemove({ id: 123 });
+
+        comp.removeExamAttempt();
+        await comp.$nextTick(); // clear components
+
+        // THEN
+        expect(examAttemptServiceStub.delete).toHaveBeenCalled();
+
+        // THEN
+        await comp.$nextTick(); // handle component clear watch
+        expect(examAttemptServiceStub.retrieve).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+});

src/main/webapp/app/entities/exam-attempt/exam-attempt.component.ts

@@ -0,0 +1,137 @@
+import { type Ref, defineComponent, inject, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { useAlertService } from '@/shared/alert/alert.service';
+import { useDateFormat } from '@/shared/composables';
+import { type IExamAttempt } from '@/shared/model/exam-attempt.model';
+
+import ExamAttemptService from './exam-attempt.service';
+
+export default defineComponent({
+  name: 'ExamAttempt',
+  setup() {
+    const { t: t$ } = useI18n();
+    const dateFormat = useDateFormat();
+    const examAttemptService = inject('examAttemptService', () => new ExamAttemptService());
+    const alertService = inject('alertService', () => useAlertService(), true);
+
+    const itemsPerPage = ref(20);
+    const queryCount: Ref<number> = ref(null);
+    const page: Ref<number> = ref(1);
+    const propOrder = ref('id');
+    const reverse = ref(false);
+    const totalItems = ref(0);
+
+    const examAttempts: Ref<IExamAttempt[]> = ref([]);
+
+    const isFetching = ref(false);
+
+    const clear = () => {
+      page.value = 1;
+    };
+
+    const sort = (): Array<any> => {
+      const result = [`${propOrder.value},${reverse.value ? 'desc' : 'asc'}`];
+      if (propOrder.value !== 'id') {
+        result.push('id');
+      }
+      return result;
+    };
+
+    const retrieveExamAttempts = async () => {
+      isFetching.value = true;
+      try {
+        const paginationQuery = {
+          page: page.value - 1,
+          size: itemsPerPage.value,
+          sort: sort(),
+        };
+        const res = await examAttemptService().retrieve(paginationQuery);
+        totalItems.value = Number(res.headers['x-total-count']);
+        queryCount.value = totalItems.value;
+        examAttempts.value = res.data;
+      } catch (err) {
+        alertService.showHttpError(err.response);
+      } finally {
+        isFetching.value = false;
+      }
+    };
+
+    const handleSyncList = () => {
+      retrieveExamAttempts();
+    };
+
+    onMounted(async () => {
+      await retrieveExamAttempts();
+    });
+
+    const removeId: Ref<number> = ref(null);
+    const removeEntity = ref<any>(null);
+    const prepareRemove = (instance: IExamAttempt) => {
+      removeId.value = instance.id;
+      removeEntity.value.show();
+    };
+    const closeDialog = () => {
+      removeEntity.value.hide();
+    };
+    const removeExamAttempt = async () => {
+      try {
+        await examAttemptService().delete(removeId.value);
+        const message = t$('questionBankApp.examAttempt.deleted', { param: removeId.value }).toString();
+        alertService.showInfo(message, { variant: 'danger' });
+        removeId.value = null;
+        retrieveExamAttempts();
+        closeDialog();
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      }
+    };
+
+    const changeOrder = (newOrder: string) => {
+      if (propOrder.value === newOrder) {
+        reverse.value = !reverse.value;
+      } else {
+        reverse.value = false;
+      }
+      propOrder.value = newOrder;
+    };
+
+    // Whenever order changes, reset the pagination
+    watch([propOrder, reverse], async () => {
+      if (page.value === 1) {
+        // first page, retrieve new data
+        await retrieveExamAttempts();
+      } else {
+        // reset the pagination
+        clear();
+      }
+    });
+
+    // Whenever page changes, switch to the new page.
+    watch(page, async () => {
+      await retrieveExamAttempts();
+    });
+
+    return {
+      examAttempts,
+      handleSyncList,
+      isFetching,
+      retrieveExamAttempts,
+      clear,
+      ...dateFormat,
+      removeId,
+      removeEntity,
+      prepareRemove,
+      closeDialog,
+      removeExamAttempt,
+      itemsPerPage,
+      queryCount,
+      page,
+      propOrder,
+      reverse,
+      totalItems,
+      changeOrder,
+      t$,
+    };
+  },
+});

src/main/webapp/app/entities/exam-attempt/exam-attempt.service.spec.ts

@@ -0,0 +1,186 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import axios from 'axios';
+import dayjs from 'dayjs';
+
+import { DATE_TIME_FORMAT } from '@/shared/composables/date-format';
+import { ExamAttempt } from '@/shared/model/exam-attempt.model';
+
+import ExamAttemptService from './exam-attempt.service';
+
+const error = {
+  response: {
+    status: null,
+    data: {
+      type: null,
+    },
+  },
+};
+
+const axiosStub = {
+  get: vi.spyOn(axios, 'get'),
+  post: vi.spyOn(axios, 'post'),
+  put: vi.spyOn(axios, 'put'),
+  patch: vi.spyOn(axios, 'patch'),
+  delete: vi.spyOn(axios, 'delete'),
+};
+
+describe('Service Tests', () => {
+  describe('ExamAttempt Service', () => {
+    let service: ExamAttemptService;
+    let elemDefault;
+    let currentDate: Date;
+
+    beforeEach(() => {
+      service = new ExamAttemptService();
+      currentDate = new Date();
+      elemDefault = new ExamAttempt(123, currentDate, currentDate, 'IN_PROGRESS', 0);
+    });
+
+    describe('Service methods', () => {
+      it('should find an element', async () => {
+        const returnedFromService = {
+          startedAt: dayjs(currentDate).format(DATE_TIME_FORMAT),
+          submittedAt: dayjs(currentDate).format(DATE_TIME_FORMAT),
+          ...elemDefault,
+        };
+        axiosStub.get.mockResolvedValue({ data: returnedFromService });
+
+        return service.find(123).then(res => {
+          expect(res).toMatchObject(elemDefault);
+        });
+      });
+
+      it('should not find an element', async () => {
+        axiosStub.get.mockRejectedValue(error);
+        return service
+          .find(123)
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should create a ExamAttempt', async () => {
+        const returnedFromService = {
+          id: 123,
+          startedAt: dayjs(currentDate).format(DATE_TIME_FORMAT),
+          submittedAt: dayjs(currentDate).format(DATE_TIME_FORMAT),
+          ...elemDefault,
+        };
+        const expected = { startedAt: currentDate, submittedAt: currentDate, ...returnedFromService };
+
+        axiosStub.post.mockResolvedValue({ data: returnedFromService });
+        return service.create({}).then(res => {
+          expect(res).toMatchObject(expected);
+        });
+      });
+
+      it('should not create a ExamAttempt', async () => {
+        axiosStub.post.mockRejectedValue(error);
+
+        return service
+          .create({})
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should update a ExamAttempt', async () => {
+        const returnedFromService = {
+          startedAt: dayjs(currentDate).format(DATE_TIME_FORMAT),
+          submittedAt: dayjs(currentDate).format(DATE_TIME_FORMAT),
+          status: 'BBBBBB',
+          score: 1,
+          ...elemDefault,
+        };
+
+        const expected = { startedAt: currentDate, submittedAt: currentDate, ...returnedFromService };
+        axiosStub.put.mockResolvedValue({ data: returnedFromService });
+
+        return service.update(expected).then(res => {
+          expect(res).toMatchObject(expected);
+        });
+      });
+
+      it('should not update a ExamAttempt', async () => {
+        axiosStub.put.mockRejectedValue(error);
+
+        return service
+          .update({})
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should partial update a ExamAttempt', async () => {
+        const patchObject = { status: 'BBBBBB', score: 1, ...new ExamAttempt() };
+        const returnedFromService = Object.assign(patchObject, elemDefault);
+
+        const expected = { startedAt: currentDate, submittedAt: currentDate, ...returnedFromService };
+        axiosStub.patch.mockResolvedValue({ data: returnedFromService });
+
+        return service.partialUpdate(patchObject).then(res => {
+          expect(res).toMatchObject(expected);
+        });
+      });
+
+      it('should not partial update a ExamAttempt', async () => {
+        axiosStub.patch.mockRejectedValue(error);
+
+        return service
+          .partialUpdate({})
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should return a list of ExamAttempt', async () => {
+        const returnedFromService = {
+          startedAt: dayjs(currentDate).format(DATE_TIME_FORMAT),
+          submittedAt: dayjs(currentDate).format(DATE_TIME_FORMAT),
+          status: 'BBBBBB',
+          score: 1,
+          ...elemDefault,
+        };
+        const expected = { startedAt: currentDate, submittedAt: currentDate, ...returnedFromService };
+        axiosStub.get.mockResolvedValue([returnedFromService]);
+        return service.retrieve({ sort: {}, page: 0, size: 10 }).then(res => {
+          expect(res).toContainEqual(expected);
+        });
+      });
+
+      it('should not return a list of ExamAttempt', async () => {
+        axiosStub.get.mockRejectedValue(error);
+
+        return service
+          .retrieve()
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should delete a ExamAttempt', async () => {
+        axiosStub.delete.mockResolvedValue({ ok: true });
+        return service.delete(123).then(res => {
+          expect(res.ok).toBeTruthy();
+        });
+      });
+
+      it('should not delete a ExamAttempt', async () => {
+        axiosStub.delete.mockRejectedValue(error);
+
+        return service
+          .delete(123)
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+    });
+  });
+});

src/main/webapp/app/entities/exam-attempt/exam-attempt.service.ts

@@ -0,0 +1,86 @@
+import axios from 'axios';
+
+import { type IExamAttempt } from '@/shared/model/exam-attempt.model';
+import buildPaginationQueryOpts from '@/shared/sort/sorts';
+
+const baseApiUrl = 'api/exam-attempts';
+
+export default class ExamAttemptService {
+  find(id: number): Promise<IExamAttempt> {
+    return new Promise<IExamAttempt>((resolve, reject) => {
+      axios
+        .get(`${baseApiUrl}/${id}`)
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  retrieve(paginationQuery?: any): Promise<any> {
+    return new Promise<any>((resolve, reject) => {
+      axios
+        .get(`${baseApiUrl}?${buildPaginationQueryOpts(paginationQuery)}`)
+        .then(res => {
+          resolve(res);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  delete(id: number): Promise<any> {
+    return new Promise<any>((resolve, reject) => {
+      axios
+        .delete(`${baseApiUrl}/${id}`)
+        .then(res => {
+          resolve(res);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  create(entity: IExamAttempt): Promise<IExamAttempt> {
+    return new Promise<IExamAttempt>((resolve, reject) => {
+      axios
+        .post(baseApiUrl, entity)
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  update(entity: IExamAttempt): Promise<IExamAttempt> {
+    return new Promise<IExamAttempt>((resolve, reject) => {
+      axios
+        .put(`${baseApiUrl}/${entity.id}`, entity)
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  partialUpdate(entity: IExamAttempt): Promise<IExamAttempt> {
+    return new Promise<IExamAttempt>((resolve, reject) => {
+      axios
+        .patch(`${baseApiUrl}/${entity.id}`, entity)
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+}

src/main/webapp/app/entities/exam-attempt/exam-attempt.vue

@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <h2 id="page-heading" data-cy="ExamAttemptHeading">
+      <span id="exam-attempt">{{ t$('questionBankApp.examAttempt.home.title') }}</span>
+      <div class="d-flex justify-content-end">
+        <button class="btn btn-info me-2" @click="handleSyncList" :disabled="isFetching">
+          <font-awesome-icon icon="sync" :spin="isFetching"></font-awesome-icon>
+          <span>{{ t$('questionBankApp.examAttempt.home.refreshListLabel') }}</span>
+        </button>
+        <router-link :to="{ name: 'ExamAttemptCreate' }" custom v-slot="{ navigate }">
+          <button
+            @click="navigate"
+            id="jh-create-entity"
+            data-cy="entityCreateButton"
+            class="btn btn-primary jh-create-entity create-exam-attempt"
+          >
+            <font-awesome-icon icon="plus"></font-awesome-icon>
+            <span>{{ t$('questionBankApp.examAttempt.home.createLabel') }}</span>
+          </button>
+        </router-link>
+      </div>
+    </h2>
+    <br />
+    <div class="alert alert-warning" v-if="!isFetching && examAttempts?.length === 0">
+      <span>{{ t$('questionBankApp.examAttempt.home.notFound') }}</span>
+    </div>
+    <div class="table-responsive" v-if="examAttempts?.length > 0">
+      <table class="table table-striped" aria-describedby="examAttempts">
+        <thead>
+          <tr>
+            <th scope="col" @click="changeOrder('id')">
+              <span>{{ t$('global.field.id') }}</span>
+              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'id'"></jhi-sort-indicator>
+            </th>
+            <th scope="col" @click="changeOrder('startedAt')">
+              <span>{{ t$('questionBankApp.examAttempt.startedAt') }}</span>
+              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'startedAt'"></jhi-sort-indicator>
+            </th>
+            <th scope="col" @click="changeOrder('submittedAt')">
+              <span>{{ t$('questionBankApp.examAttempt.submittedAt') }}</span>
+              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'submittedAt'"></jhi-sort-indicator>
+            </th>
+            <th scope="col" @click="changeOrder('status')">
+              <span>{{ t$('questionBankApp.examAttempt.status') }}</span>
+              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'status'"></jhi-sort-indicator>
+            </th>
+            <th scope="col" @click="changeOrder('score')">
+              <span>{{ t$('questionBankApp.examAttempt.score') }}</span>
+              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'score'"></jhi-sort-indicator>
+            </th>
+            <th scope="col" @click="changeOrder('subject.name')">
+              <span>{{ t$('questionBankApp.examAttempt.subject') }}</span>
+              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'subject.name'"></jhi-sort-indicator>
+            </th>
+            <th scope="col" @click="changeOrder('user.login')">
+              <span>{{ t$('questionBankApp.examAttempt.user') }}</span>
+              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'user.login'"></jhi-sort-indicator>
+            </th>
+            <th scope="col"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="examAttempt in examAttempts" :key="examAttempt.id" data-cy="entityTable">
+            <td>
+              <router-link :to="{ name: 'ExamAttemptView', params: { examAttemptId: examAttempt.id } }">{{ examAttempt.id }}</router-link>
+            </td>
+            <td>{{ formatDateShort(examAttempt.startedAt) || '' }}</td>
+            <td>{{ formatDateShort(examAttempt.submittedAt) || '' }}</td>
+            <td>{{ t$('questionBankApp.AttemptStatus.' + examAttempt.status) }}</td>
+            <td>{{ examAttempt.score }}</td>
+            <td>
+              <div v-if="examAttempt.subject">
+                <router-link :to="{ name: 'SubjectView', params: { subjectId: examAttempt.subject.id } }">{{
+                  examAttempt.subject.name
+                }}</router-link>
+              </div>
+            </td>
+            <td>
+              {{ examAttempt.user ? examAttempt.user.login : '' }}
+            </td>
+            <td class="text-end">
+              <div class="btn-group">
+                <router-link :to="{ name: 'ExamAttemptView', params: { examAttemptId: examAttempt.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">{{ t$('entity.action.view') }}</span>
+                  </button>
+                </router-link>
+                <router-link :to="{ name: 'ExamAttemptEdit', params: { examAttemptId: examAttempt.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">{{ t$('entity.action.edit') }}</span>
+                  </button>
+                </router-link>
+                <b-button @click="prepareRemove(examAttempt)" variant="danger" class="btn btn-sm" data-cy="entityDeleteButton">
+                  <font-awesome-icon icon="times"></font-awesome-icon>
+                  <span class="d-none d-md-inline">{{ t$('entity.action.delete') }}</span>
+                </b-button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <b-modal ref="removeEntity" id="removeEntity">
+      <template #title>
+        <span id="questionBankApp.examAttempt.delete.question" data-cy="examAttemptDeleteDialogHeading">{{
+          t$('entity.delete.title')
+        }}</span>
+      </template>
+      <div class="modal-body">
+        <p id="jhi-delete-examAttempt-heading">{{ t$('questionBankApp.examAttempt.delete.question', { id: removeId }) }}</p>
+      </div>
+      <template #footer>
+        <div>
+          <button type="button" class="btn btn-secondary" @click="closeDialog()">{{ t$('entity.action.cancel') }}</button>
+          <button
+            type="button"
+            class="btn btn-primary"
+            id="jhi-confirm-delete-examAttempt"
+            data-cy="entityConfirmDeleteButton"
+            @click="removeExamAttempt"
+          >
+            {{ t$('entity.action.delete') }}
+          </button>
+        </div>
+      </template>
+    </b-modal>
+    <div v-show="examAttempts?.length > 0">
+      <div class="d-flex justify-content-center">
+        <jhi-item-count :page="page" :total="queryCount" :items-per-page="itemsPerPage"></jhi-item-count>
+      </div>
+      <div class="d-flex justify-content-center">
+        <b-pagination size="md" :total-rows="totalItems" v-model="page" :per-page="itemsPerPage"></b-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./exam-attempt.component.ts"></script>

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

@@ -0,0 +1,91 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { type RouteLocation } from 'vue-router';
+
+import { type MountingOptions, shallowMount } from '@vue/test-utils';
+
+import AlertService from '@/shared/alert/alert.service';
+
+import QuestionDetails from './question-details.vue';
+
+type QuestionDetailsComponentType = InstanceType<typeof QuestionDetails>;
+
+let route: Partial<RouteLocation>;
+const routerGoMock = vi.fn();
+
+vi.mock('vue-router', () => ({
+  useRoute: () => route,
+  useRouter: () => ({ go: routerGoMock }),
+}));
+
+const questionSample = { id: 123 };
+
+describe('Component Tests', () => {
+  let alertService: AlertService;
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  describe('Question Management Detail Component', () => {
+    let questionServiceStub: any;
+    let mountOptions: MountingOptions<QuestionDetailsComponentType>['global'];
+
+    beforeEach(() => {
+      route = {};
+      questionServiceStub = {
+        find: vi.fn(),
+      };
+
+      alertService = new AlertService({
+        i18n: { t: vi.fn() } as any,
+        toast: {
+          create: vi.fn(),
+        } as any,
+      });
+
+      mountOptions = {
+        stubs: {
+          'font-awesome-icon': true,
+          'router-link': true,
+        },
+        provide: {
+          alertService,
+          questionService: () => questionServiceStub,
+        },
+      };
+    });
+
+    describe('Navigate to details', () => {
+      it('Should call load all on init', async () => {
+        // GIVEN
+        questionServiceStub.find.mockResolvedValue(questionSample);
+        route = {
+          params: {
+            questionId: `${123}`,
+          },
+        };
+        const wrapper = shallowMount(QuestionDetails, { global: mountOptions });
+        const comp = wrapper.vm;
+        // WHEN
+        await comp.$nextTick();
+
+        // THEN
+        expect(comp.question).toMatchObject(questionSample);
+      });
+    });
+
+    describe('Previous state', () => {
+      it('Should go previous state', async () => {
+        questionServiceStub.find.mockResolvedValue(questionSample);
+        const wrapper = shallowMount(QuestionDetails, { global: mountOptions });
+        const comp = wrapper.vm;
+        await comp.$nextTick();
+
+        comp.previousState();
+        await comp.$nextTick();
+
+        expect(routerGoMock).toHaveBeenCalledWith(-1);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,42 @@
+import { type Ref, defineComponent, inject, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { useAlertService } from '@/shared/alert/alert.service';
+import { type IQuestion } from '@/shared/model/question.model';
+
+import QuestionService from './question.service';
+
+export default defineComponent({
+  name: 'QuestionDetails',
+  setup() {
+    const questionService = inject('questionService', () => new QuestionService());
+    const alertService = inject('alertService', () => useAlertService(), true);
+
+    const route = useRoute();
+    const router = useRouter();
+
+    const previousState = () => router.go(-1);
+    const question: Ref<IQuestion> = ref({});
+
+    const retrieveQuestion = async questionId => {
+      try {
+        const res = await questionService().find(questionId);
+        question.value = res;
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      }
+    };
+
+    if (route.params?.questionId) {
+      retrieveQuestion(route.params.questionId);
+    }
+
+    return {
+      question,
+
+      previousState,
+      t$: useI18n().t,
+    };
+  },
+});

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

@@ -0,0 +1,51 @@
+<template>
+  <div class="d-flex justify-content-center">
+    <div class="col-8">
+      <div v-if="question">
+        <h2 class="jh-entity-heading" data-cy="questionDetailsHeading">
+          <span>{{ t$('questionBankApp.question.detail.title') }}</span> {{ question.id }}
+        </h2>
+        <dl class="row-md jh-entity-details">
+          <dt>
+            <span>{{ t$('questionBankApp.question.prompt') }}</span>
+          </dt>
+          <dd>
+            <span>{{ question.prompt }}</span>
+          </dd>
+          <dt>
+            <span>{{ t$('questionBankApp.question.explanation') }}</span>
+          </dt>
+          <dd>
+            <span>{{ question.explanation }}</span>
+          </dd>
+          <dt>
+            <span>{{ t$('questionBankApp.question.active') }}</span>
+          </dt>
+          <dd>
+            <span>{{ question.active }}</span>
+          </dd>
+          <dt>
+            <span>{{ t$('questionBankApp.question.subject') }}</span>
+          </dt>
+          <dd>
+            <div v-if="question.subject">
+              <router-link :to="{ name: 'SubjectView', params: { subjectId: question.subject.id } }">{{
+                question.subject.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>{{ t$('entity.action.back') }}</span>
+        </button>
+        <router-link v-if="question.id" :to="{ name: 'QuestionEdit', params: { questionId: question.id } }" custom v-slot="{ navigate }">
+          <button @click="navigate" class="btn btn-primary">
+            <font-awesome-icon icon="pencil-alt"></font-awesome-icon>&nbsp;<span>{{ t$('entity.action.edit') }}</span>
+          </button>
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./question-details.component.ts"></script>

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

@@ -0,0 +1,139 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { type RouteLocation } from 'vue-router';
+
+import { type MountingOptions, shallowMount } from '@vue/test-utils';
+
+import AlertService from '@/shared/alert/alert.service';
+
+import QuestionUpdate from './question-update.vue';
+
+type QuestionUpdateComponentType = InstanceType<typeof QuestionUpdate>;
+
+let route: Partial<RouteLocation>;
+const routerGoMock = vi.fn();
+
+vi.mock('vue-router', () => ({
+  useRoute: () => route,
+  useRouter: () => ({ go: routerGoMock }),
+}));
+
+const questionSample = { id: 123 };
+
+describe('Component Tests', () => {
+  let mountOptions: MountingOptions<QuestionUpdateComponentType>['global'];
+  let alertService: AlertService;
+
+  describe('Question Management Update Component', () => {
+    let comp: QuestionUpdateComponentType;
+    let questionServiceStub: any;
+
+    beforeEach(() => {
+      route = {};
+      questionServiceStub = {
+        retrieve: vi.fn(),
+        find: vi.fn(),
+        update: vi.fn(),
+        create: vi.fn(),
+      };
+      questionServiceStub.retrieve.mockResolvedValueOnce([]);
+
+      alertService = new AlertService({
+        i18n: { t: vi.fn() } as any,
+        toast: {
+          create: vi.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,
+          questionService: () => questionServiceStub,
+          subjectService: () => ({
+            retrieve: vi.fn().mockResolvedValue({}),
+          }),
+        },
+      };
+    });
+
+    afterEach(() => {
+      vi.resetAllMocks();
+    });
+
+    describe('save', () => {
+      it('Should call update service on save for existing entity', async () => {
+        // GIVEN
+        const wrapper = shallowMount(QuestionUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        comp.question = questionSample;
+        questionServiceStub.update.mockResolvedValue(questionSample);
+
+        // WHEN
+        comp.save();
+        await comp.$nextTick();
+
+        // THEN
+        expect(questionServiceStub.update).toHaveBeenCalledWith(questionSample);
+        expect(comp.isSaving).toEqual(false);
+      });
+
+      it('Should call create service on save for new entity', async () => {
+        // GIVEN
+        const entity = {};
+        questionServiceStub.create.mockResolvedValue(entity);
+        const wrapper = shallowMount(QuestionUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        comp.question = entity;
+
+        // WHEN
+        comp.save();
+        await comp.$nextTick();
+
+        // THEN
+        expect(questionServiceStub.create).toHaveBeenCalledWith(entity);
+        expect(comp.isSaving).toEqual(false);
+      });
+    });
+
+    describe('Before route enter', () => {
+      it('Should retrieve data', async () => {
+        // GIVEN
+        questionServiceStub.find.mockResolvedValue(questionSample);
+        questionServiceStub.retrieve.mockResolvedValue([questionSample]);
+
+        // WHEN
+        route = {
+          params: {
+            questionId: `${questionSample.id}`,
+          },
+        };
+        const wrapper = shallowMount(QuestionUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        await comp.$nextTick();
+
+        // THEN
+        expect(comp.question).toMatchObject(questionSample);
+      });
+    });
+
+    describe('Previous state', () => {
+      it('Should go previous state', async () => {
+        questionServiceStub.find.mockResolvedValue(questionSample);
+        const wrapper = shallowMount(QuestionUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        await comp.$nextTick();
+
+        comp.previousState();
+        await comp.$nextTick();
+
+        expect(routerGoMock).toHaveBeenCalledWith(-1);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,122 @@
+import { type Ref, computed, defineComponent, inject, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { useVuelidate } from '@vuelidate/core';
+
+import SubjectService from '@/entities/subject/subject.service';
+import { useAlertService } from '@/shared/alert/alert.service';
+import { useValidation } from '@/shared/composables';
+import { type IQuestion, Question } from '@/shared/model/question.model';
+import { type ISubject } from '@/shared/model/subject.model';
+
+import QuestionService from './question.service';
+
+export default defineComponent({
+  name: 'QuestionUpdate',
+  setup() {
+    const questionService = inject('questionService', () => new QuestionService());
+    const alertService = inject('alertService', () => useAlertService(), true);
+
+    const question: Ref<IQuestion> = ref(new Question());
+
+    const subjectService = inject('subjectService', () => new SubjectService());
+
+    const subjects: Ref<ISubject[]> = 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 retrieveQuestion = async questionId => {
+      try {
+        const res = await questionService().find(questionId);
+        question.value = res;
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      }
+    };
+
+    if (route.params?.questionId) {
+      retrieveQuestion(route.params.questionId);
+    }
+
+    const initRelationships = () => {
+      subjectService()
+        .retrieve()
+        .then(res => {
+          subjects.value = res.data;
+        });
+    };
+
+    initRelationships();
+
+    const { t: t$ } = useI18n();
+    const validations = useValidation();
+    const validationRules = {
+      prompt: {
+        required: validations.required(t$('entity.validation.required').toString()),
+        minLength: validations.minLength(t$('entity.validation.minlength', { min: 5 }).toString(), 5),
+        maxLength: validations.maxLength(t$('entity.validation.maxlength', { max: 2000 }).toString(), 2000),
+      },
+      explanation: {
+        maxLength: validations.maxLength(t$('entity.validation.maxlength', { max: 2000 }).toString(), 2000),
+      },
+      active: {
+        required: validations.required(t$('entity.validation.required').toString()),
+      },
+      choices: {},
+      subject: {
+        required: validations.required(t$('entity.validation.required').toString()),
+      },
+    };
+    const v$ = useVuelidate(validationRules, question as any);
+    v$.value.$validate();
+
+    return {
+      questionService,
+      alertService,
+      question,
+      previousState,
+      isSaving,
+      currentLanguage,
+      subjects,
+      v$,
+      t$,
+    };
+  },
+  created(): void {},
+  methods: {
+    save(): void {
+      this.isSaving = true;
+      if (this.question.id) {
+        this.questionService()
+          .update(this.question)
+          .then(param => {
+            this.isSaving = false;
+            this.previousState();
+            this.alertService.showInfo(this.t$('questionBankApp.question.updated', { param: param.id }));
+          })
+          .catch(error => {
+            this.isSaving = false;
+            this.alertService.showHttpError(error.response);
+          });
+      } else {
+        this.questionService()
+          .create(this.question)
+          .then(param => {
+            this.isSaving = false;
+            this.previousState();
+            this.alertService.showSuccess(this.t$('questionBankApp.question.created', { param: param.id }).toString());
+          })
+          .catch(error => {
+            this.isSaving = false;
+            this.alertService.showHttpError(error.response);
+          });
+      }
+    },
+  },
+});

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

@@ -0,0 +1,95 @@
+<template>
+  <div class="d-flex justify-content-center">
+    <div class="col-8">
+      <form name="editForm" novalidate @submit.prevent="save()">
+        <h2 id="questionBankApp.question.home.createOrEditLabel" data-cy="QuestionCreateUpdateHeading">
+          {{ t$('questionBankApp.question.home.createOrEditLabel') }}
+        </h2>
+        <div>
+          <div class="mb-3" v-if="question.id">
+            <label for="id">{{ t$('global.field.id') }}</label>
+            <input type="text" class="form-control" id="id" name="id" v-model="question.id" readonly />
+          </div>
+          <div class="mb-3">
+            <label class="form-control-label" for="question-prompt">{{ t$('questionBankApp.question.prompt') }}</label>
+            <input
+              type="text"
+              class="form-control"
+              name="prompt"
+              id="question-prompt"
+              data-cy="prompt"
+              :class="{ valid: !v$.prompt.$invalid, invalid: v$.prompt.$invalid }"
+              v-model="v$.prompt.$model"
+              required
+            />
+            <div v-if="v$.prompt.$anyDirty && v$.prompt.$invalid">
+              <small class="form-text text-danger" v-for="error of v$.prompt.$errors" :key="error.$uid">{{ error.$message }}</small>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-control-label" for="question-explanation">{{ t$('questionBankApp.question.explanation') }}</label>
+            <input
+              type="text"
+              class="form-control"
+              name="explanation"
+              id="question-explanation"
+              data-cy="explanation"
+              :class="{ valid: !v$.explanation.$invalid, invalid: v$.explanation.$invalid }"
+              v-model="v$.explanation.$model"
+            />
+            <div v-if="v$.explanation.$anyDirty && v$.explanation.$invalid">
+              <small class="form-text text-danger" v-for="error of v$.explanation.$errors" :key="error.$uid">{{ error.$message }}</small>
+            </div>
+          </div>
+          <div class="mb-3 form-check">
+            <input
+              type="checkbox"
+              class="form-check-input"
+              name="active"
+              id="question-active"
+              data-cy="active"
+              :class="{ valid: !v$.active.$invalid, invalid: v$.active.$invalid }"
+              v-model="v$.active.$model"
+              required
+            />
+            <label class="form-check-label" for="question-active">{{ t$('questionBankApp.question.active') }}</label>
+            <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="mb-3">
+            <label class="form-control-label" for="question">{{ t$('questionBankApp.question.subject') }}</label>
+            <select class="form-control" id="question-subject" data-cy="subject" name="subject" v-model="question.subject" required>
+              <option v-if="!question.subject" :value="null" selected></option>
+              <option
+                :value="question.subject && subjectOption.id === question.subject.id ? question.subject : subjectOption"
+                v-for="subjectOption in subjects"
+                :key="subjectOption.id"
+              >
+                {{ subjectOption.name }}
+              </option>
+            </select>
+          </div>
+          <div v-if="v$.subject.$anyDirty && v$.subject.$invalid">
+            <small class="form-text text-danger" v-for="error of v$.subject.$errors" :key="error.$uid">{{ error.$message }}</small>
+          </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>{{ t$('entity.action.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>{{ t$('entity.action.save') }}</span>
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+<script lang="ts" src="./question-update.component.ts"></script>

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

@@ -0,0 +1,167 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { type MountingOptions, shallowMount } from '@vue/test-utils';
+
+import AlertService from '@/shared/alert/alert.service';
+
+import Question from './question.vue';
+
+type QuestionComponentType = InstanceType<typeof Question>;
+
+const bModalStub = {
+  render: () => {},
+  methods: {
+    hide: () => {},
+    show: () => {},
+  },
+};
+
+describe('Component Tests', () => {
+  let alertService: AlertService;
+
+  describe('Question Management Component', () => {
+    let questionServiceStub: any;
+    let mountOptions: MountingOptions<QuestionComponentType>['global'];
+
+    beforeEach(() => {
+      questionServiceStub = {
+        retrieve: vi.fn(),
+        delete: vi.fn(),
+      };
+      questionServiceStub.retrieve.mockResolvedValue({ headers: {} });
+
+      alertService = new AlertService({
+        i18n: { t: vi.fn() } as any,
+        toast: {
+          create: vi.fn(),
+        } as any,
+      });
+
+      mountOptions = {
+        stubs: {
+          jhiItemCount: true,
+          bPagination: true,
+          bModal: bModalStub as any,
+          'font-awesome-icon': true,
+          'b-badge': true,
+          'jhi-sort-indicator': true,
+          'b-button': true,
+          'router-link': true,
+        },
+        directives: {
+          'b-modal': {},
+        },
+        provide: {
+          alertService,
+          questionService: () => questionServiceStub,
+        },
+      };
+    });
+
+    describe('Mount', () => {
+      it('Should call load all on init', async () => {
+        // GIVEN
+        questionServiceStub.retrieve.mockResolvedValue({ headers: {}, data: [{ id: 123 }] });
+
+        // WHEN
+        const wrapper = shallowMount(Question, { global: mountOptions });
+        const comp = wrapper.vm;
+        await comp.$nextTick();
+
+        // THEN
+        expect(questionServiceStub.retrieve).toHaveBeenCalledOnce();
+        expect(comp.questions[0]).toEqual(expect.objectContaining({ id: 123 }));
+      });
+
+      it('should calculate the sort attribute for an id', async () => {
+        // WHEN
+        const wrapper = shallowMount(Question, { global: mountOptions });
+        const comp = wrapper.vm;
+        await comp.$nextTick();
+
+        // THEN
+        expect(questionServiceStub.retrieve.mock.lastCall?.[0]).toMatchObject({
+          sort: ['id,asc'],
+        });
+      });
+    });
+    describe('Handles', () => {
+      let comp: QuestionComponentType;
+
+      beforeEach(async () => {
+        const wrapper = shallowMount(Question, { global: mountOptions });
+        comp = wrapper.vm;
+        await comp.$nextTick();
+        questionServiceStub.retrieve.mockReset();
+        questionServiceStub.retrieve.mockResolvedValue({ headers: {}, data: [] });
+      });
+
+      it('should load a page', async () => {
+        // GIVEN
+        questionServiceStub.retrieve.mockResolvedValue({ headers: {}, data: [{ id: 123 }] });
+
+        // WHEN
+        comp.page = 2;
+        await comp.$nextTick();
+
+        // THEN
+        expect(questionServiceStub.retrieve).toHaveBeenCalled();
+        expect(comp.questions[0]).toEqual(expect.objectContaining({ id: 123 }));
+      });
+
+      it('should not load a page if the page is the same as the previous page', () => {
+        // WHEN
+        comp.page = 1;
+
+        // THEN
+        expect(questionServiceStub.retrieve).not.toHaveBeenCalled();
+      });
+
+      it('should re-initialize the page', async () => {
+        // GIVEN
+        comp.page = 2;
+        await comp.$nextTick();
+        questionServiceStub.retrieve.mockReset();
+        questionServiceStub.retrieve.mockResolvedValue({ headers: {}, data: [{ id: 123 }] });
+
+        // WHEN
+        comp.clear();
+        await comp.$nextTick();
+
+        // THEN
+        expect(comp.page).toEqual(1);
+        expect(questionServiceStub.retrieve).toHaveBeenCalledTimes(1);
+        expect(comp.questions[0]).toEqual(expect.objectContaining({ id: 123 }));
+      });
+
+      it('should calculate the sort attribute for a non-id attribute', async () => {
+        // WHEN
+        comp.propOrder = 'name';
+        await comp.$nextTick();
+
+        // THEN
+        expect(questionServiceStub.retrieve.mock.lastCall?.[0]).toMatchObject({
+          sort: ['name,asc', 'id'],
+        });
+      });
+
+      it('Should call delete service on confirmDelete', async () => {
+        // GIVEN
+        questionServiceStub.delete.mockResolvedValue({});
+
+        // WHEN
+        comp.prepareRemove({ id: 123 });
+
+        comp.removeQuestion();
+        await comp.$nextTick(); // clear components
+
+        // THEN
+        expect(questionServiceStub.delete).toHaveBeenCalled();
+
+        // THEN
+        await comp.$nextTick(); // handle component clear watch
+        expect(questionServiceStub.retrieve).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,134 @@
+import { type Ref, defineComponent, inject, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { useAlertService } from '@/shared/alert/alert.service';
+import { type IQuestion } from '@/shared/model/question.model';
+
+import QuestionService from './question.service';
+
+export default defineComponent({
+  name: 'Question',
+  setup() {
+    const { t: t$ } = useI18n();
+    const questionService = inject('questionService', () => new QuestionService());
+    const alertService = inject('alertService', () => useAlertService(), true);
+
+    const itemsPerPage = ref(20);
+    const queryCount: Ref<number> = ref(null);
+    const page: Ref<number> = ref(1);
+    const propOrder = ref('id');
+    const reverse = ref(false);
+    const totalItems = ref(0);
+
+    const questions: Ref<IQuestion[]> = ref([]);
+
+    const isFetching = ref(false);
+
+    const clear = () => {
+      page.value = 1;
+    };
+
+    const sort = (): Array<any> => {
+      const result = [`${propOrder.value},${reverse.value ? 'desc' : 'asc'}`];
+      if (propOrder.value !== 'id') {
+        result.push('id');
+      }
+      return result;
+    };
+
+    const retrieveQuestions = async () => {
+      isFetching.value = true;
+      try {
+        const paginationQuery = {
+          page: page.value - 1,
+          size: itemsPerPage.value,
+          sort: sort(),
+        };
+        const res = await questionService().retrieve(paginationQuery);
+        totalItems.value = Number(res.headers['x-total-count']);
+        queryCount.value = totalItems.value;
+        questions.value = res.data;
+      } catch (err) {
+        alertService.showHttpError(err.response);
+      } finally {
+        isFetching.value = false;
+      }
+    };
+
+    const handleSyncList = () => {
+      retrieveQuestions();
+    };
+
+    onMounted(async () => {
+      await retrieveQuestions();
+    });
+
+    const removeId: Ref<number> = ref(null);
+    const removeEntity = ref<any>(null);
+    const prepareRemove = (instance: IQuestion) => {
+      removeId.value = instance.id;
+      removeEntity.value.show();
+    };
+    const closeDialog = () => {
+      removeEntity.value.hide();
+    };
+    const removeQuestion = async () => {
+      try {
+        await questionService().delete(removeId.value);
+        const message = t$('questionBankApp.question.deleted', { param: removeId.value }).toString();
+        alertService.showInfo(message, { variant: 'danger' });
+        removeId.value = null;
+        retrieveQuestions();
+        closeDialog();
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      }
+    };
+
+    const changeOrder = (newOrder: string) => {
+      if (propOrder.value === newOrder) {
+        reverse.value = !reverse.value;
+      } else {
+        reverse.value = false;
+      }
+      propOrder.value = newOrder;
+    };
+
+    // Whenever order changes, reset the pagination
+    watch([propOrder, reverse], async () => {
+      if (page.value === 1) {
+        // first page, retrieve new data
+        await retrieveQuestions();
+      } else {
+        // reset the pagination
+        clear();
+      }
+    });
+
+    // Whenever page changes, switch to the new page.
+    watch(page, async () => {
+      await retrieveQuestions();
+    });
+
+    return {
+      questions,
+      handleSyncList,
+      isFetching,
+      retrieveQuestions,
+      clear,
+      removeId,
+      removeEntity,
+      prepareRemove,
+      closeDialog,
+      removeQuestion,
+      itemsPerPage,
+      queryCount,
+      page,
+      propOrder,
+      reverse,
+      totalItems,
+      changeOrder,
+      t$,
+    };
+  },
+});

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

@@ -0,0 +1,161 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import axios from 'axios';
+
+import { Question } from '@/shared/model/question.model';
+
+import QuestionService from './question.service';
+
+const error = {
+  response: {
+    status: null,
+    data: {
+      type: null,
+    },
+  },
+};
+
+const axiosStub = {
+  get: vi.spyOn(axios, 'get'),
+  post: vi.spyOn(axios, 'post'),
+  put: vi.spyOn(axios, 'put'),
+  patch: vi.spyOn(axios, 'patch'),
+  delete: vi.spyOn(axios, 'delete'),
+};
+
+describe('Service Tests', () => {
+  describe('Question Service', () => {
+    let service: QuestionService;
+    let elemDefault;
+
+    beforeEach(() => {
+      service = new QuestionService();
+      elemDefault = new Question(123, 'AAAAAAA', 'AAAAAAA', false);
+    });
+
+    describe('Service methods', () => {
+      it('should find an element', async () => {
+        const returnedFromService = { ...elemDefault };
+        axiosStub.get.mockResolvedValue({ data: returnedFromService });
+
+        return service.find(123).then(res => {
+          expect(res).toMatchObject(elemDefault);
+        });
+      });
+
+      it('should not find an element', async () => {
+        axiosStub.get.mockRejectedValue(error);
+        return service
+          .find(123)
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should create a Question', async () => {
+        const returnedFromService = { id: 123, ...elemDefault };
+        const expected = { ...returnedFromService };
+
+        axiosStub.post.mockResolvedValue({ data: returnedFromService });
+        return service.create({}).then(res => {
+          expect(res).toMatchObject(expected);
+        });
+      });
+
+      it('should not create a Question', async () => {
+        axiosStub.post.mockRejectedValue(error);
+
+        return service
+          .create({})
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should update a Question', async () => {
+        const returnedFromService = { prompt: 'BBBBBB', explanation: 'BBBBBB', active: true, ...elemDefault };
+
+        const expected = { ...returnedFromService };
+        axiosStub.put.mockResolvedValue({ data: returnedFromService });
+
+        return service.update(expected).then(res => {
+          expect(res).toMatchObject(expected);
+        });
+      });
+
+      it('should not update a Question', async () => {
+        axiosStub.put.mockRejectedValue(error);
+
+        return service
+          .update({})
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should partial update a Question', async () => {
+        const patchObject = { active: true, ...new Question() };
+        const returnedFromService = Object.assign(patchObject, elemDefault);
+
+        const expected = { ...returnedFromService };
+        axiosStub.patch.mockResolvedValue({ data: returnedFromService });
+
+        return service.partialUpdate(patchObject).then(res => {
+          expect(res).toMatchObject(expected);
+        });
+      });
+
+      it('should not partial update a Question', async () => {
+        axiosStub.patch.mockRejectedValue(error);
+
+        return service
+          .partialUpdate({})
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should return a list of Question', async () => {
+        const returnedFromService = { prompt: 'BBBBBB', explanation: 'BBBBBB', active: true, ...elemDefault };
+        const expected = { ...returnedFromService };
+        axiosStub.get.mockResolvedValue([returnedFromService]);
+        return service.retrieve({ sort: {}, page: 0, size: 10 }).then(res => {
+          expect(res).toContainEqual(expected);
+        });
+      });
+
+      it('should not return a list of Question', async () => {
+        axiosStub.get.mockRejectedValue(error);
+
+        return service
+          .retrieve()
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should delete a Question', async () => {
+        axiosStub.delete.mockResolvedValue({ ok: true });
+        return service.delete(123).then(res => {
+          expect(res.ok).toBeTruthy();
+        });
+      });
+
+      it('should not delete a Question', async () => {
+        axiosStub.delete.mockRejectedValue(error);
+
+        return service
+          .delete(123)
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+    });
+  });
+});

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

@@ -0,0 +1,86 @@
+import axios from 'axios';
+
+import { type IQuestion } from '@/shared/model/question.model';
+import buildPaginationQueryOpts from '@/shared/sort/sorts';
+
+const baseApiUrl = 'api/questions';
+
+export default class QuestionService {
+  find(id: number): Promise<IQuestion> {
+    return new Promise<IQuestion>((resolve, reject) => {
+      axios
+        .get(`${baseApiUrl}/${id}`)
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  retrieve(paginationQuery?: any): Promise<any> {
+    return new Promise<any>((resolve, reject) => {
+      axios
+        .get(`${baseApiUrl}?${buildPaginationQueryOpts(paginationQuery)}`)
+        .then(res => {
+          resolve(res);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  delete(id: number): Promise<any> {
+    return new Promise<any>((resolve, reject) => {
+      axios
+        .delete(`${baseApiUrl}/${id}`)
+        .then(res => {
+          resolve(res);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  create(entity: IQuestion): Promise<IQuestion> {
+    return new Promise<IQuestion>((resolve, reject) => {
+      axios
+        .post(baseApiUrl, entity)
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  update(entity: IQuestion): Promise<IQuestion> {
+    return new Promise<IQuestion>((resolve, reject) => {
+      axios
+        .put(`${baseApiUrl}/${entity.id}`, entity)
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  partialUpdate(entity: IQuestion): Promise<IQuestion> {
+    return new Promise<IQuestion>((resolve, reject) => {
+      axios
+        .patch(`${baseApiUrl}/${entity.id}`, entity)
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+}

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

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <h2 id="page-heading" data-cy="QuestionHeading">
+      <span id="question">{{ t$('questionBankApp.question.home.title') }}</span>
+      <div class="d-flex justify-content-end">
+        <button class="btn btn-info me-2" @click="handleSyncList" :disabled="isFetching">
+          <font-awesome-icon icon="sync" :spin="isFetching"></font-awesome-icon>
+          <span>{{ t$('questionBankApp.question.home.refreshListLabel') }}</span>
+        </button>
+        <router-link :to="{ name: 'QuestionCreate' }" custom v-slot="{ navigate }">
+          <button
+            @click="navigate"
+            id="jh-create-entity"
+            data-cy="entityCreateButton"
+            class="btn btn-primary jh-create-entity create-question"
+          >
+            <font-awesome-icon icon="plus"></font-awesome-icon>
+            <span>{{ t$('questionBankApp.question.home.createLabel') }}</span>
+          </button>
+        </router-link>
+      </div>
+    </h2>
+    <br />
+    <div class="alert alert-warning" v-if="!isFetching && questions?.length === 0">
+      <span>{{ t$('questionBankApp.question.home.notFound') }}</span>
+    </div>
+    <div class="table-responsive" v-if="questions?.length > 0">
+      <table class="table table-striped" aria-describedby="questions">
+        <thead>
+          <tr>
+            <th scope="col" @click="changeOrder('id')">
+              <span>{{ t$('global.field.id') }}</span>
+              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'id'"></jhi-sort-indicator>
+            </th>
+            <th scope="col" @click="changeOrder('prompt')">
+              <span>{{ t$('questionBankApp.question.prompt') }}</span>
+              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'prompt'"></jhi-sort-indicator>
+            </th>
+            <th scope="col" @click="changeOrder('explanation')">
+              <span>{{ t$('questionBankApp.question.explanation') }}</span>
+              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'explanation'"></jhi-sort-indicator>
+            </th>
+            <th scope="col" @click="changeOrder('active')">
+              <span>{{ t$('questionBankApp.question.active') }}</span>
+              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'active'"></jhi-sort-indicator>
+            </th>
+            <th scope="col" @click="changeOrder('subject.name')">
+              <span>{{ t$('questionBankApp.question.subject') }}</span>
+              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'subject.name'"></jhi-sort-indicator>
+            </th>
+            <th scope="col"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="question in questions" :key="question.id" data-cy="entityTable">
+            <td>
+              <router-link :to="{ name: 'QuestionView', params: { questionId: question.id } }">{{ question.id }}</router-link>
+            </td>
+            <td>{{ question.prompt }}</td>
+            <td>{{ question.explanation }}</td>
+            <td>{{ question.active }}</td>
+            <td>
+              <div v-if="question.subject">
+                <router-link :to="{ name: 'SubjectView', params: { subjectId: question.subject.id } }">{{
+                  question.subject.name
+                }}</router-link>
+              </div>
+            </td>
+            <td class="text-end">
+              <div class="btn-group">
+                <router-link :to="{ name: 'QuestionView', params: { questionId: question.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">{{ t$('entity.action.view') }}</span>
+                  </button>
+                </router-link>
+                <router-link :to="{ name: 'QuestionEdit', params: { questionId: question.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">{{ t$('entity.action.edit') }}</span>
+                  </button>
+                </router-link>
+                <b-button @click="prepareRemove(question)" variant="danger" class="btn btn-sm" data-cy="entityDeleteButton">
+                  <font-awesome-icon icon="times"></font-awesome-icon>
+                  <span class="d-none d-md-inline">{{ t$('entity.action.delete') }}</span>
+                </b-button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <b-modal ref="removeEntity" id="removeEntity">
+      <template #title>
+        <span id="questionBankApp.question.delete.question" data-cy="questionDeleteDialogHeading">{{ t$('entity.delete.title') }}</span>
+      </template>
+      <div class="modal-body">
+        <p id="jhi-delete-question-heading">{{ t$('questionBankApp.question.delete.question', { id: removeId }) }}</p>
+      </div>
+      <template #footer>
+        <div>
+          <button type="button" class="btn btn-secondary" @click="closeDialog()">{{ t$('entity.action.cancel') }}</button>
+          <button
+            type="button"
+            class="btn btn-primary"
+            id="jhi-confirm-delete-question"
+            data-cy="entityConfirmDeleteButton"
+            @click="removeQuestion"
+          >
+            {{ t$('entity.action.delete') }}
+          </button>
+        </div>
+      </template>
+    </b-modal>
+    <div v-show="questions?.length > 0">
+      <div class="d-flex justify-content-center">
+        <jhi-item-count :page="page" :total="queryCount" :items-per-page="itemsPerPage"></jhi-item-count>
+      </div>
+      <div class="d-flex justify-content-center">
+        <b-pagination size="md" :total-rows="totalItems" v-model="page" :per-page="itemsPerPage"></b-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./question.component.ts"></script>

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

@@ -0,0 +1,91 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { type RouteLocation } from 'vue-router';
+
+import { type MountingOptions, shallowMount } from '@vue/test-utils';
+
+import AlertService from '@/shared/alert/alert.service';
+
+import SubjectDetails from './subject-details.vue';
+
+type SubjectDetailsComponentType = InstanceType<typeof SubjectDetails>;
+
+let route: Partial<RouteLocation>;
+const routerGoMock = vi.fn();
+
+vi.mock('vue-router', () => ({
+  useRoute: () => route,
+  useRouter: () => ({ go: routerGoMock }),
+}));
+
+const subjectSample = { id: 123 };
+
+describe('Component Tests', () => {
+  let alertService: AlertService;
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  describe('Subject Management Detail Component', () => {
+    let subjectServiceStub: any;
+    let mountOptions: MountingOptions<SubjectDetailsComponentType>['global'];
+
+    beforeEach(() => {
+      route = {};
+      subjectServiceStub = {
+        find: vi.fn(),
+      };
+
+      alertService = new AlertService({
+        i18n: { t: vi.fn() } as any,
+        toast: {
+          create: vi.fn(),
+        } as any,
+      });
+
+      mountOptions = {
+        stubs: {
+          'font-awesome-icon': true,
+          'router-link': true,
+        },
+        provide: {
+          alertService,
+          subjectService: () => subjectServiceStub,
+        },
+      };
+    });
+
+    describe('Navigate to details', () => {
+      it('Should call load all on init', async () => {
+        // GIVEN
+        subjectServiceStub.find.mockResolvedValue(subjectSample);
+        route = {
+          params: {
+            subjectId: `${123}`,
+          },
+        };
+        const wrapper = shallowMount(SubjectDetails, { global: mountOptions });
+        const comp = wrapper.vm;
+        // WHEN
+        await comp.$nextTick();
+
+        // THEN
+        expect(comp.subject).toMatchObject(subjectSample);
+      });
+    });
+
+    describe('Previous state', () => {
+      it('Should go previous state', async () => {
+        subjectServiceStub.find.mockResolvedValue(subjectSample);
+        const wrapper = shallowMount(SubjectDetails, { global: mountOptions });
+        const comp = wrapper.vm;
+        await comp.$nextTick();
+
+        comp.previousState();
+        await comp.$nextTick();
+
+        expect(routerGoMock).toHaveBeenCalledWith(-1);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,42 @@
+import { type Ref, defineComponent, inject, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { useAlertService } from '@/shared/alert/alert.service';
+import { type ISubject } from '@/shared/model/subject.model';
+
+import SubjectService from './subject.service';
+
+export default defineComponent({
+  name: 'SubjectDetails',
+  setup() {
+    const subjectService = inject('subjectService', () => new SubjectService());
+    const alertService = inject('alertService', () => useAlertService(), true);
+
+    const route = useRoute();
+    const router = useRouter();
+
+    const previousState = () => router.go(-1);
+    const subject: Ref<ISubject> = ref({});
+
+    const retrieveSubject = async subjectId => {
+      try {
+        const res = await subjectService().find(subjectId);
+        subject.value = res;
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      }
+    };
+
+    if (route.params?.subjectId) {
+      retrieveSubject(route.params.subjectId);
+    }
+
+    return {
+      subject,
+
+      previousState,
+      t$: useI18n().t,
+    };
+  },
+});

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

@@ -0,0 +1,41 @@
+<template>
+  <div class="d-flex justify-content-center">
+    <div class="col-8">
+      <div v-if="subject">
+        <h2 class="jh-entity-heading" data-cy="subjectDetailsHeading">
+          <span>{{ t$('questionBankApp.subject.detail.title') }}</span> {{ subject.id }}
+        </h2>
+        <dl class="row-md jh-entity-details">
+          <dt>
+            <span>{{ t$('questionBankApp.subject.name') }}</span>
+          </dt>
+          <dd>
+            <span>{{ subject.name }}</span>
+          </dd>
+          <dt>
+            <span>{{ t$('questionBankApp.subject.description') }}</span>
+          </dt>
+          <dd>
+            <span>{{ subject.description }}</span>
+          </dd>
+          <dt>
+            <span>{{ t$('questionBankApp.subject.active') }}</span>
+          </dt>
+          <dd>
+            <span>{{ subject.active }}</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>{{ t$('entity.action.back') }}</span>
+        </button>
+        <router-link v-if="subject.id" :to="{ name: 'SubjectEdit', params: { subjectId: subject.id } }" custom v-slot="{ navigate }">
+          <button @click="navigate" class="btn btn-primary">
+            <font-awesome-icon icon="pencil-alt"></font-awesome-icon>&nbsp;<span>{{ t$('entity.action.edit') }}</span>
+          </button>
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./subject-details.component.ts"></script>

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

@@ -0,0 +1,136 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { type RouteLocation } from 'vue-router';
+
+import { type MountingOptions, shallowMount } from '@vue/test-utils';
+
+import AlertService from '@/shared/alert/alert.service';
+
+import SubjectUpdate from './subject-update.vue';
+
+type SubjectUpdateComponentType = InstanceType<typeof SubjectUpdate>;
+
+let route: Partial<RouteLocation>;
+const routerGoMock = vi.fn();
+
+vi.mock('vue-router', () => ({
+  useRoute: () => route,
+  useRouter: () => ({ go: routerGoMock }),
+}));
+
+const subjectSample = { id: 123 };
+
+describe('Component Tests', () => {
+  let mountOptions: MountingOptions<SubjectUpdateComponentType>['global'];
+  let alertService: AlertService;
+
+  describe('Subject Management Update Component', () => {
+    let comp: SubjectUpdateComponentType;
+    let subjectServiceStub: any;
+
+    beforeEach(() => {
+      route = {};
+      subjectServiceStub = {
+        retrieve: vi.fn(),
+        find: vi.fn(),
+        update: vi.fn(),
+        create: vi.fn(),
+      };
+      subjectServiceStub.retrieve.mockResolvedValueOnce([]);
+
+      alertService = new AlertService({
+        i18n: { t: vi.fn() } as any,
+        toast: {
+          create: vi.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,
+          subjectService: () => subjectServiceStub,
+        },
+      };
+    });
+
+    afterEach(() => {
+      vi.resetAllMocks();
+    });
+
+    describe('save', () => {
+      it('Should call update service on save for existing entity', async () => {
+        // GIVEN
+        const wrapper = shallowMount(SubjectUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        comp.subject = subjectSample;
+        subjectServiceStub.update.mockResolvedValue(subjectSample);
+
+        // WHEN
+        comp.save();
+        await comp.$nextTick();
+
+        // THEN
+        expect(subjectServiceStub.update).toHaveBeenCalledWith(subjectSample);
+        expect(comp.isSaving).toEqual(false);
+      });
+
+      it('Should call create service on save for new entity', async () => {
+        // GIVEN
+        const entity = {};
+        subjectServiceStub.create.mockResolvedValue(entity);
+        const wrapper = shallowMount(SubjectUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        comp.subject = entity;
+
+        // WHEN
+        comp.save();
+        await comp.$nextTick();
+
+        // THEN
+        expect(subjectServiceStub.create).toHaveBeenCalledWith(entity);
+        expect(comp.isSaving).toEqual(false);
+      });
+    });
+
+    describe('Before route enter', () => {
+      it('Should retrieve data', async () => {
+        // GIVEN
+        subjectServiceStub.find.mockResolvedValue(subjectSample);
+        subjectServiceStub.retrieve.mockResolvedValue([subjectSample]);
+
+        // WHEN
+        route = {
+          params: {
+            subjectId: `${subjectSample.id}`,
+          },
+        };
+        const wrapper = shallowMount(SubjectUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        await comp.$nextTick();
+
+        // THEN
+        expect(comp.subject).toMatchObject(subjectSample);
+      });
+    });
+
+    describe('Previous state', () => {
+      it('Should go previous state', async () => {
+        subjectServiceStub.find.mockResolvedValue(subjectSample);
+        const wrapper = shallowMount(SubjectUpdate, { global: mountOptions });
+        comp = wrapper.vm;
+        await comp.$nextTick();
+
+        comp.previousState();
+        await comp.$nextTick();
+
+        expect(routerGoMock).toHaveBeenCalledWith(-1);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,101 @@
+import { type Ref, computed, defineComponent, inject, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { useVuelidate } from '@vuelidate/core';
+
+import { useAlertService } from '@/shared/alert/alert.service';
+import { useValidation } from '@/shared/composables';
+import { type ISubject, Subject } from '@/shared/model/subject.model';
+
+import SubjectService from './subject.service';
+
+export default defineComponent({
+  name: 'SubjectUpdate',
+  setup() {
+    const subjectService = inject('subjectService', () => new SubjectService());
+    const alertService = inject('alertService', () => useAlertService(), true);
+
+    const subject: Ref<ISubject> = ref(new Subject());
+    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 retrieveSubject = async subjectId => {
+      try {
+        const res = await subjectService().find(subjectId);
+        subject.value = res;
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      }
+    };
+
+    if (route.params?.subjectId) {
+      retrieveSubject(route.params.subjectId);
+    }
+
+    const { t: t$ } = useI18n();
+    const validations = useValidation();
+    const validationRules = {
+      name: {
+        required: validations.required(t$('entity.validation.required').toString()),
+        minLength: validations.minLength(t$('entity.validation.minlength', { min: 2 }).toString(), 2),
+        maxLength: validations.maxLength(t$('entity.validation.maxlength', { max: 100 }).toString(), 100),
+      },
+      description: {
+        maxLength: validations.maxLength(t$('entity.validation.maxlength', { max: 1000 }).toString(), 1000),
+      },
+      active: {
+        required: validations.required(t$('entity.validation.required').toString()),
+      },
+    };
+    const v$ = useVuelidate(validationRules, subject as any);
+    v$.value.$validate();
+
+    return {
+      subjectService,
+      alertService,
+      subject,
+      previousState,
+      isSaving,
+      currentLanguage,
+      v$,
+      t$,
+    };
+  },
+  created(): void {},
+  methods: {
+    save(): void {
+      this.isSaving = true;
+      if (this.subject.id) {
+        this.subjectService()
+          .update(this.subject)
+          .then(param => {
+            this.isSaving = false;
+            this.previousState();
+            this.alertService.showInfo(this.t$('questionBankApp.subject.updated', { param: param.id }));
+          })
+          .catch(error => {
+            this.isSaving = false;
+            this.alertService.showHttpError(error.response);
+          });
+      } else {
+        this.subjectService()
+          .create(this.subject)
+          .then(param => {
+            this.isSaving = false;
+            this.previousState();
+            this.alertService.showSuccess(this.t$('questionBankApp.subject.created', { param: param.id }).toString());
+          })
+          .catch(error => {
+            this.isSaving = false;
+            this.alertService.showHttpError(error.response);
+          });
+      }
+    },
+  },
+});

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

@@ -0,0 +1,79 @@
+<template>
+  <div class="d-flex justify-content-center">
+    <div class="col-8">
+      <form name="editForm" novalidate @submit.prevent="save()">
+        <h2 id="questionBankApp.subject.home.createOrEditLabel" data-cy="SubjectCreateUpdateHeading">
+          {{ t$('questionBankApp.subject.home.createOrEditLabel') }}
+        </h2>
+        <div>
+          <div class="mb-3" v-if="subject.id">
+            <label for="id">{{ t$('global.field.id') }}</label>
+            <input type="text" class="form-control" id="id" name="id" v-model="subject.id" readonly />
+          </div>
+          <div class="mb-3">
+            <label class="form-control-label" for="subject-name">{{ t$('questionBankApp.subject.name') }}</label>
+            <input
+              type="text"
+              class="form-control"
+              name="name"
+              id="subject-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="mb-3">
+            <label class="form-control-label" for="subject-description">{{ t$('questionBankApp.subject.description') }}</label>
+            <input
+              type="text"
+              class="form-control"
+              name="description"
+              id="subject-description"
+              data-cy="description"
+              :class="{ valid: !v$.description.$invalid, invalid: v$.description.$invalid }"
+              v-model="v$.description.$model"
+            />
+            <div v-if="v$.description.$anyDirty && v$.description.$invalid">
+              <small class="form-text text-danger" v-for="error of v$.description.$errors" :key="error.$uid">{{ error.$message }}</small>
+            </div>
+          </div>
+          <div class="mb-3 form-check">
+            <input
+              type="checkbox"
+              class="form-check-input"
+              name="active"
+              id="subject-active"
+              data-cy="active"
+              :class="{ valid: !v$.active.$invalid, invalid: v$.active.$invalid }"
+              v-model="v$.active.$model"
+              required
+            />
+            <label class="form-check-label" for="subject-active">{{ t$('questionBankApp.subject.active') }}</label>
+            <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>
+        <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>{{ t$('entity.action.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>{{ t$('entity.action.save') }}</span>
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+<script lang="ts" src="./subject-update.component.ts"></script>

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

@@ -0,0 +1,167 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { type MountingOptions, shallowMount } from '@vue/test-utils';
+
+import AlertService from '@/shared/alert/alert.service';
+
+import Subject from './subject.vue';
+
+type SubjectComponentType = InstanceType<typeof Subject>;
+
+const bModalStub = {
+  render: () => {},
+  methods: {
+    hide: () => {},
+    show: () => {},
+  },
+};
+
+describe('Component Tests', () => {
+  let alertService: AlertService;
+
+  describe('Subject Management Component', () => {
+    let subjectServiceStub: any;
+    let mountOptions: MountingOptions<SubjectComponentType>['global'];
+
+    beforeEach(() => {
+      subjectServiceStub = {
+        retrieve: vi.fn(),
+        delete: vi.fn(),
+      };
+      subjectServiceStub.retrieve.mockResolvedValue({ headers: {} });
+
+      alertService = new AlertService({
+        i18n: { t: vi.fn() } as any,
+        toast: {
+          create: vi.fn(),
+        } as any,
+      });
+
+      mountOptions = {
+        stubs: {
+          jhiItemCount: true,
+          bPagination: true,
+          bModal: bModalStub as any,
+          'font-awesome-icon': true,
+          'b-badge': true,
+          'jhi-sort-indicator': true,
+          'b-button': true,
+          'router-link': true,
+        },
+        directives: {
+          'b-modal': {},
+        },
+        provide: {
+          alertService,
+          subjectService: () => subjectServiceStub,
+        },
+      };
+    });
+
+    describe('Mount', () => {
+      it('Should call load all on init', async () => {
+        // GIVEN
+        subjectServiceStub.retrieve.mockResolvedValue({ headers: {}, data: [{ id: 123 }] });
+
+        // WHEN
+        const wrapper = shallowMount(Subject, { global: mountOptions });
+        const comp = wrapper.vm;
+        await comp.$nextTick();
+
+        // THEN
+        expect(subjectServiceStub.retrieve).toHaveBeenCalledOnce();
+        expect(comp.subjects[0]).toEqual(expect.objectContaining({ id: 123 }));
+      });
+
+      it('should calculate the sort attribute for an id', async () => {
+        // WHEN
+        const wrapper = shallowMount(Subject, { global: mountOptions });
+        const comp = wrapper.vm;
+        await comp.$nextTick();
+
+        // THEN
+        expect(subjectServiceStub.retrieve.mock.lastCall?.[0]).toMatchObject({
+          sort: ['id,asc'],
+        });
+      });
+    });
+    describe('Handles', () => {
+      let comp: SubjectComponentType;
+
+      beforeEach(async () => {
+        const wrapper = shallowMount(Subject, { global: mountOptions });
+        comp = wrapper.vm;
+        await comp.$nextTick();
+        subjectServiceStub.retrieve.mockReset();
+        subjectServiceStub.retrieve.mockResolvedValue({ headers: {}, data: [] });
+      });
+
+      it('should load a page', async () => {
+        // GIVEN
+        subjectServiceStub.retrieve.mockResolvedValue({ headers: {}, data: [{ id: 123 }] });
+
+        // WHEN
+        comp.page = 2;
+        await comp.$nextTick();
+
+        // THEN
+        expect(subjectServiceStub.retrieve).toHaveBeenCalled();
+        expect(comp.subjects[0]).toEqual(expect.objectContaining({ id: 123 }));
+      });
+
+      it('should not load a page if the page is the same as the previous page', () => {
+        // WHEN
+        comp.page = 1;
+
+        // THEN
+        expect(subjectServiceStub.retrieve).not.toHaveBeenCalled();
+      });
+
+      it('should re-initialize the page', async () => {
+        // GIVEN
+        comp.page = 2;
+        await comp.$nextTick();
+        subjectServiceStub.retrieve.mockReset();
+        subjectServiceStub.retrieve.mockResolvedValue({ headers: {}, data: [{ id: 123 }] });
+
+        // WHEN
+        comp.clear();
+        await comp.$nextTick();
+
+        // THEN
+        expect(comp.page).toEqual(1);
+        expect(subjectServiceStub.retrieve).toHaveBeenCalledTimes(1);
+        expect(comp.subjects[0]).toEqual(expect.objectContaining({ id: 123 }));
+      });
+
+      it('should calculate the sort attribute for a non-id attribute', async () => {
+        // WHEN
+        comp.propOrder = 'name';
+        await comp.$nextTick();
+
+        // THEN
+        expect(subjectServiceStub.retrieve.mock.lastCall?.[0]).toMatchObject({
+          sort: ['name,asc', 'id'],
+        });
+      });
+
+      it('Should call delete service on confirmDelete', async () => {
+        // GIVEN
+        subjectServiceStub.delete.mockResolvedValue({});
+
+        // WHEN
+        comp.prepareRemove({ id: 123 });
+
+        comp.removeSubject();
+        await comp.$nextTick(); // clear components
+
+        // THEN
+        expect(subjectServiceStub.delete).toHaveBeenCalled();
+
+        // THEN
+        await comp.$nextTick(); // handle component clear watch
+        expect(subjectServiceStub.retrieve).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,134 @@
+import { type Ref, defineComponent, inject, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { useAlertService } from '@/shared/alert/alert.service';
+import { type ISubject } from '@/shared/model/subject.model';
+
+import SubjectService from './subject.service';
+
+export default defineComponent({
+  name: 'Subject',
+  setup() {
+    const { t: t$ } = useI18n();
+    const subjectService = inject('subjectService', () => new SubjectService());
+    const alertService = inject('alertService', () => useAlertService(), true);
+
+    const itemsPerPage = ref(20);
+    const queryCount: Ref<number> = ref(null);
+    const page: Ref<number> = ref(1);
+    const propOrder = ref('id');
+    const reverse = ref(false);
+    const totalItems = ref(0);
+
+    const subjects: Ref<ISubject[]> = ref([]);
+
+    const isFetching = ref(false);
+
+    const clear = () => {
+      page.value = 1;
+    };
+
+    const sort = (): Array<any> => {
+      const result = [`${propOrder.value},${reverse.value ? 'desc' : 'asc'}`];
+      if (propOrder.value !== 'id') {
+        result.push('id');
+      }
+      return result;
+    };
+
+    const retrieveSubjects = async () => {
+      isFetching.value = true;
+      try {
+        const paginationQuery = {
+          page: page.value - 1,
+          size: itemsPerPage.value,
+          sort: sort(),
+        };
+        const res = await subjectService().retrieve(paginationQuery);
+        totalItems.value = Number(res.headers['x-total-count']);
+        queryCount.value = totalItems.value;
+        subjects.value = res.data;
+      } catch (err) {
+        alertService.showHttpError(err.response);
+      } finally {
+        isFetching.value = false;
+      }
+    };
+
+    const handleSyncList = () => {
+      retrieveSubjects();
+    };
+
+    onMounted(async () => {
+      await retrieveSubjects();
+    });
+
+    const removeId: Ref<number> = ref(null);
+    const removeEntity = ref<any>(null);
+    const prepareRemove = (instance: ISubject) => {
+      removeId.value = instance.id;
+      removeEntity.value.show();
+    };
+    const closeDialog = () => {
+      removeEntity.value.hide();
+    };
+    const removeSubject = async () => {
+      try {
+        await subjectService().delete(removeId.value);
+        const message = t$('questionBankApp.subject.deleted', { param: removeId.value }).toString();
+        alertService.showInfo(message, { variant: 'danger' });
+        removeId.value = null;
+        retrieveSubjects();
+        closeDialog();
+      } catch (error) {
+        alertService.showHttpError(error.response);
+      }
+    };
+
+    const changeOrder = (newOrder: string) => {
+      if (propOrder.value === newOrder) {
+        reverse.value = !reverse.value;
+      } else {
+        reverse.value = false;
+      }
+      propOrder.value = newOrder;
+    };
+
+    // Whenever order changes, reset the pagination
+    watch([propOrder, reverse], async () => {
+      if (page.value === 1) {
+        // first page, retrieve new data
+        await retrieveSubjects();
+      } else {
+        // reset the pagination
+        clear();
+      }
+    });
+
+    // Whenever page changes, switch to the new page.
+    watch(page, async () => {
+      await retrieveSubjects();
+    });
+
+    return {
+      subjects,
+      handleSyncList,
+      isFetching,
+      retrieveSubjects,
+      clear,
+      removeId,
+      removeEntity,
+      prepareRemove,
+      closeDialog,
+      removeSubject,
+      itemsPerPage,
+      queryCount,
+      page,
+      propOrder,
+      reverse,
+      totalItems,
+      changeOrder,
+      t$,
+    };
+  },
+});

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

@@ -0,0 +1,161 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import axios from 'axios';
+
+import { Subject } from '@/shared/model/subject.model';
+
+import SubjectService from './subject.service';
+
+const error = {
+  response: {
+    status: null,
+    data: {
+      type: null,
+    },
+  },
+};
+
+const axiosStub = {
+  get: vi.spyOn(axios, 'get'),
+  post: vi.spyOn(axios, 'post'),
+  put: vi.spyOn(axios, 'put'),
+  patch: vi.spyOn(axios, 'patch'),
+  delete: vi.spyOn(axios, 'delete'),
+};
+
+describe('Service Tests', () => {
+  describe('Subject Service', () => {
+    let service: SubjectService;
+    let elemDefault;
+
+    beforeEach(() => {
+      service = new SubjectService();
+      elemDefault = new Subject(123, 'AAAAAAA', 'AAAAAAA', false);
+    });
+
+    describe('Service methods', () => {
+      it('should find an element', async () => {
+        const returnedFromService = { ...elemDefault };
+        axiosStub.get.mockResolvedValue({ data: returnedFromService });
+
+        return service.find(123).then(res => {
+          expect(res).toMatchObject(elemDefault);
+        });
+      });
+
+      it('should not find an element', async () => {
+        axiosStub.get.mockRejectedValue(error);
+        return service
+          .find(123)
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should create a Subject', async () => {
+        const returnedFromService = { id: 123, ...elemDefault };
+        const expected = { ...returnedFromService };
+
+        axiosStub.post.mockResolvedValue({ data: returnedFromService });
+        return service.create({}).then(res => {
+          expect(res).toMatchObject(expected);
+        });
+      });
+
+      it('should not create a Subject', async () => {
+        axiosStub.post.mockRejectedValue(error);
+
+        return service
+          .create({})
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should update a Subject', async () => {
+        const returnedFromService = { name: 'BBBBBB', description: 'BBBBBB', active: true, ...elemDefault };
+
+        const expected = { ...returnedFromService };
+        axiosStub.put.mockResolvedValue({ data: returnedFromService });
+
+        return service.update(expected).then(res => {
+          expect(res).toMatchObject(expected);
+        });
+      });
+
+      it('should not update a Subject', async () => {
+        axiosStub.put.mockRejectedValue(error);
+
+        return service
+          .update({})
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should partial update a Subject', async () => {
+        const patchObject = { name: 'BBBBBB', ...new Subject() };
+        const returnedFromService = Object.assign(patchObject, elemDefault);
+
+        const expected = { ...returnedFromService };
+        axiosStub.patch.mockResolvedValue({ data: returnedFromService });
+
+        return service.partialUpdate(patchObject).then(res => {
+          expect(res).toMatchObject(expected);
+        });
+      });
+
+      it('should not partial update a Subject', async () => {
+        axiosStub.patch.mockRejectedValue(error);
+
+        return service
+          .partialUpdate({})
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should return a list of Subject', async () => {
+        const returnedFromService = { name: 'BBBBBB', description: 'BBBBBB', active: true, ...elemDefault };
+        const expected = { ...returnedFromService };
+        axiosStub.get.mockResolvedValue([returnedFromService]);
+        return service.retrieve({ sort: {}, page: 0, size: 10 }).then(res => {
+          expect(res).toContainEqual(expected);
+        });
+      });
+
+      it('should not return a list of Subject', async () => {
+        axiosStub.get.mockRejectedValue(error);
+
+        return service
+          .retrieve()
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+
+      it('should delete a Subject', async () => {
+        axiosStub.delete.mockResolvedValue({ ok: true });
+        return service.delete(123).then(res => {
+          expect(res.ok).toBeTruthy();
+        });
+      });
+
+      it('should not delete a Subject', async () => {
+        axiosStub.delete.mockRejectedValue(error);
+
+        return service
+          .delete(123)
+          .then()
+          .catch(err => {
+            expect(err).toMatchObject(error);
+          });
+      });
+    });
+  });
+});

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

@@ -0,0 +1,86 @@
+import axios from 'axios';
+
+import { type ISubject } from '@/shared/model/subject.model';
+import buildPaginationQueryOpts from '@/shared/sort/sorts';
+
+const baseApiUrl = 'api/subjects';
+
+export default class SubjectService {
+  find(id: number): Promise<ISubject> {
+    return new Promise<ISubject>((resolve, reject) => {
+      axios
+        .get(`${baseApiUrl}/${id}`)
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  retrieve(paginationQuery?: any): Promise<any> {
+    return new Promise<any>((resolve, reject) => {
+      axios
+        .get(`${baseApiUrl}?${buildPaginationQueryOpts(paginationQuery)}`)
+        .then(res => {
+          resolve(res);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  delete(id: number): Promise<any> {
+    return new Promise<any>((resolve, reject) => {
+      axios
+        .delete(`${baseApiUrl}/${id}`)
+        .then(res => {
+          resolve(res);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  create(entity: ISubject): Promise<ISubject> {
+    return new Promise<ISubject>((resolve, reject) => {
+      axios
+        .post(baseApiUrl, entity)
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  update(entity: ISubject): Promise<ISubject> {
+    return new Promise<ISubject>((resolve, reject) => {
+      axios
+        .put(`${baseApiUrl}/${entity.id}`, entity)
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  partialUpdate(entity: ISubject): Promise<ISubject> {
+    return new Promise<ISubject>((resolve, reject) => {
+      axios
+        .patch(`${baseApiUrl}/${entity.id}`, entity)
+        .then(res => {
+          resolve(res.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+}

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

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <h2 id="page-heading" data-cy="SubjectHeading">
+      <span id="subject">{{ t$('questionBankApp.subject.home.title') }}</span>
+      <div class="d-flex justify-content-end">
+        <button class="btn btn-info me-2" @click="handleSyncList" :disabled="isFetching">
+          <font-awesome-icon icon="sync" :spin="isFetching"></font-awesome-icon>
+          <span>{{ t$('questionBankApp.subject.home.refreshListLabel') }}</span>
+        </button>
+        <router-link :to="{ name: 'SubjectCreate' }" custom v-slot="{ navigate }">
+          <button
+            @click="navigate"
+            id="jh-create-entity"
+            data-cy="entityCreateButton"
+            class="btn btn-primary jh-create-entity create-subject"
+          >
+            <font-awesome-icon icon="plus"></font-awesome-icon>
+            <span>{{ t$('questionBankApp.subject.home.createLabel') }}</span>
+          </button>
+        </router-link>
+      </div>
+    </h2>
+    <br />
+    <div class="alert alert-warning" v-if="!isFetching && subjects?.length === 0">
+      <span>{{ t$('questionBankApp.subject.home.notFound') }}</span>
+    </div>
+    <div class="table-responsive" v-if="subjects?.length > 0">
+      <table class="table table-striped" aria-describedby="subjects">
+        <thead>
+          <tr>
+            <th scope="col" @click="changeOrder('id')">
+              <span>{{ t$('global.field.id') }}</span>
+              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'id'"></jhi-sort-indicator>
+            </th>
+            <th scope="col" @click="changeOrder('name')">
+              <span>{{ t$('questionBankApp.subject.name') }}</span>
+              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'name'"></jhi-sort-indicator>
+            </th>
+            <th scope="col" @click="changeOrder('description')">
+              <span>{{ t$('questionBankApp.subject.description') }}</span>
+              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'description'"></jhi-sort-indicator>
+            </th>
+            <th scope="col" @click="changeOrder('active')">
+              <span>{{ t$('questionBankApp.subject.active') }}</span>
+              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'active'"></jhi-sort-indicator>
+            </th>
+            <th scope="col"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="subject in subjects" :key="subject.id" data-cy="entityTable">
+            <td>
+              <router-link :to="{ name: 'SubjectView', params: { subjectId: subject.id } }">{{ subject.id }}</router-link>
+            </td>
+            <td>{{ subject.name }}</td>
+            <td>{{ subject.description }}</td>
+            <td>{{ subject.active }}</td>
+            <td class="text-end">
+              <div class="btn-group">
+                <router-link :to="{ name: 'SubjectView', params: { subjectId: subject.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">{{ t$('entity.action.view') }}</span>
+                  </button>
+                </router-link>
+                <router-link :to="{ name: 'SubjectEdit', params: { subjectId: subject.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">{{ t$('entity.action.edit') }}</span>
+                  </button>
+                </router-link>
+                <b-button @click="prepareRemove(subject)" variant="danger" class="btn btn-sm" data-cy="entityDeleteButton">
+                  <font-awesome-icon icon="times"></font-awesome-icon>
+                  <span class="d-none d-md-inline">{{ t$('entity.action.delete') }}</span>
+                </b-button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <b-modal ref="removeEntity" id="removeEntity">
+      <template #title>
+        <span id="questionBankApp.subject.delete.question" data-cy="subjectDeleteDialogHeading">{{ t$('entity.delete.title') }}</span>
+      </template>
+      <div class="modal-body">
+        <p id="jhi-delete-subject-heading">{{ t$('questionBankApp.subject.delete.question', { id: removeId }) }}</p>
+      </div>
+      <template #footer>
+        <div>
+          <button type="button" class="btn btn-secondary" @click="closeDialog()">{{ t$('entity.action.cancel') }}</button>
+          <button
+            type="button"
+            class="btn btn-primary"
+            id="jhi-confirm-delete-subject"
+            data-cy="entityConfirmDeleteButton"
+            @click="removeSubject"
+          >
+            {{ t$('entity.action.delete') }}
+          </button>
+        </div>
+      </template>
+    </b-modal>
+    <div v-show="subjects?.length > 0">
+      <div class="d-flex justify-content-center">
+        <jhi-item-count :page="page" :total="queryCount" :items-per-page="itemsPerPage"></jhi-item-count>
+      </div>
+      <div class="d-flex justify-content-center">
+        <b-pagination size="md" :total-rows="totalItems" v-model="page" :per-page="itemsPerPage"></b-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./subject.component.ts"></script>