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

User feedback no items

See merge request !106

src/components/CommunityComponents/CommunityHome.vue

@@ -6,6 +6,10 @@
     <section v-else class="w-full px-5 py-4 mx-auto rounded-md">
       <CommunityHeader :admin="false" class="mb-5" />
 
+      <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">
@@ -70,6 +74,7 @@
             />
           </div>
         </div>
+      </div>
     </section>
   </div>
 </template>

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",