From d78616dae7026fa4a0141aa18a352f7c4615432a Mon Sep 17 00:00:00 2001
From: dcz2 <dcz@ipipan.waw.pl>
Date: Thu, 9 Jun 2022 23:32:04 +0200
Subject: [PATCH] POC with Vue.js

---
 .gitignore                                    |  1 +
 .../js/components/LexicalUnitDisplay.js       | 15 +++++++
 .../entries/js/components/LexicalUnitEdit.js  | 15 +++++++
 entries/static/entries/js/components/main.js  | 43 +++++++++++++++++++
 entries/static/entries/js/unification.js      |  1 -
 .../entries/js/unification_entries_list.js    |  1 +
 .../static/entries/js/unification_index.js    |  4 ++
 .../unification_lexical_unit_display.html     |  6 ++-
 8 files changed, 84 insertions(+), 2 deletions(-)
 create mode 100644 entries/static/entries/js/components/LexicalUnitDisplay.js
 create mode 100644 entries/static/entries/js/components/LexicalUnitEdit.js
 create mode 100644 entries/static/entries/js/components/main.js
 create mode 100644 entries/static/entries/js/unification_index.js

diff --git a/.gitignore b/.gitignore
index 90568fa..6c83e02 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 0000000..dd27685
--- /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 0000000..a90fd68
--- /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 0000000..4f2d4dd
--- /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 85d53ff..e9e0385 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 4f2fd5b..dd8b00b 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 0000000..ac4cd9f
--- /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 1668b52..275b7c4 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">
-- 
GitLab