diff --git a/src/App.js b/src/App.js index fadf7b0..7a48a79 100644 --- a/src/App.js +++ b/src/App.js @@ -4,17 +4,17 @@ import "react-datasheet/lib/react-datasheet.css"; import { specialChars } from "./helpers/specialCharectors.json"; import "./App.scss"; import TableConfigInput from "./components/TableConfigInput"; -import { thala } from "./helpers/exampleThalas.json"; +import { tala } from "./helpers/exampleTalas.json"; import NotesTable from "./components/NotesTable"; class App extends React.Component { state = { - title: "theen thanl", - raga: "abc", + title: "Teen Taal", + raga: "Raag Yaman", height: 15, - width: 20, - columnStart: 2, - hieghestColumn: 16, + width: 16, + columnStart: 9, + highestColumn: 16, tableCells: [], // format -> [[{key:k, value: val}, {key:k, value:val}], [{key:k, value:val}]] }; @@ -43,22 +43,22 @@ class App extends React.Component { this.setState({ tableCells: updatedTableCells }); }; - handleThalaChange = (e) => { + handleTalaChange = (e) => { const { title, raga, height, width, - hieghestColumn, + highestColumn, columnStart, - } = thala.find((thala) => thala.title === e.key); + } = tala.find((tala) => tala.title === e.key); this.setState({ title, raga, height, width, columnStart, - hieghestColumn, + highestColumn, }); }; @@ -75,7 +75,7 @@ class App extends React.Component { createTableCells = () => { // react-datasheet > to create a blank cell, set value to empty string. // for table creation [[{value: '1st row', key: '1st ele'}, ],[{value:'2nd row', key: 'second ele'}]] - const { height, width, columnStart, hieghestColumn } = this.state; + const { height, width, columnStart, highestColumn } = this.state; let colStart = parseInt(columnStart); const grid = []; @@ -91,7 +91,7 @@ class App extends React.Component { value: colStart, readOnly: true, }); - colStart = colStart >= hieghestColumn ? 1 : parseInt(colStart) + 1; + colStart = colStart >= highestColumn ? 1 : parseInt(colStart) + 1; } else { row.push({ key, @@ -145,7 +145,7 @@ class App extends React.Component { title, raga, columnStart, - hieghestColumn, + highestColumn, tableCells, } = this.state; return ( @@ -154,12 +154,12 @@ class App extends React.Component {
diff --git a/src/App.scss b/src/App.scss index 9d0459c..e437149 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1,17 +1,18 @@ @import '~antd/dist/antd.css'; .app { - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-around; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; } .notes-table { - margin-top: 50px; - margin-bottom: 50px; + margin-top: 50px; + margin-bottom: 50px; } .table-config { - margin-top: 50px; -} \ No newline at end of file + margin-top: 25px; + width: 60%; +} diff --git a/src/components/NoteTable.scss b/src/components/NoteTable.scss index b31ff92..da9dd4a 100644 --- a/src/components/NoteTable.scss +++ b/src/components/NoteTable.scss @@ -4,8 +4,6 @@ input { height: 100%; } - - } .ant-input { @@ -16,11 +14,13 @@ .note-table-component { .add-title-button { color: blue; + margin-bottom: 10px; } .spread-sheet-foot-buttons { display: flex; justify-content: space-between; + margin-top: 10px; } u { @@ -42,12 +42,10 @@ justify-content: space-between; // align-content: space-between; align-items: center; - } } @media print { - @page { margin: 0mm 0mm; padding: 0mm 0mm; @@ -65,7 +63,7 @@ table { visibility: visible; - -webkit-print-color-adjust: exact + -webkit-print-color-adjust: exact; } } @@ -86,4 +84,4 @@ background-color: #dddddd; color: rgb(95, 95, 95); border: 0.5px solid; -} \ No newline at end of file +} diff --git a/src/components/NotesTable.jsx b/src/components/NotesTable.jsx index 908ce77..c5f01b0 100644 --- a/src/components/NotesTable.jsx +++ b/src/components/NotesTable.jsx @@ -58,43 +58,10 @@ class NotesTable extends React.Component { handlePdfPrint = (e) => { window.print(); + }; - // For generating printed Document, But this is not much effiecient - // const doc = new jsPDF(); - // console.log(this.props.raga); - - // doc.text(20, 10, `${this.props.title || "title:"}`); + handleLocalSave = (e) => { - // autoTable(doc, { - // html: "table", - // theme: "grid", - // styles: { - // font: "DejaVuSans", - // }, - // bodyStyles: { - // overflow: "visible", - // halign: "center", - // valign: "bottom", - // cellPadding: 1, - // minCellHeight: 5, - // }, - // didParseCell: function (data) { - // const tdElement = data.cell.raw; - // if (tdElement.getElementsByTagName("div").length) { - // data.cell.styles.font = "OldSansBlackUnderline"; - // } - // }, - // willDrawCell: function (data) { - // if (data.row.index === 0) { - // doc.setFillColor(210, 210, 210); - // } else if (data.row.raw.length === 1) { - // doc.setFillColor(240, 240, 240); - // } - // }, - // }); - // doc.setFontSize(15); - // doc.text(120, 10, `${this.props.raga || "title:"}`); - // doc.save(`${this.props.title || "musicNotes"}.pdf`); }; getValueFromCell = (cell) => { @@ -107,7 +74,6 @@ class NotesTable extends React.Component { tableCells, title, handleAddNewRow, - raga, handleTableChange, } = this.props; return ( @@ -118,8 +84,7 @@ class NotesTable extends React.Component {
- insert a title + Add a custom row title
@@ -151,7 +116,14 @@ class NotesTable extends React.Component { type="primary" icon={} > - Save Pdf + Save as PDF + +
- +