Hiding selected slowal frames.

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

@@ -100,7 +100,8 @@ Object.assign(LexicalUnitEdit, {
       examples: null,
       selectedFrameArguments: null,
       selectedLus: null,
-      selectedSchemas: null
+      selectedSchemas: null,
+      hidden_frames: [],
     }
   },
   components: {InfoTooltip, Spinner, FramePreview, SlowalFrameComponent, ExamplesComponent, SemanticsSchemataComponent},
@@ -808,6 +809,7 @@ Object.assign(LexicalUnitEdit, {
     },
     changeShowVerifiedFrames (val) {
       this.showVerifiedFrames = val;
+      this.hidden_frames = [];
     },
     getArgumentCSS(argument) {
       return (argument.role ? argument.role.str + ' ' : '') + (argument == this.active_unified_frame_argument ? 'active' : '');
@@ -838,6 +840,9 @@ Object.assign(LexicalUnitEdit, {
     },
     isReadOnlyForSuperLeksykograf () {
       return this.isSuperLeksykograf() && this.unified_frame.status === 'O';
+    },
+    hideFrame (frame) {
+      this.hidden_frames.push(frame);
     }
   },
   mounted() {
@@ -876,7 +881,7 @@ Object.assign(LexicalUnitEdit, {
   template: `
     <div class="col h-100 px-0 pt-0 pb-0 overflow-auto" id="semantics-frames-pane">
       <div :id="'semantics-unified-frame-pane' + (readOnly ? '-preview' : '')" class="col w-100 p-0 overflow-auto">
-        <table v-if="!readOnly && !isReadOnlyForSuperLeksykograf" class="table-button-menu sticky-top" cellspacing="1">
+        <table v-if="!readOnly && !isReadOnlyForSuperLeksykograf()" class="table-button-menu sticky-top" 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>
@@ -984,7 +989,7 @@ Object.assign(LexicalUnitEdit, {
       </div>
       </div>
       <div :id="'semantics-slowal-frames-pane' + (readOnly ? '-preview' : '')" class="col w-100 p-0 overflow-auto">
-        <table v-if="!readOnly && unified_frame.id && !isReadOnlyForSuperLeksykograf" class="table-button-menu sticky-top" cellspacing="1">
+        <table v-if="!readOnly && unified_frame.id && !isReadOnlyForSuperLeksykograf()" class="table-button-menu sticky-top" cellspacing="1">
           <tr style="background-color: white;">
             <td id="wrong-frame" style="padding: 10px 15px 10px 15px; color: #000000;" @click="change_slowal_frame_status('B')">Błędna</td>
             <td id="hide-slowal-frame" style="padding: 10px 15px 10px 15px; color: #000000;"  @click="changeShowVerifiedFrames(false)">Ukryj gotowe</td>
@@ -996,7 +1001,7 @@ Object.assign(LexicalUnitEdit, {
                 Niepasująca
             </td>
             <td id="show-slowal-frame" style="padding: 10px 15px 10px 15px; color: #000000;" @click="changeShowVerifiedFrames(true)">
-                Pokaż wszystkie
+                Pokaż wszystkie {{this.hidden_frames.length > 0 ? '(ukrytych: ' + this.hidden_frames.length + ')' : ''}}
             </td>
             <td id="move-slowal-frame" style="padding: 10px 15px 10px 15px; color: #000000;"
                 @click="extract_frame_to_preview_frame">
@@ -1005,31 +1010,39 @@ Object.assign(LexicalUnitEdit, {
           </tr>
         </table>
         <div id="semantics-frames">
-          <div v-for="frame in frames">
+          <template v-for="frame in frames">
+              <div v-if="!hidden_frames.includes(frame)">
                 <table class="table m-0 table-borderless border border-secondary text-dark"
                    v-if="(!isFrameVerified(frame) || showVerifiedFrames) && isFrameVisible(frame.status)"
                   >
                     <tbody>
                     <tr>
-                <td scope="row">
+                      <td>
+                        <div class="row">
+                          <div class="col close" style="
+                              cursor: pointer;
+                              display: flex;
+                              justify-content: flex-end;"
+                              @click="hideFrame(frame)"
+                          >&times;</div>
+                        </div>
+                      <div class="row">
                         <div
+                          class="col"
                           @mouseenter="frame.hover=true"
                           @mouseleave="frame.hover=false"
                           @click="slowalFrameSelected(frame)"
                           :class="frame === active_slowal_frame ? 'active-frame' : frame.hover ? 'bg-highlight' : ''" 
                         >
-<!--                  <div -->
-<!--                    v-html="slowal_frame_html(frame)" -->
-<!--                    :class="isSelectedFrame(frame) ? 'active-frame' : ''"-->
-<!--                  >-->
                         <slowal-frame-component 
                             :frame="frame" :key="frame"
                             @frame-selection-changed="insideFrameSelectionChanged"
                          />
                      </div>
+                    </div>
                   </td>
                     <th scope="row">
-                    <div v-if="!readOnly && !isReadOnlyForSuperLeksykograf">
+                      <div v-if="!readOnly && !isReadOnlyForSuperLeksykograf()">
                         <div v-if="isFrameVerified(frame)">
                           <input
                             type="checkbox"
@@ -1049,6 +1062,7 @@ Object.assign(LexicalUnitEdit, {
                 </tbody>
               </table>
               </div>
+          </template>
         </div>
       </div>
       <div :id="'examples' + (readOnly ? '-preview' : '')" class="col w-100 p-0 tab-pane overflow-auto">

entries/static/entries/js/components/frame-components/SlowalFrameComponent.js

@@ -42,7 +42,7 @@ export default {
     },
     template: `
         <div class="frame mb-3 active">
-            <div class="frame mt-3" id="lexical-unit">
+            <div class="frame mt-0" id="lexical-unit">
                 <meaning-component
                     :lexicalUnits="frame.lexical_units"
                     @meaning-lu-selected="meaningLuSelected"