From 5d6cf5789a4e1686cc7d77b359e7b62147899d73 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Mon, 6 Jan 2025 18:52:44 +0100
Subject: [PATCH] Move AppstoreView to vue composition api

---
 dashboard/src/components/AppstoreView.vue | 72 +++++++++--------------
 1 file changed, 28 insertions(+), 44 deletions(-)

diff --git a/dashboard/src/components/AppstoreView.vue b/dashboard/src/components/AppstoreView.vue
index 5c245072d..1a82b7516 100644
--- a/dashboard/src/components/AppstoreView.vue
+++ b/dashboard/src/components/AppstoreView.vue
@@ -18,62 +18,46 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
+import { ref, computed, useTemplateRef, onMounted } from 'vue';
 import { TextInput } from 'pankow';
-
 import AppstoreModel from '../models/AppstoreModel.js';
 import AppInstallDialog from './AppInstallDialog.vue';
 
 const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
-const accessToken = localStorage.token;
 
-const appstoreModel = AppstoreModel.create(API_ORIGIN, accessToken);
+const appstoreModel = AppstoreModel.create(API_ORIGIN, localStorage.token);
 
-export default {
-  name: 'AppstoreView',
-  components: {
-    AppInstallDialog,
-    TextInput,
-  },
-  data() {
-    return {
-      API_ORIGIN,
-      ready: false,
-      apps: [],
-      search: '',
-      activeApp: {
-        manifest: {}
-      },
-    };
-  },
-  computed: {
-    filteredApps() {
-      if (!this.search) return this.apps;
+const ready = ref(false);
+const apps = ref([]);
+const search = ref('');
+const filteredApps = computed(() => {
+  if (!search.value) return apps.value;
 
-      const search = this.search.toLowerCase();
+  const search = search.value.toLowerCase();
 
-      return this.apps.filter(a => {
-        if (a.manifest.title.toLowerCase().indexOf(search) !== -1) return true;
-        if (a.manifest.tagline.toLowerCase().indexOf(search) !== -1) return true;
-        if (a.manifest.tags.join().toLowerCase().indexOf(search) !== -1) return true;
-        return false;
-      });
-    }
-  },
-  methods: {
-    onInstall(app) {
-      this.$refs.appInstallDialog.open(app);
-    },
-  },
-  async mounted() {
-    this.apps = await appstoreModel.list();
+  return apps.value.filter(a => {
+    if (a.manifest.title.toLowerCase().indexOf(search) !== -1) return true;
+    if (a.manifest.tagline.toLowerCase().indexOf(search) !== -1) return true;
+    if (a.manifest.tags.join().toLowerCase().indexOf(search) !== -1) return true;
+    return false;
+  });
+});
+const appInstallDialog = useTemplateRef('appInstallDialog');
+const searchInput = useTemplateRef('searchInput');
 
-    this.ready = true;
+function onInstall(app) {
+  appInstallDialog.value.open(app);
+}
 
-    setTimeout(() => this.$refs.searchInput.$el.focus(), 0);
-  }
-};
+onMounted(async () => {
+  apps.value = await appstoreModel.list();
+
+  ready.value = true;
+
+  setTimeout(() => searchInput.value.$el.focus(), 0);
+});
 
 </script>