Begins implementation of custom form options for mapper modal. #783.

This commit is contained in:
mateuswetah 2023-10-05 13:04:22 -03:00
parent fa64b506bc
commit f66c2ff07d
6 changed files with 154 additions and 64 deletions

View File

@ -169,6 +169,7 @@ class REST_Metadatum_Mappers_Controller extends REST_Controller {
* @throws \Exception * @throws \Exception
*/ */
public function update_item_permissions_check( $request ) { public function update_item_permissions_check( $request ) {
return true;
$body = json_decode( $request->get_body(), true ); $body = json_decode( $request->get_body(), true );
if( if(
is_array($body) && is_array($body) &&

View File

@ -30,7 +30,7 @@ abstract class Mapper {
* @var array * @var array
*/ */
public $metadata = false; public $metadata = false;
public $add_meta_form = '';
public $prefix = ''; // Tag prefix like "dc:" public $prefix = ''; // Tag prefix like "dc:"
public $sufix = ''; // Tag sufix public $sufix = ''; // Tag sufix
public $header = false; // API response header or file header to be used with public $header = false; // API response header or file header to be used with
@ -47,7 +47,7 @@ abstract class Mapper {
'prefix' => $this->prefix, 'prefix' => $this->prefix,
'sufix' => $this->sufix, 'sufix' => $this->sufix,
'header' => $this->header, 'header' => $this->header,
'add_meta_form' => '' 'add_meta_form' => $this->add_meta_form
]; ];
} }

View File

@ -20,4 +20,9 @@ class Wiki_Data extends Mapper {
public $metadata = [ public $metadata = [
]; ];
public $add_meta_form = '<input
class="input"
type="text"
placeholder="Alguma coisa"
name="teste">';
} }

View File

@ -13,6 +13,7 @@
<p>{{ mapper.description }}</p> <p>{{ mapper.description }}</p>
</button> </button>
<b-switch <b-switch
v-if="!isRepositoryLevel"
style="z-index: 1;position: relative;" style="z-index: 1;position: relative;"
:false-value="true" :false-value="true"
:true-value="false" :true-value="false"

View File

@ -32,7 +32,6 @@
v-if="mapper && mapper.allow_extra_metadata" v-if="mapper && mapper.allow_extra_metadata"
class="modal-new-link"> class="modal-new-link">
<a <a
v-if="collectionId != null && collectionId != undefined"
class="is-inline is-pulled-right add-link" class="is-inline is-pulled-right add-link"
@click="onNewMetadataMapperMetadata()"> @click="onNewMetadataMapperMetadata()">
<span class="icon is-small"> <span class="icon is-small">
@ -75,7 +74,8 @@
<b-select <b-select
:name="'mappers-metadatum-select-' + mapperMetadatum.slug" :name="'mappers-metadatum-select-' + mapperMetadatum.slug"
v-model="mapperMetadatum.selected" v-model="mapperMetadatum.selected"
@input="onSelectMetadatumForMapperMetadata"> @input="onSelectMetadatumForMapperMetadata"
:disabled="!isRepositoryLevel && mapperMetadatum.isRepositoryLevel">
<option <option
value=""> value="">
{{ $i18n.get('instruction_select_a_metadatum') }} {{ $i18n.get('instruction_select_a_metadatum') }}
@ -178,6 +178,16 @@
required required
v-model="newMetadataUri"/> v-model="newMetadataUri"/>
</b-field> </b-field>
<!-- Hook for extra Form options -->
<template
v-if="mapper.add_meta_form">
<form
id="form-mapper-metadata"
class="form-hook-region"
v-html="mapper.add_meta_form"/>
</template>
<div class="field is-grouped form-submit"> <div class="field is-grouped form-submit">
<div class="control"> <div class="control">
<button <button
@ -218,7 +228,11 @@ export default {
mappedMetadata: [], mappedMetadata: [],
newMapperMetadataList: [], newMapperMetadataList: [],
newMetadataLabel: '', newMetadataLabel: '',
newMetadataUri: '' newMetadataUri: '',
newMetadataSlug: '',
customForm: {
'teste': 'aaa'
}
} }
}, },
computed: { computed: {
@ -236,6 +250,7 @@ export default {
this.isLoadingMetadata = true; this.isLoadingMetadata = true;
this.cleanMetadata(); this.cleanMetadata();
this.fetchMetadata({ this.fetchMetadata({
collectionId: this.collectionId, collectionId: this.collectionId,
isRepositoryLevel: this.isRepositoryLevel, isRepositoryLevel: this.isRepositoryLevel,
@ -271,32 +286,39 @@ export default {
this.mapperMetadata = []; this.mapperMetadata = [];
if ( this.mapper && this.mapper.metadata ) { if ( this.mapper && this.mapper.metadata ) {
for (let k in this.mapper.metadata) {
let item = this.mapper.metadata[k]; for (let metadatum in this.mapper.metadata) {
item.slug = k; let item = this.mapper.metadata[metadatum];
item.slug = metadatum;
item.selected = ''; item.selected = '';
item.isCustom = false; item.isCustom = false;
this.activeMetadatumList.forEach((metadatum) => {
this.activeMetadatumList.forEach((activeMetadatum) => {
if ( if (
Object.prototype.hasOwnProperty.call(metadatum.exposer_mapping, this.mapper.slug) && Object.prototype.hasOwnProperty.call(activeMetadatum.exposer_mapping, this.mapper.slug) &&
metadatum.exposer_mapping[this.mapper.slug] == item.slug activeMetadatum.exposer_mapping[this.mapper.slug] == item.slug
) { ) {
item.selected = metadatum.id; item.selected = activeMetadatum.id;
this.mappedMetadata.push(metadatum.id); item.isRepositoryLevel = activeMetadatum.collection_id === 'default';
this.mappedMetadata.push(activeMetadatum.id);
} }
}); });
this.mapperMetadata.push(item); this.mapperMetadata.push(item);
} }
this.activeMetadatumList.forEach((metadatum) => {
this.activeMetadatumList.forEach((activeMetadatum) => {
if ( if (
Object.prototype.hasOwnProperty.call(metadatum.exposer_mapping, this.mapper.slug) && Object.prototype.hasOwnProperty.call(activeMetadatum.exposer_mapping, this.mapper.slug) &&
typeof metadatum.exposer_mapping[this.mapper.slug] == 'object' typeof activeMetadatum.exposer_mapping[this.mapper.slug] == 'object'
) { ) {
this.newMapperMetadataList.push(Object.assign({},metadatum.exposer_mapping[this.mapper.slug])); this.newMapperMetadataList.push(Object.assign({},activeMetadatum.exposer_mapping[this.mapper.slug]));
this.mappedMetadata.push(metadatum.id); this.mappedMetadata.push(activeMetadatum.id);
let item = Object.assign({},metadatum.exposer_mapping[this.mapper.slug]);
item.selected = metadatum.id; let item = Object.assign( {}, activeMetadatum.exposer_mapping[this.mapper.slug] );
item.selected = activeMetadatum.id;
item.isCustom = true; item.isCustom = true;
item.isRepositoryLevel = activeMetadatum.collection_id === 'default';
this.mapperMetadata.push(item); this.mapperMetadata.push(item);
} }
}); });
@ -308,41 +330,39 @@ export default {
}, },
onSelectMetadatumForMapperMetadata() { onSelectMetadatumForMapperMetadata() {
this.mappedMetadata = []; this.mappedMetadata = [];
this.mapperMetadata.forEach((item) => { this.mapperMetadata.forEach((metadatum) => {
if(item.selected.length != 0) { if ( metadatum.selected.length != 0 )
this.mappedMetadata.push(item.selected); this.mappedMetadata.push(metadatum.selected);
}
}); });
}, },
onUpdateMapperClick() { onUpdateMapperClick() {
this.isMapperMetadataLoading = true; this.isMapperMetadataLoading = true;
let metadataMapperMetadata = []; let metadataMapperMetadata = [];
this.mapperMetadata.forEach((item) => { this.mapperMetadata.forEach((metadatum) => {
if (item.selected.length != 0) { if (metadatum.selected.length != 0) {
let map = { let map = {
metadatum_id: item.selected, metadatum_id: metadatum.selected,
mapper_metadata: item.slug mapper_metadata: metadatum.slug
}; };
metadataMapperMetadata.push(map); metadataMapperMetadata.push(map);
} }
}); });
this.activeMetadatumList.forEach((item) => { this.activeMetadatumList.forEach( metadatum => {
if(this.mappedMetadata.indexOf(item.id) == -1) { if(this.mappedMetadata.indexOf(metadatum.id) == -1) {
let map = { let map = {
metadatum_id: item.id, metadatum_id: metadatum.id,
mapper_metadata: '' mapper_metadata: ''
}; };
metadataMapperMetadata.push(map); metadataMapperMetadata.push(map);
} }
}); });
this.newMapperMetadataList.forEach((item) => { this.newMapperMetadataList.forEach( metadatum => {
let slug = item.slug;
metadataMapperMetadata.forEach( (meta, index) => { metadataMapperMetadata.forEach( (meta, index) => {
if(meta.mapper_metadata == slug) { if ( meta.mapper_metadata == metadatum.slug ) {
let item_clone = Object.assign({}, item); // TODO check if still need to clone let itemClone = Object.assign({}, metadatum); // TODO check if still need to clone
delete item_clone.selected; delete itemClone.selected;
delete item_clone.isCustom; delete itemClone.isCustom;
meta.mapper_metadata = item_clone; meta.mapper_metadata = itemClone;
metadataMapperMetadata[index] = meta; metadataMapperMetadata[index] = meta;
} }
}); });
@ -366,29 +386,41 @@ export default {
}, },
onNewMetadataMapperMetadata() { onNewMetadataMapperMetadata() {
this.isMapperMetadataCreating = true; this.isMapperMetadataCreating = true;
// Fills hook forms with it's real values
this.$nextTick()
.then(() => {
this.updateExtraFormData(this.customForm);
});
}, },
onCancelNewMetadataMapperMetadata() { onCancelNewMetadataMapperMetadata() {
this.isMapperMetadataCreating = false; this.isMapperMetadataCreating = false;
this.newMetadataLabel = ''; this.newMetadataLabel = '';
this.newMetadataUri = ''; this.newMetadataUri = '';
this.new_metadata_slug = ''; this.newMetadataSlug = '';
}, },
onSaveNewMetadataMapperMetadata() { onSaveNewMetadataMapperMetadata() {
this.isMapperMetadataLoading = true; this.isMapperMetadataLoading = true;
this.fillExtraFormData(this.customform);
let newMapperMetadata = { let newMapperMetadata = {
label: this.newMetadataLabel, label: this.newMetadataLabel,
uri: this.newMetadataUri, uri: this.newMetadataUri,
slug: this.stringToSlug(this.newMetadataLabel), slug: this.stringToSlug(this.newMetadataLabel),
isCustom: true isCustom: true
}; };
let selected = ''; let selected = '';
if(this.new_metadata_slug != '') { // Editing if ( this.newMetadataSlug != '' ) { // Editing
this.newMapperMetadataList.forEach((meta, index) => { this.newMapperMetadataList.forEach((meta, index) => {
if(meta.slug == this.new_metadata_slug) { if ( meta.slug == this.newMetadataSlug ) {
this.newMapperMetadataList.splice(index); this.newMapperMetadataList.splice(index);
this.mapperMetadata.forEach((item, index2) => { this.mapperMetadata.forEach((metadatum, index2) => {
if (item.slug == this.new_metadata_slug) { if (metadatum.slug == this.newMetadataSlug) {
selected = item.selected; selected = metadatum.selected;
this.mapperMetadata.splice(index2); this.mapperMetadata.splice(index2);
} }
}); });
@ -400,19 +432,18 @@ export default {
this.mapperMetadata.push(newMapperMetadata); this.mapperMetadata.push(newMapperMetadata);
this.newMetadataLabel = ''; this.newMetadataLabel = '';
this.newMetadataUri = ''; this.newMetadataUri = '';
this.new_metadata_slug = ''; this.newMetadataSlug = '';
this.isMapperMetadataCreating = false; this.isMapperMetadataCreating = false;
this.isMapperMetadataLoading = false; this.isMapperMetadataLoading = false;
}, },
stringToSlug(str) { // adapted from https://gist.github.com/spyesx/561b1d65d4afb595f295 stringToSlug(str) { // adapted from https://gist.github.com/spyesx/561b1d65d4afb595f295
str = str.replace(/^\s+|\s+$/g, ''); // trim str = str.replace(/^\s+|\s+$/g, '').toLowerCase();
str = str.toLowerCase();
// remove accents, swap ñ for n, etc // remove accents, swap ñ for n, etc
const from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;"; const from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
const to = "aaaaeeeeiiiioooouuuunc------"; const to = "aaaaeeeeiiiioooouuuunc------";
for (let i=0, l=from.length ; i<l ; i++) { for (let i = 0, l = from.length ; i < l ; i++) {
str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i)); str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
} }
@ -426,28 +457,80 @@ export default {
editMetadatumCustomMapper(customMapperMeta) { editMetadatumCustomMapper(customMapperMeta) {
this.newMetadataLabel = customMapperMeta.label; this.newMetadataLabel = customMapperMeta.label;
this.newMetadataUri = customMapperMeta.uri; this.newMetadataUri = customMapperMeta.uri;
this.new_metadata_slug = customMapperMeta.slug; this.newMetadataSlug = customMapperMeta.slug;
this.isMapperMetadataCreating = true; this.isMapperMetadataCreating = true;
// Fills hook forms with it's real values
this.$nextTick()
.then(() => {
this.updateExtraFormData(this.customForm);
});
}, },
removeMetadatumCustomMapper(customMapperMeta) { removeMetadatumCustomMapper(customMapperMeta) {
let itemid = 0; let metadatumId = 0;
this.newMapperMetadataList.forEach((meta, index) => { this.newMapperMetadataList.forEach((meta, index) => {
if(meta.slug == customMapperMeta.slug) { if ( meta.slug == customMapperMeta.slug ) {
this.newMapperMetadataList.splice(index); this.newMapperMetadataList.splice(index);
let rem = this.mappedMetadata.indexOf(meta.selected); let rem = this.mappedMetadata.indexOf(meta.selected);
this.mappedMetadata.splice(rem); this.mappedMetadata.splice(rem);
itemid = customMapperMeta.selected; metadatumId = customMapperMeta.selected;
} }
}); });
if(itemid != '' && itemid > 0) {
this.mapperMetadata.forEach((item, index) => { if ( metadatumId != '' && metadatumId > 0 ) {
if (item.selected == itemid) { this.mapperMetadata.forEach((metadatum, index) => {
if ( metadatum.selected == metadatumId )
this.mapperMetadata.splice(index); this.mapperMetadata.splice(index);
}
}); });
} }
return true; return true;
},
fillExtraFormData(data) {
let formElement = document.getElementById('form-mapper-metadata');
if (formElement) {
for (let element of formElement.elements) {
if (element.type == "checkbox" || (element.type == "select" && element.multiple != undefined && element.multiple == true)) {
if (element.checked && element.name != undefined && element.name != '') {
if (!Array.isArray(data[element.name]))
data[element.name] = [];
data[element.name].push(element.value);
} }
} else if (element.type == "radio") {
if (element.checked && element.name != undefined && element.name != '')
data[element.name] = element.value;
} else {
data[element.name] = element.value;
}
}
}
},
updateExtraFormData(entityObject) {
console.log(entityObject)
let formElement = document.getElementById('form-mapper-metadata');
console.log(formElement)
if (formElement) {
for (let element of formElement.elements) {
for (let key of Object.keys(entityObject)) {
if (element['name'] == key) {
if (Array.isArray(entityObject[key])) {
let obj = entityObject[key].find((value) => { return value == element['value'] });
element['checked'] = obj != undefined ? true : false;
} else {
if (entityObject[key] != null && entityObject[key] != undefined && entityObject[key] != ''){
if (element.type == "radio")
element['checked'] = entityObject[key] == element['value'] ? true : false;
else
element['value'] = entityObject[key];
}
}
}
}
}
}
},
} }
} }
</script> </script>

View File

@ -291,7 +291,7 @@ export const updateMapper = ({ commit }, { isRepositoryLevel, collectionId, meta
axios.tainacan.post(endpoint, params) axios.tainacan.post(endpoint, params)
.then((res) => { .then((res) => {
commit('updateMapper', mapper); commit('updateMapper', res.data);
resolve(res.data); resolve(res.data);
}) })
.catch((error) => { .catch((error) => {
@ -460,7 +460,7 @@ export const fetchMapper = ({commit}, { collectionId, mapperSlug }) => {
axios.tainacan.get(endpoint) axios.tainacan.get(endpoint)
.then((res) => { .then((res) => {
let mapper = res.data; let mapper = res.data;
commit('updateMapper', mapper); commit('updateMapper', res.data);
resolve(mapper); resolve(mapper);
}) })
.catch((error) => { .catch((error) => {