Gerador de Perfis de Grupo de Pesquisa/script.js

const elementGpgp = document.getElementById('gpgp-modal');

mw.loader.using('@wikimedia/codex').then(function (require) { const Vue = require('vue'); const Codex = require('@wikimedia/codex'); const mountPoint = elementGpgp.appendChild(document.createElement('div'));

Vue.createMwApp({ data: function () { return { showDialog: false, currentTab: 'Sobre', tabsData: [{ name: 'Sobre', label: 'Sobre' }, { name: 'Pesquisadores', label: 'Pesquisadores' }, { name: 'Publicações', label: 'Publicações' }, { name: 'Identidade visual', label: 'Identidade visual' }, { name: 'Contato', label: 'Contato' }], menuItemsSiteLanguage: [ { label: 'Português brasileiro', value: 'pt-br' }, { label: 'Português', value: 'pt' }, { label: 'Inglês', value: 'en'}, { label: 'Espanhol', value: 'es'}, { label: 'Francês', value: 'fr'}, { label: 'Alemão', value: 'de'}, { label: 'Jamponês', value: 'ja'} ], selectionSiteLanguage: 'pt-br' }; }, template: ` <cdx-button action="progressive" weight="primary">Criar Grupo de Pesquisa</cdx-button>

<cdx-dialog v-model:open="showDialog" title="Criar Grupo de Pesquisa" close-button-label="Close" :default-action="defaultAction" @default="open = false">

<cdx-tabs v-model:active="currentTab" :framed="framed"> <cdx-tab v-for="( tab, index ) in tabsData" :key="index" :name="tab.name" :label="tab.label" :disabled="tab.disabled">

<template v-if="tab.name === 'Sobre'">
<cdx-field> <template #label>Nome</template> <cdx-text-input v-model="inputName" aria-label="TextInput default demo"></cdx-text-input> </cdx-field>

<cdx-field> <template #label>Descrição</template> <cdx-text-area v-model="inputDescription" aria-label="TextArea default demo"></cdx-text-area> </cdx-field>

<cdx-field optionalFlag="(opcional)"> <template #label>Sigla</template> <template #help-text>Siglas ou abreviações do nome do grupo de pesquisa</template> <cdx-chip-input v-model:input-chips="aliasChips" remove-button-label="Remove"></cdx-chip-input> </cdx-field>

<cdx-field> <template #label>Data de início das atividades</template> <cdx-text-input v-model="inputDate" aria-label="TextInput date demo" input-type="date"></cdx-text-input> </cdx-field>

<cdx-field> <template #label>Países de atuação</template> <cdx-lookup v-model:selected="selectionCountry" :menu-items="menuItems" :menu-config="menuConfig" placeholder="Pesquise no Wikidata" @input="onInput" @load-more="onLoadMore"> <template #no-results>Nenhum resultado encontrado.</template> </cdx-lookup> </cdx-field>

<cdx-field> <template #label>Sede</template> <template #help-text>Sede do grupo de pesquisa</template> <cdx-lookup v-model:selected="selectionLocal" :menu-items="menuItems" :menu-config="menuConfig" placeholder="Pesquise no Wikidata" @input="onInput" @load-more="onLoadMore"> <template #no-results>Nenhum resultado encontrado.</template> </cdx-lookup> </cdx-field>

<cdx-field> <template #label>Instituições</template> <template #help-text> Ao selecionar um item ele será automáticamente inserido no campo abaixo </template> <cdx-lookup v-model:selected="selectionInstitutions" :menu-items="menuItems" :menu-config="menuConfig" :clearable="true" placeholder="Pesquise no Wikidata" @input="onInput" @load-more="onLoadMore" @update:selected="insertSelectedInChipInput('selectionInstitutions')"> <template #no-results>Nenhum resultado encontrado.</template> </cdx-lookup> </cdx-field>

<cdx-field> <template #help-text> Se não localizar um item no Wikidata, insira-o no campo acima </template> <cdx-chip-input v-model:input-chips="institutionsChips" remove-button-label="Remove"> </cdx-chip-input> </cdx-field>

<cdx-field> <template #label>Identificadores</template> <cdx-text-input v-model="inputId" :disabled="true" aria-label="TextInput default demo"></cdx-text-input> </cdx-field>
</template>

<template v-if="tab.name === 'Pesquisadores'">
<cdx-field> <template #label>Pesquisador principal</template> <template #help-text> Se o pesquisador não tiver um item no Wikidata apenas insira o nome dele neste campo </template> <cdx-lookup v-model:selected="selectionResearcher" :menu-items="menuItems" :menu-config="menuConfig" placeholder="Pesquise no Wikidata" @input="onInput" @load-more="onLoadMore"> <template #no-results>Nenhum resultado encontrado.</template> </cdx-lookup> </cdx-field>

<cdx-field> <template #label>Pesquisadores associados</template> <template #help-text> Ao selecionar um item ele será automáticamente inserido no campo abaixo </template> <cdx-lookup v-model:selected="selectionResearchers" :menu-items="menuItems" :menu-config="menuConfig" :clearable="true" placeholder="Pesquise no Wikidata" @input="onInput" @load-more="onLoadMore" @update:selected="insertSelectedInChipInput('selectionResearchers')"> <template #no-results>Nenhum resultado encontrado.</template> </cdx-lookup> </cdx-field>

<cdx-field> <template #help-text> Se não localizar um item no Wikidata, insira-o no campo acima </template> <cdx-chip-input v-model:input-chips="researchersChips" remove-button-label="Remove"> </cdx-chip-input> </cdx-field>
</template>

<template v-if="tab.name === 'Publicações'">
<cdx-field> <template #label>Área do conhecimento</template> <template #description>Tema de pesquisa ou campo de trabalho</template> <template #help-text> Ao selecionar um item ele será automáticamente inserido no campo abaixo </template> <cdx-lookup v-model:selected="selectionTheme" :menu-items="menuItems" :menu-config="menuConfig" :clearable="true" placeholder="Pesquise no Wikidata" @input="onInput" @load-more="onLoadMore" @update:selected="insertSelectedInChipInput('selectionTheme')"> <template #no-results>Nenhum resultado encontrado.</template> </cdx-lookup> </cdx-field>

<cdx-field> <template #help-text> Se não localizar um item no Wikidata, insira-o no campo acima </template> <cdx-chip-input v-model:input-chips="themeChips" remove-button-label="Remove"> </cdx-chip-input> </cdx-field>

<cdx-field> <template #label>Palavras-chave</template> <template #help-text> Ao selecionar um item ele será automáticamente inserido no campo abaixo </template> <cdx-lookup v-model:selected="selectionKeyWord" :menu-items="menuItems" :menu-config="menuConfig" :clearable="true" placeholder="Pesquise no Wikidata" @input="onInput" @load-more="onLoadMore" @update:selected="insertSelectedInChipInput('selectionKeyWord')"> <template #no-results>Nenhum resultado encontrado.</template> </cdx-lookup> </cdx-field>

<cdx-field> <template #help-text> Se não localizar um item no Wikidata, insira-o no campo acima </template> <cdx-chip-input v-model:input-chips="keyWordChips" remove-button-label="Remove"> </cdx-chip-input> </cdx-field>

<cdx-field> <template #label>Publicações</template> <template #description>Pesquisas já realizadas pelo grupo de pesquisa (livros, artigos etc)</template> <template #help-text> Ao selecionar um item ele será automáticamente inserido no campo abaixo </template> <cdx-lookup v-model:selected="selectionPublications" :menu-items="menuItems" :menu-config="menuConfig" :clearable="true" placeholder="Pesquise no Wikidata" @input="onInput" @load-more="onLoadMore" @update:selected="insertSelectedInChipInput('selectionPublications')"> <template #no-results>Nenhum resultado encontrado.</template> </cdx-lookup> </cdx-field>

<cdx-field> <template #help-text> Se não localizar um item no Wikidata, insira-o no campo acima </template> <cdx-chip-input v-model:input-chips="publicationsChips" remove-button-label="Remove"> </cdx-chip-input> </cdx-field>
</template>

<template v-if="tab.name === 'Identidade visual'">
<cdx-field optionalFlag="(opcional)"> <template #label>Cor</template> <template #help-text>Cor para o layout da página</template> <input id="colorPicker" type="color" value="#3366cc"> </cdx-field>

<cdx-field optionalFlag="(opcional)"> <template #label>Logo</template> <template #help-text>Logo ou imagem do grupo de pesquisa no Wikimedia Commons</template> <cdx-text-input v-model="inputLogo" placeholder="Nome da imagem.jpg" aria-label="TextInput default demo"></cdx-text-input> </cdx-field>
</template>

<template v-if="tab.name === 'Contato'">
<cdx-field optionalFlag="(opcional)"> <template #label>E-mail</template> <cdx-text-input v-model="inputEmail" aria-label="TextInput default demo"></cdx-text-input> </cdx-field>

<cdx-field optionalFlag="(opcional)"> <template #label>Site</template> <cdx-text-input v-model="inputSite" aria-label="TextInput default demo"></cdx-text-input> </cdx-field>

<cdx-field optionalFlag="(opcional)"> <template #label>Idioma do site</template> <cdx-select v-model:selected="selectionSiteLanguage" :menu-items="menuItemsSiteLanguage"></cdx-select> </cdx-field>

<cdx-field optionalFlag="(opcional)"> <template #label>Facebook</template> <cdx-text-input v-model="inputFacebook" aria-label="TextInput default demo"></cdx-text-input> </cdx-field>

<cdx-field optionalFlag="(opcional)"> <template #label>LinkedIn</template> <cdx-text-input v-model="inputLinkedIn" aria-label="TextInput default demo"></cdx-text-input> </cdx-field>

<cdx-field optionalFlag="(opcional)"> <template #label>Instagram</template> <cdx-text-input v-model="inputInstagram" aria-label="TextInput default demo"></cdx-text-input> </cdx-field>

<cdx-field optionalFlag="(opcional)"> <template #label>Twitter</template> <cdx-text-input v-model="inputTwitter" aria-label="TextInput default demo"></cdx-text-input> </cdx-field>
</template> </cdx-tab> </cdx-tabs> </cdx-dialog> `, methods: { openDialog() { this.showDialog = true; } }, setup() { // selection objects const selectionLocal = ref(null); const selectionTheme = ref(null); const selectionKeyWord = ref(null); const selectionCountry = ref(null); const selectionResearcher = ref(null); const selectionResearchers = ref(null); const selectionPublications = ref(null); const selectionInstitutions = ref(null);

// chips objects const themeChips = ref([]); const aliasChips = ref([]); const keyWordChips = ref([]); const researchersChips = ref([]); const publicationsChips = ref([]); const institutionsChips = ref([]);

// Lookup Wikidata const currentSearchTerm = ref(); const menuItems = ref([]); const menuConfig = { visibleItemLimit: 6, boldLabel: true };

function ref(value) { return Vue.ref(value); }

function insertSelectedInChipInput(field) { var fields = { 'selectionTheme': {'selection': selectionTheme, 'chips': themeChips}, 'selectionKeyWord': {'selection': selectionKeyWord, 'chips': keyWordChips}, 'selectionResearchers': {'selection': selectionResearchers, 'chips': researchersChips}, 'selectionPublications': {'selection': selectionPublications, 'chips': publicationsChips}, 'selectionInstitutions': {'selection': selectionInstitutions, 'chips': institutionsChips}, };

var selection = fields[field].selection; var chips = fields[field].chips;

// selected value has a QID if (selection.value !== null) {

// iterates over suggested items to find the selected item for (let item of menuItems.value) { if (item.value == selection.value) {

// manipulates chipInput values var payload = item.label + " (" + item.value + ")"; var payloadInChips = false; for (let chip of chips.value) { if (payload == chip.value) { payloadInChips = true; break; } } if (payloadInChips == false) { chips.value.push({ value: payload }); return; } } } } }

/** * Get search results. * * @param {string} searchTerm * @param {number} offset Optional result offset * * @return {Promise} */ function fetchResults(searchTerm, offset) { const params = new URLSearchParams({ origin: '*', action: 'wbsearchentities', format: 'json', limit: '10', props: 'url', language: 'pt', search: searchTerm }); if (offset) { params.set('continue', String(offset)); } return fetch(`https://www.wikidata.org/w/api.php?${params.toString()}`) .then((response) => response.json()); }

/** * Handle lookup input. * * TODO: this should be debounced. * * @param {string} value */ function onInput(value) { // Internally track the current search term. currentSearchTerm.value = value;

// Do nothing if we have no input. if (!value) { menuItems.value = []; return; }

fetchResults(value) .then((data) => { // Make sure this data is still relevant first. if (currentSearchTerm.value !== value) { return; }

// Reset the menu items if there are no results. if (!data.search || data.search.length === 0) { menuItems.value = []; return; }

// Build an array of menu items. const results = data.search.map((result) => { return { label: result.label, value: result.id, description: result.description }; });

// Update menuItems. menuItems.value = results; }) .catch(() => { // On error, set results to empty. menuItems.value = []; }); }

function deduplicateResults(results) { const seen = new Set(menuItems.value.map((result) => result.value)); return results.filter((result) => !seen.has(result.value)); }

function onLoadMore() { if (!currentSearchTerm.value) { return; }

fetchResults(currentSearchTerm.value, menuItems.value.length) .then((data) => { if (!data.search || data.search.length === 0) { return; }

const results = data.search.map((result) => { return { label: result.label, value: result.id, description: result.description }; });

// Update menuItems. const deduplicatedResults = deduplicateResults(results); menuItems.value.push(...deduplicatedResults); }); }

return { // functions onInput, onLoadMore, insertSelectedInChipInput,

// lookup objects menuItems, menuConfig,

// chips objects themeChips, aliasChips, keyWordChips, researchersChips, publicationsChips, institutionsChips,

// selection objects selectionLocal, selectionTheme, selectionKeyWord, selectionCountry, selectionResearcher, selectionResearchers, selectionPublications, selectionInstitutions, }; }, mounted() { elementGpgp.addEventListener('click', this.openDialog); }, unMounted() { elementGpgp.removeEventListener(this.openDialog); } }) .component('cdx-tab', Codex.CdxTab) .component('cdx-tabs', Codex.CdxTabs) .component('cdx-field', Codex.CdxField) .component('cdx-lookup', Codex.CdxLookup) .component('cdx-button', Codex.CdxButton) .component('cdx-dialog', Codex.CdxDialog) .component('cdx-select', Codex.CdxSelect) .component('cdx-text-area', Codex.CdxTextArea) .component('cdx-text-input', Codex.CdxTextInput) .component('cdx-chip-input', Codex.CdxChipInput) .mount(mountPoint); });