fix คำสั่งและต้นแบบ

src/modules/05_command/views/lists.vue

@@ -73,6 +73,7 @@ const isEdit = ref<boolean>(false); //เก็บ true/false เช็คแก
 const dialogFormCommand = ref<boolean>(false); // model คำสั่ง
 const dataTemplateDetail = ref<DataTemplateDetail>();
 
+const keyword = ref<string>("");
 const page = ref<number>(1); // หน้า
 const pageSize = ref<number>(13); // จำนวนข้อมูล
 const maxPage = ref<number>(0); // จำนวนหน้า
@@ -88,6 +89,7 @@ async function fetchCommandType() {
         page: page.value,
         pageSize: pageSize.value,
         isActive: isActive.value,
+        search: keyword.value,
       },
     })
     .then(async (res) => {
@@ -272,21 +274,34 @@ onMounted(async () => {
   <div class="row q-col-gutter-sm" style="height: 85vh; display: flex">
     <div class="col-4">
       <q-card bordered style="min-height: 100%">
-        <div class="row items-center q-pa-sm">
+        <q-toolbar>
-          <q-space />
+          <q-input
-          <div class="col-12 col-md-6 q-py-sm">
+            borderless
-            <div class="row items-center no-wrap justify-end">
+            dense
-              <q-label
+            outlined
-                :class="`${isActive ? `text-primary` : `text-orange`}`"
+            clearable
-                >{{ `${isActive ? `ใช้งาน` : `ไม่ใช้งาน`}` }}</q-label
+            v-model="keyword"
+            placeholder="ค้นหา"
+            @clear="(keyword = ''), searchByStatus()"
+            @keydown.enter.prevent="searchByStatus()"
           >
+            <template v-slot:append v-if="keyword === ''">
+              <q-icon name="search" />
+            </template>
+          </q-input>
+
+          <q-space />
+          <div class="row items-center no-wrap">
+            <q-label :class="`${isActive ? `text-primary` : `text-orange`}`">{{
+              `${isActive ? `ใช้งาน` : `ไม่ใช้งาน`}`
+            }}</q-label>
             <label :class="`q-ml-lg toggle-control`">
               <input type="checkbox" v-model="isActive" />
               <span class="control"></span>
             </label>
           </div>
-          </div>
+        </q-toolbar>
-        </div>
+
         <q-separator />
         <q-card-section class="q-pa-sm">
           <q-list v-for="(item, index) in listOrder" bordered :key="item.id">