@eeplatform/nuxt-layer-common 1.0.0

package/components/RolePermissionFormCreate.vue

@@ -0,0 +1,179 @@
+<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 v-if="props.types.length" cols="12" class="mt-2">
+            <v-row no-gutters>
+              <InputLabel class="text-capitalize" title="App" required />
+              <v-col cols="12">
+                <v-select
+                  v-model="type"
+                  :items="props.types"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                ></v-select>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col v-if="type" 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: "",
+  },
+  types: {
+    type: Array as PropType<Array<Record<string, string>>>,
+    default: () => [],
+  },
+});
+
+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 type = defineModel("type", {
+  type: String,
+  default: "",
+});
+
+const { createRole } = useRole();
+
+async function submit() {
+  disable.value = true;
+  try {
+    await createRole({
+      name: name.value,
+      permissions: selectedPermissions.value,
+      type: type.value,
+      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>

package/components/RolePermissionFormPreviewUpdate.vue

@@ -0,0 +1,184 @@
+<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.name }}
+        </span>
+      </v-row>
+    </v-toolbar>
+    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
+      <v-form v-model="validForm" :disabled="disable">
+        <v-row no-gutters>
+          <v-col cols="12" class="mt-4">
+            <InputListGroupSelection
+              v-model="definedModel"
+              :items="props.permissions"
+              variant="outlined"
+              border="thin"
+              :error-messages="errorMessages"
+              :readonly="!edit"
+              :hint="
+                edit ? 'Select permissions' : 'Permissions are not editable'
+              "
+              persistent-hint
+            />
+          </v-col>
+
+          <v-col v-if="edit" 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-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 v-if="!edit" cols="6">
+          <v-btn
+            block
+            variant="text"
+            class="text-none"
+            size="large"
+            @click="emit('cancel')"
+          >
+            Close
+          </v-btn>
+        </v-col>
+
+        <v-col v-else cols="6">
+          <v-btn
+            block
+            variant="text"
+            class="text-none"
+            size="large"
+            @click="edit = false"
+            :disabled="disable"
+          >
+            Cancel
+          </v-btn>
+        </v-col>
+
+        <v-col v-if="!edit" cols="6">
+          <v-btn
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="large"
+            :disabled="!validForm"
+            @click="edit = true"
+          >
+            Edit
+          </v-btn>
+        </v-col>
+
+        <v-col v-else 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 definedModel = defineModel<Array<string>>({
+  default: () => [],
+});
+
+const props = defineProps({
+  name: {
+    type: String,
+    default: "Role",
+  },
+  id: {
+    type: String,
+    default: "",
+  },
+  permissions: {
+    type: Object,
+    default: () => ({}),
+  },
+  originalPermissions: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const validForm = ref(false);
+const message = ref("");
+const disable = ref(false);
+
+const emit = defineEmits(["success", "cancel"]);
+
+const edit = defineModel<boolean>("edit", {
+  default: false,
+});
+
+function equalListValue() {
+  return JSON.stringify(definedModel.value) ===
+    JSON.stringify(props.originalPermissions)
+    ? "No changes made"
+    : "";
+}
+
+const { requireListRule } = useUtils();
+
+const errorMessages = computed(() => {
+  const equalValue = equalListValue();
+  if (edit.value && equalValue) {
+    return equalValue;
+  }
+
+  const requiredValue = requireListRule(definedModel.value);
+  if (requiredValue) {
+    return requiredValue;
+  }
+
+  return "";
+});
+
+const { updatePermissionById } = useRole();
+
+async function submit() {
+  disable.value = true;
+  try {
+    await updatePermissionById(props.id, definedModel.value);
+    emit("success");
+  } catch (error: any) {
+    message.value = error.response._data.message;
+  } finally {
+    disable.value = false;
+  }
+}
+</script>