@eturnity/eturnity_reusable_components 8.7.2 → 8.7.3

package/src/components/stringDesign/DropdownMenu/index.vue

@@ -1,983 +1,1009 @@
-<template>
-  <PageContainer>
-    <PageTitleContainer data-id="string_design_expand_collapse_section">
-      <SectionTitleText>{{ $gettext('inverters') }}</SectionTitleText>
-      <ButtonIcon
-        custom-color="black"
-        :icon-name="hasExpandedSection ? 'collapse_all' : 'expand_all'"
-        :text="$gettext(hasExpandedSection ? 'collapse_all' : 'expand_all')"
-        @click="toggleAllSections"
-      />
-    </PageTitleContainer>
-    <SectionContainer
-      v-for="(item, index) in dataListToDisplay"
-      :key="item.inverterId"
-    >
-      <TopContainer>
-        <LeftContainer>
-          <TitleContainer>
-            <IconWrapper
-              v-if="item.type != 'optimizer'"
-              size="32px"
-              @click="toggleSection(item.inverterId)"
-            >
-              <RCIcon
-                v-if="isItemCollapsible(item)"
-                color="white"
-                :name="isExpanded(item.inverterId) ? 'arrow_up' : 'arrow_down'"
-                size="10px"
-              />
-              <IconPlaceholder v-else />
-            </IconWrapper>
-            <TextContainer
-              :style="{ marginLeft: item.type == 'optimizer' ? '32px' : '0' }"
-            >
-              <TitleText :title="item.model">
-                {{
-                  (item.type === 'optimizer' || !hasExpandedSection) &&
-                  item.quantity
-                    ? item.quantity + ' x'
-                    : ''
-                }}
-                {{ item.model }}
-              </TitleText>
-              <TitleSubText>
-                <span>{{ item.brandName }}</span>
-                <template
-                  v-if="itemHasStrings(item) || item.type === 'optimizer'"
-                >
-                  <ContainerValue
-                    v-if="
-                      item.getkWp() > 1 &&
-                      item.type !== 'optimizer' &&
-                      hasExpandedSection
-                    "
-                  >
-                    |
-                    {{
-                      numberToString({
-                        value: item.getkWp(),
-                        numberPrecision: 2,
-                      })
-                    }}
-                    kWp
-                  </ContainerValue>
-                  <ContainerValue
-                    v-else-if="item.type !== 'optimizer' && hasExpandedSection"
-                  >
-                    |
-                    {{
-                      numberToString({
-                        value: 1000 * item.getkWp(),
-                        numberPrecision: 2,
-                        minDecimals: 2,
-                      })
-                    }}
-                    Wp
-                  </ContainerValue>
-                </template>
-              </TitleSubText>
-            </TextContainer>
-          </TitleContainer>
-          <MarkersContainer>
-            <MarkerItem
-              v-if="item.mppts.length && hasExpandedSection"
-              :background-color="isTargetRatioInRange(item) ? 'green' : 'red'"
-              >{{
-                numberToString({
-                  value: 100 * item.getTargetRatio(),
-                  numberPrecision: 0,
-                  minDecimals: 0,
-                })
-              }}%
-            </MarkerItem>
-            <MarkerItem v-if="item.hasTemplate && !item.isLoading">
-              <span
-                :title="
-                  item.companyProductTemplateName
-                    ? item.companyProductTemplateName
-                    : $gettext('no_template_selected')
-                "
-              >
-                {{
-                  item.companyProductTemplateName
-                    ? item.companyProductTemplateName
-                    : $gettext('no_template_selected')
-                }}
-              </span>
-            </MarkerItem>
-            <MarkerItem>
-              <RCIcon color="white" :name="getIconName(item)" size="14px" />
-              <MarkerText :title="getTypeName(item.type)">
-                {{ getTypeName(item.type) }}
-              </MarkerText>
-            </MarkerItem>
-            <MarkerItem
-              v-if="item.type !== 'optimizer' && item.type !== 'storage'"
-              :title="$gettext('AC power is the nominal AC output power.')"
-            >
-              {{
-                numberToString({
-                  value: item.pacKw,
-                  numberPrecision: getNumberPrecision(item.pacKw),
-                  minDecimals: 0,
-                })
-              }}
-              {{ $gettext('kWAC') }}
-            </MarkerItem>
-            <MarkerItem
-              v-if="
-                (!itemHasStrings(item) || !hasExpandedSection) &&
-                item.type !== 'storage'
-              "
-              :title="$gettext('The DC power is the maximum DC input power.')"
-            >
-              {{
-                numberToString({
-                  value: item.inputMaxPowerKw,
-                  numberPrecision: getNumberPrecision(item.inputMaxPowerKw),
-                  minDecimals: 0,
-                })
-              }}
-              {{ $gettext('kWDC') }}
-            </MarkerItem>
-            <MarkerItem
-              v-if="item.type == 'storage'"
-              :title="$gettext('charging_ac_power_kva_marker_title')"
-            >
-              {{
-                numberToString({
-                  value: item.chargingAcPowerKva,
-                  numberPrecision: getNumberPrecision(item.chargingAcPowerKva),
-                  minDecimals: 0,
-                })
-              }}
-              {{ $gettext('kWAC') }}
-            </MarkerItem>
-          </MarkersContainer>
-          <IconsContainer>
-            <IconWrapper
-              v-if="nonOptimizerInverterCount > 1 || item.type === 'optimizer'"
-              @click="
-                !item.isLoading && hasGroupedInverters(item)
-                  ? $emit('on-delete-grouped', item)
-                  : $emit('on-delete', item)
-              "
-            >
-              <RCIcon
-                :color="item.isLoading ? 'grey' : 'red'"
-                :cursor="item.isLoading ? 'not-allowed' : 'pointer'"
-                :is-disabled="item.isLoading"
-                name="delete"
-                size="14px"
-              />
-            </IconWrapper>
-            <IconWrapper @click="!item.isLoading && $emit('on-edit', item)">
-              <RCIcon
-                :color="item.isLoading ? 'grey' : 'white'"
-                :cursor="item.isLoading ? 'not-allowed' : 'pointer'"
-                :is-disabled="item.isLoading"
-                name="edit_button"
-                size="14px"
-              />
-            </IconWrapper>
-            <IconWrapper @click="$emit('on-datasheet', item)">
-              <RCIcon
-                color="white"
-                cursor="pointer"
-                name="document"
-                size="14px"
-              />
-            </IconWrapper>
-          </IconsContainer>
-        </LeftContainer>
-        <SortingContainer v-if="dataListToDisplay.length > 1">
-          <SortingIconWrapper
-            :data-test-id="'move_up_' + index"
-            :is-disabled="index === 0"
-            @click="index > 0 && handleMoveClick('up', index, item)"
-          >
-            <RCIcon
-              :color="index === 0 ? 'grey6' : 'grey3'"
-              :cursor="index === 0 ? 'not-allowed' : 'pointer'"
-              name="move_up"
-              size="14px"
-            />
-          </SortingIconWrapper>
-          <SortingIconWrapper
-            :data-test-id="'move_down_' + index"
-            :is-disabled="index === dataListToDisplay.length - 1"
-            @click="
-              index < dataListToDisplay.length - 1 &&
-                handleMoveClick('down', index, item)
-            "
-          >
-            <RCIcon
-              :color="
-                index === dataListToDisplay.length - 1 ? 'grey6' : 'grey3'
-              "
-              :cursor="
-                index === dataListToDisplay.length - 1
-                  ? 'not-allowed'
-                  : 'pointer'
-              "
-              :is-disabled="index === dataListToDisplay.length - 1"
-              name="move_down"
-              size="14px"
-            />
-          </SortingIconWrapper>
-        </SortingContainer>
-      </TopContainer>
-      <BoxContainer
-        v-for="mppt in item.mppts"
-        v-show="isExpanded(item.inverterId)"
-        :key="mppt.mpptId"
-      >
-        <BoxTitleWrapper>
-          <IconWrapper
-            v-if="itemHasStrings(item)"
-            margin-left="4px"
-            size="8px"
-            @click="toggleMppt(mppt.mpptId)"
-          >
-            <RCIcon
-              color="white"
-              cursor="pointer"
-              :name="isMpptExpanded(mppt.mpptId) ? 'arrow_up' : 'arrow_down'"
-              size="10px"
-            />
-          </IconWrapper>
-          <BoxTitleText>{{ mppt.name }}</BoxTitleText>
-          <BoxIconsContainer>
-            <BoxIconWrapper>
-              <RCIcon
-                color="white"
-                cursor="pointer"
-                name="string_design"
-                size="11px"
-              />
-              <div>
-                {{ mppt.strings.length }}/{{ mppt.getNumberOfTerminals() }}
-              </div>
-            </BoxIconWrapper>
-            <BoxIconWrapper>
-              <RCIcon
-                color="white"
-                cursor="pointer"
-                name="panels_tool"
-                size="11px"
-              />
-              <div>{{ getNumberOfMpptModules(mppt.strings) }}</div>
-            </BoxIconWrapper>
-          </BoxIconsContainer>
-        </BoxTitleWrapper>
-
-        <div v-show="isMpptExpanded(mppt.mpptId) && itemHasStrings(item)">
-          <StringBox v-for="string in mppt.strings" :key="string.id">
-            <StringColorContainer :background-color="string.color" />
-            <StringContainer>
-              <div>{{ string.name }}</div>
-              <StringIconContainer>
-                <div>{{ string.modules.length }}</div>
-                <RCIcon color="white" name="module" size="14px" />
-              </StringIconContainer>
-            </StringContainer>
-          </StringBox>
-        </div>
-      </BoxContainer>
-      <template v-if="availableMPPTData(item)">
-        <BoxContainer
-          v-for="availableItem in availableMPPTData(item)"
-          v-show="isExpanded(item.inverterId)"
-          :key="availableItem.mpptId"
-        >
-          <BoxTitleWrapper>
-            <IconWrapper
-              v-if="itemHasStrings(item)"
-              margin-left="4px"
-              size="8px"
-              @click="toggleMppt(availableItem.mpptId)"
-            >
-              <RCIcon
-                color="white"
-                cursor="pointer"
-                :name="
-                  isMpptExpanded(availableItem.mpptId)
-                    ? 'arrow_up'
-                    : 'arrow_down'
-                "
-                size="10px"
-              />
-            </IconWrapper>
-            <BoxTitleText>{{ availableItem.name }}</BoxTitleText>
-            <BoxIconsContainer>
-              <BoxIconWrapper>
-                <RCIcon
-                  color="white"
-                  cursor="pointer"
-                  name="string_design"
-                  size="11px"
-                />
-                <div>0/{{ availableItem.numberOfTerminals }}</div>
-              </BoxIconWrapper>
-              <BoxIconWrapper>
-                <RCIcon
-                  color="white"
-                  cursor="pointer"
-                  name="panels_tool"
-                  size="11px"
-                />
-                <div>0</div>
-              </BoxIconWrapper>
-            </BoxIconsContainer>
-          </BoxTitleWrapper>
-          <EmptyStringBox
-            v-show="
-              isMpptExpanded(availableItem.mpptId) && itemHasStrings(item)
-            "
-          />
-        </BoxContainer>
-      </template>
-      <BoxContainer
-        v-if="item.storageSystem && Object.keys(item.storageSystem).length > 0"
-        v-show="isExpanded(item.inverterId)"
-        :key="item.storageSystem.storage_system_id"
-      >
-        <BoxTitleWrapper>
-          <IconWrapper
-            margin-left="4px"
-            size="8px"
-            @click="toggleMppt(item.storageSystem.storage_system_id)"
-          >
-            <RCIcon
-              color="white"
-              cursor="pointer"
-              :name="
-                isMpptExpanded(item.storageSystem.storage_system_id)
-                  ? 'arrow_up'
-                  : 'arrow_down'
-              "
-              size="10px"
-            />
-          </IconWrapper>
-          <BoxTitleText>{{ $gettext('battery') }}</BoxTitleText>
-        </BoxTitleWrapper>
-        <div v-show="isMpptExpanded(item.storageSystem.storage_system_id)">
-          <BatteryBox>
-            <RCIcon color="white" name="battery" size="14px" />
-            <BatteryDetailsContainer>
-              <BatteryType>{{ item.storageSystem.brand_name }}</BatteryType>
-              <BatteryModel>{{ item.storageSystem.model }}</BatteryModel>
-            </BatteryDetailsContainer>
-            <BatteryValue>
-              {{
-                numberToString({
-                  value: item.storageSystem.nominal_capacity_kWh,
-                  numberPrecision: 2,
-                  minDecimals: 0,
-                })
-              }}
-              kWh
-            </BatteryValue>
-          </BatteryBox>
-        </div>
-      </BoxContainer>
-    </SectionContainer>
-    <DividerContainer v-if="batteryData.length" />
-    <UnassignedContainer v-if="batteryData.length">
-      <SectionTitleText>{{ $gettext('battery_information') }}</SectionTitleText>
-      <BatteryBox
-        v-for="battery in batteryData"
-        :key="battery.id"
-        :is-unassigned="true"
-      >
-        <RCIcon color="black" name="battery" size="14px" />
-        <BatteryDetailsContainer>
-          <UnassignedType>{{ battery.brand_name }}</UnassignedType>
-          <UnassignedModel>{{ battery.model }}</UnassignedModel>
-        </BatteryDetailsContainer>
-        <BatteryValue>
-          {{
-            numberToString({
-              value: battery.nominal_capacity_kWh,
-              numberPrecision: 2,
-              minDecimals: 0,
-            })
-          }}
-          kWh
-        </BatteryValue>
-      </BatteryBox>
-    </UnassignedContainer>
-  </PageContainer>
-</template>
-
-<script>
-  // import DropdownMenu from '@eturnity/eturnity_reusable_components/src/components/stringDesign/DropdownMenu'
-  import styled from 'vue3-styled-components'
-  import RCIcon from '../../icon'
-  import ButtonIcon from '../../buttons/buttonIcon'
-  import { numberToString } from '../../../helpers/numberConverter'
-
-  const PageContainer = styled.div`
-    position: relative;
-  `
-
-  const SectionContainer = styled.div`
-    &:not(:last-child) {
-      margin-bottom: 8px;
-    }
-    background-color: ${(props) => props.theme.colors.black};
-    padding: 8px;
-    border-radius: 4px;
-    color: ${(props) => props.theme.colors.white};
-  `
-
-  const TitleContainer = styled.div`
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  `
-
-  const IconsContainer = styled.div`
-    display: flex;
-    align-items: center;
-    margin-left: 32px;
-    margin-top: 4px;
-  `
-
-  const TextContainer = styled.div`
-    display: grid;
-  `
-
-  const TitleText = styled.div`
-    font-size: 14px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `
-
-  const TitleSubText = styled.div`
-    font-size: 12px;
-    display: flex;
-    gap: 4px;
-  `
-
-  const MarkersContainer = styled.div`
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin: 4px 0 2px 32px;
-    align-items: end;
-  `
-
-  const MarkerAttrs = { backgroundColor: String }
-  const MarkerItem = styled('div', MarkerAttrs)`
-    display: flex;
-    gap: 5px;
-    align-items: center;
-    padding: 2px 7px;
-    border-radius: 4px;
-    background-color: ${(props) =>
-      props.backgroundColor
-        ? props.theme.colors[props.backgroundColor]
-        : props.theme.colors.grey6};
-    font-size: 11px;
-    color: ${(props) => props.theme.colors.white};
-    & > span {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      max-width: 11ch;
-    }
-  `
-
-  const MarkerText = styled.div`
-    max-width: 11ch;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `
-
-  const ContainerValue = styled.div`
-    font-size: 12px;
-  `
-
-  const IconAttrs = {
-    size: { type: String, default: '32px' },
-    marginLeft: String,
-  }
-  const IconWrapper = styled('div', IconAttrs)`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-    cursor: pointer;
-    width: ${(props) => props.size};
-    height: ${(props) => props.size};
-    margin-left: ${(props) => props.marginLeft};
-    &:hover {
-      background: ${(props) =>
-        props.marginLeft ? 'transparent' : 'rgba(255, 255, 255, 0.1)'};
-    }
-
-    &:active {
-      background: rgba(255, 255, 255, 0.2);
-    }
-  `
-
-  const BoxContainer = styled.div`
-    border-radius: 4px;
-    background: ${(props) => props.theme.colors.grey6};
-    padding: 8px;
-    margin-top: 8px;
-    margin-left: 30px;
-  `
-
-  const BoxTitleWrapper = styled.div`
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  `
-
-  const BoxTitleText = styled.div`
-    font-size: 13px;
-  `
-
-  const BoxIconsContainer = styled.div`
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    margin-left: auto;
-    font-size: 11px;
-  `
-
-  const BoxIconWrapper = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    padding: 4px;
-  `
-
-  const StringBox = styled.div`
-    display: grid;
-    grid-template-columns: auto 1fr;
-    margin-top: 8px;
-    border-radius: 4px;
-    border: 1px solid ${(props) => props.theme.colors.grey3};
-  `
-
-  const StringContainer = styled.div`
-    display: flex;
-    justify-content: space-between;
-    gap: 8px;
-    padding: 8px;
-    font-size: 11px;
-  `
-
-  const StringColorAttrs = { backgroundColor: String }
-  const StringColorContainer = styled('div', StringColorAttrs)`
-    background-color: ${(props) => props.backgroundColor};
-    width: 22px;
-    min-height: 100%;
-    border-top-left-radius: 2px;
-    border-bottom-left-radius: 2px;
-  `
-
-  const StringIconContainer = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 2px;
-    padding: 0 4px;
-  `
-
-  const PageTitleContainer = styled.div`
-    position: sticky;
-    top: 0;
-    background-color: ${(props) => props.theme.colors.black};
-    z-index: 99;
-    padding: 8px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 8px;
-  `
-
-  const SectionTitleText = styled.div`
-    font-size: 14px;
-    font-weight: 700;
-    color: ${(props) => props.theme.colors.white};
-  `
-
-  const BatteryBoxAttrs = { isUnassigned: Boolean }
-  const BatteryBox = styled('div', BatteryBoxAttrs)`
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    border: 1px solid ${(props) => props.theme.colors.white};
-    border-radius: 4px;
-    padding: 8px;
-    margin-top: 8px;
-    background-color: ${(props) =>
-      props.isUnassigned ? props.theme.colors.grey2 : ''};
-  `
-
-  const BatteryDetailsContainer = styled.div`
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  `
-
-  const BatteryType = styled.div`
-    font-size: 11px;
-  `
-
-  const BatteryModel = styled.div`
-    font-size: 10px;
-  `
-
-  const BatteryValue = styled.div`
-    font-size: 10px;
-    align-self: flex-end;
-    margin-left: auto;
-  `
-  const TopContainer = styled.div`
-    display: flex;
-    justify-content: space-between;
-  `
-
-  const LeftContainer = styled.div``
-
-  const SortingContainer = styled.div`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  `
-
-  const SortingIconWrapperAttrs = { isDisabled: Boolean }
-  const SortingIconWrapper = styled('div', SortingIconWrapperAttrs)`
-    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
-    width: 30px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:hover {
-      background-color: ${(props) =>
-        props.isDisabled ? 'transparent' : 'rgba(255, 255, 255, 0.1)'};
-      border-radius: 4px;
-    }
-  `
-
-  const UnassignedContainer = styled.div`
-    margin-top: 8px;
-  `
-
-  const DividerContainer = styled.div`
-    height: 0.5px;
-    width: 100%;
-    background-color: ${(props) => props.theme.colors.grey4};
-    opacity: 0.6;
-  `
-
-  const UnassignedType = styled.div`
-    font-size: 12px;
-    line-height: 150%;
-  `
-
-  const UnassignedModel = styled.div`
-    font-size: 10px;
-    line-height: 150%;
-  `
-
-  const IconPlaceholder = styled.div`
-    width: 32px;
-  `
-
-  const EmptyStringBox = styled.div`
-    border: 0.8px dashed ${(props) => props.theme.colors.black};
-    border-radius: 4px;
-    padding: 8px 8px 8px 0;
-    height: 32px;
-    width: 233px;
-    margin-top: 8px;
-  `
-
-  export default {
-    name: 'DropdownMenu',
-    components: {
-      SectionContainer,
-      TitleContainer,
-      IconsContainer,
-      TextContainer,
-      TitleText,
-      TitleSubText,
-      RCIcon,
-      MarkersContainer,
-      MarkerItem,
-      ContainerValue,
-      IconWrapper,
-      BoxContainer,
-      BoxTitleWrapper,
-      BoxTitleText,
-      BoxIconsContainer,
-      BoxIconWrapper,
-      StringBox,
-      StringContainer,
-      StringColorContainer,
-      StringIconContainer,
-      PageTitleContainer,
-      SectionTitleText,
-      ButtonIcon,
-      PageContainer,
-      BatteryBox,
-      BatteryDetailsContainer,
-      BatteryType,
-      BatteryModel,
-      BatteryValue,
-      TopContainer,
-      LeftContainer,
-      SortingContainer,
-      SortingIconWrapper,
-      UnassignedContainer,
-      DividerContainer,
-      UnassignedType,
-      UnassignedModel,
-      IconPlaceholder,
-      EmptyStringBox,
-      MarkerText,
-    },
-    props: {
-      dataList: {
-        required: true,
-        type: Array,
-      },
-      batteryData: {
-        required: true,
-        type: Array,
-      },
-      inverterParameters: {
-        required: true,
-        type: Object,
-      },
-      isPvAndBatteryActive: {
-        required: false,
-        type: Boolean,
-      },
-    },
-    emits: ['on-edit', 'on-move', 'on-delete', 'on-delete-grouped'],
-    data() {
-      return {
-        expandedInverters: [],
-        expandedMppts: [],
-        numberToString,
-      }
-    },
-    computed: {
-      dataListToDisplay() {
-        let data = this.hasExpandedSection
-          ? this.dataList
-          : this.compressedDataList
-        return data.sort((a, b) => a.lineNr - b.lineNr)
-      },
-      hasExpandedSection() {
-        return this.expandedInverters.length > 0
-      },
-      hasStringsOrStorage() {
-        return this.dataList.some((item) => {
-          return (
-            item.mppts.some((mppt) => mppt.strings.length > 0) ||
-            (item.storageSystem && Object.keys(item.storageSystem).length > 0)
-          )
-        })
-      },
-      nonOptimizerInverterCount() {
-        return this.dataList.filter((item) => item.type !== 'optimizer').length
-      },
-      compressedDataList() {
-        return this.dataList.reduce((acc, item) => {
-          if (item.type == 'optimizer') {
-            acc.push(item)
-            return acc
-          }
-          const existingInverter = acc.find((inverter) => {
-            return inverter.componentId == item.componentId
-          })
-          if (!existingInverter) {
-            acc.push(item)
-            item.quantity = 1
-          } else {
-            existingInverter.quantity++
-          }
-          return acc
-        }, [])
-      },
-    },
-    created() {
-      // Expand all items on creation
-      if (this.hasStringsOrStorage) {
-        this.expandedInverters = this.dataList.map((item) => item.inverterId)
-        this.expandedMppts = this.dataList.flatMap((item) => {
-          const availableMppts = this.availableMPPTData(item)
-          return [
-            ...item.mppts.map((mppt) => mppt.mpptId),
-            ...(item.storageSystem
-              ? [item.storageSystem.storage_system_id]
-              : []),
-            ...(availableMppts?.map((mppt) => mppt.mpptId) || []),
-          ]
-        })
-      }
-    },
-    methods: {
-      hasGroupedInverters(item) {
-        return item.type != 'optimizer' && item.quantity > 1
-      },
-      isTargetRatioInRange(inverter) {
-        const currentTargetRatio = inverter.getTargetRatio()
-        return (
-          this.inverterParameters.target_power_ratio - 20 <=
-            100 * currentTargetRatio &&
-          this.inverterParameters.target_power_ratio + 20 >=
-            100 * currentTargetRatio
-        )
-      },
-      getNumberPrecision(value) {
-        if (typeof value === 'string') {
-          value = Number(value)
-        }
-        if (value < 10) {
-          return 2
-        } else if (value >= 10 && value < 100) {
-          return 1
-        } else {
-          return 0
-        }
-      },
-      getNumberOfMpptModules(strings) {
-        return strings.reduce((acc, curr) => acc + curr.modules.length, 0)
-      },
-      availableMPPTData(item) {
-        if (item.type === 'optimizer' || item.type === 'storage') {
-          return []
-        }
-        const existingTrackerNumbers = item.mppts.map(
-          (mppt) => mppt.trackerNumber
-        )
-        const filteredAvailableMPPTs = item.availableMPPTs.filter(
-          (mppt) => !existingTrackerNumbers.includes(mppt.tracker_number)
-        )
-
-        let mpptData = []
-        filteredAvailableMPPTs.forEach((mppt) => {
-          mpptData.push({
-            mpptId:
-              'available_mppt_' +
-              item.companyComponentLibraryId +
-              '_' +
-              mppt.tracker_number,
-            numberOfTerminals: mppt.number_of_terminals,
-            name:
-              'MPPT ' +
-              (item.mppts.length + filteredAvailableMPPTs.indexOf(mppt) + 1),
-          })
-        })
-        return mpptData
-      },
-      isExpanded(id) {
-        return this.expandedInverters.includes(id)
-      },
-      isMpptExpanded(id) {
-        return this.expandedMppts.includes(id)
-      },
-      toggleSection(id) {
-        const index = this.expandedInverters.indexOf(id)
-        if (index === -1) {
-          this.expandedInverters.push(id)
-        } else {
-          this.expandedInverters.splice(index, 1)
-        }
-      },
-      toggleMppt(id) {
-        const index = this.expandedMppts.indexOf(id)
-        if (index === -1) {
-          this.expandedMppts.push(id)
-        } else {
-          this.expandedMppts.splice(index, 1)
-        }
-      },
-      toggleAllSections() {
-        if (this.hasExpandedSection) {
-          this.expandedInverters = []
-          this.expandedMppts = []
-        } else {
-          this.expandedInverters = this.dataList.map((item) => item.inverterId)
-          this.expandedMppts = this.dataList.flatMap((item) => {
-            const hasStrings = !!item.getStrings().length
-            return [
-              ...(hasStrings ? item.mppts.map((mppt) => mppt.mpptId) : []),
-              ...(item.storageSystem
-                ? [item.storageSystem.storage_system_id]
-                : []),
-            ]
-          })
-        }
-      },
-      isItemCollapsible(item) {
-        return (
-          item.mppts.some((mppt) => mppt.strings.length > 0) ||
-          (item.storageSystem && Object.keys(item.storageSystem).length > 0) ||
-          item.availableMPPTs.length
-        )
-      },
-      itemHasStrings(item) {
-        return item.mppts.some((mppt) => mppt.strings.length > 0)
-      },
-      getTypeName(type) {
-        const value = type.toLowerCase()
-        switch (value) {
-          case 'pv':
-            return this.$gettext('PV')
-          case 'pv_storage':
-            return this.$gettext('hybrid')
-          case 'storage':
-            return this.$gettext('battery')
-          case 'optimizer':
-            return this.$gettext('inverter_type_optimizer')
-          default:
-            return this.$gettext('PV')
-        }
-      },
-      getIconName(item) {
-        const value =
-          item.type === 'pv_storage'
-            ? item.iconName.technology_choice
-            : item.type
-        switch (value) {
-          case 'photovoltaics':
-            return 'pv'
-          case 'pv':
-            return 'pv'
-          case 'storage':
-            return 'battery'
-          case 'battery':
-            return 'battery'
-          case 'optimizer':
-            return 'optimizer'
-          default:
-            return 'pv'
-        }
-      },
-      handleMoveClick(direction, index, item) {
-        this.$emit('on-move', {
-          direction: direction,
-          index: index,
-          item: item,
-          isExpanded: this.hasExpandedSection,
-        })
-      },
-    },
-  }
-</script>
+<template>
+  <PageContainer>
+    <PageTitleContainer data-id="string_design_expand_collapse_section">
+      <SectionTitleText>{{ $gettext('inverters') }}</SectionTitleText>
+      <ButtonIcon
+        custom-color="black"
+        :icon-name="hasExpandedSection ? 'collapse_all' : 'expand_all'"
+        :text="$gettext(hasExpandedSection ? 'collapse_all' : 'expand_all')"
+        @click="toggleAllSections"
+      />
+    </PageTitleContainer>
+    <SectionContainer
+      v-for="(item, index) in dataListToDisplay"
+      :key="item.inverterId"
+    >
+      <TopContainer>
+        <LeftContainer>
+          <TitleContainer>
+            <IconWrapper
+              v-if="item.type != 'optimizer'"
+              size="32px"
+              @click="toggleSection(item.inverterId)"
+            >
+              <RCIcon
+                v-if="isItemCollapsible(item)"
+                color="white"
+                :name="isExpanded(item.inverterId) ? 'arrow_up' : 'arrow_down'"
+                size="10px"
+              />
+              <IconPlaceholder v-else />
+            </IconWrapper>
+            <TextContainer
+              :is-archived="
+                item.statusActive === false && !!item.companyComponentLibraryId
+              "
+              :style="{ marginLeft: item.type == 'optimizer' ? '32px' : '0' }"
+            >
+              <TitleText :title="item.model">
+                {{
+                  (item.type === 'optimizer' || !hasExpandedSection) &&
+                  item.quantity
+                    ? item.quantity + ' x'
+                    : ''
+                }}
+                {{ item.model }}
+                <InfoTextWrapper>
+                  <RCInfoText
+                    v-if="
+                      item.statusActive === false &&
+                      item.companyComponentLibraryId
+                    "
+                    button-type="error"
+                    :text="
+                      $gettext(
+                        `Component has been archived and shouldn't be used`
+                      )
+                    "
+                  />
+                </InfoTextWrapper>
+              </TitleText>
+              <TitleSubText>
+                <span>{{ item.brandName }}</span>
+                <template
+                  v-if="itemHasStrings(item) || item.type === 'optimizer'"
+                >
+                  <ContainerValue
+                    v-if="
+                      item.getkWp() > 1 &&
+                      item.type !== 'optimizer' &&
+                      hasExpandedSection
+                    "
+                  >
+                    |
+                    {{
+                      numberToString({
+                        value: item.getkWp(),
+                        numberPrecision: 2,
+                      })
+                    }}
+                    kWp
+                  </ContainerValue>
+                  <ContainerValue
+                    v-else-if="item.type !== 'optimizer' && hasExpandedSection"
+                  >
+                    |
+                    {{
+                      numberToString({
+                        value: 1000 * item.getkWp(),
+                        numberPrecision: 2,
+                        minDecimals: 2,
+                      })
+                    }}
+                    Wp
+                  </ContainerValue>
+                </template>
+              </TitleSubText>
+            </TextContainer>
+          </TitleContainer>
+          <MarkersContainer>
+            <MarkerItem
+              v-if="item.mppts.length && hasExpandedSection"
+              :background-color="isTargetRatioInRange(item) ? 'green' : 'red'"
+              >{{
+                numberToString({
+                  value: 100 * item.getTargetRatio(),
+                  numberPrecision: 0,
+                  minDecimals: 0,
+                })
+              }}%
+            </MarkerItem>
+            <MarkerItem v-if="item.hasTemplate && !item.isLoading">
+              <span
+                :title="
+                  item.companyProductTemplateName
+                    ? item.companyProductTemplateName
+                    : $gettext('no_template_selected')
+                "
+              >
+                {{
+                  item.companyProductTemplateName
+                    ? item.companyProductTemplateName
+                    : $gettext('no_template_selected')
+                }}
+              </span>
+            </MarkerItem>
+            <MarkerItem>
+              <RCIcon color="white" :name="getIconName(item)" size="14px" />
+              <MarkerText :title="getTypeName(item.type)">
+                {{ getTypeName(item.type) }}
+              </MarkerText>
+            </MarkerItem>
+            <MarkerItem
+              v-if="item.type !== 'optimizer' && item.type !== 'storage'"
+              :title="$gettext('AC power is the nominal AC output power.')"
+            >
+              {{
+                numberToString({
+                  value: item.pacKw,
+                  numberPrecision: getNumberPrecision(item.pacKw),
+                  minDecimals: 0,
+                })
+              }}
+              {{ $gettext('kWAC') }}
+            </MarkerItem>
+            <MarkerItem
+              v-if="
+                (!itemHasStrings(item) || !hasExpandedSection) &&
+                item.type !== 'storage'
+              "
+              :title="$gettext('The DC power is the maximum DC input power.')"
+            >
+              {{
+                numberToString({
+                  value: item.inputMaxPowerKw,
+                  numberPrecision: getNumberPrecision(item.inputMaxPowerKw),
+                  minDecimals: 0,
+                })
+              }}
+              {{ $gettext('kWDC') }}
+            </MarkerItem>
+            <MarkerItem
+              v-if="item.type == 'storage'"
+              :title="$gettext('charging_ac_power_kva_marker_title')"
+            >
+              {{
+                numberToString({
+                  value: item.chargingAcPowerKva,
+                  numberPrecision: getNumberPrecision(item.chargingAcPowerKva),
+                  minDecimals: 0,
+                })
+              }}
+              {{ $gettext('kWAC') }}
+            </MarkerItem>
+          </MarkersContainer>
+          <IconsContainer>
+            <IconWrapper
+              v-if="nonOptimizerInverterCount > 1 || item.type === 'optimizer'"
+              @click="
+                !item.isLoading && hasGroupedInverters(item)
+                  ? $emit('on-delete-grouped', item)
+                  : $emit('on-delete', item)
+              "
+            >
+              <RCIcon
+                :color="item.isLoading ? 'grey' : 'red'"
+                :cursor="item.isLoading ? 'not-allowed' : 'pointer'"
+                :is-disabled="item.isLoading"
+                name="delete"
+                size="14px"
+              />
+            </IconWrapper>
+            <IconWrapper @click="!item.isLoading && $emit('on-edit', item)">
+              <RCIcon
+                :color="item.isLoading ? 'grey' : 'white'"
+                :cursor="item.isLoading ? 'not-allowed' : 'pointer'"
+                :is-disabled="item.isLoading"
+                name="edit_button"
+                size="14px"
+              />
+            </IconWrapper>
+            <IconWrapper @click="$emit('on-datasheet', item)">
+              <RCIcon
+                color="white"
+                cursor="pointer"
+                name="document"
+                size="14px"
+              />
+            </IconWrapper>
+          </IconsContainer>
+        </LeftContainer>
+        <SortingContainer v-if="dataListToDisplay.length > 1">
+          <SortingIconWrapper
+            :data-test-id="'move_up_' + index"
+            :is-disabled="index === 0"
+            @click="index > 0 && handleMoveClick('up', index, item)"
+          >
+            <RCIcon
+              :color="index === 0 ? 'grey6' : 'grey3'"
+              :cursor="index === 0 ? 'not-allowed' : 'pointer'"
+              name="move_up"
+              size="14px"
+            />
+          </SortingIconWrapper>
+          <SortingIconWrapper
+            :data-test-id="'move_down_' + index"
+            :is-disabled="index === dataListToDisplay.length - 1"
+            @click="
+              index < dataListToDisplay.length - 1 &&
+                handleMoveClick('down', index, item)
+            "
+          >
+            <RCIcon
+              :color="
+                index === dataListToDisplay.length - 1 ? 'grey6' : 'grey3'
+              "
+              :cursor="
+                index === dataListToDisplay.length - 1
+                  ? 'not-allowed'
+                  : 'pointer'
+              "
+              :is-disabled="index === dataListToDisplay.length - 1"
+              name="move_down"
+              size="14px"
+            />
+          </SortingIconWrapper>
+        </SortingContainer>
+      </TopContainer>
+      <BoxContainer
+        v-for="mppt in item.mppts"
+        v-show="isExpanded(item.inverterId)"
+        :key="mppt.mpptId"
+      >
+        <BoxTitleWrapper>
+          <IconWrapper
+            v-if="itemHasStrings(item)"
+            margin-left="4px"
+            size="8px"
+            @click="toggleMppt(mppt.mpptId)"
+          >
+            <RCIcon
+              color="white"
+              cursor="pointer"
+              :name="isMpptExpanded(mppt.mpptId) ? 'arrow_up' : 'arrow_down'"
+              size="10px"
+            />
+          </IconWrapper>
+          <BoxTitleText>{{ mppt.name }}</BoxTitleText>
+          <BoxIconsContainer>
+            <BoxIconWrapper>
+              <RCIcon
+                color="white"
+                cursor="pointer"
+                name="string_design"
+                size="11px"
+              />
+              <div>
+                {{ mppt.strings.length }}/{{ mppt.getNumberOfTerminals() }}
+              </div>
+            </BoxIconWrapper>
+            <BoxIconWrapper>
+              <RCIcon
+                color="white"
+                cursor="pointer"
+                name="panels_tool"
+                size="11px"
+              />
+              <div>{{ getNumberOfMpptModules(mppt.strings) }}</div>
+            </BoxIconWrapper>
+          </BoxIconsContainer>
+        </BoxTitleWrapper>
+
+        <div v-show="isMpptExpanded(mppt.mpptId) && itemHasStrings(item)">
+          <StringBox v-for="string in mppt.strings" :key="string.id">
+            <StringColorContainer :background-color="string.color" />
+            <StringContainer>
+              <div>{{ string.name }}</div>
+              <StringIconContainer>
+                <div>{{ string.modules.length }}</div>
+                <RCIcon color="white" name="module" size="14px" />
+              </StringIconContainer>
+            </StringContainer>
+          </StringBox>
+        </div>
+      </BoxContainer>
+      <template v-if="availableMPPTData(item)">
+        <BoxContainer
+          v-for="availableItem in availableMPPTData(item)"
+          v-show="isExpanded(item.inverterId)"
+          :key="availableItem.mpptId"
+        >
+          <BoxTitleWrapper>
+            <IconWrapper
+              v-if="itemHasStrings(item)"
+              margin-left="4px"
+              size="8px"
+              @click="toggleMppt(availableItem.mpptId)"
+            >
+              <RCIcon
+                color="white"
+                cursor="pointer"
+                :name="
+                  isMpptExpanded(availableItem.mpptId)
+                    ? 'arrow_up'
+                    : 'arrow_down'
+                "
+                size="10px"
+              />
+            </IconWrapper>
+            <BoxTitleText>{{ availableItem.name }}</BoxTitleText>
+            <BoxIconsContainer>
+              <BoxIconWrapper>
+                <RCIcon
+                  color="white"
+                  cursor="pointer"
+                  name="string_design"
+                  size="11px"
+                />
+                <div>0/{{ availableItem.numberOfTerminals }}</div>
+              </BoxIconWrapper>
+              <BoxIconWrapper>
+                <RCIcon
+                  color="white"
+                  cursor="pointer"
+                  name="panels_tool"
+                  size="11px"
+                />
+                <div>0</div>
+              </BoxIconWrapper>
+            </BoxIconsContainer>
+          </BoxTitleWrapper>
+          <EmptyStringBox
+            v-show="
+              isMpptExpanded(availableItem.mpptId) && itemHasStrings(item)
+            "
+          />
+        </BoxContainer>
+      </template>
+      <BoxContainer
+        v-if="item.storageSystem && Object.keys(item.storageSystem).length > 0"
+        v-show="isExpanded(item.inverterId)"
+        :key="item.storageSystem.storage_system_id"
+      >
+        <BoxTitleWrapper>
+          <IconWrapper
+            margin-left="4px"
+            size="8px"
+            @click="toggleMppt(item.storageSystem.storage_system_id)"
+          >
+            <RCIcon
+              color="white"
+              cursor="pointer"
+              :name="
+                isMpptExpanded(item.storageSystem.storage_system_id)
+                  ? 'arrow_up'
+                  : 'arrow_down'
+              "
+              size="10px"
+            />
+          </IconWrapper>
+          <BoxTitleText>{{ $gettext('battery') }}</BoxTitleText>
+        </BoxTitleWrapper>
+        <div v-show="isMpptExpanded(item.storageSystem.storage_system_id)">
+          <BatteryBox>
+            <RCIcon color="white" name="battery" size="14px" />
+            <BatteryDetailsContainer>
+              <BatteryType>{{ item.storageSystem.brand_name }}</BatteryType>
+              <BatteryModel>{{ item.storageSystem.model }}</BatteryModel>
+            </BatteryDetailsContainer>
+            <BatteryValue>
+              {{
+                numberToString({
+                  value: item.storageSystem.nominal_capacity_kWh,
+                  numberPrecision: 2,
+                  minDecimals: 0,
+                })
+              }}
+              kWh
+            </BatteryValue>
+          </BatteryBox>
+        </div>
+      </BoxContainer>
+    </SectionContainer>
+    <DividerContainer v-if="batteryData.length" />
+    <UnassignedContainer v-if="batteryData.length">
+      <SectionTitleText>{{ $gettext('battery_information') }}</SectionTitleText>
+      <BatteryBox
+        v-for="battery in batteryData"
+        :key="battery.id"
+        :is-unassigned="true"
+      >
+        <RCIcon color="black" name="battery" size="14px" />
+        <BatteryDetailsContainer>
+          <UnassignedType>{{ battery.brand_name }}</UnassignedType>
+          <UnassignedModel>{{ battery.model }}</UnassignedModel>
+        </BatteryDetailsContainer>
+        <BatteryValue>
+          {{
+            numberToString({
+              value: battery.nominal_capacity_kWh,
+              numberPrecision: 2,
+              minDecimals: 0,
+            })
+          }}
+          kWh
+        </BatteryValue>
+      </BatteryBox>
+    </UnassignedContainer>
+  </PageContainer>
+</template>
+
+<script>
+  // import DropdownMenu from '@eturnity/eturnity_reusable_components/src/components/stringDesign/DropdownMenu'
+  import styled from 'vue3-styled-components'
+  import RCIcon from '../../icon'
+  import ButtonIcon from '../../buttons/buttonIcon'
+  import { numberToString } from '../../../helpers/numberConverter'
+  import RCInfoText from '../../infoText'
+  const PageContainer = styled.div`
+    position: relative;
+  `
+
+  const SectionContainer = styled.div`
+    &:not(:last-child) {
+      margin-bottom: 8px;
+    }
+    background-color: ${(props) => props.theme.colors.black};
+    padding: 8px;
+    border-radius: 4px;
+    color: ${(props) => props.theme.colors.white};
+  `
+
+  const TitleContainer = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  `
+
+  const IconsContainer = styled.div`
+    display: flex;
+    align-items: center;
+    margin-left: 32px;
+    margin-top: 4px;
+  `
+  const textContainerAttr = { isArchived: Boolean }
+  const TextContainer = styled('div', textContainerAttr)`
+    display: grid;
+    color: ${(props) => (props.isArchived ? props.theme.colors.red : 'white')};
+  `
+  const InfoTextWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-left: 8px;
+  `
+  const TitleText = styled.div`
+    font-size: 14px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: flex;
+  `
+
+  const TitleSubText = styled.div`
+    font-size: 12px;
+    display: flex;
+    gap: 4px;
+  `
+
+  const MarkersContainer = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 4px 0 2px 32px;
+    align-items: end;
+  `
+
+  const MarkerAttrs = { backgroundColor: String }
+  const MarkerItem = styled('div', MarkerAttrs)`
+    display: flex;
+    gap: 5px;
+    align-items: center;
+    padding: 2px 7px;
+    border-radius: 4px;
+    background-color: ${(props) =>
+      props.backgroundColor
+        ? props.theme.colors[props.backgroundColor]
+        : props.theme.colors.grey6};
+    font-size: 11px;
+    color: ${(props) => props.theme.colors.white};
+    & > span {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      max-width: 11ch;
+    }
+  `
+
+  const MarkerText = styled.div`
+    max-width: 11ch;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `
+
+  const ContainerValue = styled.div`
+    font-size: 12px;
+  `
+
+  const IconAttrs = {
+    size: { type: String, default: '32px' },
+    marginLeft: String,
+  }
+  const IconWrapper = styled('div', IconAttrs)`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    cursor: pointer;
+    width: ${(props) => props.size};
+    height: ${(props) => props.size};
+    margin-left: ${(props) => props.marginLeft};
+    &:hover {
+      background: ${(props) =>
+        props.marginLeft ? 'transparent' : 'rgba(255, 255, 255, 0.1)'};
+    }
+
+    &:active {
+      background: rgba(255, 255, 255, 0.2);
+    }
+  `
+
+  const BoxContainer = styled.div`
+    border-radius: 4px;
+    background: ${(props) => props.theme.colors.grey6};
+    padding: 8px;
+    margin-top: 8px;
+    margin-left: 30px;
+  `
+
+  const BoxTitleWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  `
+
+  const BoxTitleText = styled.div`
+    font-size: 13px;
+  `
+
+  const BoxIconsContainer = styled.div`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    margin-left: auto;
+    font-size: 11px;
+  `
+
+  const BoxIconWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 4px;
+  `
+
+  const StringBox = styled.div`
+    display: grid;
+    grid-template-columns: auto 1fr;
+    margin-top: 8px;
+    border-radius: 4px;
+    border: 1px solid ${(props) => props.theme.colors.grey3};
+  `
+
+  const StringContainer = styled.div`
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 8px;
+    font-size: 11px;
+  `
+
+  const StringColorAttrs = { backgroundColor: String }
+  const StringColorContainer = styled('div', StringColorAttrs)`
+    background-color: ${(props) => props.backgroundColor};
+    width: 22px;
+    min-height: 100%;
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+  `
+
+  const StringIconContainer = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2px;
+    padding: 0 4px;
+  `
+
+  const PageTitleContainer = styled.div`
+    position: sticky;
+    top: 0;
+    background-color: ${(props) => props.theme.colors.black};
+    z-index: 99;
+    padding: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 8px;
+  `
+
+  const SectionTitleText = styled.div`
+    font-size: 14px;
+    font-weight: 700;
+    color: ${(props) => props.theme.colors.white};
+  `
+
+  const BatteryBoxAttrs = { isUnassigned: Boolean }
+  const BatteryBox = styled('div', BatteryBoxAttrs)`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border: 1px solid ${(props) => props.theme.colors.white};
+    border-radius: 4px;
+    padding: 8px;
+    margin-top: 8px;
+    background-color: ${(props) =>
+      props.isUnassigned ? props.theme.colors.grey2 : ''};
+  `
+
+  const BatteryDetailsContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  `
+
+  const BatteryType = styled.div`
+    font-size: 11px;
+  `
+
+  const BatteryModel = styled.div`
+    font-size: 10px;
+  `
+
+  const BatteryValue = styled.div`
+    font-size: 10px;
+    align-self: flex-end;
+    margin-left: auto;
+  `
+  const TopContainer = styled.div`
+    display: flex;
+    justify-content: space-between;
+  `
+
+  const LeftContainer = styled.div``
+
+  const SortingContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  `
+
+  const SortingIconWrapperAttrs = { isDisabled: Boolean }
+  const SortingIconWrapper = styled('div', SortingIconWrapperAttrs)`
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      background-color: ${(props) =>
+        props.isDisabled ? 'transparent' : 'rgba(255, 255, 255, 0.1)'};
+      border-radius: 4px;
+    }
+  `
+
+  const UnassignedContainer = styled.div`
+    margin-top: 8px;
+  `
+
+  const DividerContainer = styled.div`
+    height: 0.5px;
+    width: 100%;
+    background-color: ${(props) => props.theme.colors.grey4};
+    opacity: 0.6;
+  `
+
+  const UnassignedType = styled.div`
+    font-size: 12px;
+    line-height: 150%;
+  `
+
+  const UnassignedModel = styled.div`
+    font-size: 10px;
+    line-height: 150%;
+  `
+
+  const IconPlaceholder = styled.div`
+    width: 32px;
+  `
+
+  const EmptyStringBox = styled.div`
+    border: 0.8px dashed ${(props) => props.theme.colors.black};
+    border-radius: 4px;
+    padding: 8px 8px 8px 0;
+    height: 32px;
+    width: 233px;
+    margin-top: 8px;
+  `
+
+  export default {
+    name: 'DropdownMenu',
+    components: {
+      InfoTextWrapper,
+      RCInfoText,
+      SectionContainer,
+      TitleContainer,
+      IconsContainer,
+      TextContainer,
+      TitleText,
+      TitleSubText,
+      RCIcon,
+      MarkersContainer,
+      MarkerItem,
+      ContainerValue,
+      IconWrapper,
+      BoxContainer,
+      BoxTitleWrapper,
+      BoxTitleText,
+      BoxIconsContainer,
+      BoxIconWrapper,
+      StringBox,
+      StringContainer,
+      StringColorContainer,
+      StringIconContainer,
+      PageTitleContainer,
+      SectionTitleText,
+      ButtonIcon,
+      PageContainer,
+      BatteryBox,
+      BatteryDetailsContainer,
+      BatteryType,
+      BatteryModel,
+      BatteryValue,
+      TopContainer,
+      LeftContainer,
+      SortingContainer,
+      SortingIconWrapper,
+      UnassignedContainer,
+      DividerContainer,
+      UnassignedType,
+      UnassignedModel,
+      IconPlaceholder,
+      EmptyStringBox,
+      MarkerText,
+    },
+    props: {
+      dataList: {
+        required: true,
+        type: Array,
+      },
+      batteryData: {
+        required: true,
+        type: Array,
+      },
+      inverterParameters: {
+        required: true,
+        type: Object,
+      },
+      isPvAndBatteryActive: {
+        required: false,
+        type: Boolean,
+      },
+    },
+    emits: ['on-edit', 'on-move', 'on-delete', 'on-delete-grouped'],
+    data() {
+      return {
+        expandedInverters: [],
+        expandedMppts: [],
+        numberToString,
+      }
+    },
+    computed: {
+      dataListToDisplay() {
+        let data = this.hasExpandedSection
+          ? this.dataList
+          : this.compressedDataList
+        return data.sort((a, b) => a.lineNr - b.lineNr)
+      },
+      hasExpandedSection() {
+        return this.expandedInverters.length > 0
+      },
+      hasStringsOrStorage() {
+        return this.dataList.some((item) => {
+          return (
+            item.mppts.some((mppt) => mppt.strings.length > 0) ||
+            (item.storageSystem && Object.keys(item.storageSystem).length > 0)
+          )
+        })
+      },
+      nonOptimizerInverterCount() {
+        return this.dataList.filter((item) => item.type !== 'optimizer').length
+      },
+      compressedDataList() {
+        return this.dataList.reduce((acc, item) => {
+          if (item.type == 'optimizer') {
+            acc.push(item)
+            return acc
+          }
+          const existingInverter = acc.find((inverter) => {
+            return inverter.componentId == item.componentId
+          })
+          if (!existingInverter) {
+            acc.push(item)
+            item.quantity = 1
+          } else {
+            existingInverter.quantity++
+          }
+          return acc
+        }, [])
+      },
+    },
+    created() {
+      // Expand all items on creation
+      if (this.hasStringsOrStorage) {
+        this.expandedInverters = this.dataList.map((item) => item.inverterId)
+        this.expandedMppts = this.dataList.flatMap((item) => {
+          const availableMppts = this.availableMPPTData(item)
+          return [
+            ...item.mppts.map((mppt) => mppt.mpptId),
+            ...(item.storageSystem
+              ? [item.storageSystem.storage_system_id]
+              : []),
+            ...(availableMppts?.map((mppt) => mppt.mpptId) || []),
+          ]
+        })
+      }
+    },
+    methods: {
+      hasGroupedInverters(item) {
+        return item.type != 'optimizer' && item.quantity > 1
+      },
+      isTargetRatioInRange(inverter) {
+        const currentTargetRatio = inverter.getTargetRatio()
+        return (
+          this.inverterParameters.target_power_ratio - 20 <=
+            100 * currentTargetRatio &&
+          this.inverterParameters.target_power_ratio + 20 >=
+            100 * currentTargetRatio
+        )
+      },
+      getNumberPrecision(value) {
+        if (typeof value === 'string') {
+          value = Number(value)
+        }
+        if (value < 10) {
+          return 2
+        } else if (value >= 10 && value < 100) {
+          return 1
+        } else {
+          return 0
+        }
+      },
+      getNumberOfMpptModules(strings) {
+        return strings.reduce((acc, curr) => acc + curr.modules.length, 0)
+      },
+      availableMPPTData(item) {
+        if (item.type === 'optimizer' || item.type === 'storage') {
+          return []
+        }
+        const existingTrackerNumbers = item.mppts.map(
+          (mppt) => mppt.trackerNumber
+        )
+        const filteredAvailableMPPTs = item.availableMPPTs.filter(
+          (mppt) => !existingTrackerNumbers.includes(mppt.tracker_number)
+        )
+
+        let mpptData = []
+        filteredAvailableMPPTs.forEach((mppt) => {
+          mpptData.push({
+            mpptId:
+              'available_mppt_' +
+              item.companyComponentLibraryId +
+              '_' +
+              mppt.tracker_number,
+            numberOfTerminals: mppt.number_of_terminals,
+            name:
+              'MPPT ' +
+              (item.mppts.length + filteredAvailableMPPTs.indexOf(mppt) + 1),
+          })
+        })
+        return mpptData
+      },
+      isExpanded(id) {
+        return this.expandedInverters.includes(id)
+      },
+      isMpptExpanded(id) {
+        return this.expandedMppts.includes(id)
+      },
+      toggleSection(id) {
+        const index = this.expandedInverters.indexOf(id)
+        if (index === -1) {
+          this.expandedInverters.push(id)
+        } else {
+          this.expandedInverters.splice(index, 1)
+        }
+      },
+      toggleMppt(id) {
+        const index = this.expandedMppts.indexOf(id)
+        if (index === -1) {
+          this.expandedMppts.push(id)
+        } else {
+          this.expandedMppts.splice(index, 1)
+        }
+      },
+      toggleAllSections() {
+        if (this.hasExpandedSection) {
+          this.expandedInverters = []
+          this.expandedMppts = []
+        } else {
+          this.expandedInverters = this.dataList.map((item) => item.inverterId)
+          this.expandedMppts = this.dataList.flatMap((item) => {
+            const hasStrings = !!item.getStrings().length
+            return [
+              ...(hasStrings ? item.mppts.map((mppt) => mppt.mpptId) : []),
+              ...(item.storageSystem
+                ? [item.storageSystem.storage_system_id]
+                : []),
+            ]
+          })
+        }
+      },
+      isItemCollapsible(item) {
+        return (
+          item.mppts.some((mppt) => mppt.strings.length > 0) ||
+          (item.storageSystem && Object.keys(item.storageSystem).length > 0) ||
+          item.availableMPPTs.length
+        )
+      },
+      itemHasStrings(item) {
+        return item.mppts.some((mppt) => mppt.strings.length > 0)
+      },
+      getTypeName(type) {
+        const value = type.toLowerCase()
+        switch (value) {
+          case 'pv':
+            return this.$gettext('PV')
+          case 'pv_storage':
+            return this.$gettext('hybrid')
+          case 'storage':
+            return this.$gettext('battery')
+          case 'optimizer':
+            return this.$gettext('inverter_type_optimizer')
+          default:
+            return this.$gettext('PV')
+        }
+      },
+      getIconName(item) {
+        const value =
+          item.type === 'pv_storage'
+            ? item.iconName.technology_choice
+            : item.type
+        switch (value) {
+          case 'photovoltaics':
+            return 'pv'
+          case 'pv':
+            return 'pv'
+          case 'storage':
+            return 'battery'
+          case 'battery':
+            return 'battery'
+          case 'optimizer':
+            return 'optimizer'
+          default:
+            return 'pv'
+        }
+      },
+      handleMoveClick(direction, index, item) {
+        this.$emit('on-move', {
+          direction: direction,
+          index: index,
+          item: item,
+          isExpanded: this.hasExpandedSection,
+        })
+      },
+    },
+  }
+</script>