Skip to content

Commit 58b39d0

Browse files
Michael-DratchMichael-Dratch
committed
style updates
1 parent e349ec4 commit 58b39d0

File tree

3 files changed

+210
-8
lines changed

3 files changed

+210
-8
lines changed

‎builder-frontend/src/components/project/manageBenefits/EligibilityCheckListView.tsx‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
import { Accessor, For, Resource, Setter, createSignal } from "solid-js";
2+
3+
import { titleCase } from "@/utils/title_case";
4+
5+
import type { CheckConfig, EligibilityCheck } from "@/types";
6+
7+
export type EligibilityCheckListMode = "user-defined" | "public";
8+
interface CheckModeConfig {
9+
mode: EligibilityCheckListMode;
10+
title: string;
11+
description: string;
12+
buttonTitle: string;
13+
}
14+
const PublicCheckConfig: CheckModeConfig = {
15+
mode: "public",
16+
title: "Public eligibility checks",
17+
description: "Browse and select pre-built checks to add to your benefit.",
18+
buttonTitle: "Public checks",
19+
};
20+
const UserDefinedCheckConfig: CheckModeConfig = {
21+
mode: "user-defined",
22+
title: "User defined eligibility checks",
23+
description:
24+
"Browse and select your own custom checks to add to your benefit.",
25+
buttonTitle: "Your checks",
26+
};
27+
28+
/*
29+
Renders a list of eligibility checks with checkboxes to select/deselect them for the current benefit.
30+
Uses CheckModeConfig object to display a different title/description based on the current mode.
31+
Props:
32+
- mode: current mode ("user-defined" or "public")
33+
- setMode: function to change the mode
34+
- publicChecks: resource containing the list of public eligibility checks
35+
- userDefinedChecks: resource containing the list of user-defined eligibility checks
36+
*/
37+
const EligibilityCheckListView = ({
38+
addCheck,
39+
mode,
40+
setMode,
41+
publicChecks,
42+
userDefinedChecks,
43+
}: {
44+
addCheck: (newCheck: CheckConfig) => void;
45+
mode: Accessor<EligibilityCheckListMode>;
46+
setMode: Setter<EligibilityCheckListMode>;
47+
publicChecks: Resource<EligibilityCheck[]>;
48+
userDefinedChecks: Resource<EligibilityCheck[]>;
49+
}) => {
50+
const activeCheckConfig: Accessor<CheckModeConfig> = () =>
51+
mode() === "public" ? PublicCheckConfig : UserDefinedCheckConfig;
52+
const activeChecks: Accessor<Resource<EligibilityCheck[]>> = () =>
53+
mode() === "public" ? publicChecks : userDefinedChecks;
54+
55+
const onAddEligibilityCheck = (check: EligibilityCheck) => {
56+
const checkConfig: CheckConfig = {
57+
checkId: check.id,
58+
checkName: check.name,
59+
checkVersion: check.version,
60+
checkModule: check.module,
61+
checkDescription: check.description,
62+
evaluationUrl: check.evaluationUrl,
63+
parameters: {},
64+
parameterDefinitions: check.parameterDefinitions,
65+
inputDefinition: check.inputDefinition,
66+
};
67+
addCheck(checkConfig);
68+
};
69+
70+
const flipMode = () => {
71+
console.log("click")
72+
console.log(mode())
73+
setMode(mode() === "public" ? "user-defined" : "public");
74+
}
75+
76+
return (
77+
<>
78+
<div class="p-4">
79+
<div class="flex items-center mb-2">
80+
<div class="text-2xl font-bold">{activeCheckConfig().title}</div>
81+
<div class="grid w-full grid-cols-2 items-center justify-center rounded-md bg-muted bg-gray-100 p-1 text-gray-500 mb-2 w-xs">
82+
<button
83+
onClick={() => flipMode()}
84+
class={`inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 rounded ${
85+
mode() === "public"
86+
? "bg-white text-gray-950 shadow-sm"
87+
: "hover:bg-gray-200"
88+
}`}
89+
>
90+
Public Checks
91+
</button>
92+
<button
93+
onClick={() => flipMode()}
94+
class={`inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 rounded ${
95+
mode() === "user-defined"
96+
? "bg-white text-gray-950 shadow-sm"
97+
: "hover:bg-gray-200"
98+
}`}
99+
>
100+
Custom Checks
101+
</button>
102+
</div>
103+
104+
</div>
105+
<div>{activeCheckConfig().description}</div>
106+
</div>
107+
<table class="table-auto w-full mt-4 border-collapse">
108+
<thead>
109+
<tr>
110+
<th class="eligibility-check-table-header">Add</th>
111+
<th class="eligibility-check-table-header">Check Name</th>
112+
<th class="eligibility-check-table-header">Description</th>
113+
<th class="eligibility-check-table-header">Version</th>
114+
</tr>
115+
</thead>
116+
<tbody>
117+
{activeChecks().loading && (
118+
<tr>
119+
<td colSpan={3} class="p-4 font-bold text-center">
120+
Loading checks...
121+
</td>
122+
</tr>
123+
)}
124+
{activeChecks()() && activeChecks()().length === 0 && (
125+
<tr>
126+
<td colSpan={3} class="p-4 font-bold text-center text-gray-600">
127+
No checks available.
128+
</td>
129+
</tr>
130+
)}
131+
<For each={activeChecks()()}>
132+
{(check) => (
133+
<EligibilityCheckRow
134+
check={check}
135+
onAdd={() => onAddEligibilityCheck(check)}
136+
/>
137+
)}
138+
</For>
139+
</tbody>
140+
</table>
141+
</>
142+
);
143+
};
144+
145+
const EligibilityCheckRow = ({
146+
check,
147+
onAdd,
148+
}: {
149+
check: EligibilityCheck;
150+
onAdd: (check: EligibilityCheck) => void;
151+
}) => {
152+
return (
153+
<tr>
154+
<td class="eligibility-check-table-cell border-top">
155+
<div class="btn-default btn-blue" onClick={() => onAdd(check)}>
156+
Add
157+
</div>
158+
</td>
159+
<td class="eligibility-check-table-cell border-top">
160+
{titleCase(check.name)}
161+
</td>
162+
<td class="eligibility-check-table-cell border-top">
163+
{check.description}
164+
</td>
165+
<td class="eligibility-check-table-cell border-top">{check.version}</td>
166+
</tr>
167+
);
168+
};
169+
export default EligibilityCheckListView;

‎builder-frontend/src/components/project/manageBenefits/configureBenefit/EligibilityCheckListView.tsx‎

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Accessor, For, Resource, Setter } from "solid-js";
1+
import { Accessor, For, Resource, Setter, createSignal } from "solid-js";
22

33
import { titleCase } from "@/utils/title_case";
44

@@ -47,6 +47,8 @@ const EligibilityCheckListView = ({
4747
publicChecks: Resource<EligibilityCheck[]>;
4848
userDefinedChecks: Resource<EligibilityCheck[]>;
4949
}) => {
50+
const [activeTab, setActiveTab] = createSignal("account");
51+
5052
const activeCheckConfig: Accessor<CheckModeConfig> = () =>
5153
mode() === "public" ? PublicCheckConfig : UserDefinedCheckConfig;
5254
const activeChecks: Accessor<Resource<EligibilityCheck[]>> = () =>
@@ -72,22 +74,50 @@ const EligibilityCheckListView = ({
7274
<div class="p-4">
7375
<div class="flex items-center mb-2">
7476
<div class="text-2xl font-bold">{activeCheckConfig().title}</div>
77+
<div class="grid w-full grid-cols-2 items-center justify-center rounded-md bg-muted bg-gray-100 p-1 text-gray-500 mb-2 w-xs">
78+
<button
79+
onClick={() => setActiveTab("account")}
80+
class={`inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 rounded ${
81+
activeTab() === "account"
82+
? "bg-white text-gray-950 shadow-sm"
83+
: "hover:bg-gray-200"
84+
}`}
85+
>
86+
Public Checks
87+
</button>
88+
<button
89+
onClick={() => setActiveTab("password")}
90+
class={`inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 rounded ${
91+
activeTab() === "password"
92+
? "bg-white text-gray-950 shadow-sm"
93+
: "hover:bg-gray-200"
94+
}`}
95+
>
96+
Custom Checks
97+
</button>
98+
</div>
99+
75100
<div class="ml-auto flex gap-2">
101+
<div class="border-b border-gray-200">
102+
<nav class="-mb-px flex space-x-4" aria-label="Tabs">
103+
104+
</nav>
105+
</div>
76106
<For
77107
each={
78108
[PublicCheckConfig, UserDefinedCheckConfig] as CheckModeConfig[]
79109
}
80110
>
81111
{(modeOption) => (
82-
<div
112+
<button
83113
class={`btn-default ${
84114
mode() === modeOption.mode ? "btn-blue" : "btn-gray"
85115
}`}
86116
onClick={() => setMode(modeOption.mode)}
87117
title={modeOption.buttonTitle}
88118
>
89119
{modeOption.buttonTitle}
90-
</div>
120+
</button>
91121
)}
92122
</For>
93123
</div>

‎builder-frontend/src/index.css‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,22 @@
33
strategy: "class"; /* only generate form-* classes */
44
}
55

6+
body {
7+
@apply
8+
text-gray-800
9+
}
610
@layer components {
711
.btn-default {
812
@apply
9-
inline-block px-6 py-1
10-
border-gray-300 border-2
11-
cursor-pointer select-none rounded-md
13+
inline-block px-5 py-1
14+
cursor-pointer select-none !rounded-md text-sm font-semibold
1215
}
1316
.btn-default.btn-gray {
14-
@apply bg-white hover:bg-gray-200;
17+
@apply border-gray-300 border-2 bg-white hover:bg-gray-200 text-gray-800;
1518
/* @apply bg-white hover:bg-gray-200 hover:scale-500 transition-all duration-1000; */
1619
}
1720
.btn-default.btn-red {
18-
@apply bg-red-800 hover:bg-red-900 text-white;
21+
@apply border-gray-300 border-2 border-red-400 text-red-500 hover:bg-red-200 hover:text-red-700;
1922
}
2023
.btn-default.btn-yellow {
2124
@apply bg-yellow-700 hover:bg-yellow-800 text-white;

0 commit comments

Comments
 (0)