From 748cdbf4880d830fd794e92856e8c35a46e4f884 Mon Sep 17 00:00:00 2001
From: vnugent <public@vaughnnugent.com>
Date: Mon, 11 Mar 2024 21:21:18 -0400
Subject: feat(app): #1 update libs & add curl support

---
 .../src/components/Boomarks/AddOrUpdateForm.vue    | 109 +++++++++++++++------
 1 file changed, 81 insertions(+), 28 deletions(-)

(limited to 'front-end/src/components/Boomarks')

diff --git a/front-end/src/components/Boomarks/AddOrUpdateForm.vue b/front-end/src/components/Boomarks/AddOrUpdateForm.vue
index a4a3f1d..59af737 100644
--- a/front-end/src/components/Boomarks/AddOrUpdateForm.vue
+++ b/front-end/src/components/Boomarks/AddOrUpdateForm.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, toRefs } from 'vue';
-import { join, split } from 'lodash-es';
+import { isEmpty, join, split } from 'lodash-es';
+import { useStore } from '../../store';
+import { useWait } from '@vnuge/vnlib.browser';
 
 const emit = defineEmits(['submit'])
 const props = defineProps<{
@@ -15,40 +17,86 @@ const tags = computed({
     set: (value:string) => v$.value.Tags.$model = split(value, ',')
 })
 
+const { websiteLookup:lookup } = useStore()
+const { setWaiting, waiting } = useWait()
+
+const execLookup = async () => {
+    //url must be valid before searching
+    if(v$.value.Url.$invalid) return
+
+    setWaiting(true)
+
+    try{
+        const { title, description, keywords } = await lookup.execLookup(v$.value.Url.$model);
+
+        //Set the title and description
+        if(title){
+            v$.value.Name.$model = title;
+            v$.value.Name.$dirty = true;
+        }
+
+        if(description){
+            v$.value.Description.$model = description;
+            v$.value.Description.$dirty = true;
+        }
+
+        if(keywords){
+            v$.value.Tags.$model = keywords;
+            v$.value.Tags.$dirty = true;
+        }
+    }
+    catch(e){
+        //Mostly ignore errors
+        console.error(e)
+    }
+    finally{
+        setWaiting(false)
+    }
+}
+
+const showSearchButton = computed(() => lookup.isSupported && !isEmpty(v$.value.Url.$model))
+
 </script>
 <template>
-    <form class="grid grid-cols-1 gap-4 p-4" @submit.prevent="emit('submit')">
+    <form id="bm-add-or-update-form" class="grid grid-cols-1 gap-4 p-4" @submit.prevent="emit('submit')">
         <fieldset>
-            <label for="url" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">URL</label>
-            <input type="text" id="url" class="input" placeholder="https://www.example.com"
-                v-model="v$.Url.$model"
-                :class="{'dirty': v$.Url.$dirty, 'error': v$.Url.$invalid}"
-                required
-            >
+            <label for="url" class="flex justify-between mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                URL
+            </label>
+            <div class="flex gap-2">
+                <input type="text" id="url" class="input" placeholder="https://www.example.com" v-model="v$.Url.$model"
+                    :class="{'dirty': v$.Url.$dirty, 'error': v$.Url.$invalid}" required>
+
+                <div class="">
+                    <button :disabled="!showSearchButton || waiting" @click.prevent="execLookup"
+                        class="btn blue search-btn">
+                        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            viewBox="0 0 20 20">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
+                        </svg>
+                    </button>
+                </div>
+            </div>
         </fieldset>
         <fieldset>
             <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Title</label>
-            <input type="text" id="Name" class="input" placeholder="Hello World"
-                v-model="v$.Name.$model"
-                :class="{'dirty': v$.Name.$dirty, 'error': v$.Name.$invalid}"
-                required
-            >
+            <input type="text" id="Name" class="input" placeholder="Hello World" v-model="v$.Name.$model"
+                :class="{'dirty': v$.Name.$dirty, 'error': v$.Name.$invalid}" required>
         </fieldset>
-         <fieldset>
+        <fieldset>
             <label for="tags" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Tags</label>
-            <input type="text" id="tags" class="input" placeholder="tag1,tag2,tag3"
-                v-model="tags"
-                :class="{'dirty': v$.Tags.$dirty, 'error': v$.Tags.$invalid}"
-            >
+            <input type="text" id="tags" class="input" placeholder="tag1,tag2,tag3" v-model="tags"
+                :class="{'dirty': v$.Tags.$dirty, 'error': v$.Tags.$invalid}">
         </fieldset>
         <fieldset>
-            <label for="description" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Description</label>
+            <label for="description"
+                class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Description</label>
             <textarea type="text" id="description" rows="5" class="input" placeholder="This is a bookmark"
                 v-model="v$.Description.$model"
-                :class="{'dirty': v$.Description.$dirty, 'error': v$.Description.$invalid}"
-            />
+                :class="{'dirty': v$.Description.$dirty, 'error': v$.Description.$invalid}" />
         </fieldset>
-       
+
         <div class="flex justify-end">
             <button type="submit" class="btn blue">
                 Submit
@@ -57,12 +105,17 @@ const tags = computed({
     </form>
 </template>
 
-<style scoped lang="scss">input.search {
-    @apply ps-10 p-2.5 border block w-full text-sm rounded;
-    @apply bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500;
-}
+<style scoped lang="scss">
+
+#bm-add-or-update-form {
+    .search-btn{
 
-button.search {
-    @apply p-2.5 ms-2 text-sm font-medium text-white bg-blue-700 rounded border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
+        @apply my-auto px-3 py-2.5;
+
+        &:disabled{
+            @apply bg-gray-600;
+        }
+    }
 }
+
 </style>
\ No newline at end of file
-- 
cgit