76 lines
1.9 KiB
Vue
76 lines
1.9 KiB
Vue
|
<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>
|