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

frontend: use pankow InputDialog from prompts

Browse Source
This commit is contained in:
Johannes Zellner
2024-05-01 12:52:47 +02:00
parent 9f415826fd
commit 4e04b2075f
1 changed files with 29 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
frontend/src/views/Home.vue
View File

@@ -23,29 +23,7 @@
</div>
</Dialog>
<!-- have to use v-model instead of : bind - https://github.com/primefaces/primevue/issues/815 -->
<Dialog v-model:visible="newFileDialog.visible" modal :style="{ width: '50vw' }" @show="onDialogShow('newFileDialogNameInput')">
<template #header>
<label class="dialog-header" for="newFileDialogNameInput">{{ $t('filemanager.newFileDialog.title') }}</label>
</template>
<template #default>
<form @submit="onNewFileDialogSubmit" @submit.prevent>
<InputText class="dialog-single-input" id="newFileDialogNameInput" v-model="newFileDialog.name" :disabled="newFileDialog.busy" required/>
<Button class="dialog-single-input-submit" type="submit" :loading="newFileDialog.busy" :disabled="newFileDialog.busy || !newFileDialog.name">{{ $t('filemanager.newFileDialog.create') }}</Button>
</form>
</template>
</Dialog>
<Dialog v-model:visible="newFolderDialog.visible" modal :style="{ width: '50vw' }" @show="onDialogShow('newFolderDialogNameInput')">
<template #header>
<label class="dialog-header" for="newFolderDialogNameInput">{{ $t('filemanager.newDirectoryDialog.title') }}</label>
</template>
<template #default>
<form @submit="onNewFolderDialogSubmit" @submit.prevent>
<InputText class="dialog-single-input" id="newFolderDialogNameInput" v-model="newFolderDialog.name" :disabled="newFolderDialog.busy" required/>
<Button class="dialog-single-input-submit" type="submit" :loading="newFolderDialog.busy" :disabled="newFolderDialog.busy || !newFolderDialog.name">{{ $t('filemanager.newFileDialog.create') }}</Button>
</form>
</template>
</Dialog>
<InputDialog ref="inputDialog" />
</template>
<template #header>
<TopBar class="navbar">
@@ -128,7 +106,7 @@ import InputText from 'primevue/inputtext';
import { useConfirm } from 'primevue/useconfirm';
import { DirectoryView, TopBar, Breadcrumb, BottomBar, Button, MainLayout, Menu, FileUploader, Spinner } from 'pankow';
import { DirectoryView, TopBar, Breadcrumb, BottomBar, Button, InputDialog, MainLayout, Menu, FileUploader, Spinner } from 'pankow';
import Icon from 'pankow/components/Icon.vue';
import { sanitize, sleep } from 'pankow/utils';
@@ -153,6 +131,7 @@ export default {
Dialog,
DirectoryView,
FileUploader,
InputDialog,
InputText,
MainLayout,
Menu,
@@ -195,16 +174,6 @@ export default {
this.cwd = '/';
}
},
newFileDialog: {
visible: false,
busy: false,
name: ''
},
newFolderDialog: {
visible: false,
busy: false,
name: ''
},
ownersModel: [],
// contextMenuModel will have activeItem attached if any command() is called
createMenuModel: [{
@@ -265,27 +234,35 @@ export default {
onDialogShow(focusElementId) {
setTimeout(() => document.getElementById(focusElementId).focus(), 0);
},
onNewFile() {
this.newFileDialog.busy = false;
this.newFileDialog.name = '';
this.newFileDialog.visible = true;
},
async onNewFileDialogSubmit() {
this.newFileDialog.busy = true;
await this.directoryModel.newFile(this.directoryModel.buildFilePath(this.cwd, this.newFileDialog.name), this.newFileDialog.name);
async onNewFile() {
const newFileName = await this.$refs.inputDialog.prompt({
message: this.$t('filemanager.newFileDialog.title'),
value: '',
confirmStyle: 'success',
confirmLabel: this.$t('filemanager.newFileDialog.create'),
rejectLabel: this.$t('main.dialog.cancel'),
modal: false
});
if (!newFileName) return;
await this.directoryModel.newFile(this.directoryModel.buildFilePath(this.cwd, newFileName), newFileName);
await this.loadCwd();
this.newFileDialog.visible = false;
},
onNewFolder() {
this.newFolderDialog.busy = false;
this.newFolderDialog.name = '';
this.newFolderDialog.visible = true;
},
async onNewFolderDialogSubmit() {
this.newFolderDialog.busy = true;
await this.directoryModel.newFolder(this.directoryModel.buildFilePath(this.cwd, this.newFolderDialog.name));
async onNewFolder() {
const newFolderName = await this.$refs.inputDialog.prompt({
message: this.$t('filemanager.newDirectoryDialog.title'),
value: '',
confirmStyle: 'success',
confirmLabel: this.$t('filemanager.newFileDialog.create'),
rejectLabel: this.$t('main.dialog.cancel'),
modal: false
});
if (!newFolderName) return;
await this.directoryModel.newFolder(this.directoryModel.buildFilePath(this.cwd, newFolderName));
await this.loadCwd();
this.newFolderDialog.visible = false;
},
onUploadFile() {
this.$refs.fileUploader.onUploadFile(this.cwd);