From 3319a84f315f442b4e841cbc2c536bcb0cfaaa59 Mon Sep 17 00:00:00 2001
From: mvdegtyar <mv_degtyar@yahoo.com>
Date: Mon, 1 Aug 2022 21:01:50 +0300
Subject: [PATCH 1/2] Add filter school tooltip

---
 frontend/components/FindAppropriateSchool.vue |  2 +
 frontend/components/Map.vue                   | 92 +++++++++++++++++++
 frontend/locales/cz.json                      |  3 +
 frontend/locales/ua.json                      |  3 +
 frontend/store/map.js                         |  9 +-
 5 files changed, 108 insertions(+), 1 deletion(-)

diff --git a/frontend/components/FindAppropriateSchool.vue b/frontend/components/FindAppropriateSchool.vue
index 5a993a1..526ad7a 100644
--- a/frontend/components/FindAppropriateSchool.vue
+++ b/frontend/components/FindAppropriateSchool.vue
@@ -123,9 +123,11 @@ export default {
   methods: {
     ...mapMutations({
       mapSetAge: 'map/setAge',
+      mapSetAppropriateSchool: 'map/setAppropriateSchool',
     }),
     showSchool() {
       this.mapSetAge(this.studentAge);
+      this.mapSetAppropriateSchool(this.appropriateSchool);
       this.$store.dispatch('map/show');
     },
   },
diff --git a/frontend/components/Map.vue b/frontend/components/Map.vue
index 08a627c..88ed909 100644
--- a/frontend/components/Map.vue
+++ b/frontend/components/Map.vue
@@ -7,6 +7,17 @@
       frameborder="0"
       :src="mapUrl.toString()"
     />
+    <div v-if="filterTooltipVisible && appropriateSchool != null" class="filter-popover">
+      <div class="flex flex-col">
+        <span>
+          {{ $t('components.Map.filter_tooltip') }}
+        </span>
+        <span class="font-body-bold">
+          {{ appropriateSchool }}
+        </span>
+      </div>
+      <span class="close" @click="setFilterTooltipVisible(false)" />
+    </div>
   </div>
 </template>
 
@@ -14,11 +25,92 @@
 import { mapGetters } from 'vuex';
 
 export default {
+  data() {
+    return {
+      filterTooltipVisible: true,
+    };
+  },
   computed: {
     // mix the getters into computed with object spread operator
     ...mapGetters({
       mapUrl: 'map/url',
+      appropriateSchool: 'map/appropriateSchool',
     }),
   },
+  watch: {
+    appropriateSchool() {
+      this.filterTooltipVisible = true;
+    },
+  },
+  methods: {
+    setFilterTooltipVisible(visible) {
+      this.filterTooltipVisible = visible;
+    },
+  },
 };
 </script>
+<style scoped>
+.filter-popover {
+  position: absolute;
+  bottom: 85px;
+  right: 60px;
+  z-index: 100;
+  background-color: white;
+  @apply p-s rounded-outer font-body-small text-body-small flex flex-row items-start;
+}
+
+/*down arrow*/
+.filter-popover::after {
+  content: '';
+  position: absolute;
+  right: 5%;
+  top: 100%;
+  width: 0;
+  height: 0;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-top: 10px solid white;
+  clear: both;
+}
+
+/* At width 1380px umapa changes position of filters */
+@media(max-width: 1380px) {
+  .filter-popover {
+    bottom: 120px;
+    right: 65px;
+  }
+  /*right arrow*/
+  .filter-popover::after {
+    right: -20px;
+    top: 40%;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-left: 10px solid white;
+  }
+}
+
+.close {
+  position: relative;
+  width: 12px;
+  height: 12px;
+  margin-left: 12px;
+  opacity: 0.5;
+}
+.close:hover {
+  opacity: 1;
+}
+.close:before, .close:after {
+  position: absolute;
+  left: 6px;
+  content: ' ';
+  height: 12px;
+  width: 2px;
+  background-color: #333;
+}
+.close:before {
+  transform: rotate(45deg);
+}
+.close:after {
+  transform: rotate(-45deg);
+}
+</style>
diff --git a/frontend/locales/cz.json b/frontend/locales/cz.json
index 3a04320..e69f726 100644
--- a/frontend/locales/cz.json
+++ b/frontend/locales/cz.json
@@ -55,6 +55,9 @@
       "how_the_Czech_education_system_works": "Jak funguje český vzdělávací systém",
       "how_to_enroll_a_child_in_school": "Jak přihlásit dítě do školy",
       "more_information": "Další informace"
+    },
+    "Map": {
+      "filter_tooltip" : "Zafiltrovali jsme školy, které přijímají do"
     }
   },
   "pages": {
diff --git a/frontend/locales/ua.json b/frontend/locales/ua.json
index f551e7c..a7a13de 100644
--- a/frontend/locales/ua.json
+++ b/frontend/locales/ua.json
@@ -55,6 +55,9 @@
       "how_the_Czech_education_system_works": "Як працює чеська система освіти",
       "how_to_enroll_a_child_in_school": "Як записати дитину до школи",
       "more_information": "Більше інформації"
+    },
+    "Map": {
+      "filter_tooltip" : "Ми відфільтрували школи, які приймають"
     }
   },
   "pages": {
diff --git a/frontend/store/map.js b/frontend/store/map.js
index bbd0b78..9ee265a 100644
--- a/frontend/store/map.js
+++ b/frontend/store/map.js
@@ -41,6 +41,7 @@ export const state = () => ({
   defaultSearchParams: [],
   fullTextSearch: null,
   age: null,
+  appropriateSchool: null,
   locale: 'uk',
   show: false,
 });
@@ -58,11 +59,13 @@ export const mutations = {
   setAge(state, newAge) {
     state.age = newAge;
   },
+  setAppropriateSchool(state, newAppropriateSchool) {
+    state.appropriateSchool = newAppropriateSchool;
+  },
   setLocale(state, newLocale) {
     state.locale = newLocale;
   },
   setShow(state, show) {
-    console.log('setShow', show);
     state.show = show;
   },
 };
@@ -72,6 +75,10 @@ export const getters = {
     return state.age;
   },
 
+  appropriateSchool(state) {
+    return state.appropriateSchool;
+  },
+
   // convert current state to URL
   url(state) {
     const url = new URL(state.baseUrl);

From 2708217233ba94de5ba38910fbbbf1c0d68c541e Mon Sep 17 00:00:00 2001
From: mvdegtyar <mv_degtyar@yahoo.com>
Date: Thu, 4 Aug 2022 12:39:10 +0300
Subject: [PATCH 2/2] Add Change button to filter tooltip

---
 frontend/components/FindAppropriateSchool.vue |  3 +-
 frontend/components/Map.vue                   | 45 ++++++++++++++++---
 frontend/locales/cz.json                      |  3 +-
 frontend/locales/ua.json                      |  3 +-
 frontend/pages/index.vue                      | 19 ++++----
 frontend/store/map.js                         | 15 +++----
 6 files changed, 62 insertions(+), 26 deletions(-)

diff --git a/frontend/components/FindAppropriateSchool.vue b/frontend/components/FindAppropriateSchool.vue
index 526ad7a..bb1744f 100644
--- 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
index 88ed909..ce0ce86 100644
--- 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
index e69f726..d94cd27 100644
--- 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
index a7a13de..7e3b868 100644
--- 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
index 8e2100e..2037916 100644
--- 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
index 9ee265a..cb14e11 100644
--- 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));
-  },
 };