remove requirement for unique name attribute in carousel

see #179 (comment)

Author: lovasoa

examples/official-site/custom_components.sql

@@ -111,6 +111,14 @@ and SQLPage adds a few more:
 - `each_row`: iterates over the rows of a query result
 - `typeof`: returns the type of a value (`string`, `number`, `boolean`, `object`, `array`, `null`)
 
+### Attributes
+
+In addition to the parameters you pass to your components in your SQL queries,
+SQLPage adds the following attributes to the context of your components:
+
+ - `@component_index` : the index of the current component in the page. Useful to generate unique ids or classes.
+ - `@row_index` : the index of the current row in the current component. Useful to implement special behavior on the first row, for instance.
+
 ## Overwriting the default components
 
 You can overwrite the default components, including the `shell` component,

examples/official-site/sqlpage/migrations/32_shared_id_class_attributes.sql

@@ -13,14 +13,7 @@ INSERT INTO parameter (
         top_level,
         optional
     )
-VALUES (
-        'carousel',
-        'name',
-        'An unique string to identify the caroussel component in the HTML page.',
-        'TEXT',
-        TRUE,
-        FALSE
-    ),
+VALUES
     (
         'carousel',
         'title',

examples/official-site/sqlpage/migrations/34_carousel.sql

@@ -1,14 +1,14 @@
-<div class="card my-2 col-md-{{default width 12}}{{#if center}} mx-auto{{/if}}">
+<div class="card my-2 col-md-{{default width 12}}{{#if center}} mx-auto{{/if}} {{class}}" {{#if id}}id="{{id}}"{{/if}}>
     <div class="card-body">
         {{#if title}}
             <div class="d-flex align-items-center">
                 <div class="subheader">{{title}}</div>
             </div>
         {{/if}}
-        <div id="{{name}}" class="carousel slide{{#if fade}} carousel-fade{{/if}}" {{#if auto}}data-bs-ride="carousel"{{/if}}>
+        <div id="_sqlpage_carousel_{{@component_index}}" class="carousel slide{{#if fade}} carousel-fade{{/if}}" {{#if auto}}data-bs-ride="carousel"{{/if}}>
             <div class="carousel-indicators{{#if indicators}} carousel-indicators-{{indicators}}{{/if}}{{#if vertical}} carousel-indicators-vertical{{/if}}">
                 {{#each_row}}
-                    <button type="button" data-bs-target="#{{../name}}" data-bs-slide-to="{{@row_index}}" {{#if (eq @row_index 0)}}class="active"{{/if}}></button>
+                    <button type="button" data-bs-target="#_sqlpage_carousel_{{@../component_index}}" data-bs-slide-to="{{@row_index}}" {{#if (eq @row_index 0)}}class="active"{{/if}}></button>
                     {{#delay}}
                         {{flush_delayed}}
                         <div class="carousel-item {{#if (eq @row_index 0)}}active{{/if}}">

sqlpage/templates/carousel.handlebars

@@ -295,7 +295,7 @@ impl<W: std::io::Write> RenderContext<W> {
         } else {
             PAGE_SHELL_COMPONENT
         };
-        let mut shell_renderer = Self::create_renderer(shell_component, Arc::clone(&app_state))
+        let mut shell_renderer = Self::create_renderer(shell_component, Arc::clone(&app_state), 0)
             .await
             .with_context(|| "The shell component should always exist")?;
 
@@ -484,20 +484,35 @@ impl<W: std::io::Write> RenderContext<W> {
     async fn create_renderer(
         component: &str,
         app_state: Arc<AppState>,
+        component_index: usize,
     ) -> anyhow::Result<SplitTemplateRenderer> {
         let split_template = app_state
             .all_templates
             .get_template(&app_state, component)
             .await?;
-        Ok(SplitTemplateRenderer::new(split_template, app_state))
+        Ok(SplitTemplateRenderer::new(
+            split_template,
+            app_state,
+            component_index,
+        ))
     }
 
     /// Set a new current component and return the old one
     async fn set_current_component(
         &mut self,
         component: &str,
     ) -> anyhow::Result<Option<SplitTemplateRenderer>> {
-        let new_component = Self::create_renderer(component, Arc::clone(&self.app_state)).await?;
+        let current_component_index = self
+            .current_component
+            .as_ref()
+            .map(|c| c.component_index)
+            .unwrap_or(1);
+        let new_component = Self::create_renderer(
+            component,
+            Arc::clone(&self.app_state),
+            current_component_index + 1,
+        )
+        .await?;
         Ok(self.current_component.replace(new_component))
     }
 
@@ -552,16 +567,22 @@ pub struct SplitTemplateRenderer {
     ctx: Context,
     app_state: Arc<AppState>,
     row_index: usize,
+    component_index: usize,
 }
 
 impl SplitTemplateRenderer {
-    fn new(split_template: Arc<SplitTemplate>, app_state: Arc<AppState>) -> Self {
+    fn new(
+        split_template: Arc<SplitTemplate>,
+        app_state: Arc<AppState>,
+        component_index: usize,
+    ) -> Self {
         Self {
             split_template,
             local_vars: None,
             app_state,
             row_index: 0,
             ctx: Context::null(),
+            component_index,
         }
     }
     fn name(&self) -> &str {
@@ -585,6 +606,10 @@ impl SplitTemplateRenderer {
                 .unwrap_or_default(),
         );
         let mut render_context = handlebars::RenderContext::new(None);
+        render_context
+            .block_mut()
+            .expect("context created without block")
+            .set_local_var("component_index", JsonValue::Number(self.component_index.into()));
         *self.ctx.data_mut() = data;
         let mut output = HandlebarWriterOutput(writer);
         self.split_template.before_list.render(
@@ -678,7 +703,7 @@ mod tests {
         let mut output = Vec::new();
         let config = app_config::tests::test_config();
         let app_state = Arc::new(AppState::init(&config).await.unwrap());
-        let mut rdr = SplitTemplateRenderer::new(Arc::new(split), app_state);
+        let mut rdr = SplitTemplateRenderer::new(Arc::new(split), app_state, 0);
         rdr.render_start(&mut output, json!({"name": "SQL"}))?;
         rdr.render_item(&mut output, json!({"x": 1}))?;
         rdr.render_item(&mut output, json!({"x": 2}))?;
@@ -699,7 +724,7 @@ mod tests {
         let mut output = Vec::new();
         let config = app_config::tests::test_config();
         let app_state = Arc::new(AppState::init(&config).await.unwrap());
-        let mut rdr = SplitTemplateRenderer::new(Arc::new(split), app_state);
+        let mut rdr = SplitTemplateRenderer::new(Arc::new(split), app_state, 0);
         rdr.render_start(&mut output, json!(null))?;
         rdr.render_item(&mut output, json!({"x": 1}))?;
         rdr.render_item(&mut output, json!({"x": 2}))?;