Merge pull request #18 from beekpr/FUL-23611

FUL-23611: Update with new API

Author: FlorianDr

home-screen-widget/profiles/README.md

@@ -59,28 +59,17 @@ python3 scripts/configure_home_screen.py --tenantUrl https://<tenant_url> --toke
 
 The following four steps are **required** for every widget to be shown on the home screen.
 
-1. [Define Widget ID](src/components/Widget.vue#L19)
+1. [Define Widget Type Name](src/components/Widget.vue#L17)
     ```javascript:title=home-screen-widget/profiles/src/components/Widget.vue
-    export const WIDGET_TYPE = 'profiles';
+    export const WIDGET_TYPE_NAME = 'profiles';
     ```
-2. [Register Widget Component](src/main.js#L9)
+2. [Register Widget Component](src/main.js#L6)
     ```javascript:title=home-screen-widget/profiles/src/main.js
-    BeekeeperHomeScreen.registerWidget(WIDGET_TYPE, component)
+    BeekeeperHomeScreen.registerVueWidget(WIDGET_TYPE_NAME, component)
     ```
-3. [Add widgetInstanceId Prop](src/components/Widget.vue#L38)
+3. [Trigger 'widget-loaded' Event](src/components/Widget.vue#L46)
     ```javascript:title=home-screen-widget/profiles/src/components/Widget.vue
-    props: {
-        widgetInstanceId: {
-            type: String,
-            required: true,
-        },
-        ...
-    },
-    ```
-4. [Trigger LOADED Event](src/components/Widget.vue#L71)
-    ```javascript:title=home-screen-widget/profiles/src/components/Widget.vue
-    import BeekeeperHomeScreen, { EventType } from '@beekeeper/home-screen-sdk';
-    BeekeeperHomeScreen.triggerEvent(EventType.LOADED, this.widgetInstanceId);
+    this.$emit('widget-loaded');
     ```
 
 ## Caveats with Webpack
@@ -89,7 +78,7 @@ As the Home Screen uses Webpack to bundle components, please take a look at [vue
 
 ## Common Pitfalls
 
-Make sure to update the ``WIDGET_TYPE`` in Widget.vue to the ``typeName`` returned by the API. Otherwise, your widget will not be loaded. 
+Make sure to update the ``WIDGET_TYPE_NAME`` in Widget.vue to the ``typeName`` returned by the API. Otherwise, your widget will not be loaded. 
 
 ## Limitations
 

home-screen-widget/profiles/src/components/Widget.vue

@@ -9,87 +9,58 @@
 </template>
 
 <script>
-import { createNamespacedHelpers } from 'vuex';
-import BeekeeperHomeScreen, { EventType } from '@beekeeper/home-screen-sdk';
+import { mapActions, mapState } from 'vuex';
 
 import ProfilesGrid from '~/components/ProfilesGrid.vue';
-import store from '~/store';
 
 /**
- * Step 1: Specify widget type
+ * Step 1: Specify widget type name
  *
  * In order for the home screen to be aware of the widget we need to register it. That's why we defined here
  * a unique string as widget type. We called it 'profiles' since this is the profiles widget.
  * See also the "Widget type" in the "Configuration" section on the developers portal
  * {@link https://developers.beekeeper.io/v2/welcome/home-screen}
  */
-export const WIDGET_TYPE = 'profiles';
+export const WIDGET_TYPE_NAME = 'profiles';
 export const PROFILE_LIMIT = 50;
 
-const { mapState, mapActions } = createNamespacedHelpers(WIDGET_TYPE);
-
 
 export default {
     components: {
         ProfilesGrid,
     },
-    /**
-     * Step 3: Add widgetInstanceId prop
-     *
-     * Once the widget is registered, the home screen will try to instantiate it and assign an instance id.
-     * This will be used by the home screen to manage all widgets and listen to events.
-     * In order for this to work, we therefore need a vue prop called 'widgetInstanceId'.
-     */
+    computed: {
+        ...mapState(['profiles', 'initialized']),
+    },
     props: {
-        widgetInstanceId: {
-            type: String,
-            required: true,
-        },
-
-        /**
-         * Step 7: Define customizable input props (Optional)
-         *
-         * Every widget can have input properties that can be customized by admins.
-         * In this example for different widget instances one might want to display more or fewer profiles.
-         * The default is now set to 50.
-         *
-         */
-        maxNumberOfDisplayedProfiles: {
-            type: Number,
-            required: false,
+        properties: {
+            type: Object,
             default() {
-                return PROFILE_LIMIT;
-            },
+                return {
+                   maxNumberOfDisplayedProfiles: 12, 
+                };
+            }
         },
     },
-    computed: {
-        ...mapState(['profiles', 'initialized']),
-    },
     watch: {
         /**
-         * Step 6: Trigger LOADED event
+         * Step 3: Trigger `widget-loaded` event
          *
          * Once the profiles are successfully loaded we notify the home screen by triggering an event
-         * that contains the event type and the widget instance id
          */
         initialized(newVal, oldVal) {
             if (newVal && newVal !== oldVal) {
-                BeekeeperHomeScreen.triggerEvent(EventType.LOADED, this.widgetInstanceId);
+                this.$emit('widget-loaded');
             }
         },
     },
-    beforeCreate() {
-        /**
-         * Step 4: Register widget store module (Optional: not needed for a static widget without store)
-         *
-         * In order for Vuex to be aware of this store, we need to register it upon widget creation.
-         * When the module is registered, all of its getters, actions and mutations will be automatically
-         * namespaced based on the path the module is registered at.
-         */
-        this.$store.registerModule(WIDGET_TYPE, store, { preserveState: false });
+    computed: {
+        displayedProfiles() {
+            return this.properties?.maxNumberOfDisplayedProfiles || PROFILE_LIMIT;
+        },
     },
     created() {
-        this.initStore(this.maxNumberOfDisplayedProfiles);
+        this.initStore(displayedProfiles);
     },
     methods: {
         ...mapActions({

home-screen-widget/profiles/src/main.js

@@ -1,10 +1,15 @@
 import BeekeeperHomeScreen from '@beekeeper/home-screen-sdk';
-import component, { WIDGET_TYPE } from '~/components/Widget.vue';
+
+import component, { WIDGET_TYPE_NAME } from '~/components/Widget.vue';
+import store from '~/store';
 
 /**
  * Step 2: Register widget component
  *
  * This is the entry point of your widget and here we need to register
  * the component with its widget id into the home screen
  */
-BeekeeperHomeScreen.registerWidget(WIDGET_TYPE, component);
+BeekeeperHomeScreen.registerVueWidget(WIDGET_TYPE_NAME, component, {
+    useStore: true,
+    storeOptions: store,
+});