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")
{
var old_file = input.data('old-file')
if (old_file)
var oldFile = input.data('old-file')
if (oldFile)
{
Grocy.Api.Delete('files/userfiles/' + old_file, null, null,
Grocy.Api.Delete('files/userfiles/' + oldFile, null, null,
function(xhr)
{
Grocy.FrontendHelpers.ShowGenericError('Could not delete file', xhr);
});
jsonData[fieldName] = "";
}
if (input[0].files.length > 0)
{
// Files service requires an extension
@ -52,14 +53,11 @@ Grocy.Components.UserfieldsForm.Save = function(success, error)
},
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"))
{
@ -116,24 +114,30 @@ Grocy.Components.UserfieldsForm.Load = function()
{
if (value != null && !value.isEmpty())
{
var file_name = atob(value.split('_')[1]);
var file_src = value.split('_')[0];
input.hide();
var file_info = input.siblings('.userfield-file');
file_info.removeClass('d-none');
file_info.find('a.userfield-current-file')
.attr('href', U('/files/userfiles/' + value))
.text(file_name);
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'))
file_info.find('button.userfield-file-delete').click(
var fileName = atob(value.split('_')[1]);
var fileSrc = value.split('_')[0];
var formGroup = input.parent().parent().parent();
formGroup.find("label.custom-file-label").text(fileName);
formGroup.find(".userfield-file-show").attr('href', U('/files/userfiles/' + value));
formGroup.find('.userfield-file-show').removeClass('d-none');
formGroup.find('img.userfield-current-file')
.attr('src', U('/files/userfiles/' + value + '?force_serve_as=picture&best_fit_width=250&best_fit_height=250'));
LoadImagesLazy();
formGroup.find('.userfield-file-delete').click(
function()
{
file_info.addClass('d-none');
input.data('old-file', file_src);
input.show();
formGroup.find("label.custom-file-label").text(__t("No file selected"));
formGroup.find(".userfield-file-show").addClass('d-none');
input.attr('data-old-file', fileSrc);
}
);
input.on("change", function(e)
{
formGroup.find(".userfield-file-show").addClass('d-none');
});
}
}
else

View File

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

View File

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