update

src/assets/configurations.example.ts

@@ -153,4 +153,19 @@ export enum API_PATHS {
 
   // thêm sản phẩm nổi bật
   homeAddProduct = 'config/home/addProduct',
+
+  // danh sách công việc
+  workList = 'work/list',
+
+  // thêm công việc
+  workAdd = 'work/add',
+
+  // chi tiết công việc
+  workDetail = 'work/detail',
+
+  // cập nhật công việc
+  workUpdate = 'work/update',
+
+  // xóa công việc
+  workDelete = 'work/delete',
 }

src/assets/type.ts

@@ -531,6 +531,14 @@ export type ListDeposit = {
   artistBookingDepositDtos: [];
 };
 
+export type listWorksType = {
+  fieldId: number;
+  id: number;
+  name: string;
+  numIndex: number;
+  status: number;
+};
+
 export type ListArrayCust = {
   id: number;
   fullName: string;

src/components/cong-viec/add.vue

+<template>
+  <q-dialog
+    persistent
+    :model-value="isOpened"
+    @update:model-value="$emit('update:isOpened', $event)"
+  >
+    <q-card class="full-width" style="max-width: 40rem" bordered>
+      <q-form greedy @submit.prevent="$emit('update:isOpened', false)">
+        <q-card-section class="q-pa-none">
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-h6 text-weight-regular"
+                >Thêm mới công việc</q-item-label
+              >
+            </q-item-section>
+          </q-item>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-section
+          class="overflow-auto"
+          style="max-height: calc(100vh - 10rem)"
+        >
+          <div class="col-12 q-mt-sm">
+            <q-input
+              v-model="name"
+              label="Tên công việc"
+              class="q-my-sm"
+              type="text"
+              outlined
+              :rules="nameRules"
+              clearable
+            ></q-input>
+          </div>
+
+          <div class="q-pt-sm">
+            <span class="text-body1">{{
+              $t('listHotProduct.dialogLabel.fieldLabels.salientStatus')
+            }}</span
+            ><q-toggle v-model="status" :true-value="1" :false-value="0" />
+          </div>
+        </q-card-section>
+        <q-card-actions align="right">
+          <div>
+            <q-btn
+              color="grey"
+              no-caps
+              style="width: 90px"
+              class="q-mr-sm"
+              :label="$t('post.crudActions.cancel')"
+              @click="$emit('update:isOpened', false)"
+            />
+            <q-btn
+              @click="confirm"
+              color="primary"
+              no-caps
+              style="width: 90px"
+              label="Thêm mới"
+            />
+          </div>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts">
+import { AxiosResponse } from 'axios';
+import { Dialog, Notify } from 'quasar';
+import { API_PATHS, config } from 'src/assets/configurations.example';
+import { PaginationResponse, UserObject, users } from 'src/assets/type';
+import { api, BaseResponseBody } from 'src/boot/axios';
+import { defineComponent, PropType, ref, Ref, watch, onMounted } from 'vue';
+
+export default defineComponent({
+  components: {},
+  props: {
+    isOpened: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  setup(props, context) {
+    watch(
+      () => props.isOpened,
+      (value) => {
+        if (value) {
+          void reset();
+        }
+      }
+    );
+    const name = ref(null);
+    const status = ref(1);
+
+    const nameRules = [
+      (val?: string) =>
+        (val && val.trim().length) || 'Vui lòng nhập tên công việc',
+    ];
+    const reset = () => {
+      name.value = null;
+      status.value = 1;
+    };
+    const confirm = async () => {
+      try {
+        const browserResult = (await api({
+          url: API_PATHS.workAdd,
+          method: 'POST',
+          data: {
+            name: name.value,
+            status: status.value,
+          },
+        })) as AxiosResponse<BaseResponseBody<unknown>>;
+        if (browserResult.data.error.code === config.API_RES_CODE.OK.code) {
+          Notify.create({
+            type: 'positive',
+            message: 'Thêm công việc thành công',
+            actions: [{ icon: 'close', color: 'white' }],
+          });
+
+          context.emit('update:isOpened', false);
+          context.emit('successful');
+        }
+      } catch (error) {}
+    };
+
+    return {
+      // biến
+      name,
+      status,
+      nameRules,
+      // hàm
+      confirm,
+    };
+  },
+  emits: ['update:isOpened', 'successful'],
+});
+</script>

src/components/cong-viec/update.vue

+<template>
+  <q-dialog
+    persistent
+    :model-value="isOpened"
+    @update:model-value="$emit('update:isOpened', $event)"
+  >
+    <q-card class="full-width" style="max-width: 40rem" bordered>
+      <q-form greedy @submit.prevent="$emit('update:isOpened', false)">
+        <q-card-section class="q-pa-none">
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-h6 text-weight-regular"
+                >Cập nhật công việc</q-item-label
+              >
+            </q-item-section>
+          </q-item>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-section
+          class="overflow-auto"
+          style="max-height: calc(100vh - 10rem)"
+        >
+          <div class="col-12 q-mt-sm">
+            <q-input
+              v-model="name"
+              label="Tên công việc"
+              class="q-my-sm"
+              type="text"
+              outlined
+              :rules="nameRules"
+              clearable
+            ></q-input>
+          </div>
+
+          <div class="q-pt-sm">
+            <span class="text-body1">{{
+              $t('listHotProduct.dialogLabel.fieldLabels.salientStatus')
+            }}</span
+            ><q-toggle v-model="status" :true-value="1" :false-value="0" />
+          </div>
+        </q-card-section>
+        <q-card-actions align="right">
+          <div>
+            <q-btn
+              color="grey"
+              no-caps
+              style="width: 90px"
+              class="q-mr-sm"
+              :label="$t('post.crudActions.cancel')"
+              @click="$emit('update:isOpened', false)"
+            />
+            <q-btn
+              @click="confirm"
+              color="primary"
+              no-caps
+              style="width: 90px"
+              label="Lưu"
+            />
+          </div>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts">
+import { AxiosResponse } from 'axios';
+import { Dialog, Notify } from 'quasar';
+import { API_PATHS, config } from 'src/assets/configurations.example';
+import { PaginationResponse, UserObject, users } from 'src/assets/type';
+import { api, BaseResponseBody } from 'src/boot/axios';
+import { defineComponent, PropType, ref, Ref, watch, onMounted } from 'vue';
+import { listWorksType } from 'src/assets/type';
+
+export default defineComponent({
+  components: {},
+  props: {
+    isOpened: {
+      type: Boolean,
+      required: true,
+    },
+    id: {
+      type: Number,
+      required: true,
+    },
+  },
+  setup(props, context) {
+    watch(
+      () => props.isOpened,
+      (value) => {
+        if (value) {
+          void getDetail();
+          void reset();
+        }
+      }
+    );
+    const name = ref('');
+    const status = ref(1);
+
+    const nameRules = [
+      (val?: string) =>
+        (val && val.trim().length) || 'Vui lòng nhập tên công việc',
+    ];
+    const reset = () => {
+      name.value = '';
+      status.value = 1;
+    };
+
+    const getDetail = async () => {
+      try {
+        const response = (await api({
+          url: API_PATHS.workDetail,
+          method: 'GET',
+          params: {
+            id: props.id,
+          },
+        })) as AxiosResponse<BaseResponseBody<listWorksType>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          name.value = response.data.data.name;
+          status.value = response.data.data.status;
+        }
+      } catch (error) {}
+    };
+
+    const confirm = async () => {
+      try {
+        const browserResult = (await api({
+          url: API_PATHS.workUpdate,
+          method: 'POST',
+          data: {
+            id: props.id,
+            name: name.value,
+            status: status.value,
+          },
+        })) as AxiosResponse<BaseResponseBody<unknown>>;
+        if (browserResult.data.error.code === config.API_RES_CODE.OK.code) {
+          Notify.create({
+            type: 'positive',
+            message: 'Cập nhật công việc thành công',
+            actions: [{ icon: 'close', color: 'white' }],
+          });
+
+          context.emit('update:isOpened', false);
+          context.emit('successful');
+        }
+      } catch (error) {}
+    };
+
+    return {
+      // biến
+      name,
+      status,
+      nameRules,
+      // hàm
+      confirm,
+    };
+  },
+  emits: ['update:isOpened', 'successful'],
+});
+</script>

src/pages/cong-viec/index.vue

@@ -29,6 +29,7 @@
         no-caps
         :label="$t('crudActions.add')"
         style="width: 100px"
+        @click="openDialogAdd = true"
       >
       </q-btn>
     </div>
@@ -44,26 +45,12 @@
         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>
+        <template v-slot:body-cell-stt="item">
+          <q-td class="text-center">
+            {{ 1 + item.rowIndex + 20 * (1 - 1) }}
           </q-td>
         </template>
-        <template v-slot:body-cell-statusActive="rowData">
+        <template v-slot:body-cell-status="rowData">
           <q-td>
             <div align="center">
               <q-chip
@@ -75,23 +62,51 @@
               >
                 {{
                   rowData.value === ActiveStatus.active
-                    ? $t('listBooking.statusLabel.activeEvent')
-                    : $t('listBooking.statusLabel.inactiveEvent')
+                    ? 'Đang hoạt động'
+                    : 'Ngừng hoạt động'
                 }}
               </q-chip>
             </div>
           </q-td>
         </template>
-        <template v-slot:body-cell-action>
+        <template v-slot:body-cell-action="item">
           <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-btn
+              @click="confirmUpdate(item.row.id)"
+              flat
+              round
+              color="primary"
+              icon="mdi-account-edit-outline"
+            >
+              <q-tooltip :offset="[20, 10]">Cập nhật</q-tooltip>
+            </q-btn>
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="mdi-delete-outline"
+              @click="confirmDelete(item.row.id)"
+            >
+              <q-tooltip :offset="[10, 10]">{{
+                $t('field.toolTipMessage.deleteField')
               }}</q-tooltip>
             </q-btn>
           </q-td>
         </template>
       </q-table>
+
+      <addWorks
+        v-model:isOpened="openDialogAdd"
+        @click:CloseBtn="openDialogAdd = false"
+        @successful="getListWorks"
+      ></addWorks>
+
+      <updateWorks
+        v-model:isOpened="openDialogUpdate"
+        @click:CloseBtn="openDialogUpdate = false"
+        @successful="getListWorks"
+        :id="idItem"
+      ></updateWorks>
     </div>
   </div>
 </template>

src/pages/cong-viec/work.ts

@@ -3,9 +3,18 @@ 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';
+import { config, API_PATHS } from 'src/assets/configurations.example';
+import { api, BaseResponseBody } from 'src/boot/axios';
+import { AxiosResponse } from 'axios';
+import { listWorksType } from 'src/assets/type';
+import addWorks from '../../components/cong-viec/add.vue';
+import updateWorks from '../../components/cong-viec/update.vue';
+import { Dialog, Notify } from 'quasar';
 export default defineComponent({
   components: {
     Pagination,
+    addWorks,
+    updateWorks,
   },
   setup() {
     const tableColumns = [
@@ -19,67 +28,24 @@ export default defineComponent({
       },
       {
         name: 'workName',
-        field: 'workName',
+        field: 'name',
         required: true,
         label: i18n.global.t('work.titleColumnsTable.workName'),
         align: 'center',
         headerStyle: 'text-align: center !important;',
         sortable: false,
       },
+
       {
-        name: 'fieldName',
-        field: 'fieldName',
-        required: true,
-        label: i18n.global.t('work.titleColumnsTable.fieldName'),
-        align: 'center',
-        headerStyle: 'text-align: center !important;',
-        sortable: false,
-      },
-      {
-        name: 'description',
-        field: 'description',
-        required: true,
-        label: i18n.global.t('work.titleColumnsTable.description'),
-        headerStyle: 'text-align: center !important;',
-        align: 'left',
-        sortable: false,
-      },
-      {
-        name: 'createBy',
-        field: 'createBy',
-        required: true,
-        label: i18n.global.t('work.titleColumnsTable.createBy'),
-        headerStyle: 'text-align: center !important;',
-        align: 'center',
-        sortable: false,
-      },
-      {
-        name: 'createTime',
-        field: 'createTime',
-        required: true,
-        label: i18n.global.t('work.titleColumnsTable.createTime'),
-        headerStyle: 'text-align: center !important;',
-        align: 'center',
-        sortable: false,
-      },
-      {
-        name: 'updateBy',
-        field: 'updateBy',
+        name: 'status',
+        field: 'status',
         required: true,
-        label: i18n.global.t('work.titleColumnsTable.updateBy'),
-        headerStyle: 'text-align: center !important;',
+        label: 'Trạng thái',
         align: 'center',
-        sortable: false,
-      },
-      {
-        name: 'updateTime',
-        field: 'updateTime',
-        required: true,
-        label: i18n.global.t('work.titleColumnsTable.updateTime'),
         headerStyle: 'text-align: center !important;',
-        align: 'center',
         sortable: false,
       },
+
       {
         name: 'action',
         field: 'action',
@@ -89,29 +55,73 @@ export default defineComponent({
         sortable: false,
       },
     ];
-    const listWorks = ref([
-      {
-        stt: 1,
-        workName: 'Ca sỹ',
-        fieldName: 'Âm nhạc',
-        description: 'Mô tả',
-        createBy: 'admin',
-        createTime: '18:00:00 - 30/4/2021',
-        updateBy: 'nhanvien',
-        updateTime: '20:00:00 - 30/4/2021',
-        status: 1,
-      },
-    ]);
+    const openDialogUpdate = ref(false);
+    const openDialogAdd = ref(false);
+
+    const listWorks: Ref<listWorksType[]> = ref([]);
     const pageIndex = ref(1);
     const pageSize = ref(20);
     const totalPage = ref(10);
     const keywordSearch: Ref<string | null> = ref(null);
+
+    const idItem: Ref<number> = ref(0);
     const changePageSize = () => {
       pageIndex.value = 1;
       void getListWorks();
     };
 
-    const getListWorks = () => {
+    const confirmUpdate = (value: number) => {
+      idItem.value = value;
+      openDialogUpdate.value = true;
+    };
+    const confirmDelete = (id: number) => {
+      Dialog.create({
+        title: i18n.global.t(
+          'field.confirmActionsTitle.confirmDeleteFieldTitle'
+        ),
+        message: 'Bạn chắc chắn muốn xóa công việc này?',
+        cancel: i18n.global.t(
+          'field.confirmActionsTitle.confirmDeleteFieldCancelBtnLabel'
+        ),
+        color: 'negative',
+      }).onOk(() => {
+        void deleteField(id);
+      });
+    };
+
+    const deleteField = async (id: number) => {
+      try {
+        const deleteResult = (await api({
+          url: API_PATHS.workDelete,
+          method: 'GET',
+          params: {
+            id: id,
+          },
+        })) as AxiosResponse<BaseResponseBody<unknown>>;
+
+        if (deleteResult.data.error.code === config.API_RES_CODE.OK.code) {
+          Notify.create({
+            type: 'positive',
+            message: 'Xóa công việc thành công',
+            actions: [{ icon: 'close', color: 'white' }],
+          });
+          void getListWorks();
+        }
+      } catch (error) {}
+    };
+
+    const getListWorks = async () => {
+      const response = (await api({
+        url: API_PATHS.workList,
+        method: 'GET',
+        params: {
+          name: keywordSearch.value,
+        },
+      })) as AxiosResponse<BaseResponseBody<listWorksType[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        console.log(response.data.data, 'response.data.data');
+        listWorks.value = response.data.data;
+      }
       // console.log('API List Menu');
     };
 
@@ -125,9 +135,14 @@ export default defineComponent({
       tableColumns,
       pageIndex,
       pageSize,
+      openDialogAdd,
+      openDialogUpdate,
       totalPage,
+      idItem,
       changePageSize,
       getListWorks,
+      confirmUpdate,
+      confirmDelete,
       BookingStatus,
       ActiveStatus,
     };