เอกสาร/ผลงาน => ปรับ การ upload file

src/modules/13_portfolio/views/Main.vue

@@ -11,7 +11,14 @@ const currentPage = ref<number>(1);
 const router = useRouter();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogRemove,
+  success,
+} = mixin;
 
 const pagination = ref({
   sortBy: "desc",
@@ -91,6 +98,22 @@ const clickAdd = async () => {
 const clickBack = () => {
   router.push(`/`);
 };
+
+function onDelete(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.portfolioId(id))
+      .then((res) => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        fecthList();
+      })
+      .catch((err) => {
+        messageError($q, err);
+        hideLoader();
+      });
+  });
+}
 </script>
 
 <template>
@@ -204,6 +227,7 @@ const clickBack = () => {
                   >
                     <span class="text-weight-medium">{{ col.label }}</span>
                   </q-th>
+                  <q-th auto-width />
                 </q-tr>
               </template>
               <template v-slot:body="props">
@@ -217,20 +241,26 @@ const clickBack = () => {
                     <div v-if="col.name == 'no'">
                       {{ props.rowIndex + 1 }}
                     </div>
-                    <div>
+                    <div v-else class="table_ellipsis2">
                       {{ col.value }}
                     </div>
                   </q-td>
+                  <q-td>
+                    <q-btn
+                      dense
+                      flat
+                      round
+                      color="red"
+                      icon="delete"
+                      @click.pervent="onDelete(props.row.id)"
+                    />
+                  </q-td>
                 </q-tr>
               </template>
               <template #item="props">
                 <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-                  <q-card
-                    bordered
-                    flat
-                    @click="router.push(`/portfolio/` + props.row.id)"
-                  >
-                    <q-list>
+                  <q-card bordered flat>
+                    <q-list @click="router.push(`/portfolio/` + props.row.id)">
                       <q-item
                         v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
                         :key="col.name"
@@ -248,6 +278,18 @@ const clickBack = () => {
                         </q-item-section>
                       </q-item>
                     </q-list>
+                    <q-separator />
+
+                    <q-card-actions vertical align="center">
+                      <q-btn
+                        dense
+                        flat
+                        round
+                        color="red"
+                        icon="delete"
+                        @click.pervent="onDelete(props.row.id)"
+                      />
+                    </q-card-actions>
                   </q-card>
                 </div>
               </template>