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

fix: switch to use vue-select instead of Multiselect #2274

Merged
merged 10 commits into from
Dec 12, 2023
Merged

fix: switch to use vue-select instead of Multiselect #2274

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c1b4a61
fix: switch to use vue-select instead of Multiselect
adele-usdr Nov 28, 2023
6261136
fix: remove unnecessary Multiselect workaround
adele-usdr Nov 29, 2023
c9c109c
fix: work in progress, styling of v-select control
adele-usdr Nov 30, 2023
7f0eccc
fix: make sure there's a pointer cursor on the open indicator
adele-usdr Nov 30, 2023
7f2cfb8
Merge branch '_staging' into 2226-update-new-search-and-edit-search-p…
adele-usdr Nov 30, 2023
ad6a2a6
fix: remove custom styling for now
adele-usdr Dec 4, 2023
fbe8b9e
fix: don't submit the form on enter for open dropdowns
adele-usdr Dec 8, 2023
d4e7f4c
Merge branch 'main' into 2226-update-new-search-and-edit-search-panel…
adele-usdr Dec 8, 2023
b2177ba
Merge branch 'main' into 2226-update-new-search-and-edit-search-panel…
adele-usdr Dec 12, 2023
78a62ab
Merge branch 'main' into 2226-update-new-search-and-edit-search-panel…
adele-usdr Dec 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions packages/client/src/assets/adjust-vue-select.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/* Make vue-select dropdowns match the height for other form controls */
.vs__dropdown-toggle {
padding-top: 4px;
padding-bottom: 7px;
padding-left: 4px;
padding-right: 4px;
}

.vs__open-indicator {
cursor: pointer;
}
6 changes: 2 additions & 4 deletions packages/client/src/components/Modals/GrantDetails.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,11 +70,11 @@
<br />
<b-row class="ml-2 mb-2 d-flex align-items-baseline">
<h2 class="h4">Assigned {{newTerminologyEnabled ? 'Teams': 'Agencies'}}</h2>
<multiselect v-model="selectedAgencies" :options="agencies" :multiple="true" :close-on-select="false"
<v-select v-model="selectedAgencies" :options="agencies" :multiple="true" :close-on-select="false"
:clear-on-select="false" :placeholder="`Select ${newTerminologyEnabled ? 'teams': 'agencies'}`" label="name" track-by="id"
style="width: 300px; margin: 0 16px;" :show-labels="false"
>
</multiselect>
</v-select>
<b-button variant="outline-primary" @click="assignAgenciesToGrant">Assign</b-button>
</b-row>
<b-table :items="assignedAgencies" :fields="assignedAgenciesFields">
Expand All @@ -91,12 +91,10 @@
<script>
import { mapActions, mapGetters } from 'vuex';
import { debounce } from 'lodash';
import Multiselect from 'vue-multiselect';
import { newTerminologyEnabled } from '@/helpers/featureFlags';
import { titleize } from '../../helpers/form-helpers';

export default {
components: { Multiselect },
props: {
selectedGrant: Object,
},
Expand Down
38 changes: 14 additions & 24 deletions packages/client/src/components/Modals/SearchPanel.vue
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

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

Is the code on line 472 (css for .search-panel .search-fields-radio-group) still relevant?
Seems like it was a workaround when using a Multiselect component, removing this styling doesn't seem to cause radio buttons to overlap with any dropdowns.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

good call! Just pushed a new commit to remove this.

Original file line number Diff line number Diff line change
Expand Up @@ -93,8 +93,9 @@
<b-form-group
id="funding-type-group"
label="Funding Type"
label-for="funding-type"
>
<multiselect
<v-select
id="funding-type"
v-model="formData.criteria.fundingTypes"
:options="fundingTypeOptions"
Expand All @@ -104,15 +105,14 @@
:close-on-select="false"
:searchable="false"
selectLabel=""
:limit="2"
/>
</b-form-group>
<b-form-group
id="eligibility-group"
label="Eligibility"
label-for="eligibility"
>
<multiselect
<v-select
id="eligibility"
v-model="formData.criteria.eligibility"
:options="eligibilityCodes"
Expand All @@ -122,29 +122,28 @@
:close-on-select="false"
:searchable="true"
selectLabel=""
:limit="3"
/>
</b-form-group>
<b-form-group
id="opportunity-category-group"
label="Category"
label-for="opportunity-category"
>
<multiselect
<v-select
id="opportunity-category"
v-model="formData.criteria.opportunityCategories"
:options="opportunityCategoryOptions"
:multiple="true"
:close-on-select="false"
:searchable="false"
:limit="2"
placeholder="Select Opportunity Category"
/>
</b-form-group>
<b-form-group
id="bill-group"
label="Appropriation Bill"
label-for="bill"
>
<multiselect
<v-select
id="bill"
v-model="formData.criteria.bill"
:options="billOptions"
Expand All @@ -154,6 +153,7 @@
:searchable="false"
placeholder="All Bills"
:show-labels="false"
:clearable="false"
/>
</b-form-group>
<b-form-group
Expand All @@ -171,8 +171,9 @@
<b-form-group
id="posted-within-group"
label="Posted Within"
label-for="posted-within"
>
<multiselect
<v-select
id="posted-within"
v-model="formData.criteria.postedWithin"
:options="postedWithinOptions"
Expand All @@ -182,6 +183,7 @@
:searchable="false"
placeholder="All Time"
:show-labels="false"
:clearable="false"
/>
</b-form-group>
<b-form-group
Expand Down Expand Up @@ -219,7 +221,6 @@

import { mapActions, mapGetters } from 'vuex';
import { VBToggle } from 'bootstrap-vue';
import Multiselect from 'vue-multiselect';
import { billOptions } from '@/helpers/constants';
import { DateTime } from 'luxon';

Expand All @@ -237,7 +238,6 @@ const defaultCriteria = {
};

export default {
components: { Multiselect },
props: {
SearchType: String,
showModal: Boolean,
Expand Down Expand Up @@ -380,8 +380,9 @@ export default {
onShown() {
this.initFormState();
},
async onEnter() {
if (this.saveEnabled) {
async onEnter(event) {
const enterInOpenDropdown = event.target.closest('.vs--open');
if (this.saveEnabled && !enterInOpenDropdown) {
await this.onSubmit();
}
},
Expand Down Expand Up @@ -439,10 +440,6 @@ export default {
};
</script>
<style>
.search-panel .multiselect__option {
word-break: break-all;
white-space: normal;
}
.search-panel .sidebar-footer {
border-top: 1.5px solid #e8e8e8;
justify-content: space-between;
Expand Down Expand Up @@ -473,11 +470,4 @@ export default {
.search-panel .b-sidebar-body {
padding: .75rem;
}
.search-panel .search-fields-radio-group {
/*
Ensure radio buttons are hidden behind <multiselect> options
*/
position: relative;
z-index: 0;
}
</style>
1 change: 1 addition & 0 deletions packages/client/src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import App from './App.vue';
import router from './router';
import store from './store';
import './assets/fix-sticky-headers.css';
import './assets/adjust-vue-select.css';

const fetchApi = require('@/helpers/fetchApi');

Expand Down
Loading