You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
547 lines
32 KiB
HTML
547 lines
32 KiB
HTML
<script type="module">
|
|
let usersTable = document.getElementById("users-table");
|
|
let toggleAllCheckbox = usersTable.querySelector(
|
|
"thead input[type='checkbox']",
|
|
);
|
|
let checkboxes = [
|
|
...usersTable.querySelectorAll("tbody input[type='checkbox']"),
|
|
];
|
|
|
|
toggleAllCheckbox.addEventListener("change", (event) => {
|
|
checkboxes.forEach((checkbox) => {
|
|
checkbox.checked = event.target.checked;
|
|
});
|
|
});
|
|
checkboxes.forEach((checkbox) => {
|
|
checkbox.addEventListener("change", () => {
|
|
let allChecked = checkboxes.every((checkbox) => checkbox.checked);
|
|
let someChecked = checkboxes.some((checkbox) => checkbox.checked);
|
|
toggleAllCheckbox.checked = someChecked;
|
|
toggleAllCheckbox.indeterminate = someChecked && !allChecked;
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<div class="px-4 sm:px-6 lg:px-8">
|
|
<div class="sm:flex sm:items-center">
|
|
<div class="sm:flex-auto">
|
|
<h1 class="text-base font-semibold text-gray-900">Users</h1>
|
|
<p class="mt-2 text-sm text-gray-700">
|
|
A list of all the users in your account including their name,
|
|
title, email and role.
|
|
</p>
|
|
</div>
|
|
<div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
|
|
<button
|
|
type="button"
|
|
class="block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
|
>
|
|
Add user
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="mt-8 flow-root">
|
|
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
|
<div
|
|
class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"
|
|
>
|
|
<div class="group/table relative">
|
|
<div
|
|
class="absolute top-0 left-14 hidden h-12 items-center space-x-3 bg-white group-has-checked/table:flex sm:left-12"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center rounded-sm bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-white"
|
|
>
|
|
Bulk edit
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center rounded-sm bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-white"
|
|
>
|
|
Delete all
|
|
</button>
|
|
</div>
|
|
|
|
<table
|
|
id="users-table"
|
|
class="min-w-full table-fixed divide-y divide-gray-300"
|
|
>
|
|
<thead>
|
|
<tr>
|
|
<th
|
|
scope="col"
|
|
class="relative px-7 sm:w-12 sm:px-6"
|
|
>
|
|
<div
|
|
class="group absolute top-1/2 left-4 -mt-2 grid size-4 grid-cols-1"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
class="col-start-1 row-start-1 appearance-none rounded-sm border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
|
|
/>
|
|
<svg
|
|
viewBox="0 0 14 14"
|
|
fill="none"
|
|
class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
|
|
>
|
|
<path
|
|
d="M3 8L6 11L11 3.5"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="opacity-0 group-has-checked:opacity-100"
|
|
/>
|
|
<path
|
|
d="M3 7H11"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="opacity-0 group-has-indeterminate:opacity-100"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="min-w-48 py-3.5 pr-3 text-left text-sm font-semibold text-gray-900"
|
|
>
|
|
Name
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
|
|
>
|
|
Title
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
|
|
>
|
|
Email
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
|
|
>
|
|
Role
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="relative py-3.5 pr-4 pl-3 sm:pr-3"
|
|
>
|
|
<span class="sr-only">Edit</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200 bg-white">
|
|
<tr class="group has-checked:bg-gray-50">
|
|
<td class="relative px-7 sm:w-12 sm:px-6">
|
|
<div
|
|
class="absolute inset-y-0 left-0 hidden w-0.5 bg-indigo-600 group-has-checked:block"
|
|
></div>
|
|
|
|
<div
|
|
class="group absolute top-1/2 left-4 -mt-2 grid size-4 grid-cols-1"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
class="col-start-1 row-start-1 appearance-none rounded-sm border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
|
|
/>
|
|
<svg
|
|
viewBox="0 0 14 14"
|
|
fill="none"
|
|
class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
|
|
>
|
|
<path
|
|
d="M3 8L6 11L11 3.5"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="opacity-0 group-has-checked:opacity-100"
|
|
/>
|
|
<path
|
|
d="M3 7H11"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="opacity-0 group-has-indeterminate:opacity-100"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</td>
|
|
<td
|
|
class="py-4 pr-3 text-sm font-medium whitespace-nowrap text-gray-900 group-has-checked:text-indigo-600"
|
|
>
|
|
Lindsay Walton
|
|
</td>
|
|
<td
|
|
class="px-3 py-4 text-sm whitespace-nowrap text-gray-500"
|
|
>
|
|
Front-end Developer
|
|
</td>
|
|
<td
|
|
class="px-3 py-4 text-sm whitespace-nowrap text-gray-500"
|
|
>
|
|
lindsay.walton@example.com
|
|
</td>
|
|
<td
|
|
class="px-3 py-4 text-sm whitespace-nowrap text-gray-500"
|
|
>
|
|
Member
|
|
</td>
|
|
<td
|
|
class="py-4 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-3"
|
|
>
|
|
<a
|
|
href="#"
|
|
class="text-indigo-600 hover:text-indigo-900"
|
|
>Edit<span class="sr-only"
|
|
>, Lindsay Walton</span
|
|
></a
|
|
>
|
|
</td>
|
|
</tr>
|
|
<tr class="group has-checked:bg-gray-50">
|
|
<td class="relative px-7 sm:w-12 sm:px-6">
|
|
<div
|
|
class="absolute inset-y-0 left-0 hidden w-0.5 bg-indigo-600 group-has-checked:block"
|
|
></div>
|
|
|
|
<div
|
|
class="group absolute top-1/2 left-4 -mt-2 grid size-4 grid-cols-1"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
class="col-start-1 row-start-1 appearance-none rounded-sm border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
|
|
/>
|
|
<svg
|
|
viewBox="0 0 14 14"
|
|
fill="none"
|
|
class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
|
|
>
|
|
<path
|
|
d="M3 8L6 11L11 3.5"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="opacity-0 group-has-checked:opacity-100"
|
|
/>
|
|
<path
|
|
d="M3 7H11"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="opacity-0 group-has-indeterminate:opacity-100"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</td>
|
|
<td
|
|
class="py-4 pr-3 text-sm font-medium whitespace-nowrap text-gray-900 group-has-checked:text-indigo-600"
|
|
>
|
|
Courtney Henry
|
|
</td>
|
|
<td
|
|
class="px-3 py-4 text-sm whitespace-nowrap text-gray-500"
|
|
>
|
|
Designer
|
|
</td>
|
|
<td
|
|
class="px-3 py-4 text-sm whitespace-nowrap text-gray-500"
|
|
>
|
|
courtney.henry@example.com
|
|
</td>
|
|
<td
|
|
class="px-3 py-4 text-sm whitespace-nowrap text-gray-500"
|
|
>
|
|
Admin
|
|
</td>
|
|
<td
|
|
class="py-4 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-3"
|
|
>
|
|
<a
|
|
href="#"
|
|
class="text-indigo-600 hover:text-indigo-900"
|
|
>Edit<span class="sr-only"
|
|
>, Courtney Henry</span
|
|
></a
|
|
>
|
|
</td>
|
|
</tr>
|
|
<tr class="group has-checked:bg-gray-50">
|
|
<td class="relative px-7 sm:w-12 sm:px-6">
|
|
<div
|
|
class="absolute inset-y-0 left-0 hidden w-0.5 bg-indigo-600 group-has-checked:block"
|
|
></div>
|
|
|
|
<div
|
|
class="group absolute top-1/2 left-4 -mt-2 grid size-4 grid-cols-1"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
class="col-start-1 row-start-1 appearance-none rounded-sm border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
|
|
/>
|
|
<svg
|
|
viewBox="0 0 14 14"
|
|
fill="none"
|
|
class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
|
|
>
|
|
<path
|
|
d="M3 8L6 11L11 3.5"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="opacity-0 group-has-checked:opacity-100"
|
|
/>
|
|
<path
|
|
d="M3 7H11"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="opacity-0 group-has-indeterminate:opacity-100"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</td>
|
|
<td
|
|
class="py-4 pr-3 text-sm font-medium whitespace-nowrap text-gray-900 group-has-checked:text-indigo-600"
|
|
>
|
|
Tom Cook
|
|
</td>
|
|
<td
|
|
class="px-3 py-4 text-sm whitespace-nowrap text-gray-500"
|
|
>
|
|
Director of Product
|
|
</td>
|
|
<td
|
|
class="px-3 py-4 text-sm whitespace-nowrap text-gray-500"
|
|
>
|
|
tom.cook@example.com
|
|
</td>
|
|
<td
|
|
class="px-3 py-4 text-sm whitespace-nowrap text-gray-500"
|
|
>
|
|
Member
|
|
</td>
|
|
<td
|
|
class="py-4 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-3"
|
|
>
|
|
<a
|
|
href="#"
|
|
class="text-indigo-600 hover:text-indigo-900"
|
|
>Edit<span class="sr-only"
|
|
>, Tom Cook</span
|
|
></a
|
|
>
|
|
</td>
|
|
</tr>
|
|
<tr class="group has-checked:bg-gray-50">
|
|
<td class="relative px-7 sm:w-12 sm:px-6">
|
|
<div
|
|
class="absolute inset-y-0 left-0 hidden w-0.5 bg-indigo-600 group-has-checked:block"
|
|
></div>
|
|
|
|
<div
|
|
class="group absolute top-1/2 left-4 -mt-2 grid size-4 grid-cols-1"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
class="col-start-1 row-start-1 appearance-none rounded-sm border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
|
|
/>
|
|
<svg
|
|
viewBox="0 0 14 14"
|
|
fill="none"
|
|
class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
|
|
>
|
|
<path
|
|
d="M3 8L6 11L11 3.5"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="opacity-0 group-has-checked:opacity-100"
|
|
/>
|
|
<path
|
|
d="M3 7H11"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="opacity-0 group-has-indeterminate:opacity-100"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</td>
|
|
<td
|
|
class="py-4 pr-3 text-sm font-medium whitespace-nowrap text-gray-900 group-has-checked:text-indigo-600"
|
|
>
|
|
Whitney Francis
|
|
</td>
|
|
<td
|
|
class="px-3 py-4 text-sm whitespace-nowrap text-gray-500"
|
|
>
|
|
Copywriter
|
|
</td>
|
|
<td
|
|
class="px-3 py-4 text-sm whitespace-nowrap text-gray-500"
|
|
>
|
|
whitney.francis@example.com
|
|
</td>
|
|
<td
|
|
class="px-3 py-4 text-sm whitespace-nowrap text-gray-500"
|
|
>
|
|
Admin
|
|
</td>
|
|
<td
|
|
class="py-4 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-3"
|
|
>
|
|
<a
|
|
href="#"
|
|
class="text-indigo-600 hover:text-indigo-900"
|
|
>Edit<span class="sr-only"
|
|
>, Whitney Francis</span
|
|
></a
|
|
>
|
|
</td>
|
|
</tr>
|
|
<tr class="group has-checked:bg-gray-50">
|
|
<td class="relative px-7 sm:w-12 sm:px-6">
|
|
<div
|
|
class="absolute inset-y-0 left-0 hidden w-0.5 bg-indigo-600 group-has-checked:block"
|
|
></div>
|
|
|
|
<div
|
|
class="group absolute top-1/2 left-4 -mt-2 grid size-4 grid-cols-1"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
class="col-start-1 row-start-1 appearance-none rounded-sm border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
|
|
/>
|
|
<svg
|
|
viewBox="0 0 14 14"
|
|
fill="none"
|
|
class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
|
|
>
|
|
<path
|
|
d="M3 8L6 11L11 3.5"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="opacity-0 group-has-checked:opacity-100"
|
|
/>
|
|
<path
|
|
d="M3 7H11"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="opacity-0 group-has-indeterminate:opacity-100"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</td>
|
|
<td
|
|
class="py-4 pr-3 text-sm font-medium whitespace-nowrap text-gray-900 group-has-checked:text-indigo-600"
|
|
>
|
|
Leonard Krasner
|
|
</td>
|
|
<td
|
|
class="px-3 py-4 text-sm whitespace-nowrap text-gray-500"
|
|
>
|
|
Senior Designer
|
|
</td>
|
|
<td
|
|
class="px-3 py-4 text-sm whitespace-nowrap text-gray-500"
|
|
>
|
|
leonard.krasner@example.com
|
|
</td>
|
|
<td
|
|
class="px-3 py-4 text-sm whitespace-nowrap text-gray-500"
|
|
>
|
|
Owner
|
|
</td>
|
|
<td
|
|
class="py-4 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-3"
|
|
>
|
|
<a
|
|
href="#"
|
|
class="text-indigo-600 hover:text-indigo-900"
|
|
>Edit<span class="sr-only"
|
|
>, Leonard Krasner</span
|
|
></a
|
|
>
|
|
</td>
|
|
</tr>
|
|
<tr class="group has-checked:bg-gray-50">
|
|
<td class="relative px-7 sm:w-12 sm:px-6">
|
|
<div
|
|
class="absolute inset-y-0 left-0 hidden w-0.5 bg-indigo-600 group-has-checked:block"
|
|
></div>
|
|
|
|
<div
|
|
class="group absolute top-1/2 left-4 -mt-2 grid size-4 grid-cols-1"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
class="col-start-1 row-start-1 appearance-none rounded-sm border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
|
|
/>
|
|
<svg
|
|
viewBox="0 0 14 14"
|
|
fill="none"
|
|
class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
|
|
>
|
|
<path
|
|
d="M3 8L6 11L11 3.5"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="opacity-0 group-has-checked:opacity-100"
|
|
/>
|
|
<path
|
|
d="M3 7H11"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="opacity-0 group-has-indeterminate:opacity-100"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</td>
|
|
<td
|
|
class="py-4 pr-3 text-sm font-medium whitespace-nowrap text-gray-900 group-has-checked:text-indigo-600"
|
|
>
|
|
Floyd Miles
|
|
</td>
|
|
<td
|
|
class="px-3 py-4 text-sm whitespace-nowrap text-gray-500"
|
|
>
|
|
Principal Designer
|
|
</td>
|
|
<td
|
|
class="px-3 py-4 text-sm whitespace-nowrap text-gray-500"
|
|
>
|
|
floyd.miles@example.com
|
|
</td>
|
|
<td
|
|
class="px-3 py-4 text-sm whitespace-nowrap text-gray-500"
|
|
>
|
|
Member
|
|
</td>
|
|
<td
|
|
class="py-4 pr-4 pl-3 text-right text-sm font-medium whitespace-nowrap sm:pr-3"
|
|
>
|
|
<a
|
|
href="#"
|
|
class="text-indigo-600 hover:text-indigo-900"
|
|
>Edit<span class="sr-only"
|
|
>, Floyd Miles</span
|
|
></a
|
|
>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|