feat: upload Rename Input done.

src/main.js

@@ -40,6 +40,7 @@ import PickList from 'primevue/picklist';
 import Timeline from 'primevue/timeline';
 import InputSwitch from 'primevue/inputswitch';
 import InputNumber from 'primevue/inputnumber';
+import InputText from 'primevue/inputtext';
 import Chart from 'primevue/chart';
 import Slider from 'primevue/slider';
 import Calendar from 'primevue/calendar';
@@ -92,6 +93,7 @@ app.component('PickList', PickList);
 app.component('Timeline', Timeline);
 app.component('InputSwitch', InputSwitch);
 app.component('InputNumber', InputNumber);
+app.component('InputText', InputText);
 app.component('Chart', Chart);
 app.component('Slider', Slider);
 app.component('Calendar', Calendar);

src/stores/files.js

@@ -4,7 +4,6 @@ import moment from 'moment';
 import apiError from '@/module/apiError.js';
 import Swal from 'sweetalert2';
 import { uploadFailed, uploadloader, uploadSuccess } from '@/module/alertModal.js'
-import { registerRuntimeCompiler } from "vue";
 
 export default defineStore('filesStore', {
   state: () => ({
@@ -177,10 +176,8 @@ export default defineStore('filesStore', {
 
       try {
         const response = await axios.put(api, data);
-        console.log('response:', response);
         this.uploadFileName = null;
       } catch(error) {
-        console.log('error:', error);
         apiError(error, 'Failed to rename.');
       }
     }

src/views/Upload/index.vue

@@ -3,7 +3,10 @@
     <!-- Upload Content -->
     <div class="w-full h-[calc(100%_-_64px)]">
       <!-- File name -->
-      <div id="uploadFileName" class="font-bold text-base leading-[48px] border-b border-neutral-300 cursor-pointer focus-visible:outline-primary/50 focus-visible:outline-0 group whitespace-nowrap break-keep overflow-hidden text-ellipsis" contentEditable="true" @focusout="onFocusout($event)" @paste="onPaste" @click="showEdit = false" placeholder="File's name">{{ fileName }}<span class="material-symbols-outlined align-text-bottom text-lg group-hover:animate-edit" contentEditable="false" :class="showEdit ? '' : 'hidden'" >stylus</span></div>
+      <!-- cursor-pointer -->
+      <div class="h-12 pl-1 border-b border-neutral-300 flex items-center" title="Rename">
+        <InputText type="text" v-model="fileName" id="fileNameInput" class="rounded !border-transparent !font-bold !text-base !py-1 min-w-[1px] w-auto" @input="onInput" @blur="onBlur" />
+      </div>
       <!-- Upload notification -->
       <div class="flex justify-start items-center space-x-2 ml-2 py-2">
         <span class="material-symbols-outlined text-neutral-700 cursor-pointer" v-tooltip.right="tooltipUpload">info</span>
@@ -103,6 +106,7 @@ export default {
           4. Timestamp: The time of occurrence of a particular event, such as the start or end of an activity.
           5. Status: Activity status, such as Start or Complete.
           6. Attribute: A property that can be associated with a case to provide additional information about that case.`,
+          // 暫時沒有 Resource
           // 7. Resource: A resource refers to any entity that is required to carry out a business process. This can include people, equipment, software, or any other type of asset.
        class: '!max-w-[400px] !text-[10px] !opacity-80',
        autoHide: false,
@@ -122,7 +126,6 @@ export default {
       informData: [], // 紅字提示，尚未選擇的 type
       repeatedData: [], // 紅字提示，重複選擇的 type
       baseTypeData: ['Case ID*', 'Timestamp*', 'Status*', 'Activity*', 'Activity Instance ID*'],
-      showEdit: true,
       fileName: this.uploadFileName,
     };
   },
@@ -147,18 +150,52 @@ export default {
     uploadFailed,
     uploadSuccess,
     uploadConfirm,
-    onFocusout(e){
-      console.log('onFocusout:', e);
-      // 刪除換行
-      let node = e.target.childNodes;
-      for(let i = node.length - 1; i >= 0; i--) {
-        if(node[i].nodeName === 'BR') e.target.removeChild(node[i]);
+    /**
+     * Rename 離開 input 的行為
+     * @param {Event} e
+     */
+    onBlur(e) {
+      const baseWidth = 20;
+
+      if(e.target.value === '') {
+        e.target.value = this.uploadFileName;
+        const textWidth = this.getTextWidth(e.target.value, e.target);
+        e.target.style.width = baseWidth + textWidth + 'px';
+      }else if(e.target.value !== e.target.value.trim()) {
+        e.target.value = e.target.value.trim();
+        const textWidth = this.getTextWidth(e.target.value, e.target);
+        e.target.style.width = baseWidth + textWidth + 'px';
       }
-      this.showEdit = true;
     },
-    onPaste(e) {
-      e.preventDefault();
-      this.fileName = e.clipboardData.getData('text/plain').replace(/<br\s*\/?>/gi, '').replace(/\n/g, '');
+    /**
+     * Rename 輸入 input 的行為
+     * @param {Event} e
+     */
+    onInput(e) {
+      const baseWidth = 20;
+      const textWidth = this.getTextWidth(e.target.value, e.target);
+
+      e.target.style.width = baseWidth + textWidth + 'px';
+    },
+    /**
+     * input 寬度隨著 value 響應式改變
+     * @param {String} text
+     * @param {Event} e
+     */
+    getTextWidth(text, e) {
+      // 替換空格為不斷行的空格
+      const processedText = text.replace(/ /g, '\u00a0');
+      const hiddenSpan = document.createElement('span');
+      let width;
+
+      hiddenSpan.innerHTML = processedText;
+      hiddenSpan.style.font = window.getComputedStyle(e).font;
+      hiddenSpan.style.visibility = 'hidden';
+      document.body.appendChild(hiddenSpan);
+      width = hiddenSpan.getBoundingClientRect().width;
+      document.body.removeChild(hiddenSpan);
+
+      return width;
     },
     /**
      * 驗證，根據新的 selectedColumns 更新 isInform、informData 和 repeatedData
@@ -225,10 +262,9 @@ export default {
         }
       });
 
-      // 取得欲更改的檔名
-      this.uploadFileName = document.querySelector('#uploadFileName').firstChild.textContent;
-      // console.log(this.uploadFileName);
-      // this.FilesStore.rename();
+      // 取得欲更改的檔名，
+      this.uploadFileName = this.fileName;
+      // this.filesStore.rename();
       // 設定第二階段上傳的 data
       haveValueData.forEach(column => {
         switch (column.code) {
@@ -254,16 +290,26 @@ export default {
             break;
         }
       });
-      // this.uploadConfirm(fetchData);
+      this.uploadConfirm(fetchData);
     },
   },
   mounted() {
     // 要有 uploadID 才能進來
+    // 只監聽第一次
+    let unwatch = this.$watch('fileName', (newValue) => {
+        if (newValue) {
+          const inputElement = document.getElementById('fileNameInput');
+          const baseWidth = 20;
+          const textWidth = this.getTextWidth(this.fileName, inputElement);
+          inputElement.style.width = baseWidth + textWidth + 'px';
+        }
+      },
+      { immediate: true }
+    );
     this.isInform = true; // 初始為藍字提示
     this.showEdit = true;
-    this.fileName = 'abc'
-    this.uploadFileName = 'kmu_log_without_attribute';
     this.filesStore.getUploadDetail();
+    unwatch();
     this.isLoading = false;
   },
   beforeUnmount() {