x25 2.9.2 → 3.0.0

package/src/style/sidebar/_dark-theme.scss

@@ -0,0 +1,77 @@
+
+.dark-theme {
+  .sidebar-wrapper {
+    background: #31353d;
+
+    .sidebar-brand {
+      i {
+        color: #b8bfce;
+      }
+    }
+
+    .sidebar-footer {
+      background: #3a3f48;
+      box-shadow: 0 -1px 5px #282c33;
+      border-top: 1px solid #464a52;
+
+      a {
+        color: #818896;
+
+        i {
+          color: #b8bfce;
+        }
+      }
+    }
+
+    .sidebar-menu {
+      ul li {
+        a {
+          color: #818896;
+
+          i {
+            background: #3a3f48;
+          }
+        }
+
+        &:hover > a {
+          color: #b8bfce;
+
+          i {
+            color: #16c7ff;
+            text-shadow: 0 0 10px rgba(22, 199, 255, 0.5);
+          }
+        }
+      }
+
+      border-top: 1px solid #3a3f48;
+
+      .one-page a.active i,
+      .sidebar-dropdown.active a i {
+        color: #16c7ff;
+        text-shadow: 0 0 10px rgba(22, 199, 255, 0.5);
+      }
+
+      .sidebar-dropdown div {
+        background: #3a3f48;
+      }
+
+      .header-menu span {
+        color: #6c7b88;
+      }
+
+      .sidebar-dropdown.active > a {
+        color: #b8bfce;
+      }
+    }
+
+    .sidebar-dropdown .sidebar-submenu li a:hover::before {
+      color: #16c7ff;
+      text-shadow: 0 0 10px rgba(22, 199, 255, 0.5);
+    }
+
+    .one-page a.active,
+    .sidebar-dropdown .sidebar-submenu li a.active {
+      color: #bdbdbd;
+    }
+  }
+}

package/src/style/sidebar/_scroll.scss

@@ -0,0 +1,37 @@
+::-webkit-scrollbar {
+  width: 5px;
+  height: 7px;
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+::-webkit-scrollbar-button {
+  width: 0;
+  height: 0;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c7c7c7;
+  border: 0 none #fff;
+  border-radius: 10px;
+
+  &:hover,
+  &:active {
+    background: #525965;
+  }
+}
+
+// stylelint-disable-next-line
+::-webkit-scrollbar-track {
+  background: transparent;
+  border: 0 none #fff;
+  border-radius: 50px;
+  border-radius: 10px;
+
+  &:hover,
+  &:active {
+    background: transparent;
+  }
+}

package/src/style/sidebar/_structure.scss

@@ -0,0 +1,299 @@
+%animated {
+  -webkit-transition: all 0.3s ease;
+  -moz-transition: all 0.3s ease;
+  -ms-transition: all 0.3s ease;
+  -o-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+@keyframes swing {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  10% {
+    transform: rotate(10deg);
+  }
+
+  30% {
+    transform: rotate(0deg);
+  }
+
+  40% {
+    transform: rotate(-10deg);
+  }
+
+  50% {
+    transform: rotate(0deg);
+  }
+
+  60% {
+    transform: rotate(5deg);
+  }
+
+  70% {
+    transform: rotate(0deg);
+  }
+
+  80% {
+    transform: rotate(-5deg);
+  }
+
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes sonar {
+  0% {
+    transform: scale(0.9);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+.page-wrapper {
+  height: 100vh;
+
+  .theme {
+    width: 40px;
+    height: 40px;
+    display: inline-block;
+    border-radius: 4px;
+    margin: 2px;
+
+    &.dark-theme {
+      background: #1e2229;
+    }
+  }
+
+  .sidebar-wrapper {
+    width: 240px;
+    height: 100%;
+    max-height: 100%;
+    position: fixed;
+    top: 0;
+    z-index: 999;
+
+    .sidebar-footer {
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+      display: flex;
+
+      > a {
+        flex-grow: 1;
+        text-align: center;
+        height: 30px;
+        line-height: 30px;
+        position: relative;
+
+        .notification {
+          position: absolute;
+          top: 0;
+        }
+      }
+    }
+
+    .sidebar-content {
+      max-height: calc(100% - 30px);
+      height: calc(100% - 30px);
+      overflow-y: auto;
+      position: relative;
+
+      .sidebar-brand {
+        padding: 10px 20px;
+        display: flex;
+        align-items: center;
+
+        .sidework {
+          text-transform: uppercase;
+          font-weight: bold;
+          flex-grow: 1;
+
+          @extend %animated;
+        }
+
+        #close-sidebar {
+          cursor: pointer;
+          font-size: 20px;
+        }
+      }
+
+      ul {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+      }
+
+      a {
+        text-decoration: none;
+      }
+
+      .sidebar-menu {
+        padding-bottom: 10px;
+
+        ul li a {
+          font-size: 15px;
+          font-weight: 500;
+          -webkit-transition: all 0.3s ease;
+          -moz-transition: all 0.3s ease;
+          -ms-transition: all 0.3s ease;
+          -o-transition: all 0.3s ease;
+          transition: all 0.3s ease;
+          display: inline-block;
+          width: 100%;
+          text-decoration: none;
+          position: relative;
+          padding: 8px 30px 8px 20px;
+
+          span {
+            &.label,
+            &.badge {
+              float: right;
+              margin-top: 8px;
+              margin-left: 5px;
+            }
+          }
+
+          i {
+            @extend %animated;
+
+            margin-right: 10px;
+            font-size: 12px;
+            width: 30px;
+            height: 30px;
+            line-height: 30px;
+            text-align: center;
+            border-radius: 4px;
+          }
+
+          &:hover > i::before {
+            display: inline-block;
+            animation: swing ease-in-out 0.5s 1 alternate;
+          }
+
+          .badge-sonar {
+            display: inline-block;
+            background: #980303;
+            border-radius: 50%;
+            height: 8px;
+            width: 8px;
+            position: absolute;
+            top: 0;
+
+            &::after {
+              content: "";
+              position: absolute;
+              top: 0;
+              left: 0;
+              border: 2px solid #980303;
+              opacity: 0;
+              border-radius: 50%;
+              width: 100%;
+              height: 100%;
+              animation: sonar 1.5s infinite;
+            }
+          }
+        }
+
+        .header-menu span {
+          font-weight: bold;
+          font-size: 14px;
+          padding: 15px 20px 5px 20px;
+          display: inline-block;
+        }
+
+        .sidebar-dropdown {
+          font-weight: 500;
+          font-size: 15px;
+
+          > a::after {
+            @extend %animated;
+
+            font-family: "FontAwesome", sans-serif;
+            font-weight: 900;
+            content: "\f105";
+            font-style: normal;
+            display: inline-block;
+            font-variant: normal;
+            text-rendering: auto;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            text-align: center;
+            background: 0 0;
+            position: absolute;
+            right: 15px;
+            top: 14px;
+          }
+
+          .sidebar-submenu {
+            display: none;
+
+            li a {
+              .badge,
+              .label {
+                float: right;
+                margin-top: 0;
+              }
+            }
+
+            ul {
+              padding: 5px 0;
+            }
+
+            li {
+              padding-left: 25px;
+              font-size: 12px;
+
+              a::before {
+                @extend %animated;
+
+                content: "\f1db";
+                font-family: "FontAwesome", sans-serif;
+                font-weight: 400;
+                font-style: normal;
+                display: inline-block;
+                text-align: center;
+                text-decoration: none;
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                margin-right: 10px;
+                font-size: 10px;
+              }
+
+              a.active::before {
+                content: "\f111";
+                font-family: "FontAwesome", sans-serif;
+                font-weight: 400;
+                font-style: normal;
+                display: inline-block;
+                text-align: center;
+                text-decoration: none;
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                margin-right: 10px;
+                font-size: 10px;
+              }
+            }
+          }
+
+          &.active > a::after {
+            transform: rotate(90deg);
+            right: 17px;
+          }
+        }
+      }
+
+      -webkit-transition: all 0.3s ease;
+      -moz-transition: all 0.3s ease;
+      -ms-transition: all 0.3s ease;
+      -o-transition: all 0.3s ease;
+      transition: all 0.3s ease;
+    }
+  }
+}

package/src/style/sidebar.scss

@@ -0,0 +1,4 @@
+@import "./sidebar/_structure";
+@import "./sidebar/_animations";
+@import "./sidebar/_scroll";
+@import "./sidebar/_dark-theme";

package/src/types.js

@@ -0,0 +1,31 @@
+// @flow
+/* eslint-disable no-use-before-define */
+
+import type { List as ListType, Map as MapType } from "immutable";
+
+export type State = any;
+
+export type Action = any;
+
+export type ErrorType = string;
+export type ThunkAction = (dispatch: Dispatch, getState: GetState) => any;
+export type Dispatch = (action: any | ThunkAction | PromiseAction) => any;
+export type GetState = () => State;
+export type PromiseAction = Promise<any>;
+
+export type ModalActionType = string;
+
+export type NullUInt = {
+  Valid: bool;
+  UInt: number;
+};
+
+export type ModalPayload = {
+  modalType: ModalActionType;
+  modalProps: any;
+};
+
+export type NormalizedResult = {
+  entities : MapType<string, any>;
+  result : ListType<string>;
+};

package/src/utility/calendar.js

@@ -0,0 +1,39 @@
+// @flow
+
+import moment from "moment";
+import { toTitle } from "./strings";
+
+const
+  now = new Date(),
+  currentMonth = now.getMonth(),
+  currentYear = now.getFullYear();
+
+export const calendar = {
+  month : currentMonth,
+  year  : currentYear,
+
+  currentMonth: {
+    firstDay: new Date(Date.UTC(currentYear,
+      currentMonth,
+      1)).toISOString(),
+    lastDay: new Date(Date.UTC(currentYear,
+      currentMonth + 1,
+      0)).toISOString(),
+  },
+};
+
+export const newDate = (year : any, month: any, day? : any = 1) => (
+  new Date(Date.UTC(Number(year),
+    Number(month),
+    day))
+);
+
+export const monthYearToDate = (data : { Year : string, Month : string }) => ({
+  ...data,
+  Date: newDate(data.Year,
+    data.Month),
+});
+
+export const getMonthName = (data : Date) => (
+  toTitle(moment.months(data.getMonth()))
+);

package/src/utility/date.js

@@ -0,0 +1,100 @@
+// @flow
+/* eslint-disable */
+
+type MonthAndYear =  { year: string, month: string };
+
+import { isValidDate } from "./validation/validate";
+
+const ten = 10;
+
+export const getPreviousMonth = (year : string, month: string) => {
+  if (month === "0") {
+    return {
+      previousMonth : "11",
+      previousYear  : String(Number(year) - 1),
+    };
+  }
+
+  return {
+    previousMonth : String(Number(month) - 1),
+    previousYear  : String(year),
+  };
+};
+
+export const getLastMonthAndYear = () : MonthAndYear => {
+  const
+    currentDate = new Date(),
+    currentYear = String(currentDate.getFullYear()),
+    currentMonth = String(currentDate.getMonth()),
+    { previousMonth, previousYear } = getPreviousMonth(currentYear, currentMonth);
+
+    return {
+      month: previousMonth,
+      year: previousYear,
+    };
+};
+
+// new Date("2016-08-25T00:00:00Z") ---> 25.08.2016
+export const formatDateObject = (date : Date) : string => {
+
+  const dd = date.getDate(),
+    mm = date.getMonth() + 1,
+    yyyy = date.getFullYear(),
+    addZero = (value) => {
+      if (value < ten) {
+        return `0${value}`;
+      }
+
+      return value;
+    },
+    newDD = addZero(dd),
+    newMM = addZero(mm);
+
+  return `${newDD}.${newMM}.${yyyy}`;
+};
+
+// "2016-08-25T00:00:00Z" ---> 25.08.2016
+export const formatDate = (normalizedValue : string) : string => {
+
+  const parts = normalizedValue.split("T");
+
+  if (parts.length !== 2) {
+    return normalizedValue;
+  }
+
+  const dateParts = parts[0].split("-"),
+    nrOfParts = 3;
+
+  if (dateParts.length !== nrOfParts) {
+    return normalizedValue;
+  }
+
+  const [yyyy, mm, dd] = dateParts;
+
+  if (!isValidDate(`${dd}.${mm}.${yyyy}`)) {
+    return normalizedValue;
+  }
+
+  const date = new Date(Number(yyyy), Number(mm) - 1, Number(dd), 0, 0, 0, 0);
+
+  return formatDateObject(date);
+};
+
+// 25.08.2016 ---> 2016-08-25T00:00:00Z
+export const normalizeDate = (currentValue : string) : string => {
+
+  const normalizeCurrent = () : string => {
+    const parts = currentValue.split("."),
+      dd = parts[0],
+      mm = parts[1],
+      yyyy = parts[2];
+
+    return `${yyyy}-${mm}-${dd}T00:00:00Z`;
+  };
+
+  if (isValidDate(currentValue)) {
+    return normalizeCurrent();
+  }
+
+  return currentValue;
+};

package/src/utility/index.js

@@ -0,0 +1,12 @@
+// @flow
+
+export * from "./calendar";
+export * from "./date";
+export * from "./language";
+export * from "./normalize";
+export * from "./numbers";
+export * from "./numeric";
+export * from "./others";
+export * from "./strings";
+export * from "./mql";
+export * from "./validation";

package/src/utility/language.js

@@ -0,0 +1,17 @@
+// @flow
+
+export const language = {
+  message: {
+    failPerform   : "Nu am putut îndeplini sarcina",
+    confirmDelete : "Am șters cu succes",
+    confirmAdd    : "Am adăugat cu succes",
+    confirmUpdate : "Am actualizat datele",
+  },
+  label: {
+    modify       : "Modifică",
+    add          : "Adaugă",
+    remove       : "Șterge",
+    confirmation : "Confirmare",
+    cancel       : "Renunță",
+  },
+};

package/src/utility/mql.js

@@ -0,0 +1,3 @@
+// @flow
+
+export const mql : any = window ? window.matchMedia("(min-width: 800px)") : null;

package/src/utility/normalize-test.js

@@ -0,0 +1,58 @@
+
+import { normalizeArray } from "./normalize";
+
+import * as Immutable from "immutable";
+import * as matchers from "jest-immutable-matchers";
+
+describe("test util/normalize",
+  () => {
+    beforeEach(() => {
+      jest.addMatchers(matchers);
+    });
+
+    const input = [
+      {
+        ID   : 1,
+        Name : "BlaBla 1",
+      },
+      {
+        ID   : 2,
+        Name : "BlaBla 2",
+      },
+      {
+        ID   : 3,
+        Name : "BlaBla 3",
+      },
+    ];
+
+    describe("given an array",
+      () => {
+        const result = normalizeArray(input);
+
+        it("normalizes the entities",
+          () => {
+            expect(result.entities).toEqualImmutable(Immutable.Map({
+              "1": Immutable.Map({
+                ID   : 1,
+                Name : "BlaBla 1",
+              }),
+              "2": Immutable.Map({
+                ID   : 2,
+                Name : "BlaBla 2",
+              }),
+              "3": Immutable.Map({
+                ID   : 3,
+                Name : "BlaBla 3",
+              }),
+            }));
+          });
+        it("normalizes the result",
+          () => {
+            expect(result.result).toEqualImmutable(Immutable.List([
+              "1",
+              "2",
+              "3",
+            ]));
+          });
+      });
+  });