Замена контрола добавления новой метки в карточке

Замена контрола добавления новой метки в карточке

Предположим, что нам требуется заменить в карточке определенного типа стандартную кнопку "+" для добавления тегов на собственную кнопку с надписью "Добавить метку".

Для этой цели мы создаем новую модель представления, реализующую интерфейс IAddTagControlViewModel:

using Tessa.UI.Cards;
using Tessa.UI.Tags.ViewModels;
using Tessa.UI;
using System.Windows.Input;

namespace Tessa.Extensions.Client
{
    /// <summary>
    /// Вью-модель для кнопки добавления тега к карточке.
    /// </summary>
    public sealed class CustomAddTagButtonViewModel : ViewModel<EmptyModel>, IAddTagControlViewModel
    {
        #region Contstructors

        public CustomAddTagButtonViewModel(ICardToolbarViewModel toolbar)
        {
            this.toolbar = toolbar;
        }

        #endregion

        #region Private Fields

        private ICardToolbarViewModel toolbar;

        #endregion

        #region Public Fields

        /// <summary>
        /// Команда добавления тега.
        /// </summary>
        public ICommand AddTagCommand { get; set; }

        /// <summary>
        /// Тулбар карточки, на котором находится контрол добавления тега.
        /// </summary>
        public ICardToolbarViewModel Toolbar => this.toolbar;

        #endregion
    }
}

Затем - новый контрол с кнопкой в файле CustomAddTagButton.xaml:

<UserControl x:Class="Tessa.Extensions.Client.CustomAddTagButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             d:DesignHeight="450"
             d:DesignWidth="800"
             mc:Ignorable="d">
    <Button Command="{Binding AddTagCommand, Mode=OneTime}" Foreground="Black">
        Добавить метку
    </Button>
</UserControl>

В словарь ресурсов добавляем привязку модели представления к созданному компоненту:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:Tessa.Extensions.Client">

    <!--  Здесь располагаются DataTemplate для связи ViewModel и View  -->
    <DataTemplate DataType="{x:Type local:CustomAddTagButtonViewModel}">
        <local:CustomAddTagButton />
    </DataTemplate>

</ResourceDictionary>

Наконец, создаем новое расширение:

using System;
using System.Linq;
using System.Threading.Tasks;
using Tessa.Localization;
using Tessa.Platform.Runtime;
using Tessa.Tags;
using Tessa.UI;
using Tessa.UI.Cards;
using Tessa.UI.Tags;
using Tessa.UI.Tags.ViewModels;

namespace Tessa.Extensions.Client
{
    public sealed class AddTagCustomButtonDemoExtension :
        CardUIExtension
    {
        #region Constructors

        public AddTagCustomButtonDemoExtension(
            IUIHost uiHost,
            IAdvancedCardDialogManager cardDialogManager,
            CreateDialogFormFuncAsync createDialogFormFuncAsync,
            ITagManager tagManager,
            ITagInfoModelFactory tagInfoModelFactory,
            ISession session)
        {
            this.uiHost = uiHost;
            this.cardDialogManager = cardDialogManager;
            this.createDialogFormFuncAsync = createDialogFormFuncAsync;
            this.tagManager = tagManager;
            this.tagInfoModelFactory = tagInfoModelFactory;
            this.session = session;
        }

        #endregion

        #region Fields

        private readonly IUIHost uiHost;
        private readonly IAdvancedCardDialogManager cardDialogManager;
        private readonly CreateDialogFormFuncAsync createDialogFormFuncAsync;
        private readonly ITagManager tagManager;
        private readonly ITagInfoModelFactory tagInfoModelFactory;
        private readonly ISession session;

        #endregion

        #region Base Overrides

        public override async Task Initialized(ICardUIExtensionContext context)
        {
            var cardEditor = context.UIContext.CardEditor;
            cardEditor.Toolbar.CanHaveTags = true;
            context.UIContext.CardEditor.Toolbar.RightTagControl = new CustomAddTagButtonViewModel(context.UIContext.CardEditor.Toolbar)
            {
                AddTagCommand = new DelegateCommand(
                    async x =>
                    {
                        // Если в карточке были изменения, необходимо сохранить ее перед добавлением тега. 

                        if (await cardEditor.CardModel.HasChangesAsync())
                        {
                            if (await TessaDialog.ConfirmAsync(await LocalizationManager.GetStringAsync("Tags_SaveCardToAddTag")))
                            {
                                var saveResult = await cardEditor.CardModel.SaveAsync();
                                if (!saveResult.Success)
                                {
                                    return;
                                }
                            }
                            else
                            {
                                return;
                            }
                        }

                        var tagInfo = await TagUIExtensions.SelectOrCreateTagAsync(
                            this.createDialogFormFuncAsync,
                            this.uiHost,
                            this.cardDialogManager,
                            context.Card.ID);

                        if (!(tagInfo is not null && !context.UIContext.CardEditor.Toolbar.TagsModel.Tags.Any(x => x.Id == tagInfo.ID)))
                        {
                            return;
                        }

                        var tag = new Tag()
                        {
                            SetAt = DateTime.UtcNow,
                            CardID = context.Card.ID,
                            TagID = tagInfo.ID,
                            UserID = this.session.User.ID
                        };
                        await this.tagManager.AddTagAsync(tag, null, context.ValidationResult);
                        if (context.ValidationResult.IsSuccessful())
                        {
                            var tagInfoModel = this.tagInfoModelFactory.CreateModel(tagInfo, cardEditor.CardModel.Card);
                            var viewTagInfoModel = new CardTagViewModel(tagInfoModel);
                            cardEditor.Toolbar.TagsModel.Tags.Add(viewTagInfoModel);
                        }
                    })
            };
        }

        #endregion
    }
}

Теперь, после регистрации нашего расширения для выбранного типа карточек мы увидим в правой части тулбара вместо стандартного “плюса” кастомную кнопку с надписью “Добавить метку”.