trent_larson/crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 22 Releases 5 Wiki Activity

allow viewing and deletion of an image

Browse Source
This commit is contained in:
Trent Larson
2024-03-08 23:56:19 -07:00
parent 792e9cb648
commit c58f012d2c
5 changed files with 109 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
project.task.yaml
View File

@@ -22,6 +22,8 @@ tasks :
- put the image URL in the claim
- Rates - images erased?
- image not associated with JWT ULID since that's assigned later
- remove previous image
- send image type (eg. portrait, give, project)
- ask to detect location & record it in settings
- if personal location is set, show potential local affiliations

31
src/App.vue
View File

@@ -148,6 +148,37 @@
class="w-full"
role="alert"
>
<div
v-if="notification.type === 'confirm'"
class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
>
<div
class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
>
<div class="w-full px-6 py-6 text-slate-900 text-center">
<p class="text-lg mb-4">
{{ notification.title }}
</p>
<button
@click="
notification.onYes();
close(notification.id);
"
class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
>
Yes
</button>
<button
@click="close(notification.id)"
class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
>
Cancel
</button>
</div>
</div>
</div>
<div
v-if="notification.type === 'notification-permission'"
class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"

1
src/constants/app.ts
View File

@@ -39,4 +39,5 @@ export interface NotificationIface {
type: string; // "toast" | "info" | "success" | "warning" | "danger"
title: string;
text: string;
onYes?: () => Promise<void>;
}

79
src/views/GiftedDetails.vue
View File

@@ -52,12 +52,23 @@
</div>
<div class="flex justify-center mb-4 mt-4">
<router-link
:to="{ name: 'gifted-photo' }"
class="bg-blue-500 text-white px-1.5 py-1 rounded-md"
>
<fa icon="camera" class="fa-fw" />
</router-link>
<span v-if="imageUrl">
Includes Image:
<a :href="imageUrl" target="_blank" class="text-blue-500 ml-4">View</a>
<fa
icon="trash-can"
@click="confirmDeleteImage"
class="text-red-500 fa-fw ml-8"
/>
</span>
<span v-else>
<router-link
:to="{ name: 'gifted-photo' }"
class="bg-blue-500 text-white px-1.5 py-1 rounded-md"
>
<fa icon="camera" class="fa-fw" />
</router-link>
</span>
</div>
<div class="mt-4">
<input type="checkbox" class="h-6 w-6 mr-2" v-model="givenToUser" />
@@ -88,13 +99,14 @@
<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";
import { NotificationIface } from "@/constants/app";
import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "@/constants/app";
import QuickNav from "@/components/QuickNav.vue";
import TopMessage from "@/components/TopMessage.vue";
import { db } from "@/db/index";
import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
import { createAndSubmitGive } from "@/libs/endorserServer";
import * as libsUtil from "@/libs/util";
import { accessToken } from "@/libs/crypto";
@Component({
components: {
@@ -113,6 +125,7 @@ export default class GiftedDetails extends Vue {
givenToUser = false;
giverDid: string | undefined;
giverName = "";
imageUrl = "";
isTrade = false;
message = "";
offerId = "";
@@ -126,6 +139,7 @@ export default class GiftedDetails extends Vue {
this.description = this.$route.query.description as string;
this.giverDid = this.$route.query.giverDid as string;
this.giverName = this.$route.query.giverName as string;
this.imageUrl = localStorage.getItem("imageUrl") || "";
this.message = this.$route.query.message as string;
this.offerId = this.$route.query.offerId as string;
this.projectId = this.$route.query.projectId as string;
@@ -173,6 +187,57 @@ export default class GiftedDetails extends Vue {
this.$router.back();
}
confirmDeleteImage() {
this.$notify(
{
group: "modal",
type: "confirm",
title: "Are you sure you want to delete the image?",
text: "",
onYes: this.deleteImage,
},
-1,
);
}
async deleteImage() {
const identity = await libsUtil.getIdentity(this.activeDid);
const token = await accessToken(identity);
const response = await this.axios.delete(
DEFAULT_IMAGE_API_SERVER + "/image/" + encodeURIComponent(this.imageUrl),
{
headers: {
Authorization: `Bearer ${token}`,
},
},
);
if (response.status === 204) {
this.$notify(
{
group: "alert",
type: "success",
title: "Deleted",
text: "That image record was deleted.",
},
5000,
);
} else {
console.error("Error deleting image:", response);
this.$notify(
{
group: "alert",
type: "danger",
title: "Error",
text: "There was an error deleting the image.",
},
5000,
);
return;
}
localStorage.removeItem("imageUrl");
this.imageUrl = "";
}
async confirm() {
this.$notify(
{

10
src/views/GiftedPhoto.vue
View File

@@ -46,12 +46,7 @@
Camera "resolution" doesn't change how it shows on screen but rather stretches the result, eg the following which just stretches it vertically:
:resolution="{ width: 375, height: 812 }"
-->
<camera
facingMode="environment"
autoplay
ref="camera"
class="relative h-full"
>
<camera facingMode="environment" autoplay ref="camera">
<div class="absolute bottom-0 w-full flex justify-center pb-4">
<!-- Button -->
<button
@@ -157,6 +152,7 @@ export default class GiftedPhoto extends Vue {
formData,
{ headers },
);
this.uploading = false;
this.$notify(
{
@@ -167,7 +163,7 @@ export default class GiftedPhoto extends Vue {
},
3000,
);
console.log("Sent. Response:", response.data);
localStorage.setItem("imageUrl", response.data.url as string);
this.$router.back();
} catch (error) {
console.error("Error uploading the image", error);