Initial commit

app/components/viewer/EmpRow.vue

@@ -0,0 +1,54 @@
+<script setup>
+const props = defineProps({
+  row: Object,
+});
+
+const showEmployeeInfoModal = ref();
+
+function toggleModal() {
+  showEmployeeInfoModal.value = {
+    component: 'viewer/EmployeeInfo',
+    width: '600px',
+    height: 'auto',
+    vbind: {
+      row: props.row,
+    },
+    title: 'Thông tin chi tiết nhân viên',
+  };
+}
+</script>
+<template>
+  <tr>
+    <td>{{ row.code }}</td>
+    <td>
+      <div>
+        <p>{{ row.name }}</p>
+        <p class="has-text-grey fs-13">{{ row.email }}</p>
+      </div>
+    </td>
+    <td>{{ row.department }}</td>
+    <td>{{ row.title }}</td>
+    <td>{{ row.showroom }}</td>
+    <td>
+      <span class="tag has-text-secondary">{{ row.status }}</span>
+    </td>
+    <td>
+      <div class="is-flex is-gap-1">
+        <button @click="toggleModal" class="button is-white p-1">
+          <SvgIcon v-bind="{ name: 'eye.svg', type: 'success', size: 17 }" />
+        </button>
+        <button class="button is-white p-1">
+          <SvgIcon v-bind="{ name: 'pen1.svg', type: 'success', size: 17 }" />
+        </button>
+        <button class="button is-white p-1">
+          <SvgIcon v-bind="{ name: 'bin.svg', type: 'success', size: 17 }" />
+        </button>
+      </div>
+    </td>
+    <Modal
+      v-bind="showEmployeeInfoModal"
+      v-if="showEmployeeInfoModal"
+      @close="showEmployeeInfoModal = undefined"
+    />
+  </tr>
+</template>