diff --git a/.gitignore b/.gitignore index 90568fade82ab3c7552514c6f170ef486c7e39b4..6c83e0251885ecfd7f2960f1bd14e44d239cd276 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ /.datastore/ /.idea/ /import.log +.DS_Store diff --git a/entries/static/entries/js/components/LexicalUnitDisplay.js b/entries/static/entries/js/components/LexicalUnitDisplay.js new file mode 100644 index 0000000000000000000000000000000000000000..dd27685d646977cb1e5acd54ffaf129e69b9d312 --- /dev/null +++ b/entries/static/entries/js/components/LexicalUnitDisplay.js @@ -0,0 +1,15 @@ +export default { + props: { + lexicalUnitId: Number + }, + data() { + return { count: 0 } + }, + methods: { + clicked () { + this.count++; + addSelectivePreference(); + } + }, + template: `<div @click="clicked">display {{ lexicalUnitId }} is {{ count }}</div> <div @click="$emit('goToEdit')">idź do edycji</div>` +} diff --git a/entries/static/entries/js/components/LexicalUnitEdit.js b/entries/static/entries/js/components/LexicalUnitEdit.js new file mode 100644 index 0000000000000000000000000000000000000000..a90fd682a9aed520ce8e668c09b6afec7be792a8 --- /dev/null +++ b/entries/static/entries/js/components/LexicalUnitEdit.js @@ -0,0 +1,15 @@ +export default { + props: { + lexicalUnitId: Number + }, + data() { + return { count: 0 } + }, + methods: { + clicked () { + this.count++; + addSelectivePreference(); + } + }, + template: `<div @click="clicked">edit {{ lexicalUnitId }} is {{ count }}</div>` +} diff --git a/entries/static/entries/js/components/main.js b/entries/static/entries/js/components/main.js new file mode 100644 index 0000000000000000000000000000000000000000..4f2d4ddb92a43d36e49b0286b43ed60fcfe455a5 --- /dev/null +++ b/entries/static/entries/js/components/main.js @@ -0,0 +1,43 @@ +import LexicalUnitDisplay from './LexicalUnitDisplay.js'; +import LexicalUnitEdit from './LexicalUnitEdit.js'; + +export default { + props: { + lexicalUnitId: Number + }, + data () { + return this.getInitialData(); + }, + methods: { + getInitialData () { + return { isEdit: false } + }, + goToEdit () { + this.isEdit = true; + } + }, + computed: { + leftPaneComponent () { + if (!this.lexicalUnitId) return null; + if (this.isEdit) return LexicalUnitEdit; + return LexicalUnitDisplay; + }, + leftPaneComponentProps () { + return { + lexicalUnitId: this.lexicalUnitId + }; + } + }, + watch: { + lexicalUnitId () { + const freshData = this.getInitialData(); + Object.keys(freshData).map(key => { + this[key] = freshData[key]; + }); + } + }, + template: ` + <div @click="isEdit = !isEdit">kliknij mnie, jestem LU {{ this.lexicalUnitId }}</div> + <component :is="leftPaneComponent" v-bind="leftPaneComponentProps" @go-to-edit="goToEdit" /> + ` +} diff --git a/entries/static/entries/js/unification.js b/entries/static/entries/js/unification.js index 85d53ff4b72c1aa92a77a95bd630cf7cdbd395e8..e9e03851679e29ad3548e34c56a63068fdbadd1f 100644 --- a/entries/static/entries/js/unification.js +++ b/entries/static/entries/js/unification.js @@ -447,4 +447,3 @@ function extract_frames_to_new_frame(unified_frame_id, slowal_frame_ids, new_uni } }); } - diff --git a/entries/static/entries/js/unification_entries_list.js b/entries/static/entries/js/unification_entries_list.js index 4f2fd5b1806865541a24935eb4f92b6619ee709c..dd8b00b95c4b044681f9600447f2c39297d942be 100644 --- a/entries/static/entries/js/unification_entries_list.js +++ b/entries/static/entries/js/unification_entries_list.js @@ -51,6 +51,7 @@ function setup_lexical_units_table(drilldown, lexical_units, can_see_assignees) </tr> `).click(function () { $(this).addClass('table-primary').siblings().removeClass("table-primary"); + window.unificationApp.$.props.lexicalUnitId = lexical_unit.pk; get_lexical_unit(lexical_unit.pk, $(drilldown.data("row")).data("entry")); }); } diff --git a/entries/static/entries/js/unification_index.js b/entries/static/entries/js/unification_index.js new file mode 100644 index 0000000000000000000000000000000000000000..ac4cd9f63c36bbfb77cb811addfc7dced7424c6c --- /dev/null +++ b/entries/static/entries/js/unification_index.js @@ -0,0 +1,4 @@ + import Main from './components/main.js'; + const { createApp } = Vue; + +window.unificationApp = createApp(Main).mount('#app'); diff --git a/entries/templates/unification_lexical_unit_display.html b/entries/templates/unification_lexical_unit_display.html index 1668b5264a07dcc0715424a3eab416cddb5b3e85..275b7c4980dbba231149d23423fe735d1bb1fe7e 100644 --- a/entries/templates/unification_lexical_unit_display.html +++ b/entries/templates/unification_lexical_unit_display.html @@ -1,4 +1,8 @@ -{% load i18n %} +{% load i18n static %} + +<script src="https://unpkg.com/vue@3"></script> +<div id="app"></div> +<script type="module" src="{% static 'entries/js/unification_index.js' %}"></script> <div class="tab-content h-100 w-100 p-0" id="entryTabsContent"> <div class="col h-100 w-100 p-0 tab-pane show active" id="semantics" role="tabpanel" aria-labelledby="semantics-tab">