Merge pull request #423 from tzahari/master

Optimized list views

client/src/components/column.tsx

@@ -44,6 +44,7 @@ interface BaseColumnProps<Obj extends Entity> {
   i18ncat?: string;
   i18nkey?: string;
   title?: string;
+  align?: AlignType;
   sorter?: boolean;
   t: (key: string) => string;
   navigate: (link: string) => void;
@@ -87,6 +88,7 @@ function Column<Obj extends Entity>(
 
   const columnProps: ColumnType<Obj> = {
     dataIndex: props.id,
+    align: props.align,
     title: props.title ?? t(props.i18nkey ?? `${props.i18ncat}.fields.${props.id}`),
     filterMultiple: props.allowMultipleFilters ?? true,
     width: props.width ?? undefined,
@@ -226,6 +228,7 @@ interface NumberColumnProps<Obj extends Entity> extends BaseColumnProps<Obj> {
 export function NumberColumn<Obj extends Entity>(props: NumberColumnProps<Obj>) {
   return Column({
     ...props,
+    align: 'right',
     render: (rawValue) => {
       const value = props.transform ? props.transform(rawValue) : rawValue;
       if (value === null || value === undefined) {
@@ -255,7 +258,7 @@ export function DateColumn<Obj extends Entity>(props: BaseColumnProps<Obj>) {
           hidden={!value}
           value={dayjs.utc(value).local()}
           title={dayjs.utc(value).local().format()}
-          format="YYYY-MM-DD HH:mm:ss"
+          format="YYYY-MM-DD HH:mm"
         />
       );
     },

client/src/pages/filaments/list.tsx

@@ -260,6 +260,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
             ...commonProps,
             id: "price",
             i18ncat: "filament",
+            align: 'right',
             width: 80,
             render: (_, obj: IFilamentCollapsed) => {
               return obj.price?.toLocaleString(undefined, {
@@ -291,7 +292,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
             id: "weight",
             i18ncat: "filament",
             unit: "g",
-            maxDecimals: 1,
+            maxDecimals: 0,
             width: 100,
           }),
           NumberColumn({
@@ -299,7 +300,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
             id: "spool_weight",
             i18ncat: "filament",
             unit: "g",
-            maxDecimals: 1,
+            maxDecimals: 0,
             width: 100,
           }),
           FilteredQueryColumn({

client/src/pages/spools/list.tsx

@@ -371,6 +371,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
             ...commonProps,
             id: "price",
             i18ncat: "spool",
+            align: 'right',
             width: 80,
             render: (_, obj: ISpoolCollapsed) => {
               return obj.price?.toLocaleString(undefined, {
@@ -385,8 +386,9 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
             ...commonProps,
             id: "used_weight",
             i18ncat: "spool",
+            align: 'right',
             unit: "g",
-            maxDecimals: 1,
+            maxDecimals: 0,
             width: 110,
           }),
           NumberColumn({
@@ -394,7 +396,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
             id: "remaining_weight",
             i18ncat: "spool",
             unit: "g",
-            maxDecimals: 1,
+            maxDecimals: 0,
             defaultText: t("unknown"),
             width: 110,
           }),
@@ -403,7 +405,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
             id: "used_length",
             i18ncat: "spool",
             unit: "mm",
-            maxDecimals: 1,
+            maxDecimals: 0,
             width: 120,
           }),
           NumberColumn({
@@ -411,7 +413,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
             id: "remaining_length",
             i18ncat: "spool",
             unit: "mm",
-            maxDecimals: 1,
+            maxDecimals: 0,
             defaultText: t("unknown"),
             width: 120,
           }),