Initial appstore view in vue

dashboard/src/components/AppInstallDialog.vue

@@ -0,0 +1,99 @@
+<template>
+  <Dialog ref="dialog"
+    :reject-label="$t('main.dialog.cancel')"
+    :confirm-label="'Install'"
+     confirm-style="success"
+  >
+    <div>
+      <div class="header">
+        <img class="icon" :src="app.iconUrl" />
+        <div class="right">
+          <div class="title">{{ manifest.title }}</div>
+          <div class="lastUpdated">{{ $t('appstore.installDialog.lastUpdated', { date: prettyDate(app.creationDate) }) }}</div>
+          <div class="memoryRequirement">{{ $t('appstore.installDialog.memoryRequirement', { size: prettyFileSize(manifest.memoryLimit) }) }}</div>
+          <div class="author"><a :href="manifest.website" target="_blank">Website</a></div>
+        </div>
+      </div>
+      <div v-html="description"></div>
+    </div>
+  </Dialog>
+</template>
+
+<script>
+
+import { Dialog } from 'pankow';
+import { prettyDate, prettyFileSize } from 'pankow/utils';
+import { marked } from 'marked';
+
+const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
+const accessToken = localStorage.token;
+
+export default {
+  name: 'AppInstallDialog',
+  components: {
+    Dialog,
+  },
+  data() {
+    return {
+      API_ORIGIN,
+      app: {},
+      manifest: {},
+      busy: false,
+      error: {},
+    };
+  },
+  computed: {
+    description() {
+      return marked.parse(this.manifest.description || '');
+    }
+  },
+  methods: {
+    prettyDate,
+    prettyFileSize,
+    async open(app) {
+      this.app = app;
+      this.manifest = app.manifest;
+
+      this.$refs.dialog.open();
+    },
+    onProceed() {
+
+    }
+  },
+};
+
+</script>
+
+<style scoped>
+
+.header {
+  display: flex;
+  align-items: center;
+}
+
+.right {
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
+}
+
+.title {
+  font-size: 26px;
+  margin-bottom: 10px;
+}
+
+.icon {
+  width: 96px;
+  height: 96px;
+  object-fit: cover;
+  margin-right: 20px;
+}
+
+.description {
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  justify-content: center;
+}
+
+</style>