mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2025-11-14 16:51:33 +10:00
implement functionality to hide/show individual items
This commit is contained in:
Amruth Pillai
@ -7,6 +7,7 @@ import AppContext from '../../../context/AppContext';
|
||||
import Checkbox from '../../../shared/Checkbox';
|
||||
import TextArea from '../../../shared/TextArea';
|
||||
import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
|
||||
import ItemActions from '../../../shared/ItemActions';
|
||||
|
||||
const AwardsTab = ({ data, onChange }) => {
|
||||
const context = useContext(AppContext);
|
||||
@ -53,6 +54,7 @@ const AddItem = ({ dispatch }) => {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const [item, setItem] = useState({
|
||||
id: uuidv4(),
|
||||
enable: true,
|
||||
title: '',
|
||||
subtitle: '',
|
||||
description: '',
|
||||
@ -67,6 +69,7 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
setItem({
|
||||
id: uuidv4(),
|
||||
enable: true,
|
||||
title: '',
|
||||
subtitle: '',
|
||||
description: '',
|
||||
@ -162,44 +165,18 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
onChange={v => onChange(`${identifier}.description`, v)}
|
||||
/>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => deleteItem(dispatch, 'awards', item)}
|
||||
className="bg-red-600 hover:bg-red-700 text-white text-sm font-medium py-2 px-5 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons mr-2 font-bold text-base">delete</i>
|
||||
<span className="text-sm">Delete</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className="flex">
|
||||
{!first && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => moveItemUp(dispatch, 'awards', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded mr-2"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons font-bold text-base">arrow_upward</i>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{!last && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => moveItemDown(dispatch, 'awards', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons font-bold text-base">arrow_downward</i>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<ItemActions
|
||||
item={item}
|
||||
onChange={onChange}
|
||||
type="awards"
|
||||
identifier={identifier}
|
||||
dispatch={dispatch}
|
||||
deleteItem={deleteItem}
|
||||
first={first}
|
||||
moveItemUp={moveItemUp}
|
||||
last={last}
|
||||
moveItemDown={moveItemDown}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -7,6 +7,7 @@ import AppContext from '../../../context/AppContext';
|
||||
import Checkbox from '../../../shared/Checkbox';
|
||||
import TextArea from '../../../shared/TextArea';
|
||||
import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
|
||||
import ItemActions from '../../../shared/ItemActions';
|
||||
|
||||
const CertificationsTab = ({ data, onChange }) => {
|
||||
const context = useContext(AppContext);
|
||||
@ -53,6 +54,7 @@ const AddItem = ({ dispatch }) => {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const [item, setItem] = useState({
|
||||
id: uuidv4(),
|
||||
enable: true,
|
||||
title: '',
|
||||
subtitle: '',
|
||||
description: '',
|
||||
@ -67,6 +69,7 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
setItem({
|
||||
id: uuidv4(),
|
||||
enable: true,
|
||||
title: '',
|
||||
subtitle: '',
|
||||
description: '',
|
||||
@ -162,44 +165,18 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
onChange={v => onChange(`${identifier}.description`, v)}
|
||||
/>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => deleteItem(dispatch, 'certifications', item)}
|
||||
className="bg-red-600 hover:bg-red-700 text-white text-sm font-medium py-2 px-5 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons mr-2 font-bold text-base">delete</i>
|
||||
<span className="text-sm">Delete</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className="flex">
|
||||
{!first && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => moveItemUp(dispatch, 'certifications', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded mr-2"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons font-bold text-base">arrow_upward</i>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{!last && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => moveItemDown(dispatch, 'certifications', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons font-bold text-base">arrow_downward</i>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<ItemActions
|
||||
item={item}
|
||||
onChange={onChange}
|
||||
type="certifications"
|
||||
identifier={identifier}
|
||||
dispatch={dispatch}
|
||||
deleteItem={deleteItem}
|
||||
first={first}
|
||||
moveItemUp={moveItemUp}
|
||||
last={last}
|
||||
moveItemDown={moveItemDown}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -7,6 +7,7 @@ import TextArea from '../../../shared/TextArea';
|
||||
import AppContext from '../../../context/AppContext';
|
||||
import Checkbox from '../../../shared/Checkbox';
|
||||
import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
|
||||
import ItemActions from '../../../shared/ItemActions';
|
||||
|
||||
const EducationTab = ({ data, onChange }) => {
|
||||
const context = useContext(AppContext);
|
||||
@ -53,6 +54,7 @@ const AddItem = ({ dispatch }) => {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const [item, setItem] = useState({
|
||||
id: uuidv4(),
|
||||
enable: true,
|
||||
name: '',
|
||||
major: '',
|
||||
start: '',
|
||||
@ -70,6 +72,7 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
setItem({
|
||||
id: uuidv4(),
|
||||
enable: true,
|
||||
title: '',
|
||||
role: '',
|
||||
start: '',
|
||||
@ -224,44 +227,18 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
onChange={v => onChange(`${identifier}.description`, v)}
|
||||
/>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => deleteItem(dispatch, 'education', item)}
|
||||
className="bg-red-600 hover:bg-red-700 text-white text-sm font-medium py-2 px-5 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons mr-2 font-bold text-base">delete</i>
|
||||
<span className="text-sm">Delete</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className="flex">
|
||||
{!first && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => moveItemUp(dispatch, 'education', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded mr-2"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons font-bold text-base">arrow_upward</i>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{!last && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => moveItemDown(dispatch, 'education', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons font-bold text-base">arrow_downward</i>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<ItemActions
|
||||
item={item}
|
||||
onChange={onChange}
|
||||
type="education"
|
||||
identifier={identifier}
|
||||
dispatch={dispatch}
|
||||
deleteItem={deleteItem}
|
||||
first={first}
|
||||
moveItemUp={moveItemUp}
|
||||
last={last}
|
||||
moveItemDown={moveItemDown}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -6,6 +6,7 @@ import TextField from '../../../shared/TextField';
|
||||
import AppContext from '../../../context/AppContext';
|
||||
import Checkbox from '../../../shared/Checkbox';
|
||||
import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
|
||||
import ItemActions from '../../../shared/ItemActions';
|
||||
|
||||
const ExtrasTab = ({ data, onChange }) => {
|
||||
const context = useContext(AppContext);
|
||||
@ -52,6 +53,7 @@ const AddItem = ({ dispatch }) => {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const [item, setItem] = useState({
|
||||
id: uuidv4(),
|
||||
enable: true,
|
||||
key: '',
|
||||
value: '',
|
||||
});
|
||||
@ -65,6 +67,7 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
setItem({
|
||||
id: uuidv4(),
|
||||
enable: true,
|
||||
key: '',
|
||||
value: '',
|
||||
});
|
||||
@ -145,44 +148,18 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
onChange={v => onChange(`${identifier}.value`, v)}
|
||||
/>
|
||||
|
||||
<div className="mt-6 flex justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => deleteItem(dispatch, 'extras', item)}
|
||||
className="bg-red-600 hover:bg-red-700 text-white text-sm font-medium py-2 px-5 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons mr-2 font-bold text-base">delete</i>
|
||||
<span className="text-sm">Delete</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className="flex">
|
||||
{!first && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => moveItemUp(dispatch, 'extras', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded mr-2"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons font-bold text-base">arrow_upward</i>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{!last && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => moveItemDown(dispatch, 'extras', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons font-bold text-base">arrow_downward</i>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<ItemActions
|
||||
item={item}
|
||||
onChange={onChange}
|
||||
type="extras"
|
||||
identifier={identifier}
|
||||
dispatch={dispatch}
|
||||
deleteItem={deleteItem}
|
||||
first={first}
|
||||
moveItemUp={moveItemUp}
|
||||
last={last}
|
||||
moveItemDown={moveItemDown}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -7,6 +7,7 @@ import AppContext from '../../../context/AppContext';
|
||||
import Checkbox from '../../../shared/Checkbox';
|
||||
import Counter from '../../../shared/Counter';
|
||||
import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
|
||||
import ItemActions from '../../../shared/ItemActions';
|
||||
|
||||
const LanguagesTab = ({ data, onChange }) => {
|
||||
const context = useContext(AppContext);
|
||||
@ -73,6 +74,7 @@ const AddItem = ({ dispatch }) => {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const [item, setItem] = useState({
|
||||
id: uuidv4(),
|
||||
enable: true,
|
||||
key: '',
|
||||
value: 1,
|
||||
});
|
||||
@ -86,6 +88,7 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
setItem({
|
||||
id: uuidv4(),
|
||||
enable: true,
|
||||
key: '',
|
||||
value: 1,
|
||||
});
|
||||
@ -166,44 +169,18 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
onIncrement={() => item.value < 5 && onChange(`${identifier}.value`, item.value + 1)}
|
||||
/>
|
||||
|
||||
<div className="mt-6 flex justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => deleteItem(dispatch, 'languages', item)}
|
||||
className="bg-red-600 hover:bg-red-700 text-white text-sm font-medium py-2 px-5 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons mr-2 font-bold text-base">delete</i>
|
||||
<span className="text-sm">Delete</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className="flex">
|
||||
{!first && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => moveItemUp(dispatch, 'languages', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded mr-2"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons font-bold text-base">arrow_upward</i>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{!last && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => moveItemDown(dispatch, 'languages', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons font-bold text-base">arrow_downward</i>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<ItemActions
|
||||
item={item}
|
||||
onChange={onChange}
|
||||
type="languages"
|
||||
identifier={identifier}
|
||||
dispatch={dispatch}
|
||||
deleteItem={deleteItem}
|
||||
first={first}
|
||||
moveItemUp={moveItemUp}
|
||||
last={last}
|
||||
moveItemDown={moveItemDown}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -7,6 +7,7 @@ import TextArea from '../../../shared/TextArea';
|
||||
import AppContext from '../../../context/AppContext';
|
||||
import Checkbox from '../../../shared/Checkbox';
|
||||
import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
|
||||
import ItemActions from '../../../shared/ItemActions';
|
||||
|
||||
const ReferencesTab = ({ data, onChange }) => {
|
||||
const context = useContext(AppContext);
|
||||
@ -73,6 +74,7 @@ const AddItem = ({ dispatch }) => {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const [item, setItem] = useState({
|
||||
id: uuidv4(),
|
||||
enable: true,
|
||||
name: '',
|
||||
position: '',
|
||||
phone: '',
|
||||
@ -89,6 +91,7 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
setItem({
|
||||
id: uuidv4(),
|
||||
enable: true,
|
||||
name: '',
|
||||
position: '',
|
||||
phone: '',
|
||||
@ -222,44 +225,18 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
onChange={v => onChange(`${identifier}.description`, v)}
|
||||
/>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => deleteItem(dispatch, 'references', item)}
|
||||
className="bg-red-600 hover:bg-red-700 text-white text-sm font-medium py-2 px-5 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons mr-2 font-bold text-base">delete</i>
|
||||
<span className="text-sm">Delete</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className="flex">
|
||||
{!first && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => moveItemUp(dispatch, 'references', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded mr-2"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons font-bold text-base">arrow_upward</i>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{!last && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => moveItemDown(dispatch, 'references', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons font-bold text-base">arrow_downward</i>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<ItemActions
|
||||
item={item}
|
||||
onChange={onChange}
|
||||
type="references"
|
||||
identifier={identifier}
|
||||
dispatch={dispatch}
|
||||
deleteItem={deleteItem}
|
||||
first={first}
|
||||
moveItemUp={moveItemUp}
|
||||
last={last}
|
||||
moveItemDown={moveItemDown}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -7,6 +7,7 @@ import TextArea from '../../../shared/TextArea';
|
||||
import AppContext from '../../../context/AppContext';
|
||||
import Checkbox from '../../../shared/Checkbox';
|
||||
import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
|
||||
import ItemActions from '../../../shared/ItemActions';
|
||||
|
||||
const WorkTab = ({ data, onChange }) => {
|
||||
const context = useContext(AppContext);
|
||||
@ -50,6 +51,7 @@ const AddItem = ({ dispatch }) => {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const [item, setItem] = useState({
|
||||
id: uuidv4(),
|
||||
enable: true,
|
||||
title: '',
|
||||
role: '',
|
||||
start: '',
|
||||
@ -66,6 +68,7 @@ const AddItem = ({ dispatch }) => {
|
||||
|
||||
setItem({
|
||||
id: uuidv4(),
|
||||
enable: true,
|
||||
title: '',
|
||||
role: '',
|
||||
start: '',
|
||||
@ -155,7 +158,7 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
className="flex justify-between items-center cursor-pointer"
|
||||
onClick={() => setOpen(!isOpen)}
|
||||
>
|
||||
<h6 className="text-sm font-medium">{item.title}</h6>
|
||||
<h6 className="ml-2 text-sm font-medium">{item.title}</h6>
|
||||
<i className="material-icons">{isOpen ? 'expand_less' : 'expand_more'}</i>
|
||||
</div>
|
||||
|
||||
@ -203,44 +206,18 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
|
||||
onChange={v => onChange(`${identifier}.description`, v)}
|
||||
/>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => deleteItem(dispatch, 'work', item)}
|
||||
className="bg-red-600 hover:bg-red-700 text-white text-sm font-medium py-2 px-5 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons mr-2 font-bold text-base">delete</i>
|
||||
<span className="text-sm">Delete</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className="flex">
|
||||
{!first && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => moveItemUp(dispatch, 'work', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded mr-2"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons font-bold text-base">arrow_upward</i>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{!last && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => moveItemDown(dispatch, 'work', item)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<i className="material-icons font-bold text-base">arrow_downward</i>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<ItemActions
|
||||
item={item}
|
||||
onChange={onChange}
|
||||
type="work"
|
||||
identifier={identifier}
|
||||
dispatch={dispatch}
|
||||
deleteItem={deleteItem}
|
||||
first={first}
|
||||
moveItemUp={moveItemUp}
|
||||
last={last}
|
||||
moveItemDown={moveItemDown}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user