From 80566b3fd50266069971ba9ccee4ae908bac1390 Mon Sep 17 00:00:00 2001
From: Sviatoslav Bar <baterfild2011@gmail.com>
Date: Sun, 15 Sep 2024 23:16:31 +0300
Subject: [PATCH] Feat/ lookups - app components [WTEL-4740]

---
 .../components/actions/delete-all-action.vue  |  41 +++++
 src/app/components/actions/index.js           |   5 +
 .../object-list-popup/object-list-popup.vue   |  61 +++++++
 .../utils/selection-popup/selection-popup.vue | 154 ++++++++++++++++++
 .../one-plus-many-table-cell.vue              |  41 +++++
 5 files changed, 302 insertions(+)
 create mode 100644 src/app/components/actions/delete-all-action.vue
 create mode 100644 src/app/components/actions/index.js
 create mode 100644 src/app/components/utils/object-list-popup/object-list-popup.vue
 create mode 100644 src/app/components/utils/selection-popup/selection-popup.vue
 create mode 100644 src/app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue

diff --git a/src/app/components/actions/delete-all-action.vue b/src/app/components/actions/delete-all-action.vue
new file mode 100644
index 00000000..fedc2791
--- /dev/null
+++ b/src/app/components/actions/delete-all-action.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="delete-all-action">
+    <wt-tooltip>
+      <template #activator>
+        <wt-icon-btn
+          class="icon-action"
+          icon="bucket"
+          v-bind="$attrs"
+          @click="$emit('click')"
+        />
+      </template>
+      {{ actionPanelDeleteTooltip }}
+    </wt-tooltip>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DeleteAllAction',
+  props: {
+    selectedCount: {
+      type: Number,
+    },
+  },
+  computed: {
+    actionPanelDeleteTooltip() {
+      return this.selectedCount
+        ? this.$t('iconHints.deleteSelected', {
+            count: this.selectedCount,
+          })
+        : this.$t('iconHints.deleteAll');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.delete-all-action {
+  line-height: 0;
+}
+</style>
diff --git a/src/app/components/actions/index.js b/src/app/components/actions/index.js
new file mode 100644
index 00000000..6f6968b7
--- /dev/null
+++ b/src/app/components/actions/index.js
@@ -0,0 +1,5 @@
+import DeleteAllAction from './delete-all-action.vue';
+
+const actions = [DeleteAllAction];
+
+export default actions;
diff --git a/src/app/components/utils/object-list-popup/object-list-popup.vue b/src/app/components/utils/object-list-popup/object-list-popup.vue
new file mode 100644
index 00000000..ee7f7c4d
--- /dev/null
+++ b/src/app/components/utils/object-list-popup/object-list-popup.vue
@@ -0,0 +1,61 @@
+<template>
+  <wt-popup
+    v-bind="$attrs"
+    size="sm"
+    min-width="480"
+    @close="close"
+  >
+    <template #title>
+      {{ title }}
+    </template>
+    <template #main>
+      <section>
+        <wt-table
+          :data="dataList"
+          :grid-actions="false"
+          :headers="tableHeaders"
+          :selectable="false"
+        />
+      </section>
+    </template>
+  </wt-popup>
+</template>
+
+<script>
+export default {
+  name: 'ObjectListPopup',
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    dataList: {
+      type: Array,
+      default: () => [],
+    },
+    headers: {
+      type: Array,
+      description: 'Or default "name" header',
+    },
+  },
+  computed: {
+    tableHeaders() {
+      const defaultHeaders = [
+        {
+          value: 'name',
+          text: this.$t('reusable.name'),
+        },
+      ];
+      return this.headers || defaultHeaders;
+    },
+  },
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/app/components/utils/selection-popup/selection-popup.vue b/src/app/components/utils/selection-popup/selection-popup.vue
new file mode 100644
index 00000000..6a2dc2cc
--- /dev/null
+++ b/src/app/components/utils/selection-popup/selection-popup.vue
@@ -0,0 +1,154 @@
+<template>
+  <wt-popup
+    v-bind="$attrs"
+    :min-width="minWidth"
+    size="sm"
+    class="selection-popup"
+    overflow
+    @close="close"
+  >
+    <template #title>
+      {{ title }}
+    </template>
+    <template #main>
+      <ul class="popup-options">
+        <li
+          v-for="(option, key) of options"
+          :key="key"
+          :class="{'active': option.value === selected.value }"
+          class="popup-options__item-wrap"
+          @click="selectOption(option)"
+        >
+          <slot
+            name="option"
+            :option="option"
+          >
+            <wt-icon
+              v-if="option.icon"
+              :icon="option.icon"
+              size="sm"
+            />
+            <h4 class="popup-options__item-header">
+              {{ option.title }}
+            </h4>
+            <wt-tooltip
+              popper-class="selection-popup__tooltip-popper"
+            >
+              <template #activator>
+                <wt-icon-btn
+                  v-if="option.description"
+                  color="info"
+                  icon="rounded-info"
+                />
+              </template>
+              {{ option.description }}
+            </wt-tooltip>
+          </slot>
+        </li>
+      </ul>
+      <!--Slot for displaying specific template styling-->
+      <slot name="after-section" />
+    </template>
+
+    <template #actions>
+      <wt-button
+        :disabled="!selected"
+        @click="add"
+      >
+        {{ $t('objects.create') }}
+      </wt-button>
+      <wt-button
+        color="secondary"
+        @click="close"
+      >
+        {{ $t('objects.close') }}
+      </wt-button>
+    </template>
+  </wt-popup>
+</template>
+
+<script>
+export default {
+  name: 'SelectionPopup',
+  model: {
+    prop: 'selected',
+    event: 'change',
+  },
+  props: {
+    title: {
+      type: String,
+    },
+    selected: {
+      type: Object,
+      description: "Should have following schema: { value: '', title: '', description: ''}",
+    },
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    minWidth: {
+      type: [String, Number],
+      default: 480,
+    },
+  },
+  methods: {
+    add() {
+      this.$emit('select', this.selected);
+    },
+    close() {
+      this.$emit('close');
+    },
+    selectOption(option) {
+      this.$emit('change', option);
+    },
+    isSelected(option) {
+      return option === this.selected;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.selection-popup {
+  .popup-options {
+    margin-top: 20px;
+    padding-right: 10px;
+
+    .popup-options__item-wrap {
+      position: relative;
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+      padding: 7px 10px;
+      cursor: pointer;
+      transition: var(--transition);
+      border: 1px solid var(--form-border-color);
+      border-radius: var(--border-radius);
+
+      .wt-icon {
+        margin-right: var(--spacing-xs);
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      &:hover, &.active {
+        border-color: var(--primary-color);
+      }
+
+      .wt-tooltip {
+        margin-left: auto;
+      }
+    }
+
+    .popup-options__item-header {
+      @extend %typo-subtitle-2;
+    }
+  }
+}
+
+.selection-popup__tooltip-popper {
+  max-width: 480px;
+}
+</style>
diff --git a/src/app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue b/src/app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue
new file mode 100644
index 00000000..0f0674bd
--- /dev/null
+++ b/src/app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <a
+      v-if="collection.length"
+      class="nameLink"
+      tabIndex="0"
+      @click.prevent="inputHandler"
+      @keydown.enter.prevent="inputHandler"
+    >{{ collection[0].name }}</a>
+    <wt-chip v-if="collection.length > 1">
+      +{{ collection.length - 1 }}
+    </wt-chip>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'OnePlusManyTableCell',
+  props: {
+    collection: {
+      required: true,
+    },
+  },
+  methods: {
+    inputHandler() {
+      this.$emit('input');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.nameLink {
+  color: var(--text-main-color);
+  cursor: pointer;
+}
+
+.wt-chip {
+  margin-left: var(--spacing-sm);
+}
+</style>