tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Uses modelValue on Buefy components. Begins refactor from VueDraggable to Sortable. #794.

This commit is contained in:
mateuswetah 2023-08-14 17:58:59 -03:00
parent f765fca188
commit 6c3869cb0f
107 changed files with 2458 additions and 2375 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
package-lock.json generated
View File

@ -1610,9 +1610,9 @@
} }
}, },
"@ntohq/buefy-next": { "@ntohq/buefy-next": {
"version": "0.1.0", "version": "0.1.1",
"resolved": "https://registry.npmjs.org/@ntohq/buefy-next/-/buefy-next-0.1.0.tgz", "resolved": "https://registry.npmjs.org/@ntohq/buefy-next/-/buefy-next-0.1.1.tgz",
"integrity": "sha512-47kqY9zl/kqw72AwHA2lLk44BFgQDvGnGyWrLmxsS88RpH8Dhw3ECH4+fPK+CYSIsL6V6og13BtxWG//nlpKzA==", "integrity": "sha512-5ZX1S9bhLqPFEmkmZeaUCRg289Ui/k3mT2qKQQ2p8ihTTCsW2ozXTcpcV3wmwsf81kPjT90ykU18u2ve92M2fA==",
"requires": { "requires": {
"@babel/runtime": "7.18.9", "@babel/runtime": "7.18.9",
"bulma": "0.9.4" "bulma": "0.9.4"
@ -5846,9 +5846,9 @@
} }
}, },
"semver": { "semver": {
"version": "5.7.1", "version": "5.7.2",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==" "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g=="
}, },
"type-fest": { "type-fest": {
"version": "0.6.0", "version": "0.6.0",
@ -6433,9 +6433,18 @@
} }
}, },
"sortablejs": { "sortablejs": {
"version": "1.14.0", "version": "1.15.0",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz", "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.0.tgz",
"integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==" "integrity": "sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w=="
},
"sortablejs-vue3": {
"version": "1.2.9",
"resolved": "https://registry.npmjs.org/sortablejs-vue3/-/sortablejs-vue3-1.2.9.tgz",
"integrity": "sha512-l0IIBdu+nRIwC2+KOkiavXw5vRfsn6MIPVSVSf7ItBevcuRZ4mVzC7dgnr/Hs/VPH2Q+nF2PYP3FsrnrG+7qCw==",
"requires": {
"sortablejs": "^1.15.0",
"vue": "^3.2.37"
}
}, },
"source-map": { "source-map": {
"version": "0.7.4", "version": "0.7.4",
@ -7127,14 +7136,6 @@
"resolved": "https://registry.npmjs.org/vue3-apexcharts/-/vue3-apexcharts-1.4.4.tgz", "resolved": "https://registry.npmjs.org/vue3-apexcharts/-/vue3-apexcharts-1.4.4.tgz",
"integrity": "sha512-TH89uZrxGjaDvkaYAISvj8+k6Bf1rUKFillc8oJirs5XZEPiwM1ELKZQ786wz0rfPqkSHHny2lqqUCK7Rw+LcQ==" "integrity": "sha512-TH89uZrxGjaDvkaYAISvj8+k6Bf1rUKFillc8oJirs5XZEPiwM1ELKZQ786wz0rfPqkSHHny2lqqUCK7Rw+LcQ=="
}, },
"vuedraggable": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
"integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
"requires": {
"sortablejs": "1.14.0"
}
},
"vuex": { "vuex": {
"version": "4.1.0", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz", "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",

7
package.json
View File

@ -8,13 +8,13 @@
"build-prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js --progress --mode production" "build-prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js --progress --mode production"
}, },
"dependencies": { "dependencies": {
"@ntohq/buefy-next": "^0.1.1",
"@vue-leaflet/vue-leaflet": "^0.10.1", "@vue-leaflet/vue-leaflet": "^0.10.1",
"@vue/compat": "^3.3.4", "@vue/compat": "^3.3.4",
"another-vue3-blurhash": "^0.0.1", "another-vue3-blurhash": "^0.0.1",
"apexcharts": "^3.41.0", "apexcharts": "^3.41.0",
"axios": "^1.4.0", "axios": "^1.4.0",
"blurhash": "^2.0.5", "blurhash": "^2.0.5",
"@ntohq/buefy-next": "^0.1.0",
"bulma": "^0.9.4", "bulma": "^0.9.4",
"conditioner-core": "^2.3.3", "conditioner-core": "^2.3.3",
"countup.js": "^2.7.0", "countup.js": "^2.7.0",
@ -30,13 +30,14 @@
"qs": "^6.11.2", "qs": "^6.11.2",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"sortablejs": "^1.15.0",
"sortablejs-vue3": "^1.2.9",
"swiper": "^8.4.5", "swiper": "^8.4.5",
"vue": "^3.3.4", "vue": "^3.3.4",
"vue3-apexcharts": "^1.4.4",
"vue-countup-v3": "^1.3.0", "vue-countup-v3": "^1.3.0",
"vue-router": "^4.2.4", "vue-router": "^4.2.4",
"vue-the-mask": "^0.11.1", "vue-the-mask": "^0.11.1",
"vuedraggable": "^4.1.0", "vue3-apexcharts": "^1.4.4",
"vuex": "^4.1.0" "vuex": "^4.1.0"
}, },
"devDependencies": { "devDependencies": {

63
src/views/admin/components/edition/collection-edition-form.vue
View File

@ -26,7 +26,7 @@
<b-input <b-input
id="tainacan-text-name" id="tainacan-text-name"
:placeholder="$i18n.get('instruction_collection_name')" :placeholder="$i18n.get('instruction_collection_name')"
v-model:value="form.name" v-model="form.name"
@blur="updateSlug" @blur="updateSlug"
@focus="clearErrors('name')"/> @focus="clearErrors('name')"/>
</b-field> </b-field>
@ -53,7 +53,7 @@
type="textarea" type="textarea"
rows="3" rows="3"
:placeholder="$i18n.get('instruction_collection_description')" :placeholder="$i18n.get('instruction_collection_description')"
v-model:value="form.description" v-model="form.description"
@focus="clearErrors('description')"/> @focus="clearErrors('description')"/>
</b-field> </b-field>
@ -68,8 +68,8 @@
:message="$i18n.getHelperMessage('collections', 'slug')"/> :message="$i18n.getHelperMessage('collections', 'slug')"/>
<b-input <b-input
id="tainacan-text-slug" id="tainacan-text-slug"
@input="updateSlug" @update:model-value="updateSlug"
v-model:value="form.slug" v-model="form.slug"
@focus="clearErrors('slug')" @focus="clearErrors('slug')"
:disabled="isUpdatingSlug" :disabled="isUpdatingSlug"
:loading="isUpdatingSlug"/> :loading="isUpdatingSlug"/>
@ -88,7 +88,7 @@
<label class="label">{{ $i18n.get('label_sort') }}&nbsp;</label> <label class="label">{{ $i18n.get('label_sort') }}&nbsp;</label>
<b-select <b-select
id="tainacan-select-default_order" id="tainacan-select-default_order"
v-model:value="form.default_order"> v-model="form.default_order">
<option <option
role="button" role="button"
:class="{ 'is-active': form.default_order == 'DESC' }" :class="{ 'is-active': form.default_order == 'DESC' }"
@ -110,7 +110,7 @@
<b-select <b-select
expanded expanded
:loading="isLoadingMetadata" :loading="isLoadingMetadata"
v-model:value="localDefaultOrderBy" v-model="localDefaultOrderBy"
id="tainacan-select-default_orderby"> id="tainacan-select-default_orderby">
<option <option
v-for="metadatum of sortingMetadata" v-for="metadatum of sortingMetadata"
@ -141,16 +141,17 @@
aria-role="list" aria-role="list"
trap-focus trap-focus
position="is-top-right"> position="is-top-right">
<button <template #trigger>
class="button is-white" <button
slot="trigger" class="button is-white"
position="is-top-right" position="is-top-right"
type="button"> type="button">
<span>{{ $i18n.get('label_enabled_view_modes') }}</span> <span>{{ $i18n.get('label_enabled_view_modes') }}</span>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
</span> </span>
</button> </button>
</template>
<b-dropdown-item <b-dropdown-item
v-for="(viewMode, index) in Object.keys(registeredViewModes)" v-for="(viewMode, index) in Object.keys(registeredViewModes)"
:key="index" :key="index"
@ -158,8 +159,8 @@
aria-role="listitem"> aria-role="listitem">
<b-checkbox <b-checkbox
v-if="registeredViewModes[viewMode] != undefined" v-if="registeredViewModes[viewMode] != undefined"
@input="updateViewModeslist(viewMode)" @update:model-value="updateViewModeslist(viewMode)"
:value="checkIfViewModeEnabled(viewMode)" :model-value="checkIfViewModeEnabled(viewMode)"
:disabled="checkIfViewModeEnabled(viewMode) && form.enabled_view_modes.filter((aViewMode) => (registeredViewModes[aViewMode] && registeredViewModes[aViewMode].full_screen != true)).length <= 1"> :disabled="checkIfViewModeEnabled(viewMode) && form.enabled_view_modes.filter((aViewMode) => (registeredViewModes[aViewMode] && registeredViewModes[aViewMode].full_screen != true)).length <= 1">
<p> <p>
<strong> <strong>
@ -193,7 +194,7 @@
<b-select <b-select
expanded expanded
id="tainacan-select-default_view_mode" id="tainacan-select-default_view_mode"
v-model:value="form.default_view_mode" v-model="form.default_view_mode"
@focus="clearErrors('default_view_mode')"> @focus="clearErrors('default_view_mode')">
<option <option
v-for="(viewMode, index) of validDefaultViewModes" v-for="(viewMode, index) of validDefaultViewModes"
@ -215,7 +216,7 @@
size="is-small" size="is-small"
true-value="yes" true-value="yes"
false-value="no" false-value="no"
v-model:value="form.hide_items_thumbnail_on_lists" /> v-model="form.hide_items_thumbnail_on_lists" />
<help-button <help-button
:title="$i18n.getHelperTitle('collections', 'hide_items_thumbnail_on_lists')" :title="$i18n.getHelperTitle('collections', 'hide_items_thumbnail_on_lists')"
:message="$i18n.getHelperMessage('collections', 'hide_items_thumbnail_on_lists')"/> :message="$i18n.getHelperMessage('collections', 'hide_items_thumbnail_on_lists')"/>
@ -231,7 +232,7 @@
size="is-small" size="is-small"
true-value="open" true-value="open"
false-value="closed" false-value="closed"
v-model:value="form.allow_comments" /> v-model="form.allow_comments" />
<help-button <help-button
:title="$i18n.getHelperTitle('collections', 'allow_comments')" :title="$i18n.getHelperTitle('collections', 'allow_comments')"
:message="$i18n.getHelperMessage('collections', 'allow_comments')"/> :message="$i18n.getHelperMessage('collections', 'allow_comments')"/>
@ -249,7 +250,7 @@
size="is-small" size="is-small"
true-value="yes" true-value="yes"
false-value="no" false-value="no"
v-model:value="form.allows_submission" /> v-model="form.allows_submission" />
<help-button <help-button
:title="$i18n.getHelperTitle('collections', 'allows_submission')" :title="$i18n.getHelperTitle('collections', 'allows_submission')"
:message="$i18n.getHelperMessage('collections', 'allows_submission')"/> :message="$i18n.getHelperMessage('collections', 'allows_submission')"/>
@ -272,7 +273,7 @@
size="is-small" size="is-small"
true-value="yes" true-value="yes"
false-value="no" false-value="no"
v-model:value="form.submission_anonymous_user" /> v-model="form.submission_anonymous_user" />
<help-button <help-button
:title="$i18n.getHelperTitle('collections', 'submission_anonymous_user')" :title="$i18n.getHelperTitle('collections', 'submission_anonymous_user')"
:message="$i18n.getHelperMessage('collections', 'submission_anonymous_user')"/> :message="$i18n.getHelperMessage('collections', 'submission_anonymous_user')"/>
@ -289,7 +290,7 @@
:message="$i18n.getHelperMessage('collections', 'submission_default_status')"/> :message="$i18n.getHelperMessage('collections', 'submission_default_status')"/>
<div class="status-radios"> <div class="status-radios">
<b-radio <b-radio
v-model:value="form.submission_default_status" v-model="form.submission_default_status"
v-for="(statusOption, index) of $statusHelper.getStatuses().filter((status) => status.slug != 'trash')" v-for="(statusOption, index) of $statusHelper.getStatuses().filter((status) => status.slug != 'trash')"
:key="index" :key="index"
:native-value="statusOption.slug"> :native-value="statusOption.slug">
@ -322,7 +323,7 @@
size="is-small" size="is-small"
true-value="yes" true-value="yes"
false-value="no" false-value="no"
v-model:value="form.submission_use_recaptcha" /> v-model="form.submission_use_recaptcha" />
<help-button <help-button
:title="$i18n.getHelperTitle('collections', 'submission_use_recaptcha')" :title="$i18n.getHelperTitle('collections', 'submission_use_recaptcha')"
:message="$i18n.getHelperMessage('collections', 'submission_use_recaptcha')"/> :message="$i18n.getHelperMessage('collections', 'submission_use_recaptcha')"/>
@ -358,7 +359,7 @@
:message="$i18n.getHelperMessage('collections', 'status')"/> :message="$i18n.getHelperMessage('collections', 'status')"/>
<div class="status-radios"> <div class="status-radios">
<b-radio <b-radio
v-model:value="form.status" v-model="form.status"
v-for="(statusOption, index) of $statusHelper.getStatuses().filter((status) => status.slug != 'draft')" v-for="(statusOption, index) of $statusHelper.getStatuses().filter((status) => status.slug != 'draft')"
:key="index" :key="index"
:native-value="statusOption.slug"> :native-value="statusOption.slug">
@ -505,7 +506,7 @@
size="is-small" size="is-small"
true-value="yes" true-value="yes"
false-value="no" false-value="no"
v-model:value="form.enable_cover_page" /> v-model="form.enable_cover_page" />
<help-button <help-button
:title="$i18n.getHelperTitle('collections', 'cover_page_id')" :title="$i18n.getHelperTitle('collections', 'cover_page_id')"
:message="$i18n.getHelperMessage('collections', 'cover_page_id')"/> :message="$i18n.getHelperMessage('collections', 'cover_page_id')"/>
@ -513,10 +514,10 @@
id="tainacan-text-cover-page" id="tainacan-text-cover-page"
:placeholder="$i18n.get('instruction_cover_page')" :placeholder="$i18n.get('instruction_cover_page')"
:data="coverPages" :data="coverPages"
v-model:value="coverPageTitle" v-model="coverPageTitle"
@select="onSelectCoverPage($event)" @select="onSelectCoverPage($event)"
:loading="isFetchingPages" :loading="isFetchingPages"
@input="fecthCoverPages" @update:model-value="fecthCoverPages"
@focus="clearErrors('cover_page_id')" @focus="clearErrors('cover_page_id')"
v-if="coverPage == undefined || coverPage.title == undefined" v-if="coverPage == undefined || coverPage.title == undefined"
:disabled="form.enable_cover_page != 'yes'" :disabled="form.enable_cover_page != 'yes'"
@ -608,7 +609,7 @@
<b-select <b-select
expanded expanded
id="tainacan-select-parent" id="tainacan-select-parent"
v-model:value="form.parent" v-model="form.parent"
@focus="clearErrors('parent')" @focus="clearErrors('parent')"
:loading="isFetchingCollections" :loading="isFetchingCollections"
:placeholder="$i18n.get('instruction_select_a_parent_collection')"> :placeholder="$i18n.get('instruction_select_a_parent_collection')">
@ -683,7 +684,7 @@
</div> </div>
<b-loading <b-loading
v-model:active="isLoading" v-model="isLoading"
:can-cancel="false"/> :can-cancel="false"/>
</div> </div>
</template> </template>

14
src/views/admin/components/edition/exporter-edition-form.vue
View File

@ -6,7 +6,7 @@
{ path: '', label: exporterType != undefined ? (exporterName != undefined ? exporterName : exporterType) : $i18n.get('title_exporter_page') } { path: '', label: exporterType != undefined ? (exporterName != undefined ? exporterName : exporterType) : $i18n.get('title_exporter_page') }
]"/> ]"/>
<b-loading <b-loading
v-model:active="isLoading" v-model="isLoading"
:can-cancel="false"/> :can-cancel="false"/>
<form <form
@click="formErrorMessage = ''" @click="formErrorMessage = ''"
@ -34,9 +34,9 @@
extra-classes="tainacan-repository-tooltip"/> extra-classes="tainacan-repository-tooltip"/>
<br> <br>
<b-select <b-select
@input="formErrorMessage = null" @update:model-value="formErrorMessage = null"
expanded expanded
v-model:value="selectedCollection" v-model="selectedCollection"
:loading="isFetchingCollections" :loading="isFetchingCollections"
:placeholder="$i18n.get('instruction_select_a_collection')"> :placeholder="$i18n.get('instruction_select_a_collection')">
<option <option
@ -55,9 +55,9 @@
exporterSession.mapping_list.length" exporterSession.mapping_list.length"
:label="$i18n.get('mapping')"> :label="$i18n.get('mapping')">
<b-select <b-select
@input="formErrorMessage = null" @update:model-value="formErrorMessage = null"
expanded expanded
v-model:value="selectedMapping" v-model="selectedMapping"
:placeholder="$i18n.get('instruction_select_a_mapper')"> :placeholder="$i18n.get('instruction_select_a_mapper')">
<option <option
v-if="exporterSession.accept_no_mapping" v-if="exporterSession.accept_no_mapping"
@ -81,8 +81,8 @@
<b-checkbox <b-checkbox
true-value="1" true-value="1"
false-value="0" false-value="0"
v-model:value="sendEmail" v-model="sendEmail"
@input="formErrorMessage = null"> @update:model-value="formErrorMessage = null">
{{ $i18n.get('label_yes') }} {{ $i18n.get('label_yes') }}
</b-checkbox> </b-checkbox>
</b-field> </b-field>

21
src/views/admin/components/edition/filter-edition-form.vue
View File

@ -18,7 +18,7 @@
:message="$i18n.getHelperMessage('filters', 'name')"/> :message="$i18n.getHelperMessage('filters', 'name')"/>
</label> </label>
<b-input <b-input
v-model:value="form.name" v-model="form.name"
name="name" name="name"
@focus="clearErrors('name')"/> @focus="clearErrors('name')"/>
</b-field> </b-field>
@ -45,7 +45,7 @@
type="textarea" type="textarea"
name="description" name="description"
:rows="3" :rows="3"
v-model:value="form.description" v-model="form.description"
@focus="clearErrors('description')" /> @focus="clearErrors('description')" />
</b-field> </b-field>
@ -64,7 +64,7 @@
@focus="clearErrors('label_status')" @focus="clearErrors('label_status')"
id="tainacan-select-status-publish" id="tainacan-select-status-publish"
name="status" name="status"
v-model:value="form.status" v-model="form.status"
native-value="publish"> native-value="publish">
<span class="icon has-text-gray3"> <span class="icon has-text-gray3">
<i class="tainacan-icon tainacan-icon-public"/> <i class="tainacan-icon tainacan-icon-public"/>
@ -76,7 +76,7 @@
@focus="clearErrors('label_status')" @focus="clearErrors('label_status')"
id="tainacan-select-status-private" id="tainacan-select-status-private"
name="status" name="status"
v-model:value="form.status" v-model="form.status"
native-value="private"> native-value="private">
<span class="icon has-text-gray3"> <span class="icon has-text-gray3">
<i class="tainacan-icon tainacan-icon-private"/> <i class="tainacan-icon tainacan-icon-private"/>
@ -101,7 +101,7 @@
class="is-flex"> class="is-flex">
<b-select <b-select
name="max_options" name="max_options"
v-model:value="form.max_options" v-model="form.max_options"
:placeholder="$i18n.get('instruction_select_max_options_to_show')"> :placeholder="$i18n.get('instruction_select_max_options_to_show')">
<option value="4">4</option> <option value="4">4</option>
<option value="8">8</option> <option value="8">8</option>
@ -132,7 +132,7 @@
class="is-flex"> class="is-flex">
<b-input <b-input
name="max_options" name="max_options"
v-model:value="form.max_options" v-model="form.max_options"
type="number" type="number"
step="1" /> step="1" />
<button <button
@ -160,8 +160,8 @@
&nbsp; &nbsp;
<b-switch <b-switch
size="is-small" size="is-small"
@input="clearErrors('begin_with_filter_collapsed')" @update:model-value="clearErrors('begin_with_filter_collapsed')"
v-model:value="form.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'" :native-value="form.begin_with_filter_collapsed == 'yes' ? 'yes' : 'no'"
@ -197,8 +197,9 @@
<button <button
type="button" type="button"
class="button is-outlined" class="button is-outlined"
@click.prevent="cancelEdition()" @click.prevent="cancelEdition()">
slot="trigger">{{ $i18n.get('cancel') }}</button> {{ $i18n.get('cancel') }}
</button>
</div> </div>
<div class="control"> <div class="control">
<b-button <b-button

10
src/views/admin/components/edition/importer-edition-form.vue
View File

@ -29,7 +29,7 @@
<br> <br>
<b-upload <b-upload
v-if="importer.tmp_file == undefined && (importerFile == undefined || importerFile == null || importerFile == '')" v-if="importer.tmp_file == undefined && (importerFile == undefined || importerFile == null || importerFile == '')"
v-model:value="importerFile" v-model="importerFile"
drag-drop drag-drop
class="source-file-upload"> class="source-file-upload">
<section class="drop-inner"> <section class="drop-inner">
@ -80,7 +80,7 @@
extra-classes="tainacan-repository-tooltip"/> extra-classes="tainacan-repository-tooltip"/>
<b-input <b-input
id="tainacan-url-link-source" id="tainacan-url-link-source"
v-model:value="url"/> v-model="url"/>
</b-field> </b-field>
</div> </div>
@ -109,8 +109,8 @@
<b-select <b-select
expanded expanded
id="tainacan-select-target-collection" id="tainacan-select-target-collection"
:value="collectionId" :model-value="collectionId"
@input="onSelectCollection($event)" @update:model-value="onSelectCollection($event)"
:loading="isFetchingCollections" :loading="isFetchingCollections"
:placeholder="$i18n.get('instruction_select_a_target_collection')"> :placeholder="$i18n.get('instruction_select_a_target_collection')">
<option <option
@ -192,7 +192,7 @@
</form> </form>
<b-loading <b-loading
v-model:active="isLoading" v-model="isLoading"
:can-cancel="false"/> :can-cancel="false"/>
</div> </div>
</template> </template>

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

@ -23,7 +23,7 @@
</div> </div>
<b-loading <b-loading
v-model:active="isLoading" v-model="isLoading"
:can-cancel="false"/> :can-cancel="false"/>
<form <form
@ -35,7 +35,7 @@
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
v-model:active="isLoadingSourceInfo" v-model="isLoadingSourceInfo"
:can-cancel="false"/> :can-cancel="false"/>
<!-- Metadata Mapping --> <!-- Metadata Mapping -->
@ -88,8 +88,8 @@
v-if="collectionMetadata != undefined && v-if="collectionMetadata != undefined &&
collectionMetadata.length > 0 && collectionMetadata.length > 0 &&
!isFetchingCollectionMetadata" !isFetchingCollectionMetadata"
:value="checkCurrentSelectedCollectionMetadatum(sourceMetadatum)" :model-value="checkCurrentSelectedCollectionMetadatum(sourceMetadatum)"
@input="onSelectCollectionMetadata($event, sourceMetadatum)" @update:model-value="onSelectCollectionMetadata($event, sourceMetadatum)"
:placeholder="$i18n.get('label_select_metadatum')"> :placeholder="$i18n.get('label_select_metadatum')">
<option :value="null"> <option :value="null">
{{ $i18n.get('label_select_metadatum') }} {{ $i18n.get('label_select_metadatum') }}
@ -124,8 +124,8 @@
v-if="collectionMetadata != undefined && v-if="collectionMetadata != undefined &&
collectionMetadata.length > 0 && collectionMetadata.length > 0 &&
!isFetchingCollectionMetadata" !isFetchingCollectionMetadata"
:value="checkCurrentSelectedCollectionMetadatum(Object.entries(sourceMetadatum)[0][0], true)" :model-value="checkCurrentSelectedCollectionMetadatum(Object.entries(sourceMetadatum)[0][0], true)"
@input="onSelectCollectionMetadata($event, Object.entries(sourceMetadatum)[0][0], true, Object.entries(sourceMetadatum)[0][1])" @update:model-value="onSelectCollectionMetadata($event, Object.entries(sourceMetadatum)[0][0], true, Object.entries(sourceMetadatum)[0][1])"
:placeholder="$i18n.get('label_select_metadatum')"> :placeholder="$i18n.get('label_select_metadatum')">
<option :value="null"> <option :value="null">
{{ $i18n.get('label_select_metadatum') }} {{ $i18n.get('label_select_metadatum') }}
@ -161,8 +161,8 @@
collectionMetadata.length > 0 && collectionMetadata.length > 0 &&
!isFetchingCollectionMetadata" !isFetchingCollectionMetadata"
:disabled="[undefined, null, false, 'create_metadata' + index].includes(checkCurrentSelectedCollectionMetadatum(Object.entries(sourceMetadatum)[0][0], true))" :disabled="[undefined, null, false, 'create_metadata' + index].includes(checkCurrentSelectedCollectionMetadatum(Object.entries(sourceMetadatum)[0][0], true))"
:value="checkCurrentSelectedCollectionChildMetadatum(childSourceMetadatum, checkCurrentSelectedCollectionMetadatum(Object.entries(sourceMetadatum)[0][0], true))" :model-value="checkCurrentSelectedCollectionChildMetadatum(childSourceMetadatum, checkCurrentSelectedCollectionMetadatum(Object.entries(sourceMetadatum)[0][0], true))"
@input="onSelectCollectionChildMetadata($event, childSourceMetadatum, checkCurrentSelectedCollectionMetadatum(Object.entries(sourceMetadatum)[0][0], true), Object.entries(sourceMetadatum)[0][0])" @update:model-value="onSelectCollectionChildMetadata($event, childSourceMetadatum, checkCurrentSelectedCollectionMetadatum(Object.entries(sourceMetadatum)[0][0], true), Object.entries(sourceMetadatum)[0][0])"
:placeholder="$i18n.get('label_select_metadatum')"> :placeholder="$i18n.get('label_select_metadatum')">
<option :value="null"> <option :value="null">
{{ $i18n.get('label_select_metadatum') }} {{ $i18n.get('label_select_metadatum') }}
@ -200,7 +200,7 @@
<b-modal <b-modal
@close="onMetadatumEditionCanceled()" @close="onMetadatumEditionCanceled()"
v-model:active="isNewMetadatumModalActive" v-model="isNewMetadatumModalActive"
trap-focus trap-focus
aria-modal aria-modal
aria-role="dialog" aria-role="dialog"
@ -214,7 +214,7 @@
v-if="selectedMetadatumType == undefined && !isEditingMetadatum"> v-if="selectedMetadatumType == undefined && !isEditingMetadatum">
<b-loading <b-loading
:is-full-page="isFullPage" :is-full-page="isFullPage"
v-model:active="isLoadingMetadatumTypes"/> v-model="isLoadingMetadatumTypes"/>
<div <div
class="tainacan-modal-content"> class="tainacan-modal-content">
@ -287,7 +287,7 @@
<!-- Prompt to show title --> <!-- Prompt to show title -->
<b-modal <b-modal
v-if="importerSourceInfo" v-if="importerSourceInfo"
v-model:active="showTitlePromptModal" v-model="showTitlePromptModal"
:can-cancel="false" :can-cancel="false"
:width="820" :width="820"
scroll="keep" scroll="keep"
@ -309,7 +309,7 @@
<b-field> <b-field>
<b-select <b-select
expanded expanded
v-model:value="selectedTitle" v-model="selectedTitle"
:placeholder="$i18n.get('label_select_metadatum')"> :placeholder="$i18n.get('label_select_metadatum')">
<option <option
v-for="(sourceMetadatum, index) of importerSourceInfo.source_metadata" v-for="(sourceMetadatum, index) of importerSourceInfo.source_metadata"

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

@ -2,7 +2,7 @@
<div> <div>
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
v-model:active="isLoading" v-model="isLoading"
:can-cancel="false"/> :can-cancel="false"/>
<div <div
v-if="!$adminOptions.hideBulkEditionPageTitle" v-if="!$adminOptions.hideBulkEditionPageTitle"
@ -26,10 +26,10 @@
<br> <br>
<b-upload <b-upload
native native
v-model:value="submitedFileList" v-model="submitedFileList"
drag-drop drag-drop
multiple multiple
@input="uploadFiles()" @update:model-value="uploadFiles()"
class="source-file-upload"> class="source-file-upload">
<section class="drop-inner"> <section class="drop-inner">
<div class="content has-text-centered"> <div class="content has-text-centered">
@ -150,8 +150,9 @@
<button <button
type="button" type="button"
class="button is-outlined" class="button is-outlined"
@click.prevent="$router.go(-1)" @click.prevent="$router.go(-1)">
slot="trigger">{{ $i18n.get('cancel') }}</button> {{ $i18n.get('cancel') }}
</button>
</div> </div>
<div <div
style="margin-left: auto;" style="margin-left: auto;"
@ -161,7 +162,9 @@
class="button is-secondary" class="button is-secondary"
:class="{'is-loading': isCreatingSequenceEditGroup }" :class="{'is-loading': isCreatingSequenceEditGroup }"
@click.prevent="sequenceEditGroup()" @click.prevent="sequenceEditGroup()"
type="submit">{{ $i18n.get('label_sequence_edit_items') }}</button> type="submit">
{{ $i18n.get('label_sequence_edit_items') }}
</button>
</div> </div>
<div class="control"> <div class="control">
<button <button

11
src/views/admin/components/edition/item-edition-form.vue
View File

@ -2,7 +2,7 @@
<div :class="isCreatingNewItem ? 'item-creation-container' : 'item-edition-container'"><!-- Do NOT remove this classes, they may be used by third party plugins --> <div :class="isCreatingNewItem ? 'item-creation-container' : 'item-edition-container'"><!-- Do NOT remove this classes, they may be used by third party plugins -->
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
v-model:active="isLoading" v-model="isLoading"
:can-cancel="false"/> :can-cancel="false"/>
<tainacan-title <tainacan-title
@ -216,8 +216,7 @@
</ul> </ul>
<button <button
class="swiper-button-prev" class="swiper-button-prev"
id="tainacan-tabs-prev" id="tainacan-tabs-prev">
slot="button-prev">
<svg <svg
width="24" width="24"
height="24" height="24"
@ -344,7 +343,7 @@
id="tainacan-switch-required-metadata" id="tainacan-switch-required-metadata"
:style="'font-size: 0.625em;' + (isMobileScreen ? 'margin-right: 2rem;' : '')" :style="'font-size: 0.625em;' + (isMobileScreen ? 'margin-right: 2rem;' : '')"
size="is-small" size="is-small"
v-model:value="showOnlyRequiredMetadata"> v-model="showOnlyRequiredMetadata">
{{ isMobileScreen ? $i18n.get('label_required') : $i18n.get('label_only_required') }} * {{ isMobileScreen ? $i18n.get('label_required') : $i18n.get('label_only_required') }} *
</b-switch> </b-switch>
@ -354,7 +353,7 @@
<b-input <b-input
v-if="!isMobileScreen || openMetadataNameFilter" v-if="!isMobileScreen || openMetadataNameFilter"
:placeholder="$i18n.get('instruction_type_search_metadata_filter')" :placeholder="$i18n.get('instruction_type_search_metadata_filter')"
v-model:value="metadataNameFilterString" v-model="metadataNameFilterString"
icon="magnify" icon="magnify"
size="is-small" size="is-small"
icon-right="close-circle" icon-right="close-circle"
@ -676,7 +675,7 @@
size="is-small" size="is-small"
true-value="open" true-value="open"
false-value="closed" false-value="closed"
v-model:value="form.comment_status"> v-model="form.comment_status">
<span class="icon has-text-gray4"> <span class="icon has-text-gray4">
<i class="tainacan-icon tainacan-icon-comment"/> <i class="tainacan-icon tainacan-icon-comment"/>
</span> </span>

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

@ -30,7 +30,7 @@
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" /> :extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</label> </label>
<b-input <b-input
v-model:value="form.name" v-model="form.name"
name="name" name="name"
@focus="clearErrors('name')"/> @focus="clearErrors('name')"/>
</b-field> </b-field>
@ -59,7 +59,7 @@
type="textarea" type="textarea"
name="description" name="description"
rows="3" rows="3"
v-model:value="form.description" v-model="form.description"
@focus="clearErrors('description')"/> @focus="clearErrors('description')"/>
</b-field> </b-field>
@ -71,8 +71,8 @@
&nbsp; &nbsp;
<b-switch <b-switch
size="is-small" size="is-small"
@input="clearErrors('description_bellow_name')" @update:model-value="clearErrors('description_bellow_name')"
v-model:value="form.description_bellow_name" v-model="form.description_bellow_name"
true-value="yes" true-value="yes"
false-value="no" false-value="no"
name="description_bellow_name"> name="description_bellow_name">
@ -100,7 +100,7 @@
@focus="clearErrors('label_status')" @focus="clearErrors('label_status')"
id="tainacan-select-status-publish" id="tainacan-select-status-publish"
name="status" name="status"
v-model:value="form.status" v-model="form.status"
native-value="publish"> native-value="publish">
<span class="icon has-text-gray3"> <span class="icon has-text-gray3">
<i class="tainacan-icon tainacan-icon-public"/> <i class="tainacan-icon tainacan-icon-public"/>
@ -111,7 +111,7 @@
@focus="clearErrors('label_status')" @focus="clearErrors('label_status')"
id="tainacan-select-status-private" id="tainacan-select-status-private"
name="status" name="status"
v-model:value="form.status" v-model="form.status"
native-value="private"> native-value="private">
<span class="icon has-text-gray3"> <span class="icon has-text-gray3">
<i class="tainacan-icon tainacan-icon-private"/> <i class="tainacan-icon tainacan-icon-private"/>
@ -151,8 +151,8 @@
&nbsp; &nbsp;
<b-switch <b-switch
size="is-small" size="is-small"
@input="clearErrors('is_conditional_section')" @update:model-value="clearErrors('is_conditional_section')"
v-model:value="form.is_conditional_section" v-model="form.is_conditional_section"
true-value="yes" true-value="yes"
false-value="no" false-value="no"
name="is_conditional_section"> name="is_conditional_section">
@ -179,7 +179,7 @@
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" /> :extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</label> </label>
<b-select <b-select
v-model:value="selectedConditionalMetadatum" v-model="selectedConditionalMetadatum"
:placeholder="$i18n.get('label_select_metadatum')"> :placeholder="$i18n.get('label_select_metadatum')">
<option <option
v-for="conditionalMetadatum of availableConditionalMetadata" v-for="conditionalMetadatum of availableConditionalMetadata"
@ -201,7 +201,7 @@
</label> </label>
<div style="overflow-y: auto; overflow-x: hidden; max-height: 100px;"> <div style="overflow-y: auto; overflow-x: hidden; max-height: 100px;">
<b-checkbox <b-checkbox
v-model:value="selectedConditionalValue" v-model="selectedConditionalValue"
v-for="(conditionalValue, conditionalValueIndex) of availableConditionalMetadata.find((availableMetadatum) => availableMetadatum.id == selectedConditionalMetadatum).metadata_type_object.options.options.split('\n')" v-for="(conditionalValue, conditionalValueIndex) of availableConditionalMetadata.find((availableMetadatum) => availableMetadatum.id == selectedConditionalMetadatum).metadata_type_object.options.options.split('\n')"
:key="conditionalValueIndex" :key="conditionalValueIndex"
:native-value="conditionalValue"> :native-value="conditionalValue">
@ -228,8 +228,8 @@
<button <button
type="button" type="button"
class="button is-outlined" class="button is-outlined"
@click.prevent="cancelEdition()" @click.prevent="cancelEdition()">
slot="trigger">{{ $i18n.get('cancel') }} {{ $i18n.get('cancel') }}
</button> </button>
</div> </div>
<p class="help is-danger">{{ formErrorMessage }}</p> <p class="help is-danger">{{ formErrorMessage }}</p>

44
src/views/admin/components/edition/metadatum-edition-form.vue
View File

@ -38,7 +38,7 @@
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" /> :extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</label> </label>
<b-input <b-input
v-model:value="form.name" v-model="form.name"
name="name" name="name"
@focus="clearErrors('name')"/> @focus="clearErrors('name')"/>
</b-field> </b-field>
@ -67,7 +67,7 @@
type="textarea" type="textarea"
name="description" name="description"
rows="3" rows="3"
v-model:value="form.description" v-model="form.description"
@focus="clearErrors('description')"/> @focus="clearErrors('description')"/>
</b-field> </b-field>
@ -79,8 +79,8 @@
&nbsp; &nbsp;
<b-switch <b-switch
size="is-small" size="is-small"
@input="clearErrors('description_bellow_name')" @update:model-value="clearErrors('description_bellow_name')"
v-model:value="form.description_bellow_name" v-model="form.description_bellow_name"
true-value="yes" true-value="yes"
false-value="no" false-value="no"
name="description_bellow_name"> name="description_bellow_name">
@ -104,7 +104,7 @@
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" /> :extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</label> </label>
<b-input <b-input
v-model:value="form.placeholder" v-model="form.placeholder"
name="placeholder" name="placeholder"
@focus="clearErrors('placeholder')"/> @focus="clearErrors('placeholder')"/>
</b-field> </b-field>
@ -126,7 +126,7 @@
@focus="clearErrors('label_status')" @focus="clearErrors('label_status')"
id="tainacan-select-status-publish" id="tainacan-select-status-publish"
name="status" name="status"
v-model:value="form.status" v-model="form.status"
native-value="publish"> native-value="publish">
<span class="icon has-text-gray3"> <span class="icon has-text-gray3">
<i class="tainacan-icon tainacan-icon-public"/> <i class="tainacan-icon tainacan-icon-public"/>
@ -137,7 +137,7 @@
@focus="clearErrors('label_status')" @focus="clearErrors('label_status')"
id="tainacan-select-status-private" id="tainacan-select-status-private"
name="status" name="status"
v-model:value="form.status" v-model="form.status"
native-value="private"> native-value="private">
<span class="icon has-text-gray3"> <span class="icon has-text-gray3">
<i class="tainacan-icon tainacan-icon-private"/> <i class="tainacan-icon tainacan-icon-private"/>
@ -162,8 +162,8 @@
</label> </label>
<b-select <b-select
expanded expanded
v-model:value="form.display" v-model="form.display"
@input="clearErrors('display')"> @update:model-value="clearErrors('display')">
<option value="yes"> <option value="yes">
{{ $i18n.get('label_display_default') }} {{ $i18n.get('label_display_default') }}
</option> </option>
@ -185,8 +185,8 @@
:type="formErrors['required'] != undefined ? 'is-danger' : ''" :type="formErrors['required'] != undefined ? 'is-danger' : ''"
:message="formErrors['required'] != undefined ? formErrors['required'] : ''"> :message="formErrors['required'] != undefined ? formErrors['required'] : ''">
<b-checkbox <b-checkbox
@input="clearErrors('required')" @update:model-value="clearErrors('required')"
v-model:value="form.required" v-model="form.required"
true-value="yes" true-value="yes"
false-value="no" false-value="no"
class="is-inline-block" class="is-inline-block"
@ -204,8 +204,8 @@
:type="formErrors['collection_key'] != undefined ? 'is-danger' : ''" :type="formErrors['collection_key'] != undefined ? 'is-danger' : ''"
:message="formErrors['collection_key'] != undefined ? formErrors['collection_key'] : ''"> :message="formErrors['collection_key'] != undefined ? formErrors['collection_key'] : ''">
<b-checkbox <b-checkbox
@input="clearErrors('collection_key')" @update:model-value="clearErrors('collection_key')"
v-model:value="form.collection_key" v-model="form.collection_key"
true-value="yes" true-value="yes"
false-value="no" false-value="no"
class="is-inline-block" class="is-inline-block"
@ -223,8 +223,8 @@
:type="formErrors['multiple'] != undefined ? 'is-danger' : ''" :type="formErrors['multiple'] != undefined ? 'is-danger' : ''"
:message="formErrors['multiple'] != undefined ? formErrors['multiple'] : ''"> :message="formErrors['multiple'] != undefined ? formErrors['multiple'] : ''">
<b-checkbox <b-checkbox
@input="clearErrors('multiple')" @update:model-value="clearErrors('multiple')"
v-model:value="form.multiple" v-model="form.multiple"
true-value="yes" true-value="yes"
false-value="no" false-value="no"
class="is-inline-block" class="is-inline-block"
@ -247,7 +247,7 @@
<b-switch <b-switch
size="is-small" size="is-small"
:disabled="form.multiple != 'yes'" :disabled="form.multiple != 'yes'"
v-model:value="showCardinalityOptions" /> v-model="showCardinalityOptions" />
</b-field> </b-field>
<b-field <b-field
@ -267,14 +267,14 @@
name="cardinality" name="cardinality"
step="1" step="1"
min="2" min="2"
v-model:value="form.cardinality"/> v-model="form.cardinality"/>
</b-field> </b-field>
<b-field v-if="!isRepositoryLevel && isInsideImporterFlow"> <b-field v-if="!isRepositoryLevel && isInsideImporterFlow">
<b-checkbox <b-checkbox
class="is-inline-block" class="is-inline-block"
v-model:value="form.repository_level" v-model="form.repository_level"
@input="clearErrors('repository_level')" @update:model-value="clearErrors('repository_level')"
name="repository_level" name="repository_level"
true-value="yes" true-value="yes"
false-value="no"> false-value="no">
@ -354,7 +354,7 @@
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" /> :extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</label> </label>
<b-input <b-input
v-model:value="form.semantic_uri" v-model="form.semantic_uri"
name="semantic_uri" name="semantic_uri"
type="url" type="url"
@focus="clearErrors('semantic_uri')"/> @focus="clearErrors('semantic_uri')"/>
@ -369,8 +369,8 @@
<button <button
type="button" type="button"
class="button is-outlined" class="button is-outlined"
@click.prevent="cancelEdition()" @click.prevent="cancelEdition()">
slot="trigger">{{ $i18n.get('cancel') }} {{ $i18n.get('cancel') }}
</button> </button>
</div> </div>
<p class="help is-danger">{{ formErrorMessage }}</p> <p class="help is-danger">{{ formErrorMessage }}</p>

18
src/views/admin/components/edition/taxonomy-edition-form.vue
View File

@ -27,7 +27,7 @@
extra-classes="tainacan-repository-tooltip"/> extra-classes="tainacan-repository-tooltip"/>
<b-input <b-input
id="tainacan-text-name" id="tainacan-text-name"
v-model:value="form.name" v-model="form.name"
@focus="clearErrors('name')" @focus="clearErrors('name')"
@blur="updateSlug()" @blur="updateSlug()"
:disabled="isUpdatingSlug" :disabled="isUpdatingSlug"
@ -56,7 +56,7 @@
id="tainacan-text-description" id="tainacan-text-description"
type="textarea" type="textarea"
rows="3" rows="3"
v-model:value="form.description" v-model="form.description"
@focus="clearErrors('description')"/> @focus="clearErrors('description')"/>
</b-field> </b-field>
@ -67,7 +67,7 @@
<b-switch <b-switch
id="tainacan-checkbox-allow-insert" id="tainacan-checkbox-allow-insert"
size="is-small" size="is-small"
v-model:value="form.allowInsert" v-model="form.allowInsert"
true-value="yes" true-value="yes"
false-value="no" /> false-value="no" />
<help-button <help-button
@ -84,7 +84,7 @@
<b-switch <b-switch
id="tainacan-checkbox-allow-insert" id="tainacan-checkbox-allow-insert"
size="is-small" size="is-small"
v-model:value="form.hierarchical" v-model="form.hierarchical"
true-value="yes" true-value="yes"
false-value="no" /> false-value="no" />
<help-button <help-button
@ -105,9 +105,9 @@
:message="$i18n.getHelperMessage('taxonomies', 'slug')" :message="$i18n.getHelperMessage('taxonomies', 'slug')"
extra-classes="tainacan-repository-tooltip"/> extra-classes="tainacan-repository-tooltip"/>
<b-input <b-input
@input="updateSlug()" @update:model-value="updateSlug()"
id="tainacan-text-slug" id="tainacan-text-slug"
v-model:value="form.slug" v-model="form.slug"
@focus="clearErrors('slug')" @focus="clearErrors('slug')"
:disabled="isUpdatingSlug"/> :disabled="isUpdatingSlug"/>
</b-field> </b-field>
@ -132,7 +132,7 @@
:native-value="wpPostType.slug" :native-value="wpPostType.slug"
:true-value="wpPostType.slug" :true-value="wpPostType.slug"
false-value="" false-value=""
v-model:value="form.enabledPostTypes" v-model="form.enabledPostTypes"
name="enabled_post_types" > name="enabled_post_types" >
{{ wpPostType.label }} {{ wpPostType.label }}
</b-checkbox> </b-checkbox>
@ -156,7 +156,7 @@
extra-classes="tainacan-repository-tooltip"/> extra-classes="tainacan-repository-tooltip"/>
<div class="status-radios"> <div class="status-radios">
<b-radio <b-radio
v-model:value="form.status" v-model="form.status"
v-for="(statusOption, index) of $statusHelper.getStatuses().filter((status) => status.slug != 'draft')" v-for="(statusOption, index) of $statusHelper.getStatuses().filter((status) => status.slug != 'draft')"
:key="index" :key="index"
:native-value="statusOption.slug"> :native-value="statusOption.slug">
@ -258,7 +258,7 @@
</div> </div>
<b-loading <b-loading
v-model:active="isLoadingTaxonomy" v-model="isLoadingTaxonomy"
:can-cancel="false"/> :can-cancel="false"/>
</div> </div>

17
src/views/admin/components/edition/term-edition-form.vue
View File

@ -25,7 +25,7 @@
<div class="modal-card-body"> <div class="modal-card-body">
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
v-model:active="isLoading" /> v-model="isLoading" />
<!-- Name -------------- --> <!-- Name -------------- -->
<b-field <b-field
@ -42,7 +42,7 @@
</label> </label>
<b-input <b-input
:placeholder="$i18n.get('label_term_without_name')" :placeholder="$i18n.get('label_term_without_name')"
v-model:value="form.name" v-model="form.name"
name="name" name="name"
@focus="clearErrors({ name: 'name', repeated: 'repeated' })"/> @focus="clearErrors({ name: 'name', repeated: 'repeated' })"/>
</b-field> </b-field>
@ -126,7 +126,7 @@
<b-input <b-input
type="textarea" type="textarea"
name="description" name="description"
v-model:value="form.description" v-model="form.description"
@focus="clearErrors('description')"/> @focus="clearErrors('description')"/>
</b-field> </b-field>
</div> </div>
@ -141,10 +141,10 @@
<label class="label is-inline"> <label class="label is-inline">
{{ $i18n.get('label_parent_term') }} {{ $i18n.get('label_parent_term') }}
<b-switch <b-switch
@input="onToggleSwitch()" @update:model-value="onToggleSwitch()"
id="tainacan-checkbox-has-parent" id="tainacan-checkbox-has-parent"
size="is-small" size="is-small"
v-model:value="hasParent" /> v-model="hasParent" />
<help-button <help-button
:title="$i18n.get('label_parent_term')" :title="$i18n.get('label_parent_term')"
:message="$i18n.get('info_help_parent_term')" :message="$i18n.get('info_help_parent_term')"
@ -156,10 +156,10 @@
:data="parentTerms" :data="parentTerms"
field="name" field="name"
clearable clearable
v-model:value="parentTermName" v-model="parentTermName"
@select="onSelectParentTerm($event)" @select="onSelectParentTerm($event)"
:loading="isFetchingParentTerms" :loading="isFetchingParentTerms"
@input="fetchParentTerms" @update:model-value="fetchParentTerms"
@focus="clearErrors('parent');" @focus="clearErrors('parent');"
:disabled="!hasParent" :disabled="!hasParent"
:append-to-body="true" :append-to-body="true"
@ -204,8 +204,7 @@
<button <button
type="button" type="button"
class="button is-outlined" class="button is-outlined"
@click.prevent="cancelEdition()" @click.prevent="cancelEdition()">
slot="trigger">
{{ $i18n.get('cancel') }} {{ $i18n.get('cancel') }}
</button> </button>
</div> </div>

4
src/views/admin/components/filter-types/autocomplete/Autocomplete.vue
View File

@ -4,11 +4,11 @@
icon="magnify" icon="magnify"
size="is-small" size="is-small"
:aria-labelledby="'filter-label-id-' + filter.id" :aria-labelledby="'filter-label-id-' + filter.id"
v-model:value="selected" v-model="selected"
:data="options" :data="options"
expanded expanded
:loading="isLoadingOptions" :loading="isLoadingOptions"
@input="($event) => { resetPage(); search($event); }" @update:model-value="($event) => { resetPage(); search($event); }"
field="label" field="label"
@select="onSelect" @select="onSelect"
clearable clearable

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

@ -107,10 +107,10 @@
this.loadOptions(); this.loadOptions();
}, },
created() { created() {
this.$eventBusSearch.$emitter.on('hasToReloadFacets', this.reloadOptions); this.$eventBusSearchEmitter.on('hasToReloadFacets', this.reloadOptions);
}, },
beforeUnmount() { beforeUnmount() {
this.$eventBusSearch.$emitter.off('hasToReloadFacets', this.reloadOptions); this.$eventBusSearchEmitter.off('hasToReloadFacets', this.reloadOptions);
}, },
methods: { methods: {
reloadOptions(shouldReload) { reloadOptions(shouldReload) {

8
src/views/admin/components/filter-types/date-interval/DateInterval.vue
View File

@ -3,9 +3,9 @@
<b-datepicker <b-datepicker
:aria-labelledby="'filter-label-id-' + filter.id" :aria-labelledby="'filter-label-id-' + filter.id"
:placeholder="$i18n.get('label_selectbox_init')" :placeholder="$i18n.get('label_selectbox_init')"
v-model:value="dateInit" v-model="dateInit"
@focus="isTouched = true" @focus="isTouched = true"
@input="($event) => { resetPage(); validadeValues($event) }" @update:model-value="($event) => { resetPage(); validadeValues($event) }"
editable editable
:trap-focus="false" :trap-focus="false"
:date-formatter="(date) => dateFormatter(date)" :date-formatter="(date) => dateFormatter(date)"
@ -29,8 +29,8 @@
<b-datepicker <b-datepicker
:aria-labelledby="'filter-label-id-' + filter.id" :aria-labelledby="'filter-label-id-' + filter.id"
:placeholder="$i18n.get('label_selectbox_init')" :placeholder="$i18n.get('label_selectbox_init')"
v-model:value="dateEnd" v-model="dateEnd"
@input="validadeValues()" @update:model-value="validadeValues()"
@focus="isTouched = true" @focus="isTouched = true"
editable editable
:trap-focus="false" :trap-focus="false"

33
src/views/admin/components/filter-types/date/Date.vue
View File

@ -2,20 +2,21 @@
<div class="date-filter-container"> <div class="date-filter-container">
<b-dropdown <b-dropdown
:mobile-modal="true" :mobile-modal="true"
@input="($event) => { resetPage(); onChangeComparator($event) }" @update:model-value="($event) => { resetPage(); onChangeComparator($event) }"
aria-role="list" aria-role="list"
trap-focus> trap-focus>
<button <template #trigger>
:aria-label="$i18n.get('label_comparator')" <button
class="button is-white" :aria-label="$i18n.get('label_comparator')"
slot="trigger"> class="button is-white">
<span class="icon is-small"> <span class="icon is-small">
<i v-html="comparatorSymbol" /> <i v-html="comparatorSymbol" />
</span> </span>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" /> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
</span> </span>
</button> </button>
</template>
<b-dropdown-item <b-dropdown-item
role="button" role="button"
:class="{ 'is-active': comparator == '=' }" :class="{ 'is-active': comparator == '=' }"
@ -67,14 +68,14 @@
:aria-plus-label="$i18n.get('label_increase')" :aria-plus-label="$i18n.get('label_increase')"
size="is-small" size="is-small"
step="1" step="1"
@input="emitOnlyYear($event)" @update:model-value="emitOnlyYear($event)"
v-model:value="yearsOnlyValue"/> --> v-model="yearsOnlyValue"/> -->
<b-datepicker <b-datepicker
position="is-bottom-left" position="is-bottom-left"
:aria-labelledby="'filter-label-id-' + filter.id" :aria-labelledby="'filter-label-id-' + filter.id"
:placeholder="$i18n.get('instruction_select_a_date')" :placeholder="$i18n.get('instruction_select_a_date')"
v-model:value="value" v-model="value"
@input="($event) => { resetPage(); emit($event); }" @update:model-value="($event) => { resetPage(); emit($event); }"
editable editable
:trap-focus="false" :trap-focus="false"
:date-formatter="(date) => dateFormatter(date)" :date-formatter="(date) => dateFormatter(date)"

4
src/views/admin/components/filter-types/date/FormDate.vue
View File

@ -9,8 +9,8 @@
</label> </label>
<b-select <b-select
name="type_options" name="type_options"
v-model:value="type" v-model="type"
@input="onUpdateType"> @update:model-value="onUpdateType">
<option value="day">{{ $i18n.get('label_day') }}</option> <option value="day">{{ $i18n.get('label_day') }}</option>
<option value="month">{{ $i18n.get('label_month') }}</option> <option value="month">{{ $i18n.get('label_month') }}</option>
<option value="year">{{ $i18n.get('label_year') }}</option> <option value="year">{{ $i18n.get('label_year') }}</option>

8
src/views/admin/components/filter-types/numeric-interval/FormNumericInterval.vue
View File

@ -12,8 +12,8 @@
class="is-flex"> class="is-flex">
<b-select <b-select
name="step_options" name="step_options"
v-model:value="step" v-model="step"
@input="onUpdateStep"> @update:model-value="onUpdateStep">
<option value="0.001">0.001</option> <option value="0.001">0.001</option>
<option value="0.01">0.01</option> <option value="0.01">0.01</option>
<option value="0.1">0.1</option> <option value="0.1">0.1</option>
@ -49,8 +49,8 @@
class="is-flex"> class="is-flex">
<b-input <b-input
name="max_options" name="max_options"
v-model:value="step" v-model="step"
@input="onUpdateStep" @update:model-value="onUpdateStep"
type="number" type="number"
step="1" /> step="1" />
<button <button

8
src/views/admin/components/filter-types/numeric-interval/NumericInterval.vue
View File

@ -5,9 +5,9 @@
:aria-minus-label="$i18n.get('label_decrease')" :aria-minus-label="$i18n.get('label_decrease')"
:aria-plus-label="$i18n.get('label_increase')" :aria-plus-label="$i18n.get('label_increase')"
size="is-small" size="is-small"
@input="($event) => { resetPage(); validadeValues($event) }" @update:model-value="($event) => { resetPage(); validadeValues($event) }"
:step="filterTypeOptions.step" :step="filterTypeOptions.step"
v-model:value="valueInit" v-model="valueInit"
/> />
<p <p
style="font-size: 0.75em; margin-bottom: 0.125em;" style="font-size: 0.75em; margin-bottom: 0.125em;"
@ -19,9 +19,9 @@
:aria-minus-label="$i18n.get('label_decrease')" :aria-minus-label="$i18n.get('label_decrease')"
:aria-plus-label="$i18n.get('label_increase')" :aria-plus-label="$i18n.get('label_increase')"
size="is-small" size="is-small"
@input="($event) => { resetPage(); validadeValues($event) }" @update:model-value="($event) => { resetPage(); validadeValues($event) }"
:step="filterTypeOptions.step" :step="filterTypeOptions.step"
v-model:value="valueEnd"/> v-model="valueEnd"/>
</div> </div>
</template> </template>

16
src/views/admin/components/filter-types/numeric-list-interval/FormNumericListInterval.vue
View File

@ -10,8 +10,8 @@
<div> <div>
<b-field> <b-field>
<b-checkbox <b-checkbox
v-model:value="showIntervalOnTag" v-model="showIntervalOnTag"
@input="onUpdateShowIntervalOnTag()"> @update:model-value="onUpdateShowIntervalOnTag()">
{{ $i18n.get('info_show_interval_on_tag') }} {{ $i18n.get('info_show_interval_on_tag') }}
</b-checkbox> </b-checkbox>
</b-field> </b-field>
@ -33,8 +33,8 @@
<b-input <b-input
expanded expanded
:placeholder="$i18n.get('label')" :placeholder="$i18n.get('label')"
@input="onUpdate(interval)" @update:model-value="onUpdate(interval)"
v-model:value="interval.label" /> v-model="interval.label" />
</b-field> </b-field>
<b-field> <b-field>
<b-input <b-input
@ -42,15 +42,15 @@
type="number" type="number"
step="0.01" step="0.01"
:placeholder="$i18n.get('info_initial_value')" :placeholder="$i18n.get('info_initial_value')"
@input="onUpdate(interval, true)" @update:model-value="onUpdate(interval, true)"
v-model:value="interval.from" /> v-model="interval.from" />
<b-input <b-input
expanded expanded
type="number" type="number"
step="0.01" step="0.01"
:placeholder="$i18n.get('info_final_value')" :placeholder="$i18n.get('info_final_value')"
@input="onUpdate(interval, true)" @update:model-value="onUpdate(interval, true)"
v-model:value="interval.to" /> v-model="interval.to" />
</b-field> </b-field>
<p class="control"> <p class="control">
<a <a

4
src/views/admin/components/filter-types/numeric-list-interval/NumericListInterval.vue
View File

@ -3,8 +3,8 @@
<b-select <b-select
expanded expanded
:placeholder="$i18n.get('instruction_select_a_interval')" :placeholder="$i18n.get('instruction_select_a_interval')"
@input="($event) => { resetPage; changeInterval($event) }" @update:model-value="($event) => { resetPage; changeInterval($event) }"
v-model:value="selectedInterval"> v-model="selectedInterval">
<option value=""> <option value="">
{{ $i18n.get('label_selectbox_init') }}... {{ $i18n.get('label_selectbox_init') }}...
</option> </option>

8
src/views/admin/components/filter-types/numeric/FormNumeric.vue
View File

@ -12,8 +12,8 @@
class="is-flex"> class="is-flex">
<b-select <b-select
name="step_options" name="step_options"
v-model:value="step" v-model="step"
@input="onUpdateStep"> @update:model-value="onUpdateStep">
<option value="0.001">0.001</option> <option value="0.001">0.001</option>
<option value="0.01">0.01</option> <option value="0.01">0.01</option>
<option value="0.1">0.1</option> <option value="0.1">0.1</option>
@ -49,8 +49,8 @@
class="is-flex"> class="is-flex">
<b-input <b-input
name="max_options" name="max_options"
v-model:value="step" v-model="step"
@input="onUpdateStep" @update:model-value="onUpdateStep"
type="number" type="number"
step="1" /> step="1" />
<button <button

29
src/views/admin/components/filter-types/numeric/Numeric.vue
View File

@ -2,20 +2,21 @@
<div class="numeric-filter-container"> <div class="numeric-filter-container">
<b-dropdown <b-dropdown
:mobile-modal="true" :mobile-modal="true"
@input="($event) => { resetPage(); onChangeComparator($event) }" @update:model-value="($event) => { resetPage(); onChangeComparator($event) }"
aria-role="list" aria-role="list"
trap-focus> trap-focus>
<button <template #trigger>
:aria-label="$i18n.get('label_comparator')" <button
class="button is-white" :aria-label="$i18n.get('label_comparator')"
slot="trigger"> class="button is-white">
<span class="icon is-small"> <span class="icon is-small">
<i v-html="comparatorSymbol" /> <i v-html="comparatorSymbol" />
</span> </span>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" /> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
</span> </span>
</button> </button>
</template>
<b-dropdown-item <b-dropdown-item
role="button" role="button"
:class="{ 'is-active': comparator == '=' }" :class="{ 'is-active': comparator == '=' }"
@ -66,8 +67,8 @@
:aria-plus-label="$i18n.get('label_increase')" :aria-plus-label="$i18n.get('label_increase')"
size="is-small" size="is-small"
:step="Number(filterTypeOptions.step)" :step="Number(filterTypeOptions.step)"
@input="($event) => { resetPage($event); emit($event); }" @update:model-value="($event) => { resetPage($event); emit($event); }"
v-model:value="value"/> v-model="value"/>
</div> </div>
</template> </template>

8
src/views/admin/components/filter-types/selectbox/Selectbox.vue
View File

@ -4,9 +4,9 @@
class="block"> class="block">
<b-select <b-select
v-if="!isLoadingOptions" v-if="!isLoadingOptions"
:value="selected" :model-value="selected"
:aria-labelledby="'filter-label-id-' + filter.id" :aria-labelledby="'filter-label-id-' + filter.id"
@input="($event) => { resetPage(); onSelect($event) }" @update:model-value="($event) => { resetPage(); onSelect($event) }"
:placeholder="$i18n.get('label_selectbox_init')" :placeholder="$i18n.get('label_selectbox_init')"
expanded> expanded>
<option value="">{{ $i18n.get('label_selectbox_init') }}...</option> <option value="">{{ $i18n.get('label_selectbox_init') }}...</option>
@ -55,10 +55,10 @@
this.loadOptions(); this.loadOptions();
}, },
created() { created() {
this.$eventBusSearch.$emitter.on('hasToReloadFacets', this.reloadOptions); this.$eventBusSearchEmitter.on('hasToReloadFacets', this.reloadOptions);
}, },
beforeUnmount() { beforeUnmount() {
this.$eventBusSearch.$emitter.off('hasToReloadFacets', this.reloadOptions); this.$eventBusSearchEmitter.off('hasToReloadFacets', this.reloadOptions);
}, },
methods: { methods: {
reloadOptions(shouldReload) { reloadOptions(shouldReload) {

2
src/views/admin/components/filter-types/taginput/Taginput.vue
View File

@ -10,7 +10,7 @@
:remove-on-keys="[]" :remove-on-keys="[]"
field="label" field="label"
attached attached
@input="($event) => { resetPage(); onSelect($event) }" @update:model-value="($event) => { resetPage(); onSelect($event) }"
@typing="search" @typing="search"
:aria-close-label="$i18n.get('remove_value')" :aria-close-label="$i18n.get('remove_value')"
:aria-labelledby="'filter-label-id-' + filter.id" :aria-labelledby="'filter-label-id-' + filter.id"

64
src/views/admin/components/filter-types/tainacan-filter-item.vue
View File

@ -8,38 +8,38 @@
<b-collapse <b-collapse
v-if="displayFilter" v-if="displayFilter"
class="show" class="show"
v-model:open="singleCollapseOpen" v-model="singleCollapseOpen"
animation="filter-item"> animation="filter-item">
<button <template #trigger="{ props }">
:for="'filter-input-id-' + filter.id" <button
:aria-controls="'filter-input-id-' + filter.id" :for="'filter-input-id-' + filter.id"
:aria-expanded="singleCollapseOpen" :aria-controls="'filter-input-id-' + filter.id"
v-tooltip="{ :aria-expanded="singleCollapseOpen"
delay: { v-tooltip="{
shown: 500, delay: {
hide: 300, shown: 500,
}, hide: 300,
content: filter.name, },
html: false, content: filter.name,
autoHide: false, html: false,
placement: 'top-start', autoHide: false,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''] placement: 'top-start',
}" popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
:id="'filter-label-id-' + filter.id" }"
:aria-label="filter.name" :id="'filter-label-id-' + filter.id"
class="label" :aria-label="filter.name"
slot="trigger" class="label">
slot-scope="props"> <span class="icon">
<span class="icon"> <i
<i :class="{
:class="{ 'tainacan-icon-arrowdown' : props.open,
'tainacan-icon-arrowdown' : props.open, 'tainacan-icon-arrowright' : !props.open
'tainacan-icon-arrowright' : !props.open }"
}" class="tainacan-icon tainacan-icon-1-25em"/>
class="tainacan-icon tainacan-icon-1-25em"/> </span>
</span> <span class="collapse-label">{{ filter.name }}</span>
<span class="collapse-label">{{ filter.name }}</span> </button>
</button> </template>
<div :id="'filter-input-id-' + filter.id"> <div :id="'filter-input-id-' + filter.id">
<component <component
:is="filter.filter_type_object ? filter.filter_type_object.component : null" :is="filter.filter_type_object ? filter.filter_type_object.component : null"
@ -150,7 +150,7 @@
}, },
methods: { methods: {
onInput(inputEvent) { onInput(inputEvent) {
this.$eventBusSearch.$emit('input', inputEvent); this.$eventBusSearchEmitter.emit('input', inputEvent);
}, },
onFilterUpdateParentCollapse(open) { onFilterUpdateParentCollapse(open) {
const componentsThatShouldCollapseIfEmpty = ['tainacan-filter-taxonomy-checkbox', 'tainacan-filter-selectbox', 'tainacan-filter-checkbox']; const componentsThatShouldCollapseIfEmpty = ['tainacan-filter-taxonomy-checkbox', 'tainacan-filter-selectbox', 'tainacan-filter-checkbox'];

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

@ -133,7 +133,7 @@
this.taxonomyId = this.filter.metadatum.metadata_type_object.options.taxonomy_id; this.taxonomyId = this.filter.metadatum.metadata_type_object.options.taxonomy_id;
this.taxonomy = this.filter.metadatum.metadata_type_object.options.taxonomy; this.taxonomy = this.filter.metadatum.metadata_type_object.options.taxonomy;
} }
this.$eventBusSearch.$emitter.on('hasToReloadFacets', this.reloadOptions); this.$eventBusSearchEmitter.on('hasToReloadFacets', this.reloadOptions);
}, },
mounted(){ mounted(){
if (!this.isUsingElasticSearch) if (!this.isUsingElasticSearch)
@ -145,7 +145,7 @@
if (this.getOptionsValuesCancel != undefined) if (this.getOptionsValuesCancel != undefined)
this.getOptionsValuesCancel.cancel('Facet search Canceled.'); this.getOptionsValuesCancel.cancel('Facet search Canceled.');
this.$eventBusSearch.$emitter.off('hasToReloadFacets', this.reloadOptions); this.$eventBusSearchEmitter.off('hasToReloadFacets', this.reloadOptions);
}, },
methods: { methods: {
...mapGetters('search', [ ...mapGetters('search', [

2
src/views/admin/components/filter-types/taxonomy/Taginput.vue
View File

@ -14,7 +14,7 @@
:aria-labelledby="'filter-label-id-' + filter.id" :aria-labelledby="'filter-label-id-' + filter.id"
:class="{'has-selected': selected != undefined && selected != []}" :class="{'has-selected': selected != undefined && selected != []}"
@typing="search" @typing="search"
@input="($event) => { resetPage(); onSelect($event) }" @update:model-value="($event) => { resetPage(); onSelect($event) }"
:placeholder="$i18n.get('info_type_to_add_terms')" :placeholder="$i18n.get('info_type_to_add_terms')"
check-infinite-scroll check-infinite-scroll
@infinite-scroll="searchMore"> @infinite-scroll="searchMore">

4
src/views/admin/components/lists/attachments-list.vue
View File

@ -5,7 +5,7 @@
class="table-container"> class="table-container">
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
v-model:active="isLoading" /> v-model="isLoading" />
<div <div
v-if="attachments.length > 0" v-if="attachments.length > 0"
class="table-wrapper"> class="table-wrapper">
@ -74,7 +74,7 @@
<b-pagination <b-pagination
@change="onPageChange" @change="onPageChange"
:total="totalAttachments" :total="totalAttachments"
v-model:current="attachmentsPage" v-model="attachmentsPage"
order="is-centered" order="is-centered"
size="is-small" size="is-small"
:per-page="attachmentsPerPage" :per-page="attachmentsPerPage"

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

@ -1,7 +1,7 @@
<template> <template>
<div class="column"> <div class="column">
<b-loading v-model:active="isLoadingMetadataSections"/> <b-loading v-model="isLoadingMetadataSections"/>
<div class="tainacan-form sub-header"> <div class="tainacan-form sub-header">
<template v-if="activeMetadataSectionsList"> <template v-if="activeMetadataSectionsList">
@ -27,15 +27,16 @@
class="show metadata-options-dropdown" class="show metadata-options-dropdown"
aria-role="list" aria-role="list"
trap-focus> trap-focus>
<button <template #trigger>
:aria-label="$i18n.get('label_filter_by_metadata_type')" <button
class="button is-white" :aria-label="$i18n.get('label_filter_by_metadata_type')"
slot="trigger"> class="button is-white">
<span>{{ $i18n.get('label_filter_by_metadata_type') }}</span> <span>{{ $i18n.get('label_filter_by_metadata_type') }}</span>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
</span> </span>
</button> </button>
</template>
<div class="metadata-options-container"> <div class="metadata-options-container">
<b-dropdown-item <b-dropdown-item
v-for="(metadataType, index) in metadataTypeFilterOptions" v-for="(metadataType, index) in metadataTypeFilterOptions"
@ -44,7 +45,7 @@
custom custom
aria-role="listitem"> aria-role="listitem">
<b-checkbox <b-checkbox
v-model:value="metadataType.enabled" v-model="metadataType.enabled"
:native-value="metadataType.enabled"> :native-value="metadataType.enabled">
{{ metadataType.name }} {{ metadataType.name }}
</b-checkbox> </b-checkbox>
@ -55,7 +56,7 @@
<b-field class="header-item"> <b-field class="header-item">
<b-input <b-input
:placeholder="$i18n.get('instruction_type_search_metadata_filter')" :placeholder="$i18n.get('instruction_type_search_metadata_filter')"
v-model:value="metadataNameFilterString" v-model="metadataNameFilterString"
icon="magnify" icon="magnify"
size="is-small" size="is-small"
icon-right="close-circle" icon-right="close-circle"
@ -79,419 +80,436 @@
</section> </section>
<!-- The Metadata Sections list --> <!-- The Metadata Sections list -->
<draggable <sortable
v-model:value="activeMetadataSectionsList" :list="activeMetadataSectionsList"
item-key="id"
class="active-metadata-sections-area" class="active-metadata-sections-area"
@change="handleSectionChange($event)" @update="handleSectionChange($event)"
:group="{ name:'metadata-sections', pull: false, put: [ 'metadata-sections' ] }" @add="handleSectionChange($event)"
:sort="(openedMetadataSectionId == '' || openedMetadataSectionId == undefined) && (openedMetadatumId == '' || openedMetadatumId == undefined)" @remove="handleSectionChange($event)"
:handle="'.handle'" :options="{
ghost-class="sortable-ghost" group: {
chosen-class="sortable-chosen" name:'metadata-sections',
filter=".not-sortable-item" pull: false,
:prevent-on-filter="false" put: [ 'metadata-sections' ]
:animation="250"> },
<div sort: (openedMetadataSectionId == '' || openedMetadataSectionId == undefined) && (openedMetadatumId == '' || openedMetadatumId == undefined),
v-for="(metadataSection, sectionIndex) in activeMetadataSectionsList" handle: '.handle',
:key="metadataSection.id"> ghostClass: 'sortable-ghost',
<div chosenClass: 'sortable-chosen',
class="active-metadata-sections-item" filter: '.not-sortable-item',
:class="{ preventOnFilter: false,
'is-compact-item': !isCollapseOpen(metadataSection.id), animation: 250
'not-sortable-item': }">
metadataSection.id == undefined || <template #item="{ element: metadataSection, index: sectionIndex }">
openedMetadatumId != '' || <div :key="metadataSection.id">
openedMetadataSectionId != '' ||
isUpdatingMetadataOrder ||
isUpdatingMetadatum ||
isUpdatingMetadataSectionsOrder ||
metadataNameFilterString != '' ||
hasSomeMetadataTypeFilterApplied,
'not-focusable-item': openedMetadataSectionId == metadataSection.id,
'disabled-metadatum': metadataSection.enabled == false,
'inherited-metadatum': false
}">
<div <div
:ref="'metadata-section-handler-' + metadataSection.id" class="active-metadata-sections-item"
class="handle"> :class="{
<span class="sorting-buttons"> 'is-compact-item': !isCollapseOpen(metadataSection.id),
<button 'not-sortable-item':
:disabled="sectionIndex == 0" metadataSection.id == undefined ||
class="link-button" openedMetadatumId != '' ||
@click="moveMetadataSectionUpViaButon(sectionIndex)"> openedMetadataSectionId != '' ||
<span class="icon"> isUpdatingMetadataOrder ||
<i class="tainacan-icon tainacan-icon-previous tainacan-icon-rotate-90" /> isUpdatingMetadatum ||
</span> isUpdatingMetadataSectionsOrder ||
</button> metadataNameFilterString != '' ||
<button hasSomeMetadataTypeFilterApplied,
:disabled="sectionIndex == activeMetadataSectionsList.length - 1" 'not-focusable-item': openedMetadataSectionId == metadataSection.id,
class="link-button" 'disabled-metadatum': metadataSection.enabled == false,
@click="moveMetadataSectionDownViaButton(sectionIndex)"> 'inherited-metadatum': false
<span class="icon"> }">
<i class="tainacan-icon tainacan-icon-next tainacan-icon-rotate-90" />
</span>
</button>
</span>
<span
:style="{ opacity: !(metadataSection.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || openedMetadataSectionId != '' || isUpdatingMetadataSectionsOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied) ? '1.0' : '0.0' }"
v-tooltip="{
content: metadataSection.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || openedMetadataSectionId != '' || isUpdatingMetadataSectionsOrder || isUpdatingMetadatum ? $i18n.get('info_not_allowed_change_order_metadata_sections') : $i18n.get('instruction_drag_and_drop_metadata_sections_sort'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}"
class="icon grip-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="currentColor">
<path
d="M0 0h24v24H0V0z"
fill="transparent"/>
<path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
</span>
<span class="metadatum-name">
<h3>{{ metadataSection.name }}</h3>
</span>
<span
v-if="metadataSection.id != undefined"
class="label-details"
:class="{ 'has-text-weight-bold': metadataSection.id === 'default_section' }">
<span
v-if="metadataSection.id === 'default_section'"
v-tooltip="{
content: $i18n.get('label_required'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}">
*&nbsp;({{ $i18n.get('label_default_section') }})
</span>
<span
v-if="metadataSection.status === 'private'"
class="icon"
v-tooltip="{
content: $i18n.get('status_private'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}">
<i class="tainacan-icon tainacan-icon-private"/>
</span>
</span>
<span
class="loading-spinner"
v-if="metadataSection.id == undefined"/>
<span
class="controls"
v-if="metadataSection.id !== undefined">
<b-switch
:disabled="isUpdatingMetadataSectionsOrder"
size="is-small"
:value="metadataSection.enabled"
@input="onChangeEnableSection($event, sectionIndex)"/>
<a
v-if="metadataSection.current_user_can_edit"
:style="{ visibility:
metadataSection.collection_id != collectionId
? 'hidden' : 'visible'
}"
@click.prevent="toggleMetadataSectionEdition(metadataSection)">
<span
v-tooltip="{
content: $i18n.get('edit'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
</span>
</a>
<a
v-if="metadataSection.current_user_can_delete"
:disabled="metadataSection.metadata_object_list.length"
:style="{ visibility: metadataSection.collection_id != collectionId || metadataSection.id === 'default_section' || metadataSection.metadata_object_list.length ? 'hidden' : 'visible' }"
@click.prevent="removeMetadataSection(metadataSection)">
<span
v-tooltip="{
content: $i18n.get('delete'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
</span>
</a>
</span>
</div>
</div>
<section
v-if="metadataSection.metadata_object_list && metadataSection.metadata_object_list.length <= 0"
class="field is-grouped-centered section">
<div class="content has-text-gray has-text-centered">
<p>
<span class="icon is-large">
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/>
</span>
</p>
<p>{{ $i18n.get('info_there_is_no_metadatum' ) }}</p>
<p>{{ $i18n.get('info_create_metadata' ) }}</p>
</div>
</section>
<b-loading v-model:active="isUpdatingMetadatum"/>
<!-- The Metadata list, inside each metadata section -->
<template v-if="metadataSection.metadata_object_list && Array.isArray(metadataSection.metadata_object_list)">
<draggable
v-model:value="metadataSection.metadata_object_list"
class="active-metadata-area"
@change="handleChange($event, sectionIndex)"
:group="{ name:'metadata', pull: [ 'metadata' ], put: [ 'metadata' ] }"
:sort="(openedMetadatumId == '' || openedMetadatumId == undefined)"
:handle="'.handle'"
ghost-class="sortable-ghost"
chosen-class="sortable-chosen"
filter=".not-sortable-item"
:prevent-on-filter="false"
:animation="250">
<div <div
v-for="(metadatum, index) in metadataSection.metadata_object_list.filter((meta) => meta != undefined && meta.parent == 0)" :ref="'metadata-section-handler-' + metadataSection.id"
:key="metadatum.id" class="handle">
v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)"> <span class="sorting-buttons">
<div <button
class="active-metadatum-item" :disabled="sectionIndex == 0"
:class="{ class="link-button"
'is-compact-item': !isCollapseOpen(metadatum.id), @click="moveMetadataSectionUpViaButon(sectionIndex)">
'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied || isUpdatingMetadatum, <span class="icon">
'not-focusable-item': openedMetadatumId == metadatum.id, <i class="tainacan-icon tainacan-icon-previous tainacan-icon-rotate-90" />
'disabled-metadatum': metadataSection.enabled == false || metadatum.enabled == false,
'inherited-metadatum': metadatum.inherited,
'child-metadatum': metadatum.parent > 0
}">
<div
:ref="'metadatum-handler-' + metadatum.id"
class="handle">
<span class="sorting-buttons">
<button
:disabled="index == 0"
class="link-button"
@click="moveMetadatumUpViaButton(index, sectionIndex)"
:aria-label="$i18n.get('label_move_up')">
<span class="icon">
<i class="tainacan-icon tainacan-icon-previous tainacan-icon-rotate-90" />
</span>
</button>
<button
:disabled="index == metadataSection.metadata_object_list.filter((meta) => meta != undefined && meta.parent == 0).length - 1"
class="link-button"
@click="moveMetadatumDownViaButton(index, sectionIndex)"
:aria-label="$i18n.get('label_move_down')">
<span class="icon">
<i class="tainacan-icon tainacan-icon-next tainacan-icon-rotate-90" />
</span>
</button>
</span> </span>
</button>
<button
:disabled="sectionIndex == activeMetadataSectionsList.length - 1"
class="link-button"
@click="moveMetadataSectionDownViaButton(sectionIndex)">
<span class="icon">
<i class="tainacan-icon tainacan-icon-next tainacan-icon-rotate-90" />
</span>
</button>
</span>
<span
:style="{ opacity: !(metadataSection.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || openedMetadataSectionId != '' || isUpdatingMetadataSectionsOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied) ? '1.0' : '0.0' }"
v-tooltip="{
content: metadataSection.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || openedMetadataSectionId != '' || isUpdatingMetadataSectionsOrder || isUpdatingMetadatum ? $i18n.get('info_not_allowed_change_order_metadata_sections') : $i18n.get('instruction_drag_and_drop_metadata_sections_sort'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}"
class="icon grip-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="currentColor">
<path
d="M0 0h24v24H0V0z"
fill="transparent"/>
<path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
</span>
<span class="metadatum-name">
<h3>{{ metadataSection.name }}</h3>
</span>
<span
v-if="metadataSection.id != undefined"
class="label-details"
:class="{ 'has-text-weight-bold': metadataSection.id === 'default_section' }">
<span
v-if="metadataSection.id === 'default_section'"
v-tooltip="{
content: $i18n.get('label_required'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}">
*&nbsp;({{ $i18n.get('label_default_section') }})
</span>
<span
v-if="metadataSection.status === 'private'"
class="icon"
v-tooltip="{
content: $i18n.get('status_private'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}">
<i class="tainacan-icon tainacan-icon-private"/>
</span>
</span>
<span
class="loading-spinner"
v-if="metadataSection.id == undefined"/>
<span
class="controls"
v-if="metadataSection.id !== undefined">
<b-switch
:disabled="isUpdatingMetadataSectionsOrder"
size="is-small"
:model-value="metadataSection.enabled"
@update:model-value="onChangeEnableSection($event, sectionIndex)"/>
<a
v-if="metadataSection.current_user_can_edit"
:style="{ visibility:
metadataSection.collection_id != collectionId
? 'hidden' : 'visible'
}"
@click.prevent="toggleMetadataSectionEdition(metadataSection)">
<span <span
:style="{ opacity: !(metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied) ? '1.0' : '0.0' }"
v-tooltip="{ v-tooltip="{
content: metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || isUpdatingMetadatum ? $i18n.get('info_not_allowed_change_order_metadata') : $i18n.get('instruction_drag_and_drop_metadatum_sort'), content: $i18n.get('edit'),
autoHide: true, autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'], popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start' placement: 'auto-start'
}" }"
class="icon grip-icon"> class="icon">
<svg <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="currentColor">
<path
d="M0 0h24v24H0V0z"
fill="transparent"/>
<path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
</span> </span>
</a>
<a
v-if="metadataSection.current_user_can_delete"
:disabled="metadataSection.metadata_object_list.length"
:style="{ visibility: metadataSection.collection_id != collectionId || metadataSection.id === 'default_section' || metadataSection.metadata_object_list.length ? 'hidden' : 'visible' }"
@click.prevent="removeMetadataSection(metadataSection)">
<span <span
v-tooltip="{ v-tooltip="{
content: $i18n.get('label_view_metadata_details'), content: $i18n.get('delete'),
autoHide: true, autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'], popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start' placement: 'auto-start'
}" }"
@click="Object.assign(collapses, { [metadatum.id]: !isCollapseOpen(metadatum.id) })" class="icon">
class="gray-icon icon" <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
:style="{ cursor: 'pointer', opacity: openedMetadatumId != metadatum.id ? '1.0' : '0.0' }">
<i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
</span> </span>
</a>
<span class="metadatum-name"> </span>
{{ metadatum.name }}
</span>
<span
v-if="metadatum.id != undefined && metadatum.metadata_type_object"
class="label-details"
:class="{ 'has-text-weight-bold': metadatum.metadata_type_object.core }">
<span
v-if="metadatum.required === 'yes'"
v-tooltip="{
content: $i18n.get('label_required'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}">
*&nbsp;
</span>
({{ metadatum.metadata_type_object.name }})
<span
v-if="metadatum.status === 'private'"
class="icon"
v-tooltip="{
content: $i18n.get('status_private'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}">
<i class="tainacan-icon tainacan-icon-private"/>
</span>
<span
v-tooltip="{
content: (metadatum.collection_id == 'default') ? $i18n.get('label_repository_metadatum') : $i18n.get('label_collection_metadatum'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}"
class="icon icon-level-identifier">
<i
v-if="metadatum.collection_id == 'default'"
:class="{
'has-text-blue5': metadatum.enabled,
'has-text-gray3': !metadatum.enabled
}"
class="tainacan-icon tainacan-icon-repository" />
<i
v-else
:class="{
'has-text-turquoise5': metadatum.enabled,
'has-text-gray3': !metadatum.enabled
}"
class="tainacan-icon tainacan-icon-collection" />
</span>
</span>
<span
class="loading-spinner"
v-if="metadatum.id == undefined || isUpdatingMetadatum"/>
<span
class="controls"
v-if="metadatum.id !== undefined">
<b-switch
:style="{ visibility: !metadataSection.enabled ? 'hidden' : 'visible' }"
:disabled="isUpdatingMetadataOrder || !metadataSection.enabled"
size="is-small"
:value="metadatum.enabled"
@input="onChangeEnable($event, index, sectionIndex)"/>
<a
v-if="metadatum.current_user_can_edit"
:style="{ visibility:
metadatum.collection_id != collectionId
? 'hidden' : 'visible'
}"
@click.prevent="toggleMetadatumEdition(metadatum)">
<span
v-tooltip="{
content: $i18n.get('edit'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
</span>
</a>
<a
v-if="metadatum.current_user_can_delete"
:style="{ visibility: metadatum.collection_id != collectionId || metadatum.metadata_type_object.core ? 'hidden' : 'visible' }"
@click.prevent="removeMetadatum(metadatum, sectionIndex)">
<span
v-tooltip="{
content: $i18n.get('delete'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
</span>
</a>
</span>
</div>
<transition name="form-collapse">
<metadatum-details
v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id"
:metadatum="metadatum" />
</transition>
</div>
<!-- Child metadata list, inside each compound metadata -->
<child-metadata-list
v-if="metadatum.metadata_type_object && metadatum.metadata_type_object.component == 'tainacan-compound'"
:parent="metadatum"
:metadata-name-filter-string="metadataNameFilterString"
:metadata-type-filter-options="metadataTypeFilterOptions"
:has-some-metadata-type-filter-applied="hasSomeMetadataTypeFilterApplied"
:is-parent-multiple="metadatum.multiple == 'yes'"
:is-repository-level="false"
:collapse-all="collapseAll"
:section-id="metadataSection.id" />
<!-- Metadata edition form, for each metadata -->
<b-modal
@close="onEditionCanceled()"
:active="openedMetadatumId == metadatum.id"
trap-focus
aria-modal
aria-role="dialog"
custom-class="tainacan-modal"
:close-button-aria-label="$i18n.get('close')">
<metadatum-edition-form
:collection-id="collectionId"
:original-metadatum="metadatum"
:is-repository-level="false"
@onEditionFinished="onEditionFinished()"
@onEditionCanceled="onEditionCanceled()"
:index="index" />
</b-modal>
</div> </div>
</draggable><!-- End of .active-metadata-area --> </div>
</template>
<!-- Metadata Section edition form, for each metadata section --> <section
<b-modal v-if="metadataSection.metadata_object_list && metadataSection.metadata_object_list.length <= 0"
@close="onSectionEditionCanceled()" class="field is-grouped-centered section">
:active="openedMetadataSectionId == metadataSection.id" <div class="content has-text-gray has-text-centered">
trap-focus <p>
aria-modal <span class="icon is-large">
aria-role="dialog" <i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/>
custom-class="tainacan-modal" </span>
:close-button-aria-label="$i18n.get('close')"> </p>
<metadata-section-edition-form <p>{{ $i18n.get('info_there_is_no_metadatum' ) }}</p>
:collection-id="collectionId" <p>{{ $i18n.get('info_create_metadata' ) }}</p>
:original-metadata-section="metadataSection" </div>
@onEditionFinished="onSectionEditionFinished()" </section>
@onEditionCanceled="onSectionEditionCanceled()"
:index="sectionIndex" />
</b-modal>
</div> <b-loading v-model="isUpdatingMetadatum"/>
</draggable> <!-- End of .active-metadata-sections-area -->
<!-- The Metadata list, inside each metadata section -->
<template v-if="metadataSection.metadata_object_list && Array.isArray(metadataSection.metadata_object_list)">
<sortable
:list="metadataSection.metadata_object_list"
item-key="id"
class="active-metadata-area"
@update="handleChange($event, sectionIndex)"
@add="handleChange($event, sectionIndex)"
@remove="handleChange($event, sectionIndex)"
:options="{
group: {
name:'metadata',
pull: [ 'metadata' ],
put: [ 'metadata' ]
},
sort: (openedMetadatumId == '' || openedMetadatumId == undefined) && (openedMetadataSectionId == '' || openedMetadataSectionId == undefined),
handle: '.handle',
ghostClass: 'sortable-ghost',
chosenClass: 'sortable-chosen',
filter: '.not-sortable-item',
preventOnFilter: false,
animation: 250
}">
<template #item="{ element: metadatum, index }">
<div
v-if="metadatum != undefined && metadatum.parent == 0"
v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)"
class="active-metadatum-item"
:class="{
'is-compact-item': !isCollapseOpen(metadatum.id),
'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied || isUpdatingMetadatum,
'not-focusable-item': openedMetadatumId == metadatum.id,
'disabled-metadatum': metadataSection.enabled == false || metadatum.enabled == false,
'inherited-metadatum': metadatum.inherited,
'child-metadatum': metadatum.parent > 0
}">
<div
:ref="'metadatum-handler-' + metadatum.id"
class="handle">
<span class="sorting-buttons">
<button
:disabled="index == 0"
class="link-button"
@click="moveMetadatumUpViaButton(index, sectionIndex)"
:aria-label="$i18n.get('label_move_up')">
<span class="icon">
<i class="tainacan-icon tainacan-icon-previous tainacan-icon-rotate-90" />
</span>
</button>
<button
:disabled="index == metadataSection.metadata_object_list.filter((meta) => meta != undefined && meta.parent == 0).length - 1"
class="link-button"
@click="moveMetadatumDownViaButton(index, sectionIndex)"
:aria-label="$i18n.get('label_move_down')">
<span class="icon">
<i class="tainacan-icon tainacan-icon-next tainacan-icon-rotate-90" />
</span>
</button>
</span>
<span
:style="{ opacity: !(metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied) ? '1.0' : '0.0' }"
v-tooltip="{
content: metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || isUpdatingMetadatum ? $i18n.get('info_not_allowed_change_order_metadata') : $i18n.get('instruction_drag_and_drop_metadatum_sort'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}"
class="icon grip-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="currentColor">
<path
d="M0 0h24v24H0V0z"
fill="transparent"/>
<path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
</span>
<span
v-tooltip="{
content: $i18n.get('label_view_metadata_details'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}"
@click="Object.assign(collapses, { [metadatum.id]: !isCollapseOpen(metadatum.id) })"
class="gray-icon icon"
:style="{ cursor: 'pointer', opacity: openedMetadatumId != metadatum.id ? '1.0' : '0.0' }">
<i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
</span>
<span class="metadatum-name">
{{ metadatum.name }}
</span>
<span
v-if="metadatum.id != undefined && metadatum.metadata_type_object"
class="label-details"
:class="{ 'has-text-weight-bold': metadatum.metadata_type_object.core }">
<span
v-if="metadatum.required === 'yes'"
v-tooltip="{
content: $i18n.get('label_required'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}">
*&nbsp;
</span>
({{ metadatum.metadata_type_object.name }})
<span
v-if="metadatum.status === 'private'"
class="icon"
v-tooltip="{
content: $i18n.get('status_private'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}">
<i class="tainacan-icon tainacan-icon-private"/>
</span>
<span
v-tooltip="{
content: (metadatum.collection_id == 'default') ? $i18n.get('label_repository_metadatum') : $i18n.get('label_collection_metadatum'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}"
class="icon icon-level-identifier">
<i
v-if="metadatum.collection_id == 'default'"
:class="{
'has-text-blue5': metadatum.enabled,
'has-text-gray3': !metadatum.enabled
}"
class="tainacan-icon tainacan-icon-repository" />
<i
v-else
:class="{
'has-text-turquoise5': metadatum.enabled,
'has-text-gray3': !metadatum.enabled
}"
class="tainacan-icon tainacan-icon-collection" />
</span>
</span>
<span
class="loading-spinner"
v-if="metadatum.id == undefined || isUpdatingMetadatum"/>
<span
class="controls"
v-if="metadatum.id !== undefined">
<b-switch
:style="{ visibility: !metadataSection.enabled ? 'hidden' : 'visible' }"
:disabled="isUpdatingMetadataOrder || !metadataSection.enabled"
size="is-small"
:model-value="metadatum.enabled"
@update:model-value="onChangeEnable($event, index, sectionIndex)"/>
<a
v-if="metadatum.current_user_can_edit"
:style="{ visibility:
metadatum.collection_id != collectionId
? 'hidden' : 'visible'
}"
@click.prevent="toggleMetadatumEdition(metadatum)">
<span
v-tooltip="{
content: $i18n.get('edit'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
</span>
</a>
<a
v-if="metadatum.current_user_can_delete"
:style="{ visibility: metadatum.collection_id != collectionId || metadatum.metadata_type_object.core ? 'hidden' : 'visible' }"
@click.prevent="removeMetadatum(metadatum, sectionIndex)">
<span
v-tooltip="{
content: $i18n.get('delete'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
</span>
</a>
</span>
</div>
<transition name="form-collapse">
<metadatum-details
v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id"
:metadatum="metadatum" />
</transition>
</div>
<!-- Child metadata list, inside each compound metadata -->
<child-metadata-list
v-if="metadatum.metadata_type_object && metadatum.metadata_type_object.component == 'tainacan-compound'"
:parent="metadatum"
:metadata-name-filter-string="metadataNameFilterString"
:metadata-type-filter-options="metadataTypeFilterOptions"
:has-some-metadata-type-filter-applied="hasSomeMetadataTypeFilterApplied"
:is-parent-multiple="metadatum.multiple == 'yes'"
:is-repository-level="false"
:collapse-all="collapseAll"
:section-id="metadataSection.id" />
<!-- Metadata edition form, for each metadata -->
<b-modal
@close="onEditionCanceled()"
:model-value="openedMetadatumId == metadatum.id"
trap-focus
aria-modal
aria-role="dialog"
custom-class="tainacan-modal"
:close-button-aria-label="$i18n.get('close')">
<metadatum-edition-form
:collection-id="collectionId"
:original-metadatum="metadatum"
:is-repository-level="false"
@onEditionFinished="onEditionFinished()"
@onEditionCanceled="onEditionCanceled()"
:index="index" />
</b-modal>
</template>
</sortable><!-- End of .active-metadata-area -->
</template>
<!-- Metadata Section edition form, for each metadata section -->
<b-modal
@close="onSectionEditionCanceled()"
:model-value="openedMetadataSectionId == metadataSection.id"
trap-focus
aria-modal
aria-role="dialog"
custom-class="tainacan-modal"
:close-button-aria-label="$i18n.get('close')">
<metadata-section-edition-form
:collection-id="collectionId"
:original-metadata-section="metadataSection"
@onEditionFinished="onSectionEditionFinished()"
@onEditionCanceled="onSectionEditionCanceled()"
:index="sectionIndex" />
</b-modal>
</div>
</template>
</sortable> <!-- End of .active-metadata-sections-area -->
</div> <!-- End of .columns --> </div> <!-- End of .columns -->
</template> </template>
@ -503,13 +521,16 @@ import ChildMetadataList from '../../components/metadata-types/compound/child-me
import CustomDialog from '../../components/other/custom-dialog.vue'; import CustomDialog from '../../components/other/custom-dialog.vue';
import { mapGetters, mapActions } from 'vuex'; import { mapGetters, mapActions } from 'vuex';
import { Sortable } from "sortablejs-vue3";
export default { export default {
name: 'CollectionMetadataList', name: 'CollectionMetadataList',
components: { components: {
MetadatumEditionForm, MetadatumEditionForm,
MetadataSectionEditionForm, MetadataSectionEditionForm,
ChildMetadataList, ChildMetadataList,
MetadatumDetails MetadatumDetails,
Sortable
}, },
props: { props: {
metadataTypeFilterOptions: Array metadataTypeFilterOptions: Array
@ -582,8 +603,8 @@ export default {
mounted() { mounted() {
this.cleanMetadataSections(); this.cleanMetadataSections();
this.$eventBusMetadataList.$emitter.on('addMetadatumViaButton', this.addMetadatumViaButton); this.$eventBusMetadataList.on('addMetadatumViaButton', this.addMetadatumViaButton);
this.$eventBusMetadataList.$emitter.on('addMetadataSectionViaButton', this.addMetadataSectionViaButton); this.$eventBusMetadataList.on('addMetadataSectionViaButton', this.addMetadataSectionViaButton);
this.collectionId = this.$route.params.collectionId; this.collectionId = this.$route.params.collectionId;
this.isLoadingMetadataSections = true; this.isLoadingMetadataSections = true;
@ -601,8 +622,8 @@ export default {
if (this.metadataSearchCancel != undefined) if (this.metadataSearchCancel != undefined)
this.metadataSearchCancel.cancel('Metadata search Canceled.'); this.metadataSearchCancel.cancel('Metadata search Canceled.');
this.$eventBusMetadataList.$emitter.off('addMetadatumViaButton', this.addMetadatumViaButton); this.$eventBusMetadataList.off('addMetadatumViaButton', this.addMetadatumViaButton);
this.$eventBusMetadataList.$emitter.off('addMetadataSectionViaButton', this.addMetadataSectionViaButton); this.$eventBusMetadataList.off('addMetadataSectionViaButton', this.addMetadataSectionViaButton);
}, },
methods: { methods: {
...mapActions('metadata', [ ...mapActions('metadata', [
@ -624,33 +645,60 @@ export default {
...mapGetters('metadata',[ ...mapGetters('metadata',[
'getMetadataSections' 'getMetadataSections'
]), ]),
handleSectionChange(event) { handleSectionChange($event) {
if (event.added) switch ( $event.type ) {
this.addNewMetadataSection(event.added.newIndex); case 'add':
else if (event.removed) this.addNewMetadataSection($event.newIndex);
this.removeMetadataSection(event.removed.element); break;
else if (event.moved) case 'remove':
this.updateMetadataSectionsOrder(); this.removeMetadataSection(this.activeFiltersList[$event.oldIndex]);
}, break;
handleChange(event, sectionIndex) { case 'update': {
if (event.added) { const newMetadataSectionsList = JSON.parse(JSON.stringify(this.activeMetadataSectionsList));
if (!event.added.element.id) const element = newMetadataSectionsList.splice($event.oldIndex, 1)[0];
this.addNewMetadatum(event.added.element, event.added.newIndex, sectionIndex); newMetadataSectionsList.splice($event.newIndex, 0, element);
else {
this.updateMetadatum({ this.updateMetadataSections(newMetadataSectionsList);
collectionId: this.collectionId,
metadatumId: event.added.element.id, this.updateMetadataSectionsOrder();
isRepositoryLevel: event.added.element.collection_id === 'default',
index: event.added.newIndex, break;
options: {},
includeOptionsAsHtml: true,
sectionId: this.activeMetadataSectionsList[sectionIndex].id
});
this.updateMetadataSectionsOrder(sectionIndex);
} }
} }
else if (event.moved) },
this.updateMetadataOrder(sectionIndex); handleChange($event, sectionIndex) {
switch ( $event.type ) {
case 'add':
if ( !this.activeMetadataSectionsList[sectionIndex].metadata_object_list[$event.oldIndex]['id'] )
this.addNewMetadatum(this.activeMetadataSectionsList[sectionIndex].metadata_object_list[$event.oldIndex], $event.newIndex, sectionIndex);
else {
this.updateMetadatum({
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 newSectionMetadataObjectList = JSON.parse(JSON.stringify(this.activeMetadataSectionsList[sectionIndex].metadata_object_list));
const element = newSectionMetadataObjectList.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);
this.updateMetadataSectionsOrder(sectionIndex);
}
break;
case 'update':
this.updateMetadataOrder(sectionIndex);
break;
}
}, },
updateMetadataOrder(sectionIndex) { updateMetadataOrder(sectionIndex) {
let metadataOrder = []; let metadataOrder = [];

21
src/views/admin/components/lists/collections-list.vue
View File

@ -9,7 +9,7 @@
<span> <span>
<b-checkbox <b-checkbox
@click="selectAllCollectionsOnPage()" @click="selectAllCollectionsOnPage()"
:value="allCollectionsOnPageSelected">{{ $i18n.get('label_select_all_collections_page') }}</b-checkbox> :model-value="allCollectionsOnPageSelected">{{ $i18n.get('label_select_all_collections_page') }}</b-checkbox>
</span> </span>
</div> </div>
<div class="field is-pulled-right"> <div class="field is-pulled-right">
@ -19,15 +19,14 @@
id="bulk-actions-dropdown" id="bulk-actions-dropdown"
aria-role="list" aria-role="list"
trap-focus> trap-focus>
<button <template #trigger>
class="button is-white" <button class="button is-white">
slot="trigger"> <span>{{ $i18n.get('label_bulk_actions') }}</span>
<span>{{ $i18n.get('label_bulk_actions') }}</span> <span class="icon">
<span class="icon"> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/> </span>
</span> </button>
</button> </template>
<b-dropdown-item <b-dropdown-item
id="item-delete-selected-items" id="item-delete-selected-items"
@click="deleteSelectedCollections()" @click="deleteSelectedCollections()"
@ -143,7 +142,7 @@
v-if="$userCaps.hasCapability('tnc_rep_delete_collections')" v-if="$userCaps.hasCapability('tnc_rep_delete_collections')"
:class="{ 'is-selecting': isSelectingCollections }" :class="{ 'is-selecting': isSelectingCollections }"
class="checkbox-cell"> class="checkbox-cell">
<b-checkbox v-model:value="selectedCollections[index]"/> <b-checkbox v-model="selectedCollections[index]"/>
</td> </td>
<!-- Status icon --> <!-- Status icon -->
<td <td

41
src/views/admin/components/lists/items-list.vue
View File

@ -11,7 +11,7 @@
<span> <span>
<b-checkbox <b-checkbox
@click.prevent="selectAllItemsOnPage()" @click.prevent="selectAllItemsOnPage()"
:value="allItemsOnPageSelected"> :model-value="allItemsOnPageSelected">
{{ $i18n.get('label_select_all_items_page') }} {{ $i18n.get('label_select_all_items_page') }}
</b-checkbox> </b-checkbox>
</span> </span>
@ -20,7 +20,7 @@
style="margin-left: 10px" style="margin-left: 10px"
v-if="totalPages > 1 && allItemsOnPageSelected && Array.isArray(items) && items.length > 1"> v-if="totalPages > 1 && allItemsOnPageSelected && Array.isArray(items) && items.length > 1">
<b-checkbox <b-checkbox
v-model:value="isAllItemsSelected"> v-model="isAllItemsSelected">
{{ $i18n.getWithVariables('label_select_all_%s_items', [totalItems]) }} {{ $i18n.getWithVariables('label_select_all_%s_items', [totalItems]) }}
</b-checkbox> </b-checkbox>
</span> </span>
@ -61,15 +61,14 @@
id="bulk-actions-dropdown" id="bulk-actions-dropdown"
aria-role="list" aria-role="list"
trap-focus> trap-focus>
<button <template #trigger>
class="button is-white" <button class="button is-white">
slot="trigger"> <span>{{ $i18n.get('label_actions_for_the_selection') }}</span>
<span>{{ $i18n.get('label_actions_for_the_selection') }}</span> <span class="icon">
<span class="icon"> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/> </span>
</span> </button>
</button> </template>
<b-dropdown-item <b-dropdown-item
v-if="!isAllItemsSelected && selectedItems.length" v-if="!isAllItemsSelected && selectedItems.length"
@click="filterBySelectedItems()" @click="filterBySelectedItems()"
@ -183,15 +182,15 @@
class="grid-item-checkbox"> class="grid-item-checkbox">
<b-checkbox <b-checkbox
v-if="!$adminOptions.itemsSingleSelectionMode" v-if="!$adminOptions.itemsSingleSelectionMode"
:value="getSelectedItemChecked(item.id)" :model-value="getSelectedItemChecked(item.id)"
@input="setSelectedItemChecked(item.id)"> @update:model-value="setSelectedItemChecked(item.id)">
<span class="sr-only">{{ $i18n.get('label_select_item') }}</span> <span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
</b-checkbox> </b-checkbox>
<b-radio <b-radio
v-else v-else
name="item-single-selection" name="item-single-selection"
:native-value="item.id" :native-value="item.id"
v-model:value="singleItemSelection" v-model="singleItemSelection"
:aria-label="$i18n.get('label_select_item')"> :aria-label="$i18n.get('label_select_item')">
<span class="sr-only">{{ $i18n.get('label_select_item') }}</span> <span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
</b-radio> </b-radio>
@ -475,15 +474,15 @@
class="card-checkbox"> class="card-checkbox">
<b-checkbox <b-checkbox
v-if="!$adminOptions.itemsSingleSelectionMode" v-if="!$adminOptions.itemsSingleSelectionMode"
:value="getSelectedItemChecked(item.id)" :model-value="getSelectedItemChecked(item.id)"
@input="setSelectedItemChecked(item.id)"> @update:model-value="setSelectedItemChecked(item.id)">
<span class="sr-only">{{ $i18n.get('label_select_item') }}</span> <span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
</b-checkbox> </b-checkbox>
<b-radio <b-radio
v-else v-else
name="item-single-selection" name="item-single-selection"
:native-value="item.id" :native-value="item.id"
v-model:value="singleItemSelection"> v-model="singleItemSelection">
<span class="sr-only">{{ $i18n.get('label_select_item') }}</span> <span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
</b-radio> </b-radio>
</div> </div>
@ -926,15 +925,15 @@
class="checkbox-cell"> class="checkbox-cell">
<b-checkbox <b-checkbox
v-if="!$adminOptions.itemsSingleSelectionMode" v-if="!$adminOptions.itemsSingleSelectionMode"
:value="getSelectedItemChecked(item.id)" :model-value="getSelectedItemChecked(item.id)"
@input="setSelectedItemChecked(item.id)"> @update:model-value="setSelectedItemChecked(item.id)">
<span class="sr-only">{{ $i18n.get('label_select_item') }}</span> <span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
</b-checkbox> </b-checkbox>
<b-radio <b-radio
v-else v-else
name="item-single-selection" name="item-single-selection"
:native-value="item.id" :native-value="item.id"
v-model:value="singleItemSelection"> v-model="singleItemSelection">
<span class="sr-only">{{ $i18n.get('label_select_item') }}</span> <span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
</b-radio> </b-radio>
</td> </td>
@ -1588,7 +1587,7 @@
<b-select <b-select
:placeholder="$i18n.get('instruction_select_geocoordinate_metadatum')" :placeholder="$i18n.get('instruction_select_geocoordinate_metadatum')"
id="tainacan-select-geocoordinate-metatum" id="tainacan-select-geocoordinate-metatum"
v-model:value="selectedGeocoordinateMetadatumId"> v-model="selectedGeocoordinateMetadatumId">
<option <option
v-for="(geocoordinateMetadatum, geocoordinateMetadatumId) in geocoordinateMetadata" v-for="(geocoordinateMetadatum, geocoordinateMetadatumId) in geocoordinateMetadata"
:key="geocoordinateMetadatum.id" :key="geocoordinateMetadatum.id"

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

@ -3,11 +3,11 @@
<b-loading <b-loading
:can-cancel="false" :can-cancel="false"
:is-full-page="false" :is-full-page="false"
v-model:active="isLoadingMetadatumMappers"/> v-model="isLoadingMetadatumMappers"/>
<b-loading <b-loading
:can-cancel="false" :can-cancel="false"
:is-full-page="false" :is-full-page="false"
v-model:active="isLoadingMetadata"/> v-model="isLoadingMetadata"/>
<b-field> <b-field>
<p style="line-height: 2em;">{{ $i18n.get('info_metadata_mapper_helper') }}</p> <p style="line-height: 2em;">{{ $i18n.get('info_metadata_mapper_helper') }}</p>
@ -15,8 +15,8 @@
id="mappers-options-dropdown" id="mappers-options-dropdown"
size="is-small" size="is-small"
:placeholder="$i18n.get('instruction_select_a_mapper')" :placeholder="$i18n.get('instruction_select_a_mapper')"
:value="mapper" :model-value="mapper"
@input="onSelectMetadataMapper($event)"> @update:model-value="onSelectMetadataMapper($event)">
<option <option
v-for="metadatumMapper in metadatumMappers" v-for="metadatumMapper in metadatumMappers"
:key="metadatumMapper.slug" :key="metadatumMapper.slug"
@ -79,8 +79,8 @@
<b-select <b-select
:name="'mappers-metadatum-select-' + mapperMetadatum.slug" :name="'mappers-metadatum-select-' + mapperMetadatum.slug"
v-model:value="mapperMetadatum.selected" v-model="mapperMetadatum.selected"
@input="onSelectMetadatumForMapperMetadata"> @update:model-value="onSelectMetadatumForMapperMetadata">
<option <option
value=""> value="">
{{ $i18n.get('instruction_select_a_metadatum') }} {{ $i18n.get('instruction_select_a_metadatum') }}
@ -154,7 +154,7 @@
<b-modal <b-modal
@close="onCancelNewMetadataMapperMetadata" @close="onCancelNewMetadataMapperMetadata"
v-model:active="isMapperMetadataCreating" v-model="isMapperMetadataCreating"
trap-focus trap-focus
aria-modal aria-modal
aria-role="dialog" aria-role="dialog"
@ -172,7 +172,7 @@
</div> </div>
<b-field> <b-field>
<b-input <b-input
v-model:value="newMetadataLabel" v-model="newMetadataLabel"
required required
:placeholder="$i18n.get('label_name')"/> :placeholder="$i18n.get('label_name')"/>
</b-field> </b-field>
@ -181,7 +181,7 @@
placeholder="URI" placeholder="URI"
type="url" type="url"
required required
v-model:value="newMetadataUri"/> v-model="newMetadataUri"/>
</b-field> </b-field>
<div class="field is-grouped form-submit"> <div class="field is-grouped form-submit">
<div class="control"> <div class="control">

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

@ -3,127 +3,147 @@
v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_metadata')) || !isRepositoryLevel" v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_metadata')) || !isRepositoryLevel"
class="column available-metadata-types-area" > class="column available-metadata-types-area" >
<b-loading v-model:active="isLoadingMetadataTypes"/> <b-loading v-model="isLoadingMetadataTypes"/>
<div class="field"> <div class="field">
<h3 class="label">{{ $i18n.get('label_available_metadata_types') }}</h3> <h3 class="label">{{ $i18n.get('label_available_metadata_types') }}</h3>
<draggable <sortable
v-model:value="availableMetadatumList" :list="availableMetadatumList"
:sort="false" item-key="id"
:group="{ name:'metadata', pull: 'clone', put: false, revertClone: true }" :options="{
drag-class="sortable-drag"> group: {
<div name: 'metadata',
:id="metadatum.component" pull: 'clone',
@click.prevent.once="addMetadatumViaButton(metadatum)" put: false,
class="available-metadatum-item" revertClone: true
:class="{ 'highlighted-metadatum' : highlightedMetadatum == metadatum.name, 'inherited-metadatum': metadatum.inherited || isRepositoryLevel }" },
v-for="(metadatum, index) in availableMetadatumList" sort: false,
:key="index"> dragClass: 'sortable-drag'
<span }">
v-tooltip="{ <template #item="{ element: metadatum }">
content: $i18n.get('instruction_click_or_drag_metadatum_create'), <div
autoHide: true, :id="metadatum.component"
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''], @click.prevent.once="addMetadatumViaButton(metadatum)"
placement: 'auto-start' class="available-metadatum-item"
}" :class="{ 'highlighted-metadatum' : highlightedMetadatum == metadatum.name, 'inherited-metadatum': metadatum.inherited || isRepositoryLevel }">
class="icon grip-icon">
<!-- <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/> -->
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="currentColor">
<path
d="M0 0h24v24H0V0z"
fill="transparent"/>
<path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
</span>
<span class="metadatum-name">
{{ metadatum.name }}
<span <span
v-tooltip="{ v-tooltip="{
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '', 'metadata-type-preview-tooltip'], content: $i18n.get('instruction_click_or_drag_metadatum_create'),
content: getPreviewTemplateContent(metadatum), autoHide: true,
html: true, popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
delay: { placement: 'auto-start'
shown: 0,
hide: 100,
},
placement: 'top',
}" }"
class="icon preview-help-icon has-text-secondary"> class="icon grip-icon">
<i class="tainacan-icon tainacan-icon-help"/> <!-- <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/> -->
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="currentColor">
<path
d="M0 0h24v24H0V0z"
fill="transparent"/>
<path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
</span> </span>
</span> <span class="metadatum-name">
<span {{ metadatum.name }}
class="loading-spinner" <span
v-if="highlightedMetadatum == metadatum.name"/> v-tooltip="{
</div> popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '', 'metadata-type-preview-tooltip'],
</draggable> content: getPreviewTemplateContent(metadatum),
html: true,
delay: {
shown: 0,
hide: 100,
},
placement: 'top',
}"
class="icon preview-help-icon has-text-secondary">
<i class="tainacan-icon tainacan-icon-help"/>
</span>
</span>
<span
class="loading-spinner"
v-if="highlightedMetadatum == metadatum.name"/>
</div>
</template>
</sortable>
<draggable <sortable
v-if="!isRepositoryLevel" v-if="!isRepositoryLevel"
v-model:value="availableMetadataSectionsList" :list="availableMetadataSectionsList"
:sort="false" item-key="id"
:group="{ name:'metadata-sections', pull: 'clone', put: false, revertClone: true }" :options="{
drag-class="sortable-drag"> group: {
<div name: 'metadata-sections',
:id="metadataSection.id" pull: 'clone',
@click.prevent="addMetadataSectionViaButton()" put: false,
class="available-metadata-section-item" revertClone: true
v-for="(metadataSection, index) in availableMetadataSectionsList" },
:key="index"> sort: false,
<span dragClass: 'sortable-drag'
v-tooltip="{ }">
content: $i18n.get('instruction_click_or_drag_metadatum_create'), <template #item="{ element: metadataSection }">
autoHide: true, <div
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''], :id="metadataSection.id"
placement: 'auto-start' @click.prevent="addMetadataSectionViaButton()"
}" class="available-metadata-section-item">
class="icon grip-icon">
<!-- <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/> -->
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="currentColor">
<path
d="M0 0h24v24H0V0z"
fill="transparent"/>
<path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
</span>
<span class="metadatum-name">
{{ metadataSection.label }}
<span <span
v-tooltip="{ v-tooltip="{
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '', 'metadata-type-preview-tooltip'], content: $i18n.get('instruction_click_or_drag_metadatum_create'),
content: $i18n.get('info_create_section'), autoHide: true,
html: true, popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
delay: { placement: 'auto-start'
shown: 0,
hide: 100,
},
placement: 'top',
}" }"
class="icon preview-help-icon has-text-secondary"> class="icon grip-icon">
<i class="tainacan-icon tainacan-icon-help"/> <!-- <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/> -->
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="currentColor">
<path
d="M0 0h24v24H0V0z"
fill="transparent"/>
<path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
</span> </span>
</span> <span class="metadatum-name">
</div> {{ metadataSection.label }}
</draggable> <span
v-tooltip="{
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '', 'metadata-type-preview-tooltip'],
content: $i18n.get('info_create_section'),
html: true,
delay: {
shown: 0,
hide: 100,
},
placement: 'top',
}"
class="icon preview-help-icon has-text-secondary">
<i class="tainacan-icon tainacan-icon-help"/>
</span>
</span>
</div>
</template>
</sortable>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { mapGetters, mapActions } from 'vuex'; import { mapGetters, mapActions } from 'vuex';
import { Sortable } from "sortablejs-vue3";
export default { export default {
name: 'MetadataTypesList', name: 'MetadataTypesList',
components: {
Sortable
},
props: { props: {
isRepositoryLevel: Boolean, isRepositoryLevel: Boolean,
highlightedMetadatum: String highlightedMetadatum: String
@ -172,10 +192,10 @@ export default {
'getMetadatumTypes' 'getMetadatumTypes'
]), ]),
addMetadatumViaButton(metadatumType) { addMetadatumViaButton(metadatumType) {
this.$eventBusMetadataList.onAddMetadatumViaButton(metadatumType); this.$eventBusMetadataList.emit('addMetadatumViaButton', metadatumType);
}, },
addMetadataSectionViaButton() { addMetadataSectionViaButton() {
this.$eventBusMetadataList.onAddMetadataSectionViaButton(); this.$eventBusMetadataList.emit('addMetadataSectionViaButton');
}, },
getPreviewTemplateContent(metadatum) { getPreviewTemplateContent(metadatum) {
return `<div class="metadata-type-preview tainacan-form"> return `<div class="metadata-type-preview tainacan-form">
@ -242,6 +262,7 @@ export default {
.grip-icon { .grip-icon {
color: var(--tainacan-gray3); color: var(--tainacan-gray3);
position: relative; position: relative;
flex-shrink: 0;
} }
.icon { .icon {
position: relative; position: relative;

21
src/views/admin/components/lists/processes-list.vue
View File

@ -10,7 +10,7 @@
<span> <span>
<b-checkbox <b-checkbox
@click="selectAllOnPage()" @click="selectAllOnPage()"
:value="allOnPageSelected">{{ $i18n.get('label_select_all_processes_page') }}</b-checkbox> :model-value="allOnPageSelected">{{ $i18n.get('label_select_all_processes_page') }}</b-checkbox>
</span> </span>
</div> </div>
<div class="field is-pulled-right"> <div class="field is-pulled-right">
@ -19,15 +19,14 @@
:disabled="!isSelecting" :disabled="!isSelecting"
id="bulk-actions-dropdown" id="bulk-actions-dropdown"
trap-focus> trap-focus>
<button <template #trigger>
class="button is-white" <button class="button is-white">
slot="trigger"> <span>{{ $i18n.get('label_bulk_actions') }}</span>
<span>{{ $i18n.get('label_bulk_actions') }}</span> <span class="icon">
<span class="icon"> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/> </span>
</span> </button>
</button> </template>
<b-dropdown-item <b-dropdown-item
id="item-delete-selected-items" id="item-delete-selected-items"
@click="deleteSelected()"> @click="deleteSelected()">
@ -64,7 +63,7 @@
:class="{ 'is-selecting': isSelecting }" :class="{ 'is-selecting': isSelecting }"
class="checkbox-cell"> class="checkbox-cell">
<b-checkbox <b-checkbox
v-model:value="selected[index]"/> v-model="selected[index]"/>
</span> --> </span> -->
<!-- Name --> <!-- Name -->
<span <span

4
src/views/admin/components/lists/related-items-list.vue
View File

@ -3,7 +3,7 @@
<div class="table-container"> <div class="table-container">
<b-loading <b-loading
is-full-page="false" is-full-page="false"
v-model:active="displayLoading" /> v-model="displayLoading" />
<div class="table-wrapper"> <div class="table-wrapper">
<div class="related-items-list"> <div class="related-items-list">
<div <div
@ -137,7 +137,7 @@
</div> </div>
<b-modal <b-modal
:width="1200" :width="1200"
v-model:active="editItemModal" v-model="editItemModal"
@after-leave="reloadRelatedItems" @after-leave="reloadRelatedItems"
custom-class="tainacan-modal" custom-class="tainacan-modal"
:close-button-aria-label="$i18n.get('close')"> :close-button-aria-label="$i18n.get('close')">

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

@ -1,7 +1,7 @@
<template> <template>
<div class="column"> <div class="column">
<b-loading v-model:active="isLoadingMetadata"/> <b-loading v-model="isLoadingMetadata"/>
<div class="tainacan-form sub-header"> <div class="tainacan-form sub-header">
<!-- <h3>{{ $i18n.get('metadata') }}<span class="has-text-gray">{{ ( activeMetadatumList && activeMetadatumList.length ? (' (' + activeMetadatumList.length + ')') : '' ) }}</span></h3> --> <!-- <h3>{{ $i18n.get('metadata') }}<span class="has-text-gray">{{ ( activeMetadatumList && activeMetadatumList.length ? (' (' + activeMetadatumList.length + ')') : '' ) }}</span></h3> -->
@ -29,15 +29,16 @@
class="show metadata-options-dropdown" class="show metadata-options-dropdown"
aria-role="list" aria-role="list"
trap-focus> trap-focus>
<button <template #trigger>
:aria-label="$i18n.get('label_filter_by_metadata_type')" <button
class="button is-white" :aria-label="$i18n.get('label_filter_by_metadata_type')"
slot="trigger"> class="button is-white">
<span>{{ $i18n.get('label_filter_by_metadata_type') }}</span> <span>{{ $i18n.get('label_filter_by_metadata_type') }}</span>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
</span> </span>
</button> </button>
</template>
<div class="metadata-options-container"> <div class="metadata-options-container">
<b-dropdown-item <b-dropdown-item
v-for="(metadataType, index) in metadataTypeFilterOptions" v-for="(metadataType, index) in metadataTypeFilterOptions"
@ -46,7 +47,7 @@
custom custom
aria-role="listitem"> aria-role="listitem">
<b-checkbox <b-checkbox
v-model:value="metadataType.enabled" v-model="metadataType.enabled"
:native-value="metadataType.enabled"> :native-value="metadataType.enabled">
{{ metadataType.name }} {{ metadataType.name }}
</b-checkbox> </b-checkbox>
@ -57,7 +58,7 @@
<b-field class="header-item"> <b-field class="header-item">
<b-input <b-input
:placeholder="$i18n.get('instruction_type_search_metadata_filter')" :placeholder="$i18n.get('instruction_type_search_metadata_filter')"
v-model:value="metadataNameFilterString" v-model="metadataNameFilterString"
icon="magnify" icon="magnify"
size="is-small" size="is-small"
icon-right="close-circle" icon-right="close-circle"
@ -83,211 +84,217 @@
<!-- The Repository Metadata list --> <!-- The Repository Metadata list -->
<div class="active-metadata-sections-area"> <div class="active-metadata-sections-area">
<draggable <sortable
v-model:value="activeMetadatumList" :list="activeMetadatumList"
item-key="id"
class="active-metadata-area" class="active-metadata-area"
@change="handleChange($event)" @add="handleChange($event)"
:group="{ name:'metadata', pull: false, put: true }" @remove="handleChange($event)"
:sort="false" :options="{
:handle="'.handle'" group: { name:'metadata', pull: false, put: true },
ghost-class="sortable-ghost" handle: '.handle',
chosen-class="sortable-chosen" ghostClass: 'sortable-ghost',
filter=".not-sortable-item" chosenClass: 'sortable-chosen',
:prevent-on-filter="false" filter: '.not-sortable-item',
:animation="250"> preventOnFilter: false,
<div animation: 250
v-for="(metadatum, index) in activeMetadatumList.filter((meta) => meta != undefined && meta.parent == 0)" }">
:key="metadatum.id" <template #item="{ element: metadatum, index }">
v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)">
<div <div
class="active-metadatum-item" v-if="metadatum != undefined && metadatum.parent == 0"
:class="{ v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)">
'is-compact-item': !isCollapseOpen(metadatum.id),
'not-sortable-item': true,
'not-focusable-item': openedMetadatumId == metadatum.id,
'disabled-metadatum': metadatum.enabled == false,
'inherited-metadatum': true,
'child-metadatum': metadatum.parent > 0
}">
<div <div
:ref="'metadatum-handler-' + metadatum.id" class="active-metadatum-item"
class="handle"> :class="{
<span 'is-compact-item': !isCollapseOpen(metadatum.id),
:style="{ opacity: '0.0' }" 'not-sortable-item': true,
v-tooltip="{ 'not-focusable-item': openedMetadatumId == metadatum.id,
content: $i18n.get('info_not_allowed_change_order_metadata'), 'disabled-metadatum': metadatum.enabled == false,
autoHide: true, 'inherited-metadatum': true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], 'child-metadatum': metadatum.parent > 0
placement: 'auto-start' }">
}" <div
class="icon grip-icon"> :ref="'metadatum-handler-' + metadatum.id"
<svg class="handle">
xmlns="http://www.w3.org/2000/svg" <span
height="24px" :style="{ opacity: '0.0' }"
viewBox="0 0 24 24" v-tooltip="{
width="24px" content: $i18n.get('info_not_allowed_change_order_metadata'),
fill="currentColor"> autoHide: true,
<path popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
d="M0 0h24v24H0V0z" placement: 'auto-start'
fill="transparent"/> }"
<path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/> class="icon grip-icon">
</svg> <svg
</span> xmlns="http://www.w3.org/2000/svg"
<span height="24px"
v-tooltip="{ viewBox="0 0 24 24"
content: $i18n.get('label_view_metadata_details'), width="24px"
autoHide: true, fill="currentColor">
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], <path
placement: 'auto-start' d="M0 0h24v24H0V0z"
}" fill="transparent"/>
@click="Object.assign( collapses, { [metadatum.id]: !isCollapseOpen(metadatum.id) })" <path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
class="gray-icon icon" </svg>
:style="{ cursor: 'pointer', opacity: openedMetadatumId != metadatum.id ? '1.0' : '0.0' }"> </span>
<i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" /> <span
</span> v-tooltip="{
content: $i18n.get('label_view_metadata_details'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
@click="Object.assign( collapses, { [metadatum.id]: !isCollapseOpen(metadatum.id) })"
class="gray-icon icon"
:style="{ cursor: 'pointer', opacity: openedMetadatumId != metadatum.id ? '1.0' : '0.0' }">
<i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
</span>
<span class="metadatum-name"> <span class="metadatum-name">
{{ metadatum.name }} {{ metadatum.name }}
</span>
<span
v-if="metadatum.id != undefined && metadatum.metadata_type_object"
class="label-details"
:class="{ 'has-text-weight-bold': metadatum.metadata_type_object.core }">
<span
v-if="metadatum.required === 'yes'"
v-tooltip="{
content: $i18n.get('label_required'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}">
*&nbsp;
</span>
({{ metadatum.metadata_type_object.name }})
<span
v-if="metadatum.status === 'private'"
class="icon"
v-tooltip="{
content: $i18n.get('status_private'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}">
<i class="tainacan-icon tainacan-icon-private"/>
</span> </span>
<span <span
v-tooltip="{ v-if="metadatum.id != undefined && metadatum.metadata_type_object"
content: $i18n.get('label_repository_metadatum'), class="label-details"
autoHide: true, :class="{ 'has-text-weight-bold': metadatum.metadata_type_object.core }">
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], <span
placement: 'auto-start' v-if="metadatum.required === 'yes'"
}" v-tooltip="{
class="icon icon-level-identifier"> content: $i18n.get('label_required'),
<i autoHide: true,
:class="{ popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
'has-text-blue5': metadatum.enabled, placement: 'auto-start'
'has-text-gray3': !metadatum.enabled }">
}" *&nbsp;
class="tainacan-icon tainacan-icon-repository" /> </span>
</span> ({{ metadatum.metadata_type_object.name }})
</span> <span
<span v-if="metadatum.status === 'private'"
class="loading-spinner" class="icon"
v-if="metadatum.id == undefined"/> v-tooltip="{
<span content: $i18n.get('status_private'),
class="controls" autoHide: true,
v-if="metadatum.id !== undefined"> popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
<a placement: 'auto-start'
v-if="metadatum.current_user_can_edit" }">
:style="{ visibility: <i class="tainacan-icon tainacan-icon-private"/>
metadatum.collection_id != collectionId </span>
? 'hidden' : 'visible'
}"
@click.prevent="toggleMetadatumEdition(metadatum)">
<span <span
v-tooltip="{ v-tooltip="{
content: $i18n.get('edit'), content: $i18n.get('label_repository_metadatum'),
autoHide: true, autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start' placement: 'auto-start'
}" }"
class="icon"> class="icon icon-level-identifier">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/> <i
</span> :class="{
</a> 'has-text-blue5': metadatum.enabled,
<a 'has-text-gray3': !metadatum.enabled
v-if="metadatum.current_user_can_delete"
:style="{ visibility: metadatum.collection_id != collectionId || metadatum.metadata_type_object.core ? 'hidden' : 'visible' }"
@click.prevent="removeMetadatum(metadatum)">
<span
v-tooltip="{
content: $i18n.get('delete'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}" }"
class="icon"> class="tainacan-icon tainacan-icon-repository" />
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
</span> </span>
</a> </span>
</span> <span
class="loading-spinner"
v-if="metadatum.id == undefined"/>
<span
class="controls"
v-if="metadatum.id !== undefined">
<a
v-if="metadatum.current_user_can_edit"
:style="{ visibility:
metadatum.collection_id != collectionId
? 'hidden' : 'visible'
}"
@click.prevent="toggleMetadatumEdition(metadatum)">
<span
v-tooltip="{
content: $i18n.get('edit'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
</span>
</a>
<a
v-if="metadatum.current_user_can_delete"
:style="{ visibility: metadatum.collection_id != collectionId || metadatum.metadata_type_object.core ? 'hidden' : 'visible' }"
@click.prevent="removeMetadatum(metadatum)">
<span
v-tooltip="{
content: $i18n.get('delete'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
</span>
</a>
</span>
</div>
<transition name="form-collapse">
<metadatum-details
v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id"
:metadatum="metadatum" />
</transition>
</div> </div>
<transition name="form-collapse">
<metadatum-details
v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id"
:metadatum="metadatum" />
</transition>
</div>
<!-- Child metadata list, inside each compound metadata --> <!-- Child metadata list, inside each compound metadata -->
<child-metadata-list <child-metadata-list
v-if="metadatum.metadata_type_object && metadatum.metadata_type_object.component == 'tainacan-compound'" v-if="metadatum.metadata_type_object && metadatum.metadata_type_object.component == 'tainacan-compound'"
:parent="metadatum" :parent="metadatum"
:metadata-name-filter-string="metadataNameFilterString" :metadata-name-filter-string="metadataNameFilterString"
:metadata-type-filter-options="metadataTypeFilterOptions" :metadata-type-filter-options="metadataTypeFilterOptions"
:has-some-metadata-type-filter-applied="hasSomeMetadataTypeFilterApplied" :has-some-metadata-type-filter-applied="hasSomeMetadataTypeFilterApplied"
:is-parent-multiple="metadatum.multiple == 'yes'" :is-parent-multiple="metadatum.multiple == 'yes'"
:is-repository-level="true"
:collapse-all="collapseAll" />
<!-- Metadata edition form, for each metadata -->
<b-modal
@close="onEditionCanceled()"
:active="openedMetadatumId == metadatum.id"
trap-focus
aria-modal
aria-role="dialog"
custom-class="tainacan-modal"
:close-button-aria-label="$i18n.get('close')">
<metadatum-edition-form
:collection-id="collectionId"
:original-metadatum="metadatum"
:is-repository-level="true" :is-repository-level="true"
@onEditionFinished="onEditionFinished()" :collapse-all="collapseAll" />
@onEditionCanceled="onEditionCanceled()"
:index="index" />
</b-modal>
</div> <!-- Metadata edition form, for each metadata -->
</draggable><!-- End of .active-metadata-area --> <b-modal
@close="onEditionCanceled()"
:model-value="openedMetadatumId == metadatum.id"
trap-focus
aria-modal
aria-role="dialog"
custom-class="tainacan-modal"
:close-button-aria-label="$i18n.get('close')">
<metadatum-edition-form
:collection-id="collectionId"
:original-metadatum="metadatum"
:is-repository-level="true"
@onEditionFinished="onEditionFinished()"
@onEditionCanceled="onEditionCanceled()"
:index="index" />
</b-modal>
</div>
</template>
</sortable><!-- End of .active-metadata-area -->
</div> </div>
</div> <!-- End of .columns --> </div> <!-- End of .columns -->
</template> </template>
<script> <script>
import MetadatumEditionForm from '../edition/metadatum-edition-form.vue'; import MetadatumEditionForm from '../edition/metadatum-edition-form.vue';
import MetadatumDetails from '../other/metadatum-details.vue'; import MetadatumDetails from '../other/metadatum-details.vue';
import ChildMetadataList from '../metadata-types/compound/child-metadata-list.vue'; import ChildMetadataList from '../metadata-types/compound/child-metadata-list.vue';
import CustomDialog from '../other/custom-dialog.vue'; import CustomDialog from '../other/custom-dialog.vue';
import { mapGetters, mapActions } from 'vuex'; import { mapGetters, mapActions } from 'vuex';
import { Sortable } from 'sortablejs-vue3';
export default { export default {
name: 'RepositoryMetadataList', name: 'RepositoryMetadataList',
components: { components: {
MetadatumEditionForm, MetadatumEditionForm,
ChildMetadataList, ChildMetadataList,
MetadatumDetails MetadatumDetails,
Sortable
}, },
props: { props: {
metadataTypeFilterOptions: Array metadataTypeFilterOptions: Array
@ -339,7 +346,7 @@ export default {
mounted() { mounted() {
this.cleanMetadata(); this.cleanMetadata();
this.loadMetadata(); this.loadMetadata();
this.$eventBusMetadataList.$emitter.on('addMetadatumViaButton', this.addMetadatumViaButton); this.$eventBusMetadataList.on('addMetadatumViaButton', this.addMetadatumViaButton);
}, },
beforeUnmount() { beforeUnmount() {
// Cancels previous Request // Cancels previous Request
@ -357,11 +364,15 @@ export default {
...mapGetters('metadata',[ ...mapGetters('metadata',[
'getMetadata' 'getMetadata'
]), ]),
handleChange(event) { handleChange($event) {
if (event.added) switch ($event.type) {
this.addNewMetadatum(event.added.element, event.added.newIndex); case 'add':
else if (event.removed) this.addNewMetadatum(this.activeMetadatumList[$event.oldIndex], $event.newIndex);
this.removeMetadatum(event.removed.element); break;
case 'remove':
this.removeMetadatum(this.activeMetadatumList[$event.oldIndex]);
break;
}
}, },
addMetadatumViaButton(metadatumType) { addMetadatumViaButton(metadatumType) {
let lastIndex = this.activeMetadatumList.length; let lastIndex = this.activeMetadatumList.length;

21
src/views/admin/components/lists/taxonomies-list.vue
View File

@ -10,7 +10,7 @@
<span> <span>
<b-checkbox <b-checkbox
@click="selectAllOnPage()" @click="selectAllOnPage()"
:value="allOnPageSelected">{{ $i18n.get('label_select_all_taxonomies_page') }}</b-checkbox> :model-value="allOnPageSelected">{{ $i18n.get('label_select_all_taxonomies_page') }}</b-checkbox>
</span> </span>
</div> </div>
<div class="field is-pulled-right"> <div class="field is-pulled-right">
@ -20,15 +20,14 @@
id="bulk-actions-dropdown" id="bulk-actions-dropdown"
aria-role="list" aria-role="list"
trap-focus> trap-focus>
<button <template #trigger>
class="button is-white" <button class="button is-white">
slot="trigger"> <span>{{ $i18n.get('label_bulk_actions') }}</span>
<span>{{ $i18n.get('label_bulk_actions') }}</span> <span class="icon">
<span class="icon"> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/> </span>
</span> </button>
</button> </template>
<b-dropdown-item <b-dropdown-item
id="item-delete-selected-items" id="item-delete-selected-items"
@click="deleteSelected()" @click="deleteSelected()"
@ -92,7 +91,7 @@
:class="{ 'is-selecting': isSelecting }" :class="{ 'is-selecting': isSelecting }"
class="checkbox-cell"> class="checkbox-cell">
<b-checkbox <b-checkbox
v-model:value="selected[index]"/> v-model="selected[index]"/>
</td> </td>
<!-- Status icon --> <!-- Status icon -->
<td <td

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

@ -3,7 +3,7 @@
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
v-model:active="isColumnLoading"/> v-model="isColumnLoading"/>
<transition name="appear-from-top"> <transition name="appear-from-top">
<button <button
@ -243,7 +243,7 @@
</section> </section>
<b-modal <b-modal
v-model:value="isEditingTerm" v-model="isEditingTerm"
:width="768" :width="768"
trap-focus trap-focus
aria-role="dialog" aria-role="dialog"

40
src/views/admin/components/lists/terms-list.vue
View File

@ -10,7 +10,7 @@
autocomplete="on" autocomplete="on"
:placeholder="$i18n.get('instruction_search')" :placeholder="$i18n.get('instruction_search')"
:aria-name="$i18n.get('instruction_search')" :aria-name="$i18n.get('instruction_search')"
v-model:value="searchString" v-model="searchString"
icon-right="magnify" icon-right="magnify"
type="search" /> type="search" />
</b-field> </b-field>
@ -37,15 +37,16 @@
aria-role="list" aria-role="list"
trap-focus trap-focus
position="is-bottom-left"> position="is-bottom-left">
<button <template #trigger>
type="button" <button
class="button is-white" type="button"
slot="trigger"> class="button is-white">
<span>{{ selected.length == 1 ? $i18n.get('label_one_selected_term') : $i18n.getWithVariables('label_%s_selected_terms', [ selected.length ]) }}</span> <span>{{ selected.length == 1 ? $i18n.get('label_one_selected_term') : $i18n.getWithVariables('label_%s_selected_terms', [ selected.length ]) }}</span>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
</span> </span>
</button> </button>
</template>
<b-dropdown-item <b-dropdown-item
custom custom
v-for="term of selected" v-for="term of selected"
@ -78,15 +79,16 @@
id="bulk-actions-dropdown" id="bulk-actions-dropdown"
aria-role="list" aria-role="list"
trap-focus> trap-focus>
<button <template #trigger>
type="button" <button
class="button is-white" type="button"
slot="trigger"> class="button is-white">
<span>{{ $i18n.get('label_actions_for_the_selection') }}</span> <span>{{ $i18n.get('label_actions_for_the_selection') }}</span>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
</span> </span>
</button> </button>
</template>
<b-dropdown-item <b-dropdown-item
@click="$emit('deleteSelectedTerms')" @click="$emit('deleteSelectedTerms')"
id="item-delete-selected-terms" id="item-delete-selected-terms"

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

@ -15,215 +15,222 @@
<p>{{ $i18n.get('info_create_child_metadata') }}</p> <p>{{ $i18n.get('info_create_child_metadata') }}</p>
</div> </div>
</section> </section>
<draggable <sortable
v-model:value="childrenMetadata" :list="childrenMetadata"
:style="{ minHeight: childrenMetadata.length > 0 ? '40px' : '70px' }" :style="{ minHeight: childrenMetadata.length > 0 ? '40px' : '70px' }"
class="active-metadata-area child-metadata-area" class="active-metadata-area child-metadata-area"
item-key="id"
@change="handleChange" @change="handleChange"
:group="{ name:'metadata', pull: false, put: isAvailableChildMetadata }" :options="{
:sort="(openedMetadatumId == '' || openedMetadatumId == undefined)" group: {
:handle="'.handle'" name: 'metadata',
ghost-class="sortable-ghost" pull: false,
chosen-class="sortable-chosen" put: isAvailableChildMetadata
filter=".not-sortable-item" },
:prevent-on-filter="false" sort: (openedMetadatumId == '' || openedMetadatumId == undefined),
:animation="250"> handle: '.handle',
<div ghostClass: 'sortable-ghost',
class="active-metadatum-item" chosenClass: 'sortable-chosen',
:class="{ filter: '.not-sortable-item',
'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied, preventOnFilter: false,
'not-focusable-item': openedMetadatumId == metadatum.id, animation: 250
'disabled-metadatum': parent.enabled == false, }">
'inherited-metadatum': (metadatum.collection_id != collectionId && metadatum.parent == 0) || isRepositoryLevel <template #item="{ element: metadatum, index }">
}"
v-for="(metadatum, index) in childrenMetadata"
:key="metadatum.id"
v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)">
<div <div
:ref="'metadatum-handler-' + metadatum.id" class="active-metadatum-item"
class="handle"> :class="{
<span class="sorting-buttons"> 'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied,
<button 'not-focusable-item': openedMetadatumId == metadatum.id,
:disabled="index == 0" 'disabled-metadatum': parent.enabled == false,
class="link-button" 'inherited-metadatum': (metadatum.collection_id != collectionId && metadatum.parent == 0) || isRepositoryLevel
@click="moveMetadatumUpViaButton(index)" }"
:aria-label="$i18n.get('label_move_up')"> v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)">
<span class="icon"> <div
<i class="tainacan-icon tainacan-icon-previous tainacan-icon-rotate-90" /> :ref="'metadatum-handler-' + metadatum.id"
</span> class="handle">
</button> <span class="sorting-buttons">
<button <button
:disabled="index == childrenMetadata.length - 1" :disabled="index == 0"
class="link-button" class="link-button"
@click="moveMetadatumDownViaButton(index)" @click="moveMetadatumUpViaButton(index)"
:aria-label="$i18n.get('label_move_down')"> :aria-label="$i18n.get('label_move_up')">
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-next tainacan-icon-rotate-90" /> <i class="tainacan-icon tainacan-icon-previous tainacan-icon-rotate-90" />
</span> </span>
</button> </button>
</span> <button
<span :disabled="index == childrenMetadata.length - 1"
:style="{ opacity: !(metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied) ? '1.0' : '0.0' }" class="link-button"
v-tooltip="{ @click="moveMetadatumDownViaButton(index)"
content: metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder ? $i18n.get('info_not_allowed_change_order_metadata') : $i18n.get('instruction_drag_and_drop_metadatum_sort'), :aria-label="$i18n.get('label_move_down')">
autoHide: true, <span class="icon">
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''], <i class="tainacan-icon tainacan-icon-next tainacan-icon-rotate-90" />
placement: 'auto-start' </span>
}" </button>
class="icon grip-icon">
<!-- <i class="tainacan-icon tainacan-icon-18px tainacan-icon-drag"/> -->
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="currentColor">
<path
d="M0 0h24v24H0V0z"
fill="transparent"/>
<path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
</span>
<span
v-tooltip="{
content: $i18n.get('label_view_metadata_details'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}"
@click="Object.assign( collapses, { [metadatum.id]: !isCollapseOpen(metadatum.id) })"
class="gray-icon icon"
:style="{ cursor: 'pointer', opacity: openedMetadatumId != metadatum.id ? '1.0' : '0.0' }">
<i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
</span>
<span class="metadatum-name">
{{ metadatum.name }}
</span>
<span
v-if="metadatum.id != undefined && metadatum.metadata_type_object"
class="label-details">
<span
v-if="metadatum.required === 'yes'"
v-tooltip="{
content: $i18n.get('label_required'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}">
*&nbsp;
</span>
({{ metadatum.metadata_type_object.name }})
<!-- <em v-if="metadatum.collection_id != collectionId">{{ $i18n.get('label_inherited') }}</em> -->
<em
v-if="metadatum.metadata_type_object.core &&
metadatum.metadata_type_object.related_mapped_prop == 'title'">
{{ $i18n.get('label_core_title') }}
</em>
<em
v-if="metadatum.metadata_type_object.core &&
metadatum.metadata_type_object.related_mapped_prop == 'description'">
{{ $i18n.get('label_core_description') }}
</em>
<span
v-if="metadatum.status == 'private'"
class="icon"
v-tooltip="{
content: $i18n.get('status_private'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}">
<i class="tainacan-icon tainacan-icon-private"/>
</span> </span>
<span <span
:style="{ opacity: !(metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied) ? '1.0' : '0.0' }"
v-tooltip="{ v-tooltip="{
content: (metadatum.collection_id == 'default') || isRepositoryLevel ? $i18n.get('label_repository_metadatum') : $i18n.get('label_collection_metadatum'), content: metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder ? $i18n.get('info_not_allowed_change_order_metadata') : $i18n.get('instruction_drag_and_drop_metadatum_sort'),
autoHide: true, autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''], popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start' placement: 'auto-start'
}" }"
class="icon icon-level-identifier"> class="icon grip-icon">
<i <!-- <i class="tainacan-icon tainacan-icon-18px tainacan-icon-drag"/> -->
:class="{ <svg
'tainacan-icon-collection': (metadatum.collection_id != 'default' && !isRepositoryLevel), xmlns="http://www.w3.org/2000/svg"
'tainacan-icon-repository': (metadatum.collection_id == 'default') || isRepositoryLevel, height="24px"
'has-text-turquoise5': (metadatum.collection_id != 'default' && !isRepositoryLevel), viewBox="0 0 24 24"
'has-text-blue5': (metadatum.collection_id == 'default' || isRepositoryLevel), width="24px"
'has-text-gray3': !parent.enabled fill="currentColor">
}" <path
class="tainacan-icon" /> d="M0 0h24v24H0V0z"
fill="transparent"/>
<path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
</span> </span>
</span> <span
<span v-tooltip="{
class="loading-spinner" content: $i18n.get('label_view_metadata_details'),
v-if="metadatum.id == undefined"/> autoHide: true,
<span popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
class="controls" placement: 'auto-start'
v-if="metadatum.id !== undefined"> }"
<a @click="Object.assign( collapses, { [metadatum.id]: !isCollapseOpen(metadatum.id) })"
v-if="metadatum.current_user_can_edit" class="gray-icon icon"
:style="{ visibility: :style="{ cursor: 'pointer', opacity: openedMetadatumId != metadatum.id ? '1.0' : '0.0' }">
metadatum.collection_id != collectionId <i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
? 'hidden' : 'visible' </span>
}" <span class="metadatum-name">
@click.prevent="toggleMetadatumEdition(metadatum.id)"> {{ metadatum.name }}
</span>
<span
v-if="metadatum.id != undefined && metadatum.metadata_type_object"
class="label-details">
<span
v-if="metadatum.required === 'yes'"
v-tooltip="{
content: $i18n.get('label_required'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}">
*&nbsp;
</span>
({{ metadatum.metadata_type_object.name }})
<!-- <em v-if="metadatum.collection_id != collectionId">{{ $i18n.get('label_inherited') }}</em> -->
<em
v-if="metadatum.metadata_type_object.core &&
metadatum.metadata_type_object.related_mapped_prop == 'title'">
{{ $i18n.get('label_core_title') }}
</em>
<em
v-if="metadatum.metadata_type_object.core &&
metadatum.metadata_type_object.related_mapped_prop == 'description'">
{{ $i18n.get('label_core_description') }}
</em>
<span
v-if="metadatum.status == 'private'"
class="icon"
v-tooltip="{
content: $i18n.get('status_private'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}">
<i class="tainacan-icon tainacan-icon-private"/>
</span>
<span <span
v-tooltip="{ v-tooltip="{
content: $i18n.get('edit'), content: (metadatum.collection_id == 'default') || isRepositoryLevel ? $i18n.get('label_repository_metadatum') : $i18n.get('label_collection_metadatum'),
autoHide: true, autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''], popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start' placement: 'auto-start'
}" }"
class="icon"> class="icon icon-level-identifier">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/> <i
</span> :class="{
</a> 'tainacan-icon-collection': (metadatum.collection_id != 'default' && !isRepositoryLevel),
<a 'tainacan-icon-repository': (metadatum.collection_id == 'default') || isRepositoryLevel,
v-if="metadatum.current_user_can_delete" 'has-text-turquoise5': (metadatum.collection_id != 'default' && !isRepositoryLevel),
:style="{ visibility: 'has-text-blue5': (metadatum.collection_id == 'default' || isRepositoryLevel),
metadatum.collection_id != collectionId || 'has-text-gray3': !parent.enabled
metadatum.metadata_type_object.related_mapped_prop == 'title' ||
metadatum.metadata_type_object.related_mapped_prop == 'description'
? 'hidden' : 'visible'
}" }"
@click.prevent="removeMetadatum(metadatum)"> class="tainacan-icon" />
<span
v-tooltip="{
content: $i18n.get('delete'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
</span> </span>
</a> </span>
</span> <span
class="loading-spinner"
v-if="metadatum.id == undefined"/>
<span
class="controls"
v-if="metadatum.id !== undefined">
<a
v-if="metadatum.current_user_can_edit"
:style="{ visibility:
metadatum.collection_id != collectionId
? 'hidden' : 'visible'
}"
@click.prevent="toggleMetadatumEdition(metadatum.id)">
<span
v-tooltip="{
content: $i18n.get('edit'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
</span>
</a>
<a
v-if="metadatum.current_user_can_delete"
:style="{ visibility:
metadatum.collection_id != collectionId ||
metadatum.metadata_type_object.related_mapped_prop == 'title' ||
metadatum.metadata_type_object.related_mapped_prop == 'description'
? 'hidden' : 'visible'
}"
@click.prevent="removeMetadatum(metadatum)">
<span
v-tooltip="{
content: $i18n.get('delete'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
</span>
</a>
</span>
</div>
<transition name="form-collapse">
<metadatum-details
v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id"
:metadatum="metadatum" />
</transition>
<b-modal
@close="onEditionCanceled()"
:model-value="openedMetadatumId == metadatum.id"
trap-focus
aria-modal
aria-role="dialog"
custom-class="tainacan-modal"
:close-button-aria-label="$i18n.get('close')">
<metadatum-edition-form
:collection-id="collectionId"
:original-metadatum="metadatum"
:is-parent-multiple="isParentMultiple"
:is-repository-level="isRepositoryLevel"
@onEditionFinished="onEditionFinished()"
@onEditionCanceled="onEditionCanceled()"
:index="index" />
</b-modal>
</div> </div>
<transition name="form-collapse"> </template>
<metadatum-details </sortable>
v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id"
:metadatum="metadatum" />
</transition>
<b-modal
@close="onEditionCanceled()"
:active="openedMetadatumId == metadatum.id"
trap-focus
aria-modal
aria-role="dialog"
custom-class="tainacan-modal"
:close-button-aria-label="$i18n.get('close')">
<metadatum-edition-form
:collection-id="collectionId"
:original-metadatum="metadatum"
:is-parent-multiple="isParentMultiple"
:is-repository-level="isRepositoryLevel"
@onEditionFinished="onEditionFinished()"
@onEditionCanceled="onEditionCanceled()"
:index="index" />
</b-modal>
</div>
</draggable>
</div> </div>
</template> </template>
@ -233,10 +240,13 @@
import MetadatumDetails from '../../other/metadatum-details.vue'; import MetadatumDetails from '../../other/metadatum-details.vue';
import CustomDialog from '../../other/custom-dialog.vue'; import CustomDialog from '../../other/custom-dialog.vue';
import { Sortable } from 'sortablejs-vue3';
export default { export default {
components: { components: {
MetadatumEditionForm, MetadatumEditionForm,
MetadatumDetails MetadatumDetails,
Sortable
}, },
props: { props: {
isRepositoryLevel: Boolean, isRepositoryLevel: Boolean,
@ -316,13 +326,27 @@
'deleteMetadatum', 'deleteMetadatum',
'updateChildMetadataOrder' 'updateChildMetadataOrder'
]), ]),
handleChange(event) { handleChange($event) {
if (event.added)
this.addNewMetadatum(event.added.element, event.added.newIndex); switch ($event.type) {
else if (event.removed) case 'add':
this.removeMetadatum(event.removed.element); this.addNewMetadatum(this.childrenMetadata[$event.oldIndex], $event.newIndex);
else if (event.moved) break;
this.updateMetadataOrder(); case 'remove':
this.removeMetadatum(this.childrenMetadata[$event.oldIndex]);
break;
case 'update': {
const newChildrenMetadata = JSON.parse(JSON.stringify(this.childrenMetadata));
const element = newChildrenMetadata.splice($event.oldIndex, 1)[0];
newChildrenMetadata.splice($event.newIndex, 0, element);
this.childrenMetadata = newChildrenMetadata;
this.updateMetadataOrder();
break;
}
}
}, },
updateMetadataOrder() { updateMetadataOrder() {
let metadataOrder = []; let metadataOrder = [];

20
src/views/admin/components/metadata-types/date/Date.vue
View File

@ -6,8 +6,8 @@
:custom-class="{ 'is-danger': isInvalidDate && dateValue }" :custom-class="{ 'is-danger': isInvalidDate && dateValue }"
type="text" type="text"
v-mask="dateMask" v-mask="dateMask"
v-model:value="dateValue" v-model="dateValue"
@input="onInput" @update:model-value="onInput"
@blur="onBlur" @blur="onBlur"
@focus="onMobileSpecialFocus" @focus="onMobileSpecialFocus"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : dateFormat.toLowerCase()" /> :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : dateFormat.toLowerCase()" />
@ -15,22 +15,6 @@
v-if="isInvalidDate && dateValue" v-if="isInvalidDate && dateValue"
style="font-size: 0.75em;" style="font-size: 0.75em;"
class="has-text-danger is-italic">{{ $i18n.get('info_error_invalid_date') }}</p> class="has-text-danger is-italic">{{ $i18n.get('info_error_invalid_date') }}</p>
<!--<b-collapse-->
<!--position="is-bottom-right">-->
<!--<span class="icon"-->
<!--icon="calendar-today"-->
<!--size="is-small"-->
<!--slot="trigger" />-->
<!--<div class="field">-->
<!--<b-datepicker-->
<!--v-model:value="dateValue"-->
<!--:readonly="false"-->
<!--inline-->
<!--@input="onInput($event)"-->
<!--:placeholder="datePlaceHolder"/>-->
<!--</div>-->
<!--</b-collapse>-->
</div> </div>
</template> </template>

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

@ -10,8 +10,8 @@
</label> </label>
<b-input <b-input
name="mapProvider" name="mapProvider"
v-model:value="mapProvider" v-model="mapProvider"
@input="emitValues()" @update:model-value="emitValues()"
placeholder="https://tile.openstreetmap.org/{z}/{x}/{y}.png" /> placeholder="https://tile.openstreetmap.org/{z}/{x}/{y}.png" />
</b-field> </b-field>
@ -26,8 +26,8 @@
</label> </label>
<b-input <b-input
name="attribution" name="attribution"
v-model:value="attribution" v-model="attribution"
@input="emitValues()" @update:model-value="emitValues()"
placeholder="© OpenStreetMap contributors" /> placeholder="© OpenStreetMap contributors" />
</b-field> </b-field>
@ -43,8 +43,8 @@
</label> </label>
<b-numberinput <b-numberinput
name="initialZoom" name="initialZoom"
v-model:value="initialZoom" v-model="initialZoom"
@input="emitValues()" @update:model-value="emitValues()"
:step="1" :step="1"
:max="19" :max="19"
:min="1" /> :min="1" />
@ -61,8 +61,8 @@
</label> </label>
<b-numberinput <b-numberinput
name="maximumZoom" name="maximumZoom"
v-model:value="maximumZoom" v-model="maximumZoom"
@input="emitValues()" @update:model-value="emitValues()"
:step="1" :step="1"
:max="19" :max="19"
:min="1" /> :min="1" />

8
src/views/admin/components/metadata-types/geocoordinate/GeoCoordinate.vue
View File

@ -27,16 +27,16 @@
:placeholder="-14.408656999999" :placeholder="-14.408656999999"
type="text" type="text"
:step="0.000000000001" :step="0.000000000001"
@input="onUpdateFromLatitudeInput" @update:model-value="onUpdateFromLatitudeInput"
:value="latitude" /> :model-value="latitude" />
<b-input <b-input
v-if="editingMarkerIndex >= 0" v-if="editingMarkerIndex >= 0"
expanded expanded
:placeholder="-51.316689999999" :placeholder="-51.316689999999"
type="text" type="text"
:step="0.000000000001" :step="0.000000000001"
@input="onUpdateFromLongitudeInput" @update:model-value="onUpdateFromLongitudeInput"
:value="longitude" /> :model-value="longitude" />
<b-button <b-button
v-if="editingMarkerIndex >= 0" v-if="editingMarkerIndex >= 0"
outlined outlined

8
src/views/admin/components/metadata-types/numeric/FormNumeric.vue
View File

@ -12,8 +12,8 @@
class="is-flex"> class="is-flex">
<b-select <b-select
name="step_options" name="step_options"
v-model:value="step" v-model="step"
@input="onUpdateStep"> @update:model-value="onUpdateStep">
<option value="0.001">0.001</option> <option value="0.001">0.001</option>
<option value="0.01">0.01</option> <option value="0.01">0.01</option>
<option value="0.1">0.1</option> <option value="0.1">0.1</option>
@ -49,8 +49,8 @@
class="is-flex"> class="is-flex">
<b-input <b-input
name="max_options" name="max_options"
v-model:value="step" v-model="step"
@input="onUpdateStep" @update:model-value="onUpdateStep"
type="number" type="number"
step="1" /> step="1" />
<button <button

4
src/views/admin/components/metadata-types/numeric/Numeric.vue
View File

@ -3,8 +3,8 @@
:disabled="disabled" :disabled="disabled"
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')" :id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''" :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
:value="value" :model-value="value"
@input="onInput($event);" @update:model-value="onInput($event);"
@blur="onBlur" @blur="onBlur"
@focus="onMobileSpecialFocus" @focus="onMobileSpecialFocus"
type="number" type="number"

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

@ -14,7 +14,7 @@
<b-select <b-select
name="metadata_type_relationship[collection_id]" name="metadata_type_relationship[collection_id]"
:placeholder="$i18n.get('instruction_select_collection_fetch_items' )" :placeholder="$i18n.get('instruction_select_collection_fetch_items' )"
v-model:value="collection" v-model="collection"
@change="emitValues()" @change="emitValues()"
@focus="clear()" @focus="clear()"
:loading="loading" :loading="loading"
@ -45,7 +45,7 @@
</label> </label>
<b-select <b-select
name="metadata_type_relationship[search]" name="metadata_type_relationship[search]"
v-model:value="modelSearch" v-model="modelSearch"
expanded> expanded>
<option <option
v-for="(option, index) in metadata.filter(metadatum => metadatum.metadata_type_object.component !== 'tainacan-compound')" v-for="(option, index) in metadata.filter(metadatum => metadatum.metadata_type_object.component !== 'tainacan-compound')"
@ -71,8 +71,8 @@
<b-checkbox <b-checkbox
native-value="thumbnail" native-value="thumbnail"
name="metadata_type_relationship[display_related_item_metadata]" name="metadata_type_relationship[display_related_item_metadata]"
@input="emitValues()" @update:model-value="emitValues()"
v-model:value="displayRelatedItemMetadata"> v-model="displayRelatedItemMetadata">
{{ $i18n.get('label_thumbnail') }} {{ $i18n.get('label_thumbnail') }}
</b-checkbox> </b-checkbox>
<b-checkbox <b-checkbox
@ -80,8 +80,8 @@
:key="index" :key="index"
:native-value="metadatumOption.id" :native-value="metadatumOption.id"
name="metadata_type_relationship[display_related_item_metadata]" name="metadata_type_relationship[display_related_item_metadata]"
@input="emitValues()" @update:model-value="emitValues()"
v-model:value="displayRelatedItemMetadata" v-model="displayRelatedItemMetadata"
:disabled="metadatumOption.id == modelSearch"> :disabled="metadatumOption.id == modelSearch">
{{ metadatumOption.name }} {{ metadatumOption.name }}
</b-checkbox> </b-checkbox>
@ -95,8 +95,8 @@
&nbsp; &nbsp;
<b-switch <b-switch
size="is-small" size="is-small"
v-model:value="modelDisplayInRelatedItems" v-model="modelDisplayInRelatedItems"
@input="emitValues()" @update:model-value="emitValues()"
true-value="yes" true-value="yes"
false-value="no" /> false-value="no" />
<help-button <help-button
@ -110,8 +110,8 @@
&nbsp; &nbsp;
<b-switch <b-switch
size="is-small" size="is-small"
v-model:value="modelAcceptDraftItems" v-model="modelAcceptDraftItems"
@input="emitValues()" @update:model-value="emitValues()"
true-value="yes" true-value="yes"
false-value="no" /> false-value="no" />
<help-button <help-button

8
src/views/admin/components/metadata-types/relationship/Relationship.vue
View File

@ -3,7 +3,7 @@
<b-tabs <b-tabs
size="is-small" size="is-small"
animated animated
v-model:value="activeTab"> v-model="activeTab">
<b-tab-item :label="$i18n.get('label_insert_items')"> <b-tab-item :label="$i18n.get('label_insert_items')">
<b-taginput <b-taginput
expanded expanded
@ -11,8 +11,8 @@
:id="relationshipInputId" :id="relationshipInputId"
size="is-small" size="is-small"
icon="magnify" icon="magnify"
:value="selected" :model-value="selected"
@input="onInput" @update:model-value="onInput"
@blur="onBlur" @blur="onBlur"
@add="onAdd" @add="onAdd"
@remove="onRemove" @remove="onRemove"
@ -127,7 +127,7 @@
</a> </a>
<b-modal <b-modal
:width="1200" :width="1200"
v-model:active="editItemModalOpen" v-model="editItemModalOpen"
:custom-class="'tainacan-modal' + (collection && collection.id ? ' tainacan-modal-item-edition--collection-' + collection.id : '')" :custom-class="'tainacan-modal' + (collection && collection.id ? ' tainacan-modal-item-edition--collection-' + collection.id : '')"
:close-button-aria-label="$i18n.get('close')"> :close-button-aria-label="$i18n.get('close')">
<iframe <iframe

8
src/views/admin/components/metadata-types/selectbox/FormSelectbox.vue
View File

@ -23,8 +23,8 @@
</label> </label>
<b-taginput <b-taginput
v-model:value="options" v-model="options"
@input="emitValues()" @update:model-value="emitValues()"
@focus="clear()" @focus="clear()"
attached attached
:confirm-keys="optionsSeparator" :confirm-keys="optionsSeparator"
@ -40,8 +40,8 @@
v-for="separator of ['Enter', 'Tab', ',', ';', '|']" v-for="separator of ['Enter', 'Tab', ',', ';', '|']"
:key="separator" :key="separator"
name="metadata_type_selectbox[options_separator]" name="metadata_type_selectbox[options_separator]"
@input="emitValues()" @update:model-value="emitValues()"
v-model:value="optionsSeparator" v-model="optionsSeparator"
:native-value="separator" :native-value="separator"
:disabled="separator == 'Enter'"> :disabled="separator == 'Enter'">
<kbd>{{ separator }}</kbd> <kbd>{{ separator }}</kbd>

4
src/views/admin/components/metadata-types/selectbox/Selectbox.vue
View File

@ -11,8 +11,8 @@
:disabled="disabled" :disabled="disabled"
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')" :id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : $i18n.get('label_selectbox_init')" :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : $i18n.get('label_selectbox_init')"
:value="value" :model-value="value"
@input="onSelected($event)"> @update:model-value="onSelected($event)">
<option value="">{{ itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ($i18n.get('label_selectbox_init') + '...') }}</option> <option value="">{{ itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ($i18n.get('label_selectbox_init') + '...') }}</option>
<option <option
v-for="(option, index) in getOptions" v-for="(option, index) in getOptions"

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

@ -15,8 +15,8 @@
<b-select <b-select
name="field_type_options[taxonomy_id]" name="field_type_options[taxonomy_id]"
placeholder="Select the taxonomy" placeholder="Select the taxonomy"
v-model:value="taxonomy_id" v-model="taxonomy_id"
@input="emitValues()" @update:model-value="emitValues()"
@focus="clear" @focus="clear"
:loading="loading" :loading="loading"
expanded> expanded>
@ -41,8 +41,8 @@
v-if="listInputType" v-if="listInputType"
name="metadata_type_options[component_type]" name="metadata_type_options[component_type]"
placeholder="Select the input type for the taxonomy metadatum" placeholder="Select the input type for the taxonomy metadatum"
@input="emitValues()" @update:model-value="emitValues()"
v-model:value="input_type" v-model="input_type"
expanded> expanded>
<option <option
v-for="(option, index) in single_types" v-for="(option, index) in single_types"
@ -55,8 +55,8 @@
<b-select <b-select
name="metadata_type_options[input_type]" name="metadata_type_options[input_type]"
placeholder="Select the input type for the taxonomy metadatum" placeholder="Select the input type for the taxonomy metadatum"
v-model:value="input_type" v-model="input_type"
@input="emitValues()" @update:model-value="emitValues()"
v-else v-else
expanded> expanded>
<option <option
@ -75,8 +75,8 @@
&nbsp; &nbsp;
<b-switch <b-switch
size="is-small" size="is-small"
v-model:value="visible_options_list" v-model="visible_options_list"
@input="emitValues()" /> @update:model-value="emitValues()" />
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-taxonomy', 'visible_options_list')" :title="$i18n.getHelperTitle('tainacan-taxonomy', 'visible_options_list')"
:message="$i18n.getHelperMessage('tainacan-taxonomy', 'visible_options_list')"/> :message="$i18n.getHelperMessage('tainacan-taxonomy', 'visible_options_list')"/>
@ -88,8 +88,8 @@
&nbsp; &nbsp;
<b-switch <b-switch
size="is-small" size="is-small"
v-model:value="allow_new_terms" v-model="allow_new_terms"
@input="emitValues()" @update:model-value="emitValues()"
true-value="yes" true-value="yes"
false-value="no" /> false-value="no" />
<help-button <help-button
@ -103,8 +103,8 @@
&nbsp; &nbsp;
<b-switch <b-switch
size="is-small" size="is-small"
v-model:value="do_not_dispaly_term_as_link" v-model="do_not_dispaly_term_as_link"
@input="emitValues()" @update:model-value="emitValues()"
true-value="yes" true-value="yes"
false-value="no" /> false-value="no" />
<help-button <help-button
@ -119,12 +119,12 @@
:message="$i18n.getHelperMessage('tainacan-taxonomy', 'link_filtered_by_collections')"/> :message="$i18n.getHelperMessage('tainacan-taxonomy', 'link_filtered_by_collections')"/>
</label> </label>
<b-taginput <b-taginput
:value="getSelectedTaxonomyCollections()" :model-value="getSelectedTaxonomyCollections()"
autocomplete autocomplete
:open-on-focus="true" :open-on-focus="true"
:data="collections.filter((collection) => !link_filtered_by_collections.includes(collection.id) && (collectionSearchString ? (collection.name.toLowerCase().indexOf(collectionSearchString.toLowerCase()) >= 0) : true) )" :data="collections.filter((collection) => !link_filtered_by_collections.includes(collection.id) && (collectionSearchString ? (collection.name.toLowerCase().indexOf(collectionSearchString.toLowerCase()) >= 0) : true) )"
field="name" field="name"
@input="updateSelectedCollections" @update:model-value="updateSelectedCollections"
@focus="clear()" @focus="clear()"
attached attached
:disabled="do_not_dispaly_term_as_link == 'yes'" :disabled="do_not_dispaly_term_as_link == 'yes'"
@ -160,8 +160,8 @@
&nbsp; &nbsp;
<b-switch <b-switch
size="is-small" size="is-small"
v-model:value="hide_hierarchy_path" v-model="hide_hierarchy_path"
@input="emitValues()" @update:model-value="emitValues()"
true-value="yes" true-value="yes"
false-value="no" /> false-value="no" />
<help-button <help-button

2
src/views/admin/components/metadata-types/taxonomy/Taxonomy.vue
View File

@ -50,7 +50,7 @@
<!-- Term creation modal, used on admin for a complete term creation --> <!-- Term creation modal, used on admin for a complete term creation -->
<b-modal <b-modal
v-model:value="isTermCreationModalOpen" v-model="isTermCreationModalOpen"
:width="768" :width="768"
trap-focus trap-focus
aria-role="dialog" aria-role="dialog"

2
src/views/admin/components/metadata-types/taxonomy/TaxonomyTaginput.vue
View File

@ -8,7 +8,7 @@
:allow-new="false" :allow-new="false"
@add="emitAdd" @add="emitAdd"
@remove="emitRemove" @remove="emitRemove"
v-model:value="selected" v-model="selected"
:data="labels" :data="labels"
:maxtags="maxtags" :maxtags="maxtags"
field="label" field="label"

4
src/views/admin/components/metadata-types/text/FormText.vue
View File

@ -6,8 +6,8 @@
&nbsp; &nbsp;
<b-switch <b-switch
size="is-small" size="is-small"
:value="displaySuggestions" :model-value="displaySuggestions"
@input="onUpdateDisplaySuggestions" @update:model-value="onUpdateDisplaySuggestions"
:true-value="'yes'" :true-value="'yes'"
:false-value="'no'" /> :false-value="'no'" />
<help-button <help-button

8
src/views/admin/components/metadata-types/text/Text.vue
View File

@ -4,20 +4,20 @@
v-if="!getDisplayAutocomplete" v-if="!getDisplayAutocomplete"
:disabled="disabled" :disabled="disabled"
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')" :id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:value="value" :model-value="value"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''" :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
@input="onInput($event)" @update:model-value="onInput($event)"
@blur="onBlur" @blur="onBlur"
@focus="onMobileSpecialFocus" /> @focus="onMobileSpecialFocus" />
<b-autocomplete <b-autocomplete
v-else v-else
:disabled="disabled" :disabled="disabled"
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')" :id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:value="value" :model-value="value"
@blur="onBlur" @blur="onBlur"
:data="options" :data="options"
:loading="isLoadingOptions" :loading="isLoadingOptions"
@input="($event) => { search($event); }" @update:model-value="($event) => { search($event); }"
field="label" field="label"
@select="onSelect" @select="onSelect"
clearable clearable

4
src/views/admin/components/metadata-types/textarea/Textarea.vue
View File

@ -3,8 +3,8 @@
:disabled="disabled" :disabled="disabled"
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')" :id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''" :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
:value="value" :model-value="value"
@input="onInput($event)" @update:model-value="onInput($event)"
@blur="onBlur" @blur="onBlur"
type="textarea" type="textarea"
@focus="onMobileSpecialFocus" /> @focus="onMobileSpecialFocus" />

4
src/views/admin/components/metadata-types/user/FormUser.vue
View File

@ -8,8 +8,8 @@
:message="$i18n.getHelperMessage('tainacan-user', 'default_author')"/> :message="$i18n.getHelperMessage('tainacan-user', 'default_author')"/>
</label> </label>
<b-checkbox <b-checkbox
v-model:value="defaultAuthor" v-model="defaultAuthor"
@input="onUpdateDefaultAuthor" @update:model-value="onUpdateDefaultAuthor"
true-value="yes" true-value="yes"
false-value="no"> false-value="no">
{{ $i18n.get('label_default_author_user') }} {{ $i18n.get('label_default_author_user') }}

4
src/views/admin/components/metadata-types/user/User.vue
View File

@ -6,8 +6,8 @@
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')" :id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
size="is-small" size="is-small"
icon="account" icon="account"
:value="selected" :model-value="selected"
@input="onInput" @update:model-value="onInput"
@blur="onBlur" @blur="onBlur"
:data="options" :data="options"
:maxtags="maxtags != undefined ? maxtags : (itemMetadatum.metadatum.multiple == 'yes' || allowNew === true ? (maxMultipleValues !== undefined ? maxMultipleValues : null) : '1')" :maxtags="maxtags != undefined ? maxtags : (itemMetadatum.metadatum.multiple == 'yes' || allowNew === true ? (maxMultipleValues !== undefined ? maxMultipleValues : null) : '1')"

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

@ -15,7 +15,7 @@
</header> </header>
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
v-model:active="isLoadingActivity" v-model="isLoadingActivity"
:can-cancel="false"/> :can-cancel="false"/>
<div <div
v-if="!isLoadingActivity" v-if="!isLoadingActivity"

2
src/views/admin/components/modals/available-exporters-modal.vue
View File

@ -43,7 +43,7 @@
</footer> </footer>
<b-loading <b-loading
v-model:active="isLoading" v-model="isLoading"
:can-cancel="false"/> :can-cancel="false"/>
</section> </section>
</div> </div>

2
src/views/admin/components/modals/available-importers-modal.vue
View File

@ -32,7 +32,7 @@
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
v-model:active="isLoading" v-model="isLoading"
:can-cancel="false"/> :can-cancel="false"/>
</div> </div>

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

@ -30,7 +30,7 @@
:disabled="!!bulkEditionProcedures[criterion].metadatum || metadataIsLoading" :disabled="!!bulkEditionProcedures[criterion].metadatum || metadataIsLoading"
class="tainacan-bulk-edition-field tainacan-bulk-edition-field-not-last" class="tainacan-bulk-edition-field tainacan-bulk-edition-field-not-last"
:placeholder="$i18n.get('instruction_select_a_metadatum')" :placeholder="$i18n.get('instruction_select_a_metadatum')"
@input="addToBulkEditionProcedures($event, 'metadatum', criterion)"> @update:model-value="addToBulkEditionProcedures($event, 'metadatum', criterion)">
<template <template
v-for="(metadatum, index) in metadata" v-for="(metadatum, index) in metadata"
:key="index"> :key="index">
@ -66,10 +66,10 @@
<b-select <b-select
:class="{'is-field-history': bulkEditionProcedures[criterion].isDone, 'hidden-select-arrow': !!bulkEditionProcedures[criterion].action }" :class="{'is-field-history': bulkEditionProcedures[criterion].isDone, 'hidden-select-arrow': !!bulkEditionProcedures[criterion].action }"
:disabled="!!bulkEditionProcedures[criterion].action || !bulkEditionProcedures[criterion].metadatum" :disabled="!!bulkEditionProcedures[criterion].action || !bulkEditionProcedures[criterion].metadatum"
:value="bulkEditionProcedures[criterion].action ? bulkEditionProcedures[criterion].action : undefined" :model-value="bulkEditionProcedures[criterion].action ? bulkEditionProcedures[criterion].action : undefined"
class="tainacan-bulk-edition-field tainacan-bulk-edition-field-not-last" class="tainacan-bulk-edition-field tainacan-bulk-edition-field-not-last"
:placeholder="$i18n.get('instruction_select_a_action')" :placeholder="$i18n.get('instruction_select_a_action')"
@input="addToBulkEditionProcedures($event, 'action', criterion)"> @update:model-value="addToBulkEditionProcedures($event, 'action', criterion)">
<template v-if="bulkEditionProcedures[criterion].metadatum"> <template v-if="bulkEditionProcedures[criterion].metadatum">
<option <option
v-for="(edtAct, key) in getValidEditionActions(bulkEditionProcedures[criterion].metadatum)" v-for="(edtAct, key) in getValidEditionActions(bulkEditionProcedures[criterion].metadatum)"
@ -129,7 +129,7 @@
:disabled="bulkEditionProcedures[criterion].isDone" :disabled="bulkEditionProcedures[criterion].isDone"
class="tainacan-bulk-edition-field tainacan-bulk-edition-field-last" class="tainacan-bulk-edition-field tainacan-bulk-edition-field-last"
:placeholder="$i18n.get('instruction_select_a_status2')" :placeholder="$i18n.get('instruction_select_a_status2')"
@input="addToBulkEditionProcedures($event, 'newValue', criterion)"> @update:model-value="addToBulkEditionProcedures($event, 'newValue', criterion)">
<option <option
v-for="(statusOption, index) of $statusHelper.getStatuses().filter(option => { return option.value != 'trash' })" v-for="(statusOption, index) of $statusHelper.getStatuses().filter(option => { return option.value != 'trash' })"
:key="index" :key="index"
@ -145,7 +145,7 @@
:disabled="bulkEditionProcedures[criterion].isDone" :disabled="bulkEditionProcedures[criterion].isDone"
class="tainacan-bulk-edition-field tainacan-bulk-edition-field-last" class="tainacan-bulk-edition-field tainacan-bulk-edition-field-last"
:placeholder="$i18n.get('instruction_select_a_comments_status')" :placeholder="$i18n.get('instruction_select_a_comments_status')"
@input="addToBulkEditionProcedures($event, 'newValue', criterion)"> @update:model-value="addToBulkEditionProcedures($event, 'newValue', criterion)">
<option <option
v-for="(statusOption, index) of $commentsStatusHelper.getStatuses()" v-for="(statusOption, index) of $commentsStatusHelper.getStatuses()"
:key="index" :key="index"
@ -162,7 +162,7 @@
:disabled="bulkEditionProcedures[criterion].isDone || bulkEditionProcedures[criterion].isExecuting && !!bulkEditionProcedures[criterion].metadatumIdCopyFrom || metadataIsLoading" :disabled="bulkEditionProcedures[criterion].isDone || bulkEditionProcedures[criterion].isExecuting && !!bulkEditionProcedures[criterion].metadatumIdCopyFrom || metadataIsLoading"
class="tainacan-bulk-edition-field tainacan-bulk-edition-field-last" class="tainacan-bulk-edition-field tainacan-bulk-edition-field-last"
:placeholder="$i18n.get('instruction_select_a_metadatum')" :placeholder="$i18n.get('instruction_select_a_metadatum')"
@input="addToBulkEditionProcedures($event, 'metadatumIdCopyFrom', criterion)"> @update:model-value="addToBulkEditionProcedures($event, 'metadatumIdCopyFrom', criterion)">
<template <template
v-for="(metadatumForCopy, index) in getAllowedMetadataForCopy(criterion)" v-for="(metadatumForCopy, index) in getAllowedMetadataForCopy(criterion)"
:key="index"> :key="index">

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

@ -21,8 +21,8 @@
:key="roleIndex"> :key="roleIndex">
<b-checkbox <b-checkbox
v-if="!capability.roles_inherited[role.slug]" v-if="!capability.roles_inherited[role.slug]"
:value="capability.roles[role.slug] || capability.roles_inherited[role.slug] ? true : false" :model-value="capability.roles[role.slug] || capability.roles_inherited[role.slug] ? true : false"
@input="($event) => updateRole(role.slug, $event)" @update:model-value="($event) => updateRole(role.slug, $event)"
name="roles"> name="roles">
{{ role.name }} {{ role.name }}
</b-checkbox> </b-checkbox>
@ -56,7 +56,7 @@
<b-checkbox <b-checkbox
v-if="capability.roles_inherited[role.slug]" v-if="capability.roles_inherited[role.slug]"
class="has-text-yellow2" class="has-text-yellow2"
:value="capability.roles[role.slug] || capability.roles_inherited[role.slug] ? true : false" :model-value="capability.roles[role.slug] || capability.roles_inherited[role.slug] ? true : false"
name="roles_inherited" name="roles_inherited"
disabled> disabled>
{{ role.name }} {{ role.name }}
@ -75,7 +75,7 @@
<div v-else> <div v-else>
<b-loading <b-loading
is-full-page="false" is-full-page="false"
v-model:active="isLoading" /> v-model="isLoading" />
</div> </div>
<div class="field is-grouped form-submit"> <div class="field is-grouped form-submit">
<div class="control"> <div class="control">

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

@ -90,12 +90,12 @@
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
v-model:active="isLoadingMetadatumMappers" v-model="isLoadingMetadatumMappers"
:can-cancel="false"/> :can-cancel="false"/>
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
v-model:active="isCreatingCollectionPreset" v-model="isCreatingCollectionPreset"
:can-cancel="false"/> :can-cancel="false"/>
<footer class="field is-grouped form-submit"> <footer class="field is-grouped form-submit">

2
src/views/admin/components/modals/collections-modal.vue
View File

@ -40,7 +40,7 @@
</div> </div>
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
v-model:active="isLoading" v-model="isLoading"
:can-cancel="false"/> :can-cancel="false"/>
<footer class="field is-grouped form-submit"> <footer class="field is-grouped form-submit">

4
src/views/admin/components/modals/exposers-modal.vue
View File

@ -121,7 +121,7 @@
placement: 'bottom', placement: 'bottom',
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
v-model:value="shouldRespectFetchOnly">{{ $i18n.get('label_expose_only_displayed_metadata') }}</b-checkbox> v-model="shouldRespectFetchOnly">{{ $i18n.get('label_expose_only_displayed_metadata') }}</b-checkbox>
</div> </div>
<b-field <b-field
:addons="false" :addons="false"
@ -228,7 +228,7 @@
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
v-model:active="isLoading" v-model="isLoading"
:can-cancel="false"/> :can-cancel="false"/>
<footer class="field is-grouped form-submit"> <footer class="field is-grouped form-submit">

2
src/views/admin/components/modals/item-document-text-modal.vue
View File

@ -9,7 +9,7 @@
ref="item-document-text-input" ref="item-document-text-input"
type="textarea" type="textarea"
:autofocus="true" :autofocus="true"
v-model:value="localTextContent"/> v-model="localTextContent"/>
<div class="field is-grouped form-submit"> <div class="field is-grouped form-submit">
<div class="control"> <div class="control">

10
src/views/admin/components/modals/item-document-url-modal.vue
View File

@ -7,7 +7,7 @@
<b-input <b-input
aria-labelledby="item-document-url-modal-title" aria-labelledby="item-document-url-modal-title"
ref="item-document-url-input" ref="item-document-url-input"
v-model:value="localUrlLink" /> v-model="localUrlLink" />
<br> <br>
<b-field <b-field
:addons="false" :addons="false"
@ -15,7 +15,7 @@
&nbsp; &nbsp;
<b-switch <b-switch
size="is-small" size="is-small"
v-model:value="localUrlForcedIframe" /> v-model="localUrlForcedIframe" />
<help-button <help-button
:title="$i18n.get('label_document_option_forced_iframe')" :title="$i18n.get('label_document_option_forced_iframe')"
:message="$i18n.get('info_document_option_forced_iframe')" /> :message="$i18n.get('info_document_option_forced_iframe')" />
@ -29,7 +29,7 @@
:aria-minus-label="$i18n.get('label_decrease')" :aria-minus-label="$i18n.get('label_decrease')"
:aria-plus-label="$i18n.get('label_increase')" :aria-plus-label="$i18n.get('label_increase')"
min="1" min="1"
v-model:value="localUrlIframeWidth" v-model="localUrlIframeWidth"
step="1" /> step="1" />
</b-field> </b-field>
<b-field :label="$i18n.get('label_document_option_iframe_height')"> <b-field :label="$i18n.get('label_document_option_iframe_height')">
@ -37,7 +37,7 @@
:aria-minus-label="$i18n.get('label_decrease')" :aria-minus-label="$i18n.get('label_decrease')"
:aria-plus-label="$i18n.get('label_increase')" :aria-plus-label="$i18n.get('label_increase')"
min="1" min="1"
v-model:value="localUrlIframeHeight" v-model="localUrlIframeHeight"
step="1" /> step="1" />
</b-field> </b-field>
</b-field> </b-field>
@ -55,7 +55,7 @@
&nbsp; &nbsp;
<b-switch <b-switch
size="is-small" size="is-small"
v-model:value="localUrlIsImage" /> v-model="localUrlIsImage" />
<help-button <help-button
:title="$i18n.get('label_document_option_is_image')" :title="$i18n.get('label_document_option_is_image')"
:message="$i18n.get('info_document_option_is_image')" /> :message="$i18n.get('info_document_option_is_image')" />

4
src/views/admin/components/navigation/tainacan-header.vue
View File

@ -59,8 +59,8 @@
:placeholder="$i18n.get('instruction_search_in_repository')" :placeholder="$i18n.get('instruction_search_in_repository')"
class="search-header" class="search-header"
size="is-small" size="is-small"
:value="searchQuery" :model-value="searchQuery"
@input="futureSearchQuery = $event.target.value" @update:model-value="futureSearchQuery = $event.target.value"
@keyup.enter="updateSearch()" @keyup.enter="updateSearch()"
icon-right="magnify" icon-right="magnify"
icon-right-clickable icon-right-clickable

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

@ -20,8 +20,8 @@
<b-tabs <b-tabs
size="is-small" size="is-small"
animated animated
@input="fetchSelectedLabels()" @update:model-value="fetchSelectedLabels()"
v-model:value="activeTab" v-model="activeTab"
:class="{ 'hidden-tabs-section': !isModal || !hasToDisplaySearchBar }"> :class="{ 'hidden-tabs-section': !isModal || !hasToDisplaySearchBar }">
<b-tab-item <b-tab-item
:style="{ margin: isModal ? '0' : '0 0 1rem 0' }" :style="{ margin: isModal ? '0' : '0 0 1rem 0' }"
@ -36,8 +36,8 @@
autocomplete="on" autocomplete="on"
:placeholder="$i18n.get('instruction_search')" :placeholder="$i18n.get('instruction_search')"
:aria-label="$i18n.get('instruction_search')" :aria-label="$i18n.get('instruction_search')"
v-model:value="optionName" v-model="optionName"
@input="autoComplete" @update:model-value="autoComplete"
icon-right="magnify" icon-right="magnify"
type="search" /> type="search" />
</b-field> </b-field>
@ -88,7 +88,7 @@
</template> </template>
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
v-model:active="isLoadingSearch"/> v-model="isLoadingSearch"/>
</ul> </ul>
<a <a
v-if="!noMoreSearchPage" v-if="!noMoreSearchPage"
@ -151,7 +151,7 @@
</template> </template>
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
v-model:active="isCheckboxListLoading"/> v-model="isCheckboxListLoading"/>
</ul> </ul>
<a <a
v-if="!noMorePage" v-if="!noMorePage"
@ -250,7 +250,7 @@
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
v-model:active="isColumnLoading"/> v-model="isColumnLoading"/>
</b-tab-item> </b-tab-item>
@ -290,7 +290,7 @@
</section> </section>
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
v-model:active="isSelectedTermsLoading"/> v-model="isSelectedTermsLoading"/>
</div> </div>
</b-tab-item> </b-tab-item>
</b-tabs> </b-tabs>
@ -813,7 +813,7 @@
this.$eventBusSearch.resetPageOnStore(); this.$eventBusSearch.resetPageOnStore();
if (this.isTaxonomy) { if (this.isTaxonomy) {
this.$eventBusSearch.$emit('input', { this.$eventBusSearchEmitter.emit('input', {
filter: 'checkbox', filter: 'checkbox',
taxonomy: this.taxonomy, taxonomy: this.taxonomy,
compare: 'IN', compare: 'IN',
@ -822,7 +822,7 @@
terms: this.selected terms: this.selected
}); });
} else { } else {
this.$eventBusSearch.$emit('input', { this.$eventBusSearchEmitter.emit('input', {
filter: 'checkbox', filter: 'checkbox',
compare: 'IN', compare: 'IN',
metadatum_id: this.metadatumId ? this.metadatumId : this.filter.metatadum_id, metadatum_id: this.metadatumId ? this.metadatumId : this.filter.metatadum_id,

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

@ -10,8 +10,8 @@
<b-tabs <b-tabs
size="is-small" size="is-small"
animated animated
@input="fetchSelectedLabels()" @update:model-value="fetchSelectedLabels()"
v-model:value="activeTab" v-model="activeTab"
:class="{ 'hidden-tabs-section': (shouldBeginWithListExpanded && !hasToDisplaySearchBar) }"> :class="{ 'hidden-tabs-section': (shouldBeginWithListExpanded && !hasToDisplaySearchBar) }">
<b-tab-item :label="isTaxonomy ? $i18n.get('label_all_terms') : $i18n.get('label_all_metadatum_values')"> <b-tab-item :label="isTaxonomy ? $i18n.get('label_all_terms') : $i18n.get('label_all_metadatum_values')">
@ -39,8 +39,8 @@
autocomplete="on" autocomplete="on"
:placeholder="metadatum.placeholder ? metadatum.placeholder : ( expandResultsSection ? $i18n.get('instruction_search') : $i18n.get('instruction_click_to_see_or_search') )" :placeholder="metadatum.placeholder ? metadatum.placeholder : ( expandResultsSection ? $i18n.get('instruction_search') : $i18n.get('instruction_click_to_see_or_search') )"
:aria-label="expandResultsSection ? $i18n.get('instruction_search') : $i18n.get('instruction_click_to_see_or_search')" :aria-label="expandResultsSection ? $i18n.get('instruction_search') : $i18n.get('instruction_click_to_see_or_search')"
v-model:value="optionName" v-model="optionName"
@input="autoComplete" @update:model-value="autoComplete"
@focus="!shouldBeginWithListExpanded && !expandResultsSection ? toggleResultsSection() : null" @focus="!shouldBeginWithListExpanded && !expandResultsSection ? toggleResultsSection() : null"
icon-right="magnify" icon-right="magnify"
type="search" /> type="search" />
@ -101,7 +101,7 @@
</template> </template>
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
v-model:active="isLoadingSearch"/> v-model="isLoadingSearch"/>
</ul> </ul>
<a <a
v-if="!noMoreSearchPage" v-if="!noMoreSearchPage"
@ -153,7 +153,7 @@
</li> </li>
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
v-model:active="isCheckboxListLoading"/> v-model="isCheckboxListLoading"/>
</ul> </ul>
<a <a
v-if="!noMorePage" v-if="!noMorePage"
@ -258,7 +258,7 @@
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
v-model:active="isColumnLoading"/> v-model="isColumnLoading"/>
</b-tab-item> </b-tab-item>
@ -301,7 +301,7 @@
</section> </section>
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
v-model:active="isSelectedTermsLoading"/> v-model="isSelectedTermsLoading"/>
</div> </div>
</b-tab-item> </b-tab-item>
</b-tabs> </b-tabs>

2
src/views/admin/components/other/custom-dialog.vue
View File

@ -33,7 +33,7 @@
<span v-html="message" /> <span v-html="message" />
<div v-if="showNeverShowAgainOption"> <div v-if="showNeverShowAgainOption">
<b-checkbox <b-checkbox
@input="changeNeverShowMessageAgain($event)" @update:model-value="changeNeverShowMessageAgain($event)"
:native-value="neverShowAgain"> :native-value="neverShowAgain">
{{ $i18n.get('instruction_never_show_message_again') }} {{ $i18n.get('instruction_never_show_message_again') }}
</b-checkbox> </b-checkbox>

4
src/views/admin/components/other/item-copy-dialog.vue
View File

@ -42,9 +42,9 @@
:aria-minus-label="$i18n.get('label_decrease')" :aria-minus-label="$i18n.get('label_decrease')"
:aria-plus-label="$i18n.get('label_increase')" :aria-plus-label="$i18n.get('label_increase')"
min="1" min="1"
:value="copyCount" :model-value="copyCount"
step="1" step="1"
@input="copyCount = $event"/> @update:model-value="copyCount = $event"/>
</b-field> </b-field>
</div> </div>
</section> </section>

2
src/views/admin/components/other/item-creation-status-dialog.vue
View File

@ -35,7 +35,7 @@
<!-- Status -------------------------------- --> <!-- Status -------------------------------- -->
<div class="status-radios"> <div class="status-radios">
<b-radio <b-radio
v-model:value="selectedStatus" v-model="selectedStatus"
v-for="(statusOption, index) of availableStatus" v-for="(statusOption, index) of availableStatus"
:key="index" :key="index"
:native-value="statusOption.slug"> :native-value="statusOption.slug">

7
src/views/admin/components/other/processes-popup.vue
View File

@ -100,12 +100,7 @@
<span <span
v-if="bgProcess.status === 'running'" v-if="bgProcess.status === 'running'"
class="icon has-text-success loading-icon"> class="icon has-text-success loading-icon">
<!--<progress-->
<!--:value="bgProcess.progress_value > 0 ? bgProcess.progress_value : 0"-->
<!--max="100"-->
<!--class="progress is-success is-small is-loading">-->
<!--{{ `(${ bgProcess.progress_value &lt;&equals; 0 ? 0 : bgProcess.progress_value }%)` }}-->
<!--</progress>-->
<div class="control has-icons-right is-loading is-clearfix" /> <div class="control has-icons-right is-loading is-clearfix" />
</span> </span>
</div> </div>

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

@ -33,12 +33,12 @@
class="type-of-deletion-options"> class="type-of-deletion-options">
<b-radio <b-radio
native-value="selected" native-value="selected"
v-model:value="typeOfDelete"> v-model="typeOfDelete">
{{ amountOfTerms > 1 ? $i18n.get('label_remove_selected_terms') : $i18n.get('label_remove_selected_term') }} {{ amountOfTerms > 1 ? $i18n.get('label_remove_selected_terms') : $i18n.get('label_remove_selected_term') }}
</b-radio> </b-radio>
<b-radio <b-radio
native-value="descendants" native-value="descendants"
v-model:value="typeOfDelete"> v-model="typeOfDelete">
{{ amountOfTerms > 1 ? $i18n.get('label_remove_terms_and_descendants') : $i18n.get('label_remove_term_and_descendants') }} {{ amountOfTerms > 1 ? $i18n.get('label_remove_terms_and_descendants') : $i18n.get('label_remove_term_and_descendants') }}
</b-radio> </b-radio>
</div> </div>

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

@ -37,7 +37,7 @@
</label> </label>
<b-taginput <b-taginput
v-model:value="termNames" v-model="termNames"
attached attached
:confirm-keys="termNamesSeparator" :confirm-keys="termNamesSeparator"
:on-paste-separators="termNamesSeparator" :on-paste-separators="termNamesSeparator"
@ -52,7 +52,7 @@
v-for="separator of ['Enter', ',', ';', '|']" v-for="separator of ['Enter', ',', ';', '|']"
:key="separator" :key="separator"
name="term-multiple-insertion-separator" name="term-multiple-insertion-separator"
v-model:value="termNamesSeparator" v-model="termNamesSeparator"
:native-value="separator" :native-value="separator"
:disabled="separator == 'Enter'"> :disabled="separator == 'Enter'">
<kbd>{{ separator }}</kbd> <kbd>{{ separator }}</kbd>
@ -66,12 +66,12 @@
class="parent-term-options"> class="parent-term-options">
<b-radio <b-radio
:native-value="false" :native-value="false"
v-model:value="hasParent"> v-model="hasParent">
{{ $i18n.get('label_no_parent_root_term') }} {{ $i18n.get('label_no_parent_root_term') }}
</b-radio> </b-radio>
<b-radio <b-radio
:native-value="true" :native-value="true"
v-model:value="hasParent"> v-model="hasParent">
{{ $i18n.get('instruction_select_a_parent_term') }} {{ $i18n.get('instruction_select_a_parent_term') }}
</b-radio> </b-radio>
<b-autocomplete <b-autocomplete
@ -81,10 +81,10 @@
:data="parentTerms" :data="parentTerms"
field="name" field="name"
clearable clearable
v-model:value="parentTermName" v-model="parentTermName"
@select="onSelectParentTerm($event)" @select="onSelectParentTerm($event)"
:loading="isFetchingParentTerms" :loading="isFetchingParentTerms"
@input="fetchParentTerms" @update:model-value="fetchParentTerms"
check-infinite-scroll check-infinite-scroll
:append-to-body="true" :append-to-body="true"
@infinite-scroll="fetchMoreParentTerms"> @infinite-scroll="fetchMoreParentTerms">

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

@ -33,12 +33,12 @@
<div class="parent-term-options"> <div class="parent-term-options">
<b-radio <b-radio
:native-value="false" :native-value="false"
v-model:value="hasParent"> v-model="hasParent">
{{ $i18n.get('label_no_parent_root_term') }} {{ $i18n.get('label_no_parent_root_term') }}
</b-radio> </b-radio>
<b-radio <b-radio
:native-value="true" :native-value="true"
v-model:value="hasParent"> v-model="hasParent">
{{ $i18n.get('instruction_select_a_parent_term') }} {{ $i18n.get('instruction_select_a_parent_term') }}
</b-radio> </b-radio>
<b-autocomplete <b-autocomplete
@ -47,10 +47,10 @@
:data="parentTerms" :data="parentTerms"
field="name" field="name"
clearable clearable
v-model:value="parentTermName" v-model="parentTermName"
@select="onSelectParentTerm($event)" @select="onSelectParentTerm($event)"
:loading="isFetchingParentTerms" :loading="isFetchingParentTerms"
@input="fetchParentTerms" @update:model-value="fetchParentTerms"
:disabled="!hasParent" :disabled="!hasParent"
check-infinite-scroll check-infinite-scroll
:append-to-body="true" :append-to-body="true"

28
src/views/admin/components/search/advanced-search.vue
View File

@ -18,8 +18,8 @@
:placeholder="$i18n.get('instruction_select_a_metadatum')" :placeholder="$i18n.get('instruction_select_a_metadatum')"
:aria-label="$i18n.get('instruction_select_a_metadatum')" :aria-label="$i18n.get('instruction_select_a_metadatum')"
:disabled="advancedSearchQuery[searchCriterion.type] && advancedSearchQuery[searchCriterion.type][searchCriterion.index]" :disabled="advancedSearchQuery[searchCriterion.type] && advancedSearchQuery[searchCriterion.type][searchCriterion.index]"
:value="(advancedSearchQuery[searchCriterion.type] && advancedSearchQuery[searchCriterion.type][searchCriterion.index] ) ? advancedSearchQuery[searchCriterion.type][searchCriterion.index].key : null" :model-value="(advancedSearchQuery[searchCriterion.type] && advancedSearchQuery[searchCriterion.type][searchCriterion.index] ) ? advancedSearchQuery[searchCriterion.type][searchCriterion.index].key : null"
@input="addMetadatumToAdvancedSearchQuery( @update:model-value="addMetadatumToAdvancedSearchQuery(
{ {
metadatumId: $event, metadatumId: $event,
type: (metadataAsObject[$event] && metadataAsObject[$event].metadata_type_object) ? metadataAsObject[$event].metadata_type_object.primitive_type : '', type: (metadataAsObject[$event] && metadataAsObject[$event].metadata_type_object) ? metadataAsObject[$event].metadata_type_object.primitive_type : '',
@ -67,8 +67,8 @@
<b-select <b-select
:loading="isLoadingMetadata" :loading="isLoadingMetadata"
v-if="searchCriterion.type == 'metaquery' && advancedSearchQuery.metaquery[searchCriterion.index]" v-if="searchCriterion.type == 'metaquery' && advancedSearchQuery.metaquery[searchCriterion.index]"
@input="addComparatorToAdvancedSearchQuery($event, searchCriterion)" @update:model-value="addComparatorToAdvancedSearchQuery($event, searchCriterion)"
:value="advancedSearchQuery.metaquery[searchCriterion.index].compare" :model-value="advancedSearchQuery.metaquery[searchCriterion.index].compare"
:placeholder="$i18n.get('label_criterion_to_compare')" :placeholder="$i18n.get('label_criterion_to_compare')"
:aria-label="$i18n.get('label_criterion_to_compare')"> :aria-label="$i18n.get('label_criterion_to_compare')">
<option <option
@ -80,8 +80,8 @@
<b-select <b-select
:loading="isLoadingMetadata" :loading="isLoadingMetadata"
v-else-if="searchCriterion.type == 'taxquery' && advancedSearchQuery.taxquery[searchCriterion.index]" v-else-if="searchCriterion.type == 'taxquery' && advancedSearchQuery.taxquery[searchCriterion.index]"
@input="addComparatorToAdvancedSearchQuery($event, searchCriterion)" @update:model-value="addComparatorToAdvancedSearchQuery($event, searchCriterion)"
:value="advancedSearchQuery.taxquery[searchCriterion.index].operator" :model-value="advancedSearchQuery.taxquery[searchCriterion.index].operator"
:placeholder="$i18n.get('label_criterion_to_compare')" :placeholder="$i18n.get('label_criterion_to_compare')"
:aria-label="$i18n.get('label_criterion_to_compare')"> :aria-label="$i18n.get('label_criterion_to_compare')">
<option <option
@ -104,8 +104,8 @@
v-if="getAdvancedSearchQueryCriterionMetadataType(searchCriterion.index) == 'int' || getAdvancedSearchQueryCriterionMetadataType(searchCriterion.index) == 'float'" v-if="getAdvancedSearchQueryCriterionMetadataType(searchCriterion.index) == 'int' || getAdvancedSearchQueryCriterionMetadataType(searchCriterion.index) == 'float'"
type="number" type="number"
step="any" step="any"
@input="addValueToAdvancedSearchQuery($event, searchCriterion)" @update:model-value="addValueToAdvancedSearchQuery($event, searchCriterion)"
:value="advancedSearchQuery.metaquery[searchCriterion.index].value" :model-value="advancedSearchQuery.metaquery[searchCriterion.index].value"
:placeholder="$i18n.get('label_number_to_search_for')" :placeholder="$i18n.get('label_number_to_search_for')"
:aria-label="$i18n.get('label_number_to_search_for')" :aria-label="$i18n.get('label_number_to_search_for')"
/> />
@ -121,16 +121,16 @@
<b-input <b-input
v-else v-else
type="text" type="text"
@input="addValueToAdvancedSearchQuery($event, searchCriterion)" @update:model-value="addValueToAdvancedSearchQuery($event, searchCriterion)"
:value="advancedSearchQuery.metaquery[searchCriterion.index].value" :model-value="advancedSearchQuery.metaquery[searchCriterion.index].value"
:placeholder="$i18n.get('label_string_to_search_for')" :placeholder="$i18n.get('label_string_to_search_for')"
:aria-label="$i18n.get('label_string_to_search_for')" :aria-label="$i18n.get('label_string_to_search_for')"
/> />
</template> </template>
<b-input <b-input
v-else-if="searchCriterion.type == 'taxquery' && advancedSearchQuery.taxquery[searchCriterion.index]" v-else-if="searchCriterion.type == 'taxquery' && advancedSearchQuery.taxquery[searchCriterion.index]"
:value="advancedSearchQuery.taxquery[searchCriterion.index].terms" :model-value="advancedSearchQuery.taxquery[searchCriterion.index].terms"
@input="addValueToAdvancedSearchQuery($event, searchCriterion)" @update:model-value="addValueToAdvancedSearchQuery($event, searchCriterion)"
type="text" type="text"
:placeholder="$i18n.get('label_string_to_search_for')" :placeholder="$i18n.get('label_string_to_search_for')"
:aria-label="$i18n.get('label_string_to_search_for')" /> :aria-label="$i18n.get('label_string_to_search_for')" />
@ -212,7 +212,7 @@
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
v-model:active="isLoadingMetadata" /> v-model="isLoadingMetadata" />
<section <section
v-if="!isLoadingMetadata && metadataAsArray && metadataAsArray.length <= 0" v-if="!isLoadingMetadata && metadataAsArray && metadataAsArray.length <= 0"
@ -625,7 +625,7 @@
} }
this.hasUpdatedSearch = false; this.hasUpdatedSearch = false;
this.$eventBusSearch.$emit('performAdvancedSearch', this.advancedSearchQuery); this.$eventBusSearchEmitter.emit('performAdvancedSearch', this.advancedSearchQuery);
}, },
getAdvancedSearchQueryCriterionMetadataType(searchCriterion) { getAdvancedSearchQueryCriterionMetadataType(searchCriterion) {
if (this.advancedSearchQuery.metaquery[searchCriterion] && if (this.advancedSearchQuery.metaquery[searchCriterion] &&

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

@ -5,7 +5,7 @@
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
v-model:active="isLoadingFilters"/> v-model="isLoadingFilters"/>
<h3 <h3
id="filters-label-landmark" id="filters-label-landmark"
@ -398,7 +398,7 @@
this.prepareFilters(); this.prepareFilters();
if (this.isUsingElasticSearch) if (this.isUsingElasticSearch)
this.$eventBusSearch.$emitter.on('isLoadingItems', this.updateIsLoadingItems); this.$eventBusSearchEmitter.on('isLoadingItems', this.updateIsLoadingItems);
}, },
beforeUnmount() { beforeUnmount() {
// Cancels previous collection name Request // Cancels previous collection name Request
@ -414,7 +414,7 @@
this.filtersSearchCancel.cancel('Filters search Canceled.'); this.filtersSearchCancel.cancel('Filters search Canceled.');
if (this.isUsingElasticSearch) if (this.isUsingElasticSearch)
this.$eventBusSearch.$emitter.off('isLoadingItems', this.updateIsLoadingItems); this.$eventBusSearchEmitter.off('isLoadingItems', this.updateIsLoadingItems);
}, },
methods: { methods: {

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

@ -45,8 +45,7 @@
</ul> </ul>
<button <button
class="swiper-button-prev" class="swiper-button-prev"
id="tainacan-filter-tags-prev" id="tainacan-filter-tags-prev">
slot="button-prev">
<svg <svg
width="24" width="24"
height="24" height="24"
@ -59,8 +58,7 @@
</button> </button>
<button <button
class="swiper-button-next" class="swiper-button-next"
id="tainacan-filter-tags-next" id="tainacan-filter-tags-next">
slot="button-next">
<svg <svg
width="24" width="24"
height="24" height="24"

25
src/views/admin/components/search/pagination.vue
View File

@ -38,10 +38,10 @@
horizontal horizontal
:label="$i18n.get('label_items_per_page')"> :label="$i18n.get('label_items_per_page')">
<b-select <b-select
:value="itemsPerPage" :model-value="itemsPerPage"
aria-controls="items-list-results" aria-controls="items-list-results"
aria-labelledby="items-per-page-select" aria-labelledby="items-per-page-select"
@input="onChangeItemsPerPage"> @update:model-value="onChangeItemsPerPage">
<template <template
v-for="(itemsPerPageOption, index) of itemsPerPageOptions" v-for="(itemsPerPageOption, index) of itemsPerPageOptions"
:key="index"> :key="index">
@ -67,15 +67,16 @@
@change="onPageChange" @change="onPageChange"
aria-role="list" aria-role="list"
trap-focus> trap-focus>
<button <template #trigger>
aria-labelledby="go-to-page-dropdown" <button
class="button is-white" aria-labelledby="go-to-page-dropdown"
slot="trigger"> class="button is-white">
<span>{{ page }}</span> <span>{{ page }}</span>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
</span> </span>
</button> </button>
</template>
<b-dropdown-item <b-dropdown-item
aria-controls="items-list-results" aria-controls="items-list-results"
role="button" role="button"
@ -94,7 +95,7 @@
aria-controls="items-list-results" aria-controls="items-list-results"
@change="onPageChange" @change="onPageChange"
:total="totalItems" :total="totalItems"
v-model:current="page" v-model="page"
order="is-centered" order="is-centered"
size="is-small" size="is-small"
:per-page="itemsPerPage" :per-page="itemsPerPage"

16
src/views/admin/js/admin-main.js
View File

@ -30,7 +30,6 @@ import {
Numberinput Numberinput
} from '@ntohq/buefy-next'; } from '@ntohq/buefy-next';
import VTooltip from 'floating-vue'; import VTooltip from 'floating-vue';
import draggable from 'vuedraggable';
import VueTheMask from 'vue-the-mask'; import VueTheMask from 'vue-the-mask';
import cssVars from 'css-vars-ponyfill'; import cssVars from 'css-vars-ponyfill';
import VueBlurHash from 'another-vue3-blurhash'; import VueBlurHash from 'another-vue3-blurhash';
@ -72,7 +71,6 @@ import TainacanTitle from '../components/navigation/tainacan-title.vue';
import store from './store/store'; import store from './store/store';
import router from './router'; import router from './router';
import eventBusSearch from './event-bus-search'; import eventBusSearch from './event-bus-search';
import eventBusMetadataList from './event-bus-metadata-list.js';
import { import {
I18NPlugin, I18NPlugin,
UserPrefsPlugin, UserPrefsPlugin,
@ -89,6 +87,14 @@ import {
} from './utilities'; } from './utilities';
import mitt from 'mitt'; import mitt from 'mitt';
import { configureCompat } from 'vue'
// Desabilita a compatibilidade Vue2 para certos recursos já tratados no código
configureCompat({
COMPONENT_V_MODEL: false
})
export default (element) => { export default (element) => {
function renderTainacanAdminPage() { function renderTainacanAdminPage() {
@ -101,8 +107,6 @@ export default (element) => {
const app = createApp({ const app = createApp({
el: '#tainacan-admin-app', el: '#tainacan-admin-app',
router,
store,
render: () => h(AdminPage) render: () => h(AdminPage)
}); });
@ -112,6 +116,9 @@ export default (element) => {
const emitter = mitt(); const emitter = mitt();
app.config.globalProperties.$emitter = emitter; app.config.globalProperties.$emitter = emitter;
const eventBusMetadataList = mitt();
app.config.globalProperties.$eventBusMetadataList = emitter;
/* Registers Extra Vue Plugins passed to the window.tainacan_extra_plugins */ /* Registers Extra Vue Plugins passed to the window.tainacan_extra_plugins */
if (typeof window.tainacan_extra_plugins != "undefined") { if (typeof window.tainacan_extra_plugins != "undefined") {
for (let [extraVuePluginName, extraVuePluginObject] of Object.entries(window.tainacan_extra_plugins)) for (let [extraVuePluginName, extraVuePluginObject] of Object.entries(window.tainacan_extra_plugins))
@ -232,7 +239,6 @@ export default (element) => {
/* Others */ /* Others */
app.component('help-button', HelpButton); app.component('help-button', HelpButton);
app.component('draggable', draggable);
app.component('tainacan-title', TainacanTitle); app.component('tainacan-title', TainacanTitle);
// Event bus are needed to facilate comunication between child-parent-child components // Event bus are needed to facilate comunication between child-parent-child components

2
src/views/admin/js/event-bus-item-metadata.js
View File

@ -5,7 +5,6 @@ import mitt from 'mitt';
const emitter = mitt(); const emitter = mitt();
export const eventBusItemMetadata = createApp({ export const eventBusItemMetadata = createApp({
store,
data: { data: {
errors : [], errors : [],
conditionalSections: {} conditionalSections: {}
@ -160,3 +159,4 @@ export const eventBusItemMetadata = createApp({
} }
}); });
eventBusItemMetadata.config.globalProperties.$emitter = emitter; eventBusItemMetadata.config.globalProperties.$emitter = emitter;
eventBusItemMetadata.use(store);

25
src/views/admin/js/event-bus-metadata-list.js
View File

@ -1,25 +0,0 @@
import { createApp } from 'vue';
import mitt from 'mitt';
const emitter = mitt();
export default {
install(app, options = {}) {
app.config.globalProperties.$emitter = emitter;
app.config.globalProperties.$eventBusMetadataList = createApp({
emits: [
'addMetadatumViaButton',
'addMetadataSectionViaButton'
],
methods: {
onAddMetadatumViaButton(metadataType) {
this.$emit('addMetadatumViaButton', metadataType);
},
onAddMetadataSectionViaButton() {
this.$emit('addMetadataSectionViaButton');
}
}
});
}
}

663
src/views/admin/js/event-bus-search.js
View File

@ -1,4 +1,3 @@
import { createApp } from 'vue';
import mitt from 'mitt'; import mitt from 'mitt';
const emitter = mitt(); const emitter = mitt();
@ -6,439 +5,283 @@ const emitter = mitt();
export default { export default {
install(app, options = {}) { install(app, options = {}) {
app.config.globalProperties.$emitter = emitter;
app.config.globalProperties.$eventBusSearch = { app.config.globalProperties.$eventBusSearch = {
router: options.router, $store: app.config.globalProperties.$store,
store: options.store, $router: app.config.globalProperties.$router,
data: { $route: app.config.globalProperties.$route,
errors : [], errors : [],
query: {}, query: {},
collectionId: undefined, collectionId: undefined,
defaultOrder: 'ASC', defaultOrder: 'ASC',
defaultOrderBy: 'date', defaultOrderBy: 'date',
taxonomy: undefined, taxonomy: undefined,
termId: undefined, termId: undefined,
searchCancel: undefined searchCancel: undefined,
performAdvancedSearch(data) {
this.$store.dispatch('search/set_advanced_query', data);
this.updateURLQueries();
}, },
emits: [ addMetaquery( data ){
'input', if ( data && data.collection_id ){
'startSlideshowFromItem', this.$store.dispatch('search/add_metaquery', data );
'hasToReloadFacets', }
'isLoadingItems', this.updateURLQueries();
'hasFiltered',
'closeAdvancedSearch'
],
created() {
this.$emitter.on('input', data => {
if (data.taxonomy)
this.addTaxquery(data);
else
this.addMetaquery(data);
});
this.$root.$emitter.on('closeAdvancedSearch', () => {
this.$store.dispatch('search/setPage', 1);
this.performAdvancedSearch({});
});
this.$root.$emitter.on('performAdvancedSearch', advancedSearchQuery => {
this.$store.dispatch('search/setPage', 1);
this.performAdvancedSearch(advancedSearchQuery);
this.updateURLQueries();
});
}, },
watch: { addTaxquery( data ){
'$route': { if ( data && data.collection_id ){
handler(to, from) { this.$store.dispatch('search/add_taxquery', data );
}
this.updateURLQueries();
},
removeMetaFromFilterTag(filterTag) {
// Should set Collection ID from URL only when in admin. if (filterTag.singleLabel != undefined || filterTag.label != undefined) {
if (this.$route.name == 'CollectionItemsPage' || this.$route.name == 'ItemsPage')
this.collectionId = !this.$route.params.collectionId ? this.$route.params.collectionId : parseInt(this.$route.params.collectionId);
// Fills the URL with appropriate default values in case a query is not passed if (filterTag.argType !== 'postin') {
if (this.$route.name == null || this.$route.name == undefined || this.$route.name == 'CollectionItemsPage' || this.$route.name == 'ItemsPage') { if (filterTag.taxonomy) {
this.$store.dispatch('search/remove_taxquery', {
// Items Per Page filterId: filterTag.filterId,
if (this.$route.query.perpage == undefined || to.params.collectionId != from.params.collectionId) { label: filterTag.singleLabel ? filterTag.singleLabel : filterTag.label,
let perPageKey = (this.collectionId != undefined ? 'items_per_page_' + this.collectionId : 'items_per_page'); isMultiValue: filterTag.singleLabel ? false : true,
let perPageValue = this.$userPrefs.get(perPageKey); taxonomy: filterTag.taxonomy,
value: filterTag.value
if (perPageValue) });
this.$route.query.perpage = perPageValue; } else {
else { this.$store.dispatch('search/remove_metaquery', {
this.$route.query.perpage = 12; filterId: filterTag.filterId,
this.$userPrefs.set(perPageKey, 12); label: filterTag.singleLabel ? filterTag.singleLabel : filterTag.label,
} isMultiValue: filterTag.singleLabel ? false : true,
} metadatum_id: filterTag.metadatumId,
value: filterTag.value
// Page });
if (this.$route.query.paged == undefined || to.params.collectionId != from.params.collectionId)
this.$route.query.paged = 1;
// Order (ASC, DESC)
if (this.$route.query.order == undefined || to.params.collectionId != from.params.collectionId) {
let orderKey = (this.collectionId != undefined ? 'order_' + this.collectionId : 'order');
let orderValue = this.$userPrefs.get(orderKey) ? this.$userPrefs.get(orderKey) : this.defaultOrder;
if (orderValue)
this.$route.query.order = orderValue;
else {
this.$route.query.order = 'DESC';
this.$userPrefs.set(orderKey, 'DESC');
}
}
// Order By (required extra work to deal with custom metadata ordering)
if (this.$route.query.orderby == undefined || (to.params.collectionId != from.params.collectionId)) {
let orderByKey = (this.collectionId != undefined ? 'order_by_' + this.collectionId : 'order_by');
let orderBy = this.$userPrefs.get(orderByKey) ? this.$userPrefs.get(orderByKey) : this.defaultOrderBy;
if (orderBy && orderBy != 'name') {
// Previously was stored as a metadata object, now it is a orderby object
if (orderBy.slug || typeof orderBy == 'string')
orderBy = this.$orderByHelper.getOrderByForMetadatum(orderBy);
if (orderBy.orderby)
Object.keys(orderBy).forEach((paramKey) => {
this.$route.query[paramKey] = orderBy[paramKey];
});
else
this.$route.query.orderby = 'date'
} else {
this.$route.query.orderby = 'date';
this.$userPrefs.set(orderByKey, {
slug: 'creation_date',
name: this.$i18n.get('label_creation_date')
}).catch(() => { });
}
} else if ( this.$route.query.orderby == 'creation_date' ) { // Fixes old usage of creation_date
this.$route.query.orderby = 'date'
}
// Theme View Modes
if ((this.$route.name == null || this.$route.name == undefined ) &&
this.$route.name != 'CollectionItemsPage' && this.$route.name != 'ItemsPage' &&
(this.$route.query.view_mode == undefined || to.params.collectionId != from.params.collectionId)
) {
let viewModeKey = (this.collectionId != undefined ? 'view_mode_' + this.collectionId : 'view_mode');
let viewModeValue = this.$userPrefs.get(viewModeKey);
if (viewModeValue)
this.$route.query.view_mode = viewModeValue;
else {
this.$route.query.view_mode = 'table';
this.$userPrefs.set(viewModeKey, 'table');
}
}
// Emit slideshow-from to start this view mode from index
if (this.$route.query.view_mode != 'slideshow' && this.$route.query['slideshow-from'] !== null && this.$route.query['slideshow-from'] !== undefined && this.$route.query['slideshow-from'] !== false)
this.$emit('startSlideshowFromItem', this.$route.query['slideshow-from']);
// Admin View Modes
if (this.$route.name != null && this.$route.name != undefined &&
(this.$route.name == 'CollectionItemsPage' || this.$route.name == 'ItemsPage') &&
(this.$route.query.admin_view_mode == undefined || to.params.collectionId != from.params.collectionId)
) {
let adminViewModeKey = (this.collectionId != undefined ? 'admin_view_mode_' + this.collectionId : 'admin_view_mode');
let adminViewModeValue = this.$userPrefs.get(adminViewModeKey);
if (adminViewModeValue)
this.$route.query.admin_view_mode = adminViewModeValue;
else {
this.$route.query.admin_view_mode = 'table';
this.$userPrefs.set(adminViewModeKey, 'table');
}
}
// Advanced Search
if (this.$route.query && this.$route.query.advancedSearch){
this.$store.dispatch('search/set_advanced_query', this.$route.query);
} else {
this.$store.dispatch('search/set_postquery', this.$route.query);
}
// Checks current metaqueries and taxqueries to alert filters that should reload
// For some reason, this process is not working accessing to.query, so we need to check the path string.
const oldQueryString = from.fullPath.replace(from.path + '?', '');
const newQueryString = to.fullPath.replace(from.path + '?', '');
const oldQueryArray = oldQueryString.split('&');
const newQueryArray = newQueryString.split('&');
const oldMetaQueryArray = oldQueryArray.filter(queryItem => queryItem.startsWith('metaquery'));
const newMetaQueryArray = newQueryArray.filter(queryItem => queryItem.startsWith('metaquery'));
const oldTaxQueryArray = oldQueryArray.filter(queryItem => queryItem.startsWith('taxquery'));
const newTaxQueryArray = newQueryArray.filter(queryItem => queryItem.startsWith('taxquery'));
const oldStatusArray = oldQueryArray.filter(queryItem => queryItem.startsWith('status'));
const newStatusArray = newQueryArray.filter(queryItem => queryItem.startsWith('status'));
const oldSearchQuery = oldQueryArray.filter(queryItem => queryItem.startsWith('search'));
const newSearchQuery = newQueryArray.filter(queryItem => queryItem.startsWith('search'));
if (
JSON.stringify(oldMetaQueryArray) != JSON.stringify(newMetaQueryArray) ||
JSON.stringify(oldTaxQueryArray) != JSON.stringify(newTaxQueryArray) ||
JSON.stringify(oldStatusArray) != JSON.stringify(newStatusArray) ||
JSON.stringify(oldSearchQuery) != JSON.stringify(newSearchQuery)
) {
this.$emit('hasToReloadFacets', true);
}
// Finally, loads items
if (to.fullPath != from.fullPath)
this.loadItems();
} }
}, } else {
deep: true this.$store.dispatch('search/remove_postin');
}
this.$store.dispatch('search/removeFilterTag', filterTag);
}
this.updateURLQueries();
},
addFetchOnly( metadatum, ignorePrefs, metadatumIDs ) {
this.$store.dispatch('search/add_fetch_only', metadatum );
this.$store.dispatch('search/add_fetch_only_meta', metadatumIDs);
this.updateURLQueries();
if (!ignorePrefs) {
let prefsFetchOnly = this.collectionId ? `fetch_only_${this.collectionId}` : 'fetch_only';
let prefsFetchOnlyMeta = this.collectionId ? `fetch_only_meta_${this.collectionId}` : 'fetch_only_meta';
if (this.$userPrefs.get(prefsFetchOnly) != metadatum)
this.$userPrefs.set(prefsFetchOnly, metadatum);
if (this.$userPrefs.get(prefsFetchOnlyMeta) != metadatumIDs)
this.$userPrefs.set(prefsFetchOnlyMeta, metadatumIDs);
} }
}, },
methods: { cleanFetchOnly() {
performAdvancedSearch(data) { this.$store.dispatch('search/cleanFetchOnly');
this.$store.dispatch('search/set_advanced_query', data); },
this.updateURLQueries(); removeFetchOnlyMeta( metadatum ){
}, this.$store.dispatch('search/remove_fetch_only_meta', metadatum );
addMetaquery( data ){ this.updateURLQueries();
if ( data && data.collection_id ){ },
this.$store.dispatch('search/add_metaquery', data ); setPage(page) {
} this.$store.dispatch('search/setPage', page);
this.updateURLQueries(); this.updateURLQueries();
}, },
addTaxquery( data ){ resetPageOnStore() {
if ( data && data.collection_id ){ this.$store.dispatch('search/setPage', 1);
this.$store.dispatch('search/add_taxquery', data ); },
} setItemsPerPage(itemsPerPage, shouldNotUpdatePrefs) {
this.updateURLQueries(); this.$store.dispatch('search/setItemsPerPage', itemsPerPage);
}, this.updateURLQueries();
removeMetaFromFilterTag(filterTag) {
if (filterTag.singleLabel != undefined || filterTag.label != undefined) { if (shouldNotUpdatePrefs == undefined || shouldNotUpdatePrefs == false) {
let prefsPerPage = this.collectionId != undefined ? 'items_per_page_' + this.collectionId : 'items_per_page';
if (filterTag.argType !== 'postin') { if (this.$userPrefs.get(prefsPerPage) != itemsPerPage) {
if (filterTag.taxonomy) { this.$userPrefs.set(prefsPerPage, itemsPerPage)
this.$store.dispatch('search/remove_taxquery', {
filterId: filterTag.filterId,
label: filterTag.singleLabel ? filterTag.singleLabel : filterTag.label,
isMultiValue: filterTag.singleLabel ? false : true,
taxonomy: filterTag.taxonomy,
value: filterTag.value
});
} else {
this.$store.dispatch('search/remove_metaquery', {
filterId: filterTag.filterId,
label: filterTag.singleLabel ? filterTag.singleLabel : filterTag.label,
isMultiValue: filterTag.singleLabel ? false : true,
metadatum_id: filterTag.metadatumId,
value: filterTag.value
});
}
} else {
this.$store.dispatch('search/remove_postin');
}
this.$store.dispatch('search/removeFilterTag', filterTag);
}
this.updateURLQueries();
},
addFetchOnly( metadatum, ignorePrefs, metadatumIDs ) {
this.$store.dispatch('search/add_fetch_only', metadatum );
this.$store.dispatch('search/add_fetch_only_meta', metadatumIDs);
this.updateURLQueries();
if (!ignorePrefs) {
let prefsFetchOnly = this.collectionId ? `fetch_only_${this.collectionId}` : 'fetch_only';
let prefsFetchOnlyMeta = this.collectionId ? `fetch_only_meta_${this.collectionId}` : 'fetch_only_meta';
if (this.$userPrefs.get(prefsFetchOnly) != metadatum)
this.$userPrefs.set(prefsFetchOnly, metadatum);
if (this.$userPrefs.get(prefsFetchOnlyMeta) != metadatumIDs)
this.$userPrefs.set(prefsFetchOnlyMeta, metadatumIDs);
}
},
cleanFetchOnly() {
this.$store.dispatch('search/cleanFetchOnly');
},
removeFetchOnlyMeta( metadatum ){
this.$store.dispatch('search/remove_fetch_only_meta', metadatum );
this.updateURLQueries();
},
setPage(page) {
this.$store.dispatch('search/setPage', page);
this.updateURLQueries();
},
resetPageOnStore() {
this.$store.dispatch('search/setPage', 1);
},
setItemsPerPage(itemsPerPage, shouldNotUpdatePrefs) {
this.$store.dispatch('search/setItemsPerPage', itemsPerPage);
this.updateURLQueries();
if (shouldNotUpdatePrefs == undefined || shouldNotUpdatePrefs == false) {
let prefsPerPage = this.collectionId != undefined ? 'items_per_page_' + this.collectionId : 'items_per_page';
if (this.$userPrefs.get(prefsPerPage) != itemsPerPage) {
this.$userPrefs.set(prefsPerPage, itemsPerPage)
.catch(() => {});
}
}
},
setOrderBy(orderBy) {
let prefsOrderBy = this.collectionId != undefined ? 'order_by_' + this.collectionId : 'order_by';
if (orderBy.metakey) {
if (!this.$userPrefs.get(prefsOrderBy) || orderBy.metakey != this.$userPrefs.get(prefsOrderBy).metakey)
this.$userPrefs.set(prefsOrderBy, orderBy).catch(() => {});
} else {
if (orderBy != this.$userPrefs.get(prefsOrderBy))
this.$userPrefs.set(prefsOrderBy, orderBy).catch(() => {});
}
this.$store.dispatch('search/setOrderBy', orderBy);
this.updateURLQueries();
},
setOrder(order) {
let prefsOrder = this.collectionId != undefined ? 'order_' + this.collectionId : 'order';
if (this.$userPrefs.get(prefsOrder) != order) {
this.$userPrefs.set(prefsOrder, order)
.catch(() => {}); .catch(() => {});
} }
}
},
setOrderBy(orderBy) {
let prefsOrderBy = this.collectionId != undefined ? 'order_by_' + this.collectionId : 'order_by';
this.$store.dispatch('search/setOrder', order); if (orderBy.metakey) {
this.updateURLQueries(); if (!this.$userPrefs.get(prefsOrderBy) || orderBy.metakey != this.$userPrefs.get(prefsOrderBy).metakey)
}, this.$userPrefs.set(prefsOrderBy, orderBy).catch(() => {});
setStatus(status) { } else {
this.$store.dispatch('search/setStatus', status); if (orderBy != this.$userPrefs.get(prefsOrderBy))
this.updateURLQueries(); this.$userPrefs.set(prefsOrderBy, orderBy).catch(() => {});
}, }
setTotalItems(totalItems) {
this.$store.dispatch('search/setTotalItems', totalItems);
},
setSentenceMode(sentenceMode) {
this.$store.dispatch('search/setSentenceMode', sentenceMode);
},
setSearchQuery(searchQuery) {
this.$store.dispatch('search/setSearchQuery', searchQuery);
this.updateURLQueries();
},
setViewMode(viewMode) {
this.$store.dispatch('search/setViewMode', viewMode);
this.updateURLQueries();
let prefsViewMode = this.collectionId != undefined ? 'view_mode_' + this.collectionId : 'view_mode'; this.$store.dispatch('search/setOrderBy', orderBy);
if(this.$userPrefs.get(prefsViewMode) != viewMode) { this.updateURLQueries();
this.$userPrefs.set(prefsViewMode, viewMode) },
.catch(() => {}); setOrder(order) {
} let prefsOrder = this.collectionId != undefined ? 'order_' + this.collectionId : 'order';
}, if (this.$userPrefs.get(prefsOrder) != order) {
setAdminViewMode(adminViewMode) { this.$userPrefs.set(prefsOrder, order)
this.$store.dispatch('search/setAdminViewMode', adminViewMode); .catch(() => {});
this.updateURLQueries(); }
let prefsAdminViewMode = this.collectionId != undefined ? 'admin_view_mode_' + this.collectionId : 'admin_view_mode'; this.$store.dispatch('search/setOrder', order);
if (this.$userPrefs.get(prefsAdminViewMode) != adminViewMode) { this.updateURLQueries();
this.$userPrefs.set(prefsAdminViewMode, adminViewMode) },
.catch(() => { }); setStatus(status) {
} this.$store.dispatch('search/setStatus', status);
}, this.updateURLQueries();
setInitialViewMode(viewMode) { },
this.$store.dispatch('search/setViewMode', viewMode); setTotalItems(totalItems) {
this.updateURLQueries(); this.$store.dispatch('search/setTotalItems', totalItems);
}, },
setInitialAdminViewMode(adminViewMode) { setSentenceMode(sentenceMode) {
this.$store.dispatch('search/setAdminViewMode', adminViewMode); this.$store.dispatch('search/setSentenceMode', sentenceMode);
this.updateURLQueries(); },
}, setSearchQuery(searchQuery) {
setSelectedItemsForIframe(selectedItems, singleSelection) { this.$store.dispatch('search/setSearchQuery', searchQuery);
this.updateURLQueries();
},
setViewMode(viewMode) {
this.$store.dispatch('search/setViewMode', viewMode);
this.updateURLQueries();
if (singleSelection) let prefsViewMode = this.collectionId != undefined ? 'view_mode_' + this.collectionId : 'view_mode';
this.$store.dispatch('search/cleanSelectedItems'); if(this.$userPrefs.get(prefsViewMode) != viewMode) {
this.$userPrefs.set(prefsViewMode, viewMode)
.catch(() => {});
}
},
setAdminViewMode(adminViewMode) {
this.$store.dispatch('search/setAdminViewMode', adminViewMode);
this.updateURLQueries();
this.$store.dispatch('search/setSelectedItems', selectedItems); let prefsAdminViewMode = this.collectionId != undefined ? 'admin_view_mode_' + this.collectionId : 'admin_view_mode';
if (this.$userPrefs.get(prefsAdminViewMode) != adminViewMode) {
this.$userPrefs.set(prefsAdminViewMode, adminViewMode)
.catch(() => { });
}
},
setInitialViewMode(viewMode) {
this.$store.dispatch('search/setViewMode', viewMode);
this.updateURLQueries();
},
setInitialAdminViewMode(adminViewMode) {
this.$store.dispatch('search/setAdminViewMode', adminViewMode);
this.updateURLQueries();
},
setSelectedItemsForIframe(selectedItems, singleSelection) {
let currentSelectedItems = this.$store.getters['search/getSelectedItems']; if (singleSelection)
if (window.history.pushState) {
let searchParams = new URLSearchParams(window.location.search);
searchParams.delete('selecteditems');
for (let selectedItem of currentSelectedItems)
searchParams.append('selecteditems', selectedItem);
let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + searchParams.toString() + window.location.hash;
window.history.pushState({path: newurl}, '', newurl);
}
},
cleanSelectedItems() {
this.$store.dispatch('search/cleanSelectedItems'); this.$store.dispatch('search/cleanSelectedItems');
},
filterBySelectedItems(selectedItems) {
this.$router.replace({ query: {} });
this.$router.replace({ query: { postin: selectedItems } });
},
highlightsItem(itemId) {
this.$store.dispatch('search/highlightsItem', itemId);
this.updateURLQueries();
},
updateURLQueries() {
this.$router.replace({ query: {} });
this.$router.replace({ query: this.$store.getters['search/getPostQuery'] });
},
updateStoreFromURL() {
this.$store.dispatch('search/set_postquery', this.$route.query);
},
loadItems() {
// Forces fetch_only to be filled before any search happens this.$store.dispatch('search/setSelectedItems', selectedItems);
if (this.$store.getters['search/getPostQuery']['fetch_only'] != undefined) {
this.$emit( 'isLoadingItems', true); let currentSelectedItems = this.$store.getters['search/getSelectedItems'];
// Cancels previous Request
if (this.searchCancel != undefined)
this.searchCancel.cancel('Item search Canceled.');
this.$store.dispatch('collection/fetchItems', {
'collectionId': this.collectionId,
'isOnTheme': (this.$route.name == null),
'termId': this.termId,
'taxonomy': this.taxonomy
}).then((resp) => {
// The actual fetch item request
resp.request.then((res) => {
this.$emit( 'isLoadingItems', false);
this.$emit( 'hasFiltered', res.hasFiltered);
})
.catch(() => {
this.$emit( 'isLoadingItems', false);
});
// Search Request Token for cancelling if (window.history.pushState) {
this.searchCancel = resp.source; let searchParams = new URLSearchParams(window.location.search);
searchParams.delete('selecteditems');
for (let selectedItem of currentSelectedItems)
searchParams.append('selecteditems', selectedItem);
let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + searchParams.toString() + window.location.hash;
window.history.pushState({path: newurl}, '', newurl);
}
},
cleanSelectedItems() {
this.$store.dispatch('search/cleanSelectedItems');
},
filterBySelectedItems(selectedItems) {
this.$router.replace({ query: {} });
this.$router.replace({ query: { postin: selectedItems } });
},
highlightsItem(itemId) {
this.$store.dispatch('search/highlightsItem', itemId);
this.updateURLQueries();
},
updateURLQueries() {
this.$router.replace({ query: {} });
this.$router.replace({ query: this.$store.getters['search/getPostQuery'] });
},
updateStoreFromURL() {
this.$store.dispatch('search/set_postquery', this.$route.query);
},
loadItems() {
// Forces fetch_only to be filled before any search happens
if (this.$store.getters['search/getPostQuery']['fetch_only'] != undefined) {
this.$eventBusSearchEmitter.emit( 'isLoadingItems', true);
// Cancels previous Request
if (this.searchCancel != undefined)
this.searchCancel.cancel('Item search Canceled.');
this.$store.dispatch('collection/fetchItems', {
'collectionId': this.collectionId,
'isOnTheme': (this.$route.name == null),
'termId': this.termId,
'taxonomy': this.taxonomy
}).then((resp) => {
// The actual fetch item request
resp.request.then((res) => {
this.$eventBusSearchEmitter.emit( 'isLoadingItems', false);
this.$eventBusSearchEmitter.emit( 'hasFiltered', res.hasFiltered);
})
.catch(() => {
this.$eventBusSearchEmitter.emit( 'isLoadingItems', false);
}); });
} // Search Request Token for cancelling
}, this.searchCancel = resp.source;
setCollectionId(collectionId) { });
this.setTotalItems(null);
this.collectionId = collectionId;
},
setDefaultOrder(defaultOrder) {
this.defaultOrder = defaultOrder;
},
setDefaultOrderBy(defaultOrderBy) {
this.defaultOrderBy = defaultOrderBy;
},
setTerm(termId, taxonomy) {
this.termId = termId;
this.taxonomy = taxonomy;
},
clearAllFilters() {
this.$store.dispatch('search/cleanFilterTags');
this.$store.dispatch('search/cleanMetaQueries', { keepCollections: true });
this.$store.dispatch('search/cleanTaxQueries');
this.updateURLQueries();
} }
},
setCollectionId(collectionId) {
this.setTotalItems(null);
this.collectionId = collectionId;
},
setDefaultOrder(defaultOrder) {
this.defaultOrder = defaultOrder;
},
setDefaultOrderBy(defaultOrderBy) {
this.defaultOrderBy = defaultOrderBy;
},
setTerm(termId, taxonomy) {
this.termId = termId;
this.taxonomy = taxonomy;
},
clearAllFilters() {
this.$store.dispatch('search/cleanFilterTags');
this.$store.dispatch('search/cleanMetaQueries', { keepCollections: true });
this.$store.dispatch('search/cleanTaxQueries');
this.updateURLQueries();
} }
}; }
// Defines the global $eventBusSearchEmitter for handling events across different search components
emitter.on('input', data => {
if (data.taxonomy)
$eventBusSearch.addTaxquery(data);
else
$eventBusSearch.addMetaquery(data);
});
emitter.on('closeAdvancedSearch', () => {
$eventBusSearch.$store.dispatch('search/setPage', 1);
$eventBusSearch.performAdvancedSearch({});
});
emitter.on('performAdvancedSearch', advancedSearchQuery => {
$eventBusSearch.$store.dispatch('search/setPage', 1);
$eventBusSearch.performAdvancedSearch(advancedSearchQuery);
$eventBusSearch.updateURLQueries();
});
app.config.globalProperties.$eventBusSearchEmitter = emitter;
} }
} }

2
src/views/admin/pages/home-page.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="home-page page-container"> <div class="home-page page-container">
<b-loading v-model:active="isLoadingCollections"/> <b-loading v-model="isLoadingCollections"/>
<section <section
v-if="!$adminOptions.hideHomeRepositorySection" v-if="!$adminOptions.hideHomeRepositorySection"
class="home-section home-section-repository"> class="home-section home-section-repository">

28
src/views/admin/pages/lists/activities-page.vue
View File

@ -33,7 +33,7 @@
<b-loading <b-loading
:is-full-page="false" :is-full-page="false"
v-model:active="isLoading" v-model="isLoading"
:can-cancel="false"/> :can-cancel="false"/>
<div <div
@ -44,10 +44,10 @@
<b-datepicker <b-datepicker
ref="datepicker" ref="datepicker"
:placeholder="$i18n.get('instruction_filter_activities_date')" :placeholder="$i18n.get('instruction_filter_activities_date')"
v-model:value="searchDates" v-model="searchDates"
range range
:trap-focus="false" :trap-focus="false"
@input="searchActivities()" @update:model-value="searchActivities()"
:date-formatter="(date) => dateFormatter(date)" :date-formatter="(date) => dateFormatter(date)"
:date-parser="(date) => dateParser(date)" :date-parser="(date) => dateParser(date)"
icon="calendar-today" icon="calendar-today"
@ -95,7 +95,7 @@
:placeholder="$i18n.get('instruction_type_search_users_filter')" :placeholder="$i18n.get('instruction_type_search_users_filter')"
keep-first keep-first
open-on-focus open-on-focus
@input="fetchUsersForFiltering" @update:model-value="fetchUsersForFiltering"
@focus.once="($event) => fetchUsersForFiltering($event.target.value)" @focus.once="($event) => fetchUsersForFiltering($event.target.value)"
@select="filterActivitiesByUser" @select="filterActivitiesByUser"
:loading="isFetchingUsers" :loading="isFetchingUsers"
@ -132,7 +132,7 @@
size="is-small" size="is-small"
:aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('activities')" :aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('activities')"
autocomplete="on" autocomplete="on"
v-model:value="searchQuery" v-model="searchQuery"
@keyup.enter="searchActivities()" @keyup.enter="searchActivities()"
icon-right="magnify" icon-right="magnify"
icon-right-clickable icon-right-clickable
@ -149,8 +149,8 @@
:placeholder="$i18n.get('instruction_filter_activities_date')" :placeholder="$i18n.get('instruction_filter_activities_date')"
range range
icon="calendar-today" icon="calendar-today"
v-model:value="searchDates" v-model="searchDates"
@input="searchProcesses()" @update:model-value="searchProcesses()"
:date-formatter="(date) => dateFormatter(date)" :date-formatter="(date) => dateFormatter(date)"
:date-parser="(date) => dateParser(date)" :date-parser="(date) => dateParser(date)"
:years-range="[-50, 3]" :years-range="[-50, 3]"
@ -196,7 +196,7 @@
size="is-small" size="is-small"
:aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('activities')" :aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('activities')"
autocomplete="on" autocomplete="on"
v-model:value="searchQuery" v-model="searchQuery"
@keyup.enter="searchProcesses()" @keyup.enter="searchProcesses()"
icon-right="magnify" icon-right="magnify"
icon-right-clickable icon-right-clickable
@ -265,8 +265,8 @@
horizontal horizontal
:label="$i18n.get('label_activities_per_page')"> :label="$i18n.get('label_activities_per_page')">
<b-select <b-select
:value="activitiesPerPage" :model-value="activitiesPerPage"
@input="onChangeActivitiesPerPage" @update:model-value="onChangeActivitiesPerPage"
:disabled="activities.length <= 0"> :disabled="activities.length <= 0">
<option value="12">12</option> <option value="12">12</option>
<option value="24">24</option> <option value="24">24</option>
@ -279,7 +279,7 @@
<b-pagination <b-pagination
@change="onPageChange" @change="onPageChange"
:total="totalActivities" :total="totalActivities"
v-model:current="activitiesPage" v-model="activitiesPage"
order="is-centered" order="is-centered"
size="is-small" size="is-small"
:per-page="activitiesPerPage" :per-page="activitiesPerPage"
@ -306,8 +306,8 @@
horizontal horizontal
:label="$i18n.get('label_processes_per_page')"> :label="$i18n.get('label_processes_per_page')">
<b-select <b-select
:value="processesPerPage" :model-value="processesPerPage"
@input="onChangeProcessesPerPage" @update:model-value="onChangeProcessesPerPage"
:disabled="processes.length <= 0"> :disabled="processes.length <= 0">
<option value="12">12</option> <option value="12">12</option>
<option value="24">24</option> <option value="24">24</option>
@ -320,7 +320,7 @@
<b-pagination <b-pagination
@change="onPageChange" @change="onPageChange"
:total="totalProcesses" :total="totalProcesses"
v-model:current="processesPage" v-model="processesPage"
order="is-centered" order="is-centered"
size="is-small" size="is-small"
:per-page="processesPerPage" :per-page="processesPerPage"

2
src/views/admin/pages/lists/available-exporters-page.vue
View File

@ -18,7 +18,7 @@
</div> </div>
<b-loading <b-loading
v-model:active="isLoading" v-model="isLoading"
:can-cancel="false"/> :can-cancel="false"/>
</div> </div>
</template> </template>

2
src/views/admin/pages/lists/available-importers-page.vue
View File

@ -18,7 +18,7 @@
</div> </div>
<b-loading <b-loading
v-model:active="isLoading" v-model="isLoading"
:can-cancel="false"/> :can-cancel="false"/>
</div> </div>
</template> </template>

4
src/views/admin/pages/lists/capabilities-page.vue
View File

@ -14,7 +14,7 @@
<div class="control has-icons-right is-small is-clearfix"> <div class="control has-icons-right is-small is-clearfix">
<b-autocomplete <b-autocomplete
clearable clearable
v-model:value="filteredRole" v-model="filteredRole"
:data="filteredRoles" :data="filteredRoles"
:placeholder="$i18n.get('instruction_type_search_roles_filter')" :placeholder="$i18n.get('instruction_type_search_roles_filter')"
keep-first keep-first
@ -28,7 +28,7 @@
<div> <div>
<b-loading <b-loading
:is-full-page="true" :is-full-page="true"
v-model:active="isLoading" v-model="isLoading"
:can-cancel="false"/> :can-cancel="false"/>
<capabilities-list <capabilities-list

107
src/views/admin/pages/lists/collections-page.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="repository-level-page page-container"> <div class="repository-level-page page-container">
<b-loading v-model:active="isLoading"/> <b-loading v-model="isLoading"/>
<tainacan-title <tainacan-title
:bread-crumb-items="[{ path: '', label: $i18n.get('collections') }]"/> :bread-crumb-items="[{ path: '', label: $i18n.get('collections') }]"/>
<div class="sub-header"> <div class="sub-header">
@ -13,14 +13,14 @@
aria-role="list" aria-role="list"
id="collection-creation-options-dropdown" id="collection-creation-options-dropdown"
trap-focus> trap-focus>
<button <template #trigger>
class="button is-secondary" <button class="button is-secondary">
slot="trigger"> <div>{{ $i18n.getFrom('collections', 'new_item') }}</div>
<div>{{ $i18n.getFrom('collections', 'new_item') }}</div> <span class="icon">
<span class="icon"> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" /> </span>
</span> </button>
</button> </template>
<b-dropdown-item aria-role="listitem"> <b-dropdown-item aria-role="listitem">
<router-link <router-link
:to="{ path: $routerHelper.getNewCollectionPath() }" :to="{ path: $routerHelper.getNewCollectionPath() }"
@ -71,15 +71,16 @@
class="show metadata-options-dropdown" class="show metadata-options-dropdown"
aria-role="list" aria-role="list"
trap-focus> trap-focus>
<button <template #trigger>
:aria-label="collectionTaxonomy['name']" <button
class="button is-white" :aria-label="collectionTaxonomy['name']"
slot="trigger"> class="button is-white">
<span>{{ collectionTaxonomy['name'] }}</span> <span>{{ collectionTaxonomy['name'] }}</span>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" /> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
</span> </span>
</button> </button>
</template>
<div class="metadata-options-container"> <div class="metadata-options-container">
<b-dropdown-item <b-dropdown-item
v-for="(collectionTaxonomyTerm, index) in collectionTaxonomy['terms']" v-for="(collectionTaxonomyTerm, index) in collectionTaxonomy['terms']"
@ -88,7 +89,7 @@
custom custom
aria-role="listitem"> aria-role="listitem">
<b-checkbox <b-checkbox
v-model:value="collectionTaxonomyTerm.enabled" v-model="collectionTaxonomyTerm.enabled"
:native-value="collectionTaxonomyTerm.enabled"> :native-value="collectionTaxonomyTerm.enabled">
{{ collectionTaxonomyTerm.name }} {{ collectionTaxonomyTerm.name }}
</b-checkbox> </b-checkbox>
@ -109,29 +110,28 @@
<!-- Sorting options ---- --> <!-- Sorting options ---- -->
<b-field class="header-item"> <b-field class="header-item">
<label class="label">{{ $i18n.get('label_sort') }}&nbsp;</label> <label class="label">{{ $i18n.get('label_sort') }}&nbsp;</label>
<pre>{{ collections.length }}</pre>
<pre>{{ isLoading }}</pre>
<b-dropdown <b-dropdown
:mobile-modal="true" :mobile-modal="true"
:disabled="collections.length <= 0 || isLoading" :disabled="collections.length <= 0 || isLoading"
@input="onChangeOrder" @update:model-value="onChangeOrder"
aria-role="list" aria-role="list"
trap-focus> trap-focus>
<button <template #trigger>
:aria-label="$i18n.get('label_sorting_direction')" <button
class="button is-white" :aria-label="$i18n.get('label_sorting_direction')"
slot="trigger"> class="button is-white">
<span <span
style="margin-top: -2px;" style="margin-top: -2px;"
class="icon is-small gray-icon"> class="icon is-small gray-icon">
<i <i
:class="order == 'desc' ? 'tainacan-icon-sortdescending' : 'tainacan-icon-sortascending'" :class="order == 'desc' ? 'tainacan-icon-sortdescending' : 'tainacan-icon-sortascending'"
class="tainacan-icon tainacan-icon-1-125em"/> class="tainacan-icon tainacan-icon-1-125em"/>
</span> </span>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" /> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
</span> </span>
</button> </button>
</template>
<b-dropdown-item <b-dropdown-item
aria-controls="items-list-results" aria-controls="items-list-results"
role="button" role="button"
@ -165,8 +165,8 @@
<b-select <b-select
class="sorting-select" class="sorting-select"
:disabled="collections.length <= 0" :disabled="collections.length <= 0"
@input="onChangeOrderBy($event)" @update:model-value="onChangeOrderBy($event)"
:value="orderBy" :model-value="orderBy"
:label="$i18n.get('label_sorting')"> :label="$i18n.get('label_sorting')">
<option <option
v-for="(option, index) in sortingOptions" v-for="(option, index) in sortingOptions"
@ -185,7 +185,7 @@
size="is-small" size="is-small"
:aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('collections')" :aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('collections')"
autocomplete="on" autocomplete="on"
v-model:value="searchQuery" v-model="searchQuery"
@keyup.enter="searchCollections()" @keyup.enter="searchCollections()"
icon-right="magnify" icon-right="magnify"
icon-right-clickable icon-right-clickable
@ -263,14 +263,14 @@
id="collection-creation-options-dropdown" id="collection-creation-options-dropdown"
aria-role="list" aria-role="list"
trap-focus> trap-focus>
<button <template #trigger>
class="button is-secondary" <button class="button is-secondary">
slot="trigger"> <div>{{ $i18n.getFrom('collections', 'new_item') }}</div>
<div>{{ $i18n.getFrom('collections', 'new_item') }}</div> <span class="icon">
<span class="icon"> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" /> </span>
</span> </button>
</button> </template>
<b-dropdown-item aria-role="listitem"> <b-dropdown-item aria-role="listitem">
<router-link <router-link
:to="{ path: $routerHelper.getNewCollectionPath() }" :to="{ path: $routerHelper.getNewCollectionPath() }"
@ -330,8 +330,8 @@
horizontal horizontal
:label="$i18n.get('label_collections_per_page')"> :label="$i18n.get('label_collections_per_page')">
<b-select <b-select
:value="collectionsPerPage" :model-value="collectionsPerPage"
@input="onChangeCollectionsPerPage" @update:model-value="onChangeCollectionsPerPage"
:disabled="collections.length <= 0"> :disabled="collections.length <= 0">
<option value="12">12</option> <option value="12">12</option>
<option value="24">24</option> <option value="24">24</option>
@ -344,7 +344,7 @@
<b-pagination <b-pagination
@change="onPageChange" @change="onPageChange"
:total="totalCollections" :total="totalCollections"
v-model:current="page" v-model="page"
order="is-centered" order="is-centered"
size="is-small" size="is-small"
:per-page="collectionsPerPage" :per-page="collectionsPerPage"
@ -392,9 +392,7 @@ export default {
}, },
computed: { computed: {
collections() { collections() {
const ope = this.getCollections(); return this.getCollections();
console.log(ope.length)
return ope;
}, },
repositoryTotalCollections(){ repositoryTotalCollections(){
return this.getRepositoryTotalCollections(); return this.getRepositoryTotalCollections();
@ -537,7 +535,6 @@ export default {
.then((res) => { .then((res) => {
this.isLoading = false; this.isLoading = false;
this.totalCollections = res.total; this.totalCollections = res.total;
console.log(this.isLoading)
}) })
.catch(() => { .catch(() => {
this.isLoading = false; this.isLoading = false;

386
src/views/admin/pages/lists/filters-page.vue
View File

@ -8,7 +8,7 @@
</template> </template>
<div class="filters-list-page"> <div class="filters-list-page">
<b-loading v-model:active="isLoadingMetadatumTypes"/> <b-loading v-model="isLoadingMetadatumTypes"/>
<div <div
v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_filters') || (!isRepositoryLevel && collection && collection.current_user_can_edit_filters))" v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_filters') || (!isRepositoryLevel && collection && collection.current_user_can_edit_filters))"
@ -25,7 +25,7 @@
<b-field class="header-item"> <b-field class="header-item">
<b-input <b-input
:placeholder="$i18n.get('instruction_type_search_filter_filter')" :placeholder="$i18n.get('instruction_type_search_filter_filter')"
v-model:value="filterNameFilterString" v-model="filterNameFilterString"
icon="magnify" icon="magnify"
size="is-small" size="is-small"
icon-right="close-circle" icon-right="close-circle"
@ -49,176 +49,181 @@
</div> </div>
</section> </section>
<draggable <sortable
:list="activeFiltersList"
item-key="id"
@update="handleChangeOnFilter"
@add="handleChangeOnFilter"
@remove="handleChangeOnFilter"
class="active-filters-area" class="active-filters-area"
@change="handleChangeOnFilter" :class="{ 'filters-area-receive': isDraggingFromAvailable }"
:class="{'filters-area-receive': isDraggingFromAvailable}" :options="{
v-model:value="activeFiltersList" group: { name:'filters', pull: false, put: true },
:group="{ name:'filters', pull: false, put: true }" sort: (openedFilterId == '' || openedFilterId == undefined) && !isRepositoryLevel,
:sort="(openedFilterId == '' || openedFilterId == undefined) && !isRepositoryLevel" handle: '.handle',
:handle="'.handle'" hostClass: 'sortable-ghost',
ghost-class="sortable-ghost" filter: '.not-sortable-item',
filter=".not-sortable-item" preventOnFilter: false,
:prevent-on-filter="false" animation: 250
:animation="250"> }">
<div <template #item="{ element: filter, index }">
class="active-filter-item" <div
:class="{ class="active-filter-item"
'not-sortable-item': (isRepositoryLevel || isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true || filterNameFilterString != ''), :class="{
'not-focusable-item': openedFilterId == filter.id, 'not-sortable-item': (isRepositoryLevel || isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true || filterNameFilterString != ''),
'disabled-filter': filter.enabled == false, 'not-focusable-item': openedFilterId == filter.id,
'inherited-filter': filter.collection_id != collectionId || isRepositoryLevel 'disabled-filter': filter.enabled == false,
}" 'inherited-filter': filter.collection_id != collectionId || isRepositoryLevel
v-for="(filter, index) in activeFiltersList" }"
:key="filter.id" v-show="filterNameFilterString == '' || filter.name.toString().toLowerCase().indexOf(filterNameFilterString.toString().toLowerCase()) >= 0">
v-show="filterNameFilterString == '' || filter.name.toString().toLowerCase().indexOf(filterNameFilterString.toString().toLowerCase()) >= 0"> <div class="handle">
<div class="handle">
<span
v-if="!isRepositoryLevel"
class="sorting-buttons">
<button
:disabled="index == 0"
class="link-button"
@click="moveFilterUpViaButton(index)"
:aria-label="$i18n.get('label_move_up')">
<span class="icon">
<i class="tainacan-icon tainacan-icon-previous tainacan-icon-rotate-90" />
</span>
</button>
<button
:disabled="index == activeFiltersList.length - 1"
class="link-button"
@click="moveFilterDownViaButton(index)"
:aria-label="$i18n.get('label_move_down')">
<span class="icon">
<i class="tainacan-icon tainacan-icon-next tainacan-icon-rotate-90" />
</span>
</button>
</span>
<span
:style="{ opacity: !(isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true || isRepositoryLevel || filterNameFilterString != '') ? '1.0' : '0.0' }"
v-tooltip="{
content: (isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true) ? $i18n.get('info_not_allowed_change_order_filters') : $i18n.get('instruction_drag_and_drop_filter_sort'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon grip-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="currentColor">
<path
d="M0 0h24v24H0V0z"
fill="transparent"/>
<path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
</span>
<span
class="filter-name"
:class="{'is-danger': formWithErrors == filter.id }">
{{ filter.name }}
</span>
<span
v-if="filter.filter_type_object != undefined"
class="label-details">
({{ filter.filter_type_object.name }})
<!-- <em v-if="filter.inherited">{{ $i18n.get('label_inherited') }}</em> -->
<span <span
class="not-saved"
v-if="(editForms[filter.id] != undefined && editForms[filter.id].saved != true) ||filter.status == 'auto-draft'">
{{ $i18n.get('info_not_saved') }}
</span>
<span
v-if="filter.status == 'private'"
class="icon"
v-tooltip="{
content: $i18n.get('status_private'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}">
<i class="tainacan-icon tainacan-icon-private"/>
</span>
<span
v-tooltip="{
content: filter.collection_id != collectionId ? $i18n.get('label_repository_filter') : $i18n.get('label_collection_filter'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon icon-level-identifier">
<i
:class="{
'tainacan-icon-collection': filter.collection_id == collectionId,
'tainacan-icon-repository': filter.collection_id != collectionId,
'has-text-turquoise5': filter.enabled && filter.collection_id != 'default',
'has-text-blue5': filter.enabled && filter.collection_id == 'default',
'has-text-gray3': !filter.enabled
}"
class="tainacan-icon" />
</span>
</span>
<span
class="loading-spinner"
v-if="filter.id == undefined"/>
<span
class="controls"
v-if="filter.filter_type != undefined">
<b-switch
v-if="!isRepositoryLevel" v-if="!isRepositoryLevel"
:disabled="isUpdatingFiltersOrder" class="sorting-buttons">
size="is-small" <button
:value="filter.enabled" :disabled="index == 0"
@input="onChangeEnable($event, index)"/> class="link-button"
<a @click="moveFilterUpViaButton(index)"
v-if="filter.current_user_can_delete" :aria-label="$i18n.get('label_move_up')">
:style="{ visibility: filter.collection_id != collectionId && !isRepositoryLevel? 'hidden' : 'visible' }" <span class="icon">
@click.prevent="toggleFilterEdition(filter.id)"> <i class="tainacan-icon tainacan-icon-previous tainacan-icon-rotate-90" />
</span>
</button>
<button
:disabled="index == activeFiltersList.length - 1"
class="link-button"
@click="moveFilterDownViaButton(index)"
:aria-label="$i18n.get('label_move_down')">
<span class="icon">
<i class="tainacan-icon tainacan-icon-next tainacan-icon-rotate-90" />
</span>
</button>
</span>
<span
:style="{ opacity: !(isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true || isRepositoryLevel || filterNameFilterString != '') ? '1.0' : '0.0' }"
v-tooltip="{
content: (isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true) ? $i18n.get('info_not_allowed_change_order_filters') : $i18n.get('instruction_drag_and_drop_filter_sort'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon grip-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="currentColor">
<path
d="M0 0h24v24H0V0z"
fill="transparent"/>
<path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
</span>
<span
class="filter-name"
:class="{'is-danger': formWithErrors == filter.id }">
{{ filter.name }}
</span>
<span
v-if="filter.filter_type_object != undefined"
class="label-details">
({{ filter.filter_type_object.name }})
<!-- <em v-if="filter.inherited">{{ $i18n.get('label_inherited') }}</em> -->
<span <span
class="not-saved"
v-if="(editForms[filter.id] != undefined && editForms[filter.id].saved != true) ||filter.status == 'auto-draft'">
{{ $i18n.get('info_not_saved') }}
</span>
<span
v-if="filter.status == 'private'"
class="icon"
v-tooltip="{ v-tooltip="{
content: $i18n.get('edit'), content: $i18n.get('status_private'),
autoHide: true, autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''], popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'bottom' placement: 'auto-start'
}" }">
class="icon"> <i class="tainacan-icon tainacan-icon-private"/>
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
</span> </span>
</a>
<a
v-if="filter.current_user_can_delete"
:style="{ visibility: filter.collection_id != collectionId && !isRepositoryLevel ? 'hidden' : 'visible' }"
@click.prevent="removeFilter(filter)">
<span <span
v-tooltip="{ v-tooltip="{
content: $i18n.get('delete'), content: filter.collection_id != collectionId ? $i18n.get('label_repository_filter') : $i18n.get('label_collection_filter'),
autoHide: true, autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''], popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'bottom' placement: 'auto-start'
}" }"
class="icon"> class="icon icon-level-identifier">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/> <i
:class="{
'tainacan-icon-collection': filter.collection_id == collectionId,
'tainacan-icon-repository': filter.collection_id != collectionId,
'has-text-turquoise5': filter.enabled && filter.collection_id != 'default',
'has-text-blue5': filter.enabled && filter.collection_id == 'default',
'has-text-gray3': !filter.enabled
}"
class="tainacan-icon" />
</span> </span>
</a> </span>
</span> <span
class="loading-spinner"
v-if="filter.id == undefined"/>
<span
class="controls"
v-if="filter.filter_type != undefined">
<b-switch
v-if="!isRepositoryLevel"
:disabled="isUpdatingFiltersOrder"
size="is-small"
:model-value="filter.enabled"
@update:model-value="onChangeEnable($event, index)"/>
<a
v-if="filter.current_user_can_delete"
:style="{ visibility: filter.collection_id != collectionId && !isRepositoryLevel? 'hidden' : 'visible' }"
@click.prevent="toggleFilterEdition(filter.id)">
<span
v-tooltip="{
content: $i18n.get('edit'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'bottom'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
</span>
</a>
<a
v-if="filter.current_user_can_delete"
:style="{ visibility: filter.collection_id != collectionId && !isRepositoryLevel ? 'hidden' : 'visible' }"
@click.prevent="removeFilter(filter)">
<span
v-tooltip="{
content: $i18n.get('delete'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'bottom'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
</span>
</a>
</span>
</div>
<transition name="form-collapse">
<b-field v-if="openedFilterId == filter.id">
<filter-edition-form
@onEditionFinished="onEditionFinished()"
@onEditionCanceled="onEditionCanceled()"
@onErrorFound="formWithErrors = filter.id"
@onUpdateSavedState="(state) => editForms[filter.id].saved = state"
:index="index"
:original-filter="filter"
:edited-filter="editForms[openedFilterId]"/>
</b-field>
</transition>
</div> </div>
<transition name="form-collapse"> </template>
<b-field v-if="openedFilterId == filter.id"> </sortable>
<filter-edition-form
@onEditionFinished="onEditionFinished()"
@onEditionCanceled="onEditionCanceled()"
@onErrorFound="formWithErrors = filter.id"
@onUpdateSavedState="(state) => editForms[filter.id].saved = state"
:index="index"
:original-filter="filter"
:edited-filter="editForms[openedFilterId]"/>
</b-field>
</transition>
</div>
</draggable>
</div> </div>
<div <div
v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_filters') || !isRepositoryLevel)" v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_filters') || !isRepositoryLevel)"
@ -231,7 +236,7 @@
<b-field class="header-item"> <b-field class="header-item">
<b-input <b-input
:placeholder="$i18n.get('instruction_type_search_metadata_filter')" :placeholder="$i18n.get('instruction_type_search_metadata_filter')"
v-model:value="metadatumNameFilterString" v-model="metadatumNameFilterString"
icon="magnify" icon="magnify"
size="is-small" size="is-small"
icon-right="close-circle" icon-right="close-circle"
@ -242,18 +247,23 @@
</div> </div>
<div class="field" > <div class="field" >
<draggable <sortable
@change="handleChangeOnMetadata"
v-if="availableMetadata.length > 0 && !isLoadingMetadatumTypes" v-if="availableMetadata.length > 0 && !isLoadingMetadatumTypes"
v-model:value="availableMetadata" :list="availableMetadata"
:sort="false" item-key="id"
filter=".not-sortable-item" @change="handleChangeOnMetadata"
:prevent-on-filter="false" :options="{
:group="{ name:'filters', pull: !isSelectingFilterType, put: false, revertClone: true }" group: {
drag-class="sortable-drag"> name:'filters',
<template pull: !isSelectingFilterType,
v-for="(metadatum, index) in availableMetadata" put: false, revertClone: true
:key="index"> },
sort: false,
filter: '.not-sortable-item',
preventOnFilter: false,
dragClass: 'sortable-drag'
}">
<template #item="{ element: metadatum, index }">
<div <div
class="available-metadatum-item" class="available-metadatum-item"
:class="{ :class="{
@ -317,7 +327,7 @@
</span> </span>
</div> </div>
</template> </template>
</draggable> </sortable>
<section <section
v-if="availableMetadata.length <= 0 && !isLoadingMetadatumTypes" v-if="availableMetadata.length <= 0 && !isLoadingMetadatumTypes"
@ -361,11 +371,10 @@
</div> </div>
</section> </section>
<b-modal <b-modal
ref="filterTypeModal" ref="filterTypeModal"
:width="680" :width="680"
v-model:active="isSelectingFilterType" v-model="isSelectingFilterType"
trap-focus trap-focus
aria-modal aria-modal
aria-role="dialog" aria-role="dialog"
@ -452,11 +461,13 @@ import { mapActions, mapGetters } from 'vuex';
import FilterEditionForm from '../../components/edition/filter-edition-form.vue'; import FilterEditionForm from '../../components/edition/filter-edition-form.vue';
import CustomDialog from '../../components/other/custom-dialog.vue'; import CustomDialog from '../../components/other/custom-dialog.vue';
import { Sortable } from "sortablejs-vue3";
export default { export default {
name: 'FiltersPage', name: 'FiltersPage',
components: { components: {
FilterEditionForm FilterEditionForm,
Sortable
}, },
beforeRouteLeave ( to, from, next ) { beforeRouteLeave ( to, from, next ) {
let hasUnsavedForms = false; let hasUnsavedForms = false;
@ -614,13 +625,25 @@ export default {
'getCollection', 'getCollection',
]), ]),
handleChangeOnFilter($event) { handleChangeOnFilter($event) {
if ($event.added) { switch( $event.type ) {
this.prepareFilterTypeSelection($event.added.element, $event.added.newIndex); case 'add':
} else if ($event.removed) { this.prepareFilterTypeSelection(this.availableMetadata[$event.oldIndex], $event.newIndex);
this.removeFilter($event.removed.element); break;
} else if ($event.moved) { case 'remove':
if (!this.isRepositoryLevel) this.removeFilter(this.activeFiltersList[$event.oldIndex]);
this.updateFiltersOrder(); break;
case 'update': {
const newActiveFiltersList = JSON.parse(JSON.stringify(this.activeFiltersList));
const element = newActiveFiltersList.splice($event.oldIndex, 1)[0];
newActiveFiltersList.splice($event.newIndex, 0, element);
this.updateFilters(newActiveFiltersList);
if (!this.isRepositoryLevel)
this.updateFiltersOrder();
break;
}
} }
}, },
prepareFilterTypeSelection(choosenMetadatum, newFilterIndex) { prepareFilterTypeSelection(choosenMetadatum, newFilterIndex) {
@ -692,6 +715,7 @@ export default {
}, },
updateListOfMetadata() { updateListOfMetadata() {
const availableMetadata = JSON.parse(JSON.stringify(this.getMetadata())); const availableMetadata = JSON.parse(JSON.stringify(this.getMetadata()));
const availableMetadataNames = {}; const availableMetadataNames = {};
let lastParentName = ''; let lastParentName = '';
@ -1069,6 +1093,7 @@ export default {
.grip-icon { .grip-icon {
color: var(--tainacan-gray3); color: var(--tainacan-gray3);
position: relative; position: relative;
flex-shrink: 0;
} }
.filter-name { .filter-name {
text-overflow: ellipsis; text-overflow: ellipsis;
@ -1207,6 +1232,7 @@ export default {
.grip-icon { .grip-icon {
color: var(--tainacan-gray3); color: var(--tainacan-gray3);
position: relative; position: relative;
flex-shrink: 0;
} }
.icon-level-identifier { .icon-level-identifier {
position: relative; position: relative;

350
src/views/admin/pages/lists/items-page.vue
View File

@ -26,7 +26,7 @@
</h3> </h3>
<!-- <b-loading <!-- <b-loading
:is-full-page="false" :is-full-page="false"
v-model:active="isLoadingMetadata"/> --> v-model="isLoadingMetadata"/> -->
<!-- Button for hiding filters --> <!-- Button for hiding filters -->
<button <button
aria-controls="filters-modal" aria-controls="filters-modal"
@ -65,19 +65,20 @@
:mobile-modal="false" :mobile-modal="false"
:disabled="openAdvancedSearch" :disabled="openAdvancedSearch"
:triggers="hasSearchByMoreThanOneWord ? ['click','contextmenu','focus'] : []"> :triggers="hasSearchByMoreThanOneWord ? ['click','contextmenu','focus'] : []">
<b-input <template #trigger>
slot="trigger" <b-input
size="is-small" size="is-small"
:placeholder="$i18n.get('instruction_search')" :placeholder="$i18n.get('instruction_search')"
type="search" type="search"
:aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('items')" :aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('items')"
:value="searchQuery" :model-value="searchQuery"
@input="typeFutureSearch" @update:model-value="typeFutureSearch"
@keyup.enter="updateSearch()" @keyup.enter="updateSearch()"
icon-right="magnify" icon-right="magnify"
icon-right-clickable icon-right-clickable
@icon-right-click="updateSearch()" @icon-right-click="updateSearch()"
:disabled="openAdvancedSearch" /> :disabled="openAdvancedSearch" />
</template>
<b-dropdown-item <b-dropdown-item
@click="updateSearch()" @click="updateSearch()"
:focusable="false"> :focusable="false">
@ -88,10 +89,10 @@
custom custom
:focusable="false"> :focusable="false">
<b-checkbox <b-checkbox
:value="sentenceMode" :model-value="sentenceMode"
:true-value="false" :true-value="false"
:false-value="true" :false-value="true"
@input="$eventBusSearch.setSentenceMode($event)"> @update:model-value="$eventBusSearch.setSentenceMode($event)">
{{ $i18n.get('label_use_search_separated_words') }} {{ $i18n.get('label_use_search_separated_words') }}
</b-checkbox> </b-checkbox>
<small class="is-small help">{{ $i18n.get('info_use_search_separated_words') }}</small> <small class="is-small help">{{ $i18n.get('info_use_search_separated_words') }}</small>
@ -151,16 +152,15 @@
id="item-creation-options-dropdown" id="item-creation-options-dropdown"
aria-role="list" aria-role="list"
trap-focus> trap-focus>
<button <template #trigger>
class="button is-secondary" <button class="button is-secondary">
slot="trigger"> <span class="is-hidden-touch">{{ $i18n.getFrom('items','add_new') }}</span>
<span class="is-hidden-touch">{{ $i18n.getFrom('items','add_new') }}</span> <span class="is-hidden-desktop">{{ $i18n.get('add') }}</span>
<span class="is-hidden-desktop">{{ $i18n.get('add') }}</span> <span class="icon">
<span class="icon"> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" /> </span>
</span> </button>
</button> </template>
<b-dropdown-item <b-dropdown-item
v-if="!isRepositoryLevel" v-if="!isRepositoryLevel"
aria-role="listitem"> aria-role="listitem">
@ -237,16 +237,17 @@
class="show metadata-options-dropdown" class="show metadata-options-dropdown"
aria-role="list" aria-role="list"
trap-focus> trap-focus>
<button <template #trigger>
:aria-label="$i18n.get('label_displayed_metadata')" <button
class="button is-white" :aria-label="$i18n.get('label_displayed_metadata')"
slot="trigger"> class="button is-white">
<span class="is-hidden-touch is-hidden-desktop-only">{{ $i18n.get('label_displayed_metadata') }}</span> <span class="is-hidden-touch is-hidden-desktop-only">{{ $i18n.get('label_displayed_metadata') }}</span>
<span class="is-hidden-widescreen">{{ $i18n.get('metadata') }}</span> <span class="is-hidden-widescreen">{{ $i18n.get('metadata') }}</span>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" /> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
</span> </span>
</button> </button>
</template>
<div class="metadata-options-container"> <div class="metadata-options-container">
<b-dropdown-item <b-dropdown-item
v-for="(column, index) in localDisplayedMetadata" v-for="(column, index) in localDisplayedMetadata"
@ -255,7 +256,7 @@
custom custom
aria-role="listitem"> aria-role="listitem">
<b-checkbox <b-checkbox
v-model:value="column.display" v-model="column.display"
:native-value="column.display"> :native-value="column.display">
{{ column.name }} {{ column.name }}
</b-checkbox> </b-checkbox>
@ -278,28 +279,29 @@
<label class="label">{{ $i18n.get('label_sort') }}&nbsp;</label> <label class="label">{{ $i18n.get('label_sort') }}&nbsp;</label>
<b-dropdown <b-dropdown
:mobile-modal="true" :mobile-modal="true"
@input="onChangeOrder" @update:model-value="onChangeOrder"
aria-role="list" aria-role="list"
trap-focus> trap-focus>
<button <template #trigger>
:aria-label="$i18n.get('label_sorting_direction')" <button
class="button is-white" :aria-label="$i18n.get('label_sorting_direction')"
slot="trigger" class="button is-white"
style="padding-right: 3px !important;"> style="padding-right: 3px !important;">
<span class="icon is-small gray-icon"> <span class="icon is-small gray-icon">
<i <i
:class="order == 'DESC' ? 'tainacan-icon-sortdescending' : 'tainacan-icon-sortascending'" :class="order == 'DESC' ? 'tainacan-icon-sortdescending' : 'tainacan-icon-sortascending'"
class="tainacan-icon"/> class="tainacan-icon"/>
</span> </span>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" /> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
</span> </span>
</button> </button>
</template>
<b-dropdown-item <b-dropdown-item
aria-controls="items-list-results" aria-controls="items-list-results"
role="button" role="button"
:class="{ 'is-active': order == 'DESC' }" :class="{ 'is-active': order == 'DESC' }"
:value="'DESC'" :model-value="'DESC'"
aria-role="listitem"> aria-role="listitem">
<span class="icon gray-icon"> <span class="icon gray-icon">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-sortdescending"/> <i class="tainacan-icon tainacan-icon-18px tainacan-icon-sortdescending"/>
@ -310,7 +312,7 @@
aria-controls="items-list-results" aria-controls="items-list-results"
role="button" role="button"
:class="{ 'is-active': order == 'ASC' }" :class="{ 'is-active': order == 'ASC' }"
:value="'ASC'" :model-value="'ASC'"
aria-role="listitem"> aria-role="listitem">
<span class="icon gray-icon"> <span class="icon gray-icon">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-sortascending"/> <i class="tainacan-icon tainacan-icon-18px tainacan-icon-sortascending"/>
@ -325,18 +327,19 @@
</span> </span>
<b-dropdown <b-dropdown
:mobile-modal="true" :mobile-modal="true"
@input="onChangeOrderBy($event)" @update:model-value="onChangeOrderBy($event)"
aria-role="list" aria-role="list"
trap-focus> trap-focus>
<button <template #trigger>
:aria-label="$i18n.get('label_sorting')" <button
class="button is-white" :aria-label="$i18n.get('label_sorting')"
slot="trigger"> class="button is-white">
<span>{{ orderByName }}</span> <span>{{ orderByName }}</span>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" /> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
</span> </span>
</button> </button>
</template>
<template <template
v-for="metadatum of sortingMetadata" v-for="metadatum of sortingMetadata"
:key="metadatum.slug"> :key="metadatum.slug">
@ -373,33 +376,34 @@
:aria-label="$i18n.get('label_view_mode')" :aria-label="$i18n.get('label_view_mode')"
aria-role="list" aria-role="list"
trap-focus> trap-focus>
<button <template #trigger>
:aria-label="$i18n.get('label_view_mode')" <button
class="button is-white" :aria-label="$i18n.get('label_view_mode')"
slot="trigger"> class="button is-white">
<span class="view-mode-icon icon is-small gray-icon"> <span class="view-mode-icon icon is-small gray-icon">
<i <i
v-if="adminViewMode !== 'map'" v-if="adminViewMode !== 'map'"
:class="{'tainacan-icon-viewtable' : ( adminViewMode == 'table' || adminViewMode == undefined), :class="{'tainacan-icon-viewtable' : ( adminViewMode == 'table' || adminViewMode == undefined),
'tainacan-icon-viewcards' : adminViewMode == 'cards', 'tainacan-icon-viewcards' : adminViewMode == 'cards',
'tainacan-icon-viewminiature' : adminViewMode == 'grid', 'tainacan-icon-viewminiature' : adminViewMode == 'grid',
'tainacan-icon-viewrecords' : adminViewMode == 'records', 'tainacan-icon-viewrecords' : adminViewMode == 'records',
'tainacan-icon-viewlist' : adminViewMode == 'list', 'tainacan-icon-viewlist' : adminViewMode == 'list',
'tainacan-icon-viewmasonry' : adminViewMode == 'masonry' }" 'tainacan-icon-viewmasonry' : adminViewMode == 'masonry' }"
class="tainacan-icon tainacan-icon-1-25em"/> class="tainacan-icon tainacan-icon-1-25em"/>
<svg <svg
v-else v-else
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
style="fill: var(--tainacan-info-color)"> style="fill: var(--tainacan-info-color)">
<path d="M15,19L9,16.89V5L15,7.11M20.5,3C20.44,3 20.39,3 20.34,3L15,5.1L9,3L3.36,4.9C3.15,4.97 3,5.15 3,5.38V20.5A0.5,0.5 0 0,0 3.5,21C3.55,21 3.61,21 3.66,20.97L9,18.9L15,21L20.64,19.1C20.85,19 21,18.85 21,18.62V3.5A0.5,0.5 0 0,0 20.5,3Z" /> <path d="M15,19L9,16.89V5L15,7.11M20.5,3C20.44,3 20.39,3 20.34,3L15,5.1L9,3L3.36,4.9C3.15,4.97 3,5.15 3,5.38V20.5A0.5,0.5 0 0,0 3.5,21C3.55,21 3.61,21 3.66,20.97L9,18.9L15,21L20.64,19.1C20.85,19 21,18.85 21,18.62V3.5A0.5,0.5 0 0,0 20.5,3Z" />
</svg> </svg>
</span> </span>
&nbsp;&nbsp;&nbsp;{{ adminViewMode != undefined ? $i18n.get('label_' + adminViewMode) : $i18n.get('label_table') }} &nbsp;&nbsp;&nbsp;{{ adminViewMode != undefined ? $i18n.get('label_' + adminViewMode) : $i18n.get('label_table') }}
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" /> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
</span> </span>
</button> </button>
</template>
<b-dropdown-item <b-dropdown-item
aria-controls="items-list-results" aria-controls="items-list-results"
role="button" role="button"
@ -513,7 +517,7 @@
role="region" role="region"
id="filters-modal" id="filters-modal"
ref="filters-modal" ref="filters-modal"
v-model:active="isFiltersModalActive" v-model="isFiltersModalActive"
:width="736" :width="736"
animation="slide-menu" animation="slide-menu"
trap-focus trap-focus
@ -587,7 +591,7 @@
<b-loading <b-loading
v-if="!(registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].skeleton_template != undefined)" v-if="!(registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].skeleton_template != undefined)"
:is-full-page="false" :is-full-page="false"
:active="showLoading"/> :model-value="showLoading"/>
<!-- Custom skeleton templates used by some view modes --> <!-- Custom skeleton templates used by some view modes -->
<div <div
@ -685,10 +689,10 @@
</template> </template>
<br> <br>
<b-checkbox <b-checkbox
:value="sentenceMode" :model-value="sentenceMode"
:true-value="false" :true-value="false"
:false-value="true" :false-value="true"
@input="$eventBusSearch.setSentenceMode($event); updateSearch();"> @update:model-value="$eventBusSearch.setSentenceMode($event); updateSearch();">
{{ $i18n.get('label_use_search_separated_words') }} {{ $i18n.get('label_use_search_separated_words') }}
</b-checkbox> </b-checkbox>
</p> </p>
@ -816,6 +820,152 @@
} }
}, },
watch: { watch: {
'$route': {
handler(to, from) {
// Should set Collection ID from URL only when in admin.
if (this.$route.name == 'CollectionItemsPage' || this.$route.name == 'ItemsPage')
this.$eventBusSearch.setCollectionId( !this.$route.params.collectionId ? this.$route.params.collectionId : parseInt(this.$route.params.collectionId) );
// Fills the URL with appropriate default values in case a query is not passed
if (this.$route.name == null || this.$route.name == undefined || this.$route.name == 'CollectionItemsPage' || this.$route.name == 'ItemsPage') {
// Items Per Page
if (this.$route.query.perpage == undefined || to.params.collectionId != from.params.collectionId) {
let perPageKey = (this.collectionId != undefined ? 'items_per_page_' + this.collectionId : 'items_per_page');
let perPageValue = this.$userPrefs.get(perPageKey);
if (perPageValue)
this.$route.query.perpage = perPageValue;
else {
this.$route.query.perpage = 12;
this.$userPrefs.set(perPageKey, 12);
}
}
// Page
if (this.$route.query.paged == undefined || to.params.collectionId != from.params.collectionId)
this.$route.query.paged = 1;
// Order (ASC, DESC)
if (this.$route.query.order == undefined || to.params.collectionId != from.params.collectionId) {
let orderKey = (this.collectionId != undefined ? 'order_' + this.collectionId : 'order');
let orderValue = this.$userPrefs.get(orderKey) ? this.$userPrefs.get(orderKey) : this.defaultOrder;
if (orderValue)
this.$route.query.order = orderValue;
else {
this.$route.query.order = 'DESC';
this.$userPrefs.set(orderKey, 'DESC');
}
}
// Order By (required extra work to deal with custom metadata ordering)
if (this.$route.query.orderby == undefined || (to.params.collectionId != from.params.collectionId)) {
let orderByKey = (this.collectionId != undefined ? 'order_by_' + this.collectionId : 'order_by');
let orderBy = this.$userPrefs.get(orderByKey) ? this.$userPrefs.get(orderByKey) : this.defaultOrderBy;
if (orderBy && orderBy != 'name') {
// Previously was stored as a metadata object, now it is a orderby object
if (orderBy.slug || typeof orderBy == 'string')
orderBy = this.$orderByHelper.getOrderByForMetadatum(orderBy);
if (orderBy.orderby)
Object.keys(orderBy).forEach((paramKey) => {
this.$route.query[paramKey] = orderBy[paramKey];
});
else
this.$route.query.orderby = 'date'
} else {
this.$route.query.orderby = 'date';
this.$userPrefs.set(orderByKey, {
slug: 'creation_date',
name: this.$i18n.get('label_creation_date')
}).catch(() => { });
}
} else if ( this.$route.query.orderby == 'creation_date' ) { // Fixes old usage of creation_date
this.$route.query.orderby = 'date'
}
// Theme View Modes
if ((this.$route.name == null || this.$route.name == undefined ) &&
this.$route.name != 'CollectionItemsPage' && this.$route.name != 'ItemsPage' &&
(this.$route.query.view_mode == undefined || to.params.collectionId != from.params.collectionId)
) {
let viewModeKey = (this.collectionId != undefined ? 'view_mode_' + this.collectionId : 'view_mode');
let viewModeValue = this.$userPrefs.get(viewModeKey);
if (viewModeValue)
this.$route.query.view_mode = viewModeValue;
else {
this.$route.query.view_mode = 'table';
this.$userPrefs.set(viewModeKey, 'table');
}
}
// Emit slideshow-from to start this view mode from index
if (this.$route.query.view_mode != 'slideshow' && this.$route.query['slideshow-from'] !== null && this.$route.query['slideshow-from'] !== undefined && this.$route.query['slideshow-from'] !== false)
this.$eventBusSearchEmitter.emit('startSlideshowFromItem', this.$route.query['slideshow-from']);
// Admin View Modes
if (this.$route.name != null && this.$route.name != undefined &&
(this.$route.name == 'CollectionItemsPage' || this.$route.name == 'ItemsPage') &&
(this.$route.query.admin_view_mode == undefined || to.params.collectionId != from.params.collectionId)
) {
let adminViewModeKey = (this.collectionId != undefined ? 'admin_view_mode_' + this.collectionId : 'admin_view_mode');
let adminViewModeValue = this.$userPrefs.get(adminViewModeKey);
if (adminViewModeValue)
this.$route.query.admin_view_mode = adminViewModeValue;
else {
this.$route.query.admin_view_mode = 'table';
this.$userPrefs.set(adminViewModeKey, 'table');
}
}
// Advanced Search
if (this.$route.query && this.$route.query.advancedSearch){
this.$store.dispatch('search/set_advanced_query', this.$route.query);
} else {
this.$store.dispatch('search/set_postquery', this.$route.query);
}
// Checks current metaqueries and taxqueries to alert filters that should reload
// For some reason, this process is not working accessing to.query, so we need to check the path string.
const oldQueryString = from.fullPath.replace(from.path + '?', '');
const newQueryString = to.fullPath.replace(from.path + '?', '');
const oldQueryArray = oldQueryString.split('&');
const newQueryArray = newQueryString.split('&');
const oldMetaQueryArray = oldQueryArray.filter(queryItem => queryItem.startsWith('metaquery'));
const newMetaQueryArray = newQueryArray.filter(queryItem => queryItem.startsWith('metaquery'));
const oldTaxQueryArray = oldQueryArray.filter(queryItem => queryItem.startsWith('taxquery'));
const newTaxQueryArray = newQueryArray.filter(queryItem => queryItem.startsWith('taxquery'));
const oldStatusArray = oldQueryArray.filter(queryItem => queryItem.startsWith('status'));
const newStatusArray = newQueryArray.filter(queryItem => queryItem.startsWith('status'));
const oldSearchQuery = oldQueryArray.filter(queryItem => queryItem.startsWith('search'));
const newSearchQuery = newQueryArray.filter(queryItem => queryItem.startsWith('search'));
if (
JSON.stringify(oldMetaQueryArray) != JSON.stringify(newMetaQueryArray) ||
JSON.stringify(oldTaxQueryArray) != JSON.stringify(newTaxQueryArray) ||
JSON.stringify(oldStatusArray) != JSON.stringify(newStatusArray) ||
JSON.stringify(oldSearchQuery) != JSON.stringify(newSearchQuery)
) {
this.$eventBusSearchEmitter.emit('hasToReloadFacets', true);
}
// Finally, loads items
if (to.fullPath != from.fullPath)
this.$eventBusSearch.loadItems();
}
},
deep: true
},
displayedMetadata: { displayedMetadata: {
handler() { handler() {
this.localDisplayedMetadata = JSON.parse(JSON.stringify(this.displayedMetadata)); this.localDisplayedMetadata = JSON.parse(JSON.stringify(this.displayedMetadata));
@ -824,7 +974,7 @@
}, },
openAdvancedSearch(newValue) { openAdvancedSearch(newValue) {
if (newValue == false){ if (newValue == false){
this.$eventBusSearch.$emit('closeAdvancedSearch'); this.$eventBusSearchEmitter.emit('closeAdvancedSearch');
this.futureSearchQuery = ''; this.futureSearchQuery = '';
this.isFiltersModalActive = true; this.isFiltersModalActive = true;
} else { } else {
@ -851,7 +1001,7 @@
this.$eventBusSearch.setCollectionId(this.collectionId); this.$eventBusSearch.setCollectionId(this.collectionId);
this.$eventBusSearch.updateStoreFromURL(); this.$eventBusSearch.updateStoreFromURL();
this.$eventBusSearch.$emitter.on('isLoadingItems', isLoadingItems => { this.$eventBusSearchEmitter.on('isLoadingItems', isLoadingItems => {
if (isLoadingItems != this.isLoadingItems && this.$refs['items-page-container'] && this.$refs['search-control']) { if (isLoadingItems != this.isLoadingItems && this.$refs['items-page-container'] && this.$refs['search-control']) {
@ -864,7 +1014,7 @@
this.isLoadingItems = isLoadingItems; this.isLoadingItems = isLoadingItems;
}); });
this.$eventBusSearch.$emitter.on('hasFiltered', hasFiltered => { this.$eventBusSearchEmitter.on('hasFiltered', hasFiltered => {
this.hasFiltered = hasFiltered; this.hasFiltered = hasFiltered;
}); });
@ -1402,8 +1552,8 @@
// $root // $root
this.$root.$emitter.off('openAdvancedSearch'); this.$root.$emitter.off('openAdvancedSearch');
// $eventBusSearch // $eventBusSearch
this.$eventBusSearch.$emitter.off('isLoadingItems'); this.$eventBusSearchEmitter.off('isLoadingItems');
this.$eventBusSearch.$emitter.off('hasFiltered'); this.$eventBusSearchEmitter.off('hasFiltered');
} }
} }
} }

3
src/views/admin/pages/lists/metadata-page.vue
View File

@ -13,7 +13,7 @@
<div class="metadata-list-page"> <div class="metadata-list-page">
<b-tabs <b-tabs
v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_metadata') || (!isRepositoryLevel && collection && collection.current_user_can_edit_metadata))" v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_metadata') || (!isRepositoryLevel && collection && collection.current_user_can_edit_metadata))"
v-model:value="activeTab"> v-model="activeTab">
<b-tab-item :label="isRepositoryLevel ? repositoryTabLabel : collectionTabLabel"> <b-tab-item :label="isRepositoryLevel ? repositoryTabLabel : collectionTabLabel">
<div class="columns"> <div class="columns">
@ -326,6 +326,7 @@ export default {
.grip-icon { .grip-icon {
color: var(--tainacan-gray3); color: var(--tainacan-gray3);
position: relative; position: relative;
flex-shrink: 0;
} }
.metadatum-name { .metadatum-name {
white-space: nowrap; white-space: nowrap;

47
src/views/admin/pages/lists/taxonomies-page.vue
View File

@ -31,24 +31,25 @@
<b-dropdown <b-dropdown
:mobile-modal="true" :mobile-modal="true"
:disabled="taxonomies.length <= 0 || isLoading" :disabled="taxonomies.length <= 0 || isLoading"
@input="onChangeOrder" @update:model-value="onChangeOrder"
aria-role="list" aria-role="list"
trap-focus> trap-focus>
<button <template #trigger>
:aria-label="$i18n.get('label_sorting_direction')" <button
class="button is-white" :aria-label="$i18n.get('label_sorting_direction')"
slot="trigger"> class="button is-white">
<span <span
style="margin-top: -2px;" style="margin-top: -2px;"
class="icon is-small gray-icon"> class="icon is-small gray-icon">
<i <i
:class="order == 'desc' ? 'tainacan-icon-sortdescending' : 'tainacan-icon-sortascending'" :class="order == 'desc' ? 'tainacan-icon-sortdescending' : 'tainacan-icon-sortascending'"
class="tainacan-icon tainacan-icon-1-125em"/> class="tainacan-icon tainacan-icon-1-125em"/>
</span> </span>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" /> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
</span> </span>
</button> </button>
</template>
<b-dropdown-item <b-dropdown-item
aria-controls="items-list-results" aria-controls="items-list-results"
role="button" role="button"
@ -82,8 +83,8 @@
<b-select <b-select
class="sorting-select" class="sorting-select"
:disabled="taxonomies.length <= 0" :disabled="taxonomies.length <= 0"
@input="onChangeOrderBy($event)" @update:model-value="onChangeOrderBy($event)"
:value="orderBy" :model-value="orderBy"
:label="$i18n.get('label_sorting')"> :label="$i18n.get('label_sorting')">
<option <option
v-for="(option, index) in sortingOptions" v-for="(option, index) in sortingOptions"
@ -102,7 +103,7 @@
size="is-small" size="is-small"
:aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('taxonomies')" :aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('taxonomies')"
autocomplete="on" autocomplete="on"
v-model:value="searchQuery" v-model="searchQuery"
@keyup.enter="searchTaxonomies()" @keyup.enter="searchTaxonomies()"
icon-right="magnify" icon-right="magnify"
icon-right-clickable icon-right-clickable
@ -113,7 +114,7 @@
<div class="above-subheader"> <div class="above-subheader">
<b-loading <b-loading
:is-full-page="true" :is-full-page="true"
v-model:active="isLoading" v-model="isLoading"
:can-cancel="false"/> :can-cancel="false"/>
<div class="tabs"> <div class="tabs">
<ul> <ul>
@ -215,8 +216,8 @@
horizontal horizontal
:label="$i18n.get('label_taxonomies_per_page')"> :label="$i18n.get('label_taxonomies_per_page')">
<b-select <b-select
:value="taxonomiesPerPage" :model-value="taxonomiesPerPage"
@input="onChangePerPage" @update:model-value="onChangePerPage"
:disabled="taxonomies.length <= 0"> :disabled="taxonomies.length <= 0">
<option value="12">12</option> <option value="12">12</option>
<option value="24">24</option> <option value="24">24</option>
@ -229,7 +230,7 @@
<b-pagination <b-pagination
@change="onPageChange" @change="onPageChange"
:total="total" :total="total"
v-model:current="page" v-model="page"
order="is-centered" order="is-centered"
size="is-small" size="is-small"
:per-page="taxonomiesPerPage" :per-page="taxonomiesPerPage"

1
src/views/admin/pages/singles/collection-page.vue
View File

@ -62,7 +62,6 @@ export default {
}, },
created() { created() {
this.collectionId = this.$route.params.collectionId; this.collectionId = this.$route.params.collectionId;
console.log(this.$eventBusSearch)
this.$eventBusSearch.setCollectionId(this.collectionId); this.$eventBusSearch.setCollectionId(this.collectionId);
// Loads to store basic collection info such as name, url, current_user_can_edit... etc. // Loads to store basic collection info such as name, url, current_user_can_edit... etc.

4
src/views/admin/pages/singles/item-page.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<b-loading <b-loading
v-model:active="isLoading" v-model="isLoading"
:can-cancel="false"/> :can-cancel="false"/>
<tainacan-title <tainacan-title
@ -262,7 +262,7 @@
<div <div
v-if="!$adminOptions.hideItemSingleAttachments" v-if="!$adminOptions.hideItemSingleAttachments"
class="section-label"> class="section-label">
<label slot="header"> <label>
<span class="icon has-text-gray4"> <span class="icon has-text-gray4">
<i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-attachments"/> <i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-attachments"/>
</span> </span>

2
src/views/gutenberg-blocks/blocks/carousel-collections-list/theme.vue
View File

@ -101,7 +101,6 @@
<button <button
class="swiper-button-prev" class="swiper-button-prev"
:id="blockId + '-prev'" :id="blockId + '-prev'"
slot="button-prev"
:style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'"> :style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
<svg <svg
:width="largeArrows ? 60 : 42" :width="largeArrows ? 60 : 42"
@ -121,7 +120,6 @@
<button <button
class="swiper-button-next" class="swiper-button-next"
:id="blockId + '-next'" :id="blockId + '-next'"
slot="button-next"
:style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'"> :style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
<svg <svg
:width="largeArrows ? 60 : 42" :width="largeArrows ? 60 : 42"

Some files were not shown because too many files have changed in this diff Show More