Skip to content

Commit

Permalink
Add clone functionality to Reporter web app
Browse files Browse the repository at this point in the history
  • Loading branch information
EmmyMay committed Jun 13, 2024
1 parent 944c2bc commit 0ac8bde
Show file tree
Hide file tree
Showing 12 changed files with 173 additions and 46 deletions.
23 changes: 21 additions & 2 deletions client/web/reporter/src/components/EditorToolbar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,27 @@
size="lg"
size-confirm="lg"
variant="danger"
:disabled="deleteDisabled || processingDelete"
:disabled="deleteDisabled || processingDelete || processing"
:processing="processingDelete"
:text="$t('general:label.delete')"
:borderless="false"
@confirmed="$emit('delete')"
/>

<c-button-submit
data-test-id="button-clone"
:disabled="cloneDisabled || processingClone || processing"
:processing="processingClone"
variant="light"
:text="$t('general:label.clone')"
class="text-nowrap"
size="lg"
@submit="$emit('clone')"
/>

<c-button-submit
data-test-id="button-save"
:disabled="saveDisabled || processing"
:disabled="saveDisabled || processingSave || processing"
:processing="processingSave"
:text="$t('general:label.save')"
size="lg"
Expand Down Expand Up @@ -79,6 +90,10 @@ export default {
type: Boolean,
},
cloneDisabled: {
type: Boolean,
},
processing: {
type: Boolean,
},
Expand All @@ -91,6 +106,10 @@ export default {
type: Boolean,
required: false,
},
processingClone: {
type: Boolean,
},
},
}
</script>
10 changes: 9 additions & 1 deletion client/web/reporter/src/components/ReportSidebar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export default {
return reports.map(({ reportID, handle, meta: { name = '' } }) => {
return {
page: { pageID: reportID, name: 'report.view', title: name || handle },
page: { pageID: reportID, name: this.$route.name, title: name || handle },
params: { reportID },
}
})
Expand All @@ -90,6 +90,14 @@ export default {
},
},
created () {
this.$root.$on('refetch:reports', this.fetchReports)
},
beforeDestroy () {
this.$root.$off('refetch:reports', this.fetchReports)
},
methods: {
fetchReports () {
this.$SystemAPI.reportList()
Expand Down
2 changes: 2 additions & 0 deletions client/web/reporter/src/components/faIcons.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ import {
faQuestion,
faEllipsisV,
faTools,
faClone,
} from '@fortawesome/free-solid-svg-icons'

import {
Expand Down Expand Up @@ -112,4 +113,5 @@ library.add(
faQuestion,
faEllipsisV,
faTools,
faClone,
)
1 change: 1 addition & 0 deletions client/web/reporter/src/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,3 +53,4 @@ Vue.component('c-permissions-button', components.CPermissionsButton)
Vue.component('c-input-confirm', components.CInputConfirm)
Vue.component('c-button-submit', components.CButtonSubmit)
Vue.component('c-input-select', components.CInputSelect)
Vue.component('c-form-table-wrapper', components.CFormTableWrapper)
29 changes: 28 additions & 1 deletion client/web/reporter/src/mixins/report.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export default {
processing: false,
processingSave: false,
processingDelete: false,
processingClone: false,
report: undefined,
}
},
Expand All @@ -21,7 +22,9 @@ export default {
})
.catch(this.toastErrorHandler(this.$t('notification:report.fetchFailed')))
.finally(() => {
this.processing = false
setTimeout(() => {
this.processing = false
}, 400)
})
},

Expand Down Expand Up @@ -90,5 +93,29 @@ export default {
this.processingDelete = false
})
},

handleClone (report) {
this.processing = true
this.processingClone = true
const { meta, sources, blocks, scenarios, labels } = report
const cloneSuffix = `${meta.name} (${this.$t('general:cloneSuffix')})`
let name = meta.name

if (!this.initialReportState || this.initialReportState.meta.name === name) {
name = cloneSuffix
}

return this.$SystemAPI.reportCreate({ handle: '', meta: { ...meta, name }, sources, blocks, scenarios, labels })
.then(report => {
report = new system.Report(report)
this.toastSuccess(this.$t('notification:report.created'))
return report
})
.catch(this.toastErrorHandler(this.$t('notification:report.createFailed')))
.finally(() => {
this.processing = false
this.processingClone = false
})
},
},
}
63 changes: 37 additions & 26 deletions client/web/reporter/src/views/Report/Builder.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@
<div
class="d-flex overflow-auto p-2 w-100"
>
<portal to="topbar-title">
<portal
v-if="!fetchingReport"
to="topbar-title"
>
{{ pageTitle }}
</portal>

Expand All @@ -13,10 +16,10 @@
:options="scenarioOptions"
:get-option-key="getOptionKey"
:placeholder="$t('builder:pick-scenario')"
:disabled="processing || fetchingReport"
size="sm"
@input="refreshReport()"
/>

<b-input-group-append>
<b-button
v-b-tooltip.noninteractive.hover="{ title: $t('builder:tooltip.configure-scenarios'), container: '#body' }"
Expand All @@ -41,7 +44,6 @@
>
{{ $t('builder:datasources.label') }}
</b-button>

<b-button-group
size="sm"
>
Expand Down Expand Up @@ -72,8 +74,15 @@
</b-button-group>
</portal>

<div
v-if="fetchingReport"
class="d-flex align-items-center justify-content-center w-100 h-100"
>
<b-spinner />
</div>

<grid
v-if="report && canRead && showReport"
v-if="report && canRead && showReport && !fetchingReport"
:blocks.sync="reportBlocks"
editable
@item-updated="onBlockUpdated"
Expand All @@ -97,7 +106,6 @@
class="text-warning"
/>
</div>

<b-button-group>
<b-button
v-b-tooltip.noninteractive.hover="{ title: $t('builder:tooltip.add.displayElement'), container: '#body' }"
Expand All @@ -109,7 +117,6 @@
:icon="['fas', 'plus']"
/>
</b-button>

<b-button
v-b-tooltip.noninteractive.hover="{ title: $t('builder:tooltip.edit.block'), container: '#body' }"
variant="outline-light"
Expand All @@ -121,7 +128,6 @@
/>
</b-button>
</b-button-group>

<c-input-confirm
:tooltip="$t('builder:tooltip.delete.block')"
show-icon
Expand All @@ -130,7 +136,6 @@
@confirmed="deleteBlock(index)"
/>
</div>

<block
v-if="block"
:index="index"
Expand All @@ -142,7 +147,6 @@
</div>
</template>
</grid>

<b-modal
:title="$t('builder:block.configuration')"
:ok-title="$t('builder:save-button')"
Expand Down Expand Up @@ -176,7 +180,6 @@
:placeholder="$t('builder:block.title')"
/>
</b-form-group>

<b-form-group
:label="$t('builder:description')"
label-class="text-primary"
Expand All @@ -186,7 +189,6 @@
:placeholder="$t('builder:block.description')"
/>
</b-form-group>

<b-form-group
:label="$t('builder:layout')"
label-class="text-primary"
Expand All @@ -199,7 +201,6 @@
/>
</b-form-group>
</b-tab>

<b-tab
:active="!!currentBlock.elements.length"
:title="$t('builder:elements')"
Expand All @@ -218,9 +219,7 @@
:icon="['fas', 'bars']"
class="text-secondary grab"
/>
</template>

<template #configurator>
</template> <template #configurator>
<display-element-configurator
v-if="currentDisplayElement"
:display-element.sync="currentDisplayElement"
Expand All @@ -233,7 +232,6 @@
</b-tab>
</b-tabs>
</b-modal>

<b-modal
v-model="datasources.showConfigurator"
:title="$t('builder:datasources.label')"
Expand Down Expand Up @@ -261,7 +259,6 @@
{{ datasourceLabel(step, datasources.currentIndex) }}
</span>
</template>

<template #configurator>
<component
:is="getDatasourceComponent(datasources.tempItems[datasources.currentIndex])"
Expand All @@ -273,7 +270,6 @@
/>
</template>
</configurator>

<template #modal-footer>
<c-button-submit
data-test-id="button-save"
Expand All @@ -284,7 +280,6 @@
/>
</template>
</b-modal>

<b-modal
v-model="displayElements.showSelector"
size="lg"
Expand All @@ -299,7 +294,6 @@
@select="addDisplayElement"
/>
</b-modal>

<b-modal
v-model="datasources.showSelector"
size="lg"
Expand All @@ -315,7 +309,6 @@
@select="addDatasource"
/>
</b-modal>

<b-modal
v-model="scenarios.showConfigurator"
size="xl"
Expand All @@ -342,7 +335,6 @@
{{ label }}
</span>
</template>

<template #configurator>
<scenario-configurator
v-if="currentScenario"
Expand All @@ -353,7 +345,6 @@
</template>
</configurator>
</b-modal>

<portal to="report-toolbar">
<editor-toolbar
:back-link="{ name: 'report.list' }"
Expand All @@ -362,12 +353,15 @@
:processing="processing"
:processing-save="processingSave"
:processing-delete="processingDelete"
:processing-clone="processingClone"
@clone="handleReportCloning"
@delete="handleDelete"
@save="handleReportSave"
>
<b-button
variant="light"
size="lg"
:disabled="processing"
@click="createBlock"
>
<font-awesome-icon
Expand Down Expand Up @@ -427,6 +421,8 @@ export default {
processing: false,
processingSave: false,
processingDelete: false,
processingClone: false,
fetchingReport: false,
showReport: true,
Expand Down Expand Up @@ -665,15 +661,23 @@ export default {
handler (reportID) {
this.unsavedBlocks.clear()
this.scenarios.selected = undefined
this.reportBlocks = []
this.report = undefined
if (reportID) {
this.processing = true
this.fetchingReport = true
this.fetchReport(this.reportID)
.then(() => {
this.mapBlocks()
}).finally(() => {
this.processing = false
}).catch(() => {
this.toastErrorHandler(this.$t('notification:report.loadFailed'))
})
.finally(() => {
setTimeout(() => {
this.fetchingReport = false
this.processing = false
}, 400)
})
}
},
Expand Down Expand Up @@ -853,6 +857,13 @@ export default {
})
},
handleReportCloning () {
this.handleClone(this.report).then(({ reportID }) => {
this.$root.$emit('refetch:reports')
this.$router.push({ name: 'report.builder', params: { reportID } })
})
},
mapBlocks () {
this.reportBlocks = this.report.blocks.map(({ xywh, ...p }, i) => {
const [x, y, w, h] = xywh
Expand Down
Loading

0 comments on commit 0ac8bde

Please sign in to comment.