Slow work on creating a textarea element thing.

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

View File

@@ -1,12 +1,13 @@
<script lang="ts">
import { createEventDispatcher, onDestroy, onMount } from 'svelte';
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 { api } from '$lib/api';
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 Tiptap_editor from '$lib/element_tiptap_editor.svelte';
export let lq__event_obj: any;
// export let container_class_li = [];
@@ -281,11 +282,11 @@ async function handle_submit_form(event){
event_data['name'] = event_meeting_data.name;
if (tinyMCE.get('description')) {
event_data['description'] = tinyMCE.get('description').getContent();
} else {
event_data['description'] = event_meeting_data.description;
}
// if (tinyMCE.get('description')) {
// event_data['description'] = tinyMCE.get('description').getContent();
// } else {
// event_data['description'] = event_meeting_data.description;
// }
event_data['type'] = event_meeting_data.type;
event_data['physical'] = !!event_meeting_data.physical;
event_data['virtual'] = !!event_meeting_data.virtual;
@@ -315,22 +316,22 @@ async function handle_submit_form(event){
}
event_data['location_address_json'] = address;
if (tinyMCE.get('location_text')) {
event_data['location_text'] = tinyMCE.get('location_text').getContent();
} else {
event_data['location_text'] = event_meeting_data.location_text;
}
// if (tinyMCE.get('location_text')) {
// event_data['location_text'] = tinyMCE.get('location_text').getContent();
// } else {
// event_data['location_text'] = event_meeting_data.location_text;
// }
event_data['attend_url'] = event_meeting_data.attend_url;
event_data['attend_url_passcode'] = event_meeting_data.attend_url_passcode;
event_data['attend_phone'] = event_meeting_data.attend_phone;
event_data['attend_phone_passcode'] = event_meeting_data.attend_phone_passcode;
if (tinyMCE.get('attend_text')) {
event_data['attend_text'] = tinyMCE.get('attend_text').getContent();
} else {
event_data['attend_text'] = event_meeting_data.attend_text;
}
// if (tinyMCE.get('attend_text')) {
// event_data['attend_text'] = tinyMCE.get('attend_text').getContent();
// } else {
// event_data['attend_text'] = event_meeting_data.attend_text;
// }
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;
}
if (tinyMCE.get('recurring_text')) {
event_data['recurring_text'] = tinyMCE.get('recurring_text').getContent();
} else {
event_data['recurring_text'] = event_meeting_data.recurring_text;
}
// if (tinyMCE.get('recurring_text')) {
// event_data['recurring_text'] = tinyMCE.get('recurring_text').getContent();
// } else {
// event_data['recurring_text'] = event_meeting_data.recurring_text;
// }
console.log(event_data['recurring_text']);
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');
}
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')}.`;
@@ -446,11 +447,11 @@ async function handle_submit_form(event){
event_data['enable'] = !!event_meeting_data.enable;
}
if (tinyMCE.get('notes')) {
event_data['notes'] = tinyMCE.get('notes').getContent();
} else {
event_data['notes'] = event_meeting_data.notes;
}
// if (tinyMCE.get('notes')) {
// event_data['notes'] = tinyMCE.get('notes').getContent();
// } else {
// event_data['notes'] = event_meeting_data.notes;
// }
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}
>
<form on:submit|preventDefault={handle_submit_form} class="">
<form on:submit|preventDefault={handle_submit_form} class="space-y-1">
{#await update_event_obj_promise}
<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" />
</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> -->
<Tiptap_editor
html_text={$idaa_slct.event_obj.description}
/>
</label>
<Editor
<!-- <Editor
id="description"
bind:value={$idaa_slct.event_obj.description}
licenseKey="gpl"
license_key="gpl"
></Editor>
></Editor> -->
<div>
<label class="">
@@ -641,7 +646,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
<option value="Family Recovery">Family Recovery</option>
</select>
</label>
<ul>
<ul class="list-disc list-inside">
<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>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
id="physical_address"
class="physical_address fieldset"
class="physical_address fieldset space-y-1"
class:hidden={!$idaa_slct.event_obj?.physical}>
<legend>Address</legend>
@@ -710,7 +715,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
<fieldset
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
<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>
<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>
<fieldset
id="virtual"
class="virtual"
class:ae_d_none={!$lq__event_obj?.virtual}>
class="virtual space-y-1"
class:ae_d_none={!$idaa_slct.event_obj.virtual}>
<legend>Virtual/Online</legend>
<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>
<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>
</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 -->
<h3 class="h2">Recurring and When</h3>
<fieldset class="event__recurring">
<!-- <fieldset class="event__recurring">
<legend class="legend">Recurring</legend>
<div class="ae_group">
<label for="recurring_no" class="">No, only once
@@ -815,7 +828,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
>
</label>
</div>
</fieldset>
</fieldset> -->
<fieldset
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*'))) )}
<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
<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>
{/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*'))) )}
@@ -941,7 +958,11 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
</label>
<!-- {/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>
<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>
</fieldset>
<fieldset class="event__contact_2">
<fieldset class="event__contact_2 flex flex-col gap-1">
<legend class="legend">Contact 2</legend>
<span class="ae_group">
<label for="contact_2_full_name">Full name
@@ -1042,6 +1063,9 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
</label>
</span>
</fieldset>
</div>
</section>
<hr>
@@ -1054,7 +1078,8 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
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"
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>
@@ -1062,48 +1087,62 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
</button>
</h3>
<span class="ae_d_none_content ae_fade_out">
<label>Hide
<input
type="checkbox"
name="hide"
id="hide"
bind:checked={$idaa_slct.event_obj.hide}
class="checkbox"
<span
class:hidden={!$ae_loc.trusted_access && !$idaa_loc.show__admin_options}
>
<span
class="flex flex-row flex-wrap items-center justify-between"
>
</label>
<label>Hide
<input
type="checkbox"
name="hide"
id="hide"
bind:checked={$idaa_slct.event_obj.hide}
class="checkbox"
>
</label>
<label>Priority
<input
type="checkbox"
name="priority"
id="priority"
bind:checked={$idaa_slct.event_obj.priority}
class="checkbox"
<label>Priority
<input
type="checkbox"
name="priority"
id="priority"
bind:checked={$idaa_slct.event_obj.priority}
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>
<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}
{#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}
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> -->
<Tiptap_editor
html_text={$idaa_slct.event_obj.notes}
show_button_kv={{'heading__h1': false, 'heading__h2': false, 'heading__h3': false}}
/>
</label>
{/if}
</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;
$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"
>
<span class="fas fa-minus"></span> Delete
<span class="fas fa-minus m-1"></span> Delete
</button>
{:else if $ae_loc.trusted_access}
<button
@@ -1157,10 +1196,10 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
$idaa_slct.event_id = null;
$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"
>
<span class="fas fa-minus"></span> Delete
<span class="fas fa-minus m-1"></span> Delete
</button>
{:else}
<button
@@ -1171,10 +1210,10 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
$idaa_slct.event_id = null;
$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"
>
<span class="fas fa-comment-slash"></span> Delete
<span class="fas fa-comment-slash m-1"></span> Delete
</button>
{/if}
{/if}