@eturnity/eturnity_reusable_components 7.48.1-EPDM-12680.14 → 7.48.1-EPDM-12680.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.48.1-EPDM-12680.14",
+  "version": "7.48.1-EPDM-12680.16",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/string_directions.svg

@@ -0,0 +1,10 @@
+<svg width="100px" height="100px" viewBox="8 8 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_888_9102)">
+<path d="M9 8.5V19.75C9 20.4404 9.55964 21 10.25 21V21C10.9404 21 11.5 20.4404 11.5 19.75V10.25C11.5 9.55964 12.0596 9 12.75 9V9C13.4404 9 14 9.55964 14 10.25V21.5M15.5 9H20C20.5523 9 21 9.44772 21 10V10C21 10.5523 20.5523 11 20 11H17C16.4477 11 16 11.4477 16 12V12C16 12.5523 16.4477 13 17 13H20C20.5523 13 21 13.4477 21 14V14C21 14.5523 20.5523 15 20 15H17C16.4477 15 16 15.4477 16 16V16C16 16.5523 16.4477 17 17 17H20C20.5523 17 21 17.4477 21 18V18C21 18.5523 20.5523 19 20 19H17C16.4477 19 16 19.4477 16 20V20C16 20.5523 16.4477 21 17 21H21.5" stroke="white"/>
+</g>
+<defs>
+<clipPath id="clip0_888_9102">
+<rect width="14" height="14" fill="white" transform="translate(8 8)"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -3,6 +3,7 @@
     <PageTitleContainer>
       <SectionTitleText>{{ $gettext('inverters') }}</SectionTitleText>
       <ButtonIcon
+        v-if="hasStringsOrStorage"
         custom-color="black"
         :icon-name="hasExpandedSection ? 'collapse_all' : 'expand'"
         :text="$gettext(hasExpandedSection ? 'collapse_all' : 'expand_all')"
@@ -19,44 +20,52 @@
               @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' ? '36px' : '0' }"
             >
-              <TitleText :title="item.model"
-                >{{
+              <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
-              >
+                {{ item.model }}
+              </TitleText>
+              <TitleSubText>
+                <span>{{ item.brandName }}</span>
+                <template
+                  v-if="itemHasStrings(item) || item.type === 'optimizer'"
+                >
+                  <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>
+                </template>
+              </TitleSubText>
             </TextContainer>
           </TitleContainer>
           <MarkersContainer>
@@ -87,16 +96,14 @@
               </span>
             </MarkerItem>
             <MarkerItem>
-              <RCIcon
-                color="white"
-                :name="getIconName(item.type)"
-                size="14px"
-              />
+              <RCIcon color="white" :name="getIconName(item)" size="14px" />
               <div>{{ getTypeName(item.type) }}</div>
             </MarkerItem>
           </MarkersContainer>
           <IconsContainer>
-            <IconWrapper>
+            <IconWrapper
+              v-if="nonOptimizerInverterCount > 1 || item.type === 'optimizer'"
+            >
               <RCIcon
                 :color="item.isLoading ? 'grey' : 'red'"
                 :cursor="item.isLoading ? 'not-allowed' : 'pointer'"
@@ -106,7 +113,14 @@
                 @click="!item.isLoading && $emit('on-delete', item)"
               />
             </IconWrapper>
-            <IconWrapper @click="!item.isLoading && $emit('on-edit', item)">
+            <IconWrapper
+              @click="
+                !(
+                  item.isLoading ||
+                  (item.type != 'pv_storage' && !item.hasTemplate)
+                ) && $emit('on-edit', item)
+              "
+            >
               <RCIcon
                 :color="
                   item.isLoading ||
@@ -238,6 +252,54 @@
           </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
+              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>{{ getTotalModules(item) }}</div>
+              </BoxIconWrapper>
+            </BoxIconsContainer>
+          </BoxTitleWrapper>
+          <EmptyStringBox v-show="isMpptExpanded(availableItem.mpptId)" />
+        </BoxContainer>
+      </template>
       <BoxContainer
         v-if="item.storageSystem && Object.keys(item.storageSystem).length > 0"
         v-show="isExpanded(item.inverterId)"
@@ -579,6 +641,19 @@
     line-height: 150%;
   `
 
+  const IconPlaceholder = styled.div`
+    width: 36px;
+  `
+
+  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: {
@@ -619,6 +694,8 @@
       DividerContainer,
       UnassignedType,
       UnassignedModel,
+      IconPlaceholder,
+      EmptyStringBox,
     },
     props: {
       dataList: {
@@ -646,15 +723,34 @@
       hasExpandedSection() {
         return this.expandedInverters.length > 0
       },
-    },
-    watch: {
-      dataList: {
-        handler(newValue) {
-          console.log('newValue', newValue)
-        },
-        deep: true,
+      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
       },
     },
+    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: {
       isTargetRatioInRange(inverter) {
         const currentTargetRatio = inverter.getTargetRatio()
@@ -668,6 +764,44 @@
       getNumberOfMpptModules(strings) {
         return strings.reduce((acc, curr) => acc + curr.modules.length, 0)
       },
+      getTotalModules(item) {
+        // This is for the available MPPTs
+        return item.mppts.reduce((total, mppt) => {
+          return (
+            total +
+            mppt.strings.reduce((stringTotal, string) => {
+              return stringTotal + string.modules.length
+            }, 0)
+          )
+        }, 0)
+      },
+      availableMPPTData(item) {
+        if (item.type === 'optimizer' || item.type === 'storage') {
+          return []
+        }
+        const existingTrackerNumbers = item.mppts.map(
+          (mppt) => mppt.tracker_number
+        )
+        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)
       },
@@ -696,14 +830,30 @@
           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]
-              : []),
-          ])
+          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
+                ? availableMppts.map((mppt) => mppt.mpptId)
+                : []),
+            ]
+          })
         }
       },
+      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) {
@@ -719,15 +869,20 @@
             return this.$gettext('PV')
         }
       },
-      getIconName(type) {
-        const value = type.toLowerCase()
+      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 'pv_storage':
-            return 'hybrid'
           case 'storage':
             return 'battery'
+          case 'battery':
+            return 'battery'
           case 'optimizer':
             return 'optimizer'
           default: