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

Quick save before trying more drastic options for sorting and filtering...

Browse Source
This commit is contained in:
Scott Idem
2024-03-22 14:07:07 -04:00
parent 742205b84b
commit f97c83db03
6 changed files with 504 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/lib/ae_events_functions.ts
View File

@@ -399,6 +399,50 @@ async function handle_load_ae_obj_li__exhibit_tracking({api_cfg, exhibit_id, par
}
// Updated 2024-03-22
async function handle_create_ae_obj__exhibit_tracking({api_cfg, exhibit_id, event_badge_id, external_person_id, params={}, try_cache=false}) {
console.log(`*** handle_create_ae_obj__exhibit_tracking() *** exhibit_id=${exhibit_id}, event_badge_id=${event_badge_id}`);
let params_json: key_val = {};
// $events_sess.exhibits.status_create__exhibit_tracking = 'loading';
ae_promises.create__event_exhibit_tracking = await api.create_ae_obj_crud({
api_cfg: api_cfg,
obj_type: 'event_exhibit_tracking',
fields: {
event_exhibit_id_random: exhibit_id,
event_badge_id_random: event_badge_id,
external_person_id: external_person_id,
},
key: api_cfg.api_crud_super_key,
params: params,
return_obj: true,
log_lvl: 1
})
.then(function (exhibit_tracking_obj_create_result) {
// console.log('Exhibit tracking create:', exhibit_tracking_obj_create_result);
if (exhibit_tracking_obj_create_result) {
// $slct.exhibit_tracking_obj = exhibit_tracking_obj_create_result;
handle_db_save_ae_obj_li__exhibitor_tracking({obj_type: 'event_exhibit_tracking', obj_li: [exhibit_tracking_obj_create_result]});
return exhibit_tracking_obj_create_result;
} else {
// $slct.exhibit_tracking_obj = [];
return null;
}
})
.catch(function (error) {
console.log('No results returned or failed.', error);
})
.finally(function () {
// console.log('Exhibit tracking create:', exhibit_tracking_obj_create_result);
// return exhibit_tracking_obj_create_result;
});
console.log('ae_promises.create__event_exhibit_tracking:', ae_promises.create__event_exhibit_tracking);
return ae_promises.create__event_exhibit_tracking;
}
// This function will loop through the badge_obj_li and save each one to the DB.
function handle_db_save_ae_obj_li__badge({obj_type, obj_li}) {
@@ -550,6 +594,8 @@ function handle_db_save_ae_obj_li__exhibitor_tracking({obj_type, obj_li}) {
event_badge_id_random: obj.event_badge_id_random,
event_person_id_random: obj.event_person_id_random,
external_person_id: obj.external_person_id,
exhibitor_notes: obj.exhibitor_notes,
responses_json: obj.responses_json,
@@ -562,10 +608,21 @@ function handle_db_save_ae_obj_li__exhibitor_tracking({obj_type, obj_li}) {
event_badge_family_name: obj.event_badge_family_name,
event_badge_designations: obj.event_badge_designations,
event_badge_full_name: obj.event_badge_full_name,
event_badge_full_name_override: obj.event_badge_full_name_override,
event_badge_professional_title: obj.event_badge_professional_title,
event_badge_professional_title_override: obj.event_badge_professional_title_override,
event_badge_affiliations: obj.event_badge_affiliations,
event_badge_affiliations_override: obj.event_badge_affiliations_override,
event_badge_email: obj.event_badge_email,
event_badge_email_override: obj.event_badge_email_override,
event_badge_location: obj.event_badge_location,
event_badge_location_override: obj.event_badge_location_override,
event_badge_country: obj.event_badge_country,
enable: obj.enable,
hide: obj.hide,
@@ -599,5 +656,6 @@ let export_obj = {
handle_load_ae_obj_id__exhibit: handle_load_ae_obj_id__exhibit,
handle_load_ae_obj_li__exhibit: handle_load_ae_obj_li__exhibit,
handle_load_ae_obj_li__exhibit_tracking: handle_load_ae_obj_li__exhibit_tracking,
handle_create_ae_obj__exhibit_tracking: handle_create_ae_obj__exhibit_tracking,
};
export let events_func = export_obj;

2
src/lib/ae_events_stores.ts
View File

@@ -125,6 +125,8 @@ let events_session_data_struct: key_val = {
show_form__license: false,
show_form__search: false,
show_form__scan: false,
show_form__view_lead: false, // Set to event_exhibit_tracking_id
// show_form__view_lead: [],
show_confirm__add_lead: [],

16
src/lib/db_events.ts
View File

@@ -100,6 +100,8 @@ export interface Exhibit_tracking {
event_badge_id_random: string;
event_person_id_random: null|string; // Is this needed?
external_person_id: null|string; // This is an email address
exhibitor_notes: null|string;
responses_json: null|string;
@@ -112,12 +114,21 @@ export interface Exhibit_tracking {
event_badge_family_name: null|string;
event_badge_designations: null|string;
event_badge_full_name: string;
event_badge_full_name_override: null|string;
event_badge_professional_title: null|string;
event_badge_professional_title_override: null|string;
event_badge_affiliations: null|string;
event_badge_affiliations_override: null|string;
event_badge_email: null|string;
event_badge_email_override: null|string;
event_badge_location: null|string;
event_badge_location_override: null|string;
event_badge_country: null|string;
enable: null|boolean;
hide: null|boolean;
@@ -145,7 +156,10 @@ export class MySubClassedDexie extends Dexie {
exhibits: `
id_random, event_exhibit_id_random, code, name, description, staff_passcode, data_json, license_max, license_li_json, cfg_json, enable, hide, priority, sort, group, notes, created_on, updated_on, [priority+name]`,
exhibit_tracking: `
id_random, event_exhibit_tracking_id_random, event_exhibit_id_random, event_badge_id_random, event_person_id_random, exhibitor_notes, responses_json, data_json, event_badge_full_name, event_badge_email, enable, hide, priority, sort, group, notes, created_on, updated_on`
id_random, event_exhibit_tracking_id_random, event_exhibit_id_random, event_badge_id_random, event_person_id_random,
exhibitor_notes, responses_json, data_json,
event_badge_full_name, event_badge_email,
enable, hide, priority, sort, group, notes, created_on, updated_on`
});
}
}

40
src/routes/events_leads/exhibit/[slug]/leads_add_scan.svelte
View File

@@ -1,6 +1,5 @@
<script lang="ts">
// export let data;
// console.log(`ae_events_leads exhibit [slug] leads_manage.svelte data:`, data);
console.log(`ae_events_leads exhibit [slug] leads_add_scan.svelte`, $events_slct);
import { ae_util } from '$lib/ae_utils';
import { liveQuery } from "dexie";
@@ -17,8 +16,6 @@ $events_sess.leads.show_form__search = true;
// TEMPORARY: For testing and development
// let param_slug_event_exhibit_id = data.params.slug;
console.log(`ae_events_leads exhibit [slug] leads_add_scan.svelte:`, $events_slct);
let event_exhibit_obj = liveQuery(
() => db_events.exhibits.get($events_slct.exhibit_id)
);
@@ -384,17 +381,6 @@ function handle_qr_camera(event) {
<p>Are you sure you want to add <strong>{event_badge_obj_v2.full_name}</strong> to the leads list?</p>
<p>Badge ID: <strong>{event_badge_obj_v2.event_badge_id_random}</strong></p>
<div class="flex flex-row gap-16 justify-center items-center">
<button
type="button"
class="btn variant-soft-primary"
on:click={() => {
console.log(`Add ${event_badge_obj_v2.full_name} ${event_badge_obj_v2.email} to the leads list`);
$events_sess.leads.show_confirm__add_lead[index] = false;
}}
>
<span class="fas fa-check mx-1"></span>
Yes
</button>
<button
type="button"
class="btn variant-soft-primary"
@@ -406,6 +392,30 @@ function handle_qr_camera(event) {
<span class="fas fa-times mx-1"></span>
No
</button>
<button
type="button"
class="btn variant-soft-primary"
on:click={() => {
console.log(`Add ${event_badge_obj_v2.full_name} ${event_badge_obj_v2.email} to the leads list`);
events_func.handle_create_ae_obj__exhibit_tracking({api_cfg: $ae_api, exhibit_id: $events_slct.exhibit_id, event_badge_id: event_badge_obj_v2.event_badge_id_random, external_person_id: $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id].key, })
.then((result) => {
console.log(result);
if (result) {
$events_sess.leads.show_confirm__add_lead[index] = false;
} else {
console.log('Something went wrong with adding the lead to the list.');
}
});
// $events_sess.leads.show_confirm__add_lead[index] = false;
}}
>
<span class="fas fa-check mx-1"></span>
Yes
</button>
</div>
</section> <!-- .popover__content -->
</section> <!-- .ae_quick_popover -->

88
src/routes/events_leads/exhibit/[slug]/leads_list.svelte
View File

@@ -8,7 +8,7 @@ import { db_events } from "$lib/db_events";
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
// let param_slug_event_exhibit_id = data.params.slug;
import Leads_view_lead from './leads_view_lead.svelte';
let event_exhibit_obj = liveQuery(
() => db_events.exhibits.get($events_slct.exhibit_id)
@@ -34,19 +34,37 @@ let event_exhibit_obj = liveQuery(
// // .toArray()
// );
// Version 2: This does not work yet
// Testing examples:
// .where({event_exhibit_id_random: $events_slct.exhibit_id, enable: true, hide: false})
// .where({event_exhibit_id_random: $events_slct.exhibit_id})
// .where('event_exhibit_id_random').equals($events_slct.exhibit_id)
// .and('enable').equals(true)
// .reverse()
// .sortBy('updated_on') // Use sortBy() instead of orderBy().
// .reverse()
// .sortBy('created_on') // Use sortBy() instead of orderBy(). toArray() is also not needed???
// .toArray()
// Version 2: This needs work...
// This is using Dexie JS as a wrapper for IndexedDB
// This should only show exhibit_tracking objects that are enabled and not hidden.
// The final results should be sorted by priority, sort, created_on DESC, updated_on DESC
let event_exhibit_tracking_obj_li = liveQuery(
// () => db_events.exhibits.toArray()
() => db_events.exhibit_tracking
// .where({event_exhibit_id_random: $events_slct.exhibit_id, enable: true, hide: false})
.where({event_exhibit_id_random: $events_slct.exhibit_id})
// .where('event_exhibit_id_random').equals($events_slct.exhibit_id)
// .and('enable').equals(true)
.sortBy('created_on') // Use sortBy() instead of orderBy(). toArray() is also not needed???
// .toArray()
.reverse()
.sortBy('created_on') // Use sortBy() instead of orderBy().
);
// let update_submit_results = null;
</script>
@@ -170,6 +188,10 @@ let event_exhibit_tracking_obj_li = liveQuery(
<div class="person_container flex flex-col lg:flex-row gap-1 wrap justify-between">
<button
on:click={() => {
$events_slct.exhibit_tracking_id = event_exhibit_tracking_obj.event_exhibit_tracking_id_random;
$events_slct.exhibit_tracking_obj = event_exhibit_tracking_obj;
$events_sess.leads.show_form__view_lead = $events_slct.exhibit_tracking_id;
// $events_sess.leads.show_form__view_lead[$events_slct.exhibit_tracking_id] = true;
}}
class="btn btn-sm variant-soft-primary min-w-60 flex flex-row justify-between items-center gap-0.5"
>
@@ -207,8 +229,62 @@ let event_exhibit_tracking_obj_li = liveQuery(
</section>
<!-- This block needs to be moved or something. It takes up too much space! -->
{#if $events_sess.leads.show_form__view_lead}
<Leads_view_lead />
{/if}
<style lang="postcss">
.test_dim {
opacity: 0.25;
}
/* Use the div.ae_quick_modal_container to block background clicks when using the section.ae_quick_popover. */
div.ae_quick_modal_container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color: hsla(0, 0%, 0%, .5);
}
/* The section.ae_quick_popover should be above the rest of the content and centered on the page. */
section.ae_quick_popover {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
background-color: hsla(0, 0%, 100%, .95);
padding: 1rem;
border-radius: .5rem;
box-shadow: 0 0 1rem hsla(0, 0%, 0%, .5);
min-height: 98%;
min-width: 98%;
}
section.ae_quick_popover_small {
position: fixed;
top: 1em;
left: 50%;
transform: translate(-50%, 0%);
z-index: 100;
background-color: hsla(0, 0%, 100%, .95);
padding: 1rem;
border-radius: .5rem;
box-shadow: 0 0 1rem hsla(0, 0%, 0%, .5);
min-hight: 24rem;
max-height: 95%;
min-width: 50%;
max-width: 95%;
}
</style>

322
src/routes/events_leads/exhibit/[slug]/leads_view_lead.svelte Normal file
View File

@@ -0,0 +1,322 @@
<script lang="ts">
console.log(`ae_events_leads exhibit [slug] leads_view.svelte`);
import { ae_util } from '$lib/ae_utils';
import { liveQuery } from "dexie";
import { db_events } from "$lib/db_events";
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
import { events_func } from '$lib/ae_events_functions';
$: event_exhibit_obj = liveQuery(
() => db_events.exhibits.get($events_slct.exhibit_id)
);
$: event_exhibit_tracking_obj = liveQuery(
() => db_events.exhibit_tracking.get($events_slct.exhibit_tracking_id)
);
function handle_submit_form_lead_update() {
}
</script>
<!-- <section class="leads_view min-w-full flex flex-col wrap justify-center items-center space-y-4 ae_h_scrollfix"> -->
<div class="ae_quick_modal_container">
<section
class="
ae_quick_popover
events__leads__view_lead
z-50
flex
flex-col
gap-4
justify-stretch
max-h-full
min-w-full
"
>
<header class="popover__header flex gap-1 justify-between items-center p-1 border-b">
<h2 class="h3">Lead: {$event_exhibit_tracking_obj?.event_badge_full_name} ({$event_exhibit_tracking_obj?.event_exhibit_tracking_id_random})</h2>
<div class="popover__actions">
<button
type="button"
class="btn variant-soft-primary"
on:click={() => {
$events_sess.leads.show_form__view_lead = false;
}}
>
<span class="fas fa-times mx-1"></span>
Close
</button>
</div>
</header>
<section class="popover__content grow flex flex-col gap-4 items-center ae_modal_scrollfix">
<div class="readonly_values">
<div class="email">
<span class="label">Email:</span>
<span class="value">
<a href="mailto:{$event_exhibit_tracking_obj?.event_badge_email}">{$event_exhibit_tracking_obj?.event_badge_given_name} {$event_exhibit_tracking_obj?.event_badge_family_name} &lt;{$event_exhibit_tracking_obj?.event_badge_email}&gt; </a>
</span>
</div>
{#if $event_exhibit_tracking_obj?.event_badge_professional_title || $event_exhibit_tracking_obj?.event_badge_professional_title_override}
<div class="professional_title">
<span class="label" title="Professional Title/Degrees/Credentials">Title/Degrees/Credentials:</span>
<span class="value">
{#if $event_exhibit_tracking_obj?.event_badge_professional_title_override}
{@html $event_exhibit_tracking_obj?.event_badge_professional_title_override}
{:else}
{@html $event_exhibit_tracking_obj?.event_badge_professional_title}
{/if}
</span>
</div>
{/if}
{#if $event_exhibit_tracking_obj?.event_badge_affiliations || $event_exhibit_tracking_obj?.event_badge_affiliations_override}
<div class="affiliations">
<span class="label">Affiliations:</span>
<span class="value">
{#if $event_exhibit_tracking_obj?.event_badge_affiliations_override}
{$event_exhibit_tracking_obj?.event_badge_affiliations_override}
{:else}
{$event_exhibit_tracking_obj?.event_badge_affiliations}
{/if}
</span>
</div>
{/if}
{#if $event_exhibit_tracking_obj?.event_badge_country}
<div class="location">
<span class="label">Location:</span>
<span class="value">
<!-- <span class="city">{$event_exhibit_tracking_obj?.event_badge_city}</span> -->
<!-- <span class="state_province">{$event_exhibit_tracking_obj?.event_badge_state_province}</span> -->
<span class="country">{$event_exhibit_tracking_obj?.event_badge_country}</span>
</span>
</div>
{/if}
</div> <!-- .readonly_values -->
<form
id="form__lead_update"
class="form"
on:submit|preventDefault={handle_submit_form_lead_update}
>
<!-- <input
type="text"
name="event_badge_full_name"
placeholder="Full name"
value={$event_exhibit_tracking_obj?.event_badge_full_name}
required
class="input max-w-48 m-1"
/> -->
<!-- <input
type="email"
name="event_badge_email"
placeholder="Email address"
value={$event_exhibit_tracking_obj?.event_badge_email}
required
class="input max-w-64 m-1"
/> -->
<!-- This checkbox is to mark this lead as priority/important. -->
<div class="event_lead__priority">
<label for="event_lead__priority" class="label">Priority:
<input
id="event_lead__priority"
type="checkbox"
name="priority"
value="1"
checked={$event_exhibit_tracking_obj?.priority}
class="checkbox m-1"
/>
</label>
</div>
<!-- This is a selection list for ranking options from "-- Not Selected --", "1 - Highest", "2", "3- Neutral", "4", "5 - Lowest". -->
<div class="event_lead__sort">
<label for="event_lead__sort" class="label">Rank:
<select
id="event_lead__sort"
name="sort"
class="select max-w-48 m-1"
>
<option value="" selected>-- Not Selected --</option>
<option value="1">1 - Highest</option>
<option value="2">2</option>
<option value="3">3 - Neutral</option>
<option value="4">4</option>
<option value="5">5 - Lowest</option>
</select>
</div>
<!-- These are notes by the exhibit staff about this lead -->
<div class="event_lead__exhibitor_notes">
<label for="exhibitor_notes" class="label">Notes:
<textarea
id="exhibitor_notes"
name="exhibitor_notes"
placeholder="Staff notes"
class="textarea min-w-96 m-1"
>{$event_exhibit_tracking_obj?.exhibitor_notes}</textarea>
</label>
</div>
<!-- This is for custom questions for a specific exhibit. -->
{#if $event_exhibit_obj?.leads_custom_questions_json}
<!-- Exhibit: {$event_exhibit_obj?.leads_custom_questions_json[0].code} -->
{#if $event_exhibit_obj?.leads_custom_questions_json.length > 0}
<div class="custom_questions">
<fieldset id="custom_questions">
<label for="custom_questions">Custom Questions:</label>
{#each $event_exhibit_obj?.leads_custom_questions_json as leads_custom_question, question_index}
<div>
<span class="leads_custom_question">{leads_custom_question.question}</span>
{#if (leads_custom_question.type == 'text')}
<input name="event_lead__leads_custom_question_{leads_custom_question.code}" value={($event_exhibit_tracking_obj?.responses_json && $event_exhibit_tracking_obj?.responses_json[leads_custom_question.code]) ? $event_exhibit_tracking_obj?.responses_json[leads_custom_question.code].response : null} placeholder="Response" class="leads_custom_question_response input" />
{:else if (leads_custom_question.type == 'option' && leads_custom_question.option_li)}
<select name="event_lead__leads_custom_question_{leads_custom_question.code}" class="leads_custom_question_response select" value={($event_exhibit_tracking_obj?.responses_json && $event_exhibit_tracking_obj?.responses_json[leads_custom_question.code]) ? $event_exhibit_tracking_obj?.responses_json[leads_custom_question.code].response : null}>
{#each leads_custom_question.option_li as option }
<option value="{option}">{option}</option>
{/each}
</select>
{:else}
Responses not yet configured
{/if}
<!-- {($event_exhibit_tracking_obj?.responses_json[leads_custom_question.code]) ? $event_exhibit_tracking_obj?.responses_json[leads_custom_question.code].response : null} -->
</div>
{/each}
</fieldset>
</div>
{/if}
{/if}
<div class="event_lead__external_person_id">
<div class="border border-slate-500/10 p-2 variant-soft-warning">
This is the email address of the person that originally scanned the badge. This is used to link the lead to the person that scanned the badge. This is useful for tracking who scanned the badge and who the lead is associated with.
</div>
<label for="event_lead__external_person_id" class="label">Linked to email:
<input
id="event_lead__external_person_id"
type="text"
name="external_person_id"
placeholder="Linked to email"
value={$event_exhibit_tracking_obj?.external_person_id}
required
class="input max-w-64 m-1"
/>
</label>
</div>
</form>
<div>
<!-- Exhibit: {$event_exhibit_obj?.name}<br> -->
<!-- Person: {$event_exhibit_tracking_obj?.event_badge_full_name} -->
</div>
</section> <!-- .popover__content -->
<footer class="popover__footer flex gap-1 justify-between items-center p-1 border-t">
<div class="popover__content__actions">
<button
type="submit"
form="form__update_lead"
class="btn variant-ghost-primary"
on:click={() => {
// trigger = 'save__ds__code';
// $slct_trigger = 'save__ds__code';
}}
>
<span class="fas fa-save mx-1"></span>
Save
</button>
</div>
<div class="popover__actions">
<button
type="button"
class="btn variant-soft-primary"
on:click={() => {
$events_sess.leads.show_form__view_lead = false;
}}
>
<span class="fas fa-times mx-1"></span>
Close
</button>
</div>
</footer> <!-- .popover__footer -->
</section> <!-- .ae_quick_popover -->
</div> <!-- .ae_quick_modal_container -->
<style lang="postcss">
/* Use the div.ae_quick_modal_container to block background clicks when using the section.ae_quick_popover. */
div.ae_quick_modal_container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color: hsla(0, 0%, 0%, .5);
}
/* The section.ae_quick_popover should be above the rest of the content and centered on the page. */
section.ae_quick_popover {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
background-color: hsla(0, 0%, 100%, .95);
padding: 1rem;
border-radius: .5rem;
box-shadow: 0 0 1rem hsla(0, 0%, 0%, .5);
min-height: 98%;
min-width: 98%;
}
section.ae_quick_popover_small {
position: fixed;
top: 1em;
left: 50%;
transform: translate(-50%, 0%);
z-index: 100;
background-color: hsla(0, 0%, 100%, .95);
padding: 1rem;
border-radius: .5rem;
box-shadow: 0 0 1rem hsla(0, 0%, 0%, .5);
min-hight: 24rem;
max-height: 95%;
min-width: 50%;
max-width: 95%;
}
</style>