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

Move most all table views to new action menu pattern

Browse Source
This commit is contained in:
Johannes Zellner
2025-08-18 17:25:50 +02:00
parent 4d8b6c5ea7
commit 72fdc707ee
6 changed files with 188 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
dashboard/src/views/VolumesView.vue
View File

@@ -5,7 +5,7 @@ const i18n = useI18n();
const t = i18n.t;
import { computed, ref, useTemplateRef, onMounted } from 'vue';
import { Button, ButtonGroup, Checkbox, Dialog, SingleSelect, FormGroup, InputDialog, NumberInput, PasswordInput, TableView, TextInput } from '@cloudron/pankow';
import { Button, Menu, Checkbox, Dialog, SingleSelect, FormGroup, InputDialog, NumberInput, PasswordInput, TableView, TextInput } from '@cloudron/pankow';
import Section from '../components/Section.vue';
import StateLED from '../components/StateLED.vue';
import VolumesModel from '../models/VolumesModel.js';
@@ -31,6 +31,35 @@ const columns = {
actions: {}
};
const actionMenuModel = ref([]);
const actionMenuElement = useTemplateRef('actionMenuElement');
function onActionMenu(volume, event) {
actionMenuModel.value = [{
icon: 'fa-solid fa-sync-alt',
label: t('volumes.remountActionTooltip'),
visible: volume.mountType === 'sshfs' || volume.mountType === 'cifs' || volume.mountType === 'nfs' || volume.mountType === 'ext4' || volume.mountType === 'xfs',
action: remount.bind(null, volume),
}, {
icon: 'fa-solid fa-pencil-alt',
label: t('main.action.edit'),
visible: volume.mountType === 'sshfs' || volume.mountType === 'cifs' || volume.mountType === 'nfs',
action: openVolumeDialog.bind(null, volume),
}, {
icon: 'fa-solid fa-folder',
label: t('volumes.openFileManagerActionTooltip'),
target: '_blank',
href: '/filemanager.html#/home/volume/' + volume.id,
}, {
separator: true,
}, {
icon: 'fa-solid fa-trash-alt',
label: t('main.action.remove'),
action: onRemove.bind(null, volume),
}];
actionMenuElement.value.open(event, event.currentTarget);
}
const busy = ref(true);
const volumes = ref([]);
const volumeDialogData = ref({
@@ -202,6 +231,7 @@ onMounted(async () =>{
<template>
<div class="content">
<Menu ref="actionMenuElement" :model="actionMenuModel" />
<InputDialog ref="inputDialog" />
<Dialog ref="volumeDialog"
@@ -298,13 +328,8 @@ onMounted(async () =>{
</div>
</template>
<template #actions="volume">
<div class="table-actions">
<ButtonGroup>
<Button tool secondary small icon="fa fa-sync-alt" v-if="volume.mountType === 'sshfs' || volume.mountType === 'cifs' || volume.mountType === 'nfs' || volume.mountType === 'ext4' || volume.mountType === 'xfs'" v-tooltip="$t('volumes.remountActionTooltip')" @click="remount(volume)"></Button>
<Button tool secondary small icon="fa fa-pencil-alt" v-if="volume.mountType === 'sshfs' || volume.mountType === 'cifs' || volume.mountType === 'nfs'" v-tooltip="$t('volumes.editActionTooltip')" @click="openVolumeDialog(volume)"></Button>
<Button tool secondary small icon="fas fa-folder" v-tooltip="$t('volumes.openFileManagerActionTooltip')" :href="'/filemanager.html#/home/volume/' + volume.id" target="_blank"></Button>
</ButtonGroup>
<Button tool danger small icon="fa-solid fa-trash-alt" v-tooltip="$t('volumes.removeVolumeActionTooltip')" @click="onRemove(volume)"></Button>
<div style="text-align: right;">
<Button tool plain secondary @click.capture="onActionMenu(volume, $event)" icon="fa-solid fa-ellipsis" />
</div>
</template>
</TableView>