Update pankow to v4 to fix TableView bug

dashboard/src/views/AppArchiveView.vue

@@ -125,20 +125,20 @@ onMounted(async () => {
       <br/>
 
       <TableView :columns="columns" :model="archives" :busy="busy" :placeholder="$t('archives.listing.placeholder')">
-        <template #icon="archive">
+        <template #icon="{ item:archive }">
           <img :src="archive.iconUrl || 'img/appicon_fallback.png'" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'" height="24" width="24"/>
         </template>
 
         <!-- for pre-8.2 backups, appConfig can be null -->
-        <template #location="archive">{{ archive.appConfig ? archive.appConfig.fqdn : '-' }}</template>
+        <template #location="{ item:archive }">{{ archive.appConfig ? archive.appConfig.fqdn : '-' }}</template>
 
-        <template #info="archive">
+        <template #info="{ item:archive }">
           <span v-tooltip="`${archive.manifest.id}@${archive.manifest.version}`">{{ archive.manifest.title }}</span>
         </template>
 
-        <template #creationTime="archive">{{ prettyLongDate(archive.creationTime) }}</template>
+        <template #creationTime="{ item:archive }">{{ prettyLongDate(archive.creationTime) }}</template>
 
-        <template #actions="archive">
+        <template #actions="{ item:archive }">
           <ActionBar :actions="createActionMenu(archive)"/>
         </template>
       </TableView>

dashboard/src/views/AppsView.vue

@@ -359,35 +359,35 @@ onDeactivated(() => {
       <div class="list" v-if="viewType === VIEW_TYPE.LIST && apps.length !== 0">
 
         <TableView :columns="listColumns" :model="filteredApps">
-          <template #icon="app">
+          <template #icon="{ item:app }">
             <a :href="app.origin" target="_blank">
               <img :alt="app.label || app.subdomain || app.fqdn" class="list-icon" :class="{ 'item-inactive': app.runState === RSTATES.STOPPED }" :src="app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'"/>
             </a>
           </template>
-          <template #label="app">
+          <template #label="{ item:app }">
             <a :href="app.origin" target="_blank">
               {{ app.label || app.subdomain || app.fqdn }}
             </a>
           </template>
-          <template #appTitle="app">
+          <template #appTitle="{ item:app }">
             {{ app.manifest.title }}
           </template>
-          <template #fqdn="app">
+          <template #fqdn="{ item:app }">
             <a :href="app.origin" target="_blank">
               {{ app.fqdn }}
             </a>
           </template>
-          <template #status="app">
+          <template #status="{ item:app }">
             <div class="list-status">
               {{ AppsModel.installationStateLabel(app) }}
               <ProgressBar v-if="app.progress && isOperator(app)" :busy="true" :value="Math.max(10, app.progress)" :show-label="false" class="apps-progress"/>
             </div>
           </template>
-          <template #checklist="app">
+          <template #checklist="{ item:app }">
             <a class="list-item-checklist-indicator" v-if="AppsModel.pendingChecklistItems(app)" :href="`#/app/${app.id}/info`"><Icon icon="fa-solid fa-triangle-exclamation"/></a>
             <a class="list-item-update-indicator" v-if="app.updateInfo" @click.stop :href="isOperator(app) ? `#/app/${app.id}/updates` : null" v-tooltip="$t('app.updateAvailableTooltip')"><i class="fa-solid fa-arrow-up"/></a>
           </template>
-          <template #sso="app">
+          <template #sso="{ item:app }">
             <div v-show="app.type !== APP_TYPES.LINK">
               <Icon icon="fa-brands fa-openid" v-show="app.ssoAuth && app.manifest.addons.oidc" v-tooltip="$t('apps.auth.openid')" />
               <Icon icon="fas fa-user" v-show="app.ssoAuth && (!app.manifest.addons.oidc && !app.manifest.addons.email)" v-tooltip="$t('apps.auth.sso')" />
@@ -395,7 +395,7 @@ onDeactivated(() => {
               <Icon icon="fas fa-envelope" v-show="app.manifest.addons.email" v-tooltip="$t('apps.auth.email')" />
             </div>
           </template>
-          <template #actions="app">
+          <template #actions="{ item:app }">
             <ActionBar v-if="app.type === APP_TYPES.LINK" :actions="createAppLinkActionMenu(app)" />
             <ActionBar v-else :actions="createAppActionMenu(app)" />
           </template>

dashboard/src/views/DomainsView.vue

@@ -151,10 +151,10 @@ onMounted(async () => {
       <br/>
 
       <TableView :model="filteredDomains" :columns="columns" :busy="busy" style="max-height: 450px;" :placeholder="$t(search ? 'domains.noMatchesPlaceholder' : 'domains.emptyPlaceholder')">
-        <template #provider="domain">
+        <template #provider="{ item:domain }">
           {{ DomainsModel.prettyProviderName(domain.provider) }}
         </template>
-        <template #actions="domain">
+        <template #actions="{ item:domain }">
           <ActionBar :actions="createActionMenu(domain)" />
         </template>
       </TableView>

dashboard/src/views/EmailMailboxesView.vue

@@ -266,17 +266,17 @@ onMounted(async () => {
       </template>
 
       <TableView :columns="columns" :model="filteredMailboxes" :busy="busy" :fixed-layout="true" :placeholder="$t(searchFilter ? 'email.incoming.mailboxes.noMatchesPlaceholder' : 'email.incoming.mailboxes.emptyPlaceholder')">
-        <template #aliases="mailbox">{{ mailbox.aliases.map(a => a.name + '@' + a.domain).join(' ') }}</template>
-        <template #usage="mailbox">
+        <template #aliases="{ item:mailbox }">{{ mailbox.aliases.map(a => a.name + '@' + a.domain).join(' ') }}</template>
+        <template #usage="{ item:mailbox }">
           <!-- usage.diskSize can be missing for newly created mailboxes -->
           <span v-if="cachedMailboxUsage[mailbox.fullName]">{{ prettyDecimalSize(cachedMailboxUsage[mailbox.fullName].diskSize) || '-' }}</span>
           <span v-else>{{ $t('main.loadingPlaceholder') }} ...</span>
         </template>
-        <template #storageQuota="mailbox">
+        <template #storageQuota="{ item:mailbox }">
           <span v-if="mailbox.storageQuota > 0">{{ prettyDecimalSize(mailbox.storageQuota) }}</span>
           <span v-else>-</span>
         </template>
-        <template #actions="mailbox">
+        <template #actions="{ item:mailbox }">
           <ActionBar :actions="createActionMenu(mailbox)"/>
         </template>
       </TableView>

dashboard/src/views/EmailMailinglistsView.vue

@@ -170,13 +170,13 @@ onMounted(async () => {
       </template>
 
       <TableView :columns="columns" :model="filteredMailinglists" :busy="busy" :placeholder="$t(searchFilter ? 'email.incoming.mailinglists.noMatchesPlaceholder' : 'email.incoming.mailinglists.emptyPlaceholder')">
-        <template #membersOnly="mailinglist">
+        <template #membersOnly="{ item:mailinglist }">
           <i class="fas" :class="{ 'fa-door-closed': mailinglist.membersOnly, 'fa-door-open': !mailinglist.membersOnly }" v-tooltip="$t(mailinglist.membersOnly ? 'email.incoming.mailinglists.everyoneTooltip' : 'email.incoming.mailinglists.membersOnlyTooltip')"></i>
         </template>
-        <template #members="mailinglist">
+        <template #members="{ item:mailinglist }">
           {{ mailinglist.members.length }}
         </template>
-        <template #actions="mailinglist">
+        <template #actions="{ item:mailinglist }">
           <ActionBar :actions="createActionMenu(mailinglist)"/>
         </template>
       </TableView>

dashboard/src/views/GroupsView.vue

@@ -164,11 +164,11 @@ onMounted(async () => {
       </template>
 
       <TableView :columns="groupsColumns" :model="filteredGroups" :busy="busy" :fixed-layout="true" :placeholder="$t(searchFilter ? 'users.groups.noMatchesPlaceholder' : 'users.groups.emptyPlaceholder')">
-        <template #name="group">
+        <template #name="{ item:group }">
           {{ group.name }} &nbsp; <i v-if="group.source" class="far fa-address-book" v-tooltip="$t('users.groups.externalLdapTooltip')"></i>
         </template>
-        <template #users="group">{{ groupMembers(group) }}</template>
-        <template #actions="group">
+        <template #users="{ item:group }">{{ groupMembers(group) }}</template>
+        <template #actions="{ item:group }">
           <ActionBar :actions="createGroupActionMenu(group)" />
           <!-- <div style="text-align: right;"> -->
             <!-- <Button tool plain secondary @click.capture="onGroupActionMenu(group, $event)" icon="fa-solid fa-ellipsis" /> -->

dashboard/src/views/OpenIdView.vue

@@ -246,7 +246,7 @@ onMounted(async () => {
       </template>
 
       <TableView :columns="columns" :model="clients" :placeholder="$t('oidc.clients.empty')">
-        <template #actions="client">
+        <template #actions="{ item:client }">
           <ActionBar :actions="createActionMenu(client)"/>
         </template>
       </TableView>

dashboard/src/views/ServicesView.vue

@@ -264,18 +264,18 @@ onUnmounted(() => {
       <br/>
 
       <TableView :columns="columns" :model="servicesArray">
-        <template #status="service">
+        <template #status="{ item:service }">
           <StateLED :busy="!service.status" :state="state(service)" :title="stateTooltip(service)"/>
         </template>
-        <template #memoryPercent="service">
+        <template #memoryPercent="{ item:service }">
           <ProgressBar :value="service.memoryPercent" v-show="service.memoryPercent">
             <span style="font-weight: normal">{{ prettyBinarySize(service.memoryUsed) }} / {{ prettyBinarySize(service.memoryLimit) }} ({{ service.memoryPercent }}%)</span>
           </ProgressBar>
         </template>
-        <template #memoryLimit="service">
+        <template #memoryLimit="{ item:service }">
           <span v-show="service.memoryLimit">{{ prettyBinarySize(service.memoryLimit) }}</span>
         </template>
-        <template #actions="service">
+        <template #actions="{ item:service }">
           <ActionBar :actions="createActionMenu(service.id)"/>
         </template>
       </TableView>

dashboard/src/views/UsersView.vue

@@ -294,11 +294,11 @@ onMounted(async () => {
       </template>
 
       <TableView :columns="usersColumns" :model="filteredUsers" :busy="busy" :fixed-layout="true" :placeholder="$t(search ? 'users.users.noMatchesPlaceholder' : 'users.users.emptyPlaceholder')">
-        <template #avatar="user">
+        <template #avatar="{ item:user }">
           <img v-if="user.hasAvatar" :src="user.avatarUrl" @error="$event.target.src = '/img/avatar-default-symbolic.svg'" style="width: 30px; height: 30px; border-radius: 5px"/>
           <img v-else src="/img/avatar-default-symbolic.svg" style="width: 30px; height: 30px;"/>
         </template>
-        <template #user="user">
+        <template #user="{ item:user }">
           {{ user.displayName }}
           <span class="text-muted" style="margin: 0 6px" v-if="user.username">{{ user.username }}</span>
           <span class="text-muted" style="margin: 0 6px" v-else>{{ user.email }}</span>
@@ -306,21 +306,17 @@ onMounted(async () => {
           <i class="fa fa-ban" v-if="!user.active" v-tooltip="$t('users.users.inactiveTooltip')"></i>
           <!-- <i v-show="user.source" class="far fa-address-book" v-tooltip="$t('users.users.externalLdapTooltip')"></i> -->
         </template>
-        <template #groups="user">
+        <template #groups="{ item:user }">
           {{ user.groupIds.map(gid => groupsById[gid] ? groupsById[gid].name : gid).join(' ') }}
         </template>
-        <template #role="user">
+        <template #role="{ item:user }">
           <i class="fas fa-crown arrow" v-if="user.role === 'owner'" v-tooltip="$t('users.users.superadminTooltip')"></i>
           <i class="fa fa-user-tie arrow" v-else-if="user.role === 'admin'" v-tooltip="$t('users.users.adminTooltip')"></i>
           <i class="fas fa-users-cog arrow" v-else-if="user.role === 'usermanager'" v-tooltip="$t('users.users.usermanagerTooltip')"></i>
           <i class="fas fa-mail-bulk arrow" v-else-if="user.role === 'mailmanager'" v-tooltip="$t('users.users.mailmanagerTooltip')"></i>
         </template>
-        <template #actions="user">
+        <template #actions="{ item:user }">
           <ActionBar :actions="createUserActionMenu(user)" />
-          <!-- <div class="table-actions"> -->
-            <!-- <Button tool plain secondary :disabled="!canEdit(user)" @click.capture="onEditOrAddUser(user)" :tooltip="$t('main.action.edit')" icon="fa-solid fa-pencil-alt" /> -->
-            <!-- <Button tool plain secondary @click.capture="onUserActionMenu(user, $event)" icon="fa-solid fa-ellipsis" /> -->
-          <!-- </div> -->
         </template>
       </TableView>
     </Section>

dashboard/src/views/VolumesView.vue

@@ -325,19 +325,19 @@ onMounted(async () =>{
       <div v-html="$t('volumes.description')"></div>
       <br/>
       <TableView :columns="columns" :model="volumes" :busy="busy" :fixed-layout="true" :placeholder="$t('volumes.emptyPlaceholder')">
-        <template #target="volume">
+        <template #target="{ item:volume }">
           <span v-if="volume.mountType === 'mountpoint' || volume.mountType === 'filesystem'">{{ volume.hostPath }}</span>
           <span v-else-if="volume.mountType === 'ext4' || volume.mountType === 'xfs' || volume.mountType === 'disk'">{{ volume.mountOptions.diskPath }}</span>
           <span v-else-if="volume.mountType === 'sshfs'">{{ volume.mountOptions.host + '/' + volume.mountOptions.remoteDir }}</span>
           <!-- cifs/nfs -->
           <span v-else>{{ volume.mountOptions.host + volume.mountOptions.remoteDir }}</span>
         </template>
-        <template #status="volume">
+        <template #status="{ item:volume }">
           <div style="text-align: center;" :title="volume.message">
             <StateLED :busy="volume.busy" :state="volume.state"/>
           </div>
         </template>
-        <template #actions="volume">
+        <template #actions="{ item:volume }">
           <ActionBar :actions="createActionMenu(volume)"/>
         </template>
       </TableView>