change version

README.md

@@ -0,0 +1,76 @@
+# Mini excel app
+## _Small application covering the basic functionality of Excel_
+
+The application is a SPA consisting of two screens
+- Dashboard (Create new table or open saved)
+- Excel (Excel table editing page)
+
+
+Technologies used in this project:
+- Typescript
+- ES6+
+- SCSS
+- Redux
+- Webpack 5
+- Jest
+
+
+## Implemented functionality
+- Resize table rows/columns
+- Navigation and selection of cells using the function keys (Ctrl, Shift, Arrows), or using the mouse
+- Mathematical calculations in a formula
+- Ability to add/remove columns via context menu (right mouse button)
+- Changing cell style: size, font, alignment
+- Saving to LocalStorage, also implemented the ability to delete certain tables
+
+## Installation
+
+Requires [Node.js](https://nodejs.org/) v16+ to run.
+
+Install the dependencies and devDependencies and start the server.
+
+```sh
+npm install
+```
+
+For development run the command to create local webpack dev server
+
+```sh
+npm run start
+```
+
+For build use  
+```sh
+npm run build
+```
+
+For deploy edit deploy config file `configs/deploy/sftp-configs.js`
+```sh
+module.exports = {
+  config: {
+    host: 'host',
+    port: 'port',
+    username: 'username',
+    password: 'password',
+  },
+  directory: 'path to directory'
+};
+```
+and run 
+```sh
+npm run deploy
+```
+
+Testing
+
+Run jest test by
+```sh
+npm run test
+```
+or
+```sh
+npm run test-watch
+```
+## License
+
+MIT

configs/deploy/sftp-config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  config: {
+    host: 'host',
+    port: 'port',
+    username: 'username',
+    password: 'password',
+  },
+  directory: 'directory'
+};
+

deploy-config.js

@@ -3,9 +3,9 @@
 const path = require('path');
 const SftpClient = require('ssh2-sftp-client');
 const dotenv = require('dotenv');
-const { config } = require('./configs/deploy/sftp-config');
+const { config, directory } = require('./configs/deploy/sftp-config');
 
-const REMOTE_DIRECTORY = '/var/www/mysite/excel';
+const REMOTE_DIRECTORY = directory;
 const LOCAL_DIRECTORY = path.join(__dirname, 'dist');
 
 const dotenvPath = path.join(__dirname, '..', '.env');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "excel-course",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "index.js",
   "devDependencies": {
     "@babel/core": "^7.18.6",

src/components/table/SelectionManager.ts

@@ -190,7 +190,7 @@ export class SelectionManager {
     });
   }
 
-  getNeighbourCellBySide(side: 'left' | 'right' | 'down' | 'up', $cell = this.$currentSelectedCell): Dom | undefined {
+  getSiblingCellBySide(side: 'left' | 'right' | 'down' | 'up', $cell = this.$currentSelectedCell): Dom | undefined {
     if (!$cell?.isExist) {
       console.error('Нет стартовой ячейки');
       return;
@@ -235,7 +235,7 @@ export class SelectionManager {
     const $current = this.$currentSelectedCell || this.rootTable.focusManager.$currentFocusedCell || this.$currentSelectedCell?.[0];
     if (!$current?.isExist) return;
 
-    const $movingCell = this.getNeighbourCellBySide(side, $current);
+    const $movingCell = this.getSiblingCellBySide(side, $current);
     if (!$movingCell?.isExist || !$movingCell) {
       console.error('Ошибка, не найдена ячейка для перемещения');
       return;
@@ -295,9 +295,16 @@ export class SelectionManager {
         this.$currentSelectedCell && this.rootTable.focusManager.focusCell(this.$currentSelectedCell);
       }
 
+      if (event.key === 'Enter' || event.key === 'Tab') {
+        let side;
+
+        if (event.key === 'Enter' && !event.shiftKey) side = 'down';
+        if (event.key === 'Tab') side = event.shiftKey ? 'left' : 'right';
+
+        side && this.moveSelectionTo(side);
+      }
       return;
     }
-
     event.preventDefault();
 
     let $cell: Dom | undefined;
@@ -344,7 +351,7 @@ export class SelectionManager {
 
     if (!side) return;
 
-    $cell = this.getNeighbourCellBySide(side, this.$currentSelectedCell || this.$firstSelectedCell);
+    $cell = this.getSiblingCellBySide(side, this.$currentSelectedCell || this.$firstSelectedCell);
 
     if (event.ctrlKey && $cell?.isExist) {
       this.addCellToSelection($cell);
@@ -362,7 +369,7 @@ export class SelectionManager {
       return;
     }
 
-    $cell = this.getNeighbourCellBySide(side, this.$firstSelectedCell || this.$currentSelectedCell);
+    $cell = this.getSiblingCellBySide(side, this.$firstSelectedCell || this.$currentSelectedCell);
     if (!$cell || !$cell.isExist) return;
 
     this.selectCell($cell);

src/components/table/Table.ts

@@ -50,8 +50,16 @@ export class Table extends ExcelComponent {
 
     this.initTable();
 
-    this.$onEventFromObserver('formula:input', this.updateTextInCell);
-    // this.$onEventFromObserver('formula:enter-press', () => this.selection.$currentCell.focus());
+    this.$onEventFromObserver('formula:input', (text) => {
+      if (!this.focusManager.$currentFocusedCell) this.updateTextInCell(text, this.selectionManager.$currentSelectedCell, true);
+      else this.updateTextInCell(text, this.focusManager.$currentFocusedCell, true);
+    });
+
+    this.$onEventFromObserver('formula:enter-press', () => {
+      this.focusManager.focusCell(this.selectionManager.$currentSelectedCell);
+      this.updateTextInCell(this.selectionManager.$currentSelectedCell?.text, this.focusManager.$currentFocusedCell, false);
+    });
+
     this.$onEventFromObserver('toolbar:applyStyle', this.updateCurrentStyles);
     this.$onEventFromObserver('toolbar:add-row', this.addNewRowHandler);
     this.$onEventFromObserver('toolbar:remove-row', this.removeRowHandler);