scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-19 18:26:06 +08:00
Code Issues Projects Releases Packages Wiki Activity

Disable label preview options for Viewer role [SCI-7322]

Browse source
This commit is contained in:
Andrej 2022-10-13 15:46:46 +02:00
parent 58acb94977
commit 16b4a89fb8
1 changed files with 50 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
app/javascript/vue/label_template/components/label_preview.vue
View file

@ -11,43 +11,50 @@
</div> </div>
</div> </div>
<div v-if="!viewOnly" class="label-preview__controls" :class="{'open': optionsOpen}"> <div v-if="!viewOnly" class="label-preview__controls" :class="{'open': optionsOpen}">
<div class="label-preview__controls__units"> <div v-if="canManage">
<div class="sci-input-container"> <div class="label-preview__controls__units">
<label>{{ i18n.t('label_templates.label_preview.units') }}</label> <div class="sci-input-container">
<DropdownSelector <label>{{ i18n.t('label_templates.label_preview.units') }}</label>
:disableSearch="true" <DropdownSelector
:options="[{ value: 'in', label: i18n.t(`label_templates.label_preview.in`) }, { value: 'mm', label: i18n.t(`label_templates.label_preview.mm`) }]"
:selectorId="'UnitSelector'"
:selectedValue="unit"
@dropdown:changed="updateUnit" />
</div>
</div>
<div class="label-preview__controls__size">
<div class="sci-input-container">
<label>{{ i18n.t('label_templates.label_preview.height') }}</label>
<input v-model="height" type="number" class="sci-input-field"
@change="$emit('height:update', (unit === 'in' ? height * 25.4 : height))" />
</div>
<div class="sci-input-container">
<label>{{ i18n.t('label_templates.label_preview.width') }}</label>
<input v-model="width" type="number" class="sci-input-field"
@change="$emit('width:update', (unit === 'in' ? width * 25.4 : width))" />
</div>
<div class="sci-input-container">
<label>{{ i18n.t('label_templates.label_preview.density') }}</label>
<DropdownSelector
v-if="density"
:key="unit"
:disableSearch="true" :disableSearch="true"
:options="unit === 'in' ? DPI_RESOLUTION_OPTIONS : DPMM_RESOLUTION_OPTIONS" :options="[{ value: 'in', label: i18n.t(`label_templates.label_preview.in`) }, { value: 'mm', label: i18n.t(`label_templates.label_preview.mm`) }]"
:selectorId="'DensitySelector'" :selectorId="'UnitSelector'"
:selectedValue="density" :selectedValue="unit"
@dropdown:changed="updateDensity" /> @dropdown:changed="updateUnit" />
</div>
</div>
<div class="label-preview__controls__size">
<div class="sci-input-container">
<label>{{ i18n.t('label_templates.label_preview.height') }}</label>
<input v-model="height" type="number" class="sci-input-field"
@change="$emit('height:update', (unit === 'in' ? height * 25.4 : height))" />
</div>
<div class="sci-input-container">
<label>{{ i18n.t('label_templates.label_preview.width') }}</label>
<input v-model="width" type="number" class="sci-input-field"
@change="$emit('width:update', (unit === 'in' ? width * 25.4 : width))" />
</div>
<div class="sci-input-container">
<label>{{ i18n.t('label_templates.label_preview.density') }}</label>
<DropdownSelector
v-if="density"
:key="unit"
:disableSearch="true"
:options="unit === 'in' ? DPI_RESOLUTION_OPTIONS : DPMM_RESOLUTION_OPTIONS"
:selectorId="'DensitySelector'"
:selectedValue="density"
@dropdown:changed="updateDensity" />
</div>
</div>
<div class="label-preview__refresh" @click="refreshPreview">
<i class="fas fa-sync"></i>
{{ i18n.t('label_templates.label_preview.refresh_preview') }}
</div> </div>
</div> </div>
<div class="label-preview__refresh" @click="refreshPreview"> <div v-else>
<i class="fas fa-sync"></i> <div>{{ i18n.t('label_templates.label_preview.height') }}: {{ height }} {{ unit }} </div>
{{ i18n.t('label_templates.label_preview.refresh_preview') }} <div>{{ i18n.t('label_templates.label_preview.width') }}: {{ width }} {{ unit }} </div>
<div>{{ i18n.t('label_templates.label_preview.density') }}: {{ densityLabel() }}</div>
</div> </div>
</div> </div>
<div v-if="base64Image" class="label-preview__image"> <div v-if="base64Image" class="label-preview__image">
@ -111,6 +118,9 @@
}, },
heightMm() { heightMm() {
return this.unit === 'in' ? this.height * 25.4 : this.height; return this.unit === 'in' ? this.height * 25.4 : this.height;
},
canManage() {
return this.template.attributes.urls.update;
} }
}, },
watch: { watch: {
@ -172,6 +182,12 @@
updateDensity(density) { updateDensity(density) {
this.density = density; this.density = density;
this.$emit('density:update', this.density); this.$emit('density:update', this.density);
},
densityLabel() {
let resolutions = this.unit === 'in' ? DPI_RESOLUTION_OPTIONS : DPMM_RESOLUTION_OPTIONS;
return resolutions.find(element => {
return element.value === this.density;
}).label;
} }
} }
} }