Uploaded image for project: 'Nuxeo Studio'
  1. Nuxeo Studio
  2. NXS-5224

[Designer]Page provider, generated result page is changed by magic and does not work

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Resolved
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 3.7.3
    • Fix Version/s: 3.9.0
    • Component/s: Designer

      Description

      This is a difficult bug to explain, easier to follow the steps and reproduce.
      Step to reproduce:

      • Create a page provider in modeler
      • Go to designer
      • Generate the result page
      • Click in switch to code.

      This is the layout generated:

      <!--
      `nuxeo-contract_provider-search-results`
      @group Nuxeo UI
      @element nuxeo-contract_provider-search-results
      -->
      <dom-module id="nuxeo-contract_provider-search-results">
        <template>
          <style include="nuxeo-styles">
            nuxeo-data-table,
            nuxeo-data-grid,
            nuxeo-data-list,
            nuxeo-justified-grid {
              display: block;
              position: relative;
              min-height: calc(100vh - 130px - var(--nuxeo-app-top));
            }
            nuxeo-justified-grid {
              height: calc(100vh - 10em);
            }
          </style>
          <nuxeo-results name="contract_provider" nx-provider="[[nxProvider]]" selected-items="{{selectedItems}}">
            <nuxeo-data-grid name="grid" icon="nuxeo:view-thumbnails" class="results" empty-label="[[i18n('searchResults.noResults')]]"
                             sort-label="[[i18n('searchResults.sort.label')]]" selection-enabled display-quick-filters>
              <template>
                <nuxeo-document-grid-thumbnail tabindex$="{{tabIndex}}" selected$="{{selected}}" doc="[[item]]" index="[[index]]"
                                               on-navigate="_navigate" selected-items="[[selectedItems]]">
                </nuxeo-document-grid-thumbnail>
              </template>
            </nuxeo-data-grid>
            <nuxeo-data-table name="table" icon="nuxeo:view-list" class="results"
                              settings-enabled
                              empty-label="[[i18n('searchResults.noResults')]]"
                              selection-enabled
                              display-quick-filters
                              on-row-clicked="_navigate">
      
              <nuxeo-data-table-column name="Title" field="dc:title" sort-by="dc:title" flex="100">
                <template>
                  <nuxeo-document-thumbnail document="[[item]]"></nuxeo-document-thumbnail>
                  <a class="ellipsis" href$="[[urlFor('browse', item.path)]]" on-click="_navigate">[[item.title]]</a>
                </template>
              </nuxeo-data-table-column>
      
              <nuxeo-data-table-column name="Modified" field="dc:modified" sort-by="dc:modified" flex="50">
                <template>
                  [[formatDate(item.properties.dc:modified)]]
                </template>
              </nuxeo-data-table-column>
      
              <nuxeo-data-table-column name="Last Contributor" field="dc:lastContributor" sort-by="dc:lastContributor"
                                       flex="50">
                <template>
                  <nuxeo-user-tag user="[[item.properties.dc:lastContributor]]"></nuxeo-user-tag>
                </template>
              </nuxeo-data-table-column>
            </nuxeo-data-table>
      
          </nuxeo-results>
        </template>
        <script>
        Polymer({
          is: 'nuxeo-contract_provider-search-results',
          behaviors: [Nuxeo.LayoutBehavior],
          properties: {
            nxProvider: Object
          },
      
          _navigate: function(e) {
            this.fire('navigate', {doc: (e.model || e.detail).item});
          }
        });
        </script>
      </dom-module>
      
      • Click on the edit¬†button for the table layout
      • Click on switch to code
        <!--
        `nuxeo-contract_provider-search-results`
        @group Nuxeo UI
        @element nuxeo-contract_provider-search-results
        -->
        <dom-module id="nuxeo-contract_provider-search-results">
          <template>
            <style include="nuxeo-styles">
              nuxeo-data-table,
              nuxeo-data-grid,
              nuxeo-data-list,
              nuxeo-justified-grid {
                display: block;
                position: relative;
                min-height: calc(100vh - 130px - var(--nuxeo-app-top));
              }
              nuxeo-justified-grid {
                height: calc(100vh - 10em);
              }
            </style>
            <nuxeo-results name="contract_provider" nx-provider="[[nxProvider]]" selected-items="{{selectedItems}}">
              <nuxeo-data-grid name="grid" icon="nuxeo:view-thumbnails" class="results" empty-label="[[i18n('searchResults.noResults')]]" sort-label="[[i18n('searchResults.sort.label')]]" selection-enabled="" display-quick-filters="">
                <template>
                  <nuxeo-document-grid-thumbnail tabindex$="{{tabIndex}}" selected$="{{selected}}" doc="[[item]]" index="[[index]]" on-navigate="_navigate" selected-items="[[selectedItems]]">
                  </nuxeo-document-grid-thumbnail>
                </template>
              </nuxeo-data-grid>
        
              <nuxeo-data-table before-cell-bind="" before-details-bind="" before-row-bind="" settings-enabled="false" class="results" empty-label="[[i18n('searchResults.noResults')]]" selection-enabled="" display-quick-filters="" on-row-clicked="_navigate" icon="nuxeo:view-list" name="table">
                <nuxeo-data-table-column name="Title" field="dc:title" sort-by="dc:title" flex="100">
                  <template>
                    <nuxeo-document-thumbnail document="[[item]]"></nuxeo-document-thumbnail><a class="ellipsis" href$="[[urlFor('browse', item.path)]]" on-click="_navigate">[[item.title]]</a>
        
                  </template>
                </nuxeo-data-table-column>
                <nuxeo-data-table-column name="Modified" field="dc:modified" sort-by="dc:modified" flex="50">
                  <template>
                    [[formatDate(item.properties.dc:modified)]]
        
                  </template>
                </nuxeo-data-table-column>
                <nuxeo-data-table-column name="Last Contributor" field="dc:lastContributor" sort-by="dc:lastContributor" flex="50">
                  <template>
                    <nuxeo-user-tag user="[[item.properties.dc:lastContributor]]"></nuxeo-user-tag>
                  </template>
                </nuxeo-data-table-column>
              </nuxeo-data-table>
            </nuxeo-results>
          </template>
          <script>
          Polymer({
            is: 'nuxeo-contract_provider-search-results',
            behaviors: [Nuxeo.LayoutBehavior],
            properties: {
              nxProvider: Object
            },
        
            _navigate: function(e) {
              this.fire('navigate', {doc: (e.model || e.detail).item});
            }
          });
          </script>
        </dom-module>
        

        I noticed that we have a lot of properties that are added with no values for ex: before-cell-bind="" before-details-bind="" before-row-bind="" that breaks the screem so whenever I hotreload my configuration, my table is broken + there's indent is completely different.

        Attachments

          Issue Links

            Activity

              People

              • Votes:
                0 Vote for this issue
                Watchers:
                5 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 2 days
                  2d