From b9d97977342cddd40f4224297add5079c37564ad Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Mon, 24 Mar 2025 15:12:22 +0100
Subject: [PATCH] Rename generic slotProps to more descriptive variable names

---
 dashboard/src/components/ApiTokens.vue     | 16 ++++++++--------
 dashboard/src/components/AppPasswords.vue  |  6 +++---
 dashboard/src/components/BackupList.vue    | 18 +++++++++---------
 dashboard/src/components/OpenIdClients.vue |  6 +++---
 dashboard/src/views/VolumesView.vue        | 20 ++++++++++----------
 5 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/dashboard/src/components/ApiTokens.vue b/dashboard/src/components/ApiTokens.vue
index 6ab53fd9d..0c5179bd6 100644
--- a/dashboard/src/components/ApiTokens.vue
+++ b/dashboard/src/components/ApiTokens.vue
@@ -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>
diff --git a/dashboard/src/components/AppPasswords.vue b/dashboard/src/components/AppPasswords.vue
index fc4e6d168..cac9a6b47 100644
--- a/dashboard/src/components/AppPasswords.vue
+++ b/dashboard/src/components/AppPasswords.vue
@@ -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>
diff --git a/dashboard/src/components/BackupList.vue b/dashboard/src/components/BackupList.vue
index 315c8f22f..9c5f227a1 100644
--- a/dashboard/src/components/BackupList.vue
+++ b/dashboard/src/components/BackupList.vue
@@ -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>
diff --git a/dashboard/src/components/OpenIdClients.vue b/dashboard/src/components/OpenIdClients.vue
index 8a8bb3b13..870ba78dc 100644
--- a/dashboard/src/components/OpenIdClients.vue
+++ b/dashboard/src/components/OpenIdClients.vue
@@ -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>
diff --git a/dashboard/src/views/VolumesView.vue b/dashboard/src/views/VolumesView.vue
index f6de1a10f..5ed671648 100644
--- a/dashboard/src/views/VolumesView.vue
+++ b/dashboard/src/views/VolumesView.vue
@@ -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>