add an image to projects (which shows on all ProjectIcons except for offers)

src/views/ProjectsView.vue

@@ -86,12 +86,12 @@
           :key="offer.handleId"
         >
           <div class="block py-4 flex gap-4">
-            <div v-if="offer.fulfillsPlanHandleId" class="flex-none w-12">
+            <div v-if="offer.fulfillsPlanHandleId" class="flex-none">
               <ProjectIcon
                 :entityId="offer.fulfillsPlanHandleId"
                 :iconSize="48"
-                class="inline-block align-middle border border-slate-300 rounded-md"
-              ></ProjectIcon>
+                class="inline-block align-middle border border-slate-300 rounded-md max-h-12 max-w-12"
+              />
             </div>
             <div v-if="offer.recipientDid" class="flex-none w-12">
               <EntityIcon
@@ -189,12 +189,13 @@
             @click="onClickLoadProject(project.handleId)"
             class="block py-4 flex gap-4"
           >
-            <div class="flex-none w-12">
+            <div class="flex-none">
               <ProjectIcon
                 :entityId="project.handleId"
                 :iconSize="48"
-                class="inline-block align-middle border border-slate-300 rounded-md"
-              ></ProjectIcon>
+                :imageUrl="project.image"
+                class="inline-block align-middle border border-slate-300 rounded-md max-h-12 max-w-12"
+              />
             </div>
 
             <div class="grow overflow-hidden">
@@ -211,6 +212,7 @@
 </template>
 
 <script lang="ts">
+import { AxiosRequestConfig } from "axios";
 import { Component, Vue } from "vue-facing-decorator";
 
 import { NotificationIface } from "@/constants/app";
@@ -231,6 +233,12 @@ import EntityIcon from "@/components/EntityIcon.vue";
 })
 export default class ProjectsView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
+  errNote(message) {
+    this.$notify(
+      { group: "alert", type: "danger", title: "Error", text: message },
+      5000,
+    );
+  }
 
   apiServer = "";
   projects: PlanData[] = [];
@@ -256,30 +264,14 @@ export default class ProjectsView extends Vue {
       this.numAccounts = await accountsDB.accounts.count();
       if (this.numAccounts === 0) {
         console.error("No accounts found.");
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "You need an identifier to load your projects.",
-          },
-          -1,
-        );
+        this.errNote("You need an identifier to load your projects.");
       } else {
         this.currentIid = await this.getIdentity(activeDid);
         await this.loadOffers();
       }
     } catch (err) {
       console.error("Error initializing:", err);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "Something went wrong loading your projects.",
-        },
-        -1,
-      );
+      this.errNote("Something went wrong loading your projects.");
     }
   }
 
@@ -296,12 +288,19 @@ export default class ProjectsView extends Vue {
 
     try {
       this.isLoading = true;
-      const resp = await this.axios.get(url, { headers });
+      const resp = await this.axios.get(url, { headers } as AxiosRequestConfig);
       if (resp.status === 200 && resp.data.data) {
         const plans: PlanData[] = resp.data.data;
         for (const plan of plans) {
-          const { name, description, handleId, issuerDid, rowid } = plan;
-          this.projects.push({ name, description, handleId, issuerDid, rowid });
+          const { name, description, handleId, image, issuerDid, rowid } = plan;
+          this.projects.push({
+            name,
+            description,
+            image,
+            handleId,
+            issuerDid,
+            rowid,
+          });
         }
       } else {
         console.error(
@@ -309,28 +308,12 @@ export default class ProjectsView extends Vue {
           resp.status,
           resp.data,
         );
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "Failed to get projects from the server. Try again later.",
-          },
-          -1,
-        );
+        this.errNote("Failed to get projects from the server.");
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
       console.error("Got error loading plans:", error.message || error);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "Got an error loading projects.",
-        },
-        -1,
-      );
+      this.errNote("Got an error loading projects.");
     } finally {
       this.isLoading = false;
     }
@@ -421,7 +404,7 @@ export default class ProjectsView extends Vue {
 
     try {
       this.isLoading = true;
-      const resp = await this.axios.get(url, { headers });
+      const resp = await this.axios.get(url, { headers } as AxiosRequestConfig);
       if (resp.status === 200 && resp.data.data) {
         this.offers = this.offers.concat(resp.data.data);
       } else {