-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
106 lines (104 loc) · 5.56 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Search</title>
<!-- jQuery and jQuery UI for autocomplete and datepicker functionality -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="advanced-search.css">
<script src="advanced-search.js"></script>
<script src="advanced-search-tests.js"></script>
</head>
<body>
<div id="advanced-search-container"></div>
<script>
$(document).ready(function() {
if (window.AdvancedSearch) {
// Custom success and error callbacks
const customSuccessCallback = (message, data) => {
console.log("Custom Success: " + message);
console.log("Data:", data);
// Additional logic to handle the data
};
const customErrorCallback = (message, data) => {
console.error("Custom Error: " + message);
console.error("Error Data:", data);
// Additional logic to handle the error data
};
window.AdvancedSearch.init({
testMode: true, // optional debugger mode, defaults to false
runTests: false, // optional test suite execution, defaults to false
testIds: [1, 7, 14], // optional, if empty or not informed when runTests flag is on will execute the whole test suite
currentEntity: 'User', // optional, if not provided, the first entity found in the array below will be used
searchAPI: '/api/advanced-search/query?filter=', // optional, defaults to /api/advanced-search?filter='
//successCallback: customSuccessCallback, // optional, if not provided, a default success callback will be invoked if the search result in success
//errorCallback: customErrorCallback, // optional, if not provided, a default success callback will be invoked if the search result in a fail
entities: [
{
"name": "User",
"attributes": {
"id": {"type": "integer", "rules": ["required", "integer"]},
"username": {"type": "string", "rules": ["required", "string", "maxLength: 255"]},
"email": {"type": "string", "rules": ["required", "string", "email", "maxLength: 255"]},
"password": {"type": "string", "rules": ["required", "string", "minLength: 8"]},
"created_at": {"type": "datetime", "rules": ["required", "datetime"]},
"updated_at": {"type": "datetime", "rules": ["datetime"]}
},
"relations": {
"posts": {"type": "hasMany", "model": "Post", "foreignKey": "user_id"}
}
},
{
"name": "Post",
"attributes": {
"id": {"type": "integer", "rules": ["required", "integer"]},
"user_id": {"type": "integer", "rules": ["required", "integer"]},
"title": {"type": "string", "rules": ["required", "string", "maxLength: 255"]},
"content": {"type": "text", "rules": ["required"]},
"created_at": {"type": "datetime", "rules": ["required", "datetime"]},
"updated_at": {"type": "datetime", "rules": ["datetime"]}
},
"relations": {
"user": {"type": "belongsTo", "model": "User", "foreignKey": "user_id"},
"comments": {"type": "hasMany", "model": "Comment", "foreignKey": "post_id"}
}
},
{
"name": "Comment",
"attributes": {
"id": {"type": "integer", "rules": ["required", "integer"]},
"post_id": {"type": "integer", "rules": ["required", "integer"]},
"author": {"type": "string", "rules": ["required", "string", "maxLength: 255"]},
"content": {"type": "text", "rules": ["required"]},
"created_at": {"type": "datetime", "rules": ["required", "datetime"]},
"updated_at": {"type": "datetime", "rules": ["datetime"]}
},
"relations": {
"post": {"type": "belongsTo", "model": "Post", "foreignKey": "post_id"}
}
}
],
advancedSearchContainer: '#advanced-search-container', // optional, use this to customize the container place for the Advanced Search html
// optional, use this to customize the Advanced Search default html, below is the default html just for exemplification
customHTML: `
<div class="search-bar">
<input type="text" id="search-input" placeholder="Search...">
<span id="help-icon">❓</span>
</div>
<div class="button-group">
<button id="search-button" class="action-button">Search</button>
<button id="clear-button" class="action-button">Clear Query</button>
</div>
<div id="help-container">
<p>Help content goes here...</p>
</div>
`
});
}
});
</script>
</body>
</html>