feat: create project

Author: sifferhans

frontend/app/api/generated.ts

@@ -88,13 +88,13 @@ export type AssignRoleInput = {
 export type Branding = {
   __typename?: 'Branding';
   colors: Colors;
-  logo: Scalars['String']['output'];
+  logo?: Maybe<Scalars['String']['output']>;
   rounding: Scalars['Int']['output'];
 };
 
 export type BrandingInput = {
   colors: ColorsInput;
-  logo: Scalars['String']['input'];
+  logo?: InputMaybe<Scalars['String']['input']>;
   rounding: Scalars['Int']['input'];
 };
 
@@ -434,7 +434,6 @@ export type Mutation = {
   bulkCompleteChallenges: Array<Challenge>;
   bulkCreateChallenges: Array<Challenge>;
   bulkPublishChallenges: Array<Challenge>;
-  cloneProject: Project;
   completeChallenge: Challenge;
   createChallenge: Challenge;
   createEvent: Event;
@@ -606,12 +605,6 @@ export type MutationBulkPublishChallengesArgs = {
 };
 
 
-export type MutationCloneProjectArgs = {
-  id: Scalars['ID']['input'];
-  newName: Scalars['String']['input'];
-};
-
-
 export type MutationCompleteChallengeArgs = {
   challengeId: Scalars['ID']['input'];
   completedAt?: InputMaybe<Scalars['DateTime']['input']>;
@@ -1420,19 +1413,19 @@ export type AdminSidebarQuery = { __typename?: 'Query', projects: { __typename?:
 export type CurrentProjectQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type CurrentProjectQuery = { __typename?: 'Query', myCurrentProject: { __typename?: 'Project', branding: { __typename?: 'Branding', logo: string, rounding: number, colors: { __typename?: 'Colors', primary: string } } } };
+export type CurrentProjectQuery = { __typename?: 'Query', myCurrentProject: { __typename?: 'Project', branding: { __typename?: 'Branding', logo?: string | null, rounding: number, colors: { __typename?: 'Colors', primary: string } } } };
 
 export type AdminHomePageQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type AdminHomePageQuery = { __typename?: 'Query', me: { __typename?: 'User', id: string, name: string }, projects: { __typename?: 'ProjectConnection', edges: Array<{ __typename?: 'ProjectEdge', node: { __typename?: 'Project', id: string, name: string, description: string, endDate: any, startDate: any, branding: { __typename?: 'Branding', logo: string, rounding: number, colors: { __typename?: 'Colors', primary: string, secondary: string, tertiary: string } } } }> } };
+export type AdminHomePageQuery = { __typename?: 'Query', me: { __typename?: 'User', id: string, name: string }, projects: { __typename?: 'ProjectConnection', edges: Array<{ __typename?: 'ProjectEdge', node: { __typename?: 'Project', id: string, name: string, description: string, endDate: any, startDate: any, branding: { __typename?: 'Branding', logo?: string | null, rounding: number, colors: { __typename?: 'Colors', primary: string, secondary: string, tertiary: string } } } }> } };
 
 export type AdminProjectPageQueryVariables = Exact<{
   projectId: Scalars['ID']['input'];
 }>;
 
 
-export type AdminProjectPageQuery = { __typename?: 'Query', project: { __typename?: 'Project', id: string, name: string, description: string, startDate: any, endDate: any, branding: { __typename?: 'Branding', logo: string, rounding: number, colors: { __typename?: 'Colors', primary: string } } }, achievements: { __typename?: 'AchievementConnection', edges: Array<{ __typename?: 'AchievementEdge', node:
+export type AdminProjectPageQuery = { __typename?: 'Query', project: { __typename?: 'Project', id: string, name: string, description: string, startDate: any, endDate: any, branding: { __typename?: 'Branding', logo?: string | null, rounding: number, colors: { __typename?: 'Colors', primary: string } } }, achievements: { __typename?: 'AchievementConnection', edges: Array<{ __typename?: 'AchievementEdge', node:
         | { __typename?: 'ListeningAchievement', id: string, name: string }
         | { __typename?: 'ReadingAchievement', id: string, name: string }
         | { __typename?: 'SimpleAchievement', id: string, name: string }
@@ -1442,7 +1435,7 @@ export type AdminProjectPageQuery = { __typename?: 'Query', project: { __typenam
 export type AdminProjectsPageQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type AdminProjectsPageQuery = { __typename?: 'Query', projects: { __typename?: 'ProjectConnection', edges: Array<{ __typename?: 'ProjectEdge', node: { __typename?: 'Project', id: string, name: string, description: string, endDate: any, startDate: any, branding: { __typename?: 'Branding', logo: string, colors: { __typename?: 'Colors', primary: string } } } }> } };
+export type AdminProjectsPageQuery = { __typename?: 'Query', projects: { __typename?: 'ProjectConnection', edges: Array<{ __typename?: 'ProjectEdge', node: { __typename?: 'Project', id: string, name: string, description: string, endDate: any, startDate: any, branding: { __typename?: 'Branding', logo?: string | null, colors: { __typename?: 'Colors', primary: string } } } }> } };
 
 export type CreateProjectMutationVariables = Exact<{
   input: CreateProjectInput;
@@ -1661,7 +1654,7 @@ export function useAdminProjectPageQuery(options?: Omit<Urql.UseQueryArgs<never,
 };
 export const AdminProjectsPageDocument = gql`
     query AdminProjectsPage {
-  projects {
+  projects(first: 100) {
     edges {
       node {
         id

frontend/app/pages/admin/projects/[projectId].vue

@@ -65,7 +65,9 @@ const { data, error, fetching } = useAdminProjectPageQuery({
   pause: computed(() => !isAuthReady.value),
 })
 
-const state = reactive({
+type State = Omit<AdminProjectPageQuery['project'], 'id'>
+
+const state = reactive<State>({
   name: '',
   description: '',
   startDate: '',
@@ -140,9 +142,9 @@ watch(data, () => {
           <template #branding>
             <div class="mt-4 flex flex-col gap-4">
               <UFormField label="Logo">
-                <NuxtImg :src="state.branding.logo" width="64" />
+                <NuxtImg :src="state.branding.logo || ''" width="64" />
               </UFormField>
-              <UFormField label="Accent Color">
+              <UFormField label="Accent color">
                 <ColorPickerInput v-model="state.branding.colors.primary" />
               </UFormField>
             </div>

frontend/app/pages/admin/projects/index.vue

@@ -6,7 +6,7 @@ definePageMeta({
 
 gql(`
   query AdminProjectsPage {
-    projects {
+    projects(first: 100) {
       edges {
         node {
           id
@@ -37,8 +37,8 @@ const { currentProjects, futureProjects, pastProjects } = useGroupedProjects(
 </script>
 
 <template>
-  <UContainer>
-    <div class="my-12 flex flex-col items-start gap-8">
+  <UContainer class="py-12">
+    <div class="mb-12 flex flex-col items-start gap-8">
       <h1 class="text-3xl">Projects</h1>
       <UButton icon="lucide:plus" :to="{ name: 'admin-projects-new' }">
         New Project

frontend/app/pages/admin/projects/new.vue

@@ -16,47 +16,55 @@ gql(`
 `)
 
 const schema = z.object({
-  name: z.string().nonempty(),
+  name: z.string().nonempty({ error: 'Name is required' }),
   description: z.string().optional(),
-  startDate: z.string().nonempty(),
-  endDate: z.string().nonempty(),
-  branding: z
-    .object({
-      logo: z.string(),
-      colors: z.object({
-        primary: z.string(),
-        secondary: z.string(),
-        tertiary: z.string(),
-      }),
-      rounding: z.number(),
-    })
-    .optional(),
+  startDate: z.string().nonempty({ error: 'Start date is required' }),
+  endDate: z.string().nonempty({ error: 'End date is required' }),
+  branding: z.object({
+    logo: z.string().optional(),
+    colors: z.object({
+      primary: z.string(),
+      secondary: z.string(),
+      tertiary: z.string(),
+    }),
+    rounding: z.number(),
+  }),
 })
 type Schema = z.infer<typeof schema>
 const state = reactive<Schema>({
   name: '',
-  description: '',
+  description: undefined,
   startDate: '',
   endDate: '',
   branding: {
-    logo: '',
+    logo: undefined,
+    rounding: 0,
     colors: {
-      primary: '',
-      secondary: '',
-      tertiary: '',
+      primary: '#000000',
+      secondary: '#000000',
+      tertiary: '#000000',
     },
-    rounding: 0,
   },
 })
 
 const { executeMutation } = useCreateProjectMutation()
+const toast = useToast()
 
 async function createProject(event: FormSubmitEvent<Schema>) {
   if (!event.data) {
     return
   }
 
   executeMutation({ input: event.data }).then((response) => {
+    console.log(response)
+    if (response.error) {
+      toast.add({
+        title: response.error.name,
+        description: response.error.message,
+        color: 'error',
+      })
+      return
+    }
     if (!response.data) {
       return
     }
@@ -104,12 +112,15 @@ async function createProject(event: FormSubmitEvent<Schema>) {
         </UFormField>
         <div class="flex gap-4">
           <UFormField name="startDate" label="Starts at" required>
-            <UInput v-model="state.startDate" type="datetime-local" required />
+            <UInput v-model="state.startDate" type="date" required />
           </UFormField>
           <UFormField name="endDate" label="Ends at" required>
-            <UInput v-model="state.endDate" type="datetime-local" required />
+            <UInput v-model="state.endDate" type="date" required />
           </UFormField>
         </div>
+        <UFormField label="Accent color">
+          <ColorPickerInput v-model="state.branding.colors.primary" />
+        </UFormField>
         <UButton type="submit">Create project</UButton>
       </UForm>
     </UContainer>