add frontend project

PROJECT/fastprod_frontend/components/Common/DialogBindComponent.vue

@@ -0,0 +1,57 @@
+<template>
+  <UiDialog
+    ref="ref"
+    :width="width"
+    :header="{
+      icon: header.icon,
+      label: header.label,
+    }"
+  >
+    <template #content>
+      <v-container>
+        <slot name="header"></slot>
+        <component
+          :is="component"
+          v-if="!!component"
+          :data="componentProps"
+          @event="$emit('event', null)"
+          @onSubmit="onSubmit"
+        ></component>
+      </v-container>
+    </template>
+  </UiDialog>
+</template>
+
+<script>
+export default {
+  props: {
+    component: {
+      type: String,
+      default: null,
+    },
+    componentProps: {
+      type: Object,
+      default: null,
+    },
+    width: {
+      type: String,
+      default: "800",
+    },
+    header: {
+      type: Object,
+      default: () => ({ icon: null, label: null }),
+    },
+  },
+  methods: {
+    open() {
+      this.$refs.ref.open();
+    },
+    close() {
+      this.$refs.ref.close();
+    },
+    onSubmit(e) {
+      this.$emit("onSubmit", e);
+    },
+  },
+};
+</script>

PROJECT/fastprod_frontend/components/Common/Ui/Card.vue

@@ -0,0 +1,51 @@
+<template>
+  <v-row justify="center">
+    <v-col cols="12">
+      <v-card :flat="flat" class="rounded-lg">
+        <v-card-title :class="headerClass">
+          <v-icon :color="iconColor" class="mr-1">mdi-{{ icon }}</v-icon>
+          {{ title }}
+        </v-card-title>
+        <div>
+          <slot name="headerActions"></slot>
+        </div>
+        <v-card-text>
+          <slot name="content"></slot>
+        </v-card-text>
+        <v-card-actions>
+          <slot name="footerActions"></slot>
+        </v-card-actions>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: null,
+    },
+    icon: {
+      type: String,
+      default: null,
+    },
+    flat: {
+      type: Boolean,
+      default: true,
+    },
+    headerClass: {
+      type: String,
+      default: 'primary white--text mb-2',
+    },
+    iconColor: {
+      type: String,
+      default: 'white',
+    },
+  },
+  data() {
+    return {}
+  },
+}
+</script>
+<style scoped></style>

PROJECT/fastprod_frontend/components/Common/Ui/Dialog.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <v-dialog v-model="dialog" :max-width="width">
+      <v-card>
+        <v-toolbar v-if="!!header" color="primary" dark>
+          <v-icon>mdi-{{ header.icon }}</v-icon>
+          <h4 class="ml-2">{{ header.label }}</h4>
+          <v-spacer></v-spacer>
+          <v-btn icon dark @click="dialog = false">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </v-toolbar>
+        <v-card-text>
+          <slot name="content"></slot>
+        </v-card-text>
+        <v-card-actions class="justify-end">
+          <slot name="action"></slot>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    width: {
+      type: String,
+      default: '800',
+    },
+    header: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      dialog: false,
+    }
+  },
+  methods: {
+    open() {
+      this.dialog = true
+    },
+    close() {
+      this.dialog = false
+    },
+  },
+}
+</script>
+<style scoped></style>