Tables total (#2586)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

packages/theme/styles/components.scss

@@ -459,11 +459,24 @@
 
 .scroller-thead {
   position: sticky;
-  top: 0;
   z-index: 2;
+  top: 0;
+  height: 2.5rem;
   background-color: var(--body-color);
 }
 
+.scroller-tfoot {
+  position: sticky;
+  z-index: 2;
+  bottom: 0;
+  height: 2.5rem;
+  background-color: var(--body-color);
+
+  tr {
+    box-shadow: inset 0 1px 0 0 var(--divider-color);
+  }
+}
+
 // THead background-color in Tooltip and Popups
 .popup-tooltip .antiTable .scroller-thead,
 .popup .antiTable .scroller-thead { background-color: var(--accent-bg-color); }

packages/ui/src/types.ts

@@ -227,7 +227,7 @@ export interface FadeOptions {
   multipler?: Sides<number>
 }
 export const defaultSP: FadeOptions = { multipler: { top: 0, bottom: 0 } }
-export const tableSP: FadeOptions = { offset: { top: true }, multipler: { top: 2.5, bottom: 0 } }
+export const tableSP: FadeOptions = { offset: { top: true, bottom: true }, multipler: { top: 2.5, bottom: 2.5 } }
 export const tableHRscheduleY: FadeOptions = { offset: { top: true }, multipler: { top: 5, bottom: 0 } }
 export const issueSP: FadeOptions = { offset: { top: true }, multipler: { top: 3, bottom: 0 } }
 export const emojiSP: FadeOptions = { offset: { top: true }, multipler: { top: 1.5, bottom: 0 } }

plugins/hr-resources/src/components/schedule/MonthView.svelte

@@ -23,6 +23,7 @@
     day as getDay,
     daysInMonth,
     eventToHTMLElement,
+    FadeOptions,
     floorFractionDigits,
     getWeekDayName,
     isWeekend,
@@ -97,10 +98,18 @@
       3
     )
   }
+
+  const fade: FadeOptions = {
+    ...tableSP,
+    multipler: {
+      ...tableSP.multipler,
+      bottom: 3.5
+    }
+  }
 </script>
 
 {#if departmentStaff.length}
-  <Scroller fade={tableSP} horizontal>
+  <Scroller {fade} horizontal>
     <table>
       <thead class="scroller-thead">
         <tr class="scroller-thead__tr">
@@ -184,6 +193,8 @@
             {/each}
           </tr>
         {/each}
+      </tbody>
+      <tfoot class="scroller-tfoot">
         <tr>
           <td class="summary">
             <Label label={hr.string.Summary} />
@@ -218,7 +229,7 @@
             </td>
           {/each}
         </tr>
-      </tbody>
+      </tfoot>
     </table>
   </Scroller>
 {:else}
@@ -289,9 +300,13 @@
     td:not(:last-child) {
       border-right: 1px solid var(--divider-color);
     }
-    tr:not(.scroller-thead__tr) {
-      border-bottom: 1px solid var(--divider-color);
+
+    tbody {
+      tr {
+        border-bottom: 1px solid var(--divider-color);
+      }
     }
+
     tr.scroller-thead__tr:not(:last-child) {
       border-right: 1px solid var(--divider-color);
     }

plugins/view-assets/lang/en.json

@@ -62,6 +62,8 @@
     "NewFilteredView": "New filtered view",
     "FilteredViewName": "Filtered view name",
     "Then": "Then",
-    "ShowPreviewOnClick": "Please click to show document index preview..."
+    "ShowPreviewOnClick": "Please click to show document index preview...",
+    "Showed": "Showed",
+    "Total": "Total"
   }
 }

plugins/view-assets/lang/ru.json

@@ -59,6 +59,8 @@
     "NewFilteredView": "Новое фильтрованное отображение",
     "FilteredViewName": "Имя фильтрованного отображения",
     "Then": "Затем",
-    "ShowPreviewOnClick": "Пожалуйста нажмите чтобы увидеть предпросмотр..."
+    "ShowPreviewOnClick": "Пожалуйста нажмите чтобы увидеть предпросмотр...",
+    "Showed": "Показано",
+    "Total": "Всего"
   }
 }

plugins/view-resources/src/components/Table.svelte

@@ -33,6 +33,7 @@
   import { createEventDispatcher } from 'svelte'
   import { buildConfigLookup, buildModel, LoadingProps } from '../utils'
   import Menu from './Menu.svelte'
+  import view from '../plugin'
 
   export let _class: Ref<Class<Doc>>
   export let query: DocumentQuery<Doc>
@@ -45,6 +46,7 @@
   export let config: (BuildModelKey | string)[]
   export let tableId: string | undefined = undefined
   export let readonly = false
+  export let showFooter = false
 
   export let prefferedSorting: string = 'modifiedOn'
 
@@ -70,6 +72,7 @@
   let userSorting = false
 
   let objects: Doc[] = []
+  let total: number
   let objectsRecieved = false
   const refs: HTMLElement[] = []
 
@@ -101,6 +104,7 @@
       query,
       (result) => {
         objects = result
+        total = result.total
         objectsRecieved = true
         if (sortingFunction !== undefined) {
           const sf = sortingFunction
@@ -259,28 +263,11 @@
               }
             }}
           >
-            {#each model as attribute, cell}
-              {#if !cell}
-                {#if enableChecking || showNotification}
-                  <td class="relative">
-                    {#if showNotification}
-                      <div class="antiTable-cells__notifyCell">
-                        {#if enableChecking}
-                          <div class="antiTable-cells__checkCell">
-                            <CheckBox
-                              checked={checkedSet.has(object._id)}
-                              on:value={(event) => {
-                                check([object], event.detail)
-                              }}
-                            />
-                          </div>
-                        {/if}
-                        <Component
-                          is={notification.component.NotificationPresenter}
-                          props={{ value: object, kind: enableChecking ? 'table' : 'block' }}
-                        />
-                      </div>
-                    {:else}
+            {#if enableChecking || showNotification}
+              <td class="relative">
+                {#if showNotification}
+                  <div class="antiTable-cells__notifyCell">
+                    {#if enableChecking}
                       <div class="antiTable-cells__checkCell">
                         <CheckBox
                           checked={checkedSet.has(object._id)}
@@ -290,33 +277,33 @@
                         />
                       </div>
                     {/if}
-                  </td>
-                {/if}
-                <td>
-                  <div class="antiTable-cells__firstCell">
-                    <svelte:component
-                      this={attribute.presenter}
-                      value={getValue(attribute, object) ?? ''}
-                      {...joinProps(attribute.collectionAttr, object, attribute.props)}
+                    <Component
+                      is={notification.component.NotificationPresenter}
+                      props={{ value: object, kind: enableChecking ? 'table' : 'block' }}
                     />
-                    <!-- <div
-                      id="context-menu"
-                      class="antiTable-cells__firstCell-menuRow"
-                      on:click={(ev) => showMenu(ev, object, row)}
-                    >
-                      <MoreV size={'small'} />
-                    </div> -->
                   </div>
-                </td>
-              {:else}
-                <td>
+                {:else}
+                  <div class="antiTable-cells__checkCell">
+                    <CheckBox
+                      checked={checkedSet.has(object._id)}
+                      on:value={(event) => {
+                        check([object], event.detail)
+                      }}
+                    />
+                  </div>
+                {/if}
+              </td>
+            {/if}
+            {#each model as attribute, cell}
+              <td>
+                <div class:antiTable-cells__firstCell={!cell}>
                   <svelte:component
                     this={attribute.presenter}
                     value={getValue(attribute, object) ?? ''}
                     {...joinProps(attribute.collectionAttr, object, attribute.props)}
                   />
-                </td>
-              {/if}
+                </div>
+              </td>
             {/each}
           </tr>
         {/each}
@@ -346,3 +333,36 @@
   </table>
   {#if loading > 0}<Loading />{/if}
 {/await}
+{#if showFooter && total}
+  <div class="footer">
+    <div class="content" class:padding={showNotification || enableChecking}>
+      <Label label={view.string.Total} />: {total}
+      {#if objects.length > 0 && objects.length < total}
+        <Label label={view.string.Showed} />: {objects.length}
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style lang="scss">
+  .footer {
+    background-color: var(--body-color);
+    display: flex;
+    align-items: flex-end;
+    height: 100%;
+    z-index: 2;
+    position: sticky;
+    bottom: 0;
+
+    .content {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      box-shadow: inset 0 1px 0 0 var(--divider-color);
+      height: 2.5rem;
+      &.padding {
+        padding-left: 2.5rem;
+      }
+    }
+  }
+</style>

plugins/view-resources/src/components/TableBrowser.svelte

@@ -93,6 +93,7 @@
     {loadingProps}
     highlightRows={true}
     enableChecking
+    showFooter
     checked={$selectionStore ?? []}
     {prefferedSorting}
     selection={listProvider.current($focusStore)}

plugins/view-resources/src/plugin.ts

@@ -62,6 +62,8 @@ export default mergeIds(viewId, view, {
     Ordering: '' as IntlString,
     Manual: '' as IntlString,
     Then: '' as IntlString,
-    ShowPreviewOnClick: '' as IntlString
+    ShowPreviewOnClick: '' as IntlString,
+    Showed: '' as IntlString,
+    Total: '' as IntlString
   }
 })

plugins/workbench-resources/src/components/SpaceContent.svelte

@@ -65,6 +65,8 @@
             options: viewlet.options,
             config: preference?.config ?? viewlet.config,
             viewlet,
+            viewOptions,
+            viewOptionsConfig: viewlet.viewOptions?.other,
             createItemDialog,
             createItemLabel,
             query: resultQuery

plugins/workbench-resources/src/components/SpaceView.svelte

@@ -97,7 +97,7 @@
       {viewlets}
       {createItemDialog}
       {createItemLabel}
-      {viewOptions}
+      bind:viewOptions
       bind:search
       bind:viewlet
     />

plugins/workbench-resources/src/components/SpecialView.svelte

@@ -141,6 +141,7 @@
       config: preference?.config ?? viewlet.config,
       viewlet,
       viewOptions,
+      viewOptionsConfig: viewlet.viewOptions?.other,
       createItemDialog: createComponent,
       createItemLabel: createLabel,
       query: resultQuery

server/mongo/src/storage.ts

@@ -441,7 +441,8 @@ abstract class MongoAdapterBase extends TxProcessor {
     }
     const domain = this.hierarchy.getDomain(_class)
     const coll = this.db.collection(domain)
-    let cursor = coll.find<T>(this.translateQuery(_class, query))
+    const mongoQuery = this.translateQuery(_class, query)
+    let cursor = coll.find<T>(mongoQuery)
 
     if (options?.projection !== undefined) {
       const projection: Projection<T> = {}
@@ -463,7 +464,7 @@ abstract class MongoAdapterBase extends TxProcessor {
         cursor = cursor.sort(sort)
       }
       if (options.limit !== undefined) {
-        total = await coll.estimatedDocumentCount()
+        total = await coll.countDocuments(mongoQuery)
         cursor = cursor.limit(options.limit)
       }
     }