Use the summernote editor for product description (closes #288)

migrations/0080.sql

@@ -0,0 +1,8 @@
+UPDATE products
+SET description = REPLACE(description, CHAR(13) + CHAR(10), '<br>');
+
+UPDATE products
+SET description = REPLACE(description, CHAR(13), '<br>');
+
+UPDATE products
+SET description = REPLACE(description, CHAR(10), '<br>');

public/js/grocy.js

@@ -521,3 +521,8 @@ $(document).on("click", ".easy-link-copy-textbox", function()
 {
 	$(this).select();
 });
+
+$("textarea.wysiwyg-editor").summernote({
+	minHeight: "300px",
+	lang: __t("summernote_locale")
+});

public/viewjs/components/productcard.js

@@ -8,7 +8,7 @@ Grocy.Components.ProductCard.Refresh = function(productId)
 			var stockAmount = productDetails.stock_amount || '0';
 			var stockAmountOpened = productDetails.stock_amount_opened || '0';
 			$('#productcard-product-name').text(productDetails.product.name);
-			$('#productcard-product-description').text(productDetails.product.description);
+			$('#productcard-product-description').html(productDetails.product.description);
 			$('#productcard-product-stock-amount').text(stockAmount);
 			$('#productcard-product-stock-qu-name').text(__n(stockAmount, productDetails.quantity_unit_stock.name, productDetails.quantity_unit_stock.name_plural));
 			$('#productcard-product-last-purchased').text((productDetails.last_purchased || __t('never')).substring(0, 10));

public/viewjs/equipmentform.js

@@ -132,12 +132,6 @@ $('#delete-current-instruction-manual-button').on('click', function (e)
 	$("#delete-current-instruction-manual-on-save-hint").removeClass("d-none");
 	$("#delete-current-instruction-manual-button").addClass("disabled");
 });
-
-$('#description').summernote({
-	minHeight: '300px',
-	lang: __t('summernote_locale')
-});
-
 ResizeResponsiveEmbeds();
 
 Grocy.Components.UserfieldsForm.Load();

public/viewjs/recipeform.js

@@ -344,9 +344,4 @@ $('#delete-current-recipe-picture-button').on('click', function (e)
 	$("#delete-current-recipe-picture-button").addClass("disabled");
 });
 
-$('#description').summernote({
-	minHeight: '300px',
-	lang: __t('summernote_locale')
-});
-
 Grocy.Components.UserfieldsForm.Load();

views/equipmentform.blade.php

@@ -8,15 +8,6 @@
 
 @section('viewJsName', 'equipmentform')
 
-@push('pageScripts')
-	<script src="{{ $U('/node_modules/summernote/dist/summernote-bs4.js?v=', true) }}{{ $version }}"></script>
-	@if(!empty($__t('summernote_locale') && $__t('summernote_locale') != 'x'))<script src="{{ $U('/node_modules', true) }}/summernote/dist/lang/summernote-{{ $__t('summernote_locale') }}.js?v={{ $version }}"></script>@endif
-@endpush
-
-@push('pageStyles')
-	<link href="{{ $U('/node_modules/summernote/dist/summernote-bs4.css?v=', true) }}{{ $version }}" rel="stylesheet">
-@endpush
-
 @section('content')
 <div class="row">
 
@@ -53,7 +44,7 @@
 
 			<div class="form-group">
 				<label for="description">{{ $__t('Notes') }}</label>
-				<textarea class="form-control" id="description" name="description">@if($mode == 'edit'){{ $equipment->description }}@endif</textarea>
+				<textarea class="form-control wysiwyg-editor" id="description" name="description">@if($mode == 'edit'){{ $equipment->description }}@endif</textarea>
 			</div>
 
 			@include('components.userfieldsform', array(

views/layout/default.blade.php

@@ -34,6 +34,7 @@
 	<link href="{{ $U('/node_modules/datatables.net-select-bs4/css/select.bootstrap4.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/node_modules/toastr/build/toastr.min.css?v=', true) }}{{ $version }}" rel="stylesheet">	
 	<link href="{{ $U('/node_modules/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/node_modules/summernote/dist/summernote-bs4.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/components_unmanaged/noto-sans-v6-latin/noto-sans-v6-latin.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/css/grocy.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/css/grocy_night_mode.css?v=', true) }}{{ $version }}" rel="stylesheet">
@@ -383,6 +384,8 @@
 	<script src="{{ $U('/node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/sprintf-js/dist/sprintf.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/gettext-translator/src/translator.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/summernote/dist/summernote-bs4.js?v=', true) }}{{ $version }}"></script>
+	@if(!empty($__t('summernote_locale') && $__t('summernote_locale') != 'x'))<script src="{{ $U('/node_modules', true) }}/summernote/dist/lang/summernote-{{ $__t('summernote_locale') }}.js?v={{ $version }}"></script>@endif
 
 	<script src="{{ $U('/js/extensions.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/js/grocy.js?v=', true) }}{{ $version }}"></script>

views/productform.blade.php

@@ -42,7 +42,7 @@
 
 			<div class="form-group">
 				<label for="description">{{ $__t('Description') }}</label>
-				<textarea class="form-control" rows="2" id="description" name="description">@if($mode == 'edit'){{ $product->description }}@endif</textarea>
+				<textarea class="form-control wysiwyg-editor" id="description" name="description">@if($mode == 'edit'){{ $product->description }}@endif</textarea>
 			</div>
 
 			<div class="form-group tm-group">

views/recipeform.blade.php

@@ -9,14 +9,11 @@
 @section('viewJsName', 'recipeform')
 
 @push('pageScripts')
-	<script src="{{ $U('/node_modules/summernote/dist/summernote-bs4.js?v=', true) }}{{ $version }}"></script>
-	@if(!empty($__t('summernote_locale') && $__t('summernote_locale') != 'x'))<script src="{{ $U('/node_modules', true) }}/summernote/dist/lang/summernote-{{ $__t('summernote_locale') }}.js?v={{ $version }}"></script>@endif
 	<script src="{{ $U('/node_modules/datatables.net-rowgroup/js/dataTables.rowGroup.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/datatables.net-rowgroup-bs4/js/rowGroup.bootstrap4.min.js?v=', true) }}{{ $version }}"></script>
 @endpush
 
 @push('pageStyles')
-	<link href="{{ $U('/node_modules/summernote/dist/summernote-bs4.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/node_modules/datatables.net-rowgroup-bs4/css/rowGroup.bootstrap4.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
 @endpush
 
@@ -49,7 +46,7 @@
 
 			<div class="form-group">
 				<label for="description">{{ $__t('Preparation') }}</label>
-				<textarea id="description" class="form-control" name="description">@if($mode == 'edit'){{ $recipe->description }}@endif</textarea>
+				<textarea id="description" class="form-control wysiwyg-editor" name="description">@if($mode == 'edit'){{ $recipe->description }}@endif</textarea>
 			</div>
 
 			@php if($mode == 'edit') { $value = $recipe->base_servings; } else { $value = 1; } @endphp