Generate question bank domain model from JDL

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$,
+    };
+  },
+});