From 605239130e221936eafdb7ce0b99dab66c28f8d8 Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Fri, 20 Nov 2020 18:34:13 +0100 Subject: [PATCH] Refactor Picture upload Signed-off-by: Thomas Citharel --- js/src/components/PictureUpload.vue | 59 +++++++++++++------ js/src/graphql/upload.ts | 9 ++- js/src/types/event.model.ts | 3 +- js/src/utils/image.ts | 2 +- .../views/Account/children/EditIdentity.vue | 13 +--- js/src/views/Event/Edit.vue | 15 +++-- js/src/views/Group/GroupSettings.vue | 6 +- js/src/views/Posts/Edit.vue | 2 +- 8 files changed, 70 insertions(+), 39 deletions(-) diff --git a/js/src/components/PictureUpload.vue b/js/src/components/PictureUpload.vue index 2fb40a9e..64843b69 100644 --- a/js/src/components/PictureUpload.vue +++ b/js/src/components/PictureUpload.vue @@ -1,7 +1,7 @@ @@ -45,16 +52,22 @@ figure.image { color: #eee; } } + +.action-buttons { + display: flex; + flex-direction: column; +} diff --git a/js/src/graphql/upload.ts b/js/src/graphql/upload.ts index b1d1cafb..6d011cd1 100644 --- a/js/src/graphql/upload.ts +++ b/js/src/graphql/upload.ts @@ -1,6 +1,5 @@ import gql from "graphql-tag"; -/* eslint-disable import/prefer-default-export */ export const UPLOAD_PICTURE = gql` mutation UploadPicture($file: Upload!, $alt: String, $name: String!) { uploadPicture(file: $file, alt: $alt, name: $name) { @@ -9,3 +8,11 @@ export const UPLOAD_PICTURE = gql` } } `; + +export const REMOVE_PICTURE = gql` + mutation RemovePicture($id: ID!) { + removePicture(id: $id) { + id + } + } +`; diff --git a/js/src/types/event.model.ts b/js/src/types/event.model.ts index e9bedbef..133a6f88 100644 --- a/js/src/types/event.model.ts +++ b/js/src/types/event.model.ts @@ -69,7 +69,7 @@ interface IEventEditJSON { visibility: EventVisibility; joinOptions: EventJoinOptions; draft: boolean; - picture: IPicture | { pictureId: string } | null; + picture?: IPicture | { pictureId: string } | null; attributedToId: string | null; onlineAddress?: string; phoneAddress?: string; @@ -234,7 +234,6 @@ export class EventModel implements IEvent { joinOptions: this.joinOptions, draft: this.draft, tags: this.tags.map((t) => t.title), - picture: this.picture, onlineAddress: this.onlineAddress, phoneAddress: this.phoneAddress, physicalAddress: this.physicalAddress, diff --git a/js/src/utils/image.ts b/js/src/utils/image.ts index 5c817168..304b7e4b 100644 --- a/js/src/utils/image.ts +++ b/js/src/utils/image.ts @@ -9,7 +9,7 @@ export async function buildFileFromIPicture(obj: IPicture | null | undefined): P return new File([blob], obj.name); } -export function buildFileVariable(file: File | null, name: string, alt?: string): Record { +export function buildFileVariable(file: File | null, name: string, alt?: string): Record { if (!file) return {}; return { diff --git a/js/src/views/Account/children/EditIdentity.vue b/js/src/views/Account/children/EditIdentity.vue index 6054c1e2..ddedce7b 100644 --- a/js/src/views/Account/children/EditIdentity.vue +++ b/js/src/views/Account/children/EditIdentity.vue @@ -27,7 +27,7 @@ {{ $t("I create an identity") }} - + import { Component, Prop, Watch } from "vue-property-decorator"; import { mixins } from "vue-class-component"; +import { IPicture } from "@/types/picture.model"; import { CREATE_PERSON, CURRENT_ACTOR_CLIENT, @@ -136,7 +137,7 @@ import { IPerson, Person } from "../../../types/actor"; import PictureUpload from "../../../components/PictureUpload.vue"; import { MOBILIZON_INSTANCE_HOST } from "../../../api/_entrypoint"; import RouteName from "../../../router/name"; -import { buildFileVariable } from "../../../utils/image"; +import { buildFileFromIPicture, buildFileVariable } from "../../../utils/image"; import { changeIdentity } from "../../../utils/auth"; import identityEditionMixin from "../../../mixins/identityEdition"; @@ -186,13 +187,6 @@ export default class EditIdentity extends mixins(identityEditionMixin) { ) as string; } - get avatarUrl(): string | null { - if (this.identity && this.identity.avatar && this.identity.avatar.url) { - return this.identity.avatar.url; - } - return null; - } - @Watch("isUpdate") async isUpdateChanged(): Promise { this.resetFields(); @@ -286,7 +280,6 @@ export default class EditIdentity extends mixins(identityEditionMixin) { } }, }); - this.avatarFile = null; this.$notifier.success( this.$t("Identity {displayName} updated", { diff --git a/js/src/views/Event/Edit.vue b/js/src/views/Event/Edit.vue index c2c7af27..d9bd96fb 100644 --- a/js/src/views/Event/Edit.vue +++ b/js/src/views/Event/Edit.vue @@ -10,7 +10,11 @@
{{ $t("General information") }} - + @@ -676,6 +680,7 @@ export default class EditEvent extends Vue { __typename: "Person", id: organizerActor.id, participations: { + __typename: "PaginatedParticipantList", total: 1, elements: [ { @@ -763,11 +768,13 @@ export default class EditEvent extends Vue { res.endsOn = null; } - const pictureObj = buildFileVariable(this.pictureFile, "picture"); - res = { ...res, ...pictureObj }; + if (this.pictureFile) { + const pictureObj = buildFileVariable(this.pictureFile, "picture"); + res = { ...res, ...pictureObj }; + } try { - if (this.event.picture) { + if (this.event.picture && this.pictureFile) { const oldPictureFile = (await buildFileFromIPicture(this.event.picture)) as File; const oldPictureFileContent = await readFileAsync(oldPictureFile); const newPictureFileContent = await readFileAsync(this.pictureFile as File); diff --git a/js/src/views/Group/GroupSettings.vue b/js/src/views/Group/GroupSettings.vue index 58bf1156..867b43db 100644 --- a/js/src/views/Group/GroupSettings.vue +++ b/js/src/views/Group/GroupSettings.vue @@ -31,7 +31,7 @@ -
+
@@ -43,7 +43,7 @@ @@ -51,7 +51,7 @@

{{ $t("Group visibility") }}

diff --git a/js/src/views/Posts/Edit.vue b/js/src/views/Posts/Edit.vue index 32974e4a..f11f3d6b 100644 --- a/js/src/views/Posts/Edit.vue +++ b/js/src/views/Posts/Edit.vue @@ -12,7 +12,7 @@