From fc4cf6e1b1b3955d1cb966c1ff08aa0dfc1add66 Mon Sep 17 00:00:00 2001
From: dcz2 <dcz@ipipan.waw.pl>
Date: Tue, 28 Jun 2022 22:52:02 +0200
Subject: [PATCH] Draft of frame preview, swapping frames
---
.../entries/js/components/LexicalUnitEdit.js | 112 +++++++++++++-----
entries/static/entries/js/components/main.js | 13 +-
2 files changed, 95 insertions(+), 30 deletions(-)
diff --git a/entries/static/entries/js/components/LexicalUnitEdit.js b/entries/static/entries/js/components/LexicalUnitEdit.js
index 4ea184b..79bcee8 100644
--- a/entries/static/entries/js/components/LexicalUnitEdit.js
+++ b/entries/static/entries/js/components/LexicalUnitEdit.js
@@ -1,15 +1,59 @@
import InfoTooltip from "./InfoTooltip.js";
import Spinner from "./Spinner.js";
-export default {
+let LexicalUnitEdit = {};
+
+const FramePreview = {
+ props: {
+ initialUnifiedFrameId: Number
+ },
+ data () {
+ return {
+ unifiedFrameId: this.initialUnifiedFrameId
+ };
+ },
+ components: {LexicalUnitEdit},
+ emits: ['changeFrame'],
+ mounted () {
+ Split(['#frame-preview-left-pane', '#frame-preview-right-pane'], {
+ sizes: [60, 40],
+ minSize: 100,
+ gutterSize: 4,
+ elementStyle: (dimension, size, gutterSize) => {
+ return {
+ 'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
+ }
+ },
+ });
+ },
+ template: `
+ <div :key="unifiedFrameId" class="row">
+ <div class="col h-100 px-1 pt-0 pb-0 overflow-auto" id="frame-preview-left-pane">
+ <lexical-unit-edit
+ :readOnly="true"
+ :unifiedFrameId="unifiedFrameId"
+ />
+ </div>
+ <div class="col h-100 px-1 pt-0 pb-0 overflow-auto" id="frame-preview-right-pane">
+ TODO list
+ <span @click="$emit('changeFrame', 1)">change frame</span>
+ </div>
+ </div>
+ `
+};
+
+Object.assign(LexicalUnitEdit, {
props: {
- unifiedFrameId: Number
+ unifiedFrameId: Number,
+ previewedUnifiedFrameId: Number,
+ readOnly: Boolean,
+ initialRightPaneTab: String,
},
data() {
return {
gettext: window.gettext,
- unified_frame: Object,
- unified_frame_title: Object,
+ unified_frame: {},
+ unified_frame_title: '',
unified_frame_arguments: [],
active_unified_frame_argument: null,
slowal_frames2selecional_preferencies_mapping: {},
@@ -21,16 +65,12 @@ export default {
{id: 'frame_preview', label: gettext('PodglÄ…d ram')},
{id: 'notes', label: gettext('Notatki')},
],
- right_pane_tab: 'schemata'
- }
- },
- components: {InfoTooltip, Spinner},
- emits: ['goToDisplay', 'refresh'],
- watch: {
- unifiedFrameId: function () {
- this.loadFrame();
+ right_pane_tab: this.initialRightPaneTab || 'schemata',
+ currentPreviewedUnifiedFrameId: this.previewedUnifiedFrameId,
}
},
+ components: {InfoTooltip, Spinner, FramePreview},
+ emits: ['goToDisplay', 'refresh', 'swapFrames'],
methods: {
hasWhiteSpace(s) {
return /\s/g.test(s);
@@ -553,10 +593,18 @@ export default {
show_error(errorType + ' (' + errorMessage + ')');
}
});
+ },
+ changePreviewedUnifiedFrameId (unifiedFrameId) {
+ this.currentPreviewedUnifiedFrameId = unifiedFrameId;
+ },
+ swapUnifiedFrames () {
+ if (this.unified_frame.id !== this.currentPreviewedUnifiedFrameId) {
+ this.$emit("swapFrames", this.currentPreviewedUnifiedFrameId);
+ }
}
},
mounted() {
- Split(['#semantics-frames-pane', '#semantics-schemata-pane'], {
+ !this.readOnly && Split(['#semantics-frames-pane', '#semantics-schemata-pane'], {
sizes: [40, 60],
minSize: 400,
gutterSize: 4,
@@ -570,7 +618,7 @@ export default {
},
template: `
<div class="col h-100 px-1 pt-0 pb-0 overflow-auto" id="semantics-frames-pane">
- <table class="table-button-menu" cellspacing="1">
+ <table v-if="!readOnly" class="table-button-menu" cellspacing="1">
<tr style="background-color: white;">
<td id="change-title" @click="changeTitle" style="padding: 10px 15px 10px 15px; color: #000000;">Zmień nazwę</td>
<td id="add-arg" @click="addArgument" style="padding: 10px 15px 10px 15px; color: #000000;">Dodaj argum.</td>
@@ -581,7 +629,7 @@ export default {
<tr style="background-color: white;">
<td id="change-role" @click="changeRole" style="padding: 10px 15px 10px 15px; color: #000000;">Zmień rolę</td>
<td id="remove-arg" @click="removeArgument" style="padding: 10px 15px 10px 15px; color: #000000;">Usuń argum.</td>
- <td id="change-windows" style="padding: 10px 15px 10px 15px; color: #000000;">Zamień okna</td>
+ <td id="change-windows" style="padding: 10px 15px 10px 15px; color: #000000;" @click="swapUnifiedFrames">Zamień okna</td>
<td id="duplicates" @click="duplicate" style="padding: 10px 15px 10px 15px; color: #000000;">Duplikuj</td>
<td id="save-changes" style="padding: 10px 15px 10px 15px; color: #000000;">Zapisz</td>
</tr>
@@ -668,7 +716,7 @@ export default {
</table>
</div>
- <table v-if="unified_frame.id" class="table-button-menu" cellspacing="1">
+ <table v-if="!readOnly && unified_frame.id" class="table-button-menu" cellspacing="1">
<tr style="background-color: white;">
<td id="wrong-frame" style="padding: 10px 15px 10px 15px; color: #000000;">Błędna</td>
<td
@@ -709,17 +757,19 @@ export default {
<div v-html="slowal_frame_html(frame)" @click="slowalFrameSelected(frame)"></div>
</th>
<th scope="row">
- <div>
+ <div v-if="!readOnly">
<label v-bind:for="frame.id">
- <div><input
- :id="frame.id"
- type="checkbox"
- v-model="frame.verified"
- :checked="frame.verified"
- class="custom-control custom-checkbox"
- @change="change_slowal2unified_mapping_verification(frame.id, frame.verified)"
- >
- <span>Zweryfikowane</span></div>
+ <div>
+ <input
+ :id="frame.id"
+ type="checkbox"
+ v-model="frame.verified"
+ :checked="frame.verified"
+ class="custom-control custom-checkbox"
+ @change="change_slowal2unified_mapping_verification(frame.id, frame.verified)"
+ >
+ <span>Zweryfikowane</span>
+ </div>
</label>
<br><br>
<a href="#" class="btn btn-sm btn-dark" role="button" @click="change_slowal2unified_frame_argument_mapping(frame.id)">Z</a>
@@ -730,7 +780,7 @@ export default {
</table>
</div>
</div>
- <div class="col h-100 px-1 pt-0 pb-0 overflow-auto" id="semantics-schemata-pane">
+ <div v-if="!readOnly" class="col h-100 px-1 pt-0 pb-0 overflow-auto" id="semantics-schemata-pane">
<ul class="nav nav-pills nav-justified p-1" id="entryTabs" role="tablist">
<li
v-for="tab in right_pane_tabs"
@@ -742,8 +792,12 @@ export default {
</li>
</ul>
<div :class="right_pane_tab !== 'schemata' && 'd-none'" id="semantics-schemata"></div>
- <div v-if="right_pane_tab === 'frame_preview'">drugi tab</div>
+ <div v-if="right_pane_tab === 'frame_preview'">
+ <frame-preview :key="currentPreviewedUnifiedFrameId" :initialUnifiedFrameId="currentPreviewedUnifiedFrameId" @change-frame="changePreviewedUnifiedFrameId" />
+ </div>
<div v-if="right_pane_tab === 'notes'">notateczki</div>
</div>
`
-}
+});
+
+export default LexicalUnitEdit;
diff --git a/entries/static/entries/js/components/main.js b/entries/static/entries/js/components/main.js
index 27b5abd..0d6e02b 100644
--- a/entries/static/entries/js/components/main.js
+++ b/entries/static/entries/js/components/main.js
@@ -15,12 +15,14 @@ export default {
return {
isEdit: false,
key: this.lexicalUnitId,
- unifiedFrameId: null
+ unifiedFrameId: null,
+ previewedUnifiedFrameId: null
};
},
goToEdit (unifiedFrameId) {
this.isEdit = true;
this.unifiedFrameId = unifiedFrameId;
+ this.previewedUnifiedFrameId = unifiedFrameId;
},
goToDisplay () {
this.isEdit = false;
@@ -30,6 +32,11 @@ export default {
this.key = null;
setTimeout(() => { this.key = this.lexicalUnitId; }, 0);
update_entries();
+ },
+ swapFrames (previewedUnifiedFrameId) {
+ this.previewedUnifiedFrameId = this.unifiedFrameId;
+ this.unifiedFrameId = previewedUnifiedFrameId;
+ this.refresh();
}
},
watch: {
@@ -48,8 +55,12 @@ export default {
/>
<lexical-unit-edit
v-if="isEdit"
+ :readOnly="false"
:unifiedFrameId="unifiedFrameId"
+ :previewedUnifiedFrameId="previewedUnifiedFrameId"
+ :initialRightPaneTab="unifiedFrameId !== previewedUnifiedFrameId ? 'frame_preview' : null"
@go-to-display="goToDisplay"
+ @swap-frames="swapFrames"
/>
</div>
`
--
GitLab