sveltekit-ui 1.0.0

package/src/routes/[component]/Showcase/TableAdvanced/index.svelte

@@ -0,0 +1,888 @@
+<script>
+  import TableAdvanced from "$lib/Components/TableAdvanced/index.svelte"
+  import { create_table_advanced_manager } from "$lib/Components/TableAdvanced/index.svelte.js"
+  import { PUBLIC_APPLE_MAPKIT_JS_API_KEY } from "$env/static/public"
+  import { deep_copy } from "$lib/client/index.js"
+
+  const test_row_input_content = {
+    type_id: "div",
+    selector_id: "div_jxhvczqm",
+    children: [
+      {
+        type_id: "div",
+        selector_id: "div_hghtjdix",
+        children: [
+          {
+            type_id: "span",
+            selector_id: "span_pnxoxyns",
+            children: [
+              {
+                type_id: "strong",
+                selector_id: "strong_wzqcpnxy",
+                children: [],
+                attributes: {
+                  content: "id",
+                },
+              },
+              {
+                type_id: "em",
+                selector_id: "em_vdjulmfu",
+                children: [],
+                attributes: {
+                  content: " autogenerated ",
+                },
+              },
+            ],
+            attributes: {},
+          },
+          {
+            type_id: "base_text",
+            selector_id: "dvobhkqp",
+            children: [],
+            attributes: {
+              content_from_variable_path: ["variables", "rows", ["loops", 0], "id"],
+              size: 10,
+            },
+          },
+          {
+            type_id: "br",
+            selector_id: "br_gqfqxajt",
+            children: [],
+            attributes: {},
+          },
+        ],
+        attributes: {},
+      },
+      {
+        type_id: "div",
+        selector_id: "div_escitwrx",
+        children: [
+          {
+            type_id: "object_uniform_input",
+            selector_id: "lipxplrm",
+            children: [
+              {
+                type_id: "div",
+                selector_id: "ymcklbcy",
+                children: [
+                  {
+                    type_id: "div",
+                    selector_id: "drsdciju",
+                    children: [
+                      {
+                        type_id: "base_text",
+                        selector_id: "oejzzhrk",
+                        children: [],
+                        attributes: {
+                          content: "seat_order_l_to_r:",
+                        },
+                      },
+                      {
+                        type_id: "text_input",
+                        selector_id: "lkblpxsl",
+                        children: [],
+                        attributes: {
+                          type: "number",
+                          val_from_variable_path: [
+                            "variables",
+                            "rows",
+                            ["loops", 1],
+                            "sharks",
+                            ["loops", 0],
+                            "seat_order_l_to_r",
+                          ],
+                        },
+                      },
+                    ],
+                    attributes: {},
+                  },
+                ],
+                attributes: {},
+              },
+            ],
+            attributes: {
+              val_from_variable_path: ["variables", "rows", ["loops", 0], "sharks"],
+              property_key_table_id: "fwzniuwaxgplzhakcpqx",
+              label: "sharks",
+            },
+          },
+        ],
+        attributes: {},
+      },
+      {
+        type_id: "div",
+        selector_id: "div_chvlwjbr",
+        children: [
+          {
+            type_id: "table_row_id_input",
+            selector_id: "rjoyxsas",
+            children: [],
+            attributes: {
+              table_id: "gqcilfsvgggxouxxupzq",
+              label: "season",
+            },
+          },
+        ],
+        attributes: {},
+      },
+      {
+        type_id: "div",
+        selector_id: "div_ukbvlckf",
+        children: [
+          {
+            type_id: "text_input",
+            selector_id: "qaqweuks",
+            children: [],
+            attributes: {
+              type: "number",
+              val_from_variable_path: ["variables", "rows", ["loops", 0], "season_number"],
+              label: "season_number",
+            },
+          },
+        ],
+        attributes: {},
+      },
+      {
+        type_id: "div",
+        selector_id: "div_rqanuqun",
+        children: [
+          {
+            type_id: "text_input",
+            selector_id: "pvabnllw",
+            children: [],
+            attributes: {
+              type: "number",
+              val_from_variable_path: ["variables", "rows", ["loops", 0], "episode_number"],
+              label: "episode_number",
+            },
+          },
+        ],
+        attributes: {},
+      },
+      {
+        type_id: "div",
+        selector_id: "div_sqzsqmdj",
+        children: [
+          {
+            type_id: "text_input",
+            selector_id: "oomvgein",
+            children: [],
+            attributes: {
+              type: "number",
+              val_from_variable_path: ["variables", "rows", ["loops", 0], "episode_number_overall"],
+              label: "episode_number_overall",
+            },
+          },
+        ],
+        attributes: {},
+      },
+      {
+        type_id: "div",
+        selector_id: "div_qtmiebqv",
+        children: [
+          {
+            type_id: "text_input",
+            selector_id: "wogzeujk",
+            children: [],
+            attributes: {
+              type: "number",
+              val_from_variable_path: ["variables", "rows", ["loops", 0], "viewers_in_millions"],
+              label: "viewers_in_millions",
+            },
+          },
+        ],
+        attributes: {},
+      },
+      {
+        type_id: "div",
+        selector_id: "div_xjoebvfy",
+        children: [
+          {
+            type_id: "time_input",
+            selector_id: "ypqcitbz",
+            children: [],
+            attributes: {
+              val_type: "epoch",
+              val_from_variable_path: ["variables", "rows", ["loops", 0], "air_date"],
+              label: "air_date",
+            },
+          },
+        ],
+        attributes: {},
+      },
+      {
+        type_id: "div",
+        selector_id: "div_xzrkrlhc",
+        children: [
+          {
+            type_id: "text_input",
+            selector_id: "zcbbkbqx",
+            children: [],
+            attributes: {
+              type: "number",
+              val_from_variable_path: ["variables", "rows", ["loops", 0], "prod_code"],
+              label: "prod_code",
+            },
+          },
+        ],
+        attributes: {},
+      },
+      {
+        type_id: "div",
+        selector_id: "div_xzaarlhc",
+        children: [
+          {
+            type_id: "base_text",
+            selector_id: "jajajaj",
+            children: [],
+            attributes: {
+              content: "location_test",
+            },
+          },
+          {
+            type_id: "location_input",
+            selector_id: "zqqbkbqx",
+            children: [],
+            attributes: {
+              label: "location",
+              is_popover_button: true,
+              is_popover: true,
+              val_from_variable_path: ["variables", "rows", ["loops", 0], "location"],
+            },
+          },
+        ],
+        attributes: {},
+      },
+      {
+        type_id: "div",
+        selector_id: "div_erlnynoa",
+        children: [
+          {
+            type_id: "span",
+            selector_id: "span_zhksqepo",
+            children: [
+              {
+                type_id: "strong",
+                selector_id: "strong_gxtxtoar",
+                children: [],
+                attributes: {
+                  content: "db_epoch_created",
+                },
+              },
+              {
+                type_id: "em",
+                selector_id: "em_zmhymiri",
+                children: [],
+                attributes: {
+                  content: " autogenerated ",
+                },
+              },
+            ],
+            attributes: {},
+          },
+          {
+            type_id: "time",
+            selector_id: "fiujqeqz",
+            children: [],
+            attributes: {
+              format: "epoch",
+              val_from_variable_path: ["variables", "rows", ["loops", 0], "db_epoch_created"],
+            },
+          },
+          {
+            type_id: "br",
+            selector_id: "br_ncfvgeks",
+            children: [],
+            attributes: {},
+          },
+        ],
+        attributes: {},
+      },
+      {
+        type_id: "div",
+        selector_id: "div_ctqanaev",
+        children: [
+          {
+            type_id: "span",
+            selector_id: "span_egiboqfu",
+            children: [
+              {
+                type_id: "strong",
+                selector_id: "strong_jnvuzdvr",
+                children: [],
+                attributes: {
+                  content: "db_epoch_updated",
+                },
+              },
+              {
+                type_id: "em",
+                selector_id: "em_nvxliucw",
+                children: [],
+                attributes: {
+                  content: " autogenerated ",
+                },
+              },
+            ],
+            attributes: {},
+          },
+          {
+            type_id: "time",
+            selector_id: "ubzlhrul",
+            children: [],
+            attributes: {
+              format: "epoch",
+              val_from_variable_path: ["variables", "rows", ["loops", 0], "db_epoch_updated"],
+            },
+          },
+          {
+            type_id: "br",
+            selector_id: "br_wtxsndxh",
+            children: [],
+            attributes: {},
+          },
+        ],
+        attributes: {},
+      },
+    ],
+  }
+
+  let data = $state({
+    id: "srooithnmomwnpbmexkr",
+    name: "Hello World",
+    rows: [
+      {
+        id: "dnscyyvfhqdzptdvzcdp",
+        label: null,
+        fav_color: null,
+        db_epoch_created: 1723421882,
+        db_epoch_updated: 1723421882,
+      },
+      {
+        id: "wqhfxttzpwdpkawzusyt",
+        label: "tint bl",
+        fav_color: {
+          c: 16,
+          h: 17,
+          l: 5,
+          o: 16,
+          is_dark_theme_invert: true,
+        },
+        db_epoch_created: 1723421882,
+        db_epoch_updated: 1723422096,
+      },
+      {
+        id: "egrdjfqlcysykmpwudsp",
+        label: null,
+        fav_color: {
+          c: 10,
+          h: 4,
+          l: 1,
+          o: 24,
+          is_dark_theme_invert: true,
+        },
+        db_epoch_created: 1723422106,
+        db_epoch_updated: 1723422106,
+      },
+      {
+        id: "zbcqvteloefgebbcwrnd",
+        label: null,
+        fav_color: {
+          c: 10,
+          h: 4,
+          l: 1,
+          o: 24,
+          is_dark_theme_invert: true,
+        },
+        db_epoch_created: 1723423614,
+        db_epoch_updated: 1723423614,
+      },
+      {
+        id: "ennjpaemwacveifswbwq",
+        label: null,
+        fav_color: null,
+        db_epoch_created: 1723423614,
+        db_epoch_updated: 1723423614,
+      },
+      {
+        id: "redpwlvrmboleibyawxj",
+        label: "tint bl",
+        fav_color: {
+          c: 16,
+          h: 17,
+          l: 5,
+          o: 16,
+          is_dark_theme_invert: true,
+        },
+        db_epoch_created: 1723423614,
+        db_epoch_updated: 1723423614,
+      },
+      {
+        id: "ugarkuprolztkecxqody",
+        label: "not invert",
+        fav_color: {
+          c: 12,
+          h: 14,
+          l: 4,
+          o: 24,
+          is_dark_theme_invert: false,
+        },
+        db_epoch_created: 1723423614,
+        db_epoch_updated: 1723423678,
+      },
+      {
+        id: "dyfidxdkepupllmccxmb",
+        label: "yes invert",
+        fav_color: {
+          c: 12,
+          h: 14,
+          l: 4,
+          o: 24,
+          is_dark_theme_invert: true,
+        },
+        db_epoch_created: 1723421882,
+        db_epoch_updated: 1723423732,
+      },
+    ],
+    columns: {
+      id: {
+        is_fixed: true,
+        is_shown: true,
+        alignment: "left",
+        max_width: 50,
+        min_width: 5,
+        description: null,
+        is_nullable: false,
+        body_content: {
+          type_id: "base_text",
+          children: [],
+          attributes: {
+            size: 10,
+            content_from_variable_path: ["variables", "rows", ["loops", 0], "id"],
+          },
+          selector_id: "hcsqz",
+        },
+        db_data_type: {
+          type: "text_literal",
+          attributes: {},
+        },
+        is_db_column: true,
+        default_value: null,
+        display_order: 0,
+        postgres_type: "text",
+        header_content: {
+          type_id: "base_text",
+          children: [],
+          attributes: {
+            content: "Id",
+          },
+          selector_id: "qkdcstdn",
+        },
+        is_primary_key: true,
+        is_autogenerated: true,
+        is_force_uniqueness: false,
+      },
+      label: {
+        is_fixed: false,
+        is_shown: true,
+        alignment: "left",
+        max_width: 25,
+        min_width: 3,
+        description: null,
+        is_nullable: true,
+        body_content: {
+          type_id: "base_text",
+          children: [],
+          attributes: {
+            color: null,
+            content: null,
+            content_from_variable_path: ["variables", "rows", ["loops", 0], "label"],
+          },
+          selector_id: "mersu",
+        },
+        db_data_type: {
+          type: "text_literal",
+          attributes: {},
+        },
+        is_db_column: true,
+        default_value: null,
+        display_order: 1,
+        postgres_type: "text",
+        header_content: {
+          type_id: "base_text",
+          children: [],
+          attributes: {
+            color: null,
+            content: "Label",
+            content_from_variable_path: null,
+          },
+          selector_id: "fbhid",
+        },
+        is_primary_key: false,
+        is_autogenerated: false,
+        is_force_uniqueness: false,
+      },
+      fav_color: {
+        is_fixed: false,
+        is_shown: true,
+        alignment: "right",
+        max_width: 25,
+        min_width: 3,
+        description: null,
+        is_nullable: true,
+        body_content: {
+          type_id: "color",
+          children: [],
+          attributes: {
+            val: {
+              c: 21,
+              h: 2,
+              l: 6,
+              o: 24,
+              is_dark_theme_invert: true,
+            },
+            val_from_variable_path: ["variables", "rows", ["loops", 0], "fav_color"],
+          },
+          selector_id: "anpwr",
+        },
+        db_data_type: {
+          type: "color_literal",
+          attributes: {},
+        },
+        is_db_column: true,
+        default_value: null,
+        display_order: 2,
+        postgres_type: "jsonb",
+        header_content: {
+          type_id: "base_text",
+          children: [],
+          attributes: {
+            color: {
+              c: 10,
+              h: 15,
+              l: 19,
+              o: 24,
+              is_dark_theme_invert: true,
+            },
+            content: "Fav Color",
+            content_from_variable_path: null,
+          },
+          selector_id: "gcvda",
+        },
+        is_primary_key: false,
+        is_autogenerated: false,
+        is_force_uniqueness: false,
+      },
+      db_epoch_created: {
+        is_fixed: false,
+        is_shown: true,
+        alignment: "left",
+        max_width: 50,
+        min_width: 5,
+        description: null,
+        is_nullable: false,
+        body_content: {
+          type_id: "time",
+          children: [],
+          attributes: {
+            format: "epoch",
+            val_from_variable_path: ["variables", "rows", ["loops", 0], "db_epoch_created"],
+          },
+          selector_id: "urzjm",
+        },
+        db_data_type: {
+          type: "epoch_literal",
+          attributes: {},
+        },
+        is_db_column: true,
+        default_value: null,
+        display_order: 3,
+        postgres_type: "bigint",
+        header_content: {
+          type_id: "base_text",
+          children: [],
+          attributes: {
+            content: "Db Epoch Created",
+          },
+          selector_id: "pwhlofsm",
+        },
+        is_primary_key: false,
+        is_autogenerated: true,
+        is_force_uniqueness: false,
+      },
+      db_epoch_updated: {
+        is_fixed: false,
+        is_shown: true,
+        alignment: "left",
+        max_width: 50,
+        min_width: 5,
+        description: null,
+        is_nullable: false,
+        body_content: {
+          type_id: "time",
+          children: [],
+          attributes: {
+            format: "epoch",
+            val_from_variable_path: ["variables", "rows", ["loops", 0], "db_epoch_updated"],
+          },
+          selector_id: "rozyy",
+        },
+        db_data_type: {
+          type: "epoch_literal",
+          attributes: {},
+        },
+        is_db_column: true,
+        default_value: null,
+        display_order: 4,
+        postgres_type: "bigint",
+        header_content: {
+          type_id: "base_text",
+          children: [],
+          attributes: {
+            content: "Db Epoch Updated",
+          },
+          selector_id: "hxuesxvx",
+        },
+        is_primary_key: false,
+        is_autogenerated: true,
+        is_force_uniqueness: false,
+      },
+      location: {
+        is_fixed: false,
+        is_shown: true,
+        alignment: "left",
+        max_width: 25,
+        min_width: 3,
+        description: null,
+        is_nullable: true,
+        body_content: {
+          type_id: "location",
+          children: [],
+          attributes: {
+            is_popover: true,
+            val_from_variable_path: ["variables", "rows", ["loops", 0], "location"],
+          },
+          selector_id: "meqwu",
+        },
+        db_data_type: {
+          type: "location_literal",
+          attributes: {},
+        },
+        is_db_column: true,
+        default_value: null,
+        display_order: 1,
+        postgres_type: "text",
+        header_content: {
+          type_id: "base_text",
+          children: [],
+          attributes: {
+            color: null,
+            content: "Label",
+            content_from_variable_path: null,
+          },
+          selector_id: "fbhid",
+        },
+        is_primary_key: false,
+        is_autogenerated: false,
+        is_force_uniqueness: false,
+      },
+    },
+    account_id: "idredbvbbogpofinurea",
+    total_rows: 8,
+    description: "hiiiiii",
+    default_sort: null,
+    // row_input_content: null,
+    row_input_content: test_row_input_content,
+    row_searchable_content: null,
+  })
+
+  let table_config_manager = $state(null)
+  let table_manager = $state(null)
+
+  const table_attributes_initial = $state({
+    columns: null,
+    rows_data: null,
+    rows_data_from_variable_path: null,
+    is_data_editable: true,
+    is_paginate: true,
+    is_show_pagination: true,
+    is_show_load_more_button: true,
+    is_show_table_search: true,
+    is_show_rows_per_page_input: true,
+    sort_by: null,
+    filter: null,
+    row_searchable_content: null,
+    row_input_content: null,
+  })
+
+  let variables = $state({ rows: data?.rows })
+  let variables_data_type = $state(null)
+
+  table_manager = create_table_advanced_manager({
+    table_id: "abcdefg",
+    table_name: "Some Header",
+    table_description: "This has data about uh...stuff...idk",
+    mapkit_js_token: PUBLIC_APPLE_MAPKIT_JS_API_KEY,
+    table_options: [{ key: "test", name: "Test" }],
+    variables: () => variables,
+    variables_data_type: () => variables_data_type,
+    rows_data_from_variable_path: ["variables", "rows"],
+    table_header_max_height: 8,
+    table_row_max_height: 8,
+    columns: data?.columns,
+    row_input_content: data?.row_input_content,
+    // storage_items: null,
+    // storage_default_folder_path: null,
+    // sort_by: null, tbd
+    is_data_editable: true,
+    is_paginate: true,
+    nav_items: [
+      "settings",
+      "search",
+      "insert",
+      "file",
+      "bulk_select",
+      "sort_by",
+      "pagination",
+      "rows_per_page",
+      "load_more",
+    ],
+    is_more_to_load: true,
+    on_event: async (input) => {
+      console.log("showcase on_event tbd", deep_copy(input))
+      if (input?.type == "update_row") {
+        const path_to_set = input?.path
+        let complete_variables_loc = deep_copy({ variables: variables, loops: null })
+        let target = complete_variables_loc
+        for (let i = 0; i < path_to_set.length - 1; i++) {
+          if (target[path_to_set[i]] === undefined || target[path_to_set[i]] === null) {
+            target[path_to_set[i]] = {}
+          }
+          target = target[path_to_set[i]]
+        }
+        const last_key = path_to_set[path_to_set.length - 1]
+        target[last_key] = input?.row
+        variables = complete_variables_loc?.variables
+        return {
+          is_success: true,
+          row: target?.[last_key],
+        }
+      } else if (input?.type == "insert_row") {
+        const path_to_set = input?.path
+        let complete_variables_loc = deep_copy({ variables: variables, loops: null })
+        let target = complete_variables_loc
+        for (let i = 0; i < path_to_set.length - 1; i++) {
+          if (target[path_to_set[i]] === undefined) {
+            target[path_to_set[i]] = {}
+          }
+          target = target[path_to_set[i]]
+        }
+        const last_key = path_to_set[path_to_set.length - 1]
+        if (!Array.isArray(target)) {
+          throw new Error("Target is not an array")
+        }
+        target.splice(last_key, 0, input?.row)
+        variables = complete_variables_loc?.variables
+        return {
+          is_success: true,
+          row: target?.[last_key],
+        }
+      } else if (input?.type == "bulk_insert_rows") {
+        console.log("bulk_insert_rows")
+        const path_to_set = input?.path
+        let complete_variables_loc = deep_copy({ variables: variables, loops: null })
+        let target = complete_variables_loc
+        for (let i = 0; i < path_to_set.length - 1; i++) {
+          if (target[path_to_set[i]] === undefined) {
+            target[path_to_set[i]] = {}
+          }
+          target = target[path_to_set[i]]
+        }
+        const last_key = path_to_set[path_to_set.length - 1]
+        if (!Array.isArray(target)) {
+          throw new Error("Target is not an array")
+        }
+        target.splice(last_key, 0, input?.value)
+        variables = complete_variables_loc?.variables
+        return {
+          is_success: true,
+          rows: target?.[last_key],
+        }
+      } else if (input?.type == "delete_row") {
+        console.log("delete_row", deep_copy(input))
+        const path_to_delete = input?.path
+        let complete_variables_loc = deep_copy({ variables: variables, loops: null })
+        let target = complete_variables_loc
+        for (let i = 0; i < path_to_delete.length - 1; i++) {
+          if (target[path_to_delete[i]] === undefined) {
+            target[path_to_delete[i]] = {}
+          }
+          target = target[path_to_delete[i]]
+        }
+        const last_key = path_to_delete[path_to_delete.length - 1]
+        if (Array.isArray(target)) {
+          target.splice(last_key, 1)
+        }
+        variables = complete_variables_loc?.variables
+        console.log("variables", deep_copy(variables))
+        return {
+          is_success: true,
+        }
+      } else if (input?.type == "bulk_delete_rows") {
+        console.log("bulk_delete_rows", deep_copy(input))
+        return {
+          is_success: true,
+          row_ids_deleted: input?.row_ids,
+        }
+      } else if (input?.type == "insert_column") {
+        console.log("insert_column", deep_copy(input))
+        return {
+          is_success: true,
+          column: input?.column,
+        }
+      } else if (input?.type == "update_column") {
+        console.log("update_column", deep_copy(input))
+        return {
+          is_success: true,
+          column: input?.column,
+        }
+      } else if (input?.type == "delete_column") {
+        console.log("delete_column", deep_copy(input))
+        return {
+          is_success: true,
+          column_id: input?.column_id,
+          column: input?.column,
+        }
+      } else if (input?.type == "update_table_name") {
+        console.log("update_table_name", deep_copy(input))
+        return {
+          is_success: true,
+          table_name: input?.table_name,
+        }
+      } else if (input?.type == "update_table_description") {
+        console.log("update_table_description", deep_copy(input))
+        return {
+          is_success: true,
+          table_description: input?.table_description,
+        }
+      } else if (input?.type == "delete_table") {
+        console.log("delete_table", deep_copy(input))
+        return {
+          is_success: true,
+          table_id: input?.table_id,
+        }
+      } else if (input?.type == "load_more") {
+        console.log("load_more", deep_copy(input))
+        return {
+          is_success: true,
+          rows: [],
+          is_more_to_load: true,
+        }
+      }
+      console.log("unaccounted event", input)
+    },
+  })
+</script>
+
+<div>
+  <TableAdvanced manager={table_manager} />
+</div>