feat: add sort button to colleagues list card view

Signed-off-by: Alexander Trost <[email protected]>
fivenet-app · Dec 22, 2024 · be74163 · be74163
1 parent 0858265
commit be74163
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 9 deletions.
diff --git a/app/components/citizens/info/CitizenActivityFeed.vue b/app/components/citizens/info/CitizenActivityFeed.vue
@@ -88,7 +88,7 @@ watch(offset, async () => refresh());
 
                 <SortButton
                     v-model="sort"
-                    :fields="[{ label: 'common.created_at', value: 'createdAt' }]"
+                    :fields="[{ label: $t('common.created_at'), value: 'createdAt' }]"
                     class="flex-initial"
                 />
             </div>

diff --git a/app/components/documents/DocumentList.vue b/app/components/documents/DocumentList.vue
@@ -335,8 +335,8 @@ defineShortcuts({
                             <SortButton
                                 v-model="sort"
                                 :fields="[
-                                    { label: 'common.created_at', value: 'createdAt' },
-                                    { label: 'common.title', value: 'title' },
+                                    { label: $t('common.created_at'), value: 'createdAt' },
+                                    { label: $t('common.title'), value: 'title' },
                                 ]"
                             />
                         </UFormGroup>

diff --git a/app/components/jobs/colleagues/ColleaguesList.vue b/app/components/jobs/colleagues/ColleaguesList.vue
@@ -8,6 +8,7 @@ import ProfilePictureImg from '~/components/partials/citizens/ProfilePictureImg.
 import DataErrorBlock from '~/components/partials/data/DataErrorBlock.vue';
 import GenericTime from '~/components/partials/elements/GenericTime.vue';
 import Pagination from '~/components/partials/Pagination.vue';
+import SortButton from '~/components/partials/SortButton.vue';
 import { useSettingsStore } from '~/store/settings';
 import type { Label } from '~~/gen/ts/resources/jobs/labels';
 import type { Timestamp } from '~~/gen/ts/resources/timestamp/timestamp';
@@ -215,6 +216,16 @@ defineShortcuts({
                     </div>
                 </UFormGroup>
 
+                <UFormGroup v-if="jobsService.cardView" :label="$t('common.sort_by')">
+                    <SortButton
+                        v-model="sort"
+                        :fields="[
+                            { label: $t('common.rank'), value: 'rank' },
+                            { label: $t('common.name'), value: 'name' },
+                        ]"
+                    />
+                </UFormGroup>
+
                 <UFormGroup label="&nbsp">
                     <UButtonGroup>
                         <UButton

diff --git a/app/components/jobs/colleagues/info/ColleagueActivityFeed.vue b/app/components/jobs/colleagues/info/ColleagueActivityFeed.vue
@@ -179,7 +179,7 @@ watchDebounced(query, async () => refresh(), {
             </UFormGroup>
 
             <UFormGroup label="&nbsp;">
-                <SortButton v-model="sort" :fields="[{ label: 'common.created_at', value: 'createdAt' }]" />
+                <SortButton v-model="sort" :fields="[{ label: $t('common.created_at'), value: 'createdAt' }]" />
             </UFormGroup>
         </UForm>
     </UDashboardToolbar>

diff --git a/app/components/partials/SortButton.vue b/app/components/partials/SortButton.vue
@@ -51,11 +51,13 @@ function changeColumn(col: string): void {
                 @update:model-value="changeColumn($event)"
             >
                 <template #label>
-                    {{ $t(fields.find((f) => f.value === sort.column)?.label ?? 'common.na') }}
+                    {{ fields.find((f) => f.value === sort.column)?.label ?? $t('common.na') }}
                 </template>
+
                 <template #option="{ option: field }">
-                    {{ $t(field.label) }}
+                    {{ field.label }}
                 </template>
+
                 <template #empty> {{ $t('common.not_found', [$t('common.field', 2)]) }} </template>
             </USelectMenu>
         </ClientOnly>

diff --git a/app/components/qualifications/QualificationsList.vue b/app/components/qualifications/QualificationsList.vue
@@ -56,7 +56,7 @@ watch(offset, async () => refresh());
                     {{ $t('components.qualifications.all_qualifications') }}
                 </h3>
 
-                <SortButton v-model="sort" :fields="[{ label: 'common.id', value: 'id' }]" />
+                <SortButton v-model="sort" :fields="[{ label: $t('common.id'), value: 'id' }]" />
             </div>
         </template>
 

diff --git a/app/components/qualifications/QualificationsRequestsList.vue b/app/components/qualifications/QualificationsRequestsList.vue
@@ -74,7 +74,7 @@ watch(offset, async () => refresh());
                     {{ $t('components.qualifications.user_requests') }}
                 </h3>
 
-                <SortButton v-model="sort" :fields="[{ label: 'common.id', value: 'id' }]" />
+                <SortButton v-model="sort" :fields="[{ label: $t('common.id'), value: 'id' }]" />
             </div>
         </template>
 

diff --git a/app/components/qualifications/QualificationsResultsList.vue b/app/components/qualifications/QualificationsResultsList.vue
@@ -81,7 +81,7 @@ watch(offset, async () => refresh());
                     {{ $t('common.qualification', 2) }}
                 </h3>
 
-                <SortButton v-model="sort" :fields="[{ label: 'common.id', value: 'id' }]" />
+                <SortButton v-model="sort" :fields="[{ label: $t('common.id'), value: 'id' }]" />
             </div>
         </template>