Fix bug in list component

Fix a bug in the [link](https://sql-page.com/component.sql?component=link) component where the properties `view_link`, `edit_link`, and `delete_link` had become incompatible with the main `link` property.

fixes #759

Author: lovasoa

CHANGELOG.md

@@ -6,6 +6,7 @@ This is a bugfix release.
 
 - Fix a bug where the form component would not display the right checked state in radio buttons and checkboxes.
  - https://github.com/sqlpage/SQLPage/issues/751
+- Fix a bug in the [link](https://sql-page.com/component.sql?component=link) component where the properties `view_link`, `edit_link`, and `delete_link` had become incompatible with the main `link` property.
 
 ## 0.32.0 (2024-12-29)
 

examples/official-site/sqlpage/migrations/01_documentation.sql

@@ -69,9 +69,11 @@ This example illustrates creating a nice list where each item has a title, a des
         {"title":"SQL Maps", "image_url": "https://upload.wikimedia.org/wikipedia/commons/1/15/Vatican_City_map_EN.png", "description_md":"Show database contents on a map using the *map* component. Works well with *PostGIS* and *SpatiaLite*.", "link": "?component=map"}
     ]')),
     ('list', 'A beautiful list with bells and whistles.',
-            json('[{"component":"list", "title":"Top SQLPage features" }, '||
-            '{"title":"Authentication", "link":"?component=authentication", "description": "Authenticate users with a login form or HTTP basic authentication", "color": "red", "icon":"lock", "active": true }, '||
-            '{"title":"Editing data", "description": "SQLPage makes it easy to UPDATE, INSERT and DELETE data in your database tables", "color": "blue", "icon":"database", "edit_link": "?component=form", "delete_link": "?component=alert" }]'));
+            json('[{"component":"list", "title":"Top SQLPage features", "compact": true },
+            {"title":"Authentication", "link":"?component=authentication", "description": "Authenticate users with a login form or HTTP basic authentication", "color": "red", "icon":"lock", "active": true, "view_link": "?component=authentication#view" },
+            {"title":"Editing data", "link":"?component=form", "description": "SQLPage makes it easy to UPDATE, INSERT and DELETE data in your database tables", "color": "blue", "icon":"database", "edit_link": "?component=form#edit", "delete_link": "?component=form#delete" },
+            {"title":"API", "link":"?component=json", "description": "Generate a REST API from a single SQL query to connect with other applications and services", "color": "green", "icon":"plug-connected", "edit_link": "?component=json#edit", "delete_link": "?component=json#delete" }
+        ]'));
 
 INSERT INTO component(name, icon, description) VALUES
     ('datagrid', 'grid-dots', 'Display small pieces of information in a clear and readable way. Each item has a name and is associated with a value.');

sqlpage/templates/list.handlebars

@@ -6,14 +6,11 @@
     {{/if}}
     <div class="list-group list-group-flush list-group-hoverable">
         {{#each_row}}
-        {{#if link}}
-            <a href="{{link}}" {{#if id}}id="{{id}}"{{/if}}
-                class="list-group-item list-group-item-action {{#if active}}active{{/if}} {{#if ../compact}}py-1{{/if}} {{class}} text-decoration-none link-body-emphasis">
-        {{else}}
-            <div {{#if id}}id="{{id}}"{{/if}}
-                class="list-group-item list-group-item-action {{#if active}}active{{/if}} {{#if ../compact}}py-1{{/if}} {{class}}">
-        {{/if}}
-            <div class="row align-items-center">
+        <div {{#if id}}id="{{id}}"{{/if}}
+            class="list-group-item list-group-item-action p-0 {{#if active}}active{{/if}} {{class}}">
+            <div class="row align-items-center m-0">
+                <a {{#if link}} href="{{link}}" {{/if}}
+                    class="col row align-items-center text-decoration-none link-body-emphasis m-0 {{#if ../compact}}p-1{{else}}p-3{{/if}}">
                     {{#if color}}
                         <div class="col-auto"><span class="badge bg-{{color}}"></span></div>
                     {{/if}}
@@ -37,29 +34,26 @@
                         </div>
                     </div>
 
-                    {{#if view_link}}
-                        <a href="{{view_link}}" class="link-secondary col-auto" title="View">
-                            {{~icon_img 'eye'~}}
-                        </a>
-                    {{/if}}
+                </a>
+                {{#if view_link}}
+                    <a href="{{view_link}}" class="link-secondary col-auto" title="View">
+                        {{~icon_img 'eye'~}}
+                    </a>
+                {{/if}}
 
-                    {{#if delete_link}}
-                        <a href="{{delete_link}}" class="link-secondary col-auto" title="Delete">
-                            {{~icon_img 'trash'~}}
-                        </a>
-                    {{/if}}
+                {{#if delete_link}}
+                    <a href="{{delete_link}}" class="link-secondary col-auto" title="Delete">
+                        {{~icon_img 'trash'~}}
+                    </a>
+                {{/if}}
 
-                    {{#if edit_link}}
-                        <a href="{{edit_link}}" class="link-secondary col-auto" title="Edit">
-                            {{~icon_img 'edit'~}}
-                        </a>
-                    {{/if}}
-                </div>
-        {{#if link}}
-            </a>
-        {{else}}
+                {{#if edit_link}}
+                    <a href="{{edit_link}}" class="link-secondary col-auto" title="Edit">
+                        {{~icon_img 'edit'~}}
+                    </a>
+                {{/if}}
             </div>
-        {{/if}}
+        </div>
         {{/each_row}}
         {{#if (eq @row_index 0)}}
             <a href="{{default empty_link '#'}}" class="list-group-item list-group-item-action">