Merge pull request #125 from netervati/feat/revamp

[Revamp] Improve the product design

Author: netervati

.env.example

@@ -1,3 +1,4 @@
 NUXT_PUBLIC_ON_MAINTENANCE=
 SUPABASE_KEY=
+SUPABASE_SERVICE_KEY=
 SUPABASE_URL=

.eslintignore

@@ -1,3 +1,4 @@
 # Ignore artifacts:
 build
 coverage
+types/supabase.ts

.prettierrc.js

@@ -3,5 +3,6 @@ module.exports = {
   trailingComma: 'es5',
   semi: true,
   singleQuote: true,
-  vueIndentScriptAndStyle: true
+  vueIndentScriptAndStyle: true,
+  endOfLine: 'auto'
 };

README.md

@@ -7,6 +7,8 @@
 [Gateway](https://gateway.pseudorestapi.com/) |
 [Official Documentation](https://pseudorestapi.com/docs)
 
+> ⚠️ I'm currently reworking this project.
+
 **PseudoRESTAPI** is a tool that enables you to create mock REST APIs quickly and easily, without requiring any language or framework skills.
 
 - Create API endpoints for your mock server

components/api/table.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+  import useApp from '~~/stores/useApp';
+  import { AppWithAppKey } from '~~/types/models';
+
+  const appStore = useApp();
+
+  const handleOpen = (app: AppWithAppKey) => {
+    /**
+      We can directly assign the app to the target here
+      to reduce backend requests.
+    */
+    appStore.setTarget(app);
+
+    navigateTo(`/dashboard/app/${app.app_keys[0].api_key}/models`);
+  };
+</script>
+
+<template>
+  <section class="gap-4 grid grid-cols-1 md:grid-cols-2 mt-4">
+    <article
+      v-for="app in appStore.list"
+      :key="app.id"
+      class="card border border-gray-300 hover:bg-gray-300"
+      @click="handleOpen(app)"
+    >
+      <div class="card-body cursor-pointer">
+        <h3 class="text-lg font-medium">{{ app.title }}</h3>
+      </div>
+    </article>
+  </section>
+</template>

components/app/grid.vue

@@ -14,7 +14,7 @@
       sure to copy this!
     </p>
     <div class="mt-2">
-      <input class="bg-emerald-300 input w-full" :value="secretKey" />
+      <input class="bg-emerald-300 input w-full" readonly :value="secretKey" />
     </div>
   </article>
 </template>

components/project/secretKeyBox.vue renamed to components/app/secretKeyBox.vue

@@ -1,7 +1,7 @@
 <template>
   <footer class="footer border-b-8 border-violet-600 items-center p-6 md:text-lg">
     <aside class="items-center grid-flow-col">
-      <p>© 2023 PseudoRESTAPI - All right reserved.</p>
+      <p>© 2023 PseudoRESTAPI - All rights reserved.</p>
     </aside> 
     <nav class="grid-flow-col gap-4 md:place-self-center md:justify-self-end">
       <p>Built by <NuxtLink class="text-violet-600 font-bold" to="https://www.christophertabula.net/">Christopher Tabula</NuxtLink></p>

components/footer.vue

@@ -5,13 +5,18 @@
     (e: 'change', value: string): void;
   }>();
 
-  const props = defineProps<{
+  interface Props {
     disabled: boolean;
     name: string;
     placeholder: string;
     rules?: FormRuleSchema;
+    type?: 'text' | 'number';
     value?: string;
-  }>();
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    type: 'text',
+  });
 
   const validate = !props.rules ? () => true : runValidations(props.rules);
   const { value, errorMessage } = useField(() => props.name, validate);
@@ -29,6 +34,7 @@
     :disabled="props.disabled"
     :error="errorMessage !== undefined"
     :placeholder="props.placeholder"
+    :type="props.type"
     @change="emit('change', value)"
   />
   <p class="text-red-600">

components/form/input.vue

@@ -10,13 +10,15 @@
     error?: boolean;
     modelValue: string;
     placeholder?: string;
+    type?: 'text' | 'number';
   }
 
   const props = withDefaults(defineProps<Props>(), {
     class: '',
     disabled: false,
     error: false,
     placeholder: '',
+    type: 'text',
   });
 
   const mergedClass = computed(() => {
@@ -41,7 +43,7 @@
   <input
     v-model="inputValue"
     class="input input-bordered w-full max-w-vs"
-    type="text"
+    :type="props.type"
     :class="mergedClass"
     :disabled="disabled"
     :placeholder="placeholder"