@eturnity/eturnity_reusable_components 7.45.5-EPDM-11313-EPDM-11314.2 → 7.45.5-EPDM-12680.0

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

@@ -0,0 +1,485 @@
+<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.inverter_id">
+      <TitleContainer>
+        <IconWrapper size="20px" @click="toggleSection(item.inverter_id)">
+          <RCIcon
+            color="white"
+            :name="isExpanded(item.inverter_id) ? 'arrow_up' : 'arrow_down'"
+            size="10px"
+          />
+        </IconWrapper>
+        <TextContainer>
+          <TitleText>{{ item.name }}</TitleText>
+          <TitleSubText>{{ item.brand_name }}</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 background-color="green">{{ item.power }}%</MarkerItem>
+        <MarkerItem>{{
+          item.has_template ? '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>
+      </MarkersContainer>
+      <BoxContainer
+        v-for="mppt in item.mppts"
+        v-show="isExpanded(item.id)"
+        :key="mppt.id"
+      >
+        <BoxTitleWrapper>
+          <IconWrapper size="20px" @click="toggleMppt(mppt.id)">
+            <RCIcon
+              color="white"
+              cursor="pointer"
+              :name="isMpptExpanded(mppt.id) ? '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.num_strings }}/{{ mppt.num_strings_available }}</div>
+            </BoxIconWrapper>
+            <BoxIconWrapper>
+              <RCIcon
+                color="white"
+                cursor="pointer"
+                name="panels_tool"
+                size="11px"
+              />
+              <div>{{ mppt.num_modules }}</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" />
+            <StringContainer>
+              <div>{{ string.name }}</div>
+              <StringIconContainer>
+                <div>{{ string.num_modules }}</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;
+  `
+
+  const TitleSubText = styled.div`
+    font-size: 10px;
+  `
+
+  const MarkersContainer = styled.div`
+    display: flex;
+    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: {
+      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.inverter_id)
+          this.expandedMppts = this.dataList.flatMap((item) =>
+            item.mppts.map((mppt) => mppt.id)
+          )
+        }
+      },
+      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>