From b26877ef580635e647a2059f55960a91aec4acea Mon Sep 17 00:00:00 2001
From: xue jiahao <hsuehchiahao@gmail.com>
Date: Thu, 5 Dec 2024 17:55:12 +0800
Subject: [PATCH] [UI] load apps fail warning

---
 .../src/components/UserDomain/DomainCard.vue  | 12 ++++------
 frontend/src/pages/AppManagement.vue          | 23 ++++++++++++++-----
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/UserDomain/DomainCard.vue b/frontend/src/components/UserDomain/DomainCard.vue
index d9c31a2..d6f0914 100644
--- a/frontend/src/components/UserDomain/DomainCard.vue
+++ b/frontend/src/components/UserDomain/DomainCard.vue
@@ -1,10 +1,10 @@
 <template>
-  <q-card :class="['domain-card', small ? 'small' : '', item.id == activeId ? 'default': '']">
-    <q-card-section :class="[small ? 'q-py-sm' : '']">
+  <q-card :class="['domain-card', item.id == activeId ? 'default': '']">
+    <q-card-section>
       <div class="row  no-wrap">
         <div class="col">
-          <div :class="[small ? 'text-subtitle2' : 'text-h6', 'ellipsis']">{{ item.name }}</div>
-          <div :class="[small ? 'text-caption' : 'text-subtitle2']">{{ item.url }}</div>
+          <div class="text-h6 ellipsis">{{ item.name }}</div>
+          <div class="text-subtitle2">{{ item.url }}</div>
         </div>
         <div v-if="!isOwnerFunc(item.owner.id)" class="col-auto">
           <!-- <q-badge color="secondary" text-color="white" align="middle" class="q-mb-xs" label="他人の所有" /> -->
@@ -41,7 +41,6 @@ import { useAuthStore } from 'stores/useAuthStore';
 
 const props = defineProps<{
   item: IDomainOwnerDisplay;
-  small: boolean;
   activeId: number;
 }>();
 
@@ -53,9 +52,6 @@ const isOwnerFunc = computed(() => (ownerId: string) => {
 </script>
 
 <style lang="scss" scoped>
-.domain-card.small {
-  width: 18rem;
-}
 .domain-card.default {
   box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.2),
               0 10px 14px 1px rgba(0, 0, 0, 0.14),
diff --git a/frontend/src/pages/AppManagement.vue b/frontend/src/pages/AppManagement.vue
index e2cf5e6..ec5fbb6 100644
--- a/frontend/src/pages/AppManagement.vue
+++ b/frontend/src/pages/AppManagement.vue
@@ -74,6 +74,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted, watch, reactive } from 'vue';
+import { useQuasar } from 'quasar'
 import { api } from 'boot/axios';
 import { useAuthStore } from 'stores/useAuthStore';
 import { useFlowEditorStore } from 'stores/flowEditor';
@@ -112,6 +113,7 @@ const filter = ref('');
 const rows = ref<IAppDisplay[]>([]);
 const rowIds = new Set<string>();
 
+const $q = useQuasar()
 const store = useFlowEditorStore();
 const appDialog = ref();
 const showSelectApp=ref(false);
@@ -120,12 +122,21 @@ const isAdding = ref(false);
 const getApps = async () => {
   loading.value = true;
   rowIds.clear();
-  const result = await api.get('api/apps');
-  rows.value = result.data.data.map((item: IManagedApp) => {
-    rowIds.add(item.appid);
-    return appToAppDisplay(item)
-  }).sort((a: IAppDisplay, b: IAppDisplay) => a.sortId - b.sortId); // set default order
-  loading.value = false;
+  try {
+    const { data } = await api.get('api/apps');
+    rows.value = data.data.map((item: IManagedApp) => {
+      rowIds.add(item.appid);
+      return appToAppDisplay(item)
+    }).sort((a: IAppDisplay, b: IAppDisplay) => a.sortId - b.sortId); // set default order
+  } catch (error) {
+    $q.notify({
+      icon: 'error',
+      color: 'negative',
+      message: 'アプリ一覧の読み込みに失敗しました'
+    });
+  } finally {
+    loading.value = false;
+  }
 }
 
 onMounted(async () => {