sveltekit-ui 1.0.0

package/src/lib/Components/TableAdvanced/index.svelte

@@ -0,0 +1,268 @@
+<script>
+  import Popover from "$lib/Components/Popover/index.svelte"
+  import Button from "$lib/Components/Button/index.svelte"
+  import Checkbox from "$lib/Components/Checkbox/index.svelte"
+  import Dropdown from "$lib/Components/Dropdown/index.svelte"
+  import Slider from "$lib/Components/Slider/index.svelte"
+  import FileInput from "$lib/Components/FileInput/index.svelte"
+  import TextInput from "$lib/Components/TextInput/index.svelte"
+  import InfoBox from "$lib/Components/InfoBox/index.svelte"
+  import ContentInput from "$lib/Components/ContentInput/index.svelte"
+  import Content from "$lib/Components/Content/index.svelte"
+  import Pagination from "$lib/Components/TableAdvanced/Pagination/index.svelte"
+  import SortByInput from "$lib/Components/TableAdvanced/SortByInput/index.svelte"
+  import ColumnInput from "$lib/Components/TableAdvanced/ColumnInput/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+{#if Array.isArray(manager?.nav_items) && manager?.nav_items.length > 0}
+  <div style="display: flex; flex-wrap: wrap; gap: .5rem;">
+    {#if manager?.nav_items.includes("settings")}
+      <Button manager={manager?.settings_popover_toggle_button_manager} />
+      <Popover manager={manager?.settings_popover_manager}>
+        {#snippet content()}
+          <h4 class="label">Table ID</h4>
+          <div style="display: flex; gap: 1rem;">
+            {#if manager?.table_id}
+              <p>{manager?.table_id}</p>
+            {/if}
+            <Button manager={manager?.settings_copy_table_id_button_manager} />
+          </div>
+          <div style="display: flex; gap: .5rem; align-items: center;">
+            <h4 class="label">Table Name</h4>
+            <Button manager={manager?.settings_update_table_name_button_manager} />
+            <TextInput manager={manager?.settings_update_table_name_text_input_manager} />
+          </div>
+          {#if manager?.table_name}
+            <p>{manager?.table_name}</p>
+          {/if}
+          <div style="display: flex; gap: .5rem; align-items: center;">
+            <h4 class="label">Table Description</h4>
+            <Button manager={manager?.settings_update_table_description_button_manager} />
+            <TextInput manager={manager?.settings_update_table_description_text_input_manager} />
+          </div>
+          {#if manager?.table_description}
+            <p>{manager?.table_description}</p>
+          {/if}
+          {#if manager?.is_data_editable}
+            <Button manager={manager?.settings_preempt_delete_table_popover_button_manager} />
+            <Popover manager={manager?.settings_delete_table_popover_manager}>
+              {#snippet content()}
+                <p>This will permanently delete this table.</p>
+              {/snippet}
+              {#snippet footer()}
+                <Button manager={manager?.settings_delete_table_button_manager} />
+                <Button manager={manager?.settings_delete_table_cancel_button_manager} />
+              {/snippet}
+            </Popover>
+          {/if}
+        {/snippet}
+      </Popover>
+    {/if}
+    {#if manager?.nav_items.includes("bulk_select") && manager?.is_data_editable}
+      <Button manager={manager?.toggle_bulk_selectable_button_manager} />
+    {/if}
+    {#if manager?.is_data_editable && manager?.is_bulk_select}
+      <Button manager={manager?.bulk_delete_rows_popover_button_manager} />
+    {/if}
+    <Popover manager={manager?.bulk_delete_rows_popover_manager}>
+      {#snippet content()}
+        <p>
+          This will permanently delete these {Array.isArray(manager?.row_indexes_bulk_selected)
+            ? manager?.row_indexes_bulk_selected.length
+            : "0"} rows.
+        </p>
+      {/snippet}
+      {#snippet footer()}
+        <Button manager={manager?.bulk_delete_rows_button_manager} />
+        <Button manager={manager?.bulk_delete_rows_cancel_button_manager} />
+      {/snippet}
+    </Popover>
+    {#if manager?.nav_items.includes("insert") && manager?.is_data_editable}
+      <Button manager={manager?.insert_popover_button_manager} />
+    {/if}
+    {#if manager?.nav_items.includes("file")}
+      <Button manager={manager?.file_popover_button_manager} />
+    {/if}
+    {#if manager?.nav_items.includes("sort_by")}
+      <SortByInput manager={manager?.sort_by_input_manager} />
+    {/if}
+    {#if manager?.nav_items.includes("search")}
+      <TextInput manager={manager?.table_search_text_input_manager} />
+    {/if}
+    {#if manager?.is_paginate && manager?.nav_items.includes("pagination")}
+      <Pagination manager={manager?.pagination_manager} />
+    {/if}
+    {#if manager?.is_paginate && manager?.nav_items.includes("rows_per_page")}
+      <Dropdown manager={manager?.rows_per_page_dropdown_manager} />
+    {/if}
+    {#if manager?.is_more_to_load && manager?.nav_items.includes("load_more")}
+      <Button manager={manager?.load_more_button_manager} />
+    {/if}
+  </div>
+{/if}
+
+<Popover manager={manager?.file_popover_manager}>
+  {#snippet content()}
+    <Button manager={manager?.copy_json_button_manager} />
+    <Button manager={manager?.download_json_button_manager} />
+    <Button manager={manager?.download_csv_button_manager} />
+    <Button manager={manager?.copy_structure_button_manager} />
+  {/snippet}
+</Popover>
+<Popover manager={manager?.insert_popover_manager}>
+  {#snippet content()}
+    <div>
+      <Button manager={manager?.preempt_insert_column_button_manager} />
+      <Button manager={manager?.preempt_insert_row_button_manager} />
+      <Button manager={manager?.prempt_bulk_upload_rows_popover_button_manager} />
+    </div>
+  {/snippet}
+</Popover>
+<Popover manager={manager?.preempt_insert_column_popover_manager}>
+  {#snippet content()}
+    <ColumnInput manager={manager?.column_edit_input_manager} />
+  {/snippet}
+  {#snippet footer()}
+    <Button manager={manager?.column_edit_upsert_column_button_manager} />
+  {/snippet}
+</Popover>
+<Popover manager={manager?.preempt_insert_row_popover_manager}>
+  {#snippet content()}
+    <p class="label">Content</p>
+    {#if manager?.row_edit_content_manager}
+      <Content manager={manager?.row_edit_content_manager} />
+      {#if Number.isInteger(manager?.row_edit_index) && manager?.row_edit_delete_row_are_you_sure_popover_toggle_button_manager}
+        <Button manager={manager?.row_edit_delete_row_are_you_sure_popover_toggle_button_manager} />
+        <Popover manager={manager?.row_edit_delete_row_are_you_sure_popover_manager}>
+          {#snippet content()}
+            <p>This will delete this row.</p>
+          {/snippet}
+          {#snippet footer()}
+            <Button manager={manager?.row_edit_delete_row_button_manager} />
+            <Button manager={manager?.row_edit_delete_row_cancel_button_manager} />
+          {/snippet}
+        </Popover>
+      {/if}
+    {/if}
+  {/snippet}
+  {#snippet footer()}
+    {#if manager?.row_edit_upsert_row_button_manager}
+      <Button manager={manager?.row_edit_upsert_row_button_manager} />
+    {:else}
+      <p>Loading...</p>
+    {/if}
+  {/snippet}
+</Popover>
+<Popover manager={manager?.prempt_bulk_upload_rows_popover_manager}>
+  {#snippet content()}
+    <div>
+      <div>
+        <FileInput manager={manager?.upload_rows_file_input_manager} />
+      </div>
+      {#if !manager?.upload_rows_file_input_manager?.val}
+        <TextInput manager={manager?.upload_rows_text_input_manager} />
+      {/if}
+      <div style="display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; margin-bottom: 1rem;">
+        <Button manager={manager?.upload_rows_prepare_text_button_manager} />
+        {#if manager?.bulk_insert_rows_prepared_data}
+          <Button manager={manager?.upload_rows_clear_prepared_data_button_manager} />
+        {/if}
+      </div>
+      {#if manager?.bulk_insert_rows_prepared_data}
+        <pre>{JSON.stringify(manager?.bulk_insert_rows_prepared_data, null, 2)}</pre>
+      {/if}
+    </div>
+  {/snippet}
+  {#snippet footer()}
+    <InfoBox message={manager?.bulk_insert_rows_error_message} />
+    <Button manager={manager?.bulk_insert_rows_button_manager} />
+  {/snippet}
+</Popover>
+
+<div class="table_container">
+  <table style="margin: 0;">
+    <thead>
+      <tr>
+        {#if Array.isArray(manager?.column_ids_display_order) && manager?.column_ids_display_order.length > 0}
+          {#if manager?.is_data_editable && manager?.is_bulk_select}
+            <th>
+              <Checkbox manager={manager?.bulk_select_all_rows_toggle_checkbox_manager} />
+            </th>
+          {/if}
+          {#if manager?.is_data_editable}
+            <th></th>
+          {/if}
+          {#each manager?.column_ids_display_order as column_id}
+            <th
+              style="min-width: {manager?.columns_prepped?.[column_id]?.min_width}rem; max-width: {manager
+                ?.columns_prepped?.[column_id]?.max_width}rem;"
+            >
+              <div style="display: flex; max-height: {manager?.table_header_max_height}rem; overflow: auto;">
+                <Content manager={manager?.columns_prepped?.[column_id]?.content_manager} />
+                {#if manager?.is_data_editable}
+                  <Button manager={manager?.columns_prepped?.[column_id]?.preempt_edit_column_button_manager} />
+                {/if}
+              </div>
+              <!-- quick_sort_button_tbd-->
+            </th>
+          {/each}
+        {/if}
+      </tr>
+    </thead>
+    <tbody>
+      {#if manager?.is_loading_rows}
+        <tr>
+          <td colspan="100">
+            <div style="display: grid; place-items: stretch; max-width: 30rem; gap: 1rem; padding: 1rem;">
+              <p>Loading Rows ({Math.round(manager?.loading_rows_progress * 100)}%)...</p>
+              <div
+                style="min-height: 2rem; min-width: 100%; background-color: var(--shadow5-t); border-radius:.5rem; border: 1px solid var(--g6-t); overflow: hidden;"
+              >
+                {#key manager?.loading_rows_progress}
+                  <div
+                    style="height:100%; background-color: var(--g4-t); color: var(--g24-t); transition: width .1s linear; width:{Math.round(
+                      manager?.loading_rows_progress * 100
+                    )}%;"
+                  ></div>
+                {/key}
+              </div>
+            </div>
+          </td>
+        </tr>
+      {/if}
+      {#if Array.isArray(manager?.row_indexes_display_order_shown) && manager?.row_indexes_display_order_shown.length > 0}
+        {#each manager?.row_indexes_display_order_shown as row_i}
+          <tr>
+            {#if Array.isArray(manager?.column_ids_display_order) && manager?.column_ids_display_order.length > 0}
+              {#if manager?.is_data_editable && manager?.is_bulk_select}
+                <td style="max-height: {manager?.table_row_max_height}rem; overflow: auto; content-visibility: auto;">
+                  <Checkbox manager={manager?.rows_prepped[row_i]?.bulk_select_checkbox_manager} />
+                </td>
+              {/if}
+              {#if manager?.is_data_editable}
+                <td style="max-height: {manager?.table_row_max_height}rem; overflow: auto; content-visibility: auto;">
+                  <Button manager={manager?.rows_prepped[row_i]?.preempt_edit_row_button_input_manager} />
+                </td>
+              {/if}
+              {#each manager?.column_ids_display_order as column_id}
+                <td
+                  style="min-width: {manager?.columns_prepped?.[column_id]?.min_width}rem; max-width: {manager
+                    ?.columns_prepped?.[column_id]?.max_width}rem; content-visibility: auto;"
+                >
+                  <div
+                    style="max-height: {manager?.table_row_max_height}rem; overflow: auto; text-align: {manager
+                      ?.columns_prepped?.[column_id]?.alignment ?? 'left'};"
+                  >
+                    <Content manager={manager?.rows_prepped[row_i]?.columns?.[column_id]?.content_manager} />
+                  </div>
+                </td>
+              {/each}
+            {/if}
+          </tr>
+        {/each}
+      {/if}
+    </tbody>
+  </table>
+</div>