jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Handle validitiy state in backup site adding dialog

Browse Source
This commit is contained in:
Johannes Zellner
2025-10-21 12:44:04 +02:00
parent 783ad9ecda
commit 642487f4c5
2 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
dashboard/src/components/BackupSiteAddDialog.vue
View File

@@ -29,7 +29,7 @@ const formError = ref({});
const busy = ref(false);
const enableForUpdates = ref(false);
const provider = ref('');
const includeExclude = ref('everything'); // or exclude, include
const includeExclude = ref(''); // or exclude, include
const contentOptions = ref([]);
const contentInclude = ref([]);
const contentExclude = ref([]);
@@ -227,6 +227,12 @@ function onCancel() {
dialog.value.close();
}
const isValid = ref(false);
function checkValidity() {
isValid.value = form.value.checkValidity();
}
defineExpose({
async open() {
step.value = 'storage';
@@ -247,7 +253,7 @@ defineExpose({
encryptionPasswordHint.value = '';
encryptedFilenames.value = false;
limits.value = {};
includeExclude.value = 'everything';
includeExclude.value = '';
contentInclude.value = [];
contentExclude.value = [];
@@ -282,6 +288,8 @@ defineExpose({
});
dialog.value.open();
// checkValidity();
}
});
@@ -291,9 +299,9 @@ defineExpose({
<Dialog ref="dialog" :title="$t('backups.site.addDialog.title')">
<div>
<div v-if="step === 'storage'">
<form @submit.prevent="onSubmit()" autocomplete="off" ref="form">
<form @submit.prevent="onSubmit()" autocomplete="off" ref="form" @change="checkValidity()">
<fieldset :disabled="busy">
<input style="display: none;" type="submit"/>
<input style="display: none;" type="submit" :disabled="!isValid"/>
<FormGroup>
<label for="nameInput">{{ $t('backups.configureBackupStorage.name') }}</label>
@@ -306,10 +314,10 @@ defineExpose({
<label>{{ $t('backups.configureBackupStorage.backupContents.title') }}</label>
<div description>{{ $t('backups.configureBackupStorage.backupContents.description') }}</div>
<div>
<Radiobutton v-model="includeExclude" value="everything" :label="$t('backups.configureBackupStorage.backupContents.everything')"/>
<Radiobutton v-model="includeExclude" value="exclude" :label="$t('backups.configureBackupStorage.backupContents.excludeSelected')"/>
<Radiobutton v-model="includeExclude" name="contentRadioGroup" value="everything" :label="$t('backups.configureBackupStorage.backupContents.everything')" required/>
<Radiobutton v-model="includeExclude" name="contentRadioGroup" value="exclude" :label="$t('backups.configureBackupStorage.backupContents.excludeSelected')" required/>
<MultiSelect v-model="contentExclude" v-if="includeExclude === 'exclude'" :options="contentOptions" :search-threshold="10" option-key="id" style="margin: 6px 0 6px 25px;"/>
<Radiobutton v-model="includeExclude" value="include" :label="$t('backups.configureBackupStorage.backupContents.includeOnlySelected')"/>
<Radiobutton v-model="includeExclude" name="contentRadioGroup" value="include" :label="$t('backups.configureBackupStorage.backupContents.includeOnlySelected')" required/>
<MultiSelect v-model="contentInclude" v-if="includeExclude === 'include'" :options="contentOptions" :search-threshold="10" option-key="id" style="margin: 6px 0 6px 25px;"/>
</div>
</FormGroup>
@@ -370,7 +378,7 @@ defineExpose({
<div style="display: flex; gap: 6px; align-items: end;">
<Button secondary v-if="!busy" :disabled="busy" @click="onCancel()">{{ $t('main.dialog.cancel') }}</Button>
<Button primary :disabled="busy" :loading="busy" @click="onSubmit()">{{ useEncryption ? $t('main.action.next') : $t('main.dialog.save') }}</Button>
<Button primary :disabled="busy || !isValid" :loading="busy" @click="onSubmit()">{{ useEncryption ? $t('main.action.next') : $t('main.dialog.save') }}</Button>
</div>
</div>
</fieldset>