Fixing some quill editor issues

client/GraphQLQueries.md

@@ -0,0 +1,84 @@
+### Queries
+
+  - Get Article By Slug
+  ```
+    query GetPostBySlug($slug: String){
+    articleByLink(link: $slug){
+        id
+        title
+        thumbnail
+    }
+    }
+  ```
+
+  - Get all articles
+  ```
+    query GetAllArticle{
+        allArticles{
+            id
+            title
+            content
+            thumbnail
+            link
+            createdAt
+            author{
+                id
+                name
+            }
+            category{
+                id
+            }
+        }
+    }
+  ```
+
+### Mutations
+  - Create category
+  ```
+    mutation CreateCategory{
+    createOrUpdateCategory(name: "Category - 10" ){
+        category{
+        id
+        name
+        }
+    }
+    }
+  ```
+
+  - Create an article with curl 
+  ```
+    curl --location 'http://localhost:8000/graphql/' \
+    --form 'operations="{
+    \"query\": \"mutation ($title: String!, $content: String!, $thumbnail: Upload!, $authorId: ID!, $categoryId: ID!, $id: ID) { createOrUpdateArticle(title: $title, content: $content, thumbnail: $thumbnail, authorId: $authorId, categoryId: $categoryId, id: $id) { article { id title content thumbnail author { id name } category { id name } } } }\",
+    \"variables\": {
+        \"title\": \"Test Article - 10\",
+        \"content\": \"This is a test article\",
+        \"thumbnail\": null,
+        \"authorId\": \"1\",
+        \"categoryId\": \"1\"
+    }
+    }"' \
+    --form 'map="{
+    \"0\": [\"variables.thumbnail\"]
+    }"' \
+    --form '0=@"/home/shayon/Pictures/pexels-daniel-reis-19575513.jpg"'
+  ```
+
+  - Create a comment
+  ```
+    mutation CreateComment{
+        createOrUpdateComment(author: "Md SHayon", email:"[email protected]", text: "This is comment 1", articleId: 8){
+            comment{
+                id
+                article{
+                    id
+                    title
+                    link
+                }
+                author
+                email
+                text
+            }
+        }
+    }
+  ```

client/README.md

@@ -1,75 +1,4 @@
-# Nuxt 3 Minimal Starter
+# Nuxt js blog
 
-Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
-
-## Setup
-
-Make sure to install the dependencies:
-
-```bash
-# npm
-npm install
-
-# pnpm
-pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
-```
-
-## Development Server
-
-Start the development server on `http://localhost:3000`:
-
-```bash
-# npm
-npm run dev
-
-# pnpm
-pnpm run dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
-```
-
-## Production
-
-Build the application for production:
-
-```bash
-# npm
-npm run build
-
-# pnpm
-pnpm run build
-
-# yarn
-yarn build
-
-# bun
-bun run build
-```
-
-Locally preview production build:
-
-```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm run preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
-```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+ - Add article with thumbnail image
+ - Display article content properly according to quill editor

client/components/article/Article.vue

@@ -18,13 +18,13 @@
   </NuxtLink> -->
   <NuxtLink rel="noopener noreferrer" v-bind:to="'http://localhost:3000/' + article.link"
     class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900">
-    <CldImage v-if="article.thumbnail && article.thumbnail !== ''" v-bind:src="article.thumbnail" width="200" height="200"
+    <CldImage v-if="article.thumbnail && article.thumbnail !== ''" v-bind:src="article.thumbnail" width="400" height="400" class="object-cover w-full rounded h-44 dark:bg-gray-500"
       v-bind:alt="article.title" />
     <img v-else class="object-cover w-full rounded h-44 dark:bg-gray-500"
       src="https://source.unsplash.com/random/480x360?1" />
     <div class="p-6 space-y-2">
       <h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">{{ article.title }}</h3>
-      <!-- <span class="text-xs dark:text-gray-400">{{ article.createdAt }}</span> -->
+      <span class="text-xs dark:text-gray-400">{{ article.createdAt }}</span>
       <p>
         {{ article.content }}
       </p>

client/components/article/ArticleAdd.vue

@@ -4,11 +4,18 @@
     <form class="mb-4" v-on:submit.prevent="handleArticleAdd">
       <div class="input-group mb-3">
         <label for="title">Title</label>
-        <input type="text" class="border outline-none bg-gray-300" name="title" id="title" />
+        <input type="text" class="border outline-none bg-gray-300" name="title" id="title" v-model="articleState.title" />
+      </div>
+      <div class="input-group flex mb-3 flex-col items-start gap-2">
+        <label for="thumbnail">Thumbnail</label>
+        <input type="file" class="border outline-none bg-gray-300" name="thumbnail" id="thumbnail"
+          v-on:change="handleFileChange" />
+          <img v-if="imgUrl" v-bind:src="imgUrl" class="w-full h-36 object-cover object-center" />
       </div>
       <div class="input-group mb-3">
         <label for="content">Content</label>
-        <QuillEditor v-model:content="state.content" theme="snow" v-bind:options="options" v-on:editorChange="handleContentChange" contentType="delta" />
+        <QuillEditor v-model:content="state.content" theme="snow" :options="options" @editorChange="handleContentChange"
+          contentType="delta" />
         <!-- <div class="border border-green-500">
           <h2>Display content</h2>
           <QuillEditor v-model="initialContent" :options="options" />
@@ -20,19 +27,19 @@
       </div>
       <div class="input-group mb-3">
         <label for="category">Category</label>
-        <select name="category" id="category">
+        <select name="category" id="category" v-model="articleState.category">
           <option v-for="cat in props.categories" v-bind:value="cat.id">{{ cat.name }}</option>
         </select>
       </div>
       <div class="input-group mb-3">
         <label for="author">Author</label>
-        <select name="author" id="author">
+        <select name="author" id="author" v-model="articleState.author">
           <option v-for="a in props.authors" v-bind:value="a.id">{{ a.name }}</option>
         </select>
       </div>
       <div class="input-group mb-3">
         <label for="link">Link</label>
-        <input type="text" class="border outline-none bg-gray-300" name="link" id="link" />
+        <input type="text" class="border outline-none bg-gray-300" name="link" id="link" v-model="articleState.link" />
       </div>
       <div class="input-group">
         <button type="submit">Add</button>
@@ -48,25 +55,92 @@ import "@vueup/vue-quill/dist/vue-quill.snow.css";
 
 const isReadOnly = true;
 
+const articleState = reactive({
+  title: '',
+  category: '',
+  author: '',
+  link: '',
+});
+
+const uploadedImg = ref<File | null>(null);
+const imgUrl = ref<string | null>(null);
+
 const options = {
   debug: "info",
   modules: {
     toolbar: isReadOnly ? false : ["bold", "italic", "underline"],
   },
   placeholder: "Compose an epic...",
-  readOnly: true,
+  readOnly: false,
   theme: "snow",
 };
 
+const initialContent = new Delta([
+  {
+    insert: "sdsdssdds\n\nhhg\nhello\n\n\nho\n\ngoal",
+  },
+  {
+    attributes: {
+      list: "ordered",
+    },
+    insert: "\n",
+  },
+  {
+    insert: "sure",
+  },
+  {
+    attributes: {
+      list: "ordered",
+    },
+    insert: "\n",
+  },
+  {
+    insert: "be",
+  },
+  {
+    attributes: {
+      list: "ordered",
+    },
+    insert: "\n",
+  },
+  {
+    insert: "wit",
+  },
+  {
+    insert: "\n",
+    attributes: {
+      list: "ordered",
+    },
+  },
+]);
+
 
 const state = reactive({ content: initialContent });
 const props = defineProps(["categories", "authors"]);
 
-const handleArticleAdd = (e) => {
-  console.log({ state: state.content });
+const handleArticleAdd = (e: Event) => {
+  e.preventDefault();
+  const formData = {
+    title: articleState.title,
+    content: state.content,
+    category: articleState.category,
+    author: articleState.author,
+    link: articleState.link,
+  };
+  console.log(formData);
 };
 
-const handleContentChange = (e: EventListener) => {
+const handleFileChange = (e: Event) => {
+  e.preventDefault();
+  const inputEl = e.target as HTMLInputElement;
+  if (inputEl.files && inputEl.files.length > 0) {
+    uploadedImg.value = inputEl.files[0];
+    const objectUrl = URL.createObjectURL(inputEl.files[0]);
+    imgUrl.value = objectUrl;;
+  }
+}
+
+const handleContentChange = (e: Delta) => {
   console.log(e);
 };
 </script>
@@ -75,10 +149,12 @@ const handleContentChange = (e: EventListener) => {
 :deep(.ql-editor) {
   min-height: 200px;
 }
+
 :deep(.ql-toolbar.ql-snow) {
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
 }
+
 :deep(.ql-container.ql-snow) {
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;