add knowledge sort

src/lib/helpers/types/knowledgeTypes.js

@@ -25,6 +25,7 @@
  * @property {boolean} [with_vector] - Include vector or not.
  * @property {string[]} [fields] - Included payload fields.
  * @property {VectorFilterGroup[]} [filter_groups] - Search filter groups.
+ * @property {VectorSort?} [order_by] - Sort by.
  */
 
 /**
@@ -33,6 +34,12 @@
  * @property {{ key: string, value: string }[]} [filters] - Search filters.
  */
 
+/**
+ * @typedef {Object} VectorSort
+ * @property {string?} [field] - The sort field.
+ * @property {string?} [order] - The sort order.
+ */
+
 /**
  * @typedef {Object} KnowledgeSearchViewModel
  * @property {string} id - The knowledge data id.

src/lib/scss/custom/pages/_knowledgebase.scss

@@ -420,6 +420,24 @@
             }
         }
     }
+
+    .operator-container {
+        margin-top: 20px;
+
+        .operator-item {
+            display: flex;
+
+            @media (max-width: 420px) {
+                flex-direction: column;
+                gap: 10px !important;
+                text-align: center;
+            }
+
+            .operator-title {
+                width: 120px;
+            }
+        }
+    }
 }
 
 

src/routes/page/knowledge-base/common/search/advanced-search.svelte

@@ -13,6 +13,12 @@
     /** @type {string} */
     export let operator = 'or';
 
+    /** @type {string} */
+    export let sortOrder = "desc";
+
+    /** @type {string} */
+    export let sortField = '';
+
     /** @type {number} */
     export let maxLength = 1000;
 
@@ -37,6 +43,21 @@
         }
     ];
 
+    const sortDirections = [
+        {
+            id: 'sort-asc',
+            value: 'asc',
+            label: 'ASC',
+            tip: 'Ascending sort.'
+        },
+        {   
+            id: 'sort-desc',
+            value: 'desc',
+            label: 'DESC',
+            tip: 'Descending sort.'
+        }
+    ];
+
     /** @type {HTMLElement} */
     let scrollContainer;
 
@@ -120,13 +141,6 @@
             });
         }
     }
-
-    /**
-     * @param {any} e
-     */
-    function changeLogicalOperator(e) {
-        operator = e.target.value;
-    }
 </script>
 
 
@@ -242,31 +256,77 @@
             {/if}
         </div>
 
-        <div class="mt-2">
-            <div class="d-flex align-items-center gap-5">
-                <span class="fw-bold">Search operator:</span>
-                {#each logicalOperators as op, idx (idx)}
-                    <div class="d-flex align-items-center gap-1">
-                        <Input
-                            type="radio"
-                            id={op.id}
-                            name="searchOperator"
-                            value={op.value}
-                            disabled={disabled}
-                            bind:group={operator}
-                            on:change={e => changeLogicalOperator(e)}
-                        />
-                        <label for={op.id} class="mb-0 d-flex gap-1">
-                            <span>{op.label}</span>
-                            <span class="line-align-center" id={`tooltip-${op.id}`}>
-                                <i class="bx bx-info-circle" />
-                            </span>
-                            <Tooltip target={`tooltip-${op.id}`} placement="top" class="operator-tooltip">
-                                <div>{op.tip}</div>
-                            </Tooltip>
-                        </label>
-                    </div>
-                {/each}
+        <div class="operator-container">
+            <div class="operator-item align-items-center gap-5">
+                <div class="fw-bold operator-title">Search operator:</div>
+                <div class="d-flex align-items-center gap-5">
+                    {#each logicalOperators as op, idx (idx)}
+                        <div class="d-flex align-items-center gap-1">
+                            <Input
+                                type="radio"
+                                id={op.id}
+                                name="searchOperator"
+                                value={op.value}
+                                disabled={disabled}
+                                bind:group={operator}
+                            />
+                            <label for={op.id} class="mb-0 d-flex gap-1">
+                                <span>{op.label}</span>
+                                {#if op.tip}
+                                <span class="line-align-center" id={`tooltip-${op.id}`}>
+                                    <i class="bx bx-info-circle" />
+                                </span>
+                                <Tooltip target={`tooltip-${op.id}`} placement="top" class="operator-tooltip">
+                                    <div>{op.tip}</div>
+                                </Tooltip>
+                                {/if}
+                            </label>
+                        </div>
+                    {/each}
+                </div>
+            </div>
+        </div>
+
+        <div class="operator-container">
+            <div class="operator-item align-items-center gap-5">
+                <div class="fw-bold operator-title">Sort by field:</div>
+                <div>
+                    <Input
+                        type="text"
+                        name="searchSortField"
+                        bind:value={sortField}
+                        disabled={disabled}
+                        maxlength={maxLength}
+                    />
+                </div>
+            </div>
+            <div class="operator-item align-items-center gap-5">
+                <div class="operator-title"></div>
+                <div class="d-flex align-items-center gap-5" style="margin-top: 5px;">
+                    {#each sortDirections as op, idx (idx)}
+                        <div class="d-flex align-items-center gap-1">
+                            <Input
+                                type="radio"
+                                id={op.id}
+                                name="searchSort"
+                                value={op.value}
+                                disabled={disabled}
+                                bind:group={sortOrder}
+                            />
+                            <label for={op.id} class="mb-0 d-flex gap-1">
+                                <span>{op.label}</span>
+                                {#if op.tip}
+                                <span class="line-align-center" id={`tooltip-${op.id}`}>
+                                    <i class="bx bx-info-circle" />
+                                </span>
+                                <Tooltip target={`tooltip-${op.id}`} placement="top" class="operator-tooltip">
+                                    <div>{op.tip}</div>
+                                </Tooltip>
+                                {/if}
+                            </label>
+                        </div>
+                    {/each}
+                </div>
             </div>
         </div>
     {/if}

src/routes/page/knowledge-base/documents/+page.svelte

@@ -48,14 +48,6 @@
 	const step = 0.1;
 	const enableVector = true;
 	const collectionType = KnowledgeCollectionType.Document;
-	const includedPayloads = [
-		KnowledgePayloadName.Text,
-		KnowledgePayloadName.FileId,
-		KnowledgePayloadName.FileName,
-		KnowledgePayloadName.DataSource,
-		KnowledgePayloadName.FileSource,
-		KnowledgePayloadName.FileUrl
-	];
 
 	/** @type {string} */
 	let text = "";
@@ -91,6 +83,14 @@
 	/** @type {import('$knowledgeTypes').VectorFilterGroup[]} */
 	let innerSearchGroups = [];
 
+	let sortField = '';
+	let sortOrder = 'desc';
+	/** @type {import('$knowledgeTypes').VectorSort?} */
+	let innerSort = {
+		field: '',
+		order: 'desc'
+	};
+
 	/** @type {boolean} */
     let showDemo = true;
     let isSearching = false;
@@ -114,15 +114,17 @@
 	 * isReset: boolean,
 	 * isLocalLoading: boolean,
 	 * skipLoader: boolean,
-	 * filterGroups: any[]
+	 * filterGroups: any[],
+	 * sort: any
 	 * }}
 	*/
 	const defaultParams = {
 		startId: null,
 		isReset: false,
 		isLocalLoading: false,
 		skipLoader: false,
-		filterGroups: []
+		filterGroups: [],
+		sort: null
 	};
 
     $: disabled = isLoading || isLoadingMore || isSearching;
@@ -149,7 +151,8 @@
 				...defaultParams,
 				isReset: true,
 				skipLoader: true,
-				filterGroups: innerSearchGroups
+				filterGroups: innerSearchGroups,
+				sort: null
 			}).finally(() => isLoading = false);
 		}).finally(() => {
 			isLoading = false;
@@ -173,13 +176,15 @@
 		isFromSearch = false;
 
 		innerSearchGroups = buildSearchFilterGroups(searchItems);
+		innerSort = buildSearchSort(sortField, sortOrder);
 
 		if (textSearch) {
 			getData({
 				...defaultParams,
 				isReset: true,
 				skipLoader: true,
-				filterGroups: innerSearchGroups
+				filterGroups: innerSearchGroups,
+				sort: innerSort
 			}).then(() => {
 				isFromSearch = true;
 			}).finally(() => {
@@ -226,7 +231,8 @@
 			startId: null,
 			isReset: true,
 			skipLoader: skipLoader,
-			filterGroups: innerSearchGroups
+			filterGroups: innerSearchGroups,
+			sort: innerSort
 		});
 	}
 
@@ -249,6 +255,12 @@
 		textSearch = false;
 		selectedOperator = 'or';
 		innerSearchGroups = [];
+		sortField = '';
+		sortOrder = 'desc';
+		innerSort = {
+			field: sortField,
+			order: sortOrder
+		};
 	}
 
 
@@ -316,20 +328,23 @@
 	 * @param {{
 	 * startId: string | null,
 	 * isReset: boolean,
-	 * filterGroups: any[] }} params
+	 * filterGroups: any[],
+	 * sort: any }} params
 	 */
 	function getKnowledgeListData(params = {
 		startId: null,
 		isReset: false,
-		filterGroups: []
+		filterGroups: [],
+		sort: null
 	}) {
 		return new Promise((resolve, reject) => {
 			const filter = {
 				size: pageSize,
 				start_id: params.startId,
 				with_vector: enableVector,
 				fields: [],
-				filter_groups: params.filterGroups
+				filter_groups: params.filterGroups,
+				order_by: !!params.sort?.field ? params.sort : null
 			};
 
 			getVectorKnowledgePageList(
@@ -358,14 +373,16 @@
 	 * isReset: boolean,
 	 * isLocalLoading: boolean,
 	 * skipLoader: boolean,
-	 * filterGroups: any[] }} params
+	 * filterGroups: any[],
+	 * sort: any }} params
 	 */
 	function getData(params = {
 		startId: null,
 		isReset: false,
 		isLocalLoading: false,
 		skipLoader: false,
-		filterGroups: []
+		filterGroups: [],
+		sort: null
 	}) {
 		return new Promise((resolve, reject) => {
 			if (!params.skipLoader) {
@@ -404,7 +421,8 @@
 			...defaultParams,
 			startId: nextId || null,
 			isLocalLoading: true,
-			filterGroups: innerSearchGroups
+			filterGroups: innerSearchGroups,
+			sort: innerSort
 		};
 		getData(params);
 	}
@@ -713,11 +731,25 @@
 		if (isAdvSearchOn && items?.length > 0) {
 			const validItems = items.filter(x => x.checked && !!util.trim(x.key) && !!util.trim(x.value))
 									.map(x => ({ key: util.trim(x.key), value: util.trim(x.value) }));
-			groups = [ ...groups, { filter_operator: selectedOperator, filters: validItems } ];
+
+			if (validItems.length > 0) {
+				groups = [ ...groups, { filter_operator: selectedOperator, filters: validItems } ];
+			}
 		}
 
 		return groups;
 	}
+
+	/**
+	 *  @param {string} field
+	 *  @param {string} order
+	 */
+	function buildSearchSort(field, order) {
+		return isAdvSearchOn ? {
+			field: field,
+			order: order
+		} : null;
+	}
 </script>
 
 <HeadTitle title="{$_('Document Knowledge')}" />
@@ -889,6 +921,8 @@
 						bind:showAdvSearch={isAdvSearchOn}
 						bind:items={searchItems}
 						bind:operator={selectedOperator}
+						bind:sortField={sortField}
+						bind:sortOrder={sortOrder}
 						disabled={disabled}
 					/>