Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-14 16:51:33 +10:00
Code Issues Packages Projects Releases Wiki Activity

implement redordering of skills

Browse Source
This commit is contained in:
Amruth Pillai
2020-04-28 13:00:39 +05:30
parent 7b2e97b6b1
commit e2d9b00f7d
2 changed files with 25 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/LeftSidebar/LeftSidebar.js
View File

@ -30,7 +30,7 @@ const LeftSidebar = () => {
{ key: 'references', name: data.references.heading }, { key: 'references', name: data.references.heading },
{ key: 'extras', name: data.extras.heading }, { key: 'extras', name: data.extras.heading },
]; ];
const [currentTab, setCurrentTab] = useState(tabs[0].key); const [currentTab, setCurrentTab] = useState(tabs[6].key);
const onChange = (key, value) => { const onChange = (key, value) => {
dispatch({ dispatch({
type: 'on_input', type: 'on_input',

28
src/components/LeftSidebar/tabs/Skills.js
View File

@ -3,7 +3,7 @@ import React, { useState, useContext } from 'react';
import AppContext from '../../../context/AppContext'; import AppContext from '../../../context/AppContext';
import Checkbox from '../../../shared/Checkbox'; import Checkbox from '../../../shared/Checkbox';
import TextField from '../../../shared/TextField'; import TextField from '../../../shared/TextField';
import { addItem, deleteItem } from '../../../utils'; import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
import ItemHeading from '../../../shared/ItemHeading'; import ItemHeading from '../../../shared/ItemHeading';
const SkillsTab = ({ data, onChange }) => { const SkillsTab = ({ data, onChange }) => {
@ -92,18 +92,38 @@ const Item = ({ item, index, onChange, dispatch }) => {
const identifier = `data.skills.items[${index}]`; const identifier = `data.skills.items[${index}]`;
return ( return (
<div className="my-4 grid grid-cols-6 gap-4"> <div className="my-4 grid grid-cols-12">
<div className="col-span-5"> <div className="col-span-9">
<Form item={item} onChange={v => onChange(identifier, v)} /> <Form item={item} onChange={v => onChange(identifier, v)} />
</div> </div>
<button
type="button"
onClick={() => moveItemUp(dispatch, 'skills', item)}
className="col-span-1 text-gray-600 hover:text-red-600 text-sm font-medium"
>
<div className="flex justify-end items-center">
<i className="material-icons font-bold text-lg">arrow_upward</i>
</div>
</button>
<button
type="button"
onClick={() => moveItemDown(dispatch, 'skills', item)}
className="col-span-1 text-gray-600 hover:text-red-600 text-sm font-medium"
>
<div className="flex justify-end items-center">
<i className="material-icons font-bold text-lg">arrow_downward</i>
</div>
</button>
<button <button
type="button" type="button"
onClick={() => deleteItem(dispatch, 'skills', item)} onClick={() => deleteItem(dispatch, 'skills', item)}
className="col-span-1 text-gray-600 hover:text-red-600 text-sm font-medium" className="col-span-1 text-gray-600 hover:text-red-600 text-sm font-medium"
> >
<div className="flex justify-end items-center"> <div className="flex justify-end items-center">
<i className="material-icons font-bold text-lg pr-4">close</i> <i className="material-icons font-bold text-lg">close</i>
</div> </div>
</button> </button>
</div> </div>