initial implementation of community packages

2026-02-05 13:20:00 +01:00
parent a931d2a91f
commit a7de7fb286
11 changed files with 238 additions and 70 deletions
@@ -0,0 +1,75 @@
+<script setup>
+
+import { ref, useTemplateRef } from 'vue';
+import { Dialog, TextInput, FormGroup } from '@cloudron/pankow';
+import CommunityModel from '../models/CommunityModel.js';
+
+const communityModel = CommunityModel.create();
+
+const emit = defineEmits([ 'success' ]);
+
+const dialog = useTemplateRef('dialog');
+
+const busy = ref(false);
+const formError = ref({});
+const url = ref('');
+const version = ref('latest');
+
+async function onSubmit() {
+  busy.value = true;
+  formError.value = {};
+
+  const [error, result] = await communityModel.getApp(url.value, version.value);
+  if (error) {
+    formError.value.generic = error.body?.message || 'Failed to fetch community app';
+    busy.value = false;
+    return console.error(error);
+  }
+
+  emit('success', result);
+  dialog.value.close();
+  busy.value = false;
+}
+
+defineExpose({
+  open() {
+    url.value = '';
+    version.value = 'latest';
+    formError.value = {};
+    busy.value = false;
+    dialog.value.open();
+  }
+});
+
+</script>
+
+<template>
+  <Dialog ref="dialog"
+    title="Install Community App"
+    confirm-label="Continue"
+    :confirm-busy="busy"
+    :confirm-active="!busy && url !== ''"
+    reject-style="secondary"
+    reject-label="Cancel"
+    :reject-active="!busy"
+    @confirm="onSubmit()"
+  >
+    <form @submit.prevent="onSubmit()" autocomplete="off">
+      <fieldset :disabled="busy">
+        <input type="submit" style="display: none;" />
+
+        <div class="error-label" v-if="formError.generic">{{ formError.generic }}</div>
+
+        <FormGroup>
+          <label for="urlInput">CloudronVersions.json URL</label>
+          <TextInput id="urlInput" v-model="url" required placeholder="https://example.com/CloudronVersions.json"/>
+        </FormGroup>
+
+        <FormGroup>
+          <label for="versionInput">Version</label>
+          <TextInput id="versionInput" v-model="version" required/>
+        </FormGroup>
+      </fieldset>
+    </form>
+  </Dialog>
+</template>