diff --git a/src/components/answers/ScaleValue.vue b/src/components/answers/ScaleValue.vue new file mode 100644 index 0000000..fc17a6b --- /dev/null +++ b/src/components/answers/ScaleValue.vue @@ -0,0 +1,133 @@ + + + + + diff --git a/src/components/answers/SelectorValue.vue b/src/components/answers/SelectorValue.vue new file mode 100644 index 0000000..b852811 --- /dev/null +++ b/src/components/answers/SelectorValue.vue @@ -0,0 +1,112 @@ + + + + + diff --git a/src/components/answers/TextValue.vue b/src/components/answers/TextValue.vue index 488fb08..f10cc01 100644 --- a/src/components/answers/TextValue.vue +++ b/src/components/answers/TextValue.vue @@ -1,24 +1,73 @@ diff --git a/src/components/forms/ScaleQuestion.vue b/src/components/forms/ScaleQuestion.vue index 60ba22b..3ca6fce 100644 --- a/src/components/forms/ScaleQuestion.vue +++ b/src/components/forms/ScaleQuestion.vue @@ -34,7 +34,7 @@ import { ref, computed } from 'vue' import { PhCardsThree, PhCaretCircleUpDown } from '@phosphor-icons/vue' -import '@/styles/form/view.scss'; +import '@/styles/form/view.scss' const props = defineProps({ label: { diff --git a/src/components/forms/SelectorQuestion.vue b/src/components/forms/SelectorQuestion.vue index b79b8b5..c06d0e9 100644 --- a/src/components/forms/SelectorQuestion.vue +++ b/src/components/forms/SelectorQuestion.vue @@ -10,7 +10,14 @@
- Выберите от {{ minValues }} до {{ Math.min(maxValues, options.length) }} {{ normalizeCountForm(Math.min(maxValues, options.length), ['варианта', 'вариантов', 'вариантов']) }} + Выберите от {{ minValues }} до {{ Math.min(maxValues, options.length) }} + {{ + normalizeCountForm(Math.min(maxValues, options.length), [ + 'варианта', + 'вариантов', + 'вариантов' + ]) + }}
@@ -37,7 +44,7 @@ import { ref, watch } from 'vue' import { PhCaretCircleUpDown, PhXCircle } from '@phosphor-icons/vue' import { normalizeCountForm } from '@/utils/formation' -import '@/styles/form/view.scss'; +import '@/styles/form/view.scss' const props = defineProps({ label: { @@ -99,12 +106,12 @@ function validateSelection() { error.value = '' if (selectedIndexes.value.length < props.minValues) { - error.value = `Необходимо выбрать минимум ${props.minValues} ${normalizeCountForm(props.minValues, ['вариант', 'варианта', 'вариантов']) }.` + error.value = `Необходимо выбрать минимум ${props.minValues} ${normalizeCountForm(props.minValues, ['вариант', 'варианта', 'вариантов'])}.` return } if (props.maxValues && selectedIndexes.value.length > props.maxValues) { - error.value = `Необходимо выбрать не больше ${props.maxValues} ${normalizeCountForm(props.maxValues, ['варианта', 'вариантов', 'вариантов']) }.` + error.value = `Необходимо выбрать не больше ${props.maxValues} ${normalizeCountForm(props.maxValues, ['варианта', 'вариантов', 'вариантов'])}.` return } diff --git a/src/components/forms/TextQuestion.vue b/src/components/forms/TextQuestion.vue index 872121d..8e8c7a3 100644 --- a/src/components/forms/TextQuestion.vue +++ b/src/components/forms/TextQuestion.vue @@ -29,7 +29,7 @@ import { PhXCircle } from '@phosphor-icons/vue' import { validateSNILS, validateTIN } from '@/utils/validators' import { normalizeCountForm } from '@/utils/formation' -import '@/styles/form/view.scss'; +import '@/styles/form/view.scss' const props = defineProps({ label: { @@ -72,10 +72,10 @@ const error = ref('') function validateInput() { error.value = '' - + if (props.isRequired || inputValue.value) { if (props.minLength && inputValue.value.length < props.minLength) { - error.value = `Минимальная длина - ${props.minLength} ${normalizeCountForm(props.minValues, ['символ', 'символа', 'символов']) }` + error.value = `Минимальная длина - ${props.minLength} ${normalizeCountForm(props.minValues, ['символ', 'символа', 'символов'])}` } if (props.validator === 1 && !validateTIN(inputValue.value)) { error.value = 'Некорректный ИНН' @@ -116,7 +116,9 @@ function validateInput() { font-weight: 200; border-radius: 0.5rem; outline: 0; - transition: border, background 0.25s ease; + transition: + border, + background 0.25s ease; &:hover { border: 1px solid var(--color-secondary-border); diff --git a/src/styles/form/view.scss b/src/styles/form/view.scss index e974506..f0cfd15 100644 --- a/src/styles/form/view.scss +++ b/src/styles/form/view.scss @@ -125,4 +125,4 @@ font-size: 1.17em; } } -} \ No newline at end of file +} diff --git a/src/utils/formation.ts b/src/utils/formation.ts index 89cdd08..d8d92cf 100644 --- a/src/utils/formation.ts +++ b/src/utils/formation.ts @@ -1,4 +1,6 @@ -export function normalizeCountForm (number: number, words_arr: Array) { - let options = [2, 0, 1, 1, 1, 2]; - return words_arr[(number % 100 > 4 && number % 100 < 20) ? 2 : options[(number % 10 < 5) ? number % 10 : 5]]; -} \ No newline at end of file +export function normalizeCountForm(number: number, words_arr: Array) { + let options = [2, 0, 1, 1, 1, 2] + return words_arr[ + number % 100 > 4 && number % 100 < 20 ? 2 : options[number % 10 < 5 ? number % 10 : 5] + ] +} diff --git a/src/utils/validators.ts b/src/utils/validators.ts index 7b72320..83d7762 100644 --- a/src/utils/validators.ts +++ b/src/utils/validators.ts @@ -7,14 +7,14 @@ export function validateTIN(value: String) { if (len === 10) { const checksum = ((2 * digits[0] + - 4 * digits[1] + - 10 * digits[2] + - 3 * digits[3] + - 5 * digits[4] + - 9 * digits[5] + - 4 * digits[6] + - 6 * digits[7] + - 8 * digits[8]) % + 4 * digits[1] + + 10 * digits[2] + + 3 * digits[3] + + 5 * digits[4] + + 9 * digits[5] + + 4 * digits[6] + + 6 * digits[7] + + 8 * digits[8]) % 11) % 10 return digits[9] === checksum @@ -23,29 +23,29 @@ export function validateTIN(value: String) { if (len === 12) { const checksum1 = ((7 * digits[0] + - 2 * digits[1] + - 4 * digits[2] + - 10 * digits[3] + - 3 * digits[4] + - 5 * digits[5] + - 9 * digits[6] + - 4 * digits[7] + - 6 * digits[8] + - 8 * digits[9]) % + 2 * digits[1] + + 4 * digits[2] + + 10 * digits[3] + + 3 * digits[4] + + 5 * digits[5] + + 9 * digits[6] + + 4 * digits[7] + + 6 * digits[8] + + 8 * digits[9]) % 11) % 10 const checksum2 = ((3 * digits[0] + - 7 * digits[1] + - 2 * digits[2] + - 4 * digits[3] + - 10 * digits[4] + - 3 * digits[5] + - 5 * digits[6] + - 9 * digits[7] + - 4 * digits[8] + - 6 * digits[9] + - 8 * digits[10]) % + 7 * digits[1] + + 2 * digits[2] + + 4 * digits[3] + + 10 * digits[4] + + 3 * digits[5] + + 5 * digits[6] + + 9 * digits[7] + + 4 * digits[8] + + 6 * digits[9] + + 8 * digits[10]) % 11) % 10 return digits[10] === checksum1 && digits[11] === checksum2 diff --git a/src/views/form/Answers.vue b/src/views/form/Answers.vue index 9a7fde6..196bfb1 100644 --- a/src/views/form/Answers.vue +++ b/src/views/form/Answers.vue @@ -4,10 +4,13 @@ import { makeAPIRequest } from '@/utils/http' import FormNotFound from '@/components/FormNotFound.vue' import { useRoute } from 'vue-router' import TextValue from '@/components/answers/TextValue.vue' +import SelectorValue from '@/components/answers/SelectorValue.vue' +import ScaleValue from '@/components/answers/ScaleValue.vue' const route = useRoute() const data = ref([]) +const questionsData = ref({}) const currentPageNumber = ref(0) const isAnswerNotFound = ref(true) const mode = ref(0) @@ -27,6 +30,19 @@ onMounted(async () => { if (data.value.length > 0) { isAnswerNotFound.value = false } + + const questionsFormResponse = await makeAPIRequest('/form/get', 'GET', { + id: Number(route.params.id) + }) + if (!questionsFormResponse.json || questionsFormResponse.status !== 200) { + return + } + + questionsFormResponse.json.data.pages.forEach((p: any) => { + p.questions.forEach((q: any) => { + questionsData.value[q.id] = q + }) + }) }) @@ -41,7 +57,27 @@ onMounted(async () => {
- + + +
diff --git a/src/views/form/View.vue b/src/views/form/View.vue index 60eb198..3a11610 100644 --- a/src/views/form/View.vue +++ b/src/views/form/View.vue @@ -10,7 +10,7 @@ import { useRoute } from 'vue-router' import { PhInfo, PhCardsThree } from '@phosphor-icons/vue' import { validateSNILS, validateTIN } from '@/utils/validators' -import '@/styles/form/view.scss'; +import '@/styles/form/view.scss' const route = useRoute() @@ -36,14 +36,18 @@ function beforeSubmitValidate() { for (let question of currentPage.value.questions) { const answer = answers.value[question.id] - if (!answer) return false; - if (question.required && !answer.value && !answer.values) return false; + if (!answer) return false + if (question.required && !answer.value && !answer.values) return false if (question.question_type === 1 && answer.value) { - if (!question.validator && question.min_length && answer.value.length < question.min_length) return false; - if (question.validator === 1 && !validateTIN(answer.value)) return false; - if (question.validator === 2 && !validateSNILS(answer.value)) return false; - } else if (question.question_type === 2 && !(question.required && answer.values.length >= question.min_values)) { + if (!question.validator && question.min_length && answer.value.length < question.min_length) + return false + if (question.validator === 1 && !validateTIN(answer.value)) return false + if (question.validator === 2 && !validateSNILS(answer.value)) return false + } else if ( + question.question_type === 2 && + !(question.required && answer.values.length >= question.min_values) + ) { return false } } @@ -58,9 +62,9 @@ async function submitForm() { } else { for (let page of data.value.pages) { page.questions.forEach((q) => { - let answer = answers.value[q.id]; + let answer = answers.value[q.id] if (!q.required && !(answer.value || answer.values)) { - delete answers.value[q.id]; + delete answers.value[q.id] } }) } @@ -99,7 +103,9 @@ onMounted(async () => {
-
Страница {{ currentPageNumber + 1 }} из {{ data.pages.length }}
+
+ Страница {{ currentPageNumber + 1 }} из {{ data.pages.length }} +

{{ data.name }}

{{ currentPage.text }}