LocalizationSetContentPickerField.Edit.cshtml

@model OrchardCore.ContentFields.ViewModels.EditLocalizationSetContentPickerFieldViewModel
@using System.Text.Json
@using System.Text.Json.Nodes
@using OrchardCore.ContentFields
@using OrchardCore.Environment.Shell
@using OrchardCore.Mvc.Utilities
@using OrchardCore.Localization.Data

@inject ShellSettings ShellSettings
@inject IDataLocalizer D

@{
    var settings = Model.PartFieldDefinition.GetSettings<LocalizationSetContentPickerFieldSettings>();
    var selectedItems = JConvert.SerializeObject(Model.SelectedItems, JOptions.CamelCase);
    var partName = Model.PartFieldDefinition.PartDefinition.Name;
    var fieldName = Model.PartFieldDefinition.Name;
    var searchUrl = Url.RouteUrl(new { area = "OrchardCore.ContentFields", controller = "LocalizationSetContentPickerAdmin", action = "SearchLocalizationSets", part = partName, field = fieldName });
    var vueElementId = $"LocalizedContentPicker_{partName}_{fieldName}_{Guid.NewGuid().ToString("n")}";
    var multiple = settings.Multiple.ToString().ToLowerInvariant();
    string localizedFieldName = D[Model.PartFieldDefinition.DisplayName(), DataLocalizationContext.ContentField(Model.PartFieldDefinition.PartDefinition.Name)];
}

<script asp-name="vue-multiselect-wrapper" at="Foot"></script>
<style asp-name="vue-multiselect" version="2" at="Foot"></style>

<div class="@Orchard.GetFieldWrapperClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.LocalizationSets)_FieldWrapper">
    <label asp-for="LocalizationSets" class="@Orchard.GetLabelClasses(inputRequired: settings.Required)">@localizedFieldName</label>
    <div class="@Orchard.GetEndClasses()">
        <div id="@vueElementId" class="vue-multiselect" data-part="@partName" data-field="@fieldName" data-editor-type="LocalizationSetContentPicker" data-selected-items="@selectedItems" data-search-url="@searchUrl" data-multiple="@multiple">

            <ul class="mb-1 list-group w-xl-50 content-picker-default__list" v-show="arrayOfItems.length" v-cloak>
                <draggable v-model="arrayOfItems">
                    <li v-for="(item, i) in arrayOfItems"
                        class="cursor-move list-group-item content-picker-default__list-item d-flex align-items-start justify-content-between"
                        :key="item.id">
                        <div class="align-items-center align-self-center"><span>{{ item.displayText }}</span> <span v-show="!item.hasPublished" class="text-muted small">(@T["Not published"])</span></div>

                        <div class="btn-group btn-group-sm align-items-center" role="group">
                            <button v-on:click="remove(item)" type="button" class="btn btn-secondary content-picker-default__list-item__delete"><i class="fa-solid fa-trash fa-sm" aria-hidden="true"></i></button>
                        </div>
                    </li>
                </draggable>
            </ul>

            <div class="w-xl-50">
                <input asp-for="LocalizationSets" type="hidden" v-model="selectedIds" />
                <vue-multiselect v-model="value" :options="options" track-by="id"
                                 label="displayText" placeholder="@T["Type to search"]"
                                 @@search-change="asyncFind" @@select="onSelect"
                                 :searchable="true" :close-on-select="true" :reset-after="true"
                                 :show-labels="true" :hide-selected="@multiple"
                                 :disabled="isDisabled"
                                 select-label="@T["Select"]" deselect-label="@T["Remove"]">
                    <template slot="option" slot-scope="props">
                        <div v-cloak><span>{{ props.option.displayText }}</span><span class="small ms-2" v-show="!props.option.hasPublished">(@T["Not published"])</span></div>
                    </template>
                    <template slot="noResult">
                        @T["No result found"]
                    </template>
                </vue-multiselect>
                @if (!string.IsNullOrEmpty(settings.Hint))
                {
                    <span class="hint">@settings.Hint</span>
                }
            </div>
        </div>
    </div>
</div>
<script at="Foot" depends-on="vue-multiselect-wrapper">initVueMultiselect(document.querySelector("#@vueElementId"))</script>