@eturnity/eturnity_reusable_components 7.48.1-EPDM-12680.5 → 7.48.1-EPDM-10679.0

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

@@ -1,640 +0,0 @@
-<template>
-  <PageContainer>
-    <PageTitleContainer>
-      <SectionTitleText>{{ $gettext('inverters') }}</SectionTitleText>
-      <ButtonIcon
-        custom-color="black"
-        :icon-name="hasExpandedSection ? 'collapse_all' : 'expand'"
-        :text="$gettext(hasExpandedSection ? 'collapse_all' : 'expand_all')"
-        @click="toggleAllSections"
-      />
-    </PageTitleContainer>
-    <SectionContainer
-      v-for="(item, index) in inverterList"
-      :key="item.inverterId"
-    >
-      <TopContainer>
-        <LeftContainer>
-          <TitleContainer>
-            <IconWrapper size="36px" @click="toggleSection(item.inverterId)">
-              <RCIcon
-                color="white"
-                :name="isExpanded(item.inverterId) ? 'arrow_up' : 'arrow_down'"
-                size="10px"
-              />
-            </IconWrapper>
-            <TextContainer>
-              <TitleText :title="item.model">{{ item.model }}</TitleText>
-              <TitleSubText
-                >{{ item.brandName }} |
-                <ContainerValue v-if="item.getkWp() > 1">
-                  {{
-                    numberToString({
-                      value: item.getkWp(),
-                      numberPrecision: 0,
-                    })
-                  }}
-                  kWp
-                </ContainerValue>
-                <ContainerValue v-else>
-                  {{
-                    numberToString({
-                      value: 1000 * item.getkWp(),
-                      numberPrecision: 3,
-                      minDecimals: 3,
-                    })
-                  }}
-                  Wp
-                </ContainerValue></TitleSubText
-              >
-            </TextContainer>
-          </TitleContainer>
-          <MarkersContainer>
-            <MarkerItem
-              :background-color="isTartgetRatioInRange(item) ? 'green' : 'red'"
-              >{{
-                numberToString({
-                  value: 100 * item.getTargetRatio(),
-                  numberPrecision: 2,
-                  minDecimals: 0,
-                })
-              }}%</MarkerItem
-            >
-            <MarkerItem>
-              <span
-                :title="
-                  item.hasTemplate
-                    ? item.company_product_template_name
-                      ? item.company_product_template_name
-                      : $gettext('no_template_selected')
-                    : $gettext('no_template')
-                "
-              >
-                {{
-                  item.hasTemplate
-                    ? item.company_product_template_name
-                      ? item.company_product_template_name
-                      : $gettext('no_template_selected')
-                    : $gettext('no_template')
-                }}
-              </span>
-            </MarkerItem>
-            <MarkerItem>
-              <RCIcon
-                color="white"
-                :name="getIconName(item.type)"
-                size="14px"
-              />
-              <div>{{ getTypeName(item.type) }}</div>
-            </MarkerItem>
-          </MarkersContainer>
-          <IconsContainer>
-            <IconWrapper>
-              <RCIcon color="red" cursor="pointer" name="delete" size="14px" />
-            </IconWrapper>
-            <IconWrapper @click="$emit('on-edit', item)">
-              <RCIcon
-                color="white"
-                cursor="pointer"
-                name="edit_button"
-                size="14px"
-              />
-            </IconWrapper>
-            <IconWrapper>
-              <RCIcon
-                color="white"
-                cursor="pointer"
-                name="document"
-                size="14px"
-                @click="$emit('on-datasheet', item)"
-              />
-            </IconWrapper>
-          </IconsContainer>
-        </LeftContainer>
-        <SortingContainer v-if="inverterList.length > 1">
-          <SortingIconWrapper
-            :data-test-id="'move_up_' + index"
-            @click="handleMoveClick('up', index)"
-          >
-            <RCIcon color="grey3" cursor="pointer" name="move_up" size="14px" />
-          </SortingIconWrapper>
-          <SortingIconWrapper
-            :data-test-id="'move_down_' + index"
-            @click="handleMoveClick('down', index)"
-          >
-            <RCIcon
-              color="grey3"
-              cursor="pointer"
-              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
-            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 }}/{{ item.availableMPPTs?.length }}
-              </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)">
-          <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>
-      <BoxContainer
-        v-if="
-          item.storage_system && Object.keys(item.storage_system).length > 0
-        "
-        v-show="isExpanded(item.inverterId)"
-        :key="item.storage_system.id"
-      >
-        <BoxTitleWrapper>
-          <IconWrapper
-            margin-left="4px"
-            size="8px"
-            @click="toggleMppt(item.storage_system.id)"
-          >
-            <RCIcon
-              color="white"
-              cursor="pointer"
-              :name="
-                isMpptExpanded(item.storage_system.id)
-                  ? 'arrow_up'
-                  : 'arrow_down'
-              "
-              size="10px"
-            />
-          </IconWrapper>
-          <BoxTitleText>{{ $gettext('battery') }}</BoxTitleText>
-        </BoxTitleWrapper>
-        <div v-show="isMpptExpanded(item.storage_system.id)">
-          <BatteryBox>
-            <RCIcon color="white" name="battery" size="14px" />
-            <BatteryDetailsContainer>
-              <BatteryType>{{ item.storage_system.brand_name }}</BatteryType>
-              <BatteryModel>{{ item.storage_system.model }}</BatteryModel>
-            </BatteryDetailsContainer>
-            <BatteryValue>
-              {{ item.storage_system.nominal_capacity_kwh }} kWh
-            </BatteryValue>
-          </BatteryBox>
-        </div>
-      </BoxContainer>
-    </SectionContainer>
-  </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``
-
-  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;
-  `
-
-  const IconsContainer = styled.div`
-    display: flex;
-    align-items: center;
-    margin-left: 36px;
-  `
-
-  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 36px;
-    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};
-    max-width: 11ch;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    & > span {
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  `
-
-  const ContainerValue = styled.div`
-    font-size: 12px;
-  `
-
-  const IconAttrs = {
-    size: { type: String, default: '36px' },
-    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: 4px;
-    border-bottom-left-radius: 4px;
-  `
-
-  const StringIconContainer = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 2px;
-    padding: 0 4px;
-  `
-
-  const PageTitleContainer = styled.div`
-    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 BatteryBox = styled.div`
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    border: 1px solid ${(props) => props.theme.colors.white};
-    border-radius: 4px;
-    padding: 8px;
-    margin-top: 8px;
-  `
-
-  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 SortingIconWrapper = styled.div`
-    cursor: pointer;
-    width: 30px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  `
-
-  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,
-    },
-    props: {
-      dataList: {
-        required: true,
-        type: Array,
-      },
-      batteryData: {
-        required: true,
-        type: Array,
-      },
-      inverterParameters: {
-        required: true,
-        type: Object,
-      },
-    },
-    emits: ['on-edit', 'on-move'],
-    data() {
-      return {
-        expandedInverters: [],
-        expandedMppts: [],
-        inverterList: [],
-        numberToString,
-      }
-    },
-    computed: {
-      hasExpandedSection() {
-        return this.expandedInverters.length > 0
-      },
-    },
-    watch: {
-      dataList: {
-        handler(newVal) {
-          // debugger
-          // ToDo: remove this but keep the id
-          console.log('newVal', newVal)
-          newVal.forEach((item) => {
-            item.storage_system = {
-              brand_name: 'Test brand',
-              model: 'Test model',
-              nominal_capacity_kwh: 999,
-              id: Math.floor(Math.random() * 9999) + '_battery',
-            }
-          })
-          this.inverterList = newVal
-          console.log('this.inverterList', this.inverterList)
-        },
-        immediate: true, // Add immediate: true to trigger on component creation
-      },
-    },
-    methods: {
-      isTartgetRatioInRange(inverter) {
-        const currentTargetRatio = inverter.getTargetRatio()
-        return (
-          this.inverterParameters.target_power_ratio - 20 <=
-            100 * currentTargetRatio &&
-          this.inverterParameters.target_power_ratio + 20 >=
-            100 * currentTargetRatio
-        )
-      },
-      getNumberOfMpptModules(strings) {
-        return strings.reduce((acc, curr) => acc + curr.modules.length, 0)
-      },
-      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.inverterList.map(
-            (item) => item.inverterId
-          )
-          this.expandedMppts = this.inverterList.flatMap((item) => [
-            ...item.mppts.map((mppt) => mppt.mpptId),
-            ...(item.storage_system ? [item.storage_system.id] : []),
-          ])
-        }
-      },
-      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(type) {
-        const value = type.toLowerCase()
-        switch (value) {
-          case 'pv':
-            return 'pv'
-          case 'pv_storage':
-            return 'hybrid'
-          case 'storage':
-            return 'battery'
-          case 'optimizer':
-            return 'optimizer'
-          default:
-            return 'pv'
-        }
-      },
-      handleMoveClick(direction, index) {
-        this.$emit('on-move', {
-          direction: direction,
-          index: index,
-        })
-      },
-    },
-  }
-</script>