Add Change button to filter tooltip

cesko-digital · Aug 4, 2022 · 2708217 · 2708217
1 parent 3319a84
commit 2708217
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 26 deletions.
diff --git a/frontend/components/FindAppropriateSchool.vue b/frontend/components/FindAppropriateSchool.vue
@@ -124,11 +124,12 @@ export default {
     ...mapMutations({
       mapSetAge: 'map/setAge',
       mapSetAppropriateSchool: 'map/setAppropriateSchool',
+      mapSetActiveTab: 'map/setActiveTab',
     }),
     showSchool() {
       this.mapSetAge(this.studentAge);
       this.mapSetAppropriateSchool(this.appropriateSchool);
-      this.$store.dispatch('map/show');
+      this.mapSetActiveTab(1);
     },
   },
 };

diff --git a/frontend/components/Map.vue b/frontend/components/Map.vue
@@ -12,17 +12,23 @@
         <span>
           {{ $t('components.Map.filter_tooltip') }}
         </span>
-        <span class="font-body-bold">
+        <div class="flex flex-row text-body-bold leading-body-bold font-body-bold font-body-bold">
           {{ appropriateSchool }}
-        </span>
+          <button class="ml-s change lg:hidden" @click="changeFilter()">
+            {{ $t('components.Map.filter_change') }}
+          </button>
+          <span class="ml-s change change-animation hidden lg:block">
+            {{ $t('components.Map.filter_change') }}
+          </span>
+        </div>
       </div>
-      <span class="close" @click="setFilterTooltipVisible(false)" />
+      <button class="close" @click="setFilterTooltipVisible(false)" />
     </div>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapMutations } from 'vuex';
 
 export default {
   data() {
@@ -43,9 +49,15 @@ export default {
     },
   },
   methods: {
+    ...mapMutations({
+      mapActiveTab: 'map/setActiveTab',
+    }),
     setFilterTooltipVisible(visible) {
       this.filterTooltipVisible = visible;
     },
+    changeFilter() {
+      this.mapActiveTab(0);
+    },
   },
 };
 </script>
@@ -76,8 +88,8 @@ export default {
 /* At width 1380px umapa changes position of filters */
 @media(max-width: 1380px) {
   .filter-popover {
-    bottom: 120px;
-    right: 65px;
+    bottom: 90px;
+    right: 75px;
   }
   /*right arrow*/
   .filter-popover::after {
@@ -113,4 +125,25 @@ export default {
 .close:after {
   transform: rotate(-45deg);
 }
+
+.change {
+  color: #0d99ff;
+}
+
+.change-animation {
+  animation: fadeInOut 5s;
+  opacity: 0;
+}
+
+@keyframes fadeInOut {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
 </style>
diff --git a/frontend/locales/cz.json b/frontend/locales/cz.json
@@ -57,7 +57,8 @@
       "more_information": "Další informace"
     },
     "Map": {
-      "filter_tooltip" : "Zafiltrovali jsme školy, které přijímají do"
+      "filter_tooltip" : "Zafiltrovali jsme školy, které přijímají do",
+      "filter_change" : "Změnit"
     }
   },
   "pages": {

diff --git a/frontend/locales/ua.json b/frontend/locales/ua.json
@@ -57,7 +57,8 @@
       "more_information": "Більше інформації"
     },
     "Map": {
-      "filter_tooltip" : "Ми відфільтрували школи, які приймають"
+      "filter_tooltip": "Ми відфільтрували школи, які приймають",
+      "filter_change": "Змінити"
     }
   },
   "pages": {

diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
@@ -74,7 +74,7 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapMutations } from 'vuex';
 import { MatchMedia } from 'vue-component-media-queries';
 
 import HomeIcon from '~/assets/images/icons/home.svg?inline';
@@ -93,22 +93,25 @@ export default {
     };
   },
   computed: {
-    ...mapGetters({ mapShow: 'map/show' }),
+    ...mapGetters({
+      getActiveTab: 'map/activeTab',
+    }),
   },
   watch: {
-    mapShow(show, _) {
-      console.log('mapShow index', show);
-      if (show) {
-        this.selectTab(1);
-      }
+    getActiveTab(activeTab, _) {
+      console.log('activeTab index', activeTab);
+      this.activeTabIndex = activeTab;
     },
   },
   mounted() {
     this.isMounted = true;
   },
   methods: {
+    ...mapMutations({
+      setActiveTab: 'map/setActiveTab',
+    }),
     selectTab(i) {
-      this.activeTabIndex = i;
+      this.setActiveTab(i);
     },
   },
 };

diff --git a/frontend/store/map.js b/frontend/store/map.js
@@ -44,6 +44,7 @@ export const state = () => ({
   appropriateSchool: null,
   locale: 'uk',
   show: false,
+  activeTab: 0,
 });
 
 export const mutations = {
@@ -65,8 +66,9 @@ export const mutations = {
   setLocale(state, newLocale) {
     state.locale = newLocale;
   },
-  setShow(state, show) {
-    state.show = show;
+
+  setActiveTab(state, activeTab) {
+    state.activeTab = activeTab;
   },
 };
 
@@ -107,8 +109,8 @@ export const getters = {
     return url;
   },
 
-  show(state) {
-    return state.show;
+  activeTab(state) {
+    return state.activeTab;
   },
 };
 
@@ -118,9 +120,4 @@ export const actions = {
     context.commit('setDefaultSearchParams', [...(new URLSearchParams($config.umapaDefaultSearchParams).entries())]);
     context.commit('setLocale', i18n.locale);
   },
-
-  show(context) {
-    context.commit('setShow', true);
-    setTimeout(() => context.commit('setShow', false));
-  },
 };