create listBooking page

src/assets/enums.ts

@@ -33,3 +33,13 @@ export enum BannerStatus {
   active = 1,
   inactive = 0,
 }
+
+export enum BookingStatus {
+  active = 1,
+  inactive = 2,
+}
+
+export enum ActiveStatus {
+  active = 1,
+  inactive = 1,
+}

src/i18n/vi/index.ts

@@ -898,4 +898,30 @@ export default {
       action: 'Chức năng',
     },
   },
+  listBooking: {
+    toolTipMessage: 'Thông tin chi tiết',
+    title: 'Danh sách booking',
+    titleColumnsTable: {
+      stt: 'STT',
+      customerName: 'Khách hàng',
+      artistName: 'Nghệ sỹ',
+      description: 'Nội dung',
+      place: 'Địa điểm',
+      startTime: 'Thời gian bắt đầu',
+      endTime: 'Thời gian kết thúc',
+      statusBooking: 'Trạng thái Booking',
+      statusActive: 'Trạng thái hoạt động',
+      createTime: 'Thời gian tạo',
+      createBy: 'Người tạo',
+      updateBy: 'Người cập nhật',
+      updateTime: 'Thời gian cập nhật',
+      action: 'Chức năng',
+    },
+    statusLabel: {
+      activeBooking: 'Đã xác nhận',
+      inactiveBooking: 'Không xác nhận',
+      activeEvent: 'Active',
+      inactiveEvent: 'Xoá',
+    },
+  },
 };

src/pages/danh-sach-booking/ListBooking.ts

+import { i18n } from 'src/boot/i18n';
+import { defineComponent, onMounted, Ref, ref } from 'vue';
+import Pagination from 'components/pagination/index.vue';
+import { BookingStatus } from 'src/assets/enums';
+import { ActiveStatus } from 'src/assets/enums';
+export default defineComponent({
+  components: {
+    Pagination,
+  },
+  setup() {
+    const tableColumns = [
+      {
+        name: 'stt',
+        field: 'stt',
+        required: true,
+        label: i18n.global.t('listBooking.titleColumnsTable.stt'),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'artistName',
+        field: 'artistName',
+        required: true,
+        label: i18n.global.t('listBooking.titleColumnsTable.artistName'),
+        align: 'center',
+        headerStyle: 'text-align: center !important;',
+        sortable: false,
+      },
+      {
+        name: 'customerName',
+        field: 'customerName',
+        required: true,
+        label: i18n.global.t('listBooking.titleColumnsTable.customerName'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'description',
+        field: 'description',
+        required: true,
+        label: i18n.global.t('listBooking.titleColumnsTable.description'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'place',
+        field: 'place',
+        required: true,
+        label: i18n.global.t('listBooking.titleColumnsTable.place'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'startTime',
+        field: 'startTime',
+        required: true,
+        label: i18n.global.t('listBooking.titleColumnsTable.startTime'),
+        headerStyle: 'text-align: center !important;',
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'endTime',
+        field: 'endTime',
+        required: true,
+        label: i18n.global.t('listBooking.titleColumnsTable.endTime'),
+        headerStyle: 'text-align: center !important;',
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'statusBooking',
+        field: 'statusBooking',
+        required: true,
+        label: i18n.global.t('listBooking.titleColumnsTable.statusBooking'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'statusActive',
+        field: 'statusActive',
+        required: true,
+        label: i18n.global.t('listBooking.titleColumnsTable.statusActive'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'action',
+        field: 'action',
+        required: true,
+        label: i18n.global.t('listBooking.titleColumnsTable.action'),
+        align: 'center',
+        sortable: false,
+      },
+    ];
+    const listBooking = ref([
+      {
+        stt: 1,
+        artistName: 'Sơn Tùng MTP',
+        customerName: 'Nguyễn Văn A',
+        description: 'Đại nhạc hội',
+        place: 'Cầu Giấy - Hà Nội',
+        startTime: '18:00:00 - 30/4/2021',
+        endTime: '21:00:00 - 30/4/2021',
+        statusBooking: 1,
+        statusActive: 2,
+      },
+    ]);
+    const pageIndex = ref(1);
+    const pageSize = ref(20);
+    const totalPage = ref(10);
+    const keywordSearch: Ref<string | null> = ref(null);
+    const changePageSize = () => {
+      pageIndex.value = 1;
+      void getListBooking();
+    };
+
+    const getListBooking = () => {
+      console.log('API List Menu');
+    };
+
+    onMounted(() => {
+      void getListBooking();
+    });
+    return {
+      keywordSearch,
+      status,
+      listBooking,
+      tableColumns,
+      pageIndex,
+      pageSize,
+      totalPage,
+      changePageSize,
+      getListBooking,
+      BookingStatus,
+      ActiveStatus,
+    };
+  },
+});

src/pages/danh-sach-booking/index.vue

+<template>
+  <div class="row q-col-gutter-sm flex-center q-mt-sm">
+    <div class="col-auto text-h6 text-weight-regular flex flex-center q-mr-md">
+      {{ $t('listBooking.title') }}
+      <q-separator vertical spaced />
+    </div>
+    <q-space></q-space>
+    <div class="col-2">
+      <q-input
+        v-model="keywordSearch"
+        dense
+        outlined
+        :label="$t('listBooking.titleColumnsTable.artistName')"
+        clearable
+      ></q-input>
+    </div>
+    <div class="col-auto">
+      <q-btn
+        color="primary"
+        no-caps
+        :label="$t('crudActions.search')"
+        style="width: 100px"
+      >
+      </q-btn>
+    </div>
+
+    <div class="col-12 q-mt-sm">
+      <q-table
+        :rows="listBooking"
+        :columns="tableColumns"
+        :no-data-label="$t('emptyData')"
+        row-key="name"
+        separator="cell"
+        :pagination="{ rowsPerPage: pageSize }"
+        hide-pagination
+        class="sticky-header-table"
+      >
+        <template v-slot:body-cell-statusBooking="rowData">
+          <q-td>
+            <div align="center">
+              <q-chip
+                :color="
+                  rowData.value === BookingStatus.active ? 'positive' : 'orange'
+                "
+                text-color="white"
+                size="sm"
+              >
+                {{
+                  rowData.value === BookingStatus.active
+                    ? $t('listBooking.statusLabel.activeBooking')
+                    : $t('listBooking.statusLabel.inactiveBooking')
+                }}
+              </q-chip>
+            </div>
+          </q-td>
+        </template>
+        <template v-slot:body-cell-statusActive="rowData">
+          <q-td>
+            <div align="center">
+              <q-chip
+                :color="
+                  rowData.value === ActiveStatus.active ? 'positive' : 'orange'
+                "
+                text-color="white"
+                size="sm"
+              >
+                {{
+                  rowData.value === ActiveStatus.active
+                    ? $t('listBooking.statusLabel.activeEvent')
+                    : $t('listBooking.statusLabel.inactiveEvent')
+                }}
+              </q-chip>
+            </div>
+          </q-td>
+        </template>
+        <template v-slot:body-cell-action>
+          <q-td style="padding: 0" class="flex flex-center">
+            <q-btn flat round color="primary" icon="mdi-information-outline">
+              <q-tooltip :offset="[20, 10]">{{
+                $t('listBooking.toolTipMessage')
+              }}</q-tooltip>
+            </q-btn>
+          </q-td>
+        </template>
+      </q-table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./ListBooking.ts"></script>

src/pages/thong-tin-chung/index.vue

@@ -16,18 +16,23 @@
         class="sticky-header-table"
       >
         <template v-slot:body-cell-action="">
-          <q-td style="padding: 0" class="center">
+          <q-td style="padding: 0" align="center">
             <q-btn
               flat
               round
               color="primary"
-              icon="mdi-account-edit-outline"
+              icon="mdi-book-edit-outline"
               @click="openUpdateInfoVABDialog()"
             >
               <q-tooltip :offset="[20, 10]">{{
                 $t('infoVAB.toolTipMessage.updateInfoVAB')
               }}</q-tooltip>
             </q-btn>
+            <q-btn flat round color="primary" icon="mdi-delete-outline">
+              <q-tooltip :offset="[20, 10]">{{
+                $t('infoVAB.toolTipMessage.updateInfoVAB')
+              }}</q-tooltip>
+            </q-btn>
           </q-td>
         </template>
         <template v-slot:body-cell-image="image">
@@ -151,7 +156,9 @@ export default defineComponent({
       },
     ];
 
-    const infoVABTableRows: Ref<unknown[]> = ref([{ name: 'aaa' }]);
+    const infoVABTableRows: Ref<unknown[]> = ref([
+      { name: 'VietNam Artist Booking' },
+    ]);
     const updateInfoVABDialogIsOpened = ref(false);
     const name = ref('');
     const phone = ref('');

src/router/routes.ts

@@ -17,6 +17,7 @@ export enum Pages {
   banner = 'banner',
   infoVAB = 'thong-tin-chung',
   menu = 'menu',
+  listBooking = 'danh-sach-booking',
 }
 
 const routes: RouteRecordRaw[] = [
@@ -104,6 +105,11 @@ const routes: RouteRecordRaw[] = [
         component: () => import('pages/menu/index.vue'),
         name: Pages.menu,
       },
+      {
+        path: 'danh-sach-booking',
+        component: () => import('pages/danh-sach-booking/index.vue'),
+        name: Pages.listBooking,
+      },
     ],
   },