Add filter school tooltip

frontend/components/FindAppropriateSchool.vue

@@ -123,10 +123,13 @@ export default {
   methods: {
     ...mapMutations({
       mapSetAge: 'map/setAge',
+      mapSetAppropriateSchool: 'map/setAppropriateSchool',
+      mapSetActiveTab: 'map/setActiveTab',
     }),
     showSchool() {
       this.mapSetAge(this.studentAge);
-      this.$store.dispatch('map/show');
+      this.mapSetAppropriateSchool(this.appropriateSchool);
+      this.mapSetActiveTab(1);
     },
   },
 };

frontend/components/Map.vue

@@ -7,18 +7,143 @@
       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>
+        <div class="flex flex-row text-body-bold leading-body-bold font-body-bold font-body-bold">
+          {{ appropriateSchool }}
+          <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>
+      <button class="close" @click="setFilterTooltipVisible(false)" />
+    </div>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapMutations } 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: {
+    ...mapMutations({
+      mapActiveTab: 'map/setActiveTab',
+    }),
+    setFilterTooltipVisible(visible) {
+      this.filterTooltipVisible = visible;
+    },
+    changeFilter() {
+      this.mapActiveTab(0);
+    },
+  },
 };
 </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: 90px;
+    right: 75px;
+  }
+  /*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);
+}
+
+.change {
+  color: #0d99ff;
+}
+
+.change-animation {
+  animation: fadeInOut 5s;
+  opacity: 0;
+}
+
+@keyframes fadeInOut {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+</style>

frontend/locales/cz.json

@@ -55,6 +55,10 @@
       "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",
+      "filter_change" : "Změnit"
     }
   },
   "pages": {

frontend/locales/ua.json

@@ -55,6 +55,10 @@
       "how_the_Czech_education_system_works": "Як працює чеська система освіти",
       "how_to_enroll_a_child_in_school": "Як записати дитину до школи",
       "more_information": "Більше інформації"
+    },
+    "Map": {
+      "filter_tooltip": "Ми відфільтрували школи, які приймають",
+      "filter_change": "Змінити"
     }
   },
   "pages": {

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);
     },
   },
 };

frontend/store/map.js

@@ -41,8 +41,10 @@ export const state = () => ({
   defaultSearchParams: [],
   fullTextSearch: null,
   age: null,
+  appropriateSchool: null,
   locale: 'uk',
   show: false,
+  activeTab: 0,
 });
 
 export const mutations = {
@@ -58,12 +60,15 @@ 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;
+
+  setActiveTab(state, activeTab) {
+    state.activeTab = activeTab;
   },
 };
 
@@ -72,6 +77,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);
@@ -100,8 +109,8 @@ export const getters = {
     return url;
   },
 
-  show(state) {
-    return state.show;
+  activeTab(state) {
+    return state.activeTab;
   },
 };
 
@@ -111,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));
-  },
 };