Sticker builder is now bound to the sticker in the store.

server.js

@@ -18,14 +18,14 @@ const users = {
 
 const stickers = {
   "88ae126f-b19a-4287-abe0-a8f5ac763cb7": {
-    color: "#780606",
+    color: "780606",
     layout: "layout1",
     message1: "I ♥ Medicare all All",
     owner: null,
     uuid: "88ae126f-b19a-4287-abe0-a8f5ac763cb7",
   },
   "38dafe9b-5563-4112-afa8-c895adc68e5b": {
-    color: "#008800",
+    color: "008800",
     layout: "layout1",
     message1: "I am a treehugger!",
     owner: null,

src/components/Sticker.vue

@@ -27,6 +27,10 @@ const layout4Class = computed(() => ({
   hidden: layout !== 'layout4',
   layout4: layout === 'layout4',
 }))
+
+const color2 = computed(() => {
+  return '#' + color;
+})
 </script>
 <template>
   <div class="sticker">
@@ -66,7 +70,7 @@ const layout4Class = computed(() => ({
 .sticker {
   width: 256px;
   aspect-ratio: 6 / 1;
-  background-color: v-bind(color);
+  background-color: v-bind(color2);
   display: flex;
   .content {
     //font-size: calc(1.5vw + 1.5vh);

src/composables/sticker.ts

@@ -0,0 +1,33 @@
+import { onBeforeMount, ref } from 'vue'
+import type { Ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import {
+  activist,
+  type Sticker as StickerType,
+  useStickersStore,
+} from '@/stores/stickersStore'
+
+
+export function useSticker() {
+  let sticker: Ref<StickerType> = ref<StickerType>(activist);
+  const route = useRoute();
+  if (!("uuid" in route.params)) {
+    return sticker;
+  }
+  const uuid = ref<string>(route.params.uuid as string);
+  const stickersStore = useStickersStore();
+  const { getSticker } = stickersStore;
+
+  onBeforeMount(async () => {
+    await stickersStore.fetch(uuid.value);
+    let sticker2 = getSticker(uuid.value);
+    if (!sticker2) {
+      return
+    }
+    sticker.value = sticker2;
+    stickersStore.activeSticker = uuid.value
+  });
+
+  return sticker;
+}

src/stores/stickersStore.ts

@@ -6,11 +6,28 @@ import { useUserStore } from '@/stores/userStore'
 
 export interface Sticker {
   color: string,
+  layout: string,
+  message1: string | null,
+  message2: string | null,
+  message3: string | null,
+  message4: string | null,
   owner: string | null,
   uuid: string,
 }
 
+export const activist: Sticker = {
+  color: 'FF0000',
+  layout: 'layout1',
+  message1: 'I AM AN ACTIVIST',
+  message2: null,
+  message3: null,
+  message4: null,
+  owner: null,
+  uuid: '6dcd2dae-7be2-4f79-8b10-caeb379452fc',
+};
+
 export interface State {
+  activeSticker: string | null;  // uuid
   stickers: Sticker[];
 }
 
@@ -59,6 +76,7 @@ export const useStickersStore = defineStore('stickers', {
   },
   state: (): State =>  {
     return {
+      activeSticker: null,
       stickers: [],
     };
   },

src/views/StickerBuilderView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {computed, ref} from 'vue';
+import { ref } from 'vue'
 
 import Button from 'primevue/button';
 import Card from 'primevue/card';
@@ -17,6 +17,10 @@ import IconLayout2Vue from '@/components/layouts/IconLayout2.vue';
 import IconLayout3Vue from '@/components/layouts/IconLayout3.vue';
 import IconLayout4Vue from '@/components/layouts/IconLayout4.vue';
 import Sticker from '@/components/Sticker.vue';
+import { useSticker } from '@/composables/sticker'
+
+
+const sticker = useSticker();
 
 
 const checked = ref(true);
@@ -45,22 +49,6 @@ const resolver = () => {
   return {};
 };
 
-const layout = defineModel<string>('layout');
-layout.value = 'layout1';
-const message1 = defineModel<string>('message1');
-message1.value = "I SUPPORT M4A";
-const message2 = defineModel<string>('message2');
-message2.value = "m2";
-const message3 = defineModel<string>('message3');
-message3.value = "m3";
-const message4 = defineModel<string>('message4');
-message4.value = "";
-const color = defineModel<string>('background-color');
-color.value = '000088';
-
-const color2 = computed(() => {
-  return '#' + color.value;
-})
 
 function onFormSubmit() {
   return {};
@@ -69,48 +57,36 @@ function onFormSubmit() {
 
 <template>
   <div id="StickerPage">
-    <h1>Sticker</h1>
 <!--    <Button class="w-20" type="submit" severity="secondary" label="Take a snapshot" />-->
     <div id="StickerWrapper" class="sticky top-0 z-10">
-      <Sticker
+      <Sticker id="Sticker1" v-bind="sticker" />
-        id="Sticker1"
-        v-bind:layout v-bind:color="color2"
-        v-bind:message1 v-bind:message2
-        v-bind:message3 v-bind:message4
-      />
 <!--      <p>8-inch sticker</p>-->
-<!--      <Sticker-->
+<!--      <Sticker id="Sticker2" v-bind="sticker2" />-->
-<!--        id="Sticker2"-->
-<!--        v-bind:layout v-bind:color="color2"-->
-<!--        v-bind:message1 v-bind:message2-->
-<!--        v-bind:message3 v-bind:message4-->
-<!--      />-->
     </div>
     <Card>
       <template #content>
-        <Form v-slot="$form"
+        <Form v-bind:initialValues
-              v-bind:initialValues
               v-bind:resolver="resolver"
               @submit="onFormSubmit">
           <div class="bg-surface-50 dark:bg-surface-950 px-3 py-5 md:px-12 lg:px-5">
             <div class="grid grid-cols-12 gap-4">
               <div class="col-span-12">
-                <label for="nickname2">Layout {{layout}}</label>
+                <label for="nickname2">Layout {{sticker.layout}}</label>
                 <div class="flex flex-wrap gap-4">
                   <div class="flex items-center gap-2">
-                    <RadioButton v-model="layout" inputId="layout1" name="layout" value="layout1" />
+                    <RadioButton v-model="sticker.layout" inputId="layout1" name="layout" value="layout1" />
                     <label for="layout1"><IconLayout1Vue /></label>
                   </div>
                   <div class="flex items-center gap-2">
-                    <RadioButton v-model="layout" inputId="layout2" name="layout" value="layout2" />
+                    <RadioButton v-model="sticker.layout" inputId="layout2" name="layout" value="layout2" />
                     <label for="layout2"><IconLayout2Vue /></label>
                   </div>
                   <div class="flex items-center gap-2">
-                    <RadioButton v-model="layout" inputId="layout3" name="layout" value="layout3" />
+                    <RadioButton v-model="sticker.layout" inputId="layout3" name="layout" value="layout3" />
                     <label for="layout3"><IconLayout3Vue /></label>
                   </div>
                   <div class="flex items-center gap-2">
-                    <RadioButton v-model="layout" inputId="layout4" name="layout" value="layout4" />
+                    <RadioButton v-model="sticker.layout" inputId="layout4" name="layout" value="layout4" />
                     <label for="layout4"><IconLayout4Vue /></label>
                   </div>
                 </div>
@@ -120,27 +96,27 @@ function onFormSubmit() {
 
               <div class="col-span-12 md:col-span-6">
                 <label for="message1">Message 1</label>
-                <InputText class="w-full" id="message1" name="message1" type="text" v-model="message1" fluid />
+                <InputText class="w-full" id="message1" name="message1" type="text" v-model="sticker.message1" fluid />
               </div>
               <div class="col-span-12 md:col-span-6">
                 <label for="message2">Message 2</label>
-                <InputText class="w-full" id="message2" name="message2" type="text" v-model="message2" fluid />
+                <InputText class="w-full" id="message2" name="message2" type="text" v-model="sticker.message2" fluid />
               </div>
 
               <div class="col-span-12 md:col-span-6">
                 <label for="message1">Message 3</label>
-                <InputText class="w-full" id="message3" name="message3" type="text" v-model="message3" fluid />
+                <InputText class="w-full" id="message3" name="message3" type="text" v-model="sticker.message3" fluid />
               </div>
               <div class="col-span-12 md:col-span-6">
                 <label for="message4">Message 4</label>
-                <InputText class="w-full" id="message4" name="message4" type="text" v-model="message4" fluid />
+                <InputText class="w-full" id="message4" name="message4" type="text" v-model="sticker.message4" fluid />
               </div>
 
               <div class="divider" />
 
               <div class="col-span-12 md:col-span-6">
-                <label for="email2">Background Color {{color}}</label>
+                <label>Background Color {{sticker.color}}</label>
-                <ColorPicker v-model="color" />
+                <ColorPicker v-model="sticker.color" />
               </div>
               <div class="col-span-12 md:col-span-6">
                 <label for="country2">Country</label>