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.

Sign up for GitHub

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

Jump to bottom

chore: main -> dev #229

Merged
merged 14 commits into from Mar 21, 2024
Merged

chore: main -> dev #229

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
e880a82
Merge pull request #205 from Police-Data-Accessibility-Project/dev
mbodeantor Feb 28, 2024
fccf933
Merge pull request #209 from Police-Data-Accessibility-Project/dev
mbodeantor Mar 13, 2024
81920d9
feat(config): add logic to router to handle meta tags
joshuagraber Mar 14, 2024
6060eae
refactor(router): Update meta tag logic
joshuagraber Mar 15, 2024
0232de3
refactor(router): organization and comments
joshuagraber Mar 15, 2024
4642765
refactor(router): miscellaneous updates
joshuagraber Mar 15, 2024
2769c00
fix(pages): update search results filtering
joshuagraber Mar 19, 2024
14c8989
refactor(pages): update SearchResultPage
joshuagraber Mar 19, 2024
943581a
test(pages): update SearchResultPage snapshot
joshuagraber Mar 19, 2024
5a0c1d9
refactor(pages): update search result page
joshuagraber Mar 19, 2024
44c585c
test(pages): update search results snapshot
joshuagraber Mar 19, 2024
a35e2c7
Merge pull request #224 from Police-Data-Accessibility-Project/fix/se…
mbodeantor Mar 19, 2024
d6db7e4
Merge pull request #216 from Police-Data-Accessibility-Project/featur…
mbodeantor Mar 20, 2024
b8f56ee
Merge remote-tracking branch 'origin/main' into chore/main-into-dev
joshuagraber Mar 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
54 changes: 29 additions & 25 deletions client/src/pages/SearchResultPage.vue
View file
Open in desktop
Expand Up @@ -42,32 +42,34 @@
</div>

<div data-test="search-results">
<GridContainer
<section
v-for="section in uiShape"
:key="section.header"
:columns="3"
template-rows="auto auto 1fr"
component="section"
data-test="search"
class="p-0 w-full md:max-w-[unset] lg:max-w-[unset]"
class="mt-8 p-0 w-full"
>
<GridItem class="section-subheading" component="h2" :span-column="3">
<h2 class="section-subheading w-full">
{{ section.header }}
</GridItem>
</h2>

<ErrorBoundary v-for="record in section.records" :key="record.type">
<SearchResultCard
data-test="search-results-cards"
:data-source="searchResult[record.type]"
/>
</ErrorBoundary>
</GridContainer>
<div class="grid pdap-grid-container-column-3 gap-4">
<ErrorBoundary
v-for="result in [...getAllRecordsFromSection(section)]"
:key="result.type"
>
<SearchResultCard
data-test="search-results-cards"
:data-source="result"
/>
</ErrorBoundary>
</div>
</section>
</div>
</main>
</template>

<script>
import { Button, GridContainer, GridItem } from 'pdap-design-system';
import { Button } from 'pdap-design-system';
import SearchResultCard from '../components/SearchResultCard.vue';
import ErrorBoundary from '../components/ErrorBoundary.vue';
import axios from 'axios';
Expand All @@ -80,8 +82,6 @@ export default {
Button,
ErrorBoundary,
SearchResultCard,
GridContainer,
GridItem,
},
data: () => ({
count: 0,
Expand All @@ -97,6 +97,11 @@ export default {
this.search();
},
methods: {
getAllRecordsFromSection(section) {
return section.records.reduce((acc, cur) => {
return [...acc, ...this.searchResult[cur.type]];
}, []);
},
getResultsCopy() {
return `${this.count} ${pluralize('result', this.count)}`;
},
Expand All @@ -112,7 +117,12 @@ export default {

// Format results into object keyed by record_type
const resultFormatted = res.data.data.reduce((acc, cur) => {
return { ...acc, [cur.record_type]: cur };
return {
...acc,
[cur.record_type]: Array.isArray(acc[cur.record_type])
? [...acc[cur.record_type], cur]
: [cur],
};
}, {});

// Modify ui shape object to exclude any sections / data sources that do not have records returned by API
Expand All @@ -127,7 +137,7 @@ export default {

// Set data and away we go
this.searchResult = resultFormatted;
this.count = Object.entries(this.searchResult).length;
this.count = res.data.count;
} catch (error) {
console.error(error);
} finally {
Expand All @@ -137,9 +147,3 @@ export default {
},
};
</script>

<style scoped>
.section-subheading {
@apply mt-4;
}
</style>
168 changes: 121 additions & 47 deletions client/src/pages/__tests__/__snapshots__/searchResultPage.test.js.snap
View file
Open in desktop
Expand Up @@ -4,7 +4,7 @@ exports[`SearchResultPage renders with data > Calls API and renders search resul
<main class="flex flex-col p-8 h-auto">
<div>
<h1>Data Sources Search results</h1>
<p class="text-2xl"> Searching for <span class="font-semibold">"calls"</span> in <span class="font-semibold">"Cook"</span>. <span>Found 1 result.</span>
<p class="text-2xl"> Searching for <span class="font-semibold">"calls"</span> in <span class="font-semibold">"Cook"</span>. <span>Found 3 results.</span>
</p>
<button class="pdap-button pdap-button-secondary my-4">
<i class="fa fa-plus"></i> New search
Expand All @@ -19,19 +19,92 @@ exports[`SearchResultPage renders with data > Calls API and renders search resul
</p>
</div>
<div>
<section class="pdap-grid-container pdap-grid-container-column-3 p-0 w-full md:max-w-[unset] lg:max-w-[unset]" style="grid-template-rows: auto auto 1fr;">
<h2 class="pdap-grid-item pdap-grid-item-span-column-3 section-subheading">Police & public interactions</h2>
<div class="pdap-grid-item flex flex-col border border-neutral-400 p-3 text-lg leading-snug">
<h3 class="text-xl font-semibold line-clamp-2 normal-case tracking-normal min-h-[50px]">311 Calls for City of Chicago</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">
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"> Agency </p>
<p>Chicago Police Department - IL</p>
<section class="mt-8 p-0 w-full">
<h2 class="section-subheading w-full">Police & public interactions</h2>
<div class="grid pdap-grid-container-column-3 gap-4">
<div class="pdap-grid-item flex flex-col border border-neutral-400 p-3 text-lg leading-snug">
<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">
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"> Agency </p>
<p>Cicero Police Department - IN</p>
</div>
<!-- hiding place for now
<div data-test="search-result-place">
<p
v-if="dataSource.municipality && dataSource.state_iso"
data-test="search-result-place-state-municipality"
>
{{ dataSource.municipality }}, {{ dataSource.state_iso }}
</p>
<p v-else-if="dataSource.municipality" data-test="search-result-place-municipality">
{{ dataSource.municipality }}
</p>
<p v-else-if="dataSource.state_iso" data-test="search-result-place-state">
{{ dataSource.state_iso }}
</p>
<p v-else data-test="search-result-place-unknown">Location Unknown</p>
</div>
-->
<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>
<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>
</ul>
<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>
<div class="pdap-grid-item flex flex-col border border-neutral-400 p-3 text-lg leading-snug">
<h3 class="text-xl font-semibold line-clamp-2 normal-case tracking-normal min-h-[50px]">Calls for Service for Chicago Police Department - IL</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">
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"> Agency </p>
<p>Chicago Police Department - IL</p>
</div>
<!-- hiding place for now
<div data-test="search-result-place">
<p
v-if="dataSource.municipality && dataSource.state_iso"
data-test="search-result-place-state-municipality"
>
{{ dataSource.municipality }}, {{ dataSource.state_iso }}
</p>
<p v-else-if="dataSource.municipality" data-test="search-result-place-municipality">
{{ dataSource.municipality }}
</p>
<p v-else-if="dataSource.state_iso" data-test="search-result-place-state">
{{ dataSource.state_iso }}
</p>
<p v-else data-test="search-result-place-unknown">Location Unknown</p>
</div>
-->
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"> Time range </p>
<p>2018–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>
<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>
</ul>
<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>
<!-- hiding place for now
<div class="pdap-grid-item flex flex-col border border-neutral-400 p-3 text-lg leading-snug">
<h3 class="text-xl font-semibold line-clamp-2 normal-case tracking-normal min-h-[50px]">311 Calls for City of Chicago</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">
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"> Agency </p>
<p>Chicago Police Department - IL</p>
</div>
<!-- hiding place for now
<div data-test="search-result-place">
<p
v-if="dataSource.municipality && dataSource.state_iso"
Expand All @@ -48,40 +121,41 @@ exports[`SearchResultPage renders with data > Calls API and renders search resul
<p v-else data-test="search-result-place-unknown">Location Unknown</p>
</div>
-->
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"> Time range </p>
<p>12/17/2018–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>
<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>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">C</li>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">S</li>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">V</li>
<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>
<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>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">X</li>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">M</li>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">L</li>
<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>
<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>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">R</li>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">D</li>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">F</li>
<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>
<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>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">R</li>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">S</li>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">S</li>
<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>
<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>
<p class="text-brand-wine dark:text-white font-semibold text-sm uppercase tracking-wider mb-0 mt-4"> Time range </p>
<p>12/17/2018–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>
<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>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">C</li>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">S</li>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">V</li>
<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>
<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>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">X</li>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">M</li>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">L</li>
<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>
<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>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">R</li>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">D</li>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">F</li>
<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>
<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>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">R</li>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">S</li>
<li class="mt-1 py-[.125rem] px-3 rounded-full bg-slate-200 dark:bg-slate-600 w-fit">S</li>
<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>
<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>
</div>
</section>
</div>
Expand Down