UI fixes (#62)

#38 #37 #51 #50 #49 #48 #46 #36
bmeaut · Sep 19, 2024 · bf440ea · bf440ea
2 parents c50ebb5 + 9931f93
commit bf440ea
Show file tree

Hide file tree

Showing 17 changed files with 238 additions and 59 deletions.
diff --git a/grade-management-new/GradeManagement.Client/Components/Helpers/SelectSubject.razor b/grade-management-new/GradeManagement.Client/Components/Helpers/SelectSubject.razor
@@ -1,15 +1,37 @@
-<MudSelect T="Subject" Value="@Value" ValueChanged="@((Subject value) => { Value = value; ValueChanged.InvokeAsync(value); })" ToStringFunc="@subjectToString" Label="Subject" Style="background-color: white;" Dense="true" Variant="Variant.Filled" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
+<style>
+    .white-select .mud-input-label.mud-input-label-inputcontrol {
+        color: white !important;
+        background: var(--mud-palette-appbar-background);
+    }
+
+    .white-select .mud-input-outlined-border {
+        border-color: white !important;
+    }
+
+    .white-select .mud-input-slot {
+        color: white !important;
+    }
+    .white-select .mud-input-adornment .mud-icon-root {
+        color: white !important;
+    }
+
+</style>
+
+<MudSelect T="Subject" Value="@Value"
+           ValueChanged="@((Subject value) => { Value = value; ValueChanged.InvokeAsync(value); })"
+           ToStringFunc="@subjectToString" Label="Subject" Class="white-select" Dense="true" Variant="Variant.Outlined"
+           AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
     @foreach (var semester in PossibleValues)
     {
-        <MudSelectItem Value="@semester"/>
+    <MudSelectItem Value="@semester"/>
     }
 </MudSelect>
 
 @code {
-    [Parameter] public Subject Value { get; set; }
-    [Parameter] public List<Subject> PossibleValues { get; set; }
-    [Parameter] public EventCallback<Subject> ValueChanged { get; set; }
+[Parameter] public Subject Value { get; set; }
+[Parameter] public List<Subject> PossibleValues { get; set; }
+[Parameter] public EventCallback<Subject> ValueChanged { get; set; }
 
-    private Func<Subject, string> subjectToString = p => p.Name;
+private Func<Subject, string> subjectToString = p => p.Name;
 
 }
diff --git a/grade-management-new/GradeManagement.Client/Components/LoadingComponent.razor b/grade-management-new/GradeManagement.Client/Components/LoadingComponent.razor
@@ -11,7 +11,7 @@ else
 
 @code {
 
-    [Parameter] public bool IsLoading { get; set; }
+    [Parameter] public bool IsLoading { get; set; } = true;
 
     [Parameter] public RenderFragment ChildContent { get; set; }
 
@@ -24,14 +24,18 @@ else
 
     public async Task StartLoading()
     {
-        if (LongTask != null)
+        _ = Task.Run(async () =>
         {
-            IsLoading = true;
-            StateHasChanged();
-            await LongTask();
-            IsLoading = false;
-            StateHasChanged();
-        }
+            await Task.Delay(1); // Delay for 100 milliseconds
+            if (LongTask != null)
+            {
+                IsLoading = true;
+                StateHasChanged();
+                await LongTask();
+                IsLoading = false;
+                StateHasChanged();
+            }
+        });
     }
 
 }
diff --git a/grade-management-new/GradeManagement.Client/Components/NewDialogs/NewCourseDialog.razor b/grade-management-new/GradeManagement.Client/Components/NewDialogs/NewCourseDialog.razor
@@ -5,7 +5,7 @@
     <DialogContent>
         <MudForm @ref="form" Model="@value" @bind-IsValid="@success" @bind-Errors="@errors">
             <MudTextField T="string" Label="Name" For="@(() => value.Name)" @bind-Value="value.Name" Required="true"></MudTextField>
-            <MudTextField T="string" Label="Neptun Code" @bind-Value="@value.MoodleCourseId" Required="true"></MudTextField>
+            <MudTextField T="string" Label="Moodle Course Id" @bind-Value="@value.MoodleCourseId" Required="true"></MudTextField>
             <SelectSemester @bind-Value="@value.Semester"/>
             <SelectLanguage @bind-Value="@value.Language"/>
         </MudForm>

diff --git a/grade-management-new/GradeManagement.Client/Components/NewDialogs/NewSubjectDialog.razor b/grade-management-new/GradeManagement.Client/Components/NewDialogs/NewSubjectDialog.razor
@@ -41,8 +41,8 @@
 
     private IEnumerable<string> NeptunCodeValidator(string pw)
     {
-        if (pw.Length != 6)
-            yield return "Neptun code should be exactly 6 characters long.";
+        if (pw.Length < 20)
+            yield return "Neptun code should be less than 20 characters long.";
     }
 
 }
diff --git a/grade-management-new/GradeManagement.Client/Layout/AppBar.razor b/grade-management-new/GradeManagement.Client/Layout/AppBar.razor
@@ -1,6 +1,6 @@
 @inject SubjectService SubjectService
 
-<MudAppBar Elevation="5">
+<MudAppBar Elevation="5" Class="pb-1">
     <MudIconButton Icon="@(DrawerOpened ? Icons.Material.Filled.Close : Icons.Material.Filled.Menu)" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())"/>
     <MudText Typo="Typo.h3" Class="ml-3">AHK Review UI</MudText>
     <MudSpacer/>

diff --git a/grade-management-new/GradeManagement.Client/Pages/Authentication.razor b/grade-management-new/GradeManagement.Client/Pages/Authentication.razor
@@ -1,7 +1,19 @@
 @page "/authentication/{action}"
 @using Microsoft.AspNetCore.Components.WebAssembly.Authentication
+@inject NavigationManager Navigation
+
 <RemoteAuthenticatorView Action="@Action"/>
 
 @code{
     [Parameter] public string? Action { get; set; }
+
+    protected override void OnInitialized()
+    {
+        if (Action == "login-callback")
+        {
+            // Call backend for user data
+            Navigation.NavigateTo("/");
+        }
+    }
+
 }
diff --git a/grade-management-new/GradeManagement.Client/Pages/Courses.razor b/grade-management-new/GradeManagement.Client/Pages/Courses.razor
@@ -11,8 +11,24 @@
 @inject NavigationManager NavigationManager
 
 
+
+<style>
+    .clickable-rows .mud-table-body .mud-table-row {
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+    }
+
+    .clickable-rows .mud-table-body .mud-table-row:hover {
+        background-color: rgba(0, 0, 0, 0.1);
+    }
+</style>
+
+<PageTitle>Courses</PageTitle>
+
 <LoadingComponent @ref="loadingComponentRef" LongTask="@_loading">
-    <MudDataGrid T="Course" Items="_courses" EditMode="DataGridEditMode.Form" ReadOnly="false" CommittedItemChanges="@CommittedItemChanges" RowClick="@RowClickEvent">
+    <MudText Typo="Typo.h4" Class="mt-4">Courses</MudText>
+    <MudDivider Class="mb-4"/>
+    <MudDataGrid T="Course" Items="_courses" EditMode="DataGridEditMode.Form" ReadOnly="false" CommittedItemChanges="@CommittedItemChanges" RowClick="@RowClickEvent" Class="clickable-rows">
         <Columns>
             <PropertyColumn Property="x => x.Id" Title="Id" IsEditable="false" />
             <PropertyColumn Property="x => x.Name" Title="Name"/>

diff --git a/grade-management-new/GradeManagement.Client/Pages/Languages.razor b/grade-management-new/GradeManagement.Client/Pages/Languages.razor
@@ -9,6 +9,8 @@
 <PageTitle>Languages</PageTitle>
 
 <LoadingComponent @ref="loadingRef" LongTask="@Loading">
+    <MudText Typo="Typo.h4" Class="mt-4">Languages</MudText>
+    <MudDivider Class="mb-4"/>
     <MudDataGrid T="Language" Items="_languages" EditMode="DataGridEditMode.Form" ReadOnly="false" CommittedItemChanges="@CommittedItemChanges">
         <Columns>
             <PropertyColumn Property="x => x.Id" Title="Id" IsEditable="false"/>

diff --git a/grade-management-new/GradeManagement.Client/Pages/Main.razor b/grade-management-new/GradeManagement.Client/Pages/Main.razor
@@ -7,7 +7,7 @@
 @inject ExerciseClient ExerciseClient
 @inject AssignmentClient AssignmentClient
 @inject DashboardClient DashboardClient
-<PageTitle>AHK Review UI</PageTitle>
+@inject CrudSnackbarService SnackbarService
 
 <style>
     .sort-direction-icon {
@@ -28,6 +28,8 @@
 </style>
 
 <LoadingComponent LongTask="@Loading" @ref="loadingRef">
+    <MudText Typo="Typo.h4" Class="mt-4">Dashboard</MudText>
+    <MudDivider Class="mb-4"/>
 
     <MudStack Row="true" Class="mt-6">
         <MudSelect T="string" Label="Course" @bind-Value="_selectedCourse" @bind-Value:after="CourseChanged"
@@ -147,6 +149,12 @@
     private async Task Loading()
     {
         _selectedSubject = SubjectService.CurrentSubject;
+        if (_selectedSubject == null)
+        {
+            SnackbarService.ShowMessage("New subject wizard is not implemented yet!");
+            return;
+        }
+
         _dashboardData = await DashboardClient.GetDashboardAsync(_selectedSubject.Id);
         _filteredData = _dashboardData.ToList();
         _courses = _dashboardData?.Select(x => x.CourseName).Distinct();

diff --git a/grade-management-new/GradeManagement.Client/Pages/Semesters.razor b/grade-management-new/GradeManagement.Client/Pages/Semesters.razor
@@ -9,6 +9,8 @@
 <PageTitle>Semesters</PageTitle>
 
 <LoadingComponent LongTask="@Loading" @ref="loadingRef">
+    <MudText Typo="Typo.h4" Class="mt-4">Semesters</MudText>
+    <MudDivider Class="mb-4"/>
     <MudDataGrid T="Semester" Items="_semesters" EditMode="DataGridEditMode.Form" ReadOnly="false" CommittedItemChanges="@CommittedItemChanges">
         <Columns>
             <PropertyColumn Property="x => x.Id" Title="Id" IsEditable="false"/>

diff --git a/grade-management-new/GradeManagement.Client/Pages/SingleCourse.razor b/grade-management-new/GradeManagement.Client/Pages/SingleCourse.razor
@@ -10,40 +10,34 @@
 @inject GroupClient GroupClient
 
 <LoadingComponent LongTask="@_loading" @ref="loadingRef">
-    <MudCard>
-        <MudCardHeader>
-            <CardHeaderContent>
-                <MudText Typo="Typo.h4">@_course.Name</MudText>
-            </CardHeaderContent>
-        </MudCardHeader>
-        <MudCardContent>
-            <MudGrid>
-                <MudItem xs="12" sm="6" md="4">
-                    <MudField Label="Moodle Course Id" Variant="Variant.Text">@_course.MoodleCourseId</MudField>
-                </MudItem>
-                <MudItem xs="12" sm="6" md="4">
-                    <MudField Label="Semester" Variant="Variant.Text">@_course.Semester.Name</MudField>
-                </MudItem>
-                <MudItem xs="12" sm="6" md="4">
-                    <MudField Label="Language" Variant="Variant.Text">@_course.Language.Name</MudField>
-                </MudItem>
-                <MudItem xs="12">
-                    <MudStack AlignItems="AlignItems.Center" Style="width: 100%">
-                        <MudText Typo="Typo.h6" Style="align-self: start">Exercises:</MudText>
-                        <ExerciseDataGrid Values="_exercises"/>
-                        <MudButton Color="@Color.Primary" Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.Add" OnClick="@NewExerciseDialog">New Exercise</MudButton>
-                    </MudStack>
-                </MudItem>
-                <MudItem xs="12">
-                    <MudStack AlignItems="AlignItems.Center" Style="width: 100%">
-                        <MudText Typo="Typo.h6" Style="align-self: start">Groups:</MudText>
-                        <GroupDataGrid Values="_groups"/>
-                        <MudButton Color="@Color.Primary" Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.Add" OnClick="@NewGroupDialog">New Group</MudButton>
-                    </MudStack>
-                </MudItem>
-            </MudGrid>
-        </MudCardContent>
-    </MudCard>
+    <PageTitle>Course @_course.Name</PageTitle>
+    <MudText Typo="Typo.h4" Class="mt-4">@_course.Name</MudText>
+    <MudDivider Class="mb-4"/>
+    <MudGrid>
+        <MudItem xs="12" sm="6" md="4">
+            <MudField Label="Moodle Course Id" Variant="Variant.Text">@_course.MoodleCourseId</MudField>
+        </MudItem>
+        <MudItem xs="12" sm="6" md="4">
+            <MudField Label="Semester" Variant="Variant.Text">@_course.Semester.Name</MudField>
+        </MudItem>
+        <MudItem xs="12" sm="6" md="4">
+            <MudField Label="Language" Variant="Variant.Text">@_course.Language.Name</MudField>
+        </MudItem>
+        <MudItem xs="12">
+            <MudStack AlignItems="AlignItems.Center" Style="width: 100%">
+                <MudText Typo="Typo.h6" Style="align-self: start">Exercises:</MudText>
+                <ExerciseDataGrid Values="_exercises"/>
+                <MudButton Color="@Color.Primary" Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.Add" OnClick="@NewExerciseDialog">New Exercise</MudButton>
+            </MudStack>
+        </MudItem>
+        <MudItem xs="12">
+            <MudStack AlignItems="AlignItems.Center" Style="width: 100%">
+                <MudText Typo="Typo.h6" Style="align-self: start">Groups:</MudText>
+                <GroupDataGrid Values="_groups"/>
+                <MudButton Color="@Color.Primary" Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.Add" OnClick="@NewGroupDialog">New Group</MudButton>
+            </MudStack>
+        </MudItem>
+    </MudGrid>
 </LoadingComponent>
 
 @code {

diff --git a/grade-management-new/GradeManagement.Client/Pages/Students.razor b/grade-management-new/GradeManagement.Client/Pages/Students.razor
@@ -8,7 +8,11 @@
 @inject SubjectService SubjectService
 @inject StudentClient StudentClient
 
+<PageTitle>Students</PageTitle>
+
 <LoadingComponent LongTask="Loading" @ref="loadingRef">
+    <MudText Typo="Typo.h4" Class="mt-4">Students</MudText>
+    <MudDivider Class="mb-4"/>
     <MudDataGrid T="Student2" Items="_students" EditMode="DataGridEditMode.Form" ReadOnly="false" CommittedItemChanges="@CommittedItemChanges">
         <Columns>
             <PropertyColumn Property="x => x.Id" Title="Id" IsEditable="false"/>

diff --git a/grade-management-new/GradeManagement.Client/Pages/Subjects.razor b/grade-management-new/GradeManagement.Client/Pages/Subjects.razor
@@ -9,14 +9,17 @@
 
 <PageTitle>Subjects</PageTitle>
 
+<MudText Typo="Typo.h4" Class="mt-4">Subjects</MudText>
+<MudDivider Class="mb-4"/>
 <AuthorizeView Policy="@TeacherRequirement.PolicyName">
     <Authorized>
         <LoadingComponent LongTask="@LoadingAction" @ref="loadingComponentRef">
             <MudDataGrid Items="_subjects" T="Subject2" EditMode="DataGridEditMode.Form" ReadOnly="false" CommittedItemChanges="@CommittedItemChanges">
                 <Columns>
                     <PropertyColumn Property="x => x.Id" Title="Id" IsEditable="false"/>
                     <PropertyColumn Property="x => x.Name" Title="Name"/>
-                    <PropertyColumn Property="x => x.NeptunCode" Title="Description"/>
+                    <PropertyColumn Property="x => x.NeptunCode" Title="Neptun Code"/>
+                    <PropertyColumn Property="x => x.GitHubOrgName" Title="Github Org Name"/>
                     <DataGridActions TItem="Subject2" OnEditItem="@StartEditing" OnDeleteItem="@DeleteItem"/>
                 </Columns>
             </MudDataGrid>

diff --git a/grade-management-new/GradeManagement.Client/Pages/Teachers.razor b/grade-management-new/GradeManagement.Client/Pages/Teachers.razor
@@ -9,16 +9,26 @@
 @inject SubjectClient SubjectClient
 @inject UserClient UserClient
 
+<PageTitle>Teachers</PageTitle>
+
 <LoadingComponent @ref="loadingComponentRef" LongTask="@_loading">
-    <MudText>Teachers</MudText>
+    <MudText Typo="Typo.h4" Class="mt-4">Teachers</MudText>
+    <MudDivider Class="mb-4"/>
     <MudDataGrid T="User" Items="_teachers" EditMode="DataGridEditMode.Form" ReadOnly="false" CommittedItemChanges="@CommittedItemChanges">
         <Columns>
             <PropertyColumn Property="x => x.Id" Title="Id" IsEditable="false"/>
             <PropertyColumn Property="x => x.Name" Title="Name"/>
             <PropertyColumn Property="x => x.NeptunCode" Title="Neptun Code"/>
             <PropertyColumn Property="x => x.GithubId" Title="Github Id"/>
             <PropertyColumn Property="x => x.BmeEmail" Title="Bme Email"/>
-            <PropertyColumn Property="x => x.Type" Title="Type"/>
+            <TemplateColumn Title="Type">
+                <CellTemplate>
+                    @context.Item.Type
+                </CellTemplate>
+                <EditTemplate>
+                    <SelectUserType @bind-Value="@context.Item.Type"/>
+                </EditTemplate>
+            </TemplateColumn>
             <DataGridActions TItem="User" OnEditItem="@StartEditing" OnDeleteItem="@DeleteItem"/>
         </Columns>
     </MudDataGrid>
@@ -38,7 +48,7 @@
         {
             var user = result.Data as User;
             user = await UserClient.CreateAsync(user);
-            SnackbarService.ShowMessage("user id:" + user.Id);
+            //SnackbarService.ShowMessage("user id:" + user.Id);
             var subject = SubjectService.CurrentSubject;
             //await SubjectClient.AddTeacherToSubjectAsync(subject.Id, user.Id);
             _teachers.Add(user);

diff --git a/grade-management-new/GradeManagement.Client/Services/SubjectService.cs b/grade-management-new/GradeManagement.Client/Services/SubjectService.cs
@@ -27,6 +27,7 @@ public Subject CurrentSubject
     public async Task<List<Subject>> LoadSubjects()
     {
         Subjects = (await client.GetAllAsync()).ToList();
+        //Subjects = [];
         if (_currentSubject is null && Subjects.Count > 0)
         {
             _currentSubject = Subjects[0];

diff --git a/grade-management-new/GradeManagement.Client/wwwroot/index.html b/grade-management-new/GradeManagement.Client/wwwroot/index.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>GradeManagement.Client</title>
+  <title>AHK Review UI</title>
   <base href="/" />
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
   <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

diff --git a/grade-management-new/nswag.nswag b/grade-management-new/nswag.nswag