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

Convert footer editing to EditableField

Browse Source
This commit is contained in:
Girish Ramakrishnan
2025-09-11 14:54:39 +02:00
parent 817b0f8167
commit 60d3eba712
2 changed files with 17 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
dashboard/src/views/AppearanceView.vue
View File

@@ -14,23 +14,22 @@ import DashboardModel from '../models/DashboardModel.js';
const brandingModel = BrandingModel.create();
const dashboardModel = DashboardModel.create();
const name = ref('');
const footer = ref('');
const avatarUrl = ref(`${API_ORIGIN}/api/v1/cloudron/avatar?${String(Math.random()).slice(2)}`);
const backgroundUrl = ref(`${API_ORIGIN}/api/v1/cloudron/background?${String(Math.random()).slice(2)}`);
const features = inject('features');
const name = ref('');
const savingName = ref(false);
async function onNameSave(newName) {
savingName.value = true;
const [error] = await brandingModel.setName(newName);
savingName.value = false;
if (error) return console.error(error);
name.value = newName;
savingName.value = false;
}
async function onAvatarSubmit(file) {
@@ -50,26 +49,17 @@ async function onBackgroundUnset() {
}
// Footer
const editingFooter = ref(false);
const editFooter = ref('');
const editFooterBusy = ref(false);
const footer = ref('');
const savingFooter = ref(false);
function onChangeFooter(currentFooter) {
editFooterBusy.value = false;
editingFooter.value = true;
editFooter.value = currentFooter;
}
async function onFooterSave(newFooter) {
savingFooter.value = true;
async function onChangeFooterSubmit() {
editFooterBusy.value = true;
const [error] = await brandingModel.setFooter(editFooter.value);
const [error] = await brandingModel.setFooter(newFooter);
savingFooter.value = false;
if (error) return console.error(error);
footer.value = editFooter.value;
editingFooter.value = false;
editFooterBusy.value = false;
editFooter.value = '';
footer.value = newFooter;
}
const applinkDialog = useTemplateRef('applinkDialog');
@@ -116,20 +106,7 @@ onMounted(async () => {
</SettingsItem>
<SettingsItem>
<FormGroup>
<label>{{ $t('branding.footer.title') }}</label>
<div>{{ $t('branding.footer.description') }} <sup><a href="https://docs.cloudron.io/branding/#footer" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></div>
</FormGroup>
<Transition name="slide-up" mode="out-in">
<div v-if="editingFooter" style="display: flex; position: relative; align-items: center; gap: 6px; flex-grow: 1; justify-content: right;">
<textarea v-model="editFooter" @keydown.enter="onChangeFooterSubmit()" :disabled="editFooterBusy" style="flex-grow: 1; height: 120px;"></textarea>
<Button tool @click="onChangeFooterSubmit()" :disabled="editFooterBusy" :loading="editFooterBusy">{{ $t('main.dialog.save') }}</Button>
<Button tool plain secondary @click="editingFooter = false" :disabled="editFooterBusy">{{ $t('main.dialog.cancel') }}</Button>
</div>
<div v-else style="display: flex; position: relative; align-items: center">
<Button tool plain @click="onChangeFooter(footer)" :disabled="!features.branding">{{ $t('main.dialog.edit') }}</Button>
</div>
</Transition>
<EditableField :label="$t('branding.footer.title')" helpUrl="https://docs.cloudron.io/branding/#footer" multiline :saving="savingFooter" :value="footer" :disabled="!features.branding" @save="onFooterSave"/>
</SettingsItem>
<SettingsItem>