support video (MWP)

Tarhche · Aug 18, 2024 · 64ae6eb · 64ae6eb
1 parent 42127f3
commit 64ae6eb
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 8 deletions.
diff --git a/frontend/composables/dashboardArticles.ts b/frontend/composables/dashboardArticles.ts
@@ -12,7 +12,7 @@ async function index(page: number) {
     )
 }
 
-async function create(title: string, excerpt: string, body: string, tags: string[], publishedAt?: string, cover?: string) {
+async function create(title: string, excerpt: string, body: string, tags: string[], publishedAt?: string, cover?: string, video?: string) {
     return useUser().$fetch(
         useApiUrlResolver().resolve("api/dashboard/articles"),
         {
@@ -26,6 +26,7 @@ async function create(title: string, excerpt: string, body: string, tags: string
                 tags: tags,
                 published_at: publishedAt,
                 cover: cover,
+                video: video,
             }
         }
     )
@@ -42,7 +43,7 @@ async function show(uuid: string) {
     )
 }
 
-async function update(uuid: string, title: string, excerpt: string, body: string, tags: string[], publishedAt?: string, cover?: string) {
+async function update(uuid: string, title: string, excerpt: string, body: string, tags: string[], publishedAt?: string, cover?: string, video?: string) {
     return useUser().$fetch(
         useApiUrlResolver().resolve(`api/dashboard/articles`),
         {
@@ -57,6 +58,7 @@ async function update(uuid: string, title: string, excerpt: string, body: string
                 tags: tags,
                 published_at: publishedAt,
                 cover: cover,
+                video: video,
             }
         }
     )

diff --git a/frontend/pages/dashboard/articles/create.vue b/frontend/pages/dashboard/articles/create.vue
@@ -64,14 +64,24 @@
                 </div>
 
                 <div>
-                  <div @click.prevent="params.showFilePicker=true" class="image-picker"
+                  <div @click.prevent="params.showFilePicker=true; params.pickCover=false;" class="image-picker"
                        :style="{ backgroundImage: `url('${ useFilesUrlResolver().resolve(params.cover) }')` }">
                     <small class="title">تصویر اصلی</small>
                     <div class="body">
                       <small class="fa fa-plus"></small>
                     </div>
                   </div>
                 </div>
+
+                <div>
+                  <div @click.prevent="params.showFilePicker=true; params.pickCover=false;" class="image-picker"
+                       :style="{ backgroundImage: `url('${ useFilesUrlResolver().resolve(params.video) }')` }">
+                    <small class="title">ویدئو</small>
+                    <div class="body">
+                      <small class="fa fa-plus"></small>
+                    </div>
+                  </div>
+                </div>
               </div>
               <div class="card-footer">
                 <button :disabled="params.loading" type="submit" class="btn btn-primary rounded submit px-3">
@@ -108,8 +118,10 @@ const params = reactive({
   tags: null,
   publishedAt: null,
   cover: null,
+  video: null,
   loading: false,
   showFilePicker: false,
+  pickCover: false,
 })
 
 // reflects the validation errors to corresponding html input.
@@ -132,11 +144,17 @@ function tags() {
 function selectFile(uuids: string[]) {
   params.showFilePicker = false
 
-  if (params.cover && params.cover.length == 0) {
+  if (uuids && uuids.length == 0) {
+    return
+  }
+
+  if (params.pickCover) {
+    params.cover = uuids[0]
+
     return
   }
 
-  params.cover = uuids[0]
+  params.video = uuids[0]
 }
 
 async function createArticle() {
@@ -150,6 +168,7 @@ async function createArticle() {
         tags(),
         params.publishedAt ? useTime().toISOString(params.publishedAt) : null,
         params.cover || null,
+        params.video || null,
     )
 
     await navigateTo("/dashboard/articles")

diff --git a/frontend/pages/dashboard/articles/edit/[uuid].vue b/frontend/pages/dashboard/articles/edit/[uuid].vue
@@ -62,14 +62,25 @@
                 </div>
 
                 <div>
-                  <div @click.prevent="params.showFilePicker=true" class="image-picker"
+                  <div @click.prevent="params.showFilePicker=true; params.pickCover=true;" class="image-picker"
                        :style="{ backgroundImage: `url('${ useFilesUrlResolver().resolve(params.cover) }')` }">
                     <small class="title">تصویر اصلی</small>
                     <div class="body">
                       <small class="fa fa-plus"></small>
                     </div>
                   </div>
                 </div>
+
+                <div>
+                  <div @click.prevent="params.showFilePicker=true; params.pickCover=false;" class="image-picker"
+                       :style="{ backgroundImage: `url('${ useFilesUrlResolver().resolve(params.video) }')` }">
+                    <small class="title">ویدئو</small>
+                    <div class="body">
+                      <small class="fa fa-plus"></small>
+                    </div>
+                  </div>
+                </div>
+
               </div>
               <div class="card-footer">
                 <button :disabled="params.loading" type="submit" class="btn btn-primary rounded submit px-3">
@@ -109,8 +120,10 @@ const params = reactive({
   tags: null,
   publishedAt: null,
   cover: null,
+  video: null,
   loading: false,
   showFilePicker: false,
+  pickCover: false,
 })
 
 // reflects the validation errors to corresponding html input.
@@ -135,11 +148,17 @@ function tags() {
 function selectFile(uuids: string[]) {
   params.showFilePicker = false
 
-  if (params.cover && params.cover.length == 0) {
+  if (uuids && uuids.length == 0) {
+    return
+  }
+
+  if (params.pickCover) {
+    params.cover = uuids[0]
+
     return
   }
 
-  params.cover = uuids[0]
+  params.video = uuids[0]
 }
 
 async function showArticle() {
@@ -174,6 +193,7 @@ async function updateArticle() {
         tags(),
         params.publishedAt ? useTime().toISOString(params.publishedAt) : null,
         params.cover || null,
+        params.video || null,
     )
   } catch (error) {
     console.log(error)