Skip to content

Commit 63b7899

Browse files
Ali-Sdg90Ali-Sdg90
authored
Merge pull request #60 from hootanht/develop
Fix Collapse State Management for BadgeTree Component
2 parents a8a4275 + c6cd693 commit 63b7899

File tree

3 files changed

+81
-75
lines changed

3 files changed

+81
-75
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,13 @@ jobs:
2525

2626
- uses: actions/setup-node@v3
2727
with:
28-
node-version: 18
28+
node-version: 20.3.0
2929

3030
- name: Install wasm and maui
3131
run: cd src && dotnet workload install maui-android wasm-tools wasm-experimental
32+
33+
- name: Install Android Sdk platform tools
34+
run: ${ANDROID_SDK_ROOT}/cmdline-tools/latest/bin/sdkmanager --sdk_root=$ANDROID_SDK_ROOT "platform-tools"
3235

3336
- name: Build
34-
run: dotnet build CrystallineSociety.sln -c Release -p:EnableWindowsTargeting=true
37+
run: dotnet build src/CrystallineSociety/CrystallineSociety.sln -c Release -p:EnableWindowsTargeting=true

‎src/CrystallineSociety/Client/CrystallineSociety.Client.Core/Components/BadgeTree.razor‎

Lines changed: 51 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@page "/badge-tree"
22
@using CrystallineSociety.Shared.Dtos.BadgeSystem
33
@using Microsoft.AspNetCore.Components.Web
4+
@using CrystallineSociety.Client.Core.Components
45

56
<div class="border rounded-3 position-relative badge-container">
67
<div class="accordion accordion-flush" id="accordionFlushExample">
@@ -9,76 +10,76 @@
910
</form>
1011
@if (Badges == null)
1112
{
12-
<div>
13-
<div class="vh-100 d-flex justify-content-center loading-box pt-4">
14-
<div class="spinner-border text-secondary position-fixed" role="status">
15-
<span class="visually-hidden"></span>
13+
<div>
14+
<div class="vh-100 d-flex justify-content-center loading-box pt-4">
15+
<div class="spinner-border text-secondary position-fixed" role="status">
16+
<span class="visually-hidden"></span>
17+
</div>
1618
</div>
1719
</div>
18-
</div>
1920
}
2021
else
2122
{
22-
<div class="ps-2 vh-100 overflow-auto">
23-
@for (int i = 1; i <= 5; i++)
23+
<div class="ps-2 vh-100 overflow-auto">
24+
@for (int i = 0; i < 5; i++)
2425
{
25-
<ul class="list-unstyled ps-0 mb-0">
26-
<li class="mb-1">
27-
<button class="btn btn-light btn-sm d-flex align-items-center p-0 collapsed customize-spacing">
28-
<span class="badge-image flex-shrink-0 @arrowClass"></span>
29-
<div class="btn btn-sm font-weight-bold btn-toggle d-inline-flex align-items-center border-0 ps-1 collapsed flex-grow-1 text-wrap text-start text-break h6 mb-0" @onclick="ToggleHomeCollapse" aria-expanded="@isHomeExpanded" data-bs-toggle="collapse" data-bs-target="#home-collapse">
30-
Folder @i
31-
</div>
32-
</button>
33-
<div class="collapse @homeCollapseClass" id="home-collapse">
26+
<ul class="list-unstyled ps-0 mb-0">
27+
<li class="mb-1">
28+
<button class="btn btn-light btn-sm d-flex align-items-center p-0 collapsed customize-spacing">
29+
<span class="badge-image flex-shrink-0 @GetArrowClass(homeCollapseState.ContainsKey(i) && homeCollapseState[i])"></span>
30+
<div class="btn btn-sm font-weight-bold btn-toggle d-inline-flex align-items-center border-0 ps-1 collapsed flex-grow-1 text-wrap text-start text-break h6 mb-0" @onclick="() => ToggleHomeCollapse(i)" aria-expanded="@(homeCollapseState.ContainsKey(i) && homeCollapseState[i])" data-bs-toggle="collapse" data-bs-target="#home-collapse-@i">
31+
Folder @(i + 1)
32+
</div>
33+
</button>
34+
<div class="collapse @(homeCollapseState.ContainsKey(i) && homeCollapseState[i] ? "show" : "")" id="home-collapse-@i">
3435
@if (Badges != null)
3536
{
36-
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 ps-3" id="home-collapse">
37-
@foreach (var badge in Badges)
37+
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 ps-3" id="home-collapse-@i">
38+
@for (int badgeIndex = 0; badgeIndex < Badges.Count; badgeIndex++)
3839
{
39-
<li>
40-
<button class="btn btn-light btn-sm font-weight-bold btn-toggle d-inline-flex align-items-center ps-1 collapsed text-start text-break customize-spacing @(ActiveBadgeUrl == badge.Url ? "active" : "")" @onclick="() => OnBadgeClick(badge)">
40+
var badge = Badges[badgeIndex];
41+
<li>
42+
<button class="btn btn-light btn-sm font-weight-bold btn-toggle d-inline-flex align-items-center ps-1 collapsed text-start text-break customize-spacing @(ActiveBadgeUrl == badge.Url ? "active" : "")" @onclick="() => OnBadgeClick(badge)">
4143
@badge.Title
42-
</button>
43-
</li>
44-
44+
</button>
45+
</li>
4546
// Temp code for SubFolder name
46-
@for (int j = 1; j <= 3; j++)
47+
@for (int j = 0; j < 3; j++)
4748
{
48-
<ul class="list-unstyled ps-0 mb-0">
49-
<li>
50-
<button class="btn btn-light btn-sm d-flex align-items-center p-0 customize-spacing">
51-
<span class="badge-image flex-shrink-0 @subFolderArrowClass"></span>
52-
<div class="btn btn-sm font-weight-bold btn-toggle d-inline-flex align-items-center border-0 ps-1 collapsed flex-grow-1 text-wrap text-start text-break h6 mb-0" @onclick="ToggleSubFolder" aria-expanded="@isSubFolderExpanded">
53-
SubFolder @j
54-
</div>
55-
</button>
56-
<div class="collapse @subFolderCollapseClass" id="home-collapse">
49+
<ul class="list-unstyled ps-0 mb-0">
50+
<li>
51+
<button class="btn btn-light btn-sm d-flex align-items-center p-0 customize-spacing">
52+
<span class="badge-image flex-shrink-0 @GetArrowClass(subFolderCollapseState.ContainsKey((i, badgeIndex, j)) && subFolderCollapseState[(i, badgeIndex, j)])"></span>
53+
<div class="btn btn-sm font-weight-bold btn-toggle d-inline-flex align-items-center border-0 ps-1 collapsed flex-grow-1 text-wrap text-start text-break h6 mb-0" @onclick="() => ToggleSubFolder(i, badgeIndex, j)" aria-expanded="@(subFolderCollapseState.ContainsKey((i, badgeIndex, j)) && subFolderCollapseState[(i, badgeIndex, j)])" data-bs-toggle="collapse" data-bs-target="#subfolder-collapse-@i-@badgeIndex-@j">
54+
SubFolder @(j + 1)
55+
</div>
56+
</button>
57+
<div class="collapse @(subFolderCollapseState.ContainsKey((i, badgeIndex, j)) && subFolderCollapseState[(i, badgeIndex, j)] ? "show" : "")" id="subfolder-collapse-@i-@badgeIndex-@j">
5758
@if (Badges != null)
5859
{
59-
<ul class="btn-toggle-nav list-unstyled fw-normal ps-3">
60-
@for(int k = 1; k <= 2; k++)
60+
<ul class="btn-toggle-nav list-unstyled fw-normal ps-3">
61+
@for (int k = 0; k < 2; k++)
6162
{
62-
<li>
63-
<button class="btn btn-light btn-sm font-weight-bold btn-toggle d-inline-flex align-items-center ps-1 collapsed text-start text-break customize-spacing">
64-
sub @k
65-
</button>
66-
</li>
63+
<li>
64+
<button class="btn btn-light btn-sm font-weight-bold btn-toggle d-inline-flex align-items-center ps-1 collapsed text-start text-break customize-spacing">
65+
sub @(k + 1)
66+
</button>
67+
</li>
6768
}
68-
</ul>
69+
</ul>
6970
}
70-
</div>
71-
</li>
72-
</ul>
71+
</div>
72+
</li>
73+
</ul>
7374
}
7475
}
75-
</ul>
76+
</ul>
7677
}
77-
</div>
78-
</li>
79-
</ul>
78+
</div>
79+
</li>
80+
</ul>
8081
}
81-
</div>
82+
</div>
8283
}
8384
</div>
84-
</div>
85+
</div>

‎src/CrystallineSociety/Client/CrystallineSociety.Client.Core/Components/BadgeTree.razor.cs‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
using CrystallineSociety.Shared.Dtos.BadgeSystem;
2-
using Microsoft.AspNetCore.Components;
32

43
namespace CrystallineSociety.Client.Core.Components
54
{
@@ -8,41 +7,42 @@ public partial class BadgeTree : ComponentBase
87
[Parameter] public BadgeBundleDto? BadgeBundleDto { get; set; }
98
[Parameter] public EventCallback<BadgeDto> BadgeDtoCallBack { get; set; }
109

11-
private string? ActiveBadgeUrl { get; set; }
10+
private Dictionary<int, bool> homeCollapseState = new();
11+
private Dictionary<(int, int, int), bool> subFolderCollapseState = new();
1212
private List<BadgeDto>? Badges { get; set; }
13-
private Dictionary<int, bool> accordionCollapsed = new Dictionary<int, bool>();
14-
private static readonly BadgeLevel[] BadgeLevels = { BadgeLevel.Gold, BadgeLevel.Silver, BadgeLevel.Bronze };
15-
private bool isHomeExpanded = false;
16-
private bool isSubFolderExpanded = false;
13+
private string? ActiveBadgeUrl { get; set; }
1714

18-
private string arrowClass => isHomeExpanded ? "down-arrow" : "right-arrow";
19-
private string subFolderArrowClass => isSubFolderExpanded ? "down-arrow" : "right-arrow";
20-
private string homeCollapseClass => isHomeExpanded ? "show" : "";
21-
private string subFolderCollapseClass => isSubFolderExpanded ? "show" : "";
2215

23-
private void ToggleHomeCollapse()
16+
protected override void OnParametersSet()
2417
{
25-
isHomeExpanded = !isHomeExpanded;
18+
if (BadgeBundleDto != null)
19+
{
20+
Badges = BadgeBundleDto.Badges.ToList();
21+
}
2622
}
2723

28-
private void ToggleSubFolder()
24+
private void ToggleHomeCollapse(int index)
2925
{
30-
isSubFolderExpanded = !isSubFolderExpanded;
26+
if (homeCollapseState.ContainsKey(index))
27+
{
28+
homeCollapseState[index] = !homeCollapseState[index];
29+
}
30+
else
31+
{
32+
homeCollapseState[index] = true;
33+
}
3134
}
3235

33-
protected override void OnParametersSet()
36+
private void ToggleSubFolder(int folderIndex, int badgeIndex, int subFolderIndex)
3437
{
35-
if (BadgeBundleDto != null)
38+
var key = (folderIndex, badgeIndex, subFolderIndex);
39+
if (subFolderCollapseState.ContainsKey(key))
3640
{
37-
Badges = BadgeBundleDto.Badges.ToList();
41+
subFolderCollapseState[key] = !subFolderCollapseState[key];
3842
}
39-
40-
for (int i = 0; i < BadgeLevels.Length; i++)
43+
else
4144
{
42-
if (!accordionCollapsed.ContainsKey(i + 1))
43-
{
44-
accordionCollapsed[i + 1] = true;
45-
}
45+
subFolderCollapseState[key] = true;
4646
}
4747
}
4848

@@ -51,5 +51,7 @@ private async Task OnBadgeClick(BadgeDto badgeDto)
5151
ActiveBadgeUrl = badgeDto.Url;
5252
await BadgeDtoCallBack.InvokeAsync(badgeDto);
5353
}
54+
55+
private string GetArrowClass(bool isExpanded) => isExpanded ? "down-arrow" : "right-arrow";
5456
}
5557
}

0 commit comments

Comments
 (0)