@zeedhi/teknisa-components-vuetify 1.117.1 → 3.0.1

package/src/components/tek-grid/column-header/TekGridHeaderRow.ts

@@ -0,0 +1,147 @@
+import { Column, GridColumn } from '@zeedhi/common';
+import { IDynamicFilterItem, TekGridColumn } from '@zeedhi/teknisa-components-common';
+import { IDictionary } from '@zeedhi/core';
+import { PropType, UnwrapRef, defineComponent, inject } from 'vue';
+import { ResizeParams, CalcWidth } from '@zeedhi/vuetify';
+
+export default defineComponent({
+	props: {
+		selectable: {
+			type: Boolean,
+			default: false,
+		},
+		headerBackground: {
+			type: String,
+			default: '',
+		},
+		showSelectAll: {
+			type: Boolean,
+			default: false,
+		},
+		allselectedState: {
+			type: Number,
+			default: 0,
+		},
+		visibleColumns: {
+			type: Array as PropType<GridColumn[]>,
+			default: () => [],
+		},
+		dragColumns: {
+			type: Boolean,
+			default: false,
+		},
+		headerCellTextColor: {
+			type: String,
+			default: '',
+		},
+		resizeColumns: {
+			type: Boolean,
+			default: false,
+		},
+		getSortIcon: {
+			type: Function,
+			default: () => {},
+		},
+		isSorted: {
+			type: Function,
+			default: () => {},
+		},
+		toggleSort: {
+			type: Function,
+			default: () => {},
+		},
+		tableColumns: {
+			type: Array as PropType<any[]>,
+			default: () => [],
+		},
+		sortBy: {
+			type: Array as PropType<any[]>,
+			default: () => [],
+		},
+		disableCheckbox: {
+			type: Boolean,
+			default: false,
+		},
+		sortable: {
+			type: Boolean,
+			default: true,
+		},
+		name: {
+			type: String,
+			default: '',
+		},
+		modelValue: {
+			type: Object as PropType<IDictionary<IDynamicFilterItem[]>>,
+			default: () => [],
+		},
+		instanceName: {
+			type: String,
+			required: true,
+		},
+		filterRelationsDatasource: {
+			type: [Object, null],
+			required: false,
+		},
+		filterOperationsDatasource: {
+			type: [Object, null],
+			required: false,
+		},
+		columnFilterButton: {
+			type: Boolean,
+			required: true,
+		},
+		columnHasFilter: {
+			type: Function as PropType<(columnName: string) => boolean>,
+			required: true,
+		},
+		level: {
+			type: Number,
+			default: 0,
+		},
+	},
+	emits: ['selectAllClick', 'resizeMousedown', 'resizeClick', 'update:modelValue'],
+	setup(props, { emit }) {
+		const calcWidth = inject<CalcWidth>('calcWidth');
+
+		if (!calcWidth) {
+			// TODO: use NotProvidedError
+			throw new Error('calcWidth');
+		}
+
+		const selectAllClick = (event: Event) => {
+			emit('selectAllClick', event);
+		};
+
+		const resizeMousedown = (column: GridColumn, event: ResizeParams) => {
+			emit('resizeMousedown', { event, column });
+		};
+
+		const resizeClick = (event: Event) => {
+			emit('resizeClick', { event });
+		};
+
+		const findOrderIndex = (sortBy: readonly any[], column: UnwrapRef<Column>) => {
+			return sortBy.findIndex((sort) => sort.key === column.name);
+		};
+
+		const updateModelValue = (columnName: string, value: IDynamicFilterItem[]) => {
+			const modelValue = { ...props.modelValue };
+			modelValue[columnName] = value;
+			emit('update:modelValue', modelValue);
+		};
+
+		const showFilterButton = (column: TekGridColumn) => {
+			return column.type !== 'action' && props.columnFilterButton && column.filterable;
+		};
+
+		return {
+			calcWidth,
+			resizeMousedown,
+			resizeClick,
+			findOrderIndex,
+			updateModelValue,
+			showFilterButton,
+			selectAllClick,
+		};
+	},
+});

package/src/components/tek-grid/column-header/TekGridHeaderRow.vue

@@ -0,0 +1,78 @@
+<template>
+  <zd-grid-header-row
+    :name="name"
+    :selectable="selectable"
+    :headerBackground="headerBackground"
+    :showSelectAll="showSelectAll"
+    :allselectedState="allselectedState"
+    :visibleColumns="visibleColumns"
+    :dragColumns="dragColumns"
+    :headerCellTextColor="headerCellTextColor"
+    :resizeColumns="resizeColumns"
+    :getSortIcon="getSortIcon"
+    :toggleSort="toggleSort"
+    :sortBy="sortBy"
+    :tableColumns="tableColumns"
+    :isSorted="isSorted"
+    :disableCheckbox="disableCheckbox"
+    @selectAllClick="selectAllClick"
+  >
+    <template #default="{ column, index, isHovering }">
+      <zd-grid-column-header
+        :cssStyle="{
+          'color': headerCellTextColor,
+          width: calcWidth(column),
+        }"
+        :action="column.type === 'action'"
+        :overflow="column.overflow"
+        :helperText="column.helperText"
+        :label="column.label"
+        :columnAlign="column.align"
+        :orderIndex="findOrderIndex(sortBy, column)"
+        :isSortable="sortable && column.sortable"
+        :resizeColumns="resizeColumns"
+        :sortIcon="getSortIcon(tableColumns[index])"
+        :isSorted="isSorted(tableColumns[index])"
+        :isHovering="isHovering"
+        @click="toggleSort(tableColumns[index])"
+        @resizeMousedown="resizeMousedown(column, $event)"
+        @resizeClick="resizeClick($event)"
+      >
+        <template #prepend v-if="index === 0">
+          <tek-grid-indentation
+            :level="level"
+            :show-divider="false"
+          ></tek-grid-indentation>
+        </template>
+        <template #label>
+          <span
+            v-if="column.aggregation"
+            class="tek-grid-column-aggregation"
+          >({{ $t(`TEKGRID_AGGREGATION_${column.aggregation}`) }})
+          </span>
+        </template>
+
+        <template
+          #append="{ isHovering }"
+          v-if="showFilterButton(column)"
+        >
+          <tek-grid-column-filter
+            :modelValue="modelValue[column.name]"
+            :hasFilterData="columnHasFilter(column.name)"
+            :column="column"
+            :instanceName="instanceName"
+            :filterRelationsDatasource="filterRelationsDatasource"
+            :filterOperationsDatasource="filterOperationsDatasource"
+            :isHovering="isHovering"
+            :multiple="!!filterRelationsDatasource && !!filterOperationsDatasource"
+            @update:modelValue="updateModelValue(column.name, $event)"
+          ></tek-grid-column-filter>
+        </template>
+      </zd-grid-column-header>
+    </template>
+  </zd-grid-header-row>
+</template>
+
+<script lang="ts" src="./TekGridHeaderRow.ts"></script>
+
+<style lang="scss"></style>

package/src/components/tek-grid/columns-button/TekGridColumnsButton.ts

@@ -0,0 +1,96 @@
+import { TekGrid, TekGridColumnsButton } from '@zeedhi/teknisa-components-common';
+import sortable from 'sortablejs';
+import { ComponentPublicInstance, computed, defineComponent, mergeProps, nextTick, ref, watch } from 'vue';
+import { ZdIterableColumnsButtonProps, useButtonInstance, useCreateInstance } from '@zeedhi/vuetify';
+import optionsModal from './TekGridColumnsOptionsModal';
+
+export const TekGridColumnsButtonProps = {
+	...ZdIterableColumnsButtonProps,
+	hideGroups: {
+		type: [Boolean, String],
+		default: false,
+	},
+};
+
+const tekGridColumnsButton = defineComponent({
+	props: TekGridColumnsButtonProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<TekGridColumnsButton, ComponentPublicInstance>(
+			props,
+			ctx,
+			TekGridColumnsButton,
+		);
+		const buttonScope = useButtonInstance({ instance, root });
+
+		const menuIsOpened = ref(false);
+
+		const sortableInitialized = ref(false);
+
+		const teste = (a: any) => {
+			console.warn(a);
+		};
+
+		watch(menuIsOpened, () => {
+			if (!menuIsOpened.value || sortableInitialized.value) return;
+
+			sortableInitialized.value = true;
+			nextTick(() => {
+				const columnsTableBody = document.querySelector(`#${instance.name}_columns_table tbody`);
+				if (columnsTableBody) {
+					sortable.create(columnsTableBody as HTMLElement, {
+						handle: '.sortHandle',
+						dragClass: 'tek-grid-columns-button-sortable-drag',
+						onEnd: sortEnd,
+					});
+				}
+			});
+		});
+
+		const gridGroupColumnNames = computed(() => {
+			return instance.iterableComponent.columns.filter((column) => column.grouped).map((column) => column.name) || [];
+		});
+
+		const sortEnd = (event: any) => {
+			const grid: TekGrid = instance.iterableComponent as any;
+			const newOrder = Array.from(event.srcElement.querySelectorAll('tr')).map((row: any) => row.getAttribute('name'));
+			const groupColumnNames: string[] = [];
+			const newColumns = newOrder.map((columnName) => {
+				const column = grid.getColumn(columnName);
+				if (column.grouped) {
+					groupColumnNames.push(columnName);
+				}
+
+				return column;
+			});
+			const ignoredColumns = grid.columns.filter((column) => instance.ignoreColumns.indexOf(column.name) !== -1);
+			grid.columns = newColumns.concat(ignoredColumns);
+
+			if (grid.updateGrouping && JSON.stringify(groupColumnNames) !== JSON.stringify(gridGroupColumnNames)) {
+				grid.updateGrouping();
+			}
+			grid.changeLayout();
+		};
+
+		const moreOptions = () => {
+			optionsModal.show(instance);
+		};
+
+		const close = () => {
+			menuIsOpened.value = false;
+		};
+
+		return {
+			...buttonScope,
+			instance,
+			root,
+			menuIsOpened,
+			moreOptions,
+			close,
+			teste,
+			mergeProps,
+		};
+	},
+});
+
+export default tekGridColumnsButton;

package/src/components/tek-grid/columns-button/TekGridColumnsButton.vue

@@ -0,0 +1,273 @@
+<template>
+  <v-menu
+    :id="instance.name"
+    v-model="menuIsOpened"
+    :class="['zd-iterable-columns-button', 'tek-grid-columns-button', instance.cssClass]"
+    :style="instance.cssStyle"
+    :closeOnContentClick="false"
+    offset-y
+    content-class="zd-iterable-columns-button-options tek-grid-columns-button-options"
+  >
+    <template v-slot:activator="{ props: onMenu }">
+      <v-tooltip bottom>
+        <template v-slot:activator="{ props: onTooltip }">
+          <zd-activator-wrapper
+            :child-props="{
+              component: 'ZdButton',
+              name: instance.name,
+              instanceObject: instance,
+            }"
+            v-bind="mergeProps(onMenu, onTooltip)"
+          ></zd-activator-wrapper>
+        </template>
+        <span>{{ $t('TEKGRID_COLUMNS') }}</span>
+      </v-tooltip>
+    </template>
+
+    <v-card class="zd-pa-2">
+      <div class="tek-grid-columns-button-table-wrapper zd-mb-2">
+        <table class="tek-grid-columns-button-table" :id="instance.name + '_columns_table'">
+          <thead>
+            <tr>
+              <th><!--Name--></th>
+              <th>{{ $t('TEKGRID_COLUMN_VISIBLE') }}</th>
+              <th v-if="!instance.hideGroups">{{ $t('TEKGRID_COLUMN_GROUPED') }}</th>
+              <th v-if="!instance.hideGroups">{{ $t('TEKGRID_COLUMN_AGGREGATION') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="column in instance.filteredColumns()"
+              :key="column.name"
+              :name="column.name"
+            >
+              <td class="tek-grid-columns-button-column-name sortHandle">
+                <span>⦙⦙</span>{{ $t(column.label) }}
+              </td>
+              <td>
+                <zd-checkbox
+                  :name="instance.name + '_column_visible_' + column.name"
+                  :value="column.grouped || column.isVisible"
+                  :events="{
+                    change: instance.controller.showHideTekColumn.bind(instance.controller, column)
+                  }"
+                />
+              </td>
+              <td v-if="!instance.hideGroups">
+                <zd-checkbox
+                  v-if="column.type !== 'action'"
+                  :name="instance.name + '_column_grouped_' + column.name"
+                  :value="column.grouped"
+                  :events="{
+                    change: instance.controller.changeGroupedColumn.bind(instance.controller, column)
+                  }"
+                />
+              </td>
+              <td v-if="!instance.hideGroups" class="tek-grid-columns-button-column-aggregation">
+                <zd-select
+                  v-if="column.type !== 'action'"
+                  :name="instance.name + '_column_aggregation_' + column.name"
+                  v-bind="{
+                    value: column.aggregation,
+                    disabled: column.grouped  || !column.isVisible,
+                    events: {
+                      change: instance.controller.changeAggregationColumn.bind(instance.controller, column)
+                    },
+                    dataText: 'text',
+                    dataValue: 'value',
+                    autocomplete: false,
+                    showHelper: false,
+                    showLabel: false,
+                    datasource: {
+                      data: instance.getAggregationSelectData(),
+                    },
+                  }"
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="tek-grid-columns-button-table-footer">
+        <zd-button
+          :name="instance.name + '_columns_table_footer_button'"
+          label="TEKGRID_MORE_OPTIONS"
+          small
+          outline
+          cssClass="zd-ma-2 zd-mr-1"
+          @click="moreOptions()"
+        ></zd-button>
+        <zd-button
+          :name="instance.name + '_columns_table_footer_close'"
+          label="TEKGRID_CLOSE"
+          small
+          cssClass="zd-ma-2 zd-ml-1"
+          @click="close()"
+        ></zd-button>
+      </div>
+    </v-card>
+  </v-menu>
+</template>
+
+<script lang="ts" src="./TekGridColumnsButton.ts"></script>
+
+<style lang="scss">
+.tek-grid-columns-button-options {
+  max-height: 250px;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+
+  &.theme--dark {
+    background-color: #1e1e1e
+  }
+
+  .tek-grid-columns-button-table-wrapper {
+    flex: 1;
+    overflow-y: auto;
+
+    .tek-grid-columns-button-table {
+      font-size: 13px;
+      border-spacing: 0;
+      width: 100%;
+
+      thead {
+        tr {
+          th {
+            padding: var(--spacing-2) var(--spacing-2) var(--spacing-1) var(--spacing-2);
+            white-space: nowrap;
+            text-align: left;
+            position: sticky;
+            top: 0;
+            z-index: 10;
+            background-color: var(--zd-background-base);
+          }
+        }
+      }
+
+      tbody {
+        tr {
+          td {
+            padding: var(--spacing-1) var(--spacing-2);
+            white-space: nowrap;
+
+            &.tek-grid-columns-button-column-name {
+              cursor: -webkit-grab;
+
+              > span {
+                padding-right: 4px;
+              }
+            }
+
+            &.tek-grid-columns-button-column-aggregation {
+              max-width: 150px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .tek-grid-columns-button-table-footer {
+    display: flex;
+
+    .zd-button {
+      flex: 1;
+    }
+  }
+}
+
+.tek-grid-columns-button-sortable-drag {
+  background: white;
+}
+
+// column options modal
+.tek-grid-column-option-box {
+  margin: var(--spacing-1);
+  background: #ccc;
+  padding: 2px var(--spacing-1);
+  cursor: pointer;
+
+  > * {
+    display: inline-block;
+  }
+
+  > .zd-icon {
+    font-size: 0.9rem;
+    margin-left: var(--spacing-2);
+  }
+
+  &.tek-grid-column-option-grouped-true {
+    cursor: default;
+    background: #fafafa;
+
+    > .zd-icon {
+      display: none;
+    }
+  }
+
+  &.tek-grid-column-option-selected-true {
+    background: var(--v-primary-base);
+    color: white;
+
+    > .zd-icon {
+      color: white;
+    }
+  }
+}
+
+
+.tek-grid-column-option-container-col {
+  position: relative;
+
+  .tek-grid-column-option-container {
+    background: #eee;
+    padding: var(--spacing-1);
+    max-height: 100px;
+    min-height: 42px;
+    align-content: center;
+    position: relative;
+
+    .tek-iterable-footer {
+      display: none !important;
+    }
+
+    .zd-text.no-data {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      text-align: center;
+      font-size: 0.7rem;
+    }
+  }
+
+  .tek-grid-column-option-label {
+    font-weight: var(--zd-font-body2-weight);
+  }
+
+  .tek-grid-column-option-select-all {
+    position: absolute;
+    top: 0.5rem;
+    right: var(--spacing-1);
+    color: var(--v-primary-base);
+    cursor: pointer;
+    font-size: 0.8rem;
+  }
+
+  .tek-grid-column-option-drop-here {
+    position: absolute;
+    z-index: 100;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 35px;
+  }
+}
+
+.tek-grid-column-option-detail-name {
+  color: var(--v-primary-base);
+  font-weight: var(--zd-font-body2-weight);
+  font-size: 1.1rem;
+  margin-top: var(--spacing-6);
+}
+</style>