start module output

zero.Web.UI/App/components/modules/modules.vue

@@ -1,36 +1,92 @@
 <template>
   <div class="ui-modules-inner">
-    <ui-modules-select v-if="canAdd" />
+    <div class="ui-module-item" v-for="item in items">
+      <header class="ui-module-item-header"><i :class="getModule(item.moduleTypeAlias).icon"></i> {{getModule(item.moduleTypeAlias).name}}</header>
+    </div>
+    <ui-modules-select :types="moduleTypes" :value="value" v-if="canAdd" @selected="onSelected" />
   </div>
 </template>
 
 
 <script>
   import ModulesApi from 'zero/resources/modules.js';
+  import EditModuleOverlay from './edit-module';
+  import Overlay from 'zero/services/overlay.js';
+  import { find as _find } from 'underscore';
 
   export default {
     name: 'uiModules',
 
     props: {
-      value: [String, Object, Array],
+      value: {
+        type: Array,
+        default: () => []
+      },
       config: Object
     },
 
 
     data: () => ({
+      items: [],
       canAdd: true,
-      isSelecting: false,
       moduleTypes: []
     }),
 
 
+    watch: {
+      value(val)
+      {
+        this.setup(val);
+      }
+    },
+
+
+    created()
+    {
+      this.setup(this.value);
+
+      ModulesApi.getModuleTypes().then(res =>
+      {
+        this.moduleTypes = res;
+      });
+    },
+
+
     methods: {
 
-      start()
+      setup(value)
       {
-        this.isSelecting = true;
-      }
+        this.items = JSON.parse(JSON.stringify(value || []));
+      },
 
+
+      getModule(alias)
+      {
+        return _find(this.moduleTypes, x => x.alias == alias);
+      },
+
+
+      onSelected(module, isAdd)
+      {
+        return Overlay.open({
+          component: EditModuleOverlay,
+          display: 'editor',
+          module: module,
+          renderer: 'module.' + module.alias,
+          model: {},
+          width: 1100
+        }).then(value =>
+        {
+          this.items.push(value);
+          this.onChange();
+        });
+      },
+
+
+      onChange()
+      {
+        this.$emit('input', this.items);
+      }
     }
   }
 </script>
@@ -45,7 +101,7 @@
     margin-top: var(--padding);
   }
 
-  .ui-modules-start
+  .ui-modules-start, .ui-module-item
   {
     margin: 0;
     padding: var(--padding);
@@ -56,6 +112,17 @@
     justify-content: center;
   }
 
+  .ui-module-item
+  {
+    display: block;
+  }
+
+  .ui-module-item + .ui-module-item,
+  .ui-module-item + .ui-modules-start
+  {
+    margin-top: 3px;
+  }
+
   .ui-modules-start-button
   {
     color: var(--color-fg);