Version 1.0.7

- Fix minor UI sizing
- Add skeleton to service details
- Add Ctrl K to start filtering
- Fix logon col format

Author: fakoua

q-manui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "q-manui",
-  "version": "1.0.6",
-  "description": "DenoMan 1.0.6",
+  "version": "1.0.7",
+  "description": "DenoMan 1.0.7",
   "productName": "DenoMan",
   "author": "Sameh Fakoua <s.fakoua@gmail.com>",
   "private": true,

q-manui/src/components/ServerComponent.vue

@@ -91,7 +91,7 @@ div.s-left {
 div.s-right {
   overflow: hidden;
   width: calc(100vw - 70px);
-  height: calc(100vh - 100px);
+  height: calc(100vh - 90px);
   border-left: 1px solid rgba(0, 0, 0, 0.12);
 }
 .dialog-title {

q-manui/src/components/ServiceDetailsComponent.vue

@@ -4,6 +4,18 @@
       <div v-if="!service" class="text-weight-bold text-primary mb-12">
         Select a service
       </div>
+      <div v-if="!service">
+        <q-skeleton
+          type="QBtn"
+          animation="none"
+          style="width: 76px; height: 28px"
+        />
+        <q-skeleton type="text" animation="none" width="75%" />
+        <q-skeleton type="text" animation="none" />
+        <br />
+        <q-skeleton type="text" animation="none" width="65%" />
+        <q-skeleton type="rect" animation="none" height="40px" />
+      </div>
       <div v-if="service">
         <div class="text-weight-bold text-primary mb-12">
           {{ service.caption }}
@@ -95,7 +107,7 @@
       <div v-if="isLoading">
         <q-spinner-ball color="primary" size="2em" />
       </div>
-      <div v-if="!isLoading">
+      <div v-if="!isLoading" class="sub-fotter">
         <div class="text-weight-bold">{{ data.csName }}</div>
         <div class="mb-12 div-windows">
           {{ data.caption }} ({{ data.osArchitecture }})
@@ -114,7 +126,8 @@
 }
 .container {
   padding: 16px;
-  height: 88vh;
+  height: calc(100vh - 90px);
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
 }
 .mb-12 {
   margin-bottom: 12px;
@@ -124,10 +137,14 @@
 }
 .footer {
   overflow: auto;
-  height: 140px;
+  height: 160px;
   position: absolute;
   bottom: 0;
 }
+.sub-fotter {
+  overflow: auto;
+  height: 120px;
+}
 .div-system {
   border-bottom: 2px solid #1976d2;
   color: #1976d2;

q-manui/src/components/ServicesListComponent.vue

@@ -1,6 +1,7 @@
 <template>
   <q-table
     bordered
+    square
     :rows="data"
     :columns="columns"
     color="primary"
@@ -85,14 +86,36 @@
     </template>
     <template v-slot:top-right>
       <q-input
+        ref="filterInput"
         borderless
         dense
-        debounce="300"
+        filled
+        clearable
         v-model="filter"
-        placeholder="Search"
+        placeholder="Search Services"
+        style="width: 300px"
+        input-style="width: 100%;"
+        @focus="
+          () => {
+            filterFocused = true;
+          }
+        "
+        @blur="
+          () => {
+            filterFocused = false;
+          }
+        "
       >
         <template v-slot:append>
-          <q-icon name="search" />
+          <q-chip
+            outline
+            square
+            color="grey-14"
+            text-color="white"
+            label="Ctrl+K"
+            v-if="!filterFocused"
+          />
+          <q-icon name="search" v-if="filterFocused" />
         </template>
       </q-input>
     </template>
@@ -147,8 +170,8 @@
   transition: transform 0.28s, background-color 0.28s;
 }
 .my-sticky-header-table {
-  height: 88vh;
-  width: calc(100vw - 354px);
+  height: calc(100vh - 94px);
+  width: 100%;
 }
 .my-sticky-header-table .q-table__top,
 .my-sticky-header-table .q-table__bottom,
@@ -177,7 +200,7 @@
 </style>
 
 <script lang="ts">
-import { PropType, defineComponent, onMounted, ref } from 'vue';
+import { PropType, defineComponent, onMounted, onUnmounted, ref } from 'vue';
 
 import * as serviceApi from './service-api';
 import { ControlAction, ServiceModel, WinRMPayload } from './models';
@@ -228,6 +251,9 @@ const columns: QTableColumn[] = [
     field: 'startName',
     sortable: true,
     align: 'left',
+    format: (val: string) => {
+      return val.replaceAll('|', '\\');
+    },
   },
   {
     name: 'description',
@@ -291,6 +317,8 @@ export default defineComponent({
     const showSystemDriver = ref(false);
     const disabledControls = ref<boolean[]>([true, true, true, true, true]);
     const selected = ref([] as ServiceModel[]);
+    const filterInput = ref(null);
+    const filterFocused = ref(false);
     const $q = useQuasar();
 
     const loadServices = async () => {
@@ -313,7 +341,17 @@ export default defineComponent({
       disabledControls.value[4] = service.state !== 'Running';
     };
 
+    const captureCtrlK = (e: KeyboardEvent) => {
+      if (e.ctrlKey && e.key === 'k') {
+        e.preventDefault();
+        if (filterInput.value) {
+          (filterInput.value as HTMLElement).focus();
+        }
+      }
+    };
+
     onMounted(async () => {
+      document.addEventListener('keydown', captureCtrlK);
       await loadServices();
       isLoading.value = false;
 
@@ -334,6 +372,11 @@ export default defineComponent({
       });
     });
 
+    onUnmounted(() => {
+      document.removeEventListener('keydown', captureCtrlK);
+      bus.off('controlService');
+    });
+
     return {
       columns,
       data,
@@ -346,6 +389,8 @@ export default defineComponent({
       services,
       showSystemDriver,
       disabledControls,
+      filterInput,
+      filterFocused,
       setDisabledControls,
     };
   },