[Back | Front] Split Name - [Front] Order Confirm (#114)

* Updated Confirm.tsx and related components

Updated import statement in Confirm.tsx to include additional components from "@fluentui/react-icons/lib/fonts" and replaced ColFlex with Flex. Updated version of Confirm component in author comments. Added new 'title' style property to useStyles hook. Replaced Toast component with DialogSurface component for displaying success message after order placement. Swapped order of Update([]) and Nav("History", data) functions in onSuccess function and added new onStatusChange function to toast dispatch function.

* Split `Name` field into `Surname` and `Forename`

This commit splits the `Name` field into two separate fields: `Surname` and `Forename` across various classes and components including `AdminHub`, `ShopHub`, `DataSeeder`, `Persona`, `User`, `Setting`, and `PersonaInfo`. This change allows for more detailed user information. The `Name` field in the `Comment` type of the `OrderEntity` namespace has also been replaced with `Forename` to align with this change. Version numbers in `ShopHub`, `Persona`, and `User` classes have been updated. Tooltips and labels in the `Setting` component have been updated to reflect this change. Lastly, the `OrderGet` class now uses `Forename` instead of `Name` when creating comment objects.

* Updated User handling and added Version property

Updated the `NewUser` method in `ShopHub` class to take `Surname` and `Forename` instead of `Name`. Updated `Migration` attribute in `20240304123656_Init.Designer.cs`. Replaced `Name` property with `Surname` and `Forename` in `Users` table across multiple files, with specific character limits and types. Added a new `Version` property to `Users` table as a concurrency token.

* Split `Name` field into `Surname` and `Forename`

In this commit, the `Name` field in various classes and functions across multiple files (`Entity.cs`, `Info.tsx`, `Setting.tsx`, `Persona.tsx`, `Get.ts`, `Entity.ts`) has been replaced with `Surname` and `Forename` fields. This change in the data structure splits the name into two separate fields.

In `Entity.cs`, an `Include` statement has been added to include the `User` in the query result when fetching comments. The display of the name in the `Label` and `ToastBody` components in `Info.tsx` and `Setting.tsx` has been updated to display the `Surname` followed by the `Forename`.

In `Get.ts`, the `User` field in the `AdminOrderGet` class and the `Name` field in the `AdminUserGet` class have been replaced with `Forename`. The `name` variable in the `OrderGet` class is now assigned the value of `user.Forename` instead of `user.Name`.

Finally, in `Entity.ts`, the `AdminUserEntity` class has been updated to version `0.2.0` and the `Name` field has been replaced with `Surname` and `Forename`.

SoarCraft.AwaiShop/AdminHub/Order/Export.cs

@@ -182,7 +182,7 @@ public async IAsyncEnumerable<byte[]> ExportOrder() {
                 data.AddRange([
                     new() {
                         DataType = CellValues.SharedString,
-                        CellValue = new(shared(user.Name))
+                        CellValue = new(shared($"{user.Surname}, {user.Forename}"))
                     },
                     new() {
                         DataType = CellValues.SharedString,
@@ -207,7 +207,7 @@ public async IAsyncEnumerable<byte[]> ExportOrder() {
                                 prev.Append('[');
                                 prev.Append(curr.CreateAt.ToString("yyyy-MM-dd HH:mm"));
                                 prev.Append("] : ");
-                                prev.AppendLine(curr.User?.Name ?? "User");
+                                prev.AppendLine(curr.User?.Forename ?? "User");
                                 prev.AppendLine(curr.Content);
 
                                 return prev;

SoarCraft.AwaiShop/AdminHub/User/Entity.cs

@@ -21,7 +21,8 @@ internal partial class AdminHub {
         return await this.Db.Users
             .Where(x => x.UserId == key)
             .Select(x => new {
-                x.Name,
+                x.Surname,
+                x.Forename,
                 x.EMail,
                 x.Phone,
                 x.Address,

SoarCraft.AwaiShop/Helpers/DataSeeder.cs

@@ -16,7 +16,8 @@ public static async Task SeedData(IApplicationBuilder host) {
 
         var user = context.Users.Add(new() {
             UserId = Guid.Parse("171B20BE-E180-410D-AAE2-EE28773AA0B7"),
-            Name = "Aloento",
+            Surname = "Aloento",
+            Forename = "Soar",
             EMail = "[email protected]",
             Phone = "+1 300000000",
             Address = "Address, Address",

SoarCraft.AwaiShop/Hub/Order/Entity.cs

@@ -35,7 +35,7 @@ public async Task<dynamic> OrderEntity(uint key, uint? version) {
      * <remarks>
      * @author Aloento
      * @since 0.5.0
-     * @version 0.1.1
+     * @version 0.2.0
      * </remarks>
      */
     [Authorize]
@@ -49,9 +49,10 @@ public async Task<dynamic> OrderEntity(uint key, uint? version) {
 
         return await this.Db.Comments
             .Where(x => x.CommentId == key && x.Order.UserId == this.UserId)
+            .Include(x => x.User)
             .Select(x => new {
                 x.Content,
-                x.User!.Name,
+                x.User!.Forename,
                 x.CreateAt,
                 x.Version
             })

SoarCraft.AwaiShop/Hub/User/Get.cs

@@ -8,7 +8,7 @@ internal partial class ShopHub {
      * <remarks>
      * @author Aloento
      * @since 0.5.0
-     * @version 0.1.1
+     * @version 0.2.0
      * </remarks>
      */
     [Authorize]
@@ -26,7 +26,8 @@ internal partial class ShopHub {
         return await this.Db.Users
             .Where(x => x.UserId == this.UserId)
             .Select(x => new {
-                x.Name,
+                x.Surname,
+                x.Forename,
                 x.EMail,
                 x.Phone,
                 x.Address,

SoarCraft.AwaiShop/Hub/User/Persona.cs

@@ -6,13 +6,17 @@ namespace SoarCraft.AwaiShop.Hub;
  * <remarks>
  * @author Aloento
  * @since 0.1.0
- * @version 0.1.0
+ * @version 0.2.0
  * </remarks>
  */
 internal class Persona {
     [Required]
-    [StringLength(50, MinimumLength = 2)]
-    public string? Name { get; set; }
+    [StringLength(20, MinimumLength = 2)]
+    public string? Surname { get; set; }
+
+    [Required]
+    [StringLength(20, MinimumLength = 2)]
+    public string? Forename { get; set; }
 
     [Required]
     [Phone]

SoarCraft.AwaiShop/Hub/User/Post.cs

@@ -12,7 +12,7 @@ internal partial class ShopHub {
      * <remarks>
      * @author Aloento
      * @since 0.5.0
-     * @version 0.1.2
+     * @version 0.2.0
      * </remarks>
      */
     [Authorize]
@@ -38,22 +38,24 @@ public async Task<bool> UserPostUpdate(Persona req) {
 
             await this.Db.Users.AddAsync(new() {
                 UserId = this.UserId,
-                Name = req.Name!,
+                Surname = req.Surname!,
+                Forename = req.Forename!,
                 EMail = req.EMail!,
                 Phone = req.Phone!,
                 Address = req.Address!
             });
             var row1 = await this.Db.SaveChangesAsync();
 
             this.Context.Items.Remove("NewUser");
-            this.Logger.NewUser(req.Name, this.Context);
+            this.Logger.NewUser($"{req.Surname}, {req.Forename}", this.Context);
             return row1 > 0;
         }
 
         var row = await this.Db.Users
             .Where(x => x.UserId == this.UserId)
             .ExecuteUpdateAsync(x => x
-                .SetProperty(u => u.Name, req.Name!)
+                .SetProperty(u => u.Surname, req.Surname!)
+                .SetProperty(u => u.Forename, req.Forename!)
                 .SetProperty(u => u.EMail, req.EMail!)
                 .SetProperty(u => u.Phone, req.Phone!)
                 .SetProperty(u => u.Address, req.Address!)

SoarCraft.AwaiShop/Migrations/20240301205204_Init.cs → SoarCraft.AwaiShop/Migrations/20240304123656_Init.cs

@@ -47,7 +47,8 @@ protected override void Up(MigrationBuilder migrationBuilder)
                 columns: table => new
                 {
                     UserId = table.Column<Guid>(type: "uuid", nullable: false),
-                    Name = table.Column<string>(type: "character varying(50)", maxLength: 50, nullable: false),
+                    Surname = table.Column<string>(type: "character varying(20)", maxLength: 20, nullable: false),
+                    Forename = table.Column<string>(type: "character varying(20)", maxLength: 20, nullable: false),
                     EMail = table.Column<string>(type: "character varying(100)", maxLength: 100, nullable: false),
                     Phone = table.Column<string>(type: "character varying(15)", maxLength: 15, nullable: false),
                     Address = table.Column<string>(type: "character varying(100)", maxLength: 100, nullable: false),

SoarCraft.AwaiShop/Migrations/ShopContextModelSnapshot.cs

@@ -353,16 +353,21 @@ protected override void BuildModel(ModelBuilder modelBuilder)
                         .HasMaxLength(100)
                         .HasColumnType("character varying(100)");
 
-                    b.Property<string>("Name")
+                    b.Property<string>("Forename")
                         .IsRequired()
-                        .HasMaxLength(50)
-                        .HasColumnType("character varying(50)");
+                        .HasMaxLength(20)
+                        .HasColumnType("character varying(20)");
 
                     b.Property<string>("Phone")
                         .IsRequired()
                         .HasMaxLength(15)
                         .HasColumnType("character varying(15)");
 
+                    b.Property<string>("Surname")
+                        .IsRequired()
+                        .HasMaxLength(20)
+                        .HasColumnType("character varying(20)");
+
                     b.Property<uint>("Version")
                         .IsConcurrencyToken()
                         .ValueGeneratedOnAddOrUpdate()

SoarCraft.AwaiShop/Models/User.cs

@@ -8,15 +8,18 @@
  * <remarks>
  * @author Aloento
  * @since 0.1.0
- * @version 0.1.0
+ * @version 1.0.0
  * </remarks>
  */
 [Index(nameof(EMail), IsUnique = true)]
 public class User : Concurrency {
     public Guid UserId { get; set; }
 
-    [StringLength(50, MinimumLength = 2)]
-    public required string Name { get; set; }
+    [StringLength(20, MinimumLength = 2)]
+    public required string Surname { get; set; }
+
+    [StringLength(20, MinimumLength = 2)]
+    public required string Forename { get; set; }
 
     [EmailAddress]
     [StringLength(100, MinimumLength = 6)]

src/Components/Order/Info.tsx

@@ -52,7 +52,7 @@ export function OrderInfo({ OrderId, Admin, ParentLog }: IOrderComp) {
     <div className={style.flex}>
       <div className={style.box}>
         <Field label="Name" size="large">
-          <Label>{data?.Name}</Label>
+          <Label>{data?.Surname}, {data?.Forename}</Label>
         </Field>
       </div>
 

src/Components/Setting.tsx

@@ -1,5 +1,5 @@
 import { useMsal } from "@azure/msal-react";
-import { Button, Dialog, DialogActions, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, Field, Input, Label, Toast, ToastBody, ToastTitle, Tooltip, makeStyles, tokens } from "@fluentui/react-components";
+import { Button, Dialog, DialogActions, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, Field, Input, Toast, ToastBody, ToastTitle, Tooltip, makeStyles, tokens } from "@fluentui/react-components";
 import { useEffect, useState } from "react";
 import { Logger } from "~/Helpers/Logger";
 import { ColFlex, Flex } from "~/Helpers/Styles";
@@ -39,13 +39,15 @@ const log = new Logger("Setting");
 /**
  * @author Aloento
  * @since 0.1.0
- * @version 0.7.0
+ * @version 0.8.0
  */
 export function Setting({ Open, Toggle, New }: ISetting) {
   const style = useStyles();
   const claim = useMsal().instance.getActiveAccount();
 
-  const [name, setName] = useState<string>();
+  const [surname, setSurname] = useState<string>();
+  const [forename, setForename] = useState<string>();
+
   const [phone, setPhone] = useState<string>();
   const [address, setAddress] = useState<string>();
 
@@ -54,9 +56,10 @@ export function Setting({ Open, Toggle, New }: ISetting) {
   useEffect(() => {
     if (New || !data) return;
 
-    const { Name, Phone, Address } = data;
+    const { Surname, Forename, Phone, Address } = data;
 
-    setName(Name);
+    setSurname(Surname);
+    setForename(Forename);
     setPhone(Phone);
     setAddress(Address);
   }, [data]);
@@ -82,7 +85,7 @@ export function Setting({ Open, Toggle, New }: ISetting) {
         <Toast>
           <ToastTitle>Info {New ? "Created" : "Updated"}</ToastTitle>
           <ToastBody>
-            {req.Name}
+            {req.Surname}, {req.Forename}
             <br />
             {req.Phone}
             <br />
@@ -111,32 +114,50 @@ export function Setting({ Open, Toggle, New }: ISetting) {
           <DialogContent className={style.box}>
             <div className={style.one}>
               <Tooltip
-                content="Full first and family names, will be used to the shipping label."
+                content="Surname, for shipping label"
                 relationship="description"
                 withArrow
               >
-                <Field label="Name" size="large" required>
-                  <Input size="medium" value={name} maxLength={20} onChange={(_, v) => setName(v.value)} />
+                <Field label="Family Name" size="large" required>
+                  <Input size="medium" value={surname} maxLength={20} onChange={(_, v) => setSurname(v.value)} />
                 </Field>
               </Tooltip>
 
               <Tooltip
-                content="Up to 20 digits, starting with an internation access code."
+                content="Forename, for shipping label"
+                relationship="description"
+                withArrow
+              >
+                <Field label="Given Name" size="large" required>
+                  <Input size="medium" value={forename} maxLength={20} onChange={(_, v) => setForename(v.value)} />
+                </Field>
+              </Tooltip>
+            </div>
+
+            <div className={style.one}>
+              <Tooltip
+                content="Up to 20 digits, starting with an internation access code"
                 relationship="description"
                 withArrow
               >
                 <Field label="Phone" size="large" required>
                   <Input size="medium" value={phone} maxLength={20} onChange={(_, v) => setPhone(v.value)} />
                 </Field>
               </Tooltip>
-            </div>
 
-            <Field label="E-Mail" size="large">
-              <Label>{claim?.username}</Label>
-            </Field>
+              <Tooltip
+                content={`Your company email, ${claim?.username}`}
+                relationship="description"
+                withArrow
+              >
+                <Field label="E-Mail" size="large">
+                  <Input size="medium" value={claim?.username} disabled />
+                </Field>
+              </Tooltip>
+            </div>
 
             <Tooltip
-              content="Your full shipping address including street, number, ZIP, town and country. Separate lines by commas."
+              content="Your full shipping address including street, number, ZIP, town and country. Separate lines by commas"
               relationship="description"
               withArrow
             >
@@ -155,7 +176,8 @@ export function Setting({ Open, Toggle, New }: ISetting) {
 
             <Button appearance="primary" onClick={() => run({
               EMail: claim?.username,
-              Name: name,
+              Surname: surname,
+              Forename: forename,
               Address: address,
               Phone: phone
             })}>