From 065dc65e3a26826d32119d4c8d886b91e58ef36b Mon Sep 17 00:00:00 2001
From: Brian DeRocher <brian@derocher.org>
Date: Sun, 15 Dec 2024 20:09:43 -0500
Subject: [PATCH] Stickers have only ids of organizations, not the entire
 objects.

---
 src/components/Sticker.vue       | 17 ++++++++++++++++-
 src/views/StickerBuilderView.vue | 24 ++++++++++++++++--------
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/components/Sticker.vue b/src/components/Sticker.vue
index fb136a7..78805e4 100644
--- a/src/components/Sticker.vue
+++ b/src/components/Sticker.vue
@@ -2,6 +2,7 @@
 import QRCode from "@/components/QRCode.vue";
 import {computed} from "vue";
 import Image from 'primevue/image'
+import { type Organization, useOrganization } from '@/queries/organization'
 
 const {
   layout, color,
@@ -34,13 +35,25 @@ const layout4Class = computed(() => ({
 const color2 = computed(() => {
   return '#' + color;
 })
+
+const { state: allOrgs } = useOrganization();
+
+const myOrgs = computed(() => {
+  console.log(orgs)
+  if (allOrgs.value.status !== 'success') {
+    return [];
+  }
+  return allOrgs.value.data.filter((org: Organization) => {
+    return orgs.includes(org.id);
+  });
+});
 </script>
 <template>
   <div class="sticker">
     <QRCode class="qr-code"></QRCode>
     <div class="content">
       <div class="orgs">
-        <div v-for="org in orgs" :key="org.id">
+        <div v-for="org in myOrgs" :key="org.id">
           <img class="logo" :src="org.logo" alt="todo" />
         </div>
       </div>
@@ -127,6 +140,8 @@ const color2 = computed(() => {
     }
     .orgs {
       display: flex;
+      flex-direction: row;
+      justify-content: space-evenly;
       position: absolute;
       > div {
         flex-shrink: 0;
diff --git a/src/views/StickerBuilderView.vue b/src/views/StickerBuilderView.vue
index c780575..963e8f2 100644
--- a/src/views/StickerBuilderView.vue
+++ b/src/views/StickerBuilderView.vue
@@ -23,7 +23,6 @@ import { activist, type Sticker as StickerType } from '@/stores/stickersStore';
 
 
 const { state: orgs } = useOrganization();
-// const sticker.orgs = ref<Organization[]>([]);
 const original = useSticker();
 let sticker = ref<StickerType>(activist);
 const orgFilter = ref("");
@@ -43,17 +42,25 @@ function onFormSubmit() {
 }
 
 function addOrg(id: string) {
-  sticker.value.orgs.push(orgs.value.data.find((org: Organization) => org.id === id));
+  sticker.value.orgs.push(id);
 }
 function removeOrg(orgId: string) {
-  const myIds = sticker.value.orgs.map(org => org.id);
-  let start = myIds.indexOf(orgId);
+  let start = sticker.value.orgs.indexOf(orgId);
   sticker.value.orgs.splice(start, 1);
 }
+// duplicated in Sticker.vue.  Consider moving this to
+// organization.ts or stickerStore.
+const myOrgs = computed(() => {
+  if (orgs.value.status !== 'success') {
+    return [];
+  }
+  return orgs.value.data.filter((org: Organization) => {
+    return sticker.value.orgs.includes(org.id);
+  });
+});
 const orgOptions = computed(() => {
-  const myIds = sticker.value.orgs.map(org => org.id);
   return orgs.value.data.filter(({ id, name }: { id: string, name: string }) => {
-    return !myIds.includes(id)
+    return !sticker.value.orgs.includes(id)
       && name.toLowerCase().includes(orgFilter.value.toLowerCase());
   });
 });
@@ -62,7 +69,7 @@ const orgOptions = computed(() => {
 <template>
   <div id="StickerPage">
 <!--    <Button class="w-20" type="submit" severity="secondary" label="Take a snapshot" />-->
-    <div id="StickerWrapper" class="sticky top-0 z-10">
+    <div id="StickerWrapper" class="sticky z-10">
       <Sticker v-bind="sticker" id="Sticker1" />
 <!--      <p>8-inch sticker</p>-->
 <!--      <Sticker id="Sticker2" v-bind="sticker2" />-->
@@ -77,7 +84,7 @@ const orgOptions = computed(() => {
               <div class="col-span-12 flex flex-col gap-4">
                 <label for="nickname2">Organizations I Support</label>
                 <div class="my-orgs">
-                  <div v-for="org in sticker.orgs" :key="org.id">
+                  <div v-for="org in myOrgs" :key="org.id">
                     <Chip
                       :image="org.logo"
                       :label="org.abbrev"
@@ -213,6 +220,7 @@ label {
   justify-content: space-around;
   gap: 1em;
   padding: 20px;
+  top: 60px;
   #Sticker1 {
     width: 300px;
     @media (screen(sm)) {