add template container to accordion.

typerefinery-ai · Apr 23, 2024 · 8641baf · 8641baf
1 parent a13f683
commit 8641baf
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 11 deletions.
diff --git a/...on/backend/src/main/java/ai/typerefinery/websight/models/components/layout/Accordion.java b/...on/backend/src/main/java/ai/typerefinery/websight/models/components/layout/Accordion.java
@@ -29,6 +29,7 @@
 import javax.annotation.PostConstruct;
 import javax.inject.Inject;
 import javax.inject.Named;
+import javax.jcr.Node;
 
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.Exporter;
@@ -53,10 +54,32 @@ public class Accordion extends BaseComponent  {
     private static final Logger LOGGER = LoggerFactory.getLogger(Accordion.class);
 
     public static final String RESOURCE_TYPE = "typerefinery/components/layout/accordion";
+    public static final String RESOURCE_TYPE_TEMPLATE = "typerefinery/components/layout/template";
+    public static final String NODE_TEMPLATE = "template";
 
+    @Inject
+    @Getter
+    public Boolean isTemplated;
+
     @Override
     @PostConstruct
     protected void init() {
         super.init();
+        if (isTemplated) {
+            //if child node template does not exist, create it
+            Resource template = resource.getChild(NODE_TEMPLATE);
+            if (template == null) {
+                LOGGER.info("Creating template node");
+                Node resourceNode = resource.adaptTo(Node.class);
+                try {
+                    Node templateNode = resourceNode.addNode(NODE_TEMPLATE);
+                    templateNode.setProperty("sling:resourceType", RESOURCE_TYPE_TEMPLATE);
+                    resourceNode.getSession().save();
+                } catch (Exception e) {
+                    LOGGER.error("Error creating template node", e);
+                }                
+            }
+        }
+
     }
 }
diff --git a/...on/backend/src/main/resources/apps/typerefinery/components/layout/accordion/.content.json b/...on/backend/src/main/resources/apps/typerefinery/components/layout/accordion/.content.json
@@ -1,9 +1,11 @@
-{
-  "isContainer": true,
-  "group": "Typerefinery - Layout",
-  "sling:resourceType": "ws:Component",
-  "title": "Accordion",
-  "isLayout": true,
-  "allowedComponents": [
-    "/apps/typerefinery/components/accordion/accordionitem"]
-}
+{
+  "isContainer": true,
+  "group": "Typerefinery - Layout",
+  "sling:resourceType": "ws:Component",
+  "title": "Accordion",
+  "isLayout": true,
+  "allowedComponents": [
+    "/apps/typerefinery/components/layout/accordionitem",
+    "/apps/typerefinery/components/layout/template"
+  ]
+}
diff --git a/...n/backend/src/main/resources/apps/typerefinery/components/layout/accordion/accordion.html b/...n/backend/src/main/resources/apps/typerefinery/components/layout/accordion/accordion.html
@@ -19,7 +19,14 @@
     id="${model.id}"
     class="${model.componentName} ${model.componentClassNames} ${model.variantClassNames}"
     data-sly-test="${resource.hasChildren}">
-      <sly data-sly-include="${'parsys.html' @ prependPath='/libs/wcm/foundation/components/parsys'}">
+      <sly data-sly-repeat.paragraph="${resource.children}">
+        <sly data-sly-test="${paragraph.name != 'template'}">
+          <sly data-sly-test="${paragraph.resourceType && paragraph['sling:resourceType']}" data-sly-resource="${paragraph.path @ resourceType=paragraph.resourceType}"></sly>
+        </sly>
+        <sly data-sly-test="${paragraph.name == 'template' && model.isTemplated}">
+          <sly data-sly-test="${paragraph.resourceType && paragraph['sling:resourceType']}" data-sly-resource="${paragraph.path @ resourceType=paragraph.resourceType}"></sly>
+          <div data-sly-test="${wcmmode.isEdit}" component="${model.componentTitle}" style="--bs-bg-opacity: .5;" class="bg-warning ${model.componentClassNames}">${model.componentTitle} - Template</div>
+        </sly>
       </sly>
   </div>
   <sly data-sly-use.lib="/libs/wcm/foundation/components/commons/templates.html"

diff --git a/...src/main/resources/apps/typerefinery/components/layout/accordion/clientlibs/.content.json b/...src/main/resources/apps/typerefinery/components/layout/accordion/clientlibs/.content.json
@@ -3,5 +3,11 @@
   "jcr:primaryType": "sling:Folder",
   "sling:resourceType": "io/typerefinery/websight/clientlibs",
   "categories": ["ai.typerefinery.websight.components","ai.typerefinery.websight.components.layout.accordion"],  
-  "js": [] 
+  "css": [
+    "style.css"
+  ],  
+  "js": [
+    "functions.js",
+    "behaviour.js"
+  ] 
 }
diff --git a/.../src/main/resources/apps/typerefinery/components/layout/accordion/clientlibs/behaviour.js b/.../src/main/resources/apps/typerefinery/components/layout/accordion/clientlibs/behaviour.js
@@ -0,0 +1,12 @@
+window.Typerefinery = window.Typerefinery || {};
+window.Typerefinery.Components = Typerefinery.Components || {};
+window.Typerefinery.Components.Layout = Typerefinery.Components.Layout || {};
+window.Typerefinery.Components.Layout.Accordion = Typerefinery.Components.Layout.Accordion || {};
+
+(function (ns, componentsNs, document) {
+    "use strict";
+
+    //init and watch for new components
+    // componentsNs.watchDOMForComponent(`${ns.selectorComponent}`, ns.init);
+
+})(window.Typerefinery.Components.Layout.Accordion, window.Typerefinery.Components, document);
diff --git a/.../src/main/resources/apps/typerefinery/components/layout/accordion/clientlibs/functions.js b/.../src/main/resources/apps/typerefinery/components/layout/accordion/clientlibs/functions.js
@@ -0,0 +1,23 @@
+window.Typerefinery = window.Typerefinery || {};
+window.Typerefinery.Components = Typerefinery.Components || {};
+window.Typerefinery.Components.Forms = Typerefinery.Components.Forms || {};
+window.Typerefinery.Components.Forms.Button = Typerefinery.Components.Forms.Button || {};
+window.Typerefinery.Modal = Typerefinery.Modal || {};
+window.Typerefinery.Dropdown = Typerefinery.Dropdown || {};
+window.Typerefinery.ToggleComponent = Typerefinery.ToggleComponent || {};
+window.Typerefinery.Page.Theme = Typerefinery.Page.Theme || {};
+
+(function (ns, componentNs, modalNs, dropdownNs, toggleComponentNs, themeNs, document, window) {
+    "use strict";
+
+    ns.selectorComponent = '[component="accordion"]';
+
+    ns.addNewItem = ($component) => {
+        // const $items = $component.querySelector('[component="accordion-items"]');
+        // $items.appendChild($item);
+    }
+
+    ns.init = ($component) => {
+        const componentConfig = componentNs.getComponentConfig($component);        
+    }
+})(Typerefinery.Components.Forms.Button, Typerefinery.Components, Typerefinery.Modal, Typerefinery.Dropdown, Typerefinery.ToggleComponent, window.Typerefinery.Page.Theme, document, window);
diff --git a/...end/src/main/resources/apps/typerefinery/components/layout/accordion/clientlibs/style.css b/...end/src/main/resources/apps/typerefinery/components/layout/accordion/clientlibs/style.css
diff --git a/...end/src/main/resources/apps/typerefinery/components/layout/accordion/dialog/.content.json b/...end/src/main/resources/apps/typerefinery/components/layout/accordion/dialog/.content.json
@@ -2,6 +2,26 @@
   "sling:resourceType": "wcm/dialogs/dialog",
   "tabs": {
     "sling:resourceType": "wcm/dialogs/components/tabs",
+    "generalTab": {
+      "sling:resourceType": "wcm/dialogs/components/tab",
+      "label": "General",
+      "warning": {
+        "sling:resourceType": "typerefinery/components/dialog/label",
+        "ws:disallowedContext": ["edit:dialog"],
+        "appearance": "error",
+        "iconLabel": "Open Dialog",
+        "title": "Some fields are not editable in side-panel.",
+        "message": "Please open this component in dialog to edit these fields.",
+        "secondaryText": "",
+        "placement": "bottom-start"
+      },    
+      "isTemplated": {
+        "sling:resourceType": "wcm/dialogs/components/toggle",
+        "name": "isTemplated",
+        "label": "Is Templated?",
+        "description": "Use a template to add new items."
+      }
+    },
     "eventTab": {
       "sling:resourceType": "wcm/dialogs/components/include",
       "path": "/apps/typerefinery/components/dialog/tabs/event"