POC with Vue.js

.gitignore

@@ -4,3 +4,4 @@
 /.datastore/
 /.idea/
 /import.log
+.DS_Store

entries/static/entries/js/components/LexicalUnitDisplay.js

+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>`
+}

entries/static/entries/js/components/LexicalUnitEdit.js

+export default {
+  props: {
+    lexicalUnitId: Number
+  },
+  data() {
+    return { count: 0 }
+  },
+  methods: {
+    clicked () {
+      this.count++;
+      addSelectivePreference();
+    }
+  },
+  template: `<div @click="clicked">edit {{ lexicalUnitId }} is {{ count }}</div>`
+}

entries/static/entries/js/components/main.js

+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" />
+  `
+}

entries/static/entries/js/unification.js

@@ -447,4 +447,3 @@ function extract_frames_to_new_frame(unified_frame_id, slowal_frame_ids, new_uni
         }
     });
 }
-

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"));
         });
     }

entries/static/entries/js/unification_index.js

+  import Main from './components/main.js';
+  const { createApp } = Vue;
+
+window.unificationApp = createApp(Main).mount('#app');

entries/templates/unification_lexical_unit_display.html

-{% 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">