Handle case when app limit is exceeded

dashboard/src/components/AppInstallDialog.vue

@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref, computed, useTemplateRef, onMounted } from 'vue';
+import { ref, computed, useTemplateRef, onMounted, inject } from 'vue';
 import { marked } from 'marked';
 import { Button, Dialog, SingleSelect, FormGroup, TextInput, InputGroup } from 'pankow';
 import { prettyDate, prettyBinarySize } from 'pankow/utils';
@@ -20,6 +20,8 @@ const domainsModel = DomainsModel.create();
 const appsModel = AppsModel.create();
 const dashboardModel = DashboardModel.create();
 
+const subscriptionRequiredDialog = inject('subscriptionRequiredDialog');
+
 // reactive
 const busy = ref(false);
 const formError = ref({});
@@ -44,7 +46,15 @@ const formValid = computed(() => {
   return true;
 });
 
+const appMaxCountExceeded = ref(false);
+
 function setStep(newStep) {
+  if (newStep === STEP.INSTALL && appMaxCountExceeded.value) {
+    dialog.value.close();
+    subscriptionRequiredDialog.value.open();
+    return;
+  }
+
   step.value = newStep;
   if (newStep === STEP.INSTALL) setTimeout(() => locationInput.value.$el.focus(), 500);
 }
@@ -138,9 +148,10 @@ onMounted(async () => {
 });
 
 defineExpose({
-  open(a) {
+  open(a, appCountExceeded) {
     step.value = STEP.DETAILS;
     app.value = a;
+    appMaxCountExceeded.value = appCountExceeded;
     manifest.value = a.manifest;
 
     tcpPorts.value = a.manifest.tcpPorts;