@milaboratories/uikit 2.2.16 → 2.2.18

package/src/components/PlFileDialog/Remote.vue

@@ -0,0 +1,313 @@
+<script lang="ts" setup>
+import style from './pl-file-dialog.module.scss';
+import { watch, reactive, computed, toRef, onMounted } from 'vue';
+import { between, notEmpty, tapIf } from '@milaboratories/helpers';
+import type { StorageHandle } from '@platforma-sdk/model';
+import type { ImportedFiles } from '@/types';
+import { getFilePathBreadcrumbs, normalizeExtensions, type FileDialogItem } from './utils';
+import { PlDropdown } from '../PlDropdown';
+import { useEventListener } from '@/composition/useEventListener';
+import { defaultData, useVisibleItems, vTextOverflown } from './remote';
+import { PlSearchField } from '../PlSearchField';
+import { PlIcon16 } from '../PlIcon16';
+
+defineEmits<{
+  (e: 'update:modelValue', value: boolean): void;
+  (e: 'import:files', value: ImportedFiles): void;
+}>();
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean;
+    extensions?: string[]; // with dot, like ['.fastq.gz', '.fastq']
+    multi?: boolean;
+    title?: string;
+    autoSelectStorage?: boolean;
+    submit: () => void;
+  }>(),
+  {
+    extensions: undefined,
+    title: undefined,
+    autoSelectStorage: true,
+  },
+);
+
+const data = reactive(defaultData());
+
+const resetData = () => {
+  data.search = '';
+  data.error = '';
+  data.lastSelected = undefined;
+};
+
+const extensions = computed(() => normalizeExtensions(props.extensions));
+
+const visibleItems = useVisibleItems(data);
+
+const lookup = computed(() => {
+  return {
+    modelValue: props.modelValue,
+    dirPath: data.dirPath,
+    storageHandle: data.storageEntry?.handle,
+  };
+});
+
+const query = (storageHandle: StorageHandle, dirPath: string) => {
+  if (!window.platforma) {
+    return;
+  }
+
+  if (data.currentLoadingPath === dirPath) {
+    return;
+  }
+
+  data.currentLoadingPath = dirPath;
+
+  window.platforma.lsDriver
+    .listFiles(storageHandle, dirPath)
+    .then((res) => {
+      if (dirPath !== data.dirPath) {
+        return;
+      }
+
+      data.items = notEmpty(res)
+        .entries.map((item) => ({
+          path: item.fullPath,
+          name: item.name,
+          isDir: item.type === 'dir',
+          canBeSelected: item.type === 'file' && (!extensions.value || extensions.value.some((ext) => item.fullPath.endsWith(ext))),
+          handle: item.type === 'file' ? item.handle : undefined,
+          selected: false,
+        }))
+        .sort((a, b) => {
+          if (a.isDir && !b.isDir) return -1;
+          if (!a.isDir && b.isDir) return 1;
+          // localeCompare for unicode alphabets
+          return a.name.localeCompare(b.name);
+        })
+        .map((it, id) => ({ id, ...it }));
+
+      data.lastSelected = undefined;
+    })
+    .catch((err) => (data.error = String(err)))
+    .finally(() => {
+      data.currentLoadingPath = undefined;
+    });
+};
+
+const load = () => {
+  resetData();
+  const { storageHandle, dirPath, modelValue } = lookup.value;
+  if (storageHandle && modelValue) {
+    query(storageHandle, dirPath);
+  }
+};
+
+const breadcrumbs = computed(() => getFilePathBreadcrumbs(data.dirPath));
+
+const selectedFiles = computed(() => data.items.filter((f) => f.canBeSelected && f.selected && !f.isDir));
+
+const isReady = computed(() => selectedFiles.value.length > 0 && data.storageEntry?.handle);
+
+const getFilesToImport = () => ({
+  storageHandle: notEmpty(data.storageEntry?.handle),
+  files: selectedFiles.value.map((f) => f.handle!),
+});
+
+const setDirPath = (dirPath: string) => {
+  data.dirPath = dirPath;
+};
+
+const selectFile = (ev: MouseEvent, file: FileDialogItem) => {
+  const { shiftKey, metaKey } = ev;
+  const { lastSelected } = data;
+
+  ev.preventDefault();
+
+  if (file.canBeSelected) {
+    if (!props.multi) {
+      data.items.forEach((f) => (f.selected = false));
+    }
+
+    file.selected = true;
+
+    if (!props.multi) {
+      return;
+    }
+
+    if (!metaKey && !shiftKey) {
+      data.items.forEach((f) => {
+        if (f.id !== file.id) {
+          f.selected = false;
+        }
+      });
+    }
+
+    if (shiftKey && lastSelected !== undefined) {
+      data.items.forEach((f) => {
+        if (between(f.id, lastSelected, file.id)) {
+          f.selected = true;
+        }
+      });
+    }
+
+    if (file.selected) {
+      data.lastSelected = file.id;
+    }
+  }
+};
+
+const changeAll = (selected: boolean) => {
+  if (selected && !props.multi) {
+    return;
+  }
+
+  data.items
+    .filter((f) => f.canBeSelected)
+    .forEach((file) => {
+      file.selected = selected;
+    });
+};
+
+const selectAll = () => changeAll(true);
+
+const deselectAll = () => changeAll(false);
+
+const loadAvailableStorages = () => {
+  resetData();
+  deselectAll();
+  if (!window.platforma) {
+    console.warn('platforma API is not found');
+    return;
+  }
+  window.platforma.lsDriver
+    .getStorageList()
+    .then((storageEntries) => {
+      data.storageOptions = storageEntries.map((it) => ({
+        text: it.name,
+        value: it,
+      }));
+
+      if (props.autoSelectStorage) {
+        tapIf(
+          storageEntries.find(
+            (e) =>
+              e.name === 'local' || // the only local storage on unix systems
+              (e.name.startsWith('local_disk_') && e.initialFullPath.length > 4),
+          ), // local drive where home folder is stored, normally C:\
+          (entry) => {
+            data.storageEntry = entry;
+          },
+        );
+      }
+    })
+    .catch((err) => (data.error = String(err)));
+};
+
+watch(
+  toRef(data, 'storageEntry'),
+  (entry) => {
+    resetData();
+    data.dirPath = entry?.initialFullPath ?? '';
+  },
+  { immediate: true },
+);
+
+watch([() => data.dirPath, () => data.storageEntry], () => {
+  load();
+});
+
+watch(
+  () => props.modelValue,
+  (isOpen) => {
+    if (isOpen) {
+      loadAvailableStorages();
+    } else {
+      Object.assign(data, defaultData());
+    }
+  },
+  { immediate: true },
+);
+
+useEventListener(document, 'keydown', (ev: KeyboardEvent) => {
+  if (!props.modelValue) {
+    return;
+  }
+
+  if (ev.target !== document.body) {
+    return;
+  }
+
+  if (ev.metaKey && ev.code === 'KeyA') {
+    ev.preventDefault();
+    selectAll();
+  }
+
+  if (ev.metaKey && ev.shiftKey && ev.code === 'Period') {
+    ev.preventDefault();
+    data.showHiddenItems = !data.showHiddenItems;
+  }
+
+  if (ev.code === 'Enter') {
+    props.submit();
+  }
+});
+
+defineExpose({
+  isReady,
+  getFilesToImport,
+});
+
+onMounted(loadAvailableStorages);
+</script>
+
+<template>
+  <div :class="style.remote" @click.stop="deselectAll">
+    <div :class="style.search">
+      <div>
+        <PlDropdown v-model="data.storageEntry" label="Select storage" :options="data.storageOptions" />
+      </div>
+      <div>
+        <PlSearchField v-model="data.search" label="Search in folder" clearable />
+      </div>
+    </div>
+    <div :class="style['ls-container']">
+      <div :class="style['ls-head']">
+        <div :class="style['breadcrumbs']">
+          <template v-for="(s, i) in breadcrumbs" :key="i">
+            <div :title="s.path" @click="setDirPath(s.path)">{{ s.name }}</div>
+            <PlIcon16 v-if="s.index !== breadcrumbs.length - 1" name="chevron-right" />
+          </template>
+        </div>
+        <div :class="style.selected">Selected: {{ selectedFiles.length }}</div>
+      </div>
+      <div v-if="data.currentLoadingPath !== undefined" class="ls-loader">
+        <i class="mask-24 mask-loading loader-icon" />
+      </div>
+      <div v-else-if="!data.storageEntry" :class="style['ls-empty']">
+        <div :class="style.cat" />
+        <div :class="style.message">Select storage to preview</div>
+      </div>
+      <div v-else-if="data.error" :class="style['ls-error']">
+        <div :class="style.cat" />
+        <div :class="style.message">{{ data.error }}</div>
+      </div>
+      <div v-else :class="style['ls-body']">
+        <template v-for="file in visibleItems" :key="file.id">
+          <div v-if="file.isDir" :class="style.isDir" @click="setDirPath(file.path)">
+            <i class="icon-16 icon-chevron-right" />
+            <span v-text-overflown :title="file.name">{{ file.name }}</span>
+          </div>
+          <div
+            v-else
+            :class="{ [style.canBeSelected]: file.canBeSelected, [style.selected]: file.selected }"
+            @click.stop="(ev) => selectFile(ev, file)"
+          >
+            <i class="mask-16 mask-box" :class="style.isFile" />
+            <span v-text-overflown :title="file.name">{{ file.name }}</span>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/PlFileDialog/pl-file-dialog.module.scss

@@ -0,0 +1,247 @@
+@import "@/assets/mixins";
+
+.component {
+  .local {
+    --pl-file-dialog-local-bg: var(--bg-base-light);
+    --pl-file-dialog-local-border-color: var(--border-color-div-grey);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 12px;
+    overflow: auto;
+    background-color: var(--pl-file-dialog-local-bg);
+    border-radius: 6px;
+    border: 1px dashed var(--pl-file-dialog-local-border-color);
+
+    flex: 1;
+    margin: 0 24px 24px 24px;
+
+    &:hover {
+      --pl-file-dialog-local-bg: rgba(99, 224, 36, 0.12);
+      --pl-file-dialog-local-border-color: var(--border-color-focus);
+    }
+
+    >span {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 20px;
+      /* 142.857% */
+    }
+
+    .supported {
+      color: var(--txt-03);
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 20px;
+    }
+  }
+
+  .remote {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    min-height: 0;
+    max-width: 100%;
+    flex: 1;
+
+    .search {
+      padding-top: 6px;
+      display: flex;
+      flex-direction: row;
+      gap: 12px;
+      margin: 0 24px;
+
+      >div {
+        flex: 1;
+      }
+    }
+
+    .ls-container {
+      display: flex;
+      flex-direction: column;
+      border-top: 1px solid var(--border-color-div-grey);
+      flex: 1;
+      min-height: 0;
+    }
+
+    .ls-head {
+      display: flex;
+      align-items: center;
+      max-width: 100%;
+      gap: 6px;
+      height: 40px;
+      font-size: 11px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 12px;
+      letter-spacing: 0.44px;
+      border-bottom: 1px solid var(--border-color-div-grey);
+      background-color: var(--bg-base-light);
+      padding: 0 24px;
+
+      .selected {
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: 0.44px;
+        text-transform: uppercase;
+        white-space: nowrap;
+        margin-left: auto;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      >div {
+        cursor: pointer;
+      }
+
+      .breadcrumbs {
+        color: var(--txt-01);
+        font-size: 14px;
+        line-height: 18px;
+        font-weight: 600;
+
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 2px;
+        min-width: 0;
+        max-width: 100%;
+
+        >div {
+          display: inline-block;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        i {
+          display: inline-block;
+          min-width: 16px;
+        }
+      }
+    }
+
+    .ls-error {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      align-items: center;
+      background-color: var(--bg-base-light);
+      height: 366px;
+
+      .cat {
+        margin-top: 40px;
+        width: 240px;
+        height: 200px;
+        background: url('@/assets/images/no-data-cat.svg');
+      }
+
+      .message {
+        color: var(--txt-mask);
+        text-align: center;
+        font-size: 28px;
+        line-height: 28px;
+        font-weight: 500;
+        letter-spacing: -0.56px;
+        overflow: hidden;
+      }
+    }
+
+    .ls-empty {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      align-items: center;
+      background-color: var(--bg-base-light);
+      height: 366px;
+
+      .cat {
+        margin-top: 40px;
+        width: 400px;
+        height: 200px;
+        background: url('@/assets/images/empty-cat.svg');
+      }
+
+      .message {
+        color: var(--txt-mask);
+        text-align: center;
+        font-size: 28px;
+        font-weight: 500;
+        letter-spacing: -0.56px;
+      }
+    }
+
+    .ls-body {
+      padding: 12px;
+      min-height: 0;
+      flex: 1;
+      overflow: auto;
+      user-select: none;
+      display: flex;
+      flex-direction: column;
+      @include scrollbar(true);
+
+      >div {
+        font-family: var(--font-family-monospace);
+        color: var(--txt-01);
+        font-feature-settings: 'ss11' on, 'ss15' on, 'ss17' on;
+        font-size: 14px;
+        font-weight: 400;
+        display: flex;
+        align-items: center;
+        min-height: 24px;
+        gap: 12px;
+        padding: 0 12px;
+
+        >span {
+          display: inline-block;
+          white-space: nowrap;
+          overflow: hidden;
+        }
+
+        >i {
+          min-width: 16px;
+        }
+
+        i.isFile {
+          display: inline-block;
+          background-color: #CFD1DB;
+        }
+
+        &.isDir {
+          cursor: pointer;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+
+        &.canBeSelected {
+          color: var(--txt-01);
+
+          &.selected {
+            background-color: var(--btn-active-select);
+          }
+        }
+      }
+    }
+
+    .ls-loader {
+      display: flex;
+      align-items: center;
+      justify-items: center;
+      height: 366px;
+      transform: scale(4);
+      overflow: hidden;
+
+      .loader-icon {
+        animation: spin 4s linear infinite;
+        background-color: #ccc;
+        margin: auto;
+      }
+    }
+  }
+}

package/src/components/PlFileDialog/remote.ts

@@ -0,0 +1,45 @@
+import type { Option } from '@milaboratories/helpers';
+import type { StorageEntry } from '@platforma-sdk/model';
+import type { FileDialogItem } from './utils';
+import { computed } from 'vue';
+
+export const defaultData = () => ({
+  dirPath: '' as string,
+  search: '',
+  storageEntry: undefined as StorageEntry | undefined,
+  items: [] as FileDialogItem[],
+  error: '',
+  storageOptions: [] as Option<StorageEntry>[],
+  selected: [],
+  lastSelected: undefined as number | undefined,
+  currentLoadingPath: undefined as string | undefined,
+  showHiddenItems: false,
+});
+
+export type Data = ReturnType<typeof defaultData>;
+
+export function useVisibleItems(data: Data) {
+  return computed(() => {
+    let items = data.items;
+
+    if (!data.showHiddenItems) {
+      items = items.filter((it) => !it.name.startsWith('.'));
+    }
+
+    if (data.search) {
+      const search = data.search.toLocaleLowerCase();
+      items = items.filter((it) => it.name.toLocaleLowerCase().includes(search));
+    }
+
+    return items;
+  });
+}
+
+export const vTextOverflown = {
+  mounted: (el: HTMLElement) => {
+    if (el.clientWidth < el.scrollWidth) {
+      const s = el.innerText;
+      el.innerText = s.substring(0, 57) + '...' + s.substring(s.length - 10);
+    }
+  },
+};

package/src/components/PlFileDialog/utils.ts

@@ -1,5 +1,10 @@
+import { trimCharsLeft } from '@milaboratories/helpers';
 import type { ImportFileHandle } from '@platforma-sdk/model';
 
+export function normalizeExtensions(extensions: string[] | undefined) {
+  return extensions ? extensions.map((it) => '.' + trimCharsLeft(it, ['.'])) : undefined;
+}
+
 export function getFilePathBreadcrumbs(filePath: string) {
   const chunks = filePath.split('/');
 

package/src/components/PlFileInput/pl-file-input.scss

@@ -24,6 +24,7 @@
 
   padding: 0 8px;
   gap: 8px;
+  cursor: pointer;
 
   &__envelope {
     font-family: var(--font-family-base);
@@ -64,11 +65,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    cursor: pointer;
-
-    &:focus {
-      outline: none;
-    }
+    line-height: 18px;
 
     &:empty::before {
       color: var(--color-placeholder);