From d09ac61689f1dd5c89e4d2043260ecaf92fd8067 Mon Sep 17 00:00:00 2001
From: somnetsak123 <https://somnetsak123@github.com>
Date: Wed, 6 Dec 2023 16:11:53 +0700
Subject: [PATCH] fix: createdBy is centered.

---
 Services/client/src/components/ListView.vue | 32 +++++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/Services/client/src/components/ListView.vue b/Services/client/src/components/ListView.vue
index 6835734..469ca18 100644
--- a/Services/client/src/components/ListView.vue
+++ b/Services/client/src/components/ListView.vue
@@ -195,7 +195,6 @@ const columnsFolder: QTableProps['columns'] = [
     label: 'สร้างโดย',
     field: 'createdBy',
     style: 'width: 20px',
-
     sortable: true,
   },
   {
@@ -301,6 +300,13 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
             {{ nameRow.row.name }}
           </q-td>
         </template>
+        <template v-slot:body-cell-createdBy="createdByRow">
+          <q-td>
+            <div class="justify-center center-content">
+              {{ createdByRow.row.createdBy }}
+            </div>
+          </q-td>
+        </template>
         <template v-slot:body-cell-createdAt="createdAtRow">
           <q-td>
             <div class="justify-center">
@@ -311,7 +317,13 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
         <template v-slot:body-cell-actions="actionsRow">
           <q-td class="justify-center">
             <div>
-              <q-icon @click.stop class="q-ma-sm" name="o_info" size="2em" color="primary" />
+              <q-icon
+                @click.stop
+                class="q-ma-sm"
+                name="o_info"
+                size="2em"
+                color="primary"
+              />
               <q-tooltip
                 anchor="center left"
                 self="center right"
@@ -325,7 +337,6 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
                 flat
                 color="positive"
                 dense
-                
                 icon="o_edit"
                 @click.stop="
                   triggerFolderEdit(
@@ -335,12 +346,12 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
                 "
                 id="listViewFolderEdit"
               />
-              
+
               <q-btn
                 flat
                 color="negative"
                 dense
-                :data-testid="(actionsRow.row.name)"
+                :data-testid="actionsRow.row.name"
                 icon="mdi-trash-can-outline"
                 @click.stop="triggerFolderDelete(actionsRow.row.pathname)"
                 id="listViewFolderDelete"
@@ -412,7 +423,12 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
         <template v-slot:body-cell-actions="actionsRow">
           <q-td class="justify-center">
             <div>
-              <q-icon class="q-ma-sm" name="o_info" size="2em" color="primary" />
+              <q-icon
+                class="q-ma-sm"
+                name="o_info"
+                size="2em"
+                color="primary"
+              />
               <q-tooltip
                 anchor="center left"
                 self="center right"
@@ -491,6 +507,10 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
   align-items: center;
 }
 
+.center-content {
+  margin-right: 18px;
+}
+
 .cursor {
   cursor: pointer;
 }