diff --git a/src/Pages/ProfileList.vue b/src/Pages/ProfileList.vue index d380baaf5e8816aaeef6252d0b84cf42087751a0..44b224707799599e7800b2c22e217880c3a6f6ba 100644 --- a/src/Pages/ProfileList.vue +++ b/src/Pages/ProfileList.vue @@ -1,6 +1,22 @@ <template> <PageHeader :title="t('profileList.title')" /> + <div class="tw-flex tw-gap-6 tw-justify-end tw-items-center tw-mb-6"> + <FormGroup class="tw-m-0"> + <template #iconLeft="attrs"> + <icon-system-uicons-search v-bind="attrs" /> + </template> + <template #default="attrs"> + <input + v-model="searchTerm" + v-bind="attrs" + :aria-label="t('profileList.searchLabel')" + :placeholder="t('profileList.searchPlaceholder')" + /> + </template> + </FormGroup> + </div> + <ATable v-model:page="page" v-model:items-per-page="profilesPerPage" @@ -63,6 +79,7 @@ import PageHeader from '@/components/PageHeader.vue' import { useI18n } from '@/i18n' import AColorBadge from '@/components/generic/AColorBadge.vue' import Image from '@/components/generic/Image.vue' +import FormGroup from '@/components/generic/FormGroup.vue' const { t } = useI18n() const hostStore = useHostStore() diff --git a/src/i18n/de.js b/src/i18n/de.js index 4e5a925bb348370a7b1c2c9339cb1cc79d058f1c..25192165886901a6dd02953a7c191cd157ea9a45 100644 --- a/src/i18n/de.js +++ b/src/i18n/de.js @@ -247,6 +247,8 @@ export default { profileList: { title: 'Profile', + searchLabel: 'Suche nach Namen', + searchPlaceholder: 'Name des Profils...', }, profileDetails: { diff --git a/src/i18n/en.js b/src/i18n/en.js index ff507ee7bdfd0ef193fbc47bb12dde4a6dca5b0c..ec1d7a191b244d5b8f13a2b2d6a06c09fa4ca795 100644 --- a/src/i18n/en.js +++ b/src/i18n/en.js @@ -247,6 +247,8 @@ export default { profileList: { title: 'Profiles', + searchLabel: 'Search by name', + searchPlaceholder: 'Name of the profile...', }, profileDetails: {