feat: display group id in fontend (#10)

* feat: display group ID

* chore: update picture

readme.md

@@ -66,7 +66,7 @@ You can check [docs/openapi.yml](./docs/openapi.yaml) for detail API
 6. User Info  ![User Info](https://i.ibb.co/BC0mNT7/Screen-Shot-2022-02-13-at-13-00-57.png)
 6. User Avatar  ![User Avatar](https://i.ibb.co/TkzPbLZ/Screen-Shot-2022-02-13-at-13-01-39.png)
 7. User Privacy ![User My Privacy](https://i.ibb.co/RQcC5m9/Screen-Shot-2022-02-13-at-12-58-47.png)
-8. User Group  ![List Group](https://i.ibb.co/GM9fhQD/Screen-Shot-2022-02-13-at-12-57-19.png)
+8. User Group  ![List Group](https://i.ibb.co/jfkgKdG/Screen-Shot-2022-05-12-at-21-12-06.png)
 
 ### Mac OS NOTE
 

src/views/index.html

@@ -293,6 +293,7 @@
             <table class="ui celled table" id="user_groups_table">
                 <thead>
                 <tr>
+                    <th>Group ID</th>
                     <th>Group Name</th>
                     <th>Group Participants</th>
                     <th>Group Created At</th>
@@ -300,6 +301,7 @@
                 </thead>
                 <tbody v-if="data_groups != null">
                 <tr v-for="g in data_groups">
+                    <td data-label="GID">[[ g.JID.User ]]</td>
                     <td data-label="Name">[[ g.Name ]]</td>
                     <td data-label="Age">[[ g.Participants.length ]]</td>
                     <td data-label="Job">[[ g.GroupCreated ]]</td>