Merge branch 'main' of https://github.com/miles-no/hau-handlenett

miles-no · Nov 6, 2024 · a37c155 · a37c155
2 parents 99546e1 + d994911
commit a37c155
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 11 deletions.
diff --git a/handlenett-frontend/components/Item.vue b/handlenett-frontend/components/Item.vue
@@ -1,8 +1,12 @@
 <template>
     <div class="groceryitem">
-        <label :class="{ 'complete': status }">
-            <input type="checkbox" :checked="status" @change="update"> {{ props.element?.name }}
-        </label>
+        <div>
+            <label :class="{ 'complete': status }">
+                <input type="checkbox" :checked="status" @change="update"> {{ props.element?.name }}
+            </label>
+            <span @click="lmfgi">❔</span>
+            <div class="gi-creator">📝{{ createdBy }}</div>
+        </div>
         <div class="button-group">
             <button v-if="false" class="btn primary" @click="editeleement">✏️
             </button>
@@ -27,6 +31,10 @@ onMounted(() => {
     status.value = props.element.isCompleted
 })
 
+const lmfgi = () => {
+    window.open(`https://www.google.com/search?q=bunnpris ${props.element.name}&udm=2`, '_blank')
+}
+
 const update = () => {
     status.value = !status.value;
     emit('changed', { id: props.element.id, name: props.element.name, isCompleted: status.value })
@@ -35,6 +43,14 @@ const deleteeleement = () => {
     emit('delete', { id: props.element.id })
 }
 
+const createdBy = computed(() => {
+
+    const fullEmail = props.element.createdBy;
+    const dottedName = fullEmail.split('@')[0];
+    const firstName = dottedName.split('.')[0];
+    return firstName.charAt(0).toUpperCase() + firstName.slice(1);
+});
+
 </script>
 <style scoped>
 .groceryitem {
@@ -46,6 +62,12 @@ const deleteeleement = () => {
     font-weight: bold;
 }
 
+.gi-creator {
+    font-size: 0.8rem;
+    font-weight: 100;
+    padding-left: 1rem;
+}
+
 .button-group {
     display: flex;
     gap: 1rem;

diff --git a/handlenett-frontend/components/NewItem.vue b/handlenett-frontend/components/NewItem.vue
@@ -1,18 +1,24 @@
 <template>
     <form @submit.prevent="update">
-        <input type="text" placeholder="Trenger vi noe mer?" v-model="item">
+        <input type="text" placeholder="Trenger vi noe mer?" @keyup="typing" v-model="item">
         <button class="btn" @click="update">🛒</button>
     </form>
 </template>
 <script setup>
-import { ref, defineEmits } from 'vue'
+import { ref } from 'vue'
 const item = ref('')
-const emit = defineEmits(['changed'])
+const emit = defineEmits(['changed', 'typing'])
 
 const update = () => {
     emit('changed', { name: item.value, isComplete: false })
     item.value = ''
 }
+
+const typing = () => {
+    if (item.value.length !== 1) {
+        emit('typing', item.value)
+    }
+}   
 </script>
 <style scoped>
 form {

diff --git a/handlenett-frontend/composables/useHttp.ts b/handlenett-frontend/composables/useHttp.ts
@@ -14,9 +14,18 @@ export default async function (url: string, method: string, data = {}) {
       mode: "cors",
       body: !!data && method != "GET" ? JSON.stringify(data) : null,
     });
-    return response.json();
+
+    const responseText = await response.text();
+    try {
+      const responseJson = JSON.parse(responseText);
+      return responseJson;
+    } catch (e) {
+      // return without parsing.
+      // might be empty
+      return responseText;
+    }
   } catch (error) {
-    console.info(error);
+    console.error("useHttp catch error", error);
     return Promise.reject(error);
   }
 }
diff --git a/handlenett-frontend/pages/index.vue b/handlenett-frontend/pages/index.vue
@@ -4,12 +4,16 @@
         <div class="loader"></div>
     </div>
     <div v-else>
+        <NewItem @changed="newItem" @typing="typing"></NewItem>
+        <div v-if="itemsContainingSequence.length > 0">
+            Vi har allerede disse tilgjengelig for valg: {{ itemsContainingSequence }}
+        </div>
+
         <div style="margin-bottom: 2rem;">
             <Item v-for="i in items" :key="i.id" @changed="updatedItem" @delete="deleteItem"
                 :isElementDeletable="currentUser === i.createdBy" :isElementEditable="currentUser === i.createdBy"
                 :element="i" />
         </div>
-        <NewItem @changed="newItem"></NewItem>
     </div>
     <!-- <pre>
         {{ items }}
@@ -22,6 +26,7 @@ const { $getAccounts } = useNuxtApp();
 const items = ref([])
 const loading = ref(true)
 const currentUser = ref("")
+const itemsContainingSequence = ref([])
 
 onMounted(async () => {
 
@@ -53,7 +58,13 @@ const updatedItem = (updatedItem) => {
         items.value[idx] = data;
     });
 }
-
+const typing = (item) => {
+    if (item === '') {
+        itemsContainingSequence.value = []
+        return
+    }
+    itemsContainingSequence.value = items.value.filter(i => i.name.toLowerCase().includes(item.toLowerCase())).map(i => i.name)
+}
 const newItem = (newItem) => {
     if (newItem.name === '') return
 
@@ -64,7 +75,7 @@ const newItem = (newItem) => {
 }
 
 const deleteItem = (deleteItem) => {
-    useHttp(`Item/${deleteItem.id}`, 'DELETE').then(data => {
+    useHttp(`Item/${deleteItem.id}`, 'DELETE').then(() => {
         let i = items.value.find(i => i.id === deleteItem.id)
         const idx = items.value.indexOf(i)
         items.value.splice(idx, 1)