@eturnity/eturnity_reusable_components 7.48.1-EPDM-10964.0 → 7.48.1-EPDM-12680.12

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

@@ -0,0 +1,711 @@
+<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 dataList" :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.type === 'optimizer' && item.quantity
+                    ? item.quantity + ' x'
+                    : ''
+                }}
+                {{ item.model }}</TitleText
+              >
+              <TitleSubText
+                >{{ item.brandName }} |
+                <ContainerValue v-if="item.getkWp() > 1">
+                  {{
+                    numberToString({
+                      value: item.getkWp(),
+                      numberPrecision: 2,
+                    })
+                  }}
+                  kWp
+                </ContainerValue>
+                <ContainerValue v-else>
+                  {{
+                    numberToString({
+                      value: 1000 * item.getkWp(),
+                      numberPrecision: 2,
+                      minDecimals: 2,
+                    })
+                  }}
+                  Wp
+                </ContainerValue></TitleSubText
+              >
+            </TextContainer>
+          </TitleContainer>
+          <MarkersContainer>
+            <MarkerItem
+              v-if="item.mppts.length"
+              :background-color="isTargetRatioInRange(item) ? 'green' : 'red'"
+              >{{
+                numberToString({
+                  value: 100 * item.getTargetRatio(),
+                  numberPrecision: 2,
+                  minDecimals: 0,
+                })
+              }}%</MarkerItem
+            >
+            <MarkerItem v-if="item.hasTemplate">
+              <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.type)"
+                size="14px"
+              />
+              <div>{{ getTypeName(item.type) }}</div>
+            </MarkerItem>
+          </MarkersContainer>
+          <IconsContainer>
+            <IconWrapper>
+              <RCIcon
+                color="red"
+                cursor="pointer"
+                name="delete"
+                size="14px"
+                @click="$emit('on-delete', item)"
+              />
+            </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="dataList.length > 1">
+          <SortingIconWrapper
+            :data-test-id="'move_up_' + index"
+            :is-disabled="index === 0"
+            @click="index > 0 && handleMoveClick('up', index)"
+          >
+            <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 === dataList.length - 1"
+            @click="
+              index < dataList.length - 1 && handleMoveClick('down', index)
+            "
+          >
+            <RCIcon
+              :color="index === dataList.length - 1 ? 'grey6' : 'grey3'"
+              :cursor="
+                index === dataList.length - 1 ? 'not-allowed' : '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 }}/{{ 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)">
+          <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.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;
+  `
+
+  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`
+    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;
+  `
+
+  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%;
+  `
+
+  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,
+    },
+    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: [],
+        numberToString,
+      }
+    },
+    computed: {
+      hasExpandedSection() {
+        return this.expandedInverters.length > 0
+      },
+    },
+    watch: {
+      dataList: {
+        handler(newValue) {
+          console.log('newValue', newValue)
+        },
+        deep: true,
+      },
+    },
+    methods: {
+      isTargetRatioInRange(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.dataList.map((item) => item.inverterId)
+          this.expandedMppts = this.dataList.flatMap((item) => [
+            ...item.mppts.map((mppt) => mppt.mpptId),
+            ...(item.storageSystem
+              ? [item.storageSystem.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>