Added Autocomplete component to view

UserService/Pages/SecurityGroups.razor

@@ -12,8 +12,7 @@
 }
 else
 {
-<TextEdit Placeholder="Search" Size="Size.Large" @bind-Text="@CustomFilterValue" />
+    <TextEdit Placeholder="Search" Size="Size.Large" @bind-Text="@CustomFilterValue" />
-
     <DataGrid 
         TItem="SecurityGroup" 
         RowSelectable="@(u => false)" 
@@ -75,18 +74,42 @@ else
                 }
             </DisplayTemplate>
             <EditTemplate>
-                    <Select TValue="int?" SelectedValue="@((int?)(context.CellValue))" SelectedValueChanged="@(v => context.CellValue = v)" >
+                <Select TValue="int?" SelectedValue="@((int?)(context.CellValue))" SelectedValueChanged="@(v => context.CellValue = v)" >
                     @foreach (var item in OrganizationUnits ?? Enumerable.Empty<OrganizationUnit>())
                     {
                         <SelectItem TValue="int" Value="@(item.Id)">@item.CommonName</SelectItem>
                     }
-                    </Select>
+                </Select>
             </EditTemplate>
         </DataGridSelectColumn>
-                <DataGridColumn TItem="SecurityGroup" Field="@nameof(SecurityGroup.Members)" Caption="Members" Editable="true">
+        <DataGridColumn TItem="SecurityGroup" Field="@nameof(SecurityGroup.Members)" Caption="Members" Editable="false">
             <DisplayTemplate>
                 <Button Color="Color.Success" Block="true" Clicked="@(() => OnButtonClicked((SecurityGroup) context ))">Edit</Button>
             </DisplayTemplate>
         </DataGridColumn>
     </DataGrid>
+
+        <Modal @ref="ModalRef">
+            <ModalBackdrop/>
+            <ModalContent IsCentered="true">
+            @if (SelectedSecurityGroup != null)
+            {                
+                <ModalHeader>
+                    <ModalTitle>Members of @SelectedSecurityGroup.CommonName group</ModalTitle>
+                <CloseButton Clicked="@HideModal"/>
+            </ModalHeader>
+            <ModalBody>
+                <Autocomplete Data="@AvailableMembers" TItem="Member"
+                    TextField="@((item)=>item.CommonName)"
+                    ValueField="@((item)=>item)"
+                    SelectedValueChanged="@MySearchHandler"
+                    SearchChanged="@OnSearchChanged"
+                    Placeholder="Search..." />
+            </ModalBody>
+            <ModalFooter>
+                <Button Color="Color.Primary" Clicked="@HideModal">Close</Button>
+            </ModalFooter>
+            }
+            </ModalContent>
+        </Modal>
 }

UserService/Pages/SecurityGroups.razor.cs

@@ -2,6 +2,7 @@
 using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
+using Blazorise;
 using Blazorise.DataGrid;
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
@@ -15,6 +16,11 @@ namespace UserService.Pages
         [Inject] private ISecurityGroupsRepository SecurityGroupsRepository { get; set; } = null!;
         [Inject] private IOrganizationUnitsRepository OrganizationUnitsRepository { get; set; } = null!;
 
+        // reference to the modal component
+        protected Modal ModalRef { get; set; } = null!;
+
+        protected IEnumerable<Member> AvailableMembers { get; set; }
+
         protected override async Task OnInitializedAsync()
         {
             Members = await SecurityGroupsRepository.GetAllAsync().ConfigureAwait(false);
@@ -22,7 +28,8 @@ namespace UserService.Pages
         }
 
         /// <inheritdoc />
-        protected override async Task RowInsertingCallback(CancellableRowChange<SecurityGroup, Dictionary<string, object>> arg)
+        protected override async Task RowInsertingCallback(
+            CancellableRowChange<SecurityGroup, Dictionary<string, object>> arg)
         {
         }
 
@@ -36,27 +43,44 @@ namespace UserService.Pages
         {
             if (arg == null) throw new ArgumentNullException(nameof(arg));
             var confirmed = await JsRuntime.InvokeAsync<bool>("confirm",
-                $"You are about to delete the security group {arg.Item.CommonName}. Are you sure?").ConfigureAwait(false);
+                    $"You are about to delete the security group {arg.Item.CommonName}. Are you sure?")
+                .ConfigureAwait(false);
             arg.Cancel = !confirmed;
         }
 
         /// <inheritdoc />
-        protected override async Task RowUpdatingCallback(CancellableRowChange<SecurityGroup, Dictionary<string, object>> arg)
+        protected override async Task RowUpdatingCallback(
+            CancellableRowChange<SecurityGroup, Dictionary<string, object>> arg)
         {
             if (arg == null) throw new ArgumentNullException(nameof(arg));
             var securityGroup = arg.Item;
             securityGroup.MapFields(arg.Values);
-            securityGroup.Parent = OrganizationUnits?.FirstOrDefault(x => x.Id == (int?)arg.Values[nameof(Node.ParentId)]);
+            securityGroup.Parent =
+                OrganizationUnits?.FirstOrDefault(x => x.Id == (int?) arg.Values[nameof(Node.ParentId)]);
             var result = await SecurityGroupsRepository.UpdateAsync(securityGroup).ConfigureAwait(false);
             arg.Cancel = !result;
         }
 
-        protected async void OnButtonClicked(SecurityGroup securityGroup)
+        protected async Task MySearchHandler(object arg)
         {
-            var confirmed = await JsRuntime.InvokeAsync<bool>("confirm",
+            var addedMember = arg as Member;
-                $"You are about to delete the security group {securityGroup.CommonName}. Are you sure?").ConfigureAwait(false);
+            var confirmed = await JsRuntime.InvokeAsync<bool>("confirm", addedMember?.CommonName ?? "Fuck")
+                .ConfigureAwait(false);
         }
 
+        protected async Task OnSearchChanged(string arg)
+        {
+            //TODO
+        }
+
+        protected void OnButtonClicked(SecurityGroup securityGroup)
+        {
+            SelectedSecurityGroup = securityGroup;
+            ModalRef.Show();
+        }
+
+        public SecurityGroup? SelectedSecurityGroup { get; set; }
+
         /// <inheritdoc />
         protected override bool OnCustomFilter(SecurityGroup model)
         {
@@ -69,5 +93,10 @@ namespace UserService.Pages
         }
 
         protected override Task RowDeletedCallback(SecurityGroup item) => SecurityGroupsRepository.DeleteAsync(item);
+
+        protected void HideModal()
+        {
+            ModalRef.Hide();
+        }
     }
 }

UserService/Program.cs

@@ -3,7 +3,7 @@ using Microsoft.Extensions.Hosting;
 
 namespace UserService
 {
-    public class Program
+    public static class Program
     {
         public static void Main(string[] args)
         {

UserService/UserService.csproj

@@ -17,6 +17,7 @@
 
   <ItemGroup>
     <PackageReference Include="Blazorise.Bootstrap" Version="0.9.1.2" />
+    <PackageReference Include="Blazorise.Components" Version="0.9.1.2" />
     <PackageReference Include="Blazorise.DataGrid" Version="0.9.1.2" />
     <PackageReference Include="Blazorise.Icons.FontAwesome" Version="0.9.1.2" />
     <PackageReference Include="Blazorise.Sidebar" Version="0.9.1.2" />

UserService/_Imports.razor

@@ -11,3 +11,4 @@
 @using Blazorise.Sidebar
 @using Blazorise.TreeView
 @using Blazorise.DataGrid
+@using Blazorise.Components