feat: Enhance package management with new properties and URL handling

Author: aliasadidev

.vscode/tasks.json

@@ -32,6 +32,18 @@
       "label": "tasks: watch-tests",
       "dependsOn": ["npm: watch", "npm: watch-tests"],
       "problemMatcher": []
+    },
+    {
+      "label": "ng build front-end",
+      "type": "shell",
+      "command": "ng",
+      "args": [
+        "build"
+      ],
+      "options": {
+        "cwd": "${workspaceFolder}/front-end"
+      },
+      "problemMatcher": []
     }
   ]
 }

front-end/src/app/components/install-package/install-package.component.html

@@ -153,20 +153,13 @@
                 </div>
                 <div
                   class="d-flex flex-column d-flex"
-                  style="text-align: right">
+                  style="text-align: right;min-width: 100px;">
                   <span style="white-space: pre" *ngIf="package.totalDownloads">
                     Total Downloads: {{ package.totalDownloads | number: '0.' }}
                   </span>
                   <a
                     class="packageUrl"
-                    [attr.href]="
-                      getPackageSourceWebUrl(
-                        this.originalPackageSources,
-                        +source.key,
-                        package.id,
-                        package.stableVersion ?? ''
-                      )
-                    "
+                    [attr.href]="package.packageWebUrl"
                     target="_blank"
                     >View In Web</a
                   >

front-end/src/app/components/install-package/install-package.component.ts

@@ -9,8 +9,8 @@ import { DropDownKeyValue } from 'src/app/models/drop-down-key-value';
 import { CommandService } from 'src/app/services/command-service/command.service';
 import { AlertService } from 'src/app/services/alert-service/alert.service';
 import { PackageSource } from '../../../../../src/models/option.model';
-import { getPackageSourceWebUrl } from '../../shared/component-shared';
 import { findStableVersion } from '../../../../../src/services/version.service';
+import { getPackageSourceWebUrl } from 'src/app/shared/component-shared';
 
 @Component({
   selector: 'app-install-package',
@@ -122,6 +122,12 @@ export class InstallPackageComponent implements AfterViewInit {
             this.packageSearchResultList[source.packageSourceId] = source;
             source.packages.forEach(p => {
               p.stableVersion = this.findPackageStableVersion(p.versions);
+              p.packageWebUrl = getPackageSourceWebUrl(
+                this.originalPackageSources.find(x => x.id == packageSourceId)!,
+                p.id,
+                p.stableVersion,
+                [p.projectUrl]
+              );
             });
             this.sourcesPages[source.packageSourceId] = pageNumber;
             this.cd.detectChanges();
@@ -214,6 +220,4 @@ export class InstallPackageComponent implements AfterViewInit {
     }
     return result;
   }
-
-  getPackageSourceWebUrl = getPackageSourceWebUrl;
 }

front-end/src/app/components/project-list/project-list.component.html

@@ -94,14 +94,7 @@
                 <a
                   class="packageUrl"
                   *ngIf="package.sourceId"
-                  [attr.href]="
-                    getPackageSourceWebUrl(
-                      packageSources,
-                      package.sourceId,
-                      package.packageName,
-                      package.packageVersion
-                    )
-                  "
+                  [attr.href]="package.packageWebUrl"
                   target="_blank"
                   >{{ package.sourceName }}</a
                 >

front-end/src/app/components/project-list/project-list.component.ts

@@ -3,12 +3,12 @@ import { FilterSearchTypes } from 'src/app/models/filter-search-type';
 import { AlertService } from 'src/app/services/alert-service/alert.service';
 import { CommandService } from 'src/app/services/command-service/command.service';
 import { LoadingScreenService } from 'src/app/services/loading-screen/loading-screen.service';
-import { getPackageSourceWebUrl } from 'src/app/shared/component-shared';
 import { PackageSource } from '../../../../../src/models/option.model';
 import {
   PackageDetail,
   Project,
 } from '../../../../../src/models/project.model';
+import { getPackageSourceWebUrl } from 'src/app/shared/component-shared';
 
 @Component({
   selector: 'app-project-list',
@@ -55,7 +55,7 @@ export class ProjectListComponent implements AfterViewInit {
   getData() {
     this.loading.startLoading();
     this.commandSrv.getData().subscribe(res => {
-      this.projects = res.result;
+      this.setProjects(res.result);
       this.loading.stopLoading();
 
       this.cd.detectChanges();
@@ -67,13 +67,27 @@ export class ProjectListComponent implements AfterViewInit {
 
     this.loading.startLoading();
     this.commandSrv.reload(loadVersion).subscribe(res => {
-      this.projects = res.result;
+      this.setProjects(res.result);
 
       this.loading.stopLoading();
       this.cd.detectChanges();
     });
   }
 
+  setProjects(projects: Project[]) {
+    projects.forEach(res => {
+      res.packages.forEach(pkg => {
+        pkg.packageWebUrl = getPackageSourceWebUrl(
+          this.packageSources.find(x => x.id == pkg.sourceId)!,
+          pkg.packageName,
+          pkg.packageVersion,
+          []
+        );
+      });
+    });
+    this.projects = projects;
+  }
+
   updateAllProjects() {
     this.loading.startLoading();
     if (this.versionIsLoad == false) {
@@ -141,7 +155,7 @@ export class ProjectListComponent implements AfterViewInit {
 
     this.commandSrv
       .removePackage(projectId, packageName, selectedVersion)
-      .subscribe(res => {
+      .subscribe(() => {
         this.getData();
       });
   }
@@ -185,8 +199,4 @@ export class ProjectListComponent implements AfterViewInit {
       this.cd.detectChanges();
     }
   }
-
-  // ---------------- end search box ------------------------------
-
-  getPackageSourceWebUrl = getPackageSourceWebUrl;
 }

front-end/src/app/shared/component-shared.ts

@@ -1,22 +1,16 @@
 import { PackageSource } from '../../../../src/models/option.model';
 
 export function getPackageSourceWebUrl(
-  packageSources: PackageSource[],
-  packageSourceId: number | null,
+  packageSource: PackageSource,
   packageName: string,
-  version: string
+  version: string,
+  extraUrl: string[]
 ) {
-  let src = packageSources.find(x => x.id == packageSourceId);
-  if (!(src && src?.packageUrl)) {
-    console.log(
-      'packageUrl is empty!',
-      packageSources,
-      packageSourceId,
-      packageName
-    );
-    return '#';
-  } else
-    return src?.packageUrl
+  if (packageSource?.packageUrl) {
+    return packageSource?.packageUrl
       .replace('{{packageName}}', packageName)
       .replace('{{version}}', version);
+  } else {
+    return extraUrl.find(x => x) ?? '#';
+  }
 }