update UI banner

src/assets/enums.ts

@@ -28,3 +28,8 @@ export enum PostStatus {
   active = 1,
   inactive = 0,
 }
+
+export enum BannerStatus {
+  active = 1,
+  inactive = 0,
+}

src/components/add-update-banner/index.vue

+<template>
+  <q-dialog
+    persistent
+    :model-value="isOpened"
+    @update:model-value="$emit('update:isOpened', $event)"
+  >
+    <q-card class="full-width" style="max-width: 50rem" bordered>
+      <q-form
+        greedy
+        @submit.prevent="
+          $emit('saveBannerInfo', {});
+          $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">{{
+                isUpdate
+                  ? $t('banner.dialogLabel.title.addBanner')
+                  : $t('field.dialogLabel.title.updateBanner')
+              }}</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="row q-col-gutter-sm">
+            <div class="col-6">
+              <div class="row flex-center q-pt-sm">
+                <div>
+                  <q-card style="margin-bottom: 8px" v-if="image !== null">
+                    <q-img
+                      :src="image"
+                      style="height: 268px; width: 350px"
+                      @click="uploadAvatar"
+                    >
+                    </q-img>
+                    <q-icon
+                      name="mdi-close-circle"
+                      color="red"
+                      style="position: absolute; right: 0; font-size: 18px"
+                      @click="deleteAvatar"
+                    ></q-icon>
+                  </q-card>
+                  <q-card v-else style="margin-bottom: 8px">
+                    <q-img
+                      src="~/assets/noavatar.png"
+                      style="height: 265px; width: 350px"
+                    ></q-img>
+                  </q-card>
+
+                  <q-card @click="uploadAvatar">
+                    <div align="center" class="flex flex-center q-py-xs">
+                      <q-icon
+                        name="mdi-plus-circle-outline"
+                        :size="'xs'"
+                      ></q-icon>
+                      <div class="q-mt-xs">
+                        {{ $t('banner.uploadImg') }}
+                      </div>
+                    </div>
+
+                    <input
+                      ref="upload"
+                      hidden
+                      type="file"
+                      @change="selectedFile($event.target.files)"
+                      accept="image/png, image/jpeg"
+                    />
+                  </q-card>
+                </div>
+              </div>
+            </div>
+            <div class="col-6">
+              <q-input
+                :model-value="name"
+                @update:model-value="$emit('update:name', $event)"
+                :label="$t('banner.dialogLabel.bannerLabels.name')"
+                type="text"
+                class="q-my-sm"
+                outlined
+                :rules="nameRules"
+                clearable
+              ></q-input>
+              <q-select
+                :model-value="type"
+                @update:model-value="$emit('update:type', $event)"
+                :label="$t('banner.dialogLabel.bannerLabels.type')"
+                :rules="typeRules"
+                :options="typeOptions"
+                map-options
+                option-value="id"
+                option-label="name"
+                type="text"
+                class="q-my-sm"
+                outlined
+              ></q-select>
+              <q-select
+                :model-value="location"
+                @update:model-value="$emit('update:location', $event)"
+                :label="$t('banner.dialogLabel.bannerLabels.location')"
+                :rules="locationRules"
+                :options="locationOptions"
+                map-options
+                option-value="id"
+                option-label="name"
+                type="text"
+                class="q-my-sm"
+                outlined
+              ></q-select>
+              <q-input
+                :model-value="urlTarget"
+                @update:model-value="$emit('update:urlTarget', $event)"
+                :label="$t('banner.dialogLabel.bannerLabels.urlTarget')"
+                :rules="urlTargetRules"
+                type="text"
+                class="q-my-sm"
+                outlined
+                clearable
+              ></q-input>
+              <div class="q-pt-sm">
+                <span class="text-body1">{{
+                  $t('banner.dialogLabel.bannerLabels.status')
+                }}</span
+                ><q-toggle
+                  :model-value="status"
+                  :true-value="1"
+                  :false-value="2"
+                  @update:model-value="$emit('update:status', $event)"
+                />
+              </div>
+            </div>
+          </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('banner.crudActions.cancel')"
+              @click="$emit('update:isOpened', false)"
+            />
+            <q-btn
+              type="submit"
+              color="primary"
+              no-caps
+              style="width: 90px"
+              :label="$t('banner.crudActions.save')"
+            />
+          </div>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { i18n } from 'src/boot/i18n';
+
+export default defineComponent({
+  props: {
+    isOpened: {
+      type: Boolean,
+      required: true,
+    },
+    isUpdate: { type: Boolean, default: false },
+    name: { type: String, required: true },
+    image: { type: String, required: true },
+    urlTarget: { type: String, required: true },
+    status: { type: Number, required: true },
+    type: { type: Number, required: true },
+    typeOptions: { type: Array, required: true },
+    location: { type: Number, required: true },
+    locationOptions: { type: Array, required: true },
+  },
+  setup(_, context) {
+    const selectedFile = (value: FileList) => {
+      context.emit('SetAvatar', {
+        file: value[0],
+        url: URL.createObjectURL(value[0]),
+      });
+    };
+    const deleteAvatar = () => {
+      context.emit('deleteAvatar');
+    };
+    const upload = ref(null);
+    const uploadAvatar = () => {
+      // eslint-disable-next-line
+      // @ts-ignore
+      // eslint-disable-next-line
+      upload.value?.click();
+    };
+    const urlTargetRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('banner.validateMessages.requireUrlTarget'),
+    ];
+    const nameRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('banner.validateMessages.requireName'),
+    ];
+    const typeRules = [
+      (val?: number) =>
+        val !== undefined ||
+        i18n.global.t('banner.validateMessages.requireType'),
+    ];
+    const locationRules = [
+      (val?: number) =>
+        val !== undefined ||
+        i18n.global.t('banner.validateMessages.requireLocation'),
+    ];
+    return {
+      urlTargetRules,
+      nameRules,
+      typeRules,
+      locationRules,
+      selectedFile,
+      deleteAvatar,
+      uploadAvatar,
+    };
+  },
+  emits: [
+    'update:isOpened',
+    'update:name',
+    'update:urlTarget',
+    'update:type',
+    'update:location',
+    'update:status',
+    'update:image',
+    'SetAvatar',
+    'deleteAvatar',
+    'saveBannerInfo',
+  ],
+});
+</script>

src/i18n/vi/index.ts

@@ -721,4 +721,62 @@ export default {
       uploadImg: 'Tải lên ảnh bìa',
     },
   },
+
+  //banner
+  banner: {
+    title: 'Danh sách banner',
+    uploadImg: 'Tải lên ảnh banner',
+    tableColumnsBanner: {
+      stt: 'STT',
+      name: 'Tên banner',
+      type: 'Loại banner',
+      location: 'Vị trí',
+      image: 'Ảnh',
+      urlTarget: 'Url targer',
+      status: 'Trạng thái',
+      action: 'Chức năng',
+    },
+    statusLabel: {
+      active: 'Đang hoạt động',
+      inactive: 'Ngừng hoạt động',
+    },
+    dialogLabel: {
+      title: {
+        addBanner: 'Thêm banner',
+        updateBanner: 'Cập nhật banner',
+      },
+      bannerLabels: {
+        name: 'Tên banner *',
+        type: 'Loại banner *',
+        location: 'Vị trí *',
+        image: 'Ảnh',
+        urlTarget: 'Url target',
+        status: 'Trạng thái',
+      },
+    },
+    toolTipMessage: {
+      updateBanner: 'Cập nhật',
+      deleteBanner: 'Xoá',
+    },
+    crudActions: {
+      save: 'Lưu',
+      cancel: 'Đóng',
+    },
+    validateMessages: {
+      requireName: 'Vui lòng nhập Tên banner',
+      requireType: 'Vui lòng chọn Loại banner',
+      requireLocation: 'Vui lòng chọn Vị trí',
+      requireUrlTarget: 'Vui lòng nhập Url target',
+    },
+    confirmActionsTitle: {
+      confirmDeleteBannerTitle: 'Xác nhận',
+      confirmDeleteBannerCancelBtnLabel: 'Huỷ',
+      confirmDeleteBannerContent: 'Bạn có chắc chắn muốn xoá Banner này không?',
+    },
+    actionMessages: {
+      addNewBannerAccess: 'Thêm banner thành công',
+      deleteBannerAccess: 'Xoá banner thành công',
+      updateBannerAccess: 'Cập nhật banner thành công',
+    },
+  },
 };

src/router/routes.ts

@@ -14,6 +14,7 @@ export enum Pages {
   field = 'linh-vuc-hoat-dong',
   post = 'bai-viet',
   postCategory = 'danh-muc-bai-viet',
+  banner = 'banner',
 }
 
 const routes: RouteRecordRaw[] = [
@@ -86,6 +87,11 @@ const routes: RouteRecordRaw[] = [
         component: () => import('pages/danh-muc-bai-viet/index.vue'),
         name: Pages.postCategory,
       },
+      {
+        path: 'banner',
+        component: () => import('pages/banner/index.vue'),
+        name: Pages.banner,
+      },
     ],
   },