Skip to content

Commit

Permalink
ui: Update styling of donation agreement radio buttons; fix: Check wh…
Browse files Browse the repository at this point in the history
…ether donation question has been answered for combined donation agree has been fixed.
  • Loading branch information
Nico-AP committed Feb 7, 2025
1 parent 6cf80c6 commit f9ff9e0
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 27 deletions.
105 changes: 82 additions & 23 deletions frontend/UploaderApp/src/components/FileUploader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -203,20 +203,39 @@
<div class="row">
<div class="col feedback-col pb-5 pt-1">
<p class="fw-bold">{{ $t('donation-question') }}</p>
<div class="consent-question-container">
<div class="question-choice-item pt-3 pt-lg-0">
<label class="form-check-label rb-cb-label" :for="'donate-agree-'+bp.id.toString()">
<input type="radio" :id="'donate-agree-'+bp.id.toString()" :name="'agreement-'+bp.id.toString()" value="true" v-model="blueprintData[bp.id.toString()].consent" @change="emitToParent" required>
{{ $t('donation-agree') }}
</label>
</div>
<div class="question-choice-item pt-3 pt-lg-0">
<label class="form-check-label rb-cb-label" :for="'donate-disagree-'+bp.id.toString()">
<input type="radio" :id="'donate-disagree-'+bp.id.toString()" :name="'agreement-'+bp.id.toString()" value="false" v-model="blueprintData[bp.id.toString()].consent" @change="emitToParent">
{{ $t('donation-disagree') }}
</label>
<div class="consent-question-container">

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio"
class="btn-check"
:id="'donate-agree-'+bp.id.toString()"
:name="'agreement-'+bp.id.toString()"
value="true"
autocomplete="off"
v-model="blueprintData[bp.id.toString()].consent"
@change="emitToParent"
required>
<label :class="{ 'selected-donate-agree': blueprintData[bp.id.toString()].consent === 'true' }"
:for="'donate-agree-'+bp.id.toString()"
class="form-check-label rb-cb-label btn btn-light donation-btn shadow-none">
{{ $t('donation-agree') }}
</label>

<input type="radio"
class="btn-check"
:id="'donate-disagree-'+bp.id.toString()"
:name="'agreement-'+bp.id.toString()"
value="false"
autocomplete="off"
v-model="blueprintData[bp.id.toString()].consent"
@change="emitToParent">
<label :class="{ 'selected-donate-disagree': blueprintData[bp.id.toString()].consent === 'false' }"
:for="'donate-disagree-'+bp.id.toString()"
class="form-check-label rb-cb-label btn btn-light donation-btn shadow-none">
{{ $t('donation-disagree') }}
</label>
</div>
</div>
</div>
</div>
</div>
</template>
Expand Down Expand Up @@ -263,18 +282,36 @@
<div class="col feedback-col pb-5 pt-1">
<p class="fw-bold">{{ $t('donation-question') }}</p>
<div class="consent-question-container">
<div class="question-choice-item pt-3 pt-lg-0">
<label class="form-check-label rb-cb-label" for="combined-donate-agree">
<input type="radio" id="combined-donate-agree" value="true" v-model="combinedDonation" @change="emitToParent" required>

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio"
class="btn-check"
id="combined-donate-agree"
value="true"
autocomplete="off"
v-model="combinedDonation"
@change="emitToParent"
required>
<label :class="{ 'selected-donate-agree': combinedDonation === 'true' }"
class="form-check-label rb-cb-label btn btn-light donation-btn shadow-none"
for="combined-donate-agree">
{{ $t('donation-agree') }}
</label>
</div>
<div class="question-choice-item pt-3 pt-lg-0">
<label class="form-check-label rb-cb-label" for="combined-donate-disagree">
<input type="radio" id="combined-donate-disagree" value="false" v-model="combinedDonation" @change="emitToParent">

<input type="radio"
class="btn-check"
id="combined-donate-disagree"
value="false"
autocomplete="off"
v-model="combinedDonation"
@change="emitToParent">
<label :class="{ 'selected-donate-disagree': combinedDonation === 'false' }"
class="form-check-label rb-cb-label btn btn-light donation-btn shadow-none"
for="combined-donate-disagree">
{{ $t('donation-disagree') }}
</label>
</div>

</div>
</div>
</div>
Expand Down Expand Up @@ -760,17 +797,20 @@ export default {
else if (dataToEmit[key].consent === 'false') {
dataToEmit[key].extracted_data = [];
dataToEmit[key].consent = false;
} else {
} else if (dataToEmit[key].consent === 'true') {
dataToEmit[key].consent = true;
}
})
} else {
let consent = this.combinedDonation;
Object.keys(dataToEmit).forEach(key => {
if (consent === 'false') {
if (consent === null) {
dataToEmit[key].consent = null;
dataToEmit[key].extracted_data = [];
} else if (consent === 'false') {
dataToEmit[key].consent = false;
dataToEmit[key].extracted_data = [];
} else {
} else if (consent === 'true') {
dataToEmit[key].consent = true;
}
})
Expand Down Expand Up @@ -1105,6 +1145,25 @@ export default {
vertical-align: middle;
}
.selected-donate-agree {
background: #069143 !important;
color: white !important;
font-weight: bold;
}
.selected-donate-disagree {
background: #f38896 !important;
font-weight: bold;
}
.donation-btn {
width: 120px;
color: #000;
background-color: #dfdfdf;
border: none;
margin: 5px;
}
@media (min-width: 576px) {}
@media (min-width: 768px) {
Expand Down
8 changes: 4 additions & 4 deletions frontend/UploaderApp/src/translations/uploader_app.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"en": {
"data-submit-wait": "Your data donation is being submitted. Please be patient for a moment and do not close this window.",
"next-btn-label": "Submit Data",
"data-submit-wait": "Your input is being processed. Please wait a moment.",
"next-btn-label": "Next",
"consent-error-msg": "You did not indicate for all uploads whether you consent to the donation of your data. Please go back and indicate whether you want to donate your data.",
"back-label": "back",
"cancel-label": "Cancel",
Expand All @@ -10,8 +10,8 @@
"status-info-msg-none-attempted": "You have not uploaded any data. Are you sure you want to continue?"
},
"de": {
"data-submit-wait": "Ihre Datenspende wird gerade übermittelt. Bitte haben Sie einen Moment Geduld und schliessen Sie dieses Fenster nicht.",
"next-btn-label": "Daten übermitteln",
"data-submit-wait": "Ihre Eingabe wird verarbeitet. Bitte haben Sie einen Moment Geduld.",
"next-btn-label": "Weiter",
"consent-error-msg": "Sie haben nicht bei allen Uploads angegeben, ob Sie mit der Spende Ihrer Daten einverstanden sind. Bitte gehen Sie zurück und geben Sie an, ob Sie mit der Spende Ihrer Daten einverstanden sind.",
"back-label": "zurück",
"continue-anyway-label": "Ja, trotzdem fortfahren",
Expand Down

0 comments on commit f9ff9e0

Please sign in to comment.