added shared components

Author: goldcoders

resources/js/Shared/Confirm.vue

@@ -0,0 +1,82 @@
+<template>
+  <v-dialog v-model="dialog" width="500">
+    <v-card>
+      <v-card-title class="headline error" dark>
+        <span class="white--text">{{ title }}</span>
+      </v-card-title>
+
+      <v-card-text>{{ message }}</v-card-text>
+
+      <v-divider />
+
+      <v-card-actions>
+        <v-btn text color="secondary" @click="dialog = false">
+          <v-icon left>arrow_left</v-icon>Back
+        </v-btn>
+        <v-spacer />
+        <v-btn color="primary" text @click="confirm()">{{ action }}</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    callback: {
+      type: Function,
+      required: true,
+    },
+    message: {
+      type: String,
+      default: function() {
+        return "Halt! This Action is Destructive and Irreversible Only Proceed If You Think Deleting This Record has No Side effects To Other Record.";
+      },
+    },
+    title: {
+      type: String,
+      default: function() {
+        return "Are You Sure You Want To Delete This?";
+      },
+    },
+    action: {
+      type: String,
+      default: function() {
+        return "Yes , I Understand";
+      },
+    },
+  },
+  data: () => ({
+    dialog: false,
+    params: null,
+  }),
+  mounted() {
+    // eslint-disable-next-line no-undef
+    Bus.$on("open-confirmation", params => {
+      this.dialog = true;
+      this.params = params;
+    });
+  },
+  methods: {
+    closeDialog() {
+      this.dialog = false;
+    },
+    confirm() {
+      if (this.callback) {
+        if (this.params != undefined) {
+          this.dialog = false;
+
+          this.callback(this.params);
+        } else {
+          this.dialog = false;
+
+          this.callback();
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style>
+</style>

resources/js/Shared/VHyperlink.vue

@@ -0,0 +1,33 @@
+<template>
+  <inertia-link
+    class="inertia-link"
+    :href="route(`${href}`)"
+  >
+    <slot />
+  </inertia-link>
+</template>
+
+
+<script>
+export default {
+  props: {
+    href: {
+      type: String,
+      default: "home",
+    },
+  },
+};
+</script>
+
+
+
+<style scoped>
+.btn {
+  text-decoration: none;
+}
+.inertia-link {
+  text-decoration: none;
+}
+</style>
+
+

resources/js/Shared/Vlink.vue

@@ -0,0 +1,141 @@
+<template>
+  <v-list-item :class="[{ styleAvatar: avatarOn }]" @click.native="navigate(href)">
+    <v-list-item-action v-if="iconOn && !avatarOn">
+      <v-icon
+        :style="{color: isActive(href) ? activeColor : iconColor, cursor: href ? 'pointer' : ''}"
+      >{{ icon }}</v-icon>
+    </v-list-item-action>
+    <v-list-item-avatar v-if="iconOn && avatarOn">
+      <v-img :src="avatar" />
+    </v-list-item-avatar>
+    <v-list-item-content>
+      <v-list-item-title :style="{color: isActive(href) ? activeColor : linkColor}">
+        <span :style="{cursor: href ? 'pointer' : ''}">{{ title }}</span>
+      </v-list-item-title>
+    </v-list-item-content>
+    <v-list-item-action v-if="iconOn && avatarOn">
+      <v-icon
+        :style="{color: isActive(href) ? activeColor : iconColor, cursor: href ? 'pointer' : ''}"
+      >{{ icon }}</v-icon>
+    </v-list-item-action>
+  </v-list-item>
+</template>
+
+<script>
+export default {
+  props: {
+    dark: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    href: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    avatar: {
+      type: String,
+      default() {
+        return "";
+      }
+    },
+    icon: {
+      type: String,
+      default() {
+        return "";
+      }
+    },
+    iconColor: {
+      type: String,
+      default() {
+        return this.dark ? "#fafafa" : "#78909C"; // white or blue-grey lighten-1
+      }
+    },
+    linkColor: {
+      type: String,
+      default() {
+        return this.dark ? "#fafafa" : "#e3b500"; // white or blue-grey lighten-1
+      }
+    },
+    activeColor: {
+      type: String,
+      default() {
+        return "#f5c300"; // teal lighten 2
+      }
+    }
+  },
+  computed: {
+    isDark() {
+      return this.dark === true;
+    },
+    avatarOn() {
+      return !!this.avatar;
+    },
+    iconOn() {
+      return !!this.icon;
+    }
+  },
+  methods: {
+    isActive() {
+      return this.route().current(this.href);
+    },
+    navigate(href) {
+      let self = this;
+      /* if valid url */
+      if (self.isURL(href)) {
+        // check if link belongs to same domain
+        if (self.getHostName(href) == window.location.hostname) {
+          this.$inertia.replace(href);
+        } else {
+          window.open(href);
+        }
+      } else if (this.routeExists(href)) {
+        /* when using vue router path */
+
+        this.$inertia.visit(this.route(href).url());
+      } else {
+        this.$inertia.visit(href);
+      }
+    },
+    routeExists(name) {
+      try {
+        route(name);
+        return true;
+      } catch (Err) {
+        return false;
+      }
+    },
+    getHostName(url) {
+      var match = url.match(/:\/\/(www[0-9]?\.)?(.[^/:]+)/i);
+      if (
+        match != null &&
+        match.length > 2 &&
+        typeof match[2] === "string" &&
+        match[2].length > 0
+      ) {
+        return match[2];
+      } else {
+        return null;
+      }
+    },
+    isURL(str) {
+      var urlRegex =
+        "^(?!mailto:)(?:(?:http|https|ftp)://)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$";
+      var url = new RegExp(urlRegex, "i");
+      return str.length < 2083 && url.test(str);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.styleAvatar {
+  position: relative;
+  margin-left: -55px;
+}
+</style>