fix: add error message display to edit commander modal
- Added error display section to edit modal form - Ensures validation errors are visible when updating commander - Matches error display styling of add commander form - JavaScript error parsing already in place for validation details
This commit is contained in:
@@ -477,32 +477,58 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Actions -->
|
||||
<div class="flex justify-end space-x-4">
|
||||
<button
|
||||
type="button"
|
||||
@click="cancelEdit()"
|
||||
class="btn btn-secondary"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="editSubmitting"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
<span x-show="!editSubmitting">Update Commander</span>
|
||||
<span
|
||||
x-show="editSubmitting"
|
||||
class="loading-spinner w-5 h-5 mr-2 inline-block align-middle"
|
||||
></span>
|
||||
<span x-show="editSubmitting">Updating...</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<!-- Form Actions -->
|
||||
<div class="flex justify-end space-x-4">
|
||||
<button
|
||||
type="button"
|
||||
@click="cancelEdit()"
|
||||
class="btn btn-secondary"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="editSubmitting"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
<span x-show="!editSubmitting">Update Commander</span>
|
||||
<span
|
||||
x-show="editSubmitting"
|
||||
class="loading-spinner w-5 h-5 mr-2 inline-block align-middle"
|
||||
></span>
|
||||
<span x-show="editSubmitting">Updating...</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Error Message -->
|
||||
<div
|
||||
x-show="serverError"
|
||||
x-transition
|
||||
class="rounded-md bg-red-50 p-4 mt-4"
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<svg
|
||||
class="h-5 w-5 text-red-400"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm text-red-800" x-text="serverError"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Scripts -->
|
||||
|
||||
@@ -193,18 +193,26 @@ function commanderManager() {
|
||||
}
|
||||
)
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
const index = this.commanders.findIndex(
|
||||
(c) => c.id === this.editingCommander.id
|
||||
)
|
||||
if (index !== -1) {
|
||||
this.commanders[index] = data.commander
|
||||
}
|
||||
this.cancelEdit()
|
||||
} else {
|
||||
this.serverError = 'Failed to update commander'
|
||||
}
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
const index = this.commanders.findIndex(
|
||||
(c) => c.id === this.editingCommander.id
|
||||
)
|
||||
if (index !== -1) {
|
||||
this.commanders[index] = data.commander
|
||||
}
|
||||
this.cancelEdit()
|
||||
} else {
|
||||
const errorData = await response.json()
|
||||
// Format validation errors if they exist
|
||||
if (errorData.details && Array.isArray(errorData.details)) {
|
||||
this.serverError = errorData.details
|
||||
.map((err) => err.message || err)
|
||||
.join(', ')
|
||||
} else {
|
||||
this.serverError = errorData.message || 'Failed to update commander'
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Update commander error:', error)
|
||||
this.serverError = 'Network error occurred'
|
||||
|
||||
Reference in New Issue
Block a user