Token無効の際再ログイン対応

frontend/src/components/AppSelect.vue

@@ -1,11 +1,20 @@
 <template>
   <div class="q-pa-md">
-    <q-table :title="name+'一覧'" :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
+    <q-table  :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" >
+      <template v-slot:body-cell-description="props">
+          <q-td :props="props">
+              <q-scroll-area  class="description-cell">
+                <div v-html="props.row.description" ></div>
+              </q-scroll-area>
+          </q-td>
+      </template>
+    </q-table>
   </div>
 </template>
-<script>
+<script >
 import { ref,onMounted,reactive } from 'vue'
 import { api } from 'boot/axios';
+import { LeftDataBus } from './flowEditor/left/DataBus';
 
 export default {
   name: 'AppSelect',
@@ -15,27 +24,51 @@ export default {
   },
   setup() {
   const columns = [
-  { name: 'id', required: true,label: 'アプリID',align: 'left',field: 'id',sortable: true},
-  { name: 'name', align: 'center', label: 'アプリ名', field: 'name', sortable: true },
-  { name: 'creator', label: '作成者', field: 'creator', sortable: true },
-  { name: 'createdate', label: '作成日時', field: 'createdate' }
+  { name: 'id', required: true,label: 'ID',align: 'left',field: 'id',sortable: true},
+  { name: 'name', label: 'アプリ名', field: 'name', sortable: true,align:'left' },
+  { name: 'description', label: '概要', field: 'description',align:'left', sortable: false },
+  { name: 'createdate', label: '作成日時', field: 'createdate',align:'left'}
   ]
   const rows = reactive([])
     onMounted( () => {
         api.get('api/v1/allapps').then(res =>{
-         res.data.apps.forEach((item) =>
-        {
-          rows.push({id:item.appId,name:item.name,creator:item.creator.name,createdate:item.createdAt});
-        }
-        )
-      });
+          res.data.apps.forEach((item) =>
+              {
+                rows.push({
+                  id:item.appId,
+                  name:item.name,
+                  description:item.description,
+                  createdate:dateFormat(item.createdAt)});
+              }
+            )
+        });
       });
+
+    const dateFormat=(dateStr)=>{
+      const date = new Date(dateStr);
+      const pad = (num) => num.toString().padStart(2, '0');
+      const year = date.getFullYear();
+      const month = pad(date.getMonth() + 1);
+      const day = pad(date.getDate());
+      const hours = pad(date.getHours());
+      const minutes = pad(date.getMinutes());
+      const seconds = pad(date.getSeconds());
+      return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
+    }
     return {
       columns,
       rows,
-      selected: ref([]),
+      selected: ref([])
     }
   },
 
 }
 </script>
+<style lang="scss">
+.description-cell{
+  height: 60px;
+  width: 300px;
+  max-height: 60px;
+  max-width: 300px;
+}
+</style>