WIP

entries/static/entries/js/components/LexicalUnitDisplay.js

@@ -53,43 +53,45 @@ export default {
     });
   },
   template: `
-    <spinner />
-    <div id="semantics-frames"></div>
-    <div class="text-center mb-3">
-      <div v-if="unifiedFrame">
-        <a class="btn btn-sm btn-outline-dark mr-2" v-if="frame?.status === 'N'" @click="markAsInvalid">{{ gettext('Błędna') }}</a>
-        <a class="btn btn-sm btn-outline-dark mr-2" v-if="frame?.status === 'N'" @click="take">{{ gettext('Pobierz') }}</a>
-        <a
-          class="btn btn-sm btn-outline-dark mr-2"
-          v-if="frame?.status === 'O' || frame?.status === 'G' && unifiedFrame?.status === 'O'"
-          @click="$emit('goToEdit', this.unifiedFrame.pk)"
-        >
-          {{ gettext('Obrabiaj') }}
-        </a>
-        <a
-          class="btn btn-sm btn-outline-dark mr-2"
-          v-if="frame?.status === 'S' && unifiedFrame?.status === 'S'"
-          @click="$emit('goToEdit', this.unifiedFrame.pk)"
-        >
-          {{ gettext('Obejrzyj') }}
-        </a>
-        <a
-          class="btn btn-sm btn-outline-dark mr-2"
-          v-if="frame?.status === 'B' && hasPermission('semantics.manage_invalid_lexical_units')"
-          @click="confirmInvalid"
-        >
-          {{ gettext('Potwierdź') }}
-        </a>
-        <a
-          class="btn btn-sm btn-outline-dark mr-2"
-          v-if="frame?.status === 'B' && hasPermission('semantics.manage_invalid_lexical_units')"
-          @click="rejectInvalid"
-        >
-          {{ gettext('Odrzuć') }}
-        </a>
+    <div class="col h-100 px-1 pt-0 pb-2 overflow-auto" id="semantics-frames-pane">
+      <spinner />
+      <div id="semantics-frames"></div>
+      <div class="text-center mb-3">
+        <div v-if="unifiedFrame">
+          <a class="btn btn-sm btn-outline-dark mr-2" v-if="frame?.status === 'N'" @click="markAsInvalid">{{ gettext('Błędna') }}</a>
+          <a class="btn btn-sm btn-outline-dark mr-2" v-if="frame?.status === 'N'" @click="take">{{ gettext('Pobierz') }}</a>
+          <a
+            class="btn btn-sm btn-outline-dark mr-2"
+            v-if="frame?.status === 'O' || frame?.status === 'G' && unifiedFrame?.status === 'O'"
+            @click="$emit('goToEdit', this.unifiedFrame.pk)"
+          >
+            {{ gettext('Obrabiaj') }}
+          </a>
+          <a
+            class="btn btn-sm btn-outline-dark mr-2"
+            v-if="frame?.status === 'S' && unifiedFrame?.status === 'S'"
+            @click="$emit('goToEdit', this.unifiedFrame.pk)"
+          >
+            {{ gettext('Obejrzyj') }}
+          </a>
+          <a
+            class="btn btn-sm btn-outline-dark mr-2"
+            v-if="frame?.status === 'B' && hasPermission('semantics.manage_invalid_lexical_units')"
+            @click="confirmInvalid"
+          >
+            {{ gettext('Potwierdź') }}
+          </a>
+          <a
+            class="btn btn-sm btn-outline-dark mr-2"
+            v-if="frame?.status === 'B' && hasPermission('semantics.manage_invalid_lexical_units')"
+            @click="rejectInvalid"
+          >
+            {{ gettext('Odrzuć') }}
+          </a>
+        </div>
+        <span v-if="unifiedFrame === null">{{ gettext('Brak ramy unifikacyjnej') }}</span>
       </div>
-      <span v-if="unifiedFrame === null">{{ gettext('Brak ramy unifikacyjnej') }}</span>
+      <div id="lexical-unit-notes"></div>
     </div>
-    <div id="lexical-unit-notes"></div>
   `
 }

entries/static/entries/js/components/main.js

@@ -12,12 +12,20 @@ export default {
   },
   methods: {
     getInitialData () {
-      return { isEdit: false, key: this.lexicalUnitId, unifiedFrameId: Number, };
+      return {
+        isEdit: false,
+        key: this.lexicalUnitId,
+        unifiedFrameId: null
+      };
     },
     goToEdit (unifiedFrameId) {
       this.isEdit = true;
       this.unifiedFrameId = unifiedFrameId;
     },
+    goToDisplay () {
+      this.isEdit = false;
+      this.unifiedFrameId = null;
+    },
     refresh () {
       this.key = null;
       setTimeout(() => { this.key = this.lexicalUnitId; }, 0);
@@ -30,17 +38,19 @@ export default {
     }
   },
   template: `
-    <div class="col h-100 px-1 pt-0 pb-2 overflow-auto" id="semantics-frames-pane">
-      <div v-if="key" :key="key">
-        <lexical-unit-display
-          v-if="lexicalUnitId && !isEdit"
-          :entryId="entryId"
-          :lexicalUnitId="lexicalUnitId"
-          @go-to-edit="goToEdit"
-          @refresh="refresh"
-        />
-        <lexical-unit-edit v-if="isEdit" :unifiedFrameId="unifiedFrameId" />
-      </div>
+    <div v-if="key" :key="key">
+      <lexical-unit-display
+        v-if="lexicalUnitId && !isEdit"
+        :entryId="entryId"
+        :lexicalUnitId="lexicalUnitId"
+        @go-to-edit="goToEdit"
+        @refresh="refresh"
+      />
+      <lexical-unit-edit
+        v-if="isEdit"
+        :unifiedFrameId="unifiedFrameId"
+        @go-to-display="goToDisplay"
+      />
     </div>
     <div class="col h-100 px-1 pt-0 pb-0 overflow-auto" id="semantics-schemata-pane">
       <div id="semantics-schemata"></div>