Fixed a bug where when no devices, the submenu item would still render. (#1558)

API/Controllers/DeviceController.cs

@@ -6,6 +6,7 @@ using API.Data.Repositories;
 using API.DTOs.Device;
 using API.Extensions;
 using API.Services;
+using Kavita.Common;
 using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.Mvc;
 
@@ -81,7 +82,15 @@ public class DeviceController : BaseApiController
         if (await _emailService.IsDefaultEmailService())
             return BadRequest("Send to device cannot be used with Kavita's email service. Please configure your own.");
 
-        if (await _deviceService.SendTo(dto.ChapterId, dto.DeviceId)) return Ok();
+        try
+        {
+            var success = await _deviceService.SendTo(dto.ChapterId, dto.DeviceId);
+            if (success) return Ok();
+        }
+        catch (KavitaException ex)
+        {
+            return BadRequest(ex.Message);
+        }
 
         return BadRequest("There was an error sending the file to the device");
     }

UI/Web/src/app/_services/action-factory.service.ts

@@ -93,13 +93,14 @@ export interface ActionItem<T> {
   requiresAdmin: boolean;
   children: Array<ActionItem<T>>;
   /**
-   * Indicates that there exists a separate list will be loaded from an API
+   * Indicates that there exists a separate list will be loaded from an API.
+   * Rule: If using this, only one child should exist in children with the Action for dynamicList.
    */
   dynamicList?: Observable<{title: string, data: any}[]> | undefined;
   /**
    * Extra data that needs to be sent back from the card item. Used mainly for dynamicList. This will be the item from dyanamicList return
    */
-  _extra?: any;
+  _extra?: {title: string, data: any};
 }
 
 @Injectable({
@@ -416,13 +417,16 @@ export class ActionFactoryService {
         title: 'Send To',
         callback: this.dummyCallback,
         requiresAdmin: false,
+        // dynamicList: this.deviceService.devices$.pipe(map((devices: Array<Device>) => devices.map(d => {
+        //   return {'title': d.name, 'data': d};
+        // }), shareReplay())),
         children: [
           {
             action: Action.SendTo,
             title: '',
             callback: this.dummyCallback,
             requiresAdmin: false,
-            dynamicList: this.deviceService.devices$.pipe(map(devices => devices.map(d => {
+            dynamicList: this.deviceService.devices$.pipe(map((devices: Array<Device>) => devices.map(d => {
               return {'title': d.name, 'data': d};
             }), shareReplay())),
             children: []

UI/Web/src/app/cards/card-detail-drawer/card-detail-drawer.component.ts

@@ -221,7 +221,7 @@ export class CardDetailDrawerComponent implements OnInit, OnDestroy {
         break;
       case (Action.SendTo):
       {
-        const device = (action._extra.data as Device);
+        const device = (action._extra!.data as Device);
         this.deviceSerivce.sendTo(chapter.id, device.id).subscribe(() => {
           this.toastr.success('File emailed to ' + device.name);
         });

UI/Web/src/app/cards/card-item/card-actionables/card-actionables.component.html

@@ -7,23 +7,29 @@
     </div>
 	<ng-template #submenu let-list="list">
 		<ng-container *ngFor="let action of list">
-      <ng-container *ngIf="action.children === undefined || action?.children?.length === 0 else submenuDropdown">
+      <!-- Non Submenu items -->
-        <ng-container *ngIf="action.dynamicList != undefined; else justItem">
+      <ng-container *ngIf="action.children === undefined || action?.children?.length === 0 || action.dynamicList != undefined; else submenuDropdown">
-          <ng-container *ngFor="let dynamicItem of (action.dynamicList | async)">
+
+        <ng-container *ngIf="action.dynamicList != undefined && toDList(action.dynamicList | async) as dList; else justItem">
+          <ng-container *ngFor="let dynamicItem of dList">
             <button ngbDropdownItem (click)="performDynamicClick($event, action, dynamicItem)">{{dynamicItem.title}}</button>
           </ng-container>
         </ng-container>
+
         <ng-template #justItem>
           <button ngbDropdownItem *ngIf="willRenderAction(action)" (click)="performAction($event, action)">{{action.title}}</button>
         </ng-template>
       </ng-container>
       <ng-template #submenuDropdown>
+        <!-- Submenu items -->
+        <ng-container *ngIf="shouldRenderSubMenu(action, action.children[0].dynamicList | async)">
           <div ngbDropdown #subMenuHover="ngbDropdown" placement="right" (mouseover)="preventEvent($event); openSubmenu(action.title, subMenuHover)" (mouseleave)="preventEvent($event)">
             <button id="actions-{{action.title}}" class="submenu-toggle" ngbDropdownToggle>{{action.title}} <i class="fa-solid fa-angle-right submenu-icon"></i></button>
             <div ngbDropdownMenu attr.aria-labelledby="actions-{{action.title}}">
               <ng-container *ngTemplateOutlet="submenu; context: { list: action.children }"></ng-container>
             </div>
           </div>
+        </ng-container>
       </ng-template>
 		</ng-container>
 	</ng-template>

UI/Web/src/app/cards/card-item/card-actionables/card-actionables.component.ts

@@ -47,10 +47,14 @@ export class CardActionablesComponent implements OnInit {
     }
   }
 
-  willRenderAction(action: ActionItem<any>): boolean {
+  willRenderAction(action: ActionItem<any>) {
     return (action.requiresAdmin && this.isAdmin) 
         || (action.action === Action.Download && (this.canDownload || this.isAdmin))
-        || (!action.requiresAdmin && action.action !== Action.Download)
+        || (!action.requiresAdmin && action.action !== Action.Download);
+  }
+
+  shouldRenderSubMenu(action: ActionItem<any>, dynamicList: null | Array<any>) {
+    return (action.children[0].dynamicList === undefined || action.children[0].dynamicList === null) || (dynamicList !== null && dynamicList.length > 0);
   }
 
   openSubmenu(actionTitle: string, subMenu: NgbDropdown) {
@@ -71,4 +75,9 @@ export class CardActionablesComponent implements OnInit {
     this.performAction(event, action);
   }
 
+  toDList(d: any) {
+    console.log('d: ', d);
+    if (d === undefined || d === null) return [];
+    return d as {title: string, data: any}[];
+  }
 }

UI/Web/src/app/series-detail/series-detail.component.ts

@@ -446,7 +446,7 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterContentChe
         break;
       case (Action.SendTo):
         {
-          const device = (action._extra.data as Device);
+          const device = (action._extra!.data as Device);
           this.deviceSerivce.sendTo(chapter.id, device.id).subscribe(() => {
             this.toastr.success('File emailed to ' + device.name);
           });