ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Refactoring

This commit is contained in:
Lorenz Padberg 2023-08-24 11:00:03 +02:00
parent 7298f443e9
commit 0297d49e0c
1 changed files with 32 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
client/src/components/instruments/FilterBar.vue
View File

@ -8,38 +8,40 @@
@input="debouncedUpdate"
placeholder="Suchbegriff eingeben..."
/>
<NoteIcon class="filter-bar__search-icon"></NoteIcon> <!-- Font Awesome search icon as an example -->
<NoteIcon class="filter-bar__search-icon"></NoteIcon>
<!-- Font Awesome search icon as an example -->
</div>
<pill-radio-buttons
:selectableItems="languageOptions"
:defaultSelectedItem="initialLanguage"
class="filter-bar__language-selection"
@update:selectedItem="item => selectedLanguage = item"/>
:selectableItems="languageOptions"
:defaultSelectedItem="initialLanguage"
class="filter-bar__language-selection"
@update:selectedItem="(item) => (selectedLanguage = item)"
/>
</div>
</template>
<script setup lang="ts">
import debounce from 'lodash/debounce';
import { ref, watchEffect } from 'vue';
import NoteIcon from "@/components/icons/NoteIcon.vue";
import PillRadioButtons from "@/components/ui/PillRadioButtons.vue";
import NoteIcon from '@/components/icons/NoteIcon.vue';
import PillRadioButtons from '@/components/ui/PillRadioButtons.vue';
const props = defineProps({
searchText: {
type: String,
default: ''
}
default: '',
},
});
const emit = defineEmits(['filter']);
const languageOptions: Array<{ id: number, label: string }> = ref([
{id: 1, label: 'De'},
{id: 2, label: 'Fr'},
{id: 3, label: 'En'}
])
const initialLanguage = languageOptions.value[0]
const languageOptions: Array<{ id: number; label: string }> = ref([
{ id: 1, label: 'De' },
{ id: 2, label: 'Fr' },
{ id: 3, label: 'En' },
]);
const initialLanguage = languageOptions.value[0];
const searchText = ref(props.searchText);
@ -52,32 +54,20 @@ const updateSearchText = (searchText: string) => {
emit('filter', searchText);
};
// Apply debounce to the input event handler
const debouncedUpdate = debounce((event: Event) => {
const inputElement = event.target as HTMLInputElement;
updateSearchText(inputElement.value);
}, 200);
// Debounce function
function debounce(func: Function, delay: number): Function {
let timeoutId: number | null = null;
return (...args: any[]) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func(...args);
}, delay);
};
}
</script>
<style scoped lang="scss">
@import 'styles/helpers';
<style scoped lang="scss">
@import 'styles/helpers';
.filter-bar{
display: flex;
margin-bottom: $medium-spacing;
.filter-bar {
display: flex;
margin-bottom: $large-spacing;
&__input-wrapper {
&__input-wrapper {
position: relative;
width: 400px;
max-width: 500px;
@ -86,7 +76,6 @@ function debounce(func: Function, delay: number): Function {
&__search-input {
width: 100%;
padding: 1rem;
padding-left: 2.5rem; // Adjusted padding to account for the icon
border-radius: $input-border-radius;
border: 1px solid $color-silver;
font-size: 1rem;
@ -94,17 +83,15 @@ function debounce(func: Function, delay: number): Function {
&__search-icon {
position: absolute;
right: 1rem; // Positioning the icon to the left
right: 1rem;
top: 50%;
transform: translateY(-50%); // Vertically centering the icon
font-size: 1rem; // Adjust as needed
color: $color-silver; // Adjust as needed
transform: translateY(-50%);
font-size: 1rem;
color: $color-silver;
}
&__language-selection {
margin-left: auto;
}
&__language-selection {
margin-left: auto;
}
/* You can add styles specific to this component here */
}
</style>