From 9bd558d07cd73812d598b529202c70c5b0f53785 Mon Sep 17 00:00:00 2001
From: Maxwell Morais <MaxMorais@users.noreply.github.com>
Date: Sun, 29 Dec 2024 23:05:14 -0300
Subject: [PATCH] Use block dataKey instead of block key for define for
 variable name
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

To construct a UI like below

![image](https://github.com/user-attachments/assets/2ddc5046-6c1f-42c3-8e2b-9eae0b1b3b86)

We often need to use `repeater` block, internally the repeater block define a key based on the blockKey, what create codes like

```jinja
{%- if not key_u7ps3awh6.price.unitary -%}
  {%- if key_u7ps3awh6.price.monthly -%}
   <h4>R$ {{ key_u7ps3awh6.price.monthly.real }}<sup style="font-weight: 200;">{{ key_u7ps3awh6.price.monthly.dec }}</sup>/<sub style="font-weight: 200;">mês</sub></h4>
  {%- endif -%}

  {%- if key_u7ps3awh6.price.yearly -%}
   <h4>{%- if key_u7ps3awh6.price.monthly %} - {%- endif -%}R$ {{ key_u7ps3awh6.price.yearly.real }}<sup style="font-weight: 200;">{{ key_u7ps3awh6.price.yearly.dec }}</sup>/<sub style="font-weight: 200;">ano</sub></h4>
  {%- endif -%}

{%- else -%}
<h4>R$ {{ key_u7ps3awh6.price.unitary.real }}<sup style="font-weight: 200;">{{ key_u7ps3awh6.price.unitary.dec }}</sup>/<sub style="font-weight: 200;">und</sub></h4>
{%- endif -%}
```

This code works because internally, the builder defined a variable `key_{block.get('blockId')}`, but it makes impractical to deal with that in the long term!

Reasons are:

 1 - We dont have any reference on the UI that tell me that my block have the id `u7ps3awh6`
 2 - The block ID is internally controlled by the framework, what means, if we duplicate the block, the logic breaks and again we dont have hints about the new variable name!


 My proposal is to make use of the `dataKey` of the `repeater` block, to generate a more organic key like below


![image](https://github.com/user-attachments/assets/c8b03707-0127-48b8-bcc2-d32adff79811)

```jinja
{%- if not key_products.price.unitary -%}
  {%- if key_products.price.monthly -%}
   <h4>R$ {{ key_products.price.monthly.real }}<sup style="font-weight: 200;">{{ key_products.price.monthly.dec }}</sup>/<sub style="font-weight: 200;">mês</sub></h4>
  {%- endif -%}

  {%- if key_products.price.yearly -%}
   <h4>{%- if key_products.price.monthly %} - {%- endif -%}R$ {{ key_products.price.yearly.real }}<sup style="font-weight: 200;">{{ key_products.price.yearly.dec }}</sup>/<sub style="font-weight: 200;">ano</sub></h4>
  {%- endif -%}

{%- else -%}
<h4>R$ {{ key_products.price.unitary.real }}<sup style="font-weight: 200;">{{ key_products.price.unitary.dec }}</sup>/<sub style="font-weight: 200;">und</sub></h4>
{%- endif -%}
```
---
 builder/builder/doctype/builder_page/builder_page.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 5df16724..248b7b06 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -418,7 +418,7 @@ def get_tag(block, soup, data_key=None):
 				if data_key:
 					_key = f"{data_key}.{_key}"
 
-				item_key = f"key_{block.get('blockId')}"
+				item_key = f"key_{_key.replace('.', '__')}"
 				tag.append(f"{{% for {item_key} in {_key} %}}")
 				tag.append(get_tag(block.get("children")[0], soup, item_key))
 				tag.append("{% endfor %}")