From 769d2330cc8b9395470153a0eb7ccabbbe4fc142 Mon Sep 17 00:00:00 2001
From: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>
Date: Fri, 18 Oct 2024 11:14:29 +0000
Subject: [PATCH] Bug 37911: (follow-up) Remove example islands for core
 submission

Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de>
---
 .../prog/en/modules/intranet-main.tt          |  37 +-----
 .../vue/components/Islands/DialogIsland.vue   | 107 ------------------
 .../vue/components/Islands/HelloIslands.vue   |  56 ---------
 .../js/vue/components/Islands/HelloWorld.vue  |  18 ---
 .../prog/js/vue/modules/islands.ts            |  64 ++++-------
 .../intranet-tmpl/prog/js/vue/stores/main.js  |   1 -
 .../prog/js/vue/stores/navigation.js          |   1 -
 7 files changed, 21 insertions(+), 263 deletions(-)
 delete mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/DialogIsland.vue
 delete mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloIslands.vue
 delete mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloWorld.vue

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt
index 9d1b659279..fff114fb1f 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt
@@ -301,51 +301,16 @@
             </div> <!-- /.col-sm-9 -->
 
         </div> <!-- /.row -->
-        <div class="row w-25 m-auto p-4 border border-4 border-warning br-4 rounded text-center">
-            <h1>🚧 Static Page with Vue Components 🚧</h1>
-
-            <hello-islands message="This is an attribute on the web component, that's bound to a prop in the Vue component. Cool, right?" color="dodgerblue"></hello-islands>
-        </div> <!-- /.row -->
-        <div class="row w-25 m-auto p-4 border border-4 border-warning br-5 rounded text-center mt-4">
-            <p>
-                <span>Uncomment me in <span class="font-monospace">intranet-main.tt</span> 👇</span><br>
-                <span class="font-monospace text-danger">-&lt;!-- &lt;hello-world&gt;&lt;/hello-world&gt; --&gt;</span><br>
-                <span class="font-monospace text-success">+&lt;hello-world&gt;&lt;/hello-world&gt;</span>
-            </p>
-            <!-- <hello-world></hello-world> -->
-        </div> <!-- /.row -->
-
-        <div class="row w-25 m-auto p-4 border border-4 border-warning br-5 rounded text-center mt-4">
-            <dialog-island id="surprise"></dialog-island>
-            <button id="surprise-button" class="btn btn-primary">Click me for a surprise!</button>
-        </div>
 
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'calendar.inc' %]
-    [% Asset.js("js/vue/dist/islands.js", "init" => "1") | $raw %]
-    <!--
-    [% SET islands = Asset.js("js/vue/dist/islands.esm.js").match('(src="([^"]+)")').1 %]
-    <script src="[% islands %]" type="module"></script>
-    <script type="module">
-        import { hydrate } from "[% islands %]";
-        hydrate();
-    </script>
-    -->
+
     <script>
         var MSG_CONFIRM_DELETE = _("Are you sure you want to delete this news item? This cannot be undone.");
         $(document).ready(function(){
             $(".news_delete").on("click", function(){
                 return confirmDelete(MSG_CONFIRM_DELETE);
             });
-
-            setTimeout(() => {
-                const [firstHelloIslandsElement] = document.getElementsByTagName("hello-islands");
-                firstHelloIslandsElement.message = 'This is a delayed update to the message attribute of the web commponent.'
-            }, 2000);
-
-            $("#surprise-button").on("click", () => {
-                $("#surprise").attr("warning", `<span>Yes, this is <span class="font-monospace">Dialog.vue</span> (in a wrapper component)!</span><span class="d-none">${Math.random()}</span>`);
-            });
         });
     </script>
 [% END %]
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/DialogIsland.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/DialogIsland.vue
deleted file mode 100644
index 3598646303..0000000000
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/DialogIsland.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-    <Dialog />
-</template>
-
-<script>
-import { inject, watch } from "vue"
-import Dialog from "../Dialog.vue"
-
-export default {
-    props: {
-        message: {
-            type: String,
-            default: null,
-        },
-        error: {
-            type: String,
-            default: null,
-        },
-        warning: {
-            type: String,
-            default: null,
-        },
-        confirmation: {
-            type: Object,
-            default: () => null,
-        },
-        isSubmitting: {
-            type: Boolean,
-            default: false,
-        },
-        isLoading: {
-            type: Boolean,
-            default: false,
-        },
-        acceptCallback: {
-            type: Function,
-            default: null,
-        },
-    },
-    setup(props) {
-        const mainStore = inject("mainStore")
-        const {
-            setMessage,
-            setError,
-            setWarning,
-            setConfirmation,
-            setSubmitting,
-            setLoading,
-            setAcceptCallback,
-        } = mainStore
-
-        watch(
-            () => props.message,
-            newVal => {
-                setMessage(newVal)
-            }
-        )
-
-        watch(
-            () => props.error,
-            newVal => {
-                setError(newVal)
-            }
-        )
-
-        watch(
-            () => props.warning,
-            newVal => {
-                setWarning(newVal)
-            }
-        )
-
-        watch(
-            () => props.confirmation,
-            newVal => {
-                setConfirmation(newVal)
-            }
-        )
-
-        watch(
-            () => props.isSubmitting,
-            newVal => {
-                setSubmitting(newVal)
-            }
-        )
-
-        watch(
-            () => props.isLoading,
-            newVal => {
-                setLoading(newVal)
-            }
-        )
-
-        watch(
-            () => props.acceptCallback,
-            newVal => {
-                setAcceptCallback(newVal)
-            }
-        )
-
-        return {}
-    },
-    components: {
-        Dialog,
-    },
-}
-</script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloIslands.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloIslands.vue
deleted file mode 100644
index ef83b0dbe0..0000000000
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloIslands.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-    <h2 :style="{ color }">Hello from Islands!</h2>
-    <p>This component is rendered as an island in a static HTML page.</p>
-
-    <!-- Display message prop -->
-    <p v-if="message">{{ message }}</p>
-
-    <!-- Display store data -->
-    <p v-if="stringFromStore">{{ stringFromStore }}</p>
-    <p v-if="anotherStoreString">{{ anotherStoreString }}</p>
-
-    <!-- Reactive counter example -->
-    <p>Counter: {{ count }}</p>
-    <!-- Koha's bootstrap works in here! -->
-    <button @click="incrementCounter" class="btn btn-primary">
-        Increment Counter
-    </button>
-</template>
-
-<script>
-import { ref } from "vue"
-import { inject } from "vue"
-
-export default {
-    props: {
-        message: {
-            type: String,
-            default: "No content",
-        },
-        color: {
-            type: String,
-            default: "crimson",
-        },
-    },
-    setup() {
-        const mainStore = inject("mainStore")
-        const { stringFromStore } = mainStore
-        const navigationStore = inject("navigationStore")
-        const { anotherStoreString } = navigationStore
-        return {
-            stringFromStore,
-            anotherStoreString,
-        }
-    },
-    data() {
-        return {
-            count: 0,
-        }
-    },
-    methods: {
-        incrementCounter() {
-            this.count++
-        },
-    },
-}
-</script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloWorld.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloWorld.vue
deleted file mode 100644
index 51b5fbc732..0000000000
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloWorld.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<!--
-Say Hello World with Vue!
--->
-
-<script setup>
-import { ref } from "vue"
-
-// A "ref" is a reactive data source that stores a value.
-// Technically, we don't need to wrap the string with ref()
-// in order to display it, but we will see in the next
-// example why it is needed if we ever intend to change
-// the value.
-const message = ref("Hello World!")
-</script>
-
-<template>
-    <h1>{{ message }}</h1>
-</template>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts
index 9a96915af8..af004592a2 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts
@@ -19,52 +19,28 @@ type WebComponentDynamicImport = {
 /**
  * A registry for Vue components.
  * @type {Map<string, WebComponentDynamicImport>}
+ * @property {string} key - The name of the component.
+ * @property {WebComponentDynamicImport} value - The configuration for the component. Includes the import function and optional configuration.
+ * @example
+ * //
+ * [
+ *     "hello-islands",
+ *     {
+ *         importFn: async () => {
+ *             const module = await import(
+ *                 /* webpackChunkName: "hello-islands" */
+/**                "../components/Islands/HelloIslands.vue"
+ *             );
+ *             return module.default;
+ *         },
+ *         config: {
+ *             stores: ["mainStore", "navigationStore"],
+ *         },
+ *     },
+ * ],
  */
 export const componentRegistry: Map<string, WebComponentDynamicImport> =
-    new Map([
-        [
-            "hello-islands",
-            {
-                importFn: async () => {
-                    const module = await import(
-                        /* webpackChunkName: "hello-islands" */
-                        "../components/Islands/HelloIslands.vue"
-                    );
-                    return module.default;
-                },
-                config: {
-                    stores: ["mainStore", "navigationStore"],
-                },
-            },
-        ],
-        [
-            "hello-world",
-            {
-                importFn: async () => {
-                    const module = await import(
-                        /* webpackChunkName: "hello-world" */
-                        "../components/Islands/HelloWorld.vue"
-                    );
-                    return module.default;
-                },
-            },
-        ],
-        [
-            "dialog-island",
-            {
-                importFn: async () => {
-                    const module = await import(
-                        /* webpackChunkName: "vue-dialog" */
-                        "../components/Islands/DialogIsland.vue"
-                    );
-                    return module.default;
-                },
-                config: {
-                    stores: ["mainStore"],
-                },
-            },
-        ],
-    ]);
+    new Map([]);
 
 /**
  * Hydrates custom elements by scanning the document and loading only necessary components.
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
index b9317d7972..7a0c9e6516 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
@@ -12,7 +12,6 @@ export const useMainStore = defineStore("main", {
         displayed_already: false,
         _is_submitting: false,
         _is_loading: false,
-        stringFromStore: "Hello from main store",
     }),
     actions: {
         setMessage(message, displayed = false) {
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js
index e76802b7e2..1e3ecb58b3 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js
@@ -11,7 +11,6 @@ export const useNavigationStore = defineStore("navigation", {
         },
         current: null,
         params: {},
-        anotherStoreString: "Hello from nav store",
     }),
     actions: {
         setRoutes(routesDef) {
-- 
2.47.0