Merge branch 'anandadev' into develop

src/modules/05_placement/components/OrderPlacement/step/step02.vue

@@ -0,0 +1,227 @@
+<template>
+  <div>
+    <div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll">
+      <Table
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :nornmalData="true"
+        :refreshBtn="true"
+        selection="multiple"
+        v-model:selected="selected"
+      >
+        <template #columns="props">
+          <q-tr :props="props"
+            ><q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props.row)"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'no'" class="table_ellipsis">
+                {{ props.rowIndex }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td></q-tr
+          >
+        </template>
+      </Table>
+    </div>
+    <q-separator />
+    <div class="flex justify-end q-px-md q-gutter-sm">
+      <q-btn
+        flat
+        round
+        color="public"
+        icon="mdi-content-save-outline"
+        @click="next"
+      >
+        <q-tooltip>บันทึก</q-tooltip>
+      </q-btn>
+      <q-btn flat round color="primary" icon="chevron_left" @click="previous">
+        <q-tooltip>ย้อนกลับ</q-tooltip>
+      </q-btn>
+      <q-btn flat round color="primary" icon="chevron_right" @click="next">
+        <q-tooltip>ต่อไป</q-tooltip>
+      </q-btn>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import Table from "@/modules/05_placement/components/pass/TableView.vue";
+
+const props = defineProps({
+  next: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  previous: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const next = () => props.next();
+const previous = () => props.previous();
+
+const filter = ref<string>("");
+const visibleColumns = ref<String[]>([
+  "name",
+  "calories",
+  "fat",
+  "carbs",
+  "protein",
+  "sodium",
+  "calcium",
+  "iron",
+]);
+const columns = [
+  {
+    name: "desc",
+    required: true,
+    label: "Dessert (100g serving)",
+    align: "left",
+    field: (row) => row.name,
+    format: (val) => `${val}`,
+    sortable: true,
+  },
+  {
+    name: "calories",
+    align: "center",
+    label: "Calories",
+    field: "calories",
+    sortable: true,
+  },
+  { name: "fat", label: "Fat (g)", field: "fat", sortable: true },
+  { name: "carbs", label: "Carbs (g)", field: "carbs" },
+  { name: "protein", label: "Protein (g)", field: "protein" },
+  { name: "sodium", label: "Sodium (mg)", field: "sodium" },
+  {
+    name: "calcium",
+    label: "Calcium (%)",
+    field: "calcium",
+    sortable: true,
+    sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
+  },
+  {
+    name: "iron",
+    label: "Iron (%)",
+    field: "iron",
+    sortable: true,
+    sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
+  },
+];
+
+const rows = [
+  {
+    name: "Frozen Yogurt",
+    calories: 159,
+    fat: 6.0,
+    carbs: 24,
+    protein: 4.0,
+    sodium: 87,
+    calcium: "14%",
+    iron: "1%",
+  },
+  {
+    name: "Ice cream sandwich",
+    calories: 237,
+    fat: 9.0,
+    carbs: 37,
+    protein: 4.3,
+    sodium: 129,
+    calcium: "8%",
+    iron: "1%",
+  },
+  {
+    name: "Eclair",
+    calories: 262,
+    fat: 16.0,
+    carbs: 23,
+    protein: 6.0,
+    sodium: 337,
+    calcium: "6%",
+    iron: "7%",
+  },
+  {
+    name: "Cupcake",
+    calories: 305,
+    fat: 3.7,
+    carbs: 67,
+    protein: 4.3,
+    sodium: 413,
+    calcium: "3%",
+    iron: "8%",
+  },
+  {
+    name: "Gingerbread",
+    calories: 356,
+    fat: 16.0,
+    carbs: 49,
+    protein: 3.9,
+    sodium: 327,
+    calcium: "7%",
+    iron: "16%",
+  },
+  {
+    name: "Jelly bean",
+    calories: 375,
+    fat: 0.0,
+    carbs: 94,
+    protein: 0.0,
+    sodium: 50,
+    calcium: "0%",
+    iron: "0%",
+  },
+  {
+    name: "Lollipop",
+    calories: 392,
+    fat: 0.2,
+    carbs: 98,
+    protein: 0,
+    sodium: 38,
+    calcium: "0%",
+    iron: "2%",
+  },
+  {
+    name: "Honeycomb",
+    calories: 408,
+    fat: 3.2,
+    carbs: 87,
+    protein: 6.5,
+    sodium: 562,
+    calcium: "0%",
+    iron: "45%",
+  },
+  {
+    name: "Donut",
+    calories: 452,
+    fat: 25.0,
+    carbs: 51,
+    protein: 4.9,
+    sodium: 326,
+    calcium: "2%",
+    iron: "22%",
+  },
+  {
+    name: "KitKat",
+    calories: 518,
+    fat: 26.0,
+    carbs: 65,
+    protein: 7,
+    sodium: 54,
+    calcium: "12%",
+    iron: "6%",
+  },
+];
+const selected = ref([]);
+
+const selectData = (row: any) => {};
+</script>