Skip to content

Commit a0ca603

Browse files
ManukMinasyanManukMinasyan
committed
UP
1 parent b22db63 commit a0ca603

File tree

6 files changed

+472
-134
lines changed

6 files changed

+472
-134
lines changed

‎resources/dist/flowforge.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2469,6 +2469,10 @@ select {
24692469
margin-top: auto;
24702470
}
24712471

2472+
.mr-auto {
2473+
margin-right: auto;
2474+
}
2475+
24722476
.line-clamp-2 {
24732477
overflow: hidden;
24742478
display: -webkit-box;
@@ -3058,6 +3062,10 @@ select {
30583062
cursor: wait;
30593063
}
30603064

3065+
.cursor-not-allowed {
3066+
cursor: not-allowed;
3067+
}
3068+
30613069
.select-none {
30623070
-webkit-user-select: none;
30633071
-moz-user-select: none;
@@ -3388,6 +3396,12 @@ select {
33883396
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
33893397
}
33903398

3399+
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
3400+
--tw-space-x-reverse: 0;
3401+
margin-right: calc(0.25rem * var(--tw-space-x-reverse));
3402+
margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
3403+
}
3404+
33913405
.divide-x > :not([hidden]) ~ :not([hidden]) {
33923406
--tw-divide-x-reverse: 0;
33933407
border-right-width: calc(1px * var(--tw-divide-x-reverse));
@@ -3707,6 +3721,14 @@ select {
37073721
background-color: rgb(255 255 255 / 0.05);
37083722
}
37093723

3724+
.bg-white\/50 {
3725+
background-color: rgb(255 255 255 / 0.5);
3726+
}
3727+
3728+
.bg-white\/30 {
3729+
background-color: rgb(255 255 255 / 0.3);
3730+
}
3731+
37103732
.\!bg-none {
37113733
background-image: none !important;
37123734
}
@@ -4209,6 +4231,11 @@ select {
42094231
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
42104232
}
42114233

4234+
.text-danger-500 {
4235+
--tw-text-opacity: 1;
4236+
color: rgba(var(--danger-500), var(--tw-text-opacity, 1));
4237+
}
4238+
42124239
.underline {
42134240
text-decoration-line: underline;
42144241
}
@@ -4620,6 +4647,11 @@ select {
46204647
--tw-shadow: var(--tw-shadow-colored);
46214648
}
46224649

4650+
.focus\:border-primary-500:focus {
4651+
--tw-border-opacity: 1;
4652+
border-color: rgba(var(--primary-500), var(--tw-border-opacity, 1));
4653+
}
4654+
46234655
.focus\:ring-0:focus {
46244656
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
46254657
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -4642,6 +4674,11 @@ select {
46424674
--tw-ring-color: rgba(var(--primary-600), var(--tw-ring-opacity, 1));
46434675
}
46444676

4677+
.focus\:ring-primary-500:focus {
4678+
--tw-ring-opacity: 1;
4679+
--tw-ring-color: rgba(var(--primary-500), var(--tw-ring-opacity, 1));
4680+
}
4681+
46454682
.focus\:ring-offset-0:focus {
46464683
--tw-ring-offset-width: 0px;
46474684
}
@@ -4988,6 +5025,10 @@ select {
49885025
background-color: rgb(255 255 255 / 0.05);
49895026
}
49905027

5028+
.dark\:bg-gray-800\/50:is(.dark *) {
5029+
background-color: rgba(var(--gray-800), 0.5);
5030+
}
5031+
49915032
.dark\:text-blue-400:is(.dark *) {
49925033
--tw-text-opacity: 1;
49935034
color: rgb(96 165 250 / var(--tw-text-opacity, 1));
@@ -5079,6 +5120,11 @@ select {
50795120
color: rgb(255 255 255 / 0.05);
50805121
}
50815122

5123+
.dark\:text-gray-100:is(.dark *) {
5124+
--tw-text-opacity: 1;
5125+
color: rgba(var(--gray-100), var(--tw-text-opacity, 1));
5126+
}
5127+
50825128
.dark\:ring-custom-400\/30:is(.dark *) {
50835129
--tw-ring-color: rgba(var(--c-400), 0.3);
50845130
}
@@ -5202,6 +5248,11 @@ select {
52025248
--tw-ring-color: rgb(255 255 255 / 0.2);
52035249
}
52045250

5251+
.dark\:focus\:border-primary-500:focus:is(.dark *) {
5252+
--tw-border-opacity: 1;
5253+
border-color: rgba(var(--primary-500), var(--tw-border-opacity, 1));
5254+
}
5255+
52055256
.dark\:focus\:ring-danger-500:focus:is(.dark *) {
52065257
--tw-ring-opacity: 1;
52075258
--tw-ring-color: rgba(var(--danger-500), var(--tw-ring-opacity, 1));

‎resources/dist/flowforge.js‎

Lines changed: 72 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/js/flowforge.js‎

Lines changed: 93 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,67 @@ export default function flowforge({state}) {
44
currentColumn: null,
55
currentCard: null,
66
columns: state.columns,
7-
formData: {
8-
9-
},
7+
formData: {},
108

119
init: function () {
1210
console.log('FlowForge Alpine component initialized')
13-
// Initialise the Alpine component here, if you need to.
11+
// Initialize any event listeners or plugins
12+
// Listen for form submission success
13+
this.$wire.$on('card-created', () => {
14+
this.showSuccessNotification('Card created successfully');
15+
});
16+
17+
this.$wire.$on('card-updated', () => {
18+
this.showSuccessNotification('Card updated successfully');
19+
});
20+
21+
this.$wire.$on('card-deleted', () => {
22+
this.showSuccessNotification('Card deleted successfully');
23+
});
1424
},
1525

1626
openCreateModal(columnId) {
17-
this.currentColumn = columnId;
27+
// Reset form data
1828
this.formData = {
19-
[state.statusField]: columnId
20-
};
21-
this.$dispatch('open-modal', { id: 'create-card-modal' })
29+
[state.statusField]: columnId,
30+
title: '',
31+
description: ''
32+
};
33+
this.currentColumn = columnId;
34+
35+
this.$dispatch('open-modal', { id: 'create-card-modal' });
36+
37+
// Focus title field when modal opens
38+
setTimeout(() => {
39+
const titleInput = document.querySelector('#create-card-modal input[type="text"]');
40+
if (titleInput) titleInput.focus();
41+
}, 100);
2242
},
2343

2444
submitCreateForm() {
25-
console.log(this.formData);
45+
if (!this.formData.title) {
46+
return this.showErrorNotification('Title is required');
47+
}
48+
2649
this.$wire.createCard(this.formData).then(cardId => {
2750
if (cardId) {
2851
this.$dispatch('close-modal', { id: 'create-card-modal' });
2952
this.formData = {};
53+
54+
// Highlight the new card
55+
setTimeout(() => {
56+
const cardElement = document.querySelector(`[x-sortable-item="${cardId}"]`);
57+
if (cardElement) {
58+
cardElement.classList.add('animate-kanban-card-add');
59+
setTimeout(() => {
60+
cardElement.classList.remove('animate-kanban-card-add');
61+
}, 500);
62+
}
63+
}, 100);
3064
}
65+
}).catch(error => {
66+
this.showErrorNotification('Failed to create card');
67+
console.error('Error creating card:', error);
3168
});
3269
},
3370

@@ -39,27 +76,72 @@ export default function flowforge({state}) {
3976
this.formData = {...card};
4077
this.formData[state.statusField] = columnId;
4178

42-
this.$dispatch('open-modal', { id: 'edit-card-modal' })
79+
this.$dispatch('open-modal', { id: 'edit-card-modal' });
80+
81+
// Focus title field when modal opens
82+
setTimeout(() => {
83+
const titleInput = document.querySelector('#edit-card-modal input[type="text"]');
84+
if (titleInput) titleInput.focus();
85+
}, 100);
4386
},
4487

4588
submitEditForm() {
89+
if (!this.formData.title) {
90+
return this.showErrorNotification('Title is required');
91+
}
92+
4693
this.$wire.updateCard(this.currentCard.id, this.formData).then(result => {
4794
if (result) {
4895
this.$dispatch('close-modal', { id: 'edit-card-modal' });
4996
this.formData = {};
97+
98+
// Highlight the updated card
99+
setTimeout(() => {
100+
const cardElement = document.querySelector(`[x-sortable-item="${this.currentCard.id}"]`);
101+
if (cardElement) {
102+
cardElement.classList.add('animate-kanban-card-move');
103+
setTimeout(() => {
104+
cardElement.classList.remove('animate-kanban-card-move');
105+
}, 500);
106+
}
107+
}, 100);
50108
}
109+
}).catch(error => {
110+
this.showErrorNotification('Failed to update card');
111+
console.error('Error updating card:', error);
51112
});
52113
},
53114

54115
deleteCard() {
55116
if (confirm('Are you sure you want to delete this card? This action cannot be undone.')) {
56117
this.$wire.deleteCard(this.currentCard.id).then(result => {
57118
if (result) {
58-
this.$dispatch('close-modal', { id: 'delete-card-modal' });
119+
this.$dispatch('close-modal', { id: 'edit-card-modal' });
59120
this.formData = {};
60121
}
122+
}).catch(error => {
123+
this.showErrorNotification('Failed to delete card');
124+
console.error('Error deleting card:', error);
61125
});
62126
}
63127
},
128+
129+
showSuccessNotification(message) {
130+
// Trigger Filament notification if available
131+
if (window.Filament && window.Filament.notify) {
132+
window.Filament.notify.success(message);
133+
} else {
134+
console.log('Success:', message);
135+
}
136+
},
137+
138+
showErrorNotification(message) {
139+
// Trigger Filament notification if available
140+
if (window.Filament && window.Filament.notify) {
141+
window.Filament.notify.error(message);
142+
} else {
143+
console.error('Error:', message);
144+
}
145+
}
64146
}
65147
}

‎resources/views/livewire/board.blade.php‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@props(['columns', 'config'])
22

33
<div
4-
class="w-full h-full flex flex-col"
4+
class="w-full h-full flex flex-col relative"
55
x-load
66
x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('flowforge', package: 'relaticle/flowforge'))]"
77
x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('flowforge', package: 'relaticle/flowforge') }}"
@@ -12,6 +12,14 @@ class="w-full h-full flex flex-col"
1212
}
1313
})"
1414
>
15+
<!-- Loading overlay for board operations -->
16+
<div wire:loading.delay.longer wire:target="updateColumnCards"
17+
class="absolute inset-0 bg-white/30 dark:bg-gray-900/30 z-10 backdrop-blur-sm flex items-center justify-center">
18+
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 flex items-center gap-3">
19+
<x-filament::loading-indicator class="h-6 w-6" />
20+
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ __('Updating board...') }}</span>
21+
</div>
22+
</div>
1523

1624
<!-- Board Content -->
1725
<div class="flex flex-row h-full w-full overflow-x-auto overflow-y-hidden py-4 px-2 gap-4 kanban-board">

0 commit comments

Comments
 (0)