bfg-common 1.5.419 → 1.5.421

package/components/common/wizards/datastore/add/steps/typeMode/TypeModeNew.vue

@@ -1,101 +1,101 @@
-<template>
-  <section class="datastore-type">
-    <div class="datastore-type__radio-container">
-      <ui-radio
-        v-for="(option, key) in props.options"
-        :key="key"
-        v-model="datastoreTypeModeLocal"
-        :label="option.label"
-        :test-id="option.testId"
-        :value="option.value"
-        size="md"
-      >
-        <template #description>
-          <span class="datastore-type__radio-description">
-            {{ option.description }}
-          </span>
-        </template>
-
-        <template #tooltip>
-          <common-tooltip-help
-            :test-id="`${option.testId}-${key}`"
-            :help-id="`${option.testId}-${key}`"
-            :help-text="option.tooltipContent"
-            :title="localization.common.information"
-            icon-width="18"
-            icon-height="18"
-            dropdown-width="320px"
-            dropdown-left
-            dropdown-top
-          />
-        </template>
-      </ui-radio>
-    </div>
-  </section>
-</template>
-
-<script lang="ts" setup>
-// TODO this component is duplicate
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
-
-const datastoreTypeModeLocal = defineModel<number>({ required: true })
-const props = defineProps<{
-  options: UI_I_RadioOption[]
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-</script>
-
-<style lang="scss" scoped>
-@import 'assets/scss/common/mixins.scss';
-.datastore-type {
-  container-type: inline-size;
-  margin-top: 16px;
-
-  &__radio {
-    &-container {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 12px;
-    }
-    &-description {
-      color: #9da6ad;
-      line-height: 18px;
-    }
-  }
-  :deep(input[type='radio']) {
-    & ~ .radio-label {
-      width: 100%;
-      height: 100%;
-      background-color: var(--select-bg);
-      //border: 1px solid var(--line-color);
-      border-radius: 8px;
-      padding: 12px;
-      box-shadow: inset 0 0 0 1px var(--line-color);
-      transition: box-shadow 0.1s ease-in-out;
-    }
-
-    &:not(:checked) {
-      & ~ .radio-label:hover {
-        //border-color: var(--select-border);
-        box-shadow: inset 0 0 0 1px var(--select-border);
-      }
-    }
-
-    &:checked {
-      & ~ .radio-label {
-        background-color: var(--radio-btn-active-label-bg-color);
-        //border-color: var(--radio-btn-active-label-border-color);
-        box-shadow: inset 0 0 0 1.5px var(--radio-btn-active-label-border-color);
-      }
-    }
-  }
-}
-
-@container (max-width:600px) {
-  .datastore-type__radio-container {
-    grid-template-columns: 1fr;
-  }
-}
-</style>
+<template>
+  <section class="datastore-type">
+    <div class="datastore-type__radio-container">
+      <ui-radio
+        v-for="(option, key) in props.options"
+        :key="key"
+        v-model="datastoreTypeModeLocal"
+        :label="option.label"
+        :test-id="option.testId"
+        :value="option.value"
+        size="md"
+      >
+        <template #description>
+          <span class="datastore-type__radio-description">
+            {{ option.description }}
+          </span>
+        </template>
+
+        <template #tooltip>
+          <common-tooltip-help
+            :test-id="`${option.testId}-${key}`"
+            :help-id="`${option.testId}-${key}`"
+            :help-text="option.tooltipContent"
+            :title="localization.common.information"
+            icon-width="18"
+            icon-height="18"
+            dropdown-width="320px"
+            dropdown-left
+            dropdown-top
+          />
+        </template>
+      </ui-radio>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+// TODO this component is duplicate
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
+
+const datastoreTypeModeLocal = defineModel<number>({ required: true })
+const props = defineProps<{
+  options: UI_I_RadioOption[]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+.datastore-type {
+  container-type: inline-size;
+  margin-top: 16px;
+
+  &__radio {
+    &-container {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 12px;
+    }
+    &-description {
+      color: #9da6ad;
+      line-height: 18px;
+    }
+  }
+  :deep(input[type='radio']) {
+    & ~ .radio-label {
+      width: 100%;
+      height: 100%;
+      background-color: var(--select-bg);
+      //border: 1px solid var(--line-color);
+      border-radius: 8px;
+      padding: 12px;
+      box-shadow: inset 0 0 0 1px var(--line-color);
+      transition: box-shadow 0.1s ease-in-out;
+    }
+
+    &:not(:checked) {
+      & ~ .radio-label:hover {
+        //border-color: var(--select-border);
+        box-shadow: inset 0 0 0 1px var(--select-border);
+      }
+    }
+
+    &:checked {
+      & ~ .radio-label {
+        background-color: var(--radio-btn-active-label-bg-color);
+        //border-color: var(--radio-btn-active-label-border-color);
+        box-shadow: inset 0 0 0 1.5px var(--radio-btn-active-label-border-color);
+      }
+    }
+  }
+}
+
+@container (max-width:600px) {
+  .datastore-type__radio-container {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

package/components/common/wizards/datastore/add/steps/typeMode/TypeModeOld.vue

@@ -1,71 +1,71 @@
-<template>
-  <section class="datastore-types">
-    <div class="header-row">
-      <span class="datastore-types__subtitle">
-        {{ localization.common.specifyDatastoreType }}
-      </span>
-      <div id="type-select-help-icon" class="signpost-container relative">
-        <atoms-the-icon
-          data-id="toggle-type-select-help-icon"
-          fill="#0072a3"
-          width="24px"
-          height="24px"
-          name="info-circle"
-          @click="isShowTypeHelp = !isShowTypeHelp"
-        />
-        <atoms-tooltip-signpost
-          v-if="isShowTypeHelp"
-          elem-id="type-select-help-icon"
-          test-id="select-datastore-type"
-          @hide="isShowTypeHelp = false"
-        >
-          <p class="help-desc">
-            {{ localization.common.datastoreTypeHelpDesc }}
-          </p>
-        </atoms-tooltip-signpost>
-      </div>
-    </div>
-
-    <common-select-radio-group
-      v-model="datastoreTypeModeLocal"
-      :options="props.options"
-      @change="onChangeType"
-    />
-  </section>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
-
-const datastoreTypeModeLocal = defineModel<number>({ required: true })
-const props = defineProps<{
-  options: UI_I_RadioOption[]
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const onChangeType = (): void => {
-  // model.value.name = 'Datastore' // default value is  'Datastore' every time
-}
-
-const isShowTypeHelp = ref<boolean>(false)
-</script>
-
-<style lang="scss" scoped>
-.datastore-types {
-  .signpost-container {
-    display: flex;
-    cursor: pointer;
-
-    .help-desc-container {
-      max-width: 350px;
-    }
-  }
-  .header-row {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-}
-</style>
+<template>
+  <section class="datastore-types">
+    <div class="header-row">
+      <span class="datastore-types__subtitle">
+        {{ localization.common.specifyDatastoreType }}
+      </span>
+      <div id="type-select-help-icon" class="signpost-container relative">
+        <atoms-the-icon
+          data-id="toggle-type-select-help-icon"
+          fill="#0072a3"
+          width="24px"
+          height="24px"
+          name="info-circle"
+          @click="isShowTypeHelp = !isShowTypeHelp"
+        />
+        <atoms-tooltip-signpost
+          v-if="isShowTypeHelp"
+          elem-id="type-select-help-icon"
+          test-id="select-datastore-type"
+          @hide="isShowTypeHelp = false"
+        >
+          <p class="help-desc">
+            {{ localization.common.datastoreTypeHelpDesc }}
+          </p>
+        </atoms-tooltip-signpost>
+      </div>
+    </div>
+
+    <common-select-radio-group
+      v-model="datastoreTypeModeLocal"
+      :options="props.options"
+      @change="onChangeType"
+    />
+  </section>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
+
+const datastoreTypeModeLocal = defineModel<number>({ required: true })
+const props = defineProps<{
+  options: UI_I_RadioOption[]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onChangeType = (): void => {
+  // model.value.name = 'Datastore' // default value is  'Datastore' every time
+}
+
+const isShowTypeHelp = ref<boolean>(false)
+</script>
+
+<style lang="scss" scoped>
+.datastore-types {
+  .signpost-container {
+    display: flex;
+    cursor: pointer;
+
+    .help-desc-container {
+      max-width: 350px;
+    }
+  }
+  .header-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+}
+</style>

package/components/common/wizards/datastore/add/steps/typeMode/lib/config/typeOptions.ts

@@ -1,43 +1,43 @@
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
-
-export const datastoreTypesFunc = (
-  localization: UI_I_Localization,
-  _project?: UI_T_Project
-): UI_I_RadioOption[] => {
-  return [
-    {
-      id: 'datastore-type-shared-storm',
-      label: localization.common.stormSharedStorage,
-      value: 2,
-      disabled: false,
-      description: localization.common.sharedStormDesc,
-      isTooltip: false,
-      tooltipContent: localization.common.stormSharedStorageHelpDesc,
-      testId: 'datastore-type-shared-storm',
-    },
-    {
-      id: 'datastore-type-nfs',
-      label: localization.common.nfs,
-      value: 4,
-      disabled: false,
-      description: localization.common.nfsDesc,
-      isTooltip: false,
-      tooltipContent: localization.common.nfsHelpDesc,
-      testId: 'datastore-type-nfs',
-    },
-  ]
-
-  // if (project === 'procurator') {
-  //   types.unshift({
-  //     label: localization.common.localStorage,
-  //     value: 1,
-  //     disabled: false,
-  //     description: localization.common.localDesc,
-  //     isTooltip: false,
-  //     tooltipContent: localization.common.localStorageHelpDesc,
-  //     testId: 'datastore-type-local',
-  //   })
-  // }
-}
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
+
+export const datastoreTypesFunc = (
+  localization: UI_I_Localization,
+  _project?: UI_T_Project
+): UI_I_RadioOption[] => {
+  return [
+    {
+      id: 'datastore-type-shared-storm',
+      label: localization.common.stormSharedStorage,
+      value: 2,
+      disabled: false,
+      description: localization.common.sharedStormDesc,
+      isTooltip: false,
+      tooltipContent: localization.common.stormSharedStorageHelpDesc,
+      testId: 'datastore-type-shared-storm',
+    },
+    {
+      id: 'datastore-type-nfs',
+      label: localization.common.nfs,
+      value: 4,
+      disabled: false,
+      description: localization.common.nfsDesc,
+      isTooltip: false,
+      tooltipContent: localization.common.nfsHelpDesc,
+      testId: 'datastore-type-nfs',
+    },
+  ]
+
+  // if (project === 'procurator') {
+  //   types.unshift({
+  //     label: localization.common.localStorage,
+  //     value: 1,
+  //     disabled: false,
+  //     description: localization.common.localDesc,
+  //     isTooltip: false,
+  //     tooltipContent: localization.common.localStorageHelpDesc,
+  //     testId: 'datastore-type-local',
+  //   })
+  // }
+}