@goweekdays/layer-common 0.0.1

package/components/InputLabel.vue

@@ -0,0 +1,18 @@
+<template>
+  <span class="text-subtitle-2 font-weight-bold">
+    {{ title }} <span v-if="props.required" class="text-error">*</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>

package/components/Layout/Header.vue

@@ -0,0 +1,271 @@
+<template>
+  <v-app-bar scroll-behavior="elevate" scroll-threshold="200">
+    <div style="width: 264px" class="ml-2">
+      <nuxt-link
+        class="text-h6 font-weight-medium text-decoration-none APP_NAME"
+        :to="{ name: APP_NAME_ROUTE }"
+      >
+        {{ APP_NAME }}
+      </nuxt-link>
+    </div>
+
+    <v-row no-gutters>
+      <v-col cols="6">
+        <v-text-field
+          v-model="search"
+          width="100%"
+          prepend-inner-icon="mdi-magnify"
+          variant="solo-filled"
+          flat
+          density="comfortable"
+          hide-details
+          rounded="xl"
+        />
+      </v-col>
+    </v-row>
+
+    <template #append>
+      <v-btn
+        icon="mdi-theme-light-dark"
+        variant="text"
+        class="mx-2"
+        @click="toggleTheme"
+      />
+
+      <v-menu offset="10px" :close-on-content-click="false">
+        <template #activator="{ props }">
+          <v-btn icon="mdi-dots-grid" variant="text" v-bind="props" />
+        </template>
+
+        <v-card
+          width="380"
+          max-height="400px"
+          elevation="2"
+          rounded="xl"
+          class="pa-4"
+        >
+          <v-row no-gutters>
+            <v-col cols="12">
+              <v-card width="100%" variant="tonal" rounded="t-xl b-0">
+                <v-row class="pa-4">
+                  <template v-for="item in defaultApps">
+                    <v-col cols="4">
+                      <v-btn
+                        :prepend-icon="item.icon"
+                        stacked
+                        rounded="xl"
+                        variant="text"
+                        class="text-capitalize text-subtitle-2"
+                        @click="redirect(item.link, item.landingPage)"
+                      >
+                        {{ item.title }}
+                      </v-btn>
+                    </v-col>
+                  </template>
+                </v-row>
+              </v-card>
+            </v-col>
+
+            <v-col cols=" 12" class="mt-2">
+              <v-card
+                width="100%"
+                min-height="50px"
+                variant="tonal"
+                rounded="b-xl"
+              >
+                <v-card-title class="text-center pb-0"> Apps </v-card-title>
+
+                <v-row no-gutters class="px-2 pb-2">
+                  <v-col
+                    v-for="item in apps"
+                    :key="item.title"
+                    cols="4"
+                    class="pa-2"
+                  >
+                    <v-btn
+                      stacked
+                      width="100%"
+                      :prepend-icon="item.icon"
+                      rounded="xl"
+                      variant="text"
+                      class="text-center text-capitalize text-caption"
+                      @click="redirect(item.link, item.landingPage)"
+                    >
+                      {{ item.title }}
+                    </v-btn>
+                  </v-col>
+                </v-row>
+              </v-card>
+            </v-col>
+          </v-row>
+        </v-card>
+      </v-menu>
+
+      <v-menu offset="10px" :close-on-content-click="false">
+        <template #activator="{ props }">
+          <v-btn fab variant="text" icon v-bind="props" class="mx-2">
+            <v-avatar color="surface-variant" size="42">
+              <v-img
+                v-if="currentUser?.profile"
+                :src="profile"
+                width="42"
+                height="42"
+              ></v-img>
+
+              <span v-else class="text-h5">{{ getNameInitials(name) }}</span>
+            </v-avatar>
+          </v-btn>
+        </template>
+
+        <v-card
+          width="350"
+          max-height="600px"
+          elevation="2"
+          rounded="xl"
+          class="pa-4"
+        >
+          <v-row no-gutters>
+            <v-col cols="12">
+              <v-row no-gutters justify="center">
+                <v-avatar color="surface-variant" size="75">
+                  <v-img
+                    v-if="currentUser?.profile"
+                    :src="profile"
+                    width="75"
+                    height="75"
+                  ></v-img>
+
+                  <span v-else class="text-h5">{{
+                    getNameInitials(name)
+                  }}</span>
+                </v-avatar>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12" class="text-center mt-2 mb-4">
+              {{ currentUser?.firstName }} {{ currentUser?.lastName }}
+            </v-col>
+
+            <v-col cols="12">
+              <v-btn
+                block
+                rounded="xl"
+                variant="tonal"
+                size="x-large"
+                @click="logout()"
+                class="text-none text-subtitle-1 font-weight-regular"
+              >
+                Logout
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-card>
+      </v-menu>
+    </template>
+  </v-app-bar>
+</template>
+
+<script setup lang="ts">
+import { useTheme } from "vuetify";
+
+const search = defineModel("search", { type: String });
+
+const { redirect, apps } = useLocal();
+
+const {
+  APP_MAIN,
+  APP_ACCOUNT,
+  APP_ORG,
+  APP_ADMIN,
+  APP_NAME,
+  APP_NAME_ROUTE,
+  APP_AFFILIATE,
+} = useRuntimeConfig().public;
+
+const theme = useTheme();
+
+function toggleTheme() {
+  theme.global.name.value = theme.global.current.value.dark ? "light" : "dark";
+}
+
+const { currentUser } = useLocalAuth();
+
+const profile = computed(() => {
+  return `/api/public/${currentUser.value?.profile}`;
+});
+
+function logout() {
+  if (APP_NAME.toLowerCase() !== "main") {
+    redirect(`${APP_MAIN}/logout`);
+    return;
+  }
+
+  useRouter().push({ name: "logout" });
+}
+
+const name = computed(() => {
+  let name = "";
+  if (currentUser.value?.firstName) {
+    name = currentUser.value.firstName;
+  }
+
+  if (currentUser.value?.lastName) {
+    name += ` ${currentUser.value.lastName}`;
+  }
+
+  return name;
+});
+
+const { getNameInitials } = useUtils();
+
+const defaultApps = [
+  {
+    title: "Account",
+    icon: "mdi-account",
+    link: APP_ACCOUNT,
+    landingPage: "home",
+  },
+  {
+    title: "Organization",
+    icon: "mdi-domain",
+    link: APP_ORG,
+    landingPage: "home",
+  },
+  {
+    title: "Admin",
+    icon: "mdi-security",
+    link: APP_ADMIN,
+    landingPage: "home",
+  },
+  {
+    title: "Affiliate",
+    icon: "mdi-account-multiple-check",
+    link: APP_AFFILIATE,
+    landingPage: "home",
+  },
+];
+</script>
+
+<style scoped>
+.APP_NAME {
+  display: inline-block;
+  word-wrap: break-word;
+  white-space: normal;
+  text-align: center;
+  color: unset !important;
+}
+
+.open-list {
+  transition: transform 0.2s ease-in-out;
+  transform: rotate(180deg);
+}
+
+.close-list {
+  transition: transform 0.3s ease-in-out;
+  transform: rotate(0deg);
+}
+
+.v-list-group__items .v-list-item {
+  padding-inline-start: 32px !important;
+}
+</style>

package/components/Layout/NavigationDrawer.vue

@@ -0,0 +1,24 @@
+<template>
+  <v-navigation-drawer permanent floating class="pr-2">
+    <v-list>
+      <slot name="action"></slot>
+      <template
+        v-for="(navigationItem, navigationIndex) in props.navigationItems"
+        :key="`${navigationItem.route.name}-${navigationIndex}`"
+      >
+        <NavigationItem
+          :title="navigationItem.title"
+          :icon="navigationItem.icon"
+          :route="navigationItem.route"
+          :children="navigationItem.children"
+        />
+      </template>
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  navigationItems: { type: Array<TNavigationItem>, required: true },
+});
+</script>

package/components/ListItem.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-list-item :class="props.divider ? border : defaultBorder">
+    <v-row>
+      <v-col cols="4" class="text-subtitle-2">
+        <slot name="title"> List Title </slot>
+      </v-col>
+
+      <v-col cols="8" class="text-subtitle-2">
+        <slot name="value"> value </slot>
+      </v-col>
+    </v-row>
+
+    <template #append>
+      <slot name="append">
+        <v-icon size="30">{{ props.icon }}</v-icon>
+      </slot>
+    </template>
+  </v-list-item>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  divider: {
+    type: Boolean,
+    default: true,
+  },
+  icon: {
+    type: String,
+    default: "mdi-chevron-right",
+  },
+});
+
+const defaultBorder = "pa-0 pl-8 pr-6 py-4";
+const border = "border-b-sm" + " " + defaultBorder;
+</script>

package/components/LocalPagination.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="arrow-navigation">
+        <v-btn icon="mdi-chevron-left" variant="text" density="comfortable" :disabled="page <= 1" @click="decrement" />
+        <v-btn
+icon="mdi-chevron-right" variant="text" density="comfortable" :disabled="page >= props.length"
+            @click="increment" />
+    </div>
+</template>
+
+<script setup lang="ts">
+const page = defineModel({ type: Number, default: 0 });
+function increment() {
+    page.value++;
+}
+
+function decrement() {
+    page.value--;
+}
+const emit = defineEmits(['update:value']);
+watch(page, () => {
+    emit('update:value', page.value);
+});
+
+const props = defineProps({
+    length: {
+        type: Number,
+        required: true,
+        default: 0
+    }
+});
+</script>

package/components/NavigationItem.vue

@@ -0,0 +1,59 @@
+<template>
+  <v-list-group v-if="children && children.length">
+    <template #activator="{ props }">
+      <v-list-item
+        v-bind="props"
+        :prepend-icon="icon"
+        rounded="e-pill"
+        class="text-subtitle-2"
+      >
+        {{ title }}
+      </v-list-item>
+    </template>
+
+    <NavigationItem
+      v-for="(child, childIndex) in children"
+      :key="`${child.title}-${childIndex}`"
+      :title="child.title"
+      :icon="child.icon"
+      :route="child.route"
+      :children="child.children"
+    />
+  </v-list-group>
+
+  <v-list-item
+    v-else
+    :prepend-icon="icon"
+    :to="props.route"
+    rounded="e-pill"
+    class="text-subtitle-2"
+  >
+    {{ title }}
+  </v-list-item>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+    default: "Title",
+  },
+  icon: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  route: {
+    type: Object,
+    default() {
+      return { name: "", params: {} };
+    },
+  },
+  children: {
+    type: Array<TNavigationItem>,
+    required: false,
+    default: () => [],
+  },
+});
+</script>

package/components/PlaceholderComponent.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="maintenance-container">
+    <h1>🚧 Page Under Maintenance</h1>
+    <p>
+      We're currently working on improving this page to serve you better. Please
+      check back soon!
+    </p>
+    <p>Thank you for your patience.</p>
+  </div>
+</template>
+
+<style scoped>
+.maintenance-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  min-height: 50vh;
+  margin: 0;
+  font-family: Arial, sans-serif;
+  color: #333;
+}
+
+h1 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+p {
+  font-size: 1.1rem;
+  line-height: 1.5;
+}
+</style>

package/components/Snackbar.vue

@@ -0,0 +1,23 @@
+<template>
+  <v-snackbar v-model="snackbar" :color="props.color">
+    {{ props.text }}
+
+    <template v-slot:actions>
+      <v-btn variant="text" @click="snackbar = false"> Close </v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script setup lang="ts">
+const snackbar = defineModel({ type: Boolean });
+const props = defineProps({
+  text: {
+    type: String,
+    default: "",
+  },
+  color: {
+    type: String,
+    default: "primary",
+  },
+});
+</script>

package/components/SpecificAttr.vue

@@ -0,0 +1,57 @@
+<template>
+  <v-row no-gutters class="pa-4" justify="center">
+    <v-col cols="12" :lg="props.lg" :md="props.md" :sm="props.sm">
+      <v-row no-gutters>
+        <v-col cols="12">
+          <v-row no-gutters class="fill-height" align="center">
+            <v-btn
+              fab
+              icon
+              variant="text"
+              @click="emit('click:back')"
+              class="mr-3"
+            >
+              <v-icon>mdi-arrow-left</v-icon>
+            </v-btn>
+
+            <span class="text-h5">{{ props.title }}</span>
+          </v-row>
+        </v-col>
+
+        <v-col cols="12" class="mt-6">
+          <v-card variant="outlined" border="thin">
+            <slot>
+              <PlaceholderComponent />
+            </slot>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits(["click:back"]);
+const props = defineProps({
+  title: {
+    type: String,
+    default: "Title",
+  },
+  lg: {
+    type: String,
+    default: "4",
+  },
+  md: {
+    type: String,
+    default: "6",
+  },
+  sm: {
+    type: String,
+    default: "6",
+  },
+  fluid: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>

package/composables/useAddress.ts

@@ -0,0 +1,107 @@
+export default function useAddress() {
+  function add({
+    type = "",
+    user = "",
+    org = "",
+    country = "",
+    countryCode = "",
+    phoneNumber = "",
+    address = "",
+    continuedAddress = "",
+    city = "",
+    province = "",
+    postalCode = "",
+    taxId = "",
+  } = {}) {
+    return useNuxtApp().$api("/api/addresses", {
+      method: "POST",
+      body: {
+        type,
+        user,
+        org,
+        country,
+        countryCode,
+        phoneNumber,
+        address,
+        continuedAddress,
+        city,
+        province,
+        postalCode,
+        taxId,
+      },
+    });
+  }
+
+  function getByUserId(user = "") {
+    return useNuxtApp().$api<TAddress>(`/api/addresses/user/${user}`);
+  }
+
+  const _address = useState("address", (): TAddress => {
+    return {
+      type: "",
+      user: "",
+      org: "",
+      country: "",
+      address: "",
+      continuedAddress: "",
+      city: "",
+      province: "",
+      postalCode: "",
+      taxId: "",
+    };
+  });
+
+  function reset() {
+    _address.value.type = "";
+    _address.value.user = "";
+    _address.value.org = "";
+    _address.value.country = "";
+    _address.value.address = "";
+    _address.value.continuedAddress = "";
+    _address.value.city = "";
+    _address.value.province = "";
+    _address.value.postalCode = "";
+    _address.value.taxId = "";
+  }
+
+  function set({
+    type = "",
+    user = "",
+    org = "",
+    country = "",
+    address = "",
+    continuedAddress = "",
+    city = "",
+    province = "",
+    postalCode = "",
+    taxId = "",
+  } = {}) {
+    _address.value.type = type;
+    _address.value.user = user;
+    _address.value.org = org;
+    _address.value.country = country;
+    _address.value.address = address;
+    _address.value.continuedAddress = continuedAddress;
+    _address.value.city = city;
+    _address.value.province = province;
+    _address.value.postalCode = postalCode;
+    _address.value.taxId = taxId;
+  }
+
+  const { address, city, province, postalCode, country } = _address.value;
+
+  const completeAddress = computed(() => {
+    return `${address ? `${address}, ` : ""}${
+      city ? `${city}, ` : ""
+    } ${province} ${postalCode ? `${postalCode}, ` : ""} ${country}`;
+  });
+
+  return {
+    add,
+    reset,
+    set,
+    getByUserId,
+    address: _address,
+    completeAddress,
+  };
+}