Waltz Svelte Component now cascades destroy events from angular to sv…

…elte

finos#7000

waltz-ng/client/playpen/1/Child.svelte

@@ -0,0 +1,11 @@
+<script>
+    import {onDestroy, onMount} from "svelte";
+
+    onMount(() => console.log("child onMount"));
+    onDestroy(() => console.log("child onDestroy"));
+
+</script>
+
+<h1>
+    Hello child
+</h1>

waltz-ng/client/playpen/1/Parent.svelte

@@ -0,0 +1,25 @@
+<script>
+
+    import {onDestroy, onMount} from "svelte";
+    import Child from "./Child.svelte";
+
+    onMount(() => console.log("parent onMount"));
+    onDestroy(() => console.log("parent onDestroy"));
+
+    let show = true;
+
+    export let counter = 0;
+
+    $: d = counter * counter;
+
+</script>
+
+<h1>Hello Parent: counter is {counter}, sq: {d}</h1>
+
+
+<button on:click={() => show = !show}>Toggle Child</button>
+
+{#if show}
+    <Child/>
+{/if}
+

waltz-ng/client/playpen/1/Unaware.svelte

@@ -0,0 +1,12 @@
+<script>
+    import {onDestroy, onMount} from "svelte";
+
+    export let counter = 0;
+
+    onMount(() => console.log("unaware onMount"));
+    onDestroy(() => console.log("unaware onDestroy"));
+</script>
+
+<h1>Hello Unaware: counter is {counter}</h1>
+
+

waltz-ng/client/playpen/1/lifecycle.js

@@ -0,0 +1,39 @@
+import _ from "lodash";
+import {isRemoved} from "../../common/entity-utils";
+import {initialiseData} from "../../common";
+import {columnDef, withWidth} from "../../physical-flow/physical-flow-table-utilities";
+import template from "../../physical-specifications/components/physical-data-section/physical-data-section.html";
+
+const bindings = {
+
+};
+
+
+const initialState = {
+
+};
+
+
+function controller() {
+
+    const vm = initialiseData(this, initialState);
+
+    vm.$onInit = () => {
+        console.log("lifecycle onInit");
+    }
+    vm.$onDestroy = () => {
+        console.log("lifecycle onDestroy");
+    }
+}
+
+controller.$inject = ["$scope"];
+
+
+const component = {
+    template,
+    bindings,
+    controller
+};
+
+
+export default component;

waltz-ng/client/playpen/1/playpen1.html

@@ -17,7 +17,6 @@
   -->
 
 <div>
-
     <waltz-page-header name="Playpen"
                        small="1"
                        icon="rocket">
@@ -28,11 +27,19 @@
     </waltz-page-header>
 
 
-    <div class="row">
-        <div class="col-md-3">
-            <waltz-svelte-component component="$ctrl.DataTypeTreeSelector" selection-filter="$ctrl.filter">
+    <div class="row" >
+        <div class="col-md-12">
+            <button ng-click="$ctrl.visible = !$ctrl.visible">Toggle Both</button>
+            <button ng-click="$ctrl.counter = $ctrl.counter + 1">Inc {{$ctrl.counter}}</button>
+            <div ng-if="$ctrl.visible">
+                <waltz-svelte-component component="$ctrl.Unaware" u="$ctrl.u" counter="$ctrl.counter">
+
+                </waltz-svelte-component>
+                <waltz-svelte-component component="$ctrl.Parent" p="$ctrl.p"  counter="$ctrl.counter">
+
+                </waltz-svelte-component>
+            </div>
 
-            </waltz-svelte-component>
         </div>
     </div>
 

waltz-ng/client/playpen/1/playpen1.js

@@ -19,11 +19,17 @@
 
 import template from "./playpen1.html";
 import {initialiseData} from "../../common";
-import {CORE_API} from "../../common/services/core-api-utils";
-import {directLineage} from "../../common/hierarchy-utils";
+import Parent from "./Parent.svelte";
+import Unaware from "./Unaware.svelte";
 
 const initData = {
-    taxonomy: []
+    Parent,
+    Unaware,
+    p: "ParentParam",
+    u: "UnawareParam",
+    visible: true,
+    counter: 1
+
 };
 
 
@@ -34,23 +40,7 @@ function controller($q,
 
     vm.$onInit = () => {
 
-        serviceBroker
-            .loadViewData(
-                CORE_API.MeasurableStore.findAll,
-                [])
-            .then(r => {
-                vm.taxonomy = _.filter(r.data, m => m.categoryId === 6);
-
-                console.log({
-                    taxonomy: vm.taxonomy,
-                    sliver: directLineage(vm.taxonomy, 117)
-                });
-            });
-
     }
-
-
-
 }
 
 controller.$inject = ["$q", "ServiceBroker", "UserService"];