web-app: Upgrade Angular and PrimeNG from V15 to V16

MythTV · Aug 21, 2024 · afa8b38 · afa8b38
1 parent 5a41c32
commit afa8b38
Show file tree

Hide file tree

Showing 11 changed files with 1,270 additions and 1,263 deletions.
diff --git a/mythtv/html/apps/backend/3rdpartylicenses.txt b/mythtv/html/apps/backend/3rdpartylicenses.txt
@@ -259,26 +259,11 @@ Apache-2.0
 
 
 
-tslib
-0BSD
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-
 zone.js
 MIT
 The MIT License
 
-Copyright (c) 2010-2022 Google LLC. https://angular.io/license
+Copyright (c) 2010-2023 Google LLC. https://angular.io/license
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/mythtv/html/apps/backend/index.html b/mythtv/html/apps/backend/index.html
@@ -1,4 +1,6 @@
-<!DOCTYPE html><html lang="en"><head>
+<!doctype html>
+<html lang="en" data-critters-container>
+<head>
   <meta charset="utf-8">
   <title>MythTV Backend</title>
   <base href="/">
@@ -7,9 +9,8 @@
   <link id="app-theme" rel="stylesheet" type="text/css" href="assets/themes/md-light-indigo.css">
   <link rel="stylesheet" type="text/css" href="/assets/guidecolors.css">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-<style>html,body{height:100%}body{margin:0;height:100%;overflow-x:hidden;overflow-y:auto;background-color:var(--surface-a);font-family:var(--font-family);font-weight:400;color:var(--text-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}</style><link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.css"></noscript></head>
+<style>html,body{height:100%}body{margin:0;height:100%;overflow-x:hidden;overflow-y:auto;background-color:var(--surface-a);font-family:var(--font-family);font-weight:400;color:var(--text-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@layer primeng{}</style><link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.css"></noscript></head>
 <body>
   <app-root></app-root>
-<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="main.js" type="module"></script>
-
-</body></html>
+<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="main.js" type="module"></script></body>
+</html>
diff --git a/mythtv/html/apps/backend/main.js b/mythtv/html/apps/backend/main.js
diff --git a/mythtv/html/apps/backend/polyfills.js b/mythtv/html/apps/backend/polyfills.js
diff --git a/mythtv/html/apps/backend/styles.css b/mythtv/html/apps/backend/styles.css
diff --git a/mythtv/html/backend/angular.json b/mythtv/html/backend/angular.json
@@ -40,8 +40,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "3mb"
+                  "maximumWarning": "3mb",
+                  "maximumError": "4mb"
                 },
                 {
                   "type": "anyComponentStyle",

diff --git a/mythtv/html/backend/package-lock.json b/mythtv/html/backend/package-lock.json
diff --git a/mythtv/html/backend/package.json b/mythtv/html/backend/package.json
@@ -11,20 +11,20 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^16.2.12",
-    "@angular/cdk": "^15.2.9",
+    "@angular/cdk": "^16.2.14",
     "@angular/cli": "^16.2.14",
     "@angular/common": "^16.2.12",
     "@angular/compiler": "^16.2.12",
     "@angular/core": "^16.2.12",
     "@angular/forms": "^16.2.12",
-    "@angular/material": "^15.2.9",
+    "@angular/material": "^16.2.14",
     "@angular/platform-browser": "^16.2.12",
     "@angular/platform-browser-dynamic": "^16.2.12",
     "@angular/router": "^16.2.12",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
     "primeflex": "^3.1.2",
-    "primeng": "^15.4.1",
+    "primeng": "^16.4.4",
     "rxjs": "^7.8.1",
     "tslib": "^2.1.0",
     "zone.js": "~0.13.3"
@@ -42,4 +42,4 @@
     "karma-jasmine-html-reporter": "^1.7.0",
     "typescript": "~5.1.6"
   }
-}
+}
diff --git a/mythtv/html/backend/src/app/dashboard/recordings/recordings.component.ts b/mythtv/html/backend/src/app/dashboard/recordings/recordings.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
-import { FilterMatchMode, LazyLoadEvent, MenuItem, MessageService, SelectItem } from 'primeng/api';
+import { FilterMatchMode, MenuItem, MessageService, SelectItem } from 'primeng/api';
 import { Menu } from 'primeng/menu';
-import { Table } from 'primeng/table';
+import { TableLazyLoadEvent } from 'primeng/table';
 import { PartialObserver } from 'rxjs';
 import { DvrService } from 'src/app/services/dvr.service';
 import { GetRecordedListRequest, UpdateRecordedMetadataRequest } from 'src/app/services/interfaces/dvr.interface';
@@ -28,7 +28,7 @@ export class RecordingsComponent implements OnInit {
   actionList: ScheduleOrProgram[] = [];
   recGroups: string[] = [];
   newRecGroup = '';
-  lazyLoadEvent!: LazyLoadEvent;
+  lazyLoadEvent!: TableLazyLoadEvent;
   JobQCmds!: JobQCommands;
   program: ScheduleOrProgram = <ScheduleOrProgram>{ Title: '', Recording: {} };
   editingProgram?: ScheduleOrProgram;
@@ -139,7 +139,7 @@ export class RecordingsComponent implements OnInit {
     this.loadLazy({ first: 0, rows: 1 });
   }
 
-  loadLazy(event: LazyLoadEvent) {
+  loadLazy(event: TableLazyLoadEvent) {
     this.lazyLoadEvent = event;
     let request: GetRecordedListRequest = {
       StartIndex: 0,
@@ -149,23 +149,28 @@ export class RecordingsComponent implements OnInit {
       request.StartIndex = event.first;
       if (event.last)
         request.Count = event.last - event.first;
-      else
+      else if (event.rows)
         request.Count = event.rows;
       // When it only requests 50 rows, page down waits until the entire
       // screen is empty before loading the next page. Fix this by always
       // requesting at least 100 records.
       // if (!request.Count || request.Count < 100)
       //   request.Count = 100;
     }
-    if (!event.sortField)
-      event.sortField = 'Title';
-    request.Sort = event.sortField
-    if (event.sortField == 'Airdate')
+    let sortField = '';
+    if (Array.isArray(event.sortField))
+      sortField = event.sortField[0];
+    else if (event.sortField)
+      sortField = event.sortField;
+    if (!sortField)
+      sortField = 'Title';
+    request.Sort = sortField;
+    if (sortField == 'Airdate')
       request.Sort = 'originalairdate';
-    else if (event.sortField == 'Recording.RecGroup')
+    else if (sortField == 'Recording.RecGroup')
       request.Sort = 'recgroup';
     else
-      request.Sort = event.sortField;
+      request.Sort = sortField;
     let sortOrder = ' asc';
     if (event.sortOrder && event.sortOrder < 0)
       sortOrder = ' desc';

diff --git a/mythtv/html/backend/src/app/dashboard/upcoming/upcoming.component.ts b/mythtv/html/backend/src/app/dashboard/upcoming/upcoming.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { LazyLoadEvent, MessageService } from 'primeng/api';
+import { MessageService } from 'primeng/api';
+import { TableLazyLoadEvent } from 'primeng/table';
 import { ScheduleLink, SchedulerSummary } from 'src/app/schedule/schedule.component';
 import { DataService } from 'src/app/services/data.service';
 import { DvrService } from 'src/app/services/dvr.service';
@@ -34,7 +35,7 @@ export class UpcomingComponent implements OnInit, SchedulerSummary {
   refreshing = false;
   loaded = false;
   inter: ScheduleLink = { summaryComponent: this };
-  lazyLoadEvent!: LazyLoadEvent;
+  lazyLoadEvent!: TableLazyLoadEvent;
 
   displayStop = false;
   errorCount = 0;
@@ -89,7 +90,7 @@ export class UpcomingComponent implements OnInit, SchedulerSummary {
     });
   }
 
-  loadLazy(event: LazyLoadEvent) {
+  loadLazy(event: TableLazyLoadEvent) {
     this.lazyLoadEvent = event;
 
     let request: GetUpcomingRequest = {
@@ -101,15 +102,20 @@ export class UpcomingComponent implements OnInit, SchedulerSummary {
       request.StartIndex = event.first;
       if (event.last)
         request.Count = event.last - event.first;
-      else
+      else if (event.rows)
         request.Count = event.rows;
     }
-    if (!event.sortField)
-      event.sortField = 'StartTime';
-    if (event.sortField == 'Channel.ChanNum')
+    let sortField = '';
+    if (Array.isArray(event.sortField))
+      sortField = event.sortField[0];
+    else if (event.sortField)
+      sortField = event.sortField;
+    if (!sortField)
+      sortField = 'StartTime';
+    if (sortField == 'Channel.ChanNum')
       request.Sort = 'ChanNum';
     else
-      request.Sort = event.sortField;
+      request.Sort = sortField;
     let sortOrder = '';
     if (event.sortOrder && event.sortOrder < 0)
       sortOrder = ' desc';

diff --git a/mythtv/html/backend/src/app/dashboard/videos/videos.component.ts b/mythtv/html/backend/src/app/dashboard/videos/videos.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
-import { LazyLoadEvent, MenuItem, MessageService } from 'primeng/api';
+import { MenuItem, MessageService } from 'primeng/api';
 import { Menu } from 'primeng/menu';
-import { Table } from 'primeng/table';
+import { Table, TableLazyLoadEvent } from 'primeng/table';
 import { PartialObserver } from 'rxjs';
 import { GetVideoListRequest, UpdateVideoMetadataRequest, VideoMetadataInfo } from 'src/app/services/interfaces/video.interface';
 import { UtilityService } from 'src/app/services/utility.service';
@@ -31,7 +31,7 @@ export class VideosComponent implements OnInit {
   displayMetadataDlg = false;
   displayUnsaved = false;
   showAllVideos = false;
-  lazyLoadEvent : LazyLoadEvent = {};
+  lazyLoadEvent : TableLazyLoadEvent = {};
   totalRecords = 0;
   showTable = false;
 
@@ -72,7 +72,7 @@ export class VideosComponent implements OnInit {
     this.loadLazy({ first: 0, rows: 1 });
   }
 
-  loadLazy(event: LazyLoadEvent) {
+  loadLazy(event: TableLazyLoadEvent) {
     console.log(event)
     this.lazyLoadEvent = event;
     let request: GetVideoListRequest = {
@@ -83,20 +83,28 @@ export class VideosComponent implements OnInit {
       Count: 1
     };
 
-    if (event.sortField) {
-      request.Sort = event.sortField;
-      if (event.sortOrder)
-        request.Descending = (event.sortOrder < 0);
-    }
-    request.Sort += ',title,releasedate,season,episode'
-
     if (event.first != undefined) {
       request.StartIndex = event.first;
       if (event.last)
         request.Count = event.last - event.first;
-      else
+      else if (event.rows)
         request.Count = event.rows;
     }
+
+    let sortField = '';
+    if (Array.isArray(event.sortField))
+      sortField = event.sortField[0];
+    else if (event.sortField)
+      sortField = event.sortField;
+    if (!sortField)
+      sortField = 'title';
+    if (sortField) {
+      request.Sort = sortField;
+      if (event.sortOrder)
+        request.Descending = (event.sortOrder < 0);
+    }
+    request.Sort += ',title,releasedate,season,episode'
+
     this.videoService.GetVideoList(request).subscribe(data => {
       let newList = data.VideoMetadataInfoList;
       this.totalRecords = data.VideoMetadataInfoList.TotalAvailable;