bfg-common 1.5.765 → 1.5.766

package/components/common/configure/securityProfile/lockdownMode/modals/lockdownModeEdit/Old.vue

@@ -1,109 +1,109 @@
-<template>
-  <atoms-modal
-    :title="props.title"
-    width="862px"
-    class="lockdown-mode-edit"
-    test-id="lockdown-mode-edit"
-    show
-    @hide="emits('hide')"
-    @submit="emits('submit')"
-  >
-    <template #modalBody>
-      <div class="flex column-gap-6 lockdown-mode-edit__content">
-        <atoms-tabs-vertical-tabs
-          v-model="selectedTab"
-          :items="props.tabItems"
-          test-id="lockdown-mode-edit-tabs"
-          class="lockdown-mode-edit__tabs"
-        />
-
-        <common-configure-security-profile-lockdown-mode-modals-lockdown-mode-edit-lockdown-mode
-          v-if="selectedTab === 1"
-          v-model:form="localEditData"
-        />
-
-        <common-configure-security-profile-lockdown-mode-modals-lockdown-mode-edit-exception-users
-          v-if="selectedTab === 2"
-          v-model:form="localEditData"
-          @add="emits('add-new-user', $event)"
-        />
-      </div>
-    </template>
-  </atoms-modal>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_VerticalTabs } from '~/components/atoms/tabs/lib/models/interfaces'
-import type { UI_I_LockdownModeData } from '~/store/inventory/modules/configure/securityProfile/lib/models/interfaces'
-
-const selectedTab = defineModel<number>('selectedTab', { required: true })
-const localEditData = defineModel<UI_I_LockdownModeData>('localEditData', {
-  required: true,
-})
-
-const props = defineProps<{
-  title: string
-  tabItems: UI_I_VerticalTabs[]
-}>()
-
-const emits = defineEmits<{
-  (event: 'add-new-user', value: string): void
-  (event: 'hide'): void
-  (event: 'submit'): void
-}>()
-</script>
-
-<style lang="scss" scoped>
-.lockdown-mode-edit {
-  &__content {
-    height: inherit;
-  }
-  &__tabs {
-    &.vertical-groups-sidenav {
-      background: initial;
-      &.sidenav {
-        border-right: 0;
-      }
-    }
-  }
-  &__alert {
-    margin-bottom: 10px;
-  }
-
-  :deep(.modal-body) {
-    height: inherit;
-
-    .custom-radio-label {
-      padding-left: 23px;
-    }
-    .add-new-name-input {
-      width: 170px;
-    }
-    .sub-text-input {
-      position: absolute;
-      left: 0;
-      top: 22px;
-      font-size: 11px;
-    }
-    .add-user-btn {
-      margin-left: 20px;
-      text-transform: uppercase;
-      color: #0079ad;
-      font-size: 11px;
-      cursor: pointer;
-      font-weight: 500;
-
-      &:hover {
-        color: #00608a;
-      }
-    }
-    .ellipsis-vertical-btn {
-      cursor: pointer;
-
-      svg {
-        width: 15px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <atoms-modal
+    :title="props.title"
+    width="862px"
+    class="lockdown-mode-edit"
+    test-id="lockdown-mode-edit"
+    show
+    @hide="emits('hide')"
+    @submit="emits('submit')"
+  >
+    <template #modalBody>
+      <div class="flex column-gap-6 lockdown-mode-edit__content">
+        <atoms-tabs-vertical-tabs
+          v-model="selectedTab"
+          :items="props.tabItems"
+          test-id="lockdown-mode-edit-tabs"
+          class="lockdown-mode-edit__tabs"
+        />
+
+        <common-configure-security-profile-lockdown-mode-modals-lockdown-mode-edit-lockdown-mode
+          v-if="selectedTab === 1"
+          v-model:form="localEditData"
+        />
+
+        <common-configure-security-profile-lockdown-mode-modals-lockdown-mode-edit-exception-users
+          v-if="selectedTab === 2"
+          v-model:form="localEditData"
+          @add="emits('add-new-user', $event)"
+        />
+      </div>
+    </template>
+  </atoms-modal>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_VerticalTabs } from '~/components/atoms/tabs/lib/models/interfaces'
+import type { UI_I_LockdownModeData } from '~/store/inventory/modules/configure/securityProfile/lib/models/interfaces'
+
+const selectedTab = defineModel<number>('selectedTab', { required: true })
+const localEditData = defineModel<UI_I_LockdownModeData>('localEditData', {
+  required: true,
+})
+
+const props = defineProps<{
+  title: string
+  tabItems: UI_I_VerticalTabs[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'add-new-user', value: string): void
+  (event: 'hide'): void
+  (event: 'submit'): void
+}>()
+</script>
+
+<style lang="scss" scoped>
+.lockdown-mode-edit {
+  &__content {
+    height: inherit;
+  }
+  &__tabs {
+    &.vertical-groups-sidenav {
+      background: initial;
+      &.sidenav {
+        border-right: 0;
+      }
+    }
+  }
+  &__alert {
+    margin-bottom: 10px;
+  }
+
+  :deep(.modal-body) {
+    height: inherit;
+
+    .custom-radio-label {
+      padding-left: 23px;
+    }
+    .add-new-name-input {
+      width: 170px;
+    }
+    .sub-text-input {
+      position: absolute;
+      left: 0;
+      top: 22px;
+      font-size: 11px;
+    }
+    .add-user-btn {
+      margin-left: 20px;
+      text-transform: uppercase;
+      color: #0079ad;
+      font-size: 11px;
+      cursor: pointer;
+      font-weight: 500;
+
+      &:hover {
+        color: #00608a;
+      }
+    }
+    .ellipsis-vertical-btn {
+      cursor: pointer;
+
+      svg {
+        width: 15px;
+      }
+    }
+  }
+}
+</style>

package/components/common/configure/securityProfile/lockdownMode/modals/lockdownModeEdit/exceptionUsers/ExceptionUsers.vue

@@ -1,28 +1,28 @@
-<template>
-  <component
-    :is="currentComponent"
-    v-model:local-edit-data="form"
-    @add="emits('add', $event)"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_LockdownModeData } from '~/store/inventory/modules/configure/securityProfile/lib/models/interfaces'
-
-const form = defineModel<UI_I_LockdownModeData>('form')
-
-const emits = defineEmits<{
-  (event: 'add', value: string): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./New.vue'))
-    : defineAsyncComponent(() => import('./old/Old.vue'))
-)
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <component
+    :is="currentComponent"
+    v-model:local-edit-data="form"
+    @add="emits('add', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_LockdownModeData } from '~/store/inventory/modules/configure/securityProfile/lib/models/interfaces'
+
+const form = defineModel<UI_I_LockdownModeData>('form')
+
+const emits = defineEmits<{
+  (event: 'add', value: string): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./old/Old.vue'))
+)
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/configure/securityProfile/lockdownMode/modals/lockdownModeEdit/exceptionUsers/New.vue

@@ -1,5 +1,5 @@
-<template>New</template>
-
-<script setup lang="ts"></script>
-
-<style scoped lang="scss"></style>
+<template>New</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

package/components/common/configure/securityProfile/lockdownMode/modals/lockdownModeEdit/exceptionUsers/old/Old.vue

@@ -1,179 +1,179 @@
-<template>
-  <div class="exception-users">
-    <h5 class="font-bold">
-      {{ localization.configureSecurityProfile.exceptionUsers }}
-    </h5>
-    <label>
-      {{ localization.configureSecurityProfile.exceptionUsersDesc }}
-      <span class="relative">
-        <input v-model="newUserName" type="text" class="add-new-name-input" />
-        <span class="sub-text-input">
-          {{ localization.configureSecurityProfile.separateUsersWithCommas }}
-        </span>
-      </span>
-      <span class="add-user-btn" @click="emits('add', newUserName)">
-        {{ localization.common.addUser }}
-      </span>
-    </label>
-
-    <div class="mt-3">
-      <atoms-table-data-grid
-        v-model:column-keys="columnItems"
-        :head-items="headItems"
-        :body-items="bodyItems"
-        :total-items="bodyItems.length"
-        :page-size="100"
-        :page="1"
-        :total-pages="1"
-        test-id="exception-users-table"
-        hide-pagination
-        hide-page-size
-        off-select-by-row
-        server-off
-      >
-        <template #col1="{ item }">
-          <div class="data-table__action-icon">
-            <atoms-popover
-              :test-id="`${item.data.id}-popover`"
-              @click="onShowTooltip(item.data.id)"
-            >
-              <template #elem>
-                <span class="ellipsis-vertical-btn">
-                  <atoms-the-icon name="ellipsis-vertical" />
-                </span>
-              </template>
-              <template #content>
-                <div v-if="showTooltip && item.data.id === selectedUserId">
-                  <div class="action-container">
-                    <div class="action-wrap relative">
-                      <button
-                        :data-id="`${item.data.id}-remove-button`"
-                        class="action"
-                        @click="onRemoveUser(item.data.name)"
-                      >
-                        {{ localization.common.removeUser }}
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </template>
-            </atoms-popover>
-          </div>
-        </template>
-      </atoms-table-data-grid>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_HeadItem,
-  UI_I_BodyItem,
-} from '~/components/atoms/table/compact/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_ColumnKey } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
-import type { UI_I_LockdownModeData } from '~/store/inventory/modules/configure/securityProfile/lib/models/interfaces'
-import * as exceptionUsersTable from '~/components/common/configure/securityProfile/lockdownMode/modals/lockdownModeEdit/exceptionUsers/old/lib/config/table'
-
-const localEditData = defineModel<UI_I_LockdownModeData>('localEditData', {
-  required: true,
-})
-
-const emits = defineEmits<{
-  (event: 'add', value: string): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const newUserName = ref<string>('')
-
-const columnItems = computed<UI_I_ColumnKey[]>(() =>
-  exceptionUsersTable.columnKeys(localization.value)
-)
-const headItems = computed<UI_I_HeadItem[]>(() =>
-  exceptionUsersTable.headItems(localization.value)
-)
-
-const bodyItems = ref<UI_I_BodyItem[][]>([])
-watch(
-  localEditData,
-  (newValue) => {
-    if (!newValue.exceptionUsers?.length) {
-      bodyItems.value = []
-      return
-    }
-    bodyItems.value = exceptionUsersTable.bodyItems(newValue.exceptionUsers)
-  },
-  { immediate: true, deep: true }
-)
-
-const selectedUserId = ref<number | null>(null)
-const showTooltip = ref<boolean>(false)
-const onShowTooltip = (id: number): void => {
-  selectedUserId.value = id
-  showTooltip.value = true
-}
-
-const onRemoveUser = (value: string): void => {
-  localEditData.value.exceptionUsers =
-    localEditData.value.exceptionUsers.filter((item) => item !== value)
-}
-
-const hideActionsPopover = (): void => {
-  showTooltip.value = false
-}
-
-// TODO удалить потом это
-onMounted(() => {
-  setTimeout(() => {
-    window.addEventListener('click', hideActionsPopover)
-  })
-})
-onUnmounted(() => {
-  window.removeEventListener('click', hideActionsPopover)
-})
-</script>
-
-<style scoped lang="scss">
-.action-container {
-  position: absolute;
-  top: -33px;
-  left: 5px;
-  background: var(--block-view-bg-color2);
-  border: 1px solid var(--block-border-color);
-  padding: 5px 6px;
-  border-radius: 3px;
-
-  .action-wrap {
-    &::after {
-      content: '';
-      display: block;
-      position: absolute;
-      width: 8px;
-      height: 8px;
-      background: var(--block-view-bg-color2);
-      transform: rotate(45deg);
-      left: -11px;
-      bottom: calc(50% - 4px);
-      border-left: 0.5px solid var(--block-border-color);
-      border-bottom: 0.5px solid var(--block-border-color);
-      z-index: var(--z-dropdown);
-    }
-  }
-  .action {
-    border: none;
-    padding: 1px 20px;
-    width: 100%;
-    text-align: left;
-    cursor: pointer;
-    background: var(--block-view-bg-color2);
-    color: var(--global-font-color3);
-    white-space: nowrap;
-    text-transform: capitalize;
-
-    &:hover {
-      background: var(--vertical-nav-hover-bg-color);
-    }
-  }
-}
-</style>
+<template>
+  <div class="exception-users">
+    <h5 class="font-bold">
+      {{ localization.configureSecurityProfile.exceptionUsers }}
+    </h5>
+    <label>
+      {{ localization.configureSecurityProfile.exceptionUsersDesc }}
+      <span class="relative">
+        <input v-model="newUserName" type="text" class="add-new-name-input" />
+        <span class="sub-text-input">
+          {{ localization.configureSecurityProfile.separateUsersWithCommas }}
+        </span>
+      </span>
+      <span class="add-user-btn" @click="emits('add', newUserName)">
+        {{ localization.common.addUser }}
+      </span>
+    </label>
+
+    <div class="mt-3">
+      <atoms-table-data-grid
+        v-model:column-keys="columnItems"
+        :head-items="headItems"
+        :body-items="bodyItems"
+        :total-items="bodyItems.length"
+        :page-size="100"
+        :page="1"
+        :total-pages="1"
+        test-id="exception-users-table"
+        hide-pagination
+        hide-page-size
+        off-select-by-row
+        server-off
+      >
+        <template #col1="{ item }">
+          <div class="data-table__action-icon">
+            <atoms-popover
+              :test-id="`${item.data.id}-popover`"
+              @click="onShowTooltip(item.data.id)"
+            >
+              <template #elem>
+                <span class="ellipsis-vertical-btn">
+                  <atoms-the-icon name="ellipsis-vertical" />
+                </span>
+              </template>
+              <template #content>
+                <div v-if="showTooltip && item.data.id === selectedUserId">
+                  <div class="action-container">
+                    <div class="action-wrap relative">
+                      <button
+                        :data-id="`${item.data.id}-remove-button`"
+                        class="action"
+                        @click="onRemoveUser(item.data.name)"
+                      >
+                        {{ localization.common.removeUser }}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </atoms-popover>
+          </div>
+        </template>
+      </atoms-table-data-grid>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/compact/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ColumnKey } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
+import type { UI_I_LockdownModeData } from '~/store/inventory/modules/configure/securityProfile/lib/models/interfaces'
+import * as exceptionUsersTable from '~/components/common/configure/securityProfile/lockdownMode/modals/lockdownModeEdit/exceptionUsers/old/lib/config/table'
+
+const localEditData = defineModel<UI_I_LockdownModeData>('localEditData', {
+  required: true,
+})
+
+const emits = defineEmits<{
+  (event: 'add', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const newUserName = ref<string>('')
+
+const columnItems = computed<UI_I_ColumnKey[]>(() =>
+  exceptionUsersTable.columnKeys(localization.value)
+)
+const headItems = computed<UI_I_HeadItem[]>(() =>
+  exceptionUsersTable.headItems(localization.value)
+)
+
+const bodyItems = ref<UI_I_BodyItem[][]>([])
+watch(
+  localEditData,
+  (newValue) => {
+    if (!newValue.exceptionUsers?.length) {
+      bodyItems.value = []
+      return
+    }
+    bodyItems.value = exceptionUsersTable.bodyItems(newValue.exceptionUsers)
+  },
+  { immediate: true, deep: true }
+)
+
+const selectedUserId = ref<number | null>(null)
+const showTooltip = ref<boolean>(false)
+const onShowTooltip = (id: number): void => {
+  selectedUserId.value = id
+  showTooltip.value = true
+}
+
+const onRemoveUser = (value: string): void => {
+  localEditData.value.exceptionUsers =
+    localEditData.value.exceptionUsers.filter((item) => item !== value)
+}
+
+const hideActionsPopover = (): void => {
+  showTooltip.value = false
+}
+
+// TODO удалить потом это
+onMounted(() => {
+  setTimeout(() => {
+    window.addEventListener('click', hideActionsPopover)
+  })
+})
+onUnmounted(() => {
+  window.removeEventListener('click', hideActionsPopover)
+})
+</script>
+
+<style scoped lang="scss">
+.action-container {
+  position: absolute;
+  top: -33px;
+  left: 5px;
+  background: var(--block-view-bg-color2);
+  border: 1px solid var(--block-border-color);
+  padding: 5px 6px;
+  border-radius: 3px;
+
+  .action-wrap {
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      background: var(--block-view-bg-color2);
+      transform: rotate(45deg);
+      left: -11px;
+      bottom: calc(50% - 4px);
+      border-left: 0.5px solid var(--block-border-color);
+      border-bottom: 0.5px solid var(--block-border-color);
+      z-index: var(--z-dropdown);
+    }
+  }
+  .action {
+    border: none;
+    padding: 1px 20px;
+    width: 100%;
+    text-align: left;
+    cursor: pointer;
+    background: var(--block-view-bg-color2);
+    color: var(--global-font-color3);
+    white-space: nowrap;
+    text-transform: capitalize;
+
+    &:hover {
+      background: var(--vertical-nav-hover-bg-color);
+    }
+  }
+}
+</style>