@sfxcode/nuxt-ui-mongocamp 1.1.0

package/dist/runtime/components/MongocampRoleGrants.vue

@@ -0,0 +1,276 @@
+<script setup>
+import { h, reactive, ref, resolveComponent } from "vue";
+import useMongocampAdmin from "../composables/useMongocampAdmin";
+const props = defineProps({
+  roleName: { type: String, required: true }
+});
+const { listRoles, updateRole, listCollections } = useMongocampAdmin();
+const grants = ref([]);
+const allCollections = ref([]);
+const isAdmin = ref(false);
+const loading = ref(false);
+const isAddModalOpen = ref(false);
+const isEditModalOpen = ref(false);
+const errorMessage = ref("");
+const editIndex = ref(-1);
+const editGrantName = ref("");
+const newGrant = ref({ collectionName: "", read: false, write: false, administrate: false });
+const editGrant = ref({ read: false, write: false, administrate: false });
+const addGrantSchema = reactive([
+  {
+    $formkit: "nuxtUISelectMenu",
+    name: "collectionName",
+    label: "Collection",
+    class: "w-full",
+    options: [],
+    validation: "required"
+  },
+  {
+    $formkit: "nuxtUISwitch",
+    name: "read",
+    label: "Read"
+  },
+  {
+    $formkit: "nuxtUISwitch",
+    name: "write",
+    label: "Write"
+  },
+  {
+    $formkit: "nuxtUISwitch",
+    name: "administrate",
+    label: "Administrate"
+  }
+]);
+const editGrantSchema = reactive([
+  {
+    $formkit: "nuxtUISwitch",
+    name: "read",
+    label: "Read"
+  },
+  {
+    $formkit: "nuxtUISwitch",
+    name: "write",
+    label: "Write"
+  },
+  {
+    $formkit: "nuxtUISwitch",
+    name: "administrate",
+    label: "Administrate"
+  }
+]);
+async function fetchRole() {
+  loading.value = true;
+  try {
+    const roles = await listRoles();
+    const role = roles.find((r) => r.name === props.roleName);
+    if (role) {
+      isAdmin.value = role.isAdmin;
+      grants.value = (role.collectionGrants ?? []).map((g) => ({ ...g }));
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+async function fetchCollections() {
+  allCollections.value = await listCollections();
+}
+async function saveGrants() {
+  errorMessage.value = "";
+  try {
+    await updateRole(props.roleName, isAdmin.value, grants.value);
+    await fetchRole();
+  } catch (e) {
+    errorMessage.value = e instanceof Error ? e.message : "Failed to save grants";
+  }
+}
+async function handleAddGrant() {
+  const raw = newGrant.value.collectionName;
+  const collectionName = typeof newGrant.value.collectionName === "object" ? raw.value ?? raw.label ?? "" : newGrant.value.collectionName;
+  grants.value.push({
+    name: collectionName,
+    read: newGrant.value.read,
+    write: newGrant.value.write,
+    administrate: newGrant.value.administrate,
+    grantType: "COLLECTION"
+  });
+  await saveGrants();
+  isAddModalOpen.value = false;
+}
+function openEdit(index) {
+  const grant = grants.value[index];
+  editIndex.value = index;
+  editGrantName.value = grant.name;
+  editGrant.value = { read: grant.read, write: grant.write, administrate: grant.administrate };
+  isEditModalOpen.value = true;
+}
+async function handleEditGrant() {
+  const grant = grants.value[editIndex.value];
+  grants.value[editIndex.value] = {
+    ...grant,
+    read: editGrant.value.read,
+    write: editGrant.value.write,
+    administrate: editGrant.value.administrate
+  };
+  await saveGrants();
+  isEditModalOpen.value = false;
+}
+async function removeGrant(index) {
+  grants.value.splice(index, 1);
+  await saveGrants();
+}
+function openAdd() {
+  const grantedNames = new Set(grants.value.map((g) => g.name));
+  addGrantSchema[0].options = allCollections.value.filter((c) => !grantedNames.has(c));
+  newGrant.value = { collectionName: "", read: false, write: false, administrate: false };
+  isAddModalOpen.value = true;
+}
+const UBadge = resolveComponent("UBadge");
+const UButton = resolveComponent("UButton");
+const UTooltip = resolveComponent("UTooltip");
+function withTooltip(text, node) {
+  return h(UTooltip, { text }, { default: () => node });
+}
+const columns = [
+  {
+    accessorKey: "name",
+    header: "Collection"
+  },
+  {
+    accessorKey: "grantType",
+    header: "Type",
+    cell: ({ row }) => h(UBadge, {
+      label: row.original.grantType,
+      color: "neutral",
+      variant: "subtle"
+    })
+  },
+  {
+    accessorKey: "read",
+    header: "Read",
+    cell: ({ row }) => h(UBadge, {
+      label: row.original.read ? "Yes" : "No",
+      color: row.original.read ? "success" : "neutral",
+      variant: "subtle"
+    })
+  },
+  {
+    accessorKey: "write",
+    header: "Write",
+    cell: ({ row }) => h(UBadge, {
+      label: row.original.write ? "Yes" : "No",
+      color: row.original.write ? "success" : "neutral",
+      variant: "subtle"
+    })
+  },
+  {
+    accessorKey: "administrate",
+    header: "Admin",
+    cell: ({ row }) => h(UBadge, {
+      label: row.original.administrate ? "Yes" : "No",
+      color: row.original.administrate ? "error" : "neutral",
+      variant: "subtle"
+    })
+  },
+  {
+    id: "actions",
+    header: "",
+    cell: ({ row }) => h("div", { class: "flex gap-1 justify-end" }, [
+      withTooltip("Edit grant", h(UButton, {
+        "icon": "i-lucide-pencil",
+        "color": "neutral",
+        "variant": "ghost",
+        "size": "sm",
+        "aria-label": "Edit grant",
+        "onClick": () => openEdit(row.index)
+      })),
+      withTooltip("Remove grant", h(UButton, {
+        "icon": "i-lucide-trash-2",
+        "color": "error",
+        "variant": "ghost",
+        "size": "sm",
+        "aria-label": "Remove grant",
+        "onClick": () => removeGrant(row.index)
+      }))
+    ])
+  }
+];
+fetchRole();
+fetchCollections();
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <h2 class="text-xl font-semibold">
+        Grants: {{ roleName }}
+      </h2>
+      <div class="flex gap-2">
+        <UTooltip text="Refresh">
+          <UButton
+            icon="i-lucide-refresh-cw"
+            color="neutral"
+            variant="ghost"
+            :loading="loading"
+            aria-label="Refresh"
+            @click="fetchRole"
+          />
+        </UTooltip>
+        <UButton
+          icon="i-lucide-plus"
+          label="Add Grant"
+          @click="openAdd"
+        />
+      </div>
+    </div>
+
+    <UTable
+      :data="grants"
+      :columns="columns"
+      :loading="loading"
+    />
+
+    <!-- Add Grant Modal -->
+    <UModal
+      v-model:open="isAddModalOpen"
+      title="Add Grant"
+    >
+      <template #body>
+        <FUDataEdit
+          :data="newGrant"
+          :schema="addGrantSchema"
+          submit-label="Add Grant"
+          submit-icon="i-lucide-plus"
+          @data-saved="handleAddGrant"
+        />
+        <p
+          v-if="errorMessage"
+          class="mt-2 text-sm text-error-500"
+        >
+          {{ errorMessage }}
+        </p>
+      </template>
+    </UModal>
+
+    <!-- Edit Grant Modal -->
+    <UModal
+      v-model:open="isEditModalOpen"
+      :title="`Edit Grant: ${editGrantName}`"
+    >
+      <template #body>
+        <FUDataEdit
+          :data="editGrant"
+          :schema="editGrantSchema"
+          submit-label="Save Changes"
+          submit-icon="i-lucide-save"
+          @data-saved="handleEditGrant"
+        />
+        <p
+          v-if="errorMessage"
+          class="mt-2 text-sm text-error-500"
+        >
+          {{ errorMessage }}
+        </p>
+      </template>
+    </UModal>
+  </div>
+</template>

package/dist/runtime/components/MongocampRoleGrants.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    roleName: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MongocampRoles.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    grantsPath?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MongocampRoles.vue

@@ -0,0 +1,272 @@
+<script setup>
+import { h, reactive, ref, resolveComponent } from "vue";
+import useMongocampAdmin from "../composables/useMongocampAdmin";
+const props = defineProps({
+  grantsPath: { type: String, required: false }
+});
+const { listRoles, addRole, updateRole, deleteRole } = useMongocampAdmin();
+const roles = ref([]);
+const loading = ref(false);
+const filterText = ref("");
+const sorting = ref([]);
+let filterTimer;
+const isAddModalOpen = ref(false);
+const isEditModalOpen = ref(false);
+const isDeleteModalOpen = ref(false);
+const roleToDelete = ref("");
+const errorMessage = ref("");
+const newRole = ref({ name: "", isAdmin: false });
+const editRole = ref({ roleName: "", isAdmin: false });
+const editGrants = ref([]);
+const addRoleSchema = reactive([
+  {
+    $formkit: "nuxtUIInput",
+    name: "name",
+    label: "Role Name",
+    validation: "required|length:2"
+  },
+  {
+    $formkit: "nuxtUISwitch",
+    name: "isAdmin",
+    label: "Admin Role"
+  }
+]);
+const editRoleSchema = reactive([
+  {
+    $formkit: "nuxtUISwitch",
+    name: "isAdmin",
+    label: "Admin Role"
+  }
+]);
+async function fetchRoles() {
+  loading.value = true;
+  try {
+    roles.value = await listRoles(filterText.value);
+  } finally {
+    loading.value = false;
+  }
+}
+function onFilterInput() {
+  clearTimeout(filterTimer);
+  filterTimer = setTimeout(() => fetchRoles(), 300);
+}
+async function handleAddRole() {
+  errorMessage.value = "";
+  try {
+    await addRole(newRole.value.name, newRole.value.isAdmin);
+    isAddModalOpen.value = false;
+    newRole.value = { name: "", isAdmin: false };
+    await fetchRoles();
+  } catch (e) {
+    errorMessage.value = e instanceof Error ? e.message : "Failed to add role";
+  }
+}
+function openEdit(role) {
+  editRole.value = { roleName: role.name, isAdmin: role.isAdmin };
+  editGrants.value = (role.collectionGrants ?? []).map((g) => ({ ...g }));
+  isEditModalOpen.value = true;
+}
+async function handleEditRole() {
+  errorMessage.value = "";
+  try {
+    await updateRole(editRole.value.roleName, editRole.value.isAdmin, editGrants.value);
+    isEditModalOpen.value = false;
+    await fetchRoles();
+  } catch (e) {
+    errorMessage.value = e instanceof Error ? e.message : "Failed to update role";
+  }
+}
+function confirmDelete(roleName) {
+  roleToDelete.value = roleName;
+  isDeleteModalOpen.value = true;
+}
+async function handleDeleteRole() {
+  await deleteRole(roleToDelete.value);
+  isDeleteModalOpen.value = false;
+  await fetchRoles();
+}
+const UBadge = resolveComponent("UBadge");
+const UButton = resolveComponent("UButton");
+const UTooltip = resolveComponent("UTooltip");
+function withTooltip(text, node) {
+  return h(UTooltip, { text }, { default: () => node });
+}
+function sortHeader(column, label) {
+  const isSorted = column.getIsSorted();
+  return h(UButton, {
+    color: "neutral",
+    variant: "ghost",
+    label,
+    icon: isSorted === "asc" ? "i-lucide-arrow-up-narrow-wide" : isSorted === "desc" ? "i-lucide-arrow-down-wide-narrow" : "i-lucide-arrow-up-down",
+    class: "-mx-2.5",
+    onClick: () => column.toggleSorting(isSorted === "asc")
+  });
+}
+const columns = [
+  {
+    accessorKey: "name",
+    header: ({ column }) => sortHeader(column, "Role")
+  },
+  {
+    accessorKey: "isAdmin",
+    header: "Admin",
+    cell: ({ row }) => h(UBadge, {
+      label: row.original.isAdmin ? "Admin" : "Standard",
+      color: row.original.isAdmin ? "error" : "neutral",
+      variant: "subtle"
+    })
+  },
+  {
+    accessorKey: "collectionGrants",
+    header: "Grants",
+    cell: ({ row }) => {
+      const count = row.original.collectionGrants?.length ?? 0;
+      return count ? h(UBadge, { label: String(count), color: "primary", variant: "subtle" }) : h("span", { class: "text-dimmed" }, "\u2014");
+    }
+  },
+  {
+    id: "actions",
+    header: "",
+    cell: ({ row }) => h("div", { class: "flex gap-1 justify-end" }, [
+      withTooltip("Manage grants", h(UButton, {
+        "icon": "i-lucide-key",
+        "color": "neutral",
+        "variant": "ghost",
+        "size": "sm",
+        "aria-label": "Manage grants",
+        "to": props.grantsPath ? `${props.grantsPath}/${row.original.name}` : `/secured/admin/roles/${row.original.name}`
+      })),
+      withTooltip("Edit role", h(UButton, {
+        "icon": "i-lucide-pencil",
+        "color": "neutral",
+        "variant": "ghost",
+        "size": "sm",
+        "aria-label": "Edit role",
+        "onClick": () => openEdit(row.original)
+      })),
+      withTooltip("Delete role", h(UButton, {
+        "icon": "i-lucide-trash-2",
+        "color": "error",
+        "variant": "ghost",
+        "size": "sm",
+        "aria-label": "Delete role",
+        "onClick": () => confirmDelete(row.original.name)
+      }))
+    ])
+  }
+];
+fetchRoles();
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex items-center justify-between gap-4">
+      <h2 class="text-xl font-semibold">
+        Roles
+      </h2>
+      <div class="flex flex-1 items-center gap-2">
+        <UInput
+          v-model="filterText"
+          icon="i-lucide-search"
+          placeholder="Search roles..."
+          size="sm"
+          class="flex-1 max-w-xs"
+          @input="onFilterInput"
+        />
+        <UTooltip text="Refresh">
+          <UButton
+            icon="i-lucide-refresh-cw"
+            color="neutral"
+            variant="ghost"
+            :loading="loading"
+            aria-label="Refresh"
+            @click="fetchRoles"
+          />
+        </UTooltip>
+        <UButton
+          icon="i-lucide-plus"
+          label="Add Role"
+          @click="isAddModalOpen = true"
+        />
+      </div>
+    </div>
+
+    <UTable
+      v-model:sorting="sorting"
+      :data="roles"
+      :columns="columns"
+      :loading="loading"
+    />
+
+    <!-- Add Role Modal -->
+    <UModal
+      v-model:open="isAddModalOpen"
+      title="Add Role"
+    >
+      <template #body>
+        <FUDataEdit
+          :data="newRole"
+          :schema="addRoleSchema"
+          submit-label="Add Role"
+          submit-icon="i-lucide-plus"
+          @data-saved="handleAddRole"
+        />
+        <p
+          v-if="errorMessage"
+          class="mt-2 text-sm text-error-500"
+        >
+          {{ errorMessage }}
+        </p>
+      </template>
+    </UModal>
+
+    <!-- Edit Role Modal -->
+    <UModal
+      v-model:open="isEditModalOpen"
+      :title="`Edit Role: ${editRole.roleName}`"
+    >
+      <template #body>
+        <FUDataEdit
+          :data="editRole"
+          :schema="editRoleSchema"
+          submit-label="Save Changes"
+          submit-icon="i-lucide-save"
+          @data-saved="handleEditRole"
+        />
+        <p
+          v-if="errorMessage"
+          class="mt-2 text-sm text-error-500"
+        >
+          {{ errorMessage }}
+        </p>
+      </template>
+    </UModal>
+
+    <!-- Delete Confirmation Modal -->
+    <UModal
+      v-model:open="isDeleteModalOpen"
+      title="Delete Role"
+      :ui="{ footer: 'justify-end' }"
+    >
+      <template #body>
+        <p>
+          Are you sure you want to delete role <strong>{{ roleToDelete }}</strong>?
+          This action cannot be undone.
+        </p>
+      </template>
+      <template #footer>
+        <UButton
+          label="Cancel"
+          color="neutral"
+          variant="ghost"
+          @click="isDeleteModalOpen = false"
+        />
+        <UButton
+          label="Delete"
+          color="error"
+          @click="handleDeleteRole"
+        />
+      </template>
+    </UModal>
+  </div>
+</template>

package/dist/runtime/components/MongocampRoles.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    grantsPath?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MongocampUsers.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;