Перейти к содержанию

Открытие карточки в модальном диалоге

Открытие карточки в модальном диалоге

С помощью зависимости IAdvancedCardDialogManager можно создавать новую или открывать уже существующую карточку. При этом будет возможность вносить изменения в карточку, работать с файлами в карточке, управлять заданиями в карточке. Поддерживаются следующие действия:

  • Создание новой карточки с помощью ShowNewCardAsync;

  • Открытие существующей карточки с помощью OpenCardAsync;

  • Открытие карточки по указанной модели или указанному CardEditor с помощью ShowCard.

В карточке, открытой в режиме диалога, отсутствуют левая и правая панели с плитками. Вместо них кнопки можно располагать на тулбаре карточки (панель с кнопками наверху), а также внизу.

Пример карточки, открытой в модальном диалоге с тулбаром и нижними кнопками:

Код для отображение диалога:

using (var splash = TessaSplash.Create("Открытие карточки"))
{
    IAdvancedCardDialogManager advancedCardDialogManager = ...
    IIconContainer iconContainer = ...
    await advancedCardDialogManager.OpenCardAsync(
        cardID, 
        typeID, 
        typeName, 
        // Необходимо передать объект сплеша, чтобы он закрылся перед открытием диалога
        splash: splash,
        // Признак того, что при открытии диалога необходимо выполнять UI расширения
        executeUIExtensions: true,
        cardEditorModifierAction: ctx =>
        {
            var uiContext = ctx.UIContext;
            var editor = ctx.Editor;
            // Установка статусбара (нижняя панель с информацией о времени загрузки карточки) видимым
            editor.StatusBarIsVisible = true;
            editor.Toolbar.Actions.AddRange(
                new CardToolbarAction(
                    "name1", 
                    "Согласовать", 
                    editor.Toolbar.CreateIcon("Thin42", foreground: Colors.Navy),
                    new DelegateCommand(_ => TessaDialog.ShowMessage("Тестовое сообщение"), _ => false),
                    captionFontWeight: FontWeights.UltraBold,
                    captionForeground: Colors.DarkGreen),
                new CardToolbarActionGroup(
                    "name2", 
                    "Необходимо выполнить", 
                    editor.Toolbar.CreateIcon("Thin184"),
                    isEnabledFunc: () => true,
                    innerItems: new[]
                    {
                        // Настройки внешнего вида для элементов выпадающего меню применены не будут
                        new CardToolbarAction(
                            "name3", 
                            "Выполнить сейчас",
                            new IconViewModel("Thin184", iconContainer),
                            new DelegateCommand(_ => editor.SaveCardAsync(uiContext))),
                        new CardToolbarAction(
                            "name4", 
                            "Выполнить позже",
                            new IconViewModel("Thin185", iconContainer),
                            new DelegateCommand(_ => editor.RefreshCardAsync(uiContext))),
                    })); 



            editor.BottomDialogButtons.AddRange(
                new[]
                {
                    new UIButton(
                        "Нижняя кнопка сохранить",
                        isDefault: true,
                        buttonAction: async btn =>
                        {
                            await editor.SaveCardAsync(uiContext);
                            btn.Close();
                        }),
                    new UIButton("$UI_Common_Cancel", isCancel: true),
                });
        });
}

В расширениях можно также модифицировать кнопки тулбара и кнопки внизу диалога:

using Tessa.Extensions;
using Tessa.Platform.Collections;
using Tessa.UI;
using Tessa.UI.Cards;



public sealed class ModifyToolbarCardUIExtension : CardUIExtension
{
    public override void Initialized(ICardUIExtensionContext context)
    {
        var uiContext = UIContext.Current;
        var editor = uiContext.CardEditor;
        // Доступно как для диалогов, так и для карточек, открытых во вкладке
        context.ToolbarActions?.Add(
            new CardToolbarAction(
                "New",
                "Сохранить",
                context.UIContext.CardEditor.Toolbar.CreateIcon("Thin285"),
                new DelegateCommand(_ => TessaDialog.ShowMessage("added in UIExt")))
        );



        // Доступно только для диалогов
        context.BottomDialogButtons?.AddRange(
            new UIButton(
                "$UI_Common_OK",
                isDefault: true,
                buttonAction: async btn =>
                {
                    await editor.SaveCardAsync(uiContext);
                    btn.Close();
                }),
            new UIButton("$UI_Common_Cancel", isCancel: true)



        );
    }
}

Для фильтрации расширений на расширения для диалогов/вкладки необходимо при регистрации воспользоваться следующими методами расширений

  • WhenNoDialog() - не выполнять расширений для диалогов, а только для вкладки;

  • WhenAnyDialog() - выполнять для любых диалогов, но не для вкладки;

  • WhenDefaultDialog() - выполнять только для диалогов со стандартным именем CardUIHelper.DefaultDialogName;

  • WhenDialog(params stirng[] dialogNames) - выполнять для диалогов с указанныи именами.

Пример использования:

extensionContainer
    .RegisterExtension<ICardUIExtension, DialogUIExtension>(x => x
    .WithOrder(ExtensionStage.AfterPlatform, 3)
    .WithUnity(this.UnityContainer)
    .WhenDefaultDialog())

Дополнительные примеры использования содержаться в расширениях Tessa.Extensions.Default.Client.UI.CarUIExtension (открытие карточки сотрудника по двойному клику в диалоге) и в Tessa.Extensions.Default.Client.UI.CreateAndSelectToolbarUIExtension.

Использование диалогов может быть полезно в следующих ситуациях:

  • Работа со справочниками: создание и выбор нового элемента прямо из диалога выбора.

  • Файлы, приложенные к заданию: тут тоже можно попробовать открывать в диалоге.

  • Создание связанных объектов. Например, создать ДС к договору, не покидая карточку диалога.

  • Создание сложных инициализационных диалогов – мастеров. Например, по нажатию на процессный тайл показываем диалог с возомжностью задать кучу параметров, приложить файлы и стартовать процесс.

  • Просто создания диалогов, которые поддерживают работу с файлами. Например, какие-нибудь сложные сканирования, верификации и т.п.

  • Создать карточку отчета с файлами при завершении задания в диалоге.

Back to top