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

Merge pull request #853 from tainacan/feature/794 

Feature/794
This commit is contained in:
Vinícius Nunes Medeiros 2024-03-13 14:09:27 -03:00 committed by GitHub
parent 9da5531df1 c504665e57
commit 87d3165121
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
287 changed files with 19244 additions and 16032 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.babelrc
View File

@ -6,5 +6,6 @@
} }
], ],
"@babel/react" "@babel/react"
] ],
"plugins": ["@babel/plugin-syntax-dynamic-import"]
} }

31
.eslintrc.js
View File

@ -2,29 +2,32 @@ module.exports = {
extends: [ extends: [
// add more generic rulesets here, such as: // add more generic rulesets here, such as:
'eslint:recommended', 'eslint:recommended',
'plugin:vue/recommended' 'plugin:vue/vue3-recommended'
], ],
parserOptions: { parserOptions: {
'ecmaVersion': 2018 'ecmaVersion': 2020
}, },
rules: { rules: {
// override/add rules settings here, such as: /* Override/add rules settings here, such as: */
'vue/no-unused-vars': 'error', // Basic rules that we want to receive a warning instead of error
'no-console': 'warn', 'no-console': 'warn',
'no-unused-vars': 'warn', 'no-unused-vars': 'warn',
'no-undef': 'warn', 'no-undef': 'warn',
// Tainacan relies a lot in v-html and v-text, so we can't disable them
'vue/no-v-html': 'off', 'vue/no-v-html': 'off',
'vue/html-indent': 'off', 'vue/no-v-text-v-html-on-component': 'off',
'vue/attributes-order': 'off', // Formating that is hard to disable as would require significant refactoring. Autofix don't solve it well and it reflects stylistic decisions from the team.
'vue/html-closing-bracket-spacing': 'off', 'vue/html-indent': [
'vue/html-closing-bracket-newline': 'off', 'warn', 4, {
'attribute': 2,
'closeBracket': 1
}
],
'vue/html-closing-bracket-newline': 'off',
'vue/multiline-html-element-content-newline': 'off', // Should we? It's a stylistic decision.
// These have impact on how some props that are passed and we have mixed types, such as collectionId as a string or number... would require careful refactoring.
'vue/require-prop-type-constructor': 'off', 'vue/require-prop-type-constructor': 'off',
'vue/singleline-html-element-content-newline': 'off', 'vue/require-default-prop': 'off'
'vue/multiline-html-element-content-newline': 'off',
'vue/prop-name-casing': 'off',
'vue/multi-word-component-names': 'off',
'vue/require-default-prop': 'off',
'vue/no-v-text-v-html-on-component': 'off'
}, },
globals: { globals: {
'wp': true, 'wp': true,

3546
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

92
package.json
View File

@ -8,64 +8,66 @@
"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": {
"apexcharts": "^3.40.0", "@ntohq/buefy-next": "^0.1.2",
"axios": "^1.4.0", "@vue-leaflet/vue-leaflet": "^0.10.1",
"another-vue3-blurhash": "^0.0.1",
"apexcharts": "^3.47.0",
"axios": "^1.6.7",
"blurhash": "^2.0.5", "blurhash": "^2.0.5",
"buefy": "^0.9.23",
"bulma": "^0.9.4", "bulma": "^0.9.4",
"conditioner-core": "^2.3.3", "conditioner-core": "^2.3.3",
"countup.js": "^2.6.2", "countup.js": "^2.8.0",
"css-vars-ponyfill": "^2.4.8", "css-vars-ponyfill": "^2.4.9",
"floating-vue": "^1.0.0-beta.19", "floating-vue": "5.2.2",
"leaflet": "^1.9.4", "leaflet": "^1.9.4",
"leaflet-active-area": "^1.2.1", "leaflet-active-area": "^1.2.1",
"masonry-layout": "^4.2.2", "masonry-layout": "^4.2.2",
"moment": "^2.29.4", "mitt": "^3.0.1",
"moment": "^2.30.1",
"node-sass": "^8.0.0", "node-sass": "^8.0.0",
"photoswipe": "^5.3.7", "photoswipe": "^5.4.3",
"qs": "^6.11.2", "qs": "^6.12.0",
"react": "^17.0.2", "react": "^18.2.0",
"react-dom": "^17.0.2", "react-dom": "^18.2.0",
"swiper": "^8.4.7", "sortablejs": "^1.15.2",
"vue": "^2.6.14", "sortablejs-vue3": "^1.2.11",
"vue-apexcharts": "^1.6.2", "swiper": "^11.0.7",
"vue-blurhash": "^0.1.4", "vue": "^3.4.21",
"vue-countup-v2": "^4.0.0", "vue-countup-v3": "^1.4.1",
"vue-imask": "^7.1.3", "vue-imask": "^7.5.0",
"vue-router": "^3.6.5", "vue-router": "^4.3.0",
"vue-the-mask": "^0.11.1", "vue3-apexcharts": "^1.5.2",
"vue2-leaflet": "^2.7.1", "vuex": "^4.1.0"
"vuedraggable": "^2.24.3",
"vuex": "^3.6.2"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.21.0", "@babel/core": "^7.23.7",
"@babel/preset-env": "^7.20.2", "@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-react": "^7.18.6", "@babel/preset-env": "^7.23.8",
"@types/leaflet": "^1.9.1", "@babel/preset-react": "^7.23.3",
"@types/masonry-layout": "^4.2.5", "@types/leaflet": "^1.9.8",
"acorn": "^8.8.2", "@types/masonry-layout": "^4.2.7",
"ajv": "^7.2.4", "@vue/compiler-sfc": "3.4.15",
"autoprefixer": "^10.4.14", "acorn": "^8.11.3",
"ajv": "^8.12.0",
"autoprefixer": "^10.4.17",
"babel-loader": "^9.1.3", "babel-loader": "^9.1.3",
"circular-dependency-plugin": "5.2.2", "circular-dependency-plugin": "5.2.2",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"css-loader": "^6.7.3", "css-loader": "^6.9.1",
"eslint": "^8.35.0", "eslint": "^8.56.0",
"eslint-plugin-vue": "^9.9.0", "eslint-plugin-vue": "^9.20.1",
"eslint-webpack-plugin": "^4.0.0", "eslint-webpack-plugin": "^4.0.1",
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"moment-locales-webpack-plugin": "^1.2.0", "moment-locales-webpack-plugin": "^1.2.0",
"postcss-loader": "7.0.2", "postcss-loader": "7.3.3",
"sass-loader": "^13.2.0", "sass-loader": "^13.3.2",
"style-loader": "^3.3.1", "style-loader": "^3.3.4",
"terser-webpack-plugin": "5.3.7", "terser-webpack-plugin": "5.3.10",
"vue-loader": "^15.10.1", "vue-loader": "^17.4.2",
"vue-template-compiler": "^2.6.14", "webpack": "^5.89.0",
"webpack": "^5.76.0", "webpack-bundle-analyzer": "^4.10.1",
"webpack-bundle-analyzer": "^4.8.0", "webpack-cli": "^5.1.4",
"webpack-cli": "^5.0.1", "webpack-dev-server": "^4.15.1",
"webpack-dev-server": "^4.11.1", "webpack-merge": "^5.10.0"
"webpack-merge": "^5.8.0"
} }
} }

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

@ -1,13 +1,13 @@
/** /**
* Swiper 8.4.7 * Swiper 11.0.7
* Most modern mobile touch slider and framework with hardware accelerated transitions * Most modern mobile touch slider and framework with hardware accelerated transitions
* https://swiperjs.com * https://swiperjs.com
* *
* Copyright 2014-2023 Vladimir Kharlampidi * Copyright 2014-2024 Vladimir Kharlampidi
* *
* Released under the MIT License * Released under the MIT License
* *
* Released on: January 30, 2023 * Released on: February 27, 2024
*/ */
@font-face { @font-face {
font-family: 'swiper-icons'; font-family: 'swiper-icons';
@ -15,7 +15,18 @@
font-weight: 400; font-weight: 400;
font-style: normal; } font-style: normal; }
:root { :root {
--swiper-theme-color: #007aff; } --swiper-theme-color: #007aff;
/*
--swiper-preloader-color: var(--swiper-theme-color);
--swiper-wrapper-transition-timing-function: initial;
*/ }
:host {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1; }
.swiper { .swiper {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -24,7 +35,8 @@
list-style: none; list-style: none;
padding: 0; padding: 0;
/* Fix of Webkit flickering */ /* Fix of Webkit flickering */
z-index: 1; } z-index: 1;
display: block; }
.swiper-vertical > .swiper-wrapper { .swiper-vertical > .swiper-wrapper {
flex-direction: column; } flex-direction: column; }
@ -36,23 +48,27 @@
z-index: 1; z-index: 1;
display: flex; display: flex;
transition-property: transform; transition-property: transform;
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
box-sizing: content-box; } box-sizing: content-box; }
.swiper-android .swiper-slide, .swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper { .swiper-wrapper {
transform: translate3d(0px, 0, 0); } transform: translate3d(0px, 0, 0); }
.swiper-pointer-events { .swiper-horizontal {
touch-action: pan-y; } touch-action: pan-y; }
.swiper-pointer-events.swiper-vertical {
touch-action: pan-x; } .swiper-vertical {
touch-action: pan-x; }
.swiper-slide { .swiper-slide {
flex-shrink: 0; flex-shrink: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
transition-property: transform; } transition-property: transform;
display: block; }
.swiper-slide-invisible-blank { .swiper-slide-invisible-blank {
visibility: hidden; } visibility: hidden; }
@ -61,6 +77,7 @@
.swiper-autoheight, .swiper-autoheight,
.swiper-autoheight .swiper-slide { .swiper-autoheight .swiper-slide {
height: auto; } height: auto; }
.swiper-autoheight .swiper-wrapper { .swiper-autoheight .swiper-wrapper {
align-items: flex-start; align-items: flex-start;
transition-property: transform, height; } transition-property: transform, height; }
@ -70,17 +87,64 @@
backface-visibility: hidden; } backface-visibility: hidden; }
/* 3D Effects */ /* 3D Effects */
.swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper { .swiper-3d.swiper-css-mode .swiper-wrapper {
perspective: 1200px; } perspective: 1200px; }
.swiper-3d .swiper-wrapper,
.swiper-3d .swiper-slide, .swiper-3d .swiper-wrapper {
transform-style: preserve-3d; }
.swiper-3d {
perspective: 1200px; }
.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
transform-style: preserve-3d; }
/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
overflow: auto;
scrollbar-width: none;
/* For Firefox */
-ms-overflow-style: none;
/* For Internet Explorer and Edge */ }
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
display: none; }
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: start start; }
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
scroll-snap-type: x mandatory; }
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
scroll-snap-type: y mandatory; }
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
scroll-snap-type: none; }
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: none; }
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
content: '';
flex-shrink: 0;
order: 9999; }
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
scroll-snap-align: center center;
scroll-snap-stop: always; }
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
margin-inline-start: var(--swiper-centered-offset-before); }
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
height: 100%;
min-height: 1px;
width: var(--swiper-centered-offset-after); }
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
margin-block-start: var(--swiper-centered-offset-before); }
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
width: 100%;
min-width: 1px;
height: var(--swiper-centered-offset-after); }
/* Slide styles start */
/* 3D Shadows */
.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-cube-shadow {
transform-style: preserve-3d; }
.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-right,
@ -104,50 +168,47 @@
.swiper-3d .swiper-slide-shadow-bottom { .swiper-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
/* CSS Mode */ .swiper-lazy-preloader {
.swiper-css-mode > .swiper-wrapper { width: 42px;
overflow: auto; height: 42px;
scrollbar-width: none; position: absolute;
/* For Firefox */ left: 50%;
-ms-overflow-style: none; top: 50%;
/* For Internet Explorer and Edge */ } margin-left: -21px;
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { margin-top: -21px;
display: none; } z-index: 10;
.swiper-css-mode > .swiper-wrapper > .swiper-slide { transform-origin: 50%;
scroll-snap-align: start start; } box-sizing: border-box;
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
border-radius: 50%;
border-top-color: transparent; }
.swiper-horizontal.swiper-css-mode > .swiper-wrapper { .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
scroll-snap-type: x mandatory; } .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
animation: swiper-preloader-spin 1s infinite linear; }
.swiper-vertical.swiper-css-mode > .swiper-wrapper { .swiper-lazy-preloader-white {
scroll-snap-type: y mandatory; } --swiper-preloader-color: #fff; }
.swiper-centered > .swiper-wrapper::before { .swiper-lazy-preloader-black {
content: ''; --swiper-preloader-color: #000; }
flex-shrink: 0;
order: 9999; }
.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
margin-inline-start: var(--swiper-centered-offset-before); }
.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
height: 100%;
width: var(--swiper-centered-offset-after); }
.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
margin-block-start: var(--swiper-centered-offset-before); }
.swiper-centered.swiper-vertical > .swiper-wrapper::before {
width: 100%;
height: var(--swiper-centered-offset-after); }
.swiper-centered > .swiper-wrapper > .swiper-slide {
scroll-snap-align: center center;
scroll-snap-stop: always; }
@keyframes swiper-preloader-spin {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
/* Slide styles end */
:root { :root {
--swiper-navigation-size: 44px; --swiper-navigation-size: 44px;
/* /*
--swiper-navigation-top-offset: 50%;
--swiper-navigation-sides-offset: 10px;
--swiper-navigation-color: var(--swiper-theme-color); --swiper-navigation-color: var(--swiper-theme-color);
*/ } */ }
.swiper-button-prev, .swiper-button-next { .swiper-button-prev, .swiper-button-next {
position: absolute; position: absolute;
top: 50%; top: var(--swiper-navigation-top-offset, 50%);
width: calc(var(--swiper-navigation-size) / 44 * 27); width: calc(var(--swiper-navigation-size) / 44 * 27);
height: var(--swiper-navigation-size); height: var(--swiper-navigation-size);
margin-top: calc(0px - (var(--swiper-navigation-size) / 2)); margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
@ -170,33 +231,50 @@
.swiper-navigation-disabled .swiper-button-prev, .swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next { .swiper-navigation-disabled .swiper-button-next {
display: none !important; } display: none !important; }
.swiper-button-prev:after, .swiper-button-next:after { .swiper-button-prev svg, .swiper-button-next svg {
font-family: swiper-icons; width: 100%;
font-size: var(--swiper-navigation-size); height: 100%;
text-transform: none !important; object-fit: contain;
letter-spacing: 0; transform-origin: center; }
font-variant: initial; .swiper-rtl .swiper-button-prev svg, .swiper-rtl .swiper-button-next svg {
line-height: 1; } transform: rotate(180deg); }
.swiper-button-prev, .swiper-button-prev,
.swiper-rtl .swiper-button-next { .swiper-rtl .swiper-button-next {
left: 10px; left: var(--swiper-navigation-sides-offset, 10px);
right: auto; } right: auto; }
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
content: 'prev'; }
.swiper-button-next, .swiper-button-next,
.swiper-rtl .swiper-button-prev { .swiper-rtl .swiper-button-prev {
right: 10px; right: var(--swiper-navigation-sides-offset, 10px);
left: auto; }
.swiper-button-lock {
display: none; }
/* Navigation font start */
.swiper-button-prev:after,
.swiper-button-next:after {
font-family: swiper-icons;
font-size: var(--swiper-navigation-size);
text-transform: none !important;
letter-spacing: 0;
font-variant: initial;
line-height: 1; }
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
content: 'prev'; }
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
right: var(--swiper-navigation-sides-offset, 10px);
left: auto; } left: auto; }
.swiper-button-next:after, .swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after { .swiper-rtl .swiper-button-prev:after {
content: 'next'; } content: 'next'; }
.swiper-button-lock { /* Navigation font end */
display: none; }
/* a11y */ /* a11y */
.swiper .swiper-notification { .swiper .swiper-notification {
position: absolute; position: absolute;
@ -339,7 +417,8 @@
display: block; display: block;
line-height: 1.2em; line-height: 1.2em;
word-break: break-word; } word-break: break-word; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper a > img { .wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper a > img,
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper a > canvas {
width: 100%; width: 100%;
height: auto; } height: auto; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper a, .wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper a,
@ -347,7 +426,8 @@
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
display: block; } display: block; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide-duplicate img { .wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide-duplicate img,
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide-duplicate canvas {
display: initial !important; } display: initial !important; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide.collection-list-item-grid a { .wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide.collection-list-item-grid a {
width: 100%; width: 100%;
@ -370,17 +450,17 @@
-ms-grid-row: 1; -ms-grid-row: 1;
-ms-grid-row-span: 2; -ms-grid-row-span: 2;
grid-column: 1/3; grid-column: 1/3;
grid-row: 1/3; grid-row: 1/3; }
padding-bottom: 100% !important; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide.collection-list-item-grid .collection-items-grid > * { .wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide.collection-list-item-grid .collection-items-grid > * {
flex-basis: 50%; flex-basis: 50%;
width: 100%; width: 100%;
height: auto; height: auto;
margin-bottom: 0px; margin-bottom: 0px; }
padding-bottom: 100% !important; } .wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide.collection-list-item-grid .collection-items-grid img,
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide.collection-list-item-grid .collection-items-grid img { .wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide.collection-list-item-grid .collection-items-grid canvas {
object-fit: cover; object-fit: cover;
object-position: center; } object-position: center;
width: 100%; }
.wp-block-tainacan-carousel-collections-list .preview-warning { .wp-block-tainacan-carousel-collections-list .preview-warning {
width: 100%; width: 100%;
font-size: 0.875rem; font-size: 0.875rem;
@ -488,7 +568,8 @@
display: block; display: block;
line-height: 1.2em; line-height: 1.2em;
word-break: break-word; } word-break: break-word; }
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item img { .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item img,
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item canvas {
height: auto; height: auto;
padding: 0px; padding: 0px;
margin-bottom: 0.5em; margin-bottom: 0.5em;

4
src/assets/css/tainacan-gutenberg-block-carousel-collections-list.css.map
View File

File diff suppressed because one or more lines are too long

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

@ -1,13 +1,13 @@
/** /**
* Swiper 8.4.7 * Swiper 11.0.7
* Most modern mobile touch slider and framework with hardware accelerated transitions * Most modern mobile touch slider and framework with hardware accelerated transitions
* https://swiperjs.com * https://swiperjs.com
* *
* Copyright 2014-2023 Vladimir Kharlampidi * Copyright 2014-2024 Vladimir Kharlampidi
* *
* Released under the MIT License * Released under the MIT License
* *
* Released on: January 30, 2023 * Released on: February 27, 2024
*/ */
@font-face { @font-face {
font-family: 'swiper-icons'; font-family: 'swiper-icons';
@ -15,7 +15,18 @@
font-weight: 400; font-weight: 400;
font-style: normal; } font-style: normal; }
:root { :root {
--swiper-theme-color: #007aff; } --swiper-theme-color: #007aff;
/*
--swiper-preloader-color: var(--swiper-theme-color);
--swiper-wrapper-transition-timing-function: initial;
*/ }
:host {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1; }
.swiper { .swiper {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -24,7 +35,8 @@
list-style: none; list-style: none;
padding: 0; padding: 0;
/* Fix of Webkit flickering */ /* Fix of Webkit flickering */
z-index: 1; } z-index: 1;
display: block; }
.swiper-vertical > .swiper-wrapper { .swiper-vertical > .swiper-wrapper {
flex-direction: column; } flex-direction: column; }
@ -36,23 +48,27 @@
z-index: 1; z-index: 1;
display: flex; display: flex;
transition-property: transform; transition-property: transform;
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
box-sizing: content-box; } box-sizing: content-box; }
.swiper-android .swiper-slide, .swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper { .swiper-wrapper {
transform: translate3d(0px, 0, 0); } transform: translate3d(0px, 0, 0); }
.swiper-pointer-events { .swiper-horizontal {
touch-action: pan-y; } touch-action: pan-y; }
.swiper-pointer-events.swiper-vertical {
touch-action: pan-x; } .swiper-vertical {
touch-action: pan-x; }
.swiper-slide { .swiper-slide {
flex-shrink: 0; flex-shrink: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
transition-property: transform; } transition-property: transform;
display: block; }
.swiper-slide-invisible-blank { .swiper-slide-invisible-blank {
visibility: hidden; } visibility: hidden; }
@ -61,6 +77,7 @@
.swiper-autoheight, .swiper-autoheight,
.swiper-autoheight .swiper-slide { .swiper-autoheight .swiper-slide {
height: auto; } height: auto; }
.swiper-autoheight .swiper-wrapper { .swiper-autoheight .swiper-wrapper {
align-items: flex-start; align-items: flex-start;
transition-property: transform, height; } transition-property: transform, height; }
@ -70,17 +87,64 @@
backface-visibility: hidden; } backface-visibility: hidden; }
/* 3D Effects */ /* 3D Effects */
.swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper { .swiper-3d.swiper-css-mode .swiper-wrapper {
perspective: 1200px; } perspective: 1200px; }
.swiper-3d .swiper-wrapper,
.swiper-3d .swiper-slide, .swiper-3d .swiper-wrapper {
transform-style: preserve-3d; }
.swiper-3d {
perspective: 1200px; }
.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
transform-style: preserve-3d; }
/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
overflow: auto;
scrollbar-width: none;
/* For Firefox */
-ms-overflow-style: none;
/* For Internet Explorer and Edge */ }
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
display: none; }
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: start start; }
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
scroll-snap-type: x mandatory; }
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
scroll-snap-type: y mandatory; }
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
scroll-snap-type: none; }
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: none; }
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
content: '';
flex-shrink: 0;
order: 9999; }
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
scroll-snap-align: center center;
scroll-snap-stop: always; }
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
margin-inline-start: var(--swiper-centered-offset-before); }
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
height: 100%;
min-height: 1px;
width: var(--swiper-centered-offset-after); }
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
margin-block-start: var(--swiper-centered-offset-before); }
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
width: 100%;
min-width: 1px;
height: var(--swiper-centered-offset-after); }
/* Slide styles start */
/* 3D Shadows */
.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-cube-shadow {
transform-style: preserve-3d; }
.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-right,
@ -104,50 +168,47 @@
.swiper-3d .swiper-slide-shadow-bottom { .swiper-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
/* CSS Mode */ .swiper-lazy-preloader {
.swiper-css-mode > .swiper-wrapper { width: 42px;
overflow: auto; height: 42px;
scrollbar-width: none; position: absolute;
/* For Firefox */ left: 50%;
-ms-overflow-style: none; top: 50%;
/* For Internet Explorer and Edge */ } margin-left: -21px;
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { margin-top: -21px;
display: none; } z-index: 10;
.swiper-css-mode > .swiper-wrapper > .swiper-slide { transform-origin: 50%;
scroll-snap-align: start start; } box-sizing: border-box;
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
border-radius: 50%;
border-top-color: transparent; }
.swiper-horizontal.swiper-css-mode > .swiper-wrapper { .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
scroll-snap-type: x mandatory; } .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
animation: swiper-preloader-spin 1s infinite linear; }
.swiper-vertical.swiper-css-mode > .swiper-wrapper { .swiper-lazy-preloader-white {
scroll-snap-type: y mandatory; } --swiper-preloader-color: #fff; }
.swiper-centered > .swiper-wrapper::before { .swiper-lazy-preloader-black {
content: ''; --swiper-preloader-color: #000; }
flex-shrink: 0;
order: 9999; }
.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
margin-inline-start: var(--swiper-centered-offset-before); }
.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
height: 100%;
width: var(--swiper-centered-offset-after); }
.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
margin-block-start: var(--swiper-centered-offset-before); }
.swiper-centered.swiper-vertical > .swiper-wrapper::before {
width: 100%;
height: var(--swiper-centered-offset-after); }
.swiper-centered > .swiper-wrapper > .swiper-slide {
scroll-snap-align: center center;
scroll-snap-stop: always; }
@keyframes swiper-preloader-spin {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
/* Slide styles end */
:root { :root {
--swiper-navigation-size: 44px; --swiper-navigation-size: 44px;
/* /*
--swiper-navigation-top-offset: 50%;
--swiper-navigation-sides-offset: 10px;
--swiper-navigation-color: var(--swiper-theme-color); --swiper-navigation-color: var(--swiper-theme-color);
*/ } */ }
.swiper-button-prev, .swiper-button-next { .swiper-button-prev, .swiper-button-next {
position: absolute; position: absolute;
top: 50%; top: var(--swiper-navigation-top-offset, 50%);
width: calc(var(--swiper-navigation-size) / 44 * 27); width: calc(var(--swiper-navigation-size) / 44 * 27);
height: var(--swiper-navigation-size); height: var(--swiper-navigation-size);
margin-top: calc(0px - (var(--swiper-navigation-size) / 2)); margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
@ -170,33 +231,50 @@
.swiper-navigation-disabled .swiper-button-prev, .swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next { .swiper-navigation-disabled .swiper-button-next {
display: none !important; } display: none !important; }
.swiper-button-prev:after, .swiper-button-next:after { .swiper-button-prev svg, .swiper-button-next svg {
font-family: swiper-icons; width: 100%;
font-size: var(--swiper-navigation-size); height: 100%;
text-transform: none !important; object-fit: contain;
letter-spacing: 0; transform-origin: center; }
font-variant: initial; .swiper-rtl .swiper-button-prev svg, .swiper-rtl .swiper-button-next svg {
line-height: 1; } transform: rotate(180deg); }
.swiper-button-prev, .swiper-button-prev,
.swiper-rtl .swiper-button-next { .swiper-rtl .swiper-button-next {
left: 10px; left: var(--swiper-navigation-sides-offset, 10px);
right: auto; } right: auto; }
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
content: 'prev'; }
.swiper-button-next, .swiper-button-next,
.swiper-rtl .swiper-button-prev { .swiper-rtl .swiper-button-prev {
right: 10px; right: var(--swiper-navigation-sides-offset, 10px);
left: auto; }
.swiper-button-lock {
display: none; }
/* Navigation font start */
.swiper-button-prev:after,
.swiper-button-next:after {
font-family: swiper-icons;
font-size: var(--swiper-navigation-size);
text-transform: none !important;
letter-spacing: 0;
font-variant: initial;
line-height: 1; }
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
content: 'prev'; }
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
right: var(--swiper-navigation-sides-offset, 10px);
left: auto; } left: auto; }
.swiper-button-next:after, .swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after { .swiper-rtl .swiper-button-prev:after {
content: 'next'; } content: 'next'; }
.swiper-button-lock { /* Navigation font end */
display: none; }
/* a11y */ /* a11y */
.swiper .swiper-notification { .swiper .swiper-notification {
position: absolute; position: absolute;
@ -346,7 +424,8 @@
display: block; display: block;
line-height: 1.2em; line-height: 1.2em;
word-break: break-word; } word-break: break-word; }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper a > img { .wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper a > img,
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper canvas {
width: 100%; width: 100%;
height: auto; } height: auto; }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper a, .wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper a,
@ -354,11 +433,11 @@
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
display: block; } display: block; }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper .is-forced-square > a > div { .wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper .is-forced-square > a > div img,
padding-bottom: 100% !important; } .wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper .is-forced-square > a > div canvas {
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper .is-forced-square > a > div img { object-fit: cover;
object-fit: cover; object-position: center;
object-position: center; } height: auto; }
.wp-block-tainacan-carousel-items-list .preview-warning { .wp-block-tainacan-carousel-items-list .preview-warning {
width: 100%; width: 100%;
font-size: 0.875rem; font-size: 0.875rem;
@ -463,7 +542,8 @@
display: block; display: block;
line-height: 1.2em; line-height: 1.2em;
word-break: break-word; } word-break: break-word; }
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item img { .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item img,
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item canvas {
height: auto; height: auto;
display: block; display: block;
padding: 0px; padding: 0px;
@ -474,7 +554,8 @@
content: ''; content: '';
width: 100%; width: 100%;
position: relative; } position: relative; }
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.is-forced-square img { .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.is-forced-square img,
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.is-forced-square canvas {
display: block; display: block;
padding: 0px; padding: 0px;
margin-bottom: 0.5em; margin-bottom: 0.5em;
@ -655,7 +736,8 @@
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-items-per-screen-6, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-items-per-screen-5, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-items-per-screen-4, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-items-per-screen-3, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-items-per-screen-2, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-items-per-screen-1 { .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-items-per-screen-6, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-items-per-screen-5, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-items-per-screen-4, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-items-per-screen-3, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-items-per-screen-2, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-items-per-screen-1 {
width: calc(100% - var(--spaceBetweenItems, 32px) ); width: calc(100% - var(--spaceBetweenItems, 32px) );
min-width: calc(100% - var(--spaceBetweenItems, 32px) ); } } min-width: calc(100% - var(--spaceBetweenItems, 32px) ); } }
.wp-block-tainacan-carousel-items-list .swiper-slide-duplicate img { .wp-block-tainacan-carousel-items-list .swiper-slide-duplicate img,
.wp-block-tainacan-carousel-items-list .swiper-slide-duplicate canvas {
display: initial !important; } display: initial !important; }
.block-editor-block-list__block > .wp-block-tainacan-carousel-items-list { .block-editor-block-list__block > .wp-block-tainacan-carousel-items-list {

4
src/assets/css/tainacan-gutenberg-block-carousel-items-list.css.map
View File

File diff suppressed because one or more lines are too long

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

@ -1,13 +1,13 @@
/** /**
* Swiper 8.4.7 * Swiper 11.0.7
* Most modern mobile touch slider and framework with hardware accelerated transitions * Most modern mobile touch slider and framework with hardware accelerated transitions
* https://swiperjs.com * https://swiperjs.com
* *
* Copyright 2014-2023 Vladimir Kharlampidi * Copyright 2014-2024 Vladimir Kharlampidi
* *
* Released under the MIT License * Released under the MIT License
* *
* Released on: January 30, 2023 * Released on: February 27, 2024
*/ */
@font-face { @font-face {
font-family: 'swiper-icons'; font-family: 'swiper-icons';
@ -15,7 +15,18 @@
font-weight: 400; font-weight: 400;
font-style: normal; } font-style: normal; }
:root { :root {
--swiper-theme-color: #007aff; } --swiper-theme-color: #007aff;
/*
--swiper-preloader-color: var(--swiper-theme-color);
--swiper-wrapper-transition-timing-function: initial;
*/ }
:host {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1; }
.swiper { .swiper {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -24,7 +35,8 @@
list-style: none; list-style: none;
padding: 0; padding: 0;
/* Fix of Webkit flickering */ /* Fix of Webkit flickering */
z-index: 1; } z-index: 1;
display: block; }
.swiper-vertical > .swiper-wrapper { .swiper-vertical > .swiper-wrapper {
flex-direction: column; } flex-direction: column; }
@ -36,23 +48,27 @@
z-index: 1; z-index: 1;
display: flex; display: flex;
transition-property: transform; transition-property: transform;
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
box-sizing: content-box; } box-sizing: content-box; }
.swiper-android .swiper-slide, .swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper { .swiper-wrapper {
transform: translate3d(0px, 0, 0); } transform: translate3d(0px, 0, 0); }
.swiper-pointer-events { .swiper-horizontal {
touch-action: pan-y; } touch-action: pan-y; }
.swiper-pointer-events.swiper-vertical {
touch-action: pan-x; } .swiper-vertical {
touch-action: pan-x; }
.swiper-slide { .swiper-slide {
flex-shrink: 0; flex-shrink: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
transition-property: transform; } transition-property: transform;
display: block; }
.swiper-slide-invisible-blank { .swiper-slide-invisible-blank {
visibility: hidden; } visibility: hidden; }
@ -61,6 +77,7 @@
.swiper-autoheight, .swiper-autoheight,
.swiper-autoheight .swiper-slide { .swiper-autoheight .swiper-slide {
height: auto; } height: auto; }
.swiper-autoheight .swiper-wrapper { .swiper-autoheight .swiper-wrapper {
align-items: flex-start; align-items: flex-start;
transition-property: transform, height; } transition-property: transform, height; }
@ -70,17 +87,64 @@
backface-visibility: hidden; } backface-visibility: hidden; }
/* 3D Effects */ /* 3D Effects */
.swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper { .swiper-3d.swiper-css-mode .swiper-wrapper {
perspective: 1200px; } perspective: 1200px; }
.swiper-3d .swiper-wrapper,
.swiper-3d .swiper-slide, .swiper-3d .swiper-wrapper {
transform-style: preserve-3d; }
.swiper-3d {
perspective: 1200px; }
.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
transform-style: preserve-3d; }
/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
overflow: auto;
scrollbar-width: none;
/* For Firefox */
-ms-overflow-style: none;
/* For Internet Explorer and Edge */ }
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
display: none; }
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: start start; }
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
scroll-snap-type: x mandatory; }
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
scroll-snap-type: y mandatory; }
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
scroll-snap-type: none; }
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: none; }
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
content: '';
flex-shrink: 0;
order: 9999; }
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
scroll-snap-align: center center;
scroll-snap-stop: always; }
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
margin-inline-start: var(--swiper-centered-offset-before); }
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
height: 100%;
min-height: 1px;
width: var(--swiper-centered-offset-after); }
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
margin-block-start: var(--swiper-centered-offset-before); }
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
width: 100%;
min-width: 1px;
height: var(--swiper-centered-offset-after); }
/* Slide styles start */
/* 3D Shadows */
.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-cube-shadow {
transform-style: preserve-3d; }
.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-right,
@ -104,50 +168,47 @@
.swiper-3d .swiper-slide-shadow-bottom { .swiper-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
/* CSS Mode */ .swiper-lazy-preloader {
.swiper-css-mode > .swiper-wrapper { width: 42px;
overflow: auto; height: 42px;
scrollbar-width: none; position: absolute;
/* For Firefox */ left: 50%;
-ms-overflow-style: none; top: 50%;
/* For Internet Explorer and Edge */ } margin-left: -21px;
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { margin-top: -21px;
display: none; } z-index: 10;
.swiper-css-mode > .swiper-wrapper > .swiper-slide { transform-origin: 50%;
scroll-snap-align: start start; } box-sizing: border-box;
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
border-radius: 50%;
border-top-color: transparent; }
.swiper-horizontal.swiper-css-mode > .swiper-wrapper { .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
scroll-snap-type: x mandatory; } .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
animation: swiper-preloader-spin 1s infinite linear; }
.swiper-vertical.swiper-css-mode > .swiper-wrapper { .swiper-lazy-preloader-white {
scroll-snap-type: y mandatory; } --swiper-preloader-color: #fff; }
.swiper-centered > .swiper-wrapper::before { .swiper-lazy-preloader-black {
content: ''; --swiper-preloader-color: #000; }
flex-shrink: 0;
order: 9999; }
.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
margin-inline-start: var(--swiper-centered-offset-before); }
.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
height: 100%;
width: var(--swiper-centered-offset-after); }
.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
margin-block-start: var(--swiper-centered-offset-before); }
.swiper-centered.swiper-vertical > .swiper-wrapper::before {
width: 100%;
height: var(--swiper-centered-offset-after); }
.swiper-centered > .swiper-wrapper > .swiper-slide {
scroll-snap-align: center center;
scroll-snap-stop: always; }
@keyframes swiper-preloader-spin {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
/* Slide styles end */
:root { :root {
--swiper-navigation-size: 44px; --swiper-navigation-size: 44px;
/* /*
--swiper-navigation-top-offset: 50%;
--swiper-navigation-sides-offset: 10px;
--swiper-navigation-color: var(--swiper-theme-color); --swiper-navigation-color: var(--swiper-theme-color);
*/ } */ }
.swiper-button-prev, .swiper-button-next { .swiper-button-prev, .swiper-button-next {
position: absolute; position: absolute;
top: 50%; top: var(--swiper-navigation-top-offset, 50%);
width: calc(var(--swiper-navigation-size) / 44 * 27); width: calc(var(--swiper-navigation-size) / 44 * 27);
height: var(--swiper-navigation-size); height: var(--swiper-navigation-size);
margin-top: calc(0px - (var(--swiper-navigation-size) / 2)); margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
@ -170,33 +231,50 @@
.swiper-navigation-disabled .swiper-button-prev, .swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next { .swiper-navigation-disabled .swiper-button-next {
display: none !important; } display: none !important; }
.swiper-button-prev:after, .swiper-button-next:after { .swiper-button-prev svg, .swiper-button-next svg {
font-family: swiper-icons; width: 100%;
font-size: var(--swiper-navigation-size); height: 100%;
text-transform: none !important; object-fit: contain;
letter-spacing: 0; transform-origin: center; }
font-variant: initial; .swiper-rtl .swiper-button-prev svg, .swiper-rtl .swiper-button-next svg {
line-height: 1; } transform: rotate(180deg); }
.swiper-button-prev, .swiper-button-prev,
.swiper-rtl .swiper-button-next { .swiper-rtl .swiper-button-next {
left: 10px; left: var(--swiper-navigation-sides-offset, 10px);
right: auto; } right: auto; }
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
content: 'prev'; }
.swiper-button-next, .swiper-button-next,
.swiper-rtl .swiper-button-prev { .swiper-rtl .swiper-button-prev {
right: 10px; right: var(--swiper-navigation-sides-offset, 10px);
left: auto; }
.swiper-button-lock {
display: none; }
/* Navigation font start */
.swiper-button-prev:after,
.swiper-button-next:after {
font-family: swiper-icons;
font-size: var(--swiper-navigation-size);
text-transform: none !important;
letter-spacing: 0;
font-variant: initial;
line-height: 1; }
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
content: 'prev'; }
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
right: var(--swiper-navigation-sides-offset, 10px);
left: auto; } left: auto; }
.swiper-button-next:after, .swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after { .swiper-rtl .swiper-button-prev:after {
content: 'next'; } content: 'next'; }
.swiper-button-lock { /* Navigation font end */
display: none; }
/* a11y */ /* a11y */
.swiper .swiper-notification { .swiper .swiper-notification {
position: absolute; position: absolute;
@ -339,7 +417,8 @@
display: block; display: block;
line-height: 1.2em; line-height: 1.2em;
word-break: break-word; } word-break: break-word; }
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper a > img { .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper a > img,
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper a > canvas {
width: 100%; width: 100%;
height: auto; } height: auto; }
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper a, .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper a,
@ -347,7 +426,8 @@
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
display: block; } display: block; }
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide-duplicate img { .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide-duplicate img,
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide-duplicate canvas {
display: initial !important; } display: initial !important; }
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide.term-list-item-grid a { .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide.term-list-item-grid a {
width: 100%; width: 100%;
@ -370,17 +450,17 @@
-ms-grid-row: 1; -ms-grid-row: 1;
-ms-grid-row-span: 2; -ms-grid-row-span: 2;
grid-column: 1/3; grid-column: 1/3;
grid-row: 1/3; grid-row: 1/3; }
padding-bottom: 100% !important; }
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide.term-list-item-grid .term-items-grid > * { .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide.term-list-item-grid .term-items-grid > * {
flex-basis: 50%; flex-basis: 50%;
width: 100%; width: 100%;
height: auto; height: auto;
margin-bottom: 0px; margin-bottom: 0px; }
padding-bottom: 100% !important; } .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide.term-list-item-grid .term-items-grid img,
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide.term-list-item-grid .term-items-grid img { .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide.term-list-item-grid .term-items-grid canvas {
object-fit: cover; object-fit: cover;
object-position: center; } object-position: center;
width: 100%; }
.wp-block-tainacan-carousel-terms-list .preview-warning { .wp-block-tainacan-carousel-terms-list .preview-warning {
width: 100%; width: 100%;
font-size: 0.875rem; font-size: 0.875rem;
@ -488,7 +568,8 @@
display: block; display: block;
line-height: 1.2em; line-height: 1.2em;
word-break: break-word; } word-break: break-word; }
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item img { .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item img,
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item canvas {
height: auto; height: auto;
padding: 0px; padding: 0px;
margin-bottom: 0.5em; margin-bottom: 0.5em;

4
src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css.map
View File

File diff suppressed because one or more lines are too long

21
src/assets/css/tainacan-gutenberg-block-collections-list.css
View File

@ -20,7 +20,9 @@
margin-left: 0 !important; margin-left: 0 !important;
height: 185px !important; } height: 185px !important; }
.wp-block-tainacan-collections-list ul.collections-list.collections-list-without-margin li img, .wp-block-tainacan-collections-list ul.collections-list.collections-list-without-margin li img,
.wp-block-tainacan-collections-list ul.collections-list-edit.collections-list-without-margin li img { .wp-block-tainacan-collections-list ul.collections-list.collections-list-without-margin li canvas,
.wp-block-tainacan-collections-list ul.collections-list-edit.collections-list-without-margin li img,
.wp-block-tainacan-collections-list ul.collections-list-edit.collections-list-without-margin li canvas {
height: 185px !important; height: 185px !important;
margin-bottom: 0px !important; } margin-bottom: 0px !important; }
.wp-block-tainacan-collections-list ul.collections-list.collections-layout-grid, .wp-block-tainacan-collections-list ul.collections-list.collections-layout-grid,
@ -50,7 +52,9 @@
line-height: normal; line-height: normal;
display: block; } display: block; }
.wp-block-tainacan-collections-list ul.collections-list.collections-layout-grid li.collection-list-item img, .wp-block-tainacan-collections-list ul.collections-list.collections-layout-grid li.collection-list-item img,
.wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-grid li.collection-list-item img { .wp-block-tainacan-collections-list ul.collections-list.collections-layout-grid li.collection-list-item canvas,
.wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-grid li.collection-list-item img,
.wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-grid li.collection-list-item canvas {
height: auto; height: auto;
width: 185px; width: 185px;
min-width: 185px; min-width: 185px;
@ -103,8 +107,9 @@
.wp-block-tainacan-collections-list ul.collections-list.collections-layout-grid li.collection-list-item, .wp-block-tainacan-collections-list ul.collections-list.collections-layout-grid li.collection-list-item,
.wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-grid li.collection-list-item { .wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-grid li.collection-list-item {
width: 100%; } width: 100%; }
.wp-block-tainacan-collections-list ul.collections-list.collections-layout-grid li.collection-list-item img, .wp-block-tainacan-collections-list ul.collections-list.collections-layout-grid li.collection-list-item img, .wp-block-tainacan-collections-list ul.collections-list.collections-layout-grid li.collection-list-item canvas,
.wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-grid li.collection-list-item img { .wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-grid li.collection-list-item img,
.wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-grid li.collection-list-item canvas {
width: 100%; } } width: 100%; } }
.wp-block-tainacan-collections-list ul.collections-list.collections-layout-list, .wp-block-tainacan-collections-list ul.collections-list.collections-layout-list,
.wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-list { .wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-list {
@ -130,14 +135,18 @@
word-break: break-all; word-break: break-all;
word-break: break-word; } word-break: break-word; }
.wp-block-tainacan-collections-list ul.collections-list.collections-layout-list li.collection-list-item img, .wp-block-tainacan-collections-list ul.collections-list.collections-layout-list li.collection-list-item img,
.wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-list li.collection-list-item img { .wp-block-tainacan-collections-list ul.collections-list.collections-layout-list li.collection-list-item canvas,
.wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-list li.collection-list-item img,
.wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-list li.collection-list-item canvas {
height: auto; height: auto;
width: 54px; width: 54px;
min-width: 54px; min-width: 54px;
padding: 0px; padding: 0px;
margin-right: 20px; } margin-right: 20px; }
.wp-block-tainacan-collections-list ul.collections-list.collections-layout-list li.collection-list-item a.collection-without-image img, .wp-block-tainacan-collections-list ul.collections-list.collections-layout-list li.collection-list-item a.collection-without-image img,
.wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-list li.collection-list-item a.collection-without-image img { .wp-block-tainacan-collections-list ul.collections-list.collections-layout-list li.collection-list-item a.collection-without-image canvas,
.wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-list li.collection-list-item a.collection-without-image img,
.wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-list li.collection-list-item a.collection-without-image canvas {
display: none; } display: none; }
.wp-block-tainacan-collections-list ul.collections-list.collections-layout-list li.collection-list-item a, .wp-block-tainacan-collections-list ul.collections-list.collections-layout-list li.collection-list-item:hover a, .wp-block-tainacan-collections-list ul.collections-list.collections-layout-list li.collection-list-item a, .wp-block-tainacan-collections-list ul.collections-list.collections-layout-list li.collection-list-item:hover a,
.wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-list li.collection-list-item a, .wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-list li.collection-list-item a,

2
src/assets/css/tainacan-gutenberg-block-collections-list.css.map
View File

@ -1,6 +1,6 @@
{ {
"version": 3, "version": 3,
"mappings": "AAEA,mCAAoC;EAChC,MAAM,EAAE,QAAQ;EAGhB,uDAAoB;IAChB,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,CAAC;EAIZ;gGAC2D;IACvD,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,CAAC;EAId;8FACyD;IACrD,qBAAqB,EAAE,wBAAwB;IAC/C,eAAe,EAAE,iBAAiB;IAClC,kBAAkB,EAAE,eAAe;IAEnC;mGAAG;MACC,UAAU,EAAE,YAAY;MACxB,YAAY,EAAE,YAAY;MAC1B,WAAW,EAAE,YAAY;MACzB,MAAM,EAAE,gBAAgB;MAExB;yGAAI;QACA,MAAM,EAAE,gBAAgB;QACxB,aAAa,EAAE,cAAc;EAIzC;sFACiD;IAC7C,OAAO,EAAE,CAAC;ICtCd,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,QAAQ;IACjB,OAAO,EAAE,IAAI;IDqCT,gBAAgB,EAAE,6BAA6B;IAC/C,qBAAqB,EAAE,wBAAwB;IAC/C,QAAQ,EAAE,GAAG;IACb,eAAe,EAAE,YAAY;IAC7B,eAAe,EAAE,IAAI;IAErB;gHAAwB;MACpB,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,KAAK;MACd,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,IAAI;MACnB,KAAK,EAAE,KAAK;MAEZ;oHAAE;QACE,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,IAAI;QACZ,WAAW,EAAE,IAAI;QACjB,WAAW,EAAE,MAAM;QACnB,OAAO,EAAE,KAAK;MAGlB;sHAAI;QACA,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,KAAK;QACZ,SAAS,EAAE,KAAK;QAChB,OAAO,EAAE,GAAG;QACZ,aAAa,EAAE,KAAK;MAGxB;iJAA+B;QAC3B,OAAO,EAAE,IAAI;MAGjB;;0HACU;QACN,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,IAAI;EAIjC,oFAAiD;IAC7C,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,UAAU;IAEvB,2FAAO;MACH,QAAQ,EAAE,mBAAmB;MAC7B,gBAAgB,EAAE,yBAAyB;MAC3C,KAAK,EAAE,oCAAmC;MAC1C,OAAO,EAAE,GAAG;MACZ,WAAW,EAAE,GAAG;MAChB,SAAS,EAAE,IAAI;MACf,UAAU,EAAE,MAAM;MAClB,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,CAAC;MACV,KAAK,EAAE,KAAK;MACZ,GAAG,EAAE,GAAG;MACR,eAAe,EAAE,MAAM;MACvB,OAAO,EAAE,GAAG;MAEZ,qGAAU;QAAE,MAAM,EAAE,GAAG;IAG3B,iGAAe;MACX,MAAM,EAAE,IAAI;MACZ,UAAU,EAAE,OAAO;MACnB,gBAAgB,EAAE,gBAAiC;MACnD,OAAO,EAAE,CAAC;MACV,KAAK,EAAE,IAAI;MACX,GAAG,EAAE,IAAI;MACT,MAAM,EAAE,8CAA6C;MACrD,aAAa,EAAE,KAAK;MACpB,UAAU,EAAE,wCAAwC;IAExD,uGAAqB;MACjB,gBAAgB,EAAE,gBAAiC;MACnD,MAAM,EAAE,yDAAwD;EAGxE,yCAA0C;IAEtC;wFACiD;MAC7C,qBAAqB,EAAE,uBAAuB;MAE9C;kHAAwB;QACpB,KAAK,EAAE,IAAI;QACX;wHAAI;UAAE,KAAK,EAAE,IAAI;EAM7B;sFACiD;IAC7C,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,IAAI;IACb,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,MAAM;IACnB,eAAe,EAAE,IAAI;IAErB;gHAAwB;MACpB,QAAQ,EAAE,QAAQ;MAClB,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,IAAI;MACnB,UAAU,EAAE,IAAI;MAChB,SAAS,EAAE,gBAAgB;MAC3B,KAAK,EAAE,gBAAgB;MAEvB;oHAAE;QACE,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,IAAI;QACb,WAAW,EAAE,MAAM;QACnB,UAAU,EAAE,SAAS;QACrB,UAAU,EAAE,UAAU;MAG1B;sHAAI;QACA,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,IAAI;QACX,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,GAAG;QACZ,YAAY,EAAE,IAAI;MAItB;iJAA+B;QAC3B,OAAO,EAAE,IAAI;MAGjB;;0HACU;QACN,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,IAAI;MAGzB,0CAA2C;QApC/C;oHAAwB;UAqChB,SAAS,EAAE,gBAAgB;UAC3B,KAAK,EAAE,gBAAgB;MAG3B,0CAA2C;QAzC/C;oHAAwB;UA0ChB,SAAS,EAAE,oBAAoB;UAC/B,KAAK,EAAE,oBAAoB;MAG/B,yCAA0C;QA9C9C;oHAAwB;UA+ChB,SAAS,EAAE,gBAAgB;UAC3B,KAAK,EAAE,gBAAgB;MAG3B,yCAA0C;QAnD9C;oHAAwB;UAoDhB,SAAS,EAAE,iBAAiB;UAC5B,KAAK,EAAE,iBAAiB;;AAOhC;iIACa;EACT,KAAK,EAAE,OAAO", "mappings": "AAEA,mCAAoC;EAChC,MAAM,EAAE,QAAQ;EAGhB,uDAAoB;IAChB,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,CAAC;EAIZ;gGAC2D;IACvD,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,CAAC;EAId;8FACyD;IACrD,qBAAqB,EAAE,wBAAwB;IAC/C,eAAe,EAAE,iBAAiB;IAClC,kBAAkB,EAAE,eAAe;IAEnC;mGAAG;MACC,UAAU,EAAE,YAAY;MACxB,YAAY,EAAE,YAAY;MAC1B,WAAW,EAAE,YAAY;MACzB,MAAM,EAAE,gBAAgB;MAExB;;;4GACO;QACH,MAAM,EAAE,gBAAgB;QACxB,aAAa,EAAE,cAAc;EAIzC;sFACiD;IAC7C,OAAO,EAAE,CAAC;ICvCd,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,QAAQ;IACjB,OAAO,EAAE,IAAI;IDsCT,gBAAgB,EAAE,6BAA6B;IAC/C,qBAAqB,EAAE,wBAAwB;IAC/C,QAAQ,EAAE,GAAG;IACb,eAAe,EAAE,YAAY;IAC7B,eAAe,EAAE,IAAI;IAErB;gHAAwB;MACpB,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,KAAK;MACd,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,IAAI;MACnB,KAAK,EAAE,KAAK;MAEZ;oHAAE;QACE,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,IAAI;QACZ,WAAW,EAAE,IAAI;QACjB,WAAW,EAAE,MAAM;QACnB,OAAO,EAAE,KAAK;MAGlB;;;yHACO;QACH,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,KAAK;QACZ,SAAS,EAAE,KAAK;QAChB,OAAO,EAAE,GAAG;QACZ,aAAa,EAAE,KAAK;MAGxB;iJAA+B;QAC3B,OAAO,EAAE,IAAI;MAGjB;;0HACU;QACN,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,IAAI;EAIjC,oFAAiD;IAC7C,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,UAAU;IAEvB,2FAAO;MACH,QAAQ,EAAE,mBAAmB;MAC7B,gBAAgB,EAAE,yBAAyB;MAC3C,KAAK,EAAE,oCAAmC;MAC1C,OAAO,EAAE,GAAG;MACZ,WAAW,EAAE,GAAG;MAChB,SAAS,EAAE,IAAI;MACf,UAAU,EAAE,MAAM;MAClB,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,CAAC;MACV,KAAK,EAAE,KAAK;MACZ,GAAG,EAAE,GAAG;MACR,eAAe,EAAE,MAAM;MACvB,OAAO,EAAE,GAAG;MAEZ,qGAAU;QAAE,MAAM,EAAE,GAAG;IAG3B,iGAAe;MACX,MAAM,EAAE,IAAI;MACZ,UAAU,EAAE,OAAO;MACnB,gBAAgB,EAAE,gBAAiC;MACnD,OAAO,EAAE,CAAC;MACV,KAAK,EAAE,IAAI;MACX,GAAG,EAAE,IAAI;MACT,MAAM,EAAE,8CAA6C;MACrD,aAAa,EAAE,KAAK;MACpB,UAAU,EAAE,wCAAwC;IAExD,uGAAqB;MACjB,gBAAgB,EAAE,gBAAiC;MACnD,MAAM,EAAE,yDAAwD;EAGxE,yCAA0C;IAEtC;wFACiD;MAC7C,qBAAqB,EAAE,uBAAuB;MAE9C;kHAAwB;QACpB,KAAK,EAAE,IAAI;QACX;;2HAAW;UAAE,KAAK,EAAE,IAAI;EAMpC;sFACiD;IAC7C,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,IAAI;IACb,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,MAAM;IACnB,eAAe,EAAE,IAAI;IAErB;gHAAwB;MACpB,QAAQ,EAAE,QAAQ;MAClB,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,IAAI;MACnB,UAAU,EAAE,IAAI;MAChB,SAAS,EAAE,gBAAgB;MAC3B,KAAK,EAAE,gBAAgB;MAEvB;oHAAE;QACE,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,IAAI;QACb,WAAW,EAAE,MAAM;QACnB,UAAU,EAAE,SAAS;QACrB,UAAU,EAAE,UAAU;MAG1B;;;yHACO;QACH,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,IAAI;QACX,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,GAAG;QACZ,YAAY,EAAE,IAAI;MAItB;;;oJACkC;QAC9B,OAAO,EAAE,IAAI;MAGjB;;0HACU;QACN,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,IAAI;MAGzB,0CAA2C;QAtC/C;oHAAwB;UAuChB,SAAS,EAAE,gBAAgB;UAC3B,KAAK,EAAE,gBAAgB;MAG3B,0CAA2C;QA3C/C;oHAAwB;UA4ChB,SAAS,EAAE,oBAAoB;UAC/B,KAAK,EAAE,oBAAoB;MAG/B,yCAA0C;QAhD9C;oHAAwB;UAiDhB,SAAS,EAAE,gBAAgB;UAC3B,KAAK,EAAE,gBAAgB;MAG3B,yCAA0C;QArD9C;oHAAwB;UAsDhB,SAAS,EAAE,iBAAiB;UAC5B,KAAK,EAAE,iBAAiB;;AAOhC;iIACa;EACT,KAAK,EAAE,OAAO",
"sources": ["../../views/gutenberg-blocks/blocks/collections-list/style.scss","../../views/gutenberg-blocks/scss/gutenberg-blocks-variables.scss"], "sources": ["../../views/gutenberg-blocks/blocks/collections-list/style.scss","../../views/gutenberg-blocks/scss/gutenberg-blocks-variables.scss"],
"names": [], "names": [],
"file": "tainacan-gutenberg-block-collections-list.css" "file": "tainacan-gutenberg-block-collections-list.css"

21
src/assets/css/tainacan-gutenberg-block-dynamic-items-list.css
View File

@ -346,7 +346,9 @@
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item a > div { .wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item a > div {
width: 100%; } width: 100%; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid li.item-list-item img, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid li.item-list-item img,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item img { .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid li.item-list-item canvas,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item img,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item canvas {
flex-basis: 100%; flex-basis: 100%;
height: auto; height: auto;
width: 100%; width: 100%;
@ -373,8 +375,9 @@
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid li.item-list-item, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid li.item-list-item,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item { .wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item {
width: 100%; } width: 100%; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid li.item-list-item img, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid li.item-list-item img, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid li.item-list-item canvas,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item img { .wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item img,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item canvas {
width: 100%; } } width: 100%; } }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list { .wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list {
@ -518,14 +521,18 @@
width: 54px; width: 54px;
min-width: 54px; } min-width: 54px; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list li.item-list-item img, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list li.item-list-item img,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list li.item-list-item img { .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list li.item-list-item canvas,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list li.item-list-item img,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list li.item-list-item canvas {
height: auto; height: auto;
width: 54px; width: 54px;
min-width: 54px; min-width: 54px;
padding: 0px; padding: 0px;
margin-right: 20px; } margin-right: 20px; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list li.item-list-item a.item-without-image img, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list li.item-list-item a.item-without-image img,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list li.item-list-item a.item-without-image img { .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list li.item-list-item a.item-without-image canvas,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list li.item-list-item a.item-without-image img,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list li.item-list-item a.item-without-image canvas {
display: none; } display: none; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list li.item-list-item a, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list li.item-list-item:hover a, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list li.item-list-item a, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list li.item-list-item:hover a,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list li.item-list-item a, .wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list li.item-list-item a,
@ -574,7 +581,9 @@
font-weight: bold; font-weight: bold;
line-height: normal; } line-height: normal; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container li.item-list-item img, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container li.item-list-item img,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container li.item-list-item img { .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container li.item-list-item canvas,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container li.item-list-item img,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container li.item-list-item canvas {
display: none; } display: none; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container li.item-list-item a > span, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container li.item-list-item a > span,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container li.item-list-item a > span { .wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container li.item-list-item a > span {

2
src/assets/css/tainacan-gutenberg-block-dynamic-items-list.css.map
View File

File diff suppressed because one or more lines are too long

228
src/assets/css/tainacan-gutenberg-block-item-gallery.css
View File

@ -1,13 +1,13 @@
/** /**
* Swiper 8.4.7 * Swiper 11.0.7
* Most modern mobile touch slider and framework with hardware accelerated transitions * Most modern mobile touch slider and framework with hardware accelerated transitions
* https://swiperjs.com * https://swiperjs.com
* *
* Copyright 2014-2023 Vladimir Kharlampidi * Copyright 2014-2024 Vladimir Kharlampidi
* *
* Released under the MIT License * Released under the MIT License
* *
* Released on: January 30, 2023 * Released on: February 27, 2024
*/ */
@font-face { @font-face {
font-family: 'swiper-icons'; font-family: 'swiper-icons';
@ -15,7 +15,18 @@
font-weight: 400; font-weight: 400;
font-style: normal; } font-style: normal; }
:root { :root {
--swiper-theme-color: #007aff; } --swiper-theme-color: #007aff;
/*
--swiper-preloader-color: var(--swiper-theme-color);
--swiper-wrapper-transition-timing-function: initial;
*/ }
:host {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1; }
.swiper { .swiper {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -24,7 +35,8 @@
list-style: none; list-style: none;
padding: 0; padding: 0;
/* Fix of Webkit flickering */ /* Fix of Webkit flickering */
z-index: 1; } z-index: 1;
display: block; }
.swiper-vertical > .swiper-wrapper { .swiper-vertical > .swiper-wrapper {
flex-direction: column; } flex-direction: column; }
@ -36,23 +48,27 @@
z-index: 1; z-index: 1;
display: flex; display: flex;
transition-property: transform; transition-property: transform;
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
box-sizing: content-box; } box-sizing: content-box; }
.swiper-android .swiper-slide, .swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper { .swiper-wrapper {
transform: translate3d(0px, 0, 0); } transform: translate3d(0px, 0, 0); }
.swiper-pointer-events { .swiper-horizontal {
touch-action: pan-y; } touch-action: pan-y; }
.swiper-pointer-events.swiper-vertical {
touch-action: pan-x; } .swiper-vertical {
touch-action: pan-x; }
.swiper-slide { .swiper-slide {
flex-shrink: 0; flex-shrink: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
transition-property: transform; } transition-property: transform;
display: block; }
.swiper-slide-invisible-blank { .swiper-slide-invisible-blank {
visibility: hidden; } visibility: hidden; }
@ -61,6 +77,7 @@
.swiper-autoheight, .swiper-autoheight,
.swiper-autoheight .swiper-slide { .swiper-autoheight .swiper-slide {
height: auto; } height: auto; }
.swiper-autoheight .swiper-wrapper { .swiper-autoheight .swiper-wrapper {
align-items: flex-start; align-items: flex-start;
transition-property: transform, height; } transition-property: transform, height; }
@ -70,17 +87,64 @@
backface-visibility: hidden; } backface-visibility: hidden; }
/* 3D Effects */ /* 3D Effects */
.swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper { .swiper-3d.swiper-css-mode .swiper-wrapper {
perspective: 1200px; } perspective: 1200px; }
.swiper-3d .swiper-wrapper,
.swiper-3d .swiper-slide, .swiper-3d .swiper-wrapper {
transform-style: preserve-3d; }
.swiper-3d {
perspective: 1200px; }
.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
transform-style: preserve-3d; }
/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
overflow: auto;
scrollbar-width: none;
/* For Firefox */
-ms-overflow-style: none;
/* For Internet Explorer and Edge */ }
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
display: none; }
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: start start; }
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
scroll-snap-type: x mandatory; }
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
scroll-snap-type: y mandatory; }
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
scroll-snap-type: none; }
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: none; }
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
content: '';
flex-shrink: 0;
order: 9999; }
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
scroll-snap-align: center center;
scroll-snap-stop: always; }
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
margin-inline-start: var(--swiper-centered-offset-before); }
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
height: 100%;
min-height: 1px;
width: var(--swiper-centered-offset-after); }
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
margin-block-start: var(--swiper-centered-offset-before); }
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
width: 100%;
min-width: 1px;
height: var(--swiper-centered-offset-after); }
/* Slide styles start */
/* 3D Shadows */
.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-cube-shadow {
transform-style: preserve-3d; }
.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-right,
@ -104,50 +168,47 @@
.swiper-3d .swiper-slide-shadow-bottom { .swiper-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
/* CSS Mode */ .swiper-lazy-preloader {
.swiper-css-mode > .swiper-wrapper { width: 42px;
overflow: auto; height: 42px;
scrollbar-width: none; position: absolute;
/* For Firefox */ left: 50%;
-ms-overflow-style: none; top: 50%;
/* For Internet Explorer and Edge */ } margin-left: -21px;
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { margin-top: -21px;
display: none; } z-index: 10;
.swiper-css-mode > .swiper-wrapper > .swiper-slide { transform-origin: 50%;
scroll-snap-align: start start; } box-sizing: border-box;
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
border-radius: 50%;
border-top-color: transparent; }
.swiper-horizontal.swiper-css-mode > .swiper-wrapper { .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
scroll-snap-type: x mandatory; } .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
animation: swiper-preloader-spin 1s infinite linear; }
.swiper-vertical.swiper-css-mode > .swiper-wrapper { .swiper-lazy-preloader-white {
scroll-snap-type: y mandatory; } --swiper-preloader-color: #fff; }
.swiper-centered > .swiper-wrapper::before { .swiper-lazy-preloader-black {
content: ''; --swiper-preloader-color: #000; }
flex-shrink: 0;
order: 9999; }
.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
margin-inline-start: var(--swiper-centered-offset-before); }
.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
height: 100%;
width: var(--swiper-centered-offset-after); }
.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
margin-block-start: var(--swiper-centered-offset-before); }
.swiper-centered.swiper-vertical > .swiper-wrapper::before {
width: 100%;
height: var(--swiper-centered-offset-after); }
.swiper-centered > .swiper-wrapper > .swiper-slide {
scroll-snap-align: center center;
scroll-snap-stop: always; }
@keyframes swiper-preloader-spin {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
/* Slide styles end */
:root { :root {
--swiper-navigation-size: 44px; --swiper-navigation-size: 44px;
/* /*
--swiper-navigation-top-offset: 50%;
--swiper-navigation-sides-offset: 10px;
--swiper-navigation-color: var(--swiper-theme-color); --swiper-navigation-color: var(--swiper-theme-color);
*/ } */ }
.swiper-button-prev, .swiper-button-next { .swiper-button-prev, .swiper-button-next {
position: absolute; position: absolute;
top: 50%; top: var(--swiper-navigation-top-offset, 50%);
width: calc(var(--swiper-navigation-size) / 44 * 27); width: calc(var(--swiper-navigation-size) / 44 * 27);
height: var(--swiper-navigation-size); height: var(--swiper-navigation-size);
margin-top: calc(0px - (var(--swiper-navigation-size) / 2)); margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
@ -170,33 +231,50 @@
.swiper-navigation-disabled .swiper-button-prev, .swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next { .swiper-navigation-disabled .swiper-button-next {
display: none !important; } display: none !important; }
.swiper-button-prev:after, .swiper-button-next:after { .swiper-button-prev svg, .swiper-button-next svg {
font-family: swiper-icons; width: 100%;
font-size: var(--swiper-navigation-size); height: 100%;
text-transform: none !important; object-fit: contain;
letter-spacing: 0; transform-origin: center; }
font-variant: initial; .swiper-rtl .swiper-button-prev svg, .swiper-rtl .swiper-button-next svg {
line-height: 1; } transform: rotate(180deg); }
.swiper-button-prev, .swiper-button-prev,
.swiper-rtl .swiper-button-next { .swiper-rtl .swiper-button-next {
left: 10px; left: var(--swiper-navigation-sides-offset, 10px);
right: auto; } right: auto; }
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
content: 'prev'; }
.swiper-button-next, .swiper-button-next,
.swiper-rtl .swiper-button-prev { .swiper-rtl .swiper-button-prev {
right: 10px; right: var(--swiper-navigation-sides-offset, 10px);
left: auto; }
.swiper-button-lock {
display: none; }
/* Navigation font start */
.swiper-button-prev:after,
.swiper-button-next:after {
font-family: swiper-icons;
font-size: var(--swiper-navigation-size);
text-transform: none !important;
letter-spacing: 0;
font-variant: initial;
line-height: 1; }
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
content: 'prev'; }
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
right: var(--swiper-navigation-sides-offset, 10px);
left: auto; } left: auto; }
.swiper-button-next:after, .swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after { .swiper-rtl .swiper-button-prev:after {
content: 'next'; } content: 'next'; }
.swiper-button-lock { /* Navigation font end */
display: none; }
/* a11y */ /* a11y */
.swiper .swiper-notification { .swiper .swiper-notification {
position: absolute; position: absolute;
@ -209,9 +287,17 @@
:root { :root {
/* /*
--swiper-pagination-color: var(--swiper-theme-color); --swiper-pagination-color: var(--swiper-theme-color);
--swiper-pagination-left: auto;
--swiper-pagination-right: 8px;
--swiper-pagination-bottom: 8px;
--swiper-pagination-top: auto;
--swiper-pagination-fraction-color: inherit;
--swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
--swiper-pagination-progressbar-size: 4px;
--swiper-pagination-bullet-size: 8px; --swiper-pagination-bullet-size: 8px;
--swiper-pagination-bullet-width: 8px; --swiper-pagination-bullet-width: 8px;
--swiper-pagination-bullet-height: 8px; --swiper-pagination-bullet-height: 8px;
--swiper-pagination-bullet-border-radius: 50%;
--swiper-pagination-bullet-inactive-color: #000; --swiper-pagination-bullet-inactive-color: #000;
--swiper-pagination-bullet-inactive-opacity: 0.2; --swiper-pagination-bullet-inactive-opacity: 0.2;
--swiper-pagination-bullet-opacity: 1; --swiper-pagination-bullet-opacity: 1;
@ -234,7 +320,8 @@
.swiper-pagination-custom, .swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets, .swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal { .swiper-pagination-bullets.swiper-pagination-horizontal {
bottom: 10px; bottom: var(--swiper-pagination-bottom, 8px);
top: var(--swiper-pagination-top, auto);
left: 0; left: 0;
width: 100%; } width: 100%; }
@ -262,7 +349,7 @@
width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
display: inline-block; display: inline-block;
border-radius: 50%; border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
background: var(--swiper-pagination-bullet-inactive-color, #000); background: var(--swiper-pagination-bullet-inactive-color, #000);
opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); } opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); }
button.swiper-pagination-bullet { button.swiper-pagination-bullet {
@ -282,7 +369,8 @@
.swiper-vertical > .swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets { .swiper-pagination-vertical.swiper-pagination-bullets {
right: 10px; right: var(--swiper-pagination-right, 8px);
left: var(--swiper-pagination-left, auto);
top: 50%; top: 50%;
transform: translate3d(0px, -50%, 0); } transform: translate3d(0px, -50%, 0); }
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
@ -314,9 +402,13 @@
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 200ms transform, 200ms right; } transition: 200ms transform, 200ms right; }
/* Fraction */
.swiper-pagination-fraction {
color: var(--swiper-pagination-fraction-color, inherit); }
/* Progress */ /* Progress */
.swiper-pagination-progressbar { .swiper-pagination-progressbar {
background: rgba(0, 0, 0, 0.25); background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
position: absolute; } position: absolute; }
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: var(--swiper-pagination-color, var(--swiper-theme-color)); background: var(--swiper-pagination-color, var(--swiper-theme-color));
@ -331,11 +423,11 @@
transform-origin: right top; } transform-origin: right top; }
.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite { .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
width: 100%; width: 100%;
height: 4px; height: var(--swiper-pagination-progressbar-size, 4px);
left: 0; left: 0;
top: 0; } top: 0; }
.swiper-vertical > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite { .swiper-vertical > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
width: 4px; width: var(--swiper-pagination-progressbar-size, 4px);
height: 100%; height: 100%;
left: 0; left: 0;
top: 0; } top: 0; }

4
src/assets/css/tainacan-gutenberg-block-item-gallery.css.map
View File

File diff suppressed because one or more lines are too long

21
src/assets/css/tainacan-gutenberg-block-items-list.css
View File

@ -20,7 +20,9 @@
margin-left: 0 !important; margin-left: 0 !important;
height: 185px !important; } height: 185px !important; }
.wp-block-tainacan-items-list ul.items-list.items-list-without-margin li img, .wp-block-tainacan-items-list ul.items-list.items-list-without-margin li img,
.wp-block-tainacan-items-list ul.items-list-edit.items-list-without-margin li img { .wp-block-tainacan-items-list ul.items-list.items-list-without-margin li canvas,
.wp-block-tainacan-items-list ul.items-list-edit.items-list-without-margin li img,
.wp-block-tainacan-items-list ul.items-list-edit.items-list-without-margin li canvas {
height: 185px !important; height: 185px !important;
margin-bottom: 0px !important; } margin-bottom: 0px !important; }
.wp-block-tainacan-items-list ul.items-list.items-layout-grid, .wp-block-tainacan-items-list ul.items-list.items-layout-grid,
@ -54,7 +56,9 @@
line-height: normal; line-height: normal;
display: block; } display: block; }
.wp-block-tainacan-items-list ul.items-list.items-layout-grid li.item-list-item img, .wp-block-tainacan-items-list ul.items-list.items-layout-grid li.item-list-item img,
.wp-block-tainacan-items-list ul.items-list-edit.items-layout-grid li.item-list-item img { .wp-block-tainacan-items-list ul.items-list.items-layout-grid li.item-list-item canvas,
.wp-block-tainacan-items-list ul.items-list-edit.items-layout-grid li.item-list-item img,
.wp-block-tainacan-items-list ul.items-list-edit.items-layout-grid li.item-list-item canvas {
height: auto; height: auto;
width: 185px; width: 185px;
min-width: 185px; min-width: 185px;
@ -107,8 +111,9 @@
.wp-block-tainacan-items-list ul.items-list.items-layout-grid li.item-list-item, .wp-block-tainacan-items-list ul.items-list.items-layout-grid li.item-list-item,
.wp-block-tainacan-items-list ul.items-list-edit.items-layout-grid li.item-list-item { .wp-block-tainacan-items-list ul.items-list-edit.items-layout-grid li.item-list-item {
width: 100%; } width: 100%; }
.wp-block-tainacan-items-list ul.items-list.items-layout-grid li.item-list-item img, .wp-block-tainacan-items-list ul.items-list.items-layout-grid li.item-list-item img, .wp-block-tainacan-items-list ul.items-list.items-layout-grid li.item-list-item canvas,
.wp-block-tainacan-items-list ul.items-list-edit.items-layout-grid li.item-list-item img { .wp-block-tainacan-items-list ul.items-list-edit.items-layout-grid li.item-list-item img,
.wp-block-tainacan-items-list ul.items-list-edit.items-layout-grid li.item-list-item canvas {
width: 100%; } } width: 100%; } }
.wp-block-tainacan-items-list ul.items-list.items-layout-list, .wp-block-tainacan-items-list ul.items-list.items-layout-list,
.wp-block-tainacan-items-list ul.items-list-edit.items-layout-list { .wp-block-tainacan-items-list ul.items-list-edit.items-layout-list {
@ -134,14 +139,18 @@
word-break: break-all; word-break: break-all;
word-break: break-word; } word-break: break-word; }
.wp-block-tainacan-items-list ul.items-list.items-layout-list li.item-list-item img, .wp-block-tainacan-items-list ul.items-list.items-layout-list li.item-list-item img,
.wp-block-tainacan-items-list ul.items-list-edit.items-layout-list li.item-list-item img { .wp-block-tainacan-items-list ul.items-list.items-layout-list li.item-list-item canvas,
.wp-block-tainacan-items-list ul.items-list-edit.items-layout-list li.item-list-item img,
.wp-block-tainacan-items-list ul.items-list-edit.items-layout-list li.item-list-item canvas {
height: auto; height: auto;
width: 54px; width: 54px;
min-width: 54px; min-width: 54px;
padding: 0px; padding: 0px;
margin-right: 20px; } margin-right: 20px; }
.wp-block-tainacan-items-list ul.items-list.items-layout-list li.item-list-item a.item-without-image img, .wp-block-tainacan-items-list ul.items-list.items-layout-list li.item-list-item a.item-without-image img,
.wp-block-tainacan-items-list ul.items-list-edit.items-layout-list li.item-list-item a.item-without-image img { .wp-block-tainacan-items-list ul.items-list.items-layout-list li.item-list-item a.item-without-image canvas,
.wp-block-tainacan-items-list ul.items-list-edit.items-layout-list li.item-list-item a.item-without-image img,
.wp-block-tainacan-items-list ul.items-list-edit.items-layout-list li.item-list-item a.item-without-image canvas {
display: none; } display: none; }
.wp-block-tainacan-items-list ul.items-list.items-layout-list li.item-list-item a, .wp-block-tainacan-items-list ul.items-list.items-layout-list li.item-list-item:hover a, .wp-block-tainacan-items-list ul.items-list.items-layout-list li.item-list-item a, .wp-block-tainacan-items-list ul.items-list.items-layout-list li.item-list-item:hover a,
.wp-block-tainacan-items-list ul.items-list-edit.items-layout-list li.item-list-item a, .wp-block-tainacan-items-list ul.items-list-edit.items-layout-list li.item-list-item a,

2
src/assets/css/tainacan-gutenberg-block-items-list.css.map
View File

@ -1,6 +1,6 @@
{ {
"version": 3, "version": 3,
"mappings": "AAEA,6BAA8B;EAC1B,MAAM,EAAE,QAAQ;EAGhB,iDAAoB;IAChB,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,CAAC;EAIZ;8EAC+C;IAC3C,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,CAAC;EAId;4EAC6C;IACzC,qBAAqB,EAAE,wBAAwB;IAC/C,eAAe,EAAE,iBAAiB;IAClC,kBAAkB,EAAE,eAAe;IAEnC;iFAAG;MACC,UAAU,EAAE,YAAY;MACxB,YAAY,EAAE,YAAY;MAC1B,WAAW,EAAE,YAAY;MACzB,MAAM,EAAE,gBAAgB;MAExB;uFAAI;QACA,MAAM,EAAE,gBAAgB;QACxB,aAAa,EAAE,cAAc;EAIzC;oEACqC;IACjC,OAAO,EAAE,CAAC;ICtCd,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,QAAQ;IACjB,OAAO,EAAE,IAAI;IDqCT,gBAAgB,EAAE,6BAA6B;IAC/C,qBAAqB,EAAE,wBAAwB;IAC/C,QAAQ,EAAE,GAAG;IACb,eAAe,EAAE,YAAY;IAC7B,WAAW,EAAE,UAAU;IACvB,eAAe,EAAE,IAAI;IAErB;wFAAkB;MACd,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,KAAK;MACd,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,IAAI;MACnB,KAAK,EAAE,KAAK;MAEZ;4FAAE;QACE,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,IAAI;QACZ,WAAW,EAAE,IAAI;QACjB,WAAW,EAAE,MAAM;QAEnB;mGAAK;UACD,WAAW,EAAE,MAAM;UACnB,OAAO,EAAE,KAAK;MAItB;8FAAI;QACA,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,KAAK;QACZ,SAAS,EAAE,KAAK;QAChB,OAAO,EAAE,GAAG;QACZ,aAAa,EAAE,KAAK;MAGxB;oHAA0B;QACtB,OAAO,EAAE,IAAI;MAGjB;;kGACU;QACN,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,IAAI;EAIjC,kEAAqC;IACjC,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,UAAU;IAEvB,yEAAO;MACH,QAAQ,EAAE,mBAAmB;MAC7B,gBAAgB,EAAE,yBAAyB;MAC3C,KAAK,EAAE,oCAAmC;MAC1C,OAAO,EAAE,GAAG;MACZ,WAAW,EAAE,GAAG;MAChB,SAAS,EAAE,IAAI;MACf,UAAU,EAAE,MAAM;MAClB,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,CAAC;MACV,KAAK,EAAE,KAAK;MACZ,GAAG,EAAE,GAAG;MACR,eAAe,EAAE,MAAM;MACvB,OAAO,EAAE,GAAG;MAEZ,mFAAU;QAAE,MAAM,EAAE,GAAG;IAG3B,+EAAe;MACX,MAAM,EAAE,IAAI;MACZ,UAAU,EAAE,OAAO;MACnB,gBAAgB,EAAE,gBAAiC;MACnD,OAAO,EAAE,CAAC;MACV,KAAK,EAAE,IAAI;MACX,GAAG,EAAE,IAAI;MACT,MAAM,EAAE,8CAA6C;MACrD,aAAa,EAAE,KAAK;MACpB,UAAU,EAAE,wCAAwC;IAExD,qFAAqB;MACjB,gBAAgB,EAAE,gBAAiC;MACnD,MAAM,EAAE,yDAAwD;EAGxE,yCAA0C;IAEtC;sEACqC;MACjC,qBAAqB,EAAE,uBAAuB;MAE9C;0FAAkB;QACd,KAAK,EAAE,IAAI;QACX;gGAAI;UAAE,KAAK,EAAE,IAAI;EAM7B;oEACqC;IACjC,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,IAAI;IACb,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,MAAM;IACnB,eAAe,EAAE,IAAI;IAErB;wFAAkB;MACd,QAAQ,EAAE,QAAQ;MAClB,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,IAAI;MACnB,UAAU,EAAE,IAAI;MAChB,SAAS,EAAE,gBAAgB;MAC3B,KAAK,EAAE,gBAAgB;MAEvB;4FAAE;QACE,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,IAAI;QACb,WAAW,EAAE,MAAM;QACnB,UAAU,EAAE,SAAS;QACrB,UAAU,EAAE,UAAU;MAG1B;8FAAI;QACA,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,IAAI;QACX,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,GAAG;QACZ,YAAY,EAAE,IAAI;MAGtB;mHAAyB;QACrB,OAAO,EAAE,IAAI;MAGjB;;kGACU;QACN,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,IAAI;MAGzB,0CAA2C;QAnC/C;4FAAkB;UAoCV,SAAS,EAAE,gBAAgB;UAC3B,KAAK,EAAE,gBAAgB;MAG3B,0CAA2C;QAxC/C;4FAAkB;UAyCV,SAAS,EAAE,oBAAoB;UAC/B,KAAK,EAAE,oBAAoB;MAG/B,yCAA0C;QA7C9C;4FAAkB;UA8CV,SAAS,EAAE,gBAAgB;UAC3B,KAAK,EAAE,gBAAgB;MAG3B,yCAA0C;QAlD9C;4FAAkB;UAmDV,SAAS,EAAE,iBAAiB;UAC5B,KAAK,EAAE,iBAAiB;;AAOhC;qHACa;EACT,KAAK,EAAE,OAAO", "mappings": "AAEA,6BAA8B;EAC1B,MAAM,EAAE,QAAQ;EAGhB,iDAAoB;IAChB,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,CAAC;EAIZ;8EAC+C;IAC3C,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,CAAC;EAId;4EAC6C;IACzC,qBAAqB,EAAE,wBAAwB;IAC/C,eAAe,EAAE,iBAAiB;IAClC,kBAAkB,EAAE,eAAe;IAEnC;iFAAG;MACC,UAAU,EAAE,YAAY;MACxB,YAAY,EAAE,YAAY;MAC1B,WAAW,EAAE,YAAY;MACzB,MAAM,EAAE,gBAAgB;MAExB;;;0FACO;QACH,MAAM,EAAE,gBAAgB;QACxB,aAAa,EAAE,cAAc;EAIzC;oEACqC;IACjC,OAAO,EAAE,CAAC;ICvCd,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,QAAQ;IACjB,OAAO,EAAE,IAAI;IDsCT,gBAAgB,EAAE,6BAA6B;IAC/C,qBAAqB,EAAE,wBAAwB;IAC/C,QAAQ,EAAE,GAAG;IACb,eAAe,EAAE,YAAY;IAC7B,WAAW,EAAE,UAAU;IACvB,eAAe,EAAE,IAAI;IAErB;wFAAkB;MACd,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,KAAK;MACd,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,IAAI;MACnB,KAAK,EAAE,KAAK;MAEZ;4FAAE;QACE,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,IAAI;QACZ,WAAW,EAAE,IAAI;QACjB,WAAW,EAAE,MAAM;QAEnB;mGAAK;UACD,WAAW,EAAE,MAAM;UACnB,OAAO,EAAE,KAAK;MAItB;;;iGACO;QACH,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,KAAK;QACZ,SAAS,EAAE,KAAK;QAChB,OAAO,EAAE,GAAG;QACZ,aAAa,EAAE,KAAK;MAGxB;oHAA0B;QACtB,OAAO,EAAE,IAAI;MAGjB;;kGACU;QACN,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,IAAI;EAIjC,kEAAqC;IACjC,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,UAAU;IAEvB,yEAAO;MACH,QAAQ,EAAE,mBAAmB;MAC7B,gBAAgB,EAAE,yBAAyB;MAC3C,KAAK,EAAE,oCAAmC;MAC1C,OAAO,EAAE,GAAG;MACZ,WAAW,EAAE,GAAG;MAChB,SAAS,EAAE,IAAI;MACf,UAAU,EAAE,MAAM;MAClB,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,CAAC;MACV,KAAK,EAAE,KAAK;MACZ,GAAG,EAAE,GAAG;MACR,eAAe,EAAE,MAAM;MACvB,OAAO,EAAE,GAAG;MAEZ,mFAAU;QAAE,MAAM,EAAE,GAAG;IAG3B,+EAAe;MACX,MAAM,EAAE,IAAI;MACZ,UAAU,EAAE,OAAO;MACnB,gBAAgB,EAAE,gBAAiC;MACnD,OAAO,EAAE,CAAC;MACV,KAAK,EAAE,IAAI;MACX,GAAG,EAAE,IAAI;MACT,MAAM,EAAE,8CAA6C;MACrD,aAAa,EAAE,KAAK;MACpB,UAAU,EAAE,wCAAwC;IAExD,qFAAqB;MACjB,gBAAgB,EAAE,gBAAiC;MACnD,MAAM,EAAE,yDAAwD;EAGxE,yCAA0C;IAEtC;sEACqC;MACjC,qBAAqB,EAAE,uBAAuB;MAE9C;0FAAkB;QACd,KAAK,EAAE,IAAI;QACX;;mGAAY;UAAE,KAAK,EAAE,IAAI;EAMrC;oEACqC;IACjC,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,IAAI;IACb,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,MAAM;IACnB,eAAe,EAAE,IAAI;IAErB;wFAAkB;MACd,QAAQ,EAAE,QAAQ;MAClB,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,IAAI;MACnB,UAAU,EAAE,IAAI;MAChB,SAAS,EAAE,gBAAgB;MAC3B,KAAK,EAAE,gBAAgB;MAEvB;4FAAE;QACE,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,IAAI;QACb,WAAW,EAAE,MAAM;QACnB,UAAU,EAAE,SAAS;QACrB,UAAU,EAAE,UAAU;MAG1B;;;iGACO;QACH,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,IAAI;QACX,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,GAAG;QACZ,YAAY,EAAE,IAAI;MAGtB;;;sHAC4B;QACxB,OAAO,EAAE,IAAI;MAGjB;;kGACU;QACN,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,IAAI;MAGzB,0CAA2C;QArC/C;4FAAkB;UAsCV,SAAS,EAAE,gBAAgB;UAC3B,KAAK,EAAE,gBAAgB;MAG3B,0CAA2C;QA1C/C;4FAAkB;UA2CV,SAAS,EAAE,oBAAoB;UAC/B,KAAK,EAAE,oBAAoB;MAG/B,yCAA0C;QA/C9C;4FAAkB;UAgDV,SAAS,EAAE,gBAAgB;UAC3B,KAAK,EAAE,gBAAgB;MAG3B,yCAA0C;QApD9C;4FAAkB;UAqDV,SAAS,EAAE,iBAAiB;UAC5B,KAAK,EAAE,iBAAiB;;AAOhC;qHACa;EACT,KAAK,EAAE,OAAO",
"sources": ["../../views/gutenberg-blocks/blocks/items-list/style.scss","../../views/gutenberg-blocks/scss/gutenberg-blocks-variables.scss"], "sources": ["../../views/gutenberg-blocks/blocks/items-list/style.scss","../../views/gutenberg-blocks/scss/gutenberg-blocks-variables.scss"],
"names": [], "names": [],
"file": "tainacan-gutenberg-block-items-list.css" "file": "tainacan-gutenberg-block-items-list.css"

17
src/assets/css/tainacan-gutenberg-block-terms-list.css
View File

@ -34,7 +34,9 @@
font-weight: bold; font-weight: bold;
line-height: normal; } line-height: normal; }
.wp-block-tainacan-terms-list ul.terms-list.terms-layout-grid li.term-list-item img, .wp-block-tainacan-terms-list ul.terms-list.terms-layout-grid li.term-list-item img,
.wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-grid li.term-list-item img { .wp-block-tainacan-terms-list ul.terms-list.terms-layout-grid li.term-list-item canvas,
.wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-grid li.term-list-item img,
.wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-grid li.term-list-item canvas {
height: auto; height: auto;
width: 185px; width: 185px;
min-width: 185px; min-width: 185px;
@ -87,8 +89,9 @@
.wp-block-tainacan-terms-list ul.terms-list.terms-layout-grid li.term-list-item, .wp-block-tainacan-terms-list ul.terms-list.terms-layout-grid li.term-list-item,
.wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-grid li.term-list-item { .wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-grid li.term-list-item {
width: 100%; } width: 100%; }
.wp-block-tainacan-terms-list ul.terms-list.terms-layout-grid li.term-list-item img, .wp-block-tainacan-terms-list ul.terms-list.terms-layout-grid li.term-list-item img, .wp-block-tainacan-terms-list ul.terms-list.terms-layout-grid li.term-list-item canvas,
.wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-grid li.term-list-item img { .wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-grid li.term-list-item img,
.wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-grid li.term-list-item canvas {
width: 100%; } } width: 100%; } }
.wp-block-tainacan-terms-list ul.terms-list.terms-layout-list, .wp-block-tainacan-terms-list ul.terms-list.terms-layout-list,
.wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-list { .wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-list {
@ -114,14 +117,18 @@
word-break: break-all; word-break: break-all;
word-break: break-word; } word-break: break-word; }
.wp-block-tainacan-terms-list ul.terms-list.terms-layout-list li.term-list-item img, .wp-block-tainacan-terms-list ul.terms-list.terms-layout-list li.term-list-item img,
.wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-list li.term-list-item img { .wp-block-tainacan-terms-list ul.terms-list.terms-layout-list li.term-list-item canvas,
.wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-list li.term-list-item img,
.wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-list li.term-list-item canvas {
height: auto; height: auto;
width: 54px; width: 54px;
min-width: 54px; min-width: 54px;
padding: 0px; padding: 0px;
margin-right: 20px; } margin-right: 20px; }
.wp-block-tainacan-terms-list ul.terms-list.terms-layout-list li.term-list-item a.term-without-image img, .wp-block-tainacan-terms-list ul.terms-list.terms-layout-list li.term-list-item a.term-without-image img,
.wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-list li.term-list-item a.term-without-image img { .wp-block-tainacan-terms-list ul.terms-list.terms-layout-list li.term-list-item a.term-without-image canvas,
.wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-list li.term-list-item a.term-without-image img,
.wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-list li.term-list-item a.term-without-image canvas {
display: none; } display: none; }
.wp-block-tainacan-terms-list ul.terms-list.terms-layout-list li.term-list-item a, .wp-block-tainacan-terms-list ul.terms-list.terms-layout-list li.term-list-item:hover a, .wp-block-tainacan-terms-list ul.terms-list.terms-layout-list li.term-list-item a, .wp-block-tainacan-terms-list ul.terms-list.terms-layout-list li.term-list-item:hover a,
.wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-list li.term-list-item a, .wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-list li.term-list-item a,

2
src/assets/css/tainacan-gutenberg-block-terms-list.css.map
View File

@ -1,6 +1,6 @@
{ {
"version": 3, "version": 3,
"mappings": "AAEA,6BAA8B;EAC1B,MAAM,EAAE,QAAQ;EAGhB,iDAAoB;IAChB,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,CAAC;EAIZ;8EAC+C;IAC3C,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,CAAC;EAId;oEACqC;IACjC,OAAO,EAAE,CAAC;ICpBd,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,QAAQ;IACjB,OAAO,EAAE,IAAI;IDmBT,gBAAgB,EAAE,6BAA6B;IAC/C,qBAAqB,EAAE,wBAAwB;IAC/C,QAAQ,EAAE,GAAG;IACb,eAAe,EAAE,YAAY;IAC7B,eAAe,EAAE,IAAI;IAErB;wFAAkB;MACd,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,KAAK;MACd,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,IAAI;MACnB,KAAK,EAAE,KAAK;MAEZ;4FAAE;QACE,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,IAAI;QACZ,WAAW,EAAE,IAAI;QACjB,WAAW,EAAE,MAAM;MAGvB;8FAAI;QACA,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,KAAK;QACZ,SAAS,EAAE,KAAK;QAChB,OAAO,EAAE,GAAG;QACZ,aAAa,EAAE,KAAK;MAGxB;mHAAyB;QACrB,OAAO,EAAE,IAAI;MAGjB;;kGACU;QACN,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,IAAI;EAIjC,kEAAqC;IACjC,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,UAAU;IAEvB,yEAAO;MACH,QAAQ,EAAE,mBAAmB;MAC7B,gBAAgB,EAAE,yBAAyB;MAC3C,KAAK,EAAE,oCAAmC;MAC1C,OAAO,EAAE,GAAG;MACZ,WAAW,EAAE,GAAG;MAChB,SAAS,EAAE,IAAI;MACf,UAAU,EAAE,MAAM;MAClB,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,CAAC;MACV,KAAK,EAAE,KAAK;MACZ,GAAG,EAAE,GAAG;MACR,eAAe,EAAE,MAAM;MACvB,OAAO,EAAE,GAAG;MAEZ,mFAAU;QAAE,MAAM,EAAE,GAAG;IAG3B,+EAAe;MACX,MAAM,EAAE,IAAI;MACZ,UAAU,EAAE,OAAO;MACnB,gBAAgB,EAAE,gBAAiC;MACnD,OAAO,EAAE,CAAC;MACV,KAAK,EAAE,IAAI;MACX,GAAG,EAAE,IAAI;MACT,MAAM,EAAE,8CAA6C;MACrD,aAAa,EAAE,KAAK;MACpB,UAAU,EAAE,wCAAwC;IAExD,qFAAqB;MACjB,gBAAgB,EAAE,gBAAiC;MACnD,MAAM,EAAE,yDAAwD;EAGxE,yCAA0C;IAEtC;sEACqC;MACjC,qBAAqB,EAAE,uBAAuB;MAE9C;0FAAkB;QACd,KAAK,EAAE,IAAI;QACX;gGAAI;UAAE,KAAK,EAAE,IAAI;EAM7B;oEACqC;IACjC,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,IAAI;IACb,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,MAAM;IACnB,eAAe,EAAE,IAAI;IAErB;wFAAkB;MACd,QAAQ,EAAE,QAAQ;MAClB,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,IAAI;MACnB,UAAU,EAAE,IAAI;MAChB,SAAS,EAAE,gBAAgB;MAC3B,KAAK,EAAE,gBAAgB;MAEvB;4FAAE;QACE,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,IAAI;QACb,WAAW,EAAE,MAAM;QACnB,UAAU,EAAE,SAAS;QACrB,UAAU,EAAE,UAAU;MAG1B;8FAAI;QACA,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,IAAI;QACX,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,GAAG;QACZ,YAAY,EAAE,IAAI;MAGtB;mHAAyB;QACrB,OAAO,EAAE,IAAI;MAGjB;;kGACU;QACN,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,IAAI;MAGzB,0CAA2C;QAnC/C;4FAAkB;UAoCV,SAAS,EAAE,gBAAgB;UAC3B,KAAK,EAAE,gBAAgB;MAG3B,0CAA2C;QAxC/C;4FAAkB;UAyCV,SAAS,EAAE,oBAAoB;UAC/B,KAAK,EAAE,oBAAoB;MAG/B,yCAA0C;QA7C9C;4FAAkB;UA8CV,SAAS,EAAE,gBAAgB;UAC3B,KAAK,EAAE,gBAAgB;MAG3B,yCAA0C;QAlD9C;4FAAkB;UAmDV,SAAS,EAAE,iBAAiB;UAC5B,KAAK,EAAE,iBAAiB;;AAOhC;qHACa;EACT,KAAK,EAAE,OAAO", "mappings": "AAEA,6BAA8B;EAC1B,MAAM,EAAE,QAAQ;EAGhB,iDAAoB;IAChB,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,CAAC;EAIZ;8EAC+C;IAC3C,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,CAAC;EAId;oEACqC;IACjC,OAAO,EAAE,CAAC;ICpBd,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,QAAQ;IACjB,OAAO,EAAE,IAAI;IDmBT,gBAAgB,EAAE,6BAA6B;IAC/C,qBAAqB,EAAE,wBAAwB;IAC/C,QAAQ,EAAE,GAAG;IACb,eAAe,EAAE,YAAY;IAC7B,eAAe,EAAE,IAAI;IAErB;wFAAkB;MACd,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,KAAK;MACd,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,IAAI;MACnB,KAAK,EAAE,KAAK;MAEZ;4FAAE;QACE,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,IAAI;QACZ,WAAW,EAAE,IAAI;QACjB,WAAW,EAAE,MAAM;MAGvB;;;iGACO;QACH,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,KAAK;QACZ,SAAS,EAAE,KAAK;QAChB,OAAO,EAAE,GAAG;QACZ,aAAa,EAAE,KAAK;MAGxB;mHAAyB;QACrB,OAAO,EAAE,IAAI;MAGjB;;kGACU;QACN,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,IAAI;EAIjC,kEAAqC;IACjC,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,UAAU;IAEvB,yEAAO;MACH,QAAQ,EAAE,mBAAmB;MAC7B,gBAAgB,EAAE,yBAAyB;MAC3C,KAAK,EAAE,oCAAmC;MAC1C,OAAO,EAAE,GAAG;MACZ,WAAW,EAAE,GAAG;MAChB,SAAS,EAAE,IAAI;MACf,UAAU,EAAE,MAAM;MAClB,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,CAAC;MACV,KAAK,EAAE,KAAK;MACZ,GAAG,EAAE,GAAG;MACR,eAAe,EAAE,MAAM;MACvB,OAAO,EAAE,GAAG;MAEZ,mFAAU;QAAE,MAAM,EAAE,GAAG;IAG3B,+EAAe;MACX,MAAM,EAAE,IAAI;MACZ,UAAU,EAAE,OAAO;MACnB,gBAAgB,EAAE,gBAAiC;MACnD,OAAO,EAAE,CAAC;MACV,KAAK,EAAE,IAAI;MACX,GAAG,EAAE,IAAI;MACT,MAAM,EAAE,8CAA6C;MACrD,aAAa,EAAE,KAAK;MACpB,UAAU,EAAE,wCAAwC;IAExD,qFAAqB;MACjB,gBAAgB,EAAE,gBAAiC;MACnD,MAAM,EAAE,yDAAwD;EAGxE,yCAA0C;IAEtC;sEACqC;MACjC,qBAAqB,EAAE,uBAAuB;MAE9C;0FAAkB;QACd,KAAK,EAAE,IAAI;QACX;;mGAAY;UAAE,KAAK,EAAE,IAAI;EAMrC;oEACqC;IACjC,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,IAAI;IACb,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,MAAM;IACnB,eAAe,EAAE,IAAI;IAErB;wFAAkB;MACd,QAAQ,EAAE,QAAQ;MAClB,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,IAAI;MACnB,UAAU,EAAE,IAAI;MAChB,SAAS,EAAE,gBAAgB;MAC3B,KAAK,EAAE,gBAAgB;MAEvB;4FAAE;QACE,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,IAAI;QACb,WAAW,EAAE,MAAM;QACnB,UAAU,EAAE,SAAS;QACrB,UAAU,EAAE,UAAU;MAG1B;;;iGACO;QACH,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,IAAI;QACX,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,GAAG;QACZ,YAAY,EAAE,IAAI;MAGtB;;;sHAC4B;QACxB,OAAO,EAAE,IAAI;MAGjB;;kGACU;QACN,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,IAAI;MAGzB,0CAA2C;QArC/C;4FAAkB;UAsCV,SAAS,EAAE,gBAAgB;UAC3B,KAAK,EAAE,gBAAgB;MAG3B,0CAA2C;QA1C/C;4FAAkB;UA2CV,SAAS,EAAE,oBAAoB;UAC/B,KAAK,EAAE,oBAAoB;MAG/B,yCAA0C;QA/C9C;4FAAkB;UAgDV,SAAS,EAAE,gBAAgB;UAC3B,KAAK,EAAE,gBAAgB;MAG3B,yCAA0C;QApD9C;4FAAkB;UAqDV,SAAS,EAAE,iBAAiB;UAC5B,KAAK,EAAE,iBAAiB;;AAOhC;qHACa;EACT,KAAK,EAAE,OAAO",
"sources": ["../../views/gutenberg-blocks/blocks/terms-list/style.scss","../../views/gutenberg-blocks/scss/gutenberg-blocks-variables.scss"], "sources": ["../../views/gutenberg-blocks/blocks/terms-list/style.scss","../../views/gutenberg-blocks/scss/gutenberg-blocks-variables.scss"],
"names": [], "names": [],
"file": "tainacan-gutenberg-block-terms-list.css" "file": "tainacan-gutenberg-block-terms-list.css"

2
src/assets/css/tainacan-reports.css
View File

@ -154,5 +154,7 @@
#tainacan-reports-app .apexcharts-legend-series { #tainacan-reports-app .apexcharts-legend-series {
display: flex; display: flex;
align-items: center; } align-items: center; }
#tainacan-reports-app #current-page-selector {
min-width: 48px; }
/*# sourceMappingURL=tainacan-reports.css.map */ /*# sourceMappingURL=tainacan-reports.css.map */

2
src/assets/css/tainacan-reports.css.map
View File

@ -1,6 +1,6 @@
{ {
"version": 3, "version": 3,
"mappings": "AAAA,qBAAsB;EAClB,OAAO,EAAE,iBAAiB;EAC1B,MAAM,EAAE,CAAC;EAET,6BAAQ;IACJ,MAAM,EAAE,OAAO;EAGnB,8CAAyB;IACrB,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,aAAa;IAC9B,WAAW,EAAE,MAAM;IACnB,MAAM,EAAE,kBAAkB;IAE1B,iEAAmB;MACf,MAAM,EAAE,IAAI;IAGhB,qDAAO;MACH,YAAY,EAAE,IAAI;MAClB,WAAW,EAAE,GAAG;EAGxB,iDAA4B;IACxB,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,MAAM;IACnB,MAAM,EAAE,gBAAgB;IACxB,KAAK,EAAE,oCAAoC;IAE3C,mGAAkD;MAC9C,YAAY,EAAE,IAAI;MAClB,WAAW,EAAE,8CAA8C;IAG/D,wFAAuC;MACnC,WAAW,EAAE,IAAI;MACjB,WAAW,EAAE,GAAG;IAGpB,0FAAyC;MACrC,OAAO,EAAE,IAAI;MACb,WAAW,EAAE,MAAM;MACnB,MAAM,EAAE,gBAAgB;MACxB,SAAS,EAAE,IAAI;MAEf,kJAA0D;QACtD,UAAU,EAAE,eAAe;QAE3B,oCAAqC;UAHzC,kJAA0D;YAIlD,UAAU,EAAE,IAAI;MAGxB,oJAA4D;QACxD,UAAU,EAAE,oBAAoB;QAEhC,qCAAsC;UAH1C,oJAA4D;YAIpD,UAAU,EAAE,eAAe;QAE/B,oCAAqC;UANzC,oJAA4D;YAOpD,UAAU,EAAE,IAAI;IAK5B,6FAA4C;MACxC,OAAO,EAAE,IAAI;MACb,WAAW,EAAE,MAAM;MACnB,MAAM,EAAE,eAAe;MACvB,UAAU,EAAE,IAAI;IAEpB,2DAAU;MACN,IAAI,EAAE,oCAAoC;MAC1C,WAAW,EAAE,OAAO;MACpB,MAAM,EAAE,OAAO;IAEnB,0EAAyB;MACrB,IAAI,EAAE,WAAW;MACjB,MAAM,EAAE,oCAAoC;IAEhD,wEAAuB;MACnB,WAAW,EAAE,CAAC;EAItB,8BAAS;IACL,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,UAAU;IACvB,eAAe,EAAE,MAAM;IAEvB,sCAAQ;MACJ,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,CAAC;MACV,QAAQ,EAAE,QAAQ;MAClB,UAAU,EAAE,WAAW;MAEvB,+CAAS;QACL,MAAM,EAAE,OAAO;MAEnB,0DAAoB;QAChB,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,mBAAmB;QAC3B,KAAK,EAAE,mBAAmB;QAC1B,OAAO,EAAE,YAAY;QACrB,OAAO,EAAE,QAAQ;QACjB,gBAAgB,EAAE,oCAAoC;QACtD,KAAK,EAAE,oCAAoC;QAC3C,SAAS,EAAE,OAAO;QAClB,sBAAsB,EAAE,GAAG;QAC3B,OAAO,EAAE,GAAG;QACZ,UAAU,EAAE,iBAAiB;QAE7B,iEAAO;UACH,MAAM,EAAE,IAAI;UACZ,UAAU,EAAE,IAAI;UAChB,MAAM,EAAE,OAAO;UAEf,uEAAQ;YACJ,KAAK,EAAE,oCAAoC;MAIvD;;sEAE0B;QACtB,OAAO,EAAE,GAAG;EAKxB,8BAAS;IACL,OAAO,EAAE,gBAAgB;IACzB,aAAa,EAAE,CAAC;IAChB,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,KAAK;IACjB,gBAAgB,EAAE,oCAAoC;IAEtD,oCAAM;MACF,WAAW,EAAE,IAAI;MACjB,SAAS,EAAE,QAAQ;IAGvB,0CAAY;MACR,OAAO,EAAE,IAAI;MACb,WAAW,EAAE,QAAQ;MACrB,eAAe,EAAE,aAAa;MAC9B,SAAS,EAAE,IAAI;MAEf,4DAAkB;QACd,aAAa,EAAE,IAAI;QACnB,WAAW,EAAE,IAAI;EAK7B,gDAA2B;IACvB,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,MAAM;IACnB,eAAe,EAAE,MAAM;IACvB,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,KAAK;IACjB,cAAc,EAAE,MAAM;IACtB,OAAO,EAAE,IAAI;IAEb,kDAAE;MACE,KAAK,EAAE,oCAAoC;EAInD,wCAAmB;IACf,OAAO,EAAE,YAAY;IACrB,+CAAO;MACH,MAAM,EAAE,eAAe;MACvB,UAAU,EAAE,eAAe;MAC3B,UAAU,EAAE,eAAe;MAC3B,OAAO,EAAE,CAAC;MACV,MAAM,EAAE,OAAO;MAEf,uDAAU;QACN,KAAK,EAAE,oCAAoC;EAKvD,8CAAyB;IACrB,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,MAAM;IACvB,WAAW,EAAE,UAAU;IACvB,cAAc,EAAE,MAAM;IAEtB,+EAAiC;MAC7B,gBAAgB,EAAE,oCAAoC;MACtD,OAAO,EAAE,IAAI;MACb,eAAe,EAAE,UAAU;MAC3B,WAAW,EAAE,MAAM;MACnB,KAAK,EAAE,IAAI;MACX,OAAO,EAAE,iBAAiB;IAG9B,gHAAgE;MAC5D,OAAO,EAAE,iBAAiB;IAE9B,6EAA+B;MAC3B,KAAK,EAAE,IAAI;MACX,OAAO,EAAE,QAAQ;MACjB,OAAO,EAAE,IAAI;MACb,eAAe,EAAE,MAAM;MACvB,WAAW,EAAE,UAAU;MACvB,cAAc,EAAE,MAAM;MAEtB,+EAAE;QACE,aAAa,EAAE,GAAG;QAClB,SAAS,EAAE,OAAO;EAK9B,+CAA0B;IACtB,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,MAAM", "mappings": "AAAA,qBAAsB;EAClB,OAAO,EAAE,iBAAiB;EAC1B,MAAM,EAAE,CAAC;EAET,6BAAQ;IACJ,MAAM,EAAE,OAAO;EAGnB,8CAAyB;IACrB,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,aAAa;IAC9B,WAAW,EAAE,MAAM;IACnB,MAAM,EAAE,kBAAkB;IAE1B,iEAAmB;MACf,MAAM,EAAE,IAAI;IAGhB,qDAAO;MACH,YAAY,EAAE,IAAI;MAClB,WAAW,EAAE,GAAG;EAGxB,iDAA4B;IACxB,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,MAAM;IACnB,MAAM,EAAE,gBAAgB;IACxB,KAAK,EAAE,oCAAoC;IAE3C,mGAAkD;MAC9C,YAAY,EAAE,IAAI;MAClB,WAAW,EAAE,8CAA8C;IAG/D,wFAAuC;MACnC,WAAW,EAAE,IAAI;MACjB,WAAW,EAAE,GAAG;IAGpB,0FAAyC;MACrC,OAAO,EAAE,IAAI;MACb,WAAW,EAAE,MAAM;MACnB,MAAM,EAAE,gBAAgB;MACxB,SAAS,EAAE,IAAI;MAEf,kJAA0D;QACtD,UAAU,EAAE,eAAe;QAE3B,oCAAqC;UAHzC,kJAA0D;YAIlD,UAAU,EAAE,IAAI;MAGxB,oJAA4D;QACxD,UAAU,EAAE,oBAAoB;QAEhC,qCAAsC;UAH1C,oJAA4D;YAIpD,UAAU,EAAE,eAAe;QAE/B,oCAAqC;UANzC,oJAA4D;YAOpD,UAAU,EAAE,IAAI;IAK5B,6FAA4C;MACxC,OAAO,EAAE,IAAI;MACb,WAAW,EAAE,MAAM;MACnB,MAAM,EAAE,eAAe;MACvB,UAAU,EAAE,IAAI;IAEpB,2DAAU;MACN,IAAI,EAAE,oCAAoC;MAC1C,WAAW,EAAE,OAAO;MACpB,MAAM,EAAE,OAAO;IAEnB,0EAAyB;MACrB,IAAI,EAAE,WAAW;MACjB,MAAM,EAAE,oCAAoC;IAEhD,wEAAuB;MACnB,WAAW,EAAE,CAAC;EAItB,8BAAS;IACL,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,UAAU;IACvB,eAAe,EAAE,MAAM;IAEvB,sCAAQ;MACJ,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,CAAC;MACV,QAAQ,EAAE,QAAQ;MAClB,UAAU,EAAE,WAAW;MAEvB,+CAAS;QACL,MAAM,EAAE,OAAO;MAEnB,0DAAoB;QAChB,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,mBAAmB;QAC3B,KAAK,EAAE,mBAAmB;QAC1B,OAAO,EAAE,YAAY;QACrB,OAAO,EAAE,QAAQ;QACjB,gBAAgB,EAAE,oCAAoC;QACtD,KAAK,EAAE,oCAAoC;QAC3C,SAAS,EAAE,OAAO;QAClB,sBAAsB,EAAE,GAAG;QAC3B,OAAO,EAAE,GAAG;QACZ,UAAU,EAAE,iBAAiB;QAE7B,iEAAO;UACH,MAAM,EAAE,IAAI;UACZ,UAAU,EAAE,IAAI;UAChB,MAAM,EAAE,OAAO;UAEf,uEAAQ;YACJ,KAAK,EAAE,oCAAoC;MAIvD;;sEAE0B;QACtB,OAAO,EAAE,GAAG;EAKxB,8BAAS;IACL,OAAO,EAAE,gBAAgB;IACzB,aAAa,EAAE,CAAC;IAChB,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,KAAK;IACjB,gBAAgB,EAAE,oCAAoC;IAEtD,oCAAM;MACF,WAAW,EAAE,IAAI;MACjB,SAAS,EAAE,QAAQ;IAGvB,0CAAY;MACR,OAAO,EAAE,IAAI;MACb,WAAW,EAAE,QAAQ;MACrB,eAAe,EAAE,aAAa;MAC9B,SAAS,EAAE,IAAI;MAEf,4DAAkB;QACd,aAAa,EAAE,IAAI;QACnB,WAAW,EAAE,IAAI;EAK7B,gDAA2B;IACvB,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,MAAM;IACnB,eAAe,EAAE,MAAM;IACvB,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,KAAK;IACjB,cAAc,EAAE,MAAM;IACtB,OAAO,EAAE,IAAI;IAEb,kDAAE;MACE,KAAK,EAAE,oCAAoC;EAInD,wCAAmB;IACf,OAAO,EAAE,YAAY;IACrB,+CAAO;MACH,MAAM,EAAE,eAAe;MACvB,UAAU,EAAE,eAAe;MAC3B,UAAU,EAAE,eAAe;MAC3B,OAAO,EAAE,CAAC;MACV,MAAM,EAAE,OAAO;MAEf,uDAAU;QACN,KAAK,EAAE,oCAAoC;EAKvD,8CAAyB;IACrB,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,MAAM;IACvB,WAAW,EAAE,UAAU;IACvB,cAAc,EAAE,MAAM;IAEtB,+EAAiC;MAC7B,gBAAgB,EAAE,oCAAoC;MACtD,OAAO,EAAE,IAAI;MACb,eAAe,EAAE,UAAU;MAC3B,WAAW,EAAE,MAAM;MACnB,KAAK,EAAE,IAAI;MACX,OAAO,EAAE,iBAAiB;IAG9B,gHAAgE;MAC5D,OAAO,EAAE,iBAAiB;IAE9B,6EAA+B;MAC3B,KAAK,EAAE,IAAI;MACX,OAAO,EAAE,QAAQ;MACjB,OAAO,EAAE,IAAI;MACb,eAAe,EAAE,MAAM;MACvB,WAAW,EAAE,UAAU;MACvB,cAAc,EAAE,MAAM;MAEtB,+EAAE;QACE,aAAa,EAAE,GAAG;QAClB,SAAS,EAAE,OAAO;EAK9B,+CAA0B;IACtB,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,MAAM;EAGvB,4CAAuB;IACnB,SAAS,EAAE,IAAI",
"sources": ["../../views/reports/tainacan-reports.scss"], "sources": ["../../views/reports/tainacan-reports.scss"],
"names": [], "names": [],
"file": "tainacan-reports.css" "file": "tainacan-reports.css"

68
src/classes/theme-helper/class-tainacan-theme-helper.php
View File

@ -619,7 +619,7 @@ class Theme_Helper {
// If in a collection page // If in a collection page
$collection = tainacan_get_collection($args); $collection = tainacan_get_collection($args);
if ($collection) { if ($collection) {
$props .= "collection-id='" . $collection->get_id() . "' "; $props .= "data-collection-id='" . $collection->get_id() . "' ";
$default_view_mode = $collection->get_default_view_mode(); $default_view_mode = $collection->get_default_view_mode();
$enabled_view_modes = $collection->get_enabled_view_modes(); $enabled_view_modes = $collection->get_enabled_view_modes();
$default_order = $collection->get_default_order(); $default_order = $collection->get_default_order();
@ -632,19 +632,19 @@ class Theme_Helper {
// If in a tainacan taxonomy // If in a tainacan taxonomy
$term = tainacan_get_term($args); $term = tainacan_get_term($args);
if ($term) { if ($term) {
$props .= "term-id='" . $term->term_id . "' "; $props .= "data-term-id='" . $term->term_id . "' ";
$props .= "taxonomy='" . $term->taxonomy . "' "; $props .= "data-taxonomy='" . $term->taxonomy . "' ";
} }
$props .= "default-view-mode='" . $default_view_mode . "' "; $props .= "data-default-view-mode='" . $default_view_mode . "' ";
$props .= "enabled-view-modes='" . implode(',', $enabled_view_modes) . "' "; $props .= "data-enabled-view-modes='" . implode(',', $enabled_view_modes) . "' ";
$props .= "default-order='" . $default_order . "' "; $props .= "data-default-order='" . $default_order . "' ";
$props .= "default-orderby='" . (is_array($default_orderby) ? json_encode($default_orderby) : $default_orderby) . "' "; $props .= "data-default-orderby='" . (is_array($default_orderby) ? json_encode($default_orderby) : $default_orderby) . "' ";
// Passes arguments to custom props // Passes arguments to custom props
foreach ($args as $key => $value) { foreach ($args as $key => $value) {
if ($value == true || $value == 'true') { if ($value == true || $value == 'true') {
$props .= str_replace("_", "-", $key) . "='" . $value . "' "; $props .= 'data-' . str_replace("_", "-", $key) . "='" . $value . "' ";
} }
} }
@ -652,32 +652,32 @@ class Theme_Helper {
'div' => [ 'div' => [
'id' => true, 'id' => true,
'data-module' => true, 'data-module' => true,
'collection-id' => true, 'data-collection-id' => true,
'term-id' => true, 'data-term-id' => true,
'taxonomy' => true, 'data-taxonomy' => true,
'default-view-mode' => true, 'data-default-view-mode' => true,
'is-forced-view-mode' => true, 'data-is-forced-view-mode' => true,
'enabled-view-modes' => true, 'data-enabled-view-modes' => true,
'default-order' => true, 'data-default-order' => true,
'default-orderby' => true, 'data-default-orderby' => true,
'hide-filters' => true, 'data-hide-filters' => true,
'hide-hide-filters-button' => true, 'data-hide-hide-filters-button' => true,
'hide-search' => true, 'data-hide-search' => true,
'hide-advanced-search' => true, 'data-hide-advanced-search' => true,
'hide-displayed-metadata-button' => true, 'data-hide-displayed-metadata-button' => true,
'hide-sorting-area' => true, 'data-hide-sorting-area' => true,
'hide-items-thumbnail' => true, 'data-hide-items-thumbnail' => true,
'hide-sort-by-button' => true, 'data-hide-sort-by-button' => true,
'hide-exposers-button' => true, 'data-hide-exposers-button' => true,
'hide-items-per-page-button' => true, 'data-hide-items-per-page-button' => true,
'hide-go-to-page-button' => true, 'data-hide-go-to-page-button' => true,
'hide-pagination-area' => true, 'data-hide-pagination-area' => true,
'default-items-per-page' => true, 'data-default-items-per-page' => true,
'show-filters-button-inside-search-control' => true, 'data-show-filters-button-inside-search-control' => true,
'start-with-filters-hidden' => true, 'data-start-with-filters-hidden' => true,
'filters-as-modal' => true, 'data-filters-as-modal' => true,
'show-inline-view-mode-options' => true, 'data-show-inline-view-mode-options' => true,
'show-fullscreen-with-view-modes' => true 'data-show-fullscreen-with-view-modes' => true
] ]
]; ];

16
src/migrations.php
View File

@ -1,8 +1,6 @@
<?php <?php
namespace Tainacan; namespace Tainacan;
class Migrations { class Migrations {
@ -509,6 +507,18 @@ class Migrations {
); );
} }
static function update_plugin_url_metadata_type_slug_to_core() {
global $wpdb;
// Brings plugin metadata type url to core
$wpdb->update($wpdb->postmeta,
['meta_value' => 'Tainacan\Metadata_Types\URL'],
['meta_value' => 'TAINACAN_URL_Plugin_Metadata_Type'],
'%s', '%s'
);
if ( function_exists('deactivate_plugins') )
\deactivate_plugins( 'tainacan-url-metadata-type/tainacan-metadata-type-url.php' );
}
static function alter_table_tnc_bg_process_add_uuid() { static function alter_table_tnc_bg_process_add_uuid() {
global $wpdb; global $wpdb;
@ -525,6 +535,4 @@ class Migrations {
} }
} }
?> ?>

29
src/views/admin/admin.vue
View File

@ -13,14 +13,14 @@
<primary-menu <primary-menu
v-if="!$adminOptions.hidePrimaryMenu" v-if="!$adminOptions.hidePrimaryMenu"
:active-route="activeRoute" :active-route="activeRoute"
:is-menu-compressed="isMenuCompressed"/> :is-menu-compressed="isMenuCompressed" />
<button <button
v-if="!$adminOptions.hidePrimaryMenu && !$adminOptions.hidePrimaryMenuCompressButton" v-if="!$adminOptions.hidePrimaryMenu && !$adminOptions.hidePrimaryMenuCompressButton"
class="is-hidden-mobile"
id="menu-compress-button" id="menu-compress-button"
class="is-hidden-mobile"
:style="{ top: menuCompressButtonTop }" :style="{ top: menuCompressButtonTop }"
@click="isMenuCompressed = !isMenuCompressed" :aria-label="$i18n.get('label_shrink_menu')"
:aria-label="$i18n.get('label_shrink_menu')"> @click="isMenuCompressed = !isMenuCompressed">
<span <span
v-tooltip="{ v-tooltip="{
content: $i18n.get('label_shrink_menu'), content: $i18n.get('label_shrink_menu'),
@ -31,14 +31,14 @@
class="icon"> class="icon">
<i <i
:class="{ 'tainacan-icon-arrowleft' : !isMenuCompressed, 'tainacan-icon-arrowright' : isMenuCompressed }" :class="{ 'tainacan-icon-arrowleft' : !isMenuCompressed, 'tainacan-icon-arrowright' : isMenuCompressed }"
class="tainacan-icon tainacan-icon-1-25em"/> class="tainacan-icon tainacan-icon-1-25em" />
</span> </span>
</button> </button>
<tainacan-header v-if="!$adminOptions.hideTainacanHeader" /> <tainacan-header v-if="!$adminOptions.hideTainacanHeader" />
<tainacan-repository-subheader <tainacan-repository-subheader
v-if="!$adminOptions.hideRepositorySubheader" v-if="!$adminOptions.hideRepositorySubheader"
:is-repository-level="isRepositoryLevel" :is-repository-level="isRepositoryLevel"
:is-menu-compressed="isMenuCompressed"/> :is-menu-compressed="isMenuCompressed" />
<div <div
id="repository-container" id="repository-container"
class="column is-main-content" class="column is-main-content"
@ -54,7 +54,6 @@
import TainacanHeader from './components/navigation/tainacan-header.vue'; import TainacanHeader from './components/navigation/tainacan-header.vue';
import TainacanRepositorySubheader from './components/navigation/tainacan-repository-subheader.vue'; import TainacanRepositorySubheader from './components/navigation/tainacan-repository-subheader.vue';
import CustomDialog from './components/other/custom-dialog.vue'; import CustomDialog from './components/other/custom-dialog.vue';
import "floating-vue/dist/style.css";
export default { export default {
name: "AdminPage", name: "AdminPage",
@ -63,6 +62,10 @@
TainacanHeader, TainacanHeader,
TainacanRepositorySubheader TainacanRepositorySubheader
}, },
emits: [
'onCollectionBreadCrumbUpdate',
'openProcessesPopup'
],
data(){ data(){
return { return {
isMenuCompressed: false, isMenuCompressed: false,
@ -92,10 +95,13 @@
} }
}, },
watch: { watch: {
'$route' (to) { '$route': {
this.isMenuCompressed = (to.params.collectionId != undefined); handler(to) {
this.activeRoute = to.name; this.isMenuCompressed = (to.params.collectionId != undefined);
this.isRepositoryLevel = this.$route.params.collectionId == undefined; this.activeRoute = to.name;
this.isRepositoryLevel = this.$route.params.collectionId == undefined;
},
deep: true
} }
}, },
created() { created() {
@ -139,6 +145,7 @@
</script> </script>
<style lang="scss"> <style lang="scss">
@import url('floating-vue/dist/style.css');
.is-fullheight { .is-fullheight {
height: 100%; height: 100%;

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

@ -3,7 +3,7 @@
class="page-container" class="page-container"
:class="{'repository-level-page' : isNewCollection }"> :class="{'repository-level-page' : isNewCollection }">
<tainacan-title <tainacan-title
:bread-crumb-items="[{ path: '', label: $i18n.get('collection') }]"/> :bread-crumb-items="[{ path: '', label: $i18n.get('collection') }]" />
<form <form
v-if="collection != null && collection != undefined && ((isNewCollection && $userCaps.hasCapability('tnc_rep_edit_collections')) || (!isNewCollection && collection.current_user_can_edit))" v-if="collection != null && collection != undefined && ((isNewCollection && $userCaps.hasCapability('tnc_rep_edit_collections')) || (!isNewCollection && collection.current_user_can_edit))"
@ -22,21 +22,21 @@
<span class="required-metadatum-asterisk">*</span> <span class="required-metadatum-asterisk">*</span>
<help-button <help-button
:title="$i18n.getHelperTitle('collections', 'name')" :title="$i18n.getHelperTitle('collections', 'name')"
:message="$i18n.getHelperMessage('collections', 'name')"/> :message="$i18n.getHelperMessage('collections', 'name')" />
<b-input <b-input
id="tainacan-text-name" id="tainacan-text-name"
:placeholder="$i18n.get('instruction_collection_name')"
v-model="form.name" v-model="form.name"
:placeholder="$i18n.get('instruction_collection_name')"
@blur="updateSlug" @blur="updateSlug"
@focus="clearErrors('name')"/> @focus="clearErrors('name')" />
</b-field> </b-field>
<!-- Hook for extra Form options --> <!-- Hook for extra Form options -->
<template v-if="hasBeginLeftForm"> <template v-if="hasBeginLeftForm">
<form <form
class="form-hook-region" id="form-collection-begin-left"
id="form-collection-begin-left" class="form-hook-region"
v-html="getBeginLeftForm"/> v-html="getBeginLeftForm" />
</template> </template>
<!-- Description -------------------------------- --> <!-- Description -------------------------------- -->
@ -47,14 +47,14 @@
:message="editFormErrors['description'] != undefined ? editFormErrors['description'] : ''"> :message="editFormErrors['description'] != undefined ? editFormErrors['description'] : ''">
<help-button <help-button
:title="$i18n.getHelperTitle('collections', 'description')" :title="$i18n.getHelperTitle('collections', 'description')"
:message="$i18n.getHelperMessage('collections', 'description')"/> :message="$i18n.getHelperMessage('collections', 'description')" />
<b-input <b-input
id="tainacan-text-description" id="tainacan-text-description"
v-model="form.description"
type="textarea" type="textarea"
rows="4" rows="4"
:placeholder="$i18n.get('instruction_collection_description')" :placeholder="$i18n.get('instruction_collection_description')"
v-model="form.description" @focus="clearErrors('description')" />
@focus="clearErrors('description')"/>
</b-field> </b-field>
<!-- Slug -------------------------------- --> <!-- Slug -------------------------------- -->
@ -65,20 +65,20 @@
:message="isUpdatingSlug ? $i18n.get('info_validating_slug') : (editFormErrors['slug'] != undefined ? editFormErrors['slug'] : '')"> :message="isUpdatingSlug ? $i18n.get('info_validating_slug') : (editFormErrors['slug'] != undefined ? editFormErrors['slug'] : '')">
<help-button <help-button
:title="$i18n.getHelperTitle('collections', 'slug')" :title="$i18n.getHelperTitle('collections', 'slug')"
:message="$i18n.getHelperMessage('collections', 'slug')"/> :message="$i18n.getHelperMessage('collections', 'slug')" />
<b-input <b-input
id="tainacan-text-slug" id="tainacan-text-slug"
@input="updateSlug"
v-model="form.slug" v-model="form.slug"
@focus="clearErrors('slug')"
:disabled="isUpdatingSlug" :disabled="isUpdatingSlug"
:loading="isUpdatingSlug"/> :loading="isUpdatingSlug"
@update:model-value="updateSlug"
@focus="clearErrors('slug')" />
</b-field> </b-field>
<!-- Items list options ------------------------ --> <!-- Items list options ------------------------ -->
<div <div
@click="showItemsListOptions = !showItemsListOptions;" class="collection-form-section"
class="collection-form-section"> @click="showItemsListOptions = !showItemsListOptions;">
<span class="icon"> <span class="icon">
<i <i
class="tainacan-icon" class="tainacan-icon"
@ -101,7 +101,7 @@
:message="editFormErrors['default_orderby'] != undefined ? editFormErrors['default_orderby'] : $i18n.get('info_default_orderby')"> :message="editFormErrors['default_orderby'] != undefined ? editFormErrors['default_orderby'] : $i18n.get('info_default_orderby')">
<help-button <help-button
:title="$i18n.getHelperTitle('collections', 'default_orderby')" :title="$i18n.getHelperTitle('collections', 'default_orderby')"
:message="$i18n.getHelperMessage('collections', 'default_orderby')"/> :message="$i18n.getHelperMessage('collections', 'default_orderby')" />
<div class="control sorting-options"> <div class="control sorting-options">
<label class="label">{{ $i18n.get('label_sort') }}&nbsp;</label> <label class="label">{{ $i18n.get('label_sort') }}&nbsp;</label>
<b-select <b-select
@ -126,14 +126,14 @@
{{ $i18n.get('info_by_inner') }} {{ $i18n.get('info_by_inner') }}
</span> </span>
<b-select <b-select
expanded id="tainacan-select-default_orderby"
:loading="isLoadingMetadata"
v-model="localDefaultOrderBy" v-model="localDefaultOrderBy"
id="tainacan-select-default_orderby"> expanded
:loading="isLoadingMetadata">
<option <option
v-for="metadatum of sortingMetadata" v-for="metadatum of sortingMetadata"
:value="metadatum.id" :key="metadatum.id"
:key="metadatum.id"> :value="metadatum.id">
{{ metadatum.name }} {{ metadatum.name }}
</option> </option>
</b-select> </b-select>
@ -148,27 +148,28 @@
<div class="field"> <div class="field">
<label class="label">{{ $i18n.get('label_view_modes_available') }}</label> <label class="label">{{ $i18n.get('label_view_modes_available') }}</label>
<help-button <help-button
:title="$i18n.getHelperTitle('collections', 'enabled_view_modes')" :title="$i18n.getHelperTitle('collections', 'enabled_view_modes')"
:message="$i18n.getHelperMessage('collections', 'enabled_view_modes')"/> :message="$i18n.getHelperMessage('collections', 'enabled_view_modes')" />
<div class="control"> <div class="control">
<b-dropdown <b-dropdown
class="enabled-view-modes-dropdown"
ref="enabledViewModesDropdown" ref="enabledViewModesDropdown"
class="enabled-view-modes-dropdown"
:mobile-modal="true" :mobile-modal="true"
:disabled="Object.keys(registeredViewModes).length < 0" :disabled="Object.keys(registeredViewModes).length < 0"
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"
@ -176,9 +177,9 @@
aria-role="listitem"> aria-role="listitem">
<b-checkbox <b-checkbox
v-if="registeredViewModes[viewMode] != undefined" v-if="registeredViewModes[viewMode] != undefined"
@input="updateViewModeslist(viewMode)" :model-value="checkIfViewModeEnabled(viewMode)"
: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"> @update:model-value="updateViewModeslist(viewMode)">
<p> <p>
<strong> <strong>
<span <span
@ -187,11 +188,13 @@
'has-text-secondary' : checkIfViewModeEnabled(viewMode), 'has-text-secondary' : checkIfViewModeEnabled(viewMode),
'has-text-gray4' : !checkIfViewModeEnabled(viewMode) 'has-text-gray4' : !checkIfViewModeEnabled(viewMode)
}" }"
v-html="registeredViewModes[viewMode].icon"/> v-html="registeredViewModes[viewMode].icon" />
&nbsp;{{ registeredViewModes[viewMode].label }} &nbsp;{{ registeredViewModes[viewMode].label }}
</strong> </strong>
</p> </p>
<p v-if="registeredViewModes[viewMode].description">{{ registeredViewModes[viewMode].description }}</p> <p v-if="registeredViewModes[viewMode].description">
{{ registeredViewModes[viewMode].description }}
</p>
</b-checkbox> </b-checkbox>
</b-dropdown-item> </b-dropdown-item>
</b-dropdown> </b-dropdown>
@ -207,11 +210,11 @@
:message="editFormErrors['default_view_mode'] != undefined ? editFormErrors['default_view_mode'] : ''"> :message="editFormErrors['default_view_mode'] != undefined ? editFormErrors['default_view_mode'] : ''">
<help-button <help-button
:title="$i18n.getHelperTitle('collections', 'default_view_mode')" :title="$i18n.getHelperTitle('collections', 'default_view_mode')"
:message="$i18n.getHelperMessage('collections', 'default_view_mode')"/> :message="$i18n.getHelperMessage('collections', 'default_view_mode')" />
<b-select <b-select
expanded
id="tainacan-select-default_view_mode" id="tainacan-select-default_view_mode"
v-model="form.default_view_mode" v-model="form.default_view_mode"
expanded
@focus="clearErrors('default_view_mode')"> @focus="clearErrors('default_view_mode')">
<option <option
v-for="(viewMode, index) of validDefaultViewModes" v-for="(viewMode, index) of validDefaultViewModes"
@ -230,13 +233,13 @@
&nbsp; &nbsp;
<b-switch <b-switch
id="tainacan-checkbox-hide-items-thumbnail-on-lists" id="tainacan-checkbox-hide-items-thumbnail-on-lists"
size="is-small" v-model="form.hide_items_thumbnail_on_lists"
true-value="yes" size="is-small"
false-value="no" true-value="yes"
v-model="form.hide_items_thumbnail_on_lists" /> false-value="no" />
<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')" />
</b-field> </b-field>
</div> </div>
@ -244,8 +247,8 @@
<!-- Item edition form options ------------------------ --> <!-- Item edition form options ------------------------ -->
<div <div
@click="showItemEditionFormOptions = !showItemEditionFormOptions;" class="collection-form-section"
class="collection-form-section"> @click="showItemEditionFormOptions = !showItemEditionFormOptions;">
<span class="icon"> <span class="icon">
<i <i
class="tainacan-icon" class="tainacan-icon"
@ -267,7 +270,7 @@
:label="$i18n.getHelperTitle('collections', 'item_enabled_document_types')"> :label="$i18n.getHelperTitle('collections', 'item_enabled_document_types')">
<help-button <help-button
:title="$i18n.getHelperTitle('collections', 'item_enabled_document_types')" :title="$i18n.getHelperTitle('collections', 'item_enabled_document_types')"
:message="$i18n.getHelperMessage('collections', 'item_enabled_document_types')"/> :message="$i18n.getHelperMessage('collections', 'item_enabled_document_types')" />
<div class="status-radios"> <div class="status-radios">
<b-checkbox <b-checkbox
v-for="(documentType, slug) in form.item_enabled_document_types" v-for="(documentType, slug) in form.item_enabled_document_types"
@ -288,7 +291,7 @@
:label="$i18n.getHelperTitle('collections', 'item_document_label')"> :label="$i18n.getHelperTitle('collections', 'item_document_label')">
<help-button <help-button
:title="$i18n.getHelperTitle('collections', 'item_document_label')" :title="$i18n.getHelperTitle('collections', 'item_document_label')"
:message="$i18n.getHelperMessage('collections', 'item_document_label')"/> :message="$i18n.getHelperMessage('collections', 'item_document_label')" />
<b-input <b-input
id="tainacan-text-item-document-label" id="tainacan-text-item-document-label"
v-model="form.item_document_label" /> v-model="form.item_document_label" />
@ -304,13 +307,13 @@
&nbsp; &nbsp;
<b-switch <b-switch
id="tainacan-checkbox-item-enable-thumbnail" id="tainacan-checkbox-item-enable-thumbnail"
size="is-small" v-model="form.item_enable_thumbnail"
true-value="yes" size="is-small"
false-value="no" true-value="yes"
v-model="form.item_enable_thumbnail" /> false-value="no" />
<help-button <help-button
:title="$i18n.getHelperTitle('collections', 'item_enable_thumbnail')" :title="$i18n.getHelperTitle('collections', 'item_enable_thumbnail')"
:message="$i18n.getHelperMessage('collections', 'item_enable_thumbnail')"/> :message="$i18n.getHelperMessage('collections', 'item_enable_thumbnail')" />
</b-field> </b-field>
<b-field <b-field
@ -319,7 +322,7 @@
:label="$i18n.getHelperTitle('collections', 'item_thumbnail_label')"> :label="$i18n.getHelperTitle('collections', 'item_thumbnail_label')">
<help-button <help-button
:title="$i18n.getHelperTitle('collections', 'item_thumbnail_label')" :title="$i18n.getHelperTitle('collections', 'item_thumbnail_label')"
:message="$i18n.getHelperMessage('collections', 'item_thumbnail_label')"/> :message="$i18n.getHelperMessage('collections', 'item_thumbnail_label')" />
<b-input <b-input
id="tainacan-text-item-thumbnail-label" id="tainacan-text-item-thumbnail-label"
v-model="form.item_thumbnail_label" /> v-model="form.item_thumbnail_label" />
@ -335,13 +338,13 @@
&nbsp; &nbsp;
<b-switch <b-switch
id="tainacan-checkbox-item-enable-attachments" id="tainacan-checkbox-item-enable-attachments"
size="is-small" v-model="form.item_enable_attachments"
true-value="yes" size="is-small"
false-value="no" true-value="yes"
v-model="form.item_enable_attachments" /> false-value="no" />
<help-button <help-button
:title="$i18n.getHelperTitle('collections', 'item_enable_attachments')" :title="$i18n.getHelperTitle('collections', 'item_enable_attachments')"
:message="$i18n.getHelperMessage('collections', 'item_enable_attachments')"/> :message="$i18n.getHelperMessage('collections', 'item_enable_attachments')" />
</b-field> </b-field>
<!-- Attachments Label -------------------------------- --> <!-- Attachments Label -------------------------------- -->
@ -351,7 +354,7 @@
:label="$i18n.getHelperTitle('collections', 'item_attachment_label')"> :label="$i18n.getHelperTitle('collections', 'item_attachment_label')">
<help-button <help-button
:title="$i18n.getHelperTitle('collections', 'item_attachment_label')" :title="$i18n.getHelperTitle('collections', 'item_attachment_label')"
:message="$i18n.getHelperMessage('collections', 'item_attachment_label')"/> :message="$i18n.getHelperMessage('collections', 'item_attachment_label')" />
<b-input <b-input
id="tainacan-text-item-attachment-label-singular" id="tainacan-text-item-attachment-label-singular"
v-model="form.item_attachment_label" /> v-model="form.item_attachment_label" />
@ -403,13 +406,13 @@
&nbsp; &nbsp;
<b-switch <b-switch
id="tainacan-checkbox-comment-status" id="tainacan-checkbox-comment-status"
size="is-small" v-model="form.allow_comments"
true-value="open" size="is-small"
false-value="closed" true-value="open"
v-model="form.allow_comments" /> false-value="closed" />
<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')" />
</b-field> </b-field>
</div> </div>
@ -417,8 +420,8 @@
<!-- Item submission options ------------------------ --> <!-- Item submission options ------------------------ -->
<div <div
@click="showItemSubmissionOptions = !showItemSubmissionOptions;" class="collection-form-section"
class="collection-form-section"> @click="showItemSubmissionOptions = !showItemSubmissionOptions;">
<span class="icon"> <span class="icon">
<i <i
class="tainacan-icon" class="tainacan-icon"
@ -442,13 +445,13 @@
&nbsp; &nbsp;
<b-switch <b-switch
id="tainacan-checkbox-allow-submission" id="tainacan-checkbox-allow-submission"
size="is-small" v-model="form.allows_submission"
true-value="yes" size="is-small"
false-value="no" true-value="yes"
v-model="form.allows_submission" /> false-value="no" />
<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')" />
</b-field> </b-field>
<transition name="filter-item"> <transition name="filter-item">
@ -465,13 +468,13 @@
&nbsp; &nbsp;
<b-switch <b-switch
id="tainacan-checkbox-allow-submission" id="tainacan-checkbox-allow-submission"
size="is-small" v-model="form.submission_anonymous_user"
true-value="yes" size="is-small"
false-value="no" true-value="yes"
v-model="form.submission_anonymous_user" /> false-value="no" />
<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')" />
</b-field> </b-field>
<!-- Item submission default Status -------------------------------- --> <!-- Item submission default Status -------------------------------- -->
@ -482,25 +485,25 @@
:message="editFormErrors['submission_default_status'] != undefined ? editFormErrors['submission_default_status'] : ''"> :message="editFormErrors['submission_default_status'] != undefined ? editFormErrors['submission_default_status'] : ''">
<help-button <help-button
:title="$i18n.getHelperTitle('collections', 'submission_default_status')" :title="$i18n.getHelperTitle('collections', 'submission_default_status')"
:message="$i18n.getHelperMessage('collections', 'submission_default_status')"/> :message="$i18n.getHelperMessage('collections', 'submission_default_status')" />
<div class="options-checkboxes"> <div class="options-checkboxes">
<b-radio <b-radio
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"
v-model="form.submission_default_status"
:native-value="statusOption.slug"> :native-value="statusOption.slug">
<span class="icon has-text-gray"> <span class="icon has-text-gray">
<i <i
class="tainacan-icon tainacan-icon-18px" class="tainacan-icon tainacan-icon-18px"
:class="$statusHelper.getIcon(statusOption.slug)"/> :class="$statusHelper.getIcon(statusOption.slug)" />
</span> </span>
{{ statusOption.name }} {{ statusOption.name }}
</b-radio> </b-radio>
</div> </div>
<transition name="filter-item"> <transition name="filter-item">
<p <p
class="help" v-if="form.submission_default_status == 'draft'"
v-if="form.submission_default_status == 'draft'"> class="help">
{{ $i18n.get('info_item_submission_draft_status') }} {{ $i18n.get('info_item_submission_draft_status') }}
</p> </p>
</transition> </transition>
@ -515,13 +518,13 @@
&nbsp; &nbsp;
<b-switch <b-switch
id="tainacan-checkbox-submission-use-recaptcha" id="tainacan-checkbox-submission-use-recaptcha"
size="is-small" v-model="form.submission_use_recaptcha"
true-value="yes" size="is-small"
false-value="no" true-value="yes"
v-model="form.submission_use_recaptcha" /> false-value="no" />
<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')" />
<p <p
v-if="form.submission_use_recaptcha == 'yes'" v-if="form.submission_use_recaptcha == 'yes'"
v-html="$i18n.getWithVariables('info_recaptcha_link_%s', [ reCAPTCHASettingsPagePath ])" /> v-html="$i18n.getWithVariables('info_recaptcha_link_%s', [ reCAPTCHASettingsPagePath ])" />
@ -537,10 +540,10 @@
<!-- Hook for extra Form options --> <!-- Hook for extra Form options -->
<template v-if="hasEndLeftForm"> <template v-if="hasEndLeftForm">
<form <form
ref="form-collection-end-left" id="form-collection-end-left"
id="form-collection-end-left" ref="form-collection-end-left"
class="form-hook-region" class="form-hook-region"
v-html="getEndLeftForm"/> v-html="getEndLeftForm" />
</template> </template>
</div> </div>
@ -554,17 +557,17 @@
:message="editFormErrors['status'] != undefined ? editFormErrors['status'] : ''"> :message="editFormErrors['status'] != undefined ? editFormErrors['status'] : ''">
<help-button <help-button
:title="$i18n.getHelperTitle('collections', 'status')" :title="$i18n.getHelperTitle('collections', 'status')"
:message="$i18n.getHelperMessage('collections', 'status')"/> :message="$i18n.getHelperMessage('collections', 'status')" />
<div class="status-radios"> <div class="status-radios">
<b-radio <b-radio
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"
v-model="form.status"
:native-value="statusOption.slug"> :native-value="statusOption.slug">
<span class="icon has-text-gray"> <span class="icon has-text-gray">
<i <i
class="tainacan-icon tainacan-icon-18px" class="tainacan-icon tainacan-icon-18px"
:class="$statusHelper.getIcon(statusOption.slug)"/> :class="$statusHelper.getIcon(statusOption.slug)" />
</span> </span>
{{ statusOption.name }} {{ statusOption.name }}
</b-radio> </b-radio>
@ -574,9 +577,9 @@
<!-- Hook for extra Form options --> <!-- Hook for extra Form options -->
<template v-if="hasBeginRightForm"> <template v-if="hasBeginRightForm">
<form <form
id="form-collection-begin-right" id="form-collection-begin-right"
class="form-hook-region" class="form-hook-region"
v-html="getBeginRightForm"/> v-html="getBeginRightForm" />
</template> </template>
<!-- Image thumbnail & Header Image -------------------------------- --> <!-- Image thumbnail & Header Image -------------------------------- -->
@ -585,7 +588,7 @@
{{ $i18n.get('label_thumbnail') }} & {{ $i18n.get('label_header_image') }} {{ $i18n.get('label_thumbnail') }} & {{ $i18n.get('label_header_image') }}
<help-button <help-button
:title="$i18n.get('label_thumbnail') + ' & ' + $i18n.get('label_header_image')" :title="$i18n.get('label_thumbnail') + ' & ' + $i18n.get('label_header_image')"
:message="$i18n.get('info_collection_thumbnail_and_header')"/> :message="$i18n.get('info_collection_thumbnail_and_header')" />
</label> </label>
<!-- Header Image -------------------------------- --> <!-- Header Image -------------------------------- -->
@ -600,8 +603,8 @@
</figure> </figure>
<div class="header-buttons-row"> <div class="header-buttons-row">
<a <a
class="button is-rounded is-secondary" id="button-edit-header-image"
id="button-edit-header-image" class="button is-rounded is-secondary"
:aria-label="$i18n.get('label_button_edit_header_image')" :aria-label="$i18n.get('label_button_edit_header_image')"
@click="headerImageMediaFrame.openFrame($event)"> @click="headerImageMediaFrame.openFrame($event)">
<span <span
@ -612,12 +615,12 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-edit"/> <i class="tainacan-icon tainacan-icon-edit" />
</span> </span>
</a> </a>
<a <a
class="button is-rounded is-secondary" id="button-delete-header-image"
id="button-delete-header-image" class="button is-rounded is-secondary"
:aria-label="$i18n.get('label_button_delete_thumb')" :aria-label="$i18n.get('label_button_delete_thumb')"
@click="deleteHeaderImage()"> @click="deleteHeaderImage()">
<span <span
@ -628,7 +631,7 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-delete"/> <i class="tainacan-icon tainacan-icon-delete" />
</span> </span>
</a> </a>
</div> </div>
@ -646,8 +649,8 @@
thumbnails: { 'tainacan-medium': [ $thumbHelper.getSrc(collection['thumbnail'], 'tainacan-medium') ] }, thumbnails: { 'tainacan-medium': [ $thumbHelper.getSrc(collection['thumbnail'], 'tainacan-medium') ] },
title: $i18n.get('label_thumbnail'), title: $i18n.get('label_thumbnail'),
description: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + $thumbHelper.getSrc(collection['thumbnail'], 'full') + `'/>` description: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + $thumbHelper.getSrc(collection['thumbnail'], 'full') + `'/>`
}"/> }" />
<figure <figure
v-if="collection.thumbnail == undefined || ((collection.thumbnail.medium == undefined || collection.thumbnail.medium == false) && (collection.thumbnail['tainacan-medium'] == undefined || collection.thumbnail['tainacan-medium'] == false))" v-if="collection.thumbnail == undefined || ((collection.thumbnail.medium == undefined || collection.thumbnail.medium == false) && (collection.thumbnail['tainacan-medium'] == undefined || collection.thumbnail['tainacan-medium'] == false))"
class="image"> class="image">
<span class="image-placeholder">{{ $i18n.get('label_empty_thumbnail') }}</span> <span class="image-placeholder">{{ $i18n.get('label_empty_thumbnail') }}</span>
@ -657,8 +660,8 @@
</figure> </figure>
<div class="thumbnail-buttons-row"> <div class="thumbnail-buttons-row">
<a <a
class="button is-rounded is-secondary" id="button-edit-thumbnail"
id="button-edit-thumbnail" class="button is-rounded is-secondary"
:aria-label="$i18n.get('label_button_edit_thumb')" :aria-label="$i18n.get('label_button_edit_thumb')"
@click.prevent="thumbnailMediaFrame.openFrame($event)"> @click.prevent="thumbnailMediaFrame.openFrame($event)">
<span <span
@ -669,12 +672,12 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-edit"/> <i class="tainacan-icon tainacan-icon-edit" />
</span> </span>
</a> </a>
<a <a
class="button is-rounded is-secondary" id="button-delete-header-image"
id="button-delete-header-image" class="button is-rounded is-secondary"
:aria-label="$i18n.get('label_button_delete_thumb')" :aria-label="$i18n.get('label_button_delete_thumb')"
@click="deleteThumbnail()"> @click="deleteThumbnail()">
<span <span
@ -685,7 +688,7 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-delete"/> <i class="tainacan-icon tainacan-icon-delete" />
</span> </span>
</a> </a>
</div> </div>
@ -701,30 +704,32 @@
&nbsp; &nbsp;
<b-switch <b-switch
id="tainacan-checkbox-cover-page" id="tainacan-checkbox-cover-page"
size="is-small" v-model="form.enable_cover_page"
true-value="yes" size="is-small"
false-value="no" true-value="yes"
v-model="form.enable_cover_page" /> false-value="no" />
<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')" />
<template v-if="form.enable_cover_page == 'yes'"> <template v-if="form.enable_cover_page == 'yes'">
<b-autocomplete <b-autocomplete
v-if="coverPage == undefined || coverPage.title == undefined"
id="tainacan-text-cover-page" id="tainacan-text-cover-page"
v-model="coverPageTitle"
:placeholder="$i18n.get('instruction_cover_page')" :placeholder="$i18n.get('instruction_cover_page')"
:data="coverPages" :data="coverPages"
v-model="coverPageTitle"
@select="onSelectCoverPage($event)"
:loading="isFetchingPages" :loading="isFetchingPages"
@input="fecthCoverPages"
@focus="clearErrors('cover_page_id')"
v-if="coverPage == undefined || coverPage.title == undefined"
check-infinite-scroll check-infinite-scroll
@select="onSelectCoverPage($event)"
@update:model-value="fecthCoverPages"
@focus="clearErrors('cover_page_id')"
@infinite-scroll="fetchMoreCoverPages"> @infinite-scroll="fetchMoreCoverPages">
<template slot-scope="props"> <template #default="props">
{{ props.option.title.rendered }} {{ props.option.title.rendered }}
</template> </template>
<template slot="empty">{{ $i18n.get('info_no_page_found') }}</template> <template #empty>
{{ $i18n.get('info_no_page_found') }}
</template>
</b-autocomplete> </b-autocomplete>
<div <div
@ -743,7 +748,7 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon is-small"> class="icon is-small">
<i class="tainacan-icon tainacan-icon-close"/> <i class="tainacan-icon tainacan-icon-close" />
</span> </span>
</a> </a>
</span> </span>
@ -762,7 +767,7 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon is-small"> class="icon is-small">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-openurl"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-openurl" />
</span> </span>
</a> </a>
&nbsp;&nbsp; &nbsp;&nbsp;
@ -777,7 +782,7 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon is-small"> class="icon is-small">
<i class="tainacan-icon tainacan-icon-edit"/> <i class="tainacan-icon tainacan-icon-edit" />
</span> </span>
</a> </a>
</span> </span>
@ -789,7 +794,7 @@
target="_blank" target="_blank"
:href="newPagePath"> :href="newPagePath">
<span class="icon is-small"> <span class="icon is-small">
<i class="tainacan-icon tainacan-icon-add"/> <i class="tainacan-icon tainacan-icon-add" />
</span> </span>
{{ $i18n.get('label_create_new_page') }} {{ $i18n.get('label_create_new_page') }}
</a> </a>
@ -827,9 +832,9 @@
<!-- Hook for extra Form options --> <!-- Hook for extra Form options -->
<template v-if="hasEndRightForm"> <template v-if="hasEndRightForm">
<form <form
id="form-collection-end-right" id="form-collection-end-right"
class="form-hook-region" class="form-hook-region"
v-html="getEndRightForm"/> v-html="getEndRightForm" />
</template> </template>
</div> </div>
@ -844,28 +849,30 @@
type="button" type="button"
@click="cancelBack">{{ $i18n.get('cancel') }}</button> @click="cancelBack">{{ $i18n.get('cancel') }}</button>
</div> </div>
<p class="help is-danger">{{ formErrorMessage }}</p> <p class="help is-danger">
{{ formErrorMessage }}
</p>
<div <div
style="margin-left: auto;" style="margin-left: auto;"
class="control"> class="control">
<button <button
v-if="isNewCollection && $userCaps.hasCapability('tnc_rep_edit_metadata') && !fromImporter" v-if="isNewCollection && $userCaps.hasCapability('tnc_rep_edit_metadata') && !fromImporter"
id="button-submit-goto-metadata" id="button-submit-goto-metadata"
@click.prevent="onSubmit('metadata')" class="button is-secondary"
class="button is-secondary">{{ $i18n.get('label_save_goto_metadata') }}</button> @click.prevent="onSubmit('metadata')">{{ $i18n.get('label_save_goto_metadata') }}</button>
</div> </div>
<div class="control"> <div class="control">
<button <button
v-if="isNewCollection && $userCaps.hasCapability('tnc_rep_edit_metadata') && !fromImporter" v-if="isNewCollection && $userCaps.hasCapability('tnc_rep_edit_metadata') && !fromImporter"
id="button-submit-goto-filter" id="button-submit-goto-filter"
@click.prevent="onSubmit('filters')" class="button is-secondary"
class="button is-secondary">{{ $i18n.get('label_save_goto_filter') }}</button> @click.prevent="onSubmit('filters')">{{ $i18n.get('label_save_goto_filter') }}</button>
</div> </div>
<div class="control"> <div class="control">
<button <button
id="button-submit-collection-creation" id="button-submit-collection-creation"
@click.prevent="onSubmit('items')" class="button is-success"
class="button is-success">{{ $i18n.get('finish') }}</button> @click.prevent="onSubmit('items')">{{ $i18n.get('finish') }}</button>
</div> </div>
</footer> </footer>
</form> </form>
@ -875,7 +882,7 @@
<div class="content has-text-grey has-text-centered"> <div class="content has-text-grey has-text-centered">
<p> <p>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-30px tainacan-icon-items"/> <i class="tainacan-icon tainacan-icon-30px tainacan-icon-items" />
</span> </span>
</p> </p>
<p>{{ $i18n.get('info_can_not_edit_collection') }}</p> <p>{{ $i18n.get('info_can_not_edit_collection') }}</p>
@ -884,26 +891,27 @@
</div> </div>
<b-loading <b-loading
:active.sync="isLoading" v-model="isLoading"
:can-cancel="false"/> :can-cancel="false" />
</div> </div>
</template> </template>
<script> <script>
import { nextTick } from 'vue';
import { mapGetters, mapActions } from 'vuex'; import { mapGetters, mapActions } from 'vuex';
import wpMediaFrames from '../../js/wp-media-frames'; import wpMediaFrames from '../../js/wp-media-frames';
import FileItem from '../other/file-item.vue'; import FileItem from '../other/file-item.vue';
import { wpAjax, formHooks } from '../../js/mixins'; import { permalinkGetter, formHooks } from '../../js/mixins';
export default { export default {
name: 'CollectionEditionForm', name: 'CollectionEditionForm',
components: { components: {
FileItem FileItem
}, },
mixins: [ wpAjax, formHooks ], mixins: [ permalinkGetter, formHooks ],
data(){ data(){
return { return {
collectionId: Number, collectionId: [String, Number],
collection: null, collection: null,
isLoading: false, isLoading: false,
form: { form: {
@ -1027,7 +1035,7 @@ export default {
} }
}, },
mounted(){ mounted(){
this.$root.$emit('onCollectionBreadCrumbUpdate', [{ path: '', label: this.$i18n.get('settings') }]); this.$emitter.emit('onCollectionBreadCrumbUpdate', [{ path: '', label: this.$i18n.get('settings') }]);
if (this.$route.query.fromImporter != undefined) if (this.$route.query.fromImporter != undefined)
@ -1050,7 +1058,7 @@ export default {
// Initializes Media Frames now that collectonId exists // Initializes Media Frames now that collectonId exists
this.initializeMediaFrames(); this.initializeMediaFrames();
this.$nextTick() nextTick()
.then(() => { .then(() => {
// Fills hook forms with it's real values // Fills hook forms with it's real values
this.updateExtraFormData(this.collection); this.updateExtraFormData(this.collection);
@ -1715,7 +1723,7 @@ export default {
font-size: 0.8em; font-size: 0.8em;
} }
img, img,
/deep/ .image-wrapper { :deep(.image-wrapper) {
height: 146px; height: 146px;
width: 146px; width: 146px;
border: 6px solid var(--tainacan-background-color); border: 6px solid var(--tainacan-background-color);
@ -1794,7 +1802,8 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.5rem; gap: 0.5rem;
justify-content: space-between; justify-content: space-between;
/deep/ .b-checkbox.checkbox { :deep(.b-checkbox.checkbox),
:deep(.b-radio.radio) {
width: auto width: auto
} }
.control-label { .control-label {
@ -1836,13 +1845,13 @@ export default {
position: relative; position: relative;
z-index: 101; z-index: 101;
/deep/ .dropdown-item { :deep(.dropdown-item) {
display: flex !important; display: flex !important;
} }
p { p {
white-space: normal; white-space: normal;
} }
/deep/ svg { :deep(svg) {
margin-left: -2px; margin-left: -2px;
overflow: hidden; overflow: hidden;
vertical-align: middle; vertical-align: middle;

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

@ -4,15 +4,15 @@
:bread-crumb-items="[ :bread-crumb-items="[
{ path: $routerHelper.getAvailableExportersPath(), label: $i18n.get('exporters') }, { path: $routerHelper.getAvailableExportersPath(), label: $i18n.get('exporters') },
{ 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
:active.sync="isLoading" v-model="isLoading"
:can-cancel="false"/> :can-cancel="false" />
<form <form
@click="formErrorMessage = ''"
label-width="120px"
v-if="exporterSession" v-if="exporterSession"
class="tainacan-form"> label-width="120px"
class="tainacan-form"
@click="formErrorMessage = ''">
<div class="columns"> <div class="columns">
<div class="column is-gapless"> <div class="column is-gapless">
@ -22,7 +22,7 @@
</div> </div>
<div <div
style="max-width: var(--tainacan-one-column);" style="max-width: var(--tainacan-one-column);"
class="column is-gapless"/> class="column is-gapless" />
<div class="column is-gapless"> <div class="column is-gapless">
<b-field <b-field
v-if="exporterSession.manual_collection" v-if="exporterSession.manual_collection"
@ -31,41 +31,41 @@
<help-button <help-button
:title="$i18n.get('label_source_collection')" :title="$i18n.get('label_source_collection')"
:message="$i18n.get('info_source_collection_helper')" :message="$i18n.get('info_source_collection_helper')"
extra-classes="tainacan-repository-tooltip"/> extra-classes="tainacan-repository-tooltip" />
<br> <br>
<b-select <b-select
@input="formErrorMessage = null"
expanded
v-model="selectedCollection" v-model="selectedCollection"
expanded
:loading="isFetchingCollections" :loading="isFetchingCollections"
:placeholder="$i18n.get('instruction_select_a_collection')"> :placeholder="$i18n.get('instruction_select_a_collection')"
@update:model-value="formErrorMessage = null">
<option <option
v-for="collection in collections" v-for="collection in collections"
:value="collection.id" :key="collection.id"
:key="collection.id"> :value="collection.id">
{{ collection.name }} {{ collection.name }}
</option> </option>
</b-select> </b-select>
</b-field> </b-field>
<b-field <b-field
class="is-block"
v-if="Object.keys(exporterSession).length && v-if="Object.keys(exporterSession).length &&
Object.keys(exporterSession.mapping_accept).length && Object.keys(exporterSession.mapping_accept).length &&
exporterSession.mapping_list.length" exporterSession.mapping_list.length"
class="is-block"
:label="$i18n.get('mapping')"> :label="$i18n.get('mapping')">
<b-select <b-select
@input="formErrorMessage = null"
expanded
v-model="selectedMapping" v-model="selectedMapping"
:placeholder="$i18n.get('instruction_select_a_mapper')"> expanded
:placeholder="$i18n.get('instruction_select_a_mapper')"
@update:model-value="formErrorMessage = null">
<option <option
v-if="exporterSession.accept_no_mapping" v-if="exporterSession.accept_no_mapping"
:value="''">{{ $i18n.get('label_no_mapping') }}</option> :value="''">{{ $i18n.get('label_no_mapping') }}</option>
<option <option
v-for="(mapping) in exporterSession.mapping_list" v-for="(mapping) in exporterSession.mapping_list"
:value="mapping" :key="mapping"
:key="mapping"> :value="mapping">
{{ mapping.replace(/-/, ' ') }} {{ mapping.replace(/-/, ' ') }}
</option> </option>
</b-select> </b-select>
@ -77,12 +77,12 @@
<help-button <help-button
:title="$i18n.get('label_send_email')" :title="$i18n.get('label_send_email')"
:message="'<span>' + $i18n.get('info_send_email') + `&nbsp;<a href='` + adminFullURL + $routerHelper.getProcessesPage() + `'>` + $i18n.get('activities') + ` ` + $i18n.get('label_page') + '</a></span>'" :message="'<span>' + $i18n.get('info_send_email') + `&nbsp;<a href='` + adminFullURL + $routerHelper.getProcessesPage() + `'>` + $i18n.get('activities') + ` ` + $i18n.get('label_page') + '</a></span>'"
extra-classes="tainacan-repository-tooltip"/> extra-classes="tainacan-repository-tooltip" />
<b-checkbox <b-checkbox
v-model="sendEmail"
true-value="1" true-value="1"
false-value="0" false-value="0"
v-model="sendEmail" @update:model-value="formErrorMessage = null">
@input="formErrorMessage = null">
{{ $i18n.get('label_yes') }} {{ $i18n.get('label_yes') }}
</b-checkbox> </b-checkbox>
</b-field> </b-field>
@ -93,17 +93,17 @@
<div class="column"> <div class="column">
<button <button
@click.prevent="$router.go(-1)" class="button is-pulled-left is-outlined"
class="button is-pulled-left is-outlined"> @click.prevent="$router.go(-1)">
{{ $i18n.get('cancel') }} {{ $i18n.get('cancel') }}
</button> </button>
</div> </div>
<div class="column"> <div class="column">
<button <button
:class="{'is-loading': runButtonLoading}" :class="{'is-loading': runButtonLoading}"
@click.prevent="runExporter()"
:disabled="!formIsValid()" :disabled="!formIsValid()"
class="button is-pulled-right is-success"> class="button is-pulled-right is-success"
@click.prevent="runExporter()">
{{ $i18n.get('run') }} {{ $i18n.get('run') }}
</button> </button>
</div> </div>

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

@ -15,20 +15,20 @@
:class="formErrors['name'] != undefined ? 'is-danger' : ''">*</span> :class="formErrors['name'] != undefined ? 'is-danger' : ''">*</span>
<help-button <help-button
:title="$i18n.getHelperTitle('filters', 'name')" :title="$i18n.getHelperTitle('filters', 'name')"
:message="$i18n.getHelperMessage('filters', 'name')"/> :message="$i18n.getHelperMessage('filters', 'name')" />
</label> </label>
<b-input <b-input
v-model="form.name" v-model="form.name"
name="name" name="name"
@focus="clearErrors('name')"/> @focus="clearErrors('name')" />
</b-field> </b-field>
<!-- Hook for extra Form options --> <!-- Hook for extra Form options -->
<template v-if="hasBeginLeftForm"> <template v-if="hasBeginLeftForm">
<form <form
id="form-filter-begin-left" id="form-filter-begin-left"
class="form-hook-region" class="form-hook-region"
v-html="getBeginLeftForm"/> v-html="getBeginLeftForm" />
</template> </template>
<b-field <b-field
@ -39,13 +39,13 @@
{{ $i18n.get('label_description') }} {{ $i18n.get('label_description') }}
<help-button <help-button
:title="$i18n.getHelperTitle('filters', 'description')" :title="$i18n.getHelperTitle('filters', 'description')"
:message="$i18n.getHelperMessage('filters', 'description')"/> :message="$i18n.getHelperMessage('filters', 'description')" />
</label> </label>
<b-input <b-input
type="textarea"
name="description"
:rows="3"
v-model="form.description" v-model="form.description"
type="textarea"
name="description"
:rows="3"
@focus="clearErrors('description')" /> @focus="clearErrors('description')" />
</b-field> </b-field>
@ -57,29 +57,29 @@
{{ $i18n.get('label_status') }} {{ $i18n.get('label_status') }}
<help-button <help-button
:title="$i18n.getHelperTitle('filters', 'status')" :title="$i18n.getHelperTitle('filters', 'status')"
:message="$i18n.getHelperMessage('filters', 'status')"/> :message="$i18n.getHelperMessage('filters', 'status')" />
</label> </label>
<div class="inline-block"> <div class="inline-block">
<b-radio <b-radio
@focus="clearErrors('label_status')"
id="tainacan-select-status-publish" id="tainacan-select-status-publish"
name="status"
v-model="form.status" v-model="form.status"
native-value="publish"> name="status"
native-value="publish"
@focus="clearErrors('label_status')">
<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" />
</span> </span>
{{ $i18n.get('status_public') }} {{ $i18n.get('status_public') }}
</b-radio> </b-radio>
<br> <br>
<b-radio <b-radio
@focus="clearErrors('label_status')"
id="tainacan-select-status-private" id="tainacan-select-status-private"
name="status"
v-model="form.status" v-model="form.status"
native-value="private"> name="status"
native-value="private"
@focus="clearErrors('label_status')">
<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" />
</span> </span>
{{ $i18n.get('status_private') }} {{ $i18n.get('status_private') }}
</b-radio> </b-radio>
@ -87,25 +87,31 @@
</b-field> </b-field>
<b-field <b-field
:addons="false" v-if="form.filter_type_object && form.filter_type_object.use_max_options"
v-if="form.filter_type_object && form.filter_type_object.use_max_options"> :addons="false">
<label class="label is-inline"> <label class="label is-inline">
{{ $i18n.get('label_max_options_to_show') }} {{ $i18n.get('label_max_options_to_show') }}
<help-button <help-button
:title="$i18n.getHelperTitle('filters', 'max_options')" :title="$i18n.getHelperTitle('filters', 'max_options')"
:message="$i18n.getHelperMessage('filters', 'max_options')"/> :message="$i18n.getHelperMessage('filters', 'max_options')" />
</label> </label>
<div <div
v-if="!showEditMaxOptions" v-if="!showEditMaxOptions"
class="is-flex"> class="is-flex">
<b-select <b-select
name="max_options"
v-model="form.max_options" v-model="form.max_options"
name="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">
<option value="8">8</option> 4
<option value="12">12</option> </option>
<option value="8">
8
</option>
<option value="12">
12
</option>
<option <option
v-if="form.max_options && ![4,8,12].find( (element) => element == form.max_options )" v-if="form.max_options && ![4,8,12].find( (element) => element == form.max_options )"
:value="form.max_options"> :value="form.max_options">
@ -123,7 +129,7 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-edit has-text-secondary"/> <i class="tainacan-icon tainacan-icon-18px tainacan-icon-edit has-text-secondary" />
</span> </span>
</button> </button>
</div> </div>
@ -131,13 +137,13 @@
v-if="showEditMaxOptions" v-if="showEditMaxOptions"
class="is-flex"> class="is-flex">
<b-input <b-input
name="max_options"
v-model="form.max_options" v-model="form.max_options"
name="max_options"
type="number" type="number"
step="1" /> step="1" />
<button <button
@click.prevent="showEditMaxOptions = false" class="button is-white is-pulled-right"
class="button is-white is-pulled-right"> @click.prevent="showEditMaxOptions = false">
<span <span
v-tooltip="{ v-tooltip="{
content: $i18n.get('close'), content: $i18n.get('close'),
@ -146,7 +152,7 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-close has-text-secondary"/> <i class="tainacan-icon tainacan-icon-18px tainacan-icon-close has-text-secondary" />
</span> </span>
</button> </button>
</div> </div>
@ -159,17 +165,17 @@
:message="formErrors['begin_with_filter_collapsed'] != undefined ? formErrors['begin_with_filter_collapsed'] : ''"> :message="formErrors['begin_with_filter_collapsed'] != undefined ? formErrors['begin_with_filter_collapsed'] : ''">
&nbsp; &nbsp;
<b-switch <b-switch
size="is-small"
@input="clearErrors('begin_with_filter_collapsed')"
v-model="form.begin_with_filter_collapsed" v-model="form.begin_with_filter_collapsed"
size="is-small"
: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'"
name="begin_with_filter_collapsed"> name="begin_with_filter_collapsed"
<help-button @update:model-value="clearErrors('begin_with_filter_collapsed')">
:title="$i18n.getHelperTitle('filters', 'begin_with_filter_collapsed')" <help-button
:message="$i18n.getHelperMessage('filters', 'begin_with_filter_collapsed')" :title="$i18n.getHelperTitle('filters', 'begin_with_filter_collapsed')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" /> :message="$i18n.getHelperMessage('filters', 'begin_with_filter_collapsed')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</b-switch> </b-switch>
</b-field> </b-field>
@ -181,36 +187,36 @@
:message="formErrors['display_in_repository_level_lists'] != undefined ? formErrors['display_in_repository_level_lists'] : ''"> :message="formErrors['display_in_repository_level_lists'] != undefined ? formErrors['display_in_repository_level_lists'] : ''">
&nbsp; &nbsp;
<b-switch <b-switch
size="is-small"
@input="clearErrors('display_in_repository_level_lists')"
v-model="form.display_in_repository_level_lists" v-model="form.display_in_repository_level_lists"
size="is-small"
:true-value="'yes'" :true-value="'yes'"
:false-value="'no'" :false-value="'no'"
:native-value="form.display_in_repository_level_lists == 'yes' ? 'yes' : 'no'" :native-value="form.display_in_repository_level_lists == 'yes' ? 'yes' : 'no'"
name="display_in_repository_level_lists"> name="display_in_repository_level_lists"
<help-button @update:model-value="clearErrors('display_in_repository_level_lists')">
:title="$i18n.getHelperTitle('filters', 'display_in_repository_level_lists')" <help-button
:message="$i18n.getHelperMessage('filters', 'display_in_repository_level_lists')" :title="$i18n.getHelperTitle('filters', 'display_in_repository_level_lists')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" /> :message="$i18n.getHelperMessage('filters', 'display_in_repository_level_lists')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</b-switch> </b-switch>
</b-field> </b-field>
<component <component
:errors="formErrors['filter_type_options']"
v-if="(form.filter_type_object && form.filter_type_object.form_component) || form.edit_form == ''"
:is="form.filter_type_object.form_component" :is="form.filter_type_object.form_component"
:filter="form" v-if="(form.filter_type_object && form.filter_type_object.form_component) || form.edit_form == ''"
v-model="form.filter_type_options"/> v-model="form.filter_type_options"
:errors="formErrors['filter_type_options']"
:filter="form" />
<div <div
v-html="form.edit_form" v-else
v-else/> v-html="form.edit_form" />
<!-- Hook for extra Form options --> <!-- Hook for extra Form options -->
<template v-if="hasEndLeftForm"> <template v-if="hasEndLeftForm">
<form <form
id="form-filter-end-left" id="form-filter-end-left"
class="form-hook-region" class="form-hook-region"
v-html="getEndLeftForm"/> v-html="getEndLeftForm" />
</template> </template>
</div> </div>
@ -219,8 +225,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
@ -231,22 +238,41 @@
</b-button> </b-button>
</div> </div>
</div> </div>
<p class="help is-danger">{{ formErrorMessage }}</p> <p class="help is-danger">
{{ formErrorMessage }}
</p>
</form> </form>
</template> </template>
<script> <script>
import { nextTick } from 'vue';
import { mapActions } from 'vuex'; import { mapActions } from 'vuex';
import { formHooks } from "../../js/mixins"; import { formHooks } from "../../js/mixins";
import FormFilterNumeric from '../filter-types/numeric/FormNumeric.vue';
import FormFilterNumericInterval from '../filter-types/numeric-interval/FormNumericInterval.vue';
import FormFilterNumericListInterval from '../filter-types/numeric-list-interval/FormNumericListInterval.vue';
export default { export default {
name: 'FilterEditionForm', name: 'FilterEditionForm',
components: {
'tainacan-filter-form-numeric': FormFilterNumeric,
'tainacan-filter-form-numeric-interval': FormFilterNumericInterval,
'tainacan-filter-form-numeric-list-interval': FormFilterNumericListInterval
},
mixins: [ formHooks ], mixins: [ formHooks ],
props: { props: {
index: '', index: '',
editedFilter: Object, editedFilter: Object,
originalFilter: Object, originalFilter: Object,
}, isRepositoryLevel: Boolean
},
emits: [
'on-update-saved-state',
'on-edition-finished',
'on-edition-canceled',
'on-error-found'
],
data(){ data(){
return { return {
form: {}, form: {},
@ -258,8 +284,7 @@ export default {
entityName: 'filter', entityName: 'filter',
isLoading: false isLoading: false
} }
}, },
created() { created() {
this.form = this.editedFilter; this.form = this.editedFilter;
@ -270,20 +295,20 @@ export default {
}, },
mounted() { mounted() {
// Fills hook forms with it's real values // Fills hook forms with it's real values
this.$nextTick() nextTick()
.then(() => { .then(() => {
this.updateExtraFormData(this.form); this.updateExtraFormData(this.form);
}); });
}, },
beforeDestroy() { beforeUnmount() {
if (this.closedByForm) { if (this.closedByForm) {
this.$emit('onUpdateSavedState', true); this.$emit('on-update-saved-state', true);
} else { } else {
this.oldForm.saved = this.form.saved; this.oldForm.saved = this.form.saved;
if (JSON.stringify(this.form) != JSON.stringify(this.oldForm)) if (JSON.stringify(this.form) != JSON.stringify(this.oldForm))
this.$emit('onUpdateSavedState', false); this.$emit('on-update-saved-state', false);
else else
this.$emit('onUpdateSavedState', true); this.$emit('on-update-saved-state', true);
} }
}, },
methods: { methods: {
@ -310,7 +335,7 @@ export default {
this.formErrorMessage = ''; this.formErrorMessage = '';
this.isLoading = false; this.isLoading = false;
this.closedByForm = true; this.closedByForm = true;
this.$emit('onEditionFinished'); this.$emit('on-edition-finished');
}) })
.catch((errors) => { .catch((errors) => {
this.isLoading = false; this.isLoading = false;
@ -319,7 +344,7 @@ export default {
this.formErrors[attribute] = error[attribute]; this.formErrors[attribute] = error[attribute];
} }
this.formErrorMessage = errors.error_message; this.formErrorMessage = errors.error_message;
this.$emit('onErrorFound'); this.$emit('on-error-found');
this.form.formErrors = this.formErrors; this.form.formErrors = this.formErrors;
this.form.formErrorMessage = this.formErrorMessage; this.form.formErrorMessage = this.formErrorMessage;
@ -349,7 +374,7 @@ export default {
this.formErrorMessage = ''; this.formErrorMessage = '';
this.isLoading = false; this.isLoading = false;
this.closedByForm = true; this.closedByForm = true;
this.$emit('onEditionFinished'); this.$emit('on-edition-finished');
}) })
.catch((errors) => { .catch((errors) => {
this.isLoading = false; this.isLoading = false;
@ -358,7 +383,7 @@ export default {
this.formErrors[attribute] = error[attribute]; this.formErrors[attribute] = error[attribute];
} }
this.formErrorMessage = errors.error_message; this.formErrorMessage = errors.error_message;
this.$emit('onErrorFound'); this.$emit('on-error-found');
this.form.formErrors = this.formErrors; this.form.formErrors = this.formErrors;
this.form.formErrorMessage = this.formErrorMessage; this.form.formErrorMessage = this.formErrorMessage;
@ -370,7 +395,7 @@ export default {
}, },
cancelEdition() { cancelEdition() {
this.closedByForm = true; this.closedByForm = true;
this.$emit('onEditionCanceled'); this.$emit('on-edition-canceled');
}, },
} }
} }

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

@ -5,15 +5,15 @@
:bread-crumb-items="[ :bread-crumb-items="[
{ path: $routerHelper.getAvailableImportersPath(), label: $i18n.get('importers') }, { path: $routerHelper.getAvailableImportersPath(), label: $i18n.get('importers') },
{ path: '', label: importerType != undefined ? (importerName != undefined ? importerName :importerType) : $i18n.get('title_importer_page') } { path: '', label: importerType != undefined ? (importerName != undefined ? importerName :importerType) : $i18n.get('title_importer_page') }
]"/> ]" />
<form <form
@click="formErrorMessage = ''" v-if="importer != undefined && importer != null"
class="tainacan-form" class="tainacan-form"
label-width="120px" label-width="120px"
v-if="importer != undefined && importer != null"> @click="formErrorMessage = ''">
<div <div
v-if="importer.manual_collection || importer.accepts.file || importer.accepts.url" v-if="importer.manual_collection || importer.accepts.file || importer.accepts.url"
class="columns"> class="columns">
<div class="column"> <div class="column">
@ -25,7 +25,7 @@
<help-button <help-button
:title="$i18n.get('label_source_file')" :title="$i18n.get('label_source_file')"
:message="$i18n.get('info_source_file_upload')" :message="$i18n.get('info_source_file_upload')"
extra-classes="tainacan-repository-tooltip"/> extra-classes="tainacan-repository-tooltip" />
<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 == '')"
@ -36,7 +36,7 @@
<div class="content has-text-centered"> <div class="content has-text-centered">
<p> <p>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-upload"/> <i class="tainacan-icon tainacan-icon-36px tainacan-icon-upload" />
</span> </span>
</p> </p>
<p>{{ $i18n.get('instruction_drop_file_or_click_to_upload') }}</p> <p>{{ $i18n.get('instruction_drop_file_or_click_to_upload') }}</p>
@ -44,8 +44,8 @@
</section> </section>
</b-upload> </b-upload>
<div <div
class="control selected-source-file" v-if="importerFile != undefined"
v-if="importerFile != undefined"> class="control selected-source-file">
<span>{{ (importerFile.length != undefined && importerFile.length > 0 ) ? importerFile[0].name : importerFile.name }}</span> <span>{{ (importerFile.length != undefined && importerFile.length > 0 ) ? importerFile[0].name : importerFile.name }}</span>
<a <a
target="_blank" target="_blank"
@ -58,13 +58,13 @@
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-close"/> <i class="tainacan-icon tainacan-icon-18px tainacan-icon-close" />
</span> </span>
</a> </a>
</div> </div>
<div <div
class="control selected-source-file" v-if="importerFile == undefined && importer.tmp_file"
v-if="importerFile == undefined && importer.tmp_file"> class="control selected-source-file">
<p>{{ $i18n.get('label_select_file') + ': ' + importer.tmp_file }}</p> <p>{{ $i18n.get('label_select_file') + ': ' + importer.tmp_file }}</p>
</div> </div>
</b-field> </b-field>
@ -77,10 +77,10 @@
<help-button <help-button
:title="$i18n.get('label_url_source_link')" :title="$i18n.get('label_url_source_link')"
:message="$i18n.get('info_url_source_link_helper')" :message="$i18n.get('info_url_source_link_helper')"
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="url"/> v-model="url" />
</b-field> </b-field>
</div> </div>
@ -103,16 +103,16 @@
<help-button <help-button
:title="$i18n.get('label_target_collection')" :title="$i18n.get('label_target_collection')"
:message="$i18n.get('info_target_collection_helper')" :message="$i18n.get('info_target_collection_helper')"
extra-classes="tainacan-repository-tooltip"/> extra-classes="tainacan-repository-tooltip" />
<br> <br>
<div class="is-inline"> <div class="is-inline">
<b-select <b-select
expanded
id="tainacan-select-target-collection" id="tainacan-select-target-collection"
:value="collectionId" expanded
@input="onSelectCollection($event)" :model-value="collectionId"
:loading="isFetchingCollections" :loading="isFetchingCollections"
:placeholder="$i18n.get('instruction_select_a_target_collection')"> :placeholder="$i18n.get('instruction_select_a_target_collection')"
@update:model-value="onSelectCollection($event)">
<option <option
v-for="collection of collections" v-for="collection of collections"
:key="collection.id" :key="collection.id"
@ -121,12 +121,11 @@
</b-select> </b-select>
<router-link <router-link
v-if="$userCaps.hasCapability('tnc_rep_edit_collections')" v-if="$userCaps.hasCapability('tnc_rep_edit_collections')"
tag="a"
style="font-size: 0.875em;" style="font-size: 0.875em;"
class="add-link" class="add-link"
:to="{ path: $routerHelper.getNewCollectionPath(), query: { fromImporter: true }}"> :to="{ path: $routerHelper.getNewCollectionPath(), query: { fromImporter: true }}">
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-add"/> <i class="tainacan-icon tainacan-icon-add" />
</span> </span>
{{ $i18n.get('new_blank_collection') }} {{ $i18n.get('new_blank_collection') }}
</router-link> </router-link>
@ -141,7 +140,7 @@
<div v-if="importer.options_form != undefined && importer.options_form != null && importer.options_form != ''"> <div v-if="importer.options_form != undefined && importer.options_form != null && importer.options_form != ''">
<!-- Importer custom options --> <!-- Importer custom options -->
<form id="importerOptionsForm"> <form id="importerOptionsForm">
<div v-html="importer.options_form"/> <div v-html="importer.options_form" />
</form> </form>
</div> </div>
@ -159,42 +158,42 @@
v-if="!importer.manual_mapping" v-if="!importer.manual_mapping"
class="control"> class="control">
<button <button
id="button-submit-importer-creation"
:disabled=" :disabled="
(formErrorMessage != undefined && formErrorMessage != '') || (formErrorMessage != undefined && formErrorMessage != '') ||
sessionId == undefined || sessionId == undefined ||
importer == undefined || importer == undefined ||
(importer.manual_collection && collectionId == undefined) || (importer.manual_collection && collectionId == undefined) ||
(importer.accepts.file && !importer.accepts.url && !importerFile) || (importer.accepts.file && !importer.accepts.url && !importerFile) ||
(!importer.accepts.file && importer.accepts.url && !url) || (!importer.accepts.file && importer.accepts.url && !url) ||
(importer.accepts.file && importer.accepts.url && !importerFile && !url)" (importer.accepts.file && importer.accepts.url && !importerFile && !url)"
id="button-submit-importer-creation"
@click.prevent="onFinishImporter()"
:class="{ 'is-loading': isLoadingRun, 'is-success': !isLoadingRun }" :class="{ 'is-loading': isLoadingRun, 'is-success': !isLoadingRun }"
class="button">{{ $i18n.get('run') }}</button> class="button"
@click.prevent="onFinishImporter()">{{ $i18n.get('run') }}</button>
</div> </div>
<div <div
v-if="importer.manual_mapping" v-if="importer.manual_mapping"
class="control"> class="control">
<button <button
id="button-submit-collection-creation"
:disabled=" :disabled="
(formErrorMessage != undefined && formErrorMessage != '') || (formErrorMessage != undefined && formErrorMessage != '') ||
sessionId == undefined || sessionId == undefined ||
importer == undefined || importer == undefined ||
(importer.manual_collection && collectionId == undefined) || (importer.manual_collection && collectionId == undefined) ||
(importer.accepts.file && !importer.accepts.url && !importerFile) || (importer.accepts.file && !importer.accepts.url && !importerFile) ||
(!importer.accepts.file && importer.accepts.url && !url) || (!importer.accepts.file && importer.accepts.url && !url) ||
(importer.accepts.file && importer.accepts.url && !importerFile && !url)" (importer.accepts.file && importer.accepts.url && !importerFile && !url)"
id="button-submit-collection-creation"
@click.prevent="onFinishImporter()"
:class="{ 'is-loading': isLoadingUpload, 'is-success': !isLoadingUpload }" :class="{ 'is-loading': isLoadingUpload, 'is-success': !isLoadingUpload }"
class="button">{{ $i18n.get('next') }}</button> class="button"
@click.prevent="onFinishImporter()">{{ $i18n.get('next') }}</button>
</div> </div>
</div> </div>
</form> </form>
<b-loading <b-loading
:active.sync="isLoading" v-model="isLoading"
:can-cancel="false"/> :can-cancel="false" />
</div> </div>
</template> </template>
@ -462,7 +461,7 @@ export default {
@import "../../scss/_variables.scss"; @import "../../scss/_variables.scss";
/deep/ .columns { :deep(.columns) {
padding-left: var(--tainacan-one-column); padding-left: var(--tainacan-one-column);
padding-right: var(--tainacan-one-column); padding-right: var(--tainacan-one-column);
} }

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

@ -1,52 +1,48 @@
<template> <template>
<div <div
class="repository-level-page page-container"> class="repository-level-page page-container">
<div class="tainacan-page-title"> <div class="tainacan-page-title">
<h1>{{ $i18n.get('label_metadata_mapping') }} </h1> <h1>{{ $i18n.get('label_metadata_mapping') }} </h1>
<a <a
@click="$router.go(-1)" class="back-link has-text-secondary"
class="back-link has-text-secondary"> @click="$router.go(-1)">
{{ $i18n.get('back') }} {{ $i18n.get('back') }}
</a> </a>
<hr> <hr>
<nav class="breadcrumbs"> <nav class="breadcrumbs">
<router-link <router-link
tag="a"
:to="$routerHelper.getCollectionsPath()">{{ $i18n.get('repository') }}</router-link> > :to="$routerHelper.getCollectionsPath()">{{ $i18n.get('repository') }}</router-link> >
<router-link <router-link
tag="a"
:to="$routerHelper.getAvailableImportersPath()">{{ $i18n.get('importers') }}</router-link> > :to="$routerHelper.getAvailableImportersPath()">{{ $i18n.get('importers') }}</router-link> >
<router-link <router-link
tag="a"
:to="$routerHelper.getImporterPath(importerType, sessionId)">{{ importerType != undefined ? (importerName != undefined ? importerName :importerType) : $i18n.get('title_importer_page') }}</router-link> > :to="$routerHelper.getImporterPath(importerType, sessionId)">{{ importerType != undefined ? (importerName != undefined ? importerName :importerType) : $i18n.get('title_importer_page') }}</router-link> >
<router-link <router-link
tag="a"
:to="$routerHelper.getImporterMappingPath(importerType, sessionId, collectionId)">{{ $i18n.get('label_metadata_mapping') }}</router-link> :to="$routerHelper.getImporterMappingPath(importerType, sessionId, collectionId)">{{ $i18n.get('label_metadata_mapping') }}</router-link>
</nav> </nav>
</div> </div>
<b-loading <b-loading
:active.sync="isLoading" v-model="isLoading"
:can-cancel="false"/> :can-cancel="false" />
<form <form
class="tainacan-form" v-if="importer != undefined && importer != null"
label-width="120px" class="tainacan-form"
v-if="importer != undefined && importer != null"> label-width="120px">
<p>{{ $i18n.get('info_metadata_mapping_helper') }}</p> <p>{{ $i18n.get('info_metadata_mapping_helper') }}</p>
<br> <br>
<b-loading <b-loading
:is-full-page="false" v-model="isLoadingSourceInfo"
:active.sync="isLoadingSourceInfo" :is-full-page="false"
:can-cancel="false"/> :can-cancel="false" />
<!-- Metadata Mapping --> <!-- Metadata Mapping -->
<div <div
v-if="importerSourceInfo != undefined && v-if="importerSourceInfo != undefined &&
importerSourceInfo != null && importerSourceInfo != null &&
!isLoading"> !isLoading">
<div class="mapping-control"> <div class="mapping-control">
<a <a
v-if="importerSourceInfo.source_metadata && importerSourceInfo.source_metadata.length > 0" v-if="importerSourceInfo.source_metadata && importerSourceInfo.source_metadata.length > 0"
@ -54,7 +50,7 @@
class="is-inline is-pulled-right add-link has-text-secondary" class="is-inline is-pulled-right add-link has-text-secondary"
@click="createAllMetadata()"> @click="createAllMetadata()">
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-approvedcircle"/> <i class="tainacan-icon tainacan-icon-approvedcircle" />
</span> </span>
{{ $i18n.get('label_set_all_create_metadata') }} {{ $i18n.get('label_set_all_create_metadata') }}
</a> </a>
@ -64,14 +60,14 @@
class="is-inline is-pulled-right add-link has-text-secondary" class="is-inline is-pulled-right add-link has-text-secondary"
@click="createNewMetadatum()"> @click="createNewMetadatum()">
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-add"/> <i class="tainacan-icon tainacan-icon-add" />
</span> </span>
{{ $i18n.get('label_add_more_metadata') }} {{ $i18n.get('label_add_more_metadata') }}
</a> </a>
</div> </div>
<div <div
class="mapping-header" v-if="importerSourceInfo.source_metadata.length > 0 || (importerSourceInfo.source_special_fields && importerSourceInfo.source_special_fields.length > 0)"
v-if="importerSourceInfo.source_metadata.length > 0 || (importerSourceInfo.source_special_fields && importerSourceInfo.source_special_fields.length > 0)"> class="mapping-header">
<p>{{ $i18n.get('label_from_source_collection') }}</p> <p>{{ $i18n.get('label_from_source_collection') }}</p>
<hr> <hr>
<span class="icon"> <span class="icon">
@ -82,19 +78,19 @@
</div> </div>
<div <div
class="source-metadatum"
:class="{ 'has-children': typeof sourceMetadatum == 'object' && Object.entries(sourceMetadatum)[0] }"
v-for="(sourceMetadatum, index) of importerSourceInfo.source_metadata" v-for="(sourceMetadatum, index) of importerSourceInfo.source_metadata"
:key="index"> :key="index"
class="source-metadatum"
:class="{ 'has-children': typeof sourceMetadatum == 'object' && Object.entries(sourceMetadatum)[0] }">
<template v-if="typeof sourceMetadatum == 'string'"> <template v-if="typeof sourceMetadatum == 'string'">
<p>{{ sourceMetadatum }}</p> <p>{{ sourceMetadatum }}</p>
<b-select <b-select
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)" :placeholder="$i18n.get('label_select_metadatum')"
:placeholder="$i18n.get('label_select_metadatum')"> @update:model-value="onSelectCollectionMetadata($event, sourceMetadatum)">
<option :value="null"> <option :value="null">
{{ $i18n.get('label_select_metadatum') }} {{ $i18n.get('label_select_metadatum') }}
</option> </option>
@ -104,9 +100,9 @@
{{ $i18n.get('label_create_metadatum') }} {{ $i18n.get('label_create_metadatum') }}
</option> </option>
<option <option
v-if="collection && collection.current_user_can_edit_metadata" v-if="collection && collection.current_user_can_edit_metadata"
:value="'create_repository_metadata' + index"> :value="'create_repository_metadata' + index">
{{ $i18n.get('label_create_repository_metadata') }} {{ $i18n.get('label_create_repository_metadata') }}
</option> </option>
<option <option
v-for="(collectionMetadatum, metadatumIndex) of collectionNonChildMetadata" v-for="(collectionMetadatum, metadatumIndex) of collectionNonChildMetadata"
@ -128,9 +124,9 @@
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])" :placeholder="$i18n.get('label_select_metadatum')"
:placeholder="$i18n.get('label_select_metadatum')"> @update:model-value="onSelectCollectionMetadata($event, Object.entries(sourceMetadatum)[0][0], true, Object.entries(sourceMetadatum)[0][1])">
<option :value="null"> <option :value="null">
{{ $i18n.get('label_select_metadatum') }} {{ $i18n.get('label_select_metadatum') }}
</option> </option>
@ -156,18 +152,18 @@
:class="{ 'disabled-child-source-metadatum': [undefined, null, false, 'create_metadata' + index].includes(checkCurrentSelectedCollectionMetadatum(Object.entries(sourceMetadatum)[0][0], true)) }" :class="{ 'disabled-child-source-metadatum': [undefined, null, false, 'create_metadata' + index].includes(checkCurrentSelectedCollectionMetadatum(Object.entries(sourceMetadatum)[0][0], true)) }"
class="child-source-metadatum"> class="child-source-metadatum">
<div <div
class="source-metadatum"
v-for="(childSourceMetadatum, childIndex) of Object.entries(sourceMetadatum)[0][1]" v-for="(childSourceMetadatum, childIndex) of Object.entries(sourceMetadatum)[0][1]"
:key="childIndex"> :key="childIndex"
class="source-metadatum">
<p>{{ childSourceMetadatum }}</p> <p>{{ childSourceMetadatum }}</p>
<b-select <b-select
v-if="collectionMetadata != undefined && v-if="collectionMetadata != undefined &&
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])" :placeholder="$i18n.get('label_select_metadatum')"
:placeholder="$i18n.get('label_select_metadatum')"> @update:model-value="onSelectCollectionChildMetadata($event, childSourceMetadatum, checkCurrentSelectedCollectionMetadatum(Object.entries(sourceMetadatum)[0][0], true), Object.entries(sourceMetadatum)[0][0])">
<option :value="null"> <option :value="null">
{{ $i18n.get('label_select_metadatum') }} {{ $i18n.get('label_select_metadatum') }}
</option> </option>
@ -187,38 +183,46 @@
</div> </div>
</div> </div>
</template> </template>
<p v-if="collectionMetadata == undefined || collectionMetadata.length <= 0">{{ $i18n.get('info_select_collection_to_list_metadata') }}</p> <p v-if="collectionMetadata == undefined || collectionMetadata.length <= 0">
{{ $i18n.get('info_select_collection_to_list_metadata') }}
</p>
</div> </div>
<template v-if="importerSourceInfo.source_special_fields"> <template v-if="importerSourceInfo.source_special_fields">
<div <div
v-for="(specialField, specialFieldIndex) of importerSourceInfo.source_special_fields" v-for="(specialField, specialFieldIndex) of importerSourceInfo.source_special_fields"
:key="specialFieldIndex" :key="specialFieldIndex"
class="source-metadatum"> class="source-metadatum">
<p style="font-style: italic">{{ specialField }}</p> <p style="font-style: italic">
{{ specialField }}
</p>
<p>{{ $i18n.get('info_special_fields_mapped_default') }}</p> <p>{{ $i18n.get('info_special_fields_mapped_default') }}</p>
</div> </div>
</template> </template>
<p v-if="importerSourceInfo.source_metadata.length <= 0">{{ $i18n.get('info_no_metadata_source_file') }}<br></p> <p v-if="importerSourceInfo.source_metadata.length <= 0">
{{ $i18n.get('info_no_metadata_source_file') }}<br>
</p>
<p v-if="(!importerSourceInfo.source_special_fields || importerSourceInfo.source_special_fields.length <= 0)">{{ $i18n.get('info_no_special_fields_available') }}<br></p> <p v-if="(!importerSourceInfo.source_special_fields || importerSourceInfo.source_special_fields.length <= 0)">
{{ $i18n.get('info_no_special_fields_available') }}<br>
</p>
<b-modal <b-modal
@close="onMetadatumEditionCanceled()" v-model="isNewMetadatumModalActive"
:active.sync="isNewMetadatumModalActive"
trap-focus trap-focus
aria-modal aria-modal
aria-role="dialog" aria-role="dialog"
:close-button-aria-label="$i18n.get('close')" :close-button-aria-label="$i18n.get('close')"
custom-class="tainacan-modal"> custom-class="tainacan-modal"
@close="onMetadatumEditionCanceled()">
<div <div
v-if="selectedMetadatumType == undefined && !isEditingMetadatum"
autofocus="true" autofocus="true"
tabindex="-1" tabindex="-1"
role="dialog" role="dialog"
aria-modal aria-modal>
v-if="selectedMetadatumType == undefined && !isEditingMetadatum">
<b-loading <b-loading
:is-full-page="isFullPage" v-model="isLoadingMetadatumTypes"
:active.sync="isLoadingMetadatumTypes"/> :is-full-page="false" />
<div <div
class="tainacan-modal-content"> class="tainacan-modal-content">
@ -229,9 +233,9 @@
<section class="tainacan-form"> <section class="tainacan-form">
<div class="metadata-types-container"> <div class="metadata-types-container">
<div <div
class="metadata-type"
v-for="(metadatumType, index) of metadatumTypes" v-for="(metadatumType, index) of metadatumTypes"
:key="index" :key="index"
class="metadata-type"
@click="onSelectMetadatumType(metadatumType)"> @click="onSelectMetadatumType(metadatumType)">
<h4>{{ metadatumType.name }}</h4> <h4>{{ metadatumType.name }}</h4>
</div> </div>
@ -254,11 +258,11 @@
v-if="selectedMetadatumType && isEditingMetadatum" v-if="selectedMetadatumType && isEditingMetadatum"
:collection-id="collectionId" :collection-id="collectionId"
:is-repository-level="false" :is-repository-level="false"
@onEditionFinished="onMetadatumEditionFinished()"
@onEditionCanceled="onMetadatumEditionCanceled()"
:index="0" :index="0"
:original-metadatum="metadatum" :original-metadatum="metadatum"
:is-inside-importer-flow="true" /> :is-inside-importer-flow="true"
@on-edition-finished="onMetadatumEditionFinished()"
@on-edition-canceled="onMetadatumEditionCanceled()" />
</b-modal> </b-modal>
</div> </div>
<div <div
@ -276,14 +280,16 @@
type="button" type="button"
@click="cancelBack">{{ $i18n.get('cancel') }}</button> @click="cancelBack">{{ $i18n.get('cancel') }}</button>
</div> </div>
<p class="help is-danger">{{ formErrorMessage }}</p> <p class="help is-danger">
{{ formErrorMessage }}
</p>
<div class="control"> <div class="control">
<button <button
:disabled="sessionId == undefined || importer == undefined"
id="button-submit-importer-mapping" id="button-submit-importer-mapping"
@click.prevent="onRunImporter" :disabled="sessionId == undefined || importer == undefined"
:class="{ 'is-loading': isLoadingRun, 'is-success': !isLoadingRun }" :class="{ 'is-loading': isLoadingRun, 'is-success': !isLoadingRun }"
class="button">{{ $i18n.get('run') }}</button> class="button"
@click.prevent="onRunImporter">{{ $i18n.get('run') }}</button>
</div> </div>
</div> </div>
</form> </form>
@ -291,7 +297,7 @@
<!-- Prompt to show title --> <!-- Prompt to show title -->
<b-modal <b-modal
v-if="importerSourceInfo" v-if="importerSourceInfo"
:active.sync="showTitlePromptModal" v-model="showTitlePromptModal"
:can-cancel="false" :can-cancel="false"
:width="820" :width="820"
scroll="keep" scroll="keep"
@ -309,11 +315,13 @@
</div> </div>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<p style="margin: 12px 0px 24px 0px">{{ $i18n.get('info_title_mapping') }}</p> <p style="margin: 12px 0px 24px 0px">
{{ $i18n.get('info_title_mapping') }}
</p>
<b-field> <b-field>
<b-select <b-select
expanded
v-model="selectedTitle" v-model="selectedTitle"
expanded
: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"
@ -363,8 +371,8 @@
<button <button
type="submit" type="submit"
class="button is-success" class="button is-success"
@click="onConfirmTitleSelection" :disabled="selectedTitle === '' || selectedTitle == undefined"
:disabled="selectedTitle === '' || selectedTitle == undefined"> @click="onConfirmTitleSelection">
{{ $i18n.get('apply') }} {{ $i18n.get('apply') }}
</button> </button>
</div> </div>
@ -441,7 +449,7 @@ export default {
this.collection = collection; this.collection = collection;
}); });
}, },
beforeDestroy() { beforeUnmount() {
// Cancels previous Request // Cancels previous Request
if (this.metadataSearchCancel != undefined) if (this.metadataSearchCancel != undefined)
this.metadataSearchCancel.cancel('Metadata search Canceled.'); this.metadataSearchCancel.cancel('Metadata search Canceled.');

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

@ -6,7 +6,7 @@
class="section-label"> class="section-label">
<label> <label>
<span class="icon has-text-gray4"> <span class="icon has-text-gray4">
<i class="tainacan-icon tainacan-icon-attachments"/> <i class="tainacan-icon tainacan-icon-attachments" />
</span> </span>
{{ collection && collection.item_attachment_label ? collection.item_attachment_label : $i18n.get('label_attachments') }}&nbsp; {{ collection && collection.item_attachment_label ? collection.item_attachment_label : $i18n.get('label_attachments') }}&nbsp;
<span <span
@ -18,15 +18,15 @@
</label> </label>
<help-button <help-button
:title="collection && collection.item_attachment_label ? collection.item_attachment_label : $i18n.get('label_attachments')" :title="collection && collection.item_attachment_label ? collection.item_attachment_label : $i18n.get('label_attachments')"
:message="$i18n.get('info_edit_attachments')"/> :message="$i18n.get('info_edit_attachments')" />
<button <button
style="float: right; font-size: 0.875em; margin: 2px 5px;" style="float: right; font-size: 0.875em; margin: 2px 5px;"
type="button" type="button"
class="link-style" class="link-style"
@click.prevent="($event) => $emit('openAttachmentsMediaFrame', $event)" :disabled="isLoading"
:disabled="isLoading"> @click.prevent="($event) => $emit('open-attachments-media-frame', $event)">
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-edit"/> <i class="tainacan-icon tainacan-icon-edit" />
</span> </span>
{{ $i18n.get('label_add_or_update') }} {{ $i18n.get('label_add_or_update') }}
</button> </button>
@ -41,7 +41,7 @@
:collection="collection" :collection="collection"
:is-editable="true" :is-editable="true"
:should-load-attachments="shouldLoadAttachments" :should-load-attachments="shouldLoadAttachments"
@onDeleteAttachment="($event) => $emit('onDeleteAttachment', $event)"/> @on-delete-attachment="($event) => $emit('on-delete-attachment', $event)" />
</div> </div>
</div> </div>
</template> </template>
@ -60,7 +60,11 @@ export default {
totalAttachments: Number, totalAttachments: Number,
isLoading: Boolean, isLoading: Boolean,
shouldLoadAttachments: Boolean shouldLoadAttachments: Boolean
} },
emits: [
'open-attachments-media-frame',
'on-delete-attachment'
]
} }
</script> </script>

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

@ -1,16 +1,16 @@
<template> <template>
<div> <div>
<b-loading <b-loading
v-model="isLoading"
:is-full-page="false" :is-full-page="false"
:active.sync="isLoading" :can-cancel="false" />
:can-cancel="false"/>
<div <div
v-if="!$adminOptions.hideBulkEditionPageTitle" v-if="!$adminOptions.hideBulkEditionPageTitle"
class="tainacan-page-title"> class="tainacan-page-title">
<h1>{{ $i18n.get('add_items_bulk') }}</h1> <h1>{{ $i18n.get('add_items_bulk') }}</h1>
<a <a
@click="$router.go(-1)" class="back-link has-text-secondary"
class="back-link has-text-secondary"> @click="$router.go(-1)">
{{ $i18n.get('back') }} {{ $i18n.get('back') }}
</a> </a>
<hr> <hr>
@ -25,18 +25,18 @@
<label class="label">{{ $i18n.get('label_documents_upload') }}</label> <label class="label">{{ $i18n.get('label_documents_upload') }}</label>
<br> <br>
<b-upload <b-upload
native
v-model="submitedFileList" v-model="submitedFileList"
native
drag-drop drag-drop
multiple multiple
@input="uploadFiles()" class="source-file-upload"
class="source-file-upload"> @update:model-value="uploadFiles()">
<section class="drop-inner"> <section class="drop-inner">
<div class="content has-text-centered"> <div class="content has-text-centered">
<p> <p>
<b-icon <span class="icon">
icon="upload" <i class="tainacan-icon tainacan-icon-30px tainacan-icon-upload" />
size="is-large"/> </span>
</p> </p>
<p>{{ $i18n.get('instruction_drop_file_or_click_to_upload') }}</p> <p>{{ $i18n.get('instruction_drop_file_or_click_to_upload') }}</p>
</div> </div>
@ -50,13 +50,13 @@
<div class="sequence-progress-info"> <div class="sequence-progress-info">
<p v-if="uploadedItems.length > 0 && uploadedItems.length != amountFinished"> <p v-if="uploadedItems.length > 0 && uploadedItems.length != amountFinished">
<span class="icon is-small has-text-secondary"> <span class="icon is-small has-text-secondary">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-updating"/> <i class="tainacan-icon tainacan-icon-18px tainacan-icon-updating" />
</span> </span>
{{ $i18n.get('label_upload_file_prepare_items') }} {{ $i18n.get('label_upload_file_prepare_items') }}
</p> </p>
<p v-if="uploadedItems.length > 0 && uploadedItems.length == amountFinished"> <p v-if="uploadedItems.length > 0 && uploadedItems.length == amountFinished">
<span class="icon is-small has-text-success"> <span class="icon is-small has-text-success">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-approvedcircle"/> <i class="tainacan-icon tainacan-icon-18px tainacan-icon-approvedcircle" />
</span> </span>
{{ $i18n.get('label_process_completed') }} {{ $i18n.get('label_process_completed') }}
</p> </p>
@ -76,25 +76,25 @@
<div <div
v-if="uploadedItems.length > 0" v-if="uploadedItems.length > 0"
:style="{ width: (amountFinished/uploadedItems.length)*100 + '%' }" :style="{ width: (amountFinished/uploadedItems.length)*100 + '%' }"
class="sequence-progress"/> class="sequence-progress" />
<div <div
v-if="uploadedItems.length > 0" v-if="uploadedItems.length > 0"
class="sequence-progress-background"/> class="sequence-progress-background" />
<!-- Uploaded Items --> <!-- Uploaded Items -->
<transition-group name="item-appear"> <transition-group name="item-appear">
<div <div
class="document-item"
v-for="(item, index) of uploadedItems" v-for="(item, index) of uploadedItems"
:key="item.id"> :key="item.id"
class="document-item">
<img <img
v-if="item.document != undefined && item.document != '' && item.document_type != 'empty'" v-if="item.document != undefined && item.document != '' && item.document_type != 'empty'"
class="document-thumb" class="document-thumb"
:alt="$i18n.get('label_thumbnail') + ': ' + item.title" :alt="$i18n.get('label_thumbnail') + ': ' + item.title"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_mimetype)" > :src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_mimetype)">
<span <span
class="document-name" class="document-name"
v-html="item.title" /> v-html="item.title" />
<span <span
v-if="item.errorMessage != undefined" v-if="item.errorMessage != undefined"
class="help is-danger"> class="help is-danger">
@ -108,7 +108,6 @@
</span> </span>
<span <span
v-if="item.document != '' && item.document_type != 'empty'" v-if="item.document != '' && item.document_type != 'empty'"
class="icon has-text-success"
v-tooltip="{ v-tooltip="{
delay: { delay: {
shown: 500, shown: 500,
@ -118,7 +117,8 @@
autoHide: false, autoHide: false,
placement: 'auto-start', placement: 'auto-start',
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}"> }"
class="icon has-text-success">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-approvedcircle" /> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-approvedcircle" />
</span> </span>
</div> </div>
@ -138,7 +138,7 @@
}" }"
class="icon has-text-secondary action-icon" class="icon has-text-secondary action-icon"
@click="deleteOneItem(item.id, index)"> @click="deleteOneItem(item.id, index)">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-delete"/> <i class="tainacan-icon tainacan-icon-18px tainacan-icon-delete" />
</span> </span>
</div> </div>
</div> </div>
@ -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;"
@ -160,15 +161,17 @@
:disabled="!(uploadedItems.length > 0 && uploadedItems.length == amountFinished)" :disabled="!(uploadedItems.length > 0 && uploadedItems.length == amountFinished)"
class="button is-secondary" class="button is-secondary"
:class="{'is-loading': isCreatingSequenceEditGroup }" :class="{'is-loading': isCreatingSequenceEditGroup }"
@click.prevent="sequenceEditGroup()" type="submit"
type="submit">{{ $i18n.get('label_sequence_edit_items') }}</button> @click.prevent="sequenceEditGroup()">
{{ $i18n.get('label_sequence_edit_items') }}
</button>
</div> </div>
<div class="control"> <div class="control">
<button <button
:disabled="!(uploadedItems.length > 0 && uploadedItems.length == amountFinished)" :disabled="!(uploadedItems.length > 0 && uploadedItems.length == amountFinished)"
class="button is-secondary" class="button is-secondary"
@click.prevent="openBulkEditionModal()" type="submit"
type="submit">{{ $i18n.get('label_bulk_edit_items') }}</button> @click.prevent="openBulkEditionModal()">{{ $i18n.get('label_bulk_edit_items') }}</button>
</div> </div>
</div> </div>
</footer> </footer>
@ -178,7 +181,7 @@
<div class="content has-text-grey has-text-centered"> <div class="content has-text-grey has-text-centered">
<p> <p>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-30px tainacan-icon-collection"/> <i class="tainacan-icon tainacan-icon-30px tainacan-icon-collection" />
</span> </span>
</p> </p>
<p>{{ $i18n.get('info_can_not_bulk_edit_items_collection') }}</p> <p>{{ $i18n.get('info_can_not_bulk_edit_items_collection') }}</p>
@ -220,7 +223,7 @@ export default {
this.cleanFiles(); this.cleanFiles();
// Updates Collection BreadCrumb // Updates Collection BreadCrumb
this.$root.$emit('onCollectionBreadCrumbUpdate', [ this.$emitter.emit('onCollectionBreadCrumbUpdate', [
{ path: this.$routerHelper.getCollectionPath(this.collectionId), label: this.$i18n.get('items') }, { path: this.$routerHelper.getCollectionPath(this.collectionId), label: this.$i18n.get('items') },
{ path: '', label: this.$i18n.get('add_items_bulk') } { path: '', label: this.$i18n.get('add_items_bulk') }
]); ]);
@ -257,7 +260,7 @@ export default {
let index = this.uploadedItems.findIndex(existingItem => existingItem.id === item.id); let index = this.uploadedItems.findIndex(existingItem => existingItem.id === item.id);
if ( index >= 0) if ( index >= 0)
this.$set( this.uploadedItems, index, item ); Object.assign(this.uploadedItems, { [index]: item });
else else
this.uploadedItems.push( item ); this.uploadedItems.push( item );
@ -276,7 +279,7 @@ export default {
let index = this.uploadedItems.findIndex(existingItem => existingItem.id === item.id); let index = this.uploadedItems.findIndex(existingItem => existingItem.id === item.id);
if ( index >= 0) if ( index >= 0)
this.$set( this.uploadedItems, index, item); Object.assign(this.uploadedItems, { [index]: item });
else else
this.uploadedItems.unshift( item ); this.uploadedItems.unshift( item );
}) })

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

@ -3,29 +3,29 @@
<div class="section-label"> <div class="section-label">
<label> <label>
<span class="icon has-text-gray4"> <span class="icon has-text-gray4">
<i :class="'tainacan-icon tainacan-icon-' + ( (!form.document_type || form.document_type == 'empty' ) ? 'item' : (form.document_type == 'attachment' ? 'attachments' : form.document_type))"/> <i :class="'tainacan-icon tainacan-icon-' + ( (!form.document_type || form.document_type == 'empty' ) ? 'item' : (form.document_type == 'attachment' ? 'attachments' : form.document_type))" />
</span> </span>
{{ collection && collection.item_document_label ? collection.item_document_label : ( (form.document != undefined && form.document != null && form.document != '') ? $i18n.get('label_document') : $i18n.get('label_document_empty') ) }} {{ collection && collection.item_document_label ? collection.item_document_label : ( (form.document != undefined && form.document != null && form.document != '') ? $i18n.get('label_document') : $i18n.get('label_document_empty') ) }}
</label> </label>
<help-button <help-button
:title="collection && collection.item_document_label ? collection.item_document_label : $i18n.getHelperTitle('items', 'document')" :title="collection && collection.item_document_label ? collection.item_document_label : $i18n.getHelperTitle('items', 'document')"
:message="$i18n.getHelperMessage('items', 'document')"/> :message="$i18n.getHelperMessage('items', 'document')" />
</div> </div>
<div class="section-box document-field"> <div class="section-box document-field">
<div <div
v-if="form.document != undefined && form.document != null && v-if="form.document != undefined && form.document != null &&
form.document_type != undefined && form.document_type != null && form.document_type != undefined && form.document_type != null &&
form.document != '' && form.document_type != 'empty'" form.document != '' && form.document_type != 'empty'"
class="document-field-content" class="document-field-content"
:class="'document-field-content--' + form.document_type"> :class="'document-field-content--' + form.document_type">
<div v-html="item.document_as_html" /> <div v-html="item.document_as_html" />
<div class="document-buttons-row"> <div class="document-buttons-row">
<a <a
id="button-edit-document"
class="button is-rounded is-secondary" class="button is-rounded is-secondary"
size="is-small" size="is-small"
id="button-edit-document"
:aria-label="$i18n.get('label_button_edit_document')" :aria-label="$i18n.get('label_button_edit_document')"
@click.prevent="($event) => $emit('onSetDocument', $event, form.document_type)"> @click.prevent="($event) => $emit('on-set-document', $event, form.document_type)">
<span <span
v-tooltip="{ v-tooltip="{
content: $i18n.get('edit'), content: $i18n.get('edit'),
@ -34,15 +34,15 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-edit"/> <i class="tainacan-icon tainacan-icon-edit" />
</span> </span>
</a> </a>
<a <a
id="button-delete-document"
class="button is-rounded is-secondary" class="button is-rounded is-secondary"
size="is-small" size="is-small"
id="button-delete-document"
:aria-label="$i18n.get('label_button_delete_document')" :aria-label="$i18n.get('label_button_delete_document')"
@click.prevent="$emit('onRemoveDocument')"> @click.prevent="$emit('on-remove-document')">
<span <span
v-tooltip="{ v-tooltip="{
content: $i18n.get('delete'), content: $i18n.get('delete'),
@ -51,7 +51,7 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-delete"/> <i class="tainacan-icon tainacan-icon-delete" />
</span> </span>
</a> </a>
</div> </div>
@ -62,9 +62,9 @@
<li v-if="!$adminOptions.hideItemEditionDocumentFileInput && (collection && collection.item_enabled_document_types && collection.item_enabled_document_types['attachment'] && collection.item_enabled_document_types['attachment']['enabled'] === 'yes')"> <li v-if="!$adminOptions.hideItemEditionDocumentFileInput && (collection && collection.item_enabled_document_types && collection.item_enabled_document_types['attachment'] && collection.item_enabled_document_types['attachment']['enabled'] === 'yes')">
<button <button
type="button" type="button"
@click.prevent="($event) => $emit('onSetFileDocument', $event)"> @click.prevent="($event) => $emit('on-set-file-document', $event)">
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-upload"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-upload" />
</span> </span>
</button> </button>
<p>{{ $i18n.get('label_file') }}</p> <p>{{ $i18n.get('label_file') }}</p>
@ -72,9 +72,9 @@
<li v-if="!$adminOptions.hideItemEditionDocumentTextInput && (collection && collection.item_enabled_document_types && collection.item_enabled_document_types['text'] && collection.item_enabled_document_types['text']['enabled'] === 'yes')"> <li v-if="!$adminOptions.hideItemEditionDocumentTextInput && (collection && collection.item_enabled_document_types && collection.item_enabled_document_types['text'] && collection.item_enabled_document_types['text']['enabled'] === 'yes')">
<button <button
type="button" type="button"
@click.prevent="$emit('onSetTextDocument')"> @click.prevent="$emit('on-set-text-document')">
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-text"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-text" />
</span> </span>
</button> </button>
<p>{{ $i18n.get('label_text') }}</p> <p>{{ $i18n.get('label_text') }}</p>
@ -82,9 +82,9 @@
<li v-if="!$adminOptions.hideItemEditionDocumentUrlInput && (collection && collection.item_enabled_document_types && collection.item_enabled_document_types['url'] && collection.item_enabled_document_types['url']['enabled'] === 'yes')"> <li v-if="!$adminOptions.hideItemEditionDocumentUrlInput && (collection && collection.item_enabled_document_types && collection.item_enabled_document_types['url'] && collection.item_enabled_document_types['url']['enabled'] === 'yes')">
<button <button
type="button" type="button"
@click.prevent="$emit('onSetURLDocument')"> @click.prevent="$emit('on-set-url-document')">
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-url"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-url" />
</span> </span>
</button> </button>
<p>{{ $i18n.get('label_url') }}</p> <p>{{ $i18n.get('label_url') }}</p>
@ -100,7 +100,14 @@ export default {
item: Object, item: Object,
form: Object, form: Object,
collection: Object collection: Object
} },
emits: [
'on-set-file-document',
'on-set-text-document',
'on-set-url-document',
'on-set-document',
'on-remove-document'
]
} }
</script> </script>
@ -114,48 +121,46 @@ export default {
&.document-field-content--text { &.document-field-content--text {
padding-bottom: 2rem; padding-bottom: 2rem;
/deep/ article { :deep(article) {
max-height: calc(32vh - 2rem); max-height: calc(32vh - 2rem);
overflow-y: auto; overflow-y: auto;
} }
} }
/deep/ img, :deep(img),
/deep/ video, :deep(video),
/deep/ figure { :deep(figure) {
max-width: 100%; max-width: 100%;
max-height: 32vh; max-height: 32vh;
width: auto !important; width: auto !important;
margin: 0; margin: 0;
} }
/deep/ a { :deep(a){
min-height: 60px; min-height: 60px;
display: block; display: block;
} }
/deep/ audio, :deep(audio),
/deep/ iframe, :deep(iframe),
/deep/ blockquote { :deep(blockquote) {
max-width: 100%; max-width: 100%;
max-height: 32vh; max-height: 32vh;
width: 100%; width: 100%;
margin: 0; margin: 0;
min-height: 150px; min-height: 150px;
} }
/deep/ audio { :deep(audio) {
min-height: 80px; min-height: 80px;
} }
@media screen and (max-height: 760px) { @media screen and (max-height: 760px) {
max-height: 25vh; max-height: 25vh;
/deep/ img, :deep(img),
/deep/ video, :deep(video),
/deep/ figure { :deep(figure),
max-height: 25vh; :deep(audio),
} :deep(iframe),
/deep/ audio, :deep(blockquote) {
/deep/ iframe,
/deep/ blockquote {
max-height: 25vh; max-height: 25vh;
} }
} }

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

@ -1,14 +1,14 @@
<template> <template>
<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
v-model="isLoading"
:is-full-page="false" :is-full-page="false"
:active.sync="isLoading" :can-cancel="false" />
:can-cancel="false"/>
<tainacan-title <tainacan-title
v-if="!$adminOptions.hideItemEditionPageTitle || ($adminOptions.hideItemEditionPageTitle && isEditingItemMetadataInsideIframe)" v-if="!$adminOptions.hideItemEditionPageTitle || ($adminOptions.hideItemEditionPageTitle && isEditingItemMetadataInsideIframe)"
:bread-crumb-items="[{ path: '', label: $i18n.get('item') }]"> :bread-crumb-items="[{ path: '', label: $i18n.get('item') }]">
<h1 v-if="isCreatingNewItem"> <h1 v-if="isCreatingNewItem">
<span <span
v-if="(item != null && item != undefined && item.status != undefined && !isLoading)" v-if="(item != null && item != undefined && item.status != undefined && !isLoading)"
class="status-tag" class="status-tag"
@ -37,7 +37,7 @@
<i <i
class="tainacan-icon tainacan-icon-1em" class="tainacan-icon tainacan-icon-1em"
:class="$statusHelper.getIcon(item.status)" :class="$statusHelper.getIcon(item.status)"
/> />
<help-button <help-button
:title="$i18n.get('status_' + item.status)" :title="$i18n.get('status_' + item.status)"
:message="$i18n.get('info_item_' + item.status) + ' ' + $i18n.get('instruction_edit_item_status')" /> :message="$i18n.get('info_item_' + item.status) + ' ' + $i18n.get('instruction_edit_item_status')" />
@ -60,8 +60,8 @@
width="24"> width="24">
<path <path
d="M0 0h24v24H0z" d="M0 0h24v24H0z"
fill="none"/> fill="none" />
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/> <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
</svg> </svg>
</i> </i>
</span> </span>
@ -80,12 +80,12 @@
</h1> </h1>
</transition> </transition>
<button <button
v-if="!formErrors.length || isUpdatingValues" v-if="!errors.length || isUpdatingValues"
@click="isMobileSubheaderOpen = !isMobileSubheaderOpen"> @click="isMobileSubheaderOpen = !isMobileSubheaderOpen">
<span <span
v-if="isUpdatingValues" v-if="isUpdatingValues"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-updating tainacan-icon-spin"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-updating tainacan-icon-spin" />
</span> </span>
<span <span
v-else v-else
@ -98,22 +98,22 @@
width="24"> width="24">
<path <path
d="M0 0h24v24H0z" d="M0 0h24v24H0z"
fill="none"/> fill="none" />
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
</svg> </svg>
</i> </i>
</span> </span>
</button> </button>
<item-metadatum-errors-tooltip <item-metadatum-errors-tooltip
v-else v-else
:form-errors="formErrors" /> :form-errors="errors" />
</div> </div>
<transition name="item-appear"> <transition name="item-appear">
<div <div
v-if="isMobileSubheaderOpen" v-if="isMobileSubheaderOpen"
@click="isMobileSubheaderOpen = false;" class="tainacan-mobile-app-header_panel-backdrop"
class="tainacan-mobile-app-header_panel-backdrop" /> @click="isMobileSubheaderOpen = false;" />
</transition> </transition>
<transition name="panel-from-top"> <transition name="panel-from-top">
<div <div
@ -127,7 +127,7 @@
{{ $i18n.get('title_edit_item') + ' ' }} {{ $i18n.get('title_edit_item') + ' ' }}
<span style="font-weight: 600;">{{ (item != null && item != undefined) ? item.title : '' }}</span> <span style="font-weight: 600;">{{ (item != null && item != undefined) ? item.title : '' }}</span>
</h1> </h1>
<span v-if="!formErrors.length">{{ ($i18n.get('info_updated_at') + ' ' + lastUpdated) }}</span> <span v-if="!errors.length">{{ ($i18n.get('info_updated_at') + ' ' + lastUpdated) }}</span>
<span <span
v-else v-else
class="help is-danger"> class="help is-danger">
@ -178,14 +178,14 @@
class="column main-column" class="column main-column"
:class=" :class="
(( (shouldDisplayItemEditionDocument || shouldDisplayItemEditionThumbnail) && !$adminOptions.itemEditionDocumentInsideTabs) || (( (shouldDisplayItemEditionDocument || shouldDisplayItemEditionThumbnail) && !$adminOptions.itemEditionDocumentInsideTabs) ||
(shouldDisplayItemEditionAttachments && !$adminOptions.itemEditionAttachmentsInsideTabs)) ? 'is-7' : 'is-12'"> (shouldDisplayItemEditionAttachments && !$adminOptions.itemEditionAttachmentsInsideTabs)) ? 'is-7' : 'is-12'">
<!-- Hook for extra Form options --> <!-- Hook for extra Form options -->
<template v-if="hasBeginRightForm"> <template v-if="hasBeginRightForm">
<form <form
id="form-item-begin-right" id="form-item-begin-right"
class="form-hook-region" class="form-hook-region"
v-html="getBeginRightForm"/> v-html="getBeginRightForm" />
</template> </template>
<div class="b-tabs"> <div class="b-tabs">
@ -196,11 +196,11 @@
<ul class="swiper-wrapper"> <ul class="swiper-wrapper">
<li <li
v-for="(tab, tabIndex) of tabs" v-for="(tab, tabIndex) of tabs"
:id="tab.slug + '-tab-label'"
:key="tabIndex" :key="tabIndex"
:class="{ 'is-active': activeTab === tab.slug }" :class="{ 'is-active': activeTab === tab.slug }"
@click="activeTab = tab.slug"
class="swiper-slide" class="swiper-slide"
:id="tab.slug + '-tab-label'"> @click="activeTab = tab.slug">
<a> <a>
<span class="icon has-text-gray4"> <span class="icon has-text-gray4">
<i :class="'tainacan-icon tainacan-icon-18px tainacan-icon-' + tab.icon" /> <i :class="'tainacan-icon tainacan-icon-18px tainacan-icon-' + tab.icon" />
@ -215,31 +215,29 @@
</li> </li>
</ul> </ul>
<button <button
class="swiper-button-prev"
id="tainacan-tabs-prev" id="tainacan-tabs-prev"
slot="button-prev"> class="swiper-button-prev">
<svg <svg
width="24" width="24"
height="24" height="24"
viewBox="0 0 32 32"> viewBox="0 0 32 32">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/> <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
<path <path
d="M0 0h24v24H0z" d="M0 0h24v24H0z"
fill="none"/> fill="none" />
</svg> </svg>
</button> </button>
<button <button
class="swiper-button-next" id="tainacan-tabs-next"
id="tainacan-tabs-next" class="swiper-button-next">
slot="button-next">
<svg <svg
width="24" width="24"
height="24" height="24"
viewBox="0 0 24 24"> viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/> <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
<path <path
d="M0 0h24v24H0z" d="M0 0h24v24H0z"
fill="none"/> fill="none" />
</svg> </svg>
</button> </button>
</nav> </nav>
@ -276,7 +274,7 @@
<span class="icon"> <span class="icon">
<i <i
:class="{ 'tainacan-icon-arrowdown' : collapseAll, 'tainacan-icon-arrowright' : !collapseAll }" :class="{ 'tainacan-icon-arrowdown' : collapseAll, 'tainacan-icon-arrowright' : !collapseAll }"
class="tainacan-icon tainacan-icon-1-25em"/> class="tainacan-icon tainacan-icon-1-25em" />
</span> </span>
<template v-if="isMobileScreen">{{ collapseAll ? $i18n.get('label_collapse') : $i18n.get('label_expand') }}</template> <template v-if="isMobileScreen">{{ collapseAll ? $i18n.get('label_collapse') : $i18n.get('label_expand') }}</template>
<template v-else>{{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}</template> <template v-else>{{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}</template>
@ -288,9 +286,9 @@
:style="$adminOptions.hideItemEditionCollapses ? 'padding-left: 0.35em !important;' : ''"> :style="$adminOptions.hideItemEditionCollapses ? 'padding-left: 0.35em !important;' : ''">
<b-button <b-button
v-if="!$adminOptions.hideItemEditionFocusMode && (collection && collection.item_enable_metadata_focus_mode === 'yes') && !isMetadataNavigation && !showOnlyRequiredMetadata && !metadataNameFilterString" v-if="!$adminOptions.hideItemEditionFocusMode && (collection && collection.item_enable_metadata_focus_mode === 'yes') && !isMetadataNavigation && !showOnlyRequiredMetadata && !metadataNameFilterString"
@click="isMetadataNavigation = true; setMetadatumFocus({ index: 0, scrollIntoView: true });"
class="collapse-all has-text-secondary" class="collapse-all has-text-secondary"
size="is-small"> size="is-small"
@click="isMetadataNavigation = true; setMetadatumFocus({ index: 0, scrollIntoView: true });">
<span <span
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-play" /> <i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-play" />
@ -300,8 +298,8 @@
<b-button <b-button
v-if="isMetadataNavigation" v-if="isMetadataNavigation"
:disabled="focusedMetadatum === 0" :disabled="focusedMetadatum === 0"
@click="focusPreviousMetadatum" outlined
outlined> @click="focusPreviousMetadatum">
<span <span
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-showmore tainacan-icon-rotate-180" /> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-showmore tainacan-icon-rotate-180" />
@ -311,8 +309,8 @@
<b-button <b-button
v-if="isMetadataNavigation" v-if="isMetadataNavigation"
:disabled="(focusedMetadatum === itemMetadata.length - 1) && (!isCurrentlyFocusedOnCompoundMetadatum || isOnLastMetadatumOfCompoundNavigation)" :disabled="(focusedMetadatum === itemMetadata.length - 1) && (!isCurrentlyFocusedOnCompoundMetadatum || isOnLastMetadatumOfCompoundNavigation)"
@click="focusNextMetadatum" outlined
outlined> @click="focusNextMetadatum">
<span <span
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-showmore" /> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-showmore" />
@ -321,8 +319,8 @@
</b-button> </b-button>
<b-button <b-button
v-if="isMetadataNavigation" v-if="isMetadataNavigation"
@click="setMetadatumFocus({ index: 0, scrollIntoView: true }); isMetadataNavigation = false;" outlined
outlined> @click="setMetadatumFocus({ index: 0, scrollIntoView: true }); isMetadataNavigation = false;">
<span <span
class="icon has-success-color"> class="icon has-success-color">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-finish" /> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-finish" />
@ -335,16 +333,16 @@
v-if="isUpdatingValues && isMetadataNavigation && !$adminOptions.mobileAppMode" v-if="isUpdatingValues && isMetadataNavigation && !$adminOptions.mobileAppMode"
class="update-warning"> class="update-warning">
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-updating"/> <i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-updating" />
</span> </span>
</span> </span>
<b-switch <b-switch
v-if="!isMetadataNavigation && !$adminOptions.hideItemEditionRequiredOnlySwitch && (collection && collection.item_enable_metadata_required_filter === 'yes')" v-if="!isMetadataNavigation && !$adminOptions.hideItemEditionRequiredOnlySwitch && (collection && collection.item_enable_metadata_required_filter === 'yes')"
id="tainacan-switch-required-metadata" id="tainacan-switch-required-metadata"
v-model="showOnlyRequiredMetadata"
: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="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>
@ -353,17 +351,17 @@
class="header-item metadata-name-search"> class="header-item metadata-name-search">
<b-input <b-input
v-if="!isMobileScreen || openMetadataNameFilter" v-if="!isMobileScreen || openMetadataNameFilter"
:placeholder="$i18n.get('instruction_type_search_metadata_filter')"
v-model="metadataNameFilterString" v-model="metadataNameFilterString"
:placeholder="$i18n.get('instruction_type_search_metadata_filter')"
icon="magnify" icon="magnify"
size="is-small" size="is-small"
icon-right="close-circle" icon-right="close-circle"
icon-right-clickable icon-right-clickable
@icon-right-click="openMetadataNameFilterClose" /> @icon-right-click="openMetadataNameFilterClose" />
<span <span
@click="openMetadataNameFilter = true" v-else
v-else class="icon is-small metadata-name-search-icon"
class="icon is-small metadata-name-search-icon"> @click="openMetadataNameFilter = true">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-search" /> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-search" />
</span> </span>
</b-field> </b-field>
@ -371,15 +369,15 @@
<div <div
v-for="(metadataSection, sectionIndex) of metadataSections" v-for="(metadataSection, sectionIndex) of metadataSections"
:key="sectionIndex"
:class="'metadata-section-slug-' + metadataSection.slug + (isSectionHidden(metadataSection.id) ? ' metadata-section-hidden' : '')"
:id="'metadata-section-id-' + metadataSection.id" :id="'metadata-section-id-' + metadataSection.id"
:key="sectionIndex"
v-tooltip="{ v-tooltip="{
content: isSectionHidden(metadataSection.id) ? $i18n.get('info_metadata_section_hidden_conditional') : false, content: isSectionHidden(metadataSection.id) ? $i18n.get('info_metadata_section_hidden_conditional') : false,
autoHide: true, autoHide: true,
placement: 'auto', placement: 'auto',
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}"> }"
:class="'metadata-section-slug-' + metadataSection.slug + (isSectionHidden(metadataSection.id) ? ' metadata-section-hidden' : '')">
<div class="metadata-section-header section-label"> <div class="metadata-section-header section-label">
<span <span
class="collapse-handle" class="collapse-handle"
@ -389,14 +387,14 @@
class="icon"> class="icon">
<i <i
:class="{ :class="{
'tainacan-icon-arrowdown' : (metadataSectionCollapses[sectionIndex] || errorMessage) && !isSectionHidden(metadataSection.id), 'tainacan-icon-arrowdown' : (metadataSectionCollapses[sectionIndex] || formErrorMessage) && !isSectionHidden(metadataSection.id),
'tainacan-icon-arrowright' : !(metadataSectionCollapses[sectionIndex] || errorMessage) || isSectionHidden(metadataSection.id) 'tainacan-icon-arrowright' : !(metadataSectionCollapses[sectionIndex] || formErrorMessage) || isSectionHidden(metadataSection.id)
}" }"
class="has-text-secondary tainacan-icon tainacan-icon-1-25em"/> class="has-text-secondary tainacan-icon tainacan-icon-1-25em" />
</span> </span>
<label> <label>
<span class="icon has-text-gray4"> <span class="icon has-text-gray4">
<i class="tainacan-icon tainacan-icon-metadata"/> <i class="tainacan-icon tainacan-icon-metadata" />
</span> </span>
<span <span
v-if="metadataSections.length > 1 && collection.item_enable_metadata_enumeration === 'yes'" v-if="metadataSections.length > 1 && collection.item_enable_metadata_enumeration === 'yes'"
@ -420,22 +418,23 @@
</div> </div>
<transition name="filter-item"> <transition name="filter-item">
<div <div
class="metadata-section-metadata-list" v-show="(metadataSectionCollapses[sectionIndex] || isMetadataNavigation) && !isSectionHidden(metadataSection.id)"
v-show="(metadataSectionCollapses[sectionIndex] || isMetadataNavigation) && !isSectionHidden(metadataSection.id)"> class="metadata-section-metadata-list">
<p <p
class="metadatum-description-help-info" v-if="metadataSection.description && metadataSection.description_bellow_name == 'yes'"
v-if="metadataSection.description && metadataSection.description_bellow_name == 'yes'"> class="metadatum-description-help-info">
{{ metadataSection.description }} {{ metadataSection.description }}
</p> </p>
<template v-for="(itemMetadatum, index) of itemMetadata"> <template
v-for="(itemMetadatum, index) of itemMetadata"
:key="index">
<tainacan-form-item <tainacan-form-item
v-if="itemMetadatum.metadatum.metadata_section_id == metadataSection.id" v-if="itemMetadatum.metadatum.metadata_section_id == metadataSection.id"
:key="index" v-show="(!showOnlyRequiredMetadata || itemMetadatum.metadatum.required === 'yes') && (metadataNameFilterString == '' || filterByMetadatumName(itemMetadatum))"
:id="'metadatum-index--' + index" :id="'metadatum-index--' + index"
v-show="(!showOnlyRequiredMetadata || itemMetadatum.metadatum.required === 'yes') && (metadataNameFilterString == '' || filterByMetadatumName(itemMetadatum))"
:class="{ 'is-metadata-navigation-active': isMetadataNavigation }"
:ref="'tainacan-form-item--' + index" :ref="'tainacan-form-item--' + index"
:class="{ 'is-metadata-navigation-active': isMetadataNavigation }"
:item-metadatum="itemMetadatum" :item-metadatum="itemMetadatum"
:metadata-name-filter-string="metadataNameFilterString" :metadata-name-filter-string="metadataNameFilterString"
:is-collapsed="metadataCollapses[index]" :is-collapsed="metadataCollapses[index]"
@ -448,10 +447,11 @@
:is-last-metadatum="index > 2 && (index == itemMetadata.length - 1)" :is-last-metadatum="index > 2 && (index == itemMetadata.length - 1)"
:is-focused="focusedMetadatum === index" :is-focused="focusedMetadatum === index"
:is-metadata-navigation="isMetadataNavigation" :is-metadata-navigation="isMetadataNavigation"
@changeCollapse="onChangeCollapse($event, index)" @input="updateItemMetadataValue"
@touchstart.native="isMetadataNavigation ? setMetadatumFocus({ index: index, scrollIntoView: false }): ''" @change-collapse="onChangeCollapse($event, index)"
@mousedown.native="isMetadataNavigation ? setMetadatumFocus({ index: index, scrollIntoView: false }) : ''" @touchstart="isMetadataNavigation ? setMetadatumFocus({ index: index, scrollIntoView: false }): ''"
@mobileSpecialFocus="setMetadatumFocus({ index: index, scrollIntoView: true })" /> @mousedown="isMetadataNavigation ? setMetadatumFocus({ index: index, scrollIntoView: false }) : ''"
@mobile-special-focus="setMetadatumFocus({ index: index, scrollIntoView: true })" />
</template> </template>
</div> </div>
</transition> </transition>
@ -463,9 +463,9 @@
formHooks['item'] != undefined && formHooks['item'] != undefined &&
formHooks['item']['end-right'] != undefined"> formHooks['item']['end-right'] != undefined">
<form <form
id="form-item-end-right" id="form-item-end-right"
class="form-hook-region" class="form-hook-region"
v-html="formHooks['item']['end-right'].join('')"/> v-html="formHooks['item']['end-right'].join('')" />
</template> </template>
</div> </div>
@ -484,11 +484,11 @@
</div> </div>
<related-items-list <related-items-list
v-model:is-loading="isLoading"
:item-id="itemId" :item-id="itemId"
:collection-id="collectionId" :collection-id="collectionId"
:related-items="item.related_items" :related-items="item.related_items"
:is-editable="!$adminOptions.itemEditionMode" :is-editable="!$adminOptions.itemEditionMode" />
:is-loading.sync="isLoading" />
</div> </div>
@ -503,19 +503,19 @@
:item="item" :item="item"
:form="form" :form="form"
:collection="collection" :collection="collection"
@onSetDocument="setDocument" @on-set-document="setDocument"
@onRemoveDocument="removeDocument" @on-remove-document="removeDocument"
@onSetFileDocument="setFileDocument" @on-set-file-document="setFileDocument"
@onSetTextDocument="setTextDocument" @on-set-text-document="setTextDocument"
@onSetURLDocument="setURLDocument" /> @on-set-url-document="setURLDocument" />
<item-thumbnail-edition-form <item-thumbnail-edition-form
:item="item" :item="item"
:form="form" :form="form"
:collection="collection" :collection="collection"
:is-loading="isLoading" :is-loading="isLoading"
@onDeleteThumbnail="deleteThumbnail" @on-delete-thumbnail="deleteThumbnail"
@onUpdateThumbnailAlt="($event) => onUpdateThumbnailAlt($event)" @on-update-thumbnail-alt="($event) => onUpdateThumbnailAlt($event)"
@openThumbnailMediaFrame="thumbnailMediaFrame.openFrame($event)" /> @open-thumbnail-media-frame="thumbnailMediaFrame.openFrame($event)" />
</div> </div>
<!-- Attachments on mobile modal --> <!-- Attachments on mobile modal -->
@ -532,8 +532,8 @@
:is-loading="isLoading" :is-loading="isLoading"
:total-attachments="totalAttachments" :total-attachments="totalAttachments"
:should-load-attachments="shouldLoadAttachments" :should-load-attachments="shouldLoadAttachments"
@openAttachmentsMediaFrame="($event) => attachmentsMediaFrame.openFrame($event)" @open-attachments-media-frame="($event) => attachmentsMediaFrame.openFrame($event)"
@onDeleteAttachment="deleteAttachment($event)" /> @on-delete-attachment="deleteAttachment($event)" />
</div> </div>
</section> </section>
@ -555,7 +555,7 @@
<form <form
id="form-item-begin-left" id="form-item-begin-left"
class="form-hook-region" class="form-hook-region"
v-html="getBeginLeftForm"/> v-html="getBeginLeftForm" />
</template> </template>
<!-- Document -------------------------------- --> <!-- Document -------------------------------- -->
@ -564,11 +564,11 @@
:item="item" :item="item"
:form="form" :form="form"
:collection="collection" :collection="collection"
@onSetDocument="setDocument" @on-set-document="setDocument"
@onRemoveDocument="removeDocument" @on-remove-document="removeDocument"
@onSetFileDocument="setFileDocument" @on-set-file-document="setFileDocument"
@onSetTextDocument="setTextDocument" @on-set-text-document="setTextDocument"
@onSetURLDocument="setURLDocument" /> @on-set-url-document="setURLDocument" />
<hr v-if="shouldDisplayItemEditionDocument && shouldDisplayItemEditionThumbnail"> <hr v-if="shouldDisplayItemEditionDocument && shouldDisplayItemEditionThumbnail">
@ -579,9 +579,9 @@
:form="form" :form="form"
:collection="collection" :collection="collection"
:is-loading="isLoading" :is-loading="isLoading"
@onDeleteThumbnail="deleteThumbnail" @on-delete-thumbnail="deleteThumbnail"
@onUpdateThumbnailAlt="($event) => onUpdateThumbnailAlt($event)" @on-update-thumbnail-alt="($event) => onUpdateThumbnailAlt($event)"
@openThumbnailMediaFrame="thumbnailMediaFrame.openFrame($event)" /> @open-thumbnail-media-frame="thumbnailMediaFrame.openFrame($event)" />
<hr v-if="(shouldDisplayItemEditionAttachments && !$adminOptions.itemEditionAttachmentsInsideTabs) || hasEndLeftForm"> <hr v-if="(shouldDisplayItemEditionAttachments && !$adminOptions.itemEditionAttachmentsInsideTabs) || hasEndLeftForm">
@ -594,17 +594,17 @@
:is-loading="isLoading" :is-loading="isLoading"
:total-attachments="totalAttachments" :total-attachments="totalAttachments"
:should-load-attachments="shouldLoadAttachments" :should-load-attachments="shouldLoadAttachments"
@openAttachmentsMediaFrame="($event) => attachmentsMediaFrame.openFrame($event)" @open-attachments-media-frame="($event) => attachmentsMediaFrame.openFrame($event)"
@onDeleteAttachment="deleteAttachment($event)" /> @on-delete-attachment="deleteAttachment($event)" />
<hr v-if="hasEndLeftForm"> <hr v-if="hasEndLeftForm">
<!-- Hook for extra Form options --> <!-- Hook for extra Form options -->
<template v-if="hasEndLeftForm"> <template v-if="hasEndLeftForm">
<form <form
id="form-item-end-left" id="form-item-end-left"
class="form-hook-region" class="form-hook-region"
v-html="getEndLeftForm"/> v-html="getEndLeftForm" />
</template> </template>
</div> </div>
@ -615,13 +615,19 @@
</form> </form>
</transition>
<transition
mode="out-in"
:name="(isOnSequenceEdit && sequenceRightDirection != undefined) ? (sequenceRightDirection ? 'page-right' : 'page-left') : ''">
<!-- In case user enters this page whithout having permission --> <!-- In case user enters this page whithout having permission -->
<template v-if="!isLoading && ((isCreatingNewItem && collection && collection.current_user_can_edit_items == false) || (!isCreatingNewItem && item && item.current_user_can_edit != undefined && collection && collection.current_user_can_edit_items == false))"> <template v-if="!isLoading && ((isCreatingNewItem && collection && collection.current_user_can_edit_items == false) || (!isCreatingNewItem && item && item.current_user_can_edit != undefined && collection && collection.current_user_can_edit_items == false))">
<section class="section"> <section class="section">
<div class="content has-text-grey has-text-centered"> <div class="content has-text-grey has-text-centered">
<p> <p>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-30px tainacan-icon-items"/> <i class="tainacan-icon tainacan-icon-30px tainacan-icon-items" />
</span> </span>
</p> </p>
<p>{{ $i18n.get('info_can_not_edit_item') }}</p> <p>{{ $i18n.get('info_can_not_edit_item') }}</p>
@ -638,19 +644,19 @@
<!-- Sequence Progress --> <!-- Sequence Progress -->
<div <div
v-if="isOnSequenceEdit" v-if="isOnSequenceEdit"
class="sequence-progress-background"/> class="sequence-progress-background" />
<div <div
v-if="isOnSequenceEdit && itemPosition != undefined && group != null && group.items_count != undefined" v-if="isOnSequenceEdit && itemPosition != undefined && group != null && group.items_count != undefined"
:style="{ width: (itemPosition/group.items_count)*100 + '%' }" :style="{ width: (itemPosition/group.items_count)*100 + '%' }"
class="sequence-progress"/> class="sequence-progress" />
<!-- Last Updated Info --> <!-- Last Updated Info -->
<div <div
v-if="!$adminOptions.mobileAppMode" v-if="!$adminOptions.mobileAppMode"
class="update-info-section"> class="update-info-section">
<p <p
class="footer-message" v-if="isOnSequenceEdit"
v-if="isOnSequenceEdit"> class="footer-message">
{{ $i18n.get('label_sequence_editing_item') + " " + itemPosition + " " + $i18n.get('info_of') + " " + ((group != null && group.items_count != undefined) ? group.items_count : '') + "." }}&nbsp; {{ $i18n.get('label_sequence_editing_item') + " " + itemPosition + " " + $i18n.get('info_of') + " " + ((group != null && group.items_count != undefined) ? group.items_count : '') + "." }}&nbsp;
</p> </p>
<p class="footer-message"> <p class="footer-message">
@ -658,7 +664,7 @@
v-if="isUpdatingValues" v-if="isUpdatingValues"
class="update-warning"> class="update-warning">
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-updating"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-updating" />
</span> </span>
<span>{{ $i18n.get('info_updating_metadata_values') }}</span> <span>{{ $i18n.get('info_updating_metadata_values') }}</span>
</span> </span>
@ -669,37 +675,37 @@
{{ $i18n.get('info_autodraft_updated') }} {{ $i18n.get('info_autodraft_updated') }}
</span> </span>
<span v-else> <span v-else>
{{ ($i18n.get('info_updated_at') + ' ' + lastUpdated) }} {{ ($i18n.get('info_updated_at') + ' ' + lastUpdated) }}
</span> </span>
</template> </template>
<span class="help is-danger"> <span class="help is-danger">
{{ formErrorMessage }} {{ formErrorMessage }}
<item-metadatum-errors-tooltip <item-metadatum-errors-tooltip
v-if="formErrors.length" v-if="errors.length"
:form-errors="formErrors" /> :form-errors="errors" />
</span> </span>
</p> </p>
<!-- Comment Status ------------------------ --> <!-- Comment Status ------------------------ -->
<div <div
v-if="collection && collection.allow_comments && collection.allow_comments == 'open' && !$adminOptions.hideItemEditionCommentsToggle"
style="margin-left: 2em;" style="margin-left: 2em;"
class="section-status" class="section-status">
v-if="collection && collection.allow_comments && collection.allow_comments == 'open' && !$adminOptions.hideItemEditionCommentsToggle">
<div class="field has-addons"> <div class="field has-addons">
<b-switch <b-switch
id="tainacan-checkbox-comment-status" id="tainacan-checkbox-comment-status"
v-model="form.comment_status"
size="is-small" size="is-small"
true-value="open" true-value="open"
false-value="closed" false-value="closed">
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>
{{ $i18n.get('label_allow_comments') }} {{ $i18n.get('label_allow_comments') }}
<help-button <help-button
:title="$i18n.getHelperTitle('items', 'comment_status')" :title="$i18n.getHelperTitle('items', 'comment_status')"
:message="$i18n.getHelperMessage('items', 'comment_status')"/> :message="$i18n.getHelperMessage('items', 'comment_status')" />
</b-switch> </b-switch>
</div> </div>
</div> </div>
@ -717,21 +723,22 @@
:current-user-can-delete="item && item.current_user_can_delete" :current-user-can-delete="item && item.current_user_can_delete"
:current-user-can-publish="collection && collection.current_user_can_publish_items" :current-user-can-publish="collection && collection.current_user_can_publish_items"
:is-editing-item-metadata-inside-iframe="isEditingItemMetadataInsideIframe" :is-editing-item-metadata-inside-iframe="isEditingItemMetadataInsideIframe"
@onSubmit="onSubmit" @on-submit="onSubmit"
@onDiscard="onDiscard" @on-discard="onDiscard"
@onPrevInSequence="onPrevInSequence" @on-prev-in-sequence="onPrevInSequence"
@onNextInSequence="onNextInSequence" /> @on-next-in-sequence="onNextInSequence" />
</footer> </footer>
</div> </div>
</template> </template>
<script> <script>
import { nextTick, defineAsyncComponent } from 'vue';
import { mapActions, mapGetters } from 'vuex'; import { mapActions, mapGetters } from 'vuex';
import { eventBusItemMetadata } from '../../js/event-bus-item-metadata';
import wpMediaFrames from '../../js/wp-media-frames'; import wpMediaFrames from '../../js/wp-media-frames';
import { formHooks } from '../../js/mixins'; import { formHooks } from '../../js/mixins';
import { itemMetadataMixin } from '../../js/item-metadata-mixin';
import RelatedItemsList from '../lists/related-items-list.vue'; import RelatedItemsList from '../lists/related-items-list.vue';
import CustomDialog from '../other/custom-dialog.vue'; import CustomDialog from '../other/custom-dialog.vue';
@ -746,7 +753,9 @@ import ItemFormFooterButtons from './item-form-footer-buttons.vue';
import 'swiper/css'; import 'swiper/css';
import 'swiper/css/mousewheel'; import 'swiper/css/mousewheel';
import 'swiper/css/navigation'; import 'swiper/css/navigation';
import Swiper, { Mousewheel, Navigation } from 'swiper';
import Swiper from 'swiper';
import { Mousewheel, Navigation } from 'swiper/modules';
export default { export default {
name: 'ItemEditionForm', name: 'ItemEditionForm',
@ -756,9 +765,10 @@ export default {
ItemThumbnailEditionForm, ItemThumbnailEditionForm,
ItemDocumentEditionForm, ItemDocumentEditionForm,
ItemAttachmentsEditionForm, ItemAttachmentsEditionForm,
ItemFormFooterButtons ItemFormFooterButtons,
TainacanFormItem: defineAsyncComponent(() => import('../metadata-types/tainacan-form-item.vue')),
}, },
mixins: [ formHooks ], mixins: [ formHooks, itemMetadataMixin ],
beforeRouteLeave ( to, from, next ) { beforeRouteLeave ( to, from, next ) {
if (this.item.status == 'auto-draft') { if (this.item.status == 'auto-draft') {
this.$buefy.modal.open({ this.$buefy.modal.open({
@ -780,15 +790,18 @@ export default {
next() next()
} }
}, },
emits: [
'toggleItemEditionFooterDropdown'
],
data(){ data(){
return { return {
swiper: {}, swiper: {},
selected: 'Home', selected: 'Home',
pageTitle: '', pageTitle: '',
itemId: Number, itemId: [String, Number],
item: {}, item: {},
itemRequestCancel: undefined, itemRequestCancel: undefined,
collectionId: Number, collectionId: [String, Number],
sequenceId: Number, sequenceId: Number,
itemPosition: Number, itemPosition: Number,
isCreatingNewItem: false, isCreatingNewItem: false,
@ -800,7 +813,7 @@ export default {
metadataSectionCollapses: [], metadataSectionCollapses: [],
collapseAll: true, collapseAll: true,
form: { form: {
collectionId: Number, collectionId: [String, Number],
status: '', status: '',
document: '', document: '',
document_type: '', document_type: '',
@ -841,6 +854,7 @@ export default {
}, },
itemMetadata() { itemMetadata() {
const realItemMetadata = JSON.parse(JSON.stringify(this.getItemMetadata())); const realItemMetadata = JSON.parse(JSON.stringify(this.getItemMetadata()));
const tweakedItemMetadata = realItemMetadata.map((anItemMetadatum) => { const tweakedItemMetadata = realItemMetadata.map((anItemMetadatum) => {
// We need this because repository level metadata have an array of section IDs // We need this because repository level metadata have an array of section IDs
@ -881,12 +895,6 @@ export default {
totalRelatedItems() { totalRelatedItems() {
return (this.item && this.item.related_items) ? Object.values(this.item.related_items).reduce((totalItems, aRelatedItemsGroup) => totalItems + parseInt(aRelatedItemsGroup.total_items), 0) : false; return (this.item && this.item.related_items) ? Object.values(this.item.related_items).reduce((totalItems, aRelatedItemsGroup) => totalItems + parseInt(aRelatedItemsGroup.total_items), 0) : false;
}, },
formErrors() {
return eventBusItemMetadata && eventBusItemMetadata.errors && eventBusItemMetadata.errors.length ? eventBusItemMetadata.errors : []
},
conditionalSections() {
return eventBusItemMetadata && eventBusItemMetadata.conditionalSections ? eventBusItemMetadata.conditionalSections : [];
},
isEditingItemMetadataInsideIframe() { isEditingItemMetadataInsideIframe() {
return this.$route.query && this.$route.query.editingmetadata; return this.$route.query && this.$route.query.editingmetadata;
}, },
@ -955,7 +963,7 @@ export default {
// Clear form variables // Clear form variables
this.cleanItemMetadata(); this.cleanItemMetadata();
eventBusItemMetadata.clearAllErrors(); this.clearAllErrors();
this.formErrorMessage = ''; this.formErrorMessage = '';
this.isLoading = true; this.isLoading = true;
@ -977,13 +985,13 @@ export default {
// Obtains current Sequence Group Info // Obtains current Sequence Group Info
this.fetchSequenceGroup({ collectionId: this.collectionId, groupId: this.sequenceId }); this.fetchSequenceGroup({ collectionId: this.collectionId, groupId: this.sequenceId });
}, },
tabs:{ tabs: {
handler() { handler() {
if (this.tabs.length >= 2) { if (this.tabs.length >= 2) {
if (typeof this.swiper.update == 'function') if (typeof this.swiper.update == 'function')
this.swiper.update(); this.swiper.update();
else { else {
this.$nextTick(() => { nextTick(() => {
this.swiper = new Swiper('#tainacanTabsSwiper', { this.swiper = new Swiper('#tainacanTabsSwiper', {
watchOverflow: true, watchOverflow: true,
mousewheel: true, mousewheel: true,
@ -1003,13 +1011,14 @@ export default {
} }
} }
}, },
immediate: true immediate: true,
deep: true
} }
}, },
created() { created() {
// Obtains collection ID // Obtains collection ID
this.cleanItemMetadata(); this.cleanItemMetadata();
eventBusItemMetadata.clearAllErrors(); this.clearAllErrors();
this.formErrorMessage = ''; this.formErrorMessage = '';
this.collectionId = this.$route.params.collectionId; this.collectionId = this.$route.params.collectionId;
this.form.collectionId = this.collectionId; this.form.collectionId = this.collectionId;
@ -1071,12 +1080,12 @@ export default {
* Creates the conditional metadata set to later watch values * Creates the conditional metadata set to later watch values
* of certain metadata that control sections visibility. * of certain metadata that control sections visibility.
*/ */
eventBusItemMetadata.conditionalSections = {}; this.conditionalSections = {};
for (let metadataSection of metadataSections) { for (let metadataSection of metadataSections) {
if ( metadataSection.is_conditional_section == 'yes') { if ( metadataSection.is_conditional_section == 'yes') {
const conditionalSectionId = Object.keys(metadataSection.conditional_section_rules); const conditionalSectionId = Object.keys(metadataSection.conditional_section_rules);
if ( conditionalSectionId.length ) { if ( conditionalSectionId.length ) {
eventBusItemMetadata.conditionalSections[metadataSection.id] = { this.conditionalSections[metadataSection.id] = {
sectionId: metadataSection.id, sectionId: metadataSection.id,
metadatumId: conditionalSectionId[0], metadatumId: conditionalSectionId[0],
metadatumValues: metadataSection.conditional_section_rules[conditionalSectionId[0]], metadatumValues: metadataSection.conditional_section_rules[conditionalSectionId[0]],
@ -1092,22 +1101,13 @@ export default {
}); });
// Sets feedback variables // Sets feedback variables
eventBusItemMetadata.$on('isUpdatingValue', (status) => {
this.isUpdatingValues = status;
});
eventBusItemMetadata.$on('hasErrorsOnForm', (hasErrors) => {
if (hasErrors)
this.formErrorMessage = this.formErrorMessage ? this.formErrorMessage : this.$i18n.get('info_errors_in_form');
else
this.formErrorMessage = '';
});
this.cleanLastUpdated(); this.cleanLastUpdated();
// Updates variables for metadata navigation from compound childs // Updates variables for metadata navigation from compound childs
eventBusItemMetadata.$on('isOnFirstMetadatumOfCompoundNavigation', (isOnFirstMetadatumOfCompoundNavigation) => { this.$emitter.on('isOnFirstMetadatumOfCompoundNavigation', (isOnFirstMetadatumOfCompoundNavigation) => {
this.isOnFirstMetadatumOfCompoundNavigation = isOnFirstMetadatumOfCompoundNavigation this.isOnFirstMetadatumOfCompoundNavigation = isOnFirstMetadatumOfCompoundNavigation
}); });
eventBusItemMetadata.$on('isOnLastMetadatumOfCompoundNavigation', (isOnLastMetadatumOfCompoundNavigation) => { this.$emitter.on('isOnLastMetadatumOfCompoundNavigation', (isOnLastMetadatumOfCompoundNavigation) => {
this.isOnLastMetadatumOfCompoundNavigation = isOnLastMetadatumOfCompoundNavigation this.isOnLastMetadatumOfCompoundNavigation = isOnLastMetadatumOfCompoundNavigation
}); });
@ -1119,11 +1119,9 @@ export default {
if (this.$adminOptions.mobileAppMode) if (this.$adminOptions.mobileAppMode)
this.isMobileSubheaderOpen = true; this.isMobileSubheaderOpen = true;
}, },
beforeDestroy () { beforeUnmount () {
eventBusItemMetadata.$off('isUpdatingValue'); this.$emitter.off('isOnFirstMetadatumOfCompoundNavigation');
eventBusItemMetadata.$off('hasErrorsOnForm'); this.$emitter.off('isOnLastMetadatumOfCompoundNavigation');
eventBusItemMetadata.$off('isOnFirstMetadatumOfCompoundNavigation');
eventBusItemMetadata.$off('isOnLastMetadatumOfCompoundNavigation');
window.removeEventListener('resize', this.handleWindowResize); window.removeEventListener('resize', this.handleWindowResize);
if (typeof this.swiper.destroy == 'function') if (typeof this.swiper.destroy == 'function')
this.swiper.destroy(); this.swiper.destroy();
@ -1191,7 +1189,7 @@ export default {
promise = this.updateItem(data); promise = this.updateItem(data);
// Clear errors so we don't have them duplicated from api // Clear errors so we don't have them duplicated from api
eventBusItemMetadata.errors = []; this.errors = [];
promise.then(updatedItem => { promise.then(updatedItem => {
@ -1250,7 +1248,7 @@ export default {
if (errors.errors) { if (errors.errors) {
for (let error of errors.errors) { for (let error of errors.errors) {
for (let metadatum of Object.keys(error)){ for (let metadatum of Object.keys(error)){
eventBusItemMetadata.errors.push({ this.errors.push({
metadatum_id: metadatum, metadatum_id: metadatum,
errors: error[metadatum] errors: error[metadatum]
}); });
@ -1264,6 +1262,12 @@ export default {
this.isLoading = false; this.isLoading = false;
}); });
}, },
hasErrorsOnForm(hasErrors) {
if (hasErrors)
this.formErrorMessage = this.formErrorMessage ? this.formErrorMessage : this.$i18n.get('info_errors_in_form');
else
this.formErrorMessage = '';
},
onDiscard() { onDiscard() {
if (!this.$adminOptions.itemEditionMode && !this.$adminOptions.mobileAppMode) if (!this.$adminOptions.itemEditionMode && !this.$adminOptions.mobileAppMode)
this.$router.go(-1); this.$router.go(-1);
@ -1280,13 +1284,13 @@ export default {
this.isLoading = true; this.isLoading = true;
// Updates Collection BreadCrumb // Updates Collection BreadCrumb
this.$root.$emit('onCollectionBreadCrumbUpdate', [ this.$emitter.emit('onCollectionBreadCrumbUpdate', [
{ path: this.$routerHelper.getCollectionPath(this.collectionId), label: this.$i18n.get('items') }, { path: this.$routerHelper.getCollectionPath(this.collectionId), label: this.$i18n.get('items') },
{ path: '', label: this.$i18n.get('new') } { path: '', label: this.$i18n.get('new') }
]); ]);
// Clear errors so we don't have them duplicated from api // Clear errors so we don't have them duplicated from api
eventBusItemMetadata.errors = []; this.errors = [];
// Creates draft Item // Creates draft Item
this.form.comment_status = this.form.comment_status == 'open' ? 'open' : 'closed'; this.form.comment_status = this.form.comment_status == 'open' ? 'open' : 'closed';
@ -1315,7 +1319,7 @@ export default {
// If a parameter was passed with a suggestion of item title, also send a patch to item metadata // If a parameter was passed with a suggestion of item title, also send a patch to item metadata
if (this.$route.query.newitemtitle) { if (this.$route.query.newitemtitle) {
eventBusItemMetadata.$emit('input', { this.updateItemMetadataValue({
itemId: this.itemId, itemId: this.itemId,
metadatumId: this.$route.query.newmetadatumid, metadatumId: this.$route.query.newmetadatumid,
values: this.$route.query.newitemtitle, values: this.$route.query.newitemtitle,
@ -1359,8 +1363,8 @@ export default {
const currentItemMetadatum = metadata.find(anItemMetadatum => anItemMetadatum.metadatum.id == this.conditionalSections[conditionalSectionId].metadatumId); const currentItemMetadatum = metadata.find(anItemMetadatum => anItemMetadatum.metadatum.id == this.conditionalSections[conditionalSectionId].metadatumId);
if (currentItemMetadatum) { if (currentItemMetadatum) {
const itemMetadatumValues = Array.isArray(currentItemMetadatum.value) ? currentItemMetadatum.value : [ currentItemMetadatum.value ]; const itemMetadatumValues = Array.isArray(currentItemMetadatum.value) ? currentItemMetadatum.value : [ currentItemMetadatum.value ];
const conditionalValues = Array.isArray(eventBusItemMetadata.conditionalSections[conditionalSectionId].metadatumValues) ? eventBusItemMetadata.conditionalSections[conditionalSectionId].metadatumValues : [eventBusItemMetadata.conditionalSections[conditionalSectionId].metadatumValues]; const conditionalValues = Array.isArray(this.conditionalSections[conditionalSectionId].metadatumValues) ? this.conditionalSections[conditionalSectionId].metadatumValues : [this.conditionalSections[conditionalSectionId].metadatumValues];
eventBusItemMetadata.conditionalSections[conditionalSectionId].hide = Array.isArray(itemMetadatumValues) ? itemMetadatumValues.every(aValue => conditionalValues.indexOf(aValue['id'] ? aValue['id'] : aValue) < 0) : conditionalValues.indexOf(itemMetadatumValues) < 0; this.conditionalSections[conditionalSectionId].hide = Array.isArray(itemMetadatumValues) ? itemMetadatumValues.every(aValue => conditionalValues.indexOf(aValue['id'] ? aValue['id'] : aValue) < 0) : conditionalValues.indexOf(itemMetadatumValues) < 0;
} }
} }
@ -1414,7 +1418,7 @@ export default {
.catch((errors) => { .catch((errors) => {
for (let error of errors.errors) { for (let error of errors.errors) {
for (let metadatum of Object.keys(error)){ for (let metadatum of Object.keys(error)){
eventBusItemMetadata.errors.push({ this.errors.push({
metadatum_id: metadatum, metadatum_id: metadatum,
errors: error[metadatum] errors: error[metadatum]
}); });
@ -1497,7 +1501,7 @@ export default {
.catch((errors) => { .catch((errors) => {
for (let error of errors.errors) { for (let error of errors.errors) {
for (let metadatum of Object.keys(error)){ for (let metadatum of Object.keys(error)){
eventBusItemMetadata.errors.push({ this.errors.push({
metadatum_id: metadatum, metadatum_id: metadatum,
errors: error[metadatum] errors: error[metadatum]
}); });
@ -1525,7 +1529,7 @@ export default {
.catch((errors) => { .catch((errors) => {
for (let error of errors.errors) { for (let error of errors.errors) {
for (let metadatum of Object.keys(error)){ for (let metadatum of Object.keys(error)){
eventBusItemMetadata.errors.push({ this.errors.push({
metadatum_id: metadatum, metadatum_id: metadatum,
errors: error[metadatum] errors: error[metadatum]
}); });
@ -1600,7 +1604,7 @@ export default {
.catch((errors) => { .catch((errors) => {
for (let error of errors.errors) { for (let error of errors.errors) {
for (let metadatum of Object.keys(error)){ for (let metadatum of Object.keys(error)){
eventBusItemMetadata.errors.push({ metadatum_id: metadatum, errors: error[metadatum]}); this.errors.push({ metadatum_id: metadatum, errors: error[metadatum]});
} }
} }
this.formErrorMessage = errors.error_message; this.formErrorMessage = errors.error_message;
@ -1666,18 +1670,18 @@ export default {
this.metadataCollapses[i] = this.collapseAll; this.metadataCollapses[i] = this.collapseAll;
for (let i = 0; i < this.metadataSectionCollapses.length; i++) for (let i = 0; i < this.metadataSectionCollapses.length; i++)
this.$set(this.metadataSectionCollapses, i, this.collapseAll); Object.assign(this.metadataSectionCollapses, { [i]: this.collapseAll });
}, },
onChangeCollapse(event, index) { onChangeCollapse(event, index) {
if (event && !this.metadataCollapses[index] && this.itemMetadata[index].metadatum && this.itemMetadata[index].metadatum['metadata_type'] === "Tainacan\\Metadata_Types\\GeoCoordinate") if (event && !this.metadataCollapses[index] && this.itemMetadata[index].metadatum && this.itemMetadata[index].metadatum['metadata_type'] === "Tainacan\\Metadata_Types\\GeoCoordinate")
eventBusItemMetadata.$emit('itemEditionFormResize'); this.$emitter.emit('itemEditionFormResize');
this.metadataCollapses.splice(index, 1, event); this.metadataCollapses.splice(index, 1, event);
}, },
toggleMetadataSectionCollapse(sectionIndex) { toggleMetadataSectionCollapse(sectionIndex) {
if (!this.isMetadataNavigation) if (!this.isMetadataNavigation)
this.$set(this.metadataSectionCollapses, sectionIndex, (this.errorMessage ? true : !this.metadataSectionCollapses[sectionIndex])); Object.assign( this.metadataSectionCollapses, { [sectionIndex]: (this.formErrorMessage ? true : !this.metadataSectionCollapses[sectionIndex]) });
}, },
onDeletePermanently() { onDeletePermanently() {
this.$buefy.modal.open({ this.$buefy.modal.open({
@ -1718,14 +1722,14 @@ export default {
// Updates Collection BreadCrumb // Updates Collection BreadCrumb
if (this.isOnSequenceEdit) { if (this.isOnSequenceEdit) {
this.$root.$emit('onCollectionBreadCrumbUpdate', [ this.$emitter.emit('onCollectionBreadCrumbUpdate', [
{ path: this.$routerHelper.getCollectionPath(this.collectionId), label: this.$i18n.get('items') }, { path: this.$routerHelper.getCollectionPath(this.collectionId), label: this.$i18n.get('items') },
{ path: '', label: this.$i18n.get('sequence') }, { path: '', label: this.$i18n.get('sequence') },
{ path: '', label: this.item.title }, { path: '', label: this.item.title },
{ path: '', label: this.$i18n.get('edit') } { path: '', label: this.$i18n.get('edit') }
]); ]);
} else { } else {
this.$root.$emit('onCollectionBreadCrumbUpdate', [ this.$emitter.emit('onCollectionBreadCrumbUpdate', [
{ path: this.$routerHelper.getCollectionPath(this.collectionId), label: this.$i18n.get('items') }, { path: this.$routerHelper.getCollectionPath(this.collectionId), label: this.$i18n.get('items') },
{ path: this.$routerHelper.getItemPath(this.form.collectionId, this.itemId), label: this.item.title }, { path: this.$routerHelper.getItemPath(this.form.collectionId, this.itemId), label: this.item.title },
{ path: '', label: this.$i18n.get('edit') } { path: '', label: this.$i18n.get('edit') }
@ -1733,7 +1737,7 @@ export default {
} }
// Fills hook forms with it's real values // Fills hook forms with it's real values
this.$nextTick() nextTick()
.then(() => { .then(() => {
this.updateExtraFormData(this.item); this.updateExtraFormData(this.item);
}); });
@ -1810,8 +1814,8 @@ export default {
this.openMetadataNameFilter = false; this.openMetadataNameFilter = false;
}, },
handleWindowResize: _.debounce( function() { handleWindowResize: _.debounce( function() {
this.$nextTick(() => { nextTick(() => {
eventBusItemMetadata.$emit('itemEditionFormResize'); this.$emitter.emit('itemEditionFormResize');
if (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) if (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth)
this.isMobileScreen = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) <= 768; this.isMobileScreen = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) <= 768;
}); });
@ -1821,14 +1825,14 @@ export default {
const isPreviouslyFocusedOnCompoundMetadatum = previouslyFocusedMetadatum.metadatum && previouslyFocusedMetadatum.metadatum.metadata_type === 'Tainacan\\Metadata_Types\\Compound'; const isPreviouslyFocusedOnCompoundMetadatum = previouslyFocusedMetadatum.metadatum && previouslyFocusedMetadatum.metadatum.metadata_type === 'Tainacan\\Metadata_Types\\Compound';
if (isPreviouslyFocusedOnCompoundMetadatum || this.isCurrentlyFocusedOnCompoundMetadatum) if (isPreviouslyFocusedOnCompoundMetadatum || this.isCurrentlyFocusedOnCompoundMetadatum)
eventBusItemMetadata.$emit('focusPreviousChildMetadatum'); this.$emitter.emit('focusPreviousChildMetadatum');
if ( !this.isCurrentlyFocusedOnCompoundMetadatum || (this.isCurrentlyFocusedOnCompoundMetadatum && this.isOnFirstMetadatumOfCompoundNavigation) ) if ( !this.isCurrentlyFocusedOnCompoundMetadatum || (this.isCurrentlyFocusedOnCompoundMetadatum && this.isOnFirstMetadatumOfCompoundNavigation) )
this.setMetadatumFocus({ index: this.focusedMetadatum - 1, scrollIntoView: true }); this.setMetadatumFocus({ index: this.focusedMetadatum - 1, scrollIntoView: true });
}, },
focusNextMetadatum() { focusNextMetadatum() {
if (this.isCurrentlyFocusedOnCompoundMetadatum && !this.isOnLastMetadatumOfCompoundNavigation) if (this.isCurrentlyFocusedOnCompoundMetadatum && !this.isOnLastMetadatumOfCompoundNavigation)
eventBusItemMetadata.$emit('focusNextChildMetadatum'); this.$emitter.emit('focusNextChildMetadatum');
if ( !this.isCurrentlyFocusedOnCompoundMetadatum || (this.isCurrentlyFocusedOnCompoundMetadatum && this.isOnLastMetadatumOfCompoundNavigation) ) if ( !this.isCurrentlyFocusedOnCompoundMetadatum || (this.isCurrentlyFocusedOnCompoundMetadatum && this.isOnLastMetadatumOfCompoundNavigation) )
this.setMetadatumFocus({ index: this.focusedMetadatum + 1, scrollIntoView: true }); this.setMetadatumFocus({ index: this.focusedMetadatum + 1, scrollIntoView: true });
@ -2162,7 +2166,7 @@ export default {
.metadata-navigation { .metadata-navigation {
margin-right: auto; margin-right: auto;
} }
.metadata-navigation /deep/ .button { .metadata-navigation :deep(.button) {
border-radius: 0 !important; border-radius: 0 !important;
margin-left: 0; margin-left: 0;
min-height: 2.25em; min-height: 2.25em;

104
src/views/admin/components/edition/item-form-footer-buttons.vue
View File

@ -4,9 +4,9 @@
<!-- Item edition inside iframe --> <!-- Item edition inside iframe -->
<template v-if="isEditingItemMetadataInsideIframe"> <template v-if="isEditingItemMetadataInsideIframe">
<button <button
@click="$emit('onSubmit')"
type="button" type="button"
class="button is-secondary"> class="button is-secondary"
@click="$emit('on-submit')">
{{ $i18n.get('label_back_to_related_item') }} {{ $i18n.get('label_back_to_related_item') }}
</button> </button>
</template> </template>
@ -17,11 +17,11 @@
<!-- Sequence edition Previous --> <!-- Sequence edition Previous -->
<button <button
v-if="isOnSequenceEdit && hasPreviousItemOnSequenceEdit" v-if="isOnSequenceEdit && hasPreviousItemOnSequenceEdit"
@click="$emit('onPrevInSequence')"
type="button" type="button"
class="button sequence-button"> class="button sequence-button"
@click="$emit('on-prev-in-sequence')">
<span class="icon is-large"> <span class="icon is-large">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-previous"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-previous" />
</span> </span>
<span>{{ $i18n.get('previous') }}</span> <span>{{ $i18n.get('previous') }}</span>
</button> </button>
@ -30,14 +30,14 @@
<template v-if="(status == 'auto-draft' || status == undefined)"> <template v-if="(status == 'auto-draft' || status == undefined)">
<button <button
v-if="!$adminOptions.mobileAppMode" v-if="!$adminOptions.mobileAppMode"
@click="$emit('onDiscard')"
type="button" type="button"
class="button is-outlined">{{ $i18n.get('label_discard') }}</button> class="button is-outlined"
@click="$emit('on-discard')">{{ $i18n.get('label_discard') }}</button>
<button <button
@click="openItemCreationStatusDialog"
type="button" type="button"
class="button is-secondary" class="button is-secondary"
:style="{ marginLeft: $adminOptions.mobileAppMode ? 'auto' : '0.5em' }">{{ $i18n.get('label_create_item') }}</button> :style="{ marginLeft: $adminOptions.mobileAppMode ? 'auto' : '0.5em' }"
@click="openItemCreationStatusDialog">{{ $i18n.get('label_create_item') }}</button>
</template> </template>
<!-- Item is public, draft or private --> <!-- Item is public, draft or private -->
@ -46,9 +46,9 @@
<!-- Send items to Trash --> <!-- Send items to Trash -->
<button <button
v-if="!isOnSequenceEdit && currentUserCanDelete && !$adminOptions.mobileAppMode" v-if="!isOnSequenceEdit && currentUserCanDelete && !$adminOptions.mobileAppMode"
@click="$emit('onSubmit', 'trash')"
type="button" type="button"
class="button is-outlined"> class="button is-outlined"
@click="$emit('on-submit', 'trash')">
<span v-if="!isMobileScreen">{{ $i18n.get('label_send_to_trash') }}</span> <span v-if="!isMobileScreen">{{ $i18n.get('label_send_to_trash') }}</span>
<span v-else>{{ $i18n.get('status_trash') }}</span> <span v-else>{{ $i18n.get('status_trash') }}</span>
</button> </button>
@ -67,70 +67,70 @@
<template #trigger> <template #trigger>
<button <button
:disabled="hasSomeError && (status == 'publish' || status == 'private')" :disabled="hasSomeError && (status == 'publish' || status == 'private')"
@click="!$adminOptions.mobileAppMode && !isMobileScreen ? $emit(
'onSubmit',
( currentUserCanPublish && !$adminOptions.hideItemEditionStatusPublishOption ) ? status : 'draft',
( (isOnSequenceEdit && !isCurrentItemOnSequenceEdit) ? 'next' : null)
) : ($refs && $refs['item-edition-footer-dropdown'] && !$refs['item-edition-footer-dropdown'].isActive ? $refs['item-edition-footer-dropdown'].toggle() : null)"
type="button" type="button"
class="button" class="button"
:class="{ :class="{
'is-success': status == 'publish' || status == 'private', 'is-success': status == 'publish' || status == 'private',
'is-secondary': status == 'draft' 'is-secondary': status == 'draft'
}"> }"
@click="!$adminOptions.mobileAppMode && !isMobileScreen ? $emit(
'on-submit',
( currentUserCanPublish && !$adminOptions.hideItemEditionStatusPublishOption ) ? status : 'draft',
( (isOnSequenceEdit && !isCurrentItemOnSequenceEdit) ? 'next' : null)
) : ($refs && $refs['item-edition-footer-dropdown'] && !$refs['item-edition-footer-dropdown'].isActive ? $refs['item-edition-footer-dropdown'].toggle() : null)">
{{ $i18n.get('label_update') }} {{ $i18n.get('label_update') }}
<span <span
v-if="isOnSequenceEdit && !isCurrentItemOnSequenceEdit" v-if="isOnSequenceEdit && !isCurrentItemOnSequenceEdit"
class="icon is-large" class="icon is-large"
style="margin-left: 0em;"> style="margin-left: 0em;">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-next"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-next" />
</span> </span>
<span <span
v-if="!$adminOptions.mobileAppMode" v-if="!$adminOptions.mobileAppMode"
@mouseenter="$refs && $refs['item-edition-footer-dropdown'] && !$refs['item-edition-footer-dropdown'].isActive ? $refs['item-edition-footer-dropdown'].toggle() : null"
style="margin-left: 0.5em;" style="margin-left: 0.5em;"
class="icon is-small"> class="icon is-small"
@mouseenter="$refs && $refs['item-edition-footer-dropdown'] && !$refs['item-edition-footer-dropdown'].isActive ? $refs['item-edition-footer-dropdown'].toggle() : null">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowup" /> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowup" />
</span> </span>
</button> </button>
</template> </template>
<b-dropdown-item <b-dropdown-item
@click="$emit( :class="{ 'is-forced-last-option': status == 'draft' }"
'onSubmit', aria-role="listitem"
@click="$emit(
'on-submit',
'draft', 'draft',
( (isOnSequenceEdit && !isCurrentItemOnSequenceEdit) ? 'next' : null) ( (isOnSequenceEdit && !isCurrentItemOnSequenceEdit) ? 'next' : null)
)" )">
:class="{ 'is-forced-last-option': status == 'draft' }"
aria-role="listitem">
<span class="icon has-text-gray4"> <span class="icon has-text-gray4">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-draft"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-draft" />
</span> </span>
{{ status == 'draft' ? $i18n.get('label_update_draft') : $i18n.get('label_change_to_draft') }} {{ status == 'draft' ? $i18n.get('label_update_draft') : $i18n.get('label_change_to_draft') }}
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item <b-dropdown-item
v-if="currentUserCanPublish && !$adminOptions.hideItemEditionStatusPublishOption" v-if="currentUserCanPublish && !$adminOptions.hideItemEditionStatusPublishOption"
:class="{ 'is-forced-last-option': status == 'private' }"
aria-role="listitem"
@click="$emit( @click="$emit(
'onSubmit', 'on-submit',
'private', 'private',
( (isOnSequenceEdit && !isCurrentItemOnSequenceEdit) ? 'next' : null) ( (isOnSequenceEdit && !isCurrentItemOnSequenceEdit) ? 'next' : null)
)" )">
:class="{ 'is-forced-last-option': status == 'private' }"
aria-role="listitem">
<span class="icon has-text-gray4"> <span class="icon has-text-gray4">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-private"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-private" />
</span> </span>
{{ status == 'private' ? $i18n.get('label_update_as_private') : ( status == 'draft' ? $i18n.get('label_verb_publish_privately') : $i18n.get('label_change_to_private') ) }} {{ status == 'private' ? $i18n.get('label_update_as_private') : ( status == 'draft' ? $i18n.get('label_verb_publish_privately') : $i18n.get('label_change_to_private') ) }}
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item <b-dropdown-item
v-if="currentUserCanPublish && !$adminOptions.hideItemEditionStatusPublishOption" v-if="currentUserCanPublish && !$adminOptions.hideItemEditionStatusPublishOption"
aria-role="listitem"
@click="$emit( @click="$emit(
'onSubmit', 'on-submit',
'publish', 'publish',
( (isOnSequenceEdit && !isCurrentItemOnSequenceEdit) ? 'next' : null) ( (isOnSequenceEdit && !isCurrentItemOnSequenceEdit) ? 'next' : null)
)" )">
aria-role="listitem">
<span class="icon has-text-gray4"> <span class="icon has-text-gray4">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-public"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-public" />
</span> </span>
{{ status == 'publish' ? $i18n.get('label_update_as_public') : $i18n.get('label_verb_publish') }} {{ status == 'publish' ? $i18n.get('label_update_as_public') : $i18n.get('label_verb_publish') }}
</b-dropdown-item> </b-dropdown-item>
@ -140,13 +140,13 @@
<button <button
v-else v-else
:disabled="hasSomeError && (status == 'publish' || status == 'private')" :disabled="hasSomeError && (status == 'publish' || status == 'private')"
@click="$emit('onSubmit', status)"
type="button" type="button"
class="button" class="button"
:class="{ :class="{
'is-success': status == 'publish' || status == 'private', 'is-success': status == 'publish' || status == 'private',
'is-secondary': status == 'draft' 'is-secondary': status == 'draft'
}"> }"
@click="$emit('on-submit', status)">
{{ $i18n.get('label_update') }} {{ $i18n.get('label_update') }}
</button> </button>
@ -156,23 +156,23 @@
<button <button
v-if="!currentUserCanPublish && isOnSequenceEdit && hasNextItemOnSequenceEdit" v-if="!currentUserCanPublish && isOnSequenceEdit && hasNextItemOnSequenceEdit"
:disabled="(status == 'publish' || status == 'private') && hasSomeError" :disabled="(status == 'publish' || status == 'private') && hasSomeError"
@click="$emit('onNextInSequence')"
type="button" type="button"
class="button is-success"> class="button is-success"
@click="$emit('on-next-in-sequence')">
<span>{{ $i18n.get('label_next') }}</span> <span>{{ $i18n.get('label_next') }}</span>
<span class="icon is-large"> <span class="icon is-large">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-next"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-next" />
</span> </span>
</button> </button>
<!-- Sequence edition Finish --> <!-- Sequence edition Finish -->
<button <button
v-if="isOnSequenceEdit && isCurrentItemOnSequenceEdit" v-if="isOnSequenceEdit && isCurrentItemOnSequenceEdit"
@click="$router.push($routerHelper.getCollectionPath(collectionId))"
type="button" type="button"
class="button sequence-button"> class="button sequence-button"
@click="$router.push($routerHelper.getCollectionPath(collectionId))">
<span class="icon is-large"> <span class="icon is-large">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-approved"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-approved" />
</span> </span>
<span>{{ $i18n.get('finish') }}</span> <span>{{ $i18n.get('finish') }}</span>
</button> </button>
@ -188,7 +188,7 @@ import ItemCreationStatusDialog from '../other/item-creation-status-dialog.vue';
export default { export default {
props: { props: {
status: String, status: String,
collectionId: Number, collectionId: [Number, String],
isOnSequenceEdit: Boolean, isOnSequenceEdit: Boolean,
isCurrentItemOnSequenceEdit: Boolean, isCurrentItemOnSequenceEdit: Boolean,
hasNextItemOnSequenceEdit: Boolean, hasNextItemOnSequenceEdit: Boolean,
@ -199,14 +199,20 @@ export default {
currentUserCanPublish: Boolean, currentUserCanPublish: Boolean,
isEditingItemMetadataInsideIframe: Boolean isEditingItemMetadataInsideIframe: Boolean
}, },
emits: [
'on-submit',
'on-next-in-sequence',
'on-prev-in-sequence',
'on-discard',
],
mounted() { mounted() {
this.$parent.$on('toggleItemEditionFooterDropdown', () => { this.$emitter.on('toggleItemEditionFooterDropdown', () => {
if (this.$refs && this.$refs['item-edition-footer-dropdown']) if (this.$refs && this.$refs['item-edition-footer-dropdown'])
this.$refs['item-edition-footer-dropdown'].toggle(); this.$refs['item-edition-footer-dropdown'].toggle();
}); });
}, },
beforeDestroy() { beforeUnmount() {
this.$parent.$off('toggleItemEditionFooterDropdown'); this.$emitter.off('toggleItemEditionFooterDropdown');
}, },
methods: { methods: {
openItemCreationStatusDialog() { openItemCreationStatusDialog() {
@ -219,7 +225,7 @@ export default {
icon: 'item', icon: 'item',
currentUserCanPublish: this.currentUserCanPublish, currentUserCanPublish: this.currentUserCanPublish,
onConfirm: (selectedStatus) => { onConfirm: (selectedStatus) => {
this.$emit('onSubmit', selectedStatus); this.$emit('on-submit', selectedStatus);
} }
}, },
trapFocus: true, trapFocus: true,
@ -244,7 +250,7 @@ export default {
margin-right: 0px; margin-right: 0px;
} }
/deep/ .item-edition-footer-dropdown { :deep(.item-edition-footer-dropdown) {
.dropdown-trigger .button>.icon.is-small { .dropdown-trigger .button>.icon.is-small {
border-left: 1px solid rgba(255,255,255,0.6); border-left: 1px solid rgba(255,255,255,0.6);
margin-left: 0.5em; margin-left: 0.5em;

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

@ -5,17 +5,17 @@
class="section-label"> class="section-label">
<label> <label>
<span class="icon has-text-gray4"> <span class="icon has-text-gray4">
<i class="tainacan-icon tainacan-icon-image"/> <i class="tainacan-icon tainacan-icon-image" />
</span> </span>
{{ collection && collection.item_thumbnail_label ? collection.item_thumbnail_label : $i18n.get('label_thumbnail') }} {{ collection && collection.item_thumbnail_label ? collection.item_thumbnail_label : $i18n.get('label_thumbnail') }}
</label> </label>
<help-button <help-button
:title="collection && collection.item_thumbnail_label ? collection.item_thumbnail_label: $i18n.getHelperTitle('items', '_thumbnail_id')" :title="collection && collection.item_thumbnail_label ? collection.item_thumbnail_label: $i18n.getHelperTitle('items', '_thumbnail_id')"
:message="$i18n.getHelperMessage('items', '_thumbnail_id')"/> :message="$i18n.getHelperMessage('items', '_thumbnail_id')" />
</div> </div>
<div <div
v-if="!isLoading && !$adminOptions.hideItemEditionThumbnail" v-if="!$adminOptions.hideItemEditionThumbnail"
class="section-box section-thumbnail"> class="section-box section-thumbnail">
<div class="thumbnail-field"> <div class="thumbnail-field">
<file-item <file-item
@ -28,13 +28,13 @@
thumbnails: { 'tainacan-medium': [ $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_mimetype) ] }, thumbnails: { 'tainacan-medium': [ $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_mimetype) ] },
title: $i18n.get('label_thumbnail'), title: $i18n.get('label_thumbnail'),
description: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + $thumbHelper.getSrc(item['thumbnail'], 'full', item.document_mimetype) + `'/>` description: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + $thumbHelper.getSrc(item['thumbnail'], 'full', item.document_mimetype) + `'/>`
}"/> }" />
<figure <figure
v-if="item.thumbnail == undefined || ((item.thumbnail.medium == undefined || item.thumbnail.medium == false) && (item.thumbnail['tainacan-medium'] == undefined || item.thumbnail['tainacan-medium'] == false))" v-if="item.thumbnail == undefined || ((item.thumbnail.medium == undefined || item.thumbnail.medium == false) && (item.thumbnail['tainacan-medium'] == undefined || item.thumbnail['tainacan-medium'] == false))"
class="image"> class="image">
<span <span
class="image-placeholder" v-if="item.document_type == 'empty' && item.document_mimetype == 'empty'"
v-if="item.document_type == 'empty' && item.document_mimetype == 'empty'"> class="image-placeholder">
{{ $i18n.get('label_empty_thumbnail') }} {{ $i18n.get('label_empty_thumbnail') }}
</span> </span>
<img <img
@ -47,7 +47,7 @@
:label="$i18n.get('label_thumbnail_alt')"> :label="$i18n.get('label_thumbnail_alt')">
<help-button <help-button
:title="$i18n.get('label_thumbnail_alt')" :title="$i18n.get('label_thumbnail_alt')"
:message="$i18n.get('info_thumbnail_alt')"/> :message="$i18n.get('info_thumbnail_alt')" />
<textarea <textarea
id="tainacan-text-description" id="tainacan-text-description"
class="textarea" class="textarea"
@ -57,10 +57,10 @@
</b-field> </b-field>
<div class="thumbnail-buttons-row"> <div class="thumbnail-buttons-row">
<a <a
class="button is-rounded is-secondary"
id="button-edit-thumbnail" id="button-edit-thumbnail"
class="button is-rounded is-secondary"
:aria-label="$i18n.get('label_button_edit_thumb')" :aria-label="$i18n.get('label_button_edit_thumb')"
@click.prevent="($event) => $emit('openThumbnailMediaFrame', $event)"> @click.prevent="($event) => $emit('open-thumbnail-media-frame', $event)">
<span <span
v-tooltip="{ v-tooltip="{
content: $i18n.get('edit'), content: $i18n.get('edit'),
@ -69,7 +69,7 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-edit"/> <i class="tainacan-icon tainacan-icon-edit" />
</span> </span>
</a> </a>
<a <a
@ -77,7 +77,7 @@
id="button-delete-thumbnail" id="button-delete-thumbnail"
class="button is-rounded is-secondary" class="button is-rounded is-secondary"
:aria-label="$i18n.get('label_button_delete_thumb')" :aria-label="$i18n.get('label_button_delete_thumb')"
@click="$emit('onDeleteThumbnail')"> @click="$emit('on-delete-thumbnail')">
<span <span
v-tooltip="{ v-tooltip="{
content: $i18n.get('delete'), content: $i18n.get('delete'),
@ -86,7 +86,7 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-delete"/> <i class="tainacan-icon tainacan-icon-delete" />
</span> </span>
</a> </a>
</div> </div>
@ -107,9 +107,14 @@ export default {
collection: Object, collection: Object,
form: Object form: Object
}, },
emits: [
'open-thumbnail-media-frame',
'on-delete-thumbnail',
'on-update-thumbnail-alt'
],
methods: { methods: {
updateThumbnailAlt: _.debounce(function($event) { updateThumbnailAlt: _.debounce(function($event) {
this.$emit('onUpdateThumbnailAlt', $event.target.value); this.$emit('on-update-thumbnail-alt', $event.target.value);
}, 750) }, 750)
} }
} }

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

@ -1,263 +1,266 @@
<template> <template>
<form <form
id="metadataSectionEditForm" id="metadataSectionEditForm"
@submit.prevent="saveEdition(form)" autofocus="true"
autofocus="true" tabindex="-1"
tabindex="-1" role="dialog"
role="dialog" aria-modal
aria-modal> @submit.prevent="saveEdition(form)">
<div <div
v-if="form && Object.keys(form).length" v-if="form && Object.keys(form).length"
class="tainacan-modal-content"> class="tainacan-modal-content">
<div class="tainacan-modal-title"> <div class="tainacan-modal-title">
<h2 v-if="form.name"> <h2 v-if="form.name">
{{ $i18n.get('instruction_configure_the_metadata_section') }}&nbsp;<em>{{ form.name }}</em> {{ $i18n.get('instruction_configure_the_metadata_section') }}&nbsp;<em>{{ form.name }}</em>
</h2> </h2>
<h2 v-else> <h2 v-else>
{{ $i18n.get('instruction_configure_new_metadata_section') }} {{ $i18n.get('instruction_configure_new_metadata_section') }}
</h2> </h2>
<hr>
</div>
<div class="tainacan-form">
<div class="options-columns">
<b-field
:addons="false"
:type="formErrors['name'] != undefined ? 'is-danger' : ''"
:message="formErrors['name'] != undefined ? formErrors['name'] : ''">
<label class="label is-inline">
{{ $i18n.get('label_name') }}
<span
class="required-metadata-section-asterisk"
:class="formErrors['name'] != undefined ? 'is-danger' : ''">*</span>
<help-button
:title="$i18n.getHelperTitle('metadata-sections', 'name')"
:message="$i18n.getHelperMessage('metadata-sections', 'name')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</label>
<b-input
v-model="form.name"
name="name"
@focus="clearErrors('name')"/>
</b-field>
<!-- Hook for extra Form options -->
<template
v-if="hasBeginLeftForm">
<form
id="form-metadataSection-begin-left"
class="form-hook-region"
v-html="getBeginLeftForm"/>
</template>
<b-field
:addons="false"
:type="formErrors['description'] != undefined ? 'is-danger' : ''"
:message="formErrors['description'] != undefined ? formErrors['description'] : ''">
<label class="label is-inline">
{{ $i18n.get('label_description') }}
<help-button
:title="$i18n.getHelperTitle('metadata-sections', 'description')"
:message="$i18n.getHelperMessage('metadata-sections', 'description')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</label>
<b-input
type="textarea"
name="description"
rows="3"
v-model="form.description"
@focus="clearErrors('description')"/>
</b-field>
<b-field
:addons="false"
:label="$i18n.getHelperTitle('metadata-sections', 'description_bellow_name')"
:type="formErrors['description_bellow_name'] != undefined ? 'is-danger' : ''"
:message="formErrors['description_bellow_name'] != undefined ? formErrors['description_bellow_name'] : ''">
&nbsp;
<b-switch
size="is-small"
@input="clearErrors('description_bellow_name')"
v-model="form.description_bellow_name"
true-value="yes"
false-value="no"
name="description_bellow_name">
<help-button
:title="$i18n.getHelperTitle('metadata-sections', 'description_bellow_name')"
:message="$i18n.getHelperMessage('metadata-sections', 'description_bellow_name')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</b-switch>
</b-field>
<b-field
v-if="form.id !== 'default_section'"
:addons="false"
:type="formErrors['status'] != undefined ? 'is-danger' : ''"
:message="formErrors['status'] != undefined ? formErrors['status'] : ''">
<label class="label is-inline">
{{ $i18n.get('label_status') }}
<help-button
:title="$i18n.getHelperTitle('metadata-sections', 'status')"
:message="$i18n.getHelperMessage('metadata-sections', 'status')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</label>
<div class="is-flex is-justify-content-space-between">
<b-radio
@focus="clearErrors('label_status')"
id="tainacan-select-status-publish"
name="status"
v-model="form.status"
native-value="publish">
<span class="icon has-text-gray3">
<i class="tainacan-icon tainacan-icon-public"/>
</span>
{{ $i18n.get('status_public') }}
</b-radio>
<b-radio
@focus="clearErrors('label_status')"
id="tainacan-select-status-private"
name="status"
v-model="form.status"
native-value="private">
<span class="icon has-text-gray3">
<i class="tainacan-icon tainacan-icon-private"/>
</span>
{{ $i18n.get('status_private') }}
</b-radio>
</div>
</b-field>
</div>
<div
v-if="form.id !== 'default_section'"
@click="hideConditionalSectionSettings = !hideConditionalSectionSettings;"
class="metadata-form-section">
<span class="icon">
<i
class="tainacan-icon"
:class="!hideConditionalSectionSettings ? 'tainacan-icon-arrowdown' : 'tainacan-icon-arrowright'" />
</span>
<strong>{{ $i18n.get('label_advanced_metadata_options') }}</strong>
<hr> <hr>
</div> </div>
<div class="tainacan-form">
<div class="options-columns">
<b-field
:addons="false"
:type="formErrors['name'] != undefined ? 'is-danger' : ''"
:message="formErrors['name'] != undefined ? formErrors['name'] : ''">
<label class="label is-inline">
{{ $i18n.get('label_name') }}
<span
class="required-metadata-section-asterisk"
:class="formErrors['name'] != undefined ? 'is-danger' : ''">*</span>
<help-button
:title="$i18n.getHelperTitle('metadata-sections', 'name')"
:message="$i18n.getHelperMessage('metadata-sections', 'name')" />
</label>
<b-input
v-model="form.name"
name="name"
@focus="clearErrors('name')" />
</b-field>
<!-- Hook for extra Form options -->
<template
v-if="hasBeginLeftForm">
<form
id="form-metadataSection-begin-left"
class="form-hook-region"
v-html="getBeginLeftForm" />
</template>
<b-field
:addons="false"
:type="formErrors['description'] != undefined ? 'is-danger' : ''"
:message="formErrors['description'] != undefined ? formErrors['description'] : ''">
<label class="label is-inline">
{{ $i18n.get('label_description') }}
<help-button
:title="$i18n.getHelperTitle('metadata-sections', 'description')"
:message="$i18n.getHelperMessage('metadata-sections', 'description')" />
</label>
<b-input
v-model="form.description"
type="textarea"
name="description"
rows="3"
@focus="clearErrors('description')" />
</b-field>
<transition
v-if="form.id !== 'default_section'"
name="filter-item">
<div
v-show="!hideConditionalSectionSettings"
class="options-columns">
<b-field <b-field
:addons="false" :addons="false"
:label="$i18n.getHelperTitle('metadata-sections', 'is_conditional_section')" :label="$i18n.getHelperTitle('metadata-sections', 'description_bellow_name')"
:type="formErrors['is_conditional_section'] != undefined ? 'is-danger' : ''" :type="formErrors['description_bellow_name'] != undefined ? 'is-danger' : ''"
:message="formErrors['is_conditional_section'] != undefined ? formErrors['is_conditional_section'] : ''"> :message="formErrors['description_bellow_name'] != undefined ? formErrors['description_bellow_name'] : ''">
&nbsp; &nbsp;
<b-switch <b-switch
v-model="form.description_bellow_name"
size="is-small" size="is-small"
@input="clearErrors('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="description_bellow_name"
<help-button @update:model-value="clearErrors('description_bellow_name')">
:title="$i18n.getHelperTitle('metadata-sections', 'is_conditional_section')" <help-button
:message="$i18n.getHelperMessage('metadata-sections', 'is_conditional_section')" :title="$i18n.getHelperTitle('metadata-sections', 'description_bellow_name')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" /> :message="$i18n.getHelperMessage('metadata-sections', 'description_bellow_name')" />
</b-switch> </b-switch>
</b-field> </b-field>
<div v-if="isConditionalSection && !availableConditionalMetadata.length">
<p style="break-inside: avoid;">{{ $i18n.get('info_create_select_metadatum_for_conditional_section') }}</p> <b-field
</div> v-if="form.id !== 'default_section'"
<transition name="filter-item"> :addons="false"
<b-field :type="formErrors['status'] != undefined ? 'is-danger' : ''"
v-if="isConditionalSection && availableConditionalMetadata.length" :message="formErrors['status'] != undefined ? formErrors['status'] : ''">
:addons="false" <label class="label is-inline">
:type="formErrors['conditional_section_rules'] != undefined ? 'is-danger' : ''" {{ $i18n.get('label_status') }}
:message="formErrors['conditional_section_rules'] != undefined ? formErrors['conditional_section_rules'] : ''"> <help-button
<label class="label is-inline"> :title="$i18n.getHelperTitle('metadata-sections', 'status')"
{{ $i18n.getHelperTitle('metadata-sections', 'conditional_section_rules') }} :message="$i18n.getHelperMessage('metadata-sections', 'status')" />
<help-button </label>
:title="$i18n.getHelperTitle('metadata-sections', 'conditional_section_rules')" <div class="is-flex is-justify-content-space-between">
:message="$i18n.getHelperMessage('metadata-sections', 'conditional_section_rules')" <b-radio
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" /> id="tainacan-select-status-publish"
</label> v-model="form.status"
<b-select name="status"
v-model="selectedConditionalMetadatumId" native-value="publish"
:placeholder="$i18n.get('label_select_metadatum')" @focus="clearErrors('label_status')">
@input="reloadConditionalValueComponent()"> <span class="icon has-text-gray3">
<option <i class="tainacan-icon tainacan-icon-public" />
v-for="conditionalMetadatum of availableConditionalMetadata" </span>
:key="conditionalMetadatum.id" {{ $i18n.get('status_public') }}
:value="conditionalMetadatum.id"> </b-radio>
{{ conditionalMetadatum.name }} <b-radio
</option> id="tainacan-select-status-private"
</b-select> v-model="form.status"
</b-field> name="status"
</transition> native-value="private"
<transition name="filter-item"> @focus="clearErrors('label_status')">
<b-field <span class="icon has-text-gray3">
v-if="isConditionalSection && selectedConditionalMetadatumId && selectedConditionalMetadatum && selectedConditionalMetadatum.name" <i class="tainacan-icon tainacan-icon-private" />
:addons="false" </span>
:type="formErrors['conditional_section_rules'] != undefined ? 'is-danger' : ''" {{ $i18n.get('status_private') }}
:message="formErrors['conditional_section_rules'] != undefined ? formErrors['conditional_section_rules'] : ''"> </b-radio>
<label class="label is-inline"> </div>
{{ selectedConditionalMetadatum.name }} </b-field>
</label>
<component
v-if="shouldUpdateConditionalValue"
:is="selectedConditionalMetadatum.metadata_type_object.component"
:forced-component-type="selectedConditionalMetadatum.metadata_type_object.component.includes('taxonomy') ? 'tainacan-taxonomy-tag-input' : ''"
:item-metadatum="{ metadatum: selectedConditionalMetadatum }"
:value="Array.isArray(selectedConditionalValue) ? selectedConditionalValue[0] : selectedConditionalValue"
:allow-new="false"
:maxtags="1"
@input="selectConditionalValue"
/>
</b-field>
</transition>
</div> </div>
</transition>
<div
v-if="form.id !== 'default_section'"
class="metadata-form-section"
@click="hideConditionalSectionSettings = !hideConditionalSectionSettings;">
<span class="icon">
<i
class="tainacan-icon"
:class="!hideConditionalSectionSettings ? 'tainacan-icon-arrowdown' : 'tainacan-icon-arrowright'" />
</span>
<strong>{{ $i18n.get('label_advanced_metadata_options') }}</strong>
<hr>
</div>
<transition
v-if="form.id !== 'default_section'"
name="filter-item">
<div
v-show="!hideConditionalSectionSettings"
class="options-columns">
<b-field
:addons="false"
:label="$i18n.getHelperTitle('metadata-sections', 'is_conditional_section')"
:type="formErrors['is_conditional_section'] != undefined ? 'is-danger' : ''"
:message="formErrors['is_conditional_section'] != undefined ? formErrors['is_conditional_section'] : ''">
&nbsp;
<b-switch
v-model="form.is_conditional_section"
size="is-small"
true-value="yes"
false-value="no"
name="is_conditional_section"
@update:model-value="clearErrors('is_conditional_section')">
<help-button
:title="$i18n.getHelperTitle('metadata-sections', 'is_conditional_section')"
:message="$i18n.getHelperMessage('metadata-sections', 'is_conditional_section')" />
</b-switch>
</b-field>
<div v-if="isConditionalSection && !availableConditionalMetadata.length">
<p style="break-inside: avoid;">
{{ $i18n.get('info_create_select_metadatum_for_conditional_section') }}
</p>
</div>
<transition name="filter-item">
<b-field
v-if="isConditionalSection && availableConditionalMetadata.length"
:addons="false"
:type="formErrors['conditional_section_rules'] != undefined ? 'is-danger' : ''"
:message="formErrors['conditional_section_rules'] != undefined ? formErrors['conditional_section_rules'] : ''">
<label class="label is-inline">
{{ $i18n.getHelperTitle('metadata-sections', 'conditional_section_rules') }}
<help-button
:title="$i18n.getHelperTitle('metadata-sections', 'conditional_section_rules')"
:message="$i18n.getHelperMessage('metadata-sections', 'conditional_section_rules')" />
</label>
<b-select
v-model="selectedConditionalMetadatumId"
:placeholder="$i18n.get('label_select_metadatum')"
@update:model-value="reloadConditionalValueComponent()">
<option
v-for="conditionalMetadatum of availableConditionalMetadata"
:key="conditionalMetadatum.id"
:value="conditionalMetadatum.id">
{{ conditionalMetadatum.name }}
</option>
</b-select>
</b-field>
</transition>
<transition name="filter-item">
<b-field
v-if="isConditionalSection && selectedConditionalMetadatumId && selectedConditionalMetadatum && selectedConditionalMetadatum.name"
:addons="false"
:type="formErrors['conditional_section_rules'] != undefined ? 'is-danger' : ''"
:message="formErrors['conditional_section_rules'] != undefined ? formErrors['conditional_section_rules'] : ''">
<label class="label is-inline">
{{ selectedConditionalMetadatum.name }}
</label>
<component
:is="selectedConditionalMetadatum.metadata_type_object.component"
v-if="shouldUpdateConditionalValue"
:forced-component-type="selectedConditionalMetadatum.metadata_type_object.component.includes('taxonomy') ? 'tainacan-taxonomy-tag-input' : ''"
:item-metadatum="{ metadatum: selectedConditionalMetadatum }"
:value="Array.isArray(selectedConditionalValue) ? selectedConditionalValue[0] : selectedConditionalValue"
:allow-new="false"
:maxtags="1"
@input="selectConditionalValue"
/>
</b-field>
</transition>
</div>
</transition>
<!-- Hook for extra Form options --> <!-- Hook for extra Form options -->
<template v-if="hasEndLeftForm" > <template v-if="hasEndLeftForm">
<form <form
id="form-metadataSection-end-left" id="form-metadataSection-end-left"
class="form-hook-region" class="form-hook-region"
v-html="getEndLeftForm"/> v-html="getEndLeftForm" />
</template> </template>
</div>
</div> </div>
</div> <div class="field is-grouped form-submit">
<div class="field is-grouped form-submit"> <div class="control">
<div class="control"> <button
<button type="button"
type="button" class="button is-outlined"
class="button is-outlined" @click.prevent="cancelEdition()">
@click.prevent="cancelEdition()" {{ $i18n.get('cancel') }}
slot="trigger">{{ $i18n.get('cancel') }} </button>
</button> </div>
<p class="help is-danger">
{{ formErrorMessage }}
</p>
<div class="control">
<b-button
:loading="isUpdating"
class="button is-success"
native-type="submit">
{{ $i18n.get('save') }}
</b-button>
</div>
</div> </div>
<p class="help is-danger">{{ formErrorMessage }}</p> </form>
<div class="control">
<b-button
:loading="isUpdating"
class="button is-success"
native-type="submit">
{{ $i18n.get('save') }}
</b-button>
</div>
</div>
</form>
</template> </template>
<script> <script>
import { nextTick, defineAsyncComponent } from 'vue';
import { mapActions, mapGetters } from 'vuex'; import { mapActions, mapGetters } from 'vuex';
import { formHooks } from "../../js/mixins"; import { formHooks } from "../../js/mixins";
export default { export default {
name: 'MetadataSectionEditionForm', name: 'MetadataSectionEditionForm',
components:{
TainacanSelectbox: defineAsyncComponent(() => import('../metadata-types/selectbox/TainacanSelectbox.vue')),
TainacanTaxonomy: defineAsyncComponent(() => import('../metadata-types/taxonomy/TainacanTaxonomy.vue')),
},
mixins: [ formHooks ], mixins: [ formHooks ],
props: { props: {
index: '', index: '',
@ -265,6 +268,10 @@
collectionId: '', collectionId: '',
isInsideImporterFlow: false, isInsideImporterFlow: false,
}, },
emits: [
'on-edition-finished',
'on-edition-canceled'
],
data() { data() {
return { return {
form: {}, form: {},
@ -317,7 +324,7 @@
}, },
mounted() { mounted() {
// Fills hook forms with it's real values // Fills hook forms with it's real values
this.$nextTick() nextTick()
.then(() => { .then(() => {
this.updateExtraFormData(this.form); this.updateExtraFormData(this.form);
}); });
@ -348,7 +355,7 @@
this.isUpdating = false; this.isUpdating = false;
this.closedByForm = true; this.closedByForm = true;
this.$emit('onEditionFinished'); this.$emit('on-edition-finished');
}) })
.catch((errors) => { .catch((errors) => {
this.isUpdating = false; this.isUpdating = false;
@ -367,7 +374,7 @@
}, },
cancelEdition() { cancelEdition() {
this.closedByForm = true; this.closedByForm = true;
this.$emit('onEditionCanceled'); this.$emit('on-edition-canceled');
}, },
selectConditionalValue(selected) { selectConditionalValue(selected) {
const selectedValues = Array.isArray(selected) ? selected : [ selected ]; const selectedValues = Array.isArray(selected) ? selected : [ selected ];
@ -408,7 +415,7 @@
.field > .field:not(:last-child) { .field > .field:not(:last-child) {
margin-bottom: 0em; margin-bottom: 0em;
} }
/deep/ .field { :deep(.field) {
-webkit-column-break-inside: avoid; -webkit-column-break-inside: avoid;
page-break-inside: avoid; page-break-inside: avoid;
break-inside: avoid; break-inside: avoid;
@ -427,7 +434,7 @@
.tainacan-form .field:not(:last-child) { .tainacan-form .field:not(:last-child) {
margin-bottom: 1em; margin-bottom: 1em;
} }
.tainacan-form /deep/ .control-label { .tainacan-form :deep(.control-label) {
white-space: normal; white-space: normal;
} }
.metadata-form-section { .metadata-form-section {
@ -478,22 +485,23 @@
} }
} }
} }
:deep(.is-special-hidden-for-mobile) {
/deep/ .is-special-hidden-for-mobile, &,
/deep/ .is-special-hidden-for-mobile:focus, &:focus,
/deep/ .is-special-hidden-for-mobile:focus-visible { &:focus-visible {
opacity: 0; opacity: 0;
width: 0; width: 0;
height: 0 !important; height: 0 !important;
min-height: 0; min-height: 0;
min-width: 0; min-width: 0;
padding: 0 !important; padding: 0 !important;
line-height: 0px !important; line-height: 0px !important;
border: none !important; border: none !important;
border-color: transparent !important; border-color: transparent !important;
border-width: 0px !important; border-width: 0px !important;
font-size: 0px !important; font-size: 0px !important;
display: block !important; display: block !important;
}
} }
.form-submit { .form-submit {
background-color: var(--tainacan-gray1); background-color: var(--tainacan-gray1);

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

@ -1,295 +1,296 @@
<template> <template>
<form <form
id="metadatumEditForm" id="metadatumEditForm"
@submit.prevent="saveEdition(form)" autofocus="true"
autofocus="true" tabindex="-1"
tabindex="-1" role="dialog"
role="dialog" aria-modal
aria-modal> @submit.prevent="saveEdition(form)">
<div <div
v-if="form && Object.keys(form).length" v-if="form && Object.keys(form).length"
class="tainacan-modal-content"> class="tainacan-modal-content">
<div class="tainacan-modal-title"> <div class="tainacan-modal-title">
<h2 v-if="form.name"> <h2 v-if="form.name">
{{ $i18n.get('instruction_configure_the_metadatum') }}&nbsp;<em>{{ form.name }}</em> {{ $i18n.get('instruction_configure_the_metadatum') }}&nbsp;<em>{{ form.name }}</em>
</h2> </h2>
<h2 v-else> <h2 v-else>
{{ $i18n.get('instruction_configure_new_metadatum') }} {{ $i18n.get('instruction_configure_new_metadatum') }}
</h2> </h2>
<!-- <a <!-- <a
class="back-link" class="back-link"
@click="onEditionCanceled()"> @click="onEditionCanceled()">
{{ $i18n.get('back') }} {{ $i18n.get('back') }}
</a> --> </a> -->
<hr> <hr>
</div> </div>
<div <div
class="tainacan-form" class="tainacan-form"
:class="'tainacan-metadatum-edition-form--type-' + form.metadata_type_object.component"> :class="'tainacan-metadatum-edition-form--type-' + form.metadata_type_object.component">
<div class="options-columns"> <div class="options-columns">
<section> <section>
<b-field
:addons="false"
:type="formErrors['name'] != undefined ? 'is-danger' : ''"
:message="formErrors['name'] != undefined ? formErrors['name'] : ''">
<label class="label is-inline">
{{ $i18n.get('label_name') }}
<span
class="required-metadatum-asterisk"
:class="formErrors['name'] != undefined ? 'is-danger' : ''">*</span>
<help-button
:title="$i18n.getHelperTitle('metadata', 'name')"
:message="$i18n.getHelperMessage('metadata', 'name')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</label>
<b-input
v-model="form.name"
name="name"
@focus="clearErrors('name')"/>
</b-field>
<!-- Hook for extra Form options -->
<template
v-if="hasBeginLeftForm">
<form
id="form-metadatum-begin-left"
class="form-hook-region"
v-html="getBeginLeftForm"/>
</template>
<b-field
:addons="false"
:type="formErrors['description'] != undefined ? 'is-danger' : ''"
:message="formErrors['description'] != undefined ? formErrors['description'] : ''">
<label class="label is-inline">
{{ $i18n.get('label_description') }}
<help-button
:title="$i18n.getHelperTitle('metadata', 'description')"
:message="$i18n.getHelperMessage('metadata', 'description')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</label>
<b-input
type="textarea"
name="description"
rows="3"
v-model="form.description"
@focus="clearErrors('description')"/>
</b-field>
<b-field
:addons="false"
:label="$i18n.getHelperTitle('metadata', 'description_bellow_name')"
:type="formErrors['description_bellow_name'] != undefined ? 'is-danger' : ''"
:message="formErrors['description_bellow_name'] != undefined ? formErrors['description_bellow_name'] : ''">
&nbsp;
<b-switch
size="is-small"
@input="clearErrors('description_bellow_name')"
v-model="form.description_bellow_name"
true-value="yes"
false-value="no"
name="description_bellow_name">
<help-button
:title="$i18n.getHelperTitle('metadata', 'description_bellow_name')"
:message="$i18n.getHelperMessage('metadata', 'description_bellow_name')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</b-switch>
</b-field>
<b-field
v-if="form.metadata_type_object.component != 'tainacan-compound'"
:addons="false"
:type="formErrors['placeholder'] != undefined ? 'is-danger' : ''"
:message="formErrors['placeholder'] != undefined ? formErrors['placeholder'] : ''">
<label class="label is-inline">
{{ $i18n.getHelperTitle('metadata', 'placeholder') }}
<help-button
:title="$i18n.getHelperTitle('metadata', 'placeholder')"
:message="$i18n.getHelperMessage('metadata', 'placeholder')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</label>
<b-input
v-model="form.placeholder"
name="placeholder"
@focus="clearErrors('placeholder')"/>
</b-field>
<b-field
v-if="form.parent == 0"
:addons="false"
:type="formErrors['status'] != undefined ? 'is-danger' : ''"
:message="formErrors['status'] != undefined ? formErrors['status'] : ''">
<label class="label is-inline">
{{ $i18n.get('label_status') }}
<help-button
:title="$i18n.getHelperTitle('metadata', 'status')"
:message="$i18n.getHelperMessage('metadata', 'status')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</label>
<div class="is-flex is-justify-content-space-between">
<b-radio
@focus="clearErrors('label_status')"
id="tainacan-select-status-publish"
name="status"
v-model="form.status"
native-value="publish">
<span class="icon has-text-gray3">
<i class="tainacan-icon tainacan-icon-public"/>
</span>
{{ $i18n.get('status_public') }}
</b-radio>
<b-radio
@focus="clearErrors('label_status')"
id="tainacan-select-status-private"
name="status"
v-model="form.status"
native-value="private">
<span class="icon has-text-gray3">
<i class="tainacan-icon tainacan-icon-private"/>
</span>
{{ $i18n.get('status_private') }}
</b-radio>
</div>
</b-field>
<!-- Display on listing -->
<b-field
v-if="form.parent == 0"
:type="formErrors['display'] != undefined ? 'is-danger' : ''"
:message="formErrors['display'] != undefined ? formErrors['display'] : ''"
:addons="false">
<label class="label is-inline">
{{ $i18n.get('label_display') }}
<help-button
:title="$i18n.getHelperTitle('metadata', 'display')"
:message="$i18n.getHelperMessage('metadata', 'display')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</label>
<b-select
expanded
v-model="form.display"
@input="clearErrors('display')">
<option value="yes">
{{ $i18n.get('label_display_default') }}
</option>
<option value="no">
{{ $i18n.get('label_not_display') }}
</option>
<option value="never">
{{ $i18n.get('label_display_never') }}
</option>
</b-select>
</b-field>
<b-field
:addons="false">
<label class="label is-inline">{{ $i18n.get('label_insert_options') }}</label>
<b-field <b-field
v-if="form.metadata_type_object.component != 'tainacan-compound' && (form.parent == 0 || (form.parent != 0 && !isParentMultiple))" :addons="false"
:type="formErrors['required'] != undefined ? 'is-danger' : ''" :type="formErrors['name'] != undefined ? 'is-danger' : ''"
:message="formErrors['required'] != undefined ? formErrors['required'] : ''"> :message="formErrors['name'] != undefined ? formErrors['name'] : ''">
<b-checkbox <label class="label is-inline">
@input="clearErrors('required')" {{ $i18n.get('label_name') }}
v-model="form.required" <span
class="required-metadatum-asterisk"
:class="formErrors['name'] != undefined ? 'is-danger' : ''">*</span>
<help-button
:title="$i18n.getHelperTitle('metadata', 'name')"
:message="$i18n.getHelperMessage('metadata', 'name')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</label>
<b-input
v-model="form.name"
name="name"
@focus="clearErrors('name')" />
</b-field>
<!-- Hook for extra Form options -->
<template
v-if="hasBeginLeftForm">
<form
id="form-metadatum-begin-left"
class="form-hook-region"
v-html="getBeginLeftForm" />
</template>
<b-field
:addons="false"
:type="formErrors['description'] != undefined ? 'is-danger' : ''"
:message="formErrors['description'] != undefined ? formErrors['description'] : ''">
<label class="label is-inline">
{{ $i18n.get('label_description') }}
<help-button
:title="$i18n.getHelperTitle('metadata', 'description')"
:message="$i18n.getHelperMessage('metadata', 'description')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</label>
<b-input
v-model="form.description"
type="textarea"
name="description"
rows="3"
@focus="clearErrors('description')" />
</b-field>
<b-field
:addons="false"
:label="$i18n.getHelperTitle('metadata', 'description_bellow_name')"
:type="formErrors['description_bellow_name'] != undefined ? 'is-danger' : ''"
:message="formErrors['description_bellow_name'] != undefined ? formErrors['description_bellow_name'] : ''">
&nbsp;
<b-switch
v-model="form.description_bellow_name"
size="is-small"
true-value="yes" true-value="yes"
false-value="no" false-value="no"
class="is-inline-block" name="description_bellow_name"
name="required"> @update:model-value="clearErrors('description_bellow_name')">
{{ $i18n.get('label_required') }}
<help-button <help-button
:title="$i18n.getHelperTitle('metadata', 'required')" :title="$i18n.getHelperTitle('metadata', 'description_bellow_name')"
:message="$i18n.getHelperMessage('metadata', 'required')" :message="$i18n.getHelperMessage('metadata', 'description_bellow_name')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" /> :extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</b-checkbox> </b-switch>
</b-field> </b-field>
<b-field <b-field
v-if="form.metadata_type_object.component != 'tainacan-compound'" v-if="form.metadata_type_object.component != 'tainacan-compound'"
:type="formErrors['collection_key'] != undefined ? 'is-danger' : ''" :addons="false"
:message="formErrors['collection_key'] != undefined ? formErrors['collection_key'] : ''"> :type="formErrors['placeholder'] != undefined ? 'is-danger' : ''"
<b-checkbox :message="formErrors['placeholder'] != undefined ? formErrors['placeholder'] : ''">
@input="clearErrors('collection_key')" <label class="label is-inline">
v-model="form.collection_key" {{ $i18n.getHelperTitle('metadata', 'placeholder') }}
true-value="yes"
false-value="no"
class="is-inline-block"
name="collection_key">
{{ $i18n.get('label_unique_value') }}
<help-button <help-button
:title="$i18n.getHelperTitle('metadata', 'collection_key')" :title="$i18n.getHelperTitle('metadata', 'placeholder')"
:message="$i18n.getHelperMessage('metadata', 'collection_key')" :message="$i18n.getHelperMessage('metadata', 'placeholder')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" /> :extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</b-checkbox> </label>
<b-input
v-model="form.placeholder"
name="placeholder"
@focus="clearErrors('placeholder')" />
</b-field>
<b-field
v-if="form.parent == 0"
:addons="false"
:type="formErrors['status'] != undefined ? 'is-danger' : ''"
:message="formErrors['status'] != undefined ? formErrors['status'] : ''">
<label class="label is-inline">
{{ $i18n.get('label_status') }}
<help-button
:title="$i18n.getHelperTitle('metadata', 'status')"
:message="$i18n.getHelperMessage('metadata', 'status')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</label>
<div class="is-flex is-justify-content-space-between">
<b-radio
id="tainacan-select-status-publish"
v-model="form.status"
name="status"
native-value="publish"
@focus="clearErrors('label_status')">
<span class="icon has-text-gray3">
<i class="tainacan-icon tainacan-icon-public" />
</span>
{{ $i18n.get('status_public') }}
</b-radio>
<b-radio
id="tainacan-select-status-private"
v-model="form.status"
name="status"
native-value="private"
@focus="clearErrors('label_status')">
<span class="icon has-text-gray3">
<i class="tainacan-icon tainacan-icon-private" />
</span>
{{ $i18n.get('status_private') }}
</b-radio>
</div>
</b-field>
<!-- Display on listing -->
<b-field
v-if="form.parent == 0"
:type="formErrors['display'] != undefined ? 'is-danger' : ''"
:message="formErrors['display'] != undefined ? formErrors['display'] : ''"
:addons="false">
<label class="label is-inline">
{{ $i18n.get('label_display') }}
<help-button
:title="$i18n.getHelperTitle('metadata', 'display')"
:message="$i18n.getHelperMessage('metadata', 'display')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</label>
<b-select
v-model="form.display"
expanded
@update:model-value="clearErrors('display')">
<option value="yes">
{{ $i18n.get('label_display_default') }}
</option>
<option value="no">
{{ $i18n.get('label_not_display') }}
</option>
<option value="never">
{{ $i18n.get('label_display_never') }}
</option>
</b-select>
</b-field>
<b-field
:addons="false">
<label class="label is-inline">{{ $i18n.get('label_insert_options') }}</label>
<b-field
v-if="form.metadata_type_object.component != 'tainacan-compound' && (form.parent == 0 || (form.parent != 0 && !isParentMultiple))"
:type="formErrors['required'] != undefined ? 'is-danger' : ''"
:message="formErrors['required'] != undefined ? formErrors['required'] : ''">
<b-checkbox
v-model="form.required"
true-value="yes"
false-value="no"
class="is-inline-block"
name="required"
@update:model-value="clearErrors('required')">
{{ $i18n.get('label_required') }}
<help-button
:title="$i18n.getHelperTitle('metadata', 'required')"
:message="$i18n.getHelperMessage('metadata', 'required')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</b-checkbox>
</b-field>
<b-field
v-if="form.metadata_type_object.component != 'tainacan-compound'"
:type="formErrors['collection_key'] != undefined ? 'is-danger' : ''"
:message="formErrors['collection_key'] != undefined ? formErrors['collection_key'] : ''">
<b-checkbox
v-model="form.collection_key"
true-value="yes"
false-value="no"
class="is-inline-block"
name="collection_key"
@update:model-value="clearErrors('collection_key')">
{{ $i18n.get('label_unique_value') }}
<help-button
:title="$i18n.getHelperTitle('metadata', 'collection_key')"
:message="$i18n.getHelperMessage('metadata', 'collection_key')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</b-checkbox>
</b-field>
<b-field
v-if="!originalMetadatum.metadata_type_object.core && form.parent == 0"
:type="formErrors['multiple'] != undefined ? 'is-danger' : ''"
:message="formErrors['multiple'] != undefined ? formErrors['multiple'] : ''">
<b-checkbox
v-model="form.multiple"
true-value="yes"
false-value="no"
class="is-inline-block"
name="multiple"
@update:model-value="clearErrors('multiple')">
{{ $i18n.get('label_allow_multiple') }}
<help-button
:title="$i18n.getHelperTitle('metadata', 'multiple')"
:message="$i18n.getHelperMessage('metadata', 'multiple')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</b-checkbox>
</b-field>
</b-field>
<b-field
v-if="!originalMetadatum.metadata_type_object.core && form.parent == 0"
:addons="false"
:label="$i18n.get('label_limit_max_values')">
&nbsp;
<b-switch
v-model="showCardinalityOptions"
size="is-small"
:disabled="form.multiple != 'yes'" />
</b-field> </b-field>
<b-field <b-field
v-if="!originalMetadatum.metadata_type_object.core && form.parent == 0" v-if="!originalMetadatum.metadata_type_object.core && form.parent == 0"
:type="formErrors['multiple'] != undefined ? 'is-danger' : ''" :type="formErrors['cardinality'] != undefined ? 'is-danger' : ''"
:message="formErrors['multiple'] != undefined ? formErrors['multiple'] : ''"> :message="formErrors['cardinality'] != undefined ? formErrors['cardinality'] : ''"
:addons="false">
<label class="label is-inline">
{{ $i18n.getHelperTitle('metadata', 'cardinality') }}
<help-button
:title="$i18n.getHelperTitle('metadata', 'cardinality')"
:message="$i18n.getHelperMessage('metadata', 'cardinality')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</label>
<b-numberinput
:disabled="!showCardinalityOptions || form.multiple != 'yes'"
name="cardinality"
step="1"
min="2"
:model-value="form.cardinality ? Number(form.cardinality) : 2"
@update:model-value="(newCardinalty) => form.cardinality = newCardinalty" />
</b-field>
<b-field v-if="!isRepositoryLevel && isInsideImporterFlow">
<b-checkbox <b-checkbox
@input="clearErrors('multiple')" v-model="form.repository_level"
v-model="form.multiple" class="is-inline-block"
name="repository_level"
true-value="yes" true-value="yes"
false-value="no" false-value="no"
class="is-inline-block" @update:model-value="clearErrors('repository_level')">
name="multiple"> {{ $i18n.get('label_repository_metadata') }}
{{ $i18n.get('label_allow_multiple') }}
<help-button <help-button
:title="$i18n.getHelperTitle('metadata', 'multiple')" :title="$i18n.getHelperTitle('metadata', 'repository_level')"
:message="$i18n.getHelperMessage('metadata', 'multiple')" :message="$i18n.getHelperMessage('metadata', 'repository_level')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" /> :extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</b-checkbox> </b-checkbox>
</b-field> </b-field>
</b-field>
<b-field
v-if="!originalMetadatum.metadata_type_object.core && form.parent == 0"
:addons="false"
:label="$i18n.get('label_limit_max_values')">
&nbsp;
<b-switch
size="is-small"
:disabled="form.multiple != 'yes'"
v-model="showCardinalityOptions" />
</b-field>
<b-field
v-if="!originalMetadatum.metadata_type_object.core && form.parent == 0"
:type="formErrors['cardinality'] != undefined ? 'is-danger' : ''"
:message="formErrors['cardinality'] != undefined ? formErrors['cardinality'] : ''"
:addons="false">
<label class="label is-inline">
{{ $i18n.getHelperTitle('metadata', 'cardinality') }}
<help-button
:title="$i18n.getHelperTitle('metadata', 'cardinality')"
:message="$i18n.getHelperMessage('metadata', 'cardinality')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</label>
<b-numberinput
:disabled="!showCardinalityOptions || form.multiple != 'yes'"
name="cardinality"
step="1"
min="2"
v-model="form.cardinality"/>
</b-field>
<b-field v-if="!isRepositoryLevel && isInsideImporterFlow">
<b-checkbox
class="is-inline-block"
v-model="form.repository_level"
@input="clearErrors('repository_level')"
name="repository_level"
true-value="yes"
false-value="no">
{{ $i18n.get('label_repository_metadata') }}
<help-button
:title="$i18n.getHelperTitle('metadata', 'repository_level')"
:message="$i18n.getHelperMessage('metadata', 'repository_level')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</b-checkbox>
</b-field>
</section> </section>
@ -308,95 +309,119 @@
<hr> <hr>
</div> </div>
<transition name="filter-item"> <transition name="filter-item">
<div
v-show="!hideMetadataTypeOptions"
class="options-columns">
<component
:is="form.metadata_type_object.form_component"
v-if="(form.metadata_type_object && form.metadata_type_object.form_component) || form.edit_form != ''"
v-model:value="form.metadata_type_options"
:errors="formErrors['metadata_type_options']"
:metadatum="form" />
<div
v-else
v-html="form.edit_form" />
<!-- Hook for extra Form options -->
<template v-if="hasEndLeftForm">
<form
id="form-metadatum-end-left"
class="form-hook-region"
v-html="getEndLeftForm" />
</template>
</div>
</transition>
<div <div
v-show="!hideMetadataTypeOptions" class="metadata-form-section"
class="options-columns"> @click="showAdvancedOptions = !showAdvancedOptions;">
<component <span class="icon">
:errors="formErrors['metadata_type_options']" <i
v-if="(form.metadata_type_object && form.metadata_type_object.form_component) || form.edit_form != ''" class="tainacan-icon"
:is="form.metadata_type_object.form_component" :class="showAdvancedOptions ? 'tainacan-icon-arrowdown' : 'tainacan-icon-arrowright'" />
:metadatum="form" </span>
v-model="form.metadata_type_options"/> <strong>{{ $i18n.get('label_advanced_metadata_options') }}</strong>
<div <hr>
v-html="form.edit_form"
v-else/>
<!-- Hook for extra Form options -->
<template v-if="hasEndLeftForm" >
<form
id="form-metadatum-end-left"
class="form-hook-region"
v-html="getEndLeftForm"/>
</template>
</div> </div>
</transition>
<div
@click="showAdvancedOptions = !showAdvancedOptions;"
class="metadata-form-section">
<span class="icon">
<i
class="tainacan-icon"
:class="showAdvancedOptions ? 'tainacan-icon-arrowdown' : 'tainacan-icon-arrowright'" />
</span>
<strong>{{ $i18n.get('label_advanced_metadata_options') }}</strong>
<hr>
</div>
<transition name="filter-item"> <transition name="filter-item">
<div <div
v-if="showAdvancedOptions" v-if="showAdvancedOptions"
class="options-columns"> class="options-columns">
<section> <section>
<b-field :addons="false"> <b-field :addons="false">
<label class="label is-inline"> <label class="label is-inline">
{{ $i18n.get('label_semantic_uri') }} {{ $i18n.get('label_semantic_uri') }}
<help-button <help-button
:title="$i18n.getHelperTitle('metadata', 'semantic_uri')" :title="$i18n.getHelperTitle('metadata', 'semantic_uri')"
:message="$i18n.getHelperMessage('metadata', 'semantic_uri')" :message="$i18n.getHelperMessage('metadata', 'semantic_uri')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" /> :extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</label> </label>
<b-input <b-input
v-model="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')" />
</b-field> </b-field>
</section> </section>
</div> </div>
</transition> </transition>
</div>
</div> </div>
</div> <div class="field is-grouped form-submit">
<div class="field is-grouped form-submit"> <div class="control">
<div class="control"> <button
<button type="button"
type="button" class="button is-outlined"
class="button is-outlined" @click.prevent="cancelEdition()">
@click.prevent="cancelEdition()" {{ $i18n.get('cancel') }}
slot="trigger">{{ $i18n.get('cancel') }} </button>
</button> </div>
<p class="help is-danger">
{{ formErrorMessage }}
</p>
<div class="control">
<b-button
:loading="isUpdating"
class="button is-success"
native-type="submit">
{{ $i18n.get('save') }}
</b-button>
</div>
</div> </div>
<p class="help is-danger">{{ formErrorMessage }}</p> </form>
<div class="control">
<b-button
:loading="isUpdating"
class="button is-success"
native-type="submit">
{{ $i18n.get('save') }}
</b-button>
</div>
</div>
</form>
</template> </template>
<script> <script>
import { nextTick } from 'vue';
import {mapActions} from 'vuex'; import {mapActions} from 'vuex';
import { formHooks } from "../../js/mixins"; import { formHooks } from "../../js/mixins";
import FormText from '../metadata-types/text/FormText.vue';
import FormTextarea from '../metadata-types/textarea/FormTextarea.vue';
import FormRelationship from '../metadata-types/relationship/FormRelationship.vue';
import FormTaxonomy from '../metadata-types/taxonomy/FormTaxonomy.vue';
import FormSelectbox from '../metadata-types/selectbox/FormSelectbox.vue';
import FormNumeric from '../metadata-types/numeric/FormNumeric.vue';
import FormUser from '../metadata-types/user/FormUser.vue';
import FormGeoCoordinate from '../metadata-types/geocoordinate/FormGeoCoordinate.vue';
import FormURL from '../metadata-types/url/FormURL.vue';
export default { export default {
name: 'MetadatumEditionForm', name: 'MetadatumEditionForm',
components: {
'tainacan-form-text': FormText,
'tainacan-form-textarea': FormTextarea,
'tainacan-form-relationship': FormRelationship,
'tainacan-form-taxonomy': FormTaxonomy,
'tainacan-form-selectbox': FormSelectbox,
'tainacan-form-numeric': FormNumeric,
'tainacan-form-user': FormUser,
'tainacan-form-geocoordinate': FormGeoCoordinate,
'tainacan-form-url': FormURL
},
mixins: [ formHooks ], mixins: [ formHooks ],
props: { props: {
index: '', index: '',
@ -406,6 +431,11 @@
isParentMultiple: false, isParentMultiple: false,
isInsideImporterFlow: false isInsideImporterFlow: false
}, },
emits: [
'on-edition-finished',
'on-edition-canceled',
'on-error-found'
],
data() { data() {
return { return {
form: {}, form: {},
@ -421,7 +451,7 @@
}, },
watch: { watch: {
showCardinalityOptions() { showCardinalityOptions() {
this.form.cardinality = !this.showCardinalityOptions ? 1 : Number(this.form.cardinality); this.form.cardinality = !this.showCardinalityOptions ? '' : Number(this.form.cardinality);
} }
}, },
created() { created() {
@ -438,7 +468,7 @@
}, },
mounted() { mounted() {
// Fills hook forms with it's real values // Fills hook forms with it's real values
this.$nextTick() nextTick()
.then(() => { .then(() => {
this.updateExtraFormData(this.form); this.updateExtraFormData(this.form);
}); });
@ -469,7 +499,7 @@
this.isUpdating = false; this.isUpdating = false;
this.closedByForm = true; this.closedByForm = true;
this.$emit('onEditionFinished'); this.$emit('on-edition-finished');
}) })
.catch((errors) => { .catch((errors) => {
this.isUpdating = false; this.isUpdating = false;
@ -514,7 +544,7 @@
this.isUpdating = false; this.isUpdating = false;
this.closedByForm = true; this.closedByForm = true;
this.$emit('onEditionFinished'); this.$emit('on-edition-finished');
}) })
.catch((errors) => { .catch((errors) => {
this.isUpdating = false; this.isUpdating = false;
@ -524,7 +554,7 @@
this.formErrors[attribute] = error[attribute]; this.formErrors[attribute] = error[attribute];
} }
this.formErrorMessage = errors.error_message; this.formErrorMessage = errors.error_message;
this.$emit('onErrorFound'); this.$emit('on-error-found');
this.form.formErrors = this.formErrors; this.form.formErrors = this.formErrors;
this.form.formErrorMessage = this.formErrorMessage; this.form.formErrorMessage = this.formErrorMessage;
@ -536,7 +566,7 @@
}, },
cancelEdition() { cancelEdition() {
this.closedByForm = true; this.closedByForm = true;
this.$emit('onEditionCanceled'); this.$emit('on-edition-canceled');
}, },
} }
} }
@ -568,7 +598,7 @@
.field > .field:not(:last-child) { .field > .field:not(:last-child) {
margin-bottom: 0em; margin-bottom: 0em;
} }
/deep/ .field { :deep(.field) {
-webkit-column-break-inside: avoid; -webkit-column-break-inside: avoid;
page-break-inside: avoid; page-break-inside: avoid;
break-inside: avoid; break-inside: avoid;
@ -587,7 +617,7 @@
.tainacan-form .field:not(:last-child) { .tainacan-form .field:not(:last-child) {
margin-bottom: 1em; margin-bottom: 1em;
} }
.tainacan-form /deep/ .control-label { .tainacan-form :deep(.control-label) {
white-space: normal; white-space: normal;
} }
.metadata-form-section { .metadata-form-section {

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

@ -5,7 +5,7 @@
:bread-crumb-items="[ :bread-crumb-items="[
{ path: $routerHelper.getTaxonomiesPath(), label: $i18n.get('taxonomies') }, { path: $routerHelper.getTaxonomiesPath(), label: $i18n.get('taxonomies') },
{ path: '', label: (taxonomy != null && taxonomy.name != undefined) ? taxonomy.name : $i18n.get('taxonomy') } { path: '', label: (taxonomy != null && taxonomy.name != undefined) ? taxonomy.name : $i18n.get('taxonomy') }
]"/> ]" />
<form <form
v-if="taxonomy != null && taxonomy != undefined && (($route.name == 'TaxonomyCreationForm' && $userCaps.hasCapability('tnc_rep_edit_taxonomies')) || ($route.name == 'TaxonomyEditionForm' && taxonomy.current_user_can_edit))" v-if="taxonomy != null && taxonomy != undefined && (($route.name == 'TaxonomyCreationForm' && $userCaps.hasCapability('tnc_rep_edit_taxonomies')) || ($route.name == 'TaxonomyEditionForm' && taxonomy.current_user_can_edit))"
@ -24,22 +24,22 @@
<help-button <help-button
:title="$i18n.getHelperTitle('taxonomies', 'name')" :title="$i18n.getHelperTitle('taxonomies', 'name')"
:message="$i18n.getHelperMessage('taxonomies', 'name')" :message="$i18n.getHelperMessage('taxonomies', 'name')"
extra-classes="tainacan-repository-tooltip"/> extra-classes="tainacan-repository-tooltip" />
<b-input <b-input
id="tainacan-text-name" id="tainacan-text-name"
v-model="form.name" v-model="form.name"
@focus="clearErrors('name')"
@blur="updateSlug()"
:disabled="isUpdatingSlug" :disabled="isUpdatingSlug"
:loading="isUpdatingSlug"/> :loading="isUpdatingSlug"
@focus="clearErrors('name')"
@blur="updateSlug()" />
</b-field> </b-field>
<!-- Hook for extra Form options --> <!-- Hook for extra Form options -->
<template v-if="hasBeginLeftForm"> <template v-if="hasBeginLeftForm">
<form <form
id="form-taxonomy-begin-left" id="form-taxonomy-begin-left"
class="form-hook-region" class="form-hook-region"
v-html="getBeginLeftForm"/> v-html="getBeginLeftForm" />
</template> </template>
<!-- Description -------------------------------- --> <!-- Description -------------------------------- -->
@ -51,47 +51,47 @@
<help-button <help-button
:title="$i18n.getHelperTitle('taxonomies', 'description')" :title="$i18n.getHelperTitle('taxonomies', 'description')"
:message="$i18n.getHelperMessage('taxonomies', 'description')" :message="$i18n.getHelperMessage('taxonomies', 'description')"
extra-classes="tainacan-repository-tooltip"/> extra-classes="tainacan-repository-tooltip" />
<b-input <b-input
id="tainacan-text-description" id="tainacan-text-description"
v-model="form.description"
type="textarea" type="textarea"
rows="3" rows="3"
v-model="form.description" @focus="clearErrors('description')" />
@focus="clearErrors('description')"/>
</b-field> </b-field>
<!-- Allow Insert --> <!-- Allow Insert -->
<b-field :addons="false"> <b-field :addons="false">
<label class="label is-inline"> <label class="label is-inline">
{{ $i18n.get('label_taxonomy_allow_new_terms') }} {{ $i18n.get('label_taxonomy_allow_new_terms') }}
<b-switch <b-switch
id="tainacan-checkbox-allow-insert" id="tainacan-checkbox-allow-insert"
size="is-small" v-model="form.allowInsert"
v-model="form.allowInsert" size="is-small"
true-value="yes" true-value="yes"
false-value="no" /> false-value="no" />
<help-button <help-button
:title="$i18n.getHelperTitle('taxonomies', 'allow_insert')" :title="$i18n.getHelperTitle('taxonomies', 'allow_insert')"
:message="$i18n.getHelperMessage('taxonomies', 'allow_insert')" :message="$i18n.getHelperMessage('taxonomies', 'allow_insert')"
extra-classes="tainacan-repository-tooltip"/> extra-classes="tainacan-repository-tooltip" />
</label> </label>
</b-field> </b-field>
<!-- Allow Insert --> <!-- Allow Insert -->
<b-field :addons="false"> <b-field :addons="false">
<label class="label is-inline"> <label class="label is-inline">
{{ $i18n.getHelperTitle('taxonomies', 'hierarchical') }} {{ $i18n.getHelperTitle('taxonomies', 'hierarchical') }}
<b-switch <b-switch
id="tainacan-checkbox-allow-insert" id="tainacan-checkbox-allow-insert"
size="is-small" v-model="form.hierarchical"
v-model="form.hierarchical" size="is-small"
true-value="yes" true-value="yes"
false-value="no" /> false-value="no" />
<help-button <help-button
:title="$i18n.getHelperTitle('taxonomies', 'hierarchical')" :title="$i18n.getHelperTitle('taxonomies', 'hierarchical')"
:message="$i18n.getHelperMessage('taxonomies', 'hierarchical')" :message="$i18n.getHelperMessage('taxonomies', 'hierarchical')"
extra-classes="tainacan-repository-tooltip"/> extra-classes="tainacan-repository-tooltip" />
</label> </label>
</b-field> </b-field>
<!-- Slug -------------------------------- --> <!-- Slug -------------------------------- -->
@ -103,13 +103,13 @@
<help-button <help-button
:title="$i18n.getHelperTitle('taxonomies', 'slug')" :title="$i18n.getHelperTitle('taxonomies', 'slug')"
: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()"
id="tainacan-text-slug" id="tainacan-text-slug"
v-model="form.slug" v-model="form.slug"
@focus="clearErrors('slug')" :disabled="isUpdatingSlug"
:disabled="isUpdatingSlug"/> @update:model-value="updateSlug()"
@focus="clearErrors('slug')" />
</b-field> </b-field>
<!-- Activate for other post types --> <!-- Activate for other post types -->
@ -119,9 +119,9 @@
:type="editFormErrors['enabled_post_types'] != undefined ? 'is-danger' : ''" :type="editFormErrors['enabled_post_types'] != undefined ? 'is-danger' : ''"
:message="editFormErrors['enabled_post_types'] != undefined ? editFormErrors['enabled_post_types'] : ''"> :message="editFormErrors['enabled_post_types'] != undefined ? editFormErrors['enabled_post_types'] : ''">
<help-button <help-button
:title="$i18n.getHelperTitle('taxonomies', 'enabled_post_types')" :title="$i18n.getHelperTitle('taxonomies', 'enabled_post_types')"
:message="$i18n.getHelperMessage('taxonomies', 'enabled_post_types')" :message="$i18n.getHelperMessage('taxonomies', 'enabled_post_types')"
extra-classes="tainacan-repository-tooltip"/> extra-classes="tainacan-repository-tooltip" />
<div class="two-columns-fields"> <div class="two-columns-fields">
<div <div
@ -129,11 +129,11 @@
:key="wpPostType.slug" :key="wpPostType.slug"
class="field"> class="field">
<b-checkbox <b-checkbox
:native-value="wpPostType.slug" v-model="form.enabledPostTypes"
:true-value="wpPostType.slug" :native-value="wpPostType.slug"
false-value="" :true-value="wpPostType.slug"
v-model="form.enabledPostTypes" false-value=""
name="enabled_post_types" > name="enabled_post_types">
{{ wpPostType.label }} {{ wpPostType.label }}
</b-checkbox> </b-checkbox>
</div> </div>
@ -153,17 +153,17 @@
<help-button <help-button
:title="$i18n.getHelperTitle('taxonomies', 'status')" :title="$i18n.getHelperTitle('taxonomies', 'status')"
:message="$i18n.getHelperMessage('taxonomies', 'status')" :message="$i18n.getHelperMessage('taxonomies', 'status')"
extra-classes="tainacan-repository-tooltip"/> extra-classes="tainacan-repository-tooltip" />
<div class="status-radios"> <div class="status-radios">
<b-radio <b-radio
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"
v-model="form.status"
:native-value="statusOption.slug"> :native-value="statusOption.slug">
<span class="icon has-text-gray"> <span class="icon has-text-gray">
<i <i
class="tainacan-icon tainacan-icon-18px" class="tainacan-icon tainacan-icon-18px"
:class="$statusHelper.getIcon(statusOption.slug)"/> :class="$statusHelper.getIcon(statusOption.slug)" />
</span> </span>
{{ statusOption.name }} {{ statusOption.name }}
</b-radio> </b-radio>
@ -175,22 +175,22 @@
:addons="false" :addons="false"
:label="$i18n.get('terms')"> :label="$i18n.get('terms')">
<help-button <help-button
:title="$i18n.get('terms')" :title="$i18n.get('terms')"
:message="$i18n.get('info_taxonomy_terms_list')" :message="$i18n.get('info_taxonomy_terms_list')"
extra-classes="tainacan-repository-tooltip"/> extra-classes="tainacan-repository-tooltip" />
<terms-list <terms-list
:is-hierarchical="form.hierarchical !== 'no'"
:key="shouldReloadTermsList ? 'termslistreloaded' : 'termslist'" :key="shouldReloadTermsList ? 'termslistreloaded' : 'termslist'"
:is-hierarchical="form.hierarchical !== 'no'"
:taxonomy-id="taxonomyId" :taxonomy-id="taxonomyId"
:current-user-can-edit-taxonomy="taxonomy ? taxonomy.current_user_can_edit : false"/> :current-user-can-edit-taxonomy="taxonomy ? taxonomy.current_user_can_edit : false" />
</b-field> </b-field>
<!-- Hook for extra Form options --> <!-- Hook for extra Form options -->
<template v-if="hasEndLeftForm"> <template v-if="hasEndLeftForm">
<form <form
id="form-taxonomy-end-left" id="form-taxonomy-end-left"
class="form-hook-region" class="form-hook-region"
v-html="getEndLeftForm"/> v-html="getEndLeftForm" />
</template> </template>
</div> </div>
</div> </div>
@ -202,8 +202,8 @@
class="control"> class="control">
<button <button
id="button-another-taxonomy-creation" id="button-another-taxonomy-creation"
@click.prevent="goToCreateAnotherTaxonomy()" class="button is-secondary"
class="button is-secondary">{{ $i18n.get('label_create_another_taxonomy') }}</button> @click.prevent="goToCreateAnotherTaxonomy()">{{ $i18n.get('label_create_another_taxonomy') }}</button>
</div> </div>
<div <div
v-if="!$route.query.recent" v-if="!$route.query.recent"
@ -231,25 +231,25 @@
class="button link-button" class="button link-button"
:href="themeTaxonomiesURL + taxonomy.slug"> :href="themeTaxonomiesURL + taxonomy.slug">
<span class="icon is-large"> <span class="icon is-large">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-openurl"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-openurl" />
</span> </span>
<span>{{ $i18n.get('label_taxonomy_page_on_website') }}</span> <span>{{ $i18n.get('label_taxonomy_page_on_website') }}</span>
</a> </a>
<button <button
:class="{ 'is-loading': isLoadingTaxonomy, 'is-success': !isLoadingTaxonomy }"
id="button-submit-taxonomy-creation" id="button-submit-taxonomy-creation"
@click.prevent="onSubmit" :class="{ 'is-loading': isLoadingTaxonomy, 'is-success': !isLoadingTaxonomy }"
class="button">{{ $i18n.get('save') }}</button> class="button"
@click.prevent="onSubmit">{{ $i18n.get('save') }}</button>
</div> </div>
</footer> </footer>
</form> </form>
<div v-if="!isLoading && (($route.name == 'TaxonomyCreationForm' && !$userCaps.hasCapability('tnc_rep_edit_taxonomies')) || ($route.name == 'TaxonomyEditionForm' && taxonomy && taxonomy.current_user_can_edit != undefined && !taxonomy.current_user_can_edit))"> <div v-if="!isLoadingTaxonomy && (($route.name == 'TaxonomyCreationForm' && !$userCaps.hasCapability('tnc_rep_edit_taxonomies')) || ($route.name == 'TaxonomyEditionForm' && taxonomy && taxonomy.current_user_can_edit != undefined && !taxonomy.current_user_can_edit))">
<section class="section"> <section class="section">
<div class="content has-text-grey has-text-centered"> <div class="content has-text-grey has-text-centered">
<p> <p>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-30px tainacan-icon-taxonomies"/> <i class="tainacan-icon tainacan-icon-30px tainacan-icon-taxonomies" />
</span> </span>
</p> </p>
<p>{{ $i18n.get('info_can_not_edit_taxonomy') }}</p> <p>{{ $i18n.get('info_can_not_edit_taxonomy') }}</p>
@ -258,15 +258,16 @@
</div> </div>
<b-loading <b-loading
:active.sync="isLoadingTaxonomy" v-model="isLoadingTaxonomy"
:can-cancel="false"/> :can-cancel="false" />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { wpAjax, formHooks } from "../../js/mixins"; import { nextTick } from 'vue';
import { permalinkGetter, formHooks } from "../../js/mixins";
import { mapActions, mapGetters } from 'vuex'; import { mapActions, mapGetters } from 'vuex';
import TermsList from '../lists/terms-list.vue'; import TermsList from '../lists/terms-list.vue';
import CustomDialog from '../other/custom-dialog.vue'; import CustomDialog from '../other/custom-dialog.vue';
@ -276,7 +277,7 @@
components: { components: {
TermsList TermsList
}, },
mixins: [ wpAjax, formHooks ], mixins: [ permalinkGetter, formHooks ],
beforeRouteLeave( to, from, next ) { beforeRouteLeave( to, from, next ) {
let formNotSaved = false; let formNotSaved = false;
@ -362,7 +363,7 @@
this.taxonomy = res.taxonomy; this.taxonomy = res.taxonomy;
// Fills hook forms with it's real values // Fills hook forms with it's real values
this.$nextTick() nextTick()
.then(() => { .then(() => {
this.updateExtraFormData(this.taxonomy); this.updateExtraFormData(this.taxonomy);
}); });

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

@ -1,21 +1,23 @@
<template> <template>
<form <form
id="termEditForm"
autofocus autofocus
role="dialog" role="dialog"
tabindex="-1" tabindex="-1"
aria-modal aria-modal
id="termEditForm"
class="tainacan-form tainacan-modal-content" class="tainacan-form tainacan-modal-content"
@submit.prevent="saveEdition(form)"> @submit.prevent="saveEdition(form)">
<header <header
class="tainacan-page-title tainacan-modal-title"> class="tainacan-page-title tainacan-modal-title">
<h2 style="width: 60%">{{ form & form.id && form.id != 'new' ? $i18n.get("title_term_edit") : $i18n.get("title_term_creation") }}</h2> <h2 style="width: 60%">
{{ form & form.id && form.id != 'new' ? $i18n.get("title_term_edit") : $i18n.get("title_term_creation") }}
</h2>
<a <a
v-if="form && form.url != undefined && form.url!= ''" v-if="form && form.url != undefined && form.url!= ''"
target="_blank" target="_blank"
:href="form.url"> :href="form.url">
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-openurl"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-openurl" />
</span> </span>
<span class="menu-text">{{ $i18n.get('label_term_page_on_website') }}</span> <span class="menu-text">{{ $i18n.get('label_term_page_on_website') }}</span>
</a> </a>
@ -24,8 +26,8 @@
<div class="modal-card-body"> <div class="modal-card-body">
<b-loading <b-loading
:is-full-page="false" v-model="isLoading"
:active.sync="isLoading" /> :is-full-page="false" />
<!-- Name -------------- --> <!-- Name -------------- -->
<b-field <b-field
@ -41,19 +43,19 @@
extra-classes="tainacan-repository-tooltip" /> extra-classes="tainacan-repository-tooltip" />
</label> </label>
<b-input <b-input
:placeholder="$i18n.get('label_term_without_name')"
v-model="form.name" v-model="form.name"
:placeholder="$i18n.get('label_term_without_name')"
name="name" name="name"
@focus="clearErrors({ name: 'name', repeated: 'repeated' })"/> @focus="clearErrors({ name: 'name', repeated: 'repeated' })" />
</b-field> </b-field>
<!-- Hook for extra Form options --> <!-- Hook for extra Form options -->
<template <template
v-if="hasBeginLeftForm"> v-if="hasBeginLeftForm">
<form <form
id="form-term-begin-left" id="form-term-begin-left"
class="form-hook-region" class="form-hook-region"
v-html="getBeginLeftForm"/> v-html="getBeginLeftForm" />
</template> </template>
<div class="columns is-gapless image-and-description-area"> <div class="columns is-gapless image-and-description-area">
@ -74,8 +76,8 @@
</figure> </figure>
<div class="thumbnail-buttons-row"> <div class="thumbnail-buttons-row">
<a <a
class="button is-rounded is-secondary"
id="button-edit-header" id="button-edit-header"
class="button is-rounded is-secondary"
:aria-label="$i18n.get('label_button_edit_header_image')" :aria-label="$i18n.get('label_button_edit_header_image')"
@click="headerImageMediaFrame.openFrame($event)"> @click="headerImageMediaFrame.openFrame($event)">
<span <span
@ -86,12 +88,12 @@
placement: 'bottom' placement: 'bottom'
}" }"
class="icon is-small"> class="icon is-small">
<i class="tainacan-icon tainacan-icon-edit"/> <i class="tainacan-icon tainacan-icon-edit" />
</span> </span>
</a> </a>
<a <a
class="button is-rounded is-secondary"
id="button-delete-header" id="button-delete-header"
class="button is-rounded is-secondary"
:aria-label="$i18n.get('label_button_delete_thumb')" :aria-label="$i18n.get('label_button_delete_thumb')"
@click="deleteHeaderImage()"> @click="deleteHeaderImage()">
<span <span
@ -102,7 +104,7 @@
placement: 'bottom' placement: 'bottom'
}" }"
class="icon is-small"> class="icon is-small">
<i class="tainacan-icon tainacan-icon-delete"/> <i class="tainacan-icon tainacan-icon-delete" />
</span> </span>
</a> </a>
</div> </div>
@ -121,13 +123,13 @@
<help-button <help-button
:title="$i18n.get('label_description')" :title="$i18n.get('label_description')"
:message="$i18n.get('info_help_term_description')" :message="$i18n.get('info_help_term_description')"
extra-classes="tainacan-repository-tooltip"/> extra-classes="tainacan-repository-tooltip" />
</label> </label>
<b-input <b-input
v-model="form.description"
type="textarea" type="textarea"
name="description" name="description"
v-model="form.description" @focus="clearErrors('description')" />
@focus="clearErrors('description')"/>
</b-field> </b-field>
</div> </div>
</div> </div>
@ -138,34 +140,34 @@
:addons="false" :addons="false"
:type="((formErrors.parent !== '' || formErrors.repeated !== '') && (formErrors.parent !== undefined || formErrors.repeated !== undefined )) ? 'is-danger' : ''" :type="((formErrors.parent !== '' || formErrors.repeated !== '') && (formErrors.parent !== undefined || formErrors.repeated !== undefined )) ? 'is-danger' : ''"
:message="formErrors.parent ? formErrors : formErrors.repeated"> :message="formErrors.parent ? formErrors : formErrors.repeated">
<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()" id="tainacan-checkbox-has-parent"
id="tainacan-checkbox-has-parent" v-model="hasParent"
size="is-small" size="is-small"
v-model="hasParent" /> @update:model-value="onToggleSwitch()" />
<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')"
extra-classes="tainacan-repository-tooltip"/> extra-classes="tainacan-repository-tooltip" />
</label> </label>
<b-autocomplete <b-autocomplete
id="tainacan-add-parent-field" id="tainacan-add-parent-field"
v-model="parentTermName"
:placeholder="$i18n.get('instruction_parent_term')" :placeholder="$i18n.get('instruction_parent_term')"
:data="parentTerms" :data="parentTerms"
field="name" field="name"
clearable clearable
v-model="parentTermName"
@select="onSelectParentTerm($event)"
:loading="isFetchingParentTerms" :loading="isFetchingParentTerms"
@input="fetchParentTerms"
@focus="clearErrors('parent');"
:disabled="!hasParent" :disabled="!hasParent"
:append-to-body="true" :append-to-body="true"
check-infinite-scroll check-infinite-scroll
@select="onSelectParentTerm($event)"
@update:model-value="fetchParentTerms"
@focus="clearErrors('parent');"
@infinite-scroll="fetchMoreParentTerms"> @infinite-scroll="fetchMoreParentTerms">
<template slot-scope="props"> <template #default="props">
<div class="media"> <div class="media">
<div <div
v-if="props.option.header_image" v-if="props.option.header_image"
@ -179,12 +181,14 @@
</div> </div>
</div> </div>
</template> </template>
<template slot="empty">{{ $i18n.get('info_no_parent_term_found') }}</template> <template #empty>
{{ $i18n.get('info_no_parent_term_found') }}
</template>
</b-autocomplete> </b-autocomplete>
<transition name="fade"> <transition name="fade">
<p <p
class="checkboxes-warning" v-show="isTermInsertionFlow != true && showCheckboxesWarning == true"
v-show="isTermInsertionFlow != true && showCheckboxesWarning == true"> class="checkboxes-warning">
{{ $i18n.get('info_warning_changing_parent_term') }} {{ $i18n.get('info_warning_changing_parent_term') }}
</p> </p>
</transition> </transition>
@ -193,9 +197,9 @@
<!-- Hook for extra Form options --> <!-- Hook for extra Form options -->
<template v-if="hasEndLeftForm"> <template v-if="hasEndLeftForm">
<form <form
id="form-term-end-left" id="form-term-end-left"
class="form-hook-region" class="form-hook-region"
v-html="getEndLeftForm"/> v-html="getEndLeftForm" />
</template> </template>
<!-- Submit buttons -------------- --> <!-- Submit buttons -------------- -->
@ -204,8 +208,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>
@ -222,6 +225,7 @@
</template> </template>
<script> <script>
import { nextTick } from 'vue';
import { formHooks } from "../../js/mixins"; import { formHooks } from "../../js/mixins";
import { mapActions } from 'vuex'; import { mapActions } from 'vuex';
import wpMediaFrames from '../../js/wp-media-frames'; import wpMediaFrames from '../../js/wp-media-frames';
@ -237,6 +241,10 @@
metadatumId: [String, Number], metadatumId: [String, Number],
itemId: [String, Number] itemId: [String, Number]
}, },
emits: [
'on-edition-finished',
'close'
],
data() { data() {
return { return {
formErrors: {}, formErrors: {},
@ -262,7 +270,7 @@
mounted() { mounted() {
// Fills hook forms with it's real values // Fills hook forms with it's real values
this.$nextTick() nextTick()
.then(() => { .then(() => {
this.updateExtraFormData(this.form); this.updateExtraFormData(this.form);
document.getElementById('termEditForm').scrollIntoView({ behavior: 'smooth' }); document.getElementById('termEditForm').scrollIntoView({ behavior: 'smooth' });
@ -315,18 +323,18 @@
itemId: this.itemId itemId: this.itemId
}) })
.then((term) => { .then((term) => {
this.$emit('onEditionFinished', {term: term, hasChangedParent: this.hasChangedParent, initialParent: this.initialParentId }); this.$emit('on-edition-finished', {term: term, hasChangedParent: this.hasChangedParent, initialParent: this.initialParentId });
this.form = {}; this.form = {};
this.formErrors = {}; this.formErrors = {};
this.isLoading = false; this.isLoading = false;
this.$parent.close(); this.$emit('close');
}) })
.catch((errors) => { .catch((errors) => {
this.isLoading = false; this.isLoading = false;
for (let error of errors.errors) { for (let error of errors.errors) {
for (let metadatum of Object.keys(error)) { for (let metadatum of Object.keys(error)) {
this.$set(this.formErrors, metadatum, (this.formErrors[metadatum] !== undefined ? this.formErrors[metadatum] : '') + error[metadatum] + '\n'); Object.assign( this.formErrors, { [metadatum]: (this.formErrors[metadatum] !== undefined ? this.formErrors[metadatum] : '') + error[metadatum] + '\n' });
} }
} }
}); });
@ -352,13 +360,13 @@
}) })
.then((term) => { .then((term) => {
this.formErrors = {}; this.formErrors = {};
this.$emit('onEditionFinished', { term: term, hasChangedParent: this.hasChangedParent, initialParent: this.initialParentId }); this.$emit('on-edition-finished', { term: term, hasChangedParent: this.hasChangedParent, initialParent: this.initialParentId });
this.$parent.close(); this.$emit('close');
}) })
.catch((errors) => { .catch((errors) => {
for (let error of errors.errors) { for (let error of errors.errors) {
for (let metadatum of Object.keys(error)) { for (let metadatum of Object.keys(error)) {
this.$set(this.formErrors, metadatum, (this.formErrors[metadatum] !== undefined ? this.formErrors[metadatum] : '') + error[metadatum] + '\n'); Object.assign( this.formErrors, { [metadatum]: (this.formErrors[metadatum] !== undefined ? this.formErrors[metadatum] : '') + error[metadatum] + '\n' });
} }
} }
this.isLoading = false; this.isLoading = false;
@ -366,7 +374,7 @@
} }
}, },
cancelEdition() { cancelEdition() {
this.$parent.close(); this.$emit('close');
}, },
deleteHeaderImage() { deleteHeaderImage() {
this.form = Object.assign({}, this.form = Object.assign({},

28
src/views/admin/components/filter-types/autocomplete/Autocomplete.vue → src/views/admin/components/filter-types/autocomplete/TainacanFilterAutocomplete.vue
View File

@ -1,25 +1,25 @@
<template> <template>
<div class="block"> <div class="block">
<b-autocomplete <b-autocomplete
v-model="selected"
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="selected"
:data="options" :data="options"
expanded expanded
:loading="isLoadingOptions" :loading="isLoadingOptions"
@input="($event) => { resetPage(); search($event); }"
field="label" field="label"
@select="onSelect"
clearable clearable
:placeholder="(metadatumType === 'Tainacan\\Metadata_Types\\Relationship') ? $i18n.get('info_type_to_search_items') : $i18n.get('info_type_to_search_metadata')" :placeholder="(metadatumType === 'Tainacan\\Metadata_Types\\Relationship') ? $i18n.get('info_type_to_search_items') : $i18n.get('info_type_to_search_metadata')"
check-infinite-scroll check-infinite-scroll
@update:model-value="($event) => { resetPage(); search($event); }"
@select="onSelect"
@infinite-scroll="searchMore"> @infinite-scroll="searchMore">
<template slot-scope="props"> <template #default="props">
<div class="media"> <div class="media">
<div <div
class="media-left" v-if="props.option.img"
v-if="props.option.img"> class="media-left">
<img <img
:alt="$i18n.get('label_thumbnail')" :alt="$i18n.get('label_thumbnail')"
width="24" width="24"
@ -37,7 +37,7 @@
</template> </template>
<template <template
v-if="!isLoadingOptions" v-if="!isLoadingOptions"
slot="empty"> #empty>
{{ $i18n.get('info_no_options_found' ) }} {{ $i18n.get('info_no_options_found' ) }}
</template> </template>
</b-autocomplete> </b-autocomplete>
@ -45,11 +45,14 @@
</template> </template>
<script> <script>
import { tainacan as axios, isCancel } from '../../../js/axios' import { tainacanApi, isCancel } from '../../../js/axios'
import { filterTypeMixin, dynamicFilterTypeMixin } from '../../../js/filter-types-mixin'; import { filterTypeMixin, dynamicFilterTypeMixin } from '../../../js/filter-types-mixin';
export default { export default {
mixins: [filterTypeMixin, dynamicFilterTypeMixin], mixins: [filterTypeMixin, dynamicFilterTypeMixin],
emits: [
'input',
],
data(){ data(){
return { return {
selected:'', selected:'',
@ -62,8 +65,11 @@
} }
}, },
watch: { watch: {
'query'() { 'query': {
this.updateSelectedValues(); handler() {
this.updateSelectedValues();
},
deep: true
} }
}, },
mounted() { mounted() {
@ -168,7 +174,7 @@
let endpoint = '/items/' + metadata.value + '?fetch_only=title,thumbnail'; let endpoint = '/items/' + metadata.value + '?fetch_only=title,thumbnail';
axios.get(endpoint) tainacanApi.get(endpoint)
.then( res => { .then( res => {
let item = res.data; let item = res.data;
this.label = item.title; this.label = item.title;

68
src/views/admin/components/filter-types/checkbox/Checkbox.vue → src/views/admin/components/filter-types/checkbox/TainacanFilterCheckbox.vue
View File

@ -15,19 +15,19 @@
<input <input
v-model="selected" v-model="selected"
:value="option.value" :value="option.value"
@input="resetPage()" type="checkbox"
type="checkbox"> @input="resetPage()">
<span class="check" /> <span class="check" />
<span class="control-label"> <span class="control-label">
<span class="checkbox-label-text">{{ option.label }}</span> <span class="checkbox-label-text">{{ option.label }}</span>
<span <span
v-if="option.total_items != undefined" v-if="option.total_items != undefined"
class="has-text-gray">&nbsp;{{ "(" + option.total_items + ")" }}</span> class="has-text-gray">&nbsp;{{ "(" + option.total_items + ")" }}</span>
</span> </span>
</label> </label>
<button <button
class="view-all-button link-style"
v-if="option.showViewAllButton && index == options.slice(0, filter.max_options).length - 1" v-if="option.showViewAllButton && index == options.slice(0, filter.max_options).length - 1"
class="view-all-button link-style"
@click="openCheckboxModal(option.parent)"> @click="openCheckboxModal(option.parent)">
{{ $i18n.get('label_view_all') }} {{ $i18n.get('label_view_all') }}
</button> </button>
@ -44,19 +44,19 @@
:is-modal="false" :is-modal="false"
:filter="filter" :filter="filter"
:selected="selected" :selected="selected"
:metadatum-id="metadatumId"
:collection-id="collectionId"
:metadatum-type="metadatumType"
:is-repository-level="isRepositoryLevel"
:query="query"
:current-collection-id="currentCollectionId"
@input="(newSelected) => { @input="(newSelected) => {
const existingValue = selected.indexOf(newSelected); const existingValue = selected.indexOf(newSelected);
if (existingValue >= 0) if (existingValue >= 0)
selected.splice(existingValue, 1); selected.splice(existingValue, 1);
else else
selected.push(newSelected); selected.push(newSelected);
}" }" />
:metadatum-id="metadatumId"
:collection-id="collectionId"
:metadatum_type="metadatumType"
:is-repository-level="isRepositoryLevel"
:query="query"
:current-collection-id="currentCollectionId" />
</template> </template>
</div> </div>
</template> </template>
@ -72,6 +72,10 @@
props: { props: {
filtersAsModal: Boolean filtersAsModal: Boolean
}, },
emits: [
'input',
'update-parent-collapse'
],
data(){ data(){
return { return {
options: [], options: [],
@ -79,19 +83,23 @@
} }
}, },
watch: { watch: {
selected(newVal, oldVal) { selected: {
const isEqual = (Array.isArray(newVal) && Array.isArray(oldVal) && (newVal.length == oldVal.length)) && newVal.every((element, index) => { handler(newVal, oldVal) {
return element === oldVal[index]; const isEqual = (Array.isArray(newVal) && Array.isArray(oldVal) && (newVal.length == oldVal.length)) && newVal.every((element, index) => {
}); return element === oldVal[index];
if (!isEqual) });
this.onSelect(); if (!isEqual)
this.onSelect();
},
deep: true
}, },
facetsFromItemSearch: { facetsFromItemSearch: {
handler() { handler() {
if (this.isUsingElasticSearch) if (this.isUsingElasticSearch)
this.loadOptions(); this.loadOptions();
}, },
immediate: true immediate: true,
deep: true
}, },
}, },
mounted() { mounted() {
@ -99,10 +107,10 @@
this.loadOptions(); this.loadOptions();
}, },
created() { created() {
this.$eventBusSearch.$on('has-to-reload-facets', this.reloadOptions); this.$eventBusSearchEmitter.on('hasToReloadFacets', this.reloadOptions);
}, },
beforeDestroy() { beforeUnmount() {
this.$eventBusSearch.$off('has-to-reload-facets', this.reloadOptions); this.$eventBusSearchEmitter.off('hasToReloadFacets', this.reloadOptions);
}, },
methods: { methods: {
reloadOptions(shouldReload) { reloadOptions(shouldReload) {
@ -143,7 +151,7 @@
this.updateSelectedValues(); this.updateSelectedValues();
if (res && res.data && res.data.values) if (res && res.data && res.data.values)
this.$emit('updateParentCollapse', res.data.values.length > 0 ); this.$emit('update-parent-collapse', res.data.values.length > 0 );
}) })
.catch( (error) => { .catch( (error) => {
if (isCancel(error)) { if (isCancel(error)) {
@ -180,12 +188,12 @@
props: { props: {
//parent: parent, //parent: parent,
filter: this.filter, filter: this.filter,
//taxonomy_id: this.taxonomy_id, //taxonomyId: this.taxonomyId,
selected: this.selected, selected: this.selected,
metadatumId: this.metadatumId, metadatumId: this.metadatumId,
//taxonomy: this.taxonomy, //taxonomy: this.taxonomy,
collectionId: this.collectionId, collectionId: this.collectionId,
metadatum_type: this.metadatumType, metadatumType: this.metadatumType,
isRepositoryLevel: this.isRepositoryLevel, isRepositoryLevel: this.isRepositoryLevel,
query: this.query query: this.query
}, },

31
src/views/admin/components/filter-types/date-interval/DateInterval.vue → src/views/admin/components/filter-types/date-interval/TainacanFilterDateInterval.vue
View File

@ -1,11 +1,9 @@
<template> <template>
<div> <div>
<b-datepicker <b-datepicker
v-model="dateInit"
: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="dateInit"
@focus="isTouched = true"
@input="($event) => { resetPage(); validadeValues($event) }"
editable editable
:trap-focus="false" :trap-focus="false"
:date-formatter="(date) => dateFormatter(date)" :date-formatter="(date) => dateFormatter(date)"
@ -20,18 +18,18 @@
$i18n.get('datepicker_short_thursday'), $i18n.get('datepicker_short_thursday'),
$i18n.get('datepicker_short_friday'), $i18n.get('datepicker_short_friday'),
$i18n.get('datepicker_short_saturday'), $i18n.get('datepicker_short_saturday'),
]"/> ]"
@focus="isTouched = true"
@update:model-value="($event) => { resetPage(); validadeValues($event) }" />
<p <p
style="font-size: 0.75em; margin-bottom: 0.125em;" style="font-size: 0.75em; margin-bottom: 0.125em;"
class="has-text-centered is-marginless"> class="has-text-centered is-marginless">
{{ $i18n.get('label_until') }} {{ $i18n.get('label_until') }}
</p> </p>
<b-datepicker <b-datepicker
v-model="dateEnd"
: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="dateEnd"
@input="validadeValues()"
@focus="isTouched = true"
editable editable
:trap-focus="false" :trap-focus="false"
:date-formatter="(date) => dateFormatter(date)" :date-formatter="(date) => dateFormatter(date)"
@ -46,21 +44,25 @@
$i18n.get('datepicker_short_thursday'), $i18n.get('datepicker_short_thursday'),
$i18n.get('datepicker_short_friday'), $i18n.get('datepicker_short_friday'),
$i18n.get('datepicker_short_saturday'), $i18n.get('datepicker_short_saturday'),
]"/> ]"
@update:model-value="validadeValues()"
@focus="isTouched = true" />
</div> </div>
</template> </template>
<script> <script>
import { wpAjax, dateInter } from "../../../js/mixins"; import { dateInter } from "../../../js/mixins";
import { filterTypeMixin } from '../../../js/filter-types-mixin'; import { filterTypeMixin } from '../../../js/filter-types-mixin';
import moment from 'moment'; import moment from 'moment';
export default { export default {
mixins: [ mixins: [
wpAjax,
dateInter, dateInter,
filterTypeMixin filterTypeMixin
], ],
emits: [
'input',
],
data(){ data(){
return { return {
dateInit: undefined, dateInit: undefined,
@ -76,8 +78,11 @@
if ( val && this.dateEnd === null) if ( val && this.dateEnd === null)
this.dateEnd = new Date(); this.dateEnd = new Date();
}, },
'query'() { 'query': {
this.updateSelectedValues(); handler() {
this.updateSelectedValues();
},
deep: true
} }
}, },
mounted() { mounted() {

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

@ -1,43 +0,0 @@
<template>
<div>
<b-field :addons="false">
<label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-filter-date', 'type') }}<span>&nbsp;*&nbsp;</span>
<help-button
:title="$i18n.getHelperTitle('tainacan-filter-date', 'type')"
:message="$i18n.getHelperMessage('tainacan-filter-date', 'type')"/>
</label>
<b-select
name="type_options"
v-model="type"
@input="onUpdateType">
<option value="day">{{ $i18n.get('label_day') }}</option>
<option value="month">{{ $i18n.get('label_month') }}</option>
<option value="year">{{ $i18n.get('label_year') }}</option>
</b-select>
</b-field>
</div>
</template>
<script>
export default {
props: {
filter: {
type: Object
},
value: [String, Number, Array],
disabled: false,
},
data() {
return {
type: [String]
}
},
methods: {
onUpdateType(type) {
this.$emit('input', { type: type });
},
}
}
</script>

50
src/views/admin/components/filter-types/date/Date.vue → src/views/admin/components/filter-types/date/TainacanFilterDate.vue
View File

@ -1,21 +1,22 @@
<template> <template>
<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) }"
aria-role="list" aria-role="list"
trap-focus> trap-focus
<button @update:model-value="($event) => { resetPage(); onChangeComparator($event) }">
:aria-label="$i18n.get('label_comparator')" <template #trigger>
class="button is-white" <button
slot="trigger"> :aria-label="$i18n.get('label_comparator')"
<span class="icon is-small"> class="button is-white">
<i v-html="comparatorSymbol" /> <span class="icon is-small">
</span> <i v-html="comparatorSymbol" />
<span class="icon"> </span>
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" /> <span class="icon">
</span> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
</button> </span>
</button>
</template>
<b-dropdown-item <b-dropdown-item
role="button" role="button"
:class="{ 'is-active': comparator == '=' }" :class="{ 'is-active': comparator == '=' }"
@ -67,14 +68,13 @@
: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="yearsOnlyValue"/> --> v-model="yearsOnlyValue"/> -->
<b-datepicker <b-datepicker
v-model="value"
position="is-bottom-right" position="is-bottom-right"
: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"
@input="($event) => { resetPage(); emit($event); }"
editable editable
:trap-focus="false" :trap-focus="false"
:date-formatter="(date) => dateFormatter(date)" :date-formatter="(date) => dateFormatter(date)"
@ -103,7 +103,8 @@
$i18n.get('datepicker_month_october'), $i18n.get('datepicker_month_october'),
$i18n.get('datepicker_month_november'), $i18n.get('datepicker_month_november'),
$i18n.get('datepicker_month_december') $i18n.get('datepicker_month_december')
]" /> ]"
@update:model-value="($event) => { resetPage(); emit($event); }" />
<!-- filterTypeOptions FOR TYPE <!-- filterTypeOptions FOR TYPE
v-else v-else
:type="filterTypeOptions.type == 'month' ? 'month' : null" :type="filterTypeOptions.type == 'month' ? 'month' : null"
@ -113,16 +114,18 @@
</template> </template>
<script> <script>
import { wpAjax, dateInter } from "../../../js/mixins"; import { dateInter } from "../../../js/mixins";
import { filterTypeMixin } from '../../../js/filter-types-mixin'; import { filterTypeMixin } from '../../../js/filter-types-mixin';
import moment from 'moment'; import moment from 'moment';
export default { export default {
mixins: [ mixins: [
wpAjax,
dateInter, dateInter,
filterTypeMixin filterTypeMixin
], ],
emits: [
'input',
],
data(){ data(){
return { return {
value: null, value: null,
@ -146,8 +149,11 @@
} }
}, },
watch: { watch: {
'query'() { 'query': {
this.updateSelectedValues(); handler() {
this.updateSelectedValues();
},
deep: true,
}, },
}, },
mounted() { mounted() {

16
src/views/admin/components/filter-types/date/class-tainacan-date.php
View File

@ -13,11 +13,7 @@ class Date extends Filter_Type {
$this->set_name( __('Date', 'tainacan') ); $this->set_name( __('Date', 'tainacan') );
$this->set_supported_types(['date']); $this->set_supported_types(['date']);
$this->set_component('tainacan-filter-date'); $this->set_component('tainacan-filter-date');
// $this->set_form_component('tainacan-filter-form-date');
$this->set_use_max_options(false); $this->set_use_max_options(false);
// $this->set_default_options([
// 'type' => 'day'
// ]);
$this->set_preview_template(' $this->set_preview_template('
<div> <div>
<div> <div>
@ -61,18 +57,6 @@ class Date extends Filter_Type {
'); ');
} }
// /**
// * @inheritdoc
// */
// public function get_form_labels(){
// return [
// 'type' => [
// 'title' => __( 'Type', 'tainacan' ),
// 'description' => __( 'The type of the date picker, may be for day, month or year.', 'tainacan' ),
// ]
// ];
// }
} }
class Date_Helper { class Date_Helper {

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

@ -5,24 +5,42 @@
{{ $i18n.getHelperTitle('tainacan-filter-numeric-interval', 'step') }}<span>&nbsp;*&nbsp;</span> {{ $i18n.getHelperTitle('tainacan-filter-numeric-interval', 'step') }}<span>&nbsp;*&nbsp;</span>
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-filter-numeric-interval', 'step')" :title="$i18n.getHelperTitle('tainacan-filter-numeric-interval', 'step')"
:message="$i18n.getHelperMessage('tainacan-filter-numeric-interval', 'step')"/> :message="$i18n.getHelperMessage('tainacan-filter-numeric-interval', 'step')" />
</label> </label>
<div <div
v-if="!showEditStepOptions" v-if="!showEditStepOptions"
class="is-flex"> class="is-flex">
<b-select <b-select
name="step_options"
v-model="step" v-model="step"
@input="onUpdateStep"> name="step_options"
<option value="0.001">0.001</option> @update:model-value="onUpdateStep">
<option value="0.01">0.01</option> <option value="0.001">
<option value="0.1">0.1</option> 0.001
<option value="1">1</option> </option>
<option value="2">2</option> <option value="0.01">
<option value="5">5</option> 0.01
<option value="10">10</option> </option>
<option value="100">100</option> <option value="0.1">
<option value="1000">1000</option> 0.1
</option>
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="5">
5
</option>
<option value="10">
10
</option>
<option value="100">
100
</option>
<option value="1000">
1000
</option>
<option <option
v-if="step && ![0.001,0.01,0.1,1,2,5,10,100,1000].find( (element) => element == step )" v-if="step && ![0.001,0.01,0.1,1,2,5,10,100,1000].find( (element) => element == step )"
:value="step"> :value="step">
@ -40,7 +58,7 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-edit has-text-secondary"/> <i class="tainacan-icon tainacan-icon-18px tainacan-icon-edit has-text-secondary" />
</span> </span>
</button> </button>
</div> </div>
@ -48,14 +66,14 @@
v-if="showEditStepOptions" v-if="showEditStepOptions"
class="is-flex"> class="is-flex">
<b-input <b-input
name="max_options"
v-model="step" v-model="step"
@input="onUpdateStep" name="max_options"
type="number" type="number"
step="1" /> step="1"
@update:model-value="onUpdateStep" />
<button <button
@click.prevent="showEditStepOptions = false" class="button is-white is-pulled-right"
class="button is-white is-pulled-right"> @click.prevent="showEditStepOptions = false">
<span <span
v-tooltip="{ v-tooltip="{
content: $i18n.get('close'), content: $i18n.get('close'),
@ -64,7 +82,7 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-close has-text-secondary"/> <i class="tainacan-icon tainacan-icon-18px tainacan-icon-close has-text-secondary" />
</span> </span>
</button> </button>
</div> </div>
@ -77,8 +95,11 @@
export default { export default {
props: { props: {
value: [String, Number, Array] modelValue: Object
}, },
emits: [
'update:model-value',
],
data() { data() {
return { return {
step: [Number, String], step: [Number, String],
@ -86,11 +107,11 @@
} }
}, },
created() { created() {
this.step = this.value && this.value.step ? this.value.step : 1; this.step = this.modelValue && this.modelValue.step ? this.modelValue.step : 1;
}, },
methods: { methods: {
onUpdateStep(value) { onUpdateStep(modelValue) {
this.$emit('input', { step: value }); this.$emit('update:model-value', { step: modelValue });
}, },
} }
} }

22
src/views/admin/components/filter-types/numeric-interval/NumericInterval.vue → src/views/admin/components/filter-types/numeric-interval/TainacanFilterNumericInterval.vue
View File

@ -1,27 +1,27 @@
<template> <template>
<div> <div>
<b-numberinput <b-numberinput
v-model="valueInit"
:aria-labelledby="'filter-label-id-' + filter.id" :aria-labelledby="'filter-label-id-' + filter.id"
: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) }"
:step="filterTypeOptions.step" :step="filterTypeOptions.step"
v-model="valueInit" @update:model-value="($event) => { resetPage(); validadeValues($event) }"
/> />
<p <p
style="font-size: 0.75em; margin-bottom: 0.125em;" style="font-size: 0.75em; margin-bottom: 0.125em;"
class="has-text-centered is-marginless"> class="has-text-centered is-marginless">
{{ $i18n.get('label_until') }} {{ $i18n.get('label_until') }}
</p> </p>
<b-numberinput <b-numberinput
v-model="valueEnd"
:aria-labelledby="'filter-label-id-' + filter.id" :aria-labelledby="'filter-label-id-' + filter.id"
: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) }"
:step="filterTypeOptions.step" :step="filterTypeOptions.step"
v-model="valueEnd"/> @update:model-value="($event) => { resetPage(); validadeValues($event) }" />
</div> </div>
</template> </template>
@ -30,6 +30,9 @@
import { filterTypeMixin } from '../../../js/filter-types-mixin'; import { filterTypeMixin } from '../../../js/filter-types-mixin';
export default { export default {
mixins: [ filterTypeMixin ], mixins: [ filterTypeMixin ],
emits: [
'input',
],
data(){ data(){
return { return {
valueInit: null, valueInit: null,
@ -37,9 +40,12 @@
} }
}, },
watch: { watch: {
'query'() { 'query': {
this.updateSelectedValues(); handler() {
}, this.updateSelectedValues();
},
deep: true
}
}, },
mounted() { mounted() {
this.updateSelectedValues(); this.updateSelectedValues();

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

@ -5,13 +5,13 @@
{{ $i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'showIntervalOnTag') }}<span>&nbsp;</span> {{ $i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'showIntervalOnTag') }}<span>&nbsp;</span>
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'showIntervalOnTag')" :title="$i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'showIntervalOnTag')"
:message="$i18n.getHelperMessage('tainacan-filter-numeric-list-interval', 'showIntervalOnTag')"/> :message="$i18n.getHelperMessage('tainacan-filter-numeric-list-interval', 'showIntervalOnTag')" />
</label> </label>
<div> <div>
<b-field> <b-field>
<b-checkbox <b-checkbox
v-model="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>
@ -22,58 +22,58 @@
{{ $i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'intervals') }}<span>&nbsp;</span> {{ $i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'intervals') }}<span>&nbsp;</span>
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'intervals')" :title="$i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'intervals')"
:message="$i18n.getHelperMessage('tainacan-filter-numeric-list-interval', 'intervals')"/> :message="$i18n.getHelperMessage('tainacan-filter-numeric-list-interval', 'intervals')" />
</label> </label>
<transition-group name="filter-item"> <transition-group name="filter-item">
<div <div
class="options-input"
v-for="(interval, index) of intervals" v-for="(interval, index) of intervals"
:key="0 + index"> :key="0 + index"
class="options-input">
<b-field> <b-field>
<b-input <b-input
v-model="interval.label"
expanded expanded
:placeholder="$i18n.get('label')" :placeholder="$i18n.get('label')"
@input="onUpdate(interval)" @update:model-value="onUpdate(interval)" />
v-model="interval.label" />
</b-field> </b-field>
<b-field> <b-field>
<b-input <b-input
v-model="interval.from"
expanded expanded
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="interval.from" />
<b-input <b-input
v-model="interval.to"
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="interval.to" />
</b-field> </b-field>
<p class="control"> <p class="control">
<a <a
role="button" role="button"
@click="addInterval(index)"
class="add-link" class="add-link"
:title="$i18n.get('add_value')"> :title="$i18n.get('add_value')"
@click="addInterval(index)">
<span class="icon is-small"> <span class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/> <i class="tainacan-icon has-text-secondary tainacan-icon-add" />
</span> </span>
&nbsp;{{ $i18n.get('add_value') }} &nbsp;{{ $i18n.get('add_value') }}
</a> </a>
</p> </p>
<p <p
v-if="intervals.length > 1" v-if="intervals.length > 1"
class="control"> class="control">
<a <a
role="button" role="button"
@click="removeInterval(index)"
class="add-link" class="add-link"
:title="$i18n.get('remove_value')"> :title="$i18n.get('remove_value')"
@click="removeInterval(index)">
<span class="icon is-small"> <span class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-repprovedcircle"/> <i class="tainacan-icon has-text-secondary tainacan-icon-repprovedcircle" />
</span> </span>
&nbsp;{{ $i18n.get('remove_value') }} &nbsp;{{ $i18n.get('remove_value') }}
</a> </a>
@ -89,10 +89,13 @@
export default { export default {
props: { props: {
filter: Object, filter: Object,
value: [String, Number, Array], modelValue: Object,
id: '', id: '',
disabled: false, disabled: false,
}, },
emits: [
'update:model-value',
],
data() { data() {
return { return {
showIntervalOnTag: true, showIntervalOnTag: true,
@ -102,14 +105,14 @@
}, },
created() { created() {
this.intervals = this.intervals =
this.value && this.value.intervals && this.value.intervals.length > 0 ? this.modelValue && this.modelValue.intervals && this.modelValue.intervals.length > 0 ?
this.value.intervals : this.modelValue.intervals :
[{ [{
label: '', label: '',
to: null, to: null,
from: null from: null
}]; }];
this.showIntervalOnTag = this.value && this.value.showIntervalOnTag != undefined ? this.value.showIntervalOnTag : true; this.showIntervalOnTag = this.modelValue && this.modelValue.showIntervalOnTag != undefined ? this.modelValue.showIntervalOnTag : true;
}, },
methods: { methods: {
onUpdate: _.debounce( function(interval, validade) { onUpdate: _.debounce( function(interval, validade) {
@ -124,7 +127,7 @@
this.showErrorMessage() this.showErrorMessage()
} else { } else {
this.isValid = true; this.isValid = true;
this.$emit('input', { this.$emit('update:model-value', {
intervals: this.intervals, intervals: this.intervals,
showIntervalOnTag: this.showIntervalOnTag showIntervalOnTag: this.showIntervalOnTag
}); });
@ -132,7 +135,7 @@
}, 600), }, 600),
onUpdateShowIntervalOnTag() { onUpdateShowIntervalOnTag() {
if (this.isValid) { if (this.isValid) {
this.$emit('input', { this.$emit('update:model-value', {
intervals: this.intervals, intervals: this.intervals,
showIntervalOnTag: this.showIntervalOnTag showIntervalOnTag: this.showIntervalOnTag
}); });

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

@ -1,17 +1,17 @@
<template> <template>
<div> <div>
<b-select <b-select
v-model="selectedInterval"
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="selectedInterval">
<option value=""> <option value="">
{{ $i18n.get('label_selectbox_init') }}... {{ $i18n.get('label_selectbox_init') }}...
</option> </option>
<option <option
v-for="(interval, index) in filterTypeOptions.intervals" v-for="(interval, index) in filterTypeOptions.intervals"
:value="index" :key="index"
:key="index"> :value="index">
{{ interval.label }} {{ interval.label }}
</option> </option>
</b-select> </b-select>
@ -22,6 +22,9 @@
import { filterTypeMixin } from '../../../js/filter-types-mixin'; import { filterTypeMixin } from '../../../js/filter-types-mixin';
export default { export default {
mixins: [ filterTypeMixin ], mixins: [ filterTypeMixin ],
emits: [
'input',
],
data() { data() {
return { return {
valueInit: 0, valueInit: 0,
@ -30,8 +33,11 @@
} }
}, },
watch: { watch: {
'query'() { 'query': {
this.updateSelectedValues(); handler() {
this.updateSelectedValues();
},
deep: true
} }
}, },
mounted() { mounted() {

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

@ -5,24 +5,42 @@
{{ $i18n.getHelperTitle('tainacan-filter-numeric', 'step') }}<span>&nbsp;*&nbsp;</span> {{ $i18n.getHelperTitle('tainacan-filter-numeric', 'step') }}<span>&nbsp;*&nbsp;</span>
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-filter-numeric', 'step')" :title="$i18n.getHelperTitle('tainacan-filter-numeric', 'step')"
:message="$i18n.getHelperMessage('tainacan-filter-numeric', 'step')"/> :message="$i18n.getHelperMessage('tainacan-filter-numeric', 'step')" />
</label> </label>
<div <div
v-if="!showEditStepOptions" v-if="!showEditStepOptions"
class="is-flex"> class="is-flex">
<b-select <b-select
name="step_options"
v-model="step" v-model="step"
@input="onUpdateStep"> name="step_options"
<option value="0.001">0.001</option> @update:model-value="onUpdateStep">
<option value="0.01">0.01</option> <option value="0.001">
<option value="0.1">0.1</option> 0.001
<option value="1">1</option> </option>
<option value="2">2</option> <option value="0.01">
<option value="5">5</option> 0.01
<option value="10">10</option> </option>
<option value="100">100</option> <option value="0.1">
<option value="1000">1000</option> 0.1
</option>
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="5">
5
</option>
<option value="10">
10
</option>
<option value="100">
100
</option>
<option value="1000">
1000
</option>
<option <option
v-if="step && ![0.001,0.01,0.1,1,2,5,10,100,1000].find( (element) => element == step )" v-if="step && ![0.001,0.01,0.1,1,2,5,10,100,1000].find( (element) => element == step )"
:value="step"> :value="step">
@ -40,7 +58,7 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-edit has-text-secondary"/> <i class="tainacan-icon tainacan-icon-18px tainacan-icon-edit has-text-secondary" />
</span> </span>
</button> </button>
</div> </div>
@ -48,14 +66,14 @@
v-if="showEditStepOptions" v-if="showEditStepOptions"
class="is-flex"> class="is-flex">
<b-input <b-input
name="max_options"
v-model="step" v-model="step"
@input="onUpdateStep" name="max_options"
type="number" type="number"
step="1" /> step="1"
@update:model-value="onUpdateStep" />
<button <button
@click.prevent="showEditStepOptions = false" class="button is-white is-pulled-right"
class="button is-white is-pulled-right"> @click.prevent="showEditStepOptions = false">
<span <span
v-tooltip="{ v-tooltip="{
content: $i18n.get('close'), content: $i18n.get('close'),
@ -64,7 +82,7 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-close has-text-secondary"/> <i class="tainacan-icon tainacan-icon-18px tainacan-icon-close has-text-secondary" />
</span> </span>
</button> </button>
</div> </div>
@ -76,8 +94,11 @@
export default { export default {
props: { props: {
value: [String, Number, Array] modelValue: Object
}, },
emits: [
'update:model-value',
],
data() { data() {
return { return {
step: [Number, String], step: [Number, String],
@ -85,11 +106,11 @@
} }
}, },
created() { created() {
this.step = this.value && this.value.step ? this.value.step : 1; this.step = this.modelValue && this.modelValue.step ? this.modelValue.step : 1;
}, },
methods: { methods: {
onUpdateStep(value) { onUpdateStep(modelValue) {
this.$emit('input', { step: value }); this.$emit('update:model-value', { step: modelValue });
} }
} }
} }

43
src/views/admin/components/filter-types/numeric/Numeric.vue → src/views/admin/components/filter-types/numeric/TainacanFilterNumeric.vue
View File

@ -1,21 +1,22 @@
<template> <template>
<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) }"
aria-role="list" aria-role="list"
trap-focus> trap-focus
<button @update:model-value="($event) => { resetPage(); onChangeComparator($event) }">
:aria-label="$i18n.get('label_comparator')" <template #trigger>
class="button is-white" <button
slot="trigger"> :aria-label="$i18n.get('label_comparator')"
<span class="icon is-small"> class="button is-white">
<i v-html="comparatorSymbol" /> <span class="icon is-small">
</span> <i v-html="comparatorSymbol" />
<span class="icon"> </span>
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" /> <span class="icon">
</span> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
</button> </span>
</button>
</template>
<b-dropdown-item <b-dropdown-item
role="button" role="button"
:class="{ 'is-active': comparator == '=' }" :class="{ 'is-active': comparator == '=' }"
@ -61,13 +62,13 @@
</b-dropdown> </b-dropdown>
<b-numberinput <b-numberinput
v-model="value"
:aria-labelledby="'filter-label-id-' + filter.id" :aria-labelledby="'filter-label-id-' + filter.id"
: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"
: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"/>
</div> </div>
</template> </template>
@ -78,6 +79,9 @@
mixins: [ mixins: [
filterTypeMixin filterTypeMixin
], ],
emits: [
'input',
],
data(){ data(){
return { return {
value: null, value: null,
@ -99,8 +103,11 @@
} }
}, },
watch: { watch: {
'query'() { 'query': {
this.updateSelectedValues(); handler() {
this.updateSelectedValues();
},
deep: true
} }
}, },
mounted() { mounted() {

25
src/views/admin/components/filter-types/selectbox/Selectbox.vue → src/views/admin/components/filter-types/selectbox/TainacanFilterSelectbox.vue
View File

@ -4,12 +4,14 @@
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) }"
:placeholder="$i18n.get('label_selectbox_init')" :placeholder="$i18n.get('label_selectbox_init')"
expanded> expanded
<option value="">{{ $i18n.get('label_selectbox_init') }}...</option> @update:model-value="($event) => { resetPage(); onSelect($event) }">
<option value="">
{{ $i18n.get('label_selectbox_init') }}...
</option>
<option <option
v-for="(option, index) in options" v-for="(option, index) in options"
:key="index" :key="index"
@ -30,6 +32,10 @@
export default { export default {
mixins: [filterTypeMixin, dynamicFilterTypeMixin], mixins: [filterTypeMixin, dynamicFilterTypeMixin],
emits: [
'input',
'update-parent-collapse'
],
data(){ data(){
return { return {
options: [], options: [],
@ -42,7 +48,8 @@
if (this.isUsingElasticSearch) if (this.isUsingElasticSearch)
this.loadOptions(); this.loadOptions();
}, },
immediate: true immediate: true,
deep: true
} }
}, },
mounted() { mounted() {
@ -50,10 +57,10 @@
this.loadOptions(); this.loadOptions();
}, },
created() { created() {
this.$eventBusSearch.$on('has-to-reload-facets', this.reloadOptions); this.$eventBusSearchEmitter.on('hasToReloadFacets', this.reloadOptions);
}, },
beforeDestroy() { beforeUnmount() {
this.$eventBusSearch.$off('has-to-reload-facets', this.reloadOptions); this.$eventBusSearchEmitter.off('hasToReloadFacets', this.reloadOptions);
}, },
methods: { methods: {
reloadOptions(shouldReload) { reloadOptions(shouldReload) {
@ -76,7 +83,7 @@
this.updateSelectedValues(); this.updateSelectedValues();
if (res && res.data && res.data.values) if (res && res.data && res.data.values)
this.$emit('updateParentCollapse', res.data.values.length > 0 ); this.$emit('update-parent-collapse', res.data.values.length > 0 );
}) })
.catch( error => { .catch( error => {
if (isCancel(error)) if (isCancel(error))

22
src/views/admin/components/filter-types/taginput/Taginput.vue → src/views/admin/components/filter-types/taginput/TainacanFilterTaginput.vue
View File

@ -10,18 +10,18 @@
:remove-on-keys="[]" :remove-on-keys="[]"
field="label" field="label"
attached attached
@input="($event) => { resetPage(); onSelect($event) }"
@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"
:placeholder="getInputPlaceholder" :placeholder="getInputPlaceholder"
check-infinite-scroll check-infinite-scroll
@update:model-value="($event) => { resetPage(); onSelect($event) }"
@typing="search"
@infinite-scroll="searchMore"> @infinite-scroll="searchMore">
<template slot-scope="props"> <template #default="props">
<div class="media"> <div class="media">
<div <div
class="media-left" v-if="props.option.img"
v-if="props.option.img"> class="media-left">
<img <img
:alt="$i18n.get('label_thumbnail')" :alt="$i18n.get('label_thumbnail')"
width="24" width="24"
@ -37,7 +37,7 @@
</template> </template>
<template <template
v-if="!isLoadingOptions" v-if="!isLoadingOptions"
slot="empty"> #empty>
{{ $i18n.get('info_no_options_found' ) }} {{ $i18n.get('info_no_options_found' ) }}
</template> </template>
</b-taginput> </b-taginput>
@ -50,6 +50,9 @@
export default { export default {
mixins: [filterTypeMixin, dynamicFilterTypeMixin], mixins: [filterTypeMixin, dynamicFilterTypeMixin],
emits: [
'input',
],
data() { data() {
return { return {
results:'', results:'',
@ -73,8 +76,11 @@
} }
}, },
watch: { watch: {
'query'() { 'query': {
this.updateSelectedValues(); handler() {
this.updateSelectedValues();
},
deep: true
} }
}, },
created() { created() {

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

@ -1,45 +1,45 @@
<template> <template>
<b-field <b-field
class="filter-item-forms"
:ref="isMobileScreen ? ('filter-field-id-' + filter.id) : null" :ref="isMobileScreen ? ('filter-field-id-' + filter.id) : null"
@touchstart.native="setFilterFocus(filter.id)" class="filter-item-forms"
@mousedown.native="setFilterFocus(filter.id)" :style="{ columnSpan: filtersAsModal && filter.filter_type_object && filter.filter_type_object.component && (filter.filter_type_object.component == 'tainacan-filter-taxonomy-checkbox' || filter.filter_type_object.component == 'tainacan-filter-checkbox') ? 'all' : 'unset'}"
:style="{ columnSpan: filtersAsModal && filter.filter_type_object && filter.filter_type_object.component && (filter.filter_type_object.component == 'tainacan-filter-taxonomy-checkbox' || filter.filter_type_object.component == 'tainacan-filter-checkbox') ? 'all' : 'unset'}"> @touchstart="setFilterFocus(filter.id)"
@mousedown="setFilterFocus(filter.id)">
<b-collapse <b-collapse
v-if="displayFilter" v-if="displayFilter"
class="show" v-model="singleCollapseOpen"
:open.sync="singleCollapseOpen" class="show"
animation="filter-item"> animation="filter-item">
<button <template #trigger="props">
:for="'filter-input-id-' + filter.id" <button
:aria-controls="'filter-input-id-' + filter.id" :id="'filter-label-id-' + filter.id"
:aria-expanded="singleCollapseOpen" v-tooltip="{
v-tooltip="{ delay: {
delay: { shown: 500,
shown: 500, hide: 300,
hide: 300, },
}, content: filter.name,
content: filter.name, html: false,
html: false, autoHide: false,
autoHide: false, placement: 'top-start',
placement: 'top-start', popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''] }"
}" :for="'filter-input-id-' + filter.id"
:id="'filter-label-id-' + filter.id" :aria-controls="'filter-input-id-' + filter.id"
:aria-label="filter.name" :aria-expanded="singleCollapseOpen"
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 && props.open,
'tainacan-icon-arrowdown' : props.open, 'tainacan-icon-arrowright' : props && !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"
@ -49,9 +49,9 @@
:is-repository-level="isRepositoryLevel" :is-repository-level="isRepositoryLevel"
:is-loading-items="isLoadingItems" :is-loading-items="isLoadingItems"
:current-collection-id="$eventBusSearch.collectionId" :current-collection-id="$eventBusSearch.collectionId"
@input="onInput" :filters-as-modal="filtersAsModal"
@updateParentCollapse="onFilterUpdateParentCollapse" @input="onInput"
:filters-as-modal="filtersAsModal" /> @update-parent-collapse="onFilterUpdateParentCollapse" />
</div> </div>
</b-collapse> </b-collapse>
<div <div
@ -60,8 +60,6 @@
<div class="collapse-trigger"> <div class="collapse-trigger">
<button <button
:for="'filter-input-id-' + filter.id"
:aria-controls="'filter-input-id-' + filter.id"
v-tooltip="{ v-tooltip="{
delay: { delay: {
shown: 500, shown: 500,
@ -73,10 +71,12 @@
placement: 'top-start', placement: 'top-start',
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''] popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
}" }"
@click="displayFilter = true" :for="'filter-input-id-' + filter.id"
class="label"> :aria-controls="'filter-input-id-' + filter.id"
class="label"
@click="displayFilter = true">
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-arrowright tainacan-icon-1-25em"/> <i class="tainacan-icon tainacan-icon-arrowright tainacan-icon-1-25em" />
</span> </span>
<span class="collapse-label">{{ filter.name }}</span> <span class="collapse-label">{{ filter.name }}</span>
</button> </button>
@ -86,32 +86,22 @@
</template> </template>
<script> <script>
import TainacanFilterNumeric from './numeric/Numeric.vue'; import { defineAsyncComponent } from 'vue';
import TainacanFilterDate from './date/Date.vue';
import TainacanFilterSelectbox from './selectbox/Selectbox.vue';
import TainacanFilterAutocomplete from './autocomplete/Autocomplete.vue';
import TainacanFilterCheckbox from './checkbox/Checkbox.vue';
import TainacanFilterTaginput from './taginput/Taginput.vue';
import TainacanFilterTaxonomyCheckbox from './taxonomy/Checkbox.vue';
import TainacanFilterTaxonomyTaginput from './taxonomy/Taginput.vue';
import TainacanFilterDateInterval from './date-interval/DateInterval.vue';
import TainacanFilterNumericInterval from './numeric-interval/NumericInterval.vue';
import TainacanFilterNumericListInterval from './numeric-list-interval/NumericListInterval.vue';
export default { export default {
name: 'TainacanFilterItem', name: 'TainacanFilterItem',
components: { components: {
TainacanFilterNumeric, TainacanFilterNumeric: defineAsyncComponent(() => import('./numeric/TainacanFilterNumeric.vue')),
TainacanFilterDate, TainacanFilterDate: defineAsyncComponent(() => import('./date/TainacanFilterDate.vue')),
TainacanFilterSelectbox, TainacanFilterSelectbox: defineAsyncComponent(() => import('./selectbox/TainacanFilterSelectbox.vue')),
TainacanFilterAutocomplete, TainacanFilterAutocomplete: defineAsyncComponent(() => import('./autocomplete/TainacanFilterAutocomplete.vue')),
TainacanFilterCheckbox, TainacanFilterCheckbox: defineAsyncComponent(() => import('./checkbox/TainacanFilterCheckbox.vue')),
TainacanFilterTaginput, TainacanFilterTaginput: defineAsyncComponent(() => import('./taginput/TainacanFilterTaginput.vue')),
TainacanFilterTaxonomyCheckbox, TainacanFilterTaxonomyCheckbox: defineAsyncComponent(() => import('./taxonomy/TainacanFilterCheckbox.vue')),
TainacanFilterTaxonomyTaginput, TainacanFilterTaxonomyTaginput: defineAsyncComponent(() => import('./taxonomy/TainacanFilterTaginput.vue')),
TainacanFilterDateInterval, TainacanFilterDateInterval: defineAsyncComponent(() => import('./date-interval/TainacanFilterDateInterval.vue')),
TainacanFilterNumericInterval, TainacanFilterNumericInterval: defineAsyncComponent(() => import('./numeric-interval/TainacanFilterNumericInterval.vue')),
TainacanFilterNumericListInterval TainacanFilterNumericListInterval: defineAsyncComponent(() => import('./numeric-list-interval/TainacanFilterNumericListInterval.vue'))
}, },
props: { props: {
filter: Object, filter: Object,
@ -150,7 +140,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'];

63
src/views/admin/components/filter-types/taxonomy/Checkbox.vue → src/views/admin/components/filter-types/taxonomy/TainacanFilterCheckbox.vue
View File

@ -15,9 +15,9 @@
class="b-checkbox checkbox is-small"> class="b-checkbox checkbox is-small">
<input <input
v-model="selected" v-model="selected"
@input="resetPage"
:value="option.value" :value="option.value"
type="checkbox"> type="checkbox"
@input="resetPage">
<span class="check" /> <span class="check" />
<span class="control-label"> <span class="control-label">
<span class="checkbox-label-text">{{ option.label }}</span> <span class="checkbox-label-text">{{ option.label }}</span>
@ -27,8 +27,8 @@
</span> </span>
</label> </label>
<button <button
class="view-all-button link-style"
v-if="option.showViewAllButton" v-if="option.showViewAllButton"
class="view-all-button link-style"
@click="openCheckboxModal(option.parent)"> @click="openCheckboxModal(option.parent)">
{{ $i18n.get('label_view_all') }} {{ $i18n.get('label_view_all') }}
</button> </button>
@ -44,28 +44,28 @@
<checkbox-radio-filter-input <checkbox-radio-filter-input
:is-modal="false" :is-modal="false"
:filter="filter" :filter="filter"
:taxonomy_id="taxonomyId" :taxonomy-id="taxonomyId"
:selected="selected" :selected="selected"
:metadatum-id="metadatumId"
:taxonomy="taxonomy"
:collection-id="collectionId"
:is-taxonomy="true"
:query="query"
:current-collection-id="currentCollectionId"
@input="(newSelected) => { @input="(newSelected) => {
const existingValue = selected.indexOf(newSelected); const existingValue = selected.indexOf(newSelected);
if (existingValue >= 0) if (existingValue >= 0)
selected.splice(existingValue, 1); selected.splice(existingValue, 1);
else else
selected.push(newSelected); selected.push(newSelected);
}" }" />
:metadatum-id="metadatumId"
:taxonomy="taxonomy"
:collection-id="collectionId"
:is-taxonomy="true"
:query="query"
:current-collection-id="currentCollectionId" />
</template> </template>
</div> </div>
</template> </template>
<script> <script>
import qs from 'qs'; import qs from 'qs';
import { tainacan as axios, CancelToken, isCancel } from '../../../js/axios'; import { tainacanApi, CancelToken, isCancel } from '../../../js/axios';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import CheckboxRadioFilterInput from '../../../components/other/checkbox-radio-filter-input.vue'; import CheckboxRadioFilterInput from '../../../components/other/checkbox-radio-filter-input.vue';
import { filterTypeMixin } from '../../../js/filter-types-mixin'; import { filterTypeMixin } from '../../../js/filter-types-mixin';
@ -75,9 +75,12 @@
mixins: [ filterTypeMixin ], mixins: [ filterTypeMixin ],
props: { props: {
isRepositoryLevel: Boolean, isRepositoryLevel: Boolean,
currentCollectionId: String,
filtersAsModal: Boolean filtersAsModal: Boolean
}, },
emits: [
'input',
'update-parent-collapse'
],
data(){ data(){
return { return {
isLoadingOptions: true, isLoadingOptions: true,
@ -94,19 +97,23 @@
} }
}, },
watch: { watch: {
selected(newVal, oldVal) { selected: {
const isEqual = (Array.isArray(newVal) && Array.isArray(oldVal) && (newVal.length == oldVal.length)) && newVal.every((element, index) => { handler(newVal, oldVal) {
return element === oldVal[index]; const isEqual = (Array.isArray(newVal) && Array.isArray(oldVal) && (newVal.length == oldVal.length)) && newVal.every((element, index) => {
}); return element === oldVal[index];
if (!isEqual) });
this.onSelect(); if (!isEqual)
this.onSelect();
},
deep: true
}, },
facetsFromItemSearch: { facetsFromItemSearch: {
handler() { handler() {
if (this.isUsingElasticSearch) if (this.isUsingElasticSearch)
this.loadOptions(); this.loadOptions();
}, },
immediate: true immediate: true,
deep:true
}, },
isLoadingItems: { isLoadingItems: {
handler() { handler() {
@ -125,19 +132,19 @@
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.$on('has-to-reload-facets', this.reloadOptions); this.$eventBusSearchEmitter.on('hasToReloadFacets', this.reloadOptions);
}, },
mounted(){ mounted(){
if (!this.isUsingElasticSearch) if (!this.isUsingElasticSearch)
this.loadOptions(); this.loadOptions();
}, },
beforeDestroy() { beforeUnmount() {
// Cancels previous Request // Cancels previous Request
if (this.getOptionsValuesCancel != undefined) if (this.getOptionsValuesCancel != undefined)
this.getOptionsValuesCancel.cancel('Facet search Canceled.'); this.getOptionsValuesCancel.cancel('Facet search Canceled.');
this.$eventBusSearch.$off('has-to-reload-facets', this.reloadOptions); this.$eventBusSearchEmitter.off('hasToReloadFacets', this.reloadOptions);
}, },
methods: { methods: {
...mapGetters('search', [ ...mapGetters('search', [
@ -175,7 +182,7 @@
promise = new Object({ promise = new Object({
request: request:
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
axios.get(route, { cancelToken: source.token}) tainacanApi.get(route, { cancelToken: source.token})
.then( res => { .then( res => {
resolve(res) resolve(res)
}) })
@ -191,7 +198,7 @@
this.prepareOptionsForTaxonomy(res.data.values ? res.data.values : res.data); this.prepareOptionsForTaxonomy(res.data.values ? res.data.values : res.data);
if (res && res.data && res.data.values) if (res && res.data && res.data.values)
this.$emit('updateParentCollapse', res.data.values.length > 0 ); this.$emit('update-parent-collapse', res.data.values.length > 0 );
}) })
.catch( error => { .catch( error => {
if (isCancel(error)) { if (isCancel(error)) {
@ -210,10 +217,10 @@
if (facet == this.filter.id) { if (facet == this.filter.id) {
if (Array.isArray(this.facetsFromItemSearch[facet])) { if (Array.isArray(this.facetsFromItemSearch[facet])) {
this.prepareOptionsForTaxonomy(this.facetsFromItemSearch[facet]); this.prepareOptionsForTaxonomy(this.facetsFromItemSearch[facet]);
this.$emit('updateParentCollapse', this.facetsFromItemSearch[facet].length > 0 ); this.$emit('update-parent-collapse', this.facetsFromItemSearch[facet].length > 0 );
} else { } else {
this.prepareOptionsForTaxonomy(Object.values(this.facetsFromItemSearch[facet])); this.prepareOptionsForTaxonomy(Object.values(this.facetsFromItemSearch[facet]));
this.$emit('updateParentCollapse', Object.values(this.facetsFromItemSearch[facet]).length > 0 ); this.$emit('update-parent-collapse', Object.values(this.facetsFromItemSearch[facet]).length > 0 );
} }
} }
} }
@ -244,7 +251,7 @@
props: { props: {
parent: parent, parent: parent,
filter: this.filter, filter: this.filter,
taxonomy_id: this.taxonomyId, taxonomyId: this.taxonomyId,
selected: this.selected, selected: this.selected,
metadatumId: this.metadatumId, metadatumId: this.metadatumId,
taxonomy: this.taxonomy, taxonomy: this.taxonomy,

22
src/views/admin/components/filter-types/taxonomy/Taginput.vue → src/views/admin/components/filter-types/taxonomy/TainacanFilterTaginput.vue
View File

@ -13,12 +13,12 @@
: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"
:class="{'has-selected': selected != undefined && selected != []}" :class="{'has-selected': selected != undefined && selected != []}"
@typing="search"
@input="($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
@typing="search"
@update:model-value="($event) => { resetPage(); onSelect($event) }"
@infinite-scroll="searchMore"> @infinite-scroll="searchMore">
<template slot-scope="props"> <template #default="props">
<div class="media"> <div class="media">
<div class="media-content"> <div class="media-content">
<span class="ellipsed-text">{{ props.option.label }}</span> <span class="ellipsed-text">{{ props.option.label }}</span>
@ -30,7 +30,7 @@
</template> </template>
<template <template
v-if="!isLoadingOptions" v-if="!isLoadingOptions"
slot="empty"> #empty>
{{ $i18n.get('info_no_options_found' ) }} {{ $i18n.get('info_no_options_found' ) }}
</template> </template>
</b-taginput> </b-taginput>
@ -39,11 +39,14 @@
<script> <script>
import qs from 'qs'; import qs from 'qs';
import { tainacan as axios } from '../../../js/axios'; import { tainacanApi } from '../../../js/axios';
import { filterTypeMixin } from '../../../js/filter-types-mixin'; import { filterTypeMixin } from '../../../js/filter-types-mixin';
export default { export default {
mixins: [ filterTypeMixin ], mixins: [ filterTypeMixin ],
emits: [
'input',
],
data(){ data(){
return { return {
isLoadingOptions: false, isLoadingOptions: false,
@ -64,8 +67,11 @@
}, },
immediate: true immediate: true
}, },
'query'() { 'query': {
this.updateSelectedValues(); handler() {
this.updateSelectedValues();
},
deep: true
} }
}, },
created() { created() {
@ -126,7 +132,7 @@
const valuesToIgnore = JSON.parse(JSON.stringify(this.selected)); const valuesToIgnore = JSON.parse(JSON.stringify(this.selected));
return axios.get(endpoint).then( res => { return tainacanApi.get(endpoint).then( res => {
for (let term of res.data.values) { for (let term of res.data.values) {
if (valuesToIgnore != undefined && valuesToIgnore.length > 0) { if (valuesToIgnore != undefined && valuesToIgnore.length > 0) {

36
src/views/admin/components/lists/activities-list.vue
View File

@ -6,32 +6,38 @@
<tr> <tr>
<!-- Title --> <!-- Title -->
<th> <th>
<div class="th-wrap">{{ $i18n.get('label_activity_title') }}</div> <div class="th-wrap">
{{ $i18n.get('label_activity_title') }}
</div>
</th> </th>
<!-- Created by --> <!-- Created by -->
<th> <th>
<div class="th-wrap">{{ $i18n.get('label_created_by') }}</div> <div class="th-wrap">
{{ $i18n.get('label_created_by') }}
</div>
</th> </th>
<!-- Activity date --> <!-- Activity date -->
<th> <th>
<div class="th-wrap">{{ $i18n.get('label_activity_date') }}</div> <div class="th-wrap">
{{ $i18n.get('label_activity_date') }}
</div>
</th> </th>
<!--&lt;!&ndash; Approbation &ndash;&gt;--> <!--&lt;!&ndash; Approbation &ndash;&gt;-->
<!--<th>--> <!--<th>-->
<!--<div class="th-wrap">{{ $i18n.get('label_approbation') }}</div>--> <!--<div class="th-wrap">{{ $i18n.get('label_approbation') }}</div>-->
<!--</th>--> <!--</th>-->
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr <tr
:key="index" v-for="(activity, index) of activities"
v-for="(activity, index) of activities"> :key="index">
<!-- Name --> <!-- Name -->
<td <td
class="column-default-width column-main-content" class="column-default-width column-main-content"
@click="openActivityDetailsModal(activity)"
:label="$i18n.get('label_activity_title')" :label="$i18n.get('label_activity_title')"
:aria-label="$i18n.get('label_activity_title') + ': ' + activity.title"> :aria-label="$i18n.get('label_activity_title') + ': ' + activity.title"
@click="openActivityDetailsModal(activity)">
<p <p
v-tooltip="{ v-tooltip="{
delay: { delay: {
@ -49,9 +55,9 @@
<!-- User --> <!-- User -->
<td <td
class="table-creation column-small-width" class="table-creation column-small-width"
@click="openActivityDetailsModal(activity)"
:label="$i18n.get('label_created_by')" :label="$i18n.get('label_created_by')"
:aria-label="$i18n.get('label_created_by') + ': ' + activity.user_name"> :aria-label="$i18n.get('label_created_by') + ': ' + activity.user_name"
@click="openActivityDetailsModal(activity)">
<p <p
v-tooltip="{ v-tooltip="{
delay: { delay: {
@ -63,14 +69,14 @@
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start' placement: 'auto-start'
}" }"
v-html="activity.user_name"/> v-html="activity.user_name" />
</td> </td>
<!-- Activity Date --> <!-- Activity Date -->
<td <td
class="table-creation column-small-width" class="table-creation column-small-width"
@click="openActivityDetailsModal(activity)"
:label="$i18n.get('label_activity_date')" :label="$i18n.get('label_activity_date')"
:aria-label="$i18n.get('label_activity_date') + ': ' + activity.date"> :aria-label="$i18n.get('label_activity_date') + ': ' + activity.date"
@click="openActivityDetailsModal(activity)">
<p <p
v-tooltip="{ v-tooltip="{
delay: { delay: {
@ -82,7 +88,7 @@
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start' placement: 'auto-start'
}" }"
v-html="activity.date"/> v-html="activity.date" />
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -95,7 +101,7 @@
<div class="content has-text-grey has-text-centered"> <div class="content has-text-grey has-text-centered">
<p> <p>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-30px tainacan-icon-activities"/> <i class="tainacan-icon tainacan-icon-30px tainacan-icon-activities" />
</span> </span>
</p> </p>
<p>{{ $i18n.get('info_no_activities') }}</p> <p>{{ $i18n.get('info_no_activities') }}</p>

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

@ -4,8 +4,8 @@
style="position: relative;" style="position: relative;"
class="table-container"> class="table-container">
<b-loading <b-loading
:is-full-page="false" v-model="isLoading"
:active.sync="isLoading" /> :is-full-page="false" />
<div <div
v-if="attachments.length > 0" v-if="attachments.length > 0"
class="table-wrapper"> class="table-wrapper">
@ -23,20 +23,20 @@
<file-item <file-item
:show-name="true" :show-name="true"
:modal-on-click="true" :modal-on-click="true"
:file="attachment"/> :file="attachment" />
<span <span
v-if="isEditable && form.document != attachment.id" v-if="isEditable && form.document != attachment.id"
class="file-item-control"> class="file-item-control">
<a <a
@click="onDeleteAttachment(attachment)"
v-tooltip="{ v-tooltip="{
content: $i18n.get('delete'), content: $i18n.get('delete'),
autoHide: true, autoHide: true,
placement: 'bottom', placement: 'bottom',
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon"
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/> @click="onDeleteAttachment(attachment)">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete" />
</a> </a>
</span> </span>
</div> </div>
@ -49,7 +49,7 @@
<div class="content has-text-grey has-text-centered"> <div class="content has-text-grey has-text-centered">
<p> <p>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-30px tainacan-icon-attachments"/> <i class="tainacan-icon tainacan-icon-30px tainacan-icon-attachments" />
</span> </span>
</p> </p>
<p>{{ $i18n.getWithVariables('info_no_%s_on_item_yet', [ collection && collection.item_attachment_label ? collection.item_attachment_label : $i18n.get('label_attachments') ]) }}</p> <p>{{ $i18n.getWithVariables('info_no_%s_on_item_yet', [ collection && collection.item_attachment_label ? collection.item_attachment_label : $i18n.get('label_attachments') ]) }}</p>
@ -59,29 +59,29 @@
</div> </div>
<div <div
class="pagination-area" v-if="attachments.length > 0"
v-if="attachments.length > 0"> class="pagination-area">
<div class="shown-items"> <div class="shown-items">
{{ {{
$i18n.getWithVariables('info_showing_%s', [ collection && collection.item_attachment_label ? collection.item_attachment_label : $i18n.get('label_attachments') ]) + ' ' + $i18n.getWithVariables('info_showing_%s', [ collection && collection.item_attachment_label ? collection.item_attachment_label : $i18n.get('label_attachments') ]) + ' ' +
(attachmentsPerPage * (attachmentsPage - 1) + 1) + (attachmentsPerPage * (attachmentsPage - 1) + 1) +
$i18n.get('info_to') + $i18n.get('info_to') +
getLastAttachmentsNumber() + getLastAttachmentsNumber() +
$i18n.get('info_of') + totalAttachments + '.' $i18n.get('info_of') + totalAttachments + '.'
}} }}
</div> </div>
<div class="pagination"> <div class="pagination">
<b-pagination <b-pagination
@change="onPageChange" v-model="attachmentsPage"
:total="totalAttachments" :total="totalAttachments"
:current.sync="attachmentsPage"
order="is-centered" order="is-centered"
size="is-small" size="is-small"
:per-page="attachmentsPerPage" :per-page="attachmentsPerPage"
:aria-next-label="$i18n.get('label_next_page')" :aria-next-label="$i18n.get('label_next_page')"
:aria-previous-label="$i18n.get('label_previous_page')" :aria-previous-label="$i18n.get('label_previous_page')"
:aria-page-label="$i18n.get('label_page')" :aria-page-label="$i18n.get('label_page')"
:aria-current-label="$i18n.get('label_current_page')"/> :aria-current-label="$i18n.get('label_current_page')"
@change="onPageChange" />
</div> </div>
</div> </div>
</div> </div>
@ -103,6 +103,9 @@
shouldLoadAttachments: Boolean, shouldLoadAttachments: Boolean,
isEditable: Boolean, isEditable: Boolean,
}, },
emits: [
'on-delete-attachment',
],
data() { data() {
return { return {
attachmentsPage: 1, attachmentsPage: 1,
@ -167,9 +170,8 @@
// excludeDocumentId: this.form.document, // excludeDocumentId: this.form.document,
// excludeThumbnailId: this.item.thumbnail_id // excludeThumbnailId: this.item.thumbnail_id
}) })
.then((response) => { .then(() => {
this.isLoading = false; this.isLoading = false;
this.totalAttachments = response.total;
}) })
.catch((error) => { .catch((error) => {
this.isLoading = false; this.isLoading = false;
@ -177,7 +179,7 @@
}) })
}, },
onDeleteAttachment(attachment) { onDeleteAttachment(attachment) {
this.$emit('onDeleteAttachment', attachment); this.$emit('on-delete-attachment', attachment);
} }
} }
} }

160
src/views/admin/components/lists/capabilities-list.vue
View File

@ -6,69 +6,76 @@
<tr> <tr>
<!-- Name --> <!-- Name -->
<th> <th>
<div class="th-wrap">{{ $i18n.get('label_name') }}</div> <div class="th-wrap">
{{ $i18n.get('label_name') }}
</div>
</th> </th>
<!-- Description --> <!-- Description -->
<th> <th>
<div class="th-wrap">{{ $i18n.get('label_description') }}</div> <div class="th-wrap">
{{ $i18n.get('label_description') }}
</div>
</th> </th>
<!-- Capability date --> <!-- Capability date -->
<th> <th>
<div class="th-wrap">{{ $i18n.get('label_user_roles') }}</div> <div class="th-wrap">
{{ $i18n.get('label_user_roles') }}
</div>
</th> </th>
<!-- Actions --> <!-- Actions -->
<th class="actions-header"> <th class="actions-header">
&nbsp; &nbsp;
<!-- nothing to show on header for actions cell--> <!-- nothing to show on header for actions cell-->
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody v-if="!isLoading"> <tbody v-if="!isLoading">
<template v-for="(capability, index) of capabilities"> <tr
<tr :key="index"> v-for="(capability, index) of capabilities"
<!-- Name --> :key="index">
<td <!-- Name -->
class="column-default-width column-main-content" <td
:label="$i18n.get('label_name')" class="column-default-width column-main-content"
:aria-label="$i18n.get('label_name') + ': ' + capability.display_name"> :label="$i18n.get('label_name')"
<p :aria-label="$i18n.get('label_name') + ': ' + capability.display_name">
v-tooltip="{ <p
delay: { v-tooltip="{
shown: 500, delay: {
hide: 120, shown: 500,
}, hide: 120,
content: capability.display_name, },
autoHide: false, content: capability.display_name,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], autoHide: false,
placement: 'auto-start' popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
}"> placement: 'auto-start'
{{ capability.display_name }} }">
</p> {{ capability.display_name }}
</td> </p>
<!-- Description --> </td>
<td <!-- Description -->
class="table-creation column-large-width" <td
:label="$i18n.get('label_description')" class="table-creation column-large-width"
:aria-label="$i18n.get('label_description') + ': ' + capability.description"> :label="$i18n.get('label_description')"
<p :aria-label="$i18n.get('label_description') + ': ' + capability.description">
v-tooltip="{ <p
delay: { v-tooltip="{
shown: 500, delay: {
hide: 120, shown: 500,
}, hide: 120,
content: capability.description, },
autoHide: false, content: capability.description,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], autoHide: false,
placement: 'auto-start' popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
}" placement: 'auto-start'
v-html="capability.description"/> }"
</td> v-html="capability.description" />
<!-- Associated Roles --> </td>
<complete-roles-list <!-- Associated Roles -->
v-if="capability.roles" <complete-roles-list
:complete-roles-list="getCompleteRolesList(capability.roles, capability.roles_inherited)"> v-if="capability.roles"
:complete-roles-list="getCompleteRolesList(capability.roles, capability.roles_inherited)">
<template #props>
<td <td
slot-scope="props"
class="table-creation column-small-width" class="table-creation column-small-width"
:label="$i18n.get('label_associated_roles')" :label="$i18n.get('label_associated_roles')"
:aria-label="$i18n.get('label_associated_roles') + ': ' + props['complete-roles-list']"> :aria-label="$i18n.get('label_associated_roles') + ': ' + props['complete-roles-list']">
@ -83,33 +90,33 @@
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start' placement: 'auto-start'
}" }"
v-html="props['complete-roles-list']"/> v-html="props['complete-roles-list']" />
</td> </td>
</complete-roles-list> </template>
<!-- Actions --> </complete-roles-list>
<td <!-- Actions -->
class="actions-cell column-default-width" <td
:label="$i18n.get('label_actions')"> class="actions-cell column-default-width"
<div class="actions-container"> :label="$i18n.get('label_actions')">
<a <div class="actions-container">
id="button-edit" <a
:aria-label="$i18n.get('edit')" id="button-edit"
@click="openCapabilitiyEditModal(index)"> :aria-label="$i18n.get('edit')"
<span @click="openCapabilitiyEditModal(index)">
v-tooltip="{ <span
content: $i18n.get('edit'), v-tooltip="{
autoHide: true, content: $i18n.get('edit'),
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], autoHide: true,
placement: 'auto' popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
}" placement: 'auto'
class="icon"> }"
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/> class="icon">
</span> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit" />
</a> </span>
</div> </a>
</td> </div>
</tr> </td>
</template> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -121,8 +128,9 @@
// Auxiliary component for avoinding multiple calls to getCompleteRolesList // Auxiliary component for avoinding multiple calls to getCompleteRolesList
const CompleteRolesList = { const CompleteRolesList = {
inheritAttrs: false,
render() { render() {
return this.$scopedSlots.default(this.$attrs) return !!this.$slots.default && typeof this.$slots.default == 'function' ? this.$slots.default(this.$attrs) : '';
} }
} }
export default { export default {
@ -132,7 +140,7 @@
}, },
props: { props: {
isLoading: false, isLoading: false,
capabilities: Array capabilities: Object
}, },
methods: { methods: {
openCapabilitiyEditModal(capabilityKey) { openCapabilitiyEditModal(capabilityKey) {

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

File diff suppressed because it is too large Load Diff

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

@ -7,12 +7,11 @@
class="new-collection-menu"> class="new-collection-menu">
<li> <li>
<router-link <router-link
tag="a"
:to="$routerHelper.getNewCollectionPath()" :to="$routerHelper.getNewCollectionPath()"
class="first-card"> class="first-card">
<div class="list-metadata"> <div class="list-metadata">
<span class="icon is-large"> <span class="icon is-large">
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-addcollection"/> <i class="tainacan-icon tainacan-icon-36px tainacan-icon-addcollection" />
</span> </span>
<div>{{ $i18n.get('label_create_collection') }}</div> <div>{{ $i18n.get('label_create_collection') }}</div>
</div> </div>
@ -20,7 +19,6 @@
</li> </li>
<li> <li>
<router-link <router-link
tag="a"
:to="{ path: $routerHelper.getNewCollectionPath() }" :to="{ path: $routerHelper.getNewCollectionPath() }"
:aria-label="$i18n.get('label_collection_items')"> :aria-label="$i18n.get('label_collection_items')">
<span <span
@ -31,14 +29,13 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon is-medium"> class="icon is-medium">
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-items"/> <i class="tainacan-icon tainacan-icon-36px tainacan-icon-items" />
</span> </span>
<span class="menu-text">{{ $i18n.get('items') }}</span> <span class="menu-text">{{ $i18n.get('items') }}</span>
</router-link> </router-link>
</li> </li>
<li> <li>
<router-link <router-link
tag="a"
:to="{ path: $routerHelper.getNewCollectionPath() }" :to="{ path: $routerHelper.getNewCollectionPath() }"
:aria-label="$i18n.get('label_collection_metadata')"> :aria-label="$i18n.get('label_collection_metadata')">
<span <span
@ -49,14 +46,13 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon is-medium"> class="icon is-medium">
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/> <i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata" />
</span> </span>
<span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span> <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span>
</router-link> </router-link>
</li> </li>
<li> <li>
<router-link <router-link
tag="a"
:to="{ path: $routerHelper.getNewCollectionPath() }" :to="{ path: $routerHelper.getNewCollectionPath() }"
:aria-label="$i18n.get('label_collection_filters')"> :aria-label="$i18n.get('label_collection_filters')">
<span <span
@ -67,7 +63,7 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon is-medium"> class="icon is-medium">
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-filters"/> <i class="tainacan-icon tainacan-icon-36px tainacan-icon-filters" />
</span> </span>
<span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span> <span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span>
</router-link> </router-link>
@ -75,20 +71,18 @@
</ul> </ul>
<ul v-if="collections.length > 0 && !isLoading"> <ul v-if="collections.length > 0 && !isLoading">
<li v-if="!$adminOptions.hideHomeCollectionCreateNewButton && $userCaps.hasCapability('tnc_rep_edit_collections')"> <li v-if="!$adminOptions.hideHomeCollectionCreateNewButton && $userCaps.hasCapability('tnc_rep_edit_collections')">
<router-link <router-link
tag="a"
:to="$routerHelper.getNewCollectionPath()" :to="$routerHelper.getNewCollectionPath()"
class="tainacan-card new-card"> class="tainacan-card new-card">
<div class="list-metadata"> <div class="list-metadata">
<span class="icon is-large"> <span class="icon is-large">
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-addcollection"/> <i class="tainacan-icon tainacan-icon-36px tainacan-icon-addcollection" />
</span> </span>
<div>{{ $i18n.get('label_create_collection') }}</div> <div>{{ $i18n.get('label_create_collection') }}</div>
</div> </div>
<ul class="menu-list"> <ul class="menu-list">
<li> <li>
<router-link <router-link
tag="a"
:to="{ path: $routerHelper.getNewCollectionPath() }" :to="{ path: $routerHelper.getNewCollectionPath() }"
:aria-label="$i18n.get('label_collection_items')"> :aria-label="$i18n.get('label_collection_items')">
<span <span
@ -98,14 +92,13 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-items"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-items" />
</span> </span>
<!-- <span class="menu-text">{{ $i18n.get('items') }}</span> --> <!-- <span class="menu-text">{{ $i18n.get('items') }}</span> -->
</router-link> </router-link>
</li> </li>
<li> <li>
<router-link <router-link
tag="a"
:to="{ path: $routerHelper.getNewCollectionPath() }" :to="{ path: $routerHelper.getNewCollectionPath() }"
:aria-label="$i18n.get('label_collection_metadata')"> :aria-label="$i18n.get('label_collection_metadata')">
<span <span
@ -115,14 +108,13 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-metadata"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-metadata" />
</span> </span>
<!-- <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span> --> <!-- <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span> -->
</router-link> </router-link>
</li> </li>
<li> <li>
<router-link <router-link
tag="a"
:to="{ path: $routerHelper.getNewCollectionPath() }" :to="{ path: $routerHelper.getNewCollectionPath() }"
:aria-label="$i18n.get('label_collection_filters')"> :aria-label="$i18n.get('label_collection_filters')">
<span <span
@ -132,7 +124,7 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-filters"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-filters" />
</span> </span>
<!-- <span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span> --> <!-- <span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span> -->
</router-link> </router-link>
@ -141,14 +133,13 @@
</router-link> </router-link>
</li> </li>
<li <li
:key="index"
v-for="(collection, index) of collections" v-for="(collection, index) of collections"
:key="index"
class="tainacan-card" class="tainacan-card"
:class="{ 'always-visible-collections': $adminOptions.homeCollectionsPerPage }"> :class="{ 'always-visible-collections': $adminOptions.homeCollectionsPerPage }">
<ul class="menu-list"> <ul class="menu-list">
<li> <li>
<router-link <router-link
tag="a"
:to="{ path: $routerHelper.getCollectionItemsPath(collection.id, '') }" :to="{ path: $routerHelper.getCollectionItemsPath(collection.id, '') }"
:aria-label="$i18n.get('label_collection_items')"> :aria-label="$i18n.get('label_collection_items')">
<span <span
@ -158,14 +149,13 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-items"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-items" />
</span> </span>
<!-- <span class="menu-text">{{ $i18n.get('items') }}</span> --> <!-- <span class="menu-text">{{ $i18n.get('items') }}</span> -->
</router-link> </router-link>
</li> </li>
<li v-if="collection.current_user_can_edit_items && $adminOptions.showHomeCollectionCreateItemButton"> <li v-if="collection.current_user_can_edit_items && $adminOptions.showHomeCollectionCreateItemButton">
<router-link <router-link
tag="a"
:to="{ path: $routerHelper.getNewItemPath(collection.id) }" :to="{ path: $routerHelper.getNewItemPath(collection.id) }"
:aria-label="$i18n.get('add_one_item')"> :aria-label="$i18n.get('add_one_item')">
<span <span
@ -175,14 +165,13 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-add"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-add" />
</span> </span>
<!-- <span class="menu-text">{{ $i18n.get('add_one_item') }}</span> --> <!-- <span class="menu-text">{{ $i18n.get('add_one_item') }}</span> -->
</router-link> </router-link>
</li> </li>
<li v-if="collection.current_user_can_edit && !$adminOptions.hideHomeCollectionSettingsButton"> <li v-if="collection.current_user_can_edit && !$adminOptions.hideHomeCollectionSettingsButton">
<router-link <router-link
tag="a"
:to="{ path: $routerHelper.getCollectionEditPath(collection.id) }" :to="{ path: $routerHelper.getCollectionEditPath(collection.id) }"
:aria-label="$i18n.get('label_settings')"> :aria-label="$i18n.get('label_settings')">
<span <span
@ -192,14 +181,13 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-settings"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-settings" />
</span> </span>
<!-- <span class="menu-text">{{ $i18n.get('label_settings') }}</span> --> <!-- <span class="menu-text">{{ $i18n.get('label_settings') }}</span> -->
</router-link> </router-link>
</li> </li>
<li v-if="collection.current_user_can_edit_metadata && !$adminOptions.hideHomeCollectionMetadataButton"> <li v-if="collection.current_user_can_edit_metadata && !$adminOptions.hideHomeCollectionMetadataButton">
<router-link <router-link
tag="a"
:to="{ path: $routerHelper.getCollectionMetadataPath(collection.id) }" :to="{ path: $routerHelper.getCollectionMetadataPath(collection.id) }"
:aria-label="$i18n.get('label_collection_metadata')"> :aria-label="$i18n.get('label_collection_metadata')">
<span <span
@ -209,14 +197,13 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-metadata"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-metadata" />
</span> </span>
<!-- <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span> --> <!-- <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span> -->
</router-link> </router-link>
</li> </li>
<li v-if="collection.current_user_can_edit_filters && !$adminOptions.hideHomeCollectionFiltersButton"> <li v-if="collection.current_user_can_edit_filters && !$adminOptions.hideHomeCollectionFiltersButton">
<router-link <router-link
tag="a"
:to="{ path: $routerHelper.getCollectionFiltersPath(collection.id) }" :to="{ path: $routerHelper.getCollectionFiltersPath(collection.id) }"
:aria-label="$i18n.get('label_collection_filters')"> :aria-label="$i18n.get('label_collection_filters')">
<span <span
@ -226,14 +213,13 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-filters"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-filters" />
</span> </span>
<!-- <span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span> --> <!-- <span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span> -->
</router-link> </router-link>
</li> </li>
<li v-if="$userCaps.hasCapability('tnc_rep_read_logs') && !$adminOptions.hideHomeCollectionActivitiesButton"> <li v-if="$userCaps.hasCapability('tnc_rep_read_logs') && !$adminOptions.hideHomeCollectionActivitiesButton">
<router-link <router-link
tag="a"
:to="{ path: $routerHelper.getCollectionActivitiesPath(collection.id) }" :to="{ path: $routerHelper.getCollectionActivitiesPath(collection.id) }"
:aria-label="$i18n.get('label_collection_activities')"> :aria-label="$i18n.get('label_collection_activities')">
<span <span
@ -243,7 +229,7 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-activities"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-activities" />
</span> </span>
<!-- <span class="menu-text">{{ $i18n.get('activities') }}</span> --> <!-- <span class="menu-text">{{ $i18n.get('activities') }}</span> -->
</router-link> </router-link>
@ -260,19 +246,18 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-openurl"/> <i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-openurl" />
</span> </span>
</a> </a>
</li> </li>
</ul> </ul>
<router-link <router-link
tag="a"
:to="$routerHelper.getCollectionPath(collection.id)" :to="$routerHelper.getCollectionPath(collection.id)"
class="card-body"> class="card-body">
<img <img
:alt="$i18n.get('label_thumbnail')" v-if="collection.thumbnail != undefined"
v-if="collection.thumbnail != undefined" :alt="$i18n.get('label_thumbnail')"
:src="$thumbHelper.getSrc(collection['thumbnail'], 'tainacan-medium')"> :src="$thumbHelper.getSrc(collection['thumbnail'], 'tainacan-medium')">
<!-- Name --> <!-- Name -->
<div class="metadata-title"> <div class="metadata-title">

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

@ -8,32 +8,31 @@
<div class="field select-all is-pulled-left"> <div class="field select-all is-pulled-left">
<span> <span>
<b-checkbox <b-checkbox
@click.native="selectAllCollectionsOnPage()" :model-value="allCollectionsOnPageSelected"
:native-value="allCollectionsOnPageSelected"> @update:model-value="selectAllCollectionsOnPage()">
{{ $i18n.get('label_select_all_collections_page') }} {{ $i18n.get('label_select_all_collections_page') }}
</b-checkbox> </b-checkbox>
</span> </span>
</div> </div>
<div class="field is-pulled-right"> <div class="field is-pulled-right">
<b-dropdown <b-dropdown
id="bulk-actions-dropdown"
position="is-bottom-left" position="is-bottom-left"
:disabled="!isSelectingCollections" :disabled="!isSelectingCollections"
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()" aria-role="listitem"
aria-role="listitem"> @click="deleteSelectedCollections()">
{{ $i18n.get('label_delete_selected_collections') }} {{ $i18n.get('label_delete_selected_collections') }}
</b-dropdown-item> </b-dropdown-item>
<!-- <b-dropdown-item <!-- <b-dropdown-item
@ -52,37 +51,37 @@
<!-- Backdrop for escaping context menu --> <!-- Backdrop for escaping context menu -->
<div <div
@click.left="clearContextMenu()" class="context-menu-backdrop"
@click.right="clearContextMenu()" @click.left="clearContextMenu()"
class="context-menu-backdrop" /> @click.right="clearContextMenu()" />
<b-dropdown <b-dropdown
inline inline
:style="{ top: cursorPosY + 'px', left: cursorPosX + 'px' }" :style="{ top: cursorPosY + 'px', left: cursorPosX + 'px' }"
trap-focus> trap-focus>
<b-dropdown-item <b-dropdown-item
@click="openCollection()" v-if="!isOnTrash"
v-if="!isOnTrash"> @click="openCollection()">
{{ $i18n.getFrom('collections', 'view_item') }} {{ $i18n.getFrom('collections', 'view_item') }}
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item <b-dropdown-item
@click="openCollectionOnNewTab()" v-if="!isOnTrash"
v-if="!isOnTrash"> @click="openCollectionOnNewTab()">
{{ $i18n.get('label_open_collection_new_tab') }} {{ $i18n.get('label_open_collection_new_tab') }}
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item <b-dropdown-item
@click="selectCollection()" v-if="contextMenuIndex != null"
v-if="contextMenuIndex != null"> @click="selectCollection()">
{{ !selectedCollections[contextMenuIndex] ? $i18n.get('label_select_collection') : $i18n.get('label_unselect_collection') }} {{ !selectedCollections[contextMenuIndex] ? $i18n.get('label_select_collection') : $i18n.get('label_unselect_collection') }}
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item <b-dropdown-item
@click="goToCollectionEditPage(contextMenuCollection)" v-if="contextMenuCollection != null && (collections[contextMenuIndex] && collections[contextMenuIndex].current_user_can_edit)"
v-if="contextMenuCollection != null && (collections[contextMenuIndex] && collections[contextMenuIndex].current_user_can_edit)"> @click="goToCollectionEditPage(contextMenuCollection)">
{{ $i18n.getFrom('collections', 'edit_item') }} {{ $i18n.getFrom('collections', 'edit_item') }}
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item <b-dropdown-item
@click="deleteOneCollection(contextMenuCollection)" v-if="contextMenuCollection != null && (collections[contextMenuIndex] && collections[contextMenuIndex].current_user_can_delete)"
v-if="contextMenuCollection != null && (collections[contextMenuIndex] && collections[contextMenuIndex].current_user_can_delete)"> @click="deleteOneCollection(contextMenuCollection)">
{{ $i18n.get('label_delete_collection') }} {{ $i18n.get('label_delete_collection') }}
</b-dropdown-item> </b-dropdown-item>
</b-dropdown> </b-dropdown>
@ -93,7 +92,7 @@
<!-- Checking list --> <!-- Checking list -->
<th v-if="$userCaps.hasCapability('tnc_rep_delete_collections')"> <th v-if="$userCaps.hasCapability('tnc_rep_delete_collections')">
&nbsp; &nbsp;
<!-- nothing to show on header --> <!-- nothing to show on header -->
</th> </th>
<!-- Status icon --> <!-- Status icon -->
<th v-if="isOnAllCollectionsTab"> <th v-if="isOnAllCollectionsTab">
@ -101,51 +100,65 @@
</th> </th>
<!-- Thumbnail --> <!-- Thumbnail -->
<th class="thumbnail-cell"> <th class="thumbnail-cell">
<div class="th-wrap">{{ $i18n.get('label_thumbnail') }}</div> <div class="th-wrap">
{{ $i18n.get('label_thumbnail') }}
</div>
</th> </th>
<!-- Name --> <!-- Name -->
<th> <th>
<div class="th-wrap">{{ $i18n.get('label_name') }}</div> <div class="th-wrap">
{{ $i18n.get('label_name') }}
</div>
</th> </th>
<!-- Description --> <!-- Description -->
<th> <th>
<div class="th-wrap">{{ $i18n.get('label_description') }}</div> <div class="th-wrap">
{{ $i18n.get('label_description') }}
</div>
</th> </th>
<!-- Modification Date --> <!-- Modification Date -->
<th> <th>
<div class="th-wrap">{{ $i18n.get('label_modification_date') }}</div> <div class="th-wrap">
{{ $i18n.get('label_modification_date') }}
</div>
</th> </th>
<!-- Creation Date --> <!-- Creation Date -->
<th> <th>
<div class="th-wrap">{{ $i18n.get('label_creation_date') }}</div> <div class="th-wrap">
{{ $i18n.get('label_creation_date') }}
</div>
</th> </th>
<!-- Created By --> <!-- Created By -->
<th> <th>
<div class="th-wrap">{{ $i18n.get('label_created_by') }}</div> <div class="th-wrap">
{{ $i18n.get('label_created_by') }}
</div>
</th> </th>
<!-- Total Items --> <!-- Total Items -->
<th v-if="!isOnTrash"> <th v-if="!isOnTrash">
<div class="th-wrap total-items-header">{{ $i18n.get('label_total_items') }}</div> <div class="th-wrap total-items-header">
{{ $i18n.get('label_total_items') }}
</div>
</th> </th>
<th <th
v-if="collections.findIndex((collection) => collection.current_user_can_edit || collection.current_user_can_delete) >= 0" v-if="collections.findIndex((collection) => collection.current_user_can_edit || collection.current_user_can_delete) >= 0"
class="actions-header"> class="actions-header">
&nbsp; &nbsp;
<!-- nothing to show on header for actions cell--> <!-- nothing to show on header for actions cell-->
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr <tr
:class="{ 'selected-row': selectedCollections[index] }" v-for="(collection, index) of collections"
:key="index" :key="index"
v-for="(collection, index) of collections"> :class="{ 'selected-row': selectedCollections[index] }">
<!-- Checking list --> <!-- Checking list -->
<td <td
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="selectedCollections[index]"/> <b-checkbox v-model="selectedCollections[index]" />
</td> </td>
<!-- Status icon --> <!-- Status icon -->
<td <td
@ -153,27 +166,27 @@
class="status-cell"> class="status-cell">
<span <span
v-if="$statusHelper.hasIcon(collection.status)" v-if="$statusHelper.hasIcon(collection.status)"
class="icon has-text-gray"
v-tooltip="{ v-tooltip="{
content: $i18n.get('status_' + collection.status), content: $i18n.get('status_' + collection.status),
autoHide: true, autoHide: true,
html: true, html: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start' placement: 'auto-start'
}"> }"
class="icon has-text-gray">
<i <i
class="tainacan-icon tainacan-icon-1em" class="tainacan-icon tainacan-icon-1em"
:class="$statusHelper.getIcon(collection.status)" :class="$statusHelper.getIcon(collection.status)"
/> />
</span> </span>
</td> </td>
<!-- Thumbnail --> <!-- Thumbnail -->
<td <td
class="thumbnail-cell column-default-width" class="thumbnail-cell column-default-width"
@click.left="onClickCollection($event, collection.id, index)" :label="$i18n.get('label_thumbnail')"
@click.right="onRightClickCollection($event, collection.id, index)" :aria-label="$i18n.get('label_thumbnail')"
:label="$i18n.get('label_thumbnail')" @click.left="onClickCollection($event, collection.id, index)"
:aria-label="$i18n.get('label_thumbnail')"> @click.right="onRightClickCollection($event, collection.id, index)">
<span> <span>
<img <img
:alt="$i18n.get('label_thumbnail')" :alt="$i18n.get('label_thumbnail')"
@ -184,10 +197,10 @@
<!-- Name --> <!-- Name -->
<td <td
class="column-default-width column-main-content" class="column-default-width column-main-content"
@click.left="onClickCollection($event, collection.id, index)" :label="$i18n.get('label_name')"
@click.right="onRightClickCollection($event, collection.id, index)" :aria-label="$i18n.get('label_name') + ': ' + collection.name"
:label="$i18n.get('label_name')" @click.left="onClickCollection($event, collection.id, index)"
:aria-label="$i18n.get('label_name') + ': ' + collection.name"> @click.right="onRightClickCollection($event, collection.id, index)">
<p <p
v-tooltip="{ v-tooltip="{
delay: { delay: {
@ -205,10 +218,10 @@
<!-- Description --> <!-- Description -->
<td <td
class="column-large-width" class="column-large-width"
@click.left="onClickCollection($event, collection.id, index)" :label="$i18n.get('label_description')"
@click.right="onRightClickCollection($event, collection.id, index)" :aria-label="$i18n.get('label_description') + ': ' + (collection.description != undefined && collection.description != '') ? collection.description : `<span class='has-text-gray is-italic'>` + $i18n.get('label_description_not_provided') + `</span>`"
:label="$i18n.get('label_description')" @click.left="onClickCollection($event, collection.id, index)"
:aria-label="$i18n.get('label_description') + ': ' + (collection.description != undefined && collection.description != '') ? collection.description : `<span class='has-text-gray is-italic'>` + $i18n.get('label_description_not_provided') + `</span>`"> @click.right="onRightClickCollection($event, collection.id, index)">
<p <p
v-tooltip="{ v-tooltip="{
delay: { delay: {
@ -221,15 +234,15 @@
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start' placement: 'auto-start'
}" }"
v-html="(collection.description != undefined && collection.description != '') ? collection.description : `<span class='has-text-gray is-italic'>` + $i18n.get('label_description_not_provided') + `</span>`"/> v-html="(collection.description != undefined && collection.description != '') ? collection.description : `<span class='has-text-gray is-italic'>` + $i18n.get('label_description_not_provided') + `</span>`" />
</td> </td>
<!-- Modification Date --> <!-- Modification Date -->
<td <td
@click.left="onClickCollection($event, collection.id, index)" class="table-modification column-default-width"
@click.right="onRightClickCollection($event, collection.id, index)" :label="$i18n.get('label_modification_date')"
class="table-modification column-default-width" :aria-label="$i18n.get('label_modification_date') + ': ' + collection.modification_date"
:label="$i18n.get('label_modification_date')" @click.left="onClickCollection($event, collection.id, index)"
:aria-label="$i18n.get('label_modification_date') + ': ' + collection.modification_date"> @click.right="onRightClickCollection($event, collection.id, index)">
<p <p
v-tooltip="{ v-tooltip="{
delay: { delay: {
@ -246,11 +259,11 @@
</td> </td>
<!-- Creation Date --> <!-- Creation Date -->
<td <td
@click.left="onClickCollection($event, collection.id, index)" class="table-creation column-default-width"
@click.right="onRightClickCollection($event, collection.id, index)" :label="$i18n.get('label_creation_date')"
class="table-creation column-default-width" :aria-label="$i18n.get('label_creation_date') + ': ' + collection.creation_date"
:label="$i18n.get('label_creation_date')" @click.left="onClickCollection($event, collection.id, index)"
:aria-label="$i18n.get('label_creation_date') + ': ' + collection.creation_date"> @click.right="onRightClickCollection($event, collection.id, index)">
<p <p
v-tooltip="{ v-tooltip="{
delay: { delay: {
@ -267,11 +280,11 @@
</td> </td>
<!-- Created by --> <!-- Created by -->
<td <td
@click.left="onClickCollection($event, collection.id, index)" class="table-creation column-default-width"
@click.right="onRightClickCollection($event, collection.id, index)" :label="$i18n.get('label_created_by')"
class="table-creation column-default-width" :aria-label="$i18n.get('label_created_by') + ': ' + collection.author_name"
:label="$i18n.get('label_created_by')" @click.left="onClickCollection($event, collection.id, index)"
:aria-label="$i18n.get('label_created_by') + ': ' + collection.author_name"> @click.right="onRightClickCollection($event, collection.id, index)">
<p <p
v-tooltip="{ v-tooltip="{
delay: { delay: {
@ -288,12 +301,12 @@
</td> </td>
<!-- Total items --> <!-- Total items -->
<td <td
@click.left="onClickCollection($event, collection.id, index)"
@click.right="onRightClickCollection($event, collection.id, index)"
class="column-small-width column-align-right"
:label="$i18n.get('label_total_items')"
v-if="collection.total_items != undefined" v-if="collection.total_items != undefined"
:aria-label="$i18n.get('label_total_items') + ': ' + getTotalItems(collection.total_items)"> class="column-small-width column-align-right"
:label="$i18n.get('label_total_items')"
:aria-label="$i18n.get('label_total_items') + ': ' + getTotalItems(collection.total_items)"
@click.left="onClickCollection($event, collection.id, index)"
@click.right="onRightClickCollection($event, collection.id, index)">
<p <p
v-tooltip="{ v-tooltip="{
delay: { delay: {
@ -311,14 +324,14 @@
<!-- Actions --> <!-- Actions -->
<td <td
v-if="collection.current_user_can_edit || collection.current_user_can_delete" v-if="collection.current_user_can_edit || collection.current_user_can_delete"
@click="onClickCollection($event, collection.id, index)"
class="column-default-width" class="column-default-width"
:class="{ 'actions-cell': collection.current_user_can_edit || collection.current_user_can_delete }" :class="{ 'actions-cell': collection.current_user_can_edit || collection.current_user_can_delete }"
:label="$i18n.get('label_actions')"> :label="$i18n.get('label_actions')"
@click="onClickCollection($event, collection.id, index)">
<div class="actions-container"> <div class="actions-container">
<a <a
id="button-edit" v-if="collection.current_user_can_edit"
v-if="collection.current_user_can_edit" id="button-edit"
:aria-label="$i18n.getFrom('collections','edit_item')" :aria-label="$i18n.getFrom('collections','edit_item')"
@click.prevent.stop="goToCollectionEditPage(collection.id)"> @click.prevent.stop="goToCollectionEditPage(collection.id)">
<span <span
@ -330,12 +343,12 @@
html: true html: true
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-settings"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-settings" />
</span> </span>
</a> </a>
<a <a
id="button-delete"
v-if="collection.current_user_can_delete" v-if="collection.current_user_can_delete"
id="button-delete"
:aria-label="$i18n.get('label_button_delete')" :aria-label="$i18n.get('label_button_delete')"
@click.prevent.stop="deleteOneCollection(collection.id)"> @click.prevent.stop="deleteOneCollection(collection.id)">
<span <span
@ -348,15 +361,15 @@
class="icon"> class="icon">
<i <i
:class="{ 'tainacan-icon-delete': !isOnTrash, 'tainacan-icon-deleteforever': isOnTrash }" :class="{ 'tainacan-icon-delete': !isOnTrash, 'tainacan-icon-deleteforever': isOnTrash }"
class="tainacan-icon tainacan-icon-1-25em"/> class="tainacan-icon tainacan-icon-1-25em" />
</span> </span>
</a> </a>
<a <a
id="button-open-external" id="button-open-external"
:aria-label="$i18n.getFrom('collections','view_item')" :aria-label="$i18n.getFrom('collections','view_item')"
@click.stop="" target="_blank"
target="_blank" :href="collection.url"
:href="collection.url"> @click.stop="">
<span <span
v-tooltip="{ v-tooltip="{
content: $i18n.get('label_view_collection_on_website'), content: $i18n.get('label_view_collection_on_website'),
@ -366,7 +379,7 @@
html: true html: true
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-openurl"/> <i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-openurl" />
</span> </span>
</a> </a>
</div> </div>
@ -412,23 +425,29 @@ export default {
} }
}, },
watch: { watch: {
collections() { collections: {
this.selectedCollections = []; handler() {
for (let i = 0; i < this.collections.length; i++) this.selectedCollections = [];
this.selectedCollections.push(false); for (let i = 0; i < this.collections.length; i++)
this.selectedCollections.push(false);
},
deep: true
}, },
selectedCollections() { selectedCollections: {
let allSelected = true; handler() {
let isSelecting = false; let allSelected = true;
for (let i = 0; i < this.selectedCollections.length; i++) { let isSelecting = false;
if (this.selectedCollections[i] == false) { for (let i = 0; i < this.selectedCollections.length; i++) {
allSelected = false; if (this.selectedCollections[i] == false) {
} else { allSelected = false;
isSelecting = true; } else {
isSelecting = true;
}
} }
} this.allCollectionsOnPageSelected = allSelected;
this.allCollectionsOnPageSelected = allSelected; this.isSelectingCollections = isSelecting;
this.isSelectingCollections = isSelecting; },
deep: true
} }
}, },
methods: { methods: {
@ -539,17 +558,16 @@ export default {
this.clearContextMenu(); this.clearContextMenu();
}, },
selectCollection() { selectCollection() {
if (this.contextMenuIndex != null) { if (this.contextMenuIndex != null)
this.$set(this.selectedCollections, this.contextMenuIndex, !this.selectedCollections[this.contextMenuIndex]); Object.assign( this.selectedCollections, { [this.contextMenuIndex]: !this.selectedCollections[this.contextMenuIndex] });
}
this.clearContextMenu(); this.clearContextMenu();
}, },
onClickCollection($event, collectionId, index) { onClickCollection($event, collectionId, index) {
if ($event.ctrlKey) { if ($event.ctrlKey)
this.$set(this.selectedCollections, index, !this.selectedCollections[index]); Object.assign( this.selectedCollections, { [index]: !this.selectedCollections[index] });
} else { else
this.$router.push(this.$routerHelper.getCollectionPath(collectionId)); this.$router.push(this.$routerHelper.getCollectionPath(collectionId));
}
}, },
goToCollectionEditPage(collectionId) { goToCollectionEditPage(collectionId) {
this.$router.push(this.$routerHelper.getCollectionEditPath(collectionId)); this.$router.push(this.$routerHelper.getCollectionEditPath(collectionId));

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

File diff suppressed because it is too large Load Diff

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

@ -1,22 +1,24 @@
<template> <template>
<div class="metadata-mappers-area"> <div class="metadata-mappers-area">
<b-loading <b-loading
v-model="isLoadingMetadatumMappers"
:can-cancel="false" :can-cancel="false"
:is-full-page="false" :is-full-page="false" />
:active.sync="isLoadingMetadatumMappers"/>
<b-loading <b-loading
v-model="isLoadingMetadata"
:can-cancel="false" :can-cancel="false"
:is-full-page="false" :is-full-page="false" />
:active.sync="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>
<b-select <b-select
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"
@ -33,7 +35,7 @@
<div class="content has-text-gray has-text-centered"> <div class="content has-text-gray has-text-centered">
<p> <p>
<span class="icon is-large"> <span class="icon is-large">
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/> <i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata" />
</span> </span>
</p> </p>
<p>{{ $i18n.get('info_there_is_no_metadatum') }}</p> <p>{{ $i18n.get('info_there_is_no_metadatum') }}</p>
@ -42,8 +44,8 @@
<!-- Mapping list --> <!-- Mapping list -->
<form <form
class="tainacan-form" v-else
v-else> class="tainacan-form">
<div class="mapping-control"> <div class="mapping-control">
<div <div
@ -54,15 +56,15 @@
class="is-inline is-pulled-right add-link" class="is-inline is-pulled-right add-link"
@click="onNewMetadataMapperMetadata()"> @click="onNewMetadataMapperMetadata()">
<span class="icon is-small"> <span class="icon is-small">
<i class="tainacan-icon tainacan-icon-add"/> <i class="tainacan-icon tainacan-icon-add" />
</span> </span>
{{ $i18n.get('label_add_more_mapper_metadata') }} {{ $i18n.get('label_add_more_mapper_metadata') }}
</a> </a>
</div> </div>
</div> </div>
<div <div
class="mapping-header" v-if="mapperMetadata.length > 0"
v-if="mapperMetadata.length > 0"> class="mapping-header">
<p>{{ $i18n.get('label_from_source_mapper') }}</p> <p>{{ $i18n.get('label_from_source_mapper') }}</p>
<hr> <hr>
<span class="icon"> <span class="icon">
@ -78,18 +80,18 @@
class="source-metadatum"> class="source-metadatum">
<b-select <b-select
:name="'mappers-metadatum-select-' + mapperMetadatum.slug"
v-model="mapperMetadatum.selected" v-model="mapperMetadatum.selected"
@input="onSelectMetadatumForMapperMetadata"> :name="'mappers-metadatum-select-' + mapperMetadatum.slug"
@update:model-value="onSelectMetadatumForMapperMetadata">
<option <option
value=""> value="">
{{ $i18n.get('instruction_select_a_metadatum') }} {{ $i18n.get('instruction_select_a_metadatum') }}
</option> </option>
<option <option
v-for="(metadatum, metadatumIndex) in activeMetadatumList" v-for="(metadatum, metadatumIndex) in activeMetadatumList"
:key="metadatumIndex" :key="metadatumIndex"
:value="metadatum.id" :value="metadatum.id"
:disabled="isMetadatumSelected(metadatum.id)"> :disabled="isMetadatumSelected(metadatum.id)">
{{ metadatum.name }} {{ metadatum.name }}
</option> </option>
</b-select> </b-select>
@ -98,9 +100,9 @@
{{ mapperMetadatum.label }} {{ mapperMetadatum.label }}
<a <a
:style="{ visibility: :style="{ visibility:
mapperMetadatum.isCustom mapperMetadatum.isCustom
? 'visible' : 'hidden' ? 'visible' : 'hidden'
}" }"
@click.prevent="editMetadatumCustomMapper(mapperMetadatum)"> @click.prevent="editMetadatumCustomMapper(mapperMetadatum)">
<span <span
v-tooltip="{ v-tooltip="{
@ -110,14 +112,14 @@
placement: 'auto-start' placement: 'auto-start'
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit" />
</span> </span>
</a> </a>
<a <a
:style="{ visibility: :style="{ visibility:
mapperMetadatum.isCustom mapperMetadatum.isCustom
? 'visible' : 'hidden' ? 'visible' : 'hidden'
}" }"
@click.prevent="removeMetadatumCustomMapper(mapperMetadatum)"> @click.prevent="removeMetadatumCustomMapper(mapperMetadatum)">
<span <span
v-tooltip="{ v-tooltip="{
@ -127,13 +129,13 @@
placement: 'auto-start' placement: 'auto-start'
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete" />
</span> </span>
</a> </a>
</p> </p>
</div> </div>
<div <div
v-if="mapper != '' && !isLoadingMetadatumMappers" v-if="mapper != '' && !isLoadingMetadatumMappers"
class="field is-grouped form-submit fixed-form-submit"> class="field is-grouped form-submit fixed-form-submit">
<div class="control"> <div class="control">
@ -144,22 +146,22 @@
</div> </div>
<div class="control"> <div class="control">
<button <button
@click.prevent="onUpdateMetadataMapperMetadataClick"
:class="{ 'is-loading': isMapperMetadataLoading }" :class="{ 'is-loading': isMapperMetadataLoading }"
class="button is-success">{{ $i18n.get('save') }}</button> class="button is-success"
@click.prevent="onUpdateMetadataMapperMetadataClick">{{ $i18n.get('save') }}</button>
</div> </div>
</div> </div>
</form> </form>
<b-modal <b-modal
@close="onCancelNewMetadataMapperMetadata" v-model="isMapperMetadataCreating"
:active.sync="isMapperMetadataCreating"
trap-focus trap-focus
aria-modal aria-modal
aria-role="dialog" aria-role="dialog"
custom-class="tainacan-modal" custom-class="tainacan-modal"
:close-button-aria-label="$i18n.get('close')"> :close-button-aria-label="$i18n.get('close')"
@close="onCancelNewMetadataMapperMetadata">
<div <div
autofocus autofocus
role="dialog" role="dialog"
@ -174,14 +176,14 @@
<b-input <b-input
v-model="newMetadataLabel" v-model="newMetadataLabel"
required required
:placeholder="$i18n.get('label_name')"/> :placeholder="$i18n.get('label_name')" />
</b-field> </b-field>
<b-field> <b-field>
<b-input <b-input
v-model="newMetadataUri"
placeholder="URI" placeholder="URI"
type="url" type="url"
required required />
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">
@ -193,9 +195,9 @@
<div class="control"> <div class="control">
<button <button
:class="{ 'is-loading': isMapperMetadataLoading, 'is-success': !isMapperMetadataLoading }" :class="{ 'is-loading': isMapperMetadataLoading, 'is-success': !isMapperMetadataLoading }"
@click.prevent="onSaveNewMetadataMapperMetadata"
:disabled="isNewMetadataMapperMetadataDisabled || isMapperMetadataLoading" :disabled="isNewMetadataMapperMetadataDisabled || isMapperMetadataLoading"
class="button">{{ $i18n.get('save') }} class="button"
@click.prevent="onSaveNewMetadataMapperMetadata">{{ $i18n.get('save') }}
</button> </button>
</div> </div>
</div> </div>

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

@ -1,133 +1,158 @@
<template> <template>
<div <div
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 :active.sync="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">
<draggable {{ $i18n.get('label_available_metadata_types') }}
v-model="availableMetadatumList" </h3>
:sort="false" <sortable
:group="{ name:'metadata', pull: 'clone', put: false, revertClone: true }" :list="availableMetadatumList"
drag-class="sortable-drag"> item-key="id"
<div :options="{
:id="metadatum.component" group: {
@click.prevent.once="addMetadatumViaButton(metadatum)" name: 'metadata',
class="available-metadatum-item" pull: 'clone',
:class="{ 'hightlighted-metadatum' : hightlightedMetadatum == metadatum.name, 'inherited-metadatum': metadatum.inherited || isRepositoryLevel }" put: false,
v-for="(metadatum, index) in availableMetadatumList" revertClone: true
:key="index"> },
<span sort: false,
v-tooltip="{ dragClass: 'sortable-drag'
content: $i18n.get('instruction_click_or_drag_metadatum_create'), }">
autoHide: true, <template #item="{ element: metadatum }">
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''], <div
placement: 'auto-start' :id="metadatum.component"
}" class="available-metadatum-item"
class="icon grip-icon"> :class="{ 'highlighted-metadatum' : highlightedMetadatum == metadatum.name, 'inherited-metadatum': metadatum.inherited || isRepositoryLevel }"
<!-- <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/> --> @click.prevent.once="addMetadatumViaButton(metadatum)">
<svg <span
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
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, class="icon grip-icon">
}, <!-- <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/> -->
placement: 'top', <svg
}" xmlns="http://www.w3.org/2000/svg"
class="icon preview-help-icon has-text-secondary"> height="24px"
<i class="tainacan-icon tainacan-icon-help"/> 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="hightlightedMetadatum == 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
v-if="highlightedMetadatum == metadatum.name"
class="loading-spinner" />
</div>
</template>
</sortable>
<draggable <sortable
v-if="!isRepositoryLevel" v-if="!isRepositoryLevel"
v-model="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' class="available-metadata-section-item"
}" @click.prevent="addMetadataSectionViaButton()">
class="icon grip-icon"> <span
<!-- <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
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, class="icon grip-icon">
}, <!-- <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/> -->
placement: 'top', <svg
}" xmlns="http://www.w3.org/2000/svg"
class="icon preview-help-icon has-text-secondary"> height="24px"
<i class="tainacan-icon tainacan-icon-help"/> 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,
hightlightedMetadatum: String highlightedMetadatum: String
}, },
emits: [
'on-finished-loading-metadata-types'
],
data() { data() {
return { return {
isLoadingMetadataTypes: true, isLoadingMetadataTypes: true,
@ -154,7 +179,7 @@ export default {
this.fetchMetadatumTypes() this.fetchMetadatumTypes()
.then(() => { .then(() => {
this.$emit('onFinishedLoadingMetadataTypes'); this.$emit('on-finished-loading-metadata-types');
this.isLoadingMetadataTypes = false; this.isLoadingMetadataTypes = false;
}) })
.catch(() => { .catch(() => {
@ -169,10 +194,10 @@ export default {
'getMetadatumTypes' 'getMetadatumTypes'
]), ]),
addMetadatumViaButton(metadatumType) { addMetadatumViaButton(metadatumType) {
this.$eventBusMetadataList.onAddMetadatumViaButton(metadatumType); this.$emitter.emit('addMetadatumViaButton', metadatumType);
}, },
addMetadataSectionViaButton() { addMetadataSectionViaButton() {
this.$eventBusMetadataList.onAddMetadataSectionViaButton(); this.$emitter.emit('addMetadataSectionViaButton');
}, },
getPreviewTemplateContent(metadatum) { getPreviewTemplateContent(metadatum) {
return `<div class="metadata-type-preview tainacan-form"> return `<div class="metadata-type-preview tainacan-form">
@ -239,6 +264,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;
@ -351,7 +377,7 @@ export default {
border-color: transparent white transparent transparent; border-color: transparent white transparent transparent;
} }
} }
.hightlighted-metadatum { .highlighted-metadatum {
background-color: var(--tainacan-white); background-color: var(--tainacan-white);
position: relative; position: relative;
left: 0px; left: 0px;

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

@ -1,16 +1,16 @@
<template> <template>
<div> <div>
<div <div
v-if="processes.length > 0 && !isLoading" v-if="processes.length > 0 && !isLoading"
class="table-container"> class="table-container">
<!-- <!--
<div class="selection-control"> <div class="selection-control">
<div class="field select-all is-pulled-left"> <div class="field select-all is-pulled-left">
<span> <span>
<b-checkbox <b-checkbox
@click.native="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()">
@ -40,132 +39,133 @@
</div> </div>
--> -->
<div class="processes-list"> <div class="processes-list">
<div <div
:class="{ v-for="(bgProcess, index) of processes"
'opened-process': collapses[index], :key="index"
'selected-row': selected[index], :class="{
'highlighted-process': highlightedProcess == bgProcess.ID 'opened-process': collapses[index],
}" 'selected-row': selected[index],
class="processes-list-item" 'highlighted-process': highlightedProcess == bgProcess.ID
:key="index" }"
v-for="(bgProcess, index) of processes"> class="processes-list-item">
<div <div
@click="$set(collapses, index, !collapses[index])" class="process-handler"
class="process-handler"> @click="Object.assign( collapses, { [index]: !collapses[index] })">
<!-- Collapse --> <!-- Collapse -->
<span class="icon"> <span class="icon">
<i <i
:class="{ 'tainacan-icon-arrowdown' : collapses[index], 'tainacan-icon-arrowright' : !collapses[index] }" :class="{ 'tainacan-icon-arrowdown' : collapses[index], 'tainacan-icon-arrowright' : !collapses[index] }"
class="tainacan-icon tainacan-icon-1-25em has-text-blue4" /> class="tainacan-icon tainacan-icon-1-25em has-text-blue4" />
</span> </span>
<!-- Checking list --> <!-- Checking list -->
<!-- <span <!-- <span
:class="{ 'is-selecting': isSelecting }" :class="{ 'is-selecting': isSelecting }"
class="checkbox-cell"> class="checkbox-cell">
<b-checkbox <b-checkbox
v-model="selected[index]"/> v-model="selected[index]"/>
</span> --> </span> -->
<!-- Name --> <!-- Name -->
<span <span
class="process-title" class="process-title"
:label="$i18n.get('label_name')" :label="$i18n.get('label_name')"
:aria-label="$i18n.get('label_name') + ': ' + bgProcess.name"> :aria-label="$i18n.get('label_name') + ': ' + bgProcess.name">
<p <p
v-tooltip="{
delay: {
shown: 500,
hide: 300,
},
content: bgProcess.name ? bgProcess.name : $i18n.get('label_unnamed_process'),
autoHide: false,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}">
{{ bgProcess.name ? bgProcess.name : $i18n.get('label_unnamed_process') }}</p>
</span>
<!-- Progress -->
<span
class="process-progress"
:label="$i18n.get('label_progress')"
:aria-label="$i18n.get('label_progress') + ': ' + bgProcess.progress_label ? bgProcess.progress_label + (bgProcess.progress_value ? ' (' + bgProcess.progress_value + '%)' : '') : $i18n.get('label_no_details_of_process')">
<p
v-tooltip="{
delay: {
shown: 500,
hide: 300,
},
content: bgProcess.progress_label ? bgProcess.progress_label : $i18n.get('label_no_details_of_process'),
autoHide: false,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}">
<span :class="{'occluding-content': bgProcess.progress_value }"><span class="has-text-weight-bold">{{ $i18n.get('label_progress') + " " }}</span>{{ bgProcess.progress_label ? bgProcess.progress_label : $i18n.get('label_no_details_of_process') }}</span>
<span>{{ bgProcess.progress_value == 0 ? `(0%)` : ' ('+ bgProcess.progress_value +'%)' }}</span>
</p>
</span>
<!-- Queued on -->
<span
class="process-queued-on"
:label="$i18n.get('label_queued_on')"
:aria-label="$i18n.get('label_queued_on') + ' ' + getDate(bgProcess.queued_on)">
<p
v-tooltip="{
delay: {
shown: 500,
hide: 300,
},
content: getDate(bgProcess.queued_on),
autoHide: false,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}">
<span class="has-text-weight-bold">{{ $i18n.get('label_queued_on') + " " }}</span>{{ getDate(bgProcess.queued_on) }}</p>
</span>
<!-- Status-->
<span
class="actions-cell"
:label="$i18n.get('label_status')">
<div class="actions-container">
<span
v-if="bgProcess.status == 'running'"
class="icon has-text-success loading-icon">
<div class="control has-icons-right is-loading is-clearfix" />
</span>
<span
v-tooltip="{
delay: {
shown: 500,
hide: 300,
},
content: $i18n.get('label_stop_process'),
autoHide: false,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
v-if=" bgProcess.status === 'running' "
class="icon has-text-gray action-icon"
@click.prevent.stop="pauseProcess(index)">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-stop"/>
</span>
<span
v-tooltip="{
delay: {
shown: 500,
hide: 300,
},
content: $i18n.get('label_process_completed'),
autoHide: false,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
v-if=" ( bgProcess.status === 'finished' && !bgProcess.error_log ) || bgProcess.status === null"
class="icon has-text-success">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-approvedcircle"/>
</span>
<span
v-tooltip="{ v-tooltip="{
delay: {
shown: 500,
hide: 300,
},
content: bgProcess.name ? bgProcess.name : $i18n.get('label_unnamed_process'),
autoHide: false,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}">
{{ bgProcess.name ? bgProcess.name : $i18n.get('label_unnamed_process') }}</p>
</span>
<!-- Progress -->
<span
class="process-progress"
:label="$i18n.get('label_progress')"
:aria-label="$i18n.get('label_progress') + ': ' + bgProcess.progress_label ? bgProcess.progress_label + (bgProcess.progress_value ? ' (' + bgProcess.progress_value + '%)' : '') : $i18n.get('label_no_details_of_process')">
<p
v-tooltip="{
delay: {
shown: 500,
hide: 300,
},
content: bgProcess.progress_label ? bgProcess.progress_label : $i18n.get('label_no_details_of_process'),
autoHide: false,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}">
<span :class="{'occluding-content': bgProcess.progress_value }"><span class="has-text-weight-bold">{{ $i18n.get('label_progress') + " " }}</span>{{ bgProcess.progress_label ? bgProcess.progress_label : $i18n.get('label_no_details_of_process') }}</span>
<span>{{ bgProcess.progress_value == 0 ? `(0%)` : ' ('+ bgProcess.progress_value +'%)' }}</span>
</p>
</span>
<!-- Queued on -->
<span
class="process-queued-on"
:label="$i18n.get('label_queued_on')"
:aria-label="$i18n.get('label_queued_on') + ' ' + getDate(bgProcess.queued_on)">
<p
v-tooltip="{
delay: {
shown: 500,
hide: 300,
},
content: getDate(bgProcess.queued_on),
autoHide: false,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}">
<span class="has-text-weight-bold">{{ $i18n.get('label_queued_on') + " " }}</span>{{ getDate(bgProcess.queued_on) }}</p>
</span>
<!-- Status-->
<span
class="actions-cell"
:label="$i18n.get('label_status')">
<div class="actions-container">
<span
v-if="bgProcess.status == 'running'"
class="icon has-text-success loading-icon">
<div class="control has-icons-right is-loading is-clearfix" />
</span>
<span
v-if=" bgProcess.status === 'running' "
v-tooltip="{
delay: {
shown: 500,
hide: 300,
},
content: $i18n.get('label_stop_process'),
autoHide: false,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
class="icon has-text-gray action-icon"
@click.prevent.stop="pauseProcess(index)">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-stop" />
</span>
<span
v-if=" ( bgProcess.status === 'finished' && !bgProcess.error_log ) || bgProcess.status === null"
v-tooltip="{
delay: {
shown: 500,
hide: 300,
},
content: $i18n.get('label_process_completed'),
autoHide: false,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
class="icon has-text-success">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-approvedcircle" />
</span>
<span
v-if=" bgProcess.status === 'finished-errors' || ( bgProcess.done > 0 && bgProcess.error_log && bgProcess.status === 'finished' ) "
v-tooltip="{
delay: { delay: {
shown: 500, shown: 500,
hide: 300, hide: 300,
@ -175,12 +175,12 @@
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start' placement: 'auto-start'
}" }"
v-if=" bgProcess.status === 'finished-errors' || ( bgProcess.done > 0 && bgProcess.error_log && bgProcess.status === 'finished' ) " class="icon has-text-success">
class="icon has-text-success"> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-alertcircle has-text-yellow2" />
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-alertcircle has-text-yellow2"/> </span>
</span> <span
<span v-if=" bgProcess.status === 'cancelled' "
v-tooltip="{ v-tooltip="{
delay: { delay: {
shown: 500, shown: 500,
hide: 300, hide: 300,
@ -190,12 +190,12 @@
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start' placement: 'auto-start'
}" }"
v-if=" bgProcess.status === 'cancelled' " class="icon has-text-success">
class="icon has-text-success"> <i class="tainacan-icon has-text-danger tainacan-icon-1-25em tainacan-icon-repprovedcircle" />
<i class="tainacan-icon has-text-danger tainacan-icon-1-25em tainacan-icon-repprovedcircle"/> </span>
</span> <span
<span v-if=" bgProcess.status === 'paused' "
v-tooltip="{ v-tooltip="{
delay: { delay: {
shown: 500, shown: 500,
hide: 300, hide: 300,
@ -205,12 +205,12 @@
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start' placement: 'auto-start'
}" }"
v-if=" bgProcess.status === 'paused' " class="icon has-text-gray">
class="icon has-text-gray"> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-pause" />
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-pause"/> </span>
</span> <span
<span v-if=" bgProcess.status === 'waiting' "
v-tooltip="{ v-tooltip="{
delay: { delay: {
shown: 500, shown: 500,
hide: 300, hide: 300,
@ -220,12 +220,12 @@
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start' placement: 'auto-start'
}" }"
v-if=" bgProcess.status === 'waiting' " class="icon has-text-gray">
class="icon has-text-gray"> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-waiting" />
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-waiting"/> </span>
</span> <span
<span v-if=" bgProcess.status === 'waiting' "
v-tooltip="{ v-tooltip="{
delay: { delay: {
shown: 500, shown: 500,
hide: 300, hide: 300,
@ -235,13 +235,13 @@
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start' placement: 'auto-start'
}" }"
v-if=" bgProcess.status === 'waiting' " class="icon has-text-gray"
class="icon has-text-gray" @click.prevent.stop="deleteOneProcess(index)">
@click.prevent.stop="deleteOneProcess(index)"> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete" />
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/> </span>
</span> <span
<span v-if="bgProcess.status === 'errored'"
v-tooltip="{ v-tooltip="{
delay: { delay: {
shown: 500, shown: 500,
hide: 300, hide: 300,
@ -251,86 +251,83 @@
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start' placement: 'auto-start'
}" }"
v-if="bgProcess.status === 'errored'" class="icon has-text-danger">
class="icon has-text-danger"> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-processerror" />
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-processerror" /> </span>
</div>
</span>
</div>
<!-- Collapse inner content -->
<transition name="filter-item">
<div
v-if="collapses[index]"
class="process-collapse">
<!-- Output -->
<span
class="process-output"
:label="$i18n.get('label_output')"
:aria-label="$i18n.get('label_output') + ': ' + (bgProcess.output ? bgProcess.output : $i18n.get('label_no_output_info'))">
<p v-html="bgProcess.output ? bgProcess.output : $i18n.get('label_no_output_info')" />
</span>
<!-- Logs -->
<span
class="process-logs"
:label="$i18n.get('label_log_file')"
:aria-label="$i18n.get('label_log_gile')">
<p>
<a
v-if="bgProcess.log"
:href="bgProcess.log">
<span class="icon is-small">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-openurl" />
</span>
{{ $i18n.get('label_log_file') }}
</a>
<br>
<a
v-if="bgProcess.error_log"
class="has-text-danger"
:href="bgProcess.error_log">
<span class="icon is-small">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-openurl" />
</span>
{{ $i18n.get('label_error_log_file') }}
</a>
</p>
</span>
<!-- Last processed on -->
<span
class="process-last-processed-on"
:label="$i18n.get('label_last_processed_on')"
:aria-label="$i18n.get('label_last_processed_on') + ' ' + getDate(bgProcess.processed_last)">
<p
v-tooltip="{
delay: {
shown: 500,
hide: 300,
},
content: getDate(bgProcess.processed_last),
autoHide: false,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}">
<span class="has-text-weight-bold">{{ $i18n.get('label_last_processed_on') + " " }}</span>{{ getDate(bgProcess.processed_last) }}</p>
</span> </span>
</div> </div>
</span> </transition>
</div> </div>
<!-- Collapse inner content -->
<transition name="filter-item">
<div
v-if="collapses[index]"
class="process-collapse">
<!-- Output -->
<span
class="process-output"
:label="$i18n.get('label_output')"
:aria-label="$i18n.get('label_output') + ': ' + (bgProcess.output ? bgProcess.output : $i18n.get('label_no_output_info'))">
<p v-html="bgProcess.output ? bgProcess.output : $i18n.get('label_no_output_info')"/>
</span>
<!-- Logs -->
<span
class="process-logs"
:label="$i18n.get('label_log_file')"
:aria-label="$i18n.get('label_log_gile')">
<p>
<a
v-if="bgProcess.log"
:href="bgProcess.log">
<span class="icon is-small">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-openurl"/>
</span>
{{ $i18n.get('label_log_file') }}
</a>
<br>
<a
v-if="bgProcess.error_log"
class="has-text-danger"
:href="bgProcess.error_log">
<span class="icon is-small">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-openurl"/>
</span>
{{ $i18n.get('label_error_log_file') }}
</a>
</p>
</span>
<!-- Last processed on -->
<span
class="process-last-processed-on"
:label="$i18n.get('label_last_processed_on')"
:aria-label="$i18n.get('label_last_processed_on') + ' ' + getDate(bgProcess.processed_last)">
<p
v-tooltip="{
delay: {
shown: 500,
hide: 300,
},
content: getDate(bgProcess.processed_last),
autoHide: false,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}">
<span class="has-text-weight-bold">{{ $i18n.get('label_last_processed_on') + " " }}</span>{{ getDate(bgProcess.processed_last) }}</p>
</span>
</div> </div>
</transition>
</div> </div>
</div>
</div>
<div v-else-if="isLoading"> <div
<center> v-else-if="isLoading"
<span> class="has-text-centered">
{{ $i18n.get('loading_processes') }} {{ $i18n.get('loading_processes') }}
</span> </div>
</center>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -339,7 +336,7 @@
import moment from 'moment' import moment from 'moment'
export default { export default {
name: 'List', name: 'ProcessesList',
props: { props: {
isLoading: false, isLoading: false,
total: 0, total: 0,
@ -358,27 +355,33 @@
} }
}, },
watch: { watch: {
processes() { processes: {
this.selected = []; handler() {
for (let i = 0; i < this.processes.length; i++) this.selected = [];
this.selected.push(false); for (let i = 0; i < this.processes.length; i++)
this.selected.push(false);
this.collapses = [];
for (let i = 0; i < this.processes.length; i++) this.collapses = [];
this.collapses.push(false); for (let i = 0; i < this.processes.length; i++)
this.collapses.push(false);
},
deep: true
}, },
selected() { selected: {
let allSelected = true; handler() {
let isSelecting = false; let allSelected = true;
for (let i = 0; i < this.selected.length; i++) { let isSelecting = false;
if (this.selected[i] == false) { for (let i = 0; i < this.selected.length; i++) {
allSelected = false; if (this.selected[i] == false) {
} else { allSelected = false;
isSelecting = true; } else {
isSelecting = true;
}
} }
} this.allOnPageSelected = allSelected;
this.allOnPageSelected = allSelected; this.isSelecting = isSelecting;
this.isSelecting = isSelecting; },
deep: true
} }
}, },
mounted() { mounted() {
@ -397,7 +400,7 @@
jQuery( document ).on( 'heartbeat-tick', this.onHeartBitTickList); jQuery( document ).on( 'heartbeat-tick', this.onHeartBitTickList);
} }
}, },
beforeDestroy() { beforeUnmount() {
if (jQuery && jQuery( document )) { if (jQuery && jQuery( document )) {
jQuery( document ).off( 'heartbeat-tick', this.onHeartBitTickList) jQuery( document ).off( 'heartbeat-tick', this.onHeartBitTickList)
} }

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

@ -2,8 +2,8 @@
<div> <div>
<div class="table-container"> <div class="table-container">
<b-loading <b-loading
is-full-page="false" v-model="displayLoading"
:active.sync="displayLoading" /> :is-full-page="false" />
<div class="table-wrapper"> <div class="table-wrapper">
<div class="related-items-list"> <div class="related-items-list">
<div <div
@ -16,7 +16,7 @@
<div class="field has-addons"> <div class="field has-addons">
<span> <span>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-collection"/> <i class="tainacan-icon tainacan-icon-collection" />
</span> </span>
{{ relatedItemGroup.collection_name ? relatedItemGroup.collection_name : '' }} {{ relatedItemGroup.collection_name ? relatedItemGroup.collection_name : '' }}
</span> </span>
@ -28,7 +28,7 @@
<div class="field has-addons"> <div class="field has-addons">
<span> <span>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-metadata"/> <i class="tainacan-icon tainacan-icon-metadata" />
</span> </span>
{{ relatedItemGroup.metadata_name ? relatedItemGroup.metadata_name : '' }} {{ relatedItemGroup.metadata_name ? relatedItemGroup.metadata_name : '' }}
</span> </span>
@ -62,17 +62,17 @@
@click="openItemOnNewTab(relatedItem)"> @click="openItemOnNewTab(relatedItem)">
<span <span
v-if="$statusHelper.hasIcon(relatedItem.status)" v-if="$statusHelper.hasIcon(relatedItem.status)"
class="icon has-text-gray"
v-tooltip="{ v-tooltip="{
content: $i18n.get('status_' + relatedItem.status), content: $i18n.get('status_' + relatedItem.status),
autoHide: true, autoHide: true,
placement: 'top', placement: 'top',
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}"> }"
class="icon has-text-gray">
<i <i
class="tainacan-icon tainacan-icon-1em" class="tainacan-icon tainacan-icon-1em"
:class="$statusHelper.getIcon(relatedItem.status)" :class="$statusHelper.getIcon(relatedItem.status)"
/> />
</span> </span>
</div> </div>
<div @click="openItemOnNewTab(relatedItem)"> <div @click="openItemOnNewTab(relatedItem)">
@ -84,12 +84,12 @@
:src="$thumbHelper.getSrc(relatedItem['thumbnail'], 'tainacan-small', relatedItem.document_mimetype)" :src="$thumbHelper.getSrc(relatedItem['thumbnail'], 'tainacan-small', relatedItem.document_mimetype)"
:alt="relatedItem.thumbnail_alt ? relatedItem.thumbnail_alt : $i18n.get('label_thumbnail')" :alt="relatedItem.thumbnail_alt ? relatedItem.thumbnail_alt : $i18n.get('label_thumbnail')"
:transition-duration="500" :transition-duration="500"
/> />
</span> </span>
</div> </div>
<div <div
@click="openItemOnNewTab(relatedItem)" style="width: 100%"
style="width: 100%"> @click="openItemOnNewTab(relatedItem)">
<p <p
v-tooltip="{ v-tooltip="{
delay: { delay: {
@ -102,7 +102,7 @@
placement: 'top', placement: 'top',
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
v-html="(relatedItem.title != undefined && relatedItem.title != '') ? relatedItem.title : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`"/> v-html="(relatedItem.title != undefined && relatedItem.title != '') ? relatedItem.title : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`" />
</div> </div>
<div <div
v-if="isEditable && relatedItem.current_user_can_edit" v-if="isEditable && relatedItem.current_user_can_edit"
@ -112,11 +112,11 @@
<a <a
v-if="!relatedItem.status != 'trash'" v-if="!relatedItem.status != 'trash'"
id="button-edit" id="button-edit"
@click.prevent.stop="setItemForEdit(relatedItem, relatedItemGroup)" :aria-label="$i18n.getFrom('items','edit_item')"
:aria-label="$i18n.getFrom('items','edit_item')"> @click.prevent.stop="setItemForEdit(relatedItem, relatedItemGroup)">
<span <span
v-tooltip="{ v-tooltip="{
delay: { delay: {
shown: 500, shown: 500,
hide: 100, hide: 100,
}, },
@ -136,11 +136,11 @@
</div> </div>
</div> </div>
<b-modal <b-modal
v-model="editItemModal"
:width="1200" :width="1200"
:active.sync="editItemModal"
@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')"
@after-leave="reloadRelatedItems">
<iframe <iframe
width="100%" width="100%"
:style="{ height: (isMobileScreen ? '100vh' : '85vh') }" :style="{ height: (isMobileScreen ? '100vh' : '85vh') }"
@ -160,7 +160,7 @@
isLoading: Boolean, isLoading: Boolean,
isEditable: Boolean, isEditable: Boolean,
itemId: String, itemId: String,
collectionId: String, collectionId: [String, Number],
isMobileScreen: Boolean isMobileScreen: Boolean
}, },
data() { data() {

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

@ -1,22 +1,22 @@
<template> <template>
<div class="column"> <div class="column">
<b-loading :active.sync="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> -->
<template v-if="activeMetadatumList && !isLoadingMetadata"> <template v-if="activeMetadatumList && !isLoadingMetadata">
<button <button
v-if="activeMetadatumList.length > 0"
aria-controls="filters-items-list" aria-controls="filters-items-list"
:aria-expanded="!collapseAll" :aria-expanded="!collapseAll"
v-if="activeMetadatumList.length > 0"
class="link-style collapse-all" class="link-style collapse-all"
@click="collapseAll = !collapseAll"> @click="collapseAll = !collapseAll">
<span class="icon"> <span class="icon">
<i <i
:class="{ 'tainacan-icon-arrowdown' : collapseAll, 'tainacan-icon-arrowright' : !collapseAll }" :class="{ 'tainacan-icon-arrowdown' : collapseAll, 'tainacan-icon-arrowright' : !collapseAll }"
class="has-text-secondary tainacan-icon tainacan-icon-1-125em"/> class="has-text-secondary tainacan-icon tainacan-icon-1-125em" />
</span> </span>
<span class="collapse-all__text"> <span class="collapse-all__text">
{{ collapseAll ? $i18n.get('label_show_less_details') : $i18n.get('label_show_more_details') }} {{ collapseAll ? $i18n.get('label_show_less_details') : $i18n.get('label_show_more_details') }}
@ -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"
@ -56,8 +57,8 @@
</b-field> </b-field>
<b-field class="header-item"> <b-field class="header-item">
<b-input <b-input
:placeholder="$i18n.get('instruction_type_search_metadata_filter')"
v-model="metadataNameFilterString" v-model="metadataNameFilterString"
:placeholder="$i18n.get('instruction_type_search_metadata_filter')"
icon="magnify" icon="magnify"
size="is-small" size="is-small"
icon-right="close-circle" icon-right="close-circle"
@ -73,7 +74,7 @@
<div class="content has-text-gray has-text-centered"> <div class="content has-text-gray has-text-centered">
<p> <p>
<span class="icon is-large"> <span class="icon is-large">
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/> <i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata" />
</span> </span>
</p> </p>
<p>{{ $i18n.get('info_there_is_no_metadatum' ) }}</p> <p>{{ $i18n.get('info_there_is_no_metadatum' ) }}</p>
@ -83,221 +84,230 @@
<!-- The Repository Metadata list --> <!-- The Repository Metadata list -->
<div class="active-metadata-sections-area"> <div class="active-metadata-sections-area">
<draggable <sortable
v-model="activeMetadatumList" :list="activeMetadatumList"
item-key="id"
class="active-metadata-area" class="active-metadata-area"
@change="handleChange($event)" :options="{
:group="{ name:'metadata', pull: false, put: true }" group: { name:'metadata', pull: false, put: true },
:sort="false" handle: '.handle',
:handle="'.handle'" ghostClass: 'sortable-ghost',
ghost-class="sortable-ghost" chosenClass: 'sortable-chosen',
chosen-class="sortable-chosen" filter: '.not-sortable-item',
filter=".not-sortable-item" preventOnFilter: false,
:prevent-on-filter="false" animation: 250
:animation="250"> }"
<div @add="handleChange($event)"
v-for="(metadatum, index) in activeMetadatumList.filter((meta) => meta != undefined && meta.parent == 0)" @remove="handleChange($event)">
:key="metadatum.id" <template #item="{ element: metadatum, index }">
v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)"> <div
<div v-if="metadatum != undefined && metadatum.parent == 0"
class="active-metadatum-item" v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)">
:class="{
'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" v-tooltip="{
viewBox="0 0 24 24" content: $i18n.get('info_not_allowed_change_order_metadata'),
width="24px" autoHide: true,
fill="currentColor"> popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
<path placement: 'auto-start'
d="M0 0h24v24H0V0z" }"
fill="transparent"/> :style="{ opacity: '0.0' }"
<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="$set(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'
}"
class="gray-icon icon"
:style="{ cursor: 'pointer', opacity: openedMetadatumId != metadatum.id ? '1.0' : '0.0' }"
@click="Object.assign( collapses, { [metadatum.id]: !isCollapseOpen(metadatum.id) })">
<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> </span>
({{ metadatum.metadata_type_object.name }}) <span
<span v-if="metadatum.id != undefined && metadatum.metadata_type_object"
v-if="metadatum.status === 'private'" class="label-details"
class="icon" :class="{ 'has-text-weight-bold': metadatum.metadata_type_object.core }">
v-tooltip="{ <span
content: $i18n.get('status_private'), v-if="metadatum.required === 'yes'"
autoHide: true, v-tooltip="{
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], content: $i18n.get('label_required'),
placement: 'auto-start' autoHide: true,
}"> popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
<i class="tainacan-icon tainacan-icon-private"/> placement: 'auto-start'
</span> }">
<span *&nbsp;
v-tooltip="{ </span>
content: $i18n.get('label_repository_metadatum'), ({{ metadatum.metadata_type_object.name }})
autoHide: true, <span
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], v-if="metadatum.status === 'private'"
placement: 'auto-start' v-tooltip="{
}" content: $i18n.get('status_private'),
class="icon icon-level-identifier"> autoHide: true,
<i popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
:class="{ placement: 'auto-start'
'has-text-blue5': metadatum.enabled, }"
'has-text-gray3': !metadatum.enabled class="icon">
}" <i class="tainacan-icon tainacan-icon-private" />
class="tainacan-icon tainacan-icon-repository" /> </span>
</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 <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
:class="{
'has-text-blue5': metadatum.enabled,
'has-text-gray3': !metadatum.enabled
}"
class="tainacan-icon tainacan-icon-repository" />
</span> </span>
</a> </span>
<a <span
v-if="metadatum.current_user_can_delete" v-if="metadatum.id == undefined"
:style="{ visibility: metadatum.collection_id != collectionId || metadatum.metadata_type_object.core ? 'hidden' : 'visible' }" class="loading-spinner" />
@click.prevent="removeMetadatum(metadatum)"> <span
<span v-if="metadatum.id !== undefined"
v-tooltip="{ class="controls">
content: $i18n.get('delete'), <a
autoHide: true, v-if="metadatum.current_user_can_edit"
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], :style="{ visibility:
placement: 'auto-start' metadatum.collection_id != collectionId
}" ? 'hidden' : 'visible'
class="icon"> }"
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/> @click.prevent="toggleMetadatumEdition(metadatum)">
</span> <span
</a> v-tooltip="{
</span> 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 <!-- Child metadata list, inside each compound metadata -->
v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id" <child-metadata-list
:metadatum="metadatum" /> v-if="metadatum.metadata_type_object && metadatum.metadata_type_object.component == 'tainacan-compound'"
</transition> :parent="metadatum"
</div> :metadata-name-filter-string="metadataNameFilterString"
:metadata-type-filter-options="metadataTypeFilterOptions"
<!-- Child metadata list, inside each compound metadata --> :has-some-metadata-type-filter-applied="hasSomeMetadataTypeFilterApplied"
<child-metadata-list :is-parent-multiple="metadatum.multiple == 'yes'"
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="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" /> <!-- Metadata edition form, for each metadata -->
</b-modal> <b-modal
:model-value="openedMetadatumId == metadatum.id"
trap-focus
aria-modal
aria-role="dialog"
custom-class="tainacan-modal"
:close-button-aria-label="$i18n.get('close')"
@close="onEditionCanceled()">
<metadatum-edition-form
:collection-id="collectionId"
:original-metadatum="metadatum"
:is-repository-level="true"
:index="index"
@on-edition-finished="onEditionFinished()"
@on-edition-canceled="onEditionCanceled()" />
</b-modal>
</div> </div>
</draggable><!-- End of .active-metadata-area --> </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
}, },
emits: [
'on-update-highlighted-metadatum',
],
data() { data() {
return { return {
collectionId: 'default', collectionId: 'default',
isLoadingMetadata: false, isLoadingMetadata: false,
openedMetadatumId: '', openedMetadatumId: '',
hightlightedMetadatum: '', highlightedMetadatum: '',
collapses: {}, collapses: {},
collapseAll: false, collapseAll: false,
metadataNameFilterString: '', metadataNameFilterString: '',
@ -306,7 +316,7 @@ export default {
}, },
computed: { computed: {
hasSomeMetadataTypeFilterApplied() { hasSomeMetadataTypeFilterApplied() {
return this.metadataTypeFilterOptions.length && this.metadataTypeFilterOptions.some((metadatumType) => metadatumType.enabled); return this.metadataTypeFilterOptions.length > 0 && this.metadataTypeFilterOptions.some((metadatumType) => metadatumType.enabled);
}, },
activeMetadatumList: { activeMetadatumList: {
get() { get() {
@ -326,18 +336,19 @@ export default {
this.editMetadatum(this.activeMetadatumList[existingMetadataIndex]) this.editMetadatum(this.activeMetadatumList[existingMetadataIndex])
} }
}, },
immediate: true immediate: true,
deep: true
}, },
collapseAll(isCollapsed) { collapseAll(isCollapsed) {
this.activeMetadatumList.forEach((metadatum) => this.$set(this.collapses, metadatum.id, isCollapsed)); this.activeMetadatumList.forEach((metadatum) => Object.assign(this.collapses, { [metadatum.id]: isCollapsed }));
} }
}, },
mounted() { mounted() {
this.cleanMetadata(); this.cleanMetadata();
this.loadMetadata(); this.loadMetadata();
this.$eventBusMetadataList.$on('addMetadatumViaButton', this.addMetadatumViaButton); this.$emitter.on('addMetadatumViaButton', this.addMetadatumViaButton);
}, },
beforeDestroy() { beforeUnmount() {
// Cancels previous Request // Cancels previous Request
if (this.metadataSearchCancel != undefined) if (this.metadataSearchCancel != undefined)
this.metadataSearchCancel.cancel('Metadata search Canceled.'); this.metadataSearchCancel.cancel('Metadata search Canceled.');
@ -353,19 +364,23 @@ 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;
this.addNewMetadatum(metadatumType, lastIndex); this.addNewMetadatum(metadatumType, lastIndex);
// Higlights the clicked metadatum // Higlights the clicked metadatum
this.hightlightedMetadatum = metadatumType.name; this.highlightedMetadatum = metadatumType.name;
this.$emit('onUpdatehightlightedMetadatum', this.hightlightedMetadatum); this.$emit('on-update-highlighted-metadatum', this.highlightedMetadatum);
}, },
addNewMetadatum(newMetadatum, newIndex) { addNewMetadatum(newMetadatum, newIndex) {
this.sendMetadatum({ this.sendMetadatum({
@ -379,8 +394,8 @@ export default {
}) })
.then((metadatum) => { .then((metadatum) => {
this.toggleMetadatumEdition(metadatum); this.toggleMetadatumEdition(metadatum);
this.hightlightedMetadatum = ''; this.highlightedMetadatum = '';
this.$emit('onUpdatehightlightedMetadatum', this.hightlightedMetadatum); this.$emit('on-update-highlighted-metadatum', this.highlightedMetadatum);
}) })
.catch((error) => { .catch((error) => {
this.$console.error(error); this.$console.error(error);

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

@ -9,32 +9,31 @@
<div class="field select-all is-pulled-left"> <div class="field select-all is-pulled-left">
<span> <span>
<b-checkbox <b-checkbox
@click.native="selectAllOnPage()" :model-value="allOnPageSelected"
:native-value="allOnPageSelected"> @update:model-value="selectAllOnPage()">
{{ $i18n.get('label_select_all_taxonomies_page') }} {{ $i18n.get('label_select_all_taxonomies_page') }}
</b-checkbox> </b-checkbox>
</span> </span>
</div> </div>
<div class="field is-pulled-right"> <div class="field is-pulled-right">
<b-dropdown <b-dropdown
id="bulk-actions-dropdown"
position="is-bottom-left" position="is-bottom-left"
:disabled="!isSelecting" :disabled="!isSelecting"
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()" aria-role="listitem"
aria-role="listitem"> @click="deleteSelected()">
{{ $i18n.get('label_delete_selected_taxonomies') }} {{ $i18n.get('label_delete_selected_taxonomies') }}
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item <b-dropdown-item
@ -52,7 +51,7 @@
<!-- Checking list --> <!-- Checking list -->
<th v-if="$userCaps.hasCapability('tnc_rep_delete_taxonomies')"> <th v-if="$userCaps.hasCapability('tnc_rep_delete_taxonomies')">
&nbsp; &nbsp;
<!-- nothing to show on header --> <!-- nothing to show on header -->
</th> </th>
<!-- Status icon --> <!-- Status icon -->
<th v-if="isOnAllTaxonomiesTab"> <th v-if="isOnAllTaxonomiesTab">
@ -60,41 +59,49 @@
</th> </th>
<!-- Name --> <!-- Name -->
<th> <th>
<div class="th-wrap">{{ $i18n.get('label_name') }}</div> <div class="th-wrap">
{{ $i18n.get('label_name') }}
</div>
</th> </th>
<!-- Description --> <!-- Description -->
<th> <th>
<div class="th-wrap">{{ $i18n.get('label_description') }}</div> <div class="th-wrap">
{{ $i18n.get('label_description') }}
</div>
</th> </th>
<!-- Collections --> <!-- Collections -->
<th> <th>
<div class="th-wrap">{{ $i18n.get('label_collections_using') }}</div> <div class="th-wrap">
{{ $i18n.get('label_collections_using') }}
</div>
</th> </th>
<!-- Total Items --> <!-- Total Items -->
<th v-if="!isOnTrash"> <th v-if="!isOnTrash">
<div class="th-wrap total-terms-header">{{ $i18n.get('label_total_terms') }}</div> <div class="th-wrap total-terms-header">
{{ $i18n.get('label_total_terms') }}
</div>
</th> </th>
<!-- Actions --> <!-- Actions -->
<th <th
v-if="taxonomies.findIndex((taxonomy) => taxonomy.current_user_can_edit || taxonomy.current_user_can_delete) >= 0" v-if="taxonomies.findIndex((taxonomy) => taxonomy.current_user_can_edit || taxonomy.current_user_can_delete) >= 0"
class="actions-header"> class="actions-header">
&nbsp; &nbsp;
<!-- nothing to show on header for actions cell--> <!-- nothing to show on header for actions cell-->
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr <tr
:class="{ 'selected-row': selected[index] }" v-for="(taxonomy, index) of taxonomies"
:key="index" :key="index"
v-for="(taxonomy, index) of taxonomies"> :class="{ 'selected-row': selected[index] }">
<!-- Checking list --> <!-- Checking list -->
<td <td
v-if="$userCaps.hasCapability('tnc_rep_delete_taxonomies')" v-if="$userCaps.hasCapability('tnc_rep_delete_taxonomies')"
:class="{ 'is-selecting': isSelecting }" :class="{ 'is-selecting': isSelecting }"
class="checkbox-cell"> class="checkbox-cell">
<b-checkbox <b-checkbox
v-model="selected[index]"/> v-model="selected[index]" />
</td> </td>
<!-- Status icon --> <!-- Status icon -->
<td <td
@ -102,25 +109,25 @@
class="status-cell"> class="status-cell">
<span <span
v-if="$statusHelper.hasIcon(taxonomy.status)" v-if="$statusHelper.hasIcon(taxonomy.status)"
class="icon has-text-gray"
v-tooltip="{ v-tooltip="{
content: $i18n.get('status_' + taxonomy.status), content: $i18n.get('status_' + taxonomy.status),
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 has-text-gray">
<i <i
class="tainacan-icon tainacan-icon-1em" class="tainacan-icon tainacan-icon-1em"
:class="$statusHelper.getIcon(taxonomy.status)" :class="$statusHelper.getIcon(taxonomy.status)"
/> />
</span> </span>
</td> </td>
<!-- Name --> <!-- Name -->
<td <td
class="column-default-width column-main-content" class="column-default-width column-main-content"
@click="onClickTaxonomy($event, taxonomy.id, index)" :label="$i18n.get('label_name')"
:label="$i18n.get('label_name')" :aria-label="$i18n.get('label_name') + ': ' + taxonomy.name"
:aria-label="$i18n.get('label_name') + ': ' + taxonomy.name"> @click="onClickTaxonomy($event, taxonomy.id, index)">
<p <p
v-tooltip="{ v-tooltip="{
delay: { delay: {
@ -137,9 +144,9 @@
<!-- Description --> <!-- Description -->
<td <td
class="column-large-width" class="column-large-width"
@click="onClickTaxonomy($event, taxonomy.id, index)" :label="$i18n.get('label_description')"
:label="$i18n.get('label_description')" :aria-label="$i18n.get('label_description') + ': ' + taxonomy.description != undefined && taxonomy.description != '' ? taxonomy.description : `<span class='has-text-gray is-italic'>` + $i18n.get('label_description_not_provided') + `</span>`"
:aria-label="$i18n.get('label_description') + ': ' + taxonomy.description != undefined && taxonomy.description != '' ? taxonomy.description : `<span class='has-text-gray is-italic'>` + $i18n.get('label_description_not_provided') + `</span>`"> @click="onClickTaxonomy($event, taxonomy.id, index)">
<p <p
v-tooltip="{ v-tooltip="{
delay: { delay: {
@ -160,7 +167,6 @@
:label="$i18n.get('label_collections_using')" :label="$i18n.get('label_collections_using')"
:aria-label="(taxonomy.collections != undefined && taxonomy.collections.length != undefined && taxonomy.collections.length > 0) ? taxonomy.collections.toString() : $i18n.get('label_no_collections_using_taxonomy')"> :aria-label="(taxonomy.collections != undefined && taxonomy.collections.length != undefined && taxonomy.collections.length > 0) ? taxonomy.collections.toString() : $i18n.get('label_no_collections_using_taxonomy')">
<p <p
@click.self="onClickTaxonomy($event, taxonomy.id, index)"
v-tooltip="{ v-tooltip="{
delay: { delay: {
shown: 500, shown: 500,
@ -172,15 +178,16 @@
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start' placement: 'auto-start'
}" }"
@click.self="onClickTaxonomy($event, taxonomy.id, index)"
v-html="(taxonomy.collections != undefined && taxonomy.collections.length != undefined && taxonomy.collections.length > 0) ? renderListOfCollections(taxonomy.collections, taxonomy.metadata_by_collection) : $i18n.get('label_no_collections_using_taxonomy')" /> v-html="(taxonomy.collections != undefined && taxonomy.collections.length != undefined && taxonomy.collections.length > 0) ? renderListOfCollections(taxonomy.collections, taxonomy.metadata_by_collection) : $i18n.get('label_no_collections_using_taxonomy')" />
</td> </td>
<!-- Total terms --> <!-- Total terms -->
<td <td
@click.self="onClickTaxonomy($event, taxonomy.id, index)" v-if="taxonomy.total_terms != undefined"
class="column-small-width column-align-right" class="column-small-width column-align-right"
:label="$i18n.get('label_total_terms')" :label="$i18n.get('label_total_terms')"
v-if="taxonomy.total_terms != undefined" :aria-label="$i18n.get('label_total_terms') + ': ' + taxonomy.total_terms['total']"
:aria-label="$i18n.get('label_total_terms') + ': ' + taxonomy.total_terms['total']"> @click.self="onClickTaxonomy($event, taxonomy.id, index)">
<p <p
v-tooltip="{ v-tooltip="{
delay: { delay: {
@ -198,14 +205,14 @@
<!-- Actions --> <!-- Actions -->
<td <td
v-if="taxonomy.current_user_can_edit || taxonomy.current_user_can_delete" v-if="taxonomy.current_user_can_edit || taxonomy.current_user_can_delete"
@click="onClickTaxonomy($event, taxonomy.id, index)"
class="column-default-width" class="column-default-width"
:class="{ 'actions-cell': taxonomy.current_user_can_edit || taxonomy.current_user_can_delete }" :class="{ 'actions-cell': taxonomy.current_user_can_edit || taxonomy.current_user_can_delete }"
:label="$i18n.get('label_actions')"> :label="$i18n.get('label_actions')"
@click="onClickTaxonomy($event, taxonomy.id, index)">
<div class="actions-container"> <div class="actions-container">
<a <a
id="button-edit" v-if="taxonomy.current_user_can_edit"
v-if="taxonomy.current_user_can_edit" id="button-edit"
:aria-label="$i18n.getFrom('taxonomies','edit_item')" :aria-label="$i18n.getFrom('taxonomies','edit_item')"
@click="onClickTaxonomy($event, taxonomy.id, index)"> @click="onClickTaxonomy($event, taxonomy.id, index)">
<span <span
@ -216,12 +223,12 @@
placement: 'bottom' placement: 'bottom'
}" }"
class="icon"> class="icon">
<i class="has-text-secondary tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/> <i class="has-text-secondary tainacan-icon tainacan-icon-1-25em tainacan-icon-edit" />
</span> </span>
</a> </a>
<a <a
id="button-delete" v-if="taxonomy.current_user_can_delete"
v-if="taxonomy.current_user_can_delete" id="button-delete"
:aria-label="$i18n.get('label_button_delete')" :aria-label="$i18n.get('label_button_delete')"
@click.prevent.stop="deleteOneTaxonomy(taxonomy.id)"> @click.prevent.stop="deleteOneTaxonomy(taxonomy.id)">
<span <span
@ -234,16 +241,16 @@
class="icon"> class="icon">
<i <i
:class="{ 'tainacan-icon-delete': !isOnTrash, 'tainacan-icon-deleteforever': isOnTrash }" :class="{ 'tainacan-icon-delete': !isOnTrash, 'tainacan-icon-deleteforever': isOnTrash }"
class="has-text-secondary tainacan-icon tainacan-icon-1-25em"/> class="has-text-secondary tainacan-icon tainacan-icon-1-25em" />
</span> </span>
</a> </a>
<a <a
v-if="!isOnTrash" v-if="!isOnTrash"
id="button-open-external" id="button-open-external"
:aria-label="$i18n.getFrom('taxonomies','view_item')" :aria-label="$i18n.getFrom('taxonomies','view_item')"
@click.stop="" target="_blank"
target="_blank" :href="themeTaxonomiesURL + taxonomy.slug"
:href="themeTaxonomiesURL + taxonomy.slug"> @click.stop="">
<span <span
v-tooltip="{ v-tooltip="{
content: $i18n.get('label_taxonomy_page_on_website'), content: $i18n.get('label_taxonomy_page_on_website'),
@ -253,7 +260,7 @@
html: true html: true
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-openurl"/> <i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-openurl" />
</span> </span>
</a> </a>
</div> </div>
@ -270,7 +277,7 @@
import CustomDialog from '../other/custom-dialog.vue'; import CustomDialog from '../other/custom-dialog.vue';
export default { export default {
name: 'List', name: 'TaxonomiesList',
props: { props: {
isLoading: false, isLoading: false,
total: 0, total: 0,
@ -297,23 +304,28 @@
} }
}, },
watch: { watch: {
taxonomies() { taxonomies: {
this.selected = []; handler() {
for (let i = 0; i < this.taxonomies.length; i++) this.selected = [];
this.selected.push(false); for (let i = 0; i < this.taxonomies.length; i++)
this.selected.push(false);
}
}, },
selected() { selected: {
let allSelected = true; handler() {
let isSelecting = false; let allSelected = true;
for (let i = 0; i < this.selected.length; i++) { let isSelecting = false;
if (this.selected[i] == false) { for (let i = 0; i < this.selected.length; i++) {
allSelected = false; if (this.selected[i] == false) {
} else { allSelected = false;
isSelecting = true; } else {
isSelecting = true;
}
} }
} this.allOnPageSelected = allSelected;
this.allOnPageSelected = allSelected; this.isSelecting = isSelecting;
this.isSelecting = isSelecting; },
deep: true
} }
}, },
methods: { methods: {
@ -408,11 +420,10 @@
}); });
}, },
onClickTaxonomy($event, taxonomyId, index) { onClickTaxonomy($event, taxonomyId, index) {
if ($event.ctrlKey) { if ($event.ctrlKey)
this.$set(this.selected, index, !this.selected[index]); Object.assign( this.selected, { [index]: !this.selected[index] });
} else { else
this.$router.push(this.$routerHelper.getTaxonomyEditPath(taxonomyId)); this.$router.push(this.$routerHelper.getTaxonomyEditPath(taxonomyId));
}
}, },
renderListOfCollections(collections, metadata) { renderListOfCollections(collections, metadata) {
let htmlList = ''; let htmlList = '';

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

@ -2,8 +2,8 @@
<div class="tainacan-hierarchical-list-container"> <div class="tainacan-hierarchical-list-container">
<b-loading <b-loading
:is-full-page="false" v-model="isColumnLoading"
:active.sync="isColumnLoading"/> :is-full-page="false" />
<transition name="appear-from-top"> <transition name="appear-from-top">
<button <button
@ -17,13 +17,14 @@
<!-- Hierarchical lists --> <!-- Hierarchical lists -->
<transition-group <transition-group
ref="tainacan-finder-scrolling-container"
tag="div"
class="tainacan-hierarchical-list-columns-container" class="tainacan-hierarchical-list-columns-container"
name="page-left" name="page-left">
ref="tainacan-finder-scrolling-container">
<div <div
v-for="(column, columnIndex) in termColumns" v-for="(column, columnIndex) in termColumns"
class="tainacan-hierarchical-list-column" :key="column.name + '-' + columnIndex"
:key="column.name + '-' + columnIndex"> class="tainacan-hierarchical-list-column">
<div <div
v-if="!searchString.length" v-if="!searchString.length"
class="column-header"> class="column-header">
@ -36,9 +37,9 @@
class="b-checkbox checkbox"> class="b-checkbox checkbox">
<input <input
type="checkbox" type="checkbox"
@input="selectColumn(columnIndex)"
:checked="selectedColumnIndex == columnIndex" :checked="selectedColumnIndex == columnIndex"
:value="columnIndex"> :value="columnIndex"
@input="selectColumn(columnIndex)">
<span class="check" /> <span class="check" />
<span <span
v-if="column.id" v-if="column.id"
@ -55,26 +56,26 @@
</label> </label>
<a <a
:style="!column.children.length ? 'opacity: 0; visibility: hidden;' : ''" :style="!column.children.length ? 'opacity: 0; visibility: hidden;' : ''"
@click="onAddNewChildTerm(column.id)" class="add-link"
class="add-link"> @click="onAddNewChildTerm(column.id)">
<span class="icon is-small"> <span class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/> <i class="tainacan-icon has-text-secondary tainacan-icon-add" />
</span> </span>
&nbsp;{{ $i18n.get('label_new_term') }} &nbsp;{{ $i18n.get('label_new_term') }}
</a> </a>
<a <a
:style="!column.children.length ? 'opacity: 0; visibility: hidden;' : 'position: relative;'" :style="!column.children.length ? 'opacity: 0; visibility: hidden;' : 'position: relative;'"
@click="multipleInsertion({ parentId: column.id, parentName: column.name })" class="add-link"
class="add-link"> @click="multipleInsertion({ parentId: column.id, parentName: column.name })">
<span <span
style="position: absolute;margin-left: -5px;margin-top: 5px;" style="position: absolute;margin-left: -5px;margin-top: 5px;"
class="icon is-small"> class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/> <i class="tainacan-icon has-text-secondary tainacan-icon-add" />
</span> </span>
<span <span
style="margin-top: -5px;" style="margin-top: -5px;"
class="icon is-small"> class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/> <i class="tainacan-icon has-text-secondary tainacan-icon-add" />
</span> </span>
&nbsp;{{ termColumns.length <= 1 ? $i18n.get('label_multiple_terms') : $i18n.get('label_multiple') }} &nbsp;{{ termColumns.length <= 1 ? $i18n.get('label_multiple_terms') : $i18n.get('label_multiple') }}
</a> </a>
@ -82,27 +83,27 @@
</div> </div>
<ul v-if="column.children.length"> <ul v-if="column.children.length">
<b-field <b-field
:addons="false"
class="tainacan-li-checkbox"
:class="{ 'tainacan-li-checkbox--parent-active': termColumns[columnIndex + 1] && termColumns[columnIndex + 1].id == term.id }"
v-for="(term, index) in column.children" v-for="(term, index) in column.children"
:id="`${columnIndex}.${index}-tainacan-li-checkbox-model`" :id="`${columnIndex}.${index}-tainacan-li-checkbox-model`"
:ref="`${columnIndex}.${index}-tainacan-li-checkbox-model`" :ref="`${columnIndex}.${index}-tainacan-li-checkbox-model`"
:key="term.id"> :key="term.id"
<label class="b-checkbox checkbox" > :addons="false"
class="tainacan-li-checkbox"
:class="{ 'tainacan-li-checkbox--parent-active': termColumns[columnIndex + 1] && termColumns[columnIndex + 1].id == term.id }">
<label class="b-checkbox checkbox">
<input <input
@input="updateSelectedTerms(term)"
:checked="selectedColumnIndex >= 0 ? selectedColumnIndex == columnIndex : isTermSelected(term.id)" :checked="selectedColumnIndex >= 0 ? selectedColumnIndex == columnIndex : isTermSelected(term.id)"
:disabled="selectedColumnIndex >= 0" :disabled="selectedColumnIndex >= 0"
:value="term.id" :value="term.id"
type="checkbox"> type="checkbox"
@input="updateSelectedTerms(term)">
<span class="check" /> <span class="check" />
<span class="control-label"> <span class="control-label">
<span <span
v-if="!isHierarchical || (isHierarchical && !searchString.length)" v-if="!isHierarchical || (isHierarchical && !searchString.length)"
class="checkbox-name-text"> class="checkbox-name-text">
{{ term.name }} {{ term.name }}
</span> </span>
<span <span
v-else v-else
class="checkbox-name-text" class="checkbox-name-text"
@ -121,7 +122,7 @@
placement: 'bottom' placement: 'bottom'
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit" />
</span> </span>
</button> </button>
<button <button
@ -136,7 +137,7 @@
placement: 'bottom' placement: 'bottom'
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-delete"/> <i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-delete" />
</span> </span>
</button> </button>
<a <a
@ -150,7 +151,7 @@
placement: 'bottom' placement: 'bottom'
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-openurl"/> <i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-openurl" />
</span> </span>
</a> </a>
</div> </div>
@ -163,20 +164,20 @@
<span <span
style="margin-right: 0.25rem; opacity: 1.0;" style="margin-right: 0.25rem; opacity: 1.0;"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-nextlevel"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-nextlevel" />
</span> </span>
<span <span
class="is-hidden-mobile" v-if="termColumns.length <= 1"
v-if="termColumns.length <= 1"> class="is-hidden-mobile">
{{ term.total_children + ' ' + $i18n.get('label_children_terms') }} {{ term.total_children + ' ' + $i18n.get('label_children_terms') }}
</span> </span>
<span <span
v-else
v-tooltip="{ v-tooltip="{
content: term.total_children + ' ' + $i18n.get('label_children_terms'), content: term.total_children + ' ' + $i18n.get('label_children_terms'),
autoHide: false, autoHide: false,
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }">
v-else>
{{ term.total_children }} {{ term.total_children }}
</span> </span>
</button> </button>
@ -184,10 +185,10 @@
<li v-if="column.children.length"> <li v-if="column.children.length">
<div <div
v-if="shouldShowMoreButton(columnIndex)" v-if="shouldShowMoreButton(columnIndex)"
@click="fetchMoreTerms(column, columnIndex)" class="tainacan-show-more"
class="tainacan-show-more"> @click="fetchMoreTerms(column, columnIndex)">
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-showmore"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-showmore" />
</span> </span>
</div> </div>
</li> </li>
@ -197,34 +198,34 @@
class="warning-no-more-terms"> class="warning-no-more-terms">
<p> <p>
<span class="icon is-medium"> <span class="icon is-medium">
<i class="tainacan-icon tainacan-icon-30px tainacan-icon-terms"/> <i class="tainacan-icon tainacan-icon-30px tainacan-icon-terms" />
</span> </span>
</p> </p>
<p>{{ column.name ? $i18n.getWithVariables('info_no_child_term_of_%s_found', [ column.name ]) : $i18n.get('info_no_terms_found') }}</p> <p>{{ column.name ? $i18n.getWithVariables('info_no_child_term_of_%s_found', [ column.name ]) : $i18n.get('info_no_terms_found') }}</p>
<p> <p>
<a <a
@click="onAddNewChildTerm(column.id)" class="add-link"
class="add-link"> @click="onAddNewChildTerm(column.id)">
<span class="icon is-small"> <span class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/> <i class="tainacan-icon has-text-secondary tainacan-icon-add" />
</span> </span>
&nbsp;{{ $i18n.get('label_new_term') }} &nbsp;{{ $i18n.get('label_new_term') }}
</a> </a>
</p> </p>
<p> <p>
<a <a
@click="multipleInsertion({ parentId: column.id, parentName: column.name })"
class="add-link" class="add-link"
style="position: relative;"> style="position: relative;"
@click="multipleInsertion({ parentId: column.id, parentName: column.name })">
<span <span
style="position: absolute;margin-left: -5px;margin-top: 5px;" style="position: absolute;margin-left: -5px;margin-top: 5px;"
class="icon is-small"> class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/> <i class="tainacan-icon has-text-secondary tainacan-icon-add" />
</span> </span>
<span <span
style="margin-top: -5px;" style="margin-top: -5px;"
class="icon is-small"> class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/> <i class="tainacan-icon has-text-secondary tainacan-icon-add" />
</span> </span>
&nbsp;{{ $i18n.get('label_multiple_terms_insertion') }} &nbsp;{{ $i18n.get('label_multiple_terms_insertion') }}
</a> </a>
@ -245,10 +246,10 @@
<p>{{ $i18n.get('info_no_terms_found') }}</p> <p>{{ $i18n.get('info_no_terms_found') }}</p>
<p> <p>
<a <a
@click="onAddNewChildTerm(0)" class="add-link"
class="add-link"> @click="onAddNewChildTerm(0)">
<span class="icon is-small"> <span class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/> <i class="tainacan-icon has-text-secondary tainacan-icon-add" />
</span> </span>
&nbsp;{{ $i18n.get('label_new_term') }} &nbsp;{{ $i18n.get('label_new_term') }}
</a> </a>
@ -269,29 +270,40 @@
:is-hierarchical="isHierarchical" :is-hierarchical="isHierarchical"
:taxonomy-id="taxonomyId" :taxonomy-id="taxonomyId"
:is-modal="true" :is-modal="true"
@onEditionFinished="onTermEditionFinished($event.term, $event.hasChangedParent, $event.initialParent)" :original-form="editTerm"
:original-form="editTerm" /> @on-edition-finished="onTermEditionFinished($event.term, $event.hasChangedParent, $event.initialParent)"
@close="isEditingTerm = false" />
</b-modal> </b-modal>
</div> </div>
</template> </template>
<script> <script>
import { nextTick, defineAsyncComponent } from 'vue';
import { mapActions } from 'vuex'; import { mapActions } from 'vuex';
import TermDeletionDialog from '../other/term-deletion-dialog.vue'; import TermDeletionDialog from '../other/term-deletion-dialog.vue';
import TermParentSelectionDialog from '../other/term-parent-selection-dialog.vue'; import TermParentSelectionDialog from '../other/term-parent-selection-dialog.vue';
import TermMultipleInsertionDialog from '../other/term-multiple-insertion-dialog.vue'; import TermMultipleInsertionDialog from '../other/term-multiple-insertion-dialog.vue';
import { tainacan as axios } from '../../js/axios';
import { tainacanApi } from '../../js/axios';
export default { export default {
name: 'TermsListHierarchical', name: 'TermsListHierarchical',
components: {
TermEditionForm: defineAsyncComponent(() => import('../edition/term-edition-form.vue'))
},
props: { props: {
taxonomyId: Number, taxonomyId: String,
currentUserCanEditTaxonomy: Boolean, currentUserCanEditTaxonomy: Boolean,
selected: Array, selected: Array,
selectedColumnIndex: Number, selectedColumnIndex: Number,
searchString: String, searchString: String,
isHierarchical: Boolean isHierarchical: Boolean
}, },
emits: [
'on-update-selected-column-index',
'on-update-selected-terms',
],
data() { data() {
return { return {
termColumns: [], termColumns: [],
@ -328,12 +340,12 @@ export default {
}, },
created() { created() {
this.fetchTerms(); this.fetchTerms();
this.$parent.$on('deleteSelectedTerms', this.deleteSelectedTerms); this.$emitter.on('deleteSelectedTerms', this.deleteSelectedTerms);
this.$parent.$on('updateSelectedTermsParent', this.updateSelectedTermsParent); this.$emitter.on('updateSelectedTermsParent', this.updateSelectedTermsParent);
}, },
beforeDestroy() { beforeUnmount() {
this.$parent.$off('deleteSelectedTerms', this.deleteSelectedTerms); this.$emitter.off('deleteSelectedTerms', this.deleteSelectedTerms);
this.$parent.$off('updateSelectedTermsParent', this.updateSelectedTermsParent); this.$emitter.off('updateSelectedTermsParent', this.updateSelectedTermsParent);
}, },
methods: { methods: {
...mapActions('taxonomy', [ ...mapActions('taxonomy', [
@ -394,7 +406,7 @@ export default {
else else
this.termColumns.push({ name: name, id: id, children: children, total_children: res.headers['x-wp-total'] }); this.termColumns.push({ name: name, id: id, children: children, total_children: res.headers['x-wp-total'] });
this.$nextTick(() => { nextTick(() => {
setTimeout(() => { setTimeout(() => {
if ( if (
this.$refs && this.$refs &&
@ -447,7 +459,7 @@ export default {
if ( this.searchString.length ) if ( this.searchString.length )
route += '&searchterm=' + this.searchString; route += '&searchterm=' + this.searchString;
axios.get(route) tainacanApi.get(route)
.then(res => { .then(res => {
this.totalRemaining = Object.assign({}, this.totalRemaining, { this.totalRemaining = Object.assign({}, this.totalRemaining, {
@ -483,7 +495,7 @@ export default {
if (this.searchString.length) if (this.searchString.length)
route += '&searchterm=' + this.searchString; route += '&searchterm=' + this.searchString;
axios.get(route) tainacanApi.get(route)
.then(res => { .then(res => {
this.totalRemaining = Object.assign({}, this.totalRemaining, { this.totalRemaining = Object.assign({}, this.totalRemaining, {
@ -505,7 +517,7 @@ export default {
}, },
selectColumn(index) { selectColumn(index) {
const newIndex = this.selectedColumnIndex != index ? index : -1; const newIndex = this.selectedColumnIndex != index ? index : -1;
this.$emit('onUpdateSelectedColumnIndex', { index: newIndex, object: this.termColumns[newIndex] ? this.termColumns[newIndex] : null }); this.$emit('on-update-selected-column-index', { index: newIndex, object: this.termColumns[newIndex] ? this.termColumns[newIndex] : null });
}, },
removeTerm(term) { removeTerm(term) {
@ -597,7 +609,7 @@ export default {
}); });
}, },
updateSelectedTerms(selectedTerm) { updateSelectedTerms(selectedTerm) {
this.$emit('onUpdateSelectedColumnIndex', { index: -1, object: null }); this.$emit('on-update-selected-column-index', { index: -1, object: null });
let currentSelected = JSON.parse(JSON.stringify(this.selected)); let currentSelected = JSON.parse(JSON.stringify(this.selected));
@ -608,7 +620,7 @@ export default {
else else
currentSelected.push(selectedTerm); currentSelected.push(selectedTerm);
this.$emit('onUpdateSelectedTerms', currentSelected); this.$emit('on-update-selected-terms', currentSelected);
}, },
onTermRemovalFinished(term) { onTermRemovalFinished(term) {
const removedTermParentColumn = this.termColumns.findIndex((aFinderColumn) => aFinderColumn.id == term.parent); const removedTermParentColumn = this.termColumns.findIndex((aFinderColumn) => aFinderColumn.id == term.parent);
@ -766,8 +778,8 @@ export default {
}); });
}, },
resetTermsListUI() { resetTermsListUI() {
this.$emit('onUpdateSelectedTerms', []); this.$emit('on-update-selected-terms', []);
this.$emit('onUpdateSelectedColumnIndex', { index: -1, object: null }); this.$emit('on-update-selected-column-index', { index: -1, object: null });
this.removeLevelsAfterIndex(-1); this.removeLevelsAfterIndex(-1);
this.fetchTerms(); this.fetchTerms();
@ -799,7 +811,7 @@ export default {
margin-left: 0px !important; margin-left: 0px !important;
padding: 0 !important; padding: 0 !important;
/deep/ .b-checkbox, /deep/ .b-radio { :deep(.b-checkbox), :deep(.b-radio) {
max-width: 100%; max-width: 100%;
min-height: 1.875em; min-height: 1.875em;
margin-left: 0.7em; margin-left: 0.7em;

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

@ -6,18 +6,18 @@
<!-- Search input --> <!-- Search input -->
<b-field class="is-clearfix terms-search"> <b-field class="is-clearfix terms-search">
<b-input <b-input
v-model="searchString"
expanded expanded
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="searchString"
icon-right="magnify" icon-right="magnify"
type="search" /> type="search" />
</b-field> </b-field>
<span <span
class="selected-terms-info" v-if="selectedColumnIndex >= 0 && currentUserCanEditTaxonomy"
v-if="selectedColumnIndex >= 0 && currentUserCanEditTaxonomy"> class="selected-terms-info">
{{ selectedColumnIndex == 0 ? $i18n.get('label_all_root_terms_selected') : $i18n.getWithVariables('label_terms_child_of_%s_selected', [ selectedColumnObject.name ]) }} {{ selectedColumnIndex == 0 ? $i18n.get('label_all_root_terms_selected') : $i18n.getWithVariables('label_terms_child_of_%s_selected', [ selectedColumnObject.name ]) }}
<button <button
type="button" type="button"
@ -32,31 +32,32 @@
v-if="selected.length && selectedColumnIndex < 0" v-if="selected.length && selectedColumnIndex < 0"
class="field selected-terms-info"> class="field selected-terms-info">
<b-dropdown <b-dropdown
:mobile-modal="true"
id="selected-terms-dropdown" id="selected-terms-dropdown"
:mobile-modal="true"
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
v-for="term of selected" v-for="term of selected"
:key="term.id" :key="term.id"
custom
aria-role="list-item"> aria-role="list-item">
<label class="b-checkbox checkbox"> <label class="b-checkbox checkbox">
<input <input
type="checkbox" type="checkbox"
@input="updateSelectedTerms(term)" :checked="isTermSelected(term.id)"
:checked="isTermSelected(term.id)" :value="getTermIdAsNumber(term.id)"
:value="getTermIdAsNumber(term.id)"> @input="updateSelectedTerms(term)">
<span class="check" /> <span class="check" />
<span class="control-label"> <span class="control-label">
<span <span
@ -72,32 +73,33 @@
v-if="currentUserCanEditTaxonomy" v-if="currentUserCanEditTaxonomy"
class="field"> class="field">
<b-dropdown <b-dropdown
id="bulk-actions-dropdown"
:mobile-modal="true" :mobile-modal="true"
position="is-bottom-left" position="is-bottom-left"
:disabled="amountOfTermsSelected <= 1" :disabled="amountOfTermsSelected <= 1"
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')"
id="item-delete-selected-terms" id="item-delete-selected-terms"
aria-role="listitem"> aria-role="listitem"
@click="$emit('deleteSelectedTerms')">
{{ $i18n.get('label_delete_permanently') }} {{ $i18n.get('label_delete_permanently') }}
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item <b-dropdown-item
v-if="isHierarchical" v-if="isHierarchical"
@click="$emit('updateSelectedTermsParent')"
id="item-update-selected-terms" id="item-update-selected-terms"
aria-role="listitem"> aria-role="listitem"
@click="$emit('updateSelectedTermsParent')">
{{ $i18n.get('label_update_parent') }} {{ $i18n.get('label_update_parent') }}
</b-dropdown-item> </b-dropdown-item>
</b-dropdown> </b-dropdown>
@ -112,9 +114,9 @@
:current-user-can-edit-taxonomy="currentUserCanEditTaxonomy" :current-user-can-edit-taxonomy="currentUserCanEditTaxonomy"
:selected="selected" :selected="selected"
:selected-column-index="selectedColumnIndex" :selected-column-index="selectedColumnIndex"
@onUpdateSelectedTerms="(newSelected) => selected = newSelected" @on-update-selected-terms="(newSelected) => selected = newSelected"
@onUpdateSelectedColumnIndex="(newColumnSelected) => { selectedColumnIndex = newColumnSelected.index; selectedColumnObject = newColumnSelected.object; }" @on-update-selected-column-index="(newColumnSelected) => { selectedColumnIndex = newColumnSelected.index; selectedColumnObject = newColumnSelected.object; }"
/> />
</div> </div>
</template> </template>
@ -127,10 +129,14 @@ export default {
TermsListHierarchical TermsListHierarchical
}, },
props: { props: {
taxonomyId: Number, taxonomyId: String,
currentUserCanEditTaxonomy: Boolean, currentUserCanEditTaxonomy: Boolean,
isHierarchical: Boolean isHierarchical: Boolean
}, },
emits: [
'deleteSelectedTerms',
'updateSelectedTermsParent'
],
data() { data() {
return { return {
searchString: '', searchString: '',
@ -196,7 +202,7 @@ export default {
.control { .control {
margin: 0; margin: 0;
} }
/deep/ .input { :deep(.input) {
height: 0.875em; height: 0.875em;
} }
.input .icon .mdi::before { .input .icon .mdi::before {
@ -216,7 +222,7 @@ export default {
color: var(--tainacan-secondary) color: var(--tainacan-secondary)
} }
} }
/deep/ .field-body>.field { :deep(.field-body>.field) {
padding: 0px !important; padding: 0px !important;
margin-left: 0px !important; margin-left: 0px !important;
} }
@ -235,10 +241,10 @@ export default {
} }
#selected-terms-dropdown { #selected-terms-dropdown {
/deep/ .dropdown-trigger { :deep(.dropdown-trigger) {
font-size: 1.125em !important; font-size: 1.125em !important;
} }
/deep/ .dropdown-menu { :deep(.dropdown-menu) {
width: max-content; width: max-content;
max-width: 380px; max-width: 380px;
} }
@ -282,7 +288,7 @@ export default {
align-items: stretch; align-items: stretch;
min-height: 1.5em; min-height: 1.5em;
/deep/ .b-checkbox, /deep/ .b-radio { :deep(.b-checkbox), :deep(.b-radio) {
margin-right: 0px; margin-right: 0px;
margin-bottom: 0; margin-bottom: 0;
-webkit-break-inside: avoid; -webkit-break-inside: avoid;

292
src/views/admin/components/metadata-types/compound/Compound.vue → src/views/admin/components/metadata-types/compound/TainacanCompound.vue
View File

@ -1,130 +1,133 @@
<template> <template>
<div class="child-metadata-inputs"> <div class="child-metadata-inputs">
<a <a
v-if="!hideCollapses && childItemMetadataGroups.length > 0" v-if="!hideCollapses && childItemMetadataGroups.length > 0"
class="collapse-all" class="collapse-all"
@click="toggleCollapseAllChildren()"> @click="toggleCollapseAllChildren()">
<span class="icon"> <span class="icon">
<i <i
:class="{ 'tainacan-icon-arrowdown' : collapseAllChildren, 'tainacan-icon-arrowright' : !collapseAllChildren }" :class="{ 'tainacan-icon-arrowdown' : collapseAllChildren, 'tainacan-icon-arrowright' : !collapseAllChildren }"
class="tainacan-icon tainacan-icon-1-25em"/> class="tainacan-icon tainacan-icon-1-25em" />
</span>
{{ collapseAllChildren ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
</a>
<div
v-if="childItemMetadataGroups.length > 0"
class="multiple-inputs">
<template v-for="(childItemMetadata, groupIndex) of childItemMetadataGroups">
<hr
v-if="groupIndex > 0"
:key="groupIndex">
<template v-for="(childItemMetadatum, childIndex) of childItemMetadata">
<div
class="field"
:key="groupIndex + '-' + childIndex"
v-if="isRemovingGroup">
<span class="collapse-handle">
<span class="icon">
<i class="has-text-secondary tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
</span>
<label class="label has-tooltip">
<span
v-if="enumerateMetadatum"
style="opacity: 0.65;"
class="metadatum-section-enumeration">
{{ enumerateMetadatum }}.
</span>
{{ childItemMetadatum.metadatum.name }}
</label>
<span
v-if="childItemMetadatum.metadatum.required == 'yes'"
class="required-metadatum-asterisk">
*
</span>
<span class="metadata-type">
({{ childItemMetadatum.metadatum.metadata_type_object.name }})
</span>
<help-button
:title="childItemMetadatum.metadatum.name"
:message="childItemMetadatum.metadatum.description"/>
</span>
<div
class="skeleton"
:style="{
minHeight: (childItemMetadatum.metadatum.metadata_type_object.component == 'tainacan-checkbox' || childItemMetadatum.metadatum.metadata_type_object.component == 'tainacan-taxonomy-checkbox') ? '150px' : '30px'
}" />
</div>
<tainacan-form-item
v-else
v-show="(metadataNameFilterString == '' || filterByMetadatumName(childItemMetadatum))"
:key="groupIndex + '-' + childIndex"
:ref="'tainacan-form-item--' + groupIndex + '-' + childIndex"
:item-metadatum="childItemMetadatum"
:hide-collapses="hideCollapses"
:hide-metadata-types="hideMetadataTypes"
:hide-help-buttons="hideHelpButtons"
:help-info-bellow-label="helpInfoBellowLabel"
:is-collapsed="childItemMetadatum.collapse"
:is-mobile-screen="isMobileScreen"
@changeCollapse="onChangeCollapse($event, groupIndex, childIndex)"
:class="{
'is-last-input': childIndex == childItemMetadata.length - 1,
'is-metadata-navigation-active': isMetadataNavigation
}"
:is-focused="(focusedGroupMetadatum === groupIndex) && (focusedChildMetadatum === childIndex)"
:is-metadata-navigation="isMetadataNavigation"
:enumerate-metadatum="enumerateMetadatum ? ( enumerateMetadatum + ( childItemMetadataGroups.length > 1 ? ( '.' + (Number(groupIndex) + 1) ) : '' ) + '.' + (Number(childIndex) + 1) ) : false"
@touchstart.native="isMetadataNavigation ? setMetadatumChildFocus({ groupIndex: groupIndex, childIndex: childIndex, scrollIntoView: false }): ''"
@mousedown.native="isMetadataNavigation ? setMetadatumChildFocus({ groupIndex: groupIndex, childIndex: childIndex, scrollIntoView: false }) : ''"
@mobileSpecialFocus="setMetadatumChildFocus({ groupIndex: groupIndex, childIndex: childIndex, scrollIntoView: true })"
/>
</template>
<a
v-if="isMultiple"
@click="removeGroup(groupIndex)"
class="add-link"
:key="groupIndex">
<span class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-remove"/>
</span>
&nbsp;{{ $i18n.get('label_remove_value') }}
</a>
</template>
<transition name="filter-item">
<span
v-if="isCreatingGroup"
style="width: 100%;"
class="icon has-text-success loading-icon">
<div class="control has-icons-right is-loading is-clearfix" />
</span> </span>
</transition> {{ collapseAllChildren ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
</div> </a>
<p
v-else <div
class="empty-label"> v-if="childItemMetadataGroups.length > 0"
{{ $i18n.get('info_no_value_compound_metadata') }} class="multiple-inputs">
</p> <template
<a v-for="(childItemMetadata, groupIndex) of childItemMetadataGroups"
v-if="isMultiple && (maxMultipleValues === undefined || maxMultipleValues === 0 || (maxMultipleValues !== 1 && maxMultipleValues > childItemMetadataGroups.length))" :key="groupIndex">
:disabled="itemMetadatum.item.id && (childItemMetadataGroups.length > 0 && !someValueOnLastInput)" <hr v-if="groupIndex > 0">
@click="addGroup"
class="is-inline-block add-link"> <template
<span class="icon is-small"> v-for="(childItemMetadatum, childIndex) of childItemMetadata"
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/> :key="groupIndex + '-' + childIndex">
</span> <div
&nbsp;{{ $i18n.get('label_add_value') }} v-if="isRemovingGroup"
</a> class="field">
<span class="collapse-handle">
<span class="icon">
<i class="has-text-secondary tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
</span>
<label class="label has-tooltip">
<span
v-if="enumerateMetadatum"
style="opacity: 0.65;"
class="metadatum-section-enumeration">
{{ enumerateMetadatum }}.
</span>
{{ childItemMetadatum.metadatum.name }}
</label>
<span
v-if="childItemMetadatum.metadatum.required == 'yes'"
class="required-metadatum-asterisk">
*
</span>
<span class="metadata-type">
({{ childItemMetadatum.metadatum.metadata_type_object.name }})
</span>
<help-button
:title="childItemMetadatum.metadatum.name"
:message="childItemMetadatum.metadatum.description" />
</span>
<div
class="skeleton"
:style="{
minHeight: (childItemMetadatum.metadatum.metadata_type_object.component == 'tainacan-checkbox' || childItemMetadatum.metadatum.metadata_type_object.component == 'tainacan-taxonomy-checkbox') ? '150px' : '30px'
}" />
</div>
<tainacan-form-item
v-else
v-show="(metadataNameFilterString == '' || filterByMetadatumName(childItemMetadatum))"
:ref="'tainacan-form-item--' + groupIndex + '-' + childIndex"
:item-metadatum="childItemMetadatum"
:hide-collapses="hideCollapses"
:hide-metadata-types="hideMetadataTypes"
:hide-help-buttons="hideHelpButtons"
:help-info-bellow-label="helpInfoBellowLabel"
:is-collapsed="childItemMetadatum.collapse"
:is-mobile-screen="isMobileScreen"
:class="{
'is-last-input': childIndex == childItemMetadata.length - 1,
'is-metadata-navigation-active': isMetadataNavigation
}"
:is-focused="(focusedGroupMetadatum === groupIndex) && (focusedChildMetadatum === childIndex)"
:is-metadata-navigation="isMetadataNavigation"
:enumerate-metadatum="enumerateMetadatum ? ( enumerateMetadatum + ( childItemMetadataGroups.length > 1 ? ( '.' + (Number(groupIndex) + 1) ) : '' ) + '.' + (Number(childIndex) + 1) ) : false"
@change-collapse="onChangeCollapse($event, groupIndex, childIndex)"
@touchstart="isMetadataNavigation ? setMetadatumChildFocus({ groupIndex: groupIndex, childIndex: childIndex, scrollIntoView: false }): ''"
@mousedown="isMetadataNavigation ? setMetadatumChildFocus({ groupIndex: groupIndex, childIndex: childIndex, scrollIntoView: false }) : ''"
@mobile-special-focus="setMetadatumChildFocus({ groupIndex: groupIndex, childIndex: childIndex, scrollIntoView: true })"
/>
</div> </template>
<a
v-if="isMultiple"
class="add-link"
@click="removeGroup(groupIndex)">
<span class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-remove" />
</span>
&nbsp;{{ $i18n.get('label_remove_value') }}
</a>
</template>
<transition name="filter-item">
<span
v-if="isCreatingGroup"
style="width: 100%;"
class="icon has-text-success loading-icon">
<div class="control has-icons-right is-loading is-clearfix" />
</span>
</transition>
</div>
<p
v-else
class="empty-label">
{{ $i18n.get('info_no_value_compound_metadata') }}
</p>
<a
v-if="isMultiple && (maxMultipleValues === undefined || maxMultipleValues === 0 || (maxMultipleValues !== 1 && maxMultipleValues > childItemMetadataGroups.length))"
:disabled="itemMetadatum.item.id && (childItemMetadataGroups.length > 0 && !someValueOnLastInput)"
class="is-inline-block add-link"
@click="addGroup">
<span class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-add" />
</span>
&nbsp;{{ $i18n.get('label_add_value') }}
</a>
</div>
</template> </template>
<script> <script>
import { eventBusItemMetadata } from '../../../js/event-bus-item-metadata'; import { nextTick, defineAsyncComponent } from 'vue';
import { mapActions } from 'vuex';
export default { export default {
components: {
TainacanFormItem: defineAsyncComponent(() => import('../tainacan-form-item.vue')),
},
props: { props: {
itemMetadatum: Object, itemMetadatum: Object,
value: [String, Number, Array], value: [String, Number, Array],
@ -136,7 +139,7 @@
metadataNameFilterString: '', metadataNameFilterString: '',
isMobileScreen: false, isMobileScreen: false,
isMetadataNavigation: false, isMetadataNavigation: false,
enumerateMetadatum: [Boolean|String], enumerateMetadatum: [Boolean,String],
isFocused: false isFocused: false
}, },
data() { data() {
@ -176,29 +179,32 @@
handler() { handler() {
this.createChildMetadataGroups(); this.createChildMetadataGroups();
}, },
immediate: true immediate: true,
deep: true
}, },
isMetadataNavigation() { isMetadataNavigation() {
this.focusedGroupMetadatum = 0; this.focusedGroupMetadatum = 0;
this.focusedChildMetadatum = 0; this.focusedChildMetadatum = 0;
}, },
isFocused() { isFocused() {
if (this.isFocused) { if ( this.isFocused )
this.setMetadatumChildFocus({ groupIndex: this.focusedGroupMetadatum, childIndex: this.focusedChildMetadatum, scrollIntoView: true }); this.setMetadatumChildFocus({ groupIndex: this.focusedGroupMetadatum, childIndex: this.focusedChildMetadatum, scrollIntoView: true });
}
} }
}, },
created() { created() {
eventBusItemMetadata.$on('hasRemovedItemMetadataGroup', this.laterUpdateIsRemovingGroup); this.$emitter.on('hasRemovedItemMetadataGroup', this.laterUpdateIsRemovingGroup);
eventBusItemMetadata.$on('focusPreviousChildMetadatum', this.focusPreviousChildMetadatum); this.$emitter.on('focusPreviousChildMetadatum', this.focusPreviousChildMetadatum);
eventBusItemMetadata.$on('focusNextChildMetadatum', this.focusNextChildMetadatum); this.$emitter.on('focusNextChildMetadatum', this.focusNextChildMetadatum);
}, },
beforeDestroy() { beforeUnmount() {
eventBusItemMetadata.$off('hasRemovedItemMetadataGroup', this.laterUpdateIsRemovingGroup); this.$emitter.off('hasRemovedItemMetadataGroup', this.laterUpdateIsRemovingGroup);
eventBusItemMetadata.$off('focusPreviousChildMetadatum', this.focusPreviousChildMetadatum); this.$emitter.off('focusPreviousChildMetadatum', this.focusPreviousChildMetadatum);
eventBusItemMetadata.$off('focusNextChildMetadatum', this.focusNextChildMetadatum); this.$emitter.off('focusNextChildMetadatum', this.focusNextChildMetadatum);
}, },
methods: { methods: {
...mapActions('item', [
'fetchCompoundFirstParentMetaId'
]),
createChildMetadataGroups() { createChildMetadataGroups() {
let currentChildItemMetadataGroups = []; let currentChildItemMetadataGroups = [];
@ -288,9 +294,9 @@
if (this.itemMetadatum.item && this.itemMetadatum.item.id) { if (this.itemMetadatum.item && this.itemMetadatum.item.id) {
// Sends value to api so we can obtain the parent_meta_id // Sends value to api so we can obtain the parent_meta_id
eventBusItemMetadata.fetchCompoundFirstParentMetaId({ this.fetchCompoundFirstParentMetaId({
itemId: this.itemMetadatum.item.id, item_id: this.itemMetadatum.item.id,
metadatumId: this.itemMetadatum.metadatum.id metadatum_id: this.itemMetadatum.metadatum.id
}).then((parentMetaId) => { }).then((parentMetaId) => {
// Create a new placeholder parent_meta_id group here. // Create a new placeholder parent_meta_id group here.
@ -360,7 +366,7 @@
if (this.itemMetadatum.value && this.itemMetadatum.value[groupIndex] && this.itemMetadatum.value[groupIndex][0]) { if (this.itemMetadatum.value && this.itemMetadatum.value[groupIndex] && this.itemMetadatum.value[groupIndex][0]) {
this.isRemovingGroup = true; this.isRemovingGroup = true;
eventBusItemMetadata.$emit('remove_group', { this.$emitter.emit('removeCompoundGroup', {
itemId: this.itemMetadatum.item.id, itemId: this.itemMetadatum.item.id,
metadatumId: this.itemMetadatum.metadatum.id, metadatumId: this.itemMetadatum.metadatum.id,
parentMetaId: this.itemMetadatum.item.id ? this.itemMetadatum.value[groupIndex][0].parent_meta_id : groupIndex parentMetaId: this.itemMetadatum.item.id ? this.itemMetadatum.value[groupIndex][0].parent_meta_id : groupIndex
@ -394,8 +400,8 @@
// This keeps the navigation going on when no child input exists // This keeps the navigation going on when no child input exists
if (this.childItemMetadataGroups.length === 0) { if (this.childItemMetadataGroups.length === 0) {
eventBusItemMetadata.$emit('isOnFirstMetadatumOfCompoundNavigation', true); this.$emitter.emit('isOnFirstMetadatumOfCompoundNavigation', true);
eventBusItemMetadata.$emit('isOnLastMetadatumOfCompoundNavigation', true); this.$emitter.emit('isOnLastMetadatumOfCompoundNavigation', true);
} }
}, },
focusNextChildMetadatum() { focusNextChildMetadatum() {
@ -409,13 +415,13 @@
// This keeps the navigation going on when no child input exists // This keeps the navigation going on when no child input exists
if (this.childItemMetadataGroups.length === 0) { if (this.childItemMetadataGroups.length === 0) {
eventBusItemMetadata.$emit('isOnFirstMetadatumOfCompoundNavigation', true); this.$emitter.emit('isOnFirstMetadatumOfCompoundNavigation', true);
eventBusItemMetadata.$emit('isOnLastMetadatumOfCompoundNavigation', true); this.$emitter.emit('isOnLastMetadatumOfCompoundNavigation', true);
} }
}, },
informItemEditionFormOfChildNavigation() { informItemEditionFormOfChildNavigation() {
eventBusItemMetadata.$emit('isOnFirstMetadatumOfCompoundNavigation', this.focusedGroupMetadatum === 0 && this.focusedChildMetadatum === 0); this.$emitter.emit('isOnFirstMetadatumOfCompoundNavigation', this.focusedGroupMetadatum === 0 && this.focusedChildMetadatum === 0);
eventBusItemMetadata.$emit('isOnLastMetadatumOfCompoundNavigation', (this.focusedGroupMetadatum === this.childItemMetadataGroups.length - 1) && (this.focusedChildMetadatum === this.childItemMetadataGroups[this.focusedGroupMetadatum].length - 1) ); this.$emitter.emit('isOnLastMetadatumOfCompoundNavigation', (this.focusedGroupMetadatum === this.childItemMetadataGroups.length - 1) && (this.focusedChildMetadatum === this.childItemMetadataGroups[this.focusedGroupMetadatum].length - 1) );
}, },
setMetadatumChildFocus({ groupIndex = 0, childIndex = 0, scrollIntoView = false }) { setMetadatumChildFocus({ groupIndex = 0, childIndex = 0, scrollIntoView = false }) {
const previousGroupIndex = this.focusedGroupMetadatum; const previousGroupIndex = this.focusedGroupMetadatum;
@ -458,7 +464,7 @@
} }
}, },
laterUpdateIsRemovingGroup() { laterUpdateIsRemovingGroup() {
this.$nextTick(() => { nextTick(() => {
this.isRemovingGroup = false; this.isRemovingGroup = false;
}); });
} }
@ -519,10 +525,10 @@
.field { .field {
padding-left: 12px; padding-left: 12px;
/deep/ .label { :deep(.label) {
margin-left: 0; margin-left: 0;
} }
/deep/ .collapse-handle { :deep(.collapse-handle) {
margin-left: -28px; margin-left: -28px;
} }
} }

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

@ -1,7 +1,7 @@
<template> <template>
<div class="child-metadata-list-container"> <div class="child-metadata-list-container">
<span class="icon children-icon not-sortable-item"> <span class="icon children-icon not-sortable-item">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-nextlevel"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-nextlevel" />
</span> </span>
<section <section
v-if="childrenMetadata.length <= 0" v-if="childrenMetadata.length <= 0"
@ -9,221 +9,228 @@
<div class="content has-text-gray has-text-centered"> <div class="content has-text-gray has-text-centered">
<p> <p>
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-metadata"/> <i class="tainacan-icon tainacan-icon-18px tainacan-icon-metadata" />
</span> </span>
</p> </p>
<p>{{ $i18n.get('info_create_child_metadata') }}</p> <p>{{ $i18n.get('info_create_child_metadata') }}</p>
</div> </div>
</section> </section>
<draggable <sortable
v-model="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"
@change="handleChange" item-key="id"
: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 @change="handleChange">
}" <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" v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)"
class="handle"> class="active-metadatum-item"
<span class="sorting-buttons"> :class="{
<button 'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied,
:disabled="index == 0" 'not-focusable-item': openedMetadatumId == metadatum.id,
class="link-button" 'disabled-metadatum': parent.enabled == false,
@click="moveMetadatumUpViaButton(index)" 'inherited-metadatum': (metadatum.collection_id != collectionId && metadatum.parent == 0) || isRepositoryLevel
:aria-label="$i18n.get('label_move_up')"> }">
<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)" :aria-label="$i18n.get('label_move_up')"
:aria-label="$i18n.get('label_move_down')"> @click="moveMetadatumUpViaButton(index)">
<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="{ :aria-label="$i18n.get('label_move_down')"
content: metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder ? $i18n.get('info_not_allowed_change_order_metadata') : $i18n.get('instruction_drag_and_drop_metadatum_sort'), @click="moveMetadatumDownViaButton(index)">
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"> </span>
<!-- <i class="tainacan-icon tainacan-icon-18px tainacan-icon-drag"/> --> <span
<svg v-tooltip="{
xmlns="http://www.w3.org/2000/svg" content: metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder ? $i18n.get('info_not_allowed_change_order_metadata') : $i18n.get('instruction_drag_and_drop_metadatum_sort'),
height="24px" autoHide: true,
viewBox="0 0 24 24" popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
width="24px" placement: 'auto-start'
fill="currentColor"> }"
<path :style="{ opacity: !(metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied) ? '1.0' : '0.0' }"
d="M0 0h24v24H0V0z" class="icon grip-icon">
fill="transparent"/> <!-- <i class="tainacan-icon tainacan-icon-18px tainacan-icon-drag"/> -->
<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
</svg> xmlns="http://www.w3.org/2000/svg"
</span> height="24px"
<span viewBox="0 0 24 24"
v-tooltip="{ width="24px"
content: $i18n.get('label_view_metadata_details'), fill="currentColor">
autoHide: true, <path
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? '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" />
@click="$set(collapses, metadatum.id, !isCollapseOpen(metadatum.id))" </svg>
class="gray-icon icon" </span>
: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')" /> v-tooltip="{
</span> content: $i18n.get('label_view_metadata_details'),
<span class="metadatum-name"> autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}"
class="gray-icon icon"
:style="{ cursor: 'pointer', opacity: openedMetadatumId != metadatum.id ? '1.0' : '0.0' }"
@click="Object.assign( collapses, { [metadatum.id]: !isCollapseOpen(metadatum.id) })">
<i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
</span>
<span class="metadatum-name">
{{ 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> </span>
({{ metadatum.metadata_type_object.name }}) <span
<!-- <em v-if="metadatum.collection_id != collectionId">{{ $i18n.get('label_inherited') }}</em> --> v-if="metadatum.id != undefined && metadatum.metadata_type_object"
<em class="label-details">
v-if="metadatum.metadata_type_object.core && <span
metadatum.metadata_type_object.related_mapped_prop == 'title'"> 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') }} {{ $i18n.get('label_core_title') }}
</em> </em>
<em <em
v-if="metadatum.metadata_type_object.core && v-if="metadatum.metadata_type_object.core &&
metadatum.metadata_type_object.related_mapped_prop == 'description'"> metadatum.metadata_type_object.related_mapped_prop == 'description'">
{{ $i18n.get('label_core_description') }} {{ $i18n.get('label_core_description') }}
</em> </em>
<span <span
v-if="metadatum.status == 'private'" v-if="metadatum.status == 'private'"
class="icon" v-tooltip="{
v-tooltip="{ content: $i18n.get('status_private'),
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: 'auto-start'
placement: 'auto-start' }"
}"> class="icon">
<i class="tainacan-icon tainacan-icon-private"/> <i class="tainacan-icon tainacan-icon-private" />
</span> </span>
<span
v-tooltip="{
content: (metadatum.collection_id == 'default') || isRepositoryLevel ? $i18n.get('label_repository_metadatum') : $i18n.get('label_collection_metadatum'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon icon-level-identifier">
<i
:class="{
'tainacan-icon-collection': (metadatum.collection_id != 'default' && !isRepositoryLevel),
'tainacan-icon-repository': (metadatum.collection_id == 'default') || isRepositoryLevel,
'has-text-turquoise5': (metadatum.collection_id != 'default' && !isRepositoryLevel),
'has-text-blue5': (metadatum.collection_id == 'default' || isRepositoryLevel),
'has-text-gray3': !parent.enabled
}"
class="tainacan-icon" />
</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 <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
:class="{
'tainacan-icon-collection': (metadatum.collection_id != 'default' && !isRepositoryLevel),
'tainacan-icon-repository': (metadatum.collection_id == 'default') || isRepositoryLevel,
'has-text-turquoise5': (metadatum.collection_id != 'default' && !isRepositoryLevel),
'has-text-blue5': (metadatum.collection_id == 'default' || isRepositoryLevel),
'has-text-gray3': !parent.enabled
}"
class="tainacan-icon" />
</span> </span>
</a> </span>
<a <span
v-if="metadatum.current_user_can_delete" v-if="metadatum.id == undefined"
:style="{ visibility: class="loading-spinner" />
metadatum.collection_id != collectionId || <span
metadatum.metadata_type_object.related_mapped_prop == 'title' || v-if="metadatum.id !== undefined"
metadatum.metadata_type_object.related_mapped_prop == 'description' class="controls">
? 'hidden' : 'visible' <a
v-if="metadatum.current_user_can_edit"
:style="{ visibility:
metadatum.collection_id != collectionId
? 'hidden' : 'visible'
}" }"
@click.prevent="removeMetadatum(metadatum)"> @click.prevent="toggleMetadatumEdition(metadatum.id)">
<span <span
v-tooltip="{ v-tooltip="{
content: $i18n.get('delete'), content: $i18n.get('edit'),
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">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit" />
</span> </span>
</a> </a>
</span> <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
:model-value="openedMetadatumId == metadatum.id"
trap-focus
aria-modal
aria-role="dialog"
custom-class="tainacan-modal"
:close-button-aria-label="$i18n.get('close')"
@close="onEditionCanceled()">
<metadatum-edition-form
:collection-id="collectionId"
:original-metadatum="metadatum"
:is-parent-multiple="isParentMultiple"
:is-repository-level="isRepositoryLevel"
:index="index"
@on-edition-finished="onEditionFinished()"
@on-edition-canceled="onEditionCanceled()" />
</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,
@ -263,7 +273,7 @@
isLoadingMetadata: false, isLoadingMetadata: false,
isUpdatingMetadataOrder: false, isUpdatingMetadataOrder: false,
openedMetadatumId: '', openedMetadatumId: '',
hightlightedMetadatum: '', highlightedMetadatum: '',
metadataSearchCancel: undefined, metadataSearchCancel: undefined,
childrenMetadata: [], childrenMetadata: [],
collapses: {} collapses: {}
@ -279,7 +289,8 @@
this.editMetadatum(this.childrenMetadata[existingMetadataIndex]) this.editMetadatum(this.childrenMetadata[existingMetadataIndex])
} }
}, },
immediate: true immediate: true,
deep: true
}, },
'parent.metadata_type_options.children_objects': { 'parent.metadata_type_options.children_objects': {
handler(childrenObjects) { handler(childrenObjects) {
@ -288,10 +299,11 @@
else else
this.childrenMetadata = []; this.childrenMetadata = [];
}, },
immediate: true immediate: true,
deep: true
}, },
collapseAll(isCollapsed) { collapseAll(isCollapsed) {
this.childrenMetadata.forEach((metadatum) => this.$set(this.collapses, metadatum.id, isCollapsed)); this.childrenMetadata.forEach((metadatum) => Object.assign( this.collapses, { [metadatum.id]: isCollapsed }));
} }
}, },
mounted() { mounted() {
@ -300,7 +312,7 @@
else else
this.collectionId = this.$route.params.collectionId; this.collectionId = this.$route.params.collectionId;
}, },
beforeDestroy() { beforeUnmount() {
// Cancels previous Request // Cancels previous Request
if (this.metadataSearchCancel != undefined) if (this.metadataSearchCancel != undefined)
@ -314,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 = [];
@ -353,7 +379,7 @@
this.updateMetadataOrder(); this.updateMetadataOrder();
this.toggleMetadatumEdition(metadatum.id) this.toggleMetadatumEdition(metadatum.id)
this.hightlightedMetadatum = ''; this.highlightedMetadatum = '';
}) })
.catch((error) => { .catch((error) => {
this.$console.error(error); this.$console.error(error);

92
src/views/admin/components/metadata-types/date/Date.vue → src/views/admin/components/metadata-types/date/TainacanDate.vue
View File

@ -1,50 +1,44 @@
<template> <template>
<div> <div class="control is-clearfix">
<b-input <input
: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) : '')"
v-imask="{ mask: dateMask, skipInvalid: false }"
:value="dateValue"
:disabled="disabled" :disabled="disabled"
:custom-class="{ 'is-danger': isInvalidDate && dateValue }" class="input"
:class="isInvalidDate ? 'is-danger' : ''"
type="text" type="text"
v-mask="dateMask" :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : dateFormat.toLowerCase()"
v-model="dateValue" @input="onInput"
@input.native="onInput"
@blur="onBlur" @blur="onBlur"
@focus="onMobileSpecialFocus" @focus="onMobileSpecialFocus">
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : dateFormat.toLowerCase()" />
<p <p
v-if="isInvalidDate && dateValue" v-if="isInvalidDate"
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="dateValue"-->
<!--:readonly="false"-->
<!--inline-->
<!--@input="onInput($event)"-->
<!--:placeholder="datePlaceHolder"/>-->
<!--</div>-->
<!--</b-collapse>-->
</div> </div>
</template> </template>
<script> <script>
import { dateInter } from "../../../js/mixins"; import { dateInter } from "../../../js/mixins";
import moment from 'moment'; import moment from 'moment';
import { IMaskDirective } from 'vue-imask';
export default { export default {
directives: {
imask: IMaskDirective
},
mixins: [ dateInter ], mixins: [ dateInter ],
props: { props: {
itemMetadatum: Object, itemMetadatum: Object,
value: [String, Number, Array], value: [String, Number, Array],
disabled: false, disabled: false,
}, },
emits: [
'update:value',
'blur',
'mobile-special-focus'
],
data() { data() {
return { return {
dateValue: '', dateValue: '',
@ -54,47 +48,63 @@
computed: { computed: {
isOnItemSubmissionForm() { isOnItemSubmissionForm() {
return !this.itemMetadatum.item || !this.itemMetadatum.item.id; return !this.itemMetadatum.item || !this.itemMetadatum.item.id;
}, }
},
watch: {
value(newValue) {
this.dateValue = newValue ? this.parseDateToNavigatorLanguage(newValue) : '';
}
}, },
created() { created() {
if (this.value) this.dateValue = this.value ? this.parseDateToNavigatorLanguage(this.value) : '';
this.dateValue = this.parseDateToNavigatorLanguage(this.value);
}, },
methods: { methods: {
onInput: _.debounce(function ($event) { onInput: _.debounce(function ($event) {
// Empty dates don't need to be validated, they remove the metadata // Empty dates don't need to be validated, they remove the metadata
if ($event.target.value != '') { if ($event.target.value != '') {
let dateISO = ''; let dateISO = '';
if ($event && $event instanceof Date) if ($event && $event instanceof Date)
dateISO = moment(this.dateValue, this.dateFormat).toISOString(true) ? moment(this.dateValue, this.dateFormat).toISOString(true).split('T')[0] : false; dateISO = moment(this.dateValue, this.dateFormat).toISOString(true) ? moment(this.dateValue, this.dateFormat).toISOString(true).split('T')[0] : false;
else if ($event.target.value && $event.target.value.length === this.dateMask.length) else if ($event.target.value && $event.target.value.length === this.dateFormat.length)
dateISO = moment($event.target.value, this.dateFormat).toISOString(true) ? moment($event.target.value, this.dateFormat).toISOString(true).split('T')[0] : false; dateISO = moment($event.target.value, this.dateFormat).toISOString(true) ? moment($event.target.value, this.dateFormat).toISOString(true).split('T')[0] : false;
if (dateISO == false) { if (dateISO == false) {
if ( !this.isOnItemSubmissionForm )
this.dateValue = $event.target.value; // Keep wrong version in the input so user can fix it
else
this.$emit('update:value', this.dateValue) // On item submission we send the errored version here to allow the server to return the correct format.
this.isInvalidDate = true; this.isInvalidDate = true;
if (!this.isOnItemSubmissionForm) return;
this.$emit('input', false);
else
this.$emit('input', this.dateValue) // On item submission form we keep the error here to allow the server to return the correct format.
} else { } else {
this.isInvalidDate = false; this.$emit('update:value', dateISO);
this.$emit('input', dateISO);
} }
} else { } else {
this.$emit('input', ''); this.$emit('update:value', '');
} }
}, 300),
this.isInvalidDate = false;
}, 750),
onBlur() { onBlur() {
this.$emit('blur'); this.$emit('blur');
}, },
onMobileSpecialFocus() { onMobileSpecialFocus() {
this.$emit('mobileSpecialFocus'); this.$emit('mobile-special-focus');
} }
} }
} }
</script> </script>
<style scoped>
.input:placeholder-shown.is-danger {
background-color: var(--tainacan-input-background-color);
border: 1px solid var(--tainacan-input-border-color);
}
</style>

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

@ -1,71 +1,71 @@
<template> <template>
<section> <section>
<b-field :addons="false" > <b-field :addons="false">
<label class="label is-inline"> <label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-geocoordinate', 'map_provider') }} {{ $i18n.getHelperTitle('tainacan-geocoordinate', 'map_provider') }}
<span>&nbsp;*&nbsp;</span> <span>&nbsp;*&nbsp;</span>
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-geocoordinate', 'map_provider')" :title="$i18n.getHelperTitle('tainacan-geocoordinate', 'map_provider')"
:message="$i18n.getHelperMessage('tainacan-geocoordinate', 'map_provider')" /> :message="$i18n.getHelperMessage('tainacan-geocoordinate', 'map_provider')" />
</label> </label>
<b-input <b-input
name="mapProvider" v-model="mapProvider"
v-model="mapProvider" name="mapProvider"
@input="emitValues()" placeholder="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
placeholder="https://tile.openstreetmap.org/{z}/{x}/{y}.png" /> @update:model-value="emitValues()" />
</b-field> </b-field>
<b-field <b-field
:addons="false" > :addons="false">
<label class="label is-inline"> <label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-geocoordinate', 'attribution') }} {{ $i18n.getHelperTitle('tainacan-geocoordinate', 'attribution') }}
<span>&nbsp;*&nbsp;</span> <span>&nbsp;*&nbsp;</span>
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-geocoordinate', 'attribution')" :title="$i18n.getHelperTitle('tainacan-geocoordinate', 'attribution')"
:message="$i18n.getHelperMessage('tainacan-geocoordinate', 'attribution')" /> :message="$i18n.getHelperMessage('tainacan-geocoordinate', 'attribution')" />
</label> </label>
<b-input <b-input
name="attribution" v-model="attribution"
v-model="attribution" name="attribution"
@input="emitValues()" placeholder="© OpenStreetMap contributors"
placeholder="© OpenStreetMap contributors" /> @update:model-value="emitValues()" />
</b-field> </b-field>
<b-field <b-field
:addons="false" > :addons="false">
<label class="label is-inline"> <label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-geocoordinate', 'initial_zoom') }} {{ $i18n.getHelperTitle('tainacan-geocoordinate', 'initial_zoom') }}
<span>&nbsp;*&nbsp;</span> <span>&nbsp;*&nbsp;</span>
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-geocoordinate', 'initial_zoom')" :title="$i18n.getHelperTitle('tainacan-geocoordinate', 'initial_zoom')"
:message="$i18n.getHelperMessage('tainacan-geocoordinate', 'initial_zoom')" /> :message="$i18n.getHelperMessage('tainacan-geocoordinate', 'initial_zoom')" />
</label> </label>
<b-numberinput <b-numberinput
name="initialZoom" v-model="initialZoom"
v-model="initialZoom" name="initialZoom"
@input="emitValues()" :step="1"
:step="1" :max="19"
:max="19" :min="1"
:min="1" /> @update:model-value="emitValues()" />
</b-field> </b-field>
<b-field <b-field
:addons="false" > :addons="false">
<label class="label is-inline"> <label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-geocoordinate', 'maximum_zoom') }} {{ $i18n.getHelperTitle('tainacan-geocoordinate', 'maximum_zoom') }}
<span>&nbsp;*&nbsp;</span> <span>&nbsp;*&nbsp;</span>
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-geocoordinate', 'maximum_zoom')" :title="$i18n.getHelperTitle('tainacan-geocoordinate', 'maximum_zoom')"
:message="$i18n.getHelperMessage('tainacan-geocoordinate', 'maximum_zoom')" /> :message="$i18n.getHelperMessage('tainacan-geocoordinate', 'maximum_zoom')" />
</label> </label>
<b-numberinput <b-numberinput
name="maximumZoom" v-model="maximumZoom"
v-model="maximumZoom" name="maximumZoom"
@input="emitValues()" :step="1"
:step="1" :max="19"
:max="19" :min="1"
:min="1" /> @update:model-value="emitValues()" />
</b-field> </b-field>
</section> </section>
@ -76,6 +76,7 @@
props: { props: {
value: [ String, Object, Array ] value: [ String, Object, Array ]
}, },
emits: ['input'],
data() { data() {
return { return {
mapProvider: String, mapProvider: String,

67
src/views/admin/components/metadata-types/geocoordinate/GeoCoordinate.vue → src/views/admin/components/metadata-types/geocoordinate/TainacanGeoCoordinate.vue
View File

@ -10,12 +10,12 @@
:max-zoom="maxZoom" :max-zoom="maxZoom"
:center="[-14.4086569, -51.31668]" :center="[-14.4086569, -51.31668]"
:zoom-animation="true" :zoom-animation="true"
@click="onMapClick"
:options="{ :options="{
name: 'map--' + itemMetadatumIdentifier, name: 'map--' + itemMetadatumIdentifier,
trackResize: false, // We handle this manually in the component trackResize: false, // We handle this manually in the component
worldCopyJump: true worldCopyJump: true
}"> }"
@click="onMapClick">
<l-tile-layer <l-tile-layer
:url="mapProvider" :url="mapProvider"
:attribution="attribution" /> :attribution="attribution" />
@ -27,22 +27,22 @@
:placeholder="-14.408656999999" :placeholder="-14.408656999999"
type="text" type="text"
:step="0.000000000001" :step="0.000000000001"
@input.native="onUpdateFromLatitudeInput" :model-value="latitude"
:value="latitude" /> @update:model-value="onUpdateFromLatitudeInput" />
<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.native="onUpdateFromLongitudeInput" :model-value="longitude"
:value="longitude" /> @update:model-value="onUpdateFromLongitudeInput" />
<b-button <b-button
v-if="editingMarkerIndex >= 0" v-if="editingMarkerIndex >= 0"
outlined outlined
@click="onMarkerRemove(editingMarkerIndex)"> @click="onMarkerRemove(editingMarkerIndex)">
<span class="icon is-small"> <span class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-remove"/> <i class="tainacan-icon has-text-secondary tainacan-icon-remove" />
</span> </span>
&nbsp;{{ $i18n.get('remove_point') }} &nbsp;{{ $i18n.get('remove_point') }}
</b-button> </b-button>
@ -51,7 +51,7 @@
outlined outlined
@click="addLocation(latitude + ',' + longitude)"> @click="addLocation(latitude + ',' + longitude)">
<span class="icon is-small"> <span class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/> <i class="tainacan-icon has-text-secondary tainacan-icon-add" />
</span> </span>
&nbsp;{{ $i18n.get('add') }} &nbsp;{{ $i18n.get('add') }}
</b-button> </b-button>
@ -76,7 +76,7 @@
</l-tooltip> </l-tooltip>
<l-icon class-name="tainacan-location-marker-add"> <l-icon class-name="tainacan-location-marker-add">
<span class="icon"> <span class="icon">
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/> <i class="tainacan-icon has-text-secondary tainacan-icon-add" />
</span> </span>
</l-icon> </l-icon>
</l-marker> </l-marker>
@ -85,13 +85,14 @@
</template> </template>
<script> <script>
import { LMap, LIcon, LTooltip, LTileLayer, LMarker, LControl } from 'vue2-leaflet'; import { nextTick } from 'vue';
import { LMap, LIcon, LTooltip, LTileLayer, LMarker, LControl } from '@vue-leaflet/vue-leaflet';
import 'leaflet/dist/leaflet.css'; import 'leaflet/dist/leaflet.css';
import { Icon, latLng } from 'leaflet'; import { Icon, latLng } from 'leaflet';
import iconUrl from 'leaflet/dist/images/marker-icon.png'; import iconUrl from 'leaflet/dist/images/marker-icon.png';
import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png'; import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
import shadowUrl from 'leaflet/dist/images/marker-shadow.png'; import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
import { eventBusItemMetadata } from '../../../js/event-bus-item-metadata';
delete Icon.Default.prototype._getIconUrl; delete Icon.Default.prototype._getIconUrl;
Icon.Default.mergeOptions({ Icon.Default.mergeOptions({
@ -116,6 +117,7 @@
maxtags: '', maxtags: '',
isLastMetadatum: false isLastMetadatum: false
}, },
emits: ['update:value'],
data() { data() {
return { return {
editingMarkerIndex: -1, editingMarkerIndex: -1,
@ -129,7 +131,7 @@
return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.map_provider ? this.itemMetadatum.metadatum.metadata_type_options.map_provider : 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'; return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.map_provider ? this.itemMetadatum.metadatum.metadata_type_options.map_provider : 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
}, },
initialZoom() { initialZoom() {
return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.initial_zoom ? this.itemMetadatum.metadatum.metadata_type_options.initial_zoom : 5; return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.initial_zoom ? Number(this.itemMetadatum.metadatum.metadata_type_options.initial_zoom) : 5;
}, },
maxZoom() { maxZoom() {
return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.maximum_zoom ? this.itemMetadatum.metadatum.metadata_type_options.maximum_zoom : 12; return this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.maximum_zoom ? this.itemMetadatum.metadatum.metadata_type_options.maximum_zoom : 12;
@ -169,22 +171,25 @@
}, },
shouldAddMore() { shouldAddMore() {
// MaxTags value may come from a preset prop (bulk adition, for example) or from the actual maxMultipleValues setting. // MaxTags value may come from a preset prop (bulk adition, for example) or from the actual maxMultipleValues setting.
const hasMaxTagsValue = ( this.maxtags != undefined ? this.maxtags : (this.itemMetadatum.metadatum.multiple == 'yes' || this.allowNew === true ? (this.maxMultipleValues !== undefined ? this.maxMultipleValues : null) : '1') ); const hasMaxTagsValue = ( this.maxtags != undefined ? this.maxtags : (this.itemMetadatum.metadatum.multiple == 'yes' ? (this.maxMultipleValues !== undefined ? this.maxMultipleValues : null) : '1') );
// For multivalued metadata without maxMultipleValues, the limit is infinet, so we should let add anyway. // For multivalued metadata without maxMultipleValues, the limit is infinet, so we should let add anyway.
return (hasMaxTagsValue !== null ? (this.selected.length < hasMaxTagsValue) : true); return (hasMaxTagsValue !== null ? (this.selected.length < hasMaxTagsValue) : true);
} }
}, },
watch: { watch: {
selectedLatLng() { selectedLatLng: {
const mapComponentRef = 'map--' + this.itemMetadatumIdentifier; handler() {
this.$nextTick(() => { const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
if ( this.$refs[mapComponentRef] && this.$refs[mapComponentRef].mapObject && this.selectedLatLng.length != undefined) { nextTick(() => {
if (this.selectedLatLng.length == 1) if ( this.$refs[mapComponentRef] && this.$refs[mapComponentRef].mapObject && this.selectedLatLng.length != undefined) {
this.$refs[mapComponentRef].mapObject.panInsideBounds(this.selectedLatLng, { animate: true, maxZoom: this.maxZoom }); if (this.selectedLatLng.length == 1)
else this.$refs[mapComponentRef].mapObject.panInsideBounds(this.selectedLatLng, { animate: true, maxZoom: this.maxZoom });
this.$refs[mapComponentRef].mapObject.flyToBounds(this.selectedLatLng, { animate: true, maxZoom: this.maxZoom }); else
} this.$refs[mapComponentRef].mapObject.flyToBounds(this.selectedLatLng, { animate: true, maxZoom: this.maxZoom });
}); }
});
},
deep: true
} }
}, },
created() { created() {
@ -195,17 +200,17 @@
// We need to pass mapComponentRef here instead of creating it inside the function // We need to pass mapComponentRef here instead of creating it inside the function
// otherwise the listener would conflict when multiple geo metadata are inserted. // otherwise the listener would conflict when multiple geo metadata are inserted.
const mapComponentRef = 'map--' + this.itemMetadatumIdentifier; const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
eventBusItemMetadata.$on('itemEditionFormResize', () => this.handleWindowResize(mapComponentRef)); this.$emitter.on('itemEditionFormResize', () => this.handleWindowResize(mapComponentRef));
}, },
mounted() { mounted() {
this.$nextTick(() => { nextTick(() => {
const mapComponentRef = 'map--' + this.itemMetadatumIdentifier; const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
this.handleWindowResize(mapComponentRef); this.handleWindowResize(mapComponentRef);
}); });
}, },
beforeDestroy() { beforeUnmount() {
const mapComponentRef = 'map--' + this.itemMetadatumIdentifier; const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
eventBusItemMetadata.$off('itemEditionFormResize', () => this.handleWindowResize(mapComponentRef)); this.$emitter.off('itemEditionFormResize', () => this.handleWindowResize(mapComponentRef));
}, },
methods: { methods: {
onUpdateFromLatitudeInput: _.debounce( function($event) { onUpdateFromLatitudeInput: _.debounce( function($event) {
@ -250,7 +255,7 @@
onUpdateFromLatitudeAndLongitude() { onUpdateFromLatitudeAndLongitude() {
if (this.editingMarkerIndex >= 0) { if (this.editingMarkerIndex >= 0) {
this.selected.splice(this.editingMarkerIndex, 1, this.latitude + ',' + this.longitude); this.selected.splice(this.editingMarkerIndex, 1, this.latitude + ',' + this.longitude);
this.$emit('input', this.selected); this.$emit('update:value', this.selected);
} }
}, },
onDragMarker($event, index) { onDragMarker($event, index) {
@ -260,7 +265,7 @@
this.longitude = $event.target['_latlng']['lng']; this.longitude = $event.target['_latlng']['lng'];
} }
this.selected.splice(index, 1, $event.target['_latlng']['lat'] + ',' + $event.target['_latlng']['lng']); this.selected.splice(index, 1, $event.target['_latlng']['lat'] + ',' + $event.target['_latlng']['lng']);
this.$emit('input', this.selected); this.$emit('update:value', this.selected);
} }
}, },
onDragEditingMarker($event) { onDragEditingMarker($event) {
@ -287,7 +292,7 @@
const existintSelectedValue = this.selected.indexOf(newLocationValue); const existintSelectedValue = this.selected.indexOf(newLocationValue);
if (existintSelectedValue < 0) { if (existintSelectedValue < 0) {
this.selected.push(newLocationValue); this.selected.push(newLocationValue);
this.$emit('input', this.selected); this.$emit('update:value', this.selected);
this.editingMarkerIndex = this.selected.length - 1; this.editingMarkerIndex = this.selected.length - 1;
} }
}, },
@ -310,7 +315,7 @@
this.longitude = this.selectedLatLng[index].lng; this.longitude = this.selectedLatLng[index].lng;
this.selected.splice(index, 1); this.selected.splice(index, 1);
this.$emit('input', this.selected); this.$emit('update:value', this.selected);
}, },
handleWindowResize(mapComponentRef) { handleWindowResize(mapComponentRef) {
setTimeout(() => { setTimeout(() => {

1
src/views/admin/components/metadata-types/metadata-type-helper/class-tainacan-metadata-type-helper.php
View File

@ -43,6 +43,7 @@ class Metadata_Type_Helper {
$this->Tainacan_Metadata->register_metadata_type('Tainacan\Metadata_Types\User'); $this->Tainacan_Metadata->register_metadata_type('Tainacan\Metadata_Types\User');
$this->Tainacan_Metadata->register_metadata_type('Tainacan\Metadata_Types\Control'); $this->Tainacan_Metadata->register_metadata_type('Tainacan\Metadata_Types\Control');
$this->Tainacan_Metadata->register_metadata_type('Tainacan\Metadata_Types\GeoCoordinate'); $this->Tainacan_Metadata->register_metadata_type('Tainacan\Metadata_Types\GeoCoordinate');
$this->Tainacan_Metadata->register_metadata_type('Tainacan\Metadata_Types\URL');
// the priority should see less than on function // the priority should see less than on function
// `load_admin_page()` of class `Admin` in file /src/views/class-tainacan-admin.php // `load_admin_page()` of class `Admin` in file /src/views/class-tainacan-admin.php

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

@ -5,24 +5,42 @@
{{ $i18n.getHelperTitle('tainacan-numeric', 'step') }}<span>&nbsp;*&nbsp;</span> {{ $i18n.getHelperTitle('tainacan-numeric', 'step') }}<span>&nbsp;*&nbsp;</span>
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-numeric', 'step')" :title="$i18n.getHelperTitle('tainacan-numeric', 'step')"
:message="$i18n.getHelperMessage('tainacan-numeric', 'step')"/> :message="$i18n.getHelperMessage('tainacan-numeric', 'step')" />
</label> </label>
<div <div
v-if="!showEditStepOptions" v-if="!showEditStepOptions"
class="is-flex"> class="is-flex">
<b-select <b-select
name="step_options"
v-model="step" v-model="step"
@input="onUpdateStep"> name="step_options"
<option value="0.001">0.001</option> @update:model-value="onUpdateStep">
<option value="0.01">0.01</option> <option value="0.001">
<option value="0.1">0.1</option> 0.001
<option value="1">1</option> </option>
<option value="2">2</option> <option value="0.01">
<option value="5">5</option> 0.01
<option value="10">10</option> </option>
<option value="100">100</option> <option value="0.1">
<option value="1000">1000</option> 0.1
</option>
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="5">
5
</option>
<option value="10">
10
</option>
<option value="100">
100
</option>
<option value="1000">
1000
</option>
<option <option
v-if="step && ![0.001,0.01,0.1,1,2,5,10,100,1000].find( (element) => element == step )" v-if="step && ![0.001,0.01,0.1,1,2,5,10,100,1000].find( (element) => element == step )"
:value="step"> :value="step">
@ -40,7 +58,7 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-edit has-text-secondary"/> <i class="tainacan-icon tainacan-icon-18px tainacan-icon-edit has-text-secondary" />
</span> </span>
</button> </button>
</div> </div>
@ -48,14 +66,14 @@
v-if="showEditStepOptions" v-if="showEditStepOptions"
class="is-flex"> class="is-flex">
<b-input <b-input
name="max_options"
v-model="step" v-model="step"
@input="onUpdateStep" name="max_options"
type="number" type="number"
step="1" /> step="1"
@update:model-value="onUpdateStep" />
<button <button
@click.prevent="showEditStepOptions = false" class="button is-white is-pulled-right"
class="button is-white is-pulled-right"> @click.prevent="showEditStepOptions = false">
<span <span
v-tooltip="{ v-tooltip="{
content: $i18n.get('close'), content: $i18n.get('close'),
@ -64,7 +82,7 @@
popperClass: ['tainacan-tooltip', 'tooltip'] popperClass: ['tainacan-tooltip', 'tooltip']
}" }"
class="icon"> class="icon">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-close has-text-secondary"/> <i class="tainacan-icon tainacan-icon-18px tainacan-icon-close has-text-secondary" />
</span> </span>
</button> </button>
</div> </div>
@ -80,7 +98,7 @@
v-model="min" v-model="min"
name="min" name="min"
step="1" step="1"
@input="onUpdateMin"/> @update:model-value="onUpdateMin" />
</b-field> </b-field>
<b-field :addons="false"> <b-field :addons="false">
<label class="label is-inline"> <label class="label is-inline">
@ -93,7 +111,7 @@
v-model="max" v-model="max"
name="max" name="max"
step="1" step="1"
@input="onUpdateMax"/> @update:model-value="onUpdateMax" />
</b-field> </b-field>
</section> </section>
</template> </template>
@ -103,6 +121,7 @@
props: { props: {
value: [ String, Object, Array ] value: [ String, Object, Array ]
}, },
emits: ['update:value'],
data() { data() {
return { return {
step: [Number, String], step: [Number, String],
@ -118,13 +137,13 @@
}, },
methods: { methods: {
onUpdateStep(value) { onUpdateStep(value) {
this.$emit('input', { step: value, min: this.min, max: this.max }); this.$emit('update:value', { step: value, min: this.min, max: this.max });
}, },
onUpdateMin(value) { onUpdateMin(value) {
this.$emit('input', { step: this.step, min: value, max: this.max }); this.$emit('update:value', { step: this.step, min: value, max: this.max });
}, },
onUpdateMax(value) { onUpdateMax(value) {
this.$emit('input', { step: this.step, min: this.min, max: value }); this.$emit('update:value', { step: this.step, min: this.min, max: value });
} }
} }
} }

23
src/views/admin/components/metadata-types/numeric/Numeric.vue → src/views/admin/components/metadata-types/numeric/TainacanNumeric.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<b-numberinput <b-numberinput
:disabled="disabled"
:ref="'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) : '')" :id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:ref="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:disabled="disabled"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''" :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
:value="value" :model-value="Number(value)"
@input="onInput"
@blur="onBlur"
@focus="onMobileSpecialFocus"
lang="en" lang="en"
:min="getMin" :min="getMin"
:max="getMax" :max="getMax"
:step="getStep" /> :step="getStep"
@update:model-value="$event =>onInput($event)"
@blur="onBlur"
@focus="onMobileSpecialFocus" />
</template> </template>
<script> <script>
@ -21,6 +21,11 @@
value: [String, Number, Array], value: [String, Number, Array],
disabled: false, disabled: false,
}, },
emits: [
'update:value',
'blur',
'mobile-special-focus'
],
computed: { computed: {
getStep() { getStep() {
if (this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.step) if (this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.step)
@ -47,13 +52,13 @@
if ( inputRef && !inputRef.checkHtml5Validity()) if ( inputRef && !inputRef.checkHtml5Validity())
return; return;
this.$emit('input', value); this.$emit('update:value', value);
}, },
onBlur() { onBlur() {
this.$emit('blur'); this.$emit('blur');
}, },
onMobileSpecialFocus() { onMobileSpecialFocus() {
this.$emit('mobileSpecialFocus'); this.$emit('mobile-special-focus');
} }
} }
} }

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

@ -6,23 +6,23 @@
:type="collectionType" :type="collectionType"
:message="collectionMessage"> :message="collectionMessage">
<label class="label is-inline"> <label class="label is-inline">
{{ $i18n.get('label_collection_related') }}<span :class="collectionType" >&nbsp;*&nbsp;</span> {{ $i18n.get('label_collection_related') }}<span :class="collectionType">&nbsp;*&nbsp;</span>
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-relationship', 'collection_id')" :title="$i18n.getHelperTitle('tainacan-relationship', 'collection_id')"
:message="$i18n.getHelperMessage('tainacan-relationship', 'collection_id')"/> :message="$i18n.getHelperMessage('tainacan-relationship', 'collection_id')" />
</label> </label>
<b-select <b-select
v-model="collection"
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="collection"
@change.native="emitValues()"
@focus="clear()"
:loading="loading" :loading="loading"
expanded> expanded
@change="emitValues()"
@focus="clear()">
<option <option
v-for="option in collections" v-for="option in collections"
:value="option.id" :key="option.id"
:key="option.id"> :value="option.id">
{{ option.name }} {{ option.name }}
</option> </option>
</b-select> </b-select>
@ -30,8 +30,8 @@
<transition name="fade"> <transition name="fade">
<div <div
v-if="loadingMetadata" v-if="loadingMetadata"
class="loading-spinner"/> class="loading-spinner" />
</transition> </transition>
<transition name="filter-item"> <transition name="filter-item">
<b-field <b-field
@ -41,11 +41,11 @@
{{ $i18n.get('label_metadata_for_search') }} {{ $i18n.get('label_metadata_for_search') }}
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-relationship', 'search')" :title="$i18n.getHelperTitle('tainacan-relationship', 'search')"
:message="$i18n.getHelperMessage('tainacan-relationship', 'search')"/> :message="$i18n.getHelperMessage('tainacan-relationship', 'search')" />
</label> </label>
<b-select <b-select
name="metadata_type_relationship[search]"
v-model="modelSearch" v-model="modelSearch"
name="metadata_type_relationship[search]"
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')"
@ -65,24 +65,24 @@
{{ $i18n.getHelperTitle('tainacan-relationship', 'display_related_item_metadata') }} {{ $i18n.getHelperTitle('tainacan-relationship', 'display_related_item_metadata') }}
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-relationship', 'display_related_item_metadata')" :title="$i18n.getHelperTitle('tainacan-relationship', 'display_related_item_metadata')"
:message="$i18n.getHelperMessage('tainacan-relationship', 'display_related_item_metadata')"/> :message="$i18n.getHelperMessage('tainacan-relationship', 'display_related_item_metadata')" />
</label> </label>
<div :class="'displayed-metadata-options' + (metadata.length > 5 ? ' has-more-than-5-metadata' : '')"> <div :class="'displayed-metadata-options' + (metadata.length > 5 ? ' has-more-than-5-metadata' : '')">
<b-checkbox <b-checkbox
v-model="displayRelatedItemMetadata"
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="displayRelatedItemMetadata">
{{ $i18n.get('label_thumbnail') }} {{ $i18n.get('label_thumbnail') }}
</b-checkbox> </b-checkbox>
<b-checkbox <b-checkbox
v-for="(metadatumOption, index) in metadata" v-for="(metadatumOption, index) in metadata"
:key="index" :key="index"
v-model="displayRelatedItemMetadata"
: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()" :disabled="metadatumOption.id == modelSearch"
v-model="displayRelatedItemMetadata" @update:model-value="emitValues()">
:disabled="metadatumOption.id == modelSearch">
{{ metadatumOption.name }} {{ metadatumOption.name }}
</b-checkbox> </b-checkbox>
</div> </div>
@ -94,14 +94,14 @@
:label="$i18n.getHelperTitle('tainacan-relationship', 'display_in_related_items')"> :label="$i18n.getHelperTitle('tainacan-relationship', 'display_in_related_items')">
&nbsp; &nbsp;
<b-switch <b-switch
size="is-small" v-model="modelDisplayInRelatedItems"
v-model="modelDisplayInRelatedItems" size="is-small"
@input="emitValues()"
true-value="yes" true-value="yes"
false-value="no" /> false-value="no"
@update:model-value="emitValues()" />
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-relationship', 'display_in_related_items')" :title="$i18n.getHelperTitle('tainacan-relationship', 'display_in_related_items')"
:message="$i18n.getHelperMessage('tainacan-relationship', 'display_in_related_items')"/> :message="$i18n.getHelperMessage('tainacan-relationship', 'display_in_related_items')" />
</b-field> </b-field>
<b-field <b-field
@ -109,14 +109,14 @@
:label="$i18n.getHelperTitle('tainacan-relationship', 'accept_draft_items')"> :label="$i18n.getHelperTitle('tainacan-relationship', 'accept_draft_items')">
&nbsp; &nbsp;
<b-switch <b-switch
size="is-small" v-model="modelAcceptDraftItems"
v-model="modelAcceptDraftItems" size="is-small"
@input="emitValues()"
true-value="yes" true-value="yes"
false-value="no" /> false-value="no"
@update:model-value="emitValues()" />
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-relationship', 'accept_draft_items')" :title="$i18n.getHelperTitle('tainacan-relationship', 'accept_draft_items')"
:message="$i18n.getHelperMessage('tainacan-relationship', 'accept_draft_items')"/> :message="$i18n.getHelperMessage('tainacan-relationship', 'accept_draft_items')" />
</b-field> </b-field>
<b-field <b-field
@ -124,30 +124,31 @@
:label="$i18n.getHelperTitle('tainacan-relationship', 'accept_only_items_authored_by_current_user')"> :label="$i18n.getHelperTitle('tainacan-relationship', 'accept_only_items_authored_by_current_user')">
&nbsp; &nbsp;
<b-switch <b-switch
size="is-small" v-model="modelAcceptOnlyItemsAuthoredByCurrentUser"
v-model="modelAcceptOnlyItemsAuthoredByCurrentUser" size="is-small"
@input="emitValues()"
true-value="yes" true-value="yes"
false-value="no" /> false-value="no"
@update:model-value="emitValues()" />
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-relationship', 'accept_only_items_authored_by_current_user')" :title="$i18n.getHelperTitle('tainacan-relationship', 'accept_only_items_authored_by_current_user')"
:message="$i18n.getHelperMessage('tainacan-relationship', 'accept_only_items_authored_by_current_user')"/> :message="$i18n.getHelperMessage('tainacan-relationship', 'accept_only_items_authored_by_current_user')" />
</b-field> </b-field>
</section> </section>
</template> </template>
<script> <script>
import { tainacan as axios } from '../../../js/axios'; import { tainacanApi } from '../../../js/axios';
export default { export default {
props: { props: {
search: [ String ], search: [ String ],
collection_id: [ Number ], collectionId: [ Number ],
value: [ String, Object, Array ], value: [ String, Object, Array ],
metadatum: [ String, Object ], metadatum: [ String, Object ],
errors: [ String, Object, Array ] errors: [ String, Object, Array ]
}, },
emits: ['input'],
data(){ data(){
return { return {
icon: '', icon: '',
@ -169,18 +170,17 @@
}, },
computed: { computed: {
setError(){ setError(){
if( this.errors && this.errors.collection_id !== '' ){ if ( this.errors && this.errors.collection_id !== '' )
this.setErrorsAttributes( 'is-danger', this.errors.collection_id ); this.setErrorsAttributes( 'is-danger', this.errors.collection_id );
} else { else
this.setErrorsAttributes( '', '' ); this.setErrorsAttributes( '', '' );
}
return true; return true;
} }
}, },
watch:{ watch:{
collection( value ){ collection( value ) {
this.collection = value; this.collection = value;
if( value && value !== '' ) { if ( value && value !== '' ) {
this.fetchMetadataFromCollection(value); this.fetchMetadataFromCollection(value);
} else { } else {
this.metadata = []; this.metadata = [];
@ -199,13 +199,13 @@
} }
}, },
created(){ created(){
this.fetchCollections().then(() => { this.fetchCollections()
if( this.collection_id && this.collection_id !== '' ){ .then(() => {
this.collection = this.collection_id; if ( this.collectionId && this.collectionId !== '' )
} else if ( this.value ) { this.collection = this.collectionId;
this.collection = this.value.collection_id; else if ( this.value )
} this.collection = this.value.collection_id;
}); });
this.displayRelatedItemMetadata = this.value && this.value.display_related_item_metadata && Array.isArray(this.value.display_related_item_metadata) ? this.value.display_related_item_metadata : []; this.displayRelatedItemMetadata = this.value && this.value.display_related_item_metadata && Array.isArray(this.value.display_related_item_metadata) ? this.value.display_related_item_metadata : [];
this.modelDisplayInRelatedItems = this.value && this.value.display_in_related_items ? this.value.display_in_related_items : 'no'; this.modelDisplayInRelatedItems = this.value && this.value.display_in_related_items ? this.value.display_in_related_items : 'no';
@ -218,7 +218,7 @@
this.collectionType = message; this.collectionType = message;
}, },
async fetchCollections(){ async fetchCollections(){
return await axios.get('/collections?nopaging=1') return await tainacanApi.get('/collections?nopaging=1')
.then(res => { .then(res => {
const collections = res.data; const collections = res.data;
@ -233,7 +233,7 @@
this.loadingMetadata = true; this.loadingMetadata = true;
this.hasMetadata = false; this.hasMetadata = false;
axios.get('/collection/' + value + '/metadata/?nopaging=1') tainacanApi.get('/collection/' + value + '/metadata/?nopaging=1')
.then((res) => { .then((res) => {
this.loadingMetadata = false; this.loadingMetadata = false;
let metadata = res.data; let metadata = res.data;

73
src/views/admin/components/metadata-types/relationship/Relationship.vue → src/views/admin/components/metadata-types/relationship/TainacanRelationship.vue
View File

@ -1,21 +1,17 @@
<template> <template>
<div :class="{ 'is-flex is-flex-wrap-wrap': itemMetadatum.metadatum.multiple != 'yes' || maxtags != undefined }"> <div :class="{ 'is-flex is-flex-wrap-wrap': itemMetadatum.metadatum.multiple != 'yes' || maxtags != undefined }">
<b-tabs <b-tabs
v-model="activeTab"
size="is-small" size="is-small"
animated animated>
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
:id="relationshipInputId"
expanded expanded
:disabled="disabled" :disabled="disabled"
:id="relationshipInputId"
size="is-small" size="is-small"
icon="magnify" icon="magnify"
:value="selected" :model-value="selected"
@input="onInput"
@blur="onBlur"
@add="onAdd"
@remove="onRemove"
: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')"
autocomplete autocomplete
@ -27,12 +23,14 @@
:aria-close-label="$i18n.get('remove_value')" :aria-close-label="$i18n.get('remove_value')"
:class="{ 'has-selected': selected != undefined && selected != [] }" :class="{ 'has-selected': selected != undefined && selected != [] }"
field="label" field="label"
@typing="search"
check-infinite-scroll check-infinite-scroll
@infinite-scroll="searchMore"
:has-counter="false" :has-counter="false"
@update:model-value="onInput"
@blur="onBlur"
@typing="search"
@infinite-scroll="searchMore"
@focus="onMobileSpecialFocus"> @focus="onMobileSpecialFocus">
<template slot-scope="props"> <template #default="props">
<div <div
v-if="!isDisplayingRelatedItemMetadata" v-if="!isDisplayingRelatedItemMetadata"
class="media"> class="media">
@ -55,12 +53,12 @@
</template> </template>
<template <template
v-if="!isLoading" v-if="!isLoading"
slot="empty"> #empty>
{{ isAcceptingOnlyItemsAuthoredByCurrentUser ? $i18n.get('info_no_item_authored_by_you_found') : $i18n.get('info_no_item_found') }} {{ isAcceptingOnlyItemsAuthoredByCurrentUser ? $i18n.get('info_no_item_authored_by_you_found') : $i18n.get('info_no_item_found') }}
</template> </template>
<template <template
v-if="currentUserCanEditItems && (!$adminOptions.itemEditionMode || $adminOptions.allowItemEditionModalInsideModal)" v-if="currentUserCanEditItems && (!$adminOptions.itemEditionMode || $adminOptions.allowItemEditionModalInsideModal)"
slot="footer"> #footer>
<a @click="editItemModalOpen = true"> <a @click="editItemModalOpen = true">
{{ $i18n.get('label_create_new_item') + ' "' + searchQuery + '"' }} {{ $i18n.get('label_create_new_item') + ' "' + searchQuery + '"' }}
</a> </a>
@ -82,15 +80,15 @@
<div v-html="itemValue.valuesAsHtml" /> <div v-html="itemValue.valuesAsHtml" />
<a <a
v-if="currentUserCanEditItems && (!$adminOptions.itemEditionMode || $adminOptions.allowItemEditionModalInsideModal)" v-if="currentUserCanEditItems && (!$adminOptions.itemEditionMode || $adminOptions.allowItemEditionModalInsideModal)"
@click="editSelected(itemValue.value)" class="relationship-value-button--edit"
class="relationship-value-button--edit"> @click="editSelected(itemValue.value)">
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-edit" /> <i class="tainacan-icon tainacan-icon-edit" />
</span> </span>
</a> </a>
<a <a
@click="removeFromSelected(itemValue.value)" class="relationship-value-button--remove"
class="relationship-value-button--remove"> @click="removeFromSelected(itemValue.value)">
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-close" /> <i class="tainacan-icon tainacan-icon-close" />
</span> </span>
@ -116,18 +114,18 @@
itemMetadatum.item.id"> itemMetadatum.item.id">
<a <a
v-if="(maxMultipleValues === undefined || maxMultipleValues > selected.length) && v-if="(maxMultipleValues === undefined || maxMultipleValues > selected.length) &&
(itemMetadatum.metadatum.multiple === 'yes' || !selected.length )" (itemMetadatum.metadatum.multiple === 'yes' || !selected.length )"
:disabled="$adminOptions.itemEditionMode && !$adminOptions.allowItemEditionModalInsideModal" :disabled="$adminOptions.itemEditionMode && !$adminOptions.allowItemEditionModalInsideModal"
@click="editItemModalOpen = !editItemModalOpen" class="add-link"
class="add-link"> @click="editItemModalOpen = !editItemModalOpen">
<span class="icon is-small"> <span class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/> <i class="tainacan-icon has-text-secondary tainacan-icon-add" />
</span> </span>
&nbsp;{{ $i18n.get('label_create_new_item') }} &nbsp;{{ $i18n.get('label_create_new_item') }}
</a> </a>
<b-modal <b-modal
v-model="editItemModalOpen"
:width="1200" :width="1200"
:active.sync="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
@ -141,7 +139,7 @@
</template> </template>
<script> <script>
import { tainacan as axios } from '../../../js/axios'; import { tainacanApi } from '../../../js/axios';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import qs from 'qs'; import qs from 'qs';
@ -154,6 +152,11 @@
isLastMetadatum: false, isLastMetadatum: false,
isMobileScreen: false isMobileScreen: false
}, },
emits: [
'update:value',
'blur',
'mobile-special-focus'
],
data() { data() {
return { return {
selected:[], selected:[],
@ -240,7 +243,7 @@
if ( this.isAcceptingDraftItems ) if ( this.isAcceptingDraftItems )
query['status'] = ['publish','private','draft']; query['status'] = ['publish','private','draft'];
axios.get('/collection/' + this.collectionId + '/items?' + qs.stringify(query) ) tainacanApi.get('/collection/' + this.collectionId + '/items?' + qs.stringify(query) )
.then( res => { .then( res => {
if (res.data.items) { if (res.data.items) {
for (let item of res.data.items) { for (let item of res.data.items) {
@ -262,7 +265,7 @@
if (this.collection && this.collection.id == this.collectionId) if (this.collection && this.collection.id == this.collectionId)
this.currentUserCanEditItems = this.collection.current_user_can_edit_items; this.currentUserCanEditItems = this.collection.current_user_can_edit_items;
else { else {
axios.get('/collections/' + this.collectionId + '?fetch_only=name,url,allow_comments&context=edit') tainacanApi.get('/collections/' + this.collectionId + '?fetch_only=name,url,allow_comments&context=edit')
.then(res => this.currentUserCanEditItems = res.data.current_user_can_edit_items ) .then(res => this.currentUserCanEditItems = res.data.current_user_can_edit_items )
.catch(() => this.currentUserCanEditItems = false ); .catch(() => this.currentUserCanEditItems = false );
} }
@ -276,7 +279,7 @@
this.search(''); this.search('');
this.selected = newSelected; this.selected = newSelected;
this.$emit('input', newSelected.map((item) => item.value)); this.$emit('update:value', newSelected.map((item) => item.value));
}, },
onBlur() { onBlur() {
this.$emit('blur'); this.$emit('blur');
@ -308,7 +311,7 @@
if (this.searchQuery !== '') { if (this.searchQuery !== '') {
this.isLoading = true; this.isLoading = true;
axios.get('/collection/' + this.collectionId + '/items?' + this.getQueryString(this.searchQuery)) tainacanApi.get('/collection/' + this.collectionId + '/items?' + this.getQueryString(this.searchQuery))
.then( res => { .then( res => {
if (res.data.items) { if (res.data.items) {
@ -505,7 +508,7 @@
} }
}, },
onMobileSpecialFocus() { onMobileSpecialFocus() {
this.$emit('mobileSpecialFocus'); this.$emit('mobile-special-focus');
} }
} }
} }
@ -522,17 +525,17 @@
margin-bottom: 0; margin-bottom: 0;
width: 100%; width: 100%;
} }
/deep/ .b-tabs .tab-content { :deep(.b-tabs) .tab-content {
padding: 0.5em 0px !important; padding: 0.5em 0px !important;
} }
/deep/ .tabs { :deep(.tabs) {
margin-bottom: 0 !important; margin-bottom: 0 !important;
ul { ul {
padding: 0; padding: 0;
} }
} }
/deep/ .tainacan-relationship-results-container { :deep(.tainacan-relationship-results-container) {
border: 1px solid var(--tainacan-gray1); border: 1px solid var(--tainacan-gray1);
background-color: var(--tainacan-white); background-color: var(--tainacan-white);
margin-top: calc(-1 * (0.5em + 1px)); margin-top: calc(-1 * (0.5em + 1px));
@ -570,7 +573,7 @@
} }
} }
} }
/deep/ .tainacan-relationship-group { :deep(.tainacan-relationship-group) {
width: 100%; width: 100%;
.tainacan-relationship-metadatum { .tainacan-relationship-metadatum {
.label { .label {
@ -602,8 +605,8 @@
top: 0px; top: 0px;
} }
} }
/deep/ .relationship-value-button--edit, :deep(.relationship-value-button--edit),
/deep/ .relationship-value-button--remove { :deep(.relationship-value-button--remove) {
right: 4px; right: 4px;
background-color: var(--tainacan-white); background-color: var(--tainacan-white);
border-radius: 100%; border-radius: 100%;
@ -613,7 +616,7 @@
background-color: var(--tainacan-gray0); background-color: var(--tainacan-gray0);
} }
} }
/deep/ .relationship-value-button--edit { :deep(.relationship-value-button--edit) {
right: 34px; right: 34px;
} }
</style> </style>

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

@ -16,16 +16,14 @@
:type="optionType" :type="optionType"
:message="optionMessage"> :message="optionMessage">
<label class="label is-inline"> <label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-selectbox', 'options') }}<span :class="optionType" >&nbsp;*&nbsp;</span> {{ $i18n.getHelperTitle('tainacan-selectbox', 'options') }}<span :class="optionType">&nbsp;*&nbsp;</span>
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-selectbox', 'options')" :title="$i18n.getHelperTitle('tainacan-selectbox', 'options')"
:message="$i18n.getHelperMessage('tainacan-selectbox', 'options')"/> :message="$i18n.getHelperMessage('tainacan-selectbox', 'options')" />
</label> </label>
<b-taginput <b-taginput
v-model="options" v-model="options"
@input="emitValues()"
@focus="clear()"
attached attached
:confirm-keys="optionsSeparator" :confirm-keys="optionsSeparator"
:on-paste-separators="optionsSeparator" :on-paste-separators="optionsSeparator"
@ -33,17 +31,19 @@
:aria-close-label="$i18n.get('remove_value')" :aria-close-label="$i18n.get('remove_value')"
class="tainacan-selectbox-metadata-type--taginput" class="tainacan-selectbox-metadata-type--taginput"
:class="{'has-selected': options != undefined && options != []}" :class="{'has-selected': options != undefined && options != []}"
:placeholder="$i18n.get('new') + ', ...'" /> :placeholder="$i18n.get('new') + ', ...'"
@update:model-value="emitValues()"
@focus="clear()" />
<div class="separator-options"> <div class="separator-options">
<label class="label is-inline">{{ $i18n.getHelperTitle('tainacan-selectbox', 'options_separator') }}</label> <label class="label is-inline">{{ $i18n.getHelperTitle('tainacan-selectbox', 'options_separator') }}</label>
<b-checkbox <b-checkbox
v-for="separator of ['Enter', 'Tab', ',', ';', '|']" v-for="separator of ['Enter', 'Tab', ',', ';', '|']"
:key="separator" :key="separator"
name="metadata_type_selectbox[options_separator]"
@input="emitValues()"
v-model="optionsSeparator" v-model="optionsSeparator"
name="metadata_type_selectbox[options_separator]"
:native-value="separator" :native-value="separator"
:disabled="separator == 'Enter'"> :disabled="separator == 'Enter'"
@update:model-value="emitValues()">
<kbd>{{ separator }}</kbd> <kbd>{{ separator }}</kbd>
</b-checkbox> </b-checkbox>
</div> </div>
@ -58,6 +58,7 @@
metadatum: [ String, Object ], metadatum: [ String, Object ],
errors: [ String, Object, Array ] errors: [ String, Object, Array ]
}, },
emits: ['update:value'],
data() { data() {
return { return {
optionType: '', optionType: '',
@ -88,7 +89,7 @@
this.optionMessage = ''; this.optionMessage = '';
}, },
emitValues() { emitValues() {
this.$emit('input', { this.$emit('update:value', {
options: ( this.options.length > 0 ) ? this.options.join('\n') : '', options: ( this.options.length > 0 ) ? this.options.join('\n') : '',
options_separator: JSON.stringify(this.optionsSeparator) options_separator: JSON.stringify(this.optionsSeparator)
}) })
@ -129,14 +130,14 @@
width: 100%; width: 100%;
} }
} }
.tainacan-selectbox-metadata-type--taginput /deep/ { .tainacan-selectbox-metadata-type--taginput {
.tag, :deep(.tag),
.tags { :deep(.tags) {
white-space: normal !important; white-space: normal !important;
min-height: calc(2em - 1px) !important; min-height: calc(2em - 1px) !important;
height: auto !important; height: auto !important;
} }
.tag.is-delete { :deep(.tag.is-delete) {
min-width: calc(2em - 1px) !important; min-width: calc(2em - 1px) !important;
} }
} }

18
src/views/admin/components/metadata-types/selectbox/Selectbox.vue → src/views/admin/components/metadata-types/selectbox/TainacanSelectbox.vue
View File

@ -7,13 +7,15 @@
autocomplete="on" autocomplete="on"
@focus="onMobileSpecialFocus"> @focus="onMobileSpecialFocus">
<b-select <b-select
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
expanded expanded
:disabled="disabled" :disabled="disabled"
: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"
:key="index" :key="index"
@ -32,6 +34,10 @@
value: [String, Number, Array], value: [String, Number, Array],
disabled: false, disabled: false,
}, },
emits: [
'update:value',
'mobile-special-focus'
],
computed: { computed: {
getOptions() { getOptions() {
if (this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.options ) { if (this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.options ) {
@ -43,11 +49,11 @@
}, },
methods: { methods: {
onSelected(value) { onSelected(value) {
this.$emit('input', value); this.$emit('update:value', value);
}, },
onMobileSpecialFocus($event) { onMobileSpecialFocus($event) {
$event.target.blur(); $event.target.blur();
this.$emit('mobileSpecialFocus'); this.$emit('mobile-special-focus');
} }
} }
} }

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

@ -1,23 +1,23 @@
<template> <template>
<b-field <b-field
:ref="isHighlightedMetadatum ? 'highlighted-metadatum': 'null'"
:class="metadatumFormClasses" :class="metadatumFormClasses"
:ref="isHighlightedMetadatum ? 'hightlighted-metadatum': 'null'"
:addons="false" :addons="false"
:message="errorMessage" :message="errorMessage"
:type="errorMessage ? 'is-danger' : ''"> :type="errorMessage ? 'is-danger' : ''">
<span <span
class="collapse-handle" class="collapse-handle"
@click="(!hideCollapses && !isMetadataNavigation) ? $emit('changeCollapse', errorMessage ? true : !isCollapsed ) : ''"> @click="(!hideCollapses && !isMetadataNavigation) ? $emit('change-collapse', errorMessage ? true : !isCollapsed ) : ''">
<span <span
v-if="!hideCollapses" v-if="!hideCollapses"
class="icon" class="icon"
@click="(!hideCollapses && isMetadataNavigation) ? $emit('changeCollapse', errorMessage ? true : !isCollapsed ) : ''"> @click="(!hideCollapses && isMetadataNavigation) ? $emit('change-collapse', errorMessage ? true : !isCollapsed ) : ''">
<i <i
:class="{ :class="{
'tainacan-icon-arrowdown' : isCollapsed || errorMessage, 'tainacan-icon-arrowdown' : isCollapsed || errorMessage,
'tainacan-icon-arrowright' : !(isCollapsed || errorMessage) 'tainacan-icon-arrowright' : !(isCollapsed || errorMessage)
}" }"
class="has-text-secondary tainacan-icon tainacan-icon-1-25em"/> class="has-text-secondary tainacan-icon tainacan-icon-1-25em" />
</span> </span>
<label class="label"> <label class="label">
<span <span
@ -53,59 +53,63 @@
v-show="hideCollapses || isCollapsed || !!errorMessage" v-show="hideCollapses || isCollapsed || !!errorMessage"
v-if="isTextInputComponent"> v-if="isTextInputComponent">
<p <p
class="metadatum-description-help-info"
v-if="itemMetadatum.metadatum && v-if="itemMetadatum.metadatum &&
itemMetadatum.metadatum.description && itemMetadatum.metadatum.description &&
( (
(!hideHelpButtons && helpInfoBellowLabel) || (!hideHelpButtons && helpInfoBellowLabel) ||
(itemMetadatum.metadatum.description_bellow_name === 'yes') (itemMetadatum.metadatum.description_bellow_name === 'yes')
)"> )"
class="metadatum-description-help-info">
{{ itemMetadatum.metadatum.description }} {{ itemMetadatum.metadatum.description }}
</p> </p>
<component <component
:is="metadatumComponent" :is="metadatumComponent"
v-model="values[0]" v-model:value="values[0]"
:item-metadatum="itemMetadatum" :item-metadatum="itemMetadatum"
@input="changeValue" :disabled="false"
@blur="performValueChange"
:metadata-name-filter-string="metadataNameFilterString" :metadata-name-filter-string="metadataNameFilterString"
:hide-collapses="hideCollapses" :hide-collapses="hideCollapses"
:hide-metadata-types="hideMetadataTypes" :hide-metadata-types="hideMetadataTypes"
:hide-help-buttons="hideHelpButtons" :hide-help-buttons="hideHelpButtons"
:help-info-bellow-label="helpInfoBellowLabel" :help-info-bellow-label="helpInfoBellowLabel"
:is-mobile-screen="isMobileScreen" :is-mobile-screen="isMobileScreen"
@mobileSpecialFocus="onMobileSpecialFocus"
:is-focused="isFocused" :is-focused="isFocused"
:is-metadata-navigation="isMetadataNavigation" /> :is-metadata-navigation="isMetadataNavigation"
@update:value="changeValue"
@blur="performValueChange"
@mobile-special-focus="onMobileSpecialFocus" />
<template v-if="isMultiple && values.length > 1"> <template v-if="isMultiple && values.length > 1">
<transition-group <transition-group
tag="div"
name="filter-item" name="filter-item"
class="multiple-inputs"> class="multiple-inputs">
<template v-for="(value, index) of values"> <template
v-for="(value, index) of values"
:key="index">
<component <component
v-if="index > 0"
:key="index"
:is="metadatumComponent" :is="metadatumComponent"
v-model="values[index]" v-if="index > 0"
v-model:value="values[index]"
:item-metadatum="itemMetadatum" :item-metadatum="itemMetadatum"
@input="changeValue" :disabled="false"
@blur="performValueChange"
:metadata-name-filter-string="metadataNameFilterString" :metadata-name-filter-string="metadataNameFilterString"
:hide-collapses="hideCollapses" :hide-collapses="hideCollapses"
:hide-metadata-types="hideMetadataTypes" :hide-metadata-types="hideMetadataTypes"
:hide-help-buttons="hideHelpButtons" :hide-help-buttons="hideHelpButtons"
:help-info-bellow-label="helpInfoBellowLabel" :help-info-bellow-label="helpInfoBellowLabel"
:is-mobile-screen="isMobileScreen" :is-mobile-screen="isMobileScreen"
@mobileSpecialFocus="onMobileSpecialFocus"
:is-focused="isFocused" :is-focused="isFocused"
:is-metadata-navigation="isMetadataNavigation" /> :is-metadata-navigation="isMetadataNavigation"
@update:value="changeValue"
@blur="performValueChange"
@mobile-special-focus="onMobileSpecialFocus" />
<a <a
v-if="index > 0" v-if="index > 0"
@click="removeValue(index)" :key="index"
class="add-link" class="add-link"
:key="index"> @click="removeValue(index)">
<span class="icon is-small"> <span class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-remove"/> <i class="tainacan-icon has-text-secondary tainacan-icon-remove" />
</span> </span>
&nbsp;{{ $i18n.get('label_remove_value') }} &nbsp;{{ $i18n.get('label_remove_value') }}
</a> </a>
@ -114,10 +118,10 @@
</template> </template>
<template v-if="isMultiple && (maxMultipleValues === undefined || maxMultipleValues === 0 || (maxMultipleValues !== 1 && maxMultipleValues > values.length))"> <template v-if="isMultiple && (maxMultipleValues === undefined || maxMultipleValues === 0 || (maxMultipleValues !== 1 && maxMultipleValues > values.length))">
<a <a
@click="addValue" class="is-inline-block add-link"
class="is-inline-block add-link"> @click="addValue">
<span class="icon is-small"> <span class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/> <i class="tainacan-icon has-text-secondary tainacan-icon-add" />
</span> </span>
&nbsp;{{ $i18n.get('label_add_value') }} &nbsp;{{ $i18n.get('label_add_value') }}
</a> </a>
@ -129,21 +133,20 @@
v-show="hideCollapses || isCollapsed" v-show="hideCollapses || isCollapsed"
v-else> v-else>
<p <p
class="metadatum-description-help-info"
v-if="itemMetadatum.metadatum && v-if="itemMetadatum.metadatum &&
itemMetadatum.metadatum.description && itemMetadatum.metadatum.description &&
( (
(!hideHelpButtons && helpInfoBellowLabel) || (!hideHelpButtons && helpInfoBellowLabel) ||
(itemMetadatum.metadatum.description_bellow_name === 'yes') (itemMetadatum.metadatum.description_bellow_name === 'yes')
)"> )"
class="metadatum-description-help-info">
{{ itemMetadatum.metadatum.description }} {{ itemMetadatum.metadatum.description }}
</p> </p>
<component <component
:is="metadatumComponent" :is="metadatumComponent"
v-model="values" v-model:value="values"
:item-metadatum="itemMetadatum" :item-metadatum="itemMetadatum"
@input="changeValue" :disabled="false"
@blur="performValueChange"
:is-last-metadatum="isLastMetadatum" :is-last-metadatum="isLastMetadatum"
:hide-collapses="hideCollapses" :hide-collapses="hideCollapses"
:hide-metadata-types="hideMetadataTypes" :hide-metadata-types="hideMetadataTypes"
@ -151,20 +154,35 @@
:help-info-bellow-label="helpInfoBellowLabel" :help-info-bellow-label="helpInfoBellowLabel"
:is-mobile-screen="isMobileScreen" :is-mobile-screen="isMobileScreen"
:metadata-name-filter-string="metadataNameFilterString" :metadata-name-filter-string="metadataNameFilterString"
@mobileSpecialFocus="onMobileSpecialFocus"
:is-focused="isFocused" :is-focused="isFocused"
:is-metadata-navigation="isMetadataNavigation" :is-metadata-navigation="isMetadataNavigation"
:enumerate-metadatum="enumerateMetadatum" /> :enumerate-metadatum="enumerateMetadatum"
@update:value="changeValue"
@blur="performValueChange"
@mobile-special-focus="onMobileSpecialFocus" />
</div> </div>
</transition> </transition>
</b-field> </b-field>
</template> </template>
<script> <script>
import { eventBusItemMetadata } from '../../js/event-bus-item-metadata'; import { nextTick, defineAsyncComponent } from 'vue';
export default { export default {
name: 'TainacanFormItem', name: 'TainacanFormItem',
components:{
TainacanText: defineAsyncComponent(() => import('./text/TainacanText.vue')),
TainacanTextarea: defineAsyncComponent(() => import('./textarea/TainacanTextarea.vue')),
TainacanSelectbox: defineAsyncComponent(() => import('./selectbox/TainacanSelectbox.vue')),
TainacanNumeric: defineAsyncComponent(() => import('./numeric/TainacanNumeric.vue')),
TainacanDate: defineAsyncComponent(() => import('./date/TainacanDate.vue')),
TainacanRelationship: defineAsyncComponent(() => import('./relationship/TainacanRelationship.vue')),
TainacanTaxonomy: defineAsyncComponent(() => import('./taxonomy/TainacanTaxonomy.vue')),
TainacanCompound: defineAsyncComponent(() => import('./compound/TainacanCompound.vue')),
TainacanUser: defineAsyncComponent(() => import('./user/TainacanUser.vue')),
TainacanGeocoordinate: defineAsyncComponent(() => import('./geocoordinate/TainacanGeoCoordinate.vue')),
TainacanURL: defineAsyncComponent(() => import('./url/TainacanURL.vue'))
},
props: { props: {
itemMetadatum: Object, itemMetadatum: Object,
isCollapsed: true, isCollapsed: true,
@ -179,6 +197,11 @@
isMetadataNavigation: false, isMetadataNavigation: false,
enumerateMetadatum: [String, Boolean] enumerateMetadatum: [String, Boolean]
}, },
emits: [
'input',
'change-collapse',
'mobile-special-focus'
],
data(){ data(){
return { return {
values: [], values: [],
@ -209,7 +232,7 @@
metadatumFormClasses() { metadatumFormClasses() {
return '' + return '' +
(this.hideCollapses ? ' has-collapses-hidden' : '') + (this.hideCollapses ? ' has-collapses-hidden' : '') +
(this.isHighlightedMetadatum ? ' hightlighted-metadatum' : '') + (this.isHighlightedMetadatum ? ' highlighted-metadatum' : '') +
(this.metadatumComponent ? ' tainacan-metadatum-component--' + this.metadatumComponent : '') + (this.metadatumComponent ? ' tainacan-metadatum-component--' + this.metadatumComponent : '') +
(this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.placeholder ? ' has-placeholder' : '') + (this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.placeholder ? ' has-placeholder' : '') +
(this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.description ? ' has-description' : '') + (this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.description ? ' has-description' : '') +
@ -219,7 +242,7 @@
}, },
created() { created() {
this.setInitialValues(); this.setInitialValues();
eventBusItemMetadata.$on('updateErrorMessageOf#' + (this.itemMetadatum.parent_meta_id ? this.itemMetadatum.metadatum.id + '-' + this.itemMetadatum.parent_meta_id : this.itemMetadatum.metadatum.id), (errors) => { this.$emitter.on('updateErrorMessageOf#' + (this.itemMetadatum.parent_meta_id ? this.itemMetadatum.metadatum.id + '-' + this.itemMetadatum.parent_meta_id : this.itemMetadatum.metadatum.id), (errors) => {
let updatedErrorMessage = ''; let updatedErrorMessage = '';
if (errors && errors.errors && this.itemMetadatum && this.itemMetadatum.metadatum && (this.itemMetadatum.parent_meta_id ? (this.itemMetadatum.parent_meta_id == errors.parent_meta_id && this.itemMetadatum.metadatum.id == errors.metadatum_id) : this.itemMetadatum.metadatum.id == errors.metadatum_id)) { if (errors && errors.errors && this.itemMetadatum && this.itemMetadatum.metadatum && (this.itemMetadatum.parent_meta_id ? (this.itemMetadatum.parent_meta_id == errors.parent_meta_id && this.itemMetadatum.metadatum.id == errors.metadatum_id) : this.itemMetadatum.metadatum.id == errors.metadatum_id)) {
for (let error of errors.errors) { for (let error of errors.errors) {
@ -230,9 +253,9 @@
this.errorMessage = updatedErrorMessage; this.errorMessage = updatedErrorMessage;
}); });
}, },
beforeDestroy() { beforeUnmount() {
if (this.itemMetadatum && this.itemMetadatum.metadatum) { if (this.itemMetadatum && this.itemMetadatum.metadatum) {
eventBusItemMetadata.$off('updateErrorMessageOf#' + (this.itemMetadatum.parent_meta_id ? this.itemMetadatum.metadatum.id + '-' + this.itemMetadatum.parent_meta_id : this.itemMetadatum.metadatum.id)); this.$emitter.off('updateErrorMessageOf#' + (this.itemMetadatum.parent_meta_id ? this.itemMetadatum.metadatum.id + '-' + this.itemMetadatum.parent_meta_id : this.itemMetadatum.metadatum.id));
} }
}, },
mounted () { mounted () {
@ -241,8 +264,8 @@
if (this.isHighlightedMetadatum) { if (this.isHighlightedMetadatum) {
this.$nextTick(() => { nextTick(() => {
let highlightedMetadatum = this.$refs['hightlighted-metadatum']; let highlightedMetadatum = this.$refs['highlighted-metadatum'];
if (highlightedMetadatum && highlightedMetadatum.$el && highlightedMetadatum.$el.scrollIntoView) if (highlightedMetadatum && highlightedMetadatum.$el && highlightedMetadatum.$el.scrollIntoView)
setTimeout(() => highlightedMetadatum.$el.scrollIntoView(), 500); setTimeout(() => highlightedMetadatum.$el.scrollIntoView(), 500);
}); });
@ -315,7 +338,7 @@
} }
// If none is the case, the value is update request is sent to the API // If none is the case, the value is update request is sent to the API
eventBusItemMetadata.$emit('input', { this.$emit('input', {
itemId: this.itemMetadatum.item.id, itemId: this.itemMetadatum.item.id,
metadatumId: this.itemMetadatum.metadatum.id, metadatumId: this.itemMetadatum.metadatum.id,
values: this.values ? this.values : '', values: this.values ? this.values : '',
@ -333,7 +356,7 @@
}, },
onMobileSpecialFocus() { onMobileSpecialFocus() {
if (this.isMobileScreen) if (this.isMobileScreen)
this.$emit('mobileSpecialFocus'); this.$emit('mobile-special-focus');
} }
} }
} }
@ -348,9 +371,9 @@
justify-content: space-between; justify-content: space-between;
} }
/deep/ .is-special-hidden-for-mobile, :deep(.is-special-hidden-for-mobile),
/deep/ .is-special-hidden-for-mobile:focus, :deep(.is-special-hidden-for-mobile:focus),
/deep/ .is-special-hidden-for-mobile:focus-visible { :deep(.is-special-hidden-for-mobile:focus-visible) {
opacity: 0; opacity: 0;
width: 0; width: 0;
height: 0 !important; height: 0 !important;
@ -369,7 +392,7 @@
border-bottom: 1px solid var(--tainacan-input-border-color); border-bottom: 1px solid var(--tainacan-input-border-color);
padding: 10px var(--tainacan-container-padding); padding: 10px var(--tainacan-container-padding);
&.hightlighted-metadatum { &.highlighted-metadatum {
background-color: var(--tainacan-white); background-color: var(--tainacan-white);
transition: background-color 0.8s; transition: background-color 0.8s;
animation-name: metadatum-highlight; animation-name: metadatum-highlight;

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

@ -7,24 +7,26 @@
:type="taxonomyType" :type="taxonomyType"
:message="taxonomyMessage"> :message="taxonomyMessage">
<label class="label is-inline"> <label class="label is-inline">
{{ $i18n.get('label_select_taxonomy') }}<span :class="taxonomyType" >&nbsp;*&nbsp;</span> {{ $i18n.get('label_select_taxonomy') }}<span :class="taxonomyType">&nbsp;*&nbsp;</span>
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-taxonomy', 'taxonomy_id')" :title="$i18n.getHelperTitle('tainacan-taxonomy', 'taxonomy_id')"
:message="$i18n.getHelperMessage('tainacan-taxonomy', 'taxonomy_id')"/> :message="$i18n.getHelperMessage('tainacan-taxonomy', 'taxonomy_id')" />
</label> </label>
<b-select <b-select
v-model="taxonomy_id"
name="field_type_options[taxonomy_id]" name="field_type_options[taxonomy_id]"
placeholder="Select the taxonomy" placeholder="Select the taxonomy"
v-model="taxonomy_id"
@input="emitValues()"
@focus="clear"
:loading="loading" :loading="loading"
expanded> expanded
<option value="">{{ $i18n.get('label_selectbox_init') }}...</option> @update:model-value="emitValues()"
@focus="clear">
<option value="">
{{ $i18n.get('label_selectbox_init') }}...
</option>
<option <option
v-for="option in taxonomies" v-for="option in taxonomies"
:value="option.id" :key="option.id"
:key="option.id"> :value="option.id">
{{ option.name }} {{ option.name }}
</option> </option>
</b-select> </b-select>
@ -35,34 +37,34 @@
{{ $i18n.get('label_select_taxonomy_input_type') }} {{ $i18n.get('label_select_taxonomy_input_type') }}
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-taxonomy', 'input_type')" :title="$i18n.getHelperTitle('tainacan-taxonomy', 'input_type')"
:message="$i18n.getHelperMessage('tainacan-taxonomy', 'input_type')"/> :message="$i18n.getHelperMessage('tainacan-taxonomy', 'input_type')" />
</label> </label>
<b-select <b-select
v-if="listInputType" v-if="listInputType"
v-model="input_type"
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()" expanded
v-model="input_type" @update:model-value="emitValues()">
expanded>
<option <option
v-for="(option, index) in single_types" v-for="(option, index) in single_types"
:value="index" :key="index"
:key="index"> :value="index">
{{ option }} {{ option }}
</option> </option>
</b-select> </b-select>
<b-select <b-select
v-else
v-model="input_type"
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="input_type" expanded
@input="emitValues()" @update:model-value="emitValues()">
v-else
expanded>
<option <option
v-for="(option, index) in multiple_types" v-for="(option, index) in multiple_types"
:value="index" :key="index"
:key="index"> :value="index">
{{ option }} {{ option }}
</option> </option>
</b-select> </b-select>
@ -74,12 +76,12 @@
:label="$i18n.getHelperTitle('tainacan-taxonomy', 'visible_options_list')"> :label="$i18n.getHelperTitle('tainacan-taxonomy', 'visible_options_list')">
&nbsp; &nbsp;
<b-switch <b-switch
size="is-small" v-model="visible_options_list"
v-model="visible_options_list" size="is-small"
@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')" />
</b-field> </b-field>
<b-field <b-field
v-if="taxonomy_id && taxonomies.length && isTermCreationAllowedOnCurrentTaxonomy" v-if="taxonomy_id && taxonomies.length && isTermCreationAllowedOnCurrentTaxonomy"
@ -87,14 +89,14 @@
:label="$i18n.get('label_taxonomy_allow_new_terms')"> :label="$i18n.get('label_taxonomy_allow_new_terms')">
&nbsp; &nbsp;
<b-switch <b-switch
size="is-small" v-model="allow_new_terms"
v-model="allow_new_terms" size="is-small"
@input="emitValues()"
true-value="yes" true-value="yes"
false-value="no" /> false-value="no"
@update:model-value="emitValues()" />
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-taxonomy', 'allow_new_terms')" :title="$i18n.getHelperTitle('tainacan-taxonomy', 'allow_new_terms')"
:message="$i18n.getHelperMessage('tainacan-taxonomy', 'allow_new_terms')"/> :message="$i18n.getHelperMessage('tainacan-taxonomy', 'allow_new_terms')" />
</b-field> </b-field>
<b-field <b-field
v-if="taxonomy_id && taxonomies.length" v-if="taxonomy_id && taxonomies.length"
@ -102,39 +104,39 @@
:label="$i18n.getHelperTitle('tainacan-taxonomy', 'do_not_dispaly_term_as_link')"> :label="$i18n.getHelperTitle('tainacan-taxonomy', 'do_not_dispaly_term_as_link')">
&nbsp; &nbsp;
<b-switch <b-switch
size="is-small" v-model="do_not_dispaly_term_as_link"
v-model="do_not_dispaly_term_as_link" size="is-small"
@input="emitValues()"
true-value="yes" true-value="yes"
false-value="no" /> false-value="no"
@update:model-value="emitValues()" />
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-taxonomy', 'do_not_dispaly_term_as_link')" :title="$i18n.getHelperTitle('tainacan-taxonomy', 'do_not_dispaly_term_as_link')"
:message="$i18n.getHelperMessage('tainacan-taxonomy', 'do_not_dispaly_term_as_link')"/> :message="$i18n.getHelperMessage('tainacan-taxonomy', 'do_not_dispaly_term_as_link')" />
</b-field> </b-field>
<b-field :addons="false"> <b-field :addons="false">
<label class="label"> <label class="label">
{{ $i18n.getHelperTitle('tainacan-taxonomy', 'link_filtered_by_collections') }} {{ $i18n.getHelperTitle('tainacan-taxonomy', 'link_filtered_by_collections') }}
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-taxonomy', 'link_filtered_by_collections')" :title="$i18n.getHelperTitle('tainacan-taxonomy', 'link_filtered_by_collections')"
: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"
@focus="clear()"
attached attached
:disabled="do_not_dispaly_term_as_link == 'yes'" :disabled="do_not_dispaly_term_as_link == 'yes'"
:remove-on-keys="[]" :remove-on-keys="[]"
:aria-close-label="$i18n.get('remove_value')" :aria-close-label="$i18n.get('remove_value')"
:class="{'has-selected': link_filtered_by_collections != undefined && link_filtered_by_collections != []}" :class="{'has-selected': link_filtered_by_collections != undefined && link_filtered_by_collections != []}"
:placeholder="$i18n.get('instruction_select_one_or_more_collections')" :placeholder="$i18n.get('instruction_select_one_or_more_collections')"
@typing="filterCollections" :loading="loadingCollections"
:loading="loadingCollections"> @update:model-value="updateSelectedCollections"
<template slot-scope="props"> @focus="clear()"
@typing="filterCollections">
<template #default="props">
<div class="media"> <div class="media">
<div <div
v-if="props.option.thumbnail && props.option.thumbnail['tainacan-small'] && props.option.thumbnail['tainacan-small']" v-if="props.option.thumbnail && props.option.thumbnail['tainacan-small'] && props.option.thumbnail['tainacan-small']"
@ -142,14 +144,14 @@
<img <img
width="24" width="24"
:alt="$i18n.get('label_thumbnail')" :alt="$i18n.get('label_thumbnail')"
:src="$thumbHelper.getSrc(props.option['thumbnail'], 'tainacan-small')" > :src="$thumbHelper.getSrc(props.option['thumbnail'], 'tainacan-small')">
</div> </div>
<div class="media-content"> <div class="media-content">
{{ props.option.name }} {{ props.option.name }}
</div> </div>
</div> </div>
</template> </template>
<template slot="empty"> <template #empty>
{{ $i18n.get('info_no_options_found') }} {{ $i18n.get('info_no_options_found') }}
</template> </template>
</b-taginput> </b-taginput>
@ -159,21 +161,21 @@
:label="$i18n.getHelperTitle('tainacan-taxonomy', 'hide_hierarchy_path')"> :label="$i18n.getHelperTitle('tainacan-taxonomy', 'hide_hierarchy_path')">
&nbsp; &nbsp;
<b-switch <b-switch
size="is-small" v-model="hide_hierarchy_path"
v-model="hide_hierarchy_path" size="is-small"
@input="emitValues()"
true-value="yes" true-value="yes"
false-value="no" /> false-value="no"
@update:model-value="emitValues()" />
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-taxonomy', 'hide_hierarchy_path')" :title="$i18n.getHelperTitle('tainacan-taxonomy', 'hide_hierarchy_path')"
:message="$i18n.getHelperMessage('tainacan-taxonomy', 'hide_hierarchy_path')"/> :message="$i18n.getHelperMessage('tainacan-taxonomy', 'hide_hierarchy_path')" />
</b-field> </b-field>
</section> </section>
</template> </template>
<script> <script>
import { tainacan as axios } from '../../../js/axios'; import { tainacanApi } from '../../../js/axios';
export default { export default {
props: { props: {
@ -181,6 +183,7 @@
metadatum: [ String, Object ], metadatum: [ String, Object ],
errors: [ String, Object, Array ] errors: [ String, Object, Array ]
}, },
emits: ['input'],
data(){ data(){
return { return {
isReady: false, isReady: false,
@ -293,7 +296,7 @@
fetchCollections() { fetchCollections() {
this.loadingCollections = true; this.loadingCollections = true;
return axios.get('/collections?nopaging=1&context=edit&nopaging=1&fetch_only=name,id,thumbnail') return tainacanApi.get('/collections?nopaging=1&context=edit&nopaging=1&fetch_only=name,id,thumbnail')
.then(res => { .then(res => {
this.collections = res.data ? res.data : []; this.collections = res.data ? res.data : [];
this.loadingCollections = false; this.loadingCollections = false;
@ -306,7 +309,7 @@
fetchTaxonomies(){ fetchTaxonomies(){
this.loading = true; this.loading = true;
return axios.get('/taxonomies?nopaging=1&order=asc&orderby=title') return tainacanApi.get('/taxonomies?nopaging=1&order=asc&orderby=title')
.then(res => { .then(res => {
this.taxonomies = res.data ? res.data : []; this.taxonomies = res.data ? res.data : [];
this.loading = false; this.loading = false;

68
src/views/admin/components/metadata-types/taxonomy/Taxonomy.vue → src/views/admin/components/metadata-types/taxonomy/TainacanTaxonomy.vue
View File

@ -2,23 +2,22 @@
<div> <div>
<tainacan-taxonomy-tag-input <tainacan-taxonomy-tag-input
v-if="getComponent == 'tainacan-taxonomy-tag-input'" v-if="getComponent == 'tainacan-taxonomy-tag-input'"
v-model:value="valueComponent"
:disabled="disabled || isFetchingTerms" :disabled="disabled || isFetchingTerms"
: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')"
v-model="valueComponent"
:allow-new="allowNewFromOptions" :allow-new="allowNewFromOptions"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : $i18n.get('instruction_type_existing_term')" :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : $i18n.get('instruction_type_existing_term')"
:taxonomy-id="taxonomyId" :taxonomy-id="taxonomyId"
:item-metadatum="itemMetadatum" :item-metadatum="itemMetadatum"
@showAddNewTerm="openTermCreationModal" :has-counter="false"
:has-counter="false" /> @show-add-new-term="openTermCreationModal" />
<checkbox-radio-metadata-input <checkbox-radio-metadata-input
v-else v-else
: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) : '')"
:is-modal="false" :is-modal="false"
:parent="0" :parent="0"
:allow-new="allowNewFromOptions" :allow-new="allowNewFromOptions"
@showAddNewTerm="openTermCreationModal" :taxonomy-id="taxonomyId"
:taxonomy_id="taxonomyId"
:selected="!valueComponent ? [] : valueComponent" :selected="!valueComponent ? [] : valueComponent"
:metadatum-id="itemMetadatum.metadatum.id" :metadatum-id="itemMetadatum.metadatum.id"
:taxonomy="taxonomy" :taxonomy="taxonomy"
@ -28,19 +27,20 @@
:metadatum="itemMetadatum.metadatum" :metadatum="itemMetadatum.metadatum"
:amount-selected="Array.isArray(valueComponent) ? valueComponent.length : (valueComponent ? '1' : '0')" :amount-selected="Array.isArray(valueComponent) ? valueComponent.length : (valueComponent ? '1' : '0')"
:is-checkbox="getComponent == 'tainacan-taxonomy-checkbox'" :is-checkbox="getComponent == 'tainacan-taxonomy-checkbox'"
@input="(selected) => valueComponent = selected"
:is-mobile-screen="isMobileScreen" :is-mobile-screen="isMobileScreen"
@mobileSpecialFocus="onMobileSpecialFocus" @show-add-new-term="openTermCreationModal"
@input="(selected) => valueComponent = selected"
@mobile-special-focus="onMobileSpecialFocus"
/> />
<div <div
v-if="displayCreateNewTerm && !isTermCreationPanelOpen && (maxMultipleValues !== undefined ? (maxMultipleValues > valueComponent.length) : true)" v-if="displayCreateNewTerm && !isTermCreationPanelOpen && (maxMultipleValues !== undefined ? (maxMultipleValues > valueComponent.length) : true)"
class="add-new-term"> class="add-new-term">
<a <a
@click="openTermCreationModal"
class="add-link" class="add-link"
:class="{ 'is-loading': isAddingNewTermVaue }"> :class="{ 'is-loading': isAddingNewTermVaue }"
@click="openTermCreationModal">
<span class="icon is-small"> <span class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/> <i class="tainacan-icon has-text-secondary tainacan-icon-add" />
</span> </span>
&nbsp;{{ $i18n.get('label_create_new_term') }} &nbsp;{{ $i18n.get('label_create_new_term') }}
</a> </a>
@ -48,7 +48,7 @@
<template v-if="allowNewFromOptions && itemMetadatum.item"> <template v-if="allowNewFromOptions && itemMetadatum.item">
<!-- 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
:active.sync="isTermCreationModalOpen" v-model:active="isTermCreationModalOpen"
:width="768" :width="768"
trap-focus trap-focus
aria-role="dialog" aria-role="dialog"
@ -63,38 +63,40 @@
:taxonomy-id="taxonomyId" :taxonomy-id="taxonomyId"
:original-form="{ id: 'new', name: newTermName ? newTermName : '' }" :original-form="{ id: 'new', name: newTermName ? newTermName : '' }"
:is-term-insertion-flow="true" :is-term-insertion-flow="true"
@onEditionFinished="($event) => addRecentlyCreatedTerm($event.term)" @on-edition-finished="($event) => addRecentlyCreatedTerm($event.term)"
@onEditionCanceled="() => $console.log('Editing canceled')" @close="isTermCreationModalOpen = false" />
@onErrorFound="($event) => $console.log('Form with errors: ' + $event)" />
</b-modal> </b-modal>
<!-- Term creation panel, used on item submission block for a simpler term creation --> <!-- Term creation panel, used on item submission block for a simpler term creation -->
<transition name="filter-item"> <transition name="filter-item">
<term-creation-panel <component
:is="'term-creation-panel'"
v-if="isTermCreationPanelOpen"
:metadatum-id="itemMetadatum.metadatum.id" :metadatum-id="itemMetadatum.metadatum.id"
:item-id="itemMetadatum.item.id" :item-id="itemMetadatum.item.id"
:is-hierarchical="isHierarchical" :is-hierarchical="isHierarchical"
v-if="isTermCreationPanelOpen"
:taxonomy-id="taxonomyId" :taxonomy-id="taxonomyId"
:original-form="{ id: 'new', name: newTermName ? newTermName : '' }" :original-form="{ id: 'new', name: newTermName ? newTermName : '' }"
@onEditionFinished="($event) => addTermToBeCreated($event)" @on-edition-finished="($event) => addTermToBeCreated($event)"
@onEditionCanceled="() => isTermCreationPanelOpen = false" @on-edition-canceled="() => isTermCreationPanelOpen = false"
@onErrorFound="($event) => $console.log('Form with errors: ' + $event)" /> @on-error-found="($event) => $console.log('Form with errors: ' + $event)" />
</transition> </transition>
</template> </template>
</div> </div>
</template> </template>
<script> <script>
import TainacanTaxonomyTagInput from './TaxonomyTaginput.vue'; import TainacanTaxonomyTagInput from './TainacanTaxonomyTaginput.vue';
import CheckboxRadioMetadataInput from '../../other/checkbox-radio-metadata-input.vue'; import CheckboxRadioMetadataInput from '../../other/checkbox-radio-metadata-input.vue';
import { tainacan as axios } from '../../../js/axios.js'; import { tainacanApi } from '../../../js/axios';
import { mapActions } from 'vuex'; import { mapActions } from 'vuex';
import { defineAsyncComponent } from 'vue';
export default { export default {
components: { components: {
TainacanTaxonomyTagInput, TainacanTaxonomyTagInput,
CheckboxRadioMetadataInput CheckboxRadioMetadataInput,
TermEditionForm: defineAsyncComponent(() => import('../../edition/term-edition-form.vue')),
}, },
props: { props: {
itemMetadatum: Object, itemMetadatum: Object,
@ -105,6 +107,11 @@
allowNew: false, allowNew: false,
isMobileScreen: false, isMobileScreen: false,
}, },
emits: [
'updateTaxonomyInputs',
'mobile-special-focus',
'update:value'
],
data(){ data(){
return { return {
valueComponent: null, valueComponent: null,
@ -156,8 +163,11 @@
} }
}, },
watch: { watch: {
valueComponent( val ) { valueComponent: {
this.$emit('input', val); handler( val ) {
this.$emit('update:value', val);
},
deep: true
} }
}, },
created() { created() {
@ -224,22 +234,22 @@
let val = this.valueComponent; let val = this.valueComponent;
if ((!Array.isArray(val) || val.length == 0) && this.itemMetadatum.metadatum.multiple === 'no') { if ((!Array.isArray(val) || val.length == 0) && this.itemMetadatum.metadatum.multiple === 'no') {
axios.patch(`/item/${this.itemMetadatum.item.id}/metadata/${this.itemMetadatum.metadatum.id}`, { tainacanApi.patch(`/item/${this.itemMetadatum.item.id}/metadata/${this.itemMetadatum.metadatum.id}`, {
values: term.id, values: term.id,
}).then(() => { }).then(() => {
this.isAddingNewTermVaue = false; this.isAddingNewTermVaue = false;
this.valueComponent = term.id; this.valueComponent = term.id;
this.$emit('update-taxonomy-inputs', { taxonomyId: this.taxonomyId, metadatumId: this.itemMetadatum.metadatum.id }); this.$emit('updateTaxonomyInputs', { taxonomyId: this.taxonomyId, metadatumId: this.itemMetadatum.metadatum.id });
}) })
} else { } else {
val = val ? val : []; val = val ? val : [];
val.push( this.getComponent == ('tainacan-taxonomy-checkbox' || 'tainacan-taxonomy-radio') ? term.id : {'label': term.name, 'value': term.id} ); val.push( this.getComponent == ('tainacan-taxonomy-checkbox' || 'tainacan-taxonomy-radio') ? term.id : {'label': term.name, 'value': term.id} );
axios.patch(`/item/${this.itemMetadatum.item.id}/metadata/${this.itemMetadatum.metadatum.id}`, { tainacanApi.patch(`/item/${this.itemMetadatum.item.id}/metadata/${this.itemMetadatum.metadatum.id}`, {
values: val, values: val,
}).then(() => { }).then(() => {
this.isAddingNewTermVaue = false; this.isAddingNewTermVaue = false;
this.valueComponent = val; this.valueComponent = val;
this.$emit('update-taxonomy-inputs', { taxonomyId: this.taxonomyId, metadatumId: this.itemMetadatum.metadatum.id }); this.$emit('updateTaxonomyInputs', { taxonomyId: this.taxonomyId, metadatumId: this.itemMetadatum.metadatum.id });
}) })
} }
} }
@ -261,7 +271,7 @@
this.isTermCreationModalOpen = true; this.isTermCreationModalOpen = true;
}, },
onMobileSpecialFocus() { onMobileSpecialFocus() {
this.$emit('mobileSpecialFocus'); this.$emit('mobile-special-focus');
} }
} }
} }

36
src/views/admin/components/metadata-types/taxonomy/TaxonomyTaginput.vue → src/views/admin/components/metadata-types/taxonomy/TainacanTaxonomyTaginput.vue
View File

@ -1,17 +1,15 @@
<template> <template>
<b-taginput <b-taginput
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
v-model="selected"
expanded expanded
:disabled="disabled" :disabled="disabled"
: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="magnify" icon="magnify"
@add="emitAdd"
@remove="emitRemove"
v-model="selected"
: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')"
field="label" field="label"
:remove-on-keys="[]" :remove-on-keys="[]"
:dropdown-position="isLastMetadatum ? 'top' :'auto'" :dropdown-position="isLastMetadatum ? 'top' :'auto'"
attached attached
ellipsis ellipsis
@ -20,13 +18,15 @@
:loading="isFetching" :loading="isFetching"
:class="{ 'has-selected': selected != undefined && selected != [] }" :class="{ 'has-selected': selected != undefined && selected != [] }"
autocomplete autocomplete
@typing="search"
check-infinite-scroll check-infinite-scroll
@infinite-scroll="searchMore"
:has-counter="false" :has-counter="false"
:append-to-body="!itemMetadatum.item" :append-to-body="!itemMetadatum.item"
:open-on-focus="false"> :open-on-focus="false"
<template slot-scope="props"> @add="emitAdd"
@remove="emitRemove"
@typing="search"
@infinite-scroll="searchMore">
<template #default="props">
<div class="media"> <div class="media">
<div class="media-content"> <div class="media-content">
{{ props.option.label }} {{ props.option.label }}
@ -35,13 +35,13 @@
</template> </template>
<template <template
v-if="!isFetching && options.length <= 0 && searchName.length > 0" v-if="!isFetching && options.length <= 0 && searchName.length > 0"
slot="empty"> #empty>
{{ $i18n.get('info_no_terms_found') }} {{ $i18n.get('info_no_terms_found') }}
</template> </template>
<template <template
v-if="allowNew && !isFetching && searchName.length > 0" v-if="allowNew && !isFetching && searchName.length > 0"
slot="footer"> #footer>
<a @click="$emit('showAddNewTerm', { name: searchName })"> <a @click="$emit('show-add-new-term', { name: searchName })">
{{ $i18n.get('label_create_new_term') + ' "' + searchName + '"' }} {{ $i18n.get('label_create_new_term') + ' "' + searchName + '"' }}
</a> </a>
</template> </template>
@ -61,6 +61,10 @@
maxtags: '', maxtags: '',
isLastMetadatum: false isLastMetadatum: false
}, },
emits: [
'update:value',
'show-add-new-term'
],
data() { data() {
return { return {
selected: [], selected: [],
@ -168,7 +172,7 @@
for (let term of val) for (let term of val)
results.push( term.value ); results.push( term.value );
this.$emit('input', results); this.$emit('update:value', results);
} }
}, },
emitRemove(){ emitRemove(){
@ -178,7 +182,7 @@
for (let term of val) for (let term of val)
results.push(term.value); results.push(term.value);
this.$emit('input', results); this.$emit('update:value', results);
} }
} }
} }

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

@ -6,13 +6,13 @@
&nbsp; &nbsp;
<b-switch <b-switch
size="is-small" size="is-small"
:value="displaySuggestions" :model-value="displaySuggestions"
@input="onUpdateDisplaySuggestions"
:true-value="'yes'" :true-value="'yes'"
:false-value="'no'" /> :false-value="'no'"
@update:model-value="onUpdateDisplaySuggestions" />
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-text', 'display_suggestions')" :title="$i18n.getHelperTitle('tainacan-text', 'display_suggestions')"
:message="$i18n.getHelperMessage('tainacan-text', 'display_suggestions')"/> :message="$i18n.getHelperMessage('tainacan-text', 'display_suggestions')" />
</b-field> </b-field>
<b-field :addons="false"> <b-field :addons="false">
<label class="label is-inline"> <label class="label is-inline">
@ -22,10 +22,10 @@
:message="$i18n.getHelperMessage('tainacan-text', 'mask')" /> :message="$i18n.getHelperMessage('tainacan-text', 'mask')" />
</label> </label>
<b-input <b-input
:value="displaySuggestions === 'yes' ? '' : mask" :model-value="displaySuggestions === 'yes' ? '' : mask"
:disabled="displaySuggestions === 'yes'" :disabled="displaySuggestions === 'yes'"
name="mask" name="mask"
@input="onUpdateMask" /> @update:model-value="onUpdateMask" />
</b-field> </b-field>
</section> </section>
</template> </template>
@ -35,6 +35,7 @@
props: { props: {
value: [ String, Object, Array ] value: [ String, Object, Array ]
}, },
emits: ['update:value'],
data() { data() {
return { return {
displaySuggestions: String, displaySuggestions: String,
@ -48,11 +49,11 @@
methods: { methods: {
onUpdateDisplaySuggestions(value) { onUpdateDisplaySuggestions(value) {
this.displaySuggestions = value; this.displaySuggestions = value;
this.$emit('input', { display_suggestions: value, mask: value == 'yes' ? '' : this.mask }); this.$emit('update:value', { display_suggestions: value, mask: value == 'yes' ? '' : this.mask });
}, },
onUpdateMask(value) { onUpdateMask(value) {
this.mask = value; this.mask = value;
this.$emit('input', { display_suggestions: this.displaySuggestions, mask: value }); this.$emit('update:value', { display_suggestions: this.displaySuggestions, mask: value });
} }
} }
} }

27
src/views/admin/components/metadata-types/text/Text.vue → src/views/admin/components/metadata-types/text/TainacanText.vue
View File

@ -4,31 +4,31 @@
v-if="!getDisplayAutocomplete" v-if="!getDisplayAutocomplete"
class="control is-clearfix"> class="control is-clearfix">
<input <input
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
v-imask="getMask"
class="input" class="input"
:disabled="disabled" :disabled="disabled"
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:value="value" :value="value"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''" :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
@focus="onMobileSpecialFocus" @focus="onMobileSpecialFocus"
v-imask="getMask"
@complete="($event) => getMask ? onInput($event.detail.value) : null" @complete="($event) => getMask ? onInput($event.detail.value) : null"
@input="($event) => getMask ? null : onInput($event.target.value)" @input="($event) => getMask ? null : onInput($event.target.value)"
@blur="onBlur" > @blur="onBlur">
</div> </div>
<b-autocomplete <b-autocomplete
v-else v-else
: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" :disabled="disabled"
@blur="onBlur" :model-value="value"
:data="options" :data="options"
:loading="isLoadingOptions" :loading="isLoadingOptions"
@input="($event) => { search($event); }"
field="label" field="label"
@select="onSelect"
clearable clearable
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''" :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
check-infinite-scroll check-infinite-scroll
@blur="onBlur"
@update:model-value="($event) => { search($event); }"
@select="onSelect"
@infinite-scroll="searchMore" @infinite-scroll="searchMore"
@focus="onMobileSpecialFocus"> @focus="onMobileSpecialFocus">
<template #header> <template #header>
@ -36,7 +36,7 @@
{{ $i18n.get('info_metadata_autocomplete_suggestions') }} {{ $i18n.get('info_metadata_autocomplete_suggestions') }}
</span> </span>
</template> </template>
<template slot-scope="props"> <template #default="props">
<div class="media"> <div class="media">
<div class="media-content"> <div class="media-content">
<span class="ellipsed-text">{{ props.option.label }}</span> <span class="ellipsed-text">{{ props.option.label }}</span>
@ -62,6 +62,11 @@
value: [String, Number, Array], value: [String, Number, Array],
disabled: false disabled: false
}, },
emits: [
'update:value',
'blur',
'mobile-special-focus'
],
data() { data() {
return { return {
selected:'', selected:'',
@ -100,7 +105,7 @@
}, },
methods: { methods: {
onInput(value) { onInput(value) {
this.$emit('input', value); this.$emit('update:value', value);
}, },
onBlur() { onBlur() {
this.$emit('blur'); this.$emit('blur');
@ -182,7 +187,7 @@
this.search(this.searchQuery); this.search(this.searchQuery);
}, 250), }, 250),
onMobileSpecialFocus() { onMobileSpecialFocus() {
this.$emit('mobileSpecialFocus'); this.$emit('mobile-special-focus');
} }
} }
} }

8
src/views/admin/components/metadata-types/textarea/FormTextarea.vue
View File

@ -12,7 +12,7 @@
name="maxlength" name="maxlength"
step="1" step="1"
min="0" min="0"
@input="onUpdateMaxlength"/> @update:model-value="onUpdateMaxlength" />
</b-field> </b-field>
</section> </section>
</template> </template>
@ -22,6 +22,10 @@
props: { props: {
value: [ String, Object, Array ] value: [ String, Object, Array ]
}, },
emits: [
'update:value',
'close'
],
data() { data() {
return { return {
maxlength: [Number, null] maxlength: [Number, null]
@ -34,7 +38,7 @@
onUpdateMaxlength(value) { onUpdateMaxlength(value) {
if (value == 0) value = null; if (value == 0) value = null;
this.$emit('input', { maxlength: value }); this.$emit('update:value', { maxlength: value });
} }
} }
} }

25
src/views/admin/components/metadata-types/textarea/Textarea.vue → src/views/admin/components/metadata-types/textarea/TainacanTextarea.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<b-input <b-input
:disabled="disabled"
:ref="'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) : '')" :id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:ref="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:disabled="disabled"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''" :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
:value="value" :model-value="value"
@input="onInput($event)"
@blur="onBlur"
type="textarea" type="textarea"
@focus="onMobileSpecialFocus" :maxlength="getMaxlength"
:maxlength="getMaxlength" /> @update:model-value="onInput($event)"
@blur="onBlur"
@focus="onMobileSpecialFocus" />
</template> </template>
<script> <script>
@ -19,9 +19,14 @@
value: [String, Number, Array], value: [String, Number, Array],
disabled: false disabled: false
}, },
emits: [
'update:value',
'blur',
'mobile-special-focus'
],
computed: { computed: {
getMaxlength() { getMaxlength() {
if (this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.maxlength !== null && this.itemMetadatum.metadatum.metadata_type_options.maxlength !== undefined && this.itemMetadatum.metadatum.metadata_type_options.maxlength !== '') if ( this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.maxlength !== null && this.itemMetadatum.metadatum.metadata_type_options.maxlength !== undefined && this.itemMetadatum.metadatum.metadata_type_options.maxlength !== '' )
return Number(this.itemMetadatum.metadatum.metadata_type_options.maxlength); return Number(this.itemMetadatum.metadatum.metadata_type_options.maxlength);
else else
return undefined; return undefined;
@ -33,13 +38,13 @@
if ( inputRef && this.getMaxlength && !inputRef.checkHtml5Validity() ) if ( inputRef && this.getMaxlength && !inputRef.checkHtml5Validity() )
return; return;
this.$emit('input', value); this.$emit('update:value', value);
}, },
onBlur() { onBlur() {
this.$emit('blur'); this.$emit('blur');
}, },
onMobileSpecialFocus() { onMobileSpecialFocus() {
this.$emit('mobileSpecialFocus'); this.$emit('mobile-special-focus');
} }
} }
} }

154
src/views/admin/components/metadata-types/url/FormURL.vue Normal file
View File

@ -0,0 +1,154 @@
<template>
<div>
<b-field
:addons="false"
:label="$i18n.getHelperTitle('tainacan-url', 'link-as-button')">
&nbsp;
<b-switch
v-model="linkAsButton"
true-value="yes"
false-value="no"
size="is-small"
@update:model-value="onUpdateLinkAsButton" />
<help-button
:title="$i18n.getHelperTitle('tainacan-url', 'link-as-button')"
:message="$i18n.getHelperMessage('tainacan-url', 'link-as-button')" />
</b-field>
<b-field
:addons="false"
:label="$i18n.getHelperTitle('tainacan-url', 'force-iframe')">
&nbsp;
<b-switch
v-model="forceIframe"
size="is-small"
true-value="yes"
false-value="no"
@update:model-value="onUpdateForceIframe" />
<help-button
:title="$i18n.getHelperTitle('tainacan-url', 'force-iframe')"
:message="$i18n.getHelperMessage('tainacan-url', 'force-iframe')" />
</b-field>
<b-field
v-if="forceIframe == 'yes'"
:addons="false">
<label class="label is-inline-block">
{{ $i18n.getHelperTitle('tainacan-url', 'iframe-min-height') }}
<help-button
:title="$i18n.getHelperTitle('tainacan-url', 'iframe-min-height')"
:message="$i18n.getHelperMessage('tainacan-url', 'iframe-min-height')" />
</label>
<b-numberinput
:model-value="iframeMinimumHeight === '' ? 0 : iframeMinimumHeight"
size="is-small"
step="1"
@update:model-value="onUpdateIframeMinimumHeight" />
</b-field>
<b-field
v-if="forceIframe == 'yes'"
:addons="false"
:label="$i18n.getHelperTitle('tainacan-url', 'iframe-allowfullscreen')">
&nbsp;
<b-switch
v-model="iframeAllowfullscreen"
size="is-small"
true-value="yes"
false-value="no"
@update:model-value="onUpdateIframeAllowfullscreen" />
<help-button
:title="$i18n.getHelperTitle('tainacan-url', 'iframe-allowfullscreen')"
:message="$i18n.getHelperMessage('tainacan-url', 'iframe-allowfullscreen')" />
</b-field>
<b-field
v-if="forceIframe == 'yes'"
:addons="false"
:label="$i18n.getHelperTitle('tainacan-url', 'is-image')">
&nbsp;
<b-switch
v-model="isImage"
size="is-small"
true-value="yes"
false-value="no"
@update:model-value="onUpdateIsImage" />
<help-button
:title="$i18n.getHelperTitle('tainacan-url', 'is-image')"
:message="$i18n.getHelperMessage('tainacan-url', 'is-image')" />
</b-field>
</div>
</template>
<script>
export default {
name: "TainacanMetadataFormTypeURL",
props: {
value: [String, Object, Array],
},
emits: [ 'update:value' ],
data() {
return {
linkAsButton: String,
forceIframe: String,
iframeMinimumHeight: [Number, String],
iframeAllowfullscreen: String,
isImage: String
};
},
created() {
this.linkAsButton = this.value && this.value['link-as-button'] ? this.value['link-as-button'] : 'no';
this.forceIframe = this.value && this.value['force-iframe'] ? this.value['force-iframe'] : 'no';
this.iframeMinimumHeight = this.value && this.value['iframe-min-height'] ? this.value['iframe-min-height'] : '';
this.iframeAllowfullscreen = this.value && this.value['iframe-allowfullscreen'] ? this.value['iframe-allowfullscreen'] : 'no';
this.isImage = this.value && this.value['is-image'] ? this.value['is-image'] : 'no';
},
methods: {
onUpdateLinkAsButton(value) {
this.$emit('update:value', {
'link-as-button': value,
'force-iframe': this.forceIframe,
'iframe-min-height': this.iframeMinimumHeight,
'iframe-allowfullscreen': this.iframeAllowfullscreen,
'is-image': this.isImage,
});
},
onUpdateForceIframe(value) {
this.$emit('update:value', {
'link-as-button': this.linkAsButton,
'force-iframe': value,
'iframe-min-height': this.iframeMinimumHeight,
'iframe-allowfullscreen': this.iframeAllowfullscreen,
'is-image': this.isImage,
});
},
onUpdateIframeMinimumHeight(value) {
this.$emit('update:value', {
'link-as-button': this.linkAsButton,
'force-iframe': this.forceIframe,
'iframe-min-height': value,
'iframe-allowfullscreen': this.iframeAllowfullscreen,
'is-image': this.isImage,
});
},
onUpdateIframeAllowfullscreen(value) {
this.$emit('update:value', {
'link-as-button': this.linkAsButton,
'force-iframe': this.forceIframe,
'iframe-min-height': this.iframeMinimumHeight,
'iframe-allowfullscreen': value,
'is-image': this.isImage,
});
},
onUpdateIsImage(value) {
this.$emit('update:value', {
'link-as-button': this.linkAsButton,
'force-iframe': this.forceIframe,
'iframe-min-height': this.iframeMinimumHeight,
'iframe-allowfullscreen': this.iframeAllowfullscreen,
'is-image': value,
});
},
},
};
</script>

87
src/views/admin/components/metadata-types/url/TainacanURL.vue Normal file
View File

@ -0,0 +1,87 @@
<template>
<div v-if="itemMetadatum">
<b-input
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:disabled="disabled"
:model-value="value"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : '[link](https://url.com)'"
@update:model-value="($event) => onInput($event)"
@blur="onBlur" />
<div
v-if="itemMetadatum.item.id"
class="add-new-term">
<a
v-if="value"
class="add-link"
@click="previewHtml">
<span class="icon">
<i class="tainacan-icon has-text-secondary tainacan-icon-see" />
</span>
<span style="font-size: 0.75em">&nbsp;{{ $i18n.get('label_preview', 'tainacan') }}</span>
</a>
</div>
<transition name="filter-item">
<div
v-if="isPreviewingHtml"
v-html="singleHTMLPreview" />
</transition>
</div>
</template>
<script>
export default {
name: 'TainacanMetadataTypeURL',
props: {
itemMetadatum: Object,
value: [String, Number, Array],
disabled: false
},
emits: [ 'update:value', 'blur' ],
data() {
return {
isPreviewingHtml: false,
singleHTMLPreview: ''
}
},
methods: {
onInput(value) {
this.isPreviewingHtml = false;
this.singleHTMLPreview = '';
this.$emit('update:value', value);
},
onBlur() {
this.$emit('blur');
},
createElementFromHTML(htmlString) {
let div = document.createElement('div');
div.innerHTML = htmlString.trim();
return div;
},
previewHtml() {
// If we are going to display preview, renders it
if (!this.isPreviewingHtml) {
// Multivalued metadata need to be split as the values_as_html shows every value
if (this.itemMetadatum.metadatum.multiple == 'yes') {
const valuesAsHtml = this.createElementFromHTML(this.itemMetadatum.value_as_html);
const valuesAsArray = Object.values(valuesAsHtml.children).filter((aValue) => aValue.outerHTML != '<span class="multivalue-separator"> | </span>');
const singleValueIndex = this.itemMetadatum.value.findIndex((aValue) => aValue == this.value);
if (singleValueIndex >= 0)
this.singleHTMLPreview = valuesAsArray[singleValueIndex].outerHTML;
} else {
this.singleHTMLPreview = this.itemMetadatum.value_as_html;
}
}
// Toggle Preview view
this.isPreviewingHtml = !this.isPreviewingHtml;
}
},
};
</script>

213
src/views/admin/components/metadata-types/url/class-tainacan-url.php Normal file
View File

@ -0,0 +1,213 @@
<?php
namespace Tainacan\Metadata_Types;
class URL extends Metadata_Type {
use \Tainacan\Traits\Formatter_Text;
function __construct() {
parent::__construct();
// Basic options
$this->set_name( __('URL', 'tainacan') );
$this->set_description( __('An URL link, possibly with embedded content.', 'tainacan') );
$this->set_primitive_type('string');
$this->set_component('tainacan-url');
$this->set_form_component('tainacan-form-url');
$this->set_default_options([
'link-as-button' => 'no',
'force-iframe' => 'no',
'iframe-min-height' => '',
'iframe-allowfullscreen' => 'no',
'is-image' => 'no'
]);
$this->set_preview_template('
<div>
<div class="control is-clearfix">
<input type="url" placeholder="https://youtube.com/?v=abc123456" class="input">
</div>
</div>
');
}
/**
* @inheritdoc
*/
public function get_form_labels() {
return [
'link-as-button' => [
'title' => __( 'Display link as a button', 'tainacan' ),
'description' => __( 'Style the link to be displayed as a button instead of a simple textual link.', 'tainacan' ),
],
'force-iframe' => [
'title' => __( 'Force iframe', 'tainacan' ),
'description' => __( 'Force the URL to be displayed in an iframe in case the content is not embeddable by WordPress.', 'tainacan' ),
],
'iframe-min-height' => [
'title' => __( 'Forced iframe minimum height', 'tainacan' ),
'description' => __( 'If forcing the use of an iframe, sets the height attribute, in pixels. Leave it empty to be 100% of the container.', 'tainacan' ),
],
'iframe-allowfullscreen' => [
'title' => __( 'Allow fullscreen on forced iframe', 'tainacan' ),
'description' => __( 'If forcing the use of an iframe, allows it to request fullscreen to the browser.', 'tainacan' ),
],
'is-image' => [
'title' => __( 'Is link to external image', 'tainacan' ),
'description' => __( 'If you are linking directly to an external image, use this option so it can be properly embedded.', 'tainacan' ),
]
];
}
/**
* Get the value as a HTML string with links
* @return string
*/
public function get_value_as_html(\Tainacan\Entities\Item_Metadata_Entity $item_metadata) {
$value = $item_metadata->get_value();
$link_as_button = $this->get_option('link-as-button') == 'yes';
$return = '';
$return .= $link_as_button ? '<div class="wp-block-buttons">' : '';
if ( is_array($value) && $item_metadata->is_multiple() ) {
$total = sizeof($value);
$count = 0;
$prefix = $item_metadata->get_multivalue_prefix();
$suffix = $item_metadata->get_multivalue_suffix();
$separator = $item_metadata->get_multivalue_separator();
foreach ( $value as $el ) {
if ( !empty($el) ) {
$return .= $prefix;
$return .= $this->get_single_value_as_html($el);
$return .= $suffix;
$count ++;
if ($count < $total && !$link_as_button)
$return .= $separator;
}
}
} else {
$return .= $this->get_single_value_as_html($value);
}
$return .= $link_as_button ? '</div>' : '';
return $return;
}
/**
* Get the a single value as a HTML string with links
* @return string
*/
public function get_single_value_as_html($value) {
global $wp_embed;
$link_as_button = $this->get_option('link-as-button') == 'yes';
$return = '';
if ($link_as_button) {
$mkstr = preg_replace(
'/\[([^\]]+)\]\(([^\)]+)\)/',
'<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="\2" target="_blank" title="\1">\1</a></div>',
$value
);
$return = $this->make_clickable_links($mkstr);
} else {
// First, we try WordPress autoembed
$embed = $wp_embed->autoembed($value);
// If it didn't work, it will still ba a URL
if ( esc_url($embed) == esc_url($value) ) {
// Than we can force the usage of an iframe
if ( $this->get_option('force-iframe') == 'yes' ) {
// URL points to an image file
if ( $this->get_option('is-image') == 'yes' ) {
$return = sprintf('<a href="%s" target="blank"><img src="%s" /></a>', $value, $value);
// URL points to a content that is not an image
} else {
$iframeMininumHeight = '100%';
if (!empty($this->get_option('iframe-min-height')))
$iframeMininumHeight = $this->get_option('iframe-min-height');
// Creates an embed with responsive wrapper
$tainacan_embed = \Tainacan\Embed::get_instance();
$return = $tainacan_embed->add_responsive_wrapper( '<iframe src="' . $value . '" width="100%" height="' . $iframeMininumHeight . '" style="border:none;" allowfullscreen="' . ($this->get_option('iframe-allowfullscreen') == 'yes' ? 'true' : 'false') . '"></iframe>' );
}
// Or we can leave it as a link
} else {
$mkstr = preg_replace(
'/\[([^\]]+)\]\(([^\)]+)\)/',
'<a href="\2" target="_blank" title="\1">\1</a>',
$value
);
$return = $this->make_clickable_links($mkstr);
}
// If the autoembed did work, we pass the responsive wrapper to it
} else {
$tainacan_embed = \Tainacan\Embed::get_instance();
$return = $tainacan_embed->add_responsive_wrapper($embed);
}
}
return $return;
}
/**
* Checks if the value passed is a valid URL or markdown link
* @return boolean
*/
public function validate(\Tainacan\Entities\Item_Metadata_Entity $item_metadata) {
$value = $item_metadata->get_value();
//$reg_mrkd = '~\[(.+)\]\(([^ ]+)?\)~i';
$reg_url = '~^((www\.|http:\/\/www\.|http:\/\/|https:\/\/www\.|https:\/\/|ftp:\/\/www\.|ftp:\/\/|ftps:\/\/www\.|ftps:\/\/)[^"<\s]+)(?![^<>]*>|[^"]*?<\/a)$~i';
$reg_full = '~\[(.+)\]\((((www\.|http:\/\/www\.|http:\/\/|https:\/\/www\.|https:\/\/|ftp:\/\/www\.|ftp:\/\/|ftps:\/\/www\.|ftps:\/\/)[^"<\s]+)(?![^<>]*>|[^"]*?<\/a))?\)~i';
// Multivalued metadata --------------
if ( is_array($value) ) {
foreach ($value as $url_value) {
// Empty strings are valid
if ( !empty($url_value) ) {
$url_value = trim($url_value);
// If this seems to be a markdown link, we check if the url inside it is ok as well
if ( !preg_match($reg_url, $url_value) && !preg_match($reg_full, $url_value) ) {
$this->add_error( sprintf( __('"%s" is invalid. Please provide a valid, full URL or a Markdown link in the form of [label](url).', 'tainacan'), $url_value ) );
return false;
}
}
}
return true;
}
// Single valued metadata --------------
// Empty strings are valid
if ( !empty($value) ) {
$value = trim($value);
// If this seems to be a markdown link, we check if the url inside it is ok as well
if ( !preg_match($reg_url, $value) && !preg_match($reg_full, $value) ) {
$this->add_error( sprintf( __('"%s" is invalid. Please provide a valid, full URL or a Markdown link in the form of [label](url).', 'tainacan'), $value ) );
return false;
}
}
return true;
}
}
?>

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

@ -5,13 +5,13 @@
{{ $i18n.getHelperTitle('tainacan-user', 'default_author') }}<span>&nbsp;*&nbsp;</span> {{ $i18n.getHelperTitle('tainacan-user', 'default_author') }}<span>&nbsp;*&nbsp;</span>
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-user', 'default_author')" :title="$i18n.getHelperTitle('tainacan-user', 'default_author')"
:message="$i18n.getHelperMessage('tainacan-user', 'default_author')"/> :message="$i18n.getHelperMessage('tainacan-user', 'default_author')" />
</label> </label>
<b-checkbox <b-checkbox
v-model="defaultAuthor" v-model="defaultAuthor"
@input="onUpdateDefaultAuthor"
true-value="yes" true-value="yes"
false-value="no"> false-value="no"
@update:model-value="onUpdateDefaultAuthor">
{{ $i18n.get('label_default_author_user') }} {{ $i18n.get('label_default_author_user') }}
</b-checkbox> </b-checkbox>
</b-field> </b-field>
@ -23,6 +23,9 @@
props: { props: {
value: [ String, Object, Array ] value: [ String, Object, Array ]
}, },
emits: [
'update:value',
],
data() { data() {
return { return {
defaultAuthor: String defaultAuthor: String
@ -33,7 +36,7 @@
}, },
methods: { methods: {
onUpdateDefaultAuthor(value) { onUpdateDefaultAuthor(value) {
this.$emit('input', { default_author: value }); this.$emit('update:value', { default_author: value });
} }
} }
} }

31
src/views/admin/components/metadata-types/user/User.vue → src/views/admin/components/metadata-types/user/TainacanUser.vue
View File

@ -1,14 +1,12 @@
<template> <template>
<div :class="{ 'is-flex': itemMetadatum.metadatum.multiple != 'yes' || maxtags != undefined }"> <div :class="{ 'is-flex': itemMetadatum.metadatum.multiple != 'yes' || maxtags != undefined }">
<b-taginput <b-taginput
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
expanded expanded
:disabled="disabled" :disabled="disabled"
: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"
@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')"
autocomplete autocomplete
@ -22,12 +20,14 @@
:aria-close-label="$i18n.get('remove_value')" :aria-close-label="$i18n.get('remove_value')"
:class="{'has-selected': selected != undefined && selected != []}" :class="{'has-selected': selected != undefined && selected != []}"
field="name" field="name"
check-infinite-scroll
:has-counter="false"
@update:model-value="onInput"
@blur="onBlur"
@typing="search" @typing="search"
@focus="onMobileSpecialFocus" @focus="onMobileSpecialFocus"
check-infinite-scroll @infinite-scroll="searchMore">
@infinite-scroll="searchMore" <template #default="props">
:has-counter="false">
<template slot-scope="props">
<div class="media"> <div class="media">
<div <div
v-if="props.option.avatar_urls && props.option.avatar_urls['24']" v-if="props.option.avatar_urls && props.option.avatar_urls['24']"
@ -43,7 +43,7 @@
</template> </template>
<template <template
v-if="!isLoading" v-if="!isLoading"
slot="empty"> #empty>
{{ $i18n.get('info_no_user_found') }} {{ $i18n.get('info_no_user_found') }}
</template> </template>
</b-taginput> </b-taginput>
@ -51,7 +51,7 @@
</template> </template>
<script> <script>
import { wp as wpAxios } from '../../../js/axios'; import { wpApi } from '../../../js/axios';
import { mapActions } from 'vuex'; import { mapActions } from 'vuex';
import qs from 'qs'; import qs from 'qs';
@ -63,6 +63,11 @@ export default {
allowNew: true, allowNew: true,
isLastMetadatum: false isLastMetadatum: false
}, },
emits: [
'update:value',
'blur',
'mobile-special-focus'
],
data() { data() {
return { return {
selected:[], selected:[],
@ -93,7 +98,7 @@ export default {
]), ]),
onInput(newSelected) { onInput(newSelected) {
this.selected = newSelected; this.selected = newSelected;
this.$emit('input', newSelected.map((user) => user.id || user.value)); this.$emit('update:value', newSelected.map((user) => user.id || user.value));
}, },
onBlur() { onBlur() {
this.$emit('blur'); this.$emit('blur');
@ -105,7 +110,7 @@ export default {
let query = qs.stringify({ include: this.itemMetadatum.value }); let query = qs.stringify({ include: this.itemMetadatum.value });
let endpoint = '/users/'; let endpoint = '/users/';
wpAxios.get(endpoint + '?' + query) wpApi.get(endpoint + '?' + query)
.then((res) => { .then((res) => {
for (let user of res.data) { for (let user of res.data) {
this.selected.push({ this.selected.push({
@ -175,7 +180,7 @@ export default {
this.search(this.usersSearchQuery) this.search(this.usersSearchQuery)
}, 250), }, 250),
onMobileSpecialFocus() { onMobileSpecialFocus() {
this.$emit('mobileSpecialFocus'); this.$emit('mobile-special-focus');
} }
} }
} }

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

@ -1,11 +1,11 @@
<template> <template>
<div <div
ref="activityDetailsModal"
autofocus autofocus
role="dialog" role="dialog"
class="tainacan-modal-content" class="tainacan-modal-content"
tabindex="-1" tabindex="-1"
aria-modal aria-modal>
ref="activityDetailsModal">
<header <header
v-if="!isLoadingActivity" v-if="!isLoadingActivity"
class="tainacan-modal-title"> class="tainacan-modal-title">
@ -14,14 +14,16 @@
<p>{{ activityCreationDate + ', ' + $i18n.get('info_by_inner') }} <strong> {{ activity.user_name }}</strong></p> <p>{{ activityCreationDate + ', ' + $i18n.get('info_by_inner') }} <strong> {{ activity.user_name }}</strong></p>
</header> </header>
<b-loading <b-loading
:is-full-page="false" v-model="isLoadingActivity"
:active.sync="isLoadingActivity" :is-full-page="false"
:can-cancel="false"/> :can-cancel="false" />
<div <div
v-if="!isLoadingActivity" v-if="!isLoadingActivity"
class="modal-card-body"> class="modal-card-body">
<div class="content"> <div class="content">
<p v-if="activity.description"><strong>{{ $i18n.get('label_activity_description') }}:</strong> {{ activity.description }}</p> <p v-if="activity.description">
<strong>{{ $i18n.get('label_activity_description') }}:</strong> {{ activity.description }}
</p>
<p v-if="activity.object"> <p v-if="activity.object">
<strong>{{ $i18n.get('label_related_to') }}: </strong> <strong>{{ $i18n.get('label_related_to') }}: </strong>
<span v-html="relatedToLink" /> <span v-html="relatedToLink" />
@ -30,229 +32,226 @@
<!-- LEGACY LOG API RETURN --> <!-- LEGACY LOG API RETURN -->
<div v-if="activity.legacy != undefined && activity.legacy == true"> <div v-if="activity.legacy != undefined && activity.legacy == true">
<template v-for="(diff, attributeName, index) in activity.log_diffs"> <div
<div v-for="(diff, attributeName, index) in activity.log_diffs"
:key="index" :key="index"
class="columns"> class="columns">
<!-- OLD --> <!-- OLD -->
<div class="column is-6"> <div class="column is-6">
<!-- Thumbnail -->
<div
class="content"
v-if="attributeName == 'thumbnail'">
<p class="is-capitalized has-text-blue5 has-text-weight-bold">
{{ attributeName }}
<small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_before')})` }}</small>
</p>
<div>
<picture>
<img
width="150px"
:src="diff.old ? diff.old : $thumbHelper.getEmptyThumbnailPlaceholder()"
:alt="attributeName">
</picture>
</div>
</div>
<div
v-if="attributeName == 'attachments'"
class="content">
<p class="is-capitalized has-text-blue5 has-text-weight-bold">
{{ attributeName }}
<small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_before')})` }}</small>
</p>
<div
class="tainacan-attachments-in-modal"
v-if="diff.old.length">
<template v-for="(attachment, anotherIndex) in diff.old">
<file-item
:key="anotherIndex"
:modal-on-click="false"
:show-name="true"
:file="{
title: attachment.title ,
thumbnails: { 'tainacan-medium': [ attachment.url ] },
mime_type: attachment.mime_type,
media_type: attachment.mime_type.includes('image') ? 'image' : 'other'
}"/>
</template>
</div>
<div v-else>
<p>{{ infoEmpty }}</p>
</div>
</div>
<div
class="content"
v-if="!['thumbnail', 'attachments'].includes(attributeName)">
<p class="is-capitalized has-text-blue5 has-text-weight-bold">
{{ attributeName.replace(/_/g, ' ') }}
<small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_before')})` }}</small>
</p>
<!-- Is array with length 1 -->
<p
class="tainacan-p-break"
v-if="(diff.old instanceof Array) &&
(diff.old.length == 1) &&
!(diff.old[0] instanceof Object)">
{{ diff.old.toString() }}
</p>
<div
v-else-if="attributeName == 'metadata_order'"
class="content">
<p
class="tainacan-p-break"
v-for="(diffContent, diffTitle) in diff.old"
:key="diffTitle">
{{ diff.old ? `ID: ${diffContent.id} | Enabled: ${diffContent.enabled}` : infoEmpty }}
</p>
</div>
<div
v-else-if="attributeName == 'filters_order'"
class="content">
<p
class="tainacan-p-break"
v-for="(diffContent, diffTitle) in diff.old"
:key="diffTitle">
{{ diff.old ? `ID: ${diffContent.id} | Enabled: ${diffContent.enabled}` : infoEmpty }}
</p>
</div>
<div
v-else-if="attributeName == 'metadata_type_options'"
class="content">
<p class="tainacan-p-break">
{{ diff.old ?
`Taxonomy ID: ${diff.old.taxonomy_id};
Input type: ${diff.old.input_type};
Allow new terms: ${diff.old.allow_new_terms}` : infoEmpty }}
</p>
</div>
<!-- -->
<p
class="tainacan-p-break"
v-else>
{{ diff.old ? (diff.old instanceof Array && !diff.old.length) ? infoEmpty : diff.old.toString().replace(/,/g, ' ') : infoEmpty }}
</p>
<!-- Thumbnail -->
<div
v-if="attributeName == 'thumbnail'"
class="content">
<p class="is-capitalized has-text-blue5 has-text-weight-bold">
{{ attributeName }}
<small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_before')})` }}</small>
</p>
<div>
<picture>
<img
width="150px"
:src="diff.old ? diff.old : $thumbHelper.getEmptyThumbnailPlaceholder()"
:alt="attributeName">
</picture>
</div> </div>
</div> </div>
<!-- NEW --> <div
<div class="column is-6"> v-if="attributeName == 'attachments'"
class="content">
<!-- Thumbnail --> <p class="is-capitalized has-text-blue5 has-text-weight-bold">
{{ attributeName }}
<small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_before')})` }}</small>
</p>
<div <div
class="content" v-if="diff.old.length"
v-if="attributeName == 'thumbnail'"> class="tainacan-attachments-in-modal">
<p class="is-capitalized has-text-blue5 has-text-weight-bold"> <file-item
{{ attributeName }} v-for="(attachment, anotherIndex) in diff.old"
<small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_after')})` }}</small> :key="anotherIndex"
</p> :modal-on-click="false"
<div> :show-name="true"
<picture> :file="{
<img title: attachment.title ,
width="150px" thumbnails: { 'tainacan-medium': [ attachment.url ] },
:src="diff.new ? diff.new : $thumbHelper.getEmptyThumbnailPlaceholder()" mime_type: attachment.mime_type,
:alt="attributeName"> media_type: attachment.mime_type.includes('image') ? 'image' : 'other'
</picture> }" />
</div>
</div> </div>
<div v-else>
<p>{{ infoEmpty }}</p>
</div>
</div>
<div
v-if="!['thumbnail', 'attachments'].includes(attributeName)"
class="content">
<p class="is-capitalized has-text-blue5 has-text-weight-bold">
{{ attributeName.replace(/_/g, ' ') }}
<small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_before')})` }}</small>
</p>
<!-- Is array with length 1 -->
<p
v-if="(diff.old instanceof Array) &&
(diff.old.length == 1) &&
!(diff.old[0] instanceof Object)"
class="tainacan-p-break">
{{ diff.old.toString() }}
</p>
<div <div
v-if="attributeName == 'attachments'" v-else-if="attributeName == 'metadata_order'"
class="content"> class="content">
<p class="is-capitalized has-text-blue5 has-text-weight-bold"> <p
{{ attributeName }} v-for="(diffContent, diffTitle) in diff.old"
<small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_after')})` }}</small> :key="diffTitle"
class="tainacan-p-break">
{{ diff.old ? `ID: ${diffContent.id} | Enabled: ${diffContent.enabled}` : infoEmpty }}
</p> </p>
<div
class="tainacan-attachments-in-modal"
v-if="diff.new.length">
<template v-for="(attachment, attachmentIndex) in diff.new">
<file-item
:key="attachmentIndex"
:modal-on-click="false"
:show-name="true"
:file="{
title: attachment.title,
thumbnails: { 'tainacan-medium': [ attachment.url ] },
mime_type: attachment.mime_type,
media_type: attachment.mime_type.includes('image') ? 'image' : 'other'
}"/>
</template>
</div>
<div v-else>
<p>{{ infoEmpty }}</p>
</div>
</div> </div>
<div <div
class="content" v-else-if="attributeName == 'filters_order'"
v-if="!['thumbnail', 'attachments'].includes(attributeName)"> class="content">
<p class="is-capitalized has-text-blue5 has-text-weight-bold">
{{ attributeName.replace(/_/g, ' ') }}
<small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_after')})` }}</small>
</p>
<!-- Is array with length 1 -->
<p <p
class="tainacan-p-break" v-for="(diffContent, diffTitle) in diff.old"
v-if="(diff.new instanceof Array) && :key="diffTitle"
(diff.new.length == 1) && class="tainacan-p-break">
!(diff.new[0] instanceof Object)"> {{ diff.old ? `ID: ${diffContent.id} | Enabled: ${diffContent.enabled}` : infoEmpty }}
{{ diff.new.toString() }}
</p> </p>
<div
v-else-if="attributeName == 'metadata_order'"
class="content">
<p
class="tainacan-p-break"
v-for="(diffContent, diffTitle) in diff.new"
:key="diffTitle">
{{ `ID: ${diffContent.id} | Enabled: ${diffContent.enabled}` }}
</p>
</div>
<div
v-else-if="attributeName == 'filters_order'"
class="content">
<p
class="tainacan-p-break"
v-for="(diffContent, diffTitle) in diff.new"
:key="diffTitle">
{{ `ID: ${diffContent.id} | Enabled: ${diffContent.enabled}` }}
</p>
</div>
<div
v-else-if="attributeName == 'metadata_type_options'"
class="content">
<p class="tainacan-p-break">
{{ `Taxonomy ID: ${diff.new.taxonomy_id};
Input type: ${diff.new.input_type};
Allow new terms: ${diff.new.allow_new_terms}` }}
</p>
</div>
<!-- -->
<p
class="tainacan-p-break"
v-else>
{{ diff.new ? (diff.new instanceof Array && !diff.new.length) ? infoEmpty : diff.new.toString().replace(/,/g, ' ') : infoEmpty }}
</p>
</div> </div>
<div
v-else-if="attributeName == 'metadata_type_options'"
class="content">
<p class="tainacan-p-break">
{{ diff.old ?
`Taxonomy ID: ${diff.old.taxonomy_id};
Input type: ${diff.old.input_type};
Allow new terms: ${diff.old.allow_new_terms}` : infoEmpty }}
</p>
</div>
<!-- -->
<p
v-else
class="tainacan-p-break">
{{ diff.old ? (diff.old instanceof Array && !diff.old.length) ? infoEmpty : diff.old.toString().replace(/,/g, ' ') : infoEmpty }}
</p>
</div> </div>
</div> </div>
</template>
<!-- NEW -->
<div class="column is-6">
<!-- Thumbnail -->
<div
v-if="attributeName == 'thumbnail'"
class="content">
<p class="is-capitalized has-text-blue5 has-text-weight-bold">
{{ attributeName }}
<small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_after')})` }}</small>
</p>
<div>
<picture>
<img
width="150px"
:src="diff.new ? diff.new : $thumbHelper.getEmptyThumbnailPlaceholder()"
:alt="attributeName">
</picture>
</div>
</div>
<div
v-if="attributeName == 'attachments'"
class="content">
<p class="is-capitalized has-text-blue5 has-text-weight-bold">
{{ attributeName }}
<small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_after')})` }}</small>
</p>
<div
v-if="diff.new.length"
class="tainacan-attachments-in-modal">
<file-item
v-for="(attachment, attachmentIndex) in diff.new"
:key="attachmentIndex"
:modal-on-click="false"
:show-name="true"
:file="{
title: attachment.title,
thumbnails: { 'tainacan-medium': [ attachment.url ] },
mime_type: attachment.mime_type,
media_type: attachment.mime_type.includes('image') ? 'image' : 'other'
}" />
</div>
<div v-else>
<p>{{ infoEmpty }}</p>
</div>
</div>
<div
v-if="!['thumbnail', 'attachments'].includes(attributeName)"
class="content">
<p class="is-capitalized has-text-blue5 has-text-weight-bold">
{{ attributeName.replace(/_/g, ' ') }}
<small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_after')})` }}</small>
</p>
<!-- Is array with length 1 -->
<p
v-if="(diff.new instanceof Array) &&
(diff.new.length == 1) &&
!(diff.new[0] instanceof Object)"
class="tainacan-p-break">
{{ diff.new.toString() }}
</p>
<div
v-else-if="attributeName == 'metadata_order'"
class="content">
<p
v-for="(diffContent, diffTitle) in diff.new"
:key="diffTitle"
class="tainacan-p-break">
{{ `ID: ${diffContent.id} | Enabled: ${diffContent.enabled}` }}
</p>
</div>
<div
v-else-if="attributeName == 'filters_order'"
class="content">
<p
v-for="(diffContent, diffTitle) in diff.new"
:key="diffTitle"
class="tainacan-p-break">
{{ `ID: ${diffContent.id} | Enabled: ${diffContent.enabled}` }}
</p>
</div>
<div
v-else-if="attributeName == 'metadata_type_options'"
class="content">
<p class="tainacan-p-break">
{{ `Taxonomy ID: ${diff.new.taxonomy_id};
Input type: ${diff.new.input_type};
Allow new terms: ${diff.new.allow_new_terms}` }}
</p>
</div>
<!-- -->
<p
v-else
class="tainacan-p-break">
{{ diff.new ? (diff.new instanceof Array && !diff.new.length) ? infoEmpty : diff.new.toString().replace(/,/g, ' ') : infoEmpty }}
</p>
</div>
</div>
</div>
</div> </div>
<!-- NEW LOG API RETURN --> <!-- NEW LOG API RETURN -->
@ -264,7 +263,7 @@
<div <div
v-if="activity.action == 'update-thumbnail'" v-if="activity.action == 'update-thumbnail'"
class="content"> class="content">
<p class="is-capitalized has-text-blue5 has-text-weight-bold"> <p class="is-capitalized has-text-blue5 has-text-weight-bold">
{{ $i18n.get('label_thumbnail') }} {{ $i18n.get('label_thumbnail') }}
<small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_before')})` }}</small> <small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_before')})` }}</small>
</p> </p>
@ -274,9 +273,11 @@
<img <img
style="margin: 12px 0; max-width: 150px;" style="margin: 12px 0; max-width: 150px;"
:alt="$i18n.get('label_thumbnail')" :alt="$i18n.get('label_thumbnail')"
:src="activity.old_value.thumb[0]" > :src="activity.old_value.thumb[0]">
</p>
<p v-else>
{{ infoEmpty }}
</p> </p>
<p v-else>{{ infoEmpty }}</p>
</div> </div>
<div <div
@ -295,7 +296,7 @@
thumbnails: { 'tainacan-medium': [ activity.old_value.url ] }, thumbnails: { 'tainacan-medium': [ activity.old_value.url ] },
mime_type: activity.old_value.mime_type, mime_type: activity.old_value.mime_type,
media_type: activity.old_value.mime_type.includes('image') ? 'image' : 'other' media_type: activity.old_value.mime_type.includes('image') ? 'image' : 'other'
}"/> }" />
</div> </div>
<div v-else> <div v-else>
<p>{{ infoEmpty }}</p> <p>{{ infoEmpty }}</p>
@ -310,29 +311,29 @@
<small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_before')})` }}</small> <small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_before')})` }}</small>
</p> </p>
<div <div
:key="index" v-for="(attributeValue, attributeName, index) of activity.old_value"
v-for="(attributeValue, attributeName, index) of activity.old_value"> :key="index">
<p <p
v-if="attributeName == 'thumb' && attributeValue[0]" v-if="attributeName == 'thumb' && attributeValue[0]"
class="tainacan-p-break"> class="tainacan-p-break">
<img <img
style="margin: 12px 0; max-width: 150px;" style="margin: 12px 0; max-width: 150px;"
:alt="$i18n.get('label_document')" :alt="$i18n.get('label_document')"
:src="attributeValue[0]" > :src="attributeValue[0]">
</p> </p>
<p <p
v-else v-else
v-html="`<strong>` + attributeName + `: </strong>` + (attributeValue ? attributeValue : infoEmpty)" class="tainacan-p-break"
class="tainacan-p-break" /> v-html="`<strong>` + attributeName + `: </strong>` + (attributeValue ? attributeValue : infoEmpty)" />
</div> </div>
</div> </div>
<div <div
class="content" v-if="activity.action == 'update-metadata-order' || activity.action == 'update-filters-order'"
v-if="activity.action == 'update-metadata-order' || activity.action == 'update-filters-order'"> class="content">
<div <div
:key="index" v-for="(attributeValue, attributeName, index) in activity.old_value"
v-for="(attributeValue, attributeName, index) in activity.old_value"> :key="index">
<p class="is-capitalized has-text-blue5 has-text-weight-bold"> <p class="is-capitalized has-text-blue5 has-text-weight-bold">
{{ attributeName }} {{ attributeName }}
<small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_before')})` }}</small> <small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_before')})` }}</small>
@ -340,20 +341,20 @@
<div class="content"> <div class="content">
<p <p
class="tainacan-p-break"
v-for="(diffContent, diffTitle) in attributeValue" v-for="(diffContent, diffTitle) in attributeValue"
:key="diffTitle" :key="diffTitle"
class="tainacan-p-break"
v-html="attributeValue ? `ID: ${diffContent.id} <span class='is-italic'>(${diffContent.enabled ? $i18n.get('label_enabled') : $i18n.get('label_disabled')})</span>` : infoEmpty " /> v-html="attributeValue ? `ID: ${diffContent.id} <span class='is-italic'>(${diffContent.enabled ? $i18n.get('label_enabled') : $i18n.get('label_disabled')})</span>` : infoEmpty " />
</div> </div>
</div> </div>
</div> </div>
<div <div
class="content" v-if="activity.action == 'update'"
v-if="activity.action == 'update'"> class="content">
<div <div
:key="index" v-for="(attributeValue, attributeName, index) in activity.old_value"
v-for="(attributeValue, attributeName, index) in activity.old_value"> :key="index">
<p class="is-capitalized has-text-blue5 has-text-weight-bold"> <p class="is-capitalized has-text-blue5 has-text-weight-bold">
{{ attributeName }} {{ attributeName }}
<small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_before')})` }}</small> <small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_before')})` }}</small>
@ -361,10 +362,10 @@
<!-- Is array with length 1 --> <!-- Is array with length 1 -->
<p <p
class="tainacan-p-break"
v-if="(attributeValue instanceof Array) && v-if="(attributeValue instanceof Array) &&
(attributeValue.length == 1) && (attributeValue.length == 1) &&
!(attributeValue[0] instanceof Object)"> !(attributeValue[0] instanceof Object)"
class="tainacan-p-break">
{{ attributeValue.toString() }} {{ attributeValue.toString() }}
</p> </p>
@ -372,8 +373,8 @@
v-else-if="attributeName == 'metadata_type_options'" v-else-if="attributeName == 'metadata_type_options'"
class="content"> class="content">
<p <p
:key="innerIndex"
v-for="(innerValue, innerName, innerIndex) of attributeValue" v-for="(innerValue, innerName, innerIndex) of attributeValue"
:key="innerIndex"
class="tainacan-p-break"> class="tainacan-p-break">
<strong>{{ innerName + ': ' }}</strong>{{ innerValue ? innerValue : infoEmpty }} <strong>{{ innerName + ': ' }}</strong>{{ innerValue ? innerValue : infoEmpty }}
<br> <br>
@ -381,22 +382,22 @@
</div> </div>
<p <p
class="tainacan-p-break"
v-else v-else
class="tainacan-p-break"
v-html="(!attributeValue || (attributeValue instanceof Array && !attributeValue.length)) ? infoEmpty : (attributeValue instanceof Array ? attributeValue.join(`<span class='multivalue-separator'>|</span>`) : attributeValue)" /> v-html="(!attributeValue || (attributeValue instanceof Array && !attributeValue.length)) ? infoEmpty : (attributeValue instanceof Array ? attributeValue.join(`<span class='multivalue-separator'>|</span>`) : attributeValue)" />
</div> </div>
</div> </div>
<div <div
class="content" v-if="activity.action == 'update-metadata-value'"
v-if="activity.action == 'update-metadata-value'"> class="content">
<p class="is-capitalized has-text-blue5 has-text-weight-bold"> <p class="is-capitalized has-text-blue5 has-text-weight-bold">
{{ activity.metadata && activity.metadata.name ? activity.metadata.name : $i18n.get('metadatum') }} {{ activity.metadata && activity.metadata.name ? activity.metadata.name : $i18n.get('metadatum') }}
<small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_before')})` }}</small> <small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_before')})` }}</small>
</p> </p>
<p <p
class="tainacan-p-break" class="tainacan-p-break"
v-html="!activity.old_value ? infoEmpty : (activity.old_value instanceof Array ? activity.old_value.join(`<span class='multivalue-separator'>|</span>`) : activity.old_value)" /> v-html="!activity.old_value ? infoEmpty : (activity.old_value instanceof Array ? activity.old_value.join(`<span class='multivalue-separator'>|</span>`) : activity.old_value)" />
</div> </div>
</div> </div>
@ -406,7 +407,7 @@
<div <div
v-if="activity.action == 'update-thumbnail'" v-if="activity.action == 'update-thumbnail'"
class="content"> class="content">
<p class="is-capitalized has-text-blue5 has-text-weight-bold"> <p class="is-capitalized has-text-blue5 has-text-weight-bold">
{{ $i18n.get('label_thumbnail') }} {{ $i18n.get('label_thumbnail') }}
<small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_after')})` }}</small> <small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_after')})` }}</small>
</p> </p>
@ -416,9 +417,11 @@
<img <img
style="margin: 12px 0; max-width: 150px;" style="margin: 12px 0; max-width: 150px;"
:alt="$i18n.get('label_thumbnail')" :alt="$i18n.get('label_thumbnail')"
:src="activity.new_value.thumb[0]" > :src="activity.new_value.thumb[0]">
</p>
<p v-else>
{{ infoEmpty }}
</p> </p>
<p v-else>{{ infoEmpty }}</p>
</div> </div>
<div <div
@ -437,7 +440,7 @@
thumbnails: { 'tainacan-medium': [ activity.new_value.url ] }, thumbnails: { 'tainacan-medium': [ activity.new_value.url ] },
mime_type: activity.new_value.mime_type, mime_type: activity.new_value.mime_type,
media_type: activity.new_value.mime_type.includes('image') ? 'image' : 'other' media_type: activity.new_value.mime_type.includes('image') ? 'image' : 'other'
}"/> }" />
</div> </div>
<div v-else> <div v-else>
<p>{{ infoEmpty }}</p> <p>{{ infoEmpty }}</p>
@ -452,29 +455,29 @@
<small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_after')})` }}</small> <small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_after')})` }}</small>
</p> </p>
<div <div
:key="index" v-for="(attributeValue, attributeName, index) of activity.new_value"
v-for="(attributeValue, attributeName, index) of activity.new_value"> :key="index">
<p <p
v-if="attributeName == 'thumb' && attributeValue[0]" v-if="attributeName == 'thumb' && attributeValue[0]"
class="tainacan-p-break"> class="tainacan-p-break">
<img <img
style="margin: 12px 0; max-width: 150px;" style="margin: 12px 0; max-width: 150px;"
:alt="$i18n.get('label_document')" :alt="$i18n.get('label_document')"
:src="attributeValue[0]" > :src="attributeValue[0]">
</p> </p>
<p <p
v-else v-else
v-html="`<strong>` + attributeName + `: </strong>` + (attributeValue ? attributeValue : infoEmpty)" class="tainacan-p-break"
class="tainacan-p-break" /> v-html="`<strong>` + attributeName + `: </strong>` + (attributeValue ? attributeValue : infoEmpty)" />
</div> </div>
</div> </div>
<div <div
class="content" v-if="activity.action == 'update-metadata-order' || activity.action == 'update-filters-order'"
v-if="activity.action == 'update-metadata-order' || activity.action == 'update-filters-order'"> class="content">
<div <div
:key="index" v-for="(attributeValue, attributeName, index) in activity.new_value"
v-for="(attributeValue, attributeName, index) in activity.new_value"> :key="index">
<p class="is-capitalized has-text-blue5 has-text-weight-bold"> <p class="is-capitalized has-text-blue5 has-text-weight-bold">
{{ attributeName }} {{ attributeName }}
<small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_after')})` }}</small> <small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_after')})` }}</small>
@ -482,20 +485,20 @@
<div class="content"> <div class="content">
<p <p
class="tainacan-p-break"
v-for="(diffContent, diffTitle) in attributeValue" v-for="(diffContent, diffTitle) in attributeValue"
:key="diffTitle" :key="diffTitle"
class="tainacan-p-break"
v-html="attributeValue ? `ID: ${diffContent.id} <span class='is-italic'>(${diffContent.enabled ? $i18n.get('label_enabled') : $i18n.get('label_disabled')})</span>` : infoEmpty " /> v-html="attributeValue ? `ID: ${diffContent.id} <span class='is-italic'>(${diffContent.enabled ? $i18n.get('label_enabled') : $i18n.get('label_disabled')})</span>` : infoEmpty " />
</div> </div>
</div> </div>
</div> </div>
<div <div
:key="index" v-for="(attributeValue, attributeName, index) in activity.new_value"
v-for="(attributeValue, attributeName, index) in activity.new_value"> :key="index">
<div <div
class="content" v-if="activity.action == 'update'"
v-if="activity.action == 'update'"> class="content">
<p class="is-capitalized has-text-blue5 has-text-weight-bold"> <p class="is-capitalized has-text-blue5 has-text-weight-bold">
{{ attributeName }} {{ attributeName }}
<small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_after')})` }}</small> <small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_after')})` }}</small>
@ -505,8 +508,8 @@
v-if="attributeName == 'metadata_type_options'" v-if="attributeName == 'metadata_type_options'"
class="content"> class="content">
<p <p
:key="innerIndex"
v-for="(innerValue, innerName, innerIndex) of attributeValue" v-for="(innerValue, innerName, innerIndex) of attributeValue"
:key="innerIndex"
class="tainacan-p-break"> class="tainacan-p-break">
<strong>{{ innerName + ': ' }}</strong>{{ innerValue ? innerValue : infoEmpty }} <strong>{{ innerName + ': ' }}</strong>{{ innerValue ? innerValue : infoEmpty }}
<br> <br>
@ -520,30 +523,30 @@
{{ attributeValue ? attributeValue : infoEmpty }} {{ attributeValue ? attributeValue : infoEmpty }}
<br> <br>
<img <img
style="margin: 12px 0; max-width: 160px;"
v-if="activity.terms && activity.terms.header_image" v-if="activity.terms && activity.terms.header_image"
style="margin: 12px 0; max-width: 160px;"
:alt="$i18n.get('label_header_image')" :alt="$i18n.get('label_header_image')"
:src="activity.terms.header_image" > :src="activity.terms.header_image">
</p> </p>
</div> </div>
<p <p
class="tainacan-p-break"
v-else v-else
class="tainacan-p-break"
v-html="(!attributeValue || (attributeValue instanceof Array && !attributeValue.length)) ? infoEmpty : (attributeValue instanceof Array ? attributeValue.join(`<span class='multivalue-separator'>|</span>`) : attributeValue)" /> v-html="(!attributeValue || (attributeValue instanceof Array && !attributeValue.length)) ? infoEmpty : (attributeValue instanceof Array ? attributeValue.join(`<span class='multivalue-separator'>|</span>`) : attributeValue)" />
</div> </div>
</div> </div>
<div <div
class="content" v-if="activity.action == 'update-metadata-value'"
v-if="activity.action == 'update-metadata-value'"> class="content">
<p class="is-capitalized has-text-blue5 has-text-weight-bold"> <p class="is-capitalized has-text-blue5 has-text-weight-bold">
{{ activity.metadata && activity.metadata.name ? activity.metadata.name : $i18n.get('metadatum') }} {{ activity.metadata && activity.metadata.name ? activity.metadata.name : $i18n.get('metadatum') }}
<small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_after')})` }}</small> <small class="has-text-gray4 has-text-weight-normal"> {{ `(${$i18n.get('info_logs_after')})` }}</small>
</p> </p>
<p <p
class="tainacan-p-break" class="tainacan-p-break"
v-html="!activity.new_value ? infoEmpty : (activity.new_value instanceof Array ? activity.new_value.join(`<span class='multivalue-separator'>|</span>`) : activity.new_value)" /> v-html="!activity.new_value ? infoEmpty : (activity.new_value instanceof Array ? activity.new_value.join(`<span class='multivalue-separator'>|</span>`) : activity.new_value)" />
</div> </div>
</div> </div>
</div> </div>
@ -554,51 +557,9 @@
<button <button
class="button is-outlined" class="button is-outlined"
type="button" type="button"
@click="$parent.close()"> @click="$emit('close')">
{{ $i18n.get('close') }} {{ $i18n.get('close') }}
</button> </button>
<div class="buttons is-pulled-right">
<!--<button-->
<!--v-if="activity.status != 'publish'"-->
<!--@click="notApproveActivity"-->
<!--type="button"-->
<!--class="button is-danger">-->
<!--<b-icon-->
<!--size="is-small"-->
<!--icon="close"/>-->
<!--<span>{{ $i18n.get('not_approve_item') }}</span>-->
<!--</button>-->
<!--<button-->
<!--v-if="activity.status != 'publish'"-->
<!--@click="approveActivity"-->
<!--type="button"-->
<!--class="button is-secondary">-->
<!--<b-icon-->
<!--size="is-small"-->
<!--icon="check"/>-->
<!--<span>{{ $i18n.get('approve_item') }}</span>-->
<!--</button>-->
<!--<button-->
<!--v-if="activity.status == 'publish'"-->
<!--@click="notApproveActivity"-->
<!--type="button"-->
<!--class="button is-blue5">-->
<!--<b-icon-->
<!--custom-class="mdi-flip-h"-->
<!--size="is-small"-->
<!--icon="share"/>-->
<!--<span>{{ $i18n.get('undo') }}</span>-->
<!--</button>-->
<!-- <button
v-if="activity.status == 'publish'"
@click="$parent.close()"
type="button"
class="button is-secondary">
<span>OK</span>
</button> -->
</div>
</div> </div>
</footer> </footer>
</div> </div>
@ -615,8 +576,13 @@
FileItem FileItem
}, },
props: { props: {
activityId: String activityId: Number
}, },
emits: [
'approveActivity',
'notApproveActivity',
'close'
],
data() { data() {
return { return {
infoEmpty: `[ ${this.$i18n.get('info_empty').toLowerCase()} ]`, infoEmpty: `[ ${this.$i18n.get('info_empty').toLowerCase()} ]`,
@ -666,9 +632,12 @@
} }
}, },
watch: { watch: {
'$route' (to, from) { '$route': {
if (to !== from) handler(to, from) {
this.$parent.close(); if (to !== from)
this.$emit('close');
},
deep: true
} }
}, },
created() { created() {

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

@ -1,12 +1,12 @@
<template> <template>
<form <form
ref="availableExportersModal"
action="" action=""
autofocus autofocus
role="dialog" role="dialog"
class="tainacan-modal-content" class="tainacan-modal-content"
tabindex="-1" tabindex="-1"
aria-modal aria-modal>
ref="availableExportersModal">
<div style="width: auto"> <div style="width: auto">
<header class="tainacan-modal-title"> <header class="tainacan-modal-title">
<h2>{{ $i18n.get('exporters') }}</h2> <h2>{{ $i18n.get('exporters') }}</h2>
@ -18,12 +18,13 @@
<div <div
role="list" role="list"
class="exporter-types-container"> class="exporter-types-container">
<template v-for="exporterType in availableExporters"> <template
v-for="exporterType in availableExporters"
:key="exporterType.slug">
<div <div
v-if="!(hideWhenManualCollection && !exporterType.manual_collection)"
role="listitem" role="listitem"
class="exporter-type" class="exporter-type"
:key="exporterType.slug"
v-if="!(hideWhenManualCollection && !exporterType.manual_collection)"
@click="onSelectExporter(exporterType)"> @click="onSelectExporter(exporterType)">
<h4>{{ exporterType.name }}</h4> <h4>{{ exporterType.name }}</h4>
<p>{{ exporterType.description }}</p> <p>{{ exporterType.description }}</p>
@ -36,14 +37,14 @@
id="button-cancel-exporter-selection" id="button-cancel-exporter-selection"
class="button is-outlined" class="button is-outlined"
type="button" type="button"
@click="$parent.close();"> @click="$emit('close');">
{{ $i18n.get('cancel') }}</button> {{ $i18n.get('cancel') }}</button>
</div> </div>
</footer> </footer>
<b-loading <b-loading
:active.sync="isLoading" v-model="isLoading"
:can-cancel="false"/> :can-cancel="false" />
</section> </section>
</div> </div>
</form> </form>
@ -55,9 +56,12 @@
export default { export default {
name: 'AvailableExportersModal', name: 'AvailableExportersModal',
props: { props: {
sourceCollection: String, sourceCollection: [Number,String],
hideWhenManualCollection: false hideWhenManualCollection: false
}, },
emits: [
'close'
],
data(){ data(){
return { return {
availableExporters: [], availableExporters: [],
@ -84,7 +88,7 @@
]), ]),
onSelectExporter(exporterType) { onSelectExporter(exporterType) {
this.$router.push({ path: this.$routerHelper.getExporterEditionPath(exporterType.slug), query: { sourceCollection: this.sourceCollection } }); this.$router.push({ path: this.$routerHelper.getExporterEditionPath(exporterType.slug), query: { sourceCollection: this.sourceCollection } });
this.$parent.close(); this.$emit('close');
} }
} }
} }

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

@ -1,28 +1,29 @@
<template> <template>
<form <form
ref="availableImportersModal"
action="" action=""
autofocus autofocus
role="dialog" role="dialog"
class="tainacan-modal-content" class="tainacan-modal-content"
tabindex="-1" tabindex="-1"
aria-modal aria-modal>
ref="availableImportersModal">
<div style="width: auto"> <div style="width: auto">
<header class="tainacan-modal-title"> <header class="tainacan-modal-title">
<h2>{{ $i18n.get('importers') }}</h2> <h2>{{ $i18n.get('importers') }}</h2>
<hr> <hr>
</header> </header>
<section class="tainacan-form"> <section class="tainacan-form">
<p>{{ $i18n.get('instruction_select_an_importer_type') }}</p> <p>{{ $i18n.get('instruction_select_an_importer_type') }}</p>
<div <div
role="list" role="list"
class="importer-types-container"> class="importer-types-container">
<template v-for="importerType in availableImporters"> <template
v-for="importerType in availableImporters"
:key="importerType.slug">
<div <div
v-if="!(hideWhenManualCollection && !importerType.manual_collection)"
role="listitem" role="listitem"
class="importer-type" class="importer-type"
:key="importerType.slug"
v-if="!(hideWhenManualCollection && !importerType.manual_collection)"
@click="onSelectImporter(importerType)"> @click="onSelectImporter(importerType)">
<h4>{{ importerType.name }}</h4> <h4>{{ importerType.name }}</h4>
<p>{{ importerType.description }}</p> <p>{{ importerType.description }}</p>
@ -30,17 +31,17 @@
</template> </template>
<b-loading <b-loading
:is-full-page="false" v-model="isLoading"
:active.sync="isLoading" :is-full-page="false"
:can-cancel="false"/> :can-cancel="false" />
</div> </div>
<footer class="field is-grouped form-submit"> <footer class="field is-grouped form-submit">
<div class="control"> <div class="control">
<button <button
class="button is-outlined" class="button is-outlined"
type="button" type="button"
@click="$parent.close()">Close</button> @click="$emit('close')">Close</button>
</div> </div>
<!-- <div class="control"> <!-- <div class="control">
<button class="button is-success">Confirm</button> <button class="button is-success">Confirm</button>
@ -60,6 +61,9 @@ export default {
targetCollection: Number, targetCollection: Number,
hideWhenManualCollection: false hideWhenManualCollection: false
}, },
emits: [
'close'
],
data(){ data(){
return { return {
availableImporters: [], availableImporters: [],
@ -86,7 +90,7 @@ export default {
]), ]),
onSelectImporter(importerType) { onSelectImporter(importerType) {
this.$router.push({ path: this.$routerHelper.getImporterEditionPath(importerType.slug), query: { targetCollection: this.targetCollection } }); this.$router.push({ path: this.$routerHelper.getImporterEditionPath(importerType.slug), query: { targetCollection: this.targetCollection } });
this.$parent.close(); this.$emit('close');
} }
} }
} }

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