@nathapp/na-cli 1.0.1-rc.1 → 1.0.1

package/dist/templates/vuexy-portal/src/components/dialogs/AddEditPermissionDialog.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+interface Props {
+  isDialogVisible: boolean
+  permissionName?: string
+}
+interface Emit {
+  (e: 'update:isDialogVisible', value: boolean): void
+  (e: 'update:permissionName', value: string): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  permissionName: '',
+})
+
+const emit = defineEmits<Emit>()
+
+const currentPermissionName = ref('')
+
+const onReset = () => {
+  emit('update:isDialogVisible', false)
+  currentPermissionName.value = ''
+}
+
+const onSubmit = () => {
+  emit('update:isDialogVisible', false)
+  emit('update:permissionName', currentPermissionName.value)
+}
+
+watch(props, () => {
+  currentPermissionName.value = props.permissionName
+})
+</script>
+
+<template>
+  <VDialog
+    :width="$vuetify.display.smAndDown ? 'auto' : 600"
+    :model-value="props.isDialogVisible"
+    @update:model-value="onReset"
+  >
+    <!-- 👉 dialog close btn -->
+    <DialogCloseBtn @click="onReset" />
+
+    <VCard class="pa-2 pa-sm-10">
+      <VCardText>
+        <!-- 👉 Title -->
+        <h4 class="text-h4 text-center mb-2">
+          {{ props.permissionName ? 'Edit' : 'Add' }} Permission
+        </h4>
+        <p class="text-body-1 text-center mb-6">
+          {{ props.permissionName ? 'Edit' : 'Add' }}  permission as per your requirements.
+        </p>
+
+        <!-- 👉 Form -->
+        <VForm>
+          <VAlert
+            type="warning"
+            title="Warning!"
+            variant="tonal"
+            class="mb-6"
+          >
+            <template #text>
+              By {{ props.permissionName ? 'editing' : 'adding' }} the permission name, you might break the system permissions functionality.
+            </template>
+          </VAlert>
+
+          <!-- 👉 Role name -->
+          <div class="d-flex gap-4 mb-6 flex-wrap flex-column flex-sm-row">
+            <AppTextField
+              v-model="currentPermissionName"
+              placeholder="Enter Permission Name"
+            />
+
+            <VBtn @click="onSubmit">
+              Update
+            </VBtn>
+          </div>
+
+          <VCheckbox label="Set as core permission" />
+        </VForm>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>
+
+<style lang="scss">
+.permission-table {
+  td {
+    border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+    padding-block: 0.5rem;
+    padding-inline: 0;
+  }
+}
+</style>

package/dist/templates/vuexy-portal/src/components/dialogs/AddEditRoleDialog.vue

@@ -0,0 +1,302 @@
+<script setup lang="ts">
+import { VForm } from 'vuetify/components/VForm'
+
+interface Permission {
+  name: string
+  read: boolean
+  write: boolean
+  create: boolean
+}
+
+interface Roles {
+  name: string
+  permissions: Permission[]
+}
+
+interface Props {
+  rolePermissions?: Roles
+  isDialogVisible: boolean
+}
+interface Emit {
+  (e: 'update:isDialogVisible', value: boolean): void
+  (e: 'update:rolePermissions', value: Roles): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  rolePermissions: () => ({
+    name: '',
+    permissions: [],
+  }),
+})
+
+const emit = defineEmits<Emit>()
+
+// 👉 Permission List
+const permissions = ref<Permission[]>([
+  {
+    name: 'User Management',
+    read: false,
+    write: false,
+    create: false,
+  },
+  {
+    name: 'Content Management',
+    read: false,
+    write: false,
+    create: false,
+  },
+  {
+    name: 'Disputes Management',
+    read: false,
+    write: false,
+    create: false,
+  },
+  {
+    name: 'Database Management',
+    read: false,
+    write: false,
+    create: false,
+  },
+  {
+    name: 'Financial Management',
+    read: false,
+    write: false,
+    create: false,
+  },
+  {
+    name: 'Reporting',
+    read: false,
+    write: false,
+    create: false,
+  },
+  {
+    name: 'API Control',
+    read: false,
+    write: false,
+    create: false,
+  },
+  {
+    name: 'Repository Management',
+    read: false,
+    write: false,
+    create: false,
+  },
+  {
+    name: 'Payroll',
+    read: false,
+    write: false,
+    create: false,
+  },
+])
+
+const isSelectAll = ref(false)
+const role = ref('')
+const refPermissionForm = ref<VForm>()
+
+const checkedCount = computed(() => {
+  let counter = 0
+
+  permissions.value.forEach(permission => {
+    Object.entries(permission).forEach(([key, value]) => {
+      if (key !== 'name' && value)
+        counter++
+    })
+  })
+
+  return counter
+})
+
+const isIndeterminate = computed(() => checkedCount.value > 0 && checkedCount.value < (permissions.value.length * 3))
+
+// select all
+watch(isSelectAll, val => {
+  permissions.value = permissions.value.map(permission => ({
+    ...permission,
+    read: val,
+    write: val,
+    create: val,
+  }))
+})
+
+// if Indeterminate is false, then set isSelectAll to false
+watch(isIndeterminate, () => {
+  if (!isIndeterminate.value)
+    isSelectAll.value = false
+})
+
+// if all permissions are checked, then set isSelectAll to true
+watch(permissions, () => {
+  if (checkedCount.value === (permissions.value.length * 3))
+    isSelectAll.value = true
+}, { deep: true })
+
+// if rolePermissions is not empty, then set permissions
+watch(props, () => {
+  if (props.rolePermissions && props.rolePermissions.permissions.length) {
+    role.value = props.rolePermissions.name
+    permissions.value = permissions.value.map(permission => {
+      const rolePermission = props.rolePermissions?.permissions.find(item => item.name === permission.name)
+
+      if (rolePermission) {
+        return {
+          ...permission,
+          ...rolePermission,
+        }
+      }
+
+      return permission
+    })
+  }
+})
+
+const onSubmit = () => {
+  const rolePermissions = {
+    name: role.value,
+    permissions: permissions.value,
+  }
+
+  emit('update:rolePermissions', rolePermissions)
+  emit('update:isDialogVisible', false)
+  isSelectAll.value = false
+  refPermissionForm.value?.reset()
+}
+
+const onReset = () => {
+  emit('update:isDialogVisible', false)
+  isSelectAll.value = false
+  refPermissionForm.value?.reset()
+}
+</script>
+
+<template>
+  <VDialog
+    :width="$vuetify.display.smAndDown ? 'auto' : 900"
+    :model-value="props.isDialogVisible"
+    @update:model-value="onReset"
+  >
+    <!-- 👉 Dialog close btn -->
+    <DialogCloseBtn @click="onReset" />
+
+    <VCard class="pa-sm-10 pa-2">
+      <VCardText>
+        <!-- 👉 Title -->
+        <h4 class="text-h4 text-center mb-2">
+          {{ props.rolePermissions.name ? 'Edit' : 'Add New' }} Role
+        </h4>
+        <p class="text-body-1 text-center mb-6">
+          Set Role Permissions
+        </p>
+
+        <!-- 👉 Form -->
+        <VForm ref="refPermissionForm">
+          <!-- 👉 Role name -->
+          <AppTextField
+            v-model="role"
+            label="Role Name"
+            placeholder="Enter Role Name"
+          />
+
+          <h5 class="text-h5 my-6">
+            Role Permissions
+          </h5>
+
+          <!-- 👉 Role Permissions -->
+
+          <VTable class="permission-table text-no-wrap mb-6">
+            <!-- 👉 Admin  -->
+            <tr>
+              <td>
+                <h6 class="text-h6">
+                  Administrator Access
+                </h6>
+              </td>
+              <td colspan="3">
+                <div class="d-flex justify-end">
+                  <VCheckbox
+                    v-model="isSelectAll"
+                    v-model:indeterminate="isIndeterminate"
+                    label="Select All"
+                  />
+                </div>
+              </td>
+            </tr>
+
+            <!-- 👉 Other permission loop -->
+            <template
+              v-for="permission in permissions"
+              :key="permission.name"
+            >
+              <tr>
+                <td>
+                  <h6 class="text-h6">
+                    {{ permission.name }}
+                  </h6>
+                </td>
+                <td>
+                  <div class="d-flex justify-end">
+                    <VCheckbox
+                      v-model="permission.read"
+                      label="Read"
+                    />
+                  </div>
+                </td>
+                <td>
+                  <div class="d-flex justify-end">
+                    <VCheckbox
+                      v-model="permission.write"
+                      label="Write"
+                    />
+                  </div>
+                </td>
+                <td>
+                  <div class="d-flex justify-end">
+                    <VCheckbox
+                      v-model="permission.create"
+                      label="Create"
+                    />
+                  </div>
+                </td>
+              </tr>
+            </template>
+          </VTable>
+
+          <!-- 👉 Actions button -->
+          <div class="d-flex align-center justify-center gap-4">
+            <VBtn @click="onSubmit">
+              Submit
+            </VBtn>
+
+            <VBtn
+              color="secondary"
+              variant="tonal"
+              @click="onReset"
+            >
+              Cancel
+            </VBtn>
+          </div>
+        </VForm>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>
+
+<style lang="scss">
+.permission-table {
+  td {
+    border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+    padding-block: 0.5rem;
+
+    .v-checkbox {
+      min-inline-size: 4.75rem;
+    }
+
+    &:not(:first-child) {
+      padding-inline: 0.5rem;
+    }
+
+    .v-label {
+      white-space: nowrap;
+    }
+  }
+}
+</style>

package/dist/templates/vuexy-portal/src/components/dialogs/AddPaymentMethodDialog.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import americanExDark from '@images/icons/payments/img/ae-dark.png'
+import americanExLight from '@images/icons/payments/img/american-express.png'
+import dcDark from '@images/icons/payments/img/dc-dark.png'
+import dcLight from '@images/icons/payments/img/dc-light.png'
+import jcbDark from '@images/icons/payments/img/jcb-dark.png'
+import jcbLight from '@images/icons/payments/img/jcb-light.png'
+import masterCardDark from '@images/icons/payments/img/master-dark.png'
+import masterCardLight from '@images/icons/payments/img/mastercard.png'
+import visaDark from '@images/icons/payments/img/visa-dark.png'
+import visaLight from '@images/icons/payments/img/visa-light.png'
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emit>()
+
+const visa = useGenerateImageVariant(visaLight, visaDark)
+const masterCard = useGenerateImageVariant(masterCardLight, masterCardDark)
+const americanEx = useGenerateImageVariant(americanExLight, americanExDark)
+const jcb = useGenerateImageVariant(jcbLight, jcbDark)
+const dc = useGenerateImageVariant(dcLight, dcDark)
+
+interface Props {
+  isDialogVisible: boolean
+}
+
+interface Emit {
+  (e: 'update:isDialogVisible', val: boolean): void
+}
+
+const dialogVisibleUpdate = (val: boolean) => {
+  emit('update:isDialogVisible', val)
+}
+
+const paymentMethodsData = [
+  {
+    title: 'Visa',
+    type: 'Credit Card',
+    img: visa,
+  },
+  {
+    title: 'American Express',
+    type: 'Credit Card',
+    img: americanEx,
+  },
+  {
+    title: 'Mastercard',
+    type: 'Credit Card',
+    img: masterCard,
+  },
+  {
+    title: 'JCB',
+    type: 'Credit Card',
+    img: jcb,
+  },
+  {
+    title: 'Diners Club',
+    type: 'Credit Card',
+    img: dc,
+  },
+
+]
+</script>
+
+<template>
+  <VDialog
+    :model-value="props.isDialogVisible"
+    :width="$vuetify.display.smAndDown ? 'auto' : 750"
+    @update:model-value="dialogVisibleUpdate"
+  >
+    <!-- 👉 dialog close btn -->
+    <DialogCloseBtn @click="emit('update:isDialogVisible', false)" />
+
+    <VCard class="pa-2 pa-sm-10">
+      <VCardText>
+        <!-- 👉 Title -->
+        <h4 class="text-h4 text-center mb-2">
+          Add payment methods
+        </h4>
+        <p class="text-body-1 text-center mb-6">
+          Supported payment methods
+        </p>
+
+        <div
+          v-for="(item, index) in paymentMethodsData"
+          :key="index"
+        >
+          <div class="d-flex justify-space-between align-center py-4 gap-x-4">
+            <div class="d-flex align-center">
+              <VImg
+                :src="item.img.value"
+                height="30"
+                width="50"
+                class="me-4"
+              />
+              <h6 class="text-h6">
+                {{ item.title }}
+              </h6>
+            </div>
+            <div class="d-none d-sm-block text-body-1">
+              {{ item.type }}
+            </div>
+          </div>
+          <VDivider v-if="index !== paymentMethodsData.length - 1" />
+        </div>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>
+
+<style lang="scss">
+.refer-link-input {
+  .v-field--appended {
+    padding-inline-end: 0;
+  }
+
+  .v-field__append-inner {
+    padding-block-start: 0.125rem;
+  }
+}
+</style>

package/dist/templates/vuexy-portal/src/components/dialogs/CardAddEditDialog.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+interface Details {
+  number: string | number
+  name: string
+  expiry: string
+  cvv: string
+  isPrimary: boolean
+  type: string
+}
+interface Emit {
+  (e: 'submit', value: Details): void
+  (e: 'update:isDialogVisible', value: boolean): void
+}
+
+interface Props {
+  cardDetails?: Details
+  isDialogVisible: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  cardDetails: () => ({
+    number: '',
+    name: '',
+    expiry: '',
+    cvv: '',
+    isPrimary: false,
+    type: '',
+  }),
+})
+
+const emit = defineEmits<Emit>()
+
+const cardDetails = ref<Details>(structuredClone(toRaw(props.cardDetails)))
+
+watch(props, () => {
+  cardDetails.value = structuredClone(toRaw(props.cardDetails))
+})
+
+const formSubmit = () => {
+  emit('submit', cardDetails.value)
+}
+
+const dialogModelValueUpdate = (val: boolean) => {
+  emit('update:isDialogVisible', val)
+}
+</script>
+
+<template>
+  <VDialog
+    :width="$vuetify.display.smAndDown ? 'auto' : 600"
+    :model-value="props.isDialogVisible"
+    @update:model-value="dialogModelValueUpdate"
+  >
+    <!-- Dialog close btn -->
+    <DialogCloseBtn @click="dialogModelValueUpdate(false)" />
+
+    <VCard class="pa-2 pa-sm-10">
+      <!-- 👉 Title -->
+      <VCardItem class="text-center">
+        <VCardTitle>
+          <h4 class="text-h4 mb-2">
+            {{ props.cardDetails.name ? 'Edit Card' : 'Add New Card' }}
+          </h4>
+        </VCardTitle>
+        <p class="text-body-1 mb-0">
+          {{ props.cardDetails.name ? 'Edit your saved card details' : 'Add card for future billing' }}
+        </p>
+      </VCardItem>
+
+      <VCardText class="pt-6">
+        <VForm @submit.prevent="() => {}">
+          <VRow>
+            <!-- 👉 Card Number -->
+            <VCol cols="12">
+              <AppTextField
+                v-model="cardDetails.number"
+                label="Card Number"
+                placeholder="1356 3215 6548 7898"
+                type="number"
+              />
+            </VCol>
+
+            <!-- 👉 Card Name -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="cardDetails.name"
+                label="Name"
+                placeholder="John Doe"
+              />
+            </VCol>
+
+            <!-- 👉 Card Expiry -->
+            <VCol
+              cols="12"
+              md="3"
+            >
+              <AppTextField
+                v-model="cardDetails.expiry"
+                label="Expiry Date"
+                placeholder="MM/YY"
+              />
+            </VCol>
+
+            <!-- 👉 Card CVV -->
+            <VCol
+              cols="12"
+              md="3"
+            >
+              <AppTextField
+                v-model="cardDetails.cvv"
+                type="number"
+                label="CVV Code"
+                placeholder="654"
+              />
+            </VCol>
+
+            <!-- 👉 Card Primary Set -->
+            <VCol cols="12">
+              <VSwitch
+                v-model="cardDetails.isPrimary"
+                label="Save Card for future billing?"
+              />
+            </VCol>
+
+            <!-- 👉 Card actions -->
+            <VCol
+              cols="12"
+              class="text-center"
+            >
+              <VBtn
+                class="me-4"
+                type="submit"
+                @click="formSubmit"
+              >
+                Submit
+              </VBtn>
+              <VBtn
+                color="secondary"
+                variant="tonal"
+                @click="$emit('update:isDialogVisible', false)"
+              >
+                Cancel
+              </VBtn>
+            </VCol>
+          </VRow>
+        </VForm>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>