@visns-studio/visns-components 5.6.4 → 5.6.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2586,338 +2586,351 @@ const GenericReport = ({ setting = {} }) => {
|
|
|
2586
2586
|
<div className={styles.reportSection}>
|
|
2587
2587
|
<div
|
|
2588
2588
|
className={styles.sectionHeader}
|
|
2589
|
-
onClick={() =>
|
|
2590
|
-
setShowJoinTables(!showJoinTables)
|
|
2591
|
-
}
|
|
2592
|
-
style={{ cursor: 'pointer' }}
|
|
2593
2589
|
title={
|
|
2594
2590
|
showJoinTables
|
|
2595
2591
|
? 'Hide join tables'
|
|
2596
2592
|
: 'Show join tables'
|
|
2597
2593
|
}
|
|
2598
2594
|
>
|
|
2599
|
-
<h3
|
|
2600
|
-
|
|
2601
|
-
|
|
2602
|
-
|
|
2603
|
-
|
|
2604
|
-
: ''
|
|
2605
|
-
}`}
|
|
2595
|
+
<h3
|
|
2596
|
+
onClick={() =>
|
|
2597
|
+
setShowJoinTables(!showJoinTables)
|
|
2598
|
+
}
|
|
2599
|
+
style={{ cursor: 'pointer' }}
|
|
2606
2600
|
>
|
|
2607
|
-
|
|
2608
|
-
</
|
|
2609
|
-
|
|
2610
|
-
|
|
2611
|
-
|
|
2612
|
-
|
|
2601
|
+
Join Tables
|
|
2602
|
+
</h3>
|
|
2603
|
+
<div className={styles.sectionHeaderActions}>
|
|
2604
|
+
<button
|
|
2605
|
+
className={styles.btn}
|
|
2606
|
+
onClick={handleAddJoin}
|
|
2607
|
+
>
|
|
2608
|
+
Add Manual Relationship
|
|
2609
|
+
</button>
|
|
2613
2610
|
<div
|
|
2614
|
-
className={
|
|
2615
|
-
|
|
2611
|
+
className={`${styles.toggleBtn} ${
|
|
2612
|
+
showJoinTables
|
|
2613
|
+
? styles.toggleBtnActive
|
|
2614
|
+
: ''
|
|
2615
|
+
}`}
|
|
2616
|
+
onClick={() =>
|
|
2617
|
+
setShowJoinTables(!showJoinTables)
|
|
2616
2618
|
}
|
|
2619
|
+
style={{ cursor: 'pointer' }}
|
|
2617
2620
|
>
|
|
2618
|
-
|
|
2619
|
-
className={styles.btn}
|
|
2620
|
-
onClick={handleAddJoin}
|
|
2621
|
-
>
|
|
2622
|
-
Add Manual Relationship
|
|
2623
|
-
</button>
|
|
2621
|
+
{showJoinTables ? '▲' : '▼'}
|
|
2624
2622
|
</div>
|
|
2623
|
+
</div>
|
|
2624
|
+
</div>
|
|
2625
2625
|
|
|
2626
|
+
{showJoinTables && selectedTable && (
|
|
2627
|
+
<>
|
|
2626
2628
|
{joins.length > 0 && (
|
|
2627
|
-
<div
|
|
2628
|
-
|
|
2629
|
-
|
|
2630
|
-
|
|
2631
|
-
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
key={index}
|
|
2635
|
-
className={
|
|
2636
|
-
styles.joinSection
|
|
2637
|
-
}
|
|
2638
|
-
>
|
|
2629
|
+
<div className={styles.filterGroup}>
|
|
2630
|
+
<div
|
|
2631
|
+
className={
|
|
2632
|
+
styles.joinTablesContainer
|
|
2633
|
+
}
|
|
2634
|
+
>
|
|
2635
|
+
{joins.map((join, index) => (
|
|
2639
2636
|
<div
|
|
2637
|
+
key={index}
|
|
2640
2638
|
className={
|
|
2641
|
-
styles.
|
|
2639
|
+
styles.joinSection
|
|
2640
|
+
}
|
|
2641
|
+
data-join-index={
|
|
2642
|
+
index + 1
|
|
2642
2643
|
}
|
|
2643
2644
|
>
|
|
2644
|
-
<
|
|
2645
|
-
{join.targetTable
|
|
2646
|
-
? `${formatName(
|
|
2647
|
-
join.sourceTable
|
|
2648
|
-
)} ${join.joinType.replace(
|
|
2649
|
-
' JOIN',
|
|
2650
|
-
''
|
|
2651
|
-
)} ${formatName(
|
|
2652
|
-
join.targetTable
|
|
2653
|
-
)}`
|
|
2654
|
-
: `Join #${
|
|
2655
|
-
index + 1
|
|
2656
|
-
}`}
|
|
2657
|
-
</h4>
|
|
2658
|
-
<button
|
|
2645
|
+
<div
|
|
2659
2646
|
className={
|
|
2660
|
-
styles.
|
|
2661
|
-
}
|
|
2662
|
-
onClick={() =>
|
|
2663
|
-
handleRemoveJoin(
|
|
2664
|
-
index
|
|
2665
|
-
)
|
|
2647
|
+
styles.joinHeader
|
|
2666
2648
|
}
|
|
2667
|
-
title="Remove Join"
|
|
2668
2649
|
>
|
|
2669
|
-
|
|
2670
|
-
|
|
2671
|
-
|
|
2650
|
+
<h4
|
|
2651
|
+
data-join-index={
|
|
2652
|
+
index + 1
|
|
2653
|
+
}
|
|
2654
|
+
>
|
|
2655
|
+
{join.targetTable
|
|
2656
|
+
? `${formatName(
|
|
2657
|
+
join.sourceTable
|
|
2658
|
+
)} ${join.joinType.replace(
|
|
2659
|
+
' JOIN',
|
|
2660
|
+
''
|
|
2661
|
+
)} ${formatName(
|
|
2662
|
+
join.targetTable
|
|
2663
|
+
)}`
|
|
2664
|
+
: `Join #${
|
|
2665
|
+
index +
|
|
2666
|
+
1
|
|
2667
|
+
}`}
|
|
2668
|
+
</h4>
|
|
2669
|
+
<button
|
|
2670
|
+
className={
|
|
2671
|
+
styles.removeJoinBtn
|
|
2672
|
+
}
|
|
2673
|
+
onClick={() =>
|
|
2674
|
+
handleRemoveJoin(
|
|
2675
|
+
index
|
|
2676
|
+
)
|
|
2677
|
+
}
|
|
2678
|
+
title="Remove Join"
|
|
2679
|
+
>
|
|
2680
|
+
×
|
|
2681
|
+
</button>
|
|
2682
|
+
</div>
|
|
2672
2683
|
|
|
2673
|
-
<div
|
|
2674
|
-
className={
|
|
2675
|
-
styles.joinGrid
|
|
2676
|
-
}
|
|
2677
|
-
>
|
|
2678
2684
|
<div
|
|
2679
2685
|
className={
|
|
2680
|
-
styles.
|
|
2686
|
+
styles.joinGrid
|
|
2681
2687
|
}
|
|
2682
2688
|
>
|
|
2683
2689
|
<div
|
|
2684
2690
|
className={
|
|
2685
|
-
styles.
|
|
2691
|
+
styles.joinGridColumn
|
|
2686
2692
|
}
|
|
2687
2693
|
>
|
|
2688
|
-
<
|
|
2689
|
-
Join Type:
|
|
2690
|
-
</label>
|
|
2691
|
-
<select
|
|
2694
|
+
<div
|
|
2692
2695
|
className={
|
|
2693
|
-
styles.
|
|
2694
|
-
}
|
|
2695
|
-
value={
|
|
2696
|
-
join.joinType
|
|
2697
|
-
}
|
|
2698
|
-
onChange={(
|
|
2699
|
-
e
|
|
2700
|
-
) =>
|
|
2701
|
-
handleJoinChange(
|
|
2702
|
-
index,
|
|
2703
|
-
'joinType',
|
|
2704
|
-
e
|
|
2705
|
-
.target
|
|
2706
|
-
.value
|
|
2707
|
-
)
|
|
2696
|
+
styles.joinField
|
|
2708
2697
|
}
|
|
2709
2698
|
>
|
|
2710
|
-
<
|
|
2711
|
-
|
|
2712
|
-
|
|
2713
|
-
</
|
|
2714
|
-
<
|
|
2715
|
-
|
|
2716
|
-
|
|
2717
|
-
|
|
2718
|
-
|
|
2719
|
-
|
|
2720
|
-
|
|
2721
|
-
|
|
2722
|
-
|
|
2723
|
-
|
|
2724
|
-
|
|
2725
|
-
|
|
2726
|
-
|
|
2727
|
-
|
|
2699
|
+
<label>
|
|
2700
|
+
Join
|
|
2701
|
+
Type:
|
|
2702
|
+
</label>
|
|
2703
|
+
<select
|
|
2704
|
+
className={
|
|
2705
|
+
styles.selectControl
|
|
2706
|
+
}
|
|
2707
|
+
value={
|
|
2708
|
+
join.joinType
|
|
2709
|
+
}
|
|
2710
|
+
onChange={(
|
|
2711
|
+
e
|
|
2712
|
+
) =>
|
|
2713
|
+
handleJoinChange(
|
|
2714
|
+
index,
|
|
2715
|
+
'joinType',
|
|
2716
|
+
e
|
|
2717
|
+
.target
|
|
2718
|
+
.value
|
|
2719
|
+
)
|
|
2720
|
+
}
|
|
2721
|
+
>
|
|
2722
|
+
<option value="INNER JOIN">
|
|
2723
|
+
INNER
|
|
2724
|
+
JOIN
|
|
2725
|
+
</option>
|
|
2726
|
+
<option value="LEFT JOIN">
|
|
2727
|
+
LEFT
|
|
2728
|
+
JOIN
|
|
2729
|
+
</option>
|
|
2730
|
+
<option value="RIGHT JOIN">
|
|
2731
|
+
RIGHT
|
|
2732
|
+
JOIN
|
|
2733
|
+
</option>
|
|
2734
|
+
<option value="FULL JOIN">
|
|
2735
|
+
FULL
|
|
2736
|
+
JOIN
|
|
2737
|
+
</option>
|
|
2738
|
+
</select>
|
|
2739
|
+
</div>
|
|
2728
2740
|
|
|
2729
|
-
|
|
2730
|
-
className={
|
|
2731
|
-
styles.joinField
|
|
2732
|
-
}
|
|
2733
|
-
>
|
|
2734
|
-
<label>
|
|
2735
|
-
Source
|
|
2736
|
-
Table:
|
|
2737
|
-
</label>
|
|
2738
|
-
<input
|
|
2739
|
-
type="text"
|
|
2741
|
+
<div
|
|
2740
2742
|
className={
|
|
2741
|
-
styles.
|
|
2743
|
+
styles.joinField
|
|
2742
2744
|
}
|
|
2743
|
-
|
|
2744
|
-
|
|
2745
|
-
|
|
2746
|
-
|
|
2747
|
-
|
|
2748
|
-
|
|
2745
|
+
>
|
|
2746
|
+
<label>
|
|
2747
|
+
Source
|
|
2748
|
+
Table:
|
|
2749
|
+
</label>
|
|
2750
|
+
<input
|
|
2751
|
+
type="text"
|
|
2752
|
+
className={
|
|
2753
|
+
styles.formControl
|
|
2754
|
+
}
|
|
2755
|
+
value={formatName(
|
|
2756
|
+
join.sourceTable
|
|
2757
|
+
)}
|
|
2758
|
+
readOnly
|
|
2759
|
+
/>
|
|
2760
|
+
</div>
|
|
2749
2761
|
|
|
2750
|
-
|
|
2751
|
-
className={
|
|
2752
|
-
styles.joinField
|
|
2753
|
-
}
|
|
2754
|
-
>
|
|
2755
|
-
<label>
|
|
2756
|
-
Source
|
|
2757
|
-
Column:
|
|
2758
|
-
</label>
|
|
2759
|
-
<select
|
|
2762
|
+
<div
|
|
2760
2763
|
className={
|
|
2761
|
-
styles.
|
|
2762
|
-
}
|
|
2763
|
-
value={
|
|
2764
|
-
join.sourceColumn
|
|
2765
|
-
}
|
|
2766
|
-
onChange={(
|
|
2767
|
-
e
|
|
2768
|
-
) =>
|
|
2769
|
-
handleJoinChange(
|
|
2770
|
-
index,
|
|
2771
|
-
'sourceColumn',
|
|
2772
|
-
e
|
|
2773
|
-
.target
|
|
2774
|
-
.value
|
|
2775
|
-
)
|
|
2764
|
+
styles.joinField
|
|
2776
2765
|
}
|
|
2777
2766
|
>
|
|
2778
|
-
<
|
|
2779
|
-
|
|
2780
|
-
Column
|
|
2781
|
-
</
|
|
2782
|
-
|
|
2783
|
-
|
|
2784
|
-
|
|
2785
|
-
|
|
2786
|
-
|
|
2787
|
-
|
|
2788
|
-
|
|
2789
|
-
|
|
2790
|
-
|
|
2791
|
-
|
|
2792
|
-
|
|
2793
|
-
|
|
2794
|
-
|
|
2795
|
-
|
|
2796
|
-
|
|
2797
|
-
|
|
2798
|
-
|
|
2799
|
-
|
|
2800
|
-
|
|
2767
|
+
<label>
|
|
2768
|
+
Source
|
|
2769
|
+
Column:
|
|
2770
|
+
</label>
|
|
2771
|
+
<select
|
|
2772
|
+
className={
|
|
2773
|
+
styles.selectControl
|
|
2774
|
+
}
|
|
2775
|
+
value={
|
|
2776
|
+
join.sourceColumn
|
|
2777
|
+
}
|
|
2778
|
+
onChange={(
|
|
2779
|
+
e
|
|
2780
|
+
) =>
|
|
2781
|
+
handleJoinChange(
|
|
2782
|
+
index,
|
|
2783
|
+
'sourceColumn',
|
|
2784
|
+
e
|
|
2785
|
+
.target
|
|
2786
|
+
.value
|
|
2787
|
+
)
|
|
2788
|
+
}
|
|
2789
|
+
>
|
|
2790
|
+
<option value="">
|
|
2791
|
+
Select
|
|
2792
|
+
Column
|
|
2793
|
+
</option>
|
|
2794
|
+
{tableColumns.map(
|
|
2795
|
+
(
|
|
2796
|
+
column
|
|
2797
|
+
) => (
|
|
2798
|
+
<option
|
|
2799
|
+
key={
|
|
2800
|
+
column.name
|
|
2801
|
+
}
|
|
2802
|
+
value={
|
|
2803
|
+
column.name
|
|
2804
|
+
}
|
|
2805
|
+
>
|
|
2806
|
+
{formatName(
|
|
2807
|
+
column.name
|
|
2808
|
+
)}
|
|
2809
|
+
</option>
|
|
2810
|
+
)
|
|
2811
|
+
)}
|
|
2812
|
+
</select>
|
|
2813
|
+
</div>
|
|
2801
2814
|
</div>
|
|
2802
|
-
</div>
|
|
2803
2815
|
|
|
2804
|
-
<div
|
|
2805
|
-
className={
|
|
2806
|
-
styles.joinGridColumn
|
|
2807
|
-
}
|
|
2808
|
-
>
|
|
2809
2816
|
<div
|
|
2810
2817
|
className={
|
|
2811
|
-
styles.
|
|
2818
|
+
styles.joinGridColumn
|
|
2812
2819
|
}
|
|
2813
2820
|
>
|
|
2814
|
-
<
|
|
2815
|
-
Target
|
|
2816
|
-
Table:
|
|
2817
|
-
</label>
|
|
2818
|
-
<select
|
|
2821
|
+
<div
|
|
2819
2822
|
className={
|
|
2820
|
-
styles.
|
|
2821
|
-
}
|
|
2822
|
-
value={
|
|
2823
|
-
join.targetTable
|
|
2824
|
-
}
|
|
2825
|
-
onChange={(
|
|
2826
|
-
e
|
|
2827
|
-
) =>
|
|
2828
|
-
handleJoinChange(
|
|
2829
|
-
index,
|
|
2830
|
-
'targetTable',
|
|
2831
|
-
e
|
|
2832
|
-
.target
|
|
2833
|
-
.value
|
|
2834
|
-
)
|
|
2823
|
+
styles.joinField
|
|
2835
2824
|
}
|
|
2836
2825
|
>
|
|
2837
|
-
<
|
|
2838
|
-
|
|
2839
|
-
Table
|
|
2840
|
-
</
|
|
2841
|
-
|
|
2842
|
-
(
|
|
2843
|
-
table
|
|
2844
|
-
) => (
|
|
2845
|
-
<option
|
|
2846
|
-
key={
|
|
2847
|
-
table.name
|
|
2848
|
-
}
|
|
2849
|
-
value={
|
|
2850
|
-
table.name
|
|
2851
|
-
}
|
|
2852
|
-
>
|
|
2853
|
-
{formatName(
|
|
2854
|
-
table.name
|
|
2855
|
-
)}
|
|
2856
|
-
</option>
|
|
2857
|
-
)
|
|
2858
|
-
)}
|
|
2859
|
-
</select>
|
|
2860
|
-
</div>
|
|
2861
|
-
|
|
2862
|
-
{join.targetTable &&
|
|
2863
|
-
join.availableColumns && (
|
|
2864
|
-
<div
|
|
2826
|
+
<label>
|
|
2827
|
+
Target
|
|
2828
|
+
Table:
|
|
2829
|
+
</label>
|
|
2830
|
+
<select
|
|
2865
2831
|
className={
|
|
2866
|
-
styles.
|
|
2832
|
+
styles.selectControl
|
|
2833
|
+
}
|
|
2834
|
+
value={
|
|
2835
|
+
join.targetTable
|
|
2836
|
+
}
|
|
2837
|
+
onChange={(
|
|
2838
|
+
e
|
|
2839
|
+
) =>
|
|
2840
|
+
handleJoinChange(
|
|
2841
|
+
index,
|
|
2842
|
+
'targetTable',
|
|
2843
|
+
e
|
|
2844
|
+
.target
|
|
2845
|
+
.value
|
|
2846
|
+
)
|
|
2867
2847
|
}
|
|
2868
2848
|
>
|
|
2869
|
-
<
|
|
2870
|
-
|
|
2871
|
-
|
|
2872
|
-
</
|
|
2873
|
-
|
|
2849
|
+
<option value="">
|
|
2850
|
+
Select
|
|
2851
|
+
Table
|
|
2852
|
+
</option>
|
|
2853
|
+
{availableTables.map(
|
|
2854
|
+
(
|
|
2855
|
+
table
|
|
2856
|
+
) => (
|
|
2857
|
+
<option
|
|
2858
|
+
key={
|
|
2859
|
+
table.name
|
|
2860
|
+
}
|
|
2861
|
+
value={
|
|
2862
|
+
table.name
|
|
2863
|
+
}
|
|
2864
|
+
>
|
|
2865
|
+
{formatName(
|
|
2866
|
+
table.name
|
|
2867
|
+
)}
|
|
2868
|
+
</option>
|
|
2869
|
+
)
|
|
2870
|
+
)}
|
|
2871
|
+
</select>
|
|
2872
|
+
</div>
|
|
2873
|
+
|
|
2874
|
+
{join.targetTable &&
|
|
2875
|
+
join.availableColumns && (
|
|
2876
|
+
<div
|
|
2874
2877
|
className={
|
|
2875
|
-
styles.
|
|
2876
|
-
}
|
|
2877
|
-
value={
|
|
2878
|
-
join.targetColumn
|
|
2879
|
-
}
|
|
2880
|
-
onChange={(
|
|
2881
|
-
e
|
|
2882
|
-
) =>
|
|
2883
|
-
handleJoinChange(
|
|
2884
|
-
index,
|
|
2885
|
-
'targetColumn',
|
|
2886
|
-
e
|
|
2887
|
-
.target
|
|
2888
|
-
.value
|
|
2889
|
-
)
|
|
2878
|
+
styles.joinField
|
|
2890
2879
|
}
|
|
2891
2880
|
>
|
|
2892
|
-
<
|
|
2893
|
-
|
|
2894
|
-
Column
|
|
2895
|
-
</
|
|
2896
|
-
|
|
2897
|
-
|
|
2898
|
-
|
|
2899
|
-
|
|
2900
|
-
|
|
2901
|
-
|
|
2902
|
-
|
|
2903
|
-
|
|
2904
|
-
|
|
2905
|
-
|
|
2906
|
-
|
|
2907
|
-
|
|
2908
|
-
|
|
2909
|
-
|
|
2910
|
-
|
|
2911
|
-
|
|
2912
|
-
|
|
2913
|
-
|
|
2914
|
-
|
|
2915
|
-
|
|
2916
|
-
|
|
2881
|
+
<label>
|
|
2882
|
+
Target
|
|
2883
|
+
Column:
|
|
2884
|
+
</label>
|
|
2885
|
+
<select
|
|
2886
|
+
className={
|
|
2887
|
+
styles.selectControl
|
|
2888
|
+
}
|
|
2889
|
+
value={
|
|
2890
|
+
join.targetColumn
|
|
2891
|
+
}
|
|
2892
|
+
onChange={(
|
|
2893
|
+
e
|
|
2894
|
+
) =>
|
|
2895
|
+
handleJoinChange(
|
|
2896
|
+
index,
|
|
2897
|
+
'targetColumn',
|
|
2898
|
+
e
|
|
2899
|
+
.target
|
|
2900
|
+
.value
|
|
2901
|
+
)
|
|
2902
|
+
}
|
|
2903
|
+
>
|
|
2904
|
+
<option value="">
|
|
2905
|
+
Select
|
|
2906
|
+
Column
|
|
2907
|
+
</option>
|
|
2908
|
+
{join.availableColumns.map(
|
|
2909
|
+
(
|
|
2910
|
+
column
|
|
2911
|
+
) => (
|
|
2912
|
+
<option
|
|
2913
|
+
key={
|
|
2914
|
+
column.name
|
|
2915
|
+
}
|
|
2916
|
+
value={
|
|
2917
|
+
column.name
|
|
2918
|
+
}
|
|
2919
|
+
>
|
|
2920
|
+
{formatName(
|
|
2921
|
+
column.name
|
|
2922
|
+
)}
|
|
2923
|
+
</option>
|
|
2924
|
+
)
|
|
2925
|
+
)}
|
|
2926
|
+
</select>
|
|
2927
|
+
</div>
|
|
2928
|
+
)}
|
|
2929
|
+
</div>
|
|
2917
2930
|
</div>
|
|
2918
2931
|
</div>
|
|
2919
|
-
|
|
2920
|
-
|
|
2932
|
+
))}
|
|
2933
|
+
</div>
|
|
2921
2934
|
</div>
|
|
2922
2935
|
)}
|
|
2923
2936
|
</>
|
|
@@ -3271,249 +3284,298 @@ const GenericReport = ({ setting = {} }) => {
|
|
|
3271
3284
|
<div className={styles.reportSection}>
|
|
3272
3285
|
<div
|
|
3273
3286
|
className={styles.sectionHeader}
|
|
3274
|
-
onClick={() =>
|
|
3275
|
-
setShowSortingSection(!showSortingSection)
|
|
3276
|
-
}
|
|
3277
|
-
style={{ cursor: 'pointer' }}
|
|
3278
3287
|
title={
|
|
3279
3288
|
showSortingSection
|
|
3280
3289
|
? 'Hide sorting options'
|
|
3281
3290
|
: 'Show sorting options'
|
|
3282
3291
|
}
|
|
3283
3292
|
>
|
|
3284
|
-
<h3
|
|
3285
|
-
|
|
3286
|
-
|
|
3287
|
-
|
|
3288
|
-
|
|
3289
|
-
|
|
3290
|
-
}
|
|
3293
|
+
<h3
|
|
3294
|
+
onClick={() =>
|
|
3295
|
+
setShowSortingSection(
|
|
3296
|
+
!showSortingSection
|
|
3297
|
+
)
|
|
3298
|
+
}
|
|
3299
|
+
style={{ cursor: 'pointer' }}
|
|
3291
3300
|
>
|
|
3292
|
-
|
|
3293
|
-
</
|
|
3294
|
-
|
|
3295
|
-
|
|
3296
|
-
|
|
3297
|
-
|
|
3301
|
+
Sorting
|
|
3302
|
+
</h3>
|
|
3303
|
+
<div className={styles.sectionHeaderActions}>
|
|
3304
|
+
<button
|
|
3305
|
+
className={styles.btn}
|
|
3306
|
+
onClick={handleAddSortCriterion}
|
|
3307
|
+
disabled={selectedColumns.length === 0}
|
|
3308
|
+
>
|
|
3309
|
+
Add Sort Criterion
|
|
3310
|
+
</button>
|
|
3298
3311
|
<div
|
|
3299
|
-
className={
|
|
3300
|
-
|
|
3312
|
+
className={`${styles.toggleBtn} ${
|
|
3313
|
+
showSortingSection
|
|
3314
|
+
? styles.toggleBtnActive
|
|
3315
|
+
: ''
|
|
3316
|
+
}`}
|
|
3317
|
+
onClick={() =>
|
|
3318
|
+
setShowSortingSection(
|
|
3319
|
+
!showSortingSection
|
|
3320
|
+
)
|
|
3301
3321
|
}
|
|
3322
|
+
style={{ cursor: 'pointer' }}
|
|
3302
3323
|
>
|
|
3303
|
-
|
|
3304
|
-
className={styles.btn}
|
|
3305
|
-
onClick={handleAddSortCriterion}
|
|
3306
|
-
disabled={
|
|
3307
|
-
selectedColumns.length === 0
|
|
3308
|
-
}
|
|
3309
|
-
>
|
|
3310
|
-
Add Sort Criterion
|
|
3311
|
-
</button>
|
|
3324
|
+
{showSortingSection ? '▲' : '▼'}
|
|
3312
3325
|
</div>
|
|
3326
|
+
</div>
|
|
3327
|
+
</div>
|
|
3313
3328
|
|
|
3329
|
+
{showSortingSection && (
|
|
3330
|
+
<>
|
|
3314
3331
|
{sortCriteria.length > 0 && (
|
|
3315
|
-
<div
|
|
3316
|
-
|
|
3317
|
-
|
|
3318
|
-
|
|
3319
|
-
|
|
3320
|
-
|
|
3321
|
-
(
|
|
3322
|
-
|
|
3323
|
-
key={index}
|
|
3324
|
-
className={
|
|
3325
|
-
styles.joinSection
|
|
3326
|
-
}
|
|
3327
|
-
>
|
|
3332
|
+
<div className={styles.filterGroup}>
|
|
3333
|
+
<div
|
|
3334
|
+
className={
|
|
3335
|
+
styles.joinTablesContainer
|
|
3336
|
+
}
|
|
3337
|
+
>
|
|
3338
|
+
{sortCriteria.map(
|
|
3339
|
+
(criterion, index) => (
|
|
3328
3340
|
<div
|
|
3341
|
+
key={index}
|
|
3329
3342
|
className={
|
|
3330
|
-
styles.
|
|
3343
|
+
styles.joinSection
|
|
3344
|
+
}
|
|
3345
|
+
data-sort-index={
|
|
3346
|
+
index + 1
|
|
3331
3347
|
}
|
|
3332
3348
|
>
|
|
3333
|
-
<
|
|
3334
|
-
Sort by{' '}
|
|
3335
|
-
{criterion.table &&
|
|
3336
|
-
criterion.column
|
|
3337
|
-
? `${formatName(
|
|
3338
|
-
criterion.table
|
|
3339
|
-
)}.${formatName(
|
|
3340
|
-
criterion.column
|
|
3341
|
-
)}`
|
|
3342
|
-
: `Criterion #${
|
|
3343
|
-
index +
|
|
3344
|
-
1
|
|
3345
|
-
}`}
|
|
3346
|
-
</h4>
|
|
3347
|
-
<button
|
|
3349
|
+
<div
|
|
3348
3350
|
className={
|
|
3349
|
-
styles.
|
|
3350
|
-
}
|
|
3351
|
-
onClick={() =>
|
|
3352
|
-
handleRemoveSortCriterion(
|
|
3353
|
-
index
|
|
3354
|
-
)
|
|
3351
|
+
styles.joinHeader
|
|
3355
3352
|
}
|
|
3356
|
-
title="Remove Sort Criterion"
|
|
3357
3353
|
>
|
|
3358
|
-
|
|
3359
|
-
|
|
3360
|
-
|
|
3354
|
+
<h4
|
|
3355
|
+
data-sort-index={
|
|
3356
|
+
index +
|
|
3357
|
+
1
|
|
3358
|
+
}
|
|
3359
|
+
>
|
|
3360
|
+
by{' '}
|
|
3361
|
+
{criterion.table &&
|
|
3362
|
+
criterion.column
|
|
3363
|
+
? `${formatName(
|
|
3364
|
+
criterion.table
|
|
3365
|
+
)}.${formatName(
|
|
3366
|
+
criterion.column
|
|
3367
|
+
)}`
|
|
3368
|
+
: `Criterion #${
|
|
3369
|
+
index +
|
|
3370
|
+
1
|
|
3371
|
+
}`}
|
|
3372
|
+
</h4>
|
|
3373
|
+
<button
|
|
3374
|
+
className={
|
|
3375
|
+
styles.removeJoinBtn
|
|
3376
|
+
}
|
|
3377
|
+
onClick={() =>
|
|
3378
|
+
handleRemoveSortCriterion(
|
|
3379
|
+
index
|
|
3380
|
+
)
|
|
3381
|
+
}
|
|
3382
|
+
title="Remove Sort Criterion"
|
|
3383
|
+
>
|
|
3384
|
+
×
|
|
3385
|
+
</button>
|
|
3386
|
+
</div>
|
|
3361
3387
|
|
|
3362
|
-
<div
|
|
3363
|
-
className={
|
|
3364
|
-
styles.joinGrid
|
|
3365
|
-
}
|
|
3366
|
-
>
|
|
3367
3388
|
<div
|
|
3368
3389
|
className={
|
|
3369
|
-
styles.
|
|
3390
|
+
styles.joinGrid
|
|
3370
3391
|
}
|
|
3371
3392
|
>
|
|
3372
3393
|
<div
|
|
3373
3394
|
className={
|
|
3374
|
-
styles.
|
|
3395
|
+
styles.joinGridColumn
|
|
3375
3396
|
}
|
|
3376
3397
|
>
|
|
3377
|
-
<
|
|
3378
|
-
Column:
|
|
3379
|
-
</label>
|
|
3380
|
-
<select
|
|
3398
|
+
<div
|
|
3381
3399
|
className={
|
|
3382
|
-
styles.
|
|
3400
|
+
styles.joinField
|
|
3383
3401
|
}
|
|
3384
|
-
value={`${criterion.table}.${criterion.column}`}
|
|
3385
|
-
onChange={(
|
|
3386
|
-
e
|
|
3387
|
-
) => {
|
|
3388
|
-
const [
|
|
3389
|
-
table,
|
|
3390
|
-
column,
|
|
3391
|
-
] =
|
|
3392
|
-
e.target.value.split(
|
|
3393
|
-
'.'
|
|
3394
|
-
);
|
|
3395
|
-
handleSortCriterionChange(
|
|
3396
|
-
index,
|
|
3397
|
-
'table',
|
|
3398
|
-
table
|
|
3399
|
-
);
|
|
3400
|
-
handleSortCriterionChange(
|
|
3401
|
-
index,
|
|
3402
|
-
'column',
|
|
3403
|
-
column
|
|
3404
|
-
);
|
|
3405
|
-
}}
|
|
3406
3402
|
>
|
|
3407
|
-
<
|
|
3408
|
-
|
|
3409
|
-
|
|
3410
|
-
|
|
3411
|
-
|
|
3412
|
-
|
|
3413
|
-
|
|
3414
|
-
|
|
3415
|
-
|
|
3403
|
+
<label>
|
|
3404
|
+
Column:
|
|
3405
|
+
</label>
|
|
3406
|
+
<select
|
|
3407
|
+
className={
|
|
3408
|
+
styles.selectControl
|
|
3409
|
+
}
|
|
3410
|
+
value={
|
|
3411
|
+
criterion.table &&
|
|
3412
|
+
criterion.column
|
|
3413
|
+
? `${criterion.table}.${criterion.column}`
|
|
3414
|
+
: ''
|
|
3415
|
+
}
|
|
3416
|
+
onChange={(
|
|
3417
|
+
e
|
|
3418
|
+
) => {
|
|
3419
|
+
if (
|
|
3420
|
+
e
|
|
3421
|
+
.target
|
|
3422
|
+
.value
|
|
3423
|
+
) {
|
|
3424
|
+
// Split by the first occurrence of '.' to handle table names that might contain dots
|
|
3425
|
+
const dotIndex =
|
|
3426
|
+
e.target.value.indexOf(
|
|
3427
|
+
'.'
|
|
3428
|
+
);
|
|
3429
|
+
if (
|
|
3430
|
+
dotIndex !==
|
|
3431
|
+
-1
|
|
3432
|
+
) {
|
|
3433
|
+
const table =
|
|
3434
|
+
e.target.value.substring(
|
|
3435
|
+
0,
|
|
3436
|
+
dotIndex
|
|
3437
|
+
);
|
|
3438
|
+
const column =
|
|
3439
|
+
e.target.value.substring(
|
|
3440
|
+
dotIndex +
|
|
3441
|
+
1
|
|
3442
|
+
);
|
|
3443
|
+
|
|
3444
|
+
// First set the column to empty to avoid any issues with the value attribute
|
|
3445
|
+
handleSortCriterionChange(
|
|
3446
|
+
index,
|
|
3447
|
+
'column',
|
|
3448
|
+
''
|
|
3449
|
+
);
|
|
3450
|
+
|
|
3451
|
+
// Then set the table
|
|
3452
|
+
handleSortCriterionChange(
|
|
3453
|
+
index,
|
|
3454
|
+
'table',
|
|
3455
|
+
table
|
|
3456
|
+
);
|
|
3457
|
+
|
|
3458
|
+
// Finally set the column
|
|
3459
|
+
handleSortCriterionChange(
|
|
3460
|
+
index,
|
|
3461
|
+
'column',
|
|
3462
|
+
column
|
|
3463
|
+
);
|
|
3464
|
+
}
|
|
3465
|
+
}
|
|
3466
|
+
}}
|
|
3416
3467
|
>
|
|
3417
|
-
|
|
3468
|
+
<option value="">
|
|
3469
|
+
Select
|
|
3470
|
+
Column
|
|
3471
|
+
</option>
|
|
3472
|
+
{/* Main table columns */}
|
|
3473
|
+
<optgroup
|
|
3474
|
+
label={`${formatName(
|
|
3475
|
+
selectedTable
|
|
3476
|
+
)} Columns`}
|
|
3477
|
+
>
|
|
3478
|
+
{tableColumns.map(
|
|
3479
|
+
(
|
|
3480
|
+
column
|
|
3481
|
+
) => (
|
|
3482
|
+
<option
|
|
3483
|
+
key={`${selectedTable}.${column.name}`}
|
|
3484
|
+
value={`${selectedTable}.${column.name}`}
|
|
3485
|
+
>
|
|
3486
|
+
{formatName(
|
|
3487
|
+
column.name
|
|
3488
|
+
)}
|
|
3489
|
+
</option>
|
|
3490
|
+
)
|
|
3491
|
+
)}
|
|
3492
|
+
</optgroup>
|
|
3493
|
+
|
|
3494
|
+
{/* Joined tables columns */}
|
|
3495
|
+
{joins.map(
|
|
3418
3496
|
(
|
|
3419
|
-
|
|
3420
|
-
|
|
3421
|
-
|
|
3422
|
-
|
|
3423
|
-
|
|
3424
|
-
|
|
3425
|
-
|
|
3426
|
-
|
|
3427
|
-
|
|
3428
|
-
|
|
3429
|
-
|
|
3497
|
+
join,
|
|
3498
|
+
joinIndex
|
|
3499
|
+
) =>
|
|
3500
|
+
join.targetTable &&
|
|
3501
|
+
join.availableColumns &&
|
|
3502
|
+
join
|
|
3503
|
+
.availableColumns
|
|
3504
|
+
.length >
|
|
3505
|
+
0 ? (
|
|
3506
|
+
<optgroup
|
|
3507
|
+
key={`join-${joinIndex}`}
|
|
3508
|
+
label={`${formatName(
|
|
3509
|
+
join.targetTable
|
|
3510
|
+
)} Columns`}
|
|
3511
|
+
>
|
|
3512
|
+
{join.availableColumns.map(
|
|
3513
|
+
(
|
|
3514
|
+
column
|
|
3515
|
+
) => (
|
|
3516
|
+
<option
|
|
3517
|
+
key={`${join.targetTable}.${column.name}`}
|
|
3518
|
+
value={`${join.targetTable}.${column.name}`}
|
|
3519
|
+
>
|
|
3520
|
+
{formatName(
|
|
3521
|
+
column.name
|
|
3522
|
+
)}
|
|
3523
|
+
</option>
|
|
3524
|
+
)
|
|
3525
|
+
)}
|
|
3526
|
+
</optgroup>
|
|
3527
|
+
) : null
|
|
3430
3528
|
)}
|
|
3431
|
-
</
|
|
3432
|
-
|
|
3433
|
-
{/* Joined tables columns */}
|
|
3434
|
-
{joins.map(
|
|
3435
|
-
(
|
|
3436
|
-
join,
|
|
3437
|
-
joinIndex
|
|
3438
|
-
) =>
|
|
3439
|
-
join.targetTable &&
|
|
3440
|
-
join.availableColumns &&
|
|
3441
|
-
join
|
|
3442
|
-
.availableColumns
|
|
3443
|
-
.length >
|
|
3444
|
-
0 ? (
|
|
3445
|
-
<optgroup
|
|
3446
|
-
key={`join-${joinIndex}`}
|
|
3447
|
-
label={`${formatName(
|
|
3448
|
-
join.targetTable
|
|
3449
|
-
)} Columns`}
|
|
3450
|
-
>
|
|
3451
|
-
{join.availableColumns.map(
|
|
3452
|
-
(
|
|
3453
|
-
column
|
|
3454
|
-
) => (
|
|
3455
|
-
<option
|
|
3456
|
-
key={`${join.targetTable}.${column.name}`}
|
|
3457
|
-
value={`${join.targetTable}.${column.name}`}
|
|
3458
|
-
>
|
|
3459
|
-
{formatName(
|
|
3460
|
-
column.name
|
|
3461
|
-
)}
|
|
3462
|
-
</option>
|
|
3463
|
-
)
|
|
3464
|
-
)}
|
|
3465
|
-
</optgroup>
|
|
3466
|
-
) : null
|
|
3467
|
-
)}
|
|
3468
|
-
</select>
|
|
3529
|
+
</select>
|
|
3530
|
+
</div>
|
|
3469
3531
|
</div>
|
|
3470
|
-
</div>
|
|
3471
3532
|
|
|
3472
|
-
<div
|
|
3473
|
-
className={
|
|
3474
|
-
styles.joinGridColumn
|
|
3475
|
-
}
|
|
3476
|
-
>
|
|
3477
3533
|
<div
|
|
3478
3534
|
className={
|
|
3479
|
-
styles.
|
|
3535
|
+
styles.joinGridColumn
|
|
3480
3536
|
}
|
|
3481
3537
|
>
|
|
3482
|
-
<
|
|
3483
|
-
Direction:
|
|
3484
|
-
</label>
|
|
3485
|
-
<select
|
|
3538
|
+
<div
|
|
3486
3539
|
className={
|
|
3487
|
-
styles.
|
|
3488
|
-
}
|
|
3489
|
-
value={
|
|
3490
|
-
criterion.direction
|
|
3491
|
-
}
|
|
3492
|
-
onChange={(
|
|
3493
|
-
e
|
|
3494
|
-
) =>
|
|
3495
|
-
handleSortCriterionChange(
|
|
3496
|
-
index,
|
|
3497
|
-
'direction',
|
|
3498
|
-
e
|
|
3499
|
-
.target
|
|
3500
|
-
.value
|
|
3501
|
-
)
|
|
3540
|
+
styles.joinField
|
|
3502
3541
|
}
|
|
3503
3542
|
>
|
|
3504
|
-
<
|
|
3505
|
-
|
|
3506
|
-
</
|
|
3507
|
-
<
|
|
3508
|
-
|
|
3509
|
-
|
|
3510
|
-
|
|
3543
|
+
<label>
|
|
3544
|
+
Direction:
|
|
3545
|
+
</label>
|
|
3546
|
+
<select
|
|
3547
|
+
className={
|
|
3548
|
+
styles.selectControl
|
|
3549
|
+
}
|
|
3550
|
+
value={
|
|
3551
|
+
criterion.direction
|
|
3552
|
+
}
|
|
3553
|
+
onChange={(
|
|
3554
|
+
e
|
|
3555
|
+
) =>
|
|
3556
|
+
handleSortCriterionChange(
|
|
3557
|
+
index,
|
|
3558
|
+
'direction',
|
|
3559
|
+
e
|
|
3560
|
+
.target
|
|
3561
|
+
.value
|
|
3562
|
+
)
|
|
3563
|
+
}
|
|
3564
|
+
>
|
|
3565
|
+
<option value="ASC">
|
|
3566
|
+
Ascending
|
|
3567
|
+
</option>
|
|
3568
|
+
<option value="DESC">
|
|
3569
|
+
Descending
|
|
3570
|
+
</option>
|
|
3571
|
+
</select>
|
|
3572
|
+
</div>
|
|
3511
3573
|
</div>
|
|
3512
3574
|
</div>
|
|
3513
3575
|
</div>
|
|
3514
|
-
|
|
3515
|
-
)
|
|
3516
|
-
|
|
3576
|
+
)
|
|
3577
|
+
)}
|
|
3578
|
+
</div>
|
|
3517
3579
|
</div>
|
|
3518
3580
|
)}
|
|
3519
3581
|
</>
|
|
@@ -3791,14 +3853,22 @@ const GenericReport = ({ setting = {} }) => {
|
|
|
3791
3853
|
className={
|
|
3792
3854
|
styles.joinSection
|
|
3793
3855
|
}
|
|
3856
|
+
data-filter-index={
|
|
3857
|
+
filterIndex +
|
|
3858
|
+
1
|
|
3859
|
+
}
|
|
3794
3860
|
>
|
|
3795
3861
|
<div
|
|
3796
3862
|
className={
|
|
3797
3863
|
styles.joinHeader
|
|
3798
3864
|
}
|
|
3799
3865
|
>
|
|
3800
|
-
<h4
|
|
3801
|
-
|
|
3866
|
+
<h4
|
|
3867
|
+
data-filter-index={
|
|
3868
|
+
filterIndex +
|
|
3869
|
+
1
|
|
3870
|
+
}
|
|
3871
|
+
>
|
|
3802
3872
|
on{' '}
|
|
3803
3873
|
{criterion.table &&
|
|
3804
3874
|
criterion.column
|
|
@@ -3850,29 +3920,81 @@ const GenericReport = ({ setting = {} }) => {
|
|
|
3850
3920
|
className={
|
|
3851
3921
|
styles.selectControl
|
|
3852
3922
|
}
|
|
3853
|
-
value={
|
|
3923
|
+
value={
|
|
3924
|
+
criterion.table &&
|
|
3925
|
+
criterion.column
|
|
3926
|
+
? `${criterion.table}.${criterion.column}`
|
|
3927
|
+
: ''
|
|
3928
|
+
}
|
|
3854
3929
|
onChange={(
|
|
3855
3930
|
e
|
|
3856
3931
|
) => {
|
|
3857
|
-
|
|
3858
|
-
|
|
3859
|
-
|
|
3860
|
-
|
|
3861
|
-
|
|
3862
|
-
|
|
3863
|
-
|
|
3864
|
-
|
|
3865
|
-
|
|
3866
|
-
|
|
3867
|
-
|
|
3868
|
-
|
|
3869
|
-
|
|
3870
|
-
|
|
3871
|
-
|
|
3872
|
-
|
|
3873
|
-
|
|
3874
|
-
|
|
3875
|
-
|
|
3932
|
+
if (
|
|
3933
|
+
e
|
|
3934
|
+
.target
|
|
3935
|
+
.value
|
|
3936
|
+
) {
|
|
3937
|
+
// Split by the first occurrence of '.' to handle table names that might contain dots
|
|
3938
|
+
const dotIndex =
|
|
3939
|
+
e.target.value.indexOf(
|
|
3940
|
+
'.'
|
|
3941
|
+
);
|
|
3942
|
+
if (
|
|
3943
|
+
dotIndex !==
|
|
3944
|
+
-1
|
|
3945
|
+
) {
|
|
3946
|
+
const table =
|
|
3947
|
+
e.target.value.substring(
|
|
3948
|
+
0,
|
|
3949
|
+
dotIndex
|
|
3950
|
+
);
|
|
3951
|
+
const column =
|
|
3952
|
+
e.target.value.substring(
|
|
3953
|
+
dotIndex +
|
|
3954
|
+
1
|
|
3955
|
+
);
|
|
3956
|
+
|
|
3957
|
+
console.log(
|
|
3958
|
+
'Filter dropdown selection:',
|
|
3959
|
+
{
|
|
3960
|
+
value: e
|
|
3961
|
+
.target
|
|
3962
|
+
.value,
|
|
3963
|
+
table,
|
|
3964
|
+
column,
|
|
3965
|
+
groupIndex,
|
|
3966
|
+
filterIndex,
|
|
3967
|
+
}
|
|
3968
|
+
);
|
|
3969
|
+
|
|
3970
|
+
// Create a temporary copy of the filter criteria
|
|
3971
|
+
const updatedFilterCriteria =
|
|
3972
|
+
JSON.parse(
|
|
3973
|
+
JSON.stringify(
|
|
3974
|
+
filterCriteria
|
|
3975
|
+
)
|
|
3976
|
+
);
|
|
3977
|
+
|
|
3978
|
+
// Update both properties at once
|
|
3979
|
+
updatedFilterCriteria.groups[
|
|
3980
|
+
groupIndex
|
|
3981
|
+
].filters[
|
|
3982
|
+
filterIndex
|
|
3983
|
+
].table =
|
|
3984
|
+
table;
|
|
3985
|
+
updatedFilterCriteria.groups[
|
|
3986
|
+
groupIndex
|
|
3987
|
+
].filters[
|
|
3988
|
+
filterIndex
|
|
3989
|
+
].column =
|
|
3990
|
+
column;
|
|
3991
|
+
|
|
3992
|
+
// Set the state once with both updates
|
|
3993
|
+
setFilterCriteria(
|
|
3994
|
+
updatedFilterCriteria
|
|
3995
|
+
);
|
|
3996
|
+
}
|
|
3997
|
+
}
|
|
3876
3998
|
}}
|
|
3877
3999
|
>
|
|
3878
4000
|
<option value="">
|