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

Improve change and valid detection for app mounts

Browse Source
This commit is contained in:
Johannes Zellner
2025-06-11 18:22:43 +02:00
parent c95e267cdd
commit bb7252042e
1 changed files with 37 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
dashboard/src/components/app/Storage.vue
View File

@@ -27,6 +27,7 @@ const selectedMountType = computed(() => {
});
const mounts = ref([]);
const originalMounts = ref([]);
const mountsBusy = ref(false);
const mountsError = ref('');
@@ -80,9 +81,35 @@ async function onSubmitMounts() {
return console.error(error);
}
mountsBusy.value = false;
// make a copy, cannot clone due to Proxy objects
originalMounts.value = mounts.value.map(m => { return { volumeId: m.volumeId, readOnly: m.readOnly }; });
setTimeout(() => mountsBusy.value = false, 2000);
}
const mountsValid = computed(() => {
const uniques = {};
for (const m of mounts.value) {
if (!m.volumeId) return false;
if (uniques[m.volumeId]) return false;
else uniques[m.volumeId] = true;
}
return true;
});
const mountsChanged = computed(() => {
if (mounts.value.length !== originalMounts.value.length) return true;
for (const m in mounts.value) {
if (originalMounts.value[m].readOnly !== mounts.value[m].readOnly) return true;
if (originalMounts.value[m].volumeId !== mounts.value[m].volumeId) return true;
}
return false;
});
onMounted(async () => {
const [error, result] = await volumesModel.list();
if (error) return console.error(error);
@@ -92,6 +119,9 @@ onMounted(async () => {
mounts.value.push({ volumeId: volume.id, readOnly: mount.readOnly ? 'true' : 'false' });
});
// make a copy, cannot clone due to Proxy objects
originalMounts.value = mounts.value.map(m => { return { volumeId: m.volumeId, readOnly: m.readOnly }; });
volumes.value = [{
id: DEFAULT_VOLUME_ID,
label: 'Default - /home/yellowtent/appsdata/<appId>',
@@ -150,9 +180,9 @@ onMounted(async () => {
<table class="table table-hover" style="margin-top: 10px;" v-if="mounts.length">
<thead>
<tr>
<th style="width: 40%">{{ $t('app.storage.mounts.volume') }}</th>
<th class="text-left hidden-xs hidden-sm">{{ $t('app.storage.mounts.permissions.label') }}</th>
<th style="width: 100px" class="text-right">{{ $t('main.actions') }}</th>
<th style="text-align: left;">{{ $t('app.storage.mounts.volume') }}</th>
<th style="text-align: left;">{{ $t('app.storage.mounts.permissions.label') }}</th>
<th style="width: 100px; text-align: right;">{{ $t('main.actions') }}</th>
</tr>
</thead>
<tbody>
@@ -160,13 +190,13 @@ onMounted(async () => {
<td>
<SingleSelect v-model="mount.volumeId" :options="volumes" option-key="id" option-label="label"/>
</td>
<td class="text-left" style="vertical-align: middle;">
<td style="vertical-align: middle;">
<select v-model="mount.readOnly">
<option value="true">{{ $t('app.storage.mounts.permissions.readOnly') }}</option>
<option value="false">{{ $t('app.storage.mounts.permissions.readWrite') }}</option>
</select>
</td>
<td class="text-right no-wrap" style="vertical-align: middle">
<td style="vertical-align: middle; text-align: right;">
<Button tool small secondary v-show="mount.volumeId" :href="`/filemanager.html#/home/volume/${mount.volumeId}`" target="_blank" v-tooltip="$t('volumes.openFileManagerActionTooltip')" icon="fa-solid fa-folder"/>
<Button tool small danger @click="onMountRemove(index)" icon="fa-solid fa-trash-alt" style="margin-left: 6px"/>
</td>
@@ -181,7 +211,7 @@ onMounted(async () => {
</FormGroup>
<br/>
<Button @click="onSubmitMounts()" :loading="mountsBusy" :disabled="mountsBusy || app.error || app.taskId" v-tooltip="app.error ? 'App is in error state' : (app.taskId ? 'App is busy' : '')">{{ $t('app.storage.mounts.saveAction') }}</Button>
<Button @click="onSubmitMounts()" :loading="mountsBusy" :disabled="mountsBusy || app.error || app.taskId || !mountsChanged || !mountsValid" v-tooltip="app.error ? 'App is in error state' : (app.taskId ? 'App is busy' : '')">{{ $t('app.storage.mounts.saveAction') }}</Button>
</div>
</template>