22 <q-card
33 flat
44 bordered
5- class =" bg-formcard q-pa-md"
5+ v-bind: class" [' bg-formcard', ' q-pa-md', authorErrors.hasError ? 'red-border' : ''] "
66 >
77 <div class =" row"
88 <q-input
1414 standout
1515 title =" The person's given names."
1616 v-bind:model-value =" givenNames"
17- v-bind:rules =" [validateGivenNames]"
17+ v-bind:error =" givenNamesError.hasError"
18+ v-bind:error-message =" givenNamesError.messages.join(', ')"
1819 v-on:update:modelValue =" $emit('update', 'givenNames', $event)"
1920 />
2021 </div >
2829 standout
2930 title =" The person's name particle, e.g., a nobiliary particle or a [preposition] meaning 'of' or 'from' (for example 'von' in 'Alexander von Humboldt')."
3031 v-bind:model-value =" nameParticle"
31- v-bind:rules =" [validateNameParticle]"
32+ v-bind:error =" nameParticleError.hasError"
33+ v-bind:error-message =" nameParticleError.messages.join(', ')"
3234 v-on:update:modelValue =" $emit('update', 'nameParticle', $event)"
3335 />
3436 <q-input
4042 standout
4143 title =" The person's family names."
4244 v-bind:model-value =" familyNames"
43- v-bind:rules =" [validateFamilyNames]"
45+ v-bind:error =" familyNamesError.hasError"
46+ v-bind:error-message =" familyNamesError.messages.join(', ')"
4447 v-on:update:modelValue =" $emit('update', 'familyNames', $event)"
4548 />
4649 <q-input
5255 standout
5356 title =" The person's name suffix, e.g. 'Jr.' for Sammy Davis Jr. or 'III' for Frank Edwin Wright III."
5457 v-bind:model-value =" nameSuffix"
55- v-bind:rules =" [validateNameSuffix]"
58+ v-bind:error =" nameSuffixError.hasError"
59+ v-bind:error-message =" nameSuffixError.messages.join(', ')"
5660 v-on:update:modelValue =" $emit('update', 'nameSuffix', $event)"
5761 />
5862 </div >
6771 title =" The person's email address."
6872 type =" email"
6973 v-bind:model-value =" email"
70- v-bind:rules =" [validateEmail]"
74+ v-bind:error =" emailError.hasError"
75+ v-bind:error-message =" emailError.messages.join(', ')"
7176 v-on:update:modelValue =" $emit('update', 'email', $event)"
7277 />
7378 </div >
8186 standout
8287 title =" The person's affiliation."
8388 v-bind:model-value =" affiliation"
84- v-bind:rules =" [validateAffiliation]"
89+ v-bind:error =" affiliationError.hasError"
90+ v-bind:error-message =" affiliationError.messages.join(', ')"
8591 v-on:update:modelValue =" $emit('update', 'affiliation', $event)"
8692 />
8793 <q-input
9399 standout
94100 title =" The person's ORCID identifier."
95101 v-bind:model-value =" orcid"
96- v-bind:rules =" [ validateOrcid ]"
102+ v-bind:error =" orcidError.hasError"
103+ v-bind:error-message =" orcidError.messages.join(', ')"
97104 v-on:update:modelValue =" $emit('update', 'orcid', $event)"
98105 />
99106 </div >
107+
108+ <q-banner
109+ v-if =" authorErrors.hasError && authorErrors.messages.length > 0"
110+ class =" bg-warning text-negative"
111+ >
112+ <div
113+ v-bind:key =" authindex"
114+ v-for =" (screenMessage, authindex) in authorErrors.messages"
115+ >
116+ {{ screenMessage }}
117+ </div >
118+ </q-banner >
119+
100120 <q-card-actions align =" right"
101121 <q-btn
102122 color =" blue"
132152</template >
133153
134154<script lang="ts">
135- import { defineComponent } from ' vue'
136- import { makeOptionalFieldValidator } from ' ../validator'
155+ /* eslint-disable @typescript-eslint/restrict-template-expressions */
156+ import { computed , defineComponent } from ' vue'
157+ import { getMyErrors } from ' src/store/validator'
158+ import { authorErrors } from ' src/author-errors'
137159
138160export default defineComponent ({
139161 name: ' AuthorCardEditing'
@@ -150,23 +172,23 @@ export default defineComponent({
150172 type: String ,
151173 default: ' '
152174 },
153- nameSuffix : {
175+ familyNames : {
154176 type: String ,
155177 default: ' '
156178 },
157- orcid : {
179+ nameSuffix : {
158180 type: String ,
159181 default: ' '
160182 },
161- familyNames : {
183+ email : {
162184 type: String ,
163185 default: ' '
164186 },
165187 affiliation: {
166188 type: String ,
167189 default: ' '
168190 },
169- email : {
191+ orcid : {
170192 type: String ,
171193 default: ' '
172194 },
@@ -175,15 +197,16 @@ export default defineComponent({
175197 default: 0
176198 }
177199 },
178- setup () {
200+ setup (props ) {
179201 return {
180- validateGivenNames: makeOptionalFieldValidator (' /definitions/person/properties/given-names'
181- validateNameParticle: makeOptionalFieldValidator (' /definitions/person/properties/name-particle'
182- validateNameSuffix: makeOptionalFieldValidator (' /definitions/person/properties/name-suffix'
183- validateFamilyNames: makeOptionalFieldValidator (' /definitions/person/properties/family-names'
184- validateAffiliation: makeOptionalFieldValidator (' /definitions/person/properties/affiliation'
185- validateEmail: makeOptionalFieldValidator (' /definitions/person/properties/email'
186- validateOrcid: makeOptionalFieldValidator (' /definitions/person/properties/orcid' // or /definitions/orcid ?
202+ givenNamesError: computed (() => getMyErrors (` /authors/${props .index }/given-names ` )),
203+ nameParticleError: computed (() => getMyErrors (` /authors/${props .index }/name-particle ` )),
204+ familyNamesError: computed (() => getMyErrors (` /authors/${props .index }/family-names ` )),
205+ nameSuffixError: computed (() => getMyErrors (` /authors/${props .index }/name-suffix ` )),
206+ emailError: computed (() => getMyErrors (` /authors/${props .index }/email ` )),
207+ affiliationError: computed (() => getMyErrors (` /authors/${props .index }/affiliation ` )),
208+ orcidError: computed (() => getMyErrors (` /authors/${props .index }/orcid ` )),
209+ authorErrors: computed (() => authorErrors (props .index ))
187210 }
188211 },
189212 emits: [' closePressed' ' removePressed' ' update' ' moveUp' ' moveDown'
0 commit comments