feat: custom card component created.

typerefinery-ai · Dec 9, 2022 · ca3371a · ca3371a
1 parent 68f76c3
commit ca3371a
Show file tree

Hide file tree

Showing 14 changed files with 354 additions and 48 deletions.
diff --git a/application/backend/src/main/java/io/typerefinery/websight/models/components/Card.java b/application/backend/src/main/java/io/typerefinery/websight/models/components/Card.java
@@ -0,0 +1,52 @@
+package io.typerefinery.websight.models.components;
+
+import static org.apache.sling.models.annotations.DefaultInjectionStrategy.OPTIONAL;
+
+import javax.inject.Inject;
+import lombok.Getter;
+import org.apache.sling.api.resource.Resource;
+import org.apache.sling.api.resource.ResourceResolver;
+import org.apache.sling.models.annotations.Default;
+import org.apache.sling.models.annotations.Model;
+import org.apache.sling.models.annotations.injectorspecific.SlingObject;
+
+@Model(adaptables = Resource.class, defaultInjectionStrategy = OPTIONAL)
+public class Card {
+    @SlingObject
+    private ResourceResolver resourceResolver;
+
+    @Getter
+    @Inject
+    @Default(values = "")
+    public String title;
+
+
+    @Getter
+    @Inject
+    @Default(values = "")
+    public String description;
+
+
+    @Getter
+    @Inject
+    @Default(values = "")
+    public String subtitle;
+
+
+    @Getter
+    @Inject
+    public String bgColor;
+
+
+    @Getter
+    @Inject
+    public String titleColor;
+
+    @Getter
+    @Inject
+    public String subtitleColor;
+
+    @Getter
+    @Inject
+    public String descriptionColor;
+}
diff --git a/application/backend/src/main/java/io/typerefinery/websight/models/components/Tika.java b/application/backend/src/main/java/io/typerefinery/websight/models/components/Tika.java
@@ -0,0 +1,39 @@
+package io.typerefinery.websight.models.components;
+
+import static org.apache.sling.models.annotations.DefaultInjectionStrategy.OPTIONAL;
+
+import javax.inject.Inject;
+import lombok.Getter;
+import org.apache.sling.api.resource.Resource;
+import org.apache.sling.api.resource.ResourceResolver;
+import org.apache.sling.models.annotations.Default;
+import org.apache.sling.models.annotations.Model;
+import org.apache.sling.models.annotations.injectorspecific.SlingObject;
+
+@Model(adaptables = Resource.class, defaultInjectionStrategy = OPTIONAL)
+public class Tika {
+    @SlingObject
+    private ResourceResolver resourceResolver;
+
+    @Getter
+    @Inject
+    @Default(values = "")
+    public String title;
+
+
+    @Getter
+    @Inject
+    @Default(values = "")
+    public String value;
+
+
+    @Getter
+    @Inject
+    @Default(values = "")
+    public String icon;
+
+
+    @Getter
+    @Inject
+    public String badge;
+}
diff --git a/...cation/backend/src/main/resources/apps/typerefinery/components/content/card/.content.json b/...cation/backend/src/main/resources/apps/typerefinery/components/content/card/.content.json
@@ -0,0 +1,7 @@
+{
+  "group": "Typerefinery",
+  "sling:resourceType": "ws:Component",
+  "description": "Prime vue card component.",
+  "title": "Card Item",
+  "isContainer": true
+}
diff --git a/application/backend/src/main/resources/apps/typerefinery/components/content/card/card.html b/application/backend/src/main/resources/apps/typerefinery/components/content/card/card.html
@@ -0,0 +1,4 @@
+<sly data-sly-use.model="io.typerefinery.websight.models.components.Card"
+     data-sly-use.template="./template.html"
+     data-sly-call="${template.card @ title=model.title, description=model.description, subtitle=model.subtitle, icon=model.icon, bgColor=model.bgColor, descriptionColor=model.descriptionColor, titleColor=model.titleColor, subtitleColor=model.subtitleColor}">
+</sly>
diff --git a/...backend/src/main/resources/apps/typerefinery/components/content/card/dialog/.content.json b/...backend/src/main/resources/apps/typerefinery/components/content/card/dialog/.content.json
@@ -0,0 +1,49 @@
+{
+    "sling:resourceType": "wcm/dialogs/dialog",
+    "tabs": {
+        "sling:resourceType": "wcm/dialogs/components/tabs",
+        "generalTab": {
+            "sling:resourceType": "wcm/dialogs/components/tab",
+            "label": "General",
+            "title": {
+                "sling:resourceType": "wcm/dialogs/components/textfield",
+                "name": "title",
+                "label": "Title"
+            },
+            "subtitle": {
+                "sling:resourceType": "wcm/dialogs/components/textfield",
+                "name": "subtitle",
+                "label": "Sub Title"
+            },
+            "description": {
+                "sling:resourceType": "wcm/dialogs/components/textfield",
+                "name": "description",
+                "label": "Description"
+            }
+        },
+        "stylesTab": {
+            "sling:resourceType": "wcm/dialogs/components/tab",
+            "label": "Styling",
+            "bgColor": {
+                "sling:resourceType": "wcm/dialogs/components/textfield",
+                "name": "bgColor",
+                "label": "Card background color"
+            },
+            "titleColor": {
+                "sling:resourceType": "wcm/dialogs/components/textfield",
+                "name": "titleColor",
+                "label": "Title text color"
+            },
+            "subtitleColor": {
+                "sling:resourceType": "wcm/dialogs/components/textfield",
+                "name": "subtitleColor",
+                "label": "Sub Title text color"
+            },
+            "descriptionColor": {
+                "sling:resourceType": "wcm/dialogs/components/textfield",
+                "name": "descriptionColor",
+                "label": "Description text color" 
+            }
+        }
+    }
+}
diff --git a/...cation/backend/src/main/resources/apps/typerefinery/components/content/card/template.html b/...cation/backend/src/main/resources/apps/typerefinery/components/content/card/template.html
@@ -0,0 +1,19 @@
+<template data-sly-template.card="${ @ title, description, subtitle, icon, subtitleColor, descriptionColor, titleColor, bgColor }">
+         <p-card style="width: 25rem; margin-bottom: 2em" :style='{background:"${bgColor}"}'>
+            <template #title>
+                <div :style='{color:"${titleColor}"}'>
+                    ${title}
+                </div>
+            </template>
+            <template #subtitle>
+                <div :style='{color:"${subtitleColor}"}'>
+                    ${subtitle}
+                </div>
+            </template>
+            <template #content>
+                <div :style='{color:"${descriptionColor}"}'>
+                    ${description}
+                </div>
+            </template>
+        </p-card>
+</template>
diff --git a/.../backend/src/main/resources/apps/typerefinery/components/content/cta/dialog/.content.json b/.../backend/src/main/resources/apps/typerefinery/components/content/cta/dialog/.content.json
@@ -82,6 +82,16 @@
           "value": "p-button-warning"
         }
       }
+    },
+    "testingTab": {
+      "sling:resourceType": "wcm/dialogs/components/tab",
+      "label": "New tab",
+      "labelText": {
+        "sling:resourceType": "wcm/dialogs/components/textfield",
+        "name": "label",
+        "label": "Text",
+        "required": true
+      }
     }
   }
 }
diff --git a/...cation/backend/src/main/resources/apps/typerefinery/components/content/tika/.content.json b/...cation/backend/src/main/resources/apps/typerefinery/components/content/tika/.content.json
@@ -0,0 +1,7 @@
+{
+  "group": "Typerefinery",
+  "sling:resourceType": "ws:Component",
+  "description": "Tika component",
+  "title": "Tika",
+  "isContainer": true
+}
diff --git a/...backend/src/main/resources/apps/typerefinery/components/content/tika/dialog/.content.json b/...backend/src/main/resources/apps/typerefinery/components/content/tika/dialog/.content.json
@@ -0,0 +1,54 @@
+{
+    "sling:resourceType": "wcm/dialogs/dialog",
+    "tabs": {
+        "sling:resourceType": "wcm/dialogs/components/tabs",
+        "generalTab": {
+            "sling:resourceType": "wcm/dialogs/components/tab",
+            "label": "General",
+            "title": {
+                "sling:resourceType": "wcm/dialogs/components/textfield",
+                "name": "title",
+                "label": "Title"
+            },
+            "value": {
+                "sling:resourceType": "wcm/dialogs/components/textfield",
+                "name": "value",
+                "label": "Value"
+            },
+            "icon": {
+                "sling:resourceType": "wcm/dialogs/components/textfield",
+                "name": "icon",
+                "label": "icon"
+            },
+            "badge": {
+                "sling:resourceType": "wcm/dialogs/components/textfield",
+                "name": "badge",
+                "label": "badge"
+            }
+        },
+        "stylesTab": {
+            "sling:resourceType": "wcm/dialogs/components/tab",
+            "label": "Styling",
+            "bgColor": {
+                "sling:resourceType": "wcm/dialogs/components/textfield",
+                "name": "bgColor",
+                "label": "Card background color"
+            },
+            "titleColor": {
+                "sling:resourceType": "wcm/dialogs/components/textfield",
+                "name": "titleColor",
+                "label": "Title text color"
+            },
+            "subtitleColor": {
+                "sling:resourceType": "wcm/dialogs/components/textfield",
+                "name": "subtitleColor",
+                "label": "Sub Title text color"
+            },
+            "descriptionColor": {
+                "sling:resourceType": "wcm/dialogs/components/textfield",
+                "name": "descriptionColor",
+                "label": "Description text color" 
+            }
+        }
+    }
+}
diff --git a/...cation/backend/src/main/resources/apps/typerefinery/components/content/tika/template.html b/...cation/backend/src/main/resources/apps/typerefinery/components/content/tika/template.html
@@ -0,0 +1,43 @@
+<template data-sly-template.tika="${ @ title, value, badge, icon }">
+    <div 
+        style="
+            background:#FFF; 
+            width: 280px; 
+            height: 100px; 
+            border-radius: 4px; 
+            display:flex;
+            flex-direction: row; 
+            justify-content: space-between; 
+            align-items: center
+        "
+    >
+        <div 
+            style="
+                display:flex;
+                flex-direction: row; 
+                justify-content: space-between; 
+                align-items: center;
+                padding: 20px;
+                width: 100%;
+                height: 100%;
+            "
+        >
+            <div 
+                style="
+                    display:flex;
+                    flex-direction: column; 
+                    justify-content: space-between; 
+                    height: 100%;
+                "
+            >
+                <h6>
+                    ${title}
+                </h6>
+                <h6>
+                    ${value}
+                </h6>
+            </div>
+            <i class="pi pi-check"></i>
+        </div>
+    </div>
+</template>
diff --git a/application/backend/src/main/resources/apps/typerefinery/components/content/tika/tika.html b/application/backend/src/main/resources/apps/typerefinery/components/content/tika/tika.html
@@ -0,0 +1,4 @@
+<sly data-sly-use.model="io.typerefinery.websight.models.components.Tika"
+     data-sly-use.template="./template.html"
+     data-sly-call="${template.tika @ title=model.title, value=model.value, badge=model.badge, icon=model.icon}">
+</sly>
diff --git a/...tion/backend/src/main/resources/apps/typerefinery/components/structure/page/body-end.html b/...tion/backend/src/main/resources/apps/typerefinery/components/structure/page/body-end.html
@@ -4,22 +4,6 @@
   const { createApp, ref } = Vue;
 
   const vueApp = Vue.createApp({});
-  console.log(vueApp);
-
-
-  window.typerefinery.vueUtils = {};
-
-  (function (vueApp, utils) {
-
-    utils.addComponent = () => {
-      console.log("ADD COMPONENT");
-    };
-
-    utils.addMethod = () => {
-      console.log("ADD METHOD");
-    };
-
-  })(vueApp, window.typerefinery.vueUtils);
 
 
   // component namespace
@@ -32,31 +16,10 @@
       console.log(this);
       console.log("INSIDE METHOD")
     }
-
-    var primeVueButtonExtended = {};
-
-    Object.assign(primeVueButtonExtended, primevue.button);
-
-    primeVueButtonExtended.methods = {
-      vueButtonIsClicked() {
-        console.log("Vue Button is clicked");
-      }
-    }
-
-    console.log("primeVueButtonExtended  ", primeVueButtonExtended);
-
-    vueApp.component("p-button", primeVueButtonExtended);
-
-    console.log("Vue App after p button added. ", vueApp);
-    // Adding Component
-    // vueApp.addComponent({ "p-button": primevue.button });
-
-    // vueApp.addMethod({ "clickHandler": clickHandler });
-
+    vueApp.component("p-button", primevue.button)
   })(vueApp, window.typerefinery.button);
 
 
-  //Inputtext namspace
   window.typerefinery.inputText = {};
   (function (vueApp, utils) {
     utils.vueInputOnChange = (e) => {
@@ -69,12 +32,16 @@
   //Accordion page namespace
   //  window.typerefinery.inputText = {};
   (function (vueApp) {
-    console.log("hello", vueApp);
     vueApp.component("p-accordion", primevue.accordion)
-    vueApp.component("p-card", primevue.card)
-
     vueApp.component("p-accordiontab", primevue.accordiontab)
-  })(vueApp)
+  })(vueApp);
+
+
+  // namespace for cards.
+  (function(){
+    vueApp.component("p-card", primevue.card);
+  })();
+
 
   vueApp.mount('#app');
 

diff --git a/mvnw b/mvnw