bfg-common 1.0.0

package/components/common/diagramMain/modals/editSettings/EditSettingsModal.vue

@@ -0,0 +1,714 @@
+<template>
+    <div>
+        <atoms-modal
+                :width="props.width"
+                :height="props.height"
+                :show="props.show"
+                :title="title"
+                :modal-loading="modalLoading"
+                class="diagram-action__edit"
+                @hide="onHideEditSettingsModal"
+                @submit="onSendDataRequest"
+        >
+            <template #modalBody>
+                <common-diagram-main-modals-edit-settings
+                        :items="props.items"
+                        :view-name="props.viewName"
+                        :initial-data="props.initialData"
+                        :adapters="props.adapters"
+                        :flag-send-data="flagSendData"
+                        @send-edit-data="onSendData"
+                        @change-edit-fields-data="onChangeEditFieldsData"
+                        @check-network-label="onCheckNetworkLabel"
+                />
+            </template>
+        </atoms-modal>
+        <div v-show="true" class="loader">
+            <i class="fa clr-tree-node-caret-icon spinner spinner" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import {
+    UI_I_ModalsInitialData,
+    UI_I_EditFieldsData,
+    UI_I_SwitchAdapters,
+} from '~/components/common/diagramMain/models/interfaces'
+
+// Props from up
+interface UI_I_PortViewSettingsModalProps {
+    show: boolean
+    viewName: string
+    width: string
+    height: string
+    title?: string
+    items: {
+        value: string
+        text: string
+    }[]
+    initialData?: UI_I_ModalsInitialData
+    adapters?: UI_I_SwitchAdapters
+}
+
+const props = withDefaults(defineProps<UI_I_PortViewSettingsModalProps>(), {
+    initialData: () => ({}),
+    title: 'Network',
+    adapters: () => ({
+        totalPages: 0,
+        totalItems: 0,
+        items: [],
+    }),
+})
+
+const modalLoading = ref<boolean>(false)
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+// Title
+const title = computed(
+    () => props.title + localization.value.networkEditSettings
+)
+
+// Modal hiding
+const emits = defineEmits<{
+    (event: 'hide'): void
+    (event: 'change-edit-fields-data', editFieldsData: UI_I_EditFieldsData): void
+    (
+        event: 'send-edit-data',
+        type: string,
+        hideModal: () => void,
+        name?: string
+    ): void
+    (
+        event: 'check-network-label',
+        networkLabel: string,
+        cb: (error_message: string) => void,
+        hideLoader?: () => void
+    ): void
+}>()
+
+const onCheckNetworkLabel = (
+    networkLabel: string,
+    cb: (error_message: string) => void
+) => {
+    emits('check-network-label', networkLabel, cb)
+}
+
+const onHideEditSettingsModal = (): void => {
+    emits('hide')
+}
+
+const onChangeEditFieldsData = (newEditFieldsData: UI_I_EditFieldsData) => {
+    emits('change-edit-fields-data', newEditFieldsData)
+}
+
+const flagSendData = ref(true)
+
+const onSendDataRequest = () => {
+    flagSendData.value = !flagSendData.value
+}
+const onSendData = (type: string) => {
+    modalLoading.value = true
+    emits('send-edit-data', type, onHideEditSettingsModal, props.title)
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.diagram-action__edit) {
+  .table-fixed-height {
+    min-height: 200px;
+    max-height: 227px;
+    overflow-y: auto;
+  }
+  .modal-content {
+    display: flex;
+    flex-direction: column;
+  }
+  .modal-header {
+    border-bottom: 1px solid #a6a6a6;
+    padding: 0;
+  }
+  .wizard-tab__container {
+    display: flex;
+    flex: 1 1 100%;
+    box-sizing: border-box;
+  }
+  .wizard-content__container {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    flex: 1 1 100%;
+    box-sizing: border-box;
+    order: 2;
+    overflow-y: auto;
+    padding: 16px 15px 10px 10px;
+  }
+  .wizard-content {
+    height: auto;
+    width: inherit;
+    margin: 0;
+  }
+  .flex-property-value-group {
+    margin-left: 10px;
+    flex: 1 0 0;
+
+    input::-webkit-inner-spin-button {
+      -webkit-appearance: inner-spin-button;
+    }
+  }
+
+  .flex-property-value-group.overridable-dropdown {
+    max-width: 390px;
+    min-width: 366px;
+  }
+  .overridable-dropdown .flex-property-label-group {
+    flex-basis: auto;
+    padding-left: 0;
+    min-height: 36px;
+  }
+  .flex-property-value-group .select {
+    max-width: 300px;
+
+    select {
+      color: #565656;
+      height: 24px;
+    }
+
+    select:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+  .form-block {
+    margin: 12px 0 24px;
+  }
+  section.form-block {
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+  .flex-property-value-group {
+    height: 36px;
+  }
+  .flex-property-label-group.dummy {
+    visibility: hidden;
+    flex-basis: auto;
+  }
+  label.normal-weight {
+    font-weight: 400;
+    position: relative;
+    display: inline-block;
+    min-height: 1.2rem;
+    padding-left: 1.1rem;
+    cursor: pointer;
+    line-height: 1.2rem;
+  }
+  .flex-property-label-group.large {
+    flex: 0 0 180px;
+    flex-basis: 210px;
+  }
+  .checkbox-inline {
+    position: relative;
+    display: inline-block;
+    margin-bottom: 0;
+    vertical-align: middle;
+    font-weight: 400;
+    cursor: pointer;
+
+    input:focus + label::before {
+      box-shadow: none;
+    }
+
+    label {
+      font-size: 11.05px;
+      margin-bottom: 5px;
+      padding-left: 22px;
+      line-height: 24px;
+    }
+    label.normal-font-size {
+      font-size: 13px;
+      margin-bottom: 0;
+    }
+    &.with-margin {
+      min-height: 20px;
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+  }
+  .horizontal-flex-container {
+    margin-bottom: 5px;
+    min-height: 36px;
+    display: flex;
+    flex-direction: row;
+  }
+  .no-margin {
+    margin-bottom: 0;
+  }
+  .port-properties-vlanid-row {
+    padding-top: 8px;
+  }
+  .property-label-group {
+    width: 140px;
+  }
+  .property-value-group {
+    input::-webkit-inner-spin-button {
+      -webkit-appearance: inner-spin-button;
+    }
+
+    margin-left: 10px;
+
+    fieldset {
+      display: flex;
+      flex-flow: column;
+      padding-left: 23px;
+    }
+
+    input:not([type='checkbox']) {
+      width: 280px;
+    }
+    .combobox-container {
+      width: 160px;
+
+      input {
+        width: 160px;
+      }
+    }
+  }
+  .sidenav {
+    width: 220px;
+    height: 100%;
+    padding: 10px 5px 10px 6px;
+    border: none;
+    background: none;
+
+    li {
+      width: 189px;
+      line-height: 20px;
+      display: inline-block;
+      text-decoration: none;
+      font-weight: 700;
+      color: #333;
+      font-size: 13px;
+      border-bottom: 1px solid transparent;
+      border-radius: 5px;
+      margin-top: 0;
+      margin-bottom: 7px;
+    }
+  }
+  // Todo will be deleted
+  div.edit-pg-failover-order-with-details {
+    flex: 1 1 auto;
+    flex-direction: column;
+    display: flex;
+  }
+  .flex-grow-auto {
+    flex: 1 0 auto;
+  }
+  .relative-container {
+    position: relative;
+  }
+  .fill-parent {
+    overflow: visible;
+    height: 100%;
+    width: 100%;
+  }
+  .absolute-container {
+    position: absolute;
+  }
+  .flex-row {
+    display: flex;
+    flex-direction: row;
+  }
+  .failover-order-master {
+    flex: 0 0 200px;
+    margin-right: 10px;
+    margin-bottom: 2px;
+  }
+  .absolute-container {
+    position: absolute;
+  }
+  .flex-column {
+    display: flex;
+  }
+  .flex-column {
+    flex-direction: column;
+  }
+
+  .k-widget {
+    height: 100%;
+    box-sizing: border-box;
+    border: none;
+    box-shadow: none;
+  }
+  .k-header.k-grid-toolbar {
+    background-color: #fff;
+    padding: 8px 0 3px;
+    border: none;
+  }
+  .k-grid-toolbar:first-child {
+    border-radius: 2px 2px 0 0;
+  }
+  .vui-action-bar ul {
+    margin: 0;
+  }
+  ol,
+  ul {
+    list-style-position: inside;
+    padding-left: 0;
+  }
+  .vui-action-bar ul li {
+    padding-right: 4px;
+    display: inline-block;
+    list-style: none;
+    vertical-align: middle;
+    line-height: 20px;
+  }
+  .k-grid .k-grid-header {
+    position: relative;
+    border-radius: 3px 3px 0 0;
+    overflow: hidden;
+    background-color: #fafafa;
+    padding-right: 18px;
+    border: none;
+
+    .k-grid-header-wrap {
+      display: none;
+      border-right: 0;
+      border-color: #ccc;
+    }
+  }
+  .k-grid-header table {
+    table-layout: fixed;
+  }
+  .k-grid-header-wrap > table {
+    margin-bottom: -1px;
+
+    col {
+      width: 150px;
+    }
+  }
+  .k-grid table {
+    width: 100%;
+    margin: 0;
+    max-width: none;
+    border-collapse: separate;
+    border-spacing: 0;
+    empty-cells: show;
+    border-width: 0;
+    outline: 0;
+  }
+  .k-grid-header thead tr {
+    height: 24px;
+  }
+  .k-grid-header th.k-header:first-child {
+    border-left: 1px solid #ddd;
+  }
+  .k-grid-header th.k-header {
+    color: #565656;
+    background-color: #fafafa;
+    font-size: 12px;
+    font-weight: 600;
+    border-left: #ddd 1px;
+    height: 24px;
+    vertical-align: middle;
+    padding: 0 0 0 12px;
+    border-bottom: none;
+  }
+  .k-grid-header th.k-header {
+    overflow: hidden;
+    border: solid #ccc;
+    border-width: 0 0 2px 1px;
+    padding: 0.5em 0.6em 0.4em;
+    font-weight: 400;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    text-align: left;
+  }
+  .k-header > .k-grid-filter {
+    margin-right: 3px !important;
+  }
+  .k-header > .k-grid-filter,
+  .k-header > .k-header-column-menu {
+    float: right;
+    margin: -0.5em -0.6em -0.4em;
+    padding: 0.5em 0.2em 0.4em;
+    position: relative;
+    z-index: 1;
+  }
+  .k-grid-content {
+    width: auto;
+    overflow-y: scroll;
+    padding-right: 3px;
+    height: 200px;
+  }
+  .k-selectable {
+    height: auto;
+
+    col {
+      width: 150px;
+    }
+  }
+  ul li span.disabled {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+  .k-grid.k-widget .k-grid-content,
+  .k-grid.k-widget .k-grid-content-locked {
+    border-left: 1px solid #ddd;
+    border-right: 1px solid #ddd;
+  }
+  .k-grid-content {
+    background: #fff;
+  }
+  .no-column-header .k-grid-content {
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+  }
+  .k-grid-content {
+    min-height: 35px;
+  }
+  .k-grid-content,
+  .k-grid-content-locked,
+  .k-pager-wrap {
+    white-space: normal;
+  }
+  .k-grid-content {
+    position: relative;
+    zoom: 1;
+  }
+  .k-widget {
+    line-height: normal;
+  }
+  .k-grid-content table,
+  .k-grid-content-locked > table,
+  .k-grid-footer table,
+  .k-grid-header table {
+    table-layout: fixed;
+  }
+
+  .k-grid-content table,
+  .k-grid-content-locked > table,
+  .k-grid-footer table,
+  .k-grid-header table {
+    table-layout: fixed;
+  }
+  .k-grid table {
+    width: 100%;
+    margin: 0;
+    max-width: none;
+    border-collapse: separate;
+    border-spacing: 0;
+    empty-cells: show;
+    border-width: 0;
+    outline: 0;
+  }
+  .vui-datagrid.k-grid.k-widget .k-grid-content tbody tr,
+  .vui-datagrid.k-grid.k-widget .k-grid-content-locked tbody tr,
+  .k-grid.k-widget .k-grid-content tbody tr,
+  .k-grid.k-widget .k-grid-content-locked tbody tr {
+    background-color: #fff;
+    height: 24px;
+    color: #565656;
+    cursor: default;
+    user-select: none;
+
+    &.k-state-selected {
+      background-color: #29414e;
+      color: #ffffff;
+      border-bottom: 1px solid;
+      border-bottom-color: transparent;
+    }
+
+    &:not(.k-state-selected):hover {
+      background-color: #e8e8e8;
+      color: #454545;
+
+      td {
+        border-bottom: 1px solid #666666;
+      }
+    }
+
+    span {
+      //TODO set font size to 13px when will add font
+      //font-family: ProximaNova;
+      font-size: 95%;
+    }
+  }
+  .k-widget.k-grid .k-grid-content tbody tr {
+    color: #565656;
+  }
+  .k-grid.k-widget .k-grid-content tbody tr td,
+  .k-grid.k-widget .k-grid-content-locked tbody tr td {
+    border-width: 0 0 1px;
+    border-color: #ddd;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 24px;
+    padding: 0 12px;
+  }
+  .k-grid tr td {
+    border-style: solid;
+  }
+  .assigned-adapters-datagrid .assigned-pnic-sections {
+    font-weight: 700;
+    margin: 0 -9px;
+  }
+  .action-link-container {
+    cursor: pointer;
+
+    svg {
+      transform: translateY(3px);
+    }
+  }
+  ul li span:hover:not(.disabled) {
+    text-decoration: none;
+    background-color: #e9f6fd;
+    border: 1px solid #c7e9ff;
+  }
+  ul li span {
+    padding: 4px;
+    line-height: 22px;
+    border: 1px solid transparent;
+  }
+  .k-grid td * {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .k-scrollbar-vertical {
+    top: 0;
+    right: 0;
+    width: 17px;
+    height: 100%;
+    overflow-x: hidden;
+  }
+
+  .k-scrollbar {
+    position: absolute;
+    overflow: scroll;
+  }
+  .k-grid.k-widget .k-header.k-grid-toolbar {
+    background-color: #fff;
+    padding: 8px 0 3px;
+    border: none;
+    width: 100%;
+  }
+  .absolute-container {
+    position: initial;
+  }
+
+  .failover-order-details {
+    flex: 1 0 auto;
+    border-left: 1px solid #ddd;
+
+    & > div {
+      padding-left: 10px;
+    }
+    .no-items-selected-container {
+      display: -ms-flexbox;
+      display: flex;
+      -ms-flex-align: center;
+      align-items: center;
+      -ms-flex-pack: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+    .no-items-selected-text {
+      font-size: 16px;
+      font-weight: 700;
+      color: #a0a0a0;
+    }
+    .absolute-container {
+      position: absolute;
+    }
+  }
+  .compact {
+    padding-top: 0;
+  }
+  .failover-order-with-details-title {
+    margin: 0 !important;
+    padding-top: 0 !important;
+  }
+  .element-disabled {
+    pointer-events: none;
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+  // Todo will be deleted
+  .danger-not-valid {
+    border: 2px solid red;
+    border-bottom: 1px solid #db2100;
+  }
+  .tooltip-field {
+    margin-right: 12px;
+  }
+  .property-value-group.tooltip-field-container {
+    width: 177.6px;
+  }
+  .adapter-icon-positioning {
+    transform: translate(-2px, 5px);
+  }
+
+  .wizard-content-port {
+    .horizontal-flex-container {
+      min-height: 24px;
+      margin-bottom: 0;
+    }
+
+    .radio {
+      min-height: 39px;
+      margin: 10px 0;
+    }
+
+    .form-block {
+      margin: 12px 0 24px 0;
+      padding-left: 23px;
+
+      &.form-block-ipv {
+        input[type='text'] {
+          width: 143px;
+        }
+
+        .horizontal-flex-container > label {
+          margin-right: 50px;
+        }
+      }
+    }
+
+    .edit-vmkernel-adapter-section {
+      padding-top: 12px;
+
+      label {
+        input[type='checkbox'] {
+          margin-right: 4px;
+          transform: translateY(1px);
+        }
+      }
+
+      .horizontal-flex-container {
+        margin-bottom: 5px;
+      }
+    }
+  }
+}
+
+.loader {
+  position: absolute;
+  z-index: 1000;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.3);
+
+  .spinner {
+    left: unset;
+  }
+}
+</style>