DRCIT/snipe-it
1
0
Fork 0
mirror of https://github.com/snipe/snipe-it.git synced 2025-01-23 19:59:18 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Move label preview to alpine component

Browse source
This commit is contained in:
Cram42 2022-11-11 14:23:02 +08:00
parent 67d021e457
commit 30a7a31724
2 changed files with 77 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
resources/views/partials/label2-preview.blade.php Normal file
View file

@ -0,0 +1,76 @@
@once
@push('css')
<style>
:root {
--l2p-height: 400px;
--l2p-background-color: aliceblue;
}
.l2p-root,
.l2p-root * {
box-sizing: border-box;
}
.l2p-root {
width: 100%;
height: var(--l2p-height);
display: flex;
flex-direction: column;
}
.l2p-root > label {
font-size: 0.9em;
padding: 0;
margin: 0;
}
.l2p-root > iframe {
flex: 1;
overflow: auto;
background-color: var(--l2p-background-color);
}
</style>
@endpush
@endonce
@push('js')
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('label2_preview', () => ({
_form: null,
_init: function() {
this._form = this.$root.closest('form');
this._form.addEventListener('change', this.updateURL.bind(this));
},
updateURL: function() {
let params = {
settings: Object.assign({}, ...$(this._form)
.serializeArray()
.filter((value, index, all) => value.name.includes('label2_'))
.map((value, index, all) => ({[value.name]: value.value}))
)
};
let template = params.settings.label2_template;
if (!template) return;
this.previewURL = '{{ route("labels.show", ["labelName" => ":label"]) }}'
.replace(':label', template.replaceAll('\\', '/'))
.concat('?', $.param(params), '#toolbar=0');
},
previewURL: ''
}));
});
</script>
@endpush
<div x-data="label2_preview" x-init="_init" class="l2p-root">
<label for="label2-preview">Preview</label>
<iframe id="label2-preview" x-bind:src="previewURL"></iframe>
</div>

27
resources/views/settings/labels.blade.php
View file

@ -20,30 +20,6 @@
}
</style>
<script>
function refreshPreview() {
var settingsOverride = {
'settings': Object.assign({}, ...$('#settingsForm')
.serializeArray()
.filter((value, index, all) => value.name.includes('label2_'))
.map((value, index, all) => ({[value.name]: value.value})))
};
var params = $.param(settingsOverride);
var template = settingsOverride.settings.label2_template;
if (template === undefined) return;
var url = "{{ route('labels.show', ['labelName' => ':label']) }}".replace(':label', template) + "?" + params + "#toolbar=0";
$('iframe#framePreview').attr('src', url);
}
window.addEventListener('load', () => {
$('#settingsForm').on('change', refreshPreview);
$('#settingsForm').on('load-success.bs.table', refreshPreview);
});
</script>
{{ Form::open(['id' => 'settingsForm', 'method' => 'POST', 'files' => false, 'autocomplete' => 'off', 'class' => 'form-horizontal', 'role' => 'form' ]) }}
<!-- CSRF Token -->
{{csrf_field()}}
@ -83,8 +59,7 @@
<div class="form-group {{ $errors->has('label2_template') ? 'error' : '' }}">
<div class="col-md-3">
{{ Form::label('label2_template', trans('admin/settings/general.label2_template')) }}
<div>{{ Form::button('Refresh Preview', ['class'=>'btn btn-default btn-sm', 'style'=>'width:100%', 'onClick'=>'refreshPreview()']) }}</div>
<div><iframe id="framePreview" style="width:100%; height:400px;">Preview Here</iframe></div>
@include('partials.label2-preview')
</div>
<div class="col-md-9">
<table