Skip to content

Commit 31cd84a

Browse files
GaziYucelGaziYucel
committed
structured citations (development)
1 parent ff047fc commit 31cd84a

25 files changed

+739
-3
lines changed

‎src/components/Form/FormGroup.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ import FieldAffiliations from './fields/FieldAffiliations.vue';
5959
import FieldArchivingPn from './fields/FieldArchivingPn.vue';
6060
import FieldAutosuggestPreset from './fields/FieldAutosuggestPreset.vue';
6161
import FieldBaseAutosuggest from './fields/FieldBaseAutosuggest.vue';
62+
import FieldAuthors from './fields/FieldAuthors.vue';
6263
import FieldColor from './fields/FieldColor.vue';
6364
import FieldControlledVocab from './fields/FieldControlledVocab.vue';
6465
import FieldPubId from './fields/FieldPubId.vue';
@@ -91,6 +92,7 @@ export default {
9192
FieldArchivingPn,
9293
FieldAutosuggestPreset,
9394
FieldBaseAutosuggest,
95+
FieldAuthors,
9496
FieldColor,
9597
FieldControlledVocab,
9698
FieldPubId,

‎src/components/Form/fields/FieldAuthors.mdx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {Primary, Controls, Stories, Meta, ArgTypes} from '@storybook/blocks';
2+
3+
import * as FieldAuthorsStories from './FieldAuthors.stories.js';
4+
5+
<Meta of={FieldAuthorsStories} />
6+
7+
# FieldAuthors
8+
9+
## Usage
10+
11+
A special component to maintain authors of a citation of publications.
12+
13+
The `value` is an array of Author objects `{ displayName, givenName, familyName, orcid, wikidata, openAlex }`.
14+
15+
<Primary />
16+
<Controls />
17+
<Stories />

‎src/components/Form/fields/FieldAuthors.stories.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import FieldAuthors from './FieldAuthors.vue';
2+
import FieldAuthorsMock from '@/components/Form/mocks/field-citation-authors.js';
3+
4+
const args = {...FieldAuthorsMock};
5+
6+
export default {
7+
title: 'Forms/FieldAuthors',
8+
component: FieldAuthors,
9+
args: {},
10+
parameters: {},
11+
render: (args) => ({
12+
components: {FieldAuthors},
13+
setup() {
14+
return {args};
15+
},
16+
template: `
17+
<FieldAuthors v-bind="args"/>`,
18+
}),
19+
decorators: [
20+
() => ({
21+
template: '<div style="height: 600px"><story/></div>',
22+
}),
23+
],
24+
};
25+
26+
export const Base = {
27+
args: {...FieldAuthorsMock},
28+
};

‎src/components/Form/fields/FieldAuthors.vue

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<template>
2+
<div
3+
:id="`${props.formId}-${props.name}`"
4+
class="pkpFormField pkpFormField--citationAuthors"
5+
>
6+
<PkpTable aria-label="CitationAuthors">
7+
<TableHeader>
8+
<TableColumn id="">{{ t('user.givenName', []) }}</TableColumn>
9+
<TableColumn id="">{{ t('user.familyName', []) }}</TableColumn>
10+
<TableColumn id="">{{ t('user.orcid', []) }}</TableColumn>
11+
<TableColumn id="" class="w-[100px]">&nbsp;</TableColumn>
12+
</TableHeader>
13+
<TableBody>
14+
<TableRow
15+
v-for="(author, authorIndex) in currentValue"
16+
:key="authorIndex"
17+
>
18+
<TableCell>
19+
<FieldText :value="author.givenName" />
20+
</TableCell>
21+
<TableCell>
22+
<FieldText :value="author.givenName" />
23+
</TableCell>
24+
<TableCell>
25+
<FieldText v-if="!author.orcid" :value="author.orcid" />
26+
<a v-if="author.orcid" :href="author.orcid" target="_blank">
27+
<Icon
28+
icon="Orcid"
29+
:class="'relative top-[-2px] inline-block h-auto w-[16px] align-middle'"
30+
:inline="true"
31+
/>
32+
{{ author.orcid }}
33+
</a>
34+
</TableCell>
35+
<TableCell>
36+
{{ authorIndex }}
37+
<a
38+
class="pkpButton flex cursor-pointer items-center border-transparent py-2 text-lg-semibold text-primary hover:enabled:underline"
39+
@click="deleteAuthor(authorIndex)"
40+
>
41+
{{ t('common.delete', []) }}
42+
</a>
43+
</TableCell>
44+
</TableRow>
45+
<TableRow>
46+
<TableCell>
47+
<Button @click="addAuthor()">
48+
{{ t('common.add') }}
49+
</Button>
50+
</TableCell>
51+
<TableCell></TableCell>
52+
<TableCell></TableCell>
53+
<TableCell></TableCell>
54+
</TableRow>
55+
</TableBody>
56+
</PkpTable>
57+
</div>
58+
</template>
59+
60+
<script setup>
61+
import Button from '@/components/Button/Button.vue';
62+
import PkpTable from '@/components/Table/Table.vue';
63+
import TableCell from '@/components/Table/TableCell.vue';
64+
import TableRow from '@/components/Table/TableRow.vue';
65+
import TableColumn from '@/components/Table/TableColumn.vue';
66+
import TableHeader from '@/components/Table/TableHeader.vue';
67+
import TableBody from '@/components/Table/TableBody.vue';
68+
import {computed} from 'vue';
69+
import {t} from '@/utils/i18n';
70+
import FieldText from '@/components/Form/fields/FieldText.vue';
71+
import Icon from '@/components/Icon/Icon.vue';
72+
73+
const props = defineProps({
74+
/** Field key used for form submission */
75+
name: {
76+
type: String,
77+
default: null,
78+
},
79+
/** The ID of the form this field should appear in. This is passed down from the `Form`. */
80+
formId: {
81+
type: String,
82+
default: null,
83+
},
84+
/** The `<label>` for this field. May be used in a `<fieldset>` when appropriate. All form fields should have an accessible label. */
85+
label: {
86+
type: String,
87+
default: null,
88+
},
89+
/** Adds a description to the field. Can include HTML code. */
90+
description: {
91+
type: String,
92+
default: null,
93+
},
94+
/** Current value of the field */
95+
value: {
96+
type: Array,
97+
default: () => [],
98+
},
99+
/** Default locale of the form */
100+
primaryLocale: {
101+
type: String,
102+
default: 'en',
103+
},
104+
/** List of supported locales */
105+
locales: {
106+
type: Array,
107+
default: () => [],
108+
},
109+
/** Object containing all form errors */
110+
allErrors: {
111+
type: Object,
112+
default() {
113+
return {};
114+
},
115+
},
116+
});
117+
const authorDataModel = () => {
118+
return {
119+
displayName: '',
120+
givenName: '',
121+
familyName: '',
122+
orcid: '',
123+
};
124+
};
125+
const currentValue = computed({
126+
get: () => props.value,
127+
set: (newVal) => emit('change', props.name, 'value', newVal),
128+
});
129+
130+
function deleteAuthor(authorIndex) {
131+
currentValue.value.splice(authorIndex, 1);
132+
}
133+
134+
function addAuthor() {
135+
currentValue.value.push(authorDataModel());
136+
}
137+
</script>

‎src/components/Form/mocks/field-citation-authors.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
export default {
2+
name: 'author-citation-authors',
3+
component: 'author-citation-authors',
4+
primaryLocale: 'en',
5+
locales: [
6+
{key: 'en', label: 'English'},
7+
{key: 'fr_CA', label: 'French (Canada)'},
8+
{key: 'de', label: 'German'},
9+
],
10+
value: [
11+
{
12+
displayName: 'Christian Hauschke',
13+
givenName: 'Christian',
14+
familyName: 'Hauschke',
15+
orcid: 'https://orcid.org/0000-0003-2499-7741',
16+
wikidata: '',
17+
openAlex: 'https://openalex.org/A5021239193',
18+
},
19+
{
20+
displayName: 'Lambert Heller',
21+
givenName: 'Lambert',
22+
familyName: 'Heller',
23+
orcid: 'https://orcid.org/0000-0003-0232-7085',
24+
wikidata: '',
25+
openAlex: 'https://openalex.org/A5018666082',
26+
},
27+
{
28+
displayName: 'Bo‐Christer Björk',
29+
givenName: 'Bo-Christer',
30+
familyName: 'Björk',
31+
wikidata: '',
32+
openAlex: 'https://openalex.org/A5036789552',
33+
},
34+
{
35+
displayName: 'Cenyu Shen',
36+
givenName: 'Cenyu',
37+
familyName: 'Shen',
38+
orcid: 'https://orcid.org/0000-0002-4411-9674',
39+
wikidata: '',
40+
openAlex: 'https://openalex.org/A5080285387',
41+
},
42+
{
43+
displayName: 'Mikael Laakso',
44+
givenName: 'Mikael',
45+
familyName: 'Laakso',
46+
orcid: 'https://orcid.org/0000-0003-3951-7990',
47+
wikidata: '',
48+
openAlex: 'https://openalex.org/A5067698582',
49+
},
50+
],
51+
};

‎src/components/ListPanel/citations/CitationsListPanel.mdx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {Primary, Controls, Stories, Meta, ArgTypes} from '@storybook/blocks';
2+
3+
import * as CitationsListPanelStories from './CitationsListPanel.stories.js';
4+
5+
<Meta of={CitationsListPanelStories} />
6+
7+
# CitationsListPanel
8+
9+
## Usage
10+
11+
Use this component to view, add, edit and delete citations.
12+
13+
<Primary />
14+
<ArgTypes />

‎src/components/ListPanel/citations/CitationsListPanel.stories.js

Whitespace-only changes.

‎src/components/ListPanel/citations/CitationsListPanel.vue

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
2+
3+
<script setup>
4+
import {useLocalize} from '@/composables/useLocalize';
5+
import TableHeader from '@/components/Table/TableHeader.vue';
6+
import Button from '@/components/Button/Button.vue';
7+
import TableColumn from '@/components/Table/TableColumn.vue';
8+
import TableBody from '@/components/Table/TableBody.vue';
9+
import PkpTable from '@/components/Table/Table.vue';
10+
import TableRow from '@/components/Table/TableRow.vue';
11+
import {ref, useId} from 'vue';
12+
13+
defineProps({
14+
publication: {type: Object, required: true},
15+
});
16+
17+
18+
</script>

‎src/components/ListPanel/contributors/ContributorsListPanel.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<!-- // todo: gazi -->
12
<template>
23
<div class="contributorsListPanel">
34
<slot>

‎src/components/ListPanel/reviewerSuggestions/ReviewerSuggestionsListPanel.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<!-- // todo: gazi -->
12
<template>
23
<div class="reviewerSuggestionsListPanel">
34
<slot>

0 commit comments

Comments
 (0)