Fix tabs in the edit view

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

@@ -15,7 +15,13 @@ export default {
       slowal_frames2selecional_preferencies_mapping: {},
       lexical_units: [],
       img_prefix: String,
-            frames: []
+      frames: [],
+      right_pane_tabs: [
+        {id: 'schemata', label: gettext('Schematy')},
+        {id: 'frame_preview', label: gettext('Podgląd ram')},
+        {id: 'notes', label: gettext('Notatki')},
+      ],
+      right_pane_tab: 'schemata'
     }
   },
   components: {InfoTooltip, Spinner},
@@ -693,7 +699,6 @@ export default {
         </tr>
       </table>
       <div id="semantics-frames">
-      
         <table class="table m-0 table-borderless border border-secondary text-dark"
          v-for="frame in frames"
          :key="frame.id"
@@ -705,12 +710,10 @@ export default {
             </th>
               <th scope="row">
                 <div>
-                    
                   <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"
@@ -718,35 +721,29 @@ export default {
                     >
                     <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>
+                  <br><br>
+                  <a href="#" class="btn btn-sm btn-dark" role="button" @click="change_slowal2unified_frame_argument_mapping(frame.id)">Z</a>
                 </div>
               </th>
           </tr>
           </tbody>
         </table>
-
       </div>
     </div>
     <div 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 class="nav-item mr-1">
-            <a class="btn btn-sm btn-outline-dark nav-link active" id="unified-frame-semantics-tab" data-toggle="tab" href="#semantics" role="tab" aria-controls="semantics" aria-selected="true">
-                {{ gettext('Schematy') }}
-            </a>
-        </li>
-        <li class="nav-item mr-1">
-            <a class="btn btn-sm btn-outline-dark nav-link" id="unified-frame-view2-tab" data-toggle="tab" href="#syntax" role="tab" aria-controls="syntax" aria-selected="false">
-                {{ gettext('Podgląd ram') }}
-            </a>
-        </li>
-        <li class="nav-item mr-0">
-            <a class="btn btn-sm btn-outline-dark nav-link" id="unified-frame-notes-tab" data-toggle="tab" href="#examples" role="tab" aria-controls="examples" aria-selected="false">
-                {{ gettext('Notatki') }}
-            </a>
+        <li
+          v-for="tab in right_pane_tabs"
+          class="btn btn-sm btn-outline-dark nav-link mx-1"
+          :class="right_pane_tab === tab.id && 'active'"
+          @click="right_pane_tab = tab.id"
+        >
+          {{ tab.label }}
         </li>
       </ul>
-      <div id="semantics-schemata"></div>
+      <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 === 'notes'">notateczki</div>
     </div>
   `
 }