Skip to content

Commit

Permalink
feat: subject list filter reset button
Browse files Browse the repository at this point in the history
PhilR8 committed Nov 6, 2023
1 parent 210ddf5 commit 86583f6
Showing 2 changed files with 74 additions and 27 deletions.
75 changes: 51 additions & 24 deletions solution/ui/regulations/css/scss/partials/_policy_repository.scss
Original file line number Diff line number Diff line change
@@ -4,6 +4,25 @@

@import "../application_settings";

@mixin common-remove-btn-styles {
display: flex;
align-items: center;
justify-content: center;
background-color: $policy_subject_close_background;
color: $policy_subject_selected_chip_background;
border-radius: 4px;

&:hover,
&:focus,
&:active {
background-color: #c0c1c3;
}

i {
pointer-events: none;
}
}

#policyRepositoryApp.repository-view,
#policyRepositorySearchApp.repository-search-view {
margin-bottom: 1rem;
@@ -86,7 +105,6 @@
max-height: calc(100vh - 90px);
overflow-y: auto;
}

}

.selections__container {
@@ -107,24 +125,11 @@
padding: 4px 8px;

button {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
margin-left: 8px;
background-color: $policy_subject_close_background;
color: $policy_subject_selected_chip_background;
border-radius: 4px;
&:hover,
&:focus,
&:active {
background-color: #c0c1c3;
}

i {
pointer-events: none;
}
@include common-remove-btn-styles;
}
}
}
@@ -159,17 +164,39 @@
display: flex;
flex-direction: column;

label[for="subjectReduce"] {
font-size: 14px;
}
form {
display: flex;
flex-direction: column;
position: relative;

label[for="subjectReduce"] {
font-size: 14px;
}

input#subjectReduce {
@include filter-borders;
input#subjectReduce {
@include filter-borders;

flex: 1;
height: 1.5rem;
margin: 12px 0;
padding: 4px 24px 4px 4px;
box-sizing: content-box !important; // thanks, Vuetify
}

height: 1.5rem;
margin: 12px 0;
padding: 4px;
box-sizing: content-box !important; // thanks, Vuetify
.subjects__filter-reset {
@include common-remove-btn-styles;

top: 50%;
right: -3px;
transform: translate(-50%);
position: absolute;
width: 20px;
height: 20px;

&--hidden {
display: none;
}
}
}
}

Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup>
import { reactive, watch } from "vue";
import { computed, reactive, watch } from "vue";
import { useRouter, useRoute } from "vue-router/composables";
@@ -101,14 +101,34 @@ const subjectClick = (event) => {
},
});
};
const filterResetClasses = computed(() => ({
"subjects__filter-reset": true,
"subjects__filter-reset--hidden": !state.filter,
}));
const filterResetClick = () => {
state.filter = "";
};
</script>
<template>
<div class="subjects__select-container">
<h3>By Subject</h3>
<div class="subjects__list-container">
<label for="subjectReduce">Filter the subject list</label>
<input id="subjectReduce" v-model="state.filter" type="text" />
<form>
<label for="subjectReduce">Filter the subject list</label>
<input id="subjectReduce" v-model="state.filter" type="text" />
<button
aria-label="Clear subject list filter"
data-testid="clear-subject-filter"
type="reset"
:class="filterResetClasses"
class="mdi mdi-close"
@click="filterResetClick"
>
</button>
</form>
<ul tabindex="-1" class="subjects__list">
<li
v-for="subject in state.subjects"

0 comments on commit 86583f6

Please sign in to comment.