@eturnity/eturnity_reusable_components 7.37.5 → 7.39.1-EPDM-11736.0

package/src/components/selectedOptions/index.vue

@@ -1,145 +1,471 @@
-<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>
-</template>
-
-<script>
-  // import SelectedOptions from "@eturnity/eturnity_reusable_components/src/components/selectedOptions"
-  // optionsList = [
-  //   {
-  //     type: 'export',
-  //     name: 'Export'
-  //   },
-  //   {
-  //     type: 'delete',
-  //     name: 'Delete',
-  //     hoverColor: 'red' // default is green
-  //   }
-  // ]
-  // @on-${type}="function" should $emit the callback for the 'type' in the optionsList
-  // <selected-options
-  //   :numberSelected="numberSelected"
-  //   :optionsList="optionsList"
-  //   @on-close="onCloseFunction()"
-  //   @on-export="function()" @on-delete="function()"
-  // />
-  import styled from 'vue3-styled-components'
-  import Icon from '../icon'
-
-  const PageContainer = styled.div`
-    position: fixed;
-    bottom: 30px;
-    left: 50%;
-    transform: translateX(-50%);
-  `
-
-  const SelectedContainer = styled.div`
-    display: grid;
-    align-items: center;
-    height: 100%;
-    padding-right: 20px;
-    border-right: 1px solid rgba(255, 255, 255, 0.2);
-  `
-
-  const BoxContainer = styled.div`
-    display: flex;
-    align-items: center;
-    background-color: ${(props) => props.theme.colors.black};
-    opacity: 90%;
-    color: ${(props) => props.theme.colors.white};
-    border-radius: 4px;
-    padding: 8px 10px 8px 20px;
-    font-size: 14px;
-    height: 40px;
-  `
-
-  const ListContainer = styled.div`
-    padding: 0 20px;
-    display: flex;
-    gap: 20px;
-    color: ${(props) => props.theme.colors.white};
-  `
-
-  const ListAttrs = {
-    hoverColor: String,
-  }
-  const ListItem = styled('div', ListAttrs)`
-    cursor: pointer;
-    &:hover {
-      color: ${(props) =>
-        props.hoverColor
-          ? props.theme.colors[props.hoverColor]
-          : props.theme.colors.green};
-    }
-  `
-
-  const IconContainer = styled.div`
-    display: grid;
-    align-items: center;
-    justify-items: center;
-    height: 30px;
-    width: 30px;
-    cursor: pointer;
-    margin-left: 20px;
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.1);
-      border-radius: 4px;
-    }
-  `
-
-  const EmptyText = styled.div`
-    color: ${(props) => props.theme.colors.white};
-    font-size: 13px;
-    padding-left: 16px;
-  `
-
-  export default {
-    name: 'SelectedOptions',
-    components: {
-      PageContainer,
-      BoxContainer,
-      SelectedContainer,
-      ListContainer,
-      ListItem,
-      Icon,
-      IconContainer,
-      EmptyText,
-    },
-    props: {
-      optionsList: {
-        required: true,
-      },
-      numberSelected: {
-        required: true,
-        default: 0,
-      },
-    },
-  }
-</script>
+<template>
+  <PageWrapper>
+    <CenterPageContainer v-if="expanded">
+      <CenterBox>
+        <TitleContainer>
+          <BoxTitle> {{ numberSelected }} {{ selectedLabel }} </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"
+            :has-component="!!item?.component"
+            :hover-color="item.hoverColor"
+            @click="
+              !item?.component && !item.disabled && $emit('on-' + item.type)
+            "
+          >
+            <ListItemWrapper
+              v-if="item?.component"
+              :has-component="!!item?.component"
+              test-data-id="expanded_list_item"
+              @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>
+    <PageContainer v-else>
+      <BoxContainer>
+        <SelectedContainer>
+          {{ numberSelected }} {{ selectedText }}
+        </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
+            v-if="optionsList.length > optionLimit || hasComponent"
+            test-data-id="more_actions_button_wrapper"
+            @click="expandOptions"
+          >
+            <ButtonContainer name="more_options,_tool_tips">
+              <DotItem />
+              <DotItem />
+              <DotItem />
+            </ButtonContainer>
+          </IconContainer>
+        </ListContainer>
+        <EmptyText v-else test-data-id="no_bulk_actions">
+          {{ noBulkActionsText }}
+        </EmptyText>
+        <CloseContainer>
+          <IconContainer @click="$emit('on-close')">
+            <Icon
+              color="white"
+              cursor="pointer"
+              name="close_for_modals,_tool_tips"
+              size="14px"
+            />
+          </IconContainer>
+        </CloseContainer>
+      </BoxContainer>
+    </PageContainer>
+  </PageWrapper>
+</template>
+
+<script>
+  // import SelectedOptions from "@eturnity/eturnity_reusable_components/src/components/selectedOptions"
+  // optionsList = [
+  //   {
+  //     type: 'export',
+  //     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
+  //   }
+  // ]
+  // @on-${type}="function" should $emit the callback for the 'type' in the optionsList
+  // <selected-options
+  //   :numberSelected="numberSelected"
+  //   :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: absolute;
+    left: 101%;
+    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;
+    background-color: ${(props) => props.theme.colors.black};
+    opacity: 90%;
+    color: ${(props) => props.theme.colors.white};
+    border-radius: 4px;
+    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`
+    height: 100%;
+    display: flex;
+    align-items: center;
+    color: ${(props) => props.theme.colors.white};
+  `
+
+  const ListAttrs = {
+    disabled: Boolean,
+    hoverColor: String,
+  }
+
+  const ListItem = styled('div', ListAttrs)`
+    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.disabled
+          ? props.theme.colors.grey3
+          : props.hoverColor
+          ? props.theme.colors[props.hoverColor]
+          : props.theme.colors.white};
+    }
+  `
+
+  const IconContainer = styled.div`
+    display: grid;
+    align-items: center;
+    justify-items: center;
+    height: 30px;
+    width: 30px;
+    cursor: pointer;
+    margin-left: 8px;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 4px;
+    }
+  `
+
+  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;
+    padding-left: 16px;
+  `
+
+  export default {
+    name: 'SelectedOptions',
+    components: {
+      PageContainer,
+      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,
+        default: () => [],
+      },
+      numberSelected: {
+        type: Number,
+        required: true,
+        default: 0,
+      },
+      selectedLabel: {
+        type: String,
+        default: null,
+      },
+      noBulkActionsLabel: {
+        type: String,
+        default: null,
+      },
+    },
+    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)
+      },
+      selectedText() {
+        //work around for storybook not finding the $gettext function
+        return this.selectedLabel || this.$gettext('selected')
+      },
+      noBulkActionsText() {
+        //work around for storybook not finding the $gettext function
+        return (
+          this.noBulkActionsLabel || this.$gettext('no_batch_actions_available')
+        )
+      },
+    },
+    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>