Skip to content

move lastname i icons outside #686

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Aug 29, 2022
Merged

move lastname i icons outside #686

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f5f6aff
move lastname i icons outside
fdiblen Aug 25, 2022
79801ee
add info dialog for author edit card and improve infodialog
fdiblen Aug 29, 2022
54dd2fb
update info dialog example rendering
fdiblen Aug 29, 2022
2c32a03
fix linter issues
fdiblen Aug 29, 2022
0edd57b
Merge remote-tracking branch 'origin/main' into 655-autors-info-dialog
fdiblen Aug 29, 2022
cc0ea84
Update src/components/AuthorCardEditing.vue
fdiblen Aug 29, 2022
d283e63
Update src/components/AuthorCardEditing.vue
fdiblen Aug 29, 2022
aab2605
update title for authors last name fields
fdiblen Aug 29, 2022
b11c491
Update src/components/AuthorCardEditing.vue
fdiblen Aug 29, 2022
5352f1d
Update src/components/AuthorCardEditing.vue
fdiblen Aug 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
182 changes: 155 additions & 27 deletions src/components/AuthorCardEditing.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,13 @@
<div class="row">
<h3 class="subquestion">
The person's given names
<SchemaGuideLink anchor="#definitionspersongiven-names" />
<q-icon
name="ion-information-circle-outline"
size="24px"
color="primary"
v-on:click="showHelpDialogName = true"
style="cursor:pointer;"
/>
</h3>
</div>
<div class="row">
Expand All @@ -29,6 +35,13 @@
<div class="row">
<h3 class="subquestion">
The person's last names, split into parts
<q-icon
name="ion-information-circle-outline"
size="24px"
color="primary"
v-on:click="showHelpDialogLastName = true"
style="cursor:pointer;"
/>
</h3>
</div>
<div class="row">
Expand All @@ -44,12 +57,7 @@
v-bind:error="false"
v-bind:error-message="''"
v-on:update:modelValue="$emit('update', 'nameParticle', $event)"
>
<SchemaGuideLink
anchor="#definitionspersonname-particle"
class="q-pt-sm"
/>
</q-input>
/>
<q-input
bg-color="white"
class="col"
Expand All @@ -62,12 +70,7 @@
v-bind:error="false"
v-bind:error-message="''"
v-on:update:modelValue="$emit('update', 'familyNames', $event)"
>
<SchemaGuideLink
anchor="#definitionspersonfamily-names"
class="q-pt-sm"
/>
</q-input>
/>
<q-input
bg-color="white"
class="col-3"
Expand All @@ -80,17 +83,18 @@
v-bind:error="false"
v-bind:error-message="''"
v-on:update:modelValue="$emit('update', 'nameSuffix', $event)"
>
<SchemaGuideLink
anchor="#definitionspersonname-suffix"
class="q-pt-sm"
/>
</q-input>
/>
</div>
<div class="row">
<h3 class="subquestion">
The person's email address
<SchemaGuideLink anchor="#definitionspersonemail" />
<q-icon
name="ion-information-circle-outline"
size="24px"
color="primary"
v-on:click="showHelpDialogEmail = true"
style="cursor:pointer;"
/>
</h3>
</div>
<div class="row">
Expand All @@ -113,11 +117,23 @@
<div class="row">
<h3 class="subquestion col">
The person's affiliation
<SchemaGuideLink anchor="#definitionspersonaffiliation" />
<q-icon
name="ion-information-circle-outline"
size="24px"
color="primary"
v-on:click="showHelpDialogAffiliation = true"
style="cursor:pointer;"
/>
</h3>
<h3 class="subquestion col">
The person's ORCID
<SchemaGuideLink anchor="#definitionspersonorcid" />
<q-icon
name="ion-information-circle-outline"
size="24px"
color="primary"
v-on:click="showHelpDialogOrcid = true"
style="cursor:pointer;"
/>
</h3>
</div>
<div class="row">
Expand All @@ -139,6 +155,7 @@
class="col"
dense
hint="Format: https://orcid.org/0000-0000-0000-0000"
label="orcid"
mask="https://orcid.org/####-####-####-###X"
outlined
standout
Expand Down Expand Up @@ -168,17 +185,40 @@
/>
</q-card-actions>
</q-card>
<InfoDialog
v-model="showHelpDialogName"
v-bind:data="helpData.name"
/>
<InfoDialog
v-model="showHelpDialogLastName"
v-bind:data="helpData.lastName"
/>
<InfoDialog
v-model="showHelpDialogEmail"
v-bind:data="helpData.email"
/>
<InfoDialog
v-model="showHelpDialogAffiliation"
v-bind:data="helpData.affiliation"
/>
<InfoDialog
v-model="showHelpDialogOrcid"
v-bind:data="helpData.orcid"
/>
</template>

<script lang="ts">
import { byError, emailQueries, orcidQueries } from 'src/error-filtering'
import { computed, defineComponent, onUpdated } from 'vue'
import SchemaGuideLink from 'src/components/SchemaGuideLink.vue'
import { computed, defineComponent, onUpdated, ref } from 'vue'
import InfoDialog from 'components/InfoDialog.vue'
import { useStepperErrors } from 'src/store/stepper-errors'
import { useValidation } from 'src/store/validation'

export default defineComponent({
name: 'AuthorCardEditing',
components: {
InfoDialog
},
props: {
index: {
type: Number,
Expand Down Expand Up @@ -229,13 +269,101 @@ export default defineComponent({
.filter(byError(errors.value))
.map(query => query.replace.message)
})
const helpData = {
name: {
title: 'given-names',
url: [
{
text: 'Click here to see the documentation for name.',
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersongiven-names'
}
],
description: 'The person\'s given names.',
examples: [
'Jane',
'John'
]
},
lastName: {
title: 'name-particle, family-names, name-suffix',
url: [
{
text: 'Click here to see the documentation for name particle.',
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonname-particle'
},
{
text: 'Click here to see the documentation for family name.',
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonfamily-names'
},
{
text: 'Click here to see the documentation for name suffix.',
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonname-suffix'
}
],
description: 'The person\'s last names, split into parts.',
examples: [
'name particle: von',
'family name: Doe',
'name suffix: Jr.'
]
},
email: {
title: 'email',
url: [
{
text: 'Click here to see the documentation for email.',
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonemail'
}
],
description: 'The person\'s email address.',
examples: [
'mail@research-project.org'
]
},
affiliation: {
title: 'affiliation',
url: [
{
text: 'Click here to see the documentation for affiliation.',
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonaffiliation'
}
],
description: 'The person\'s affiliation.',
examples: [
'Netherlands eScience Center',
'German Aerospace Center (DLR)'
]
},
orcid: {
title: 'orcid',
url: [
{
text: 'Click here to see the documentation for orcid.',
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#definitionspersonorcid'
},
{
text: 'https://orcid.org',
link: 'https://orcid.org'
}
],
description: 'The person\'s ORCID identifier.',
examples: [
'https://orcid.org/0000-0003-4925-7248'
]
}
}
return {
emailErrors,
orcidErrors
helpData,
orcidErrors,
showHelpDialogLastName: ref(false),
showHelpDialogName: ref(false),
showHelpDialogEmail: ref(false),
showHelpDialogAffiliation: ref(false),
showHelpDialogOrcid: ref(false)
}
},
emits: ['closePressed', 'removePressed', 'update'],
components: { SchemaGuideLink }
emits: ['closePressed', 'removePressed', 'update']
})
</script>
<style scoped>
Expand Down
30 changes: 22 additions & 8 deletions src/components/InfoDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,19 +33,33 @@
<li
v-for="item in data.examples"
v-bind:key="item"
class="q-mt-sm"
>
{{ item }}
<div
v-for="(line, index) in item.split('\n')"
v-bind:key="index"
>
{{ line }}
</div>
</li>
</ul>
</q-card-section>
<q-card-section>
<a
v-bind:href="data.url"
tabindex="-1"
target="_blank"
<q-card-section v-if="data.url">
<div class="text-h6">
Related links
</div>
<div
v-for="item in data.url"
v-bind:key="item"
>
Click here to see the documentation.
</a>
<a
v-bind:href="item.link"
tabindex="-1"
target="_blank"
>
{{ item.text }}
</a>
</div>
</q-card-section>
</q-card>
</q-dialog>
Expand Down
43 changes: 38 additions & 5 deletions src/components/ScreenAuthors.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,13 @@
<div id="form-content">
<h2 class="question">
Who are the author(s) of the work?
<SchemaGuideLink anchor="#authors" />
<q-icon
name="ion-information-circle-outline"
size="24px"
color="primary"
v-on:click="showAuthorsHelp = true"
style="cursor:pointer;"
/>
</h2>
<div class="scroll-to-bottom-container">
<span class="bottom" />
Expand Down Expand Up @@ -60,6 +66,10 @@
{{ screenMessage }}
</div>
</q-banner>
<InfoDialog
v-model="showAuthorsHelp"
v-bind:data="helpData.authors"
/>
</div>
</template>

Expand All @@ -70,7 +80,7 @@ import { moveDown, moveUp } from 'src/updown'
import AuthorCardEditing from 'components/AuthorCardEditing.vue'
import AuthorCardViewing from 'components/AuthorCardViewing.vue'
import { AuthorType } from 'src/types'
import SchemaGuideLink from 'components/SchemaGuideLink.vue'
import InfoDialog from 'components/InfoDialog.vue'
import { scrollToBottom } from 'src/scroll-to-bottom'
import { useCff } from 'src/store/cff'
import { useStepperErrors } from 'src/store/stepper-errors'
Expand All @@ -79,9 +89,9 @@ import { useValidation } from 'src/store/validation'
export default defineComponent({
name: 'ScreenAuthors',
components: {
SchemaGuideLink,
AuthorCardEditing,
AuthorCardViewing
AuthorCardViewing,
InfoDialog
},
setup () {
onUpdated(() => {
Expand Down Expand Up @@ -133,15 +143,38 @@ export default defineComponent({
.filter(byError(errors.value))
.map(query => query.replace.message)
})
const helpData = {
authors: {
title: 'authors',
url: [
{
text: 'Click here to see the documentation for authors.',
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#authors'
},
{
text: 'How to deal with unknown individual authors?',
link: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#how-to-deal-with-unknown-individual-authors'
}
],
description: 'The authors of a software or dataset.',
examples: [
' given-names: Jane\n family-names: Doe',
' name: "The Research Software project"',
' given-names: John\n family-names: Doe\n name: "The Research Software project"'
]
}
}
return {
addAuthor,
authors,
authorsErrors,
editingId,
helpData,
moveAuthorDown,
moveAuthorUp,
removeAuthor,
setAuthorField
setAuthorField,
showAuthorsHelp: ref(false)
}
}
})
Expand Down