From 5ef4d46b362cfedd21e5f7181740ec3a64f9133d Mon Sep 17 00:00:00 2001
From: khansadaoudi <hk_daoudi@esi.dz>
Date: Tue, 15 Oct 2024 16:14:11 +0200
Subject: [PATCH] add possibility to change the sent_id of a sentence

---
 src/api/endpoints.d.ts                     |  4 +-
 src/components/sentence/AttributeTable.vue | 31 +--------
 src/components/sentence/MetaDialog.vue     | 81 ++++++++++++++++++----
 src/components/sentence/SentenceCard.vue   | 12 ++--
 4 files changed, 81 insertions(+), 47 deletions(-)

diff --git a/src/api/endpoints.d.ts b/src/api/endpoints.d.ts
index f27a36d3..ee2e62e2 100644
--- a/src/api/endpoints.d.ts
+++ b/src/api/endpoints.d.ts
@@ -70,8 +70,8 @@ export type getProjectSamples_RV = sample_t[];
 
 //// TREES
 export interface updateTree_ED {
-  sent_id: string;
-  user_id: string;
+  sentId: string;
+  userId: string;
   conll: string;
 }
 
diff --git a/src/components/sentence/AttributeTable.vue b/src/components/sentence/AttributeTable.vue
index 745ffcf9..285d58ad 100644
--- a/src/components/sentence/AttributeTable.vue
+++ b/src/components/sentence/AttributeTable.vue
@@ -39,14 +39,8 @@
           </q-td>
 
           <q-td key="v" :props="props">
-            <div v-if="props.row.a === 'timestamp'" class="meta-data">
-              {{ getData(props.row.v) }}
-            </div>
-            <div v-else-if="metadata.includes(props.row.a)" class="meta-data">
-              {{ props.row.v }}
-            </div>
             <q-input
-              v-else-if="computeValueType(props.row) === 'String'"
+              v-if="computeValueType(props.row) === 'String'"
               v-model="props.row.v"
               filled
               dense
@@ -85,7 +79,7 @@
             >
             </q-select>
           </q-td>
-          <q-td v-if="isModifiable === true && !metadata.includes(props.row.a)" key="actions" :props="props">
+          <q-td v-if="isModifiable" key="actions" :props="props">
             <q-btn dense round flat color="grey" icon="delete" @click="deleteFeature(props.row)">
               <q-tooltip :delay="300"> {{ $t('attributeTable.eraseFeature') }} {{ props.row.a }}</q-tooltip>
             </q-btn>
@@ -97,7 +91,6 @@
 </template>
 
 <script lang="ts">
-import { date } from 'quasar';
 import { PropType, defineComponent } from 'vue';
 
 interface actual_feat_t {
@@ -143,7 +136,6 @@ export default defineComponent({
         rowsPerPage: 0,
       },
       key: 0,
-      metadata: ['timestamp', 'user_id', 'sent_id'], // workaround...
     };
   },
   methods: {
@@ -153,20 +145,6 @@ export default defineComponent({
     deleteFeature(row: any) {
       this.featActualData.splice(this.featActualData.map((e) => e.a).indexOf(row.a), 1);
     },
-    getData(timestamp: string) {
-      const currentDate = Date.now();
-      const parsedTimestamp = parseInt(timestamp, 10);
-      const diffTime = date.getDateDiff(currentDate, parsedTimestamp, 'days');
-      let diffTimestr = '';
-      if (diffTime === 0) {
-        diffTimestr = `${date.getDateDiff(currentDate, parsedTimestamp, 'hours')} hours ago: `;
-      } else if (diffTime > 365) {
-        diffTimestr = 'a long time ago: ';
-      } else {
-        diffTimestr = `${diffTime} days ago: `;
-      }
-      return diffTimestr + date.formatDate(parsedTimestamp, 'YYYY-MM-DD HH:mm:ss');
-    },
     computeAttributeOptions() {
       return this.featPossibleOptions.map(({ name }) => name).filter((n) => !this.featActualData.map(({ a }) => a).includes(n));
     },
@@ -184,8 +162,3 @@ export default defineComponent({
   },
 });
 </script>
-<style>
-.meta-data {
-  text-align: left;
-}
-</style>
diff --git a/src/components/sentence/MetaDialog.vue b/src/components/sentence/MetaDialog.vue
index 03c26f85..223aa0fc 100644
--- a/src/components/sentence/MetaDialog.vue
+++ b/src/components/sentence/MetaDialog.vue
@@ -6,25 +6,52 @@
         <q-space />
         <q-btn v-close-popup flat dense icon="close" />
       </q-bar>
-      <AttributeTable
-        :featActualData="metaList"
-        :columns="featTable.columns"
-        :featPossibleOptions="metaOptions"
-        :isCustomizableFeatures="true"
-        :isModifiable="true"
-        :title="$t('attributeTable.metadata')"
-      ></AttributeTable>
+      <q-card-section class="q-gutter-md">
+        <q-input outlined v-model="metaJson.user_id" label="user_id" readonly />
+        <q-input outlined v-model="timestamp" label="timestamp" readonly />
+        <q-input 
+          outlined 
+          v-model="metaJson.text" 
+          label="text" 
+          :rules="[
+            (val) => (val && val.length > 0) || 'text must not be empty'
+          ]"
+          />
+        <q-input 
+          outlined 
+          v-model="metaJson.sent_id" 
+          label="sent_id" 
+          :readonly="!isAdmin"
+          :rules="[
+            (val) => (val && val.length > 0) || 'sent_id must not be empty',
+            (val) => (!sortedSentIds.filter(sentId => sentId !== currentSentId).includes(val)) || 'sent_id exist'
+          ]" 
+          />
+        <q-separator />
+      </q-card-section>
+      <q-card-section>
+        <AttributeTable
+          :featActualData="metaList"
+          :columns="featTable.columns"
+          :featPossibleOptions="metaOptions"
+          :isCustomizableFeatures="true"
+          :isModifiable="true"
+          :title="$t('attributeTable.metadata')"
+        ></AttributeTable>
+      </q-card-section>
       <q-card-actions class="sticky-card-actions" align="around">
-        <q-btn v-close-popup outline color="primary" :label="$t('cancel')" style="width: 45%; margin-left: auto; margin-right: auto" />
-        <q-btn v-close-popup color="primary" label="Ok" style="width: 45%; margin-left: auto; margin-right: auto" @click="onMetaDialogOk()" />
+        <q-btn v-close-popup outline color="primary" :label="$t('cancel')"  />
+        <q-btn  v-close-popup :disable="disableMetaBtn" color="primary" label="Ok" @click="onMetaDialogOk()" />
       </q-card-actions>
     </q-card>
   </q-dialog>
 </template>
 <script lang="ts">
+import { date } from 'quasar';
 import { metaJson_T } from 'conllup/lib/conll';
 import { mapState } from 'pinia';
 import { useProjectStore } from 'src/pinia/modules/project';
+import { useTreesStore } from 'src/pinia/modules/trees';
 import { sentence_bus_t } from 'src/types/main_types';
 import { notifyError, notifyMessage } from 'src/utils/notify';
 import { PropType, defineComponent } from 'vue';
@@ -72,10 +99,14 @@ export default defineComponent({
           },
         ],
       },
+      basicMetadata: ['timestamp', 'user_id', 'sent_id', 'text'],
+      timestamp: '',
+      currentSentId: '',
     };
   },
   computed: {
-    ...mapState(useProjectStore, ['shownMetaChoices']),
+    ...mapState(useProjectStore, ['shownMetaChoices', 'isAdmin']),
+    ...mapState(useTreesStore, ['sortedSentIds']),
     metaOptions() {
       let metaOptions: { name: string; values: string }[] = [];
       for (const metaOption of this.shownMetaChoices) {
@@ -85,6 +116,12 @@ export default defineComponent({
       }
       return metaOptions;
     },
+    disableMetaBtn() {
+      return this.metaJson.sent_id === '' || 
+        this.sortedSentIds.filter(sent_id => sent_id !== this.currentSentId).includes(this.metaJson.sent_id as string) || 
+        this.metaJson.text === ''
+      ; 
+    }
   },
   mounted() {
     this.sentenceBus.on('open:metaDialog', ({ userId }: { userId: string }) => {
@@ -93,20 +130,40 @@ export default defineComponent({
       this.metaDialogOpened = true;
       this.metaList = [];
       for (const a in this.metaJson) {
-        this.metaList.push({ a, v: this.metaJson[a] });
+        if (!this.basicMetadata.includes(a)) {
+          this.metaList.push({ a, v: this.metaJson[a] });
+        }
       }
+      this.timestamp = this.getTime(this.metaJson.timestamp as string); 
+      this.currentSentId = this.metaJson.sent_id as string;
     });
   },
   beforeUnmount() {
     this.sentenceBus.off('open:uposDialog');
   },
   methods: {
+    getTime(timestamp: string) {
+      const currentDate = Date.now();
+      const parsedTimestamp = parseInt(timestamp, 10);
+      const diffTime = date.getDateDiff(currentDate, parsedTimestamp, 'days');
+      let diffTimestr = '';
+      if (diffTime === 0) {
+        diffTimestr = `${date.getDateDiff(currentDate, parsedTimestamp, 'hours')} hours ago: `;
+      } else if (diffTime > 365) {
+        diffTimestr = 'a long time ago: ';
+      } else {
+        diffTimestr = `${diffTime} days ago: `;
+      }
+      return diffTimestr + date.formatDate(parsedTimestamp, 'YYYY-MM-DD HH:mm:ss');
+    },
     onMetaDialogOk() {
       const newMetaJson: metaJson_T = {};
       if (this.metaList.some((meta) => meta.a === '' || meta.v === '')) {
         notifyError({ error: 'You can not save empty Meta !' });
         return;
       }
+      newMetaJson['sent_id'] = this.metaJson.sent_id;
+      newMetaJson['text'] = this.metaJson.text;
       this.metaList.forEach((meta) => {
         newMetaJson[meta.a] = meta.v;
       });
diff --git a/src/components/sentence/SentenceCard.vue b/src/components/sentence/SentenceCard.vue
index eb26aaac..852d4494 100644
--- a/src/components/sentence/SentenceCard.vue
+++ b/src/components/sentence/SentenceCard.vue
@@ -163,7 +163,7 @@
 
 <script lang="ts">
 import { ReactiveSentence } from 'dependencytreejs/src/ReactiveSentence';
-import { constructTextFromTreeJson } from 'conllup/lib/conll';
+import { constructTextFromTreeJson, sentenceConllToJson } from 'conllup/lib/conll';
 import mitt, { Emitter } from 'mitt';
 import { mapActions, mapState, mapWritableState } from 'pinia';
 import { useProjectStore } from 'src/pinia/modules/project';
@@ -265,6 +265,7 @@ export default defineComponent({
   computed: {
     ...mapWritableState(useProjectStore, ['diffMode', 'diffUserId', 'name']),
     ...mapWritableState(useGithubStore, ['reloadCommits']),
+    ...mapWritableState(useTreesStore, ['reloadTrees']),
     ...mapState(useTreesStore, ['reloadValidation']),
     ...mapState(useProjectStore, ['isValidator', 'blindAnnotationMode', 'shownMeta', 'languageDetected']),
     ...mapState(useUserStore, ['username']),
@@ -364,10 +365,10 @@ export default defineComponent({
       const exportedConll = this.reactiveSentencesObj[openedTreeUser].exportConllWithModifiedMeta(metaToReplace);
 
       const data = {
-        sent_id: this.sentence.sent_id,
         conll: exportedConll,
-        user_id: changedConllUser,
-        update_commit: updateCommit,
+        userId: changedConllUser,
+        updateCommit: updateCommit,
+        sentId: this.sentenceData.sent_id,
       };
       if (!this.sentence.sample_name) {
         return;
@@ -398,6 +399,9 @@ export default defineComponent({
               this.openTabUser = changedConllUser;
               this.exportedConll = exportedConll;
             }
+            if (this.sentenceData.sent_id !== sentenceConllToJson(exportedConll).metaJson.sent_id ) {
+              this.reloadTrees = true;
+            }
             notifyMessage({ position: 'top', message: 'Saved on the server', icon: 'save' });
             this.validateUdTree(exportedConll);
           }