Define custom layout per project

Forge
, , ,
1

Hello, I want to define a custom layout per project in jira to display the subtasks created in a panel, so I have defined a button where I can add other columns in the subtasks displayed in the panel .But the problem is that when I select a column from the form and click on the save button nothing changes in the display, here is the code:

import ForgeUI, { render, ProjectSettingsPage, Fragment, Text, Table, Head, Cell, Row, Link, Button, Select, Option, Form, useState, useEffect, useProductContext, IssuePanel, ModalDialog } from '@forge/ui';
import api, { route, storage } from '@forge/api';

// Fetch child issues by issue key
const fetchChildIssues = async (issueKey) => {
  console.log('Fetching child issues for:', issueKey); // Log pour vérifier l'issueKey
  const response = await api.asApp().requestJira(route`/rest/api/3/search?jql=parent=${issueKey}`);
  if (!response.ok) {
    const errorMessage = await response.text();
    console.error('Error fetching child issues:', errorMessage);
    throw new Error('Failed to fetch child issues');
  }
  const data = await response.json();
  console.log('Fetched child issues:', data.issues); // Log pour vérifier les données récupérées
  return data.issues || [];
};



// SubtaskPanel component
const SubtaskPanel = () => {
  const { platformContext: { issueKey } } = useProductContext();
  const [subtasks, setSubtasks] = useState([]);
  const [layout, setLayout] = useState(['Key', 'Summary', 'Assignee']); // Default columns
  const [showPanel, setShowPanel] = useState(true); // State to toggle panel visibility
  const [showErrorModal, setShowErrorModal] = useState(false);
  const [showForm, setShowForm] = useState(false); // State to toggle form visibility

  useEffect(() => {
    
      if (!issueKey) {
        console.error('No issueKey found in context.');
        return;
      }
  
      try {
        const subtasks = fetchChildIssues(issueKey);
        setSubtasks(subtasks);
      } catch (error) {
        console.error('Error loading panel data:', error);
      }
  
  
 
  }, [issueKey]);
  

  
  const onSubmit = async (formData) => {
    const selectedColumns = formData.additionalColumns;
    console.log('Selected columns:', selectedColumns); // Log pour vérifier les colonnes sélectionnées
  
    // Combine the default layout with the selected columns
    const updatedLayout = [...new Set([...layout, ...selectedColumns])]; // Combine and remove duplicates
  
    setLayout(updatedLayout); // Update table with new columns
    
    // Re-fetch the subtasks to refresh the table with the new layout
    const subtasks = await fetchChildIssues(issueKey);
    setSubtasks(subtasks);

    setShowForm(false); // Hide the form after saving
};

  
  
  

  return (
    <Fragment>
      <Button 
        text={showPanel ? "Hide Subtasks Panel" : "Show Subtasks Panel"} 
        onClick={() => setShowPanel(!showPanel)} 
      />
      
      {showPanel && (
        <Fragment>
          <Button 
            text={showForm ? "Cancel" : "Add Columns"} 
            onClick={() => setShowForm(!showForm)} 
          />

          {showForm && (
            <Form onSubmit={onSubmit} submitButtonText="Save & Update Table">
             <Select label="Additional Columns to Display" isMultiple name="additionalColumns">
            <Option label="Status" value="Status" defaultSelected={layout.includes('Status')} />
            <Option label="Priority" value="Priority" defaultSelected={layout.includes('Priority')} />
           <Option label="Created" value="Created" defaultSelected={layout.includes('Created')} />
           </Select>

            </Form>
          )}

          <Text content="Subtasks" />
          <Table>
            <Head>
              {layout.includes('Key') && <Cell><Text content="Key" /></Cell>}
              {layout.includes('Summary') && <Cell><Text content="Summary" /></Cell>}
              {layout.includes('Assignee') && <Cell><Text content="Assignee" /></Cell>}
              {layout.includes('Status') && <Cell><Text content="Status" /></Cell>}
              {layout.includes('Priority') && <Cell><Text content="Priority" /></Cell>}
              {layout.includes('Created') && <Cell><Text content="Created" /></Cell>}
            </Head>
            {subtasks.map(subtask => (
              <Row key={subtask.id}>
                {layout.includes('Key') && (
                  <Cell>
                    <Text>
                      <Link href={`/browse/${subtask.key}`}>{subtask.key}</Link>
                    </Text>
                  </Cell>
                )}
                {layout.includes('Summary') && <Cell><Text content={subtask.fields.summary} /></Cell>}
                {layout.includes('Status') && <Cell><Text content={subtask.fields.status.name} /></Cell>}
                {layout.includes('Assignee') && <Cell><Text content={subtask.fields.assignee ? subtask.fields.assignee.displayName : 'Unassigned'} /></Cell>}
                {layout.includes('Priority') && <Cell><Text content={subtask.fields.priority ? subtask.fields.priority.name : 'N/A'} /></Cell>}
                {layout.includes('Created') && <Cell><Text content={new Date(subtask.fields.created).toLocaleString()} /></Cell>}
              </Row>
            ))}
          </Table>
        </Fragment>
      )}
      
      {showErrorModal && (
        <ModalDialog header="Error" onClose={() => setShowErrorModal(false)}>
          <Text content='Le type de problème "Task" ne peut pas avoir de sous-tâches.' />
          <Button text="Close" onClick={() => setShowErrorModal(false)} />
        </ModalDialog>
      )}
    </Fragment>
  );
};



export const panelFunction = render(<IssuePanel><SubtaskPanel /></IssuePanel>);