added profile picture modal

frontend/components/profile/index/ProfilePictureModal.vue

@@ -1,9 +1,48 @@
 <script setup lang="ts">
+// imports
+
+import useUpdateAccount from "~/composables/api/account/useUpdateAccount";
+import { useToast } from "~/composables/global/useToast";
+
+// types
+
+type Props = {
+    modelValue: File | null;
+    isShow: boolean;
+};
+
+type Emits = {
+    "update:modelValue": [value: File];
+    "update:isShow": [value: boolean];
+};
+
+// props
+
+const props = defineProps<Props>();
+
+const { modelValue, isShow } = toRefs(props);
+
+// emits
+
+const emit = defineEmits<Emits>();
+
 // state
 
-const isShow = ref(false);
+const visible = computed({
+    get: () => isShow.value ?? false,
+    set: (value: boolean) => emit("update:isShow", value),
+});
 
-const currentProfile = ref("");
+const { addToast } = useToast();
+
+const {
+    open: openFileDialog,
+    reset: resetFileDialog,
+    onChange: onFileDialogChange,
+} = useFileDialog({
+    accept: ".jpg, .jpeg, .png",
+    directory: false,
+});
 
 const avatars = ref([
     "/avatars/1.jpg",
@@ -11,42 +50,41 @@ const avatars = ref([
     "/avatars/3.jpg",
     "/avatars/4.jpg",
     "/avatars/5.jpg",
-    "/avatars/1.jpg",
-    "/avatars/2.jpg",
-    "/avatars/3.jpg",
-    "/avatars/4.jpg",
-    "/avatars/5.jpg",
-    "/avatars/1.jpg",
-    "/avatars/2.jpg",
-    "/avatars/3.jpg",
-    "/avatars/4.jpg",
-    "/avatars/5.jpg",
-    "/avatars/1.jpg",
-    "/avatars/2.jpg",
-    "/avatars/3.jpg",
-    "/avatars/4.jpg",
-    "/avatars/5.jpg",
-    "/avatars/1.jpg",
-    "/avatars/2.jpg",
-    "/avatars/3.jpg",
-    "/avatars/4.jpg",
-    "/avatars/5.jpg",
-    "/avatars/5.jpg",
-    "/avatars/1.jpg",
-    "/avatars/2.jpg",
-    "/avatars/3.jpg",
-    "/avatars/4.jpg",
-    "/avatars/5.jpg",
-    "/avatars/1.jpg",
-    "/avatars/2.jpg",
-    "/avatars/3.jpg",
-    "/avatars/4.jpg",
-    "/avatars/5.jpg",
 ]);
+
+// queries
+
+const { isPending: updateAccountIsPending } = useUpdateAccount();
+
+// computed
+
+const currentProfile = computed({
+    get: () =>
+        !!modelValue.value ? URL.createObjectURL(modelValue.value) : null,
+    set: (value: File) => emit("update:modelValue", value),
+});
+
+// methods
+
+onFileDialogChange((files: any) => {
+    const file = files[0];
+
+    if (file.size > 2 * 1024 * 1024) {
+        addToast({
+            message: "محدودیت حجم فایل حداکثر ۲ مگابایت می باشد",
+            options: {
+                status: "error",
+            },
+        });
+        return;
+    }
+    emit("update:modelValue", file);
+    resetFileDialog();
+});
 </script>
 
 <template>
-    <Modal v-model="isShow" title="عکس پروفایل" icon="bi:image" iconSize="20">
+    <Modal v-model="visible" title="عکس پروفایل" icon="bi:image" iconSize="20">
         <template #trigger>
             <button
                 class="bg-black text-slate-100 rounded-full p-2 flex-center absolute -bottom-0 -right-0"
@@ -105,7 +143,18 @@ const avatars = ref([
                                 class="size-full"
                             />
                         </div>
-                        <Button class="rounded-full">آپلود عکس شما</Button>
+                        <Button
+                            class="rounded-full w-[8rem]"
+                            @click="openFileDialog"
+                            :loading="updateAccountIsPending"
+                            size="md"
+                        >
+                            <Icon
+                                v-if="updateAccountIsPending"
+                                name="svg-spinners:3-dots-bounce"
+                            />
+                            <span v-else>آپلود عکس شما</span>
+                        </Button>
                     </div>
                 </div>
             </div>