Namespace PageList

Для использования пиктограмм FontAwesome укажите на html странице таблицу стилей с font awesome см. раздел 7.

В примере ниже мы добавили три кнопки (описали меню с тремя кнопками отдельно в переменной menu):

• добавление строки list.addItem(),
• удаление строки list.removeItem(),
• редактирование строки list.edit().

Обратите внимание, что метод list.edit() не изменяeт данные. Для изменения данных в элемент myList мы добавили метод onAfterEdit(), в котором преобразуем данные так как нам надо.

Для просмотра данных в результате манипуляции со списком используйте следующий код в панели разработчика:

AppManager.activeForm.getElement('myList').getData()

simple.ts

/*Инструкции для WebPack, который скопирует эти файлы в ваш каталог*/
import './index.html';
import 'ui-organizer/page.css';
import 'ui-organizer/style.css';
import 'ui-organizer/vars.css';

/*Описание формы simpleForm*/
import type {IDataElement, IFigAwesome, IForm, IList, IListItem, IMenu, IMenuItem} from "ui-organizer";
import { AppManager, UIList, UIForm, UIMenu, UIMenuItem, UIDataElement, IconDisplay, UIMouseEvent, UIEditEvent, UISetDataEvent} from "ui-organizer";

let menu: IMenu = <IMenu>{
    type: UIMenu,
    elements: [
        <IMenuItem>{
            type: UIMenuItem,
            caption: 'add',
            iconDisplay: IconDisplay.icon,
            figAwesome: <IFigAwesome>{
                faClass: ['fas', 'fa-plus', 'fa-lg'],
                faStyle: ['color: grey;']
            },
            async onClick(event:UIMouseEvent, form: IForm, menu: IMenu, menuItem: IMenuItem) {
                let list: IList = form.getElement('myList') as IList;
                let listItem: IListItem = await list.addItem();
                listItem.setData({ item: "Новая строка", value: "Значение" });
                
            }
        },
        <IMenuItem>{
            type: UIMenuItem,
            caption: 'remove',
            iconDisplay: IconDisplay.icon,
            figAwesome: <IFigAwesome>{
                faClass: ['fas', 'fa-minus', 'fa-lg'],
                faStyle: ['color: grey;']
            },
            async onClick(event:UIMouseEvent, form: IForm, menu: IMenu, menuItem: IMenuItem) {
                let list: IList = form.getElement('myList') as IList;
                /**Функция getSelected возвращает массив выделенных строк,
                 * так как у нас нет множественного выделения (атрибут multipleSelect не задан),
                 * то выбираем первый и единственный элемент массива, если выделена хоть одна строка.
                 */
                list.removeItem(list.getSelected()[0]?.id);
            }
        },
        <IMenuItem>{
            type: UIMenuItem,
            caption: 'edit',
            iconDisplay: IconDisplay.icon,
            figAwesome: <IFigAwesome>{
                faClass: ['fas', 'fa-edit', 'fa-lg'],
                faStyle: ['color: grey;']
            },
            async onClick(event:UIMouseEvent, form: IForm, menu: IMenu, menuItem: IMenuItem) {
                let list: IList = form.getElement('myList') as IList;
                await list.edit();
            }
        }
    ]
}

export let form: IForm = <IForm>{
    type: UIForm,
    name: 'simpleForm',
    elements: [
        <IList>{
            type: UIList,
            name: 'myList',
            bindingProperty: 'objectList',
            bordered: true,
            textSelect: false,
            iconDisplay: IconDisplay.iconAndText,
            figAwesome: <IFigAwesome>{
                faClass: ['fas', 'fa-feather-pointed', 'fa-lg'],
                faStyle: ['color: grey']
            },
            menu: menu,
            itemsElement: <IDataElement>{
                type: UIDataElement,
                textSelect: false,
                async onAfterSetData(event: UISetDataEvent, form: IForm, elem: IDataElement) {
                    elem.value = event.data.item + ': ' + event.data.value;
                },
                async onDblClick(event, form, elem, item) {
                    let list: IList = form.getElement('myList') as IList;
                    await list.edit(elem.id);
                },
            },
            async onAfterEdit(event:UIEditEvent, form:IForm, elem: IDataElement, item:IDataElement){
                let arr = event.value.split(':');
                item.setData({
                    item:arr[0],
                    value:arr[1]
                });
            }
        }
    ]
}

let data = {
    objectList: [
        {
            item: "Кофе",
            value: "Эспрессо"
        },
        {
            item: "Чай",
            value: "Зеленый чай"
        },
        {
            item: "Прохладительные напитки",
            value: "Апельсиновый сок"
        }
    ],
}

/*Инициализация приложения AppManager*/
var Global: any = window;
Global.AppManager = AppManager;
Global.onpopstate = AppManager.onPopState;

AppManager.init(document.querySelector('#app'))
    .then(async ()=>{
        AppManager.add([form]);
        AppManager.open('simpleForm', data);
    })