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

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

@@ -9,81 +9,139 @@
         @click="toggleAllSections"
       />
     </PageTitleContainer>
-    <SectionContainer v-for="item in dataList" :key="item.inverterId">
-      <TitleContainer>
-        <IconWrapper size="20px" @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 }}</TitleSubText>
-        </TextContainer>
-        <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>
+    <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="white"
+              color="grey3"
               cursor="pointer"
-              name="document"
+              name="move_down"
               size="14px"
-              @click="$emit('on-datasheet', item)"
             />
-          </IconWrapper>
-        </IconsContainer>
-      </TitleContainer>
-      <MarkersContainer>
-        <MarkerItem>{{ 100 * item.getTargetRatio().toFixed(2) }}%</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>
-        <ContainerValue v-if="item.getkWp() > 1">
-          {{ item.getkWp().toFixed(0) }} kWp
-        </ContainerValue>
-        <ContainerValue v-else>
-          {{ 1000 * item.getkWp().toFixed(3) }} Wp
-        </ContainerValue>
-      </MarkersContainer>
+          </SortingIconWrapper>
+        </SortingContainer>
+      </TopContainer>
       <BoxContainer
         v-for="mppt in item.mppts"
         v-show="isExpanded(item.inverterId)"
         :key="mppt.mpptId"
       >
         <BoxTitleWrapper>
-          <IconWrapper size="20px" @click="toggleMppt(mppt.mpptId)">
+          <IconWrapper
+            margin-left="4px"
+            size="8px"
+            @click="toggleMppt(mppt.mpptId)"
+          >
             <RCIcon
               color="white"
               cursor="pointer"
@@ -101,9 +159,7 @@
                 size="11px"
               />
               <div>
-                {{ mppt.strings.length }}/{{
-                  mppt.numberOfMppts ? mppt.numberOfMppts : 0
-                }}
+                {{ mppt.strings.length }}/{{ item.availableMPPTs?.length }}
               </div>
             </BoxIconWrapper>
             <BoxIconWrapper>
@@ -130,6 +186,45 @@
           </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>
@@ -139,6 +234,7 @@
   import styled from 'vue3-styled-components'
   import RCIcon from '../../icon'
   import ButtonIcon from '../../buttons/buttonIcon'
+  import { numberToString } from '../../../helpers/numberConverter'
 
   const PageContainer = styled.div``
 
@@ -154,14 +250,13 @@
 
   const TitleContainer = styled.div`
     display: flex;
-    gap: 14px;
     align-items: center;
   `
 
   const IconsContainer = styled.div`
     display: flex;
     align-items: center;
-    margin-left: auto;
+    margin-left: 36px;
   `
 
   const TextContainer = styled.div`
@@ -169,21 +264,23 @@
   `
 
   const TitleText = styled.div`
-    font-size: 13px;
+    font-size: 14px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   `
 
   const TitleSubText = styled.div`
-    font-size: 10px;
+    font-size: 12px;
+    display: flex;
+    gap: 4px;
   `
 
   const MarkersContainer = styled.div`
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
-    margin: 8px 0 16px 30px;
+    margin: 4px 0 2px 36px;
     align-items: end;
   `
 
@@ -211,10 +308,13 @@
   `
 
   const ContainerValue = styled.div`
-    font-size: 11px;
+    font-size: 12px;
   `
 
-  const IconAttrs = { size: { type: String, default: '36px' } }
+  const IconAttrs = {
+    size: { type: String, default: '36px' },
+    marginLeft: String,
+  }
   const IconWrapper = styled('div', IconAttrs)`
     display: flex;
     align-items: center;
@@ -223,9 +323,10 @@
     cursor: pointer;
     width: ${(props) => props.size};
     height: ${(props) => props.size};
-
+    margin-left: ${(props) => props.marginLeft};
     &:hover {
-      background: rgba(255, 255, 255, 0.1);
+      background: ${(props) =>
+        props.marginLeft ? 'transparent' : 'rgba(255, 255, 255, 0.1)'};
     }
 
     &:active {
@@ -313,6 +414,57 @@
     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: {
@@ -340,18 +492,37 @@
       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'],
+    emits: ['on-edit', 'on-move'],
     data() {
       return {
         expandedInverters: [],
         expandedMppts: [],
+        inverterList: [],
+        numberToString,
       }
     },
     computed: {
@@ -359,7 +530,36 @@
         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)
       },
@@ -390,10 +590,13 @@
           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)
+          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) {
@@ -426,6 +629,12 @@
             return 'pv'
         }
       },
+      handleMoveClick(direction, index) {
+        this.$emit('on-move', {
+          direction: direction,
+          index: index,
+        })
+      },
     },
   }
 </script>