Add useDirectusFields() composable

docs/content/2.composables/9.useDirectusFields.md

@@ -0,0 +1,181 @@
+# `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();
+
+  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>
+```
+
+### `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>

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 {

src/runtime/composables/useDirectusFields.ts

@@ -0,0 +1,84 @@
+import {
+  DirectusFieldRequest,
+  DirectusFieldCreation,
+  DirectusFieldUpdate,
+  DirectusFieldsRequest,
+  DirectusField
+} from '../types'
+import { useDirectus } from './useDirectus'
+
+export const useDirectusFields = () => {
+  const directus = useDirectus()
+
+  const getFields = async (
+    data: DirectusFieldsRequest
+  ): Promise<DirectusField[]> => {
+    const fields = await directus<{ data: DirectusField[] }>(
+      `/fields/${data.collection}`,
+      {
+        method: 'GET'
+      }
+    )
+    return fields.data
+  }
+
+  const getField = async (data: DirectusFieldRequest): Promise<DirectusField> => {
+    if (!data.field) {
+      throw new Error('Field name is required')
+    }
+    const field = await directus<{ data: DirectusField }>(
+      `/fields/${data.collection}/${data.field}`,
+      {
+        method: 'GET'
+      }
+    )
+    return field.data
+  }
+
+  const createField = async (data: DirectusFieldCreation): Promise<DirectusField> => {
+    const field = await directus<{ data: DirectusField }>(`/fields/${data.collection}`, {
+      method: 'POST',
+      body: {
+        field: data.field,
+        type: data.type,
+        meta: data.meta,
+        schema: data.schema
+      }
+    })
+    return field.data
+  }
+
+  const updateField = async (data: DirectusFieldUpdate): Promise<DirectusField> => {
+    const field = await directus<{ data: DirectusField }>(
+      `/fields/${data.collection}/${data.field}`,
+      {
+        method: 'PATCH',
+        body: {
+          meta: data.meta,
+          schema: data.schema
+        }
+      }
+    )
+    return field.data
+  }
+
+  const deleteField = async (data: DirectusFieldRequest): Promise<void> => {
+    if (!data.field) {
+      throw new Error('Field name is required')
+    }
+    await directus(
+      `/fields/${data.collection}/${data.field}`,
+      {
+        method: 'DELETE'
+      }
+    )
+  }
+
+  return {
+    getFields,
+    getField,
+    createField,
+    updateField,
+    deleteField
+  }
+}

src/runtime/types/index.d.ts

@@ -168,6 +168,38 @@ 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;
+}
+
+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 +212,7 @@ export interface DirectusNotificationObject {
   item?: string;
 }
 
+
 export interface DirectusCollectionRequest {
   collection?: string;
 }
@@ -234,7 +267,7 @@ export interface DirectusRevision {
 export interface DirectusItemMetadata {
   total_count?: number;
   filter_count?: number;
-};
+}
 
 export interface DirectusItems<T> {
   data: NonNullable<T[]>;