Skip to content

Commit 3763e87

Browse files
GaziYucelGaziYucel
committed
structured citations (development)
1 parent 24041f3 commit 3763e87

14 files changed

+936
-0
lines changed

‎src/components/Form/FormGroup.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,8 @@ 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 FieldCitationAuthors from './fields/FieldCitationAuthors.vue';
63+
import FieldCitations from "./fields/FieldCitations.vue";
6264
import FieldColor from './fields/FieldColor.vue';
6365
import FieldControlledVocab from './fields/FieldControlledVocab.vue';
6466
import FieldPubId from './fields/FieldPubId.vue';
@@ -91,6 +93,8 @@ export default {
9193
FieldArchivingPn,
9294
FieldAutosuggestPreset,
9395
FieldBaseAutosuggest,
96+
FieldCitationAuthors,
97+
FieldCitations,
9498
FieldColor,
9599
FieldControlledVocab,
96100
FieldPubId,

‎src/components/Form/fields/FieldCitationAuthors.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 FieldCitationAuthorsStories from './FieldCitationAuthors.stories.js';
4+
5+
<Meta of={FieldCitationAuthorsStories} />
6+
7+
# FieldCitationAuthors
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/FieldCitationAuthors.stories.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import FieldCitationAuthors from './FieldCitationAuthors.vue';
2+
import FieldCitationAuthorsMock from '@/components/Form/mocks/field-citation-authors.js';
3+
4+
const args = {...FieldCitationAuthorsMock};
5+
6+
export default {
7+
title: 'Forms/FieldCitationAuthors',
8+
component: FieldCitationAuthors,
9+
args: {},
10+
parameters: {},
11+
render: (args) => ({
12+
components: {FieldCitationAuthors},
13+
setup() {
14+
return {args};
15+
},
16+
template: `
17+
<FieldCitationAuthors 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: {...FieldCitationAuthorsMock},
28+
};

‎src/components/Form/fields/FieldCitationAuthors.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/fields/FieldCitations.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 FieldCitationsStories from './FieldCitations.stories.js';
4+
5+
<Meta of={FieldCitationsStories} />
6+
7+
# FieldCitations
8+
9+
## Usage
10+
11+
A special component to maintain structured citations of publications.
12+
13+
The `value` is an array of Citation objects.
14+
15+
<Primary />
16+
<Controls />
17+
<Stories />

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import FieldCitations from './FieldCitations.vue';
2+
import FieldCitationsMock from '@/components/Form/mocks/field-citations.js';
3+
4+
const args = {...FieldCitationsMock};
5+
6+
export default {
7+
title: 'Forms/FieldCitations',
8+
component: FieldCitations,
9+
args: {},
10+
parameters: {},
11+
render: (args) => ({
12+
components: {FieldCitations},
13+
setup() {
14+
return {args};
15+
},
16+
template: `
17+
<FieldCitations 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: {...FieldCitationsMock},
28+
};

0 commit comments

Comments
 (0)