Untitled

<script setup>
import { ref, computed } from "vue";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import { Head, useForm } from "@inertiajs/vue3";
import TextInput from "@/Components/TextInput.vue";
import InputLabel from "@/Components/InputLabel.vue";
import PrimaryButton from "@/Components/PrimaryButton.vue";
import DataTable from "datatables.net-vue3";
import DataTablesCore from "datatables.net";
import EditButton from "@/Components/Buttons/EditButton.vue";
import CustomModal from "@/Components/CustomModal.vue";
import refreshProps from "@/Util/refreshProps";
import Select from "@/Components/Select.vue";
import Checkbox from "../../Components/Checkbox.vue";
import $ from "jquery";
import { DateTime } from "luxon";

const props = defineProps({
  datatable: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

DataTable.use(DataTablesCore);

const limitLength = function (sourceText) {
  if (sourceText != null) {
    if (sourceText.length <= 30) {
      return sourceText;
    } else {
      return sourceText.substring(0, 30);
    }
  } else {
    return "";
  }
};

const tableData = computed(() => {
  return props.datatable.pagination.data;
});

const tableColumns = [
  { data: "name", title: "Category", type: "case-insensitive" },
  {
    data: "description",
    title: "Description",
    type: "case-insensitive",
    render: (data) => {
      return limitLength(data);
    },
  },
  { data: "created_at", title: "Created On", type: "custom-date" },
  { data: "id", name: "edit", orderable: false },
];

const formStore = useForm({
  name: "",
  description: "",
});

const submitStore = () => {
  formStore.post(
    route("assets.categories.store"),
    refreshProps("assets.categories.index"),
  );
};

const formUpdate = useForm({
  id: 0,
  name: "",
  description: "",
  flagDelete: false,
});

const submitUpdate = () => {
  formUpdate.put(
    route("assets.categories.update", formUpdate.id),
    refreshProps("assets.categories.index"),
  );
};

const submitDelete = () => {
  if (confirm("Are you sure?")) {
    formUpdate.delete(
      route("assets.categories.destroy", formUpdate.id),
      refreshProps("assets.categories.index"),
    );
  }
};

const submitMerge = () => {
  if (confirm("Are you sure?")) {
    formUpdate.put(
      route("assets.updateAllInCategory"),
      refreshProps("assets.categories.index"),
    );
  }
};

const updateCategory = function (_category) {
  formUpdate.id = _category.id;
  formUpdate.name = _category.name;
  formUpdate.description = _category.description;
};

const modalOpen = ref(false);
const mergeModalOpen = ref(false);

$.fn.dataTable.ext.type.order["case-insensitive-pre"] = function (data) {
  return data?.toString().toLowerCase() || "";
};

$.fn.dataTable.ext.type.order["custom-date-pre"] = function (data) {
  console.log("Processing data in pre:", data);
  const format = "d LLL yyyy";

  const date = DateTime.fromFormat(data, format);

  if (!date.isValid) {
    console.error("Invalid date:", data);
    return 0;
  }

  return date.toISODate();
};
</script>

<template>
  <Head title="Manage Categories" />

  <AuthenticatedLayout>
    <div class="pt-[34px] sm:px-6 lg:px-[63px]">
      <div class="mx-auto">
        <div class="grid max-w-[988px] grid-cols-12 gap-6">
          <div class="box col-span-12 sm:col-span-12 lg:col-span-6">
            <div
              class="overflow-hidden rounded-lg bg-palette-5 shadow-sm dark:bg-[#141C25]"
            >
              <div class="p-6 pb-2">
                <h2 class="text-[12px] font-900 dark:text-[#7F99AE]">
                  Manage Categories
                </h2>
              </div>
              <div class="px-5 pb-5">
                <DataTable
                  :options="{
                    pageLength: 50,
                    bPaginate: false,
                    bLengthChange: false,
                    bFilter: true,
                    bInfo: false,
                    bAutoWidth: true,
                    deferRender: true,
                    searching: false,
                    order: [[0, 'asc']],
                    typeDetect: false,
                  }"
                  :data="tableData"
                  :columns="tableColumns"
                  class="display pb-5 pl-5 pr-5 text-[10px]"
                >
                  <template #column-edit="props">
                    <div class="w-4">
                      <EditButton
                        @click="
                          updateCategory(props.rowData);
                          modalOpen = true;
                        "
                      />
                    </div>
                  </template>
                </DataTable>
              </div>
            </div>
          </div>

          <div class="box col-span-12 lg:col-span-6">
            <div
              class="overflow-hidden rounded-lg bg-palette-5 shadow-sm dark:bg-[#141C25]"
            >
              <form @submit.prevent="submitStore">
                <div class="p-6">
                  <h2 class="text-[12px] font-900 dark:text-[#7F99AE]">
                    Add Category
                  </h2>

                  <div class="mt-5">
                    <InputLabel class="ml-2" for="name" value="Name" />
                    <TextInput
                      id="name"
                      type="text"
                      class="mt-1 block w-full"
                      v-model="formStore.name"
                      required
                      placeholder="Enter a category name"
                      autofocus
                    />
                  </div>

                  <div class="mt-5">
                    <InputLabel
                      class="ml-2"
                      for="description"
                      value="Description"
                    />
                    <TextInput
                      id="description"
                      type="text"
                      class="mt-1 block w-full"
                      v-model="formStore.description"
                    />
                  </div>

                  <div class="mt-4 flex">
                    <PrimaryButton
                      class="mx-auto max-w-[293px]"
                      :class="{
                        'opacity-25': formStore.processing,
                      }"
                      :disabled="formStore.processing"
                    >
                      Add Category
                    </PrimaryButton>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </AuthenticatedLayout>

  <CustomModal
    title="Edit Category"
    v-model="modalOpen"
    @close="modalOpen = false"
  >
    <form @submit.prevent="submitUpdate" class="w-full sm:w-[440px]">
      <input type="hidden" name="id" id="id" v-model="formUpdate.id" />

      <div class="mt-4">
        <InputLabel class="ml-2" for="name" value="Name" />
        <TextInput
          id="name"
          type="text"
          class="mt-1 block w-full"
          v-model="formUpdate.name"
          autofocus
        />
      </div>

      <div class="mt-4">
        <InputLabel class="ml-2" for="description" value="Description" />
        <TextInput
          id="description"
          type="text"
          class="mt-1 block w-full"
          v-model="formUpdate.description"
        />
      </div>

      <div class="mx-auto mt-[16px] flex">
        <PrimaryButton
          class="mx-auto max-w-[293px]"
          :class="{ 'opacity-25': formUpdate.processing }"
          :disabled="formUpdate.processing"
        >
          Save Category
        </PrimaryButton>
      </div>
    </form>
    <div class="mt-[16px] flex w-full sm:w-[440px]">
      <PrimaryButton
        class="mx-auto max-w-[293px]"
        @click="((modalOpen = false), (mergeModalOpen = true))"
      >
        Merge Categories
      </PrimaryButton>
    </div>
    <form @submit.prevent="submitDelete" class="w-full sm:w-[440px]">
      <div class="mt-[16px] flex">
        <PrimaryButton
          class="mx-auto max-w-[293px]"
          :class="{ 'opacity-25': formUpdate.processing }"
          :style="{ 'background-color': '#EF3961' }"
          :disabled="formUpdate.processing"
        >
          Delete
        </PrimaryButton>
      </div>
    </form>
  </CustomModal>
  <CustomModal
    title="Select Category to Merge Into"
    v-model="mergeModalOpen"
    @close="mergeModalOpen = false"
  >
    <InputLabel class="my-4">Merging {{ formUpdate.name }} into:</InputLabel>

    <form @submit.prevent="submitMerge" class="w-full sm:w-[440px]">
      <Select
        name="category"
        id="category"
        class="mt-1 block w-full"
        message="Choose a category"
        v-model="formUpdate.id"
        required
      >
        <option
          v-for="category in datatable.pagination.data"
          :key="category.id"
          :value="category.id"
          :selected="category.id == formUpdate.id"
        >
          {{ category.name }}
        </option>
      </Select>

      <div class="my-4">
        <InputLabel>Check to delete {{ formUpdate.name }} on merge.</InputLabel>
        <Checkbox v-model="formUpdate.flagDelete"></Checkbox>
      </div>

      <div class="mt-[16px] flex">
        <PrimaryButton
          class="mx-auto max-w-[293px]"
          @click="mergeModalOpen = false"
        >
          Complete Merge
        </PrimaryButton>
      </div>
    </form>
  </CustomModal>
</template>

<style>
@import "datatables.net-dt";

div.dt-container div.dt-layout-row {
  margin: 0;
}
</style>