refactor: ♻️ move calendar month component to images menu

CRBroughton · Nov 18, 2023 · a021252 · a021252
1 parent e7e2634
commit a021252
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 38 deletions.
diff --git a/.changeset/heavy-colts-move.md b/.changeset/heavy-colts-move.md
@@ -0,0 +1,5 @@
+---
+"forager": minor
+---
+
+move calendar month componen to images menu
diff --git a/db/seeder/seeder.go b/db/seeder/seeder.go
@@ -52,7 +52,7 @@ func seedTestUsersMarkers(app *pocketbase.PocketBase) {
 			Lng:        "-0.13107839490911033",
 			Lat:        "50.8315128991386",
 			Colour:     "purple",
-			StartMonth: "January",
+			StartMonth: "August",
 			EndMonth:   "September",
 			ImageURL:   "https://upload.wikimedia.org/wikipedia/commons/7/78/Ripe%2C_ripening%2C_and_green_blackberries.jpg",
 		},
@@ -132,30 +132,40 @@ func seedTestUser(app *pocketbase.PocketBase) {
 	record := models.NewRecord(collection)
 
 	type image struct {
-		Colour string `json:"colour"`
-		Name   string `json:"name"`
-		Url    string `json:"url"`
+		Colour     string `json:"colour"`
+		Name       string `json:"name"`
+		Url        string `json:"url"`
+		StartMonth string `json:"startMonth"`
+		EndMonth   string `json:"endMonth"`
 	}
 
 	images := []image{
 		{
-			Colour: "purple",
-			Name:   "Blackberries",
-			Url:    "https://upload.wikimedia.org/wikipedia/commons/7/78/Ripe%2C_ripening%2C_and_green_blackberries.jpg",
+			Colour:     "purple",
+			Name:       "Blackberries",
+			Url:        "https://upload.wikimedia.org/wikipedia/commons/7/78/Ripe%2C_ripening%2C_and_green_blackberries.jpg",
+			StartMonth: "August",
+			EndMonth:   "September",
 		},
 		{
-			Colour: "deeppink",
-			Name:   "Hawthorn",
-			Url:    "https://images.immediate.co.uk/production/volatile/sites/23/2019/09/GettyImages-513147101-hawthorn-Neil-Holmes-dba76ab.jpg",
+			Colour:     "deeppink",
+			Name:       "Hawthorn",
+			Url:        "https://images.immediate.co.uk/production/volatile/sites/23/2019/09/GettyImages-513147101-hawthorn-Neil-Holmes-dba76ab.jpg",
+			StartMonth: "January",
+			EndMonth:   "December",
 		},
 		{
-			Name: "Rhubarb",
-			Url:  "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Rheum_rhabarbarum.2006-04-27.uellue.jpg/1280px-Rheum_rhabarbarum.2006-04-27.uellue.jpg",
+			Name:       "Rhubarb",
+			Url:        "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Rheum_rhabarbarum.2006-04-27.uellue.jpg/1280px-Rheum_rhabarbarum.2006-04-27.uellue.jpg",
+			StartMonth: "January",
+			EndMonth:   "December",
 		},
 		{
-			Colour: "cadetblue",
-			Name:   "Elderberries",
-			Url:    "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Sambucus-berries.jpg/1280px-Sambucus-berries.jpg",
+			Colour:     "cadetblue",
+			Name:       "Elderberries",
+			Url:        "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Sambucus-berries.jpg/1280px-Sambucus-berries.jpg",
+			StartMonth: "January",
+			EndMonth:   "December",
 		},
 	}
 

diff --git a/src/components/AddMarker.vue b/src/components/AddMarker.vue
@@ -29,10 +29,16 @@ const mapboxStore = useMapbox()
 const { lng, lat } = storeToRefs(mapboxStore)
 const pocketbaseStore = usePocketBase()
 const { user } = storeToRefs(pocketbaseStore)
-const selectedStartMonth = ref('January')
-const selectedEndMonth = ref('December')
+
 const creatingNewItem = ref(false)
 
+const selectedItem = reactive<UserImage>({
+  name: '',
+  colour: '',
+  startMonth: '',
+  endMonth: '',
+  url: '',
+})
 const input = ref('')
 function hide() {
   input.value = ''
@@ -41,13 +47,8 @@ function hide() {
 }
 
 
-const imageURL = ref<string | undefined>('')
-const selectedColour = ref('red')
-
 function setSelectedItem(event: UserImage) {
-  imageURL.value = event.url
-  input.value = event.name
-  selectedColour.value = event.colour
+  Object.assign(selectedItem, event) 
 }
 </script>
 
@@ -75,24 +76,19 @@ function setSelectedItem(event: UserImage) {
           </div>
 
           <div v-else-if="creatingNewItem">
-            <ColourSelector :selected-colour="selectedColour" @change="selectedColour = $event" />
+            <ColourSelector :selected-colour="selectedItem.colour" @change="selectedItem.colour = $event" />
             <input
               v-model="input"
               type="text"
               class="w-full flex my-5 py-3 shadow-xl border-gray-200 border cursor-pointer outline-none focus:outline-none text-center rounded-xl focus:ring-2 focus:ring-gray-400"
               placeholder="Please Enter Object Name"
               data-test="input-marker-title"
             >
-            <MonthSelector 
-              :selected-start-month="selectedStartMonth" :selected-end-month="selectedEndMonth" 
-              @update-start-month="selectedStartMonth = $event"
-              @update-end-month="selectedEndMonth = $event"
-            />
           </div>
         </Transition>
       </div>
       <div class="flex gap-4 m-auto w-full justify-center">
-        <BaseButton @click="mapboxStore.addMarker(lng, lat, input, selectedColour, selectedStartMonth, selectedEndMonth, imageURL!)">
+        <BaseButton @click="mapboxStore.addMarker(lng, lat, selectedItem)">
           Create
         </BaseButton>
         <BaseButton @click="hide">

diff --git a/src/mapbox.ts b/src/mapbox.ts
@@ -2,7 +2,7 @@ import type { MapMouseEvent } from 'mapbox-gl'
 import type { Feature } from 'geojson'
 import mapboxgl from 'mapbox-gl'
 import { usePocketBase } from './pocketbase'
-import type { ItemsRecordWithID } from './types'
+import type { ItemsRecordWithID, UserImage } from './types'
 import { createLayers } from './mapbox/layers'
 import { createGeolocator } from './mapbox/geoLocator'
 
@@ -172,7 +172,7 @@ export const useMapbox = defineStore('mapbox-store', () => {
     })
   }
 
-  const addMarker = async (lng: number, lat: number, name: string, colour: string, startMonth: string, endMonth: string, imageURL: string) => {
+  const addMarker = async (lng: number, lat: number, selectedImage: UserImage) => {
     // Create a new marker.
     const settingsStore = usePocketBase()
 
@@ -181,12 +181,12 @@ export const useMapbox = defineStore('mapbox-store', () => {
       lastForaged: undefined,
       lng,
       lat,
-      name,
+      name: selectedImage.name,
       owner: settingsStore.user?.id,
-      colour,
-      startMonth,
-      endMonth,
-      imageURL,
+      colour: selectedImage.colour,
+      startMonth: selectedImage.startMonth,
+      endMonth: selectedImage.endMonth,
+      imageURL: selectedImage.url,
     }
 
     await settingsStore.createItem(newItem)

diff --git a/src/pocketbase.ts b/src/pocketbase.ts
@@ -230,6 +230,8 @@ export const usePocketBase = defineStore('pocketbase-store', () => {
     name: string
     url: string
     colour: string
+    startMonth: string
+    endMonth: string
   }
   const createImage = async (img: UserImage) => {
     const images = user.value?.images ? [...user.value?.images, img] : [img]

diff --git a/src/types.ts b/src/types.ts
@@ -13,4 +13,6 @@ export interface UserImage {
   name: string
   url: string
   colour: string
+  startMonth: string
+  endMonth: string
 }
diff --git a/src/views/settings/ImageSettings.vue b/src/views/settings/ImageSettings.vue
@@ -25,6 +25,9 @@ watch(() => imageSettingsRef.value, () => {
 
   createItemPopup('#imageSettings', 'Add your images here, then start creating items on the map!')
 })
+
+const selectedStartMonth = ref('January')
+const selectedEndMonth = ref('December')
 </script>
 
 <template>
@@ -52,8 +55,13 @@ watch(() => imageSettingsRef.value, () => {
       <input v-model="imageURL" class="login-input" placeholder="Enter Image URL">
       <input v-model="imageName" class="login-input" placeholder="Enter Image Name">
     </div>
+    <MonthSelector 
+      :selected-start-month="selectedStartMonth" :selected-end-month="selectedEndMonth" 
+      @update-start-month="selectedStartMonth = $event"
+      @update-end-month="selectedEndMonth = $event"
+    />
     <div class="flex flex-col gap-4 w-full mt-auto">
-      <BaseButton :class="{ disabled: submitButtonDisabled }" :disabled="submitButtonDisabled" @click="pocketbaseStore.createImage({ name: imageName, url: imageURL, colour: selectedColour })">
+      <BaseButton :class="{ disabled: submitButtonDisabled }" :disabled="submitButtonDisabled" @click="pocketbaseStore.createImage({ name: imageName, url: imageURL, colour: selectedColour, startMonth: selectedStartMonth, endMonth: selectedEndMonth })">
         Create New Image
       </BaseButton>
       <BaseButton @click="toggleImageMenu">