Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

upgrading the searchbar to select country through a world-map #760

Merged
merged 3 commits into from
Mar 7, 2024

Conversation

Animesh239
Copy link
Contributor

Description

  • Added a world map component to allow users to select county from either manually entering the country name or selecting a country from the map
  • The map is generated through the reactive chart component
  • On clicking the locator icon, a dialog will open to choose a country from the world map.
Recording.2024-03-02.103915.mp4

@dpgiakatos dpgiakatos linked an issue Mar 5, 2024 that may be closed by this pull request
Copy link
Member

@dpgiakatos dpgiakatos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please address the following changes and ensure adherence to the project's code style guidelines.

@@ -368,11 +379,19 @@ const placeholder = computed(() => {
hide-selected
>
<template v-slot:append>
<div v-if="!loading">
<QIcon :color="label" name="fas fa-search q-mb-xs" width="0.82em" />
<div v-if="props.noAS" @click="showMap">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change props.noAS to !props.noCountry

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added :noCountry="true" in Searchbar of Header Component and changed props.noAS to !props.noAS

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please revert your changes in the Header Component. The user must be able to search for a country. Keep your changes limited to the issues mentioned in the review. Thank you.

src/components/search/SearchBar.vue Outdated Show resolved Hide resolved
@@ -0,0 +1,91 @@

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove space

import { ref, onMounted, inject, getCurrentInstance } from 'vue'
import ReactiveChart from '@/components/charts/ReactiveChart.vue'
import { CountryQuery } from '@/plugins/IhrApi'
const {emit} = getCurrentInstance()
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We do not define emits in that manner. Please adhere to the project's code style guidelines.

}
}

onMounted(fetchData)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We do not use mounted function in that manner. Please adhere to the project's code style guidelines.

@dpgiakatos dpgiakatos added the enhancement New feature or request label Mar 6, 2024
@dpgiakatos dpgiakatos self-requested a review March 7, 2024 00:01
Copy link
Member

@dpgiakatos dpgiakatos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks

@dpgiakatos dpgiakatos merged commit e1e2540 into InternetHealthReport:dev Mar 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add World Map for Country Selection in Country Report
2 participants