Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Slow work on creating a textarea element thing.

Browse Source
This commit is contained in:
Scott Idem
2024-10-14 19:02:56 -04:00
parent 115751bcd7
commit e2a510ceaa
5 changed files with 1806 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1311
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@@ -40,6 +40,7 @@
"postcss": "^8.4.41", "postcss": "^8.4.41",
"prettier": "^3.1.1", "prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2", "prettier-plugin-svelte": "^3.1.2",
"sass-embedded": "^1.79.5",
"svelte": "^4.2.0", "svelte": "^4.2.0",
"svelte-check": "^4.0.0", "svelte-check": "^4.0.0",
"svelte-highlight": "^7.7.0", "svelte-highlight": "^7.7.0",
@@ -55,6 +56,10 @@
"dependencies": { "dependencies": {
"@floating-ui/dom": "^1.6.3", "@floating-ui/dom": "^1.6.3",
"@popperjs/core": "^2.11.8", "@popperjs/core": "^2.11.8",
"@tiptap/core": "^2.8.0",
"@tiptap/extension-color": "^2.8.0",
"@tiptap/pm": "^2.8.0",
"@tiptap/starter-kit": "^2.8.0",
"axios": "^1.6.7", "axios": "^1.6.7",
"dayjs": "^1.11.10", "dayjs": "^1.11.10",
"dexie": "^4.0.1-beta.14", "dexie": "^4.0.1-beta.14",

102
src/lib/element_tiptap_editor.scss Normal file
View File

@@ -0,0 +1,102 @@
/* Basic editor styles */
.tiptap {
:first-child {
margin-top: 0;
}
/* List styles */
ul {
list-style-type: disc;
margin-left: 1.5rem;
// border: solid thin red;
}
ol {
list-style-type: decimal;
margin-left: 1.5rem;
// border: solid thin red;
}
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
}
hr {
border: none;
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}

372
src/lib/element_tiptap_editor.svelte Normal file
View File

@@ -0,0 +1,372 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import { Color } from '@tiptap/extension-color'
import ListItem from '@tiptap/extension-list-item'
import TextStyle from '@tiptap/extension-text-style'
import StarterKit from "@tiptap/starter-kit";
import { Editor } from "@tiptap/core";
import "./element_tiptap_editor.scss";
export let html_text: string = '';
// export let html_text: string = `
// <h2>
// Hi there,
// </h2>
// <p>
// this is a <em>basic</em> example of <strong>Tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
// </p>
// <ul>
// <li>
// That’s a bullet list with one …
// </li>
// <li>
// … or two list items.
// </li>
// </ul>
// <p>
// Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
// </p>
// <pre><code class="language-css">body {
// display: none;
// }</code></pre>
// <p>
// I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
// </p>
// <blockquote>
// Wow, that’s amazing. Good work, boy! 👏
// <br />
// — Mom
// </blockquote>
// `;
let element: HTMLDivElement;
let editor: any;
let show_button_kv_defaults: any = {
bold: true,
italic: true,
strike: true,
code: true,
paragraph: true,
heading__h1: true,
heading__h2: true,
heading__h3: true,
unsetAllMarks: true,
bulletList: true,
orderedList: true,
hardBreak: true,
undo: true,
redo: true,
};
export let show_button_kv: any;
if (show_button_kv) {
show_button_kv = { ...show_button_kv_defaults, ...show_button_kv };
} else {
show_button_kv = show_button_kv_defaults;
}
onMount(() => {
editor = new Editor({
element: element,
extensions: [
Color.configure({ types: [TextStyle.name, ListItem.name] }),
TextStyle.configure({ types: [ListItem.name] }),
StarterKit,
],
content: html_text,
onTransaction: () => {
// force re-render so `editor.isActive` works as expected
editor = editor;
},
});
});
onDestroy(() => {
if (editor) {
editor.destroy();
}
});
</script>
<div
class="editor border border-gray-300 rounded p-1 pb-2 bg-gray-200"
>
{#if editor}
<div class="control-group bg-gray-200 border-b border-gray-400 p-1">
<div class="button-group flex flex-row flex-wrap gap-4 items-center justify-between">
<span>
<button
type="button"
on:click={() => console.log && editor.chain().toggleBold().run()}
disabled={!editor.can().chain().focus().toggleBold().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md font-bold"
class:variant-ghost-secondary={editor.isActive("bold") ?? false}
class:hidden={!show_button_kv.bold}
>
<span class="fas fa-bold mx-1"></span>
<!-- Bold -->
</button>
<button
type="button"
on:click={() => editor.chain().focus().toggleItalic().run()}
disabled={!editor.can().chain().focus().toggleItalic().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md italic"
class:variant-ghost-secondary={editor.isActive("italic") ?? false}
class:hidden={!show_button_kv.italic}
>
<span class="fas fa-italic mx-1"></span>
<!-- Italic -->
</button>
<button
type="button"
on:click={() => editor.chain().focus().toggleStrike().run()}
disabled={!editor.can().chain().focus().toggleStrike().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md line-through"
class:variant-ghost-secondary={editor.isActive("strike") ?? false}
class:hidden={!show_button_kv.strike}
>
<span class="fas fa-strikethrough mx-1"></span>
<!-- Strike -->
</button>
</span>
<span>
<button
type="button"
on:click={() => editor.chain().focus().toggleCode().run()}
disabled={!editor.can().chain().focus().toggleCode().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-secondary={editor.isActive("code") ?? false}
class:hidden={!show_button_kv.code}
>
<span class="fas fa-code mx-1"></span>
<!-- Code -->
</button>
<button
type="button"
on:click={() => editor.chain().focus().unsetAllMarks().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:hidden={!show_button_kv.unsetAllMarks}
>
<!-- <span class="fas fa-broom mx-1"></span> -->
<span class="fas fa-remove-format mx-1"></span>
<!-- Clear marks -->
</button>
<button
type="button"
on:click={() => editor.chain().focus().clearNodes().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:hidden={!show_button_kv.clearNodes}
>
<!-- <span class="fas fa-broom mx-1"></span> -->
<span class="fas fa-remove-format mx-1"></span>
Clear nodes
</button>
</span>
<span>
<button
type="button"
on:click={() => editor.chain().focus().setParagraph().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-secondary={editor.isActive("paragraph") ? "is-active" : ""}
class:hidden={!show_button_kv.paragraph}
title="Paragraph"
>
<span class="fas fa-paragraph mx-1"></span>
<!-- Paragraph -->
</button>
<button
type="button"
on:click={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md text-xs"
class:variant-ghost-secondary={editor.isActive("heading", { level: 1 }) ? "is-active" : ""}
class:hidden={!show_button_kv.heading__h1}
title="Heading 1 <h1>"
>
<span class="fas fa-heading mx-1"></span>1
<!-- H1 -->
</button>
<button
type="button"
on:click={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md text-xs"
class:variant-ghost-secondary={editor.isActive("heading", { level: 2 }) ? "is-active" : ""}
class:hidden={!show_button_kv.heading__h2}
title="Heading 2 <h2>"
>
<span class="fas fa-heading mx-1"></span>2
<!-- <span class="text-xs">2</span> -->
<!-- 2 -->
<!-- H2 -->
</button>
<button
type="button"
on:click={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md text-xs"
class:variant-ghost-secondary={editor.isActive("heading", { level: 3 }) ? "is-active" : ""}
class:hidden={!show_button_kv.heading__h3}
title="Heading 3 <h3>"
>
<span class="fas fa-heading mx-1"></span>3
<!-- H3 -->
</button>
<button
type="button"
on:click={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-secondary={editor.isActive("heading", { level: 4 }) ? "is-active" : ""}
class:hidden={!show_button_kv.heading__h4}
title="Heading 4 <h4>"
>
H4
</button>
<button
type="button"
on:click={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-secondary={editor.isActive("heading", { level: 5 }) ? "is-active" : ""}
class:hidden={!show_button_kv.heading__h5}
title="Heading 5 <h5>"
>
H5
</button>
<button
type="button"
on:click={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-secondary={editor.isActive("heading", { level: 6 }) ? "is-active" : ""}
class:hidden={!show_button_kv.heading__h6}
title="Heading 6 <h6>"
>
H6
</button>
</span>
<span>
<button
type="button"
on:click={() => editor.chain().focus().toggleBulletList().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-secondary={editor.isActive("bulletList") ? "is-active" : ""}
class:hidden={!show_button_kv.bulletList}
title="Bullet list"
>
<span class="fas fa-list-ul mx-1"></span>
<!-- Bullet -->
</button>
<button
type="button"
on:click={() => editor.chain().focus().toggleOrderedList().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-secondary={editor.isActive("orderedList") ? "is-active" : ""}
class:hidden={!show_button_kv.orderedList}
title="Ordered list"
>
<span class="fas fa-list-ol mx-1"></span>
<!-- Ordered -->
</button>
<button
type="button"
on:click={() => editor.chain().focus().toggleCodeBlock().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-secondary={editor.isActive("codeBlock") ? "is-active" : ""}
class:hidden={!show_button_kv.codeBlock}
title="Code block"
>
Code block
</button>
<button
type="button"
on:click={() => editor.chain().focus().toggleBlockquote().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-secondary={editor.isActive("blockquote") ? "is-active" : ""}
class:hidden={!show_button_kv.blockquote}
title="Blockquote"
>
Blockquote
</button>
<button
type="button"
on:click={() => editor.chain().focus().setHorizontalRule().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:hidden={!show_button_kv.horizontalRule}
title="Horizontal rule"
>
Horizontal rule
</button>
<button
type="button"
on:click={() => editor.chain().focus().setHardBreak().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:hidden={!show_button_kv.hardBreak}
title="Hard break"
>
<span class="fas fa-level-down-alt mx-1"></span>
<!-- Hard break -->
</button>
</span>
<span
class="justify-self-end"
>
<button
type="button"
on:click={() => editor.chain().focus().undo().run()}
disabled={!editor.can().chain().focus().undo().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:hidden={!show_button_kv.undo}
title="Undo"
>
<span class="fas fa-undo mx-1"></span>
<!-- Undo -->
</button>
<button
type="button"
on:click={() => editor.chain().focus().redo().run()}
disabled={!editor.can().chain().focus().redo().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:hidden={!show_button_kv.redo}
title="Redo"
>
<span class="fas fa-redo mx-1"></span>
<!-- Redo -->
</button>
</span>
<!-- <span>
<button
type="button"
on:click={() => editor.chain().focus().setColor('#958DF1').run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-secondary={editor.isActive('textStyle', { color: '#958DF1' }) ? 'is-active' : ''}
class:hidden={!show_button_kv.color__purple}
>
Purple
</button>
</span> -->
</div>
</div>
{/if}
<div
bind:this={element}
class="tiptap bg-slate-100 px-1 py-2"
/>
</div>
<style lang="scss">
</style>

217
src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte
View File

@@ -1,12 +1,13 @@
<script lang="ts"> <script lang="ts">
import { createEventDispatcher, onDestroy, onMount } from 'svelte'; import { createEventDispatcher, onDestroy, onMount } from 'svelte';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import Editor from '@tinymce/tinymce-svelte'; // import Editor from '@tinymce/tinymce-svelte';
import { ae_util } from '$lib/ae_utils/ae_utils'; import { ae_util } from '$lib/ae_utils/ae_utils';
import { api } from '$lib/api'; import { api } from '$lib/api';
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores'; import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores'; import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores';
import Tiptap_editor from '$lib/element_tiptap_editor.svelte';
export let lq__event_obj: any; export let lq__event_obj: any;
// export let container_class_li = []; // export let container_class_li = [];
@@ -281,11 +282,11 @@ async function handle_submit_form(event){
event_data['name'] = event_meeting_data.name; event_data['name'] = event_meeting_data.name;
if (tinyMCE.get('description')) { // if (tinyMCE.get('description')) {
event_data['description'] = tinyMCE.get('description').getContent(); // event_data['description'] = tinyMCE.get('description').getContent();
} else { // } else {
event_data['description'] = event_meeting_data.description; // event_data['description'] = event_meeting_data.description;
} // }
event_data['type'] = event_meeting_data.type; event_data['type'] = event_meeting_data.type;
event_data['physical'] = !!event_meeting_data.physical; event_data['physical'] = !!event_meeting_data.physical;
event_data['virtual'] = !!event_meeting_data.virtual; event_data['virtual'] = !!event_meeting_data.virtual;
@@ -315,22 +316,22 @@ async function handle_submit_form(event){
} }
event_data['location_address_json'] = address; event_data['location_address_json'] = address;
if (tinyMCE.get('location_text')) { // if (tinyMCE.get('location_text')) {
event_data['location_text'] = tinyMCE.get('location_text').getContent(); // event_data['location_text'] = tinyMCE.get('location_text').getContent();
} else { // } else {
event_data['location_text'] = event_meeting_data.location_text; // event_data['location_text'] = event_meeting_data.location_text;
} // }
event_data['attend_url'] = event_meeting_data.attend_url; event_data['attend_url'] = event_meeting_data.attend_url;
event_data['attend_url_passcode'] = event_meeting_data.attend_url_passcode; event_data['attend_url_passcode'] = event_meeting_data.attend_url_passcode;
event_data['attend_phone'] = event_meeting_data.attend_phone; event_data['attend_phone'] = event_meeting_data.attend_phone;
event_data['attend_phone_passcode'] = event_meeting_data.attend_phone_passcode; event_data['attend_phone_passcode'] = event_meeting_data.attend_phone_passcode;
if (tinyMCE.get('attend_text')) { // if (tinyMCE.get('attend_text')) {
event_data['attend_text'] = tinyMCE.get('attend_text').getContent(); // event_data['attend_text'] = tinyMCE.get('attend_text').getContent();
} else { // } else {
event_data['attend_text'] = event_meeting_data.attend_text; // event_data['attend_text'] = event_meeting_data.attend_text;
} // }
event_data['timezone'] = event_meeting_data.timezone; event_data['timezone'] = event_meeting_data.timezone;
@@ -360,11 +361,11 @@ async function handle_submit_form(event){
event_data['recurring_end_time'] = event_meeting_data.recurring_end_time; event_data['recurring_end_time'] = event_meeting_data.recurring_end_time;
} }
if (tinyMCE.get('recurring_text')) { // if (tinyMCE.get('recurring_text')) {
event_data['recurring_text'] = tinyMCE.get('recurring_text').getContent(); // event_data['recurring_text'] = tinyMCE.get('recurring_text').getContent();
} else { // } else {
event_data['recurring_text'] = event_meeting_data.recurring_text; // event_data['recurring_text'] = event_meeting_data.recurring_text;
} // }
console.log(event_data['recurring_text']); console.log(event_data['recurring_text']);
if (!event_data['recurring_text'] || event_data['recurring_text'].includes('*gen*')) { if (!event_data['recurring_text'] || event_data['recurring_text'].includes('*gen*')) {
@@ -391,7 +392,7 @@ async function handle_submit_form(event){
days_of_week.push('Saturday'); days_of_week.push('Saturday');
} }
let current_date_iso = dayjs().format('YYYY-MM-DD'); let current_date_iso = ae_util.iso_datetime_formatter(new Date(), 'YYYY-MM-DD');
// event_data['recurring_text'] = `This meeting occurs every ${days_of_week.join(', ')} at ${ae_util.iso_datetime_formatter(`${current_date_iso} ${event_data['recurring_start_time']}`, 'time_short_no_leading')} to ${ae_util.iso_datetime_formatter(`${current_date_iso} ${event_data['recurring_end_time']}`, 'time_short_no_leading')}.`; // event_data['recurring_text'] = `This meeting occurs every ${days_of_week.join(', ')} at ${ae_util.iso_datetime_formatter(`${current_date_iso} ${event_data['recurring_start_time']}`, 'time_short_no_leading')} to ${ae_util.iso_datetime_formatter(`${current_date_iso} ${event_data['recurring_end_time']}`, 'time_short_no_leading')}.`;
@@ -446,11 +447,11 @@ async function handle_submit_form(event){
event_data['enable'] = !!event_meeting_data.enable; event_data['enable'] = !!event_meeting_data.enable;
} }
if (tinyMCE.get('notes')) { // if (tinyMCE.get('notes')) {
event_data['notes'] = tinyMCE.get('notes').getContent(); // event_data['notes'] = tinyMCE.get('notes').getContent();
} else { // } else {
event_data['notes'] = event_meeting_data.notes; // event_data['notes'] = event_meeting_data.notes;
} // }
console.log(event_data); console.log(event_data);
@@ -598,7 +599,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
bind:clientHeight={$ae_loc.iframe_height_modal_body} bind:clientHeight={$ae_loc.iframe_height_modal_body}
> >
<form on:submit|preventDefault={handle_submit_form} class=""> <form on:submit|preventDefault={handle_submit_form} class="space-y-1">
{#await update_event_obj_promise} {#await update_event_obj_promise}
<div class="awaiting alert_msg_pulse" out:fade={{ duration: 2000 }}>Saving...</div> <div class="awaiting alert_msg_pulse" out:fade={{ duration: 2000 }}>Saving...</div>
@@ -620,17 +621,21 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
<input type="text" id="name" name="name" required max="200" value={$lq__event_obj?.name} placeholder="Name of Recovery Meeting" autocomplete="off" class="input w-96" /> <input type="text" id="name" name="name" required max="200" value={$lq__event_obj?.name} placeholder="Name of Recovery Meeting" autocomplete="off" class="input w-96" />
</label> </label>
<label class="ae_label event__description">Short description <label for="description" class="ae_label event__description">Short description
<!-- <textarea name="description" id="description" class="ae_value event__description tinymce_editor editor_basic textarea" rows="5" cols="70" bind:value={$idaa_slct.event_obj.description} placeholder="A short description or overview of this recovery meeting"></textarea> --> <!-- <textarea name="description" id="description" class="ae_value event__description tinymce_editor editor_basic textarea" rows="5" cols="70" bind:value={$idaa_slct.event_obj.description} placeholder="A short description or overview of this recovery meeting"></textarea> -->
<Tiptap_editor
html_text={$idaa_slct.event_obj.description}
/>
</label> </label>
<Editor
<!-- <Editor
id="description" id="description"
bind:value={$idaa_slct.event_obj.description} bind:value={$idaa_slct.event_obj.description}
licenseKey="gpl" licenseKey="gpl"
license_key="gpl" license_key="gpl"
></Editor> ></Editor> -->
<div> <div>
<label class=""> <label class="">
@@ -641,7 +646,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
<option value="Family Recovery">Family Recovery</option> <option value="Family Recovery">Family Recovery</option>
</select> </select>
</label> </label>
<ul> <ul class="list-disc list-inside">
<li><strong>IDAA</strong> - Open to IDAA members only</li> <li><strong>IDAA</strong> - Open to IDAA members only</li>
<li><strong>Caduceus</strong> - Open to all healthcare workers including those who do not qualify for IDAA</li> <li><strong>Caduceus</strong> - Open to all healthcare workers including those who do not qualify for IDAA</li>
<li><strong>Family Recovery</strong> - Open to spouses, parents, and adult children of medical professionals who have substance use disorder. <li><strong>Family Recovery</strong> - Open to spouses, parents, and adult children of medical professionals who have substance use disorder.
@@ -683,7 +688,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
<fieldset <fieldset
id="physical_address" id="physical_address"
class="physical_address fieldset" class="physical_address fieldset space-y-1"
class:hidden={!$idaa_slct.event_obj?.physical}> class:hidden={!$idaa_slct.event_obj?.physical}>
<legend>Address</legend> <legend>Address</legend>
@@ -710,7 +715,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
<fieldset <fieldset
id="physical_city_state_province_postal_code_country" id="physical_city_state_province_postal_code_country"
class="physical_city_state_province_postal_code_country"> class="physical_city_state_province_postal_code_country space-y-1">
<label for="address_city">City <label for="address_city">City
<input type="text" class="input w-40" id="address_city" name="address_city" placeholder="Name of the city" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.city ? $lq__event_obj?.location_address_json.city : $lq__event_obj?.address_city ?? '')}" autocomplete="address-level2"> <input type="text" class="input w-40" id="address_city" name="address_city" placeholder="Name of the city" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.city ? $lq__event_obj?.location_address_json.city : $lq__event_obj?.address_city ?? '')}" autocomplete="address-level2">
@@ -753,13 +758,17 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
</fieldset> </fieldset>
<label for="location_text" class="">Additional information the meeting location <label for="location_text" class="">Additional information the meeting location
<textarea class="ae_value event__location_text tinymce_editor editor_less_100 textarea" id="location_text" name="location_text" placeholder="Additional information about the meeting location" rows="2" cols="70" bind:value={$idaa_slct.event_obj.location_text}></textarea> <!-- <textarea class="ae_value event__location_text tinymce_editor editor_less_100 textarea" id="location_text" name="location_text" placeholder="Additional information about the meeting location" rows="2" cols="70" bind:value={$idaa_slct.event_obj.location_text}></textarea> -->
<Tiptap_editor
html_text={$idaa_slct.event_obj.location_text}
show_button_kv={{'heading__h1': false, 'heading__h2': false, 'heading__h3': false}}
/>
</label> </label>
<fieldset <fieldset
id="virtual" id="virtual"
class="virtual" class="virtual space-y-1"
class:ae_d_none={!$lq__event_obj?.virtual}> class:ae_d_none={!$idaa_slct.event_obj.virtual}>
<legend>Virtual/Online</legend> <legend>Virtual/Online</legend>
<label for="attend_url">URL to access the virtual meeting <label for="attend_url">URL to access the virtual meeting
@@ -779,7 +788,11 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
</fieldset> </fieldset>
<label for="attend_text" class="">Additional information on how to attend <label for="attend_text" class="">Additional information on how to attend
<textarea class="ae_value event__attend_text tinymce_editor editor_less_100 textarea" id="attend_text" name="attend_text" placeholder="Additional information on how to attend or join the meeting" rows="2" cols="70" value={$lq__event_obj?.attend_text ?? ''}></textarea> <!-- <textarea class="ae_value event__attend_text tinymce_editor editor_less_100 textarea" id="attend_text" name="attend_text" placeholder="Additional information on how to attend or join the meeting" rows="2" cols="70" value={$lq__event_obj?.attend_text ?? ''}></textarea> -->
<Tiptap_editor
html_text={$idaa_slct.event_obj.attend_text}
show_button_kv={{'heading__h1': false, 'heading__h2': false, 'heading__h3': false}}
/>
</label> </label>
</section> <!-- END: section event__how_to_attend --> </section> <!-- END: section event__how_to_attend -->
@@ -789,7 +802,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
<section class="ae_section event__timing"> <!-- BEGIN: section event__timing --> <section class="ae_section event__timing"> <!-- BEGIN: section event__timing -->
<h3 class="h2">Recurring and When</h3> <h3 class="h2">Recurring and When</h3>
<fieldset class="event__recurring"> <!-- <fieldset class="event__recurring">
<legend class="legend">Recurring</legend> <legend class="legend">Recurring</legend>
<div class="ae_group"> <div class="ae_group">
<label for="recurring_no" class="">No, only once <label for="recurring_no" class="">No, only once
@@ -815,7 +828,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
> >
</label> </label>
</div> </div>
</fieldset> </fieldset> -->
<fieldset <fieldset
id="recurring_details" id="recurring_details"
@@ -865,7 +878,11 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
{#if ( $ae_loc.administrator_access || $lq__event_obj && ($lq__event_obj?.show_recurring_text || ($lq__event_obj?.recurring_text && !$lq__event_obj?.recurring_text.includes('*gen*'))) )} {#if ( $ae_loc.administrator_access || $lq__event_obj && ($lq__event_obj?.show_recurring_text || ($lq__event_obj?.recurring_text && !$lq__event_obj?.recurring_text.includes('*gen*'))) )}
<p>Please only use the text box for additional information if the options above do not cover your needs. This may affect how this meeting shows up in search results.</p> <p>Please only use the text box for additional information if the options above do not cover your needs. This may affect how this meeting shows up in search results.</p>
<label for="recurring_text">Additional information on when and how often <label for="recurring_text">Additional information on when and how often
<textarea class="ae_value event__recurring_text tinymce_editor editor_less_100 textarea" id="recurring_text" name="recurring_text" placeholder="Additional information on when and how often" value={$lq__event_obj?.recurring_text ?? ''}></textarea> <!-- <textarea class="ae_value event__recurring_text tinymce_editor editor_less_100 textarea" id="recurring_text" name="recurring_text" placeholder="Additional information on when and how often" value={$lq__event_obj?.recurring_text ?? ''}></textarea> -->
<Tiptap_editor
html_text={$idaa_slct.event_obj.recurring_text}
show_button_kv={{'heading__h1': false, 'heading__h2': false, 'heading__h3': false}}
/>
</label> </label>
{/if} {/if}
{#if ( $ae_loc.administrator_access || $lq__event_obj && ($lq__event_obj?.show_recurring_text || ($lq__event_obj?.recurring_text && !$lq__event_obj?.recurring_text.includes('*gen*'))) )} {#if ( $ae_loc.administrator_access || $lq__event_obj && ($lq__event_obj?.show_recurring_text || ($lq__event_obj?.recurring_text && !$lq__event_obj?.recurring_text.includes('*gen*'))) )}
@@ -941,7 +958,11 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
</label> </label>
<!-- {/if} --> <!-- {/if} -->
<fieldset class="event__contact_1"> <div
class="flex flex-col md:flex-row flex-wrap gap-1 justify-between items-start basis-1/2"
>
<fieldset class="event__contact_1 flex flex-col gap-1">
<legend class="legend">Contact 1</legend> <legend class="legend">Contact 1</legend>
<div class="ae_highlight">Contact 1 is the primary contact for this meeting.</div> <div class="ae_highlight">Contact 1 is the primary contact for this meeting.</div>
@@ -1020,7 +1041,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
</span> </span>
</fieldset> </fieldset>
<fieldset class="event__contact_2"> <fieldset class="event__contact_2 flex flex-col gap-1">
<legend class="legend">Contact 2</legend> <legend class="legend">Contact 2</legend>
<span class="ae_group"> <span class="ae_group">
<label for="contact_2_full_name">Full name <label for="contact_2_full_name">Full name
@@ -1042,6 +1063,9 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
</label> </label>
</span> </span>
</fieldset> </fieldset>
</div>
</section> </section>
<hr> <hr>
@@ -1054,7 +1078,8 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
type="button" type="button"
class="ae_btn ae_d_none_toggle ae_float_right ae_smallest btn btn-xs btn-info btn-sm variant-ghost-warning hover:variant-filled-warning transition" class="ae_btn ae_d_none_toggle ae_float_right ae_smallest btn btn-xs btn-info btn-sm variant-ghost-warning hover:variant-filled-warning transition"
on:click={() => { on:click={() => {
document.querySelector('.ae_d_none_content').classList.toggle('ae_fade_out'); document.querySelector('.ae_d_none_content').classList.toggle('ae_fade_in'); // document.querySelector('.ae_d_none_content').classList.toggle('ae_fade_out'); document.querySelector('.ae_d_none_content').classList.toggle('ae_fade_in');
$idaa_loc.show__admin_options = !$idaa_loc.show__admin_options;
}} }}
> >
<span class="fas fa-eye m-1"></span> <span class="fas fa-eye m-1"></span>
@@ -1062,48 +1087,62 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
</button> </button>
</h3> </h3>
<span class="ae_d_none_content ae_fade_out"> <span
<label>Hide class:hidden={!$ae_loc.trusted_access && !$idaa_loc.show__admin_options}
<input >
type="checkbox"
name="hide" <span
id="hide" class="flex flex-row flex-wrap items-center justify-between"
bind:checked={$idaa_slct.event_obj.hide}
class="checkbox"
> >
</label> <label>Hide
<input
type="checkbox"
name="hide"
id="hide"
bind:checked={$idaa_slct.event_obj.hide}
class="checkbox"
>
</label>
<label>Priority <label>Priority
<input <input
type="checkbox" type="checkbox"
name="priority" name="priority"
id="priority" id="priority"
bind:checked={$idaa_slct.event_obj.priority} bind:checked={$idaa_slct.event_obj.priority}
class="checkbox" class="checkbox"
>
</label>
<label>Sort <input type="number" name="sort" value={$lq__event_obj?.sort} class="input w-24" /></label>
<label>Group <input type="text" name="group" value={$lq__event_obj?.group ? $lq__event_obj?.group : ''} max="100" class="input w-40" /></label>
{#if $ae_loc.administrator_access}
<label>Enable
<input
type="checkbox"
name="enable"
id="enable"
bind:checked={$idaa_slct.event_obj.enable}
class="checkbox"
>
</label>
{/if}
</span>
{#if $ae_loc.trusted_access}
<label
for="notes"
> >
</label> Internal Staff Notes
<!-- <textarea id="notes" name="notes" class="ae_value event__notes tinymce_editor editor_basic_200 textarea" rows="2" cols="70" value={$lq__event_obj?.notes}></textarea> -->
<label>Sort <input type="number" name="sort" value={$lq__event_obj?.sort} class="input w-24" /></label> <Tiptap_editor
html_text={$idaa_slct.event_obj.notes}
<label>Group <input type="text" name="group" value={$lq__event_obj?.group ? $lq__event_obj?.group : ''} max="100" class="input w-40" /></label> show_button_kv={{'heading__h1': false, 'heading__h2': false, 'heading__h3': false}}
/>
{#if $ae_loc.administrator_access} </label>
<label>Enable {/if}
<input
type="checkbox"
name="enable"
id="enable"
bind:checked={$idaa_slct.event_obj.enable}
class="checkbox"
>
</label>
{/if}
{#if $ae_loc.trusted_access}
<label>Internal Staff Notes
<textarea id="notes" name="notes" class="ae_value event__notes tinymce_editor editor_basic_200 textarea" rows="2" cols="70" value={$lq__event_obj?.notes}></textarea>
</label>
{/if}
</span> <!-- END: span ae_show_hide_content --> </span> <!-- END: span ae_show_hide_content -->
@@ -1143,10 +1182,10 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
$idaa_slct.event_id = null; $idaa_slct.event_id = null;
$lq__event_obj = {}; $lq__event_obj = {};
}} }}
class="ae_btn ae_smallest btn btn-danger" type="button" class="btn btn-sm variant-soft-warning" type="button"
title="Delete record permanently" title="Delete record permanently"
> >
<span class="fas fa-minus"></span> Delete <span class="fas fa-minus m-1"></span> Delete
</button> </button>
{:else if $ae_loc.trusted_access} {:else if $ae_loc.trusted_access}
<button <button
@@ -1157,10 +1196,10 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
$idaa_slct.event_id = null; $idaa_slct.event_id = null;
$lq__event_obj = {}; $lq__event_obj = {};
}} }}
class="ae_btn ae_smallest btn btn-danger" type="button" class="btn btn-sm variant-soft-warning" type="button"
title="Disable record to delete" title="Disable record to delete"
> >
<span class="fas fa-minus"></span> Delete <span class="fas fa-minus m-1"></span> Delete
</button> </button>
{:else} {:else}
<button <button
@@ -1171,10 +1210,10 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
$idaa_slct.event_id = null; $idaa_slct.event_id = null;
$lq__event_obj = {}; $lq__event_obj = {};
}} }}
class="ae_btn ae_smallest btn btn-danger" type="button" class="btn btn-sm variant-soft-warning" type="button"
title="Hide record to delete" title="Hide record to delete"
> >
<span class="fas fa-comment-slash"></span> Delete <span class="fas fa-comment-slash m-1"></span> Delete
</button> </button>
{/if} {/if}
{/if} {/if}