Implement GitHubBadgeSystemExplorerPage.

Dockerfile

@@ -0,0 +1,4 @@
+FROM mcr.microsoft.com/dotnet/aspnet:7.0
+WORKDIR /app
+COPY publish ./
+ENTRYPOINT ["dotnet", "CrystallineSociety.Server.Api.dll"]

azure-pipelines.yml

@@ -0,0 +1,92 @@
+name: $(version).$(Build.BuildId)
+
+variables:
+  WEB_APP_DEPLOYMENT_TYPE: 'DefaultDeploymentType'
+
+jobs:
+
+- job: build_blazor_api_wasm
+  displayName: 'build blazor api + web assembly'
+
+  pool:
+    vmImage: 'ubuntu-latest'
+
+  steps:
+
+  - task: Assembly-Info-NetCore@3
+    displayName: 'Set Assembly Manifest Data'
+    inputs:
+      Company: Cs Internship
+      Product: Cs System
+      VersionNumber: '$(Build.BuildNumber)'
+      FileVersionNumber: '$(Build.BuildNumber)'
+      InformationalVersion: '$(Build.BuildNumber)'
+      PackageVersion: '$(Build.BuildNumber)'
+
+  - task: UseDotNet@2
+    displayName: 'Setup .NET'
+    inputs:
+      useGlobalJson: true
+      workingDirectory: 'src'
+
+  - task: UseDotNet@2
+    displayName: 'Use dotnet sdk 6.x for LibSassBuilder'
+    inputs:
+      version: 6.x
+
+  - task: Bash@3
+    displayName: 'Restore workloads'
+    inputs:
+      targetType: 'inline'
+      script: 'dotnet workload restore src/CrystallineSociety/Client/Web/CrystallineSociety.Client.Web.csproj -p:BlazorMode=BlazorWebAssembly'
+
+  - task: Bash@3
+    displayName: 'Switch to blazor web assembly'
+    inputs:
+      targetType: 'inline'
+      script: sed -i 's/Microsoft.NET.Sdk.Web/Microsoft.NET.Sdk.BlazorWebAssembly/g' src/CrystallineSociety/Client/Web/CrystallineSociety.Client.Web.csproj
+  - task: Bash@3
+    displayName: 'Build migrations bundle'
+    inputs:
+      targetType: 'inline'
+      script: |
+        dotnet tool install --global dotnet-ef --version 7.0.0
+        dotnet ef migrations bundle --self-contained -r linux-x64 --project src/CrystallineSociety/Server/Api/CrystallineSociety.Server.Api.csproj
+      failOnStderr: true
+  - task: Bash@3
+    displayName: 'Install wasm-tools'
+    inputs:
+      targetType: 'inline'
+      script: dotnet workload install wasm-tools
+
+  - task: Bash@3
+    displayName: 'Build (To generate CSS/JS files)'
+    inputs:
+      targetType: 'inline'
+      script: 'dotnet build src/CrystallineSociety/Client/Web/CrystallineSociety.Client.Web.csproj -p:Configuration=Release -p:BlazorMode=BlazorWebAssembly -p:WebAppDeploymentType="${{ variables.WEB_APP_DEPLOYMENT_TYPE }}"'
+
+  - task: Bash@3
+    displayName: 'Publish'
+    inputs:
+      targetType: 'inline'
+      script: 'dotnet publish src/CrystallineSociety/Server/Api/CrystallineSociety.Server.Api.csproj -p:BlazorMode=BlazorWebAssembly -p:WebAppDeploymentType="${{ variables.WEB_APP_DEPLOYMENT_TYPE }}" -p:Configuration=Release -o api-web'
+
+  - task: PublishPipelineArtifact@1
+    displayName: Upload api-web artifact
+    inputs:
+      targetPath: 'api-web'
+      artifact: 'api-web-bundle'
+      publishLocation: 'pipeline'
+
+  - task: PublishPipelineArtifact@1
+    displayName: Upload ef migrations bundle
+    inputs:
+      targetPath: 'efbundle'
+      artifact: 'migrations-bundle'
+      publishLocation: 'pipeline'
+  - task: PublishPipelineArtifact@1
+    inputs:
+      targetPath: 'Dockerfile'
+      artifact: 'Docker'
+      publishLocation: 'pipeline'
+

src/CrystallineSociety/Client/Shared/Components/BadgeContent.razor

@@ -0,0 +1,15 @@
+@using CrystallineSociety.Shared.Dtos.BadgeSystem
+@inherits AppComponentBase
+
+@if (Badge != null)
+{
+    <div style="background-color: lightskyblue; width: 50%; border-radius: 10px; padding: 5px;">
+        <h3 style="margin: 0 0 5px; padding: 0px;">Badge Content</h3>
+        <p>Badge Code : @Badge.Code</p>
+        <br />
+        <p>Badge Level : @Badge.Level</p>
+        <br />
+        <p>Badge Description : @Badge.Description</p>
+    </div>
+}
+

src/CrystallineSociety/Client/Shared/Components/BadgeContent.razor.cs

@@ -0,0 +1,14 @@
+using CrystallineSociety.Shared.Dtos.BadgeSystem;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace CrystallineSociety.Client.Shared.Components
+{
+    public partial class BadgeContent
+    {
+        [Parameter] public BadgeDto? Badge { get; set; }
+    }
+}

src/CrystallineSociety/Client/Shared/Components/BadgeContent.razor.scss

@@ -0,0 +1 @@
+

src/CrystallineSociety/Client/Shared/Components/BadgeSystem.razor

@@ -1,6 +1,7 @@
-<div>
-    Tada from Badge System
+@using CrystallineSociety.Shared.Dtos.BadgeSystem
+@inherits AppComponentBase
+
+<div style="display: flex; gap: 15px;align-items: center;">
+    <BadgeTree BadgeBundleDto="Bundle" BadgeDtoCallBack=@GetBadge></BadgeTree>
+    <BadgeContent Badge="BadgeDto"></BadgeContent>
 </div>
-<pre>
-    @GetBundleText(Bundle)
-</pre>

src/CrystallineSociety/Client/Shared/Components/BadgeSystem.razor.cs

@@ -15,13 +15,9 @@ public partial class BadgeSystem
         [AutoInject] private IBadgeSystemService BadgeSystemService { get; set; } = default!;
         [AutoInject] private IBadgeUtilService BadgeUtilService { get; set; } = default!;
         [Parameter] public BadgeBundleDto? Bundle { get; set; }
+        private BadgeDto? BadgeDto {get; set;}
 
 
-        protected override Task OnInitializedAsync()
-        {
-            return base.OnInitializedAsync();
-        }
-
         private string? GetBundleText(BadgeBundleDto bundle)
         {
             var builder = new StringBuilder();
@@ -35,5 +31,10 @@ protected override Task OnInitializedAsync()
 
             return builder.ToString();
         }
+
+        private void GetBadge(BadgeDto badgeDto)
+        {
+            BadgeDto = badgeDto;
+        }
     }
 }

src/CrystallineSociety/Client/Shared/Components/BadgeTree.razor

@@ -0,0 +1,16 @@
+@using CrystallineSociety.Shared.Dtos.BadgeSystem
+@inherits AppComponentBase
+
+@if (Badges != null)
+{
+    <BitBasicList TItem="BadgeDto"
+                  ItemSize="4"
+                  Items="Badges"
+                  Style="border: 1px #a19f9d solid; border-radius: 10px; height: auto; width: 50%">
+        <RowTemplate Context="badge">
+            <div style="border-bottom: 1px #8a8886 solid; padding: 5px 20px;" class="badge-row" @onclick="() => OnBadgeClick(badge)">
+                <div class="badge-name-color">Name: <strong>@badge.Code</strong></div>
+            </div>
+        </RowTemplate>
+    </BitBasicList>
+}

src/CrystallineSociety/Client/Shared/Components/BadgeTree.razor.cs

@@ -0,0 +1,32 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+using CrystallineSociety.Shared.Dtos.BadgeSystem;
+
+namespace CrystallineSociety.Client.Shared.Components
+{
+    public partial class BadgeTree
+    {
+        [Parameter] public BadgeBundleDto? BadgeBundleDto { get; set; }
+        [Parameter] public EventCallback<BadgeDto> BadgeDtoCallBack { get; set; }
+
+        private List<BadgeDto>? Badges { get; set; }
+
+        protected override Task OnParamsSetAsync()
+        {
+            if (BadgeBundleDto != null)
+            {
+                Badges = BadgeBundleDto.Badges.ToList();
+            }
+            return base.OnParamsSetAsync();
+        }
+
+        private async Task OnBadgeClick(BadgeDto badgeDto)
+        {
+            await BadgeDtoCallBack.InvokeAsync(badgeDto);
+        }
+    }
+}

src/CrystallineSociety/Client/Shared/Components/BadgeTree.razor.scss

@@ -0,0 +1,21 @@
+.list {
+    border: 1px #a19f9d solid;
+    border-radius: 3px;
+    height: auto;
+}
+
+.badge-row {
+
+    &:hover {
+        cursor: pointer;
+        background-color: lightskyblue;
+
+        div {
+            color: black;
+        }
+    }
+
+    .badge-name-color {
+        color: white;
+    }
+}

src/CrystallineSociety/Client/Shared/Pages/GitHubBadgeSystemExplorerPage.razor

@@ -2,10 +2,14 @@
 @using CrystallineSociety.Shared.Dtos.BadgeSystem
 @inherits AppComponentBase
 
-<div>
-    <BitLabel>GitHub URL:</BitLabel>
-    <BitTextField @bind-Value="GitHubUrl"/>
-    <BitButton OnClick="LoadBadgeSystem">Load Badge System</BitButton>
-    <BitLabel>@GitHubUrl</BitLabel>
+<div style="padding: 50px; width: 100%;">
+    <div style="width: 100%;">
+        <BitLabel Style="color: white;">GitHub URL:</BitLabel>
+        <div style="display: flex;">
+            <BitTextField Style="width: 100%" @bind-Value="GitHubUrl" />
+            <BitIconButton Style="color:white; background-color: transparent;" IconName="BitIconName.Search" OnClick="LoadBadgeSystem" />
+        </div>
+    </div>
+    <BitLabel Style="color: white; margin: 20px 0;">@GitHubUrl</BitLabel>
     <BadgeSystem Bundle="Bundle"></BadgeSystem>
 </div>