bfg-common 1.4.355 → 1.4.357

package/components/common/portlets/tag/CreateCategory.vue

@@ -1,276 +1,276 @@
-<template>
-  <ui-modal
-    v-if="props.isShowModal"
-    :title="localization.common.createCategory"
-    test-id="modal-create-category"
-    width="656px"
-    :texts="createCategoryTexts"
-    @hide="emits('cancel')"
-    @submit="onCreate"
-  >
-    <template #header></template>
-    <template #content>
-      <div class="create-category">
-        <div class="create-category-name">
-          <ui-input
-            v-model="data.categoryName"
-            test-id="category-name-input"
-            :label="localization.common.categoryName"
-            size="lg"
-            :error="errorText"
-          />
-        </div>
-        <div class="create-category-description">
-          <ui-textarea
-            v-model="data.description"
-            test-id="description-textarea"
-            :label="localization.common.description"
-          />
-        </div>
-        <div class="create-category-tpo">
-          <span class="create-category-tpo-title sub-title">{{
-            localization.common.tagsPerObject
-          }}</span>
-          <div class="create-category-tpo-radio">
-            <div class="create-category-tpo-radio-item">
-              <ui-radio
-                v-model="data.tagsPerObject"
-                test-id="tags-per-object-one"
-                size="lg"
-                :label="localization.common.oneTag"
-                value="0"
-              />
-            </div>
-            <div class="create-category-tpo-radio-item">
-              <ui-radio
-                v-model="data.tagsPerObject"
-                test-id="tags-per-object-many"
-                size="lg"
-                :label="localization.common.manyTag"
-                value="1"
-              />
-            </div>
-          </div>
-        </div>
-        <div class="create-category-types">
-          <div class="create-category-types-header">
-            <span class="create-category-types-header-title sub-title">
-              {{ localization.common.associableObjectTypes }}
-            </span>
-            <span class="create-category-types-header-selection">
-              <ui-button
-                variant="text"
-                is-without-height
-                is-without-sizes
-                :test-id="
-                  isAllSelected ? 'deselect-all-tags' : 'select-all-tags'
-                "
-                @click="onSelectAllTypes"
-              >
-                {{ selectAllText }}
-              </ui-button>
-            </span>
-          </div>
-          <div class="create-category-types-body">
-            <div class="create-category-types-body-col">
-              <template
-                v-for="(type, index) in createCategoryTypes"
-                :key="type"
-              >
-                <div v-if="index % 2 === 0">
-                  <ui-checkbox
-                    v-model="data.types[type]"
-                    :label-text="localization.common[type]"
-                    :test-id="`checkbox-type-${type}`"
-                  />
-                </div>
-              </template>
-            </div>
-            <div class="create-category-types-body-col">
-              <template
-                v-for="(type, index) in createCategoryTypes"
-                :key="type"
-              >
-                <div v-if="index % 2 === 1">
-                  <ui-checkbox
-                    v-model="data.types[type]"
-                    :label-text="localization.common[type]"
-                    :test-id="`checkbox-type-${type}`"
-                  />
-                </div>
-              </template>
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-    <template #footerLeftContent>
-      <span></span>
-    </template>
-  </ui-modal>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_ArbitraryObject,
-  UI_I_Localization,
-} from '~/lib/models/interfaces'
-import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
-import type { I_CreateCategoryData } from '~/components/common/portlets/tag/lib/models/interfaces'
-import {
-  createCategoryData,
-  createCategoryTypes,
-} from '~/components/common/portlets/tag/lib/config/config'
-
-const props = defineProps<{
-  isShowModal: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'cancel'): void
-  (event: 'create', value: I_CreateCategoryData): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const createCategoryTexts = computed<UI_I_ModalTexts>(() => ({
-  button1: localization.value.common.cancel,
-  button2: localization.value.common.create,
-}))
-
-const data = ref<I_CreateCategoryData>(useDeepCopy(createCategoryData))
-
-const isAllSelected = computed<boolean>(() => {
-  let result = true
-
-  createCategoryTypes.forEach((key) => {
-    if (!data.value.types[key]) {
-      result = false
-    }
-  })
-
-  return result
-})
-
-const selectAllText = computed<string>(() =>
-  isAllSelected.value
-    ? localization.value.common.deselectAll
-    : localization.value.common.selectAll
-)
-
-const isShowValidation = ref<boolean>(false)
-const validationData = computed<boolean>(() => !data.value.categoryName.trim())
-const errorText = computed<string>(() =>
-  validationData.value && isShowValidation.value
-    ? localization.value.common.fieldRequired
-    : ''
-)
-
-const onCreate = (): void => {
-  if (validationData.value) {
-    isShowValidation.value = true
-    return
-  }
-  emits('create', data.value)
-}
-
-watch(
-  () => data.value.categoryName,
-  () => {
-    isShowValidation.value = false
-  }
-)
-
-const onSelectAllTypes = (): void => {
-  const newData: UI_I_ArbitraryObject<boolean> = {}
-  for (const key in data.value.types) {
-    newData[key] = !isAllSelected.value
-  }
-  data.value.types = newData
-}
-</script>
-
-<style>
-:root {
-  --sub-title-color: #4d5d69;
-  --separator-color: #e9ebed;
-}
-:root.dark-theme {
-  --sub-title-color: #e9eaec;
-  --separator-color: #e9ebed1f;
-}
-</style>
-
-<style scoped lang="scss">
-.create-category {
-  padding: 16px 32px;
-  &-name {
-    margin-bottom: 16px;
-  }
-  &-description {
-    margin-bottom: 24px;
-    :deep(textarea) {
-      height: 68px;
-      resize: none;
-    }
-  }
-  &-tpo {
-    padding-bottom: 32px;
-    border-bottom: 1px solid var(--separator-color);
-
-    &-title {
-      margin-bottom: 16px;
-      font-size: 16px;
-      font-weight: 500;
-      line-height: 20px;
-      color: var(--sub-title-color);
-      display: inline-block;
-    }
-    &-radio {
-      display: flex;
-      column-gap: 16px;
-
-      &-item {
-        width: calc(50% - 8px);
-      }
-    }
-  }
-  &-types {
-    margin-top: 24px;
-
-    &-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 16px;
-
-      &-title {
-        font-size: 16px;
-        font-weight: 500;
-        line-height: 20px;
-        color: var(--sub-title-color);
-      }
-
-      &-selection {
-        :deep(button.ui-btn) {
-          line-height: 16px;
-          width: fit-content;
-        }
-      }
-    }
-    &-body {
-      display: flex;
-      justify-content: space-between;
-      column-gap: 16px;
-
-      &-col {
-        width: calc(50% - 8px);
-
-        div:not(:last-of-type) {
-          margin-bottom: 12px;
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <ui-modal
+    v-if="props.isShowModal"
+    :title="localization.common.createCategory"
+    test-id="modal-create-category"
+    width="656px"
+    :texts="createCategoryTexts"
+    @hide="emits('cancel')"
+    @submit="onCreate"
+  >
+    <template #header></template>
+    <template #content>
+      <div class="create-category">
+        <div class="create-category-name">
+          <ui-input
+            v-model="data.categoryName"
+            test-id="category-name-input"
+            :label="localization.common.categoryName"
+            size="lg"
+            :error="errorText"
+          />
+        </div>
+        <div class="create-category-description">
+          <ui-textarea
+            v-model="data.description"
+            test-id="description-textarea"
+            :label="localization.common.description"
+          />
+        </div>
+        <div class="create-category-tpo">
+          <span class="create-category-tpo-title sub-title">{{
+            localization.common.tagsPerObject
+          }}</span>
+          <div class="create-category-tpo-radio">
+            <div class="create-category-tpo-radio-item">
+              <ui-radio
+                v-model="data.tagsPerObject"
+                test-id="tags-per-object-one"
+                size="lg"
+                :label="localization.common.oneTag"
+                value="0"
+              />
+            </div>
+            <div class="create-category-tpo-radio-item">
+              <ui-radio
+                v-model="data.tagsPerObject"
+                test-id="tags-per-object-many"
+                size="lg"
+                :label="localization.common.manyTag"
+                value="1"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="create-category-types">
+          <div class="create-category-types-header">
+            <span class="create-category-types-header-title sub-title">
+              {{ localization.common.associableObjectTypes }}
+            </span>
+            <span class="create-category-types-header-selection">
+              <ui-button
+                variant="text"
+                is-without-height
+                is-without-sizes
+                :test-id="
+                  isAllSelected ? 'deselect-all-tags' : 'select-all-tags'
+                "
+                @click="onSelectAllTypes"
+              >
+                {{ selectAllText }}
+              </ui-button>
+            </span>
+          </div>
+          <div class="create-category-types-body">
+            <div class="create-category-types-body-col">
+              <template
+                v-for="(type, index) in createCategoryTypes"
+                :key="type"
+              >
+                <div v-if="index % 2 === 0">
+                  <ui-checkbox
+                    v-model="data.types[type]"
+                    :label-text="localization.common[type]"
+                    :test-id="`checkbox-type-${type}`"
+                  />
+                </div>
+              </template>
+            </div>
+            <div class="create-category-types-body-col">
+              <template
+                v-for="(type, index) in createCategoryTypes"
+                :key="type"
+              >
+                <div v-if="index % 2 === 1">
+                  <ui-checkbox
+                    v-model="data.types[type]"
+                    :label-text="localization.common[type]"
+                    :test-id="`checkbox-type-${type}`"
+                  />
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #footerLeftContent>
+      <span></span>
+    </template>
+  </ui-modal>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_ArbitraryObject,
+  UI_I_Localization,
+} from '~/lib/models/interfaces'
+import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
+import type { I_CreateCategoryData } from '~/components/common/portlets/tag/lib/models/interfaces'
+import {
+  createCategoryData,
+  createCategoryTypes,
+} from '~/components/common/portlets/tag/lib/config/config'
+
+const props = defineProps<{
+  isShowModal: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'cancel'): void
+  (event: 'create', value: I_CreateCategoryData): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const createCategoryTexts = computed<UI_I_ModalTexts>(() => ({
+  button1: localization.value.common.cancel,
+  button2: localization.value.common.create,
+}))
+
+const data = ref<I_CreateCategoryData>(useDeepCopy(createCategoryData))
+
+const isAllSelected = computed<boolean>(() => {
+  let result = true
+
+  createCategoryTypes.forEach((key) => {
+    if (!data.value.types[key]) {
+      result = false
+    }
+  })
+
+  return result
+})
+
+const selectAllText = computed<string>(() =>
+  isAllSelected.value
+    ? localization.value.common.deselectAll
+    : localization.value.common.selectAll
+)
+
+const isShowValidation = ref<boolean>(false)
+const validationData = computed<boolean>(() => !data.value.categoryName.trim())
+const errorText = computed<string>(() =>
+  validationData.value && isShowValidation.value
+    ? localization.value.common.fieldRequired
+    : ''
+)
+
+const onCreate = (): void => {
+  if (validationData.value) {
+    isShowValidation.value = true
+    return
+  }
+  emits('create', data.value)
+}
+
+watch(
+  () => data.value.categoryName,
+  () => {
+    isShowValidation.value = false
+  }
+)
+
+const onSelectAllTypes = (): void => {
+  const newData: UI_I_ArbitraryObject<boolean> = {}
+  for (const key in data.value.types) {
+    newData[key] = !isAllSelected.value
+  }
+  data.value.types = newData
+}
+</script>
+
+<style>
+:root {
+  --sub-title-color: #4d5d69;
+  --separator-color: #e9ebed;
+}
+:root.dark-theme {
+  --sub-title-color: #e9eaec;
+  --separator-color: #e9ebed1f;
+}
+</style>
+
+<style scoped lang="scss">
+.create-category {
+  padding: 16px 32px;
+  &-name {
+    margin-bottom: 16px;
+  }
+  &-description {
+    margin-bottom: 24px;
+    :deep(textarea) {
+      height: 68px;
+      resize: none;
+    }
+  }
+  &-tpo {
+    padding-bottom: 32px;
+    border-bottom: 1px solid var(--separator-color);
+
+    &-title {
+      margin-bottom: 16px;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 20px;
+      color: var(--sub-title-color);
+      display: inline-block;
+    }
+    &-radio {
+      display: flex;
+      column-gap: 16px;
+
+      &-item {
+        width: calc(50% - 8px);
+      }
+    }
+  }
+  &-types {
+    margin-top: 24px;
+
+    &-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+
+      &-title {
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 20px;
+        color: var(--sub-title-color);
+      }
+
+      &-selection {
+        :deep(button.ui-btn) {
+          line-height: 16px;
+          width: fit-content;
+        }
+      }
+    }
+    &-body {
+      display: flex;
+      justify-content: space-between;
+      column-gap: 16px;
+
+      &-col {
+        width: calc(50% - 8px);
+
+        div:not(:last-of-type) {
+          margin-bottom: 12px;
+        }
+      }
+    }
+  }
+}
+</style>