compement.html

<pub-header></pub-header>

<!-- BODY WIDGET -->
<div class="panel-body">

  <!-- TABLE -->
  <table class="table"> 
    <thead>
      <tr>
        <th>Nome</th>
        <th>Url</th>
        <th>Status</th>
        <th>Ações</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th>Nome</th>
        <th>Url</th>
        <th>Status</th>
        <th>Ações</th>
      </tr>
    </tfoot>



    <tbody>
      <tr style="background:rgba(19,206,102,.2)" ng-show="$ctrl.hasError">
        <td></td>
        <td colspan="3"><p class="help is-danger">Preencha com uma URL válida</p></td>
      </tr>
      <tr style="background:rgba(19,206,102,.2)">
        <form>
        <td>
          <input class="input" type="text" placeholder="Adicionar um titulo" data-ng-model="$ctrl.menu.name" required=""  style="border: 1px solid #9e9e9e">
        </td>
        <td>
          <input class="input" type="text" placeholder="Adicionar um link 'URL'" data-ng-model="$ctrl.menu.base_Url" ng-change="$ctrl.onChange()" minlength='7' ng-required="true" style="border: 1px solid #9e9e9e">
        </td>
        <td>
        </td>
        <td>
          <button class="button button--m bg-green" data-ng-click="$ctrl.createMenu($ctrl.menuEdit[0].id, $ctrl.menu)" ng-disabled="!$ctrl.menu.name || !$ctrl.menu.base_Url">Salvar</button>
        </td>
        </form >
      </tr>

      <tr data-ng-repeat="item in $ctrl.menuEdit[0].programs | filter:$ctrl.search">
        <td>
          <input class="input" type="text" placeholder="Adicionar um titulo" data-ng-model="item.name">
        </td>
        <td>
          <input class="input" type="text" placeholder="Adicionar uma descrição" data-ng-model="item.base_Url">
        </td>
        <td>

          <label class="switch" for="activeMenu{{item.id}}">
            <input type="checkbox" class="active-menu" id="activeMenu{{item.id}}" data-ng-model="item.active" data-ng-change="$ctrl.onChangeActive(item)">
            <span class="slider round"></span>
          </label>
          <!--  <input type="checkbox" data-ng-model="item.active"> <span>Ativo</span> -->

        </td>
        <td>
          <button class="button is-success tooltip " data-ng-click="$ctrl.updateMenu(item)">
            <img src="/app/images/ico-atualizar.png">
            <span class="tooltiptext">Atualizar</span>
          </button>
          <button class="button is-danger tooltip" data-ng-click="$ctrl.deleteMenu(item)">
            <img src="/app/images/ico-delete.png">
            <span class="tooltiptext">Deletar</span>
          </button>
        </td>
      </tr>
    </tbody>
  </table><!-- /END TABLE -->
  
  <pub-footer></pub-footer>

component.js

class menuController {
  /** @ngInject */
  constructor(menuFactory) {
    this.menuFactory = menuFactory;
    this.menuTitle = menuFactory.getTitle();
    this.menu = {};
    this.menuParent = {};
    this.menuEdit = {};
    this.hasError = false;
  }

  $onInit(){
    this.menuFactory.get().then((response)=>{ 
       this.menuParent = response;
     }).then(() => {
       this.menuChildren()
     })
      
  }

 onChange() {
    var regExp = /^http[s]?\:\/\//
    if (!regExp.test(this.menu.base_Url)) {
        this.hasError = true;
    } else {
        this.hasError = false;
    }
  }

  onChangeActive(item) {
    this.updateMenu(item)
  }

  isActive(name){
    if(name == this.menuEdit[0].name) return 'is-active' 
  }

  menuChildren(children) {
    children = children || {id: 1}
    this.menuEdit = this.menuParent.filter((item) => item.id == children.id);
  }

  createMenu(id, children){
    let objChildren = {
      name: children.name,
      base_Url: children.base_Url,
      menu_id: id
    }

     this.menuFactory.save(objChildren).then((response)=>{ 
      swal("Salvo", 'O menu foi salvo com sucesso', "success")
      delete this.menu;
      return response.data
   	}).then((response) => this.menuEdit[0].programs.unshift(response)) 
  }

  
}


export const mainMenu = {
  template: require('./main.html'), 
  controller: menuController
};