@zeedhi/teknisa-components-vuetify 3.0.0 → 3.0.1

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>