130 lines
4.1 KiB
TypeScript
130 lines
4.1 KiB
TypeScript
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({ page: 0, size: 100 })
|
|
.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);
|
|
});
|
|
}
|
|
},
|
|
},
|
|
});
|