faq

src/components/Widgets/FAQ/FAQ.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="faq">
+    <div class="faq-title">
+      <div>
+        <q-banner class="banner">
+          سوالات متداول
+        </q-banner>
+      </div>
+    </div>
+    <div class="faq-content">
+      <q-virtual-scroll v-slot="{ item, index }"
+                        :items="localOptions.topics"
+                        virtual-scroll-horizontal>
+        <q-btn :key="index"
+               color="primary"
+               class="q-ma-md"
+               @click="topicIndex=index">
+          {{ item.title }}
+        </q-btn>
+      </q-virtual-scroll>
+
+      <q-tab-panels v-model="topicIndex"
+                    animated>
+        <q-tab-panel v-for="(topic, topicIndex) in localOptions.topics"
+                     :key="topicIndex"
+                     :name="topicIndex">
+          <q-expansion-item v-for="(subTopic, subTopicIndex) in topic.subTopics"
+                            :key="subTopicIndex"
+                            expand-separator
+                            :label="subTopic.question">
+            <q-card>
+              <q-card-section>
+                {{ subTopic.answer }}
+              </q-card-section>
+            </q-card>
+          </q-expansion-item>
+        </q-tab-panel>
+      </q-tab-panels>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mixinWidget } from 'src/mixin/Mixins.js'
+
+export default {
+  name: 'FAQWidget',
+  mixins: [mixinWidget],
+  data: () => ({
+    topicIndex: 0,
+    defaultOptions: {
+      topics: []
+    }
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.faq {
+  padding: 60px 0;
+  .faq-title {
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
+    padding-bottom: 33px;
+  }
+}
+</style>

src/components/Widgets/FAQ/OptionPanel.vue

@@ -0,0 +1,96 @@
+<template>
+  <option-panel-tabs v-model:options="localOptions">
+    <template #main-tab>
+      <q-expansion-item v-for="(topic, topicIndex) in localOptions.topics"
+                        :key="topicIndex"
+                        expand-separator>
+        <template #header>
+          <div class="full-width">
+            <q-btn icon="remove"
+                   flat
+                   @click="removeTopic(topicIndex)">
+              حذف موضوع
+            </q-btn>
+            ({{ topic.title }})
+          </div>
+        </template>
+        <q-card class="bg-grey-3">
+          <q-card-section>
+            <div>
+              عنوان موضوع
+            </div>
+            <q-input v-model="localOptions.topics[topicIndex].title" />
+            <q-separator />
+            <div v-for="(subTopic, subTopicIndex) in topic.subTopics"
+                 :key="subTopicIndex"
+                 class="q-mt-md bg-green-1 q-pa-md">
+              <div>
+                سوال
+              </div>
+              <q-input v-model="localOptions.topics[topicIndex].subTopics[subTopicIndex].question" />
+              <div class="q-mt-sm">
+                پاسخ
+              </div>
+              <q-input v-model="localOptions.topics[topicIndex].subTopics[subTopicIndex].answer" />
+              <q-btn class="full-width"
+                     @click="removeSubTopic(localOptions.topics[topicIndex].subTopics, subTopicIndex)">
+                حذف سوال و جواب
+              </q-btn>
+            </div>
+
+            <q-btn class="q-mt-md full-width"
+                   icon="add"
+                   @click="addSubTopic(localOptions.topics[topicIndex].subTopics)">
+              افزودن سوال و جواب
+            </q-btn>
+          </q-card-section>
+        </q-card>
+      </q-expansion-item>
+      <q-btn class="q-mt-md full-width"
+             icon="add"
+             @click="addTopic">
+        افزودن موضوع
+      </q-btn>
+    </template>
+  </option-panel-tabs>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { mixinOptionPanel } from 'quasar-ui-q-page-builder'
+import OptionPanelTabs from 'quasar-ui-q-page-builder/src/components/OptionPanelComponents/OptionPanelTabs.vue'
+
+export default defineComponent({
+  name: 'OptionPanel',
+  components: { OptionPanelTabs },
+  mixins: [mixinOptionPanel],
+  data() {
+    return {
+      defaultOptions: {
+        topics: []
+      }
+    }
+  },
+  methods: {
+    addTopic () {
+      this.localOptions.topics.push({
+        title: '',
+        icon: '',
+        subTopics: []
+      })
+    },
+    removeTopic (index) {
+      this.localOptions.topics.splice(index, 1)
+    },
+    addSubTopic (subTopics) {
+      subTopics.push({
+        question: '',
+        answer: ''
+      })
+    },
+    removeSubTopic (subTopics, index) {
+      subTopics.splice(index, 1)
+    }
+  }
+})
+</script>

src/router/routes.js

@@ -79,7 +79,8 @@ const routes = [
             component: () => import('src/pages/Public/index.vue')
           },
           { name: 'Public.AllClassrooms', path: 'all-classrooms', component: () => import('src/pages/Public/classrooms.vue') },
-          { name: 'Public.ShowClassroomInfo', path: 'classroom/:id', component: () => import('src/pages/Public/ShowClassroomInfo.vue') }
+          { name: 'Public.ShowClassroomInfo', path: 'classroom/:id', component: () => import('src/pages/Public/ShowClassroomInfo.vue') },
+          { name: 'Public.FAQ', path: 'faq', component: () => import('src/pages/Public/FAQ.vue') }
         ]
       },
       {