Skip to content

Commit

Permalink
[#126] Fix broadcast message send button not showing
Browse files Browse the repository at this point in the history
  • Loading branch information
@wayangalihpratama
wayangalihpratama committed Nov 20, 2024
1 parent 37d0354 commit 604fee3
Show file tree
Hide file tree
Showing 2 changed files with 133 additions and 135 deletions.
153 changes: 77 additions & 76 deletions frontend/src/app/broadcast-message/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,87 +139,88 @@ const BroadcastMessage = () => {
</button>
}
/>
<div className="flex justify-center min-h-screen bg-white mt-20">
<form onSubmit={handleSubmit} className="p-10 w-full">
<h2 className="text-lg font-semibold mb-10">
Send Broadcast Message
</h2>

{/* Client List */}
<div className="mb-8">
<label className="block text-sm mb-2">Select Farmer</label>
<div className="flex items-center mb-2">
<div className="flex justify-center min-h-screen bg-white mt-16">
<div className="overflow-auto max-h-[calc(100vh-140px)] w-full">
<form onSubmit={handleSubmit} className="p-10 w-full">
<h2 className="text-lg font-semibold mb-6">
Send Broadcast Message
</h2>

{/* Client List */}
<div className="mb-8">
<label className="block text-sm mb-2">Select Farmer</label>
<div className="flex items-center mb-2">
<input
id="select-all-clients"
type="checkbox"
checked={selectAll}
onChange={handleSelectAllChange}
className="mr-2"
/>
<label htmlFor="select-all-clients">Select All</label>
</div>
<input
id="select-all-clients"
type="checkbox"
checked={selectAll}
onChange={handleSelectAllChange}
className="mr-2"
type="text"
placeholder="Search farmer"
className="w-full px-4 py-2 border rounded-lg text-md mb-2"
onChange={handleSearchClient}
value={searchClient}
/>
<label htmlFor="select-all-clients">Select All</label>
<div
className="w-full border rounded-lg p-2"
style={{
maxHeight: "110px",
overflowY: "auto",
backgroundColor: "white",
}}
>
{filteredClients.map((client) => (
<div key={client.id} className="flex items-center mb-1">
<input
type="checkbox"
id={`client-${client.id}`}
checked={selectedClients.includes(client.id)}
onChange={() => handleClientChange(client.id)}
className="mr-2"
/>
<label htmlFor={`client-${client.id}`}>{client.name}</label>
</div>
))}
</div>
</div>
<input
type="text"
placeholder="Search farmer"
className="w-full px-4 py-2 border rounded-lg text-md mb-2"
onChange={handleSearchClient}
value={searchClient}
/>
<div
className="w-full border rounded-lg p-2"
style={{
maxHeight: "110px",
overflowY: "auto",
backgroundColor: "white",
}}
>
{filteredClients.map((client) => (
<div key={client.id} className="flex items-center mb-1">
<input
type="checkbox"
id={`client-${client.id}`}
checked={selectedClients.includes(client.id)}
onChange={() => handleClientChange(client.id)}
className="mr-2"
/>
<label htmlFor={`client-${client.id}`}>{client.name}</label>
</div>
))}
</div>
</div>

<div className="mb-8">
<label className="block text-sm mb-2">
Message <span className="text-xs">(1600 characters max)</span>
</label>
<textarea
rows={5}
maxLength={MAX_CHARACTERS}
value={message}
onChange={handleMessageChange}
required
className="w-full px-4 py-2 border rounded-lg text-md resize-none overflow-auto"
/>
<div className="text-right text-xs mt-1">
{MAX_CHARACTERS - message.length} characters left

<div className="mb-8">
<label className="block text-sm mb-2">
Message <span className="text-xs">(1600 characters max)</span>
</label>
<textarea
rows={5}
maxLength={MAX_CHARACTERS}
value={message}
onChange={handleMessageChange}
required
className="w-full px-4 py-2 border rounded-lg text-md resize-none overflow-auto"
/>
<div className="text-right text-xs mt-1">
{MAX_CHARACTERS - message.length} characters left
</div>
</div>
</div>

{/* Submit Button */}
<button
disabled={disabled}
type="submit"
className={`w-full text-white rounded-md py-3 shadow-sm flex justify-center ${
disabled
? "bg-akvo-green cursor-not-allowed"
: "bg-akvo-green hover:bg-green-700 focus:ring-green-700"
}`}
>
{disabled ? <ButtonLoadingIcon /> : "Send"}
</button>
</form>
</div>

{/* Submit Button */}
<button
disabled={disabled}
type="submit"
className={`w-full text-white rounded-md py-3 shadow-sm flex justify-center ${
disabled
? "bg-akvo-green cursor-not-allowed"
: "bg-akvo-green hover:bg-green-700 focus:ring-green-700"
}`}
>
{disabled ? <ButtonLoadingIcon /> : "Send"}
</button>
</form>
</div>
</div>
<Notification message={notificationContent} show={showNotification} />
</div>
);
Expand Down
115 changes: 56 additions & 59 deletions frontend/src/components/chats/FarmerForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,68 +145,65 @@ const FarmerForm = ({
};

return (
<div
className={`flex justify-center min-h-screen bg-white ${
isEdit ? "mt-20" : "mt-28"
}`}
>
<form
onSubmit={(e) => (isEdit ? handleUpdate(e) : handleSubmit(e))}
className="p-10 w-full"
>
<h2 className="text-lg font-semibold mb-10">
{isEdit ? "Update" : "Add"} Farmer
</h2>
{/* Farmer Name Field */}
<div className="mb-8">
<label className="block text-sm mb-2">Farmer Name</label>
<input
type="text"
value={farmerName || ""}
onChange={(e) => setFarmerName(e.target.value)}
placeholder="Enter farmer's name"
className="w-full px-4 py-2 border-gray-400 border-b text-md"
/>
</div>

{/* Phone Number Field */}
<div className="mb-10">
<label className="block text-sm mb-2">Phone Number</label>
<div
className={`mt-2 flex items-center ${
!isEdit ? "border-b border-gray-400" : ""
}`}
>
<PhoneInput
id="phone"
name="phone"
placeholder="Enter phone number"
value={phoneNumber}
onChange={setPhoneNumber}
international
defaultCountry="KE"
initialValueFormat="international"
className="block w-full p-2 text-gray-600 font-medium"
disabled={isEdit}
<div className={`flex justify-center min-h-screen bg-white mt-16`}>
<div className="overflow-auto max-h-[calc(100vh-140px)] w-full">
<form
onSubmit={(e) => (isEdit ? handleUpdate(e) : handleSubmit(e))}
className="p-10 w-full"
>
<h2 className="text-lg font-semibold mb-10">
{isEdit ? "Update" : "Add"} Farmer
</h2>
{/* Farmer Name Field */}
<div className="mb-8">
<label className="block text-sm mb-2">Farmer Name</label>
<input
type="text"
value={farmerName || ""}
onChange={(e) => setFarmerName(e.target.value)}
placeholder="Enter farmer's name"
className="w-full px-4 py-2 border-gray-400 border-b text-md"
/>
<PhoneIcon />
</div>
</div>

{/* Submit Button */}
<button
disabled={disabled}
type="submit"
className={`w-full text-white py-2 rounded-md py-3 shadow-sm flex justify-center ${
disabled
? "bg-akvo-green cursor-not-allowed"
: "bg-akvo-green hover:bg-green-700 focus:ring-green-700"
}`}
>
{disabled ? <ButtonLoadingIcon /> : "Save"}
</button>
</form>

{/* Phone Number Field */}
<div className="mb-10">
<label className="block text-sm mb-2">Phone Number</label>
<div
className={`mt-2 flex items-center ${
!isEdit ? "border-b border-gray-400" : ""
}`}
>
<PhoneInput
id="phone"
name="phone"
placeholder="Enter phone number"
value={phoneNumber}
onChange={setPhoneNumber}
international
defaultCountry="KE"
initialValueFormat="international"
className="block w-full p-2 text-gray-600 font-medium"
disabled={isEdit}
/>
<PhoneIcon />
</div>
</div>

{/* Submit Button */}
<button
disabled={disabled}
type="submit"
className={`w-full text-white py-3 rounded-md shadow-sm flex justify-center ${
disabled
? "bg-akvo-green cursor-not-allowed"
: "bg-akvo-green hover:bg-green-700 focus:ring-green-700"
}`}
>
{disabled ? <ButtonLoadingIcon /> : "Save"}
</button>
</form>
</div>
<Notification message={notificationContent} show={showNotification} />
</div>
);
Expand Down

0 comments on commit 604fee3

Please # to comment.