cuba-ui/cuba-lookup.html at master · cuba-elements/cuba-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<link rel="import" href="../polymer/polymer.html">

<!--
`cuba-lookup` component provides an ability to specify entity `-list` component
in order to select an entity instance for a reference attribute.
The list component should be marked passed into `lookup-screen` slot.


    <link rel="demo-manufacturers-by-country.html">

    <cuba-lookup picked-entity="{{entity.manufacturer}}">
      <div slot="dropdown">
      ...
      </div>
      <demo-manufacturers-by-country slot="lookup-screen"></demo-manufacturers-by-country>
    </cuba-lookup>
-->

<dom-module id="cuba-lookup">
  <template>
    <style>
      :host {
        display: block;
      }
      .layout {
        display: flex;
      }
      .layout .dropdown {
        flex-grow: 1;
      }
      .lookup-toggle {
        padding-top: 20px;
      }
      #lookupDialog {
        width: 100%;
        max-width: 900px;
      }
    </style>

    <div class="layout">
      <div class="dropdown">
        <slot name="dropdown"></slot>
      </div>
      <template is="dom-if" if="[[_lookupElement]]">
        <div class="lookup-toggle" on-tap="showLookupScreen">
          <paper-icon-button icon="search"></paper-icon-button>
        </div>
      </template>
    </div>

    <vaadin-dialog id="lookupDialog">
      <template>
        <div class="content">
          <slot id="lookupContent" name="lookup-screen"></slot>
        </div>
        <div class="buttons">
          <vaadin-button on-tap="_cancel">Cancel</vaadin-button>
          <vaadin-button autofocus on-tap="_select" disabled$="[[!selectedEntity]]">Select</vaadin-button>
        </div>
      </template>
    </vaadin-dialog>

  </template>
  <script>
    Polymer({
      is: 'cuba-lookup',
      properties: {
        /**
         * Entity which has been picked by user.
         */
        pickedEntity: {
          type: Object,
          notify: true
        },

        /**
         * Entity which is currently selected in lookup dialog.
         */
        selectedEntity: {
          type: Object,
          notify: true,
          value: null
        },
        _lookupElement: Object
      },
      ready: function() {
        var lookupElements = Polymer.dom(this.$.lookupContent).getDistributedNodes();
        if (lookupElements.length > 0) {
          this._lookupElement = lookupElements[0];
          this._lookupElement.addEventListener('selected-entity-changed', function(event) {
            this.selectedEntity = event.detail.value;
          }.bind(this));
        }
      },
      showLookupScreen: function() {
        this._lookupElement.reload().then(function() {
          this.$.lookupDialog.open();
        }.bind(this));
      },
      _select: function() {
        this.pickedEntity = this.selectedEntity;
        this.$.lookupDialog.close();
      },
      _cancel: function() {
        this.selectedEntity = null;
        this.pickedEntity = null;
        this.$.lookupDialog.close();
      }
    });
  </script>
</dom-module>