Merge branch 'user-feedback-no-items' into 'main'

User feedback no items

See merge request !106

src/components/CommunityComponents/CommunityHome.vue

@@ -6,69 +6,74 @@
     <section v-else class="w-full px-5 py-4 mx-auto rounded-md">
       <CommunityHeader :admin="false" class="mb-5" />
 
-      <!-- Search field -->
-      <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"
-          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-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
-          placeholder="Search"
-          v-model="search"
-          @change="searchWritten"
-        />
+      <div v-if="!items.length" class="flex place-content-center text-gray-400">
+        Ingen gjenstander å vise 🥺 👉👈
       </div>
+      <div v-else>
+        <!-- Search field -->
+        <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>
 
-      <div class="absolute inset-x-0 px-5 py-3">
-        <!-- ItemCards -->
-        <div class="flex items-center justify-center w-screen">
-          <!-- Shows items based on pagination -->
-          <div
-            class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full"
-            v-if="showItems"
-          >
-            <ItemCard
-              v-for="item in visibleItems"
-              :key="item"
-              :item="item"
-              @click="goToItemInfoPage(item.listingID)"
-            />
+          <input
+            type="text"
+            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-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
+            placeholder="Search"
+            v-model="search"
+            @change="searchWritten"
+          />
+        </div>
+
+        <div class="absolute inset-x-0 px-5 py-3">
+          <!-- ItemCards -->
+          <div class="flex items-center justify-center w-screen">
+            <!-- Shows items based on pagination -->
+            <div
+              class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full"
+              v-if="showItems"
+            >
+              <ItemCard
+                v-for="item in visibleItems"
+                :key="item"
+                :item="item"
+                @click="goToItemInfoPage(item.listingID)"
+              />
+            </div>
+
+            <!-- Shows items based on search field input -->
+            <div
+              class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full place-items-center"
+              v-if="showSearchedItems"
+            >
+              <ItemCard
+                v-for="item in searchedItems"
+                :key="item"
+                :item="item"
+                @click="goToItemInfoPage(item.listingID)"
+              />
+            </div>
           </div>
 
-          <!-- Shows items based on search field input -->
-          <div
-            class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full place-items-center"
-            v-if="showSearchedItems"
-          >
-            <ItemCard
-              v-for="item in searchedItems"
-              :key="item"
-              :item="item"
-              @click="goToItemInfoPage(item.listingID)"
+          <!-- pagination -->
+          <div class="flex justify-center" v-if="showItems">
+            <PaginationTemplate
+              v-bind:items="items"
+              v-on:page:update="updatePage"
+              v-bind:currentPage="currentPage"
+              v-bind:pageSize="pageSize"
+              class="mt-10"
             />
           </div>
         </div>
-
-        <!-- pagination -->
-        <div class="flex justify-center" v-if="showItems">
-          <PaginationTemplate
-            v-bind:items="items"
-            v-on:page:update="updatePage"
-            v-bind:currentPage="currentPage"
-            v-bind:pageSize="pageSize"
-            class="mt-10"
-          />
-        </div>
       </div>
     </section>
   </div>

src/components/CommunityComponents/CommunityList.vue

 <template>
-  <ul>
+  <p v-if="!communities.length" class="flex place-content-center text-gray-400">
+    Ingen grupper
+  </p>
+  <ul v-else>
     <li v-for="community in communities" :key="community">
       <CommunityListItem
         :community="community"

src/components/ItemComponents/NewItemForm.vue

@@ -95,7 +95,9 @@
         </ul>
       </div>
       <!-- Error message for community -->
-      <label class="text-error-medium text-sm block">{{ groupErrorMessage }}</label>
+      <label class="text-error-medium text-sm block">{{
+        groupErrorMessage
+      }}</label>
     </div>
 
     <!-- price -->

tests/unit/component-tests/community-component-tests/__snapshots__/community-list.spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CommunityList component renders correctly 1`] = `
-<ul
-  grouplist="[object Object],[object Object]"
->
+<ul>
   
+  <li>
+    <div
+      class="border-black"
+    >
+      
+      <!-- Main modal -->
+      <!--v-if-->
+      
+      <div
+        class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-2"
+      >
+        <div
+          class="h-3 w-14 flex flex-col justify-center items-center ml-2 mt-4 mb-4 mr-2"
+        >
+          <img
+            alt="Fellsekaps bilde"
+            class="rounded-md"
+            src="string"
+          />
+        </div>
+        <div
+          class="flex-1 pl-1 overflow-hidden"
+        >
+          <div
+            class="font-medium dark:text-white truncate"
+          >
+            string
+          </div>
+        </div>
+        <div
+          class="flex flex-row justify-center items-center"
+        >
+          <svg
+            aria-hidden="true"
+            class="max-h-6 max-w-6 shrink m-2"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </li>
+  <li>
+    <div
+      class="border-black"
+    >
+      
+      <!-- Main modal -->
+      <!--v-if-->
+      
+      <div
+        class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-2"
+      >
+        <div
+          class="h-3 w-14 flex flex-col justify-center items-center ml-2 mt-4 mb-4 mr-2"
+        >
+          <img
+            alt="Fellsekaps bilde"
+            class="rounded-md"
+            src="string"
+          />
+        </div>
+        <div
+          class="flex-1 pl-1 overflow-hidden"
+        >
+          <div
+            class="font-medium dark:text-white truncate"
+          >
+            string
+          </div>
+        </div>
+        <div
+          class="flex flex-row justify-center items-center"
+        >
+          <svg
+            aria-hidden="true"
+            class="max-h-6 max-w-6 shrink m-2"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </li>
   
 </ul>
 `;

tests/unit/component-tests/community-component-tests/community-list.spec.js

@@ -7,7 +7,7 @@ describe("CommunityList component", () => {
   beforeEach(() => {
     wrapper = mount(CommunityList, {
       props: {
-        groupList: [
+        communities: [
           {
             communityId: 0,
             name: "string",