Untitled

```
<script setup>
import { ref, computed } from "vue";
import { Head, Link, useForm, usePage } from "@inertiajs/vue3";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import CustomModal from "@/Components/CustomModal.vue";
import DataTable from "datatables.net-vue3";
import DataTablesCore from "datatables.net";
import EditButton from "@/Components/Buttons/EditButton.vue";
import Filter from "@/Icons/Filter.vue";
import Filters from "./Partials/Filters.vue";
import InputLabel from "@/Components/InputLabel.vue";
import Password from "@/Components/Password.vue";
import PasswordMeter from "vue-simple-password-meter";
import PrimaryButton from "@/Components/PrimaryButton.vue";
import refreshProps from "@/Util/refreshProps";
import Search from "@/Components/Search.vue";
import Select from "@/Components/Select.vue";
import TextInput from "@/Components/TextInput.vue";
import Users from "@/Icons/Users.vue";
import $ from "jquery";
import { DateTime } from "luxon";

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

DataTable.use(DataTablesCore);

const emailEnabled = usePage().props.config.email_enabled != 0;
const modalFilterOpen = ref(false);
const modalOpen = ref(false);
const tableData = computed(() => {
  return props.datatable.pagination.data;
});
const tableColumns = computed(() => {
  const columnArray = [];

  //columnArray.push({ data: "id", orderable: false, name: "checkbox" });
  columnArray.push({ data: "name", title: "Name", type: "case-insensitive" });
  columnArray.push({ data: "email", title: "email", type: "case-insensitive" });
  columnArray.push({ data: "role_labels", title: "Role" });
  columnArray.push({
    data: "created_at",
    title: "Created On",
    className: "hidden md:table-cell",
    type: "custom-date",
  });
  columnArray.push({
    data: "updated_at",
    title: "Last Login",
    className: "hidden md:table-cell",
    type: "custom-date",
  });
  if (emailEnabled) {
    columnArray.push({
      data: "email_verified_at",
      title: "Email Verified On",
      defaultContent: "Email Not Verified",
      className: "hidden md:table-cell",
      type: "custom-date",
    });
  }
  columnArray.push({ data: "id", orderable: false, name: "edit" });

  return columnArray;
});

const form = useForm({
  id: 0,
  name: "",
  email: "",
  role: "",
  password: "",
  password_confirm: "",
});

const openModal = function (user) {
  modalOpen.value = true;

  form.id = user.id;
  form.name = user.name;
  form.email = user.email;
  form.role = user.role;
};

const submit = () => {
  if (form.password !== undefined && form.password !== form.password_confirm) {
    alert("Passwords do not match");

    return;
  }

  form.put(route("users.update", form.id), refreshProps("users.index"));
};

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

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

    if (!date.isValid) {
      console.error("Invalid date:", data);
      return "1991-09-01";
    }

    return date.toISODate();
  }

  return "1991-09-01";
};

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

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

  <AuthenticatedLayout>
    <div class="py-6">
      <div class="mx-auto sm:px-6">
        <div
          class="overflow-hidden rounded-lg bg-palette-5 shadow-sm dark:bg-[#141C25]"
        >
          <div class="p-6">
            <h1 class="float-left text-[12px] font-900 uppercase">
              Manage Users
            </h1>
            <Link
              :href="route('users.create')"
              class="float-right rounded-md border border-palette-2 p-[9px] text-[10px] uppercase dark:border-[#9cb1c3]"
            >
              Add User
              <Users class="ml-2 inline-block" />
            </Link>

            <div class="clear-both"></div>

            <div class="mb-[13px] mt-[8px] flex">
              <div class="grow-0">
                <a
                  href="#"
                  @click="modalFilterOpen = true"
                  class="inline-block rounded-md border border-palette-2 p-[10px] text-[10px] font-600 uppercase dark:border-[#9cb1c3]"
                >
                  <Filter class="inline-block h-[20px] w-[17px]" />
                  Filter:
                </a>
              </div>
              <div class="grow pl-2">
                <Search baseUrl="users.index" />
              </div>
            </div>

            <DataTable
              id="example"
              :options="{
                pageLength: 50,
                bPaginate: false,
                bLengthChange: false,
                bFilter: false,
                bInfo: false,
                bAutoWidth: true,
                deferRender: true,
                searching: false,
                bSort: false,
                ordering: true,
                order: [],
                typeDetect: false,
              }"
              :data="tableData"
              :columns="tableColumns"
              class="display text-[10px]"
            >
              <template #column-checkbox="props">
                <input
                  :id="`user_select_${props.cellData}`"
                  type="checkbox"
                  class="mr-2 inline-block h-4 w-4"
                  :value="props.cellData"
                />
              </template>
              <template #column-edit="props">
                <div class="w-4">
                  <EditButton @click="openModal(props.rowData)" />
                </div>
              </template>
            </DataTable>
          </div>
        </div>
      </div>
    </div>
  </AuthenticatedLayout>

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

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

      <div class="mt-4">
        <InputLabel for="email" value="Email" />
        <TextInput
          id="email"
          type="text"
          class="mt-1 block w-full"
          v-model="form.email"
          autocomplete="email"
          required
        />
      </div>

      <div class="mt-4">
        <InputLabel for="role" value="Role" />
        <Select
          name="role"
          id="role"
          class="mt-1 block w-full"
          v-model="form.role"
          message="Please choose"
        >
          <option
            v-for="(value, name, index) in roles"
            :key="index"
            :value="value"
          >
            {{ name }}
          </option>
        </Select>
      </div>

      <div class="mt-4">
        <InputLabel for="password" value="Password" />
        <Password
          id="password"
          type="password"
          class="mt-1 block w-full"
          v-model="form.password"
          placeholder="********"
          autocomplete="new-password"
        />
      </div>

      <div class="mt-4">
        <InputLabel for="password_confirm" value="Confirm Password" />

        <Password
          id="password_confirm"
          type="password"
          class="mt-1 block w-full"
          v-model="form.password_confirm"
          placeholder="********"
          autocomplete="new-password"
        />

        <PasswordMeter :password="form.password" />

        <span
          v-if="form.password"
          class="mt-[2px] block text-left text-[11px] font-600"
        >
          Password strength
        </span>
      </div>

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

    <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': form.processing }"
          :style="{ 'background-color': '#EF3961' }"
          :disabled="form.processing"
        >
          Delete
        </PrimaryButton>
      </div>
    </form>
  </CustomModal>

  <CustomModal v-model="modalFilterOpen" @close="modalFilterOpen = false">
    <Filters baseUrl="users.index" :roles="roles" />
  </CustomModal>
</template>

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

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