Draft of frame preview, swapping frames

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

 import InfoTooltip from "./InfoTooltip.js";
 import Spinner from "./Spinner.js";
 
-export default {
+let LexicalUnitEdit = {};
+
+const FramePreview = {
+  props: {
+    initialUnifiedFrameId: Number
+  },
+  data () {
+    return {
+      unifiedFrameId: this.initialUnifiedFrameId
+    };
+  },
+  components: {LexicalUnitEdit},
+  emits: ['changeFrame'],
+  mounted () {
+    Split(['#frame-preview-left-pane', '#frame-preview-right-pane'], {
+      sizes: [60, 40],
+      minSize: 100,
+      gutterSize: 4,
+      elementStyle: (dimension, size, gutterSize) => {
+        return {
+          'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
+        }
+      },
+    });
+  },
+  template: `
+    <div :key="unifiedFrameId" class="row">
+      <div class="col h-100 px-1 pt-0 pb-0 overflow-auto" id="frame-preview-left-pane">
+        <lexical-unit-edit
+          :readOnly="true"
+          :unifiedFrameId="unifiedFrameId"
+        />
+      </div>
+      <div class="col h-100 px-1 pt-0 pb-0 overflow-auto" id="frame-preview-right-pane">
+        TODO list
+        <span @click="$emit('changeFrame', 1)">change frame</span>
+      </div>
+    </div>
+  `
+};
+
+Object.assign(LexicalUnitEdit, {
   props: {
-    unifiedFrameId: Number
+    unifiedFrameId: Number,
+    previewedUnifiedFrameId: Number,
+    readOnly: Boolean,
+    initialRightPaneTab: String,
   },
   data() {
     return {
       gettext: window.gettext,
-      unified_frame: Object,
-      unified_frame_title: Object,
+      unified_frame: {},
+      unified_frame_title: '',
       unified_frame_arguments: [],
       active_unified_frame_argument: null,
       slowal_frames2selecional_preferencies_mapping: {},
@@ -21,16 +65,12 @@ export default {
         {id: 'frame_preview', label: gettext('Podgląd ram')},
         {id: 'notes', label: gettext('Notatki')},
       ],
-      right_pane_tab: 'schemata'
-    }
-  },
-  components: {InfoTooltip, Spinner},
-  emits: ['goToDisplay', 'refresh'],
-  watch: {
-    unifiedFrameId: function () {
-      this.loadFrame();
+      right_pane_tab: this.initialRightPaneTab || 'schemata',
+      currentPreviewedUnifiedFrameId: this.previewedUnifiedFrameId,
     }
   },
+  components: {InfoTooltip, Spinner, FramePreview},
+  emits: ['goToDisplay', 'refresh', 'swapFrames'],
   methods: {
     hasWhiteSpace(s) {
       return /\s/g.test(s);
@@ -553,10 +593,18 @@ export default {
           show_error(errorType + ' (' + errorMessage + ')');
         }
       });
+    },
+    changePreviewedUnifiedFrameId (unifiedFrameId) {
+      this.currentPreviewedUnifiedFrameId = unifiedFrameId;
+    },
+    swapUnifiedFrames () {
+      if (this.unified_frame.id !== this.currentPreviewedUnifiedFrameId) {
+        this.$emit("swapFrames", this.currentPreviewedUnifiedFrameId);
+      }
     }
   },
   mounted() {
-    Split(['#semantics-frames-pane', '#semantics-schemata-pane'], {
+    !this.readOnly && Split(['#semantics-frames-pane', '#semantics-schemata-pane'], {
       sizes: [40, 60],
       minSize: 400,
       gutterSize: 4,
@@ -570,7 +618,7 @@ export default {
   },
   template: `
     <div class="col h-100 px-1 pt-0 pb-0 overflow-auto" id="semantics-frames-pane">
-      <table class="table-button-menu" cellspacing="1">
+      <table v-if="!readOnly" class="table-button-menu" cellspacing="1">
         <tr style="background-color: white;">
           <td id="change-title" @click="changeTitle" style="padding: 10px 15px 10px 15px; color: #000000;">Zmień nazwę</td>
           <td id="add-arg" @click="addArgument" style="padding: 10px 15px 10px 15px; color: #000000;">Dodaj argum.</td>
@@ -581,7 +629,7 @@ export default {
         <tr style="background-color: white;">
           <td id="change-role" @click="changeRole" style="padding: 10px 15px 10px 15px; color: #000000;">Zmień rolę</td>
           <td id="remove-arg" @click="removeArgument" style="padding: 10px 15px 10px 15px; color: #000000;">Usuń argum.</td>
-          <td id="change-windows" style="padding: 10px 15px 10px 15px; color: #000000;">Zamień okna</td>
+          <td id="change-windows" style="padding: 10px 15px 10px 15px; color: #000000;" @click="swapUnifiedFrames">Zamień okna</td>
           <td id="duplicates" @click="duplicate" style="padding: 10px 15px 10px 15px; color: #000000;">Duplikuj</td>
           <td id="save-changes" style="padding: 10px 15px 10px 15px; color: #000000;">Zapisz</td>
         </tr>
@@ -668,7 +716,7 @@ export default {
         </table>
       </div>
 
-      <table v-if="unified_frame.id" class="table-button-menu" cellspacing="1">
+      <table v-if="!readOnly && unified_frame.id" class="table-button-menu" cellspacing="1">
         <tr style="background-color: white;">
           <td id="wrong-frame" style="padding: 10px 15px 10px 15px; color: #000000;">Błędna</td>
           <td
@@ -709,17 +757,19 @@ export default {
               <div v-html="slowal_frame_html(frame)" @click="slowalFrameSelected(frame)"></div>
             </th>
               <th scope="row">
-                <div>
+                <div v-if="!readOnly">
                   <label v-bind:for="frame.id">
-                    <div><input 
-                      :id="frame.id"
-                      type="checkbox"
-                      v-model="frame.verified"
-                      :checked="frame.verified"
-                      class="custom-control custom-checkbox"
-                      @change="change_slowal2unified_mapping_verification(frame.id, frame.verified)"
-                    >
-                    <span>Zweryfikowane</span></div>
+                    <div>
+                      <input
+                        :id="frame.id"
+                        type="checkbox"
+                        v-model="frame.verified"
+                        :checked="frame.verified"
+                        class="custom-control custom-checkbox"
+                        @change="change_slowal2unified_mapping_verification(frame.id, frame.verified)"
+                      >
+                      <span>Zweryfikowane</span>
+                    </div>
                   </label>
                   <br><br>
                   <a href="#" class="btn btn-sm btn-dark" role="button" @click="change_slowal2unified_frame_argument_mapping(frame.id)">Z</a>
@@ -730,7 +780,7 @@ export default {
         </table>
       </div>
     </div>
-    <div class="col h-100 px-1 pt-0 pb-0 overflow-auto" id="semantics-schemata-pane">
+    <div v-if="!readOnly" class="col h-100 px-1 pt-0 pb-0 overflow-auto" id="semantics-schemata-pane">
       <ul class="nav nav-pills nav-justified p-1" id="entryTabs" role="tablist">
         <li
           v-for="tab in right_pane_tabs"
@@ -742,8 +792,12 @@ export default {
         </li>
       </ul>
       <div :class="right_pane_tab !== 'schemata' && 'd-none'" id="semantics-schemata"></div>
-      <div v-if="right_pane_tab === 'frame_preview'">drugi tab</div>
+      <div v-if="right_pane_tab === 'frame_preview'">
+        <frame-preview :key="currentPreviewedUnifiedFrameId" :initialUnifiedFrameId="currentPreviewedUnifiedFrameId" @change-frame="changePreviewedUnifiedFrameId" />
+      </div>
       <div v-if="right_pane_tab === 'notes'">notateczki</div>
     </div>
   `
-}
+});
+
+export default LexicalUnitEdit;

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

@@ -15,12 +15,14 @@ export default {
       return {
         isEdit: false,
         key: this.lexicalUnitId,
-        unifiedFrameId: null
+        unifiedFrameId: null,
+        previewedUnifiedFrameId: null
       };
     },
     goToEdit (unifiedFrameId) {
       this.isEdit = true;
       this.unifiedFrameId = unifiedFrameId;
+      this.previewedUnifiedFrameId = unifiedFrameId;
     },
     goToDisplay () {
       this.isEdit = false;
@@ -30,6 +32,11 @@ export default {
       this.key = null;
       setTimeout(() => { this.key = this.lexicalUnitId; }, 0);
       update_entries();
+    },
+    swapFrames (previewedUnifiedFrameId) {
+      this.previewedUnifiedFrameId = this.unifiedFrameId;
+      this.unifiedFrameId = previewedUnifiedFrameId;
+      this.refresh();
     }
   },
   watch: {
@@ -48,8 +55,12 @@ export default {
       />
       <lexical-unit-edit
         v-if="isEdit"
+        :readOnly="false"
         :unifiedFrameId="unifiedFrameId"
+        :previewedUnifiedFrameId="previewedUnifiedFrameId"
+        :initialRightPaneTab="unifiedFrameId !== previewedUnifiedFrameId ? 'frame_preview' : null"
         @go-to-display="goToDisplay"
+        @swap-frames="swapFrames"
       />
     </div>
   `