feat: add sorting to tables and some backend calls

Signed-off-by: Alexander Trost <[email protected]>

app/components/calendar/entry/EntryCreateOrUpdateModal.vue

@@ -185,7 +185,9 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
                                         async () =>
                                             (
                                                 await calendarStore.listCalendars({
-                                                    pagination: { offset: 0 },
+                                                    pagination: {
+                                                        offset: 0,
+                                                    },
                                                     onlyPublic: false,
                                                     minAccessLevel: AccessLevel.EDIT,
                                                 })

app/components/citizens/CitizensList.vue

@@ -30,21 +30,32 @@ const query = ref<Schema>({});
 const page = ref(1);
 const offset = computed(() => (data.value?.pagination?.pageSize ? data.value?.pagination?.pageSize * (page.value - 1) : 0));
 
+const sort = ref<TableSortable>({
+    column: 'name',
+    direction: 'asc',
+});
+
 const {
     data,
     pending: loading,
     refresh,
     error,
-} = useLazyAsyncData(`citizens-${page.value}-${JSON.stringify(query.value)}`, () => listCitizens(), {
-    transform: (input) => ({ ...input, users: wrapRows(input?.users, columns) }),
-});
+} = useLazyAsyncData(
+    `citizens-${sort.value.column}:${sort.value.direction}-${page.value}-${JSON.stringify(query.value)}`,
+    () => listCitizens(),
+    {
+        transform: (input) => ({ ...input, users: wrapRows(input?.users, columns) }),
+        watch: [sort],
+    },
+);
 
 async function listCitizens(): Promise<ListCitizensResponse> {
     try {
         const req: ListCitizensRequest = {
             pagination: {
                 offset: offset.value,
             },
+            sort: sort.value,
             search: query.value.name ?? '',
         };
         if (query.value.wanted) {
@@ -104,6 +115,7 @@ const columns = [
     {
         key: 'name',
         label: t('common.name'),
+        sortable: true,
     },
     {
         key: 'jobLabel',
@@ -271,10 +283,12 @@ defineShortcuts({
     <DataErrorBlock v-if="error" :title="$t('common.unable_to_load', [$t('common.citizen', 2)])" :retry="refresh" />
     <UTable
         v-else
+        v-model:sort="sort"
         :loading="loading"
         :columns="columns"
         :rows="data?.users"
         :empty-state="{ icon: 'i-mdi-accounts', label: $t('common.not_found', [$t('common.citizen', 2)]) }"
+        sort-mode="manual"
         class="flex-1"
     >
         <template #name-data="{ row: citizen }">

app/components/documents/DocumentList.vue

@@ -50,14 +50,26 @@ const usersLoading = ref(false);
 const page = ref(1);
 const offset = computed(() => (data.value?.pagination?.pageSize ? data.value?.pagination?.pageSize * (page.value - 1) : 0));
 
-const { data, pending: loading, refresh, error } = useLazyAsyncData(`documents-${page.value}`, () => listDocuments());
+const sort = ref<TableSortable>({
+    column: 'createdAt',
+    direction: 'desc',
+});
+
+const {
+    data,
+    pending: loading,
+    refresh,
+    error,
+} = useLazyAsyncData(`documents-${sort.value.column}:${sort.value.direction}-${page.value}`, () => listDocuments(), {
+    watch: [sort],
+});
 
 async function listDocuments(): Promise<ListDocumentsResponse> {
     const req: ListDocumentsRequest = {
         pagination: {
             offset: offset.value,
         },
-        orderBy: [],
+        sort: sort.value,
         search: query.value.title ?? '',
         categoryIds: [],
         creatorIds: [],

app/components/documents/DocumentReferences.vue

@@ -138,6 +138,7 @@ const columns = computed(() =>
                                     icon: 'i-mdi-account',
                                     label: $t('common.not_found', [$t('common.reference', 2)]),
                                 }"
+                                sort-mode="auto"
                             >
                                 <template #targetDocument-data="{ row: reference }">
                                     <ULink

app/components/documents/DocumentRelations.vue

@@ -143,6 +143,7 @@ const columns = computed(() =>
                                     icon: 'i-mdi-account',
                                     label: $t('common.not_found', [$t('common.relation', 2)]),
                                 }"
+                                sort-mode="auto"
                             >
                                 <template v-if="showDocument" #document-data="{ row: relation }">
                                     <ULink

app/components/jobs/colleagues/ColleaguesList.vue

@@ -34,21 +34,32 @@ const query = reactive<Schema>({
 const page = ref(1);
 const offset = computed(() => (data.value?.pagination?.pageSize ? data.value?.pagination?.pageSize * (page.value - 1) : 0));
 
+const sort = ref<TableSortable>({
+    column: 'rank',
+    direction: 'asc',
+});
+
 const {
     data,
     pending: loading,
     refresh,
     error,
-} = useLazyAsyncData(`jobs-colleagues-${page.value}-${query.name}-${query.absent}`, () => listColleagues(), {
-    transform: (input) => ({ ...input, entries: wrapRows(input?.colleagues, columns) }),
-});
+} = useLazyAsyncData(
+    `jobs-colleagues-${sort.value.column}:${sort.value.direction}-${page.value}-${query.name}-${query.absent}`,
+    () => listColleagues(),
+    {
+        transform: (input) => ({ ...input, entries: wrapRows(input?.colleagues, columns) }),
+        watch: [sort],
+    },
+);
 
 async function listColleagues(): Promise<ListColleaguesResponse> {
     try {
         const call = getGRPCJobsClient().listColleagues({
             pagination: {
                 offset: offset.value,
             },
+            sort: sort.value,
             search: query.name,
             absent: query.absent,
         });
@@ -87,12 +98,14 @@ const columns = [
     {
         key: 'name',
         label: t('common.name'),
+        sortable: true,
     },
     {
         key: 'rank',
         label: t('common.rank'),
         class: 'hidden lg:table-cell',
         rowClass: 'hidden lg:table-cell',
+        sortable: true,
     },
     {
         key: 'absence',
@@ -158,10 +171,12 @@ defineShortcuts({
     <DataErrorBlock v-if="error" :title="$t('common.unable_to_load', [$t('common.colleague', 2)])" :retry="refresh" />
     <UTable
         v-else
+        v-model:sort="sort"
         :loading="loading"
         :columns="columns"
         :rows="data?.colleagues"
         :empty-state="{ icon: 'i-mdi-account', label: $t('common.not_found', [$t('common.colleague', 2)]) }"
+        sort-mode="manual"
         class="flex-1"
     >
         <template #name-data="{ row: colleague }">

app/components/jobs/colleagues/SelfServicePropsAbsenceDateModal.vue

@@ -67,7 +67,6 @@ async function setAbsenceDate(values: Schema): Promise<void> {
         });
         const { response } = await call;
 
-        console.log('AbsenceDate', userProps, response.props);
         emit('update:absenceDates', {
             userId: props.userId,
             absenceBegin: response.props?.absenceBegin,

app/components/jobs/colleagues/info/ColleagueActivityFeed.vue

@@ -45,15 +45,24 @@ const query = reactive<Schema>({
 const page = ref(1);
 const offset = computed(() => (data.value?.pagination?.pageSize ? data.value?.pagination?.pageSize * (page.value - 1) : 0));
 
+const sort = ref<TableSortable>({
+    column: 'createdAt',
+    direction: 'desc',
+});
+
 const selectedUsersIds = computed(() => (props.userId !== undefined ? [props.userId] : query.colleagues.map((u) => u.userId)));
 
 const {
     data,
     pending: loading,
     refresh,
     error,
-} = useLazyAsyncData(`jobs-colleague-${page.value}-${selectedUsersIds.value.join(',')}-${query.types.join(':')}`, () =>
-    listColleagueActivity(selectedUsersIds.value, query.types),
+} = useLazyAsyncData(
+    `jobs-colleague-${sort.value.column}:${sort.value.direction}-${page.value}-${selectedUsersIds.value.join(',')}-${query.types.join(':')}`,
+    () => listColleagueActivity(selectedUsersIds.value, query.types),
+    {
+        watch: [sort],
+    },
 );
 
 async function listColleagueActivity(
@@ -62,7 +71,10 @@ async function listColleagueActivity(
 ): Promise<ListColleagueActivityResponse> {
     try {
         const call = getGRPCJobsClient().listColleagueActivity({
-            pagination: { offset: offset.value },
+            pagination: {
+                offset: offset.value
+            },
+            sort: sort.value,
             userIds: userIds,
             activityTypes: activityTypes,
         });

app/components/jobs/conduct/ConductList.vue

@@ -47,16 +47,22 @@ const usersLoading = ref(false);
 const page = ref(1);
 const offset = computed(() => (data.value?.pagination?.pageSize ? data.value?.pagination?.pageSize * (page.value - 1) : 0));
 
+const sort = ref<TableSortable>({
+    column: 'id',
+    direction: 'desc',
+});
+
 const {
     data,
     pending: loading,
     refresh,
     error,
 } = useLazyAsyncData(
-    `jobs-conduct-${page.value}-${query.types.join(',')}-${query.showExpired}-${query.id}`,
+    `jobs-conduct-${sort.value.column}:${sort.value.direction}-${page.value}-${query.types.join(',')}-${query.showExpired}-${query.id}`,
     () => listConductEntries(),
     {
         transform: (input) => ({ ...input, entries: wrapRows(input?.entries, columns) }),
+        watch: [sort],
     },
 );
 
@@ -75,6 +81,7 @@ async function listConductEntries(): Promise<ListConductEntriesResponse> {
             pagination: {
                 offset: offset.value,
             },
+            sort: sort.value,
             types: query.types,
             userIds: userIds,
             showExpired: query.showExpired,
@@ -132,6 +139,7 @@ const columns = [
     {
         key: 'id',
         label: t('common.id'),
+        sortable: true,
     },
     {
         key: 'createdAt',
@@ -146,6 +154,7 @@ const columns = [
     {
         key: 'type',
         label: t('common.type'),
+        sortable: true,
     },
     {
         key: 'message',
@@ -287,10 +296,12 @@ defineShortcuts({
     <DataErrorBlock v-if="error" :title="$t('common.unable_to_load', [$t('common.conduct_register')])" :retry="refresh" />
     <UTable
         v-else
+        v-model:sort="sort"
         :loading="loading"
         :columns="columns"
         :rows="data?.entries"
         :empty-state="{ icon: 'i-mdi-list-status', label: $t('common.not_found', [$t('common.entry', 2)]) }"
+        sort-mode="manual"
         class="flex-1"
     >
         <template #createdAt-data="{ row: conduct }">
@@ -305,22 +316,26 @@ defineShortcuts({
                 </dd>
             </dl>
         </template>
+
         <template #expiresAt-data="{ row: conduct }">
             <GenericTime v-if="conduct.expiresAt?.value" class="font-semibold" type="date" :value="conduct.expiresAt.value" />
             <span v-else>
                 {{ $t('components.jobs.conduct.List.no_expiration') }}
             </span>
         </template>
+
         <template #type-data="{ row: conduct }">
             <UBadge :color="conductTypesToBadgeColor(conduct.type)">
                 {{ $t(`enums.jobs.ConductType.${ConductType[conduct.type ?? 0]}`) }}
             </UBadge>
         </template>
+
         <template #message-data="{ row: conduct }">
             <p class="line-clamp-2 w-full max-w-sm whitespace-normal break-all hover:line-clamp-6">
                 {{ conduct.message }}
             </p>
         </template>
+
         <template #target-data="{ row: conduct }">
             <ColleagueInfoPopover :user="conduct.targetUser" />
             <dl class="font-normal lg:hidden">
@@ -330,9 +345,11 @@ defineShortcuts({
                 </dd>
             </dl>
         </template>
+
         <template #creator-data="{ row: conduct }">
             <ColleagueInfoPopover :user="conduct.creator.value" :hide-props="true" />
         </template>
+
         <template #actions-data="{ row: conduct }">
             <div :key="conduct.id">
                 <UButtonGroup class="inline-flex">

app/components/jobs/timeclock/TimeclockInactiveList.vue

@@ -30,19 +30,31 @@ const state = reactive<Schema>({
 const page = ref(1);
 const offset = computed(() => (data.value?.pagination?.pageSize ? data.value?.pagination?.pageSize * (page.value - 1) : 0));
 
+const sort = ref<TableSortable>({
+    column: 'rank',
+    direction: 'asc',
+});
+
 const {
     data,
     pending: loading,
     refresh,
     error,
-} = useLazyAsyncData(`jobs-timeclock-inactive-${page.value}-${state.days}`, () => listInactiveEmployees(state));
+} = useLazyAsyncData(
+    `jobs-timeclock-inactive-${sort.value.column}:${sort.value.direction}-${page.value}-${state.days}`,
+    () => listInactiveEmployees(state),
+    {
+        watch: [sort],
+    },
+);
 
 async function listInactiveEmployees(values: Schema): Promise<ListInactiveEmployeesResponse> {
     try {
         const call = getGRPCJobsTimeclockClient().listInactiveEmployees({
             pagination: {
                 offset: offset.value,
             },
+            sort: sort.value,
             days: values.days,
         });
 
@@ -71,10 +83,12 @@ const columns = [
     {
         key: 'name',
         label: t('common.name'),
+        sortable: true,
     },
     {
         key: 'rank',
         label: t('common.rank', 1),
+        sortable: true,
     },
     {
         key: 'phoneNumber',
@@ -125,10 +139,12 @@ const columns = [
     <DataErrorBlock v-if="error" :title="$t('common.unable_to_load', [$t('common.colleague', 2)])" :retry="refresh" />
     <UTable
         v-else
+        v-model:sort="sort"
         :loading="loading"
         :columns="columns"
         :rows="data?.colleagues"
         :empty-state="{ icon: 'i-mdi-account', label: $t('common.not_found', [$t('common.colleague', 2)]) }"
+        sort-mode="manual"
         class="flex-1"
     >
         <template #name-data="{ row: colleague }">