#8 - implementing semantic ui modal

activey · Nov 1, 2016 · d994fd9 · d994fd9
1 parent 963efc6
commit d994fd9
Show file tree

Hide file tree

Showing 12 changed files with 125 additions and 26 deletions.
diff --git a/licket-demo/src/main/java/org/licket/demo/licket/LicketConfiguration.java b/licket-demo/src/main/java/org/licket/demo/licket/LicketConfiguration.java
@@ -3,15 +3,15 @@
 import org.licket.core.module.application.LicketComponentModelReloader;
 import org.licket.demo.view.ContactsAppRoot;
 import org.licket.demo.view.ContactsPanel;
-import org.licket.semantic.SemanticUIModuleConfiguration;
+import org.licket.semantic.SemanticUIPluginConfiguration;
 import org.licket.spring.annotation.LicketComponent;
 import org.licket.spring.annotation.LicketRootContainer;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.context.annotation.Import;
 
 @Configuration
-@Import(SemanticUIModuleConfiguration.class)
+@Import(SemanticUIPluginConfiguration.class)
 public class LicketConfiguration {
 
     @LicketRootContainer

diff --git a/licket-demo/src/main/java/org/licket/demo/view/ContactsPanel.java b/licket-demo/src/main/java/org/licket/demo/view/ContactsPanel.java
@@ -4,6 +4,8 @@
 import static org.licket.core.model.LicketModel.ofModelObject;
 import static org.licket.core.view.ComponentView.fromComponentContainerClass;
 import static org.licket.demo.model.Contacts.fromIterable;
+import static org.licket.semantic.component.modal.ModalSettingsBuilder.builder;
+
 import org.licket.core.model.LicketModel;
 import org.licket.core.module.application.LicketComponentModelReloader;
 import org.licket.core.module.application.LicketRemote;
@@ -12,6 +14,8 @@
 import org.licket.core.view.link.ComponentActionCallback;
 import org.licket.demo.model.Contacts;
 import org.licket.demo.service.ContactsService;
+import org.licket.semantic.component.modal.AbstractSemanticUIModal;
+import org.licket.semantic.component.modal.ModalSettingsBuilder;
 import org.springframework.beans.factory.annotation.Autowired;
 
 /**
@@ -25,19 +29,29 @@ public class ContactsPanel extends AbstractLicketContainer<Contacts> {
     @Autowired
     private LicketRemote remoteCommunication;
 
+    private LicketComponentModelReloader modelReloader;
+    private AbstractSemanticUIModal modal;
+
     public ContactsPanel(String id, LicketComponentModelReloader modelReloader) {
         super(id, Contacts.class, emptyModel(), fromComponentContainerClass(ContactsPanel.class), modelReloader);
+        this.modelReloader = modelReloader;
     }
 
     @Override
     protected void onInitializeContainer() {
-        add(new AddContactForm("add-contact-form", contactsService, remoteCommunication, modelReloader) {
+        add(modal = new AbstractSemanticUIModal("form-modal", builder().build(), modelReloader) {
             @Override
-            protected void onAfterSubmit(ComponentActionCallback componentActionCallback) {
-                reloadList();
-                componentActionCallback.reload(ContactsPanel.this);
+            protected void onInitializeContainer() {
+                add(new AddContactForm("add-contact-form", contactsService, remoteCommunication, modelReloader) {
+                    @Override
+                    protected void onAfterSubmit(ComponentActionCallback componentActionCallback) {
+                        reloadList();
+                        componentActionCallback.reload(ContactsPanel.this);
+                    }
+                });
             }
         });
+
         add(new ContactsList("contact", new LicketModel("contacts"), modelReloader));
         add(new AbstractLicketActionLink("reload", remoteCommunication, modelReloader) {
 

diff --git a/licket-demo/src/main/resources/org/licket/demo/view/ContactsAppRoot.html b/licket-demo/src/main/resources/org/licket/demo/view/ContactsAppRoot.html
@@ -8,23 +8,25 @@
             <h1 class="ui center aligned header">Contacts list</h1>
 
             <div class="ui container" lick:id="contacts-panel">
-                <div class="ui form" lick:id="add-contact-form">
-                    <div class="two fields">
-                        <div class="field">
-                            <label>Name</label>
-                            <input type="text" placeholder="Full Name" lick:id="name"/>
-                        </div>
+                <ui-modal lick:id="form-modal">
+                    <div class="ui form" lick:id="add-contact-form">
+                        <div class="two fields">
+                            <div class="field">
+                                <label>Name</label>
+                                <input type="text" placeholder="Full Name" lick:id="name"/>
+                            </div>
 
-                        <div class="field">
-                            <label>Description</label>
-                            <input type="text" placeholder="Some description" lick:id="description"/>
+                            <div class="field">
+                                <label>Description</label>
+                                <input type="text" placeholder="Some description" lick:id="description"/>
+                            </div>
                         </div>
-                    </div>
 
-                    <div class="ui submit button" lick:id="add">
-                        Add one
+                        <div class="ui submit button" lick:id="add">
+                            Add one
+                        </div>
                     </div>
-                </div>
+                </ui-modal>
 
                 <div class="ui relaxed divided items">
                     <div class="item" lick:id="contact">

diff --git a/...ain/java/org/licket/core/module/application/resource/ApplicationModulePluginResource.java b/...ain/java/org/licket/core/module/application/resource/ApplicationModulePluginResource.java
@@ -4,12 +4,12 @@
 import org.licket.core.resource.HeadParticipatingResource;
 import org.licket.core.resource.javascript.AbstractJavascriptDynamicResource;
 import org.licket.core.view.hippo.vue.extend.VueClass;
+import org.licket.core.view.hippo.vue.extend.VueExtendMethodsDecorator;
 import org.licket.framework.hippo.BlockBuilder;
 import org.licket.framework.hippo.FunctionNodeBuilder;
 import org.licket.framework.hippo.ObjectLiteralBuilder;
 import org.springframework.beans.factory.annotation.Autowired;
 
-import static org.licket.core.view.hippo.vue.extend.VueExtendMethodsDecorator.fromClass;
 import static org.licket.core.view.hippo.vue.extend.VuePropertiesDecorator.fromVueClassProperties;
 import static org.licket.framework.hippo.AssignmentBuilder.assignment;
 import static org.licket.framework.hippo.BlockBuilder.block;
@@ -86,6 +86,6 @@ private ObjectLiteralBuilder services() {
     }
 
     private ObjectLiteralBuilder serviceMethods(VueClass service) {
-        return fromClass(service).decorate(objectLiteral());
+        return VueExtendMethodsDecorator.fromClass(service).decorate(objectLiteral());
     }
 }
diff --git a/licket-framework/src/main/java/org/licket/core/view/AbstractLicketComponent.java b/licket-framework/src/main/java/org/licket/core/view/AbstractLicketComponent.java
@@ -150,6 +150,6 @@ protected void onRender(ComponentRenderingContext renderingContext) {}
 
     @Override
     public void traverseDown(Predicate<LicketComponent<?>> componentConsumer) {
-        // do nothing by default
+        // do nothing by default but some components could expose some additional internals
     }
 }
diff --git a/licket-framework/src/main/java/org/licket/core/view/hippo/vue/annotation/OnVueMounted.java b/licket-framework/src/main/java/org/licket/core/view/hippo/vue/annotation/OnVueMounted.java
@@ -0,0 +1,15 @@
+package org.licket.core.view.hippo.vue.annotation;
+
+import static java.lang.annotation.ElementType.METHOD;
+import static java.lang.annotation.RetentionPolicy.RUNTIME;
+
+import java.lang.annotation.Retention;
+import java.lang.annotation.Target;
+
+/**
+ * @author activey
+ */
+@Target(METHOD)
+@Retention(RUNTIME)
+public @interface OnVueMounted {
+}
diff --git a/...-framework/src/main/java/org/licket/core/view/hippo/vue/extend/OnVueCreatedDecorator.java b/...-framework/src/main/java/org/licket/core/view/hippo/vue/extend/OnVueCreatedDecorator.java
@@ -5,8 +5,6 @@
 import static java.util.Optional.empty;
 import static java.util.Optional.ofNullable;
 import static org.joor.Reflect.on;
-import static org.licket.framework.hippo.ExpressionStatementBuilder.expressionStatement;
-import static org.licket.framework.hippo.PropertyNameBuilder.property;
 import java.lang.reflect.Method;
 import java.util.Optional;
 

diff --git a/...mantic/SemanticUIModuleConfiguration.java → ...mantic/SemanticUIPluginConfiguration.java b/...mantic/SemanticUIModuleConfiguration.java → ...mantic/SemanticUIPluginConfiguration.java
@@ -16,10 +16,10 @@
  * @author activey
  */
 @Configuration
-public class SemanticUIModuleConfiguration {
+public class SemanticUIPluginConfiguration {
 
     @Bean
-    public VuePlugin semanticModule() {
+    public VuePlugin semanticPlugin() {
         return new SemanticUIPlugin();
     }
 

diff --git a/...semanticui/src/main/java/org/licket/semantic/component/modal/AbstractSemanticUIModal.java b/...semanticui/src/main/java/org/licket/semantic/component/modal/AbstractSemanticUIModal.java
@@ -0,0 +1,33 @@
+package org.licket.semantic.component.modal;
+
+import org.licket.core.module.application.LicketComponentModelReloader;
+import org.licket.core.view.container.AbstractLicketContainer;
+import org.licket.core.view.hippo.vue.annotation.VueComponentFunction;
+import org.licket.framework.hippo.BlockBuilder;
+
+import static org.licket.core.model.LicketModel.ofModelObject;
+import static org.licket.core.view.ComponentView.fromComponentContainerClass;
+import static org.licket.framework.hippo.ExpressionStatementBuilder.expressionStatement;
+import static org.licket.framework.hippo.FunctionCallBuilder.functionCall;
+
+/**
+ * @author grabslu
+ */
+public abstract class AbstractSemanticUIModal extends AbstractLicketContainer<ModalSettings> {
+
+  public AbstractSemanticUIModal(String id, ModalSettings modalSettings,
+      LicketComponentModelReloader modelReloader) {
+    super(id, ModalSettings.class, ofModelObject(modalSettings),
+        fromComponentContainerClass(AbstractSemanticUIModal.class), modelReloader);
+  }
+
+  @VueComponentFunction
+  public final void show(BlockBuilder body) {
+    body.appendStatement(expressionStatement(functionCall()));
+  }
+
+  @VueComponentFunction
+  public final void hide(BlockBuilder body) {
+    body.appendStatement(expressionStatement(functionCall()));
+  }
+}
diff --git a/...et-module-semanticui/src/main/java/org/licket/semantic/component/modal/ModalSettings.java b/...et-module-semanticui/src/main/java/org/licket/semantic/component/modal/ModalSettings.java
@@ -0,0 +1,7 @@
+package org.licket.semantic.component.modal;
+
+/**
+ * @author grabslu
+ */
+public class ModalSettings {
+}
diff --git a/...le-semanticui/src/main/java/org/licket/semantic/component/modal/ModalSettingsBuilder.java b/...le-semanticui/src/main/java/org/licket/semantic/component/modal/ModalSettingsBuilder.java
@@ -0,0 +1,17 @@
+package org.licket.semantic.component.modal;
+
+/**
+ * @author grabslu
+ */
+public class ModalSettingsBuilder {
+
+    public final ModalSettings build() {
+        return new ModalSettings();
+    }
+
+    private ModalSettingsBuilder() {}
+
+    public static ModalSettingsBuilder builder() {
+        return new ModalSettingsBuilder();
+    }
+}
diff --git a/...ticui/src/main/resources/org/licket/semantic/component/modal/AbstractSemanticUIModal.html b/...ticui/src/main/resources/org/licket/semantic/component/modal/AbstractSemanticUIModal.html
@@ -0,0 +1,13 @@
+<div class="ui modal">
+    <div class="header">
+        <slot name="header">
+            Modal header
+        </slot>
+    </div>
+    <div class="content">
+        <slot>placeholder</slot>
+    </div>
+    <div class="actions" v-if="showActions">
+        <slot name="actions"></slot>
+    </div>
+</div>