dashboard-shell-shell 1.0.122 → 1.0.1000000082

package/components/rancherSortableTable/THead.vue

@@ -0,0 +1,561 @@
+<script>
+import { Checkbox } from '@components/Form/Checkbox';
+import { SOME, NONE } from './selection';
+import { AUTO, CENTER, fitOnScreen } from '@shell/utils/position';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+
+export default {
+  emits: ['update-cols-options', 'on-toggle-all', 'group-value-change', 'on-sort-change', 'col-visibility-change'],
+
+  components: { Checkbox, LabeledSelect },
+  props:      {
+    columns: {
+      type:     Array,
+      required: true
+    },
+    sortBy: {
+      type:     String,
+      required: true
+    },
+    defaultSortBy: {
+      type:    String,
+      default: ''
+    },
+    group: {
+      type:    String,
+      default: ''
+    },
+    groupOptions: {
+      type:    Array,
+      default: () => []
+    },
+    descending: {
+      type:     Boolean,
+      required: true
+    },
+    hasAdvancedFiltering: {
+      type:     Boolean,
+      required: false
+    },
+    tableColsOptions: {
+      type:    Array,
+      default: () => [],
+    },
+    tableActions: {
+      type:     Boolean,
+      required: true,
+    },
+    rowActions: {
+      type:     Boolean,
+      required: true,
+    },
+    howMuchSelected: {
+      type:     String,
+      required: true,
+    },
+    checkWidth: {
+      type:    Number,
+      default: 30,
+    },
+    rowActionsWidth: {
+      type:     Number,
+      required: true
+    },
+    subExpandColumn: {
+      type:    Boolean,
+      default: false,
+    },
+    expandWidth: {
+      type:    Number,
+      default: 30,
+    },
+    labelFor: {
+      type:     Function,
+      required: true,
+    },
+    noRows: {
+      type:    Boolean,
+      default: true,
+    },
+    noResults: {
+      type:    Boolean,
+      default: true,
+    },
+    loading: {
+      type:     Boolean,
+      required: false,
+    },
+  },
+
+  data() {
+    return {
+      tableColsOptionsVisibility: false,
+      tableColsMenuPosition:      null
+    };
+  },
+
+  watch: {
+    advancedFilteringValues() {
+      // passing different dummy args to make sure update is triggered
+      this.watcherUpdateLiveAndDelayed(true, false);
+    },
+    tableColsOptionsVisibility(neu) {
+      if (neu) {
+        // check if user clicked outside the table cols options box
+        window.addEventListener('click', this.onClickOutside);
+
+        // update filtering options and toggable cols every time dropdown is open
+        this.$emit('update-cols-options');
+      } else {
+        // unregister click event
+        window.removeEventListener('click', this.onClickOutside);
+      }
+    }
+  },
+  computed: {
+    isAll: {
+      get() {
+        return this.howMuchSelected !== NONE;
+      },
+
+      set(value) {
+        this.$emit('on-toggle-all', value);
+      }
+    },
+    hasAdvGrouping() {
+      return this.group?.length && this.groupOptions?.length;
+    },
+    advGroup: {
+      get() {
+        return this.group || this.advGroup;
+      },
+
+      set(val) {
+        this.$emit('group-value-change', val);
+      }
+    },
+
+    isIndeterminate() {
+      return this.howMuchSelected === SOME;
+    },
+    hasColumnWithSubLabel() {
+      return this.columns.some((col) => col.subLabel);
+    }
+  },
+
+  methods: {
+    changeSort(e, col) {
+      if ( !col.sort ) {
+        return;
+      }
+
+      let desc = false;
+
+      if ( this.sortBy === col.name ) {
+        desc = !this.descending;
+      }
+
+      this.$emit('on-sort-change', col.name, desc);
+    },
+
+    isCurrent(col) {
+      return col.name === this.sortBy;
+    },
+
+    ariaSort(col) {
+      if (this.isCurrent(col)) {
+        return this.descending ? this.t('generic.descending') : this.t('generic.ascending');
+      }
+
+      return this.t('generic.none');
+    },
+
+    tableColsOptionsClick(ev) {
+      // set menu position
+      const menu = document.querySelector('.table-options-container');
+      const elem = document.querySelector('.table-options-btn');
+
+      this.tableColsMenuPosition = fitOnScreen(menu, ev || elem, {
+        overlapX:  true,
+        fudgeX:    326,
+        fudgeY:    -22,
+        positionX: CENTER,
+        positionY: AUTO,
+      });
+
+      // toggle visibility
+      this.tableColsOptionsVisibility = !this.tableColsOptionsVisibility;
+    },
+
+    onClickOutside(event) {
+      const tableOpts = this.$refs['table-options'];
+
+      if (!tableOpts || tableOpts.contains(event.target)) {
+        return;
+      }
+      this.tableColsOptionsVisibility = false;
+    },
+
+    tableOptionsCheckbox(value, label) {
+      this.$emit('col-visibility-change', {
+        label,
+        value
+      });
+    },
+
+    tooltip(col) {
+      if (!col.tooltip) {
+        return null;
+      }
+
+      const exists = this.$store.getters['i18n/exists'];
+
+      return exists(col.tooltip) ? this.t(col.tooltip) : col.tooltip;
+    },
+  }
+
+};
+</script>
+
+<template>
+  <thead>
+    <tr :class="{'loading': loading, 'top-aligned': hasColumnWithSubLabel}">
+      <th
+        v-if="tableActions"
+        :width="checkWidth"
+      >
+        <Checkbox
+          v-model:value="isAll"
+          class="check"
+          data-testid="sortable-table_check_select_all"
+          :indeterminate="isIndeterminate"
+          :disabled="noRows || noResults"
+          :alternate-label="t('sortableTable.genericGroupCheckbox')"
+        />
+      </th>
+      <th
+        v-if="subExpandColumn"
+        :width="expandWidth"
+      />
+      <!-- <th
+        v-for="(col) in columns"
+        v-show="!hasAdvancedFiltering || (hasAdvancedFiltering && col.isColVisible)"
+        :key="col.name"
+        :align="col.align || 'left'"
+        :width="col.width"
+        :class="{ sortable: col.sort, [col.breakpoint]: !!col.breakpoint}"
+        :tabindex="col.sort ? 0 : -1"
+        class="sortable-table-head-element"
+        :aria-sort="ariaSort(col)"
+        @click.prevent="changeSort($event, col)"
+        @keyup.enter="changeSort($event, col)"
+        @keyup.space="changeSort($event, col)"
+      > -->
+      <th
+        v-for="(col) in columns"
+        v-show="!hasAdvancedFiltering || (hasAdvancedFiltering && col.isColVisible)"
+        :key="col.name"
+        :align="'left'"
+        :width="col.width"
+        :class="{ sortable: col.sort, [col.breakpoint]: !!col.breakpoint}"
+        :tabindex="col.sort ? 0 : -1"
+        class="sortable-table-head-element"
+        :aria-sort="ariaSort(col)"
+        @click.prevent="changeSort($event, col)"
+        @keyup.enter="changeSort($event, col)"
+        @keyup.space="changeSort($event, col)"
+      >
+        <div
+          class="table-header-container"
+          :class="{ 'not-filterable': hasAdvancedFiltering && !col.isFilter }"
+        >
+          <div
+            v-clean-tooltip="tooltip(col)"
+            class="content"
+          >
+            <span
+              v-if="(col.name === 'harvester' || col.name === 'explorer') && col.label === ' '"
+            >
+              管理
+            </span>
+            <span
+              v-if="!((col.name === 'harvester' || col.name === 'explorer') && col.label === ' ')"
+              v-clean-html="labelFor(col)"
+              class="text-no-break"
+            />
+            <span
+              v-if="col.subLabel"
+              class="text-muted text-no-break"
+            >
+              {{ col.subLabel }}
+            </span>
+          </div>
+          <div
+            v-if="col.sort"
+            class="sort"
+            aria-hidden="true"
+          >
+            <i
+              v-show="hasAdvancedFiltering && !col.isFilter"
+              v-clean-tooltip="t('sortableTable.tableHeader.noFilter')"
+              class="icon icon-info not-filter-icon"
+            />
+            <span class="icon-stack">
+              <i class="icon icon-sort icon-stack-1x faded" />
+              <i
+                v-if="isCurrent(col) && !descending"
+                class="icon icon-sort-down icon-stack-1x"
+                :alt="t('sortableTable.alt.sortingIconDesc')"
+              />
+              <i
+                v-if="isCurrent(col) && descending"
+                class="icon icon-sort-up icon-stack-1x"
+                :alt="t('sortableTable.alt.sortingIconAsc')"
+              />
+            </span>
+          </div>
+        </div>
+      </th>
+      <th
+        v-if="rowActions && hasAdvancedFiltering && tableColsOptions.length"
+        :width="rowActionsWidth"
+        :align="'left'"
+      >
+        <div
+          ref="table-options"
+          class="table-options-group"
+        >
+          <button
+            aria-haspopup="true"
+            aria-expanded="false"
+            type="button"
+            class="btn btn-sm role-multi-action table-options-btn"
+            @click="tableColsOptionsClick"
+          >
+            <i class="icon icon-actions" />
+          </button>
+          <div
+            v-show="tableColsOptionsVisibility"
+            class="table-options-container"
+            :style="tableColsMenuPosition"
+          >
+            <div
+              v-if="hasAdvGrouping"
+              class="table-options-grouping"
+            >
+              <span class="table-options-col-subtitle">{{ t('sortableTable.tableHeader.groupBy') }}:</span>
+              <LabeledSelect
+                v-model:value="advGroup"
+                class="table-options-grouping-select"
+                :clearable="true"
+                :options="groupOptions"
+                :disabled="false"
+                :searchable="false"
+                mode="edit"
+                :multiple="false"
+                :taggable="false"
+              />
+            </div>
+            <p class="table-options-col-subtitle mb-20">
+              {{ t('sortableTable.tableHeader.show') }}:
+            </p>
+            <ul>
+              <li
+                v-for="(col, index) in tableColsOptions"
+                v-show="col.isTableOption"
+                :key="index"
+                :class="{ 'visible': !col.preventColToggle }"
+              >
+                <Checkbox
+                  v-show="!col.preventColToggle"
+                  v-model:value="col.isColVisible"
+                  class="table-options-checkbox"
+                  :label="col.label"
+                  @update:value="tableOptionsCheckbox($event, col.label)"
+                />
+              </li>
+            </ul>
+          </div>
+        </div>
+      </th>
+      <!-- <th
+        v-else-if="rowActions"
+        :width="rowActionsWidth"
+      /> -->
+      <th
+        v-else-if="rowActions"
+        :width="rowActionsWidth"
+        :align="'left'"
+      >
+        操作
+      </th>
+    </tr>
+  </thead>
+</template>
+
+  <style lang="scss" scoped>
+    .table-options-group {
+
+      .table-options-btn.role-multi-action {
+        background-color: transparent;
+        border: none;
+        font-size: 18px;
+        &:hover, &:focus {
+          background-color: var(--accent-btn);
+          box-shadow: none;
+        }
+      }
+      .table-options-container {
+        width: 350px;
+        border: 1px solid var(--primary);
+        background-color: var(--body-bg);
+        padding: 20px;
+        z-index: 1;
+
+        .table-options-grouping {
+          display: flex;
+          align-items: center;
+          margin-bottom: 20px;
+
+          span {
+            white-space: nowrap;
+            margin-right: 10px;
+          }
+        }
+
+        ul {
+          list-style: none;
+          margin: 0;
+          padding: 0;
+          max-height: 200px;
+          overflow-y: auto;
+
+          li {
+            margin: 0;
+            padding: 0;
+
+            &.visible {
+              margin: 0 0 10px 0;
+            }
+          }
+        }
+      }
+    }
+
+    .sortable > SPAN {
+      cursor: pointer;
+      user-select: none;
+      white-space: nowrap;
+      &:hover,
+      &:active {
+        text-decoration: underline;
+        color: var(--body-text);
+      }
+    }
+
+    .top-aligned th {
+      vertical-align: top;
+      padding-top: 10px;
+    }
+
+    thead {
+      tr {
+        background-color: var(--sortable-table-header-bg);
+        color: var(--body-text);
+        text-align: left;
+        border-bottom: 1px solid var(--sortable-table-top-divider);
+      }
+    }
+
+    th {
+      padding: 16.5px 5px;
+      font-weight: normal;
+      border: 0;
+      color: var(--body-text);
+
+      &.sortable-table-head-element:focus-visible {
+        @include focus-outline;
+        outline-offset: -4px;
+      }
+
+      .table-header-container {
+        display: inline-flex;
+
+        .content {
+          display: flex;
+          flex-direction: column;
+        }
+
+        &.not-filterable {
+          margin-top: -2px;
+
+          .icon-stack {
+            margin-top: -2px;
+          }
+        }
+
+        .not-filter-icon {
+          font-size: 16px;
+          color: var(--primary);
+          vertical-align: super;
+        }
+      }
+
+      &:first-child {
+        padding-left: 10px;
+      }
+
+      &:last-child {
+        padding-right: 10px;
+        padding-left: 12px;
+        width: 200px;
+      }
+
+      &:not(.sortable) > SPAN {
+        display: block;
+        margin-bottom: 2px;
+      }
+
+      & A {
+        color: var(--body-text);
+      }
+
+      // Aligns with COLUMN_BREAKPOINTS
+      @media only screen and (max-width: map-get($breakpoints, '--viewport-4')) {
+        // HIDE column on sizes below 480px
+        &.tablet, &.laptop, &.desktop {
+          display: none;
+        }
+      }
+      @media only screen and (max-width: map-get($breakpoints, '--viewport-9')) {
+        // HIDE column on sizes below 992px
+        &.laptop, &.desktop {
+          display: none;
+        }
+      }
+      @media only screen and (max-width: map-get($breakpoints, '--viewport-12')) {
+        // HIDE column on sizes below 1281px
+        &.desktop {
+          display: none;
+        }
+      }
+    }
+
+    .icon-stack {
+      width: 12px;
+    }
+
+    .icon-sort {
+      &.faded {
+        opacity: .3;
+      }
+    }
+  </style>
+  <style lang="scss">
+    .table-options-checkbox .checkbox-custom {
+      min-width: 14px;
+    }
+    .table-options-checkbox .checkbox-label {
+      color: var(--body-text);
+    }
+  </style>

package/components/rancherSortableTable/actions.js

@@ -0,0 +1,153 @@
+import debounce from 'lodash/debounce';
+
+// Use a visible display type to reduce flickering
+const displayType = 'inline-flex';
+
+export default {
+
+  data() {
+    return {
+      bulkActionsClass:            'bulk',
+      bulkActionClass:             'bulk-action',
+      bulkActionsDropdownClass:    'bulk-actions-dropdown',
+      bulkActionAvailabilityClass: 'action-availability',
+
+      hiddenActions: [],
+
+      updateHiddenBulkActions: debounce(this.protectedUpdateHiddenBulkActions, 10)
+    };
+  },
+
+  beforeUnmount() {
+    window.removeEventListener('resize', this.onWindowResize);
+  },
+
+  mounted() {
+    window.addEventListener('resize', this.onWindowResize);
+    this.updateHiddenBulkActions();
+  },
+
+  watch: {
+    selectedRows() {
+      this.updateHiddenBulkActions();
+    },
+    keyedAvailableActions() {
+      this.updateHiddenBulkActions();
+    },
+  },
+
+  computed: {
+    availableActions() {
+      return this.bulkActionsForSelection.filter((act) => !act.external);
+    },
+
+    keyedAvailableActions() {
+      return this.availableActions.map((aa) => aa.action);
+    },
+
+    selectedRowsText() {
+      if (!this.selectedRows.length) {
+        return null;
+      }
+
+      return this.t('sortableTable.actionAvailability.selected', { actionable: this.selectedRows.length });
+    },
+
+    // Shows a tooltip if the bulk action that the user is hovering over can not be applied to all selected rows
+    actionTooltip() {
+      if (!this.selectedRows.length || !this.actionOfInterest) {
+        return null;
+      }
+
+      const runnableTotal = this.selectedRows.filter(this.canRunBulkActionOfInterest).length;
+
+      if (runnableTotal === this.selectedRows.length) {
+        return null;
+      }
+
+      return this.t('sortableTable.actionAvailability.some', {
+        actionable: runnableTotal,
+        total:      this.selectedRows.length,
+      });
+    },
+  },
+
+  methods: {
+    onWindowResize() {
+      this.updateHiddenBulkActions();
+      this.onScroll();
+    },
+
+    /**
+     * Determine if any actions wrap over to a new line, if so group them into a dropdown instead
+     */
+    protectedUpdateHiddenBulkActions() {
+      if (!this.$refs.container) {
+        return;
+      }
+
+      const actionsContainer = this.$refs.container.querySelector(`.${ this.bulkActionsClass }`);
+      const actionsDropdown = this.$refs.container.querySelector(`.${ this.bulkActionsDropdownClass }`);
+
+      if (!actionsContainer || !actionsDropdown) {
+        return;
+      }
+
+      const actionsContainerWidth = actionsContainer.offsetWidth;
+      const actionsHTMLCollection = this.$refs.container.querySelectorAll(`.${ this.bulkActionClass }`);
+      const actions = Array.from(actionsHTMLCollection || []);
+
+      // Determine if the 'x selected' label should show and it's size
+      const selectedRowsText = this.$refs.container.querySelector(`.${ this.bulkActionAvailabilityClass }`);
+      let selectedRowsTextWidth = 0;
+
+      if (this.selectedRowsText) {
+        if (selectedRowsText) {
+          selectedRowsText.style.display = displayType;
+          selectedRowsTextWidth = selectedRowsText.offsetWidth;
+        } else {
+          selectedRowsText.style.display = 'none;';
+        }
+      }
+
+      this.hiddenActions = [];
+
+      let cumulativeWidth = 0;
+      let showActionsDropdown = false;
+      let totalAvailableWidth = actionsContainerWidth - selectedRowsTextWidth;
+
+      // Loop through all actions to determine if some exceed the available space in the row, if so hide them and instead show in a dropdown
+      for (let i = 0; i < actions.length; i++) {
+        const ba = actions[i];
+
+        ba.style.display = displayType;
+        const actionWidth = ba.offsetWidth;
+
+        cumulativeWidth += actionWidth + 15;
+        if (cumulativeWidth >= totalAvailableWidth) {
+          // There are too many actions so the drop down will be visible.
+          if (!showActionsDropdown) {
+            // If we haven't previously enabled the drop down...
+            actionsDropdown.style.display = displayType;
+            // By showing the drop down some previously visible actions may now be hidden, so start the process again
+            // ... except taking into account the width of drop down width in the available space
+            i = -1;
+            cumulativeWidth = 0;
+            showActionsDropdown = true;
+            totalAvailableWidth = actionsContainerWidth - actionsDropdown.offsetWidth - selectedRowsTextWidth;
+          } else {
+            // Collate the actions in an array and hide in the normal row
+            const id = ba.attributes.getNamedItem('id').value;
+
+            this.hiddenActions.push(this.availableActions.find((aa) => aa.action === id));
+            ba.style.display = 'none';
+          }
+        }
+      }
+
+      if (!showActionsDropdown) {
+        actionsDropdown.style.display = 'none';
+      }
+    }
+  }
+};