coba-tampilan/components/app/cardList/CrudCardList.vue

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { HeartIcon, UsersIcon, TrashIcon } from "vue-tabler-icons";
import BaseBreadcrumb from "@/components/shared/BaseBreadcrumb.vue";
// import { useFrinedsStore } from '@/stores/apps/userprofile/friends';
import UserCards from "@/components/widgets2/cards/UserCards.vue";
import { userCards } from "~/_mockApis/components/widget/card";
import { toast } from "vue3-toastify";
import "vue3-toastify/dist/index.css";

// const store = useFrinedsStore();

// onMounted(() => {
//     store.fetchFrineds();
// });
const dialog = ref(false);
const dialogDelete = ref(false);
const editedIndex = ref(-1);
const editedItem = ref({});
const defaultItem = ref({});

const formTitle = computed(() => {
  return editedIndex.value === -1 ? "New Item" : "Edit Item";
});

const getData: any = computed(() => {
  // return store.friends;
  return userCards;
});
const searchValue = ref("");

const filteredCards = computed(() => {
  return getData.value.filter((card: any) => {
    return card.title.toLowerCase().includes(searchValue.value.toLowerCase());
  });
});

function editItem(item: any) {
  editedIndex.value = filteredCards.value.indexOf(item);
  editedItem.value = Object.assign({}, item);
  dialog.value = true;
}

function deleteItem(item: any) {
  editedIndex.value = filteredCards.value.indexOf(item);
  editedItem.value = Object.assign({}, item);
  dialogDelete.value = true;
}

function deleteItemConfirm() {
  filteredCards.value.splice(editedIndex.value, 1);
  closeDelete();

  toast("Berhasil hapus data!", {
    type: "success",
    dangerouslyHTMLString: true,
    autoClose: 2000,
  });
}
function close() {
  dialog.value = false;
  nextTick(() => {
    editedItem.value = Object.assign({}, defaultItem.value);
    editedIndex.value = -1;
  });
}
function closeDelete() {
  dialogDelete.value = false;
  nextTick(() => {
    editedItem.value = Object.assign({}, defaultItem.value);
    editedIndex.value = -1;
  });
}
function save() {
  if (editedIndex.value > -1) {
    Object.assign(filteredCards.value[editedIndex.value], editedItem.value);

    toast("Berhasil ubah data!", {
      type: "success",
      dangerouslyHTMLString: true,
      autoClose: 2000,
    });
  } else {
    filteredCards.value.push(editedItem.value);
    toast("Berhasil simpan data!", {
      type: "success",
      dangerouslyHTMLString: true,
      autoClose: 2000,
    });
  }
  close();
}

watch(dialog, (val) => {
  val || close();
});
watch(dialogDelete, (val) => {
  val || closeDelete();
});
</script>

<template>
  <v-row class="justify-content-end mt-5">
    <v-col cols="12">
      <div class="d-sm-flex justify-end mb-2">
        <v-btn color="primary" variant="flat" dark @click="dialog = true"
          >+ New Item</v-btn
        >
      </div>
      <div class="d-sm-flex align-center mb-5">
        <h3 class="text-h3">
          Social Media Contacts
          <v-chip
            size="small"
            class="ml-2 elevation-0"
            variant="elevated"
            color="secondary"
            >4</v-chip
          >
        </h3>
        <v-sheet width="250" class="ml-0 ml-sm-auto mt-3 mt-sm-0">
          <v-text-field
            color="primary"
            hide-details
            variant="outlined"
            placeholder="Search Friends"
            density="compact"
            prepend-inner-icon="mdi-magnify"
            v-model="searchValue"
          >
          </v-text-field>
        </v-sheet>
      </div>

      <!-- card list -->
      <UserCards :data="filteredCards">
        <template v-slot:avatar="data">
          <img :src="data.prop.avatar" :alt="data.prop.avatar" width="80" />
        </template>
        <template v-slot:title="data">
          {{ data.prop.title }}
        </template>
        <template v-slot:left-side-content="data">
          <v-avatar
            size="32"
            class="ml-n2 avtar-border"
            v-for="user in data.prop.userGroup"
            :key="user.icon"
          >
            <img :src="user.icon" alt="avatar" height="32" />
          </v-avatar>
        </template>
        <template v-slot:right-side-content="data">
          <p class="text-subtitle-1 textSecondary">{{ data.prop.subtitle }}</p>
        </template>
        <template v-slot:actions="data">
          <v-btn
            color="secondary"
            variant="tonal"
            block
            @click="editItem(data.prop)"
            >Edit Friend</v-btn
          >
          <v-btn
            color="error"
            variant="tonal"
            class="mt-3"
            block
            @click="deleteItem(data.prop)"
            >Remove</v-btn
          >
        </template>
      </UserCards>

      <!-- dialog create & update -->
      <UiComponents2DialogsScrollable v-model="dialog">
        <template v-slot:title>{{ formTitle }}</template>
        <template v-slot:text>
          <!-- <pre>{{ editedItem }}</pre> -->
          <v-container class="px-0">
            <v-row>
              <v-col cols="12" sm="6" md="6">
                <v-text-field
                  v-model="editedItem.title"
                  label="Name"
                ></v-text-field>
              </v-col>
              <v-col cols="12" sm="6" md="6">
                <v-text-field
                  v-model="editedItem.subtitle"
                  label="Subtitle"
                  disabled
                ></v-text-field>
              </v-col>
              <v-col cols="12" sm="6" md="12">
                <h5 class="text-h6 mb-8">Media</h5>
                <v-file-input
                  color="primary"
                  label="Drop files here or click to upload."
                  placeholder="Select your files"
                  prepend-icon="mdi-paperclip"
                  variant="outlined"
                  chips
                  multiple
                ></v-file-input>
              </v-col>
            </v-row>
          </v-container>
        </template>
        <template v-slot:actions>
          <v-btn color="error" variant="tonal" @click="close"> Cancel </v-btn>
          <v-btn color="success" variant="tonal" @click="save"> Save </v-btn>
        </template>
      </UiComponents2DialogsScrollable>

      <!-- dialog delete -->
      <UiComponents2DialogsActivator v-model="dialogDelete">
        <template v-slot:text
          >Are you sure you want to delete this item?</template
        >
        <template v-slot:actions>
          <v-btn color="error" variant="flat" dark @click="closeDelete"
            >Cancel</v-btn
          >
          <v-btn color="primary" variant="flat" dark @click="deleteItemConfirm"
            >OK</v-btn
          >
        </template>
      </UiComponents2DialogsActivator>
    </v-col>
  </v-row>
</template>