bfg-common 1.5.172 → 1.5.174

package/components/common/monitor/advanced/tools/chartOptionsModal/actions/ActionsNew.vue

@@ -1,184 +1,180 @@
-<template>
-  <div class="chart-options-actions">
-    <ui-select
-      v-model="localSelectedChartOptionLocal"
-      :items="props.chartOptions"
-      :label="localization.common.options"
-      :margin-between-trigger="4"
-      select-width="100%"
-      show-text
-      test-id="chart-options-select"
-    />
-    <ui-input
-      v-model="newChartName"
-      :placeholder="localization.common.name"
-      :label="localization.common.name"
-      :error="newChartNameError"
-      test-id="chart-name"
-      type="text"
-      input-style="rounded"
-    />
-    <ui-button
-      test-id="save-option-name"
-      type="primary"
-      variant="text"
-      size="sm"
-      is-without-sizes
-      @click="onSaveNewName"
-    >
-      <template #icon>
-        <ui-icon name="check" width="18" height="18"></ui-icon>
-      </template>
-      <span>{{ localization.common.save }}</span>
-    </ui-button>
-    <span class="seperator-name-actions"></span>
-    <ui-button
-      :disabled="!props.isDisabledDeleteAction"
-      test-id="delete-option-name"
-      type="primary"
-      variant="text"
-      size="md"
-      is-without-sizes
-      @click="emits('delete-action')"
-    >
-      <template #icon>
-        <ui-icon name="delete" width="18" height="18"></ui-icon>
-      </template>
-      <span>{{ localization.common.delete }}</span>
-    </ui-button>
-  </div>
-
-  <common-modals-confirmation
-    v-if="isConfirmModalLocal"
-    :headline="localization.inventoryMonitor.deleteConfirmationChartOption"
-    :description="confirmModalDesc"
-    :modal-texts="modalTexts"
-    @hide-modal="isConfirmModalLocal = false"
-    @confirm="onApplyDelete"
-  />
-</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'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-
-const localSelectedChartOptionLocal = defineModel<string>(
-  'localSelectedChartOption',
-  {
-    required: true,
-  }
-)
-const isConfirmModalLocal = defineModel<boolean>('isConfirmModal', {
-  required: true,
-})
-
-const props = defineProps<{
-  chartOptions: UI_I_OptionItem[]
-  isDisabledDeleteAction: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'save-options', value: string): void
-  (event: 'delete-action'): void
-  (event: 'apply-delete'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const modalTexts = computed<UI_I_ModalTexts>(() => {
-  return {
-    button1: localization.value.common.cancel,
-    button2: localization.value.common.delete,
-  }
-})
-
-const newChartName = ref<string>('')
-watch(localSelectedChartOptionLocal, (newValue) => {
-  newChartName.value = props.isDisabledDeleteAction ? newValue : ''
-})
-
-const newChartNameError = ref<string>('')
-
-const onSaveNewName = (): void => {
-  if (
-    localSelectedChartOptionLocal.value === 'select_options' &&
-    !newChartName.value
-  ) {
-    newChartNameError.value = localization.value.common.fieldRequired
-  } else if (
-    !['select_options', 'default'].includes(
-      localSelectedChartOptionLocal.value
-    ) &&
-    !newChartName.value
-  ) {
-    newChartNameError.value = localization.value.common.fieldRequired
-  } else {
-    if (newChartName.value) {
-      newChartNameError.value = ''
-      emits('save-options', newChartName.value)
-    }
-  }
-}
-watch(
-  localSelectedChartOptionLocal,
-  (newValue) => {
-    if (newValue === 'select_options' && !newChartName.value)
-      newChartNameError.value = localization.value.common.fieldRequired
-  },
-  { immediate: true }
-)
-
-const onApplyDelete = (): void => {
-  emits('apply-delete')
-  newChartName.value = ''
-}
-
-const confirmModalDesc = computed<string>(() =>
-  localization.value.inventoryMonitor.deleteConfirmationChartOptionDesc.replace(
-    '{0}',
-    localSelectedChartOptionLocal.value
-  )
-)
-</script>
-
-<style>
-:root {
-  --chart-options-name-actions-seperate-border-color: #e9ebeda3;
-  --chart-options-name-actions-delete-disabled-text-color: #bdc3c7;
-}
-:root.dark-theme {
-  --chart-options-name-actions-seperate-border-color: #e9ebed1f;
-  --chart-options-name-actions-delete-disabled-text-color: rgba(
-    189,
-    195,
-    199,
-    0.72
-  );
-}
-</style>
-<style scoped lang="scss">
-.chart-options-actions {
-  display: grid;
-  grid-template-columns: 2fr 2fr max-content max-content max-content;
-  align-items: center;
-  grid-gap: 16px;
-  padding-right: 32px;
-
-  & > :nth-child(2) {
-    height: 36px;
-  }
-  .seperator-name-actions {
-    width: 1px;
-    background-color: var(--chart-options-name-actions-seperate-border-color);
-    height: 24px;
-  }
-  #delete-option-name {
-    color: #ea3223;
-
-    &:disabled {
-      color: var(--chart-options-name-actions-delete-disabled-text-color);
-    }
-  }
-}
-</style>
+<template>
+  <div class="chart-options-actions">
+    <ui-select
+      v-model="localSelectedChartOptionLocal"
+      :items="props.chartOptions"
+      :label="localization.common.options"
+      :margin-between-trigger="4"
+      select-width="100%"
+      show-text
+      test-id="chart-options-select"
+    />
+    <ui-input
+      v-model="newChartName"
+      :placeholder="localization.common.name"
+      :label="localization.common.name"
+      :error="newChartNameError"
+      test-id="chart-name"
+      type="text"
+      input-style="rounded"
+    />
+    <ui-button
+      test-id="save-option-name"
+      type="primary"
+      variant="text"
+      size="sm"
+      is-without-sizes
+      @click="onSaveNewName"
+    >
+      <template #icon>
+        <ui-icon name="check" width="18" height="18"></ui-icon>
+      </template>
+      <span>{{ localization.common.save }}</span>
+    </ui-button>
+    <span class="seperator-name-actions"></span>
+    <ui-button
+      :disabled="!props.isDisabledDeleteAction"
+      test-id="delete-option-name"
+      type="primary"
+      variant="text"
+      size="md"
+      is-without-sizes
+      @click="emits('delete-action')"
+    >
+      <template #icon>
+        <ui-icon name="delete" width="18" height="18"></ui-icon>
+      </template>
+      <span>{{ localization.common.delete }}</span>
+    </ui-button>
+  </div>
+
+  <common-modals-confirmation
+    v-if="isConfirmModalLocal"
+    :headline="localization.inventoryMonitor.deleteConfirmationChartOption"
+    :description="confirmModalDesc"
+    :modal-texts="modalTexts"
+    @hide-modal="isConfirmModalLocal = false"
+    @confirm="onApplyDelete"
+  />
+</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'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const localSelectedChartOptionLocal = defineModel<string>(
+  'localSelectedChartOption',
+  {
+    required: true,
+  }
+)
+const isConfirmModalLocal = defineModel<boolean>('isConfirmModal', {
+  required: true,
+})
+
+const props = defineProps<{
+  chartOptions: UI_I_OptionItem[]
+  isDisabledDeleteAction: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'save-options', value: string): void
+  (event: 'delete-action'): void
+  (event: 'apply-delete'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const modalTexts = computed<UI_I_ModalTexts>(() => {
+  return {
+    button1: localization.value.common.cancel,
+    button2: localization.value.common.delete,
+  }
+})
+
+const newChartName = ref<string>('')
+watch(localSelectedChartOptionLocal, (newValue) => {
+  newChartName.value = props.isDisabledDeleteAction ? newValue : ''
+})
+
+const newChartNameError = ref<string>('')
+
+const onSaveNewName = (): void => {
+  if (
+    localSelectedChartOptionLocal.value === 'select_options' &&
+    !newChartName.value
+  ) {
+    newChartNameError.value = localization.value.common.fieldRequired
+  } else if (
+    !['select_options', 'default'].includes(
+      localSelectedChartOptionLocal.value
+    ) &&
+    !newChartName.value
+  ) {
+    newChartNameError.value = localization.value.common.fieldRequired
+  } else {
+    if (newChartName.value) {
+      newChartNameError.value = ''
+      emits('save-options', newChartName.value)
+    }
+  }
+}
+watch(localSelectedChartOptionLocal, (newValue) => {
+  if (newValue === 'select_options' && !newChartName.value)
+    newChartNameError.value = localization.value.common.fieldRequired
+})
+
+const onApplyDelete = (): void => {
+  emits('apply-delete')
+  newChartName.value = ''
+}
+
+const confirmModalDesc = computed<string>(() =>
+  localization.value.inventoryMonitor.deleteConfirmationChartOptionDesc.replace(
+    '{0}',
+    localSelectedChartOptionLocal.value
+  )
+)
+</script>
+
+<style>
+:root {
+  --chart-options-name-actions-seperate-border-color: #e9ebeda3;
+  --chart-options-name-actions-delete-disabled-text-color: #bdc3c7;
+}
+:root.dark-theme {
+  --chart-options-name-actions-seperate-border-color: #e9ebed1f;
+  --chart-options-name-actions-delete-disabled-text-color: rgba(
+    189,
+    195,
+    199,
+    0.72
+  );
+}
+</style>
+<style scoped lang="scss">
+.chart-options-actions {
+  display: grid;
+  grid-template-columns: 2fr 2fr max-content max-content max-content;
+  align-items: center;
+  grid-gap: 16px;
+  padding-right: 32px;
+
+  & > :nth-child(2) {
+    height: 36px;
+  }
+  .seperator-name-actions {
+    width: 1px;
+    background-color: var(--chart-options-name-actions-seperate-border-color);
+    height: 24px;
+  }
+  #delete-option-name {
+    color: #ea3223;
+
+    &:disabled {
+      color: var(--chart-options-name-actions-delete-disabled-text-color);
+    }
+  }
+}
+</style>