Skip to content

Commit

Permalink
Custom DPI in print layout (#619)
Browse files Browse the repository at this point in the history 
* ✨ Replcae dpi select with v-select2. Add feature to creare new tag and handle 'object string' value model change

* reduce conditionals nesting level: `v-select2.js`

* avoid wrapper div

* Tranform all select in select 2 element. Dispatch el.dispatchEvent(new Event("change")) on v-select2 directive

* Dispatch change event as base select element change option

* Replace labet with span due conflict on rendering with atlas label

---------

Co-authored-by: Raruto <[email protected]>
  • Loading branch information
@volterra79 @Raruto
volterra79 and Raruto authored May 6, 2024
1 parent b2f7024 commit 06522e0
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 59 deletions.
63 changes: 36 additions & 27 deletions src/components/Print.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@
<!-- PRINT TEMPLATE -->
<label for="templates" v-t="'sdk.print.template'"></label>
<select
id = "templates"
class = "form-control"
@change = "changeTemplate"
v-model = "state.template"
:style = "{ marginBottom: this.state.atlas && '10px' }"
id = "templates"
class = "form-control"
v-select2 = "'state.template'"
@change = "changeTemplate"
:style = "{ marginBottom: this.state.atlas && '10px' }"
>
<option v-for="print in state.print" :value="print.name">{{ print.name }}</option>
</select>
Expand All @@ -36,8 +36,8 @@
id = "scale"
v-disabled = "!has_maps"
class = "form-control"
v-select2 = "'state.scale'"
@change = "changeScale"
v-model = "state.scale"
>
<option
v-for="scale in state.scales"
Expand All @@ -49,13 +49,13 @@
<!-- PRINT DPI -->
<label for="dpi">dpi</label>
<select
id = "dpi"
class = "form-control"
v-model = "state.dpi"
v-select2 = "'state.dpi'"
id = "dpi"
class = "form-control"
:createTag = "true"
>
<option v-for="dpi in state.dpis">{{ dpi }}</option>
</select>

<!-- PRINT ROTATION -->
<label for="rotation" v-t="'sdk.print.rotation'"></label>
<input
Expand All @@ -72,9 +72,9 @@
<!-- PRINT FORMAT -->
<label for="format" v-t="'sdk.print.format'"></label>
<select
id = "format"
class = "form-control"
v-model = "state.format"
id = "format"
class = "form-control"
v-select2 = "'state.format'"
>
<option
v-for="format in state.formats"
Expand All @@ -94,28 +94,35 @@
>
<!-- ORIGINAL SOURCE: src/[email protected] -->
<template v-if = "has_autocomplete">
<label for="print_atlas_autocomplete"><span>{{ state.atlas.field_name }}</span></label>
<label for="print_atlas_autocomplete"><span>{{ state.atlas.field_name }}</span></label>
<select id="print_atlas_autocomplete" :name="state.atlas.field_name" class="form-control"></select>
</template>
<!-- ORIGINAL SOURCE: src/components/[email protected] -->
<template v-else>
<label><span>fids [max: {{ state.atlas.feature_count - 1 }}]</span></label>
<input class="form-control" v-model="atlas_values" @keydown.space.prevent>
<div id="fid-print-atals-instruction">
<div id="fids_intruction" v-t="'sdk.print.fids_instruction'"></div>
<div id="fids_examples_values" v-t="'sdk.print.fids_example'"></div>
<div id = "fid-print-atals-instruction">
<div id = "fids_intruction" v-t="'sdk.print.fids_instruction'"></div>
<div id = "fids_examples_values" v-t="'sdk.print.fids_example'"></div>
</div>
</template>
</div>

<div v-if="state.labels && state.labels.length" class="print-labels-content">
<label class="skin-color" v-t="'sdk.print.labels'"></label>
<div
v-if = "state.labels && state.labels.length > 0"
class = "print-labels-content"
style = "color: white"
>
<span
class = "skin-color"
v-t = "'sdk.print.labels'">
</span>
<div class="labels-input-content">
<span
v-for = "label in state.labels"
:key = "label.id"
>
<label :for="`g3w_label_id_input_${label.id}`">{{ label.id }}</label>
<label :for="`g3w_label_id_input_${label.id}`"> {{ label.id }}</label>
<input
:id = "`g3w_label_id_input_${label.id}`"
class = "form-control"
Expand Down Expand Up @@ -146,6 +153,7 @@
</template>

<script>

import {
PRINT_SCALES,
PRINT_RESOLUTIONS,
Expand Down Expand Up @@ -245,9 +253,7 @@ export default {
},

async changeTemplate() {
if (!this.state.template) {
return;
}
if (!this.state.template) { return; }

await this.$nextTick();

Expand Down Expand Up @@ -287,9 +293,7 @@ export default {
* On scale change set print area
*/
changeScale() {
if (this.state.scale) {
this._setPrintArea();
}
if (this.state.scale) { this._setPrintArea(); }
},

/**
Expand Down Expand Up @@ -686,7 +690,7 @@ export default {
.print-labels-content {
margin-top: 5px;
}
.print-labels-content > label.skin-color {
.print-labels-content > span.skin-color {
font-weight: bold;
font-size: 1.1em;
display: block;
Expand Down Expand Up @@ -718,4 +722,9 @@ export default {
margin-top: 3px;
font-weight: bold;
}
</style>
<style>
#print.treeview-menu .select2.select2-container {
display: block;
}
</style>
73 changes: 41 additions & 32 deletions src/directives/v-select2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,55 +8,64 @@ export default {
const {
templateResult,
templateSelection,
multiple=false,
search=true,
multiple = false,
search = true,
select2_value,
indexItem, /** @since 3.9.1 */
/** @since 3.9.1 */
indexItem,
/**@since 3.10.0 whether to dynamically create a new "<option>" value */
createTag = false,
} = vnode.data.attrs || {};
const isArray = binding.value
&& Array.isArray(vnode.context[binding.value]) // check if is an array
&& undefined !== indexItem // check if indexItem is defined
$(el)
.select2({
width: '100%',
tags: createTag,
width: '100%',
dropdownCssClass: 'skin-color',
templateResult,
templateSelection,
minimumResultsForSearch: !search ? -1 : undefined
minimumResultsForSearch: search ? undefined : -1,
createTag(params) {
const value = params.term.trim();
return value ? {
id: value,
text: value,
newTag: true // add additional value
} : null;
},
})
.on('select2:select', (e) => {
if (binding.value) {
//get value
const value = e.params.data.id;
//check is can have multiple value
if (multiple && (
(isArray
? vnode.context[binding.value][indexItem].value
: vnode.context[binding.value]
).filter(d => value === d).length === 0)
) {
(isArray
? vnode.context[binding.value][indexItem].value
: vnode.context[binding.value]
).push(value);
} else {
if (isArray) {
vnode.context[binding.value][indexItem].value = value;
} else {
vnode.context[binding.value] = value;
}
}
if (!binding.value) { return; }
//get value
const value = e.params.data.id;
const arr = (isArray ? vnode.context[binding.value][indexItem].value : vnode.context[binding.value]);
// check is can have multiple value
if (multiple && arr.every(d => value !== d)) {
arr.push(value);
} else if (isArray) {
vnode.context[binding.value][indexItem].value = value;
} else {
// take in an account text binding value single world or object (eg. state.name)
const attrs = `${binding.value}`.split('.');
const last = attrs.pop();
(attrs.reduce((acc, a) => { acc = acc[a]; return acc; }, vnode.context))[last] = value;
}
//dispatch change event as base select element change option
el.dispatchEvent(new Event("change"))
})
.on('select2:unselect', (e) => {
if (binding.value && multiple) {
if (isArray) {
vnode.context[binding.value][indexItem].value = vnode.context[binding.value][indexItem].value.filter(d => e.params.data.id !== d);
} else {
vnode.context[binding.value] = vnode.context[binding.value].filter(d => e.params.data.id !== d);
}
if (!binding.value || !multiple) { return; }
if (isArray) {
vnode.context[binding.value][indexItem].value = vnode.context[binding.value][indexItem].value.filter(d => e.params.data.id !== d);
} else {
vnode.context[binding.value] = vnode.context[binding.value].filter(d => e.params.data.id !== d);
}
//dispatch change event as base select element change option
el.dispatchEvent(new Event("change"))
});

if (binding.value && select2_value) {
$(el).val(select2_value).trigger('change');
}
Expand Down

0 comments on commit 06522e0

Please sign in to comment.