mrkrk/formaptix-web
1
0
Fork 0
mirror of https://github.com/grey-cat-1908/formaptix-web.git synced 2024-09-22 19:21:59 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

bug fix && textarea support

Browse source
This commit is contained in:
grey-cat-1908 2024-09-20 18:02:17 +03:00
parent d6439f223b
commit fbeed920c5
8 changed files with 77 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/answers/TextValue.vue
View file

@ -4,7 +4,10 @@
<h3 class="form-q-title">{{ label }}</h3>
<p class="form-q-description">{{ description }}</p>
</div>
<div class="text-question">
<div v-if="textarea" class="text-question">
<textarea class="text-question-input" :value="modelValue" readonly />
</div>
<div v-else class="text-question">
<input class="text-question-input" type="text" :value="modelValue" readonly />
</div>
</div>
@ -25,6 +28,10 @@ const props = defineProps({
modelValue: {
type: Array,
default: () => []
},
textarea: {
type: Boolean,
default: null
}
})
</script>

10
src/components/edit/QuestionEdit.vue
View file

@ -19,7 +19,8 @@ const props = defineProps({
min_value: 1,
max_value: 5,
min_label: null,
max_label: null
max_label: null,
textarea: false
}
}
})
@ -83,6 +84,13 @@ async function submitForm() {
<div class="question-data">
<div class="" v-if="data.question_type === 1">
<div class="">
<div class="">
<p>Развернутый?</p>
<label class="switch">
<input v-model="data.textarea" type="checkbox" />
<span class="slider"></span>
</label>
</div>
<p>Валидатор</p>
<select v-model="data.validator" id="question-type">
<option :value="null">Текст</option>

9
src/components/edit/TextPreview.vue
View file

@ -3,7 +3,10 @@
<h3 class="form-q-title">{{ label }} <span style="color: red" v-if="required">*</span></h3>
<p class="form-q-description">{{ description }}</p>
</div>
<div class="text-question">
<div v-if="textarea" class="text-question">
<textarea class="text-question-input" placeholder="Ответ на вопрос" readonly />
</div>
<div v-else class="text-question">
<input class="text-question-input" placeholder="Ответ на вопрос" type="text" readonly />
</div>
</template>
@ -23,6 +26,10 @@ const props = defineProps({
required: {
type: Boolean,
default: null
},
textarea: {
type: Boolean,
default: null
}
})
</script>

20
src/components/forms/TextQuestion.vue
View file

@ -5,7 +5,21 @@
<p class="form-q-description">{{ description }}</p>
</div>
<img v-if="imageUrl" :src="imageUrl" alt="image by user" />
<div class="text-question">
<div v-if="isTextarea" class="text-question">
<textarea
class="text-question-input"
v-model="inputValue"
:maxlength="maxLength"
:required="isRequired"
@input="validateInput"
@blur="validateInput"
placeholder="Ваш ответ"
/>
<p v-if="error" class="text-question-error">
<PhXCircle class="text-question-error--sign" :size="23" />{{ error }}
</p>
</div>
<div v-else class="text-question">
<input
class="text-question-input"
type="text"
@ -67,6 +81,10 @@ const props = defineProps({
isEmpty: {
type: Boolean,
default: false
},
isTextarea: {
type: Boolean,
default: false
}
})

46
src/views/Profile.vue
View file

@ -8,7 +8,7 @@ import { makeAPIRequest } from '@/utils/http'
const authStore = useAuthStore()
const userForms = ref([])
import {PhEye, PhInfo, PhPen, PhPencil, PhTrash, PhUserList} from '@phosphor-icons/vue'
import { PhEye, PhInfo, PhPen, PhPencil, PhTrash, PhUserList } from '@phosphor-icons/vue'
onMounted(async () => {
await authStore.prepareStore()
@ -53,30 +53,41 @@ async function createForm() {
<h1 class="profile-title">Профиль пользователя</h1>
<div class="profile-ctrl-card">
<div class="profile-ctrl-buttons">
<button @click="createForm" class="default-button profile-ctrl-btn profile-ctrl-btn--create">Создать форму</button>
<!-- <button @click="createForm" class="default-button profile-ctrl-btn profile-ctrl-btn&#45;&#45;creat">Очистить все формы</button>-->
<button @click="createForm" class="default-button profile-ctrl-btn profile-ctrl-btn--deleteacc">Удалить аккаунт</button>
<button
@click="createForm"
class="default-button profile-ctrl-btn profile-ctrl-btn--create"
>
Создать форму
</button>
<!-- <button @click="createForm" class="default-button profile-ctrl-btn profile-ctrl-btn&#45;&#45;creat">Очистить все формы</button>-->
<button
@click="createForm"
class="default-button profile-ctrl-btn profile-ctrl-btn--deleteacc"
>
Удалить аккаунт
</button>
<div class="profile-ctrl-info">
<PhInfo :size="22" class="profile-ctrl-info--sign" /> После удаления аккаунта вернуть данные невозможно
<PhInfo :size="22" class="profile-ctrl-info--sign" /> После удаления аккаунта вернуть
данные невозможно
</div>
</div>
</div>
<div class="profile-cards">
<div class="profile-card" v-for="(form, index) in userForms" v-if="userForms.length > 0">
<div class="profile-card-title">
<!-- <code class="profile-card-num">001</code>-->
<!-- <code class="profile-card-num">001</code>-->
{{ form.data.name }}
</div>
<div class="profile-card-buttons">
<button
class="profile-card-btn profile-card-btn--upd"
@click="$router.push('/form/edit/' + form.id)"
class="profile-card-btn profile-card-btn--upd"
@click="$router.push('/form/edit/' + form.id)"
>
<div class="profile-card-btn-inner"><PhPencil :size="26" /></div>
</button>
<button
class="profile-card-btn profile-card-btn--upd"
@click="$router.push('/form/edit/' + form.id)"
class="profile-card-btn profile-card-btn--upd"
@click="$router.push('/form/answers/' + form.id)"
>
<div class="profile-card-btn-inner"><PhUserList :size="26" /></div>
</button>
@ -104,7 +115,6 @@ async function createForm() {
margin: 40px 0;
&-ctrl {
&-info {
display: flex;
align-items: center;
@ -143,15 +153,12 @@ async function createForm() {
border: 1px solid var(--color-third-border);
}
@media (max-width: 500px) {
width: 100%;
}
&--create {
color: var(--color-main);
}
&--deleteacc {
@ -161,7 +168,6 @@ async function createForm() {
}
}
&-cards {
margin-top: 30px;
display: flex;
@ -181,11 +187,9 @@ async function createForm() {
//cursor: pointer;
&:hover {
//background: var(--color-main-border);
}
@media (max-width: 680px) {
flex-direction: column;
align-items: start;
@ -227,9 +231,7 @@ async function createForm() {
display: flex;
justify-content: center;
align-items: center;
transition: 0.25s ease;
transition: 0.25s ease;
&:hover {
opacity: 0.7;
@ -238,7 +240,6 @@ async function createForm() {
&--delete {
color: var(--color-red);
}
}
&-title {
@ -262,5 +263,4 @@ async function createForm() {
}
}
}
</style>

1
src/views/form/Answers.vue
View file

@ -61,6 +61,7 @@ onMounted(async () => {
v-if="questionsData[value.question_id].question_type === 1"
:label="questionsData[value.question_id].label"
:description="questionsData[value.question_id].description"
:textarea="questionsData[value.question_id].textarea"
v-model="value.value"
/>
<SelectorValue

1
src/views/form/Edit.vue
View file

@ -125,6 +125,7 @@ onMounted(async () => {
:label="element.label"
:description="element.description"
:required="element.required"
:textarea="element.textarea"
/>
<SelectorPreview
v-if="element.question_type === 2"

10
src/views/form/View.vue
View file

@ -18,7 +18,7 @@ const data = ref({})
const currentPageNumber = ref(0)
const pageCount = ref(0)
const currentPage = ref({})
const answers = ref([])
const answers = ref({})
const isFormNotFound = ref(true)
const isSent = ref(false)
@ -29,7 +29,9 @@ async function prepareNewPage() {
currentPage.value.questions.forEach((q) => {
answers.value[q.id] = {
question_id: q.id,
question_type: q.question_type
question_type: q.question_type,
value: null,
values: null
}
})
}
@ -120,6 +122,7 @@ onMounted(async () => {
<div class="view-form-q view-form-container">
<div v-for="question in currentPage.questions">
<TextQuestion
:key="question.id"
v-if="question.question_type === 1"
:label="question.label"
:description="question.description"
@ -128,11 +131,13 @@ onMounted(async () => {
:maxLength="question.max_length"
:validator="question.validator"
:isRequired="question.required"
:isTextarea="question.textarea"
:isEmpty="emptyQuestions[question.id]"
v-model="answers[question.id].value"
@input="answers[question.id].value = $event"
/>
<SelectorQuestion
:key="question.id"
v-if="question.question_type === 2"
:label="question.label"
:description="question.description"
@ -146,6 +151,7 @@ onMounted(async () => {
@input="answers[question.id].values = $event"
/>
<Scale
:key="question.id"
v-if="question.question_type === 3"
:label="question.label"
:description="question.description"