From 7aed8e283917189626b191e105d2b16e7b73f7cb Mon Sep 17 00:00:00 2001
From: Aleisha Amohia <aleishaamohia@hotmail.com>
Date: Tue, 3 Oct 2023 00:03:12 +0000
Subject: [PATCH] Bug 33478: CCS textarea instead of specific style inputs

This patch implements a single style field for the slip to allow for more advanced CSS customisation. This prevents the forcing of default styles which override the SlipCSS syspref settings. There are links to insert selectors as helpers.

To test, go to edit the Format of a notice. There is now a textarea so you can write CSS directly. There are links that insert selectors as CSS for notices needs specific IDs like #receipt and #slip to override print.css etc.

Confirm that SlipCSS stylesheet changes are applied first. Specific notice styles should be applied last.

Test with a non-HTML notice as well, such as RECALL_REQUESTER_DET. Plain (non_HTML) notices have always come with <pre> tags around them so the text is formatted slightly differently but any CSS from SlipCSS or the notice Format should still hold.

Sponsored-by: Colorado Library Consortium
---
 .../bug_33478-add_letter_columns.pl           |  46 +------
 installer/data/mysql/kohastructure.sql        |   7 +-
 .../prog/en/modules/circ/printslip.tt         |   1 +
 .../prog/en/modules/members/printfeercpt.tt   |   1 +
 .../prog/en/modules/members/printinvoice.tt   |   1 +
 .../prog/en/modules/members/printnotice.tt    |   1 +
 .../prog/en/modules/pos/printreceipt.tt       |   1 +
 .../prog/en/modules/tools/letter.tt           | 124 +++++++-----------
 tools/letter.pl                               |  32 +----
 9 files changed, 64 insertions(+), 150 deletions(-)

diff --git a/installer/data/mysql/atomicupdate/bug_33478-add_letter_columns.pl b/installer/data/mysql/atomicupdate/bug_33478-add_letter_columns.pl
index 772413026be..91caa660790 100644
--- a/installer/data/mysql/atomicupdate/bug_33478-add_letter_columns.pl
+++ b/installer/data/mysql/atomicupdate/bug_33478-add_letter_columns.pl
@@ -7,52 +7,12 @@ return {
         my ($args) = @_;
         my ($dbh, $out) = @$args{qw(dbh out)};
 
-        if( !column_exists( 'letter', 'font_size' ) ) {
+        if( !column_exists( 'letter', 'style' ) ) {
           $dbh->do(q{
-              ALTER TABLE letter ADD COLUMN `font_size` int(4) NOT NULL DEFAULT 14 AFTER `updated_on`
+              ALTER TABLE letter ADD COLUMN `style` mediumtext DEFAULT NULL AFTER `updated_on`
           });
 
-          say $out "Added column 'letter.font_size'";
-        }
-
-        if( !column_exists( 'letter', 'text_justify' ) ) {
-          $dbh->do(q{
-              ALTER TABLE letter ADD COLUMN `text_justify` enum('L','C','R') NOT NULL DEFAULT 'L' AFTER `font_size`
-          });
-
-          say $out "Added column 'letter.text_justify'";
-        }
-
-        if( !column_exists( 'letter', 'units' ) ) {
-          $dbh->do(q{
-              ALTER TABLE letter ADD COLUMN `units` enum('POINT','INCH','MM','CM') NOT NULL DEFAULT 'INCH' AFTER `text_justify`
-          });
-
-          say $out "Added column 'letter.units'";
-        }
-
-        if( !column_exists( 'letter', 'notice_width' ) ) {
-          $dbh->do(q{
-              ALTER TABLE letter ADD COLUMN `notice_width` float NOT NULL DEFAULT 8.5 AFTER `units`
-          });
-
-          say $out "Added column 'letter.notice_width'";
-        }
-
-        if( !column_exists( 'letter', 'top_margin' ) ) {
-          $dbh->do(q{
-              ALTER TABLE letter ADD COLUMN `top_margin` float NOT NULL DEFAULT 0 AFTER `notice_width`
-          });
-
-          say $out "Added column 'letter.top_margin'";
-        }
-
-        if( !column_exists( 'letter', 'left_margin' ) ) {
-          $dbh->do(q{
-              ALTER TABLE letter ADD COLUMN `left_margin` float NOT NULL DEFAULT 0 AFTER `top_margin`
-          });
-
-          say $out "Added column 'letter.left_margin'";
+          say $out "Added column 'letter.style'";
         }
     },
 };
diff --git a/installer/data/mysql/kohastructure.sql b/installer/data/mysql/kohastructure.sql
index 34ad921fe9f..445d905ba78 100644
--- a/installer/data/mysql/kohastructure.sql
+++ b/installer/data/mysql/kohastructure.sql
@@ -4231,12 +4231,7 @@ CREATE TABLE `letter` (
   `message_transport_type` varchar(20) NOT NULL DEFAULT 'email' COMMENT 'transport type for this notice',
   `lang` varchar(25) NOT NULL DEFAULT 'default' COMMENT 'lang of the notice',
   `updated_on` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp() COMMENT 'last modification',
-  `font_size` int(4) NOT NULL DEFAULT 14 COMMENT 'font size used when notice is printed',
-  `text_justify` enum('L','C','R') NOT NULL DEFAULT 'L' COMMENT 'text justification used when notice is printed',
-  `units` enum('POINT','INCH','MM','CM') NOT NULL DEFAULT 'INCH' COMMENT 'units to use for print measurements',
-  `notice_width` float NOT NULL DEFAULT 8.5 COMMENT 'width of notice',
-  `top_margin` float NOT NULL DEFAULT 0 COMMENT 'top margin for notice',
-  `left_margin` float NOT NULL DEFAULT 0 COMMENT 'left margin for notice',
+  `style` mediumtext DEFAULT NULL COMMENT 'custom styles for this notice',
   PRIMARY KEY (`id`),
   UNIQUE KEY `letter_uniq_1` (`module`,`code`,`branchcode`,`message_transport_type`,`lang`),
   KEY `message_transport_type_fk` (`message_transport_type`),
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/printslip.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/printslip.tt
index f4d35cf1b1c..85157a6d558 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/printslip.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/printslip.tt
@@ -29,6 +29,7 @@
 [% IF ( Koha.Preference('SlipCSS') ) %]
 <link rel="stylesheet" type="text/css" href="[% Koha.Preference('SlipCSS') | $raw %]" />
 [% END %]
+[% IF slip.style %]<style>[% slip.style | $raw %]</style>[% END %]
 
 [% INCLUDE 'slip-print.inc' #printThenClose %]
 </head>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/members/printfeercpt.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/members/printfeercpt.tt
index 5693c3188cb..a2ed2655775 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/printfeercpt.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/printfeercpt.tt
@@ -15,6 +15,7 @@
 <link rel="shortcut icon" href="[% IF ( IntranetFavicon ) %][% IntranetFavicon | url %][% ELSE %][% interface | html %]/[% theme | html %]/img/favicon.ico[% END %]" type="image/x-icon" />
 
 [% Asset.css("css/printreceiptinvoice.css") | $raw %]
+[% IF slip.style %]<style>[% slip.style | $raw %]</style>[% END %]
 [% INCLUDE 'blocking_errors.inc' %]
 </head>
 
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/members/printinvoice.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/members/printinvoice.tt
index 4fb3442ad8f..8a1a3f95053 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/printinvoice.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/printinvoice.tt
@@ -15,6 +15,7 @@
 <link rel="shortcut icon" href="[% IF ( IntranetFavicon ) %][% IntranetFavicon | url %][% ELSE %][% interface | html %]/[% theme | html %]/img/favicon.ico[% END %]" type="image/x-icon" />
 
 [% Asset.css("css/printreceiptinvoice.css") | $raw %]
+[% IF slip.style %]<style>[% slip.style | $raw %]</style>[% END %]
 [% INCLUDE 'blocking_errors.inc' %]
 </head>
 
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/members/printnotice.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/members/printnotice.tt
index 85b1660e937..3566bc6d0c8 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/printnotice.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/printnotice.tt
@@ -18,6 +18,7 @@
 [% IF ( Koha.Preference('SlipCSS') ) %]
 <link rel="stylesheet" type="text/css" href="[% Koha.Preference('SlipCSS') | $raw %]" />
 [% END %]
+[% IF slip.style %]<style>[% slip.style | $raw %]</style>[% END %]
 </head>
 
 <body id="members_printslip" class="member">
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/pos/printreceipt.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/pos/printreceipt.tt
index 7374498b32f..95e2d7d8f93 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/pos/printreceipt.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/pos/printreceipt.tt
@@ -14,6 +14,7 @@
 <link rel="shortcut icon" href="[% IF ( IntranetFavicon ) %][% IntranetFavicon | url %][% ELSE %][% interface | html %]/[% theme | html %]/img/favicon.ico[% END %]" type="image/x-icon" />
 
 [% Asset.css("css/printreceiptinvoice.css") | $raw %]
+[% IF slip.style %]<style>[% slip.style | $raw %]</style>[% END %]
 [% INCLUDE 'blocking_errors.inc' %]
 </head>
 
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/letter.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/letter.tt
index df61bd0ccf7..c1931cb3364 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/letter.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/letter.tt
@@ -51,29 +51,16 @@
         .panel-group {
             margin-top: 3px;
         }
+        .css-helper::after {
+            content: " | ";
+        }
+        .css-helper:last-child::after {
+            content: none;
+        }
     </style>
 [% END %]
 </head>
 
-[% text_justification_types = [ 'L','C','R' ] %]
-[% BLOCK translate_justification_types %]
-    [%  SWITCH type %]
-        [%   CASE 'L' %]<span>Left</span>
-        [%   CASE 'C' %]<span>Center</span>
-        [%   CASE 'R' %]<span>Right</span>
-    [%  END %]
-[% END %]
-
-[% units = [ 'POINT','INCH','MM','CM' ] %]
-[% BLOCK translate_unit_types %]
-    [% SWITCH type %]
-        [%   CASE 'POINT' %]<span>PostScript points</span>
-        [%   CASE 'INCH' %]<span>US Inches</span>
-        [%   CASE 'MM' %]<span>SI Millimeters</span>
-        [%   CASE 'CM' %]<span>SI Centimeters</span>
-    [% END %]
-[% END %]
-
 <body id="tools_letter" class="tools">
     [% WRAPPER 'header.inc' %]
     [% INCLUDE 'letters-search.inc' %]
@@ -689,60 +676,25 @@
                 <div class="panel-body">
                     <fieldset class="rows">
                     <div class="dialog message">These format settings apply when a notice is printed.</div>
-                        [% SET param = letters.$lang.params %]
-                        <div class="col-md-6">
-                            <ol>
-                                <li>
-                                    <label for="text_justify">Text justification: </label>
-                                    <select name="text_justify" id="text_justify">
-                                        [% FOREACH text_justification_type IN text_justification_types %]
-                                            [% IF ( text_justification_type == param.text_justify ) %]
-                                            <option value="[% text_justification_type | html %]" selected="selected">[% PROCESS translate_justification_types type=text_justification_type %]</option>
-                                            [% ELSE %]
-                                            <option value="[% text_justification_type | html %]">[% PROCESS translate_justification_types type=text_justification_type %]</option>
-                                            [% END %]
-                                        [% END %]
-                                    </select>
-                                </li>
-                                <li>
-                                    <label for="font_size">Font size: </label>
-                                    <input type="text" name="font_size" id="font_size" size="2" value="[% param.font_size | html %]" />
-                                </li>
-                                <li>
-                                    <label for="format_all">Apply format settings to all notices:</label>
-                                    <input type="checkbox" name="format_all" id="format_all" value="1" />
-                                    <span class="hint">Existing format settings will be overwritten.</span>
-                                </li>
-                            </ol>
-                        </div>
-                        <div class="col-md-6">
-                            <ol>
-                                <li>
-                                    <label for="units">Units:</label>
-                                    <select id="units" name="units">
-                                        [% FOREACH unit IN units %]
-                                            [% IF ( unit == param.units ) %]
-                                            <option value="[% unit | html %]" selected="selected">[% PROCESS translate_unit_types type=unit %]</option>
-                                            [% ELSE %]
-                                            <option value="[% unit | html %]">[% PROCESS translate_unit_types type=unit %]</option>
-                                            [% END %]
-                                        [% END %]
-                                    </select>
-                                </li>
-                                <li>
-                                    <label for="notice_width">Notice width:</label>
-                                    <input type="text" size="4" name="notice_width" id="notice_width" value="[% param.notice_width | html %]" />
-                                </li>
-                                <li>
-                                    <label for="top_margin">Top margin:</label>
-                                    <input type="text" size="4" name="top_margin" id="top_margin" value="[% param.top_margin | html %]" />
-                                </li>
-                                <li>
-                                    <label for="left_margin">Left margin:</label>
-                                    <input type="text" size="4" name="left_margin" id="left_margin" value="[% param.left_margin | html %]" />
-                                </li>
-                            </ol>
-                        </div>
+                    <div class="col-md-12">
+                        <ol>
+                            <li id="css-helpers">
+                                <label>Insert selectors to apply styles to: </label>
+                                <a class="css-helper" id="headings">Headings</a>
+                                <a class="css-helper" id="tables">Tables</a>
+                                <a class="css-helper" id="text">All text</a>
+                            </li>
+                            <li>
+                                <label for="style">Style (CSS): </label>
+                                <textarea id="style" name="style" rows="15" cols="80">[% letters.$lang.params.style | $raw %]</textarea>
+                            </li>
+                            <li>
+                                <label for="format_all">Apply format settings to all notices:</label>
+                                <input type="checkbox" name="format_all" id="format_all" value="1" />
+                                <span class="hint">Existing format settings will be overwritten.</span>
+                            </li>
+                        </ol>
+                    </div>
                     </fieldset> <!-- /.rows.mtt -->
                 </div> <!-- /.panel-body -->
             </div> <!-- /.panel-collapse -->
@@ -767,6 +719,32 @@
         var new_lettercode = '[% new_lettercode | html %]';
         var new_branchcode = '[% new_branchcode | html %]';
         var table_settings = [% TablesSettings.GetTableSettings( 'tools', 'notices', 'lettert', 'json' ) | $raw %];
+        $(document).ready(function(){
+            $("#headings").click(function(){
+                $("#style").val(function(i, text) {
+                    return text + '\nbody, #slip h1, #slip h2, #slip h3, #slip h4, #slip h5, #slip h6,\n' +
+                    '#receipt h1, #receipt h2, #receipt h3, #receipt h4, #receipt h5, #receipt h6 {\n' +
+                    '// insert CSS here\n' +
+                    '}';
+                });
+            });
+            $("#tables").click(function(){
+                $("#style").val(function(i, text) {
+                    return text + '\nbody, table, th, td, th:last-child, td:last-child {\n' +
+                    '// insert CSS here\n' +
+                    '}';
+                });
+            });
+            $("#text").click(function(){
+                $("#style").val(function(i, text) {
+                    return text + '\nbody, #slip h1, #slip h2, #slip h3, #slip h4, #slip h5, #slip h6,\n' +
+                    '#receipt h1, #receipt h2, #receipt h3, #receipt h4, #receipt h5, #receipt h6,\n' +
+                    'table, th, td, th:last-child, td:last-child {\n' +
+                    '// insert CSS here\n' +
+                    '}';
+                });
+            });
+        });
      </script>
     [% Asset.js("js/letter.js") | $raw %]
 [% END %]
diff --git a/tools/letter.pl b/tools/letter.pl
index 98acb0ccdba..75a04a4790d 100755
--- a/tools/letter.pl
+++ b/tools/letter.pl
@@ -307,12 +307,7 @@ sub add_validate {
     my $oldmodule     = $input->param('oldmodule');
     my $code          = $input->param('code');
     my $name          = $input->param('name');
-    my $text_justify  = $input->param('text_justify');
-    my $font_size     = $input->param('font_size');
-    my $units         = $input->param('units');
-    my $notice_width  = $input->param('notice_width');
-    my $top_margin    = $input->param('top_margin');
-    my $left_margin   = $input->param('left_margin');
+    my $style         = $input->param('style');
     my $format_all    = $input->param('format_all');
     my @mtt           = $input->multi_param('message_transport_type');
     my @title         = $input->multi_param('title');
@@ -323,16 +318,7 @@ sub add_validate {
         if ( $format_all ) {
             my @letters = Koha::Notice::Templates->search({ lang => $lang })->as_list;
             foreach my $letter ( @letters ) {
-                $letter->set(
-                    {
-                        text_justify  => $text_justify,
-                        font_size  => $font_size,
-                        units      => $units,
-                        notice_width  => $notice_width,
-                        top_margin    => $top_margin,
-                        left_margin   => $left_margin,
-                    }
-                )->store;
+                $letter->set({ style => $style })->store;
             }
         }
         my $is_html = $input->param("is_html_$mtt\_$lang");
@@ -368,12 +354,7 @@ sub add_validate {
                     title      => $title,
                     content    => $content,
                     lang       => $lang,
-                    text_justify  => $text_justify,
-                    font_size  => $font_size,
-                    units      => $units,
-                    notice_width  => $notice_width,
-                    top_margin    => $top_margin,
-                    left_margin   => $left_margin,
+                    style      => $style
                 }
             )->store;
 
@@ -389,12 +370,7 @@ sub add_validate {
                     content                => $content,
                     message_transport_type => $mtt,
                     lang                   => $lang,
-                    text_justify  => $text_justify,
-                    font_size  => $font_size,
-                    units      => $units,
-                    notice_width  => $notice_width,
-                    top_margin    => $top_margin,
-                    left_margin   => $left_margin,
+                    style                  => $style
                 }
             )->store;
             logaction( 'NOTICES', 'CREATE', $letter->id, $letter->content,
-- 
2.30.2