Manage-a-qr-code

src/api/qr-code/history/history-get.tsx

@@ -0,0 +1,115 @@
+import { constructUrl } from "@/api/ApiHelper"
+import axios from "axios"
+
+export interface QrCodeHistoryResponse {
+  QrCodeId: string;
+  Order: string;
+  Timestamp: string;
+  CustomerId: string;
+  OrganizationId: string;
+  EventType: string;
+  Details: { [key: string]: string };
+}
+
+const orderResponse = (response: QrCodeHistoryResponse[]) => {
+  return response.sort((a, b) => a.Order.localeCompare(b.Order))
+}
+
+export const getQrCodeHistory = async (organizationIdentifier: string, qrCodeId: string): Promise<QrCodeHistoryResponse[]> => {
+  try {
+
+    //until the endpoint is implemented, this function will return some dummy data
+    const dummyData = [
+      {
+        "QrCodeId": "leetleet",
+        "Order": "20241223104503-7f424338-b81c-44bf-8706-55ad0aa18e43",
+        "Timestamp": "2024-12-23T11:56:51.6667002+01:00",
+        "CustomerId": "dennis",
+        "OrganizationId": "1337",
+        "EventType": "Lifecycle_Created",
+        "Details": {}
+      },
+      {
+        "QrCodeId": "leetleet",
+        "Order": "20241223105743-b0d55348-5be1-4e10-8964-8b211908fa42",
+        "Timestamp": "2024-12-23T11:57:45.2424182+01:00",
+        "CustomerId": "dennis",
+        "OrganizationId": "1337",
+        "EventType": "Lifecycle_Updated",
+        "Details": {
+          "IncludeMargin": "False",
+          "BackgroundColor": "ffffffff",
+          "ForegroundColor": "ff000000",
+          "ImageHeight": "103"
+        }
+      },
+      {
+        "QrCodeId": "leetleet",
+        "Order": "20241223105903-bab776da-1529-41db-bff6-974480678451",
+        "Timestamp": "2024-12-23T11:59:05.2503756+01:00",
+        "CustomerId": "dennis",
+        "OrganizationId": "1337",
+        "EventType": "Lifecycle_Updated",
+        "Details": {
+          "IncludeMargin": "True",
+          "BackgroundColor": "ffffffff",
+          "ForegroundColor": "ff000000"
+        }
+      },
+      {
+        "QrCodeId": "leetleet",
+        "Order": "20241223105920-28c04793-7ee4-4b20-852d-eba60d6f3694",
+        "Timestamp": "2024-12-23T11:59:21.4292635+01:00",
+        "CustomerId": "dennis",
+        "OrganizationId": "1337",
+        "EventType": "Lifecycle_Updated",
+        "Details": {
+          "IncludeMargin": "False",
+          "BackgroundColor": "ffff0000",
+          "ForegroundColor": "ff000000"
+        }
+      },
+      {
+        "QrCodeId": "leetleet",
+        "Order": "20241223114253-b0b673e6-a0a8-4ffc-9368-07703d5d38da",
+        "Timestamp": "2024-12-23T12:42:54.7255063+01:00",
+        "CustomerId": "dennis",
+        "OrganizationId": "1337",
+        "EventType": "Lifecycle_UpdatedTarget",
+        "Details": {
+          "NewValue": "https://www.dem-it.nl"
+        }
+      },
+      {
+        "QrCodeId": "leetleet",
+        "Order": "20241223114347-0197ba03-e0c5-454a-8a15-abc5d4c9dc69",
+        "Timestamp": "2024-12-23T12:43:49.0726093+01:00",
+        "CustomerId": "dennis",
+        "OrganizationId": "1337",
+        "EventType": "Lifecycle_Updated",
+        "Details": {
+          "IncludeMargin": "False",
+          "BackgroundColor": "ffffffff",
+          "ForegroundColor": "ff000000",
+          "ImageWidth": "103"
+        }
+      }
+    ]
+
+    const responseDataDummy = dummyData as QrCodeHistoryResponse[]
+
+    return orderResponse(responseDataDummy)
+
+    const url = constructUrl(`qr-codes/${qrCodeId}/history`)
+    const response = await axios.get(url, {
+      headers: {
+        "Content-Type": "application/json",
+        "Organization-Identifier": organizationIdentifier
+      }
+    })
+    const responseData = response.data as QrCodeHistoryResponse[]
+    return orderResponse(responseData)
+  } catch (error) {
+    throw error
+  }
+}

src/api/qr-code/qr-code-get.ts

@@ -0,0 +1,27 @@
+import { constructUrl } from "@/api/ApiHelper"
+import axios from "axios"
+
+interface QrCodeGetResponse {
+  IncludeMargin: boolean;
+  BackgroundColor?: string;
+  ForegroundColor?: string;
+  ImageUrl?: string;
+  ImageHeight?: number;
+  ImageWidth?: number;
+}
+
+export const getCode = async (organizationIdentifier: string, qrCodeId: string) : Promise<QrCodeGetResponse> => {
+
+  try {
+    const url = constructUrl(`qr-codes/${qrCodeId}`)
+    const response = await axios.get(url, {
+      headers: {
+        "Content-Type": "application/json",
+        "Organization-Identifier": organizationIdentifier
+      }
+    })
+    return response.data as QrCodeGetResponse
+  } catch (error) {
+    throw error
+  }
+}

src/api/qr-code/qr-code-put.ts

@@ -0,0 +1,26 @@
+import { constructUrl } from "@/api/ApiHelper"
+import axios from "axios"
+
+export interface QrCodePutRequest {
+  IncludeMargin: boolean;
+  BackgroundColor?: string;
+  ForegroundColor?: string;
+  ImageUrl?: string;
+  ImageHeight?: number;
+  ImageWidth?: number;
+}
+
+export const updateQrCode = async (organizationIdentifier: string, qrCodeId: string, data: QrCodePutRequest) => {
+  try {
+    const url = constructUrl(`qr-codes/${qrCodeId}`)
+    const response = await axios.put(url, data, {
+      headers: {
+        "Content-Type": "application/json",
+        "Organization-Identifier": organizationIdentifier
+      }
+    })
+    return response.data
+  } catch (error) {
+    throw error
+  }
+}

src/api/qr-code/qr-code.ts

@@ -1,7 +1,17 @@
+import { constructUrl } from "@/api/ApiHelper"
 import axios from "axios"
-import { constructUrl } from "../ApiHelper"
 
-export const getCode = async (organizationIdentifier: string, qrCodeId: string) => {
+export interface QrCodeGetResponse {
+  Value: string;
+  IncludeMargin: boolean;
+  BackgroundColor?: string;
+  ForegroundColor?: string;
+  ImageUrl?: string;
+  ImageHeight?: number;
+  ImageWidth?: number;
+}
+
+export const getCode = async (organizationIdentifier: string, qrCodeId: string) : Promise<QrCodeGetResponse> => {
 
   try {
     const url = constructUrl(`qr-codes/${qrCodeId}`)
@@ -11,7 +21,8 @@ export const getCode = async (organizationIdentifier: string, qrCodeId: string)
         "Organization-Identifier": organizationIdentifier
       }
     })
-    return response.data
+
+    return response.data as QrCodeGetResponse
   } catch (error) {
     throw error
   }

src/api/qr-code/target/target_put.ts

@@ -0,0 +1,17 @@
+import { constructUrl } from "@/api/ApiHelper"
+import axios from "axios"
+
+export const updateQrCodeTarget = async (organizationIdentifier: string, qrCodeId: string, targetValue: string) => {
+  try {
+    const url = constructUrl(`qr-code-targets/${qrCodeId}`)
+    const response = await axios.put(url, targetValue, {
+      headers: {
+        "Content-Type": "application/json",
+        "Organization-Identifier": organizationIdentifier
+      }
+    })
+    return response.data
+  } catch (error) {
+    throw error
+  }
+}

src/api/qr-codes-get.ts

@@ -0,0 +1,28 @@
+import { constructUrl } from "@/api/ApiHelper"
+import axios from "axios"
+
+export interface QrCodesGetResponse {
+  Id: string;
+  IncludeMargin: boolean;
+  BackgroundColor?: string;
+  ForegroundColor?: string;
+  ImageUrl?: string;
+  ImageHeight?: number;
+  ImageWidth?: number;
+}
+
+export const getCodes = async (organizationIdentifier: string) : Promise<QrCodesGetResponse[]> => {
+
+  try {
+    const url = constructUrl("qr-codes")
+    const response = await axios.get(url, {
+      headers: {
+        "Content-Type": "application/json",
+        "Organization-Identifier": organizationIdentifier
+      }
+    })
+    return response.data as QrCodesGetResponse[]
+  } catch (error) {
+    throw error
+  }
+}

src/api/qr-codes-post.ts

@@ -0,0 +1,20 @@
+import { constructUrl } from "@/api/ApiHelper"
+import axios from "axios"
+
+export const createCode = async (organizationIdentifier: string) => {
+
+  try {
+    const url = constructUrl("qr-codes")
+    const data = {
+    }
+    const response = await axios.post(url, data, {
+      headers: {
+        "Content-Type": "application/json",
+        "Organization-Identifier": organizationIdentifier
+      }
+    })
+    return response.data
+  } catch (error) {
+    throw error
+  }
+}

src/components/generate/GenerateStaticQR.tsx

@@ -1,5 +1,6 @@
+import { QrCodePutRequest, updateQrCode } from "@/api/qr-code/qr-code-put"
 import ColorPickerWithPopover from "@/components/ColorPickerWithPopover"
-import { calculateNewQrCodeId } from "@/utils/calculations/calculateNewQrCodeId"
+import { calculateRandomQrCodeId } from "@/utils/calculations/calculateNewQrCodeId"
 import calculateContrastRatio from "@/utils/colors/calculateContrastRatio"
 import InfoIcon from "@mui/icons-material/Info"
 import { FormControlLabel, Grid, Slider, Stack, Switch, Table, TableBody, TableCell, TableContainer, TableRow, TextField, Typography } from "@mui/material"
@@ -18,9 +19,13 @@ const SlimTableCell = styled(TableCell)(({ theme }) => ({
   paddingRight: "12px"
 }))
 
-const GenerateStaticQr = () => {
+interface GenerateStaticQrProps {
+  id?: string;
+}
+
+const GenerateStaticQr = (props: GenerateStaticQrProps) => {
 
-  const [dynamicQrCodeId] = useState(calculateNewQrCodeId())
+  const [dynamicQrCodeId] = useState(props.id ?? calculateRandomQrCodeId())
   const [value, setValue] = useState("")
   const [includeMargin, setMargin] = useState(false)
   const [backgroundColor, setBackgroundColor] = useState("#ffffff")
@@ -100,6 +105,23 @@ const GenerateStaticQr = () => {
     setContrastRatio(contrast)
   }, [backgroundColor, foregroundColor])
 
+  const handleSaveLayout = async () => {
+    const layoutData : QrCodePutRequest = {
+      IncludeMargin: includeMargin,
+      BackgroundColor: backgroundColor,
+      ForegroundColor: foregroundColor,
+      ImageUrl: imageUrl,
+      ImageHeight: imageHeight,
+      ImageWidth: imageWidth
+    }
+    try {
+      await updateQrCode("your-organization-identifier", dynamicQrCodeId, layoutData)
+      alert("QR code layout updated successfully!")
+    } catch (error) {
+      alert("Failed to update QR code layout.")
+    }
+  }
+
   return <>
     <Grid container spacing={4} sx={{ mt: 0 }}>
       <Grid item xs={12} lg={2} >
@@ -290,6 +312,7 @@ const GenerateStaticQr = () => {
             </TableBody>
           </Table>
         </TableContainer>
+        <button onClick={handleSaveLayout}>Save Layout</button>
       </Grid >
     </Grid >
     {/* TODO: Add a download button to download the qr code */}

src/components/layout/sidebar/MenuItems.tsx

@@ -1,16 +1,27 @@
 import BusinessIcon from "@mui/icons-material/Business"
 import DashboardIcon from "@mui/icons-material/Dashboard"
+import QrCode2Icon from "@mui/icons-material/QrCode2"
 import WalletIcon from "@mui/icons-material/Wallet"
 
 import { uniqueId } from "lodash"
 
 const Menuitems = [
   {
     id: uniqueId(),
-    title: "Dashboard",
+    title: "Home",
     icon: DashboardIcon,
     href: "/auth",
   },
+  {
+    navlabel: true,
+    subheader: "QR codes",
+  },
+  {
+    id: uniqueId(),
+    title: "Overview",
+    icon: QrCode2Icon,
+    href: "/auth/qr-codes",
+  },
   {
     navlabel: true,
     subheader: "Organization stuff",