@inceptionbg/iui 2.0.11 → 2.0.12

package/src/styles/components/_table.scss

@@ -2,19 +2,19 @@
 
 table {
   border-spacing: 0px;
-  border-collapse: collapse;
+  // border-collapse: collapse;
 }
 .iui-table {
   //// Header ////
   thead {
     z-index: 2;
-    background-color: var(--primary-100);
+    background-color: var(--neutral-200);
+    tr:first-child th {
+      border-top: var(--border);
+    }
   }
   th {
     padding: 4px 12px;
-    border-left: var(--border);
-    border-right: var(--border);
-
     font-weight: bold;
     p {
       font-size: 12px;
@@ -33,22 +33,13 @@ table {
     top: 0;
     z-index: 1;
   }
-  .border-row {
-    background-color: var(--border-color);
-    height: 1px;
-    padding: 0;
-  }
 
   //// Body ////
-  // tbody.no-last-border tr:last-child td {
-  //   border: none;
-  // }
   // Row
   tr {
     scroll-snap-align: start;
   }
   tbody tr {
-    // border-bottom: var(--border);
     &.clickable:hover,
     &.selected {
       background-color: rgba(0, 0, 0, 0.05);
@@ -64,18 +55,14 @@ table {
   // Cell
   th,
   td {
-    // 1px solid #f2f4f7;
+    border-bottom: var(--border);
     // Cell colors
     &.secondary {
       background-color: rgba(0, 0, 0, 0.04);
-      // border-bottom: 1px solid #d3d3d3;
     }
   }
   td {
-    border: var(--border);
-    border-top: none;
     font-size: 14px;
-    box-sizing: border-box;
     height: 48px;
     padding: 6px 12px;
     &.s {
@@ -96,7 +83,6 @@ table {
     align-items: center;
     justify-content: center;
     padding: 0 4px;
-    // gap: 8px;
   }
 
   //// Footer ////
@@ -106,7 +92,6 @@ table {
     width: 100%;
     padding: 8px;
     font-size: var(--fs-m);
-    box-sizing: border-box;
     .pagination {
       display: flex;
       align-items: center;
@@ -149,6 +134,13 @@ table {
   }
 
   @media #{bp.$landscape} {
+    td,
+    th {
+      border-right: var(--border);
+      &:first-child:not(.not-first-cell) {
+        border-left: var(--border);
+      }
+    }
     .select-col,
     .actions-col {
       padding: 0;
@@ -168,7 +160,6 @@ table {
     }
     tr {
       padding-bottom: 20px;
-      border-top: var(--border);
     }
     td {
       display: flex;
@@ -210,6 +201,9 @@ table {
   }
 }
 
+.table-sort-item {
+  flex-direction: row-reverse;
+}
 // .dual-list-container {
 //   .dual-list-content {
 //     display: grid;

package/src/types/ITable.ts

@@ -1,13 +1,12 @@
 import { Dispatch, MouseEvent, ReactElement, ReactNode, SetStateAction } from 'react';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { IAnyObject, ISimpleObject } from './IBasic';
 import { ITableKeyboardActionsBase } from './IKeyboard';
+import { IPopupControl } from './IPopup';
 
-export interface ITable {
+export interface ITable<T = unknown> {
   columns: ITableColumn[];
   // setColumns?: (data: ITableColumn[]) => void;
   // withColumnsSearch?: boolean;
-  customHeader?: ITableColumn[][];
   data: ITableDataItem[];
   dataActions?: {
     edit?: {
@@ -23,11 +22,6 @@ export interface ITable {
       hasAccess: boolean;
     }[];
   };
-  sumRows?: ITableDataItem[];
-  isLoading?: boolean;
-
-  headerWrap?: boolean;
-  selectedRowUuid?: string;
   rowSelect?: {
     selectedRows: Set<string>;
     setSelectedRows: Dispatch<SetStateAction<Set<string>>>;
@@ -35,14 +29,18 @@ export interface ITable {
   };
   filterData?: ITableFilterData;
   sortData?: ITableSortData;
-  // printData?: IPrintData;
-  // customPrintData?: ICustomPrintData;
-  // additionsalOptions?: ReactNode;
+  printData?: IPrintData<T>;
+  sumRows?: ITableDataItem[];
   editable?: ITableEdit;
+  selectedRowUuid?: string;
   keyboard?: {
     enabled: boolean;
     actions: ITableKeyboardActionsBase;
   };
+  headerWrap?: boolean;
+  customHeader?: ITableColumn[][];
+  // customPrintData?: ICustomPrintData;
+  // additionsalOptions?: ReactNode;
   footer?: {
     paginationControl?: IPaginationControl;
     customPagination?: {
@@ -51,22 +49,35 @@ export interface ITable {
     };
     totalRows?: number;
     // noTotalRows?: boolean;
-    footerAction?: {
-      icon?: IconDefinition;
-      onClick: () => void;
-    };
+    refetch?: () => void;
   };
-
+  isLoading?: boolean;
   className?: string;
   rowHeight?: 'xs' | 's' | 'm';
   maxHeight?: string;
-  // templates?: {
-  //   identifier: string;
-  //   data: IReportTemplateData;
-  //   setTemplateName?: (templateName: string) => void;
-  //   onClearFilters: () => void;
-  //   allowPublicCreate?: boolean;
-  // };
+  templates?: {
+    identifier: string;
+    setSearch?: (search: string) => void;
+    items: {
+      uuid: string;
+      name: string;
+      //   identifier: string;
+      //   filterValues?: IReportTemplateFilterValue[];
+      //   columns: string[];
+      //   organization?: ISimpleObject;
+      //   subsystem?: IModule;
+      //   sorts?: string[];
+      //   isPublic?: boolean;
+      //   isDefault?: boolean;
+      //   order?: number;
+      //   createdAt?: string;
+      //   createdBy?: ISimpleObject;
+    }[];
+    // data: IReportTemplateData;
+    // setTemplateName?: (templateName: string) => void;
+    // onClearFilters: () => void;
+    // allowPublicCreate?: boolean;
+  };
 }
 
 export interface ITableColumn {
@@ -87,6 +98,7 @@ export interface ITableColumn {
     desc: string;
     label: string;
   };
+  notFirstCell?: boolean;
   // code?: string;
   className?: string;
 }
@@ -193,19 +205,30 @@ export interface IBasePrintData {
   };
   saveXlsx?: () => void;
 }
-export interface ICustomPrintData extends IBasePrintData {
-  content: ReactNode;
-}
-export interface IPrintData extends IBasePrintData {
+
+export type IGetPrintData<T> = (props: {
+  pagination: IPagination;
+  noTotalRows?: boolean;
+}) => Promise<{ items: T[]; totalRows?: number }>;
+
+export interface IPrintData<T = unknown> extends IBasePrintData {
+  printPopupControl: IPopupControl;
+  customHeader?: ITableColumn[][];
+  excludeColumnIds?: string[];
+  isLoading?: boolean;
+  progress?: number;
+  tableData?: ITableDataItem[];
+  items?: T[];
+  paginationControl?: IPaginationControl;
+  totals?: ITableDataItem;
   optionalNode?: {
     aboveTable?: ReactNode;
     bellowTable?: ReactNode;
   };
-  customHeader?: ITableColumn[][];
-  excludeColumns?: string[];
-  getPrintData: (pagination: IPagination) => Promise<{ data: any[]; totalRows?: number }>;
-  formatPrintData: (data: any) => ITableDataItem[];
-  totals?: ITableDataItem;
+}
+
+export interface ICustomPrintData extends IBasePrintData {
+  content: ReactNode;
 }
 ///////////////
 

package/src/utils/i18n/i18nIUICyrilic.ts

@@ -13,7 +13,7 @@ export const i18nIUICyrilic = {
   Close: 'Затвори',
   Confirm: 'Потврди',
   Create: 'Креирај',
-  Delete: 'Избриши',
+  Delete: 'Обриши',
   Edit: 'Измени',
   FreeText: 'Слободан унос',
   from: 'од',
@@ -32,6 +32,7 @@ export const i18nIUICyrilic = {
   Title: 'Наслов',
   to: 'до',
   Yes: 'Да',
+  LoadingProgress: 'Учитавање...',
 
   ////// TABLE //////
   RefreshData: 'Освежи податке',

package/src/utils/i18n/i18nIUILatin.ts

@@ -13,7 +13,7 @@ export const i18nIUILatin = {
   Close: 'Zatvori',
   Confirm: 'Potvrdi',
   Create: 'Kreiraj',
-  Delete: 'Izbriši',
+  Delete: 'Obriši',
   Edit: 'Izmeni',
   FreeText: 'Slobodan unos',
   from: 'od',
@@ -32,6 +32,7 @@ export const i18nIUILatin = {
   Title: 'Naslov',
   to: 'do',
   Yes: 'Da',
+  LoadingProgress: 'Učitavanje...',
 
   ////// TABLE //////
   RefreshData: 'Osveži podatke',
@@ -55,18 +56,21 @@ export const i18nIUILatin = {
   SelectedColumns: 'Odabrane kolone',
   Sort: 'Sortiranje',
   AddItem: 'Dodaj stavku',
+  // TEMPLATES
   Templates: 'Šabloni',
-  SelectTemplate: 'Izaberi šablon',
-  TemplateList: 'Lista šablona',
-  PublicTemplate: 'Javni šablon',
-  PublicTemplates: 'Javni šabloni',
-  DefaultTemplate: 'Osnovni šabloni',
-  RemoveFiltersAndLook: 'Poništi izgled i filtere',
-  CreateTemplateLong: 'Sačuvaj trenutni izgled  kao šablon',
-  CreateDefaultTemplate: 'Sačuvaj trenutni izgled kao podrazumevani',
-  CreateTemplate: 'Sačuvaj šablon',
-  DeleteTemplateDesc: 'Da li ste sigurni da želite da izbrišete šablon?',
-  DeleteTemplateTitle: 'Brisanje šablona',
+  ApplyTemplate: 'Primeni šablon',
+  ResetTemplate: 'Poništi šablon',
+  // SelectTemplate: 'Izaberi šablon',
+  // TemplateList: 'Lista šablona',
+  // PublicTemplate: 'Javni šablon',
+  // PublicTemplates: 'Javni šabloni',
+  // DefaultTemplate: 'Osnovni šabloni',
+  // RemoveFiltersAndLook: 'Poništi izgled i filtere',
+  // CreateTemplateLong: 'Sačuvaj trenutni izgled kao šablon',
+  // CreateDefaultTemplate: 'Sačuvaj trenutni izgled kao podrazumevani',
+  // CreateTemplate: 'Sačuvaj šablon',
+  // DeleteTemplateDesc: 'Da li ste sigurni da želite da izbrišete šablon?',
+  // DeleteTemplateTitle: 'Brisanje šablona',
 
   FastLinks: 'Brzi pristup',
 

package/src/utils/i18n/i18nIUIMe.ts

@@ -12,7 +12,7 @@ export const i18nIUIMe = {
   Close: 'Zatvori',
   Confirm: 'Potvrdi',
   Create: 'Kreiraj',
-  Delete: 'Izbriši',
+  Delete: 'Obriši',
   Edit: 'Izmijeni',
   FreeText: 'Slobodan unos',
   from: 'od',
@@ -31,6 +31,7 @@ export const i18nIUIMe = {
   Title: 'Naslov',
   to: 'do',
   Yes: 'Da',
+  LoadingProgress: 'Učitavanje...',
 
   ////// TABLE //////
   RefreshData: 'Osvježi podatke',

package/src/utils/icons.ts

@@ -1,4 +1,4 @@
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { faCircleCheck } from '../assets/icons/regular/faCircleCheck';
 import { faCircleExclamation } from '../assets/icons/regular/faCircleExclamation';
 import { faCircleInfo } from '../assets/icons/regular/faCircleInfo';