fix: proper criminal profiles data fetch

BubbleDK · Sep 1, 2024 · 86869ff · 86869ff
1 parent 49a7bab
commit 86869ff
Show file tree

Hide file tree

Showing 8 changed files with 141 additions and 226 deletions.
diff --git a/server/db.lua b/server/db.lua
@@ -271,8 +271,8 @@ function db.getOfficers()
     return framework.getOfficers()
 end
 
-function db.searchCharacters()
-    return framework.getCharacters()
+function db.searchCharacters(search)
+    return utils.dbSearch(framework.getCharacters, search)
 end
 
 -- Reports

diff --git a/server/framework/qb_core.lua b/server/framework/qb_core.lua
@@ -575,8 +575,22 @@ local selectCharacters = [[
         players
 ]]
 
-function qb.getCharacters()
-    local queryResult = MySQL.rawExecute.await(selectCharacters)
+local selectCharactersFilter = [[
+    WHERE 
+        players.citizenid LIKE ?
+        OR CONCAT(
+            JSON_UNQUOTE(JSON_EXTRACT(players.charinfo, '$.firstname')),
+            ' ',
+            JSON_UNQUOTE(JSON_EXTRACT(players.charinfo, '$.lastname'))
+        ) LIKE ?
+]]
+
+function qb.getCharacters(parameters, filter)
+    local searchInput = parameters[1]
+    local params = { "%" .. searchInput .. "%", "%" .. searchInput .. "%" }
+    local query = filter and selectCharactersFilter or selectCharacters
+
+    local queryResult = MySQL.rawExecute.await(query, params)
     local characters = {}
 
     for _, v in pairs(queryResult) do

diff --git a/server/framework/qbx_core.lua b/server/framework/qbx_core.lua
@@ -584,8 +584,24 @@ local selectCharacters = [[
         players
 ]]
 
-function qbx.getCharacters()
-    local queryResult = MySQL.rawExecute.await(selectCharacters)
+local selectCharactersFilter = selectCharacters .. [[
+    WHERE 
+        players.citizenid LIKE ?
+        OR CONCAT(
+            JSON_UNQUOTE(JSON_EXTRACT(players.charinfo, '$.firstname')),
+            ' ',
+            JSON_UNQUOTE(JSON_EXTRACT(players.charinfo, '$.lastname'))
+        ) LIKE ?
+    GROUP BY
+        players.citizenid
+]]
+
+function qbx.getCharacters(parameters, filter)
+    local searchInput = parameters[1]
+    local params = { "%" .. searchInput .. "%", "%" .. searchInput .. "%" }
+    local query = filter and selectCharactersFilter or selectCharacters
+
+    local queryResult = MySQL.rawExecute.await(query, params)
     local characters = {}
 
     for _, v in pairs(queryResult) do

diff --git a/server/main.lua b/server/main.lua
@@ -132,8 +132,8 @@ utils.registerCallback('mdt:removeCriminal', function(source, data)
     return db.removeCriminal(data.id, data.criminalId)
 end)
 
-utils.registerCallback('mdt:getCriminalProfiles', function(source)
-    return db.searchCharacters()
+utils.registerCallback('mdt:getCriminalProfiles', function(source, search)
+    return db.searchCharacters(search)
 end)
 
 utils.registerCallback('mdt:saveCriminal', function(source, data)

diff --git a/web/build/assets/index-50c93c57.js → web/build/assets/index-7a83f83b.js b/web/build/assets/index-50c93c57.js → web/build/assets/index-7a83f83b.js
diff --git a/web/build/index.html b/web/build/index.html
@@ -14,7 +14,7 @@
 			href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css"
 		/>
 		<title>Bubble MDT</title>
-		<script type="module" crossorigin src="./assets/index-50c93c57.js"></script>
+		<script type="module" crossorigin src="./assets/index-7a83f83b.js"></script>
 		<link rel="stylesheet" href="./assets/index-eeb3b938.css">
 	</head>
 	<body>

diff --git a/web/src/layers/mdt/components/Incidents/components/modals/AddCriminalModal.tsx b/web/src/layers/mdt/components/Incidents/components/modals/AddCriminalModal.tsx
@@ -4,7 +4,6 @@ import { modals } from "@mantine/modals";
 import { IconSearch, IconUserX } from "@tabler/icons-react";
 import useIncidentStore from "../../../../../../stores/incidents/incident";
 import useCriminalProfileStore from "../../../../../../stores/incidents/addCriminal";
-import { shuffleArray } from "../../../../../../helpers/shuffleArray";
 import { CriminalProfile } from "../../../../../../typings";
 import { fetchNui } from "../../../../../../utils/fetchNui";
 import locales from "../../../../../../locales";
@@ -13,7 +12,6 @@ const AddCriminalModal: React.FC = () => {
 	const { incident, setCriminals } = useIncidentStore();
 	const [searchQuery, setSearchQuery] = useState("");
 	const { criminalProfiles, getCriminalProfiles } = useCriminalProfileStore();
-	const [filteredProfiles, setFilteredProfiles] = useState(criminalProfiles);
 	const DEBOUNCE_DELAY = 500;
 	const [debouncedSearchQuery, setDebouncedSearchQuery] = useState(searchQuery);
 	const [isLoading, setIsLoading] = useState(false);
@@ -39,34 +37,8 @@ const AddCriminalModal: React.FC = () => {
 	}, [searchQuery]);
 
 	useEffect(() => {
-		if (debouncedSearchQuery.trim() === "") {
-			setFilteredProfiles(shuffleArray([...criminalProfiles]).slice(0, 5));
-		} else {
-			const results = criminalProfiles.filter(
-				(profile) =>
-					(profile.citizenid || "")
-						.toLowerCase()
-						.includes(searchQuery.toLowerCase()) ||
-					(profile.firstname || "")
-						.toLowerCase()
-						.includes(searchQuery.toLowerCase()) ||
-					(profile.lastname || "")
-						.toLowerCase()
-						.includes(searchQuery.toLowerCase()) ||
-					(profile.firstname + " " + profile.lastname || "")
-						.toLowerCase()
-						.includes(searchQuery.toLowerCase())
-			);
-			setFilteredProfiles(results);
-		}
-	}, [debouncedSearchQuery, criminalProfiles]);
-
-	useEffect(() => {
-		const fetchData = async () => {
-			await getCriminalProfiles();
-		};
-		fetchData();
-	}, []);
+		getCriminalProfiles(debouncedSearchQuery);
+	}, [debouncedSearchQuery]);
 
 	const handleSubmit = async (profile: CriminalProfile) => {
 		await fetchNui(
@@ -98,64 +70,61 @@ const AddCriminalModal: React.FC = () => {
 	};
 
 	return (
-		<form>
-			<Stack>
-				<Input
-					icon={<IconSearch />}
-					variant='filled'
-					placeholder={locales.search}
-					mt={10}
-					mb={10}
-					value={searchQuery}
-					onChange={(e) => setSearchQuery(e.target.value)}
-				/>
-
-				{isLoading ? (
-					<Center>
-						<Loader />
-					</Center>
-				) : filteredProfiles.length > 0 ? (
-					filteredProfiles.map((profile) => (
-						<div
-							className='profile-card'
-							onClick={() => handleSubmit(profile)}
-							key={profile.citizenid}
-						>
-							<Image
-								width={65}
-								height={65}
-								src={
-									profile.image ??
-									"https://cdn.vectorstock.com/i/preview-1x/97/68/account-avatar-dark-mode-glyph-ui-icon-vector-44429768.jpg"
-								}
-								radius={"lg"}
-								alt='With default placeholder'
-								withPlaceholder
-							/>
+		<Stack>
+			<Input
+				icon={<IconSearch />}
+				variant='filled'
+				placeholder={locales.search}
+				mt={10}
+				mb={10}
+				value={searchQuery}
+				onChange={(e) => setSearchQuery(e.target.value)}
+			/>
+			{isLoading ? (
+				<Center>
+					<Loader />
+				</Center>
+			) : criminalProfiles.length > 0 ? (
+				criminalProfiles.map((profile) => (
+					<div
+						className='profile-card'
+						onClick={() => handleSubmit(profile)}
+						key={profile.citizenid}
+					>
+						<Image
+							width={65}
+							height={65}
+							src={
+								profile.image ??
+								"https://cdn.vectorstock.com/i/preview-1x/97/68/account-avatar-dark-mode-glyph-ui-icon-vector-44429768.jpg"
+							}
+							radius={"lg"}
+							alt='With default placeholder'
+							withPlaceholder
+						/>
 
-							<div>
-								<Text weight={600} style={{ fontSize: 13, color: "white" }}>
-									{profile.firstname} {profile.lastname}
-								</Text>
+						<div>
+							<Text weight={600} style={{ fontSize: 13, color: "white" }}>
+								{profile.firstname} {profile.lastname}
+							</Text>
 
-								<Text style={{ fontSize: 12, color: "white" }}>
-									{locales.dob}: {profile.dob}
-								</Text>
+							<Text style={{ fontSize: 12, color: "white" }}>
+								{locales.dob}: {profile.dob}
+							</Text>
 
-								<Text style={{ fontSize: 12, color: "white" }}>
-									{locales.citizen_id}: {profile.citizenid}
-								</Text>
-							</div>
+							<Text style={{ fontSize: 12, color: "white" }}>
+								{locales.citizen_id}: {profile.citizenid}
+							</Text>
 						</div>
-					))
-				) : (
-					<Stack spacing={0} c='dark.2' justify='center' align='center'>
-						<IconUserX size={36} />
-						<Text size='xl'>{locales.no_profiles_found}</Text>
-					</Stack>
-				)}
-			</Stack>
-		</form>
+					</div>
+				))
+			) : (
+				<Stack spacing={0} c='dark.2' justify='center' align='center'>
+					<IconUserX size={36} />
+					<Text size='xl'>{locales.no_profiles_found}</Text>
+				</Stack>
+			)}
+		</Stack>
 	);
 };
 

diff --git a/web/src/stores/incidents/addCriminal.ts b/web/src/stores/incidents/addCriminal.ts
@@ -5,7 +5,7 @@ import { isEnvBrowser } from "../../utils/misc";
 
 interface CriminalProfileStoreState {
 	criminalProfiles: CriminalProfile[];
-	getCriminalProfiles: () => void;
+	getCriminalProfiles: (value: string) => void;
 	setCriminalProfiles: (criminalProfiles: CriminalProfile[]) => void;
 }
 
@@ -24,98 +24,14 @@ const DEBUG_CRIMINALPROFILES: CriminalProfile[] = [
 		dob: Date.now(),
 		citizenid: "24680",
 	},
-	{
-		firstname: "Robert",
-		lastname: "Garcia",
-		dob: Date.now(),
-		citizenid: "97531",
-	},
-	{
-		firstname: "Emily",
-		lastname: "Brown",
-		dob: Date.now(),
-		citizenid: "11223",
-	},
-	{
-		firstname: "Michael",
-		lastname: "Davis",
-		dob: Date.now(),
-		citizenid: "33445",
-	},
-	{
-		firstname: "Sarah",
-		lastname: "Wilson",
-		dob: Date.now(),
-		citizenid: "55667",
-	},
-	{
-		firstname: "James",
-		lastname: "Taylor",
-		dob: Date.now(),
-		citizenid: "77889",
-	},
-	{
-		firstname: "Laura",
-		lastname: "Moore",
-		dob: Date.now(),
-		citizenid: "99001",
-	},
-	{
-		firstname: "Kevin",
-		lastname: "Martin",
-		dob: Date.now(),
-		citizenid: "12321",
-	},
-	{
-		firstname: "Jessica",
-		lastname: "Lee",
-		dob: Date.now(),
-		citizenid: "34543",
-	},
-	{
-		firstname: "Daniel",
-		lastname: "Perez",
-		dob: Date.now(),
-		citizenid: "56765",
-	},
-	{
-		firstname: "Nancy",
-		lastname: "White",
-		dob: Date.now(),
-		citizenid: "78987",
-	},
-	{
-		firstname: "Steven",
-		lastname: "Harris",
-		dob: Date.now(),
-		citizenid: "90109",
-	},
-	{ firstname: "Lisa", lastname: "Clark", dob: Date.now(), citizenid: "12212" },
-	{
-		firstname: "Paul",
-		lastname: "Rodriguez",
-		dob: Date.now(),
-		citizenid: "34434",
-	},
-	{ firstname: "Anna", lastname: "Lewis", dob: Date.now(), citizenid: "56656" },
-	{
-		firstname: "Charles",
-		lastname: "Walker",
-		dob: Date.now(),
-		citizenid: "78878",
-	},
-	{
-		firstname: "Susan",
-		lastname: "Allen",
-		dob: Date.now(),
-		citizenid: "90090",
-	},
 ];
 
 const useCriminalProfileStore = create<CriminalProfileStoreState>((set) => ({
 	criminalProfiles: isEnvBrowser() ? DEBUG_CRIMINALPROFILES : [],
-	getCriminalProfiles: async () => {
-		const criminalProfiles = await fetchNui("getCriminalProfiles", {
+	getCriminalProfiles: async (value: string) => {
+		if (value === "") return set({ criminalProfiles: [] });
+
+		const criminalProfiles = await fetchNui("getCriminalProfiles", value, {
 			data: DEBUG_CRIMINALPROFILES,
 			delay: 300,
 		});