docs(PhotoDialog): improve component documentation and error handling

- Add comprehensive JSDoc documentation for component features and capabilities
- Fix line wrapping in file-level documentation header
- Improve error message formatting for better readability
- Remove unused PhotoResult interface
- Maintain consistent documentation style with project standards

The documentation improvements help developers better understand the component's
cross-platform photo handling capabilities and error management approach.
This commit is contained in:
Matthew Raymer
2025-05-02 08:39:29 +00:00
parent 149d976c98
commit 3553ac8e30
5 changed files with 2089 additions and 3098 deletions

View File

@@ -1,3 +1,14 @@
/** * PhotoDialog.vue - Cross-platform photo capture and selection component * *
This component provides a unified interface for taking photos and selecting
images * across different platforms (web, mobile) using the PlatformService. It
supports: * - Taking photos using device camera * - Selecting images from device
gallery * - Image cropping functionality * - Image upload to server * - Error
handling and user feedback * * Features: * - Responsive design with mobile-first
approach * - Cross-platform compatibility through PlatformService * - Image
cropping with aspect ratio control * - Progress feedback during upload * -
Comprehensive error handling * * @author Matthew Raymer * @version 1.0.0 * @file
PhotoDialog.vue */
<template>
<div v-if="visible" class="dialog-overlay z-[60]">
<div class="dialog relative">
@@ -90,16 +101,6 @@
</template>
<script lang="ts">
/**
* PhotoDialog.vue - Cross-platform photo capture and selection component
*
* This component provides a unified interface for taking photos and selecting images
* across different platforms using the PlatformService.
*
* @author Matthew Raymer
* @file PhotoDialog.vue
*/
import axios from "axios";
import { Component, Vue } from "vue-facing-decorator";
import VuePictureCropper, { cropper } from "vue-picture-cropper";
@@ -113,37 +114,69 @@ import { PlatformServiceFactory } from "../services/PlatformServiceFactory";
export default class PhotoDialog extends Vue {
$notify!: (notification: NotificationIface, timeout?: number) => void;
/** Active DID for user authentication */
activeDid = "";
/** Current image blob being processed */
blob?: Blob;
/** Type of claim for the image */
claimType = "";
/** Whether to show cropping interface */
crop = false;
/** Name of the selected file */
fileName?: string;
/** Callback function to set image URL after upload */
setImageCallback: (arg: string) => void = () => {};
/** Whether to show retry button */
showRetry = true;
/** Upload progress state */
uploading = false;
/** Dialog visibility state */
visible = false;
private platformService = PlatformServiceFactory.getInstance();
URL = window.URL || window.webkitURL;
/**
* Lifecycle hook: Initializes component and retrieves user settings
* @throws {Error} When settings retrieval fails
*/
async mounted() {
try {
const settings = await retrieveSettingsForActiveAccount();
this.activeDid = settings.activeDid || "";
} catch (err: unknown) {
logger.error("Error retrieving settings from database:", err);
} catch (error: unknown) {
logger.error("Error retrieving settings from database:", error);
this.$notify(
{
group: "alert",
type: "danger",
title: "Error",
text: err.message || "There was an error retrieving your settings.",
text:
error instanceof Error
? error.message
: "There was an error retrieving your settings.",
},
-1,
);
}
}
/**
* Opens the photo dialog with specified configuration
* @param setImageFn - Callback function to handle image URL after upload
* @param claimType - Type of claim for the image
* @param crop - Whether to enable cropping
* @param blob - Optional existing image blob
* @param inputFileName - Optional filename for the image
*/
open(
setImageFn: (arg: string) => void,
claimType: string,
@@ -170,6 +203,9 @@ export default class PhotoDialog extends Vue {
}
}
/**
* Closes the photo dialog and resets state
*/
close() {
this.visible = false;
const bottomNav = document.querySelector("#QuickNav") as HTMLElement;
@@ -179,6 +215,10 @@ export default class PhotoDialog extends Vue {
this.blob = undefined;
}
/**
* Captures a photo using device camera
* @throws {Error} When camera access fails
*/
async takePhoto() {
try {
const result = await this.platformService.takePicture();
@@ -198,6 +238,10 @@ export default class PhotoDialog extends Vue {
}
}
/**
* Selects an image from device gallery
* @throws {Error} When gallery access fails
*/
async pickPhoto() {
try {
const result = await this.platformService.pickImage();
@@ -217,14 +261,27 @@ export default class PhotoDialog extends Vue {
}
}
/**
* Creates a blob URL for image preview
* @param blob - Image blob to create URL for
* @returns {string} Blob URL for the image
*/
private createBlobURL(blob: Blob): string {
return URL.createObjectURL(blob);
}
/**
* Resets the current image selection
*/
async retryImage() {
this.blob = undefined;
}
/**
* Uploads the current image to the server
* Handles cropping if enabled and manages upload state
* @throws {Error} When upload fails or server returns error
*/
async uploadImage() {
this.uploading = true;
@@ -339,6 +396,7 @@ export default class PhotoDialog extends Vue {
</script>
<style>
/* Dialog overlay styling */
.dialog-overlay {
z-index: 60;
position: fixed;
@@ -353,6 +411,7 @@ export default class PhotoDialog extends Vue {
padding: 1.5rem;
}
/* Dialog container styling */
.dialog {
background-color: white;
padding: 1rem;