kempo 4.9.5 → 4.9.7

package/dist/admin/accounts/groups/[name]/index.page.html

@@ -15,7 +15,7 @@
 <script type="module" src="/kempo-ui/components/controls/TcDeleteSelected.js"></script>
 <script type="module" src="/admin/components/tableControls/AddMember.js"></script>
 <script type="module" src="/admin/components/tableControls/AddPermission.js"></script>
-<script type="module" src="/admin/components/TableRowLink.js"></script>
+<script type="module" src="/kempo-ui/components/controls/TcOpen.js"></script>
 
 		<div class="mb d-f" style="align-items: flex-start; justify-content: space-between;">
 			<div>
@@ -63,8 +63,8 @@
 			<div class="card">
 				<h2>Members</h2>
 				<p id="usersMembersMsg" style="display:none">All users are automatically members of this group.</p>
-				<k-table id="membersTable" enable-pages page-size="10" page-size-options="[10,25,50]" placeholder="This group has no members.">
-					<admin-table-row-link slot="before" url-pattern="/admin/accounts/users/{id}" field-name="id"></admin-table-row-link>
+				<k-table id="membersTable" enable-pages page-size="10" page-size-options="[10,25,50]" placeholder="This group has no members." open-on-click>
+					<kc-tc-open slot="before"></kc-tc-open>
 					<kc-tc-delete-selected id="tcDeleteSelected" slot="top" style="display:none;"></kc-tc-delete-selected>
 					<admin-add-member id="tcAddMember" slot="top" style="display:none;"></admin-add-member>
 					<div class="d-f full" style="align-items: center;">
@@ -276,7 +276,7 @@
 							return;
 						}
 						$membersTable.setData({
-							records: data.members,
+							records: data.members.map(m => ({ ...m, _url: `/admin/accounts/users/${m.id}` })),
 							fields: [
 								{ name: 'name', label: 'Name' },
 								{ name: 'email', label: 'Email' },
@@ -290,7 +290,7 @@
 						$membersTable.setupFetchRecords(data.total, async (start, count) => {
 							const [err, d] = await getGroupMembers(groupName, { limit: count, offset: start });
 							if(err) return [];
-							return d.members;
+							return d.members.map(m => ({ ...m, _url: `/admin/accounts/users/${m.id}` }));
 						});
 					};
 

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

@@ -13,7 +13,7 @@
 <script type="module" src="/kempo-ui/components/controls/TcEdit.js"></script>
 <script type="module" src="/kempo-ui/components/controls/TcDeleteRecord.js"></script>
 <script type="module" src="/kempo-ui/components/controls/TcDeleteSelected.js"></script>
-<script type="module" src="/admin/components/TableRowLink.js"></script>
+<script type="module" src="/kempo-ui/components/controls/TcOpen.js"></script>
 <script type="module" src="/kempo/components/Permission.js"></script>
 
 		<div class="d-f mb" style="align-items: center; gap: var(--spacer);">
@@ -24,8 +24,8 @@
 		</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>
+		<k-table id="customTable" enable-pages page-size="10" page-size-options="[10,25,50]" placeholder="No custom groups have been created yet." open-on-click>
+			<kc-tc-open slot="before"></kc-tc-open>
 			<div slot="top" class="d-f full" style="align-items: center;">
 				<div>
 					<k-permission has="system:group:delete">
@@ -48,8 +48,8 @@
 		</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>
+		<k-table id="extensionTable" enable-pages page-size="10" page-size-options="[10,25,50]" placeholder="No extension groups found." open-on-click>
+			<kc-tc-open slot="before"></kc-tc-open>
 			<div class="d-f full" style="align-items: center;">
 				<div>
 					<kc-tc-first-page></kc-tc-first-page>
@@ -65,8 +65,8 @@
 		</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>
+		<k-table id="systemTable" enable-pages page-size="10" page-size-options="[10,25,50]" placeholder="No system groups found." open-on-click>
+			<kc-tc-open slot="before"></kc-tc-open>
 			<div class="d-f full" style="align-items: center;">
 				<div>
 					<kc-tc-first-page></kc-tc-first-page>
@@ -126,6 +126,8 @@
 
 			const addGroupName = r => ({ ...r, groupName: r.name.includes(':') ? r.name.split(':').slice(1).join(':') : r.name });
 
+			const withUrl = r => ({ ...r, _url: `/admin/accounts/groups/${r.name}` });
+
 			const setupTable = ($table, owner, loadFn) => {
 				if(canEdit && owner !== 'system') { // Prevent editor control for system groups
 					$table.setAttribute('request-edit', '');
@@ -188,12 +190,12 @@
 					return;
 				}
 				const isCustom = owner === 'custom';
-				const records = isCustom ? data.groups.map(addGroupName) : data.groups;
-				$table.setData({ records, fields: isCustom ? customFields : fields });
+				const toRecord = isCustom ? r => withUrl(addGroupName(r)) : withUrl;
+				$table.setData({ records: data.groups.map(toRecord), 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;
+					return d.groups.map(toRecord);
 				});
 			};
 

package/dist/admin/accounts/permissions/index.page.html

@@ -111,7 +111,7 @@
 						return parts.length >= 3 ? parts.slice(2).join(':') : '';
 					}
 				},
-				{ name: 'description', label: 'Description', size: 360, editable: canManage },
+				{ name: 'description', label: 'Description', editable: canManage },
 				{
 					name: 'createdAt',
 					label: 'Created',

package/dist/admin/accounts/users/[id]/index.page.html

@@ -5,6 +5,7 @@
 <content>
 <script type="module" src="/kempo-ui/components/Toggle.js"></script>
 <script type="module" src="/kempo-ui/components/Icon.js"></script>
+<script type="module" src="/kempo-ui/components/Tabs.js"></script>
 <script type="module" src="/kempo-ui/components/Table.js"></script>
 <script type="module" src="/kempo-ui/components/controls/TcFirstPage.js"></script>
 <script type="module" src="/kempo-ui/components/controls/TcPrevPage.js"></script>
@@ -17,7 +18,7 @@
 <script type="module" src="/admin/components/GroupDeleteSelected.js"></script>
 <script type="module" src="/admin/components/AddGroupControl.js"></script>
 <script type="module" src="/admin/components/ClearExpiredSessionsControl.js"></script>
-<script type="module" src="/admin/components/TableRowLink.js"></script>
+<script type="module" src="/kempo-ui/components/controls/TcOpen.js"></script>
 		<div class="d-f">
 			<div>
 				<a href="/admin/accounts/users" class="no-link mb">
@@ -38,69 +39,71 @@
 			<a href="/admin/accounts/users">Back to Users</a>
 		</div>
 		<div id="content" style="display: none;">
-
-			<!-- User Information -->
-			<div class="card">
-				<h2>Information</h2>
-				<div class="d-f mb" style="align-items: center; gap: var(--spacer);">
-					<label for="userName" style="min-width: 120px;"><strong>Name</strong></label>
-					<input type="text" id="userName" style="max-width: 400px;">
-				</div>
-				<div class="d-f mb" style="align-items: center; gap: var(--spacer);">
-					<label for="userEmail" style="min-width: 120px;"><strong>Email</strong></label>
-					<input type="email" id="userEmail" style="max-width: 400px;">
-				</div>
-				<div class="d-f mb" style="align-items: center; gap: var(--spacer);">
-					<label style="min-width: 120px;"><strong>Verified</strong></label>
-					<k-toggle id="emailVerified"></k-toggle>
-				</div>
-				<div class="d-f mb" style="align-items: center; gap: var(--spacer);">
-					<label style="min-width: 120px;"><strong>Created</strong></label>
-					<span id="userCreatedAt"></span>
-				</div>
-			</div>
-
-			<!-- Groups -->
-			<div class="card">
-				<h2>Groups</h2>
-				<k-table id="groupsTable" request-delete placeholder="Not a member of any groups.">
-					<admin-table-row-link slot="before" url-pattern="/admin/accounts/groups/{name}" field-name="name"></admin-table-row-link>
-					<kc-tc-delete-record slot="after"></kc-tc-delete-record>
-					<div slot="top" id="groupsTableTop" class="d-f full" style="display:none; align-items: center;">
-						<div><admin-group-delete-selected></admin-group-delete-selected></div>
-						<div class="flex"></div>
-						<div><admin-add-group-control id="addGroupBtn"></admin-add-group-control></div>
+			<k-tabs id="userTabs" active="information" hash-routing>
+				<k-tab for="information">Information</k-tab>
+				<k-tab for="groups">Groups</k-tab>
+				<k-tab for="sessions">Sessions</k-tab>
+
+				<k-tab-content name="information">
+					<div class="d-f mb" style="align-items: center; gap: var(--spacer);">
+						<label for="userName" style="min-width: 120px;"><strong>Name</strong></label>
+						<input type="text" id="userName" style="max-width: 400px;">
 					</div>
-				</k-table>
-			</div>
-
-			<!-- Sessions -->
-			<div class="card">
-				<h2>Sessions</h2>
-				<k-table id="sessionsTable" enable-pages page-size="10" page-size-options="[10,25,50]" placeholder="No active sessions.">
-					<kc-tc-delete-record slot="after"></kc-tc-delete-record>
-					<div slot="top" class="d-f full" style="align-items: center;">
-						<div><kc-tc-delete-selected></kc-tc-delete-selected></div>
-						<div class="flex"></div>
-						<div><admin-clear-expired-sessions id="clearExpiredBtn" style="display:none;"></admin-clear-expired-sessions></div>
+					<div class="d-f mb" style="align-items: center; gap: var(--spacer);">
+						<label for="userEmail" style="min-width: 120px;"><strong>Email</strong></label>
+						<input type="email" id="userEmail" style="max-width: 400px;">
 					</div>
-					<div class="d-f full" style="align-items: center;">
-						<div>
-							<kc-tc-first-page></kc-tc-first-page>
-							<kc-tc-prev-page></kc-tc-prev-page>
-							<kc-tc-next-page></kc-tc-next-page>
-							<kc-tc-last-page></kc-tc-last-page>
-						</div>
-						<div class="flex"></div>
-						<div><kc-tc-page-select></kc-tc-page-select></div>
-						<div class="flex"></div>
-						<div><kc-tc-page-size></kc-tc-page-size></div>
+					<div class="d-f mb" style="align-items: center; gap: var(--spacer);">
+						<label style="min-width: 120px;"><strong>Verified</strong></label>
+						<k-toggle id="emailVerified"></k-toggle>
 					</div>
-				</k-table>
-			</div>
+					<div class="d-f mb" style="align-items: center; gap: var(--spacer);">
+						<label style="min-width: 120px;"><strong>Created</strong></label>
+						<span id="userCreatedAt"></span>
+					</div>
+				</k-tab-content>
+
+				<k-tab-content name="groups">
+					<k-table id="groupsTable" request-delete placeholder="Not a member of any groups." open-on-click>
+						<kc-tc-open slot="before"></kc-tc-open>
+						<kc-tc-delete-record slot="after"></kc-tc-delete-record>
+						<div slot="top" id="groupsTableTop" class="d-f full" style="display:none; align-items: center;">
+							<div><admin-group-delete-selected></admin-group-delete-selected></div>
+							<div class="flex"></div>
+							<div><admin-add-group-control id="addGroupBtn"></admin-add-group-control></div>
+						</div>
+					</k-table>
+				</k-tab-content>
+
+				<k-tab-content name="sessions">
+					<k-table id="sessionsTable" enable-pages page-size="10" page-size-options="[10,25,50]" placeholder="No active sessions.">
+						<kc-tc-delete-record slot="after"></kc-tc-delete-record>
+						<div slot="top" class="d-f full" style="align-items: center;">
+							<div><kc-tc-delete-selected></kc-tc-delete-selected></div>
+							<div class="flex"></div>
+							<div><admin-clear-expired-sessions id="clearExpiredBtn" style="display:none;"></admin-clear-expired-sessions></div>
+						</div>
+						<div class="d-f full" style="align-items: center;">
+							<div>
+								<kc-tc-first-page></kc-tc-first-page>
+								<kc-tc-prev-page></kc-tc-prev-page>
+								<kc-tc-next-page></kc-tc-next-page>
+								<kc-tc-last-page></kc-tc-last-page>
+							</div>
+							<div class="flex"></div>
+							<div><kc-tc-page-select></kc-tc-page-select></div>
+							<div class="flex"></div>
+							<div><kc-tc-page-size></kc-tc-page-size></div>
+						</div>
+					</k-table>
+				</k-tab-content>
 
+				<location name="admin-user-tabs" />
+			</k-tabs>
 		</div>
 
+		<location name="admin-user-scripts" />
+
 		<script type="module">
 			import {
 				getSession, getUser, updateUser, deleteUsers,
@@ -260,6 +263,7 @@
 
 				await customElements.whenDefined('k-table');
 				const $groupsTable = document.getElementById('groupsTable');
+				const toRecord = g => ({ ...g, _url: `/admin/accounts/groups/${g.name}` });
 
 				if(canEditGroups){
 					$groupsTable.setAttribute('enable-selection', '');
@@ -308,13 +312,13 @@
 						return;
 					}
 					$groupsTable.setData({
-						records: data.groups,
+						records: data.groups.map(toRecord),
 						fields: [{ name: 'name', label: 'Name' }]
 					});
 					$groupsTable.setupFetchRecords(data.total, async (start, count) => {
 						const [err, d] = await getUserGroups(userid, { limit: count, offset: start });
 						if(err) return [];
-						return d.groups;
+						return d.groups.map(toRecord);
 					});
 				};
 
@@ -347,8 +351,6 @@
 					});
 				});
 
-				loadGroups();
-
 				/*
 					Sessions
 				*/
@@ -420,7 +422,23 @@
 					});
 				};
 
-				loadSessions();
+				/*
+					Each tab loads its data the first time it is opened, so a visit that never leaves Information makes no queries.
+				*/
+
+				const $userTabs = document.getElementById('userTabs');
+				const shownTabs = new Set();
+				const loaders = { groups: loadGroups, sessions: loadSessions };
+
+				$userTabs.addEventListener('tabfirstshown', ({ detail }) => {
+					shownTabs.add(detail.tab);
+					loaders[detail.tab]?.();
+				});
+
+				// The tab the address opened on was chosen before this listener existed, so it is loaded here.
+				await $userTabs.updateComplete;
+				const opening = $userTabs.active;
+				if(loaders[opening] && !shownTabs.has(opening)) loaders[opening]();
 			}
 		</script>
 

package/dist/admin/accounts/users/index.page.html

@@ -49,7 +49,7 @@
 ></script>
 <script
 	type="module"
-	src="/admin/components/TableRowLink.js"
+	src="/kempo-ui/components/controls/TcOpen.js"
 ></script>
 <script
 	type="module"
@@ -74,12 +74,9 @@
 	page-size-options="[10,25,50]"
 	placeholder="No users found."
 	filtered-placeholder="No users match your search."
+		open-on-click
 >
-	<admin-table-row-link
-		slot="before"
-		url-pattern="/admin/accounts/users/{id}"
-		field-name="id"
-	></admin-table-row-link>
+	<kc-tc-open slot="before"></kc-tc-open>
 	<div
 		slot="top"
 		class="d-f full"
@@ -118,6 +115,7 @@
 	import Dialog from '/kempo-ui/components/Dialog.js';
 	await window.customElements.whenDefined('k-table');
 	const $table = document.getElementById('usersTable');
+	const withUrl = u => ({ ...u, _url: `/admin/accounts/users/${u.id}` });
 
 	const [, permData] = await getAllCurrentUserPermissions();
 	const myPerms = new Set(permData?.permissions ?? []);
@@ -141,9 +139,9 @@
 		const [error, data] = await getUsers({ limit: 10, offset: 0 });
 		if (error) return;
 		$table.setData({
-			records: data.users,
+			records: data.users.map(withUrl),
 			fields: [
-				{ name: 'name', label: 'Name', size: 352, editable: true },
+				{ name: 'name', label: 'Name', editable: true },
 				{ name: 'email', label: 'Email', size: 352, editable: true },
 				{
 					name: 'emailVerified',
@@ -170,7 +168,7 @@
 		$table.setupFetchRecords(data.total, async (start, count) => {
 			const [err, d] = await getUsers({ limit: count, offset: start });
 			if (err) return [];
-			return d.users;
+			return d.users.map(withUrl);
 		});
 	};
 

package/dist/admin/components/EmailTemplates.js

@@ -1,25 +1,17 @@
-import t from"/kempo-ui/components/ShadowComponent.js";import{html as e,nothing as i}from"/kempo-ui/lit-all.min.js";import"/kempo-ui/components/Spinner.js";import"/kempo-ui/components/Icon.js";import"/kempo-ui/components/Dialog.js";import"/kempo-ui/components/CodeEditor.js";import s from"/kempo-ui/components/Toast.js";import{listEmailTemplates as a,getEmailTemplate as o,saveEmailTemplate as r,resetEmailTemplate as n}from"/kempo/sdk.js";export default class l extends t{static properties={owner:{type:String},previewUrl:{type:String,attribute:"preview-url"},templates:{state:!0},error:{state:!0},editing:{state:!0},saving:{state:!0}};constructor(){super(),this.owner="",this.previewUrl="/kempo/api/email-templates/preview",this.templates=null,this.error="",this.editing=null,this.saving=!1}connectedCallback(){super.connectedCallback(),this.load()}load=async()=>{const[t,e]=await a(this.owner);t?this.error=t.msg:this.templates=e.templates};edit=async t=>{const[e,i]=await o(t);e?s.error(e.msg):(this.editing=i,await this.updateComplete,this.renderRoot.querySelector("#emailDialog").open())};confirmSave=t=>{t.keepDialogOpen=!0,this.save()};save=async()=>{this.saving=!0;const[t]=await r({template:this.editing.template,source:this.renderRoot.querySelector("#emailEditor").value});this.saving=!1,t?s.error(t.msg):(this.renderRoot.querySelector("#emailDialog").close(),s.success("Email template saved"),await this.load())};reset=async()=>{this.saving=!0;const[t]=await n(this.editing.template);this.saving=!1,t?s.error(t.msg):(this.renderRoot.querySelector("#emailDialog").close(),s.success("Email template reset to the default"),await this.load())};renderDialog(){const t=this.editing;return t?e`
+import e from"/kempo-ui/components/ShadowComponent.js";import{html as t,nothing as i}from"/kempo-ui/lit-all.min.js";import"/kempo-ui/components/Spinner.js";import"/kempo-ui/components/Icon.js";import"/kempo-ui/components/Dialog.js";import"/kempo-ui/components/CodeEditor.js";import"/kempo-ui/components/Table.js";import"/kempo-ui/components/controls/TcOpen.js";import"/admin/components/tableControls/EditEmailTemplate.js";import s from"/kempo-ui/components/Toast.js";import{listEmailTemplates as a,getEmailTemplate as o,saveEmailTemplate as l,resetEmailTemplate as r}from"/kempo/sdk.js";const n=[{name:"title",label:"Email",editable:!1,calculator:e=>e.title||e.name},{name:"template",label:"Template",size:260,editable:!1,calculator:e=>e.template},{name:"status",label:"Status",size:130,editable:!1,calculator:e=>e.overridden?"Customized":"Default"}];export default class m extends e{static properties={owner:{type:String},previewUrl:{type:String,attribute:"preview-url"},templates:{state:!0},error:{state:!0},editing:{state:!0},saving:{state:!0}};constructor(){super(),this.owner="",this.previewUrl="/kempo/api/email-templates/preview",this.templates=null,this.error="",this.editing=null,this.saving=!1}connectedCallback(){super.connectedCallback();const e=this.closest("k-tab-content");!e||e.active?this.load():this.closest("k-tabs")?.addEventListener("tabfirstshown",({detail:t})=>{t.tab===e.name&&this.load()})}load=async()=>{const[e,t]=await a(this.owner);e?this.error=e.msg:this.templates=t.templates};edit=async e=>{const[t,i]=await o(e);t?s.error(t.msg):(this.editing=i,await this.updateComplete,this.renderRoot.querySelector("#emailDialog").open())};confirmSave=e=>{e.keepDialogOpen=!0,this.save()};save=async()=>{this.saving=!0;const[e]=await l({template:this.editing.template,source:this.renderRoot.querySelector("#emailEditor").value});this.saving=!1,e?s.error(e.msg):(this.renderRoot.querySelector("#emailDialog").close(),s.success("Email template saved"),await this.load())};reset=async()=>{this.saving=!0;const[e]=await r(this.editing.template);this.saving=!1,e?s.error(e.msg):(this.renderRoot.querySelector("#emailDialog").close(),s.success("Email template reset to the default"),await this.load())};renderDialog(){const e=this.editing;return e?t`
       <k-dialog id="emailDialog" style="--width: 60rem;" confirm-text=${this.saving?"Saving…":"Save"} confirm-classes="primary ml" cancel-text="Cancel" .confirmAction=${this.confirmSave}>
-        <h2 slot="title" class="h5 pyh px m0">${t.title||t.name}</h2>
+        <h2 slot="title" class="h5 pyh px m0">${e.title||e.name}</h2>
         <div class="p">
-          <p class="tc-muted mb">${t.template}. Saving keeps your copy in <strong>templates/emails</strong>, which is used from the next email and is not changed by updates. A template that does not render is not saved.</p>
-          <k-code-editor id="emailEditor" class="r b mb" language="html" .value=${t.source} style="height: 55vh; min-height: 300px;"></k-code-editor>
-          ${t.overridden?e`<button type="button" class="danger" ?disabled=${this.saving} @click=${this.reset}>Reset to default</button>`:i}
+          <p class="tc-muted mb">${e.template}. Saving keeps your copy in <strong>templates/emails</strong>, which is used from the next email and is not changed by updates. A template that does not render is not saved.</p>
+          <k-code-editor id="emailEditor" class="r b mb" language="html" .value=${e.source} style="height: 55vh; min-height: 300px;"></k-code-editor>
+          ${e.overridden?t`<button type="button" class="danger" ?disabled=${this.saving} @click=${this.reset}>Reset to default</button>`:i}
         </div>
       </k-dialog>
-    `:i}render(){return this.error?e`<p class="tc-danger" role="alert">${this.error}</p>`:this.templates?this.templates.length?e`
-      <table class="mb">
-        <thead><tr><th>Email</th><th>Template</th><th>Status</th><th></th></tr></thead>
-        <tbody>${this.templates.map(t=>e`<tr>
-          <td>${t.title||t.name}</td>
-          <td class="tc-muted">${t.template}</td>
-          <td>${t.overridden?e`<span class="tc-warning">Customized</span>`:e`<span class="tc-muted">Default</span>`}</td>
-          <td class="ta-right">
-            <a class="btn" href=${`${this.previewUrl}?template=${encodeURIComponent(t.template)}`} target="email-preview">Preview</a>
-            <button aria-label="Edit" title="Edit" @click=${()=>this.edit(t.template)}><k-icon name="edit"></k-icon></button>
-          </td>
-        </tr>`)}</tbody>
-      </table>
+    `:i}updated(e){if(!e.has("templates")&&!e.has("previewUrl"))return;const t=this.renderRoot.querySelector("k-table");t&&this.templates&&t.setData({records:this.templates.map(e=>({...e,_url:`${this.previewUrl}?template=${encodeURIComponent(e.template)}`})),fields:n})}render(){return this.error?t`<p class="tc-danger" role="alert">${this.error}</p>`:this.templates?this.templates.length?t`
+      <k-table class="mb" placeholder="There are no email templates here." @editTemplate=${e=>this.edit(e.detail.record.template)}>
+        <kc-tc-open slot="after" target="_blank" title="Preview"></kc-tc-open>
+        <admin-edit-email-template slot="after"></admin-edit-email-template>
+      </k-table>
       ${this.renderDialog()}
-    `:e`<p class="tc-muted">There are no email templates here.</p>`:e`<k-spinner></k-spinner>`}}customElements.define("k-email-templates",l);
+    `:t`<p class="tc-muted">There are no email templates here.</p>`:t`<k-spinner></k-spinner>`}}customElements.define("k-email-templates",m);
 //# sourceMappingURL=C:\Users\dusti\dev\kempo\dist\admin\components\EmailTemplates.js.map

package/dist/admin/components/EmailTemplates.js.map

@@ -1 +1 @@
-{"version":3,"file":"src\\admin\\components\\EmailTemplates.js","names":["ShadowComponent","html","nothing","Toast","listEmailTemplates","getEmailTemplate","saveEmailTemplate","resetEmailTemplate","EmailTemplates","static","owner","type","String","previewUrl","attribute","templates","state","error","editing","saving","constructor","super","this","connectedCallback","load","async","data","msg","edit","found","template","updateComplete","renderRoot","querySelector","open","confirmSave","event","keepDialogOpen","save","source","value","close","success","reset","renderDialog","title","name","overridden","render","length","map","encodeURIComponent","customElements","define"],"sources":["0"],"sourcesContent":["import ShadowComponent from '/kempo-ui/components/ShadowComponent.js';\nimport { html, nothing } from '/kempo-ui/lit-all.min.js';\nimport '/kempo-ui/components/Spinner.js';\nimport '/kempo-ui/components/Icon.js';\nimport '/kempo-ui/components/Dialog.js';\nimport '/kempo-ui/components/CodeEditor.js';\nimport Toast from '/kempo-ui/components/Toast.js';\nimport { listEmailTemplates, getEmailTemplate, saveEmailTemplate, resetEmailTemplate } from '/kempo/sdk.js';\n\n/*\n  The email templates of one extension, to edit, served at /admin/components/EmailTemplates.js:\n\n    <script type=\"module\" src=\"/admin/components/EmailTemplates.js\"></script>\n    <k-email-templates owner=\"kempo-commerce\"></k-email-templates>\n\n  Without `owner` it lists kempo's own templates (verify-email, reset-password). Each row opens a dialog with the template in\n  a code editor. Saving writes the site's own copy to `templates/emails/<owner>/<name>.page.html`, which is used from the next\n  email on and survives updates of the extension; **Reset to default** removes it. The packaged template is never changed.\n\n  **Preview** opens the template as it would be sent, in one named tab that each preview replaces. By default that is kempo's\n  preview, which draws it with no data; an extension that can do better (its own orders as the data) serves its own and gives\n  its address as `preview-url`:\n\n    <k-email-templates owner=\"kempo-commerce\" preview-url=\"/commerce/api/emails/preview\"></k-email-templates>\n\n  The preview is the saved template, not what is being typed in the editor.\n  An extension puts this on its settings page; it needs no code of its own.\n*/\nexport default class EmailTemplates extends ShadowComponent {\n  static properties = {\n    owner: { type: String },\n    previewUrl: { type: String, attribute: 'preview-url' },\n    templates: { state: true },\n    error: { state: true },\n    editing: { state: true },\n    saving: { state: true },\n  };\n\n  constructor(){\n    super();\n    this.owner = '';\n    this.previewUrl = '/kempo/api/email-templates/preview';\n    this.templates = null;\n    this.error = '';\n    this.editing = null;\n    this.saving = false;\n  }\n\n  /*\n    Lifecycle\n  */\n  connectedCallback(){\n    super.connectedCallback();\n    this.load();\n  }\n\n  /*\n    Actions\n  */\n  load = async () => {\n    const [error, data] = await listEmailTemplates(this.owner);\n    if(error){\n      this.error = error.msg;\n      return;\n    }\n    this.templates = data.templates;\n  };\n\n  edit = async template => {\n    const [error, found] = await getEmailTemplate(template);\n    if(error){\n      Toast.error(error.msg);\n      return;\n    }\n    this.editing = found;\n    await this.updateComplete;\n    this.renderRoot.querySelector('#emailDialog').open();\n  };\n\n  /* The dialog's Save button: it stays open until the template is saved, so a template that does not render is not lost. */\n  confirmSave = event => {\n    event.keepDialogOpen = true;\n    this.save();\n  };\n\n  save = async () => {\n    this.saving = true;\n    const [error] = await saveEmailTemplate({ template: this.editing.template, source: this.renderRoot.querySelector('#emailEditor').value });\n    this.saving = false;\n    if(error){\n      Toast.error(error.msg);\n      return;\n    }\n    this.renderRoot.querySelector('#emailDialog').close();\n    Toast.success('Email template saved');\n    await this.load();\n  };\n\n  reset = async () => {\n    this.saving = true;\n    const [error] = await resetEmailTemplate(this.editing.template);\n    this.saving = false;\n    if(error){\n      Toast.error(error.msg);\n      return;\n    }\n    this.renderRoot.querySelector('#emailDialog').close();\n    Toast.success('Email template reset to the default');\n    await this.load();\n  };\n\n  /*\n    Rendering\n  */\n  renderDialog(){\n    const template = this.editing;\n    if(!template) return nothing;\n    return html`\n      <k-dialog id=\"emailDialog\" style=\"--width: 60rem;\" confirm-text=${this.saving ? 'Saving…' : 'Save'} confirm-classes=\"primary ml\" cancel-text=\"Cancel\" .confirmAction=${this.confirmSave}>\n        <h2 slot=\"title\" class=\"h5 pyh px m0\">${template.title || template.name}</h2>\n        <div class=\"p\">\n          <p class=\"tc-muted mb\">${template.template}. Saving keeps your copy in <strong>templates/emails</strong>, which is used from the next email and is not changed by updates. A template that does not render is not saved.</p>\n          <k-code-editor id=\"emailEditor\" class=\"r b mb\" language=\"html\" .value=${template.source} style=\"height: 55vh; min-height: 300px;\"></k-code-editor>\n          ${template.overridden ? html`<button type=\"button\" class=\"danger\" ?disabled=${this.saving} @click=${this.reset}>Reset to default</button>` : nothing}\n        </div>\n      </k-dialog>\n    `;\n  }\n\n  render(){\n    if(this.error) return html`<p class=\"tc-danger\" role=\"alert\">${this.error}</p>`;\n    if(!this.templates) return html`<k-spinner></k-spinner>`;\n    if(!this.templates.length) return html`<p class=\"tc-muted\">There are no email templates here.</p>`;\n    return html`\n      <table class=\"mb\">\n        <thead><tr><th>Email</th><th>Template</th><th>Status</th><th></th></tr></thead>\n        <tbody>${this.templates.map(template => html`<tr>\n          <td>${template.title || template.name}</td>\n          <td class=\"tc-muted\">${template.template}</td>\n          <td>${template.overridden ? html`<span class=\"tc-warning\">Customized</span>` : html`<span class=\"tc-muted\">Default</span>`}</td>\n          <td class=\"ta-right\">\n            <a class=\"btn\" href=${`${this.previewUrl}?template=${encodeURIComponent(template.template)}`} target=\"email-preview\">Preview</a>\n            <button aria-label=\"Edit\" title=\"Edit\" @click=${() => this.edit(template.template)}><k-icon name=\"edit\"></k-icon></button>\n          </td>\n        </tr>`)}</tbody>\n      </table>\n      ${this.renderDialog()}\n    `;\n  }\n}\n\ncustomElements.define('k-email-templates', EmailTemplates);\n"],"mappings":"OAAOA,MAAqB,yDACnBC,aAAMC,MAAe,iCACvB,wCACA,qCACA,uCACA,4CACAC,MAAW,6DACTC,sBAAoBC,uBAAkBC,wBAAmBC,MAA0B,+BAqB7E,MAAMC,UAAuBR,EAC1CS,kBAAoB,CAClBC,MAAO,CAAEC,KAAMC,QACfC,WAAY,CAAEF,KAAMC,OAAQE,UAAW,eACvCC,UAAW,CAAEC,OAAO,GACpBC,MAAO,CAAED,OAAO,GAChBE,QAAS,CAAEF,OAAO,GAClBG,OAAQ,CAAEH,OAAO,IAGnB,WAAAI,GACEC,QACAC,KAAKZ,MAAQ,GACbY,KAAKT,WAAa,qCAClBS,KAAKP,UAAY,KACjBO,KAAKL,MAAQ,GACbK,KAAKJ,QAAU,KACfI,KAAKH,QAAS,CAChB,CAKA,iBAAAI,GACEF,MAAME,oBACND,KAAKE,MACP,CAKAA,KAAOC,UACL,MAAOR,EAAOS,SAActB,EAAmBkB,KAAKZ,OACjDO,EACDK,KAAKL,MAAQA,EAAMU,IAGrBL,KAAKP,UAAYW,EAAKX,WAGxBa,KAAOH,UACL,MAAOR,EAAOY,SAAexB,EAAiByB,GAC3Cb,EACDd,EAAMc,MAAMA,EAAMU,MAGpBL,KAAKJ,QAAUW,QACTP,KAAKS,eACXT,KAAKU,WAAWC,cAAc,gBAAgBC,SAIhDC,YAAcC,IACZA,EAAMC,gBAAiB,EACvBf,KAAKgB,QAGPA,KAAOb,UACLH,KAAKH,QAAS,EACd,MAAOF,SAAeX,EAAkB,CAAEwB,SAAUR,KAAKJ,QAAQY,SAAUS,OAAQjB,KAAKU,WAAWC,cAAc,gBAAgBO,QACjIlB,KAAKH,QAAS,EACXF,EACDd,EAAMc,MAAMA,EAAMU,MAGpBL,KAAKU,WAAWC,cAAc,gBAAgBQ,QAC9CtC,EAAMuC,QAAQ,8BACRpB,KAAKE,SAGbmB,MAAQlB,UACNH,KAAKH,QAAS,EACd,MAAOF,SAAeV,EAAmBe,KAAKJ,QAAQY,UACtDR,KAAKH,QAAS,EACXF,EACDd,EAAMc,MAAMA,EAAMU,MAGpBL,KAAKU,WAAWC,cAAc,gBAAgBQ,QAC9CtC,EAAMuC,QAAQ,6CACRpB,KAAKE,SAMb,YAAAoB,GACE,MAAMd,EAAWR,KAAKJ,QACtB,OAAIY,EACG7B,CAAI;wEACyDqB,KAAKH,OAAS,UAAY,2EAA2EG,KAAKa;gDAClIL,EAASe,OAASf,EAASgB;;mCAExChB,EAASA;kFACsCA,EAASS;YAC/ET,EAASiB,WAAa9C,CAAI,kDAAkDqB,KAAKH,iBAAiBG,KAAKqB,kCAAoCzC;;;MAP9HA,CAWvB,CAEA,MAAA8C,GACE,OAAG1B,KAAKL,MAAchB,CAAI,qCAAqCqB,KAAKL,YAChEK,KAAKP,UACLO,KAAKP,UAAUkC,OACZhD,CAAI;;;iBAGEqB,KAAKP,UAAUmC,IAAIpB,GAAY7B,CAAI;gBACpC6B,EAASe,OAASf,EAASgB;iCACVhB,EAASA;gBAC1BA,EAASiB,WAAa9C,CAAI,6CAA+CA,CAAI;;kCAE3D,GAAGqB,KAAKT,uBAAuBsC,mBAAmBrB,EAASA;4DACjC,IAAMR,KAAKM,KAAKE,EAASA;;;;QAI7ER,KAAKsB;MAdyB3C,CAAI,6DADXA,CAAI,yBAiBjC,EAGFmD,eAAeC,OAAO,oBAAqB7C","ignoreList":[]}
+{"version":3,"file":"src\\admin\\components\\EmailTemplates.js","names":["ShadowComponent","html","nothing","Toast","listEmailTemplates","getEmailTemplate","saveEmailTemplate","resetEmailTemplate","fields","name","label","editable","calculator","template","title","size","overridden","EmailTemplates","static","owner","type","String","previewUrl","attribute","templates","state","error","editing","saving","constructor","super","this","connectedCallback","pane","closest","active","load","addEventListener","detail","tab","async","data","msg","edit","found","updateComplete","renderRoot","querySelector","open","confirmSave","event","keepDialogOpen","save","source","value","close","success","reset","renderDialog","updated","changed","has","$table","setData","records","map","_url","encodeURIComponent","render","length","record","customElements","define"],"sources":["0"],"sourcesContent":["import ShadowComponent from '/kempo-ui/components/ShadowComponent.js';\nimport { html, nothing } from '/kempo-ui/lit-all.min.js';\nimport '/kempo-ui/components/Spinner.js';\nimport '/kempo-ui/components/Icon.js';\nimport '/kempo-ui/components/Dialog.js';\nimport '/kempo-ui/components/CodeEditor.js';\nimport '/kempo-ui/components/Table.js';\nimport '/kempo-ui/components/controls/TcOpen.js';\nimport '/admin/components/tableControls/EditEmailTemplate.js';\nimport Toast from '/kempo-ui/components/Toast.js';\nimport { listEmailTemplates, getEmailTemplate, saveEmailTemplate, resetEmailTemplate } from '/kempo/sdk.js';\n\nconst fields = [\n  { name: 'title', label: 'Email', editable: false, calculator: template => template.title || template.name },\n  { name: 'template', label: 'Template', size: 260, editable: false, calculator: template => template.template },\n  { name: 'status', label: 'Status', size: 130, editable: false, calculator: template => template.overridden ? 'Customized' : 'Default' },\n];\n\n/*\n  The email templates of one extension, to edit, served at /admin/components/EmailTemplates.js:\n\n    <script type=\"module\" src=\"/admin/components/EmailTemplates.js\"></script>\n    <k-email-templates owner=\"kempo-commerce\"></k-email-templates>\n\n  Without `owner` it lists kempo's own templates (verify-email, reset-password). Each row opens a dialog with the template in\n  a code editor. Saving writes the site's own copy to `templates/emails/<owner>/<name>.page.html`, which is used from the next\n  email on and survives updates of the extension; **Reset to default** removes it. The packaged template is never changed.\n\n  **Preview** opens the template as it would be sent, in one named tab that each preview replaces. By default that is kempo's\n  preview, which draws it with no data; an extension that can do better (its own orders as the data) serves its own and gives\n  its address as `preview-url`:\n\n    <k-email-templates owner=\"kempo-commerce\" preview-url=\"/commerce/api/emails/preview\"></k-email-templates>\n\n  The preview is the saved template, not what is being typed in the editor.\n  An extension puts this on its settings page; it needs no code of its own.\n*/\nexport default class EmailTemplates extends ShadowComponent {\n  static properties = {\n    owner: { type: String },\n    previewUrl: { type: String, attribute: 'preview-url' },\n    templates: { state: true },\n    error: { state: true },\n    editing: { state: true },\n    saving: { state: true },\n  };\n\n  constructor(){\n    super();\n    this.owner = '';\n    this.previewUrl = '/kempo/api/email-templates/preview';\n    this.templates = null;\n    this.error = '';\n    this.editing = null;\n    this.saving = false;\n  }\n\n  /*\n    Lifecycle\n  */\n  connectedCallback(){\n    super.connectedCallback();\nconst pane = this.closest('k-tab-content');\n    // Loads when its tab is first opened, so a tab nobody opens makes no requests.\n    if(!pane || pane.active) this.load();\n    else this.closest('k-tabs')?.addEventListener('tabfirstshown', ({ detail }) => {\n      if(detail.tab === pane.name) this.load();\n    });\n  }\n\n  /*\n    Actions\n  */\n  load = async () => {\n    const [error, data] = await listEmailTemplates(this.owner);\n    if(error){\n      this.error = error.msg;\n      return;\n    }\n    this.templates = data.templates;\n  };\n\n  edit = async template => {\n    const [error, found] = await getEmailTemplate(template);\n    if(error){\n      Toast.error(error.msg);\n      return;\n    }\n    this.editing = found;\n    await this.updateComplete;\n    this.renderRoot.querySelector('#emailDialog').open();\n  };\n\n  /* The dialog's Save button: it stays open until the template is saved, so a template that does not render is not lost. */\n  confirmSave = event => {\n    event.keepDialogOpen = true;\n    this.save();\n  };\n\n  save = async () => {\n    this.saving = true;\n    const [error] = await saveEmailTemplate({ template: this.editing.template, source: this.renderRoot.querySelector('#emailEditor').value });\n    this.saving = false;\n    if(error){\n      Toast.error(error.msg);\n      return;\n    }\n    this.renderRoot.querySelector('#emailDialog').close();\n    Toast.success('Email template saved');\n    await this.load();\n  };\n\n  reset = async () => {\n    this.saving = true;\n    const [error] = await resetEmailTemplate(this.editing.template);\n    this.saving = false;\n    if(error){\n      Toast.error(error.msg);\n      return;\n    }\n    this.renderRoot.querySelector('#emailDialog').close();\n    Toast.success('Email template reset to the default');\n    await this.load();\n  };\n\n  /*\n    Rendering\n  */\n  renderDialog(){\n    const template = this.editing;\n    if(!template) return nothing;\n    return html`\n      <k-dialog id=\"emailDialog\" style=\"--width: 60rem;\" confirm-text=${this.saving ? 'Saving…' : 'Save'} confirm-classes=\"primary ml\" cancel-text=\"Cancel\" .confirmAction=${this.confirmSave}>\n        <h2 slot=\"title\" class=\"h5 pyh px m0\">${template.title || template.name}</h2>\n        <div class=\"p\">\n          <p class=\"tc-muted mb\">${template.template}. Saving keeps your copy in <strong>templates/emails</strong>, which is used from the next email and is not changed by updates. A template that does not render is not saved.</p>\n          <k-code-editor id=\"emailEditor\" class=\"r b mb\" language=\"html\" .value=${template.source} style=\"height: 55vh; min-height: 300px;\"></k-code-editor>\n          ${template.overridden ? html`<button type=\"button\" class=\"danger\" ?disabled=${this.saving} @click=${this.reset}>Reset to default</button>` : nothing}\n        </div>\n      </k-dialog>\n    `;\n  }\n\n  /* Refills the table whenever the list or the preview address changes. */\n  updated(changed){\n    if(!changed.has('templates') && !changed.has('previewUrl')) return;\n    const $table = this.renderRoot.querySelector('k-table');\n    if(!$table || !this.templates) return;\n    $table.setData({\n      records: this.templates.map(template => ({ ...template, _url: `${this.previewUrl}?template=${encodeURIComponent(template.template)}` })),\n      fields,\n    });\n  }\n\n  render(){\n    if(this.error) return html`<p class=\"tc-danger\" role=\"alert\">${this.error}</p>`;\n    if(!this.templates) return html`<k-spinner></k-spinner>`;\n    if(!this.templates.length) return html`<p class=\"tc-muted\">There are no email templates here.</p>`;\n    return html`\n      <k-table class=\"mb\" placeholder=\"There are no email templates here.\" @editTemplate=${event => this.edit(event.detail.record.template)}>\n        <kc-tc-open slot=\"after\" target=\"_blank\" title=\"Preview\"></kc-tc-open>\n        <admin-edit-email-template slot=\"after\"></admin-edit-email-template>\n      </k-table>\n      ${this.renderDialog()}\n    `;\n  }\n}\n\ncustomElements.define('k-email-templates', EmailTemplates);\n"],"mappings":"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","ignoreList":[]}

package/dist/admin/components/Emails.js

@@ -1,49 +1,52 @@
-import t from"/kempo-ui/components/ShadowComponent.js";import{html as s,nothing as e}from"/kempo-ui/lit-all.min.js";import"/kempo-ui/components/Spinner.js";import"/kempo-ui/components/Dialog.js";import a from"/kempo-ui/components/Toast.js";import{listEmails as i,getEmail as o,retryEmail as r,sendTestEmail as l,getAllCurrentUserPermissions as n}from"/kempo/sdk.js";const c={sent:"tc-success",failed:"tc-danger",sending:"tc-warning",queued:"tc-muted"},h=t=>t?new Date(t).toLocaleString():"";export default class d extends t{static properties={emails:{state:!0},total:{state:!0},offset:{state:!0},status:{state:!0},search:{state:!0},loading:{state:!0},error:{state:!0},canManage:{state:!0},open:{state:!0},testTo:{state:!0},busy:{state:!0}};constructor(){super(),this.emails=[],this.total=0,this.offset=0,this.status="",this.search="",this.loading=!0,this.error="",this.canManage=!1,this.open=null,this.testTo="",this.busy=!1}connectedCallback(){super.connectedCallback(),n().then(([,t])=>{this.canManage=(t?.permissions??[]).includes("system:emails:manage")}),this.load()}load=async()=>{this.loading=!0;const[t,s]=await i({status:this.status||void 0,search:this.search||void 0,limit:25,offset:this.offset});this.loading=!1,t?this.error=t.msg||"The emails could not be loaded":(this.error="",this.emails=s.emails,this.total=s.total)};filter=async t=>{Object.assign(this,t,{offset:0}),await this.load()};page=async t=>{this.offset=Math.max(0,this.offset+25*t),await this.load()};show=async t=>{const[s,e]=await o(t);s?a.error(s.msg):(this.open=e,await this.updateComplete,this.renderRoot.querySelector("#emailDialog").open())};retry=async()=>{this.busy=!0;const[t,s]=await r(this.open.id);this.busy=!1,t?a.error(t.msg):s.sent?a.success("The email was sent"):a.error(s.error||"The email could not be sent"),this.renderRoot.querySelector("#emailDialog").close(),await this.load()};openTest=()=>this.renderRoot.querySelector("#testDialog").open();confirmTest=t=>{t.keepDialogOpen=!0,this.sendTest()};sendTest=async()=>{this.busy=!0;const[t,s]=await l(this.testTo.trim());this.busy=!1,t?a.error(t.msg):(this.renderRoot.querySelector("#testDialog").close(),s.sent?a.success(`A test email was sent to ${this.testTo.trim()}`):a.error(s.error||"The test email could not be sent"),await this.load())};renderDetail(){const t=this.open;return t?s`
+import e from"/kempo-ui/components/ShadowComponent.js";import{html as t,nothing as s}from"/kempo-ui/lit-all.min.js";import"/kempo-ui/components/Spinner.js";import"/kempo-ui/components/Dialog.js";import"/kempo-ui/components/Table.js";import"/kempo-ui/components/controls/TcFirstPage.js";import"/kempo-ui/components/controls/TcPrevPage.js";import"/kempo-ui/components/controls/TcNextPage.js";import"/kempo-ui/components/controls/TcLastPage.js";import"/kempo-ui/components/controls/TcPageSelect.js";import"/kempo-ui/components/controls/TcPageSize.js";import"/admin/components/tableControls/ViewEmail.js";import a from"/kempo-ui/components/Toast.js";import{listEmails as i,getEmail as o,retryEmail as r,sendTestEmail as l,getAllCurrentUserPermissions as n}from"/kempo/sdk.js";const c={sent:"tc-success",failed:"tc-danger",sending:"tc-warning",queued:"tc-muted"},m=e=>e?new Date(e).toLocaleString():"",d=[{name:"status",label:"Status",size:110,editable:!1},{name:"recipient",label:"To",size:240,editable:!1},{name:"subject",label:"Subject",editable:!1,calculator:e=>e.lastError?`${e.subject} — ${e.lastError}`:e.subject},{name:"type",label:"Type",size:140,editable:!1},{name:"createdAt",label:"Created",size:190,editable:!1,formatter:m}];export default class p extends e{static properties={status:{state:!0},search:{state:!0},loading:{state:!0},error:{state:!0},canManage:{state:!0},open:{state:!0},testTo:{state:!0},busy:{state:!0}};constructor(){super(),this.status="",this.search="",this.loading=!0,this.error="",this.canManage=!1,this.open=null,this.testTo="",this.busy=!1}connectedCallback(){super.connectedCallback(),n().then(([,e])=>{this.canManage=(e?.permissions??[]).includes("system:emails:manage")});const e=this.closest("k-tab-content");!e||e.active?this.load():this.closest("k-tabs")?.addEventListener("tabfirstshown",({detail:t})=>{t.tab===e.name&&this.load()})}load=async()=>{await this.updateComplete;const e=this.renderRoot.querySelector("#emails"),t={status:this.status||void 0,search:this.search||void 0};this.loading=!0;const[s,a]=await i({...t,limit:25,offset:0});this.loading=!1,s?this.error=s.msg||"The emails could not be loaded":(this.error="",e.setData({records:a.emails,fields:d}),e.setupFetchRecords(a.total,async(e,s)=>{const[a,o]=await i({...t,limit:s,offset:e});return a?[]:o.emails}))};filter=e=>{Object.assign(this,e),this.load()};show=async e=>{const[t,s]=await o(e);t?a.error(t.msg):(this.open=s,await this.updateComplete,this.renderRoot.querySelector("#emailDialog").open())};retry=async()=>{this.busy=!0;const[e,t]=await r(this.open.id);this.busy=!1,e?a.error(e.msg):t.sent?a.success("The email was sent"):a.error(t.error||"The email could not be sent"),this.renderRoot.querySelector("#emailDialog").close(),await this.load()};openTest=()=>this.renderRoot.querySelector("#testDialog").open();confirmTest=e=>{e.keepDialogOpen=!0,this.sendTest()};sendTest=async()=>{this.busy=!0;const[e,t]=await l(this.testTo.trim());this.busy=!1,e?a.error(e.msg):(this.renderRoot.querySelector("#testDialog").close(),t.sent?a.success(`A test email was sent to ${this.testTo.trim()}`):a.error(t.error||"The test email could not be sent"),await this.load())};renderDetail(){const e=this.open;return e?t`
       <k-dialog id="emailDialog" style="--width: 60rem;" cancel-text="Close">
-        <h2 slot="title" class="h5 pyh px m0">${t.subject}</h2>
+        <h2 slot="title" class="h5 pyh px m0">${e.subject}</h2>
         <div class="p">
-          <p class="mb"><strong class=${c[t.status]??""}>${t.status}</strong>${t.attempts?s` · ${t.attempts} ${1===t.attempts?"try":"tries"}`:e}${t.provider?s` · sent by ${t.provider}`:e}</p>
-          <p class="mb">To <strong>${t.recipient}</strong>, from ${t.sender}<br><span class="tc-muted">${t.type} · created ${h(t.createdAt)}${t.sentAt?` · sent ${h(t.sentAt)}`:""}</span></p>
-          ${t.lastError?s`<p class="tc-danger mb" role="alert">${t.lastError}</p>`:e}
-          ${this.canManage&&["queued","failed"].includes(t.status)?s`<p class="mb"><button class="primary" ?disabled=${this.busy} @click=${this.retry}>${this.busy?"Trying…":"Try again"}</button></p>`:e}
-          <iframe title="The email" sandbox="" .srcdoc=${t.html} class="full b r" height="420"></iframe>
+          <p class="mb"><strong class=${c[e.status]??""}>${e.status}</strong>${e.attempts?t` · ${e.attempts} ${1===e.attempts?"try":"tries"}`:s}${e.provider?t` · sent by ${e.provider}`:s}</p>
+          <p class="mb">To <strong>${e.recipient}</strong>, from ${e.sender}<br><span class="tc-muted">${e.type} · created ${m(e.createdAt)}${e.sentAt?` · sent ${m(e.sentAt)}`:""}</span></p>
+          ${e.lastError?t`<p class="tc-danger mb" role="alert">${e.lastError}</p>`:s}
+          ${this.canManage&&["queued","failed"].includes(e.status)?t`<p class="mb"><button class="primary" ?disabled=${this.busy} @click=${this.retry}>${this.busy?"Trying…":"Try again"}</button></p>`:s}
+          <iframe title="The email" sandbox="" .srcdoc=${e.html} class="full b r" height="420"></iframe>
         </div>
       </k-dialog>
-    `:e}renderTest(){return s`
+    `:s}renderTest(){return t`
       <k-dialog id="testDialog" confirm-text=${this.busy?"Sending…":"Send test email"} confirm-classes="primary ml" cancel-text="Cancel" .confirmAction=${this.confirmTest}>
         <h2 slot="title" class="h5 pyh px m0">Send a test email</h2>
         <div class="p">
-          <label class="mb d-b">Send it to<input type="email" .value=${this.testTo} @input=${t=>{this.testTo=t.target.value}}></label>
+          <label class="mb d-b">Send it to<input type="email" .value=${this.testTo} @input=${e=>{this.testTo=e.target.value}}></label>
           <p class="tc-muted">It goes out through the email extension that is installed, and shows in the log below.</p>
         </div>
       </k-dialog>
-    `}render(){const t=Math.min(this.offset+25,this.total);return s`
+    `}render(){return t`
       <div class="d-f mb">
         <label class="mr">Status
-          <select @change=${t=>this.filter({status:t.target.value})}>
-            ${["","queued","sending","sent","failed"].map(t=>s`<option value=${t} ?selected=${this.status===t}>${t||"All"}</option>`)}
+          <select @change=${e=>this.filter({status:e.target.value})}>
+            ${["","queued","sending","sent","failed"].map(e=>t`<option value=${e} ?selected=${this.status===e}>${e||"All"}</option>`)}
           </select>
         </label>
         <label class="mr">Search
-          <input type="search" placeholder="Address or subject" .value=${this.search} @change=${t=>this.filter({search:t.target.value})}>
+          <input type="search" placeholder="Address or subject" .value=${this.search} @change=${e=>this.filter({search:e.target.value})}>
         </label>
-        ${this.canManage?s`<button class="mb" @click=${this.openTest}>Send a test email</button>`:e}
+        ${this.canManage?t`<button class="mb" @click=${this.openTest}>Send a test email</button>`:s}
       </div>
-      ${this.error?s`<p class="tc-danger" role="alert">${this.error}</p>`:e}
-      ${this.loading?s`<k-spinner></k-spinner>`:this.emails.length?s`
-        <table class="mb">
-          <thead><tr><th>Status</th><th>To</th><th>Subject</th><th>Type</th><th>Created</th></tr></thead>
-          <tbody>${this.emails.map(t=>s`<tr>
-            <td><strong class=${c[t.status]??""}>${t.status}</strong></td>
-            <td>${t.recipient}</td>
-            <td><a href="#" @click=${s=>{s.preventDefault(),this.show(t.id)}}>${t.subject}</a>${t.lastError?s`<br><span class="tc-danger">${t.lastError}</span>`:e}</td>
-            <td class="tc-muted">${t.type}</td>
-            <td class="tc-muted">${h(t.createdAt)}</td>
-          </tr>`)}</tbody>
-        </table>
-        <p class="d-f mb"><button ?disabled=${0===this.offset} @click=${()=>this.page(-1)}>Newer</button><span class="tc-muted ph">${this.offset+1}–${t} of ${this.total}</span><button ?disabled=${t>=this.total} @click=${()=>this.page(1)}>Older</button></p>
-      `:s`<p class="tc-muted">No emails have been sent yet.</p>`}
+      ${this.error?t`<p class="tc-danger" role="alert">${this.error}</p>`:s}
+      ${this.loading?t`<k-spinner></k-spinner>`:s}
+      <k-table id="emails" enable-pages page-size="25" page-size-options="[10,25,50]" placeholder="No emails have been sent yet." @emailView=${e=>this.show(e.detail.record.id)}>
+        <admin-view-email slot="before"></admin-view-email>
+        <div class="d-f full" style="align-items: center;">
+          <div>
+            <kc-tc-first-page></kc-tc-first-page>
+            <kc-tc-prev-page></kc-tc-prev-page>
+            <kc-tc-next-page></kc-tc-next-page>
+            <kc-tc-last-page></kc-tc-last-page>
+          </div>
+          <div class="flex"></div>
+          <div><kc-tc-page-select></kc-tc-page-select></div>
+          <div class="flex"></div>
+          <div><kc-tc-page-size></kc-tc-page-size></div>
+        </div>
+      </k-table>
       ${this.renderDetail()}
       ${this.renderTest()}
-    `}}customElements.define("k-admin-emails",d);
+    `}}customElements.define("k-admin-emails",p);
 //# sourceMappingURL=C:\Users\dusti\dev\kempo\dist\admin\components\Emails.js.map