# Müşteri Listesi Etkileşimi

https://dev.wisecp.com/tr/musteri-listesi-etkilesimi

Preset'inizin yazdığı satırlar ile onları arayan, sıralayan ve sayfalayan betik sabit bir öznitelik kümesi üzerinden buluşur.

## Genel Bakış

Kayıt listesi iki kipten biriyle sunulur ve tema markup'ı ikisinde de aynıdır. Kipi satır sayısı belirler, siz değil.

- **İstemci kipi**: Eşiğin altında bütün satırlar ilk yanıtta gelir ve kapta `data-ajax` bulunmaz. Arama, filtre, sıralama ve sayfalama tarayıcıda, her satırın öznitelikleri üzerinden çalışır.
- **Sunucu kipi**: Eşiğin üstünde kap `data-ajax` taşır ve sayfalar tek tek yüklenir. Toplamlar yerel olarak sayılmak yerine yanıttan gelir.

> **Öznitelikler iki kipte de zorunludur**
> 
> İstemci kipi bir filtrenin neyi seçtiğine bunlara bakarak karar verir. Sunucu kipi de sıralama ve görsel ölçerler için onları okumaya devam eder. Birini yazmayan satır reddedilmez ve hata görünmez: ait olduğu filtreyle sessizce eşleşmeyi bırakır.

## Ön Koşullar

- Preset'iniz satırı `$row["html"]` içinde döndürüyor olmalı.
- View'ınızda `.list-rows` kabı ve üç metin özniteliği bulunmalı.
- Temanızda bir `list.js` olmalı; genelde başka bir temanınkini kopyalayarak başlanır.

## Yapı

Betik için üç düğüm önemlidir ve onları sınıf ya da rolle bulur, konumla değil.

- **.list-rows**: Kap. Sunucu kipinde veri adresini, iki kipte de metinleri taşır.
- **.list-item**: Preset'inizin yazdığı bir satır; aşağıdaki öznitelikleri taşır.
- **[data-role="empty"]**: Eşleşme yok bloğu. Kabın içinde durur ve betik onu gösterir; listenin tamamının yerine geçen sıfır kayıt bloğuyla aynı şey değildir.

## Referans

### Satır öznitelikleri

Preset'iniz bunları satır elemanına yazar. Her birinin tek bir okuyucusu vardır, yani birini yazmamak tam olarak o özelliği devre dışı bırakır.

| Öznitelik | Değer | Yazılmazsa ne çalışmaz |
| --- | --- | --- |
| `data-status` | durum anahtarı | Durum filtresi ve varsayılan sıralama |
| `data-group` | tip anahtarı | Tip filtresi; değer araç şeridindeki seçenekle aynı olmalı |
| `data-flag` | bölüm anahtarı | Listenin üstündeki kutu şeridi |
| `data-name` | görünen ad | Arama; önce bunu okur |
| `data-search` | ek kelimeler | Adda olmayan bir şeyde arama: alan adı, numara |
| `data-price` | ham tutar | Fiyata göre sıralama |
| `data-due` | saniye değeri | Vadeye göre sıralama ve kalan süre ölçeri |
| `data-start` | saniye değeri | Yeniye göre sıralama ve iki ucu isteyen dönem ölçeri |

Bu değerler saniyedir, biçimlenmiş tarih değil: betik onları sayı olarak karşılaştırır ve biçimlenmiş bir değer sıfır okunur.

### Kap öznitelikleri

- **data-ajax**: View, tablonun kendi adresinden yazar ve yalnız sunucu kipinde bulunur. Yokluğu istemci kipinin işaretidir, bu yüzden yer tutucu bir değer yazmayın.
- **data-noun**: Betiğin içindeki anahtar, İngilizcedir ve kimseye gösterilmez.
- **data-txt-count · data-txt-nores · data-txt-noun**: Sayaç cümlesi, eşleşme yok cümlesi ve kaydın adı. İlk ikisi aşağıdaki yer tutucuları taşır.

Cümleler birleştirilmez, doldurulur; böylece ifade çevirmenin elinde kalır:

- **_START_ · _END_ · _TOTAL_ · _NOUN_**: Sayfadaki ilk satır, son satır, süzülmüş toplam ve `data-txt-noun`'daki kelime. Her biri birden çok kez geçebilir.

### Sunucu yanıtı

Sunucu kipinde betik tablonun kendi adresine sorar ve panelin kullandığı şekli bekler:

```json
{
  "type": "partial",
  "total": 240,
  "total_filter": 18,
  "body": "<article class=\"list-item\" ...>...</article>..."
}
```

İstek `page`, `perPage`, `search`, `filter[type]`, `filter[status]`, `order` ve `direction` taşır. Hepsini bileşen kurar, yani araç şeridine eklediğiniz bir filtre sorguya ancak denetleyici onu bildirdiyse ulaşır.

## Örnek

```php
$row["html"] = '<article class="list-item"'
    . ' data-status="' . $status . '"'
    . ' data-group="'  . $type . '"'
    . ' data-flag="'   . $segment . '"'
    . ' data-name="'   . htmlspecialchars($name) . '"'
    . ' data-search="' . htmlspecialchars($domain . ' ' . $service["id"]) . '"'
    . ' data-price="'  . $amount . '"'
    . ' data-due="'    . strtotime($service["duedate"]) . '"'
    . ' data-start="'  . strtotime($service["cdate"]) . '">'
    . $body
    . '</article>';
```

## Tuzaklar

> **Bir filtre değerinin iki ucu vardır**
> 
> Araç şeridindeki seçenek ile satırdaki öznitelik aynı değeri taşımak zorundadır. İkisi ayrıştığında filtre hiçbir şey seçmez ve boş sonuç geçerli bir yanıt olduğu için kimseye bir hata olduğu söylenmez.

> **İki boş blok farklıdır**
> 
> Eşleşme yok bloğu kabın içinde durur ve betik onu gösterir. Sıfır kayıt bloğu araç şeridi, liste ve sayfalayıcının yerine birlikte geçer ve view buna betik başlamadan önce karar verir. Yalnız birini yazmak ziyaretçiyi boş bir sayfada çıkışsız bırakır.

> **Yazmak önceki isteği iptal eder**
> 
> Sunucu kipinde her tuş vuruşu bir öncekinin yerine geçer ve eski istek bilerek düşürülür. Üzerine kendi zamanlayıcınızı eklemeyin: ikisi birlikte listeyi yanıtlar arasında titretir.

> **Biçimlenmiş değer sıralamayı bozar**
> 
> Tarihler saniye, tutarlar ham sayı olarak girer. Para simgesi ya da binlik ayracı taşıyan bir değer sıfır okunur ve her sıralamada dibe iner.

## İlgili Makaleler

- [Tablolar ve Kayıt Listeleri](https://dev.wisecp.com/tr/tablolar-ve-kayit-listeleri)
- [Müşteri Paneli](https://dev.wisecp.com/tr/musteri-paneli)
- [Tema Çevirileri](https://dev.wisecp.com/tr/tema-cevirisi)