From 10cc5cf42aa6deecd2f899ef13adec073916b1da Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Mon, 5 Aug 2024 15:02:51 +0200
Subject: [PATCH] seperate project types, make tag dropdown location
 configurable, update api client

---
 openapi.json.client.ts                        | 40 +++--------------
 .../Common/Member/MemberBillableSelect.vue    |  2 +-
 .../Common/Project/ProjectBillableSelect.vue  |  2 +-
 .../Project/ProjectEditBillableSection.vue    |  2 +-
 .../js/Components/Common/Tag/TagDropdown.vue  | 43 +++++++++++--------
 .../TimeEntry/TimeEntryRowTagDropdown.vue     |  1 +
 .../TimeTracker/TimeTrackerControls.vue       |  2 +-
 resources/js/types/projects.d.ts              |  1 +
 resources/js/utils/useProjects.ts             |  2 -
 9 files changed, 37 insertions(+), 58 deletions(-)
 create mode 100644 resources/js/types/projects.d.ts

diff --git a/openapi.json.client.ts b/openapi.json.client.ts
index a4829c89..2a6442ab 100644
--- a/openapi.json.client.ts
+++ b/openapi.json.client.ts
@@ -218,7 +218,7 @@ const UserResource = z
         week_start: Weekday,
     })
     .passthrough();
-const PersonalMemberResource = z
+const PersonalMembershipResource = z
     .object({
         id: z.string(),
         organization: z
@@ -227,6 +227,7 @@ const PersonalMemberResource = z
         role: z.string(),
     })
     .passthrough();
+const PersonalMembershipCollection = z.array(PersonalMembershipResource);
 
 export const schemas = {
     ClientResource,
@@ -262,7 +263,8 @@ export const schemas = {
     TimeEntryUpdateRequest,
     Weekday,
     UserResource,
-    PersonalMemberResource,
+    PersonalMembershipResource,
+    PersonalMembershipCollection,
 };
 
 const endpoints = makeApi([
@@ -2504,42 +2506,12 @@ If the group parameters are all set to &#x60;null&#x60; or are all missing, the
     },
     {
         method: 'get',
-        path: '/v1/users/me/members',
+        path: '/v1/users/me/memberships',
         alias: 'getMyMemberships',
         description: `This endpoint is independent of organization.`,
         requestFormat: 'json',
         response: z
-            .object({
-                data: z.array(PersonalMemberResource),
-                links: z
-                    .object({
-                        first: z.union([z.string(), z.null()]),
-                        last: z.union([z.string(), z.null()]),
-                        prev: z.union([z.string(), z.null()]),
-                        next: z.union([z.string(), z.null()]),
-                    })
-                    .passthrough(),
-                meta: z
-                    .object({
-                        current_page: z.number().int(),
-                        from: z.union([z.number(), z.null()]),
-                        last_page: z.number().int(),
-                        links: z.array(
-                            z
-                                .object({
-                                    url: z.union([z.string(), z.null()]),
-                                    label: z.string(),
-                                    active: z.boolean(),
-                                })
-                                .passthrough()
-                        ),
-                        path: z.union([z.string(), z.null()]),
-                        per_page: z.number().int(),
-                        to: z.union([z.number(), z.null()]),
-                        total: z.number().int(),
-                    })
-                    .passthrough(),
-            })
+            .object({ data: PersonalMembershipCollection })
             .passthrough(),
         errors: [
             {
diff --git a/resources/js/Components/Common/Member/MemberBillableSelect.vue b/resources/js/Components/Common/Member/MemberBillableSelect.vue
index 300eef73..9d37f8a5 100644
--- a/resources/js/Components/Common/Member/MemberBillableSelect.vue
+++ b/resources/js/Components/Common/Member/MemberBillableSelect.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import SelectDropdown from '@/Components/Common/SelectDropdown.vue';
-import type { BillableKey } from '@/utils/useProjects';
 import Badge from '@/Components/Common/Badge.vue';
 import { ChevronDownIcon } from '@heroicons/vue/20/solid';
+import type { BillableKey } from '@/types/projects';
 
 const model = defineModel<BillableKey>({
     default: 'default-rate',
diff --git a/resources/js/Components/Common/Project/ProjectBillableSelect.vue b/resources/js/Components/Common/Project/ProjectBillableSelect.vue
index dde42f30..a84bbb77 100644
--- a/resources/js/Components/Common/Project/ProjectBillableSelect.vue
+++ b/resources/js/Components/Common/Project/ProjectBillableSelect.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import SelectDropdown from '@/Components/Common/SelectDropdown.vue';
-import type { BillableKey } from '@/utils/useProjects';
 import Badge from '@/Components/Common/Badge.vue';
 import { ChevronDownIcon } from '@heroicons/vue/20/solid';
+import type { BillableKey } from '@/types/projects';
 
 const model = defineModel<BillableKey>({
     default: 'non-billable',
diff --git a/resources/js/Components/Common/Project/ProjectEditBillableSection.vue b/resources/js/Components/Common/Project/ProjectEditBillableSection.vue
index 23135901..ebcebb05 100644
--- a/resources/js/Components/Common/Project/ProjectEditBillableSection.vue
+++ b/resources/js/Components/Common/Project/ProjectEditBillableSection.vue
@@ -3,7 +3,7 @@ import InputLabel from '@/Components/InputLabel.vue';
 import BillableRateInput from '@/Components/Common/BillableRateInput.vue';
 import ProjectBillableSelect from '@/Components/Common/Project/ProjectBillableSelect.vue';
 import { computed, onMounted, ref, watch } from 'vue';
-import type { BillableKey } from '@/utils/useProjects';
+import type { BillableKey } from '@/types/projects';
 
 const billableRateSelect = ref<BillableKey>('non-billable');
 
diff --git a/resources/js/Components/Common/Tag/TagDropdown.vue b/resources/js/Components/Common/Tag/TagDropdown.vue
index 77ba3a25..eafa7ca6 100644
--- a/resources/js/Components/Common/Tag/TagDropdown.vue
+++ b/resources/js/Components/Common/Tag/TagDropdown.vue
@@ -5,11 +5,18 @@ import { type Component, computed, nextTick, ref, watch } from 'vue';
 import TagCreateModal from '@/Components/Common/Tag/TagCreateModal.vue';
 import MultiselectDropdownItem from '@/Components/Common/MultiselectDropdownItem.vue';
 import type { Tag } from '@/utils/api';
+import type { Placement } from '@floating-ui/vue';
 
-const props = defineProps<{
-    tags: Tag[];
-    createTag: (name: string) => Promise<Tag | undefined>;
-}>();
+const props = withDefaults(
+    defineProps<{
+        tags: Tag[];
+        createTag: (name: string) => Promise<Tag | undefined>;
+        align: Placement;
+    }>(),
+    {
+        align: 'bottom-start',
+    }
+);
 
 const model = defineModel<string[]>({
     default: [],
@@ -164,7 +171,7 @@ const showCreateTagModal = ref(false);
     <Dropdown
         @submit="emit('submit')"
         v-model="open"
-        align="bottom-start"
+        :align="align"
         :closeOnContentClick="false">
         <template #trigger>
             <slot name="trigger"></slot>
@@ -180,7 +187,7 @@ const showCreateTagModal = ref(false);
                 ref="searchInput"
                 class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
                 placeholder="Search for a Tag..." />
-            <div ref="dropdownViewport" class="w-60">
+            <div ref="dropdownViewport" class="w-60 max-h-48 overflow-y-scroll">
                 <div
                     v-for="tag in filteredTags"
                     :key="tag.id"
@@ -197,18 +204,18 @@ const showCreateTagModal = ref(false);
                         @click="toggleTag(tag.id)"
                         :name="tag.name"></MultiselectDropdownItem>
                 </div>
-                <div class="hover:bg-card-background-active rounded-b-lg">
-                    <button
-                        @click="
-                            open = false;
-                            showCreateTagModal = true;
-                        "
-                        class="text-white flex space-x-3 items-center px-4 py-3 text-xs font-semibold border-t border-card-background-separator">
-                        <PlusCircleIcon
-                            class="w-5 flex-shrink-0 text-icon-default"></PlusCircleIcon>
-                        <span>Create new Tag</span>
-                    </button>
-                </div>
+            </div>
+            <div class="hover:bg-card-background-active rounded-b-lg">
+                <button
+                    @click="
+                        open = false;
+                        showCreateTagModal = true;
+                    "
+                    class="text-white w-full flex space-x-3 items-center px-4 py-3 text-xs font-semibold border-t border-card-background-separator">
+                    <PlusCircleIcon
+                        class="w-5 flex-shrink-0 text-icon-default"></PlusCircleIcon>
+                    <span>Create new Tag</span>
+                </button>
             </div>
         </template>
     </Dropdown>
diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryRowTagDropdown.vue b/resources/js/Components/Common/TimeEntry/TimeEntryRowTagDropdown.vue
index 94319e59..a8194259 100644
--- a/resources/js/Components/Common/TimeEntry/TimeEntryRowTagDropdown.vue
+++ b/resources/js/Components/Common/TimeEntry/TimeEntryRowTagDropdown.vue
@@ -24,6 +24,7 @@ const timeEntryTags = computed<Tag[]>(() => {
 <template>
     <TagDropdown
         :tags="tags"
+        align="bottom-end"
         :createTag
         @changed="emit('changed', model)"
         v-model="model">
diff --git a/resources/js/Components/Common/TimeTracker/TimeTrackerControls.vue b/resources/js/Components/Common/TimeTracker/TimeTrackerControls.vue
index 342b2206..65f944bd 100644
--- a/resources/js/Components/Common/TimeTracker/TimeTrackerControls.vue
+++ b/resources/js/Components/Common/TimeTracker/TimeTrackerControls.vue
@@ -78,7 +78,7 @@ function onToggleButtonPress(newState: boolean) {
         data-testid="dashboard_timer">
         <div
             class="flex flex-col sm:flex-row w-full justify-between rounded-lg bg-card-background border-card-border border transition shadow-card">
-            <div class="flex items-center pr-6">
+            <div class="flex flex-1 items-center pr-6">
                 <input
                     placeholder="What are you working on?"
                     data-testid="time_entry_description"
diff --git a/resources/js/types/projects.d.ts b/resources/js/types/projects.d.ts
new file mode 100644
index 00000000..4e3a81a6
--- /dev/null
+++ b/resources/js/types/projects.d.ts
@@ -0,0 +1 @@
+export type BillableKey = 'non-billable' | 'default-rate' | 'custom-rate';
diff --git a/resources/js/utils/useProjects.ts b/resources/js/utils/useProjects.ts
index 47e5e9cc..35de720c 100644
--- a/resources/js/utils/useProjects.ts
+++ b/resources/js/utils/useProjects.ts
@@ -10,8 +10,6 @@ import type {
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { useNotificationsStore } from '@/utils/notification';
 
-export type BillableKey = 'non-billable' | 'default-rate' | 'custom-rate';
-
 export const useProjectsStore = defineStore('projects', () => {
     const projectResponse = ref<ProjectResponse | null>(null);
     const { handleApiRequestNotifications } = useNotificationsStore();