Asrofil Vault

6. Show Data

4 min read

tech

Table of Content

Template

<button class="btn btn-primary btn-sm text-white" @click="showApplication(ap.id)"><i class="bi bi-eye-fill"></i></button>

Logicnya

showApplication(id) {
	localStorage.setItem('applicationId', id);
	this.$router.push('/applied/detail');
},

Penjelasan:

  • this.$router adalah objek yang disediakan oleh Vue Router untuk melakukan navigasi di dalam aplikasi VueJS.
  • push('/applied/detail') digunakan untuk melakukan navigasi ke URL /applied/detail menggunakan Vue Router. Ini akan mengarahkan pengguna ke halaman baru di aplikasi VueJS tersebut.

Backendnya

public function getDataFirst(Request $req){
	$data = DB::table('applications')->where('id', $req->id)->first();
	return response()->json($data);
}

Template Detailsnya

ApplicationDetailsComponent.vue

<template>
    <div class="content p-6">
        <div class="intro-y flex flex-col sm:flex-row items-center mb-8">
            <h2 class="text-2xl font-semibold mr-auto">Application Details</h2>
        </div>
        <div class="bg-white shadow-md rounded-lg p-6">
            <div v-if="application" class="text-gray-800">
                <h3 class="text-xl font-bold mb-2">{{ application.company }}</h3>
                <div class="mb-4">
                    <p><strong class="font-medium">Role:</strong> {{ application.role }}</p>
                    <p><strong class="font-medium">Platform:</strong> {{ application.platform }}</p>
                    <p><strong class="font-medium">Status:</strong> {{ application.status }}</p>
                    <p><strong class="font-medium">Applied At:</strong> {{ moment(application.apply_at).format('DD MMMM YYYY') }}</p>
                </div>
            </div>
            <div v-else class="text-gray-500">
                <p>Loading application details...</p>
            </div>
        </div>
        <div class="bg-white shadow-md rounded-lg p-6 mt-5">
            <div class="card-header mb-4">
                <h3 class="text-xl font-semibold">Description</h3>
            </div>
            <div v-if="application" class="text-gray-800" v-html="application.description"></div>
            <div v-else class="text-gray-500">
                <p>Loading description...</p>
            </div>
        </div>
    </div>
</template>

Logicnya

<script>
import axios from 'axios';
import moment from 'moment';
 
export default {
    data() {
        return {
            application: null
        };
    },
    created() {
        const id = localStorage.getItem('applicationId');
        if (id) {
            this.fetchApplication(id);
        }
    },
    methods: {
        fetchApplication(id) {
            axios.get("/api/getDataFirst",{
                params: {
                    id: id
                }
            })
                .then(res => {
                    this.application = res.data;
                })
                .catch(err => {
                    console.log("ada error nih!", err);
                });
        }
    },
    computed: {
        moment() {
            return moment;
        }
    }
}
</script>

Penjelasan:

  • params: { id: id } berfungsi untuk menyertakan parameter id sebagai bagian dari URL request ke endpoint.

Update Logic

Hampir mirip dengan logic show data dan create. berikut codingan lengkapnya:

<template>
<div class="content">
        <div class="intro-y col-span-12 lg:col-span-6 mt-1">
            <div class="intro-y box">
                <div class="flex flex-col sm:flex-row items-center p-3 border-b border-slate-200/60 dark:border-darkmode-400">
                    <h2 class="font-medium text-base mr-auto">
                        Update Form Lamaran
                    </h2>
                </div>
                <div id="vertical-form" class="p-5">
                    <div class="preview">
                        <form @submit.prevent="update">
                        <div class="">
                            <label for="company" class="form-label">Nama Perusahaan</label>
                            <input id="company" type="text" class="form-control" v-model="company">
                        </div>
                        <div class="mt-3">
                            <label for="role" class="form-label">Role Pekerjaan</label>
                            <input id="role" type="text" class="form-control" v-model="role">
                        </div>
                        <div class="mt-3">
                            <label for="platform" class="form-label">Platform</label>
                            <select class="form-control" v-model="platform">
                                <option value="">Pilih</option>
                                <option>Linkedin</option>
                                <option>Glints</option>
                                <option>Job Street</option>
                                <option>Karir</option>
                                <option>Pintarnya</option>
                            </select>
                        </div>
                        <div class="mt-3">
                            <label for="apply_at" class="form-label">Tanggal Lamaran</label>
                            <input id="apply_at" type="date" class="form-control" v-model="apply_at">
                        </div>
                        <div class="mt-3">
                            <label for="status" class="form-label">Status Lamaran</label>
                            <select class="form-control" v-model="status">
                                <option value="">Pilih</option>
                                <option>Send CV</option>
                                <option>Viewed</option>
                                <option>Interview HRD</option>
                                <option>Interview User</option>
                                <option>Success</option>
                                <option>Failed</option>
                            </select>
                        </div>
                        <div class="mt-3">
                            <label for="link" class="form-label">Link Eksternal</label>
                            <input id="link" type="text" class="form-control" v-model="link">
                        </div>
                        <div class="mt-3">
                            <label for="description" class="form-label">Deskripsi</label><br>
                            <textarea class="form-control" v-model="description" rows="10"></textarea>
                        </div>
                        <button type="submit" class="btn btn-warning text-white mt-3">Update</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
 
<script>
import axios from 'axios';
import moment from 'moment';
import Swal from 'sweetalert2';
 
export default {
  data() {
    return {
      company: '',
      role: '',
      platform: '',
      apply_at: '',
      status: '',
      link: '',
      description: '',
    };
  },
  created() {
    const id = localStorage.getItem('applicationId');
    if (id) {
        this.fetchData(id);
    }
  },
  methods: {
    fetchData(id) {
      axios.get('/api/getDataFirst', {
        params: {
            id: id
        }
      })
        .then(res => {
          const data = res.data;
 
          const stripHtmlTags = (html) => {
            const doc = new DOMParser().parseFromString(html, 'text/html');
            return doc.body.textContent || "";
            };
 
          this.company = data.company || '';
          this.role = data.role || '';
          this.platform = data.platform || '';
          this.apply_at = moment(data.apply_at).format('YYYY-MM-DD') || '';
          this.status = data.status || '';
          this.link = data.link || '';
          this.description = stripHtmlTags(data.description) || '';
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    },
    update() {
      axios.put('/api/update', {
        id: localStorage.getItem('applicationId'),
        company: this.company,
        role: this.role,
        platform: this.platform,
        apply_at: this.apply_at,
        status: this.status,
        link: this.link,
        description: this.description
      })
      .then(res => {
        Swal.fire({
            title: "Berhasil",
            icon: "success",
            text: res.data.message
        });
      })
      .catch(error => {
        if (error.response && error.response.status === 422) {
            let errors = error.response.data.errors;
            let errorMessage = '<ul>';
            Object.keys(errors).forEach(field => {
                errorMessage += `<li>${errors[field][0]}</li>`;
            });
            errorMessage += '</ul>';
 
            Swal.fire({
                icon: 'error',
                title: 'Error!',
                html: errorMessage,
                confirmButtonText: 'OK'
            });
        } else {
            console.error('Ada masalah saat menyimpan data:', error);
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: 'Terjadi kesalahan saat menyimpan data!',
                confirmButtonText: 'OK'
            });
        }
    });
    }
  },
  computed: {
    moment() {
        return moment;
    }
  }
};
</script>

Date: 25-07-2024

Graph View

Recent notes