fix nested modals

This commit is contained in:
Katharina Bogad 2021-06-25 19:15:53 +02:00
parent 615c378c56
commit 32daf9f481
11 changed files with 64 additions and 23 deletions

View File

@ -31,6 +31,7 @@ class GrocyClass
this.DatabaseChangedTime = null; this.DatabaseChangedTime = null;
this.IdleTime = 0; this.IdleTime = 0;
this.BaseUrl = config.BaseUrl; this.BaseUrl = config.BaseUrl;
this.CurrentUrlRelative = config.CurrentUrlRelative;
this.Currency = config.Currency; this.Currency = config.Currency;
this.FeatureFlags = config.FeatureFlags; this.FeatureFlags = config.FeatureFlags;
this.QuantityUnits = config.QuantityUnits; this.QuantityUnits = config.QuantityUnits;
@ -325,6 +326,7 @@ class GrocyClass
{ {
let scopeId = uuid.v4() let scopeId = uuid.v4()
var grocyProxy = new GrocyProxy(this, "#" + scopeId, data.config, link); var grocyProxy = new GrocyProxy(this, "#" + scopeId, data.config, link);
var proxy = new Proxy(grocyProxy, { var proxy = new Proxy(grocyProxy, {
get: function(target, prop, receiver) get: function(target, prop, receiver)
{ {
@ -360,7 +362,7 @@ class GrocyClass
}, },
}); });
bootbox.dialog({ var dialog = bootbox.dialog({
message: '<div class="embedded" id="' + scopeId + '">' + data.template + '</div>', message: '<div class="embedded" id="' + scopeId + '">' + data.template + '</div>',
size: 'large', size: 'large',
backdrop: true, backdrop: true,
@ -371,28 +373,41 @@ class GrocyClass
className: 'btn-secondary responsive-button', className: 'btn-secondary responsive-button',
callback: function() callback: function()
{ {
bootbox.hideAll(); dialog.modal("hide");
} }
} }
}, },
onShow: () => onShow: (e) =>
{ {
// dialog div is alive, init view. if ($(e.target).find("#" + scopeId).length)
// this occurs before the view is shown. {
grocyProxy.Initialize(proxy); // dialog div is alive, init view.
self.LoadView(data.viewJsName, "#" + scopeId, proxy); // this occurs before the view is shown.
grocyProxy.Initialize(proxy);
self.LoadView(data.viewJsName, "#" + scopeId, proxy);
}
}, },
onShown: () => onShown: (e) =>
{ {
grocyProxy.FrontendHelpers.OnShown(); if ($(e.target).find("#" + scopeId).length)
{
grocyProxy.FrontendHelpers.OnShown();
}
}, },
onHide: () => onHide: (e) =>
{ {
grocyProxy.Unload(); if ($(e.target).find("#" + scopeId).length)
{
grocyProxy.Unload();
}
}, },
onHidden: () => onHidden: (e) =>
{ {
self.FrontendHelpers.EndUiBusy(); if ($(e.target).find("#" + scopeId).length)
{
self.FrontendHelpers.EndUiBusy();
}
} }
}); });
}, },

View File

@ -92,7 +92,7 @@ class GrocyProxy
{ {
// add-then-init to resolve circular dependencies // add-then-init to resolve circular dependencies
this.initComponents.push(componentName + scopeName); this.initComponents.push(componentName + scopeName);
var component = new components[componentName](this.proxy, scope); var component = new components[componentName](this.proxy, scopeName);
this.Components[componentName + scopeName] = component; this.Components[componentName + scopeName] = component;
return component; return component;
} }

View File

@ -153,7 +153,9 @@ function equipmentformView(Grocy, scope = null)
$scope("#instruction-manual-label").addClass("d-none"); $scope("#instruction-manual-label").addClass("d-none");
$scope("#instruction-manual-label-none").removeClass("d-none"); $scope("#instruction-manual-label-none").removeClass("d-none");
}); });
ResizeResponsiveEmbeds(); ResizeResponsiveEmbeds();
$scope("embed").attr("src", $scope("embed").data("src"));
userfields.Load(); userfields.Load();
$scope('#name').focus(); $scope('#name').focus();

View File

@ -364,7 +364,7 @@ function purchaseView(Grocy, scope = null)
Grocy.Api.Get('objects/product_barcodes?query[]=barcode=' + elem.getAttribute("barcode"), Grocy.Api.Get('objects/product_barcodes?query[]=barcode=' + elem.getAttribute("barcode"),
function(barcodeResult) function(barcodeResult)
{ {
if (barcodeResult != null) if (barcodeResult != null && barcodeResult !== undefined)
{ {
var barcode = barcodeResult[0]; var barcode = barcodeResult[0];
$scope("#purchase-form").attr("data-used-barcode", barcode.id); $scope("#purchase-form").attr("data-used-barcode", barcode.id);

View File

@ -311,6 +311,11 @@
$scope("#productcard-modal").modal("show"); $scope("#productcard-modal").modal("show");
}); });
top.on("click", "#kill-productcard-modal", function(e)
{
$scope("#productcard-modal").modal("hide");
});
} }

View File

@ -4,12 +4,17 @@
@section('activeNav', 'batteriesjournal') @section('activeNav', 'batteriesjournal')
@section('viewJsName', 'batteriesjournal') @section('viewJsName', 'batteriesjournal')
@php
$collapsed_none = $embedded ? '' : 'd-md-none';
$collapsed_flex = $embedded ? '' : 'd-md-flex';
@endphp
@section('content') @section('content')
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h2 class="title">@yield('title')</h2> <h2 class="title">@yield('title')</h2>
<div class="float-right"> <div class="float-right">
<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3" <button class="btn btn-outline-dark {{ $collapsed_none }} mt-2 order-1 order-md-3"
type="button" type="button"
data-toggle="collapse" data-toggle="collapse"
data-target="#table-filter-row"> data-target="#table-filter-row">
@ -21,7 +26,7 @@
<hr class="my-2"> <hr class="my-2">
<div class="row collapse d-md-flex" <div class="row collapse {{ $collapsed_flex }}"
id="table-filter-row"> id="table-filter-row">
<div class="col-12 col-md-6 col-xl-3"> <div class="col-12 col-md-6 col-xl-3">
<div class="input-group"> <div class="input-group">

View File

@ -4,12 +4,18 @@
@section('activeNav', 'choresjournal') @section('activeNav', 'choresjournal')
@section('viewJsName', 'choresjournal') @section('viewJsName', 'choresjournal')
@php
$collapsed_none = $embedded ? '' : 'd-md-none';
$collapsed_flex = $embedded ? '' : 'd-md-flex';
@endphp
@section('content') @section('content')
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h2 class="title">@yield('title')</h2> <h2 class="title">@yield('title')</h2>
<div class="float-right"> <div class="float-right">
<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3" <button class="btn btn-outline-dark {{ $collapsed_none }} mt-2 order-1 order-md-3"
type="button" type="button"
data-toggle="collapse" data-toggle="collapse"
data-target="#table-filter-row"> data-target="#table-filter-row">
@ -21,7 +27,7 @@
<hr class="my-2"> <hr class="my-2">
<div class="row collapse d-md-flex" <div class="row collapse {{ $collapsed_flex }}"
id="table-filter-row"> id="table-filter-row">
<div class="col-12 col-md-6 col-xl-3"> <div class="col-12 col-md-6 col-xl-3">
<div class="input-group"> <div class="input-group">

View File

@ -8,16 +8,20 @@
title="{{ $__t('Edit product') }}"> title="{{ $__t('Edit product') }}">
<i class="fas fa-edit"></i> <i class="fas fa-edit"></i>
</a> </a>
@if(!isset($noStockJournalButton))
<a id="productcard-product-journal-button" <a id="productcard-product-journal-button"
class="btn btn-sm btn-outline-secondary py-0 mr-1 float-right disabled show-as-dialog-link" class="btn btn-sm btn-outline-secondary py-0 mr-1 float-right disabled show-as-dialog-link"
href="#"> href="#">
{{ $__t('Stock journal') }} {{ $__t('Stock journal') }}
</a> </a>
@endif
@if(!isset($noStockEntryButton))
<a id="productcard-product-stock-button" <a id="productcard-product-stock-button"
class="btn btn-sm btn-outline-secondary py-0 mr-1 float-right disabled show-as-dialog-link" class="btn btn-sm btn-outline-secondary py-0 mr-1 float-right disabled show-as-dialog-link"
href="#"> href="#">
{{ $__t('Stock entries') }} {{ $__t('Stock entries') }}
</a> </a>
@endif
</div> </div>
<div class="card-body"> <div class="card-body">
<h3><span id="productcard-product-name"></span></h3> <h3><span id="productcard-product-name"></span></h3>

View File

@ -96,7 +96,7 @@ InstructionManualFileNameName: '{{ $equipment->instruction_manual_file_name }}',
@if(!empty($equipment->instruction_manual_file_name)) @if(!empty($equipment->instruction_manual_file_name))
<embed id="current-equipment-instruction-manual" <embed id="current-equipment-instruction-manual"
class="embed-responsive embed-responsive-4by3" class="embed-responsive embed-responsive-4by3"
src="{{ $U('/api/files/equipmentmanuals/' . base64_encode($equipment->instruction_manual_file_name)) }}" data-src="{{ $U('/api/files/equipmentmanuals/' . base64_encode($equipment->instruction_manual_file_name)) }}"
type="application/pdf"> type="application/pdf">
<p id="delete-current-instruction-manual-on-save-hint" <p id="delete-current-instruction-manual-on-save-hint"
class="form-text text-muted font-italic d-none">{{ $__t('The current file will be deleted on save') }}</p> class="form-text text-muted font-italic d-none">{{ $__t('The current file will be deleted on save') }}</p>

View File

@ -229,12 +229,12 @@ $dt_uniq = uniqid();
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content text-center"> <div class="modal-content text-center">
<div class="modal-body"> <div class="modal-body">
@include('components.productcard') @include('components.productcard', [ 'noStockEntryButton' => true, 'noStockJournalButton' => $embedded ])
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" <button type="button"
class="btn btn-secondary" class="btn btn-secondary"
data-dismiss="modal">{{ $__t('Close') }}</button> id="kill-productcard-modal">{{ $__t('Close') }}</button>
</div> </div>
</div> </div>
</div> </div>

View File

@ -15,6 +15,10 @@ EditObjectId: {{ $task->id }},
@endif @endif
@endsection @endsection
@php
$classes = $embedded ? '' : 'col-lg-6';
@endphp
@section('content') @section('content')
<div class="row"> <div class="row">
<div class="col"> <div class="col">
@ -25,7 +29,7 @@ EditObjectId: {{ $task->id }},
<hr class="my-2"> <hr class="my-2">
<div class="row"> <div class="row">
<div class="col-lg-6 col-12"> <div class="{{ $classes }} col-12">
<form id="task-form" <form id="task-form"
novalidate> novalidate>