Přeskočit na hlavní obsah

Bank - Views

Dokumentace UI komponent a pohledů pro správu bank.

List View​

Základní zobrazení​

Seznam bank s filtrovacími možnostmi a akcemi.

Cesta: Standardní list view Komponenta: views/record/list

Layout​

Soubor: backend/Resources/layouts/Bank/list.json

[
  {"name": "name", "width": 30},
  {"name": "code", "width": 10},
  {"name": "usesApi", "width": 10},
  {"name": "assignedUser", "width": 15},
  {"name": "modifiedAt", "width": 15}
]

Sloupce​

PoleŠířkaPopis
name30%Název banky (klikací link na detail)
code10%Kód banky
usesApi10%Indikátor API podpory (checkmark)
assignedUser15%Přiřazený uživatel
modifiedAt15%Datum poslední úpravy

Filtry​

Rychlé filtry:

  • Všechny banky
  • S API podporou
  • Moje banky
  • Naposledy vytvořené

Pokročilé filtry:

  • Název
  • Kód banky
  • Používá API
  • Přiřazený uživatel
  • Týmy
  • Datum vytvoření/úpravy

Akce​

Hromadné akce:

  • Smazat
  • Hromadná aktualizace
  • Export (CSV, XLSX)
  • Přiřadit uživateli
  • Přidat do týmu

Akce na řádku:

  • Upravit
  • Odstranit
  • Zobrazit detail

Detail View​

Layout struktura​

Soubor: backend/Resources/layouts/Bank/detail.json

Panely​

Panel: Přehled​

Základní informace o bance.

Pole:

  • Název
  • Kód banky
  • Webové stránky
  • Používá API
  • Přiřazený uživatel
  • Týmy

Panel: Kontaktní údaje​

Kontakty na banku.

Pole:

  • E-mail
  • Telefon
  • Fakturační adresa
  • Doručovací adresa

Panel: Notifikace​

Nastavení upozornění.

Pole:

  • Upozornit uživatele (checkbox)
  • Uživatelé (linkMultiple)
  • Notifikační týmy (linkMultiple)
  • Notifikační e-mail (varchar)

Relationship Panels​

Bankovní účty​

Seznam všech účtů u této banky.

Vlastnosti:

  • Možnost vytvoření nového účtu
  • Zakázán výběr existujících
  • Custom layout: listForBank

Sloupce:

  • Název účtu
  • Číslo účtu
  • Zůstatek
  • Aktivní status

Bankovní transakce​

Transakce, kde je banka proticstranou.

Vlastnosti:

  • Pouze zobrazení (read-only)
  • Zakázáno vytváření
  • Custom layout: listForBank

Sloupce:

  • Datum transakce
  • Typ (příchozí/odchozí)
  • Částka
  • Bankovní účet

Aktivity​

CRM aktivity spojené s bankou.

Typy:

  • Schůzky (Meetings)
  • Hovory (Calls)
  • Úkoly (Tasks)

Tlačítka a akce​

Hlavní akce​

Upravit:

  • Otevře editační formulář
  • Validace při uložení
  • Možnost zrušit změny

Odstranit:

  • Kontrola závislostí (účty, transakce)
  • Potvrzovací dialog
  • Soft-delete

Více akcí (dropdown):

  • Duplikovat
  • Sloučit
  • Exportovat
  • Print to PDF

Custom akce​

Test API připojení:

  • Testuje všechny účty s API
  • Zobrazuje výsledky v modal dialogu
actionTestApiConnections() {
    this.ajaxPostRequest('Bank/action/testApiConnections', {
        id: this.model.id
    }).then((result) => {
        this.showTestResults(result);
    });
}

Edit/Create View​

Formulář​

Layout: Stejný jako detail view, ale editovatelný

Validace​

Client-side:

  • Povinné pole: název
  • Formát kódu banky (4 číslice)
  • Validace e-mailu
  • Validace URL

Server-side:

  • Duplicita názvu
  • Validace kódu z číselníku
  • ACL kontroly

Dynamic Logic​

Viditelnost notifikací:

{
  "fields": {
    "users": {
      "visible": {
        "conditionGroup": [
          {
            "type": "isTrue",
            "attribute": "enableAlertUsers"
          }
        ]
      }
    },
    "notificationTeams": {
      "visible": {
        "conditionGroup": [
          {
            "type": "isTrue",
            "attribute": "enableAlertUsers"
          }
        ]
      }
    }
  }
}

Logika: Pole pro uživatele a týmy se zobrazí pouze pokud je zaškrtnuto "Upozornit uživatele"

Custom Views​

Bank Status Badge​

Účel: Zobrazení statusu API připojení

Soubor: client/src/views/bank/fields/api-status.js

define('banking:views/bank/fields/api-status', ['views/fields/base'], function (Dep) {
    return Dep.extend({

        detailTemplate: 'banking:bank/fields/api-status/detail',

        data: function () {
            return {
                hasApi: this.model.get('usesApi'),
                status: this.getApiStatus()
            };
        },

        getApiStatus: function () {
            // Logika pro zjištění statusu
            return 'connected'; // nebo 'disconnected', 'error'
        }
    });
});

Bank Code Selector​

Účel: Výběr kódu banky z předdefinovaného seznamu

Soubor: client/src/views/bank/fields/code.js

define('banking:views/bank/fields/code', ['views/fields/enum'], function (Dep) {
    return Dep.extend({

        setupOptions: function () {
            this.params.options = [
                '0100', // KB
                '0300', // CSOB
                '0800', // CS
                '2700', // UniCredit
                // ...další kódy
            ];

            this.translatedOptions = {
                '0100': 'Komerční banka',
                '0300': 'ČSOB',
                '0800': 'Česká spořitelna',
                '2700': 'UniCredit Bank'
                // ...další překlady
            };
        }
    });
});

Modals (Dialogy)​

Select Bank Modal​

Účel: Výběr banky při vytváření účtu

Vlastnosti:

  • Filtrování podle názvu/kódu
  • Zobrazení API statusu
  • Preview banky
  • Možnost vytvořit novou

Test Results Modal​

Účel: Zobrazení výsledků testu API připojení

Obsah:

  • Seznam účtů
  • Status každého účtu
  • Chybové zprávy
  • Akce pro opravu

Šablona:

{{#each accounts}}
<div class="account-test-result">
    <strong>{{name}}</strong>
    <span class="badge badge-{{statusClass}}">{{status}}</span>
    {{#if error}}
    <div class="error-message">{{error}}</div>
    {{/if}}
</div>
{{/each}}

Styling​

CSS Classes​

Bank status:

.bank-api-active {
    color: #28a745;
}

.bank-api-inactive {
    color: #6c757d;
}

.bank-api-error {
    color: #dc3545;
}

Badges:

.badge-bank-code {
    background-color: #007bff;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.85em;
}

Handlers​

Dynamic Handler​

Soubor: client/src/handlers/bank/dynamic-handler.js

Účel: Dynamické chování formuláře

define('banking:handlers/bank/dynamic-handler', [], function () {

    var Handler = function (view) {
        this.view = view;
    };

    _.extend(Handler.prototype, {

        init: function () {
            this.controlNotificationFields();
        },

        controlNotificationFields: function () {
            this.view.listenTo(
                this.view.model,
                'change:enableAlertUsers',
                function () {
                    var enabled = this.view.model.get('enableAlertUsers');

                    if (enabled) {
                        this.view.showField('users');
                        this.view.showField('notificationTeams');
                        this.view.showField('notificationEmailAddress');
                    } else {
                        this.view.hideField('users');
                        this.view.hideField('notificationTeams');
                        this.view.hideField('notificationEmailAddress');
                    }
                },
                this
            );
        }
    });

    return Handler;
});

Accessibility​

Keyboard Navigation​

  • Tab pro navigaci mezi poli
  • Enter pro uložení formuláře
  • Escape pro zrušení
  • Space pro toggle checkboxů

Screen Readers​

  • Aria labels na všech polích
  • Role attributes
  • Alt texty na ikonách

Responsive Design​

Mobile View​

  • Stacked layout na malých obrazovkách
  • Touch-friendly tlačítka
  • Optimalizované dialogy
  • Skryté méně důležité sloupce

Tablet View​

  • Dvousloupcový layout
  • Collapsed sidebar
  • Touch gestures

Performance​

Optimalizace​

  • Lazy loading related panels
  • Debounced validace
  • Cached bank codes list
  • Pagination pro velké seznamy

Best Practices​

  • Minimalizovat re-renders
  • Cache translations
  • Batch API requests
  • Use websockets pro real-time updates

Rozšíření​

Custom Field View​

define('custom:views/bank/fields/custom', ['views/fields/base'], function (Dep) {
    return Dep.extend({
        // Custom implementation
    });
});

Register Custom View​

V metadata:

{
  "fields": {
    "customField": {
      "type": "varchar",
      "view": "custom:views/bank/fields/custom"
    }
  }
}

Poznámky​

  • Všechny views respektují ACL oprávnění
  • Dynamic logic se vyhodnocuje v real-time
  • Custom views by měly extendovat base views
  • Používejte translation keys místo hardcoded textů