🎨 style(IndexPage.vue): add dialog for bulk generation and history

This commit adds a dialog for bulk generation and history. The bulk generation dialog allows the user to generate multiple fake data entries at once by specifying a multiplier. The history dialog is not yet implemented.

🎨 style(IndexPage.vue): add more options to q-select and q-item
This commit adds more options to the q-select and q-item components in the IndexPage.vue file. Specifically, a new template is added to the q-select component to display a new q-item with a more_vert icon button. Additionally, the q-item component is updated to display the more_vert icon button instead of the chevron_right icon button.

🚀 feat(IndexPage.vue): add beast mode dialog and search select
✨ feat(IndexPage.vue): add support for copying to clipboard and notifications
The beast mode dialog allows the user to generate multiple results at once for a selected faker method. The search select allows the user to search for a specific faker method. Support for copying to clipboard and notifications has been added to improve the user experience.

🎨 style(IndexPage.vue): add new variables to the return object
✨ feat(IndexPage.vue): add postActions function to handle copying results to clipboard
This commit adds new variables to the return object in the IndexPage.vue file. The new variables are `searchSelectRef`, `selectedAction`, `beastModeDialog`, `bulkMultiplier`, `beastModeAction`, `beastModeFormRef`, and `rightDrawerOpen`. The `postActions` function is also added to handle copying results to the clipboard. The function formats the result as a JSON string and displays it in a notification message.

src/pages/IndexPage.vue

@@ -1,8 +1,54 @@
 <template>
+  <q-dialog v-model="beastModeDialog" persistent>
+    <q-card style="width: 700px;">
+      <q-toolbar>
+        <q-toolbar-title>{{selectedAction.apiName}} - {{selectedAction.name}}</q-toolbar-title>
+        <q-space/>
+        <q-btn
+          flat
+          round
+          icon="close"
+          @click="beastModeDialog = false"
+        />
+      </q-toolbar>
+      <q-separator/>
+      <q-card-section>
+        <q-form ref="beastModeFormRef" @submit.prevent="beastModeAction()">
+          <q-input
+            v-model="bulkMultiplier"
+            label="How many times?"
+            placeholder="10"
+            type="number"
+            hint="Press [Enter] to generate"
+            min="0"
+            autofocus
+            outlined
+            :rules="[v => !!v || 'This is required', v => v >= 0 || 'Must be greater than 0']"
+          >
+            <template v-slot:append>
+              <q-btn
+                label="Generate Bulk"
+                color="primary"
+                flat
+                no-caps
+                @click="beastModeAction()"
+              />
+            </template>
+          </q-input>
+        </q-form>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+
+  <q-dialog v-model="historyDialog">
+    <!-- TODO: implement history dialog -->
+  </q-dialog>
+
   <q-page padding style="min-width: 400px">
     <div class="row">
       <div class="col-xs-12 q-pa-sm">
         <q-select
+          ref="searchSelectRef"
           v-model="searchModel"
           input-debounce="0"
           label="Search Faker Method"
@@ -23,9 +69,26 @@
               </q-item-section>
             </q-item>
           </template>
+
+          <template v-slot:option="scope">
+          <q-item v-bind="scope.itemProps">
+            <q-item-section avatar>
+              <q-btn
+                icon="more_vert"
+                round
+                flat
+                @click.stop="searchSelectRef.hidePopup(); openBeastMode(scope.opt.value)"
+              />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>{{ scope.opt.label }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </template>
         </q-select>
       </div>
     </div>
+
     <div class="row row-wrap">
       <template
         v-for="(group, apiName) in fakerMethodsGroupByApi"
@@ -49,19 +112,19 @@
                       <q-item
                         clickable
                         v-ripple
-                        @click="invokeFakerFn(action.fakerFn)"
+                        @click="invokeFakerFn(action)"
                       >
                         <q-item-section>
                           <q-item-label class="text-weight-regular">{{ action.name }}</q-item-label>
                         </q-item-section>
-                        <!-- <q-item-section avatar>
+                        <q-item-section avatar>
                           <q-btn
-                            icon="chevron_right"
+                            icon="more_vert"
                             round
                             flat
                             @click.stop="openBeastMode(action)"
                           />
-                        </q-item-section> -->
+                        </q-item-section>
                       </q-item>
                     </template>
                   </div>
@@ -72,18 +135,32 @@
         </div>
       </template>
     </div>
+
+    <!-- <q-page-sticky position="bottom-right" :offset="[18, 18]">
+      <q-btn
+        icon="history"
+        color="primary"
+        fab
+        @click="rightDrawerOpen = !rightDrawerOpen"
+      />
+    </q-page-sticky> -->
   </q-page>
 </template>
 
 <script>
 import { computed, ref, watch } from 'vue';
 import { fakerMethods } from '../constants/faker';
-import { useQuasar } from 'quasar';
+import { useQuasar, copyToClipboard, Notify } from 'quasar';
+
 export default {
   setup () {
-    async function invokeFakerFn (fakerFn) {
+    const $q = useQuasar();
+    const isMobile = computed(() => $q.screen.lt.md);
+
+    async function invokeFakerFn ({ name, fakerFn }) {
       const result = await fakerFn();
-      console.log(result);
+
+      await postActions({ name, result });
     }
 
     const drawer = ref(false);
@@ -102,15 +179,34 @@ export default {
       }, {});
     });
 
-    const $q = useQuasar();
-    const isMobile = computed(() => $q.screen.lt.md);
-
+    // Beast Mode
+    const selectedAction = ref({});
+    const beastModeDialog = ref(false);
     function openBeastMode (action) {
-      // TODO: implement beast mode
-      // utilize each method's parameters
-      console.warn('Beast Mode!', action);
+      beastModeDialog.value = true;
+      selectedAction.value = action;
+    }
+    const beastModeFormRef = ref(null);
+    const bulkMultiplier = ref(10);
+    async function beastModeAction () {
+      if (!await beastModeFormRef.value.validate()) {
+        return;
+      }
+      const { fakerFn } = selectedAction.value;
+      let i = 0;
+      const finalResult = [];
+      do {
+        const result = await fakerFn();
+
+        finalResult.push(result);
+        i++;
+      } while (i < bulkMultiplier.value);
+      await postActions({ name: selectedAction.value.name, result: finalResult });
+      beastModeDialog.value = false;
     }
 
+    // Search
+    const searchSelectRef = ref(null);
     const searchModel = ref(null);
     const stringOptions = fakerMethods.map((method) => {
       return {
@@ -136,19 +232,49 @@ export default {
     }
     watch(searchModel, (val) => {
       if (!val) return;
-      invokeFakerFn(val.value.fakerFn);
+      invokeFakerFn(val.value);
     });
 
+    async function postActions ({ name, result }) {
+      if (typeof result === 'object') {
+        result = JSON.stringify(result, null, 2);
+      }
+      await copyToClipboard(result);
+      Notify.create({
+        html: true,
+        message: `
+          <div style="display: flex; flex-direction: column; justify-content: center;">
+            <div class="text-subtitle1"><b>${name}</b> copied to clipboard!</div>
+            <div>
+              <q-separator/>
+            </div>
+            <div style="max-height: 200px; overflow: scroll;">
+              <pre style="border-left: 2px solid grey; padding-left: 5px;">${result}</pre>
+            </div>
+          </div>
+        `,
+      });
+    }
+
+    const rightDrawerOpen = ref(false);
+
     return {
       fakerMethodsGroupByApi,
       invokeFakerFn,
       drawer,
       toggleDrawer,
       isMobile,
       openBeastMode,
+      searchSelectRef,
       searchModel,
       options,
       filterFn,
+      selectedAction,
+      beastModeDialog,
+      bulkMultiplier,
+      beastModeAction,
+      beastModeFormRef,
+      rightDrawerOpen,
     };
   },
 };