add rename sample

Arborator · Oct 14, 2024 · 3e1088e · 3e1088e
1 parent 899bc2e
commit 3e1088e
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 5 deletions.
diff --git a/src/api/backend-api.ts b/src/api/backend-api.ts
@@ -122,6 +122,9 @@ export default {
   deleteSamples(projectName: string, data: any) {
     return API.patch(`/projects/${projectName}/samples`, data);
   },
+  renameSample(projectName: string, sampleName: string, data: any) {
+    return API.post(`/projects/${projectName}/samples/${sampleName}/sample-name`, data);
+  },
   tokenizeSample(projectName: string, data: any) {
     return API.post(`/projects/${projectName}/samples/tokenize`, data, { timeout: 400000 });
   },

diff --git a/src/components/project/ProjectTable.vue b/src/components/project/ProjectTable.vue
@@ -48,6 +48,19 @@
             no-caps
           >
             {{ props.row.sampleName }}
+            <q-menu
+              context-menu
+              touch-position
+            > 
+              <q-list>
+                <q-item v-close-popup clickable @click="showRenameSampleDial(props.row.sampleName)">
+                  <q-item-section>Rename sample</q-item-section>
+                  <q-item-section side>
+                    <q-icon name="edit" />
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
           </q-btn>
         </q-td>
         <q-td key="sentences" :props="props">{{ props.row.sentences }}</q-td>
@@ -79,19 +92,26 @@
       </q-tr>
     </template>
   </q-table>
+  <q-dialog v-model="isShowRenameDial">
+   <RenameSample :sample-name="selectedSample" /> 
+  </q-dialog>
 </template>
 <script lang="ts">
+import api from 'src/api/backend-api';
+import { sample_t } from 'src/api/backend-types';
+import { table_t } from 'src/types/main_types';
+import RenameSample from 'src/components/project/RenameSample.vue';
+
 import { mapState } from 'pinia';
 import { useProjectStore } from 'src/pinia/modules/project';
 import { notifyError, notifyMessage } from 'src/utils/notify';
 import { PropType, defineComponent } from 'vue';
 
-import api from '../../api/backend-api';
-import { sample_t } from '../../api/backend-types';
-import { table_t } from '../../types/main_types';
-
 export default defineComponent({
   name: 'ProjectTable',
+  components: {
+    RenameSample,
+  },
   emits: ['selected-samples'],
   props: {
     samples: {
@@ -170,6 +190,8 @@ export default defineComponent({
           value: 4,
         },
       ],
+      isShowRenameDial: false,
+      selectedSample: '',
     };
   },
   computed: {
@@ -203,6 +225,10 @@ export default defineComponent({
           });
       }, 0);
     },
+    showRenameSampleDial(sampleName: string) {
+      this.isShowRenameDial = true;
+      this.selectedSample = sampleName;
+    }
   },
 });
 </script>

diff --git a/src/components/project/RenameSample.vue b/src/components/project/RenameSample.vue
@@ -0,0 +1,72 @@
+<template>
+  <q-card style="min-width: 50vw">
+    <q-bar class="bg-primary text-white">
+      <q-space />
+      <q-btn v-close-popup flat dense icon="close" />
+    </q-bar>
+    <q-card-section>
+      <div class="text-h6 text-left">Rename Sample</div>
+    </q-card-section>
+    <q-separator />
+    <q-card-section>
+      <q-input
+        outlined
+        v-model="newSampleName"
+        label="Rename sample"
+        lazy-rules
+        :rules="[
+          (val) => (val && val.length > 0) || 'Sample name must not be empty',
+          (val) => (val && !val.endsWith(' ')) || 'Sample must not end with white space',
+        ]"
+      />
+      <div class="flex flex-center">
+        <q-btn v-close-popup :disable="disableBtn" color="primary" label="Rename sample" @click="renameSample()" />
+      </div>
+    </q-card-section>
+  </q-card>
+</template>
+<script lang="ts">
+import { api } from 'src/boot/axios';
+import { mapWritableState, mapState } from 'pinia';
+import { useProjectStore } from 'src/pinia/modules/project';
+import { notifyError, notifyMessage } from 'src/utils/notify';
+import { defineComponent, PropType } from 'vue';
+
+export default defineComponent({
+  name: 'RenameSample',
+  props: {
+    sampleName: {
+      type: String as PropType<string>,
+      required: true,
+    }
+  },
+  data() {
+    return {
+      newSampleName: '',
+
+    }
+  },
+  computed: {
+    ...mapState(useProjectStore, ['name']), 
+    ...mapWritableState(useProjectStore, ['reloadSamples']),
+    disableBtn() {
+      return this.newSampleName === '' && this.newSampleName.endsWith(' ');
+    }
+  },
+  methods: {
+    renameSample() {
+      const data = { newSampleName: this.newSampleName };
+      api
+        .renameSample(this.name, this.sampleName, data)
+        .then(() => {
+          notifyMessage({ message: 'The sample name is modified' });
+          this.reloadSamples = true;
+        })
+        .catch((error) => {
+          notifyError({ error: error });
+        });
+    },
+  }
+});
+
+</script>
diff --git a/src/pages/Project.vue b/src/pages/Project.vue
@@ -220,7 +220,7 @@ export default defineComponent({
       if (newVal > 0) this.loadProjectData();
     },
     reloadSamples(newVal) {
-      if (newVal > 0) this.loadProjectData();
+      if (newVal) this.loadProjectData();
     }
   },
   methods: {