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