@tak-ps/cloudtak 12.54.0

package/src/components/ETL/Layer/LayerOutgoingEnvironmentArcGIS.vue

@@ -0,0 +1,279 @@
+<template>
+    <div class='row g-2 mx-2 my-2'>
+        <div class='col-12 mb-3'>
+            <div
+                class='btn-group w-100'
+                role='group'
+            >
+                <input
+                    id='agol'
+                    type='radio'
+                    class='btn-check'
+                    name='esri-type'
+                    autocomplete='off'
+                    :disabled='disabled'
+                    :checked='type === "agol"'
+                    @click='type = "agol"'
+                >
+                <label
+                    for='agol'
+                    type='button'
+                    class='btn'
+                >ArcGIS Online</label>
+
+                <input
+                    id='portal'
+                    type='radio'
+                    class='btn-check'
+                    name='esri-type'
+                    autocomplete='off'
+                    :disabled='disabled'
+                    :checked='type === "portal"'
+                    @click='type = "portal"'
+                >
+                <label
+                    for='portal'
+                    type='button'
+                    class='btn'
+                >ArcGIS Enterprise Portal</label>
+            </div>
+        </div>
+        <template v-if='type === "agol"'>
+            <div class='col-12'>
+                <TablerInput
+                    v-model='environment.ARCGIS_PORTAL'
+                    label='ArcGIS Portal URL (Example: https://example.com/portal/sharing/rest)'
+                    :disabled='disabled'
+                />
+            </div>
+            <div
+                v-if='environment.ARCGIS_URL'
+                class='col-12'
+            >
+                <TablerInput
+                    v-model='environment.ARCGIS_URL'
+                    label='ArcGIS Layer URL'
+                    :disabled='disabled'
+                />
+            </div>
+            <div class='col-12 col-md-6 mt-3'>
+                <TablerInput
+                    v-model='environment.ARCGIS_USERNAME'
+                    label='ArcGIS Username'
+                    :disabled='disabled'
+                />
+            </div>
+            <div class='col-12 col-md-6 mt-3'>
+                <TablerInput
+                    v-model='environment.ARCGIS_PASSWORD'
+                    type='password'
+                    label='ArcGIS Password'
+                    :disabled='disabled'
+                />
+            </div>
+        </template>
+        <template v-else-if='type === "portal"'>
+            <div class='col-12'>
+                <TablerInput
+                    v-model='environment.ARCGIS_PORTAL'
+                    label='ArcGIS Portal URL (Example: https://example.com/portal/sharing/rest)'
+                    :disabled='disabled'
+                />
+            </div>
+
+            <div
+                v-if='environment.ARCGIS_URL'
+                class='col-12'
+            >
+                <TablerInput
+                    v-model='environment.ARCGIS_URL'
+                    label='ArcGIS Layer URL'
+                    :disabled='disabled'
+                />
+            </div>
+            <div class='col-12 col-md-6 mt-3'>
+                <TablerInput
+                    v-model='environment.ARCGIS_USERNAME'
+                    label='ArcGIS Username'
+                    :disabled='disabled'
+                />
+            </div>
+            <div class='col-12 col-md-6 mt-3'>
+                <TablerInput
+                    v-model='environment.ARCGIS_PASSWORD'
+                    type='password'
+                    label='ArcGIS Password'
+                    :disabled='disabled'
+                />
+            </div>
+        </template>
+
+        <div class='col-12 pb-4'>
+            <TablerToggle
+                v-model='environment.PRESERVE_HISTORY'
+                label='Preserve History'
+                description='If enabled, new features will be appended to existing features (Insert) in the layer instead of replacing them (Upsert)'
+                :disabled='disabled'
+            />
+        </div>
+
+        <div class='col-12 pb-4'>
+            <div class='d-flex justify-content-center'>
+                <div class='btn-list'>
+                    <div
+                        class='btn-group'
+                        role='group'
+                    >
+                        <input
+                            v-model='mode'
+                            type='radio'
+                            class='btn-check'
+                            name='geom-toolbar'
+                            value='points'
+                        >
+                        <label
+                            class='btn btn-icon px-3'
+                            @click='mode="points"'
+                        >
+                            <IconPoint
+                                :size='32'
+                                stroke='1'
+                            /> Points
+                        </label>
+                        <input
+                            v-model='mode'
+                            type='radio'
+                            class='btn-check'
+                            name='geom-toolbar'
+                            value='lines'
+                        >
+                        <label
+                            class='btn btn-icon px-3'
+                            @click='mode="lines"'
+                        >
+                            <IconLine
+                                :size='32'
+                                stroke='1'
+                            /> Lines
+                        </label>
+                        <input
+                            v-model='mode'
+                            type='radio'
+                            class='btn-check'
+                            name='geom-toolbar'
+                            value='polys'
+                        >
+                        <label
+                            class='btn btn-icon px-3'
+                            @click='mode="polys"'
+                        >
+                            <IconPolygon
+                                :size='32'
+                                stroke='1'
+                            /> Polygons
+                        </label>
+                    </div>
+                </div>
+            </div>
+
+            <TablerInput
+                v-model='environment[`ARCGIS_${mode.toUpperCase()}_URL`]'
+                :label='`ArcGIS ${mode} Layer URL`'
+                :disabled='disabled'
+            />
+        </div>
+
+        <div class='col-md-12 mt-3'>
+            <template v-if='!esriView'>
+                <div class='d-flex'>
+                    <div class='ms-auto'>
+                        <button
+                            class='cursor-pointer btn btn-secondary'
+                            :disabled='!environment.ARCGIS_PORTAL || !environment.ARCGIS_USERNAME || !environment.ARCGIS_PASSWORD'
+                            @click='esriView = true'
+                        >
+                            Connect
+                        </button>
+                    </div>
+                </div>
+            </template>
+            <template v-else>
+                <EsriPortal
+                    :key='mode'
+                    :disabled='disabled'
+                    :url='environment.ARCGIS_PORTAL'
+                    :readonly='disabled'
+                    :pane='false'
+                    :username='environment.ARCGIS_USERNAME'
+                    :password='environment.ARCGIS_PASSWORD'
+                    :layer='environment[`ARCGIS_${mode.toUpperCase()}_URL`]'
+                    @layer='environment[`ARCGIS_${mode.toUpperCase()}_URL`] = $event'
+                    @close='esriView = false'
+                />
+            </template>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import {
+    TablerInput,
+    TablerToggle,
+} from '@tak-ps/vue-tabler';
+import EsriPortal from '../../util/EsriPortal.vue';
+import {
+    IconPoint,
+    IconLine,
+    IconPolygon,
+} from '@tabler/icons-vue'
+
+const props = defineProps({
+    modelValue: {
+        type: Object,
+        required: true
+    },
+    disabled: {
+        type: Boolean,
+        default: true
+    }
+})
+
+const emit = defineEmits([ 'update:modelValue' ]);
+
+const mode = ref('points');
+
+const type = ref('agol');
+if (props.modelValue.ARCGIS_PORTAL && props.modelValue.ARCGIS_PORTAL.includes('arcgis.com') && props.modelValue.ARCGIS_USERNAME) {
+    type.value = 'agol';
+} else if (props.modelValue.ARCGIS_PORTAL && props.modelValue.ARCGIS_USERNAME) {
+    type.value = 'portal';
+}
+
+const esriView = ref(false);
+const environment = ref(props.modelValue);
+
+if (!environment.value.ARCGIS_URL) environment.value.ARCGIS_URL = '';
+if (!environment.value.PRESERVE_HISTORY) environment.value.PRESERVE_HISTORY = false;
+if (!environment.value.ARCGIS_POINTS_URL) environment.value.ARCGIS_POINTS_URL = '';
+if (!environment.value.ARCGIS_LINES_URL) environment.value.ARCGIS_LINES_URL = '';
+if (!environment.value.ARCGIS_POLYS_URL) environment.value.ARCGIS_POLYS_URL = '';
+
+watch(type, () => {
+    delete environment.value.ARCGIS_PORTAL;
+    delete environment.value.ARCGIS_USERNAME;
+    delete environment.value.ARCGIS_PASSWORD;
+    environment.value.ARCGIS_QUERY = '';
+    environment.value.ARCGIS_PARAMS = [];
+    delete environment.value.ARCGIS_TOKEN;
+    delete environment.value.ARCGIS_EXPIRES;
+});
+
+watch(props.modelValue, () => {
+    environment.value = props.modelValue;
+});
+
+watch(environment, () => {
+    emit('update:modelValue', environment.value);
+});
+</script>

package/src/components/ETL/Layer/utils/QueryInput.vue

@@ -0,0 +1,52 @@
+<template>
+    <TablerInput
+        :model-value='modelValue'
+        :label='label'
+        :placeholder='placeholder'
+        :disabled='disabled'
+        :error='error_str'
+        @update:model-value='emit("update:modelValue", $event)'
+    >
+        <template #default>
+            <slot />
+        </template>
+    </TablerInput>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import jsonata from 'jsonata';
+import { TablerInput } from '@tak-ps/vue-tabler';
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: ''
+    },
+    label: {
+        type: String,
+        default: 'JSONata Query'
+    },
+    placeholder: {
+        type: String,
+        default: ''
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const error_str = computed(() => {
+    if (!props.modelValue) return '';
+
+    try {
+        jsonata(props.modelValue);
+        return '';
+    } catch (err: any) { // eslint-disable-line @typescript-eslint/no-explicit-any
+        return err.message;
+    }
+});
+</script>

package/src/components/ETL/Layer/utils/Schema.vue

@@ -0,0 +1,322 @@
+<template>
+    <div
+        v-if='data'
+        class='px-2 py-2'
+    >
+        <div
+            v-for='key in Object.keys(props.schema.properties)'
+            :key='key'
+            class='py-2 floating-input'
+        >
+            <template v-if='props.schema.properties[key].enum'>
+                <TablerEnum
+                    v-model='data[key]'
+                    :label='key'
+                    :disabled='props.disabled'
+                    :options='props.schema.properties[key].enum'
+                    :default='props.schema.properties[key].default'
+                    :required='props.schema.required.includes(key)'
+                    :description='props.schema.properties[key].description'
+                />
+            </template>
+            <template v-else-if='props.schema.properties[key].type === "string"'>
+                <TablerInput
+                    v-model='data[key]'
+                    :label='key'
+                    :disabled='props.disabled'
+                    :default='props.schema.properties[key].default'
+                    :required='props.schema.required.includes(key)'
+                    :description='props.schema.properties[key].description'
+                />
+            </template>
+            <template v-else-if='props.schema.properties[key].type === "number" || props.schema.properties[key].type === "integer"'>
+                <TablerInput
+                    v-model='data[key]'
+                    type='number'
+                    :label='key'
+                    :step='props.schema.properties[key].type === "integer" ? 1 : "any"'
+                    :disabled='props.disabled'
+                    :default='props.schema.properties[key].default'
+                    :required='props.schema.required.includes(key)'
+                    :description='props.schema.properties[key].description'
+                />
+            </template>
+            <template v-else-if='props.schema.properties[key].type === "boolean"'>
+                <TablerToggle
+                    v-model='data[key]'
+                    :label='key'
+                    :disabled='props.disabled'
+                    :default='props.schema.properties[key].default'
+                    :required='props.schema.required.includes(key)'
+                    :description='props.schema.properties[key].description'
+                />
+            </template>
+            <template
+                v-else-if='
+                    props.schema.properties[key].type === "array"
+                        && props.schema.properties[key].items.type === "object"
+                        && props.schema.properties[key].items.properties
+                '
+            >
+                <div class='d-flex'>
+                    <label
+                        class='form-label'
+                        v-text='key'
+                    />
+                    <span
+                        v-if='props.schema.required.includes(key)'
+                        class='text-red mx-1'
+                    >*</span>
+                    <div
+                        v-if='!props.disabled'
+                        class='ms-auto'
+                    >
+                        <IconTrash
+                            v-tooltip='"Clear Table"'
+                            :size='32'
+                            stroke='1'
+                            class='cursor-pointer'
+                            @click='data[key].splice(0, data[key].length)'
+                        />
+                        <IconDatabaseImport
+                            v-tooltip='"Import CSV"'
+                            :size='32'
+                            stroke='1'
+                            class='cursor-pointer'
+                            @click='importModal(Object.keys(props.schema.properties[key].items.properties), data[key])'
+                        />
+                        <IconPlus
+                            v-tooltip='"Add Row"'
+                            :size='32'
+                            stroke='1'
+                            class='cursor-pointer'
+                            @click='editModal(props.schema.properties[key].items, {}, key)'
+                        />
+                    </div>
+                </div>
+                <template v-if='props.schema.properties[key].items.type === "object" && props.schema.properties[key].items.properties'>
+                    <div class='table-responsive'>
+                        <table class='table table-hover card-table table-vcenter border rounded cursor-pointer'>
+                            <thead>
+                                <tr>
+                                    <th
+                                        v-for='prop in Object.keys(props.schema.properties[key].items.properties)'
+                                        :key='prop'
+                                    >
+                                        <span v-text='prop' />
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr
+                                    v-for='(arr, i) in data[key]'
+                                    :key='i'
+                                    @click='editModal(props.schema.properties[key].items, arr, key, i)'
+                                >
+                                    <template v-if='props.disabled'>
+                                        <td
+                                            v-for='prop in Object.keys(props.schema.properties[key].items.properties)'
+                                            :key='prop'
+                                        >
+                                            <span v-text='arr[prop]' />
+                                        </td>
+                                    </template>
+                                    <template v-else>
+                                        <td
+                                            v-for='prop in Object.keys(props.schema.properties[key].items.properties)'
+                                            :key='prop'
+                                        >
+                                            <span v-text='arr[prop]' />
+                                        </td>
+                                    </template>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <TablerNone
+                        v-if='!data[key] || !data[key].length'
+                        :label='key'
+                        :create='!props.disabled'
+                        @create='editModal(props.schema.properties[key].items, {}, key)'
+                    />
+                </template>
+                <template v-else>
+                    <div
+                        v-for='(arr, i) of data[key]'
+                        :key='i'
+                        class='border rounded my-2 py-2 mx-2 px-2'
+                    >
+                        <div class='d-flex'>
+                            <div class='mx-2 my-2'>
+                                Entry <span v-text='i + 1' />
+                            </div>
+                            <div class='ms-auto mx-2 my-2'>
+                                <IconTrash
+                                    v-if='!props.disabled'
+                                    :size='32'
+                                    stroke='1'
+                                    class='cursor-pointer'
+                                    @click='data[key].splice(i, 1)'
+                                />
+                            </div>
+                        </div>
+
+                        <TablerSchema
+                            v-model='data[key][i]'
+                            :schema='props.schema.properties[key].items'
+                            :disabled='props.disabled'
+                        />
+                    </div>
+                </template>
+            </template>
+            <template v-else>
+                <div class='row'>
+                    <TablerInput
+                        v-model='data[key]'
+                        :label='key'
+                        :rows='3'
+                        :disabled='props.disabled'
+                    />
+                </div>
+            </template>
+        </div>
+
+        <UploadCSV
+            v-if='upload.shown'
+            @close='upload.shown = false'
+            @import='importCSV($event)'
+        />
+
+        <SchemaModal
+            v-if='edit.shown !== false'
+            :allow-delete='!isNaN(edit.i) && !props.disabled'
+            :edit='edit.row'
+            :disabled='props.disabled'
+            :schema='edit.schema'
+            @remove='editModalRemove'
+            @done='editModalDone($event)'
+            @close='edit.shown = false'
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref, reactive, watch, onMounted } from 'vue';
+import {
+    TablerNone,
+    TablerInput,
+    TablerToggle,
+    TablerSchema,
+    TablerEnum
+} from '@tak-ps/vue-tabler';
+import UploadCSV from '../../../util/UploadCSV.vue';
+import SchemaModal from './SchemaModal.vue';
+import {
+    IconPlus,
+    IconTrash,
+    IconDatabaseImport,
+} from '@tabler/icons-vue'
+
+const props = defineProps({
+    modelValue: {
+        type: Object,
+        required: true
+    },
+    schema: {
+        type: Object,
+        required: true
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const data = ref(false);
+const edit = reactive({
+    id: false,
+    key: false,
+    shown: false,
+    data: false,
+    schema: false
+});
+const upload = reactive({
+    headers: [],
+    data: null,
+    shown: false
+});
+
+watch(data, () => {
+    emit('update:modelValue', data.value);
+}, {
+    deep: true
+});
+
+onMounted(() => {
+    data.value = JSON.parse(JSON.stringify(props.modelValue));
+
+    if (props.schema.type === 'object' && props.schema.properties) {
+        for (const key in props.schema.properties) {
+            if (data.value[key] === undefined && props.schema.properties[key].type === 'array') {
+                data.value[key] = props.schema.properties[key].default || [];
+            } else if (data.value[key] === undefined && props.schema.properties[key].type === 'boolean') {
+                data.value[key] = props.schema.properties[key].default || false;
+            } else if (data.value[key] === undefined && props.schema.properties[key].type === 'string') {
+                data.value[key] = props.schema.properties[key].default || '';
+            } else if (data.value[key] === undefined && props.schema.properties[key].type === 'integer') {
+                data.value[key] = props.schema.properties[key].default;
+            } else if (data.value[key] === undefined && props.schema.properties[key].type === 'number') {
+                data.value[key] = props.schema.properties[key].default;
+            }
+        }
+    }
+});
+
+function importModal(headers, data) {
+    upload.headers = headers;
+    upload.data = data;
+    upload.shown = true;
+}
+
+function importCSV(csv) {
+    upload.shown = false;
+
+    const firstLine = csv.split('\n')[0];
+    const delimiter = firstLine.includes(',') ? ',' : '\t';
+
+    for (const line of csv.split('\n')) {
+        const row = line.split(delimiter);
+        const obj = {};
+        for (let i = 0; i < upload.headers.length; i++) {
+            obj[upload.headers[i]] = row[i]
+        }
+        upload.data.push(obj);
+    }
+}
+
+function editModalRemove() {
+    if (!isNaN(edit.id)) data.value[edit.key].splice(edit.id, 1)
+    edit.shown = false;
+}
+
+function editModalDone(row) {
+    if (edit.id) {
+        data.value[edit.key][edit.id] = row;
+    } else {
+        data.value[edit.key].push(row);
+    }
+
+    edit.shown = false;
+}
+
+function editModal(schema, row, key, id) {
+    edit.shown = true;
+    edit.key = key;
+    edit.row = row;
+    edit.schema = schema;
+    edit.id = id ?? null;
+}
+</script>
+