@milaboratories/milaboratories.pool-explorer.ui 1.1.55

package/src/JsonView.vue

@@ -0,0 +1,86 @@
+<script lang="ts" generic="T" setup>
+import * as monaco from 'monaco-editor';
+// @ts-expect-error @todo
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import { onMounted, reactive, ref, watchEffect } from 'vue';
+import { notEmpty } from '@milaboratories/helpers';
+
+const emit = defineEmits<{
+  (e: 'change', value: T): void;
+}>();
+
+const props = defineProps<{
+  value: T;
+}>();
+
+const data = reactive({
+  error: '',
+});
+
+const raw = {
+  editor: undefined as monaco.editor.IStandaloneCodeEditor | undefined,
+};
+
+const editorRef = ref<HTMLElement>();
+
+const fold = () => raw.editor?.trigger('fold', 'editor.foldAll', 1);
+const unfold = () => raw.editor?.trigger('fold', 'editor.unfoldAll', 1);
+
+defineExpose({
+  fold,
+  unfold,
+});
+
+self.MonacoEnvironment = {
+  getWorker(workerId, label) {
+    switch (label) {
+      case 'json':
+        return new jsonWorker();
+      default:
+        throw Error('Not supported');
+    }
+  },
+};
+
+watchEffect(() => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+  props.value;
+  raw.editor?.getModel()?.setValue(JSON.stringify(props.value, null, 2));
+});
+
+onMounted(() => {
+  const editor = (raw.editor = monaco.editor.create(notEmpty(editorRef.value), {
+    value: '',
+    language: 'json',
+    automaticLayout: true,
+    theme: 'vs-dark',
+    readOnly: true,
+  }));
+
+  editor.getModel()?.setValue(JSON.stringify(props.value, null, 2));
+
+  const getValue = () => {
+    try {
+      return JSON.parse(editor.getModel()?.getValue() ?? '');
+    } catch {
+      data.error = 'Invalid json';
+      return undefined;
+    }
+  };
+
+  editor.getModel()?.onDidChangeContent(() => {
+    const value = getValue();
+    if (value) {
+      data.error = '';
+      emit('change', value);
+    }
+  });
+});
+</script>
+
+<template>
+  <div style="display: flex; flex-direction: column; flex: 1; height: 100%">
+    <div v-if="data.error" class="alert-error">{{ data.error }}</div>
+    <div ref="editorRef" style="flex: 1" />
+  </div>
+</template>

package/src/MainPage.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { PlBlockPage, PlBtnPrimary, PlBtnSecondary, PlCheckbox, PlChip, PlContainer, PlRow, PlSpacer, PlTextField } from '@platforma-sdk/ui-vue';
+import { useApp } from './app';
+import JsonView from './JsonView.vue';
+import { computed, reactive, useTemplateRef } from 'vue';
+import { containsValue } from './utils';
+
+const app = useApp();
+
+const data = reactive({
+  search: '',
+  withKeys: false,
+  caseSensitive: true,
+});
+
+const filtered = computed(() => {
+  const { allSpecs } = app.model.outputs;
+
+  const search = data.search.trim();
+
+  const { withKeys, caseSensitive } = data;
+
+  if (!allSpecs) {
+    return undefined;
+  }
+
+  const { entries, isComplete } = allSpecs;
+
+  return {
+    entries: search ? entries.filter((it) => containsValue(it, { search, withKeys, caseSensitive })) : entries,
+    isComplete,
+  };
+});
+
+const editor = useTemplateRef('editor');
+</script>
+
+<template>
+  <PlBlockPage>
+    <template #title>
+      Pool explorer
+    </template>
+    <template #append>
+      <PlBtnPrimary size="small" :disabled="!editor" @click="editor?.fold()">Fold</PlBtnPrimary>
+      <PlBtnSecondary size="small" :disabled="!editor" @click="editor?.unfold()">Unfold</PlBtnSecondary>
+    </template>
+    <PlRow align-center>
+      <PlContainer width="400px">
+        <PlTextField v-model="data.search" label="Filter Entries" clearable />
+      </PlContainer>
+      <PlCheckbox v-model="data.withKeys">With keys</PlCheckbox>
+      <PlCheckbox v-model="data.caseSensitive">Case sensitive</PlCheckbox>
+      <PlSpacer />
+      <PlChip>Total entries: {{ filtered?.entries.length }}</PlChip>
+    </PlRow>
+    <JsonView v-if="filtered" ref="editor" :value="filtered" />
+  </PlBlockPage>
+</template>

package/src/app.ts

@@ -0,0 +1,13 @@
+import { platforma } from '@milaboratories/milaboratories.pool-explorer.model';
+import MainPage from './MainPage.vue';
+import { defineApp } from '@platforma-sdk/ui-vue';
+
+export const sdkPlugin = defineApp(platforma, (base) => {
+  return {
+    routes: {
+      '/': () => MainPage
+    }
+  };
+});
+
+export const useApp = sdkPlugin.useApp;

package/src/main.ts

@@ -0,0 +1,6 @@
+import { createApp } from 'vue';
+import { sdkPlugin } from './app';
+import '@platforma-sdk/ui-vue/styles';
+import { BlockLayout } from '@platforma-sdk/ui-vue';
+
+createApp(BlockLayout).use(sdkPlugin).mount('#app');

package/src/utils.ts

@@ -0,0 +1,22 @@
+import { isPlainObject } from '@milaboratories/helpers';
+
+export function containsValue<T = unknown>(obj: T, options: {
+  search: string;
+  withKeys: boolean;
+  caseSensitive: boolean;
+}): boolean {
+  const { search, withKeys, caseSensitive } = options;
+
+  const matchString = caseSensitive
+    ? (k: string) => String(k).includes(search)
+    : (k: string) => String(k).toLocaleLowerCase().includes(search.toLocaleLowerCase());
+
+  if (Array.isArray(obj)) {
+    return obj.some((it) => containsValue(it, options));
+  } else if (isPlainObject(obj)) {
+    const matchKey = withKeys ? matchString : () => false;
+    return Object.keys(obj).some((k) => containsValue(obj[k], options) || matchKey(k));
+  } else {
+    return matchString(String(obj));
+  }
+}

package/tsconfig.app.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    // "noUnusedLocals": true,
+    // "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  base: './',
+  build: {
+    sourcemap: true
+  }
+});