Fix select app

frontend/src/pages/AppManagement.vue

@@ -26,7 +26,7 @@
       <template v-slot:body-cell-actions="p">
         <q-td :props="p">
           <q-btn-group flat>
-            <q-btn flat color="primary" padding="xs" size="1em" icon="edit_note" @click="editFlow(p.row)" />
+            <q-btn flat color="primary" padding="xs" size="1em" icon="edit_note" @click="toEditFlowPage(p.row)" />
             <q-btn disabled flat color="primary" padding="xs" size="1em" icon="history" @click="showHistory(p.row)" />
             <q-btn disabled flat color="negative" padding="xs" size="1em" icon="delete_outline" @click="removeRow(p.row)" />
           </q-btn-group>
@@ -70,16 +70,15 @@ interface IAppDisplay{
 
 const authStore = useAuthStore();
 const numberStringSorting = (a: string, b: string) => parseInt(a, 10) - parseInt(b, 10);
-const addedRowHighlightClass = (row: IAppDisplay) => row.id === addedRowId.value ? 'highlight-row' : '';
 
 const columns = [
-  { name: 'id', label: 'アプリID', field: 'id', align: 'left', sortable: true, sort: numberStringSorting, classes: addedRowHighlightClass },
-  { name: 'name', label: 'アプリ名', field: 'name', align: 'left', sortable: true, classes: addedRowHighlightClass },
-  { name: 'url', label: 'URL', field: 'url', align: 'left', sortable: true, classes: addedRowHighlightClass },
-  { name: 'user', label: '最後更新者', field: 'user', align: 'left', sortable: true, classes: addedRowHighlightClass},
-  { name: 'updatetime', label: '最後更新日', field: 'updatetime', align: 'left', sortable: true, classes: addedRowHighlightClass },
-  { name: 'version', label: 'バージョン', field: 'version', align: 'left', sortable: true, sort: numberStringSorting, classes: addedRowHighlightClass },
-  { name: 'actions', label: '操作', field: 'actions', classes: addedRowHighlightClass }
+  { name: 'id', label: 'アプリID', field: 'id', align: 'left', sortable: true, sort: numberStringSorting },
+  { name: 'name', label: 'アプリ名', field: 'name', align: 'left', sortable: true },
+  { name: 'url', label: 'URL', field: 'url', align: 'left', sortable: true },
+  { name: 'user', label: '最後更新者', field: 'user', align: 'left', sortable: true},
+  { name: 'updatetime', label: '最後更新日', field: 'updatetime', align: 'left', sortable: true},
+  { name: 'version', label: 'バージョン', field: 'version', align: 'left', sortable: true, sort: numberStringSorting },
+  { name: 'actions', label: '操作', field: 'actions' }
 ];
 
 const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 20 });
@@ -92,7 +91,6 @@ const store = useFlowEditorStore();
 const appDialog = ref();
 const showSelectApp=ref(false);
 const isAdding = ref(false);
-const addedRowId = ref('');
 
 const getApps = async () => {
   loading.value = true;
@@ -126,29 +124,7 @@ const closeSelectAppDialog = async (val: 'OK'|'Cancel') => {
   showSelectApp.value = true;
   if (val == 'OK' && appDialog.value.selected[0]) {
       isAdding.value = true;
-      const data  = appDialog.value.selected[0];
-      const appInfo = {
-        domainurl: authStore.currentDomain.kintoneUrl,
-        appid: data.id ,
-        appname: data.name
-      };
-      const result = await api.post('api/apps', appInfo);
-      const item = result?.data;
-      if (item) {
-        // binarysearch is better
-        const newItem = appToAppDisplay(item)
-        const index = rows.value.findIndex(element => element.sortId >= newItem.sortId);
-        if (index === -1) {
-          rows.value.push(newItem);
-        } else {
-          rows.value.splice(index, 0, newItem);
-        }
-        rowIds.add(newItem.id);
-        addedRowId.value = newItem.id;
-        setTimeout(() => {
-          addedRowId.value = ''
-        }, 2000);
-      }
+      toEditFlowPage(appDialog.value.selected[0]);
   }
   showSelectApp.value = false;
   isAdding.value = false;
@@ -174,7 +150,7 @@ const appToAppDisplay = (app: IManagedApp) => {
   }
 }
 
-const editFlow = (app:IAppDisplay) => {
+const toEditFlowPage = (app:IAppDisplay) => {
   store.setApp({
     appId: app.id,
     name: app.name
@@ -182,14 +158,4 @@ const editFlow = (app:IAppDisplay) => {
   store.selectFlow(undefined);
   router.push('/FlowChart/' + app.id);
 };
-</script>
-<style lang="scss">
-.q-table td.highlight-row {
-  animation: breathe 0.6s ease-in-out 2 forwards;
-}
-@keyframes breathe {
-  0% { background-color: #ffffff; }
-  50% { background-color: #fffde7; }
-  100% { background-color: #ffffff; }
-}
-</style>
+</script>

frontend/src/pages/FlowChart.vue

@@ -328,8 +328,22 @@ const fetchData = async () => {
 }
 
 const fetchAppById = async(id: string) => {
-  const result = await api.get('api/apps');
-  return result.data.find((item: IManagedApp) => item.appid === id ) as IManagedApp;
+  try {
+    const result = await api.get('api/apps');
+    return result.data.find((item: IManagedApp) => item.appid === id ) as IManagedApp;
+  } catch (e) {
+    console.error(e);
+    const result = await api.get(`api/v1/app?app=${id}`);
+    const data = result?.data;
+    if (data?.message) {
+      $q.notify({
+        type: 'negative',
+        caption: "エラー",
+        message: data.message
+      });
+    }
+    return { appid: data.appId, appname: data.name };
+  }
 }
 
 const onClearFilter=()=>{