Improve component for user profile tab and use on search page, refinement needed

webapp/components/_new/features/SearchResults/SearchResults.spec.js

@@ -55,7 +55,7 @@ describe('SearchResults', () => {
       })
 
       // Wolle beforeEach(jest.useFakeTimers)
-    
+
       describe('result contains 25 posts, 8 users and 0 hashtags', () => {
         beforeEach(async () => {
           wrapper.setData({

webapp/components/_new/features/SearchResults/SearchResults.story.js

@@ -89,7 +89,7 @@ storiesOf('SearchResults', module)
                 <tab-navigation
                   :tabs="tabOptions"
                   :activeTab="activeTab"
-                  @switchTab="tab => activeTab = tab"
+                  @switch-tab="tab => activeTab = tab"
                 />
                 <section>
                   <ul v-if="activeResources.length">
@@ -132,7 +132,7 @@ storiesOf('SearchResults', module)
                 <tab-navigation
                   :tabs="tabOptions"
                   :activeTab="activeTab"
-                  @switchTab="tab => activeTab = tab"
+                  @switch-tab="tab => activeTab = tab"
                 />
                 <section>
                   <ul v-if="activeResources.length">

webapp/components/_new/features/SearchResults/SearchResults.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="search-results" class="search-results">
-    <div>
+    <!-- Wolle <div>
       <ds-text class="total-search-results">
         {{ $t('search.for') }} "
         <strong>{{ search }}</strong>
@@ -9,9 +9,121 @@
         <strong>{{ searchCount }}</strong>
         {{ $t('search.results', {}, searchCount) }}
       </ds-text>
-    </div>
+    </div> -->
 
-    <tab-navigation :tabs="tabOptions" :activeTab="activeTab" @switchTab="switchTab" />
+    <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
+      <masonry-grid>
+        <!-- tabs -->
+        <new-tab-navigation :tabs="tabOptions" :activeTab="activeTab" @switch-tab="switchTab" />
+
+        <!-- search text and result count -->
+        <ds-grid-item class="grid-total-search-results" :row-span="1" column-span="fullWidth">
+          <ds-space margin-bottom="xxx-small" margin-top="xxx-small" centered>
+            <ds-text class="total-search-results">
+              {{ $t('search.for') }}
+              <strong>{{ '"' + search + '"' }}</strong>
+              <!-- Wolle "<strong>{{ search }}</strong>":
+              <strong>{{ searchCount }}</strong>
+              {{ $t('search.results', {}, searchCount) }} -->
+            </ds-text>
+          </ds-space>
+        </ds-grid-item>
+
+        <!-- search results -->
+
+        <template v-if="!(!activeResourceCount || searchCount === 0)">
+          <!-- pagination buttons -->
+          <ds-grid-item v-if="activeResourceCount > pageSize" :row-span="2" column-span="fullWidth">
+            <ds-space centered>
+              <pagination-buttons
+                :hasNext="hasNext"
+                :showPageCounter="true"
+                :hasPrevious="hasPrevious"
+                :activePage="activePage"
+                :activeResourceCount="activeResourceCount"
+                :key="'Top'"
+                :pageSize="pageSize"
+                @back="previousResults"
+                @next="nextResults"
+              />
+            </ds-space>
+          </ds-grid-item>
+
+          <!-- posts -->
+          <template v-if="activeTab === 'Post'">
+            <masonry-grid-item
+              v-for="post in activeResources"
+              :key="post.id"
+              :imageAspectRatio="post.image && post.image.aspectRatio"
+            >
+              <post-teaser
+                :post="post"
+                :width="{ base: '100%', md: '100%', xl: '50%' }"
+                @removePostFromList="removePostFromList"
+                @pinPost="pinPost"
+                @unpinPost="unpinPost"
+              />
+            </masonry-grid-item>
+          </template>
+          <!-- users -->
+          <template v-if="activeTab === 'User'">
+            <ds-grid-item v-for="user in activeResources" :key="user.id" :row-span="2">
+              <base-card :wideContent="true">
+                <user-teaser :user="user" />
+              </base-card>
+            </ds-grid-item>
+          </template>
+          <!-- hashtags -->
+          <template v-if="activeTab === 'Hashtag'">
+            <ds-grid-item v-for="hashtag in activeResources" :key="hashtag.id" :row-span="2">
+              <base-card :wideContent="true">
+                <hc-hashtag :id="hashtag.id" />
+              </base-card>
+            </ds-grid-item>
+          </template>
+
+          <!-- pagination buttons -->
+          <ds-grid-item v-if="activeResourceCount > pageSize" :row-span="2" column-span="fullWidth">
+            <ds-space centered>
+              <pagination-buttons
+                :hasNext="hasNext"
+                :hasPrevious="hasPrevious"
+                :activePage="activePage"
+                :showPageCounter="true"
+                :activeResourceCount="activeResourceCount"
+                :key="'Bottom'"
+                :pageSize="pageSize"
+                :srollTo="'#search-results'"
+                @back="previousResults"
+                @next="nextResults"
+              />
+            </ds-space>
+          </ds-grid-item>
+        </template>
+        <!-- Wolle <template v-else-if="$apollo.loading">
+          <ds-grid-item column-span="fullWidth">
+            <ds-space centered>
+              <ds-spinner size="base"></ds-spinner>
+            </ds-space>
+          </ds-grid-item>
+        </template> -->
+        <!-- Wolle double! -->
+        <!-- Wolle <template v-else>
+          <ds-grid-item column-span="fullWidth">
+            <hc-empty margin="xx-large" icon="file" />
+          </ds-grid-item>
+        </template> -->
+        <!-- no results -->
+        <ds-grid-item v-else :row-span="7" column-span="fullWidth">
+          <ds-space centered>
+            <hc-empty icon="tasks" :message="$t('search.no-results', { search })" />
+          </ds-space>
+        </ds-grid-item>
+      </masonry-grid>
+    </ds-flex-item>
+
+    <!-- Wolle old -->
+    <!-- <tab-navigation :tabs="tabOptions" :activeTab="activeTab" @switch-tab="switchTab" />
     <section
       :class="['results', activeTab === 'User' && '--user', !activeResourceCount > 0 && '--empty']"
     >
@@ -69,7 +181,7 @@
           @next="nextResults"
         />
       </template>
-    </section>
+    </section> -->
   </div>
 </template>
 
@@ -79,14 +191,16 @@ import HcEmpty from '~/components/Empty/Empty'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem'
 import PostTeaser from '~/components/PostTeaser/PostTeaser'
-import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
+// Wolle import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
+import NewTabNavigation from '~/components/_new/generic/TabNavigation/NewTabNavigation'
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import PaginationButtons from '~/components/_new/generic/PaginationButtons/PaginationButtons'
 import HcHashtag from '~/components/Hashtag/Hashtag'
 
 export default {
   components: {
-    TabNavigation,
+    // Wolle TabNavigation,
+    NewTabNavigation,
     HcEmpty,
     MasonryGrid,
     MasonryGridItem,
@@ -194,7 +308,9 @@ export default {
       this.hashtagPage = 0
     },
     switchTab(tab) {
-      this.activeTab = tab
+      if (this.activeTab !== tab) {
+        this.activeTab = tab
+      }
     },
     previousResults() {
       switch (this.activeTab) {
@@ -303,6 +419,7 @@ export default {
 </script>
 
 <style lang="scss">
+// Wolle check if still needed 👇🏼
 .search-results {
   > .results {
     /* display: inline-block;*/
@@ -335,4 +452,17 @@ export default {
     }
   }
 }
+
+// Wolle new
+.grid-total-search-results {
+  padding: 0;
+  margin: 0;
+  // margin-bottom: $space-x-small;
+
+  // > .base-button {
+  //   display: block;
+  //   width: 100%;
+  //   margin-bottom: $space-x-small;
+  // }
+}
 </style>

webapp/components/_new/generic/TabNavigation/NewTabNavigation.vue

@@ -12,24 +12,32 @@
       :style="tabWidth"
       role="button"
       :data-test="tab.type + '-tab'"
-      @click="$emit('switchTab', tab.type)"
+      @click="$emit('switch-tab', tab.type)"
     >
       <ds-space margin="small">
           {{ tab.count }}
       </ds-space>
     </li>
   </ul> -->
-  <ds-grid-item class="profile-top-navigation" :row-span="3" column-span="fullWidth">
+  <!-- Wolle <ds-grid-item class="profile-top-navigation" :row-span="3" column-span="fullWidth"> -->
+  <ds-grid-item class="profile-top-navigation" :row-span="tabs.length" column-span="fullWidth">
     <base-card class="ds-tab-nav">
       <ul class="Tabs">
         <li
           v-for="tab in tabs"
           :key="tab.type"
-          class="Tabs__tab pointer" :class="{ active: activeTab === tab.type }">
+          :class="[
-          <a @click="$emit('switch', tab.type)">
+            'Tabs__tab',
+            'pointer',
+            activeTab === tab.type && '--active',
+            tab.disabled && '--disabled',
+          ]"
+        >
+          <a @click="switchTab(tab)">
             <ds-space margin="small">
               <!-- Wolle translate -->
-              <client-only placeholder="Loading...">
+              <!-- <client-only placeholder="Loading..."> -->
+              <client-only :placeholder="$t('client-only.loading')">
                 <ds-number :label="tab.title">
                   <hc-count-to slot="count" :end-val="tab.count" />
                 </ds-number>
@@ -44,12 +52,12 @@
 
 <script>
 import HcCountTo from '~/components/CountTo.vue'
-import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
+// Wolle import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
 
 export default {
   components: {
     HcCountTo,
-    MasonryGridItem,
+    // Wolle MasonryGridItem,
   },
   props: {
     tabs: {
@@ -65,14 +73,13 @@ export default {
   //     return 'width: ' + String(100.0 / this.tabs.length) + '%'
   //   },
   // },
-  // Wolle
+  methods: {
-  // methods: {
+    switchTab(tab) {
-  //   tabTitle(index) {
+      if (!tab.disabled) {
-  //     console.log('activeTab: ', this.activeTab)
+        this.$emit('switch-tab', tab.type)
-  //     console.log('tabTitle: ', this.tabs[index].title)
+      }
-  //     return this.tabs[index].title
+    },
-  //   },
+  },
-  // },
 }
 </script>
 
@@ -109,7 +116,6 @@ export default {
 //   }
 // }
 
-
 .pointer {
   cursor: pointer;
 }
@@ -132,9 +138,15 @@ export default {
       border-bottom: 2px solid #c9c6ce;
     }
 
-    &.active {
+    &.--active {
       border-bottom: 2px solid #17b53f;
     }
+    &.--disabled {
+      opacity: $opacity-disabled;
+      &:hover {
+        border-bottom: none;
+      }
+    }
   }
 }
 .profile-top-navigation {

webapp/components/_new/generic/TabNavigation/TabNavigation.vue

@@ -13,13 +13,13 @@
       :style="tabWidth"
       role="button"
       :data-test="tab.type + '-tab'"
-      @click="$emit('switchTab', tab.type)"
+      @click="$emit('switch-tab', tab.type)"
     >
       <!-- Wolle <ds-space :class="lowerCase('Post-tab')" margin="small"> -->
       <ds-space margin="small">
         <!-- <ds-number :label="tab.title"> -->
-          <!-- Wolle <hc-count-to slot="count" :end-val="tab.count" /> -->
+        <!-- Wolle <hc-count-to slot="count" :end-val="tab.count" /> -->
-          {{ tab.count }}
+        {{ tab.count }}
         <!-- </ds-number> -->
         <!-- <client-only placeholder="Loading...">
           <ds-number :label="tab.title">
@@ -33,12 +33,12 @@
 </template>
 
 <script>
-import HcCountTo from '~/components/CountTo.vue'
+// Wolle import HcCountTo from '~/components/CountTo.vue'
 
 export default {
-  components: {
+  // Wolle components: {
-    HcCountTo,
+  //   HcCountTo,
-  },
+  // },
   props: {
     tabs: {
       type: Array,

webapp/locales/de.json

@@ -75,6 +75,9 @@
       }
     }
   },
+  "client-only": {
+    "loading": "Lade …"
+  },
   "code-of-conduct": {
     "consequences": {
       "description": "Wenn ein Gemeinschaftsmitglied inakzeptables Verhalten an den Tag legt, können die verantwortlichen Betreiber, Moderatoren und Administratoren des Netzwerks angemessene Maßnahmen ergreifen, u.a.:",

webapp/locales/en.json

@@ -75,6 +75,9 @@
       }
     }
   },
+  "client-only": {
+    "loading": "Loading …"
+  },
   "code-of-conduct": {
     "consequences": {
       "description": "If a community member exhibits unacceptable behaviour, the responsible operators, moderators and administrators of the network may take appropriate measures, including but not limited to:",

webapp/pages/profile/_id/_slug.vue

@@ -124,7 +124,7 @@
       <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
         <masonry-grid>
           <!-- TapNavigation -->
-          <new-tab-navigation :tabs="tabOptions" :activeTab="tabActive" @switch="handleTab" />
+          <new-tab-navigation :tabs="tabOptions" :activeTab="tabActive" @switch-tab="handleTab" />
           <!-- Wolle <ds-grid-item class="profile-top-navigation" :row-span="3" column-span="fullWidth">
             <base-card class="ds-tab-nav">
               <ul class="Tabs">
@@ -345,9 +345,11 @@ export default {
       })
     },
     handleTab(tab) {
-      this.tabActive = tab
+      if (this.tabActive !== tab) {
-      this.filter = tabToFilterMapping({ tab, id: this.$route.params.id })
+        this.tabActive = tab
-      this.resetPostList()
+        this.filter = tabToFilterMapping({ tab, id: this.$route.params.id })
+        this.resetPostList()
+      }
     },
     uniq(items, field = 'id') {
       return uniqBy(items, field)