Add frontend for sorting

resources/js/components/ui/Th.vue

@@ -0,0 +1,34 @@
+<template>
+    <th @click="$emit('update:model-value')">
+        <div class="flex justify-between items-center">
+            <span v-text="label"></span>
+            <ui-sprite v-if="value.by === column && value.direction === false" src="chevron" class="rotate-180 w-3 h-3 text-primaryfg ml-2">ASC</ui-sprite>
+            <ui-sprite v-if="value.by === column && value.direction === true" src="chevron" class="w-3 h-3 text-primaryfg ml-2">DESC</ui-sprite>
+        </div>
+    </th>
+</template>
+
+<script setup>
+defineEmits(['update:model-value']);
+
+defineProps({
+    column: {
+        type: String,
+        default: () => '',
+    },
+    label: {
+        type: String,
+        default: () => '',
+    },
+    value: {
+        type: Object,
+        default: () => {
+            return {by: '', direction: false};
+        },
+    },
+    sortable: {
+        type: Boolean,
+        default: false,
+    },
+});
+</script>

resources/js/views/form/Participants.vue

@@ -69,7 +69,15 @@
         </page-filter>
         <table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm">
             <thead>
-                <th v-for="column in activeColumns" :key="column.id" v-text="column.name"></th>
+                <ui-th
+                    v-for="column in activeColumns"
+                    :key="column.id"
+                    :column="column.id"
+                    :label="column.name"
+                    :value="getSort"
+                    sortable
+                    @update:model-value="setSort(column.id, {filter: toFilterString(innerFilter)})"
+                ></ui-th>
                 <th></th>
             </thead>
 
@@ -174,6 +182,12 @@ var { meta, data, reload, reloadPage, axios, remove, toFilterString, url, update
 
 const activeColumns = computed(() => meta.value.columns.filter((c) => meta.value.form_meta.active_columns.includes(c.id)));
 
+const getSort = computed(() => innerFilter.value.sort);
+
+async function setSort(column) {
+    innerFilter.value.sort = getSort.value.by === column ? {by: column, direction: !getSort.value.direction} : {by: column, direction: false};
+}
+
 const activeColumnsConfig = computed({
     get: () => meta.value.form_meta.active_columns,
     set: async (v) => {

tests/EndToEnd/Form/ParticipantIndexActionTest.php

@@ -255,6 +255,8 @@ it('test it orders participants by value', function (array $values, array $sorti
 
     sleep(2);
     $response = $this->callFilter('form.participant.index', ['sort' => ['by' => $key, 'direction' => $direction]], ['form' => $form]);
+    $response->assertJsonPath('meta.filter.sort.by', $key);
+    $response->assertJsonPath('meta.filter.sort.direction', $direction);
 
     foreach ($expected as $index => $value) {
         $response->assertJsonPath("data.{$index}.{$key}", $value);