diff --git a/config/specialists/traicie/TRAICIE_SELECTION_SPECIALIST/1.0.0.yaml b/config/specialists/traicie/TRAICIE_SELECTION_SPECIALIST/1.0.0.yaml
index 25b0079..6c4d323 100644
--- a/config/specialists/traicie/TRAICIE_SELECTION_SPECIALIST/1.0.0.yaml
+++ b/config/specialists/traicie/TRAICIE_SELECTION_SPECIALIST/1.0.0.yaml
@@ -41,17 +41,17 @@ configuration:
required: false
competency_details:
title:
- name: "title"
+ name: "Title"
description: "Competency Title"
type: "str"
required: true
description:
- name: "description"
+ name: "Description"
description: "Description (in context of the role) of the competency"
type: "text"
required: true
is_knockout:
- name: "Is Knockout"
+ name: "KO"
description: "Defines if the competency is a knock-out criterium"
type: "boolean"
required: true
diff --git a/eveai_app/templates/eveai_ordered_list_editor.html b/eveai_app/templates/eveai_ordered_list_editor.html
index d79f937..f8cb989 100644
--- a/eveai_app/templates/eveai_ordered_list_editor.html
+++ b/eveai_app/templates/eveai_ordered_list_editor.html
@@ -33,21 +33,47 @@ window.EveAI.OrderedListEditors = {
// Create column definitions from list type
const columns = this._createColumnsFromListType(listTypeConfig);
+ // Debug log for data and columns
+ console.log('Data for Tabulator:', data);
+ console.log('Columns for Tabulator:', columns);
+
+ // Debug log for column titles
+ console.log('Column titles:', columns.map(col => col.title || ''));
+
// Initialize Tabulator
try {
console.log('Creating Tabulator for', containerId);
const table = new Tabulator(container, {
data: data || [],
columns: columns,
- layout: "fitColumns",
+ layout: "fitColumns", // Changed to fitColumns to ensure columns display horizontally
movableRows: true,
- height: "400px",
+ {#rowHeader: {headerSort:false, resizable: false, minWidth:30, width:30, rowHandle:true, formatter:"handle"},#}
+ maxHeight: "50%", // Auto height to display all rows
+ placeholder: "No Data Available",
+ autoResize: false,
+ resizableColumnFit: true,
+ responsiveLayout: false,
+ tooltips: true, // Enable tooltips
+ tooltipsHeader: true,
+ selectable: false, // Disable row selection to prevent jumping
+ selectableRangeMode: "click", // Only select on click, not on drag
+ selectableRollingSelection: false, // Disable rolling selection
+ scrollToRowIfVisible: false, // Don't scroll to row even if it's already visible
+ scrollToRowPosition: "nearest",
...options
});
console.log('Tabulator created for', containerId);
container.classList.add('tabulator-initialized');
+ // Debug: Log table structure
+ console.log('Table structure:', {
+ tableElement: container,
+ tableData: table.getData(),
+ tableColumns: table.getColumnDefinitions()
+ });
+
// Add row button
const addRowBtn = document.createElement('button');
addRowBtn.className = 'btn btn-sm btn-primary mt-2';
@@ -56,21 +82,65 @@ window.EveAI.OrderedListEditors = {
const newRow = {};
// Create empty row with default values
Object.entries(listTypeConfig).forEach(([key, field]) => {
- newRow[key] = field.default || '';
+ if (field.type === 'boolean') {
+ newRow[key] = field.default === true;
+ } else {
+ newRow[key] = field.default !== undefined ? field.default : '';
+ }
});
table.addRow(newRow);
this._updateTextarea(containerId, table);
});
container.parentNode.insertBefore(addRowBtn, container.nextSibling);
+ // Add explode button for fullscreen mode
+ const explodeBtn = document.createElement('button');
+ explodeBtn.className = 'btn btn-sm btn-secondary mt-2 ms-2';
+ explodeBtn.innerHTML = 'fullscreen Expand';
+ explodeBtn.addEventListener('click', () => {
+ container.classList.toggle('fullscreen-mode');
+
+ // Update button text based on current state
+ if (container.classList.contains('fullscreen-mode')) {
+ explodeBtn.innerHTML = 'fullscreen_exit Collapse';
+ } else {
+ explodeBtn.innerHTML = 'fullscreen Expand';
+ }
+
+ // Redraw table to adjust to new size
+ table.redraw(true);
+ });
+ container.parentNode.insertBefore(explodeBtn, addRowBtn.nextSibling);
+
// Store instance
this.instances[containerId] = {
table: table,
textarea: document.getElementById(containerId.replace('-editor', ''))
};
- // Update textarea on data change
+ // Prevent scrolling when clicking on cells
+ container.addEventListener('click', function(e) {
+ // Prevent the default behavior which might cause scrolling
+ if (e.target.closest('.tabulator-cell')) {
+ e.preventDefault();
+ }
+ }, { passive: false });
+
+ // Update textarea on various events that change data
table.on("dataChanged", () => {
+ console.log("dataChanged event triggered");
+ this._updateTextarea(containerId, table);
+ });
+
+ // Listen for row movement
+ table.on("rowMoved", () => {
+ console.log("rowMoved event triggered");
+ this._updateTextarea(containerId, table);
+ });
+
+ // Listen for cell edits
+ table.on("cellEdited", () => {
+ console.log("cellEdited event triggered");
this._updateTextarea(containerId, table);
});
@@ -87,65 +157,147 @@ window.EveAI.OrderedListEditors = {
_updateTextarea: function(containerId, table) {
const instance = this.instances[containerId];
if (instance && instance.textarea) {
- instance.textarea.value = JSON.stringify(table.getData());
+ const data = table.getData();
+ console.log('Updating textarea with data:', data);
+ instance.textarea.value = JSON.stringify(data);
+ console.log('Textarea value updated:', instance.textarea.value);
+
+ // Trigger change event on textarea to ensure form validation recognizes the change
+ const event = new Event('change', { bubbles: true });
+ instance.textarea.dispatchEvent(event);
+
+ // Also trigger input event for any listeners that might be using that
+ const inputEvent = new Event('input', { bubbles: true });
+ instance.textarea.dispatchEvent(inputEvent);
+ } else {
+ console.error('Cannot update textarea: instance or textarea not found for', containerId);
}
},
_getListTypeConfig: function(listType) {
- // This would need to be implemented to fetch the list type configuration
- // Could be from a global variable set in the template or via an API call
- return window.listTypeConfigs && window.listTypeConfigs[listType];
+ // Try to get the list type configuration from window.listTypeConfigs
+ if (window.listTypeConfigs && window.listTypeConfigs[listType]) {
+ return window.listTypeConfigs[listType];
+ }
+
+ // If not found, log a warning and return a default configuration
+ console.warn(`List type configuration for ${listType} not found in window.listTypeConfigs. Using a default configuration.`);
+ return {
+ title: {
+ name: "Title",
+ description: "Title",
+ type: "str",
+ required: true
+ },
+ description: {
+ name: "Description",
+ description: "Description",
+ type: "text",
+ required: true
+ }
+ };
+ },
+
+ // Custom formatter for text columns to truncate text in normal mode
+ _truncateFormatter: function(cell, formatterParams, onRendered) {
+ const value = cell.getValue();
+ const maxLength = formatterParams.maxLength || 100;
+
+ if (value && value.length > maxLength) {
+ // Create a truncated version with "..." and show more indicator
+ const truncated = value.substring(0, maxLength) + "...";
+
+ // Return HTML with truncated text and a "show more" button
+ return `
+
${truncated}
+
+ more_horiz
+
+