@usssa/component-library 1.0.0-alpha.182 → 1.0.0-alpha.183

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.182",
+  "version": "1.0.0-alpha.183",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Engineering Team <engineering@usssa.com>",

package/src/components/core/UUploader.vue

@@ -7,7 +7,14 @@ import UBtnStd from './UBtnStd.vue'
 import UInputTextStd from './UInputTextStd.vue'
 import UTooltip from './UTooltip.vue'
 
-const emit = defineEmits(['onUploadFactory', 'onViewFile', 'getFilesOnAdded'])
+const emit = defineEmits([
+  'onUploadFactory',
+  'onViewFile',
+  'getFilesOnAdded',
+  'update:uploadedFiles',
+  'updateFileName',
+  'removeFile',
+])
 
 const props = defineProps({
   autoUpload: {
@@ -18,6 +25,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  cancelBtnLabel: {
+    type: String,
+    default: 'Cancel',
+  },
   dataTestId: {
     type: String,
     default: 'uploader',
@@ -77,6 +88,18 @@ const props = defineProps({
     type: String,
     default: 'sm',
   },
+  updateFileNameLabel: {
+    type: String,
+    default: 'Update file name',
+  },
+  uploadedFiles: {
+    type: Array,
+    default: () => [],
+  },
+  viewBtnLabel: {
+    type: String,
+    default: 'View',
+  },
   viewIconLabel: {
     type: String,
     default: 'view File Name',
@@ -87,9 +110,11 @@ const $q = useQuasar()
 
 const fileDisplayName = ref([])
 const isEditing = ref([])
-const isFileUploaded= ref(false)
-const isSmallWidthDevices = computed(() => $q.screen.width < 350)
 const uploaderRef = ref(null)
+const isSmallWidthDevices = computed(() => $q.screen.width < 350)
+const uploadedFiles = computed(() =>
+  Array.isArray(props.uploadedFiles) ? props.uploadedFiles : []
+)
 
 const cancelEdit = (payload) => {
   const { index, file } = payload
@@ -105,7 +130,7 @@ const handleViewClick = (file) => {
   return emit('onViewFile', file)
 }
 
-const OnFileAdded = (files) => {
+const onFileAdded = (files) => {
   files.forEach((file, index) => {
     files[index]['displayName'] = files[index]['name']
     fileDisplayName.value[file['__key']] = files[index]['displayName']
@@ -114,23 +139,60 @@ const OnFileAdded = (files) => {
   return emit('getFilesOnAdded', uploaderRef.value.files)
 }
 
-const OnFileUploaded = ({ files, xhr }) => {
+const onFileUploaded = ({ files, xhr }) => {
   files.forEach((file, index) => {
     files[index]['uploaded_date'] = new Date()
   })
-  isFileUploaded.value = true
 }
 
 const removeFile = (payload) => {
   const { scope, file } = payload
-  fileDisplayName.value.splice(file['__key'], 1)
-  scope.removeFile(file)
-  isFileUploaded.value = false
+
+  const indexInScope = scope.files.findIndex((f) => f.__key === file.__key)
+  if (indexInScope !== -1) {
+    scope.removeFile(file)
+  }
+
+  const uploadedIndex = uploadedFiles.value.findIndex(
+    (f) => f.__key === file.__key
+  )
+  if (uploadedIndex !== -1) {
+    const updated = [...uploadedFiles.value]
+    updated.splice(uploadedIndex, 1)
+
+    emit('update:uploadedFiles', updated)
+  }
+
+  emit('removeFile', file)
+}
+
+const scopedFiles = (files) => {
+  const combined = [...files]
+
+  uploadedFiles.value.forEach((uploadedFile) => {
+    const exists = combined.some((f) => f.__key === uploadedFile.__key)
+    if (!exists) {
+      combined.push({
+        ...uploadedFile,
+        type: uploadedFile.type,
+        __status: 'uploaded',
+        uploaded: true,
+        __key: uploadedFile.__key || uploadedFile.name,
+      })
+    }
+  })
+
+  return combined
 }
 
 const updateFileName = (payload) => {
   const { index, scope, file } = payload
-  scope.files[index].displayName = fileDisplayName.value[file['__key']]
+  if (scope.files.length) {
+    scope.files[index].displayName = fileDisplayName.value[file['__key']]
+  } else {
+    file.displayName = fileDisplayName.value[file['__key']]
+  }
+  emit('updateFileName', fileDisplayName.value[file['__key']])
   isEditing.value[index] = false
 }
 
@@ -153,11 +215,15 @@ defineExpose({ upload })
       :no-thumbnails="noThumbnails"
       ref="uploaderRef"
       :url="fileUploadUrl"
-      @added="OnFileAdded"
-      @uploaded="OnFileUploaded"
+      @added="onFileAdded"
+      :uploadedFiles="uploadedFiles"
+      @uploaded="onFileUploaded"
     >
       <template v-slot:header="scope">
-        <div v-if="scope.canAddFiles && (multiple || !isFileUploaded)" class="q-py-md q-px-xl bg-neutral-2 uploader-content">
+        <div
+          v-if="scope.canAddFiles && !uploadedFiles.length"
+          class="q-py-md q-px-xl bg-neutral-2 uploader-content"
+        >
           <div class="text-center">
             <img
               alt="Upload Files"
@@ -169,7 +235,7 @@ defineExpose({ upload })
           </div>
           <div class="list-items row">
             <UBtnStd
-              class="q-mt-md"
+              class="q-mt-md selectFileBtn"
               :aria-label="selectFileBtnLabel"
               color="primary"
               dataTestId="select-file-btn"
@@ -207,7 +273,7 @@ defineExpose({ upload })
           dataTestId="file-list"
         >
           <q-card
-            v-for="(file, index) in scope.files"
+            v-for="(file, index) in scopedFiles(scope.files)"
             :class="`uploader-list ${
               file.__status == 'uploading'
                 ? 'q-py-xs q-px-sm'
@@ -235,7 +301,7 @@ defineExpose({ upload })
                   tabindex="0"
                 />
                 <q-icon
-                  v-if="file.__img"
+                  v-if="file.__img || getFileCategory(file.type)"
                   class="fa-duotone fa-solid fa-file-image"
                   :color="fileIconColor"
                   size="md"
@@ -329,6 +395,7 @@ defineExpose({ upload })
             <!--End--- When File  Uploading on server --End -->
 
             <!-- When File  Uploaded on server -->
+
             <q-card-section
               v-if="file.__status == 'uploaded'"
               class="card-section"
@@ -339,27 +406,27 @@ defineExpose({ upload })
                   :class="`fa-duotone fa-solid fa-file-${getFileCategory(
                     file.type
                   )}`"
+                  :aria-label="file.displayName"
                   :color="fileIconColor"
                   size="md"
-                  tabindex="0"
                 />
                 <q-icon
                   v-if="getFileCategory(file.type) == 'Unknown'"
                   class="fa-duotone fa-solid fa-file-doc"
+                  :aria-label="file.displayName"
                   :color="fileIconColor"
                   size="md"
-                  tabindex="0"
                 />
                 <q-icon
                   v-if="file.__img"
                   class="fa-duotone fa-solid fa-file-image"
+                  :aria-label="file.displayName"
                   :color="fileIconColor"
                   size="md"
-                  tabindex="0"
                 />
 
                 <div class="col">
-                  <span class="text-caption-md title flex">
+                  <span class="text-caption-md title flex" tabindex="0">
                     <UTooltip
                       anchor="center end"
                       :description="file.displayName || file.name"
@@ -404,7 +471,7 @@ defineExpose({ upload })
                   v-if="size == 'md'"
                   :aria-label="viewIconLabel"
                   color="primary"
-                  label="View"
+                  :label="viewBtnLabel"
                   outline
                   size="sm"
                   @onClick="handleViewClick(file)"
@@ -413,7 +480,7 @@ defineExpose({ upload })
               <div v-if="isEditing[index]" class="q-my-ba">
                 <UInputTextStd
                   v-model="fileDisplayName[file.__key]"
-                  label="Edit file name"
+                  :label="editIconLabel"
                   size="md"
                 />
               </div>
@@ -435,7 +502,7 @@ defineExpose({ upload })
                   :aria-label="viewIconLabel"
                   color="primary"
                   :full-width="true"
-                  label="View File"
+                  :label="viewBtnLabel"
                   :outline="true"
                   size="md"
                   @onClick="handleViewClick(file)"
@@ -446,7 +513,7 @@ defineExpose({ upload })
                   color="primary"
                   flat
                   :full-width="true"
-                  label="Cancel"
+                  :label="cancelBtnLabel"
                   size="md"
                   @click="cancelEdit({ index, file })"
                 />
@@ -457,7 +524,7 @@ defineExpose({ upload })
                   }`"
                   color="primary"
                   :full-width="true"
-                  label="Update file name"
+                  :label="updateFileNameLabel"
                   size="md"
                   @click="updateFileName({ scope, file, index })"
                 />