Updates to fix errors from latest refactor #696.

.eslintrc.js

@@ -25,7 +25,7 @@ module.exports = {
         'vue/no-confusing-v-for-v-if': 'off',
         'vue/no-use-v-if-with-v-for': 'off',
         'vue/multi-word-component-names': 'off',
-        'vue/require-default-prop': 'off' // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-default-prop.md
+        'vue/require-default-prop': 'off'
     },
     globals: {
         'tainacan_plugin': true,

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

@@ -162,8 +162,9 @@
                         size="is-small"
                         @input="clearErrors('begin_with_filter_collapsed')"
                         v-model="form.begin_with_filter_collapsed"
-                        true-value="yes"
+                        :true-value="'yes'"
-                        false-value="no"
+                        :false-value="'no'"
+                        :native-value="form.begin_with_filter_collapsed == 'yes' ? 'yes' : 'no'"
                         name="begin_with_filter_collapsed">
                 <help-button
                         :title="$i18n.getHelperTitle('filters', 'begin_with_filter_collapsed')"
@@ -272,9 +273,15 @@ export default {
             if ((filter.filter_type_object && filter.filter_type_object.form_component) || filter.edit_form == '') {
                 
                 this.isLoading = true;
-                // this.fillExtraFormData(this.form);
 
-                this.updateFilter({ filterId: filter.id, index: this.index, options: this.form})
+                for (let [key, value] of this.form) {
+                    if (key === 'begin_with_filter_collapsed')
+                        this.form[key] = (value == 'yes' || value == true) ? 'yes' : 'no';
+                }
+                if (this.form['begin_with_filter_collapsed'] === undefined)
+                    this.form['begin_with_filter_collapsed'] = 'no';
+                
+                this.updateFilter({ filterId: filter.id, index: this.index, options: this.form })
                     .then(() => {
                         this.form = {};
                         this.formErrors = {};
@@ -299,17 +306,19 @@ export default {
                 let formElement = document.getElementById('filterEditForm');
                 let formData = new FormData(formElement); 
                 let formObj = {};
-
+                
                 for (let [key, value] of formData.entries()) {
                     if (key === 'begin_with_filter_collapsed')
-                        formObj[key] = value ? 'yes' : 'no';
+                        formObj[key] = (value == 'yes' || value == true) ? 'yes' : 'no';
                     else
                         formObj[key] = value;
                 }
-
+                if (formObj['begin_with_filter_collapsed'] === undefined)
+                    formObj['begin_with_filter_collapsed'] = 'no';
+                    
                 this.fillExtraFormData(formObj);
                 this.isLoading = true;
-                this.updateFilter({ filterId: filter.id, index: this.index, options: formObj})
+                this.updateFilter({ filterId: filter.id, index: this.index, options: formObj })
                     .then(() => {
                         this.form = {};
                         this.formErrors = {};

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

@@ -382,7 +382,7 @@
                                                 :item="item"
                                                 :is-editable="true"
                                                 :is-loading="isLoadingAttachments"
-                                                @isLoadingAttachments="(isLoading) => isLoadingAttachments = isLoading"
+                                                @isLoadingAttachments="(isLoadingState) => isLoadingAttachments = isLoadingState"
                                                 @onDeleteAttachment="deleteAttachment($event)"/>
                                     </div>
                                 </div>

src/views/admin/components/filter-types/checkbox/Checkbox.vue

@@ -186,6 +186,13 @@
                     events: {
                         appliedCheckBoxModal: () => {
                             this.loadOptions();
+                        },
+                        input: (newSelected) => {
+                            const existingValue = this.selected.indexOf(newSelected); 
+                            if (existingValue >= 0)
+                                this.selected.splice(existingValue, 1);
+                            else
+                                this.selected.push(newSelected);
                         } 
                     },
                     trapFocus: true,

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

@@ -254,6 +254,13 @@
                     events: {
                         appliedCheckBoxModal: () => {
                             this.loadOptions();
+                        },
+                        input: (newSelected) => {
+                            const existingValue = this.selected.indexOf(newSelected); 
+                            if (existingValue >= 0)
+                                this.selected.splice(existingValue, 1);
+                            else
+                                this.selected.push(newSelected);
                         } 
                     },
                     width: 'calc(100% - (4 * var(--tainacan-one-column)))',

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

@@ -1557,7 +1557,7 @@ export default {
                     title: this.$i18n.get('label_warning'),
                     message: this.$i18n.get('info_warning_remove_item_from_trash'),
                     onConfirm: () => {
-                        this.$emit('updateIsLoading', this.isLoading);
+                        this.$emit('updateIsLoading', true);
 
                         this.createEditGroup({
                             collectionId: this.collectionId,
@@ -1588,7 +1588,7 @@ export default {
                     title: this.$i18n.get('label_warning'),
                     message: this.isOnTrash ? this.$i18n.get('info_warning_item_delete') : this.$i18n.get('info_warning_item_trash'),
                     onConfirm: () => {
-                        this.$emit('updateIsLoading', this.isLoading);
+                        this.$emit('updateIsLoading', true);
 
                         this.deleteItem({
                             itemId: itemId,
@@ -1613,7 +1613,7 @@ export default {
                     title: this.$i18n.get('label_warning'),
                     message: this.$i18n.get('info_warning_selected_items_remove_from_trash'),
                     onConfirm: () => {
-                        this.$emit('updateIsLoading', this.isLoading);
+                        this.$emit('updateIsLoading', true);
 
                         this.createEditGroup({
                             collectionId: this.collectionId,
@@ -1645,7 +1645,7 @@ export default {
                     title: this.$i18n.get('label_warning'),
                     message: this.isOnTrash ? this.$i18n.get('info_warning_selected_items_delete') : this.$i18n.get('info_warning_selected_items_trash'),
                     onConfirm: () => {
-                        this.$emit('updateIsLoading', this.isLoading);
+                        this.$emit('updateIsLoading', true);
 
                         this.createEditGroup({
                             collectionId: this.collectionId,

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

@@ -175,12 +175,12 @@
             }
         },
         created() {
-            eventBusItemMetadata.$on('hasRemovedItemMetadataGroup', () => { this.$nextTick(() => this.isRemovingGroup = false) });
+            eventBusItemMetadata.$on('hasRemovedItemMetadataGroup', this.laterUpdateIsRemovingGroup);
             eventBusItemMetadata.$on('focusPreviousChildMetadatum', this.focusPreviousChildMetadatum);
             eventBusItemMetadata.$on('focusNextChildMetadatum', this.focusNextChildMetadatum);
         },
         beforeDestroy() {
-            eventBusItemMetadata.$off('hasRemovedItemMetadataGroup', () => { this.$nextTick(() => this.isRemovingGroup = false) });
+            eventBusItemMetadata.$off('hasRemovedItemMetadataGroup', this.laterUpdateIsRemovingGroup);
             eventBusItemMetadata.$off('focusPreviousChildMetadatum', this.focusPreviousChildMetadatum);
             eventBusItemMetadata.$off('focusNextChildMetadatum', this.focusNextChildMetadatum);
         },
@@ -436,6 +436,11 @@
                         }, 100);
                     }
                 }
+            },
+            laterUpdateIsRemovingGroup() {
+                this.$nextTick(() => {
+                    this.isRemovingGroup = false;
+                });
             }
         }
     }

src/views/admin/components/other/checkbox-radio-filter-input.vue

@@ -251,7 +251,7 @@
                     
                 </b-tab-item>
 
-                <b-tab-item :label="isTaxonomy ? $i18n.get('label_selected_terms') : $i18n.get('label_selected_metadatum_values')">
+                <b-tab-item :label="( isTaxonomy ? $i18n.get('label_selected_terms') : $i18n.get('label_selected_metadatum_values') ) + ( Array.isArray(selected) && selected.length ? (' (' + selected.length + ')') : '' )">
                     <div class="modal-card-body tainacan-tags-container">
                         <b-field
                                 v-if="(selected instanceof Array ? selected.length > 0 : selected) && !isSelectedTermsLoading"
@@ -266,7 +266,7 @@
                                         attached
                                         closable
                                         :class="isModal ? '' : 'is-small'"
-                                        @close="selected instanceof Array ? $emit('input', JSON.parse(JSON.stringify(selected)).splice(index, 1)) : $emit('input', '')">
+                                        @close="$emit('input', term)">
                                        <span v-html="(isTaxonomy || metadatum_type === 'Tainacan\\Metadata_Types\\Relationship') ? selectedTagsName[term] : term" />
                                 </b-tag>
                             </div>

src/views/admin/components/other/checkbox-radio-metadata-input.vue

@@ -67,29 +67,24 @@
                                     v-for="(option, key) in searchResults"
                                     :key="key">
                                 <label 
-                                        v-if="isCheckbox"
+                                        :class="{ 
-                                        class="b-checkbox checkbox">
+                                            'b-checkbox checkbox': isCheckbox,
+                                            'b-radio radio': !isCheckbox,
+                                            'is-disabled': !isOptionSelected(option.value) && maxMultipleValues !== undefined && (maxMultipleValues - 1 < selected.length) 
+                                        }">
                                     <input
-                                            :disabled="(Array.isArray(selected) && selected.indexOf((isNaN(Number(option.value)) ? option.value : Number(option.value))) < 0) && maxMultipleValues !== undefined && maxMultipleValues - 1 < selected.length"
+                                            :disabled="!isOptionSelected(option.id ? option.id : option.value) && maxMultipleValues !== undefined && (maxMultipleValues - 1 < selected.length)"
-                                            @input="$emit('input', $event.target.value)"
+                                            @input="updateLocalSelection($event.target.value)"
-                                            :value="option.id ? (isNaN(Number(option.id)) ? option.id : Number(option.id)) : (isNaN(Number(option.value)) ? option.value : Number(option.value))"
+                                            :checked="isOptionSelected(option.id ? option.id : option.value)"
-                                            type="checkbox"> 
+                                            :value="option.id ? getOptionValue(option.id) : getOptionValue(option.value)"
+                                            :type="isCheckbox ? 'checkbox' : 'radio'"> 
                                     <span class="check" /> 
                                     <span class="control-label">
                                         <span 
                                                 class="checkbox-label-text"
                                                 v-html="`${ option.name ? option.name : (option.label ? (option.hierarchy_path ? renderHierarchicalPath(option.hierarchy_path, option.label) : option.label) : '') }`" /> 
                                     </span>
-                                </label>
+                                </label>                                
-                                <b-radio
-                                        v-else
-                                        :value="selected"
-                                        @input="$emit('input', $event.target.value)"
-                                        :native-value="option.id ? (isNaN(Number(option.id)) ? option.id : Number(option.value)) : (isNaN(Number(option.value)) ? option.value : Number(option.value))">
-                                    <span 
-                                                class="checkbox-label-text"
-                                                v-html="`${ option.name ? option.name : (option.label ? (option.hierarchy_path ? renderHierarchicalPath(option.hierarchy_path, option.label) : option.label) : '') }`" />
-                                </b-radio>
                             </li>
                         </template>
                         <template v-if="!isLoadingSearch && !searchResults.length">
@@ -138,12 +133,18 @@
                                 class="tainacan-li-checkbox-list"
                                 v-for="(option, key) in options"
                                 :key="key">
-                            <label class="b-checkbox checkbox">
+                            <label
+                                :class="{ 
+                                    'b-checkbox checkbox': isCheckbox,
+                                    'b-radio radio': !isCheckbox,
+                                    'is-disabled': !isOptionSelected(option.value) && maxMultipleValues !== undefined && (maxMultipleValues - 1 < selected.length) 
+                                }">
                                 <input 
-                                        :disabled="(Array.isArray(selected) && selected.indexOf((isNaN(Number(option.value)) ? option.value : Number(option.value))) < 0) && maxMultipleValues !== undefined && maxMultipleValues - 1 < selected.length"
+                                        :disabled="!isOptionSelected(option.value) && maxMultipleValues !== undefined && (maxMultipleValues - 1 < selected.length)"
-                                        @input="$emit('input', $event.target.value)"
+                                        :checked="isOptionSelected(option.value)"
-                                        :value="option.value"
+                                        @input="updateLocalSelection($event.target.value)"
-                                        type="checkbox"> 
+                                        :value="getOptionValue(option.value)"
+                                        :type="isCheckbox ? 'checkbox' : 'radio'"> 
                                 <span class="check" /> 
                                 <span class="control-label">
                                     <span class="checkbox-label-text">{{ `${ (option.label ? option.label : '') }` }}</span> 
@@ -191,26 +192,22 @@
                                     :ref="`${key}.${index}-tainacan-li-checkbox-model`"
                                     :key="index">
                                 <label 
-                                        v-if="isCheckbox"
+                                        :class="{
-                                        class="b-checkbox checkbox"
+                                            'b-checkbox checkbox': isCheckbox,
-                                        :class="{ 'is-disabled': (Array.isArray(selected) && selected.indexOf((isNaN(Number(option.value)) ? option.value : Number(option.value))) < 0) && maxMultipleValues !== undefined && maxMultipleValues - 1 < selected.length }">
+                                            'b-radio radio': !isCheckbox, 
+                                            'is-disabled': !isOptionSelected(option.value) && maxMultipleValues !== undefined && (maxMultipleValues - 1 < selected.length) 
+                                        }" >
                                     <input 
-                                            :disabled="(Array.isArray(selected) && selected.indexOf((isNaN(Number(option.value)) ? option.value : Number(option.value))) < 0) && maxMultipleValues !== undefined && maxMultipleValues - 1 < selected.length"
+                                            :disabled="!isOptionSelected(option.value) && maxMultipleValues !== undefined && (maxMultipleValues - 1 < selected.length)"
-                                            @input="$emit('input', $event.target.value)"
+                                            @input="updateLocalSelection($event.target.value)"
-                                            :value="(isNaN(Number(option.value)) ? option.value : Number(option.value))"
+                                            :checked="isOptionSelected(option.value)"
-                                            type="checkbox"> 
+                                            :value="getOptionValue(option.value)"
+                                            :type="isCheckbox ? 'checkbox' : 'radio'"> 
                                     <span class="check" /> 
                                     <span class="control-label">
-                                        <span class="checkbox-label-text">{{ `${option.label}` }}</span>
+                                        <span class="checkbox-label-text">{{ option.label }}</span>
                                     </span>
                                 </label>
-                                <b-radio
-                                        v-else
-                                        :value="selected"
-                                        @input="$emit('input', $event.target.value)"
-                                        :native-value="(isNaN(Number(option.value)) ? option.value : Number(option.value))">
-                                    {{ `${option.label}` }}
-                                </b-radio>
                                 <a
                                         v-if="option.total_children > 0"
                                         @click="getOptionChildren(option, key, index)">
@@ -283,7 +280,7 @@
                                     attached
                                     closable
                                     class="is-small"
-                                    @close="selected instanceof Array ? $emit('input', JSON.parse(JSON.stringify(selected)).splice(index, 1)) : $emit('input', '')">
+                                    @close="updateLocalSelection(term)">
                                  <span v-html="(isTaxonomy || metadatum_type === 'Tainacan\\Metadata_Types\\Relationship') ? selectedTagsName[term] : term" />
                             </b-tag>
                         </div>
@@ -397,7 +394,6 @@
                 this.highlightHierarchyPath();
         },
         created() {
-
             if (this.shouldBeginWithListExpanded)
                 this.initializeValues();
 
@@ -813,6 +809,35 @@
             onMobileSpecialFocus($event) {
                 $event.target.blur();
                 this.$emit('mobileSpecialFocus');
+            },
+            isOptionSelected(optionValue) {
+                if (Array.isArray(this.selected))
+                    return (this.selected.indexOf((isNaN(Number(optionValue)) ? optionValue : Number(optionValue))) >= 0)
+                else
+                    return optionValue == this.selected;
+            },
+            getOptionValue(optionValue) {
+                return isNaN(Number(optionValue)) ? optionValue : Number(optionValue)
+            },
+            updateLocalSelection(newSelected) {
+
+                let localSelection = this.isCheckbox ? this.selected : (Array.isArray(this.selected) ? this.selected[0] : this.selected);
+
+                if (Array.isArray(localSelection)) {
+                    const existingValueIndex = this.selected.indexOf(isNaN(Number(newSelected)) ? newSelected : Number(newSelected));
+                    
+                    if (existingValueIndex >= 0)
+                        localSelection.splice(existingValueIndex, 1);
+                    else
+                        localSelection.push(isNaN(Number(newSelected)) ? newSelected : Number(newSelected));
+                } else {
+
+                    if (newSelected == localSelection)
+                        localSelection = false;
+                    else
+                        localSelection = isNaN(Number(newSelected)) ? newSelected : Number(newSelected);
+                }
+                this.$emit('input', localSelection);
             }
         }
     }

src/views/admin/components/other/processes-popup.vue

@@ -167,8 +167,7 @@ export default {
         }
     },
     watch: {
-        bgProcesses(newBG) {
+        updatedProcesses() {
-            this.hasAnyProcessExecuting = newBG.some((element) => element.done <= 0);
             if (this.updatedProcesses.length !== 0) {
                 for (let updatedProcess of this.updatedProcesses) {
                     let updatedProcessIndex = this.bgProcesses.findIndex((aProcess) => aProcess.ID == updatedProcess.ID);
@@ -176,6 +175,9 @@ export default {
                         this.$set(this.bgProcesses, updatedProcessIndex, updatedProcess);
                 }
             }
+        },
+        bgProcesses(newBG) {
+            this.hasAnyProcessExecuting = newBG.some((element) => element.done <= 0);
         }
     },
     created() {

src/views/admin/components/search/advanced-search.vue

@@ -93,31 +93,41 @@
 
                 <!-- Inputs -->
                 <b-field class="column is-half">
-                    <b-input
+                    <template v-if="searchCriterion.type == 'metaquery' && advancedSearchQuery.metaquery[searchCriterion.index]">
-                            v-if="searchCriterion.type == 'metaquery' && advancedSearchQuery.metaquery[searchCriterion.index] && getAdvancedSearchQueryCriterionMetadataType(searchCriterion.index) != 'date'"
+                        <b-input
-                            :type="(getAdvancedSearchQueryCriterionMetadataType(searchCriterion.index) == 'int' || getAdvancedSearchQueryCriterionMetadataType(searchCriterion.index) == 'float') ? 'number' : 'text'"
+                                v-if="getAdvancedSearchQueryCriterionMetadataType(searchCriterion.index) == 'int' || getAdvancedSearchQueryCriterionMetadataType(searchCriterion.index) == 'float'"
-                            step="any"
+                                type="number"
-                            @input="addValueToAdvancedSearchQuery($event, searchCriterion)"
+                                step="any"
-                            :value="advancedSearchQuery.metaquery[searchCriterion.index].value"
+                                @input="addValueToAdvancedSearchQuery($event, searchCriterion)"
-                            :placeholder="$i18n.get('label_string_to_search_for')"
+                                :value="advancedSearchQuery.metaquery[searchCriterion.index].value"
-                            :aria-label="$i18n.get('label_string_to_search_for')"
+                                :placeholder="$i18n.get('label_number_to_search_for')"
-                    />
+                                :aria-label="$i18n.get('label_number_to_search_for')"
-                    <input
+                        />
-                            v-else-if="searchCriterion.type == 'metaquery' && getAdvancedSearchQueryCriterionMetadataType(searchCriterion.index) == 'date'"
+                        <input
-                            class="input"
+                                v-else-if="getAdvancedSearchQueryCriterionMetadataType(searchCriterion.index) == 'date'"
-                            :value="parseValidDateToNavigatorLanguage(advancedSearchQuery.metaquery[searchCriterion.index].value)"
+                                class="input"
-                            v-mask="dateMask"
+                                :value="parseValidDateToNavigatorLanguage(advancedSearchQuery.metaquery[searchCriterion.index].value)"
-                            @input="addValueToAdvancedSearchQuery($event.target.value, searchCriterion)"
+                                v-mask="dateMask"
-                            :placeholder="dateFormat" 
+                                @input="addValueToAdvancedSearchQuery($event.target.value, searchCriterion)"
-                            type="text"
+                                :placeholder="dateFormat" 
-                            :aria-label="$i18n.get('label_date_to_search_for')" >
+                                type="text"
+                                :aria-label="$i18n.get('label_date_to_search_for')" >
+                        <b-input
+                                v-else
+                                type="text"
+                                @input="addValueToAdvancedSearchQuery($event, searchCriterion)"
+                                :value="advancedSearchQuery.metaquery[searchCriterion.index].value"
+                                :placeholder="$i18n.get('label_string_to_search_for')"
+                                :aria-label="$i18n.get('label_string_to_search_for')"
+                        />
+                    </template>
                     <b-input
                             v-else-if="searchCriterion.type == 'taxquery' && advancedSearchQuery.taxquery[searchCriterion.index]"
                             :value="advancedSearchQuery.taxquery[searchCriterion.index].terms"
                             @input="addValueToAdvancedSearchQuery($event, searchCriterion)"
                             type="text"
-                            :placeholder="$i18n.get('label_number_to_search_for')"
+                            :placeholder="$i18n.get('label_string_to_search_for')"
-                            :aria-label="$i18n.get('label_number_to_search_for')" />
+                            :aria-label="$i18n.get('label_string_to_search_for')" />
                     <b-input
                             v-else
                             type="text"

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

@@ -179,7 +179,7 @@
                                             @onEditionFinished="onEditionFinished()"
                                             @onEditionCanceled="onEditionCanceled()"
                                             @onErrorFound="formWithErrors = filter.id"
-                                            @onUpdateSavedState="(state) => editForms[openedFilterId].saved = state"
+                                            @onUpdateSavedState="(state) => editForms[filter.id].saved = state"
                                             :index="index"
                                             :original-filter="filter"
                                             :edited-filter="editForms[openedFilterId]"/>
@@ -708,12 +708,15 @@ export default {
         },
         removeFilter(removedFilter) {
 
+            if (this.editForms[removedFilter.id])
+                delete this.editForms[removedFilter.id];
+
             this.deleteFilter(removedFilter.id)
-            .then(() => {
+                .then(() => {
-                // Reload Available Metadatum Types List
+                    // Reload Available Metadatum Types List
-                this.updateListOfMetadata();
+                    this.updateListOfMetadata();
-            })
+                })
-            .catch((error) => { this.$console.log(error)});
+                .catch((error) => { this.$console.log(error)});
         
             if (!this.isRepositoryLevel)
                 this.updateFiltersOrder(); 
@@ -759,13 +762,11 @@ export default {
         },
         onEditionFinished() {
             this.formWithErrors = '';
-            delete this.editForms[this.openedFilterId];
             this.openedFilterId = '';
             this.$router.push({ query: {}});
         },
         onEditionCanceled() {
             this.formWithErrors = '';
-            delete this.editForms[this.openedFilterId];
             this.openedFilterId = '';
             this.$router.push({ query: {}});
         },

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

@@ -553,7 +553,7 @@
                         :is-on-trash="status == 'trash'"
                         :view-mode="adminViewMode"
                         :is-repository-level="isRepositoryLevel"
-                        @updateIsLoading="newIsLoading => isLoadingItems = newIsLoading"/>
+                        @updateIsLoading="(newIsLoadingState) => isLoadingItems = newIsLoadingState"/>
 
                 <!-- Empty Placeholder (only used in Admin) -->
                 <section

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

@@ -88,7 +88,7 @@ export default (element) => {
                         this.showTermThumbnail = this.$el.attributes['show-term-thumbnail'] != undefined ? this.$el.attributes['show-term-thumbnail'].value == 'true' : false;
                         this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
                         this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
-                        this.customStyle = this.$el.attributes.style != undefined ? this.$el.attributes.style.value : undefined;
+                        this.style = this.$el.attributes.style != undefined ? this.$el.attributes.style.value : undefined;
                     },
                     methods: {
                         __(text, domain) {