Use the custom-file-pickers also for the new file and image userfields

This commit is contained in:
Bernd Bestel 2020-11-11 18:49:08 +01:00
parent 9c81fc890b
commit e3ab943fe7
No known key found for this signature in database
GPG Key ID: 71BD34C0D4891300
3 changed files with 64 additions and 51 deletions

View File

@ -30,16 +30,17 @@ Grocy.Components.UserfieldsForm.Save = function(success, error)
} }
else if (input.attr("type") == "file") else if (input.attr("type") == "file")
{ {
var old_file = input.data('old-file') var oldFile = input.data('old-file')
if (old_file) if (oldFile)
{ {
Grocy.Api.Delete('files/userfiles/' + old_file, null, null, Grocy.Api.Delete('files/userfiles/' + oldFile, null, null,
function(xhr) function(xhr)
{ {
Grocy.FrontendHelpers.ShowGenericError('Could not delete file', xhr); Grocy.FrontendHelpers.ShowGenericError('Could not delete file', xhr);
}); });
jsonData[fieldName] = ""; jsonData[fieldName] = "";
} }
if (input[0].files.length > 0) if (input[0].files.length > 0)
{ {
// Files service requires an extension // Files service requires an extension
@ -52,14 +53,11 @@ Grocy.Components.UserfieldsForm.Save = function(success, error)
}, },
function(xhr) function(xhr)
{ {
Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response) // When navigating away immediately from the current page, this is maybe a false positive - so ignore this for now
// Grocy.FrontendHelpers.ShowGenericError('Error while saving, probably this item already exists', xhr.response)
} }
); );
} }
else
{
//jsonData[fieldName] = null;
}
} }
else if ($(this).hasAttr("multiple")) else if ($(this).hasAttr("multiple"))
{ {
@ -116,24 +114,30 @@ Grocy.Components.UserfieldsForm.Load = function()
{ {
if (value != null && !value.isEmpty()) if (value != null && !value.isEmpty())
{ {
var file_name = atob(value.split('_')[1]); var fileName = atob(value.split('_')[1]);
var file_src = value.split('_')[0]; var fileSrc = value.split('_')[0];
input.hide(); var formGroup = input.parent().parent().parent();
var file_info = input.siblings('.userfield-file');
file_info.removeClass('d-none'); formGroup.find("label.custom-file-label").text(fileName);
file_info.find('a.userfield-current-file') formGroup.find(".userfield-file-show").attr('href', U('/files/userfiles/' + value));
.attr('href', U('/files/userfiles/' + value)) formGroup.find('.userfield-file-show').removeClass('d-none');
.text(file_name); formGroup.find('img.userfield-current-file')
file_info.find('img.userfield-current-file') .attr('src', U('/files/userfiles/' + value + '?force_serve_as=picture&best_fit_width=250&best_fit_height=250'));
.attr('src', U('/files/userfiles/' + value + '?force_serve_as=picture&best_fit_width=250&best_fit_height=250')) LoadImagesLazy();
file_info.find('button.userfield-file-delete').click(
formGroup.find('.userfield-file-delete').click(
function() function()
{ {
file_info.addClass('d-none'); formGroup.find("label.custom-file-label").text(__t("No file selected"));
input.data('old-file', file_src); formGroup.find(".userfield-file-show").addClass('d-none');
input.show(); input.attr('data-old-file', fileSrc);
} }
); );
input.on("change", function(e)
{
formGroup.find(".userfield-file-show").addClass('d-none');
});
} }
} }
else else

View File

@ -14,8 +14,7 @@
<a href="{{ $userfieldObject->value }}" <a href="{{ $userfieldObject->value }}"
target="_blank">{{ $userfieldObject->value }}</a> target="_blank">{{ $userfieldObject->value }}</a>
@elseif($userfield->type == \Grocy\Services\UserfieldsService::USERFIELD_TYPE_FILE) @elseif($userfield->type == \Grocy\Services\UserfieldsService::USERFIELD_TYPE_FILE)
<a class="show-as-dialog-link" <a href="{{ $U('/files/userfiles/'. $userfieldObject->value) }}"
href="{{ $U('/files/userfiles/'. $userfieldObject->value) }}"
target="_blank">{{ base64_decode(explode('_', $userfieldObject->value)[1]) }}</a> target="_blank">{{ base64_decode(explode('_', $userfieldObject->value)[1]) }}</a>
@elseif($userfield->type == \Grocy\Services\UserfieldsService::USERFIELD_TYPE_IMAGE) @elseif($userfield->type == \Grocy\Services\UserfieldsService::USERFIELD_TYPE_IMAGE)
<a class="show-as-dialog-link" <a class="show-as-dialog-link"

View File

@ -119,38 +119,48 @@
</div> </div>
@elseif($userfield->type == \Grocy\Services\UserfieldsService::USERFIELD_TYPE_FILE) @elseif($userfield->type == \Grocy\Services\UserfieldsService::USERFIELD_TYPE_FILE)
<div class="form-group"> <div class="form-group">
<label for="{{ $userfield->name }}">{{ $userfield->caption }}</label> <label>{{ $userfield->caption }}</label>
<input type="file" <div class="input-group">
class="form-control userfield-input" <div class="custom-file">
data-userfield-name="{{ $userfield->name }}"> <input type="file"
<div class="d-none userfield-file"> class="custom-file-input userfield-input"
<a href="" data-userfield-name="{{ $userfield->name }}">
class="userfield-current-file" <label class="custom-file-label"
data-uf-name="{{ $userfield->name }}"></a> for="{{ $userfield->name }}">
<button type="button" {{ $__t('No file selected') }}
class="userfield-current-file btn btn-danger userfield-file-delete" </label>
data-uf-name="{{ $userfield->name }}"> </div>
<i class="fas fa-trash"></i> <div class="input-group-append userfield-file-delete">
</button> <span class="input-group-text"><i class="fas fa-trash"></i></span>
</div>
<div class="input-group-append">
<a href="#"
target="_blank"
class="input-group-text userfield-file-show d-none"><i class="fas fa-eye"></i></a>
</div>
</div> </div>
</div> </div>
@elseif($userfield->type == \Grocy\Services\UserfieldsService::USERFIELD_TYPE_IMAGE) @elseif($userfield->type == \Grocy\Services\UserfieldsService::USERFIELD_TYPE_IMAGE)
<div class="form-group"> <div class="form-group">
<label for="{{ $userfield->name }}">{{ $userfield->caption }}</label> <label>{{ $userfield->caption }}</label>
<input type="file" <div class="input-group">
class="form-control userfield-input" <div class="custom-file">
data-userfield-name="{{ $userfield->name }}"> <input type="file"
<div class="d-none userfield-file"> class="custom-file-input userfield-input"
<img src="" data-userfield-name="{{ $userfield->name }}">
alt="{{ $userfield->name }}" <label class="custom-file-label"
class="userfield-current-file" for="{{ $userfield->name }}">
data-uf-name="{{ $userfield->name }}" /> {{ $__t('No file selected') }}
<button type="button" </label>
class="userfield-current-file btn btn-danger userfield-file-delete" </div>
data-uf-name="{{ $userfield->name }}"> <div class="input-group-append userfield-file-delete">
<i class="fas fa-trash"></i> <span class="input-group-text"><i class="fas fa-trash"></i></span>
</button> </div>
</div> </div>
<img src=""
alt="{{ $userfield->name }}"
class="userfield-current-file userfield-file-show d-none lazy mt-1"
data-uf-name="{{ $userfield->name }}" />
</div> </div>
@endif @endif