Skip to content

Commit

Permalink
Print layout with no maps (#587)
Browse files Browse the repository at this point in the history 
* clean code

* clean code

* remove space

* Disable scale an rotation when no maps are related to print setup

* Handle no maps case print layout

* refactor function `changeTemplate`

---------

Co-authored-by: Raruto <[email protected]>
  • Loading branch information
@volterra79 @Raruto
volterra79 and Raruto authored Mar 8, 2024
1 parent 33bddfa commit 6755a76
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 50 deletions.
42 changes: 25 additions & 17 deletions src/app/gui/print/printservice.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,9 @@ function PrintComponentService() {
maxx: [0, 0],
maxy: [0, 0]
};
this.state.visible && this.setInitState();
if (this.state.visible) {
this.setInitState();
}
};
}

Expand Down Expand Up @@ -260,30 +262,30 @@ proto.changeTemplate = function() {
if (!this.state.template) {
return;
}
const isPreviousAtlas = this.state.atlas;
const {
atlas,
maps,
labels
} = this.state.print.find(print => print.name === this.state.template);
this.state.maps = maps;
this.state.atlas = atlas;
this.state.labels = labels;
this.state.atlasValues = [];
this.state.atlas ?
const has_previous = this.state.atlas || 0 === this.state.maps.length;
const print = this.state.print.find(p => p.name === this.state.template)

this._clearPrint() :
this.state.maps = print.maps;
this.state.atlas = print.atlas;
this.state.labels = print.labels;
this.state.atlasValues = [];

isPreviousAtlas ?
this.showPrintArea(true) :
this._setPrintArea();
if (this.state.atlas) {
this._clearPrint();
} else if (has_previous) {
this.showPrintArea(true);
} else {
this._setPrintArea();
}
};

/**
* On change scala set print area
*/
proto.changeScale = function() {
this.state.scala && this._setPrintArea();
if (this.state.scala) {
this._setPrintArea();
}
};

/**
Expand Down Expand Up @@ -372,6 +374,7 @@ proto.print = function() {
return new Promise((resolve, reject) => {
//disable sidebar
GUI.disableSideBar(true);
//atlas print
if (this.state.atlas) {
const caller_download_id = ApplicationService.setDownload(true);
this.state.loading = true;
Expand Down Expand Up @@ -496,6 +499,11 @@ proto._calculateInternalPrintExtent = function() {
* @private
*/
proto._setPrintArea = function() {
//No maps set. Only attributes label
if (0 === this.state.maps.length) {
this._clearPrint();
return;
}
this.state.size = this._map.getSize();
const resolution = this._map.getView().getResolution();
this.state.currentScala = getScaleFromResolution(resolution, this._mapUnits);
Expand Down
1 change: 0 additions & 1 deletion src/app/gui/print/vue/printpage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ const PrintPage = function(options={}) {

inherit(PrintPage, Component);


module.exports = PrintPage;


115 changes: 83 additions & 32 deletions src/components/Print.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@

<label for="scala" v-t="'sdk.print.scale'"></label>
<select
v-disabled="noMaps"
id="scala"
class="form-control"
@change="onChangeScale"
Expand All @@ -45,61 +46,103 @@
</select>

<label for="dpi">dpi</label>
<select class="form-control" @change="onChangeDpi" v-model="state.dpi" id="dpi" >
<option v-for="dpi in state.dpis" >{{ dpi }}</option>
<select
class="form-control"
@change="onChangeDpi"
v-model="state.dpi" id="dpi"
>
<option
v-for="dpi in state.dpis"
>{{ dpi }}</option>
</select>

<label for="rotation" v-t="'sdk.print.rotation'"></label>
<input min="-360" max="360" @input="onChangeRotation" v-model="state.rotation" id="rotation" class="form-control" type="number">
<input
v-disabled="noMaps"
min="-360"
max="360"
@input="onChangeRotation"
v-model="state.rotation"
id="rotation"
class="form-control"
type="number"
>
<label for="format" v-t="'sdk.print.format'"></label>

<select class="form-control" v-model="state.output.format" id="format">
<option v-for="format in state.formats" :value="format.value">{{ format.label }}</option>
<select
class="form-control"
v-model="state.output.format"
id="format"
>
<option
v-for="format in state.formats"
:value="format.value"
>{{ format.label }}</option>
</select>

</template>

<!-- since 3.8.7 -->
<!-- Needed to recreate a component on change template -->
<template v-else-if="!templateChanged">
<template v-if="state.atlas.field_name">
<select-atlas-field-values
@disable-print-button="setDisabledPrintButton"
@set-values="setAtlasValues"
:atlas="state.atlas"
:reset="!state.isShow"/>
</template>

<template v-else>
<fid-atlas-values
@disable-print-button="setDisabledPrintButton"
@set-values="setAtlasValues"
:atlas="state.atlas"
:reset="!state.isShow"/>
</template>
<template v-if="state.atlas.field_name">
<select-atlas-field-values
@disable-print-button="setDisabledPrintButton"
@set-values="setAtlasValues"
:atlas="state.atlas"
:reset="!state.isShow"/>
</template>

<template v-else>
<fid-atlas-values
@disable-print-button="setDisabledPrintButton"
@set-values="setAtlasValues"
:atlas="state.atlas"
:reset="!state.isShow"/>
</template>
</template>

<template v-if="state.labels && state.labels.length">
<div class="print-labels-content" style="margin-top: 5px;">
<label style="font-weight: bold; font-size: 1.1em; display: block; border-bottom: 2px solid #ffffff; margin-bottom: 5px;" class="skin-color" v-t="'sdk.print.labels'"></label>
<div class="labels-input-content" style="max-height: 120px; overflow-y: auto">
<span v-for="label in state.labels" :key="label.id">
<div
class="print-labels-content"
style="margin-top: 5px;"
>
<label
style="font-weight: bold; font-size: 1.1em; display: block; border-bottom: 2px solid #ffffff; margin-bottom: 5px;"
class="skin-color"
v-t="'sdk.print.labels'">
</label>
<div
class="labels-input-content"
style="max-height: 120px; overflow-y: auto"
>
<span
v-for="label in state.labels"
:key="label.id"
>
<label :for="`g3w_label_id_input_${label.id}`">{{label.id}}</label>
<input :id="`g3w_label_id_input_${label.id}`" class="form-control" v-model="label.text"/>
<input
:id="`g3w_label_id_input_${label.id}`"
class="form-control"
v-model="label.text"/>
</span>
</div>
</div>
</template>
</div>
<div class="box-footer" style="background-color: transparent">
<div
class="box-footer"
style="background-color: transparent"
>
<span>
<button
id="printbutton"
style="width:100%; font-weight: bold"
class="sidebar-button-run btn"
v-disabled="button.disabled"
@click.stop.prevent="print"
v-download v-t="'create_print'">
v-download
v-t="'create_print'">
</button>
</span>
</div>
Expand All @@ -121,10 +164,10 @@ export default {
return {
state: null,
/** @since 3.8.7 **/
templateChanged: false, // useful to redraw component related to change template
templateChanged: false, // useful to a redrawn component related to change template
button: {
class: "btn-success",
type:"stampa",
type :"print",
disabled: false
}
}
Expand All @@ -135,14 +178,22 @@ export default {
},
computed: {
disabled() {
return this.state.output.loading || (!!this.state.atlas && this.state.atlasValues.length === 0);
return this.state.output.loading || (!!this.state.atlas && 0 === this.state.atlasValues.length);
},
/**
* @since v3.10.0
* Check if current print has maps (only alphanumerical data)
* @return {boolean}
*/
noMaps() {
return 0 === this.state.maps.length;
}
},
methods: {
setDisabledPrintButton(bool=false){
setDisabledPrintButton(bool=false) {
this.button.disabled = bool;
},
setAtlasValues(values=[]){
setAtlasValues(values=[]) {
this.state.atlasValues = values;
},
async onChangeTemplate() {
Expand Down

0 comments on commit 6755a76

Please sign in to comment.