mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-25 00:53:48 +00:00
Merge branch 'master' into issue394_address_confidential
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
// Access to Bootstrap variables and mixins
|
||||
@import '~ChillMainAssets/module/bootstrap/shared';
|
||||
@import 'ChillMainAssets/module/bootstrap/shared';
|
||||
|
||||
// Chill variables
|
||||
@import './scss/chill_variables';
|
||||
@@ -277,11 +277,17 @@ table.table-bordered {
|
||||
}
|
||||
}
|
||||
|
||||
/// meta-data
|
||||
div.updatedBy,
|
||||
div.metadata {
|
||||
span.user, span.date {
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
}
|
||||
div.metadata {
|
||||
font-size: smaller;
|
||||
color: $gray-600;
|
||||
span.user, span.date {
|
||||
text-decoration: underline dotted;
|
||||
&:hover {
|
||||
color: $gray-700;
|
||||
}
|
||||
@@ -424,7 +430,63 @@ span.item-key {
|
||||
//text-decoration: dotted underline;
|
||||
}
|
||||
|
||||
/// Workflows
|
||||
div.workflow {
|
||||
section.step {
|
||||
border: 1px solid $chill-l-gray;
|
||||
padding: 1em 2em;
|
||||
div.flex-table {
|
||||
margin: 1.5em -2em;
|
||||
}
|
||||
}
|
||||
div.to-decision,
|
||||
div.decided {
|
||||
font-variant: all-small-caps;
|
||||
margin-left: 1em;
|
||||
}
|
||||
div.to-decision {
|
||||
font-weight: 300;
|
||||
}
|
||||
div.decided {
|
||||
font-weight: 600;
|
||||
}
|
||||
div.breadcrumb {
|
||||
display: initial;
|
||||
margin-bottom: 0;
|
||||
padding-right: 0.5em;
|
||||
background-color: tint-color($chill-yellow, 90%);
|
||||
border: 1px solid $chill-yellow;
|
||||
color: $primary;
|
||||
border-radius: 1.5em;
|
||||
font-size: 12pt;
|
||||
font-weight: 500;
|
||||
font-variant: small-caps;
|
||||
span, a {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Override bootstrap popover styles
|
||||
div.popover {
|
||||
box-shadow: 0 0 10px -5px $dark;
|
||||
.popover-arrow {}
|
||||
.popover-header {}
|
||||
.popover-body {}
|
||||
|
||||
// Specific worflow breadcrumb popover
|
||||
&.workflow-transition {
|
||||
.popover-header {
|
||||
font-variant: small-caps;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// increase toast message z-index (above all modals)
|
||||
div.v-toast {
|
||||
z-index: 10000!important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,6 +18,7 @@ $chill-theme-buttons: (
|
||||
"show": $chill-blue,
|
||||
"view": $chill-blue,
|
||||
"misc": $gray-300,
|
||||
"download": $gray-300,
|
||||
"cancel": $gray-300,
|
||||
"choose": $gray-300,
|
||||
"notify": $gray-300,
|
||||
@@ -78,6 +79,7 @@ $chill-theme-buttons: (
|
||||
&.btn-choose::before,
|
||||
&.btn-notify::before,
|
||||
&.btn-tpchild::before,
|
||||
&.btn-download::before,
|
||||
&.btn-cancel::before {
|
||||
font: normal normal normal 14px/1 ForkAwesome;
|
||||
margin-right: 0.5em;
|
||||
@@ -105,6 +107,7 @@ $chill-theme-buttons: (
|
||||
&.btn-unlink::before { content: "\f127"; } // fa-chain-broken
|
||||
&.btn-notify::before { content: "\f1d8"; } // fa-paper-plane
|
||||
&.btn-tpchild::before { content: "\f007"; } // fa-user
|
||||
&.btn-download::before { content: "\f019"; } // fa-download
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -41,6 +41,15 @@ div.flex-table {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
div.item-meta {
|
||||
flex-grow: 1 !important;
|
||||
flex-shrink: 1 !important;
|
||||
width: unset !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
@@ -68,6 +68,7 @@ div.notification-show {
|
||||
}
|
||||
|
||||
// Override bootstrap accordion
|
||||
div#workflow-fold,
|
||||
div#notification-fold {
|
||||
.accordion-button {
|
||||
padding: 0;
|
||||
@@ -78,3 +79,14 @@ div#notification-fold {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Counter
|
||||
div.notification-counter {
|
||||
span {
|
||||
&:not(:first-child) {
|
||||
&::before {
|
||||
content: '/ ';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -106,6 +106,8 @@ section.chill-entity {
|
||||
// used for comment-embeddable
|
||||
&.entity-comment-embeddable {
|
||||
width: 100%;
|
||||
|
||||
/* already defined !!
|
||||
div.metadata {
|
||||
font-size: smaller;
|
||||
color: $gray-600;
|
||||
@@ -116,5 +118,6 @@ section.chill-entity {
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
const buildLinkCreate = function(workflowName, relatedEntityClass, relatedEntityId) {
|
||||
let params = new URLSearchParams();
|
||||
params.set('entityClass', relatedEntityClass);
|
||||
params.set('entityId', relatedEntityId);
|
||||
params.set('workflow', workflowName);
|
||||
|
||||
return `/fr/main/workflow/create?`+params.toString();
|
||||
};
|
||||
|
||||
export {
|
||||
buildLinkCreate,
|
||||
};
|
||||
@@ -39,6 +39,7 @@ var ShowHide = function(options) {
|
||||
contents.push(el);
|
||||
}
|
||||
container_content.push(contents);
|
||||
// console.log('container content', container_content);
|
||||
}
|
||||
|
||||
// attach the listener on each input
|
||||
|
||||
@@ -9,9 +9,10 @@ import Dropdown from 'bootstrap/js/src/dropdown';
|
||||
import Modal from 'bootstrap/js/dist/modal';
|
||||
import Collapse from 'bootstrap/js/src/collapse';
|
||||
import Carousel from 'bootstrap/js/src/carousel';
|
||||
import Popover from 'bootstrap/js/src/popover';
|
||||
|
||||
//
|
||||
// ACHeaderSlider is a small slider used in banner of AccompanyingCourse Section
|
||||
// Carousel: ACHeaderSlider is a small slider used in banner of AccompanyingCourse Section
|
||||
// Initialize options, and show/hide controls in first/last slides
|
||||
//
|
||||
let ACHeaderSlider = document.querySelector('#ACHeaderSlider');
|
||||
@@ -48,3 +49,14 @@ if (ACHeaderSlider) {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//
|
||||
// Popover: used in workflow breadcrumb,
|
||||
// (expected in: contextual help, notification-box, workflow-box )
|
||||
//
|
||||
const triggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
|
||||
const popoverList = triggerList.map(function (el) {
|
||||
return new Popover(el, {
|
||||
html: true,
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,49 @@
|
||||
import { createApp } from "vue";
|
||||
import PickWorkflowVue from 'ChillMainAssets/vuejs/_components/EntityWorkflow/PickWorkflow.vue';
|
||||
import ListWorkflowVue from 'ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflow.vue';
|
||||
|
||||
// pick workflow
|
||||
document.querySelectorAll('[data-pick-workflow]')
|
||||
.forEach(function(el) {
|
||||
const app = {
|
||||
components: {
|
||||
PickWorkflowVue
|
||||
},
|
||||
template:
|
||||
'<pick-workflow-vue ' +
|
||||
':relatedEntityClass="relatedEntityClass" ' +
|
||||
':relatedEntityId="relatedEntityId" ' +
|
||||
':workflowsAvailables="workflowsAvailables" ' +
|
||||
'></pick-workflow-vue>',
|
||||
data() {
|
||||
return {
|
||||
relatedEntityClass: el.dataset.relatedEntityClass,
|
||||
relatedEntityId: Number.parseInt(el.dataset.relatedEntityId),
|
||||
workflowsAvailables: JSON.parse(el.dataset.workflowsAvailables),
|
||||
}
|
||||
}
|
||||
};
|
||||
createApp(app).mount(el);
|
||||
})
|
||||
;
|
||||
|
||||
// list workflow
|
||||
document.querySelectorAll('[data-list-workflows]')
|
||||
.forEach(function (el) {
|
||||
const app = {
|
||||
components: {
|
||||
ListWorkflowVue,
|
||||
},
|
||||
template:
|
||||
'<list-workflow-vue ' +
|
||||
':workflows="workflows" ' +
|
||||
'></list-workflow-vue>',
|
||||
data() {
|
||||
return {
|
||||
workflows: JSON.parse(el.dataset.workflows),
|
||||
}
|
||||
}
|
||||
};
|
||||
createApp(app).mount(el);
|
||||
})
|
||||
;
|
||||
@@ -0,0 +1,32 @@
|
||||
import {createApp} from "vue";
|
||||
import EntityWorkflowVueSubscriber from 'ChillMainAssets/vuejs/_components/EntityWorkflow/EntityWorkflowVueSubscriber.vue';
|
||||
import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
|
||||
import { appMessages } from 'ChillMainAssets/vuejs/PickEntity/i18n';
|
||||
|
||||
const i18n = _createI18n(appMessages);
|
||||
|
||||
let containers = document.querySelectorAll('[data-entity-workflow-subscribe]');
|
||||
|
||||
containers.forEach(container => {
|
||||
let app = {
|
||||
components: {
|
||||
EntityWorkflowVueSubscriber,
|
||||
},
|
||||
template: '<entity-workflow-vue-subscriber :entityWorkflowId="this.entityWorkflowId" :subscriberStep="this.subscriberStep" :subscriberFinal="this.subscriberFinal" @subscriptionUpdated="onUpdate"></entity-workflow-vue-subscriber>',
|
||||
data() {
|
||||
return {
|
||||
entityWorkflowId: Number.parseInt(container.dataset.entityWorkflowId),
|
||||
subscriberStep: container.dataset.subscribeStep === "1",
|
||||
subscriberFinal: container.dataset.subscribeFinal === "1",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onUpdate(status) {
|
||||
this.subscriberStep = status.step;
|
||||
this.subscriberFinal = status.final;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
createApp(app).use(i18n).mount(container);
|
||||
})
|
||||
@@ -5,18 +5,21 @@ import { appMessages } from 'ChillMainAssets/vuejs/PickEntity/i18n';
|
||||
|
||||
const i18n = _createI18n(appMessages);
|
||||
|
||||
window.addEventListener('DOMContentLoaded', function(e) {
|
||||
let appsOnPage = new Map();
|
||||
|
||||
let apps = document.querySelectorAll('[data-module="pick-dynamic"]');
|
||||
function loadDynamicPicker(element) {
|
||||
|
||||
let apps = element.querySelectorAll('[data-module="pick-dynamic"]');
|
||||
|
||||
apps.forEach(function(el) {
|
||||
|
||||
const
|
||||
isMultiple = parseInt(el.dataset.multiple) === 1,
|
||||
input = document.querySelector('[data-input-uniqid="'+ el.dataset.uniqid +'"]'),
|
||||
picked = isMultiple ? JSON.parse(input.value) : [JSON.parse(input.value)];
|
||||
uniqId = el.dataset.uniqid,
|
||||
input = element.querySelector('[data-input-uniqid="'+ el.dataset.uniqid +'"]'),
|
||||
picked = (isMultiple) ? (JSON.parse(input.value)) : ((input.value === '[]') ? (null) : ([JSON.parse(input.value)]));
|
||||
|
||||
createApp({
|
||||
const app = createApp({
|
||||
template: '<pick-entity ' +
|
||||
':multiple="multiple" ' +
|
||||
':types="types" ' +
|
||||
@@ -31,7 +34,7 @@ window.addEventListener('DOMContentLoaded', function(e) {
|
||||
return {
|
||||
multiple: isMultiple,
|
||||
types: JSON.parse(el.dataset.types),
|
||||
picked,
|
||||
picked: picked === null ? [] : picked,
|
||||
uniqid: el.dataset.uniqid,
|
||||
}
|
||||
},
|
||||
@@ -65,5 +68,36 @@ window.addEventListener('DOMContentLoaded', function(e) {
|
||||
})
|
||||
.use(i18n)
|
||||
.mount(el);
|
||||
|
||||
appsOnPage.set(uniqId, app);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener('show-hide-show', function(e) {
|
||||
console.log('creation event caught')
|
||||
loadDynamicPicker(e.detail.container)
|
||||
})
|
||||
|
||||
document.addEventListener('show-hide-hide', function(e) {
|
||||
console.log('hiding event caught')
|
||||
e.detail.container.querySelectorAll('[data-module="pick-dynamic"]').forEach((el) => {
|
||||
let uniqId = el.dataset.uniqid;
|
||||
console.log(uniqId);
|
||||
if (appsOnPage.has(uniqId)) {
|
||||
appsOnPage.get(uniqId).unmount();
|
||||
console.log('App has been unmounted')
|
||||
appsOnPage.delete(uniqId);
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function(e) {
|
||||
console.log('loaded event', e)
|
||||
loadDynamicPicker(document)
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import { createApp } from 'vue';
|
||||
import OpenWopiLink from 'ChillMainAssets/vuejs/_components/OpenWopiLink';
|
||||
import {_createI18n} from "ChillMainAssets/vuejs/_js/i18n";
|
||||
|
||||
const i18n = _createI18n({});
|
||||
|
||||
window.addEventListener('DOMContentLoaded', function (e) {
|
||||
document.querySelectorAll('span[data-module="wopi-link"]')
|
||||
.forEach(function (el) {
|
||||
createApp({
|
||||
template: '<open-wopi-link :wopiUrl="wopiUrl" :title="title" :type="type" :button="button"></open-wopi-link>',
|
||||
components: {
|
||||
OpenWopiLink
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
wopiUrl: el.dataset.wopiUrl,
|
||||
title: el.dataset.docTitle,
|
||||
type: el.dataset.docType,
|
||||
button: el.dataset.button ? JSON.parse(el.dataset.button) : {}
|
||||
}
|
||||
}
|
||||
})
|
||||
.use(i18n)
|
||||
.mount(el)
|
||||
;
|
||||
})
|
||||
;
|
||||
});
|
||||
@@ -0,0 +1,30 @@
|
||||
import {ShowHide} from 'ChillMainAssets/lib/show_hide/show_hide.js';
|
||||
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
let
|
||||
finalizeAfterContainer = document.querySelector('#finalizeAfter'),
|
||||
futureDestUsersContainer = document.querySelector('#futureDestUsers')
|
||||
;
|
||||
|
||||
if (null === finalizeAfterContainer) {
|
||||
return;
|
||||
}
|
||||
|
||||
new ShowHide({
|
||||
load_event: null,
|
||||
froms: [finalizeAfterContainer],
|
||||
container: [futureDestUsersContainer],
|
||||
test: function(containers, arg2, arg3) {
|
||||
for (let container of containers) {
|
||||
for (let input of container.querySelectorAll('input')) {
|
||||
if (!input.checked) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
})
|
||||
});
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<ul class="list-suggest remove-items">
|
||||
<ul class="list-suggest remove-items" v-if="picked.length">
|
||||
<li v-for="p in picked" @click="removeEntity(p)" :key="p.type+p.id">
|
||||
<span class="chill_denomination">{{ p.text }}</span>
|
||||
</li>
|
||||
@@ -79,11 +79,15 @@ export default {
|
||||
);
|
||||
this.$refs.addPersons.resetSearch(); // to cast child method
|
||||
modal.showModal = false;
|
||||
console.log(this.picked)
|
||||
},
|
||||
removeEntity(entity) {
|
||||
console.log('remove entity', entity);
|
||||
this.$emit('removeEntity', entity);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.picked);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="d-grid gap-2 my-3">
|
||||
<button class="btn btn-misc" type="button" v-if="!subscriberFinal" @click="subscribeTo('subscribe', 'final')">
|
||||
<i class="fa fa-check fa-fw"></i>
|
||||
{{ $t('subscribe_final') }}
|
||||
</button>
|
||||
<button class="btn btn-misc" type="button" v-if="subscriberFinal" @click="subscribeTo('unsubscribe', 'final')">
|
||||
<i class="fa fa-times fa-fw"></i>
|
||||
{{ $t('unsubscribe_final') }}
|
||||
</button>
|
||||
<button class="btn btn-misc" type="button" v-if="!subscriberStep" @click="subscribeTo('subscribe', 'step')">
|
||||
<i class="fa fa-check fa-fw"></i>
|
||||
{{ $t('subscribe_all_steps') }}
|
||||
</button>
|
||||
<button class="btn btn-misc" type="button" v-if="subscriberStep" @click="subscribeTo('unsubscribe', 'step')">
|
||||
<i class="fa fa-times fa-fw"></i>
|
||||
{{ $t('unsubscribe_all_steps') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods.js';
|
||||
|
||||
export default {
|
||||
name: "EntityWorkflowVueSubscriber",
|
||||
i18n: {
|
||||
messages: {
|
||||
fr: {
|
||||
subscribe_final: "Recevoir une notification à l'étape finale",
|
||||
unsubscribe_final: "Ne plus recevoir de notification à l'étape finale",
|
||||
subscribe_all_steps: "Recevoir une notification à chaque étape du suivi",
|
||||
unsubscribe_all_steps: "Ne plus recevoir de notification à chaque étape du suivi",
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
entityWorkflowId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
subscriberStep: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
subscriberFinal: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ['subscriptionUpdated'],
|
||||
methods: {
|
||||
subscribeTo(step, to) {
|
||||
let params = new URLSearchParams();
|
||||
params.set('subscribe', to);
|
||||
|
||||
const url = `/api/1.0/main/workflow/${this.entityWorkflowId}/${step}?` + params.toString();
|
||||
|
||||
makeFetch('POST', url).then(response => {
|
||||
this.$emit('subscriptionUpdated', response);
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
/*
|
||||
* ALTERNATIVES
|
||||
*
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="laststep">
|
||||
<label class="form-check-label" for="laststep">{{ $t('subscribe_final') }}</label>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="allsteps">
|
||||
<label class="form-check-label" for="allsteps">{{ $t('subscribe_all_steps') }}</label>
|
||||
</div>
|
||||
|
||||
<div class="list-group my-3">
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
{{ $t('subscribe_final') }}
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
{{ $t('subscribe_all_steps') }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="btn-group-vertical my-3" role="group">
|
||||
<button type="button" class="btn btn-outline-primary">
|
||||
<i class="fa fa-check fa-fw"></i>
|
||||
{{ $t('subscribe_final') }}
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-primary">
|
||||
<i class="fa fa-check fa-fw"></i>
|
||||
{{ $t('subscribe_all_steps') }}
|
||||
</button>
|
||||
</div>
|
||||
*/
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="list-group my-2 workflow workflow-box">
|
||||
<div class="list-group-item">
|
||||
<h4>Workflow associés</h4>
|
||||
</div>
|
||||
<div class="list-group-item" v-for="w in workflows">
|
||||
{{ w.id }}
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<a class="btn btn-sm btn-outline-primary"
|
||||
title="voir"
|
||||
:href="goToUrl(w)">
|
||||
<i class="fa fa-eye fa-fw"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ListWorkflow",
|
||||
props: {
|
||||
workflows: {
|
||||
type: Array,
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goToUrl(w) {
|
||||
return `/fr/main/workflow/${w.id}/show`;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<template v-if="workflowsAvailables.length >= 1">
|
||||
<div class="dropdown d-grid gap-2">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button" id="createWorkflowButton" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Créer un workflow
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="createWorkflowButton">
|
||||
<li v-for="w in workflowsAvailables" :key="w.name">
|
||||
<a class="dropdown-item" :href="makeLink(w.name)" @click="goToGenerateWorkflow($event, w.name)">{{ w.text }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {buildLinkCreate} from 'ChillMainAssets/lib/entity-workflow/api.js';
|
||||
|
||||
export default {
|
||||
name: "PickWorkflow",
|
||||
props: {
|
||||
relatedEntityClass: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
relatedEntityId: {
|
||||
type: Number,
|
||||
required: false,
|
||||
},
|
||||
workflowsAvailables: {
|
||||
type: Array,
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
emits: ['goToGenerateWorkflow'],
|
||||
methods: {
|
||||
makeLink(workflowName) {
|
||||
return buildLinkCreate(workflowName, this.relatedEntityClass, this.relatedEntityId);
|
||||
},
|
||||
goToGenerateWorkflow(event, workflowName) {
|
||||
this.$emit('goToGenerateWorkflow', {event, workflowName, link: this.makeLink(workflowName)});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -15,7 +15,7 @@
|
||||
<div class="modal-body">
|
||||
<slot name="body"></slot>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="modal-footer" v-if="!hideFooter">
|
||||
<button class="btn btn-cancel" @click="$emit('close')">{{ $t('action.close') }}</button>
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
@@ -38,7 +38,16 @@
|
||||
*/
|
||||
export default {
|
||||
name: 'Modal',
|
||||
props: ['modalDialogClass'],
|
||||
props: {
|
||||
modalDialogClass: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
hideFooter: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
emits: ['close']
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<a v-if="isOpenDocument"
|
||||
class="btn change-icon" :class="[isChangeClass ? button.changeClass : 'btn-edit']"
|
||||
@click="openModal">
|
||||
|
||||
<i class="fa me-2" :class="[isChangeIcon ? button.changeIcon : 'fa-pencil']"></i>
|
||||
|
||||
<span v-if="!noText">
|
||||
{{ $t('Update_document') }}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<teleport to="body">
|
||||
<div class="wopi-frame" v-if="isOpenDocument">
|
||||
<modal v-if="modal.showModal"
|
||||
:modalDialogClass="modal.modalDialogClass"
|
||||
:hideFooter=true
|
||||
@close="modal.showModal = false">
|
||||
|
||||
<template v-slot:header>
|
||||
<img class="logo" :src="logo" height="45"/>
|
||||
<span class="ms-auto me-3">
|
||||
{{ this.title }}
|
||||
</span>
|
||||
<a class="btn btn-outline-light">
|
||||
<i class="fa fa-save fa-fw"></i>
|
||||
{{ $t('save_and_quit') }}
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<template v-slot:body>
|
||||
<div v-if="loading" class="loading">
|
||||
<i class="fa fa-circle-o-notch fa-spin fa-3x" :title="$t('loading')"></i>
|
||||
</div>
|
||||
<iframe
|
||||
:src="this.wopiUrl"
|
||||
@load="loaded"
|
||||
></iframe>
|
||||
</template>
|
||||
|
||||
</modal>
|
||||
</div>
|
||||
<div v-else>
|
||||
<modal v-if="modal.showModal"
|
||||
modalDialogClass="modal-sm"
|
||||
@close="modal.showModal = false">
|
||||
|
||||
<template v-slot:header>
|
||||
<h3>{{ $t('invalid_title') }}</h3>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<div class="alert alert-warning">{{ $t('invalid_message') }}</div>
|
||||
</template>
|
||||
|
||||
</modal>
|
||||
</div>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
|
||||
import logo from 'ChillMainAssets/chill/img/logo-chill-sans-slogan_white.png';
|
||||
|
||||
export default {
|
||||
name: "OpenWopiLink",
|
||||
components: {
|
||||
Modal
|
||||
},
|
||||
props: {
|
||||
wopiUrl: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
button: {
|
||||
type: Object,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
modal: {
|
||||
showModal: false,
|
||||
modalDialogClass: "modal-fullscreen" //modal-dialog-scrollable
|
||||
},
|
||||
logo: logo,
|
||||
loading: false,
|
||||
mime: [
|
||||
// TODO temporary hardcoded. to be replaced by twig extension or a collabora server query
|
||||
'application/clarisworks',
|
||||
'application/coreldraw',
|
||||
'application/macwriteii',
|
||||
'application/msword',
|
||||
'application/pdf',
|
||||
'application/vnd.lotus-1-2-3',
|
||||
'application/vnd.ms-excel',
|
||||
'application/vnd.ms-excel.sheet.binary.macroEnabled.12',
|
||||
'application/vnd.ms-excel.sheet.macroEnabled.12',
|
||||
'application/vnd.ms-excel.template.macroEnabled.12',
|
||||
'application/vnd.ms-powerpoint',
|
||||
'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
|
||||
'application/vnd.ms-powerpoint.template.macroEnabled.12',
|
||||
'application/vnd.ms-visio.drawing',
|
||||
'application/vnd.ms-word.document.macroEnabled.12',
|
||||
'application/vnd.ms-word.template.macroEnabled.12',
|
||||
'application/vnd.ms-works',
|
||||
'application/vnd.oasis.opendocument.chart',
|
||||
'application/vnd.oasis.opendocument.formula',
|
||||
'application/vnd.oasis.opendocument.graphics',
|
||||
'application/vnd.oasis.opendocument.graphics-flat-xml',
|
||||
'application/vnd.oasis.opendocument.graphics-template',
|
||||
'application/vnd.oasis.opendocument.presentation',
|
||||
'application/vnd.oasis.opendocument.presentation-flat-xml',
|
||||
'application/vnd.oasis.opendocument.presentation-template',
|
||||
'application/vnd.oasis.opendocument.spreadsheet',
|
||||
'application/vnd.oasis.opendocument.spreadsheet-flat-xml',
|
||||
'application/vnd.oasis.opendocument.spreadsheet-template',
|
||||
'application/vnd.oasis.opendocument.text',
|
||||
'application/vnd.oasis.opendocument.text-flat-xml',
|
||||
'application/vnd.oasis.opendocument.text-master',
|
||||
'application/vnd.oasis.opendocument.text-master-template',
|
||||
'application/vnd.oasis.opendocument.text-template',
|
||||
'application/vnd.oasis.opendocument.text-web',
|
||||
'application/vnd.openxmlformats-officedocument.presentationml.presentation',
|
||||
'application/vnd.openxmlformats-officedocument.presentationml.slideshow',
|
||||
'application/vnd.openxmlformats-officedocument.presentationml.template',
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.template',
|
||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.template',
|
||||
'application/vnd.sun.xml.calc',
|
||||
'application/vnd.sun.xml.calc.template',
|
||||
'application/vnd.sun.xml.chart',
|
||||
'application/vnd.sun.xml.draw',
|
||||
'application/vnd.sun.xml.draw.template',
|
||||
'application/vnd.sun.xml.impress',
|
||||
'application/vnd.sun.xml.impress.template',
|
||||
'application/vnd.sun.xml.math',
|
||||
'application/vnd.sun.xml.writer',
|
||||
'application/vnd.sun.xml.writer.global',
|
||||
'application/vnd.sun.xml.writer.template',
|
||||
'application/vnd.visio',
|
||||
'application/vnd.visio2013',
|
||||
'application/vnd.wordperfect',
|
||||
'application/x-abiword',
|
||||
'application/x-aportisdoc',
|
||||
'application/x-dbase',
|
||||
'application/x-dif-document',
|
||||
'application/x-fictionbook+xml',
|
||||
'application/x-gnumeric',
|
||||
'application/x-hwp',
|
||||
'application/x-iwork-keynote-sffkey',
|
||||
'application/x-iwork-numbers-sffnumbers',
|
||||
'application/x-iwork-pages-sffpages',
|
||||
'application/x-mspublisher',
|
||||
'application/x-mswrite',
|
||||
'application/x-pagemaker',
|
||||
'application/x-sony-bbeb',
|
||||
'application/x-t602',
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isOpenDocument() {
|
||||
if (this.mime.indexOf(this.type) !== -1) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
noText() {
|
||||
if (typeof this.button.noText !== 'undefined') {
|
||||
return this.button.noText === true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
isChangeIcon() {
|
||||
if (typeof this.button.changeIcon !== 'undefined') {
|
||||
return (!(this.button.changeIcon === null || this.button.changeIcon === ''))
|
||||
}
|
||||
return false;
|
||||
},
|
||||
isChangeClass() {
|
||||
if (typeof this.button.changeClass !== 'undefined') {
|
||||
return (!(this.button.changeClass === null || this.button.changeClass === ''))
|
||||
}
|
||||
return false;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openModal() {
|
||||
this.loading = true;
|
||||
this.modal.showModal = true;
|
||||
},
|
||||
loaded() {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
i18n: {
|
||||
messages: {
|
||||
fr: {
|
||||
Update_document: "Modifier le document",
|
||||
save_and_quit: "Enregistrer et quitter",
|
||||
loading: "Chargement de l'éditeur en ligne",
|
||||
invalid_title: "Format incompatible",
|
||||
invalid_message: "Désolé, ce format de document n'est pas éditable en ligne.",
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
div.wopi-frame {
|
||||
div.modal-header {
|
||||
border-bottom: 0;
|
||||
background-color: var(--bs-primary);
|
||||
color: white;
|
||||
}
|
||||
div.modal-body {
|
||||
padding: 0;
|
||||
overflow-y: unset !important;
|
||||
iframe {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
div.loading {
|
||||
position: absolute;
|
||||
color: var(--bs-chill-gray);
|
||||
top: calc(50% - 30px);
|
||||
left: calc(50% - 30px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user