@eturnity/eturnity_reusable_components 7.35.1-EPDM-11386.0 → 7.35.1-EPDM-10620.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.35.1-EPDM-11386.0",
+  "version": "7.35.1-EPDM-10620.1",
   "files": [
     "dist",
     "src"

package/src/App.vue

@@ -1,10 +1,13 @@
 <template>
-  <ThemeProvider :style="{ height: '100%' }" :theme="getTheme()" />
+  <ThemeProvider :style="{ height: '100%' }" :theme="getTheme()">
+    <RouterView />
+  </ThemeProvider>
 </template>
 
 <script>
   import { ThemeProvider } from 'vue3-styled-components'
   import theme from './assets/theme'
+
   export default {
     name: 'App',
     components: {

package/src/assets/svgIcons/adjust_roof.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="12 12 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 13L27 16.8175L26.0477 18.4379L20 15.1397L13.9523 18.4379L13 16.8175L20 13Z" fill="#263238"/>
+<path d="M17.1006 19.1906L20.0001 17.6078L22.8996 19.1906" stroke="#263238" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 21.5621L22.6508 23.0078L21.6985 24.6282L20 23.7019L18.3015 24.6282L17.3492 23.0078L20 21.5621ZM16.1269 25.8141L13.9523 27L13 25.3797L15.1746 24.1937L16.1269 25.8141ZM26.0477 27L23.8731 25.8141L24.8254 24.1937L27 25.3797L26.0477 27Z" fill="#263238"/>
+<path d="M20.9662 22.9146H19.0332L19.0332 18.2928H20.9662L20.9662 22.9146Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/copy.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="copy" fill="none" transform="translate(85.333333, 42.666667)">
+            <path d="M341.333333,85.3333333 L341.333333,405.333333 L85.3333333,405.333333 L85.3333333,85.3333333 L341.333333,85.3333333 Z M298.666667,128 L128,128 L128,362.666667 L298.666667,362.666667 L298.666667,128 Z M234.666667,7.10542736e-15 L234.666667,42.6666667 L42.6666667,42.6666667 L42.6666667,298.666667 L1.42108547e-14,298.666667 L1.42108547e-14,7.10542736e-15 L234.666667,7.10542736e-15 Z">
+            </path>
+        </g>
+    </g>
+</svg>

package/src/assets/theme.js

@@ -35,9 +35,6 @@ const theme = {
     tablet: '768px',
     tabletLarge: '950px',
   },
-  fonts: {
-    mainFont: '"Figtree", sans-serif',
-  },
   borderRadius: '4px',
 }
 

package/src/components/filter/filterSettings.vue

@@ -87,7 +87,10 @@
             :key="index + '_field'"
           >
             <SelectComponent
-              v-if="isMultipleSelector(filter.filter_type)"
+              v-if="
+                isMultipleSelector(filter.filter_type) ||
+                isSingleSelector(filter.filter_type)
+              "
               align-items="vertical"
               :disabled="!filter.choices.length"
               font-size="13px"
@@ -102,16 +105,12 @@
                 <OptionTitle> {{ filter.selectedText }} </OptionTitle>
               </template>
               <template #dropdown>
-                <DropdownCheckboxContainer
-                  v-for="(filterOption, optionIdx) in filter.choices"
-                  :key="optionIdx + 'optionIdx'"
-                  @click.stop
-                >
-                  <Checkbox
-                    :is-checked="filterOption.selected"
-                    :label="filterOption.text"
-                    size="small"
-                    @on-event-handler="
+                <template v-if="isSingleSelector(filter.filter_type)">
+                  <Option
+                    v-for="(filterOption, optionIdx) in filter.choices"
+                    :key="optionIdx + 'optionIdx'"
+                    :value="filterOption.text"
+                    @click="
                       onChange({
                         dataType: item.type,
                         value: $event,
@@ -119,8 +118,31 @@
                         field: filter.field,
                       })
                     "
-                  />
-                </DropdownCheckboxContainer>
+                  >
+                    {{ filterOption.text }}
+                  </Option>
+                </template>
+                <template v-else>
+                  <DropdownCheckboxContainer
+                    v-for="(filterOption, optionIdx) in filter.choices"
+                    :key="optionIdx + 'optionIdx'"
+                    @click.stop
+                  >
+                    <Checkbox
+                      :is-checked="filterOption.selected"
+                      :label="filterOption.text"
+                      size="small"
+                      @on-event-handler="
+                        onChange({
+                          dataType: item.type,
+                          value: $event,
+                          choice: filterOption.choice,
+                          field: filter.field,
+                        })
+                      "
+                    />
+                  </DropdownCheckboxContainer>
+                </template>
               </template>
             </SelectComponent>
             <SectionContainer v-else-if="isRangeSelector(filter.filter_type)">
@@ -305,25 +327,29 @@
   const ContainerWrapper = styled.div`
     position: absolute;
     margin-top: 4px;
+    max-height: 70vh;
+    overflow-y: auto;
     background-color: ${(props) => props.theme.colors.white};
     min-width: 100%;
     width: max-content;
     border: 1px solid ${(props) => props.theme.colors.grey4};
     border-radius: 4px;
-    z-index: 99999;
+    z-index: 1;
     font-size: 13px;
   `
 
   const ColAttrs = { numCols: Number, hasActiveView: Boolean }
   const ColumnWrapper = styled('div', ColAttrs)`
     display: grid;
+    max-height: 50vh;
+    overflow-y: auto;
     grid-template-columns: repeat(${(props) => props.numCols}, auto);
 
     ${({ hasActiveView, theme }) =>
       hasActiveView &&
       `
-    border-top: 1px solid ${theme.colors.grey4};
-  `}
+      border-top: 1px solid ${theme.colors.grey4};
+    `}
   `
 
   const TitleAttrs = { showBorder: Boolean }
@@ -335,8 +361,8 @@
     ${({ showBorder, theme }) =>
       showBorder &&
       `
-    border-right: 1px solid ${theme.colors.grey4};
-  `}
+      border-right: 1px solid ${theme.colors.grey4};
+    `}
   `
 
   const ButtonContainer = styled.div`
@@ -372,8 +398,8 @@
     ${({ showBorder, theme }) =>
       showBorder &&
       `
-    border-right: 1px solid ${theme.colors.grey4};
-  `}
+      border-right: 1px solid ${theme.colors.grey4};
+    `}
 
     .ghost {
       opacity: 0.5;
@@ -402,6 +428,7 @@
     display: grid;
     gap: 6px;
     width: 100%;
+    overflow-wrap: anywhere;
     padding: 7px 10px;
     background: ${(props) => props.theme.colors.grey5};
   `
@@ -435,11 +462,11 @@
   `
 
   const UpperContainer = styled.div`
-  display: grid;
-  grid-gap: 20px
-  grid-template-columns: 1fr 1fr;
-  padding: 10px 14px;
-`
+    display: grid;
+    grid-gap: 20px
+    grid-template-columns: 1fr 1fr;
+    padding: 10px 14px;
+  `
 
   const ResetButton = styled.div`
     display: inline-flex;
@@ -622,6 +649,9 @@
         const foundItem = options.find((item) => item.choice === value)
         return foundItem ? foundItem.text : value ? value : filter.selectedText
       },
+      isSingleSelector(type) {
+        return type === 'boolean'
+      },
       isMultipleSelector(type) {
         return type === 'multi_select_integer' || type === 'multi_select_string'
       },

package/src/components/filter/index.vue

@@ -92,7 +92,7 @@
     mounted() {
       document.addEventListener('click', this.clickOutside)
     },
-    beforeDestroy() {
+    beforeUnmount() {
       document.removeEventListener('click', this.clickOutside)
     },
     methods: {

package/src/components/selectedOptions/index.vue

@@ -1,32 +1,81 @@
 <template>
-  <PageContainer>
-    <BoxContainer>
-      <SelectedContainer>
-        {{ numberSelected }} {{ $gettext('selected') }}
-      </SelectedContainer>
-      <ListContainer v-if="optionsList.length">
-        <ListItem
-          v-for="item in optionsList"
+  <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"
+            :hover-color="item.hoverColor"
+            @click="$emit('on-' + item.type)"
+          >
+            {{ item.name }}
+          </ListItem>
+          <ButtonContainer
+            v-if="optionsList.length > optionLimit || hasComponent"
+            @click="expandOptions"
+            name="more_options,_tool_tips"
+          >
+            <DotItem />
+            <DotItem />
+            <DotItem />
+          </ButtonContainer>
+        </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>
+    <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>
+        <Divider />
+        <ExpandedListItem
+          v-for="item in limitedOptions"
           :key="item.type"
           :hover-color="item.hoverColor"
-          @click="$emit('on-' + item.type)"
+          @click="item?.component ? '' : $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>
+          <IconContainer
+            v-if="item?.component"
+            @click="toggleElement(item.type)"
+          >
+            <Icon
+              color="white"
+              cursor="pointer"
+              name="arrow_right"
+              size="14px"
+            />
+          </IconContainer>
+          <OptionsContainer v-if="item?.component && item.open">
+            <slot :name="item.component" />
+          </OptionsContainer>
+        </ExpandedListItem>
+      </CenterBox>
+    </CenterPageContainer>
+  </PageWrapper>
 </template>
 
 <script>
@@ -37,6 +86,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,10 +104,25 @@
   //   :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 MainButton from '../buttons/mainButton'
   import Icon from '../icon'
 
+  const PageWrapper = styled.div``
+
+  const Divider = styled.div`
+    border-bottom: 1px solid ${({ theme }) => theme.colors.white};
+    width: 100%;
+  `
+
   const PageContainer = styled.div`
     position: fixed;
     bottom: 30px;
@@ -59,6 +130,23 @@
     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: -300px;
+    background-color: ${(props) => props.theme.colors.black};
+    border-radius: 4px;
+    padding: 20px;
+  `
+
   const SelectedContainer = styled.div`
     display: grid;
     align-items: center;
@@ -67,6 +155,18 @@
     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%;
+  `
+
+  const BoxTitle = styled.div`
+    font-size: 14px;
+    color: ${(props) => props.theme.colors.white};
+  `
+
   const BoxContainer = styled.div`
     display: flex;
     align-items: center;
@@ -79,9 +179,41 @@
     height: 40px;
   `
 
+  const CenterBox = styled(BoxContainer)`
+    justify-content: center;
+    flex-direction: column;
+    height: auto;
+    gap: 25px;
+    align-items: flex-start;
+    border-radius: 4px;
+    width: 400px;
+    padding: 20px;
+  `
+
+  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 DotItem = styled.div`
+    width: 4px;
+    height: 4px;
+    margin: 1px;
+    border-radius: 50%;
+  `
+
   const ListContainer = styled.div`
     padding: 0 20px;
     display: flex;
+    align-items: center;
     gap: 20px;
     color: ${(props) => props.theme.colors.white};
   `
@@ -99,6 +231,13 @@
     }
   `
 
+  const ExpandedListItem = styled(ListItem)`
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+  `
+
   const IconContainer = styled.div`
     display: grid;
     align-items: center;
@@ -106,7 +245,7 @@
     height: 30px;
     width: 30px;
     cursor: pointer;
-    margin-left: 20px;
+    margin-left: 15px;
 
     &:hover {
       background: rgba(255, 255, 255, 0.1);
@@ -127,10 +266,41 @@
       BoxContainer,
       SelectedContainer,
       ListContainer,
+      MainButton,
+      ButtonContainer,
+      DotItem,
       ListItem,
+      CenterBox,
       Icon,
+      CenterPageContainer,
+      PageWrapper,
+      OptionsContainer,
+      ExpandedListItem,
+      TitleContainer,
       IconContainer,
       EmptyText,
+      BoxTitle,
+      Divider,
+    },
+    computed: {
+      hasComponent() {
+        return this.optionsList.some((item) => item.component)
+      },
+    },
+    methods: {
+      toggleElement(type) {
+        this.limitedOptions = this.optionsList.map((item) => {
+          if (item.type === type) {
+            item.open = !item.open
+          } else item.open = false
+
+          return item
+        })
+      },
+      expandOptions() {
+        this.expanded = !this.expanded
+        this.limitedOptions = this.optionsList
+      },
     },
     props: {
       optionsList: {
@@ -141,5 +311,21 @@
         default: 0,
       },
     },
+    mounted() {
+      this.limitedOptions = this.optionsList
+        .map((item) => {
+          return { ...item, open: false }
+        })
+        .filter((item) => !item.component)
+        .slice(0, this.optionLimit)
+    },
+    data() {
+      return {
+        //maximum number of options to display, if more than 4, display a 'more' option
+        optionLimit: 4,
+        expanded: false,
+        limitedOptions: [],
+      }
+    },
   }
 </script>

package/src/components/roundTabs/index.vue

@@ -1,103 +0,0 @@
-<template>
-  <Container>
-    <RoundedTabLeft
-      :background-color="backgroundColor"
-      :border-radius="borderRadius"
-    />
-    <Tab
-      :background-color="backgroundColor"
-      :border-radius="borderRadius"
-      :height="height"
-      :width="width"
-    >
-      <slot></slot>
-    </Tab>
-    <RoundedTabRight
-      :background-color="backgroundColor"
-      :border-radius="borderRadius"
-    />
-  </Container>
-</template>
-<script>
-  import styled from 'vue3-styled-components'
-
-  const Container = styled.div`
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  `
-  const RoundedTabLeft = styled('div', {
-    backgroundColor: String,
-    borderRadius: String,
-  })`
-    position:absolute;
-    bottom:0;
-    left:-${(prop) => prop.borderRadius}
-    background-color: ${(prop) => prop.backgroundColor};
-    width: ${(prop) => prop.borderRadius};
-    height: ${(prop) => prop.borderRadius};
-    -webkit-mask-image: radial-gradient(
-      circle at top left,
-      transparent 71%,
-      black 71%
-    );
-  `
-  const RoundedTabRight = styled('div', {
-    backgroundColor: String,
-    borderRadius: String,
-  })`
-  position:absolute;
-  bottom:0;
-    right:-${(prop) => prop.borderRadius}
-    background-color: ${(prop) => prop.backgroundColor};
-    width: ${(prop) => prop.borderRadius};
-    height: ${(prop) => prop.borderRadius};
-    -webkit-mask-image: radial-gradient(
-      circle at top right,
-      transparent 71%,
-      black 71%
-    );`
-  const Tab = styled('div', {
-    width: String,
-    height: String,
-    backgroundColor: String,
-    borderRadius: String,
-  })`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: ${(prop) => prop.backgroundColor};
-    width: ${(prop) => prop.width};
-    height: ${(prop) => prop.height};
-    border-radius: ${(prop) => prop.borderRadius} ${(prop) => prop.borderRadius}
-      0 0;
-  `
-  export default {
-    name: 'SelectedOptions',
-    components: {
-      Container,
-      Tab,
-      RoundedTabLeft,
-      RoundedTabRight,
-    },
-    props: {
-      height: {
-        required: false,
-        default: '40px',
-      },
-      width: {
-        required: false,
-        default: '200px',
-      },
-      backgroundColor: {
-        required: false,
-        default: 'blue',
-      },
-      borderRadius: {
-        required: false,
-        default: '20px',
-      },
-    },
-  }
-</script>