Custom HTML Block - Project list dropdown

ERPNext
, , ,
1

Hi,

I want to add project dropdown, 2 date fields in workspace.

For eg:

Project : Select projet( it shows list of projects, when i click)

exepected start date: (it only shows the exepected start date of particular project based on which project, i selected in project dropdown).

expeted end date : (it only shows the exepected end date of particular project based on which project, i selected in project dropdown).

here Im added some code. Its shows the fields but not working.

HTML CODE:

Project: Select Project 
<div>
    <label for="expectedStartDate">Expected Start Date:</label>
    <input type="text" id="expectedStartDate" readonly>
</div>

<div>
    <label for="expectedEndDate">Expected End Date:</label>
    <input type="text" id="expectedEndDate" readonly>
</div>


JAVASCRIPT:

// Use root_element to ensure proper scoping within ERPNext
const projectContainer = root_element.querySelector(‘#project-container’);

// Function to fetch projects from ERPNext
async function fetchProjects() {
try {
const response = await fetch(‘/api/resource/Project’);

    if (!response.ok) {
        console.error(`Error fetching projects: ${response.status} ${response.statusText}`);
        return;
    }

    const data = await response.json();
    console.log('Fetched projects:', data); // Log the fetched data

    const projects = data.data;

    const projectDropdown = projectContainer.querySelector('#projectDropdown');
    projectDropdown.innerHTML = '<option value="">Select Project</option>'; // Clear previous options

    projects.forEach(project => {
        const option = document.createElement('option');
        option.value = project.name; // Assuming project.name contains the project ID
        option.textContent = project.project_name; // Assuming project.project_name contains the project display name
        projectDropdown.appendChild(option);
    });
} catch (error) {
    console.error('Error fetching projects:', error);
}

}

// Function to update date fields based on selected project
async function updateDateFields(projectName) {
if (!projectName) {
projectContainer.querySelector(‘#expectedStartDate’).value = ‘’;
projectContainer.querySelector(‘#expectedEndDate’).value = ‘’;
return;
}

const response = await fetch(`/api/resource/Project/${projectName}`);
const project = await response.json();

projectContainer.querySelector('#expectedStartDate').value = project.data.expected_start_date || '';
projectContainer.querySelector('#expectedEndDate').value = project.data.expected_end_date || '';

}

// Event listener for dropdown change
projectContainer.querySelector(‘#projectDropdown’).addEventListener(‘change’, function() {
updateDateFields(this.value);
});

// Initialize the project dropdown on page load
document.addEventListener(‘DOMContentLoaded’, function () {
fetchProjects();
});

2

Any Solution ???

Thanks in Advance !!!