mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
Implement translator in vue components and use script setup syntax
This commit is contained in:
parent
c1c632dcb0
commit
9c963a2122
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
|
||||
<span v-if="entity.type === 'person'" class="badge rounded-pill bg-person">
|
||||
{{ $t('person') }}
|
||||
{{ trans(PERSON) }}
|
||||
</span>
|
||||
|
||||
<span v-if="entity.type === 'thirdparty'" class="badge rounded-pill bg-thirdparty">
|
||||
<template v-if="options.displayLong !== true">
|
||||
{{ $t('thirdparty.thirdparty')}}
|
||||
{{ trans(THIRDPARTY)}}
|
||||
</template>
|
||||
|
||||
<i class="fa fa-fw fa-user" v-if="entity.kind === 'child'"></i>
|
||||
@ -14,41 +14,36 @@
|
||||
<i class="fa fa-fw fa-user-md" v-else></i>
|
||||
|
||||
<template v-if="options.displayLong === true">
|
||||
<span v-if="entity.kind === 'child'">{{ $t('thirdparty.child')}}</span>
|
||||
<span v-else-if="entity.kind === 'company'">{{ $t('thirdparty.company')}}</span>
|
||||
<span v-else>{{ $t('thirdparty.contact')}}</span>
|
||||
<span v-if="entity.kind === 'child'">{{ trans(THIRDPARTY_CONTACT_OF)}}</span>
|
||||
<span v-else-if="entity.kind === 'company'">{{ trans(THIRDPARTY_COMPANY)}}</span>
|
||||
<span v-else>{{ trans(THIRDPARTY_A_CONTACT)}}</span>
|
||||
</template>
|
||||
</span>
|
||||
|
||||
<span v-if="entity.type === 'user'" class="badge rounded-pill bg-user">
|
||||
{{ $t('user')}}
|
||||
{{ trans(ACCEPTED_USERS)}}
|
||||
</span>
|
||||
|
||||
<span v-if="entity.type === 'household'" class="badge rounded-pill bg-user">
|
||||
{{ $t('household')}}
|
||||
{{ trans(HOUSEHOLD)}}
|
||||
</span>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "BadgeEntity",
|
||||
props: ['options', 'entity'],
|
||||
i18n: {
|
||||
messages: {
|
||||
fr: {
|
||||
person: "Usager",
|
||||
thirdparty: {
|
||||
thirdparty: "Tiers",
|
||||
child: "Personne de contact",
|
||||
company: "Personne morale",
|
||||
contact: "Personne physique",
|
||||
},
|
||||
user: 'TMS',
|
||||
household: 'Ménage',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
trans,
|
||||
HOUSEHOLD,
|
||||
ACCEPTED_USERS,
|
||||
THIRDPARTY_A_CONTACT,
|
||||
THIRDPARTY_COMPANY,
|
||||
THIRDPARTY_CONTACT_OF,
|
||||
PERSON, THIRDPARTY
|
||||
} from '../../../../../../../../../../assets/translator'
|
||||
|
||||
const props = defineProps({
|
||||
options: Object,
|
||||
entity: Object
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -9,23 +9,16 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Confidential",
|
||||
data() {
|
||||
return {
|
||||
isBlurred: true,
|
||||
toggleIcon: 'fa-eye',
|
||||
};
|
||||
},
|
||||
methods : {
|
||||
toggleBlur() {
|
||||
console.log(this.positionBtnFar);
|
||||
this.isBlurred = !this.isBlurred;
|
||||
this.toggleIcon = this.isBlurred ? 'fa-eye' : 'fa-eye-slash';
|
||||
},
|
||||
},
|
||||
}
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
const isBlurred = ref(true);
|
||||
const toggleIcon = ref('fa-eye');
|
||||
|
||||
const toggleBlur = () => {
|
||||
isBlurred.value = !isBlurred.value;
|
||||
toggleIcon.value = isBlurred.value ? 'fa-eye' : 'fa-eye-slash';
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
|
||||
@ -44,17 +44,17 @@
|
||||
<div class="item-col flex-grow-1">
|
||||
<p v-if="isUserSubscribedToStep(w)">
|
||||
<i class="fa fa-check fa-fw"></i>
|
||||
{{ $t('you_subscribed_to_all_steps') }}
|
||||
{{ trans(WORKFLOW_YOU_DESCRIBED_TO_ALL_STEPS) }}
|
||||
</p>
|
||||
<p v-if="isUserSubscribedToFinal(w)">
|
||||
<i class="fa fa-check fa-fw"></i>
|
||||
{{ $t('you_subscribed_to_final_step') }}
|
||||
{{ trans(WORKFLOW_YOU_SUBSCRIBED_TO_FINAL_STEP) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="item-col">
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<a :href="goToUrl(w)" class="btn btn-sm btn-show" :title="$t('action.show')"></a>
|
||||
<a :href="goToUrl(w)" class="btn btn-sm btn-show" :title="trans(SEE)"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -64,69 +64,47 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import Popover from 'bootstrap/js/src/popover';
|
||||
import { onMounted } from 'vue';
|
||||
import { trans, SEE, BY_USER, WORKFLOW_AT, WORKFLOW_YOU_SUBSCRIBED_TO_ALL_STEPS, WORKFLOW_YOU_SUBSCRIBED_TO_FINAL_STEP } from '../../../../../../../../../../../assets/translator'
|
||||
|
||||
const i18n = {
|
||||
messages: {
|
||||
fr: {
|
||||
you_subscribed_to_all_steps: "Vous recevrez une notification à chaque étape",
|
||||
you_subscribed_to_final_step: "Vous recevrez une notification à l'étape finale",
|
||||
by: "Par",
|
||||
at: "Le"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "ListWorkflow",
|
||||
i18n: i18n,
|
||||
props: {
|
||||
// props
|
||||
const props = defineProps({
|
||||
workflows: {
|
||||
type: Array,
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goToUrl(w) {
|
||||
return `/fr/main/workflow/${w.id}/show`;
|
||||
},
|
||||
getPopTitle(step) {
|
||||
if (step.transitionPrevious != null) {
|
||||
//console.log(step.transitionPrevious.text);
|
||||
let freezed = step.isFreezed ? `<i class="fa fa-snowflake-o fa-sm me-1"></i>` : ``;
|
||||
return `${freezed}${step.transitionPrevious.text}`;
|
||||
}
|
||||
},
|
||||
getPopContent(step) {
|
||||
if (step.transitionPrevious != null) {
|
||||
return `<ul class="small_in_title">
|
||||
<li><span class="item-key">${i18n.messages.fr.by} : </span><b>${step.transitionPreviousBy.text}</b></li>
|
||||
<li><span class="item-key">${i18n.messages.fr.at} : </span><b>${this.formatDate(step.transitionPreviousAt.datetime)}</b></li>
|
||||
</ul>`
|
||||
;
|
||||
}
|
||||
},
|
||||
formatDate(datetime) {
|
||||
return datetime.split('T')[0] +' '+ datetime.split('T')[1].substring(0,5)
|
||||
},
|
||||
isUserSubscribedToStep(w) {
|
||||
// todo
|
||||
return false;
|
||||
},
|
||||
isUserSubscribedToFinal(w) {
|
||||
// todo
|
||||
return false;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
})
|
||||
|
||||
// methods
|
||||
const goToUrl = (w) => `/fr/main/workflow/${w.id}/show`;
|
||||
const getPopTitle = (step) => {
|
||||
if (step.transitionPrevious != null) {
|
||||
//console.log(step.transitionPrevious.text);
|
||||
let freezed = step.isFreezed ? `<i class="fa fa-snowflake-o fa-sm me-1"></i>` : ``;
|
||||
return `${freezed}${step.transitionPrevious.text}`;
|
||||
}
|
||||
}
|
||||
const getPopContent = (step) => {
|
||||
if (step.transitionPrevious != null) {
|
||||
return `<ul class="small_in_title">
|
||||
<li><span class="item-key">{{ trans(BY_USER) }} : </span><b>${step.transitionPreviousBy.text}</b></li>
|
||||
<li><span class="item-key">{{ trans(WORKFLOW_AT) }} : </span><b>${this.formatDate(step.transitionPreviousAt.datetime)}</b></li>
|
||||
</ul>`
|
||||
;
|
||||
}
|
||||
}
|
||||
const formatDate = (datetime) => datetime.split('T')[0] +' '+ datetime.split('T')[1].substring(0,5)
|
||||
const isUserSubscribedToStep = (w) => false;
|
||||
const isUserSubscribedToFinal = (w) => false;
|
||||
|
||||
onMounted(() => {
|
||||
const triggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
|
||||
const popoverList = triggerList.map(function (el) {
|
||||
//console.log('popover', el)
|
||||
return new Popover(el, {
|
||||
html: true,
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -4,26 +4,26 @@
|
||||
class="btn btn-primary"
|
||||
@click="openModal">
|
||||
<b>{{ countWorkflows }}</b>
|
||||
<template v-if="countWorkflows > 1">{{ $t('workflows') }}</template>
|
||||
<template v-else>{{ $t('workflow') }}</template>
|
||||
<template v-if="countWorkflows > 1">{{ trans(WORKFLOW_ASSOCIATED, { aw: 'other' }) }}</template>
|
||||
<template v-else>{{ trans(WORKFLOW_ASSOCIATED, { aw: 1 }) }}</template>
|
||||
</button>
|
||||
|
||||
<pick-workflow v-else-if="allowCreate"
|
||||
<Pick-workflow v-else-if="allowCreate"
|
||||
:relatedEntityClass="this.relatedEntityClass"
|
||||
:relatedEntityId="this.relatedEntityId"
|
||||
:workflowsAvailables="workflowsAvailables"
|
||||
:preventDefaultMoveToGenerate="this.$props.preventDefaultMoveToGenerate"
|
||||
:goToGenerateWorkflowPayload="this.goToGenerateWorkflowPayload"
|
||||
@go-to-generate-workflow="goToGenerateWorkflow"
|
||||
></pick-workflow>
|
||||
></Pick-workflow>
|
||||
|
||||
<teleport to="body">
|
||||
<modal v-if="modal.showModal"
|
||||
<Modal v-if="modal.showModal"
|
||||
:modalDialogClass="modal.modalDialogClass"
|
||||
@close="modal.showModal = false">
|
||||
|
||||
<template v-slot:header>
|
||||
<h2 class="modal-title">{{ $t('workflow_list') }}</h2>
|
||||
<h2 class="modal-title">{{ trans(WORKFLOW_LIST) }}</h2>
|
||||
</template>
|
||||
|
||||
<template v-slot:body>
|
||||
@ -43,89 +43,67 @@
|
||||
></pick-workflow>
|
||||
</template>
|
||||
|
||||
</modal>
|
||||
</Modal>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, computed, defineProps, defineEmits } from 'vue';
|
||||
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
|
||||
import PickWorkflow from 'ChillMainAssets/vuejs/_components/EntityWorkflow/PickWorkflow.vue';
|
||||
import ListWorkflowVue from 'ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflow.vue';
|
||||
import { trans, WORKFLOW_ASSOCIATED, WORKFLOW_LIST } from '../../../../../../../../../../../assets/translator'
|
||||
|
||||
export default {
|
||||
name: "ListWorkflowModal",
|
||||
components: {
|
||||
Modal,
|
||||
PickWorkflow,
|
||||
ListWorkflowVue
|
||||
},
|
||||
emits: ['goToGenerateWorkflow'],
|
||||
props: {
|
||||
workflows: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
allowCreate: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
relatedEntityClass: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
relatedEntityId: {
|
||||
type: Number,
|
||||
required: false,
|
||||
},
|
||||
workflowsAvailables: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
preventDefaultMoveToGenerate: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
goToGenerateWorkflowPayload: {
|
||||
required: false,
|
||||
default: {}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
modal: {
|
||||
showModal: false,
|
||||
modalDialogClass: "modal-dialog-scrollable modal-xl"
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
countWorkflows() {
|
||||
return this.workflows.length;
|
||||
},
|
||||
hasWorkflow() {
|
||||
return this.countWorkflows > 0;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openModal() {
|
||||
this.modal.showModal = true;
|
||||
},
|
||||
goToGenerateWorkflow(data) {
|
||||
console.log('go to generate workflow intercepted', data);
|
||||
this.$emit('goToGenerateWorkflow', data);
|
||||
}
|
||||
},
|
||||
i18n: {
|
||||
messages: {
|
||||
fr: {
|
||||
workflow_list: "Liste des workflows associés",
|
||||
workflow: " workflow associé",
|
||||
workflows: " workflows associés",
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Define props
|
||||
const props = defineProps({
|
||||
workflows: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
allowCreate: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
relatedEntityClass: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
relatedEntityId: {
|
||||
type: Number,
|
||||
required: false,
|
||||
},
|
||||
workflowsAvailables: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
preventDefaultMoveToGenerate: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
goToGenerateWorkflowPayload: {
|
||||
required: false,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
// Define emits
|
||||
const emit = defineEmits(['goToGenerateWorkflow']);
|
||||
|
||||
// Reactive data
|
||||
const modal = ref({
|
||||
showModal: false,
|
||||
modalDialogClass: "modal-dialog-scrollable modal-xl"
|
||||
});
|
||||
|
||||
// Computed properties
|
||||
const countWorkflows = computed(() => props.workflows.length);
|
||||
const hasWorkflow = computed(() => countWorkflows.value > 0);
|
||||
|
||||
// Methods
|
||||
const openModal = () => modal.value.showModal = true;
|
||||
|
||||
const goToGenerateWorkflow = (data) => emit('goToGenerateWorkflow', data);
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@ -13,51 +13,57 @@
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
import { buildLinkCreate } from 'ChillMainAssets/lib/entity-workflow/api.js';
|
||||
|
||||
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,
|
||||
},
|
||||
preventDefaultMoveToGenerate: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
goToGenerateWorkflowPayload: {
|
||||
required: false,
|
||||
default: {}
|
||||
},
|
||||
// Define props
|
||||
const props = defineProps({
|
||||
relatedEntityClass: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
emits: ['goToGenerateWorkflow'],
|
||||
methods: {
|
||||
makeLink(workflowName) {
|
||||
return buildLinkCreate(workflowName, this.relatedEntityClass, this.relatedEntityId);
|
||||
},
|
||||
goToGenerateWorkflow(event, workflowName) {
|
||||
console.log('goToGenerateWorkflow', event, workflowName);
|
||||
relatedEntityId: {
|
||||
type: Number,
|
||||
required: false,
|
||||
},
|
||||
workflowsAvailables: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
preventDefaultMoveToGenerate: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
goToGenerateWorkflowPayload: {
|
||||
required: false,
|
||||
default: () => ({}), // Use a function to return an object
|
||||
},
|
||||
});
|
||||
|
||||
if (!this.$props.preventDefaultMoveToGenerate) {
|
||||
console.log('to go generate');
|
||||
window.location.assign(this.makeLink(workflowName));
|
||||
}
|
||||
// Define emits
|
||||
const emit = defineEmits(['goToGenerateWorkflow']);
|
||||
|
||||
this.$emit('goToGenerateWorkflow', {event, workflowName, link: this.makeLink(workflowName), payload: this.goToGenerateWorkflowPayload});
|
||||
}
|
||||
// Methods
|
||||
function makeLink(workflowName) {
|
||||
return buildLinkCreate(workflowName, props.relatedEntityClass, props.relatedEntityId);
|
||||
}
|
||||
|
||||
function goToGenerateWorkflow(event, workflowName) {
|
||||
console.log('goToGenerateWorkflow', event, workflowName);
|
||||
|
||||
if (!props.preventDefaultMoveToGenerate) {
|
||||
console.log('to go generate');
|
||||
window.location.assign(makeLink(workflowName));
|
||||
}
|
||||
|
||||
emit('goToGenerateWorkflow', {
|
||||
event,
|
||||
workflowName,
|
||||
link: makeLink(workflowName),
|
||||
payload: props.goToGenerateWorkflowPayload,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -28,9 +28,7 @@
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent} from "vue";
|
||||
import { trans, MODAL_ACTION_CLOSE } from '../../../../../../../../../../assets/translator'
|
||||
<script setup lang="ts">
|
||||
/*
|
||||
* This Modal component is a mix between Vue3 modal implementation
|
||||
* [+] with 'v-if:showModal' directive:parameter, html scope is added/removed not just shown/hidden
|
||||
@ -40,28 +38,24 @@ import { trans, MODAL_ACTION_CLOSE } from '../../../../../../../../../../assets/
|
||||
* [+] using bootstrap css classes, the modal have a responsive behaviour,
|
||||
* [+] modal design can be configured using css classes (size, scroll)
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: 'Modal',
|
||||
props: {
|
||||
modalDialogClass: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: {},
|
||||
},
|
||||
hideFooter: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
emits: ['close'],
|
||||
setup() {
|
||||
return {
|
||||
MODAL_ACTION_CLOSE,
|
||||
trans
|
||||
};
|
||||
import { trans, MODAL_ACTION_CLOSE } from '../../../../../../../../../../assets/translator'
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
|
||||
// Define the props
|
||||
const props = defineProps({
|
||||
modalDialogClass: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: {},
|
||||
},
|
||||
hideFooter: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@ -6,12 +6,12 @@
|
||||
class="btn"
|
||||
:class="overrideClass"
|
||||
type="button"
|
||||
:title="$t('markAsUnread')"
|
||||
:title="trans(NOTIFICATION_MARK_AS_UNREAD)"
|
||||
@click="markAsUnread"
|
||||
>
|
||||
<i class="fa fa-sm fa-envelope-o"></i>
|
||||
<span v-if="!buttonNoText" class="ps-2">
|
||||
{{ $t('markAsUnread') }}
|
||||
{{ trans(NOTIFICATION_MARK_AS_UNREAD) }}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
@ -19,12 +19,12 @@
|
||||
class="btn"
|
||||
:class="overrideClass"
|
||||
type="button"
|
||||
:title="$t('markAsRead')"
|
||||
:title="trans(NOTIFICATION_MARK_AS_READ)"
|
||||
@click="markAsRead"
|
||||
>
|
||||
<i class="fa fa-sm fa-envelope-open-o"></i>
|
||||
<span v-if="!buttonNoText" class="ps-2">
|
||||
{{ $t('markAsRead') }}
|
||||
{{ trans(NOTIFICATION_MARK_AS_READ) }}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
@ -40,71 +40,65 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods.ts';
|
||||
import { trans, NOTIFICATION_MARK_AS_READ, NOTIFICATION_MARK_AS_UNREAD } from '../../../../../../../../../../../assets/translator'
|
||||
|
||||
export default {
|
||||
name: "NotificationReadToggle",
|
||||
props: {
|
||||
isRead: {
|
||||
required: true,
|
||||
type: Boolean,
|
||||
},
|
||||
notificationId: {
|
||||
required: true,
|
||||
type: Number,
|
||||
},
|
||||
// Optional
|
||||
buttonClass: {
|
||||
required: false,
|
||||
type: String
|
||||
},
|
||||
buttonNoText: {
|
||||
required: false,
|
||||
type: Boolean,
|
||||
},
|
||||
showUrl: {
|
||||
required: false,
|
||||
type: String
|
||||
}
|
||||
// Props
|
||||
const props = defineProps({
|
||||
isRead: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
emits: ['markRead', 'markUnread'],
|
||||
computed: {
|
||||
/// [Option] override default button appearance (btn-misc)
|
||||
overrideClass() {
|
||||
return this.buttonClass ? this.buttonClass : 'btn-misc'
|
||||
},
|
||||
/// [Option] don't display text on button
|
||||
buttonHideText() {
|
||||
return this.buttonNoText;
|
||||
},
|
||||
/// [Option] showUrl is href for show page second button.
|
||||
// When passed, the component return a button-group with 2 buttons.
|
||||
isButtonGroup() {
|
||||
return this.showUrl;
|
||||
}
|
||||
notificationId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
methods: {
|
||||
markAsUnread() {
|
||||
makeFetch('POST', `/api/1.0/main/notification/${this.notificationId}/mark/unread`, []).then(response => {
|
||||
this.$emit('markRead', { notificationId: this.notificationId });
|
||||
})
|
||||
},
|
||||
markAsRead() {
|
||||
makeFetch('POST', `/api/1.0/main/notification/${this.notificationId}/mark/read`, []).then(response => {
|
||||
this.$emit('markUnread', { notificationId: this.notificationId });
|
||||
})
|
||||
buttonClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
buttonNoText: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
},
|
||||
showUrl: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
});
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits(['markRead', 'markUnread']);
|
||||
|
||||
// Computed
|
||||
const overrideClass = computed(() => props.buttonClass || 'btn-misc');
|
||||
const buttonHideText = computed(() => props.buttonNoText);
|
||||
const isButtonGroup = computed(() => props.showUrl);
|
||||
|
||||
// Methods
|
||||
const markAsUnread = () => {
|
||||
makeFetch('POST', `/api/1.0/main/notification/${props.notificationId}/mark/unread`, []).then(() => {
|
||||
emit('markRead', { notificationId: props.notificationId });
|
||||
});
|
||||
};
|
||||
|
||||
const markAsRead = () => {
|
||||
makeFetch('POST', `/api/1.0/main/notification/${props.notificationId}/mark/read`, []).then(() => {
|
||||
emit('markUnread', { notificationId: props.notificationId });
|
||||
});
|
||||
};
|
||||
|
||||
// i18n setup
|
||||
/*const { t } = useI18n({
|
||||
messages: {
|
||||
fr: {
|
||||
markAsUnread: 'Marquer comme non-lu',
|
||||
markAsRead: 'Marquer comme lu',
|
||||
},
|
||||
},
|
||||
i18n: {
|
||||
messages: {
|
||||
fr: {
|
||||
markAsUnread: 'Marquer comme non-lu',
|
||||
markAsRead: 'Marquer comme lu'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});*/
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@ -4,21 +4,21 @@
|
||||
isChangeIcon ? 'change-icon' : '',
|
||||
isChangeClass ? options.changeClass : 'btn-wopilink' ]"
|
||||
@click="openModal">
|
||||
|
||||
|
||||
<i v-if="isChangeIcon" class="fa me-2" :class="options.changeIcon"></i>
|
||||
|
||||
|
||||
<span v-if="!noText">
|
||||
{{ $t('online_edit_document') }}
|
||||
{{ trans(WOPI_ONLINE_EDIT_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">
|
||||
@ -31,189 +31,161 @@
|
||||
</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>
|
||||
<i class="fa fa-circle-o-notch fa-spin fa-3x" :title="trans(WOPI_LOADING)"></i>
|
||||
</div>
|
||||
<iframe
|
||||
:src="this.wopiUrl"
|
||||
@load="loaded"
|
||||
></iframe>
|
||||
</template>
|
||||
|
||||
|
||||
</modal>
|
||||
</div>
|
||||
<div v-else>
|
||||
<modal v-if="modal.showModal"
|
||||
<Modal v-if="modal.showModal"
|
||||
modalDialogClass="modal-sm"
|
||||
@close="modal.showModal = false">
|
||||
|
||||
|
||||
<template v-slot:header>
|
||||
<h3>{{ $t('invalid_title') }}</h3>
|
||||
<h3>{{ trans(WOPI_INVALID_TITLE) }}</h3>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<div class="alert alert-warning">{{ $t('invalid_message') }}</div>
|
||||
<div class="alert alert-warning">{{ trans(WOPI_ONLINE_EDIT_DOCUMENT) }}</div>
|
||||
</template>
|
||||
|
||||
</modal>
|
||||
|
||||
</Modal>
|
||||
</div>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
|
||||
import logo from 'ChillMainAssets/chill/img/logo-chill-sans-slogan_white.png';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { trans, WOPI_ONLINE_EDIT_DOCUMENT, WOPI_INVALID_TITLE, WOPI_LOADING } from '../../../../../../../../../../assets/translator'
|
||||
|
||||
export default {
|
||||
name: "OpenWopiLink",
|
||||
components: {
|
||||
Modal
|
||||
},
|
||||
props: {
|
||||
wopiUrl: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
options: {
|
||||
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.options.noText !== 'undefined') {
|
||||
return this.options.noText === true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
isChangeIcon() {
|
||||
if (typeof this.options.changeIcon !== 'undefined') {
|
||||
return (!(this.options.changeIcon === null || this.options.changeIcon === ''))
|
||||
}
|
||||
return false;
|
||||
},
|
||||
isChangeClass() {
|
||||
if (typeof this.options.changeClass !== 'undefined') {
|
||||
return (!(this.options.changeClass === null || this.options.changeClass === ''))
|
||||
}
|
||||
return false;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openModal() {
|
||||
this.loading = true;
|
||||
this.modal.showModal = true;
|
||||
},
|
||||
loaded() {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
i18n: {
|
||||
messages: {
|
||||
fr: {
|
||||
online_edit_document: "Éditer en ligne",
|
||||
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.",
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
wopiUrl: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
required: false,
|
||||
},
|
||||
});
|
||||
|
||||
// data
|
||||
const modal = ref({
|
||||
showModal: false,
|
||||
modalDialogClass: "modal-fullscreen",
|
||||
});
|
||||
const logoImg = logo;
|
||||
const loading = ref(false);
|
||||
|
||||
// MIME types
|
||||
const 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
|
||||
const isOpenDocument = computed(() => mime.includes(props.type));
|
||||
|
||||
const noText = computed(() => props.options?.noText === true);
|
||||
|
||||
const isChangeIcon = computed(() => !!props.options?.changeIcon);
|
||||
|
||||
const isChangeClass = computed(() => !!props.options?.changeClass);
|
||||
|
||||
// Methods
|
||||
const openModal = () => {
|
||||
loading.value = true;
|
||||
modal.value.showModal = true;
|
||||
};
|
||||
|
||||
const loaded = () => {
|
||||
loading.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@ -45,6 +45,12 @@ workflow:
|
||||
few {# workflows}
|
||||
other {# workflows}
|
||||
}
|
||||
associated: >-
|
||||
{aw, plural,
|
||||
=0 {Aucun workflow associé}
|
||||
one {# Workflow associé}
|
||||
other {# Workflows associés}
|
||||
}
|
||||
|
||||
duration:
|
||||
minute: >-
|
||||
|
||||
@ -478,6 +478,8 @@ Follow workflow: Suivre la décision
|
||||
Workflow history: Historique de la décision
|
||||
|
||||
workflow:
|
||||
list: Liste des workflows associés
|
||||
associated: workflow associé
|
||||
Created by: Créé par
|
||||
My decision: Ma décision
|
||||
Next step: Prochaine étape
|
||||
@ -525,6 +527,7 @@ workflow:
|
||||
Previous workflow transitionned help: Workflows où vous avez exécuté une action.
|
||||
For: Pour
|
||||
Cc: Cc
|
||||
At: Le
|
||||
You must select a next step, pick another decision if no next steps are available: Il faut une prochaine étape. Choissisez une autre décision si nécessaire.
|
||||
An access key was also sent to those addresses: Un lien d'accès a été envoyé à ces adresses
|
||||
Those users are also granted to apply a transition by using an access key: Ces utilisateurs ont obtenu l'accès grâce au lien reçu par email
|
||||
@ -575,6 +578,8 @@ notification:
|
||||
dest by email help: Les adresses email mentionnées ici recevront un lien d'accès. Un compte utilisateur sera toujours nécessaire.
|
||||
Remove an email: Supprimer l'adresse email
|
||||
Email with access link: Adresse email ayant reçu un lien d'accès
|
||||
mark_as_read: Marquer comme lu
|
||||
mark_as_unread: Marquer comme non-lu
|
||||
|
||||
export:
|
||||
address_helper:
|
||||
@ -708,4 +713,11 @@ news:
|
||||
read_more: Lire la suite
|
||||
show_details: Voir l'actualité
|
||||
|
||||
wopi:
|
||||
online_edit_document: Éditer en ligne
|
||||
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.
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user