Skip to content

Commit

Permalink
bug fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@githubjimmeicatt
githubjimmeicatt committed Sep 13, 2023
1 parent 9949829 commit f1b49ec
Show file tree
Hide file tree
Showing 3 changed files with 150 additions and 85 deletions.
19 changes: 8 additions & 11 deletions src/features/contactverzoek/ContactverzoekFormulier.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
<label>
<input
type="radio"
name="isMedewerker"
value="false"
class="utrecht-radio-button utrecht-radio-button--html-input"
v-model="form.isMedewerker"
Expand All @@ -17,7 +16,6 @@
<label>
<input
type="radio"
name="isMedewerker"
value="true"
class="utrecht-radio-button utrecht-radio-button--html-input"
v-model="form.isMedewerker"
Expand Down Expand Up @@ -106,7 +104,7 @@
class="utrecht-select utrecht-select--html-select"
name="VragenSets"
v-model="form.vragenSetId"
@input="setActive"
@change="setOnderwerp"
>
<option value="" selected>Geen</option>
<option v-for="item in data" :key="item.id" :value="item.id">
Expand Down Expand Up @@ -303,14 +301,13 @@ const setActive = () => {
const telEl = ref<HTMLInputElement>();
const vragenSets = useVragenSets();
watch(
() => form.value.vragenSetId,
(vragenSetId) => {
if (!vragenSets.success) return;
const vragenSet = vragenSets.data.find((s) => s.id == vragenSetId);
form.value.contactVerzoekVragenSet = vragenSet;
},
);
const setOnderwerp = () => {
setActive();
if (!vragenSets.success) return;
const vragenSet = vragenSets.data.find((s) => s.id == form.value.vragenSetId);
form.value.contactVerzoekVragenSet = vragenSet;
};
watch(
() => form.value.isMedewerker,
Expand Down
1 change: 1 addition & 0 deletions src/stores/contactmoment/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ function initVraag(): Vraag {
emailadres: "",
interneToelichting: "",
isActive: false,
contactVerzoekVragenSet: undefined,
},
startdatum: new Date().toISOString(),
kanaal: "",
Expand Down
215 changes: 141 additions & 74 deletions src/views/Beheer/contactverzoek-formulieren/ContactverzoekFormulierBeheer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,11 +56,11 @@
</label>

<!-- Loop through vragen and render label and input field -->
<div v-for="(vraag, index) in vragen" :key="index">
<template v-for="(vraag, index) in vragen" :key="index">
<div class="question-container">
<div class="question-container-label utrecht-form-label">
<span
>Vraag {{ index + 1 }} - {{ setVraagTypeLabel(vraag.type) }} *</span
>Vraag {{ index + 1 }} - {{ setVraagTypeLabel(vraag.type) }}</span
>
</div>
<div class="question-container-button">
Expand All @@ -72,97 +72,125 @@
@click="removeVraag(vraag.id)"
/>
</div>
</div>

<!-- Conditional part for Input -->
<div
v-if="
isInputVraag(vraag) ||
isTextareaVraag(vraag) ||
isCheckboxVraag(vraag) ||
isDropdownVraag(vraag)
"
>
<input
class="utrecht-textbox utrecht-textbox--html-input"
required
type="text"
v-model="vraag.label"
placeholder="Vul hier een label voor de vraag in"
/>
</div>

<!-- Conditional part for Dropdown -->
<div v-if="isDropdownVraag(vraag)">
<label class="utrecht-form-label">
<span>Answer Options:</span>
</label>
<!-- Conditional part for Input -->
<div
v-for="(option, optionIndex) in vraag.options"
:key="optionIndex"
class="option-container"
style="width: 100%"
v-if="
isInputVraag(vraag) ||
isTextareaVraag(vraag) ||
isCheckboxVraag(vraag) ||
isDropdownVraag(vraag)
"
>
<input
class="utrecht-textbox utrecht-textbox--html-input"
required
type="text"
v-model="vraag.options[optionIndex]"
:placeholder="`Voeg hier optie ${optionIndex + 1} toe`"
v-model="vraag.label"
placeholder="Vul hier een label voor de vraag in"
/>
</div>
</div>
<!-- Conditional part for Dropdown -->
<div v-if="isDropdownVraag(vraag)">
<label>
<span>Antwoorden opties:</span>
</label>
<template
v-for="(option, optionIndex) in vraag.options"
:key="optionIndex"
>
<div
class="options-button-wrapper"
v-on:mouseenter="showTrashButton(vraag.id, optionIndex)"
v-on:mouseleave="hideTrashButton(vraag.id, optionIndex)"
>
<div class="options-wrapper">
<input
class="utrecht-textbox utrecht-textbox--html-input"
required
type="text"
v-model="vraag.options[optionIndex]"
:placeholder="`Voeg hier optie ${optionIndex + 1} toe`"
/>
</div>
<div
v-if="hoverId === vraag.id && hoverIndex === optionIndex"
class="button-wrapper"
>
<utrecht-button
appearance="secondary-action-button"
class="icon icon-after trash icon-only"
:title="`Verwijder optie ${optionIndex + 1}`"
type="button"
@click="removeOption(vraag.id, optionIndex)"
/>
</div>
</div>
</template>
<div class="option-button-wrapper">
<utrecht-button
appearance="secondary-action-button"
class="icon icon-after trash icon-only"
:title="`Verwijder optie ${optionIndex + 1}`"
class="icon icon-after plus"
title="Antwoordoptie Toevoegen"
type="button"
@click="removeOption(vraag.id, optionIndex)"
/>
@click="addOption(vraag.id)"
>
Antwoordoptie Toevoegen
</utrecht-button>
</div>
<utrecht-button
appearance="secondary-action-button"
class="icon icon-after plus"
title="Antwoordoptie Toevoegen"
type="button"
@click="addOption(vraag.id)"
>
Antwoordoptie Toevoegen
</utrecht-button>
</div>
<!-- Conditional part for checkbox -->
<div v-if="isCheckboxVraag(vraag)">
<label class="utrecht-form-label">
<label>
<span>Answer Options:</span>
</label>
<div
<template
v-for="(option, optionIndex) in vraag.options"
:key="optionIndex"
class="option-container"
>
<input
class="utrecht-textbox utrecht-textbox--html-input"
required
type="text"
v-model="vraag.options[optionIndex]"
:placeholder="`Voeg hier optie ${optionIndex + 1} toe`"
/>
<div
class="options-button-wrapper"
v-on:mouseenter="showTrashButton(vraag.id, optionIndex)"
v-on:mouseleave="hideTrashButton(vraag.id, optionIndex)"
>
<div class="options-wrapper">
<input
class="utrecht-textbox utrecht-textbox--html-input"
required
type="text"
v-model="vraag.options[optionIndex]"
:placeholder="`Voeg hier optie ${optionIndex + 1} toe`"
/>
</div>
<div
v-if="hoverId === vraag.id && hoverIndex === optionIndex"
class="button-wrapper"
>
<utrecht-button
appearance="secondary-action-button"
class="icon icon-after trash icon-only"
:title="`Verwijder optie ${optionIndex + 1}`"
type="button"
@click="removeOption(vraag.id, optionIndex)"
/>
</div>
</div>
</template>
<div class="option-button-wrapper">
<utrecht-button
appearance="secondary-action-button"
class="icon icon-after trash icon-only"
:title="`Verwijder optie ${optionIndex + 1}`"
class="icon icon-after plus"
title="Label Toevoegen"
type="button"
@click="removeOption(vraag.id, optionIndex)"
/>
@click="addOption(vraag.id)"
>
Antwoordoptie Toevoegen
</utrecht-button>
</div>
<utrecht-button
appearance="secondary-action-button"
class="icon icon-after plus"
title="Label Toevoegen"
type="button"
@click="addOption(vraag.id)"
>
Antwoordoptie Toevoegen
</utrecht-button>
</div>
</div>
</template>
<!-- Dropdown for vraag -->
<label class="utrecht-form-label">
<span>Vraag toevoegen</span>
Expand Down Expand Up @@ -245,6 +273,20 @@ type CheckboxVraag = Vraag & {
options: string[];
};
const hoverIndex = ref(-1);
const hoverId = ref(-1);
const showTrashButton = (id: number, index: number) => {
hoverIndex.value = index;
hoverId.value = id;
};
const hideTrashButton = (id: number, index: number) => {
if (hoverIndex.value === index && hoverId.value === id) {
hoverIndex.value = -1;
hoverId.value = -1;
}
};
const vragen = ref<Vraag[]>([]);
const selectedVraag = ref("Vraag toevoegen");
Expand Down Expand Up @@ -436,17 +478,12 @@ label > span {
}
.question-container {
flex-wrap: wrap;
display: flex;
align-items: center;
justify-content: space-between;
}
.option-container {
display: flex;
align-items: center;
gap: 1rem;
}
.container {
display: flex;
flex-direction: column;
Expand All @@ -459,4 +496,34 @@ menu {
gap: var(--spacing-default);
justify-content: flex-end;
}
.question-container-button {
width: 65%;
}
.options-button-wrapper {
width: 105%;
display: flex;
align-items: center;
position: relative;
}
.options-wrapper {
width: 95%;
margin-bottom: 0.5rem;
}
.button-wrapper {
position: absolute;
right: 0;
}
.utrecht-button {
all: unset !important;
}
.option-button-wrapper {
text-align: right;
text-decoration: underline;
}
</style>

0 comments on commit f1b49ec

Please sign in to comment.