Skip to content
Snippets Groups Projects
Select Git revision
  • 8efeabb4271ec733be8e3d69338db520ef9a5663
  • master default protected
  • vertical_relations
  • lu_without_semantic_frames
  • hierarchy
  • additional-unification-filters
  • v0.1.1
  • v0.1.0
  • v0.0.9
  • v0.0.8
  • v0.0.7
  • v0.0.6
  • v0.0.5
  • v0.0.4
  • v0.0.3
  • v0.0.2
  • v0.0.1
17 results

SelectionalPreference.js

Blame
  • LexicalUnitEdit.vue 65.96 KiB
    <script>
    import InfoTooltip from "../../shared/InfoTooltip.vue";
    import Spinner from "../../shared/Spinner.vue";
    import ExamplesComponent from "../shared/frame-components/ExamplesComponent.vue";
    import SlowalFrameComponent from "../shared/frame-components/SlowalFrameComponent.vue";
    import SemanticsSchemataComponent from "../shared/frame-components/SemanticsSchemataComponent.vue";
    import MeaningComponent from "../shared/frame-components/MeaningComponent.vue";
    import SelectionalPreference from "./SelectionalPreference.js";
    import UnificationFramePreview from "./UnificationFramePreview.vue";
    import { slowal_frames2selecional_preferencies } from "../shared/utils.js";
    import {send_post_request} from "../shared/utils";
    
    let LexicalUnitEdit = {};
    
    Object.assign(LexicalUnitEdit, {
      props: {
        unifiedFrameId: Number,
        previewedUnifiedFrameId: Number,
        readOnly: Boolean,
        initialRightPaneTab: String,
        forceRefresh: Number,
      },
      data() {
        return {
          gettext: window.gettext,
          LexicalUnitEdit: LexicalUnitEdit,
          unified_frame: {},
          unified_frame_title: '',
          unified_frame_arguments: [],
          active_unified_frame_argument: null,
          slowal_frames2selecional_preferencies_mapping: {},
          lexical_units: [],
          img_prefix: window.STATIC_URL,
          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: this.initialRightPaneTab || 'schemata',
          currentPreviewedUnifiedFrameId: this.previewedUnifiedFrameId,
          internalForceRefresh: this.forceRefresh,
          statusButtonTitle: '',
          active_slowal_frame: null,
          subentries: null,
          alternations: null,
          realisation_phrases: null,
          realisation_descriptions: null,
          examples: null,
          selectedFrameArguments: null,
          frame_arguments_or_type: false,
          selectedLus: null,
          selectedSchemas: null,
          selectedExamples: null,
          hidden_frame_ids: [],
          hidden_frame_status_set: [],
          lexicalUnitsVisible: true,
          selectionalPreferenciesVisible: true
        }
      },
      components: {InfoTooltip, Spinner, UnificationFramePreview, SlowalFrameComponent, ExamplesComponent, SemanticsSchemataComponent, MeaningComponent},
      emits: ['goToDisplay', 'refresh', 'swapFrames', 'refreshEntriesList', 'clearUnifiedFrameView'],
      watch: {
        forceRefresh(newVal, oldVal) {
          this.loadFrame();
        }
      },
      computed: {
        selectionalPreference() {
          return new SelectionalPreference();
        }
      },
      methods: {
        hasWhiteSpace(s) {
          return /\s/g.test(s);
        },
        async loadFrame() {
          try {
            const data = {'unified_frame_id': this.unifiedFrameId, 'no_filters' : false};
            $.ajax({
              type: 'post',
              url: '/' + lang + '/unifier/get_unified_frame/',
              dataType: 'json',
              data: data,
              timeout: 60000,
              success: function (response) {
    
                this.img_prefix = window.STATIC_URL;
                this.lexical_units = this.frames2lexical_units(response.frames);
                this.unified_frame = response.unified_frame;
                this.unified_frame_title = this.unified_frame.title;
                this.unified_frame_arguments = this.unified_frame.arguments;
                this.frames = response.frames;
                this.slowal_frames2selecional_preferencies_mapping = slowal_frames2selecional_preferencies(this.unified_frame, response.frames);
    
                this.subentries = response.subentries;
                this.alternations = response.alternations;
                this.realisation_phrases = response.realisation_phrases;
                this.realisation_descriptions = response.realisation_descriptions;
                this.examples = response.examples;
    
                this.fulfill_slowal_frames_arguments_with_empty_elems(response.unified_frame, response.frames)
                window.update_last_visited(response.last_visited);
                window.clear_info();
    
                this.changeStatusButtonTitleToDefault();
                if (!this.active_slowal_frame) {
                  this.setup_notes_unified_frame();
                }
              }.bind(this),
              error: function (request, errorType, errorMessage) {
                show_error(errorType + ' (' + errorMessage + ')');
              }
            });
    
          } catch (error) {
            console.log(error);
          }
        },
        setup_notes_unified_frame() {
          setup_notes($('#notes-component'), $('#lexical-unit-notes-template'), this.unified_frame.id, 'unifier.UnifiedFrame',
              this.setup_notes_unified_frame, 'unified_frame', true);
        },
        setup_notes_slowal_frame() {
          if (this.active_slowal_frame) {
            setup_notes($('#notes-component'), $('#lexical-unit-notes-template'), this.active_slowal_frame.id,
                'semantics.Frame', this.setup_notes_slowal_frame, 'semantics_frame', true);
          }
        },
        setup_notes_slowal_frame_with_title_and_body(title, body) {
          this.right_pane_tab = 'notes';
          setup_notes($('#notes-component'), $('#lexical-unit-notes-template'), this.active_slowal_frame.id,
              'semantics.Frame', this.setup_notes_slowal_frame, 'semantics_frame', true, title, body);
        },
        unifiedFrameArgumentSelected(argument) {
          if (this.active_unified_frame_argument === argument) {
            this.active_unified_frame_argument = null;
            this.frame_arguments_or_type = false;
            this.deselectSlowalFrameSelectedElements();
          } else {
            this.active_slowal_frame = null;
            this.active_unified_frame_argument = argument;
            const slowalFrameArguments = this.getSlowalFrameArgumentsBy(argument);
            this.frame_arguments_or_type = true;
            this.deselectSlowalFrameSelectedElements();
            this.selectedFrameArguments = slowalFrameArguments;
          }
          this.unifiedFrameArgumentHovered(argument);
        },
        unifiedFrameArgumentHovered(argument) {
          clear_info();
          if (argument && this.active_unified_frame_argument === argument) {
            show_info(gettext('Kliknij, aby cofnąć wybór kolumny do edycji.'));
          }
          if (argument && this.active_unified_frame_argument !== argument) {
            show_info(gettext('Kliknij, aby wybrać kolumnę do edycji.'));
          }
        },
        addSelectivePreference() {
          if (!this.active_unified_frame_argument) {
            alert(gettext("Zaznacz argument, do którego chcesz dodać preferencję."));
          } else {
            this.selectionalPreference.addSelectivePreference(this.unified_frame, this.active_unified_frame_argument.id, this.frames, function () {
              this.loadFrame();
            }.bind(this));
          }
        },
        removeSelectionalPreference() {
          if (!this.active_unified_frame_argument) {
            alert(gettext("Zaznacz argument, do którego chcesz dodać preferencję."));
          } else {
            const existingPreferencies = function () {
              return this.active_unified_frame_argument.preferences.map(preference => {
                return `<label><input type="checkbox" name="preference" value="${preference.id}" /> ${preference.str}</label><br />`;
              }).join("");
            }.bind(this);
    
            const remove_preference_popup = {
              state0: {
                title: 'Wybierz preferencje do usunięcia',
                html: existingPreferencies,
                buttons: {Anuluj: 0, Usuń: 1},
                focus: -1,
                submit: function (e, v, m, f) {
                  if (v == 0) {
                    e.preventDefault();
                    $.prompt.close();
                  }
                  if (v === 1) {
                    e.preventDefault();
                    let preference_ids = normalizeFormData(f.preference);
                    const data = {
                      'unified_frame_id': this.unified_frame.id,
                      'argument_id': this.active_unified_frame_argument.id,
                      'preference_ids': JSON.stringify(preference_ids)
                    };
                    $.ajax({
                      type: 'post',
                      url: '/' + lang + '/unifier/remove_selectional_preference/',
                      dataType: 'json',
                      data: data,
                      timeout: 60000,
                      success: function (response) {
                        show_info('Wybrane preferencje zostału usunięte.');
                        this.loadFrame();
                        $.prompt.close();
                      }.bind(this),
                      error: function (request, errorType, errorMessage) {
                        show_error(errorType + ' (' + errorMessage + ')');
                        $.prompt.close();
                      }
                    });
                  }
                }.bind(this)
              }
            }
            $.prompt(remove_preference_popup);
          }
        },
        changeTitle() {
          let title = this.unified_frame.title != null ? this.unified_frame.title : '';
          const change_title_popup = {
            state0: {
              title: 'Zmiana nazwy ramy',
              html: '<input type="text" size="32" value="' + title + '" name="title" />',
              buttons: {Anuluj: 0, Zapisz: 1},
              focus: -1,
              submit: function (e, v, m, f) {
                if (v == 0) {
                  $.prompt.close();
                }
                if (v === 1) {
                  e.preventDefault();
                  const title = f.title;
    
                  if (this.hasWhiteSpace(title)) {
                    alert(gettext("Nazwa zunifikowanej ramy nie może zawierać białych znaków."));
                  } else {
    
                    const dataCheckUniq = {'unified_frame_title': title};
                    $.ajax({
                      type: 'post',
                      url: '/' + lang + '/unifier/check_unified_frame_title_uniq/',
                      dataType: 'json',
                      data: dataCheckUniq,
                      timeout: 60000,
                      success: function (response) {
    
                        if(response.exists === false) {
                          const data = {'unified_frame_id': this.unified_frame.id, 'unified_frame_title': title};
                          $.ajax({
                            type: 'post',
                            url: '/' + lang + '/unifier/save_unified_frame_title/',
                            dataType: 'json',
                            data: data,
                            timeout: 60000,
                            success: function (response) {
                              alert(gettext("Nazwa ramy zosała zapisana."));
                              show_info('Nazwa ramy zosała zapisana.');
                              $.prompt.close();
                              this.loadFrame();
                            }.bind(this),
                            error: function (request, errorType, errorMessage) {
                              show_error(errorType + ' (' + errorMessage + ')');
                              $.prompt.close();
                            }
                          });
                        } else {
                          alert(gettext("Nazwa zunifikowanej ramy nie jest unikalna. Proszę wybrać inną nazwę."));
                        }
                      }.bind(this),
                      error: function (request, errorType, errorMessage) {
                        alert(gettext("Wystapił błąd: " + errorType + ' (' + errorMessage + ')'));
                        show_error(errorType + ' (' + errorMessage + ')');
                        $.prompt.close();
                      }
                    });
                  }
                }
              }.bind(this)
            }
          }
          $.prompt(change_title_popup);
        },
        roleStrMapping(roleName) {
          if(roleName === 'role') {
            return 'required';
          } else if(roleName === 'modifier') {
            return 'typical';
          } else {
            return roleName;
          }
        },
        changeRole() {
          if (!this.active_unified_frame_argument) {
            alert(gettext("Zaznacz argument, dla którego chcesz wybrać rolę."));
          } else {
            const existingSelect = function () {
              let selected_unified_frame_argument = this.unified_frame_arguments.find(o => o.id === this.active_unified_frame_argument.id);
              if (!selected_unified_frame_argument.proposed_roles) {
                return gettext('Brak ról do wyboru.')
              }
              return selected_unified_frame_argument.proposed_roles.map(role => {
                return `<label><input type="radio" name="roles" value="${role.id}" /> ${role.str}</label><br />`;
              }).join("");
            }.bind(this);
    
            const newSelect = function () {
              let rolesHTML = roles.map(role => {
                return `<label style="background-color:rgb(${role.color})"><input type="radio" name="role" value="${role.id}" /> ${role.role}</label><br />`;
              }).join("");
              let attributesHTML = role_attributes.map(attribute => {
                return `<label><input type="radio" name="attribute" value="${attribute.id}" /> ${attribute.attribute}</label><br />`;
              }).join("");
              let subAttributesHTML = role_sub_attributes.map(subAttribute => {
                return `<label><input type="radio" name="sub_attribute" value="${subAttribute.id}" /> ${subAttribute.sub_attribute}</label><br />`;
              }).join("");
              // const roleTypeHTML = ['required', 'typical'].map(type => {
              const roleTypeHTML = ['role', 'modifier'].map(type => {
                return `<label><input type="radio" name="role_type" value="${type}" /> ${this.roleStrMapping(type)}</label><br />`;
              }).join("");
              return '<div class="row">' +
                  '<div class="column"><div class="role_select_header">Type</div>' + roleTypeHTML + '</div>' +
                  '<div class="column"><div class="role_select_header">Role</div>' + rolesHTML + '</div>' +
                  '<div class="column"><div class="role_select_header">Atrybuty</div>' + attributesHTML + '</div>' +
                  '<div class="column"><div class="role_select_header">Podatrybuty</div>' + subAttributesHTML + '</div>' +
                  '</div>';
            }.bind(this);
    
            let change_role_popup = {
              state0: {
                title: 'Wybór roli',
                html: 'Wybierz lub dodaj rolę',
                buttons: {Wybierz: 0, Dodaj: 1, Koniec: -1},
                focus: -1,
                submit: function (e, v, m, f) {
                  if (v == -1) {
                    e.preventDefault();
    
                    this.loadFrame();
    
                    $.prompt.close();
                  }
                  if (v === 0) {
                    e.preventDefault();
                    $.prompt.goToState('state1');
                  }
                  if (v == 1) {
                    e.preventDefault();
                    $.prompt.goToState('state2');
                  }
                }.bind(this)
              },
              state1: {
                title: 'Wybierz rolę',
                html: existingSelect(),
                buttons: {Anuluj: -1, Zatwierdź: 1},
                focus: -1,
                submit: function (e, v, m, f) {
                  if (v == -1) {
                    e.preventDefault();
                    $.prompt.goToState('state0');
                  }
                  if (v == 1) {
                    e.preventDefault();
                    normalizeFormData(f.roles).map(role_id => {
                      const data = {
                        'unified_frame_id': this.unified_frame.id,
                        'complement_id': this.active_unified_frame_argument.id,
                        'role_id': role_id
                      };
                      $.ajax({
                        type: 'post',
                        url: '/' + lang + '/unifier/save_selected_role/',
                        dataType: 'json',
                        data: data,
                        timeout: 60000,
                        success: function (response) {
                          show_info('Wybrana rola zosała zapisana');
                          $.prompt.goToState('state0');
                        }.bind(this),
                        error: function (request, errorType, errorMessage) {
                          show_error(errorType + ' (' + errorMessage + ')');
                          $.prompt.close();
                        }
                      });
                    });
                  }
                }.bind(this)
              },
              state2: {
                title: 'Dodaj rolę',
                html: newSelect(),
                buttons: {Anuluj: -1, Zatwierdź: 1},
                focus: -1,
                submit: function (e, v, m, f) {
                  if (v == -1) {
                    e.preventDefault();
                    $.prompt.goToState('state0');
                  }
                  if (v == 1) {
                    e.preventDefault();
    
                    const role_id = normalizeFormData(f.role)[0];
                    const role_type = normalizeFormData(f.role_type)[0];
    
                    if (role_id != null && role_type != null) {
                      const attribute_id = normalizeFormData(f.attribute)[0];
    
                      const sub_attribute_id = normalizeFormData(f.sub_attribute)[0];
    
                      const data = {
                        'unified_frame_id': this.unified_frame.id,
                        'complement_id': this.active_unified_frame_argument.id,
                        'role_type': role_type,
                        'role_id': role_id,
                        'attribute_id': attribute_id,
                        'sub_attribute_id': sub_attribute_id
                      };
                      $.ajax({
                        type: 'post',
                        url: '/' + lang + '/unifier/save_new_role/',
                        dataType: 'json',
                        data: data,
                        timeout: 60000,
                        success: function (response) {
                          show_info('Nowa rola zosała zapisana');
                          $.prompt.goToState('state0');
                        }.bind(this),
                        error: function (request, errorType, errorMessage) {
                          show_error(errorType + ' (' + errorMessage + ')');
                          $.prompt.close();
                        }
                      });
                    } else {
                      alert(gettext("Musisz wybrać typ oraz rolę."));
                    }
                  }
                }.bind(this)
              }
            };
            $.prompt(change_role_popup);
          }
        },
        addArgument() {
          const data = {'unified_frame_id': this.unified_frame.id};
          $.ajax({
            type: 'post',
            url: '/' + lang + '/unifier/add_argument/',
            dataType: 'json',
            data: data,
            timeout: 60000,
            success: function (response) {
              show_info('Nowy argument zosał dodany');
              this.loadFrame();
            }.bind(this),
            error: function (request, errorType, errorMessage) {
              show_error(errorType + ' (' + errorMessage + ')');
              $.prompt.close();
            }
          });
        },
        getSlowalFrameArgumentsBy(unified_frame_argument) {
          const slowalFrameArgumentIds = [];
          for (let i in this.unified_frame.slowal_frame_mapping) {
            const slowal_frame_mapping = this.unified_frame.slowal_frame_mapping[i];
            const slowalFrame = this.frames.find(frame => frame.id === slowal_frame_mapping.slowal_frame_id);
            if(slowalFrame != null) {
              for (let j in slowal_frame_mapping.slowal_frame_argument_mapping) {
                const slowal_frame_argument_mapping = slowal_frame_mapping.slowal_frame_argument_mapping[j];
                if (slowal_frame_argument_mapping.unified_frame_agrument_id == unified_frame_argument.id) {
                  const slowalFrameArgument = slowalFrame.arguments.find(arg => arg.argument_id === slowal_frame_argument_mapping.slowal_frame_agrument_id);
                  slowalFrameArgumentIds.push(slowalFrameArgument);
                }
              }
            }
          }
          return slowalFrameArgumentIds;
        },
        removeArgument() {
          if (!this.active_unified_frame_argument) {
            alert(gettext("Zaznacz argument, który chcesz usunąć."));
          } else {
            let hasSlowalFrameArgumentMapping = false;
            for (let i in this.unified_frame.slowal_frame_mapping) {
              const slowal_frame_mapping = this.unified_frame.slowal_frame_mapping[i];
              for (let j in slowal_frame_mapping.slowal_frame_argument_mapping) {
                const slowal_frame_argument_mapping = slowal_frame_mapping.slowal_frame_argument_mapping[j];
                if (slowal_frame_argument_mapping.unified_frame_agrument_id == this.active_unified_frame_argument.id) {
                  hasSlowalFrameArgumentMapping = true;
                  break;
                }
              }
            }
            if (hasSlowalFrameArgumentMapping) {
              alert(gettext("Zaznaczony argument nie może zostać usunięty - podpięte ramy posiadają do niego dowiązania."));
            } else {
              const data = {
                'unified_frame_id': this.unified_frame.id,
                'complement_id': this.active_unified_frame_argument.id
              };
              $.ajax({
                type: 'post',
                url: '/' + lang + '/unifier/remove_argument/',
                dataType: 'json',
                data: data,
                timeout: 60000,
                success: function (response) {
                  show_info('Wybrany argument zosał usunięty');
                  this.loadFrame();
                }.bind(this),
                error: function (request, errorType, errorMessage) {
                  show_error(errorType + ' (' + errorMessage + ')');
                  $.prompt.close();
                }
              });
            }
          }
        },
        duplicate() {
          let title = this.unified_frame.title != null ? this.unified_frame.title : '';
          const duplicate_popup = {
            state0: {
              title: 'Podaj nazwę zduplikowanej ramy',
              html: '<input type="text" size="32" value="" name="title" />',
              buttons: {Anuluj: 0, Zapisz: 1},
              focus: -1,
              submit: function (e, v, m, f) {
                if (v == 0) {
                  e.preventDefault();
                  $.prompt.close();
                }
                if (v === 1) {
                  e.preventDefault();
                  const title = f.title;
    
                  if (this.hasWhiteSpace(title)) {
                    alert(gettext("Nazwa zunifikowanej ramy nie może zawierać białych znaków."));
                  } else {
                    const dataCheckUniq = {'unified_frame_title': title};
                    $.ajax({
                      type: 'post',
                      url: '/' + lang + '/unifier/check_unified_frame_title_uniq/',
                      dataType: 'json',
                      data: dataCheckUniq,
                      timeout: 60000,
                      success: function (response) {
    
                        if(response.exists === false) {
                          const data = {
                            'unified_frame_id': this.unified_frame.id,
                            'target_unified_frame_title': title
                          };
                          $.ajax({
                            type: 'post',
                            url: '/' + lang + '/unifier/duplicate_unified_frame/',
                            dataType: 'json',
                            data: data,
                            timeout: 60000,
                            success: function (response) {
                              show_info('Zunifikowana rama została zduplikowana.');
                              this.currentPreviewedUnifiedFrameId = response.unified_frame_id;
                              this.$emit('refreshEntriesList');
                              $.prompt.close();
                            }.bind(this),
                            error: function (request, errorType, errorMessage) {
                              show_error(errorType + ' (' + errorMessage + ')');
                              $.prompt.close();
                            }
                          });
                        } else {
                          alert(gettext("Nazwa zunifikowanej ramy nie jest unikalna. Proszę wybrać inną nazwę."));
                        }
                      }.bind(this),
                      error: function (request, errorType, errorMessage) {
                        alert(gettext("Wystapił błąd: " + errorType + ' (' + errorMessage + ')'));
                        show_error(errorType + ' (' + errorMessage + ')');
                        $.prompt.close();
                      }
                    });
                  }
                }
              }.bind(this)
            }
          }
          $.prompt(duplicate_popup);
        },
        changeUnifiedFrameStatusToReadyOrVerified() {
          if (this.isSuperLeksykograf()) {
            let hasBadContestedFrames = this.frames.find(frame => frame.status === 'B' || frame.status === 'C');
            if (hasBadContestedFrames) {
              alert(gettext("Przed zmianą statusu ramy zunifikowanej na 'Sprawdzoną', rama nie powinna posiadać niepowierdzonych ram slowala o statusie 'Niepasująca' lub 'Błędna'."));
            } else {
              this.changeUnifiedFrameStatusToReadyOrVerifiedByPath('change_unified_frame_status_to_verified_by_superleksykograf');
            }
          } else {
            this.changeUnifiedFrameStatusToReadyOrVerifiedByPath('change_unified_frame_status_to_ready');
          }
        },
        changeUnifiedFrameStatusToReadyOrVerifiedByPath(url_path) {
          let foundNotVerifiedFrame = this.frames.find(frame => frame.status !== 'G' && frame.status !== 'S' && frame.status !== 'B' && frame.status !== 'C');
          if (foundNotVerifiedFrame) {
            alert(gettext("Wszystkie podpięte ramy powinny być zweryfikowane."));
          } else {
            let roleDict = {};
            let hasPreferenceSelected = true;
            let argument_cnt = this.unified_frame_arguments.length;
            for (let i in this.unified_frame_arguments) {
              const argument = this.unified_frame_arguments[i];
              const slowal_frame_stastuses = this.get_slowal_frame_stastuses_by_unified_frame_argument(argument.id);
              if(slowal_frame_stastuses.has('G')) {
                if (argument.role) {
                  roleDict[argument.role.str] = argument.role;
                }
                if (!argument.preferences || argument.preferences.length == 0) {
                  hasPreferenceSelected = false;
                }
              } else {
                argument_cnt--;
              }
            }
            if (Object.keys(roleDict).length === argument_cnt && hasPreferenceSelected) {
              //all roles are set, and are uniq
    
              if(!this.has_full_empty_arguments()) {
                //TODO: aktywne preferencje w argumencie nie znajdują się w relacji hipo-/hiperonimii.
                const data = {'unified_frame_id': this.unified_frame.id};
                $.ajax({
                  type: 'post',
                  url: '/' + lang + '/unifier/' + url_path + '/',
                  dataType: 'json',
                  data: data,
                  timeout: 60000,
                  success: function (response) {
                    alert(gettext("Status ramy zunifikowanej został zmieniony."));
                    show_info('Status ramy został zmieniony');
                    this.$emit('refreshEntriesList');
                    this.loadFrame();
                  }.bind(this),
                  error: function (request, errorType, errorMessage) {
                    alert(gettext("Wystąpił błąd: " + errorType + ' (' + errorMessage + ')'));
                    show_error(errorType + ' (' + errorMessage + ')');
                  }
                });
              } else {
                alert(gettext("Rama posiada agrument, dla którego wszystkie ramy walentego są typu 'Empty'. Należy usunąć taki argument."));
              }
            } else {
              alert(gettext("Role dla wszystkich argumentów powinny być ustawione oraz unikalne. Preferencje selekcyjne dla wszystkich argumentów powinny być ustawione."));
            }
          }
        },
        change_slowal2unified_frame_argument_mapping(slowal_frame) {
          if (this.active_slowal_frame === null) {
            alert(gettext("Zamiany pozycji argumentów w ramie wymaga wybrania ramy."));
          } else if (slowal_frame !== this.active_slowal_frame) {
            alert(gettext("Zamiany pozycji argumentów w ramie jest możliwa tylko dla wskazanej wczesniej ramy."));
          } else if (this.selectedFrameArguments && this.selectedFrameArguments.length == 2) {
            const data = {
              'unified_frame_id': this.unified_frame.id,
              'slowal_frame_id': slowal_frame.id,
              'slowal_frame_selected_arguments': JSON.stringify(this.selectedFrameArguments.map(arg => arg.argument_id ? arg.argument_id : -arg.unified_frame_argument_id)),
            };
            $.ajax({
              type: 'post',
              url: '/' + lang + '/unifier/change_slowal2unified_fram_argument_mapping/',
              dataType: 'json',
              data: data,
              timeout: 60000,
              success: function (response) {
                show_info('Argumenty w ramie zostały zmienione');
                this.loadFrame();
              }.bind(this),
              error: function (request, errorType, errorMessage) {
                show_error(errorType + ' (' + errorMessage + ')');
              }
            });
          } else {
            alert(gettext("Zamiany pozycji argumentu w ramie wymaga zaznaczenia dokładnie 2 argumentów."));
          }
        },
        isSuperLeksykograf() {
          return has_permission("users.view_assignment");
        },
        isFrameVerified(frame) {
          const isSuperLeksykograf = this.isSuperLeksykograf();
          return (!isSuperLeksykograf && frame.status === 'G') || (isSuperLeksykograf && frame.status === 'S')
        },
        select_slowal_frame_req(to_invoke) {
          if (this.active_slowal_frame) {
            to_invoke();
          } else {
            alert(gettext("Wybierz ramę, dla której chcesz zmienić status."));
          }
        },
        slowal_frame_status_change_with_confirmation(api_method) {
          this.select_slowal_frame_req(() => {
            const frame = this.active_slowal_frame;
            $.ajax({
              type: 'post',
              url: `/${lang}/semantics/${api_method}/${frame.id}/`,
              dataType: 'json',
              timeout: 60000,
            }).then(() => {
              show_info('Status ramy został zmieniony');
              this.$emit('refreshEntriesList');
              this.loadFrame();
            });
          });
        },
        change_slowal_frame_status(status) {
          this.select_slowal_frame_req(() => {
            let frame = this.active_slowal_frame;
    
            if (status === 'C') {
              this.setup_notes_slowal_frame_with_title_and_body("Niedopasowana jednostka (identyfikator jednostki)", "Do zatwierdzenia uznanie ramy Walentego jednostek (lista jednostek)" +
                  "za niedopasowana do zunifikowanej ramy (identyfikator) przez (Leksykograf).");
            } else if (status === 'B') {
              this.setup_notes_slowal_frame_with_title_and_body("Błędna jednostka (identyfikator jednostki)", "Do zatwierdzenia uznanie ramy Walentego jednostek (lista jednostek)" +
                  "za niedopasowana do zunifikowanej ramy (identyfikator) przez (Leksykograf).");
            }
    
            send_post_request('/unifier/change_slowal_frame_status/',
                    {
                      'unified_frame_id': this.unified_frame.id,
                      'slowal_frame_id': frame.id,
                      'status': status
                    },
                    (reponse) => {
                      show_info('Status ramy został zmieniony');
                      alert(gettext("Status ramy został zmieniony."));
                      this.$emit('refreshEntriesList');
                      this.loadFrame();
                    },
                    (request, errorType, errorMessage) => {
                      show_error(errorType + ' (' + errorMessage + ')');
                      alert(gettext("Status ramy niew został zmieniony. Błąd: "+errorType + ' (' + errorMessage + ')'));
                    })
          });
        },
        slowal_frame_ready_rollback(status) {
          this.select_slowal_frame_req(() => {
            let frame = this.active_slowal_frame;
            const isSuperLeksykograf = this.isSuperLeksykograf();
            if(!isSuperLeksykograf && this.unified_frame.status === 'G') {
              alert(gettext("Nie można zmienić statusu ramy, kiedy rama zunifikowana posiada status 'Gotowa'."));
            } else {
              let status = null;
              if (!isSuperLeksykograf && frame.status === 'G') {
                //przywracamy O
                status = 'O';
              } else if (!isSuperLeksykograf && frame.status === 'O') {
                //ustawiany na Gotowe
                status = 'G';
              } else if (isSuperLeksykograf && frame.status === 'S') {
                //ustawiany Sprawdzone
                status = 'G';
              } else if (isSuperLeksykograf) {
                status = 'S';
              } else {
                alert(gettext("Nie można zmienić statusu ramy."));
              }
    
              if (status != null) {
                this.change_slowal_frame_status(status);
              }
            }
          });
        },
        isFrameVisible(frame) {
          return !this.hidden_frame_ids.includes(frame.id) && !this.hidden_frame_status_set.includes(frame.status) &&
                  ((frame.status != 'B' && frame.status != 'C') || this.isSuperLeksykograf());
        },
        getInvisibleFrameCnt() {
            const invisibleFrames = this.frames.filter(frame => !this.isFrameVisible(frame));
            return invisibleFrames.length;
        },
        changeStatusButtonTitleToDefault() {
          const isSuperLeksykograf = this.isSuperLeksykograf();
          this.statusButtonTitle = isSuperLeksykograf ? 'Sprawdź' : 'Gotowe';
        },
        deselectSlowalFrameSelectedElements() {
          this.subentries.forEach(subentry => {
            subentry.schemata.forEach(s => {
              s.selected = false;
            });
          });
          this.frames.forEach(frame => {
            frame.lexical_units.forEach(lu => {
              lu.selected = false;
            });
            frame.arguments.forEach(argument => {
              argument.selected = false;
            });
          });
          this.examples.forEach(example => {
            example.selected = false;
          });
          this.selectedLus = [];
          this.selectedFrameArguments = [];
          this.selectedSchemas = [];
          this.selectedExamples = [];
        },
        slowalFrameSelected(frame) {
          this.deselectSlowalFrameSelectedElements();
          if (this.active_slowal_frame === frame) {
            this.active_slowal_frame = null;
            if (!this.readOnly) {
              this.setup_notes_unified_frame();
              this.changeStatusButtonTitleToDefault();
            }
          } else {
            this.active_slowal_frame = frame;
            if (!this.readOnly) {
              this.setup_notes_slowal_frame()
              if (this.isFrameVerified(frame)) {
                this.statusButtonTitle = 'Przywróć';
              }
            }
          }
        },
        isSelectedFrame(frame) {
          if (this.active_slowal_frame) {
            return frame.id === this.active_slowal_frame.id;
          } else {
            return false;
          }
        },
        extract_frames_to_new_frame() {
    
          const existingSelect = function () {
            return this.frames.map(frame => {
              return `<label><input type="checkbox" name="frames" value="${frame.id}" /> ${lexical_units2dom(frame.lexical_units)}</label><br />`;
            }).join("");
          }.bind(this);
    
          const extract_frames_to_new_frame_popup = {
            state0: {
              title: 'Podaj nazwę zduplikowanej ramy',
              html: existingSelect,
              buttons: {Anuluj: 0, Wydziel: 1},
              focus: -1,
              submit: function (e, v, m, f) {
                if (v == 0) {
                  e.preventDefault();
                  $.prompt.close();
                }
                if (v === 1) {
                  e.preventDefault();
                  let frame_ids = normalizeFormData(f.frames);
                  const data = {
                    'unified_frame_id': this.unified_frame.id, 'slowal_frame_ids': JSON.stringify(frame_ids),
                    'target_unified_frame_id': ''
                  };
                  $.ajax({
                    type: 'post',
                    url: '/' + lang + '/unifier/extract_frames_to_new_frame/',
                    dataType: 'json',
                    data: data,
                    timeout: 60000,
                    success: function (response) {
                      show_info('Ramy zostały wydzielone do nowej ramy zunifikowanej.');
                      this.loadFrame();
                      let newUnifiedFrameId = response.unified_frame_id;
                      this.currentPreviewedUnifiedFrameId = newUnifiedFrameId;
                      $.prompt.close();
                    }.bind(this),
                    error: function (request, errorType, errorMessage) {
                      show_error(errorType + ' (' + errorMessage + ')');
                      $.prompt.close();
                    }
                  });
                }
              }.bind(this)
            }
          }
          $.prompt(extract_frames_to_new_frame_popup);
        },
        extract_frame_to_preview_frame() {
          if (this.currentPreviewedUnifiedFrameId !== -1 && this.currentPreviewedUnifiedFrameId !== this.unified_frame.id) {
            let target_unified_frame_id = this.currentPreviewedUnifiedFrameId;
            const data = {
              'unified_frame_id': this.unified_frame.id, 'slowal_frame_ids': JSON.stringify([this.active_slowal_frame.id]),
              'target_unified_frame_id': target_unified_frame_id
            };
            $.ajax({
              type: 'post',
              url: '/' + lang + '/unifier/extract_frames_to_new_frame/',
              dataType: 'json',
              data: data,
              timeout: 60000,
              success: function (response) {
                show_info('Zaznaczona rama została przeniosiona.');
                this.active_slowal_frame = null;
                this.loadFrame();
                this.internalForceRefresh += 1;
              }.bind(this),
              error: function (request, errorType, errorMessage) {
                show_error(errorType + ' (' + errorMessage + ')');
              }
            });
          }
        },
        changePreviewedUnifiedFrameId(unifiedFrameId) {
          this.currentPreviewedUnifiedFrameId = unifiedFrameId;
        },
        swapUnifiedFrames() {
          if (this.currentPreviewedUnifiedFrameId !== -1 && this.unified_frame.id !== this.currentPreviewedUnifiedFrameId) {
            this.$emit("swapFrames", this.currentPreviewedUnifiedFrameId);
          }
        },
        hideFrameOfStatus(status, event) {
          if(event) {
            if (event.target.checked === true) {
              this.hidden_frame_status_set.push(status);
            } else {
              var index = this.hidden_frame_status_set.indexOf(status);
              if (index !== -1) {
                this.hidden_frame_status_set.splice(index, 1);
              }
            }
          }
        },
        getArgumentCSS(argument) {
          return (argument.role ? argument.role.str + ' ' : '') + (argument == this.active_unified_frame_argument ? 'active' : '');
        },
        meaningLuSelected(selectedLus) {
          this.selectedLus = selectedLus;
        },
        insideFrameSelectionChanged(selectedFrameArguments) {
          this.selectedFrameArguments = selectedFrameArguments;
        },
        schemataSelected(schemas) {
          this.selectedSchemas = schemas;
        },
        exampleSelected(selectedExamples) {
          this.selectedExamples = selectedExamples;
        },
        deleteUnifiedFrames() {
          if (!confirm(gettext("Czy na pewno chcesz zunifikowaną ramę?"))) return false;
          $.ajax({
            type: 'post',
            url: '/' + lang + `/unifier/delete_unified_frame/${this.unified_frame.id}/`,
            dataType: 'json',
            timeout: 60000,
            success: function (response) {
              show_info('Zunifikowana rama została usunięta.');
              this.$emit('refreshEntriesList');
              this.$emit("swapFrames", null);
            }.bind(this),
            error: function (request, errorType, errorMessage) {
              show_error(errorType + ' (' + errorMessage + ')');
            }
          });
        },
        isReadOnlyForSuperLeksykograf() {
          return (this.isSuperLeksykograf() && this.unified_frame.status === 'O') && this.unified_frame.assignee_username !== window.USER_USERNAME;
        },
        hideFrame(frame) {
          this.hidden_frame_ids.push(frame.id);
        },
        resetFrameVisibilityRestictions() {
          this.hidden_frame_ids = [];
          this.hidden_frame_status_set = [];
          $( 'input[id="checkbox-status-o"]' ).prop('checked', false);
          $( 'input[id="checkbox-status-c"]' ).prop('checked', false);
          $( 'input[id="checkbox-status-g"]' ).prop('checked', false);
          $( 'input[id="checkbox-status-s"]' ).prop('checked', false);
          $( 'input[id="checkbox-status-b"]' ).prop('checked', false);
        },
        createSlowalContestedStatusButtonLabel() {
          return this.isSuperLeksykograf() ? this.active_slowal_frame && this.active_slowal_frame.status === 'C' ? 'Potwierdź niepasująca' : 'Nowa' : 'Niepasująca';
        },
        createSlowalBadStatusButtonLabel() {
          return this.isSuperLeksykograf() ? this.active_slowal_frame && this.active_slowal_frame.status === 'B' ? 'Potwierdź zła' : 'Zła' : 'Błędna';
        },
        frames2lexical_units(frames) {
          const lexical_units = []
          for (let i in frames) {
            const frame = frames[i];
            for (let j in frame.lexical_units) {
              const lexical_unit = frame.lexical_units[j];
              lexical_unit.opinion = frame.opinion;
              lexical_unit.opinion_key = frame.opinion_key;
              lexical_unit.frame_status = frame.status;
              lexical_units.push(lexical_unit);
            }
          }
          return lexical_units;
        },
        fulfill_slowal_frames_arguments_with_empty_elems(unified_frame, slowal_frames) {
          for (let i in unified_frame.slowal_frame_mapping) {
            const slowal_frame_mapping = unified_frame.slowal_frame_mapping[i];
            let slowal_frame = slowal_frames.find(o => o.id === slowal_frame_mapping.slowal_frame_id);
            if(slowal_frame != null) {
              let new_slowal_frame_arguments = [];
              for (let j in unified_frame.arguments) {
                const unified_frame_argument = unified_frame.arguments[j];
                let unified_frame_argument_mapping = slowal_frame_mapping.slowal_frame_argument_mapping.find(o => o.unified_frame_agrument_id === unified_frame_argument.id);
                let slowal_frame_argument = null;
                if (unified_frame_argument_mapping == null) {
                  slowal_frame_argument = {
                    'str': 'Empty',
                    'unified_frame_argument_id': unified_frame_argument.id,
                    'id': slowal_frame.id + '-_' + (unified_frame_argument.id),
                    'role': 'Empty',
                    'role_type': 'Empty',
                    'preferences': [],
                    'proposed_roles': [],
                  }
                } else {
                  slowal_frame_argument = slowal_frame.arguments.find(o => o.argument_id === unified_frame_argument_mapping.slowal_frame_agrument_id);
                  slowal_frame_argument['unified_frame_argument_id'] = unified_frame_argument.id;
                }
                new_slowal_frame_arguments.push(slowal_frame_argument)
              }
              slowal_frame.arguments = new_slowal_frame_arguments;
            }
          }
        },
        has_full_empty_arguments() {
          let non_empty_unified_frame_arguments = {}
          for (let i in this.unified_frame.slowal_frame_mapping) {
            const slowal_frame_mapping = this.unified_frame.slowal_frame_mapping[i];
            let slowal_frame = this.frames.find(o => o.id === slowal_frame_mapping.slowal_frame_id);
            if(slowal_frame != null) {
              for (let j in this.unified_frame.arguments) {
                const unified_frame_argument = this.unified_frame.arguments[j];
                let unified_frame_argument_mapping = slowal_frame_mapping.slowal_frame_argument_mapping.find(o => o.unified_frame_agrument_id === unified_frame_argument.id);
                if (unified_frame_argument_mapping) {
                  non_empty_unified_frame_arguments[unified_frame_argument.id] = unified_frame_argument;
                }
              }
            }
          }
          return Object.keys(non_empty_unified_frame_arguments).length !== this.unified_frame.arguments.length;
        },
        get_slowal_frame_stastuses_by_unified_frame_argument(unified_frame_argument_id) {
          let slowal_frame_stastuses = new Set()
          for (let i in this.unified_frame.slowal_frame_mapping) {
            const slowal_frame_mapping = this.unified_frame.slowal_frame_mapping[i];
            let slowal_frame = this.frames.find(o => o.id === slowal_frame_mapping.slowal_frame_id);
            if(slowal_frame != null) {
              let unified_frame_argument_mapping = slowal_frame_mapping.slowal_frame_argument_mapping.find(o => o.unified_frame_agrument_id === unified_frame_argument_id);
              if (unified_frame_argument_mapping) {
                slowal_frame_stastuses.add(slowal_frame.status);
              }
            }
          }
          return slowal_frame_stastuses;
        },
        isReadOnly() {
            return this.readOnly || (this.unified_frame.status === 'G' && !this.isSuperLeksykograf());
        },
        hideLexicalUnits() {
          this.lexicalUnitsVisible = false;
        },
        showLexicalUnits() {
          this.lexicalUnitsVisible = true;
        },
        hideSelectionalPreferencies() {
          this.selectionalPreferenciesVisible = false;
        },
        showSelectionalPreferencies() {
          this.selectionalPreferenciesVisible = true;
        },
        attachSlowalFrame() {
          const attach_slowal_frame_popup = {
            state0: {
              title: 'Podpinanie dodatkowej ramy',
              html: "<input id='slowal_frame_selection' type='text' name='context'>",
              buttons: {Anuluj: 0, Zapisz: 1},
              focus: -1,
              submit: function (e, v, m, f) {
                if (v == 0) {
                  $.prompt.close();
                }
                if (v === 1) {
                  e.preventDefault();
                  const lu_base = f.context;
    
                  send_post_request('/unifier/attach_lu_to_unified_frame/',
                          {'lu_base': lu_base,
                                'unified_frame_id': this.unified_frame.id},
                          (reponse) => {
                            show_info('Rama została podpięta.');
                            alert(gettext("Rama została podpięta."));
                            this.$emit('refreshEntriesList');
                            this.loadFrame();
                            $.prompt.close();
                          },
                          (request, errorType, errorMessage) => {
                            show_error(errorType + ' (' + errorMessage + ')');
                            alert(gettext("Status ramy niew został zmieniony. Błąd: "+errorType + ' (' + errorMessage + ')'));
                            $.prompt.close();
                          })
                }
              }.bind(this)
            }
          }
          $.prompt(attach_slowal_frame_popup);
          $('#slowal_frame_selection').autocomplete({
            select: function (event, ui) {
            },
            source: function (req, add) {
              fetch(`/${lang}/entries/free_slowal_frame_lookup/?` + new URLSearchParams(req))
                      .then(function (response) {
                        return response.json();
                      })
                      .then(function (data) {
                        add(data['result']);
                      });
            },
          });
        },
        reject_slowal_frame_ready_status() {
          this.select_slowal_frame_req(() => {
            let selectedFrame = this.active_slowal_frame;
            send_post_request(`/unifier/reject_unified_frame_ready_status/`,
                    {"slowal_frame_id" : selectedFrame.id, "unified_frame_id" : this.unified_frame.id},
                    (reponse) => {
                      show_info('Rama została zwrócona do obróbki.');
                      alert(gettext("Rama została zwrócona do obróbki."));
                      this.$emit('refreshEntriesList');
                      this.loadFrame();
                      $.prompt.close();
                    },
                    (request, errorType, errorMessage) => {
                      show_error(errorType + ' (' + errorMessage + ')');
                      alert(gettext("Status ramy nie został zmieniony. Błąd: " + errorType + ' (' + errorMessage + ')'));
                      $.prompt.close();
                    })
          });
        },
        reject_unified_frame_ready_status() {
          send_post_request(`/unifier/reject_unified_frame_ready_status/`,
                  {"slowal_frame_id" : -1, "unified_frame_id" : this.unified_frame.id},
                  (reponse) => {
                    show_info('Zunifikowana rama została zwrócona do obróbki.');
                    alert(gettext("Zunifikowana rama została zwrócona do obróbki."));
                    this.$emit('refreshEntriesList');
                    this.loadFrame();
                    $.prompt.close();
                  },
                  (request, errorType, errorMessage) => {
                    show_error(errorType + ' (' + errorMessage + ')');
                    alert(gettext("Status ramy nie został zmieniony. Błąd: " + errorType + ' (' + errorMessage + ')'));
                    $.prompt.close();
                  })
        }
      },
      mounted() {
    
        if(this.unifiedFrameId) {
          this.loadFrame();
        }
    
        this.changeStatusButtonTitleToDefault();
        if(!this.readOnly) {
          Split(['#semantics-frames-pane', '#semantics-schemata-pane'], {
            sizes: [40, 60],
            minSize: 10,
            gutterSize: 4,
            elementStyle: (dimension, size, gutterSize) => {
              return {
                'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
              }
            },
          });
          Split(['#semantics-unified-frame-pane', '#semantics-slowal-frames-pane', '#examples'], {
            sizes: [40, 40, 20],
            direction: 'vertical',
            gutterSize: 4,
            minSize: 10,
          });
        } else {
          Split(['#semantics-unified-frame-pane-preview', '#semantics-slowal-frames-pane-preview', '#examples-preview'], {
            sizes: [40, 40, 20],
            direction: 'vertical',
            gutterSize: 4,
            minSize: 10,
          });
        }
      }
    });
    
    export default LexicalUnitEdit;
    </script>
    
    <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="!isReadOnly() && !isReadOnlyForSuperLeksykograf()" class="table-button-menu sticky-top" cellspacing="1">
              <tr style="background-color: white;">
                <td class="table-button-menu-td" id="change-title" @click="changeTitle" style="padding: 10px 15px 10px 15px; color: #000000;">Zmień nazwę</td>
                <td class="table-button-menu-td" id="add-arg" @click="addArgument" style="padding: 10px 15px 10px 15px; color: #000000;">Dodaj argum.</td>
                <td class="table-button-menu-td" style="padding: 10px 15px 10px 15px; color: #000000;" @click="addSelectivePreference">Dodaj prefer.</td>
                <td class="table-button-menu-td" style="padding: 10px 15px 10px 15px; color: #000000;" @click="changeUnifiedFrameStatusToReadyOrVerified">{{isSuperLeksykograf() ? 'Sprawdzone' : 'Gotowe'}}</td>
                <td class="table-button-menu-td" id="duplicates" @click="duplicate" style="padding: 10px 15px 10px 15px; color: #000000;">Duplikuj</td>
    
                <td class="table-button-menu-td" v-if="isSuperLeksykograf()" id="return-to-process" style="padding: 10px 15px 10px 15px; color: #000000;" @click="reject_unified_frame_ready_status">Zwróć</td>
    
              </tr>
              <tr style="background-color: white;">
                <td class="table-button-menu-td" id="change-role" @click="changeRole" style="padding: 10px 15px 10px 15px; color: #000000;">Zmień rolę</td>
                <td class="table-button-menu-td" id="remove-arg" @click="removeArgument" style="padding: 10px 15px 10px 15px; color: #000000;">Usuń argum.</td>
                <td class="table-button-menu-td" id="remove-sel-pref" style="padding: 10px 15px 10px 15px; color: #000000;" @click="removeSelectionalPreference">Usuń prefer.</td>
                <td class="table-button-menu-td" id="change-windows" style="padding: 10px 15px 10px 15px; color: #000000;" @click="swapUnifiedFrames">Zamień okna</td>
    
                <td class="table-button-menu-td" v-if="frames.length == 0 || isSuperLeksykograf() || unified_frame.status == 'O'" id="delete-frame" style="padding: 10px 15px 10px 15px; color: #000000;" @click="deleteUnifiedFrames">Usuń ramę</td>
                <td class="table-button-menu-td" v-else id="empty-1" style="padding: 10px 15px 10px 15px; color: #000000;"></td>
    
                <td class="table-button-menu-td" v-if="isSuperLeksykograf()" id="empty-3" style="padding: 10px 15px 10px 15px; color: #000000;"></td>
    
    
              </tr>
            </table>
            
            <table v-if="!isReadOnly() && isReadOnlyForSuperLeksykograf()" class="table-button-menu sticky-top" style="width: 100px;" cellspacing="1">
              <tr style="background-color: white;">
                <td v-if="frames.length == 0 || isSuperLeksykograf()" id="delete-frame-ro" style="padding: 10px 15px 10px 15px; color: #000000;" @click="deleteUnifiedFrames">Usuń ramę</td>
              </tr>
            </table>
            
            <spinner />
            <div align="center">
            <div align="left" style="display: table;">
              <div class="unifiedFrame mt-3" v-bind:data-frame_id="unified_frame.id" id="unified-frame-title" v-html="unified_frame_title"></div>
              <table v-if="unified_frame.id" id="unified-frame-opac" class="table-borderless">
                <tr><td>
                <table id="unified-frame" class="m-0 table-borderless border border-secondary text-dark frame active">
                  <tbody>
                <tr>
                  <th scope="row" class="py-2 px-1 text-secondary role-header">Role</th>
    
                  <template v-for="argument in unified_frame_arguments">
                  <td
                    class="argument py-2 px-1 border-top border-left border-secondary role-column"
                        :class="getArgumentCSS(argument)"
                        @click="unifiedFrameArgumentSelected(argument)"
                        @mouseover="unifiedFrameArgumentHovered(argument)"
                        @mouseleave="unifiedFrameArgumentHovered(null)"
                    >
                    <span style="font-size: 0.8rem;">{{ roleStrMapping(argument.role_type) }}</span>
                    <div
                      v-if="argument.role"
                    >
                      [{{ argument.role.str }}]
                    </div>
                    <div v-else>
                      <ul class="ul-role">
                        <li v-for="proposed_role in argument.proposed_roles">
                          {{ proposed_role.str }}
                        </li>
                      </ul>
                    </div>
                  </td>
                  </template>
                  
                  
                </tr>
                <tr v-if="selectionalPreferenciesVisible">
                  <th scope="row" class="py-0 px-1 text-secondary role-header">Selectional preferences</th>
                  <td class="preferences py-0 px-0 border-top border-left border-secondary role-column align-top"
                      v-for='argument in unified_frame_arguments'
                      :key='argument.id'
                  >
                    <ul class="ul-preference" v-if="argument.preferences.length > 0">
                      <li v-for='preference in argument.preferences'>
                        <div
                          v-if="preference.url != null"
                          class="preference py-2 px-1 preference-bold"
                        >
                          <a class="synset-plwn" v-bind:href="preference.url" target="_blank">{{ preference.str }}</a>
                        </div>
                        <div v-else class="preference py-2 px-1 preference-bold">{{ preference.str }}</div>
                      </li>
                    </ul>
                    <ul class="ul-preference" v-if="unified_frame.status !== 'S' && argument.preferences.length == 0">
                      <li v-for="preference in slowal_frames2selecional_preferencies_mapping[argument.id]">
                        <span v-if="preference.url != null" class="preference py-2 px-1">
                          <a class="synset-plwn" v-bind:href="preference.url" target="_blank">{{ preference.str }}</a>
                        </span>
                        <span v-else class="preference py-2 px-1">{{ preference.str }}</span>
                        <info-tooltip v-if="preference.info" :text="preference.info" />
                      </li>
                    </ul>
                  </td>
                </tr>
              </tbody>
                </table>
                </td><td style="vertical-align: text-top; padding-left: 10px; padding-top: 8px; min-width: 50px;">
                  <span class="cursor-pointer" @click.stop="hideSelectionalPreferencies()" title="Ukryj preferencje selekcyjne">&#9652;</span> /
                  <span class="cursor-pointer" @click.stop="showSelectionalPreferencies()" title="Pokaż preferencje selekcyjne">&#9662;</span>
                </td></tr>
            </table>
            </div>
            <div v-if="unified_frame.id" class="lu-table mt-3 mb-3">
              <table class="m-0 table-borderless text-dark">
                <tr><td>
                <table class="m-0 border border-secondary text-dark">
                  <tbody>
                    <tr>
                      <th scope="row" class="py-2 px-1 text-secondary">Jednostka leksykalna</th>
                      <th scope="row" class="py-2 px-1 text-secondary">Opinia</th>
                      <th scope="row" class="py-2 px-1 text-secondary">Status</th>
                    </tr>
                    <tr class="preferences py-0 px-0 border-top border-left border-secondary"
                        v-if="lexicalUnitsVisible"
                      v-for='lexical_unit in lexical_units'
                    >
    <!--                  <template v-if="isFrameVisible(lexical_unit.frame_status)">-->
                        <td class="argument py-2 px-1 border-top border-left border-secondary">{{ lexical_unit.str }}</td>
                        <td class="argument py-2 px-1 border-top border-left border-secondary">
                          <img v-bind:src="img_prefix + 'entries/img/' +lexical_unit.opinion_key + '.svg'" width="12" height="12" v-bind:alt="lexical_unit.opinion">
                          {{ lexical_unit.opinion }}
                        </td>
                        <td class="argument py-2 px-1 border-top border-left border-secondary">[{{ lexical_unit.frame_status }}]</td>
    <!--                  </template>-->
                    </tr>
                  </tbody>
                </table>
                </td>
                  <td style="vertical-align: text-top; padding-left: 10px; padding-top: 8px; min-width: 50px;">
                    <span class="cursor-pointer" @click.stop="hideLexicalUnits()" title="Ukryj jednostki leksykalne">&#9652;</span> /
                    <span class="cursor-pointer" @click.stop="showLexicalUnits()" title="Pokaż jednostki leksykalne">&#9662;</span></td>
                </tr>
              </table>
              </div>
          </div>
          </div>
          <div :id="'semantics-slowal-frames-pane' + (readOnly ? '-preview' : '')" class="col w-100 p-0 overflow-auto">
            <table v-if="!isReadOnly() && unified_frame.id && !isReadOnlyForSuperLeksykograf()" class="table-button-menu sticky-top" cellspacing="1">
              <tr style="background-color: white;">
                <td id="wrong-frame" class="table-button-menu-td" style="padding: 10px 15px 10px 15px; color: #000000;" @click="!this.isSuperLeksykograf() ? change_slowal_frame_status('B') : this.active_slowal_frame && this.active_slowal_frame.status === 'B' ? slowal_frame_status_change_with_confirmation('frame_confirm_invalid') : change_slowal_frame_status('B')">{{createSlowalBadStatusButtonLabel()}}</td>
                <td id="hide-slowal-frame" style="padding: 10px 15px 10px 15px; color: #000000;">
                  <div class="d-flex">
                    Ukryj {{getInvisibleFrameCnt() > 0 ? '('+getInvisibleFrameCnt()+')' : ''}}:
                    O <input id="checkbox-status-o" type="checkbox" @change="hideFrameOfStatus('O', $event)" class="custom-control custom-checkbox mr-1">
                    <template v-if="this.isSuperLeksykograf()">B <input id="checkbox-status-b" type="checkbox" @change="hideFrameOfStatus('B', $event)" class="custom-control custom-checkbox mr-1"></template>
                    <template v-if="this.isSuperLeksykograf()">C <input id="checkbox-status-c" type="checkbox" @change="hideFrameOfStatus('C', $event)" class="custom-control custom-checkbox mr-1"></template>
                    G <input id="checkbox-status-g" type="checkbox" @change="hideFrameOfStatus('G', $event)" class="custom-control custom-checkbox mr-1">
                    <template v-if="this.isSuperLeksykograf()">S <input id="checkbox-status-s" type="checkbox" @change="hideFrameOfStatus('S', $event)" class="custom-control custom-checkbox mr-1"></template>
                  </div>
                </td>
                <td id="ready-slowal-frame" class="table-button-menu-td" style="padding: 10px 15px 10px 15px; color: #000000;" @click="slowal_frame_ready_rollback">{{ statusButtonTitle }}</td>
                <td id="attach-slowal-frame" class="table-button-menu-td" style="padding: 10px 15px 10px 15px; color: #000000;" @click="attachSlowalFrame">Podepnij</td>
              </tr>
              <tr style="background-color: white;">
                <td id="inccorect-slowal-frame" class="table-button-menu-td" style="padding: 10px 15px 10px 15px; color: #000000;" @click="slowal_frame_status_change_with_confirmation('frame_confirm_as_not_matching_unified_frame')">
                  {{createSlowalContestedStatusButtonLabel()}}
                </td>
                <td id="show-slowal-frame" class="table-button-menu-td" style="padding: 10px 15px 10px 15px; color: #000000;" @click="resetFrameVisibilityRestictions()">
                    Pokaż wszystkie
                </td>
                <td id="move-slowal-frame" class="table-button-menu-td" style="padding: 10px 15px 10px 15px; color: #000000;"
                    @click="extract_frame_to_preview_frame">
                    Przerzuć
                </td>
                <td v-if="this.isSuperLeksykograf() && this.active_slowal_frame && (this.active_slowal_frame.status === 'B' || this.active_slowal_frame.status === 'C' || this.active_slowal_frame.status === 'G')" id="reject-button" @click="reject_slowal_frame_ready_status" class="table-button-menu-td" style="padding: 10px 15px 10px 15px; color: #000000;">Zwróć</td>
                <td v-else id="empty-2" style="padding: 10px 15px 10px 15px; color: #000000;"></td>
              </tr>
            </table>
            <div id="semantics-frames">
              <template v-for="frame in frames">
                  <div class="row pt-3" style="flex-wrap: nowrap;" v-if="isFrameVisible(frame)">
                      <div class="col pl-5 pr-4">
                          <div class="row">
                            <div class="col frame px-0" id="lexical-unit">
                                <meaning-component
                                    :key="frame.lexical_units"
                                    :lexicalUnits="frame.lexical_units"
                                    :selectedExamples="selectedExamples"
                                    @meaning-lu-selected="meaningLuSelected"
                                ></meaning-component>
                            </div>
                            <div v-if="!isReadOnly() && !isReadOnlyForSuperLeksykograf()" class="col px-0" style="
                                  max-width: 15px;">
                               <div class="close" style="
                                  width: 15px;
                                  cursor: pointer;
                                  text-align: end;"
                                  @click="hideFrame(frame)"
                                  title="Ukryj ramę"
                              >&times;</div>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col px-0 frame mb-3 active"
                                @mouseenter="frame.hover=true"
                                @mouseleave="frame.hover=false"
                                @click="slowalFrameSelected(frame)"
                                :class="frame === active_slowal_frame ? 'active-frame' : frame.hover ? 'bg-highlight' : ''" >
                                  <slowal-frame-component 
                                      :frame="frame" 
                                      :key="frame"
                                      :selectedExamples="selectedExamples"
                                      @frame-selection-changed="insideFrameSelectionChanged"
                                   />
                            </div>
                          </div>
                      </div>
                      <div v-if="!isReadOnly() && !isReadOnlyForSuperLeksykograf()" class="col pl-0 pt-4" style="max-width: 60px;">
                        <div class="row"></div>
                        <div class="row">
                            <div class="col">
                           <button v-if="!isFrameVerified(frame)"
                            class="btn btn-sm btn-dark px-2 py-0" role="button" 
                            style="font-size: 20px; min-width: 35px"
                            @click="change_slowal2unified_frame_argument_mapping(frame)"
                            title="Zamień wybrane argumenty ramy"
                            >Z</button>
                            </div>
                        </div>
                        <div class="row">
                          <div v-if="isFrameVerified(frame)" class="col pl-1" style="display: flex;">
                              <input
                                type="checkbox"
                                :checked="isFrameVerified(frame)"
                                class="custom-control custom-checkbox ok-checkbox"
                              >
                          </div>
                        </div>
                      </div>
                  </div>
              </template>
            </div>
          </div>
          <div :id="'examples' + (readOnly ? '-preview' : '')" class="col w-100 p-0 tab-pane overflow-auto">
             <examples-component v-if="examples"
                  :examples="examples" 
                  :frame="active_slowal_frame"
                  :frame_arguments="selectedFrameArguments"
                  :frame_arguments_or_type="frame_arguments_or_type"
                  :lus="selectedLus"
                  :schemas="selectedSchemas"
                  :key="examples"
                  @example-selected="exampleSelected"
              />
            </div>
        </div>
        <div class="col h-100 px-1 pt-0 pb-0 overflow-auto" style="padding-left: 0px!important; padding-right: 0px!important;" 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"
              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 v-if="active_slowal_frame" :class="right_pane_tab !== 'schemata' && 'd-none'">
              <semantics-schemata-component 
                    :subentries="subentries"
                    :key="subentries"
                    :frame="active_slowal_frame"
                    :alternations="alternations"
                    :realisation_phrases="realisation_phrases"
                    :realisation_descriptions="realisation_descriptions"
                    :selectedExamples="selectedExamples"
                    @schemata-selected="schemataSelected"
                  />
          </div>
          <div v-if="!isReadOnly() && right_pane_tab === 'frame_preview'" class="overflow-hidden" style="height: calc(100% - 43px)">
            <unification-frame-preview
                :key="currentPreviewedUnifiedFrameId"
                :lexicalUnitEditComponent="LexicalUnitEdit"
                :initialUnifiedFrameId="currentPreviewedUnifiedFrameId" 
                @change-frame="changePreviewedUnifiedFrameId"
                @change-preview-to-edit="swapUnifiedFrames"
                :forceRefresh="internalForceRefresh" />
          </div>
          <div v-if="!isReadOnly()" :class="right_pane_tab !== 'notes' && 'd-none'" id="notes-component"></div>
        </div>
    </template>