@iservice365/layer-common 0.1.0 → 0.2.1

package/components/ListView.vue

@@ -0,0 +1,87 @@
+<template>
+  <TableListSecondary
+    :headers="headers"
+    :items="items"
+    :pages="pages"
+    :page-range="pageRange"
+    :loading="loading"
+    :height="height"
+    :page="page"
+    v-model="selected"
+    @update:pagination="_getItems"
+    @click:row="onRowClick"
+    :length="pages"
+    :clickable-rows="clickableRows"
+    @update:page="onPageChange"
+  >
+    <template #title>
+      <slot name="title" />
+    </template>
+
+    <template #action-button>
+      <slot name="action-button" />
+    </template>
+
+    <template
+      v-for="header in headers"
+      :key="header.value"
+      #[header.value]="slotProps"
+    >
+      <slot :name="header.value" v-bind="slotProps" />
+    </template>
+
+    <template #action-table="{ item }">
+      <slot name="action-table" :item="item" />
+    </template>
+  </TableListSecondary>
+</template>
+
+<script lang="ts" setup>
+import { getCurrentInstance } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+const emit = defineEmits(["click:create", "update:pagination", "row-click"]);
+const page = defineModel("page", { type: Number, default: 1 });
+
+const props = defineProps({
+  headers: Array as PropType<any[]>,
+  items: Array as PropType<any[]>,
+  pages: Number,
+  pageRange: String,
+  page: Number,
+  loading: Boolean,
+  height: {
+    type: String,
+    default: "calc(100vh - 175px)",
+  },
+  viewPage: Object as PropType<{ name: string }>,
+  org: String,
+  site: String,
+  id: String,
+  getItems: Function as PropType<() => Promise<void>>,
+  deleteItem: Function as PropType<(id: string) => Promise<void>>,
+  clickableRows: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const selected = ref<string[]>([]);
+
+async function _getItems() {
+  if (props.getItems) {
+    await props.getItems();
+    emit("update:pagination");
+  }
+}
+
+function onPageChange(newPage: number) {
+  page.value = newPage;
+  _getItems();
+  emit("update:pagination", newPage);
+}
+
+function onRowClick(item: any) {
+  emit("row-click", item);
+}
+</script>

package/components/MemberMain.vue

@@ -0,0 +1,459 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12" class="mb-2">
+      <v-row no-gutters>
+        <v-btn
+          v-if="props.seatManagement !== 'index'"
+          class="text-none"
+          rounded="pill"
+          variant="tonal"
+          :to="{
+            name: props.seatManagement,
+            params: { organization: props.orgId },
+          }"
+          size="large"
+        >
+          Manage seats
+        </v-btn>
+      </v-row>
+    </v-col>
+
+    <v-col cols="12">
+      <v-card width="100%" variant="outlined" border="thin" rounded="lg">
+        <v-toolbar density="compact" color="grey-lighten-4">
+          <template #prepend>
+            <v-btn fab icon density="comfortable" @click="getAll()">
+              <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+          </template>
+
+          <template #append>
+            <v-row no-gutters justify="end" align="center">
+              <span class="mr-2 text-caption text-font gray">
+                {{ pageRange }}
+              </span>
+              <local-pagination
+                v-model="page"
+                :length="pages"
+                @update:value="getAll()"
+              />
+            </v-row>
+          </template>
+
+          <template #extension>
+            <v-tabs>
+              <v-tab
+                v-for="tab in [
+                  { name: 'Active', status: 'active' },
+                  { name: 'Suspended', status: 'suspended' },
+                ]"
+                :key="tab.status"
+                :to="{
+                  name: props.route,
+                  params: setRouteParams({
+                    status: tab.status,
+                    orgId: props.orgId,
+                  }),
+                }"
+              >
+                {{ tab.name }}
+              </v-tab>
+            </v-tabs>
+          </template>
+        </v-toolbar>
+
+        <v-data-table
+          :headers="props.headers"
+          :items="items"
+          item-value="_id"
+          items-per-page="20"
+          fixed-header
+          hide-default-footer
+          style="max-height: calc(100vh - (126px))"
+          :loading="loading"
+        >
+          <template #item.nature="{ item }">
+            {{ replaceMatch(item.nature, "_", " ") }}
+          </template>
+          <template #item.action-table="{ item }">
+            <v-menu
+              v-if="
+                (status === 'active' &&
+                  (canSuspendMembers || canDeleteMembers)) ||
+                (status === 'suspended' &&
+                  (canActivateMembers || canDeleteMembers))
+              "
+              v-model="item.menuOpen"
+              :close-on-content-click="false"
+              offset-y
+              width="150"
+            >
+              <template v-slot:activator="{ props }">
+                <v-icon v-bind="props">mdi-dots-horizontal</v-icon>
+              </template>
+              <v-list>
+                <v-list-item
+                  v-if="props.assignRole"
+                  @click="
+                    setMember({
+                      dialog: true,
+                      mode: 'assign-role',
+                      role: item,
+                    })
+                  "
+                >
+                  Assign Role
+                </v-list-item>
+
+                <v-list-item
+                  v-if="status === 'active' && canSuspendMembers"
+                  @click="openUpdateDialog(item._id, 'suspended')"
+                >
+                  Suspend
+                </v-list-item>
+                <v-list-item
+                  v-if="status === 'suspended' && canActivateMembers"
+                  @click="openUpdateDialog(item._id, 'active')"
+                >
+                  Activate
+                </v-list-item>
+                <v-list-item
+                  v-if="canDeleteMembers"
+                  @click="openUpdateDialog(item._id, 'deleted')"
+                >
+                  Delete
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </template>
+        </v-data-table>
+      </v-card>
+    </v-col>
+    <ConfirmDialog
+      v-model="confirmDialog"
+      :loading="updateLoading"
+      @submit="handleUpdateMemberStatus"
+    >
+      <template #title>
+        <span class="font-weight-medium text-h5">
+          {{ updateActionText }} Member</span
+        >
+      </template>
+
+      <template #description>
+        <p class="text-subtitle-2">
+          Are you sure you want to {{ updateActionText }} this Member? This
+          action cannot be undone.
+        </p>
+      </template>
+
+      <template #footer>
+        <v-btn
+          variant="text"
+          @click="confirmDialog = false"
+          :disabled="updateLoading"
+        >
+          Close
+        </v-btn>
+        <v-btn
+          color="primary"
+          variant="flat"
+          @click="handleUpdateMemberStatus"
+          :loading="updateLoading"
+        >
+          {{ updateActionText }} Member
+        </v-btn>
+      </template>
+    </ConfirmDialog>
+
+    <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+
+    <v-dialog v-model="assignRoleDialog" max-width="400px">
+      <v-card>
+        <v-card-title class="text-h5">Assign Role</v-card-title>
+        <v-card-text>
+          <v-form v-model="memberRoleForm" @submit.prevent="updateMemberRole()">
+            <v-row no-gutters>
+              <v-col cols="12" class="mb-2">
+                <v-row no-gutters>
+                  <InputLabel class="text-capitalize" title="Name" required />
+                  <v-col cols="12">
+                    <v-select
+                      v-model="selectedRole"
+                      :items="roles"
+                      item-value="_id"
+                      item-title="name"
+                      density="comfortable"
+                      :rules="[requiredRule]"
+                      :error-messages="
+                        selectedRole === selectedMemberRole
+                          ? 'Role already assigned'
+                          : ''
+                      "
+                      persistent-hint
+                    ></v-select>
+                  </v-col>
+
+                  <v-col cols="12" class="text-error text-center">
+                    {{ message }}
+                  </v-col>
+                </v-row>
+              </v-col>
+
+              <v-col cols="12">
+                <v-row>
+                  <v-col cols="6">
+                    <v-btn
+                      block
+                      variant="text"
+                      @click="setMember({ mode: 'assign-role' })"
+                    >
+                      Cancel
+                    </v-btn>
+                  </v-col>
+                  <v-col cols="6">
+                    <v-btn
+                      block
+                      variant="flat"
+                      color="black"
+                      :disabled="!memberRoleForm"
+                      type="submit"
+                    >
+                      Submit
+                    </v-btn>
+                  </v-col>
+                </v-row>
+              </v-col>
+            </v-row>
+          </v-form>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  orgId: {
+    type: String,
+    default: "",
+  },
+  customerId: {
+    type: String,
+    default: "",
+  },
+  siteId: {
+    type: String,
+    default: "",
+  },
+  status: {
+    type: String,
+    default: "active",
+  },
+  type: {
+    type: String,
+    default: "organization",
+  },
+  seatManagement: {
+    type: String,
+    default: "index",
+  },
+  inviteMember: {
+    type: String,
+    default: "index",
+  },
+  route: {
+    type: String,
+    default: "index",
+  },
+  canActivateMembers: {
+    type: Boolean,
+    default: false,
+  },
+  canSuspendMembers: {
+    type: Boolean,
+    default: false,
+  },
+  canDeleteMembers: {
+    type: Boolean,
+    default: false,
+  },
+  assignRole: {
+    type: Boolean,
+    default: false,
+  },
+  headers: {
+    type: Array as PropType<Array<Record<string, string>>>,
+    default: () => [
+      {
+        title: "Name",
+
+        value: "name",
+      },
+      {
+        title: "Role",
+
+        value: "roleName",
+      },
+      {
+        title: "Organization",
+
+        value: "orgName",
+      },
+      {
+        title: "Status",
+
+        value: "status",
+      },
+      {
+        title: "Action",
+        value: "action-table",
+      },
+    ],
+  },
+});
+
+const items = ref<Array<Record<string, any>>>([]);
+const page = ref(1);
+const pages = ref(10);
+const pageRange = ref("-- - -- of --");
+
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("");
+
+const {
+  getAll: _getAll,
+  updateMemberStatus: _updateMemberStatus,
+  updateMemberRole: _updateMemberRole,
+} = useMember();
+
+const { headerSearch } = useLocal();
+const { replaceMatch, setRouteParams, requiredRule } = useUtils();
+
+const {
+  data: getAllReq,
+  refresh: getAll,
+  status: getAllReqStatus,
+} = useLazyAsyncData("get-all-members", () =>
+  _getAll({
+    status: props.status,
+    org: props.orgId,
+    search: headerSearch.value,
+    page: page.value,
+    type: props.type,
+  })
+);
+
+const loading = computed(() => getAllReqStatus.value === "pending");
+
+watchEffect(() => {
+  if (getAllReq.value) {
+    items.value = getAllReq.value.items;
+    pages.value = getAllReq.value.pages;
+    pageRange.value = getAllReq.value.pageRange;
+  }
+});
+
+watch(headerSearch, () => {
+  getAll();
+});
+
+const confirmDialog = ref(false);
+const selectedMemberId = ref<string | null>(null);
+const updateLoading = ref(false);
+const updateAction = ref("");
+
+const memberRoleForm = ref(false);
+const assignRoleDialog = ref(false);
+const selectedRole = ref<string | null>(null);
+const selectedMemberRole = ref("");
+
+function setMember({
+  dialog = false,
+  mode = "",
+  role = {} as Record<string, any>,
+} = {}) {
+  if (mode === "assign-role") {
+    assignRoleDialog.value = dialog;
+  }
+
+  selectedMemberId.value = role._id;
+  selectedRole.value = role.role;
+  selectedMemberRole.value = role.role;
+}
+
+const roles = ref<Array<Record<string, any>>>([]);
+const { getRoles } = useRole();
+const { data: getAllRoleReq } = useLazyAsyncData("get-roles", () =>
+  getRoles({ org: props.orgId, type: props.type, limit: 20 })
+);
+
+watchEffect(() => {
+  if (getAllRoleReq.value) {
+    roles.value = getAllRoleReq.value.items;
+  }
+});
+
+watchEffect(() => {
+  if (selectedRole.value) {
+    message.value = "";
+  }
+});
+
+async function updateMemberRole() {
+  try {
+    await _updateMemberRole(
+      selectedMemberId.value ?? "",
+      selectedRole.value ?? "",
+      props.type,
+      props.orgId
+    );
+    await setMember({ mode: "assign-role" });
+    await getAll();
+  } catch (error: any) {
+    message.value = error?.response?._data?.message || "Failed to update role";
+  }
+}
+
+function openUpdateDialog(id: string, action: string) {
+  updateAction.value = action;
+  selectedMemberId.value = id;
+  confirmDialog.value = true;
+}
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+async function handleUpdateMemberStatus() {
+  if (!selectedMemberId.value) return;
+  updateLoading.value = true;
+  try {
+    const res = await _updateMemberStatus(
+      selectedMemberId.value,
+      updateAction.value
+    );
+
+    confirmDialog.value = false;
+    showMessage(res.message, "success");
+    getAll();
+  } catch (error: any) {
+    const errorMessage = error?.response?._data?.message;
+    showMessage(errorMessage, "error");
+  } finally {
+    updateLoading.value = false;
+    selectedMemberId.value = null;
+  }
+}
+const updateActionText = computed(() => {
+  const map: Record<string, string> = {
+    active: "Activate",
+    suspended: "Suspend",
+    deleted: "Delete",
+  };
+  return map[updateAction.value] || updateAction.value;
+});
+</script>

package/components/RolePermissionFormCreate.vue

@@ -0,0 +1,161 @@
+<template>
+  <v-card width="100%">
+    <v-toolbar>
+      <v-row no-gutters class="fill-height px-6" align="center">
+        <span class="font-weight-bold text-h5">
+          {{ props.title }}
+        </span>
+      </v-row>
+    </v-toolbar>
+    <v-card-text style="max-height: 100vh; overflow-y: auto">
+      <v-form v-model="validForm" :disabled="disable">
+        <v-row no-gutters>
+          <v-col cols="12" class="mt-2">
+            <v-row no-gutters>
+              <InputLabel class="text-capitalize" title="Name" required />
+              <v-col cols="12">
+                <v-text-field
+                  v-model="name"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12">
+            <InputListGroupSelection
+              v-model="selectedPermissions"
+              :items="props.permissions"
+              variant="outlined"
+              border="thin"
+              :error-messages="requireListRule(selectedPermissions)"
+            />
+          </v-col>
+
+          <v-col cols="12" class="mt-2">
+            <v-checkbox v-model="createMore" density="comfortable" hide-details>
+              <template #label>
+                <span class="text-subtitle-2 font-weight-bold">
+                  Create more
+                </span>
+              </template>
+            </v-checkbox>
+          </v-col>
+
+          <v-col cols="12" class="my-2">
+            <v-row no-gutters>
+              <v-col cols="12" class="text-center">
+                <span
+                  class="text-none text-subtitle-2 font-weight-medium text-error"
+                >
+                  {{ message }}
+                </span>
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-form>
+    </v-card-text>
+
+    <v-toolbar>
+      <v-row class="px-6">
+        <v-col cols="6">
+          <v-btn
+            block
+            variant="text"
+            class="text-none"
+            size="large"
+            @click="cancel"
+          >
+            Cancel
+          </v-btn>
+        </v-col>
+
+        <v-col cols="6">
+          <v-btn
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="large"
+            :disabled="!validForm"
+            @click="submit"
+          >
+            Submit
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  title: {
+    type: String,
+    default: "Role Permission Form",
+  },
+  permissions: {
+    type: Object,
+    default: () => ({}),
+  },
+  org: {
+    type: String,
+    default: "",
+  },
+  type: {
+    type: String,
+    default: "app",
+  },
+});
+
+const emit = defineEmits(["cancel", "success", "success:create-more"]);
+
+const validForm = ref(false);
+
+const name = ref("");
+const selectedPermissions = ref([]);
+const createMore = ref(false);
+const disable = ref(false);
+
+const { requiredRule, requireListRule } = useUtils();
+
+const message = ref("");
+
+const { createRole } = useRole();
+
+async function submit() {
+  disable.value = true;
+  try {
+    await createRole({
+      name: name.value,
+      permissions: selectedPermissions.value,
+      type: props.type,
+      org: props.org,
+    });
+
+    if (createMore.value) {
+      name.value = "";
+      selectedPermissions.value = [];
+      message.value = "";
+      emit("success:create-more");
+      return;
+    }
+
+    emit("success");
+  } catch (error: any) {
+    message.value = error.response._data.message;
+  } finally {
+    disable.value = false;
+  }
+}
+
+function cancel() {
+  name.value = "";
+  selectedPermissions.value = [];
+  createMore.value = false;
+  message.value = "";
+  emit("cancel");
+}
+</script>