@eturnity/eturnity_reusable_components 8.7.4--EPDM-12729.4 → 8.7.4

package/src/components/tableDropdown/index.vue

@@ -1,685 +1,669 @@
-<template>
-  <DropdownRow
-    :colspan="colSpan"
-    :disabled="disabled"
-    :is-open="isOpen"
-    @click="toggleOpen"
-  >
-    <ComponentContainer class="table-dropdown" :col-span="colSpan - 1">
-      <ComponentItem
-        v-for="(item, index) in tableItems"
-        :key="index"
-        ref="dropdownItem"
-        :class="{
-          'table-dropdown-item': item.type !== 'input',
-        }"
-        :is-nested="isNested"
-        :show-archived="showArchived"
-      >
-        <NestedContainer :is-nested="isNested">
-          <NestedIcon
-            v-if="
-              isNested &&
-              (item.type === 'input' ||
-                item.type === 'no-template' ||
-                item.type === 'template')
-            "
-          />
-          <TemplateButton
-            v-if="
-              item.type &&
-              item.type === 'template' &&
-              (item.value === '' || item.value === '-')
-            "
-            :key="index + '_button'"
-            :show-archived="showArchived"
-            @click.stop="onTemplateClick(item.row)"
-          >
-            {{ $gettext('Use template...') }}
-          </TemplateButton>
-          <TemplateLink
-            v-else-if="
-              item.type && item.type === 'template' && item.value !== ''
-            "
-            :show-archived="showArchived"
-            @click.stop="onSelectedTemplateClick(item.row)"
-          >
-            <Icon
-              :color="showArchived ? theme.colors.red : theme.colors.brightBlue"
-              name="template_icon_not_clickable"
-              size="14px"
-            />
-            <div>{{ item.value }}</div>
-          </TemplateLink>
-          <NoTemplate
-            v-if="item.type && item.type === 'no-template'"
-            :show-archived="showArchived"
-          >
-            {{ $gettext('No main component template') }}
-          </NoTemplate>
-          <InputContainer
-            v-if="item.type === 'input'"
-            :has-message="showInfoText"
-            @click.stop="onInputClick()"
-          >
-            <InfoText v-if="showInfoText" :text="infoTextMessage" type="dot" />
-            <TextContainer
-              v-if="customInputDisabled"
-              class="input-placeholder"
-              :show-archived="showArchived"
-            >
-              <span> {{ item.value }}</span>
-            </TextContainer>
-            <InputText
-              v-else
-              class="inputField"
-              :disabled="customInputDisabled"
-              :font-color="showArchived ? theme.colors.red : 'black'"
-              :min-width="item.value.length + 'ch'"
-              :no-border="true"
-              :value="item.value"
-              @input-change="onCustomInputChange($event)"
-            />
-          </InputContainer>
-          <TextContainer
-            v-else-if="
-              item.type !== 'input' &&
-              item.type !== 'no-template' &&
-              item.type !== 'template'
-            "
-            :show-archived="showArchived"
-          >
-            <span> {{ item.value }}</span>
-          </TextContainer>
-        </NestedContainer>
-      </ComponentItem>
-      <ArrowContainer class="arrow-container" :is-disabled="disabled">
-        <ArrowWrapper :show-archived="showArchived">
-          <InfoWrapper v-if="showArchived">
-            <InfoText
-              icon-color="red"
-              :text="
-                $gettext(`Component has been archived and shouldn't be used`)
-              "
-            />
-          </InfoWrapper>
-          <ArrowDown
-            v-if="!isOpen"
-            class="arrow-dropdown"
-            @click.stop="toggleOpen"
-          />
-          <ArrowUp v-else @click.stop="toggleOpen" />
-        </ArrowWrapper>
-        <OptionsContainer v-if="isOpen" ref="optionsContainer">
-          <OptionsWrapper @click.prevent.stop>
-            <SearchContainer @click.prevent.stop>
-              <SearchInput
-                ref="searchInput"
-                :placeholder="$gettext('Keyword') + '...'"
-                :value="inputText"
-                @click.prevent.stop
-                @on-change="onSearch($event)"
-              />
-            </SearchContainer>
-            <Spinner v-if="optionsLoading" />
-            <EmptyText v-else-if="!optionsLoading && !optionItems.length">
-              {{ emptyText ? emptyText : $gettext('No components found.') }}
-            </EmptyText>
-            <OptionsItem
-              v-for="(item, index) in optionItems"
-              v-else
-              :key="index"
-              :col-span="colSpan - 1"
-              :tabindex="0"
-              :width="dynamicGridWidth"
-              @click="onItemClick(item)"
-              @keyup.enter="onItemClick(item)"
-            >
-              <template v-for="(option, idx) in optionsDisplay" :key="idx">
-                <span v-if="option !== 'template'">
-                  {{ !!item[option] ? item[option] : '-' }}
-                </span>
-                <TemplateButton
-                  v-else-if="option === 'template' && item.has_template"
-                  @click.stop="onTemplateClick(item)"
-                >
-                  {{ $gettext('Use template...') }}
-                </TemplateButton>
-                <NoTemplate
-                  v-else-if="option === 'template' && !item.has_template"
-                >
-                  {{ $gettext('No main component template') }}
-                </NoTemplate>
-              </template>
-            </OptionsItem>
-          </OptionsWrapper>
-          <CustomContainer
-            v-if="inputText.length && allowFreeInputs"
-            @click="onCustomNameClick()"
-          >
-            <CustomName>{{ getCustomName }}</CustomName>
-            <CustomSubtext>
-              ({{ $gettext('custom_component') }})
-            </CustomSubtext>
-          </CustomContainer>
-        </OptionsContainer>
-      </ArrowContainer>
-    </ComponentContainer>
-  </DropdownRow>
-</template>
-
-<script>
-  // import TableDropdown from "@eturnity/eturnity_reusable_components/src/components/tableDropdown"
-  // To use:
-  // <table-dropdown
-  //   :colSpan="2"
-  //   :tableItems="getDropdownValues(row)"
-  //   :showArchived="
-  //     row.selectedValue
-  //       ? row.selectedValue.status_active === false
-  //       : row.status_active === false
-  //   "
-  //   @toggle-dropdown-open="toggleDropdownOpen(row.id, $event)"
-  //   @dropdown-search="onDropdownSearch($event)"
-  //   @item-selected="onItemSelected({ item: $event, index })"
-  //   :isOpen="isDropdownOpen(row)"
-  //   :optionItems="groupComponents" // list of options
-  //   :optionsLoading="dropdownOptionsLoading"
-  //   :optionsDisplay="['display_name', 'company_item_number']" // Array. what should be displayed
-  //   :disabled="true"
-  // />
-  import styled from 'vue3-styled-components'
-  import Spinner from '../spinner'
-  import SearchInput from '../inputs/searchInput'
-  import InputText from '../inputs/inputText'
-  import CollapseArrowIcon from '../../assets/icons/collapse_arrow_icon.svg'
-  import SubpositionMarkerIcon from '../../assets/icons/subposition_marker.svg'
-  import fileIconPng from '../../assets/icons/file_icon.png'
-  import Icon from '../icon'
-  import theme from '@/assets/theme.js'
-  import InfoText from '../infoText'
-
-  const rowAttrs = { disabled: Boolean, isOpen: Boolean }
-  const DropdownRow = styled('div', rowAttrs)`
-    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-    display: contents;
-
-    input {
-      cursor: ${(props) => (!props.isOpen ? 'pointer !important' : 'inherit')};
-    }
-
-    .input-placeholder {
-      height: 25px;
-      padding-left: 12px;
-    }
-  `
-
-  const ItemAttrs = { isNested: Boolean, showArchived: Boolean }
-  const ComponentItem = styled('td', ItemAttrs)`
-    padding-left: ${(props) => (props.isNested ? '14px !important' : '0')};
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding-right: 0 !important;
-    color: ${(props) =>
-      props.showArchived ? props.theme.colors.red : 'inherit'};
-
-    &.table-dropdown-item {
-      background-clip: content-box;
-      padding: 8px 0 7px 0 !important;
-      vertical-align: middle;
-
-      @media not all and (min-resolution: 0.001dpcm) {
-        @supports (-webkit-appearance: none) {
-          /* Safari Only CSS here */
-          padding: 8px 0 10px 0 !important;
-        }
-      }
-
-      span {
-        padding-left: 15px;
-      }
-    }
-  `
-
-  const containerAttrs = { colSpan: Number, width: String }
-  const ComponentContainer = styled('div', containerAttrs)`
-    display: contents;
-    align-items: center;
-    background-color: ${(props) => props.theme.colors.white};
-    border-radius: 4px;
-    padding: 5px 4px;
-  `
-
-  const ArrowDown = styled(CollapseArrowIcon)`
-    width: 8px;
-    transition: transform 150ms ease;
-  `
-
-  const ArrowUp = styled.img`
-    width: 8px;
-    transform: rotate(180deg);
-    transition: transform 150ms ease;
-  `
-
-  const ArrowAttrs = { isDisabled: Boolean }
-  const ArrowContainer = styled('td', ArrowAttrs)`
-    border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
-    background-clip: content-box;
-    padding: 8px 0 7px 0 !important;
-    border-radius: 0 4px 4px 0;
-    cursor: ${(props) =>
-      props.isDisabled ? 'not-allowed !important' : 'auto'};
-
-    @media not all and (min-resolution: 0.001dpcm) {
-      @supports (-webkit-appearance: none) {
-        /* Safari Only CSS here */
-        padding: 8px 0 10px 0 !important;
-      }
-    }
-
-    .arrow-dropdown {
-      vertical-align: middle;
-      margin-left: 11px;
-    }
-  `
-
-  const arrowAttrs = { showArchived: Boolean }
-  const ArrowWrapper = styled('div', arrowAttrs)`
-    display: grid;
-    grid-template-columns: ${(props) =>
-      props.showArchived ? 'auto auto' : 'auto'};
-    align-items: center;
-    justify-items: center;
-    height: 100%;
-  `
-
-  const optionsAttrs = { top: Number, left: Number }
-  const OptionsContainer = styled('div', optionsAttrs)`
-    position: absolute;
-    margin-top: 10px;
-    display: grid;
-    grid-template-rows: 1fr auto;
-    left: 20px;
-    width: auto;
-    max-height: 360px;
-    min-height: 200px;
-    overflow: auto;
-    border: 1px solid ${(props) => props.theme.colors.grey3};
-    z-index: 9999;
-    background: ${(props) => props.theme.colors.white};
-    border-radius: 4px;
-  `
-
-  const EmptyText = styled.div`
-    align-self: center;
-    justify-self: center;
-    height: 100px;
-    display: grid;
-    align-content: center;
-  `
-
-  const OptionsWrapper = styled.div`
-    display: grid;
-    position: relative;
-    padding: 12px;
-    grid-gap: 4px;
-    font-size: 13px;
-    grid-template-rows: max-content;
-    height: max-content;
-    min-width: 400px; // kind of an arbitrary number until we know all use cases
-  `
-
-  const OptionsItem = styled('div', containerAttrs)`
-    display: grid;
-    grid-template-columns: ${(props) => props.width};
-    grid-gap: 30px;
-    padding: 10px;
-    height: max-content;
-    justify-items: flex-start;
-
-    span {
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    &:hover {
-      background-color: ${(props) => props.theme.colors.grey5};
-    }
-  `
-
-  const SearchContainer = styled.div`
-    position: sticky;
-    top: 0;
-    padding-top: 6px;
-    background: ${(props) => props.theme.colors.white};
-    height: 40px;
-  `
-
-  const templateAttrs = { showArchived: Boolean }
-  const TemplateButton = styled('div', templateAttrs)`
-    cursor: pointer;
-    background-color: #263238;
-    color: ${(props) =>
-      props.showArchived ? props.theme.colors.red : props.theme.colors.white};
-    padding: 4px 10px;
-    display: inline-block;
-    border-radius: 4px;
-    text-align: center;
-    margin-left: 15px;
-  `
-
-  const NoTemplate = styled('div', templateAttrs)`
-    color: ${(props) =>
-      props.showArchived ? props.theme.colors.red : props.theme.colors.gray1};
-    font-style: italic;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding-left: 15px;
-  `
-
-  const TemplateLink = styled('div', templateAttrs)`
-    color: ${(props) =>
-      props.showArchived
-        ? props.theme.colors.red
-        : props.theme.colors.brightBlue};
-    cursor: pointer;
-    display: grid;
-    grid-template-columns: auto 1fr;
-    grid-gap: 12px;
-    padding-left: 15px;
-  `
-
-  const inputContainerAttrs = { hasMessage: Boolean }
-  const InputContainer = styled('div', inputContainerAttrs)`
-    margin-left: ${(props) => (props.hasMessage ? '10px' : '0')};
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-
-    .inputField input {
-      border-radius: 4px 0 0 4px;
-    }
-  `
-
-  const CustomContainer = styled.div`
-    display: grid;
-    grid-template-columns: auto 1fr;
-    padding: 10px 22px;
-    border-top: 1px solid ${(props) => props.theme.colors.grey3};
-    height: 37px;
-
-    &:hover {
-      background-color: ${(props) => props.theme.colors.grey5};
-    }
-  `
-
-  const CustomName = styled.div`
-    justify-self: flex-start;
-  `
-
-  const CustomSubtext = styled.div`
-    justify-self: flex-end;
-    color: ${(props) => props.theme.colors.grey3};
-  `
-
-  const TextContainer = styled('div', templateAttrs)`
-    height: 100%;
-    display: grid;
-    align-items: center;
-    color: ${(props) =>
-      props.showArchived ? props.theme.colors.red : 'inherit'};
-  `
-
-  const NestedIcon = styled(SubpositionMarkerIcon)`
-    height: 10px;
-    width: 6px;
-  `
-
-  const NestedAttrs = { isNested: Boolean }
-  const NestedContainer = styled('div', NestedAttrs)`
-    display: grid;
-    grid-gap: 5px;
-    grid-template-columns: ${(props) => (props.isNested ? 'auto 1fr' : '1fr')};
-    align-items: center;
-  `
-
-  const InfoWrapper = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-left: 8px;
-  `
-
-  export default {
-    name: 'TableDropdown',
-    components: {
-      DropdownRow,
-      ComponentItem,
-      ComponentContainer,
-      ArrowDown,
-      ArrowUp,
-      OptionsContainer,
-      Spinner,
-      EmptyText,
-      SearchInput,
-      ArrowWrapper,
-      OptionsWrapper,
-      OptionsItem,
-      SearchContainer,
-      TemplateButton,
-      NoTemplate,
-      TemplateLink,
-      InputText,
-      InputContainer,
-      CustomContainer,
-      CustomName,
-      CustomSubtext,
-      ArrowContainer,
-      TextContainer,
-      NestedIcon,
-      NestedContainer,
-      Icon,
-      InfoText,
-      InfoWrapper,
-    },
-    props: {
-      colSpan: {
-        required: false,
-        default: 1,
-      },
-      customInputDisabled: {
-        // whether the input field should be disabled
-        required: false,
-        default: true,
-      },
-      allowFreeInputs: {
-        // whether we allow the user to select a custom input
-        required: false,
-        default: false,
-      },
-      tableItems: {
-        required: true,
-      },
-      showArchived: {
-        required: false,
-        default: false,
-      },
-      isOpen: {
-        required: true,
-        default: false,
-      },
-      optionsLoading: {
-        required: false,
-        default: false,
-      },
-      emptyText: {
-        required: false,
-        default: null,
-      },
-      optionItems: {
-        required: true,
-      },
-      optionsDisplay: {
-        required: true,
-        default: [], // should be like ['display_name', 'company_item_number', 'description']
-      },
-      disabled: {
-        required: false,
-        default: false,
-      },
-      isNested: {
-        required: false,
-        default: false,
-      },
-      showInfoText: {
-        required: false,
-        default: false,
-      },
-      infoTextMessage: {
-        required: false,
-        default: '',
-      },
-    },
-    data() {
-      return {
-        inputText: '',
-        wasClicked: false, // prevents custom-name from being triggered on the <input-text />
-        dynamicWidth: [], // for numbers
-        dynamicGridWidth: [], // for grid values
-        fileIcon: fileIconPng,
-      }
-    },
-    computed: {
-      getCustomName() {
-        return this.inputText
-      },
-      theme() {
-        return theme
-      },
-    },
-    watch: {
-      isOpen(newVal) {
-        if (newVal) {
-          document.addEventListener('click', this.clickOutside)
-          this.$emit('dropdown-search', '')
-          this.$nextTick(() => {
-            this.$refs.searchInput.$el.children[0].children[0].focus()
-          })
-          this.$nextTick(() => {
-            this.scrollToItem()
-          })
-        }
-      },
-      optionItems: {
-        immediate: true,
-        handler(val) {
-          if (val && val.length) {
-            this.setDropdownWidth(val)
-          }
-        },
-      },
-    },
-    methods: {
-      toggleOpen(event) {
-        if (
-          this.disabled ||
-          (event &&
-            !(event.target === this.$el) &&
-            !this.$el.contains(event.target))
-        ) {
-          return
-        }
-        this.wasClicked = false
-        if (!this.isOpen) {
-          document.addEventListener('click', this.clickOutside)
-          this.$emit('dropdown-search', '')
-          this.$nextTick(() => {
-            this.scrollToItem()
-          })
-          this.$emit('toggle-dropdown-open', { close: false })
-          this.$nextTick(() => {
-            this.$refs.searchInput.$el.children[0].children[1].focus()
-          })
-        } else {
-          document.removeEventListener('click', this.clickOutside)
-          this.$emit('toggle-dropdown-open', { close: true })
-          this.inputText = ''
-        }
-      },
-      onInputClick() {
-        if (!this.isOpen) {
-          this.toggleOpen()
-        }
-      },
-      scrollToItem() {
-        if (this.$refs.optionsContainer) {
-          this.$refs.optionsContainer.$el.scrollIntoView({
-            behavior: 'smooth',
-            block: 'center',
-          })
-        }
-      },
-      onTemplateClick(item) {
-        this.$emit('on-template-click', item)
-      },
-      onSelectedTemplateClick(item) {
-        this.$emit('on-selected-template-click', item)
-      },
-      onItemClick(item) {
-        this.wasClicked = true
-        this.$emit('item-selected', item)
-      },
-      onSearch(value) {
-        this.inputText = value
-        this.$emit('dropdown-search', value)
-      },
-      clickOutside(event) {
-        if (event.target === this.$el || this.$el.contains(event.target)) {
-          return
-        }
-        this.inputText = ''
-        // 'close: true' is needed in case a box is open and another box is clicked on
-        // so this one will close properly
-        document.removeEventListener('click', this.clickOutside)
-        this.$emit('toggle-dropdown-open', { close: true })
-      },
-      onCustomNameClick() {
-        this.wasClicked = true
-        this.$emit('on-custom-input-name', this.inputText)
-        this.$emit('toggle-dropdown-open', { close: true })
-        this.inputText = ''
-      },
-      onCustomInputChange(event) {
-        if (this.wasClicked) {
-          return
-        }
-        this.$emit('custom-input-change', event)
-      },
-      setDropdownWidth(options) {
-        this.dynamicWidth = []
-
-        options.forEach((item) => {
-          this.optionsDisplay.forEach((header, index) => {
-            let value =
-              header === 'template'
-                ? this.$gettext('No main component template')
-                : item[header]
-            value = value ? value : ''
-
-            // Update dynamicWidth with the maximum value
-            if (
-              !this.dynamicWidth[index] ||
-              value.length > this.dynamicWidth[index]
-            ) {
-              this.dynamicWidth[index] = value.length
-            }
-          })
-        })
-
-        this.dynamicGridWidth = this.dynamicWidth
-          .map((width) => width + 'ch')
-          .join(' ')
-      },
-    },
-  }
-</script>
+<template>
+  <DropdownRow
+    :colspan="colSpan"
+    :disabled="disabled"
+    :is-open="isOpen"
+    @click="toggleOpen"
+  >
+    <ComponentContainer class="table-dropdown" :col-span="colSpan - 1">
+      <ComponentItem
+        v-for="(item, index) in tableItems"
+        :key="index"
+        ref="dropdownItem"
+        :class="{
+          'table-dropdown-item': item.type !== 'input',
+        }"
+        :is-nested="isNested"
+        :show-archived="showArchived"
+      >
+        <NestedContainer :is-nested="isNested">
+          <NestedIcon
+            v-if="
+              isNested &&
+              (item.type === 'input' ||
+                item.type === 'no-template' ||
+                item.type === 'template')
+            "
+          />
+          <TemplateButton
+            v-if="
+              item.type &&
+              item.type === 'template' &&
+              (item.value === '' || item.value === '-')
+            "
+            :key="index + '_button'"
+            :show-archived="showArchived"
+            @click.stop="onTemplateClick(item.row)"
+          >
+            {{ $gettext('Use template...') }}
+          </TemplateButton>
+          <TemplateLink
+            v-else-if="
+              item.type && item.type === 'template' && item.value !== ''
+            "
+            :show-archived="showArchived"
+            @click.stop="onSelectedTemplateClick(item.row)"
+          >
+            <Icon
+              :color="showArchived ? theme.colors.red : theme.colors.brightBlue"
+              name="template_icon_not_clickable"
+              size="14px"
+            />
+            <div>{{ item.value }}</div>
+          </TemplateLink>
+          <NoTemplate
+            v-if="item.type && item.type === 'no-template'"
+            :show-archived="showArchived"
+          >
+            {{ $gettext('No main component template') }}
+          </NoTemplate>
+          <InputContainer
+            v-if="item.type === 'input'"
+            @click.stop="onInputClick()"
+          >
+            <TextContainer
+              v-if="customInputDisabled"
+              class="input-placeholder"
+              :show-archived="showArchived"
+            >
+              <span> {{ item.value }}</span>
+            </TextContainer>
+            <InputText
+              v-else
+              class="inputField"
+              :disabled="customInputDisabled"
+              :font-color="showArchived ? theme.colors.red : 'black'"
+              :min-width="item.value.length + 'ch'"
+              :no-border="true"
+              :value="item.value"
+              @input-change="onCustomInputChange($event)"
+            />
+          </InputContainer>
+          <TextContainer
+            v-else-if="
+              item.type !== 'input' &&
+              item.type !== 'no-template' &&
+              item.type !== 'template'
+            "
+            :show-archived="showArchived"
+          >
+            <span> {{ item.value }}</span>
+          </TextContainer>
+        </NestedContainer>
+      </ComponentItem>
+      <ArrowContainer class="arrow-container" :is-disabled="disabled">
+        <ArrowWrapper :show-archived="showArchived">
+          <InfoWrapper v-if="showArchived">
+            <InfoText
+              icon-color="red"
+              :text="
+                $gettext(`Component has been archived and shouldn't be used`)
+              "
+            />
+          </InfoWrapper>
+          <ArrowDown
+            v-if="!isOpen"
+            class="arrow-dropdown"
+            @click.stop="toggleOpen"
+          />
+          <ArrowUp v-else @click.stop="toggleOpen" />
+        </ArrowWrapper>
+        <OptionsContainer v-if="isOpen" ref="optionsContainer">
+          <OptionsWrapper @click.prevent.stop>
+            <SearchContainer @click.prevent.stop>
+              <SearchInput
+                ref="searchInput"
+                :placeholder="$gettext('Keyword') + '...'"
+                :value="inputText"
+                @click.prevent.stop
+                @on-change="onSearch($event)"
+              />
+            </SearchContainer>
+            <Spinner v-if="optionsLoading" />
+            <EmptyText v-else-if="!optionsLoading && !optionItems.length">
+              {{ emptyText ? emptyText : $gettext('No components found.') }}
+            </EmptyText>
+            <OptionsItem
+              v-for="(item, index) in optionItems"
+              v-else
+              :key="index"
+              :col-span="colSpan - 1"
+              :tabindex="0"
+              :width="dynamicGridWidth"
+              @click="onItemClick(item)"
+              @keyup.enter="onItemClick(item)"
+            >
+              <template v-for="(option, idx) in optionsDisplay" :key="idx">
+                <span v-if="option !== 'template'">
+                  {{ !!item[option] ? item[option] : '-' }}
+                </span>
+                <TemplateButton
+                  v-else-if="option === 'template' && item.has_template"
+                  @click.stop="onTemplateClick(item)"
+                >
+                  {{ $gettext('Use template...') }}
+                </TemplateButton>
+                <NoTemplate
+                  v-else-if="option === 'template' && !item.has_template"
+                >
+                  {{ $gettext('No main component template') }}
+                </NoTemplate>
+              </template>
+            </OptionsItem>
+          </OptionsWrapper>
+          <CustomContainer
+            v-if="inputText.length && allowFreeInputs"
+            @click="onCustomNameClick()"
+          >
+            <CustomName>{{ getCustomName }}</CustomName>
+            <CustomSubtext>
+              ({{ $gettext('custom_component') }})
+            </CustomSubtext>
+          </CustomContainer>
+        </OptionsContainer>
+      </ArrowContainer>
+    </ComponentContainer>
+  </DropdownRow>
+</template>
+
+<script>
+  // import TableDropdown from "@eturnity/eturnity_reusable_components/src/components/tableDropdown"
+  // To use:
+  // <table-dropdown
+  //   :colSpan="2"
+  //   :tableItems="getDropdownValues(row)"
+  //   :showArchived="
+  //     row.selectedValue
+  //       ? row.selectedValue.status_active === false
+  //       : row.status_active === false
+  //   "
+  //   @toggle-dropdown-open="toggleDropdownOpen(row.id, $event)"
+  //   @dropdown-search="onDropdownSearch($event)"
+  //   @item-selected="onItemSelected({ item: $event, index })"
+  //   :isOpen="isDropdownOpen(row)"
+  //   :optionItems="groupComponents" // list of options
+  //   :optionsLoading="dropdownOptionsLoading"
+  //   :optionsDisplay="['display_name', 'company_item_number']" // Array. what should be displayed
+  //   :disabled="true"
+  // />
+  import styled from 'vue3-styled-components'
+  import Spinner from '../spinner'
+  import SearchInput from '../inputs/searchInput'
+  import InputText from '../inputs/inputText'
+  import CollapseArrowIcon from '../../assets/icons/collapse_arrow_icon.svg'
+  import SubpositionMarkerIcon from '../../assets/icons/subposition_marker.svg'
+  import fileIconPng from '../../assets/icons/file_icon.png'
+  import Icon from '../icon'
+  import theme from '@/assets/theme.js'
+  import InfoText from '../infoText'
+
+  const rowAttrs = { disabled: Boolean, isOpen: Boolean }
+  const DropdownRow = styled('div', rowAttrs)`
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+    display: contents;
+
+    input {
+      cursor: ${(props) => (!props.isOpen ? 'pointer !important' : 'inherit')};
+    }
+
+    .input-placeholder {
+      height: 25px;
+      padding-left: 12px;
+    }
+  `
+
+  const ItemAttrs = { isNested: Boolean, showArchived: Boolean }
+  const ComponentItem = styled('td', ItemAttrs)`
+    padding-left: ${(props) => (props.isNested ? '14px !important' : '0')};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-right: 0 !important;
+    color: ${(props) =>
+      props.showArchived ? props.theme.colors.red : 'inherit'};
+
+    &.table-dropdown-item {
+      background-clip: content-box;
+      padding: 8px 0 7px 0 !important;
+      vertical-align: middle;
+
+      @media not all and (min-resolution: 0.001dpcm) {
+        @supports (-webkit-appearance: none) {
+          /* Safari Only CSS here */
+          padding: 8px 0 10px 0 !important;
+        }
+      }
+
+      span {
+        padding-left: 15px;
+      }
+    }
+  `
+
+  const containerAttrs = { colSpan: Number, width: String }
+  const ComponentContainer = styled('div', containerAttrs)`
+    display: contents;
+    align-items: center;
+    background-color: ${(props) => props.theme.colors.white};
+    border-radius: 4px;
+    padding: 5px 4px;
+  `
+
+  const ArrowDown = styled(CollapseArrowIcon)`
+    width: 8px;
+    transition: transform 150ms ease;
+  `
+
+  const ArrowUp = styled.img`
+    width: 8px;
+    transform: rotate(180deg);
+    transition: transform 150ms ease;
+  `
+
+  const ArrowAttrs = { isDisabled: Boolean }
+  const ArrowContainer = styled('td', ArrowAttrs)`
+    border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
+    background-clip: content-box;
+    padding: 8px 0 7px 0 !important;
+    border-radius: 0 4px 4px 0;
+    cursor: ${(props) =>
+      props.isDisabled ? 'not-allowed !important' : 'auto'};
+
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) {
+        /* Safari Only CSS here */
+        padding: 8px 0 10px 0 !important;
+      }
+    }
+
+    .arrow-dropdown {
+      vertical-align: middle;
+      margin-left: 11px;
+    }
+  `
+
+  const arrowAttrs = { showArchived: Boolean }
+  const ArrowWrapper = styled('div', arrowAttrs)`
+    display: grid;
+    grid-template-columns: ${(props) =>
+      props.showArchived ? 'auto auto' : 'auto'};
+    align-items: center;
+    justify-items: center;
+    height: 100%;
+  `
+
+  const optionsAttrs = { top: Number, left: Number }
+  const OptionsContainer = styled('div', optionsAttrs)`
+    position: absolute;
+    margin-top: 10px;
+    display: grid;
+    grid-template-rows: 1fr auto;
+    left: 20px;
+    width: auto;
+    max-height: 360px;
+    min-height: 200px;
+    overflow: auto;
+    border: 1px solid ${(props) => props.theme.colors.grey3};
+    z-index: 9999;
+    background: ${(props) => props.theme.colors.white};
+    border-radius: 4px;
+  `
+
+  const EmptyText = styled.div`
+    align-self: center;
+    justify-self: center;
+    height: 100px;
+    display: grid;
+    align-content: center;
+  `
+
+  const OptionsWrapper = styled.div`
+    display: grid;
+    position: relative;
+    padding: 12px;
+    grid-gap: 4px;
+    font-size: 13px;
+    grid-template-rows: max-content;
+    height: max-content;
+    min-width: 400px; // kind of an arbitrary number until we know all use cases
+  `
+
+  const OptionsItem = styled('div', containerAttrs)`
+    display: grid;
+    grid-template-columns: ${(props) => props.width};
+    grid-gap: 30px;
+    padding: 10px;
+    height: max-content;
+    justify-items: flex-start;
+
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &:hover {
+      background-color: ${(props) => props.theme.colors.grey5};
+    }
+  `
+
+  const SearchContainer = styled.div`
+    position: sticky;
+    top: 0;
+    padding-top: 6px;
+    background: ${(props) => props.theme.colors.white};
+    height: 40px;
+  `
+
+  const templateAttrs = { showArchived: Boolean }
+  const TemplateButton = styled('div', templateAttrs)`
+    cursor: pointer;
+    background-color: #263238;
+    color: ${(props) =>
+      props.showArchived ? props.theme.colors.red : props.theme.colors.white};
+    padding: 4px 10px;
+    display: inline-block;
+    border-radius: 4px;
+    text-align: center;
+    margin-left: 15px;
+  `
+
+  const NoTemplate = styled('div', templateAttrs)`
+    color: ${(props) =>
+      props.showArchived ? props.theme.colors.red : props.theme.colors.gray1};
+    font-style: italic;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-left: 15px;
+  `
+
+  const TemplateLink = styled('div', templateAttrs)`
+    color: ${(props) =>
+      props.showArchived
+        ? props.theme.colors.red
+        : props.theme.colors.brightBlue};
+    cursor: pointer;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-gap: 12px;
+    padding-left: 15px;
+  `
+
+  const InputContainer = styled.div`
+    .inputField input {
+      border-radius: 4px 0 0 4px;
+    }
+  `
+
+  const CustomContainer = styled.div`
+    display: grid;
+    grid-template-columns: auto 1fr;
+    padding: 10px 22px;
+    border-top: 1px solid ${(props) => props.theme.colors.grey3};
+    height: 37px;
+
+    &:hover {
+      background-color: ${(props) => props.theme.colors.grey5};
+    }
+  `
+
+  const CustomName = styled.div`
+    justify-self: flex-start;
+  `
+
+  const CustomSubtext = styled.div`
+    justify-self: flex-end;
+    color: ${(props) => props.theme.colors.grey3};
+  `
+
+  const TextContainer = styled('div', templateAttrs)`
+    height: 100%;
+    display: grid;
+    align-items: center;
+    color: ${(props) =>
+      props.showArchived ? props.theme.colors.red : 'inherit'};
+  `
+
+  const NestedIcon = styled(SubpositionMarkerIcon)`
+    height: 10px;
+    width: 6px;
+  `
+
+  const NestedAttrs = { isNested: Boolean }
+  const NestedContainer = styled('div', NestedAttrs)`
+    display: grid;
+    grid-gap: 5px;
+    grid-template-columns: ${(props) => (props.isNested ? 'auto 1fr' : '1fr')};
+    align-items: center;
+  `
+
+  const InfoWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-left: 8px;
+  `
+
+  export default {
+    name: 'TableDropdown',
+    components: {
+      DropdownRow,
+      ComponentItem,
+      ComponentContainer,
+      ArrowDown,
+      ArrowUp,
+      OptionsContainer,
+      Spinner,
+      EmptyText,
+      SearchInput,
+      ArrowWrapper,
+      OptionsWrapper,
+      OptionsItem,
+      SearchContainer,
+      TemplateButton,
+      NoTemplate,
+      TemplateLink,
+      InputText,
+      InputContainer,
+      CustomContainer,
+      CustomName,
+      CustomSubtext,
+      ArrowContainer,
+      TextContainer,
+      NestedIcon,
+      NestedContainer,
+      Icon,
+      InfoText,
+      InfoWrapper,
+    },
+    props: {
+      colSpan: {
+        required: false,
+        default: 1,
+      },
+      customInputDisabled: {
+        // whether the input field should be disabled
+        required: false,
+        default: true,
+      },
+      allowFreeInputs: {
+        // whether we allow the user to select a custom input
+        required: false,
+        default: false,
+      },
+      tableItems: {
+        required: true,
+      },
+      showArchived: {
+        required: false,
+        default: false,
+      },
+      isOpen: {
+        required: true,
+        default: false,
+      },
+      optionsLoading: {
+        required: false,
+        default: false,
+      },
+      emptyText: {
+        required: false,
+        default: null,
+      },
+      optionItems: {
+        required: true,
+      },
+      optionsDisplay: {
+        required: true,
+        default: [], // should be like ['display_name', 'company_item_number', 'description']
+      },
+      disabled: {
+        required: false,
+        default: false,
+      },
+      isNested: {
+        required: false,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        inputText: '',
+        wasClicked: false, // prevents custom-name from being triggered on the <input-text />
+        dynamicWidth: [], // for numbers
+        dynamicGridWidth: [], // for grid values
+        fileIcon: fileIconPng,
+      }
+    },
+    computed: {
+      getCustomName() {
+        return this.inputText
+      },
+      theme() {
+        return theme
+      },
+    },
+    watch: {
+      isOpen(newVal) {
+        if (newVal) {
+          document.addEventListener('click', this.clickOutside)
+          this.$emit('dropdown-search', '')
+          this.$nextTick(() => {
+            this.$refs.searchInput.$el.children[0].children[0].focus()
+          })
+          this.$nextTick(() => {
+            this.scrollToItem()
+          })
+        }
+      },
+      optionItems: {
+        immediate: true,
+        handler(val) {
+          if (val && val.length) {
+            this.setDropdownWidth(val)
+          }
+        },
+      },
+    },
+    methods: {
+      toggleOpen(event) {
+        if (
+          this.disabled ||
+          (event &&
+            !(event.target === this.$el) &&
+            !this.$el.contains(event.target))
+        ) {
+          return
+        }
+        this.wasClicked = false
+        if (!this.isOpen) {
+          document.addEventListener('click', this.clickOutside)
+          this.$emit('dropdown-search', '')
+          this.$nextTick(() => {
+            this.scrollToItem()
+          })
+          this.$emit('toggle-dropdown-open', { close: false })
+          this.$nextTick(() => {
+            this.$refs.searchInput.$el.children[0].children[1].focus()
+          })
+        } else {
+          document.removeEventListener('click', this.clickOutside)
+          this.$emit('toggle-dropdown-open', { close: true })
+          this.inputText = ''
+        }
+      },
+      onInputClick() {
+        if (!this.isOpen) {
+          this.toggleOpen()
+        }
+      },
+      scrollToItem() {
+        if (this.$refs.optionsContainer) {
+          this.$refs.optionsContainer.$el.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
+          })
+        }
+      },
+      onTemplateClick(item) {
+        this.$emit('on-template-click', item)
+      },
+      onSelectedTemplateClick(item) {
+        this.$emit('on-selected-template-click', item)
+      },
+      onItemClick(item) {
+        this.wasClicked = true
+        this.$emit('item-selected', item)
+      },
+      onSearch(value) {
+        this.inputText = value
+        this.$emit('dropdown-search', value)
+      },
+      clickOutside(event) {
+        if (event.target === this.$el || this.$el.contains(event.target)) {
+          return
+        }
+        this.inputText = ''
+        // 'close: true' is needed in case a box is open and another box is clicked on
+        // so this one will close properly
+        document.removeEventListener('click', this.clickOutside)
+        this.$emit('toggle-dropdown-open', { close: true })
+      },
+      onCustomNameClick() {
+        this.wasClicked = true
+        this.$emit('on-custom-input-name', this.inputText)
+        this.$emit('toggle-dropdown-open', { close: true })
+        this.inputText = ''
+      },
+      onCustomInputChange(event) {
+        if (this.wasClicked) {
+          return
+        }
+        this.$emit('custom-input-change', event)
+      },
+      setDropdownWidth(options) {
+        this.dynamicWidth = []
+
+        options.forEach((item) => {
+          this.optionsDisplay.forEach((header, index) => {
+            let value =
+              header === 'template'
+                ? this.$gettext('No main component template')
+                : item[header]
+            value = value ? value : ''
+
+            // Update dynamicWidth with the maximum value
+            if (
+              !this.dynamicWidth[index] ||
+              value.length > this.dynamicWidth[index]
+            ) {
+              this.dynamicWidth[index] = value.length
+            }
+          })
+        })
+
+        this.dynamicGridWidth = this.dynamicWidth
+          .map((width) => width + 'ch')
+          .join(' ')
+      },
+    },
+  }
+</script>