Skip to content

Commit

Permalink
Merge pull request #207 from Police-Data-Accessibility-Project/refact…
Browse files Browse the repository at this point in the history 
…or/search-results-and-quick-search

refactor: search results and quick search
  • Loading branch information
@mbodeantor
mbodeantor authored Mar 7, 2024
2 parents 5fc1510 + b1deeca commit 7a7451b
Show file tree
Hide file tree
Showing 12 changed files with 310 additions and 317 deletions.
8 changes: 4 additions & 4 deletions client/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"eslint-plugin-vue": "^9.20.1",
"happy-dom": "^13.1.4",
"jest-serializer-vue-tjw": "^3.20.0",
"pdap-design-system": "^2.3.0",
"pdap-design-system": "^2.5.0",
"postcss": "^8.4.32",
"tailwindcss": "^3.3.6",
"vite": "^4.5.1",
Expand All @@ -42,4 +42,4 @@
"not dead",
"not ie 11"
]
}
}
99 changes: 55 additions & 44 deletions client/src/components/SearchResultCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,41 +3,59 @@
class="flex flex-col border border-neutral-400 p-3 text-lg leading-snug"
data-test="search-result-card"
>
<h2 class="text-xl font-semibold line-clamp-2" data-test="search-result-title">
<h3
class="text-xl font-semibold line-clamp-2 normal-case tracking-normal min-h-[50px]"
data-test="search-result-title"
>
{{ dataSource.data_source_name }}
</h2>
</h3>

<Button
:class="['text-lg font-medium px-4 py-1 mt-4 mb-2 lg:mx-0 max-w-full']"
:disabled="
!dataSource.source_url ||
dataSource.url_status === 'broken' ||
dataSource.url_status === 'not found'
"
data-test="search-result-visit-source-button"
@click="
dataSource.source_url &&
dataSource.url_status !== 'broken' &&
dataSource.url_status !== 'not found'
? openSource()
: null
"
>
Visit data source <i class="fa fa-external-link" />
</Button>

<p
class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"
data-test="search-result-record-label"
>
Record type
</p>
<div
data-test="search-result-record-type"
v-if="dataSource.record_type"
data-test="search-result-record-type"
class="mt-1 py-[.125rem] px-3 rounded-full bg-brand-wine/10 dark:bg-brand-wine dark:text-white w-fit"
>
{{ dataSource.record_type }}
</div>
<p
v-else
data-test="search-result-record-type-unknown"
>
Unknown
</p>
<p v-else data-test="search-result-record-type-unknown">Unknown</p>
<div class="search-result-agency" data-test="search-result-agency">
<p
class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"
data-test="search-result-record-label"
class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"
data-test="search-result-record-label"
>
Agency
</p>
Agency
</p>
<p v-if="dataSource.agency_name" data-test="search-result-agency-known">
{{ dataSource.agency_name }}
</p>
<p v-else data-test="search-result-agency-unknown">Unknown</p>
</div>
<!-- hiding place for now
<!-- hiding place for now
<div data-test="search-result-place">
<p
v-if="dataSource.municipality && dataSource.state_iso"
Expand All @@ -64,7 +82,9 @@
v-if="dataSource.coverage_start && dataSource.coverage_end"
data-test="search-result-coverage-start-end"
>
{{ formatDate(dataSource.coverage_start) }}&ndash;{{ formatDate(dataSource.coverage_end) }}
{{ formatDate(dataSource.coverage_start) }}&ndash;{{
formatDate(dataSource.coverage_end)
}}
</p>
<p
v-else-if="dataSource.coverage_start && !dataSource.coverage_end"
Expand All @@ -78,51 +98,42 @@
>
Unknown start&ndash;{{ formatDate(dataSource.coverage_end) }}
</p>
<p v-else data-test="search-result-coverage-unknown">
Unknown
<p v-else data-test="search-result-coverage-unknown">Unknown</p>
<p
class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"
data-test="search-result-label-formats"
>
Formats available
</p>
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4" data-test="search-result-label-formats">Formats available</p>
<ul
v-if="dataSource.record_format"
v-if="dataSource.record_format"
data-test="search-result-formats"
class="mb-4"
>
<li
:key="recordFormat"
v-for="recordFormat in dataSource.record_format"
:key="recordFormat"
data-test="search-result-format"
class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit"
>
{{ recordFormat }}
</li>
</ul>
<p data-test="search-result-format-unknown" v-else>
Unknown
</p>
<div class="mt-auto flex flex-col">
<Button
:class="['text-lg font-medium px-4 py-1 mt-4 mb-2 lg:mx-0 max-w-full']"
:disabled="!dataSource.source_url || dataSource.url_status === 'broken' || dataSource.url_status === 'not found'"
@click="dataSource.source_url && dataSource.url_status !== 'broken' && dataSource.url_status !== 'not found' ? openSource() : null"
data-test="search-result-visit-source-button"
>
Visit data source <i class="fa fa-external-link"></i>
</Button>
<Button
@click="showDetails"
intent="secondary"
class="text-lg font-medium px-4 py-1 lg:mx-0 max-w-full"
data-test="search-result-source-details-button"
>
View details
</Button>
</div>
<p v-else data-test="search-result-format-unknown">Unknown</p>
<Button
intent="secondary"
class="text-lg font-medium px-4 py-1 lg:mx-0 max-w-full mt-auto"
data-test="search-result-source-details-button"
@click="showDetails"
>
More details
</Button>
</GridItem>
</template>

<script>
import { Button, GridItem } from 'pdap-design-system';
import formatDateForSearchResults from '../util/formatDate'
import formatDateForSearchResults from '../util/formatDate';
export default {
name: 'SearchResultCard',
Expand All @@ -140,7 +151,7 @@ export default {
openSource() {
window.open(this.dataSource.source_url, '_blank');
},
formatDate: formatDateForSearchResults
formatDate: formatDateForSearchResults,
},
};
</script>
</script>
62 changes: 27 additions & 35 deletions client/src/components/__tests__/__snapshots__/searchResultCard.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@

exports[`SearchResultCard with all data > search result card exists with full data 1`] = `
<div class="pdap-grid-item flex flex-col border border-neutral-400 p-3 text-lg leading-snug">
<h2 class="text-xl font-semibold line-clamp-2">Calls for Service for Cicero Police Department - IN</h2>
<h3 class="text-xl font-semibold line-clamp-2 normal-case tracking-normal min-h-[50px]">Calls for Service for Cicero Police Department - IN</h3>
<button class="pdap-button pdap-button-primary text-lg font-medium px-4 py-1 mt-4 mb-2 lg:mx-0 max-w-full"> Visit data source <i class="fa fa-external-link"></i>
</button>
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"> Record type </p>
<div class="mt-1 py-[.125rem] px-3 rounded-full bg-brand-wine/10 dark:bg-brand-wine dark:text-white w-fit">Calls for Service</div>
<div class="search-result-agency">
Expand All @@ -28,7 +30,7 @@ exports[`SearchResultCard with all data > search result card exists with full da
-->
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"> Time range </p>
<p>2016–2017</p>
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4">Formats available</p>
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"> Formats available </p>
<ul class="mb-4">
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">[</li>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">'</li>
Expand All @@ -46,19 +48,17 @@ exports[`SearchResultCard with all data > search result card exists with full da
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">'</li>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">]</li>
</ul>
<div class="mt-auto flex flex-col">
<button class="pdap-button pdap-button-primary text-lg font-medium px-4 py-1 mt-4 mb-2 lg:mx-0 max-w-full"> Visit data source <i class="fa fa-external-link"></i>
</button>
<button class="pdap-button pdap-button-secondary text-lg font-medium px-4 py-1 lg:mx-0 max-w-full"> View details </button>
</div>
<button class="pdap-button pdap-button-secondary text-lg font-medium px-4 py-1 lg:mx-0 max-w-full mt-auto"> More details </button>
</div>
`;

exports[`SearchResultCard with coverage end but not start > search result card exists with coverage end but not start 1`] = `
<div class="pdap-grid-item flex flex-col border border-neutral-400 p-3 text-lg leading-snug">
<h2 class="text-xl font-semibold line-clamp-2"></h2>
<h3 class="text-xl font-semibold line-clamp-2 normal-case tracking-normal min-h-[50px]"></h3>
<button class="pdap-button pdap-button-primary text-lg font-medium px-4 py-1 mt-4 mb-2 lg:mx-0 max-w-full" disabled> Visit data source <i class="fa fa-external-link"></i>
</button>
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"> Record type </p>
<p> Unknown </p>
<p>Unknown</p>
<div class="search-result-agency">
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"> Agency </p>
<p>Unknown</p>
Expand All @@ -82,21 +82,19 @@ exports[`SearchResultCard with coverage end but not start > search result card e
-->
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"> Time range </p>
<p> Unknown start–2016</p>
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4">Formats available</p>
<p> Unknown </p>
<div class="mt-auto flex flex-col">
<button class="pdap-button pdap-button-primary text-lg font-medium px-4 py-1 mt-4 mb-2 lg:mx-0 max-w-full" disabled> Visit data source <i class="fa fa-external-link"></i>
</button>
<button class="pdap-button pdap-button-secondary text-lg font-medium px-4 py-1 lg:mx-0 max-w-full"> View details </button>
</div>
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"> Formats available </p>
<p>Unknown</p>
<button class="pdap-button pdap-button-secondary text-lg font-medium px-4 py-1 lg:mx-0 max-w-full mt-auto"> More details </button>
</div>
`;

exports[`SearchResultCard with coverage start but not end > search result card exists with coverage start but not end 1`] = `
<div class="pdap-grid-item flex flex-col border border-neutral-400 p-3 text-lg leading-snug">
<h2 class="text-xl font-semibold line-clamp-2"></h2>
<h3 class="text-xl font-semibold line-clamp-2 normal-case tracking-normal min-h-[50px]"></h3>
<button class="pdap-button pdap-button-primary text-lg font-medium px-4 py-1 mt-4 mb-2 lg:mx-0 max-w-full" disabled> Visit data source <i class="fa fa-external-link"></i>
</button>
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"> Record type </p>
<p> Unknown </p>
<p>Unknown</p>
<div class="search-result-agency">
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"> Agency </p>
<p>Unknown</p>
Expand All @@ -120,21 +118,19 @@ exports[`SearchResultCard with coverage start but not end > search result card e
-->
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"> Time range </p>
<p>2016–Unknown end </p>
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4">Formats available</p>
<p> Unknown </p>
<div class="mt-auto flex flex-col">
<button class="pdap-button pdap-button-primary text-lg font-medium px-4 py-1 mt-4 mb-2 lg:mx-0 max-w-full" disabled> Visit data source <i class="fa fa-external-link"></i>
</button>
<button class="pdap-button pdap-button-secondary text-lg font-medium px-4 py-1 lg:mx-0 max-w-full"> View details </button>
</div>
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"> Formats available </p>
<p>Unknown</p>
<button class="pdap-button pdap-button-secondary text-lg font-medium px-4 py-1 lg:mx-0 max-w-full mt-auto"> More details </button>
</div>
`;

exports[`SearchResultCard with missing data > search result card exists with missing data 1`] = `
<div class="pdap-grid-item flex flex-col border border-neutral-400 p-3 text-lg leading-snug">
<h2 class="text-xl font-semibold line-clamp-2">Calls for Service for Cicero Police Department - IN</h2>
<h3 class="text-xl font-semibold line-clamp-2 normal-case tracking-normal min-h-[50px]">Calls for Service for Cicero Police Department - IN</h3>
<button class="pdap-button pdap-button-primary text-lg font-medium px-4 py-1 mt-4 mb-2 lg:mx-0 max-w-full" disabled> Visit data source <i class="fa fa-external-link"></i>
</button>
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"> Record type </p>
<p> Unknown </p>
<p>Unknown</p>
<div class="search-result-agency">
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"> Agency </p>
<p>Unknown</p>
Expand All @@ -157,13 +153,9 @@ exports[`SearchResultCard with missing data > search result card exists with mis
</div>
-->
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"> Time range </p>
<p> Unknown </p>
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4">Formats available</p>
<p> Unknown </p>
<div class="mt-auto flex flex-col">
<button class="pdap-button pdap-button-primary text-lg font-medium px-4 py-1 mt-4 mb-2 lg:mx-0 max-w-full" disabled> Visit data source <i class="fa fa-external-link"></i>
</button>
<button class="pdap-button pdap-button-secondary text-lg font-medium px-4 py-1 lg:mx-0 max-w-full"> View details </button>
</div>
<p>Unknown</p>
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"> Formats available </p>
<p>Unknown</p>
<button class="pdap-button pdap-button-secondary text-lg font-medium px-4 py-1 lg:mx-0 max-w-full mt-auto"> More details </button>
</div>
`;
3 changes: 2 additions & 1 deletion client/src/pages/DataSourceStaticView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@
import axios from 'axios';
import { Button } from 'pdap-design-system';
import formatDateForSearchResults from '../util/formatDate';
import { STATIC_VIEW_UI_SHAPE } from './util';
import { STATIC_VIEW_UI_SHAPE } from '../util/pageData.js';
export default {
name: 'DataSourceStaticView',
Expand Down Expand Up @@ -198,3 +198,4 @@ export default {
@apply my-2;
}
</style>
./pageData
Loading

0 comments on commit 7a7451b

Please sign in to comment.