Merge branch 'master' of http://103.147.34.20:30081/son.nguyen/quasar-web-base

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

@@ -31,16 +31,43 @@
         >
           <div class="row q-col-gutter-sm">
             <div class="col-6">
-              <q-input
-                :model-value="image"
-                @update:model-value="$emit('update:image', $event)"
-                :label="$t('post.dialogLabel.postLabels.image')"
-                type="text"
-                class="q-my-sm"
-                outlined
-                :rules="imageRules"
-                clearable
-              ></q-input>
+              <div>
+                <q-card style="margin-bottom: 8px" v-if="image !== null">
+                  <q-img :src="image" style="height: 180px; width: 135px">
+                  </q-img>
+                  <q-icon
+                    name="mdi-close-circle"
+                    color="red"
+                    style="position: absolute; right: 0; font-size: 18px"
+                  ></q-icon>
+                </q-card>
+                <q-card v-else style="margin-bottom: 8px">
+                  <q-img
+                    src="~/assets/noavatar.png"
+                    style="height: 180px; width: 135px"
+                  ></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('uploadImage.uploadBanner') }}
+                    </div>
+                  </div>
+
+                  <input
+                    ref="upload"
+                    hidden
+                    type="file"
+                    @change="selectedFile($event.target.files)"
+                    accept="image/png, image/jpeg"
+                  />
+                </q-card>
+              </div>
             </div>
             <div class="col-6">
               <q-input
@@ -109,7 +136,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 import { i18n } from 'src/boot/i18n';
 
 export default defineComponent({
@@ -125,7 +152,22 @@ export default defineComponent({
     content: { type: String, required: true },
     status: { type: Number, required: true },
   },
-  setup() {
+  setup(props, context) {
+    const selectedFile = (value: FileList) => {
+      console.log(value, 'valueee image');
+      // console.log(URL.createObjectURL(value[0]));
+      context.emit('SetAvatar', {
+        file: value[0],
+        url: URL.createObjectURL(value[0]),
+      });
+    };
+    const upload = ref(null);
+    const uploadAvatar = () => {
+      // eslint-disable-next-line
+      // @ts-ignore
+      // eslint-disable-next-line
+      upload.value?.click();
+    };
     const imageRules = [
       (val?: string) =>
         (val && val.trim().length) ||
@@ -145,6 +187,9 @@ export default defineComponent({
       contentRules,
       nameRules,
       imageRules,
+      selectedFile,
+      upload,
+      uploadAvatar,
     };
   },
   emits: [
@@ -155,6 +200,7 @@ export default defineComponent({
     'update:content',
     'update:status',
     'savePostInfo',
+    'SetAvatar',
   ],
 });
 </script>

src/components/artist-information/personal-information/index.vue

@@ -10,7 +10,7 @@
         <div class="col-8 flex flex-center">
           <div>
             <q-card style="margin-bottom: 8px" v-if="avatar !== null">
-              <q-img :src="avatar" style="height: 180px; width: 135px"> </q-img>
+              <q-img :src="avatar" style="height: 180px; width: 135px"></q-img>
               <q-icon
                 name="mdi-close-circle"
                 color="red"

src/pages/bai-viet/index.vue

@@ -45,8 +45,16 @@
         hide-pagination
         class="sticky-header-table"
       >
+        <template v-slot:body-cell-STT="item">
+          <q-td style="padding: 0; height: 100%">
+            <div align="center">
+              {{ item.rowIndex + 1 }}
+            </div>
+          </q-td>
+        </template>
         <template v-slot:body-cell-action="item">
-          <q-td style="padding: 0" class="center">
+          <q-td style="padding: 0">
+            <div align="center">
               <q-btn
                 flat
                 round
@@ -69,6 +77,7 @@
                   $t('post.toolTipMessage.deletePost')
                 }}</q-tooltip>
               </q-btn>
+            </div>
           </q-td>
         </template>
         <template v-slot:body-cell-image="image">
@@ -121,6 +130,7 @@
       v-model:content="content"
       v-model:status="status"
       isUpdate
+      @SetAvatar="setAvatar"
       @savePostInfo="addNewPost"
     />
 
@@ -156,14 +166,14 @@ export default defineComponent({
   },
   setup() {
     const postTableColumns = [
-      // {
-      //   name: 'index',
-      //   field: 'index',
-      //   required: true,
-      //   label: 'STT',
-      //   align: 'center',
-      //   sortable: false,
-      // },
+      {
+        name: 'STT',
+        field: 'STT',
+        required: true,
+        label: 'STT',
+        align: 'center',
+        sortable: false,
+      },
       {
         name: 'name',
         field: 'name',
@@ -397,6 +407,9 @@ export default defineComponent({
       //   void getListPost();
       // }
     };
+    const setAvatar = (value: { file?: File; url?: string }) => {
+      image.value = value.url as string;
+    };
 
     onMounted(() => {
       void getListPost();
@@ -426,6 +439,7 @@ export default defineComponent({
       content,
       image,
       postId,
+      setAvatar,
     };
   },
 });