# Suodatinpalkki: Progress, Bugs ja Little Wins

<!--category-- HTMX, ASP.NET, JavaScript -->
<datetime class="hidden">2025-11-10T14:10</datetime>

## Johdanto

Olen koonnut blogiluetteloon kunnon suodatinpalkin: kielen, päivämäärävalikoiman, lajittelun ja paginaation, joka pysyy näppäränä HTMX:n kanssa.

Se sulkeutuu nyt, mutta kuten aina, viimeinen 20 prosenttia on mausteinen: päivämäärät, välimuistit ja miksi se toimii paikallisesti, mutta ei vaihdon jälkeen?[Jos haluat syväsukelluksen, jossa on paljon koodia ja kaavioita, katso:](/blog/filterbarprogressandissues)

> /blog/filterbar-kehitys ja ongelmat

[TOC]

## Muista, että tämä sivusto on työn alla, tällaista tulee tapahtumaan, kun syöt omaa koiranruokaasi!

- TL;DR
- Uusi suodatinpalkki: Language + Sort + Date Range
- HTMX-osittaiset swap-vaihdot pitävät sivun nopeana, taka-/tulevaisuus toimii, koska painan aina päivitettyä URL-osoitetta`/blog/calendar-days`Kalenterin kohokohdat tulevat pienestä
- päätetapahtuma
- Kiinteä: päivämäärän vaihteluvälit poistetaan kieleen/järjestykseen vaihdettaessa
- Kiinteä: kalenteri ei virkistä HTMX-swapien tai teemamuutosten jälkeen

## Palvelimen välimuistit vaihtelevat nyt kaikkien asiaa koskevien kyselyavainten mukaan

- Mikä toimii hyvin?
- URL-ensikäyttäytyminen: Kaikki vuorovaikutukset päivittävät URL-osoitteen; voit linkittää suodattimen tilaan`LinkUrl`Paginointi säilyttää nykyiset suodattimet (
- on asetettu palvelimelle)

```csharp
// 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);
}
```

## Flatpicker-alueen oletukset nykyisille kyselyarvoille, jos läsnä ja korostaa päiviä viestien kanssa

### Korjaamani bugit (ja uudet ominaisuudet!)

Näkyvyys ja sisällönhallinta

- **Suurin lisäys: kunnollinen jälkinäkyvyyden hallinta:**Piilopaikat`IsHidden`: Viestit voidaan nyt merkitä piiloon (
- **lippu) ja ei näy listauksissa**Aikataulutettu julkaisu`ScheduledPublishDate`: Postilla voi olla
- **ja ilmestyy vasta sen jälkeen**Poistetut virat`IsPinned`: Viestit, joihin on merkitty

```csharp
// 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);
}
```

### Näytä aina ensin sivulla 1 (suuret ilmoille)

- **Päivämäärän vaihteluvälin parannukset`/blog/date-range`Uusi**päätetapahtuma
- **: Palauttaa min/max-päivämäärät kaikille viestille (kielitietoisuus), jotta päivämäärän poimija voi asettaa järkevät rajat**Tyhjennä paramitagien apuri`<clear-param>`: Lisätty

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

### lappujen auttaja selvittää helposti kyselyn parametrit

- Virhekorjauksia
  - Päivämäärän menettäminen kielen tai tilauksen vaihtamisen yhteydessä`new URL(window.location.href)`Korjaa: Aloita

```js
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);
});
```

- ja ohita vain vaihtuvat paramit; jos Flatpickerillä on valikoima, hae se uudelleen.
  
  - Kalenterin kohokohdat eivät virkistä HTMX-swapien jälkeen`fp.redraw()`Korjata: Tuhoa/luo Flatpicker initissä, nouta sitten kohokohtia näkyvälle kuukaudelle ja soita`htmx:afterSwap`.

- ; myös uudelleen käynnistäminen
  
  - Pimeän tilan tyylit eivät koske kalenteria`<html class>`Korjaa: tarkkaile`fp.redraw()`ja soittaa

## kun se muuttuu.

```mermaid
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
```

## Miten palaset puhuvat

HTMX-sivun hakupyyntö`pagerequest`Suodatinpalkki käyttää custom-palkkia

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

Otsikko, joka auttaa palvelinta erottamaan koko sivun kuormitukset ja osittaiset HTMX-swapit:

> **Näin ohjain voi palauttaa vain osittaisen näkymän HTMX-pyyntöihin ja koko sivun näkymän suoralle navigoinnille.**Huomautus

## : Hakemistotunnisteen laajennus ja kyselyparametrin selkeämpi alppi.js-komponentti ansaitsee oman syväsukelluksensa – selvitän nämä yksityiskohtaisesti tulevassa julkaisussa, jossa kerrotaan uudelleenkäytettävistä HTMX/Alppien komponenteista.

- Vielä tekemättä
- Quick date presets (Viimeisin 7/30 päivää, tänä vuonna)
- Paikallisvarastoinninsiemenet kieleen

Näppäimistötuki kantamanvalitsimessa