bfg-common 1.4.814 → 1.4.816

package/components/common/monitor/overview/filters/customIntervalModal/CustomIntervalModalOld.vue

@@ -1,155 +1,161 @@
-<template>
-  <atoms-modal
-      width="580px"
-      class="add-permission"
-      :show="true"
-      :title="props.titleIntervalModal"
-      :second-title="props.selectedItemName"
-      test-id="overview-custom-interval-modal"
-      @hide="onHide"
-      @submit="onSubmit"
-  >
-    <template #modalBody>
-      <atoms-alert
-          v-show="alertShow"
-          status="alert-danger"
-          :items="props.alertItems"
-          test-id="overview-alert"
-          @remove="alertShow = false"
-      />
-
-      <table>
-        <tbody>
-        <tr>
-          <td class="text-right">
-            <label class="custom-time-label">
-                <span class="custom-time-label-text text-capitalize">
-                  {{ localization.common.from }}:
-                </span>
-            </label>
-          </td>
-          <td>
-            <div class="flex-align-center input-row-container">
-              <input
-                  id="current-date-from"
-                  v-model.lazy="currentDateFrom"
-                  data-id="current-date-from-input"
-                  type="text"
-                  class="chart-option-setting-row custom-time-input first-from"
-              />
-              <div class="section-datepicker">
-                <atoms-datepicker
-                    v-model="dateFrom"
-                    :lang="props.currentLang"
-                    class="chart-option-setting-row custom-time-input"
-                    test-id="overview-first-date-datepicker"
-                    @update="onUpdateDateFrom"
-                />
-              </div>
-              <input
-                  id="current-time-from"
-                  v-model="currentTimeFrom"
-                  data-id="current-time-from-input"
-                  type="text"
-                  class="chart-option-setting-row custom-time-input"
-              />
-            </div>
-          </td>
-        </tr>
-        <tr>
-          <td class="text-right">
-            <label class="custom-time-label">
-                <span class="custom-time-label-text text-capitalize">
-                  {{ localization.common.to }}:
-                </span>
-            </label>
-          </td>
-          <td>
-            <div class="flex-align-center input-row-container">
-              <input
-                  id="current-date-to"
-                  v-model.lazy="currentDateTo"
-                  data-id="current-date-to-input"
-                  type="text"
-                  class="chart-option-setting-row custom-time-input first-from"
-              />
-              <div class="section-datepicker">
-                <atoms-datepicker
-                    v-model="dateTo"
-                    :lang="props.currentLang"
-                    class="chart-option-setting-row custom-time-input"
-                    test-id="overview-first-date-to-datepicker"
-                    @update="onUpdateDateTo"
-                />
-              </div>
-              <input
-                  id="current-time-to"
-                  v-model="currentTimeTo"
-                  data-id="current-time-to-input"
-                  type="text"
-                  class="chart-option-setting-row custom-time-input"
-              />
-            </div>
-          </td>
-        </tr>
-        <tr>
-          <td></td>
-          <td class="text-format-date">
-            ({{ localization.inventoryMonitor.dateTimeIsoFormat }})
-          </td>
-        </tr>
-        </tbody>
-      </table>
-    </template>
-  </atoms-modal>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const alertShow = defineModel<boolean>('alert-show')
-const currentDateFrom = defineModel<boolean>('current-date-from')
-const dateFrom = defineModel<boolean>('date-from')
-const currentTimeFrom = defineModel<boolean>('current-time-from')
-const currentDateTo = defineModel<boolean>('current-date-to')
-const dateTo = defineModel<boolean>('date-to')
-const currentTimeTo = defineModel<boolean>('current-time-to')
-
-const props = defineProps<{
-  titleIntervalModal: string
-  selectedItemName: string
-  currentLang: string
-  alertItems: any[]
-}>()
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'submit', value: number[]): void
-  (event: 'update-date-from', value: any): void
-  (event: 'update-date-to', value: any): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const onUpdateDateFrom = (event: any): void => {
-  emits('update-date-from', event)
-}
-const onUpdateDateTo = (event: any): void => {
-  emits('update-date-to', event)
-}
-</script>
-
-<style scoped lang="scss">
-.input-row-container {
-  padding-left: 5px;
-
-  .custom-time-input {
-    max-width: 120px;
-    margin-right: 15px;
-  }
-}
-.text-format-date {
-  display: inline-block;
-  margin-top: 5px;
-}
-</style>
+<template>
+  <atoms-modal
+    show
+    width="580px"
+    :title="props.titleIntervalModal"
+    :second-title="props.selectedItemName"
+    test-id="overview-custom-interval-modal"
+    @hide="onHide"
+    @submit="onSubmit"
+  >
+    <template #modalBody>
+      <atoms-alert
+        v-show="alertShow"
+        status="alert-danger"
+        :items="props.alertItems"
+        test-id="overview-alert"
+        @remove="alertShow = false"
+      />
+
+      <table>
+        <tbody>
+          <tr>
+            <td class="text-right">
+              <label class="custom-time-label">
+                <span class="custom-time-label-text text-capitalize">
+                  {{ localization.common.from }}:
+                </span>
+              </label>
+            </td>
+            <td>
+              <div class="flex-align-center input-row-container">
+                <input
+                  id="current-date-from"
+                  v-model.lazy="currentDateFrom"
+                  data-id="current-date-from-input"
+                  type="text"
+                  class="chart-option-setting-row custom-time-input first-from"
+                />
+                <div class="section-datepicker">
+                  <atoms-datepicker
+                    v-model="dateFrom"
+                    :lang="props.currentLang"
+                    class="chart-option-setting-row custom-time-input"
+                    test-id="overview-first-date-datepicker"
+                    @update="onUpdateDateFrom"
+                  />
+                </div>
+                <input
+                  id="current-time-from"
+                  v-model="currentTimeFrom"
+                  data-id="current-time-from-input"
+                  type="text"
+                  class="chart-option-setting-row custom-time-input"
+                />
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td class="text-right">
+              <label class="custom-time-label">
+                <span class="custom-time-label-text text-capitalize">
+                  {{ localization.common.to }}:
+                </span>
+              </label>
+            </td>
+            <td>
+              <div class="flex-align-center input-row-container">
+                <input
+                  id="current-date-to"
+                  v-model.lazy="currentDateTo"
+                  data-id="current-date-to-input"
+                  type="text"
+                  class="chart-option-setting-row custom-time-input first-from"
+                />
+                <div class="section-datepicker">
+                  <atoms-datepicker
+                    v-model="dateTo"
+                    :lang="props.currentLang"
+                    class="chart-option-setting-row custom-time-input"
+                    test-id="overview-first-date-to-datepicker"
+                    @update="onUpdateDateTo"
+                  />
+                </div>
+                <input
+                  id="current-time-to"
+                  v-model="currentTimeTo"
+                  data-id="current-time-to-input"
+                  type="text"
+                  class="chart-option-setting-row custom-time-input"
+                />
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td></td>
+            <td class="text-format-date">
+              ({{ localization.inventoryMonitor.dateTimeIsoFormat }})
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </template>
+  </atoms-modal>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const alertShow = defineModel<boolean>('alert-show')
+const currentDateFrom = defineModel<boolean>('current-date-from')
+const dateFrom = defineModel<boolean>('date-from')
+const currentTimeFrom = defineModel<boolean>('current-time-from')
+const currentDateTo = defineModel<boolean>('current-date-to')
+const dateTo = defineModel<boolean>('date-to')
+const currentTimeTo = defineModel<boolean>('current-time-to')
+
+const props = defineProps<{
+  titleIntervalModal: string
+  selectedItemName: string
+  currentLang: string
+  alertItems: any[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'submit'): void
+  (event: 'update-date-from', value: any): void
+  (event: 'update-date-to', value: any): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onUpdateDateFrom = (event: any): void => {
+  emits('update-date-from', event)
+}
+const onUpdateDateTo = (event: any): void => {
+  emits('update-date-to', event)
+}
+
+const onSubmit = (): void => {
+  emits('submit')
+}
+const onHide = (): void => {
+  emits('hide')
+}
+</script>
+
+<style scoped lang="scss">
+.input-row-container {
+  padding-left: 5px;
+
+  .custom-time-input {
+    max-width: 120px;
+    margin-right: 15px;
+  }
+}
+.text-format-date {
+  display: inline-block;
+  margin-top: 5px;
+}
+</style>

package/components/common/pages/home/StatusContent.vue

@@ -1,49 +1,49 @@
-<template>
-  <div class="entity-status-content">
-    <div v-for="(text, value) in props.items" :key="value" class="item">
-      <h3 class="entity-status-item-value">
-        {{ text }}
-      </h3>
-      <div class="entity-status-item-status">
-        {{ localization.common[value] }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_Hosts } from '~/components/common/pages/home/lib/models/interfaces'
-
-const props = defineProps<{
-  items: UI_I_Hosts
-}>()
-const localization = computed<UI_I_Localization>(() => useLocal())
-</script>
-
-<style scoped lang="scss">
-.entity-status-content {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  min-height: 100px;
-
-  .item {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    color: inherit;
-    background-color: inherit;
-
-    .entity-status-item-value {
-      font-size: 22px;
-      font-weight: 200;
-    }
-    .entity-status-item-status {
-      font-size: 13px;
-      margin-top: 5px;
-    }
-  }
-}
-</style>
+<template>
+  <div class="entity-status-content">
+    <div v-for="(text, value) in props.items" :key="value" class="item">
+      <h3 class="entity-status-item-value">
+        {{ text }}
+      </h3>
+      <div class="entity-status-item-status">
+        {{ localization.common[value] }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Hosts } from '~/components/common/pages/home/lib/models/interfaces'
+
+const props = defineProps<{
+  items: UI_I_Hosts
+}>()
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+.entity-status-content {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  min-height: 100px;
+
+  .item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: inherit;
+    background-color: inherit;
+
+    .entity-status-item-value {
+      font-size: 22px;
+      font-weight: 200;
+    }
+    .entity-status-item-status {
+      font-size: 13px;
+      margin-top: 5px;
+    }
+  }
+}
+</style>

package/components/common/pages/home/headline/Headline.vue

@@ -1,45 +1,45 @@
-<template>
-  <div class="home-headline">
-    <common-pages-home-headline-new
-      v-if="isNewView"
-      v-model="selectedZone"
-      :data="zoneOptionList"
-      :project="props.project"
-    />
-
-    <common-pages-home-headline-old
-      v-else
-      v-model="selectedZone"
-      :data="zoneOptionList"
-      :project="props.project"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_ZoneList } from '~/components/common/pages/home/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-
-const selectedZone = defineModel<string>('selectedZone', { required: true })
-
-const props = defineProps<{
-  zoneList: UI_I_ZoneList[]
-  project: UI_T_Project
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const zoneOptionList = computed<UI_I_ZoneList[]>(() => props.zoneList)
-</script>
-
-<style lang="scss">
-:root {
-  --home-title-color: #4d5d69;
-}
-
-:root.dark-theme {
-  --home-title-color: #e9eaec;
-}
-</style>
+<template>
+  <div class="home-headline">
+    <common-pages-home-headline-new
+      v-if="isNewView"
+      v-model="selectedZone"
+      :data="zoneOptionList"
+      :project="props.project"
+    />
+
+    <common-pages-home-headline-old
+      v-else
+      v-model="selectedZone"
+      :data="zoneOptionList"
+      :project="props.project"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_ZoneList } from '~/components/common/pages/home/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+
+const selectedZone = defineModel<string>('selectedZone', { required: true })
+
+const props = defineProps<{
+  zoneList: UI_I_ZoneList[]
+  project: UI_T_Project
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const zoneOptionList = computed<UI_I_ZoneList[]>(() => props.zoneList)
+</script>
+
+<style lang="scss">
+:root {
+  --home-title-color: #4d5d69;
+}
+
+:root.dark-theme {
+  --home-title-color: #e9eaec;
+}
+</style>

package/components/common/pages/home/headline/HeadlineNew.vue

@@ -1,71 +1,71 @@
-<template>
-  <div class="container-flex">
-    <h1>{{ localization.mainNavigation.home }}</h1>
-
-    <ui-select
-      v-if="isProjectSphere"
-      v-model="selectedZoneModel"
-      :items="selectItems"
-      :disabled="!selectItems.length"
-      width="165px"
-      select-width="100%"
-      size="sm"
-      test-id="home-zone-select"
-    >
-      <template v-if="!selectItems.length" #toggleContent>
-        <div class="default-toggle-content">
-          <span class="default-icon vsphere-icon-vcenter"></span>
-          <span class="text">{{ localization.common.default }}</span>
-        </div>
-      </template>
-    </ui-select>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-import type { UI_I_Option } from '~/components/atoms/select/lib/models/interfaces'
-
-const selectedZoneModel = defineModel<string>({ required: true })
-const props = defineProps<{
-  project: UI_T_Project
-  data: UI_I_Option[]
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isProjectSphere = ref<boolean>(props.project === 'sphere')
-
-const selectItems = computed<UI_I_Dropdown[]>(() => props.data)
-</script>
-
-<style lang="scss" scoped>
-@import '/assets/scss/common/mixins';
-.container-flex {
-  @include flex($align: center, $just: space-between);
-  & > h1 {
-    color: var(--home-title-color);
-    font-size: 22px;
-    font-weight: 400;
-    line-height: 26.63px;
-    margin-bottom: 19px;
-  }
-
-  .default-toggle-content {
-    display: flex;
-    align-items: center;
-    grid-gap: 8px;
-
-    .default-icon {
-      width: 20px;
-      height: 20px;
-    }
-    .text {
-      font-size: 13px;
-      font-weight: 400;
-    }
-  }
-}
-</style>
+<template>
+  <div class="container-flex">
+    <h1>{{ localization.mainNavigation.home }}</h1>
+
+    <ui-select
+      v-if="isProjectSphere"
+      v-model="selectedZoneModel"
+      :items="selectItems"
+      :disabled="!selectItems.length"
+      width="165px"
+      select-width="100%"
+      size="sm"
+      test-id="home-zone-select"
+    >
+      <template v-if="!selectItems.length" #toggleContent>
+        <div class="default-toggle-content">
+          <span class="default-icon vsphere-icon-vcenter"></span>
+          <span class="text">{{ localization.common.default }}</span>
+        </div>
+      </template>
+    </ui-select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_Option } from '~/components/atoms/select/lib/models/interfaces'
+
+const selectedZoneModel = defineModel<string>({ required: true })
+const props = defineProps<{
+  project: UI_T_Project
+  data: UI_I_Option[]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isProjectSphere = ref<boolean>(props.project === 'sphere')
+
+const selectItems = computed<UI_I_Dropdown[]>(() => props.data)
+</script>
+
+<style lang="scss" scoped>
+@import '/assets/scss/common/mixins';
+.container-flex {
+  @include flex($align: center, $just: space-between);
+  & > h1 {
+    color: var(--home-title-color);
+    font-size: 22px;
+    font-weight: 400;
+    line-height: 26.63px;
+    margin-bottom: 19px;
+  }
+
+  .default-toggle-content {
+    display: flex;
+    align-items: center;
+    grid-gap: 8px;
+
+    .default-icon {
+      width: 20px;
+      height: 20px;
+    }
+    .text {
+      font-size: 13px;
+      font-weight: 400;
+    }
+  }
+}
+</style>