ucan-ext-js-kitchen-sink/packages/local/common-ux/src/entity/todo/EntityToDoView.js

my-ext-gen-app description for Ext JS app MyExtGenApp

Ext.define('UCAN.common.entity.todo.EntityToDoView', {
  extend: 'Ext.Panel',
  xtype: 'entityToDoView',
  cls: 'js-ucan-entity-todo-view ucan-entity-todo-view',

  config: {
    toDoTitle: null,
    cards: [],
    hideTasks: false
  },
  twoWayBindable: {
    toDoTitle: true,
    cards: true
  },
  publishes: ['toDoTitle', 'cards'],

  layout: 'hbox',
  scrollable: true,

  items: [
    {
      xtype: 'panel',
      layout: 'vbox',
      cls: 'js-ucan-todo-view-todo-panel ucan-todo-view-todo-panel',
      titleAlign: 'center',
      scrollable: true,
      border: true,
      items: [
        {
          xtype: 'panel',
          cls: 'js-ucan-todo-view-todo-panel-cards',
        },
        {
          xtype: 'panel',
          cls: 'js-ucan-todo-view-todo-panel-actions',
        }
      ]
    },
    {
      layout: 'card',
      cls: 'js-ucan-entity-todo-view-card-container',
      flex: 5
    }
  ],

  // region Update Attributes

  updateHideTasks: function(config) {
    this.down('[cls~=js-ucan-todo-view-todo-panel]').setHidden(config);
  },

  updateToDoTitle: function(config) {
    let backButton = this.down('[cls~=js-ucan-todo-view-todo-panel]');
    backButton.setTitle(config);
  },

  updateCards: function(config) {
    if (!Ext.isEmpty(config)) {
      const taskContainer = this.down('[cls~=js-ucan-todo-view-todo-panel-cards]');
      const taskArray = config.map(function(record) {
        return record.task;
      });
      if (!Ext.isEmpty(taskArray[0])) {
        taskArray.forEach(task => {
          const check = Ext.create(
              {
                xtype: 'checkboxfield',
                bind: {
                  checked: task.bind.condition
                },
                disabled: true,
                listeners: {
                  element: 'element',
                  click: task.clickEvent
                }
              });
          const button = Ext.create(
              {
                xtype: 'button',
                bind:{
                  tooltip: task.tooltip
                },
                iconCls: task.taskIcon,
                handler: task.clickEvent
              }
          );
          const label = Ext.create(
              {
                xtype: 'label',
                bind: {
                  html: task.label,
                  tooltip: task.tooltip
                },
                cls: 'ucan-todo-view-todo-panel-task-label',
                listeners: {
                  element: 'element',
                  click: task.clickEvent
                }
              }
          );

          if (task.hasHeadline) {
            if (!Ext.isEmpty(task.headlineButton)) {
              taskContainer.add(
                  {
                    layout: 'hbox',
                    items: [
                      {
                        xtype: 'label',
                        bind: {
                          html: '<h3 style="margin-left: 12px">' + task.headline + '</h3>'
                        }
                      },
                      {
                        xtype: 'button',
                        iconCls: 'x-fa fa-retweet',
                        ui: 'addEntityButton',
                        bind: {
                          tooltip: task.headlineButton.tooltip
                        },
                        handler: task.headlineButton.handler
                      }
                    ]
                  });
            } else {
              taskContainer.add({
                xtype: 'label',
                bind: {
                  html: '<h3 style="margin-left: 12px">' + task.headline + '</h3>'
                }
              });
            }
          }

          const todo = {
            layout: 'hbox',
            items: [
              check,
              button,
              label
            ]
          }
          taskContainer.add(todo);

          if(task.hasEndline) {
            taskContainer.add({
              xtype: 'container',
              cls: 'ucan-dotted-border',
              border: true
            });
          }
        });
      } else {
        taskContainer.setHidden(true);
      }
    }

    let cardContainer = this.down('[cls~=js-ucan-entity-todo-view-card-container]');
    cardContainer.setItems(config);
    cardContainer.setActiveItem(0);
  },

  updateActions: function(config) {
    if (!Ext.isEmpty(config)) {
      const actionContainer = this.down('[cls~=js-ucan-todo-view-todo-panel-actions]');
      config.forEach(task => {
        const check = Ext.create(
            {
              xtype: 'checkboxfield',
              bind: {
                checked: task.bind.condition
              },
              disabled: true,
              listeners: {
                element: 'element',
                click: task.clickEvent
              }
            });
        const button = Ext.create(
            {
              xtype: 'button',
              bind:{
                tooltip: task.tooltip
              },
              iconCls: task.taskIcon,
              handler: task.clickEvent
            }
        );
        const label = Ext.create(
            {
              xtype: 'label',
              bind: {
                html: task.label,
                tooltip: task.tooltip
              },
              cls: 'ucan-todo-view-todo-panel-task-label',
              listeners: {
                element: 'element',
                click: task.clickEvent
              }
            }
        );
        const actions = {
          layout: 'hbox',
          items: [
            check,
            button,
            label
          ]
        }
        actionContainer.add(actions);
      })
    }
  }

  // endregion Update Attributes
});