Member Junction
    Preparing search index...

    ViewConfigPanelComponent - Unified Full-Screen View Studio (mj-view-config-panel)

    Architectural & UX Design Notes:

    1. Unified Full-Screen Studio & Alternate Base View Integration: Configuring a User View spans five tightly coupled dimensions — Columns, Filters (Smart Filter, Visual Rule Builder, and Advanced SQL WHERE override), Sorting, Aggregates (Summary KPI Cards & Pinned Grid Totals via an integrated right-side Slide-In Drawer), and Display (Grid, Cards, Timeline) — plus the underlying Data Source (Canonical Base View vs. Alternate SQL View). Opening mj-view-config-panel as a unified full-screen studio with progressive disclosure (Regular Mode by default vs. Advanced Mode on demand) eliminates fragmented modal popups and keeps Alternate Base View selection, SQL WHERE clause inspection/override (<mj-code-editor Language="sql">), and __mj_* system audit fields behind an intentional Advanced Mode toggle.

    2. Purpose-Built Rich Searchable Dropdowns & Visual Choice Cards (vs. <mj-combobox> / <mj-dropdown>): Standard <mj-combobox> and <mj-dropdown> components render single-line text items. In the View Studio (Sorting field picker, Data Source Alternate Base View picker, and Display / Aggregates field selectors), users need multi-line option cards displaying human-readable descriptions (EntityField.Description / EntityAlternateBaseView.Description), SQL data-type pills (nvarchar, datetimeoffset, etc. in Advanced Mode), __mj_* system-field badges, and viewport-aware flip-up positioning. These controls therefore intentionally use purpose-built searchable listbox dropdowns (role="listbox" / role="option") and visual choice cards (role="radiogroup" / role="radio") with keyboard navigation and Escape containment rather than generic single-line comboboxes.

    Hierarchy (View Summary)

    Implements

    • OnInit
    • OnChanges
    Index

    Constructors

    Properties

    Accessors

    Methods

    AddConditionalRule AddSortLevel ApplyConditionalPreset ApplySmartFilterExample BuildSuggestedViewName BuildSummary ClearColumnFormat ClearFilters CloseAddColumnsDrawer CloseAggregateDialog CloseFormatEditor CompileFilterStateToSqlWhere EditAggregate FormatPreviewValue GetAvailableFieldsForSort GetFieldDisplayName GetFilterCount GetFilteredSortableFields GetFilterSummary GetSampleValues GetSortFieldInfo HandleDocumentClick HandleEscape HasCustomFormat IsAlternateBaseViewSelected IsDropAfter IsDropBefore IsSortDropAfter IsSortDropBefore MoveAggregateDown MoveAggregateUp MoveColumnDown MoveColumnUp ngOnChanges ngOnInit OnAggregateSave OnBaseViewTriggerKeydown OnClose OnCustomSqlWhereChange OnDefaultLayoutSwitchCancelled OnDefaultLayoutSwitchConfirmed OnDelete OnDeleteCancelled OnDeleteConfirmed OnDragEnd OnDragLeave OnDragOver OnDragStart OnDrop OnDuplicate OnFilterChange OnFilterModeSwitchCancelled OnFilterModeSwitchConfirmed OnSave OnSaveAsCopy OnSaveAsNew OnSaveDefaults OnSmartFilterPromptChange OnSortDirectionChange OnSortDragEnd OnSortDragLeave OnSortDragOver OnSortDragStart OnSortDrop OnSortFieldChange OnSortSearchKeydown OnSortTriggerKeydown OnTimelineDateTriggerKeydown OnToggleCustomWhereOverride OpenAddAggregateDialog OpenAddColumnsDrawer OpenFilterDialog OpenFormatEditor PromoteToNewView RemoveAggregate RemoveConditionalRule RemoveSortLevel RequestSwitchToDefaultLayoutMode ResetColumnsToDefault SelectBaseView SelectSortField SelectTimelineDateField SetActiveTab SetCardSize SetColumnPin SetFilterMode SetGridRowHeight SetTimelineGrouping SetTimelineOrientation ShowAllColumns SwitchToDefaultLayoutMode ToggleAddColumnsDrawer ToggleAdvancedMode ToggleAggregateEnabled ToggleBaseViewDropdown ToggleCellStyle ToggleColumnPin ToggleColumnVisibility ToggleDefaultView ToggleDescriptionEditor ToggleGridWrapText ToggleHeaderStyle ToggleShared ToggleSortFieldDropdown ToggleTimelineDateDropdown UpdateCellColor UpdateHeaderColor UpdateUserDisplayName

    Constructors

    Properties

    ActiveTab:
        | "columns"
        | "aggregates"
        | "sorting"
        | "filters"
        | "properties"
        | "settings"
        | "display" = 'columns'
    AggregateDisplay: Required<MJUserViewEntity_IGridAggregateDisplay> = ...
    AlternateBaseView: string | null = null
    CardSize: "medium" | "small" | "large" = 'medium'
    Close: EventEmitter<void> = ...

    Emitted when the panel should close

    Columns: ColumnConfig[] = []
    ColumnSearchText: string = ''
    CurrentGridState: ViewGridState | null = null

    Current grid state from the grid (includes live column widths/order from user interaction) This takes precedence over viewEntity.Columns for showing current state

    CustomWhereClause: boolean = false
    DefaultSaveAsNew: boolean = false

    When true, the panel is in "create new view" mode — shows the Settings tab and a "Create View" button even without a viewEntity.

    Delete: EventEmitter<void> = ...

    Emitted when the view should be deleted

    DraggedColumn: ColumnConfig | null = null
    DraggedSortItem: SortItem | null = null
    DropPosition: "before" | "after" | null = null
    DropTargetColumn: ColumnConfig | null = null
    DropTargetSortItem: SortItem | null = null
    Duplicate: EventEmitter<void> = ...

    Emitted when user wants to duplicate the current view (F-005)

    EditingAggregate: MJUserViewEntity_IGridAggregate | null = null
    Entity: EntityInfo | null = null

    The entity being viewed

    ExternalFilterState: CompositeFilterDescriptor | null = null

    Filter state from external dialog (set by parent after dialog closes)

    FilterFields: FilterFieldInfo[] = []
    FilterMode: "smart" | "traditional" | "sql" = 'smart'
    FilterState: CompositeFilterDescriptor = ...
    FormatEditingColumn: ColumnConfig | null = null
    GridRowHeight: "compact" | "normal" | "comfortable" = 'normal'
    GridWrapText: boolean = false
    IsAdvancedMode: boolean = false
    IsBaseViewDropdownOpen: boolean = false
    IsCreatingNewView: boolean = false
    IsDefault: boolean = false
    IsFullScreen: boolean = true
    IsOpen: boolean = false

    Whether the panel is open

    IsSaveAsNewFlow: boolean = false

    True when the Studio was opened via "+ Create New View" (DefaultSaveAsNew), even if a ViewEntity is currently selected

    IsSaving: boolean = false
    IsShared: boolean = false
    IsTimelineDateDropdownOpen: boolean = false
    OpenFilterDialogRequest: EventEmitter<
        {
            filterFields: FilterFieldInfo[];
            filterState: CompositeFilterDescriptor;
        },
    > = ...

    Emitted when filter dialog should be opened (at dashboard level for full width)

    OpenSortFieldDropdownIndex: number | null = null
    PendingFilterModeSwitch: "smart" | "traditional" | "sql" | null = null
    PendingNewViewAlternateBaseView: string | null = null

    Pre-populated alternate base view from the quick save dialog or workspace (used when DefaultSaveAsNew is true)

    PendingNewViewDescription: string = ''

    Pre-populated description from the quick save dialog (used when DefaultSaveAsNew is true)

    PendingNewViewFilterState: CompositeFilterDescriptor | null = null

    Pre-populated traditional filter from the quick save dialog (used when DefaultSaveAsNew is true). Without it, reopening this panel from the dialog would reset the filter the user had already configured. ExternalFilterState can't carry it back: the staged filter is the very object this panel is already bound to, so that input never registers a change.

    PendingNewViewIsShared: boolean = false

    Pre-populated sharing preference from the quick save dialog (used when DefaultSaveAsNew is true)

    PendingNewViewName: string = ''

    Pre-populated view name from the quick save dialog (used when DefaultSaveAsNew is true)

    PendingNewViewSmartFilterEnabled: boolean = false

    Pre-populated smart-filter toggle from the quick save dialog (used when DefaultSaveAsNew is true) — the smart-mode counterpart of PendingNewViewFilterState.

    PendingNewViewSmartFilterPrompt: string = ''

    Pre-populated smart-filter prompt from the quick save dialog (used when DefaultSaveAsNew is true)

    Properties: UserViewProperty[] = []

    The view's declared properties being edited (a copy; the view changes only on save).

    Provider: IMetadataProvider | null

    If specified, this provider will be used for communication and for all metadata purposes. By default, if not provided, the Metadata and RunView classes are used for this and the default GraphQLDataProvider is used which is connected to the same back-end MJAPI instance as the Metadata and RunView classes. If you want to have this component connect to a different MJAPI back-end, create an instance of a ProviderBase sub-class like GraphQLDataProvider/etc, and configure it as appropriate to connect to the MJAPI back-end you want to use, and then pass it in here.

    SampleData: Record<string, unknown>[] = []

    Sample data for column format preview (first few records)

    Save: EventEmitter<ViewSaveEvent> = ...

    Emitted when the view should be saved

    SaveDefaults: EventEmitter<ViewSaveEvent> = ...

    Emitted when default view settings should be saved to user settings (Used for dynamic/default views that persist to MJ: User Settings)

    ShowAddColumnsDrawer: boolean = false
    ShowAdvancedSqlSection: boolean = false
    ShowAggregateDialog: boolean = false
    ShowAggregateDisplaySection: boolean = false
    ShowDefaultLayoutSwitchConfirm: boolean = false
    ShowDeleteConfirm: boolean = false
    ShowDescriptionEditor: boolean = false
    ShowDisplayOptionsSection: boolean = false
    ShowFilterModeSwitchConfirm: boolean = false
    ShowGeneratedSmartSql: boolean = false
    SmartFilterEnabled: boolean = false
    SmartFilterExplanation: string = ''
    SmartFilterPrompt: string = ''
    SortDirection: "asc" | "desc" = 'asc'

    Use sortItems instead

    SortDirections: (
        { name: string; value: "asc" }
        | { name: string; value: "desc" }
    )[] = ...
    SortDropdownDropUp: boolean = false
    SortDropPosition: "before" | "after" | null = null
    SortField: string | null = null

    Use sortItems instead

    SortFieldSearchText: string = ''
    SortHighlightIndex: number = 0
    SortItems: SortItem[] = []

    Multi-column sort configuration (ordered by priority)

    SwitchToDefaultLayout: EventEmitter<void> = ...

    Emitted when the user switches from "Save as New Named View" to "Personal Default Layout" so the host can exit its new-view flow (#6037).

    TimelineDateField: string = ''
    TimelineGrouping: "none" | "day" | "week" | "month" | "quarter" | "year" = 'month'
    TimelineOrientation: "vertical" | "horizontal" = 'vertical'
    ViewDescription: string = ''
    ViewName: string = ''
    WhereClause: string = ''
    "ɵdir": unknown
    "ɵfac": ɵɵFactoryDeclaration<BaseAngularComponent, never>

    Accessors

    • get CanEditCustomSql(): boolean

      Check if the current user can create or modify a custom SQL WHERE clause on this view. Server-side validation (MJUserViewEntityServer.validateCustomWhereClauseAuthorization) restricts CustomWhereClause to Owner-type administrators (failing closed when user/Type is missing) because raw SQL bypasses client-clause screening (#6037).

      Returns boolean

    • get ProviderToUse(): IMetadataProvider

      Returns either the default Metadata provider or the one specified in the Provider property, if it was specified

      Returns IMetadataProvider

    • get RunQueryToUse(): IRunQueryProvider

      Returns either the default RunQuery provider or the one specified in the Provider property, if it was specified

      Returns IRunQueryProvider

    • get RunViewToUse(): IRunViewProvider

      Returns either the default RunView provider or the one specified in the Provider property, if it was specified

      Returns IRunViewProvider

    Methods

    • A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

      Parameters

      • changes: { [propName: string]: SimpleChange<any> }

        The changed properties.

      Returns void

    • Handle toggling the one-way Custom SQL WHERE Override checkbox. Non-Owner editors may turn an existing override OFF (enabled === false) to revert a view to Smart Filter or Rule Builder, matching MJUserViewEntityServer, while turning it ON requires CanEditCustomSql (#6037).

      Parameters

      • enabled: boolean

      Returns void

    • Set the active tab

      Parameters

      • tab:
            | "columns"
            | "aggregates"
            | "sorting"
            | "filters"
            | "properties"
            | "settings"
            | "display"

      Returns void