Merge tag '0.21.0' into develop

release 0.21.0

README.md

@@ -61,7 +61,7 @@ Please refer to our [Developers Documentation](https://tainacan.github.io/tainac
 
 Tainacan is a free, open-source software licensed under **GPLv3**. Contributions to the codebase will abide to the same license; other contributions may be under additional or other terms.
 
-To contribute to our project, you can report bugs and other issues, or suggest new features. You are also free to submit pull requests or translate Tainacan to multiple languages. If you are interested in contributing, you can get started by reading our [contribution guidelines](docs/CONTRIBUTING.md).
+To contribute to our project, you can report bugs and other issues, or suggest new features. You are also free to submit pull requests or translate Tainacan to multiple languages. If you are interested in contributing, you can get started by reading our [contribution guidelines](https://tainacan.github.io/tainacan-wiki/#/dev/CONTRIBUTING).
 
 ### Acknowledgements
 

package.json

@@ -8,11 +8,11 @@
     "build-prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js --progress --mode production"
   },
   "dependencies": {
-    "@ntohq/buefy-next": "^0.1.2",
+    "@ntohq/buefy-next": "^0.1.3",
     "@vue-leaflet/vue-leaflet": "^0.10.1",
     "another-vue3-blurhash": "^0.0.1",
-    "apexcharts": "^3.47.0",
+    "apexcharts": "^3.48.0",
-    "axios": "^1.6.7",
+    "axios": "^1.6.8",
     "blurhash": "^2.0.5",
     "bulma": "^0.9.4",
     "conditioner-core": "^2.3.3",
@@ -31,7 +31,7 @@
     "react-dom": "^18.2.0",
     "sortablejs": "^1.15.2",
     "sortablejs-vue3": "^1.2.11",
-    "swiper": "^11.0.7",
+    "swiper": "^11.1.0",
     "vue": "^3.4.21",
     "vue-countup-v3": "^1.4.1",
     "vue-imask": "^7.5.0",
@@ -40,31 +40,31 @@
     "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.7",
+    "@babel/core": "^7.24.3",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.23.8",
+    "@babel/preset-env": "^7.24.3",
-    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-react": "^7.24.1",
     "@types/leaflet": "^1.9.8",
     "@types/masonry-layout": "^4.2.7",
-    "@vue/compiler-sfc": "3.4.15",
+    "@vue/compiler-sfc": "3.4.21",
     "acorn": "^8.11.3",
     "ajv": "^8.12.0",
-    "autoprefixer": "^10.4.17",
+    "autoprefixer": "^10.4.19",
     "babel-loader": "^9.1.3",
     "circular-dependency-plugin": "5.2.2",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.9.1",
+    "css-loader": "^6.10.0",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.20.1",
+    "eslint-plugin-vue": "^9.24.0",
-    "eslint-webpack-plugin": "^4.0.1",
+    "eslint-webpack-plugin": "^4.1.0",
     "file-loader": "^6.2.0",
     "moment-locales-webpack-plugin": "^1.2.0",
-    "postcss-loader": "7.3.3",
+    "postcss-loader": "8.1.1",
     "sass-loader": "^13.3.2",
     "style-loader": "^3.3.4",
     "terser-webpack-plugin": "5.3.10",
     "vue-loader": "^17.4.2",
-    "webpack": "^5.89.0",
+    "webpack": "^5.91.0",
     "webpack-bundle-analyzer": "^4.10.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",

src/assets/css/tainacan-gutenberg-block-carousel-collections-list.css

@@ -1,5 +1,5 @@
 /**
- * Swiper 11.0.7
+ * Swiper 11.1.1
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: February 27, 2024
+ * Released on: April 9, 2024
  */
 @font-face {
   font-family: 'swiper-icons';

src/assets/css/tainacan-gutenberg-block-carousel-items-list.css

@@ -1,5 +1,5 @@
 /**
- * Swiper 11.0.7
+ * Swiper 11.1.1
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: February 27, 2024
+ * Released on: April 9, 2024
  */
 @font-face {
   font-family: 'swiper-icons';

src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css

@@ -1,5 +1,5 @@
 /**
- * Swiper 11.0.7
+ * Swiper 11.1.1
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: February 27, 2024
+ * Released on: April 9, 2024
  */
 @font-face {
   font-family: 'swiper-icons';

src/assets/css/tainacan-gutenberg-block-item-gallery.css

@@ -1,5 +1,5 @@
 /**
- * Swiper 11.0.7
+ * Swiper 11.1.1
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: February 27, 2024
+ * Released on: April 9, 2024
  */
 @font-face {
   font-family: 'swiper-icons';

src/classes/class-tainacan-background-process.php

@@ -104,6 +104,7 @@ abstract class Background_Process extends \Tainacan_WP_Background_Process {
 
 		if ( ! empty( $this->data ) ) {
 			global $wpdb;
+			$wpdb->query('START TRANSACTION');
 			$wpdb->insert(
 				$this->table, 
 				[
@@ -119,6 +120,7 @@ abstract class Background_Process extends \Tainacan_WP_Background_Process {
 				]
 			);
 			$this->ID = $wpdb->insert_id;
+			$wpdb->query('COMMIT');
 		}
 
 		return $this;
@@ -139,6 +141,7 @@ abstract class Background_Process extends \Tainacan_WP_Background_Process {
 			if (!isset($batch->output)) {
 				$batch->output = '';
 			}
+			$wpdb->query('START TRANSACTION');
 			$wpdb->update(
 				$this->table, 
 				[
@@ -150,6 +153,7 @@ abstract class Background_Process extends \Tainacan_WP_Background_Process {
 				],
 				['ID' => $key]
 			);
+			$wpdb->query('COMMIT');
 		}
 
 		return $this;
@@ -164,6 +168,7 @@ abstract class Background_Process extends \Tainacan_WP_Background_Process {
 	 */
 	public function open( $key ) {
 		global $wpdb;
+		$wpdb->query('START TRANSACTION');
 		$wpdb->update(
 			$this->table, 
 			[
@@ -171,6 +176,7 @@ abstract class Background_Process extends \Tainacan_WP_Background_Process {
 			],
 			['ID' => $key]
 		);
+		$wpdb->query('COMMIT');
 
 		return $this;
 	}
@@ -196,12 +202,13 @@ abstract class Background_Process extends \Tainacan_WP_Background_Process {
 			$params['progress_label'] = __('Process completed with errors','tainacan');
 			$params['progress_value'] = 100;
 		}
+		$wpdb->query('START TRANSACTION');
 		$wpdb->update(
 			$this->table, 
 			$params,
 			['ID' => $key]
 		);
-
+		$wpdb->query('COMMIT');
 		return $this;
 	}
 
@@ -214,10 +221,12 @@ abstract class Background_Process extends \Tainacan_WP_Background_Process {
 	 */
 	public function delete( $key ) {
 		global $wpdb;
+		$wpdb->query('START TRANSACTION');
 		$wpdb->delete(
 			$this->table, 
 			['ID' => $key]
 		);
+		$wpdb->query('COMMIT');
 		return $this;
 	}
 	
@@ -353,7 +362,8 @@ abstract class Background_Process extends \Tainacan_WP_Background_Process {
 				$task = $this->task( $task );
 			} catch (\Exception $e) {
 				// TODO: Add Stacktrace
-				$this->write_error_log($batch->key, [['datetime' => date("Y-m-d H:i:s"), 'message' => 'Fatal Error: ' . $e->getMessage()]]);
+				$this->debug('Fatal Error: ' . $e->getMessage());
+				$this->write_error_log($batch->key, [['datetime' => date("Y-m-d H:i:s"), 'message' => 'Try Fatal Error: ' . $e->getMessage()]]);
 				$this->write_error_log($batch->key, [['datetime' => date("Y-m-d H:i:s"), 'message' => 'Process aborted']]);
 				$task = false;
 				$close_status = 'errored';
@@ -398,9 +408,9 @@ abstract class Background_Process extends \Tainacan_WP_Background_Process {
 		global $wpdb;
 
 		$table  = $this->table;
-
+		$wpdb->query('START TRANSACTION');
 		$wpdb->query( $wpdb->prepare( "DELETE FROM {$table} WHERE done = FALSE AND action LIKE %s", $this->action ) ); // @codingStandardsIgnoreLine.
-
+		$wpdb->query('COMMIT');
 		return $this;
 	}
 

src/classes/entities/class-tainacan-item.php

@@ -1184,17 +1184,26 @@ class Item extends Entity {
 
 		if ( $metadata_section->is_conditional_section() ) {
 			$rules = $metadata_section->get_conditional_section_rules();
+
 			if ( !empty($rules) ) {
 				foreach ( $rules as $meta_id => $meta_values_conditional ) {
 					$meta_values = [];
 					$metadatum = new \Tainacan\Entities\Metadatum($meta_id);
 					$metadatum_type = $metadatum->get_metadata_type_object();
+
 					if ( $metadatum_type->get_primitive_type() == 'term' ) {
 						$item_metadata = new \Tainacan\Entities\Item_Metadata_Entity($this, $metadatum);
-						$term_values = $metadatum->is_multiple() ? $item_metadata->get_value() : array( $item_metadata->get_value() );
+						
+						if ( $metadatum->is_multiple() )  {
+							$term_values = $item_metadata->get_value();
 							$meta_values = array_map(function($term) {
 								return $term->get_id();
 							}, $term_values);
+						} else {
+							$term_values = $item_metadata->get_value();
+							$meta_values = $term_values == false ? [] : [ $term_values->get_id() ];
+						}
+
 					} else {
 						$item_id = $this->get_id();
 						$meta_values = get_post_meta( $item_id, $meta_id );

src/classes/libs/wp-background-process.php

@@ -81,7 +81,7 @@
 		 * @var string
 		 * @access protected
 		 */
-		protected $cron_interval;
+		protected $cron_interval = 5;
 
 		/**
 		 * Initiate new background process
@@ -289,8 +289,11 @@
 		 * @return $this
 		 */
 		protected function unlock_process() {
-			$this->debug('unlocking process');
+			$this->debug('unlocking process: '. $this->identifier . '_process_lock');
+			global $wpdb;
+			$wpdb->query('START TRANSACTION');
 			delete_site_transient( $this->identifier . '_process_lock' );
+			$wpdb->query('COMMIT');
 
 			return $this;
 		}

src/classes/mappers/class-tainacan-dublin-core.php

@@ -16,56 +16,6 @@ class Dublin_Core extends Mapper {
 	public $prefixes = [
 		'dc' => 'http://purl.org/dc/elements/1.1/'
 	];
-	public $metadata = [
-		'dc:contributor' => [
-			'label' => 'Contributor'
-		],
-		'dc:coverage' => [
-			'label' => 'Coverage'
-		],
-		'dc:creator' => [
-			'label' => 'Creator',
-		],
-		'dc:date' => [
-			'label' => 'Date',
-			'metadata_type' => 'date'
-		],
-		'dc:description' => [
-			'label' => 'Description',
-			'core_metadatum' => 'description'
-		],
-		'dc:format' => [
-			'label' => 'Format',
-		],
-		'dc:identifier' => [
-			'label' => 'Identifier'
-		],
-		'dc:language' => [
-			'label' => 'Language'
-		],
-		'dc:publisher' => [
-			'label' => 'Publisher'
-		],
-		'dc:relation' => [
-			'label' => 'Relation'
-		],
-		'dc:rights' => [
-			'label' => 'Rights'
-		],
-		'dc:source' => [
-			'label' => 'Source'
-		],
-		'dc:subject' => [
-			'label' => 'Subject'
-		],
-		'dc:title' => [
-			'label' => 'Title',
-			'core_metadatum' => 'title'
-		],
-		'dc:type' => [
-			'label' => 'Type'
-		]
-	];
 	
 	/** XML especial case **/
 	const XML_DC_NAMESPACE = 'http://purl.org/dc/elements/1.1/';
@@ -74,4 +24,75 @@ class Dublin_Core extends Mapper {
 	public $XML_append_root = 'rdf:Description'; 
 	/** END: XML especial case **/
 
+	function __construct() {
+		parent::__construct();
+
+		/* Metadata should be set here to allow translable labels */ 
+		$this->metadata = [
+			'dc:contributor' => [
+				/* translators: Label for the dc:contributor field in the Dublin Core standard */
+				'label' => __( 'Contributor', 'tainacan')
+			],
+			'dc:coverage' => [
+				/* translators: Label for the dc:coverage field in the Dublin Core standard */
+				'label' => __( 'Coverage', 'tainacan')
+			],
+			'dc:creator' => [
+				/* translators: Label for the dc:creator field in the Dublin Core standard */
+				'label' => __( 'Creator', 'tainacan')
+			],
+			'dc:date' => [
+				/* translators: Label for the dc:date field in the Dublin Core standard */
+				'label' => __( 'Date', 'tainacan'),
+				'metadata_type' => 'date'
+			],
+			'dc:description' => [
+				/* translators: Label for the dc:description field in the Dublin Core standard */
+				'label' => __( 'Description', 'tainacan'),
+				'core_metadatum' => 'description'
+			],
+			'dc:format' => [
+				/* translators: Label for the dc:format field in the Dublin Core standard */
+				'label' => __( 'Format', 'tainacan')
+			],
+			'dc:identifier' => [
+				/* translators: Label for the dc:identifier field in the Dublin Core standard */
+				'label' => __( 'Identifier', 'tainacan')
+			],
+			'dc:language' => [
+				/* translators: Label for the dc:language field in the Dublin Core standard */
+				'label' => __( 'Language', 'tainacan')
+			],
+			'dc:publisher' => [
+				/* translators: Label for the dc:publisher field in the Dublin Core standard */
+				'label' => __( 'Publisher', 'tainacan')
+			],
+			'dc:relation' => [
+				/* translators: Label for the dc:relation field in the Dublin Core standard */
+				'label' => __( 'Relation', 'tainacan')
+			],
+			'dc:rights' => [
+				/* translators: Label for the dc:rights field in the Dublin Core standard */
+				'label' => __( 'Rights', 'tainacan')
+			],
+			'dc:source' => [
+				/* translators: Label for the dc:source field in the Dublin Core standard */
+				'label' => __( 'Source', 'tainacan')
+			],
+			'dc:subject' => [
+				/* translators: Label for the dc:subject field in the Dublin Core standard */
+				'label' => __( 'Subject', 'tainacan')
+			],
+			'dc:title' => [
+				/* translators: Label for the dc:title field in the Dublin Core standard */
+				'label' => __( 'Title', 'tainacan'),
+				'core_metadatum' => 'title'
+			],
+			'dc:type' => [
+				/* translators: Label for the dc:type field in the Dublin Core standard */
+				'label' => __( 'Type', 'tainacan')
+			]
+		];
+	}
+	
 }

src/classes/mappers/class-tainacan-mapper.php

@@ -66,4 +66,5 @@ abstract class Mapper {
 		return $url;
 	}
 	
+	function __construct() {}
 }

src/classes/repositories/class-tainacan-item-metadata.php

@@ -70,8 +70,10 @@ class Item_Metadata extends Repository {
 			if ( $unique ) {
 				$item_metadata_value = $this->sanitize_value( $item_metadata->get_value() );
 				if ( !is_numeric($item_metadata->get_value()) && empty( $item_metadata->get_value() ) ) {
-					if ( $item_metadata->get_metadatum()->get_parent() > 0 )
+					if ( $item_metadata->get_metadatum()->get_parent() > 0 ) {
 						delete_metadata_by_mid( 'post', $item_metadata->get_meta_id() );
+						$this->upclean_compound_value( $item_metadata);
+					}
 					else
 						delete_post_meta( $item_metadata->get_item()->get_id(), $item_metadata->get_metadatum()->get_id() );
 				} elseif ( is_int( $item_metadata->get_meta_id() ) ) {
@@ -205,7 +207,40 @@ class Item_Metadata extends Repository {
 
 	/**
 	 *
-	 * @return null|ind the meta id of the created compound metadata
+	 * @return null|int the meta id of the update compound metadata
+	 */
+	public function upclean_compound_value(Entities\Item_Metadata_Entity $item_metadata) {
+		try {
+			if ( ! $item_metadata->get_parent_meta_id() > 0 ) return null;
+			$current_value = get_metadata_by_mid( 'post', $item_metadata->get_parent_meta_id() );
+			if ( is_object( $current_value ) ) {
+				$current_value = $current_value->meta_value;
+			}
+			if ( ! is_array( $current_value ) ) {
+				return null;
+			}
+
+			global $wpdb;
+			$meta_ids = implode(',', $current_value);
+			$query = $wpdb->prepare( "SELECT meta_id FROM $wpdb->postmeta WHERE post_id = %d AND meta_ID IN ($meta_ids)", $item_metadata->get_item()->get_id() );
+
+			$rows = $wpdb->get_results($query, ARRAY_A );
+
+			if ( is_array( $rows ) ) {
+				$upclean_values = array_map(function($row) {
+					return intval($row['meta_id']);
+				}, $rows);
+				update_metadata_by_mid( 'post', $item_metadata->get_parent_meta_id(), $upclean_values );
+			}
+		} catch (\Exception $e) {
+			error_log($e);
+			return null;
+		}
+	}
+
+	/**
+	 *
+	 * @return null|int the meta id of the created compound metadata
 	 */
 	public function add_compound_value( Entities\Item_Metadata_Entity $item_metadata, $meta_id ) {
 
@@ -370,6 +405,8 @@ class Item_Metadata extends Repository {
 					if ( empty($row['meta_value']) )
 						continue;
 					$value = $this->extract_compound_value( maybe_unserialize( $row['meta_value'] ), $item_metadata->get_item(), $row['meta_id'] );
+					if ( empty($value) )
+						continue;
 					if ( $unique ) {
 						$return_value = $value;
 						break;

src/classes/repositories/class-tainacan-terms.php

@@ -137,7 +137,7 @@ class Terms extends Repository {
 				if ( $mapped['map'] != 'termmeta' ) {
 					$get_ = 'get_' . $prop;
 
-					if ( $term->WP_Term->{$mapped['map']} ||
+					if ( isset($term->WP_Term->{$mapped['map']}) ||
 					     ($mapped['map'] == 'parent' && $term->WP_Term->{$mapped['map']} >= 0) ) {
 
 						$args[ $mapped['map'] ] = $term->$get_();

src/readme.txt

@@ -2,9 +2,9 @@
 Contributors: andrebenedito, daltonmartins, fabianobn, jacsonp, leogermani, weryques, wetah, eduardohumberto, ravipassos, jessicafpx, marinagiolo, omarceloavila, vnmedeiros, tainacan, suelanesilva, ccaio, alanargomes, ateneagarcia123, rodrigo0freire, clarandreozzi
 Tags: museums, archives, GLAM, collections, repository
 Requires at least: 5.9
-Tested up to: 6.4
+Tested up to: 6.5
 Requires PHP: 7.0
-Stable tag: 0.20.8
+Stable tag: 0.21.0
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-3.0.html
 

src/tainacan.php

@@ -5,17 +5,17 @@ Plugin URI: https://tainacan.org/
 Description: Open source, powerful and flexible repository platform for WordPress. Manage and publish you digital collections as easily as publishing a post to your blog, while having all the tools of a professional repository platform.
 Author: Tainacan.org
 Author URI: https://tainacan.org/
-Version: 0.20.8
+Version: 0.21.0
 Requires at least: 5.9
-Tested up to: 6.4
+Tested up to: 6.5
 Requires PHP: 7.0
-Stable tag: 0.20.8
+Stable tag: 0.21.0
 Text Domain: tainacan
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-3.0.html
 */
 
-const TAINACAN_VERSION = '0.20.8';
+const TAINACAN_VERSION = '0.21.0';
 
 defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
 $TAINACAN_BASE_URL = plugins_url('', __FILE__);

src/views/admin/components/edition/collection-edition-form.vue

@@ -1308,7 +1308,7 @@ export default {
                 this.form.default_view_mode = this.collection.default_view_mode;
                 this.form.default_order = this.collection.default_order;
                 this.form.default_orderby = this.collection.default_orderby;
-                this.form.enabled_view_modes = [];
+                this.form.enabled_view_modes = this.collection.enabled_view_modes;
                 this.form.allow_comments = this.collection.allow_comments;
                 this.form.allows_submission = this.collection.allows_submission;
                 this.form.submission_anonymous_user = this.collection.submission_anonymous_user;

src/views/admin/components/edition/importer-mapping-form.vue

@@ -423,9 +423,9 @@ export default {
         }
     },
     computed: {
-        metadatumTypes() {
+        ...mapGetters('metadata', {
-            return this.getMetadatumTypes();
+            'metadatumTypes': 'getMetadatumTypes'
-        },
+        }),
         collectionNonChildMetadata() {
             return Array.isArray(this.collectionMetadata) ? this.collectionMetadata.filter((metadatum) => !this.checkIfMetadatumIsChild(metadatum)) : [];
         }
@@ -476,12 +476,6 @@ export default {
             'fetchMetadatumTypes',
             'sendMetadatum'
         ]),
-        ...mapGetters('metadata', [
-            'getMetadatumTypes'
-        ]),
-        ...mapGetters('bgprocess', [
-            'getProcess'
-        ]),
         ...mapActions('collection', [
             'fetchCollectionBasics'
         ]),

src/views/admin/components/edition/item-bulk-edition-form.vue

@@ -209,12 +209,9 @@ export default {
         }
     },
     computed: {
-        uploadedFileList() {
+        ...mapGetters('collection', {
-            return this.getFiles();
+            'collection': 'getCollection'
-        },
+        })
-        collection() {
-            return this.getCollection()
-        }
     },
     created() {
         // Obtains collection ID
@@ -233,10 +230,6 @@ export default {
             'sendFile',
             'cleanFiles',
             'deleteItem'
-        ]),
-         ...mapGetters('collection', [
-            'getFiles',
-            'getCollection'
         ]),
         ...mapActions('item', [
             'sendItem',

src/views/admin/components/edition/item-edition-form.vue

@@ -397,7 +397,7 @@
                                                         <i class="tainacan-icon tainacan-icon-metadata" />
                                                     </span>
                                                     <span
-                                                            v-if="metadataSections.length > 1 && collection.item_enable_metadata_enumeration === 'yes'"
+                                                            v-if="metadataSections.length > 1 && collection && collection.item_enable_metadata_enumeration === 'yes'"
                                                             style="opacity: 0.65;"
                                                             class="metadata-section-enumeration">
                                                         {{ Number(sectionIndex) + 1 }}.
@@ -443,7 +443,7 @@
                                                             :hide-help-buttons="false"
                                                             :help-info-bellow-label="false"
                                                             :is-mobile-screen="isMobileScreen"
-                                                            :enumerate-metadatum="metadataSections.length > 1 && collection.item_enable_metadata_enumeration === 'yes' ? ( (Number(sectionIndex) + 1) + '.' + (Number(getMetadatumOrderInSection(sectionIndex, itemMetadatum.metadatum)) + 1) ) : false"
+                                                            :enumerate-metadatum="metadataSections.length > 1 && collection && collection.item_enable_metadata_enumeration === 'yes' ? ( (Number(sectionIndex) + 1) + '.' + (Number(getMetadatumOrderInSection(sectionIndex, itemMetadatum.metadatum)) + 1) ) : false"
                                                             :is-last-metadatum="index > 2 && (index == itemMetadata.length - 1)"
                                                             :is-focused="focusedMetadatum === index"
                                                             :is-metadata-navigation="isMetadataNavigation"
@@ -671,7 +671,7 @@
                     <template v-else> 
                         <span 
                                 v-if="form.status === 'auto-draft'"
-                                class="has-text-danger">
+                                class="has-text-warning">
                             {{ $i18n.get('info_autodraft_updated') }}
                         </span>
                         <span v-else>
@@ -849,9 +849,9 @@ export default {
         }
     },
     computed: {
-        collection() {
+        ...mapGetters('collection', {
-            return this.getCollection()
+            'collection': 'getCollection'
-        },
+        }),
         itemMetadata() {
             const realItemMetadata = JSON.parse(JSON.stringify(this.getItemMetadata()));
 
@@ -877,21 +877,17 @@ export default {
             });
             return tweakedItemMetadata;
         },
-        metadataSections() {
+        ...mapGetters('metadata', {
-            return this.getMetadataSections();
+            'metadataSections': 'getMetadataSections'
-        },
+        }),
-        lastUpdated() {
+        ...mapGetters('item', {
-            return this.getLastUpdated();
+            'totalAttachments': 'getTotalAttachments',
-        },
+            'lastUpdated': 'getLastUpdated'
-        group() {
+        }),
-            return this.getGroup();
+        ...mapGetters('bulkedition', { 
-        },
+            'itemIdInSequence': 'getItemIdInSequence',
-        itemIdInSequence() {
+            'group': 'getGroup'
-            return this.getItemIdInSequence();
+        }),
-        },
-        totalAttachments() {
-            return this.getTotalAttachments();
-        },
         totalRelatedItems() {
             return (this.item && this.item.related_items) ? Object.values(this.item.related_items).reduce((totalItems, aRelatedItemsGroup) => totalItems + parseInt(aRelatedItemsGroup.total_items), 0) : false;
         },
@@ -1144,30 +1140,17 @@ export default {
         ]),
         ...mapGetters('item',[
             'getItemMetadata',
-            'getTotalAttachments',
-            'getLastUpdated',
-            'getAttachments'
         ]),
         ...mapActions('collection', [
             'deleteItem',
         ]),
-        ...mapGetters('collection', [
-            'getCollection',
-        ]),
         ...mapActions('bulkedition', [
             'fetchItemIdInSequence',
 			'fetchSequenceGroup'
         ]),
-        ...mapGetters('bulkedition', [
-            'getItemIdInSequence',
-            'getGroup'
-        ]),
         ...mapActions('metadata',[
             'fetchMetadataSections'
         ]),
-        ...mapGetters('metadata',[
-            'getMetadataSections'
-        ]),
         onSubmit(status, sequenceDirection) {
 
             // Puts loading on Item edition

src/views/admin/components/edition/metadata-section-edition-form.vue

@@ -209,7 +209,7 @@
                                         :value="Array.isArray(selectedConditionalValue) ? selectedConditionalValue[0] : selectedConditionalValue"
                                         :allow-new="false"
                                         :maxtags="1"
-                                        @input="selectConditionalValue"
+                                        @update:value="($event) => selectConditionalValue($event)"
                                     />
                             </b-field>
                         </transition>

src/views/admin/components/edition/metadatum-edition-form.vue

@@ -97,7 +97,7 @@
                         </b-field>
 
                         <b-field
-                                v-if="form.metadata_type_object.component != 'tainacan-compound'"
+                                v-if="form.metadata_type_object.component != 'tainacan-geocoordinate' && form.metadata_type_object.component != 'tainacan-compound'"
                                 :addons="false"
                                 :type="formErrors['placeholder'] != undefined ? 'is-danger' : ''"
                                 :message="formErrors['placeholder'] != undefined ? formErrors['placeholder'] : ''">
@@ -407,7 +407,7 @@
     import FormNumeric from '../metadata-types/numeric/FormNumeric.vue';
     import FormUser from '../metadata-types/user/FormUser.vue';
     import FormGeoCoordinate from '../metadata-types/geocoordinate/FormGeoCoordinate.vue';
-    import FormURL from '../metadata-types/url/FormURL.vue';
+    import FormUrl from '../metadata-types/url/FormUrl.vue';
 
     export default {
         name: 'MetadatumEditionForm',
@@ -420,7 +420,7 @@
             'tainacan-form-numeric': FormNumeric,
             'tainacan-form-user': FormUser,
             'tainacan-form-geocoordinate': FormGeoCoordinate,
-            'tainacan-form-url': FormURL
+            'tainacan-form-url': FormUrl
         },
         mixins: [ formHooks ],
         props: {

src/views/admin/components/edition/taxonomy-edition-form.vue

@@ -268,7 +268,7 @@
 <script>
     import { nextTick } from 'vue';
     import { permalinkGetter, formHooks } from "../../js/mixins";
-    import { mapActions, mapGetters } from 'vuex';
+    import { mapActions } from 'vuex';
     import TermsList from '../lists/terms-list.vue';
     import CustomDialog from '../other/custom-dialog.vue';
 
@@ -389,9 +389,6 @@
                 'fetchTaxonomy',
                 'fetchOnlySlug'
             ]),
-            ...mapGetters('taxonomy',[
-                'getTaxonomy',
-            ]),
             onChangeTab(tab) {
                 this.tabIndex = tab;
                 if (this.tabIndex == 1) {

src/views/admin/components/filter-types/taxonomy/TainacanFilterCheckbox.vue

@@ -92,9 +92,9 @@
             }
         },
         computed: {
-            facetsFromItemSearch() {
+            ...mapGetters('search', {
-                return this.getFacets();
+                'facetsFromItemSearch': 'getFacets'
-            }
+            }),
         },
         watch: {
             selected: {
@@ -147,9 +147,6 @@
             this.$eventBusSearchEmitter.off('hasToReloadFacets', this.reloadOptions); 
         }, 
         methods: {
-            ...mapGetters('search', [
-                'getFacets'
-            ]),
             reloadOptions(shouldReload) {
                 if ( !this.isUsingElasticSearch && shouldReload )
                     this.loadOptions();

src/views/admin/components/lists/attachments-list.vue

@@ -114,12 +114,10 @@
             }
         },
         computed: {
-            attachments() {
+            ...mapGetters('item', {
-                return this.getAttachments();
+                'attachments': 'getAttachments',
-            },
+                'totalAttachments': 'getTotalAttachments'
-            totalAttachments() {
+            })
-                return this.getTotalAttachments();
-            }
         },
         watch: {
             shouldLoadAttachments() {
@@ -134,10 +132,6 @@
             ...mapActions('item', [
                 'fetchAttachments',
             ]),
-            ...mapGetters('item', [
-                'getAttachments',
-                'getTotalAttachments'
-            ]),
             onChangeAttachmentsPerPage(value) {
                 
                 if (value != this.attachmentsPerPage) {

src/views/admin/components/lists/collection-metadata-list.vue

@@ -223,7 +223,7 @@
                                 </a>
                                 <a 
                                         v-if="metadataSection.current_user_can_delete"
-                                        :disabled="metadataSection.metadata_object_list.length"
+                                        :disabled="metadataSection.metadata_object_list.length > 0"
                                         :style="{ visibility: metadataSection.collection_id != collectionId || metadataSection.id === 'default_section' || metadataSection.metadata_object_list.length ? 'hidden' : 'visible' }"
                                         @click.prevent="removeMetadataSection(metadataSection)">
                                     <span
@@ -276,7 +276,8 @@
                                     chosenClass: 'sortable-chosen',
                                     filter: '.not-sortable-item',
                                     preventOnFilter: false,
-                                    animation: 250
+                                    animation: 250,
+                                    dataIdAttr: 'data-metadatum-id'
                                 }"
                                 @update="handleChange($event, sectionIndex)"
                                 @add="handleChange($event, sectionIndex)"
@@ -285,6 +286,10 @@
                                 <div 
                                         v-if="metadatum != undefined && metadatum.parent == 0"
                                         v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)"
+                                        :key="metadatum.id"
+                                        :data-metadatum-id="metadatum.id"
+                                        :data-collection-id="metadatum.collection_id"
+                                        :data-original-section-index="sectionIndex"
                                         class="active-metadatum-item"
                                         :class="{
                                             'is-compact-item': !isCollapseOpen(metadatum.id),
@@ -642,7 +647,8 @@ export default {
             'moveMetadataSectionUp',
             'moveMetadataSectionDown',
             'moveMetadatumUp',
-            'moveMetadatumDown'
+            'moveMetadatumDown',
+            'moveMetadatum'
         ]),
         ...mapGetters('metadata',[
             'getMetadataSections',
@@ -656,6 +662,7 @@ export default {
                 case 'remove':
                     this.removeMetadataSection(this.activeFiltersList[$event.oldIndex]);
                     break;
+                case 'change':
                 case 'update': {
                     const newMetadataSectionsList = JSON.parse(JSON.stringify(this.activeMetadataSectionsList));
                     const element = newMetadataSectionsList.splice($event.oldIndex, 1)[0];
@@ -677,37 +684,52 @@ export default {
                         this.addNewMetadatum(this.getMetadatumTypes()[$event.oldIndex], $event.newIndex, sectionIndex);
                         $event.originalTarget.removeChild($event.item)
                     } else {
+                        this.isLoadingMetadataSections = true;
 
-                        this.updateMetadatum({
+                        const previousSectionIndex = $event.item.dataset['originalSectionIndex'];
-                            collectionId: this.collectionId,
-                            metadatumId: this.activeMetadataSectionsList[sectionIndex].metadata_object_list[$event.oldIndex].id,
-                            isRepositoryLevel: this.activeMetadataSectionsList[sectionIndex].metadata_object_list[$event.oldIndex].collection_id === 'default',
-                            index: $event.newIndex,
-                            options: {},
-                            includeOptionsAsHtml: true,
-                            sectionId: this.activeMetadataSectionsList[sectionIndex].id
-                        });
 
+                        const previousSectionMetadataObjectList = JSON.parse(JSON.stringify(this.activeMetadataSectionsList[previousSectionIndex].metadata_object_list));
                         const newSectionMetadataObjectList = JSON.parse(JSON.stringify(this.activeMetadataSectionsList[sectionIndex].metadata_object_list));
-                        const element = newSectionMetadataObjectList.splice($event.oldIndex, 1)[0];
+                        const element = previousSectionMetadataObjectList.splice($event.oldIndex, 1)[0];
                         newSectionMetadataObjectList.splice($event.newIndex, 0, element);
             
                         const newMetadataSectionsList = JSON.parse(JSON.stringify(this.activeMetadataSectionsList));
                         newMetadataSectionsList[sectionIndex].metadata_object_list = newSectionMetadataObjectList;
-                        this.updateMetadataSections(newMetadataSectionsList);
+                        newMetadataSectionsList[previousSectionIndex].metadata_object_list = previousSectionMetadataObjectList;
 
-                        this.updateMetadataSectionsOrder(sectionIndex);
+                        this.updateMetadataSections(newMetadataSectionsList);
+                        $event.originalTarget.removeChild($event.item);
+
+                        this.updateMetadatum({
+                            collectionId: this.collectionId,
+                            metadatumId: $event.item.dataset['metadatumId'],
+                            isRepositoryLevel: $event.item.dataset['collectionId'] === 'default',
+                            index: $event.newIndex,
+                            options: {},
+                            includeOptionsAsHtml: true,
+                            sectionId: this.activeMetadataSectionsList[sectionIndex].id
+                        }).then(() => {
+                            this.updateMetadataSectionsOrder(newMetadataSectionsList)
+                                .then( () => this.isLoadingMetadataSections = false )
+                                .catch( () => this.isLoadingMetadataSections = false );
+                        }).catch(() => {
+                            this.isLoadingMetadataSections = false;
+                        });
                     }
 
                     break;
-                case 'update':
+                case 'change':
+                case 'update': {
+                    this.moveMetadatum({ newIndex: $event.newIndex, oldIndex: $event.oldIndex, sectionIndex: sectionIndex });
                     this.updateMetadataOrder(sectionIndex);
                     break;
                 }
+            }   
 
         },
         updateMetadataOrder(sectionIndex) {
             let metadataOrder = [];
+            
             for (let metadatum of this.activeMetadataSectionsList[sectionIndex].metadata_object_list)
                 if (metadatum != undefined)
                     metadataOrder.push({
@@ -717,17 +739,16 @@ export default {
             
             this.isUpdatingMetadataOrder = true;
             this.updateCollectionMetadataOrder({ collectionId: this.collectionId, metadataOrder: metadataOrder, metadataSectionId: this.activeMetadataSectionsList[sectionIndex].id  })
-                .then(() => {
+                .then(() => this.isUpdatingMetadataOrder = false)
-                    this.isUpdatingMetadataOrder = false
-                
-                    
-                })
                 .catch(() => this.isUpdatingMetadataOrder = false);
                 
         },
-        updateMetadataSectionsOrder() {
+        updateMetadataSectionsOrder(metadataSectionsList) {
+            if (metadataSectionsList == undefined)
+                metadataSectionsList = this.activeMetadataSectionsList;
+
             let metadataSectionsOrder = [];
-            for (let metadataSection of this.activeMetadataSectionsList)
+            for (let metadataSection of metadataSectionsList)
                 if (metadataSection != undefined) {
                     metadataSectionsOrder.push({
                         'id': metadataSection.id,
@@ -756,12 +777,13 @@ export default {
         onChangeEnableSection($event, index) {
             let metadataSectionsOrder = [];
             for (let metadataSection of this.activeMetadataSectionsList)
-                if (metadataSection != undefined)
+                if (metadataSection != undefined) {
                     metadataSectionsOrder.push({
                         'id': metadataSection.id,
                         'enabled': metadataSection.enabled,
                         'metadata_order': metadataSection.metadata_object_list.map((aMetadatum) => { return { 'id': aMetadatum.id, 'enabled': aMetadatum.enabled } })
                     });
+                }
             
             metadataSectionsOrder[index].enabled = $event;
             this.isUpdatingMetadataSectionsOrder = true;
@@ -771,7 +793,6 @@ export default {
         },
         addMetadatumViaButton(metadatumType) {
             this.addNewMetadatum(metadatumType, this.activeMetadataSectionsList[0].metadata_object_list.length, 0);
-            
             // Higlights the clicked metadatum
             this.highlightedMetadatum = metadatumType.name;
             this.$emit('on-update-highlighted-metadatum', this.highlightedMetadatum);

src/views/admin/components/lists/items-list.vue

@@ -2045,12 +2045,16 @@ export default {
         }
     },
     computed: {
-        collection() {
+        ...mapGetters('collection', {
-            return this.getCollection();
+            'collection': 'getCollection',
-        },
+        }),
-        highlightedItem () {
+        ...mapGetters('bulkedition', {
-            return this.getHighlightedItem();
+            'groupId': 'getGroupId'
-        },
+        }),
+        ...mapGetters('search', {
+            'highlightedItem': 'getHighlightedItem',
+            'itemsPerPage': 'getItemsPerPage'
+        }),
         selectedItems () {
             if (this.$adminOptions.itemsSingleSelectionMode || this.$adminOptions.itemsMultipleSelectionMode)
                 this.$eventBusSearch.setSelectedItemsForIframe(this.getSelectedItems());
@@ -2078,9 +2082,6 @@ export default {
             }
             return true;
         },
-        itemsPerPage(){
-            return this.getItemsPerPage();
-        },
         totalPages(){
             return Math.ceil(Number(this.totalItems)/Number(this.itemsPerPage));
         },
@@ -2245,11 +2246,11 @@ export default {
         itemsLocations: {
             handler() {
                 setTimeout(() => {
-                    if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject ) {
+                    if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].leafletObject ) {
                         if (this.itemsLocations.length == 1)
-                            this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16, paddingTopLeft: [48, 48], paddingTopRight: [48, 48] });
+                            this.$refs['tainacan-admin-view-mode-map'].leafletObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16, paddingTopLeft: [48, 48], paddingTopRight: [48, 48] });
                         else
-                            this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16, paddingTopLeft: [48, 48], paddingTopRight: [48, 48] });
+                            this.$refs['tainacan-admin-view-mode-map'].leafletObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16, paddingTopLeft: [48, 48], paddingTopRight: [48, 48] });
                     }
                 }, 500);
             },
@@ -2276,10 +2277,6 @@ export default {
             deep: true
         }
     },
-    mounted() {
-        if (this.highlightsItem)
-            setTimeout(() => this.$eventBusSearch.highlightsItem(null), 3000);
-    },
     created() {
         this.shouldUseLegacyMasonyCols = wp !== undefined && wp.hooks !== undefined && wp.hooks.hasFilter('tainacan_use_legacy_masonry_view_mode_cols') && wp.hooks.applyFilters('tainacan_use_legacy_masonry_view_mode_cols', false);
     },
@@ -2287,9 +2284,6 @@ export default {
         ...mapActions('collection', [
             'deleteItem',
         ]),
-        ...mapGetters('collection', [
-            'getCollection',
-        ]),
         ...mapActions('bulkedition', [
             'createEditGroup',
             'createSequenceEditGroup',
@@ -2297,9 +2291,6 @@ export default {
             'deleteItemsInBulk',
             'untrashItemsInBulk'
         ]),
-        ...mapGetters('bulkedition', [
-            'getGroupId'
-        ]),
         ...mapActions('search', [
             'setSeletecItems',
             'cleanSelectedItems',
@@ -2307,12 +2298,8 @@ export default {
             'removeSelectedItem'
         ]),
         ...mapGetters('search', [
-            'getOrder',
-            'getOrderBy',
             'getStatus',
             'getSelectedItems',
-            'getHighlightedItem',
-            'getItemsPerPage'
         ]),
         setSelectedItemChecked(itemId) {
             if (this.$adminOptions.itemsSingleSelectionMode) {
@@ -2350,8 +2337,7 @@ export default {
                 object: Object.keys(this.queryAllItemsSelected).length ? this.queryAllItemsSelected : this.selectedItems,
                 collectionId: this.collectionId
             }).then(() => {
-                let sequenceId = this.getGroupId();
+                this.$router.push(this.$routerHelper.getCollectionSequenceEditPath(this.collectionId, this.groupId, 1));
-                this.$router.push(this.$routerHelper.getCollectionSequenceEditPath(this.collectionId, sequenceId, 1));
             });
         },
         selectAllItemsOnPage() {
@@ -2401,11 +2387,9 @@ export default {
                             collectionId: this.collectionId,
                             object: [itemId]
                         }).then(() => {
-                            let groupId = this.getGroupId();
-
                             this.untrashItemsInBulk({
                                 collectionId: this.collectionId,
-                                groupId: groupId
+                                groupId: this.groupId
                             }).then(() => this.$eventBusSearch.loadItems() );
                         });
                     }
@@ -2453,11 +2437,9 @@ export default {
                             collectionId: this.collectionId,
                             object: Object.keys(this.queryAllItemsSelected).length ? this.queryAllItemsSelected : this.selectedItems
                         }).then(() => {
-                            let groupId = this.getGroupId();
-
                             this.untrashItemsInBulk({
                                 collectionId: this.collectionId,
-                                groupId: groupId
+                                groupId: this.groupId
                             }).then(() => {
                                 this.$eventBusSearch.loadItems();
                                 this.$emitter.emit('openProcessesPopup');
@@ -2485,12 +2467,10 @@ export default {
                             collectionId: this.collectionId,
                             object: Object.keys(this.queryAllItemsSelected).length ? this.queryAllItemsSelected : this.selectedItems
                         }).then(() => {
-                            let groupId = this.getGroupId();
-
                             if (this.isOnTrash) {
                                 this.deleteItemsInBulk({
                                     collectionId: this.collectionId,
-                                    groupId: groupId
+                                    groupId: this.groupId
                                 }).then(() => {
                                     this.$eventBusSearch.loadItems();
                                     this.$emitter.emit('openProcessesPopup');
@@ -2498,7 +2478,7 @@ export default {
                             } else {
                                 this.trashItemsInBulk({
                                     collectionId: this.collectionId,
-                                    groupId: groupId
+                                    groupId: this.groupId
                                 }).then(() => {
                                     this.$eventBusSearch.loadItems();
                                     this.$emitter.emit('openProcessesPopup');
@@ -2513,7 +2493,17 @@ export default {
             });
         },
         filterBySelectedItems() {
-            this.$eventBusSearch.filterBySelectedItems(this.selectedItems);
+            let newQuery = {
+                postin: JSON.parse(JSON.stringify(this.selectedItems)),
+            }
+
+            if ( this.$route.query['fetch_only'] )
+                newQuery['fetch_only'] =  this.$route.query['fetch_only'];
+
+            if ( this.$route.query['fetch_only_meta'] )
+                newQuery['fetch_only_meta'] =  this.$route.query['fetch_only_meta'];
+
+            this.$router.replace({ path: this.$route.path, query: newQuery });
         },
         openItem() {
             if (this.contextMenuItem != null) {
@@ -2635,25 +2625,25 @@ export default {
             this.$userPrefs.set(prefsGeocoordinateMetadatum, id);
         },
         onMapReady() {
-            if ( LeafletActiveArea && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject )
+            if ( LeafletActiveArea && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].leafletObject )
-                this.$refs['tainacan-admin-view-mode-map'].mapObject.setActiveArea('leaflet-active-area');
+                this.$refs['tainacan-admin-view-mode-map'].leafletObject.setActiveArea('leaflet-active-area');
         },
         clearSelectedMarkers() {
             this.mapSelectedItemId = false;
             this.selectedMarkerIndexes = [];
-            if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject ) {
+            if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].leafletObject ) {
                 if (this.itemsLocations.length == 1)
-                    this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16, paddingTopLeft: [48, 48], paddingTopRight: [48, 48] });
+                    this.$refs['tainacan-admin-view-mode-map'].leafletObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16, paddingTopLeft: [48, 48], paddingTopRight: [48, 48] });
                 else
-                    this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16, paddingTopLeft: [48, 48], paddingTopRight: [48, 48] });
+                    this.$refs['tainacan-admin-view-mode-map'].leafletObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16, paddingTopLeft: [48, 48], paddingTopRight: [48, 48] });
             }
         },
         showItemByLocation(index) {
             this.mapSelectedItemId = this.itemsLocations[index].item.id;
             this.selectedMarkerIndexes = [];
             this.selectedMarkerIndexes.push(index);
-            if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject )
+            if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].leafletObject )
-                this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds( [ this.itemsLocations[index].location ],  { animate: true, maxZoom: 16, paddingTopLeft: [48, 286], paddingTopRight: [48, 48] });
+                this.$refs['tainacan-admin-view-mode-map'].leafletObject.panInsideBounds( [ this.itemsLocations[index].location ],  { animate: true, maxZoom: 16, paddingTopLeft: [48, 286], paddingTopRight: [48, 48] });
         },
         showLocationsByItem(item) {
             this.mapSelectedItemId = item.id;
@@ -2666,11 +2656,11 @@ export default {
             })
 
             if ( selectedLocationsByItem.length) {
-                if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject ) {
+                if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].leafletObject ) {
                     if (selectedLocationsByItem.length > 1)
-                        this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16, paddingTopLeft: [48, 286], paddingTopRight: [48, 48] });
+                        this.$refs['tainacan-admin-view-mode-map'].leafletObject.flyToBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16, paddingTopLeft: [48, 286], paddingTopRight: [48, 48] });
                     else
-                        this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16, paddingTopLeft: [48, 286], paddingTopRight: [48, 48] });
+                        this.$refs['tainacan-admin-view-mode-map'].leafletObject.panInsideBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16, paddingTopLeft: [48, 286], paddingTopRight: [48, 48] });
                 }
             } else {
                 this.$buefy.snackbar.open({

src/views/admin/components/lists/metadata-mapping-list.vue

@@ -230,14 +230,12 @@ export default {
         }
     },
     computed: {
-        metadatumMappers() {
+        ...mapGetters('metadata', {
-            return this.getMetadatumMappers();
+            'metadatumMappers': 'getMetadatumMappers',
-        },
+            'activeMetadatumList': 'getMetadata'
+        }),
         isNewMetadataMapperMetadataDisabled() {
             return !this.newMetadataLabel || !this.newMetadataUri;
-        },
-        activeMetadatumList() { 
-            return this.getMetadata();
         }
     },
     mounted() {
@@ -277,10 +275,6 @@ export default {
             'fetchMetadatumMappers',
             'updateMetadataMapperMetadata',
         ]),
-        ...mapGetters('metadata',[
-            'getMetadatumMappers',
-            'getMetadata'
-        ]),
         loadMetadataMappers() {
             this.isLoadingMetadatumMappers = true;
             this.fetchMetadatumMappers()

src/views/admin/components/lists/metadata-types-list.vue

@@ -10,7 +10,7 @@
                 {{ $i18n.get('label_available_metadata_types') }}
             </h3>
             <sortable 
-                    :list="availableMetadatumList"
+                    :list="availableMetadataTypes"
                     item-key="id"
                     :options="{
                         group: {
@@ -19,6 +19,7 @@
                             put: false,
                             revertClone: true
                         },
+                        draggable: '.available-metadatum-item',
                         sort: false,
                         dragClass: 'sortable-drag'
                     }">
@@ -27,7 +28,7 @@
                             :id="metadatum.component"
                             class="available-metadatum-item"
                             :class="{ 'highlighted-metadatum' : highlightedMetadatum == metadatum.name, 'inherited-metadatum': metadatum.inherited || isRepositoryLevel }"
-                            @click.prevent.once="addMetadatumViaButton(metadatum)">
+                            @click.prevent="addMetadatumViaButton(metadatum)">
                         <span
                                 v-tooltip="{
                                     content: $i18n.get('instruction_click_or_drag_metadatum_create'),
@@ -84,6 +85,7 @@
                             put: false,
                             revertClone: true
                         },
+                        draggable: '.available-metadatum-item',
                         sort: false,
                         dragClass: 'sortable-drag'
                     }">
@@ -91,7 +93,7 @@
                     <div 
                             :id="metadataSection.id"
                             class="available-metadata-section-item"
-                            @click.prevent="addMetadataSectionViaButton()">
+                            @click="addMetadataSectionViaButton()">
                         <span
                                 v-tooltip="{
                                     content: $i18n.get('instruction_click_or_drag_metadatum_create'),
@@ -164,14 +166,9 @@ export default {
         }
     },
     computed: {
-        availableMetadatumList: {
+        ...mapGetters('metadata', {
-            get() {
+            'availableMetadataTypes': 'getMetadatumTypes'
-                return this.getMetadatumTypes();
+        }),
-            },
-            set(value) {
-                return this.updateMetadatumTypes(value);
-            }
-        },
     },
     mounted() {
 
@@ -190,9 +187,6 @@ export default {
         ...mapActions('metadata', [
             'fetchMetadatumTypes'
         ]),
-        ...mapGetters('metadata',[
-            'getMetadatumTypes'
-        ]),
         addMetadatumViaButton(metadatumType) {
             this.$emitter.emit('addMetadatumViaButton', metadatumType);
         },

src/views/admin/components/lists/repository-metadata-list.vue

@@ -90,6 +90,7 @@
                     class="active-metadata-area"
                     :options="{
                         group: { name:'metadata', pull: false, put: true },
+                        sort: false,
                         handle: '.handle',
                         ghostClass: 'sortable-ghost',
                         chosenClass: 'sortable-chosen',
@@ -362,12 +363,16 @@ export default {
             'cleanMetadata'    
         ]),
         ...mapGetters('metadata',[
-            'getMetadata'
+            'getMetadata',
+            'getMetadatumTypes'
         ]),
         handleChange($event) {
             switch ($event.type) {
                 case 'add':
-                    this.addNewMetadatum(this.activeMetadatumList[$event.oldIndex], $event.newIndex);
+                    if ( !$event.from.classList.contains('active-metadata-area') ) {
+                        this.addNewMetadatum(this.getMetadatumTypes()[$event.oldIndex], $event.newIndex);
+                        $event.originalTarget.removeChild($event.item);
+                    }
                     break;
                 case 'remove':
                     this.removeMetadatum(this.activeMetadatumList[$event.oldIndex]);

src/views/admin/components/lists/terms-list-hierarchical.vue

@@ -293,7 +293,7 @@ export default {
         TermEditionForm: defineAsyncComponent(() => import('../edition/term-edition-form.vue'))
     },
     props: {
-        taxonomyId: String,
+        taxonomyId: [ String, Number ],
         currentUserCanEditTaxonomy: Boolean,
         selected: Array,
         selectedColumnIndex: Number,

src/views/admin/components/lists/terms-list.vue

@@ -92,14 +92,14 @@
                     <b-dropdown-item
                             id="item-delete-selected-terms"
                             aria-role="listitem"
-                            @click="$emit('deleteSelectedTerms')">
+                            @click="$emitter.emit('deleteSelectedTerms')">
                         {{ $i18n.get('label_delete_permanently') }}
                     </b-dropdown-item>
                     <b-dropdown-item
                             v-if="isHierarchical"
                             id="item-update-selected-terms"
                             aria-role="listitem"
-                            @click="$emit('updateSelectedTermsParent')">
+                            @click="$emitter.emit('updateSelectedTermsParent')">
                         {{ $i18n.get('label_update_parent') }}
                     </b-dropdown-item>
                 </b-dropdown>
@@ -129,14 +129,10 @@ export default {
         TermsListHierarchical
     },
     props: {
-        taxonomyId: String,
+        taxonomyId: [ String, Number ],
         currentUserCanEditTaxonomy: Boolean,
         isHierarchical: Boolean
     },
-    emits: [
-        'deleteSelectedTerms',
-        'updateSelectedTermsParent'
-    ],
     data() {
         return {
             searchString: '',

src/views/admin/components/metadata-types/compound/TainacanCompound.vue

@@ -75,6 +75,7 @@
                             :is-focused="(focusedGroupMetadatum === groupIndex) && (focusedChildMetadatum === childIndex)"
                             :is-metadata-navigation="isMetadataNavigation"
                             :enumerate-metadatum="enumerateMetadatum ? ( enumerateMetadatum + ( childItemMetadataGroups.length > 1 ? ( '.' + (Number(groupIndex) + 1) ) : '' ) + '.' + (Number(childIndex) + 1) ) : false"
+                            @input="($event) => $emitter.emit('updateValueFromCompound', $event)"
                             @change-collapse="onChangeCollapse($event, groupIndex, childIndex)"
                             @touchstart="isMetadataNavigation ? setMetadatumChildFocus({ groupIndex: groupIndex, childIndex: childIndex, scrollIntoView: false }): ''"
                             @mousedown="isMetadataNavigation ? setMetadatumChildFocus({ groupIndex: groupIndex, childIndex: childIndex, scrollIntoView: false }) : ''"

src/views/admin/components/metadata-types/compound/child-metadata-list.vue

@@ -34,10 +34,14 @@
                     preventOnFilter: false,
                     animation: 250
                 }"
-                @change="handleChange"> 
+                @update="handleChange($event)"
+                @add="handleChange($event)"
+                @remove="handleChange($event)"> 
             <template #item="{ element: metadatum, index }">
                 <div 
                         v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)"
+                        :data-metadatum-id="metadatum.id"
+                        :data-collection-id="metadatum.collection_id"
                         class="active-metadatum-item" 
                         :class="{
                             'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied,
@@ -235,7 +239,7 @@
 </template>
 
 <script>
-    import { mapActions } from 'vuex';
+    import { mapActions, mapGetters } from 'vuex';
     import MetadatumEditionForm from '../../edition/metadatum-edition-form.vue';
     import MetadatumDetails from '../../other/metadatum-details.vue';
     import CustomDialog from '../../other/custom-dialog.vue';
@@ -326,17 +330,22 @@
                 'deleteMetadatum',
                 'updateChildMetadataOrder'
             ]),
+            ...mapGetters('metadata',[
+                'getMetadatumTypes'
+            ]),
             handleChange($event) {  
-                
                 switch ($event.type) {
                     case 'add':
-                        this.addNewMetadatum(this.childrenMetadata[$event.oldIndex], $event.newIndex);
+                        if ( !$event.from.classList.contains('active-metadata-area') ) {
+                            this.addNewMetadatum(this.getMetadatumTypes()[$event.oldIndex], $event.newIndex);
+                            $event.originalTarget.removeChild($event.item);
+                        }
                         break;
                     case 'remove':
                         this.removeMetadatum(this.childrenMetadata[$event.oldIndex]);
                         break;
+                    case 'change':
                     case 'update': {
-
                         const newChildrenMetadata = JSON.parse(JSON.stringify(this.childrenMetadata));
                         const element = newChildrenMetadata.splice($event.oldIndex, 1)[0];
                         newChildrenMetadata.splice($event.newIndex, 0, element);
@@ -443,6 +452,9 @@
                 this.updateMetadataOrder();
             },
             isAvailableChildMetadata(to, from, item) {
+                if (!item || !item.id)
+                    return false;
+                
                 if (from.el && from.el.className === 'active-metadata-area')
                     return false;
 
@@ -470,15 +482,16 @@
 </script>
 
 <style lang="scss" scoped>
+
 .child-metadata-list-container {
     position: relative;
     margin-left: 42px;
     border-left: 1px solid var(--tainacan-gray2);
 
     section.field {
-        padding: 0.5em 1em 0 1em;
+        padding: 0.5em 1em 0 1em !important;
         position: absolute;
-        width: 100%;
+        width: 100% !important;
     }
     .children-icon {
         position: absolute;

src/views/admin/components/metadata-types/compound/class-tainacan-compound.php

@@ -260,16 +260,22 @@ class Compound extends Metadata_Type {
 
 	private function get_meta_html(Item_Metadata_Entity $meta) {
 		$html = '';
+
 		if ($meta instanceof Item_Metadata_Entity && !empty($meta->get_value_as_html())) {
 			ob_start();
 			?>
 				<div class="tainacan-metadatum metadata-type-<?php echo $meta->get_metadatum()->get_metadata_type_object()->get_slug(); ?> metadata-slug-<?php echo $meta->get_metadatum()->get_slug(); ?>">
-					<h4 class="label">
+					<?php
-						<?php echo esc_html($meta->get_metadatum()->get_name()); ?>
+						$child_label = $meta->get_metadatum()->get_name();
-					</h4>
+						$child_label_before = apply_filters('tainacan-get-child-item-metadatum-as-html-before-label', '<h4 class="label child-metadatum-label">', $meta);
-					<p>
+						$child_label_after = apply_filters('tainacan-get-child-item-metadatum-as-html-after-label', '</h4>', $meta);
-						<?php echo wp_kses_tainacan($meta->get_value_as_html()); ?>
+						echo $child_label_before . esc_html($child_label) . $child_label_after;
-					</p>
+
+						$child_value = $meta->get_value_as_html();
+						$child_value_before = apply_filters('tainacan-get-child-item-metadatum-as-html-before-value', '<p class="child-metadatum-value">', $meta);
+						$child_value_after = apply_filters('tainacan-get-child-item-metadatum-as-html-after-value', '</p>', $meta);
+						echo $child_value_before . wp_kses_tainacan($child_value) . $child_value_after;
+					?>
 				</div>
 			<?php
 			$html = ob_get_contents();

src/views/admin/components/metadata-types/geocoordinate/FormGeoCoordinate.vue

@@ -76,7 +76,7 @@
         props: {
             value: [ String, Object, Array ]
         },
-        emits: ['input'],
+        emits: ['update:value'],
         data() {
             return {
                 mapProvider: String,
@@ -96,7 +96,7 @@
         },
         methods: {
             emitValues(){
-                this.$emit('input',{
+                this.$emit('update:value',{
                     map_provider: this.mapProvider,
                     attribution: this.attribution,
                     initial_zoom: this.initialZoom,

src/views/admin/components/metadata-types/geocoordinate/TainacanGeoCoordinate.vue

@@ -181,11 +181,11 @@
                 handler() {
                     const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
                     nextTick(() => {
-                        if ( this.$refs[mapComponentRef] && this.$refs[mapComponentRef].mapObject && this.selectedLatLng.length != undefined) {
+                        if ( this.$refs[mapComponentRef] && this.$refs[mapComponentRef].leafletObject && this.selectedLatLng.length != undefined) {
                             if (this.selectedLatLng.length == 1)
-                                this.$refs[mapComponentRef].mapObject.panInsideBounds(this.selectedLatLng, { animate: true, maxZoom: this.maxZoom });
+                                this.$refs[mapComponentRef].leafletObject.panInsideBounds(this.selectedLatLng, { animate: true, maxZoom: this.maxZoom });
                             else 
-                                this.$refs[mapComponentRef].mapObject.flyToBounds(this.selectedLatLng, { animate: true, maxZoom: this.maxZoom });
+                                this.$refs[mapComponentRef].leafletObject.flyToBounds(this.selectedLatLng, { animate: true, maxZoom: this.maxZoom });
                         }
                     });
                 },
@@ -213,8 +213,8 @@
             this.$emitter.off('itemEditionFormResize', () => this.handleWindowResize(mapComponentRef));
         },
         methods: {
-            onUpdateFromLatitudeInput: _.debounce( function($event) {
+            onUpdateFromLatitudeInput: _.debounce( function(value) {
-                let newLatitude = $event.target.value;
+                let newLatitude = value;
                 if ( !isNaN(newLatitude) ) {
                     this.latitude = newLatitude;
                     this.onUpdateFromLatitudeAndLongitude();
@@ -232,8 +232,8 @@
                     }
                 }
             }, 250),
-            onUpdateFromLongitudeInput: _.debounce( function($event) {
+            onUpdateFromLongitudeInput: _.debounce( function(value) {
-                let newLongitude = $event.target.value;
+                let newLongitude = value;
 
                 if ( !isNaN(newLongitude) ) {
                     this.longitude = newLongitude;
@@ -304,8 +304,8 @@
                     const existingSelectedIndex = this.selected.indexOf(this.latitude + ',' + this.longitude);
                     this.editingMarkerIndex = existingSelectedIndex;
                     const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
-                    if ( this.$refs[mapComponentRef] && this.$refs[mapComponentRef].mapObject )
+                    if ( this.$refs[mapComponentRef] && this.$refs[mapComponentRef].leafletObject )
-                        this.$refs[mapComponentRef].mapObject.panInsideBounds([ this.selectedLatLng[existingSelectedIndex] ],  { animate: true, maxZoom: this.maxZoom });
+                        this.$refs[mapComponentRef].leafletObject.panInsideBounds([ this.selectedLatLng[existingSelectedIndex] ],  { animate: true, maxZoom: this.maxZoom });
                 }
             },
             onMarkerRemove(index) {
@@ -319,14 +319,14 @@
             },
             handleWindowResize(mapComponentRef) {
                 setTimeout(() => {
-                    if ( this.$refs[mapComponentRef] && this.$refs[mapComponentRef].mapObject ) {
+                    if ( this.$refs[mapComponentRef] && this.$refs[mapComponentRef].leafletObject ) {
-                        this.$refs[mapComponentRef].mapObject.invalidateSize(true);
+                        this.$refs[mapComponentRef].leafletObject.invalidateSize(true);
 
                         if ( this.selectedLatLng.length != undefined) {
                             if (this.selectedLatLng.length == 1)
-                                this.$refs[mapComponentRef].mapObject.panInsideBounds(this.selectedLatLng, { animate: true, maxZoom: this.maxZoom });
+                                this.$refs[mapComponentRef].leafletObject.panInsideBounds(this.selectedLatLng, { animate: true, maxZoom: this.maxZoom });
                             else 
-                                this.$refs[mapComponentRef].mapObject.flyToBounds(this.selectedLatLng, { animate: true, maxZoom: this.maxZoom }); 
+                                this.$refs[mapComponentRef].leafletObject.flyToBounds(this.selectedLatLng, { animate: true, maxZoom: this.maxZoom }); 
                         }
                     }
                 }, 500);

src/views/admin/components/metadata-types/numeric/TainacanNumeric.vue

@@ -4,7 +4,7 @@
             :ref="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
             :disabled="disabled"
             :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
-            :model-value="Number(value)"
+            :model-value="value === 0 || value ? Number(value) : null"
             lang="en"
             :min="getMin"
             :max="getMax"
@@ -52,6 +52,12 @@
                 if ( inputRef && !inputRef.checkHtml5Validity())
                     return;
                 
+                // Allowing empty value as a state different of 0
+                if ( value === null || value === undefined || value === '' )
+                    value = '';
+                else
+                    value = Number(value);
+
                 this.$emit('update:value', value);
             },
             onBlur() {

src/views/admin/components/metadata-types/relationship/FormRelationship.vue

@@ -148,7 +148,7 @@
             metadatum: [ String, Object ],
             errors: [ String, Object, Array ]
         },
-        emits: ['input'],
+        emits: ['update:value'],
         data(){
             return {
                 icon: '',
@@ -296,7 +296,7 @@
                 this.collectionMessage = '';
             },
             emitValues(){
-                this.$emit('input',{
+                this.$emit('update:value',{
                     collection_id: this.collection,
                     search: this.modelSearch,
                     display_in_related_items: this.modelDisplayInRelatedItems,

src/views/admin/components/metadata-types/relationship/TainacanRelationship.vue

@@ -175,9 +175,9 @@
             }
         },
         computed: {
-            collection() {
+            ...mapGetters('collection', {
-                return this.getCollection();
+                'collection': 'getCollection'
-            },
+            }),
             maxMultipleValues() {
                 return (
                     this.itemMetadatum &&
@@ -271,9 +271,6 @@
             }
         },
         methods: {
-            ...mapGetters('collection', [
-                'getCollection'
-            ]),
             onInput(newSelected) {
                 // First we reset the input
                 this.search('');

src/views/admin/components/metadata-types/relationship/class-tainacan-relationship.php

@@ -30,10 +30,10 @@ class Relationship extends Metadata_Type {
 							<div class="dropdown-menu" style="">
 								<div class="dropdown-content">
 									<a class="dropdown-item is-hovered">
-										<span>'. __('Collection') . ' 2 <strong>'._('item') . ' 9</strong>9</span>
+										<span>'. __('Collection') . ' 3 <strong>'._('item') . ' 2</strong>9</span>
 									</a>
 									<a class="dropdown-item">
-										<span>'. __('Collection') . ' 3 <strong>'._('item') . ' 9</strong>9</span>
+										<span>'. __('Collection') . ' 3 <strong>'._('item') . ' 4</strong>9</span>
 									</a>
 									<a class="dropdown-item">
 										<span>'. __('Collection') . ' 3 <strong>'._('item') . ' 9</strong>8</span>

src/views/admin/components/metadata-types/selectbox/TainacanSelectbox.vue

@@ -12,6 +12,7 @@
                 :disabled="disabled"
                 :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : $i18n.get('label_selectbox_init')"
                 :model-value="value"
+                :class="{ 'has-placeholder-selected': value === '' }"
                 @update:model-value="onSelected($event)">
             <option value="">
                 {{ itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ($i18n.get('label_selectbox_init') + '...') }}

src/views/admin/components/metadata-types/tainacan-form-item.vue

@@ -181,7 +181,7 @@
             TainacanCompound: defineAsyncComponent(() => import('./compound/TainacanCompound.vue')),
             TainacanUser: defineAsyncComponent(() => import('./user/TainacanUser.vue')),
             TainacanGeocoordinate: defineAsyncComponent(() => import('./geocoordinate/TainacanGeoCoordinate.vue')),
-            TainacanURL: defineAsyncComponent(() => import('./url/TainacanURL.vue'))
+            TainacanUrl: defineAsyncComponent(() => import('./url/TainacanUrl.vue'))
         },
         props: {
             itemMetadatum: Object,
@@ -326,7 +326,10 @@
                         
                         // A single term value
                         case 'Object':
-                            if (this.values.length && this.values[0] == this.itemMetadatum.value.id)
+                            if (
+                                ( Array.isArray(this.values) && this.values.length && this.values[0] == this.itemMetadatum.value.id ) ||
+                                ( this.values == this.itemMetadatum.value.id )
+                            ) 
                                 return;
                             break;
 
@@ -336,7 +339,6 @@
                                 return;
                     }
                 }
-                
                 // If none is the case, the value is update request is sent to the API
                 this.$emit('input', {
                     itemId: this.itemMetadatum.item.id,

src/views/admin/components/metadata-types/taxonomy/FormTaxonomy.vue

@@ -183,7 +183,7 @@
             metadatum: [ String, Object ],
             errors: [ String, Object, Array ]
         },
-        emits: ['input'],
+        emits: ['update:value'],
         data(){
             return {
                 isReady: false,
@@ -211,7 +211,6 @@
                 if ( this.metadatum && this.metadatum.multiple === 'no' ) {
                     let types = Object.keys( this.single_types );
                     let hasValue = this.value && this.value.input_type && types.indexOf( this.value.input_type ) >= 0;
-                    
                     if (hasValue)
                         this.setInputType(this.value.input_type)
                     else {
@@ -327,7 +326,7 @@
                 this.taxonomyMessage = '';
             },
             emitValues(){
-                this.$emit('input',{
+                this.$emit('update:value',{
                     taxonomy_id: this.taxonomy_id,
                     input_type: this.input_type,
                     allow_new_terms: this.allow_new_terms,

src/views/admin/components/metadata-types/taxonomy/TainacanTaxonomy.vue

@@ -48,7 +48,7 @@
         <template v-if="allowNewFromOptions && itemMetadatum.item">
             <!-- Term creation modal, used on admin for a complete term creation -->
             <b-modal
-                    v-model:active="isTermCreationModalOpen"
+                    :model-value="isTermCreationModalOpen"
                     :width="768"
                     trap-focus
                     aria-role="dialog"

src/views/admin/components/metadata-types/text/TainacanText.vue

@@ -43,6 +43,9 @@
                     </div>
                 </div>
             </template>
+            <template #empty>
+                {{ $i18n.get('info_nothing_like_this_so_far') }}
+            </template>
         </b-autocomplete>
     </div>
 </template>

src/views/admin/components/metadata-types/url/FormUrl.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <section>
         <b-field
                 :addons="false"
                 :label="$i18n.getHelperTitle('tainacan-url', 'link-as-button')">
@@ -16,6 +16,7 @@
         </b-field>
 
         <b-field
+                v-if="linkAsButton == 'no'"
                 :addons="false"
                 :label="$i18n.getHelperTitle('tainacan-url', 'force-iframe')">
             &nbsp;
@@ -30,8 +31,11 @@
                     :message="$i18n.getHelperMessage('tainacan-url', 'force-iframe')" />
         </b-field>
 
-        <b-field
+        <transition name="filter-item">
+            <div 
                     v-if="forceIframe == 'yes'"
+                    style="break-inside: avoid;"> 
+                <b-field
                         :addons="false">
                     <label class="label is-inline-block">
                         {{ $i18n.getHelperTitle('tainacan-url', 'iframe-min-height') }}
@@ -63,7 +67,6 @@
                 </b-field>
 
                 <b-field
-                v-if="forceIframe == 'yes'"
                         :addons="false"
                         :label="$i18n.getHelperTitle('tainacan-url', 'is-image')">
                     &nbsp;
@@ -78,6 +81,9 @@
                             :message="$i18n.getHelperMessage('tainacan-url', 'is-image')" />
                 </b-field>
             </div>
+        </transition>
+
+    </section>
 </template>
 
 <script>

src/views/admin/components/metadata-types/url/TainacanUrl.vue

@@ -31,7 +31,6 @@
 <script>
 
 export default {
-    name: 'TainacanMetadataTypeURL',
     props: {
         itemMetadatum: Object,
         value: [String, Number, Array],

src/views/admin/components/modals/activity-details-modal.vue

@@ -593,9 +593,9 @@
             }
         },
         computed: {
-            activity() {
+            ...mapGetters('activity', {
-                return this.getActivity();
+                'activity': 'getActivity'
-            },
+            }),
             relatedToLink() {
                 switch(this.activity.object_type) {
                     case 'Tainacan\\Entities\\Collection':
@@ -651,9 +651,6 @@
             ...mapActions('activity', [
                 'fetchActivity'
             ]),
-            ...mapGetters('activity', [
-                'getActivity'
-            ]),
             approveActivity(){
                 this.$emit('approveActivity', this.activity.id);
             },

src/views/admin/components/modals/bulk-edition-modal.vue

@@ -99,7 +99,7 @@
                                             :class="{'is-field-history': bulkEditionProcedures[criterion].isDone}"
                                             :disabled="bulkEditionProcedures[criterion].isDone"
                                             class="tainacan-bulk-edition-field"
-                                            @input="addToBulkEditionProcedures($event, 'oldValue', criterion)"
+                                            @update:value="($event) => addToBulkEditionProcedures($event, 'oldValue', criterion)"
                                         />
 
                                     <div class="tainacan-bulk-edition-field tainacan-bulk-edition-field-not-last tainacan-by-text">
@@ -117,7 +117,7 @@
                                             :class="{'is-field-history': bulkEditionProcedures[criterion].isDone}"
                                             class="tainacan-bulk-edition-field tainacan-bulk-edition-field-not-last"
                                             :disabled="bulkEditionProcedures[criterion].isDone"  
-                                            @input="addToBulkEditionProcedures($event, 'newValue', criterion)"
+                                            @update:value="($event) => addToBulkEditionProcedures($event, 'newValue', criterion)"
                                         />
                                 </div>
 
@@ -128,7 +128,7 @@
                                             :disabled="bulkEditionProcedures[criterion].isDone"
                                             class="tainacan-bulk-edition-field tainacan-bulk-edition-field-last"
                                             :placeholder="$i18n.get('instruction_select_a_status2')"
-                                            @update:model-value="addToBulkEditionProcedures($event, 'newValue', criterion)">
+                                            @update:model-update:value="($event) => addToBulkEditionProcedures($event, 'newValue', criterion)">
                                         <option
                                                 v-for="(statusOption, index) of $statusHelper.getStatuses().filter(option => { return option.value != 'trash' })"
                                                 :key="index"
@@ -144,7 +144,7 @@
                                             :disabled="bulkEditionProcedures[criterion].isDone"
                                             class="tainacan-bulk-edition-field tainacan-bulk-edition-field-last"
                                             :placeholder="$i18n.get('instruction_select_a_comments_status')"
-                                            @update:model-value="addToBulkEditionProcedures($event, 'newValue', criterion)">
+                                            @update:model-update:value="($event) => addToBulkEditionProcedures($event, 'newValue', criterion)">
                                         <option
                                                 v-for="(statusOption, index) of $commentsStatusHelper.getStatuses()"
                                                 :key="index"
@@ -202,7 +202,7 @@
                                             :class="{ 'is-field-history': bulkEditionProcedures[criterion].isDone }"
                                             class="tainacan-bulk-edition-field tainacan-bulk-edition-field-last"
                                             :disabled="bulkEditionProcedures[criterion].isDone || bulkEditionProcedures[criterion].isExecuting"
-                                            @input="addToBulkEditionProcedures($event, 'newValue', criterion)"
+                                            @update:value="($event) => addToBulkEditionProcedures($event, 'newValue', criterion)"
                                         />
                                 </template>
                             </template>
@@ -329,7 +329,7 @@
             TainacanCompound: defineAsyncComponent(() => import('../metadata-types/compound/TainacanCompound.vue')),
             TainacanUser: defineAsyncComponent(() => import('../metadata-types/user/TainacanUser.vue')),
             TainacanGeocoordinate: defineAsyncComponent(() => import('../metadata-types/geocoordinate/TainacanGeoCoordinate.vue')),
-            TainacanURL: defineAsyncComponent(() => import('../metadata-types/url/TainacanURL.vue'))
+            TainacanUrl: defineAsyncComponent(() => import('../metadata-types/url/TainacanUrl.vue'))
         },
         props: {
             modalTitle: String,
@@ -367,9 +367,9 @@
             }
         },
         computed: {
-            metadata() {
+            ...mapGetters('metadata', {
-                return this.getMetadata();
+                'metadata': 'getMetadata'
-            }
+            })
         },
         created(){
             if (this.collectionId) {
@@ -436,9 +436,6 @@
             ...mapActions('metadata', [
                 'fetchMetadata'
             ]),
-            ...mapGetters('metadata', [
-                'getMetadata'
-            ]),
             finalizeProcedure(criterion){
 
                 Object.assign(this.bulkEditionProcedures[criterion], { 'isDone': true });

src/views/admin/components/modals/capability-edition-modal.vue

@@ -110,9 +110,9 @@ export default {
         }
     },
     computed: {
-        roles() {
+        ...mapGetters('capability', {
-            return this.getRoles();
+            'roles': 'getRoles',
-        }
+        })
     },
     created() {
         this.isLoading = true;
@@ -126,9 +126,6 @@ export default {
             'addCapabilityToRole',
             'removeCapabilityFromRole'
         ]),
-        ...mapGetters('capability', [
-            'getRoles',
-        ]),
         updateRole(role, value) {
             if (value)
                 this.addCapabilityToRole({ capabilityKey: this.capabilityKey.replace('%d', 'all'), role: role })

src/views/admin/components/modals/collection-creation-modal.vue

@@ -130,9 +130,9 @@ export default {
         }
     },
     computed: {
-        metadatumMappers() {
+        ...mapGetters('metadata', {
-            return this.getMetadatumMappers();
+            'metadatumMappers': 'getMetadatumMappers'
-        },
+        }),
         hasPresetsHook() {
             if (wp !== undefined && wp.hooks !== undefined)
                 return wp.hooks.hasFilter(`tainacan_collections_presets`);
@@ -172,9 +172,6 @@ export default {
         ...mapActions('metadata', [
             'fetchMetadatumMappers'
         ]),
-        ...mapGetters('metadata', [
-            'getMetadatumMappers'
-        ]),
         onNewCollectionPreset(collectionPreset) {
             this.isCreatingCollectionPreset = true;
             axios.post(collectionPreset.endpoint)

src/views/admin/components/navigation/tainacan-collection-subheader.vue

@@ -141,9 +141,9 @@ export default {
         }
     },
     computed: {
-        collection() {
+        ...mapGetters('collection', {
-            return this.getCollection();
+            'collection': 'getCollection'
-        }
+        })
     },
     watch: {
         '$route': {
@@ -160,11 +160,6 @@ export default {
         this.activeRoute = this.$route.name;
 
         this.pageTitle = this.$route.meta.title;   
-    },
-    methods: {
-        ...mapGetters('collection', [
-            'getCollection'
-        ])
     }
 }
 </script>

src/views/admin/components/navigation/tainacan-repository-subheader.vue

@@ -132,14 +132,11 @@ export default {
         }
     },
     computed: {
-        collection() {
+        ...mapGetters('collection', {
-            return this.getCollection();
+            'collection': 'getCollection'
-        }
+        })
     },
     methods: {
-        ...mapGetters('collection', [
-            'getCollection'
-        ]),
         openAvailableExportersModal(){
 
             this.$buefy.modal.open({

src/views/admin/components/navigation/tainacan-title.vue

@@ -72,12 +72,12 @@ export default {
         }
     },
     computed: {
+        ...mapGetters('collection', {
+            'collection': 'getCollection'
+        }),
         slotPassed() {
             const slots = useSlots();
             return !!slots['default'];
-        },
-        collection() {
-            return this.getCollection();
         },
         collectionBreadCrumbItem() {
             return { 
@@ -111,9 +111,6 @@ export default {
         this.$emitter.on('onCollectionBreadCrumbUpdate', this.collectionBreadCrumbUpdate);
     },
     methods: {
-        ...mapGetters('collection', [
-            'getCollection'
-        ]),
         collectionBreadCrumbUpdate(breadCrumbItems) {
             this.childrenBreadCrumbItems = breadCrumbItems;
         }

src/views/admin/components/other/items-status-tabs.vue

@@ -62,12 +62,12 @@ export default {
         isRepositoryLevel: Boolean
     },
     computed: {
-        status() {
+        ...mapGetters('search', {
-            return this.getStatus();
+            'status': 'getStatus'
-        },
+        }),
-        collection() {
+        ...mapGetters('collection', {
-            return this.getCollection();
+            'collection': 'getCollection'
-        },
+        }),
         repositoryTotalItems() {
 
             if (!this.$adminOptions.hideItemsListStatusTabsTotalItems) {
@@ -94,11 +94,7 @@ export default {
         }
     },
     methods: {
-        ...mapGetters('search', [
-            'getStatus'
-        ]),
         ...mapGetters('collection', [
-            'getCollection',
             'getCollections'
         ]),
         onChangeTab(status) {

src/views/admin/components/other/term-deletion-dialog.vue

@@ -8,7 +8,7 @@
             class="tainacan-form tainacan-dialog dialog">
         <div    
                 class="modal-card" 
-                style="width: auto">
+                style="width: auto; max-width: 560px;">
             <div class="modal-custom-icon">
                 <span class="icon is-large">
                     <i 

src/views/admin/components/other/term-multiple-insertion-dialog.vue

@@ -139,10 +139,14 @@
                 type: Function,
                 default: () => {}
             },
+            hideCancel: {
+                type: Boolean,
+                default: false,
+            },
             taxonomyId: '',
             excludeTree: '',
             isHierarchical: Boolean,
-            initialTermParent: String,
+            initialTermParent: [ String, Number ],
             initialTermParentName: String
         },
         emits: [

src/views/admin/components/other/term-parent-selection-dialog.vue

@@ -106,6 +106,10 @@
                 type: Function,
                 default: () => {}
             },
+            hideCancel: {
+                type: Boolean,
+                default: false,
+            },
             amountOfTerms: {
                 type: Number,
                 default: 1

src/views/admin/components/search/filters-items-list.vue

@@ -311,24 +311,20 @@
             }
         },
         computed: {
-            filters() {
+            ...mapGetters('collection', {
-                return this.getFilters();
+                'collection': 'getCollection'
-            },
+            }),
-            repositoryCollectionFilters() {
+            ...mapGetters('search', {
-                return this.getRepositoryCollectionFilters();
+                'getQuery': 'getPostQuery'
-            },
+            }),
-            taxonomyFilters() {
+            ...mapGetters('filter', {
-                return this.getTaxonomyFilters();
+                'filters': 'getFilters',
-            },
+                'taxonomyFilters': 'getTaxonomyFilters',
-            getQuery() {
+                'repositoryCollectionFilters': 'getRepositoryCollectionFilters'
-                return this.getPostQuery();
+            }),
-            },
             taxonomyId () {
                 const taxonomyArray = this.taxonomy.split("_");
                 return taxonomyArray[taxonomyArray.length - 1];
-            },
-            collection() {
-                return this.getCollection();
             }
         },
         watch: {
@@ -394,11 +390,7 @@
      
         },
         methods: {
-            ...mapGetters('search',[
-                'getPostQuery'
-            ]),
             ...mapGetters('collection',[
-                'getCollection',
                 'getCollections'
             ]),
             ...mapActions('collection',[
@@ -409,11 +401,6 @@
                 'fetchTaxonomyFilters',
                 'fetchRepositoryCollectionFilters'
             ]),
-            ...mapGetters('filter', [
-                'getFilters',
-                'getTaxonomyFilters',
-                'getRepositoryCollectionFilters'
-            ]),
             prepareFilters() {
                 // Cancels previous Request
                 if (this.filtersSearchCancel != undefined)

src/views/admin/components/search/filters-tags-list.vue

@@ -95,6 +95,9 @@
             }
         },
         computed: {
+            ...mapGetters('search', {
+                'totalItems': 'getTotalItems'
+            }),
             filterTags() {
                 let tags = this.getFilterTags();
                 let flattenTags = [];
@@ -127,9 +130,6 @@
                 });
 
                 return flattenTags;
-            },
-            totalItems() {
-                return this.getTotalItems()
             }
         },
         watch: {
@@ -166,8 +166,7 @@
         },
         methods: {
             ...mapGetters('search',[
-                'getFilterTags',
+                'getFilterTags'
-                'getTotalItems'
             ]),
             removeMetaQuery({ filterId, value, singleLabel, label, taxonomy, metadatumId, metadatumName, argType }) {
                 this.$eventBusSearch.resetPageOnStore();

src/views/admin/components/search/items-pagination.vue

@@ -123,15 +123,11 @@ export default {
         }
     },
     computed: {
-        totalItems(){    
+        ...mapGetters('search', {
-            return this.getTotalItems();
+            'totalItems': 'getTotalItems',
-        },
+            'page': 'getPage',
-        page(){
+            'itemsPerPage': 'getItemsPerPage'
-            return this.getPage();
+        }),
-        },
-        itemsPerPage(){
-            return this.getItemsPerPage();
-        },
         totalPages(){
             return Math.ceil(Number(this.totalItems)/Number(this.itemsPerPage));    
         },
@@ -150,20 +146,13 @@ export default {
         }
     },
     methods: {
-        ...mapGetters('search', [
-            'getTotalItems',
-            'getPage',
-            'getItemsPerPage',
-            'getPostQuery'
-        ]),
         onChangeItemsPerPage(value) {
-            if ( this.itemsPerPage == value){
+            if ( this.itemsPerPage == value )
                 return false;
-            } else if (Number(value) > Number(this.maxItemsPerPage)) {
+            else if ( Number(value) > Number(this.maxItemsPerPage) )
                 this.$eventBusSearch.setItemsPerPage(this.maxItemsPerPage);
-            } else {
+            else
                 this.$eventBusSearch.setItemsPerPage(value);
-            }
         },
         onPageChange(page) {
             if(page == 0)

src/views/admin/js/admin-utilities.js

@@ -146,6 +146,7 @@ UserPrefsPlugin.install = function (app, options = {}) {
             'collections_per_page': 12,
             'taxonomies_per_page': 12,
             'activities_per_page': 12,
+            'processes_per_page': 12,
             'order': 'DESC',
             'order_by': 'date',
             'view_mode': undefined,

src/views/admin/js/event-bus-search.js

@@ -187,13 +187,6 @@ export default {
             cleanSelectedItems() {
                 app.config.globalProperties.$store.dispatch('search/cleanSelectedItems');
             },
-            async filterBySelectedItems(selectedItems) {
-                await app.config.globalProperties.$router.replace({ path: app.config.globalProperties.$route.path, query: { postin: selectedItems } });
-            },
-            highlightsItem(itemId) {
-                app.config.globalProperties.$store.dispatch('search/highlightsItem', itemId);
-                this.updateURLQueries();
-            },
             exitViewModeWithoutPagination() {
                 app.config.globalProperties.$eventBusSearchEmitter.emit( 'exitViewModeWithoutPagination', true);
             },
@@ -251,6 +244,7 @@ export default {
                 app.config.globalProperties.$store.dispatch('search/cleanFilterTags');
                 app.config.globalProperties.$store.dispatch('search/cleanMetaQueries', { keepCollections: true });
                 app.config.globalProperties.$store.dispatch('search/cleanTaxQueries');
+                app.config.globalProperties.$store.dispatch('search/removePostIn');
                 this.updateURLQueries();
             }
         }

src/views/admin/js/filter-types-mixin.js

@@ -45,9 +45,9 @@ export const dynamicFilterTypeMixin = {
     },
     emits: ['update-parent-collapse'],
     computed: {
-        facetsFromItemSearch() {
+        ...mapGetters('search', {
-            return this.getFacets();
+            'facetsFromItemSearch': 'getFacets'
-        }
+        }),
     },
     watch: {
         isLoadingItems: {
@@ -59,9 +59,6 @@ export const dynamicFilterTypeMixin = {
         }
     },
     methods: {
-        ...mapGetters('search', [
-            'getFacets'
-        ]),
         getValuesPlainText({ metadatumId, search, isRepositoryLevel, valuesToIgnore, offset, number, isInCheckboxModal, getSelected = '0', countItems = true }) {
 
             if (isInCheckboxModal || search || !this.isUsingElasticSearch) {

src/views/admin/js/item-metadata-mixin.js

@@ -3,9 +3,11 @@ import { mapActions } from 'vuex';
 export const itemMetadataMixin = {
     created() {
         this.$emitter.on('removeCompoundGroup', this.removeItemMetadataGroup);
+        this.$emitter.on('updateValueFromCompound', this.updateItemMetadataValue);
     },
     beforeDestroy() {
         this.$emitter.off('removeCompoundGroup', this.removeItemMetadataGroup);
+        this.$emitter.off('updateValueFromCompound', this.updateItemMetadataValue);
     },
     data () {
         return {
@@ -20,7 +22,7 @@ export const itemMetadataMixin = {
                 
                 if (this.errors.length > 0 && this.errors[0].errors && this.errors[0].errors.length) {
                     for (let error of this.errors) 
-                        this.$emitter.on('updateErrorMessageOf#' + (error.metadatum_id + (error.parent_meta_id ? '-' + error.parent_meta_id : '')), error);
+                        this.$emitter.emit('updateErrorMessageOf#' + (error.metadatum_id + (error.parent_meta_id ? '-' + error.parent_meta_id : '')), error);
                 }
             },
             deep: true
@@ -37,7 +39,7 @@ export const itemMetadataMixin = {
             
             if (itemId) {
 
-                this.isUpdatingValues = true;;
+                this.isUpdatingValues = true;
 
                 if (values.length > 0 && values[0] && values[0].value) {
                     let onlyValues = values.map((aValueObject) => aValueObject.value);
@@ -59,7 +61,7 @@ export const itemMetadataMixin = {
                         this.$emitter.emit('updateErrorMessageOf#' + (parentMetaId ? metadatumId + '-' + parentMetaId : metadatumId), this.errors[index]);
                     })
                     .catch(({ error_message, error, item_metadata }) => {
-                        this.isUpdatingValues = false;;
+                        this.isUpdatingValues = false;
                         let index = this.errors.findIndex( errorItem => errorItem.metadatum_id == metadatumId && (parentMetaId ? errorItem.parent_meta_id == parentMetaId : true ));
                         let messages = [];
 
@@ -94,7 +96,7 @@ export const itemMetadataMixin = {
                 // In the item submission, we don't want to block submission or clear errors before a re-submission is performed,
                 // as the validation depends on a single server-side request. Thus, we do not update error arary here.
 
-                this.isUpdatingValues = false;;
+                this.isUpdatingValues = false;
             }
 
             /** 
@@ -115,7 +117,7 @@ export const itemMetadataMixin = {
         },
         removeItemMetadataGroup({ itemId, metadatumId, parentMetaId, parentMetadatum }) {
             
-            this.isUpdatingValues = true;;
+            this.isUpdatingValues = true;
             
             if (itemId && metadatumId && parentMetaId) {
                 

src/views/admin/js/store/modules/metadata/actions.js

@@ -422,6 +422,10 @@ export const moveMetadatumDown = ({ commit }, { index, sectionIndex }) => {
     commit('moveMetadatumDown', { index, sectionIndex });
 }
 
+export const moveMetadatum = ({ commit }, { newIndex, oldIndex, sectionIndex }) => {
+    commit('moveMetadatum', { newIndex, oldIndex, sectionIndex });
+}
+
 // METADATA SECTION METADATA LIST
 export const fetchMetadataSectionMetadata = ({commit}, { collectionId , metadataSectionId }) => {
     return new Promise((resolve, reject) => {

src/views/admin/js/store/modules/metadata/mutations.js

@@ -187,7 +187,6 @@ export const deleteMetadatumInsideMetadataSection = (state, metadatum) => {
                 const existingIndex = existingParentChildrenObject.findIndex((aMetadatum) => aMetadatum.id == metadatum.id);
                 if (existingIndex >= 0)
                     existingParentChildrenObject.splice(existingIndex, 1);
-                
                 existingParent.metadata_type_options.children_objects = existingParentChildrenObject;
                 
                 metadataSection['metadata_object_list'].splice(existingParentIndex, 1, existingParent); 
@@ -241,3 +240,7 @@ export const moveMetadatumUp = (state, { index, sectionIndex }) => {
 export const moveMetadatumDown = (state, { index, sectionIndex }) => {
     state.metadataSections[sectionIndex].metadata_object_list.splice(index + 1, 0, state.metadataSections[sectionIndex].metadata_object_list.splice(index, 1)[0]);
 }
+
+export const moveMetadatum = (state, { newIndex, oldIndex, sectionIndex }) => {
+    state.metadataSections[sectionIndex].metadata_object_list.splice(newIndex, 0, state.metadataSections[sectionIndex].metadata_object_list.splice(oldIndex, 1)[0]);
+}

src/views/admin/js/store/modules/search/actions.js

@@ -183,7 +183,3 @@ export const cleanSelectedItems = ({ commit }) => {
 export const removeSelectedItem = ({ commit }, selectedItem ) => {
     commit('removeSelectedItem', selectedItem);
 };
-
-export const highlightsItem = ({ commit }, itemId ) => {
-    commit('setHighlightedItem', itemId);
-};

src/views/admin/pages/home-page.vue

@@ -186,9 +186,9 @@ export default {
         }
     },
     computed: {
-        collections() {
+        ...mapGetters('collection', {
-            return this.getCollections(); 
+            'collections': 'getCollections'
-        }
+        }),
     },
     mounted() {
         this.loadCollections();
@@ -198,9 +198,6 @@ export default {
             'fetchCollections',
             'cleanCollections'
         ]),
-        ...mapGetters('collection', [
-            'getCollections'
-        ]),
         loadCollections() {
             this.cleanCollections();    
             this.isLoadingCollections = true;

src/views/admin/pages/lists/activities-page.vue

@@ -391,6 +391,9 @@
             }
         },
         computed: {
+            ...mapGetters('bgprocess', {
+               'processes': 'getProcesses'
+            }),
             activities(){
                 let activitiesList = this.getActivities();
 
@@ -400,9 +403,6 @@
                         moment(activity['log_date'], 'YYYY-MM-DD h:mm:ss').format('DD/MM/YYYY, hh:mm:ss');
 
                 return activitiesList;
-            },
-            processes(){
-                return this.getProcesses();
             }
         },
         created() {
@@ -451,9 +451,6 @@
             ...mapActions('bgprocess', [
                 'fetchProcesses',
             ]),
-            ...mapGetters('bgprocess', [
-                'getProcesses'
-            ]),
             onChangeTab(tab) {
                 this.tab = tab;
                 if (this.tab == 'processes') {

src/views/admin/pages/lists/capabilities-page.vue

@@ -102,6 +102,9 @@
             }
         },
         computed: {
+            ...mapGetters('collection', {
+                'collection': 'getCollection'
+            }),
             capabilities() {
                 const capabilities = this.getCapabilities()
   
@@ -140,9 +143,6 @@
                 } else {
                     return []
                 }
-            },
-            collection() {
-                return this.getCollection();
             }
         },
         mounted() {
@@ -160,9 +160,6 @@
             ...mapGetters('capability', [
                 'getCapabilities'
             ]),
-            ...mapGetters('collection', [
-                'getCollection'
-            ]),
             loadCapabilities() {
                 this.isLoading = true;
 

src/views/admin/pages/lists/collections-page.vue

@@ -433,12 +433,10 @@ export default {
         }
     },
     computed: {
-        collections() {
+        ...mapGetters('collection', {
-            return this.getCollections();
+            'collections': 'getCollections',
-        },
+            'repositoryTotalCollections': 'getRepositoryTotalCollections'
-        repositoryTotalCollections(){
+        }),
-            return this.getRepositoryTotalCollections();
-        },
         collectionTaxonomies() {
             let collectionTaxonomies = this.getCollectionTaxonomies();
 
@@ -510,8 +508,6 @@ export default {
             'fetchMetadatumMappers'
         ]),
         ...mapGetters('collection', [
-            'getCollections',
-            'getRepositoryTotalCollections',
             'getCollectionTaxonomies'
         ]),
         onChangeTab(status) {

src/views/admin/pages/lists/filters-page.vue

@@ -537,6 +537,9 @@ export default {
         }
     },
     computed: {
+        ...mapGetters('collection', {
+            'collection': 'getCollection',
+        }),
         activeFiltersList: {
             get() {
                 return this.getFilters();
@@ -545,9 +548,6 @@ export default {
                 this.updateFilters(value);
             }
         },
-        collection() {
-            return this.getCollection();
-        }
     },
     watch: {
         '$route.query': {
@@ -624,8 +624,7 @@ export default {
             'moveFilterDown'
         ]),
         ...mapGetters('filter',[
-            'getFilters',
+            'getFilters'
-            'getFilterTypes'
         ]),
         ...mapActions('metadata', [
             'fetchMetadata',
@@ -633,9 +632,6 @@ export default {
         ...mapGetters('metadata', [
             'getMetadata',
         ]),
-        ...mapGetters('collection', [
-            'getCollection',
-        ]),
         handleChangeOnFilter($event) {
             switch( $event.type ) {
                 case 'add':
@@ -644,6 +640,7 @@ export default {
                 case 'remove':
                     this.removeFilter(this.activeFiltersList[$event.oldIndex]);
                     break;
+                case 'change':
                 case 'update': {
                     const newActiveFiltersList = JSON.parse(JSON.stringify(this.activeFiltersList));
                     const element = newActiveFiltersList.splice($event.oldIndex, 1)[0];
@@ -710,9 +707,8 @@ export default {
             this.activeFiltersList.splice(this.newFilterIndex, 1);
         },
         handleChangeOnMetadata($event) {
-            if ($event.removed) {
+            if ( $event.type == 'removed' )
                 this.oldMetadatumIndex = $event.removed.oldIndex;
-            }
         },
         updateFiltersOrder() {
             let filtersOrder = [];
@@ -1124,6 +1120,12 @@ export default {
                     text-overflow: ellipsis;
                     white-space: nowrap;
                     overflow: hidden;
+                    -webkit-touch-callout: none;
+                    -webkit-user-select: none;
+                    -khtml-user-select: none;
+                    -moz-user-select: none;
+                    -ms-user-select: none;
+                    user-select: none;
                 }
                 .not-saved {
                     font-style: italic;

src/views/admin/pages/lists/items-page.vue

@@ -748,46 +748,32 @@
             }
         },
         computed: {
+            ...mapGetters('collection', {
+                'items': 'getItems',
+                'collection': 'getCollection'
+            }),
+            ...mapGetters('metadata', {
+                'metadata': 'getMetadata'
+            }),
+            ...mapGetters('search', {
+                'searchQuery': 'getSearchQuery',
+                'sentenceMode': 'getSentenceMode',
+                'status': 'getStatus',
+                'orderBy': 'getOrderBy',
+                'order': 'getOrder',
+                'totalItems': 'getTotalItems',
+                'adminViewMode': 'getAdminViewMode',
+                'metaKey': 'getMetaKey'
+            }),
             isSortingByCustomMetadata() {
                 return (this.orderBy != undefined && this.orderBy != '' && this.orderBy != 'title' && this.orderBy != 'date' && this.orderBy != 'modified');
             },
-            items() {
-                return this.getItems();
-            },
-            totalItems() {
-                this.updateCollectionInfo();
-                return this.getTotalItems();
-            },
-            metadata() {
-                return this.getMetadata();
-            },
-            collection() {
-                return this.getCollection();
-            },
-            searchQuery() {
-                return this.getSearchQuery();
-            },
-            status() {
-                return this.getStatus();
-            },
-            sentenceMode() {
-                return this.getSentenceMode();
-            },
-            adminViewMode() {
-                const currentAdminViewMode = this.getAdminViewMode();
-                return ['table', 'cards', 'records', 'grid', 'masonry', 'list', 'map'].indexOf(currentAdminViewMode) >= 0 ? currentAdminViewMode : 'table';
-            },
-            orderBy() {
-                return this.getOrderBy();
-            },
-            order() {
-                return this.getOrder();
-            },
             showLoading() {
                 return this.isLoadingItems || this.isLoadingMetadata;
             },
-            metaKey() {
+            adminViewMode() {
-                return this.getMetaKey();
+                const currentAdminViewMode = this.getAdminViewMode();
+                return ['table', 'cards', 'records', 'grid', 'masonry', 'list', 'map'].indexOf(currentAdminViewMode) >= 0 ? currentAdminViewMode : 'table';
             },
             orderByName() {
                 const metadatumName =  this.$orderByHelper.getOrderByMetadatumName({
@@ -949,6 +935,9 @@
                             this.$refs['filters-modal'].focus();
                     }, 800);
                 }
+            },
+            totalItems() {
+                this.updateCollectionInfo();
             }
         },
         created() {
@@ -1030,28 +1019,14 @@
 
         },
         methods: {
-            ...mapGetters('collection', [
-                'getItems',
-                'getCollection'
-            ]),
             ...mapActions('collection', [
                 'fetchCollectionBasics'
             ]),
             ...mapActions('metadata', [
                 'fetchMetadata'
             ]),
-            ...mapGetters('metadata', [
-                'getMetadata'
-            ]),
             ...mapGetters('search', [
-                'getSearchQuery',
-                'getSentenceMode',
-                'getStatus',
-                'getOrderBy',
-                'getOrder',
-                'getTotalItems',
                 'getAdminViewMode',
-                'getMetaKey'
             ]),
             onOpenImportersModal() {
                 this.$buefy.modal.open({

src/views/admin/pages/lists/metadata-page.vue

@@ -83,9 +83,9 @@ export default {
         }
     },
     computed: {
-        collection() {
+        ...mapGetters('collection', {
-            return this.getCollection();
+            'collection': 'getCollection'
-        },
+        }),
         repositoryTabLabel() {
             let label = this.$i18n.get('metadata');
             const metadata = this.getMetadata();
@@ -115,9 +115,6 @@ export default {
             this.$emitter.emit('onCollectionBreadCrumbUpdate', [{ path: '', label: this.$i18n.get('metadata') }]);
     },
     methods: {
-        ...mapGetters('collection',[
-            'getCollection'
-        ]),
         ...mapGetters('metadata',[
             'getMetadatumTypes',
             'getMetadata',
@@ -360,6 +357,12 @@ export default {
                     text-overflow: ellipsis;
                     white-space: nowrap;
                     overflow: hidden;
+                    -webkit-touch-callout: none;
+                    -webkit-user-select: none;
+                    -khtml-user-select: none;
+                    -moz-user-select: none;
+                    -ms-user-select: none;
+                    user-select: none;
                 }
                 .not-saved {
                     font-style: italic;

src/views/admin/pages/lists/taxonomies-page.vue

@@ -283,12 +283,10 @@
             }
         },
         computed: {
-            taxonomies(){
+            ...mapGetters('taxonomy', {
-                return this.get();
+                'taxonomies': 'get',
-            },
+                'repositoryTotalTaxonomies': 'getRepositoryTotalTaxonomies'
-            repositoryTotalTaxonomies(){
+            }),
-                return this.getRepositoryTotalTaxonomies();
-            },
             statusOptionsForTaxonomies() {
                 return this.$statusHelper.getStatuses().filter((status) => status.slug != 'draft' && (status.slug != 'private' || (status.slug == 'private' && this.$userCaps.hasCapability('tnc_rep_read_private_taxonomies'))));
             }
@@ -325,10 +323,6 @@
             ...mapActions('taxonomy', [
                 'fetch',
             ]),
-            ...mapGetters('taxonomy', [
-                'get',
-                'getRepositoryTotalTaxonomies'
-            ]),
             onChangeTab(status) {
                 this.page = 1;
                 this.status = status;

src/views/admin/pages/singles/item-page.vue

@@ -476,18 +476,16 @@
             }
         },
         computed: {
-            collection() {
+            ...mapGetters('collection', {
-                return this.getCollection();
+                'collection': 'getCollection'
-            },
+            }),
-            metadataSections() {
+            ...mapGetters('metadata', {
-                return this.getMetadataSections();
+                'metadataSections': 'getMetadataSections'
-            },
+            }),
-            item() {
+            ...mapGetters('item', {
-                // Fills hook forms with it's real values 
+                'item': 'getItem',
-                this.updateExtraFormData(this.getItem());
+                'totalAttachments': 'getTotalAttachments'
-
+            }),
-                return this.getItem();
-            },
             itemMetadata() {
                 const realItemMetadata = JSON.parse(JSON.stringify(this.getItemMetadata()));
                 const tweakedItemMetadata = realItemMetadata.map((anItemMetadatum) => {
@@ -515,9 +513,6 @@
             totalRelatedItems() {
                 return (this.item && this.item.related_items) ? Object.values(this.item.related_items).reduce((totalItems, aRelatedItemsGroup) => totalItems + parseInt(aRelatedItemsGroup.total_items), 0) : false;
             },
-            totalAttachments() {
-                return this.getTotalAttachments();
-            },
             itemVisibility() {
                 return (this.collection && this.collection.status == 'publish' && this.item && this.item.status == 'publish') ? 'open_access' : 'restrict_access'
             },
@@ -554,6 +549,12 @@
                 return !this.$adminOptions.hideItemSingleAttachments && (this.collection && this.collection.item_enable_attachments === 'yes');
             }
         },
+        watch: {
+            item() {
+                // Fills hook forms with it's real values 
+                this.updateExtraFormData(this.item);
+            }
+        },
         created() {
             // Obtains item and collection ID
             this.collectionId = this.$route.params.collectionId;
@@ -609,19 +610,11 @@
                 'fetchItemMetadata',
             ]),
             ...mapGetters('item', [
-                'getItem',
+                'getItemMetadata'
-                'getItemMetadata',
-                'getTotalAttachments'
-            ]),
-            ...mapGetters('collection', [
-                'getCollection'
             ]),
             ...mapActions('metadata',[
                 'fetchMetadataSections'
             ]),
-            ...mapGetters('metadata',[
-                'getMetadataSections'
-            ]),
             loadMetadata() {
                 // Obtains Item Metadatum
                 this.fetchItemMetadata(this.itemId).then(() => {

src/views/admin/scss/_selects.scss

@@ -43,7 +43,11 @@
         &:hover {
             border-color: var(--tainacan-input-color) !important;
         }
-        
+        &.has-placeholder-selected,
+        &.has-placeholder-selected:hover,
+        &.has-placeholder-selected:focus {
+            color: var(--tainacan-info-color) !important;
+        }
     }
     &:not(.is-loading)::after {
         content: "arrowdown" !important;

src/views/admin/scss/_tainacan-form.scss

@@ -49,7 +49,7 @@
           background-color: var(--tainacan-red1);  
         }
     }
-    a[disabled] {
+    a[disabled="true"] {
         opacity: 0.5;
         user-select: none;
         pointer-events: none;

src/views/gutenberg-blocks/blocks/carousel-collections-list/carousel-collections-modal.js

@@ -238,10 +238,10 @@ export default class CollectionsModal extends React.Component {
                                     )
                                 }                                                
                                 </ul>
-                                { this.state.isLoadingCollections ? <div class="spinner-container"><Spinner /></div> : null }
+                                { this.state.isLoadingCollections ? <div className="spinner-container"><Spinner /></div> : null }
                             </div>
                         )
-                        : this.state.isLoadingCollections ? <div class="spinner-container"><Spinner /></div> :
+                        : this.state.isLoadingCollections ? <div className="spinner-container"><Spinner /></div> :
                         <div className="modal-loadmore-section">
                             <p>{ __('Sorry, no collections found.', 'tainacan') }</p>
                         </div>
@@ -269,7 +269,7 @@ export default class CollectionsModal extends React.Component {
                                     </li>
                                 )
                             } 
-                            { this.state.isLoadingCollections ? <div class="spinner-container"><Spinner /></div> : null }                                               
+                            { this.state.isLoadingCollections ? <div className="spinner-container"><Spinner /></div> : null }                                               
                             </ul>
                             <div className="modal-loadmore-section">
                                 <p>{ __('Showing', 'tainacan') + " " + this.state.modalCollections.length + " " + __('of', 'tainacan') + " " + this.state.totalModalCollections + " " + __('collections', 'tainacan') + "."}</p>

src/views/gutenberg-blocks/blocks/carousel-collections-list/edit.js

@@ -88,7 +88,7 @@ export default function ({ attributes, setAttributes, isSelected, clientId }) {
                     id={ isNaN(collection.id) ? collection.id : 'collection-id-' + collection.id }
                     href={ collection.url }>
                     { ( !showCollectionThumbnail && Array.isArray(collectionItems) ) ?
-                        <div class="collection-items-grid">
+                        <div className="collection-items-grid">
                             <img
                                 src={ collectionItems[0] ? thumbHelper.getSrc(collectionItems[0]['thumbnail'], imageSize, collectionItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
                                 srcSet={ collectionItems[0] ? thumbHelper.getSrcSet(collectionItems[0]['thumbnail'], imageSize, collectionItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
@@ -424,12 +424,12 @@ export default function ({ attributes, setAttributes, isSelected, clientId }) {
             }
 
             { isLoading ?
-                <div class="spinner-container">
+                <div className="spinner-container">
                     <Spinner />
                 </div> :
                 <div>
                     { isSelected && collections.length ?
-                        <div class="preview-warning">{__('Warning: this is just a demonstration. To see the carousel in action, either preview or publish your post.', 'tainacan')}</div>
+                        <div className="preview-warning">{__('Warning: this is just a demonstration. To see the carousel in action, either preview or publish your post.', 'tainacan')}</div>
                         : null
                     }
                     {  collections.length ? (
@@ -445,7 +445,7 @@ export default function ({ attributes, setAttributes, isSelected, clientId }) {
                                 </ul>
                             </div>
                             <button
-                                    class="swiper-button-prev"
+                                    className="swiper-button-prev"
                                     slot="button-prev"
                                     style={{ cursor: 'not-allowed' }}>
                                 <svg
@@ -464,7 +464,7 @@ export default function ({ attributes, setAttributes, isSelected, clientId }) {
                                 </svg>
                             </button>
                             <button
-                                    class="swiper-button-next"
+                                    className="swiper-button-next"
                                     slot="button-next"
                                     style={{ cursor: 'not-allowed' }}>
                                 <svg

src/views/gutenberg-blocks/blocks/carousel-items-list/edit.js

@@ -103,7 +103,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
                 <a 
                     id={ isNaN(item.id) ? item.id : 'item-id-' + item.id }
                     href={ item.url }>
-                    <div class="items-list-item--image-wrap">
+                    <div className="items-list-item--image-wrap">
                         <img
                             src={ thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype']) }
                             srcSet={ thumbHelper.getSrcSet(item['thumbnail'], imageSize, item['document_mimetype']) }
@@ -580,13 +580,13 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
             
                 <div> {
                     isLoadingCollection ? 
-                        <div class="spinner-container">
+                        <div className="spinner-container">
                             <Spinner />
                         </div>
                         :
                         <a
                                 href={ collection.url ? collection.url : '' }
-                                class="carousel-items-collection-header">
+                                className="carousel-items-collection-header">
                             <div
                                     style={{
                                         backgroundColor: collectionBackgroundColor ? collectionBackgroundColor : '', 
@@ -599,21 +599,21 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
                                         ((!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '') 
                                     }>
                                 <h3 style={{  color: collectionTextColor ? collectionTextColor : '' }}>
-                                    { showCollectionLabel ? <span class="label">{ __('Collection', 'tainacan') }<br/></span> : null }
+                                    { showCollectionLabel ? <span className="label">{ __('Collection', 'tainacan') }<br/></span> : null }
                                     { collection && collection.name ? collection.name : '' }
                                 </h3>
                             </div>
                             {
                                 collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium']) ? 
                                     <div   
-                                        class="collection-thumbnail"
+                                        className="collection-thumbnail"
                                         style={{ 
                                             backgroundImage: 'url(' + (collection.thumbnail['tainacan-medium'] != undefined ? (collection.thumbnail['tainacan-medium'][0]) : (collection.thumbnail['medium'][0])) + ')',
                                         }}/>
                                 : null
                             }  
                             <div
-                                    class="collection-header-image"
+                                    className="collection-header-image"
                                     style={{
                                         backgroundImage: collection.header_image ? 'url(' + collection.header_image + ')' : '',
                                         minHeight: collection && collection.header_image ? '' : '80px',
@@ -667,12 +667,12 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
             }
             
             { isLoading ? 
-                <div class="spinner-container">
+                <div className="spinner-container">
                     <Spinner />
                 </div> :
                 <div>
                     { isSelected && items.length ? 
-                        <div class="preview-warning">{__('Warning: this is just a demonstration. To see the carousel in action, either preview or publish your post.', 'tainacan')}</div>
+                        <div className="preview-warning">{__('Warning: this is just a demonstration. To see the carousel in action, either preview or publish your post.', 'tainacan')}</div>
                         : null
                     }
                     {  items.length ? (
@@ -692,7 +692,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
                                 </ul>
                             </div>
                             <button 
-                                    class="swiper-button-prev" 
+                                    className="swiper-button-prev" 
                                     slot="button-prev"
                                     style={{ cursor: 'not-allowed' }}>
                                 <svg
@@ -711,7 +711,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
                                 </svg>
                             </button>
                             <button 
-                                    class="swiper-button-next" 
+                                    className="swiper-button-next" 
                                     slot="button-next"
                                     style={{ cursor: 'not-allowed' }}>
                                 <svg

src/views/gutenberg-blocks/blocks/carousel-terms-list/edit.js

@@ -89,7 +89,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
                     id={ isNaN(term.id) ? term.id : 'term-id-' + term.id }
                     href={ term.url }>
                     { ( !showTermThumbnail && Array.isArray(termItems) ) ?
-                        <div class="term-items-grid">
+                        <div className="term-items-grid">
                             <img
                                 src={ termItems[0] ? thumbHelper.getSrc(termItems[0]['thumbnail'], 'tainacan-medium', termItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
                                 srcSet={ termItems[0] ? thumbHelper.getSrcSet(termItems[0]['thumbnail'], 'tainacan-medium', termItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
@@ -433,12 +433,12 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
             }
 
             { isLoading ?
-                <div class="spinner-container">
+                <div className="spinner-container">
                     <Spinner />
                 </div> :
                 <div>
                     { isSelected && terms.length ?
-                        <div class="preview-warning">{__('Warning: this is just a demonstration. To see the carousel in action, either preview or publish your post.', 'tainacan')}</div>
+                        <div className="preview-warning">{__('Warning: this is just a demonstration. To see the carousel in action, either preview or publish your post.', 'tainacan')}</div>
                         : null
                     }
                     {  terms.length ? (
@@ -454,7 +454,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
                                 </ul>
                             </div>
                             <button
-                                    class="swiper-button-prev"
+                                    className="swiper-button-prev"
                                     slot="button-prev"
                                     style={{ cursor: 'not-allowed' }}>
                                 <svg
@@ -473,7 +473,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }){
                                 </svg>
                             </button>
                             <button
-                                    class="swiper-button-next"
+                                    className="swiper-button-next"
                                     slot="button-next"
                                     style={{ cursor: 'not-allowed' }}>
                                 <svg

src/views/gutenberg-blocks/blocks/collections-list/collections-modal.js

@@ -240,10 +240,10 @@ export default class CollectionsModal extends React.Component {
                                     )
                                 }                                                
                                 </ul>
-                                { this.state.isLoadingCollections ? <div class="spinner-container"><Spinner /></div> : null }
+                                { this.state.isLoadingCollections ? <div className="spinner-container"><Spinner /></div> : null }
                             </div>
                         )
-                        : this.state.isLoadingCollections ? <div class="spinner-container"><Spinner /></div> :
+                        : this.state.isLoadingCollections ? <div className="spinner-container"><Spinner /></div> :
                         <div className="modal-loadmore-section">
                             <p>{ __('Sorry, no collections found.', 'tainacan') }</p>
                         </div>
@@ -271,7 +271,7 @@ export default class CollectionsModal extends React.Component {
                                     </li>
                                 )
                             } 
-                            { this.state.isLoadingCollections ? <div class="spinner-container"><Spinner /></div> : null }                                               
+                            { this.state.isLoadingCollections ? <div className="spinner-container"><Spinner /></div> : null }                                               
                             </ul>
                             <div className="modal-loadmore-section">
                                 <p>{ __('Showing', 'tainacan') + " " + this.state.modalCollections.length + " " + __('of', 'tainacan') + " " + this.state.totalModalCollections + " " + __('collections', 'tainacan') + "."}</p>

src/views/gutenberg-blocks/blocks/collections-list/edit.js

@@ -32,9 +32,9 @@ export default function({ attributes, setAttributes, isSelected }) {
                 <button
                         onClick={ () => removeCollectionOfId(collection.id) }
                         type="button"
-                        class="components-button has-icon"
+                        className="components-button has-icon"
                         aria-label={__('Remove', 'tainacan')}>
-                    <span class="dashicon dashicons dashicons-no-alt" />
+                    <span className="dashicon dashicons dashicons-no-alt" />
                 </button>
                 <a 
                     id={ isNaN(collection.id) ? collection.id : 'collection-id-' + collection.id }

src/views/gutenberg-blocks/blocks/dynamic-items-list/edit.js

@@ -886,13 +886,13 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
             
                 <div> {
                     isLoadingCollection ? 
-                        <div class="spinner-container">
+                        <div className="spinner-container">
                             <Spinner />
                         </div>
                         :
                         <a
                                 href={ collection.url ? collection.url : '' }
-                                class="dynamic-items-collection-header">
+                                className="dynamic-items-collection-header">
                             <div
                                     style={{
                                         backgroundColor: collectionBackgroundColor ? collectionBackgroundColor : '', 
@@ -905,21 +905,21 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
                                         ((!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '') 
                                     }>
                                 <h3 style={{  color: collectionTextColor ? collectionTextColor : '' }}>
-                                    { showCollectionLabel ? <span class="label">{ __('Collection', 'tainacan') }<br/></span> : null }
+                                    { showCollectionLabel ? <span className="label">{ __('Collection', 'tainacan') }<br/></span> : null }
                                     { collection && collection.name ? collection.name : '' }
                                 </h3>
                             </div>
                             {
                                 collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium']) ? 
                                     <div   
-                                        class="collection-thumbnail"
+                                        className="collection-thumbnail"
                                         style={{ 
                                             backgroundImage: 'url(' + (collection.thumbnail['tainacan-medium'] != undefined ? (collection.thumbnail['tainacan-medium'][0]) : (collection.thumbnail['medium'][0])) + ')',
                                         }}/>
                                 : null
                             }  
                             <div
-                                    class="collection-header-image"
+                                    className="collection-header-image"
                                     style={{
                                         backgroundImage: collection.header_image ? 'url(' + collection.header_image + ')' : '',
                                         minHeight: collection && collection.header_image ? '' : '80px',
@@ -933,12 +933,12 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
 
             {
                 showSearchBar ?
-                <div class="dynamic-items-search-bar">
+                <div className="dynamic-items-search-bar">
                     <Button
                         onClick={ () => { order = 'asc'; setAttributes({ order: order }); setContent(); }}
                         className={order == 'asc' ? 'sorting-button-selected' : ''}
                         label={__('Sort ascending', 'tainacan')}>
-                        <span class="icon">
+                        <span className="icon">
                             <i>
                                 <svg width="24" height="24" viewBox="-2 -4 20 20">
                                 <path d="M6.7,10.8l-3.3,3.3L0,10.8h2.5V0h1.7v10.8H6.7z M11.7,0.8H8.3v1.7h3.3V0.8z M14.2,5.8H8.3v1.7h5.8V5.8z M16.7,10.8H8.3v1.7	h8.3V10.8z"/>       
@@ -950,7 +950,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
                         onClick={ () => { order = 'desc'; setAttributes({ order: order }); setContent(); }}
                         className={order == 'desc' ? 'sorting-button-selected' : ''}
                         label={__('Sort descending', 'tainacan')}>
-                        <span class="icon">
+                        <span className="icon">
                             <i>
                                 <svg width="24" height="24" viewBox="-2 -4 20 20">
                                 <path d="M6.7,3.3H4.2v10.8H2.5V3.3H0L3.3,0L6.7,3.3z M11.6,2.5H8.3v1.7h3.3V2.5z M14.1,7.5H8.3v1.7h5.8V7.5z M16.6,12.5H8.3v1.7 h8.3V12.5z"/>
@@ -961,10 +961,10 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
                     <Button
                         onClick={ () => { setContent(); }}
                         label={__('Search', 'tainacan')}>
-                        <span class="icon">
+                        <span className="icon">
                             <i>
                                 <svg width="24" height="24" viewBox="-2 -4 20 20">
-                                <path class="st0" d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
+                                <path className="st0" d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
                                     c0.7,0.3,1.3,0.7,1.8,1.2s0.9,1.1,1.2,1.8c0.5,1.2,0.5,2.5,0.2,3.7c0,0.2-0.1,0.4-0.2,0.6c0,0.1-0.2,0.6-0.2,0.6
                                     c0.6,0.6,1.3,1.3,1.9,1.9c0.7,0.7,1.3,1.3,2,2c0,0,0.3,0.2,0.3,0.3c0,0.3-0.1,0.7-0.3,1c-0.2,0.6-0.8,1-1.4,1.2
                                     c-0.1,0-0.6,0.2-0.6,0.1c0,0-4.2-4.2-4.2-4.2c0,0-0.8,0.3-0.8,0.4c-1.3,0.4-2.8,0.5-4.1-0.1c-0.7-0.3-1.3-0.7-1.8-1.2
@@ -980,10 +980,10 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
                             onChange={ (value) =>  { _.debounce(applySearchString(value), 300); } }
                             type="text"/>
                     <Button
-                            class="previous-button"
+                            className="previous-button"
                             disabled
                             label={__('Previous page', 'tainacan')}>
-                        <span class="icon">
+                        <span className="icon">
                             <i>
                                 <svg
                                         width="30"
@@ -998,10 +998,10 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
                         </span>
                     </Button>
                     <Button
-                            class="next-button"
+                            className="next-button"
                             disabled
                             label={__('Next page', 'tainacan')}>
-                        <span class="icon">
+                        <span className="icon">
                             <i>
                                 <svg
                                         width="30"
@@ -1062,7 +1062,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
             }
             
             { isLoading ? 
-                <div class="spinner-container">
+                <div className="spinner-container">
                     <Spinner />
                 </div> :
                 <div>

src/views/gutenberg-blocks/blocks/faceted-search/collection-modal.js

@@ -353,7 +353,7 @@ export default class CollectionModal extends React.Component {
                                 }
                             </div>
                         </div>
-                    ) : this.state.isLoadingCollections ? <div class="spinner-container"><Spinner /></div> :
+                    ) : this.state.isLoadingCollections ? <div className="spinner-container"><Spinner /></div> :
                     <div className="modal-loadmore-section">
                         <p>{ __('Sorry, no collection found.', 'tainacan') }</p>
                     </div>

src/views/gutenberg-blocks/blocks/faceted-search/edit.js

@@ -227,7 +227,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
                                                     onClick={ onToggle }
                                                     aria-expanded={ isOpen }>
                                                         { __('Items list source', 'tainacan')  }
-                                                        <span class="components-dropdown-menu__indicator"></span>  
+                                                        <span className="components-dropdown-menu__indicator"></span>  
                                                 </ToolbarButton>
                                         ) }
                                         renderContent={ ( { onToggle } ) => (
@@ -808,7 +808,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
                 ) :
                 (
                     <div style={{ fontSize: (baseFontSize - 2) + 'px' }}>
-                        <div class="preview-warning">
+                        <div className="preview-warning">
                             { __('Warning: this is just a demonstration. To see the items list, either preview or publish your post.', 'tainacan') }
                         </div>
                         <div 
@@ -828,139 +828,139 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
                                     '--tainacan-primary': primaryColor,
                                     '--tainacan-secondary': secondaryColor
                                 }}
-                                class="items-list-placeholder">
+                                className="items-list-placeholder">
-                            <div class="search-control">
+                            <div className="search-control">
                                 { 
                                     !hideSearch ?
-                                    <span class="fake-searchbar">
+                                    <span className="fake-searchbar">
-                                        { !hideAdvancedSearch ? <span class="fake-advanced-searchbar"></span> : null }
+                                        { !hideAdvancedSearch ? <span className="fake-advanced-searchbar"></span> : null }
                                     </span>
                                     : null
                                 }
                                 {
-                                    showFiltersButtonInsideSearchControl && !hideHideFiltersButton ? <span class="fake-button"><div class="fake-icon"></div><div class="fake-text"></div></span> : null
+                                    showFiltersButtonInsideSearchControl && !hideHideFiltersButton ? <span className="fake-button"><div className="fake-icon"></div><div className="fake-text"></div></span> : null
                                 }
                                 { 
                                     !hideDisplayedMetadataButton ?
-                                    <span class="fake-button"><div class="fake-text"></div></span>
+                                    <span className="fake-button"><div className="fake-text"></div></span>
                                     :null
                                 }
                                 { 
                                     !hideSortingArea ?
-                                    <span class="fake-button"> { !hideSortByButton ? <div class="fake-text"></div> : null }<div class="fake-icon"></div><div class="fake-text"></div></span>
+                                    <span className="fake-button"> { !hideSortByButton ? <div className="fake-text"></div> : null }<div className="fake-icon"></div><div className="fake-text"></div></span>
                                 :null 
                                 }
                                 {
                                     !showInlineViewModeOptions ? 
-                                        <span class="fake-button"><div class="fake-icon"></div><div class="fake-text"></div></span> 
+                                        <span className="fake-button"><div className="fake-icon"></div><div className="fake-text"></div></span> 
                                     : 
-                                        <div class="fake-buttons-group">
+                                        <div className="fake-buttons-group">
-                                            { Array(3).fill().map( () => <div class="fake-button"><div class="fake-icon"></div></div> )}
+                                            { Array(3).fill().map( () => <div className="fake-button"><div className="fake-icon"></div></div> )}
-                                            { showFullscreenWithViewModes ? <span class="fake-button"><div class="fake-icon"></div></span> : null }
+                                            { showFullscreenWithViewModes ? <span className="fake-button"><div className="fake-icon"></div></span> : null }
                                         </div>
                                 }
                                 {
-                                    !showFullscreenWithViewModes ? <span class="fake-button"><div class="fake-icon"></div><div class="fake-text"></div></span> : null
+                                    !showFullscreenWithViewModes ? <span className="fake-button"><div className="fake-icon"></div><div className="fake-text"></div></span> : null
                                 }
                                 {
-                                    !hideExposersButton ? <span class="fake-button"><div class="fake-icon"></div><div class="fake-text"></div></span> : null
+                                    !hideExposersButton ? <span className="fake-button"><div className="fake-icon"></div><div className="fake-text"></div></span> : null
                                 }
                             </div>
-                            <div class="below-search-control">
+                            <div className="below-search-control">
-                                { !showFiltersButtonInsideSearchControl & !hideHideFiltersButton && !hideFilters ? <span class="fake-hide-button"><div class="fake-icon"></div></span> : null }
+                                { !showFiltersButtonInsideSearchControl & !hideHideFiltersButton && !hideFilters ? <span className="fake-hide-button"><div className="fake-icon"></div></span> : null }
                                 { 
                                     !hideFilters && !filtersAsModal && !startWithFiltersHidden ?
                                         <div 
                                                 style={{
                                                     flexBasis: filtersAreaWidth + '%'
                                                 }}
-                                                class="filters">
+                                                className="filters">
-                                            <div class="fake-filters-heading"></div>
+                                            <div className="fake-filters-heading"></div>
                                             { Array(2).fill().map( () => {
-                                                return <div class="fake-filter">
+                                                return <div className="fake-filter">
-                                                    <span class="fake-text"></span>
+                                                    <span className="fake-text"></span>
-                                                    <span class="fake-searchbar"></span>
+                                                    <span className="fake-searchbar"></span>
                                                 </div>
                                             } )}
-                                            <div class="fake-filter">
+                                            <div className="fake-filter">
-                                                <span class="fake-text"></span>
+                                                <span className="fake-text"></span>
-                                                <div class="fake-checkbox-list">
+                                                <div className="fake-checkbox-list">
                                                     { Array(4).fill().map( () => {
                                                         return <div>
-                                                            <span class="fake-checkbox"></span>
+                                                            <span className="fake-checkbox"></span>
-                                                            <span class="fake-text"></span>
+                                                            <span className="fake-text"></span>
                                                         </div>
                                                     } ) }
-                                                    <div class="fake-link"></div>
+                                                    <div className="fake-link"></div>
                                                 </div>
                                             </div>
-                                            <div class="fake-filter">
+                                            <div className="fake-filter">
-                                                <span class="fake-text"></span>
+                                                <span className="fake-text"></span>
-                                                <span class="fake-searchbar"></span>
+                                                <span className="fake-searchbar"></span>
                                             </div>
-                                            <div class="fake-filter">
+                                            <div className="fake-filter">
-                                                <span class="fake-text"></span>
+                                                <span className="fake-text"></span>
-                                                <div class="fake-checkbox-list">
+                                                <div className="fake-checkbox-list">
                                                     { Array(2).fill().map( () => {
                                                         return <div>
-                                                            <span class="fake-checkbox"></span>
+                                                            <span className="fake-checkbox"></span>
-                                                            <span class="fake-text"></span>
+                                                            <span className="fake-text"></span>
                                                         </div>
                                                     } ) }
-                                                    <div class="fake-link"></div>
+                                                    <div className="fake-link"></div>
                                                 </div>
                                             </div>
                                         </div> 
                                     : null 
                                 }
-                                <div class="aside-filters">    
+                                <div className="aside-filters">    
                                     <div className={ 'items' + (hideItemsThumbnail ? ' items-without-thumbnail' : '') }>
                                         { Array(5).fill().map( () => {
-                                            return <div class="fake-item">
+                                            return <div className="fake-item">
-                                                <div class="fake-item-header">
+                                                <div className="fake-item-header">
-                                                    <div class="fake-text"></div>
+                                                    <div className="fake-text"></div>
                                                 </div>
                                                 <div 
                                                         style={{ 
                                                             backgroundImage: tainacan_plugin ? 'url("' + tainacan_plugin.base_url + '/assets/images/placeholder_square.png")' : '' 
                                                         }}
-                                                        class="fake-item-thumb"></div>
+                                                        className="fake-item-thumb"></div>
-                                                { Array(3).fill().map( () => <div class="fake-item-description"></div> ) }
+                                                { Array(3).fill().map( () => <div className="fake-item-description"></div> ) }
                                             </div>
                                         } ) }
-                                        <div class="fake-item fake-item-hovered">
+                                        <div className="fake-item fake-item-hovered">
-                                            <div class="fake-item-header">
+                                            <div className="fake-item-header">
-                                                <div class="fake-tooltip"><div class="fake-link"></div></div>
+                                                <div className="fake-tooltip"><div className="fake-link"></div></div>
-                                                <div class="fake-text"></div>
+                                                <div className="fake-text"></div>
                                             </div>
                                             <div 
                                                     style={{ 
                                                         backgroundImage: tainacan_plugin ? 'url("' + tainacan_plugin.base_url + '/assets/images/placeholder_square.png")' : '' 
                                                     }}
-                                                    class="fake-item-thumb"></div>
+                                                    className="fake-item-thumb"></div>
-                                            { Array(3).fill().map( () => <div class="fake-item-description"></div> ) }
+                                            { Array(3).fill().map( () => <div className="fake-item-description"></div> ) }
                                         </div>
                                         { Array(2).fill().map( () => {
-                                            return <div class="fake-item">
+                                            return <div className="fake-item">
-                                                <div class="fake-item-header">
+                                                <div className="fake-item-header">
-                                                    <div class="fake-text"></div>
+                                                    <div className="fake-text"></div>
                                                 </div>
                                                 <div 
                                                         style={{ 
                                                             backgroundImage: tainacan_plugin ? 'url("' + tainacan_plugin.base_url + '/assets/images/placeholder_square.png")' : '' 
                                                         }}
-                                                        class="fake-item-thumb"></div>
+                                                        className="fake-item-thumb"></div>
-                                                { Array(3).fill().map( () => <div class="fake-item-description"></div> ) }
+                                                { Array(3).fill().map( () => <div className="fake-item-description"></div> ) }
                                             </div>
                                         } ) }
                                     </div>
                                     { !hidePaginationArea ?
-                                    <div class="pagination">
+                                    <div className="pagination">
-                                        <span class="fake-text"></span>
+                                        <span className="fake-text"></span>
-                                        { !hideItemsPerPageButton ? <span class="fake-button"><div class="fake-text"></div></span> : null }
+                                        { !hideItemsPerPageButton ? <span className="fake-button"><div className="fake-text"></div></span> : null }
-                                        { !hideGoToPageButton ? <span class="fake-button"><div class="fake-text"></div></span> : null }
+                                        { !hideGoToPageButton ? <span className="fake-button"><div className="fake-text"></div></span> : null }
-                                        <div class="fake-buttons-group">
+                                        <div className="fake-buttons-group">
-                                            { Array(6).fill().map( () => <div class="fake-link"></div> ) }
+                                            { Array(6).fill().map( () => <div className="fake-link"></div> ) }
                                         </div>
                                     </div>
                                     : null }

src/views/gutenberg-blocks/blocks/faceted-search/term-modal.js

@@ -325,10 +325,10 @@ export default class TermModal extends React.Component {
                                         } } />    
                                 }                                                
                                 </ul>
-                                { this.state.isLoadingTerms ? <div class="spinner-container"><Spinner /></div> : null }
+                                { this.state.isLoadingTerms ? <div className="spinner-container"><Spinner /></div> : null }
                             </div>
                         )
-                        : this.state.isLoadingTerms ? <div class="spinner-container"><Spinner /></div> :
+                        : this.state.isLoadingTerms ? <div className="spinner-container"><Spinner /></div> :
                         <div className="modal-loadmore-section">
                             <p>{ __('Sorry, no terms found.', 'tainacan') }</p>
                         </div>
@@ -350,7 +350,7 @@ export default class TermModal extends React.Component {
                                     } } />    
                             }                                                
                             </ul>
-                            { this.state.isLoadingTerms ? <div class="spinner-container"><Spinner /></div> : null }
+                            { this.state.isLoadingTerms ? <div className="spinner-container"><Spinner /></div> : null }
                             <div className="modal-loadmore-section">
                                 <p>{ __('Showing', 'tainacan') + " " + this.state.modalTerms.length + " " + __('of', 'tainacan') + " " + this.state.totalModalTerms + " " + __('terms', 'tainacan') + "."}</p>
                                 {
@@ -365,7 +365,7 @@ export default class TermModal extends React.Component {
                                 }
                             </div>
                         </div>
-                    ) : this.state.isLoadingTerms ? <div class="spinner-container"><Spinner /></div> :
+                    ) : this.state.isLoadingTerms ? <div className="spinner-container"><Spinner /></div> :
                     <div className="modal-loadmore-section">
                         <p>{ __('Sorry, no terms found.', 'tainacan') }</p>
                     </div>
@@ -448,7 +448,7 @@ export default class TermModal extends React.Component {
                             </div>
                         ) :
                         this.state.isLoadingTaxonomies ? (
-                            <div class="spinner-container"><Spinner /></div>
+                            <div className="spinner-container"><Spinner /></div>
                         ) :
                         <div className="modal-loadmore-section">
                             <p>{ __('Sorry, no taxonomy found.', 'tainacan') }</p>
@@ -485,7 +485,7 @@ export default class TermModal extends React.Component {
                                 }
                             </div>
                         </div>
-                    ) : this.state.isLoadingTaxonomies ? <div class="spinner-container"><Spinner /></div> :
+                    ) : this.state.isLoadingTaxonomies ? <div className="spinner-container"><Spinner /></div> :
                     <div className="modal-loadmore-section">
                         <p>{ __('Sorry, no taxonomy found.', 'tainacan') }</p>
                     </div>

src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-map.vue

@@ -517,11 +517,11 @@ export default {
         itemsLocations: { 
             handler() {
                 setTimeout(() => {
-                    if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
+                    if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].leafletObject ) {
                         if (this.itemsLocations.length == 1)
-                            this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16 });
+                            this.$refs['tainacan-view-mode-map'].leafletObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16 });
                         else
-                            this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16 });
+                            this.$refs['tainacan-view-mode-map'].leafletObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16 });
                     }
                 }, 500)
             },
@@ -555,8 +555,8 @@ export default {
             this.$userPrefs.set(prefsGeocoordinateMetadatum, id);
         },
         onMapReady() {
-            if ( LeafletActiveArea && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject )
+            if ( LeafletActiveArea && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].leafletObject )
-                this.$refs['tainacan-view-mode-map'].mapObject.setActiveArea('leaflet-active-area');
+                this.$refs['tainacan-view-mode-map'].leafletObject.setActiveArea('leaflet-active-area');
         },
         getItemImageHeight(imageWidth, imageHeight) {  
             let itemWidth = 120;
@@ -571,19 +571,19 @@ export default {
         clearSelectedMarkers() {
             this.mapSelectedItemId = false;
             this.selectedMarkerIndexes = [];
-            if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
+            if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].leafletObject ) {
                 if (this.itemsLocations.length == 1)
-                    this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16 });
+                    this.$refs['tainacan-view-mode-map'].leafletObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16 });
                 else
-                    this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16 });
+                    this.$refs['tainacan-view-mode-map'].leafletObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16 });
             }
         },
         showItemByLocation(index) {
             this.mapSelectedItemId = this.itemsLocations[index].item.id;
             this.selectedMarkerIndexes = [];
             this.selectedMarkerIndexes.push(index);
-            if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject )
+            if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].leafletObject )
-                this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( [ this.itemsLocations[index].location ],  { animate: true, maxZoom: 16 });
+                this.$refs['tainacan-view-mode-map'].leafletObject.panInsideBounds( [ this.itemsLocations[index].location ],  { animate: true, maxZoom: 16 });
         },
         showLocationsByItem(item) {
             this.mapSelectedItemId = item.id;
@@ -596,11 +596,11 @@ export default {
             })
 
             if ( selectedLocationsByItem.length) {
-                if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
+                if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].leafletObject ) {
                     if (selectedLocationsByItem.length > 1)
-                        this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16 });
+                        this.$refs['tainacan-view-mode-map'].leafletObject.flyToBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16 });
                     else
-                        this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16 });
+                        this.$refs['tainacan-view-mode-map'].leafletObject.panInsideBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16 });
                 }
             } else {
                 this.$buefy.snackbar.open({

src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-slideshow.vue

@@ -402,18 +402,18 @@ export default {
         }
     },
     computed: {
-        item() {
+        ...mapGetters('item', {
-            return this.getItem();
+            'item': 'getItem'
-        },
+        }),
-        page() {
+        ...mapGetters('search', {
-            this.setMaxAndMinPages();
+            'totalPages': 'getTotalPages',
-            return this.getPage();
+            'page': 'getPage',
-        },
+        })
-        totalPages() {
-            return this.getTotalPages();
-        }
     },
     watch: {
+        page() {
+            this.setMaxAndMinPages();
+        },
         isLoading: {
             handler(val, oldValue) {
                 if (val === false && oldValue === true && this.swiper && this.items && this.items.length) {
@@ -540,14 +540,6 @@ export default {
             'fetchItem',
             'replaceItem'
         ]),
-        ...mapGetters('item', [
-            'getItem'
-        ]),
-         ...mapGetters('search', [
-            'getTotalPages',
-            'getPage',
-            'getItemsPerPage'
-        ]),
         setMaxAndMinPages () {
             this.minPage = JSON.parse(JSON.stringify(this.getPage() < this.minPage ? this.getPage() : this.minPage));
             this.maxPage = JSON.parse(JSON.stringify(this.getPage() > this.maxPage ? this.getPage() : this.maxPage));

src/views/gutenberg-blocks/blocks/faceted-search/theme.vue

@@ -770,6 +770,24 @@
             }
         },
         computed: {
+            ...mapGetters('collection', {
+                'items': 'getItems',
+                'itemsListTemplate': 'getItemsListTemplate'
+            }),
+            ...mapGetters('metadata', {
+                'metadata': 'getMetadata'
+            }),
+            ...mapGetters('search', {
+                'searchQuery': 'getSearchQuery',
+                'orderBy': 'getOrderBy',
+                'order': 'getOrder',
+                'viewMode': 'getViewMode',
+                'totalItems': 'getTotalItems',
+                'sentenceMode': 'getSentenceMode',
+                'metaKey': 'getMetaKey',
+                'page': 'getPage',
+                'itemsPerPage': 'getItemsPerPage'
+            }),
             wrapperClasses() {
                 return {
                     'is-filters-menu-open': !this.hideFilters && this.isFiltersModalActive && !this.openAdvancedSearch,
@@ -782,39 +800,9 @@
             isSortingByCustomMetadata() {
                 return (this.orderBy != undefined && this.orderBy != '' && this.orderBy != 'title' && this.orderBy != 'creation_date' && this.orderBy != 'date' && this.orderBy != 'modified'); 
             },
-            items() {
-                return this.getItems();
-            },
-            itemsListTemplate() {
-                return this.getItemsListTemplate();
-            },
-            totalItems() {
-                return this.getTotalItems();
-            },
-            metadata() {
-                return this.getMetadata();
-            },
-            searchQuery() {
-                return this.getSearchQuery();
-            },
-            sentenceMode() {
-                return this.getSentenceMode();
-            },
-            viewMode() {
-                return this.getViewMode();
-            },
-            orderBy() {
-                return this.getOrderBy();
-            },
-            order() {
-                return this.getOrder();
-            },
             showLoading() {
                 return this.isLoadingItems || this.isLoadingMetadata;
             },
-            metaKey() {
-                return this.getMetaKey();
-            },
             orderByName() {
                 const metadatumName =  this.$orderByHelper.getOrderByMetadatumName({
                     orderby: this.$route.query.orderby,
@@ -1128,8 +1116,8 @@
             let existingViewModeIndex = Object.keys(this.registeredViewModes).findIndex(viewMode => viewMode == this.$userPrefs.get(prefsViewMode));
             if (existingViewModeIndex >= 0) {
                 if (!this.registeredViewModes[Object.keys(this.registeredViewModes)[existingViewModeIndex]].show_pagination) {
-                    this.latestPerPageAfterViewModeWithoutPagination = this.getItemsPerPage();
+                    this.latestPerPageAfterViewModeWithoutPagination = this.itemsPerPage;
-                    this.latestPageAfterViewModeWithoutPagination = this.getPage();
+                    this.latestPageAfterViewModeWithoutPagination = this.page;
 
                     this.$eventBusSearch.setItemsPerPage(24, true);
                 }
@@ -1191,28 +1179,9 @@
 
         },
         methods: {
-            ...mapGetters('collection', [
-                'getCollection',
-                'getItems',
-                'getItemsListTemplate'
-            ]),
             ...mapActions('metadata', [
                 'fetchMetadata'
             ]),
-            ...mapGetters('metadata', [
-                'getMetadata'
-            ]),
-            ...mapGetters('search', [
-                'getSearchQuery',
-                'getOrderBy',
-                'getOrder',
-                'getViewMode',
-                'getTotalItems',
-                'getSentenceMode',
-                'getMetaKey',
-                'getPage',
-                'getItemsPerPage'
-            ]),
             parseHooks() {
                 if (wp !== undefined && wp.hooks !== undefined) {
 
@@ -1324,8 +1293,8 @@
                 let existingViewModeIndex = Object.keys(this.registeredViewModes).findIndex(aViewMode => aViewMode == viewMode);
                 if (existingViewModeIndex >= 0) {
                     if (!this.registeredViewModes[Object.keys(this.registeredViewModes)[existingViewModeIndex]].show_pagination) {
-                        this.latestPerPageAfterViewModeWithoutPagination = this.getItemsPerPage();
+                        this.latestPerPageAfterViewModeWithoutPagination = this.itemsPerPage;
-                        this.latestPageAfterViewModeWithoutPagination = this.getPage();
+                        this.latestPageAfterViewModeWithoutPagination = this.page;
 
                         this.$eventBusSearch.setItemsPerPage(24, true);
                     }

src/views/gutenberg-blocks/blocks/facets-list/edit.js

@@ -147,7 +147,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
                         <span>{ facet.label ? facet.label : '' }</span>
                         {
                             facet.total_items ?
-                            <span class="facet-item-count" style={{ display: !showItemsCount ? 'none' : '' }}>
+                            <span className="facet-item-count" style={{ display: !showItemsCount ? 'none' : '' }}>
                                 { itemsCountStyle === 'below' ? 
                                     ( facet.total_items != 1 ? (facet.total_items + ' ' + __('items', 'tainacan' )) : (facet.total_items + ' ' + __('item', 'tainacan' )) )
                                     :
@@ -182,19 +182,19 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
                 </a>
                 { appendChildTerms && facet.total_children > 0 ?
                     isLoadingChildTerms == facetId ? 
-                    <div class="spinner-container">
+                    <div className="spinner-container">
                         <Spinner />
                     </div>
                     :
                     ( childFacetsObject[facetId] && childFacetsObject[facetId].visible ?
-                        <ul class="child-term-facets">
+                        <ul className="child-term-facets">
                             { 
                                 childFacetsObject[facetId].facets.length ? 
                                     childFacetsObject[facetId].facets.map((aChildTermFacet) => {
                                         return prepareFacet(aChildTermFacet);
                                     })
                                     :
-                                    <p class="no-child-facet-found">{ __( 'The child terms of this facet do not contain items.', 'tainacan' )}</p>
+                                    <p className="no-child-facet-found">{ __( 'The child terms of this facet do not contain items.', 'tainacan' )}</p>
                             }
                         </ul>
                     : null )
@@ -790,14 +790,14 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
 
             {
                 showSearchBar ?
-                <div class="facets-search-bar">
+                <div className="facets-search-bar">
                     <Button
                         onClick={ () => {  setContent(); }}
                         label={__('Search', 'tainacan')}>
-                        <span class="icon">
+                        <span className="icon">
                             <i>
                                 <svg width="24" height="24" viewBox="-2 -4 20 20">
-                                <path class="st0" d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
+                                <path className="st0" d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
                                     c0.7,0.3,1.3,0.7,1.8,1.2s0.9,1.1,1.2,1.8c0.5,1.2,0.5,2.5,0.2,3.7c0,0.2-0.1,0.4-0.2,0.6c0,0.1-0.2,0.6-0.2,0.6
                                     c0.6,0.6,1.3,1.3,1.9,1.9c0.7,0.7,1.3,1.3,2,2c0,0,0.3,0.2,0.3,0.3c0,0.3-0.1,0.7-0.3,1c-0.2,0.6-0.8,1-1.4,1.2
                                     c-0.1,0-0.6,0.2-0.6,0.1c0,0-4.2-4.2-4.2-4.2c0,0-0.8,0.3-0.8,0.4c-1.3,0.4-2.8,0.5-4.1-0.1c-0.7-0.3-1.3-0.7-1.8-1.2
@@ -866,7 +866,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
             }
             
             { isLoading ? 
-                <div class="spinner-container">
+                <div className="spinner-container">
                     <Spinner />
                 </div> :
                 <div>
@@ -901,10 +901,10 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
 
             { showLoadMore && facets.length > 0 && !isLoading ?
                 <button
-                        class="show-more-button"
+                        className="show-more-button"
                         disabled
                         label={__('Show more', 'tainacan')}>
-                    <span class="icon">
+                    <span className="icon">
                         <i>
                             <svg
                                     width="24"

src/views/gutenberg-blocks/blocks/facets-list/metadata-modal.js

@@ -364,7 +364,7 @@ export default class MetadataModal extends React.Component {
                         <div>
                             <div className="modal-radio-list">
                                 
-                                <p class="modal-radio-area-label">{__('Repository', 'tainacan')}</p>
+                                <p className="modal-radio-area-label">{__('Repository', 'tainacan')}</p>
                                 <RadioControl
                                     className={'repository-radio-option'}
                                     selected={ this.state.temporaryCollectionId }
@@ -373,7 +373,7 @@ export default class MetadataModal extends React.Component {
                                         this.setState({ temporaryCollectionId: aCollectionId });
                                     } } />
                                 <hr/>
-                                <p class="modal-radio-area-label">{__('Collections', 'tainacan')}</p>
+                                <p className="modal-radio-area-label">{__('Collections', 'tainacan')}</p>
                                 <RadioControl
                                     selected={ this.state.temporaryCollectionId }
                                     options={

src/views/gutenberg-blocks/blocks/facets-list/parent-term-modal.js

@@ -215,7 +215,7 @@ export default class ParentTermModal extends React.Component {
                         <div>
                             <div className="modal-radio-list">
                                 
-                                <p class="modal-radio-area-label">{__('Non specific term', 'tainacan')}</p>
+                                <p className="modal-radio-area-label">{__('Non specific term', 'tainacan')}</p>
                                 <RadioControl
                                     className={'repository-radio-option'}
                                     selected={ this.state.temporaryFacetId != null ? this.state.temporaryFacetId : ''}
@@ -227,7 +227,7 @@ export default class ParentTermModal extends React.Component {
                                         this.setState({ temporaryFacetId: aFacetId});
                                     } } />
                                 <hr/>
-                                <p class="modal-radio-area-label">{__('Terms', 'tainacan')}</p>
+                                <p className="modal-radio-area-label">{__('Terms', 'tainacan')}</p>
                                 <RadioControl
                                     selected={ this.state.temporaryFacetId }
                                     options={

src/views/gutenberg-blocks/blocks/item-gallery/edit.js

@@ -383,7 +383,7 @@ export default function ({ attributes, setAttributes, isSelected, clientId }) {
             
             {  itemId || templateMode ? (
                 <div className={ 'item-gallery-edit-container' }>
-                    <div class="preview-warning">{__('Warning: this is just a demonstration. To see the gallery in action, either preview or publish your post.', 'tainacan') }</div>
+                    <div className="preview-warning">{__('Warning: this is just a demonstration. To see the gallery in action, either preview or publish your post.', 'tainacan') }</div>
                     <ServerSideRender
                         block="tainacan/item-gallery"
                         attributes={ attributes }

src/views/gutenberg-blocks/blocks/item-gallery/theme.js

@@ -282,13 +282,13 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
                                 (item.title.description && !self.options.hide_media_description)
                             )
                         ) {
-                            innerHTML += '<div class="pswp__caption-inner">';
+                            innerHTML += '<div className="pswp__caption-inner">';
                             
                             if (item.title.caption && !self.options.hide_media_caption)
-                                innerHTML += '<span class="pswp__figure_caption">' + item.title.caption.innerHTML + '</span>';
+                                innerHTML += '<span className="pswp__figure_caption">' + item.title.caption.innerHTML + '</span>';
 
                             if (item.title.description && !self.options.hide_media_description)
-                                innerHTML += '<span class="pswp__description">' + item.title.description.innerHTML + '</span>';
+                                innerHTML += '<span className="pswp__description">' + item.title.description.innerHTML + '</span>';
                             
                             innerHTML += '</div>';
                         }

src/views/gutenberg-blocks/blocks/item-metadata-section/edit.js

@@ -263,7 +263,7 @@ export default function ({ attributes, setAttributes, isSelected }) {
             }
 
             { isLoading ? 
-                <div class="spinner-container">
+                <div className="spinner-container">
                     <Spinner />
                 </div> :
                 <div className={ 'item-metadata-sections-edit-container' }>

src/views/gutenberg-blocks/blocks/item-metadata-section/icon.js

@@ -6,9 +6,9 @@
             viewBox="0 0 6 6"
             height="24px"
             width="24px">
-        <Path d="m1.2849 0.84891c-0.085556 0-0.15764 0.029712-0.21631 0.088379-0.058667 0.058667-0.087891 0.13075-0.087891 0.21631v0.76611c0 0.083111 0.030686 0.1552 0.091797 0.21631l1.0669 1.0669c0.026889 0.026889 0.058548 0.049295 0.095215 0.066406 0.039111 0.017111 0.079538 0.025391 0.12109 0.025391 0.041556 0 0.080521-0.00828 0.11719-0.025391 0.039111-0.017111 0.072232-0.039518 0.099121-0.066406l0.7627-0.7627c0.058667-0.058667 0.087891-0.13075 0.087891-0.21631 0-0.085556-0.029224-0.15764-0.087891-0.21631l-1.0708-1.0703c-0.058667-0.058667-0.12929-0.088379-0.2124-0.088379zm0.21924 0.30469c0.00391-1.815e-4 0.00775 0 0.011719 0 0.063556 0 0.11762 0.022891 0.16162 0.069336 0.044 0.044 0.065918 0.098066 0.065918 0.16162 0 0.063556-0.021918 0.11713-0.065918 0.16113s-0.098066 0.065918-0.16162 0.065918c-0.063555 0-0.11859-0.021918-0.16504-0.065918-0.044-0.044-0.065918-0.097577-0.065918-0.16113 0-0.063556 0.021918-0.11762 0.065918-0.16162 0.043542-0.043542 0.09474-0.066615 0.15332-0.069336z" stroke-width=".25"/>
+        <Path d="m1.2849 0.84891c-0.085556 0-0.15764 0.029712-0.21631 0.088379-0.058667 0.058667-0.087891 0.13075-0.087891 0.21631v0.76611c0 0.083111 0.030686 0.1552 0.091797 0.21631l1.0669 1.0669c0.026889 0.026889 0.058548 0.049295 0.095215 0.066406 0.039111 0.017111 0.079538 0.025391 0.12109 0.025391 0.041556 0 0.080521-0.00828 0.11719-0.025391 0.039111-0.017111 0.072232-0.039518 0.099121-0.066406l0.7627-0.7627c0.058667-0.058667 0.087891-0.13075 0.087891-0.21631 0-0.085556-0.029224-0.15764-0.087891-0.21631l-1.0708-1.0703c-0.058667-0.058667-0.12929-0.088379-0.2124-0.088379zm0.21924 0.30469c0.00391-1.815e-4 0.00775 0 0.011719 0 0.063556 0 0.11762 0.022891 0.16162 0.069336 0.044 0.044 0.065918 0.098066 0.065918 0.16162 0 0.063556-0.021918 0.11713-0.065918 0.16113s-0.098066 0.065918-0.16162 0.065918c-0.063555 0-0.11859-0.021918-0.16504-0.065918-0.044-0.044-0.065918-0.097577-0.065918-0.16113 0-0.063556 0.021918-0.11762 0.065918-0.16162 0.043542-0.043542 0.09474-0.066615 0.15332-0.069336z" strokeWidth=".25"/>
-        <Path d="m0.98355 3.7638v0.37834h4.0357v-0.37834z" stroke-width=".25223"/>
+        <Path d="m0.98355 3.7638v0.37834h4.0357v-0.37834z" strokeWidth=".25223"/>
-        <Path d="m0.98355 5.1511h2.2701v-0.37836h-2.2701z" stroke-width=".25223"/>
+        <Path d="m0.98355 5.1511h2.2701v-0.37836h-2.2701z" strokeWidth=".25223"/>
     </SVG>
  );