@webitel/ui-sdk 0.1.11 → 0.1.112

package/src/css/main.scss

@@ -1,66 +1,69 @@
-@import "./styleguide/styleguide";
-@import "components/components";
-
-:root {
-  --transition: 0.2s;
-  --border-radius: 5px;
-
-  --box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
-}
-
-@mixin width-fit-content {
-  width: fit-content;
-  width: -moz-fit-content;
-}
-
-html {
-  height: 100%;
-}
-
-body {
-  min-height: 100%;
-  height: 100%;
-  margin: 0;
-  font-family: 'Montserrat Regular', monospace;
-  font-size: 100%;
-}
-
-//main {
-//  min-height: 100%;
-//  height: 100%;
-//}
-
-h1, h2, h3, h4, h5, h6, p {
-  margin: 0;
-  font-weight: normal;
-}
-
-//reset ul styles
-ul {
-  padding: 0;
-  margin: 0;
-  list-style-type: none;
-}
-
-iframe {
-  border: none;
-  outline: none;
-}
-
-button {
-  padding: 0;
-  background: transparent;
-  border: none;
-  outline-color: #000;
-  cursor: pointer;
-}
-
-a {
-  color: #000;
-  text-decoration: none;
-}
-
-.hidden {
-  opacity: 0;
-  pointer-events: none;
+@import 'sizes/sizes';
+@import 'display-helpers/display-helpers';
+@import 'styleguide/styleguide';
+@import 'transitions/transitions';
+@import 'components/components';
+
+:root {
+  --transition: 0.2s;
+  --border-radius: 5px;
+
+  --box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
+}
+
+@mixin width-fit-content {
+  width: fit-content;
+  width: -moz-fit-content;
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  min-height: 100%;
+  height: 100%;
+  margin: 0;
+  font-family: 'Montserrat Regular', monospace;
+  font-size: 100%;
+}
+
+//main {
+//  min-height: 100%;
+//  height: 100%;
+//}
+
+h1, h2, h3, h4, h5, h6, p {
+  margin: 0;
+  font-weight: normal;
+}
+
+//reset ul styles
+ul {
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+}
+
+iframe {
+  border: none;
+  outline: none;
+}
+
+button {
+  padding: 0;
+  background: transparent;
+  border: none;
+  outline-color: #000;
+  cursor: pointer;
+}
+
+a {
+  color: #000;
+  text-decoration: none;
+}
+
+.hidden {
+  opacity: 0;
+  pointer-events: none;
 }

package/src/css/shadows/_shadows.scss

@@ -0,0 +1,7 @@
+:root {
+  --shadow-style-down-50: 0px 0px 1px rgba(0, 0, 0, 0.15), inset 1px 1px 1px rgba(0, 0, 0, 0.05);
+  --shadow-style-down-100: 0px 0px 1px rgba(0, 0, 0, 0.15), inset 1px 1px 1px rgba(0, 0, 0, 0.05), inset 0px 0px 8px rgba(0, 0, 0, 0.1);
+  --shadow-style-up-50: 1px 1px 2px rgba(0, 0, 0, 0.08), inset 1px 1px 1px #FFFFFF, inset -1px -1px 1px rgba(0, 0, 0, 0.05);
+  --shadow-style-up-100: 1px 1px 2px rgba(0, 0, 0, 0.05), -1px -1px 5px #FFFFFF, inset 1px 1px 1px #FFFFFF, inset -1px -1px 3px rgba(0, 0, 0, 0.1);
+  --shadow-style-font: 0px 0px 10px rgba(0, 0, 0, 0.1);
+}

package/src/css/sizes/_sizes.scss

@@ -0,0 +1,2 @@
+@import 'viewport-breakpoints';
+@import 'spacing';

package/src/css/sizes/_spacing.scss

@@ -0,0 +1,17 @@
+//@import './viewport-breakpoints';
+
+:root {
+  --component-padding: 15px;
+  --component-spacing: 15px;
+  --icon-spacing: 10px;
+
+  @media (#{$media} and #{$media-width-sm}) {
+    --component-padding: 10px;
+    --component-spacing: 10px;
+  }
+
+  @media (#{$media} and #{$media-width-xs}) {
+    --component-padding: 10px;
+    --component-spacing: 1px;
+  }
+}

package/src/css/sizes/_viewport-breakpoints.scss

@@ -0,0 +1,20 @@
+/*
+xl: @media only screen and (min-width: $viewport-xl) {}
+lg: @media only screen and (max-width: $viewport-xl) {}
+md: @media only screen and (max-width: $viewport-lg) {}
+sm: @media only screen and (max-width: $viewport-md) {}
+xs: @media only screen and (max-width: $viewport-sm) {}
+ */
+
+$viewport-xl: 1440px;
+$viewport-lg: 1280px;
+$viewport-md: 992px;
+$viewport-sm: 600px;
+
+$media: #{'only screen'};
+$media-width-xl: #{'min-width: '} $viewport-xl;
+$media-width-lg: #{'max-width: '} $viewport-xl;
+$media-width-md: #{'max-width: '} $viewport-lg;
+$media-width-sm: #{'max-width: '} $viewport-md;
+$media-width-xs: #{'max-width: '} $viewport-sm;
+

package/src/css/styleguide/{styleguide.scss → _styleguide.scss}

@@ -1,3 +1,4 @@
-@import './scroll';
-@import '../typography/typography';
-@import '../colors/colors';
+@import './scroll';
+@import '../typography/typography';
+@import '../colors/colors';
+@import '../shadows/shadows';

package/src/css/styleguide/scroll.scss

@@ -1,40 +1,43 @@
-:root {
-  --scrollbar-width: 4px;
-  --scrollbar-thumb-width: 4px;
-  --scrollbar-bg-color: var(--main-ouline-color);
-  --scrollbar-thumb-color: var(--main-accent-color);
-  --scrollbar-border-radius: 7px;
-}
-
-%wt-scrollbar {
-  // scrollbar itself
-  &::-webkit-scrollbar {
-    width: var(--scrollbar-width);
-    height: var(--scrollbar-width);
-    background-color: var(--scrollbar-bg-color);
-    cursor: pointer;
-  }
-
-  // scrollable element
-  &::-webkit-scrollbar-thumb {
-    width: var(--scrollbar-thumb-width);
-    height: var(--scrollbar-thumb-width);
-    background-color: var(--scrollbar-thumb-color);
-    border-radius: var(--scrollbar-border-radius);
-  }
-}
-
-%wt-distant-scrollbar {
-  &::-webkit-scrollbar {
-    width: 14px;
-    height: 18px;
-  }
-  &::-webkit-scrollbar-thumb {
-    height: 2px;
-    border: 4px solid rgba(0, 0, 0, 0);
-    background-clip: padding-box;
-    background-color: var(--scrollbar-thumb-color);
-    border-radius: var(--scrollbar-border-radius);
-   // -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
-  }
-}
+:root {
+  --scrollbar-width: 5px;
+  --scrollbar-height: 5px;
+  --scrollbar-thumb-width: 5px;
+  --scrollbar-bg-color: var(--main-color);
+  --scrollbar-thumb-color: var(--secondary-color);
+  --scrollbar-border-radius: var(--border-radius);
+}
+
+%wt-scrollbar {
+  // scrollbar itself
+  &::-webkit-scrollbar {
+    width: var(--scrollbar-width);
+    height: var(--scrollbar-height);
+    background-color: var(--scrollbar-bg-color);
+    cursor: pointer;
+    border-radius: 50%; // dont overlay borders
+  }
+
+  // scrollable element
+  &::-webkit-scrollbar-thumb {
+    width: var(--scrollbar-thumb-width);
+    height: var(--scrollbar-thumb-height);
+    background-color: var(--scrollbar-thumb-color);
+    border-radius: var(--scrollbar-border-radius);
+  }
+}
+
+%wt-distant-scrollbar {
+  &::-webkit-scrollbar {
+    width: 14px;
+    height: 18px;
+    background-color: var(--scrollbar-bg-color);
+  }
+  &::-webkit-scrollbar-thumb {
+    height: 2px;
+    border: 4px solid rgba(0, 0, 0, 0);
+    background-clip: padding-box;
+    background-color: var(--scrollbar-thumb-color);
+    border-radius: var(--scrollbar-border-radius);
+   // -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
+  }
+}

package/src/css/transitions/_transitions.scss

@@ -0,0 +1 @@
+@import "./fade/fade";

package/src/css/transitions/fade/_fade.scss

@@ -0,0 +1,8 @@
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity var(--transition);
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}

package/src/css/typography/_typography.scss

@@ -1,72 +1,72 @@
-
-%typo-heading-lg {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 24px;
-  }
-  line-height: 30px;
-}
-
-%typo-heading-md {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 20px;
-  }
-  line-height: 30px;
-}
-
-%typo-heading-sm {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 18px;
-  }
-  line-height: 24px;
-}
-
-%typo-strong-lg {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 14px;
-  }
-  line-height: 18px;
-}
-
-%typo-strong-md {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 12px;
-  }
-  line-height: 14px;
-}
-
-%typo-strong-sm {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 10px;
-  }
-  line-height: 12px;
-}
-
-%typo-body-lg {
-  font: {
-    family: 'Montserrat Regular', monospace;
-    size: 14px;
-  }
-  line-height: 18px;
-}
-
-%typo-body-md {
-  font: {
-    family: 'Montserrat Regular', monospace;
-    size: 12px;
-  }
-  line-height: 14px;
-}
-
-%typo-body-sm {
-  font: {
-    family: 'Montserrat Regular', monospace;
-    size: 10px;
-  }
-  line-height: 12px;
-}
+
+%typo-heading-lg {
+  font: {
+    family: 'Montserrat Semi', monospace;
+    size: 24px;
+  }
+  line-height: 30px;
+}
+
+%typo-heading-md {
+  font: {
+    family: 'Montserrat Semi', monospace;
+    size: 20px;
+  }
+  line-height: 30px;
+}
+
+%typo-heading-sm {
+  font: {
+    family: 'Montserrat Semi', monospace;
+    size: 18px;
+  }
+  line-height: 24px;
+}
+
+%typo-strong-lg {
+  font: {
+    family: 'Montserrat Semi', monospace;
+    size: 14px;
+  }
+  line-height: 18px;
+}
+
+%typo-strong-md {
+  font: {
+    family: 'Montserrat Semi', monospace;
+    size: 12px;
+  }
+  line-height: 14px;
+}
+
+%typo-strong-sm {
+  font: {
+    family: 'Montserrat Semi', monospace;
+    size: 10px;
+  }
+  line-height: 12px;
+}
+
+%typo-body-lg {
+  font: {
+    family: 'Montserrat Regular', monospace;
+    size: 14px;
+  }
+  line-height: 18px;
+}
+
+%typo-body-md {
+  font: {
+    family: 'Montserrat Regular', monospace;
+    size: 12px;
+  }
+  line-height: 14px;
+}
+
+%typo-body-sm {
+  font: {
+    family: 'Montserrat Regular', monospace;
+    size: 10px;
+  }
+  line-height: 12px;
+}

package/src/enums/AgentStatus/AgentStatus.enum.js

@@ -0,0 +1,6 @@
+export default Object.freeze({
+  ONLINE: 'online',
+  PAUSE: 'pause',
+  OFFLINE: 'offline',
+  BREAK_OUT: 'break_out',
+});

package/src/enums/WebitelApplications/AdminSections.enum.js

@@ -0,0 +1,41 @@
+/* eslint-disable no-multi-spaces */
+
+const AdminSections = Object.freeze({
+  // DIRECTORY
+  LICENSE: 'license',                   // permissions: add
+  USERS: 'users',                       // scope: users
+  DEVICES: 'devices',                   // scope: devices
+
+  // ROUTING
+  FLOW: 'flow',                          // scope: flow
+  DIALPLAN: 'dialplan',                  // scope: acr_routing
+  GATEWAYS: 'gateways',                  // scope: gateways
+  CHAT_GATEWAYS: 'chat-gateways',        // scope: chats
+
+  // LOOKUPS
+  BLACKLIST: 'blacklist',                // scope: cc_list
+  REGIONS: 'regions',                    // scope: lookups
+  CALENDARS: 'calendars',                // scope: calendars
+  COMMUNICATIONS: 'communications',      // scope: lookups
+  PAUSE_CAUSE: 'pause-cause',            // scope: lookups
+  MEDIA: 'media',                        // scope: media_file
+
+  // CONTACT CENTER
+  SKILLS: 'skills',                     // scope: lookups
+  AGENTS: 'agents',                      // scope: cc_agent
+  BUCKETS: 'buckets',                    // scope: cc_bucket
+  QUEUES: 'queues',                      // scope: cc_queue
+  MEMBERS: 'members',                    // scope: cc_queue
+  RESOURCE_GROUPS: 'resource-groups',    // scope: cc_resource_group
+  RESOURCES: 'resources',               // scope: cc_resource
+  TEAMS: 'teams',                       // scope: cc_team
+
+  // INTEGRATIONS
+  STORAGE: 'storage',                   // scope: storage_profile
+
+  // PERMISSIONS
+  OBJECTS: 'objects',                // permissions: add
+  ROLES: 'roles',                   // scope: roles
+});
+
+export default AdminSections;

package/src/enums/WebitelApplications/SupervisorSections.enum.js

@@ -0,0 +1,7 @@
+const SupervisorSections = Object.freeze({
+  QUEUES: 'queues',
+  AGENTS: 'agents',
+  ACTIVE_CALLS: 'activeCalls',
+});
+
+export default SupervisorSections;

package/src/enums/WebitelApplications/WebitelApplications.enum.js

@@ -0,0 +1,10 @@
+const WebitelApplications = Object.freeze({
+  ADMIN: 'admin',
+  AGENT: 'agent',
+  SUPERVISOR: 'supervisor',
+  HISTORY: 'history',
+  AUDIT: 'audit',
+  ANALYTICS: 'grafana',
+});
+
+export default WebitelApplications;

package/src/locale/en/en.js

@@ -1,12 +1,99 @@
+import AdminSections from '../../enums/WebitelApplications/AdminSections.enum';
+import SupervisorSections from '../../enums/WebitelApplications/SupervisorSections.enum';
+import WebitelApplications from '../../enums/WebitelApplications/WebitelApplications.enum';
+
 export default {
+  // describes reusable buttons, actions, default titles, and other ui elements
   reusable: {
+    total: 'Total',
+    ok: 'Ok',
+    save: 'Save',
+    close: 'Close',
     add: 'Add',
     cancel: 'Cancel',
+    import: 'Import',
+    export: 'Export',
+    true: 'True',
+    delete: 'Delete',
+    search: 'Search',
+    open: 'Open',
+    name: 'Name',
+    lang: {
+      en: 'English',
+      ru: 'Русский',
+      ua: 'Українська',
+    },
+  },
+  // date-related texts
+  date: {
+    sec: 'Sec',
+  },
+  // describes Webitel system entities
+  objects: {
+    team: 'Team | Teams',
+    supervisor: 'Supervisor | Supervisors',
+    auditor: 'Auditor | Auditors',
+    region: 'Region | Regions',
+  },
+  // describes Webitel FRONTEND applications + their navs
+  WebitelApplications: {
+    [WebitelApplications.AGENT]: { name: 'Agent Workspace' },
+    [WebitelApplications.AUDIT]: { name: 'Audit' },
+    [WebitelApplications.HISTORY]: { name: 'Call History' },
+    [WebitelApplications.ANALYTICS]: { name: 'Data Visualisation Tool' },
+    [WebitelApplications.SUPERVISOR]: {
+      name: 'Supervisor Workspace',
+      sections: {
+        [SupervisorSections.QUEUES]: 'Queues',
+        [SupervisorSections.AGENTS]: 'Agents',
+        [SupervisorSections.ACTIVE_CALLS]: 'Active calls',
+      },
+    },
+    [WebitelApplications.ADMIN]: {
+      name: 'Admin',
+      sections: {
+        [AdminSections.USERS]: 'Users',
+        [AdminSections.LICENSE]: 'Licenses',
+        [AdminSections.DEVICES]: 'Devices',
+        [AdminSections.FLOW]: 'Flow',
+        [AdminSections.DIALPLAN]: 'Dialplan',
+        [AdminSections.GATEWAYS]: 'Gateways',
+        [AdminSections.CHAT_GATEWAYS]: 'Chat gateways',
+        [AdminSections.SKILLS]: 'Agent skills',
+        [AdminSections.BUCKETS]: 'Buckets',
+        [AdminSections.MEDIA]: 'Media files',
+        [AdminSections.BLACKLIST]: 'Call list',
+        [AdminSections.CALENDARS]: 'Calendars',
+        [AdminSections.REGIONS]: 'Location',
+        [AdminSections.COMMUNICATIONS]: 'Communication types',
+        [AdminSections.PAUSE_CAUSE]: 'Agent statuses',
+        [AdminSections.AGENTS]: 'Agents',
+        [AdminSections.TEAMS]: 'Teams',
+        [AdminSections.RESOURCES]: 'Resources',
+        [AdminSections.RESOURCE_GROUPS]: 'Resource groups',
+        [AdminSections.QUEUES]: 'Queues',
+        [AdminSections.STORAGE]: 'Storage',
+        [AdminSections.MEDIA]: 'Media',
+        [AdminSections.BLACKLIST]: 'Call lists',
+        [AdminSections.ROLES]: 'Roles',
+        [AdminSections.OBJECTS]: 'Objects',
+      },
+    },
   },
   validation: {
     required: 'Field is required',
     numeric: 'Should be numeric',
     email: 'Should look like email',
+    gatewayHostValidator: 'Should look like IPv4 or FQDN',
+    sipAccountValidator: 'Should look like SIP account',
+    ipValidator: 'Should look like IPv4',
+    macValidator: 'Should look like MAC',
+    minValue: 'Value should be not less than',
+    maxValue: 'Value should be not much than',
+    sameAs: 'Incorrect password',
+    requiredArrayValue: 'Array should not be empty',
+    minLength: 'Quantity of characters should not be less than',
+    url: 'Should look like url',
   },
   webitelUI: {
     timepicker: {
@@ -23,5 +110,53 @@ export default {
       prev: 'Previous',
       next: 'Next',
     },
+    appNavigator: {
+      title: 'Webitel applications',
+      admin: 'Admin',
+      agent: 'Agent Workspace',
+      supervisor: 'Supervisor Workspace',
+      audit: 'Audit',
+      history: 'Call History',
+      grafana: 'Grafana',
+    },
+    headerActions: {
+      account: 'Account',
+      docs: 'Docs',
+      settings: 'Settings',
+      logout: 'Logout',
+      buildVersion: 'Build version',
+    },
+    tableActions: {
+      filterReset: 'Reset filters',
+      columnSelect: 'Select columns',
+      refreshTable: 'Refresh table',
+      expandFilters: 'Expand filters',
+    },
+    tableColumnSelect: {
+      title: 'Select visible columns',
+    },
+    statusSelect: {
+      online: 'Online',
+      pause: 'Pause',
+      offline: 'Offline',
+      breakOut: 'Break Out',
+    },
+    table: {
+      tableCells: {
+        deleteActionHint: 'Delete',
+        editActionHint: 'Edit',
+      },
+    },
+    errorPages: {
+      goBack: 'Go back',
+      page403: {
+        title: 'Access denied',
+        text: 'Sorry, you have not enough privileges to see this page.',
+      },
+      page404: {
+        title: "Looks like you're lost",
+        text: 'Sorry, we can\'t find the page you want.',
+      },
+    },
   },
 };

package/src/locale/i18n.js

@@ -2,12 +2,14 @@ import Vue from 'vue';
 import VueI18n from 'vue-i18n';
 import en from './en/en';
 import ru from './ru/ru';
+import ua from './ua/ua';
 
 Vue.use(VueI18n);
 
 const messages = {
   en,
   ru,
+  ua,
 };
 
 export default new VueI18n({