Skip to content

refactor: Update styles for workingDocsTable and typea modules #135

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 16, 2024
Merged

refactor: Update styles for workingDocsTable and typea modules #135

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
147 changes: 84 additions & 63 deletions components/ActionItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useEffect, useRef } from 'react';
import styles from '../styles/typea.module.css';
import SelectNames from '../components/SelectNames'
import SelectNames from '../components/SelectNames';

const formatDate = (dateString: any) => {
if (!dateString) return "";
Expand All @@ -18,67 +19,87 @@ const parseDate = (dateString: any) => {
return `${year}-${month.toString().padStart(2, '0')}-${day.padStart(2, '0')}`;
};

const ActionItem = ({ item, itemIndex, handleUpdate, onRemove, agendaIndex, type }: any) => (
const ActionItem = ({ item, itemIndex, handleUpdate, onRemove, agendaIndex, type }: any) => {
const actionRef = useRef<HTMLTextAreaElement>(null);

// Function to adjust height of the textarea
const adjustTextareaHeight = (textarea: HTMLTextAreaElement | null) => {
if (textarea) {
textarea.style.height = 'auto'; // Reset height
textarea.style.height = `${textarea.scrollHeight}px`; // Set to scrollHeight
}
};

// Auto-resize when content changes
useEffect(() => {
adjustTextareaHeight(actionRef.current);
}, [item.text]);

return (
<div key={itemIndex} className={styles['action-item']}>
<div className={styles['agenda-title']}>
<label className={styles['form-label']}>
Action item {itemIndex+1}
</label>
<input
className={styles['form-input']}
type="text"
placeholder="Action Item"
value={item.text || ""}
onChange={(e) => handleUpdate('text', e.target.value)}
autoComplete="off"
/>
</div>
<div className={styles['row-flex-space-between']}>
<div className={styles['row-flex-start']}>
<div className={styles['action-assignee-column-flex']}>
<label className={styles['form-label']}>
Assignee
</label>
<SelectNames
onSelect={(selectedNames) => handleUpdate('assignee', selectedNames)}
initialValue={item.assignee}
/>
</div>
<div className={styles['column-flex']}>
<label className={styles['form-label']}>
Due Date
</label>
<input
className={styles['form-input']}
type="date"
placeholder="Due Date"
value={parseDate(item.dueDate || "")}
onChange={(e) => handleUpdate('dueDate', formatDate(e.target.value))}
/>
</div>
<div className={styles['column-flex']}>
<label className={styles['form-label']}>
Status
</label>
<select
className={styles['form-select']}
value={item.status}
onChange={(e) => handleUpdate('status', e.target.value)}
>
<option value="todo">To do</option>
<option value="in progress">In Progress</option>
<option value="done">Done</option>
<option value="cancelled">Cancelled</option>
</select>
</div>
</div>
<div>
<button type="button" className={styles['remove-button']} onClick={() => onRemove(type, agendaIndex, itemIndex)}>
Remove
</button>
</div>
</div>
</div>
);
<div className={styles['agenda-title']}>
<label className={styles['form-label']}>
Action item {itemIndex + 1}
</label>
<textarea
ref={actionRef}
className={styles['form-input']}
placeholder="Action Item"
value={item.text || ""}
onChange={(e) => {
handleUpdate('text', e.target.value);
adjustTextareaHeight(actionRef.current);
}}
autoComplete="off"
/>
</div>
<div className={styles['row-flex-space-between']}>
<div className={styles['row-flex-start']}>
<div className={styles['action-assignee-column-flex']}>
<label className={styles['form-label']}>
Assignee
</label>
<SelectNames
onSelect={(selectedNames) => handleUpdate('assignee', selectedNames)}
initialValue={item.assignee}
/>
</div>
<div className={styles['column-flex']}>
<label className={styles['form-label']}>
Due Date
</label>
<input
className={styles['form-select']}
type="date"
placeholder="Due Date"
value={parseDate(item.dueDate || "")}
onChange={(e) => handleUpdate('dueDate', formatDate(e.target.value))}
/>
</div>
<div className={styles['column-flex']}>
<label className={styles['form-label']}>
Status
</label>
<select
className={styles['form-select']}
value={item.status}
onChange={(e) => handleUpdate('status', e.target.value)}
>
<option value="todo">To do</option>
<option value="in progress">In Progress</option>
<option value="done">Done</option>
<option value="cancelled">Cancelled</option>
</select>
</div>
</div>
<div>
<button type="button" className={styles['remove-button']} onClick={() => onRemove(type, agendaIndex, itemIndex)}>
Remove
</button>
</div>
</div>
</div>
);
};

export default ActionItem;
export default ActionItem;
171 changes: 101 additions & 70 deletions components/DecisionItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,74 +1,105 @@
import { useEffect, useRef } from 'react';
import styles from '../styles/typea.module.css';

const DecisionItem = ({ item, itemIndex, handleUpdate, onRemove, agendaIndex, type }: any) => (
const DecisionItem = ({ item, itemIndex, handleUpdate, onRemove, agendaIndex, type }: any) => {
const decisionRef = useRef<HTMLTextAreaElement>(null);
const rationaleRef = useRef<HTMLTextAreaElement>(null);
const opposingRef = useRef<HTMLTextAreaElement>(null);

// Function to adjust height of the textarea
const adjustTextareaHeight = (textarea: HTMLTextAreaElement | null) => {
if (textarea) {
textarea.style.height = 'auto'; // Reset height
textarea.style.height = `${textarea.scrollHeight}px`; // Set to scrollHeight
}
};

// Auto-resize when content changes
useEffect(() => {
adjustTextareaHeight(decisionRef.current);
adjustTextareaHeight(rationaleRef.current);
adjustTextareaHeight(opposingRef.current);
}, [item.decision, item.rationale, item.opposing]);

return (
<div className={styles['decision-item']} key={itemIndex}>
<div className={styles['row-flex-start']}>
<div className={styles['links-column-flex']}>
<label className={styles['form-label']}>
Decision Item {itemIndex + 1}
</label>
<input
className={styles['form-input']}
type="text"
placeholder="Decision Item"
value={item.decision || ""}
onChange={(e) => handleUpdate('decision', e.target.value)}
autoComplete="off"
title="Please provide details on the decision that is being made"
/>
</div>
<div className={styles['column-flex']}>
<label className={styles['form-label']}>
Who does this decision affect?
</label>
<select
className={styles['form-select']}
value={item.effect}
onChange={(e) => handleUpdate('effect', e.target.value)}
title="Please select who this decision will affect"
>
<option value="" disabled>Please select</option>
<option value="affectsOnlyThisWorkgroup">Affects only this Workgroup</option>
<option value="mayAffectOtherPeople">May affect other people</option>
</select>
</div>
</div>
<div className={styles['column-flex']}>
<label className={styles['form-label']}>
Rationale (Optional)
</label>
<input
className={styles['form-input']}
type="text"
placeholder="Rationale"
value={item.rationale || ""}
onChange={(e) => handleUpdate('rationale', e.target.value)}
autoComplete="off"
title="Please provide the rationale for making this decision"
/>
</div>
<div className={styles['row-flex-start']}>
<div className={styles['links-column-flex']}>
<label className={styles['form-label']}>
Opposing arguments (Optional)
</label>
<input
className={styles['form-input']}
type="text"
placeholder="Opposing"
value={item.opposing || ""}
onChange={(e) => handleUpdate('opposing', e.target.value)}
autoComplete="off"
title="Please provide any opposing arguments"
/>
</div>
<div className={styles['column-flex']}>
<button type="button" className={styles['remove-button']} onClick={() => onRemove(type, agendaIndex, itemIndex)}>
Remove
</button>
</div>
</div>
</div>
);
<div className={styles['row-flex-start']}>
<div className={styles['links-column-flex']}>
<label className={styles['form-label']}>
Decision Item {itemIndex + 1}
</label>
<textarea
ref={decisionRef}
className={styles['form-input']}
placeholder="Decision Item"
value={item.decision || ""}
onChange={(e) => {
handleUpdate('decision', e.target.value);
adjustTextareaHeight(decisionRef.current);
}}
autoComplete="off"
title="Please provide details on the decision that is being made"
/>
</div>
<div className={styles['column-flex']}>
<label className={styles['form-label']}>
Who does this decision affect?
</label>
<select
className={styles['form-select']}
value={item.effect}
onChange={(e) => handleUpdate('effect', e.target.value)}
title="Please select who this decision will affect"
>
<option value="" disabled>Please select</option>
<option value="affectsOnlyThisWorkgroup">Affects only this Workgroup</option>
<option value="mayAffectOtherPeople">May affect other people</option>
</select>
</div>
</div>
<div className={styles['column-flex']}>
<label className={styles['form-label']}>
Rationale (Optional)
</label>
<textarea
ref={rationaleRef}
className={styles['form-input']}
placeholder="Rationale"
value={item.rationale || ""}
onChange={(e) => {
handleUpdate('rationale', e.target.value);
adjustTextareaHeight(rationaleRef.current);
}}
autoComplete="off"
title="Please provide the rationale for making this decision"
/>
</div>
<div className={styles['row-flex-start']}>
<div className={styles['links-column-flex']}>
<label className={styles['form-label']}>
Opposing arguments (Optional)
</label>
<textarea
ref={opposingRef}
className={styles['form-input']}
placeholder="Opposing"
value={item.opposing || ""}
onChange={(e) => {
handleUpdate('opposing', e.target.value);
adjustTextareaHeight(opposingRef.current);
}}
autoComplete="off"
title="Please provide any opposing arguments"
/>
</div>
<div className={styles['column-flex']}>
<button type="button" className={styles['remove-button']} onClick={() => onRemove(type, agendaIndex, itemIndex)}>
Remove
</button>
</div>
</div>
</div>
);
};

export default DecisionItem;
export default DecisionItem;
Loading