Event images

.graphqlconfig

@@ -4,7 +4,7 @@
   "extensions": {
     "endpoints": {
       "Default GraphQL Endpoint": {
-        "url": "https://alpha.quepasaalpujarra.com/graphql",
+        "url": "http://localhost:4000/graphql",
         "headers": {
           "user-agent": "JS GraphQL"
         },

@types/graphql.d.ts

@@ -54,6 +54,7 @@ declare namespace GQL {
   interface ICalendarEvent {
     __typename: 'CalendarEvent';
     id: string;
+    images: IEventImages | null;
     info: IEventInformation | null;
     infos: Array<IEventInformation | null>;
     location: ILocation;
@@ -68,6 +69,19 @@ declare namespace GQL {
     lang: string;
   }
 
+  interface IEventImages {
+    __typename: 'EventImages';
+    cover: IImage | null;
+    gallery: Array<IImage> | null;
+    poster: IImage | null;
+    thumb: IImage | null;
+  }
+
+  interface IImage {
+    __typename: 'Image';
+    url: string;
+  }
+
   interface IEventInformation {
     __typename: 'EventInformation';
     description: string | null;
@@ -151,19 +165,31 @@ declare namespace GQL {
 
   interface IMutation {
     __typename: 'Mutation';
+    addEventGalleryImages: ICalendarEvent | null;
     createEvent: ICalendarEvent | null;
     createEventTag: IEventTag | null;
     deleteEvent: IUser;
     deleteEventTag: Array<IEventTag | null> | null;
     grantRole: IUser;
+    removeEventGalleryImages: ICalendarEvent | null;
     requestInvite: boolean;
     revokeRole: IUser;
+    setEventCoverImage: ICalendarEvent | null;
+    setEventPosterImage: ICalendarEvent | null;
+    setEventThumbnailImage: ICalendarEvent | null;
     signin: IUserSession;
     signup: Array<IError | null> | null;
+    unsetEventCoverImage: ICalendarEvent | null;
+    unsetEventPosterImage: ICalendarEvent | null;
+    unsetEventThumbnailImage: ICalendarEvent | null;
     updateEvent: ICalendarEvent | null;
     updateEventTag: IEventTag | null;
   }
 
+  interface IAddEventGalleryImagesOnMutationArguments {
+    input: IEventImagesUploadInput;
+  }
+
   interface ICreateEventOnMutationArguments {
     input: ICreateEventInput;
   }
@@ -184,6 +210,10 @@ declare namespace GQL {
     input: IGrantRoleInput;
   }
 
+  interface IRemoveEventGalleryImagesOnMutationArguments {
+    input: IEventGalleryImagesInput;
+  }
+
   interface IRequestInviteOnMutationArguments {
     input: IRequestInviteInput;
   }
@@ -192,6 +222,18 @@ declare namespace GQL {
     input: IGrantRoleInput;
   }
 
+  interface ISetEventCoverImageOnMutationArguments {
+    input: IEventImageUploadInput;
+  }
+
+  interface ISetEventPosterImageOnMutationArguments {
+    input: IEventImageUploadInput;
+  }
+
+  interface ISetEventThumbnailImageOnMutationArguments {
+    input: IEventImageUploadInput;
+  }
+
   interface ISigninOnMutationArguments {
     input: ISigninInput;
   }
@@ -200,6 +242,18 @@ declare namespace GQL {
     input: ISignupInput;
   }
 
+  interface IUnsetEventCoverImageOnMutationArguments {
+    id: string;
+  }
+
+  interface IUnsetEventPosterImageOnMutationArguments {
+    id: string;
+  }
+
+  interface IUnsetEventThumbnailImageOnMutationArguments {
+    id: string;
+  }
+
   interface IUpdateEventOnMutationArguments {
     input: IUpdateEventInput;
   }
@@ -208,6 +262,11 @@ declare namespace GQL {
     input: IUpdateEventTagInput;
   }
 
+  interface IEventImagesUploadInput {
+    files: Array<any>;
+    id: string;
+  }
+
   interface ICreateEventInput {
     infos: Array<IEventInformationInput | null>;
     location: IEventLocationInput;
@@ -254,10 +313,20 @@ declare namespace GQL {
     userId: string;
   }
 
+  interface IEventGalleryImagesInput {
+    eventId: string;
+    imageIds: Array<string>;
+  }
+
   interface IRequestInviteInput {
     email: string;
   }
 
+  interface IEventImageUploadInput {
+    file: any;
+    id: string;
+  }
+
   interface ISigninInput {
     hash: string;
   }

packages/qpa/App/Event/EventDetails.tsx

@@ -6,6 +6,7 @@ import { hot } from "react-hot-loader"
 import { RouteComponentProps, withRouter } from "react-router"
 import { useAppContext } from "../Context/AppContext"
 import useEventDetailsQuery from "./useEventDetailsQuery"
+import EventHeaderImage from './EventHeaderImage'
 
 interface RouteParams {
   eventId: string
@@ -16,6 +17,7 @@ interface Props extends RouteComponentProps<RouteParams> {}
 
 const EventDetails = (props: Props) => {
   const { me, language } = useAppContext()
+
   const { data, loading, error } = useEventDetailsQuery({
     variables: { eventId: props.match.params.eventId, language },
   })
@@ -27,20 +29,26 @@ const EventDetails = (props: Props) => {
   }
   const event = data.event
   const meIsOwner = me && me.id === event.owner.id
+  const canEdit =
+      meIsOwner ||
+      !!me.roles.find(role => ["admin", "embassador"].includes(role.type))
 
   const info = event.infos[0]
   return (
     <Root>
+      <EventHeaderImage event={event} canEdit={canEdit}/>
       <Title>{info.title}</Title>
       <Tags>
         {event.tags.map(tag => (
           <Chip color="primary" label={tag.translation.text} key={tag.id} />
         ))}
       </Tags>
-      <Info>{
-        info.description.split('\n').map((descLine, i) => <p key={i}>{descLine}</p>)
-      }</Info>
-      {meIsOwner ? (
+      <Info>
+        {info.description.split("\n").map((descLine, i) => (
+          <p key={i}>{descLine}</p>
+        ))}
+      </Info>
+      {canEdit ? (
         <EditButton
           onClick={() => props.history.push(`/event/${event.id}/edit`)}
           css={{}}

packages/qpa/App/Event/EventHeaderImage.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import styled from '@emotion/styled'
+import {EventDetailsData} from "./useEventDetailsQuery"
+
+interface Props {
+    event: EventDetailsData
+}
+
+const EventHeaderImage = (props: Props) => {
+    return <Root>
+
+    </Root>
+}
+
+const Root = styled.div`
+
+`

schema.graphql

@@ -7,6 +7,7 @@ schema {
 
 type CalendarEvent {
     id: ID!
+    images: EventImages
     info(lang: String!): EventInformation
     infos: [EventInformation]!
     location: Location!
@@ -22,6 +23,13 @@ type Error {
     path: String!
 }
 
+type EventImages {
+    cover: Image
+    gallery: [Image!]
+    poster: Image
+    thumb: Image
+}
+
 type EventInformation {
     description: String
     language: String!
@@ -56,21 +64,33 @@ type EventTime {
     timeZone: TimeZone
 }
 
+type Image {
+    url: String!
+}
+
 type Location {
     address: String
     name: String
 }
 
 type Mutation {
+    addEventGalleryImages(input: EventImagesUploadInput!): CalendarEvent
     createEvent(input: CreateEventInput!): CalendarEvent
     createEventTag(input: CreateEventTagInput!): EventTag
     deleteEvent(id: ID!): User!
     deleteEventTag(input: DeleteEventTagInput!): [EventTag]
     grantRole(input: GrantRoleInput!): User!
+    removeEventGalleryImages(input: EventGalleryImagesInput!): CalendarEvent
     requestInvite(input: RequestInviteInput!): Boolean!
     revokeRole(input: GrantRoleInput!): User!
+    setEventCoverImage(input: EventImageUploadInput!): CalendarEvent
+    setEventPosterImage(input: EventImageUploadInput!): CalendarEvent
+    setEventThumbnailImage(input: EventImageUploadInput!): CalendarEvent
     signin(input: SigninInput!): UserSession!
     signup(input: SignupInput!): [Error]
+    unsetEventCoverImage(id: ID!): CalendarEvent
+    unsetEventPosterImage(id: ID!): CalendarEvent
+    unsetEventThumbnailImage(id: ID!): CalendarEvent
     updateEvent(input: UpdateEventInput!): CalendarEvent
     updateEventTag(input: UpdateEventTagInput!): EventTag
 }
@@ -128,6 +148,21 @@ input DeleteEventTagInput {
     id: ID!
 }
 
+input EventGalleryImagesInput {
+    eventId: ID!
+    imageIds: [ID!]!
+}
+
+input EventImageUploadInput {
+    file: Upload!
+    id: ID!
+}
+
+input EventImagesUploadInput {
+    files: [Upload!]!
+    id: ID!
+}
+
 input EventInformationInput {
     description: String
     language: String!
@@ -215,6 +250,8 @@ scalar Category
 
 scalar Date
 
+scalar Upload
+
 scalar Translations
 
 scalar Language