Skip to content
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

Add basic jspreadsheet POC [SCI-11099] #7944

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
+86 −4
Open

Add basic jspreadsheet POC [SCI-11099] #7944

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
2 changes: 2 additions & 0 deletions app/javascript/packs/application.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import 'bootstrap';
require('bootstrap-select/js/bootstrap-select');
import '@vuepic/vue-datepicker/dist/main.css';
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
import "jsuites/dist/jsuites.css";
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Import in body of module; reorder to top import/first
Strings must use singlequote quotes

import "jspreadsheet/dist/jspreadsheet.css";
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Import in body of module; reorder to top import/first
Strings must use singlequote quotes


window.bwipjs = require('bwip-js');
window.Decimal = require('decimal.js');
Expand Down
8 changes: 8 additions & 0 deletions app/javascript/packs/application.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
@import "bootstrap-select/sass/bootstrap-select";
@import "ag-grid-community/styles/ag-grid.css";
@import "ag-grid-community/styles/ag-theme-alpine.css";


/// Must be relplaced with our icons
@import '~material-icons-font/sass/variables'; // mandatory and at first place
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer double-quoted strings

@import '~material-icons-font/sass/mixins'; // mandatory and after variables
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer double-quoted strings

$MaterialIcons_FontPath: "~material-icons-font/fonts"; // for CLI project we change font path to point into package fonts folder
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Name of variable MaterialIcons_FontPath should be written in all lowercase letters with hyphens instead of underscores

@import '~material-icons-font/sass/main'; // mandatory main material font definition
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer double-quoted strings

@import '~material-icons-font/sass/Regular'; // mandatory @font-face definition
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer double-quoted strings

44 changes: 40 additions & 4 deletions app/javascript/vue/shared/content/table.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,22 @@
@delete="showDeleteModal"
></MenuDropdown>
</div>
<Spreadsheet
ref="spreadsheet"
:license="license"
:tabs="true"
:toolbar="true"
:allowExport="true"
:onchange="update"
:oninsertrow="update"
:oninsertcolumn="update"
:ondeletecolumn="update"
:ondeleterow="update"
:onmoverow="update"
:onmovecolumn="update"
>
<Worksheet :data="tableData" :tableOverflow="true" tableWidth="600" resize="both" />
</Spreadsheet>
<div class="table-body group/table-body relative border-solid border-transparent"
:class="{'edit border-sn-light-grey': editingTable, 'view': !editingTable, 'locked': !element.attributes.orderable.urls.update_url}"
tabindex="0"
Expand Down Expand Up @@ -63,11 +79,18 @@ import InlineEdit from '../inline_edit.vue';
import TableNameModal from './modal/table_name.vue';
import moveElementModal from './modal/move.vue';
import MenuDropdown from '../menu_dropdown.vue';
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Strings must use singlequote quotes


export default {
name: 'ContentTable',
components: {
deleteElementModal, InlineEdit, TableNameModal, moveElementModal, MenuDropdown
deleteElementModal,
InlineEdit,
TableNameModal,
moveElementModal,
MenuDropdown,
Spreadsheet,
Worksheet
},
mixins: [DeleteMixin, DuplicateMixin, MoveMixin],
props: {
Expand Down Expand Up @@ -96,13 +119,14 @@ export default {
},
data() {
return {
tableData: [],
editingName: false,
editingTable: false,
editingCell: false,
tableObject: null,
nameModalOpen: false,
reloadHeader: 0,
updatingTableData: false
updatingTableData: false,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unexpected trailing comma comma-dangle

};
},
computed: {
Expand Down Expand Up @@ -143,6 +167,8 @@ export default {
}
},
created() {
this.license = document.querySelector('meta[name="jspreadsheet-key"]').getAttribute('content');
this.tableData = JSON.parse(this.element.attributes.orderable.contents).data;
window.addEventListener('beforeunload', this.showSaveWarning);
},
beforeUnmount() {
Expand All @@ -152,7 +178,7 @@ export default {
if (!this.updatingTableData) this.loadTableData();
},
beforeUpdate() {
if (!this.updatingTableData) this.tableObject.destroy();
//if (!this.updatingTableData) this.tableObject.destroy();
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expected space or tab after '//' in comment spaced-comment

},
mounted() {
this.loadTableData();
Expand Down Expand Up @@ -227,6 +253,14 @@ export default {
});
},
update(callback = () => {}) {
if (this.$refs.spreadsheet?.current) {
const newTableData = this.$refs.spreadsheet.current[0].getData();

this.element.attributes.orderable.contents = JSON.stringify({ data: newTableData });
this.$emit('update', this.element, false, callback);
}

/*
this.element.attributes.orderable.contents = JSON.stringify({ data: this.tableObject.getData() });
const metadata = this.element.attributes.orderable.metadata || {};
if (metadata.plateTemplate) {
Expand Down Expand Up @@ -265,7 +299,8 @@ export default {
});
}

this.$emit('update', this.element, false, callback);

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More than 1 blank line not allowed no-multiple-empty-lines

*/
},
updateTableData() {
if (this.editingTable === false) return;
Expand All @@ -278,6 +313,7 @@ export default {
});
},
loadTableData() {
return
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing semicolon semi

const container = this.$refs.hotTable;
const data = JSON.parse(this.element.attributes.orderable.contents);
const metadata = this.element.attributes.orderable.metadata || {};
Expand Down
4 changes: 4 additions & 0 deletions app/views/layouts/application.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@
<%= javascript_include_tag 'https://marvinjs.chemicalize.com/v1/client.js', nonce: true, async: true %>
<% end %>

<% if ENV['JSPREADSHEET_KEY'].present? %>
<meta name="jspreadsheet-key" content="<%= ENV['JSPREADSHEET_KEY'] %>">
<% end %>

<%= favicon_link_tag "favicon.ico" %>
<%= favicon_link_tag "favicon-57x57.png", type: "image/png", size: "57x57" %>
<%= favicon_link_tag "favicon-72x72.png", type: "image/png", size: "72x72" %>
Expand Down
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"@babel/preset-env": "^7.20.2",
"@fortawesome/fontawesome-free": "^5.2.0",
"@joeattardi/emoji-button": "^4.6.2",
"@jspreadsheet/vue": "^11.9.4",
"@teselagen/ove": "^0.3.23",
"@vue/compiler-sfc": "^3.3.4",
"@vuepic/vue-datepicker": "^7.2.0",
Expand Down Expand Up @@ -66,6 +67,7 @@
"js-yaml": "^3.12.0",
"jsdom": "16.6.0",
"lodash": "^4.17.21",
"material-icons-font": "^2.1.0",
"mini-css-extract-plugin": "^2.7.5",
"moment": "^2.29.4",
"momentjs": "^2.0.0",
Expand Down
30 changes: 30 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1301,6 +1301,18 @@
"@jridgewell/resolve-uri" "^3.1.0"
"@jridgewell/sourcemap-codec" "^1.4.14"

"@jspreadsheet/formula@^2.0.2":
version "2.0.2"
resolved "https://registry.yarnpkg.com/@jspreadsheet/formula/-/formula-2.0.2.tgz#e0529f275c086fd7d34179b50450a98aeb56fd58"
integrity sha512-PDQYf9REQA53I7tVYkvkeyQxrd5jcjUeHgItYnRpjN2QiIQwawSqBDtGGEVQTSboTG+JwgGCuhvOpj7FxeKwew==

"@jspreadsheet/vue@^11.9.4":
version "11.9.4"
resolved "https://registry.yarnpkg.com/@jspreadsheet/vue/-/vue-11.9.4.tgz#23ba2490ee034b0cfd584a3956708f84612fe10a"
integrity sha512-6yrUjWj7hJTr1VZfrkl6XsegCbmRwcOzwhCRiSzdWzV/RdtF0jdMJOF72yEzP9XwWXxk6xzRTRSXDivWUCrNgg==
dependencies:
jspreadsheet "^11.9.4"

"@juggle/resize-observer@^3.3.1":
version "3.4.0"
resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
Expand Down Expand Up @@ -4773,6 +4785,19 @@ jsonfile@^5.0.0:
optionalDependencies:
graceful-fs "^4.1.6"

jspreadsheet@^11.9.4:
version "11.9.4"
resolved "https://registry.yarnpkg.com/jspreadsheet/-/jspreadsheet-11.9.4.tgz#b0ef2acc95e62450c9cf03acc88c8184d6d89301"
integrity sha512-eZT7T1UlmCD8F/30ToP2pXGA3ygVB163RgQn6iCLTOS74L8uGWZBJN8vZgHyZECuW/0qWcooT6jIdaH8Kr+sKA==
dependencies:
"@jspreadsheet/formula" "^2.0.2"
jsuites "^5.6.5"

jsuites@^5.6.5:
version "5.6.5"
resolved "https://registry.yarnpkg.com/jsuites/-/jsuites-5.6.5.tgz#c69f75dc5167c4f422bfe2847fc6c313d0045b43"
integrity sha512-lFOR/2VXVgFDuhL0tcWDDJZlagC037UQhxsLfuwqQZr9EMYaod0zmn2nb5A0EisgkKZemCQB42y3NhNg90FnmQ==

jszip@^3.10.1, jszip@^3.9.1:
version "3.10.1"
resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.10.1.tgz#34aee70eb18ea1faec2f589208a157d1feb091c2"
Expand Down Expand Up @@ -5031,6 +5056,11 @@ material-colors@^1.2.1:
resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==

material-icons-font@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/material-icons-font/-/material-icons-font-2.1.0.tgz#6160e832f65a91b8d4eb3083523465cc0a36a5a1"
integrity sha512-Nv36UacYjodGc15HJDehJcfrYFioq5p6sQD7kcpBVoFLdUgTnv/kzM5BamTIi0W/i3BaeouunzfBOkUzjicT3Q==

math-expression-evaluator@^1.3.7:
version "1.4.0"
resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.4.0.tgz#3d66031117fbb7b9715ea6c9c68c2cd2eebd37e2"
Expand Down