8000 Updated · Netcode-Hub/NetcodeHubPackages@a1aa259 · GitHub
[go: up one dir, main page]
Skip to content

Commit a1aa259

Browse files
Frederick AsanteFrederick Asante
Frederick Asante
authored and
Frederick Asante
committed
Updated
1 parent 00df891 commit a1aa259

12 files changed

+327
-57
lines changed

‎NetcodeHubPackages.sln

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,18 @@ Microsoft Visual Studio Solution File, Format Version 12.00
33
# Visual Studio Version 17
44
VisualStudioVersion = 17.11.35017.193
55
MinimumVisualStudioVersion = 10.0.40219.1
6-
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "NetcodeHubPackages", "NetcodeHubPackages\NetcodeHubPackages.csproj", "{988E9744-26C6-4538-BF3A-BF970F93B93C}"
6+
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "NetcodeHubPackages", "NetcodeHubPackages\NetcodeHubPackages.csproj", "{DB9EB690-D9C5-49DE-B214-EA1F6CDD45DA}"
77
EndProject
88
Global
99
GlobalSection(SolutionConfigurationPlatforms) = preSolution
1010
Debug|Any CPU = Debug|Any CPU
1111
Release|Any CPU = Release|Any CPU
1212
EndGlobalSection
1313
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14-
{988E9744-26C6-4538-BF3A-BF970F93B93C}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15-
{988E9744-26C6-4538-BF3A-BF970F93B93C}.Debug|Any CPU.Build.0 = Debug|Any CPU
16-
{988E9744-26C6-4538-BF3A-BF970F93B93C}.Release|Any CPU.ActiveCfg = Release|Any CPU
17-
{988E9744-26C6-4538-BF3A-BF970F93B93C}.Release|Any CPU.Build.0 = Release|Any CPU
14+
{DB9EB690-D9C5-49DE-B214-EA1F6CDD45DA}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{DB9EB690-D9C5-49DE-B214-EA1F6CDD45DA}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{DB9EB690-D9C5-49DE-B214-EA1F6CDD45DA}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{DB9EB690-D9C5-49DE-B214-EA1F6CDD45DA}.Release|Any CPU.Build.0 = Release|Any CPU
1818
EndGlobalSection
1919
GlobalSection(SolutionProperties) = preSolution
2020
HideSolutionNode = FALSE

‎NetcodeHubPackages/Layout/MainLayout.razor

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
<main>
88
<div class="top-row px-4">
9-
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
9+
1010
</div>
1111

1212
<article class="content px-4">

‎NetcodeHubPackages/Layout/NavMenu.razor

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,21 @@
2424
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Validation
2525
</NavLink>
2626
</div>
27+
<div class="nav-item px-3">
28+
<NavLink class="nav-link" href="toast">
29+
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Toast
30+
</NavLink>
31+
</div>
32+
<div class="nav-item px-3">
33+
<NavLink class="nav-link" href="modal">
34+
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Modal
35+
</NavLink>
36+
</div>
37+
<div class="nav-item px-3">
38+
<NavLink class="nav-link" href="#">
39+
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> ...
40+
</NavLink>
41+
</div>
2742
</nav>
2843
</div>
2944

‎NetcodeHubPackages/NetcodeHubPackages.csproj

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
</PropertyGroup>
88

99
<ItemGroup>
10+
<PackageReference Include="NetcodeHub.Packages.Components.FileUpload" Version="1.0.5" />
11+
<PackageReference Include="NetcodeHub.Packages.Components.Modal" Version="1.0.1" />
1012
<PackageReference Include="NetcodeHub.Packages.Components.Toast" Version="1.0.4" />
1113
<PackageReference Include="NetcodeHub.Packages.Components.Validations" Version="1.0.1" />
1214
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.6" />

‎NetcodeHubPackages/Pages/FileUpload.razor

Lines changed: 0 additions & 51 deletions
This file was deleted.

‎NetcodeHubPackages/Pages/FileUploadComponent.razor

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
@page "/fileupload"
2+
@using NetcodeHub.Packages.Components.FileUpload
3+
@using NetcodeHub.Packages.Components.Validations.OnInput
4+
5+
<h2>File Upload Component Description</h2>
6+
<p>This Blazor component demonstrates the usage of the <code>NetcodeHubFileUpload</code> component from the <code>NetcodeHub.Packages.Components.FileUpload</code> library. It showcases how to handle file uploads and display base64-encoded images, along with error handling.</p>
7+
<FloatingTextArea DisplayName="Base64 Image" class="form-control h-100" @bind-Value="Base64String" />
8+
<NetcodeHubFileUpload @ref="FileUpload"
9+
Notify="RetrieveBase64String"
10+
Multiple=false
11+
RequiredExtensions="RequiredEx"
12+
ShowDisplay="false" />
13+
<h1>@Errors</h1>
14+
<p>This component demonstrates a practical implementation of file uploads in Blazor, utilizing the <code>NetcodeHubFileUpload</code> component for efficient handling and display of uploaded files and errors.</p>
15+
16+
17+
18+
19+
20+
@code {
21+
string? Errors;
22+
string Base64String = string.Empty;
23+
List<string> RequiredEx = [".jpg", ".png", ".jpeg", ".gif"];
24+
25+
NetcodeHubFileUpload? FileUpload;
26+
27+
void RetrieveBase64String(FileModel incomingFiles)
28+
{
29+
if (incomingFiles is not null)
30+
{
31+
foreach (var item in incomingFiles.IBrowserFiles!)
32+
{
33+
// This is for single.
34+
var getFileNameAndBase64String = incomingFiles.BaseFiles!.FirstOrDefault(_ => _.Key.Equals(item.Name, StringComparison.OrdinalIgnoreCase));
35+
36+
if (getFileNameAndBase64String.Key != null)
37+
Base64String = getFileNameAndBase64String.Value;
38+
}
39+
}
40+
Errors = FileUpload!.GetErrors();
41+
}
42+
43+
// Get actual file
44+
void RetrieveFiles(FileModel incomingFiles)
45+
{
46+
if (incomingFiles is not null)
47+
{
48+
foreach (var item in incomingFiles.IBrowserFiles!)
49+
{
50+
// This is for single.
51+
var orignalFile = item;
52+
}
53+
}
54+
Errors = FileUpload!.GetErrors();
55+
}
56+
}
57+

‎NetcodeHubPackages/Pages/Home.razor renamed to ‎NetcodeHubPackages/Pages/HomeComponent.razor

File renamed without changes.

‎NetcodeHubPackages/Pages/Home.razor.css renamed to ‎NetcodeHubPackages/Pages/HomeComponent.razor.css

File renamed without changes.

‎NetcodeHubPackages/Pages/ModalComponent.razor

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
@page "/modal"
2+
@using NetcodeHub.Packages.Components.Modal
3+
<h2 class="text-primary" style="font-family:'Comic Sans MS'">Confirmation Dialog Component</h2>
4+
<p>This Blazor component provides a customizable confirmation dialog. It allows users to confirm an action or dismiss the dialog with a "Close" button. The dialog can be styled with custom CSS and Bootstrap classes, and displays a specific instruction message.</p>
5+
<ul>
6+
<li><strong>CustomStyle</strong>: An optional parameter to apply custom CSS styles to the dialog.</li>
7+
<li><strong>BootstrapClass</strong>: An optional parameter to apply Bootstrap classes to the dialog. Default is <code>&quot;border-danger&quot;</code>.</li>
8+
<li><strong>Instruction</strong>: A string parameter that specifies the instruction message displayed in the dialog.</li>
9+
<li><strong>Action</strong>: An <code>EventCallback</code> that is invoked when the user confirms the action by clicking the "Confirm" button.</li>
10+
</ul>
11+
12+
<h3>Methods</h3>
13+
<ul>
14+
<li><strong>Show()</strong>: Displays the dialog by invoking the JavaScript function <code>showDialog</code>.</li>
15+
<li><strong>Confirmed()</strong>: Invoked when the user clicks the "Confirm" button. It calls the <code>Action</code> callback and then closes the dialog by invoking the <code>Close()</code> method.</li>
16+
<li><strong>Close()</strong>: Closes the dialog by invoking the JavaScript function <code>closeDialog</code>.</li>
17+
</ul>
18+
19+
<h3>JavaScript Integration</h3>
20+
<p>To fully implement this component, you need to define the JavaScript functions <code>show dialog</code> and <code>close dialog</code> to show and close the dialog, respectively. Here’s an example of what those functions might look like:</p>
21+
<pre><code>&lt;script&gt;
22+
function showDialog() {
23+
document.getElementById('cD').showModal();
24+
}
25+
26+
function closeDialog() {
27+
document.getElementById('cD').close();
28+
}
29+
&lt;/script&gt;</code></pre>
30+
31+
<button class="btn btn-info mt-2" @onclick="Open">Show Confirmation</button>
32+
33+
<NetcodeHubConfirmation @ref="confirmation"
34+
ConfirmationContent="@Instruction"
35+
ConfirmationHeader="Confirmation"
36+
Action="Handle"
37+
BootstrapClass="border-success"
38+
CustomStyle="width:300px;" />
39+
40+
<p class="m-2">This component can be used to prompt the user with a confirmation dialog before proceeding with an action, enhancing the user experience by ensuring that critical actions are intentional and confirmed.</p>
41+
42+
<h2 style="font-family:'Comic Sans MS'" class="text-success mt-5">Modal Component Description</h2>
43+
<p>This Blazor component represents a customizable modal dialog. It allows users to define the content and buttons within the dialog, and control its visibility through parameters and events.</p>
44+
<h3>Component Description</h3>
45+
<ul>
46+
<li><strong>ContentTemplate</strong>: A <code>RenderFragment</code> parameter that allows the user to define the content of the dialog.</li>
47+
<li><strong>ButtonTemplate</strong>: A <code>RenderFragment</code> parameter that allows the user to define the buttons within the dialog.</li>
48+
<li><strong>Open</strong>: A boolean parameter that determines whether the dialog is open or closed.</li>
49+
<li><strong>BootstrapClass</strong>: An optional parameter to apply Bootstrap classes to the dialog for styling.</li>
50+
<li><strong>CustomStyle</strong>: An optional parameter to apply custom CSS styles to the dialog.</li>
51+
<li><strong>OpenChanged</strong>: An <code>EventCallback&lt;bool&gt;</code> that is invoked when the <code>Open</code> parameter changes.</li>
52+
<li><strong>Actions</strong>: An <code>EventCallback&lt;string&gt;</code> that is invoked with a string parameter when actions are performed within the dialog.</li>
53+
</ul>
54+
55+
<h3>Lifecycle Methods</h3>
56+
<ul>
57+
<li><strong>OnAfterRenderAsync</strong>: This method is overridden to perform actions after the component has been rendered. It initializes the dialog events on the first render, and then shows or closes the dialog based on the <code>Open</code> parameter.</li>
58+
</ul>
59+
60+
<h3>JavaScript Invokable Methods</h3>
61+
<ul>
62+
<li><strong>MA</strong>: A JavaScript-invokable method that handles actions performed within the dialog. If the dialog is open, it sets the <code>Open</code> parameter to <code>false</code> and invokes the <code>OpenChanged</code> callback. It also invokes the <code>Actions</code> callback with the provided return value.</li>
63+
</ul>
64+
65+
<h3>JavaScript Integration</h3>
66+
<p>To fully implement this component, you need to define the JavaScript functions <code>bM</code>, <code>bOM</code>, and <code>bCM</code> to bind the modal, open the modal, and close the modal, respectively. Here’s an example of what those functions might look like:</p>
67+
<pre><code>&lt;script&gt;
68+
function bM(element, dotNetHelper) {
69+
element.addEventListener('close', () => {
70+
dotNetHelper.invokeMethodAsync('MA', 'closed');
71+
});
72+
}
73+
74+
function bOM(element) {
75+
element.showModal();
76+
}
77+
78+
function bCM(element) {
79+
element.close();
80+
}
81+
&lt;/script&gt;</code></pre>
82+
83+
<button class="btn btn-success mt-3" @onclick="OpenModal">Open modal</button>
84+
<br />
85+
<NetcodeHubModal @bind-Open="IsOpen"
86+
Actions="ButtonActions"
87+
BootstrapClass="border-success rounded p-2 ml-2 mr-2"
88+
CustomStyle="min-width:300px; max-width:500px;">
89+
90+
<ContentTemplate>
91+
<div class="card ">
92+
<div class="card-header">Modal Header</div>
93+
<div class="card-body">
94+
<p class="text-muted">
95+
The component was built using modal dialog. We are manipulating it using CSS and JS,
96+
This element provides what we want to display a modal and get a return value of type string.
97+
</p>
98+
</div>
99+
</div>
100+
</ContentTemplate>
101+
<ButtonTemplate>
102+
<div class="card border-0">
103+
<div class="card-body">
104+
<div class="d-flex justify-content-center align-content-center">
105+
<button class="btn btn-danger" value="cancel">Cancel</button>
106+
<button class="btn btn-success" value="save" style="margin-left:10px">Save</button>
107+
</div>
108+
</div>
109+
</div>
110+
</ButtonTemplate>
111+
</NetcodeHubModal>
112+
<br />
113+
<p>This component provides a flexible and customizable modal dialog for Blazor applications, allowing developers to define both the content and buttons within the dialog, and control its visibility and actions through parameters and events.</p>
114+
115+
@code
116+
{
117+
// NetcodeHub Confirmation Modal Component
118+
NetcodeHubConfirmation confirmation;
119+
public bool Confirm { get; set; }
120+
string Instruction = "Are you sure you wanna do this?";
121+
async Task Handle()
122+
{
123+
Confirm = true;
124+
await Close();
125+
}
126+
async Task Open() => await confirmation.OpenConfirmation();
127+
async Task Close() => await confirmation!.CloseConfirmation();
128+
129+
130+
// NetcodeHub Modal Component
131+
public bool IsOpen { get; set; }
132+
void OpenModal() => IsOpen = true;
133+
void ButtonActions(string action)
134+
{
135+
if (action == "save")
136+
{
137+
138+
// do something
139+
OpenModal();
140+
}
141+
142+
else if (action == "cancel")
143+
{
144+
// default will close the modal
145+
// you can also do something
146+
}
147+
}
148+
}
149+

‎NetcodeHubPackages/Pages/OnInputValidation.razor renamed to ‎NetcodeHubPackages/Pages/OnInputValidationComponent.razor

File renamed without changes.

0 commit comments

Comments
 (0)
0