Skip to content

Commit

Permalink
Feature/1040 application form improvements (#1073)
Browse files Browse the repository at this point in the history 
* rename task title

* add type to formatDate

* remove gaps in employment from task list

* update experience form

* fix bugs

* order experiences by date

* tidy up

* add quasi-judicial hint

* fix submit form

* update wording

* add hint

* add hint

* make details mandatory

* check if end date not beore start date

* check if end date not before start date

* add label hidden as props to checkbox

* add details page

* check if non negative number

* tidy up

* tidy up task list

* check if application version 3

* fix bugs

* tidy up

* fix bugs

* add ongoing tick to DateInput

* check if non negative number

* tidy up

* fix DateInput

* fix bugs

* fix bug

* add law-related tasks to gap in employment

* update text

* remove type and add comments

* fix bugs

* fix summary

* rename variable

* update wording

* update welsh.json

* Add missing translations and update page titles

* update welsh.json

* tidy up
  • Loading branch information
@HalcyonJAC
HalcyonJAC authored Nov 22, 2023
1 parent bd16a20 commit 4b82d17
Show file tree
Hide file tree
Showing 17 changed files with 936 additions and 86 deletions.
33 changes: 32 additions & 1 deletion src/assets/welsh.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -370,8 +370,10 @@
"Start date": "Dyddiad cychwyn",
"Please enter a value for Start date": "Rhowch werth ar gyfer y Dyddiad cychwyn",
"End date": "Dyddiad gorffen",
"Please enter a value for End date": "Rhowch werth ar gyfer y Dyddiad gorffen",
"Leave this blank if you're currently in this role.": "Gadewch hwn yn wag os ydych chi yn y swydd hon ar hyn o bryd.",
"Law-related tasks in this role": "Tasgau sy’n ymwneud â’r gyfraith yn y swydd hon",
"Please enter a value for Law-related tasks in this role": "Rhowch werth ar gyfer y Tasgau sy’n ymwneud â’r gyfraith yn y swydd hon",
"Select at least one task you do in this role": "Dewiswch o leiaf un dasg rydych chi’n ei gwneud yn y swydd hon",
"Select all tasks you do in this role. These are defined in the": "Dewiswch bob tasg rydych chi’n ei gwneud yn y swydd hon. Mae’r rhain wedi’u diffinio yn",
"Tribunals, Courts and Enforcement Act 2007.": "Neddf Tribiwnlysoedd, Llysoedd a Gorfodaeth 2007.",
Expand Down Expand Up @@ -712,5 +714,34 @@
"Members of the Judicial Appointments Commission (JAC) come from a wide background to ensure the Commission has a breadth of knowledge, expertise and independence.": "Mae Aelodau’r Comisiwn Penodiadau Barnwrol (JAC) yn dod o amrywiaeth eang o gefndiroedd i sicrhau bod gan y Comisiwn wybodaeth, profiad ac annibyniaeth eang.",
"Are you related to, or known to any of the JAC Commissioners? If you are in any doubt then please select 'Yes' in the list below:": "Ydych chi’n perthyn i unrhyw un o Gomisiynwyr y JAC neu a ydynt yn gwybod pwy ydych chi? Os oes gennych unrhyw amheuon dewiswch ‘Ydw’ yn y rhestr isod:",
"Please provide details of your relationship.": "Rhowch fanylion eich perthynas.",
"I do not have a pre-existing relationship with any of the commissioners": "Nid oes gennyf unrhyw fath o berthynas ag unrhyw un o’r comisiynwyr"
"I do not have a pre-existing relationship with any of the commissioners": "Nid oes gennyf unrhyw fath o berthynas ag unrhyw un o’r comisiynwyr",
"Post qualification experience": "Profiad ar ôl cymhwyso",
"Career history - post qualification experience": "Hanes gyrfa - profiad ar ôl gymhwyso",
"Starting with your most recent appointment and working back, provide details of your career to date, including all judicial and quasi-judicial appointments and any gaps in employment.": "Gan ddechrau gyda’ch penodiad diweddaraf a gweithio’n ôl, rhowch fanylion eich gyrfa hyd yma, gan gynnwys pob penodiad barnwrol a lled-farnwrol ac unrhyw fylchau mewn cyflogaeth.",
"Ongoing": "Parhaus",
"Judicial role sitting days": "Diwrnodau eistedd mewn rôl farnwrol",
"days": "diwrnod",
"Edit": "Golygu",
"Is this an appointment or a gap in employment?": "A yw hwn yn benodiad neu’n fwlch mewn cyflogaeth?",
"It is an appointment.": "Mae’n benodiad.",
"It is a gap in employment.": "Mae’n fwlch mewn cyflogaeth.",
"or": "neu",
"Tick if still ongoing": "Ticiwch os yw’n dal i barhau",
"Save": "Cadw",
"Is this a judicial or quasi-judicial post?": "A yw hon yn swydd farnwrol neu led-farnwrol?",
"Please enter a value for Is this a judicial or quasi-judicial post?": "Rhowch werth ar gyfer y A yw hon yn swydd farnwrol neu led-farnwrol",
"Quasi-judicial refers to a role similar to that of a judge, such as the chair of an equivalent body for which a legal qualification is required. An equivalent body is one of a quasi-judicial nature for which the powers and procedures should resemble those of a court of law and involve highly complex matters, requiring its members objectively to determine the facts and draw conclusions to reach a reasoned decision. Such decisions could result in the imposition of a penalty, and they are likely to affect the legal rights, duties or privileges of specific parties. Examples could include, but are not restricted to, disciplinary tribunals and conduct hearings for professional standards bodies, the parole board, arbitration and chairs of statutory inquiries.": "Mae lled-farnwrol yn golygu rôl debyg i rôl barnwr, fel cadeirydd corff cyfatebol y mae angen cymhwyster cyfreithiol ar ei gyfer. Mae corff cyfatebol yn un lled-farnwrol, sydd â phwerau a gweithdrefnau tebyg i bwerau llys barn ac sy'n ymwneud â materion cymhleth iawn, sy’n golygu ei fod yn ofynnol i'w aelodau benderfynu’n wrthrychol ar y ffeithiau a dod i gasgliadau er mwyn dod i benderfyniad rhesymegol. Gallai penderfyniadau o'r fath arwain at orfodi cosb, ac maent yn debygol o effeithio ar hawliau, dyletswyddau neu freintiau cyfreithiol partïon penodol. Gallai enghreifftiau gynnwys tribiwnlysoedd disgyblu a gwrandawiadau ymddygiad ar gyfer cyrff safonau proffesiynol, y bwrdd parôl, cyflafareddu a chadeiryddion ymchwiliadau statudol ond nid yw’r rhestr hon yn cynnwys popeth.",
"Judicial": "Barnwrol",
"Quasi-judicial": "Lled-farnwrol",
"How many sitting days have you accumulated in this post?": "Sawl diwrnod eistedd ydych chi wedi’u cronni yn y swydd hon?",
"Please enter a value for How many sitting days have you accumulated in this post?": "Rhowch werth ar gyfer y Sawl diwrnod eistedd ydych chi wedi’u cronni yn y swydd hon",
"Is a legal qualification a requisite for appointment?": "A yw cymhwyster cyfreithiol yn angenrheidiol ar gyfer y penodiad?",
"Only numerical digits can be input into the sitting days field. If the number of days is 100 or more, an approximate figure will suffice.": "Dim ond cyfanrifau positif gellir eu rhoi yn y maes diwrnodau eistedd. Os yw’r nifer o ddiwrnodau’n 100 neu’n fwy, bydd ffigur bras yn ddigon.",
"Please enter a value for Is a legal qualification a requisite for appointment?": "Rhowch werth ar gyfer y A yw cymhwyster cyfreithiol yn angenrheidiol ar gyfer y penodiad",
"Please outline the powers, procedures and main responsibilities": "Amlinellwch y pwerau, y gweithdrefnau a’r prif gyfrifoldebau",
"Gap in Employment": "Bwlch mewn Cyflogaeth",
"You have indicated that you have": "Rydych wedi nodi bod gennych gyfanswm o",
"sitting days in total.": "diwrnod eistedd.",
"As you have indicated you have less than": "Gan eich bod wedi nodi bod gennych lai na",
"sitting days across all judicial and/or quasi-judicial appointments, please provide details of how you have acquired the necessary skills for this role in some other significant way.": "o ddiwrnodau eistedd ar draws pob penodiad barnwrol a/neu led-farnwrol, rhowch fanylion am sut rydych wedi ennill y sgiliau angenrheidiol ar gyfer y rôl hon mewn rhyw ffordd arwyddocaol arall."
}
6 changes: 5 additions & 1 deletion src/components/Form/Checkbox.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
>
<label
:for="id"
class="govuk-heading-m govuk-!-margin-bottom-2"
:class="labelHidden ? 'govuk-visually-hidden' : 'govuk-heading-m govuk-!-margin-bottom-2'"
>
{{ label }}
</label>
Expand Down Expand Up @@ -68,6 +68,10 @@ export default {
required: false,
default: false,
},
labelHidden: {
default: false,
type: Boolean,
},
},
emits: ['update:modelValue'],
computed: {
Expand Down
154 changes: 102 additions & 52 deletions src/components/Form/DateInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,62 +47,86 @@
:id="id"
class="govuk-date-input"
>
<div
v-if="type === 'date'"
class="govuk-date-input__item"
>
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
:for="`${id}-day`"
>
Day
</label>
<input
:id="`${id}-day`"
ref="dayInput"
v-model.lazy="dayInput"
class="govuk-input govuk-date-input__input govuk-input--width-2"
type="number"
@input="changeDay"
>
<template v-if="!isOngoingInput">
<div
v-if="type === 'date'"
class="govuk-date-input__item"
>
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
:for="`${id}-day`"
>
Day
</label>
<input
:id="`${id}-day`"
ref="dayInput"
v-model.lazy="dayInput"
class="govuk-input govuk-date-input__input govuk-input--width-2"
type="number"
@input="changeDay"
>
</div>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
:for="`${id}-month`"
>
Month
</label>
<input
:id="`${id}-month`"
ref="monthInput"
v-model.lazy="monthInput"
class="govuk-input govuk-date-input__input govuk-input--width-2"
type="number"
@input="changeMonth"
>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
:for="`${id}-month`"
>
Month
</label>
<input
:id="`${id}-month`"
ref="monthInput"
v-model.lazy="monthInput"
class="govuk-input govuk-date-input__input govuk-input--width-2"
type="number"
@input="changeMonth"
>
</div>
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
:for="`${id}-year`"
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label
class="govuk-label govuk-date-input__label"
:for="`${id}-year`"
>
Year
</label>
<input
:id="`${id}-year`"
ref="yearInput"
v-model.lazy="yearInput"
class="govuk-input govuk-date-input__input govuk-input--width-4"
type="number"
>
</div>
</div>

<div class="govuk-date-input__item">
<p
v-if="ongoingVisible"
class="govuk-body"
>
Year
</label>
<input
:id="`${id}-year`"
ref="yearInput"
v-model.lazy="yearInput"
class="govuk-input govuk-date-input__input govuk-input--width-4"
type="number"
or
</p>
</div>
</template>

<template v-if="ongoingVisible">
<div class="govuk-date-input__item">
<Checkbox
:id="`${id}-ongoing`"
v-model.lazy="isOngoingInput"
label="End date"
:label-hidden="true"
>
Tick if still ongoing
</Checkbox>
</div>
</div>
</template>
</div>
</fieldset>
</div>
Expand All @@ -113,6 +137,7 @@ import parseAndClipNumber from '@/helpers/Form/parseAndClipNumber';
import { validateYear } from '@/helpers/date';
import zeroPad from '@/helpers/Form/zeroPad';
import FormField from '@/components/Form/FormField.vue';
import Checkbox from '@/components/Form/Checkbox.vue';
import FormFieldError from '@/components/Form/FormFieldError.vue';
export default {
Expand All @@ -123,6 +148,7 @@ export default {
},
name: 'DateInput',
components: {
Checkbox,
FormFieldError,
},
extends: FormField,
Expand All @@ -147,8 +173,16 @@ export default {
default: false,
type: Boolean,
},
ongoingVisible: {
default: false,
type: Boolean,
},
isOngoing: {
default: false,
type: Boolean,
},
},
emits: ['update:modelValue'],
emits: ['update:modelValue', 'update:isOngoing'],
data() {
return {
day: null,
Expand Down Expand Up @@ -181,6 +215,19 @@ export default {
this.year = validateYear(value);
},
},
isOngoingInput: {
get() {
return this.isOngoing;
},
set(value) {
if (value) {
this.day = null;
this.month = null;
this.year = null;
}
this.$emit('update:isOngoing', value);
},
},
dateConstructor() {
const day = this.type === 'month' ? 1 : this.day;
const month = this.month;
Expand Down Expand Up @@ -211,6 +258,9 @@ export default {
},
watch: {
date(value) {
if (value) {
this.$emit('update:isOngoing', false);
}
this.$emit('update:modelValue', value);
},
modelValue(newValue, oldValue) {
Expand Down
6 changes: 3 additions & 3 deletions src/components/Form/FormField.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ export default {
value = event.target.value;
}
if (this.required && ((value === null || value === undefined || value.length === 0) || (typeof value === 'string' && value.replace(/\s/g, '').length === 0))) {
if (this.required && !this.isOngoing && ((value === null || value === undefined || value.length === 0) || (typeof value === 'string' && value.replace(/\s/g, '').length === 0))) {
if (this.messages && this.messages.required) {
this.setError(this.messages.required);
} else {
Expand All @@ -132,7 +132,7 @@ export default {
}
}
if (this.type && this.type === 'date' && value) {
if (this.type && ['month', 'date'].includes(this.type) && value) {
if (this.maxDate && (value > (this.maxDate))) {
this.setError(`Enter a date before ${formatDate(this.maxDate)} for ${this.label}`);
}
Expand All @@ -148,7 +148,7 @@ export default {
}
}
if (this.type && this.type === 'number' && value && this.numMax) {
if (this.type && ['number', 'non-negative-number'].includes(this.type) && value && this.numMax) {
if (value > this.numMax) {
this.setError(`Please enter a number lower than ${this.numMax}`);
}
Expand Down
11 changes: 11 additions & 0 deletions src/components/Form/TextField.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
:max="numMax"
:autocomplete="autocomplete"
@change="validate"
@keydown="keydown"
>
</div>
</template>
Expand Down Expand Up @@ -104,6 +105,7 @@ export default {
switch (this.type) {
case 'number':
case 'non-negative-number':
this.$emit('update:modelValue', val ? parseFloat(val) : '');
break;
default:
Expand All @@ -125,6 +127,8 @@ export default {
case 'text':
case 'email':
return 'text'; // we are using custom email validation, so don't use html5 input types
case 'non-negative-number':
return 'number';
default:
return this.type;
}
Expand Down Expand Up @@ -154,6 +158,13 @@ export default {
}
return false;
},
keydown(event) {
if (this.type === 'non-negative-number') {
if (['e', 'E', '+', '-', '.'].includes(event.key)) {
event.preventDefault();
}
}
},
},
};
</script>
Loading

0 comments on commit 4b82d17

Please sign in to comment.