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"
]
],
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}

29
.eslintrc.js
View File

@ -2,29 +2,32 @@ module.exports = {
extends: [
// add more generic rulesets here, such as:
'eslint:recommended',
'plugin:vue/recommended'
'plugin:vue/vue3-recommended'
],
parserOptions: {
'ecmaVersion': 2018
'ecmaVersion': 2020
},
rules: {
// override/add rules settings here, such as:
'vue/no-unused-vars': 'error',
/* Override/add rules settings here, such as: */
// Basic rules that we want to receive a warning instead of error
'no-console': 'warn',
'no-unused-vars': '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/html-indent': 'off',
'vue/attributes-order': 'off',
'vue/html-closing-bracket-spacing': 'off',
'vue/no-v-text-v-html-on-component': '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-indent': [
'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/singleline-html-element-content-newline': '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'
'vue/require-default-prop': 'off'
},
globals: {
'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"
},
"dependencies": {
"apexcharts": "^3.40.0",
"axios": "^1.4.0",
"@ntohq/buefy-next": "^0.1.2",
"@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",
"buefy": "^0.9.23",
"bulma": "^0.9.4",
"conditioner-core": "^2.3.3",
"countup.js": "^2.6.2",
"css-vars-ponyfill": "^2.4.8",
"floating-vue": "^1.0.0-beta.19",
"countup.js": "^2.8.0",
"css-vars-ponyfill": "^2.4.9",
"floating-vue": "5.2.2",
"leaflet": "^1.9.4",
"leaflet-active-area": "^1.2.1",
"masonry-layout": "^4.2.2",
"moment": "^2.29.4",
"mitt": "^3.0.1",
"moment": "^2.30.1",
"node-sass": "^8.0.0",
"photoswipe": "^5.3.7",
"qs": "^6.11.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"swiper": "^8.4.7",
"vue": "^2.6.14",
"vue-apexcharts": "^1.6.2",
"vue-blurhash": "^0.1.4",
"vue-countup-v2": "^4.0.0",
"vue-imask": "^7.1.3",
"vue-router": "^3.6.5",
"vue-the-mask": "^0.11.1",
"vue2-leaflet": "^2.7.1",
"vuedraggable": "^2.24.3",
"vuex": "^3.6.2"
"photoswipe": "^5.4.3",
"qs": "^6.12.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sortablejs": "^1.15.2",
"sortablejs-vue3": "^1.2.11",
"swiper": "^11.0.7",
"vue": "^3.4.21",
"vue-countup-v3": "^1.4.1",
"vue-imask": "^7.5.0",
"vue-router": "^4.3.0",
"vue3-apexcharts": "^1.5.2",
"vuex": "^4.1.0"
},
"devDependencies": {
"@babel/core": "^7.21.0",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"@types/leaflet": "^1.9.1",
"@types/masonry-layout": "^4.2.5",
"acorn": "^8.8.2",
"ajv": "^7.2.4",
"autoprefixer": "^10.4.14",
"@babel/core": "^7.23.7",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.23.8",
"@babel/preset-react": "^7.23.3",
"@types/leaflet": "^1.9.8",
"@types/masonry-layout": "^4.2.7",
"@vue/compiler-sfc": "3.4.15",
"acorn": "^8.11.3",
"ajv": "^8.12.0",
"autoprefixer": "^10.4.17",
"babel-loader": "^9.1.3",
"circular-dependency-plugin": "5.2.2",
"cross-env": "^7.0.3",
"css-loader": "^6.7.3",
"eslint": "^8.35.0",
"eslint-plugin-vue": "^9.9.0",
"eslint-webpack-plugin": "^4.0.0",
"css-loader": "^6.9.1",
"eslint": "^8.56.0",
"eslint-plugin-vue": "^9.20.1",
"eslint-webpack-plugin": "^4.0.1",
"file-loader": "^6.2.0",
"moment-locales-webpack-plugin": "^1.2.0",
"postcss-loader": "7.0.2",
"sass-loader": "^13.2.0",
"style-loader": "^3.3.1",
"terser-webpack-plugin": "5.3.7",
"vue-loader": "^15.10.1",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.76.0",
"webpack-bundle-analyzer": "^4.8.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1",
"webpack-merge": "^5.8.0"
"postcss-loader": "7.3.3",
"sass-loader": "^13.3.2",
"style-loader": "^3.3.4",
"terser-webpack-plugin": "5.3.10",
"vue-loader": "^17.4.2",
"webpack": "^5.89.0",
"webpack-bundle-analyzer": "^4.10.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1",
"webpack-merge": "^5.10.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
* https://swiperjs.com
*
* Copyright 2014-2023 Vladimir Kharlampidi
* Copyright 2014-2024 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: January 30, 2023
* Released on: February 27, 2024
*/
@font-face {
font-family: 'swiper-icons';
@ -15,7 +15,18 @@
font-weight: 400;
font-style: normal; }
: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 {
margin-left: auto;
margin-right: auto;
@ -24,7 +35,8 @@
list-style: none;
padding: 0;
/* Fix of Webkit flickering */
z-index: 1; }
z-index: 1;
display: block; }
.swiper-vertical > .swiper-wrapper {
flex-direction: column; }
@ -36,23 +48,27 @@
z-index: 1;
display: flex;
transition-property: transform;
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
box-sizing: content-box; }
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
transform: translate3d(0px, 0, 0); }
.swiper-pointer-events {
.swiper-horizontal {
touch-action: pan-y; }
.swiper-pointer-events.swiper-vertical {
touch-action: pan-x; }
.swiper-vertical {
touch-action: pan-x; }
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform; }
transition-property: transform;
display: block; }
.swiper-slide-invisible-blank {
visibility: hidden; }
@ -61,6 +77,7 @@
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
height: auto; }
.swiper-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform, height; }
@ -70,17 +87,64 @@
backface-visibility: hidden; }
/* 3D Effects */
.swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper {
.swiper-3d.swiper-css-mode .swiper-wrapper {
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-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.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-left,
.swiper-3d .swiper-slide-shadow-right,
@ -104,50 +168,47 @@
.swiper-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
/* 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-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
transform-origin: 50%;
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 {
scroll-snap-type: x mandatory; }
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
animation: swiper-preloader-spin 1s infinite linear; }
.swiper-vertical.swiper-css-mode > .swiper-wrapper {
scroll-snap-type: y mandatory; }
.swiper-lazy-preloader-white {
--swiper-preloader-color: #fff; }
.swiper-centered > .swiper-wrapper::before {
content: '';
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; }
.swiper-lazy-preloader-black {
--swiper-preloader-color: #000; }
@keyframes swiper-preloader-spin {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
/* Slide styles end */
:root {
--swiper-navigation-size: 44px;
/*
--swiper-navigation-top-offset: 50%;
--swiper-navigation-sides-offset: 10px;
--swiper-navigation-color: var(--swiper-theme-color);
*/ }
.swiper-button-prev, .swiper-button-next {
position: absolute;
top: 50%;
top: var(--swiper-navigation-top-offset, 50%);
width: calc(var(--swiper-navigation-size) / 44 * 27);
height: var(--swiper-navigation-size);
margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
@ -170,33 +231,50 @@
.swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next {
display: none !important; }
.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 svg, .swiper-button-next svg {
width: 100%;
height: 100%;
object-fit: contain;
transform-origin: center; }
.swiper-rtl .swiper-button-prev svg, .swiper-rtl .swiper-button-next svg {
transform: rotate(180deg); }
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
left: 10px;
left: var(--swiper-navigation-sides-offset, 10px);
right: auto; }
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
content: 'prev'; }
.swiper-button-next,
.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; }
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
content: 'next'; }
.swiper-button-lock {
display: none; }
/* Navigation font end */
/* a11y */
.swiper .swiper-notification {
position: absolute;
@ -339,7 +417,8 @@
display: block;
line-height: 1.2em;
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%;
height: auto; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper a,
@ -347,7 +426,8 @@
color: inherit;
text-decoration: none;
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; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide.collection-list-item-grid a {
width: 100%;
@ -370,17 +450,17 @@
-ms-grid-row: 1;
-ms-grid-row-span: 2;
grid-column: 1/3;
grid-row: 1/3;
padding-bottom: 100% !important; }
grid-row: 1/3; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide.collection-list-item-grid .collection-items-grid > * {
flex-basis: 50%;
width: 100%;
height: auto;
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 {
margin-bottom: 0px; }
.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-position: center; }
object-position: center;
width: 100%; }
.wp-block-tainacan-carousel-collections-list .preview-warning {
width: 100%;
font-size: 0.875rem;
@ -488,7 +568,8 @@
display: block;
line-height: 1.2em;
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;
padding: 0px;
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
* https://swiperjs.com
*
* Copyright 2014-2023 Vladimir Kharlampidi
* Copyright 2014-2024 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: January 30, 2023
* Released on: February 27, 2024
*/
@font-face {
font-family: 'swiper-icons';
@ -15,7 +15,18 @@
font-weight: 400;
font-style: normal; }
: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 {
margin-left: auto;
margin-right: auto;
@ -24,7 +35,8 @@
list-style: none;
padding: 0;
/* Fix of Webkit flickering */
z-index: 1; }
z-index: 1;
display: block; }
.swiper-vertical > .swiper-wrapper {
flex-direction: column; }
@ -36,23 +48,27 @@
z-index: 1;
display: flex;
transition-property: transform;
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
box-sizing: content-box; }
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
transform: translate3d(0px, 0, 0); }
.swiper-pointer-events {
.swiper-horizontal {
touch-action: pan-y; }
.swiper-pointer-events.swiper-vertical {
touch-action: pan-x; }
.swiper-vertical {
touch-action: pan-x; }
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform; }
transition-property: transform;
display: block; }
.swiper-slide-invisible-blank {
visibility: hidden; }
@ -61,6 +77,7 @@
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
height: auto; }
.swiper-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform, height; }
@ -70,17 +87,64 @@
backface-visibility: hidden; }
/* 3D Effects */
.swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper {
.swiper-3d.swiper-css-mode .swiper-wrapper {
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-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.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-left,
.swiper-3d .swiper-slide-shadow-right,
@ -104,50 +168,47 @@
.swiper-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
/* 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-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
transform-origin: 50%;
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 {
scroll-snap-type: x mandatory; }
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
animation: swiper-preloader-spin 1s infinite linear; }
.swiper-vertical.swiper-css-mode > .swiper-wrapper {
scroll-snap-type: y mandatory; }
.swiper-lazy-preloader-white {
--swiper-preloader-color: #fff; }
.swiper-centered > .swiper-wrapper::before {
content: '';
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; }
.swiper-lazy-preloader-black {
--swiper-preloader-color: #000; }
@keyframes swiper-preloader-spin {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
/* Slide styles end */
:root {
--swiper-navigation-size: 44px;
/*
--swiper-navigation-top-offset: 50%;
--swiper-navigation-sides-offset: 10px;
--swiper-navigation-color: var(--swiper-theme-color);
*/ }
.swiper-button-prev, .swiper-button-next {
position: absolute;
top: 50%;
top: var(--swiper-navigation-top-offset, 50%);
width: calc(var(--swiper-navigation-size) / 44 * 27);
height: var(--swiper-navigation-size);
margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
@ -170,33 +231,50 @@
.swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next {
display: none !important; }
.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 svg, .swiper-button-next svg {
width: 100%;
height: 100%;
object-fit: contain;
transform-origin: center; }
.swiper-rtl .swiper-button-prev svg, .swiper-rtl .swiper-button-next svg {
transform: rotate(180deg); }
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
left: 10px;
left: var(--swiper-navigation-sides-offset, 10px);
right: auto; }
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
content: 'prev'; }
.swiper-button-next,
.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; }
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
content: 'next'; }
.swiper-button-lock {
display: none; }
/* Navigation font end */
/* a11y */
.swiper .swiper-notification {
position: absolute;
@ -346,7 +424,8 @@
display: block;
line-height: 1.2em;
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%;
height: auto; }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper a,
@ -354,11 +433,11 @@
color: inherit;
text-decoration: none;
display: block; }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper .is-forced-square > a > div {
padding-bottom: 100% !important; }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper .is-forced-square > a > div img {
object-fit: cover;
object-position: center; }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper .is-forced-square > a > div img,
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper .is-forced-square > a > div canvas {
object-fit: cover;
object-position: center;
height: auto; }
.wp-block-tainacan-carousel-items-list .preview-warning {
width: 100%;
font-size: 0.875rem;
@ -463,7 +542,8 @@
display: block;
line-height: 1.2em;
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;
display: block;
padding: 0px;
@ -474,7 +554,8 @@
content: '';
width: 100%;
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;
padding: 0px;
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 {
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; }
.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
* https://swiperjs.com
*
* Copyright 2014-2023 Vladimir Kharlampidi
* Copyright 2014-2024 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: January 30, 2023
* Released on: February 27, 2024
*/
@font-face {
font-family: 'swiper-icons';
@ -15,7 +15,18 @@
font-weight: 400;
font-style: normal; }
: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 {
margin-left: auto;
margin-right: auto;
@ -24,7 +35,8 @@
list-style: none;
padding: 0;
/* Fix of Webkit flickering */
z-index: 1; }
z-index: 1;
display: block; }
.swiper-vertical > .swiper-wrapper {
flex-direction: column; }
@ -36,23 +48,27 @@
z-index: 1;
display: flex;
transition-property: transform;
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
box-sizing: content-box; }
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
transform: translate3d(0px, 0, 0); }
.swiper-pointer-events {
.swiper-horizontal {
touch-action: pan-y; }
.swiper-pointer-events.swiper-vertical {
touch-action: pan-x; }
.swiper-vertical {
touch-action: pan-x; }
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform; }
transition-property: transform;
display: block; }
.swiper-slide-invisible-blank {
visibility: hidden; }
@ -61,6 +77,7 @@
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
height: auto; }
.swiper-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform, height; }
@ -70,17 +87,64 @@
backface-visibility: hidden; }
/* 3D Effects */
.swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper {
.swiper-3d.swiper-css-mode .swiper-wrapper {
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-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.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-left,
.swiper-3d .swiper-slide-shadow-right,
@ -104,50 +168,47 @@
.swiper-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
/* 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-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
transform-origin: 50%;
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 {
scroll-snap-type: x mandatory; }
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
animation: swiper-preloader-spin 1s infinite linear; }
.swiper-vertical.swiper-css-mode > .swiper-wrapper {
scroll-snap-type: y mandatory; }
.swiper-lazy-preloader-white {
--swiper-preloader-color: #fff; }
.swiper-centered > .swiper-wrapper::before {
content: '';
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; }
.swiper-lazy-preloader-black {
--swiper-preloader-color: #000; }
@keyframes swiper-preloader-spin {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
/* Slide styles end */
:root {
--swiper-navigation-size: 44px;
/*
--swiper-navigation-top-offset: 50%;
--swiper-navigation-sides-offset: 10px;
--swiper-navigation-color: var(--swiper-theme-color);
*/ }
.swiper-button-prev, .swiper-button-next {
position: absolute;
top: 50%;
top: var(--swiper-navigation-top-offset, 50%);
width: calc(var(--swiper-navigation-size) / 44 * 27);
height: var(--swiper-navigation-size);
margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
@ -170,33 +231,50 @@
.swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next {
display: none !important; }
.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 svg, .swiper-button-next svg {
width: 100%;
height: 100%;
object-fit: contain;
transform-origin: center; }
.swiper-rtl .swiper-button-prev svg, .swiper-rtl .swiper-button-next svg {
transform: rotate(180deg); }
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
left: 10px;
left: var(--swiper-navigation-sides-offset, 10px);
right: auto; }
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
content: 'prev'; }
.swiper-button-next,
.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; }
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
content: 'next'; }
.swiper-button-lock {
display: none; }
/* Navigation font end */
/* a11y */
.swiper .swiper-notification {
position: absolute;
@ -339,7 +417,8 @@
display: block;
line-height: 1.2em;
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%;
height: auto; }
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper a,
@ -347,7 +426,8 @@
color: inherit;
text-decoration: none;
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; }
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide.term-list-item-grid a {
width: 100%;
@ -370,17 +450,17 @@
-ms-grid-row: 1;
-ms-grid-row-span: 2;
grid-column: 1/3;
grid-row: 1/3;
padding-bottom: 100% !important; }
grid-row: 1/3; }
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide.term-list-item-grid .term-items-grid > * {
flex-basis: 50%;
width: 100%;
height: auto;
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 {
margin-bottom: 0px; }
.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-position: center; }
object-position: center;
width: 100%; }
.wp-block-tainacan-carousel-terms-list .preview-warning {
width: 100%;
font-size: 0.875rem;
@ -488,7 +568,8 @@
display: block;
line-height: 1.2em;
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;
padding: 0px;
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;
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-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;
margin-bottom: 0px !important; }
.wp-block-tainacan-collections-list ul.collections-list.collections-layout-grid,
@ -50,7 +52,9 @@
line-height: normal;
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-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;
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-edit.collections-layout-grid li.collection-list-item {
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-edit.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 canvas {
width: 100%; } }
.wp-block-tainacan-collections-list ul.collections-list.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-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-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;
width: 54px;
min-width: 54px;
padding: 0px;
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-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; }
.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,

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

@ -1,6 +1,6 @@
{
"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"],
"names": [],
"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 {
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-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%;
height: auto;
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-edit.items-layout-grid li.item-list-item {
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-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 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 {
width: 100%; } }
.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 {
@ -518,14 +521,18 @@
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-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;
width: 54px;
min-width: 54px;
padding: 0px;
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-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; }
.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,
@ -574,7 +581,9 @@
font-weight: bold;
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-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; }
.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 {

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
* https://swiperjs.com
*
* Copyright 2014-2023 Vladimir Kharlampidi
* Copyright 2014-2024 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: January 30, 2023
* Released on: February 27, 2024
*/
@font-face {
font-family: 'swiper-icons';
@ -15,7 +15,18 @@
font-weight: 400;
font-style: normal; }
: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 {
margin-left: auto;
margin-right: auto;
@ -24,7 +35,8 @@
list-style: none;
padding: 0;
/* Fix of Webkit flickering */
z-index: 1; }
z-index: 1;
display: block; }
.swiper-vertical > .swiper-wrapper {
flex-direction: column; }
@ -36,23 +48,27 @@
z-index: 1;
display: flex;
transition-property: transform;
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
box-sizing: content-box; }
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
transform: translate3d(0px, 0, 0); }
.swiper-pointer-events {
.swiper-horizontal {
touch-action: pan-y; }
.swiper-pointer-events.swiper-vertical {
touch-action: pan-x; }
.swiper-vertical {
touch-action: pan-x; }
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform; }
transition-property: transform;
display: block; }
.swiper-slide-invisible-blank {
visibility: hidden; }
@ -61,6 +77,7 @@
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
height: auto; }
.swiper-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform, height; }
@ -70,17 +87,64 @@
backface-visibility: hidden; }
/* 3D Effects */
.swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper {
.swiper-3d.swiper-css-mode .swiper-wrapper {
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-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.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-left,
.swiper-3d .swiper-slide-shadow-right,
@ -104,50 +168,47 @@
.swiper-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
/* 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-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
transform-origin: 50%;
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 {
scroll-snap-type: x mandatory; }
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
animation: swiper-preloader-spin 1s infinite linear; }
.swiper-vertical.swiper-css-mode > .swiper-wrapper {
scroll-snap-type: y mandatory; }
.swiper-lazy-preloader-white {
--swiper-preloader-color: #fff; }
.swiper-centered > .swiper-wrapper::before {
content: '';
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; }
.swiper-lazy-preloader-black {
--swiper-preloader-color: #000; }
@keyframes swiper-preloader-spin {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
/* Slide styles end */
:root {
--swiper-navigation-size: 44px;
/*
--swiper-navigation-top-offset: 50%;
--swiper-navigation-sides-offset: 10px;
--swiper-navigation-color: var(--swiper-theme-color);
*/ }
.swiper-button-prev, .swiper-button-next {
position: absolute;
top: 50%;
top: var(--swiper-navigation-top-offset, 50%);
width: calc(var(--swiper-navigation-size) / 44 * 27);
height: var(--swiper-navigation-size);
margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
@ -170,33 +231,50 @@
.swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next {
display: none !important; }
.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 svg, .swiper-button-next svg {
width: 100%;
height: 100%;
object-fit: contain;
transform-origin: center; }
.swiper-rtl .swiper-button-prev svg, .swiper-rtl .swiper-button-next svg {
transform: rotate(180deg); }
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
left: 10px;
left: var(--swiper-navigation-sides-offset, 10px);
right: auto; }
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
content: 'prev'; }
.swiper-button-next,
.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; }
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
content: 'next'; }
.swiper-button-lock {
display: none; }
/* Navigation font end */
/* a11y */
.swiper .swiper-notification {
position: absolute;
@ -209,9 +287,17 @@
:root {
/*
--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-width: 8px;
--swiper-pagination-bullet-height: 8px;
--swiper-pagination-bullet-border-radius: 50%;
--swiper-pagination-bullet-inactive-color: #000;
--swiper-pagination-bullet-inactive-opacity: 0.2;
--swiper-pagination-bullet-opacity: 1;
@ -234,7 +320,8 @@
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
bottom: 10px;
bottom: var(--swiper-pagination-bottom, 8px);
top: var(--swiper-pagination-top, auto);
left: 0;
width: 100%; }
@ -262,7 +349,7 @@
width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
display: inline-block;
border-radius: 50%;
border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
background: var(--swiper-pagination-bullet-inactive-color, #000);
opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); }
button.swiper-pagination-bullet {
@ -282,7 +369,8 @@
.swiper-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%;
transform: translate3d(0px, -50%, 0); }
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
@ -314,9 +402,13 @@
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 200ms transform, 200ms right; }
/* Fraction */
.swiper-pagination-fraction {
color: var(--swiper-pagination-fraction-color, inherit); }
/* Progress */
.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; }
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: var(--swiper-pagination-color, var(--swiper-theme-color));
@ -331,11 +423,11 @@
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 {
width: 100%;
height: 4px;
height: var(--swiper-pagination-progressbar-size, 4px);
left: 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 {
width: 4px;
width: var(--swiper-pagination-progressbar-size, 4px);
height: 100%;
left: 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;
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-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;
margin-bottom: 0px !important; }
.wp-block-tainacan-items-list ul.items-list.items-layout-grid,
@ -54,7 +56,9 @@
line-height: normal;
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-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;
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-edit.items-layout-grid li.item-list-item {
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-edit.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 canvas {
width: 100%; } }
.wp-block-tainacan-items-list ul.items-list.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-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-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;
width: 54px;
min-width: 54px;
padding: 0px;
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-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; }
.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,

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

@ -1,6 +1,6 @@
{
"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"],
"names": [],
"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;
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-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;
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-edit.terms-layout-grid li.term-list-item {
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-edit.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 canvas {
width: 100%; } }
.wp-block-tainacan-terms-list ul.terms-list.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-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-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;
width: 54px;
min-width: 54px;
padding: 0px;
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-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; }
.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,

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

@ -1,6 +1,6 @@
{
"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"],
"names": [],
"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 {
display: flex;
align-items: center; }
#tainacan-reports-app #current-page-selector {
min-width: 48px; }
/*# sourceMappingURL=tainacan-reports.css.map */

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

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

16
src/migrations.php
View File

@ -1,8 +1,6 @@
<?php
namespace Tainacan;
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() {
global $wpdb;
@ -525,6 +535,4 @@ class Migrations {
}
}
?>

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

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

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

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

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

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

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

@ -15,20 +15,20 @@
:class="formErrors['name'] != undefined ? 'is-danger' : ''">*</span>
<help-button
:title="$i18n.getHelperTitle('filters', 'name')"
:message="$i18n.getHelperMessage('filters', 'name')"/>
:message="$i18n.getHelperMessage('filters', 'name')" />
</label>
<b-input
v-model="form.name"
name="name"
@focus="clearErrors('name')"/>
@focus="clearErrors('name')" />
</b-field>
<!-- Hook for extra Form options -->
<template v-if="hasBeginLeftForm">
<form
id="form-filter-begin-left"
class="form-hook-region"
v-html="getBeginLeftForm"/>
id="form-filter-begin-left"
class="form-hook-region"
v-html="getBeginLeftForm" />
</template>
<b-field
@ -39,13 +39,13 @@
{{ $i18n.get('label_description') }}
<help-button
:title="$i18n.getHelperTitle('filters', 'description')"
:message="$i18n.getHelperMessage('filters', 'description')"/>
:message="$i18n.getHelperMessage('filters', 'description')" />
</label>
<b-input
v-model="form.description"
type="textarea"
name="description"
:rows="3"
v-model="form.description"
@focus="clearErrors('description')" />
</b-field>
@ -57,29 +57,29 @@
{{ $i18n.get('label_status') }}
<help-button
:title="$i18n.getHelperTitle('filters', 'status')"
:message="$i18n.getHelperMessage('filters', 'status')"/>
:message="$i18n.getHelperMessage('filters', 'status')" />
</label>
<div class="inline-block">
<b-radio
@focus="clearErrors('label_status')"
id="tainacan-select-status-publish"
name="status"
v-model="form.status"
native-value="publish">
name="status"
native-value="publish"
@focus="clearErrors('label_status')">
<span class="icon has-text-gray3">
<i class="tainacan-icon tainacan-icon-public"/>
<i class="tainacan-icon tainacan-icon-public" />
</span>
{{ $i18n.get('status_public') }}
</b-radio>
<br>
<b-radio
@focus="clearErrors('label_status')"
id="tainacan-select-status-private"
name="status"
v-model="form.status"
native-value="private">
name="status"
native-value="private"
@focus="clearErrors('label_status')">
<span class="icon has-text-gray3">
<i class="tainacan-icon tainacan-icon-private"/>
<i class="tainacan-icon tainacan-icon-private" />
</span>
{{ $i18n.get('status_private') }}
</b-radio>
@ -87,25 +87,31 @@
</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">
{{ $i18n.get('label_max_options_to_show') }}
<help-button
:title="$i18n.getHelperTitle('filters', 'max_options')"
:message="$i18n.getHelperMessage('filters', 'max_options')"/>
:message="$i18n.getHelperMessage('filters', 'max_options')" />
</label>
<div
v-if="!showEditMaxOptions"
class="is-flex">
<b-select
name="max_options"
v-model="form.max_options"
name="max_options"
:placeholder="$i18n.get('instruction_select_max_options_to_show')">
<option value="4">4</option>
<option value="8">8</option>
<option value="12">12</option>
<option value="4">
4
</option>
<option value="8">
8
</option>
<option value="12">
12
</option>
<option
v-if="form.max_options && ![4,8,12].find( (element) => element == form.max_options )"
:value="form.max_options">
@ -123,7 +129,7 @@
popperClass: ['tainacan-tooltip', 'tooltip']
}"
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>
</button>
</div>
@ -131,13 +137,13 @@
v-if="showEditMaxOptions"
class="is-flex">
<b-input
name="max_options"
v-model="form.max_options"
name="max_options"
type="number"
step="1" />
<button
@click.prevent="showEditMaxOptions = false"
class="button is-white is-pulled-right">
class="button is-white is-pulled-right"
@click.prevent="showEditMaxOptions = false">
<span
v-tooltip="{
content: $i18n.get('close'),
@ -146,7 +152,7 @@
popperClass: ['tainacan-tooltip', 'tooltip']
}"
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>
</button>
</div>
@ -159,17 +165,17 @@
:message="formErrors['begin_with_filter_collapsed'] != undefined ? formErrors['begin_with_filter_collapsed'] : ''">
&nbsp;
<b-switch
size="is-small"
@input="clearErrors('begin_with_filter_collapsed')"
v-model="form.begin_with_filter_collapsed"
size="is-small"
:true-value="'yes'"
:false-value="'no'"
:native-value="form.begin_with_filter_collapsed == 'yes' ? 'yes' : 'no'"
name="begin_with_filter_collapsed">
<help-button
:title="$i18n.getHelperTitle('filters', 'begin_with_filter_collapsed')"
:message="$i18n.getHelperMessage('filters', 'begin_with_filter_collapsed')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
name="begin_with_filter_collapsed"
@update:model-value="clearErrors('begin_with_filter_collapsed')">
<help-button
:title="$i18n.getHelperTitle('filters', 'begin_with_filter_collapsed')"
:message="$i18n.getHelperMessage('filters', 'begin_with_filter_collapsed')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</b-switch>
</b-field>
@ -181,36 +187,36 @@
:message="formErrors['display_in_repository_level_lists'] != undefined ? formErrors['display_in_repository_level_lists'] : ''">
&nbsp;
<b-switch
size="is-small"
@input="clearErrors('display_in_repository_level_lists')"
v-model="form.display_in_repository_level_lists"
size="is-small"
:true-value="'yes'"
:false-value="'no'"
:native-value="form.display_in_repository_level_lists == 'yes' ? 'yes' : 'no'"
name="display_in_repository_level_lists">
<help-button
:title="$i18n.getHelperTitle('filters', 'display_in_repository_level_lists')"
:message="$i18n.getHelperMessage('filters', 'display_in_repository_level_lists')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
name="display_in_repository_level_lists"
@update:model-value="clearErrors('display_in_repository_level_lists')">
<help-button
:title="$i18n.getHelperTitle('filters', 'display_in_repository_level_lists')"
:message="$i18n.getHelperMessage('filters', 'display_in_repository_level_lists')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</b-switch>
</b-field>
<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"
:filter="form"
v-model="form.filter_type_options"/>
v-if="(form.filter_type_object && form.filter_type_object.form_component) || form.edit_form == ''"
v-model="form.filter_type_options"
:errors="formErrors['filter_type_options']"
:filter="form" />
<div
v-html="form.edit_form"
v-else/>
v-else
v-html="form.edit_form" />
<!-- Hook for extra Form options -->
<template v-if="hasEndLeftForm">
<form
id="form-filter-end-left"
class="form-hook-region"
v-html="getEndLeftForm"/>
id="form-filter-end-left"
class="form-hook-region"
v-html="getEndLeftForm" />
</template>
</div>
@ -219,8 +225,9 @@
<button
type="button"
class="button is-outlined"
@click.prevent="cancelEdition()"
slot="trigger">{{ $i18n.get('cancel') }}</button>
@click.prevent="cancelEdition()">
{{ $i18n.get('cancel') }}
</button>
</div>
<div class="control">
<b-button
@ -231,22 +238,41 @@
</b-button>
</div>
</div>
<p class="help is-danger">{{ formErrorMessage }}</p>
<p class="help is-danger">
{{ formErrorMessage }}
</p>
</form>
</template>
<script>
import { nextTick } from 'vue';
import { mapActions } from 'vuex';
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 {
name: 'FilterEditionForm',
components: {
'tainacan-filter-form-numeric': FormFilterNumeric,
'tainacan-filter-form-numeric-interval': FormFilterNumericInterval,
'tainacan-filter-form-numeric-list-interval': FormFilterNumericListInterval
},
mixins: [ formHooks ],
props: {
index: '',
editedFilter: Object,
originalFilter: Object,
isRepositoryLevel: Boolean
},
emits: [
'on-update-saved-state',
'on-edition-finished',
'on-edition-canceled',
'on-error-found'
],
data(){
return {
form: {},
@ -259,7 +285,6 @@ export default {
isLoading: false
}
},
created() {
this.form = this.editedFilter;
@ -270,20 +295,20 @@ export default {
},
mounted() {
// Fills hook forms with it's real values
this.$nextTick()
nextTick()
.then(() => {
this.updateExtraFormData(this.form);
});
},
beforeDestroy() {
beforeUnmount() {
if (this.closedByForm) {
this.$emit('onUpdateSavedState', true);
this.$emit('on-update-saved-state', true);
} else {
this.oldForm.saved = this.form.saved;
if (JSON.stringify(this.form) != JSON.stringify(this.oldForm))
this.$emit('onUpdateSavedState', false);
this.$emit('on-update-saved-state', false);
else
this.$emit('onUpdateSavedState', true);
this.$emit('on-update-saved-state', true);
}
},
methods: {
@ -310,7 +335,7 @@ export default {
this.formErrorMessage = '';
this.isLoading = false;
this.closedByForm = true;
this.$emit('onEditionFinished');
this.$emit('on-edition-finished');
})
.catch((errors) => {
this.isLoading = false;
@ -319,7 +344,7 @@ export default {
this.formErrors[attribute] = error[attribute];
}
this.formErrorMessage = errors.error_message;
this.$emit('onErrorFound');
this.$emit('on-error-found');
this.form.formErrors = this.formErrors;
this.form.formErrorMessage = this.formErrorMessage;
@ -349,7 +374,7 @@ export default {
this.formErrorMessage = '';
this.isLoading = false;
this.closedByForm = true;
this.$emit('onEditionFinished');
this.$emit('on-edition-finished');
})
.catch((errors) => {
this.isLoading = false;
@ -358,7 +383,7 @@ export default {
this.formErrors[attribute] = error[attribute];
}
this.formErrorMessage = errors.error_message;
this.$emit('onErrorFound');
this.$emit('on-error-found');
this.form.formErrors = this.formErrors;
this.form.formErrorMessage = this.formErrorMessage;
@ -370,7 +395,7 @@ export default {
},
cancelEdition() {
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="[
{ path: $routerHelper.getAvailableImportersPath(), label: $i18n.get('importers') },
{ path: '', label: importerType != undefined ? (importerName != undefined ? importerName :importerType) : $i18n.get('title_importer_page') }
]"/>
]" />
<form
@click="formErrorMessage = ''"
v-if="importer != undefined && importer != null"
class="tainacan-form"
label-width="120px"
v-if="importer != undefined && importer != null">
@click="formErrorMessage = ''">
<div
v-if="importer.manual_collection || importer.accepts.file || importer.accepts.url"
class="columns">
v-if="importer.manual_collection || importer.accepts.file || importer.accepts.url"
class="columns">
<div class="column">
@ -25,7 +25,7 @@
<help-button
:title="$i18n.get('label_source_file')"
:message="$i18n.get('info_source_file_upload')"
extra-classes="tainacan-repository-tooltip"/>
extra-classes="tainacan-repository-tooltip" />
<br>
<b-upload
v-if="importer.tmp_file == undefined && (importerFile == undefined || importerFile == null || importerFile == '')"
@ -36,7 +36,7 @@
<div class="content has-text-centered">
<p>
<span class="icon">
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-upload"/>
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-upload" />
</span>
</p>
<p>{{ $i18n.get('instruction_drop_file_or_click_to_upload') }}</p>
@ -44,8 +44,8 @@
</section>
</b-upload>
<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>
<a
target="_blank"
@ -58,13 +58,13 @@
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
}"
class="icon">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-close"/>
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-close" />
</span>
</a>
</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>
</div>
</b-field>
@ -77,10 +77,10 @@
<help-button
:title="$i18n.get('label_url_source_link')"
:message="$i18n.get('info_url_source_link_helper')"
extra-classes="tainacan-repository-tooltip"/>
extra-classes="tainacan-repository-tooltip" />
<b-input
id="tainacan-url-link-source"
v-model="url"/>
v-model="url" />
</b-field>
</div>
@ -103,16 +103,16 @@
<help-button
:title="$i18n.get('label_target_collection')"
:message="$i18n.get('info_target_collection_helper')"
extra-classes="tainacan-repository-tooltip"/>
extra-classes="tainacan-repository-tooltip" />
<br>
<div class="is-inline">
<b-select
expanded
id="tainacan-select-target-collection"
:value="collectionId"
@input="onSelectCollection($event)"
expanded
:model-value="collectionId"
:loading="isFetchingCollections"
:placeholder="$i18n.get('instruction_select_a_target_collection')">
:placeholder="$i18n.get('instruction_select_a_target_collection')"
@update:model-value="onSelectCollection($event)">
<option
v-for="collection of collections"
:key="collection.id"
@ -121,12 +121,11 @@
</b-select>
<router-link
v-if="$userCaps.hasCapability('tnc_rep_edit_collections')"
tag="a"
style="font-size: 0.875em;"
class="add-link"
:to="{ path: $routerHelper.getNewCollectionPath(), query: { fromImporter: true }}">
<span class="icon">
<i class="tainacan-icon tainacan-icon-add"/>
<i class="tainacan-icon tainacan-icon-add" />
</span>
{{ $i18n.get('new_blank_collection') }}
</router-link>
@ -141,7 +140,7 @@
<div v-if="importer.options_form != undefined && importer.options_form != null && importer.options_form != ''">
<!-- Importer custom options -->
<form id="importerOptionsForm">
<div v-html="importer.options_form"/>
<div v-html="importer.options_form" />
</form>
</div>
@ -159,42 +158,42 @@
v-if="!importer.manual_mapping"
class="control">
<button
id="button-submit-importer-creation"
:disabled="
(formErrorMessage != undefined && formErrorMessage != '') ||
(formErrorMessage != undefined && formErrorMessage != '') ||
sessionId == undefined ||
importer == undefined ||
(importer.manual_collection && collectionId == undefined) ||
(importer.accepts.file && !importer.accepts.url && !importerFile) ||
(!importer.accepts.file && importer.accepts.url && !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="button">{{ $i18n.get('run') }}</button>
class="button"
@click.prevent="onFinishImporter()">{{ $i18n.get('run') }}</button>
</div>
<div
v-if="importer.manual_mapping"
class="control">
<button
id="button-submit-collection-creation"
:disabled="
(formErrorMessage != undefined && formErrorMessage != '') ||
(formErrorMessage != undefined && formErrorMessage != '') ||
sessionId == undefined ||
importer == undefined ||
(importer.manual_collection && collectionId == undefined) ||
(importer.accepts.file && !importer.accepts.url && !importerFile) ||
(!importer.accepts.file && importer.accepts.url && !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="button">{{ $i18n.get('next') }}</button>
class="button"
@click.prevent="onFinishImporter()">{{ $i18n.get('next') }}</button>
</div>
</div>
</form>
<b-loading
:active.sync="isLoading"
:can-cancel="false"/>
v-model="isLoading"
:can-cancel="false" />
</div>
</template>
@ -462,7 +461,7 @@ export default {
@import "../../scss/_variables.scss";
/deep/ .columns {
:deep(.columns) {
padding-left: var(--tainacan-one-column);
padding-right: var(--tainacan-one-column);
}

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

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

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

@ -1,16 +1,16 @@
<template>
<div>
<b-loading
v-model="isLoading"
:is-full-page="false"
:active.sync="isLoading"
:can-cancel="false"/>
:can-cancel="false" />
<div
v-if="!$adminOptions.hideBulkEditionPageTitle"
class="tainacan-page-title">
<h1>{{ $i18n.get('add_items_bulk') }}</h1>
<a
@click="$router.go(-1)"
class="back-link has-text-secondary">
class="back-link has-text-secondary"
@click="$router.go(-1)">
{{ $i18n.get('back') }}
</a>
<hr>
@ -25,18 +25,18 @@
<label class="label">{{ $i18n.get('label_documents_upload') }}</label>
<br>
<b-upload
native
v-model="submitedFileList"
native
drag-drop
multiple
@input="uploadFiles()"
class="source-file-upload">
class="source-file-upload"
@update:model-value="uploadFiles()">
<section class="drop-inner">
<div class="content has-text-centered">
<p>
<b-icon
icon="upload"
size="is-large"/>
<span class="icon">
<i class="tainacan-icon tainacan-icon-30px tainacan-icon-upload" />
</span>
</p>
<p>{{ $i18n.get('instruction_drop_file_or_click_to_upload') }}</p>
</div>
@ -50,13 +50,13 @@
<div class="sequence-progress-info">
<p v-if="uploadedItems.length > 0 && uploadedItems.length != amountFinished">
<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>
{{ $i18n.get('label_upload_file_prepare_items') }}
</p>
<p v-if="uploadedItems.length > 0 && uploadedItems.length == amountFinished">
<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>
{{ $i18n.get('label_process_completed') }}
</p>
@ -76,25 +76,25 @@
<div
v-if="uploadedItems.length > 0"
:style="{ width: (amountFinished/uploadedItems.length)*100 + '%' }"
class="sequence-progress"/>
class="sequence-progress" />
<div
v-if="uploadedItems.length > 0"
class="sequence-progress-background"/>
class="sequence-progress-background" />
<!-- Uploaded Items -->
<transition-group name="item-appear">
<div
class="document-item"
v-for="(item, index) of uploadedItems"
:key="item.id">
:key="item.id"
class="document-item">
<img
v-if="item.document != undefined && item.document != '' && item.document_type != 'empty'"
class="document-thumb"
: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
class="document-name"
v-html="item.title" />
class="document-name"
v-html="item.title" />
<span
v-if="item.errorMessage != undefined"
class="help is-danger">
@ -108,7 +108,6 @@
</span>
<span
v-if="item.document != '' && item.document_type != 'empty'"
class="icon has-text-success"
v-tooltip="{
delay: {
shown: 500,
@ -118,7 +117,8 @@
autoHide: false,
placement: 'auto-start',
popperClass: ['tainacan-tooltip', 'tooltip']
}">
}"
class="icon has-text-success">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-approvedcircle" />
</span>
</div>
@ -138,7 +138,7 @@
}"
class="icon has-text-secondary action-icon"
@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>
</div>
</div>
@ -150,8 +150,9 @@
<button
type="button"
class="button is-outlined"
@click.prevent="$router.go(-1)"
slot="trigger">{{ $i18n.get('cancel') }}</button>
@click.prevent="$router.go(-1)">
{{ $i18n.get('cancel') }}
</button>
</div>
<div
style="margin-left: auto;"
@ -160,15 +161,17 @@
:disabled="!(uploadedItems.length > 0 && uploadedItems.length == amountFinished)"
class="button is-secondary"
:class="{'is-loading': isCreatingSequenceEditGroup }"
@click.prevent="sequenceEditGroup()"
type="submit">{{ $i18n.get('label_sequence_edit_items') }}</button>
type="submit"
@click.prevent="sequenceEditGroup()">
{{ $i18n.get('label_sequence_edit_items') }}
</button>
</div>
<div class="control">
<button
:disabled="!(uploadedItems.length > 0 && uploadedItems.length == amountFinished)"
class="button is-secondary"
@click.prevent="openBulkEditionModal()"
type="submit">{{ $i18n.get('label_bulk_edit_items') }}</button>
type="submit"
@click.prevent="openBulkEditionModal()">{{ $i18n.get('label_bulk_edit_items') }}</button>
</div>
</div>
</footer>
@ -178,7 +181,7 @@
<div class="content has-text-grey has-text-centered">
<p>
<span class="icon">
<i class="tainacan-icon tainacan-icon-30px tainacan-icon-collection"/>
<i class="tainacan-icon tainacan-icon-30px tainacan-icon-collection" />
</span>
</p>
<p>{{ $i18n.get('info_can_not_bulk_edit_items_collection') }}</p>
@ -220,7 +223,7 @@ export default {
this.cleanFiles();
// Updates Collection BreadCrumb
this.$root.$emit('onCollectionBreadCrumbUpdate', [
this.$emitter.emit('onCollectionBreadCrumbUpdate', [
{ path: this.$routerHelper.getCollectionPath(this.collectionId), label: this.$i18n.get('items') },
{ path: '', label: this.$i18n.get('add_items_bulk') }
]);
@ -257,7 +260,7 @@ export default {
let index = this.uploadedItems.findIndex(existingItem => existingItem.id === item.id);
if ( index >= 0)
this.$set( this.uploadedItems, index, item );
Object.assign(this.uploadedItems, { [index]: item });
else
this.uploadedItems.push( item );
@ -276,7 +279,7 @@ export default {
let index = this.uploadedItems.findIndex(existingItem => existingItem.id === item.id);
if ( index >= 0)
this.$set( this.uploadedItems, index, item);
Object.assign(this.uploadedItems, { [index]: item });
else
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">
<label>
<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>
{{ 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>
<help-button
: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 class="section-box document-field">
<div
v-if="form.document != undefined && form.document != null &&
form.document_type != undefined && form.document_type != null &&
form.document != '' && form.document_type != 'empty'"
form.document_type != undefined && form.document_type != null &&
form.document != '' && form.document_type != 'empty'"
class="document-field-content"
:class="'document-field-content--' + form.document_type">
<div v-html="item.document_as_html" />
<div class="document-buttons-row">
<a
id="button-edit-document"
class="button is-rounded is-secondary"
size="is-small"
id="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
v-tooltip="{
content: $i18n.get('edit'),
@ -34,15 +34,15 @@
popperClass: ['tainacan-tooltip', 'tooltip']
}"
class="icon">
<i class="tainacan-icon tainacan-icon-edit"/>
<i class="tainacan-icon tainacan-icon-edit" />
</span>
</a>
<a
id="button-delete-document"
class="button is-rounded is-secondary"
size="is-small"
id="button-delete-document"
:aria-label="$i18n.get('label_button_delete_document')"
@click.prevent="$emit('onRemoveDocument')">
@click.prevent="$emit('on-remove-document')">
<span
v-tooltip="{
content: $i18n.get('delete'),
@ -51,7 +51,7 @@
popperClass: ['tainacan-tooltip', 'tooltip']
}"
class="icon">
<i class="tainacan-icon tainacan-icon-delete"/>
<i class="tainacan-icon tainacan-icon-delete" />
</span>
</a>
</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')">
<button
type="button"
@click.prevent="($event) => $emit('onSetFileDocument', $event)">
@click.prevent="($event) => $emit('on-set-file-document', $event)">
<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>
</button>
<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')">
<button
type="button"
@click.prevent="$emit('onSetTextDocument')">
@click.prevent="$emit('on-set-text-document')">
<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>
</button>
<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')">
<button
type="button"
@click.prevent="$emit('onSetURLDocument')">
@click.prevent="$emit('on-set-url-document')">
<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>
</button>
<p>{{ $i18n.get('label_url') }}</p>
@ -100,7 +100,14 @@ export default {
item: Object,
form: Object,
collection: Object
}
},
emits: [
'on-set-file-document',
'on-set-text-document',
'on-set-url-document',
'on-set-document',
'on-remove-document'
]
}
</script>
@ -114,48 +121,46 @@ export default {
&.document-field-content--text {
padding-bottom: 2rem;
/deep/ article {
:deep(article) {
max-height: calc(32vh - 2rem);
overflow-y: auto;
}
}
/deep/ img,
/deep/ video,
/deep/ figure {
:deep(img),
:deep(video),
:deep(figure) {
max-width: 100%;
max-height: 32vh;
width: auto !important;
margin: 0;
}
/deep/ a {
:deep(a){
min-height: 60px;
display: block;
}
/deep/ audio,
/deep/ iframe,
/deep/ blockquote {
:deep(audio),
:deep(iframe),
:deep(blockquote) {
max-width: 100%;
max-height: 32vh;
width: 100%;
margin: 0;
min-height: 150px;
}
/deep/ audio {
:deep(audio) {
min-height: 80px;
}
@media screen and (max-height: 760px) {
max-height: 25vh;
/deep/ img,
/deep/ video,
/deep/ figure {
max-height: 25vh;
}
/deep/ audio,
/deep/ iframe,
/deep/ blockquote {
:deep(img),
:deep(video),
:deep(figure),
:deep(audio),
:deep(iframe),
:deep(blockquote) {
max-height: 25vh;
}
}

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

@ -1,14 +1,14 @@
<template>
<div :class="isCreatingNewItem ? 'item-creation-container' : 'item-edition-container'"><!-- Do NOT remove this classes, they may be used by third party plugins -->
<b-loading
v-model="isLoading"
:is-full-page="false"
:active.sync="isLoading"
:can-cancel="false"/>
:can-cancel="false" />
<tainacan-title
v-if="!$adminOptions.hideItemEditionPageTitle || ($adminOptions.hideItemEditionPageTitle && isEditingItemMetadataInsideIframe)"
:bread-crumb-items="[{ path: '', label: $i18n.get('item') }]">
<h1 v-if="isCreatingNewItem">
<h1 v-if="isCreatingNewItem">
<span
v-if="(item != null && item != undefined && item.status != undefined && !isLoading)"
class="status-tag"
@ -37,7 +37,7 @@
<i
class="tainacan-icon tainacan-icon-1em"
:class="$statusHelper.getIcon(item.status)"
/>
/>
<help-button
:title="$i18n.get('status_' + item.status)"
:message="$i18n.get('info_item_' + item.status) + ' ' + $i18n.get('instruction_edit_item_status')" />
@ -60,8 +60,8 @@
width="24">
<path
d="M0 0h24v24H0z"
fill="none"/>
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
fill="none" />
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
</svg>
</i>
</span>
@ -80,12 +80,12 @@
</h1>
</transition>
<button
v-if="!formErrors.length || isUpdatingValues"
v-if="!errors.length || isUpdatingValues"
@click="isMobileSubheaderOpen = !isMobileSubheaderOpen">
<span
v-if="isUpdatingValues"
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
v-else
@ -98,22 +98,22 @@
width="24">
<path
d="M0 0h24v24H0z"
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"/>
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" />
</svg>
</i>
</span>
</button>
<item-metadatum-errors-tooltip
v-else
:form-errors="formErrors" />
:form-errors="errors" />
</div>
<transition name="item-appear">
<div
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 name="panel-from-top">
<div
@ -127,7 +127,7 @@
{{ $i18n.get('title_edit_item') + ' ' }}
<span style="font-weight: 600;">{{ (item != null && item != undefined) ? item.title : '' }}</span>
</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
v-else
class="help is-danger">
@ -178,14 +178,14 @@
class="column main-column"
:class="
(( (shouldDisplayItemEditionDocument || shouldDisplayItemEditionThumbnail) && !$adminOptions.itemEditionDocumentInsideTabs) ||
(shouldDisplayItemEditionAttachments && !$adminOptions.itemEditionAttachmentsInsideTabs)) ? 'is-7' : 'is-12'">
(shouldDisplayItemEditionAttachments && !$adminOptions.itemEditionAttachmentsInsideTabs)) ? 'is-7' : 'is-12'">
<!-- Hook for extra Form options -->
<template v-if="hasBeginRightForm">
<form
id="form-item-begin-right"
class="form-hook-region"
v-html="getBeginRightForm"/>
id="form-item-begin-right"
class="form-hook-region"
v-html="getBeginRightForm" />
</template>
<div class="b-tabs">
@ -196,11 +196,11 @@
<ul class="swiper-wrapper">
<li
v-for="(tab, tabIndex) of tabs"
:id="tab.slug + '-tab-label'"
:key="tabIndex"
:class="{ 'is-active': activeTab === tab.slug }"
@click="activeTab = tab.slug"
class="swiper-slide"
:id="tab.slug + '-tab-label'">
@click="activeTab = tab.slug">
<a>
<span class="icon has-text-gray4">
<i :class="'tainacan-icon tainacan-icon-18px tainacan-icon-' + tab.icon" />
@ -215,31 +215,29 @@
</li>
</ul>
<button
class="swiper-button-prev"
id="tainacan-tabs-prev"
slot="button-prev">
class="swiper-button-prev">
<svg
width="24"
height="24"
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
d="M0 0h24v24H0z"
fill="none"/>
fill="none" />
</svg>
</button>
<button
class="swiper-button-next"
id="tainacan-tabs-next"
slot="button-next">
class="swiper-button-next">
<svg
width="24"
height="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
d="M0 0h24v24H0z"
fill="none"/>
fill="none" />
</svg>
</button>
</nav>
@ -276,7 +274,7 @@
<span class="icon">
<i
:class="{ 'tainacan-icon-arrowdown' : collapseAll, 'tainacan-icon-arrowright' : !collapseAll }"
class="tainacan-icon tainacan-icon-1-25em"/>
class="tainacan-icon tainacan-icon-1-25em" />
</span>
<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>
@ -288,9 +286,9 @@
:style="$adminOptions.hideItemEditionCollapses ? 'padding-left: 0.35em !important;' : ''">
<b-button
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"
size="is-small">
size="is-small"
@click="isMetadataNavigation = true; setMetadatumFocus({ index: 0, scrollIntoView: true });">
<span
class="icon">
<i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-play" />
@ -300,8 +298,8 @@
<b-button
v-if="isMetadataNavigation"
:disabled="focusedMetadatum === 0"
@click="focusPreviousMetadatum"
outlined>
outlined
@click="focusPreviousMetadatum">
<span
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-showmore tainacan-icon-rotate-180" />
@ -311,8 +309,8 @@
<b-button
v-if="isMetadataNavigation"
:disabled="(focusedMetadatum === itemMetadata.length - 1) && (!isCurrentlyFocusedOnCompoundMetadatum || isOnLastMetadatumOfCompoundNavigation)"
@click="focusNextMetadatum"
outlined>
outlined
@click="focusNextMetadatum">
<span
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-showmore" />
@ -321,8 +319,8 @@
</b-button>
<b-button
v-if="isMetadataNavigation"
@click="setMetadatumFocus({ index: 0, scrollIntoView: true }); isMetadataNavigation = false;"
outlined>
outlined
@click="setMetadatumFocus({ index: 0, scrollIntoView: true }); isMetadataNavigation = false;">
<span
class="icon has-success-color">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-finish" />
@ -335,16 +333,16 @@
v-if="isUpdatingValues && isMetadataNavigation && !$adminOptions.mobileAppMode"
class="update-warning">
<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>
<b-switch
v-if="!isMetadataNavigation && !$adminOptions.hideItemEditionRequiredOnlySwitch && (collection && collection.item_enable_metadata_required_filter === 'yes')"
id="tainacan-switch-required-metadata"
v-model="showOnlyRequiredMetadata"
:style="'font-size: 0.625em;' + (isMobileScreen ? 'margin-right: 2rem;' : '')"
size="is-small"
v-model="showOnlyRequiredMetadata">
size="is-small">
{{ isMobileScreen ? $i18n.get('label_required') : $i18n.get('label_only_required') }} *
</b-switch>
@ -353,17 +351,17 @@
class="header-item metadata-name-search">
<b-input
v-if="!isMobileScreen || openMetadataNameFilter"
:placeholder="$i18n.get('instruction_type_search_metadata_filter')"
v-model="metadataNameFilterString"
:placeholder="$i18n.get('instruction_type_search_metadata_filter')"
icon="magnify"
size="is-small"
icon-right="close-circle"
icon-right-clickable
@icon-right-click="openMetadataNameFilterClose" />
<span
@click="openMetadataNameFilter = true"
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" />
</span>
</b-field>
@ -371,15 +369,15 @@
<div
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"
:key="sectionIndex"
v-tooltip="{
content: isSectionHidden(metadataSection.id) ? $i18n.get('info_metadata_section_hidden_conditional') : false,
autoHide: true,
placement: 'auto',
popperClass: ['tainacan-tooltip', 'tooltip']
}">
}"
:class="'metadata-section-slug-' + metadataSection.slug + (isSectionHidden(metadataSection.id) ? ' metadata-section-hidden' : '')">
<div class="metadata-section-header section-label">
<span
class="collapse-handle"
@ -389,14 +387,14 @@
class="icon">
<i
:class="{
'tainacan-icon-arrowdown' : (metadataSectionCollapses[sectionIndex] || errorMessage) && !isSectionHidden(metadataSection.id),
'tainacan-icon-arrowright' : !(metadataSectionCollapses[sectionIndex] || errorMessage) || isSectionHidden(metadataSection.id)
'tainacan-icon-arrowdown' : (metadataSectionCollapses[sectionIndex] || formErrorMessage) && !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>
<label>
<span class="icon has-text-gray4">
<i class="tainacan-icon tainacan-icon-metadata"/>
<i class="tainacan-icon tainacan-icon-metadata" />
</span>
<span
v-if="metadataSections.length > 1 && collection.item_enable_metadata_enumeration === 'yes'"
@ -420,22 +418,23 @@
</div>
<transition name="filter-item">
<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
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 }}
</p>
<template v-for="(itemMetadatum, index) of itemMetadata">
<template
v-for="(itemMetadatum, index) of itemMetadata"
:key="index">
<tainacan-form-item
v-if="itemMetadatum.metadatum.metadata_section_id == metadataSection.id"
:key="index"
:id="'metadatum-index--' + index"
v-show="(!showOnlyRequiredMetadata || itemMetadatum.metadatum.required === 'yes') && (metadataNameFilterString == '' || filterByMetadatumName(itemMetadatum))"
:class="{ 'is-metadata-navigation-active': isMetadataNavigation }"
:id="'metadatum-index--' + index"
:ref="'tainacan-form-item--' + index"
:class="{ 'is-metadata-navigation-active': isMetadataNavigation }"
:item-metadatum="itemMetadatum"
:metadata-name-filter-string="metadataNameFilterString"
:is-collapsed="metadataCollapses[index]"
@ -448,10 +447,11 @@
:is-last-metadatum="index > 2 && (index == itemMetadata.length - 1)"
:is-focused="focusedMetadatum === index"
:is-metadata-navigation="isMetadataNavigation"
@changeCollapse="onChangeCollapse($event, index)"
@touchstart.native="isMetadataNavigation ? setMetadatumFocus({ index: index, scrollIntoView: false }): ''"
@mousedown.native="isMetadataNavigation ? setMetadatumFocus({ index: index, scrollIntoView: false }) : ''"
@mobileSpecialFocus="setMetadatumFocus({ index: index, scrollIntoView: true })" />
@input="updateItemMetadataValue"
@change-collapse="onChangeCollapse($event, index)"
@touchstart="isMetadataNavigation ? setMetadatumFocus({ index: index, scrollIntoView: false }): ''"
@mousedown="isMetadataNavigation ? setMetadatumFocus({ index: index, scrollIntoView: false }) : ''"
@mobile-special-focus="setMetadatumFocus({ index: index, scrollIntoView: true })" />
</template>
</div>
</transition>
@ -463,9 +463,9 @@
formHooks['item'] != undefined &&
formHooks['item']['end-right'] != undefined">
<form
id="form-item-end-right"
class="form-hook-region"
v-html="formHooks['item']['end-right'].join('')"/>
id="form-item-end-right"
class="form-hook-region"
v-html="formHooks['item']['end-right'].join('')" />
</template>
</div>
@ -484,11 +484,11 @@
</div>
<related-items-list
v-model:is-loading="isLoading"
:item-id="itemId"
:collection-id="collectionId"
:related-items="item.related_items"
:is-editable="!$adminOptions.itemEditionMode"
:is-loading.sync="isLoading" />
:is-editable="!$adminOptions.itemEditionMode" />
</div>
@ -503,19 +503,19 @@
:item="item"
:form="form"
:collection="collection"
@onSetDocument="setDocument"
@onRemoveDocument="removeDocument"
@onSetFileDocument="setFileDocument"
@onSetTextDocument="setTextDocument"
@onSetURLDocument="setURLDocument" />
@on-set-document="setDocument"
@on-remove-document="removeDocument"
@on-set-file-document="setFileDocument"
@on-set-text-document="setTextDocument"
@on-set-url-document="setURLDocument" />
<item-thumbnail-edition-form
:item="item"
:form="form"
:collection="collection"
:is-loading="isLoading"
@onDeleteThumbnail="deleteThumbnail"
@onUpdateThumbnailAlt="($event) => onUpdateThumbnailAlt($event)"
@openThumbnailMediaFrame="thumbnailMediaFrame.openFrame($event)" />
@on-delete-thumbnail="deleteThumbnail"
@on-update-thumbnail-alt="($event) => onUpdateThumbnailAlt($event)"
@open-thumbnail-media-frame="thumbnailMediaFrame.openFrame($event)" />
</div>
<!-- Attachments on mobile modal -->
@ -532,8 +532,8 @@
:is-loading="isLoading"
:total-attachments="totalAttachments"
:should-load-attachments="shouldLoadAttachments"
@openAttachmentsMediaFrame="($event) => attachmentsMediaFrame.openFrame($event)"
@onDeleteAttachment="deleteAttachment($event)" />
@open-attachments-media-frame="($event) => attachmentsMediaFrame.openFrame($event)"
@on-delete-attachment="deleteAttachment($event)" />
</div>
</section>
@ -555,7 +555,7 @@
<form
id="form-item-begin-left"
class="form-hook-region"
v-html="getBeginLeftForm"/>
v-html="getBeginLeftForm" />
</template>
<!-- Document -------------------------------- -->
@ -564,11 +564,11 @@
:item="item"
:form="form"
:collection="collection"
@onSetDocument="setDocument"
@onRemoveDocument="removeDocument"
@onSetFileDocument="setFileDocument"
@onSetTextDocument="setTextDocument"
@onSetURLDocument="setURLDocument" />
@on-set-document="setDocument"
@on-remove-document="removeDocument"
@on-set-file-document="setFileDocument"
@on-set-text-document="setTextDocument"
@on-set-url-document="setURLDocument" />
<hr v-if="shouldDisplayItemEditionDocument && shouldDisplayItemEditionThumbnail">
@ -579,9 +579,9 @@
:form="form"
:collection="collection"
:is-loading="isLoading"
@onDeleteThumbnail="deleteThumbnail"
@onUpdateThumbnailAlt="($event) => onUpdateThumbnailAlt($event)"
@openThumbnailMediaFrame="thumbnailMediaFrame.openFrame($event)" />
@on-delete-thumbnail="deleteThumbnail"
@on-update-thumbnail-alt="($event) => onUpdateThumbnailAlt($event)"
@open-thumbnail-media-frame="thumbnailMediaFrame.openFrame($event)" />
<hr v-if="(shouldDisplayItemEditionAttachments && !$adminOptions.itemEditionAttachmentsInsideTabs) || hasEndLeftForm">
@ -594,17 +594,17 @@
:is-loading="isLoading"
:total-attachments="totalAttachments"
:should-load-attachments="shouldLoadAttachments"
@openAttachmentsMediaFrame="($event) => attachmentsMediaFrame.openFrame($event)"
@onDeleteAttachment="deleteAttachment($event)" />
@open-attachments-media-frame="($event) => attachmentsMediaFrame.openFrame($event)"
@on-delete-attachment="deleteAttachment($event)" />
<hr v-if="hasEndLeftForm">
<!-- Hook for extra Form options -->
<template v-if="hasEndLeftForm">
<form
id="form-item-end-left"
class="form-hook-region"
v-html="getEndLeftForm"/>
id="form-item-end-left"
class="form-hook-region"
v-html="getEndLeftForm" />
</template>
</div>
@ -615,13 +615,19 @@
</form>
</transition>
<transition
mode="out-in"
:name="(isOnSequenceEdit && sequenceRightDirection != undefined) ? (sequenceRightDirection ? 'page-right' : 'page-left') : ''">
<!-- 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))">
<section class="section">
<div class="content has-text-grey has-text-centered">
<p>
<span class="icon">
<i class="tainacan-icon tainacan-icon-30px tainacan-icon-items"/>
<i class="tainacan-icon tainacan-icon-30px tainacan-icon-items" />
</span>
</p>
<p>{{ $i18n.get('info_can_not_edit_item') }}</p>
@ -638,19 +644,19 @@
<!-- Sequence Progress -->
<div
v-if="isOnSequenceEdit"
class="sequence-progress-background"/>
class="sequence-progress-background" />
<div
v-if="isOnSequenceEdit && itemPosition != undefined && group != null && group.items_count != undefined"
:style="{ width: (itemPosition/group.items_count)*100 + '%' }"
class="sequence-progress"/>
class="sequence-progress" />
<!-- Last Updated Info -->
<div
v-if="!$adminOptions.mobileAppMode"
class="update-info-section">
<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;
</p>
<p class="footer-message">
@ -658,7 +664,7 @@
v-if="isUpdatingValues"
class="update-warning">
<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>{{ $i18n.get('info_updating_metadata_values') }}</span>
</span>
@ -669,37 +675,37 @@
{{ $i18n.get('info_autodraft_updated') }}
</span>
<span v-else>
{{ ($i18n.get('info_updated_at') + ' ' + lastUpdated) }}
{{ ($i18n.get('info_updated_at') + ' ' + lastUpdated) }}
</span>
</template>
<span class="help is-danger">
{{ formErrorMessage }}
<item-metadatum-errors-tooltip
v-if="formErrors.length"
:form-errors="formErrors" />
v-if="errors.length"
:form-errors="errors" />
</span>
</p>
<!-- Comment Status ------------------------ -->
<div
v-if="collection && collection.allow_comments && collection.allow_comments == 'open' && !$adminOptions.hideItemEditionCommentsToggle"
style="margin-left: 2em;"
class="section-status"
v-if="collection && collection.allow_comments && collection.allow_comments == 'open' && !$adminOptions.hideItemEditionCommentsToggle">
class="section-status">
<div class="field has-addons">
<b-switch
id="tainacan-checkbox-comment-status"
v-model="form.comment_status"
size="is-small"
true-value="open"
false-value="closed"
v-model="form.comment_status">
false-value="closed">
<span class="icon has-text-gray4">
<i class="tainacan-icon tainacan-icon-comment"/>
<i class="tainacan-icon tainacan-icon-comment" />
</span>
{{ $i18n.get('label_allow_comments') }}
<help-button
:title="$i18n.getHelperTitle('items', 'comment_status')"
:message="$i18n.getHelperMessage('items', 'comment_status')"/>
:message="$i18n.getHelperMessage('items', 'comment_status')" />
</b-switch>
</div>
</div>
@ -717,21 +723,22 @@
:current-user-can-delete="item && item.current_user_can_delete"
:current-user-can-publish="collection && collection.current_user_can_publish_items"
:is-editing-item-metadata-inside-iframe="isEditingItemMetadataInsideIframe"
@onSubmit="onSubmit"
@onDiscard="onDiscard"
@onPrevInSequence="onPrevInSequence"
@onNextInSequence="onNextInSequence" />
@on-submit="onSubmit"
@on-discard="onDiscard"
@on-prev-in-sequence="onPrevInSequence"
@on-next-in-sequence="onNextInSequence" />
</footer>
</div>
</template>
<script>
import { nextTick, defineAsyncComponent } from 'vue';
import { mapActions, mapGetters } from 'vuex';
import { eventBusItemMetadata } from '../../js/event-bus-item-metadata';
import wpMediaFrames from '../../js/wp-media-frames';
import { formHooks } from '../../js/mixins';
import { itemMetadataMixin } from '../../js/item-metadata-mixin';
import RelatedItemsList from '../lists/related-items-list.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/mousewheel';
import 'swiper/css/navigation';
import Swiper, { Mousewheel, Navigation } from 'swiper';
import Swiper from 'swiper';
import { Mousewheel, Navigation } from 'swiper/modules';
export default {
name: 'ItemEditionForm',
@ -756,9 +765,10 @@ export default {
ItemThumbnailEditionForm,
ItemDocumentEditionForm,
ItemAttachmentsEditionForm,
ItemFormFooterButtons
ItemFormFooterButtons,
TainacanFormItem: defineAsyncComponent(() => import('../metadata-types/tainacan-form-item.vue')),
},
mixins: [ formHooks ],
mixins: [ formHooks, itemMetadataMixin ],
beforeRouteLeave ( to, from, next ) {
if (this.item.status == 'auto-draft') {
this.$buefy.modal.open({
@ -780,15 +790,18 @@ export default {
next()
}
},
emits: [
'toggleItemEditionFooterDropdown'
],
data(){
return {
swiper: {},
selected: 'Home',
pageTitle: '',
itemId: Number,
itemId: [String, Number],
item: {},
itemRequestCancel: undefined,
collectionId: Number,
collectionId: [String, Number],
sequenceId: Number,
itemPosition: Number,
isCreatingNewItem: false,
@ -800,7 +813,7 @@ export default {
metadataSectionCollapses: [],
collapseAll: true,
form: {
collectionId: Number,
collectionId: [String, Number],
status: '',
document: '',
document_type: '',
@ -841,6 +854,7 @@ export default {
},
itemMetadata() {
const realItemMetadata = JSON.parse(JSON.stringify(this.getItemMetadata()));
const tweakedItemMetadata = realItemMetadata.map((anItemMetadatum) => {
// We need this because repository level metadata have an array of section IDs
@ -881,12 +895,6 @@ export default {
totalRelatedItems() {
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() {
return this.$route.query && this.$route.query.editingmetadata;
},
@ -955,7 +963,7 @@ export default {
// Clear form variables
this.cleanItemMetadata();
eventBusItemMetadata.clearAllErrors();
this.clearAllErrors();
this.formErrorMessage = '';
this.isLoading = true;
@ -977,13 +985,13 @@ export default {
// Obtains current Sequence Group Info
this.fetchSequenceGroup({ collectionId: this.collectionId, groupId: this.sequenceId });
},
tabs:{
tabs: {
handler() {
if (this.tabs.length >= 2) {
if (typeof this.swiper.update == 'function')
this.swiper.update();
else {
this.$nextTick(() => {
nextTick(() => {
this.swiper = new Swiper('#tainacanTabsSwiper', {
watchOverflow: true,
mousewheel: true,
@ -1003,13 +1011,14 @@ export default {
}
}
},
immediate: true
immediate: true,
deep: true
}
},
created() {
// Obtains collection ID
this.cleanItemMetadata();
eventBusItemMetadata.clearAllErrors();
this.clearAllErrors();
this.formErrorMessage = '';
this.collectionId = this.$route.params.collectionId;
this.form.collectionId = this.collectionId;
@ -1071,12 +1080,12 @@ export default {
* Creates the conditional metadata set to later watch values
* of certain metadata that control sections visibility.
*/
eventBusItemMetadata.conditionalSections = {};
this.conditionalSections = {};
for (let metadataSection of metadataSections) {
if ( metadataSection.is_conditional_section == 'yes') {
const conditionalSectionId = Object.keys(metadataSection.conditional_section_rules);
if ( conditionalSectionId.length ) {
eventBusItemMetadata.conditionalSections[metadataSection.id] = {
this.conditionalSections[metadataSection.id] = {
sectionId: metadataSection.id,
metadatumId: conditionalSectionId[0],
metadatumValues: metadataSection.conditional_section_rules[conditionalSectionId[0]],
@ -1092,22 +1101,13 @@ export default {
});
// 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();
// Updates variables for metadata navigation from compound childs
eventBusItemMetadata.$on('isOnFirstMetadatumOfCompoundNavigation', (isOnFirstMetadatumOfCompoundNavigation) => {
this.$emitter.on('isOnFirstMetadatumOfCompoundNavigation', (isOnFirstMetadatumOfCompoundNavigation) => {
this.isOnFirstMetadatumOfCompoundNavigation = isOnFirstMetadatumOfCompoundNavigation
});
eventBusItemMetadata.$on('isOnLastMetadatumOfCompoundNavigation', (isOnLastMetadatumOfCompoundNavigation) => {
this.$emitter.on('isOnLastMetadatumOfCompoundNavigation', (isOnLastMetadatumOfCompoundNavigation) => {
this.isOnLastMetadatumOfCompoundNavigation = isOnLastMetadatumOfCompoundNavigation
});
@ -1119,11 +1119,9 @@ export default {
if (this.$adminOptions.mobileAppMode)
this.isMobileSubheaderOpen = true;
},
beforeDestroy () {
eventBusItemMetadata.$off('isUpdatingValue');
eventBusItemMetadata.$off('hasErrorsOnForm');
eventBusItemMetadata.$off('isOnFirstMetadatumOfCompoundNavigation');
eventBusItemMetadata.$off('isOnLastMetadatumOfCompoundNavigation');
beforeUnmount () {
this.$emitter.off('isOnFirstMetadatumOfCompoundNavigation');
this.$emitter.off('isOnLastMetadatumOfCompoundNavigation');
window.removeEventListener('resize', this.handleWindowResize);
if (typeof this.swiper.destroy == 'function')
this.swiper.destroy();
@ -1191,7 +1189,7 @@ export default {
promise = this.updateItem(data);
// Clear errors so we don't have them duplicated from api
eventBusItemMetadata.errors = [];
this.errors = [];
promise.then(updatedItem => {
@ -1250,7 +1248,7 @@ export default {
if (errors.errors) {
for (let error of errors.errors) {
for (let metadatum of Object.keys(error)){
eventBusItemMetadata.errors.push({
this.errors.push({
metadatum_id: metadatum,
errors: error[metadatum]
});
@ -1264,6 +1262,12 @@ export default {
this.isLoading = false;
});
},
hasErrorsOnForm(hasErrors) {
if (hasErrors)
this.formErrorMessage = this.formErrorMessage ? this.formErrorMessage : this.$i18n.get('info_errors_in_form');
else
this.formErrorMessage = '';
},
onDiscard() {
if (!this.$adminOptions.itemEditionMode && !this.$adminOptions.mobileAppMode)
this.$router.go(-1);
@ -1280,13 +1284,13 @@ export default {
this.isLoading = true;
// Updates Collection BreadCrumb
this.$root.$emit('onCollectionBreadCrumbUpdate', [
this.$emitter.emit('onCollectionBreadCrumbUpdate', [
{ path: this.$routerHelper.getCollectionPath(this.collectionId), label: this.$i18n.get('items') },
{ path: '', label: this.$i18n.get('new') }
]);
// Clear errors so we don't have them duplicated from api
eventBusItemMetadata.errors = [];
this.errors = [];
// Creates draft Item
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 (this.$route.query.newitemtitle) {
eventBusItemMetadata.$emit('input', {
this.updateItemMetadataValue({
itemId: this.itemId,
metadatumId: this.$route.query.newmetadatumid,
values: this.$route.query.newitemtitle,
@ -1359,8 +1363,8 @@ export default {
const currentItemMetadatum = metadata.find(anItemMetadatum => anItemMetadatum.metadatum.id == this.conditionalSections[conditionalSectionId].metadatumId);
if (currentItemMetadatum) {
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];
eventBusItemMetadata.conditionalSections[conditionalSectionId].hide = Array.isArray(itemMetadatumValues) ? itemMetadatumValues.every(aValue => conditionalValues.indexOf(aValue['id'] ? aValue['id'] : aValue) < 0) : conditionalValues.indexOf(itemMetadatumValues) < 0;
const conditionalValues = Array.isArray(this.conditionalSections[conditionalSectionId].metadatumValues) ? this.conditionalSections[conditionalSectionId].metadatumValues : [this.conditionalSections[conditionalSectionId].metadatumValues];
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) => {
for (let error of errors.errors) {
for (let metadatum of Object.keys(error)){
eventBusItemMetadata.errors.push({
this.errors.push({
metadatum_id: metadatum,
errors: error[metadatum]
});
@ -1497,7 +1501,7 @@ export default {
.catch((errors) => {
for (let error of errors.errors) {
for (let metadatum of Object.keys(error)){
eventBusItemMetadata.errors.push({
this.errors.push({
metadatum_id: metadatum,
errors: error[metadatum]
});
@ -1525,7 +1529,7 @@ export default {
.catch((errors) => {
for (let error of errors.errors) {
for (let metadatum of Object.keys(error)){
eventBusItemMetadata.errors.push({
this.errors.push({
metadatum_id: metadatum,
errors: error[metadatum]
});
@ -1600,7 +1604,7 @@ export default {
.catch((errors) => {
for (let error of errors.errors) {
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;
@ -1666,18 +1670,18 @@ export default {
this.metadataCollapses[i] = this.collapseAll;
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) {
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);
},
toggleMetadataSectionCollapse(sectionIndex) {
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() {
this.$buefy.modal.open({
@ -1718,14 +1722,14 @@ export default {
// Updates Collection BreadCrumb
if (this.isOnSequenceEdit) {
this.$root.$emit('onCollectionBreadCrumbUpdate', [
this.$emitter.emit('onCollectionBreadCrumbUpdate', [
{ path: this.$routerHelper.getCollectionPath(this.collectionId), label: this.$i18n.get('items') },
{ path: '', label: this.$i18n.get('sequence') },
{ path: '', label: this.item.title },
{ path: '', label: this.$i18n.get('edit') }
]);
} else {
this.$root.$emit('onCollectionBreadCrumbUpdate', [
this.$emitter.emit('onCollectionBreadCrumbUpdate', [
{ 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: '', label: this.$i18n.get('edit') }
@ -1733,7 +1737,7 @@ export default {
}
// Fills hook forms with it's real values
this.$nextTick()
nextTick()
.then(() => {
this.updateExtraFormData(this.item);
});
@ -1810,8 +1814,8 @@ export default {
this.openMetadataNameFilter = false;
},
handleWindowResize: _.debounce( function() {
this.$nextTick(() => {
eventBusItemMetadata.$emit('itemEditionFormResize');
nextTick(() => {
this.$emitter.emit('itemEditionFormResize');
if (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth)
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';
if (isPreviouslyFocusedOnCompoundMetadatum || this.isCurrentlyFocusedOnCompoundMetadatum)
eventBusItemMetadata.$emit('focusPreviousChildMetadatum');
this.$emitter.emit('focusPreviousChildMetadatum');
if ( !this.isCurrentlyFocusedOnCompoundMetadatum || (this.isCurrentlyFocusedOnCompoundMetadatum && this.isOnFirstMetadatumOfCompoundNavigation) )
this.setMetadatumFocus({ index: this.focusedMetadatum - 1, scrollIntoView: true });
},
focusNextMetadatum() {
if (this.isCurrentlyFocusedOnCompoundMetadatum && !this.isOnLastMetadatumOfCompoundNavigation)
eventBusItemMetadata.$emit('focusNextChildMetadatum');
this.$emitter.emit('focusNextChildMetadatum');
if ( !this.isCurrentlyFocusedOnCompoundMetadatum || (this.isCurrentlyFocusedOnCompoundMetadatum && this.isOnLastMetadatumOfCompoundNavigation) )
this.setMetadatumFocus({ index: this.focusedMetadatum + 1, scrollIntoView: true });
@ -2162,7 +2166,7 @@ export default {
.metadata-navigation {
margin-right: auto;
}
.metadata-navigation /deep/ .button {
.metadata-navigation :deep(.button) {
border-radius: 0 !important;
margin-left: 0;
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 -->
<template v-if="isEditingItemMetadataInsideIframe">
<button
@click="$emit('onSubmit')"
type="button"
class="button is-secondary">
class="button is-secondary"
@click="$emit('on-submit')">
{{ $i18n.get('label_back_to_related_item') }}
</button>
</template>
@ -17,11 +17,11 @@
<!-- Sequence edition Previous -->
<button
v-if="isOnSequenceEdit && hasPreviousItemOnSequenceEdit"
@click="$emit('onPrevInSequence')"
type="button"
class="button sequence-button">
class="button sequence-button"
@click="$emit('on-prev-in-sequence')">
<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>{{ $i18n.get('previous') }}</span>
</button>
@ -30,14 +30,14 @@
<template v-if="(status == 'auto-draft' || status == undefined)">
<button
v-if="!$adminOptions.mobileAppMode"
@click="$emit('onDiscard')"
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
@click="openItemCreationStatusDialog"
type="button"
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>
<!-- Item is public, draft or private -->
@ -46,9 +46,9 @@
<!-- Send items to Trash -->
<button
v-if="!isOnSequenceEdit && currentUserCanDelete && !$adminOptions.mobileAppMode"
@click="$emit('onSubmit', 'trash')"
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-else>{{ $i18n.get('status_trash') }}</span>
</button>
@ -67,70 +67,70 @@
<template #trigger>
<button
: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"
class="button"
:class="{
'is-success': status == 'publish' || status == 'private',
'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') }}
<span
v-if="isOnSequenceEdit && !isCurrentItemOnSequenceEdit"
class="icon is-large"
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
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;"
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" />
</span>
</button>
</template>
<b-dropdown-item
@click="$emit(
'onSubmit',
:class="{ 'is-forced-last-option': status == 'draft' }"
aria-role="listitem"
@click="$emit(
'on-submit',
'draft',
( (isOnSequenceEdit && !isCurrentItemOnSequenceEdit) ? 'next' : null)
)"
:class="{ 'is-forced-last-option': status == 'draft' }"
aria-role="listitem">
)">
<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>
{{ status == 'draft' ? $i18n.get('label_update_draft') : $i18n.get('label_change_to_draft') }}
</b-dropdown-item>
<b-dropdown-item
v-if="currentUserCanPublish && !$adminOptions.hideItemEditionStatusPublishOption"
:class="{ 'is-forced-last-option': status == 'private' }"
aria-role="listitem"
@click="$emit(
'onSubmit',
'on-submit',
'private',
( (isOnSequenceEdit && !isCurrentItemOnSequenceEdit) ? 'next' : null)
)"
:class="{ 'is-forced-last-option': status == 'private' }"
aria-role="listitem">
)">
<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>
{{ 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
v-if="currentUserCanPublish && !$adminOptions.hideItemEditionStatusPublishOption"
aria-role="listitem"
@click="$emit(
'onSubmit',
'on-submit',
'publish',
( (isOnSequenceEdit && !isCurrentItemOnSequenceEdit) ? 'next' : null)
)"
aria-role="listitem">
)">
<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>
{{ status == 'publish' ? $i18n.get('label_update_as_public') : $i18n.get('label_verb_publish') }}
</b-dropdown-item>
@ -140,13 +140,13 @@
<button
v-else
:disabled="hasSomeError && (status == 'publish' || status == 'private')"
@click="$emit('onSubmit', status)"
type="button"
class="button"
:class="{
'is-success': status == 'publish' || status == 'private',
'is-secondary': status == 'draft'
}">
}"
@click="$emit('on-submit', status)">
{{ $i18n.get('label_update') }}
</button>
@ -156,23 +156,23 @@
<button
v-if="!currentUserCanPublish && isOnSequenceEdit && hasNextItemOnSequenceEdit"
:disabled="(status == 'publish' || status == 'private') && hasSomeError"
@click="$emit('onNextInSequence')"
type="button"
class="button is-success">
class="button is-success"
@click="$emit('on-next-in-sequence')">
<span>{{ $i18n.get('label_next') }}</span>
<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>
</button>
<!-- Sequence edition Finish -->
<button
v-if="isOnSequenceEdit && isCurrentItemOnSequenceEdit"
@click="$router.push($routerHelper.getCollectionPath(collectionId))"
type="button"
class="button sequence-button">
class="button sequence-button"
@click="$router.push($routerHelper.getCollectionPath(collectionId))">
<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>{{ $i18n.get('finish') }}</span>
</button>
@ -188,7 +188,7 @@ import ItemCreationStatusDialog from '../other/item-creation-status-dialog.vue';
export default {
props: {
status: String,
collectionId: Number,
collectionId: [Number, String],
isOnSequenceEdit: Boolean,
isCurrentItemOnSequenceEdit: Boolean,
hasNextItemOnSequenceEdit: Boolean,
@ -199,14 +199,20 @@ export default {
currentUserCanPublish: Boolean,
isEditingItemMetadataInsideIframe: Boolean
},
emits: [
'on-submit',
'on-next-in-sequence',
'on-prev-in-sequence',
'on-discard',
],
mounted() {
this.$parent.$on('toggleItemEditionFooterDropdown', () => {
this.$emitter.on('toggleItemEditionFooterDropdown', () => {
if (this.$refs && this.$refs['item-edition-footer-dropdown'])
this.$refs['item-edition-footer-dropdown'].toggle();
});
},
beforeDestroy() {
this.$parent.$off('toggleItemEditionFooterDropdown');
beforeUnmount() {
this.$emitter.off('toggleItemEditionFooterDropdown');
},
methods: {
openItemCreationStatusDialog() {
@ -219,7 +225,7 @@ export default {
icon: 'item',
currentUserCanPublish: this.currentUserCanPublish,
onConfirm: (selectedStatus) => {
this.$emit('onSubmit', selectedStatus);
this.$emit('on-submit', selectedStatus);
}
},
trapFocus: true,
@ -244,7 +250,7 @@ export default {
margin-right: 0px;
}
/deep/ .item-edition-footer-dropdown {
:deep(.item-edition-footer-dropdown) {
.dropdown-trigger .button>.icon.is-small {
border-left: 1px solid rgba(255,255,255,0.6);
margin-left: 0.5em;

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

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

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

@ -1,263 +1,266 @@
<template>
<form
id="metadataSectionEditForm"
@submit.prevent="saveEdition(form)"
autofocus="true"
tabindex="-1"
role="dialog"
aria-modal>
<div
v-if="form && Object.keys(form).length"
class="tainacan-modal-content">
<div class="tainacan-modal-title">
<h2 v-if="form.name">
{{ $i18n.get('instruction_configure_the_metadata_section') }}&nbsp;<em>{{ form.name }}</em>
</h2>
<h2 v-else>
{{ $i18n.get('instruction_configure_new_metadata_section') }}
</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>
<form
id="metadataSectionEditForm"
autofocus="true"
tabindex="-1"
role="dialog"
aria-modal
@submit.prevent="saveEdition(form)">
<div
v-if="form && Object.keys(form).length"
class="tainacan-modal-content">
<div class="tainacan-modal-title">
<h2 v-if="form.name">
{{ $i18n.get('instruction_configure_the_metadata_section') }}&nbsp;<em>{{ form.name }}</em>
</h2>
<h2 v-else>
{{ $i18n.get('instruction_configure_new_metadata_section') }}
</h2>
<hr>
</div>
<transition
v-if="form.id !== 'default_section'"
name="filter-item">
<div
v-show="!hideConditionalSectionSettings"
class="options-columns">
<div class="tainacan-form">
<div 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;
: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>
<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
v-model="form.description_bellow_name"
size="is-small"
@input="clearErrors('is_conditional_section')"
v-model="form.is_conditional_section"
true-value="yes"
false-value="no"
name="is_conditional_section">
<help-button
:title="$i18n.getHelperTitle('metadata-sections', 'is_conditional_section')"
:message="$i18n.getHelperMessage('metadata-sections', 'is_conditional_section')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
name="description_bellow_name"
@update:model-value="clearErrors('description_bellow_name')">
<help-button
:title="$i18n.getHelperTitle('metadata-sections', 'description_bellow_name')"
:message="$i18n.getHelperMessage('metadata-sections', 'description_bellow_name')" />
</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')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</label>
<b-select
v-model="selectedConditionalMetadatumId"
:placeholder="$i18n.get('label_select_metadatum')"
@input="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
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>
<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')" />
</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>
</div>
</transition>
<!-- Hook for extra Form options -->
<template v-if="hasEndLeftForm" >
<form
id="form-metadataSection-end-left"
class="form-hook-region"
v-html="getEndLeftForm"/>
</template>
<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 -->
<template v-if="hasEndLeftForm">
<form
id="form-metadataSection-end-left"
class="form-hook-region"
v-html="getEndLeftForm" />
</template>
</div>
</div>
</div>
<div class="field is-grouped form-submit">
<div class="control">
<button
type="button"
class="button is-outlined"
@click.prevent="cancelEdition()"
slot="trigger">{{ $i18n.get('cancel') }}
</button>
<div class="field is-grouped form-submit">
<div class="control">
<button
type="button"
class="button is-outlined"
@click.prevent="cancelEdition()">
{{ $i18n.get('cancel') }}
</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>
<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>
</form>
</form>
</template>
<script>
import { nextTick, defineAsyncComponent } from 'vue';
import { mapActions, mapGetters } from 'vuex';
import { formHooks } from "../../js/mixins";
export default {
name: 'MetadataSectionEditionForm',
components:{
TainacanSelectbox: defineAsyncComponent(() => import('../metadata-types/selectbox/TainacanSelectbox.vue')),
TainacanTaxonomy: defineAsyncComponent(() => import('../metadata-types/taxonomy/TainacanTaxonomy.vue')),
},
mixins: [ formHooks ],
props: {
index: '',
@ -265,6 +268,10 @@
collectionId: '',
isInsideImporterFlow: false,
},
emits: [
'on-edition-finished',
'on-edition-canceled'
],
data() {
return {
form: {},
@ -317,7 +324,7 @@
},
mounted() {
// Fills hook forms with it's real values
this.$nextTick()
nextTick()
.then(() => {
this.updateExtraFormData(this.form);
});
@ -348,7 +355,7 @@
this.isUpdating = false;
this.closedByForm = true;
this.$emit('onEditionFinished');
this.$emit('on-edition-finished');
})
.catch((errors) => {
this.isUpdating = false;
@ -367,7 +374,7 @@
},
cancelEdition() {
this.closedByForm = true;
this.$emit('onEditionCanceled');
this.$emit('on-edition-canceled');
},
selectConditionalValue(selected) {
const selectedValues = Array.isArray(selected) ? selected : [ selected ];
@ -408,7 +415,7 @@
.field > .field:not(:last-child) {
margin-bottom: 0em;
}
/deep/ .field {
:deep(.field) {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
@ -427,7 +434,7 @@
.tainacan-form .field:not(:last-child) {
margin-bottom: 1em;
}
.tainacan-form /deep/ .control-label {
.tainacan-form :deep(.control-label) {
white-space: normal;
}
.metadata-form-section {
@ -478,22 +485,23 @@
}
}
}
/deep/ .is-special-hidden-for-mobile,
/deep/ .is-special-hidden-for-mobile:focus,
/deep/ .is-special-hidden-for-mobile:focus-visible {
opacity: 0;
width: 0;
height: 0 !important;
min-height: 0;
min-width: 0;
padding: 0 !important;
line-height: 0px !important;
border: none !important;
border-color: transparent !important;
border-width: 0px !important;
font-size: 0px !important;
display: block !important;
:deep(.is-special-hidden-for-mobile) {
&,
&:focus,
&:focus-visible {
opacity: 0;
width: 0;
height: 0 !important;
min-height: 0;
min-width: 0;
padding: 0 !important;
line-height: 0px !important;
border: none !important;
border-color: transparent !important;
border-width: 0px !important;
font-size: 0px !important;
display: block !important;
}
}
.form-submit {
background-color: var(--tainacan-gray1);

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

@ -1,295 +1,296 @@
<template>
<form
id="metadatumEditForm"
@submit.prevent="saveEdition(form)"
autofocus="true"
tabindex="-1"
role="dialog"
aria-modal>
<div
v-if="form && Object.keys(form).length"
class="tainacan-modal-content">
<div class="tainacan-modal-title">
<h2 v-if="form.name">
{{ $i18n.get('instruction_configure_the_metadatum') }}&nbsp;<em>{{ form.name }}</em>
</h2>
<h2 v-else>
{{ $i18n.get('instruction_configure_new_metadatum') }}
</h2>
<!-- <a
<form
id="metadatumEditForm"
autofocus="true"
tabindex="-1"
role="dialog"
aria-modal
@submit.prevent="saveEdition(form)">
<div
v-if="form && Object.keys(form).length"
class="tainacan-modal-content">
<div class="tainacan-modal-title">
<h2 v-if="form.name">
{{ $i18n.get('instruction_configure_the_metadatum') }}&nbsp;<em>{{ form.name }}</em>
</h2>
<h2 v-else>
{{ $i18n.get('instruction_configure_new_metadatum') }}
</h2>
<!-- <a
class="back-link"
@click="onEditionCanceled()">
{{ $i18n.get('back') }}
</a> -->
<hr>
</div>
<div
class="tainacan-form"
:class="'tainacan-metadatum-edition-form--type-' + form.metadata_type_object.component">
<div class="options-columns">
<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>
<hr>
</div>
<div
class="tainacan-form"
:class="'tainacan-metadatum-edition-form--type-' + form.metadata_type_object.component">
<div class="options-columns">
<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>
<!-- 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
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
@input="clearErrors('required')"
v-model="form.required"
: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"
false-value="no"
class="is-inline-block"
name="required">
{{ $i18n.get('label_required') }}
name="description_bellow_name"
@update:model-value="clearErrors('description_bellow_name')">
<help-button
:title="$i18n.getHelperTitle('metadata', 'required')"
:message="$i18n.getHelperMessage('metadata', 'required')"
:title="$i18n.getHelperTitle('metadata', 'description_bellow_name')"
:message="$i18n.getHelperMessage('metadata', 'description_bellow_name')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</b-checkbox>
</b-switch>
</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
@input="clearErrors('collection_key')"
v-model="form.collection_key"
true-value="yes"
false-value="no"
class="is-inline-block"
name="collection_key">
{{ $i18n.get('label_unique_value') }}
: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', 'collection_key')"
:message="$i18n.getHelperMessage('metadata', 'collection_key')"
:title="$i18n.getHelperTitle('metadata', 'placeholder')"
:message="$i18n.getHelperMessage('metadata', 'placeholder')"
: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"
:type="formErrors['multiple'] != undefined ? 'is-danger' : ''"
:message="formErrors['multiple'] != undefined ? formErrors['multiple'] : ''">
: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
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"
: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
@input="clearErrors('multiple')"
v-model="form.multiple"
v-model="form.repository_level"
class="is-inline-block"
name="repository_level"
true-value="yes"
false-value="no"
class="is-inline-block"
name="multiple">
{{ $i18n.get('label_allow_multiple') }}
@update:model-value="clearErrors('repository_level')">
{{ $i18n.get('label_repository_metadata') }}
<help-button
:title="$i18n.getHelperTitle('metadata', 'multiple')"
:message="$i18n.getHelperMessage('metadata', 'multiple')"
:title="$i18n.getHelperTitle('metadata', 'repository_level')"
:message="$i18n.getHelperMessage('metadata', 'repository_level')"
: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
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>
@ -308,95 +309,119 @@
<hr>
</div>
<transition name="filter-item">
<div
v-show="!hideMetadataTypeOptions"
class="options-columns">
<component
:errors="formErrors['metadata_type_options']"
v-if="(form.metadata_type_object && form.metadata_type_object.form_component) || form.edit_form != ''"
:is="form.metadata_type_object.form_component"
:metadatum="form"
v-model="form.metadata_type_options"/>
<transition name="filter-item">
<div
v-html="form.edit_form"
v-else/>
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>
<!-- 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
@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">
<div
v-if="showAdvancedOptions"
class="options-columns">
<section>
<b-field :addons="false">
<label class="label is-inline">
{{ $i18n.get('label_semantic_uri') }}
<help-button
:title="$i18n.getHelperTitle('metadata', 'semantic_uri')"
:message="$i18n.getHelperMessage('metadata', 'semantic_uri')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</label>
<b-input
v-model="form.semantic_uri"
name="semantic_uri"
type="url"
@focus="clearErrors('semantic_uri')"/>
</b-field>
</section>
class="metadata-form-section"
@click="showAdvancedOptions = !showAdvancedOptions;">
<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>
<transition name="filter-item">
<div
v-if="showAdvancedOptions"
class="options-columns">
<section>
<b-field :addons="false">
<label class="label is-inline">
{{ $i18n.get('label_semantic_uri') }}
<help-button
:title="$i18n.getHelperTitle('metadata', 'semantic_uri')"
:message="$i18n.getHelperMessage('metadata', 'semantic_uri')"
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
</label>
<b-input
v-model="form.semantic_uri"
name="semantic_uri"
type="url"
@focus="clearErrors('semantic_uri')" />
</b-field>
</section>
</div>
</transition>
</div>
</div>
</div>
<div class="field is-grouped form-submit">
<div class="control">
<button
type="button"
class="button is-outlined"
@click.prevent="cancelEdition()"
slot="trigger">{{ $i18n.get('cancel') }}
</button>
<div class="field is-grouped form-submit">
<div class="control">
<button
type="button"
class="button is-outlined"
@click.prevent="cancelEdition()">
{{ $i18n.get('cancel') }}
</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>
<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>
</form>
</form>
</template>
<script>
import { nextTick } from 'vue';
import {mapActions} from 'vuex';
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 {
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 ],
props: {
index: '',
@ -406,6 +431,11 @@
isParentMultiple: false,
isInsideImporterFlow: false
},
emits: [
'on-edition-finished',
'on-edition-canceled',
'on-error-found'
],
data() {
return {
form: {},
@ -421,7 +451,7 @@
},
watch: {
showCardinalityOptions() {
this.form.cardinality = !this.showCardinalityOptions ? 1 : Number(this.form.cardinality);
this.form.cardinality = !this.showCardinalityOptions ? '' : Number(this.form.cardinality);
}
},
created() {
@ -438,7 +468,7 @@
},
mounted() {
// Fills hook forms with it's real values
this.$nextTick()
nextTick()
.then(() => {
this.updateExtraFormData(this.form);
});
@ -469,7 +499,7 @@
this.isUpdating = false;
this.closedByForm = true;
this.$emit('onEditionFinished');
this.$emit('on-edition-finished');
})
.catch((errors) => {
this.isUpdating = false;
@ -514,7 +544,7 @@
this.isUpdating = false;
this.closedByForm = true;
this.$emit('onEditionFinished');
this.$emit('on-edition-finished');
})
.catch((errors) => {
this.isUpdating = false;
@ -524,7 +554,7 @@
this.formErrors[attribute] = error[attribute];
}
this.formErrorMessage = errors.error_message;
this.$emit('onErrorFound');
this.$emit('on-error-found');
this.form.formErrors = this.formErrors;
this.form.formErrorMessage = this.formErrorMessage;
@ -536,7 +566,7 @@
},
cancelEdition() {
this.closedByForm = true;
this.$emit('onEditionCanceled');
this.$emit('on-edition-canceled');
},
}
}
@ -568,7 +598,7 @@
.field > .field:not(:last-child) {
margin-bottom: 0em;
}
/deep/ .field {
:deep(.field) {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
@ -587,7 +617,7 @@
.tainacan-form .field:not(:last-child) {
margin-bottom: 1em;
}
.tainacan-form /deep/ .control-label {
.tainacan-form :deep(.control-label) {
white-space: normal;
}
.metadata-form-section {

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

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

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

@ -1,21 +1,23 @@
<template>
<form
id="termEditForm"
autofocus
role="dialog"
tabindex="-1"
aria-modal
id="termEditForm"
class="tainacan-form tainacan-modal-content"
@submit.prevent="saveEdition(form)">
<header
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
v-if="form && form.url != undefined && form.url!= ''"
target="_blank"
:href="form.url">
<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 class="menu-text">{{ $i18n.get('label_term_page_on_website') }}</span>
</a>
@ -24,8 +26,8 @@
<div class="modal-card-body">
<b-loading
:is-full-page="false"
:active.sync="isLoading" />
v-model="isLoading"
:is-full-page="false" />
<!-- Name -------------- -->
<b-field
@ -41,19 +43,19 @@
extra-classes="tainacan-repository-tooltip" />
</label>
<b-input
:placeholder="$i18n.get('label_term_without_name')"
v-model="form.name"
:placeholder="$i18n.get('label_term_without_name')"
name="name"
@focus="clearErrors({ name: 'name', repeated: 'repeated' })"/>
@focus="clearErrors({ name: 'name', repeated: 'repeated' })" />
</b-field>
<!-- Hook for extra Form options -->
<template
v-if="hasBeginLeftForm">
<form
id="form-term-begin-left"
class="form-hook-region"
v-html="getBeginLeftForm"/>
id="form-term-begin-left"
class="form-hook-region"
v-html="getBeginLeftForm" />
</template>
<div class="columns is-gapless image-and-description-area">
@ -74,8 +76,8 @@
</figure>
<div class="thumbnail-buttons-row">
<a
class="button is-rounded is-secondary"
id="button-edit-header"
class="button is-rounded is-secondary"
:aria-label="$i18n.get('label_button_edit_header_image')"
@click="headerImageMediaFrame.openFrame($event)">
<span
@ -86,12 +88,12 @@
placement: 'bottom'
}"
class="icon is-small">
<i class="tainacan-icon tainacan-icon-edit"/>
<i class="tainacan-icon tainacan-icon-edit" />
</span>
</a>
<a
class="button is-rounded is-secondary"
id="button-delete-header"
class="button is-rounded is-secondary"
:aria-label="$i18n.get('label_button_delete_thumb')"
@click="deleteHeaderImage()">
<span
@ -102,7 +104,7 @@
placement: 'bottom'
}"
class="icon is-small">
<i class="tainacan-icon tainacan-icon-delete"/>
<i class="tainacan-icon tainacan-icon-delete" />
</span>
</a>
</div>
@ -121,13 +123,13 @@
<help-button
:title="$i18n.get('label_description')"
:message="$i18n.get('info_help_term_description')"
extra-classes="tainacan-repository-tooltip"/>
extra-classes="tainacan-repository-tooltip" />
</label>
<b-input
v-model="form.description"
type="textarea"
name="description"
v-model="form.description"
@focus="clearErrors('description')"/>
@focus="clearErrors('description')" />
</b-field>
</div>
</div>
@ -138,34 +140,34 @@
:addons="false"
:type="((formErrors.parent !== '' || formErrors.repeated !== '') && (formErrors.parent !== undefined || formErrors.repeated !== undefined )) ? 'is-danger' : ''"
:message="formErrors.parent ? formErrors : formErrors.repeated">
<label class="label is-inline">
<label class="label is-inline">
{{ $i18n.get('label_parent_term') }}
<b-switch
@input="onToggleSwitch()"
id="tainacan-checkbox-has-parent"
v-model="hasParent"
size="is-small"
v-model="hasParent" />
@update:model-value="onToggleSwitch()" />
<help-button
:title="$i18n.get('label_parent_term')"
:message="$i18n.get('info_help_parent_term')"
extra-classes="tainacan-repository-tooltip"/>
extra-classes="tainacan-repository-tooltip" />
</label>
<b-autocomplete
id="tainacan-add-parent-field"
v-model="parentTermName"
:placeholder="$i18n.get('instruction_parent_term')"
:data="parentTerms"
field="name"
clearable
v-model="parentTermName"
@select="onSelectParentTerm($event)"
:loading="isFetchingParentTerms"
@input="fetchParentTerms"
@focus="clearErrors('parent');"
:disabled="!hasParent"
:append-to-body="true"
check-infinite-scroll
@select="onSelectParentTerm($event)"
@update:model-value="fetchParentTerms"
@focus="clearErrors('parent');"
@infinite-scroll="fetchMoreParentTerms">
<template slot-scope="props">
<template #default="props">
<div class="media">
<div
v-if="props.option.header_image"
@ -179,12 +181,14 @@
</div>
</div>
</template>
<template slot="empty">{{ $i18n.get('info_no_parent_term_found') }}</template>
<template #empty>
{{ $i18n.get('info_no_parent_term_found') }}
</template>
</b-autocomplete>
<transition name="fade">
<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') }}
</p>
</transition>
@ -193,9 +197,9 @@
<!-- Hook for extra Form options -->
<template v-if="hasEndLeftForm">
<form
id="form-term-end-left"
class="form-hook-region"
v-html="getEndLeftForm"/>
id="form-term-end-left"
class="form-hook-region"
v-html="getEndLeftForm" />
</template>
<!-- Submit buttons -------------- -->
@ -204,8 +208,7 @@
<button
type="button"
class="button is-outlined"
@click.prevent="cancelEdition()"
slot="trigger">
@click.prevent="cancelEdition()">
{{ $i18n.get('cancel') }}
</button>
</div>
@ -222,6 +225,7 @@
</template>
<script>
import { nextTick } from 'vue';
import { formHooks } from "../../js/mixins";
import { mapActions } from 'vuex';
import wpMediaFrames from '../../js/wp-media-frames';
@ -237,6 +241,10 @@
metadatumId: [String, Number],
itemId: [String, Number]
},
emits: [
'on-edition-finished',
'close'
],
data() {
return {
formErrors: {},
@ -262,7 +270,7 @@
mounted() {
// Fills hook forms with it's real values
this.$nextTick()
nextTick()
.then(() => {
this.updateExtraFormData(this.form);
document.getElementById('termEditForm').scrollIntoView({ behavior: 'smooth' });
@ -315,18 +323,18 @@
itemId: this.itemId
})
.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.formErrors = {};
this.isLoading = false;
this.$parent.close();
this.$emit('close');
})
.catch((errors) => {
this.isLoading = false;
for (let error of errors.errors) {
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) => {
this.formErrors = {};
this.$emit('onEditionFinished', { term: term, hasChangedParent: this.hasChangedParent, initialParent: this.initialParentId });
this.$parent.close();
this.$emit('on-edition-finished', { term: term, hasChangedParent: this.hasChangedParent, initialParent: this.initialParentId });
this.$emit('close');
})
.catch((errors) => {
for (let error of errors.errors) {
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;
@ -366,7 +374,7 @@
}
},
cancelEdition() {
this.$parent.close();
this.$emit('close');
},
deleteHeaderImage() {
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>
<div class="block">
<b-autocomplete
v-model="selected"
icon="magnify"
size="is-small"
:aria-labelledby="'filter-label-id-' + filter.id"
v-model="selected"
:data="options"
expanded
:loading="isLoadingOptions"
@input="($event) => { resetPage(); search($event); }"
field="label"
@select="onSelect"
clearable
:placeholder="(metadatumType === 'Tainacan\\Metadata_Types\\Relationship') ? $i18n.get('info_type_to_search_items') : $i18n.get('info_type_to_search_metadata')"
check-infinite-scroll
@update:model-value="($event) => { resetPage(); search($event); }"
@select="onSelect"
@infinite-scroll="searchMore">
<template slot-scope="props">
<template #default="props">
<div class="media">
<div
class="media-left"
v-if="props.option.img">
v-if="props.option.img"
class="media-left">
<img
:alt="$i18n.get('label_thumbnail')"
width="24"
@ -37,7 +37,7 @@
</template>
<template
v-if="!isLoadingOptions"
slot="empty">
#empty>
{{ $i18n.get('info_no_options_found' ) }}
</template>
</b-autocomplete>
@ -45,11 +45,14 @@
</template>
<script>
import { tainacan as axios, isCancel } from '../../../js/axios'
import { tainacanApi, isCancel } from '../../../js/axios'
import { filterTypeMixin, dynamicFilterTypeMixin } from '../../../js/filter-types-mixin';
export default {
mixins: [filterTypeMixin, dynamicFilterTypeMixin],
emits: [
'input',
],
data(){
return {
selected:'',
@ -62,8 +65,11 @@
}
},
watch: {
'query'() {
this.updateSelectedValues();
'query': {
handler() {
this.updateSelectedValues();
},
deep: true
}
},
mounted() {
@ -168,7 +174,7 @@
let endpoint = '/items/' + metadata.value + '?fetch_only=title,thumbnail';
axios.get(endpoint)
tainacanApi.get(endpoint)
.then( res => {
let item = res.data;
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
v-model="selected"
:value="option.value"
@input="resetPage()"
type="checkbox">
<span class="check" />
<span class="control-label">
<span class="checkbox-label-text">{{ option.label }}</span>
<span
v-if="option.total_items != undefined"
class="has-text-gray">&nbsp;{{ "(" + option.total_items + ")" }}</span>
</span>
type="checkbox"
@input="resetPage()">
<span class="check" />
<span class="control-label">
<span class="checkbox-label-text">{{ option.label }}</span>
<span
v-if="option.total_items != undefined"
class="has-text-gray">&nbsp;{{ "(" + option.total_items + ")" }}</span>
</span>
</label>
<button
class="view-all-button link-style"
v-if="option.showViewAllButton && index == options.slice(0, filter.max_options).length - 1"
class="view-all-button link-style"
@click="openCheckboxModal(option.parent)">
{{ $i18n.get('label_view_all') }}
</button>
@ -44,19 +44,19 @@
:is-modal="false"
:filter="filter"
:selected="selected"
:metadatum-id="metadatumId"
:collection-id="collectionId"
:metadatum-type="metadatumType"
:is-repository-level="isRepositoryLevel"
:query="query"
:current-collection-id="currentCollectionId"
@input="(newSelected) => {
const existingValue = selected.indexOf(newSelected);
if (existingValue >= 0)
selected.splice(existingValue, 1);
else
selected.push(newSelected);
}"
:metadatum-id="metadatumId"
:collection-id="collectionId"
:metadatum_type="metadatumType"
:is-repository-level="isRepositoryLevel"
:query="query"
:current-collection-id="currentCollectionId" />
}" />
</template>
</div>
</template>
@ -72,6 +72,10 @@
props: {
filtersAsModal: Boolean
},
emits: [
'input',
'update-parent-collapse'
],
data(){
return {
options: [],
@ -79,19 +83,23 @@
}
},
watch: {
selected(newVal, oldVal) {
const isEqual = (Array.isArray(newVal) && Array.isArray(oldVal) && (newVal.length == oldVal.length)) && newVal.every((element, index) => {
return element === oldVal[index];
});
if (!isEqual)
this.onSelect();
selected: {
handler(newVal, oldVal) {
const isEqual = (Array.isArray(newVal) && Array.isArray(oldVal) && (newVal.length == oldVal.length)) && newVal.every((element, index) => {
return element === oldVal[index];
});
if (!isEqual)
this.onSelect();
},
deep: true
},
facetsFromItemSearch: {
handler() {
if (this.isUsingElasticSearch)
this.loadOptions();
},
immediate: true
immediate: true,
deep: true
},
},
mounted() {
@ -99,10 +107,10 @@
this.loadOptions();
},
created() {
this.$eventBusSearch.$on('has-to-reload-facets', this.reloadOptions);
this.$eventBusSearchEmitter.on('hasToReloadFacets', this.reloadOptions);
},
beforeDestroy() {
this.$eventBusSearch.$off('has-to-reload-facets', this.reloadOptions);
beforeUnmount() {
this.$eventBusSearchEmitter.off('hasToReloadFacets', this.reloadOptions);
},
methods: {
reloadOptions(shouldReload) {
@ -143,7 +151,7 @@
this.updateSelectedValues();
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) => {
if (isCancel(error)) {
@ -180,12 +188,12 @@
props: {
//parent: parent,
filter: this.filter,
//taxonomy_id: this.taxonomy_id,
//taxonomyId: this.taxonomyId,
selected: this.selected,
metadatumId: this.metadatumId,
//taxonomy: this.taxonomy,
collectionId: this.collectionId,
metadatum_type: this.metadatumType,
metadatumType: this.metadatumType,
isRepositoryLevel: this.isRepositoryLevel,
query: this.query
},

29
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>
<div>
<b-datepicker
v-model="dateInit"
:aria-labelledby="'filter-label-id-' + filter.id"
:placeholder="$i18n.get('label_selectbox_init')"
v-model="dateInit"
@focus="isTouched = true"
@input="($event) => { resetPage(); validadeValues($event) }"
editable
:trap-focus="false"
:date-formatter="(date) => dateFormatter(date)"
@ -20,18 +18,18 @@
$i18n.get('datepicker_short_thursday'),
$i18n.get('datepicker_short_friday'),
$i18n.get('datepicker_short_saturday'),
]"/>
]"
@focus="isTouched = true"
@update:model-value="($event) => { resetPage(); validadeValues($event) }" />
<p
style="font-size: 0.75em; margin-bottom: 0.125em;"
class="has-text-centered is-marginless">
{{ $i18n.get('label_until') }}
</p>
<b-datepicker
v-model="dateEnd"
:aria-labelledby="'filter-label-id-' + filter.id"
:placeholder="$i18n.get('label_selectbox_init')"
v-model="dateEnd"
@input="validadeValues()"
@focus="isTouched = true"
editable
:trap-focus="false"
:date-formatter="(date) => dateFormatter(date)"
@ -46,21 +44,25 @@
$i18n.get('datepicker_short_thursday'),
$i18n.get('datepicker_short_friday'),
$i18n.get('datepicker_short_saturday'),
]"/>
]"
@update:model-value="validadeValues()"
@focus="isTouched = true" />
</div>
</template>
<script>
import { wpAjax, dateInter } from "../../../js/mixins";
import { dateInter } from "../../../js/mixins";
import { filterTypeMixin } from '../../../js/filter-types-mixin';
import moment from 'moment';
export default {
mixins: [
wpAjax,
dateInter,
filterTypeMixin
],
emits: [
'input',
],
data(){
return {
dateInit: undefined,
@ -76,8 +78,11 @@
if ( val && this.dateEnd === null)
this.dateEnd = new Date();
},
'query'() {
this.updateSelectedValues();
'query': {
handler() {
this.updateSelectedValues();
},
deep: true
}
},
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>
<div class="date-filter-container">
<b-dropdown
<b-dropdown
:mobile-modal="true"
@input="($event) => { resetPage(); onChangeComparator($event) }"
aria-role="list"
trap-focus>
<button
:aria-label="$i18n.get('label_comparator')"
class="button is-white"
slot="trigger">
<span class="icon is-small">
<i v-html="comparatorSymbol" />
</span>
<span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
</span>
</button>
trap-focus
@update:model-value="($event) => { resetPage(); onChangeComparator($event) }">
<template #trigger>
<button
:aria-label="$i18n.get('label_comparator')"
class="button is-white">
<span class="icon is-small">
<i v-html="comparatorSymbol" />
</span>
<span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
</span>
</button>
</template>
<b-dropdown-item
role="button"
:class="{ 'is-active': comparator == '=' }"
@ -67,14 +68,13 @@
:aria-plus-label="$i18n.get('label_increase')"
size="is-small"
step="1"
@input="emitOnlyYear($event)"
@update:model-value="emitOnlyYear($event)"
v-model="yearsOnlyValue"/> -->
<b-datepicker
v-model="value"
position="is-bottom-right"
:aria-labelledby="'filter-label-id-' + filter.id"
:placeholder="$i18n.get('instruction_select_a_date')"
v-model="value"
@input="($event) => { resetPage(); emit($event); }"
editable
:trap-focus="false"
:date-formatter="(date) => dateFormatter(date)"
@ -103,7 +103,8 @@
$i18n.get('datepicker_month_october'),
$i18n.get('datepicker_month_november'),
$i18n.get('datepicker_month_december')
]" />
]"
@update:model-value="($event) => { resetPage(); emit($event); }" />
<!-- filterTypeOptions FOR TYPE
v-else
:type="filterTypeOptions.type == 'month' ? 'month' : null"
@ -113,16 +114,18 @@
</template>
<script>
import { wpAjax, dateInter } from "../../../js/mixins";
import { dateInter } from "../../../js/mixins";
import { filterTypeMixin } from '../../../js/filter-types-mixin';
import moment from 'moment';
export default {
mixins: [
wpAjax,
dateInter,
filterTypeMixin
],
emits: [
'input',
],
data(){
return {
value: null,
@ -146,8 +149,11 @@
}
},
watch: {
'query'() {
this.updateSelectedValues();
'query': {
handler() {
this.updateSelectedValues();
},
deep: true,
},
},
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_supported_types(['date']);
$this->set_component('tainacan-filter-date');
// $this->set_form_component('tainacan-filter-form-date');
$this->set_use_max_options(false);
// $this->set_default_options([
// 'type' => 'day'
// ]);
$this->set_preview_template('
<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 {

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>
<help-button
: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>
<div
v-if="!showEditStepOptions"
class="is-flex">
<b-select
name="step_options"
v-model="step"
@input="onUpdateStep">
<option value="0.001">0.001</option>
<option value="0.01">0.01</option>
<option value="0.1">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>
name="step_options"
@update:model-value="onUpdateStep">
<option value="0.001">
0.001
</option>
<option value="0.01">
0.01
</option>
<option value="0.1">
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
v-if="step && ![0.001,0.01,0.1,1,2,5,10,100,1000].find( (element) => element == step )"
:value="step">
@ -40,7 +58,7 @@
popperClass: ['tainacan-tooltip', 'tooltip']
}"
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>
</button>
</div>
@ -48,14 +66,14 @@
v-if="showEditStepOptions"
class="is-flex">
<b-input
name="max_options"
v-model="step"
@input="onUpdateStep"
name="max_options"
type="number"
step="1" />
step="1"
@update:model-value="onUpdateStep" />
<button
@click.prevent="showEditStepOptions = false"
class="button is-white is-pulled-right">
class="button is-white is-pulled-right"
@click.prevent="showEditStepOptions = false">
<span
v-tooltip="{
content: $i18n.get('close'),
@ -64,7 +82,7 @@
popperClass: ['tainacan-tooltip', 'tooltip']
}"
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>
</button>
</div>
@ -77,8 +95,11 @@
export default {
props: {
value: [String, Number, Array]
modelValue: Object
},
emits: [
'update:model-value',
],
data() {
return {
step: [Number, String],
@ -86,11 +107,11 @@
}
},
created() {
this.step = this.value && this.value.step ? this.value.step : 1;
this.step = this.modelValue && this.modelValue.step ? this.modelValue.step : 1;
},
methods: {
onUpdateStep(value) {
this.$emit('input', { step: value });
onUpdateStep(modelValue) {
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>
<div>
<b-numberinput
v-model="valueInit"
:aria-labelledby="'filter-label-id-' + filter.id"
:aria-minus-label="$i18n.get('label_decrease')"
:aria-plus-label="$i18n.get('label_increase')"
size="is-small"
@input="($event) => { resetPage(); validadeValues($event) }"
:step="filterTypeOptions.step"
v-model="valueInit"
/>
@update:model-value="($event) => { resetPage(); validadeValues($event) }"
/>
<p
style="font-size: 0.75em; margin-bottom: 0.125em;"
class="has-text-centered is-marginless">
{{ $i18n.get('label_until') }}
</p>
<b-numberinput
v-model="valueEnd"
:aria-labelledby="'filter-label-id-' + filter.id"
:aria-minus-label="$i18n.get('label_decrease')"
:aria-plus-label="$i18n.get('label_increase')"
size="is-small"
@input="($event) => { resetPage(); validadeValues($event) }"
:step="filterTypeOptions.step"
v-model="valueEnd"/>
@update:model-value="($event) => { resetPage(); validadeValues($event) }" />
</div>
</template>
@ -30,6 +30,9 @@
import { filterTypeMixin } from '../../../js/filter-types-mixin';
export default {
mixins: [ filterTypeMixin ],
emits: [
'input',
],
data(){
return {
valueInit: null,
@ -37,9 +40,12 @@
}
},
watch: {
'query'() {
this.updateSelectedValues();
},
'query': {
handler() {
this.updateSelectedValues();
},
deep: true
}
},
mounted() {
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>
<help-button
: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>
<div>
<b-field>
<b-checkbox
v-model="showIntervalOnTag"
@input="onUpdateShowIntervalOnTag()">
@update:model-value="onUpdateShowIntervalOnTag">
{{ $i18n.get('info_show_interval_on_tag') }}
</b-checkbox>
</b-field>
@ -22,58 +22,58 @@
{{ $i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'intervals') }}<span>&nbsp;</span>
<help-button
: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>
<transition-group name="filter-item">
<div
class="options-input"
v-for="(interval, index) of intervals"
:key="0 + index">
:key="0 + index"
class="options-input">
<b-field>
<b-input
v-model="interval.label"
expanded
:placeholder="$i18n.get('label')"
@input="onUpdate(interval)"
v-model="interval.label" />
@update:model-value="onUpdate(interval)" />
</b-field>
<b-field>
<b-input
v-model="interval.from"
expanded
type="number"
step="0.01"
:placeholder="$i18n.get('info_initial_value')"
@input="onUpdate(interval, true)"
v-model="interval.from" />
@update:model-value="onUpdate(interval, true)" />
<b-input
v-model="interval.to"
expanded
type="number"
step="0.01"
:placeholder="$i18n.get('info_final_value')"
@input="onUpdate(interval, true)"
v-model="interval.to" />
@update:model-value="onUpdate(interval, true)" />
</b-field>
<p class="control">
<a
role="button"
@click="addInterval(index)"
class="add-link"
:title="$i18n.get('add_value')">
:title="$i18n.get('add_value')"
@click="addInterval(index)">
<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>
&nbsp;{{ $i18n.get('add_value') }}
&nbsp;{{ $i18n.get('add_value') }}
</a>
</p>
<p
v-if="intervals.length > 1"
class="control">
v-if="intervals.length > 1"
class="control">
<a
role="button"
@click="removeInterval(index)"
class="add-link"
:title="$i18n.get('remove_value')">
:title="$i18n.get('remove_value')"
@click="removeInterval(index)">
<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>
&nbsp;{{ $i18n.get('remove_value') }}
</a>
@ -89,10 +89,13 @@
export default {
props: {
filter: Object,
value: [String, Number, Array],
modelValue: Object,
id: '',
disabled: false,
},
emits: [
'update:model-value',
],
data() {
return {
showIntervalOnTag: true,
@ -102,14 +105,14 @@
},
created() {
this.intervals =
this.value && this.value.intervals && this.value.intervals.length > 0 ?
this.value.intervals :
this.modelValue && this.modelValue.intervals && this.modelValue.intervals.length > 0 ?
this.modelValue.intervals :
[{
label: '',
to: 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: {
onUpdate: _.debounce( function(interval, validade) {
@ -124,7 +127,7 @@
this.showErrorMessage()
} else {
this.isValid = true;
this.$emit('input', {
this.$emit('update:model-value', {
intervals: this.intervals,
showIntervalOnTag: this.showIntervalOnTag
});
@ -132,7 +135,7 @@
}, 600),
onUpdateShowIntervalOnTag() {
if (this.isValid) {
this.$emit('input', {
this.$emit('update:model-value', {
intervals: this.intervals,
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>
<div>
<b-select
v-model="selectedInterval"
expanded
:placeholder="$i18n.get('instruction_select_a_interval')"
@input="($event) => { resetPage; changeInterval($event) }"
v-model="selectedInterval">
@update:model-value="($event) => { resetPage; changeInterval($event) }">
<option value="">
{{ $i18n.get('label_selectbox_init') }}...
</option>
<option
v-for="(interval, index) in filterTypeOptions.intervals"
:value="index"
:key="index">
:key="index"
:value="index">
{{ interval.label }}
</option>
</b-select>
@ -22,6 +22,9 @@
import { filterTypeMixin } from '../../../js/filter-types-mixin';
export default {
mixins: [ filterTypeMixin ],
emits: [
'input',
],
data() {
return {
valueInit: 0,
@ -30,8 +33,11 @@
}
},
watch: {
'query'() {
this.updateSelectedValues();
'query': {
handler() {
this.updateSelectedValues();
},
deep: true
}
},
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>
<help-button
:title="$i18n.getHelperTitle('tainacan-filter-numeric', 'step')"
:message="$i18n.getHelperMessage('tainacan-filter-numeric', 'step')"/>
:message="$i18n.getHelperMessage('tainacan-filter-numeric', 'step')" />
</label>
<div
v-if="!showEditStepOptions"
class="is-flex">
<b-select
name="step_options"
v-model="step"
@input="onUpdateStep">
<option value="0.001">0.001</option>
<option value="0.01">0.01</option>
<option value="0.1">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>
name="step_options"
@update:model-value="onUpdateStep">
<option value="0.001">
0.001
</option>
<option value="0.01">
0.01
</option>
<option value="0.1">
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
v-if="step && ![0.001,0.01,0.1,1,2,5,10,100,1000].find( (element) => element == step )"
:value="step">
@ -40,7 +58,7 @@
popperClass: ['tainacan-tooltip', 'tooltip']
}"
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>
</button>
</div>
@ -48,14 +66,14 @@
v-if="showEditStepOptions"
class="is-flex">
<b-input
name="max_options"
v-model="step"
@input="onUpdateStep"
name="max_options"
type="number"
step="1" />
step="1"
@update:model-value="onUpdateStep" />
<button
@click.prevent="showEditStepOptions = false"
class="button is-white is-pulled-right">
class="button is-white is-pulled-right"
@click.prevent="showEditStepOptions = false">
<span
v-tooltip="{
content: $i18n.get('close'),
@ -64,7 +82,7 @@
popperClass: ['tainacan-tooltip', 'tooltip']
}"
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>
</button>
</div>
@ -76,8 +94,11 @@
export default {
props: {
value: [String, Number, Array]
modelValue: Object
},
emits: [
'update:model-value',
],
data() {
return {
step: [Number, String],
@ -85,11 +106,11 @@
}
},
created() {
this.step = this.value && this.value.step ? this.value.step : 1;
this.step = this.modelValue && this.modelValue.step ? this.modelValue.step : 1;
},
methods: {
onUpdateStep(value) {
this.$emit('input', { step: value });
onUpdateStep(modelValue) {
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>
<div class="numeric-filter-container">
<b-dropdown
<b-dropdown
:mobile-modal="true"
@input="($event) => { resetPage(); onChangeComparator($event) }"
aria-role="list"
trap-focus>
<button
:aria-label="$i18n.get('label_comparator')"
class="button is-white"
slot="trigger">
<span class="icon is-small">
<i v-html="comparatorSymbol" />
</span>
<span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
</span>
</button>
trap-focus
@update:model-value="($event) => { resetPage(); onChangeComparator($event) }">
<template #trigger>
<button
:aria-label="$i18n.get('label_comparator')"
class="button is-white">
<span class="icon is-small">
<i v-html="comparatorSymbol" />
</span>
<span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
</span>
</button>
</template>
<b-dropdown-item
role="button"
:class="{ 'is-active': comparator == '=' }"
@ -61,13 +62,13 @@
</b-dropdown>
<b-numberinput
v-model="value"
:aria-labelledby="'filter-label-id-' + filter.id"
:aria-minus-label="$i18n.get('label_decrease')"
:aria-plus-label="$i18n.get('label_increase')"
size="is-small"
:step="Number(filterTypeOptions.step)"
@input="($event) => { resetPage($event); emit($event); }"
v-model="value"/>
@update:model-value="($event) => { resetPage($event); emit($event); }" />
</div>
</template>
@ -78,6 +79,9 @@
mixins: [
filterTypeMixin
],
emits: [
'input',
],
data(){
return {
value: null,
@ -99,8 +103,11 @@
}
},
watch: {
'query'() {
this.updateSelectedValues();
'query': {
handler() {
this.updateSelectedValues();
},
deep: true
}
},
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">
<b-select
v-if="!isLoadingOptions"
:value="selected"
:model-value="selected"
:aria-labelledby="'filter-label-id-' + filter.id"
@input="($event) => { resetPage(); onSelect($event) }"
:placeholder="$i18n.get('label_selectbox_init')"
expanded>
<option value="">{{ $i18n.get('label_selectbox_init') }}...</option>
expanded
@update:model-value="($event) => { resetPage(); onSelect($event) }">
<option value="">
{{ $i18n.get('label_selectbox_init') }}...
</option>
<option
v-for="(option, index) in options"
:key="index"
@ -30,6 +32,10 @@
export default {
mixins: [filterTypeMixin, dynamicFilterTypeMixin],
emits: [
'input',
'update-parent-collapse'
],
data(){
return {
options: [],
@ -42,7 +48,8 @@
if (this.isUsingElasticSearch)
this.loadOptions();
},
immediate: true
immediate: true,
deep: true
}
},
mounted() {
@ -50,10 +57,10 @@
this.loadOptions();
},
created() {
this.$eventBusSearch.$on('has-to-reload-facets', this.reloadOptions);
this.$eventBusSearchEmitter.on('hasToReloadFacets', this.reloadOptions);
},
beforeDestroy() {
this.$eventBusSearch.$off('has-to-reload-facets', this.reloadOptions);
beforeUnmount() {
this.$eventBusSearchEmitter.off('hasToReloadFacets', this.reloadOptions);
},
methods: {
reloadOptions(shouldReload) {
@ -76,7 +83,7 @@
this.updateSelectedValues();
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 => {
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="[]"
field="label"
attached
@input="($event) => { resetPage(); onSelect($event) }"
@typing="search"
:aria-close-label="$i18n.get('remove_value')"
:aria-labelledby="'filter-label-id-' + filter.id"
:placeholder="getInputPlaceholder"
check-infinite-scroll
@update:model-value="($event) => { resetPage(); onSelect($event) }"
@typing="search"
@infinite-scroll="searchMore">
<template slot-scope="props">
<template #default="props">
<div class="media">
<div
class="media-left"
v-if="props.option.img">
v-if="props.option.img"
class="media-left">
<img
:alt="$i18n.get('label_thumbnail')"
width="24"
@ -37,7 +37,7 @@
</template>
<template
v-if="!isLoadingOptions"
slot="empty">
#empty>
{{ $i18n.get('info_no_options_found' ) }}
</template>
</b-taginput>
@ -50,6 +50,9 @@
export default {
mixins: [filterTypeMixin, dynamicFilterTypeMixin],
emits: [
'input',
],
data() {
return {
results:'',
@ -73,8 +76,11 @@
}
},
watch: {
'query'() {
this.updateSelectedValues();
'query': {
handler() {
this.updateSelectedValues();
},
deep: true
}
},
created() {

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

@ -1,45 +1,45 @@
<template>
<b-field
class="filter-item-forms"
:ref="isMobileScreen ? ('filter-field-id-' + filter.id) : null"
@touchstart.native="setFilterFocus(filter.id)"
@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'}">
class="filter-item-forms"
: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
v-if="displayFilter"
v-model="singleCollapseOpen"
class="show"
:open.sync="singleCollapseOpen"
animation="filter-item">
<button
:for="'filter-input-id-' + filter.id"
:aria-controls="'filter-input-id-' + filter.id"
:aria-expanded="singleCollapseOpen"
v-tooltip="{
delay: {
shown: 500,
hide: 300,
},
content: filter.name,
html: false,
autoHide: false,
placement: 'top-start',
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
}"
:id="'filter-label-id-' + filter.id"
:aria-label="filter.name"
class="label"
slot="trigger"
slot-scope="props">
<span class="icon">
<i
:class="{
'tainacan-icon-arrowdown' : props.open,
'tainacan-icon-arrowright' : !props.open
}"
class="tainacan-icon tainacan-icon-1-25em"/>
</span>
<span class="collapse-label">{{ filter.name }}</span>
</button>
<template #trigger="props">
<button
:id="'filter-label-id-' + filter.id"
v-tooltip="{
delay: {
shown: 500,
hide: 300,
},
content: filter.name,
html: false,
autoHide: false,
placement: 'top-start',
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
}"
:for="'filter-input-id-' + filter.id"
:aria-controls="'filter-input-id-' + filter.id"
:aria-expanded="singleCollapseOpen"
:aria-label="filter.name"
class="label">
<span class="icon">
<i
:class="{
'tainacan-icon-arrowdown' : props && props.open,
'tainacan-icon-arrowright' : props && !props.open
}"
class="tainacan-icon tainacan-icon-1-25em" />
</span>
<span class="collapse-label">{{ filter.name }}</span>
</button>
</template>
<div :id="'filter-input-id-' + filter.id">
<component
:is="filter.filter_type_object ? filter.filter_type_object.component : null"
@ -49,9 +49,9 @@
:is-repository-level="isRepositoryLevel"
:is-loading-items="isLoadingItems"
:current-collection-id="$eventBusSearch.collectionId"
:filters-as-modal="filtersAsModal"
@input="onInput"
@updateParentCollapse="onFilterUpdateParentCollapse"
:filters-as-modal="filtersAsModal" />
@update-parent-collapse="onFilterUpdateParentCollapse" />
</div>
</b-collapse>
<div
@ -60,8 +60,6 @@
<div class="collapse-trigger">
<button
:for="'filter-input-id-' + filter.id"
:aria-controls="'filter-input-id-' + filter.id"
v-tooltip="{
delay: {
shown: 500,
@ -73,10 +71,12 @@
placement: 'top-start',
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
}"
@click="displayFilter = true"
class="label">
:for="'filter-input-id-' + filter.id"
:aria-controls="'filter-input-id-' + filter.id"
class="label"
@click="displayFilter = true">
<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 class="collapse-label">{{ filter.name }}</span>
</button>
@ -86,32 +86,22 @@
</template>
<script>
import TainacanFilterNumeric from './numeric/Numeric.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';
import { defineAsyncComponent } from 'vue';
export default {
name: 'TainacanFilterItem',
components: {
TainacanFilterNumeric,
TainacanFilterDate,
TainacanFilterSelectbox,
TainacanFilterAutocomplete,
TainacanFilterCheckbox,
TainacanFilterTaginput,
TainacanFilterTaxonomyCheckbox,
TainacanFilterTaxonomyTaginput,
TainacanFilterDateInterval,
TainacanFilterNumericInterval,
TainacanFilterNumericListInterval
TainacanFilterNumeric: defineAsyncComponent(() => import('./numeric/TainacanFilterNumeric.vue')),
TainacanFilterDate: defineAsyncComponent(() => import('./date/TainacanFilterDate.vue')),
TainacanFilterSelectbox: defineAsyncComponent(() => import('./selectbox/TainacanFilterSelectbox.vue')),
TainacanFilterAutocomplete: defineAsyncComponent(() => import('./autocomplete/TainacanFilterAutocomplete.vue')),
TainacanFilterCheckbox: defineAsyncComponent(() => import('./checkbox/TainacanFilterCheckbox.vue')),
TainacanFilterTaginput: defineAsyncComponent(() => import('./taginput/TainacanFilterTaginput.vue')),
TainacanFilterTaxonomyCheckbox: defineAsyncComponent(() => import('./taxonomy/TainacanFilterCheckbox.vue')),
TainacanFilterTaxonomyTaginput: defineAsyncComponent(() => import('./taxonomy/TainacanFilterTaginput.vue')),
TainacanFilterDateInterval: defineAsyncComponent(() => import('./date-interval/TainacanFilterDateInterval.vue')),
TainacanFilterNumericInterval: defineAsyncComponent(() => import('./numeric-interval/TainacanFilterNumericInterval.vue')),
TainacanFilterNumericListInterval: defineAsyncComponent(() => import('./numeric-list-interval/TainacanFilterNumericListInterval.vue'))
},
props: {
filter: Object,
@ -150,7 +140,7 @@
},
methods: {
onInput(inputEvent) {
this.$eventBusSearch.$emit('input', inputEvent);
this.$eventBusSearchEmitter.emit('input', inputEvent);
},
onFilterUpdateParentCollapse(open) {
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">
<input
v-model="selected"
@input="resetPage"
:value="option.value"
type="checkbox">
type="checkbox"
@input="resetPage">
<span class="check" />
<span class="control-label">
<span class="checkbox-label-text">{{ option.label }}</span>
@ -27,8 +27,8 @@
</span>
</label>
<button
class="view-all-button link-style"
v-if="option.showViewAllButton"
class="view-all-button link-style"
@click="openCheckboxModal(option.parent)">
{{ $i18n.get('label_view_all') }}
</button>
@ -44,28 +44,28 @@
<checkbox-radio-filter-input
:is-modal="false"
:filter="filter"
:taxonomy_id="taxonomyId"
:taxonomy-id="taxonomyId"
:selected="selected"
:metadatum-id="metadatumId"
:taxonomy="taxonomy"
:collection-id="collectionId"
:is-taxonomy="true"
:query="query"
:current-collection-id="currentCollectionId"
@input="(newSelected) => {
const existingValue = selected.indexOf(newSelected);
if (existingValue >= 0)
selected.splice(existingValue, 1);
else
selected.push(newSelected);
}"
:metadatum-id="metadatumId"
:taxonomy="taxonomy"
:collection-id="collectionId"
:is-taxonomy="true"
:query="query"
:current-collection-id="currentCollectionId" />
}" />
</template>
</div>
</template>
<script>
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 CheckboxRadioFilterInput from '../../../components/other/checkbox-radio-filter-input.vue';
import { filterTypeMixin } from '../../../js/filter-types-mixin';
@ -75,9 +75,12 @@
mixins: [ filterTypeMixin ],
props: {
isRepositoryLevel: Boolean,
currentCollectionId: String,
filtersAsModal: Boolean
},
emits: [
'input',
'update-parent-collapse'
],
data(){
return {
isLoadingOptions: true,
@ -94,19 +97,23 @@
}
},
watch: {
selected(newVal, oldVal) {
const isEqual = (Array.isArray(newVal) && Array.isArray(oldVal) && (newVal.length == oldVal.length)) && newVal.every((element, index) => {
return element === oldVal[index];
});
if (!isEqual)
this.onSelect();
selected: {
handler(newVal, oldVal) {
const isEqual = (Array.isArray(newVal) && Array.isArray(oldVal) && (newVal.length == oldVal.length)) && newVal.every((element, index) => {
return element === oldVal[index];
});
if (!isEqual)
this.onSelect();
},
deep: true
},
facetsFromItemSearch: {
handler() {
if (this.isUsingElasticSearch)
this.loadOptions();
},
immediate: true
immediate: true,
deep:true
},
isLoadingItems: {
handler() {
@ -125,19 +132,19 @@
this.taxonomyId = this.filter.metadatum.metadata_type_object.options.taxonomy_id;
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(){
if (!this.isUsingElasticSearch)
this.loadOptions();
},
beforeDestroy() {
beforeUnmount() {
// Cancels previous Request
if (this.getOptionsValuesCancel != undefined)
this.getOptionsValuesCancel.cancel('Facet search Canceled.');
this.$eventBusSearch.$off('has-to-reload-facets', this.reloadOptions);
this.$eventBusSearchEmitter.off('hasToReloadFacets', this.reloadOptions);
},
methods: {
...mapGetters('search', [
@ -175,7 +182,7 @@
promise = new Object({
request:
new Promise((resolve, reject) => {
axios.get(route, { cancelToken: source.token})
tainacanApi.get(route, { cancelToken: source.token})
.then( res => {
resolve(res)
})
@ -191,7 +198,7 @@
this.prepareOptionsForTaxonomy(res.data.values ? res.data.values : res.data);
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 => {
if (isCancel(error)) {
@ -210,10 +217,10 @@
if (facet == this.filter.id) {
if (Array.isArray(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 {
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: {
parent: parent,
filter: this.filter,
taxonomy_id: this.taxonomyId,
taxonomyId: this.taxonomyId,
selected: this.selected,
metadatumId: this.metadatumId,
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-labelledby="'filter-label-id-' + filter.id"
:class="{'has-selected': selected != undefined && selected != []}"
@typing="search"
@input="($event) => { resetPage(); onSelect($event) }"
:placeholder="$i18n.get('info_type_to_add_terms')"
check-infinite-scroll
@typing="search"
@update:model-value="($event) => { resetPage(); onSelect($event) }"
@infinite-scroll="searchMore">
<template slot-scope="props">
<template #default="props">
<div class="media">
<div class="media-content">
<span class="ellipsed-text">{{ props.option.label }}</span>
@ -30,7 +30,7 @@
</template>
<template
v-if="!isLoadingOptions"
slot="empty">
#empty>
{{ $i18n.get('info_no_options_found' ) }}
</template>
</b-taginput>
@ -39,11 +39,14 @@
<script>
import qs from 'qs';
import { tainacan as axios } from '../../../js/axios';
import { tainacanApi } from '../../../js/axios';
import { filterTypeMixin } from '../../../js/filter-types-mixin';
export default {
mixins: [ filterTypeMixin ],
emits: [
'input',
],
data(){
return {
isLoadingOptions: false,
@ -64,8 +67,11 @@
},
immediate: true
},
'query'() {
this.updateSelectedValues();
'query': {
handler() {
this.updateSelectedValues();
},
deep: true
}
},
created() {
@ -126,7 +132,7 @@
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) {
if (valuesToIgnore != undefined && valuesToIgnore.length > 0) {

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

@ -6,32 +6,38 @@
<tr>
<!-- Title -->
<th>
<div class="th-wrap">{{ $i18n.get('label_activity_title') }}</div>
<div class="th-wrap">
{{ $i18n.get('label_activity_title') }}
</div>
</th>
<!-- Created by -->
<th>
<div class="th-wrap">{{ $i18n.get('label_created_by') }}</div>
<div class="th-wrap">
{{ $i18n.get('label_created_by') }}
</div>
</th>
<!-- Activity date -->
<th>
<div class="th-wrap">{{ $i18n.get('label_activity_date') }}</div>
<div class="th-wrap">
{{ $i18n.get('label_activity_date') }}
</div>
</th>
<!--&lt;!&ndash; Approbation &ndash;&gt;-->
<!--<th>-->
<!--<div class="th-wrap">{{ $i18n.get('label_approbation') }}</div>-->
<!--<div class="th-wrap">{{ $i18n.get('label_approbation') }}</div>-->
<!--</th>-->
</tr>
</thead>
<tbody>
<tr
:key="index"
v-for="(activity, index) of activities">
v-for="(activity, index) of activities"
:key="index">
<!-- Name -->
<td
class="column-default-width column-main-content"
@click="openActivityDetailsModal(activity)"
: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
v-tooltip="{
delay: {
@ -49,9 +55,9 @@
<!-- User -->
<td
class="table-creation column-small-width"
@click="openActivityDetailsModal(activity)"
: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
v-tooltip="{
delay: {
@ -63,14 +69,14 @@
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
v-html="activity.user_name"/>
v-html="activity.user_name" />
</td>
<!-- Activity Date -->
<td
class="table-creation column-small-width"
@click="openActivityDetailsModal(activity)"
: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
v-tooltip="{
delay: {
@ -82,7 +88,7 @@
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
v-html="activity.date"/>
v-html="activity.date" />
</td>
</tr>
</tbody>
@ -95,7 +101,7 @@
<div class="content has-text-grey has-text-centered">
<p>
<span class="icon">
<i class="tainacan-icon tainacan-icon-30px tainacan-icon-activities"/>
<i class="tainacan-icon tainacan-icon-30px tainacan-icon-activities" />
</span>
</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;"
class="table-container">
<b-loading
:is-full-page="false"
:active.sync="isLoading" />
v-model="isLoading"
:is-full-page="false" />
<div
v-if="attachments.length > 0"
class="table-wrapper">
@ -23,20 +23,20 @@
<file-item
:show-name="true"
:modal-on-click="true"
:file="attachment"/>
:file="attachment" />
<span
v-if="isEditable && form.document != attachment.id"
class="file-item-control">
<a
@click="onDeleteAttachment(attachment)"
v-tooltip="{
content: $i18n.get('delete'),
autoHide: true,
placement: 'bottom',
popperClass: ['tainacan-tooltip', 'tooltip']
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
class="icon"
@click="onDeleteAttachment(attachment)">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete" />
</a>
</span>
</div>
@ -49,7 +49,7 @@
<div class="content has-text-grey has-text-centered">
<p>
<span class="icon">
<i class="tainacan-icon tainacan-icon-30px tainacan-icon-attachments"/>
<i class="tainacan-icon tainacan-icon-30px tainacan-icon-attachments" />
</span>
</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
class="pagination-area"
v-if="attachments.length > 0">
v-if="attachments.length > 0"
class="pagination-area">
<div class="shown-items">
{{
$i18n.getWithVariables('info_showing_%s', [ collection && collection.item_attachment_label ? collection.item_attachment_label : $i18n.get('label_attachments') ]) + ' ' +
(attachmentsPerPage * (attachmentsPage - 1) + 1) +
$i18n.get('info_to') +
getLastAttachmentsNumber() +
$i18n.get('info_of') + totalAttachments + '.'
(attachmentsPerPage * (attachmentsPage - 1) + 1) +
$i18n.get('info_to') +
getLastAttachmentsNumber() +
$i18n.get('info_of') + totalAttachments + '.'
}}
</div>
<div class="pagination">
<b-pagination
@change="onPageChange"
v-model="attachmentsPage"
:total="totalAttachments"
:current.sync="attachmentsPage"
order="is-centered"
size="is-small"
:per-page="attachmentsPerPage"
:aria-next-label="$i18n.get('label_next_page')"
:aria-previous-label="$i18n.get('label_previous_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>
@ -103,6 +103,9 @@
shouldLoadAttachments: Boolean,
isEditable: Boolean,
},
emits: [
'on-delete-attachment',
],
data() {
return {
attachmentsPage: 1,
@ -167,9 +170,8 @@
// excludeDocumentId: this.form.document,
// excludeThumbnailId: this.item.thumbnail_id
})
.then((response) => {
.then(() => {
this.isLoading = false;
this.totalAttachments = response.total;
})
.catch((error) => {
this.isLoading = false;
@ -177,7 +179,7 @@
})
},
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>
<!-- Name -->
<th>
<div class="th-wrap">{{ $i18n.get('label_name') }}</div>
<div class="th-wrap">
{{ $i18n.get('label_name') }}
</div>
</th>
<!-- Description -->
<th>
<div class="th-wrap">{{ $i18n.get('label_description') }}</div>
<div class="th-wrap">
{{ $i18n.get('label_description') }}
</div>
</th>
<!-- Capability date -->
<th>
<div class="th-wrap">{{ $i18n.get('label_user_roles') }}</div>
<div class="th-wrap">
{{ $i18n.get('label_user_roles') }}
</div>
</th>
<!-- Actions -->
<th class="actions-header">
&nbsp;
<!-- nothing to show on header for actions cell-->
<!-- nothing to show on header for actions cell-->
</th>
</tr>
</thead>
<tbody v-if="!isLoading">
<template v-for="(capability, index) of capabilities">
<tr :key="index">
<!-- Name -->
<td
class="column-default-width column-main-content"
:label="$i18n.get('label_name')"
:aria-label="$i18n.get('label_name') + ': ' + capability.display_name">
<p
v-tooltip="{
delay: {
shown: 500,
hide: 120,
},
content: capability.display_name,
autoHide: false,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}">
{{ capability.display_name }}
</p>
</td>
<!-- Description -->
<td
class="table-creation column-large-width"
:label="$i18n.get('label_description')"
:aria-label="$i18n.get('label_description') + ': ' + capability.description">
<p
v-tooltip="{
delay: {
shown: 500,
hide: 120,
},
content: capability.description,
autoHide: false,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
v-html="capability.description"/>
</td>
<!-- Associated Roles -->
<complete-roles-list
v-if="capability.roles"
:complete-roles-list="getCompleteRolesList(capability.roles, capability.roles_inherited)">
<tr
v-for="(capability, index) of capabilities"
:key="index">
<!-- Name -->
<td
class="column-default-width column-main-content"
:label="$i18n.get('label_name')"
:aria-label="$i18n.get('label_name') + ': ' + capability.display_name">
<p
v-tooltip="{
delay: {
shown: 500,
hide: 120,
},
content: capability.display_name,
autoHide: false,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}">
{{ capability.display_name }}
</p>
</td>
<!-- Description -->
<td
class="table-creation column-large-width"
:label="$i18n.get('label_description')"
:aria-label="$i18n.get('label_description') + ': ' + capability.description">
<p
v-tooltip="{
delay: {
shown: 500,
hide: 120,
},
content: capability.description,
autoHide: false,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
v-html="capability.description" />
</td>
<!-- Associated Roles -->
<complete-roles-list
v-if="capability.roles"
:complete-roles-list="getCompleteRolesList(capability.roles, capability.roles_inherited)">
<template #props>
<td
slot-scope="props"
class="table-creation column-small-width"
:label="$i18n.get('label_associated_roles')"
:aria-label="$i18n.get('label_associated_roles') + ': ' + props['complete-roles-list']">
@ -83,33 +90,33 @@
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
v-html="props['complete-roles-list']"/>
v-html="props['complete-roles-list']" />
</td>
</complete-roles-list>
<!-- Actions -->
<td
class="actions-cell column-default-width"
:label="$i18n.get('label_actions')">
<div class="actions-container">
<a
id="button-edit"
:aria-label="$i18n.get('edit')"
@click="openCapabilitiyEditModal(index)">
<span
v-tooltip="{
content: $i18n.get('edit'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
</span>
</a>
</div>
</td>
</tr>
</template>
</template>
</complete-roles-list>
<!-- Actions -->
<td
class="actions-cell column-default-width"
:label="$i18n.get('label_actions')">
<div class="actions-container">
<a
id="button-edit"
:aria-label="$i18n.get('edit')"
@click="openCapabilitiyEditModal(index)">
<span
v-tooltip="{
content: $i18n.get('edit'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit" />
</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
@ -121,8 +128,9 @@
// Auxiliary component for avoinding multiple calls to getCompleteRolesList
const CompleteRolesList = {
inheritAttrs: false,
render() {
return this.$scopedSlots.default(this.$attrs)
return !!this.$slots.default && typeof this.$slots.default == 'function' ? this.$slots.default(this.$attrs) : '';
}
}
export default {
@ -132,7 +140,7 @@
},
props: {
isLoading: false,
capabilities: Array
capabilities: Object
},
methods: {
openCapabilitiyEditModal(capabilityKey) {

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

File diff suppressed because it is too large Load Diff

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

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

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

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

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

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

@ -1,133 +1,158 @@
<template>
<div
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">
<h3 class="label">{{ $i18n.get('label_available_metadata_types') }}</h3>
<draggable
v-model="availableMetadatumList"
:sort="false"
:group="{ name:'metadata', pull: 'clone', put: false, revertClone: true }"
drag-class="sortable-drag">
<div
:id="metadatum.component"
@click.prevent.once="addMetadatumViaButton(metadatum)"
class="available-metadatum-item"
:class="{ 'hightlighted-metadatum' : hightlightedMetadatum == metadatum.name, 'inherited-metadatum': metadatum.inherited || isRepositoryLevel }"
v-for="(metadatum, index) in availableMetadatumList"
:key="index">
<span
v-tooltip="{
content: $i18n.get('instruction_click_or_drag_metadatum_create'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon grip-icon">
<!-- <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/> -->
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="currentColor">
<path
d="M0 0h24v24H0V0z"
fill="transparent"/>
<path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
</span>
<span class="metadatum-name">
{{ metadatum.name }}
<h3 class="label">
{{ $i18n.get('label_available_metadata_types') }}
</h3>
<sortable
:list="availableMetadatumList"
item-key="id"
:options="{
group: {
name: 'metadata',
pull: 'clone',
put: false,
revertClone: true
},
sort: false,
dragClass: 'sortable-drag'
}">
<template #item="{ element: metadatum }">
<div
:id="metadatum.component"
class="available-metadatum-item"
:class="{ 'highlighted-metadatum' : highlightedMetadatum == metadatum.name, 'inherited-metadatum': metadatum.inherited || isRepositoryLevel }"
@click.prevent.once="addMetadatumViaButton(metadatum)">
<span
v-tooltip="{
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '', 'metadata-type-preview-tooltip'],
content: getPreviewTemplateContent(metadatum),
html: true,
delay: {
shown: 0,
hide: 100,
},
placement: 'top',
content: $i18n.get('instruction_click_or_drag_metadatum_create'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon preview-help-icon has-text-secondary">
<i class="tainacan-icon tainacan-icon-help"/>
class="icon grip-icon">
<!-- <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/> -->
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="currentColor">
<path
d="M0 0h24v24H0V0z"
fill="transparent" />
<path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
</svg>
</span>
</span>
<span
class="loading-spinner"
v-if="hightlightedMetadatum == metadatum.name"/>
</div>
</draggable>
<span class="metadatum-name">
{{ metadatum.name }}
<span
v-tooltip="{
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '', 'metadata-type-preview-tooltip'],
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-model="availableMetadataSectionsList"
:sort="false"
:group="{ name:'metadata-sections', pull: 'clone', put: false, revertClone: true }"
drag-class="sortable-drag">
<div
:id="metadataSection.id"
@click.prevent="addMetadataSectionViaButton()"
class="available-metadata-section-item"
v-for="(metadataSection, index) in availableMetadataSectionsList"
:key="index">
<span
v-tooltip="{
content: $i18n.get('instruction_click_or_drag_metadatum_create'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon grip-icon">
<!-- <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/> -->
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="currentColor">
<path
d="M0 0h24v24H0V0z"
fill="transparent"/>
<path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
</span>
<span class="metadatum-name">
{{ metadataSection.label }}
:list="availableMetadataSectionsList"
item-key="id"
:options="{
group: {
name: 'metadata-sections',
pull: 'clone',
put: false,
revertClone: true
},
sort: false,
dragClass: 'sortable-drag'
}">
<template #item="{ element: metadataSection }">
<div
:id="metadataSection.id"
class="available-metadata-section-item"
@click.prevent="addMetadataSectionViaButton()">
<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',
content: $i18n.get('instruction_click_or_drag_metadatum_create'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon preview-help-icon has-text-secondary">
<i class="tainacan-icon tainacan-icon-help"/>
class="icon grip-icon">
<!-- <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/> -->
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="currentColor">
<path
d="M0 0h24v24H0V0z"
fill="transparent" />
<path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
</svg>
</span>
</span>
</div>
</draggable>
<span class="metadatum-name">
{{ metadataSection.label }}
<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>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import { Sortable } from "sortablejs-vue3";
export default {
name: 'MetadataTypesList',
components: {
Sortable
},
props: {
isRepositoryLevel: Boolean,
hightlightedMetadatum: String
highlightedMetadatum: String
},
emits: [
'on-finished-loading-metadata-types'
],
data() {
return {
isLoadingMetadataTypes: true,
@ -154,7 +179,7 @@ export default {
this.fetchMetadatumTypes()
.then(() => {
this.$emit('onFinishedLoadingMetadataTypes');
this.$emit('on-finished-loading-metadata-types');
this.isLoadingMetadataTypes = false;
})
.catch(() => {
@ -169,10 +194,10 @@ export default {
'getMetadatumTypes'
]),
addMetadatumViaButton(metadatumType) {
this.$eventBusMetadataList.onAddMetadatumViaButton(metadatumType);
this.$emitter.emit('addMetadatumViaButton', metadatumType);
},
addMetadataSectionViaButton() {
this.$eventBusMetadataList.onAddMetadataSectionViaButton();
this.$emitter.emit('addMetadataSectionViaButton');
},
getPreviewTemplateContent(metadatum) {
return `<div class="metadata-type-preview tainacan-form">
@ -239,6 +264,7 @@ export default {
.grip-icon {
color: var(--tainacan-gray3);
position: relative;
flex-shrink: 0;
}
.icon {
position: relative;
@ -351,7 +377,7 @@ export default {
border-color: transparent white transparent transparent;
}
}
.hightlighted-metadatum {
.highlighted-metadatum {
background-color: var(--tainacan-white);
position: relative;
left: 0px;

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

@ -1,16 +1,16 @@
<template>
<div>
<div>
<div
v-if="processes.length > 0 && !isLoading"
class="table-container">
<!--
<div
v-if="processes.length > 0 && !isLoading"
class="table-container">
<!--
<div class="selection-control">
<div class="field select-all is-pulled-left">
<span>
<b-checkbox
@click.native="selectAllOnPage()"
:value="allOnPageSelected">{{ $i18n.get('label_select_all_processes_page') }}</b-checkbox>
@click="selectAllOnPage()"
:model-value="allOnPageSelected">{{ $i18n.get('label_select_all_processes_page') }}</b-checkbox>
</span>
</div>
<div class="field is-pulled-right">
@ -19,15 +19,14 @@
:disabled="!isSelecting"
id="bulk-actions-dropdown"
trap-focus>
<button
class="button is-white"
slot="trigger">
<span>{{ $i18n.get('label_bulk_actions') }}</span>
<span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
</span>
</button>
<template #trigger>
<button class="button is-white">
<span>{{ $i18n.get('label_bulk_actions') }}</span>
<span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
</span>
</button>
</template>
<b-dropdown-item
id="item-delete-selected-items"
@click="deleteSelected()">
@ -40,132 +39,133 @@
</div>
-->
<div class="processes-list">
<div
:class="{
'opened-process': collapses[index],
'selected-row': selected[index],
'highlighted-process': highlightedProcess == bgProcess.ID
}"
class="processes-list-item"
:key="index"
v-for="(bgProcess, index) of processes">
<div
@click="$set(collapses, index, !collapses[index])"
class="process-handler">
<!-- Collapse -->
<span class="icon">
<i
:class="{ 'tainacan-icon-arrowdown' : collapses[index], 'tainacan-icon-arrowright' : !collapses[index] }"
class="tainacan-icon tainacan-icon-1-25em has-text-blue4" />
</span>
<!-- Checking list -->
<!-- <span
<div class="processes-list">
<div
v-for="(bgProcess, index) of processes"
:key="index"
:class="{
'opened-process': collapses[index],
'selected-row': selected[index],
'highlighted-process': highlightedProcess == bgProcess.ID
}"
class="processes-list-item">
<div
class="process-handler"
@click="Object.assign( collapses, { [index]: !collapses[index] })">
<!-- Collapse -->
<span class="icon">
<i
:class="{ 'tainacan-icon-arrowdown' : collapses[index], 'tainacan-icon-arrowright' : !collapses[index] }"
class="tainacan-icon tainacan-icon-1-25em has-text-blue4" />
</span>
<!-- Checking list -->
<!-- <span
:class="{ 'is-selecting': isSelecting }"
class="checkbox-cell">
<b-checkbox
v-model="selected[index]"/>
</span> -->
<!-- Name -->
<span
class="process-title"
:label="$i18n.get('label_name')"
:aria-label="$i18n.get('label_name') + ': ' + bgProcess.name">
<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
<!-- Name -->
<span
class="process-title"
:label="$i18n.get('label_name')"
:aria-label="$i18n.get('label_name') + ': ' + bgProcess.name">
<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-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: {
shown: 500,
hide: 300,
@ -175,12 +175,12 @@
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
v-if=" bgProcess.status === 'finished-errors' || ( bgProcess.done > 0 && bgProcess.error_log && bgProcess.status === 'finished' ) "
class="icon has-text-success">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-alertcircle has-text-yellow2"/>
</span>
<span
v-tooltip="{
class="icon has-text-success">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-alertcircle has-text-yellow2" />
</span>
<span
v-if=" bgProcess.status === 'cancelled' "
v-tooltip="{
delay: {
shown: 500,
hide: 300,
@ -190,12 +190,12 @@
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
v-if=" bgProcess.status === 'cancelled' "
class="icon has-text-success">
<i class="tainacan-icon has-text-danger tainacan-icon-1-25em tainacan-icon-repprovedcircle"/>
</span>
<span
v-tooltip="{
class="icon has-text-success">
<i class="tainacan-icon has-text-danger tainacan-icon-1-25em tainacan-icon-repprovedcircle" />
</span>
<span
v-if=" bgProcess.status === 'paused' "
v-tooltip="{
delay: {
shown: 500,
hide: 300,
@ -205,12 +205,12 @@
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
v-if=" bgProcess.status === 'paused' "
class="icon has-text-gray">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-pause"/>
</span>
<span
v-tooltip="{
class="icon has-text-gray">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-pause" />
</span>
<span
v-if=" bgProcess.status === 'waiting' "
v-tooltip="{
delay: {
shown: 500,
hide: 300,
@ -220,12 +220,12 @@
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
v-if=" bgProcess.status === 'waiting' "
class="icon has-text-gray">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-waiting"/>
</span>
<span
v-tooltip="{
class="icon has-text-gray">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-waiting" />
</span>
<span
v-if=" bgProcess.status === 'waiting' "
v-tooltip="{
delay: {
shown: 500,
hide: 300,
@ -235,13 +235,13 @@
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
v-if=" bgProcess.status === 'waiting' "
class="icon has-text-gray"
@click.prevent.stop="deleteOneProcess(index)">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
</span>
<span
v-tooltip="{
class="icon has-text-gray"
@click.prevent.stop="deleteOneProcess(index)">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete" />
</span>
<span
v-if="bgProcess.status === 'errored'"
v-tooltip="{
delay: {
shown: 500,
hide: 300,
@ -251,86 +251,83 @@
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
v-if="bgProcess.status === 'errored'"
class="icon has-text-danger">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-processerror" />
class="icon has-text-danger">
<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>
</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>
</transition>
</div>
</div>
</transition>
</div>
</div>
</div>
<div v-else-if="isLoading">
<center>
<span>
{{ $i18n.get('loading_processes') }}
</span>
</center>
<div
v-else-if="isLoading"
class="has-text-centered">
{{ $i18n.get('loading_processes') }}
</div>
</div>
</div>
</template>
<script>
@ -339,7 +336,7 @@
import moment from 'moment'
export default {
name: 'List',
name: 'ProcessesList',
props: {
isLoading: false,
total: 0,
@ -358,27 +355,33 @@
}
},
watch: {
processes() {
this.selected = [];
for (let i = 0; i < this.processes.length; i++)
this.selected.push(false);
processes: {
handler() {
this.selected = [];
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.push(false);
this.collapses = [];
for (let i = 0; i < this.processes.length; i++)
this.collapses.push(false);
},
deep: true
},
selected() {
let allSelected = true;
let isSelecting = false;
for (let i = 0; i < this.selected.length; i++) {
if (this.selected[i] == false) {
allSelected = false;
} else {
isSelecting = true;
selected: {
handler() {
let allSelected = true;
let isSelecting = false;
for (let i = 0; i < this.selected.length; i++) {
if (this.selected[i] == false) {
allSelected = false;
} else {
isSelecting = true;
}
}
}
this.allOnPageSelected = allSelected;
this.isSelecting = isSelecting;
this.allOnPageSelected = allSelected;
this.isSelecting = isSelecting;
},
deep: true
}
},
mounted() {
@ -397,7 +400,7 @@
jQuery( document ).on( 'heartbeat-tick', this.onHeartBitTickList);
}
},
beforeDestroy() {
beforeUnmount() {
if (jQuery && jQuery( document )) {
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 class="table-container">
<b-loading
is-full-page="false"
:active.sync="displayLoading" />
v-model="displayLoading"
:is-full-page="false" />
<div class="table-wrapper">
<div class="related-items-list">
<div
@ -16,7 +16,7 @@
<div class="field has-addons">
<span>
<span class="icon">
<i class="tainacan-icon tainacan-icon-collection"/>
<i class="tainacan-icon tainacan-icon-collection" />
</span>
{{ relatedItemGroup.collection_name ? relatedItemGroup.collection_name : '' }}
</span>
@ -28,7 +28,7 @@
<div class="field has-addons">
<span>
<span class="icon">
<i class="tainacan-icon tainacan-icon-metadata"/>
<i class="tainacan-icon tainacan-icon-metadata" />
</span>
{{ relatedItemGroup.metadata_name ? relatedItemGroup.metadata_name : '' }}
</span>
@ -62,17 +62,17 @@
@click="openItemOnNewTab(relatedItem)">
<span
v-if="$statusHelper.hasIcon(relatedItem.status)"
class="icon has-text-gray"
v-tooltip="{
content: $i18n.get('status_' + relatedItem.status),
autoHide: true,
placement: 'top',
popperClass: ['tainacan-tooltip', 'tooltip']
}">
}"
class="icon has-text-gray">
<i
class="tainacan-icon tainacan-icon-1em"
:class="$statusHelper.getIcon(relatedItem.status)"
/>
/>
</span>
</div>
<div @click="openItemOnNewTab(relatedItem)">
@ -84,12 +84,12 @@
:src="$thumbHelper.getSrc(relatedItem['thumbnail'], 'tainacan-small', relatedItem.document_mimetype)"
:alt="relatedItem.thumbnail_alt ? relatedItem.thumbnail_alt : $i18n.get('label_thumbnail')"
:transition-duration="500"
/>
/>
</span>
</div>
<div
@click="openItemOnNewTab(relatedItem)"
style="width: 100%">
style="width: 100%"
@click="openItemOnNewTab(relatedItem)">
<p
v-tooltip="{
delay: {
@ -102,7 +102,7 @@
placement: 'top',
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
v-if="isEditable && relatedItem.current_user_can_edit"
@ -112,11 +112,11 @@
<a
v-if="!relatedItem.status != 'trash'"
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
v-tooltip="{
delay: {
delay: {
shown: 500,
hide: 100,
},
@ -136,11 +136,11 @@
</div>
</div>
<b-modal
v-model="editItemModal"
:width="1200"
:active.sync="editItemModal"
@after-leave="reloadRelatedItems"
custom-class="tainacan-modal"
:close-button-aria-label="$i18n.get('close')">
:close-button-aria-label="$i18n.get('close')"
@after-leave="reloadRelatedItems">
<iframe
width="100%"
:style="{ height: (isMobileScreen ? '100vh' : '85vh') }"
@ -160,7 +160,7 @@
isLoading: Boolean,
isEditable: Boolean,
itemId: String,
collectionId: String,
collectionId: [String, Number],
isMobileScreen: Boolean
},
data() {

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

@ -1,22 +1,22 @@
<template>
<div class="column">
<b-loading :active.sync="isLoadingMetadata"/>
<b-loading v-model="isLoadingMetadata" />
<div class="tainacan-form sub-header">
<!-- <h3>{{ $i18n.get('metadata') }}<span class="has-text-gray">{{ ( activeMetadatumList && activeMetadatumList.length ? (' (' + activeMetadatumList.length + ')') : '' ) }}</span></h3> -->
<template v-if="activeMetadatumList && !isLoadingMetadata">
<button
v-if="activeMetadatumList.length > 0"
aria-controls="filters-items-list"
:aria-expanded="!collapseAll"
v-if="activeMetadatumList.length > 0"
class="link-style collapse-all"
@click="collapseAll = !collapseAll">
<span class="icon">
<i
: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 class="collapse-all__text">
{{ collapseAll ? $i18n.get('label_show_less_details') : $i18n.get('label_show_more_details') }}
@ -29,15 +29,16 @@
class="show metadata-options-dropdown"
aria-role="list"
trap-focus>
<button
:aria-label="$i18n.get('label_filter_by_metadata_type')"
class="button is-white"
slot="trigger">
<span>{{ $i18n.get('label_filter_by_metadata_type') }}</span>
<span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
</span>
</button>
<template #trigger>
<button
:aria-label="$i18n.get('label_filter_by_metadata_type')"
class="button is-white">
<span>{{ $i18n.get('label_filter_by_metadata_type') }}</span>
<span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
</span>
</button>
</template>
<div class="metadata-options-container">
<b-dropdown-item
v-for="(metadataType, index) in metadataTypeFilterOptions"
@ -56,8 +57,8 @@
</b-field>
<b-field class="header-item">
<b-input
:placeholder="$i18n.get('instruction_type_search_metadata_filter')"
v-model="metadataNameFilterString"
:placeholder="$i18n.get('instruction_type_search_metadata_filter')"
icon="magnify"
size="is-small"
icon-right="close-circle"
@ -73,7 +74,7 @@
<div class="content has-text-gray has-text-centered">
<p>
<span class="icon is-large">
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/>
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata" />
</span>
</p>
<p>{{ $i18n.get('info_there_is_no_metadatum' ) }}</p>
@ -83,221 +84,230 @@
<!-- The Repository Metadata list -->
<div class="active-metadata-sections-area">
<draggable
v-model="activeMetadatumList"
<sortable
:list="activeMetadatumList"
item-key="id"
class="active-metadata-area"
@change="handleChange($event)"
:group="{ name:'metadata', pull: false, put: true }"
:sort="false"
:handle="'.handle'"
ghost-class="sortable-ghost"
chosen-class="sortable-chosen"
filter=".not-sortable-item"
:prevent-on-filter="false"
:animation="250">
<div
v-for="(metadatum, index) in activeMetadatumList.filter((meta) => meta != undefined && meta.parent == 0)"
:key="metadatum.id"
v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)">
:options="{
group: { name:'metadata', pull: false, put: true },
handle: '.handle',
ghostClass: 'sortable-ghost',
chosenClass: 'sortable-chosen',
filter: '.not-sortable-item',
preventOnFilter: false,
animation: 250
}"
@add="handleChange($event)"
@remove="handleChange($event)">
<template #item="{ element: metadatum, index }">
<div
class="active-metadatum-item"
: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
}">
v-if="metadatum != undefined && metadatum.parent == 0"
v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)">
<div
:ref="'metadatum-handler-' + metadatum.id"
class="handle">
<span
:style="{ opacity: '0.0' }"
v-tooltip="{
content: $i18n.get('info_not_allowed_change_order_metadata'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
class="icon grip-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="currentColor">
<path
d="M0 0h24v24H0V0z"
fill="transparent"/>
<path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
</span>
<span
v-tooltip="{
content: $i18n.get('label_view_metadata_details'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
@click="$set(collapses, metadatum.id, !isCollapseOpen(metadatum.id))"
class="gray-icon icon"
:style="{ cursor: 'pointer', opacity: openedMetadatumId != metadatum.id ? '1.0' : '0.0' }">
<i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
</span>
class="active-metadatum-item"
: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
:ref="'metadatum-handler-' + metadatum.id"
class="handle">
<span
v-tooltip="{
content: $i18n.get('info_not_allowed_change_order_metadata'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
:style="{ opacity: '0.0' }"
class="icon grip-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="currentColor">
<path
d="M0 0h24v24H0V0z"
fill="transparent" />
<path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
</svg>
</span>
<span
v-tooltip="{
content: $i18n.get('label_view_metadata_details'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', '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 }}
</span>
<span
v-if="metadatum.id != undefined && metadatum.metadata_type_object"
class="label-details"
:class="{ 'has-text-weight-bold': metadatum.metadata_type_object.core }">
<span
v-if="metadatum.required === 'yes'"
v-tooltip="{
content: $i18n.get('label_required'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}">
*&nbsp;
</span>
({{ metadatum.metadata_type_object.name }})
<span
v-if="metadatum.status === 'private'"
class="icon"
v-tooltip="{
content: $i18n.get('status_private'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}">
<i class="tainacan-icon tainacan-icon-private"/>
</span>
<span
v-tooltip="{
content: $i18n.get('label_repository_metadatum'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
class="icon icon-level-identifier">
<i
:class="{
'has-text-blue5': metadatum.enabled,
'has-text-gray3': !metadatum.enabled
}"
class="tainacan-icon tainacan-icon-repository" />
v-if="metadatum.id != undefined && metadatum.metadata_type_object"
class="label-details"
:class="{ 'has-text-weight-bold': metadatum.metadata_type_object.core }">
<span
v-if="metadatum.required === 'yes'"
v-tooltip="{
content: $i18n.get('label_required'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}">
*&nbsp;
</span>
({{ metadatum.metadata_type_object.name }})
<span
v-if="metadatum.status === 'private'"
v-tooltip="{
content: $i18n.get('status_private'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-private" />
</span>
<span
v-tooltip="{
content: $i18n.get('label_repository_metadatum'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
class="icon icon-level-identifier">
<i
:class="{
'has-text-blue5': metadatum.enabled,
'has-text-gray3': !metadatum.enabled
}"
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:
<span
v-if="metadatum.id == undefined"
class="loading-spinner" />
<span
v-if="metadatum.id !== undefined"
class="controls">
<a
v-if="metadatum.current_user_can_edit"
:style="{ visibility:
metadatum.collection_id != collectionId
? 'hidden' : 'visible'
? 'hidden' : 'visible'
}"
@click.prevent="toggleMetadatumEdition(metadatum)">
<span
v-tooltip="{
content: $i18n.get('edit'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
</span>
</a>
<a
v-if="metadatum.current_user_can_delete"
:style="{ visibility: metadatum.collection_id != collectionId || metadatum.metadata_type_object.core ? 'hidden' : 'visible' }"
@click.prevent="removeMetadatum(metadatum)">
<span
v-tooltip="{
content: $i18n.get('delete'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
</span>
</a>
</span>
@click.prevent="toggleMetadatumEdition(metadatum)">
<span
v-tooltip="{
content: $i18n.get('edit'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit" />
</span>
</a>
<a
v-if="metadatum.current_user_can_delete"
:style="{ visibility: metadatum.collection_id != collectionId || metadatum.metadata_type_object.core ? 'hidden' : 'visible' }"
@click.prevent="removeMetadatum(metadatum)">
<span
v-tooltip="{
content: $i18n.get('delete'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete" />
</span>
</a>
</span>
</div>
<transition name="form-collapse">
<metadatum-details
v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id"
:metadatum="metadatum" />
</transition>
</div>
<transition name="form-collapse">
<metadatum-details
v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id"
:metadatum="metadatum" />
</transition>
</div>
<!-- Child metadata list, inside each compound metadata -->
<child-metadata-list
v-if="metadatum.metadata_type_object && metadatum.metadata_type_object.component == 'tainacan-compound'"
:parent="metadatum"
:metadata-name-filter-string="metadataNameFilterString"
:metadata-type-filter-options="metadataTypeFilterOptions"
:has-some-metadata-type-filter-applied="hasSomeMetadataTypeFilterApplied"
:is-parent-multiple="metadatum.multiple == 'yes'"
:is-repository-level="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"
<!-- Child metadata list, inside each compound metadata -->
<child-metadata-list
v-if="metadatum.metadata_type_object && metadatum.metadata_type_object.component == 'tainacan-compound'"
:parent="metadatum"
:metadata-name-filter-string="metadataNameFilterString"
:metadata-type-filter-options="metadataTypeFilterOptions"
:has-some-metadata-type-filter-applied="hasSomeMetadataTypeFilterApplied"
:is-parent-multiple="metadatum.multiple == 'yes'"
:is-repository-level="true"
@onEditionFinished="onEditionFinished()"
@onEditionCanceled="onEditionCanceled()"
:index="index" />
</b-modal>
:collapse-all="collapseAll" />
</div>
</draggable><!-- End of .active-metadata-area -->
<!-- Metadata edition form, for each metadata -->
<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>
</template>
</sortable><!-- End of .active-metadata-area -->
</div>
</div> <!-- End of .columns -->
</template>
<script>
import MetadatumEditionForm from '../edition/metadatum-edition-form.vue';
import MetadatumDetails from '../other/metadatum-details.vue';
import ChildMetadataList from '../metadata-types/compound/child-metadata-list.vue';
import CustomDialog from '../other/custom-dialog.vue';
import { mapGetters, mapActions } from 'vuex';
import { Sortable } from 'sortablejs-vue3';
export default {
name: 'RepositoryMetadataList',
components: {
MetadatumEditionForm,
ChildMetadataList,
MetadatumDetails
MetadatumDetails,
Sortable
},
props: {
metadataTypeFilterOptions: Array
},
emits: [
'on-update-highlighted-metadatum',
],
data() {
return {
collectionId: 'default',
isLoadingMetadata: false,
openedMetadatumId: '',
hightlightedMetadatum: '',
highlightedMetadatum: '',
collapses: {},
collapseAll: false,
metadataNameFilterString: '',
@ -306,7 +316,7 @@ export default {
},
computed: {
hasSomeMetadataTypeFilterApplied() {
return this.metadataTypeFilterOptions.length && this.metadataTypeFilterOptions.some((metadatumType) => metadatumType.enabled);
return this.metadataTypeFilterOptions.length > 0 && this.metadataTypeFilterOptions.some((metadatumType) => metadatumType.enabled);
},
activeMetadatumList: {
get() {
@ -326,18 +336,19 @@ export default {
this.editMetadatum(this.activeMetadatumList[existingMetadataIndex])
}
},
immediate: true
immediate: true,
deep: true
},
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() {
this.cleanMetadata();
this.loadMetadata();
this.$eventBusMetadataList.$on('addMetadatumViaButton', this.addMetadatumViaButton);
this.$emitter.on('addMetadatumViaButton', this.addMetadatumViaButton);
},
beforeDestroy() {
beforeUnmount() {
// Cancels previous Request
if (this.metadataSearchCancel != undefined)
this.metadataSearchCancel.cancel('Metadata search Canceled.');
@ -353,19 +364,23 @@ export default {
...mapGetters('metadata',[
'getMetadata'
]),
handleChange(event) {
if (event.added)
this.addNewMetadatum(event.added.element, event.added.newIndex);
else if (event.removed)
this.removeMetadatum(event.removed.element);
handleChange($event) {
switch ($event.type) {
case 'add':
this.addNewMetadatum(this.activeMetadatumList[$event.oldIndex], $event.newIndex);
break;
case 'remove':
this.removeMetadatum(this.activeMetadatumList[$event.oldIndex]);
break;
}
},
addMetadatumViaButton(metadatumType) {
let lastIndex = this.activeMetadatumList.length;
this.addNewMetadatum(metadatumType, lastIndex);
// Higlights the clicked metadatum
this.hightlightedMetadatum = metadatumType.name;
this.$emit('onUpdatehightlightedMetadatum', this.hightlightedMetadatum);
this.highlightedMetadatum = metadatumType.name;
this.$emit('on-update-highlighted-metadatum', this.highlightedMetadatum);
},
addNewMetadatum(newMetadatum, newIndex) {
this.sendMetadatum({
@ -379,8 +394,8 @@ export default {
})
.then((metadatum) => {
this.toggleMetadatumEdition(metadatum);
this.hightlightedMetadatum = '';
this.$emit('onUpdatehightlightedMetadatum', this.hightlightedMetadatum);
this.highlightedMetadatum = '';
this.$emit('on-update-highlighted-metadatum', this.highlightedMetadatum);
})
.catch((error) => {
this.$console.error(error);

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

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

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

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

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

@ -6,18 +6,18 @@
<!-- Search input -->
<b-field class="is-clearfix terms-search">
<b-input
v-model="searchString"
expanded
autocomplete="on"
:placeholder="$i18n.get('instruction_search')"
:aria-name="$i18n.get('instruction_search')"
v-model="searchString"
icon-right="magnify"
type="search" />
</b-field>
<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 ]) }}
<button
type="button"
@ -32,31 +32,32 @@
v-if="selected.length && selectedColumnIndex < 0"
class="field selected-terms-info">
<b-dropdown
:mobile-modal="true"
id="selected-terms-dropdown"
:mobile-modal="true"
aria-role="list"
trap-focus
position="is-bottom-left">
<button
type="button"
class="button is-white"
slot="trigger">
<span>{{ selected.length == 1 ? $i18n.get('label_one_selected_term') : $i18n.getWithVariables('label_%s_selected_terms', [ selected.length ]) }}</span>
<span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
</span>
</button>
<template #trigger>
<button
type="button"
class="button is-white">
<span>{{ selected.length == 1 ? $i18n.get('label_one_selected_term') : $i18n.getWithVariables('label_%s_selected_terms', [ selected.length ]) }}</span>
<span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
</span>
</button>
</template>
<b-dropdown-item
custom
v-for="term of selected"
:key="term.id"
custom
aria-role="list-item">
<label class="b-checkbox checkbox">
<input
type="checkbox"
@input="updateSelectedTerms(term)"
:checked="isTermSelected(term.id)"
:value="getTermIdAsNumber(term.id)">
type="checkbox"
:checked="isTermSelected(term.id)"
:value="getTermIdAsNumber(term.id)"
@input="updateSelectedTerms(term)">
<span class="check" />
<span class="control-label">
<span
@ -72,32 +73,33 @@
v-if="currentUserCanEditTaxonomy"
class="field">
<b-dropdown
id="bulk-actions-dropdown"
:mobile-modal="true"
position="is-bottom-left"
:disabled="amountOfTermsSelected <= 1"
id="bulk-actions-dropdown"
aria-role="list"
trap-focus>
<button
type="button"
class="button is-white"
slot="trigger">
<span>{{ $i18n.get('label_actions_for_the_selection') }}</span>
<span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
</span>
</button>
<template #trigger>
<button
type="button"
class="button is-white">
<span>{{ $i18n.get('label_actions_for_the_selection') }}</span>
<span class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
</span>
</button>
</template>
<b-dropdown-item
@click="$emit('deleteSelectedTerms')"
id="item-delete-selected-terms"
aria-role="listitem">
aria-role="listitem"
@click="$emit('deleteSelectedTerms')">
{{ $i18n.get('label_delete_permanently') }}
</b-dropdown-item>
<b-dropdown-item
v-if="isHierarchical"
@click="$emit('updateSelectedTermsParent')"
id="item-update-selected-terms"
aria-role="listitem">
aria-role="listitem"
@click="$emit('updateSelectedTermsParent')">
{{ $i18n.get('label_update_parent') }}
</b-dropdown-item>
</b-dropdown>
@ -112,9 +114,9 @@
:current-user-can-edit-taxonomy="currentUserCanEditTaxonomy"
:selected="selected"
:selected-column-index="selectedColumnIndex"
@onUpdateSelectedTerms="(newSelected) => selected = newSelected"
@onUpdateSelectedColumnIndex="(newColumnSelected) => { selectedColumnIndex = newColumnSelected.index; selectedColumnObject = newColumnSelected.object; }"
/>
@on-update-selected-terms="(newSelected) => selected = newSelected"
@on-update-selected-column-index="(newColumnSelected) => { selectedColumnIndex = newColumnSelected.index; selectedColumnObject = newColumnSelected.object; }"
/>
</div>
</template>
@ -127,10 +129,14 @@ export default {
TermsListHierarchical
},
props: {
taxonomyId: Number,
taxonomyId: String,
currentUserCanEditTaxonomy: Boolean,
isHierarchical: Boolean
},
emits: [
'deleteSelectedTerms',
'updateSelectedTermsParent'
],
data() {
return {
searchString: '',
@ -196,7 +202,7 @@ export default {
.control {
margin: 0;
}
/deep/ .input {
:deep(.input) {
height: 0.875em;
}
.input .icon .mdi::before {
@ -216,7 +222,7 @@ export default {
color: var(--tainacan-secondary)
}
}
/deep/ .field-body>.field {
:deep(.field-body>.field) {
padding: 0px !important;
margin-left: 0px !important;
}
@ -235,10 +241,10 @@ export default {
}
#selected-terms-dropdown {
/deep/ .dropdown-trigger {
:deep(.dropdown-trigger) {
font-size: 1.125em !important;
}
/deep/ .dropdown-menu {
:deep(.dropdown-menu) {
width: max-content;
max-width: 380px;
}
@ -282,7 +288,7 @@ export default {
align-items: stretch;
min-height: 1.5em;
/deep/ .b-checkbox, /deep/ .b-radio {
:deep(.b-checkbox), :deep(.b-radio) {
margin-right: 0px;
margin-bottom: 0;
-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>
<div class="child-metadata-inputs">
<a
v-if="!hideCollapses && childItemMetadataGroups.length > 0"
class="collapse-all"
@click="toggleCollapseAllChildren()">
<span class="icon">
<i
:class="{ 'tainacan-icon-arrowdown' : collapseAllChildren, 'tainacan-icon-arrowright' : !collapseAllChildren }"
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" />
<div class="child-metadata-inputs">
<a
v-if="!hideCollapses && childItemMetadataGroups.length > 0"
class="collapse-all"
@click="toggleCollapseAllChildren()">
<span class="icon">
<i
:class="{ 'tainacan-icon-arrowdown' : collapseAllChildren, 'tainacan-icon-arrowright' : !collapseAllChildren }"
class="tainacan-icon tainacan-icon-1-25em" />
</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)"
@click="addGroup"
class="is-inline-block add-link">
<span class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/>
</span>
&nbsp;{{ $i18n.get('label_add_value') }}
</a>
{{ collapseAllChildren ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
</a>
</div>
<div
v-if="childItemMetadataGroups.length > 0"
class="multiple-inputs">
<template
v-for="(childItemMetadata, groupIndex) of childItemMetadataGroups"
:key="groupIndex">
<hr v-if="groupIndex > 0">
<template
v-for="(childItemMetadatum, childIndex) of childItemMetadata"
:key="groupIndex + '-' + childIndex">
<div
v-if="isRemovingGroup"
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 })"
/>
</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>
<script>
import { eventBusItemMetadata } from '../../../js/event-bus-item-metadata';
import { nextTick, defineAsyncComponent } from 'vue';
import { mapActions } from 'vuex';
export default {
components: {
TainacanFormItem: defineAsyncComponent(() => import('../tainacan-form-item.vue')),
},
props: {
itemMetadatum: Object,
value: [String, Number, Array],
@ -136,7 +139,7 @@
metadataNameFilterString: '',
isMobileScreen: false,
isMetadataNavigation: false,
enumerateMetadatum: [Boolean|String],
enumerateMetadatum: [Boolean,String],
isFocused: false
},
data() {
@ -176,29 +179,32 @@
handler() {
this.createChildMetadataGroups();
},
immediate: true
immediate: true,
deep: true
},
isMetadataNavigation() {
this.focusedGroupMetadatum = 0;
this.focusedChildMetadatum = 0;
},
isFocused() {
if (this.isFocused) {
if ( this.isFocused )
this.setMetadatumChildFocus({ groupIndex: this.focusedGroupMetadatum, childIndex: this.focusedChildMetadatum, scrollIntoView: true });
}
}
},
created() {
eventBusItemMetadata.$on('hasRemovedItemMetadataGroup', this.laterUpdateIsRemovingGroup);
eventBusItemMetadata.$on('focusPreviousChildMetadatum', this.focusPreviousChildMetadatum);
eventBusItemMetadata.$on('focusNextChildMetadatum', this.focusNextChildMetadatum);
this.$emitter.on('hasRemovedItemMetadataGroup', this.laterUpdateIsRemovingGroup);
this.$emitter.on('focusPreviousChildMetadatum', this.focusPreviousChildMetadatum);
this.$emitter.on('focusNextChildMetadatum', this.focusNextChildMetadatum);
},
beforeDestroy() {
eventBusItemMetadata.$off('hasRemovedItemMetadataGroup', this.laterUpdateIsRemovingGroup);
eventBusItemMetadata.$off('focusPreviousChildMetadatum', this.focusPreviousChildMetadatum);
eventBusItemMetadata.$off('focusNextChildMetadatum', this.focusNextChildMetadatum);
beforeUnmount() {
this.$emitter.off('hasRemovedItemMetadataGroup', this.laterUpdateIsRemovingGroup);
this.$emitter.off('focusPreviousChildMetadatum', this.focusPreviousChildMetadatum);
this.$emitter.off('focusNextChildMetadatum', this.focusNextChildMetadatum);
},
methods: {
...mapActions('item', [
'fetchCompoundFirstParentMetaId'
]),
createChildMetadataGroups() {
let currentChildItemMetadataGroups = [];
@ -288,9 +294,9 @@
if (this.itemMetadatum.item && this.itemMetadatum.item.id) {
// Sends value to api so we can obtain the parent_meta_id
eventBusItemMetadata.fetchCompoundFirstParentMetaId({
itemId: this.itemMetadatum.item.id,
metadatumId: this.itemMetadatum.metadatum.id
this.fetchCompoundFirstParentMetaId({
item_id: this.itemMetadatum.item.id,
metadatum_id: this.itemMetadatum.metadatum.id
}).then((parentMetaId) => {
// 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]) {
this.isRemovingGroup = true;
eventBusItemMetadata.$emit('remove_group', {
this.$emitter.emit('removeCompoundGroup', {
itemId: this.itemMetadatum.item.id,
metadatumId: this.itemMetadatum.metadatum.id,
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
if (this.childItemMetadataGroups.length === 0) {
eventBusItemMetadata.$emit('isOnFirstMetadatumOfCompoundNavigation', true);
eventBusItemMetadata.$emit('isOnLastMetadatumOfCompoundNavigation', true);
this.$emitter.emit('isOnFirstMetadatumOfCompoundNavigation', true);
this.$emitter.emit('isOnLastMetadatumOfCompoundNavigation', true);
}
},
focusNextChildMetadatum() {
@ -409,13 +415,13 @@
// This keeps the navigation going on when no child input exists
if (this.childItemMetadataGroups.length === 0) {
eventBusItemMetadata.$emit('isOnFirstMetadatumOfCompoundNavigation', true);
eventBusItemMetadata.$emit('isOnLastMetadatumOfCompoundNavigation', true);
this.$emitter.emit('isOnFirstMetadatumOfCompoundNavigation', true);
this.$emitter.emit('isOnLastMetadatumOfCompoundNavigation', true);
}
},
informItemEditionFormOfChildNavigation() {
eventBusItemMetadata.$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('isOnFirstMetadatumOfCompoundNavigation', this.focusedGroupMetadatum === 0 && this.focusedChildMetadatum === 0);
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 }) {
const previousGroupIndex = this.focusedGroupMetadatum;
@ -458,7 +464,7 @@
}
},
laterUpdateIsRemovingGroup() {
this.$nextTick(() => {
nextTick(() => {
this.isRemovingGroup = false;
});
}
@ -519,10 +525,10 @@
.field {
padding-left: 12px;
/deep/ .label {
:deep(.label) {
margin-left: 0;
}
/deep/ .collapse-handle {
:deep(.collapse-handle) {
margin-left: -28px;
}
}

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

@ -1,7 +1,7 @@
<template>
<div class="child-metadata-list-container">
<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>
<section
v-if="childrenMetadata.length <= 0"
@ -9,221 +9,228 @@
<div class="content has-text-gray has-text-centered">
<p>
<span class="icon">
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-metadata"/>
<i class="tainacan-icon tainacan-icon-18px tainacan-icon-metadata" />
</span>
</p>
<p>{{ $i18n.get('info_create_child_metadata') }}</p>
</div>
</section>
<draggable
v-model="childrenMetadata"
<sortable
:list="childrenMetadata"
:style="{ minHeight: childrenMetadata.length > 0 ? '40px' : '70px' }"
class="active-metadata-area child-metadata-area"
@change="handleChange"
:group="{ name:'metadata', pull: false, put: isAvailableChildMetadata }"
:sort="(openedMetadatumId == '' || openedMetadatumId == undefined)"
:handle="'.handle'"
ghost-class="sortable-ghost"
chosen-class="sortable-chosen"
filter=".not-sortable-item"
:prevent-on-filter="false"
:animation="250">
<div
class="active-metadatum-item"
:class="{
'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied,
'not-focusable-item': openedMetadatumId == metadatum.id,
'disabled-metadatum': parent.enabled == false,
'inherited-metadatum': (metadatum.collection_id != collectionId && metadatum.parent == 0) || isRepositoryLevel
}"
v-for="(metadatum, index) in childrenMetadata"
:key="metadatum.id"
v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)">
item-key="id"
:options="{
group: {
name: 'metadata',
pull: false,
put: isAvailableChildMetadata
},
sort: (openedMetadatumId == '' || openedMetadatumId == undefined),
handle: '.handle',
ghostClass: 'sortable-ghost',
chosenClass: 'sortable-chosen',
filter: '.not-sortable-item',
preventOnFilter: false,
animation: 250
}"
@change="handleChange">
<template #item="{ element: metadatum, index }">
<div
:ref="'metadatum-handler-' + metadatum.id"
class="handle">
<span class="sorting-buttons">
<button
:disabled="index == 0"
class="link-button"
@click="moveMetadatumUpViaButton(index)"
:aria-label="$i18n.get('label_move_up')">
<span class="icon">
<i class="tainacan-icon tainacan-icon-previous tainacan-icon-rotate-90" />
</span>
</button>
<button
:disabled="index == childrenMetadata.length - 1"
class="link-button"
@click="moveMetadatumDownViaButton(index)"
:aria-label="$i18n.get('label_move_down')">
<span class="icon">
<i class="tainacan-icon tainacan-icon-next tainacan-icon-rotate-90" />
</span>
</button>
</span>
<span
:style="{ opacity: !(metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied) ? '1.0' : '0.0' }"
v-tooltip="{
content: metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder ? $i18n.get('info_not_allowed_change_order_metadata') : $i18n.get('instruction_drag_and_drop_metadatum_sort'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon grip-icon">
<!-- <i class="tainacan-icon tainacan-icon-18px tainacan-icon-drag"/> -->
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="currentColor">
<path
d="M0 0h24v24H0V0z"
fill="transparent"/>
<path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
</span>
<span
v-tooltip="{
content: $i18n.get('label_view_metadata_details'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}"
@click="$set(collapses, metadatum.id, !isCollapseOpen(metadatum.id))"
class="gray-icon icon"
:style="{ cursor: 'pointer', opacity: openedMetadatumId != metadatum.id ? '1.0' : '0.0' }">
<i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
</span>
<span class="metadatum-name">
v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)"
class="active-metadatum-item"
:class="{
'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied,
'not-focusable-item': openedMetadatumId == metadatum.id,
'disabled-metadatum': parent.enabled == false,
'inherited-metadatum': (metadatum.collection_id != collectionId && metadatum.parent == 0) || isRepositoryLevel
}">
<div
:ref="'metadatum-handler-' + metadatum.id"
class="handle">
<span class="sorting-buttons">
<button
:disabled="index == 0"
class="link-button"
:aria-label="$i18n.get('label_move_up')"
@click="moveMetadatumUpViaButton(index)">
<span class="icon">
<i class="tainacan-icon tainacan-icon-previous tainacan-icon-rotate-90" />
</span>
</button>
<button
:disabled="index == childrenMetadata.length - 1"
class="link-button"
:aria-label="$i18n.get('label_move_down')"
@click="moveMetadatumDownViaButton(index)">
<span class="icon">
<i class="tainacan-icon tainacan-icon-next tainacan-icon-rotate-90" />
</span>
</button>
</span>
<span
v-tooltip="{
content: metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder ? $i18n.get('info_not_allowed_change_order_metadata') : $i18n.get('instruction_drag_and_drop_metadatum_sort'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}"
:style="{ opacity: !(metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied) ? '1.0' : '0.0' }"
class="icon grip-icon">
<!-- <i class="tainacan-icon tainacan-icon-18px tainacan-icon-drag"/> -->
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="currentColor">
<path
d="M0 0h24v24H0V0z"
fill="transparent" />
<path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
</svg>
</span>
<span
v-tooltip="{
content: $i18n.get('label_view_metadata_details'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}"
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 }}
</span>
<span
v-if="metadatum.id != undefined && metadatum.metadata_type_object"
class="label-details">
<span
v-if="metadatum.required === 'yes'"
v-tooltip="{
content: $i18n.get('label_required'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}">
*&nbsp;
</span>
({{ metadatum.metadata_type_object.name }})
<!-- <em v-if="metadatum.collection_id != collectionId">{{ $i18n.get('label_inherited') }}</em> -->
<em
v-if="metadatum.metadata_type_object.core &&
metadatum.metadata_type_object.related_mapped_prop == 'title'">
<span
v-if="metadatum.id != undefined && metadatum.metadata_type_object"
class="label-details">
<span
v-if="metadatum.required === 'yes'"
v-tooltip="{
content: $i18n.get('label_required'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}">
*&nbsp;
</span>
({{ metadatum.metadata_type_object.name }})
<!-- <em v-if="metadatum.collection_id != collectionId">{{ $i18n.get('label_inherited') }}</em> -->
<em
v-if="metadatum.metadata_type_object.core &&
metadatum.metadata_type_object.related_mapped_prop == 'title'">
{{ $i18n.get('label_core_title') }}
</em>
<em
v-if="metadatum.metadata_type_object.core &&
metadatum.metadata_type_object.related_mapped_prop == 'description'">
</em>
<em
v-if="metadatum.metadata_type_object.core &&
metadatum.metadata_type_object.related_mapped_prop == 'description'">
{{ $i18n.get('label_core_description') }}
</em>
<span
v-if="metadatum.status == 'private'"
class="icon"
v-tooltip="{
content: $i18n.get('status_private'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}">
<i class="tainacan-icon tainacan-icon-private"/>
</em>
<span
v-if="metadatum.status == 'private'"
v-tooltip="{
content: $i18n.get('status_private'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-private" />
</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
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:
v-if="metadatum.id == undefined"
class="loading-spinner" />
<span
v-if="metadatum.id !== undefined"
class="controls">
<a
v-if="metadatum.current_user_can_edit"
:style="{ visibility:
metadatum.collection_id != collectionId
? 'hidden' : 'visible'
? 'hidden' : 'visible'
}"
@click.prevent="toggleMetadatumEdition(metadatum.id)">
<span
v-tooltip="{
content: $i18n.get('edit'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
</span>
</a>
<a
v-if="metadatum.current_user_can_delete"
:style="{ visibility:
@click.prevent="toggleMetadatumEdition(metadatum.id)">
<span
v-tooltip="{
content: $i18n.get('edit'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit" />
</span>
</a>
<a
v-if="metadatum.current_user_can_delete"
:style="{ visibility:
metadatum.collection_id != collectionId ||
metadatum.metadata_type_object.related_mapped_prop == 'title' ||
metadatum.metadata_type_object.related_mapped_prop == 'title' ||
metadatum.metadata_type_object.related_mapped_prop == 'description'
? 'hidden' : 'visible'
? '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>
@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>
<transition name="form-collapse">
<metadatum-details
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>
</template>
</sortable>
</div>
</template>
@ -233,10 +240,13 @@
import MetadatumDetails from '../../other/metadatum-details.vue';
import CustomDialog from '../../other/custom-dialog.vue';
import { Sortable } from 'sortablejs-vue3';
export default {
components: {
MetadatumEditionForm,
MetadatumDetails
MetadatumDetails,
Sortable
},
props: {
isRepositoryLevel: Boolean,
@ -263,7 +273,7 @@
isLoadingMetadata: false,
isUpdatingMetadataOrder: false,
openedMetadatumId: '',
hightlightedMetadatum: '',
highlightedMetadatum: '',
metadataSearchCancel: undefined,
childrenMetadata: [],
collapses: {}
@ -279,7 +289,8 @@
this.editMetadatum(this.childrenMetadata[existingMetadataIndex])
}
},
immediate: true
immediate: true,
deep: true
},
'parent.metadata_type_options.children_objects': {
handler(childrenObjects) {
@ -288,10 +299,11 @@
else
this.childrenMetadata = [];
},
immediate: true
immediate: true,
deep: true
},
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() {
@ -300,7 +312,7 @@
else
this.collectionId = this.$route.params.collectionId;
},
beforeDestroy() {
beforeUnmount() {
// Cancels previous Request
if (this.metadataSearchCancel != undefined)
@ -314,13 +326,27 @@
'deleteMetadatum',
'updateChildMetadataOrder'
]),
handleChange(event) {
if (event.added)
this.addNewMetadatum(event.added.element, event.added.newIndex);
else if (event.removed)
this.removeMetadatum(event.removed.element);
else if (event.moved)
this.updateMetadataOrder();
handleChange($event) {
switch ($event.type) {
case 'add':
this.addNewMetadatum(this.childrenMetadata[$event.oldIndex], $event.newIndex);
break;
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() {
let metadataOrder = [];
@ -353,7 +379,7 @@
this.updateMetadataOrder();
this.toggleMetadatumEdition(metadatum.id)
this.hightlightedMetadatum = '';
this.highlightedMetadatum = '';
})
.catch((error) => {
this.$console.error(error);

88
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>
<div>
<b-input
<div class="control is-clearfix">
<input
: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"
:custom-class="{ 'is-danger': isInvalidDate && dateValue }"
class="input"
:class="isInvalidDate ? 'is-danger' : ''"
type="text"
v-mask="dateMask"
v-model="dateValue"
@input.native="onInput"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : dateFormat.toLowerCase()"
@input="onInput"
@blur="onBlur"
@focus="onMobileSpecialFocus"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : dateFormat.toLowerCase()" />
@focus="onMobileSpecialFocus">
<p
v-if="isInvalidDate && dateValue"
v-if="isInvalidDate"
style="font-size: 0.75em;"
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>
</template>
<script>
import { dateInter } from "../../../js/mixins";
import moment from 'moment';
import { IMaskDirective } from 'vue-imask';
export default {
directives: {
imask: IMaskDirective
},
mixins: [ dateInter ],
props: {
itemMetadatum: Object,
value: [String, Number, Array],
disabled: false,
},
emits: [
'update:value',
'blur',
'mobile-special-focus'
],
data() {
return {
dateValue: '',
@ -54,47 +48,63 @@
computed: {
isOnItemSubmissionForm() {
return !this.itemMetadatum.item || !this.itemMetadatum.item.id;
},
}
},
watch: {
value(newValue) {
this.dateValue = newValue ? this.parseDateToNavigatorLanguage(newValue) : '';
}
},
created() {
if (this.value)
this.dateValue = this.parseDateToNavigatorLanguage(this.value);
this.dateValue = this.value ? this.parseDateToNavigatorLanguage(this.value) : '';
},
methods: {
onInput: _.debounce(function ($event) {
// Empty dates don't need to be validated, they remove the metadata
if ($event.target.value != '') {
let dateISO = '';
if ($event && $event instanceof Date)
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;
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;
if (!this.isOnItemSubmissionForm)
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.
return;
} else {
this.isInvalidDate = false;
this.$emit('input', dateISO);
this.$emit('update:value', dateISO);
}
} else {
this.$emit('input', '');
this.$emit('update:value', '');
}
}, 300),
this.isInvalidDate = false;
}, 750),
onBlur() {
this.$emit('blur');
},
onMobileSpecialFocus() {
this.$emit('mobileSpecialFocus');
this.$emit('mobile-special-focus');
}
}
}
</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>
<section>
<b-field :addons="false" >
<label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-geocoordinate', 'map_provider') }}
<span>&nbsp;*&nbsp;</span>
<help-button
:title="$i18n.getHelperTitle('tainacan-geocoordinate', 'map_provider')"
:message="$i18n.getHelperMessage('tainacan-geocoordinate', 'map_provider')" />
</label>
<b-input
name="mapProvider"
v-model="mapProvider"
@input="emitValues()"
placeholder="https://tile.openstreetmap.org/{z}/{x}/{y}.png" />
<b-field :addons="false">
<label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-geocoordinate', 'map_provider') }}
<span>&nbsp;*&nbsp;</span>
<help-button
:title="$i18n.getHelperTitle('tainacan-geocoordinate', 'map_provider')"
:message="$i18n.getHelperMessage('tainacan-geocoordinate', 'map_provider')" />
</label>
<b-input
v-model="mapProvider"
name="mapProvider"
placeholder="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
@update:model-value="emitValues()" />
</b-field>
<b-field
:addons="false" >
<label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-geocoordinate', 'attribution') }}
<span>&nbsp;*&nbsp;</span>
<help-button
:title="$i18n.getHelperTitle('tainacan-geocoordinate', 'attribution')"
:message="$i18n.getHelperMessage('tainacan-geocoordinate', 'attribution')" />
</label>
<b-input
name="attribution"
v-model="attribution"
@input="emitValues()"
placeholder="© OpenStreetMap contributors" />
:addons="false">
<label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-geocoordinate', 'attribution') }}
<span>&nbsp;*&nbsp;</span>
<help-button
:title="$i18n.getHelperTitle('tainacan-geocoordinate', 'attribution')"
:message="$i18n.getHelperMessage('tainacan-geocoordinate', 'attribution')" />
</label>
<b-input
v-model="attribution"
name="attribution"
placeholder="© OpenStreetMap contributors"
@update:model-value="emitValues()" />
</b-field>
<b-field
:addons="false" >
<label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-geocoordinate', 'initial_zoom') }}
<span>&nbsp;*&nbsp;</span>
<help-button
:title="$i18n.getHelperTitle('tainacan-geocoordinate', 'initial_zoom')"
:message="$i18n.getHelperMessage('tainacan-geocoordinate', 'initial_zoom')" />
</label>
<b-numberinput
name="initialZoom"
v-model="initialZoom"
@input="emitValues()"
:step="1"
:max="19"
:min="1" />
:addons="false">
<label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-geocoordinate', 'initial_zoom') }}
<span>&nbsp;*&nbsp;</span>
<help-button
:title="$i18n.getHelperTitle('tainacan-geocoordinate', 'initial_zoom')"
:message="$i18n.getHelperMessage('tainacan-geocoordinate', 'initial_zoom')" />
</label>
<b-numberinput
v-model="initialZoom"
name="initialZoom"
:step="1"
:max="19"
:min="1"
@update:model-value="emitValues()" />
</b-field>
<b-field
:addons="false" >
<label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-geocoordinate', 'maximum_zoom') }}
<span>&nbsp;*&nbsp;</span>
<help-button
:addons="false">
<label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-geocoordinate', 'maximum_zoom') }}
<span>&nbsp;*&nbsp;</span>
<help-button
:title="$i18n.getHelperTitle('tainacan-geocoordinate', 'maximum_zoom')"
:message="$i18n.getHelperMessage('tainacan-geocoordinate', 'maximum_zoom')" />
</label>
<b-numberinput
name="maximumZoom"
v-model="maximumZoom"
@input="emitValues()"
:step="1"
:max="19"
:min="1" />
</label>
<b-numberinput
v-model="maximumZoom"
name="maximumZoom"
:step="1"
:max="19"
:min="1"
@update:model-value="emitValues()" />
</b-field>
</section>
@ -76,6 +76,7 @@
props: {
value: [ String, Object, Array ]
},
emits: ['input'],
data() {
return {
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"
:center="[-14.4086569, -51.31668]"
:zoom-animation="true"
@click="onMapClick"
:options="{
name: 'map--' + itemMetadatumIdentifier,
trackResize: false, // We handle this manually in the component
worldCopyJump: true
}">
}"
@click="onMapClick">
<l-tile-layer
:url="mapProvider"
:attribution="attribution" />
@ -27,22 +27,22 @@
:placeholder="-14.408656999999"
type="text"
:step="0.000000000001"
@input.native="onUpdateFromLatitudeInput"
:value="latitude" />
:model-value="latitude"
@update:model-value="onUpdateFromLatitudeInput" />
<b-input
v-if="editingMarkerIndex >= 0"
expanded
:placeholder="-51.316689999999"
type="text"
:step="0.000000000001"
@input.native="onUpdateFromLongitudeInput"
:value="longitude" />
:model-value="longitude"
@update:model-value="onUpdateFromLongitudeInput" />
<b-button
v-if="editingMarkerIndex >= 0"
outlined
@click="onMarkerRemove(editingMarkerIndex)">
<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>
&nbsp;{{ $i18n.get('remove_point') }}
</b-button>
@ -51,7 +51,7 @@
outlined
@click="addLocation(latitude + ',' + longitude)">
<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>
&nbsp;{{ $i18n.get('add') }}
</b-button>
@ -76,7 +76,7 @@
</l-tooltip>
<l-icon class-name="tainacan-location-marker-add">
<span class="icon">
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/>
<i class="tainacan-icon has-text-secondary tainacan-icon-add" />
</span>
</l-icon>
</l-marker>
@ -85,13 +85,14 @@
</template>
<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 { Icon, latLng } from 'leaflet';
import iconUrl from 'leaflet/dist/images/marker-icon.png';
import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
import { eventBusItemMetadata } from '../../../js/event-bus-item-metadata';
delete Icon.Default.prototype._getIconUrl;
Icon.Default.mergeOptions({
@ -116,6 +117,7 @@
maxtags: '',
isLastMetadatum: false
},
emits: ['update:value'],
data() {
return {
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';
},
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() {
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() {
// 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.
return (hasMaxTagsValue !== null ? (this.selected.length < hasMaxTagsValue) : true);
}
},
watch: {
selectedLatLng() {
const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
this.$nextTick(() => {
if ( this.$refs[mapComponentRef] && this.$refs[mapComponentRef].mapObject && this.selectedLatLng.length != undefined) {
if (this.selectedLatLng.length == 1)
this.$refs[mapComponentRef].mapObject.panInsideBounds(this.selectedLatLng, { animate: true, maxZoom: this.maxZoom });
else
this.$refs[mapComponentRef].mapObject.flyToBounds(this.selectedLatLng, { animate: true, maxZoom: this.maxZoom });
}
});
selectedLatLng: {
handler() {
const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
nextTick(() => {
if ( this.$refs[mapComponentRef] && this.$refs[mapComponentRef].mapObject && this.selectedLatLng.length != undefined) {
if (this.selectedLatLng.length == 1)
this.$refs[mapComponentRef].mapObject.panInsideBounds(this.selectedLatLng, { animate: true, maxZoom: this.maxZoom });
else
this.$refs[mapComponentRef].mapObject.flyToBounds(this.selectedLatLng, { animate: true, maxZoom: this.maxZoom });
}
});
},
deep: true
}
},
created() {
@ -195,17 +200,17 @@
// We need to pass mapComponentRef here instead of creating it inside the function
// otherwise the listener would conflict when multiple geo metadata are inserted.
const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
eventBusItemMetadata.$on('itemEditionFormResize', () => this.handleWindowResize(mapComponentRef));
this.$emitter.on('itemEditionFormResize', () => this.handleWindowResize(mapComponentRef));
},
mounted() {
this.$nextTick(() => {
nextTick(() => {
const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
this.handleWindowResize(mapComponentRef);
});
},
beforeDestroy() {
beforeUnmount() {
const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
eventBusItemMetadata.$off('itemEditionFormResize', () => this.handleWindowResize(mapComponentRef));
this.$emitter.off('itemEditionFormResize', () => this.handleWindowResize(mapComponentRef));
},
methods: {
onUpdateFromLatitudeInput: _.debounce( function($event) {
@ -250,7 +255,7 @@
onUpdateFromLatitudeAndLongitude() {
if (this.editingMarkerIndex >= 0) {
this.selected.splice(this.editingMarkerIndex, 1, this.latitude + ',' + this.longitude);
this.$emit('input', this.selected);
this.$emit('update:value', this.selected);
}
},
onDragMarker($event, index) {
@ -260,7 +265,7 @@
this.longitude = $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) {
@ -287,7 +292,7 @@
const existintSelectedValue = this.selected.indexOf(newLocationValue);
if (existintSelectedValue < 0) {
this.selected.push(newLocationValue);
this.$emit('input', this.selected);
this.$emit('update:value', this.selected);
this.editingMarkerIndex = this.selected.length - 1;
}
},
@ -310,7 +315,7 @@
this.longitude = this.selectedLatLng[index].lng;
this.selected.splice(index, 1);
this.$emit('input', this.selected);
this.$emit('update:value', this.selected);
},
handleWindowResize(mapComponentRef) {
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\Control');
$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
// `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>
<help-button
:title="$i18n.getHelperTitle('tainacan-numeric', 'step')"
:message="$i18n.getHelperMessage('tainacan-numeric', 'step')"/>
:message="$i18n.getHelperMessage('tainacan-numeric', 'step')" />
</label>
<div
v-if="!showEditStepOptions"
class="is-flex">
<b-select
name="step_options"
v-model="step"
@input="onUpdateStep">
<option value="0.001">0.001</option>
<option value="0.01">0.01</option>
<option value="0.1">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>
name="step_options"
@update:model-value="onUpdateStep">
<option value="0.001">
0.001
</option>
<option value="0.01">
0.01
</option>
<option value="0.1">
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
v-if="step && ![0.001,0.01,0.1,1,2,5,10,100,1000].find( (element) => element == step )"
:value="step">
@ -40,7 +58,7 @@
popperClass: ['tainacan-tooltip', 'tooltip']
}"
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>
</button>
</div>
@ -48,14 +66,14 @@
v-if="showEditStepOptions"
class="is-flex">
<b-input
name="max_options"
v-model="step"
@input="onUpdateStep"
name="max_options"
type="number"
step="1" />
step="1"
@update:model-value="onUpdateStep" />
<button
@click.prevent="showEditStepOptions = false"
class="button is-white is-pulled-right">
class="button is-white is-pulled-right"
@click.prevent="showEditStepOptions = false">
<span
v-tooltip="{
content: $i18n.get('close'),
@ -64,7 +82,7 @@
popperClass: ['tainacan-tooltip', 'tooltip']
}"
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>
</button>
</div>
@ -80,7 +98,7 @@
v-model="min"
name="min"
step="1"
@input="onUpdateMin"/>
@update:model-value="onUpdateMin" />
</b-field>
<b-field :addons="false">
<label class="label is-inline">
@ -93,7 +111,7 @@
v-model="max"
name="max"
step="1"
@input="onUpdateMax"/>
@update:model-value="onUpdateMax" />
</b-field>
</section>
</template>
@ -103,6 +121,7 @@
props: {
value: [ String, Object, Array ]
},
emits: ['update:value'],
data() {
return {
step: [Number, String],
@ -118,13 +137,13 @@
},
methods: {
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) {
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) {
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>
<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) : '')"
: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 : ''"
:value="value"
@input="onInput"
@blur="onBlur"
@focus="onMobileSpecialFocus"
:model-value="Number(value)"
lang="en"
:min="getMin"
:max="getMax"
:step="getStep" />
:step="getStep"
@update:model-value="$event =>onInput($event)"
@blur="onBlur"
@focus="onMobileSpecialFocus" />
</template>
<script>
@ -21,6 +21,11 @@
value: [String, Number, Array],
disabled: false,
},
emits: [
'update:value',
'blur',
'mobile-special-focus'
],
computed: {
getStep() {
if (this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.step)
@ -47,13 +52,13 @@
if ( inputRef && !inputRef.checkHtml5Validity())
return;
this.$emit('input', value);
this.$emit('update:value', value);
},
onBlur() {
this.$emit('blur');
},
onMobileSpecialFocus() {
this.$emit('mobileSpecialFocus');
this.$emit('mobile-special-focus');
}
}
}

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

@ -6,23 +6,23 @@
:type="collectionType"
:message="collectionMessage">
<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
:title="$i18n.getHelperTitle('tainacan-relationship', 'collection_id')"
:message="$i18n.getHelperMessage('tainacan-relationship', 'collection_id')"/>
:message="$i18n.getHelperMessage('tainacan-relationship', 'collection_id')" />
</label>
<b-select
v-model="collection"
name="metadata_type_relationship[collection_id]"
:placeholder="$i18n.get('instruction_select_collection_fetch_items' )"
v-model="collection"
@change.native="emitValues()"
@focus="clear()"
:loading="loading"
expanded>
expanded
@change="emitValues()"
@focus="clear()">
<option
v-for="option in collections"
:value="option.id"
:key="option.id">
:key="option.id"
:value="option.id">
{{ option.name }}
</option>
</b-select>
@ -30,8 +30,8 @@
<transition name="fade">
<div
v-if="loadingMetadata"
class="loading-spinner"/>
v-if="loadingMetadata"
class="loading-spinner" />
</transition>
<transition name="filter-item">
<b-field
@ -41,11 +41,11 @@
{{ $i18n.get('label_metadata_for_search') }}
<help-button
:title="$i18n.getHelperTitle('tainacan-relationship', 'search')"
:message="$i18n.getHelperMessage('tainacan-relationship', 'search')"/>
:message="$i18n.getHelperMessage('tainacan-relationship', 'search')" />
</label>
<b-select
name="metadata_type_relationship[search]"
v-model="modelSearch"
name="metadata_type_relationship[search]"
expanded>
<option
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') }}
<help-button
: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>
<div :class="'displayed-metadata-options' + (metadata.length > 5 ? ' has-more-than-5-metadata' : '')">
<b-checkbox
v-model="displayRelatedItemMetadata"
native-value="thumbnail"
name="metadata_type_relationship[display_related_item_metadata]"
@input="emitValues()"
v-model="displayRelatedItemMetadata">
@update:model-value="emitValues()">
{{ $i18n.get('label_thumbnail') }}
</b-checkbox>
<b-checkbox
v-for="(metadatumOption, index) in metadata"
:key="index"
v-model="displayRelatedItemMetadata"
:native-value="metadatumOption.id"
name="metadata_type_relationship[display_related_item_metadata]"
@input="emitValues()"
v-model="displayRelatedItemMetadata"
:disabled="metadatumOption.id == modelSearch">
:disabled="metadatumOption.id == modelSearch"
@update:model-value="emitValues()">
{{ metadatumOption.name }}
</b-checkbox>
</div>
@ -94,14 +94,14 @@
:label="$i18n.getHelperTitle('tainacan-relationship', 'display_in_related_items')">
&nbsp;
<b-switch
size="is-small"
v-model="modelDisplayInRelatedItems"
@input="emitValues()"
size="is-small"
true-value="yes"
false-value="no" />
false-value="no"
@update:model-value="emitValues()" />
<help-button
: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
@ -109,14 +109,14 @@
:label="$i18n.getHelperTitle('tainacan-relationship', 'accept_draft_items')">
&nbsp;
<b-switch
size="is-small"
v-model="modelAcceptDraftItems"
@input="emitValues()"
size="is-small"
true-value="yes"
false-value="no" />
false-value="no"
@update:model-value="emitValues()" />
<help-button
: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
@ -124,30 +124,31 @@
:label="$i18n.getHelperTitle('tainacan-relationship', 'accept_only_items_authored_by_current_user')">
&nbsp;
<b-switch
size="is-small"
v-model="modelAcceptOnlyItemsAuthoredByCurrentUser"
@input="emitValues()"
size="is-small"
true-value="yes"
false-value="no" />
false-value="no"
@update:model-value="emitValues()" />
<help-button
: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>
</section>
</template>
<script>
import { tainacan as axios } from '../../../js/axios';
import { tainacanApi } from '../../../js/axios';
export default {
props: {
search: [ String ],
collection_id: [ Number ],
collectionId: [ Number ],
value: [ String, Object, Array ],
metadatum: [ String, Object ],
errors: [ String, Object, Array ]
},
emits: ['input'],
data(){
return {
icon: '',
@ -169,18 +170,17 @@
},
computed: {
setError(){
if( this.errors && this.errors.collection_id !== '' ){
if ( this.errors && this.errors.collection_id !== '' )
this.setErrorsAttributes( 'is-danger', this.errors.collection_id );
} else {
else
this.setErrorsAttributes( '', '' );
}
return true;
}
},
watch:{
collection( value ){
collection( value ) {
this.collection = value;
if( value && value !== '' ) {
if ( value && value !== '' ) {
this.fetchMetadataFromCollection(value);
} else {
this.metadata = [];
@ -199,13 +199,13 @@
}
},
created(){
this.fetchCollections().then(() => {
if( this.collection_id && this.collection_id !== '' ){
this.collection = this.collection_id;
} else if ( this.value ) {
this.collection = this.value.collection_id;
}
});
this.fetchCollections()
.then(() => {
if ( this.collectionId && this.collectionId !== '' )
this.collection = this.collectionId;
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.modelDisplayInRelatedItems = this.value && this.value.display_in_related_items ? this.value.display_in_related_items : 'no';
@ -218,7 +218,7 @@
this.collectionType = message;
},
async fetchCollections(){
return await axios.get('/collections?nopaging=1')
return await tainacanApi.get('/collections?nopaging=1')
.then(res => {
const collections = res.data;
@ -233,7 +233,7 @@
this.loadingMetadata = true;
this.hasMetadata = false;
axios.get('/collection/' + value + '/metadata/?nopaging=1')
tainacanApi.get('/collection/' + value + '/metadata/?nopaging=1')
.then((res) => {
this.loadingMetadata = false;
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>
<div :class="{ 'is-flex is-flex-wrap-wrap': itemMetadatum.metadatum.multiple != 'yes' || maxtags != undefined }">
<b-tabs
v-model="activeTab"
size="is-small"
animated
v-model="activeTab">
animated>
<b-tab-item :label="$i18n.get('label_insert_items')">
<b-taginput
:id="relationshipInputId"
expanded
:disabled="disabled"
:id="relationshipInputId"
size="is-small"
icon="magnify"
:value="selected"
@input="onInput"
@blur="onBlur"
@add="onAdd"
@remove="onRemove"
:model-value="selected"
:data="options"
:maxtags="maxtags != undefined ? maxtags : (itemMetadatum.metadatum.multiple == 'yes' || allowNew === true ? (maxMultipleValues !== undefined ? maxMultipleValues : null) : '1')"
autocomplete
@ -27,12 +23,14 @@
:aria-close-label="$i18n.get('remove_value')"
:class="{ 'has-selected': selected != undefined && selected != [] }"
field="label"
@typing="search"
check-infinite-scroll
@infinite-scroll="searchMore"
:has-counter="false"
@update:model-value="onInput"
@blur="onBlur"
@typing="search"
@infinite-scroll="searchMore"
@focus="onMobileSpecialFocus">
<template slot-scope="props">
<template #default="props">
<div
v-if="!isDisplayingRelatedItemMetadata"
class="media">
@ -55,12 +53,12 @@
</template>
<template
v-if="!isLoading"
slot="empty">
#empty>
{{ isAcceptingOnlyItemsAuthoredByCurrentUser ? $i18n.get('info_no_item_authored_by_you_found') : $i18n.get('info_no_item_found') }}
</template>
<template
v-if="currentUserCanEditItems && (!$adminOptions.itemEditionMode || $adminOptions.allowItemEditionModalInsideModal)"
slot="footer">
#footer>
<a @click="editItemModalOpen = true">
{{ $i18n.get('label_create_new_item') + ' "' + searchQuery + '"' }}
</a>
@ -82,15 +80,15 @@
<div v-html="itemValue.valuesAsHtml" />
<a
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">
<i class="tainacan-icon tainacan-icon-edit" />
</span>
</a>
<a
@click="removeFromSelected(itemValue.value)"
class="relationship-value-button--remove">
class="relationship-value-button--remove"
@click="removeFromSelected(itemValue.value)">
<span class="icon">
<i class="tainacan-icon tainacan-icon-close" />
</span>
@ -116,18 +114,18 @@
itemMetadatum.item.id">
<a
v-if="(maxMultipleValues === undefined || maxMultipleValues > selected.length) &&
(itemMetadatum.metadatum.multiple === 'yes' || !selected.length )"
(itemMetadatum.metadatum.multiple === 'yes' || !selected.length )"
:disabled="$adminOptions.itemEditionMode && !$adminOptions.allowItemEditionModalInsideModal"
@click="editItemModalOpen = !editItemModalOpen"
class="add-link">
class="add-link"
@click="editItemModalOpen = !editItemModalOpen">
<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>
&nbsp;{{ $i18n.get('label_create_new_item') }}
</a>
<b-modal
v-model="editItemModalOpen"
:width="1200"
:active.sync="editItemModalOpen"
:custom-class="'tainacan-modal' + (collection && collection.id ? ' tainacan-modal-item-edition--collection-' + collection.id : '')"
:close-button-aria-label="$i18n.get('close')">
<iframe
@ -141,7 +139,7 @@
</template>
<script>
import { tainacan as axios } from '../../../js/axios';
import { tainacanApi } from '../../../js/axios';
import { mapGetters } from 'vuex';
import qs from 'qs';
@ -154,6 +152,11 @@
isLastMetadatum: false,
isMobileScreen: false
},
emits: [
'update:value',
'blur',
'mobile-special-focus'
],
data() {
return {
selected:[],
@ -240,7 +243,7 @@
if ( this.isAcceptingDraftItems )
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 => {
if (res.data.items) {
for (let item of res.data.items) {
@ -262,7 +265,7 @@
if (this.collection && this.collection.id == this.collectionId)
this.currentUserCanEditItems = this.collection.current_user_can_edit_items;
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 )
.catch(() => this.currentUserCanEditItems = false );
}
@ -276,7 +279,7 @@
this.search('');
this.selected = newSelected;
this.$emit('input', newSelected.map((item) => item.value));
this.$emit('update:value', newSelected.map((item) => item.value));
},
onBlur() {
this.$emit('blur');
@ -308,7 +311,7 @@
if (this.searchQuery !== '') {
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 => {
if (res.data.items) {
@ -505,7 +508,7 @@
}
},
onMobileSpecialFocus() {
this.$emit('mobileSpecialFocus');
this.$emit('mobile-special-focus');
}
}
}
@ -522,17 +525,17 @@
margin-bottom: 0;
width: 100%;
}
/deep/ .b-tabs .tab-content {
:deep(.b-tabs) .tab-content {
padding: 0.5em 0px !important;
}
/deep/ .tabs {
:deep(.tabs) {
margin-bottom: 0 !important;
ul {
padding: 0;
}
}
/deep/ .tainacan-relationship-results-container {
:deep(.tainacan-relationship-results-container) {
border: 1px solid var(--tainacan-gray1);
background-color: var(--tainacan-white);
margin-top: calc(-1 * (0.5em + 1px));
@ -570,7 +573,7 @@
}
}
}
/deep/ .tainacan-relationship-group {
:deep(.tainacan-relationship-group) {
width: 100%;
.tainacan-relationship-metadatum {
.label {
@ -602,8 +605,8 @@
top: 0px;
}
}
/deep/ .relationship-value-button--edit,
/deep/ .relationship-value-button--remove {
:deep(.relationship-value-button--edit),
:deep(.relationship-value-button--remove) {
right: 4px;
background-color: var(--tainacan-white);
border-radius: 100%;
@ -613,7 +616,7 @@
background-color: var(--tainacan-gray0);
}
}
/deep/ .relationship-value-button--edit {
:deep(.relationship-value-button--edit) {
right: 34px;
}
</style>

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

@ -16,16 +16,14 @@
:type="optionType"
:message="optionMessage">
<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
:title="$i18n.getHelperTitle('tainacan-selectbox', 'options')"
:message="$i18n.getHelperMessage('tainacan-selectbox', 'options')"/>
:message="$i18n.getHelperMessage('tainacan-selectbox', 'options')" />
</label>
<b-taginput
v-model="options"
@input="emitValues()"
@focus="clear()"
attached
:confirm-keys="optionsSeparator"
:on-paste-separators="optionsSeparator"
@ -33,17 +31,19 @@
:aria-close-label="$i18n.get('remove_value')"
class="tainacan-selectbox-metadata-type--taginput"
:class="{'has-selected': options != undefined && options != []}"
:placeholder="$i18n.get('new') + ', ...'" />
:placeholder="$i18n.get('new') + ', ...'"
@update:model-value="emitValues()"
@focus="clear()" />
<div class="separator-options">
<label class="label is-inline">{{ $i18n.getHelperTitle('tainacan-selectbox', 'options_separator') }}</label>
<b-checkbox
v-for="separator of ['Enter', 'Tab', ',', ';', '|']"
:key="separator"
name="metadata_type_selectbox[options_separator]"
@input="emitValues()"
v-model="optionsSeparator"
name="metadata_type_selectbox[options_separator]"
:native-value="separator"
:disabled="separator == 'Enter'">
:disabled="separator == 'Enter'"
@update:model-value="emitValues()">
<kbd>{{ separator }}</kbd>
</b-checkbox>
</div>
@ -58,6 +58,7 @@
metadatum: [ String, Object ],
errors: [ String, Object, Array ]
},
emits: ['update:value'],
data() {
return {
optionType: '',
@ -88,7 +89,7 @@
this.optionMessage = '';
},
emitValues() {
this.$emit('input', {
this.$emit('update:value', {
options: ( this.options.length > 0 ) ? this.options.join('\n') : '',
options_separator: JSON.stringify(this.optionsSeparator)
})
@ -129,14 +130,14 @@
width: 100%;
}
}
.tainacan-selectbox-metadata-type--taginput /deep/ {
.tag,
.tags {
.tainacan-selectbox-metadata-type--taginput {
:deep(.tag),
:deep(.tags) {
white-space: normal !important;
min-height: calc(2em - 1px) !important;
height: auto !important;
}
.tag.is-delete {
:deep(.tag.is-delete) {
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"
@focus="onMobileSpecialFocus">
<b-select
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
expanded
: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')"
:value="value"
@input="onSelected($event)">
<option value="">{{ itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ($i18n.get('label_selectbox_init') + '...') }}</option>
:model-value="value"
@update:model-value="onSelected($event)">
<option value="">
{{ itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ($i18n.get('label_selectbox_init') + '...') }}
</option>
<option
v-for="(option, index) in getOptions"
:key="index"
@ -32,6 +34,10 @@
value: [String, Number, Array],
disabled: false,
},
emits: [
'update:value',
'mobile-special-focus'
],
computed: {
getOptions() {
if (this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.options ) {
@ -43,11 +49,11 @@
},
methods: {
onSelected(value) {
this.$emit('input', value);
this.$emit('update:value', value);
},
onMobileSpecialFocus($event) {
$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>
<b-field
:ref="isHighlightedMetadatum ? 'highlighted-metadatum': 'null'"
:class="metadatumFormClasses"
:ref="isHighlightedMetadatum ? 'hightlighted-metadatum': 'null'"
:addons="false"
:message="errorMessage"
:type="errorMessage ? 'is-danger' : ''">
<span
class="collapse-handle"
@click="(!hideCollapses && !isMetadataNavigation) ? $emit('changeCollapse', errorMessage ? true : !isCollapsed ) : ''">
@click="(!hideCollapses && !isMetadataNavigation) ? $emit('change-collapse', errorMessage ? true : !isCollapsed ) : ''">
<span
v-if="!hideCollapses"
class="icon"
@click="(!hideCollapses && isMetadataNavigation) ? $emit('changeCollapse', errorMessage ? true : !isCollapsed ) : ''">
@click="(!hideCollapses && isMetadataNavigation) ? $emit('change-collapse', errorMessage ? true : !isCollapsed ) : ''">
<i
:class="{
'tainacan-icon-arrowdown' : 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>
<label class="label">
<span
@ -53,59 +53,63 @@
v-show="hideCollapses || isCollapsed || !!errorMessage"
v-if="isTextInputComponent">
<p
class="metadatum-description-help-info"
v-if="itemMetadatum.metadatum &&
itemMetadatum.metadatum.description &&
(
(!hideHelpButtons && helpInfoBellowLabel) ||
(itemMetadatum.metadatum.description_bellow_name === 'yes')
)">
)"
class="metadatum-description-help-info">
{{ itemMetadatum.metadatum.description }}
</p>
<component
:is="metadatumComponent"
v-model="values[0]"
v-model:value="values[0]"
:item-metadatum="itemMetadatum"
@input="changeValue"
@blur="performValueChange"
:disabled="false"
:metadata-name-filter-string="metadataNameFilterString"
:hide-collapses="hideCollapses"
:hide-metadata-types="hideMetadataTypes"
:hide-help-buttons="hideHelpButtons"
:help-info-bellow-label="helpInfoBellowLabel"
:is-mobile-screen="isMobileScreen"
@mobileSpecialFocus="onMobileSpecialFocus"
: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">
<transition-group
tag="div"
name="filter-item"
class="multiple-inputs">
<template v-for="(value, index) of values">
<template
v-for="(value, index) of values"
:key="index">
<component
v-if="index > 0"
:key="index"
:is="metadatumComponent"
v-model="values[index]"
v-if="index > 0"
v-model:value="values[index]"
:item-metadatum="itemMetadatum"
@input="changeValue"
@blur="performValueChange"
:disabled="false"
:metadata-name-filter-string="metadataNameFilterString"
:hide-collapses="hideCollapses"
:hide-metadata-types="hideMetadataTypes"
:hide-help-buttons="hideHelpButtons"
:help-info-bellow-label="helpInfoBellowLabel"
:is-mobile-screen="isMobileScreen"
@mobileSpecialFocus="onMobileSpecialFocus"
:is-focused="isFocused"
:is-metadata-navigation="isMetadataNavigation" />
:is-metadata-navigation="isMetadataNavigation"
@update:value="changeValue"
@blur="performValueChange"
@mobile-special-focus="onMobileSpecialFocus" />
<a
v-if="index > 0"
@click="removeValue(index)"
:key="index"
class="add-link"
:key="index">
@click="removeValue(index)">
<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>
&nbsp;{{ $i18n.get('label_remove_value') }}
</a>
@ -114,10 +118,10 @@
</template>
<template v-if="isMultiple && (maxMultipleValues === undefined || maxMultipleValues === 0 || (maxMultipleValues !== 1 && maxMultipleValues > values.length))">
<a
@click="addValue"
class="is-inline-block add-link">
class="is-inline-block add-link"
@click="addValue">
<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>
&nbsp;{{ $i18n.get('label_add_value') }}
</a>
@ -129,21 +133,20 @@
v-show="hideCollapses || isCollapsed"
v-else>
<p
class="metadatum-description-help-info"
v-if="itemMetadatum.metadatum &&
itemMetadatum.metadatum.description &&
(
(!hideHelpButtons && helpInfoBellowLabel) ||
(itemMetadatum.metadatum.description_bellow_name === 'yes')
)">
)"
class="metadatum-description-help-info">
{{ itemMetadatum.metadatum.description }}
</p>
<component
:is="metadatumComponent"
v-model="values"
v-model:value="values"
:item-metadatum="itemMetadatum"
@input="changeValue"
@blur="performValueChange"
:disabled="false"
:is-last-metadatum="isLastMetadatum"
:hide-collapses="hideCollapses"
:hide-metadata-types="hideMetadataTypes"
@ -151,20 +154,35 @@
:help-info-bellow-label="helpInfoBellowLabel"
:is-mobile-screen="isMobileScreen"
:metadata-name-filter-string="metadataNameFilterString"
@mobileSpecialFocus="onMobileSpecialFocus"
:is-focused="isFocused"
:is-metadata-navigation="isMetadataNavigation"
:enumerate-metadatum="enumerateMetadatum" />
:enumerate-metadatum="enumerateMetadatum"
@update:value="changeValue"
@blur="performValueChange"
@mobile-special-focus="onMobileSpecialFocus" />
</div>
</transition>
</b-field>
</template>
<script>
import { eventBusItemMetadata } from '../../js/event-bus-item-metadata';
import { nextTick, defineAsyncComponent } from 'vue';
export default {
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: {
itemMetadatum: Object,
isCollapsed: true,
@ -179,6 +197,11 @@
isMetadataNavigation: false,
enumerateMetadatum: [String, Boolean]
},
emits: [
'input',
'change-collapse',
'mobile-special-focus'
],
data(){
return {
values: [],
@ -209,7 +232,7 @@
metadatumFormClasses() {
return '' +
(this.hideCollapses ? ' has-collapses-hidden' : '') +
(this.isHighlightedMetadatum ? ' hightlighted-metadatum' : '') +
(this.isHighlightedMetadatum ? ' highlighted-metadatum' : '') +
(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.description ? ' has-description' : '') +
@ -219,7 +242,7 @@
},
created() {
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 = '';
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) {
@ -230,9 +253,9 @@
this.errorMessage = updatedErrorMessage;
});
},
beforeDestroy() {
beforeUnmount() {
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 () {
@ -241,8 +264,8 @@
if (this.isHighlightedMetadatum) {
this.$nextTick(() => {
let highlightedMetadatum = this.$refs['hightlighted-metadatum'];
nextTick(() => {
let highlightedMetadatum = this.$refs['highlighted-metadatum'];
if (highlightedMetadatum && highlightedMetadatum.$el && highlightedMetadatum.$el.scrollIntoView)
setTimeout(() => highlightedMetadatum.$el.scrollIntoView(), 500);
});
@ -315,7 +338,7 @@
}
// 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,
metadatumId: this.itemMetadatum.metadatum.id,
values: this.values ? this.values : '',
@ -333,7 +356,7 @@
},
onMobileSpecialFocus() {
if (this.isMobileScreen)
this.$emit('mobileSpecialFocus');
this.$emit('mobile-special-focus');
}
}
}
@ -348,9 +371,9 @@
justify-content: space-between;
}
/deep/ .is-special-hidden-for-mobile,
/deep/ .is-special-hidden-for-mobile:focus,
/deep/ .is-special-hidden-for-mobile:focus-visible {
:deep(.is-special-hidden-for-mobile),
:deep(.is-special-hidden-for-mobile:focus),
:deep(.is-special-hidden-for-mobile:focus-visible) {
opacity: 0;
width: 0;
height: 0 !important;
@ -369,7 +392,7 @@
border-bottom: 1px solid var(--tainacan-input-border-color);
padding: 10px var(--tainacan-container-padding);
&.hightlighted-metadatum {
&.highlighted-metadatum {
background-color: var(--tainacan-white);
transition: background-color 0.8s;
animation-name: metadatum-highlight;

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

@ -7,24 +7,26 @@
:type="taxonomyType"
:message="taxonomyMessage">
<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
:title="$i18n.getHelperTitle('tainacan-taxonomy', 'taxonomy_id')"
:message="$i18n.getHelperMessage('tainacan-taxonomy', 'taxonomy_id')"/>
:message="$i18n.getHelperMessage('tainacan-taxonomy', 'taxonomy_id')" />
</label>
<b-select
v-model="taxonomy_id"
name="field_type_options[taxonomy_id]"
placeholder="Select the taxonomy"
v-model="taxonomy_id"
@input="emitValues()"
@focus="clear"
:loading="loading"
expanded>
<option value="">{{ $i18n.get('label_selectbox_init') }}...</option>
expanded
@update:model-value="emitValues()"
@focus="clear">
<option value="">
{{ $i18n.get('label_selectbox_init') }}...
</option>
<option
v-for="option in taxonomies"
:value="option.id"
:key="option.id">
:key="option.id"
:value="option.id">
{{ option.name }}
</option>
</b-select>
@ -35,34 +37,34 @@
{{ $i18n.get('label_select_taxonomy_input_type') }}
<help-button
:title="$i18n.getHelperTitle('tainacan-taxonomy', 'input_type')"
:message="$i18n.getHelperMessage('tainacan-taxonomy', 'input_type')"/>
:message="$i18n.getHelperMessage('tainacan-taxonomy', 'input_type')" />
</label>
<b-select
v-if="listInputType"
v-model="input_type"
name="metadata_type_options[component_type]"
placeholder="Select the input type for the taxonomy metadatum"
@input="emitValues()"
v-model="input_type"
expanded>
expanded
@update:model-value="emitValues()">
<option
v-for="(option, index) in single_types"
:value="index"
:key="index">
:key="index"
:value="index">
{{ option }}
</option>
</b-select>
<b-select
v-else
v-model="input_type"
name="metadata_type_options[input_type]"
placeholder="Select the input type for the taxonomy metadatum"
v-model="input_type"
@input="emitValues()"
v-else
expanded>
expanded
@update:model-value="emitValues()">
<option
v-for="(option, index) in multiple_types"
:value="index"
:key="index">
:key="index"
:value="index">
{{ option }}
</option>
</b-select>
@ -74,12 +76,12 @@
:label="$i18n.getHelperTitle('tainacan-taxonomy', 'visible_options_list')">
&nbsp;
<b-switch
size="is-small"
v-model="visible_options_list"
@input="emitValues()" />
size="is-small"
@update:model-value="emitValues()" />
<help-button
: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
v-if="taxonomy_id && taxonomies.length && isTermCreationAllowedOnCurrentTaxonomy"
@ -87,14 +89,14 @@
:label="$i18n.get('label_taxonomy_allow_new_terms')">
&nbsp;
<b-switch
size="is-small"
v-model="allow_new_terms"
@input="emitValues()"
size="is-small"
true-value="yes"
false-value="no" />
false-value="no"
@update:model-value="emitValues()" />
<help-button
: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
v-if="taxonomy_id && taxonomies.length"
@ -102,39 +104,39 @@
:label="$i18n.getHelperTitle('tainacan-taxonomy', 'do_not_dispaly_term_as_link')">
&nbsp;
<b-switch
size="is-small"
v-model="do_not_dispaly_term_as_link"
@input="emitValues()"
size="is-small"
true-value="yes"
false-value="no" />
false-value="no"
@update:model-value="emitValues()" />
<help-button
: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 :addons="false">
<label class="label">
{{ $i18n.getHelperTitle('tainacan-taxonomy', 'link_filtered_by_collections') }}
<help-button
:title="$i18n.getHelperTitle('tainacan-taxonomy', 'link_filtered_by_collections')"
:message="$i18n.getHelperMessage('tainacan-taxonomy', 'link_filtered_by_collections')"/>
:title="$i18n.getHelperTitle('tainacan-taxonomy', 'link_filtered_by_collections')"
:message="$i18n.getHelperMessage('tainacan-taxonomy', 'link_filtered_by_collections')" />
</label>
<b-taginput
:value="getSelectedTaxonomyCollections()"
:model-value="getSelectedTaxonomyCollections()"
autocomplete
:open-on-focus="true"
:data="collections.filter((collection) => !link_filtered_by_collections.includes(collection.id) && (collectionSearchString ? (collection.name.toLowerCase().indexOf(collectionSearchString.toLowerCase()) >= 0) : true) )"
field="name"
@input="updateSelectedCollections"
@focus="clear()"
attached
:disabled="do_not_dispaly_term_as_link == 'yes'"
:remove-on-keys="[]"
:aria-close-label="$i18n.get('remove_value')"
:class="{'has-selected': link_filtered_by_collections != undefined && link_filtered_by_collections != []}"
:placeholder="$i18n.get('instruction_select_one_or_more_collections')"
@typing="filterCollections"
:loading="loadingCollections">
<template slot-scope="props">
:loading="loadingCollections"
@update:model-value="updateSelectedCollections"
@focus="clear()"
@typing="filterCollections">
<template #default="props">
<div class="media">
<div
v-if="props.option.thumbnail && props.option.thumbnail['tainacan-small'] && props.option.thumbnail['tainacan-small']"
@ -142,14 +144,14 @@
<img
width="24"
:alt="$i18n.get('label_thumbnail')"
:src="$thumbHelper.getSrc(props.option['thumbnail'], 'tainacan-small')" >
:src="$thumbHelper.getSrc(props.option['thumbnail'], 'tainacan-small')">
</div>
<div class="media-content">
{{ props.option.name }}
</div>
</div>
</template>
<template slot="empty">
<template #empty>
{{ $i18n.get('info_no_options_found') }}
</template>
</b-taginput>
@ -159,21 +161,21 @@
:label="$i18n.getHelperTitle('tainacan-taxonomy', 'hide_hierarchy_path')">
&nbsp;
<b-switch
size="is-small"
v-model="hide_hierarchy_path"
@input="emitValues()"
size="is-small"
true-value="yes"
false-value="no" />
false-value="no"
@update:model-value="emitValues()" />
<help-button
: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>
</section>
</template>
<script>
import { tainacan as axios } from '../../../js/axios';
import { tainacanApi } from '../../../js/axios';
export default {
props: {
@ -181,6 +183,7 @@
metadatum: [ String, Object ],
errors: [ String, Object, Array ]
},
emits: ['input'],
data(){
return {
isReady: false,
@ -293,7 +296,7 @@
fetchCollections() {
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 => {
this.collections = res.data ? res.data : [];
this.loadingCollections = false;
@ -306,7 +309,7 @@
fetchTaxonomies(){
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 => {
this.taxonomies = res.data ? res.data : [];
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>
<tainacan-taxonomy-tag-input
v-if="getComponent == 'tainacan-taxonomy-tag-input'"
v-model:value="valueComponent"
:disabled="disabled || isFetchingTerms"
:maxtags="maxtags != undefined ? maxtags : (itemMetadatum.metadatum.multiple == 'yes' || allowNew === true ? (maxMultipleValues !== undefined ? maxMultipleValues : null) : '1')"
v-model="valueComponent"
:allow-new="allowNewFromOptions"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : $i18n.get('instruction_type_existing_term')"
:taxonomy-id="taxonomyId"
:item-metadatum="itemMetadatum"
@showAddNewTerm="openTermCreationModal"
:has-counter="false" />
:has-counter="false"
@show-add-new-term="openTermCreationModal" />
<checkbox-radio-metadata-input
v-else
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:is-modal="false"
:parent="0"
:allow-new="allowNewFromOptions"
@showAddNewTerm="openTermCreationModal"
:taxonomy_id="taxonomyId"
:taxonomy-id="taxonomyId"
:selected="!valueComponent ? [] : valueComponent"
:metadatum-id="itemMetadatum.metadatum.id"
:taxonomy="taxonomy"
@ -28,19 +27,20 @@
:metadatum="itemMetadatum.metadatum"
:amount-selected="Array.isArray(valueComponent) ? valueComponent.length : (valueComponent ? '1' : '0')"
:is-checkbox="getComponent == 'tainacan-taxonomy-checkbox'"
@input="(selected) => valueComponent = selected"
:is-mobile-screen="isMobileScreen"
@mobileSpecialFocus="onMobileSpecialFocus"
@show-add-new-term="openTermCreationModal"
@input="(selected) => valueComponent = selected"
@mobile-special-focus="onMobileSpecialFocus"
/>
<div
v-if="displayCreateNewTerm && !isTermCreationPanelOpen && (maxMultipleValues !== undefined ? (maxMultipleValues > valueComponent.length) : true)"
class="add-new-term">
<a
@click="openTermCreationModal"
class="add-link"
:class="{ 'is-loading': isAddingNewTermVaue }">
:class="{ 'is-loading': isAddingNewTermVaue }"
@click="openTermCreationModal">
<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>
&nbsp;{{ $i18n.get('label_create_new_term') }}
</a>
@ -48,7 +48,7 @@
<template v-if="allowNewFromOptions && itemMetadatum.item">
<!-- Term creation modal, used on admin for a complete term creation -->
<b-modal
:active.sync="isTermCreationModalOpen"
v-model:active="isTermCreationModalOpen"
:width="768"
trap-focus
aria-role="dialog"
@ -63,38 +63,40 @@
:taxonomy-id="taxonomyId"
:original-form="{ id: 'new', name: newTermName ? newTermName : '' }"
:is-term-insertion-flow="true"
@onEditionFinished="($event) => addRecentlyCreatedTerm($event.term)"
@onEditionCanceled="() => $console.log('Editing canceled')"
@onErrorFound="($event) => $console.log('Form with errors: ' + $event)" />
@on-edition-finished="($event) => addRecentlyCreatedTerm($event.term)"
@close="isTermCreationModalOpen = false" />
</b-modal>
<!-- Term creation panel, used on item submission block for a simpler term creation -->
<transition name="filter-item">
<term-creation-panel
<component
:is="'term-creation-panel'"
v-if="isTermCreationPanelOpen"
:metadatum-id="itemMetadatum.metadatum.id"
:item-id="itemMetadatum.item.id"
:is-hierarchical="isHierarchical"
v-if="isTermCreationPanelOpen"
:taxonomy-id="taxonomyId"
:original-form="{ id: 'new', name: newTermName ? newTermName : '' }"
@onEditionFinished="($event) => addTermToBeCreated($event)"
@onEditionCanceled="() => isTermCreationPanelOpen = false"
@onErrorFound="($event) => $console.log('Form with errors: ' + $event)" />
@on-edition-finished="($event) => addTermToBeCreated($event)"
@on-edition-canceled="() => isTermCreationPanelOpen = false"
@on-error-found="($event) => $console.log('Form with errors: ' + $event)" />
</transition>
</template>
</div>
</template>
<script>
import TainacanTaxonomyTagInput from './TaxonomyTaginput.vue';
import TainacanTaxonomyTagInput from './TainacanTaxonomyTaginput.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 { defineAsyncComponent } from 'vue';
export default {
components: {
TainacanTaxonomyTagInput,
CheckboxRadioMetadataInput
CheckboxRadioMetadataInput,
TermEditionForm: defineAsyncComponent(() => import('../../edition/term-edition-form.vue')),
},
props: {
itemMetadatum: Object,
@ -105,6 +107,11 @@
allowNew: false,
isMobileScreen: false,
},
emits: [
'updateTaxonomyInputs',
'mobile-special-focus',
'update:value'
],
data(){
return {
valueComponent: null,
@ -156,8 +163,11 @@
}
},
watch: {
valueComponent( val ) {
this.$emit('input', val);
valueComponent: {
handler( val ) {
this.$emit('update:value', val);
},
deep: true
}
},
created() {
@ -224,22 +234,22 @@
let val = this.valueComponent;
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,
}).then(() => {
this.isAddingNewTermVaue = false;
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 {
val = val ? val : [];
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,
}).then(() => {
this.isAddingNewTermVaue = false;
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;
},
onMobileSpecialFocus() {
this.$emit('mobileSpecialFocus');
this.$emit('mobile-special-focus');
}
}
}

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

@ -1,13 +1,11 @@
<template>
<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
:disabled="disabled"
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
size="is-small"
icon="magnify"
@add="emitAdd"
@remove="emitRemove"
v-model="selected"
:data="options"
:maxtags="maxtags != undefined ? maxtags : (itemMetadatum.metadatum.multiple == 'yes' || allowNew === true ? (maxMultipleValues !== undefined ? maxMultipleValues : null) : '1')"
field="label"
@ -20,13 +18,15 @@
:loading="isFetching"
:class="{ 'has-selected': selected != undefined && selected != [] }"
autocomplete
@typing="search"
check-infinite-scroll
@infinite-scroll="searchMore"
:has-counter="false"
:append-to-body="!itemMetadatum.item"
:open-on-focus="false">
<template slot-scope="props">
:open-on-focus="false"
@add="emitAdd"
@remove="emitRemove"
@typing="search"
@infinite-scroll="searchMore">
<template #default="props">
<div class="media">
<div class="media-content">
{{ props.option.label }}
@ -35,13 +35,13 @@
</template>
<template
v-if="!isFetching && options.length <= 0 && searchName.length > 0"
slot="empty">
#empty>
{{ $i18n.get('info_no_terms_found') }}
</template>
<template
v-if="allowNew && !isFetching && searchName.length > 0"
slot="footer">
<a @click="$emit('showAddNewTerm', { name: searchName })">
#footer>
<a @click="$emit('show-add-new-term', { name: searchName })">
{{ $i18n.get('label_create_new_term') + ' "' + searchName + '"' }}
</a>
</template>
@ -61,6 +61,10 @@
maxtags: '',
isLastMetadatum: false
},
emits: [
'update:value',
'show-add-new-term'
],
data() {
return {
selected: [],
@ -168,7 +172,7 @@
for (let term of val)
results.push( term.value );
this.$emit('input', results);
this.$emit('update:value', results);
}
},
emitRemove(){
@ -178,7 +182,7 @@
for (let term of val)
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;
<b-switch
size="is-small"
:value="displaySuggestions"
@input="onUpdateDisplaySuggestions"
:model-value="displaySuggestions"
:true-value="'yes'"
:false-value="'no'" />
:false-value="'no'"
@update:model-value="onUpdateDisplaySuggestions" />
<help-button
: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 :addons="false">
<label class="label is-inline">
@ -22,10 +22,10 @@
:message="$i18n.getHelperMessage('tainacan-text', 'mask')" />
</label>
<b-input
:value="displaySuggestions === 'yes' ? '' : mask"
:model-value="displaySuggestions === 'yes' ? '' : mask"
:disabled="displaySuggestions === 'yes'"
name="mask"
@input="onUpdateMask" />
@update:model-value="onUpdateMask" />
</b-field>
</section>
</template>
@ -35,6 +35,7 @@
props: {
value: [ String, Object, Array ]
},
emits: ['update:value'],
data() {
return {
displaySuggestions: String,
@ -48,11 +49,11 @@
methods: {
onUpdateDisplaySuggestions(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) {
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"
class="control is-clearfix">
<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"
:disabled="disabled"
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:value="value"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
@focus="onMobileSpecialFocus"
v-imask="getMask"
@complete="($event) => getMask ? onInput($event.detail.value) : null"
@input="($event) => getMask ? null : onInput($event.target.value)"
@blur="onBlur" >
@blur="onBlur">
</div>
<b-autocomplete
v-else
:disabled="disabled"
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:value="value"
@blur="onBlur"
:disabled="disabled"
:model-value="value"
:data="options"
:loading="isLoadingOptions"
@input="($event) => { search($event); }"
field="label"
@select="onSelect"
clearable
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
check-infinite-scroll
@blur="onBlur"
@update:model-value="($event) => { search($event); }"
@select="onSelect"
@infinite-scroll="searchMore"
@focus="onMobileSpecialFocus">
<template #header>
@ -36,7 +36,7 @@
{{ $i18n.get('info_metadata_autocomplete_suggestions') }}
</span>
</template>
<template slot-scope="props">
<template #default="props">
<div class="media">
<div class="media-content">
<span class="ellipsed-text">{{ props.option.label }}</span>
@ -62,6 +62,11 @@
value: [String, Number, Array],
disabled: false
},
emits: [
'update:value',
'blur',
'mobile-special-focus'
],
data() {
return {
selected:'',
@ -100,7 +105,7 @@
},
methods: {
onInput(value) {
this.$emit('input', value);
this.$emit('update:value', value);
},
onBlur() {
this.$emit('blur');
@ -182,7 +187,7 @@
this.search(this.searchQuery);
}, 250),
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"
step="1"
min="0"
@input="onUpdateMaxlength"/>
@update:model-value="onUpdateMaxlength" />
</b-field>
</section>
</template>
@ -22,6 +22,10 @@
props: {
value: [ String, Object, Array ]
},
emits: [
'update:value',
'close'
],
data() {
return {
maxlength: [Number, null]
@ -34,7 +38,7 @@
onUpdateMaxlength(value) {
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>
<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) : '')"
: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 : ''"
:value="value"
@input="onInput($event)"
@blur="onBlur"
:model-value="value"
type="textarea"
@focus="onMobileSpecialFocus"
:maxlength="getMaxlength" />
:maxlength="getMaxlength"
@update:model-value="onInput($event)"
@blur="onBlur"
@focus="onMobileSpecialFocus" />
</template>
<script>
@ -19,9 +19,14 @@
value: [String, Number, Array],
disabled: false
},
emits: [
'update:value',
'blur',
'mobile-special-focus'
],
computed: {
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);
else
return undefined;
@ -33,13 +38,13 @@
if ( inputRef && this.getMaxlength && !inputRef.checkHtml5Validity() )
return;
this.$emit('input', value);
this.$emit('update:value', value);
},
onBlur() {
this.$emit('blur');
},
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>
<help-button
:title="$i18n.getHelperTitle('tainacan-user', 'default_author')"
:message="$i18n.getHelperMessage('tainacan-user', 'default_author')"/>
:message="$i18n.getHelperMessage('tainacan-user', 'default_author')" />
</label>
<b-checkbox
v-model="defaultAuthor"
@input="onUpdateDefaultAuthor"
true-value="yes"
false-value="no">
false-value="no"
@update:model-value="onUpdateDefaultAuthor">
{{ $i18n.get('label_default_author_user') }}
</b-checkbox>
</b-field>
@ -23,6 +23,9 @@
props: {
value: [ String, Object, Array ]
},
emits: [
'update:value',
],
data() {
return {
defaultAuthor: String
@ -33,7 +36,7 @@
},
methods: {
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>
<div :class="{ 'is-flex': itemMetadatum.metadatum.multiple != 'yes' || maxtags != undefined }">
<b-taginput
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
expanded
:disabled="disabled"
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
size="is-small"
icon="account"
:value="selected"
@input="onInput"
@blur="onBlur"
:model-value="selected"
:data="options"
:maxtags="maxtags != undefined ? maxtags : (itemMetadatum.metadatum.multiple == 'yes' || allowNew === true ? (maxMultipleValues !== undefined ? maxMultipleValues : null) : '1')"
autocomplete
@ -22,12 +20,14 @@
:aria-close-label="$i18n.get('remove_value')"
:class="{'has-selected': selected != undefined && selected != []}"
field="name"
check-infinite-scroll
:has-counter="false"
@update:model-value="onInput"
@blur="onBlur"
@typing="search"
@focus="onMobileSpecialFocus"
check-infinite-scroll
@infinite-scroll="searchMore"
:has-counter="false">
<template slot-scope="props">
@infinite-scroll="searchMore">
<template #default="props">
<div class="media">
<div
v-if="props.option.avatar_urls && props.option.avatar_urls['24']"
@ -43,7 +43,7 @@
</template>
<template
v-if="!isLoading"
slot="empty">
#empty>
{{ $i18n.get('info_no_user_found') }}
</template>
</b-taginput>
@ -51,7 +51,7 @@
</template>
<script>
import { wp as wpAxios } from '../../../js/axios';
import { wpApi } from '../../../js/axios';
import { mapActions } from 'vuex';
import qs from 'qs';
@ -63,6 +63,11 @@ export default {
allowNew: true,
isLastMetadatum: false
},
emits: [
'update:value',
'blur',
'mobile-special-focus'
],
data() {
return {
selected:[],
@ -93,7 +98,7 @@ export default {
]),
onInput(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() {
this.$emit('blur');
@ -105,7 +110,7 @@ export default {
let query = qs.stringify({ include: this.itemMetadatum.value });
let endpoint = '/users/';
wpAxios.get(endpoint + '?' + query)
wpApi.get(endpoint + '?' + query)
.then((res) => {
for (let user of res.data) {
this.selected.push({
@ -175,7 +180,7 @@ export default {
this.search(this.usersSearchQuery)
}, 250),
onMobileSpecialFocus() {
this.$emit('mobileSpecialFocus');
this.$emit('mobile-special-focus');
}
}
}

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

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

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

@ -1,12 +1,12 @@
<template>
<form
ref="availableExportersModal"
action=""
autofocus
role="dialog"
class="tainacan-modal-content"
tabindex="-1"
aria-modal
ref="availableExportersModal">
aria-modal>
<div style="width: auto">
<header class="tainacan-modal-title">
<h2>{{ $i18n.get('exporters') }}</h2>
@ -18,12 +18,13 @@
<div
role="list"
class="exporter-types-container">
<template v-for="exporterType in availableExporters">
<template
v-for="exporterType in availableExporters"
:key="exporterType.slug">
<div
v-if="!(hideWhenManualCollection && !exporterType.manual_collection)"
role="listitem"
class="exporter-type"
:key="exporterType.slug"
v-if="!(hideWhenManualCollection && !exporterType.manual_collection)"
@click="onSelectExporter(exporterType)">
<h4>{{ exporterType.name }}</h4>
<p>{{ exporterType.description }}</p>
@ -36,14 +37,14 @@
id="button-cancel-exporter-selection"
class="button is-outlined"
type="button"
@click="$parent.close();">
@click="$emit('close');">
{{ $i18n.get('cancel') }}</button>
</div>
</footer>
<b-loading
:active.sync="isLoading"
:can-cancel="false"/>
v-model="isLoading"
:can-cancel="false" />
</section>
</div>
</form>
@ -55,9 +56,12 @@
export default {
name: 'AvailableExportersModal',
props: {
sourceCollection: String,
sourceCollection: [Number,String],
hideWhenManualCollection: false
},
emits: [
'close'
],
data(){
return {
availableExporters: [],
@ -84,7 +88,7 @@
]),
onSelectExporter(exporterType) {
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>
<form
ref="availableImportersModal"
action=""
autofocus
role="dialog"
class="tainacan-modal-content"
tabindex="-1"
aria-modal
ref="availableImportersModal">
aria-modal>
<div style="width: auto">
<header class="tainacan-modal-title">
<h2>{{ $i18n.get('importers') }}</h2>
<hr>
</header>
<section class="tainacan-form">
<p>{{ $i18n.get('instruction_select_an_importer_type') }}</p>
<p>{{ $i18n.get('instruction_select_an_importer_type') }}</p>
<div
role="list"
class="importer-types-container">
<template v-for="importerType in availableImporters">
<template
v-for="importerType in availableImporters"
:key="importerType.slug">
<div
v-if="!(hideWhenManualCollection && !importerType.manual_collection)"
role="listitem"
class="importer-type"
:key="importerType.slug"
v-if="!(hideWhenManualCollection && !importerType.manual_collection)"
@click="onSelectImporter(importerType)">
<h4>{{ importerType.name }}</h4>
<p>{{ importerType.description }}</p>
@ -30,17 +31,17 @@
</template>
<b-loading
:is-full-page="false"
:active.sync="isLoading"
:can-cancel="false"/>
v-model="isLoading"
:is-full-page="false"
:can-cancel="false" />
</div>
<footer class="field is-grouped form-submit">
<footer class="field is-grouped form-submit">
<div class="control">
<button
class="button is-outlined"
type="button"
@click="$parent.close()">Close</button>
@click="$emit('close')">Close</button>
</div>
<!-- <div class="control">
<button class="button is-success">Confirm</button>
@ -60,6 +61,9 @@ export default {
targetCollection: Number,
hideWhenManualCollection: false
},
emits: [
'close'
],
data(){
return {
availableImporters: [],
@ -86,7 +90,7 @@ export default {
]),
onSelectImporter(importerType) {
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