adding sum and count functionality, preventing user from doing bad filters

packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte

@@ -23,7 +23,9 @@
   class="automation-block hoverable"
   on:click={addBlockToAutomation}
   data-cy={stepId}>
-  <div><i class={blockDefinition.icon} /></div>
+  <div>
+    <i class={blockDefinition.icon} />
+  </div>
   <div class="automation-text">
     <h4>{blockDefinition.name}</h4>
     <p>{blockDefinition.description}</p>

packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte

@@ -62,7 +62,10 @@
     {#if $automationStore.selectedBlock}
       <AutomationBlockSetup bind:block={$automationStore.selectedBlock} />
     {:else if $automationStore.selectedAutomation}
-      <div class="block-label">Automation <b>{automation.name}</b></div>
+      <div class="block-label">
+        Automation
+        <b>{automation.name}</b>
+      </div>
       <Button secondary wide on:click={testAutomation}>Test Automation</Button>
     {/if}
   </div>

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -108,8 +108,7 @@
                 <div
                   class:link={row[header] && row[header].length}
                   on:click={() => selectRelationship(row, header)}>
-                  {row[header] ? row[header].length : 0}
+                  {row[header] ? row[header].length : 0} related row(s)
-                  related row(s)
                 </div>
               {:else if schema[header].type === 'attachment'}
                 <AttachmentList files={row[header] || []} />

packages/builder/src/components/backend/DataTable/TablePagination.svelte

@@ -49,7 +49,9 @@
       <button class:selected={currentPage === 0} on:click={() => selectPage(0)}>
         1
       </button>
-      {#if currentPage > 3}<button disabled>...</button>{/if}
+      {#if currentPage > 3}
+        <button disabled>...</button>
+      {/if}
       {#each pagesAroundCurrent as idx}
         <button
           class:selected={idx === currentPage}
@@ -57,7 +59,9 @@
           {idx + 1}
         </button>
       {/each}
-      {#if currentPage < numPages - 4}<button disabled>...</button>{/if}
+      {#if currentPage < numPages - 4}
+        <button disabled>...</button>
+      {/if}
       <button
         class:selected={currentPage === numPages - 1}
         on:click={() => selectPage(numPages - 1)}>
@@ -73,13 +77,8 @@
 
   <p>
     {#if numPages > 1}
-      Showing
+      Showing {ITEMS_PER_PAGE * currentPage + 1} - {ITEMS_PER_PAGE * currentPage + pageItemCount}
-      {ITEMS_PER_PAGE * currentPage + 1}
+      of {data.length} rows
-      -
-      {ITEMS_PER_PAGE * currentPage + pageItemCount}
-      of
-      {data.length}
-      rows
     {:else if numPages === 1}Showing all {data.length} row(s){/if}
   </p>
 </div>

packages/builder/src/components/backend/DataTable/ViewDataTable.svelte

@@ -15,15 +15,16 @@
   // Fetch rows for specified view
   $: {
     if (!name.startsWith("all_")) {
-      fetchViewData(name, view.field, view.groupBy)
+      fetchViewData(name, view.field, view.groupBy, view.calculation)
     }
   }
 
-  async function fetchViewData(name, field, groupBy) {
+  async function fetchViewData(name, field, groupBy, calculation) {
     const params = new URLSearchParams()
-    if (field) {
+    if (calculation) {
       params.set("field", field)
-      params.set("stats", true)
+      // todo, maybe won't work
+      params.set("calculation", calculation)
     }
     if (groupBy) {
       params.set("group", groupBy)

packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte

@@ -9,6 +9,14 @@
       name: "Statistics",
       key: "stats",
     },
+    {
+      name: "Count",
+      key: "count",
+    },
+    {
+      name: "Sum",
+      key: "sum",
+    },
   ]
 
   export let view = {}
@@ -22,6 +30,7 @@
     Object.keys(viewTable.schema).filter(
       field => viewTable.schema[field].type === "number"
     )
+  $: valid = view.calculation === "count" || view.field
 
   function saveView() {
     if (!view.calculation) view.calculation = "stats"
@@ -35,17 +44,20 @@
 <div class="actions">
   <h5>Calculate</h5>
   <div class="input-group-row">
-    <!-- <p>The</p>
+    <p>The</p>
     <Select secondary thin bind:value={view.calculation}>
-      <option value="">Choose an option</option>
+      <option value={''}>Choose an option</option>
       {#each CALCULATIONS as calculation}
         <option value={calculation.key}>{calculation.name}</option>
       {/each}
     </Select>
-    <p>of</p> -->
+    <p>of</p>
-    <p>The statistics of</p>
     <Select secondary thin bind:value={view.field}>
-      <option value="">Choose an option</option>
+      <option value={''}>
+        {#if view.calculation === 'count'}
+          All Rows
+        {:else}You must choose an option{/if}
+      </option>
       {#each fields as field}
         <option value={field}>{field}</option>
       {/each}
@@ -53,7 +65,7 @@
   </div>
   <div class="footer">
     <Button secondary on:click={onClosed}>Cancel</Button>
-    <Button primary on:click={saveView}>Save</Button>
+    <Button primary on:click={saveView} disabled={!valid}>Save</Button>
   </div>
 </div>
 

packages/builder/src/components/common/Notification/NotificationDisplay.svelte

@@ -31,7 +31,9 @@
       style="background: {themes[notification.type]};"
       transition:fly={{ y: -30 }}>
       <div class="content">{notification.message}</div>
-      {#if notification.icon}<i class={notification.icon} />{/if}
+      {#if notification.icon}
+        <i class={notification.icon} />
+      {/if}
     </div>
   {/each}
 </div>

packages/builder/src/components/settings/Integration.svelte

@@ -5,7 +5,9 @@
 
 <div class="container">
   <div class="content">
-    <div class="img"><img src="https://picsum.photos/60/60" alt="zoom" /></div>
+    <div class="img">
+      <img src="https://picsum.photos/60/60" alt="zoom" />
+    </div>
     <div class="body">
       <div class="title">Zoom</div>
       <div class="description">

packages/builder/src/components/settings/tabs/Users.svelte

@@ -74,7 +74,7 @@
     <Label extraSmall grey>Current Users</Label>
     {#await fetchUsersPromise}
       Loading...
-    {:then users}
+    {:then [object Object]}
       <ul>
         {#each users as user}
           <li>
@@ -84,7 +84,7 @@
           <li>No Users found</li>
         {/each}
       </ul>
-    {:catch error}
+    {:catch [object Object]}
       Something went wrong when trying to fetch users. Please refresh (CMD + R /
       CTRL + R) the page and try again.
     {/await}

packages/builder/src/components/start/AppCard.svelte

@@ -10,9 +10,7 @@
   <Spacer medium />
   <div class="card-footer">
     <TextButton text medium blue href="/_builder/{_id}">
-      Open
+      Open {name} →
-      {name}
-      →
     </TextButton>
   </div>
 </div>

packages/builder/src/components/start/AppList.svelte

@@ -24,7 +24,7 @@
     <div class="spinner-container">
       <Spinner size="30" />
     </div>
-  {:then apps}
+  {:then [object Object]}
     <div class="inner">
       <div>
         <div>
@@ -36,7 +36,7 @@
         </div>
       </div>
     </div>
-  {:catch err}
+  {:catch [object Object]}
     <h1 style="color:red">{err}</h1>
   {/await}
 </div>

packages/builder/src/components/start/TemplateList.svelte

@@ -20,7 +20,7 @@
     <div class="spinner-container">
       <Spinner size="30" />
     </div>
-  {:then templates}
+  {:then [object Object]}
     <div class="templates">
       {#each templates as template}
         <div class="templates-card">
@@ -28,17 +28,18 @@
           <Spacer small />
           <Body medium grey>{template.category}</Body>
           <Body lh small black>{template.description}</Body>
-          <div><img src={template.image} width="100%" /></div>
+          <div>
+            <img src={template.image} width="100%" />
+          </div>
           <div class="card-footer">
             <Button secondary on:click={() => onSelect(template)}>
-              Create
+              Create {template.name}
-              {template.name}
             </Button>
           </div>
         </div>
       {/each}
     </div>
-  {:catch err}
+  {:catch [object Object]}
     <h1 style="color:red">{err}</h1>
   {/await}
 </div>

packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte

@@ -99,7 +99,9 @@
 </script>
 
 <div bind:this={anchor} on:click|stopPropagation={() => {}}>
-  <div class="icon" on:click={dropdown.show}><i class="ri-more-line" /></div>
+  <div class="icon" on:click={dropdown.show}>
+    <i class="ri-more-line" />
+  </div>
 </div>
 <DropdownMenu
   bind:this={dropdown}

packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte

@@ -18,7 +18,9 @@
 </script>
 
 <div class="handler-option">
-  {#if parameter.name === 'automation'}<span>{parameter.name}</span>{/if}
+  {#if parameter.name === 'automation'}
+    <span>{parameter.name}</span>
+  {/if}
   {#if parameter.name === 'automation'}
     <Select on:change bind:value={parameter.value}>
       <option value="" />

packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte

@@ -126,7 +126,9 @@
             on:click={() => switchLetter(letter)}>
             {letter}
           </span>
-          {#if idx !== alphabet.length - 1}<span>-</span>{/if}
+          {#if idx !== alphabet.length - 1}
+            <span>-</span>
+          {/if}
         {/each}
       </div>
       <div class="search-input">

packages/builder/src/components/userInterface/ItemTab/Item.svelte

@@ -3,7 +3,9 @@
 </script>
 
 <div data-cy={item.name} class="item-item" on:click>
-  <div class="item-icon"><i class={item.icon} /></div>
+  <div class="item-icon">
+    <i class={item.icon} />
+  </div>
   <div class="item-text">
     <div class="item-name">{item.name}</div>
   </div>

packages/builder/src/pages/[application]/_reset.svelte

@@ -80,9 +80,9 @@
   {#await promise}
     <!-- This should probably be some kind of loading state? -->
     <div />
-  {:then results}
+  {:then [object Object]}
     <slot />
-  {:catch error}
+  {:catch [object Object]}
     <p>Something went wrong: {error.message}</p>
   {/await}
 </div>

packages/builder/src/pages/[application]/backend/table/[selectedTable]/index.svelte

@@ -7,7 +7,9 @@
 
 {#if $backendUiStore.selectedDatabase._id && selectedTable.name}
   <TableDataTable />
-{:else}<i>Create your first table to start building</i>{/if}
+{:else}
+  <i>Create your first table to start building</i>
+{/if}
 
 <style>
   i {

packages/builder/src/pages/[application]/backend/table/index.svelte

@@ -23,7 +23,9 @@
 
 {#if $backendUiStore.tables.length === 0}
   <i>Create your first table to start building</i>
-{:else}<i>Select a table to edit</i>{/if}
+{:else}
+  <i>Select a table to edit</i>
+{/if}
 
 <style>
   i {

packages/builder/src/pages/[application]/backend/view/[selectedView]/index.svelte

@@ -7,7 +7,9 @@
 
 {#if $backendUiStore.selectedDatabase._id && selectedView}
   <ViewDataTable view={selectedView} />
-{:else}<i>Create your first table to start building</i>{/if}
+{:else}
+  <i>Create your first table to start building</i>
+{/if}
 
 <style>
   i {

packages/server/src/api/controllers/row.js

@@ -137,7 +137,7 @@ exports.save = async function(ctx) {
 exports.fetchView = async function(ctx) {
   const instanceId = ctx.user.instanceId
   const db = new CouchDB(instanceId)
-  const { stats, group, field } = ctx.query
+  const { calculation, group, field } = ctx.query
   const viewName = ctx.params.viewName
 
   // if this is a table view being looked for just transfer to that
@@ -148,22 +148,34 @@ exports.fetchView = async function(ctx) {
   }
 
   const response = await db.query(`database/${viewName}`, {
-    include_docs: !stats,
+    include_docs: !calculation,
     group,
   })
 
-  if (stats) {
+  // TODO: create constants for calculation types
+  if (!calculation) {
+    response.rows = response.rows.map(row => row.doc)
+    ctx.body = await linkRows.attachLinkInfo(instanceId, response.rows)
+  }
+
+  if (calculation === "stats") {
     response.rows = response.rows.map(row => ({
       group: row.key,
       field,
       ...row.value,
       avg: row.value.sum / row.value.count,
     }))
-  } else {
+    ctx.body = response.rows
-    response.rows = response.rows.map(row => row.doc)
   }
 
-  ctx.body = await linkRows.attachLinkInfo(instanceId, response.rows)
+  if (calculation === "count" || calculation === "sum") {
+    ctx.body = field
+      ? response.rows.map(row => ({
+          field,
+          value: row.value,
+        }))
+      : [{ field: "All Rows", value: response.total_rows }]
+  }
 }
 
 exports.fetchTableRows = async function(ctx) {

packages/server/src/api/controllers/view/viewBuilder.js

@@ -23,6 +23,14 @@ const FIELD_PROPERTY = {
 }
 
 const SCHEMA_MAP = {
+  sum: {
+    field: "string",
+    value: "number",
+  },
+  count: {
+    field: "string",
+    value: "number",
+  },
   stats: {
     sum: {
       type: "number",
@@ -82,7 +90,7 @@ function parseFilterExpression(filters) {
  */
 function parseEmitExpression(field, groupBy) {
   if (field) return `emit(doc["${groupBy || "_id"}"], doc["${field}"]);`
-  return `emit(doc._id);`
+  return `emit(doc._id, 1);`
 }
 
 /**
@@ -102,7 +110,7 @@ function viewTemplate({ field, tableId, groupBy, filters = [], calculation }) {
 
   const emitExpression = parseEmitExpression(field, groupBy)
 
-  const reduction = field ? { reduce: "_stats" } : {}
+  const reduction = field ? { reduce: `_${calculation}` } : {}
 
   let schema = null
 

packages/standard-components/src/Card.svelte

@@ -23,7 +23,9 @@
 </script>
 
 <div use:cssVars={cssVariables} class="container">
-  {#if showImage}<img class="image" src={imageUrl} alt="" />{/if}
+  {#if showImage}
+    <img class="image" src={imageUrl} alt="" />
+  {/if}
   <div class="content">
     <h2 class="heading">{heading}</h2>
     <h4 class="text">{description}</h4>

packages/standard-components/src/CardHorizontal.svelte

@@ -26,7 +26,9 @@
 </script>
 
 <div use:cssVars={cssVariables} class="container">
-  {#if showImage}<img class="image" src={imageUrl} alt="" />{/if}
+  {#if showImage}
+    <img class="image" src={imageUrl} alt="" />
+  {/if}
   <div class="content">
     <main>
       <h2 class="heading">{heading}</h2>

packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte

@@ -27,4 +27,15 @@
         on:newRow={() => dispatch('newRow')} />
  </DropdownMenu> -->
 
-<!--<style ✂prettier:content✂="CiAgZGl2IHsKICAgIGRpc3BsYXk6IGdyaWQ7CiAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IGF1dG8gYXV0bzsKICAgIHBsYWNlLWl0ZW1zOiBzdGFydCBjZW50ZXI7CiAgfQogIGg1IHsKICAgIHBhZGRpbmc6IHZhcigtLXNwYWNpbmcteGwpIDAgMCB2YXIoLS1zcGFjaW5nLXhsKTsKICAgIG1hcmdpbjogMDsKICAgIGZvbnQtd2VpZ2h0OiA1MDA7CiAgfQo=" ✂prettier:content✂="" ✂prettier:content✂="" ✂prettier:content✂="" ✂prettier:content✂="" ✂prettier:content✂="" ✂prettier:content✂=""></style>-->
+<!--<style>
+  div {
+    display: grid;
+    grid-template-columns: auto auto;
+    place-items: start center;
+  }
+  h5 {
+    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
+    margin: 0;
+    font-weight: 500;
+  }
+</style>-->

packages/standard-components/src/DataGrid/Component.svelte

@@ -19,7 +19,7 @@
   export let editable
   export let theme = "alpine"
   export let height = 500
-  export let pagination
+  export let pagination = true
 
   // These can never change at runtime so don't need to be reactive
   let canEdit = editable && datasource && datasource.type !== "view"
@@ -135,9 +135,7 @@
         {#if selectedRows.length > 0}
           <DeleteButton text small on:click={deleteRows}>
             <Icon name="addrow" />
-            Delete
+            Delete {selectedRows.length} row(s)
-            {selectedRows.length}
-            row(s)
           </DeleteButton>
         {/if}
       </div>

packages/standard-components/src/Login.svelte

@@ -42,7 +42,9 @@
 <div class="root">
   <div class="content">
     {#if logo}
-      <div class="logo-container"><img src={logo} alt="logo" /></div>
+      <div class="logo-container">
+        <img src={logo} alt="logo" />
+      </div>
     {/if}
 
     {#if title}

packages/standard-components/src/Navigation.svelte

@@ -30,7 +30,9 @@
       {#if logoUrl}
         <img class="logo" alt="logo" src={logoUrl} height="48" />
       {/if}
-      {#if title}<span>{title}</span>{/if}
+      {#if title}
+        <span>{title}</span>
+      {/if}
     </a>
     <div class="nav__controls">
       <div on:click={logOut}>Log out</div>

packages/standard-components/src/Test/TestApp.svelte

@@ -35,7 +35,7 @@
 
 {#await _appPromise}
   loading
-{:then _bb}
+{:then [object Object]}
   <div id="current_component" bind:this={currentComponent} />
 {/await}
 

packages/standard-components/src/Text.svelte

@@ -33,4 +33,6 @@
   <sub class={className}>{text}</sub>
 {:else if isTag('sup')}
   <sup class={className}>{text}</sup>
-{:else}<span>{text}</span>{/if}
+{:else}
+  <span>{text}</span>
+{/if}

packages/standard-components/src/attachments/AttachmentList.svelte

@@ -12,7 +12,9 @@
       <div class="file">
         {#if FILE_TYPES.IMAGE.includes(file.extension.toLowerCase())}
           <img {width} {height} src={file.url} alt="preview of {file.name}" />
-        {:else}<i class="far fa-file" />{/if}
+        {:else}
+          <i class="far fa-file" />
+        {/if}
       </div>
       <span>{file.name}</span>
     </a>