# Dinamik Bilesen Sistemi - Uygulama Plani

## Ozet
fikoyt-ui'da lazy-loaded, decorator-tabanli dinamik bilesen registry sistemi. Tanim siniflari `@DinamikBilesen('isim')` ile register olur, sinifin icinde sinsirsiz sayida gorunum (paylas_kutusu, paylasilmis_kart, sayfa, widget_*, vb.) tanimlanir. Her gorunum ayri bir Angular component'tir.

---

## Adim 1: Altyapi (fikoyt-ui)

### 1a. Interface tanimlari
**Dosya:** `fikoyt-sistem/src/service/fikoyt-ui/interfaces/IDinamikBilesen.interface.ts`

```typescript
import { Type } from '@angular/core';

export interface IDinamikBilesenTanim {
  bilesen_id: string;
  [gorunum: string]: Type<any> | string;  // sinirsiz gorunum alani
}

export interface IDinamikBilesenKayit {
  id: string;
  yukleyici: () => Promise<any>;  // lazy loader
  tanim?: IDinamikBilesenTanim;   // yuklendikten sonra dolar
}
```

### 1b. @DinamikBilesen decorator
**Dosya:** `fikoyt-sistem/src/service/fikoyt-ui/decorators/dinamik-bilesen.ts`

```typescript
export function DinamikBilesen(id: string) {
  return function(target: any) {
    target.prototype.bilesen_id = id;
    target.bilesen_id = id;
    // Registry'ye kaydet (dosya import edildiginde calisir)
    DinamikBilesenRegistry.kaydet(id, new target());
  }
}
```

### 1c. Registry servisi
**Dosya:** `fikoyt-sistem/src/service/fikoyt-ui/src/lib/dinamik-bilesen/dinamik-bilesen.registry.ts`

- `kaydet(id, tanim)` — decorator'dan cagrilan, tanim sinifini kaydeder
- `kaydetLazy(id, yukleyici)` — glob'dan cagrilan, lazy loader kaydeder
- `yukle(id): Promise<IDinamikBilesenTanim>` — lazy import + cache
- `goruntumAl(id, gorunum): Promise<Type<any>>` — belirli bir goruntumun component'ini doner
- `tumBilesenler()` — kayitli bilesen id listesi (lazy/loaded farketmez)

Lazy akis: glob → kaydetLazy(klasor_adi, loader) → ilk yukle() cagrisinda import → decorator calisir → kaydet() → cache

### 1d. Renderer component
**Dosya:** `fikoyt-sistem/src/service/fikoyt-ui/src/lib/dinamik-bilesen/dinamik-bilesen-renderer.component.ts`

```html
<!-- Kullanim: -->
<dinamik-bilesen
  [bilesenId]="'uretim-durumu'"
  [gorunum]="'paylasilmis_kart'"
  [kart]="kart"
  [icerik]="icerik"
  [ek]="ek"
/>
```

- `bilesenId` + `gorunum` ile registry'den component'i lazy yukler
- `NgComponentOutlet` ile render eder
- `kart`, `icerik`, `ek` input'larini component'e gecirir
- Yukleniyor durumunda skeleton gosterir

### 1e. Glob tarama (auto-discovery)
**Dosya:** `dinamik-bilesen.registry.ts` icinde

```typescript
const moduller = import.meta.glob(
  '../../dinamik-bilesenler/*/tanim.ts'
);
for (const [yol, yukleyici] of Object.entries(moduller)) {
  const id = yol.split('/').at(-2);
  this.kaydetLazy(id, yukleyici);
}
```

---

## Adim 2: IEk guncelleme

**Dosya:** `fikoyt-sistem/src/service/fikoyt-ui/interfaces/IKart.interface.ts`

IEk interface'ine ek alan:
```typescript
export interface IEk {
  // ... mevcut alanlar
  bilesen?: string;  // dinamik bilesen id'si (orn: 'uretim-durumu')
}
```

IEkTuru enum'una yeni tur (gerekirse):
```typescript
DINAMIK_BILESEN = 'DINAMIK_BILESEN'
```

---

## Adim 3: Paylasim sistemi entegrasyonu

### 3a. Paylas kutusu (edit modu)
**Dosya:** `fikoyt-kart-kok` ve `ikart-kutusu` icinde

- `ek.bilesen` doluysa → `<dinamik-bilesen [gorunum]="'paylas_kutusu'" .../>` render et
- Bilesen secimi icin bir secici ekle (kayitli bilesenlerden dropdown)

### 3b. Paylasilan kart (gosterim modu)
**Dosya:** `fikoyt-kart-kok/icerikler/icerikler.component.ts`

- `ek.bilesen` doluysa → `<dinamik-bilesen [gorunum]="'paylasilmis_kart'" .../>` render et
- Yetkiye gore edit butonu goster

### 3c. Sayfa/route modu
- Genel bir route: `/bilesen/:bilesenId/:kartId`
- Lazy load ile `<dinamik-bilesen [gorunum]="'sayfa'" .../>` render et

---

## Adim 4: Ornek bilesen (demo)

**Klasor:** `fikoyt-sistem/src/service/fikoyt-ui/src/lib/dinamik-bilesenler/ornek-bilesen/`

```
ornek-bilesen/
├── tanim.ts             ← @DinamikBilesen('ornek-bilesen')
├── edit.component.ts    ← paylas_kutusu goruntumu
├── kart.component.ts    ← paylasilmis_kart goruntumu
└── sayfa.component.ts   ← sayfa goruntumu
```

Basit bir ornek: parametre gosterimi, edit formu, sayfa detayi.

---

## Dosya Ozeti

| # | Dosya | Islem |
|---|-------|-------|
| 1 | `interfaces/IDinamikBilesen.interface.ts` | YENI |
| 2 | `decorators/dinamik-bilesen.ts` | YENI |
| 3 | `src/lib/dinamik-bilesen/dinamik-bilesen.registry.ts` | YENI |
| 4 | `src/lib/dinamik-bilesen/dinamik-bilesen-renderer.component.ts` | YENI |
| 5 | `interfaces/IKart.interface.ts` | DUZENLE (IEk'e bilesen alani) |
| 6 | `fikoyt-kart-kok/icerikler/icerikler.component.ts` | DUZENLE (dinamik render) |
| 7 | `paylas-kutusu/IKart/ikart-kutusu.component.ts` | DUZENLE (edit modu) |
| 8 | `dinamik-bilesenler/ornek-bilesen/` | YENI (4 dosya) |

Toplam: 4 yeni dosya + 3 duzenleme + 1 ornek klasor (4 dosya)