diff options
Diffstat (limited to 'plugins/Transitions/vue/src/TransitionExporter')
5 files changed, 242 insertions, 0 deletions
diff --git a/plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.adapter.ts b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.adapter.ts new file mode 100644 index 0000000000..82f1a78ca5 --- /dev/null +++ b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.adapter.ts @@ -0,0 +1,20 @@ +/*! + * Matomo - free/libre analytics platform + * + * @link https://matomo.org + * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later + */ + +import { IDirective } from 'angular'; +import TransitionExporter from './TransitionExporter'; + +function transitionExporter(): IDirective { + return { + restrict: 'A', + link(scope, element) { + TransitionExporter.mounted(element[0]); + }, + }; +} + +window.angular.module('piwikApp').directive('transitionExporter', transitionExporter); diff --git a/plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.ts b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.ts new file mode 100644 index 0000000000..b9b6a0b7bd --- /dev/null +++ b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.ts @@ -0,0 +1,50 @@ +/*! + * Matomo - free/libre analytics platform + * + * @link https://matomo.org + * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later + */ + +import { createVueApp, translate } from 'CoreHome'; +import TransitionExporterPopover from './TransitionExporterPopover'; +import { actionName } from './transitionParams'; + +const { Piwik_Popover } = window; + +export default { + mounted(element: HTMLElement): void { + element.addEventListener('click', (e) => { + e.preventDefault(); + + const props = { + exportFormat: 'JSON', + exportFormatOptions: [ + { key: 'JSON', value: 'JSON' }, + { key: 'XML', value: 'XML' }, + ], + }; + + const app = createVueApp({ + template: ` + <popover v-bind="bind"/>`, + data() { + return { + bind: props, + }; + }, + }); + app.component('popover', TransitionExporterPopover); + + const mountPoint = document.createElement('div'); + app.mount(mountPoint); + + Piwik_Popover.showLoading(''); + Piwik_Popover.setTitle(`${actionName.value} ${translate('Transitions_Transitions')}`); + Piwik_Popover.setContent(mountPoint); + + Piwik_Popover.onClose(() => { + app.unmount(); + }); + }); + }, +}; diff --git a/plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.less b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.less new file mode 100644 index 0000000000..c793232928 --- /dev/null +++ b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.less @@ -0,0 +1,52 @@ +.transitions-export-popover { + + [name=format] { + .form-group label.fieldRadioTitle { + display: block; + } + + p.radio { + width: 50%; + float: left; + display: block; + } + } + + textarea { + word-break: break-all; + padding: 5px; + height: 80px; + } + + .toggle-export-url { + font-size: 14px; + margin-left: 20px; + } + + .filter_limit { + clear: both; + float: none; + + .matomo-field { + width: 50%; + float: left; + } + } + + .showoptions > span { + color: @color-blue-piwik; + cursor: pointer; + text-decoration: underline; + } + + .tooltip { + color: @color-silver; + font-size: 13px; + padding: 5px; + } + + .tooltip > a { + color: @color-blue-piwik; + text-decoration: underline; + } +}
\ No newline at end of file diff --git a/plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.vue b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.vue new file mode 100644 index 0000000000..b900645d31 --- /dev/null +++ b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.vue @@ -0,0 +1,91 @@ +<!-- + Matomo - free/libre analytics platform + + @link https://matomo.org + @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later +--> + +<template> + <div class="transition-export-popover row"> + <div class="col l6"> + <div class="input-field"> + <div class="matomo-field"> + <Field + uicontrol="radio" + name="exportFormat" + :title="translate('CoreHome_ExportFormat')" + :model-value="exportFormat" + @update:model-value="exportFormat = $event" + :full-width="true" + :options="exportFormatOptions" + /> + </div> + </div> + </div> + + <div class="col l12"> + <a + class="btn" + :href="exportLink" + target="_new" + title="translate('CoreHome_ExportTooltip')" + > + {{ translate('General_Export') }} + </a> + </div> + </div> +</template> + +<script lang="ts"> +import { defineComponent } from 'vue'; +import { Matomo, MatomoUrl } from 'CoreHome'; +import { Field } from 'CorePluginsAdmin'; +import { actionType, actionName } from './transitionParams'; + +interface TransitionExportPopoverState { + exportFormat: string; +} + +export default defineComponent({ + props: { + exportFormatOptions: { + type: Object, + required: true, + }, + }, + components: { + Field, + }, + data(): TransitionExportPopoverState { + return { + exportFormat: 'JSON', + }; + }, + computed: { + exportLink() { + const exportUrlParams: QueryParameters = { + module: 'API', + }; + + exportUrlParams.method = 'Transitions.getTransitionsForAction'; + exportUrlParams.actionType = actionType.value; + exportUrlParams.actionName = actionName.value; + + exportUrlParams.idSite = Matomo.idSite; + exportUrlParams.period = Matomo.period; + exportUrlParams.date = Matomo.currentDateString; + exportUrlParams.format = this.exportFormat; + exportUrlParams.token_auth = Matomo.token_auth; + exportUrlParams.force_api_session = 1; + + const currentUrl = window.location.href; + + const urlParts = currentUrl.split('/'); + urlParts.pop(); + + const url = urlParts.join('/'); + return `${url}/index.php?${MatomoUrl.stringify(exportUrlParams)}`; + }, + }, +}); +</script> diff --git a/plugins/Transitions/vue/src/TransitionExporter/transitionParams.ts b/plugins/Transitions/vue/src/TransitionExporter/transitionParams.ts new file mode 100644 index 0000000000..f49b698cf9 --- /dev/null +++ b/plugins/Transitions/vue/src/TransitionExporter/transitionParams.ts @@ -0,0 +1,29 @@ +/*! + * Matomo - free/libre analytics platform + * + * @link https://matomo.org + * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later + */ + +import { ref } from 'vue'; +import { Matomo } from 'CoreHome'; + +interface DataChangedParams { + actionType: string; + actionName: string; +} + +const actionType = ref(''); +const actionName = ref(''); + +const onDataChanged = (params: DataChangedParams) => { + actionType.value = params.actionType; + actionName.value = params.actionName; +}; + +Matomo.on('Transitions.dataChanged', onDataChanged); + +export { + actionType, + actionName, +}; |