bfg-common 1.4.839 → 1.4.841

package/components/common/modals/confirmByInput/ConfirmByInput.vue

@@ -1,206 +1,86 @@
 <template>
-  <atoms-modal
-    show
-    :test-id="`${props.testId}-modal`"
-    :width="props.width"
-    class="confirm-by-input"
+  <common-modals-confirm-by-input-new
+    v-if="isNewViewLocal"
+    v-model="confirmationForm"
+    :is-valid="isValid"
+    :title="props.title"
+    :description="props.description"
+    :sub-title="props.subTitle"
+    :modal-texts="props.modalTexts"
+    :test-id="props.testId"
+    @hide="emits('hide')"
+    @confirm="onConfirm"
+  />
+  <common-modals-confirm-by-input-old
+    v-else
+    v-model="confirmationForm"
+    :is-valid="isValid"
     :title="props.title"
-    :second-title="props.subTitle"
+    :sub-title="props.subTitle"
+    :test-id="props.testId"
     :loading="props.loading"
-    is-hide-close-icon
-    @submit="onConfirm"
+    :width="props.width"
+    @hide="emits('hide')"
+    @confirm="onConfirm"
   >
-    <template #modalBody>
-      <div class="confirm-by-input__body">
-        <atoms-the-icon
-          name="exclamation-triangle"
-          class="confirm-by-input__icon"
-        />
-
-        <div>
-          <slot name="content"></slot>
-
-          <div class="form-group">
-            <label class="no-selection" for="confirmation">{{
-              confirmationText
-            }}</label>
-            <div class="form-group__input">
-              <input
-                id="confirmation"
-                v-model="confirmationForm"
-                data-id="confirmation-input"
-                type="text"
-                autocomplete="off"
-                @keyup.enter="onConfirm"
-              />
-              <div v-show="!isValid && confirmationForm" class="form-validate">
-                <atoms-tooltip :test-id="`${props.testId}-tooltip`">
-                  <template #elem>
-                    <atoms-the-icon
-                      class="is-error tooltip-trigger"
-                      name="info"
-                      width="28px"
-                      height="28px"
-                    />
-                  </template>
-                  <template #content>
-                    {{ confirmDeletionInputError }}
-                  </template>
-                </atoms-tooltip>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-    <template #modalFooter>
-      <button
-        id="confirm-by-input-modal-close-button"
-        :data-id="`${props.testId}-modal-close-button`"
-        class="btn btn-outline"
-        @click="onHide"
-      >
-        {{ localization.common.no }}
-      </button>
-      <button
-        id="confirm-by-input-modal-apply-button"
-        :data-id="`${props.testId}-modal-apply-button`"
-        class="btn btn-primary"
-        :class="props.loading && 'modal-dialog__loader'"
-        :disabled="!isValid || props.loading"
-        @click="onConfirm"
-      >
-        <atoms-loader-pre-loader
-          v-if="props.loading"
-          id="loader"
-          :show="props.loading"
-          class="button__loading"
-          :test-id="`${props.testId}-spinner`"
-        />
-        <span v-else>
-          {{ localization.common.yes }}
-        </span>
-      </button>
+    <template #content>
+      <slot name="content" />
     </template>
-  </atoms-modal>
+  </common-modals-confirm-by-input-old>
 </template>
 
 <script setup lang="ts">
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const props = defineProps<{
-  title: string
-  subTitle: string
-  testId: string
-  width: string
-  loading?: boolean
-}>()
+import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    isNewView?: boolean
+    title?: string
+    description?: string
+    subTitle?: string
+    testId?: string
+    loading?: boolean
+    width?: string
+    modalTexts?: UI_I_ModalTexts
+  }>(),
+  {
+    isNewView: undefined,
+    title: '',
+    description: '',
+    subTitle: '',
+    testId: 'common-confirmation',
+    loading: false,
+    width: '580px',
+    modalTexts: {
+      button1: 'Cancel',
+      button2: 'Remove',
+    },
+  }
+)
 const emits = defineEmits<{
   (event: 'confirm'): void
   (event: 'hide'): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
+
+const isNewViewLocal = computed<boolean>(
+  () => props.isNewView ?? $store.getters['main/getIsNewView']
+)
 
 const confirmationForm = ref<string>('')
 const isValid = computed<boolean>(() => {
   return confirmationForm.value === props.subTitle
 })
 
-const confirmationText = localization.value.common.confirmDeletionInput.replace(
-    '{title}',
-    props.subTitle
-)
-const confirmDeletionInputError =
-  localization.value.common.confirmDeletionInputError.replace(
-    '{title}',
-    props.subTitle
-  )
-
 const onConfirm = async (): Promise<void> => {
   if (!isValid.value) return
 
   emits('confirm')
 }
 
-const onHide = (): void => {
-  emits('hide')
-}
 </script>
 
-<style lang="scss" scoped>
-@import 'assets/scss/common/mixins.scss';
-.confirm-by-input {
-  :deep(.modal-header) {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-
-    .modal-title {
-      color: var(--main-color-mode);
-      font-size: 24px;
-      max-width: 65%;
-    }
-    .secondary-title {
-      color: var(--modal-secondary-title);
-      font-size: 0.75rem;
-      font-weight: lighter;
-      user-select: none;
-    }
-    .separator {
-      content: '';
-      border-left: 1px solid #ccc;
-      margin: 0 18px;
-      height: 22px;
-    }
-
-    .close-icon {
-      fill: var(--close-icon);
-      width: 24px;
-      height: 24px;
-    }
-  }
-
-  &__body {
-    @include flex($align: flex-start);
-
-    .form-group {
-      margin-top: 20px;
-
-      label {
-        font-weight: bold;
-        font-size: 0.6rem;
-        user-select: none;
-      }
-
-      &:not(:first-child) input {
-        width: 100%;
-      }
-      &__input {
-        display: flex;
-        width: 100%;
-        min-height: 30px;
-      }
-    }
-  }
-
-  &__icon {
-    min-width: 48px;
-    height: 48px;
-    margin-right: 20px;
-    fill: #c27b00;
-  }
-
-  .button {
-    &__loading {
-      :deep(.spinner) {
-        width: 25px;
-        height: 25px;
-        min-width: 25px;
-        min-height: 25px;
-        margin-top: 5px;
-      }
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>

package/components/common/modals/confirmByInput/ConfirmByInputNew.vue

@@ -0,0 +1,103 @@
+<template>
+  <ui-popup
+    :test-id="props.testId"
+    icon-name="info-status"
+    :message="props.description"
+    :texts="modalTextsLocal"
+    @submit="onSubmit"
+    @hide="onHide"
+  >
+    <template #content>
+      <div class="confirm-modal__body-content">
+        <span>{{ props.title }}</span>
+        <span>{{ props.description }}</span>
+
+        <ui-input
+          v-model="confirmationFormLocal"
+          :test-id="`${props.testId}-confirm-input`"
+          :placeholder="localization.vsphereNa.nodeIPAddress"
+          :error="confirmInputErrorText"
+          class="confirm-modal__input"
+          input-style="rounded"
+          size="md"
+        />
+      </div>
+    </template>
+  </ui-popup>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  testId: string
+  title: string
+  description: string
+  subTitle: string
+  isValid: boolean
+  modalTexts: UI_I_ModalTexts
+}>()
+const confirmationFormLocal = defineModel<string>({ required: true })
+const emits = defineEmits<{
+  (event: 'confirm'): void
+  (event: 'hide-modal'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const modalTextsLocal = computed<UI_I_ModalTexts>(() => props.modalTexts)
+
+const isShowConfirmError = ref<boolean>(false)
+
+const confirmInputErrorText = computed<string>(() => {
+  if (!isShowConfirmError.value) return ''
+
+  const { fieldRequired, incorrectConfirmation } = localization.value.common
+
+  return !confirmationFormLocal.value
+    ? fieldRequired
+    : !props.isValid
+    ? incorrectConfirmation.replace('{0}', props.subTitle)
+    : ''
+})
+const onHide = (): void => {
+  emits('hide-modal')
+}
+const onSubmit = (): void => {
+  isShowConfirmError.value = true
+
+  if (!confirmationFormLocal.value) {
+    return
+  }
+
+  emits('confirm')
+}
+</script>
+
+<style scoped lang="scss">
+.confirm-modal {
+  &__body-content {
+    padding: 16px 32px;
+    span {
+      display: block;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 16.94px;
+      text-align: center;
+      color: #9da6ad;
+
+      &:first-of-type {
+        font-size: 20px;
+        font-weight: 500;
+        line-height: 24.2px;
+        color: var(--modal-title);
+        margin-bottom: 8px;
+      }
+    }
+  }
+  &__input {
+    margin-top: 16px;
+  }
+}
+</style>

package/components/common/modals/confirmByInput/ConfirmByInputOld.vue

@@ -0,0 +1,204 @@
+<template>
+  <atoms-modal
+    show
+    :test-id="`${props.testId}-modal`"
+    :width="props.width"
+    class="confirm-by-input"
+    :title="props.title"
+    :second-title="props.subTitle"
+    :loading="props.loading"
+    is-hide-close-icon
+    @submit="onConfirm"
+  >
+    <template #modalBody>
+      <div class="confirm-by-input__body">
+        <atoms-the-icon
+          name="exclamation-triangle"
+          class="confirm-by-input__icon"
+        />
+
+        <div>
+          <slot name="content"></slot>
+
+          <div class="form-group">
+            <label class="no-selection" for="confirmation">
+              {{ confirmationText }}
+            </label>
+            <div class="form-group__input">
+              <input
+                id="confirmation"
+                v-model="confirmationFormLocal"
+                data-id="confirmation-input"
+                type="text"
+                autocomplete="off"
+                @keyup.enter="onConfirm"
+              />
+              <div
+                v-show="!props.isValid && confirmationFormLocal"
+                class="form-validate"
+              >
+                <atoms-tooltip :test-id="`${props.testId}-tooltip`">
+                  <template #elem>
+                    <atoms-the-icon
+                      class="is-error tooltip-trigger"
+                      name="info"
+                      width="28px"
+                      height="28px"
+                    />
+                  </template>
+                  <template #content>
+                    {{ confirmDeletionInputError }}
+                  </template>
+                </atoms-tooltip>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #modalFooter>
+      <button
+        id="confirm-by-input-modal-close-button"
+        :data-id="`${props.testId}-modal-close-button`"
+        class="btn btn-outline"
+        @click="onHide"
+      >
+        {{ localization.common.no }}
+      </button>
+      <button
+        id="confirm-by-input-modal-apply-button"
+        :data-id="`${props.testId}-modal-apply-button`"
+        class="btn btn-primary"
+        :class="props.loading && 'modal-dialog__loader'"
+        :disabled="!props.isValid || props.loading"
+        @click="onConfirm"
+      >
+        <atoms-loader-pre-loader
+          v-if="props.loading"
+          id="loader"
+          :show="props.loading"
+          class="button__loading"
+          :test-id="`${props.testId}-spinner`"
+        />
+        <span v-else>
+          {{ localization.common.yes }}
+        </span>
+      </button>
+    </template>
+  </atoms-modal>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  title: string
+  subTitle: string
+  isValid: boolean
+  testId: string
+  width: string
+  loading?: boolean
+}>()
+const confirmationFormLocal = defineModel<string>({ required: true })
+const emits = defineEmits<{
+  (event: 'confirm'): void
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const confirmationText = localization.value.common.confirmDeletionInput.replace(
+  '{title}',
+  props.subTitle
+)
+const confirmDeletionInputError =
+  localization.value.common.confirmDeletionInputError.replace(
+    '{title}',
+    props.subTitle
+  )
+
+const onConfirm = (): void => {
+  emits('confirm')
+}
+
+const onHide = (): void => {
+  emits('hide')
+}
+</script>
+
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+.confirm-by-input {
+  :deep(.modal-header) {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    .modal-title {
+      color: var(--main-color-mode);
+      font-size: 24px;
+      max-width: 65%;
+    }
+    .secondary-title {
+      color: var(--modal-secondary-title);
+      font-size: 0.75rem;
+      font-weight: lighter;
+      user-select: none;
+    }
+    .separator {
+      content: '';
+      border-left: 1px solid #ccc;
+      margin: 0 18px;
+      height: 22px;
+    }
+
+    .close-icon {
+      fill: var(--close-icon);
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  &__body {
+    @include flex($align: flex-start);
+
+    .form-group {
+      margin-top: 20px;
+
+      label {
+        font-weight: bold;
+        font-size: 0.6rem;
+        user-select: none;
+      }
+
+      &:not(:first-child) input {
+        width: 100%;
+      }
+      &__input {
+        display: flex;
+        width: 100%;
+        min-height: 30px;
+      }
+    }
+  }
+
+  &__icon {
+    min-width: 48px;
+    height: 48px;
+    margin-right: 20px;
+    fill: #c27b00;
+  }
+
+  .button {
+    &__loading {
+      :deep(.spinner) {
+        width: 25px;
+        height: 25px;
+        min-width: 25px;
+        min-height: 25px;
+        margin-top: 5px;
+      }
+    }
+  }
+}
+</style>