Комбо-бокс для выбора связанной сущности

[sedovalx]

Иногда в редакторе типа А нужно выбрать значение поля, которое ссылается на тип В. Например, в редакторе аренды нужно выбрать водителя и машину. Причем незанятую машину. Предполагается это делать в виде выбора из выпадающего списка. Понятное дело, что в каждом случае этот список будет отображать разные данные, и сделать один комбик на все случаи скорее всего не выйдет. Но можно попробовать сделать базовый компонент, наследники которого будут всего лишь указывать, как получать данные для отображения.

Думаю, это должен быть компонент, похожий на комбик для выбора роли. Если хорошо подумать, то комбик для выбора роли - это всего лишь частный случай реализуемого компонента.

В базовой реализации компонента будет весь UI и вызов некоторого метода, который возвращает данные для отображения в виде deferred-объекта, который, разрешается в массив элементов выпадающего списка. У каждого элемента два поля:

• id Number
• title String Т.е. что-то типа [{ id: 0, title: "Администратор" }, { id: 1, title: "Ремонтник" }].

В базовой реализации этот метод будет возвращать deferred от пустого массива, т.е. список будет пустым. В наследниках этот метод будет переопределяться, чтобы возвращать уже конкретные данные. Например, в комбике выбора роли, если бы он был унаследован от этого компонента, переопределяемый метод вернул бы просто $.Deferred().resolve([{ id: 0, title: "Администратор" }, { id: 1, title: "Ремонтник" }, ...]). А вот в комбике для выбора незанятых автомобилей для аренды этот метод будет уже сложнее:

• Из store нужно будет выбрать все автомобили.
• Из store нужно будет выбрать все открытые аренды, по которым узнать все занятые в данный момент машины.
• Исключить из всех машин занятые машины
• Вернуть полученный список в виде { id: #, title: "..." }

[sedovalx]

@Argelein ты все правильно сделал. В компоненте не нужно метода никакого, и никакой базовой реализации не нужно делать - она уже есть, и ты ее используешь. Данные для комбика должны подготавливаться в контроллере, у тебя именно так. Тут все верно. Единственное - не нужно у модели вводить дополнительные свойства только для того, чтобы один раз где-то отобразить. Точнее это тоже вариант, но в данном случае есть лучше способ. Скажем, тебе из массива классов машин нужно сделать массив объектов { id: 1, label: "something" }. Это можно сделать так:

this.store.find("car-class").then(items => items.map(item => { id: item.id, label: item.name }));

Метод store.find возвращает promise, у которого есть метод then. В метод параметром передается массив полученных классов машин. Внутри метода ты можешь преобразовать этот массив к чему-то другому, например, к требуемому массиву пар <id, label>. Это делается при помощи стандартного метода Array.map, в который передается функция. Эта функция будет вызываться для каждого элемента массива. Что ты из нее вернешь, то и окажется в конечном результате.

[kirzas]

@sedovalx не работает так мапинг, я уже голову сломал. я нашел похожи пример "Example: Using map to reformat objects in an array" Ссылка на него не работает, вот ссылка на соседний: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Example:_Mapping_an_array_of_numbers_to_an_array_of_square_roots

и так не работает:

return this.store.find("car-class").then(items => 
    items.map(item => {
      var newArr = {};
      newArr['id'] = item.id;
      newArr['label'] = item.name;
      return newArr;
    })
);

в конце смайлик грустный получился :)

[kirzas]

@sedovalx в твоем варианте просто на синтаксис ругается а в том, что я попробовал на выходе null

[sedovalx]

@Argelein делай пуш, как есть. Ща разберемся.

[kirzas]

@sedovalx Пуш сделал, но я уже вернул до рабочей версии. Т.е. сейчас работает, но Label в модели расчитывается из Name

[sedovalx]

@Argelein внимательнее, версия была не совсем рабочая. Выпадающий список к классами был пустым.

[sedovalx]

@Argelein вот с этим комбиком вроде бы все заработало. Проверь, если что-то непонятно, дай знать.

@Argelein @v1pka @hodkoff2 на клиенте добавились новые зависимости + обновились версии текущих => npm install & bower install

[kirzas]

@sedovalx Привет bower предлагает обновиться: ┌───────────────────────────────────────────┐ │ Update available: 1.4.1 (current: 1.3.12) │ │ Run npm update -g bower to update. │ └───────────────────────────────────────────┘ Проигнорить это?

[sedovalx]

@Argelein обновляй

[sedovalx]

@Argelein как дела?

[kirzas]

@sedovalx Спасибо, все работает и понятно вроде :) Я дальше начал двигаться. Сейчас буду делать Rent и Payment, затем Repair и Fine.