Skip to content
Snippets Groups Projects
Commit d78616da authored by dcz2's avatar dcz2
Browse files

POC with Vue.js

parent e20a6dcd
Branches
Tags
No related merge requests found
...@@ -4,3 +4,4 @@ ...@@ -4,3 +4,4 @@
/.datastore/ /.datastore/
/.idea/ /.idea/
/import.log /import.log
.DS_Store
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>`
}
export default {
props: {
lexicalUnitId: Number
},
data() {
return { count: 0 }
},
methods: {
clicked () {
this.count++;
addSelectivePreference();
}
},
template: `<div @click="clicked">edit {{ lexicalUnitId }} is {{ count }}</div>`
}
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" />
`
}
...@@ -447,4 +447,3 @@ function extract_frames_to_new_frame(unified_frame_id, slowal_frame_ids, new_uni ...@@ -447,4 +447,3 @@ function extract_frames_to_new_frame(unified_frame_id, slowal_frame_ids, new_uni
} }
}); });
} }
...@@ -51,6 +51,7 @@ function setup_lexical_units_table(drilldown, lexical_units, can_see_assignees) ...@@ -51,6 +51,7 @@ function setup_lexical_units_table(drilldown, lexical_units, can_see_assignees)
</tr> </tr>
`).click(function () { `).click(function () {
$(this).addClass('table-primary').siblings().removeClass("table-primary"); $(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")); get_lexical_unit(lexical_unit.pk, $(drilldown.data("row")).data("entry"));
}); });
} }
......
import Main from './components/main.js';
const { createApp } = Vue;
window.unificationApp = createApp(Main).mount('#app');
{% 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="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"> <div class="col h-100 w-100 p-0 tab-pane show active" id="semantics" role="tabpanel" aria-labelledby="semantics-tab">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment