Skip to content

Commit

Permalink
Fix default value behaviour
Browse files Browse the repository at this point in the history
  • Loading branch information
@ukutaht
ukutaht committed Jun 29, 2021
1 parent d92ac26 commit cf66581
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 28 deletions.
2 changes: 1 addition & 1 deletion assets/js/dashboard/components/search-select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 10,7 @@ function selectInputText(e) {
function ChevronDown() {
return (
<svg className="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path stroke="#6B7280" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/>
<path stroke="#6B7280" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M6 8l4 4 4-4"/>
</svg>
)
}
Expand Down
2 changes: 1 addition & 1 deletion assets/js/dashboard/filters.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -285,7 285,7 @@ class Filters extends React.Component {
{(this.appliedFilters.map((filter) => this.renderListFilter(history, filter, query)))}

<Link to={`/${encodeURIComponent(site.domain)}/filter${window.location.search}`} className={`inline-flex items-center text-sm font-medium px-4 py-2 mr-2 cursor-pointer ml-auto text-gray-500 dark:text-gray-200 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-900 rounded`}>
<svg class="mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path></svg>
<svg className="mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path></svg>
Filter
</Link>

Expand Down
48 changes: 22 additions & 26 deletions assets/js/dashboard/stats/modals/filter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 8,27 @@ import { parseQuery, formattedFilters, navigateToQuery } from '../../query'
import Transition from "../../../transition";
import * as api from '../../api'

function getFilterValue(selectedFilter, query) {
const negated = !!query.filters[selectedFilter] && query.filters[selectedFilter][0] === '!'
let filterValue = negated ? query.filters[selectedFilter].slice(1) : (query.filters[selectedFilter] || "")

if (selectedFilter == 'country') {
const allCountries = Datamap.prototype.worldTopo.objects.world.geometries;
const selectedCountry = allCountries.find((c) => c.id === filterValue) || { properties: { name: filterValue } };
filterValue = selectedCountry.properties.name
}

return {filterValue, negated}
}


class FilterModal extends React.Component {
constructor(props) {
super(props)
const query = parseQuery(props.location.search, props.site)
const selectedFilter = this.props.match.params.field || 'page'

this.state = {
query,
selectedFilter,
negated: false,
filterValue: query.filters[selectedFilter] || '',
}
this.state = Object.assign({selectedFilter, query}, getFilterValue(selectedFilter, query))

this.handleKeydown = this.handleKeydown.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
Expand All @@ -29,23 38,6 @@ class FilterModal extends React.Component {
document.addEventListener("keydown", this.handleKeydown)
}

componentDidUpdate(prevProps, prevState) {
const { query, selectedFilter, filterValue } = this.state

if (prevState.selectedFilter !== selectedFilter) {
const negated = !!query.filters[selectedFilter] && query.filters[selectedFilter][0] == '!' && this.negationSupported(selectedFilter)
let filterValue = negated ? query.filters[selectedFilter].slice(1) : (query.filters[selectedFilter] || "")

if (selectedFilter == 'country') {
const allCountries = Datamap.prototype.worldTopo.objects.world.geometries;
const selectedCountry = allCountries.find((c) => c.id === filterValue) || { properties: { name: filterValue } };
filterValue = selectedCountry.properties.name
}

this.setState({ filterValue, negated })
}
}

componentWillUnmount() {
document.removeEventListener("keydown", this.handleKeydown);
}
Expand Down Expand Up @@ -88,7 80,7 @@ class FilterModal extends React.Component {
<SearchSelect
key={this.state.selectedFilter}
fetchOptions={this.fetchOptions.bind(this)}
initialSelectedItem={this.state.query.filters[this.state.selectedFilter]}
initialSelectedItem={this.state.filterValue}
onInput={this.onInput.bind(this)}
/>
)
Expand Down Expand Up @@ -119,6 111,10 @@ class FilterModal extends React.Component {
this.selectFilterAndCloseModal(selectedFilter, finalFilterValue)
}

updateSelectedFilter(e) {
this.setState(Object.assign({selectedFilter: e.target.value}, getFilterValue(e.target.value, this.state.query)))
}

renderBody() {
const { selectedFilter, negated, filterValue, query } = this.state;
const editableFilters = Object.keys(this.state.query.filters).filter(filter => !['props'].includes(filter))
Expand All @@ -134,7 130,7 @@ class FilterModal extends React.Component {
value={selectedFilter}
className="my-2 block w-full pr-10 border-gray-300 dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-200 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-900 dark:text-gray-300 cursor-pointer"
placeholder="Select a Filter"
onChange={(e) => this.setState({ selectedFilter: e.target.value })}
onChange={this.updateSelectedFilter.bind(this)}
>
<option disabled value="" className="hidden">Select a Filter</option>
{editableFilters.map(filter => <option key={filter} value={filter}>{formattedFilters[filter]}</option>)}
Expand All @@ -155,7 151,7 @@ class FilterModal extends React.Component {
</div>
)}

{this.renderSearchSelector(selectedFilter)}
{this.renderSearchSelector()}

<button
type="submit"
Expand Down

0 comments on commit cf66581

Please sign in to comment.