improve(ui): create page add new project ui

components/app/AppBarSearch.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full">
-    <n-input class="hidden w-full md:block" placeholder="Search">
+    <n-input class="w-full" placeholder="Search">
       <template #prefix>
         <Icon name="fluent:search-20-regular" />
       </template>

components/common/CommonColor.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <ul class="flex flex-wrap gap-2">
+      <li class="relative h-6 w-6 overflow-hidden rounded-full">
+        <input
+          v-model="color"
+          type="color"
+          class="absolute -left-2 -top-2 h-10 w-10 overflow-hidden"
+          @change="handleChange"
+        />
+        <Icon
+          v-if="isCustomColor"
+          name="heroicons:check"
+          class="absolute right-1 top-1 h-4 w-4 text-white"
+        />
+      </li>
+      <li
+        v-for="c in colors"
+        :key="c"
+        :style="{ 'background-color': c }"
+        class="relative h-6 w-6 rounded-full"
+        @click="handleSelect(c)"
+      >
+        <Icon
+          v-if="color === c"
+          name="heroicons:check"
+          class="absolute right-1 top-1 h-4 w-4 text-white"
+        />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  modelValue?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '#000',
+});
+
+const colors = [
+  '#888',
+  '#ccc',
+  '#7fffd4',
+  '#00ffff',
+  '#008b8b',
+  '#483d8b',
+  '#2f4f4f',
+  '#00bfff',
+  '#1e90ff',
+];
+
+const emit = defineEmits(['update:modelValue']);
+
+const color = computed({
+  get: () => props.modelValue,
+  set: (v) => emit('update:modelValue', v),
+});
+
+const isCustomColor = ref(false);
+
+function handleChange(e: any) {
+  isCustomColor.value = true;
+  emit('update:modelValue', color.value);
+}
+
+function handleSelect(c: string) {
+  isCustomColor.value = false;
+  color.value = c;
+  emit('update:modelValue', c);
+}
+</script>

constants/app-menu.ts

@@ -25,7 +25,7 @@ export const quizAccessApp = [
   {
     to: '/orders',
     title: 'Orders',
-    icon: 'solar:reorder-bold',
+    icon: 'heroicons:document-duplicate',
   },
   {
     to: '/documents',

doc-backend/schema.sql

@@ -114,7 +114,6 @@ CREATE TABLE projects (
   id uuid primary key default gen_random_uuid(),
   name character varying NOT NULL,
   description TEXT,
-  email VARCHAR(255) NOT NULL,
   start_date DATE NOT NULL,
   end_date DATE NULL,
   user_id uuid null references auth.users(id), -- owner
@@ -123,6 +122,16 @@ CREATE TABLE projects (
   updated_at timestamp without time zone not null default now_utc()
 );
 
+
+CREATE TABLE project_meta (
+  id uuid primary key default gen_random_uuid(),
+  project_id uuid not null references projects(id),
+  key character varying not null,
+  value character varying not null,
+  created_at timestamp without time zone not null default now_utc(),
+  updated_at timestamp without time zone not null default now_utc()
+);
+
 -- Order Processing Module
 CREATE TABLE clients (
   id uuid primary key default gen_random_uuid(),

layouts/blank-app.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="flex h-screen flex-col">
+    <nav class="flex justify-between px-4 py-1">
+      <ul>
+        <li
+          class="flex cursor-pointer items-center gap-2"
+          @click="$router.back()"
+        >
+          <Icon name="heroicons:arrow-left" size="16" />
+          <span>{{ $t('back') }}</span>
+        </li>
+      </ul>
+      <ul class="flex gap-2">
+        <li class="cursor-pointer">
+          {{ $t('feedback') }}
+        </li>
+        <li>
+          <nuxt-link-locale to="/">
+            <Icon name="heroicons:x-mark" size="16" />
+          </nuxt-link-locale>
+        </li>
+      </ul>
+    </nav>
+    <main class="flex-grow">
+      <slot />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts"></script>

pages/projects/create.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <section class="mx-auto max-w-md p-4">
+      <h1 class="mb-2 text-xl font-semibold">{{ $t('projects.create') }}</h1>
+
+      <article>
+        <n-form>
+          <n-form-item :label="$t('projects.name')">
+            <n-input :placeholder="$t('projects.name')" />
+          </n-form-item>
+          <div class="mb-4">
+            <CommonColor v-model="frm.color" />
+          </div>
+          <n-form-item :label="$t('tag')">
+            <n-dynamic-tags v-model:value="frm.tags" />
+          </n-form-item>
+        </n-form>
+
+        <n-button type="primary" block>{{ $t('create') }}</n-button>
+      </article>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'blank-app',
+});
+
+const frm = ref({
+  tags: ['teacher', 'programmer'],
+  color: '#000',
+});
+</script>

pages/projects/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div> Project </div>
+</template>
+
+<script setup lang="ts"></script>