refactor(05): upload slip

src/components/upload-file/UploadFileCard.vue

@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import axios from 'axios';
+import { getAttachmentHead, convertFileSize } from 'stores/utils';
+import { onMounted, ref } from 'vue';
+
+const api = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL });
+const size = ref<number>(0);
+
+const props = withDefaults(
+  defineProps<{
+    icon?: string;
+    color?: string;
+    name?: string;
+    url?: string;
+    progress?: number;
+    uploading?: { loaded: number; total: number };
+
+    clickable?: boolean;
+    closeable?: boolean;
+  }>(),
+  {
+    icon: 'mdi-file-outline',
+    color: 'var(--brand-1)',
+    name: '-',
+    url: '-',
+    progress: 0,
+    uploading: () => ({ loaded: 0, total: 0 }),
+
+    clickable: false,
+    closeable: true,
+  },
+);
+
+defineEmits<{
+  (e: 'close'): void;
+  (e: 'click'): void;
+}>();
+
+async function getSize() {
+  if (props.progress !== 1) return;
+  const res = await getAttachmentHead(api, props.url);
+  if (res && res['content-length']) size.value = Number(res['content-length']);
+}
+
+onMounted(() => {
+  getSize();
+});
+</script>
+<template>
+  <div
+    class="bordered rounded row items-center q-pa-md"
+    :class="{ 'cursor-pointer': clickable }"
+    @click="$emit('click')"
+  >
+    <q-icon :name="icon" size="lg" :style="`color: ${color}`" />
+    <article class="col column q-pl-md">
+      <span>{{ name }}</span>
+      <span class="text-caption app-text-muted-2">
+        {{
+          uploading.loaded
+            ? `${convertFileSize(uploading.loaded)} of ${convertFileSize(uploading.total)}`
+            : `${convertFileSize(size)} of ${convertFileSize(size)}`
+        }}
+        •
+        <q-spinner-ios
+          v-if="progress !== 1"
+          class="q-mx-xs"
+          color="primary"
+          size="1.5em"
+        />
+        <q-icon v-else name="mdi-check-circle" color="positive" size="1rem" />
+        {{ progress !== 1 ? `Uploading...` : 'Completed' }}
+      </span>
+    </article>
+    <q-btn
+      v-if="closeable"
+      icon="mdi-close"
+      flat
+      rounded
+      size="sm"
+      padding="0"
+      class="q-ml-auto self-start"
+      style="color: hsl(var(--text-mute))"
+      @click.stop="$emit('close')"
+    />
+    <q-linear-progress
+      v-if="progress !== 1"
+      :value="progress"
+      class="q-mt-sm rounded"
+      color="info"
+    />
+  </div>
+</template>