From 9d85cb1d4d1b622205dda96338890f3b2e13ae1f Mon Sep 17 00:00:00 2001
From: Amitosh Swain Mahapatra <amitosh.swain@gmail.com>
Date: Jun 27 2018 12:29:00 +0000
Subject: Add detailed package view


---

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 6e42183..585596f 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -20,6 +20,7 @@ import { MorePage} from '../pages/more/more';
 import { NotificationsPage} from '../pages/notifications/notifications';
 import { WomenPage } from '../pages/women/women';
 import { PackageSearchPage } from '../pages/package-search/package-search';
+import { ViewPackagePage } from '../pages/view-package/view-package';
 
 import { Browser } from '../providers/browser/browser';
 
@@ -34,7 +35,8 @@ import { Browser } from '../providers/browser/browser';
     MorePage,
     NotificationsPage,
     WomenPage,
-    PackageSearchPage
+    PackageSearchPage,
+    ViewPackagePage
   ],
   imports: [
     BrowserModule,
@@ -53,7 +55,8 @@ import { Browser } from '../providers/browser/browser';
     MorePage,
     NotificationsPage,
     WomenPage,
-    PackageSearchPage
+    PackageSearchPage,
+    ViewPackagePage
   ],
   providers: [
     Browser,
diff --git a/src/app/app.scss b/src/app/app.scss
index a36de09..7d0f64f 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -133,3 +133,11 @@ ion-navbar {
         margin-top: unset;
     }
 }
+
+.pkg-lib {
+  color: #03A9F4
+}
+
+.pkg-devel {
+  color: #FFEB3B;
+}
diff --git a/src/pages/package-search/package-search.html b/src/pages/package-search/package-search.html
index 0bf676f..015bded 100644
--- a/src/pages/package-search/package-search.html
+++ b/src/pages/package-search/package-search.html
@@ -19,8 +19,8 @@
     <ion-list-header *ngIf="packages.length > 0">
         Showing {{ matches }} results
       </ion-list-header>
-    <ion-item *ngFor="let pkg of packages">
-      <ion-icon name="cube" item-start></ion-icon>
+    <ion-item (click)="showPackage(pkg)" *ngFor="let pkg of packages">
+      <ion-icon [ngClass]="getPackageType(pkg)" name="cube" item-start></ion-icon>
       <h2>{{ pkg.name }}</h2>
       <h3>{{ pkg.summary }}</h3>
     </ion-item>
diff --git a/src/pages/package-search/package-search.ts b/src/pages/package-search/package-search.ts
index 3155cdd..684f14e 100644
--- a/src/pages/package-search/package-search.ts
+++ b/src/pages/package-search/package-search.ts
@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
 import { NavController } from 'ionic-angular';
 import { PackageSearchProvider, Package } from '../../providers/package-search/package-search';
+import { ViewPackagePage } from '../view-package/view-package';
+import { getPackageType } from '../../utils';
 
 const RESULTS_PER_PAGE = 10;
 
@@ -32,4 +34,12 @@ export class PackageSearchPage {
     this.offset = 0;
     this.matches = 0;
   }
+
+  showPackage(pkg:Package) {
+    this.navCtrl.push(ViewPackagePage, { pkg });
+  }
+
+  getPackageType(pkg:Package) {
+    return getPackageType(pkg.name);
+  }
 }
diff --git a/src/pages/view-package/view-package.html b/src/pages/view-package/view-package.html
new file mode 100644
index 0000000..77955b4
--- /dev/null
+++ b/src/pages/view-package/view-package.html
@@ -0,0 +1,36 @@
+<!--
+  Generated template for the ViewPackagePage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Package {{ pkg.name }}</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content padding>
+  <h1>{{ pkg.name }}</h1>
+  <p>{{ pkg.summary }}</p>
+  <p *ngIf="pkg.upstreamUrl">
+    <a href="{{ pkg.upstreamUrl }}">{{ pkg.upstreamUrl }}</a>
+  </p>
+  <h3>Description</h3>
+  <p>{{ pkg.description }}</p>
+  <h3>Install</h3>
+  <p class="code-block" padding>
+    <code>$ <span>sudo dnf install {{ pkg.name }}</span></code>
+  </p>
+  <h3 *ngIf="pkg.subPackages.length > 0">Sub packages</h3>
+  <ion-list *ngIf="pkg.subPackages.length > 0">
+    <ion-item (click)="showPackage(pkg)" *ngFor="let pkg of pkg.subPackages">
+      <ion-icon [ngClass]="getPackageType(pkg)" name="cube" item-start></ion-icon>
+      <h2>{{ pkg.name }}</h2>
+      <h3>{{ pkg.summary }}</h3>
+    </ion-item>
+  </ion-list>
+</ion-content>
diff --git a/src/pages/view-package/view-package.scss b/src/pages/view-package/view-package.scss
new file mode 100644
index 0000000..82f4cdb
--- /dev/null
+++ b/src/pages/view-package/view-package.scss
@@ -0,0 +1,6 @@
+page-view-package {
+  .code-block {
+    background: #f0f0f0;
+    border-radius: 3px;
+  }
+}
diff --git a/src/pages/view-package/view-package.ts b/src/pages/view-package/view-package.ts
new file mode 100644
index 0000000..2d27ad9
--- /dev/null
+++ b/src/pages/view-package/view-package.ts
@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { NavController, NavParams } from 'ionic-angular';
+import { Package } from 'providers/package-search/package-search';
+import { getPackageType } from '../../utils';
+
+/**
+ * Generated class for the ViewPackagePage page.
+ *
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
+ */
+
+@Component({
+  selector: 'page-view-package',
+  templateUrl: 'view-package.html',
+})
+export class ViewPackagePage {
+
+  private pkg: Package;
+
+  constructor(public navCtrl: NavController, public navParams: NavParams) {
+    this.pkg = this.navParams.get('pkg') || {};
+  }
+
+  showPackage(pkg: Package) {
+    this.navCtrl.push(ViewPackagePage, { pkg });
+  }
+
+  getPackageType(pkg:Package) {
+    return getPackageType(pkg.name);
+  }
+}
diff --git a/src/utils.ts b/src/utils.ts
index a541bfe..8ea8f46 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -38,3 +38,27 @@ export function beautifyDate(postDate: any, type: string): string {
     return jsDate[1] + ' ' + jsDate[2] + ', ' + jsDate[3];
   }
 }
+
+/**
+ * Return the type of package from it names.
+ *
+ * Matches the name against the Fedora packaging guidelines
+ * Taken from: https://fedoraproject.org/wiki/Packaging:Naming?rd=Packaging:NamingGuidelines
+ * @param pkgName package name
+ */
+export function getPackageType(pkgName:string) {
+  if (pkgName.endsWith('-devel')) {
+    return 'pkg-devel';
+  } else if (pkgName.endsWith('-libs')) {
+    return 'pkg-lib';
+  } else if(pkgName.endsWith('-doc')) {
+    return 'pkg-doc';
+  } else if(/^\w*-langpack(-[a-zA-Z]{2})?$/.test(pkgName)) {
+    return 'pkg-langpack';
+  } else if(pkgName.endsWith('-fonts')) {
+    return 'pkg-font';
+  }
+
+  return '';
+}
+