add project visibility ui

resources/js/packages/ui/src/Project/ProjectCreateModal.vue

@@ -15,6 +15,7 @@ import { UserCircleIcon } from '@heroicons/vue/20/solid';
 import EstimatedTimeSection from '@/packages/ui/src/EstimatedTimeSection.vue';
 import { Field, FieldGroup, FieldLabel } from '../field';
 import ProjectEditBillableSection from '@/packages/ui/src/Project/ProjectEditBillableSection.vue';
+import ProjectVisibilitySelect from '@/packages/ui/src/Project/ProjectVisibilitySelect.vue';
 import type { Client } from '@/packages/api/src';
 
 const show = defineModel('show', { default: false });
@@ -41,6 +42,7 @@ const project = ref<CreateProjectBody>({
     billable_rate: null,
     is_billable: false,
     estimated_time: null,
+    is_public: false,
 });
 
 async function submit() {
@@ -53,6 +55,7 @@ async function submit() {
         billable_rate: null,
         is_billable: false,
         estimated_time: null,
+        is_public: false,
     };
 }
 
@@ -123,6 +126,7 @@ const currentClientName = computed(() => {
                     v-if="enableEstimatedTime"
                     v-model="project.estimated_time"
                     @submit="submit()"></EstimatedTimeSection>
+                <ProjectVisibilitySelect v-model="project.is_public"></ProjectVisibilitySelect>
             </FieldGroup>
         </template>
         <template #footer>

resources/js/packages/ui/src/Project/ProjectVisibilitySelect.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '..';
+import { Field, FieldDescription, FieldLabel } from '../field';
+import { GlobeAltIcon } from '@heroicons/vue/20/solid';
+
+const isPublic = defineModel<boolean>({ default: false });
+
+const visibility = computed({
+    get: () => (isPublic.value ? 'public' : 'private'),
+    set: (value: string) => {
+        isPublic.value = value === 'public';
+    },
+});
+
+const description = computed(() =>
+    isPublic.value
+        ? 'This project is visible to all members of the organization.'
+        : 'This project is only visible to its project members.'
+);
+</script>
+
+<template>
+    <Field>
+        <FieldLabel :icon="GlobeAltIcon" for="visibility">Visibility</FieldLabel>
+        <Select v-model="visibility">
+            <SelectTrigger id="visibility">
+                <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+                <SelectItem value="private">Private</SelectItem>
+                <SelectItem value="public">Public</SelectItem>
+            </SelectContent>
+        </Select>
+        <FieldDescription>{{ description }}</FieldDescription>
+    </Field>
+</template>
+
+<style scoped></style>