@eturnity/eturnity_reusable_components 7.45.5-EPDM-12680.0 → 7.45.5-EPDM-12680.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.45.5-EPDM-12680.0",
+  "version": "7.45.5-EPDM-12680.2",
   "files": [
     "dist",
     "src"

package/src/components/inputs/inputNumber/index.vue

@@ -645,7 +645,7 @@
       },
       showArrowControls: {
         type: Boolean,
-        default: true,
+        default: false,
       },
     },
     data() {

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

@@ -9,18 +9,18 @@
         @click="toggleAllSections"
       />
     </PageTitleContainer>
-    <SectionContainer v-for="item in dataList" :key="item.inverter_id">
+    <SectionContainer v-for="item in dataList" :key="item.inverterId">
       <TitleContainer>
-        <IconWrapper size="20px" @click="toggleSection(item.inverter_id)">
+        <IconWrapper size="20px" @click="toggleSection(item.inverterId)">
           <RCIcon
             color="white"
-            :name="isExpanded(item.inverter_id) ? 'arrow_up' : 'arrow_down'"
+            :name="isExpanded(item.inverterId) ? 'arrow_up' : 'arrow_down'"
             size="10px"
           />
         </IconWrapper>
         <TextContainer>
-          <TitleText>{{ item.name }}</TitleText>
-          <TitleSubText>{{ item.brand_name }}</TitleSubText>
+          <TitleText :title="item.model">{{ item.model }}</TitleText>
+          <TitleSubText>{{ item.brandName }}</TitleSubText>
         </TextContainer>
         <IconsContainer>
           <IconWrapper>
@@ -45,27 +45,27 @@
         </IconsContainer>
       </TitleContainer>
       <MarkersContainer>
-        <MarkerItem background-color="green">{{ item.power }}%</MarkerItem>
+        <MarkerItem>??%</MarkerItem>
         <MarkerItem>{{
-          item.has_template ? 'Template!' : 'No Template!'
+          item.hasTemplate ? 'Template!' : 'No Template!'
         }}</MarkerItem>
         <MarkerItem>
           <RCIcon color="white" :name="getIconName(item.type)" size="14px" />
           <div>{{ getTypeName(item.type) }}</div>
         </MarkerItem>
-        <ContainerValue>{{ item.power_kWp }} kWp</ContainerValue>
+        <ContainerValue>? kWp</ContainerValue>
       </MarkersContainer>
       <BoxContainer
-        v-for="mppt in item.mppts"
-        v-show="isExpanded(item.id)"
-        :key="mppt.id"
+        v-for="(mppt, index) in item.mppts"
+        v-show="isExpanded(item.inverterId)"
+        :key="mppt.mpptId"
       >
         <BoxTitleWrapper>
-          <IconWrapper size="20px" @click="toggleMppt(mppt.id)">
+          <IconWrapper size="20px" @click="toggleMppt(mppt.mpptId)">
             <RCIcon
               color="white"
               cursor="pointer"
-              :name="isMpptExpanded(mppt.id) ? 'arrow_up' : 'arrow_down'"
+              :name="isMpptExpanded(mppt.mpptId) ? 'arrow_up' : 'arrow_down'"
               size="10px"
             />
           </IconWrapper>
@@ -78,7 +78,11 @@
                 name="string_design"
                 size="11px"
               />
-              <div>{{ mppt.num_strings }}/{{ mppt.num_strings_available }}</div>
+              <div>
+                {{ mppt.strings.length }}/{{
+                  mppt.numberOfMppts ? mppt.numberOfMppts : 0
+                }}
+              </div>
             </BoxIconWrapper>
             <BoxIconWrapper>
               <RCIcon
@@ -87,17 +91,21 @@
                 name="panels_tool"
                 size="11px"
               />
-              <div>{{ mppt.num_modules }}</div>
+              <div>{{ getNumberOfMpptModules(mppt.strings) }}</div>
             </BoxIconWrapper>
           </BoxIconsContainer>
         </BoxTitleWrapper>
-        <div v-show="isMpptExpanded(mppt.id)">
-          <StringBox v-for="string in mppt.strings" :key="string.id">
-            <StringColorContainer :background-color="string.color" />
+        <div v-show="isMpptExpanded(mppt.mpptId)">
+          <StringBox v-for="(string, idx) in mppt.strings" :key="string.id">
+            <StringColorContainer
+              :background-color="
+                getStringColor(getGlobalStringIndex(item, mppt, idx))
+              "
+            />
             <StringContainer>
               <div>{{ string.name }}</div>
               <StringIconContainer>
-                <div>{{ string.num_modules }}</div>
+                <div>{{ string.modules.length }}</div>
                 <RCIcon color="white" name="module" size="14px" />
               </StringIconContainer>
             </StringContainer>
@@ -144,6 +152,9 @@
 
   const TitleText = styled.div`
     font-size: 13px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   `
 
   const TitleSubText = styled.div`
@@ -152,6 +163,7 @@
 
   const MarkersContainer = styled.div`
     display: flex;
+    flex-wrap: wrap;
     gap: 8px;
     margin: 8px 0 16px 30px;
     align-items: end;
@@ -438,6 +450,50 @@
       },
     },
     methods: {
+      getGlobalStringIndex(inverter, currentMppt, stringIdx) {
+        // This might need to be optimized, but let's see after we get real data
+        let globalIndex = 0
+
+        // Count strings in previous inverters
+        const inverterIndex = this.dataList.findIndex(
+          (inv) => inv.inverterId === inverter.inverterId
+        )
+        for (let i = 0; i < inverterIndex; i++) {
+          for (const mppt of this.dataList[i].mppts) {
+            globalIndex += mppt.strings.length
+          }
+        }
+
+        // Count strings in previous MPPTs of current inverter
+        const mpptIndex = inverter.mppts.findIndex(
+          (mppt) => mppt.mpptId === currentMppt.mpptId
+        )
+        for (let i = 0; i < mpptIndex; i++) {
+          globalIndex += inverter.mppts[i].strings.length
+        }
+
+        // Add current string index
+        return globalIndex + stringIdx
+      },
+      getNumberOfMpptModules(strings) {
+        return strings.reduce((acc, curr) => acc + curr.modules.length, 0)
+      },
+      getStringColor(idx) {
+        // ToDo: get correct colors
+        const colors = [
+          '#FF6B6B', // coral red
+          '#4ECDC4', // turquoise
+          '#45B7D1', // sky blue
+          '#96CEB4', // sage green
+          '#FFEEAD', // cream yellow
+          '#D4A5A5', // dusty rose
+          '#9B59B6', // purple
+          '#3498DB', // bright blue
+          '#E67E22', // orange
+          '#27AE60', // emerald green
+        ]
+        return colors[idx]
+      },
       isExpanded(id) {
         return this.expandedInverters.includes(id)
       },
@@ -465,9 +521,9 @@
           this.expandedInverters = []
           this.expandedMppts = []
         } else {
-          this.expandedInverters = this.dataList.map((item) => item.inverter_id)
+          this.expandedInverters = this.dataList.map((item) => item.inverterId)
           this.expandedMppts = this.dataList.flatMap((item) =>
-            item.mppts.map((mppt) => mppt.id)
+            item.mppts.map((mppt) => mppt.mpptId)
           )
         }
       },