Add initial hooks for subscription required dialog on unpaid or expired

dashboard/src/Index.vue

@@ -9,6 +9,7 @@ import ProvisionModel from './models/ProvisionModel.js';
 import DashboardModel from './models/DashboardModel.js';
 import BrandingModel from './models/BrandingModel.js';
 import Headerbar from './components/Headerbar.vue';
+import SubscriptionRequiredDialog from './components/SubscriptionRequiredDialog.vue';
 import OfflineOverlay from './components/OfflineOverlay.vue';
 import AppsView from './views/AppsView.vue';
 import AppConfigureView from './views/AppConfigureView.vue';
@@ -98,6 +99,7 @@ const profileModel = ProfileModel.create();
 const provisionModel = ProvisionModel.create();
 
 const sidebar = useTemplateRef('sidebar');
+const subscriptionDialog = useTemplateRef('subscriptionDialog');
 const ready = ref(false);
 const view = ref('');
 const profile = ref({});
@@ -193,6 +195,10 @@ ProfileModel.onChange(ProfileModel.KEYS.AVATAR, (value) => {
   profile.value.avatarUrl = value;
 });
 
+function onSubscriptionRequired() {
+  subscriptionDialog.value.open();
+}
+
 onMounted(async () => {
   let [error, result] = await provisionModel.status();
   if (error) return console.error(error);
@@ -234,6 +240,7 @@ onMounted(async () => {
   <div style="overflow: hidden; height: 100%;">
     <Notification />
     <OfflineOverlay ref="offlineOverlay" @online="onOnline()"/>
+    <SubscriptionRequiredDialog ref="subscriptionDialog"/>
 
     <Transition name="pankow-animation-pop-up">
       <div v-if="ready" style="display: flex; flex-direction: row; overflow: hidden; height: 100%;">
@@ -279,7 +286,7 @@ onMounted(async () => {
         </SideBar>
 
         <div style="flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; height: 100%;">
-          <Headerbar :config="config" :subscription="subscription" :profile="profile"/>
+          <Headerbar :config="config" :subscription="subscription" :profile="profile" @subscription-required="onSubscriptionRequired()"/>
 
           <div style="display: flex; justify-content: center; overflow: auto; flex-grow: 1; padding: 0 6px; position: relative;">
             <Transition name="slide-fade">