Skip to content

Commit 7c7f852

Browse files
fdiblenfdiblen
authored
Merge pull request #686 from citation-file-format/655-autors-info-dialog
move lastname i icons outside
2 parents e7fb6e5 + 5352f1d commit 7c7f852

3 files changed

Lines changed: 215 additions & 40 deletions

File tree

‎src/components/AuthorCardEditing.vue‎

Lines changed: 155 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,13 @@
77
<div class="row">
88
<h3 class="subquestion">
99
The person's given names
10-
<SchemaGuideLink anchor="#definitionspersongiven-names" />
10+
<q-icon
11+
name="ion-information-circle-outline"
12+
size="24px"
13+
color="primary"
14+
v-on:click="showHelpDialogName = true"
15+
style="cursor:pointer;"
16+
/>
1117
</h3>
1218
</div>
1319
<div class="row">
@@ -29,6 +35,13 @@
2935
<div class="row">
3036
<h3 class="subquestion">
3137
The person's last names, split into parts
38+
<q-icon
39+
name="ion-information-circle-outline"
40+
size="24px"
41+
color="primary"
42+
v-on:click="showHelpDialogLastName = true"
43+
style="cursor:pointer;"
44+
/>
3245
</h3>
3346
</div>
3447
<div class="row">
@@ -44,12 +57,7 @@
4457
v-bind:error="false"
4558
v-bind:error-message="''"
4659
v-on:update:modelValue="$emit('update', 'nameParticle', $event)"
47-
>
48-
<SchemaGuideLink
49-
anchor="#definitionspersonname-particle"
50-
class="q-pt-sm"
51-
/>
52-
</q-input>
60+
/>
5361
<q-input
5462
bg-color="white"
5563
class="col"
@@ -62,12 +70,7 @@
6270
v-bind:error="false"
6371
v-bind:error-message="''"
6472
v-on:update:modelValue="$emit('update', 'familyNames', $event)"
65-
>
66-
<SchemaGuideLink
67-
anchor="#definitionspersonfamily-names"
68-
class="q-pt-sm"
69-
/>
70-
</q-input>
73+
/>
7174
<q-input
7275
bg-color="white"
7376
class="col-3"
@@ -80,17 +83,18 @@
8083
v-bind:error="false"
8184
v-bind:error-message="''"
8285
v-on:update:modelValue="$emit('update', 'nameSuffix', $event)"
83-
>
84-
<SchemaGuideLink
85-
anchor="#definitionspersonname-suffix"
86-
class="q-pt-sm"
87-
/>
88-
</q-input>
86+
/>
8987
</div>
9088
<div class="row">
9189
<h3 class="subquestion">
9290
The person's email address
93-
<SchemaGuideLink anchor="#definitionspersonemail" />
91+
<q-icon
92+
name="ion-information-circle-outline"
93+
size="24px"
94+
color="primary"
95+
v-on:click="showHelpDialogEmail = true"
96+
style="cursor:pointer;"
97+
/>
9498
</h3>
9599
</div>
96100
<div class="row">
@@ -113,11 +117,23 @@
113117
<div class="row">
114118
<h3 class="subquestion col">
115119
The person's affiliation
116-
<SchemaGuideLink anchor="#definitionspersonaffiliation" />
120+
<q-icon
121+
name="ion-information-circle-outline"
122+
size="24px"
123+
color="primary"
124+
v-on:click="showHelpDialogAffiliation = true"
125+
style="cursor:pointer;"
126+
/>
117127
</h3>
118128
<h3 class="subquestion col">
119129
The person's ORCID
120-
<SchemaGuideLink anchor="#definitionspersonorcid" />
130+
<q-icon
131+
name="ion-information-circle-outline"
132+
size="24px"
133+
color="primary"
134+
v-on:click="showHelpDialogOrcid = true"
135+
style="cursor:pointer;"
136+
/>
121137
</h3>
122138
</div>
123139
<div class="row">
@@ -139,6 +155,7 @@
139155
class="col"
140156
dense
141157
hint="Format: https://orcid.org/0000-0000-0000-0000"
158+
label="orcid"
142159
mask="https://orcid.org/####-####-####-###X"
143160
outlined
144161
standout
@@ -168,17 +185,40 @@
168185
/>
169186
</q-card-actions>
170187
</q-card>
188+
<InfoDialog
189+
v-model="showHelpDialogName"
190+
v-bind:data="helpData.name"
191+
/>
192+
<InfoDialog
193+
v-model="showHelpDialogLastName"
194+
v-bind:data="helpData.lastName"
195+
/>
196+
<InfoDialog
197+
v-model="showHelpDialogEmail"
198+
v-bind:data="helpData.email"
199+
/>
200+
<InfoDialog
201+
v-model="showHelpDialogAffiliation"
202+
v-bind:data="helpData.affiliation"
203+
/>
204+
<InfoDialog
205+
v-model="showHelpDialogOrcid"
206+
v-bind:data="helpData.orcid"
207+
/>
171208
</template>
172209

173210
<script lang="ts">
174211
import { byError, emailQueries, orcidQueries } from 'src/error-filtering'
175-
import { computed, defineComponent, onUpdated } from 'vue'
176-
import SchemaGuideLink from 'src/components/SchemaGuideLink.vue'
212+
import { computed, defineComponent, onUpdated, ref } from 'vue'
213+
import InfoDialog from 'components/InfoDialog.vue'
177214
import { useStepperErrors } from 'src/store/stepper-errors'
178215
import { useValidation } from 'src/store/validation'
179216
180217
export default defineComponent({
181218
name: 'AuthorCardEditing',
219+
components: {
220+
InfoDialog
221+
},
182222
props: {
183223
index: {
184224
type: Number,
@@ -229,13 +269,101 @@ export default defineComponent({
229269
.filter(byError(errors.value))
230270
.map(query => query.replace.message)
231271
})
272+
const helpData = {
273+
name: {
274+
title: 'given-names',
275+
url: [
276+
{
277+
text: 'Click here to see the documentation for name.',
278+
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersongiven-names'
279+
}
280+
],
281+
description: 'The person\'s given names.',
282+
examples: [
283+
'Jane',
284+
'John'
285+
]
286+
},
287+
lastName: {
288+
title: 'name-particle, family-names, name-suffix',
289+
url: [
290+
{
291+
text: 'Click here to see the documentation for name particle.',
292+
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonname-particle'
293+
},
294+
{
295+
text: 'Click here to see the documentation for family name.',
296+
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonfamily-names'
297+
},
298+
{
299+
text: 'Click here to see the documentation for name suffix.',
300+
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonname-suffix'
301+
}
302+
],
303+
description: 'The person\'s last names, split into parts.',
304+
examples: [
305+
'name particle: von',
306+
'family name: Doe',
307+
'name suffix: Jr.'
308+
]
309+
},
310+
email: {
311+
title: 'email',
312+
url: [
313+
{
314+
text: 'Click here to see the documentation for email.',
315+
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonemail'
316+
}
317+
],
318+
description: 'The person\'s email address.',
319+
examples: [
320+
'mail@research-project.org'
321+
]
322+
},
323+
affiliation: {
324+
title: 'affiliation',
325+
url: [
326+
{
327+
text: 'Click here to see the documentation for affiliation.',
328+
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonaffiliation'
329+
}
330+
],
331+
description: 'The person\'s affiliation.',
332+
examples: [
333+
'Netherlands eScience Center',
334+
'German Aerospace Center (DLR)'
335+
]
336+
},
337+
orcid: {
338+
title: 'orcid',
339+
url: [
340+
{
341+
text: 'Click here to see the documentation for orcid.',
342+
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonorcid'
343+
},
344+
{
345+
text: 'https://orcid.org',
346+
link: 'https://orcid.org'
347+
}
348+
],
349+
description: 'The person\'s ORCID identifier.',
350+
examples: [
351+
'https://orcid.org/0000-0003-4925-7248'
352+
]
353+
}
354+
}
232355
return {
233356
emailErrors,
234-
orcidErrors
357+
helpData,
358+
orcidErrors,
359+
showHelpDialogLastName: ref(false),
360+
showHelpDialogName: ref(false),
361+
showHelpDialogEmail: ref(false),
362+
showHelpDialogAffiliation: ref(false),
363+
showHelpDialogOrcid: ref(false)
235364
}
236365
},
237-
emits: ['closePressed', 'removePressed', 'update'],
238-
components: { SchemaGuideLink }
366+
emits: ['closePressed', 'removePressed', 'update']
239367
})
240368
</script>
241369
<style scoped>

‎src/components/InfoDialog.vue‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,19 +33,33 @@
3333
<li
3434
v-for="item in data.examples"
3535
v-bind:key="item"
36+
class="q-mt-sm"
3637
>
37-
{{ item }}
38+
<div
39+
v-for="(line, index) in item.split('\n')"
40+
v-bind:key="index"
41+
>
42+
{{ line }}
43+
</div>
3844
</li>
3945
</ul>
4046
</q-card-section>
41-
<q-card-section>
42-
<a
43-
v-bind:href="data.url"
44-
tabindex="-1"
45-
target="_blank"
47+
<q-card-section v-if="data.url">
48+
<div class="text-h6">
49+
Related links
50+
</div>
51+
<div
52+
v-for="item in data.url"
53+
v-bind:key="item"
4654
>
47-
Click here to see the documentation.
48-
</a>
55+
<a
56+
v-bind:href="item.link"
57+
tabindex="-1"
58+
target="_blank"
59+
>
60+
{{ item.text }}
61+
</a>
62+
</div>
4963
</q-card-section>
5064
</q-card>
5165
</q-dialog>

‎src/components/ScreenAuthors.vue‎

Lines changed: 38 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,13 @@
88
<div id="form-content">
99
<h2 class="question">
1010
Who are the author(s) of the work?
11-
<SchemaGuideLink anchor="#authors" />
11+
<q-icon
12+
name="ion-information-circle-outline"
13+
size="24px"
14+
color="primary"
15+
v-on:click="showAuthorsHelp = true"
16+
style="cursor:pointer;"
17+
/>
1218
</h2>
1319
<div class="scroll-to-bottom-container">
1420
<span class="bottom" />
@@ -60,6 +66,10 @@
6066
{{ screenMessage }}
6167
</div>
6268
</q-banner>
69+
<InfoDialog
70+
v-model="showAuthorsHelp"
71+
v-bind:data="helpData.authors"
72+
/>
6373
</div>
6474
</template>
6575

@@ -70,7 +80,7 @@ import { moveDown, moveUp } from 'src/updown'
7080
import AuthorCardEditing from 'components/AuthorCardEditing.vue'
7181
import AuthorCardViewing from 'components/AuthorCardViewing.vue'
7282
import { AuthorType } from 'src/types'
73-
import SchemaGuideLink from 'components/SchemaGuideLink.vue'
83+
import InfoDialog from 'components/InfoDialog.vue'
7484
import { scrollToBottom } from 'src/scroll-to-bottom'
7585
import { useCff } from 'src/store/cff'
7686
import { useStepperErrors } from 'src/store/stepper-errors'
@@ -79,9 +89,9 @@ import { useValidation } from 'src/store/validation'
7989
export default defineComponent({
8090
name: 'ScreenAuthors',
8191
components: {
82-
SchemaGuideLink,
8392
AuthorCardEditing,
84-
AuthorCardViewing
93+
AuthorCardViewing,
94+
InfoDialog
8595
},
8696
setup () {
8797
onUpdated(() => {
@@ -133,15 +143,38 @@ export default defineComponent({
133143
.filter(byError(errors.value))
134144
.map(query => query.replace.message)
135145
})
146+
const helpData = {
147+
authors: {
148+
title: 'authors',
149+
url: [
150+
{
151+
text: 'Click here to see the documentation for authors.',
152+
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#authors'
153+
},
154+
{
155+
text: 'How to deal with unknown individual authors?',
156+
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#how-to-deal-with-unknown-individual-authors'
157+
}
158+
],
159+
description: 'The authors of a software or dataset.',
160+
examples: [
161+
' given-names: Jane\n family-names: Doe',
162+
' name: "The Research Software project"',
163+
' given-names: John\n family-names: Doe\n name: "The Research Software project"'
164+
]
165+
}
166+
}
136167
return {
137168
addAuthor,
138169
authors,
139170
authorsErrors,
140171
editingId,
172+
helpData,
141173
moveAuthorDown,
142174
moveAuthorUp,
143175
removeAuthor,
144-
setAuthorField
176+
setAuthorField,
177+
showAuthorsHelp: ref(false)
145178
}
146179
}
147180
})

0 commit comments

Comments
 (0)