update

src/assets/configurations.example.ts

 export const config = {
-  // pro 
+  // pro
   API_ENDPOINT: 'https://cms.vab.vn/api/',
   API_IMAGE_ENDPOINT: 'https://cms.vab.vn/file/upload/',
   // dev
@@ -13,7 +13,7 @@ export const config = {
     TOKEN_INVALID: {
       code: 3,
     },
-    TOKEN_EXPIRES: { 
+    TOKEN_EXPIRES: {
       code: 3,
     },
     '-1': {
@@ -25,7 +25,7 @@ export const config = {
 
 export enum API_PATHS {
   login = '/user/login',
-  
+
   getUserGroups = '/group/get_list',
   getListPages = '/user/page/list',
   getListGroupUsers = '/user/group/list',
@@ -42,10 +42,10 @@ export enum API_PATHS {
   getListUnits = '/artistOwner/listManangement',
   getListArtists = '/artist',
   getFieldOptions = '/field',
-  getClassificationOptions= '/common/classification',
+  getClassificationOptions = '/common/classification',
   getNationalityOptions = '/nationality',
   getProvinceOptions = '/common/province',
-  getMusicTypeOptions= '/common/musicType',
+  getMusicTypeOptions = '/common/musicType',
   getArtistLevelOptions = '/artistLevel',
   getQualificationOptions = '/qualification',
   getWorkOptions = '/work',
@@ -134,7 +134,7 @@ export enum API_PATHS {
   getListDeposit = 'deposit',
   formalityDeposit = 'common/formalityDeposit', // danh sách hình thức đặt cọc
   configHomeProduct = 'config/home/product',
-  artistFeaturedProduct= 'artist/featuredProduct',
+  artistFeaturedProduct = 'artist/featuredProduct',
   homeProductNotActive = 'config/home/productNotActive',
   artistFeaturedProducts = 'artist/featuredProducts',
 
@@ -143,5 +143,8 @@ export enum API_PATHS {
   // thêm người dùng vào nhóm
   addUser = 'user/group/addUser',
   importExcel = 'artist/importExcel',
-  exportExcel = 'artist/exportExcel'
+  exportExcel = 'artist/exportExcel',
+  // trang cấu hình liveStream
+  livestream = 'livestream/list',
+  updateLiveStream = 'livestream/update',
 }

src/assets/type.ts

@@ -331,7 +331,7 @@ export type DetailUnit = {
   fields: Array<FieldType>;
   contracts: Array<Contract>;
   classification: Array<ClassificationOptions>;
-  taxCode: string
+  taxCode: string;
 };
 
 export type CustomerType = {
@@ -601,6 +601,13 @@ export type DetailConfigSystem = {
   updateBy?: string;
 };
 
+export type GetListLivestream = {
+  content: string;
+  id: number;
+  status: number;
+  type: number;
+};
+
 export type UpdateConfigSystem = {
   id: number;
   namePage: string;

src/components/linkStream/update.vue

+<template>
+  <q-dialog persistent :model-value="isOpened">
+    <q-card style="min-width: 1000px" bordered>
+      <q-form greedy @submit.prevent="handleConfirmUpdate">
+        <q-card-section style="padding-bottom: 10px">
+          <q-item style="padding-left: 10px">
+            <q-item-section>
+              <q-item-label class="text-h6 text-weight-regular"
+                >Cập nhật cấu hình</q-item-label
+              >
+            </q-item-section>
+          </q-item>
+        </q-card-section>
+
+        <q-separator />
+        <q-card-section
+          class="overflow-auto"
+          style="max-height: calc(100vh - 14rem)"
+        >
+          <div class="row">
+            <div class="col-8">
+              <q-input
+                v-model="link"
+                label="Đường dẫn"
+                type="text"
+                class="q-ma-sm"
+                outlined
+                clearable
+              ></q-input>
+            </div>
+            <div class="col-2">
+              <q-select
+                v-model="typeLink"
+                label="Loại link"
+                type="text"
+                class="q-ma-sm"
+                :options="listType"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                outlined
+              ></q-select>
+            </div>
+            <div class="col-2">
+              <q-select
+                v-model="status"
+                label="Trạng thái"
+                type="text"
+                class="q-ma-sm"
+                :options="listStatus"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                outlined
+              ></q-select>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn
+            @click="handleTogle"
+            color="grey"
+            no-caps
+            style="width: 90px"
+            label="Hủy"
+          />
+          <q-btn
+            type="submit"
+            color="primary"
+            no-caps
+            style="width: 90px"
+            label="Ok"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts">
+import { i18n } from 'src/boot/i18n';
+import { defineComponent, PropType, Ref, ref, watch } from 'vue';
+import { Dialog, Notify } from 'quasar';
+import { API_PATHS, config } from 'src/assets/configurations.example';
+import { AxiosResponse } from 'axios';
+import { api, BaseResponseBody } from 'src/boot/axios';
+
+export default defineComponent({
+  components: {
+    // AddUpdateBannerDialog,
+  },
+  props: {
+    isOpened: {
+      type: Boolean,
+      required: true,
+    },
+    data: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props, context) {
+    watch(
+      () => props.isOpened,
+      (value) => {
+        if (value) {
+          link.value = props.data.content as string;
+          status.value = props.data.status as number;
+          typeLink.value = props.data.type as number;
+        }
+      }
+    );
+
+    const link = ref('');
+    const typeLink = ref();
+    const listType = ref([
+      {
+        id: 1,
+        name: 'Facebook',
+      },
+      {
+        id: 2,
+        name: 'Youtube',
+      },
+    ]);
+    const status = ref();
+    const listStatus = ref([
+      {
+        id: 1,
+        name: 'Hiển thị',
+      },
+      {
+        id: 0,
+        name: 'Ẩn',
+      },
+    ]);
+
+    const handleTogle = () => {
+      context.emit('update:isOpened', false);
+    };
+
+    const handleConfirmUpdate = async () => {
+      const response = (await api({
+        url: API_PATHS.updateLiveStream,
+        method: 'POST',
+        data: {
+          id: props.data.id as number,
+          content: link.value,
+          status: status.value as number,
+          type: typeLink.value as number,
+        },
+      })) as AxiosResponse<BaseResponseBody<unknown>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        Notify.create({
+          type: 'positive',
+          message: 'Cập nhật cấu hình thành công',
+          actions: [{ icon: 'close', color: 'white' }],
+        });
+        void handleTogle();
+        context.emit('SUCCESS');
+      }
+    };
+
+    return {
+      link,
+      typeLink,
+      listType,
+      status,
+      listStatus,
+      // data
+
+      // hàm
+      // handleConfim,
+      handleConfirmUpdate,
+      handleTogle,
+    };
+  },
+  emits: ['update:isOpened', 'SUCCESS'],
+});
+</script>

src/pages/cau-hinh-live-stream/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">
+      Cấu hình link Livestream
+      <q-separator vertical spaced />
+    </div>
+    <q-space></q-space>
+
+    <div class="col-12 q-mt-sm">
+      <q-table
+        :rows="listItem"
+        :columns="tableColumnsConfigSystem"
+        :no-data-label="$t('emptyData')"
+        row-key="name"
+        separator="cell"
+        :rows-per-page-label="$t('recordPerPage')"
+        :pagination="{
+          rowsPerPage: 0,
+        }"
+        wrap-cells
+        hide-pagination
+        class="sticky-header-table"
+      >
+        <template v-slot:body-cell-action="rowData">
+          <q-td style="padding: 0; text-align: center">
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="mdi-account-edit-outline"
+              @click="openUpdateDialog(rowData.row)"
+            >
+              <q-tooltip :offset="[10, 10]">{{
+                $t('listConfigSystem.toolTipMessageUpdate')
+              }}</q-tooltip>
+            </q-btn>
+          </q-td>
+        </template>
+        <template v-slot:body-cell-stt="item">
+          <q-td :item="item" style="text-align: center">
+            {{ 1 + item.rowIndex + pageSize * (pageIndex - 1) }}
+          </q-td>
+        </template>
+
+        <template v-slot:body-cell-content="item">
+          <q-td style="text-align: center">
+            <a :href="item.row.content" target="_blank">{{
+              item.row.content
+            }}</a>
+          </q-td>
+        </template>
+
+        <template v-slot:body-cell-type="item">
+          <q-td style="text-align: center">
+            <q-chip v-if="item.row.type === 1"> Facebook </q-chip>
+            <q-chip v-if="item.row.type === 2"> Youtube </q-chip>
+          </q-td>
+        </template>
+
+        <template v-slot:body-cell-status="item">
+          <q-td style="text-align: center">
+            <q-chip v-if="item.row.status === 1"> Hiển thị </q-chip>
+            <q-chip v-if="item.row.status === 0"> Ẩn </q-chip>
+          </q-td>
+        </template>
+      </q-table>
+    </div>
+    <div class="col-12 q-mt-sm">
+      <Pagination
+        v-model:currentPage="pageIndex"
+        v-model:pageSize="pageSize"
+        :totalPage="totalPage"
+        @update:pageSize="changePageSize"
+        @update:currentPage="getList"
+      />
+    </div>
+    <updateDialog
+      v-model:isOpened="showDialogUpdate"
+      :data="dataItem"
+      @SUCCESS="getList"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { i18n } from 'src/boot/i18n';
+import { defineComponent, onMounted, Ref, ref } from 'vue';
+import Pagination from 'components/pagination/index.vue';
+import { Dialog, Notify } from 'quasar';
+import { AxiosResponse } from 'axios';
+import { api, BaseResponseBody } from 'src/boot/axios';
+import updateDialog from '../../components/linkStream/update.vue';
+import {
+  PaginationResponse,
+  UpdateConfigSystem,
+
+  // LanguageType,
+} from 'src/assets/type';
+import { config, API_PATHS } from 'src/assets/configurations.example';
+
+export default defineComponent({
+  components: {
+    Pagination,
+    updateDialog,
+  },
+  setup() {
+    const tableColumnsConfigSystem = [
+      {
+        name: 'stt',
+        field: 'stt',
+        required: true,
+        label: i18n.global.t('listConfigSystem.titleColumnsTable.stt'),
+        headerStyle: 'text-align: center !important; width: 7%',
+        align: 'center',
+        sortable: false,
+      },
+
+      {
+        name: 'content',
+        field: 'content',
+        required: true,
+        label: 'URL',
+        align: 'left',
+        headerStyle: 'text-align: center !important; width: 19%',
+        sortable: false,
+      },
+
+      {
+        name: 'type',
+        field: 'type',
+        required: true,
+        label: 'loại',
+        align: 'center',
+        headerStyle: 'text-align: center !important; width: 19%',
+        sortable: false,
+      },
+
+      {
+        name: 'status',
+        field: 'status',
+        required: true,
+        label: 'Trạng thái',
+        align: 'center',
+        headerStyle: 'text-align: center !important; width: 19%',
+        sortable: false,
+      },
+
+      {
+        name: 'action',
+        field: 'action',
+        required: true,
+        label: i18n.global.t('listConfigSystem.titleColumnsTable.action'),
+        headerStyle: 'text-align: center !important; width: 15%',
+        align: 'center',
+        sortable: false,
+      },
+    ];
+    const dataItem = ref();
+    const listItem: Ref<any> = ref([]);
+    const sreachNamePage: Ref<string> = ref('');
+    const pageIndex = ref(1);
+    const pageSize = ref(20);
+    const totalPage = ref(1);
+    const changePageSize = () => {
+      pageIndex.value = 1;
+      void getList();
+    };
+
+    const showDialogUpdate = ref(false);
+    const namePage: Ref<string> = ref('');
+    const nameMenuOptions = ref([
+      { id: 1, name: 'Menu Trên' },
+      { id: 2, name: 'Menu Chính sách' },
+      { id: 3, name: 'Menu Liên hệ' },
+    ]);
+    const nameMenuSreach: Ref<{ id: number; name: string } | undefined> =
+      ref(undefined);
+    const nameMenu: Ref<unknown | undefined> = ref();
+    const url: Ref<string> = ref('');
+    const content: Ref<string> = ref('');
+    const numIndex: Ref<number | undefined> = ref(undefined);
+    const ConfigSystemId: Ref<number | undefined> = ref(undefined);
+    // const languageOptions: Ref<FromType> = ref([]);
+
+    const getList = async () => {
+      try {
+        const response = (await api({
+          url: API_PATHS.livestream,
+          method: 'GET',
+          params: {},
+        })) as AxiosResponse<BaseResponseBody<PaginationResponse<any>>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          listItem.value = response.data.data;
+        }
+      } catch (error) {}
+    };
+
+    const openUpdateDialog = (value: unknown) => {
+      dataItem.value = value;
+      showDialogUpdate.value = true;
+    };
+
+    const updateConfigSystem = async () => {
+      try {
+        const response = (await api({
+          url: API_PATHS.updateConfigSystem,
+          method: 'POST',
+          data: {
+            id: ConfigSystemId.value,
+            namePage: namePage.value,
+            url: url.value,
+            numIndex: numIndex.value,
+            content: content.value,
+            // nameMenu: { id: nameMenu.value?.id },
+            // langs: languageOptions.value,
+          },
+        })) as AxiosResponse<BaseResponseBody<UpdateConfigSystem>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          Notify.create({
+            type: 'positive',
+            message: i18n.global.t(
+              'listConfigSystem.actionMessages.updateSuccess'
+            ),
+            actions: [{ icon: 'close', color: 'white' }],
+          });
+
+          showDialogUpdate.value = false;
+        }
+      } catch (error) {}
+    };
+
+    onMounted(() => {
+      void getList();
+    });
+    return {
+      getList,
+      sreachNamePage,
+      listItem,
+      tableColumnsConfigSystem,
+      pageIndex,
+      pageSize,
+      totalPage,
+      changePageSize,
+      showDialogUpdate,
+      namePage,
+      content,
+      url,
+      numIndex,
+      nameMenu,
+      nameMenuOptions,
+      ConfigSystemId,
+      dataItem,
+
+      openUpdateDialog,
+
+      updateConfigSystem,
+
+      nameMenuSreach,
+      // languageOptions,
+      // getLanguage,
+    };
+  },
+});
+</script>

src/router/routes.ts

@@ -35,6 +35,7 @@ export enum Pages {
   bcYT = 'bc-yeu-thich',
   bcBK = 'bc-booking',
   DMQ = 'danh-muc-quyen',
+  CHLS = 'cau-hinh-live-stream',
 }
 
 const routes: RouteRecordRaw[] = [
@@ -162,6 +163,12 @@ const routes: RouteRecordRaw[] = [
         component: () => import('pages/cau-hinh-trang-tinh/index.vue'),
         name: Pages.configSystem,
       },
+
+      {
+        path: 'cau-hinh-live-stream',
+        component: () => import('pages/cau-hinh-live-stream/index.vue'),
+        name: Pages.CHLS,
+      },
       {
         path: 'cau-hinh-tin-tuc',
         component: () => import('pages/cau-hinh-tin-tuc/index.vue'),
@@ -209,7 +216,6 @@ const routes: RouteRecordRaw[] = [
         component: () => import('pages/danh-muc-quyen/index.vue'),
         name: Pages.DMQ,
       },
-      
     ],
   },