@eturnity/eturnity_reusable_components 7.48.1-EPDM-12680.13 → 7.48.1-EPDM-12680.15

package/dist/main.es92.js

@@ -0,0 +1,23 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "6",
+  height: "16",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M21.75 14.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 20a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 25.25a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const context_menu = { render };
+export {
+  context_menu as default,
+  render
+};

package/dist/main.es93.js

@@ -0,0 +1,23 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "6",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#B2B9C5",
+  d: "M16.5 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M27 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const context_menu_tabs = { render };
+export {
+  context_menu_tabs as default,
+  render
+};

package/dist/main.es94.js

@@ -0,0 +1,24 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "800",
+  height: "800",
+  viewBox: "0 0 512 512"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "none",
+  "fill-rule": "evenodd",
+  d: "M426.667 128v320h-256V128zM384 170.667H213.333v234.666H384zm-64-128v42.666H128v256H85.333V42.667z"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const copy = { render };
+export {
+  copy as default,
+  render
+};

package/dist/main.es95.js

@@ -0,0 +1,28 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "10",
+  height: "10",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#000",
+  d: "m9.879 8.479-1.4 1.4L.12 1.52l1.4-1.4L5.7 4.3z"
+}, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#000",
+  d: "m1.521 9.879-1.4-1.4L8.48.12l1.4 1.4z"
+}, null, -1);
+const _hoisted_4 = [
+  _hoisted_2,
+  _hoisted_3
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+}
+const cross = { render };
+export {
+  cross as default,
+  render
+};

package/dist/main.es96.js

@@ -0,0 +1,28 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "20",
+  height: "14",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M20 16c2.829 0 4.976 1.278 6.69 4.003C24.975 22.724 22.827 24 20 24s-4.975-1.276-6.69-3.997C15.024 17.278 17.171 16 20 16m0-2c-4.273 0-7.094 2.43-9 6.005C12.906 23.57 15.727 26 20 26s7.094-2.43 9-5.995C27.094 16.43 24.273 14 20 14"
+}, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M20 22a2 2 0 1 0 0-4 2 2 0 0 0 0 4"
+}, null, -1);
+const _hoisted_4 = [
+  _hoisted_2,
+  _hoisted_3
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+}
+const current_variant = { render };
+export {
+  current_variant as default,
+  render
+};

package/dist/main.es97.js

@@ -0,0 +1,23 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "18",
+  height: "18",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#fff",
+  d: "M0 10h8V0H0zm0 8h8v-6H0zm10 0h8V8h-8zm0-18v6h8V0z"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const dashboard = { render };
+export {
+  dashboard as default,
+  render
+};

package/dist/main.es98.js

@@ -0,0 +1,23 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "18",
+  height: "18",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M16 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4v-2H2V2h14v14h-4v2h4c1.1 0 2-.9 2-2V2a2 2 0 0 0-2-2M9 6l-4 4h3v8h2v-8h3z"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const data_transfer = { render };
+export {
+  data_transfer as default,
+  render
+};

package/dist/main.es99.js

@@ -0,0 +1,28 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "12",
+  height: "16",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M15 13h2v14h-2z"
+}, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M17 21a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h8l-2.857 4L25 21z"
+}, null, -1);
+const _hoisted_4 = [
+  _hoisted_2,
+  _hoisted_3
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+}
+const deadline = { render };
+export {
+  deadline as default,
+  render
+};

package/dist/style.css

@@ -0,0 +1 @@
+html,body{height:100%;margin:0}

package/package.json

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

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'"
@@ -108,9 +115,22 @@
             </IconWrapper>
             <IconWrapper @click="!item.isLoading && $emit('on-edit', item)">
               <RCIcon
-                :color="item.isLoading ? 'grey' : 'white'"
-                :cursor="item.isLoading ? 'not-allowed' : 'pointer'"
-                :is-disabled="item.isLoading"
+                :color="
+                  item.isLoading ||
+                  (item.type != 'pv_storage' && !item.hasTemplate)
+                    ? 'grey'
+                    : 'white'
+                "
+                :cursor="
+                  item.isLoading ||
+                  (item.type != 'pv_storage' && !item.hasTemplate)
+                    ? 'not-allowed'
+                    : 'pointer'
+                "
+                :is-disabled="
+                  item.isLoading ||
+                  (item.type != 'pv_storage' && !item.hasTemplate)
+                "
                 name="edit_button"
                 size="14px"
               />
@@ -225,6 +245,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)"
@@ -566,6 +634,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: {
@@ -606,6 +687,8 @@
       DividerContainer,
       UnassignedType,
       UnassignedModel,
+      IconPlaceholder,
+      EmptyStringBox,
     },
     props: {
       dataList: {
@@ -633,15 +716,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()
@@ -655,6 +757,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)
       },
@@ -683,14 +823,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) {
@@ -706,15 +862,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: