From 0d15538d3db77f629886fb249a84112de15220ac Mon Sep 17 00:00:00 2001
From: Wissam <wissam_ataleh@outlook.com>
Date: Tue, 16 Mar 2021 15:04:14 +0200
Subject: [PATCH 1/7] Fix category filtering

---
 pages/apps/index.vue | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/pages/apps/index.vue b/pages/apps/index.vue
index 8fa078a..032fc15 100644
--- a/pages/apps/index.vue
+++ b/pages/apps/index.vue
@@ -26,6 +26,19 @@
         searchString: ''
       }
     },
+    created() {
+      let hash = this.$route.hash.replace('#', '')
+      let cat = this.categories.find((cat) => {
+        return cat.name == hash
+      })
+      if (cat && hash != '#all') {
+        this.active = hash
+        this.activeCatTitle = cat['title_' + this.$i18n.locale]
+      } else {
+        this.active = 'all'
+        this.activeCatTitle = this.$t('all')
+      }
+    },
     computed: {
       pageInfo() {
         return this.$store.getters.getPages.find((page) => page.page_id == 'apps')
@@ -34,7 +47,7 @@
         let list = this.$store.state.apps.list
         if (this.active != 'all') {
           let filteredList = list.filter((item) => {
-            return item.category.name == this.active
+            return item.category.name == this.activeCat
           })
           return filteredList
         } else {
@@ -43,9 +56,10 @@
       },
       popularApps() {
         let list = this.$store.state.apps.popular
-        if (this.active != 'all') {
+        let active = this.activeCat
+        if (active != 'all') {
           let filteredList = list.filter((item) => {
-            return item.category.name == this.active
+            return item.category.name == active
           })
           return filteredList
         } else {
@@ -54,9 +68,10 @@
       },
       spotlightApps() {
         let list = this.$store.state.apps.spotlight
-        if (this.active != 'all') {
+        let active = this.activeCat
+        if (active != 'all') {
           let filteredList = list.filter((item) => {
-            return item.category.name == this.active
+            return item.category.name == active
           })
           return filteredList
         } else {
@@ -75,7 +90,7 @@
           return cat.name == hash
         })
         if (cat && hash != '#all') {
-          this.active = hash
+          this.active = cat.name
           this.activeCatTitle = cat['title_' + this.$i18n.locale]
         } else {
           this.active = 'all'

From dd1eee2a26d773b9e41d82b05de7a0f1651b290a Mon Sep 17 00:00:00 2001
From: Wissam <wissam_ataleh@outlook.com>
Date: Tue, 16 Mar 2021 15:59:48 +0200
Subject: [PATCH 2/7] Hide popular and spotlight section if category not all

---
 pages/apps/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/apps/index.vue b/pages/apps/index.vue
index 032fc15..002caf6 100644
--- a/pages/apps/index.vue
+++ b/pages/apps/index.vue
@@ -6,9 +6,9 @@
       <ElementsControlInput v-model="searchString" :placeholder="$t('search') + ' ' + activeCatTitle"
         class="search-bar mb-8 lg:mb-0 rounded-full flex-grow w-full lg:w-auto" />
     </div>
-    <ListsAppSpotlight v-if="spotlightApps.length && !searchString" :title="$t('spotlightApp')"
+    <ListsAppSpotlight v-if="active == 'all'" :title="$t('spotlightApp')"
       :content="orderBy(spotlightApps, 'published_at', -1)[0]" class="mt-10" />
-    <ListsAppGrid v-if="popularApps.length && !searchString" :title="$t('popularApps')" :contentList="popularApps"
+    <ListsAppGrid v-if="active == 'all'" :title="$t('popularApps')" :contentList="popularApps"
       :count="3" class="mt-10" />
     <ListsAppAll v-if="allApps.length" :title="searchString ? $t('searchResults') + ' ' + searchString : $t('allApps')"
       :contentList="filterBy(allApps, searchString, 'name_en', 'description_en', 'name_ar', 'description_ar')"

From 226caeeb6aa91bcd0cfbda1eaab520326b7636c0 Mon Sep 17 00:00:00 2001
From: Wissam <wissam_ataleh@outlook.com>
Date: Tue, 16 Mar 2021 21:50:49 +0200
Subject: [PATCH 3/7] Add single pages for app categories

---
 lang/ar.js                    |  4 +-
 lang/en.js                    |  4 +-
 pages/apps/category/_slug.vue | 81 +++++++++++++++++++++++++++++++++++
 pages/apps/index.vue          | 80 +++++-----------------------------
 4 files changed, 97 insertions(+), 72 deletions(-)
 create mode 100644 pages/apps/category/_slug.vue

diff --git a/lang/ar.js b/lang/ar.js
index 2fc2668..ed1acf8 100644
--- a/lang/ar.js
+++ b/lang/ar.js
@@ -5,6 +5,7 @@ export default {
   popularApps: 'التطبيقات الأكثر شعبية',
   allGuides: 'جميع الأدلة الإرشادية',
   allApps: 'جميع التطبيقات',
+  apps: 'التطبيقات',
   all: 'الجميع',
   content: 'المحتوى',
   weeklyRecommendations: 'تطبيقات مقترحة أسبوعياً',
@@ -13,7 +14,8 @@ export default {
   allHelpdesks: 'جميع مكاتب المساعدة',
   helpdesk: 'مكتب المساعدة',
   noResults: 'لا توجد نتائج',
-  search: 'بحث في',
+  searchIn: 'بحث في',
+  search: 'بحث',
   searchResults: 'البحث عن:',
   stepByStep: 'خطوة بخطوة',
   submit: 'إرسال',
diff --git a/lang/en.js b/lang/en.js
index 726bf28..7574096 100644
--- a/lang/en.js
+++ b/lang/en.js
@@ -5,6 +5,7 @@ export default {
   popularApps: 'Popular Apps',
   allGuides: 'All Guides',
   allApps: 'All Apps',
+  apps: 'Apps',
   all: 'All',
   content: 'Content',
   weeklyRecommendations: 'Weekly Recommendations',
@@ -13,7 +14,8 @@ export default {
   allHelpdesks: 'All Helpdesks',
   helpdesk: 'Helpdesk',
   noResults: 'No results',
-  search: 'Search in',
+  searchIn: 'Search in',
+  search: 'Search',
   searchResults: 'Searching for:',
   stepByStep: 'Step-by-step',
   submit: 'Submit',
diff --git a/pages/apps/category/_slug.vue b/pages/apps/category/_slug.vue
new file mode 100644
index 0000000..83e40ad
--- /dev/null
+++ b/pages/apps/category/_slug.vue
@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <UIBanner :title="pageInfo['title_' + $i18n.locale]" :description="pageInfo['description_' + $i18n.locale]" />
+    <div class="container flex flex-col-reverse lg:flex-row justify-between py-6">
+      <ElementsDropdown :items="categories" :active="activeCat" @setActive="setActiveCat" class="min-w-xs" />
+      <ElementsControlInput v-model="searchString" :placeholder="$t('searchIn') + ' ' + activeCatTitle"
+        class="search-bar mb-8 lg:mb-0 rounded-full flex-grow w-full lg:w-auto" />
+    </div>
+    <ListsAppAll v-if="allApps.length" :title="searchString ? $t('searchResults') + ' ' + searchString : ''"
+      :contentList="filterBy(allApps, searchString, 'name_en', 'name_ar')" class="my-10" />
+  </div>
+</template>
+<script>
+  import Vue2Filters from 'vue2-filters';
+  export default {
+    mixins: [Vue2Filters.mixin],
+    data() {
+      return {
+        active: '',
+        activeCatTitle: '',
+        searchString: ''
+      }
+    },
+    mounted() {
+      let category = this.$route.params.slug
+      let categories = this.categories
+      try {
+        let activeCat = categories.find((cat) => {
+          return cat.name == category
+        })
+        this.active = activeCat.name
+        this.activeCatTitle = activeCat['title_' + this.$i18n.locale]
+      } catch (err) {
+        return this.$nuxt.error({
+          statusCode: 404,
+          message: '404 Page Not Found'
+        })
+      }
+    },
+    computed: {
+      pageInfo() {
+        return this.$store.getters.getPages.find((page) => page.page_id == 'apps')
+      },
+      allApps() {
+        let list = this.$store.state.apps.list
+        let filteredList = list.filter((item) => {
+          return item.category.name == this.active
+        })
+        return filteredList
+      },
+      categories() {
+        return this.$store.state.apps.categories
+      },
+      activeCat() {
+        return this.active
+      }
+    },
+    async fetch() {
+      let list = this.$store.state.apps.list
+      let categories = this.$store.state.apps.categories
+      if (list.length < 1) {
+        await this.$store.dispatch("apps/fetch")
+      }
+      if (categories.length < 1) {
+        await this.$store.dispatch('apps/fetchCategories')
+      }
+    },
+    methods: {
+      setActiveCat(value) {
+        let path
+        if (value == 'all') {
+          path = this.localePath('/apps')
+        } else {
+          path = this.localePath('/apps/category/' + value)
+        }
+        this.$router.push(path)
+      }
+    }
+  }
+
+</script>
diff --git a/pages/apps/index.vue b/pages/apps/index.vue
index 002caf6..3814c95 100644
--- a/pages/apps/index.vue
+++ b/pages/apps/index.vue
@@ -3,12 +3,12 @@
     <UIBanner :title="pageInfo['title_' + $i18n.locale]" :description="pageInfo['description_' + $i18n.locale]" />
     <div class="container flex flex-col-reverse lg:flex-row justify-between py-6">
       <ElementsDropdown :items="categories" :active="activeCat" @setActive="setActiveCat" class="min-w-xs" />
-      <ElementsControlInput v-model="searchString" :placeholder="$t('search') + ' ' + activeCatTitle"
+      <ElementsControlInput v-model="searchString" :placeholder="$t('search')"
         class="search-bar mb-8 lg:mb-0 rounded-full flex-grow w-full lg:w-auto" />
     </div>
-    <ListsAppSpotlight v-if="active == 'all'" :title="$t('spotlightApp')"
+    <ListsAppSpotlight v-if="spotlightApps.length && !searchString" :title="$t('spotlightApp')"
       :content="orderBy(spotlightApps, 'published_at', -1)[0]" class="mt-10" />
-    <ListsAppGrid v-if="active == 'all'" :title="$t('popularApps')" :contentList="popularApps"
+    <ListsAppGrid v-if="popularApps.length && !searchString" :title="$t('popularApps')" :contentList="popularApps"
       :count="3" class="mt-10" />
     <ListsAppAll v-if="allApps.length" :title="searchString ? $t('searchResults') + ' ' + searchString : $t('allApps')"
       :contentList="filterBy(allApps, searchString, 'name_en', 'description_en', 'name_ar', 'description_ar')"
@@ -26,101 +26,41 @@
         searchString: ''
       }
     },
-    created() {
-      let hash = this.$route.hash.replace('#', '')
-      let cat = this.categories.find((cat) => {
-        return cat.name == hash
-      })
-      if (cat && hash != '#all') {
-        this.active = hash
-        this.activeCatTitle = cat['title_' + this.$i18n.locale]
-      } else {
-        this.active = 'all'
-        this.activeCatTitle = this.$t('all')
-      }
-    },
     computed: {
       pageInfo() {
         return this.$store.getters.getPages.find((page) => page.page_id == 'apps')
       },
       allApps() {
-        let list = this.$store.state.apps.list
-        if (this.active != 'all') {
-          let filteredList = list.filter((item) => {
-            return item.category.name == this.activeCat
-          })
-          return filteredList
-        } else {
-          return list
-        }
+        return this.$store.state.apps.list
       },
       popularApps() {
-        let list = this.$store.state.apps.popular
-        let active = this.activeCat
-        if (active != 'all') {
-          let filteredList = list.filter((item) => {
-            return item.category.name == active
-          })
-          return filteredList
-        } else {
-          return list
-        }
+        return this.$store.state.apps.popular
       },
       spotlightApps() {
-        let list = this.$store.state.apps.spotlight
-        let active = this.activeCat
-        if (active != 'all') {
-          let filteredList = list.filter((item) => {
-            return item.category.name == active
-          })
-          return filteredList
-        } else {
-          return list
-        }
-      },
-      publishers() {
-        return this.$store.state.apps.publishers
+        return this.$store.state.apps.spotlight
       },
       categories() {
         return this.$store.state.apps.categories
       },
       activeCat() {
-        let hash = this.$route.hash.replace('#', '')
-        let cat = this.categories.find((cat) => {
-          return cat.name == hash
-        })
-        if (cat && hash != '#all') {
-          this.active = cat.name
-          this.activeCatTitle = cat['title_' + this.$i18n.locale]
-        } else {
-          this.active = 'all'
-          this.activeCatTitle = this.$t('all')
-        }
         return this.active
       }
     },
     async fetch() {
       let list = this.$store.state.apps.list
       let categories = this.$store.state.apps.categories
-      let publishers = this.$store.state.apps.publishers
       if (list.length < 1) {
         await this.$store.dispatch("apps/fetch")
       }
       if (categories.length < 1) {
         await this.$store.dispatch('apps/fetchCategories')
       }
-      if (publishers.length < 1) {
-        await this.$store.dispatch('apps/fetchPublishers')
-      }
     },
     methods: {
-      setActiveCat(value, title) {
-        this.active = value
-        this.activeCatTitle = title
-        if (value == 'all') {
-          this.$router.push('')
-        } else {
-          this.$router.push('#' + value)
+      setActiveCat(value) {
+        if (value != 'all') {
+          let path = this.localePath('/apps/category/' + value)
+          this.$router.push(path)
         }
       }
     }

From 7b55d36930c467e954fb6654d2e3f63f2cb44ddb Mon Sep 17 00:00:00 2001
From: Wissam <wissam_ataleh@outlook.com>
Date: Tue, 16 Mar 2021 21:57:30 +0200
Subject: [PATCH 4/7] Fix AppAll component title alignment

---
 components/Lists/AppAll.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Lists/AppAll.vue b/components/Lists/AppAll.vue
index 4b8ad9c..9fe610e 100644
--- a/components/Lists/AppAll.vue
+++ b/components/Lists/AppAll.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="grid-list container">
     <div class="flex flex-row flex-wrap justify-between items-center mb-8">
-      <h2 v-if="title" class="mb-4 flex-grow">{{ title }}</h2>
-      <div class="flex flex-row flex-no-wrap justify-start items-center mb-4">
+      <h2 v-if="title" class="mb-4">{{ title }}</h2>
+      <div class="flex flex-grow flex-row flex-no-wrap justify-end items-center mb-4">
         <!-- Sort -->
         <div class="inline-block relative">
           <select name="sortMembers" id="sortMembers" v-model="sortValue"

From 696ebe2e302942fbc46171162bcfbca35b969f8f Mon Sep 17 00:00:00 2001
From: Wissam <wissam_ataleh@outlook.com>
Date: Tue, 16 Mar 2021 21:57:51 +0200
Subject: [PATCH 5/7] Fix dropdown menu alignment

---
 components/Elements/Dropdown.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/Elements/Dropdown.vue b/components/Elements/Dropdown.vue
index e1885c6..ae0bded 100644
--- a/components/Elements/Dropdown.vue
+++ b/components/Elements/Dropdown.vue
@@ -66,7 +66,7 @@
   }
 
   .dropdown-link {
-    @apply w-full flex flex-row flex-no-wrap items-center justify-start;
+    @apply w-full h-full flex flex-row flex-no-wrap items-center justify-start;
   }
 
   .dropdown-link:hover>* {
@@ -84,7 +84,6 @@
   .dropdown-menu {
     @apply absolute z-10 overflow-y-auto py-4 my-4 bg-white;
     top: 100%;
-    left: 40px;
     background-clip: padding-box;
   }
 

From 6fd4e9d2cd698d65203739ae4830cdffd398575f Mon Sep 17 00:00:00 2001
From: Wissam <wissam_ataleh@outlook.com>
Date: Tue, 16 Mar 2021 21:58:30 +0200
Subject: [PATCH 6/7] Make search in the name field only

---
 pages/apps/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/apps/index.vue b/pages/apps/index.vue
index 3814c95..0271c6e 100644
--- a/pages/apps/index.vue
+++ b/pages/apps/index.vue
@@ -11,7 +11,7 @@
     <ListsAppGrid v-if="popularApps.length && !searchString" :title="$t('popularApps')" :contentList="popularApps"
       :count="3" class="mt-10" />
     <ListsAppAll v-if="allApps.length" :title="searchString ? $t('searchResults') + ' ' + searchString : $t('allApps')"
-      :contentList="filterBy(allApps, searchString, 'name_en', 'description_en', 'name_ar', 'description_ar')"
+      :contentList="filterBy(allApps, searchString, 'name_en', 'name_ar')"
       class="my-10" />
   </div>
 </template>

From 3372318d305b994b1c15035205d5f6be5c5d6351 Mon Sep 17 00:00:00 2001
From: Wissam <wissam_ataleh@outlook.com>
Date: Tue, 16 Mar 2021 21:58:49 +0200
Subject: [PATCH 7/7] Add margin to search bar

---
 pages/apps/category/_slug.vue | 2 +-
 pages/apps/index.vue          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/apps/category/_slug.vue b/pages/apps/category/_slug.vue
index 83e40ad..c2b6668 100644
--- a/pages/apps/category/_slug.vue
+++ b/pages/apps/category/_slug.vue
@@ -4,7 +4,7 @@
     <div class="container flex flex-col-reverse lg:flex-row justify-between py-6">
       <ElementsDropdown :items="categories" :active="activeCat" @setActive="setActiveCat" class="min-w-xs" />
       <ElementsControlInput v-model="searchString" :placeholder="$t('searchIn') + ' ' + activeCatTitle"
-        class="search-bar mb-8 lg:mb-0 rounded-full flex-grow w-full lg:w-auto" />
+        class="search-bar mb-8 lg:mb-0 rounded-full flex-grow w-full lg:w-auto rtl:mr-8 ltr:ml-8" />
     </div>
     <ListsAppAll v-if="allApps.length" :title="searchString ? $t('searchResults') + ' ' + searchString : ''"
       :contentList="filterBy(allApps, searchString, 'name_en', 'name_ar')" class="my-10" />
diff --git a/pages/apps/index.vue b/pages/apps/index.vue
index 0271c6e..cbe77c5 100644
--- a/pages/apps/index.vue
+++ b/pages/apps/index.vue
@@ -4,7 +4,7 @@
     <div class="container flex flex-col-reverse lg:flex-row justify-between py-6">
       <ElementsDropdown :items="categories" :active="activeCat" @setActive="setActiveCat" class="min-w-xs" />
       <ElementsControlInput v-model="searchString" :placeholder="$t('search')"
-        class="search-bar mb-8 lg:mb-0 rounded-full flex-grow w-full lg:w-auto" />
+        class="search-bar mb-8 lg:mb-0 rounded-full flex-grow w-full lg:w-auto rtl:mr-8 ltr:ml-8" />
     </div>
     <ListsAppSpotlight v-if="spotlightApps.length && !searchString" :title="$t('spotlightApp')"
       :content="orderBy(spotlightApps, 'published_at', -1)[0]" class="mt-10" />