Skip to content

Commit

Permalink
chore: multiple changes based on design and usability feedback (#1891)
Browse files Browse the repository at this point in the history
  • Loading branch information
@as1729
as1729 authored Sep 12, 2023
1 parent c88ee9f commit ed6c14b
Show file tree
Hide file tree
Showing 7 changed files with 390 additions and 266 deletions.
22 changes: 16 additions & 6 deletions packages/client/src/components/GrantsTableNext.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<div class="ml-3">
<SavedSearchPanel />
</div>
<div class="ml-3">
<div class="ml-2">
<SearchPanel ref="searchPanel" :search-id="Number(editingSearchId)" @filters-applied="paginateGrants" />
</div>
</b-row>
Expand All @@ -24,7 +24,7 @@
</b-row>
<b-row align-v="center">
<b-col cols="12">
<b-table fixed id="grants-table" sticky-header="450px" hover :items="formattedGrants" responsive
<b-table fixed id="grants-table" sticky-header="32rem" hover :items="formattedGrants" responsive
:fields="fields.filter(field => !field.hideGrantItem)" selectable striped :sort-by.sync="orderBy"
:sort-desc.sync="orderDesc" :no-local-sorting="true" :bordered="true" select-mode="single" :busy="loading"
@row-selected="onRowSelected" show-empty emptyText="No matches found">
Expand Down Expand Up @@ -57,8 +57,8 @@
</b-table>
</b-col>
</b-row>
<b-row align-v="center">
<b-col cols="12" class="d-flex">
<b-row class="grants-table-pagination">
<b-col cols="11" class="grants-table-pagination-component">
<b-pagination
class="m-0"
v-model="currentPage"
Expand All @@ -69,7 +69,7 @@
next-text="Next"
last-text="Last"
aria-controls="grants-table" />
<div class="ml-2 rounded text-justify p-2 page-item">{{ totalRows }} total grant{{ totalRows == 1 ? '' : 's' }}</div>
<div class="my-1 rounded py-1 px-2 page-item">{{ totalRows }} total grant{{ totalRows == 1 ? '' : 's' }}</div>
</b-col>
</b-row>
<GrantDetails :selected-grant.sync="selectedGrant" />
Expand Down Expand Up @@ -420,5 +420,15 @@ export default {
#grants-table th:nth-child(1) {
width: 300px;
}
.grants-table-title-control {
padding-bottom: .75rem;
}
.grants-table-pagination {
padding-bottom: .75rem;
}
.grants-table-pagination-component {
display: flex;
justify-content: left;
align-items: center;
}
</style>
165 changes: 109 additions & 56 deletions packages/client/src/components/Modals/SavedSearchPanel.vue
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<template>
<div>
<div class="saved-search-panel">
<b-button @click="initManageSearches" variant="primary" size="sm">
My Saved Searches
</b-button>
<b-sidebar
id="saved-search-panel"
class="saved-search-panel"
model="displaySavedSearchPanel"
ref="savedSearchPanel"
bg-variant="white"
width="480px"
@hidden="cancel"
backdrop
right
Expand All @@ -26,38 +26,53 @@
New Search
</b-button>
</div>
<section class="container-fluid p-0" style="overflow-x: hidden;" v-if="!emptyState">
<div v-for="(search,idx) in savedSearches.data" :key="idx" class="saved-search-row pt-1" :searchid="search.id" @click="appylySavedSearch(search.id)" >
<b-row>
<b-col cols="10"><b>{{ search.name }}</b></b-col>
<b-col cols="1">
<b-dropdown size="sm" variant="link" toggle-class="text-decoration-none" no-caret>
<template #button-content>
<b-icon icon="three-dots-vertical" class="text-dark" font-scale="1"></b-icon>
</template>
<b-dropdown-item :searchId="search.id" @click.stop="editSavedSearch">Edit</b-dropdown-item>
<b-dropdown-item @click.stop="deleteSavedSearch" :searchId="search.id">Delete</b-dropdown-item>
</b-dropdown>
</b-col>
</b-row>
<b-row>
<b-col cols="9">
<!-- TODO: Change this to updatedAt -->
Last used {{ new Intl.DateTimeFormat("en-US", { year: "numeric", month: "2-digit", day: "2-digit" }).format(new Date(search.createdAt)) }}
</b-col>
</b-row>
<b-row>
<b-col cols="9">
<div v-for="(field, idx) of formatCriteria(search.criteria)" :key="idx">
{{ field.label }}: {{ field.value }}
</div>
</b-col>
</b-row>
<hr class="m-0" />
</div>
</section>
<b-table
id="saved-searches-table"
:items="savedSearches.data"
:fields="savedSearchFields"
hover
thead-class="saved-search-table-header-class"
@row-clicked="onRowClicked"
>
<template #cell(searchinfo)="data">
<div>
<b-row>
<b-col cols="10"><b>{{ data.item.name }}</b></b-col>
<b-col cols="1">
<b-dropdown class="saved-search-settings-dropdown" size="sm" variant="link" toggle-class="text-decoration-none" no-caret>
<template #button-content>
<b-icon icon="three-dots-vertical" class="text-dark" font-scale="1"></b-icon>
</template>
<b-dropdown-item :searchId="data.item.id" @click.stop="editSavedSearch">Edit</b-dropdown-item>
<b-dropdown-item @click.stop="deleteSavedSearch" :searchId="data.item.id">Delete</b-dropdown-item>
</b-dropdown>
</b-col>
</b-row>
<b-row>
<b-col cols="9">
<!-- TODO: Change this to updatedAt -->
Last used {{ new Intl.DateTimeFormat("en-US", { year: "numeric", month: "2-digit", day: "2-digit" }).format(new Date(data.item.createdAt)) }}
</b-col>
</b-row>
<b-row>
<b-col cols="9">
<div v-for="(field, idx) of formatCriteria(data.item.criteria)" :key="idx">
{{ field.label }}: {{ field.value }}
</div>
</b-col>
</b-row>
</div>
</template>
</b-table>
<template #footer="{ hide }">
<div class="d-flex text-light align-items-center px-3 py-2">
<div class="d-flex text-light align-items-center px-3 py-2 saved-search-footer-div">
<b-pagination
class="m-0 saved-search-pagination"
v-model="currentPage"
:total-rows="totalRows"
:per-page="perPage"
aria-controls="saved-searches-table"
size="sm" />
<b-button size="sm" @click="hide" variant="outline-primary" class="borderless-button">Close</b-button>
</div>
</template>
Expand All @@ -79,7 +94,12 @@ export default {
'v-b-toggle': VBToggle,
},
data() {
return {};
return {
perPage: 10,
currentPage: 1,
loading: false,
savedSearchFields: [{ key: 'searchinfo', label: 'Saved Search' }],
};
},
validations: {},
watch: {
Expand All @@ -90,13 +110,25 @@ export default {
this.$refs.savedSearchPanel.hide();
}
},
currentPage() {
if (this.loading) {
return;
}
this.fetchSavedSearches({
perPage: this.perPage,
currentPage: this.currentPage,
});
},
},
computed: {
...mapGetters({
savedSearches: 'grants/savedSearches',
displaySavedSearchPanel: 'grants/displaySavedSearchPanel',
selectedSearchId: 'grants/selectedSearchId',
}),
totalRows() {
return this.savedSearches && this.savedSearches.pagination ? this.savedSearches.pagination.total : 0;
},
emptyState() {
return this.savedSearches.data && this.savedSearches.data.length === 0;
},
Expand All @@ -119,7 +151,10 @@ export default {
initViewResults: 'grants/initViewResults',
}),
setup() {
this.fetchSavedSearches();
this.fetchSavedSearches({
perPage: this.perPage,
currentPage: this.currentPage,
});
if (this.displaySavedSearchPanel) {
this.$root.$emit('bv::toggle::collapse', 'saved-search-panel');
}
Expand All @@ -137,10 +172,16 @@ export default {
if (this.selectedSearchId === Number(searchId)) {
this.clearSelectedSearch();
}
this.fetchSavedSearches();
this.fetchSavedSearches({
perPage: this.perPage,
currentPage: this.currentPage,
});
this.notifyDeleted();
},
appylySavedSearch(searchId) {
onRowClicked(item) {
this.applySavedSearch(item.id);
},
applySavedSearch(searchId) {
const searchData = this.savedSearches.data.find((search) => search.id === searchId);
this.changeSelectedSearchId(searchId);
this.applyFilters(JSON.parse(searchData.criteria));
Expand Down Expand Up @@ -170,51 +211,63 @@ export default {
};
</script>
<style>
.saved-search-title{
.saved-search-panel .saved-search-title{
font-style: normal;
font-weight: 700;
font-size: 20px;
font-size: 17px;
line-height: 120%;
}
.b-sidebar.b-sidebar-right > .b-sidebar-header .close{
margin-right: 0px;
}
.b-sidebar-header{
.saved-search-panel .b-sidebar-header{
justify-content: space-between;
border-bottom: solid #DAE0E5;
}
.b-sidebar-body{
display: flex;
.saved-search-panel .b-sidebar.b-sidebar-right > .b-sidebar-header .close{
margin-right: 0px;
}
.b-sidebar-footer{
.saved-search-panel .b-sidebar-footer{
display: flex;
justify-content: end;
border-top: solid #DAE0E5;
}
.saved-search-empty-state{
.saved-search-panel .saved-search-row{
padding-left: 15px;
padding-right: 15px;
}
.saved-search-panel .saved-search-row:hover{
background: rgba(0, 0, 0, 0.075);
}
.saved-search-panel .saved-search-settings-dropdown > button {
padding-bottom: 0;
}
.saved-search-panel .saved-search-empty-state{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
font-style: normal;
}
.saved-search-empty-state > h4{
.saved-search-panel .saved-search-empty-state > h4{
font-weight: 700;
font-size: 16px;
line-height: 120%;
}
.saved-search-empty-state > span{
.saved-search-panel .saved-search-empty-state > span{
font-weight: 500;
font-size: 14px;
line-height: 150%;
}
.saved-search-row{
padding-left: 15px;
padding-right: 15px;
.saved-search-panel .saved-search-table-header-class {
display: none;
}
.saved-search-row:hover{
background: rgba(0, 0, 0, 0.075);
.saved-search-panel .saved-search-pagination {
align-items: center;
}
.saved-search-panel .saved-search-footer-div {
width: 100%;
justify-content: space-between;
}
</style>
Loading

0 comments on commit ed6c14b

Please sign in to comment.