[UI] load apps fail warning

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),

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,13 +122,22 @@ 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) => {
+  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 () => {
   authStore.setLeftMenu(false);