mealie/frontend/composables/recipes/use-recipe-tools.ts

import { reactive, ref, useAsync } from "@nuxtjs/composition-api";
import { useAsyncKey } from "../use-utils";
import { useUserApi } from "~/composables/api";
import { VForm } from "~/types/vuetify";

export const useTools = function (eager = true) {
  const workingToolData = reactive({
    id: 0,
    name: "",
    slug: "",
    onHand: false,
  });

  const api = useUserApi();
  const loading = ref(false);
  const validForm = ref(false);

  const actions = {
    getAll() {
      loading.value = true;
      const units = useAsync(async () => {
        const { data } = await api.tools.getAll();
        return data;
      }, useAsyncKey());

      loading.value = false;
      return units;
    },

    async refreshAll() {
      loading.value = true;
      const { data } = await api.tools.getAll();

      if (data) {
        tools.value = data;
      }

      loading.value = false;
    },

    async createOne(domForm: VForm | null = null) {
      if (domForm && !domForm.validate()) {
        validForm.value = false;
      }

      loading.value = true;

      const { data } = await api.tools.createOne(workingToolData);

      if (data) {
        tools.value?.push(data);
      }

      domForm?.reset();
      this.reset();
    },

    async updateOne() {
      loading.value = true;
      const { data } = await api.tools.updateOne(workingToolData.id, workingToolData);
      if (data) {
        tools.value?.push(data);
      }
      this.reset();
    },

    async deleteOne(id: number) {
      loading.value = true;
      await api.tools.deleteOne(id);
      this.reset();
    },

    reset() {
      workingToolData.name = "";
      workingToolData.id = 0;
      loading.value = false;
      validForm.value = true;
    },
  };

  const tools = (() => {
    if (eager) {
      return actions.getAll();
    } else {
      return ref([]);
    }
  })();

  return {
    tools,
    actions,
    workingToolData,
    loading,
  };
};