diff --git a/entries/static/entries/js/components/UnificationComponent.js b/entries/static/entries/js/components/UnificationComponent.js
deleted file mode 100644
index 926b201a20812917d515a4f3ec19680539e114ad..0000000000000000000000000000000000000000
--- a/entries/static/entries/js/components/UnificationComponent.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import UnificationSwitchableList from "./UnificationSwitchableList.js";
-import UnificationRightPane from "./UnificationRightPane.js";
-
-export default {
- data () {
- return {
- entryId: null,
- lexicalUnitId: null,
- unifiedFrameId: null,
- gettext: window.gettext,
- unificationEntriesListRefreshKey: 1,
- };
- },
- components: {UnificationSwitchableList, UnificationRightPane},
- methods: {
- lexicalUnitSelected (entryId, lexicalUnitId) {
- this.entryId = entryId;
- this.lexicalUnitId = lexicalUnitId;
- },
- unifiedFrameSelected (unifiedFrameId, entryId, lexicalUnitId) {
- this.unifiedFrameId = unifiedFrameId;
- this.entryId = entryId;
- this.lexicalUnitId = lexicalUnitId;
- },
- refreshEntriesList() {
- this.unificationEntriesListRefreshKey++;
- }
- },
- setup() {
- const lexicalUnit = new URL(location.href).searchParams.get('lexical_unit_id');
- const entryId = new URL(location.href).searchParams.get('entry_id');
- return {
- initialLexicalUnitId: parseInt(lexicalUnit),
- initialEntryId: parseInt(entryId),
- };
- },
- mounted () {
- this.unifiedFrameSelected(window.initialUnifiedFrameId);
- $('#entries-list').length && Split(['#entries-list', '#entry-display'], {
- sizes: [20, 80],
- gutterSize: 4,
- minSize: 10,
- elementStyle: (dimension, size, gutterSize) => {
- return {
- 'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
- }
- },
- });
- },
- template: `
- <div id="entries-list" class="col h-100 w-100 px-0 overflow-hidden">
- <div id="entries-list-div" class="col p-0 h-100 w-100 overflow-hidden">
- <unification-switchable-list
- :unificationEntriesListRefreshKey="unificationEntriesListRefreshKey"
- :initialLexicalUnitId="lexicalUnitId ? lexicalUnitId : initialLexicalUnitId"
- :initialEntryId="entryId ? entryId : initialEntryId"
- @lexical-unit-selected="lexicalUnitSelected"
- @unified-frame-selected="unifiedFrameSelected"
- />
- </div>
- </div>
- <div id="entry-display" class="col h-100 p-0 overflow-hidden">
- <unification-right-pane
- ref="unificationRightPane"
- :entryId="entryId"
- :lexicalUnitId="lexicalUnitId"
- :initialUnifiedFrameId="unifiedFrameId"
- @refresh-entries-list="refreshEntriesList"
- />
- </div>
- `
-};
diff --git a/entries/static/entries/js/components/UnificationFramesList.js b/entries/static/entries/js/components/UnificationFramesList.js
deleted file mode 100644
index e0059fd381a251b66a670e0b1a3066ddddf2a775..0000000000000000000000000000000000000000
--- a/entries/static/entries/js/components/UnificationFramesList.js
+++ /dev/null
@@ -1,45 +0,0 @@
-export default {
- props: {
- initialUnifiedFrameId: Number,
- unificationEntriesListRefreshKey: Number,
- },
- data () {
- return {
- gettext: window.gettext,
- canViewAssignment: has_permission("users.view_assignment")
- }
- },
- watch: {
- unificationEntriesListRefreshKey() {
- // TODO: reload data and click in selected row
- // this.datatableObject.ajax.reload();
- setup_frames_list({
- table: this.$refs.table,
- unifiedFrameSelected: (unifiedFrameId) => { this.$emit('unifiedFrameSelected', unifiedFrameId); },
- selectEntryId: this.initialEntryId,
- });
- }
- },
- emits: ['unifiedFrameSelected'],
- mounted () {
- setup_frames_list({
- table: this.$refs.table,
- unifiedFrameSelected: (unifiedFrameId) => { this.$emit('unifiedFrameSelected', unifiedFrameId); },
- selectEntryId: this.initialUnifiedFrameId,
- });
- },
- template: `
- <table ref="table" class="table table-sm table-hover text-dark">
- <thead>
- <tr>
- <th class="p-1">{{ gettext('Rama') }}</th>
- <th class="p-1">{{ gettext('Status') }}</th>
- <th v-if="canViewAssignment" class="p-1">{{ gettext('Leksykograf') }}</th>
- <th class="p-1" hidden="true">{{ gettext('Id') }}</th>
- </tr>
- </thead>
- <tbody id="entries">
- </tbody>
- </table>
- `
-};
diff --git a/entries/static/entries/js/components/UnificationRightPane.js b/entries/static/entries/js/components/UnificationRightPane.js
deleted file mode 100644
index 4bb097ed22f518fe442dc4e0d1aa5b2f71528dec..0000000000000000000000000000000000000000
--- a/entries/static/entries/js/components/UnificationRightPane.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import LexicalUnitDisplay from './LexicalUnitDisplay.js';
-import LexicalUnitEdit from './LexicalUnitEdit.js';
-
-export default {
- components: {LexicalUnitDisplay, LexicalUnitEdit},
- props: {
- entryId: Number,
- lexicalUnitId: Number,
- initialUnifiedFrameId: Number,
- },
- emits: ['refreshEntriesList'],
- data () {
- return this.getInitialData();
- },
- methods: {
- getInitialData () {
- return {
- key: this.lexicalUnitId,
- entryIdLocal: this.entryId,
- unifiedFrameId: this.initialUnifiedFrameId,
- previewedUnifiedFrameId: null
- };
- },
- goToDisplay () {
- this.unifiedFrameId = null;
- },
- refresh () {
- this.key = null;
- setTimeout(() => { this.key = this.lexicalUnitId; }, 0);
- },
- swapFrames (previewedUnifiedFrameId) {
- this.previewedUnifiedFrameId = this.unifiedFrameId;
- this.unifiedFrameId = previewedUnifiedFrameId;
- this.refresh();
- },
- refreshEntriesList() {
- this.$emit('refreshEntriesList');
- }
- },
- watch: {
- lexicalUnitId () {
- Object.assign(this, this.getInitialData());
- },
- initialUnifiedFrameId () {
- Object.assign(this, this.getInitialData());
- }
- },
- template: `
- <div v-if="key || unifiedFrameId" :key="(key, entryIdLocal, unifiedFrameId)" class="row h-100 m-0 p-0 overflow-auto" id="semantics-top-pane">
- <lexical-unit-edit
- ref="lexicalUnitEdit"
- v-if="unifiedFrameId"
- :key="unifiedFrameId"
- :readOnly="false"
- :unifiedFrameId="unifiedFrameId"
- :previewedUnifiedFrameId="previewedUnifiedFrameId"
- :initialRightPaneTab="previewedUnifiedFrameId && unifiedFrameId !== previewedUnifiedFrameId ? 'frame_preview' : 'schemata'"
- @go-to-display="goToDisplay"
- @swap-frames="swapFrames"
- @refresh-entries-list="refreshEntriesList"
- />
- </div>
- `
-}
diff --git a/entries/static/entries/js/components/UnificationSwitchableList.js b/entries/static/entries/js/components/UnificationSwitchableList.js
deleted file mode 100644
index e044e9e700775f9770b2a3c1410750cbb71dc666..0000000000000000000000000000000000000000
--- a/entries/static/entries/js/components/UnificationSwitchableList.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import UnificationEntriesForFramesList from "./UnificationEntriesForFramesList.js";
-import UnificationEntriesList from "./UnificationEntriesList.js";
-import UnificationFramesList from "./UnificationFramesList.js";
-
-export default {
- props: {
- initialLexicalUnitId: Number,
- initialEntryId: Number,
- unificationEntriesListRefreshKey: Number,
- },
- data () {
- return {
- gettext: window.gettext,
- isFrameView: false
- }
- },
- emits: ['lexicalUnitSelected', 'unifiedFrameSelected', 'refreshEntriesList'],
- methods: {
- lexicalUnitSelected (entryId, lexicalUnitId) {
- this.$emit('lexicalUnitSelected', entryId, lexicalUnitId);
- },
- unifiedFrameSelected (unifiedFrameId, entryId, lexicalUnitId) {
- this.$emit('unifiedFrameSelected', unifiedFrameId, entryId, lexicalUnitId);
- },
- },
- components: {UnificationEntriesList, UnificationEntriesForFramesList, UnificationFramesList},
- template: `
- <label class="mt-2 position-absolute" style="z-index: 2"><input type="checkbox" v-model="isFrameView" /> {{ gettext('RAMY') }}</label>
- <div v-if="!isFrameView" class="h-100"><unification-entries-for-frames-list
- :unificationEntriesListRefreshKey="unificationEntriesListRefreshKey"
- :initialLexicalUnitId="initialLexicalUnitId"
- :initialEntryId="initialEntryId"
- @unified-frame-selected="unifiedFrameSelected"
- /></div>
- <div v-else class="h-100"><unification-frames-list
- :unificationEntriesListRefreshKey="unificationEntriesListRefreshKey"
- @unified-frame-selected="unifiedFrameSelected"
- /></div>
- `
-};
diff --git a/entries/static/entries/js/components/LexicalUnitEdit.js b/frontend/src/components/unification/Unification/LexicalUnitEdit.vue
similarity index 95%
rename from entries/static/entries/js/components/LexicalUnitEdit.js
rename to frontend/src/components/unification/Unification/LexicalUnitEdit.vue
index 59f99fa63c38a7e61b09807ddf68ce714579b329..948de34d7545667f528127f8bc677f5286c9ff4b 100644
--- a/entries/static/entries/js/components/LexicalUnitEdit.js
+++ b/frontend/src/components/unification/Unification/LexicalUnitEdit.vue
@@ -1,71 +1,15 @@
-import InfoTooltip from "./InfoTooltip.js";
-import Spinner from "./Spinner.js";
-import UnificationSwitchableList from "./UnificationSwitchableList.js";
-import ExamplesComponent from "./frame-components/ExamplesComponent.js";
-import SlowalFrameComponent from "./frame-components/SlowalFrameComponent.js";
-import SemanticsSchemataComponent from "./frame-components/SemanticsSchemataComponent.js";
-import MeaningComponent from "./frame-components/MeaningComponent.js";
-import SelectionalPreference from "../selectional_preference.js";
-
+<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";
let LexicalUnitEdit = {};
-const FramePreview = {
- props: {
- initialUnifiedFrameId: Number,
- initialLexicalUnitId: Number,
- forceRefresh: Number
- },
- data () {
- return {
- unifiedFrameId: this.initialUnifiedFrameId
- };
- },
- components: {LexicalUnitEdit, UnificationSwitchableList},
- emits: ['changeFrame', 'refreshEntriesList'],
- methods: {
- unifiedFrameSelected (unifiedFrameId) {
- this.$emit('changeFrame', unifiedFrameId);
- },
- refreshEntriesList() {
- this.$emit('refreshEntriesList')
- },
- },
- mounted () {
- Split(['#frame-preview-left-pane', '#frame-preview-right-pane'], {
- sizes: [60, 40],
- minSize: 20,
- gutterSize: 4,
- elementStyle: (dimension, size, gutterSize) => {
- return {
- 'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
- }
- },
- });
- },
- template: `
- <div class="row h-100 overflow-hidden">
- <div :key="unifiedFrameId" class="col h-100 pr-0 pt-0 pb-0 overflow-auto" id="frame-preview-left-pane">
- <lexical-unit-edit
- v-if="unifiedFrameId !== -1"
- :readOnly="true"
- :unifiedFrameId="unifiedFrameId"
- :forceRefresh="forceRefresh"
- @refresh-entries-list="refreshEntriesList"
- />
- <div v-else class="h-100">
- Brak ramy do wyświetlenia
- </div>
- </div>
- <div class="col h-100 pl-1 pt-0 pb-0 overflow-auto" id="frame-preview-right-pane">
- <unification-switchable-list
- @unified-frame-selected="unifiedFrameSelected"
- />
- </div>
- </div>
- `
-};
-
Object.assign(LexicalUnitEdit, {
props: {
unifiedFrameId: Number,
@@ -77,6 +21,7 @@ Object.assign(LexicalUnitEdit, {
data() {
return {
gettext: window.gettext,
+ LexicalUnitEdit: LexicalUnitEdit,
unified_frame: {},
unified_frame_title: '',
unified_frame_arguments: [],
@@ -109,7 +54,7 @@ Object.assign(LexicalUnitEdit, {
hidden_frames: [],
}
},
- components: {InfoTooltip, Spinner, FramePreview, SlowalFrameComponent, ExamplesComponent, SemanticsSchemataComponent, MeaningComponent},
+ components: {InfoTooltip, Spinner, UnificationFramePreview, SlowalFrameComponent, ExamplesComponent, SemanticsSchemataComponent, MeaningComponent},
emits: ['goToDisplay', 'refresh', 'swapFrames', 'refreshEntriesList', 'clearUnifiedFrameView'],
watch: {
forceRefresh(newVal, oldVal) {
@@ -925,8 +870,13 @@ Object.assign(LexicalUnitEdit, {
minSize: 10,
});
}
- },
- template: `
+ }
+});
+
+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="!readOnly && !isReadOnlyForSuperLeksykograf()" class="table-button-menu sticky-top" cellspacing="1">
@@ -1178,8 +1128,9 @@ Object.assign(LexicalUnitEdit, {
/>
</div>
<div v-if="right_pane_tab === 'frame_preview'" class="overflow-hidden" style="height: calc(100% - 43px)">
- <frame-preview
- :key="currentPreviewedUnifiedFrameId"
+ <unification-frame-preview
+ :key="currentPreviewedUnifiedFrameId"
+ :lexicalUnitEditComponent="LexicalUnitEdit"
:initialUnifiedFrameId="currentPreviewedUnifiedFrameId"
@change-frame="changePreviewedUnifiedFrameId"
@change-preview-to-edit="swapUnifiedFrames"
@@ -1187,7 +1138,4 @@ Object.assign(LexicalUnitEdit, {
</div>
<div :class="right_pane_tab !== 'notes' && 'd-none'" id="notes-component"></div>
</div>
- `
-});
-
-export default LexicalUnitEdit;
+</template>
diff --git a/entries/static/entries/js/selectional_preference.js b/frontend/src/components/unification/Unification/SelectionalPreference.js
similarity index 100%
rename from entries/static/entries/js/selectional_preference.js
rename to frontend/src/components/unification/Unification/SelectionalPreference.js
diff --git a/frontend/src/components/unification/Unification/Unification.vue b/frontend/src/components/unification/Unification/Unification.vue
deleted file mode 100644
index 23eff7f5e81b02175a8b44bd729a5666db18d781..0000000000000000000000000000000000000000
--- a/frontend/src/components/unification/Unification/Unification.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
- Unification
-</template>
diff --git a/entries/static/entries/js/components/UnificationEntriesForFramesList.js b/frontend/src/components/unification/Unification/UnificationEntriesForFramesList.vue
similarity index 81%
rename from entries/static/entries/js/components/UnificationEntriesForFramesList.js
rename to frontend/src/components/unification/Unification/UnificationEntriesForFramesList.vue
index 07d5f00451df7e1854acb20a5cd3d059d843faa0..a97c2ebab7f1890afefc879d3f0e3b195854ad1a 100644
--- a/entries/static/entries/js/components/UnificationEntriesForFramesList.js
+++ b/frontend/src/components/unification/Unification/UnificationEntriesForFramesList.vue
@@ -1,10 +1,11 @@
+<script>
export default {
props: {
initialLexicalUnitId: Number,
initialEntryId: Number,
unificationEntriesListRefreshKey: Number,
},
- data () {
+ data() {
return {
gettext: window.gettext,
canViewAssignment: has_permission("users.view_assignment")
@@ -16,22 +17,29 @@ export default {
// this.datatableObject.ajax.reload();
setup_entries_for_frames_list({
table: this.$refs.table,
- lexicalUnitSelected: (lexicalUnitUnifiedFrameId, entryId, lexicalUnitId) => { this.$emit('unifiedFrameSelected', lexicalUnitUnifiedFrameId, entryId, lexicalUnitId); },
+ lexicalUnitSelected: (lexicalUnitUnifiedFrameId, entryId, lexicalUnitId) => {
+ this.$emit('unifiedFrameSelected', lexicalUnitUnifiedFrameId, entryId, lexicalUnitId);
+ },
selectEntryId: this.initialEntryId,
secondarySelectEntryId: this.initialLexicalUnitId
});
}
},
emits: ['unifiedFrameSelected'],
- mounted () {
+ mounted() {
setup_entries_for_frames_list({
table: this.$refs.table,
- lexicalUnitSelected: (lexicalUnitUnifiedFrameId, entryId, lexicalUnitId) => { this.$emit('unifiedFrameSelected', lexicalUnitUnifiedFrameId, entryId, lexicalUnitId); },
+ lexicalUnitSelected: (lexicalUnitUnifiedFrameId, entryId, lexicalUnitId) => {
+ this.$emit('unifiedFrameSelected', lexicalUnitUnifiedFrameId, entryId, lexicalUnitId);
+ },
selectEntryId: this.initialEntryId,
secondarySelectEntryId: this.initialLexicalUnitId
});
},
- template: `
+};
+</script>
+
+<template>
<table ref="table" class="table table-sm text-dark">
<thead>
<tr>
@@ -45,5 +53,4 @@ export default {
<tbody id="entries">
</tbody>
</table>
- `
-};
+</template>
diff --git a/frontend/src/components/unification/Unification/UnificationFramePreview.vue b/frontend/src/components/unification/Unification/UnificationFramePreview.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a24365e280861cfc04f3a6a74874c46da659d292
--- /dev/null
+++ b/frontend/src/components/unification/Unification/UnificationFramePreview.vue
@@ -0,0 +1,61 @@
+<script>
+import UnificationSwitchableList from './UnificationSwitchableList.vue';
+
+export default {
+ props: {
+ initialUnifiedFrameId: Number,
+ initialLexicalUnitId: Number,
+ forceRefresh: Number,
+ lexicalUnitEditComponent: Object,
+ },
+ data () {
+ return {
+ unifiedFrameId: this.initialUnifiedFrameId
+ };
+ },
+ components: {UnificationSwitchableList},
+ emits: ['changeFrame', 'refreshEntriesList'],
+ methods: {
+ unifiedFrameSelected (unifiedFrameId) {
+ this.$emit('changeFrame', unifiedFrameId);
+ },
+ refreshEntriesList() {
+ this.$emit('refreshEntriesList')
+ },
+ },
+ mounted () {
+ Split(['#frame-preview-left-pane', '#frame-preview-right-pane'], {
+ sizes: [60, 40],
+ minSize: 20,
+ gutterSize: 4,
+ elementStyle: (dimension, size, gutterSize) => {
+ return {
+ 'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
+ }
+ },
+ });
+ }
+};
+</script>
+
+<template>
+ <div class="row h-100 overflow-hidden">
+ <div :key="unifiedFrameId" class="col h-100 pr-0 pt-0 pb-0 overflow-auto" id="frame-preview-left-pane">
+ <component v-bind:is="lexicalUnitEditComponent"
+ v-if="unifiedFrameId !== -1"
+ :readOnly="true"
+ :unifiedFrameId="unifiedFrameId"
+ :forceRefresh="forceRefresh"
+ @refresh-entries-list="refreshEntriesList"
+ />
+ <div v-else class="h-100">
+ Brak ramy do wyświetlenia
+ </div>
+ </div>
+ <div class="col h-100 pl-1 pt-0 pb-0 overflow-auto" id="frame-preview-right-pane">
+ <unification-switchable-list
+ @unified-frame-selected="unifiedFrameSelected"
+ />
+ </div>
+ </div>
+</template>
diff --git a/frontend/src/components/unification/Unification/UnificationFramesList.vue b/frontend/src/components/unification/Unification/UnificationFramesList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b4e1bb451827a7b55dc90d980e0de3a5fbff6034
--- /dev/null
+++ b/frontend/src/components/unification/Unification/UnificationFramesList.vue
@@ -0,0 +1,52 @@
+<script>
+export default {
+ props: {
+ initialUnifiedFrameId: Number,
+ unificationEntriesListRefreshKey: Number,
+ },
+ data() {
+ return {
+ gettext: window.gettext,
+ canViewAssignment: has_permission("users.view_assignment")
+ }
+ },
+ watch: {
+ unificationEntriesListRefreshKey() {
+ // TODO: reload data and click in selected row
+ // this.datatableObject.ajax.reload();
+ setup_frames_list({
+ table: this.$refs.table,
+ unifiedFrameSelected: (unifiedFrameId) => {
+ this.$emit('unifiedFrameSelected', unifiedFrameId);
+ },
+ selectEntryId: this.initialEntryId,
+ });
+ }
+ },
+ emits: ['unifiedFrameSelected'],
+ mounted() {
+ setup_frames_list({
+ table: this.$refs.table,
+ unifiedFrameSelected: (unifiedFrameId) => {
+ this.$emit('unifiedFrameSelected', unifiedFrameId);
+ },
+ selectEntryId: this.initialUnifiedFrameId,
+ });
+ },
+};
+</script>
+
+<template>
+ <table ref="table" class="table table-sm table-hover text-dark">
+ <thead>
+ <tr>
+ <th class="p-1">{{ gettext('Rama') }}</th>
+ <th class="p-1">{{ gettext('Status') }}</th>
+ <th v-if="canViewAssignment" class="p-1">{{ gettext('Leksykograf') }}</th>
+ <th class="p-1" hidden="true">{{ gettext('Id') }}</th>
+ </tr>
+ </thead>
+ <tbody id="entries">
+ </tbody>
+ </table>
+</template>
diff --git a/frontend/src/components/unification/Unification/UnificationRightPane.vue b/frontend/src/components/unification/Unification/UnificationRightPane.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5247642dd82167ba2fb54349bb9d0122f9d42e45
--- /dev/null
+++ b/frontend/src/components/unification/Unification/UnificationRightPane.vue
@@ -0,0 +1,68 @@
+<script>
+import LexicalUnitEdit from './LexicalUnitEdit.vue';
+
+export default {
+ components: {LexicalUnitEdit},
+ props: {
+ entryId: Number,
+ lexicalUnitId: Number,
+ initialUnifiedFrameId: Number,
+ },
+ emits: ['refreshEntriesList'],
+ data() {
+ return this.getInitialData();
+ },
+ methods: {
+ getInitialData() {
+ return {
+ key: this.lexicalUnitId,
+ entryIdLocal: this.entryId,
+ unifiedFrameId: this.initialUnifiedFrameId,
+ previewedUnifiedFrameId: null
+ };
+ },
+ goToDisplay() {
+ this.unifiedFrameId = null;
+ },
+ refresh() {
+ this.key = null;
+ setTimeout(() => {
+ this.key = this.lexicalUnitId;
+ }, 0);
+ },
+ swapFrames(previewedUnifiedFrameId) {
+ this.previewedUnifiedFrameId = this.unifiedFrameId;
+ this.unifiedFrameId = previewedUnifiedFrameId;
+ this.refresh();
+ },
+ refreshEntriesList() {
+ this.$emit('refreshEntriesList');
+ }
+ },
+ watch: {
+ lexicalUnitId() {
+ Object.assign(this, this.getInitialData());
+ },
+ initialUnifiedFrameId() {
+ Object.assign(this, this.getInitialData());
+ }
+ },
+};
+</script>
+
+<template>
+ <div v-if="key || unifiedFrameId" :key="(key, entryIdLocal, unifiedFrameId)" class="row h-100 m-0 p-0 overflow-auto" id="semantics-top-pane">
+ <lexical-unit-edit
+ ref="lexicalUnitEdit"
+ v-if="unifiedFrameId"
+ :key="unifiedFrameId"
+ :readOnly="false"
+ :unifiedFrameId="unifiedFrameId"
+ :previewedUnifiedFrameId="previewedUnifiedFrameId"
+ :initialRightPaneTab="previewedUnifiedFrameId && unifiedFrameId !== previewedUnifiedFrameId ? 'frame_preview' : 'schemata'"
+ @go-to-display="goToDisplay"
+ @swap-frames="swapFrames"
+ @refresh-entries-list="refreshEntriesList"
+ />
+ </div>
+</template>
diff --git a/frontend/src/components/unification/Unification/UnificationSwitchableList.vue b/frontend/src/components/unification/Unification/UnificationSwitchableList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..68de141368ec852846985c5fa45c41bce67285bf
--- /dev/null
+++ b/frontend/src/components/unification/Unification/UnificationSwitchableList.vue
@@ -0,0 +1,43 @@
+<script>
+import UnificationEntriesForFramesList from "./UnificationEntriesForFramesList.vue";
+import UnificationEntriesList from "../Entries/EntriesList.vue";
+import UnificationFramesList from "./UnificationFramesList.vue";
+
+export default {
+ props: {
+ initialLexicalUnitId: Number,
+ initialEntryId: Number,
+ unificationEntriesListRefreshKey: Number,
+ },
+ data() {
+ return {
+ gettext: window.gettext,
+ isFrameView: false
+ }
+ },
+ emits: ['lexicalUnitSelected', 'unifiedFrameSelected', 'refreshEntriesList'],
+ methods: {
+ lexicalUnitSelected(entryId, lexicalUnitId) {
+ this.$emit('lexicalUnitSelected', entryId, lexicalUnitId);
+ },
+ unifiedFrameSelected(unifiedFrameId, entryId, lexicalUnitId) {
+ this.$emit('unifiedFrameSelected', unifiedFrameId, entryId, lexicalUnitId);
+ },
+ },
+ components: {UnificationEntriesList, UnificationEntriesForFramesList, UnificationFramesList},
+};
+</script>
+
+<template>
+ <label class="mt-2 position-absolute" style="z-index: 2"><input type="checkbox" v-model="isFrameView" /> {{ gettext('RAMY') }}</label>
+ <div v-if="!isFrameView" class="h-100"><unification-entries-for-frames-list
+ :unificationEntriesListRefreshKey="unificationEntriesListRefreshKey"
+ :initialLexicalUnitId="initialLexicalUnitId"
+ :initialEntryId="initialEntryId"
+ @unified-frame-selected="unifiedFrameSelected"
+ /></div>
+ <div v-else class="h-100"><unification-frames-list
+ :unificationEntriesListRefreshKey="unificationEntriesListRefreshKey"
+ @unified-frame-selected="unifiedFrameSelected"
+ /></div>
+</template>