@eturnity/eturnity_reusable_components 7.37.5-qa-elisee-7.42.0 → 7.39.0

package/src/components/selectedOptions/index.vue

@@ -1,32 +1,105 @@
 <template>
-  <PageContainer>
-    <BoxContainer>
-      <SelectedContainer>
-        {{ numberSelected }} {{ $gettext('selected') }}
-      </SelectedContainer>
-      <ListContainer v-if="optionsList.length">
-        <ListItem
-          v-for="item in optionsList"
-          :key="item.type"
-          :hover-color="item.hoverColor"
-          @click="$emit('on-' + item.type)"
-        >
-          {{ item.name }}
-        </ListItem>
-      </ListContainer>
-      <EmptyText v-if="!optionsList.length">
-        {{ $gettext('no_batch_actions_available') }}
-      </EmptyText>
-      <IconContainer @click="$emit('on-close')">
-        <Icon
-          color="white"
-          cursor="pointer"
-          name="close_for_modals,_tool_tips"
-          size="14px"
-        />
-      </IconContainer>
-    </BoxContainer>
-  </PageContainer>
+  <PageWrapper>
+    <PageContainer v-if="!expanded">
+      <BoxContainer>
+        <SelectedContainer>
+          {{ numberSelected }} {{ $gettext('selected') }}
+        </SelectedContainer>
+        <ListContainer v-if="optionsList.length">
+          <ListItem
+            v-for="item in limitedOptions"
+            :key="item.type"
+            :disabled="item.disabled || false"
+            :hover-color="item.hoverColor"
+            @click="$emit('on-' + item.type)"
+          >
+            {{ item.name }}
+          </ListItem>
+          <IconContainer @click="expandOptions">
+            <ButtonContainer
+              v-if="optionsList.length > optionLimit || hasComponent"
+              name="more_options,_tool_tips"
+            >
+              <DotItem />
+              <DotItem />
+              <DotItem />
+            </ButtonContainer>
+          </IconContainer>
+        </ListContainer>
+        <EmptyText v-if="!optionsList.length">
+          {{ $gettext('no_batch_actions_available') }}
+        </EmptyText>
+        <CloseContainer>
+          <IconContainer @click="$emit('on-close')">
+            <Icon
+              color="white"
+              cursor="pointer"
+              name="close_for_modals,_tool_tips"
+              size="14px"
+            />
+          </IconContainer>
+        </CloseContainer>
+      </BoxContainer>
+    </PageContainer>
+    <CenterPageContainer v-else>
+      <CenterBox>
+        <TitleContainer>
+          <BoxTitle> {{ numberSelected }} {{ $gettext('selected') }} </BoxTitle>
+          <IconContainer @click="$emit('on-close')">
+            <Icon
+              color="white"
+              cursor="pointer"
+              name="close_for_modals,_tool_tips"
+              size="14px"
+            />
+          </IconContainer>
+        </TitleContainer>
+        <DividerContainer>
+          <Divider />
+        </DividerContainer>
+        <ExpandedList>
+          <ExpandedListItem
+            v-for="item in expandedOptions"
+            :key="item.type"
+            :disabled="item.disabled || false"
+            :hasComponent="!!item?.component"
+            :hover-color="item.hoverColor"
+            @click="
+              !item?.component && !item.disabled && $emit('on-' + item.type)
+            "
+          >
+            <ListItemWrapper
+              v-if="item?.component"
+              :hasComponent="!!item?.component"
+              @click="!item.disabled && toggleElement(item.type)"
+            >
+              <ListItemTitle>
+                {{ item.name }}
+                <InfoText
+                  v-if="item.disabled && item.disabledInfo"
+                  :text="item.disabledInfo"
+                />
+              </ListItemTitle>
+              <Icon
+                color="white"
+                :cursor="item.disabled ? 'not-allowed' : 'pointer'"
+                name="arrow_right"
+                size="20px"
+              />
+            </ListItemWrapper>
+            <template v-else>
+              {{ item.name }}
+            </template>
+            <OptionsContainer
+              v-if="item?.component && item.open && !item.disabled"
+            >
+              <slot :name="item.component"></slot>
+            </OptionsContainer>
+          </ExpandedListItem>
+        </ExpandedList>
+      </CenterBox>
+    </CenterPageContainer>
+  </PageWrapper>
 </template>
 
 <script>
@@ -37,6 +110,13 @@
   //     name: 'Export'
   //   },
   //   {
+  //     type: 'export',
+  //     name: 'Export'
+  //     ...
+  //     add component parameter if we were passing a component to the selected options
+  //     component: 'set_supplier'
+  //   },
+  //   {
   //     type: 'delete',
   //     name: 'Delete',
   //     hoverColor: 'red' // default is green
@@ -48,25 +128,84 @@
   //   :optionsList="optionsList"
   //   @on-close="onCloseFunction()"
   //   @on-export="function()" @on-delete="function()"
-  // />
+  // >
+  //   <template v-slot:set_supplier>
+  //     <CustomSelectComponent
+  //       :option-list="suppliers"
+  //       @set-supplier="checkboxBulkActions('setSupplier', $event)"
+  //     />
+  //   </template>
+  // </SelectedOptions>
   import styled from 'vue3-styled-components'
+  import InfoText from '../infoText'
   import Icon from '../icon'
 
+  const PageWrapper = styled.div`
+    font-size: 13px;
+  `
+
+  const DividerContainer = styled.div`
+    display: contents;
+  `
+
+  const Divider = styled.div`
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    width: 95%;
+    margin: 0 auto;
+  `
+
   const PageContainer = styled.div`
     position: fixed;
     bottom: 30px;
     left: 50%;
+    width: auto;
+    max-width: 70%;
     transform: translateX(-50%);
   `
 
+  const CenterPageContainer = styled.div`
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 4px;
+    background-color: rgba(0, 0, 0, 0.4);
+  `
+
+  const OptionsContainer = styled.div`
+    position: fixed;
+    right: -252px;
+    background-color: ${(props) => props.theme.colors.black};
+    border-radius: 4px;
+    padding: 15px;
+  `
+
   const SelectedContainer = styled.div`
     display: grid;
     align-items: center;
     height: 100%;
     padding-right: 20px;
+    white-space: nowrap;
     border-right: 1px solid rgba(255, 255, 255, 0.2);
   `
 
+  const TitleContainer = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 16px;
+  `
+
+  const BoxTitle = styled.div`
+    font-size: 13px;
+    color: ${(props) => props.theme.colors.white};
+    transform: translateZ(0);
+    backface-visibility: hidden;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  `
+
   const BoxContainer = styled.div`
     display: flex;
     align-items: center;
@@ -74,28 +213,75 @@
     opacity: 90%;
     color: ${(props) => props.theme.colors.white};
     border-radius: 4px;
-    padding: 8px 10px 8px 20px;
-    font-size: 14px;
-    height: 40px;
+    padding: 0px 10px 0px 20px;
+    font-size: 13px;
+    height: 45px;
+  `
+
+  const CenterBox = styled(BoxContainer)`
+    justify-content: center;
+    flex-direction: column;
+    height: auto;
+    align-items: flex-start;
+    border-radius: 4px;
+    width: 400px;
+    padding: 0px;
+  `
+
+  const ButtonContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 5px;
+    cursor: pointer;
+
+    div {
+      // This is the dot color
+      background: ${(props) => props.theme.colors.white};
+    }
+  `
+
+  const CloseContainer = styled.div`
+    margin-left: 20px;
+  `
+
+  const DotItem = styled.div`
+    width: 4px;
+    height: 4px;
+    margin: 1px;
+    border-radius: 50%;
   `
 
   const ListContainer = styled.div`
-    padding: 0 20px;
+    height: 100%;
     display: flex;
-    gap: 20px;
+    align-items: center;
     color: ${(props) => props.theme.colors.white};
   `
 
   const ListAttrs = {
+    disabled: Boolean,
     hoverColor: String,
   }
+
   const ListItem = styled('div', ListAttrs)`
-    cursor: pointer;
+    width: max-content;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+    color: ${(props) => props.disabled && props.theme.colors.grey3};
+
     &:hover {
+      background: rgba(255, 255, 255, 0.1);
       color: ${(props) =>
-        props.hoverColor
+        props.disabled
+          ? props.theme.colors.grey3
+          : props.hoverColor
           ? props.theme.colors[props.hoverColor]
-          : props.theme.colors.green};
+          : props.theme.colors.white};
     }
   `
 
@@ -106,7 +292,7 @@
     height: 30px;
     width: 30px;
     cursor: pointer;
-    margin-left: 20px;
+    margin-left: 8px;
 
     &:hover {
       background: rgba(255, 255, 255, 0.1);
@@ -114,6 +300,46 @@
     }
   `
 
+  const ExpandedList = styled.div`
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  `
+
+  const ExpandedListItem = styled('div', {
+    disabled: Boolean,
+    hoverColor: String,
+    hasComponent: Boolean,
+  })`
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: ${(props) => (props.hasComponent ? '0' : '13px 15px')};
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+    color: ${(props) => props.disabled && props.theme.colors.grey3};
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: ${(props) =>
+        props.disabled ? props.theme.colors.grey3 : props.theme.colors.white};
+    }
+  `
+
+  const ListItemWrapper = styled('div', { hasComponent: Boolean })`
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: ${(props) => (props.hasComponent ? '13px 15px' : '0')};
+  `
+
+  const ListItemTitle = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  `
+
   const EmptyText = styled.div`
     color: ${(props) => props.theme.colors.white};
     font-size: 13px;
@@ -127,19 +353,98 @@
       BoxContainer,
       SelectedContainer,
       ListContainer,
+      ButtonContainer,
+      DotItem,
       ListItem,
+      InfoText,
+      CenterBox,
       Icon,
+      CenterPageContainer,
+      ListItemWrapper,
+      ListItemTitle,
+      PageWrapper,
+      OptionsContainer,
+      ExpandedListItem,
+      TitleContainer,
       IconContainer,
       EmptyText,
+      BoxTitle,
+      Divider,
+      DividerContainer,
+      ExpandedList,
+      CloseContainer,
     },
     props: {
       optionsList: {
+        type: Array,
         required: true,
       },
       numberSelected: {
+        type: Number,
         required: true,
         default: 0,
       },
     },
+    data() {
+      return {
+        //maximum number of options to display, if more than 4, display a 'more' option
+        optionLimit: 4,
+        showOverlay: false,
+        expanded: false,
+        expandedOptions: [],
+      }
+    },
+    computed: {
+      hasComponent() {
+        return this.optionsList.some((item) => item.component)
+      },
+      limitedOptions() {
+        return this.expandedOptions.filter((option) => !option.component)
+      },
+    },
+    watch: {
+      optionsList() {
+        this.initializeOptions()
+      },
+    },
+    mounted() {
+      this.initializeOptions()
+    },
+    methods: {
+      initializeOptions() {
+        this.expandedOptions = [...this.optionsList]
+          .map((option, index) => {
+            const currentOption = this.expandedOptions[index]
+            const isOpen = !!currentOption ? currentOption.open : false
+
+            return { ...option, open: isOpen }
+          })
+          .slice(0, this.optionLimit)
+      },
+      toggleElement(type) {
+        this.expandedOptions = this.optionsList.map((item) => {
+          if (item.type === type) {
+            item.open = !item.open
+          } else item.open = false
+
+          return item
+        })
+      },
+      expandOptions() {
+        this.expanded = !this.expanded
+        this.expandedOptions = this.optionsList
+      },
+      handleExpandedOptionClick(item) {
+        if (item.disabled) return
+
+        if (!item.component) {
+          this.$emit('on-' + item.type)
+
+          return
+        }
+
+        this.toggleElement(item.type)
+      },
+    },
   }
 </script>

package/src/assets/svgIcons/compass.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" fill="#333" viewBox="0 0 29 29"><path d="m10.5 14 4-8 4 8z"/><path class='fix' fill="#ccc" d="m10.5 16 4 8 4-8z"/></svg>

package/src/assets/svgIcons/pause.svg

@@ -1,6 +0,0 @@
-<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 viewBox="0 0 512 512" xml:space="preserve">
-<path d="M256,0C114.617,0,0,114.615,0,256s114.617,256,256,256s256-114.615,256-256S397.383,0,256,0z M224,320
-	c0,8.836-7.164,16-16,16h-32c-8.836,0-16-7.164-16-16V192c0-8.836,7.164-16,16-16h32c8.836,0,16,7.164,16,16V320z M352,320
-	c0,8.836-7.164,16-16,16h-32c-8.836,0-16-7.164-16-16V192c0-8.836,7.164-16,16-16h32c8.836,0,16,7.164,16,16V320z"/>
-</svg>