kempo 4.2.10 → 4.2.11

package/dist/admin/accounts/groups/index.html

@@ -0,0 +1,378 @@
+<!--
+	owner: system
+	locked: true
+	name: 
+	author: 
+	created: 
+	updated: 
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="icon" type="image/png" sizes="48x48" href="/media/icon48.png">
+	<link rel="manifest" href="/manifest.json">
+	<title>Groups - Admin</title>
+	<link rel="stylesheet" href="/kempo-css/kempo.min.css">
+	<script src="/admin/init.js"></script>
+	
+</head>
+<body>
+	<!--
+	locked: true
+-->
+
+	<k-aside
+		main="push"
+		state="expanded"
+		style="--aside_padding: 0;"
+		persistent-id="admin-nav"
+	>
+		<k-aside-toggle>
+			<h3 class="m0">Kempo Admin</h3>
+		</k-aside-toggle>
+		<k-aside-item
+			icon="preview"
+			href="/"
+			no-expand
+		>Site</k-aside-item>
+		<k-aside-item
+			icon="cards"
+			href="/admin"
+			no-expand
+		>Dashboard</k-aside-item>
+		<k-aside-menu
+			icon="manage-accounts"
+			label="Accounts"
+		>
+			<k-aside-item
+				icon="person"
+				href="/admin/accounts/users"
+				no-expand
+			>Users</k-aside-item>
+			<k-aside-item
+				icon="group"
+				href="/admin/accounts/groups"
+				no-expand
+			>Groups</k-aside-item>
+			<k-aside-item
+				icon="lock"
+				href="/admin/accounts/permissions"
+				no-expand
+			>Permissions</k-aside-item>
+		</k-aside-menu>
+		<k-aside-menu
+			icon="cards_stack"
+			label="Content"
+		>
+			<k-aside-item
+				icon="browse"
+				href="/admin/content/templates"
+			>Templates</k-aside-item>
+			<k-aside-item
+				icon="docs"
+				href="/admin/content/pages"
+			>Pages</k-aside-item>
+			<k-aside-item
+				icon="content"
+				href="/admin/content/fragments"
+			>Fragments</k-aside-item>
+			<k-aside-item
+				icon="globe"
+				href="/admin/content/globals"
+			>Global Content</k-aside-item>
+		</k-aside-menu>
+		<k-aside-item
+			icon="settings"
+			href="/admin/settings"
+			no-expand
+		>Settings</k-aside-item>
+		<k-aside-item
+			icon="extension"
+			href="/admin/extensions"
+			no-expand
+		>Extensions</k-aside-item>
+		<hr>
+		<k-aside-spacer></k-aside-spacer>
+		<k-theme-switcher
+			labels
+			style="--padding:var(--spacer_h);margin:var(--spacer_h) auto"
+		></k-theme-switcher>
+	</k-aside>
+	<script type="module">
+		import '/kempo-ui/components/ThemeSwitcher.js';
+		const items = document.querySelectorAll('k-aside-item');
+		const currentPath = window.location.pathname;
+
+		items.forEach(item => {
+			const href = item.getAttribute('href');
+			if (!href) return;
+			const isExact = href === '/admin' || href === '/';
+			const match = isExact
+				? (currentPath === href || currentPath === href + '/')
+				: (currentPath === href || currentPath.startsWith(href + '/'));
+			if (match) {
+				item.setAttribute('active', '');
+				const menu = item.closest('k-aside-menu');
+				if (menu) menu.setAttribute('open', '');
+			}
+		});
+	</script>
+
+	<k-main>
+		
+<script type="module" src="/kempo-ui/components/Table.js"></script>
+<script type="module" src="/kempo-ui/components/tableControls/FirstPage.js"></script>
+<script type="module" src="/kempo-ui/components/tableControls/PrevPage.js"></script>
+<script type="module" src="/kempo-ui/components/tableControls/NextPage.js"></script>
+<script type="module" src="/kempo-ui/components/tableControls/LastPage.js"></script>
+<script type="module" src="/kempo-ui/components/tableControls/PageSelect.js"></script>
+<script type="module" src="/kempo-ui/components/tableControls/PageSize.js"></script>
+<script type="module" src="/kempo-ui/components/tableControls/Edit.js"></script>
+<script type="module" src="/kempo-ui/components/tableControls/DeleteRecord.js"></script>
+<script type="module" src="/kempo-ui/components/tableControls/DeleteSelected.js"></script>
+<script type="module" src="/admin/components/TableRowLink.js"></script>
+<script type="module" src="/kempo/components/Permission.js"></script>
+
+		<div class="d-f mb" style="align-items: center; gap: var(--spacer);">
+			<h1 class="flex mb0">Groups</h1>
+			<k-permission has="system:group:create">
+				<button id="createGroupBtn" class="primary">Create Group</button>
+			</k-permission>
+		</div>
+
+		<h2>Custom Groups</h2>
+		<k-table id="customTable" enable-pages page-size="10" page-size-options="[10,25,50]" placeholder="No custom groups have been created yet.">
+			<admin-table-row-link slot="before" url-pattern="/admin/accounts/groups/{name}" field-name="name"></admin-table-row-link>
+			<div slot="top" class="d-f full" style="align-items: center;">
+				<div>
+					<k-permission has="system:group:delete">
+						<k-tc-delete-selected></k-tc-delete-selected>
+					</k-permission>
+				</div>
+			</div>
+			<div class="d-f full" style="align-items: center;">
+				<div>
+					<k-tc-first-page></k-tc-first-page>
+					<k-tc-prev-page></k-tc-prev-page>
+					<k-tc-next-page></k-tc-next-page>
+					<k-tc-last-page></k-tc-last-page>
+				</div>
+				<div class="flex"></div>
+				<div><k-tc-page-select></k-tc-page-select></div>
+				<div class="flex"></div>
+				<div><k-tc-page-size></k-tc-page-size></div>
+			</div>
+		</k-table>
+
+		<h2>Extension Groups</h2>
+		<k-table id="extensionTable" enable-pages page-size="10" page-size-options="[10,25,50]" placeholder="No extension groups found.">
+			<admin-table-row-link slot="before" url-pattern="/admin/accounts/groups/{name}" field-name="name"></admin-table-row-link>
+			<div class="d-f full" style="align-items: center;">
+				<div>
+					<k-tc-first-page></k-tc-first-page>
+					<k-tc-prev-page></k-tc-prev-page>
+					<k-tc-next-page></k-tc-next-page>
+					<k-tc-last-page></k-tc-last-page>
+				</div>
+				<div class="flex"></div>
+				<div><k-tc-page-select></k-tc-page-select></div>
+				<div class="flex"></div>
+				<div><k-tc-page-size></k-tc-page-size></div>
+			</div>
+		</k-table>
+
+		<h2>System Groups</h2>
+		<k-table id="systemTable" enable-pages page-size="10" page-size-options="[10,25,50]" placeholder="No system groups found.">
+			<admin-table-row-link slot="before" url-pattern="/admin/accounts/groups/{name}" field-name="name"></admin-table-row-link>
+			<div class="d-f full" style="align-items: center;">
+				<div>
+					<k-tc-first-page></k-tc-first-page>
+					<k-tc-prev-page></k-tc-prev-page>
+					<k-tc-next-page></k-tc-next-page>
+					<k-tc-last-page></k-tc-last-page>
+				</div>
+				<div class="flex"></div>
+				<div><k-tc-page-select></k-tc-page-select></div>
+				<div class="flex"></div>
+				<div><k-tc-page-size></k-tc-page-size></div>
+			</div>
+		</k-table>
+
+		<script type="module">
+			import { listGroups, createGroup, updateGroup, deleteGroups, getAllCurrentUserPermissions } from '/kempo/sdk.js';
+			import { html } from '/kempo-ui/lit-all.min.js';
+			import Toast from '/kempo-ui/components/Toast.js';
+			import Dialog from '/kempo-ui/components/Dialog.js';
+
+			await window.customElements.whenDefined('k-table');
+
+			const [, permData] = await getAllCurrentUserPermissions();
+			const myPerms = new Set(permData?.permissions ?? []);
+			const canEdit = myPerms.has('system:group:update');
+			const canDelete = myPerms.has('system:group:delete');
+
+			const fields = [
+				{
+					name: 'groupName',
+					label: 'Name',
+					size: 300,
+					editable: false,
+					calculator: r => r.name.includes(':') ? r.name.split(':').slice(1).join(':') : r.name
+				},
+				{ name: 'description', label: 'Description', editable: canEdit },
+				{
+					name: 'createdAt',
+					label: 'Created',
+					formatter: v => new Date(v).toLocaleString(),
+					size: 208,
+					editable: false
+				}
+			];
+
+			const customFields = [
+				{ name: 'groupName', label: 'Name', size: 300, editable: canEdit },
+				{ name: 'description', label: 'Description', editable: canEdit },
+				{
+					name: 'createdAt',
+					label: 'Created',
+					formatter: v => new Date(v).toLocaleString(),
+					size: 208,
+					editable: false
+				}
+			];
+
+			const addGroupName = r => ({ ...r, groupName: r.name.includes(':') ? r.name.split(':').slice(1).join(':') : r.name });
+
+			const setupTable = ($table, owner, loadFn) => {
+				if(canEdit && owner !== 'system') { // Prevent editor control for system groups
+					$table.setAttribute('request-edit', '');
+					const edit = document.createElement('k-tc-edit');
+					edit.setAttribute('slot', 'after');
+					$table.appendChild(edit);
+				}
+
+				if(canDelete && owner === 'custom'){
+					$table.setAttribute('request-delete', '');
+					$table.setAttribute('enable-selection', '');
+					const del = document.createElement('k-tc-delete-record');
+					del.setAttribute('slot', 'after');
+					$table.appendChild(del);
+				}
+
+				$table.addEventListener('requestSave', async ({ detail: { record, newData, approve, reject } }) => {
+					const patch = { name: record.name, description: newData.description };
+					if(owner === 'custom' && newData.groupName !== undefined && newData.groupName !== record.groupName){
+						patch.newName = `custom:${newData.groupName}`;
+					}
+					const [error] = await updateGroup(patch);
+					if(error){
+						reject();
+						Toast.error(error.msg || 'Failed to update group');
+						return;
+					}
+					approve();
+					if(patch.newName) loadFn();
+					Toast.success('Group updated');
+				});
+
+				if(owner === 'custom'){
+					$table.addEventListener('requestDelete', ({ detail: { records, approve, reject } }) => {
+						const displayName = r => r.name.includes(':') ? r.name.split(':').slice(1).join(':') : r.name;
+						const count = records.length;
+						const msg = count === 1
+							? `<div class="p"><p>Delete "${displayName(records[0])}"? This action cannot be undone.</p></div>`
+							: `<div class="p"><p>Delete ${count} groups? This action cannot be undone.</p></div>`;
+						Dialog.confirm(msg, async (confirmed) => {
+							if(!confirmed){ reject(); return; }
+							const [error] = await deleteGroups(records.map(r => r.name));
+							if(error){
+								reject();
+								Toast.error(error.msg || 'Failed to delete');
+								return;
+							}
+							approve();
+							Toast.success(count === 1 ? 'Group deleted' : `${count} groups deleted`);
+							loadFn();
+						});
+					});
+				}
+			};
+
+			const loadTable = async ($table, owner) => {
+				const [error, data] = await listGroups({ owner });
+				if(error){
+					Toast.error(error.msg || 'Failed to load groups');
+					return;
+				}
+				const isCustom = owner === 'custom';
+				const records = isCustom ? data.groups.map(addGroupName) : data.groups;
+				$table.setData({ records, fields: isCustom ? customFields : fields });
+				$table.setupFetchRecords(data.total, async (start, count) => {
+					const [err, d] = await listGroups({ limit: count, offset: start, owner });
+					if(err) return [];
+					return isCustom ? d.groups.map(addGroupName) : d.groups;
+				});
+			};
+
+			const $customTable = document.getElementById('customTable');
+			const $extensionTable = document.getElementById('extensionTable');
+			const $systemTable = document.getElementById('systemTable');
+
+			setupTable($customTable, 'custom', () => loadTable($customTable, 'custom'));
+			setupTable($extensionTable, 'extension', () => loadTable($extensionTable, 'extension'));
+			setupTable($systemTable, 'system', () => loadTable($systemTable, 'system'));
+
+			await Promise.all([
+				loadTable($customTable, 'custom'),
+				loadTable($extensionTable, 'extension'),
+				loadTable($systemTable, 'system')
+			]);
+
+			if(myPerms.has('system:group:create')){
+				document.getElementById('createGroupBtn').addEventListener('click', () => {
+					const $dialog = Dialog.create(html`
+						<div class="p">
+							<div class="mb">
+								<label class="d-b mb-sm">Name</label>
+								<input type="text" id="dlg-name" class="full" required>
+							</div>
+							<div>
+								<label class="d-b mb-sm">Description</label>
+								<input type="text" id="dlg-description" class="full">
+							</div>
+						</div>
+					`, {
+						title: 'Create Group',
+						confirmText: 'Create',
+						confirmAction: async () => {
+							const name = $dialog.querySelector('#dlg-name').value.trim();
+							const description = $dialog.querySelector('#dlg-description').value.trim();
+							if(!name){
+								Toast.error('Group name is required');
+								return;
+							}
+							if(name.includes(':')){
+								Toast.error('Group name cannot contain ":"');
+								return;
+							}
+							const [error] = await createGroup({ name, description });
+							if(error){
+								Toast.error(error.msg || 'Failed to create group');
+								return;
+							}
+							Toast.success('Group created');
+							loadTable($customTable, 'custom');
+						},
+						cancelText: 'Cancel'
+					});
+				});
+			}
+		</script>
+
+
+	</k-main>
+	
+</body>
+</html>