Skip to content

Commit 6179eef

Browse files
jyheinjyhein
committed
Credit Roles
1 parent 77c0c66 commit 6179eef

File tree

5 files changed

+225
-0
lines changed

5 files changed

+225
-0
lines changed

‎src/components/Form/FormGroup.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ import FieldBaseAutosuggest from './fields/FieldBaseAutosuggest.vue';
6262
import FieldAuthors from './fields/FieldAuthors.vue';
6363
import FieldColor from './fields/FieldColor.vue';
6464
import FieldControlledVocab from './fields/FieldControlledVocab.vue';
65+
import FieldCreditRoles from './fields/FieldCreditRoles.vue';
6566
import FieldPubId from './fields/FieldPubId.vue';
6667
import FieldHtml from './fields/FieldHtml.vue';
6768
import FieldMetadataSetting from './fields/FieldMetadataSetting.vue';
@@ -95,6 +96,7 @@ export default {
9596
FieldAuthors,
9697
FieldColor,
9798
FieldControlledVocab,
99+
FieldCreditRoles,
98100
FieldPubId,
99101
FieldHtml,
100102
FieldMetadataSetting,

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import {Primary, Controls, Stories, Meta, ArgTypes} from '@storybook/blocks';
2+
3+
import * as FieldCreditRolesStories from './FieldCreditRoles.stories.js';
4+
5+
<Meta of={FieldCreditRolesStories} />
6+
7+
# FieldCreditRole
8+
9+
## Usage
10+
11+
A special component to maintain Credit roles and degrees of authors (contributors).
12+
13+
The CreditRoles currently saved are shown in a tabular way as roles and degrees.
14+
15+
The `value` is an array of objects `{ role, degree }`.
16+
17+
<Primary />
18+
<Controls />
19+
<Stories />

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import FieldCreditRoles from './FieldCreditRoles.vue';
2+
import FieldCreditRolesMock from '@/components/Form/mocks/field-credit-roles';
3+
4+
export default {
5+
title: 'Forms/FieldCreditRoles',
6+
component: FieldCreditRoles,
7+
render: (args) => ({
8+
components: {FieldCreditRoles},
9+
setup() {
10+
function change(name, prop, newValue, localeKey) {
11+
args[prop] = newValue;
12+
}
13+
14+
return {args, change};
15+
},
16+
template: '<FieldCreditRoles v-bind="args" @change="change"/>',
17+
}),
18+
parameters: {
19+
docs: {
20+
story: {
21+
height: '500px',
22+
},
23+
},
24+
},
25+
};
26+
27+
export const Base = {
28+
args: {...FieldCreditRolesMock},
29+
};

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

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<template>
2+
<!-- To be able to scroll to this field on error-->
3+
<div
4+
:id="`${props.formId}-${props.name}`"
5+
class="pkpFormField pkpFormField--creditRoles"
6+
>
7+
<div class="pkpFormField__heading">
8+
<label :id="labelId" class="pkpFormFieldLabel">
9+
{{ t('submission.submit.creditRoles.title', {}) }}
10+
</label>
11+
</div>
12+
<div :id="descriptionId" class="pkpFormField__description">
13+
{{ t('submission.submit.creditRoles.description', {}) }}
14+
</div>
15+
<div class="pkpFormField__control pkpFormField--creditRoles__control">
16+
<PkpTable :labelled-by="labelId" :described-by="descriptionId">
17+
<TableHeader>
18+
<TableColumn id="" class="w-[45%]">
19+
{{ t('submission.submit.creditRoles.role', {}) }}
20+
</TableColumn>
21+
<TableColumn id="">
22+
{{ t('submission.submit.creditRoles.degree', {}) }}
23+
</TableColumn>
24+
<TableColumn id="" class="w-[100px]">&nbsp;</TableColumn>
25+
</TableHeader>
26+
<TableBody>
27+
<TableRow
28+
v-for="({role, degree}, creditRoleIndex) in currentValue"
29+
:key="creditRoleIndex"
30+
>
31+
<TableCell>
32+
<FieldSelect
33+
name="role"
34+
:label="t('submission.submit.creditRoles.selectRole')"
35+
:is-required="true"
36+
:value="role"
37+
:options="props.options.roles"
38+
class="creditRole__roleSelect"
39+
@change="
40+
(fieldName, propName, newValue, localeKey) =>
41+
updateCreditRole(creditRoleIndex, fieldName, newValue)
42+
"
43+
/>
44+
</TableCell>
45+
<TableCell>
46+
<FieldSelect
47+
name="degree"
48+
:label="t('submission.submit.creditRoles.selectDegree')"
49+
:value="degree"
50+
:options="props.options.degrees"
51+
class="creditRole__roleSelect"
52+
@change="
53+
(fieldName, propName, newValue, localeKey) =>
54+
updateCreditRole(creditRoleIndex, fieldName, newValue)
55+
"
56+
/>
57+
</TableCell>
58+
<TableCell>
59+
<PkpButton
60+
:is-warnable="true"
61+
@click="removeCreditRole(creditRoleIndex)"
62+
>
63+
{{ t('submission.submit.creditRoles.button.remove') }}
64+
</PkpButton>
65+
</TableCell>
66+
</TableRow>
67+
</TableBody>
68+
<template #bottom-controls>
69+
<PkpButton @click="addCreditRole()">
70+
{{ t('submission.submit.creditRoles.button.add') }}
71+
</PkpButton>
72+
</template>
73+
</PkpTable>
74+
</div>
75+
</div>
76+
</template>
77+
78+
<script setup>
79+
import {computed, useId} from 'vue';
80+
import {t} from '@/utils/i18n';
81+
import PkpButton from '@/components/Button/Button.vue';
82+
import PkpTable from '@/components/Table/Table.vue';
83+
import TableHeader from '@/components/Table/TableHeader.vue';
84+
import TableBody from '@/components/Table/TableBody.vue';
85+
import TableRow from '@/components/Table/TableRow.vue';
86+
import TableColumn from '@/components/Table/TableColumn.vue';
87+
import TableCell from '@/components/Table/TableCell.vue';
88+
import FieldSelect from './FieldSelect.vue';
89+
90+
const props = defineProps({
91+
/** Field key used for form submission */
92+
name: {
93+
type: String,
94+
default: null,
95+
},
96+
/** The ID of the form this field should appear in. This is passed down from the `Form`. */
97+
formId: {
98+
type: String,
99+
default: null,
100+
},
101+
/** Current value of the field */
102+
value: {
103+
type: Array,
104+
default: () => [],
105+
},
106+
options: {
107+
type: Object,
108+
required: true,
109+
},
110+
});
111+
112+
/**
113+
* Accessibility
114+
*/
115+
const labelId = useId();
116+
const descriptionId = useId();
117+
118+
const emit = defineEmits(['change']);
119+
120+
const currentValue = computed({
121+
get: () => props.value,
122+
set: (newVal) => emit('change', props.name, 'value', newVal),
123+
});
124+
125+
function addCreditRole() {
126+
currentValue.value.push({
127+
role: props.options.roles[0].value,
128+
degree: props.options.degrees[0].value,
129+
});
130+
}
131+
132+
function removeCreditRole(index) {
133+
currentValue.value.splice(index, 1);
134+
}
135+
136+
function updateCreditRole(index, fieldName, newValue) {
137+
currentValue.value[index][fieldName] = newValue;
138+
}
139+
</script>

‎src/components/Form/mocks/field-credit-roles.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
export default {
2+
name: 'contributor-credit-roles',
3+
component: 'contributor-credit-roles',
4+
value: [
5+
{
6+
role: 'https://credit.niso.org/contributor-roles/data-curation/',
7+
degree: null,
8+
},
9+
],
10+
options: {
11+
roles: [
12+
{
13+
label: 'Conceptualization',
14+
value: 'https://credit.niso.org/contributor-roles/conceptualization/',
15+
},
16+
{
17+
label: 'Data Curation',
18+
value: 'https://credit.niso.org/contributor-roles/data-curation/',
19+
},
20+
{
21+
label: 'Formal Analysis',
22+
value: 'https://credit.niso.org/contributor-roles/formal-analysis/',
23+
},
24+
],
25+
degrees: [
26+
{
27+
label: '',
28+
value: null,
29+
},
30+
{
31+
label: 'LEAD',
32+
value: 'LEAD',
33+
},
34+
],
35+
},
36+
};

0 commit comments

Comments
 (0)