Display the creation date for groups

app/queries/get_group_details.graphql

@@ -2,6 +2,7 @@ query GetGroupDetails($id: Int!) {
   group(groupId: $id) {
     id
     displayName
+    creationDate
     users {
       id
       displayName

app/queries/get_group_list.graphql

@@ -2,5 +2,6 @@ query GetGroupList {
   groups {
     id
     displayName
+    creationDate
   }
 }

app/src/components/group_details.rs

@@ -68,6 +68,36 @@ impl GroupDetails {
         }
     }
 
+    fn view_details(&self, g: &Group) -> Html {
+      html! {
+        <>
+          <h3>{g.display_name.to_string()}</h3>
+          <div class="py-3">
+            <form class="form">
+              <div class="form-group row mb-3">
+                <label for="displayName"
+                  class="form-label col-4 col-form-label">
+                  {"Group: "}
+                </label>
+                <div class="col-8">
+                  <span id="groupId" class="form-constrol-static">{g.display_name.to_string()}</span>
+                </div>
+              </div>
+              <div class="form-group row mb-3">
+                <label for="creationDate"
+                  class="form-label col-4 col-form-label">
+                  {"Creation date: "}
+                </label>
+                <div class="col-8">
+                  <span id="creationDate" class="form-constrol-static">{g.creation_date.date().naive_local()}</span>
+                </div>
+              </div>
+            </form>
+          </div>
+        </>
+      }
+    }
+
     fn view_user_list(&self, g: &Group) -> Html {
         let make_user_row = |user: &User| {
             let user_id = user.id.clone();
@@ -92,7 +122,6 @@ impl GroupDetails {
         };
         html! {
           <>
-            <h3>{g.display_name.to_string()}</h3>
             <h5 class="fw-bold">{"Members"}</h5>
             <div class="table-responsive">
               <table class="table table-striped">
@@ -201,6 +230,7 @@ impl Component for GroupDetails {
             (Some(u), error) => {
                 html! {
                     <div>
+                      {self.view_details(u)}
                       {self.view_user_list(u)}
                       {self.view_add_user_button(u)}
                       {self.view_messages(error)}

app/src/components/group_table.rs

@@ -97,7 +97,8 @@ impl GroupTable {
                   <table class="table table-striped">
                     <thead>
                       <tr>
-                        <th>{"Groups"}</th>
+                        <th>{"Group name"}</th>
+                        <th>{"Creation date"}</th>
                         <th>{"Delete"}</th>
                       </tr>
                     </thead>
@@ -122,6 +123,9 @@ impl GroupTable {
                   {&group.display_name}
                 </Link>
               </td>
+              <td>
+                {&group.creation_date.date().naive_local()}
+              </td>
               <td>
                 <DeleteGroup
                   group=group.clone()

schema.graphql

@@ -17,6 +17,7 @@ type Mutation {
 type Group {
   id: Int!
   displayName: String!
+  creationDate: DateTimeUtc!
   "The groups to which this user belongs."
   users: [User!]!
 }

server/src/infra/graphql/query.rs

@@ -272,6 +272,9 @@ impl<Handler: BackendHandler + Sync> Group<Handler> {
     fn display_name(&self) -> String {
         self.display_name.clone()
     }
+    fn creation_date(&self) -> chrono::DateTime<chrono::Utc> {
+        self.creation_date
+    }
     /// The groups to which this user belongs.
     async fn users(&self, context: &Context<Handler>) -> FieldResult<Vec<User<Handler>>> {
         let span = debug_span!("[GraphQL query] group::users");