Utilizador:LBelo (WMB)/gpgp.js: diferenças entre revisões
Conteúdo apagado Conteúdo adicionado
Sem resumo de edição |
Sem resumo de edição |
||
Linha 366: | Linha 366: | ||
this.messagesName = { error: 'Este campo é obrigatório.' }; |
this.messagesName = { error: 'Este campo é obrigatório.' }; |
||
this.warning = 'O campo Nome está vazio.'; |
this.warning = 'O campo Nome está vazio.'; |
||
} else {this.statusName = "default" |
} else { |
||
this.statusName = "default"; |
|||
this.warning = ''; |
|||
} |
|||
} |
} |
||
}, |
}, |
Revisão das 19h11min de 23 de maio de 2024
/**
* Section to import the CSS that will interact with the Codex components
* Perhaps this snippet could be inserted into MediaWiki:Common.css
*/
addStyleSheet('Predefinição:Gpgp/style.css');
function addStyleSheet(pageTitle, sucCallback) {
var cssLink = $("<link>");
$("head").append(cssLink);
cssLink.attr({
rel: "stylesheet",
type: "text/css",
href: "https://pt.wikiversity.org/w/index.php?action=raw&ctype=text/css&title=" + pageTitle
});
console.log('loading CSS file ' + pageTitle);
}
/**
* Section for the Vue application and insertion of Codex components
*/
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: 'Identificadores',
label: 'Identificadores'
}, {
name: 'Identidade visual',
label: 'Identidade visual'
}, {
name: 'Contato',
label: 'Contato'
}, {
name: 'Submeter',
label: 'Submeter'
}],
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'">
<br>
<cdx-field :status="statusName" :messages="messagesName">
<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" @update:selected="chipsForCountry">
<template #no-results>Nenhum resultado encontrado.</template>
</cdx-lookup>
</cdx-field>
<!-- chip-container for "Países de atuação" -->
<div id="chip-container"></div>
<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>
<br>
</template>
<template v-if="tab.name === 'Pesquisadores'">
<br>
<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>
<br>
</template>
<template v-if="tab.name === 'Publicações'">
<br>
<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>
<br>
</template>
<template v-if="tab.name === 'Identificadores'">
<br>
<cdx-accordion>
<template #title>Internacionais</template>
<cdx-field>
<template #label>Wikidata</template>
<cdx-text-input v-model="inputWikidataId" aria-label="TextInput default demo"></cdx-text-input>
</cdx-field>
<cdx-field>
<template #label>Scholia</template>
<cdx-text-input v-model="inputScholiaId" aria-label="TextInput default demo"></cdx-text-input>
</cdx-field>
</cdx-accordion>
<cdx-accordion>
<template #title>Nacionais</template>
<cdx-field>
<template #label>CNPq</template>
<cdx-text-input v-model="inputCnpqId" aria-label="TextInput default demo"></cdx-text-input>
</cdx-field>
<cdx-field>
<template #label>BrCris</template>
<cdx-text-input v-model="inputBrcrisId" aria-label="TextInput default demo"></cdx-text-input>
</cdx-field>
</cdx-accordion>
<cdx-accordion>
<template #title>Outros</template>
<cdx-field>
<template #label>FAPESP</template>
<cdx-text-input v-model="inputFapespId" aria-label="TextInput default demo"></cdx-text-input>
</cdx-field>
<cdx-field>
<template #label>FAPDF</template>
<cdx-text-input v-model="inputFapdfId" aria-label="TextInput default demo"></cdx-text-input>
</cdx-field>
<cdx-field>
<template #label>Fundep</template>
<cdx-text-input v-model="inputFundepId" aria-label="TextInput default demo"></cdx-text-input>
</cdx-field>
</cdx-accordion>
<br>
</template>
<template v-if="tab.name === 'Identidade visual'">
<br>
<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>
<br>
</template>
<template v-if="tab.name === 'Contato'">
<br>
<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>
<br>
</template>
<template v-if="tab.name === 'Submeter'">
<br>
<p>{{warning}}</p>
<cdx-button action="progressive" weight="primary" @click="Create">Criar Grupo de Pesquisa</cdx-button>
<br>
</template>
</cdx-tab>
</cdx-tabs>
</cdx-dialog>
`,
methods: {
openDialog() {
this.showDialog = true;
},
Create(){
var inputName = this.inputName;
if(inputName == '' || inputName === undefined){
this.statusName = "error";
this.messagesName = { error: 'Este campo é obrigatório.' };
this.warning = 'O campo Nome está vazio.';
} else {
this.statusName = "default";
this.warning = '';
}
}
},
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 countryChips = [];
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;
}
}
}
}
}
function chipsForCountry() {
if (selectionCountry.value !== null) {
countryChips.push(selectionCountry.value);
const chipContainer = document.getElementById('chip-container');
function renderChips() {
chipContainer.innerHTML = '';
countryChips.forEach((word, index) => {
const chip = document.createElement('div');
chip.className = 'chip';
chip.innerHTML = `${word} <span class="closebtn" onclick="removeChip(${index})">x</span>`;
chipContainer.appendChild(chip);
});
}
window.removeChip = function(index) {
countryChips.splice(index, 1);
renderChips();
};
renderChips();
}
}
/**
* 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,
chipsForCountry,
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-accordion', Codex.CdxAccordion)
.component('cdx-text-input', Codex.CdxTextInput)
.component('cdx-chip-input', Codex.CdxChipInput)
.mount(mountPoint);
});