nx_resources

nx_resources.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../components/core-scaffold/core-scaffold.html">
<link rel="import" href="../components/core-header-panel/core-header-panel.html">
<link rel="import" href="../components/core-list/core-list.html">
<link rel="import" href="../components/core-menu/core-menu.html">
<link rel="import" href="../components/core-item/core-item.html">
<link rel="import" href="../components/core-input/core-input.html">
<link rel="import" href="../components/core-field/core-field.html">

<link rel="import" href="../components/flatiron-director/flatiron-director.html">

<link rel="import" href="../components/paper-button/paper-button.html">
<link rel="import" href="../components/paper-dialog/paper-dialog-transition.html">
<link rel="import" href="../components/paper-dialog/paper-dialog.html">
<link rel="import" href="../components/paper-toast/paper-toast.html">
<link rel="import" href="../components/paper-fab/paper-fab.html">

<link rel="import" href="../components/nuxeo-elements/nx-connection.html">
<link rel="import" href="../components/nuxeo-elements/nx-resource.html">
<link rel="import" href="../components/nuxeo-elements/nx-layout.html">
<link rel="import" href="../components/nuxeo-elements/nx-page-provider.html">

<polymer-element name="my-element">

  <template>
    <style>    
      * {
      font-family: 'RobotoDraft', sans-serif;
    }

    core-scaffold {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    core-toolbar {
        background-color: #ccc;
    }

    core-scaffold::shadow [main] core-toolbar {
      background-color: #ccc;
    }

    core-input {
      border-bottom: 1px dotted black;
    }

    .container {
        width: 80%;
        margin: 50px auto;
    }

    .card {
        display: block;
        position: relative;
        background-color: white;
        padding: 10px;
        margin-bottom: 20px;
        width: 96%;
        height: 30px;
    }

    paper-fab {
        position: absolute;
        right: 20px;
        bottom: 20px;
    }

    paper-dialog paper-button {
      font-weight: bold;
    }

    paper-button[default] {
      color: #4285f4;
    }
    </style>
    <nx-connection url="http://demo.nuxeo.com/nuxeo"></nx-connection>
    <core-scaffold>
    <core-header-panel navigation flex mode="seamed">
      <core-toolbar></core-toolbar>
      <core-menu selected="{{resourcePath}}">
        <core-item icon="account-box" label="user"></core-item>
        <core-item icon="account-circle" label="group"></core-item>
      </core-menu>
    </core-header-panel>
    <div tool>{{resourcePath}}</div>
    <div tool class="search">
      <core-field>
        <core-icon icon="search"></core-icon>
        <core-input value="{{filter}}" placeholder="Search..."></core-input>
      </core-field>
    </div>
    <div class="container" layout vertical>

      <nx-resource auto id="search" path="{{resourcePath}}/search" params='{"q": "{{filter}}"}'></nx-resource>

      <nx-resource id="resource" path="{{ resourcePath}}/{{$.resource.type == 'user' ? $.resource.data.id : $.resource.data.groupname}}"></nx-resource>

      <core-list id="list" data="{{$.search.data.entries}}" on-core-activate="{{edit}}">
        <template>
          <div class="card">
            {{(id) ? id : groupname}}
            <core-icon-button icon="delete" style="float:right" on-click="{{delete}}"></core-icon-button>
          </div>
        </template>
      </core-list>
    </div>
  </core-scaffold>

  <paper-dialog id="form" transition="paper-dialog-transition-center">

    <!-- User Form -->
    <template if="{{$.resource.type == 'user'}}">
      <div layout horizontal>
        <label>Username: </label> {{$.resource.data.properties.username}}
      </div>
      <core-field>
        <label>First name: </label>
        <core-input value="{{$.resource.data.properties.firstName}}"></core-input>
      </core-field>
      <core-field>
        <label>Last name: </label>
        <core-input value="{{$.resource.data.properties.lastName}}"></core-input>
      </core-field>
      <core-field>
        <label>Email: </label>
        <core-input value="{{$.resource.data.properties.email}}"></core-input>
      </core-field>
    </template>

    <!-- Group Form -->
    <template if="{{$.resource.type == 'group'}}">
      <div layout horizontal>
        <label>Name: </label> {{$.resource.data.groupname}}
      </div>
      <core-field>
        <label>Label: </label>
        <core-input value="{{$.resource.data.groupname}}"></core-input>
      </core-field>
    </template>

    <paper-button label="Cancel" affirmative></paper-button>
    <paper-button label="Save" affirmative default on-click="{{save}}"></paper-button>

  </paper-dialog>

</template>

  <script>

    Polymer('my-element', {
      filter: '*',
      edit: function(e, detail) {
        this.$.resource.data = detail.data;
        // TODO(nfgs): update type when data is set
        this.$.resource.type = detail.data['entity-type'];
        this.$.form.setAttribute("heading", "Edit " + ((this.$.resource.type == 'user') ? this.$.resource.data.id : this.$.resource.data.groupname));
        this.$.form.toggle();
      },
      create: function() {
    
      },
      save: function() {
        this.$.resource.put();
      },
      delete: function(e) {
        e.preventDefault();
        e.stopPropagation();
        var doDelete = window.confirm("Are you sure you want to delete ?");
        /* TODO(nfgs)
        if (doDelete) {
          t.$.resource.delete();
          t.$.search.fetch();
        }*/
        return false;
      }
    });

  </script>

</polymer-element>