@eturnity/eturnity_reusable_components 7.2.2-EPDM-8441.0 → 7.4.0-EPDM-7260.1

package/src/components/selectedOptions/index.vue

@@ -0,0 +1,135 @@
+<template>
+  <page-container>
+    <box-container>
+      <selected-container
+        >{{ numberSelected }} {{ $gettext('selected') }}</selected-container
+      >
+      <list-container>
+        <list-item
+          v-for="item in optionsList"
+          :key="item.type"
+          :hoverColor="item.hoverColor"
+          @click="$emit('on-' + item.type)"
+        >
+          {{ item.name }}
+        </list-item>
+      </list-container>
+      <icon-container @click="$emit('on-close')">
+        <icon
+          name="close_for_modals,_tool_tips"
+          color="white"
+          size="14px"
+          cursor="pointer"
+        />
+      </icon-container>
+    </box-container>
+  </page-container>
+</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 'vue-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;
+  }
+`
+
+export default {
+  name: 'selected-options',
+  components: {
+    PageContainer,
+    BoxContainer,
+    SelectedContainer,
+    ListContainer,
+    ListItem,
+    Icon,
+    IconContainer
+  },
+  props: {
+    optionsList: {
+      required: true
+    },
+    numberSelected: {
+      required: true,
+      default: 0
+    }
+  }
+}
+</script>

package/src/components/sideMenu/index.vue

@@ -1,270 +1,266 @@
-<template>
-  <page-container :isLoading="!tabsData.length">
-    <spinner-container v-if="!tabsData.length">
-      <spinner />
-    </spinner-container>
-    <list-container v-else>
-      <template v-for="(item, idx) in tabsData">
-        <list-item
-          v-if="!item.children"
-          :key="idx"
-          :data-id="`sub_menu_settings_${item.key}`"
-          :isActive="activeTab === item.key"
-          @click="$emit('tab-click', { activeKey: item.key })"
-        >
-          <icon-container :isActive="activeTab === item.key">
-            <icon :name="item.icon" color="#fff" cursor="pointer" size="18px" />
-          </icon-container>
-          <list-text>{{ $gettext(item.label) }}</list-text>
-        </list-item>
-        <collapse-wrapper v-else :key="idx + item.key">
-          <collapse-container
-            :data-id="`sub_menu_settings_${item.key}`"
-            @click="toggleActiveDropdown(item.key)"
-          >
-            <icon-container :isActive="activeParentTab === item.key">
-              <icon
-                :name="item.icon"
-                color="#fff"
-                cursor="pointer"
-                size="18px"
-              />
-            </icon-container>
-            <list-text>{{ $gettext(item.label) }}</list-text>
-            <arrow-container>
-              <icon
-                :name="activeDropdown === item.key ? 'arrow_up' : 'arrow_down'"
-                color="white"
-                size="10px"
-              />
-            </arrow-container>
-          </collapse-container>
-          <template v-if="activeDropdown === item.key">
-            <sub-router
-              v-for="subItem in item.children"
-              :key="subItem.key"
-              :isActive="activeTab === subItem.key"
-              :data-id="`sub_menu_settings_${subItem.key}`"
-              @click="
-                $emit('tab-click', {
-                  activeKey: subItem.key,
-                  parentKey: item.key
-                })
-              "
-            >
-              {{ $gettext(subItem.label) }}
-            </sub-router>
-          </template>
-        </collapse-wrapper>
-      </template>
-    </list-container>
-    <bottom-section v-if="hasLogout">
-      <icon-container
-        :isActive="false"
-        :isButton="true"
-        data-id="button_settings_logout"
-        @click="$emit('on-logout')"
-      >
-        <rotate-icon
-          name="initial_situation"
-          color="#fff"
-          cursor="pointer"
-          size="18px"
-        />
-      </icon-container>
-      <app-version>{{ appVersion }}</app-version>
-    </bottom-section>
-  </page-container>
-</template>
-
-<script>
-import styled from 'vue-styled-components'
-import Icon from '../icon'
-import Spinner from '../spinner'
-
-const PageAttrs = { isLoading: Boolean }
-const PageContainer = styled('div', PageAttrs)`
-  background-color: ${(props) =>
-    props.isLoading ? props.theme.colors.white : props.theme.colors.grey6};
-  padding: 14px 12px;
-  min-width: 220px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-`
-
-const ListContainer = styled.div`
-  display: grid;
-  grid-gap: 6px;
-`
-
-const IconAttrs = { isActive: Boolean, isButton: Boolean }
-
-const ListItem = styled('div', IconAttrs)`
-  display: grid;
-  align-items: center;
-  grid-template-columns: auto 1fr;
-  grid-gap: 20px;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 6px;
-  background-color: ${(props) =>
-    props.isActive ? 'rgba(255, 255, 255, 0.1)' : ''};
-
-  :hover {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-`
-
-const ListText = styled.div`
-  font-size: 16px;
-  font-weight: 700;
-  color: ${(props) => props.theme.colors.white};
-`
-
-const IconContainer = styled('div', IconAttrs)`
-  display: grid;
-  align-items: center;
-  justify-items: center;
-  width: 32px;
-  height: 32px;
-  background-color: ${(props) =>
-    props.isActive ? props.theme.colors.red : 'rgba(255, 255, 255, 0.2)'};
-  border-radius: 6px;
-
-  ${({ isButton = false }) =>
-    isButton &&
-    `
-  cursor: pointer;
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.3);
-  }
-  `}
-`
-
-const SpinnerContainer = styled.div`
-  margin-top: 30px;
-`
-
-const BottomSection = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`
-
-const RotateIcon = styled(Icon)`
-  transform: rotate(-90deg);
-`
-
-const AppVersion = styled.p`
-  font-size: 11px;
-  line-height: 13px;
-  color: ${(props) => props.theme.colors.white};
-  margin-right: 6px;
-`
-
-const SubRouter = styled('div', IconAttrs)`
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 10px;
-  align-items: center;
-  justify-items: flex-start;
-  cursor: pointer;
-  margin-left: 65px;
-  padding: 8px;
-  border-radius: 6px;
-  color: ${(props) => props.theme.colors.white};
-  font-weight: 700;
-  ${({ isActive }) =>
-    isActive &&
-    `
-    background: rgba(255, 255, 255, 0.1);
-  `}
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.1);
-  }
-`
-
-const CollapseContainer = styled.div`
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  grid-gap: 20px;
-  padding: 4px;
-  border-radius: 6px;
-  align-items: center;
-  cursor: pointer;
-  &:hover {
-    background: rgba(255, 255, 255, 0.1);
-  }
-`
-
-const CollapseWrapper = styled.div`
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 10px;
-  user-select: none;
-  margin-bottom: 2px;
-`
-
-const ArrowContainer = styled.div`
-  padding-bottom: 5px;
-`
-
-export default {
-  name: 'SideMenu',
-  components: {
-    PageContainer,
-    ListContainer,
-    ListItem,
-    ListText,
-    Icon,
-    IconContainer,
-    Spinner,
-    SpinnerContainer,
-    BottomSection,
-    RotateIcon,
-    AppVersion,
-    CollapseWrapper,
-    CollapseContainer,
-    SubRouter,
-    ArrowContainer
-  },
-  data() {
-    return {
-      activeDropdown: null
-    }
-  },
-  mounted() {
-    this.activeDropdown = this.activeParentTab
-  },
-  props: {
-    tabsData: {
-      required: true
-    },
-    activeTab: {
-      required: true
-    },
-    activeParentTab: {
-      required: false
-    },
-    hasLogout: {
-      required: false,
-      default: true
-    },
-    appVersion: {
-      required: false,
-      type: String
-    }
-  },
-  methods: {
-    toggleActiveDropdown(value) {
-      if (this.activeDropdown === value) {
-        this.activeDropdown = null
-      } else {
-        this.activeDropdown = value
-      }
-    }
-  }
-}
-</script>
+<template>
+  <page-container :isLoading="!tabsData.length">
+    <spinner-container v-if="!tabsData.length">
+      <spinner />
+    </spinner-container>
+    <list-container v-else>
+      <template v-for="(item, idx) in tabsData">
+        <list-item
+          v-if="!item.children"
+          :key="idx"
+          :data-id="`sub_menu_settings_${item.key}`"
+          :isActive="activeTab === item.key"
+          @click="$emit('tab-click', { activeKey: item.key })"
+        >
+          <icon-container :isActive="activeTab === item.key">
+            <icon :name="item.icon" color="#fff" cursor="pointer" size="18px" />
+          </icon-container>
+          <list-text>{{ $gettext(item.label) }}</list-text>
+        </list-item>
+        <collapse-wrapper v-else :key="idx + item.key">
+          <collapse-container @click="toggleActiveDropdown(item.key)">
+            <icon-container :isActive="activeParentTab === item.key">
+              <icon
+                :name="item.icon"
+                color="#fff"
+                cursor="pointer"
+                size="18px"
+              />
+            </icon-container>
+            <list-text>{{ $gettext(item.label) }}</list-text>
+            <arrow-container>
+              <icon
+                :name="activeDropdown === item.key ? 'arrow_up' : 'arrow_down'"
+                color="white"
+                size="10px"
+              />
+            </arrow-container>
+          </collapse-container>
+          <template v-if="activeDropdown === item.key">
+            <sub-router
+              v-for="subItem in item.children"
+              :key="subItem.key"
+              :isActive="activeTab === subItem.key"
+              @click="
+                $emit('tab-click', {
+                  activeKey: subItem.key,
+                  parentKey: item.key
+                })
+              "
+            >
+              {{ $gettext(subItem.label) }}
+            </sub-router>
+          </template>
+        </collapse-wrapper>
+      </template>
+    </list-container>
+    <bottom-section v-if="hasLogout">
+      <icon-container
+        :isActive="false"
+        :isButton="true"
+        data-id="button_settings_logout"
+        @click="$emit('on-logout')"
+      >
+        <rotate-icon
+          name="initial_situation"
+          color="#fff"
+          cursor="pointer"
+          size="18px"
+        />
+      </icon-container>
+      <app-version>{{ appVersion }}</app-version>
+    </bottom-section>
+  </page-container>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+import Icon from '../icon'
+import Spinner from '../spinner'
+
+const PageAttrs = { isLoading: Boolean }
+const PageContainer = styled('div', PageAttrs)`
+  background-color: ${(props) =>
+    props.isLoading ? props.theme.colors.white : props.theme.colors.grey6};
+  padding: 14px 12px;
+  min-width: 220px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`
+
+const ListContainer = styled.div`
+  display: grid;
+  grid-gap: 6px;
+`
+
+const IconAttrs = { isActive: Boolean, isButton: Boolean }
+
+const ListItem = styled('div', IconAttrs)`
+  display: grid;
+  align-items: center;
+  grid-template-columns: auto 1fr;
+  grid-gap: 20px;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 6px;
+  background-color: ${(props) =>
+    props.isActive ? 'rgba(255, 255, 255, 0.1)' : ''};
+
+  :hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+`
+
+const ListText = styled.div`
+  font-size: 16px;
+  font-weight: 700;
+  color: ${(props) => props.theme.colors.white};
+`
+
+const IconContainer = styled('div', IconAttrs)`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  width: 32px;
+  height: 32px;
+  background-color: ${(props) =>
+    props.isActive ? props.theme.colors.red : 'rgba(255, 255, 255, 0.2)'};
+  border-radius: 6px;
+
+  ${({ isButton = false }) =>
+    isButton &&
+    `
+  cursor: pointer;
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+  `}
+`
+
+const SpinnerContainer = styled.div`
+  margin-top: 30px;
+`
+
+const BottomSection = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`
+
+const RotateIcon = styled(Icon)`
+  transform: rotate(-90deg);
+`
+
+const AppVersion = styled.p`
+  font-size: 11px;
+  line-height: 13px;
+  color: ${(props) => props.theme.colors.white};
+  margin-right: 6px;
+`
+
+const SubRouter = styled('div', IconAttrs)`
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 10px;
+  align-items: center;
+  justify-items: flex-start;
+  cursor: pointer;
+  margin-left: 65px;
+  padding: 8px;
+  border-radius: 6px;
+  color: ${(props) => props.theme.colors.white};
+  font-weight: 700;
+  ${({ isActive }) =>
+    isActive &&
+    `
+    background: rgba(255, 255, 255, 0.1);
+  `}
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+`
+
+const CollapseContainer = styled.div`
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-gap: 20px;
+  padding: 4px;
+  border-radius: 6px;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+`
+
+const CollapseWrapper = styled.div`
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 10px;
+  user-select: none;
+  margin-bottom: 2px;
+`
+
+const ArrowContainer = styled.div`
+  padding-bottom: 5px;
+`
+
+export default {
+  name: 'SideMenu',
+  components: {
+    PageContainer,
+    ListContainer,
+    ListItem,
+    ListText,
+    Icon,
+    IconContainer,
+    Spinner,
+    SpinnerContainer,
+    BottomSection,
+    RotateIcon,
+    AppVersion,
+    CollapseWrapper,
+    CollapseContainer,
+    SubRouter,
+    ArrowContainer
+  },
+  data() {
+    return {
+      activeDropdown: null
+    }
+  },
+  mounted() {
+    this.activeDropdown = this.activeParentTab
+  },
+  props: {
+    tabsData: {
+      required: true
+    },
+    activeTab: {
+      required: true
+    },
+    activeParentTab: {
+      required: false
+    },
+    hasLogout: {
+      required: false,
+      default: true
+    },
+    appVersion: {
+      required: false,
+      type: String
+    }
+  },
+  methods: {
+    toggleActiveDropdown(value) {
+      if (this.activeDropdown === value) {
+        this.activeDropdown = null
+      } else {
+        this.activeDropdown = value
+      }
+    }
+  }
+}
+</script>