<commit_before>Ext.namespace("dashletInstance");

dashletInstance.form = {
  init: function () {
    var URL_DASHLET_INSTANCE = "dashletInstance";

    dashletInstanceSaveProcessAjax = function () {
      var myMask = new Ext.LoadMask(Ext.getBody(), {msg: "Saving. Please wait..."});
      myMask.show();

      Ext.Ajax.request({
        url: "saveDashletInstance",
        method: "POST",
        params:{//"option":     option,
                //"DAS_INS_UID": "",
                "DAS_UID":     cboDasUID.getValue(),
                "DAS_INS_TYPE": cboDasInsType.getValue(),
                "DAS_INS_CONTEXT_TIME": cboDasInsContextTime.getValue(),
                //"DAS_INS_START_DATE":   txtDasInsStartDate.getValue().format(txtDasInsStartDate.format),
                //"DAS_INS_END_DATE":  txtDasInsEndDate.getValue().format(txtDasInsEndDate.format),
                "DAS_INS_OWNER_TYPE":   cboDasInsOwnerType.getValue(),
                "DAS_INS_OWNER_UID":    cboDasInsOwnerUID.getValue()
                //,
                //"DAS_INS_PROCESSES": cboProcess.getValue(),
                //"DAS_INS_TASKS":    cboTask.getValue()
               },

        success:function (result, request) {
                  myMask.hide();

                  var dataResponse = Ext.util.JSON.decode(result.responseText)

                  switch (dataResponse.status) {
                    case "OK": Ext.MessageBox.alert("Message", "Dashboard Instance registered correctly"); break;
                    default: Ext.MessageBox.alert("Alert", "Dashboard Instance registered failed"); break;
                  }
                },
        failure:function (result, request) {
                  myMask.hide();
                  Ext.MessageBox.alert("Alert", "Ajax communication failed");
                }
      });
    }

    dashletInstanceLoadProcessAjax = function () {
      var strUID = hiddenDasInsUID.getValue();

      if (strUID.length > 0) {
        dashletInstanceFrm.getForm().load({
          url: "getRoutingInfo.php",
          method: "POST",
          params: {"DAS_INS_UID": strUID},

          //failure: function(form, action) {
          failure:function (result, request) {
            Ext.Msg.alert("Load failed", "Failed");
          }
        });
      }
    }

    //------------------------------------------------------------------------------------------------------------------
    var storeDasUID = new Ext.data.Store({
      proxy: new Ext.data.HttpProxy({
        url: URL_DASHLET_INSTANCE,
        method: "POST"
      }),

      baseParams: {"option": "DASHLST"},

      reader: new Ext.data.JsonReader({
        totalProperty: "resultTotal",
        root:          "resultRoot",
        fields:[{name: "DAS_UID",   type: "string"},
                {name: "DAS_TITLE", type: "string"}
               ]
      }),

      autoLoad: true, //First call

      listeners: {
        load: function (store, record, option) {
          cboDasUID.setValue(store.getAt(0).get(cboDasUID.valueField));
        }
      }
    });

    var storeDasInsType = new Ext.data.ArrayStore({
      idIndex: 0, //definimos la posicion del ID de cada registro
      fields: ["id", "value"],
      data:   [["OPEN_CASES", "Open Cases"]
              ]
    });

    var storeDasInsContextTime = new Ext.data.ArrayStore({
      idIndex: 0,
      fields: ["id", "value"],
      data:   [//["RANGE", "Date Ranges"],
               ["MONTH",     "Month"],
               ["TODAY",     "Today"],
               ["YESTERDAY", "Yesterday"],
               ["THIS_WEEK", "Last Month"],
               ["PREVIOUS_WEEK", "Last Month"],
               ["THIS_MONTH", "Last Month"],
               ["PREVIOUS_MONTH", "Last Month"],
               ["THIS_QUARTER", "Last Month"],
               ["PREVIOUS_QUARTER", "Last Month"],
               ["THIS_YEAR", "Last Month"],
               ["PREVIOUS_YEAR", "Last Month"]
              ]
    });

    var storeDasInsOwnerType = new Ext.data.ArrayStore({
      idIndex: 0,
      fields: ["id", "value"],
      data:   [//["USER",       "User"],
               ["DEPARTMENT", "Department"]
              ]
    });

    var storeDasInsOwnerUID = new Ext.data.Store({
      proxy: new Ext.data.HttpProxy({
        url: URL_DASHLET_INSTANCE,
        method: "POST"
      }),

      reader: new Ext.data.JsonReader({
        totalProperty: "resultTotal",
        root:          "resultRoot",
        fields:[{name: "TABLE_UID",  type: "string"},
                {name: "TABLE_NAME", type: "string"}
              ]
      }),

      autoLoad: true, //First call

      listeners: {
        beforeload: function (store) {
          storeDasInsOwnerUID.baseParams = {"option": "OWNERTYPE",
                                            "type": cboDasInsOwnerType.getValue()
                                           };
        },

        load: function (store, record, option) {
          cboDasInsOwnerUID.setValue(store.getAt(0).get(cboDasInsOwnerUID.valueField));
        }
      }
    });

    var storeProcess = new Ext.data.ArrayStore({
      idIndex: 0,
      fields: ["id", "value"],
      data:   [["ALL", "All"]
               //,
               //["SEL", "Selection"]
              ]
    });

    var storeTask = new Ext.data.ArrayStore({
      idIndex: 0,
      fields: ["id", "value"],
      data:   [["ALL", "All"]
               //,
               //["SEL", "Selection"]
              ]
    });

    //------------------------------------------------------------------------------------------------------------------
    var hiddenDasInsUID = new Ext.form.Hidden({
      id: "hiddenDasInsUID",
      name: "DAS_INS_UID",
      //value: ""
      value: "1655406564eaf2b3bd3df47008036625"
    });

    var cboDasUID = new Ext.form.ComboBox({
      id: "cboDasUID",
      name: "DAS_UID",

      valueField:   "DAS_UID",
      displayField: "DAS_TITLE",
      store:        storeDasUID,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Dashboard"
    });

    var cboDasInsType = new Ext.form.ComboBox({
      id: "cboDasInsType",
      name: "DAS_INS_TYPE",

      valueField:   "id",
      displayField: "value",
      value:        "OPEN_CASES",
      store:        storeDasInsType,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Type"
    });

    var cboDasInsContextTime = new Ext.form.ComboBox({
      id: "cboDasInsContextTime",
      name: "DAS_INS_CONTEXT_TIME",

      valueField:   "id",
      displayField: "value",
      value:        "MONTH",
      store:        storeDasInsContextTime,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Period"
    });

    var txtDasInsStartDate = new Ext.form.DateField({
      id: "txtDasInsStartDate",
      name: "DAS_INS_START_DATE",

      value: new Date(2011, 0, 1), //january=0, february=1, etc
      width: 100,
      format: "Y/m/d",
      editable: false,
      fieldLabel: "Start Date"
    });

    var txtDasInsEndDate = new Ext.form.DateField({
      id: "txtDasInsEndDate",
      name: "DAS_INS_END_DATE",

      value: new Date(2011, 0, 1),
      width: 100,
      format: "Y/m/d",
      editable: false,
      fieldLabel: "Finish Date"
    });

    var cboDasInsOwnerType = new Ext.form.ComboBox({
      id: "cboDasInsOwnerType",
      name: "DAS_INS_OWNER_TYPE",

      valueField:   "id",
      displayField: "value",
      value:        "DEPARTMENT",
      store:        storeDasInsOwnerType,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Owner Type",

      listeners: {
        select: function (combo, record, index) {
          storeDasInsOwnerUID.baseParams = {"option": "OWNERTYPE",
                                            "type": combo.getValue()
                                           };
          cboDasInsOwnerUID.store.load();
        }
      }
    });

    var cboDasInsOwnerUID = new Ext.form.ComboBox({
      id: "cboDasInsOwnerUID",
      name: "DAS_INS_OWNER_UID",

      valueField:   "TABLE_UID",
      displayField: "TABLE_NAME",
      store:        storeDasInsOwnerUID,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Owner"
    });

    var cboProcess = new Ext.form.ComboBox({
      id: "cboProcess",
      name: "DAS_INS_PROCESSES",

      valueField:   "id",
      displayField: "value",
      value:        "ALL",
      store:        storeProcess,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Process"
    });

    var cboTask = new Ext.form.ComboBox({
      id: "cboTask",
      name: "DAS_INS_TASKS",

      valueField:   "id",
      displayField: "value",
      value:        "ALL",
      store:        storeTask,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Task"
    });

    //------------------------------------------------------------------------------------------------------------------
    var dashletInstanceFrm = new Ext.form.FormPanel({
      id:  "dashletInstanceFrm",

      style: "margin: 0 auto 0 auto;",
      //labelAlign: "top",
      labelWidth: 115, //The width of labels in pixels
      bodyStyle: "padding:0.5em;",
      border: true,
      //cls: "class1",
      width: 400,
      //height: 400,

      title: "New Dashboard Instance",

      items: [hiddenDasInsUID,
              cboDasUID,
              cboDasInsType,
              cboDasInsContextTime,
              //txtDasInsStartDate,
              //txtDasInsEndDate,
              cboDasInsOwnerType,
              cboDasInsOwnerUID
              //,
              //cboProcess,
              //cboTask
             ],

      buttonAlign: "right",
      buttons: [new Ext.Action({
                  id:   "btnSubmit",

                  text: "Save",
                  //scope: this,
                  handler: function () {
                    dashletInstanceSaveProcessAjax();
                  }
                }),

                //{xtype: "button",
                // id:    "btnReset",
                // text:  "Reset",
                // handler: function () {
                //   //Ext.getCmp("dashletInstanceFrm").getForm().reset();
                //   dashletInstanceFrm.getForm().reset();
                //   //cboProcess.store.load();
                // }
                //},

                {xtype: "button",
                 id:    "btnCancel",
                 text:  "Cancel",
                 handler: function () {
                   window.location.href = "dashlestsList";
                 }
                }
               ]
    });

    //------------------------------------------------------------------------------------------------------------------
    //dashletInstanceLoadProcessAjax();

    //------------------------------------------------------------------------------------------------------------------
    var pnlMain = new Ext.Panel({
      id: "pnlMain",

      region: "center",
      margins: {top:3, right:3, bottom:3, left:0},
      //bodyStyle: "padding:0.5em;", //propiedades ... //no aceptaba para la derecha
      bodyStyle: "padding: 25px 25px 25px 25px;", //propiedades ...
      border: false,

      items: [dashletInstanceFrm]
    });

    //------------------------------------------------------------------------------------------------------------------
    //LOAD ALL PANELS
    var viewport = new Ext.Viewport({
      layout:"fit",
      items:[pnlMain]
    });
  }
}

Ext.onReady(dashletInstance.form.init, dashletInstance.form);<commit_msg>commit<commit_after>Ext.namespace("dashletInstance");

dashletInstance.form = {
  init: function () {
    var URL_DASHLET_INSTANCE = "dashletInstance";

    dashletInstanceSaveProcessAjax = function () {
      var myMask = new Ext.LoadMask(Ext.getBody(), {msg: "Saving. Please wait..."});
      myMask.show();

      Ext.Ajax.request({
        url: "saveDashletInstance",
        method: "POST",
        params:{//"option":     option,
                //"DAS_INS_UID": "",
                "DAS_UID":     cboDasUID.getValue(),
                "DAS_INS_TYPE": cboDasInsType.getValue(),
                "DAS_INS_CONTEXT_TIME": cboDasInsContextTime.getValue(),
                //"DAS_INS_START_DATE":   txtDasInsStartDate.getValue().format(txtDasInsStartDate.format),
                //"DAS_INS_END_DATE":  txtDasInsEndDate.getValue().format(txtDasInsEndDate.format),
                "DAS_INS_OWNER_TYPE":   cboDasInsOwnerType.getValue(),
                "DAS_INS_OWNER_UID":    cboDasInsOwnerUID.getValue()
                //,
                //"DAS_INS_PROCESSES": cboProcess.getValue(),
                //"DAS_INS_TASKS":    cboTask.getValue()
               },

        success:function (result, request) {
                  myMask.hide();

                  var dataResponse = Ext.util.JSON.decode(result.responseText)

                  switch (dataResponse.status) {
                    case "OK": Ext.MessageBox.alert("Message", "Dashboard Instance registered correctly"); break;
                    default: Ext.MessageBox.alert("Alert", "Dashboard Instance registered failed"); break;
                  }
                },
        failure:function (result, request) {
                  myMask.hide();
                  Ext.MessageBox.alert("Alert", "Ajax communication failed");
                }
      });
    }

    dashletInstanceLoadProcessAjax = function () {
      var strUID = hiddenDasInsUID.getValue();

      if (strUID.length > 0) {
        dashletInstanceFrm.getForm().load({
          url: "getRoutingInfo.php",
          method: "POST",
          params: {"DAS_INS_UID": strUID},

          //failure: function(form, action) {
          failure:function (result, request) {
            Ext.Msg.alert("Load failed", "Failed");
          }
        });
      }
    }

    //------------------------------------------------------------------------------------------------------------------
    var storeDasUID = new Ext.data.Store({
      proxy: new Ext.data.HttpProxy({
        url: URL_DASHLET_INSTANCE,
        method: "POST"
      }),

      baseParams: {"option": "DASHLST"},

      reader: new Ext.data.JsonReader({
        totalProperty: "resultTotal",
        root:          "resultRoot",
        fields:[{name: "DAS_UID",   type: "string"},
                {name: "DAS_TITLE", type: "string"}
               ]
      }),

      autoLoad: true, //First call

      listeners: {
        load: function (store, record, option) {
          cboDasUID.setValue(store.getAt(0).get(cboDasUID.valueField));
        }
      }
    });

    var storeDasInsType = new Ext.data.ArrayStore({
      idIndex: 0, //definimos la posicion del ID de cada registro
      fields: ["id", "value"],
      data:   [["OPEN_CASES", "Open Cases"]
              ]
    });

    var storeDasInsContextTime = new Ext.data.ArrayStore({
      idIndex: 0,
      fields: ["id", "value"],
      data:   [//["RANGE", "Date Ranges"],
               ["MONTH",     "Month"],
               ["TODAY",     "Today"],
               ["YESTERDAY", "Yesterday"],
               ["THIS_WEEK", "Last Month"],
               ["PREVIOUS_WEEK", "Last Month"],
               ["THIS_MONTH", "Last Month"],
               ["PREVIOUS_MONTH", "Last Month"],
               ["THIS_QUARTER", "Last Month"],
               ["PREVIOUS_QUARTER", "Last Month"],
               ["THIS_YEAR", "Last Month"],
               ["PREVIOUS_YEAR", "Last Month"]
              ]
    });

    var storeDasInsOwnerType = new Ext.data.ArrayStore({
      idIndex: 0,
      fields: ["id", "value"],
      data:   [//["USER",       "User"],
               ["DEPARTMENT", "Department"]
              ]
    });

    var storeDasInsOwnerUID = new Ext.data.Store({
      proxy: new Ext.data.HttpProxy({
        url: URL_DASHLET_INSTANCE,
        method: "POST"
      }),

      reader: new Ext.data.JsonReader({
        totalProperty: "resultTotal",
        root:          "resultRoot",
        fields:[{name: "TABLE_UID",  type: "string"},
                {name: "TABLE_NAME", type: "string"}
              ]
      }),

      autoLoad: true, //First call

      listeners: {
        beforeload: function (store) {
          storeDasInsOwnerUID.baseParams = {"option": "OWNERTYPE",
                                            "type": cboDasInsOwnerType.getValue()
                                           };
        },

        load: function (store, record, option) {
          cboDasInsOwnerUID.setValue(store.getAt(0).get(cboDasInsOwnerUID.valueField));
        }
      }
    });

    var storeProcess = new Ext.data.ArrayStore({
      idIndex: 0,
      fields: ["id", "value"],
      data:   [["ALL", "All"]
               //,
               //["SEL", "Selection"]
              ]
    });

    var storeTask = new Ext.data.ArrayStore({
      idIndex: 0,
      fields: ["id", "value"],
      data:   [["ALL", "All"]
               //,
               //["SEL", "Selection"]
              ]
    });

    //------------------------------------------------------------------------------------------------------------------
    var hiddenDasInsUID = new Ext.form.Hidden({
      id: "hiddenDasInsUID",
      name: "DAS_INS_UID",
      //value: ""
      value: "1655406564eaf2b3bd3df47008036625"
    });

    var cboDasUID = new Ext.form.ComboBox({
      id: "cboDasUID",
      name: "DAS_UID",

      valueField:   "DAS_UID",
      displayField: "DAS_TITLE",
      store:        storeDasUID,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Dashboard"
    });

    var cboDasInsType = new Ext.form.ComboBox({
      id: "cboDasInsType",
      name: "DAS_INS_TYPE",

      valueField:   "id",
      displayField: "value",
      value:        "OPEN_CASES",
      store:        storeDasInsType,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Type"
    });

    var cboDasInsContextTime = new Ext.form.ComboBox({
      id: "cboDasInsContextTime",
      name: "DAS_INS_CONTEXT_TIME",

      valueField:   "id",
      displayField: "value",
      value:        "MONTH",
      store:        storeDasInsContextTime,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Period"
    });

    var txtDasInsStartDate = new Ext.form.DateField({
      id: "txtDasInsStartDate",
      name: "DAS_INS_START_DATE",

      value: new Date(2011, 0, 1), //january=0, february=1, etc
      width: 100,
      format: "Y/m/d",
      editable: false,
      fieldLabel: "Start Date"
    });

    var txtDasInsEndDate = new Ext.form.DateField({
      id: "txtDasInsEndDate",
      name: "DAS_INS_END_DATE",

      value: new Date(2011, 0, 1),
      width: 100,
      format: "Y/m/d",
      editable: false,
      fieldLabel: "Finish Date"
    });

    var cboDasInsOwnerType = new Ext.form.ComboBox({
      id: "cboDasInsOwnerType",
      name: "DAS_INS_OWNER_TYPE",

      valueField:   "id",
      displayField: "value",
      value:        "DEPARTMENT",
      store:        storeDasInsOwnerType,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Owner Type",

      listeners: {
        select: function (combo, record, index) {
          storeDasInsOwnerUID.baseParams = {"option": "OWNERTYPE",
                                            "type": combo.getValue()
                                           };
          cboDasInsOwnerUID.store.load();
        }
      }
    });

    var cboDasInsOwnerUID = new Ext.form.ComboBox({
      id: "cboDasInsOwnerUID",
      name: "DAS_INS_OWNER_UID",

      valueField:   "TABLE_UID",
      displayField: "TABLE_NAME",
      store:        storeDasInsOwnerUID,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Owner"
    });

    var cboProcess = new Ext.form.ComboBox({
      id: "cboProcess",
      name: "DAS_INS_PROCESSES",

      valueField:   "id",
      displayField: "value",
      value:        "ALL",
      store:        storeProcess,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Process"
    });

    var cboTask = new Ext.form.ComboBox({
      id: "cboTask",
      name: "DAS_INS_TASKS",

      valueField:   "id",
      displayField: "value",
      value:        "ALL",
      store:        storeTask,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Task"
    });

    //------------------------------------------------------------------------------------------------------------------
    var dashletInstanceFrm = new Ext.form.FormPanel({
      id:  "dashletInstanceFrm",

      style: "margin: 0 auto 0 auto;",
      //labelAlign: "top",
      labelWidth: 115, //The width of labels in pixels
      bodyStyle: "padding:0.5em;",
      border: true,
      //cls: "class1",
      width: 400,
      //height: 400,

      title: "New Dashboard Instance",

      items: [hiddenDasInsUID,
              cboDasUID,
              cboDasInsType,
              cboDasInsContextTime,
              //txtDasInsStartDate,
              //txtDasInsEndDate,
              cboDasInsOwnerType,
              cboDasInsOwnerUID
              //,
              //cboProcess,
              //cboTask
             ],

      buttonAlign: "right",
      buttons: [new Ext.Action({
                  id:   "btnSubmit",

                  text: "Save",
                  //scope: this,
                  handler: function () {
                    dashletInstanceSaveProcessAjax();
                  }
                }),

                //{xtype: "button",
                // id:    "btnReset",
                // text:  "Reset",
                // handler: function () {
                //   //Ext.getCmp("dashletInstanceFrm").getForm().reset();
                //   dashletInstanceFrm.getForm().reset();
                //   //cboProcess.store.load();
                // }
                //},

                {xtype: "button",
                 id:    "btnCancel",
                 text:  "Cancel",
                 handler: function () {
                   window.location.href = "dashlestList";
                 }
                }
               ]
    });

    //------------------------------------------------------------------------------------------------------------------
    //dashletInstanceLoadProcessAjax();

    //------------------------------------------------------------------------------------------------------------------
    var pnlMain = new Ext.Panel({
      id: "pnlMain",

      region: "center",
      margins: {top:3, right:3, bottom:3, left:0},
      //bodyStyle: "padding:0.5em;", //propiedades ... //no aceptaba para la derecha
      bodyStyle: "padding: 25px 25px 25px 25px;", //propiedades ...
      border: false,

      items: [dashletInstanceFrm]
    });

    //------------------------------------------------------------------------------------------------------------------
    //LOAD ALL PANELS
    var viewport = new Ext.Viewport({
      layout:"fit",
      items:[pnlMain]
    });
  }
}

Ext.onReady(dashletInstance.form.init, dashletInstance.form);<|endoftext|>


<commit_before>Ext.namespace("dashletInstance");

dashletInstance.form = {
  init: function () {
    var URL_DASHLET_INSTANCE = "dashletInstance";

    dashletInstanceSaveProcessAjax = function () {
      var myMask = new Ext.LoadMask(Ext.getBody(), {msg: "Saving. Please wait..."});
      myMask.show();

      Ext.Ajax.request({
        url: "saveDashletInstance",
        method: "POST",
        params:{"DAS_INS_UID": hiddenDasInsUID.getValue(),
                "DAS_UID":     cboDasUID.getValue(),
                "DAS_INS_TYPE": cboDasInsType.getValue(),
                "DAS_INS_CONTEXT_TIME": cboDasInsContextTime.getValue(),
                //"DAS_INS_START_DATE":   txtDasInsStartDate.getValue().format(txtDasInsStartDate.format),
                //"DAS_INS_END_DATE":  txtDasInsEndDate.getValue().format(txtDasInsEndDate.format),
                "DAS_INS_OWNER_TYPE":   cboDasInsOwnerType.getValue(),
                "DAS_INS_OWNER_UID":    cboDasInsOwnerUID.getValue()
                //,
                //"DAS_INS_PROCESSES": cboProcess.getValue(),
                //"DAS_INS_TASKS":    cboTask.getValue()
               },

        success:function (result, request) {
                  myMask.hide();

                  var dataResponse = Ext.util.JSON.decode(result.responseText)

                  switch (dataResponse.status) {
                    case "OK": //Ext.MessageBox.alert("Message", "Dashboard Instance registered correctly");
                               window.location.href = "dashletsList";
                               break;
                    default: Ext.MessageBox.alert("Alert", "Dashboard Instance registered failed");
                             break;
                  }
                },
        failure:function (result, request) {
                  myMask.hide();
                  Ext.MessageBox.alert("Alert", "Ajax communication failed");
                }
      });
    }

    dashletInstanceFrmLoad = function () {
      /*
      if (DASHLET_INSTANCE.DAS_INS_UID.length > 0) {
        "DAS_INS_UID": "",
        "DAS_UID":     cboDasUID.getValue(),
        "DAS_INS_TYPE": cboDasInsType.getValue(),
        "DAS_INS_CONTEXT_TIME": cboDasInsContextTime.getValue(),
        //"DAS_INS_START_DATE":   txtDasInsStartDate.getValue().format(txtDasInsStartDate.format),
        //"DAS_INS_END_DATE":  txtDasInsEndDate.getValue().format(txtDasInsEndDate.format),
        "DAS_INS_OWNER_TYPE":   cboDasInsOwnerType.getValue(),
        "DAS_INS_OWNER_UID":    cboDasInsOwnerUID.getValue()
        //,
        //"DAS_INS_PROCESSES": cboProcess.getValue(),
        //"DAS_INS_TASKS":    cboTask.getValue()

        ////////////
      }
      */
    }

    //------------------------------------------------------------------------------------------------------------------
    var storeDasUID = new Ext.data.Store({
      proxy: new Ext.data.HttpProxy({
        url: URL_DASHLET_INSTANCE,
        method: "POST"
      }),

      baseParams: {"option": "DASHLST"},

      reader: new Ext.data.JsonReader({
        totalProperty: "resultTotal",
        root:          "resultRoot",
        fields:[{name: "DAS_UID",   type: "string"},
                {name: "DAS_TITLE", type: "string"}
               ]
      }),

      autoLoad: true, //First call

      listeners: {
        load: function (store, record, option) {
          cboDasUID.setValue(store.getAt(0).get(cboDasUID.valueField));
        }
      }
    });

    var storeDasInsType = new Ext.data.ArrayStore({
      idIndex: 0, //definimos la posicion del ID de cada registro
      fields: ["id", "value"],
      data:   [["OPEN_CASES", "Open Cases"]
              ]
    });

    var storeDasInsContextTime = new Ext.data.ArrayStore({
      idIndex: 0,
      fields: ["id", "value"],
      data:   [//["RANGE", "Date Ranges"],
               ["MONTH",     "Month"],
               ["TODAY",     "Today"],
               ["YESTERDAY", "Yesterday"],
               ["THIS_WEEK", "Last Month"],
               ["PREVIOUS_WEEK", "Last Month"],
               ["THIS_MONTH", "Last Month"],
               ["PREVIOUS_MONTH", "Last Month"],
               ["THIS_QUARTER", "Last Month"],
               ["PREVIOUS_QUARTER", "Last Month"],
               ["THIS_YEAR", "Last Month"],
               ["PREVIOUS_YEAR", "Last Month"]
              ]
    });

    var storeDasInsOwnerType = new Ext.data.ArrayStore({
      idIndex: 0,
      fields: ["id", "value"],
      data:   [//["USER",       "User"],
               ["DEPARTMENT", "Department"]
              ]
    });

    var storeDasInsOwnerUID = new Ext.data.Store({
      proxy: new Ext.data.HttpProxy({
        url: URL_DASHLET_INSTANCE,
        method: "POST"
      }),

      reader: new Ext.data.JsonReader({
        totalProperty: "resultTotal",
        root:          "resultRoot",
        fields:[{name: "TABLE_UID",  type: "string"},
                {name: "TABLE_NAME", type: "string"}
              ]
      }),

      autoLoad: true, //First call

      listeners: {
        beforeload: function (store) {
          storeDasInsOwnerUID.baseParams = {"option": "OWNERTYPE",
                                            "type": cboDasInsOwnerType.getValue()
                                           };
        },

        load: function (store, record, option) {
          cboDasInsOwnerUID.setValue(store.getAt(0).get(cboDasInsOwnerUID.valueField));
        }
      }
    });

    var storeProcess = new Ext.data.ArrayStore({
      idIndex: 0,
      fields: ["id", "value"],
      data:   [["ALL", "All"]
               //,
               //["SEL", "Selection"]
              ]
    });

    var storeTask = new Ext.data.ArrayStore({
      idIndex: 0,
      fields: ["id", "value"],
      data:   [["ALL", "All"]
               //,
               //["SEL", "Selection"]
              ]
    });

    //------------------------------------------------------------------------------------------------------------------
    var hiddenDasInsUID = new Ext.form.Hidden({
      id: "hiddenDasInsUID",
      name: "DAS_INS_UID"
    });

    var cboDasUID = new Ext.form.ComboBox({
      id: "cboDasUID",
      name: "DAS_UID",

      valueField:   "DAS_UID",
      displayField: "DAS_TITLE",
      store:        storeDasUID,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Dashboard"
    });

    var cboDasInsType = new Ext.form.ComboBox({
      id: "cboDasInsType",
      name: "DAS_INS_TYPE",

      valueField:   "id",
      displayField: "value",
      value:        "OPEN_CASES",
      store:        storeDasInsType,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Type"
    });

    var cboDasInsContextTime = new Ext.form.ComboBox({
      id: "cboDasInsContextTime",
      name: "DAS_INS_CONTEXT_TIME",

      valueField:   "id",
      displayField: "value",
      value:        "MONTH",
      store:        storeDasInsContextTime,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Period"
    });

    var txtDasInsStartDate = new Ext.form.DateField({
      id: "txtDasInsStartDate",
      name: "DAS_INS_START_DATE",

      value: new Date(2011, 0, 1), //january=0, february=1, etc
      width: 100,
      format: "Y/m/d",
      editable: false,
      fieldLabel: "Start Date"
    });

    var txtDasInsEndDate = new Ext.form.DateField({
      id: "txtDasInsEndDate",
      name: "DAS_INS_END_DATE",

      value: new Date(2011, 0, 1),
      width: 100,
      format: "Y/m/d",
      editable: false,
      fieldLabel: "Finish Date"
    });

    var cboDasInsOwnerType = new Ext.form.ComboBox({
      id: "cboDasInsOwnerType",
      name: "DAS_INS_OWNER_TYPE",

      valueField:   "id",
      displayField: "value",
      value:        "DEPARTMENT",
      store:        storeDasInsOwnerType,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Owner Type",

      listeners: {
        select: function (combo, record, index) {
          storeDasInsOwnerUID.baseParams = {"option": "OWNERTYPE",
                                            "type": combo.getValue()
                                           };
          cboDasInsOwnerUID.store.load();
        }
      }
    });

    var cboDasInsOwnerUID = new Ext.form.ComboBox({
      id: "cboDasInsOwnerUID",
      name: "DAS_INS_OWNER_UID",

      valueField:   "TABLE_UID",
      displayField: "TABLE_NAME",
      store:        storeDasInsOwnerUID,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Owner"
    });

    var cboProcess = new Ext.form.ComboBox({
      id: "cboProcess",
      name: "DAS_INS_PROCESSES",

      valueField:   "id",
      displayField: "value",
      value:        "ALL",
      store:        storeProcess,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Process"
    });

    var cboTask = new Ext.form.ComboBox({
      id: "cboTask",
      name: "DAS_INS_TASKS",

      valueField:   "id",
      displayField: "value",
      value:        "ALL",
      store:        storeTask,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Task"
    });

    //------------------------------------------------------------------------------------------------------------------
    var dashletInstanceFrm = new Ext.form.FormPanel({
      id:  "dashletInstanceFrm",

      style: "margin: 0 auto 0 auto;",
      //labelAlign: "top",
      labelWidth: 115, //The width of labels in pixels
      bodyStyle: "padding:0.5em;",
      border: true,
      //cls: "class1",
      width: 400,
      //height: 400,

      title: "New Dashboard Instance",

      items: [hiddenDasInsUID,
              cboDasUID,
              cboDasInsType,
              cboDasInsContextTime,
              //txtDasInsStartDate,
              //txtDasInsEndDate,
              cboDasInsOwnerType,
              cboDasInsOwnerUID
              //,
              //cboProcess,
              //cboTask
             ],

      buttonAlign: "right",
      buttons: [new Ext.Action({
                  id:   "btnSubmit",

                  text: "Save",
                  //scope: this,
                  handler: function () {
                    dashletInstanceSaveProcessAjax();
                  }
                }),

                //{xtype: "button",
                // id:    "btnReset",
                // text:  "Reset",
                // handler: function () {
                //   //Ext.getCmp("dashletInstanceFrm").getForm().reset();
                //   dashletInstanceFrm.getForm().reset();
                //   //cboProcess.store.load();
                // }
                //},

                {xtype: "button",
                 id:    "btnCancel",
                 text:  "Cancel",
                 handler: function () {
                   window.location.href = "dashletsList";
                 }
                }
               ]
    });

    //------------------------------------------------------------------------------------------------------------------
    //dashletInstanceLoadProcessAjax();
    var DASHLET_INSTANCE = Ext.util.JSON.decode(dashletInstance)

    //------------------------------------------------------------------------------------------------------------------
    var pnlMain = new Ext.Panel({
      id: "pnlMain",

      region: "center",
      margins: {top:3, right:3, bottom:3, left:0},
      //bodyStyle: "padding:0.5em;", //propiedades ... //no aceptaba para la derecha
      bodyStyle: "padding: 25px 25px 25px 25px;", //propiedades ...
      border: false,

      items: [dashletInstanceFrm]
    });

    //------------------------------------------------------------------------------------------------------------------
    //LOAD ALL PANELS
    var viewport = new Ext.Viewport({
      layout:"fit",
      items:[pnlMain]
    });
  }
}

Ext.onReady(dashletInstance.form.init, dashletInstance.form);<commit_msg>BUG 000 ultimos cambios<commit_after>Ext.namespace("dashletInstance");

dashletInstance.form = {
  init: function () {
    var URL_DASHLET_INSTANCE = "dashletInstance";

    dashletInstanceSaveProcessAjax = function () {
      var myMask = new Ext.LoadMask(Ext.getBody(), {msg: "Saving. Please wait..."});
      myMask.show();

      Ext.Ajax.request({
        url: "saveDashletInstance",
        method: "POST",
        params:{"DAS_INS_UID": hiddenDasInsUID.getValue(),
                "DAS_UID":     cboDasUID.getValue(),
                "DAS_INS_TYPE": cboDasInsType.getValue(),
                "DAS_INS_CONTEXT_TIME": cboDasInsContextTime.getValue(),
                //"DAS_INS_START_DATE":   txtDasInsStartDate.getValue().format(txtDasInsStartDate.format),
                //"DAS_INS_END_DATE":  txtDasInsEndDate.getValue().format(txtDasInsEndDate.format),
                "DAS_INS_OWNER_TYPE":   cboDasInsOwnerType.getValue(),
                "DAS_INS_OWNER_UID":    cboDasInsOwnerUID.getValue()
                //,
                //"DAS_INS_PROCESSES": cboProcess.getValue(),
                //"DAS_INS_TASKS":    cboTask.getValue()
               },

        success:function (result, request) {
                  myMask.hide();

                  var dataResponse = Ext.util.JSON.decode(result.responseText)

                  switch (dataResponse.status) {
                    case "OK": //Ext.MessageBox.alert("Message", "Dashboard Instance registered correctly");
                               window.location.href = "dashletsList";
                               break;
                    default: Ext.MessageBox.alert("Alert", "Dashboard Instance registered failed");
                             break;
                  }
                },
        failure:function (result, request) {
                  myMask.hide();
                  Ext.MessageBox.alert("Alert", "Ajax communication failed");
                }
      });
    }

    dashletInstanceFrmLoad = function () {
      /*
      if (DASHLET_INSTANCE.DAS_INS_UID.length > 0) {
        "DAS_INS_UID": "",
        "DAS_UID":     cboDasUID.getValue(),
        "DAS_INS_TYPE": cboDasInsType.getValue(),
        "DAS_INS_CONTEXT_TIME": cboDasInsContextTime.getValue(),
        //"DAS_INS_START_DATE":   txtDasInsStartDate.getValue().format(txtDasInsStartDate.format),
        //"DAS_INS_END_DATE":  txtDasInsEndDate.getValue().format(txtDasInsEndDate.format),
        "DAS_INS_OWNER_TYPE":   cboDasInsOwnerType.getValue(),
        "DAS_INS_OWNER_UID":    cboDasInsOwnerUID.getValue()
        //,
        //"DAS_INS_PROCESSES": cboProcess.getValue(),
        //"DAS_INS_TASKS":    cboTask.getValue()

        ////////////
      }
      */
    }

    //------------------------------------------------------------------------------------------------------------------
    var storeDasUID = new Ext.data.Store({
      proxy: new Ext.data.HttpProxy({
        url: URL_DASHLET_INSTANCE,
        method: "POST"
      }),

      baseParams: {"option": "DASHLST"},

      reader: new Ext.data.JsonReader({
        totalProperty: "resultTotal",
        root:          "resultRoot",
        fields:[{name: "DAS_UID",   type: "string"},
                {name: "DAS_TITLE", type: "string"}
               ]
      }),

      autoLoad: true, //First call

      listeners: {
        load: function (store, record, option) {
          cboDasUID.setValue(store.getAt(0).get(cboDasUID.valueField));
        }
      }
    });

    var storeDasInsType = new Ext.data.ArrayStore({
      idIndex: 0, //definimos la posicion del ID de cada registro
      fields: ["id", "value"],
      data:   [["OPEN_CASES", "Open Cases"]
              ]
    });

    var storeDasInsContextTime = new Ext.data.ArrayStore({
      idIndex: 0,
      fields: ["id", "value"],
      data:   [//["RANGE", "Date Ranges"],
               ["MONTH",     "Month"],
               ["TODAY",     "Today"],
               ["YESTERDAY", "Yesterday"],
               ["THIS_WEEK", "Last Month"],
               ["PREVIOUS_WEEK", "Last Month"],
               ["THIS_MONTH", "Last Month"],
               ["PREVIOUS_MONTH", "Last Month"],
               ["THIS_QUARTER", "Last Month"],
               ["PREVIOUS_QUARTER", "Last Month"],
               ["THIS_YEAR", "Last Month"],
               ["PREVIOUS_YEAR", "Last Month"]
              ]
    });

    var storeDasInsOwnerType = new Ext.data.ArrayStore({
      idIndex: 0,
      fields: ["id", "value"],
      data:   [//["USER",       "User"],
               ["DEPARTMENT", "Department"]
              ]
    });

    var storeDasInsOwnerUID = new Ext.data.Store({
      proxy: new Ext.data.HttpProxy({
        url: URL_DASHLET_INSTANCE,
        method: "POST"
      }),

      reader: new Ext.data.JsonReader({
        totalProperty: "resultTotal",
        root:          "resultRoot",
        fields:[{name: "TABLE_UID",  type: "string"},
                {name: "TABLE_NAME", type: "string"}
              ]
      }),

      autoLoad: true, //First call

      listeners: {
        beforeload: function (store) {
          storeDasInsOwnerUID.baseParams = {"option": "OWNERTYPE",
                                            "type": cboDasInsOwnerType.getValue()
                                           };
        },

        load: function (store, record, option) {
          cboDasInsOwnerUID.setValue(store.getAt(0).get(cboDasInsOwnerUID.valueField));
        }
      }
    });

    var storeProcess = new Ext.data.ArrayStore({
      idIndex: 0,
      fields: ["id", "value"],
      data:   [["ALL", "All"]
               //,
               //["SEL", "Selection"]
              ]
    });

    var storeTask = new Ext.data.ArrayStore({
      idIndex: 0,
      fields: ["id", "value"],
      data:   [["ALL", "All"]
               //,
               //["SEL", "Selection"]
              ]
    });

    //------------------------------------------------------------------------------------------------------------------
    var hiddenDasInsUID = new Ext.form.Hidden({
      id: "hiddenDasInsUID",
      name: "DAS_INS_UID"
    });

    var cboDasUID = new Ext.form.ComboBox({
      id: "cboDasUID",
      name: "DAS_UID",

      valueField:   "DAS_UID",
      displayField: "DAS_TITLE",
      store:        storeDasUID,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Dashboard"
    });

    var cboDasInsType = new Ext.form.ComboBox({
      id: "cboDasInsType",
      name: "DAS_INS_TYPE",

      valueField:   "id",
      displayField: "value",
      value:        "OPEN_CASES",
      store:        storeDasInsType,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Type"
    });

    var cboDasInsContextTime = new Ext.form.ComboBox({
      id: "cboDasInsContextTime",
      name: "DAS_INS_CONTEXT_TIME",

      valueField:   "id",
      displayField: "value",
      value:        "MONTH",
      store:        storeDasInsContextTime,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Period"
    });

    var txtDasInsStartDate = new Ext.form.DateField({
      id: "txtDasInsStartDate",
      name: "DAS_INS_START_DATE",

      value: new Date(2011, 0, 1), //january=0, february=1, etc
      width: 100,
      format: "Y/m/d",
      editable: false,
      fieldLabel: "Start Date"
    });

    var txtDasInsEndDate = new Ext.form.DateField({
      id: "txtDasInsEndDate",
      name: "DAS_INS_END_DATE",

      value: new Date(2011, 0, 1),
      width: 100,
      format: "Y/m/d",
      editable: false,
      fieldLabel: "Finish Date"
    });

    var cboDasInsOwnerType = new Ext.form.ComboBox({
      id: "cboDasInsOwnerType",
      name: "DAS_INS_OWNER_TYPE",

      valueField:   "id",
      displayField: "value",
      value:        "DEPARTMENT",
      store:        storeDasInsOwnerType,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Owner Type",

      listeners: {
        select: function (combo, record, index) {
          storeDasInsOwnerUID.baseParams = {"option": "OWNERTYPE",
                                            "type": combo.getValue()
                                           };
          cboDasInsOwnerUID.store.load();
        }
      }
    });

    var cboDasInsOwnerUID = new Ext.form.ComboBox({
      id: "cboDasInsOwnerUID",
      name: "DAS_INS_OWNER_UID",

      valueField:   "TABLE_UID",
      displayField: "TABLE_NAME",
      store:        storeDasInsOwnerUID,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Owner"
    });

    var cboProcess = new Ext.form.ComboBox({
      id: "cboProcess",
      name: "DAS_INS_PROCESSES",

      valueField:   "id",
      displayField: "value",
      value:        "ALL",
      store:        storeProcess,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Process"
    });

    var cboTask = new Ext.form.ComboBox({
      id: "cboTask",
      name: "DAS_INS_TASKS",

      valueField:   "id",
      displayField: "value",
      value:        "ALL",
      store:        storeTask,

      triggerAction: "all",
      mode:     "local",
      editable: false,

      width: 200,
      fieldLabel: "Task"
    });

    //------------------------------------------------------------------------------------------------------------------
    var dashletInstanceFrm = new Ext.form.FormPanel({
      id:  "dashletInstanceFrm",

      style: "margin: 0 auto 0 auto;",
      //labelAlign: "top",
      labelWidth: 115, //The width of labels in pixels
      bodyStyle: "padding:0.5em;",
      border: true,
      //cls: "class1",
      width: 400,
      //height: 400,

      title: "New Dashboard Instance",

      items: [hiddenDasInsUID,
              cboDasUID,
              cboDasInsType,
              cboDasInsContextTime,
              //txtDasInsStartDate,
              //txtDasInsEndDate,
              cboDasInsOwnerType,
              cboDasInsOwnerUID
              //,
              //cboProcess,
              //cboTask
             ],

      buttonAlign: "right",
      buttons: [new Ext.Action({
                  id:   "btnSubmit",

                  text: "Save",
                  //scope: this,
                  handler: function () {
                    dashletInstanceSaveProcessAjax();
                  }
                }),

                //{xtype: "button",
                // id:    "btnReset",
                // text:  "Reset",
                // handler: function () {
                //   //Ext.getCmp("dashletInstanceFrm").getForm().reset();
                //   dashletInstanceFrm.getForm().reset();
                //   //cboProcess.store.load();
                // }
                //},

                {xtype: "button",
                 id:    "btnCancel",
                 text:  "Cancel",
                 handler: function () {
                   window.location.href = "dashletsList";
                 }
                }
               ]
    });

    //------------------------------------------------------------------------------------------------------------------
    //dashletInstanceLoadProcessAjax();
    var DASHLET_INSTANCE = Ext.util.JSON.decode(dashletInstance);

    //------------------------------------------------------------------------------------------------------------------
    var pnlMain = new Ext.Panel({
      id: "pnlMain",

      region: "center",
      margins: {top:3, right:3, bottom:3, left:0},
      //bodyStyle: "padding:0.5em;", //propiedades ... //no aceptaba para la derecha
      bodyStyle: "padding: 25px 25px 25px 25px;", //propiedades ...
      border: false,

      items: [dashletInstanceFrm]
    });

    //------------------------------------------------------------------------------------------------------------------
    //LOAD ALL PANELS
    var viewport = new Ext.Viewport({
      layout:"fit",
      items:[pnlMain]
    });
  }
}

Ext.onReady(dashletInstance.form.init, dashletInstance.form);<|endoftext|>


<commit_before>module.exports = function(){

		var config = require('./project.json');
		var srcStyles = config.src + '/' + config.dirs.styles;

		return [
			srcStyles + '/_settings/*.scss',
			srcStyles + '/_tools/_tools.mixins.scss',
			srcStyles + '/_tools/_tools.functions.scss',
			srcStyles + '/_tools/*.scss',
			srcStyles + '/_scope/*.scss',
			srcStyles + '/_generic/*.scss',
			srcStyles + '/_elements/*.scss',
			srcStyles + '/_objects/*.scss',
			'views/_partials/**/*.scss',
			srcStyles + '/_trumps/*.scss'
		];

};<commit_msg>added components to source files<commit_after>module.exports = function(){

		var config = require('./project.json');
		var srcStyles = config.src + '/' + config.dirs.styles;

		return [
			srcStyles + '/_settings/*.scss',
			srcStyles + '/_tools/_tools.mixins.scss',
			srcStyles + '/_tools/_tools.functions.scss',
			srcStyles + '/_tools/*.scss',
			srcStyles + '/_scope/*.scss',
			srcStyles + '/_generic/*.scss',
			srcStyles + '/_elements/*.scss',
			srcStyles + '/_objects/*.scss',
			srcStyles + '/_components/*.scss',
			'views/_partials/**/*.scss',
			srcStyles + '/_trumps/*.scss'
		];

};<|endoftext|>


<commit_before>import React from 'react'
import Link from 'gatsby-link'
import { Text } from './Layout'
import Icon from './Icon'

const ArrowLink = ({ dest, text, external, ...props }) => {
  return external ? (

      <Text
        fontFamily="monospace"
        display="inline-flex"
        color="black"
        hover={{ color: 'orange' }}
        fontSize={[0, 1]}
        {...props}
      >
        {text} <Icon glyph="arrow" />
      </Text>

  ) : (
    <Link to={dest}>
      <Text
        fontFamily="monospace"
        display="inline-flex"
        color="black"
        hover={{ color: 'orange' }}
        fontSize={[0, 1]}
        {...props}
      >
        {text} <Icon glyph="arrow" />
      </Text>
    </Link>
  )
}

export default ArrowLink
<commit_msg>:bug: center arrow link icon<commit_after>import React from 'react'
import Link from 'gatsby-link'
import { Text } from './Layout'
import Icon from './Icon'

const ArrowLink = ({ dest, text, external, ...props }) => {
  return external ? (

      <Text
        fontFamily="monospace"
        display="inline-flex"
        color="black"
        hover={{ color: 'orange' }}
        fontSize={[0, 1]}
        {...props}
      >
        {text} <Icon glyph="arrow" />
      </Text>

  ) : (
    <Link to={dest}>
      <Text
        fontFamily="monospace"
        display="inline-flex"
        align="center"
        color="black"
        hover={{ color: 'orange' }}
        fontSize={[0, 1]}
        {...props}
      >
        {text} <Icon glyph="arrow" />
      </Text>
    </Link>
  )
}

export default ArrowLink
<|endoftext|>


<commit_before>import styled from 'styled-components';
import {
  alignItems,
  alignSelf,
  backgroundImage,
  backgroundPosition,
  backgroundRepeat,
  backgroundSize,
  bgColor,
  borders,
  borderRadius,
  bottom,
  boxShadow,
  display,
  flex,
  flexDirection,
  flexWrap,
  height,
  justifyContent,
  left,
  maxHeight,
  maxWidth,
  minHeight,
  minWidth,
  order,
  position,
  right,
  size,
  space,
  style,
  top,
  width,
  zIndex,
} from 'styled-system';

const overflow = style({ prop: 'overflow' });

const Container = styled.div([],
  alignItems,
  alignSelf,
  backgroundImage,
  backgroundPosition,
  backgroundRepeat,
  backgroundSize,
  bgColor,
  borders,
  borderRadius,
  bottom,
  boxShadow,
  display,
  flex,
  flexDirection,
  flexWrap,
  height,
  justifyContent,
  left,
  maxHeight,
  maxWidth,
  minHeight,
  minWidth,
  order,
  overflow,
  position,
  right,
  size,
  space,
  top,
  width,
  zIndex,
);

export default Container;
<commit_msg>feat(components/Container): add custom pointerEvents style prop<commit_after>import styled from 'styled-components';
import {
  alignItems,
  alignSelf,
  background,
  backgroundImage,
  backgroundPosition,
  backgroundRepeat,
  backgroundSize,
  bgColor,
  borders,
  borderRadius,
  bottom,
  boxShadow,
  display,
  flex,
  flexDirection,
  flexWrap,
  height,
  justifyContent,
  left,
  maxHeight,
  maxWidth,
  minHeight,
  minWidth,
  order,
  position,
  right,
  size,
  space,
  style,
  top,
  width,
  zIndex,
} from 'styled-system';

const overflow = style({ prop: 'overflow' });

const pointerEvents = style({ prop: 'pointerEvents' });

const Container = styled.div([],
  alignItems,
  alignSelf,
  background,
  backgroundImage,
  backgroundPosition,
  backgroundRepeat,
  backgroundSize,
  bgColor,
  borders,
  borderRadius,
  bottom,
  boxShadow,
  display,
  flex,
  flexDirection,
  flexWrap,
  height,
  justifyContent,
  left,
  maxHeight,
  maxWidth,
  minHeight,
  minWidth,
  order,
  overflow,
  pointerEvents,
  position,
  right,
  size,
  space,
  top,
  width,
  zIndex,
);

export default Container;
<|endoftext|>


<commit_before>import React from 'react';

export default class DrinkList extends React.Component {
  static propTypes = {
    actions: React.PropTypes.object.isRequired,
    drinks: React.PropTypes.arrayOf(React.PropTypes.shape({
      id      : React.PropTypes.string.isRequired,
      name    : React.PropTypes.string.isRequired,
      min     : React.PropTypes.number.isRequired,
      max     : React.PropTypes.number.isRequired,
      ist     : React.PropTypes.number
    }).isRequired).isRequired
  }

  constructor(props) {
    super(props);
    this.state = {drinks: {}}
    props.drinks.map((element) => this.state.drinks[element.id] = {
      ...element,
      order: this.calculateAmountToOrder(element, element.ist),
      orderStyle: this.contextColorClass(element, element.ist)
    })
  }

  onChangeIstField(event, drink) {
    const ist = parseInt(event.target.value, 10) || null;

    if (ist === this.state.drinks[drink.id].ist) { return }
    this.state.drinks[drink.id].ist = ist;
    this.state.drinks[drink.id].order = this.calculateAmountToOrder(drink, ist);
    this.state.drinks[drink.id].orderStyle = this.contextColorClass(drink, ist);
    this.setState(this.state);
  }

  calculateAmountToOrder(drink, ist) {
    ist = ist || 0
    const order = drink.max - parseInt(ist, 10);
    if (order < 0) return 0;
    return order;
  }
  contextColorClass(drink, ist) {
    ist = ist || 0

    if (ist >= drink.max)  return 'success';
    if (ist <= drink.min)    return 'danger';
    if (ist <= drink.min + (drink.max / 3)) return 'warning';
    return 'success'
  }

  selectDrink(drink) {
    this.props.actions.selectDrink(drink);
  }
  recordIst(drink, ist) {
    this.props.actions.recordIst(drink.id, parseInt(ist, 10));
  }
  handleKeys(event, drink) {
    const ENTER = 13;
    const TAB   = 9;
    if (event.keyCode === ENTER || event.keyCode === TAB) {
      return this.recordIst(drink, event.target.value);
    }
  }

  render() {
    const { drinks } = this.props;
    return (

            getra:nc
            min
            max
            ist
            order

          {drinks.map((drink) =>

            {drink.name}
            {drink.min}
            {drink.max}

              <input
                className="form-control input-sm istInput"
                ref="ist" value={this.state.drinks[drink.id].ist}
                onKeyDown={(event) => this.handleKeys(event, drink)}
                onChange={(event) => this.onChangeIstField(event, drink)}
                onClick={() => this.selectDrink(drink)} />

              {this.state.drinks[drink.id].order}

          )}

    );
  }
}
<commit_msg>drinks: better tracking of changing the ist state<commit_after>import React from 'react';

export default class DrinkList extends React.Component {
  static propTypes = {
    actions: React.PropTypes.object.isRequired,
    drinks: React.PropTypes.arrayOf(React.PropTypes.shape({
      id      : React.PropTypes.string.isRequired,
      name    : React.PropTypes.string.isRequired,
      min     : React.PropTypes.number.isRequired,
      max     : React.PropTypes.number.isRequired,
      ist     : React.PropTypes.number
    }).isRequired).isRequired
  }

  constructor(props) {
    super(props);
    this.state = {drinks: {}}
    props.drinks.map((element) => this.state.drinks[element.id] = {
      ...element,
      order: this.calculateAmountToOrder(element, element.ist),
      orderStyle: this.contextColorClass(element, element.ist)
    })
  }

  onChangeIstField(event, drink) {
    const ist = parseInt(event.target.value, 10) || 0;

    if (ist == this.state.drinks[drink.id].ist) { return }
    this.state.drinks[drink.id].ist = ist;
    this.state.drinks[drink.id].order = this.calculateAmountToOrder(drink, ist);
    this.state.drinks[drink.id].orderStyle = this.contextColorClass(drink, ist);
    this.setState(this.state);

    this.recordIst(drink, ist);
  }

  calculateAmountToOrder(drink, ist) {
    const order = drink.max - parseInt(ist, 10);
    if (order < 0) return 0;
    return order;
  }
  contextColorClass(drink, ist) {
    if (ist >= drink.max)  return 'success';
    if (ist <= drink.min)  return 'danger';
    if (ist <= drink.min + (drink.max / 3)) return 'warning';
    return 'success'
  }

  recordIst(drink, ist) {
    if (!ist) { return; }
    if (ist == drink.ist) { return; }

    this.props.actions.recordIst(drink.id, parseInt(ist, 10));
  }
  handleKeys(event, drink) {
    const ENTER = 13;
    const TAB   = 9;
    if (event.keyCode === ENTER || event.keyCode === TAB) {
      return this.recordIst(drink, event.target.value);
    }
  }

  render() {
    const { drinks } = this.props;
    return (

            getra:nc
            min
            max
            ist
            order

          {drinks.map((drink) =>

            {drink.name}
            {drink.min}
            {drink.max}

              <input
                className="form-control input-sm istInput"
                ref="ist" value={this.state.drinks[drink.id].ist}
                onKeyDown={(event) => this.handleKeys(event, drink)}
                onChange={(event) => this.onChangeIstField(event, drink)} />

              {this.state.drinks[drink.id].order}

          )}

    );
  }
}
<|endoftext|>


<commit_before>import React from 'react'
import Grid from 'react-bootstrap/lib/Grid'
import Panel from 'react-bootstrap/lib/Panel'
import Row from 'react-bootstrap/lib/Row'
import Col from 'react-bootstrap/lib/Col'
import {injectIntl} from 'react-intl'
import isEmpty from 'lodash/isEmpty'

import exchanges from '../data/exchanges'
import AccountLink from './shared/AccountLink'
import Logo from './shared/Logo'
import {titleWithJSONButton} from './shared/TitleWithJSONButton'

const METADATA_PATH =
  'https://github.com/chatch/stellarexplorer/blob/master/src/data/exchanges.js'

const Exchange = ({accounts, aggregator=false, home, name}) => {
  const homePage = `https://${home}`
  return (

      <Row style={{marginTop: 20, marginBottom: 20}}>
        <Col md={3}>

            <Logo name={name} />

        </Col>
        <Col md={3}>

            {homePage}

        </Col>
        <Col md={6}>
          {aggregator === true && Aggregator}
          {aggregator !== true && !isEmpty(accounts) && accounts.map((account) =>
            <AccountLink account={account} />
          )}
        </Col>
      </Row>

  )
}

const ExchangesList = () =>

    {Object.keys(exchanges).map(id =>
      <Exchange key={id} name={id} {...exchanges[id]} />
    )}

class Exchanges extends React.Component {
  render() {
    const {formatMessage} = this.props.intl
    const header = titleWithJSONButton(
      formatMessage({id: 'exchanges'}),
      METADATA_PATH
    )
    return (
      <Grid>
        <Row>
          <Panel header={header}>
            <ExchangesList />
          </Panel>
        </Row>
        <Row />
      </Grid>
    )
  }
}

export default injectIntl(Exchanges)
<commit_msg>show shortened form of account in final column on exchange view instead of the known account name<commit_after>import React from 'react'
import Grid from 'react-bootstrap/lib/Grid'
import Panel from 'react-bootstrap/lib/Panel'
import Row from 'react-bootstrap/lib/Row'
import Col from 'react-bootstrap/lib/Col'
import {injectIntl} from 'react-intl'
import isEmpty from 'lodash/isEmpty'

import exchanges from '../data/exchanges'
import AccountLink from './shared/AccountLink'
import Logo from './shared/Logo'
import {titleWithJSONButton} from './shared/TitleWithJSONButton'

const METADATA_PATH =
  'https://github.com/chatch/stellarexplorer/blob/master/src/data/exchanges.js'

const Exchange = ({accounts, aggregator = false, home, name}) => {
  const homePage = `https://${home}`
  return (

      <Row style={{marginTop: 20, marginBottom: 20}}>
        <Col md={3}>

            <Logo name={name} />

        </Col>
        <Col md={3}>

            {homePage}

        </Col>
        <Col md={6}>
          {aggregator === true && Aggregator}
          {aggregator !== true &&
            !isEmpty(accounts) &&
            accounts.map(account =>

                <AccountLink account={account} hideKnown={true} />

            )}
        </Col>
      </Row>

  )
}

const ExchangesList = () =>

    {Object.keys(exchanges).map(id =>
      <Exchange key={id} name={id} {...exchanges[id]} />
    )}

class Exchanges extends React.Component {
  render() {
    const {formatMessage} = this.props.intl
    const header = titleWithJSONButton(
      formatMessage({id: 'exchanges'}),
      METADATA_PATH
    )
    return (
      <Grid>
        <Row>
          <Panel header={header}>
            <ExchangesList />
          </Panel>
        </Row>
        <Row />
      </Grid>
    )
  }
}

export default injectIntl(Exchanges)
<|endoftext|>


<commit_before>// the eslint "no-unused-expressions" rule is triggered by the `expect`
// assertions in the tests. So, in order to avoid problems with eslint, I'm
// disabling that rule in this file
//
/* eslint-disable no-unused-expressions */

import React from 'react';
import { shallow, mount } from 'enzyme';
import chai from 'chai';
import Form from './Form';

const expect = chai.expect;

/* eslint-disable no-unused-vars */
const debug = (component) => {
    console.info('------------------------------------------------------------');
    console.info(component.debug());
    console.info('------------------------------------------------------------');
};
/* eslint-enable no-unused-vars */

/* *****************************************************************************
the Form component
    should be a form element
    should be a form.form-inline element when inline=true
    should be a form.form-horizontal element when horizontal=true
*/
describe('the Form component', () => {

    it('should be a form element', () => {
        const component = shallow(<Form />);

        expect(component.is('form')).to.equal(true);
        expect(component.is('form.form-inline')).to.equal(false);
        expect(component.is('form.form-horizontal')).to.equal(false);
    });

    it('should be a form.form-inline element', () => {
        const component = shallow(<Form inline />);

        expect(component.is('form.form-inline')).to.equal(true);
        expect(component.is('form.form-horizontal')).to.equal(false);
    });

    it('should be a form.form-horizontal element', () => {
        const component = shallow(<Form horizontal />);

        expect(component.is('form.form-inline')).to.equal(false);
        expect(component.is('form.form-horizontal')).to.equal(true);
    });

});

/* *****************************************************************************
the Form component
    should not show the alert message if initialized with a mix of valid & invalid values
    should not show the alert message if initialized with all valid values
    should not show the alert message if initialized with all invalid values
*/
describe('the Form component', () => {

    it('should not show the alert message if initialized with a mix of valid & invalid values', () => {
        const label = 'my label';

        const invalid = '';

        const valid = 'triceratops';

        const component = mount(
            <Form>
                <Form.TextInput required value={invalid} />
                <Form.TextInput required value={invalid} />
                <Form.TextInput required value={valid} />
                <Form.SubmitButton label={label} />
            </Form>
        );

        expect(component.find('Alert')).to.have.length(0);
    });

    it('should not show the alert message if initialized with all valid values', () => {
        const label = 'my label';

        const valid = 'triceratops';

        const component = mount(
            <Form>
                <Form.TextInput required value={valid} />
                <Form.TextInput required value={valid} />
                <Form.TextInput required value={valid} />
                <Form.SubmitButton label={label} />
            </Form>
        );

        expect(component.find('Alert')).to.have.length(0);
    });

    it('should not show the alert message if initialized with all invalid values', () => {
        const label = 'my label';

        const invalid = '';

        const component = mount(
            <Form>
                <Form.TextInput required value={invalid} />
                <Form.TextInput required value={invalid} />
                <Form.TextInput required value={invalid} />
                <Form.SubmitButton label={label} />
            </Form>
        );

        expect(component.find('Alert')).to.have.length(0);
    });

});
<commit_msg>updated notes<commit_after>// the eslint "no-unused-expressions" rule is triggered by the `expect`
// assertions in the tests. So, in order to avoid problems with eslint, I'm
// disabling that rule in this file
//
/* eslint-disable no-unused-expressions */

import React from 'react';
import { shallow, mount } from 'enzyme';
import chai from 'chai';
import Form from './Form';

const expect = chai.expect;

/* eslint-disable no-unused-vars */
const debug = (component) => {
    console.info('------------------------------------------------------------');
    console.info(component.debug());
    console.info('------------------------------------------------------------');
};
/* eslint-enable no-unused-vars */

/* *****************************************************************************
the Form component
    should be a form element
    should be a form.form-inline element when inline=true
    should be a form.form-horizontal element when horizontal=true
*/
describe('the Form component', () => {

    it('should be a form element', () => {
        const component = shallow(<Form />);

        expect(component.is('form')).to.equal(true);
        expect(component.is('form.form-inline')).to.equal(false);
        expect(component.is('form.form-horizontal')).to.equal(false);
    });

    it('should be a form.form-inline element', () => {
        const component = shallow(<Form inline />);

        expect(component.is('form.form-inline')).to.equal(true);
        expect(component.is('form.form-horizontal')).to.equal(false);
    });

    it('should be a form.form-horizontal element', () => {
        const component = shallow(<Form horizontal />);

        expect(component.is('form.form-inline')).to.equal(false);
        expect(component.is('form.form-horizontal')).to.equal(true);
    });

});

/* *****************************************************************************
the Form component
    should not show the alert message if initialized with a mix of valid & invalid values
    should not show the alert message if initialized with all valid values
    should not show the alert message if initialized with all invalid values

    should show an alert with a single error message when on child is blurred
*/
describe('the Form component', () => {

    it('should not show the alert message if initialized with a mix of valid & invalid values', () => {
        const label = 'my label';

        const invalid = '';

        const valid = 'triceratops';

        const component = mount(
            <Form>
                <Form.TextInput required value={invalid} />
                <Form.TextInput required value={invalid} />
                <Form.TextInput required value={valid} />
                <Form.SubmitButton label={label} />
            </Form>
        );

        expect(component.find('Alert')).to.have.length(0);
    });

    it('should not show the alert message if initialized with all valid values', () => {
        const label = 'my label';

        const valid = 'triceratops';

        const component = mount(
            <Form>
                <Form.TextInput required value={valid} />
                <Form.TextInput required value={valid} />
                <Form.TextInput required value={valid} />
                <Form.SubmitButton label={label} />
            </Form>
        );

        expect(component.find('Alert')).to.have.length(0);
    });

    it('should not show the alert message if initialized with all invalid values', () => {
        const label = 'my label';

        const invalid = '';

        const component = mount(
            <Form>
                <Form.TextInput required value={invalid} />
                <Form.TextInput required value={invalid} />
                <Form.TextInput required value={invalid} />
                <Form.SubmitButton label={label} />
            </Form>
        );

        expect(component.find('Alert')).to.have.length(0);
    });

});
<|endoftext|>


<commit_before>import React from 'react';

import ViewLayer from './ViewLayer';

export default function LayerList({viewLayerDataList}) {
  return viewLayerDataList.map(data => {
    const {id} = data;
    delete data.id;
    return <ViewLayer key={id} {...data} />;
  });
}
<commit_msg>LayerList が任意の ViewLayer にアクセスできるようにした。<commit_after>import React from 'react';

import ViewLayer from './ViewLayer';

export default class LayerList extends React.Component {
  constructor(props) {
    super(props);
    this.ids = [];
  }
  componentDidMount() {
    console.log(this.ids);
  }
  render() {
    return this.props.viewLayerDataList.map(data => {
      const {id} = data;
      delete data.id;
      return (
        <ViewLayer
          ref={ref => this.ids.push({id, ViewLayer: ref})}
          key={id}
          {...data}
        />
      );
    });
  }
}
<|endoftext|>


<commit_before>import React from 'react';
import { Map as ReactLeafletMap, TileLayer } from 'react-leaflet';

const portlandBounds = [
  [45.654527, -122.464291],
  [45.431897, -122.836892],
];

const reactLeafletMapProps = {
  bounds: portlandBounds,
  scrollWheelZoom: false,
};

const reactLeafletMapStyle = {
  width: '100%',
  height: '70vh',
};

const Map = () => (
  <ReactLeafletMap {...reactLeafletMapProps} style={reactLeafletMapStyle}>
    <TileLayer
      url="http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png"
      attribution="© OpenStreetMap © CartoDB"
      subdomains="abcd"
      maxZoom={19}
    />
  </ReactLeafletMap>
);

export default Map;
<commit_msg>Map component<commit_after>import React, { PropTypes } from 'react';
import { Map as ReactLeafletMap, TileLayer } from 'react-leaflet';
import Neighborhood from '../Neighborhood';

const portlandBounds = [
  [45.654527, -122.464291],
  [45.431897, -122.836892],
];

const reactLeafletMapProps = {
  bounds: portlandBounds,
  scrollWheelZoom: false,
};

const reactLeafletMapStyle = {
  width: '100%',
  height: '70vh',
};

const Map = ({ neighborhoods }) => (
  <ReactLeafletMap {...reactLeafletMapProps} style={reactLeafletMapStyle}>
    <TileLayer
      url="http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png"
      attribution="© OpenStreetMap © CartoDB"
      subdomains="abcd"
      maxZoom={19}
    />
    {neighborhoods && neighborhoods.features.map(neighborhood =>
      <Neighborhood
        key={neighborhood.id.toString()}
        data={neighborhood}
      />,
    )}
  </ReactLeafletMap>
);

Map.propTypes = {
  neighborhoods: PropTypes.object,
};

Map.defaultProps = {
  neighborhoods: null,
};

export default Map;
<|endoftext|>


<commit_before>import React from 'react';
import Helmet from 'react-helmet';
import { StaticQuery, graphql } from 'gatsby';
import PropTypes from 'prop-types';
import SchemaOrg from './SchemaOrg';

const normalizeUrl = url => {
  // Remove duplicate slashes
  url = url.replace(/\/{2,}/g, '/');

  if (!url.match(/^https?:\/\//)) {
    url = url.replace(/^(https?:\/)(.+)/, '$1/$2');
  }
  return url;
};

const SEO = ({ postData, frontmatter = {}, postImage, isBlogPost }) => (
  <StaticQuery
    query={graphql`
      {
        site {
          siteMetadata {
            title
            description
            siteUrl
            image
            author
            organization {
              name
              url
              logo
            }
            social {
              twitter
            }
          }
        }
      }
    `}
    render={({ site: { siteMetadata: seo } }) => {
      const postMeta = frontmatter || postData.childMarkdownRemark.frontmatter || {};

      const title = postMeta.title || seo.title;
      const description = postMeta.description || seo.description;
      const image = postImage ? `${seo.siteUrl}${postImage}` : seo.image;
      const url = postMeta.slug ? normalizeUrl(`${seo.siteUrl}${postMeta.slug}`) : seo.siteUrl;
      const datePublished = isBlogPost ? new Date(postMeta.date).toISOString() : false;

      return (
        <React.Fragment>
          <Helmet htmlAttributes={{ lang: 'en' }}>
            {/* General tags */}
            <title>{isBlogPost ? `${title} | ${seo.title}` : title}</title>
            <meta name="description" content={description} />
            <meta name="image" content={image} />

            {/* OpenGraph tags */}
            <meta property="og:url" content={url} />
            {isBlogPost ? <meta property="og:type" content="article" /> : null}
            <meta property="og:title" content={title} />
            <meta property="og:description" content={description} />
            <meta property="og:image" content={image} />

            {/* Twitter Card tags */}
            <meta name="twitter:card" content="summary_large_image" />
            <meta name="twitter:creator" content={seo.social.twitter} />
            <meta name="twitter:title" content={title} />
            <meta name="twitter:description" content={description} />
            <meta name="twitter:image" content={image} />
          </Helmet>
          <SchemaOrg
            isBlogPost={isBlogPost}
            url={url}
            title={title}
            image={image}
            description={description}
            datePublished={datePublished}
            siteUrl={seo.siteUrl}
            author={seo.author}
            organization={seo.organization}
            defaultTitle={seo.title}
          />
        </React.Fragment>
      );
    }}
  />
);

SEO.propTypes = {
  isBlogPost: PropTypes.bool,
  postData: PropTypes.shape({
    childMarkdownRemark: PropTypes.shape({
      frontmatter: PropTypes.any,
      excerpt: PropTypes.any,
    }),
  }),
  postImage: PropTypes.string,
};

SEO.defaultProps = {
  isBlogPost: false,
  postData: { childMarkdownRemark: {} },
  postImage: null,
};

export default SEO;
<commit_msg>fix: remove seo image from sharing<commit_after>import React from 'react';
import Helmet from 'react-helmet';
import { StaticQuery, graphql } from 'gatsby';
import PropTypes from 'prop-types';
import SchemaOrg from './SchemaOrg';

const normalizeUrl = url => {
  // Remove duplicate slashes
  url = url.replace(/\/{2,}/g, '/');

  if (!url.match(/^https?:\/\//)) {
    url = url.replace(/^(https?:\/)(.+)/, '$1/$2');
  }
  return url;
};

const SEO = ({ postData, frontmatter = {}, postImage, isBlogPost }) => (
  <StaticQuery
    query={graphql`
      {
        site {
          siteMetadata {
            title
            description
            siteUrl
            image
            author
            organization {
              name
              url
              logo
            }
            social {
              twitter
            }
          }
        }
      }
    `}
    render={({ site: { siteMetadata: seo } }) => {
      const postMeta = frontmatter || postData.childMarkdownRemark.frontmatter || {};

      const title = postMeta.title || seo.title;
      const description = postMeta.description || seo.description;
      const image = postImage ? `${seo.siteUrl}${postImage}` : null;
      const url = postMeta.slug ? normalizeUrl(`${seo.siteUrl}${postMeta.slug}`) : seo.siteUrl;
      const datePublished = isBlogPost ? new Date(postMeta.date).toISOString() : false;

      return (
        <React.Fragment>
          <Helmet htmlAttributes={{ lang: 'en' }}>
            {/* General tags */}
            <title>{isBlogPost ? `${title} | ${seo.title}` : title}</title>
            <meta name="description" content={description} />
            {image && <meta name="image" content={image} />}

            {/* OpenGraph tags */}
            <meta property="og:url" content={url} />
            {isBlogPost ? <meta property="og:type" content="article" /> : null}
            <meta property="og:title" content={title} />
            <meta property="og:description" content={description} />
            {image && <meta property="og:image" content={image} />}

            {/* Twitter Card tags */}
            <meta name="twitter:card" content="summary_large_image" />
            <meta name="twitter:creator" content={seo.social.twitter} />
            <meta name="twitter:title" content={title} />
            <meta name="twitter:description" content={description} />
            {image && <meta name="twitter:image" content={image} />}
          </Helmet>
          <SchemaOrg
            isBlogPost={isBlogPost}
            url={url}
            title={title}
            image={image}
            description={description}
            datePublished={datePublished}
            siteUrl={seo.siteUrl}
            author={seo.author}
            organization={seo.organization}
            defaultTitle={seo.title}
          />
        </React.Fragment>
      );
    }}
  />
);

SEO.propTypes = {
  isBlogPost: PropTypes.bool,
  postData: PropTypes.shape({
    childMarkdownRemark: PropTypes.shape({
      frontmatter: PropTypes.any,
      excerpt: PropTypes.any,
    }),
  }),
  postImage: PropTypes.string,
};

SEO.defaultProps = {
  isBlogPost: false,
  postData: { childMarkdownRemark: {} },
  postImage: null,
};

export default SEO;
<|endoftext|>


<commit_before>import React, { Component } from 'react';
import $ from 'jquery';
var Typeahead = require('react-typeahead').Typeahead;

export default class SearchBar extends Component {
	state = {
		query: '',
		type: '',
		options: []
	}
	handleSubmit = event => {
		if (event) {
			event.preventDefault();
		}
		var query = this.state.query.trim();
		var type = this.state.type.trim();
		if (!query) {
			return;
		}
		this.props.onQuerySubmit(query, type);
		$('.typeahead-selector').hide();
		this.setState({type: ''});
	}
	handleTypeChange = (event) => {
		this.setState({type: event.target.options[event.target.selectedIndex].value});
	}
	handleQueryFocus(event) {
		$(event.target).select();
	}
	displayOptions(option, index) {
		return option.Title;
	}
	getOptions = event => {
		if (event.keyCode == 13) {
			this.handleSubmit();
			$(event.target).blur();
		} else {
			$('.typeahead-selector').show();
			this.setState({query: event.target.value});
			$.get('http://www.omdbapi.com/?s=' + event.target.value, (result) => {
				if (result.Search) {
					this.setState({options: result.Search });
				} else {
					this.setState({options: [] });
				}
			});
		}
	}
	setSelectedOption = option => {
		this.setState({query: option.Title});
	}
	render() {
		var submitBtn;
		if (this.props.loading) {
			submitBtn = <input className="search-form--submit-btn" disabled="disabled" type="submit" value="Loading" />
		} else {
			submitBtn = <input className="search-form--submit-btn" type="submit" value="Search" />
		}
		return (

				<form className="search-form" onSubmit={this.handleSubmit} >

			  		<Typeahead
					    options={this.state.options}
					    maxVisible={7}
					    filterOption="Title"
					    displayOption={this.displayOptions}
					    onKeyUp={this.getOptions}
					    customClasses={
					    	{input: 'search-form--box'}
					    }
					    onOptionSelected={this.setSelectedOption}
					    placeholder="Search movies or series..."
					    onFocus={this.handleQueryFocus}
					  />
		  			<select value={this.state.type}
		  				className="search-form--type"
		  				onChange={this.handleTypeChange}
		  			>
		  				<option value="">All</option>
		  				<option value="movie">Movies</option>
		  				<option>Series</option>
		  			</select>
		  			{submitBtn}

	  		</form>

		)
	}
}<commit_msg>Get suggestions only when user input is at least two characters.<commit_after>import React, { Component } from 'react';
import $ from 'jquery';
var Typeahead = require('react-typeahead').Typeahead;

export default class SearchBar extends Component {
	state = {
		query: '',
		type: '',
		options: []
	}
	handleSubmit = event => {
		if (event) {
			event.preventDefault();
		}
		var query = this.state.query.trim();
		var type = this.state.type.trim();
		if (!query) {
			return;
		}
		this.props.onQuerySubmit(query, type);
		$('.typeahead-selector').hide();
		this.setState({type: ''});
	}
	handleTypeChange = (event) => {
		this.setState({type: event.target.options[event.target.selectedIndex].value});
	}
	handleQueryFocus(event) {
		$(event.target).select();
	}
	displayOptions(option, index) {
		return option.Title;
	}
	getOptions = event => {
		if (event.target.value.length > 1) {
			if (event.keyCode == 13) {
				this.handleSubmit();
				$(event.target).blur();
			} else {
				$('.typeahead-selector').show();
				this.setState({query: event.target.value});
				$.get('http://www.omdbapi.com/?s=' + event.target.value, (result) => {
					if (result.Search) {
						this.setState({options: result.Search });
					} else {
						this.setState({options: [] });
					}
				});
			}
		}
	}
	setSelectedOption = option => {
		this.setState({query: option.Title});
	}
	render() {
		var submitBtn;
		if (this.props.loading) {
			submitBtn = <input className="search-form--submit-btn" disabled="disabled" type="submit" value="Loading" />
		} else {
			submitBtn = <input className="search-form--submit-btn" type="submit" value="Search" />
		}
		return (

				<form className="search-form" onSubmit={this.handleSubmit} >

			  		<Typeahead
					    options={this.state.options}
					    maxVisible={7}
					    filterOption="Title"
					    displayOption={this.displayOptions}
					    onKeyUp={this.getOptions}
					    customClasses={
					    	{input: 'search-form--box'}
					    }
					    onOptionSelected={this.setSelectedOption}
					    placeholder="Search movies or series..."
					    onFocus={this.handleQueryFocus}
					  />
		  			<select value={this.state.type}
		  				className="search-form--type"
		  				onChange={this.handleTypeChange}
		  			>
		  				<option value="">All</option>
		  				<option value="movie">Movies</option>
		  				<option>Series</option>
		  			</select>
		  			{submitBtn}

	  		</form>

		)
	}
}<|endoftext|>


<commit_before>/**
 * Copyright IBM Corp. 2016, 2018
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
import { iconCaretDown } from 'carbon-icons';
// TODO: import { ChevronDownGlyph } from '@carbon/icons-react';
import ChevronDownGlyph from '@carbon/icons-react/lib/chevron--down/index';
import { settings } from 'carbon-components';
import Icon from '../Icon';
import TabContent from '../TabContent';
import { componentsX } from '../../internal/FeatureFlags';

const { prefix } = settings;

export default class Tabs extends React.Component {
  static propTypes = {
    /**
     * Specify the text to be read by screen-readers when visiting the <Tabs>
     * component
     */
    ariaLabel: PropTypes.string,

    /**
     * Pass in a collection of <Tab> children to be rendered depending on the
     * currently selected tab
     */
    children: PropTypes.node,

    /**
     * Provide a className that is applied to the root  component for the
     * <Tabs>
     */
    className: PropTypes.string,

    /**
     * Specify whether the Tab content is hidden
     */
    hidden: PropTypes.bool,

    /**
     * By default, this value is "navigation". You can also provide an alternate
     * role if it makes sense from the accessibility-side
     */
    role: PropTypes.string.isRequired,

    /**
     * Optionally provide an `onClick` handler that is invoked when a <Tab> is
     * clicked
     */
    onClick: PropTypes.func,

    /**
     * Optionally provide an `onKeyDown` handler that is invoked when keyed
     * navigation is triggered
     */
    onKeyDown: PropTypes.func,

    /**
     * Provide an optional handler that is called whenever the selection
     * changes. This method is called with the index of the tab that was
     * selected
     */
    onSelectionChange: PropTypes.func,

    /**
     * Provide a string that represents the `href` for the triggered <Tab>
     */
    triggerHref: PropTypes.string.isRequired,

    /**
     * Optionally provide an index for the currently selected <Tab>
     */
    selected: PropTypes.number,

    /**
     * Provide a description that is read out when a user visits the caret icon
     * for the dropdown menu of items
     */
    iconDescription: PropTypes.string.isRequired,
  };

  static defaultProps = {
    iconDescription: 'show menu options',
    role: 'navigation',
    triggerHref: '#',
    selected: 0,
    ariaLabel: 'listbox',
  };

  state = {
    dropdownHidden: true,
  };

  static getDerivedStateFromProps({ selected }, state) {
    const { prevSelected } = state;
    return prevSelected === selected
      ? null
      : {
          selected,
          prevSelected: selected,
        };
  }

  getTabs() {
    return React.Children.map(this.props.children, tab => tab);
  }

  getTabAt = index => {
    return (
      this[`tab${index}`] || React.Children.toArray(this.props.children)[index]
    );
  };

  setTabAt = (index, tabRef) => {
    this[`tab${index}`] = tabRef;
  };

  // following functions (handle*) are Props on Tab.js, see Tab.js for parameters
  handleTabClick = onSelectionChange => {
    return (index, label, evt) => {
      evt.preventDefault();
      this.selectTabAt(index, onSelectionChange);
      this.setState({
        dropdownHidden: true,
      });
    };
  };

  handleTabKeyDown = onSelectionChange => {
    return (index, label, evt) => {
      const key = evt.key || evt.which;

      if (key === 'Enter' || key === 13 || key === ' ' || key === 32) {
        this.selectTabAt(index, onSelectionChange);
        this.setState({
          dropdownHidden: true,
        });
      }
    };
  };

  handleTabAnchorFocus = onSelectionChange => {
    return index => {
      const tabCount = React.Children.count(this.props.children) - 1;
      let tabIndex = index;

      if (index < 0) {
        tabIndex = tabCount;
      } else if (index > tabCount) {
        tabIndex = 0;
      }

      const tab = this.getTabAt(tabIndex);

      if (tab) {
        this.selectTabAt(tabIndex, onSelectionChange);
        if (tab.tabAnchor) {
          tab.tabAnchor.focus();
        }
      }
    };
  };

  handleDropdownClick = () => {
    this.setState({
      dropdownHidden: !this.state.dropdownHidden,
    });
  };

  selectTabAt = (index, onSelectionChange) => {
    if (this.state.selected !== index) {
      this.setState({
        selected: index,
      });
      if (typeof onSelectionChange === 'function') {
        onSelectionChange(index);
      }
    }
  };

  render() {
    const {
      ariaLabel,
      iconDescription,
      className,
      triggerHref,
      role,
      onSelectionChange,
      ...other
    } = this.props;

    /**
     * The tab panel acts like a tab panel when the screen is wider, but acts
     * like a select list when the screen is narrow.  In the wide case we want
     * to allow the user to use the tab key to set the focus in the tab panel
     * and then use the left and right arrow keys to navigate the tabs.  In the
     * narrow case we want to use the tab key to select different options in
     * the list.
     *
     * We set the tab index based on the different states so the browser will treat
     * the whole tab panel as a single focus component when it looks like a tab
     * panel and separate components when it looks like a select list.
     */
    const tabsWithProps = this.getTabs().map((tab, index) => {
      const tabPanelIndex = index === this.state.selected ? 0 : -1;
      const tabIndex = !this.state.dropdownHidden ? 0 : tabPanelIndex;
      const newTab = React.cloneElement(tab, {
        index,
        selected: index === this.state.selected,
        handleTabClick: this.handleTabClick(onSelectionChange),
        handleTabAnchorFocus: this.handleTabAnchorFocus(onSelectionChange),
        tabIndex,
        ref: e => {
          this.setTabAt(index, e);
        },
        handleTabKeyDown: this.handleTabKeyDown(onSelectionChange),
      });

      return newTab;
    });

    const tabContentWithProps = React.Children.map(tabsWithProps, tab => {
      const { children, selected } = tab.props;

      return (
        <TabContent
          aria-hidden={!selected}
          hidden={!selected}
          selected={selected}>
          {children}
        </TabContent>
      );
    });

    const classes = {
      tabs: classNames(`${prefix}--tabs`, className),
      tablist: classNames(`${prefix}--tabs__nav`, {
        [`${prefix}--tabs__nav--hidden`]: this.state.dropdownHidden,
      }),
    };

    const selectedTab = this.getTabAt(this.state.selected);
    const selectedLabel = selectedTab ? selectedTab.props.label : '';

    return (
      <>

          <div
            role="listbox"
            aria-label={ariaLabel}
            tabIndex={0}
            className={`${prefix}--tabs-trigger`}
            onClick={this.handleDropdownClick}
            onKeyPress={this.handleDropdownClick}>
            <a
              tabIndex={-1}
              className={`${prefix}--tabs-trigger-text`}
              href={triggerHref}
              onClick={this.handleDropdownClick}>
              {selectedLabel}

            {componentsX ? (
              <ChevronDownGlyph aria-hidden />
            ) : (
              <Icon description={iconDescription} icon={iconCaretDown} />
            )}

            {tabsWithProps}

        {tabContentWithProps}
      </>
    );
  }
}
<commit_msg>fix(Tabs): re-implement tab-content classname (#1846)<commit_after>/**
 * Copyright IBM Corp. 2016, 2018
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
import { iconCaretDown } from 'carbon-icons';
// TODO: import { ChevronDownGlyph } from '@carbon/icons-react';
import ChevronDownGlyph from '@carbon/icons-react/lib/chevron--down/index';
import { settings } from 'carbon-components';
import Icon from '../Icon';
import TabContent from '../TabContent';
import { componentsX } from '../../internal/FeatureFlags';

const { prefix } = settings;

export default class Tabs extends React.Component {
  static propTypes = {
    /**
     * Specify the text to be read by screen-readers when visiting the <Tabs>
     * component
     */
    ariaLabel: PropTypes.string,

    /**
     * Pass in a collection of <Tab> children to be rendered depending on the
     * currently selected tab
     */
    children: PropTypes.node,

    /**
     * Provide a className that is applied to the root  component for the
     * <Tabs>
     */
    className: PropTypes.string,

    /**
     * Specify whether the Tab content is hidden
     */
    hidden: PropTypes.bool,

    /**
     * By default, this value is "navigation". You can also provide an alternate
     * role if it makes sense from the accessibility-side
     */
    role: PropTypes.string.isRequired,

    /**
     * Optionally provide an `onClick` handler that is invoked when a <Tab> is
     * clicked
     */
    onClick: PropTypes.func,

    /**
     * Optionally provide an `onKeyDown` handler that is invoked when keyed
     * navigation is triggered
     */
    onKeyDown: PropTypes.func,

    /**
     * Provide an optional handler that is called whenever the selection
     * changes. This method is called with the index of the tab that was
     * selected
     */
    onSelectionChange: PropTypes.func,

    /**
     * Provide a string that represents the `href` for the triggered <Tab>
     */
    triggerHref: PropTypes.string.isRequired,

    /**
     * Optionally provide an index for the currently selected <Tab>
     */
    selected: PropTypes.number,

    /**
     * Provide a description that is read out when a user visits the caret icon
     * for the dropdown menu of items
     */
    iconDescription: PropTypes.string.isRequired,
  };

  static defaultProps = {
    iconDescription: 'show menu options',
    role: 'navigation',
    triggerHref: '#',
    selected: 0,
    ariaLabel: 'listbox',
  };

  state = {
    dropdownHidden: true,
  };

  static getDerivedStateFromProps({ selected }, state) {
    const { prevSelected } = state;
    return prevSelected === selected
      ? null
      : {
          selected,
          prevSelected: selected,
        };
  }

  getTabs() {
    return React.Children.map(this.props.children, tab => tab);
  }

  getTabAt = index => {
    return (
      this[`tab${index}`] || React.Children.toArray(this.props.children)[index]
    );
  };

  setTabAt = (index, tabRef) => {
    this[`tab${index}`] = tabRef;
  };

  // following functions (handle*) are Props on Tab.js, see Tab.js for parameters
  handleTabClick = onSelectionChange => {
    return (index, label, evt) => {
      evt.preventDefault();
      this.selectTabAt(index, onSelectionChange);
      this.setState({
        dropdownHidden: true,
      });
    };
  };

  handleTabKeyDown = onSelectionChange => {
    return (index, label, evt) => {
      const key = evt.key || evt.which;

      if (key === 'Enter' || key === 13 || key === ' ' || key === 32) {
        this.selectTabAt(index, onSelectionChange);
        this.setState({
          dropdownHidden: true,
        });
      }
    };
  };

  handleTabAnchorFocus = onSelectionChange => {
    return index => {
      const tabCount = React.Children.count(this.props.children) - 1;
      let tabIndex = index;

      if (index < 0) {
        tabIndex = tabCount;
      } else if (index > tabCount) {
        tabIndex = 0;
      }

      const tab = this.getTabAt(tabIndex);

      if (tab) {
        this.selectTabAt(tabIndex, onSelectionChange);
        if (tab.tabAnchor) {
          tab.tabAnchor.focus();
        }
      }
    };
  };

  handleDropdownClick = () => {
    this.setState({
      dropdownHidden: !this.state.dropdownHidden,
    });
  };

  selectTabAt = (index, onSelectionChange) => {
    if (this.state.selected !== index) {
      this.setState({
        selected: index,
      });
      if (typeof onSelectionChange === 'function') {
        onSelectionChange(index);
      }
    }
  };

  render() {
    const {
      ariaLabel,
      iconDescription,
      className,
      triggerHref,
      role,
      onSelectionChange,
      ...other
    } = this.props;

    /**
     * The tab panel acts like a tab panel when the screen is wider, but acts
     * like a select list when the screen is narrow.  In the wide case we want
     * to allow the user to use the tab key to set the focus in the tab panel
     * and then use the left and right arrow keys to navigate the tabs.  In the
     * narrow case we want to use the tab key to select different options in
     * the list.
     *
     * We set the tab index based on the different states so the browser will treat
     * the whole tab panel as a single focus component when it looks like a tab
     * panel and separate components when it looks like a select list.
     */
    const tabsWithProps = this.getTabs().map((tab, index) => {
      const tabPanelIndex = index === this.state.selected ? 0 : -1;
      const tabIndex = !this.state.dropdownHidden ? 0 : tabPanelIndex;
      const newTab = React.cloneElement(tab, {
        index,
        selected: index === this.state.selected,
        handleTabClick: this.handleTabClick(onSelectionChange),
        handleTabAnchorFocus: this.handleTabAnchorFocus(onSelectionChange),
        tabIndex,
        ref: e => {
          this.setTabAt(index, e);
        },
        handleTabKeyDown: this.handleTabKeyDown(onSelectionChange),
      });

      return newTab;
    });

    const tabContentWithProps = React.Children.map(tabsWithProps, tab => {
      const { children, selected } = tab.props;

      return (
        <TabContent
          className="tab-content"
          aria-hidden={!selected}
          hidden={!selected}
          selected={selected}>
          {children}
        </TabContent>
      );
    });

    const classes = {
      tabs: classNames(`${prefix}--tabs`, className),
      tablist: classNames(`${prefix}--tabs__nav`, {
        [`${prefix}--tabs__nav--hidden`]: this.state.dropdownHidden,
      }),
    };

    const selectedTab = this.getTabAt(this.state.selected);
    const selectedLabel = selectedTab ? selectedTab.props.label : '';

    return (
      <>

          <div
            role="listbox"
            aria-label={ariaLabel}
            tabIndex={0}
            className={`${prefix}--tabs-trigger`}
            onClick={this.handleDropdownClick}
            onKeyPress={this.handleDropdownClick}>
            <a
              tabIndex={-1}
              className={`${prefix}--tabs-trigger-text`}
              href={triggerHref}
              onClick={this.handleDropdownClick}>
              {selectedLabel}

            {componentsX ? (
              <ChevronDownGlyph aria-hidden />
            ) : (
              <Icon description={iconDescription} icon={iconCaretDown} />
            )}

            {tabsWithProps}

        {tabContentWithProps}
      </>
    );
  }
}
<|endoftext|>