list users from local IQBall api

.idea/.idea.Server-Panel.dir/.idea/.gitignore

@@ -0,0 +1,13 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Rider ignored files
+/projectSettingsUpdater.xml
+/modules.xml
+/.idea.Server-Panel.iml
+/contentModel.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

.idea/.idea.Server-Panel.dir/.idea/encodings.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Encoding" addBOMForNewFiles="with BOM under Windows, with no BOM otherwise" />
+</project>

.idea/.idea.Server-Panel.dir/.idea/indexLayout.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="UserContentModel">
+    <attachedFolders />
+    <explicitIncludes />
+    <explicitExcludes />
+  </component>
+</project>

.idea/.idea.Server-Panel.dir/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

Components/Leaflet.razor

@@ -1,10 +1,15 @@
 
 <div class="leaflet">
-    <div class="leaflet-header">
-
+    <div class="leaflet-header" @onclick="OnClickHeader">
+        <img class="leaflet-icon @(Expanded ? "leaflet-icon-expanded" : "" )" 
+             src="icons/chevron.svg"
+             alt="more"/>
+        <div class="leaflet-header-content">
+            @Header
+        </div>
     </div>
 
-    <div class="leaflet-body">
-
+    <div class="leaflet-body @(Expanded ? "leaflet-body-expanded" : "" )">
+        @Body
     </div>
 </div>

Components/Leaflet.razor.cs

@@ -1,11 +1,23 @@
-namespace AdminPanel.Components
+using Microsoft.AspNetCore.Components;
+
+namespace AdminPanel.Components
 {
     public partial class Leaflet
     {
         
-        public object Body { get; init }
+        [Parameter]
+        public RenderFragment? Header { get; init; }
+        
+        [Parameter]
+        public RenderFragment? Body { get; init; }
+
+        [Parameter] 
+        public bool Expanded { get; set; } = false;
 
-        public object Header { get; init; }
+        private void OnClickHeader()
+        {
+            Expanded = !Expanded;
+        }
         
     }
 }

Components/Leaflet.razor.css

@@ -1,10 +1,37 @@
 
 .leaflet {
-    background-color: cornsilk
+    background-color: cornsilk;
+    display: flex;
+    flex-direction: column;
+    
+    border-radius: 10px;
 }
 
-.leaflet-body {
+.leaflet-header {
+    display: flex;
+    align-content: center;
+    align-items: center;
+    
+    cursor: pointer;
+}
+
+.leaflet-icon {
+    rotate: 180deg;
+    transition: rotate 250ms ease-in;
+}
 
-    max-height: 0
+.leaflet-icon-expanded {
+    rotate: 270deg;
+}
+
+.leaflet-body {
+    padding: 5px;
+    height: 0;
+    overflow: hidden;
+}
 
+.leaflet-body-expanded {
+    height: auto;
 }
+
+

Components/UserComponent.razor

@@ -1,5 +1,14 @@
 <div>
-    <h3>@User.Name</h3>
+    
+    @if (@User.IsAdmin)
+    {
+        <h3>Administrator @User.UserName</h3>
+    }
+    else
+    {
+        <h3>@User.UserName</h3>
+    }
     <p>email: @User.Email</p>
+    <p>id: @User.Id</p>
 </div>
 

Models/Account.cs

@@ -1,5 +1,5 @@
 namespace AdminPanel.Models;
 
-public record User(string Name, string Email, int Id) {
+public record User(string UserName, string Email, int Id, bool IsAdmin) {
         
 }

Pages/Index.razor

@@ -2,8 +2,7 @@
 
 <PageTitle>Index</PageTitle>
 
-<h1>Hello, world!</h1>
+<h1>Hello, Administrator!</h1>
 
-Welcome to your new app.
+Welcome to your admin panel.
 
-<SurveyPrompt Title="How is Blazor working for you?" />

Pages/UserListPanel.razor

@@ -9,11 +9,24 @@
 <h1>User Panel</h1>
 
 <div class="users-div">
-    @foreach (User user in @Users)
+    @if (Users == null)
+    {
+        <p>Fetching Data...</p>
+    }
+    else
+        foreach (User user in Users)
         {
             <div class="user-cell">
                 <UserComponent User=@user/>
+                <Leaflet>
+                    <Header>
+                        see more
+                    </Header>
 
+                    <Body>
+                        <p>Ratio</p>
+                    </Body>
+                </Leaflet>
             </div>
         }
 </div>

Pages/UserListPanel.razor.cs

@@ -1,18 +1,34 @@
-using AdminPanel.Models;
-
-
+using System.Net.Http.Json;
+using AdminPanel.Models;
 
 namespace AdminPanel.Pages
 {
     public partial class UserListPanel
     {
+        public List<User>? Users { get; private set; }
 
-        public List<User> Users { get; init; } = new List<User>(new User[]{ new User("Jean", "Jean@jean.jean", 1) , new User("Jeanne", "Jeanne@jean.jeanne", 2) });
-
+        public UserListPanel()
+        {
+            HttpClient client = new()
+            {
+                BaseAddress = new Uri("http://localhost:8080")
+            };
+            RetrieveUsers(client);
+        }
 
         public void OnAccessToUserSpaceClicked(User user)
         {
+        }
+
+        private async void RetrieveUsers(HttpClient client)
+        {
+            using HttpResponseMessage response = await client.GetAsync("/api/admin/list-users?start=0&n=100");
+
+            response.EnsureSuccessStatusCode();
 
+            Users = (await response.Content.ReadFromJsonAsync<List<User>>())!;
+            StateHasChanged();
+            Console.WriteLine(Users);
         }
     }
 }

Shared/MainLayout.razor

@@ -7,7 +7,6 @@
 
     <main>
         <div class="top-row px-4">
-            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
         </div>
 
         <article class="content px-4">

Shared/NavMenu.razor

@@ -14,21 +14,11 @@
                 <span class="oi oi-home" aria-hidden="true"></span> Home
             </NavLink>
         </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="/spaces">
-                <span class="oi oi-list-rich" aria-hidden="true"></span> Server
-            </NavLink>
-        </div>
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="/users">
                 <span class="oi oi-plus" aria-hidden="true"></span> Users
             </NavLink>
         </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="/teams">
-                <span class="oi oi-plus" aria-hidden="true"></span> Teams
-            </NavLink>
-        </div>
     </nav>
 </div>
 

wwwroot/icons/chevron.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+    <path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/>
+</svg>