Move new app link and app proxy to apps view

dashboard/src/views/AppsView.vue

@@ -1,17 +1,24 @@
 <script setup>
 
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
 import { ref, computed, useTemplateRef, onMounted, onUnmounted } from 'vue';
 import { Button, ButtonGroup, SingleSelect, Icon, TableView, TextInput } from 'pankow';
-import { API_ORIGIN, APP_TYPES, HSTATES, ISTATES, RSTATES } from '../constants.js';
+import { API_ORIGIN, APP_TYPES, HSTATES, ISTATES, RSTATES, PROXY_APP_ID } from '../constants.js';
 import AppsModel from '../models/AppsModel.js';
+import AppstoreModel from '../models/AppstoreModel.js';
 import ApplinksModel from '../models/ApplinksModel.js';
 import DomainsModel from '../models/DomainsModel.js';
 import ProfileModel from '../models/ProfileModel.js';
 import UpdaterModel from '../models/UpdaterModel.js';
+import AppInstallDialog from '../components/AppInstallDialog.vue';
 import ApplinkDialog from '../components/ApplinkDialog.vue';
 import PostInstallDialog from '../components/PostInstallDialog.vue';
 
 const appsModel = AppsModel.create();
+const appstoreModel = AppstoreModel.create();
 const domainsModel = DomainsModel.create();
 const applinksModel = ApplinksModel.create();
 const profileModel = ProfileModel.create();
@@ -125,6 +132,28 @@ const updateInfo = ref({});
 
 const applinkDialog = useTemplateRef('applinkDialog');
 const postInstallDialog = useTemplateRef('postInstallDialog');
+const appInstallDialog = useTemplateRef('appInstallDialog');
+
+const newAppMenu = [{
+  icon: 'fa fa-cloud-download-alt',
+  label: t('appstore.title'),
+  href: '/#/appstore',
+}, {
+  separator: true
+}, {
+  icon: 'fas fa-exchange-alt',
+  label: t('apps.addAppproxyAction'),
+  action: async () => {
+    const [error, result] = await appstoreModel.get(PROXY_APP_ID);
+    if (error) return console.error(error);
+
+    appInstallDialog.value.open(result);
+  },
+}, {
+  icon: 'fas fa-link',
+  label: t('apps.addApplinkAction'),
+  action: () => { applinkDialog.value.open(); },
+}];
 
 // hook for applinks otherwise it is a link
 function openAppEdit(app, event) {
@@ -239,8 +268,9 @@ onUnmounted(() => {
 
 <template>
   <div class="content">
-    <ApplinkDialog ref="applinkDialog" @success="refreshApps()"/>
+    <ApplinkDialog ref="applinkDialog" @success="refreshApps"/>
     <PostInstallDialog ref="postInstallDialog"/>
+    <AppInstallDialog ref="appInstallDialog" @close="refreshApps"/>
 
     <h1 class="view-header">
       {{ $t('apps.title') }}
@@ -250,6 +280,7 @@ onUnmounted(() => {
         <SingleSelect class="pankow-no-mobile" v-if="profile.isAtLeastAdmin" :options="stateFilterOptions" option-key="id" v-model="stateFilter" />
         <SingleSelect class="pankow-no-mobile" v-if="profile.isAtLeastAdmin" :options="domainFilterOptions" option-key="id" option-label="domain" v-model="domainFilter" />
         <Button tool outline secondary @click="toggleView()" :icon="viewType === VIEW_TYPE.GRID ? 'fas fa-list' : 'fas fa-grip'"></Button>
+        <Button tool :menu="newAppMenu" icon="fa-solid fa-plus" v-if="profile.isAtLeastAdmin" />
       </div>
     </h1>
 

dashboard/src/views/AppstoreView.vue

@@ -6,19 +6,16 @@ const t = i18n.t;
 
 import moment from 'moment';
 import { ref, computed, useTemplateRef, onMounted, inject, watch } from 'vue';
-import { Button, TextInput, Spinner, InputDialog, SingleSelect } from 'pankow';
+import { TextInput, Spinner, InputDialog, SingleSelect } from 'pankow';
 import AppsModel from '../models/AppsModel.js';
 import AppstoreModel from '../models/AppstoreModel.js';
 import AppInstallDialog from '../components/AppInstallDialog.vue';
-import ApplinkDialog from '../components/ApplinkDialog.vue';
 import AppStoreItem from '../components/AppStoreItem.vue';
-import { PROXY_APP_ID } from '../constants.js';
 
 const appsModel = AppsModel.create();
 const appstoreModel = AppstoreModel.create();
 
 const ready = ref(false);
-const proxyApp = ref();
 const apps = ref([]);
 const search = ref('');
 
@@ -71,7 +68,6 @@ const filteredPopularApps = computed(() => {
 });
 const appInstallDialog = useTemplateRef('appInstallDialog');
 const searchInput = useTemplateRef('searchInput');
-const applinkDialog = useTemplateRef('applinkDialog');
 const inputDialog = useTemplateRef('inputDialog');
 const features = inject('features');
 const installedApps = ref([]);
@@ -110,14 +106,6 @@ function onAppInstallDialogClose() {
   window.location.href = '#/appstore';
 }
 
-function onApplinkDialogOpen() {
-  applinkDialog.value.open();
-}
-
-function onApplinkDialogSuccess() {
-  window.location.href = '#/apps';
-}
-
 function onInstall(app) {
   window.location.href = `#/appstore/${app.manifest.id}?version=${app.manifest.version}`;
   appInstallDialog.value.open(app, installedApps.value.length >= features.value.appMaxCount);
@@ -176,8 +164,6 @@ onMounted(async () => {
       } catch(e) {;}
     }, 100);
   }
-
-  proxyApp.value = await getApp(PROXY_APP_ID);
 });
 
 </script>
@@ -186,13 +172,10 @@ onMounted(async () => {
   <div class="content" style="width: 100%;">
     <InputDialog ref="inputDialog"/>
     <AppInstallDialog ref="appInstallDialog" @close="onAppInstallDialogClose"/>
-    <ApplinkDialog ref="applinkDialog" @success="onApplinkDialogSuccess()"/>
 
     <div class="filter-bar" :disabled="!ready" :style="{ 'pointer-events': ready ? null : 'none' }">
       <SingleSelect @select="onCategory" v-model="category" :options="categories" option-key="id" option-label="label"/>
       <TextInput ref="searchInput" @keydown.esc="search = ''" v-model="search" :placeholder="$t('appstore.searchPlaceholder')" style="flex-grow: 1;"/>
-      <Button secondary plain icon="fas fa-exchange-alt" @click="onInstall(proxyApp)">{{ $t('apps.addAppproxyAction') }}</Button>
-      <Button secondary plain icon="fas fa-link" @click="onApplinkDialogOpen()">{{ $t('apps.addApplinkAction') }}</Button>
     </div>
 
     <div v-if="!ready" style="width: 100%; text-align: center;">