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

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

@@ -1,541 +0,0 @@
-<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 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>
-            <RCIcon
-              color="white"
-              cursor="pointer"
-              name="document"
-              size="14px"
-            />
-          </IconWrapper>
-        </IconsContainer>
-      </TitleContainer>
-      <MarkersContainer>
-        <MarkerItem>??%</MarkerItem>
-        <MarkerItem>{{
-          item.hasTemplate ? 'Template!' : 'No Template!'
-        }}</MarkerItem>
-        <MarkerItem>
-          <RCIcon color="white" :name="getIconName(item.type)" size="14px" />
-          <div>{{ getTypeName(item.type) }}</div>
-        </MarkerItem>
-        <ContainerValue>? kWp</ContainerValue>
-      </MarkersContainer>
-      <BoxContainer
-        v-for="(mppt, index) in item.mppts"
-        v-show="isExpanded(item.inverterId)"
-        :key="mppt.mpptId"
-      >
-        <BoxTitleWrapper>
-          <IconWrapper size="20px" @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.numberOfMppts ? mppt.numberOfMppts : 0
-                }}
-              </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, idx) in mppt.strings" :key="string.id">
-            <StringColorContainer
-              :background-color="
-                getStringColor(getGlobalStringIndex(item, mppt, idx))
-              "
-            />
-            <StringContainer>
-              <div>{{ string.name }}</div>
-              <StringIconContainer>
-                <div>{{ string.modules.length }}</div>
-                <RCIcon color="white" name="module" size="14px" />
-              </StringIconContainer>
-            </StringContainer>
-          </StringBox>
-        </div>
-      </BoxContainer>
-    </SectionContainer>
-  </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'
-
-  const PageContainer = styled.div``
-
-  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;
-    gap: 14px;
-    align-items: center;
-  `
-
-  const IconsContainer = styled.div`
-    display: flex;
-    align-items: center;
-    margin-left: auto;
-  `
-
-  const TextContainer = styled.div`
-    display: grid;
-  `
-
-  const TitleText = styled.div`
-    font-size: 13px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `
-
-  const TitleSubText = styled.div`
-    font-size: 10px;
-  `
-
-  const MarkersContainer = styled.div`
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin: 8px 0 16px 30px;
-    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};
-  `
-
-  const ContainerValue = styled.div`
-    font-size: 11px;
-  `
-
-  const IconAttrs = { size: { type: String, default: '36px' } }
-  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};
-
-    &:hover {
-      background: 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`
-    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};
-  `
-
-  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,
-    },
-    props: {
-      dataList: {
-        required: true,
-        type: Array,
-      },
-    },
-    emits: ['on-edit'],
-    data() {
-      return {
-        expandedInverters: [],
-        expandedMppts: [],
-        // mockData: [
-        //   {
-        //     id: 1,
-        //     brand: 'PVI-10.0-TL-OUTD',
-        //     model: 'ABB',
-        //     num_modules: 20,
-        //     power: 110,
-        //     template: true,
-        //     technology: 'PV',
-        //     power_kWp: 24,
-        //     mppt_list: [
-        //       {
-        //         id: 1,
-        //         name: 'MPPT 1',
-        //         num_modules: 2,
-        //         num_strings: 2,
-        //         num_strings_available: 3,
-        //         strings: [
-        //           {
-        //             id: 1,
-        //             name: 'String A',
-        //             num_modules: 2,
-        //             color: 'red',
-        //           },
-        //           {
-        //             id: 2,
-        //             name: 'String B',
-        //             num_modules: 4,
-        //             color: 'green',
-        //           },
-        //           {
-        //             id: 3,
-        //             name: 'String C',
-        //             num_modules: 5,
-        //             color: 'blue',
-        //           },
-        //         ],
-        //       },
-        //       {
-        //         id: 2,
-        //         name: 'String B',
-        //         num_modules: 3,
-        //         num_strings: 3,
-        //         num_strings_available: 3,
-        //         strings: [
-        //           {
-        //             id: 4,
-        //             name: 'String D',
-        //             num_modules: 3,
-        //             color: 'purple',
-        //           },
-        //           {
-        //             id: 5,
-        //             name: 'String E',
-        //             num_modules: 6,
-        //             color: 'orange',
-        //           },
-        //           {
-        //             id: 6,
-        //             name: 'String F',
-        //             num_modules: 8,
-        //             color: 'yellow',
-        //           },
-        //         ],
-        //       },
-        //     ],
-        //   },
-        //   {
-        //     id: 2,
-        //     brand: 'SUN2000-15KTL-M0',
-        //     model: 'Huawei',
-        //     num_modules: 30,
-        //     power: 95,
-        //     template: false,
-        //     technology: 'PV',
-        //     power_kWp: 32,
-        //     mppt_list: [
-        //       {
-        //         id: 3,
-        //         name: 'MPPT A',
-        //         num_modules: 4,
-        //         num_strings: 1,
-        //         num_strings_available: 2,
-        //         strings: [
-        //           {
-        //             id: 7,
-        //             name: 'String G',
-        //             num_modules: 4,
-        //             color: 'pink',
-        //           },
-        //         ],
-        //       },
-        //       {
-        //         id: 4,
-        //         name: 'MPPT B',
-        //         num_modules: 6,
-        //         num_strings: 2,
-        //         num_strings_available: 2,
-        //         strings: [
-        //           {
-        //             id: 8,
-        //             name: 'String H',
-        //             num_modules: 3,
-        //             color: 'cyan',
-        //           },
-        //           {
-        //             id: 9,
-        //             name: 'String I',
-        //             num_modules: 3,
-        //             color: 'brown',
-        //           },
-        //         ],
-        //       },
-        //     ],
-        //   },
-        // ],
-      }
-    },
-    computed: {
-      hasExpandedSection() {
-        return this.expandedInverters.length > 0
-      },
-    },
-    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)
-      },
-      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)
-          )
-        }
-      },
-      getTypeName(type) {
-        const value = type.toLowerCase()
-        return this.$gettext(`inverter_type_${value}`)
-      },
-      getIconName(type) {
-        // ToDo get correct icons
-        const value = type.toLowerCase()
-        return value === 'pv' ? 'pv' : 'optimizer'
-      },
-    },
-  }
-</script>