Added class props to form

backend/main.go

@@ -43,8 +43,8 @@ func connect() {
 
 	//DEV
 	router.Use(cors.New(cors.Config{
-		AllowOrigins:     []string{"http://localhost"},
-		AllowMethods:     []string{"GET"},
+		AllowOrigins:     []string{"http://localhost:5173"},
+		AllowMethods:     []string{"GET", "POST"},
 		AllowHeaders:     []string{"Origin", "OCBO-ShieldConnection"},
 		ExposeHeaders:    []string{"Content-Length"},
 		AllowCredentials: true,
@@ -121,7 +121,32 @@ func connect() {
 			array := []string{}
 			array2 := []string{}
 
-			results, err := db.Query("SELECT IFNULL(employeeid, '') AS result, IFNULL(employeename, '') AS result2 FROM employee WHERE is_assessment = ? AND is_delete = ? AND employeename NOT LIKE ? AND employeename NOT LIKE ?", 1, 0, "%OFFICE%", "%TEST%")
+			results, err := db.Query("SELECT IFNULL(employeeid, '') AS result, IFNULL(employeename, '') AS result2 FROM employee WHERE is_assessment = ? AND is_delete = ? AND employeename NOT LIKE ? AND employeename NOT LIKE ? AND employeename NOT LIKE ?", 1, 0, "%OFFICE%", "%TEST%", "%SAMPLE%")
+			if err != nil {
+				c.AbortWithError(http.StatusBadRequest, err)
+				c.String(http.StatusBadRequest, err.Error())
+			}
+			for results.Next() {
+				err = results.Scan(&result, &result2)
+				if err != nil {
+					c.AbortWithError(http.StatusBadRequest, err)
+					c.String(http.StatusBadRequest, err.Error())
+				}
+				array = append(array, result)
+				array2 = append(array2, result2)
+			}
+			c.JSON(http.StatusOK, gin.H{
+				"result":  array,
+				"result2": array2,
+			})
+
+		case "get-list-approvers":
+			var result2 string
+
+			array := []string{}
+			array2 := []string{}
+
+			results, err := db.Query("SELECT IFNULL(employeeid, '') AS result, IFNULL(employeename, '') AS result2 FROM employee WHERE is_finalapprover = ? AND is_delete = ? AND NOT (employeename LIKE ? OR employeename LIKE ? OR employeename LIKE ? OR employeename LIKE ? OR employeename LIKE ?)", 1, 0, "%OFFICE%", "%TEST%", "%SAMPLE%", "%BUILDING%", "%OCCUPANCY%")
 			if err != nil {
 				c.AbortWithError(http.StatusBadRequest, err)
 				c.String(http.StatusBadRequest, err.Error())
@@ -284,7 +309,7 @@ func connect() {
 			array := []string{}
 			array2 := []string{}
 
-			results, err := db.Query(`SELECT IFNULL(DATE_FORMAT(b.txndate, '%M %d, %Y')0 '') AS result, REPLACE(b.remarks, 'RECEIVE', 'RECEIVED') AS result2
+			results, err := db.Query(`SELECT IFNULL(DATE_FORMAT(b.txndate, '%M %d, %Y'), '') AS result, IFNULL(REPLACE(b.remarks, 'RECEIVE', 'RECEIVED'), '') AS result2
 									FROM occupancydocflowtxn b, occupancy o WHERE o.occupancyid = b.occupancyreceivingid AND o.controlNo = ? ORDER BY b.occupancydocflowtxnid DESC`, data)
 			if err != nil {
 				c.AbortWithError(http.StatusBadRequest, err)

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ocbo-esign-solid",
+  "name": "ocbo-esign",
   "private": true,
   "version": "0.0.0",
   "type": "module",

src/assets/images/svg/background.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1920"
+   height="1080"
+   viewBox="0 0 1920 1080"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs1" /><g
+     id="layer2"><rect
+       style="display:inline;fill:#16212c;fill-opacity:1;stroke-width:19.525"
+       id="rect1"
+       width="2564.4407"
+       height="1734.7687"
+       x="-313.60806"
+       y="-317.57779" /></g><g
+     id="layer3"><text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:149.314px;font-family:Ballet;-inkscape-font-specification:Ballet;text-align:center;writing-mode:lr-tb;direction:ltr;text-anchor:middle;opacity:0.25;fill:#334c65;fill-opacity:1;stroke-width:10.9326"
+       x="958.40466"
+       y="312.0582"
+       id="text9"><tspan
+         id="tspan9"
+         x="958.40466"
+         y="312.0582"
+         style="fill:#334c65;fill-opacity:1;stroke-width:10.9326">Office of the City Building Officials</tspan></text><text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:242.169px;font-family:Ballet;-inkscape-font-specification:Ballet;text-align:center;writing-mode:lr-tb;direction:ltr;text-anchor:middle;opacity:0.25;fill:#334d66;fill-opacity:1;stroke-width:17.7313"
+       x="966.625"
+       y="777.97443"
+       id="text10"><tspan
+         id="tspan10"
+         x="966.625"
+         y="777.97443"
+         style="fill:#334d66;fill-opacity:1;stroke-width:17.7313">e-Sign Application</tspan></text></g></svg>

src/components/Box/Box.tsx

@@ -6,13 +6,14 @@ interface Props {
   color?: string
   children: JSXElement
   curved?: boolean
+  padding?: number
 }
 
 export default (props: Props) => {
   const boxClass = createMemo(() => (props.curved ? 'curvedbox' : 'box'))
 
   return (
-    <section class={boxClass()} style={{ border: `${props.thickness}px solid ${props.color || 'white'}` }}>
+    <section class={boxClass()} style={`border: ${props.thickness}px solid ${props.color || 'white'}; padding: ${props.padding}rem`}>
       {props.children}
     </section>
   )

src/components/Combobox/Combobox.sass

@@ -0,0 +1,149 @@
+.combobox__control
+  display: inline-flex
+  justify-content: space-between
+  width: 500px
+  border-radius: 6px
+  font-size: 16px
+  line-height: 1
+  outline: none
+  background-color: #16212c96
+  border: 1px solid hsl(240 6% 90%)
+  transition: border-color 250ms, color 250ms
+
+  &[data-invalid]
+    border-color: hsl(0 72% 51%)
+    color: hsl(0 72% 51%)
+
+  &_multi
+    width: 100%
+    min-width: 200px
+    max-width: 300px
+
+.combobox__input
+  appearance: none
+  display: inline-flex
+  min-width: 0
+  min-height: 40px
+  padding-left: 16px
+  font-size: 16px
+  background: transparent
+  border-top-left-radius: 6px
+  border-bottom-left-radius: 6px
+  outline: none
+  color: white
+  width: 40rem
+
+  &::placeholder
+    color: #517aa2d2
+
+.combobox__trigger
+  appearance: none
+  display: inline-flex
+  justify-content: center
+  align-items: center
+  width: auto
+  outline: none
+  border-top-right-radius: 6px
+  border-bottom-right-radius: 6px
+  padding: 0 10px
+  background-color: hsl(240 5% 96%)
+  border-left: 1px solid hsl(240 6% 90%)
+  color: hsl(240 4% 16%)
+  font-size: 16px
+  line-height: 0
+  transition: 250ms background-color
+
+.combobox__icon
+  height: 20px
+  width: 20px
+  flex: 0 0 20px
+
+.combobox__description
+  margin-top: 8px
+  color: hsl(240 5% 26%)
+  font-size: 12px
+  user-select: none
+
+.combobox__error-message
+  margin-top: 8px
+  color: hsl(0 72% 51%)
+  font-size: 12px
+  user-select: none
+
+.combobox__content
+  background-color: #00000037
+  backdrop-filter: blur(8px)
+  border-radius: 6px
+  border: 1px solid hsl(240 6% 90%)
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
+  transform-origin: var(--kb-combobox-content-transform-origin)
+  animation: contentHide 250ms ease-in forwards
+  color: red
+
+  &[data-expanded]
+    animation: contentShow 250ms ease-out
+
+.combobox__listbox
+  overflow-y: auto
+  max-height: 360px
+  padding: 8px
+  
+
+  &:focus
+    outline: none
+
+.combobox__item
+  font-size: 16px
+  line-height: 1
+  color: hsl(240 4% 16%)
+  border-radius: 4px
+  display: flex
+  align-items: center
+  justify-content: space-between
+  height: 32px
+  padding: 0 8px
+  position: relative
+  user-select: none
+  outline: none
+  color: white
+
+  &[data-disabled]
+    color: hsl(240 5% 65%)
+    opacity: 0.5
+    pointer-events: none
+
+  &[data-highlighted]
+    outline: none
+    background-color: hsl(200 98% 39%)
+    color: white
+
+.combobox__section
+  padding: 8px 0 0 8px
+  font-size: 14px
+  line-height: 32px
+  color: hsl(240 4% 46%)
+
+.combobox__item-indicator
+  height: 20px
+  width: 20px
+  display: inline-flex
+  align-items: center
+  justify-content: center
+
+@keyframes contentShow
+  from
+    opacity: 0
+    transform: translateY(-8px)
+
+  to
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes contentHide
+  from
+    opacity: 1
+    transform: translateY(0)
+
+  to
+    opacity: 0
+    transform: translateY(-8px)

src/components/Combobox/Combobox.tsx

@@ -0,0 +1,47 @@
+import './Combobox.sass'
+import { Combobox } from '@kobalte/core/combobox'
+import { FaSolidAngleDown } from 'solid-icons/fa'
+import { AiOutlineCheck } from 'solid-icons/ai'
+
+interface Props {
+  options: any[]
+  placeholder: string
+  value: string
+  onChange: (value: string | null) => void
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Combobox
+        options={props.options}
+        defaultFilter="startsWith"
+        placeholder={props.placeholder}
+        value={props.value}
+        onChange={props.onChange}
+        itemComponent={(props) => (
+          <Combobox.Item item={props.item} class="combobox__item">
+            <Combobox.ItemLabel>{props.item.textValue}</Combobox.ItemLabel>
+            <Combobox.ItemIndicator class="combobox__item-indicator">
+              <AiOutlineCheck />
+            </Combobox.ItemIndicator>
+          </Combobox.Item>
+        )}
+      >
+        <Combobox.Control class="combobox__control" aria-label="Assessors">
+          <Combobox.Input class="combobox__input" />
+          <Combobox.Trigger class="combobox__trigger">
+            <Combobox.Icon class="combobox__icon">
+              <FaSolidAngleDown />
+            </Combobox.Icon>
+          </Combobox.Trigger>
+        </Combobox.Control>
+        <Combobox.Portal>
+          <Combobox.Content class="combobox__content">
+            <Combobox.Listbox class="combobox__listbox" />
+          </Combobox.Content>
+        </Combobox.Portal>
+      </Combobox>
+    </>
+  )
+}

src/components/Form/Form.tsx

@@ -3,12 +3,13 @@ import type { JSXElement } from 'solid-js'
 
 interface Props {
   children: JSXElement
+  class?: string
 }
 
 export default (props: Props) => {
   return (
     <>
-      <form method="post" enctype="application/x-www-form-urlencoded">
+      <form method="post" enctype="application/x-www-form-urlencoded" class={props.class}>
         {props.children}
       </form>
     </>

src/components/index.ts

@@ -15,7 +15,7 @@ export { default as Display } from './Display/Display'
 export { default as Padding } from './Padding/Padding'
 export { default as Modal } from './Modal/Modal'
 export { default as Table } from './Table/Table'
-// export { default as Input } from './components/Input'
+export { default as Combobox } from './Combobox/Combobox'
 
 // export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
 // export { default as OptimizeImage } from './Optimizers/OptimizeImage'

src/layouts/Layout.sass

@@ -5,7 +5,7 @@
 .body
   color: vars.$textColor
   font-family: fonts.$Roboto
-  background-image: url('/src/assets/images/optimized/background.avif'), url('/src/assets/images/optimized/background.webp')
+  background-image: url('/src/assets/images/svg/background.svg')
   position: absolute
   top: 0
   left: 0

src/pages/RegisterPage/Register.sass

@@ -0,0 +1,2 @@
+.back-button-text
+  font-size: 1rem

src/pages/RegisterPage/Register.tsx

@@ -1,34 +1,54 @@
-import { Button, Logo, Link, Page, Row, Column, Display, Padding } from '../../components'
-// import RegistrationForm from '../components/RegistrationForm/RegistrationForm'
+import './Register.sass'
+import { Logo, Link, Page, Row, Padding, Form, Combobox, Box } from '../../components'
+import { IoChevronBack } from 'solid-icons/io'
+import { Show, createSignal } from 'solid-js'
 
 export default () => {
+  const assessors = JSON.parse(sessionStorage.getItem('assessors')!)
+  const approvers = JSON.parse(sessionStorage.getItem('approvers')!)
+  const roles = ['ASSESSOR', 'APPROVER']
+
+  const [role, setRole] = createSignal('')
+  const [name, setName] = createSignal('')
+
   return (
     <>
       <Page alignment="column">
         <Padding left={4.75} right={4.75}>
-          <Display desktop tablet>
-            <Row content="split">
-              <Link to="/">
-                <Row content="left" gap={2}>
-                  <Logo size={200} />
-                  <h1>OCBO e-Sign</h1>
-                </Row>
-              </Link>
+          <Row content="split">
+            <Link to="/">
+              <Row content="left" gap={2}>
+                <Logo size={200} />
+                <h1>OCBO e-Sign</h1>
+              </Row>
+            </Link>
 
-              <Button label="Register" edges="curved" to="/main" />
+            <Link to="/">
+              <Row content="right">
+                <IoChevronBack size={45} />
+                <span class="back-button-text">Back</span>
+              </Row>
+            </Link>
+          </Row>
+
+          <Padding top={2} left={0} right={0}>
+            <Row>
+              <Box curved thickness={2} padding={2} color="#2f465cd7">
+                <Form>
+                  <h4>Role</h4>
+                  <Combobox options={roles} placeholder="Select your role" value={role()} onChange={setRole} />
+                  <Show when={role() === 'ASSESSOR'}>
+                    <h4>List of Assessors</h4>
+                    <Combobox options={assessors} placeholder="Select your name" value={name()} onChange={setName} />
+                  </Show>
+                  <Show when={role() === 'APPROVER'}>
+                    <h4>List of Approvers</h4>
+                    <Combobox options={approvers} placeholder="Select your name" value={name()} onChange={setName} />
+                  </Show>
+                </Form>
+              </Box>
             </Row>
-
-            <Display mobile>
-              <Column content="center">
-                <Link to="/">
-                  <Logo size={120} />
-                  <h1>OCBO e-Sign</h1>
-                </Link>
-
-                <Button label="Register" edges="curved" to="/main" />
-              </Column>
-            </Display>
-          </Display>
+          </Padding>
         </Padding>
       </Page>
     </>