From 732dba8fd056565736ce9e9ee03c81b15fbe6025 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Rua?=
 <140734849+joao4all@users.noreply.github.com>
Date: Fri, 31 May 2024 08:15:16 +0100
Subject: [PATCH] Feat #610 [Server Administration] Refactor Person Roles page
 to be inline with Measurement Scale page (#651)

This commit also removes the loading component from person/participant role pages
---
 .../Roles/PersonRoleDetailsTestFixture.cs     | 121 ------------------
 .../Roles/PersonRolesTableTestFixture.cs      | 105 ++++++++-------
 .../PersonRolesTableViewModelTestFixture.cs   |   6 +-
 .../Roles/ParticipantRoleForm.razor           |   4 +-
 .../Roles/ParticipantRoleForm.razor.cs        |  43 ++++---
 .../Roles/ParticipantRolesTable.razor         |  70 +++++-----
 .../Roles/PersonRoleDetails.razor.cs          |  72 -----------
 ...RoleDetails.razor => PersonRoleForm.razor} |  30 +++--
 .../Roles/PersonRoleForm.razor.cs             |  56 ++++++++
 .../Roles/PersonRolesTable.razor              | 105 +++++++--------
 .../Roles/PersonRolesTable.razor.cs           |  73 +++++------
 .../Roles/PersonRolesTableViewModel.cs        |  32 +++--
 12 files changed, 285 insertions(+), 432 deletions(-)
 delete mode 100644 COMETwebapp.Tests/Components/SiteDirectory/Roles/PersonRoleDetailsTestFixture.cs
 delete mode 100644 COMETwebapp/Components/SiteDirectory/Roles/PersonRoleDetails.razor.cs
 rename COMETwebapp/Components/SiteDirectory/Roles/{PersonRoleDetails.razor => PersonRoleForm.razor} (73%)
 create mode 100644 COMETwebapp/Components/SiteDirectory/Roles/PersonRoleForm.razor.cs

diff --git a/COMETwebapp.Tests/Components/SiteDirectory/Roles/PersonRoleDetailsTestFixture.cs b/COMETwebapp.Tests/Components/SiteDirectory/Roles/PersonRoleDetailsTestFixture.cs
deleted file mode 100644
index 15dc02bd..00000000
--- a/COMETwebapp.Tests/Components/SiteDirectory/Roles/PersonRoleDetailsTestFixture.cs
+++ /dev/null
@@ -1,121 +0,0 @@
-// --------------------------------------------------------------------------------------------------------------------
-// <copyright file="PersonRoleDetailsTestFixture.cs" company="Starion Group S.A.">
-//    Copyright (c) 2023-2024 Starion Group S.A.
-//
-//    Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Antoine Théate, João Rua
-//
-//    This file is part of CDP4-COMET WEB Community Edition
-//    The CDP4-COMET WEB Community Edition is the Starion Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
-//
-//    The CDP4-COMET WEB Community Edition is free software; you can redistribute it and/or
-//    modify it under the terms of the GNU Affero General Public
-//    License as published by the Free Software Foundation; either
-//    version 3 of the License, or (at your option) any later version.
-//
-//    The CDP4-COMET WEB Community Edition is distributed in the hope that it will be useful,
-//    but WITHOUT ANY WARRANTY; without even the implied warranty of
-//    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
-//    Affero General Public License for more details.
-//
-//    You should have received a copy of the GNU Affero General Public License
-//    along with this program.  If not, see <http://www.gnu.org/licenses/>.
-// </copyright>
-// --------------------------------------------------------------------------------------------------------------------
-
-namespace COMETwebapp.Tests.Components.SiteDirectory.Roles
-{
-    using System.Linq;
-    using System.Threading.Tasks;
-
-    using Bunit;
-
-    using CDP4Common.SiteDirectoryData;
-
-    using COMET.Web.Common.Test.Helpers;
-
-    using COMETwebapp.Components.SiteDirectory.Roles;
-    using COMETwebapp.ViewModels.Components.SiteDirectory.Roles;
-
-    using DevExpress.Blazor;
-
-    using Microsoft.AspNetCore.Components;
-    using Microsoft.AspNetCore.Components.Forms;
-    using Microsoft.Extensions.DependencyInjection;
-
-    using Moq;
-
-    using NUnit.Framework;
-
-    using TestContext = Bunit.TestContext;
-
-    [TestFixture]
-    public class PersonRoleDetailsTestFixture
-    {
-        private TestContext context;
-        private Mock<IPersonRolesTableViewModel> viewModel;
-        private PersonRole personRole;
-
-        [SetUp]
-        public void SetUp()
-        {
-            this.context = new TestContext();
-            this.viewModel = new Mock<IPersonRolesTableViewModel>();
-
-            this.personRole = new PersonRole()
-            {
-                Name = "Role 1",
-                ShortName = "role1",
-                Container = new SiteDirectory(){ ShortName = "siteDir" },
-            };
-
-            this.viewModel.Setup(x => x.CurrentThing).Returns(this.personRole);
-            this.context.ConfigureDevExpressBlazor();
-        }
-
-        [TearDown]
-        public void Teardown()
-        {
-            this.context.CleanContext();
-            this.context.Dispose();
-        }
-
-        [Test]
-        public async Task VerifyPersonRoleForm()
-        {
-            var wasOnSubmitCallbackInvoked = false;
-            var wasOnCancelCallbackInvoked = false;
-
-            var renderer = this.context.RenderComponent<PersonRoleDetails>(parameters =>
-            {
-                parameters.Add(p => p.ViewModel, this.viewModel.Object);
-            });
-
-            var form = renderer.FindComponent<EditForm>();
-            await renderer.InvokeAsync(form.Instance.OnValidSubmit.InvokeAsync);
-
-            Assert.Multiple(() =>
-            {
-                this.viewModel.Verify(x => x.CreateOrEditPersonRole(false), Times.Once);
-                Assert.That(wasOnSubmitCallbackInvoked, Is.EqualTo(false));
-            });
-
-            renderer.SetParametersAndRender(parameters =>
-            {
-                parameters.Add(p => p.OnCancel, new EventCallbackFactory().Create(this, () => { wasOnCancelCallbackInvoked = true; }));
-                parameters.Add(p => p.OnSubmit, new EventCallbackFactory().Create(this, () => { wasOnSubmitCallbackInvoked = true; }));
-            });
-
-            await renderer.InvokeAsync(form.Instance.OnValidSubmit.InvokeAsync);
-
-            Assert.Multiple(() =>
-            {
-                this.viewModel.Verify(x => x.CreateOrEditPersonRole(false), Times.Once);
-                Assert.That(wasOnSubmitCallbackInvoked, Is.EqualTo(true));
-            });
-
-            var cancelParticipantRoleButton = renderer.FindComponents<DxButton>().First(x => x.Instance.Id == "cancelItemButton");
-            await renderer.InvokeAsync(cancelParticipantRoleButton.Instance.Click.InvokeAsync);
-            Assert.That(wasOnCancelCallbackInvoked, Is.EqualTo(true));
-        }
-    }
-}
diff --git a/COMETwebapp.Tests/Components/SiteDirectory/Roles/PersonRolesTableTestFixture.cs b/COMETwebapp.Tests/Components/SiteDirectory/Roles/PersonRolesTableTestFixture.cs
index 63dde674..24d085cb 100644
--- a/COMETwebapp.Tests/Components/SiteDirectory/Roles/PersonRolesTableTestFixture.cs
+++ b/COMETwebapp.Tests/Components/SiteDirectory/Roles/PersonRolesTableTestFixture.cs
@@ -1,32 +1,29 @@
 // --------------------------------------------------------------------------------------------------------------------
-// <copyright file="PersonRolesTableTestFixture.cs" company="Starion Group S.A.">
-//    Copyright (c) 2023-2024 Starion Group S.A.
-//
-//    Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Antoine Théate, João Rua
-//
-//    This file is part of CDP4-COMET WEB Community Edition
-//    The CDP4-COMET WEB Community Edition is the Starion Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
-//
-//    The CDP4-COMET WEB Community Edition is free software; you can redistribute it and/or
-//    modify it under the terms of the GNU Affero General Public
-//    License as published by the Free Software Foundation; either
-//    version 3 of the License, or (at your option) any later version.
-//
-//    The CDP4-COMET WEB Community Edition is distributed in the hope that it will be useful,
-//    but WITHOUT ANY WARRANTY; without even the implied warranty of
-//    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+//  <copyright file="PersonRolesTableTestFixture.cs" company="Starion Group S.A.">
+//     Copyright (c) 2024 Starion Group S.A.
+// 
+//     Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, João Rua
+// 
+//     This file is part of COMET WEB Community Edition
+//     The COMET WEB Community Edition is the Starion Group Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
+// 
+//     The COMET WEB Community Edition is free software; you can redistribute it and/or
+//     modify it under the terms of the GNU Affero General Public
+//     License as published by the Free Software Foundation; either
+//     version 3 of the License, or (at your option) any later version.
+// 
+//     The COMET WEB Community Edition is distributed in the hope that it will be useful,
+//     but WITHOUT ANY WARRANTY; without even the implied warranty of
+//     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 //    Affero General Public License for more details.
-//
+// 
 //    You should have received a copy of the GNU Affero General Public License
 //    along with this program.  If not, see <http://www.gnu.org/licenses/>.
-// </copyright>
-// --------------------------------------------------------------------------------------------------------------------
+//  </copyright>
+//  --------------------------------------------------------------------------------------------------------------------
 
 namespace COMETwebapp.Tests.Components.SiteDirectory.Roles
 {
-    using System.Linq;
-    using System.Threading.Tasks;
-
     using Bunit;
 
     using CDP4Common.SiteDirectoryData;
@@ -41,6 +38,7 @@ namespace COMETwebapp.Tests.Components.SiteDirectory.Roles
 
     using DynamicData;
 
+    using Microsoft.AspNetCore.Components.Forms;
     using Microsoft.Extensions.DependencyInjection;
 
     using Moq;
@@ -63,11 +61,11 @@ public void SetUp()
             this.context = new TestContext();
             this.viewModel = new Mock<IPersonRolesTableViewModel>();
 
-            this.personRole = new PersonRole()
+            this.personRole = new PersonRole
             {
                 Name = "Role 1",
                 ShortName = "role1",
-                Container = new SiteDirectory(){ ShortName = "siteDir" },
+                Container = new SiteDirectory { ShortName = "siteDir" }
             };
 
             var rows = new SourceList<PersonRoleRowViewModel>();
@@ -90,47 +88,46 @@ public void Teardown()
         }
 
         [Test]
-        public void VerifyOnInitialized()
+        public async Task VerifyAddingOrEditingPersonRole()
         {
+            var addPersonRoleButton = this.renderer.FindComponents<DxButton>().First(x => x.Instance.Id == "dataItemDetailsButton");
+            await this.renderer.InvokeAsync(addPersonRoleButton.Instance.Click.InvokeAsync);
+
             Assert.Multiple(() =>
             {
-                Assert.That(this.renderer.Instance.ShouldCreateThing, Is.EqualTo(false));
-                Assert.That(this.renderer.Instance.ViewModel, Is.Not.Null);
-                Assert.That(this.renderer.Markup, Does.Contain(this.personRole.Name));
-                this.viewModel.Verify(x => x.InitializeViewModel(), Times.Once);
+                Assert.That(this.renderer.Instance.ShouldCreateThing, Is.EqualTo(true));
+                Assert.That(this.viewModel.Object.CurrentThing, Is.InstanceOf(typeof(PersonRole)));
             });
-        }
 
-        [Test]
-        public async Task VerifyAddPersonRoleClick()
-        {
-            var addPersonRoleButton = this.renderer.FindComponents<DxButton>().First(x => x.Instance.Id == "addPersonRoleButton");
-            await this.renderer.InvokeAsync(addPersonRoleButton.Instance.Click.InvokeAsync);
+            var personRolesGrid = this.renderer.FindComponent<DxGrid>();
+            await this.renderer.InvokeAsync(() => personRolesGrid.Instance.SelectedDataItemChanged.InvokeAsync(new PersonRoleRowViewModel(this.personRole)));
+            Assert.That(this.renderer.Instance.IsOnEditMode, Is.EqualTo(true));
 
-            var grid = this.renderer.FindComponent<DxGrid>();
-            Assert.That(grid.Instance.IsEditing(), Is.EqualTo(true));
+            var personRoleForm = this.renderer.FindComponent<PersonRoleForm>();
+            var personRoleEditForm = personRoleForm.FindComponent<EditForm>();
+            await personRoleForm.InvokeAsync(personRoleEditForm.Instance.OnValidSubmit.InvokeAsync);
 
-            await this.renderer.InvokeAsync(grid.Instance.EditModelSaving.InvokeAsync);
-            this.viewModel.Verify(x => x.CreateOrEditPersonRole(true), Times.Once);
+            Assert.Multiple(() =>
+            {
+                this.viewModel.Verify(x => x.CreateOrEditPersonRole(false), Times.Once);
+                Assert.That(this.viewModel.Object.CurrentThing, Is.InstanceOf(typeof(PersonRole)));
+            });
+
+            var form = this.renderer.FindComponent<DxGrid>();
+            await this.renderer.InvokeAsync(form.Instance.EditModelSaving.InvokeAsync);
+            this.viewModel.Verify(x => x.CreateOrEditPersonRole(false), Times.Once);
         }
 
         [Test]
-        public async Task VerifyRowClick()
+        public void VerifyOnInitialized()
         {
-            Assert.That(this.renderer.Instance.IsOnEditMode, Is.EqualTo(false));
-
-            var firstRow = this.viewModel.Object.Rows.Items.First();
-            var grid = this.renderer.FindComponent<DxGrid>();
-            await this.renderer.InvokeAsync(async () => await grid.Instance.SelectedDataItemChanged.InvokeAsync(firstRow));
-
-            Assert.That(this.renderer.Instance.IsOnEditMode, Is.EqualTo(true));
-
-            var details = this.renderer.FindComponent<PersonRoleDetails>();
-            await this.renderer.InvokeAsync(details.Instance.OnSubmit.InvokeAsync);
-            this.viewModel.Verify(x => x.CreateOrEditPersonRole(false), Times.Once);
-
-            await this.renderer.InvokeAsync(details.Instance.OnCancel.InvokeAsync);
-            Assert.That(this.renderer.Instance.IsOnEditMode, Is.EqualTo(false));
+            Assert.Multiple(() =>
+            {
+                Assert.That(this.renderer.Instance.ShouldCreateThing, Is.EqualTo(false));
+                Assert.That(this.renderer.Instance.ViewModel, Is.Not.Null);
+                Assert.That(this.renderer.Markup, Does.Contain(this.personRole.Name));
+                this.viewModel.Verify(x => x.InitializeViewModel(), Times.Once);
+            });
         }
     }
 }
diff --git a/COMETwebapp.Tests/ViewModels/Components/SiteDirectory/Roles/PersonRolesTableViewModelTestFixture.cs b/COMETwebapp.Tests/ViewModels/Components/SiteDirectory/Roles/PersonRolesTableViewModelTestFixture.cs
index babd674f..5a0378ac 100644
--- a/COMETwebapp.Tests/ViewModels/Components/SiteDirectory/Roles/PersonRolesTableViewModelTestFixture.cs
+++ b/COMETwebapp.Tests/ViewModels/Components/SiteDirectory/Roles/PersonRolesTableViewModelTestFixture.cs
@@ -37,6 +37,7 @@ namespace COMETwebapp.Tests.ViewModels.Components.SiteDirectory.Roles
     using COMET.Web.Common.Enumerations;
     using COMET.Web.Common.Model;
     using COMET.Web.Common.Services.SessionManagement;
+    using COMET.Web.Common.Test.Helpers;
 
     using COMETwebapp.Services.ShowHideDeprecatedThingsService;
     using COMETwebapp.ViewModels.Components.SiteDirectory.Roles;
@@ -177,8 +178,11 @@ public async Task VerifyParticipantRoleCreation()
         {
             this.viewModel.InitializeViewModel();
             await this.viewModel.CreateOrEditPersonRole(true);
-
             this.sessionService.Verify(x => x.CreateOrUpdateThingsWithNotification(It.IsAny<SiteDirectory>(), It.IsAny<IReadOnlyCollection<Thing>>(), It.IsAny<NotificationDescription>()), Times.Once);
+
+            this.sessionService.Setup(x => x.CreateOrUpdateThingsWithNotification(It.IsAny<SiteDirectory>(), It.IsAny<IReadOnlyCollection<Thing>>(), It.IsAny<NotificationDescription>())).Throws(new Exception());
+            await this.viewModel.CreateOrEditPersonRole(false);
+            this.loggerMock.Verify(LogLevel.Error, x => !string.IsNullOrWhiteSpace(x.ToString()), Times.Once());
         }
     }
 }
diff --git a/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRoleForm.razor b/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRoleForm.razor
index 95be9bbb..cdd7315b 100644
--- a/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRoleForm.razor
+++ b/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRoleForm.razor
@@ -50,9 +50,9 @@ Copyright (c) 2024 Starion Group S.A.
             }
 
         </DxFormLayoutGroup>
-
     </DxFormLayout>
     <FormButtons SaveButtonEnabled="@(this.IsSaveButtonEnabled(editFormContext))"
                  OnCancel="@(this.OnCancel)"
-                 ValidationMessages="@(this.MapOfValidationMessages.SelectMany(x => x.Value))"/>
+                 ValidationMessages="@(this.MapOfValidationMessages.SelectMany(x => x.Value))"
+                 IsLoading="@(this.ViewModel.IsLoading)"/>
 </EditForm>
\ No newline at end of file
diff --git a/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRoleForm.razor.cs b/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRoleForm.razor.cs
index 28b038ce..70f9de0c 100644
--- a/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRoleForm.razor.cs
+++ b/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRoleForm.razor.cs
@@ -1,26 +1,26 @@
 // --------------------------------------------------------------------------------------------------------------------
-// <copyright file="ParticipantRoleDetails.razor.cs" company="Starion Group S.A.">
-//    Copyright (c) 2023-2024 Starion Group S.A.
-//
-//    Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, João Rua
-//
-//    This file is part of CDP4-COMET WEB Community Edition
-//    The CDP4-COMET WEB Community Edition is the Starion Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
-//
-//    The CDP4-COMET WEB Community Edition is free software; you can redistribute it and/or
-//    modify it under the terms of the GNU Affero General Public
-//    License as published by the Free Software Foundation; either
-//    version 3 of the License, or (at your option) any later version.
-//
-//    The CDP4-COMET WEB Community Edition is distributed in the hope that it will be useful,
-//    but WITHOUT ANY WARRANTY; without even the implied warranty of
-//    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+//  <copyright file="ParticipantRoleForm.razor.cs" company="Starion Group S.A.">
+//     Copyright (c) 2024 Starion Group S.A.
+// 
+//     Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, João Rua
+// 
+//     This file is part of COMET WEB Community Edition
+//     The COMET WEB Community Edition is the Starion Group Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
+// 
+//     The COMET WEB Community Edition is free software; you can redistribute it and/or
+//     modify it under the terms of the GNU Affero General Public
+//     License as published by the Free Software Foundation; either
+//     version 3 of the License, or (at your option) any later version.
+// 
+//     The COMET WEB Community Edition is distributed in the hope that it will be useful,
+//     but WITHOUT ANY WARRANTY; without even the implied warranty of
+//     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 //    Affero General Public License for more details.
-//
+// 
 //    You should have received a copy of the GNU Affero General Public License
 //    along with this program.  If not, see <http://www.gnu.org/licenses/>.
-// </copyright>
-// --------------------------------------------------------------------------------------------------------------------
+//  </copyright>
+//  --------------------------------------------------------------------------------------------------------------------
 
 namespace COMETwebapp.Components.SiteDirectory.Roles
 {
@@ -32,14 +32,15 @@ namespace COMETwebapp.Components.SiteDirectory.Roles
     using Microsoft.AspNetCore.Components;
 
     /// <summary>
-    /// Support class for the <see cref="ParticipantRoleForm"/>
+    /// Support class for the <see cref="ParticipantRoleForm" />
     /// </summary>
     public partial class ParticipantRoleForm : SelectedDataItemForm
     {
         /// <summary>
         /// The <see cref="IParticipantRolesTableViewModel" /> for this component
         /// </summary>
-        [Parameter, Required]
+        [Parameter]
+        [Required]
         public IParticipantRolesTableViewModel ViewModel { get; set; }
 
         /// <summary>
diff --git a/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRolesTable.razor b/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRolesTable.razor
index 632d261b..50ac15ba 100644
--- a/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRolesTable.razor
+++ b/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRolesTable.razor
@@ -21,39 +21,37 @@ Copyright (c) 2024 Starion Group S.A.
 ------------------------------------------------------------------------------->
 @inherits SelectedDeprecatableDataItemBase<ParticipantRole, ParticipantRoleRowViewModel>
 
-<LoadingComponent IsVisible="@(this.ViewModel.IsLoading)">
-    <div class="d-flex justify-content-between">
-        <DxGrid @ref="this.Grid"
-                Data="this.ViewModel.Rows.Items"
-                ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
-                ShowSearchBox="true"
-                SearchBoxNullText="Search for a participant role ..."
-                AllowSelectRowByClick="true"
-                SelectionMode="GridSelectionMode.Single"
-                SelectedDataItemChanged="@(row => this.OnSelectedDataItemChanged((ParticipantRoleRowViewModel)row))"
-                EditFormButtonsVisible="false"
-                CustomizeElement="DisableDeprecatedThing"
-                PageSize="20"
-                PagerNavigationMode="PagerNavigationMode.Auto"
-                PageSizeSelectorVisible="true"
-                PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
-                PageSizeSelectorAllRowsItemVisible="true"
-                FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
-                CssClass="height-fit-content">
-            <Columns>
-                <DxGridDataColumn FieldName="@nameof(ParticipantRoleRowViewModel.Name)" MinWidth="150"/>
-                <DxGridDataColumn FieldName="@nameof(ParticipantRoleRowViewModel.ShortName)" MinWidth="80"/>
-                <DxGridDataColumn FieldName="@nameof(ParticipantRoleRowViewModel.IsDeprecated)" MinWidth="80" Visible="false"/>
-            </Columns>
-        </DxGrid>
-
-        <DataItemDetailsComponent IsSelected="@(this.IsOnEditMode)"
-                                  OnButtonClick="@(this.OnAddThingClick)">
-
-            <ParticipantRoleForm ViewModel="@(this.ViewModel)"
-                                 @bind-IsVisible="@(this.IsOnEditMode)"
-                                 ShouldCreate="@(this.ShouldCreateThing)"
-                                 OnSaved="@(this.OnSaved)"/>
-        </DataItemDetailsComponent>
-    </div>
-</LoadingComponent>
\ No newline at end of file
+<div class="d-flex justify-content-between">
+    <DxGrid @ref="this.Grid"
+            Data="this.ViewModel.Rows.Items"
+            ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
+            ShowSearchBox="true"
+            SearchBoxNullText="Search for a participant role ..."
+            AllowSelectRowByClick="true"
+            SelectionMode="GridSelectionMode.Single"
+            SelectedDataItemChanged="@(row => this.OnSelectedDataItemChanged((ParticipantRoleRowViewModel)row))"
+            EditFormButtonsVisible="false"
+            CustomizeElement="DisableDeprecatedThing"
+            PageSize="20"
+            PagerNavigationMode="PagerNavigationMode.Auto"
+            PageSizeSelectorVisible="true"
+            PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
+            PageSizeSelectorAllRowsItemVisible="true"
+            FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
+            CssClass="height-fit-content">
+        <Columns>
+            <DxGridDataColumn FieldName="@nameof(ParticipantRoleRowViewModel.Name)" MinWidth="150"/>
+            <DxGridDataColumn FieldName="@nameof(ParticipantRoleRowViewModel.ShortName)" MinWidth="80"/>
+            <DxGridDataColumn FieldName="@nameof(ParticipantRoleRowViewModel.IsDeprecated)" MinWidth="80" Visible="false"/>
+        </Columns>
+    </DxGrid>
+
+    <DataItemDetailsComponent IsSelected="@(this.IsOnEditMode)"
+                              OnButtonClick="@(this.OnAddThingClick)">
+
+        <ParticipantRoleForm ViewModel="@(this.ViewModel)"
+                             @bind-IsVisible="@(this.IsOnEditMode)"
+                             ShouldCreate="@(this.ShouldCreateThing)"
+                             OnSaved="@(this.OnSaved)"/>
+    </DataItemDetailsComponent>
+</div>
\ No newline at end of file
diff --git a/COMETwebapp/Components/SiteDirectory/Roles/PersonRoleDetails.razor.cs b/COMETwebapp/Components/SiteDirectory/Roles/PersonRoleDetails.razor.cs
deleted file mode 100644
index 13fd67ff..00000000
--- a/COMETwebapp/Components/SiteDirectory/Roles/PersonRoleDetails.razor.cs
+++ /dev/null
@@ -1,72 +0,0 @@
-// --------------------------------------------------------------------------------------------------------------------
-// <copyright file="PersonRoleDetails.razor.cs" company="Starion Group S.A.">
-//    Copyright (c) 2023-2024 Starion Group S.A.
-//
-//    Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, João Rua
-//
-//    This file is part of CDP4-COMET WEB Community Edition
-//    The CDP4-COMET WEB Community Edition is the Starion Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
-//
-//    The CDP4-COMET WEB Community Edition is free software; you can redistribute it and/or
-//    modify it under the terms of the GNU Affero General Public
-//    License as published by the Free Software Foundation; either
-//    version 3 of the License, or (at your option) any later version.
-//
-//    The CDP4-COMET WEB Community Edition is distributed in the hope that it will be useful,
-//    but WITHOUT ANY WARRANTY; without even the implied warranty of
-//    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
-//    Affero General Public License for more details.
-//
-//    You should have received a copy of the GNU Affero General Public License
-//    along with this program.  If not, see <http://www.gnu.org/licenses/>.
-// </copyright>
-// --------------------------------------------------------------------------------------------------------------------
-
-namespace COMETwebapp.Components.SiteDirectory.Roles
-{
-    using System.ComponentModel.DataAnnotations;
-
-    using COMET.Web.Common.Components;
-
-    using COMETwebapp.ViewModels.Components.SiteDirectory.Roles;
-
-    using Microsoft.AspNetCore.Components;
-
-    /// <summary>
-    /// Support class for the <see cref="PersonRoleDetails"/>
-    /// </summary>
-    public partial class PersonRoleDetails : DisposableComponent
-    {
-        /// <summary>
-        /// The <see cref="IPersonRolesTableViewModel" /> for this component
-        /// </summary>
-        [Parameter, Required]
-        public IPersonRolesTableViewModel ViewModel { get; set; }
-
-        /// <summary>
-        /// Method that is executed when the current edit form is submitted
-        /// </summary>
-        [Parameter]
-        public EventCallback OnSubmit { get; set; }
-
-        /// <summary>
-        /// Method that is executed when the current edit form is canceled
-        /// </summary>
-        [Parameter]
-        public EventCallback OnCancel { get; set; }
-
-        /// <summary>
-        /// Method that executes the default creation method in case the property <see cref="OnSubmit"/> is not set
-        /// </summary>
-        private async Task OnValidSubmit()
-        {
-            if (this.OnSubmit.HasDelegate)
-            {
-                await this.OnSubmit.InvokeAsync();
-                return;
-            }
-
-            await this.ViewModel.CreateOrEditPersonRole(false);
-        }
-    }
-}
diff --git a/COMETwebapp/Components/SiteDirectory/Roles/PersonRoleDetails.razor b/COMETwebapp/Components/SiteDirectory/Roles/PersonRoleForm.razor
similarity index 73%
rename from COMETwebapp/Components/SiteDirectory/Roles/PersonRoleDetails.razor
rename to COMETwebapp/Components/SiteDirectory/Roles/PersonRoleForm.razor
index 7f51601a..b2f9d410 100644
--- a/COMETwebapp/Components/SiteDirectory/Roles/PersonRoleDetails.razor
+++ b/COMETwebapp/Components/SiteDirectory/Roles/PersonRoleForm.razor
@@ -1,20 +1,25 @@
 <!------------------------------------------------------------------------------
-Copyright (c) 2023-2024 Starion Group S.A.
-    Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Antoine Théate, João Rua
-    This file is part of CDP4-COMET WEB Community Edition
-     The CDP4-COMET WEB Community Edition is the Starion Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
-    The CDP4-COMET WEB Community Edition is free software; you can redistribute it and/or
+Copyright (c) 2024 Starion Group S.A.
+
+    Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, João Rua
+
+    This file is part of COMET WEB Community Edition
+    The COMET WEB Community Edition is the Starion Group Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
+
+    The COMET WEB Community Edition is free software; you can redistribute it and/or
     modify it under the terms of the GNU Affero General Public
     License as published by the Free Software Foundation; either
     version 3 of the License, or (at your option) any later version.
-    The CDP4-COMET WEB Community Edition is distributed in the hope that it will be useful,
+
+    The COMET WEB Community Edition is distributed in the hope that it will be useful,
     but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
     Affero General Public License for more details.
+
     You should have received a copy of the GNU Affero General Public License
-    along with this program. If not, see http://www.gnu.org/licenses/.
+    along with this program.  If not, see <http://www.gnu.org/licenses/>.
 ------------------------------------------------------------------------------->
-@inherits DisposableComponent
+@inherits SelectedDataItemForm
 
 <EditForm Context="editFormContext" Model="@(this.ViewModel.CurrentThing)" OnValidSubmit="@(this.OnValidSubmit)">
     <FluentValidationValidator />
@@ -45,8 +50,9 @@ Copyright (c) 2023-2024 Starion Group S.A.
             }
 
         </DxFormLayoutGroup>
-
     </DxFormLayout>
-    <FormButtons SaveButtonEnabled="@(true)"
-                 OnCancel="@(() => this.OnCancel.InvokeAsync())" />
+    <FormButtons SaveButtonEnabled="@(this.IsSaveButtonEnabled(editFormContext))"
+                 OnCancel="@(this.OnCancel)"
+                 ValidationMessages="@(this.MapOfValidationMessages.SelectMany(x => x.Value))"
+                 IsLoading="@(this.ViewModel.IsLoading)"/>
 </EditForm>
\ No newline at end of file
diff --git a/COMETwebapp/Components/SiteDirectory/Roles/PersonRoleForm.razor.cs b/COMETwebapp/Components/SiteDirectory/Roles/PersonRoleForm.razor.cs
new file mode 100644
index 00000000..2ab4ccaf
--- /dev/null
+++ b/COMETwebapp/Components/SiteDirectory/Roles/PersonRoleForm.razor.cs
@@ -0,0 +1,56 @@
+// --------------------------------------------------------------------------------------------------------------------
+//  <copyright file="PersonRoleForm.razor.cs" company="Starion Group S.A.">
+//     Copyright (c) 2024 Starion Group S.A.
+// 
+//     Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, João Rua
+// 
+//     This file is part of COMET WEB Community Edition
+//     The COMET WEB Community Edition is the Starion Group Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
+// 
+//     The COMET WEB Community Edition is free software; you can redistribute it and/or
+//     modify it under the terms of the GNU Affero General Public
+//     License as published by the Free Software Foundation; either
+//     version 3 of the License, or (at your option) any later version.
+// 
+//     The COMET WEB Community Edition is distributed in the hope that it will be useful,
+//     but WITHOUT ANY WARRANTY; without even the implied warranty of
+//     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+//    Affero General Public License for more details.
+// 
+//    You should have received a copy of the GNU Affero General Public License
+//    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+//  </copyright>
+//  --------------------------------------------------------------------------------------------------------------------
+
+namespace COMETwebapp.Components.SiteDirectory.Roles
+{
+    using System.ComponentModel.DataAnnotations;
+
+    using COMETwebapp.Components.Common;
+    using COMETwebapp.ViewModels.Components.SiteDirectory.Roles;
+
+    using Microsoft.AspNetCore.Components;
+
+    /// <summary>
+    /// Support class for the <see cref="PersonRoleForm" />
+    /// </summary>
+    public partial class PersonRoleForm : SelectedDataItemForm
+    {
+        /// <summary>
+        /// The <see cref="IPersonRolesTableViewModel" /> for this component
+        /// </summary>
+        [Parameter]
+        [Required]
+        public IPersonRolesTableViewModel ViewModel { get; set; }
+
+        /// <summary>
+        /// Method that is executed when there is a valid submit
+        /// </summary>
+        /// <returns>A <see cref="Task" /></returns>
+        protected override async Task OnValidSubmit()
+        {
+            await this.ViewModel.CreateOrEditPersonRole(this.ShouldCreate);
+            await base.OnValidSubmit();
+        }
+    }
+}
diff --git a/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor b/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor
index 3e8673df..58dd4f18 100644
--- a/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor
+++ b/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor
@@ -1,72 +1,57 @@
 <!------------------------------------------------------------------------------
-Copyright (c) 2023-2024 Starion Group S.A.
-    Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Antoine Théate, João Rua
-    This file is part of CDP4-COMET WEB Community Edition
-     The CDP4-COMET WEB Community Edition is the Starion Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
-    The CDP4-COMET WEB Community Edition is free software; you can redistribute it and/or
+Copyright (c) 2024 Starion Group S.A.
+
+    Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, João Rua
+
+    This file is part of COMET WEB Community Edition
+    The COMET WEB Community Edition is the Starion Group Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
+
+    The COMET WEB Community Edition is free software; you can redistribute it and/or
     modify it under the terms of the GNU Affero General Public
     License as published by the Free Software Foundation; either
     version 3 of the License, or (at your option) any later version.
-    The CDP4-COMET WEB Community Edition is distributed in the hope that it will be useful,
+
+    The COMET WEB Community Edition is distributed in the hope that it will be useful,
     but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
     Affero General Public License for more details.
+
     You should have received a copy of the GNU Affero General Public License
-    along with this program. If not, see http://www.gnu.org/licenses/.
+    along with this program.  If not, see <http://www.gnu.org/licenses/>.
 ------------------------------------------------------------------------------->
 @inherits SelectedDeprecatableDataItemBase<PersonRole, PersonRoleRowViewModel>
 
-<LoadingComponent IsVisible="@(this.ViewModel.IsLoading)">
-    <div class="d-flex justify-content-between">
-        <DxGrid @ref="this.Grid"
-                Data="this.ViewModel.Rows.Items"
-                ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
-                ShowSearchBox="true"
-                SearchBoxNullText="Search for a person role..."
-                AllowSelectRowByClick="true"
-                SelectedDataItemChanged="@(row => this.OnSelectedDataItemChanged((PersonRoleRowViewModel)row))"
-                PopupEditFormCssClass="pw-800"
-                PopupEditFormHeaderText="Person Role"
-                CustomizeElement="DisableDeprecatedThing"
-                CustomizeEditModel="this.CustomizeEditThing"
-                EditMode="GridEditMode.PopupEditForm"
-                EditModelSaving="@(() => this.OnEditThingSaving())"
-                EditFormButtonsVisible="false"
-                PageSize="20"
-                PagerNavigationMode="PagerNavigationMode.Auto"
-                PageSizeSelectorVisible="true"
-                PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
-                PageSizeSelectorAllRowsItemVisible="true"
-                CssClass="d-inline height-fit-content">
-            <Columns>
-                <DxGridDataColumn FieldName="@nameof(PersonRoleRowViewModel.Name)" MinWidth="150"/>
-                <DxGridDataColumn FieldName="@nameof(PersonRoleRowViewModel.ShortName)" MinWidth="80"/>
-                <DxGridDataColumn FieldName="@nameof(PersonRoleRowViewModel.IsDeprecated)" MinWidth="80" Visible="false"/>
-                <DxGridCommandColumn Width="200px" EditButtonVisible="false" DeleteButtonVisible="false">
-                    <HeaderTemplate>
-                        <DxButton Id="addPersonRoleButton" Text="Add Person Role" IconCssClass="oi oi-plus" Click="() => this.Grid.StartEditNewRowAsync()"/>
-                    </HeaderTemplate>
-                    <CellDisplayTemplate>
-                    </CellDisplayTemplate>
-                </DxGridCommandColumn>
-            </Columns>
-
-            <EditFormTemplate Context="editFormContext">
-                <PersonRoleDetails ViewModel="@this.ViewModel"
-                                   OnSubmit="@(async () => await this.Grid.SaveChangesAsync())"
-                                   OnCancel="@(async () => await this.Grid.CancelEditAsync())"/>
-            </EditFormTemplate>
+<div class="d-flex justify-content-between">
+    <DxGrid @ref="this.Grid"
+            Data="this.ViewModel.Rows.Items"
+            ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
+            ShowSearchBox="true"
+            SearchBoxNullText="Search for a person role ..."
+            AllowSelectRowByClick="true"
+            SelectionMode="GridSelectionMode.Single"
+            SelectedDataItemChanged="@(row => this.OnSelectedDataItemChanged((PersonRoleRowViewModel)row))"
+            EditFormButtonsVisible="false"
+            CustomizeElement="DisableDeprecatedThing"
+            PageSize="20"
+            PagerNavigationMode="PagerNavigationMode.Auto"
+            PageSizeSelectorVisible="true"
+            PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
+            PageSizeSelectorAllRowsItemVisible="true"
+            FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
+            CssClass="height-fit-content">
+        <Columns>
+            <DxGridDataColumn FieldName="@nameof(PersonRoleRowViewModel.Name)" MinWidth="150"/>
+            <DxGridDataColumn FieldName="@nameof(PersonRoleRowViewModel.ShortName)" MinWidth="80"/>
+            <DxGridDataColumn FieldName="@nameof(PersonRoleRowViewModel.IsDeprecated)" MinWidth="80" Visible="false"/>
+        </Columns>
+    </DxGrid>
 
-            <CustomValidators>
-                <FluentValidationValidator/>
-            </CustomValidators>
+    <DataItemDetailsComponent IsSelected="@(this.IsOnEditMode)"
+                              OnButtonClick="@(this.OnAddThingClick)">
 
-        </DxGrid>
-        
-        <DataItemDetailsComponent IsSelected="@this.IsOnEditMode">
-            <PersonRoleDetails ViewModel="@this.ViewModel"
-                               OnCancel="@(() => this.IsOnEditMode = false)"
-                               OnSubmit="@(() => this.ViewModel.CreateOrEditPersonRole(false))"/>
-        </DataItemDetailsComponent>
-    </div>
-</LoadingComponent>
+        <PersonRoleForm ViewModel="@(this.ViewModel)"
+                        @bind-IsVisible="@(this.IsOnEditMode)"
+                        ShouldCreate="@(this.ShouldCreateThing)"
+                        OnSaved="@(this.OnSaved)"/>
+    </DataItemDetailsComponent>
+</div>
\ No newline at end of file
diff --git a/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor.cs b/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor.cs
index 72c31da9..28288641 100644
--- a/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor.cs
+++ b/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor.cs
@@ -1,26 +1,26 @@
 // --------------------------------------------------------------------------------------------------------------------
-// <copyright file="PersonRolesTable.razor.cs" company="Starion Group S.A.">
-//    Copyright (c) 2023-2024 Starion Group S.A.
-//
-//    Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, João Rua
-//
-//    This file is part of CDP4-COMET WEB Community Edition
-//    The CDP4-COMET WEB Community Edition is the Starion Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
-//
-//    The CDP4-COMET WEB Community Edition is free software; you can redistribute it and/or
-//    modify it under the terms of the GNU Affero General Public
-//    License as published by the Free Software Foundation; either
-//    version 3 of the License, or (at your option) any later version.
-//
-//    The CDP4-COMET WEB Community Edition is distributed in the hope that it will be useful,
-//    but WITHOUT ANY WARRANTY; without even the implied warranty of
-//    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+//  <copyright file="PersonRolesTable.razor.cs" company="Starion Group S.A.">
+//     Copyright (c) 2024 Starion Group S.A.
+// 
+//     Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, João Rua
+// 
+//     This file is part of COMET WEB Community Edition
+//     The COMET WEB Community Edition is the Starion Group Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
+// 
+//     The COMET WEB Community Edition is free software; you can redistribute it and/or
+//     modify it under the terms of the GNU Affero General Public
+//     License as published by the Free Software Foundation; either
+//     version 3 of the License, or (at your option) any later version.
+// 
+//     The COMET WEB Community Edition is distributed in the hope that it will be useful,
+//     but WITHOUT ANY WARRANTY; without even the implied warranty of
+//     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 //    Affero General Public License for more details.
-//
+// 
 //    You should have received a copy of the GNU Affero General Public License
 //    along with this program.  If not, see <http://www.gnu.org/licenses/>.
-// </copyright>
-// --------------------------------------------------------------------------------------------------------------------
+//  </copyright>
+//  --------------------------------------------------------------------------------------------------------------------
 
 namespace COMETwebapp.Components.SiteDirectory.Roles
 {
@@ -30,12 +30,10 @@ namespace COMETwebapp.Components.SiteDirectory.Roles
     using COMETwebapp.ViewModels.Components.SiteDirectory.Roles;
     using COMETwebapp.ViewModels.Components.SiteDirectory.Rows;
 
-    using DevExpress.Blazor;
-
     using Microsoft.AspNetCore.Components;
 
     /// <summary>
-    /// Support class for the <see cref="PersonRolesTable"/>
+    /// Support class for the <see cref="PersonRolesTable" />
     /// </summary>
     public partial class PersonRolesTable : SelectedDeprecatableDataItemBase<PersonRole, PersonRoleRowViewModel>
     {
@@ -56,34 +54,25 @@ protected override void OnInitialized()
         }
 
         /// <summary>
-        /// Method that is invoked when the edit/add thing form is being saved
+        /// Method invoked every time a row is selected
         /// </summary>
-        /// <returns>A <see cref="Task" /></returns>
-        protected override async Task OnEditThingSaving()
+        /// <param name="row">The selected row</param>
+        protected override void OnSelectedDataItemChanged(PersonRoleRowViewModel row)
         {
-            await this.ViewModel.CreateOrEditPersonRole(true);
+            base.OnSelectedDataItemChanged(row);
+            this.ShouldCreateThing = false;
+            this.ViewModel.CurrentThing = row.Thing.Clone(true);
         }
 
         /// <summary>
-        /// Method invoked when creating a new thing
+        /// Method invoked before creating a new thing
         /// </summary>
-        /// <param name="e">A <see cref="GridCustomizeEditModelEventArgs" /></param>
-        protected override void CustomizeEditThing(GridCustomizeEditModelEventArgs e)
+        private void OnAddThingClick()
         {
-            base.CustomizeEditThing(e);
-
+            this.ShouldCreateThing = true;
+            this.IsOnEditMode = true;
             this.ViewModel.CurrentThing = new PersonRole();
-            e.EditModel = this.ViewModel.CurrentThing;
-        }
-
-        /// <summary>
-        /// Method invoked everytime a row is selected
-        /// </summary>
-        /// <param name="row">The selected row</param>
-        protected override void OnSelectedDataItemChanged(PersonRoleRowViewModel row)
-        {
-            base.OnSelectedDataItemChanged(row);
-            this.ViewModel.CurrentThing = row.Thing.Clone(true);
+            this.InvokeAsync(this.StateHasChanged);
         }
     }
 }
diff --git a/COMETwebapp/ViewModels/Components/SiteDirectory/Roles/PersonRolesTableViewModel.cs b/COMETwebapp/ViewModels/Components/SiteDirectory/Roles/PersonRolesTableViewModel.cs
index 35bf1fa0..331c901c 100644
--- a/COMETwebapp/ViewModels/Components/SiteDirectory/Roles/PersonRolesTableViewModel.cs
+++ b/COMETwebapp/ViewModels/Components/SiteDirectory/Roles/PersonRolesTableViewModel.cs
@@ -69,22 +69,32 @@ public PersonRolesTableViewModel(ISessionService sessionService, IShowHideDeprec
         /// <returns>A <see cref="Task"/></returns>
         public async Task CreateOrEditPersonRole(bool shouldCreate)
         {
-            this.IsLoading = true;
+            try
+            {
+                this.IsLoading = true;
+
+                var siteDirectoryClone = this.SessionService.GetSiteDirectory().Clone(false);
+                var thingsToCreate = new List<Thing>();
 
-            var siteDirectoryClone = this.SessionService.GetSiteDirectory().Clone(false);
-            var thingsToCreate = new List<Thing>();
+                thingsToCreate.AddRange(this.CurrentThing.PersonPermission);
 
-            thingsToCreate.AddRange(this.CurrentThing.PersonPermission);
+                if (shouldCreate)
+                {
+                    siteDirectoryClone.PersonRole.Add(this.CurrentThing);
+                    thingsToCreate.Add(siteDirectoryClone);
+                }
 
-            if (shouldCreate)
+                thingsToCreate.Add(this.CurrentThing);
+                await this.SessionService.CreateOrUpdateThingsWithNotification(siteDirectoryClone, thingsToCreate, this.GetNotificationDescription(shouldCreate));
+            }
+            catch (Exception ex)
             {
-                siteDirectoryClone.PersonRole.Add(this.CurrentThing);
-                thingsToCreate.Add(siteDirectoryClone);
+                this.Logger.LogError(ex, "Create or Update PersonRole failed");
+            }
+            finally
+            {
+                this.IsLoading = false;
             }
-
-            thingsToCreate.Add(this.CurrentThing);
-            await this.SessionService.CreateOrUpdateThingsWithNotification(siteDirectoryClone, thingsToCreate, this.GetNotificationDescription(shouldCreate));
-            this.IsLoading = false;
         }
 
         /// <summary>