@openmrs/esm-report-builder 0.1.1-pre.101

package/src/components/linelist/design/panels/column-category-selector.scss

@@ -0,0 +1,324 @@
+.container {
+  width: 100%;
+
+  .quickPresets {
+    padding: 1rem;
+    background-color: #f4f4f4;
+    border-radius: 4px;
+    border: 1px solid #e0e0e0;
+
+    .sectionTitle {
+      font-size: 0.875rem;
+      font-weight: 600;
+      margin-bottom: 0.75rem;
+      color: #161616;
+    }
+
+    .presetButtons {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+    }
+  }
+
+  .error {
+    color: #da1e28;
+    padding: 0.75rem;
+    background-color: #fce8e6;
+    border-left: 3px solid #da1e28;
+    margin-bottom: 1rem;
+    border-radius: 4px;
+  }
+
+  .summary {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    background-color: #f4f4f4;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+
+    .summaryText {
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: #525252;
+    }
+  }
+
+  .categoryHeader {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+
+    .categoryIcon {
+      font-size: 1.25rem;
+    }
+
+    .categoryName {
+      font-weight: 600;
+      flex: 1;
+    }
+  }
+
+  .categoryContent {
+    padding: 1rem 0;
+
+    .categoryDescription {
+      font-size: 0.875rem;
+      color: #525252;
+      margin-bottom: 1rem;
+      padding-bottom: 0.5rem;
+      border-bottom: 1px solid #e0e0e0;
+    }
+
+    .fieldRow {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+      padding: 0.5rem 0;
+
+      .fieldDescription {
+        font-size: 0.75rem;
+        color: #6f6f6f;
+        margin-left: 2rem; // Align with checkbox label
+        font-style: italic;
+      }
+    }
+
+    .categoryActions {
+      display: flex;
+      gap: 0.5rem;
+      margin-top: 1rem;
+      padding-top: 1rem;
+      border-top: 1px solid #e0e0e0;
+    }
+
+    .columnList {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    .columnItem {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 0.75rem;
+      background-color: #ffffff;
+      border: 1px solid #e0e0e0;
+      border-radius: 6px;
+      transition: all 0.15s ease;
+      cursor: default;
+
+      &:hover {
+        background-color: #f4f4f4;
+        border-color: #8a8a8a;
+      }
+
+      .columnPosition {
+        display: flex;
+        align-items: center;
+        min-width: 3rem;
+
+        .positionNumber {
+          font-size: 0.75rem;
+          font-weight: 600;
+          color: #0f62fe;
+          background-color: #e5f1ff;
+          padding: 0.125rem 0.5rem;
+          border-radius: 10px;
+          user-select: none;
+        }
+      }
+
+      .columnInfo {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+
+        .columnName {
+          font-size: 0.875rem;
+          font-weight: 500;
+          color: #161616;
+        }
+
+        .columnIdTag {
+          font-size: 0.7rem;
+          font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', monospace;
+          opacity: 0.8;
+        }
+      }
+
+      .columnOrder {
+        font-size: 0.75rem;
+        color: #6f6f6f;
+        min-width: 2rem;
+        display: none; // Hidden, replaced by columnPosition
+      }
+
+      .columnName {
+        flex: 1;
+        font-size: 0.875rem;
+        font-weight: 500;
+      }
+
+      .columnActions {
+        display: flex;
+        gap: 0.25rem;
+        opacity: 0.7;
+        transition: opacity 0.15s ease;
+
+        // Show actions more prominently on hover
+        .columnItem:hover & {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .selectedTable {
+    margin-top: 1.5rem;
+    padding: 1rem;
+    background-color: #fafafa;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+
+    .sectionTitle {
+      font-size: 0.875rem;
+      font-weight: 600;
+      margin-bottom: 1rem;
+      color: #161616;
+    }
+
+    .columnList {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    .columnItem {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 0.75rem;
+      background-color: #ffffff;
+      border: 1px solid #e0e0e0;
+      border-radius: 6px;
+      transition: all 0.15s ease;
+      cursor: default;
+
+      &:hover {
+        background-color: #f4f4f4;
+        border-color: #8a8a8a;
+      }
+
+      .columnPosition {
+        display: flex;
+        align-items: center;
+        min-width: 3rem;
+
+        .positionNumber {
+          font-size: 0.75rem;
+          font-weight: 600;
+          color: #0f62fe;
+          background-color: #e5f1ff;
+          padding: 0.125rem 0.5rem;
+          border-radius: 10px;
+          user-select: none;
+        }
+      }
+
+      .columnInfo {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+
+        .columnName {
+          font-size: 0.875rem;
+          font-weight: 500;
+          color: #161616;
+        }
+
+        .columnIdTag {
+          font-size: 0.7rem;
+          font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', monospace;
+          opacity: 0.8;
+        }
+      }
+
+      .columnOrder {
+        font-size: 0.75rem;
+        color: #6f6f6f;
+        min-width: 2rem;
+        display: none; // Hidden, replaced by columnPosition
+      }
+
+      .columnName {
+        flex: 1;
+        font-size: 0.875rem;
+        font-weight: 500;
+      }
+
+      .columnActions {
+        display: flex;
+        gap: 0.25rem;
+        opacity: 0.7;
+        transition: opacity 0.15s ease;
+
+        // Show actions more prominently on hover
+        .columnItem:hover & {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .emptyState {
+    padding: 2rem;
+    text-align: center;
+    background-color: #f4f4f4;
+    border-radius: 4px;
+    border: 1px dashed #c6c6c6;
+
+    p {
+      font-size: 0.875rem;
+      color: #525252;
+      margin: 0;
+    }
+  }
+
+  .loadingText {
+    font-size: 0.875rem;
+    color: #525252;
+    font-style: italic;
+    padding: 1rem 0;
+  }
+
+  .emptyText {
+    font-size: 0.875rem;
+    color: #6f6f6f;
+    padding: 1rem 0;
+  }
+
+  .sectionTitle {
+    font-size: 0.875rem;
+    font-weight: 600;
+    margin: 0;
+    color: #161616;
+  }
+
+  button[icondescription="View column debug info"] {
+    svg {
+      fill: #0f62fe;
+    }
+    &:hover {
+      background-color: #e5f1ff !important;
+    }
+  }
+}

package/src/components/linelist/design/panels/column-debug-panel.component.tsx

@@ -0,0 +1,197 @@
+/**
+ * Column Debug Panel Component
+ *
+ * Displays detailed column information for debugging
+ * Shows ID, position, data definition config, source info, etc.
+ */
+
+import React from 'react';
+import { Button, Tag, CodeSnippet, Accordion, AccordionItem } from '@carbon/react';
+import { Settings, Information } from '@carbon/react/icons';
+import type { LinelistColumnDraft } from '../../../../types/linelist-types';
+import styles from './column-debug-panel.scss';
+
+type Props = {
+  column: LinelistColumnDraft;
+  onClose: () => void;
+};
+
+export default function ColumnDebugPanel({ column, onClose }: Props) {
+  return (
+    <div className={styles.debugPanel}>
+      <div className={styles.header}>
+        <div className={styles.headerTitle}>
+          <Settings size={16} className={styles.icon} />
+          <span>Column Debug Info</span>
+        </div>
+        <Button kind="ghost" size="sm" onClick={onClose}>
+          Close
+        </Button>
+      </div>
+
+      <Accordion className={styles.accordion}>
+        {/* Basic Info */}
+        <AccordionItem title="Basic Information" open={true}>
+          <div className={styles.section}>
+            <DebugRow label="Column ID" value={column.id} type="uuid" />
+            <DebugRow label="Name" value={column.name} />
+            <DebugRow label="Description" value={column.description} />
+            <DebugRow label="Position (sortOrder)" value={column.sortOrder?.toString()} type="number" />
+            <DebugRow label="Data Type" value={column.dataDefinitionType} type="tag" />
+          </div>
+        </AccordionItem>
+
+        {/* Source Info */}
+        <AccordionItem title="Source Information" open={true}>
+          <div className={styles.section}>
+            {column.source ? (
+              <>
+                <DebugRow label="Data Source UUID" value={column.source.dataSourceUuid} type="uuid" />
+                <DebugRow label="Data Source Name" value={column.source.dataSourceUuid} />
+                <DebugRow label="Table" value={column.source.table} type="code" />
+                <DebugRow label="Field" value={column.source.field} type="code" />
+                <DebugRow label="Field Type" value={column.source.fieldType} type="tag" />
+                {column.source.conceptUuid && (
+                  <DebugRow label="Concept UUID" value={column.source.conceptUuid} type="uuid" />
+                )}
+                {column.source.attributeTypeUuid && (
+                  <DebugRow label="Attribute Type UUID" value={column.source.attributeTypeUuid} type="uuid" />
+                )}
+                {column.source.identifierTypeUuid && (
+                  <DebugRow label="Identifier Type UUID" value={column.source.identifierTypeUuid} type="uuid" />
+                )}
+              </>
+            ) : (
+              <div className={styles.warning}>
+                <Information size={16} />
+                <span>No source information available</span>
+              </div>
+            )}
+          </div>
+        </AccordionItem>
+
+        {/* Data Definition Config */}
+        <AccordionItem title="Data Definition Config" open={false}>
+          <div className={styles.section}>
+            {column.dataDefinitionConfig ? (
+              <pre className={styles.code}>{JSON.stringify(column.dataDefinitionConfig, null, 2)}</pre>
+            ) : (
+              <div className={styles.warning}>
+                <Information size={16} />
+                <span>No data definition config available</span>
+              </div>
+            )}
+          </div>
+        </AccordionItem>
+
+        {/* Repeat Resolution */}
+        <AccordionItem title="Repeat Resolution" open={false}>
+          <div className={styles.section}>
+            {column.repeatResolution ? (
+              <>
+                <DebugRow label="Strategy" value={column.repeatResolution.strategy} />
+                <DebugRow label="Order By" value={column.repeatResolution.orderBy} />
+                <DebugRow label="Restrict to Period" value={column.repeatResolution.restrictToPeriod?.toString()} type="boolean" />
+                <DebugRow label="Ignore Voided" value={column.repeatResolution.ignoreVoided?.toString()} type="boolean" />
+              </>
+            ) : (
+              <div className={styles.info}>
+                <Information size={16} />
+                <span>No repeat resolution configured</span>
+              </div>
+            )}
+          </div>
+        </AccordionItem>
+
+        {/* Display Settings */}
+        <AccordionItem title="Display Settings" open={false}>
+          <div className={styles.section}>
+            {column.display ? (
+              <>
+                <DebugRow label="Width" value={column.display.width?.toString()} type="number" />
+                <DebugRow label="Align" value={column.display.align} />
+                <DebugRow label="Sortable" value={column.display.sortable?.toString()} type="boolean" />
+                <DebugRow label="Filterable" value={column.display.filterable?.toString()} type="boolean" />
+                <DebugRow label="Format" value={column.display.format} />
+              </>
+            ) : (
+              <div className={styles.info}>
+                <Information size={16} />
+                <span>No display settings configured</span>
+              </div>
+            )}
+          </div>
+        </AccordionItem>
+
+        {/* Addition Info */}
+        <AccordionItem title="Addition Info" open={false}>
+          <div className={styles.section}>
+            {column.additionInfo ? (
+              <>
+                <DebugRow label="Added Via" value={column.additionInfo.addedVia} />
+                <DebugRow label="Added At" value={column.additionInfo.addedAt} />
+                <DebugRow label="Order Added" value={column.additionInfo.orderAdded?.toString()} type="number" />
+              </>
+            ) : (
+              <div className={styles.info}>
+                <Information size={16} />
+                <span>No addition info available</span>
+              </div>
+            )}
+          </div>
+        </AccordionItem>
+
+        {/* Raw JSON */}
+        <AccordionItem title="Raw Column JSON" open={false}>
+          <div className={styles.section}>
+            <CodeSnippet type="multi" feedback="Copied!">
+              {JSON.stringify(column, null, 2)}
+            </CodeSnippet>
+          </div>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+}
+
+function DebugRow({ label, value, type = 'text' }: { label: string; value: any; type?: string }) {
+  if (value === undefined || value === null || value === '') {
+    return (
+      <div className={styles.row}>
+        <span className={styles.label}>{label}:</span>
+        <span className={styles.valueEmpty}>(not set)</span>
+      </div>
+    );
+  }
+
+  let displayValue = value;
+
+  switch (type) {
+    case 'uuid':
+    case 'code':
+      displayValue = <code className={styles.codeInline}>{value}</code>;
+      break;
+    case 'tag':
+      displayValue = <Tag size="sm" type="cool-gray">{value}</Tag>;
+      break;
+    case 'boolean':
+      displayValue = (
+        <Tag size="sm" type={value === 'true' ? 'green' : 'red'}>
+          {value === 'true' ? 'Yes' : 'No'}
+        </Tag>
+      );
+      break;
+    case 'number':
+      displayValue = <Tag size="sm" type="blue">{value}</Tag>;
+      break;
+    default:
+      displayValue = value;
+  }
+
+  return (
+    <div className={styles.row}>
+      <span className={styles.label}>{label}:</span>
+      <span className={styles.value}>{displayValue}</span>
+    </div>
+  );
+}

package/src/components/linelist/design/panels/column-debug-panel.scss

@@ -0,0 +1,141 @@
+.debugPanel {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90%;
+  max-width: 600px;
+  max-height: 80vh;
+  background-color: #f4f4f4;
+  border: 2px solid #0f62fe;
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    background-color: #0f62fe;
+    color: white;
+    border-radius: 6px 6px 0 0;
+
+    .headerTitle {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-weight: 600;
+    }
+
+    .icon {
+      // Icon styling
+    }
+  }
+
+  .accordion {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+
+    // Scrollbar styling
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: #e0e0e0;
+      border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #8a8a8a;
+      border-radius: 4px;
+
+      &:hover {
+        background: #6f6f6f;
+      }
+    }
+  }
+
+  .section {
+    padding: 0.75rem 0;
+  }
+
+  .row {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    padding: 0.375rem 0;
+    border-bottom: 1px solid #e0e0e0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .label {
+      font-weight: 500;
+      color: #525252;
+      min-width: 150px;
+      font-size: 0.875rem;
+    }
+
+    .value {
+      color: #161616;
+      font-size: 0.875rem;
+      word-break: break-all;
+    }
+
+    .valueEmpty {
+      color: #a8a8a8;
+      font-style: italic;
+      font-size: 0.875rem;
+    }
+  }
+
+  .codeInline {
+    background-color: #e0e0e0;
+    padding: 0.125rem 0.375rem;
+    border-radius: 3px;
+    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+    font-size: 0.8rem;
+    color: #0f62fe;
+  }
+
+  .code {
+    background-color: #1a1a1a;
+    color: #f4f4f4;
+    padding: 1rem;
+    border-radius: 4px;
+    overflow-x: auto;
+    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+    font-size: 0.8rem;
+    line-height: 1.5;
+    max-height: 300px;
+    overflow-y: auto;
+  }
+
+  .warning {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    background-color: #fff8e1;
+    border-left: 3px solid #f1c21b;
+    border-radius: 4px;
+    color: #525252;
+  }
+
+  .info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    background-color: #e5f1ff;
+    border-left: 3px solid #0f62fe;
+    border-radius: 4px;
+    color: #525252;
+  }
+}