@operato/data-grist 2.0.0-alpha.59 → 2.0.0-alpha.60

package/src/filters/filters-form.ts

@@ -128,7 +128,7 @@ export class FiltersForm extends LitElement {
 
       const grist = this.closest('ox-grist') as DataGrist
 
-      this.value = (grist.filters || []).map(filter => {
+      this.value = (grist?.filters || []).map(filter => {
         return {
           ...filter,
           value: this.buildDefaultValue(filter!.operator, filter!.value)
@@ -172,8 +172,8 @@ export class FiltersForm extends LitElement {
                 filterLabel !== undefined
                   ? filterLabel
                   : typeof label === 'object' && label.renderer
-                  ? label.renderer(column)
-                  : header.renderer(column) || name
+                    ? label.renderer(column)
+                    : header.renderer(column) || name
 
               const idx = operator === 'between' ? 1 : 0
               const renderer = getFilterRenderer(
@@ -194,48 +194,48 @@ export class FiltersForm extends LitElement {
                     ><span>${labelText}</span> ${renderer(column, value, this)}
                   </label> `
                 : type !== 'select' && !labelText
-                ? renderer(column, value, this)
-                : operator === 'in'
-                ? html`
-                    <ox-select
-                      name=${name}
-                      placeholder=${labelText}
-                      .value=${value}
-                      @change=${(e: CustomEvent) =>
-                        e.target?.dispatchEvent(
-                          new CustomEvent('filter-change', {
-                            detail: {
-                              name,
-                              operator,
-                              value: e.detail
-                            }
-                          })
-                        )}
-                    >
-                      <ox-popup-list multiple attr-selected="checked" with-search>
-                        ${renderer(column, value, this)}
-                      </ox-popup-list>
-                    </ox-select>
-                  `
-                : html`
-                    <ox-select
-                      name=${name}
-                      placeholder=${labelText}
-                      .value=${value}
-                      @change=${(e: CustomEvent) =>
-                        e.target?.dispatchEvent(
-                          new CustomEvent('filter-change', {
-                            detail: {
-                              name,
-                              operator,
-                              value: e.detail
-                            }
-                          })
-                        )}
-                    >
-                      <ox-popup-list with-search> ${renderer(column, value, this)} </ox-popup-list>
-                    </ox-select>
-                  `
+                  ? renderer(column, value, this)
+                  : operator === 'in'
+                    ? html`
+                        <ox-select
+                          name=${name}
+                          placeholder=${labelText}
+                          .value=${value}
+                          @change=${(e: CustomEvent) =>
+                            e.target?.dispatchEvent(
+                              new CustomEvent('filter-change', {
+                                detail: {
+                                  name,
+                                  operator,
+                                  value: e.detail
+                                }
+                              })
+                            )}
+                        >
+                          <ox-popup-list multiple attr-selected="checked" with-search>
+                            ${renderer(column, value, this)}
+                          </ox-popup-list>
+                        </ox-select>
+                      `
+                    : html`
+                        <ox-select
+                          name=${name}
+                          placeholder=${labelText}
+                          .value=${value}
+                          @change=${(e: CustomEvent) =>
+                            e.target?.dispatchEvent(
+                              new CustomEvent('filter-change', {
+                                detail: {
+                                  name,
+                                  operator,
+                                  value: e.detail
+                                }
+                              })
+                            )}
+                        >
+                          <ox-popup-list with-search> ${renderer(column, value, this)} </ox-popup-list>
+                        </ox-select>
+                      `
             })}
           </form>
         `

package/stories/accumulator.stories.ts

@@ -103,7 +103,8 @@ const config = {
       header: 'accval',
       record: {
         editable: true,
-        align: 'right'
+        align: 'right',
+        defaultValue: 100
       },
       accumulator: 'avg',
       // accumulator: {
@@ -200,137 +201,130 @@ interface ArgTypes {
   fetchHandler: object
 }
 
-const Template: Story<ArgTypes> = ({
-  config,
-  mode = 'GRID',
-  urlParamsSensitive = false,
-  fetchHandler
-}: ArgTypes) => html` <link
-    href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
-    rel="stylesheet"
-  />
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/oops-theme.css" rel="stylesheet" />
-  <link href="/themes/grist-theme.css" rel="stylesheet" />
-
-  <style>
-    ox-grist {
-      height: 600px;
-    }
-
-    [slot='headroom'] {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      padding: var(--padding-default) var(--padding-wide);
-      background-color: var(--theme-white-color);
-      box-shadow: var(--box-shadow);
+const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>
+  html` <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <link href="/themes/app-theme.css" rel="stylesheet" />
+    <link href="/themes/oops-theme.css" rel="stylesheet" />
+    <link href="/themes/grist-theme.css" rel="stylesheet" />
 
-      --mdc-icon-size: 24px;
-    }
-    #sorters mwc-icon,
-    #modes mwc-icon {
-      --mdc-icon-size: 18px;
-    }
-    #sorters {
-      margin-left: auto;
-      margin-right: var(--margin-default);
-      padding-left: var(--padding-narrow);
-      border-bottom: var(--border-dark-color);
-      position: relative;
-      color: var(--secondary-color);
-      font-size: var(--fontsize-default);
-      user-select: none;
-    }
+    <style>
+      ox-grist {
+        height: 600px;
+      }
 
-    #sorters > * {
-      padding: var(--padding-narrow);
-      vertical-align: middle;
-    }
+      [slot='headroom'] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: var(--padding-default) var(--padding-wide);
+        background-color: var(--theme-white-color);
+        box-shadow: var(--box-shadow);
 
-    #modes > * {
-      padding: var(--padding-narrow);
-      opacity: 0.5;
-      color: var(--primary-text-color);
-      cursor: pointer;
-    }
+        --mdc-icon-size: 24px;
+      }
+      #sorters mwc-icon,
+      #modes mwc-icon {
+        --mdc-icon-size: 18px;
+      }
+      #sorters {
+        margin-left: auto;
+        margin-right: var(--margin-default);
+        padding-left: var(--padding-narrow);
+        border-bottom: var(--border-dark-color);
+        position: relative;
+        color: var(--secondary-color);
+        font-size: var(--fontsize-default);
+        user-select: none;
+      }
 
-    #modes > mwc-icon[active] {
-      border-radius: 9px;
-      background-color: rgba(var(--primary-color-rgb), 0.05);
-      opacity: 1;
-      color: var(--secondary-text-color);
-      cursor: default;
-    }
+      #sorters > * {
+        padding: var(--padding-narrow);
+        vertical-align: middle;
+      }
 
-    #modes > mwc-icon:hover {
-      opacity: 1;
-      color: var(--secondary-text-color);
-    }
+      #modes > * {
+        padding: var(--padding-narrow);
+        opacity: 0.5;
+        color: var(--primary-text-color);
+        cursor: pointer;
+      }
 
-    #add {
-      width: 50px;
-      text-align: right;
-    }
+      #modes > mwc-icon[active] {
+        border-radius: 9px;
+        background-color: rgba(var(--primary-color-rgb), 0.05);
+        opacity: 1;
+        color: var(--secondary-text-color);
+        cursor: default;
+      }
 
-    #add button {
-      background-color: var(--primary-color);
-      border: 0;
-      border-radius: 50%;
-      padding: 5px;
-      width: 36px;
-      height: 36px;
-      cursor: pointer;
-    }
+      #modes > mwc-icon:hover {
+        opacity: 1;
+        color: var(--secondary-text-color);
+      }
 
-    #add button:hover {
-      background-color: var(--focus-background-color);
-      box-shadow: var(--box-shadow);
-    }
+      #add {
+        width: 50px;
+        text-align: right;
+      }
 
-    #add button mwc-icon {
-      font-size: 2em;
-      color: var(--theme-white-color);
-    }
+      #add button {
+        background-color: var(--primary-color);
+        border: 0;
+        border-radius: 50%;
+        padding: 5px;
+        width: 36px;
+        height: 36px;
+        cursor: pointer;
+      }
 
-    #filters {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
+      #add button:hover {
+        background-color: var(--focus-background-color);
+        box-shadow: var(--box-shadow);
+      }
 
-    #filters * {
-      margin-right: var(--margin-default);
-    }
+      #add button mwc-icon {
+        font-size: 2em;
+        color: var(--theme-white-color);
+      }
 
-    @media only screen and (max-width: 460px) {
       #filters {
-        flex-direction: column;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
 
-      #modes {
-        display: none;
+      #filters * {
+        margin-right: var(--margin-default);
       }
-    }
-  </style>
 
-  <ox-grist
-    mode="GRID"
-    .config=${config}
-    .fetchHandler=${fetchHandler}
-    ?url-params-sensitive=${urlParamsSensitive}
-    @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
-  >
-    <div slot="headroom">
-      <div id="filters">
-        <ox-filters-form autofocus></ox-filters-form>
-      </div>
+      @media only screen and (max-width: 460px) {
+        #filters {
+          flex-direction: column;
+        }
 
-      <ox-record-creator id="add" light-popup>
-        <button><mwc-icon>add</mwc-icon></button>
-      </ox-record-creator>
-    </div>
-  </ox-grist>`
+        #modes {
+          display: none;
+        }
+      }
+    </style>
+
+    <ox-grist
+      mode="GRID"
+      .config=${config}
+      .fetchHandler=${fetchHandler}
+      ?url-params-sensitive=${urlParamsSensitive}
+      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
+    >
+      <div slot="headroom">
+        <div id="filters">
+          <ox-filters-form autofocus></ox-filters-form>
+        </div>
+
+        <ox-record-creator id="add" light-popup>
+          <button><mwc-icon>add</mwc-icon></button>
+        </ox-record-creator>
+      </div>
+    </ox-grist>`
 
 export const Regular = Template.bind({})
 Regular.args = {