Dialog do wprowadzania wierszy i kodów kreskowych

Wtyczki mogą żądać danych (wierszy, kodów kreskowych, kart) od użytkownika za pomocą okien dialogowych. Tutaj przyjrzymy się IViewManager.ShowExtendedKeyboardDialog, ale istnieją też inne dialogi, o których można przeczytać więcej w artykule Dialogs.

Jak to wygląda w Syrve POS?

Dialog wprowadzania wiersza można wyświetlić wszędzie tam, gdzie dostępny jest IViewManager. W Resto.Front.Api.SamplePlugin w klasie ButtonsTester znajduje się przykład wywołania go po kliknięciu SamplePlugin: Show extended keyboard view:

W tym artykule użyjemy tej metody: wyświetlanie okna wprowadzania wiersza po kliknięciu przycisku.

Dialog obsługuje następujące typy wprowadzania:

• dowolny wiersz
• ukryty wiersz
• odczyt kodu kreskowego
• odczyt karty

Dialog przyjmuje 8 parametrów wejściowych:

• string title - tytuł dialogu.
• string initialText - parametr opcjonalny. Linia, która zostanie wpisana po wyświetleniu okna dialogowego. Domyślnie String.Empty.
• bool isMultiline - parametr opcjonalny. Pozwala na wprowadzenie tekstu wielowierszowego. Ignorowany, jeśli parametr isPassword = true. Domyślnie true.
• int maxLength - Maksymalna długość linii. Domyślnie Int32.MaxValue.
• bool capitalize - parametr opcjonalny. Czy automatycznie pisać słowa wielką literą. Ignorowany, jeśli parametr isPassword jest prawdziwy. Domyślnie false.
• bool isPassword - parametr opcjonalny. Czy ukryć linię podczas wprowadzania. Domyślnie false. Ignorowany, jeśli parametry isMultiline i capitalize są true.
• bool enableCardSlider - parametr opcjonalny. Czy możliwe jest wprowadzanie danych za pomocą przesuwanej karty. Domyślnie false.
• bool enableBarcode - parametr opcjonalny. Czy możliwe jest wprowadzanie danych przez odczyt kodu kreskowego. Domyślnie false.

Wprowadzanie dowolnego wiersza

Parametry initialText, isMultiline i capitalize wpływają na wprowadzanie dowolnego ciągu znaków. Na przykład, jeśli zabronimy wprowadzania wielowierszowego, wprowadzona linia zacznie się wielką literą:

PluginContext.Operations.AddButtonToPluginsMenu("SamplePlugin: String input example", x =>
{
    var inputResult = x.vm.ShowExtendedKeyboardDialog("String input example", isMultiline: false, capitalize: true);
});

Z tymi parametrami dialog będzie reagował tylko na wprowadzanie z klawiatury. Skanowanie kodu kreskowego i przesuwanie karty nie będą brane pod uwagę. Wszystkie słowa zostaną wpisane wielką literą. Może to być pomocne przy wprowadzaniu imienia, nazwiska i drugiego imienia.

Wynik musi zostać przekonwertowany na typ StringInputDialogResult. Dodajmy kod:

PluginContext.Operations.AddButtonToPluginsMenu("SamplePlugin: String input example", x =>
{
    var inputResult = x.vm.ShowExtendedKeyboardDialog("String input example", isMultiline: false, capitalize: true);
    var strResult = inputResult as StringInputDialogResult;
    if (strResult == null)
        return; //Użytkownik kliknął "Anuluj"
    var result = strResult.Result; //Tekst wprowadzony przez użytkownika
});

Wprowadzanie ukrytego wiersza

Możesz ukryć wprowadzany tekst za pomocą parametru isPassword:

PluginContext.Operations.AddButtonToPluginsMenu("SamplePlugin: Password input example", x =>
{
    var inputResult = x.vm.ShowExtendedKeyboardDialog("Password input example", isPassword: true);
    var strResult = inputResult as StringInputDialogResult;
    if (strResult == null)
        return; //Użytkownik kliknął "Anuluj"
    var result = strResult.Result; //Ukryty tekst wprowadzony przez użytkownika
});

Jak wspomniano wcześniej, parametry isMultiline i capitalize nie będą brane pod uwagę. Jednak nadal można przekazać true do parametrów enableCardSlider i enableBarcode, co pozwoli na przesuwanie karty i skanowanie kodu kreskowego.

Odczyt karty

Odczyt karty można śledzić za pomocą parametru enableCardSlider. Wynik musi być typu CardInputDialogResult:

PluginContext.Operations.AddButtonToPluginsMenu("SamplePlugin: Card input example", x =>
{
    var inputResult = x.vm.ShowExtendedKeyboardDialog("Card input example", enableCardSlider: true);
    var cardResult = inputResult as CardInputDialogResult;
    if (cardResult == null)
        return; //Użytkownik kliknął "Anuluj" lub był inny typ wejścia
    var result = cardResult.FullCardTrack; //Pełne informacje o karcie
});

W tym przypadku nie można wyłączyć wprowadzania z klawiatury.

Skanowanie kodu kreskowego

Skanowanie kodu kreskowego można śledzić za pomocą parametru enableBarcode. W ten sposób nie będą brane pod uwagę skanowania kodów serwisowych. Wynik musi zostać przekonwertowany na typ BarcodeInputDialogResult:

PluginContext.Operations.AddButtonToPluginsMenu("SamplePlugin: Barcode input example", x =>
{
    var inputResult = x.vm.ShowExtendedKeyboardDialog("Barcode input example", enableBarcode: true);
    var barcodeResult = inputResult as BarcodeInputDialogResult;
    if (barcodeResult == null)
        return; //Użytkownik kliknął "Anuluj" lub był inny typ wejścia
    var result = barcodeResult.Barcode; //Odczytany kod kreskowy
});

Mieszane wprowadzanie

Niech nasz dialog obsługuje wprowadzanie tekstu, kodów kreskowych i kart. Wtedy musimy poprawnie obsłużyć wynik wprowadzania. SamplePlugin ma przykład takiego podejścia. Zmodyfikujmy nasz kod, aby obsługiwał wszystkie typy wejścia:

PluginContext.Operations.AddButtonToPluginsMenu("SamplePlugin: Mixed input example", x =>
{
    var inputResult = x.vm.ShowExtendedKeyboardDialog("Mixed input example", enableCardSlider: true, enableBarcode: true);
    switch (inputResult)
    {
        case StringInputDialogResult stringInputDialogResult:
            var strResult = stringInputDialogResult.Result; //Tekst wprowadzony przez użytkownika
            return;
        case CardInputDialogResult cardInputDialogResult:
            var cardResult = cardInputDialogResult.FullCardTrack; //Pełne informacje o karcie
            return;
        case BarcodeInputDialogResult barcodeInputDialogResult:
            var barcodeResult = barcodeInputDialogResult.Barcode; //Odczytany kod kreskowy
            return;
        default:
            return; //Użytkownik kliknął "Anuluj"
    }
});