From 8e7b65430ce67fb4d1210b007d7e5c061f6d3ad9 Mon Sep 17 00:00:00 2001
From: Yoav Farhi <yoav.farhi@brainpop.com>
Date: Tue, 18 Feb 2025 19:56:33 +0200
Subject: [PATCH 1/5] adding useDirectusFields composable

---
 src/runtime/composables/useDirectusFields.ts | 84 ++++++++++++++++++++
 src/runtime/types/index.d.ts                 | 25 ++++++
 2 files changed, 109 insertions(+)
 create mode 100644 src/runtime/composables/useDirectusFields.ts

diff --git a/src/runtime/composables/useDirectusFields.ts b/src/runtime/composables/useDirectusFields.ts
new file mode 100644
index 00000000..97b6c4b8
--- /dev/null
+++ b/src/runtime/composables/useDirectusFields.ts
@@ -0,0 +1,84 @@
+import {
+  DirectusFieldRequest,
+  DirectusFieldCreation,
+  DirectusFieldUpdate,
+  DirectusFieldsRequest
+} from '../types'
+import { useDirectus } from './useDirectus'
+
+export const useDirectusFields = () => {
+  const directus = useDirectus()
+
+  const getFields = async <T>(
+    data: DirectusFieldsRequest
+  ): Promise<T> => {
+    const fields = await directus<{ data: T }>(
+      `/fields/${data.collection}`,
+      {
+        method: 'GET'
+      }
+    )
+    return fields.data
+  }
+
+  const getField = async <T>(data: DirectusFieldRequest): Promise<T> => {
+    if (!data.field) {
+      throw new Error('Field name is required')
+    }
+    const field = await directus<{ data: T }>(
+      `/fields/${data.collection}/${data.field}`,
+      {
+        method: 'GET'
+      }
+    )
+    return field.data
+  }
+
+  const createField = async <T>(data: DirectusFieldCreation): Promise<T> => {
+    const field = await directus<{ data: T }>(`/fields/${data.collection}`, {
+      method: 'POST',
+      body: {
+        field: data.field,
+        type: data.type,
+        meta: data.meta,
+        schema: data.schema
+      }
+    })
+    return field.data
+  }
+
+  const updateField = async <T>(data: DirectusFieldUpdate): Promise<T> => {
+    const field = await directus<{ data: T }>(
+      `/fields/${data.collection}/${data.field}`,
+      {
+        method: 'PATCH',
+        body: {
+          meta: data.meta,
+          schema: data.schema
+        }
+      }
+    )
+    return field.data
+  }
+
+  const deleteField = async <T>(data: DirectusFieldRequest): Promise<T> => {
+    if (!data.field) {
+      throw new Error('Field name is required')
+    }
+    const field = await directus<{ data: T }>(
+      `/fields/${data.collection}/${data.field}`,
+      {
+        method: 'DELETE'
+      }
+    )
+    return field.data
+  }
+
+  return {
+    getFields,
+    getField,
+    createField,
+    updateField,
+    deleteField
+  }
+}
diff --git a/src/runtime/types/index.d.ts b/src/runtime/types/index.d.ts
index c2a7e608..9a7d6e19 100644
--- a/src/runtime/types/index.d.ts
+++ b/src/runtime/types/index.d.ts
@@ -168,6 +168,30 @@ export interface DirectusFileRequest {
   params?: DirectusQueryParams;
 }
 
+export interface DirectusFieldsRequest {
+  collection?: string;
+}
+
+export interface DirectusFieldRequest {
+  collection: string
+  field?: string
+}
+
+export interface DirectusFieldCreation {
+  collection: string
+  field: string
+  type: string
+  meta?: Record<string, any>
+  schema?: Record<string, any>
+}
+
+export interface DirectusFieldUpdate {
+  collection: string
+  field: string
+  meta?: Record<string, any>
+  schema?: Record<string, any>
+}
+
 export interface DirectusNotificationObject {
   id?: number;
   timestamp?: string;
@@ -180,6 +204,7 @@ export interface DirectusNotificationObject {
   item?: string;
 }
 
+
 export interface DirectusCollectionRequest {
   collection?: string;
 }

From c336d2b35062534b3cc16655ecf4b6088d7c76a0 Mon Sep 17 00:00:00 2001
From: Yoav Farhi <yoav.farhi@brainpop.com>
Date: Tue, 18 Feb 2025 21:26:47 +0200
Subject: [PATCH 2/5] Add directusFields getter to playground

---
 playground/app.vue | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/playground/app.vue b/playground/app.vue
index f0ca63c6..d0e850e9 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -25,6 +25,9 @@
     <button style="margin-top: 25px" @click="fetchCollections">
       Fetch Collections
     </button>
+    <button style="margin-top: 25px" @click="fetchFields">
+      Fetch Fields
+    </button>
     <button style="margin-top: 25px" @click="logUser">
       Log User
     </button>
@@ -57,6 +60,7 @@ const { login, loginWithProvider, logout } = useDirectusAuth()
 const user = useDirectusUser()
 const { getItems, getItemById, createItems, deleteItems } = useDirectusItems()
 const { getCollections } = useDirectusCollections()
+const { getFields } = useDirectusFields()
 const router = useRouter()
 const { token } = useDirectusToken()
 
@@ -75,6 +79,14 @@ interface Article {
   status: string;
 }
 
+interface Field {
+  collection: string;
+  field: string;
+  type: string;
+  schema: Object;
+  meta: Object;
+}
+
 let articleIds: (string | number | undefined)[] = []
 
 const onSubmit = async () => {
@@ -152,6 +164,17 @@ const fetchCollections = async () => {
   } catch (e) {}
 }
 
+const fetchFields = async () => {
+  try {
+    const fields = await getFields<Field>({
+      collection: 'Articles'
+    });
+    console.log(fields)
+
+    router.push('/d')
+  } catch (e) {}
+}
+
 // User Composable Tests
 
 interface User {

From 97f0d9500c8e66cc08873b14f74bda2c3e5d75f8 Mon Sep 17 00:00:00 2001
From: Yoav Farhi <yoav.farhi@brainpop.com>
Date: Tue, 18 Feb 2025 21:46:16 +0200
Subject: [PATCH 3/5] update for better typing

---
 src/runtime/composables/useDirectusFields.ts | 26 ++++++++++----------
 src/runtime/types/index.d.ts                 | 10 +++++++-
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/runtime/composables/useDirectusFields.ts b/src/runtime/composables/useDirectusFields.ts
index 97b6c4b8..0028b396 100644
--- a/src/runtime/composables/useDirectusFields.ts
+++ b/src/runtime/composables/useDirectusFields.ts
@@ -2,17 +2,18 @@ import {
   DirectusFieldRequest,
   DirectusFieldCreation,
   DirectusFieldUpdate,
-  DirectusFieldsRequest
+  DirectusFieldsRequest,
+  DirectusField
 } from '../types'
 import { useDirectus } from './useDirectus'
 
 export const useDirectusFields = () => {
   const directus = useDirectus()
 
-  const getFields = async <T>(
+  const getFields = async (
     data: DirectusFieldsRequest
-  ): Promise<T> => {
-    const fields = await directus<{ data: T }>(
+  ): Promise<DirectusField[]> => {
+    const fields = await directus<{ data: DirectusField[] }>(
       `/fields/${data.collection}`,
       {
         method: 'GET'
@@ -21,11 +22,11 @@ export const useDirectusFields = () => {
     return fields.data
   }
 
-  const getField = async <T>(data: DirectusFieldRequest): Promise<T> => {
+  const getField = async (data: DirectusFieldRequest): Promise<DirectusField> => {
     if (!data.field) {
       throw new Error('Field name is required')
     }
-    const field = await directus<{ data: T }>(
+    const field = await directus<{ data: DirectusField }>(
       `/fields/${data.collection}/${data.field}`,
       {
         method: 'GET'
@@ -34,8 +35,8 @@ export const useDirectusFields = () => {
     return field.data
   }
 
-  const createField = async <T>(data: DirectusFieldCreation): Promise<T> => {
-    const field = await directus<{ data: T }>(`/fields/${data.collection}`, {
+  const createField = async (data: DirectusFieldCreation): Promise<DirectusField> => {
+    const field = await directus<{ data: DirectusField }>(`/fields/${data.collection}`, {
       method: 'POST',
       body: {
         field: data.field,
@@ -47,8 +48,8 @@ export const useDirectusFields = () => {
     return field.data
   }
 
-  const updateField = async <T>(data: DirectusFieldUpdate): Promise<T> => {
-    const field = await directus<{ data: T }>(
+  const updateField = async (data: DirectusFieldUpdate): Promise<DirectusField> => {
+    const field = await directus<{ data: DirectusField }>(
       `/fields/${data.collection}/${data.field}`,
       {
         method: 'PATCH',
@@ -61,17 +62,16 @@ export const useDirectusFields = () => {
     return field.data
   }
 
-  const deleteField = async <T>(data: DirectusFieldRequest): Promise<T> => {
+  const deleteField = async (data: DirectusFieldRequest): Promise<void> => {
     if (!data.field) {
       throw new Error('Field name is required')
     }
-    const field = await directus<{ data: T }>(
+    await directus(
       `/fields/${data.collection}/${data.field}`,
       {
         method: 'DELETE'
       }
     )
-    return field.data
   }
 
   return {
diff --git a/src/runtime/types/index.d.ts b/src/runtime/types/index.d.ts
index 9a7d6e19..2b7d7595 100644
--- a/src/runtime/types/index.d.ts
+++ b/src/runtime/types/index.d.ts
@@ -168,6 +168,14 @@ export interface DirectusFileRequest {
   params?: DirectusQueryParams;
 }
 
+export interface DirectusField {
+  collection: string;
+  field: string;
+  type: string;
+  meta: Record<string, any>;
+  schema: Record<string, any>;
+}
+
 export interface DirectusFieldsRequest {
   collection?: string;
 }
@@ -259,7 +267,7 @@ export interface DirectusRevision {
 export interface DirectusItemMetadata {
   total_count?: number;
   filter_count?: number;
-};
+}
 
 export interface DirectusItems<T> {
   data: NonNullable<T[]>;

From 5c119e8615f2d5ccf5d0ceefaaf6581fa538e0e5 Mon Sep 17 00:00:00 2001
From: Yoav Farhi <yoav.farhi@brainpop.com>
Date: Tue, 18 Feb 2025 21:50:32 +0200
Subject: [PATCH 4/5] add docs for useDirectusFields

---
 .../2.composables/9.useDirectusFields.md      | 173 ++++++++++++++++++
 1 file changed, 173 insertions(+)
 create mode 100644 docs/content/2.composables/9.useDirectusFields.md

diff --git a/docs/content/2.composables/9.useDirectusFields.md b/docs/content/2.composables/9.useDirectusFields.md
new file mode 100644
index 00000000..e7d12eb4
--- /dev/null
+++ b/docs/content/2.composables/9.useDirectusFields.md
@@ -0,0 +1,173 @@
+# `useDirectusFields`
+
+---
+
+> Check out the Directus [Fields](https://docs.directus.io/reference/system/fields.html) documentation.
+
+### `getFields`
+
+Get all fields in a specific collection
+
+- **Arguments:**
+
+  - data: [`DirectusFieldsRequest`](https://github.com/Intevel/nuxt-directus/blob/main/src/runtime/types/index.d.ts)
+    - collection?: `string`
+
+- **Returns:** `Promise<DirectusField[]>`
+
+```vue [pages/example.vue]
+<script setup lang="ts">
+const { getFields } = useDirectusFields();
+
+const fetchFields = async () => {
+  try {
+    const fields = await getFields({
+      collection: "articles"
+    });
+    // fields will contain an array of DirectusField objects
+  } catch (e) {
+    // Handle error
+  }
+};
+</script>
+```
+
+### `getField`
+
+Get a specific field in a collection
+
+- **Arguments:**
+
+  - data: [`DirectusFieldRequest`](https://github.com/Intevel/nuxt-directus/blob/main/src/runtime/types/index.d.ts)
+    - collection: `string`
+    - field?: `string`
+
+- **Returns:** `Promise<DirectusField>`
+
+```vue [pages/example.vue]
+<script setup lang="ts">
+const { getField } = useDirectusFields();
+
+const fetchField = async () => {
+  try {
+    const field = await getField({
+      collection: "articles",
+      field: "title"
+    });
+    // field will contain a DirectusField object
+  } catch (e) {
+    // Handle error
+  }
+};
+</script>
+```
+
+### `createField`
+
+Create a new field in a collection
+
+- **Arguments:**
+
+  - data: [`DirectusFieldCreation`](https://github.com/Intevel/nuxt-directus/blob/main/src/runtime/types/index.d.ts)
+    - collection: `string`
+    - field: `string`
+    - type: `string`
+    - meta?: `Record<string, any>`
+    - schema?: `Record<string, any>`
+
+- **Returns:** `Promise<DirectusField>`
+
+```vue [pages/example.vue]
+<script setup lang="ts">
+const { createField } = useDirectusFields();
+
+const createNewField = async () => {
+  try {
+    const field = await createField({
+      collection: "articles",
+      field: "subtitle",
+      type: "string",
+      meta: {
+        interface: "input",
+        special: null,
+        required: false
+      },
+      schema: {
+        is_nullable: true,
+        default_value: null
+      }
+    });
+    // field will contain the newly created DirectusField
+  } catch (e) {
+    // Handle error
+  }
+};
+</script>
+```
+
+### `updateField`
+
+Update an existing field in a collection
+
+- **Arguments:**
+
+  - data: [`DirectusFieldUpdate`](https://github.com/Intevel/nuxt-directus/blob/main/src/runtime/types/index.d.ts)
+    - collection: `string`
+    - field: `string`
+    - meta?: `Record<string, any>`
+    - schema?: `Record<string, any>`
+
+- **Returns:** `Promise<DirectusField>`
+
+```vue [pages/example.vue]
+<script setup lang="ts">
+const { updateField } = useDirectusFields();
+
+const updateExistingField = async () => {
+  try {
+    const field = await updateField({
+      collection: "articles",
+      field: "subtitle",
+      meta: {
+        required: true
+      },
+      schema: {
+        is_nullable: false
+      }
+    });
+    // field will contain the updated DirectusField
+  } catch (e) {
+    // Handle error
+  }
+};
+</script>
+```
+
+### `deleteField`
+
+Delete a field from a collection
+
+- **Arguments:**
+
+  - data: [`DirectusFieldRequest`](https://github.com/Intevel/nuxt-directus/blob/main/src/runtime/types/index.d.ts)
+    - collection: `string`
+    - field: `string`
+
+- **Returns:** `Promise<void>`
+
+```vue [pages/example.vue]
+<script setup lang="ts">
+const { deleteField } = useDirectusFields();
+
+const removeField = async () => {
+  try {
+    await deleteField({
+      collection: "articles",
+      field: "subtitle"
+    });
+    // Field has been deleted
+  } catch (e) {
+    // Handle error
+  }
+};
+</script>

From 6b98cfe37d8fa5d8f1f02d6da0a7b92a0674baa5 Mon Sep 17 00:00:00 2001
From: Yoav Farhi <yoav.farhi@brainpop.com>
Date: Sun, 23 Feb 2025 16:09:18 +0200
Subject: [PATCH 5/5] Add generic type to useDirectusFields example in the docs

---
 .../2.composables/9.useDirectusFields.md      | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/docs/content/2.composables/9.useDirectusFields.md b/docs/content/2.composables/9.useDirectusFields.md
index e7d12eb4..ac97ebce 100644
--- a/docs/content/2.composables/9.useDirectusFields.md
+++ b/docs/content/2.composables/9.useDirectusFields.md
@@ -17,18 +17,26 @@ Get all fields in a specific collection
 
 ```vue [pages/example.vue]
 <script setup lang="ts">
-const { getFields } = useDirectusFields();
-
-const fetchFields = async () => {
-  try {
-    const fields = await getFields({
-      collection: "articles"
-    });
-    // fields will contain an array of DirectusField objects
-  } catch (e) {
-    // Handle error
+  const { getFields } = useDirectusFields();
+
+  interface Field {
+    collection: string;
+    field: string;
+    type: string;
+    schema: Object;
+    meta: Object;
   }
-};
+
+  const fetchFields = async () => {
+    try {
+      const fields = await getFields<Field>({
+        collection: "articles"
+      });
+      // fields will contain an array of Field objects
+    } catch (e) {
+      // Handle error
+    }
+  };
 </script>
 ```