feat(goal): manage goals now have full input validation

src/assets/base.css

@@ -5,6 +5,7 @@
     --white: #ffffff;
     --grey: #cbcbcb;
     --green: #95e35d;
+    --red: #ef9691;
 
     --bright: #f7da7c;
 

src/views/ManageGoalView.vue

@@ -50,6 +50,7 @@ watch(
             selectedDate.value = newVal < minDate ? minDate : newVal
             goalInstance.value.due = selectedDate.value + ':00.000Z'
         }
+        console.log(selectedDate.value)
     }
 )
 
@@ -58,6 +59,14 @@ const pageTitle = computed(() => (isEdit.value ? 'Rediger sparemål' : 'Nytt spa
 const submitButton = computed(() => (isEdit.value ? 'Oppdater' : 'Opprett'))
 const completion = computed(() => (goalInstance.value.saved / goalInstance.value.target) * 100)
 
+const isInputValid = computed(() => {
+    return (
+        goalInstance.value.title !== '' &&
+        goalInstance.value.target > 0 &&
+        goalInstance.value.due !== ''
+    )
+})
+
 const submitAction = () => {
     if (
         goalInstance.value.title === '' ||
@@ -92,12 +101,9 @@ onMounted(async () => {
 })
 
 const createGoal = () => {
-    console.log('Creating goal', goalInstance.value)
-
     authInterceptor
         .post('/users/me/goals', goalInstance.value, {})
-        .then((response) => {
-            console.log(response.data)
+        .then(() => {
             return router.push({ name: 'goals' })
         })
         .catch((error) => {
@@ -106,12 +112,20 @@ const createGoal = () => {
 }
 
 const updateGoal = () => {
-    console.log('Updating goal', goalInstance.value)
-
     authInterceptor
         .put(`/users/me/goals/${goalInstance.value.id}`, goalInstance.value)
-        .then((response) => {
-            console.log(response.data)
+        .then(() => {
+            router.push({ name: 'goals' })
+        })
+        .catch((error) => {
+            console.error(error)
+        })
+}
+
+const deleteGoal = () => {
+    authInterceptor
+        .delete(`/users/me/goals/${goalInstance.value.id}`)
+        .then(() => {
             router.push({ name: 'goals' })
         })
         .catch((error) => {
@@ -173,7 +187,21 @@ const updateGoal = () => {
                 />
             </div>
 
-            <button @click="submitAction" v-text="submitButton" />
+            <div class="flex flex-row justify-between w-full">
+                <button :disabled="!isInputValid" @click="submitAction" v-text="submitButton" />
+                <button
+                    v-if="isEdit"
+                    class="ml-2 bg-button-danger"
+                    @click="deleteGoal"
+                    v-text="'Slett'"
+                />
+                <button
+                    v-else
+                    class="ml-2 bg-button-other"
+                    @click="router.push({ name: 'goals' })"
+                    v-text="'Avbryt'"
+                />
+            </div>
         </div>
     </div>
 </template>

tailwind.config.js

 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{vue,js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {
-      animation: {
-        clouds: 'clouds 20s linear infinite',
-        beach: 'beach 5s linear infinite',
-        flame: 'flame 0.3s linear infinite',
-      },
-      keyframes: {
-        clouds: {
-          '0%': { backgroundPosition: '0%' },
-          '100%': { backgroundPosition: '-100%' },
-        },
-        beach: {
-          '0%': { backgroundPosition: '0%' },
-          '100%': { backgroundPosition: '-100%' },
-        },
-        
-        flame: {
-          '0%, 100%': { transform: 'translateX(0%)' },
-          '50%': { transform: 'translateX(50%)' },
-        },
-      }
+    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+    theme: {
+        extend: {
+            animation: {
+                clouds: 'clouds 20s linear infinite',
+                beach: 'beach 5s linear infinite',
+                flame: 'flame 0.3s linear infinite'
+            },
+            keyframes: {
+                clouds: {
+                    '0%': { backgroundPosition: '0%' },
+                    '100%': { backgroundPosition: '-100%' }
+                },
+                beach: {
+                    '0%': { backgroundPosition: '0%' },
+                    '100%': { backgroundPosition: '-100%' }
+                },
+
+                flame: {
+                    '0%, 100%': { transform: 'translateX(0%)' },
+                    '50%': { transform: 'translateX(50%)' }
+                }
+            },
+            colors: {
+                'button-disabled': 'var(--grey)',
+                'button-danger': 'var(--red)',
+                'button-other': 'var(--accent1)'
+            }
+        }
     },
-  },
-  plugins: [],
+    plugins: []
 }
\ No newline at end of file