Merge pull request #70 from shurco/short_desc

✨ feat: short product description
shurco · Nov 29, 2023 · 890faf1 · 890faf1
2 parents 7241b56 + a3f67c4
commit 890faf1
Show file tree

Hide file tree

Showing 13 changed files with 90 additions and 62 deletions.
diff --git a/fixtures/migration/20230714135999_migration_name.sql b/fixtures/migration/20230714135999_migration_name.sql
diff --git a/internal/models/products.go b/internal/models/products.go
@@ -16,6 +16,7 @@ type Products struct {
 type Product struct {
 	Core
 	Name        string     `json:"name"`
+	Brief       string     `json:"brief,omitempty"`
 	Description string     `json:"description,omitempty"`
 	Images      []File     `json:"images,omitempty"`
 	Slug        string     `json:"slug"`

diff --git a/internal/queries/products.go b/internal/queries/products.go
@@ -33,6 +33,7 @@ func (q *ProductQueries) ListProducts(private bool, idList ...models.CartProduct
 			SELECT DISTINCT
 			  product.id, 
 				product.name, 
+				product.brief,
 				product.slug,
 				product.amount,
 				product.active,
@@ -82,6 +83,7 @@ func (q *ProductQueries) ListProducts(private bool, idList ...models.CartProduct
 		err := rows.Scan(
 			&product.ID,
 			&product.Name,
+			&product.Brief,
 			&product.Slug,
 			&product.Amount,
 			&product.Active,
@@ -130,6 +132,7 @@ func (q *ProductQueries) Product(private bool, id string) (*models.Product, erro
 			SELECT DISTINCT
 				product.id,
 				product.name, 
+				product.brief,
 				product.desc, 
 				product.slug, 
 				product.amount,
@@ -160,6 +163,7 @@ func (q *ProductQueries) Product(private bool, id string) (*models.Product, erro
 		Scan(
 			&product.ID,
 			&product.Name,
+			&product.Brief,
 			&product.Description,
 			&product.Slug,
 			&product.Amount,
@@ -212,8 +216,8 @@ func (q *ProductQueries) AddProduct(product *models.Product) (*models.Product, e
 	metadata, _ := json.Marshal(product.Metadata)
 	attributes, _ := json.Marshal(product.Attributes)
 
-	sql := `INSERT INTO product (id, name, amount, slug, metadata, attribute, desc, digital, active) VALUES (?, ?, ?, ?, ?, ?, ?, ?, FALSE) RETURNING strftime('%s', created)`
-	err := q.DB.QueryRowContext(context.TODO(), sql, product.ID, product.Name, product.Amount, product.Slug, metadata, attributes, product.Description, product.Digital.Type).Scan(&product.Created)
+	sql := `INSERT INTO product (id, name, amount, slug, metadata, attribute, brief, desc, digital, active) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, FALSE) RETURNING strftime('%s', created)`
+	err := q.DB.QueryRowContext(context.TODO(), sql, product.ID, product.Name, product.Amount, product.Slug, metadata, attributes, product.Brief, product.Description, product.Digital.Type).Scan(&product.Created)
 	if err != nil {
 		return nil, err
 	}
@@ -227,8 +231,9 @@ func (q *ProductQueries) UpdateProduct(product *models.Product) error {
 	attributes, _ := json.Marshal(product.Attributes)
 	seo, _ := json.Marshal(product.Seo)
 
-	_, err := q.DB.ExecContext(context.TODO(), `UPDATE product SET name = ?, desc = ?, slug = ?, amount = ?, metadata = ?, attribute = ?, seo = ?, updated = datetime('now') WHERE id = ?`,
+	_, err := q.DB.ExecContext(context.TODO(), `UPDATE product SET name = ?, brief = ?, desc = ?, slug = ?, amount = ?, metadata = ?, attribute = ?, seo = ?, updated = datetime('now') WHERE id = ?`,
 		product.Name,
+		product.Brief,
 		product.Description,
 		product.Slug,
 		product.Amount,

diff --git a/migrations/20230714135923_init_db.sql b/migrations/20230714135923_init_db.sql
@@ -63,7 +63,7 @@ CREATE TABLE product (
 	id         TEXT PRIMARY KEY NOT NULL,
 	name       TEXT NOT NULL,
 	desc       TEXT NOT NULL,
-	slug        TEXT UNIQUE NOT NULL,
+	slug       TEXT UNIQUE NOT NULL,
 	amount     NUMERC NOT NULL,
 	metadata   JSON DEFAULT '{}' NOT NULL,
 	attribute  JSON DEFAULT '[]' NOT NULL,

diff --git a/migrations/20231129131044_brief.sql b/migrations/20231129131044_brief.sql
@@ -0,0 +1,9 @@
+-- +goose Up
+-- +goose StatementBegin
+ALTER TABLE product ADD COLUMN "brief" TEXT NOT NULL DEFAULT '';
+-- +goose StatementEnd
+
+-- +goose Down
+-- +goose StatementBegin
+ALTER TABLE product DROP COLUMN "brief";
+-- +goose StatementEnd
diff --git a/web/admin/src/components/Editor.vue b/web/admin/src/components/Editor.vue
@@ -59,7 +59,8 @@ const props = defineProps({
     type: String,
     required: true,
     default: "",
-  }, placeholder: String
+  },
+  placeholder: String,
 });
 
 onMounted(() => {
@@ -101,7 +102,7 @@ watch(
 
 
 .ProseMirror:focus {
-  outline:none;
+  outline: none;
 }
 
 button,

diff --git a/web/admin/src/components/product/Add.vue b/web/admin/src/components/product/Add.vue
@@ -69,9 +69,13 @@
             </div>
           </div>
 
+          <hr />
+          <p class="font-semibold">Short description</p>
+          <FormTextarea v-model="product.brief" id="textarea" name="Brief" />
+
           <hr />
           <p class="font-semibold">Description</p>
-          <Editor v-model:model-value="product.description"  placeholder="type description here"/>
+          <Editor v-model:model-value="product.description" placeholder="type description here" />
 
         </dl>
       </div>

diff --git a/web/admin/src/components/product/Update.vue b/web/admin/src/components/product/Update.vue
@@ -80,10 +80,12 @@
           <FormUpload :productId="`${product.id}`" accept=".jpg,.jpeg,.png" section="image" @added="addProductImage" />
 
           <hr />
-
-          <p class="font-semibold">Description</p>
-          <Editor v-model:model-value="product.description" placeholder="type description here"/>
+          <p class="font-semibold">Short description</p>
+          <FormTextarea v-model="product.brief" id="textarea" name="Brief" />
 
+          <hr />
+          <p class="font-semibold">Description</p>
+          <Editor v-model:model-value="product.description" placeholder="type description here" />
         </dl>
       </div>
 
@@ -109,7 +111,7 @@ import { onMounted, computed, ref } from "vue";
 import FormInput from "@/components/form/Input.vue";
 import FormButton from "@/components/form/Button.vue";
 import FormTextarea from "@/components/form/Textarea.vue";
-import Editor from "@/components/Editor.vue"
+import Editor from "@/components/Editor.vue";
 import FormUpload from "@/components/form/Upload.vue";
 import { costFormat, costStripe } from "@/utils/";
 import { showMessage } from "@/utils/message";
@@ -128,8 +130,8 @@ const props = defineProps({
   close: Function,
 });
 
-const amount = ref()
-const product = ref({})
+const amount = ref();
+const product = ref({});
 
 const emits = defineEmits(["update:modelValue"]);
 const products = computed({
@@ -142,14 +144,16 @@ const products = computed({
 });
 
 onMounted(() => {
-  getProduct()
+  getProduct();
 });
 
 const getProduct = async () => {
-  apiGet(`/api/_/products/${products.value.products[props.drawer.product.index].id}`).then(res => {
+  apiGet(
+    `/api/_/products/${products.value.products[props.drawer.product.index].id}`,
+  ).then((res) => {
     if (res.success) {
       product.value = res.result;
-      amount.value = costFormat(product.value.amount)
+      amount.value = costFormat(product.value.amount);
       if (!product.value.images) {
         product.value.images = [];
       }
@@ -161,18 +165,20 @@ const getProduct = async () => {
 
 const updateProduct = async () => {
   product.value.amount = costStripe(amount.value);
-  apiUpdate(`/api/_/products/${product.value.id}`, product.value).then(res => {
-    if (res.success) {
-      products.value.products[props.drawer.product.index] = product.value;
-      showMessage(res.message);
-    } else {
-      showMessage(res.result, "connextError");
-    }
-  });
+  apiUpdate(`/api/_/products/${product.value.id}`, product.value).then(
+    (res) => {
+      if (res.success) {
+        products.value.products[props.drawer.product.index] = product.value;
+        showMessage(res.message);
+      } else {
+        showMessage(res.result, "connextError");
+      }
+    },
+  );
 };
 
 const deleteProduct = async () => {
-  apiDelete(`/api/_/products/${product.value.id}`).then(res => {
+  apiDelete(`/api/_/products/${product.value.id}`).then((res) => {
     if (res.success) {
       products.value.products.splice(props.drawer.product.index, 1);
       products.value.total--;
@@ -222,7 +228,9 @@ const addProductImage = (e) => {
 };
 
 const deleteProductImage = async (index) => {
-  apiDelete(`/api/_/products/${product.value.id}/image/${product.value.images[index].id}`).then(res => {
+  apiDelete(
+    `/api/_/products/${product.value.id}/image/${product.value.images[index].id}`,
+  ).then((res) => {
     if (res.success) {
       product.value.images.splice(index, 1);
     } else {

diff --git a/web/admin/src/components/product/View.vue b/web/admin/src/components/product/View.vue
@@ -35,7 +35,9 @@
           </div>
         </DetailList>
 
-        <DetailList name="description" v-html="product.description"></DetailList>
+        <DetailList name="Brief (short description)">{{ product.brief }}</DetailList>
+
+        <div v-html="product.description" class="pt-3 tiptap"></div>
       </dl>
     </div>
 

diff --git a/web/site/layouts/main.html b/web/site/layouts/main.html
@@ -47,7 +47,7 @@
   {# embed #}
 
   <footer class="bg-white">
-    <div class="mx-auto max-w-screen-xl px-4 pb-8  sm:px-6 lg:px-8 ">
+    <div class="mx-auto max-w-screen-xl px-4 pb-8 sm:px-6 lg:px-8 ">
       <div class="border-t border-gray-100 pt-8 sm:flex sm:items-center sm:justify-between ">
         <ul class="flex flex-wrap justify-center gap-4 text-xs lg:justify-end">
           <li v-for="item in pages">

diff --git a/web/site/product.html b/web/site/product.html
@@ -10,16 +10,22 @@
         </div>
         <div class="lg:col-span-2">
           <h1 class="text-xl font-bold text-gray-900 sm:text-3xl">{{product.name}}</h1>
-          <div class="mt-4 prod_desc" v-html="product.description"></div>
-          <ul class="mt-4 list-disc pl-4">
-            <li v-for="(item, index) in product.attributes">{{item}}</li>
-          </ul>
-          <p class="mt-4 text-2xl font-black">{{ costFormat( product.amount ) }}
-            {{ currency }}</p>
-          <form-button type="submit" name="Add" color="green" ico="plus" class="mt-4" @click="addCart(product.id)" v-if="!product.inCart"></form-button>
-          <form-button type="submit" name="Remove" color="red" ico="trash" class="mt-4" @click="removeCart(product.id)" v-else></form-button>
+          <div class="mt-4">
+            <span v-for="(item, index) in product.attributes" class="mr-2 whitespace-nowrap rounded-full bg-purple-100 px-2.5 py-0.5 text-sm text-purple-700">{{ item }}</span>
+          </div>
+          <div class="mt-4">{{ product.brief }}</div>
+
+          <div class="flex mt-4">
+            <div class="flex-none w-32">
+              <form-button type="submit" name="Add" color="green" ico="plus" @click="addCart(product.id)" v-if="!product.inCart"></form-button>
+              <form-button type="submit" name="Remove" color="red" ico="trash" @click="removeCart(product.id)" v-else></form-button>
+            </div>
+            <div class="grow relative inline-flex items-center"><p class="text-2xl font-black">{{ costFormat( product.amount ) }} {{ currency }}</p></div>
+          </div>
         </div>
       </div>
+
+      <div class="mt-8 prod_desc border-t border-gray-100 pt-8 " v-html="product.description"></div>
     </div>
   </section>
 </div>
diff --git a/web/site/public/assets/css/main.css b/web/site/public/assets/css/main.css
@@ -36,33 +36,23 @@ h3 {
   }
 }
 
-.tiptap ul {
-  padding-left: 2.5rem;
-  list-style-type: disc;
-}
-
-.tiptap ol {
-  padding-left: 2.5rem;
-  list-style-type: decimal;
-}
-
-.tiptap > * + * {
+.prod_desc > * + * {
   margin-top: 0.75em;
 }
-.tiptap blockquote {
+.prod_desc blockquote {
   padding-left: 1rem;
   border-color: #6b7280;
   border-style: solid;
 }
-.tiptap blockquote ul {
+.prod_desc blockquote ul {
   padding-left: 1rem;
   list-style-type: disc;
 }
-.tiptap blockquote ol {
+.prod_desc blockquote ol {
   padding-left: 1rem;
   list-style-type: disc;
 }
-.tiptap hr {
+.prod_desc hr {
   border: none;
   border-top: 2px solid rgba(13, 13, 13, 0.1);
   margin: 2rem 0;
@@ -92,9 +82,11 @@ h3 {
 .prod_desc ul {
   list-style: circle inside none;
   margin: 1.5em 10px;
+  list-style-type: disc;
 }
 
 .prod_desc ol {
-  list-style: decimal-leading-zero;
+  list-style: circle inside none;
   margin: 1.5em 10px;
+  list-style-type: decimal;
 }
diff --git a/web/site/public/assets/css/style.css b/web/site/public/assets/css/style.css