Создание плагина Trello: как получить список активных карт, а затем добавить значок для каждой карты на основе данных из API? - PullRequest
Новая
       43

Создание плагина Trello: как получить список активных карт, а затем добавить значок для каждой карты на основе данных из API?

0 голосов
/ 17 февраля 2019

Я делаю плагин Trello или powerup, который должен делать эти вещи, в следующем порядке:

  1. Получить список всех имен карт на текущей доске

  2. С этим списком названий карточек вызовите API, который возвращает некоторые данные, относящиеся к каждой карточке.Вызов API использует список имен карт для фильтрации, а затем возвращает информацию.Без названий карт мне нужно было бы запросить все доступные данные, а затем отфильтровать их самостоятельно, но я не хочу этого делать, потому что а) чтобы минимизировать объем данных, которые необходимо вернуть, б) данные, отличные от этихЗапрошенный может быть недоступен или требует какой-то ключ, который может вызвать сбой вызова

  3. Использовать полученные данные, чтобы добавить пользовательский значок для каждой активной карты на доске

Проблема, с которой я столкнулся, это шаги 1 и 2, и документация Trello не очень ясна или информативна, на мой взгляд, в отношении подробного понимания того, как работают их инструменты разработчика..

Я постараюсь указать свою проблему как можно лучше.Это не ошибка в коде или проблема «мой код ломается, и я не знаю почему».Я просто не знаю или не понимаю, как это сделать, основываясь на имеющейся документации.

Также стоит упомянуть, что я начинающий разработчик, и мой опыт почти нулевой.

Давайте посмотрим, что сейчас делает мой код, и в чем конкретно заключается моя проблема:

Сначала мой код вызывает сторонний источник данных.asyncCall - это созданная мной функция, которая возвращает объект (который содержит массив объектов) с помощью вызова выборки.

(2) 

// client.js
(...)
var data = asyncCall(url);
(...)

Во-вторых.Плагин trello использует свойство 'campaignName' объектов в возвращаемых данных для фильтрации данных.Такие данные добавляются в значок для каждой карты.Он сравнивает имя карты и «имя_кампании», и, если они равны, для добавления к значку требуется этот фрагмент данных.

Он близок к копировальной пасте этого .

(3) 

// client.js
(...)
TrelloPowerUp.initialize({
  "card-badges": function(t, opts) {
    return t
      .card("name")
      .get("name")
      .then(function(cardName) {
        return [
          {
            dynamic: function() {
              return data.then(data => {
                var thisCampaign = data.find(
                  campaign =>
                    campaign.campaignName.toLowerCase() ===
                    cardName.toLowerCase()
                );
                return {
                  text: `${thisCampaign.budget} ${thisCampaign.budgetType}`,
                  icon: FB_ICON,
                  color: BADGE_COLOR,
                };
              });
            },
          },
        ];
      });
  }
});
(...)

FB_ICON, BADGE_COLOR и т. Д. Являются просто предопределенными переменными в моем коде.Когда я тестирую этот код, он работает.На доске trello отображаются значки с пользовательской информацией, основанной на названии карты и используемом мной макетеAPI (файл JSON в исходном коде, данные которого называются асинхронно).

Я понимаю, что TrelloPowerUp.initialize - этометод, который запускается, когда плагин запускается (когда, по сути, рендерится доска trello).Этот метод требует и объекта возможностей в качестве аргумента, в моем случае со свойством «card-badges», и со значением функции, которая возвращает массив объектов, каждый объект представляет данные для создания значка.Такая функция запускается или, кажется, запускается для каждой активной карты на плате.

Есть также объект 't', который имеет такие методы, как .card и .get, которые, насколько я понимаю, в этом конкретном случаеcontext (t.card ("name"). get ("name")), возвращает обещание, которое соответствует названию карты.

Что мне не хватает, так это шаг, где я получаю списоккарточных названий доски.Глядя на документацию, в частности здесь , моей первой мыслью было что-то вроде: «объект« t »позволяет мне получить доступ ко всему на доске, включая список всех карт и их имен», так что прежде чеммой асинхронный вызов API, я пытался использовать что-то вроде:

(1) 

var t = window.TrelloPowerUp.iframe();
var allCardNames = t.cards("names").get("names").then(function(cardNames) {return cardNames});

Однако, это вызвало ошибку, в основном, Трелло жаловался, что я не должен использовать TrelloPowerUp.iframe() и TrelloPowerUp.initialize () одновременно (я могу воспроизвести точную ошибку и добавить ее здесь завтра утром).

РЕДАКТИРОВАТЬ: Если я просто подключу TrelloPowerUp.iframe() до (или после) TrelloPowerUp.initialize() Я получаю следующее сообщение об ошибке на консоли:

Cannot call TrelloPowerUp.iframe() from your index connector where you call TrelloPowerUp.initialize(). TrelloPowerUp.iframe() is only used for secondary iframes you may create or request from Trello during the Power-Up lifecycle.

Поэтому мне нужно изменить мой код выше так, чтобы:

  1. Я получил все картыимена активной доски (1 ??? что делать вместо использования TrelloPowerUp.iframe ()?)
  2. Я делаю асинхронный вызов, вводя имена карт (2)
  3. Я добавляю значок к каждому (3)

У меня есть рабочий пример: https://glitch.com/edit/#!/card-badge-test

...