Initial commit

todo-web-vuejs/.babelrc

+{
+	"presets": ["es2015", "liferay-project"]
+}

todo-web-vuejs/.npmbundlerrc

+{
+    "preset": "liferay-npm-bundler-preset-vue"
+}

todo-web-vuejs/bnd.bnd

+Bundle-Name: todo-web-vuejs
+Bundle-SymbolicName: fr.ippon.demo
+Bundle-Version: 1.0.0
+Export-Package: fr.ippon.demo.constants
+Include-Resource: package.json
\ No newline at end of file

todo-web-vuejs/build.gradle

+dependencies {
+	compileOnly group: "com.liferay.portal", name: "com.liferay.portal.kernel", version: "2.0.0"
+	compileOnly group: "com.liferay.portal", name: "com.liferay.util.taglib", version: "2.0.0"
+	compileOnly group: "javax.portlet", name: "portlet-api", version: "2.0"
+	compileOnly group: "javax.servlet", name: "javax.servlet-api", version: "3.0.1"
+	compileOnly group: "jstl", name: "jstl", version: "1.2"
+	compileOnly group: "org.osgi", name: "osgi.cmpn", version: "6.0.0"
+}

todo-web-vuejs/package.json

+{
+	"dependencies": {
+		"vue": "2.5.16",
+		"vue-class-component": "^6.0.0",
+		"vue-property-decorator": "^6.0.0",
+		"vue-router": "^3.0.1"
+	},
+	"devDependencies": {
+		"babel-cli": "6.26.0",
+		"babel-preset-es2015": "6.24.1",
+		"css-loader": "^0.28.10",
+		"node-sass": "^4.7.2",
+		"sass-loader": "^6.0.6",
+		"style-loader": "^0.20.2",
+		"ts-loader": "4.0.0",
+		"typescript": "^2.3.2",
+		"webpack-cli": "2.0.15",
+		"vue-loader": "14.2.1",
+		"vue-template-compiler" : "2.5.16"
+	},
+	"name": "todo-web-vuejs",
+	"scripts": {
+		"build": "babel --source-maps -d build/resources/main/META-INF/resources src/main/resources/META-INF/resources",
+		"postinstall": "webpack"
+	},
+	"version": "1.0.0"
+}
\ No newline at end of file

todo-web-vuejs/src/main/java/fr/ippon/demo/constants/TodoWebVuejsPortletKeys.java

+package fr.ippon.demo.constants;
+
+/**
+ * @author arnaud
+ */
+public class TodoWebVuejsPortletKeys {
+
+	public static final String TodoWebVuejs = "TodoWebVuejs";
+
+}
\ No newline at end of file

todo-web-vuejs/src/main/java/fr/ippon/demo/portlet/TodoWebVuejsPortlet.java

+package fr.ippon.demo.portlet;
+
+import fr.ippon.demo.constants.TodoWebVuejsPortletKeys;
+
+import com.liferay.portal.kernel.portlet.bridges.mvc.MVCPortlet;
+
+import javax.portlet.Portlet;
+
+import org.osgi.service.component.annotations.Component;
+
+/**
+ * @author arnaud
+ */
+@Component(
+	immediate = true,
+	property = {
+		"com.liferay.portlet.display-category=category.sample",
+		"com.liferay.portlet.instanceable=true",
+		"javax.portlet.display-name=todo-web-vuejs Portlet",
+		"javax.portlet.init-param.template-path=/",
+		"javax.portlet.init-param.view-template=/view.jsp",
+		"javax.portlet.name=" + TodoWebVuejsPortletKeys.TodoWebVuejs,
+		"javax.portlet.resource-bundle=content.Language",
+		"javax.portlet.security-role-ref=power-user,user"
+	},
+	service = Portlet.class
+)
+public class TodoWebVuejsPortlet extends MVCPortlet {
+}
\ No newline at end of file

todo-web-vuejs/src/main/resources/META-INF/resources/css/.sass-cache/main.css

+.todo-app {
+  border-radius: 4px;
+  border: 1px solid #d93a87; }
+  .todo-app input {
+    background: #d93a87;
+    border-radius: 4px 4px 0 0;
+    border-width: 0;
+    box-sizing: border-box;
+    color: #ffffff;
+    font-size: 20px;
+    padding: 12px;
+    width: 100%; }
+  .todo-app ol {
+    border-top: 1px solid #d93a87;
+    margin: 0; }
+  .todo-app li {
+    color: #212121;
+    font-size: 20px;
+    padding: 12px;
+    cursor: pointer; }
+    .todo-app li span {
+      display: none; }
+    .todo-app li.completed {
+      color: #757575;
+      font-style: italic;
+      position: relative;
+      text-decoration: line-through; }
+      .todo-app li.completed span {
+        float: right;
+        display: inline;
+        text-decoration: none; }
+
+::-webkit-input-placeholder {
+  /* Chrome */
+  color: #ffffff;
+  font-style: italic; }
+
+:-ms-input-placeholder {
+  /* IE 10+ */
+  color: #ffffff;
+  font-style: italic; }
+
+::-moz-placeholder {
+  /* Firefox 19+ */
+  color: #ffffff;
+  font-style: italic;
+  opacity: 1; }
+
+:-moz-placeholder {
+  /* Firefox 4 - 18 */
+  color: #ffffff;
+  font-style: italic;
+  opacity: 1; }

todo-web-vuejs/src/main/resources/META-INF/resources/css/.sass-cache/main_rtl.css

+.todo-app{border-radius:4px;border:1px solid #d93a87}.todo-app input{background:#d93a87;border-radius:4px 4px 0 0;border-width:0;box-sizing:border-box;color:#fff;font-size:20px;padding:12px;width:100%}.todo-app ol{border-top:1px solid #d93a87;margin:0}.todo-app li{color:#212121;font-size:20px;padding:12px;cursor:pointer}.todo-app li span{display:none}.todo-app li.completed{color:#757575;font-style:italic;position:relative;text-decoration:line-through}.todo-app li.completed span{float:left;display:inline;text-decoration:none}::-webkit-input-placeholder{color:#fff;font-style:italic}:-ms-input-placeholder{color:#fff;font-style:italic}::-moz-placeholder{color:#fff;font-style:italic;opacity:1}:-moz-placeholder{color:#fff;font-style:italic;opacity:1}
\ No newline at end of file

todo-web-vuejs/src/main/resources/META-INF/resources/css/main.scss

+// Colors
+// -------------------------------
+$bg-color: #d93a87;
+$title-color: #ffffff;
+$entry-color: #212121;
+$entry-completed-color: #757575;
+
+.todo-app{
+
+    border-radius: 4px;
+    border: 1px solid $bg-color;
+
+    input {
+        background: $bg-color;
+        border-radius: 4px 4px 0 0;
+        border-width: 0;
+        box-sizing: border-box;
+        color: $title-color;
+        font-size: 20px;
+        padding: 12px;
+        width: 100%;
+    }
+
+    ol {
+    	border-top: 1px solid $bg-color;
+    	margin: 0;
+    }
+
+    li {
+    	color: $entry-color;
+    	font-size: 20px;
+    	padding: 12px;
+    	cursor: pointer;
+
+    	span {
+        	display: none;
+        }
+
+        &.completed {
+         	color: $entry-completed-color;
+         	font-style: italic;
+         	position: relative;
+         	text-decoration: line-through;
+
+         	span {
+            	float: right;
+            	display: inline;
+            	text-decoration: none;
+            }
+         }
+    }
+
+}
+
+::-webkit-input-placeholder { /* Chrome */
+  color: $title-color;
+  font-style: italic;
+}
+:-ms-input-placeholder { /* IE 10+ */
+  color: $title-color;
+  font-style: italic;
+}
+::-moz-placeholder { /* Firefox 19+ */
+  color: $title-color;
+  font-style: italic;
+  opacity: 1;
+}
+:-moz-placeholder { /* Firefox 4 - 18 */
+  color: $title-color;
+  font-style: italic;
+  opacity: 1;
+}
\ No newline at end of file

todo-web-vuejs/src/main/resources/META-INF/resources/init.jsp

+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
+
+<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
+
+<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %><%@
+taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %><%@
+taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %><%@
+taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
+
+<liferay-theme:defineObjects />
+
+<portlet:defineObjects />
\ No newline at end of file

todo-web-vuejs/src/main/resources/META-INF/resources/js/components/TodoApp.vue

+<template>
+    <div class="todo-app">
+        <input
+            v-on:keypress="handleInputSubmit"
+            placeholder="Add a to-do"
+            v-model="inputValue"
+        />
+
+        <ol>
+            <li v-for="(item, i) in items"
+                v-bind:class="[item.done ? 'completed' : '']"
+                v-bind:key="i"
+                v-on:click="completeItem(i)"
+            >
+                {{ item.description }}
+                <span>Completed</span>
+            </li>
+        </ol>
+    </div>
+</template>
+
+<script lang="ts">
+    import Vue from "vue";
+
+    declare var Liferay: any;
+
+    export default Vue.extend({
+        data() {
+            return {
+                items: [] as any[],
+                inputValue: ''
+            }
+        },
+        methods: {
+            completeItem(index: number) {
+                this.items.map(
+                    (item: any, i: number) => {
+                        if (i === index) {
+                            item.done = !item.done;
+
+                            Liferay.Service(
+                                '/todo.todo/set-done',
+                                {
+                                    done: item.done,
+                                    id: item.todoId
+                                }
+                            );
+                        }
+                    }
+                );
+            }
+            ,
+            handleInputSubmit(event: any) {
+                if (event.key === 'Enter') {
+                    Liferay.Service(
+                        '/todo.todo/add-todo',
+                        {
+                            description: event.target.value
+                        },
+                        (item: any) => {
+                            this.inputValue = '';
+                            this.items = [...this.items, item]
+                        }
+                    );
+                }
+            }
+        },
+        mounted() {
+            Liferay.Service(
+                '/todo.todo/get-todos',
+                (items: Array<any>) => {
+                    this.items = items
+                }
+            )
+        }
+    });
+</script>
+
+<style lang="scss" scoped>
+    @import '../../css/main.scss'
+</style>

todo-web-vuejs/src/main/resources/META-INF/resources/js/index.ts

+
+import Vue from "vue";
+import TodoApp from "./components/TodoApp.vue";
+
+const main = (elementId : any) => {
+    new Vue({
+        el: `#${elementId}`,
+        template: `
+            <div>
+                <h1>My beautiful ToDo App</h1>
+                <todo-app />
+            </div>
+        `,
+        components: {
+            TodoApp
+        }
+    });
+};
+
+export { main };
\ No newline at end of file

todo-web-vuejs/src/main/resources/META-INF/resources/view.jsp

+<%@ include file="/init.jsp" %>
+
+<script src="/o/todo-web-vuejs-1.0.0/dist/build.js"></script>
+
+<div id="<portlet:namespace />">{{text}}</div>
+
+<script>
+    window.onload = function () {
+        entryPoint.main('<portlet:namespace />');
+    };
+</script>

todo-web-vuejs/src/main/resources/content/Language.properties

+javax.portlet.display-name.todo-web-vuejs=todo-web-vuejs npm Vue.js
+javax.portlet.keywords.todo-web-vuejs=todo-web-vuejs,npm
+javax.portlet.short-title.todo-web-vuejs=todo-web-vuejs npm Vue.js
+javax.portlet.title.todo-web-vuejs=todo-web-vuejs npm Vue.js Portlet
+todo-web-vuejs.caption=Hello from todo-web-vuejs npm Vue.js!
\ No newline at end of file

todo-web-vuejs/tsconfig.json

+{
+  "compilerOptions": {
+    "outDir": "./build/resources/main/META-INF/resources/dist/",
+    "sourceMap": true,
+    "strict": true,
+    "module": "es2015",
+    "moduleResolution": "node",
+    "target": "es5",
+    "experimentalDecorators": true
+  },
+  "include": [
+    "./src/main/resources/META-INF/resources/js/**/*"
+  ]
+}
\ No newline at end of file

todo-web-vuejs/webpack.config.js

+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+    entry: './src/main/resources/META-INF/resources/js/index.ts',
+    output: {
+        path: path.resolve(__dirname, './build/resources/main/META-INF/resources/dist/'),
+        filename: 'build.js',
+        libraryTarget: 'var',
+        library: 'entryPoint'
+    },
+    module: {
+	    // Ici nous mettrons la configuration de nos loaders
+	    rules: [
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader'
+            },
+            {
+                test: /\.(ts|tsx)$/,
+                loader: 'ts-loader',
+                exclude: /node_modules/,
+                options: {
+                    appendTsSuffixTo: [/\.vue$/],
+                }
+            },
+            {
+                test: /\.scss$/,
+                use: [{
+                    loader: "style-loader" // creates style nodes from JS strings
+                }, {
+                    loader: "css-loader" // translates CSS into CommonJS
+                }, {
+                    loader: "sass-loader" // compiles Sass to CSS
+                }]
+            }
+        ]
+    },
+    resolve: {
+        alias: {
+          'vue$': 'vue/dist/vue.esm.js'
+        }
+    }
+}