Rename generic slotProps to more descriptive variable names

This commit is contained in:
Johannes Zellner
2025-03-24 15:12:22 +01:00
parent 26d94c0519
commit b9d9797734
5 changed files with 33 additions and 33 deletions
+8 -8
View File
@@ -168,21 +168,21 @@ onMounted(async () => {
<br/>
<TableView :columns="columns" :model="apiTokens">
<template #lastUsedTime="slotProps">
<span v-if="slotProps.lastUsedTime">{{ prettyLongDate(slotProps.lastUsedTime) }}</span>
<template #lastUsedTime="apiToken">
<span v-if="apiToken.lastUsedTime">{{ prettyLongDate(apiToken.lastUsedTime) }}</span>
<span v-else>{{ $t('profile.apiTokens.neverUsed') }}</span>
</template>
<template #scope="slotProps">
<span v-if="slotProps.scope['*'] === 'rw'">{{ $t('profile.apiTokens.readwrite') }}</span>
<template #scope="apiToken">
<span v-if="apiToken.scope['*'] === 'rw'">{{ $t('profile.apiTokens.readwrite') }}</span>
<span v-else>{{ $t('profile.apiTokens.readonly') }}</span>
</template>
<template #allowedIpRanges="slotProps">
<span v-if="slotProps.allowedIpRanges !== ''" v-tooltip="slotProps.allowedIpRanges">{{ slotProps.allowedIpRanges }}</span>
<template #allowedIpRanges="apiToken">
<span v-if="apiToken.allowedIpRanges !== ''" v-tooltip="apiToken.allowedIpRanges">{{ apiToken.allowedIpRanges }}</span>
<span v-else>{{ '*' }}</span>
</template>
<template #actions="slotProps">
<template #actions="apiToken">
<div class="table-actions">
<Button small tool danger @click="onRevokeToken(slotProps)" v-tooltip="$t('profile.apiTokens.revokeTokenTooltip')" icon="far fa-trash-alt" />
<Button small tool danger @click="onRevokeToken(apiToken)" v-tooltip="$t('profile.apiTokens.revokeTokenTooltip')" icon="far fa-trash-alt" />
</div>
</template>
</TableView>
+3 -3
View File
@@ -194,10 +194,10 @@ onMounted(async () => {
<br/>
<TableView :columns="columns" :model="passwords" :placeholder="$t('profile.appPasswords.noPasswordsPlaceholder')">
<template #creationTime="slotProps">{{ prettyLongDate(slotProps.creationTime) }}</template>
<template #actions="slotProps">
<template #creationTime="password">{{ prettyLongDate(password.creationTime) }}</template>
<template #actions="password">
<div class="table-actions">
<Button small tool danger @click="onRemove(slotProps.id)" v-tooltip="$t('profile.appPasswords.deletePasswordTooltip')" icon="far fa-trash-alt" />
<Button small tool danger @click="onRemove(password.id)" v-tooltip="$t('profile.appPasswords.deletePasswordTooltip')" icon="far fa-trash-alt" />
</div>
</template>
</TableView>
+9 -9
View File
@@ -267,23 +267,23 @@ onMounted(async () => {
</template>
<TableView :columns="columns" :model="backups" :busy="busy" @row-click="onInfo">
<template #preserveSecs="slotProps">
<i class="fas fa-archive" v-show="slotProps.preserveSecs === -1" v-tooltip="$t('backups.listing.tooltipPreservedBackup')"></i>
<template #preserveSecs="backup">
<i class="fas fa-archive" v-show="backup.preserveSecs === -1" v-tooltip="$t('backups.listing.tooltipPreservedBackup')"></i>
</template>
<template #creationTime="slotProps">{{ prettyLongDate(slotProps.creationTime) }} <b v-show="slotProps.label">({{ slotProps.label }})</b></template>
<template #creationTime="backup">{{ prettyLongDate(backup.creationTime) }} <b v-show="backup.label">({{ backup.label }})</b></template>
<template #content="slotProps">
<span v-if="slotProps.contents.length">{{ $t('backups.listing.appCount', { appCount: slotProps.contents.length }) }}</span>
<template #content="backup">
<span v-if="backup.contents.length">{{ $t('backups.listing.appCount', { appCount: backup.contents.length }) }}</span>
<span v-else>{{ $t('backups.listing.noApps') }}</span>
</template>
<template #actions="slotProps">
<template #actions="backup">
<div class="table-actions">
<ButtonGroup>
<Button tool secondary small icon="fa-solid fa-circle-info" @click.stop="onInfo(slotProps)"></Button>
<Button tool secondary small icon="fa-solid fa-pencil-alt" v-tooltip="$t('backups.listing.tooltipEditBackup')" @click.stop="onEdit(slotProps)"></Button>
<Button tool secondary small icon="fa-solid fa-file-alt" v-tooltip="$t('backups.listing.tooltipDownloadBackupConfig')" @click.stop="onDownloadConfig(slotProps)"></Button>
<Button tool secondary small icon="fa-solid fa-circle-info" @click.stop="onInfo(backup)"></Button>
<Button tool secondary small icon="fa-solid fa-pencil-alt" v-tooltip="$t('backups.listing.tooltipEditBackup')" @click.stop="onEdit(backup)"></Button>
<Button tool secondary small icon="fa-solid fa-file-alt" v-tooltip="$t('backups.listing.tooltipDownloadBackupConfig')" @click.stop="onDownloadConfig(backup)"></Button>
</ButtonGroup>
</div>
</template>
+3 -3
View File
@@ -175,10 +175,10 @@ onMounted(async () => {
</div>
<TableView :columns="columns" :model="clients" @row-click="onEdit">
<template #actions="slotProps">
<template #actions="client">
<div class="table-actions">
<Button tool secondary small icon="fa-solid fa-pencil-alt" @click.stop="onEdit(slotProps)"></Button>
<Button tool danger small icon="fa-solid fa-trash-alt" @click.stop="onRemove(slotProps)"></Button>
<Button tool secondary small icon="fa-solid fa-pencil-alt" @click.stop="onEdit(client)"></Button>
<Button tool danger small icon="fa-solid fa-trash-alt" @click.stop="onRemove(client)"></Button>
</div>
</template>
</TableView>
+10 -10
View File
@@ -281,22 +281,22 @@ onMounted(async () =>{
<div v-html="$t('volumes.description')"></div>
<br/>
<TableView :columns="columns" :model="volumes" :busy="busy">
<template #target="slotProps">
{{ (slotProps.mountType === 'mountpoint' || slotProps.mountType === 'filesystem') ? slotProps.hostPath : (slotProps.mountOptions.host || slotProps.mountOptions.diskPath || slotProps.hostPath) + (slotProps.mountOptions.remoteDir || '') }}
<template #target="volume">
{{ (volume.mountType === 'mountpoint' || volume.mountType === 'filesystem') ? volume.hostPath : (volume.mountOptions.host || volume.mountOptions.diskPath || volume.hostPath) + (volume.mountOptions.remoteDir || '') }}
</template>
<template #status="slotProps">
<div style="text-align: center;" v-tooltip="slotProps.message">
<i class="fa fa-circle" :style="{ color: slotProps.state === 'active' ? '#27CE65' : '#d9534f' }"></i>
<template #status="volume">
<div style="text-align: center;" v-tooltip="volume.message">
<i class="fa fa-circle" :style="{ color: volume.state === 'active' ? '#27CE65' : '#d9534f' }"></i>
</div>
</template>
<template #actions="slotProps">
<template #actions="volume">
<div class="table-actions">
<ButtonGroup>
<Button tool secondary small icon="fa fa-sync-alt" v-if="slotProps.mountType === 'sshfs' || slotProps.mountType === 'cifs' || slotProps.mountType === 'nfs' || slotProps.mountType === 'ext4' || slotProps.mountType === 'xfs'" v-tooltip="$t('volumes.remountActionTooltip')" @click="remount(slotProps)"></Button>
<Button tool secondary small icon="fa fa-pencil-alt" v-if="slotProps.mountType === 'sshfs' || slotProps.mountType === 'cifs' || slotProps.mountType === 'nfs'" v-tooltip="$t('volumes.editActionTooltip')" @click="openVolumeDialog(slotProps)"></Button>
<Button tool secondary small icon="fas fa-folder" v-tooltip="$t('volumes.openFileManagerActionTooltip')" :href="'/filemanager.html#/home/volume/' + slotProps.id" target="_blank"></Button>
<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(slotProps)"></Button>
<Button tool danger small icon="fa-solid fa-trash-alt" v-tooltip="$t('volumes.removeVolumeActionTooltip')" @click="onRemove(volume)"></Button>
</div>
</template>
</TableView>