added ctrl+s record form shortcut and updated user external auths panel with the new provider logos

This commit is contained in:
Gani Georgiev
2023-04-17 14:35:49 +03:00
parent 1b8776926e
commit 00b04db5cf
38 changed files with 326 additions and 283 deletions
@@ -13,12 +13,12 @@
let externalAuths = [];
let isLoading = false;
function getProviderTitle(provider) {
return providersList[provider + "Auth"]?.title || CommonHelper.sentenize(provider, false);
function getProviderConfig(provider) {
return providersList.find((p) => p.key == provider + "Auth") || {};
}
function getProviderIcon(provider) {
return providersList[provider + "Auth"]?.icon || `ri-${provider}-line`;
function getProviderTitle(provider) {
return getProviderConfig(provider)?.title || CommonHelper.sentenize(provider, false);
}
async function loadExternalAuths() {
@@ -69,7 +69,12 @@
<div class="list">
{#each externalAuths as auth}
<div class="list-item">
<i class={getProviderIcon(auth.provider)} />
<figure class="provider-logo">
<img
src="{import.meta.env.BASE_URL}images/oauth2/{getProviderConfig(auth.provider)?.logo}"
alt="Provider logo"
/>
</figure>
<span class="txt">{getProviderTitle(auth.provider)}</span>
<div class="txt-hint">ID: {auth.providerId}</div>
<button
@@ -151,7 +151,7 @@
window.localStorage.removeItem(draftKey());
}
function save() {
function save(hidePanel = true) {
if (isSaving || !canSave || !collection?.id) {
return;
}
@@ -170,9 +170,13 @@
request
.then((result) => {
addSuccessToast(isNew ? "Successfully created record." : "Successfully updated record.");
confirmClose = false;
deleteDraft();
hide();
if (hidePanel) {
confirmClose = false;
hide();
} else {
show(result);
}
dispatch("save", result);
})
.catch((err) => {
@@ -318,12 +322,21 @@
}
}
deleteDraft();
show(clone);
await tick();
originalSerializedData = "";
}
function handleFormKeydown(e) {
if (e.ctrlKey && e.code == "KeyS") {
e.preventDefault();
e.stopPropagation();
save(false);
}
}
</script>
<OverlayPanel
@@ -352,7 +365,7 @@
on:show
>
<svelte:fragment slot="header">
<h4>
<h4 class="panel-title">
{isNew ? "New" : "Edit"}
<strong>{collection?.name}</strong> record
</h4>
@@ -426,6 +439,7 @@
class="tab-item"
class:active={activeTab === tabFormKey}
on:submit|preventDefault={save}
on:keydown={handleFormKeydown}
>
{#if !hasChanges && initialDraft}
<div class="block" out:slide={{ duration: 150 }}>
@@ -548,3 +562,9 @@
</button>
</svelte:fragment>
</OverlayPanel>
<style>
.panel-title {
line-height: var(--smBtnHeight);
}
</style>