Bar de filtration: ProgrèsM SK1 Erreurs, et faibles victoires (Français (French))

Introduction

I’ j’ai mis en place une barre de filtrage appropriée pour la liste des blogs : langage , étendue de dates MSC3 classement M SK4 et pagerie qui reste rapide avec HTMX MNK5 Il MRK6 est clos maintenant MMK7 mais comme toujours MBK8 le dernier MBK9 est le bit spicy MGK10 datesMDK11 caches M GK12 et MZK13 pourquoi cela fonctionne localement, mais pas après un échangeM GK14

Si vous voulez la plongée profonde avec beaucoup de codes et de diagrammes, voir /blogM SK1filterbarprogressandissues

rappelez-vous que ce site est un travail en cours.

TL;DR

Nouveau barreau de filtrage: Langue M SK1 Sortie + Étendue des dates
Les échanges partiels HTMX permettent de garder la page rapide; retour/avance fonctionne parce que je pousse toujours l'URL mise à jour
Les mises en valeur du calendrier proviennent d'un petit /blog/calendar-days point final
Les plages de dates fixes: sont supprimées lors du changement d'ordre de la langue/
Fixed: calendar not refreshing after HTMX swaps or theme changes
Le caching du serveur varie maintenant selon toutes les clés de recherche pertinentes

Qu’est-ce qui fonctionne bien?

URL-premier comportementM SK1 Toutes les interactions mettent à jour l’URL ; vous pouvez deep- lier à un état de filtrage
La pagination préserve les filtres actuels (LinkUrl est établi sur le serveur)
Flatpickr range par défaut aux valeurs de la demande actuelle si elle présente et souligne les jours avec des articles

// Server: cache and vary for index
[ResponseCache(Duration = 300, VaryByHeader = "hx-request",
  VaryByQueryKeys = new[] { "page", "pageSize", nameof(startDate), nameof(endDate), nameof(language), nameof(orderBy), nameof(orderDir) },
  Location = ResponseCacheLocation.Any)]
[OutputCache(Duration = 3600, VaryByHeaderNames = new[] { "hx-request" },
  VaryByQueryKeys = new[] { nameof(page), nameof(pageSize), nameof(startDate), nameof(endDate), nameof(language), nameof(orderBy), nameof(orderDir) })]
public async Task<IActionResult> Index(int page = 1, int pageSize = 20, DateTime? startDate = null, DateTime? endDate = null,
  string language = MarkdownBaseService.EnglishLanguage, string orderBy = "date", string orderDir = "desc")
{
    var posts = await blogViewService.GetPagedPosts(page, pageSize, language: language, startDate: startDate, endDate: endDate);
    posts.LinkUrl = Url.Action("Index", "Blog", new { startDate, endDate, language, orderBy, orderDir });
    if (Request.IsHtmx()) return PartialView("_BlogSummaryList", posts);
    return View("Index", posts);
}

Les bugs que j’ai corrigés (et les nouvelles fonctionnalités!)

Visibilité et contrôle du contenu

Le plus grand ajout: gestion adéquate de la visibilité postérieure:

Postes cachés: Les postes peuvent maintenant être marqués comme cachés (IsHidden flag) et wonM SK1 ne figurent pas dans les listes
Publication prévue: Les postes peuvent avoir un ScheduledPublishDate et ne se manifestent qu'après cette période
Postes affilés: Postes marqués par IsPinned apparaître toujours au premier rang de la page 1 (agréable pour les annoncesM SK2

// BlogService now filters appropriately
var now = DateTimeOffset.UtcNow;
postQuery = postQuery.Where(x =>
    !x.IsHidden &&
    (x.ScheduledPublishDate == null || x.ScheduledPublishDate <= now));

// Pinned posts sorted first on page 1
if (isFirstPage)
{
    postQuery = postQuery.OrderByDescending(x => x.IsPinned)
                         .ThenByDescending(x => x.PublishedDate.DateTime);
}

Amélioration de la portée des dates

Nouveau /blog/date-range point final: Retourne les dates minimalesM SK1max dans tous les postes (language-awareMSC4 afin que le choix de la date puisse fixer des limites sensibles
Supprimer l'aide à la balise param: Ajouté <clear-param> aide-étiquette pour nettoyer facilement les paramètres de la demande

<clear-param name="startDate">Clear Date</clear-param>
<clear-param all="true" exclude="language">Clear All Filters</clear-param>

Fixes de bogues

Perte de la gamme des dates lors du changement de langue ou d'ordre
- Fix: Démarrer de new URL(window.location.href) et ne surrider que les paramètres changeants; si Flatpickr a une sélection, reM SK2 l'appliquer .

langSelect.addEventListener('change', async function(){
  const u = new URL(window.location.href);
  u.searchParams.set('language', langSelect.value);
  u.searchParams.set('page','1');
  const [ob,od] = (orderSelect.value||'date_desc').split('_');
  u.searchParams.set('orderBy', ob);
  u.searchParams.set('orderDir', od);
  if(input._flatpickr && input._flatpickr.selectedDates.length===2){
    const [s,e] = input._flatpickr.selectedDates;
    u.searchParams.set('startDate', s.toISOString().substring(0,10));
    u.searchParams.set('endDate',   e.toISOString().substring(0,10));
  }
  applyNavigation(u);
});

Les mises en valeur du calendrier ne se rafraîchissent pas après les échanges HTMX
- Fix: DétruireM SK1créer Flatpickr sur init, puis récupérer les mises en valeur pour le mois visible et appeler fp.redraw(); aussi reM SK1run init sur htmx:afterSwap.
Les styles du mode foncé ne s'appliquent pas au calendrier
- Fix: Observation <html class> et appeler fp.redraw() quand il change.

Comment les pièces parlent

sequenceDiagram
  participant User
  participant JS as blog-index.js
  participant HT as HTMX
  participant S as Server

  User->>JS: Change language/order or pick a date range
  JS->>JS: Update URLSearchParams, pushState
  JS->>HT: htmx.ajax('GET', /blog?...)
  HT->>S: GET /blog
  S-->>HT: HTML partial (_BlogSummaryList)
  HT-->>User: Swap #content

Détection des demandes de page HTMX

La barre de filtrage utilise une option personnalisée pagerequest header pour aider le serveur à distinguer les charges de page complètes et les échanges partiels HTMX:

public static bool IsPageRequest(this HttpRequest request)
{
    return request.Headers.ContainsKey("pagerequest") &&
           request.Headers["pagerequest"] == "true";
}

Cela permet au contrôleur de retourner uniquement la vue partielle des demandes HTMX et les vues de page complète pour la navigation directe.

Remarque: L'extension de l'aide à balisage et le paramètre de demande plus clair AlpineM SK1js composant méritent leur propre plongée profonde —I'Je les aborderai en détail dans un prochain article sur la construction réutilisable HTMXMSC4Components alpinsMNK5

Néanmoins à faire

Présets rapides de date (La dernière 7/30 joursM SK2 Cette année)
LocalStorage seed pour la langue
Soutien de la claviere sur l'échantillonnage du champ

Aperçu d'un problème? Veuillez laisser un commentaire avec votre navigateur M SK1 étapes.