admin core func done
This commit is contained in:
Mann Patel
@@ -1,45 +1,512 @@
|
||||
{{ define "content" }}
|
||||
<h2>Edit Volunteer</h2>
|
||||
<form method="POST" action="/volunteer/edit">
|
||||
<input type="hidden" name="user_id" value="{{.Volunteer.UserID}}" />
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<!-- Header Bar -->
|
||||
|
||||
<label>First Name:</label>
|
||||
<input type="text" name="first_name" value="{{.Volunteer.FirstName}}" /><br />
|
||||
<!-- Top Navigation -->
|
||||
<div class="bg-white border-b border-gray-200 px-6 py-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<i
|
||||
class="{{if .PageIcon}}{{.PageIcon}}{{else}}fas fa-users{{end}} text-blue-600"
|
||||
></i>
|
||||
<span class="text-sm font-medium">Volunteer Management</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label>Last Name:</label>
|
||||
<input type="text" name="last_name" value="{{.Volunteer.LastName}}" /><br />
|
||||
<!-- Main Content -->
|
||||
<div class="p-6">
|
||||
<!-- Volunteer Info Section -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-semibold text-gray-900">
|
||||
{{ .Volunteer.FirstName }} {{ .Volunteer.LastName }}
|
||||
</h3>
|
||||
<p class="text-gray-600">{{ .Volunteer.Email }}</p>
|
||||
<div class="flex items-center mt-2 space-x-4">
|
||||
<span
|
||||
class="inline-flex items-center px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200"
|
||||
>
|
||||
<i class="fas fa-user-check mr-1"></i>
|
||||
Volunteer
|
||||
</span>
|
||||
<span class="text-gray-600">User ID:</span>
|
||||
<span class="font-mono text-gray-900">{{ .Volunteer.UserID }}</span>
|
||||
<span class="text-gray-600">Current Role:</span>
|
||||
<span class="text-gray-900">
|
||||
{{ if eq .Volunteer.RoleID 2 }}Team Leader{{ else }}Volunteer{{
|
||||
end }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label>Email:</label>
|
||||
<input type="email" name="email" value="{{.Volunteer.Email}}" /><br />
|
||||
<!-- Edit Volunteer Section -->
|
||||
<div class="border-t border-gray-200 pt-8">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center">
|
||||
<i class="fas fa-edit text-blue-600 mr-3"></i>
|
||||
Edit Volunteer Information
|
||||
</h3>
|
||||
|
||||
<label>Phone:</label>
|
||||
<input type="text" name="phone" value="{{.Volunteer.Phone}}" /><br />
|
||||
<!-- Edit Volunteer Form -->
|
||||
<form method="POST" action="/volunteer/edit">
|
||||
<input type="hidden" name="user_id" value="{{.Volunteer.UserID}}" />
|
||||
|
||||
<label for="role_id">Role</label><br />
|
||||
<select name="role_id" id="role_id" required>
|
||||
<option value="">--Select Role--</option>
|
||||
<option
|
||||
type="number"
|
||||
value="3"
|
||||
{{if
|
||||
eq
|
||||
.Volunteer.RoleID
|
||||
3}}selected{{end}}
|
||||
>
|
||||
Volunteer
|
||||
</option>
|
||||
<option
|
||||
type="number"
|
||||
value="2"
|
||||
{{if
|
||||
eq
|
||||
.Volunteer.RoleID
|
||||
2}}selected{{end}}
|
||||
>
|
||||
Team Leader
|
||||
</option>
|
||||
</select>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<!-- First Name -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
First Name <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="first_name"
|
||||
value="{{.Volunteer.FirstName}}"
|
||||
required
|
||||
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
|
||||
placeholder="Enter first name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit">Save</button>
|
||||
</form>
|
||||
{{end}}
|
||||
<!-- Last Name -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Last Name <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="last_name"
|
||||
value="{{.Volunteer.LastName}}"
|
||||
required
|
||||
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
|
||||
placeholder="Enter last name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Email Address <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value="{{.Volunteer.Email}}"
|
||||
required
|
||||
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
|
||||
placeholder="Enter email address"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Phone -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Phone Number
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="phone"
|
||||
value="{{.Volunteer.Phone}}"
|
||||
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
|
||||
placeholder="Enter phone number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Role Selection -->
|
||||
<div class="lg:col-span-2">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Role Assignment <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
name="role_id"
|
||||
id="role_id"
|
||||
required
|
||||
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
|
||||
>
|
||||
<option value="">--Select Role--</option>
|
||||
<option value="3" {{if eq .Volunteer.RoleID 3}}selected{{end}}>
|
||||
Volunteer
|
||||
</option>
|
||||
<option value="2" {{if eq .Volunteer.RoleID 2}}selected{{end}}>
|
||||
Team Leader
|
||||
</option>
|
||||
</select>
|
||||
<p class="text-xs text-gray-500 mt-1">
|
||||
Team Leaders can manage volunteers and access additional features
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Actions -->
|
||||
<div
|
||||
class="mt-8 pt-6 border-t border-gray-200 flex justify-between items-center"
|
||||
>
|
||||
<div class="flex items-center text-sm text-gray-500">
|
||||
<i class="fas fa-info-circle text-blue-500 mr-2"></i>
|
||||
Changes will be applied immediately after saving
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<button
|
||||
type="button"
|
||||
onclick="window.history.back()"
|
||||
class="px-6 py-2 border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
|
||||
>
|
||||
<i class="fas fa-times mr-2"></i>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="px-6 py-2 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
|
||||
>
|
||||
<i class="fas fa-save mr-2"></i>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Configuration Settings Section -->
|
||||
<div class="border-t border-gray-200 pt-8 mt-8">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center">
|
||||
<i class="fas fa-cog text-blue-600 mr-3"></i>
|
||||
Volunteer Settings
|
||||
</h3>
|
||||
|
||||
<form
|
||||
method="post"
|
||||
action="/volunteer/settings"
|
||||
id="volunteerSettingsForm"
|
||||
>
|
||||
<div class="space-y-6">
|
||||
<!-- Add New Setting -->
|
||||
<div class="bg-white border border-gray-200 p-6">
|
||||
<h4 class="text-md font-semibold text-gray-800 mb-4">
|
||||
Add New Setting
|
||||
</h4>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Setting Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="newVolunteerSettingName"
|
||||
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
|
||||
placeholder="Enter setting name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Setting Value
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="newVolunteerSettingValue"
|
||||
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
|
||||
placeholder="Enter setting value"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<button
|
||||
type="button"
|
||||
onclick="addVolunteerSetting()"
|
||||
class="w-full px-6 py-3 bg-green-600 text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 font-medium"
|
||||
>
|
||||
<i class="fas fa-plus mr-2"></i>
|
||||
Add Setting
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Current Settings -->
|
||||
<div class="bg-white border border-gray-200 p-6">
|
||||
<h4 class="text-md font-semibold text-gray-800 mb-4">
|
||||
Current Settings
|
||||
</h4>
|
||||
<div id="volunteerSettingsList" class="space-y-3">
|
||||
<!-- Settings will be dynamically added here -->
|
||||
<div
|
||||
class="text-gray-500 text-sm"
|
||||
id="noVolunteerSettingsMessage"
|
||||
>
|
||||
No settings configured for this volunteer yet. Add settings
|
||||
above.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings Form Actions -->
|
||||
<div
|
||||
class="mt-8 pt-6 border-t border-gray-200 flex justify-between items-center"
|
||||
>
|
||||
<div class="flex items-center text-sm text-gray-500">
|
||||
<i class="fas fa-info-circle text-blue-500 mr-2"></i>
|
||||
Settings are specific to this volunteer and applied immediately
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<button
|
||||
type="button"
|
||||
onclick="clearAllVolunteerSettings()"
|
||||
class="px-6 py-2 border border-red-300 text-red-700 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-500 font-medium"
|
||||
>
|
||||
<i class="fas fa-trash mr-2"></i>
|
||||
Clear All
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="px-6 py-2 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
|
||||
>
|
||||
<i class="fas fa-save mr-2"></i>
|
||||
Save Settings
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let volunteerSettings = [];
|
||||
|
||||
function addVolunteerSetting() {
|
||||
const nameInput = document.getElementById("newVolunteerSettingName");
|
||||
const valueInput = document.getElementById("newVolunteerSettingValue");
|
||||
|
||||
const name = nameInput.value.trim();
|
||||
const value = valueInput.value.trim();
|
||||
|
||||
if (!name || !value) {
|
||||
alert("Please enter both setting name and value");
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if setting already exists
|
||||
const existingIndex = volunteerSettings.findIndex(
|
||||
(s) => s.name.toLowerCase() === name.toLowerCase()
|
||||
);
|
||||
if (existingIndex !== -1) {
|
||||
// Update existing setting
|
||||
volunteerSettings[existingIndex].value = value;
|
||||
} else {
|
||||
// Add new setting
|
||||
volunteerSettings.push({ name, value });
|
||||
}
|
||||
|
||||
// Clear inputs
|
||||
nameInput.value = "";
|
||||
valueInput.value = "";
|
||||
|
||||
// Update display
|
||||
displayVolunteerSettings();
|
||||
}
|
||||
|
||||
function removeVolunteerSetting(index) {
|
||||
volunteerSettings.splice(index, 1);
|
||||
displayVolunteerSettings();
|
||||
}
|
||||
|
||||
function displayVolunteerSettings() {
|
||||
const settingsList = document.getElementById("volunteerSettingsList");
|
||||
const noSettingsMessage = document.getElementById(
|
||||
"noVolunteerSettingsMessage"
|
||||
);
|
||||
|
||||
if (volunteerSettings.length === 0) {
|
||||
settingsList.innerHTML =
|
||||
'<div class="text-gray-500 text-sm" id="noVolunteerSettingsMessage">No settings configured for this volunteer yet. Add settings above.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
settingsList.innerHTML = volunteerSettings
|
||||
.map(
|
||||
(setting, index) => `
|
||||
<div class="flex items-center justify-between p-4 border border-gray-200 bg-gray-50">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center space-x-4">
|
||||
<span class="font-semibold text-gray-900">${setting.name}:</span>
|
||||
<span class="text-gray-700">${setting.value}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onclick="removeVolunteerSetting(${index})"
|
||||
class="px-3 py-1 text-red-600 hover:text-red-800 focus:outline-none"
|
||||
title="Remove setting"
|
||||
>
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
|
||||
function clearAllVolunteerSettings() {
|
||||
if (volunteerSettings.length === 0) return;
|
||||
|
||||
if (
|
||||
confirm("Are you sure you want to clear all settings for this volunteer?")
|
||||
) {
|
||||
volunteerSettings = [];
|
||||
displayVolunteerSettings();
|
||||
}
|
||||
}
|
||||
|
||||
// Allow Enter key to add setting
|
||||
document
|
||||
.getElementById("newVolunteerSettingName")
|
||||
.addEventListener("keypress", function (e) {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
document.getElementById("newVolunteerSettingValue").focus();
|
||||
}
|
||||
});
|
||||
|
||||
document
|
||||
.getElementById("newVolunteerSettingValue")
|
||||
.addEventListener("keypress", function (e) {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
addVolunteerSetting();
|
||||
}
|
||||
});
|
||||
|
||||
// Volunteer Settings form submission handler
|
||||
document
|
||||
.getElementById("volunteerSettingsForm")
|
||||
.addEventListener("submit", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Here you would typically send the settings to your server
|
||||
console.log("Saving volunteer settings:", volunteerSettings);
|
||||
|
||||
// Show success message
|
||||
alert("Volunteer settings saved successfully!");
|
||||
});
|
||||
|
||||
// Form validation for main volunteer form
|
||||
document
|
||||
.querySelector('form[action="/volunteer/edit"]')
|
||||
.addEventListener("submit", function (e) {
|
||||
const firstName = document
|
||||
.querySelector('input[name="first_name"]')
|
||||
.value.trim();
|
||||
const lastName = document
|
||||
.querySelector('input[name="last_name"]')
|
||||
.value.trim();
|
||||
const email = document.querySelector('input[name="email"]').value.trim();
|
||||
const roleId = document.querySelector('select[name="role_id"]').value;
|
||||
|
||||
if (!firstName || !lastName || !email || !roleId) {
|
||||
e.preventDefault();
|
||||
alert("Please fill in all required fields.");
|
||||
return false;
|
||||
}
|
||||
|
||||
// Email validation
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(email)) {
|
||||
e.preventDefault();
|
||||
alert("Please enter a valid email address.");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Professional square corner design */
|
||||
* {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Clean transitions */
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
.transition-colors {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* Focus states with blue accent */
|
||||
input:focus,
|
||||
select:focus {
|
||||
box-shadow: 0 0 0 1px #3b82f6;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
box-shadow: 0 0 0 2px #3b82f6;
|
||||
}
|
||||
|
||||
/* Hover effects */
|
||||
.hover\:bg-gray-50:hover {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.hover\:bg-blue-50:hover {
|
||||
background-color: #eff6ff;
|
||||
}
|
||||
|
||||
.hover\:bg-blue-700:hover {
|
||||
background-color: #1d4ed8;
|
||||
}
|
||||
|
||||
.hover\:bg-orange-50:hover {
|
||||
background-color: #fff7ed;
|
||||
}
|
||||
|
||||
.hover\:bg-red-50:hover {
|
||||
background-color: #fef2f2;
|
||||
}
|
||||
|
||||
.hover\:bg-green-700:hover {
|
||||
background-color: #15803d;
|
||||
}
|
||||
|
||||
/* Professional button styling */
|
||||
button {
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
/* Status indicators */
|
||||
.bg-blue-100 {
|
||||
background-color: #dbeafe;
|
||||
}
|
||||
|
||||
.text-blue-800 {
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
/* Select styling */
|
||||
select {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
|
||||
background-position: right 0.5rem center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.5em 1.5em;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 1024px) {
|
||||
.lg\:grid-cols-2 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.lg\:grid-cols-3 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.lg\:col-span-2 {
|
||||
grid-column: span 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{{ end }}
|
||||
|
||||
Reference in New Issue
Block a user