Show/hide verified frames

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

@@ -83,6 +83,7 @@ Object.assign(LexicalUnitEdit, {
       internalForceRefresh: this.forceRefresh,
       statusButtonTitle: '',
       active_slowal_frame: null,
+      showVerifiedFrames: false
     }
   },
   components: {InfoTooltip, Spinner, FramePreview},
@@ -688,6 +689,9 @@ Object.assign(LexicalUnitEdit, {
     changePreviewToEditClick () {
       this.$emit("changePreviewToEdit", this.unified_frame.id);
     },
+    changeShowVerifiedFrames (val) {
+      this.showVerifiedFrames = val;
+    },
   },
   mounted() {
     this.changeStatusButtonTitleToDefault();
@@ -818,7 +822,7 @@ Object.assign(LexicalUnitEdit, {
           >
             Rozdziel
           </td>
-          <td id="hide-slowal-frame" style="padding: 10px 15px 10px 15px; color: #000000;">Ukryj</td>
+          <td id="hide-slowal-frame" style="padding: 10px 15px 10px 15px; color: #000000;"  @click="changeShowVerifiedFrames(false)">Ukryj</td>
           <td id="ready-slowal-frame" style="padding: 10px 15px 10px 15px; color: #000000;" @click="change_slowal_frame_status">{{ statusButtonTitle }}</td>
           <td id="filter-slowal-frames" style="padding: 10px 15px 10px 15px; color: #000000;">Filtruj</td>
         </tr>
@@ -830,7 +834,7 @@ Object.assign(LexicalUnitEdit, {
               @click="extract_frame_to_preview_frame()">
               Przerzuć
           </td>
-          <td id="show-slowal-frame" style="padding: 10px 15px 10px 15px; color: #000000;">
+          <td id="show-slowal-frame" style="padding: 10px 15px 10px 15px; color: #000000;" @click="changeShowVerifiedFrames(true)">
               Pokaż
           </td>
           <td id="reollback-slowal-frame" style="padding: 10px 15px 10px 15px; color: #000000;">
@@ -840,9 +844,10 @@ Object.assign(LexicalUnitEdit, {
         </tr>
       </table>
       <div id="semantics-frames">
+      <div v-for="frame in frames"
+         :key="frame.id">
         <table class="table m-0 table-borderless border border-secondary text-dark"
-         v-for="frame in frames"
-         :key="frame.id"
+         v-if="!isFrameVerified(frame) || showVerifiedFrames"
         >
           <tbody>
           <tr>
@@ -855,22 +860,25 @@ Object.assign(LexicalUnitEdit, {
             </th>
               <th scope="row">
                 <div v-if="!readOnly">
-                  <label v-bind:for="frame.id">
-                    <div>
-                      <input
-                        type="checkbox"
-                        :checked="isFrameVerified(frame)"
-                        class="custom-control custom-checkbox"
-                      >
-                    </div>
-                  </label>
+                  <div v-if="isFrameVerified(frame)">
+                    <input
+                      type="checkbox"
+                      :checked="isFrameVerified(frame)"
+                      class="custom-control custom-checkbox"
+                      disabled="disabled"
+                    >
+                  </div>
                   <br><br>
-                  <a href="#" class="btn btn-sm btn-dark" role="button" @click="change_slowal2unified_frame_argument_mapping(frame.id)">Z</a>
+                  <button v-if="!isFrameVerified(frame)"
+                    class="btn btn-sm btn-dark" role="button" 
+                    @click="change_slowal2unified_frame_argument_mapping(frame.id)"
+                    >Z</button>
                 </div>
               </th>
           </tr>
           </tbody>
         </table>
+        </div>
       </div>
     </div>
     <div v-if="!readOnly" class="col h-100 px-1 pt-0 pb-0 overflow-auto" id="semantics-schemata-pane">