Feat/nft showcase preview

src/app/admin/admin.component.ts

@@ -879,7 +879,7 @@ export class AdminComponent implements OnInit {
               createNFTFeeNanos >= 0 ? createNFTFeeNanos * 1e9 : -1,
               minimumNetworkFeeNanosPerKB >= 0
                 ? minimumNetworkFeeNanosPerKB
-                : this.globalParams.MinimumNetworkFeeNanosPerKB >= 0
+                : this.globalParams.MinimumNetworkFeeNanosPerKB > 0
                 ? this.globalParams.MinimumNetworkFeeNanosPerKB
                 : Math.floor(parseFloat(this.feeRateBitCloutPerKB) * 1e9)
             )

src/app/app.component.ts

@@ -143,7 +143,6 @@ export class AppComponent implements OnInit {
         if (res.DefaultFeeRateNanosPerKB > 0) {
           this.globalVars.defaultFeeRateNanosPerKB = res.DefaultFeeRateNanosPerKB;
         }
-        this.globalVars.defaultFeeRateNanosPerKB = res.DefaultFeeRateNanosPerKB;
         this.globalVars.globoMods = res.GloboMods;
         this.ref.detectChanges();
         this.globalVars.loadingInitialAppState = false;

src/app/backend-api.service.ts

@@ -85,6 +85,7 @@ export class BackendRoutes {
   static RoutePathAdminGetVerifiedUsers = "/api/v0/admin/get-verified-users";
   static RoutePathAdminGetUserAdminData = "/api/v0/admin/get-user-admin-data";
   static RoutePathAdminGetUsernameVerificationAuditLogs = "/api/v0/admin/get-username-verification-audit-logs";
+  static RoutePathGetNFTShowcasePreview = "/api/v0/admin/get-nft-showcase-preview";
   static RoutePathUpdateGlobalParams = "/api/v0/admin/update-global-params";
   static RoutePathSetUSDCentsToBitCloutReserveExchangeRate =
     "/api/v0/admin/set-usd-cents-to-bitclout-reserve-exchange-rate";
@@ -913,6 +914,20 @@ export class BackendApiService {
     });
   }
 
+  GetNFTShowcaseAdminPreview(
+    endpoint: string,
+    AdminPublicKey: string,
+    ReaderPublicKeyBase58Check: string,
+    DropIdx: number
+  ): Observable<any> {
+    return this.jwtPost(endpoint, BackendRoutes.RoutePathGetNFTShowcasePreview, AdminPublicKey, {
+      AdminPublicKey,
+      ReaderPublicKeyBase58Check,
+      DropIdx,
+    });
+  }
+
+
   GetNextNFTShowcase(endpoint: string, UserPublicKeyBase58Check: string): Observable<any> {
     return this.post(endpoint, BackendRoutes.RoutePathGetNextNFTShowcase, {
       UserPublicKeyBase58Check,

src/app/nft-drop-mgr/nft-drop-mgr.component.html

@@ -97,21 +97,35 @@
 <simple-center-loader *ngIf="loading"></simple-center-loader>
 
 <div class="w-100 light-grey-divider border-bottom border-top border-color-grey" style="height:10px"></div>
-
-<div *ngIf="posts.length > 0 && (!loading || loadingNewDrop)" class="p-15px fs-15px">
-  <b *ngIf="!loadingNewDrop">NFTs in this drop:</b>
-  <div #uiScroll *uiScroll="let post of datasource" [ngClass]="{'d-flex align-items-center mt-15px border border-color-grey br-8px': !loadingNewDrop}">
-    <i (click)="removeNFT(post.PostHashHex)"
-       class="p-10px far fa-trash-alt fc-red cursor-pointer" *ngIf="!loadingNewDrop"></i>
-    <feed-post
-      class="flex-grow-1 border-left border-color-grey cursor-pointer"
-      *ngIf="post.PostHashHex !== nftBeingRemoved && !loadingNewDrop"
-      [post]="post"
-      [includePaddingOnPost]="true"
-      [showReplyingToContent]="!!post.parentPost"
-      [parentPost]="post.parentPost"
-      [contentShouldLinkToThread]="true"
-    ></feed-post>
-    <span *ngIf="post.PostHashHex === nftBeingRemoved">&nbsp;Removing...</span>
+<tab-selector [tabs]="adminNFTTabs" [activeTab]="activeTab" (tabClick)="_handleTabClick($event)"></tab-selector>
+<!--Admin panel-->
+<div *ngIf="posts.length && (!loading || loadingNewDrop)">
+  <div *ngIf="activeTab === showcaseManagement" class="p-15px fs-15px">
+    <b *ngIf="!loadingNewDrop">NFTs in this drop:</b>
+    <div
+      #uiScroll
+      *uiScroll="let post of datasource"
+      [ngClass]="{ 'd-flex align-items-center mt-15px border border-color-grey br-8px': !loadingNewDrop }"
+    >
+      <i
+        (click)="removeNFT(post.PostHashHex)"
+        class="p-10px far fa-trash-alt fc-red cursor-pointer"
+        *ngIf="!loadingNewDrop"
+      ></i>
+      <feed-post
+        class="flex-grow-1 border-left border-color-grey cursor-pointer"
+        *ngIf="post.PostHashHex !== nftBeingRemoved && !loadingNewDrop"
+        [post]="post"
+        [includePaddingOnPost]="true"
+        [showReplyingToContent]="!!post.parentPost"
+        [parentPost]="post.parentPost"
+        [contentShouldLinkToThread]="true"
+      ></feed-post>
+      <span *ngIf="post.PostHashHex === nftBeingRemoved">&nbsp;Removing...</span>
+    </div>
+  </div>
+  <!--Showcase preview-->
+  <div *ngIf="activeTab === showcasePreview">
+    <nft-showcase [showcaseIdx]="dropNumber"></nft-showcase>
   </div>
 </div>

src/app/nft-drop-mgr/nft-drop-mgr.component.ts

@@ -1,15 +1,21 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, Input, OnInit } from "@angular/core";
 import { GlobalVarsService } from "../global-vars.service";
 import { BackendApiService } from "../backend-api.service";
 import { SwalHelper } from "../../lib/helpers/swal-helper";
 import { InfiniteScroller } from "../infinite-scroller";
 import { IAdapter, IDatasource } from "ngx-ui-scroll";
+import { ActivatedRoute, Router } from "@angular/router";
 
 @Component({
   selector: "nft-drop-mgr",
   templateUrl: "./nft-drop-mgr.component.html",
 })
 export class NftDropMgrComponent implements OnInit {
+  showcaseManagement = "Manage Showcase";
+  showcasePreview = "Showcase Preview";
+
+  @Input() activeTab = this.showcaseManagement;
+
   globalVars: GlobalVarsService;
 
   loading: boolean = false;
@@ -47,10 +53,25 @@ export class NftDropMgrComponent implements OnInit {
 
   datasource: IDatasource<IAdapter<any>> = this.infiniteScroller.getDatasource();
 
-  constructor(private _globalVars: GlobalVarsService, private backendApi: BackendApiService) {
+  adminNFTTabs = [this.showcaseManagement, this.showcasePreview];
+  switchingTabs = false;
+
+  constructor(
+    private _globalVars: GlobalVarsService,
+    private backendApi: BackendApiService,
+    private router: Router,
+    private route: ActivatedRoute
+  ) {
     this.globalVars = _globalVars;
   }
 
+  _handleTabClick(tab: string) {
+    this.activeTab = tab;
+    if (this.activeTab === this.showcaseManagement) {
+      this.datasource = this.infiniteScroller.getDatasource();
+    }
+  }
+
   ngOnInit(): void {
     // Get the latest NFT drop
     this.loading = true;

src/app/nft-showcase/nft-showcase.component.html

@@ -17,7 +17,7 @@
   </div>
 </div>
 
-<div *ngIf="!loading && !nftCollections || !nftCollections.length" class="d-flex align-items-center justify-content-center">
+<div *ngIf="!loading && !nftCollections?.length" class="d-flex align-items-center justify-content-center">
 
   <div class="d-flex flex-column align-items-center justify-content-center fc-muted fs-15px p-15px text-center" style="height: 400px;">
     <div>The NFT Showcase is coming soon!</div>

src/app/nft-showcase/nft-showcase.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, Input, OnInit } from "@angular/core";
 import { BackendApiService, NFTCollectionResponse } from "../backend-api.service";
 import { GlobalVarsService } from "../global-vars.service";
 import { InfiniteScroller } from "../infinite-scroller";
@@ -10,6 +10,8 @@ import { uniqBy } from "lodash";
   templateUrl: "./nft-showcase.component.html",
 })
 export class NftShowcaseComponent implements OnInit {
+  @Input() showcaseIdx: number;
+
   globalVars: GlobalVarsService;
   loading: boolean = false;
   nftCollections: NFTCollectionResponse[];
@@ -33,8 +35,7 @@ export class NftShowcaseComponent implements OnInit {
     this.globalVars = _globalVars;
   }
 
-  ngOnInit(): void {
-    this.loading = true;
+  getCurrentShowcase() {
     this.backendApi
       .GetNFTShowcase(
         this.globalVars.localNode,
@@ -62,6 +63,50 @@ export class NftShowcaseComponent implements OnInit {
       });
   }
 
+  getShowcaseByIdx(dropIdx) {
+    this.backendApi
+      .GetNFTShowcaseAdminPreview(
+        this.globalVars.localNode,
+        this.globalVars.loggedInUser?.PublicKeyBase58Check,
+        this.globalVars.loggedInUser?.PublicKeyBase58Check,
+        dropIdx
+      )
+      .subscribe(
+        (res: any) => {
+          this.nftCollections = res.NFTCollections;
+          if (this.nftCollections) {
+            this.nftCollections.sort((a, b) => b.HighestBidAmountNanos - a.HighestBidAmountNanos);
+          }
+          this.lastPage = Math.floor(this.nftCollections.length / NftShowcaseComponent.PAGE_SIZE);
+        },
+        (error) => {
+          this.globalVars._alertError(error.error.error);
+        }
+      )
+      .add(() => {
+        this.loading = false;
+      });
+  }
+
+  refreshPage(): void {
+    this.loading = true;
+    if (this.showcaseIdx === undefined) {
+      this.getCurrentShowcase();
+    } else {
+      this.getShowcaseByIdx(this.showcaseIdx);
+    }
+  }
+
+  ngOnInit(): void {
+    this.refreshPage();
+  }
+
+  ngOnChanges(changes: any): void {
+    if (changes.showcaseIdx && changes.showcaseIdx !== this.showcaseIdx) {
+      this.refreshPage();
+    }
+  }
+
   getPage(page: number) {
     if (this.lastPage != null && page > this.lastPage) {
       return [];