Merge branch 'search-item-list' into 'main'

Search item list

See merge request !15

src/components/ItemCard.vue

+<template>
+  <div class="mt-5">
+    <div class="w-4/5 rounded bg-gray-200">
+      <img
+        class="w-full"
+        :src="item.img || require('../assets/default-product.png')"
+        alt="Item image"
+      />
+      <div class="p-1 m-1">
+        <p class="text-gray-700 text-xs font-bold" id="adress">
+          {{ item.adresse }}
+        </p>
+        <p class="font-bold text-sm" id="title">{{ item.title }}</p>
+        <p class="text-gray-700 text-xs" id="price">{{ item.price }} kr</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    item: {
+      img: String,
+      adresse: String,
+      title: String,
+      price: Number,
+    },
+  },
+};
+</script>

src/components/SearchItemListComponent.vue

+<template>
+  <section class="relative w-full max-w-md px-5 py-4 mx-auto rounded-md">
+    <div class="relative" id="searchComponent">
+      <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+        <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+          <path
+            d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          ></path>
+        </svg>
+      </span>
+
+      <input
+        type="text"
+        id="searchInput"
+        class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
+        placeholder="Search"
+        v-model="search"
+      />
+    </div>
+
+    <div class="absolute inset-x-0 px-6 py-3 mt-4 border-2 border-slate-500">
+      <div class="grid grid-cols-2">
+        <ItemCard v-for="item in searchedItems" :key="item" :item="item" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import ItemCard from "@/components/ItemCard";
+export default {
+  name: "SearchItemListComponent",
+
+  components: {
+    ItemCard,
+  },
+
+  computed: {
+    searchedItems() {
+      let filteredItems = [];
+
+      filteredItems = this.items.filter(
+        (p) =>
+          p.title.toLowerCase().includes(this.search.toLowerCase()) ||
+          p.adresse.toLowerCase().includes(this.search.toLowerCase()) ||
+          p.price === Number(this.search)
+      );
+
+      return filteredItems;
+    },
+  },
+
+  /**
+   * Her må det lages en metode som henter alle items (i en gruppe) fra databasen.
+   * De kan deretter bli pusha inn i items array, og da burde de bli displayet i lista.
+   * Når denne metoden er på plass kan items[] i data tømmes. Da vil alt dataen komme fra db.
+   */
+
+  data() {
+    return {
+      items: [
+        { img: "", adresse: "Oslo", title: "Dyson", price: 1000 },
+
+        { img: "", adresse: "Trondheim", title: "Gressklipper", price: 500 },
+
+        { img: "", adresse: "Bergen", title: "Bil", price: 500 },
+      ],
+      item: {
+        img: "",
+        adresse: "",
+        title: "",
+        price: 0,
+      },
+      search: "",
+    };
+  },
+};
+</script>

src/router/index.js

@@ -42,10 +42,17 @@ const routes = [
     name: "newPassword",
     component: NewPasswordView,
   },
+  {
+
+    path: "/searchItemList",
+    name: "searchItemList",
+    component: () => import("../views/SearchItemListView.vue"),
+  },
   {
     path: "/createNewGroup",
     name: "createNewGroup",
     component: () => import("../views/CreateNewGroupView.vue"),
+
   },
 ];
 

src/views/SearchItemListView.vue

+<template>
+  <SearchItemListComponent></SearchItemListComponent>
+</template>
+
+<script>
+import SearchItemListComponent from "@/components/SearchItemListComponent";
+export default {
+  name: "SearchItemListView",
+  components: {
+    SearchItemListComponent,
+  },
+};
+</script>
+
+<style scoped></style>

tests/unit/search-item-list.spec.js

+import { shallowMount } from "@vue/test-utils";
+import SearchItemListComponent from "@/components/SearchItemListComponent.vue";
+
+describe("CreateNewGroup elements rendering", () => {
+
+    it("Tests setting values of input field", async() => {
+
+        const wrapper = shallowMount(SearchItemListComponent);
+
+        const searchInput = wrapper.find('#searchInput');
+        await searchInput.setValue("Dyson");
+        expect(searchInput.element.value).toBe("Dyson");
+
+    });
+});