Resolve "Add overall reset Button for filters"

see #17 and https://gitlab.die-linke.de/die-linke-app/die-linke-app-frontend/-/issues/17#note_823

Changes in CollapsibleFilters.vue:

1. Import Statement:

   -import { QBadge, QIcon, QSlideTransition } from 'quasar'
   +import { QBtn, QBadge, QIcon, QSlideTransition } from 'quasar'

   • The QBtn component from Quasar framework is added to the import statement.

2. Template:

   -      <div
   +      <QBtn
           v-show="isFilterActive"
           class="reset"
           @click.stop="emit('onResetClick')"
   +        flat
   +        rounded
   +        size="md"
   +        no-caps
   -      >
   -        <QIcon class="reset-icon" :name="ionRefresh" />
   -        <span class="reset-text">Alles zurückstellen</span>
   -      </div>
   +      >
   +        <QIcon left :name="ionRefresh" class="q-mr-sm reset-icon" />
   +        <div class="text-center">Reset</div>
   +      </QBtn>

   • The <div> element with reset functionality is replaced with a <QBtn> component (QBtn from Quasar framework).
   • Attributes (flat, rounded, size, no-caps) are added to the QBtn component for styling and behavior.

3. CSS:

   -  .reset-text {
   -    vertical-align: middle;
   -  }

   • The .reset-text CSS class is removed. This class was previously used for styling within the removed <div> element.

Changes in FilterInput.vue:

1. Script Section:

   -import { ionChevronDown, ionRefresh } from '@quasar/extras/ionicons-v5'
   +import { ionChevronDown, ionClose } from '@quasar/extras/ionicons-v5'

   • The ionRefresh icon is replaced with ionClose in the import statement.

2. Template:

   -    :clearIcon="ionRefresh"
   +    :clearIcon="ionClose"

   • The :clearIcon attribute of QSelect component is updated to use ionClose instead of ionRefresh.

Summary:

• CollapsibleFilters.vue:

  • Introduced a new QBtn component for reset functionality, replacing a <div>.
  • Updated CSS related to the removed <div>.

• FilterInput.vue:

  • Updated import and usage of icons (ionRefresh to ionClose) in the QSelect component.

These changes reflect updates in component structure, functionality (especially related to reset actions), and icon usage within the application, likely improving consistency and UI/UX behavior based on the Quasar framework.