From fb85937226a3c2dd9ca55cb2d1556738cde4b5b9 Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Fri, 27 Sep 2024 15:51:18 +0200 Subject: [PATCH 01/22] Author Affiliations (work in progress) --- .../FieldAuthorAffiliation.mdx | 26 +++++ .../FieldAuthorAffiliation.stories.js | 110 ++++++++++++++++++ .../FieldAuthorAffiliation.vue | 22 ++++ .../Form/mocks/field-author-affiliations.js | 24 ++++ 4 files changed, 182 insertions(+) create mode 100644 src/components/Form/authorAffiliation/FieldAuthorAffiliation.mdx create mode 100644 src/components/Form/authorAffiliation/FieldAuthorAffiliation.stories.js create mode 100644 src/components/Form/authorAffiliation/FieldAuthorAffiliation.vue create mode 100644 src/components/Form/mocks/field-author-affiliations.js diff --git a/src/components/Form/authorAffiliation/FieldAuthorAffiliation.mdx b/src/components/Form/authorAffiliation/FieldAuthorAffiliation.mdx new file mode 100644 index 00000000..29505d0a --- /dev/null +++ b/src/components/Form/authorAffiliation/FieldAuthorAffiliation.mdx @@ -0,0 +1,26 @@ +import {Primary, Controls, Stories, Meta, ArgTypes} from '@storybook/blocks'; + +import * as FieldAuthorAffiliationStories from './FieldAuthorAffiliation.stories.js'; + + + +# FieldAuthorAffiliation + +## Usage + +A special component to maintain affiliations (institutions) of authors (contributors). + +The Affiliations currently saved are shown in a tabular way. + +The default locale name and a clickable status message is shown, which shows which translations are saved. +The affiliation name can be retrieved from an API or entered manually. +If retrieved from the API, the values will be read only. + +The data of the API is from a cached data dump from https://ror.org. +Getting and saving the data dump is done with the classes in the namespace "PKP\ror". + +The `values` are an array of objects. + + + + diff --git a/src/components/Form/authorAffiliation/FieldAuthorAffiliation.stories.js b/src/components/Form/authorAffiliation/FieldAuthorAffiliation.stories.js new file mode 100644 index 00000000..cc778ed7 --- /dev/null +++ b/src/components/Form/authorAffiliation/FieldAuthorAffiliation.stories.js @@ -0,0 +1,110 @@ +import {ref, computed} from 'vue'; +import {useFetchPaginated} from '@/composables/useFetchPaginated'; +import {defineComponentStore} from '@/utils/defineComponentStore'; + +import FieldAuthorAffiliation from './FieldAuthorAffiliation.vue'; +import FieldAuthorAffiliationMock from '../mocks/field-author-affiliations'; +import PkpTable from "@/components/Table/Table.vue"; +import TableHeader from "@/components/Table/TableHeader.vue"; +import TableBody from "@/components/Table/TableBody.vue"; +import TableRow from "@/components/Table/TableRow.vue"; +import TableColumn from "@/components/Table/TableColumn.vue"; +import TableCell from "@/components/Table/TableCell.vue"; +import PkpButton from "@/components/Button/Button.vue"; +import articleStats from "@/components/Table/mocks/articleStats"; + +export default { + title: 'Forms/FieldAuthorAffiliation', + component: FieldAuthorAffiliation, +}; + +export const useFieldAuthorAffiliationStore = defineComponentStore( + 'FieldAuthorAffiliation', + (pageInitConfig) => { + /** Institutions */ + const { + items: institutions, + fetch: fetchInstitutions, + isLoading, + } = useFetchPaginated(pageInitConfig.institutionsApiUrl, { + page: 1, + pageSize: 20, + }); + + fetchInstitutions(); + + /** Counter */ + const counter = ref(0); + const isCounterEven = computed(() => { + return counter.value % 2 === 0; + }); + + function increaseCounter() { + counter.value += 1; + } + + return { + /** Institutions */ + institutions, + fetchInstitutions, + isLoading, + + /** Counter */ + counter, + isCounterEven, + increaseCounter, + }; + }, +); + +export const Default = { + render: (args) => ({ + components: { + PkpTable, + TableHeader, + TableBody, + TableRow, + TableColumn, + TableCell, + PkpButton, + }, + setup() { + const rows = articleStats.slice(0, 10); + + return {args, rows}; + }, + template: ` + + + ID + Title + Views + Downloads + Total + Action + + + + {{ row.object.id }} + + {{ row.object.fullTitle.en }} + + {{ row.views }} + {{ row.downloads }} + + + + + View + + + + + + `, + }), + + args: { + ...FieldAuthorAffiliationMock, + }, +}; diff --git a/src/components/Form/authorAffiliation/FieldAuthorAffiliation.vue b/src/components/Form/authorAffiliation/FieldAuthorAffiliation.vue new file mode 100644 index 00000000..cad40376 --- /dev/null +++ b/src/components/Form/authorAffiliation/FieldAuthorAffiliation.vue @@ -0,0 +1,22 @@ + + + diff --git a/src/components/Form/mocks/field-author-affiliations.js b/src/components/Form/mocks/field-author-affiliations.js new file mode 100644 index 00000000..cb18e60c --- /dev/null +++ b/src/components/Form/mocks/field-author-affiliations.js @@ -0,0 +1,24 @@ +export default { + name: 'author-affiliations', + component: 'author-affiliations', + items: [ + { + id: 1, + authorId: 1, + ror: 'https://ror.org/0213rcc28', + name: { + en: 'Simon Fraser University', + fr_CA: 'Simon Fraser University' + } + }, + { + id: 2, + authorId: 1, + ror: 'https://ror.org/02e2c7k09', + name: { + en: 'Delft University of Technology', + fr_CA: 'Delft University of Technology' + } + } + ], +}; From c08a298e3ff672559adca6072a2479b41042d11d Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Wed, 2 Oct 2024 17:43:14 +0200 Subject: [PATCH 02/22] Author Affiliations (work in progress) --- src/components/Form/FormGroup.vue | 2 + .../FieldAuthorAffiliation.stories.js | 110 ------------------ .../FieldAffiliations.mdx} | 4 +- .../Form/fields/FieldAffiliations.stories.js | 107 +++++++++++++++++ .../Form/fields/FieldAffiliations.vue | 19 +++ .../Form/mocks/field-affiliations.js | 100 ++++++++++++++++ .../Form/mocks/field-author-affiliations.js | 24 ---- 7 files changed, 230 insertions(+), 136 deletions(-) delete mode 100644 src/components/Form/authorAffiliation/FieldAuthorAffiliation.stories.js rename src/components/Form/{authorAffiliation/FieldAuthorAffiliation.mdx => fields/FieldAffiliations.mdx} (84%) create mode 100644 src/components/Form/fields/FieldAffiliations.stories.js create mode 100644 src/components/Form/fields/FieldAffiliations.vue create mode 100644 src/components/Form/mocks/field-affiliations.js delete mode 100644 src/components/Form/mocks/field-author-affiliations.js diff --git a/src/components/Form/FormGroup.vue b/src/components/Form/FormGroup.vue index ce7b6087..122190b0 100644 --- a/src/components/Form/FormGroup.vue +++ b/src/components/Form/FormGroup.vue @@ -78,6 +78,7 @@ import FieldTextarea from './fields/FieldTextarea.vue'; import FieldUpload from './fields/FieldUpload.vue'; import FieldSlider from './fields/FieldSlider.vue'; import FieldUploadImage from './fields/FieldUploadImage.vue'; +import FieldAffiliations from "./fields/FieldAffiliations.vue"; import {shouldShowFieldWithinGroup} from './formHelpers'; @@ -109,6 +110,7 @@ export default { FieldSlider, FieldUpload, FieldUploadImage, + FieldAffiliations, }, props: { id: String, diff --git a/src/components/Form/authorAffiliation/FieldAuthorAffiliation.stories.js b/src/components/Form/authorAffiliation/FieldAuthorAffiliation.stories.js deleted file mode 100644 index cc778ed7..00000000 --- a/src/components/Form/authorAffiliation/FieldAuthorAffiliation.stories.js +++ /dev/null @@ -1,110 +0,0 @@ -import {ref, computed} from 'vue'; -import {useFetchPaginated} from '@/composables/useFetchPaginated'; -import {defineComponentStore} from '@/utils/defineComponentStore'; - -import FieldAuthorAffiliation from './FieldAuthorAffiliation.vue'; -import FieldAuthorAffiliationMock from '../mocks/field-author-affiliations'; -import PkpTable from "@/components/Table/Table.vue"; -import TableHeader from "@/components/Table/TableHeader.vue"; -import TableBody from "@/components/Table/TableBody.vue"; -import TableRow from "@/components/Table/TableRow.vue"; -import TableColumn from "@/components/Table/TableColumn.vue"; -import TableCell from "@/components/Table/TableCell.vue"; -import PkpButton from "@/components/Button/Button.vue"; -import articleStats from "@/components/Table/mocks/articleStats"; - -export default { - title: 'Forms/FieldAuthorAffiliation', - component: FieldAuthorAffiliation, -}; - -export const useFieldAuthorAffiliationStore = defineComponentStore( - 'FieldAuthorAffiliation', - (pageInitConfig) => { - /** Institutions */ - const { - items: institutions, - fetch: fetchInstitutions, - isLoading, - } = useFetchPaginated(pageInitConfig.institutionsApiUrl, { - page: 1, - pageSize: 20, - }); - - fetchInstitutions(); - - /** Counter */ - const counter = ref(0); - const isCounterEven = computed(() => { - return counter.value % 2 === 0; - }); - - function increaseCounter() { - counter.value += 1; - } - - return { - /** Institutions */ - institutions, - fetchInstitutions, - isLoading, - - /** Counter */ - counter, - isCounterEven, - increaseCounter, - }; - }, -); - -export const Default = { - render: (args) => ({ - components: { - PkpTable, - TableHeader, - TableBody, - TableRow, - TableColumn, - TableCell, - PkpButton, - }, - setup() { - const rows = articleStats.slice(0, 10); - - return {args, rows}; - }, - template: ` - - - ID - Title - Views - Downloads - Total - Action - - - - {{ row.object.id }} - - {{ row.object.fullTitle.en }} - - {{ row.views }} - {{ row.downloads }} - - - - - View - - - - - - `, - }), - - args: { - ...FieldAuthorAffiliationMock, - }, -}; diff --git a/src/components/Form/authorAffiliation/FieldAuthorAffiliation.mdx b/src/components/Form/fields/FieldAffiliations.mdx similarity index 84% rename from src/components/Form/authorAffiliation/FieldAuthorAffiliation.mdx rename to src/components/Form/fields/FieldAffiliations.mdx index 29505d0a..f01b4afd 100644 --- a/src/components/Form/authorAffiliation/FieldAuthorAffiliation.mdx +++ b/src/components/Form/fields/FieldAffiliations.mdx @@ -1,8 +1,8 @@ import {Primary, Controls, Stories, Meta, ArgTypes} from '@storybook/blocks'; -import * as FieldAuthorAffiliationStories from './FieldAuthorAffiliation.stories.js'; +import * as FieldAffiliationsStories from './FieldAffiliations.stories.js'; - + # FieldAuthorAffiliation diff --git a/src/components/Form/fields/FieldAffiliations.stories.js b/src/components/Form/fields/FieldAffiliations.stories.js new file mode 100644 index 00000000..f6553aff --- /dev/null +++ b/src/components/Form/fields/FieldAffiliations.stories.js @@ -0,0 +1,107 @@ +import FieldAffiliations from './FieldAffiliations.vue'; +import PkpTable from "@/components/Table/Table.vue"; +import TableHeader from "@/components/Table/TableHeader.vue"; +import TableBody from "@/components/Table/TableBody.vue"; +import TableRow from "@/components/Table/TableRow.vue"; +import TableColumn from "@/components/Table/TableColumn.vue"; +import TableCell from "@/components/Table/TableCell.vue"; +import PkpButton from "@/components/Button/Button.vue"; +import FieldText from "@/components/Form/fields/FieldText.vue"; + +import FieldAffiliationsMock from '@/components/Form/mocks/field-affiliations'; +import FieldBaseMock from "@/components/Form/mocks/field-base"; +import FieldTextGivenNameMock from "@/components/Form/mocks/field-text-given-name"; + +export default { + title: 'Forms/FieldAffiliations', + component: FieldAffiliations, + args: {}, + render: (args) => ({ + components: { + PkpTable, + TableHeader, + TableBody, + TableRow, + TableColumn, + TableCell, + PkpButton, + FieldText, + }, + setup() { + const rorLogo = 'https://ror.org/assets/ror-logo.svg'; + + const argsLookup = { + ...FieldBaseMock, + ...FieldTextGivenNameMock, + label: 'Type the institute name', + isRequired: false, + isMultilingual: false, + }; + + function dummyAction(message){ + alert('"' + message + '"' + ' clicked'); + } + + function translations(item) { + let total = Object.keys(item.name).length; + let translated = 0; + + for(let key in item.name) { + if(item.name[key].length > 0){ + translated++; + } + } + + if(total === translated){ + return 'All Translations Available'; + } + else{ + return translated + ' Of ' + total + ' Languages Completed'; + } + } + + function lookupValue(value){ + console.log('affiliationLookup: ' + value); + } + + return {args, dummyAction, translations, lookupValue }; + }, + template: ` + + + Institution + Translation +   + + + + + {{ row.name.en }} + + + + + + + + + + + + + +   + + Add + + + + + `, + }), +}; + +export const Base = { + args: { ...FieldAffiliationsMock }, +}; diff --git a/src/components/Form/fields/FieldAffiliations.vue b/src/components/Form/fields/FieldAffiliations.vue new file mode 100644 index 00000000..f79b6ef8 --- /dev/null +++ b/src/components/Form/fields/FieldAffiliations.vue @@ -0,0 +1,19 @@ + + + diff --git a/src/components/Form/mocks/field-affiliations.js b/src/components/Form/mocks/field-affiliations.js new file mode 100644 index 00000000..2a9e801e --- /dev/null +++ b/src/components/Form/mocks/field-affiliations.js @@ -0,0 +1,100 @@ +import FieldBaseMock from "@/components/Form/mocks/field-base"; +import FieldTextGivenNameMock from "@/components/Form/mocks/field-text-given-name"; +import FieldBaseAutosuggest from "@/components/Form/mocks/field-autosuggest"; + +export default { + name: 'author-affiliations', + component: 'author-affiliations', + logo: 'https://ror.org/assets/ror-logo.svg', + rows: [ + { + id: 1, + authorId: 1, + ror: 'https://ror.org/0213rcc28', + name: { + en: 'Simon Fraser University', + de: 'Simon Fraser University', + fr_CA: 'Simon Fraser University' + } + }, + { + id: 2, + authorId: 1, + ror: 'https://ror.org/02e2c7k09', + name: { + en: 'Delft University of Technology', + de: '', + fr_CA: '' + } + }, + { + id: 3, + authorId: 1, + ror: '', + name: { + en: 'German National Library of Science and Technology', + de: 'Technische Informationsbibliothek (TIB)', + fr_CA: '' + } + }, + { + id: 4, + authorId: 1, + ror: 'https://ror.org/0304hq317', + name: { + en: 'Leibniz University Hannover', + de: 'Technische Universität Hannover', + fr_CA: '' + } + }, + ], + lookup: { + ...FieldBaseMock, + ...FieldTextGivenNameMock, + label: 'Type the institute name', + isRequired: false, + isMultilingual: false, + }, + autosuggest: { + ...FieldBaseMock, + ...FieldBaseAutosuggest, + label: 'Sections', + options: [ + { + value: 1, + label: 'Articles', + }, + { + value: 2, + label: 'Editorials', + }, + { + value: 3, + label: 'Reviews', + }, + { + value: 4, + label: 'Field Notes', + }, + { + value: 5, + label: 'Roundtables', + }, + { + value: 6, + label: 'Research Reviews', + }, + { + value: 7, + label: 'Conference Proceedings', + }, + ], + value: [1], + selected: [ + { + value: 1, + label: 'Articles', + }, + ], + }, +}; diff --git a/src/components/Form/mocks/field-author-affiliations.js b/src/components/Form/mocks/field-author-affiliations.js deleted file mode 100644 index cb18e60c..00000000 --- a/src/components/Form/mocks/field-author-affiliations.js +++ /dev/null @@ -1,24 +0,0 @@ -export default { - name: 'author-affiliations', - component: 'author-affiliations', - items: [ - { - id: 1, - authorId: 1, - ror: 'https://ror.org/0213rcc28', - name: { - en: 'Simon Fraser University', - fr_CA: 'Simon Fraser University' - } - }, - { - id: 2, - authorId: 1, - ror: 'https://ror.org/02e2c7k09', - name: { - en: 'Delft University of Technology', - fr_CA: 'Delft University of Technology' - } - } - ], -}; From 60cb44a7933406838fbfb76e5b8e100378cd3889 Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Wed, 2 Oct 2024 17:52:46 +0200 Subject: [PATCH 03/22] Author Affiliations (work in progress) --- .../FieldAuthorAffiliation.vue | 22 ------------------- 1 file changed, 22 deletions(-) delete mode 100644 src/components/Form/authorAffiliation/FieldAuthorAffiliation.vue diff --git a/src/components/Form/authorAffiliation/FieldAuthorAffiliation.vue b/src/components/Form/authorAffiliation/FieldAuthorAffiliation.vue deleted file mode 100644 index cad40376..00000000 --- a/src/components/Form/authorAffiliation/FieldAuthorAffiliation.vue +++ /dev/null @@ -1,22 +0,0 @@ - - - From 23bed2eeeee2a80d381b863735dce21a0999e731 Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Thu, 3 Oct 2024 11:20:41 +0200 Subject: [PATCH 04/22] Ror icon --- src/components/Icon/icons/Ror.vue | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 src/components/Icon/icons/Ror.vue diff --git a/src/components/Icon/icons/Ror.vue b/src/components/Icon/icons/Ror.vue new file mode 100644 index 00000000..8308a409 --- /dev/null +++ b/src/components/Icon/icons/Ror.vue @@ -0,0 +1,18 @@ + From d6994095b5d0651cc1193d5adccb94d4eff7eb24 Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Thu, 3 Oct 2024 11:40:43 +0200 Subject: [PATCH 05/22] Ror icon --- src/components/Icon/Icon.vue | 2 ++ src/components/Icon/icons/Ror.vue | 45 ++++++++++++++++++++++++------- 2 files changed, 38 insertions(+), 9 deletions(-) diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue index a67339d1..7d4db91a 100644 --- a/src/components/Icon/Icon.vue +++ b/src/components/Icon/Icon.vue @@ -100,6 +100,7 @@ import ReadRecommendation from './icons/ReadRecommendation.vue'; import ReviewAssignments from './icons/ReviewAssignments.vue'; import ReviewRequestDeclined from './icons/ReviewRequestDeclined.vue'; import ReviewSent from './icons/ReviewSent.vue'; +import Ror from './icons/Ror.vue'; import Search from './icons/Search.vue'; import Settings from './icons/Settings.vue'; import Sort from './icons/Sort.vue'; @@ -176,6 +177,7 @@ const svgIcons = { ReviewAssignments, ReviewRequestDeclined, ReviewSent, + Ror, Search, Settings, Sort, diff --git a/src/components/Icon/icons/Ror.vue b/src/components/Icon/icons/Ror.vue index 8308a409..5bee1728 100644 --- a/src/components/Icon/icons/Ror.vue +++ b/src/components/Icon/icons/Ror.vue @@ -1,18 +1,45 @@ From 2aff46cd4b450f9441aa036144380ef007c81610 Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Thu, 3 Oct 2024 12:22:22 +0200 Subject: [PATCH 06/22] Author affiliations (work in progress) --- .../Form/fields/FieldAffiliations.stories.js | 64 ++++++---- .../Form/fields/FieldAffiliations.vue | 115 +++++++++++++++--- .../Form/mocks/field-affiliations.js | 54 -------- 3 files changed, 143 insertions(+), 90 deletions(-) diff --git a/src/components/Form/fields/FieldAffiliations.stories.js b/src/components/Form/fields/FieldAffiliations.stories.js index f6553aff..cb8f8834 100644 --- a/src/components/Form/fields/FieldAffiliations.stories.js +++ b/src/components/Form/fields/FieldAffiliations.stories.js @@ -1,3 +1,5 @@ +import {ref} from "vue"; + import FieldAffiliations from './FieldAffiliations.vue'; import PkpTable from "@/components/Table/Table.vue"; import TableHeader from "@/components/Table/TableHeader.vue"; @@ -6,11 +8,9 @@ import TableRow from "@/components/Table/TableRow.vue"; import TableColumn from "@/components/Table/TableColumn.vue"; import TableCell from "@/components/Table/TableCell.vue"; import PkpButton from "@/components/Button/Button.vue"; -import FieldText from "@/components/Form/fields/FieldText.vue"; +import Icon from "@/components/Icon/Icon.vue"; import FieldAffiliationsMock from '@/components/Form/mocks/field-affiliations'; -import FieldBaseMock from "@/components/Form/mocks/field-base"; -import FieldTextGivenNameMock from "@/components/Form/mocks/field-text-given-name"; export default { title: 'Forms/FieldAffiliations', @@ -25,18 +25,12 @@ export default { TableColumn, TableCell, PkpButton, - FieldText, + Icon, }, setup() { - const rorLogo = 'https://ror.org/assets/ror-logo.svg'; + const searchPhrase = ref(''); - const argsLookup = { - ...FieldBaseMock, - ...FieldTextGivenNameMock, - label: 'Type the institute name', - isRequired: false, - isMultilingual: false, - }; + const rows = args.rows; function dummyAction(message){ alert('"' + message + '"' + ' clicked'); @@ -60,44 +54,70 @@ export default { } } - function lookupValue(value){ - console.log('affiliationLookup: ' + value); + function lookupSearchPhrase() { + console.log('searchPhrase: ' + searchPhrase.value); } - return {args, dummyAction, translations, lookupValue }; + return {args, searchPhrase, rows, dummyAction, translations, lookupSearchPhrase}; }, template: ` Institution Translation -   +   - + {{ row.name.en }} - + - + - +
+
+ +
+
+ +
+
+
+
  - Add + Add +
+
searchPhrase: {{ searchPhrase }}
+
Icon:
+
`, }), }; diff --git a/src/components/Form/fields/FieldAffiliations.vue b/src/components/Form/fields/FieldAffiliations.vue index f79b6ef8..b6055e6e 100644 --- a/src/components/Form/fields/FieldAffiliations.vue +++ b/src/components/Form/fields/FieldAffiliations.vue @@ -1,19 +1,106 @@ diff --git a/src/components/Form/mocks/field-affiliations.js b/src/components/Form/mocks/field-affiliations.js index 2a9e801e..e78f39be 100644 --- a/src/components/Form/mocks/field-affiliations.js +++ b/src/components/Form/mocks/field-affiliations.js @@ -1,11 +1,6 @@ -import FieldBaseMock from "@/components/Form/mocks/field-base"; -import FieldTextGivenNameMock from "@/components/Form/mocks/field-text-given-name"; -import FieldBaseAutosuggest from "@/components/Form/mocks/field-autosuggest"; - export default { name: 'author-affiliations', component: 'author-affiliations', - logo: 'https://ror.org/assets/ror-logo.svg', rows: [ { id: 1, @@ -48,53 +43,4 @@ export default { } }, ], - lookup: { - ...FieldBaseMock, - ...FieldTextGivenNameMock, - label: 'Type the institute name', - isRequired: false, - isMultilingual: false, - }, - autosuggest: { - ...FieldBaseMock, - ...FieldBaseAutosuggest, - label: 'Sections', - options: [ - { - value: 1, - label: 'Articles', - }, - { - value: 2, - label: 'Editorials', - }, - { - value: 3, - label: 'Reviews', - }, - { - value: 4, - label: 'Field Notes', - }, - { - value: 5, - label: 'Roundtables', - }, - { - value: 6, - label: 'Research Reviews', - }, - { - value: 7, - label: 'Conference Proceedings', - }, - ], - value: [1], - selected: [ - { - value: 1, - label: 'Articles', - }, - ], - }, }; From b83c294361f8d0117041ceb2288e66d639b4d561 Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Thu, 3 Oct 2024 14:42:38 +0200 Subject: [PATCH 07/22] Author affiliations (work in progress) --- .../Form/fields/FieldAffiliations.stories.js | 28 +++++++++++++++++-- src/components/Icon/Icon.stories.js | 3 +- 2 files changed, 28 insertions(+), 3 deletions(-) diff --git a/src/components/Form/fields/FieldAffiliations.stories.js b/src/components/Form/fields/FieldAffiliations.stories.js index cb8f8834..a3b5b478 100644 --- a/src/components/Form/fields/FieldAffiliations.stories.js +++ b/src/components/Form/fields/FieldAffiliations.stories.js @@ -1,4 +1,4 @@ -import {ref} from "vue"; +import {computed, ref} from "vue"; import FieldAffiliations from './FieldAffiliations.vue'; import PkpTable from "@/components/Table/Table.vue"; @@ -28,6 +28,10 @@ export default { Icon, }, setup() { + /* parent */ + const primaryLocale = 'en'; + + /* current component */ const searchPhrase = ref(''); const rows = args.rows; @@ -58,7 +62,26 @@ export default { console.log('searchPhrase: ' + searchPhrase.value); } - return {args, searchPhrase, rows, dummyAction, translations, lookupSearchPhrase}; + const currentValue = computed({ + get() { + return 'hello someTest'; + }, + // setter + set(newValue) { + return newValue; + } + }); + + return { + args, + searchPhrase, + rows, + dummyAction, + translations, + lookupSearchPhrase, + primaryLocale, + currentValue, + }; }, template: ` @@ -117,6 +140,7 @@ export default {
searchPhrase: {{ searchPhrase }}
Icon:
+
currentValue: {{ currentValue }}
`, }), diff --git a/src/components/Icon/Icon.stories.js b/src/components/Icon/Icon.stories.js index 7afae93d..0373d649 100644 --- a/src/components/Icon/Icon.stories.js +++ b/src/components/Icon/Icon.stories.js @@ -49,7 +49,7 @@ export const iconGallery = { template: `
- +
{{icon}}
@@ -122,6 +122,7 @@ export const iconGallery = { 'ReviewAssignments', 'ReviewRequestDeclined', 'ReviewSent', + 'Ror', 'Search', 'Settings', 'Sort', From 869632a16e54407a1092c2092a5bd3d8d4c554f6 Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Fri, 4 Oct 2024 16:01:24 +0200 Subject: [PATCH 08/22] Author Affiliations (work in progress) --- .../Form/fields/FieldAffiliations.stories.js | 57 ++++++++++-------- src/components/Icon/Icon.vue | 60 ++++++++++++++++++- 2 files changed, 91 insertions(+), 26 deletions(-) diff --git a/src/components/Form/fields/FieldAffiliations.stories.js b/src/components/Form/fields/FieldAffiliations.stories.js index a3b5b478..d1d49332 100644 --- a/src/components/Form/fields/FieldAffiliations.stories.js +++ b/src/components/Form/fields/FieldAffiliations.stories.js @@ -1,15 +1,14 @@ -import {computed, ref} from "vue"; +import {computed, ref} from 'vue'; import FieldAffiliations from './FieldAffiliations.vue'; -import PkpTable from "@/components/Table/Table.vue"; -import TableHeader from "@/components/Table/TableHeader.vue"; -import TableBody from "@/components/Table/TableBody.vue"; -import TableRow from "@/components/Table/TableRow.vue"; -import TableColumn from "@/components/Table/TableColumn.vue"; -import TableCell from "@/components/Table/TableCell.vue"; -import PkpButton from "@/components/Button/Button.vue"; -import Icon from "@/components/Icon/Icon.vue"; - +import PkpTable from '@/components/Table/Table.vue'; +import TableHeader from '@/components/Table/TableHeader.vue'; +import TableBody from '@/components/Table/TableBody.vue'; +import TableRow from '@/components/Table/TableRow.vue'; +import TableColumn from '@/components/Table/TableColumn.vue'; +import TableCell from '@/components/Table/TableCell.vue'; +import PkpButton from '@/components/Button/Button.vue'; +import Icon from '@/components/Icon/Icon.vue'; import FieldAffiliationsMock from '@/components/Form/mocks/field-affiliations'; export default { @@ -29,14 +28,14 @@ export default { }, setup() { /* parent */ - const primaryLocale = 'en'; + // todo: access locale from upstream + const primaryLocale = $.pkp.app.primaryLocale; /* current component */ - const searchPhrase = ref(''); - - const rows = args.rows; + const searchPhrase = ref('initial value'); + const rows = ref(args.rows); - function dummyAction(message){ + function dummyAction(message) { alert('"' + message + '"' + ' clicked'); } @@ -44,16 +43,15 @@ export default { let total = Object.keys(item.name).length; let translated = 0; - for(let key in item.name) { - if(item.name[key].length > 0){ + for (let key in item.name) { + if (item.name[key].length > 0) { translated++; } } - if(total === translated){ + if (total === translated) { return 'All Translations Available'; - } - else{ + } else { return translated + ' Of ' + total + ' Languages Completed'; } } @@ -69,7 +67,7 @@ export default { // setter set(newValue) { return newValue; - } + }, }); return { @@ -93,7 +91,7 @@ export default { - {{ row.name.en }} + {{ row.name[primaryLocale] }} - +
+ +
+ @@ -139,13 +146,13 @@ export default {
searchPhrase: {{ searchPhrase }}
-
Icon:
currentValue: {{ currentValue }}
+
`, }), }; export const Base = { - args: { ...FieldAffiliationsMock }, + args: {...FieldAffiliationsMock}, }; diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue index 7d4db91a..a51c7422 100644 --- a/src/components/Icon/Icon.vue +++ b/src/components/Icon/Icon.vue @@ -27,6 +27,53 @@ /> + + @@ -202,7 +249,8 @@ const isSvgIcon = computed(() => !!svgIcons[props.icon]); const classes = computed(() => { let classes = []; - if (props.icon !== 'orcid') { + let nonFontAwesomeIcons = ['orcid', 'ror']; + if (!nonFontAwesomeIcons.includes(props.icon)) { classes.push('fa-' + props.icon); } if (props.inline) { @@ -251,4 +299,14 @@ const classes = computed(() => { fill: #ffffff; } } + +/** + * Ror icon + */ +.pkpIcon--ror { + display: inline-block; + width: 1.5em; + height: 1.5em; + vertical-align: middle; +} From 4e242a11960df6a9b6f24eb60b4c26f0a2b644a7 Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Mon, 7 Oct 2024 17:42:06 +0200 Subject: [PATCH 09/22] FieldAffiliations.vue --- src/components/Form/FormGroup.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Form/FormGroup.vue b/src/components/Form/FormGroup.vue index 122190b0..84350664 100644 --- a/src/components/Form/FormGroup.vue +++ b/src/components/Form/FormGroup.vue @@ -53,6 +53,7 @@ + + From ab70b5ef864f2bef0e0feecc569eba39e47429be Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Mon, 7 Oct 2024 19:03:31 +0200 Subject: [PATCH 11/22] Author Affiliations (work in progress) --- .../Form/fields/FieldAffiliations.vue | 468 ++++++------------ 1 file changed, 146 insertions(+), 322 deletions(-) diff --git a/src/components/Form/fields/FieldAffiliations.vue b/src/components/Form/fields/FieldAffiliations.vue index a8e1da37..33d3bfe0 100644 --- a/src/components/Form/fields/FieldAffiliations.vue +++ b/src/components/Form/fields/FieldAffiliations.vue @@ -1,350 +1,174 @@ - - + From 84eb8c08c6f2ad828a2379a00da49aaa9ad3f25b Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Tue, 8 Oct 2024 09:04:23 +0200 Subject: [PATCH 12/22] Author Affiliations (work in progress) --- .../Form/fields/FieldAffiliations.vue | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/components/Form/fields/FieldAffiliations.vue b/src/components/Form/fields/FieldAffiliations.vue index 33d3bfe0..007e3cd1 100644 --- a/src/components/Form/fields/FieldAffiliations.vue +++ b/src/components/Form/fields/FieldAffiliations.vue @@ -1,4 +1,5 @@ @@ -104,8 +107,8 @@ const components = { const args = {...FieldAffiliationsMock}; const props = defineProps({ - value: {String}, - currentValue: String, + value: {Array}, + // currentValue: String, }); /* parent */ @@ -117,11 +120,11 @@ console.log(primaryLocale); const searchPhrase = ref('initial value'); const rows = ref(args.rows); -const dummyAction = function(message) { +const dummyAction = function (message) { alert('"' + message + '"' + ' clicked'); } -const translations = function(item) { +const translations = function (item) { let total = Object.keys(item.name).length; let translated = 0; @@ -138,7 +141,7 @@ const translations = function(item) { } } -const lookupSearchPhrase = function() { +const lookupSearchPhrase = function () { console.log('searchPhrase: ' + searchPhrase.value); } @@ -153,7 +156,7 @@ const currentValue = computed({ }, }); -const change = function(name, prop, newValue, localeKey) { +const change = function (name, prop, newValue, localeKey) { if (localeKey) { args[prop][localeKey] = newValue; } else { From d469b62c092672dc73110ba2c086a500055d8d97 Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Tue, 8 Oct 2024 15:05:15 +0200 Subject: [PATCH 13/22] Author affiliations (work in progress) --- .../Form/fields/FieldAffiliations.vue | 144 +++++++++--------- 1 file changed, 74 insertions(+), 70 deletions(-) diff --git a/src/components/Form/fields/FieldAffiliations.vue b/src/components/Form/fields/FieldAffiliations.vue index 007e3cd1..f4f87507 100644 --- a/src/components/Form/fields/FieldAffiliations.vue +++ b/src/components/Form/fields/FieldAffiliations.vue @@ -1,5 +1,4 @@ + + From b1c24d00da248f36e7450635f00e725c8d55b8df Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Tue, 8 Oct 2024 17:41:26 +0200 Subject: [PATCH 14/22] Author affiliations (work in progress) --- .storybook/public/mockServiceWorker.js | 19 +-- .../Form/fields/FieldAffiliations.mdx | 2 +- .../Form/fields/FieldAffiliations.stories.js | 121 ++++++++++----- .../Form/fields/FieldAffiliations.vue | 73 ++++++--- .../Form/mocks/field-affiliations.js | 142 +++++++++++++----- 5 files changed, 251 insertions(+), 106 deletions(-) diff --git a/.storybook/public/mockServiceWorker.js b/.storybook/public/mockServiceWorker.js index e369128e..a8262f09 100644 --- a/.storybook/public/mockServiceWorker.js +++ b/.storybook/public/mockServiceWorker.js @@ -2,13 +2,14 @@ /* tslint:disable */ /** - * Mock Service Worker (2.0.11). + * Mock Service Worker. * @see https://github.com/mswjs/msw * - Please do NOT modify this file. * - Please do NOT serve this file on production. */ -const INTEGRITY_CHECKSUM = 'c5f7f8e188b673ea4e677df7ea3c5a39' +const PACKAGE_VERSION = '2.4.9' +const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423' const IS_MOCKED_RESPONSE = Symbol('isMockedResponse') const activeClientIds = new Set() @@ -48,7 +49,10 @@ self.addEventListener('message', async function (event) { case 'INTEGRITY_CHECK_REQUEST': { sendToClient(client, { type: 'INTEGRITY_CHECK_RESPONSE', - payload: INTEGRITY_CHECKSUM, + payload: { + packageVersion: PACKAGE_VERSION, + checksum: INTEGRITY_CHECKSUM, + }, }) break } @@ -202,13 +206,6 @@ async function getResponse(event, client, requestId) { return passthrough() } - // Bypass requests with the explicit bypass header. - // Such requests can be issued by "ctx.fetch()". - const mswIntention = request.headers.get('x-msw-intention') - if (['bypass', 'passthrough'].includes(mswIntention)) { - return passthrough() - } - // Notify the client that a request has been intercepted. const requestBuffer = await request.arrayBuffer() const clientMessage = await sendToClient( @@ -240,7 +237,7 @@ async function getResponse(event, client, requestId) { return respondWithMock(clientMessage.data) } - case 'MOCK_NOT_FOUND': { + case 'PASSTHROUGH': { return passthrough() } } diff --git a/src/components/Form/fields/FieldAffiliations.mdx b/src/components/Form/fields/FieldAffiliations.mdx index f01b4afd..e5d01ee5 100644 --- a/src/components/Form/fields/FieldAffiliations.mdx +++ b/src/components/Form/fields/FieldAffiliations.mdx @@ -4,7 +4,7 @@ import * as FieldAffiliationsStories from './FieldAffiliations.stories.js'; -# FieldAuthorAffiliation +# FieldAffiliation ## Usage diff --git a/src/components/Form/fields/FieldAffiliations.stories.js b/src/components/Form/fields/FieldAffiliations.stories.js index d1d49332..d5f56dbf 100644 --- a/src/components/Form/fields/FieldAffiliations.stories.js +++ b/src/components/Form/fields/FieldAffiliations.stories.js @@ -1,4 +1,4 @@ -import {computed, ref} from 'vue'; +import {computed, reactive, ref} from 'vue'; import FieldAffiliations from './FieldAffiliations.vue'; import PkpTable from '@/components/Table/Table.vue'; @@ -10,6 +10,7 @@ import TableCell from '@/components/Table/TableCell.vue'; import PkpButton from '@/components/Button/Button.vue'; import Icon from '@/components/Icon/Icon.vue'; import FieldAffiliationsMock from '@/components/Form/mocks/field-affiliations'; +import {t} from "@/utils/i18n"; export default { title: 'Forms/FieldAffiliations', @@ -25,85 +26,117 @@ export default { TableCell, PkpButton, Icon, + t }, setup() { - /* parent */ - // todo: access locale from upstream + const value = reactive(args.rows); + const primaryLocale = $.pkp.app.primaryLocale; - /* current component */ - const searchPhrase = ref('initial value'); - const rows = ref(args.rows); + // const props = defineProps({ + // value: { + // type: Array, + // default() { + // return []; + // }, + // }, + // localeKey: {type: String}, + // primaryLocale: {type: String}, + // primaryLocaleKey: {type: String}, + // isMultilingual: { + // type: Boolean, + // default() { + // return false; + // } + // }, + // }); + // + // const emits = defineEmits([ + // 'change', + // ]); - function dummyAction(message) { - alert('"' + message + '"' + ' clicked'); - } + const searchPhrase = ref(''); - function translations(item) { - let total = Object.keys(item.name).length; + const translations = function (row) { + let names = row._data.name; + let total = Object.keys(names).length; let translated = 0; - for (let key in item.name) { - if (item.name[key].length > 0) { + for (let key in names) { + if (names[key].length > 0) { translated++; } } if (total === translated) { - return 'All Translations Available'; + return 'All translations available'; + // return t('user.affiliations.translationAll', {}); } else { - return translated + ' Of ' + total + ' Languages Completed'; + return translated + ' of ' + total + ' languages completed'; + // return t('user.affiliations.translationSome', {translated: translated, total: total}); } } - function lookupSearchPhrase() { - console.log('searchPhrase: ' + searchPhrase.value); - } - const currentValue = computed({ get() { - return 'hello someTest'; + return props.isMultilingual ? props.value[props.localeKey] : props.value; }, - // setter - set(newValue) { - return newValue; + set: function (newVal) { + this.$emit('change', name, 'value', newVal); }, }); + const change = function (name, prop, newValue, localeKey) { + if (localeKey) { + props[prop][localeKey] = newValue; + } else { + props[prop] = newValue; + } + }; + + const dummyAction = function (message) { + alert('"' + message + '"' + ' clicked'); + } + + const lookupSearchPhrase = function () { + console.log('searchPhrase: ' + searchPhrase.value); + } + return { - args, + value, searchPhrase, - rows, + primaryLocale, + currentValue, + change, dummyAction, translations, lookupSearchPhrase, - primaryLocale, - currentValue, }; }, template: ` - Institution - Translation + institution + translation   - + - {{ row.name[primaryLocale] }} + {{ row._data.name[primaryLocale] }} -
+
@@ -127,27 +160,35 @@ export default {
-   +   Add +
-
searchPhrase: {{ searchPhrase }}
-
currentValue: {{ currentValue }}
- +
+
+
+ + + + + +
`, }), diff --git a/src/components/Form/fields/FieldAffiliations.vue b/src/components/Form/fields/FieldAffiliations.vue index f4f87507..0669860f 100644 --- a/src/components/Form/fields/FieldAffiliations.vue +++ b/src/components/Form/fields/FieldAffiliations.vue @@ -2,7 +2,7 @@ Institution - Translation + {{ t('user.affiliations.translation') }}   @@ -18,7 +18,6 @@
-
@@ -63,11 +63,10 @@ -

 

- +
- +
locale: {{ primaryLocale }}
searchPhrase: {{ searchPhrase }}
@@ -77,6 +76,7 @@ diff --git a/src/components/Form/mocks/field-affiliations.js b/src/components/Form/mocks/field-affiliations.js index 41c94aef..6b3ca7d0 100644 --- a/src/components/Form/mocks/field-affiliations.js +++ b/src/components/Form/mocks/field-affiliations.js @@ -9,8 +9,10 @@ export default { "ror": "https://ror.org/0213rcc28", "name": { "en": "Simon Fraser University", + "fr_CA": "Simon Fraser University", "de": "Simon Fraser University", - "fr_CA": "Simon Fraser University" + "nl": "Simon Fraser University", + "tr": "Simon Fraser University", } }, "_hasLoadableAdapters": false, @@ -37,8 +39,10 @@ export default { "ror": "https://ror.org/02e2c7k09", "name": { "en": "Delft University of Technology", + "fr_CA": "", "de": "", - "fr_CA": "" + "nl": "Technische Universiteit Delft", + "tr": "Delft University of Technology", } }, "_hasLoadableAdapters": false, @@ -65,8 +69,10 @@ export default { "ror": "", "name": { "en": "German National Library of Science and Technology", + "fr_CA": "", "de": "Technische Informationsbibliothek (TIB)", - "fr_CA": "" + "nl": "", + "tr": "", } }, "_hasLoadableAdapters": false, @@ -93,8 +99,10 @@ export default { "ror": "https://ror.org/0304hq317", "name": { "en": "Leibniz University Hannover", + "fr_CA": "", "de": "Technische Universität Hannover", - "fr_CA": "" + "nl": "", + "tr": "", } }, "_hasLoadableAdapters": false, @@ -115,4 +123,339 @@ export default { } } }, + rorsApiResponse: { + "itemsMax": 110723, + "items": [ + { + "displayLocale": "en", + "id": 1, + "isActive": true, + "name": { + "en": "RMIT University", + "fr_CA": "" + }, + "ror": "https://ror.org/04ttjf776" + }, + { + "displayLocale": "en", + "id": 2, + "isActive": true, + "name": { + "en": "La Trobe University", + "fr_CA": "" + }, + "ror": "https://ror.org/01rxfrp27" + }, + { + "displayLocale": "en", + "id": 3, + "isActive": true, + "name": { + "en": "Victoria University", + "fr_CA": "" + }, + "ror": "https://ror.org/04j757h98" + }, + { + "displayLocale": "en", + "id": 4, + "isActive": true, + "name": { + "en": "University of New England", + "fr_CA": "" + }, + "ror": "https://ror.org/04r659a56" + }, + { + "displayLocale": "en", + "id": 5, + "isActive": true, + "name": { + "en": "Griffith University", + "fr_CA": "" + }, + "ror": "https://ror.org/02sc3r913" + }, + { + "displayLocale": "en", + "id": 6, + "isActive": true, + "name": { + "en": "Central Queensland University", + "fr_CA": "" + }, + "ror": "https://ror.org/023q4bk22" + }, + { + "displayLocale": "en", + "id": 7, + "isActive": true, + "name": { + "en": "University of South Australia", + "fr_CA": "" + }, + "ror": "https://ror.org/01p93h210" + }, + { + "displayLocale": "en", + "id": 8, + "isActive": true, + "name": { + "en": "Bond University", + "fr_CA": "" + }, + "ror": "https://ror.org/006jxzx88" + }, + { + "displayLocale": "en", + "id": 9, + "isActive": true, + "name": { + "en": "Charles Sturt University", + "fr_CA": "" + }, + "ror": "https://ror.org/00wfvh315" + }, + { + "displayLocale": "en", + "id": 10, + "isActive": true, + "name": { + "en": "Federation University", + "fr_CA": "" + }, + "ror": "https://ror.org/05qbzwv83" + }, + { + "displayLocale": "en", + "id": 11, + "isActive": true, + "name": { + "en": "Burnet Institute", + "fr_CA": "" + }, + "ror": "https://ror.org/05ktbsm52" + }, + { + "displayLocale": "en", + "id": 12, + "isActive": true, + "name": { + "en": "Mater Research", + "fr_CA": "" + }, + "ror": "https://ror.org/00nx6aa03" + }, + { + "displayLocale": "en", + "id": 13, + "isActive": true, + "name": { + "en": "St Vincents Institute of Medical Research", + "fr_CA": "" + }, + "ror": "https://ror.org/02k3cxs74" + }, + { + "displayLocale": "en", + "id": 14, + "isActive": true, + "name": { + "en": "The Heart Research Institute", + "fr_CA": "" + }, + "ror": "https://ror.org/046fa4y88" + }, + { + "displayLocale": "en", + "id": 15, + "isActive": true, + "name": { + "en": "University Mental Health Research Institute", + "fr_CA": "" + }, + "ror": "https://ror.org/02d439m40" + }, + { + "displayLocale": "en", + "id": 16, + "isActive": true, + "name": { + "en": "Rolls-Royce (United Kingdom)", + "fr_CA": "" + }, + "ror": "https://ror.org/04h08p482" + }, + { + "displayLocale": "en", + "id": 17, + "isActive": true, + "name": { + "en": "BP (United Kingdom)", + "fr_CA": "" + }, + "ror": "https://ror.org/01zctcs90" + }, + { + "displayLocale": "en", + "id": 18, + "isActive": true, + "name": { + "en": "Rio Tinto (United Kingdom)", + "fr_CA": "" + }, + "ror": "https://ror.org/05m7zw681" + }, + { + "displayLocale": "en", + "id": 19, + "isActive": true, + "name": { + "en": "Arup Group (United States)", + "fr_CA": "" + }, + "ror": "https://ror.org/03awtex73" + }, + { + "displayLocale": "en", + "id": 20, + "isActive": true, + "name": { + "en": "BT Group (United Kingdom)", + "fr_CA": "" + }, + "ror": "https://ror.org/00kv9pj15" + }, + { + "displayLocale": "en", + "id": 21, + "isActive": true, + "name": { + "en": "Mater Health Services", + "fr_CA": "" + }, + "ror": "https://ror.org/03mjtdk61" + }, + { + "displayLocale": "en", + "id": 22, + "isActive": true, + "name": { + "en": "Pilkington (United Kingdom)", + "fr_CA": "" + }, + "ror": "https://ror.org/04yyp8h20" + }, + { + "displayLocale": "en", + "id": 23, + "isActive": true, + "name": { + "en": "Trojan Technologies (Canada)", + "fr_CA": "" + }, + "ror": "https://ror.org/022rkxt86" + }, + { + "displayLocale": "en", + "id": 24, + "isActive": true, + "name": { + "en": "The Alfred Hospital", + "fr_CA": "" + }, + "ror": "https://ror.org/01wddqe20" + }, + { + "displayLocale": "en", + "id": 25, + "isActive": true, + "name": { + "en": "Washington State Department of Health", + "fr_CA": "" + }, + "ror": "https://ror.org/02x2akc96" + }, + { + "displayLocale": "en", + "id": 26, + "isActive": true, + "name": { + "en": "Women's and Children's Hospital", + "fr_CA": "" + }, + "ror": "https://ror.org/03kwrfk72" + }, + { + "displayLocale": "en", + "id": 27, + "isActive": true, + "name": { + "en": "Xstrata (United Kingdom)", + "fr_CA": "" + }, + "ror": "https://ror.org/037mpqg03" + }, + { + "displayLocale": "en", + "id": 28, + "isActive": true, + "name": { + "en": "Teck (Canada)", + "fr_CA": "" + }, + "ror": "https://ror.org/05cggb038" + }, + { + "displayLocale": "en", + "id": 29, + "isActive": true, + "name": { + "en": "Hunter New England Local Health District", + "fr_CA": "" + }, + "ror": "https://ror.org/050b31k83" + }, + { + "displayLocale": "en", + "id": 30, + "isActive": true, + "name": { + "en": "Cancer Council Victoria", + "fr_CA": "" + }, + "ror": "https://ror.org/023m51b03" + } + ] + }, + /* [ rorsApiResponseItem, ... ] */ + rorsApiResponseItem: { + "displayLocale": "en", + "id": 1, + "isActive": true, + "name": { + "en": "Simon Fraser University", + "fr_CA": "Simon Fraser University", + "de": "Simon Fraser University", + "nl": "Simon Fraser University", + "tr": "Simon Fraser University", + }, + "ror": "https://ror.org/0213rcc28" + }, + newItem: { + "newId": { + "_data": { + "id": null, + "authorId": null, + "ror": "", + "name": {} + }, + "_hasLoadableAdapters": false, + "_metadataExtractionAdapters": [], + "_extractionAdaptersLoaded": false, + "_metadataInjectionAdapters": [], + "_injectionAdaptersLoaded": false, + "_localesTable": {} + } + }, }; From 2c81740c41a43ed0cfda22851dad121dbdca1e74 Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Wed, 9 Oct 2024 20:32:09 +0200 Subject: [PATCH 21/22] Author affiliations (work in progress) --- .../Form/fields/FieldAffiliations.stories.js | 99 ++++++++++--------- 1 file changed, 50 insertions(+), 49 deletions(-) diff --git a/src/components/Form/fields/FieldAffiliations.stories.js b/src/components/Form/fields/FieldAffiliations.stories.js index 4bde8a6a..2da77df9 100644 --- a/src/components/Form/fields/FieldAffiliations.stories.js +++ b/src/components/Form/fields/FieldAffiliations.stories.js @@ -1,5 +1,4 @@ import {computed, reactive, ref} from 'vue'; - import DropdownActions from "@/components/DropdownActions/DropdownActions.vue"; import FieldAffiliations from './FieldAffiliations.vue'; import PkpTable from '@/components/Table/Table.vue'; @@ -61,11 +60,11 @@ export default { const valueHelper = reactive(setValueHelper(value)); - function setValueHelper(value){ + function setValueHelper(value) { let newValue = []; - Object.keys(value).forEach(key=>{ - console.log(key ,value[key]); + Object.keys(value).forEach(key => { + console.log(key, value[key]); newValue[key] = value[key]; newValue[key]['edit'] = false; newValue[key]['actions'] = false; @@ -105,7 +104,7 @@ export default { console.log(value[affiliationId]); }; - const apiLookup = function() { + const apiLookup = function () { let rors = []; // const previousController = pendingRequests.get(this); @@ -122,7 +121,7 @@ export default { .then(response => response.json()) .then(data => { let items = data.items; - for(let i = 0; i < items.length; i++){ + for (let i = 0; i < items.length; i++) { rors.push(items[i]); } organizations = items; @@ -134,7 +133,7 @@ export default { } const lookupSearchPhrase = function () { - if(searchPhrase.value.length >= 3) { + if (searchPhrase.value.length >= 3) { // apiLookup(); // organizations = rorsApiResponse; console.log('searchPhrase: ' + searchPhrase.value); @@ -151,20 +150,20 @@ export default { ); } - const toggleActions = function(affiliationId) { + const toggleActions = function (affiliationId) { valueHelper[affiliationId].actions = !valueHelper[affiliationId].actions; }; - const toggleEdit = function(affiliationId){ + const toggleEdit = function (affiliationId) { valueHelper[affiliationId].edit = !valueHelper[affiliationId].edit; }; - const closeEdit = function(affiliationId){ + const closeEdit = function (affiliationId) { valueHelper[affiliationId].edit = !valueHelper[affiliationId].edit; toggleActions(affiliationId); }; - const deleteAffiliation = function(affiliationId) { + const deleteAffiliation = function (affiliationId) { console.log('Affiliation: ' + affiliationId + ' deleted'); } @@ -201,9 +200,7 @@ export default {   - + {{ row._data.name[primaryLocale] }} -
+

@@ -229,23 +226,31 @@ export default {

-
+
{{ translations(row) }}
-
- -
+ +
    -
    • -
    • +
  • + +
    • +
  • + +
-
- Close +
+ Close
@@ -254,8 +259,7 @@ export default {
+ aria-invalid="0">
    -
  • - @@ -288,25 +289,25 @@ export default { +
-
-

 

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel accumsan neque, ac tincidunt - risus. Sed vulputate augue ut quam ultricies elementum. In pretium euismod ipsum nec - consectetur. In eleifend sapien id porta lobortis. Fusce faucibus pharetra rutrum. Etiam - sagittis iaculis placerat. Donec ut faucibus nibh, a auctor erat. Orci varius natoque penatibus - et magnis dis parturient montes, nascetur ridiculus mus. Proin porttitor, nulla ac auctor - bibendum, urna leo dignissim arcu, id viverra justo quam vel ligula. Fusce a tincidunt justo. - Nulla vulputate accumsan massa, nec vulputate erat semper non.

-

 

-

Nunc auctor mattis quam eu tempus. Integer ornare est libero, quis sollicitudin tortor commodo - ac. Integer nisi mauris, pellentesque quis vehicula vitae, aliquet in ex. Praesent mattis metus - non fermentum convallis. Integer lobortis libero ac malesuada eleifend. In consectetur felis - efficitur nunc tempus luctus. Cras cursus mi non ipsum suscipit, non placerat purus interdum. - Nulla blandit ultricies condimentum. Proin interdum nunc lacus, et gravida libero interdum - nec.

-

 

-
+
+

 

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel accumsan neque, ac tincidunt + risus. Sed vulputate augue ut quam ultricies elementum. In pretium euismod ipsum nec + consectetur. In eleifend sapien id porta lobortis. Fusce faucibus pharetra rutrum. Etiam + sagittis iaculis placerat. Donec ut faucibus nibh, a auctor erat. Orci varius natoque penatibus + et magnis dis parturient montes, nascetur ridiculus mus. Proin porttitor, nulla ac auctor + bibendum, urna leo dignissim arcu, id viverra justo quam vel ligula. Fusce a tincidunt justo. + Nulla vulputate accumsan massa, nec vulputate erat semper non.

+

 

+

Nunc auctor mattis quam eu tempus. Integer ornare est libero, quis sollicitudin tortor commodo + ac. Integer nisi mauris, pellentesque quis vehicula vitae, aliquet in ex. Praesent mattis metus + non fermentum convallis. Integer lobortis libero ac malesuada eleifend. In consectetur felis + efficitur nunc tempus luctus. Cras cursus mi non ipsum suscipit, non placerat purus interdum. + Nulla blandit ultricies condimentum. Proin interdum nunc lacus, et gravida libero interdum + nec.

+

 

`, }), From 87ec4d5d5e3ce66f6e9469860d2f574e58532fbc Mon Sep 17 00:00:00 2001 From: GaziYucel Date: Wed, 9 Oct 2024 21:05:53 +0200 Subject: [PATCH 22/22] Author affiliations (work in progress) --- .../Form/fields/FieldAffiliations.stories.js | 95 +++++++++++-------- .../Form/mocks/field-affiliations.js | 16 ++-- 2 files changed, 63 insertions(+), 48 deletions(-) diff --git a/src/components/Form/fields/FieldAffiliations.stories.js b/src/components/Form/fields/FieldAffiliations.stories.js index 2da77df9..8ae598ea 100644 --- a/src/components/Form/fields/FieldAffiliations.stories.js +++ b/src/components/Form/fields/FieldAffiliations.stories.js @@ -61,14 +61,14 @@ export default { const valueHelper = reactive(setValueHelper(value)); function setValueHelper(value) { - let newValue = []; + let newValue = {}; Object.keys(value).forEach(key => { - console.log(key, value[key]); - newValue[key] = value[key]; - newValue[key]['edit'] = false; - newValue[key]['actions'] = false; - }) + newValue[key] = {}; // value[key]; + newValue[key].actions = false; + newValue[key].editMode = false; + newValue[key].editable = !value[key]._data.ror; + }); return newValue; } @@ -155,16 +155,17 @@ export default { }; const toggleEdit = function (affiliationId) { - valueHelper[affiliationId].edit = !valueHelper[affiliationId].edit; + valueHelper[affiliationId].editMode = !valueHelper[affiliationId].editMode; }; const closeEdit = function (affiliationId) { - valueHelper[affiliationId].edit = !valueHelper[affiliationId].edit; - toggleActions(affiliationId); + valueHelper[affiliationId].editMode = !valueHelper[affiliationId].editMode; + valueHelper[affiliationId].actions = false; }; const deleteAffiliation = function (affiliationId) { console.log('Affiliation: ' + affiliationId + ' deleted'); + valueHelper[affiliationId].actions = false; } const dummyAction = function (message) { @@ -202,7 +203,15 @@ export default { - {{ row._data.name[primaryLocale] }} + {{ id }} + {{ row._data.name[primaryLocale] }} + +   -
-
-
-

- {{ t('user.affiliations.translationLabel', {language: key}) }} -

-

- -

-
+
+
+

{{ t('user.affiliations.translationLabel', {language: key}) }}

+

+ +

-
- {{ translations(row) }} +
+
-
+
@@ -249,7 +260,7 @@ export default {
-
+
Close
@@ -257,19 +268,23 @@ export default {
- - +

+ +

+

+ +

  • diff --git a/src/components/Form/mocks/field-affiliations.js b/src/components/Form/mocks/field-affiliations.js index 6b3ca7d0..1edcc894 100644 --- a/src/components/Form/mocks/field-affiliations.js +++ b/src/components/Form/mocks/field-affiliations.js @@ -2,9 +2,9 @@ export default { name: 'author-affiliations', component: 'author-affiliations', items: { - "1": { + "12": { "_data": { - "id": 1, + "id": 12, "authorId": 5, "ror": "https://ror.org/0213rcc28", "name": { @@ -32,9 +32,9 @@ export default { "zh_CN": "zh_Hans" } }, - "2": { + "13": { "_data": { - "id": 2, + "id": 13, "authorId": 5, "ror": "https://ror.org/02e2c7k09", "name": { @@ -62,9 +62,9 @@ export default { "zh_CN": "zh_Hans" } }, - "3": { + "14": { "_data": { - "id": 3, + "id": 14, "authorId": 5, "ror": "", "name": { @@ -92,9 +92,9 @@ export default { "zh_CN": "zh_Hans" } }, - "4": { + "15": { "_data": { - "id": 4, + "id": 15, "authorId": 5, "ror": "https://ror.org/0304hq317", "name": {