diff --git a/components/file_metadata.templ b/components/file_metadata.templ index 4cafbe2..1f6f48b 100644 --- a/components/file_metadata.templ +++ b/components/file_metadata.templ @@ -185,6 +185,28 @@ templ FileMetadataList(ctx context.Context, data FileMetadataListData) { console.log("Notyf initialized:", window.notyf); } + // HTMX indicator styles + document.addEventListener('DOMContentLoaded', function() { + // Add CSS for HTMX loading indicators + if (!document.getElementById('htmx-indicator-style')) { + const style = document.createElement('style'); + style.id = 'htmx-indicator-style'; + style.textContent = ` + .htmx-indicator { + opacity: 0; + transition: opacity 200ms ease-in; + } + .htmx-request .htmx-indicator { + opacity: 1; + } + .htmx-request.htmx-indicator { + opacity: 1; + } + `; + document.head.appendChild(style); + } + }); + // Track all HTMX events for debugging document.addEventListener('htmx:beforeRequest', function(event) { // Check if this is a DELETE request by examining the URL and method @@ -303,7 +325,12 @@ templ FileMetadataList(ctx context.Context, data FileMetadataListData) {

Filter Files

-
+ if data.Job == nil {
@@ -331,6 +358,9 @@ templ FileMetadataList(ctx context.Context, data FileMetadataListData) { +
+ +
@@ -344,115 +374,8 @@ templ FileMetadataList(ctx context.Context, data FileMetadataListData) { Page { strconv.Itoa(data.Page) } of { strconv.Itoa(data.TotalPages) } -
- if len(data.Files) > 0 { - -
- - for _, file := range data.Files { - @FileMetadataDialog( - fmt.Sprintf("delete-file-dialog-%d", file.ID), - "Delete File Metadata", - fmt.Sprintf("Are you sure you want to delete the metadata for '%s'? This cannot be undone.", file.FileName), - "btn-danger", - "Delete", - "delete", - file.ID, - file.FileName, - "list", - ) - } -
- - - - - - - - - if data.Job == nil { - - } - - - - - for _, file := range data.Files { - - - - - - - if data.Job == nil && file.Job.ID > 0 { - - } - - - } - -
IDFilenameSizeProcessedStatusJobActions
{ strconv.FormatUint(uint64(file.ID), 10) } - - { file.FileName } - - { formatFileSize(file.FileSize) }{ file.ProcessedTime.Format("2006-01-02 15:04:05") } - - { file.Status } - - - - { file.Job.Name } - - - - - - - -
- - - if data.TotalPages > 1 { -
-
- if data.Page > 1 { - - - - } - - for i := 1; i <= data.TotalPages; i++ { - if i == data.Page { - { strconv.Itoa(i) } - } else if i == 1 || i == data.TotalPages || (i >= data.Page-2 && i <= data.Page+2) { - - { strconv.Itoa(i) } - - } else if i == data.Page-3 || i == data.Page+3 { - ... - } - } - - if data.Page < data.TotalPages { - - - - } -
-
- } - } else { -
- -

No file metadata found matching your criteria.

-
- } +
+ @FileMetadataListPartial(data)
@@ -466,7 +389,7 @@ func buildPaginationURL(data FileMetadataListData, page int) string { baseURL = fmt.Sprintf("/files/job/%d", data.Job.ID) } - url := fmt.Sprintf("%s?page=%d&limit=%d", baseURL, page, data.Limit) + url := fmt.Sprintf("%s?page=%d&limit=%d&htmx=true", baseURL, page, data.Limit) if data.Filter.Status != "" { url += "&status=" + data.Filter.Status @@ -791,6 +714,28 @@ templ FileMetadataSearch(ctx context.Context, data FileMetadataSearchData) { console.log("Notyf initialized:", window.notyf); } + // HTMX indicator styles + document.addEventListener('DOMContentLoaded', function() { + // Add CSS for HTMX loading indicators + if (!document.getElementById('htmx-indicator-style')) { + const style = document.createElement('style'); + style.id = 'htmx-indicator-style'; + style.textContent = ` + .htmx-indicator { + opacity: 0; + transition: opacity 200ms ease-in; + } + .htmx-request .htmx-indicator { + opacity: 1; + } + .htmx-request.htmx-indicator { + opacity: 1; + } + `; + document.head.appendChild(style); + } + }); + // Track all HTMX events for debugging document.addEventListener('htmx:beforeRequest', function(event) { // Check if this is a DELETE request by examining the URL and method @@ -903,7 +848,12 @@ templ FileMetadataSearch(ctx context.Context, data FileMetadataSearchData) {
-
+
Search Files +
+ +
@@ -959,111 +912,8 @@ templ FileMetadataSearch(ctx context.Context, data FileMetadataSearchData) { Page { strconv.Itoa(data.Page) } of { strconv.Itoa(data.TotalPages) } -
- if len(data.Files) > 0 { - -
- - for _, file := range data.Files { - @FileMetadataDialog( - fmt.Sprintf("delete-file-dialog-%d", file.ID), - "Delete File Metadata", - fmt.Sprintf("Are you sure you want to delete the metadata for '%s'? This cannot be undone.", file.FileName), - "btn-danger", - "Delete", - "delete", - file.ID, - file.FileName, - "list", - ) - } -
- - - - - - - - - - - - - - for _, file := range data.Files { - - - - - - - - - - } - -
IDFilenameSizeProcessedStatusJobActions
{ strconv.FormatUint(uint64(file.ID), 10) } - - { file.FileName } - - { formatFileSize(file.FileSize) }{ file.ProcessedTime.Format("2006-01-02 15:04:05") } - - { file.Status } - - - - { file.Job.Name } - - - - - - - -
- - - if data.TotalPages > 1 { -
-
- if data.Page > 1 { - - - - } - - for i := 1; i <= data.TotalPages; i++ { - if i == data.Page { - { strconv.Itoa(i) } - } else if i == 1 || i == data.TotalPages || (i >= data.Page-2 && i <= data.Page+2) { - - { strconv.Itoa(i) } - - } else if i == data.Page-3 || i == data.Page+3 { - ... - } - } - - if data.Page < data.TotalPages { - - - - } -
-
- } - } else { -
- -

No files found matching your search criteria.

-
- } +
+ @FileMetadataSearchPartial(data)
} @@ -1073,7 +923,7 @@ templ FileMetadataSearch(ctx context.Context, data FileMetadataSearchData) { // buildSearchPaginationURL builds a URL for search pagination links func buildSearchPaginationURL(data FileMetadataSearchData, page int) string { - url := fmt.Sprintf("/files/search?page=%d&limit=%d", page, data.Limit) + url := fmt.Sprintf("/files/search?page=%d&limit=%d&htmx=true", page, data.Limit) if data.Filter.Status != "" { url += "&status=" + data.Filter.Status @@ -1100,4 +950,282 @@ func buildSearchPaginationURL(data FileMetadataSearchData, page int) string { } return url +} + +// FileMetadataListPartial renders just the list content for HTMX requests +templ FileMetadataListPartial(data FileMetadataListData) { + if len(data.Files) > 0 { + +
+ + for _, file := range data.Files { + @FileMetadataDialog( + fmt.Sprintf("delete-file-dialog-%d", file.ID), + "Delete File Metadata", + fmt.Sprintf("Are you sure you want to delete the metadata for '%s'? This cannot be undone.", file.FileName), + "btn-danger", + "Delete", + "delete", + file.ID, + file.FileName, + "list", + ) + } +
+ + + + + + + + + if data.Job == nil { + + } + + + + + for _, file := range data.Files { + + + + + + + if data.Job == nil && file.Job.ID > 0 { + + } + + + } + +
IDFilenameSizeProcessedStatusJobActions
{ strconv.FormatUint(uint64(file.ID), 10) } + + { file.FileName } + + { formatFileSize(file.FileSize) }{ file.ProcessedTime.Format("2006-01-02 15:04:05") } + + { file.Status } + + + + { file.Job.Name } + + + + + + + +
+ + + if data.TotalPages > 1 { +
+
+ if data.Page > 1 { + + + + } else { + + + + } + + for i := 1; i <= data.TotalPages; i++ { + if i == data.Page { + + { strconv.Itoa(i) } + + } else if i == 1 || i == data.TotalPages || (i >= data.Page-2 && i <= data.Page+2) { + + { strconv.Itoa(i) } + + } else if i == data.Page-3 || i == data.Page+3 { + ... + } + } + + if data.Page < data.TotalPages { + + + + } else { + + + + } +
+ +
+ +
+
+ } + } else { +
+ +

No file metadata found matching your criteria.

+
+ } +} + +// FileMetadataSearchPartial renders just the search results content for HTMX requests +templ FileMetadataSearchPartial(data FileMetadataSearchData) { + if len(data.Files) > 0 { + +
+ + for _, file := range data.Files { + @FileMetadataDialog( + fmt.Sprintf("delete-file-dialog-%d", file.ID), + "Delete File Metadata", + fmt.Sprintf("Are you sure you want to delete the metadata for '%s'? This cannot be undone.", file.FileName), + "btn-danger", + "Delete", + "delete", + file.ID, + file.FileName, + "list", + ) + } +
+ + + + + + + + + + + + + + for _, file := range data.Files { + + + + + + + + + + } + +
IDFilenameSizeProcessedStatusJobActions
{ strconv.FormatUint(uint64(file.ID), 10) } + + { file.FileName } + + { formatFileSize(file.FileSize) }{ file.ProcessedTime.Format("2006-01-02 15:04:05") } + + { file.Status } + + + + { file.Job.Name } + + + + + + + +
+ + + if data.TotalPages > 1 { +
+
+ if data.Page > 1 { + + + + } else { + + + + } + + for i := 1; i <= data.TotalPages; i++ { + if i == data.Page { + + { strconv.Itoa(i) } + + } else if i == 1 || i == data.TotalPages || (i >= data.Page-2 && i <= data.Page+2) { + + { strconv.Itoa(i) } + + } else if i == data.Page-3 || i == data.Page+3 { + ... + } + } + + if data.Page < data.TotalPages { + + + + } else { + + + + } +
+ +
+ +
+
+ } + } else { +
+ +

No files found matching your search criteria.

+
+ } } \ No newline at end of file diff --git a/components/history.templ b/components/history.templ index ddf63e7..b1b7923 100644 --- a/components/history.templ +++ b/components/history.templ @@ -108,22 +108,24 @@ templ HistoryContent(ctx context.Context, data HistoryData) { if data.TotalPages > 1 { -
-
+
+
if data.CurrentPage > 1 { } else { - + Previous } @@ -134,19 +136,21 @@ templ HistoryContent(ctx context.Context, data HistoryData) { hx-target="#history-content" hx-vals={ fmt.Sprintf(`{"page": %d, "pageSize": %d, "search": "%s"}`, data.CurrentPage+1, data.PageSize, data.SearchTerm) } hx-indicator="#mobile-next-indicator" - class="ml-3 relative inline-flex items-center px-4 py-2 border border-secondary-300 dark:border-secondary-600 text-sm font-medium rounded-md text-secondary-700 dark:text-secondary-200 bg-white dark:bg-secondary-700 hover:bg-secondary-50 dark:hover:bg-secondary-600 transition-colors"> - Next - - + class="flex-1 h-10 flex items-center justify-center bg-secondary-200 text-secondary-800 hover:bg-secondary-300 rounded dark:bg-secondary-700 dark:text-secondary-200 dark:hover:bg-secondary-600 relative"> + + Next + + + } else { - + Next }
-