Added PBChooser

src/components/elements/CCButton/BaseCCButton.vue

@@ -64,7 +64,7 @@ const getButtonColor = () => {
     case ButtonType.TEAL:
       return "bg-[#40C1C7]";
     case ButtonType.RED:
-      return "bg-[#D82027]";
+      return "bg-cc-red";
   }
 };
 </script>

src/components/elements/ProfilePicComponent.vue

@@ -14,13 +14,13 @@
 const props = withDefaults(
   defineProps<{
     src: any;
-    size: number;
+    size: number | string;
     alt: string;
   }>(),
   {
     src: {},
     size: 64,
-    alt: "",
+    alt: "Profile Pic",
   }
 );
 </script>

src/components/modals/ChoosePBModal.vue

@@ -1,43 +1,51 @@
 <template>
-  <transition name="modal-fade">
-    <div class="modal__backdrop" style="z-index: 1000">
-      <div
-        aria-describedby="modalDescription"
-        aria-labelledby="modalTitle"
-        class="modal"
-        role="dialog"
-      >
-        <header id="modalTitle" class="modal__header">
-          <slot name="header"> Choose profile card</slot>
-          <button
-            aria-label="Close modal"
-            type="button"
-            class="btn--close"
-            @click="close"
-          >
-            x
-          </button>
-        </header>
-        <div class="modal__body input--transfer">
-          <div v-for="obj in state.images" :key="obj" class="sppBox">
-            <img :src="obj.img" @click="send(obj.id)" />
-          </div>
-        </div>
-      </div>
+  <ModalFrame
+    heading="Choose Profile Card"
+    class="max-w-[100rem]"
+    @close="emit('close')"
+  >
+    <div class="overflow-y-auto flex flex-wrap gap-8 max-h-[50rem] m-16">
+      <ProfilePicComponent
+        v-for="obj in state.images"
+        :key="obj.id"
+        :src="obj.img"
+        size="40"
+        :class="
+          ['w-40', 'h-40'].concat(
+            obj.id == state.choosen ? ['border-cc-red', 'border-8'] : []
+          )
+        "
+        :alt="'Pic' + obj.id"
+        @click="choose(obj.id)"
+      />
     </div>
-  </transition>
+    <BaseCCButton
+      :type="ButtonType.RED"
+      @click="send"
+      class="mx-auto text-center"
+      >Save</BaseCCButton
+    >
+  </ModalFrame>
 </template>
 
 <script setup lang="ts">
+import { useAddress } from "@/def-composables/useAddress";
 import { useUser } from "@/def-composables/useUser";
 import { useTx } from "@/def-composables/useTx";
+import { useProfilePic } from "@/def-composables/useProfilePic";
 import type { Card } from "@/model/Card";
 import { onMounted, reactive } from "vue";
 import { useCards } from "@/def-composables/useCards";
+import ModalFrame from "@/components/modals/ModalFrame.vue";
+import ProfilePicComponent from "@/components/elements/ProfilePicComponent.vue";
+import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
+import { ButtonType } from "@/components/elements/CCButton/ButtonType";
 
+const { address } = useAddress()
+const { getDefaultImg } = useProfilePic()
 const { setProfileCard } = useTx();
 const { queryUser } = useUser();
-const { getCard } = useCards()
+const { getCard } = useCards();
 const emit = defineEmits(["close"]);
 
 class Pic {
@@ -53,42 +61,52 @@ class Pic {
 const props = withDefaults(
   defineProps<{
     cardIds: number[];
+    current: number;
   }>(),
   {
     cardIds: () => [],
+    current: 0,
   }
 );
 
 const initialState: {
   images: Array<Pic>;
+  choosen: number;
 } = {
-  images: new Array<Pic>(),
+  images: [new Pic(0, getDefaultImg(address.value))],
+  choosen: 0,
 };
 
 const state = reactive(initialState);
 
-onMounted(() => {
-  props.cardIds.map(id => loadCard(id))
-})
+onMounted(async () => {
+  state.choosen = props.current;
+  console.log("choosen " + state.choosen);
+  props.cardIds.forEach((id) => loadCard(id));
+});
 
 const loadCard = (id: number) => {
   getCard(id).then((card: Card) => {
     if (["permanent", "trial"].includes(card.status)) {
       state.images.push(new Pic(id, card.image));
     }
   });
-}
+};
+
+const close = () => emit("close");
 
-const close = () => emit("close")
+const choose = (id: number) => {
+  state.choosen = id;
+};
 
-const send = (id: number) => {
+const send = () => {
   setProfileCard(
-    id,
+    state.choosen,
     (res) => {
       queryUser();
       close();
     },
     console.log
   );
-}
+};
 </script>

src/components/modals/ModalFrame.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="fixed top-0 flex h-[100vh] w-[100%] bg-black/50">
+    <div :class="['p-10', 'z-100', 'm-auto'].concat(props.class)">
+      <header class="flex text-white text-4xl my-2 font-bold">
+        <p class="grow my-auto">{{ heading }}</p>
+        <button @click="emit('close')" class="group">
+          <img
+            :src="closeImg"
+            alt="close"
+            class="h-12 group-hover:drop-shadow-md"
+          />
+        </button>
+      </header>
+      <div class="bg-neutral-800 p-8">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import closeImg from "@/assets/figma/close.svg";
+
+const props = withDefaults(
+  defineProps<{
+    heading: string;
+    class: string[];
+  }>(),
+  {
+    heading: "Lorem impsum dolor",
+    class: () => [],
+  }
+);
+
+const emit = defineEmits(["close"]);
+</script>

src/components/partials/PageMenu.vue

@@ -16,7 +16,7 @@
   </div>
   <div
     :class="[
-      'bg-[#D82027]',
+      'bg-cc-red',
       'flex',
       'flex-row',
       'uppercase',

src/def-composables/useCards.ts

@@ -13,11 +13,11 @@ const updateCard = async (id: number) => {
   return card
 }
 
-const getCard = async (id: number) => {
+const getCard = (id: number) => {
   if (Object.keys(state.value).includes(""+id)) {
-    return state.value[id]
+    return Promise.resolve(state.value[id])
   }
-  return await updateCard(id)
+  return updateCard(id)
 }
 
 export const useCards = () => {

src/def-composables/useProfilePic.ts

@@ -35,7 +35,7 @@ const useProfilePicInstance = () => {
     }
   };
 
-  return { getImg, loggedInProfilePic };
+  return { getImg, getDefaultImg, loggedInProfilePic };
 }
 
 let instance: ReturnType<typeof useProfilePicInstance>;

src/views/UserView/UserView.vue

@@ -2,13 +2,29 @@
   <div class="flex bg-black text-white justify-center p-16">
     <div class="text-center pr-24">
       <div class="py-24">
-        <ProfilePicComponent :src="state.img" size="64" class="mx-auto h-64 w-64" alt="Profile pic" />
+        <div class="mx-auto h-64 w-64 relative group">
+          <ProfilePicComponent :src="state.img" size="64" alt="Profile pic" />
+          <button
+            v-if="state.userIsUser"
+            @click="showChooseModal"
+            class="absolute top-0 left-0 right-0 bottom-0 m-auto w-10 invisible group-hover:visible"
+          >
+            <img :src="editImg" alt="edit" class="hover:drop-shadow-md" />
+          </button>
+        </div>
       </div>
       <UserViewHeadingContainer>
         <template v-slot:heading>Council status</template>
         <template v-slot:body>
           <p>{{ user.CouncilStatus }}</p>
-          <BaseCCButton v-if="state.userIsUser" @click="state.user.CouncilStatus == 'unavailable' ? register() : deRegister()">
+          <BaseCCButton
+            v-if="state.userIsUser"
+            @click="
+              state.user.CouncilStatus == 'unavailable'
+                ? register()
+                : deRegister()
+            "
+          >
             {{
               state.user.CouncilStatus == "unavailable"
                 ? "Register for"
@@ -74,6 +90,12 @@
       </div>
     </div>
   </div>
+  <ChoosePBModal
+    v-if="state.isChooseModalVisible"
+    :cardIds="state.user.ownedPrototypes"
+    :current="state.user.profileCard"
+    @close="closeChooseModal"
+  />
 </template>
 
 <script setup lang="ts">
@@ -93,6 +115,8 @@ import UserViewHeadingContainer from "@/views/UserView/UserViewHeadingContainer.
 import RouterCCButton from "@/components/elements/CCButton/RouterCCButton.vue";
 import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
 import ProfilePicComponent from "@/components/elements/ProfilePicComponent.vue";
+import editImg from "@/assets/figma/edit.png";
+import ChoosePBModal from "@/components/modals/ChoosePBModal.vue";
 
 const { queryQUser, queryAllBalances } = useQuery();
 const { registerForCouncil, rewokeCouncilRegistration } = useTx();

tailwind.config.js

@@ -11,6 +11,9 @@ module.exports = {
   ],
   theme: {
     extend: {
+      colors: {
+        'cc-red': '#D82027',
+      },
       fontFamily: {
         sans: [
           'Roboto',