@nethserver/ns8-ui-lib 0.0.43 → 0.0.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethserver/ns8-ui-lib",
-  "version": "0.0.43",
+  "version": "0.0.47",
   "description": "Vue.js library for NethServer 8 UI",
   "keywords": [
     "nethserver",

package/src/lib-components/NsBackupCard.vue

@@ -27,105 +27,83 @@
       </div>
     </template>
     <template v-else>
-      <div v-for="backup in backupsContainingInstance" :key="backup.id">
-        <div class="row">
-          <h5
-            v-if="backupsContainingInstance.length > 1"
-            class="title mg-top-sm"
-          >
-            {{ backup.name }}
-          </h5>
-        </div>
-        <div class="table-wrapper">
-          <div class="table">
-            <!-- status -->
-            <div class="tr">
-              <div class="td label">{{ statusLabel }}</div>
-              <div class="td status">
-                <span v-if="!backup.enabled" class="ns-warning">
-                  {{ backupDisabledLabel }}
-                </span>
-                <span
-                  v-else-if="
-                    status[backup.id] && status[backup.id].success == true
-                  "
-                  class="ns-success"
-                >
-                  <span>{{ statusSuccessLabel }}</span>
-                </span>
-                <span
-                  v-else-if="
-                    status[backup.id] && status[backup.id].success == false
-                  "
-                  class="ns-error"
-                >
-                  {{ statusErrorLabel }}
-                </span>
-                <span v-else class="ns-warning">
-                  {{ statusNotRunLabel }}
-                </span>
-              </div>
-            </div>
-            <!-- repository -->
-            <div class="tr">
-              <div class="td label">{{ repositoryLabel }}</div>
-              <div class="td">
-                {{ backup.repoName }}
-              </div>
-            </div>
-            <!-- completed -->
-            <div class="tr">
-              <div class="td label">{{ completedLabel }}</div>
-              <div class="td">
-                <span v-if="status[backup.id] && status[backup.id].end">
-                  {{
-                    (status[backup.id].end * 1000) | date("yyyy-MM-dd HH:mm:ss")
-                  }}
-                </span>
-                <span v-else>-</span>
-              </div>
-            </div>
-            <!-- duration -->
-            <div class="tr">
-              <div class="td label">{{ durationLabel }}</div>
-              <div class="td">
-                <span
-                  v-if="
-                    status[backup.id] &&
-                    status[backup.id].end &&
-                    status[backup.id].start
-                  "
-                >
-                  {{
-                    (status[backup.id].end - status[backup.id].start)
-                      | secondsFormat
-                  }}
-                </span>
-                <span v-else>-</span>
-              </div>
-            </div>
-            <!-- total size -->
-            <div class="tr">
-              <div class="td label">{{ totalSizeLabel }}</div>
-              <div class="td">
-                <span v-if="status[backup.id] && status[backup.id].total_size">
-                  {{ status[backup.id].total_size | byteFormat }}
-                </span>
-                <span v-else>-</span>
+      <div class="backups">
+        <div
+          v-for="backup in backupsContainingInstance"
+          :key="backup.id"
+          class="backup"
+        >
+          <div class="row">
+            <h5
+              v-if="backupsContainingInstance.length > 1"
+              class="title mg-top-sm"
+            >
+              {{ backup.name }}
+            </h5>
+          </div>
+          <div class="table-wrapper">
+            <div class="table">
+              <!-- status -->
+              <div class="tr">
+                <div class="td label">{{ statusLabel }}</div>
+                <div class="td status">
+                  <span v-if="!backup.enabled" class="ns-warning">
+                    {{ backupDisabledLabel }}
+                  </span>
+                  <span
+                    v-else-if="
+                      status[backup.id] && status[backup.id].success == true
+                    "
+                    class="ns-success"
+                  >
+                    <span>{{ statusSuccessLabel }}</span>
+                  </span>
+                  <span
+                    v-else-if="
+                      status[backup.id] && status[backup.id].success == false
+                    "
+                    class="ns-error"
+                  >
+                    {{ statusErrorLabel }}
+                  </span>
+                  <span v-else class="ns-warning">
+                    {{ statusNotRunLabel }}
+                  </span>
+                </div>
               </div>
+              <NsBackupCardDetails
+                v-if="backupsContainingInstance.length == 1"
+                :backup="backup"
+                :status="status"
+                :repositoryLabel="repositoryLabel"
+                :completedLabel="completedLabel"
+                :durationLabel="durationLabel"
+                :totalSizeLabel="totalSizeLabel"
+                :totalFileCountLabel="totalFileCountLabel"
+              />
             </div>
-            <!-- total file count -->
-            <div class="tr">
-              <div class="td label">{{ totalFileCountLabel }}</div>
-              <div class="td">
-                <span
-                  v-if="status[backup.id] && status[backup.id].total_file_count"
-                >
-                  {{ status[backup.id].total_file_count | humanFormat }}
-                  ({{ status[backup.id].total_file_count }})
-                </span>
-                <span v-else>-</span>
-              </div>
+          </div>
+          <div class="table-wrapper">
+            <div class="table">
+              <cv-accordion
+                v-if="backupsContainingInstance.length > 1"
+                ref="accordion"
+              >
+                <cv-accordion-item :open="toggleAccordion[0]">
+                  <template slot="title">{{ showMoreLabel }}</template>
+                  <template slot="content">
+                    <NsBackupCardDetails
+                      :backup="backup"
+                      :status="status"
+                      :repositoryLabel="repositoryLabel"
+                      :completedLabel="completedLabel"
+                      :durationLabel="durationLabel"
+                      :totalSizeLabel="totalSizeLabel"
+                      :totalFileCountLabel="totalFileCountLabel"
+                    />
+                  </template>
+                </cv-accordion-item>
+              </cv-accordion>
             </div>
           </div>
         </div>
@@ -147,10 +125,13 @@
 
 <script>
 import IconService from "../lib-mixins/icon.js";
-
+import UtilService from "../lib-mixins/util.js";
+// import DateTimeService from "../lib-mixins/dateTime.js"; ////
+import NsBackupCardDetails from "./NsBackupCardDetails";
 export default {
   name: "NsBackupCard",
-  mixins: [IconService],
+  components: { NsBackupCardDetails },
+  mixins: [IconService, UtilService],
   props: {
     title: {
       type: String,
@@ -208,6 +189,10 @@ export default {
       type: String,
       default: "Disabled",
     },
+    showMoreLabel: {
+      type: String,
+      default: "Show more",
+    },
     moduleId: {
       type: String,
       required: true,
@@ -274,7 +259,7 @@ export default {
       }
     },
     goToBackup() {
-      if (this.coreContext) {
+      if (this.coreContext && this.coreContext.$router) {
         this.coreContext.$router.push("/backup");
       }
     },
@@ -290,6 +275,14 @@ export default {
   min-height: 7rem;
 }
 
+.backup {
+  margin-bottom: 1rem;
+}
+
+.backup:last-child {
+  margin-bottom: 0;
+}
+
 .row {
   display: flex;
   align-items: center;
@@ -338,3 +331,11 @@ export default {
   margin-right: 0.25rem;
 }
 </style>
+
+<style lang="scss">
+// global styles
+
+.ns-backup-card .bx--accordion--start .bx--accordion__content {
+  margin-left: 0;
+}
+</style>

package/src/lib-components/NsBackupCardDetails.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="ns-backup-card-details">
+    <!-- repository -->
+    <div class="tr">
+      <div class="td label">{{ repositoryLabel }}</div>
+      <div class="td">
+        {{ backup.repoName }}
+      </div>
+    </div>
+    <!-- completed -->
+    <div class="tr">
+      <div class="td label">{{ completedLabel }}</div>
+      <div class="td">
+        <span v-if="status[backup.id] && status[backup.id].end">
+          <cv-interactive-tooltip
+            alignment="center"
+            direction="bottom"
+            class="info tooltip-with-text-trigger"
+          >
+            <template slot="trigger">
+              {{
+                formatDateDistance(status[backup.id].end * 1000, new Date(), {
+                  addSuffix: true,
+                })
+              }}
+            </template>
+            <template slot="content">
+              {{ (status[backup.id].end * 1000) | date("yyyy-MM-dd HH:mm:ss") }}
+            </template>
+          </cv-interactive-tooltip>
+        </span>
+        <span v-else>-</span>
+      </div>
+    </div>
+    <!-- duration -->
+    <div class="tr">
+      <div class="td label">{{ durationLabel }}</div>
+      <div class="td">
+        <span
+          v-if="
+            status[backup.id] &&
+            status[backup.id].end &&
+            status[backup.id].start
+          "
+        >
+          {{
+            (status[backup.id].end - status[backup.id].start) | secondsFormat
+          }}
+        </span>
+        <span v-else>-</span>
+      </div>
+    </div>
+    <!-- total size -->
+    <div class="tr">
+      <div class="td label">{{ totalSizeLabel }}</div>
+      <div class="td">
+        <span v-if="status[backup.id] && status[backup.id].total_size">
+          {{ status[backup.id].total_size | byteFormat }}
+        </span>
+        <span v-else>-</span>
+      </div>
+    </div>
+    <!-- total file count -->
+    <div class="tr">
+      <div class="td label">{{ totalFileCountLabel }}</div>
+      <div class="td">
+        <span v-if="status[backup.id] && status[backup.id].total_file_count">
+          {{ status[backup.id].total_file_count | humanFormat }}
+          ({{ status[backup.id].total_file_count }})
+        </span>
+        <span v-else>-</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import DateTimeService from "../lib-mixins/dateTime.js";
+
+export default {
+  name: "NsBackupCardDetails",
+  mixins: [DateTimeService],
+  props: {
+    backup: {
+      type: Object,
+      required: true,
+    },
+    status: {
+      type: Array,
+      required: true,
+    },
+    repositoryLabel: {
+      type: String,
+      default: "Repository",
+    },
+    completedLabel: {
+      type: String,
+      required: true,
+    },
+    durationLabel: {
+      type: String,
+      required: true,
+    },
+    totalSizeLabel: {
+      type: String,
+      required: true,
+    },
+    totalFileCountLabel: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.ns-backup-card-details {
+  // do not render root div, only table rows
+  display: contents;
+}
+
+.tr {
+  display: table-row;
+}
+
+.td {
+  display: table-cell;
+}
+
+.label {
+  padding-right: 0.75rem;
+  font-weight: bold;
+  text-align: right;
+  padding-bottom: 0.5rem;
+}
+</style>

package/src/lib-components/NsMenuDivider.vue

@@ -0,0 +1,14 @@
+<template>
+  <cv-side-nav-divider />
+</template>
+
+<script>
+import CvSideNavDivider from "@carbon/vue/src/components/cv-ui-shell/cv-side-nav-divider.vue";
+
+export default {
+  name: "NsMenuDivider",
+  components: { CvSideNavDivider },
+};
+</script>
+
+<style scoped lang="scss"></style>

package/src/lib-components/NsMenuItem.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="ns-menu-item">
+    <span v-if="icon == 'edit'" class="icon"><Edit20 /></span>
+    <span v-else-if="icon == 'trash'" class="icon"><TrashCan20 /></span>
+    <span v-else-if="icon == 'power'" class="icon"><Power20 /></span>
+    <span v-else-if="icon == 'rocket'" class="icon"><Rocket20 /></span>
+    <span v-else-if="icon == 'launch'" class="icon"><Launch20 /></span>
+    <span v-else-if="icon == 'star'" class="icon"><Star20 /></span>
+    <span v-else-if="hasIconSlot" class="icon">
+      <slot name="icon"></slot>
+    </span>
+    <span>{{ label }}</span>
+  </div>
+</template>
+
+<script>
+import Edit20 from "@carbon/icons-vue/es/edit/20";
+import TrashCan20 from "@carbon/icons-vue/es/trash-can/20";
+import Power20 from "@carbon/icons-vue/es/power/20";
+import Rocket20 from "@carbon/icons-vue/es/rocket/20";
+import Launch20 from "@carbon/icons-vue/es/launch/20";
+import Star20 from "@carbon/icons-vue/es/star/20";
+
+export default {
+  name: "NsMenuItem",
+  components: { Edit20, TrashCan20, Power20, Rocket20, Launch20, Star20 },
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      validator: (value) =>
+        ["", "edit", "trash", "power", "rocket", "launch", "star"].includes(
+          value
+        ),
+    },
+  },
+  computed: {
+    hasIconSlot() {
+      return !!this.$slots.icon;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.ns-menu-item {
+  display: flex;
+  align-items: center;
+}
+
+.icon {
+  margin-right: 0.5rem;
+}
+</style>

package/src/lib-components/NsWizard.vue

@@ -0,0 +1,126 @@
+<template>
+  <div
+    data-modal
+    :id="uid"
+    :class="[
+      `cv-modal ${carbonPrefix}--modal`,
+      `wizard-modal`,
+      {
+        'is-visible': dataVisible,
+      },
+    ]"
+    tabindex="-1"
+    @keydown.esc.prevent="onEsc"
+    @click.self="onExternalClick"
+  >
+    <div
+      :class="[
+        `${carbonPrefix}--modal-container`,
+        { [`${carbonPrefix}--modal-container--${internalSize}`]: internalSize },
+      ]"
+      v-bind="dialogAttrs"
+      ref="modalDialog"
+    >
+      <div
+        class="cv-modal__before-content"
+        ref="beforeContent"
+        tabindex="0"
+        style="position: absolute; height: 1px; width: 1px; left: -9999px"
+        @focus="focusBeforeContent"
+      />
+      <div :class="`${carbonPrefix}--modal-header`">
+        <p :class="`${carbonPrefix}--modal-header__label`">
+          <slot name="label"></slot>
+        </p>
+        <p :class="`${carbonPrefix}--modal-header__heading`">
+          <slot name="title">Modal Title</slot>
+        </p>
+        <button
+          :class="`${carbonPrefix}--modal-close`"
+          type="button"
+          @click="onClose"
+          ref="close"
+          :aria-label="closeAriaLabel"
+        >
+          <Close16 :class="`${carbonPrefix}--modal-close__icon`" />
+        </button>
+      </div>
+      <div
+        :class="[
+          `${carbonPrefix}--modal-content`,
+          { [`${carbonPrefix}--modal-content--with-form`]: hasFormContent },
+        ]"
+        ref="content"
+        :tabindex="scrollable ? 0 : undefined"
+      >
+        <slot name="content"></slot>
+      </div>
+
+      <cv-button-set
+        :class="[
+          `${carbonPrefix}--modal-footer`,
+          `${carbonPrefix}--modal-footer--three-button`,
+        ]"
+      >
+        <NsButton
+          kind="secondary"
+          :icon="Close20"
+          @click="$emit('cancel')"
+          type="button"
+          class="wizard-button"
+          >{{ cancelLabel }}
+        </NsButton>
+        <NsButton
+          kind="secondary"
+          :icon="ChevronLeft20"
+          @click="$emit('previousStep')"
+          :disabled="isPreviousDisabled"
+          type="button"
+          class="wizard-button"
+          >{{ previousLabel }}
+        </NsButton>
+        <NsButton
+          kind="primary"
+          :icon="ChevronRight20"
+          @click="$emit('nextStep')"
+          :disabled="isNextDisabled"
+          :loading="isNextLoading"
+          type="submit"
+          class="wizard-button"
+          ref="wizardNext"
+          >{{ nextLabel }}
+        </NsButton>
+      </cv-button-set>
+      <div
+        class="cv-modal__after-content"
+        ref="afterContent"
+        tabindex="0"
+        style="position: absolute; height: 1px; width: 1px; left: -9999px"
+        @focus="focusAfterContent"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { CvModal } from "@carbon/vue";
+import IconService from "../lib-mixins/icon.js";
+
+export default {
+  name: "NsWizard",
+  extends: CvModal,
+  mixins: [IconService],
+  props: {
+    cancelLabel: { type: String, default: "Cancel" },
+    previousLabel: { type: String, default: "Previous" },
+    nextLabel: { type: String, default: "Next" },
+    isPreviousDisabled: Boolean,
+    isNextDisabled: Boolean,
+    isNextLoading: Boolean,
+    closeAriaLabel: { type: String, default: "Close modal" },
+    autoHideOff: Boolean,
+    visible: Boolean,
+    size: String,
+  },
+};
+</script>