Skip to content

Commit c3dc3de

Browse files
puikinshpuikinsh
committed
Added example modal in index.html
1 parent 900ea76 commit c3dc3de

2 files changed

Lines changed: 168 additions & 3 deletions

File tree

‎src-modern/index.html‎

Lines changed: 103 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -331,7 +331,7 @@ <h1 class="h3 mb-0">Dashboard</h1>
331331
<p class="text-muted mb-0">Welcome back! Here's what's happening.</p>
332332
</div>
333333
<div class="d-flex gap-2">
334-
<button type="button" class="btn btn-primary">
334+
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newItemModal">
335335
<i class="bi bi-plus-lg me-2"></i>
336336
New Item
337337
</button>
@@ -725,5 +725,107 @@ <h6 class="mt-4">Icon Animations</h6>
725725
}
726726
});
727727
</script>
728+
729+
<!-- New Item Modal -->
730+
<div class="modal fade" id="newItemModal" tabindex="-1" aria-labelledby="newItemModalLabel" aria-hidden="true">
731+
<div class="modal-dialog modal-dialog-centered">
732+
<div class="modal-content">
733+
<div class="modal-header border-0 pb-0">
734+
<h5 class="modal-title" id="newItemModalLabel">
735+
<i class="bi bi-plus-circle text-primary me-2"></i>
736+
Quick Add
737+
</h5>
738+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
739+
</div>
740+
<div class="modal-body" x-data="quickAddForm()">
741+
<p class="text-muted small mb-4">Create a new item quickly from the dashboard.</p>
742+
743+
<!-- Item Type Selection -->
744+
<div class="mb-4">
745+
<label class="form-label fw-semibold">What would you like to add?</label>
746+
<div class="btn-group w-100" role="group">
747+
<button type="button" class="btn btn-outline-primary btn-sm"
748+
:class="{ 'active': itemType === 'task' }"
749+
@click="itemType = 'task'">
750+
<i class="bi bi-check2-square"></i> Task
751+
</button>
752+
<button type="button" class="btn btn-outline-success btn-sm"
753+
:class="{ 'active': itemType === 'note' }"
754+
@click="itemType = 'note'">
755+
<i class="bi bi-sticky"></i> Note
756+
</button>
757+
<button type="button" class="btn btn-outline-info btn-sm"
758+
:class="{ 'active': itemType === 'event' }"
759+
@click="itemType = 'event'">
760+
<i class="bi bi-calendar-event"></i> Event
761+
</button>
762+
<button type="button" class="btn btn-outline-warning btn-sm"
763+
:class="{ 'active': itemType === 'reminder' }"
764+
@click="itemType = 'reminder'">
765+
<i class="bi bi-bell"></i> Reminder
766+
</button>
767+
</div>
768+
</div>
769+
770+
<!-- Title -->
771+
<div class="mb-3">
772+
<label for="itemTitle" class="form-label fw-semibold">Title</label>
773+
<input type="text" class="form-control" id="itemTitle" x-model="title"
774+
placeholder="Enter a title..." autofocus>
775+
</div>
776+
777+
<!-- Description -->
778+
<div class="mb-3">
779+
<label for="itemDescription" class="form-label fw-semibold">Description</label>
780+
<textarea class="form-control" id="itemDescription" rows="3" x-model="description"
781+
placeholder="Add some details..."></textarea>
782+
</div>
783+
784+
<!-- Priority (shown for tasks) -->
785+
<div class="mb-3" x-show="itemType === 'task'" x-transition>
786+
<label class="form-label fw-semibold d-block">Priority</label>
787+
<div class="btn-group" role="group" aria-label="Priority selection">
788+
<input type="radio" class="btn-check" name="priorityRadio" id="priorityLow" value="low" x-model="priority" autocomplete="off">
789+
<label class="btn btn-outline-success btn-sm" for="priorityLow">
790+
<i class="bi bi-flag"></i> Low
791+
</label>
792+
<input type="radio" class="btn-check" name="priorityRadio" id="priorityMedium" value="medium" x-model="priority" autocomplete="off">
793+
<label class="btn btn-outline-warning btn-sm" for="priorityMedium">
794+
<i class="bi bi-flag-fill"></i> Medium
795+
</label>
796+
<input type="radio" class="btn-check" name="priorityRadio" id="priorityHigh" value="high" x-model="priority" autocomplete="off">
797+
<label class="btn btn-outline-danger btn-sm" for="priorityHigh">
798+
<i class="bi bi-flag-fill"></i> High
799+
</label>
800+
</div>
801+
</div>
802+
803+
<!-- Date (shown for events/reminders) -->
804+
<div class="mb-3" x-show="itemType === 'event' || itemType === 'reminder'" x-transition>
805+
<label for="itemDate" class="form-label fw-semibold">Date & Time</label>
806+
<input type="datetime-local" class="form-control" id="itemDate" x-model="dateTime">
807+
</div>
808+
809+
<!-- Assign to (shown for tasks) -->
810+
<div class="mb-3" x-show="itemType === 'task'" x-transition>
811+
<label for="assignTo" class="form-label fw-semibold">Assign to</label>
812+
<select class="form-select" id="assignTo" x-model="assignee">
813+
<option value="">Select team member...</option>
814+
<option value="john">John Doe</option>
815+
<option value="jane">Jane Smith</option>
816+
<option value="mike">Mike Johnson</option>
817+
<option value="sarah">Sarah Williams</option>
818+
</select>
819+
</div>
820+
</div>
821+
<div class="modal-footer border-0 pt-0">
822+
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
823+
<button type="button" class="btn btn-primary" @click="saveItem()" data-bs-dismiss="modal">
824+
<i class="bi bi-check-lg me-1"></i> Create Item
825+
</button>
826+
</div>
827+
</div>
828+
</div>
829+
</div>
728830
</body>
729831
</html>

‎src-modern/scripts/main.js‎

Lines changed: 65 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -480,18 +480,81 @@ class AdminApp {
480480

481481
Alpine.data('iconDemo', () => ({
482482
currentProvider: 'bootstrap',
483-
483+
484484
switchProvider(provider) {
485485
this.currentProvider = provider;
486486
iconManager.switchProvider(provider);
487487
console.log(`🎨 Switched to ${provider} icons`);
488488
},
489-
489+
490490
getIcon(iconName) {
491491
return iconManager.get(iconName);
492492
}
493493
}));
494494

495+
// Quick Add Form for Dashboard
496+
Alpine.data('quickAddForm', () => ({
497+
itemType: 'task',
498+
title: '',
499+
description: '',
500+
priority: 'medium',
501+
dateTime: '',
502+
assignee: '',
503+
504+
init() {
505+
// Set default date to now
506+
const now = new Date();
507+
now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
508+
this.dateTime = now.toISOString().slice(0, 16);
509+
},
510+
511+
resetForm() {
512+
this.itemType = 'task';
513+
this.title = '';
514+
this.description = '';
515+
this.priority = 'medium';
516+
this.assignee = '';
517+
const now = new Date();
518+
now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
519+
this.dateTime = now.toISOString().slice(0, 16);
520+
},
521+
522+
saveItem() {
523+
if (!this.title.trim()) {
524+
window.AdminApp.notificationManager.warning('Please enter a title');
525+
return;
526+
}
527+
528+
const item = {
529+
type: this.itemType,
530+
title: this.title,
531+
description: this.description,
532+
priority: this.itemType === 'task' ? this.priority : null,
533+
dateTime: ['event', 'reminder'].includes(this.itemType) ? this.dateTime : null,
534+
assignee: this.itemType === 'task' ? this.assignee : null,
535+
createdAt: new Date().toISOString()
536+
};
537+
538+
// In a real app, this would send to an API
539+
console.log('New item created:', item);
540+
541+
// Show success notification with item type
542+
const typeLabels = {
543+
task: 'Task',
544+
note: 'Note',
545+
event: 'Event',
546+
reminder: 'Reminder'
547+
};
548+
549+
window.AdminApp.notificationManager.success(
550+
`${typeLabels[this.itemType]} "${this.title}" created successfully!`
551+
);
552+
553+
// Reset form for next use
554+
this.resetForm();
555+
}
556+
}));
557+
495558
// Start Alpine.js
496559
Alpine.start();
497560
window.Alpine = Alpine;

0 commit comments

Comments
 (0)