@mixd-id/web-scaffold 0.2.240702 → 0.2.240704

package/src/widgets/UserActionBuilder/UserActionOutputReply.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="p-6 pt-0 flex flex-col gap-5">
+
+    <div class="flex flex-col gap-4">
+      <div>
+        <div class="flex flex-row">
+          <Checkbox v-model="output.params.useTemplate">
+            Use Template
+          </Checkbox>
+        </div>
+        <Dropdown v-model="output.params.templateName" class="mt-2">
+          <option v-for="template in whatsappTemplates" :value="template.name">{{ template.name }}</option>
+        </Dropdown>
+      </div>
+
+      <div v-if="!output.params.useTemplate" class="flex flex-col gap-4">
+
+        <div>
+          <label class="text-text-400">Image</label>
+          <Image :src="output.params.imageUrl"
+                 :editable="true"
+                 @change="(base64, file) => output.params.imageUrl = file"
+                 ref="image"
+                 class="w-full min-h-[100px] border-[1px] border-text-200 bg-base-500 rounded-lg flex">
+            <template #empty>
+              <div class="flex-1 flex items-center justify-center">
+                <button type="button" @click="$refs.image.edit()">
+                  <svg width="24" height="24" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M630.8 469.1l-55.95-43.85C575.3 422.2 575.1 419.2 575.1 416l.0034-320c0-35.35-28.65-64-64-64H127.1C113.6 32 100.4 36.98 89.78 45.06L38.81 5.113C28.34-3.058 13.31-1.246 5.109 9.192C-3.063 19.63-1.235 34.72 9.187 42.89L601.2 506.9C605.6 510.3 610.8 512 615.1 512c7.125 0 14.17-3.156 18.91-9.188C643.1 492.4 641.2 477.3 630.8 469.1zM223.1 149.6l-64.29-50.39C164.2 97.15 169.9 96 175.1 96c26.51 0 48 21.49 48 48C223.1 145.9 223.4 147.7 223.1 149.6zM331.2 234.3l23.45-35.18C357.7 194.7 362.7 192 368 192s10.35 2.672 13.31 7.125l103.9 155.9L331.2 234.3zM145.1 416c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C206.1 290.4 210.9 288 216 288s9.916 2.441 12.93 6.574l32.46 44.51l16.43-24.65L63.99 146.8L63.99 416c0 35.35 28.65 64 64 64h361.1l-81.66-64H145.1z"/></svg>
+                </button>
+              </div>
+            </template>
+          </Image>
+        </div>
+
+        <div>
+          <label class="text-text-400">Text</label>
+          <TextWithTag rows="5" v-model="output.params.text" :items="replyTextItems" />
+        </div>
+
+        <div>
+          <label class="text-text-400">Footer</label>
+          <Textbox v-model="output.params.footer" maxlength="50" />
+        </div>
+
+        <div>
+          <div class="flex flex-row gap-2 items-center">
+            <label class="flex-1 text-text-400">Buttons</label>
+            <button type="button" class="text-primary" @click="$array(output.params, 'buttons').push({})">
+              {{ $t('Add Button') }}
+            </button>
+          </div>
+          <ListItem :items="output.params.buttons"
+                    @reorder="(from, to) => { output.params.buttons.splice(to, 0, output.params.buttons.splice(from, 1)[0]); }">
+            <template v-slot="{ item, index }">
+              <div class="flex flex-row items-center gap-3">
+                <div data-reorder>
+                  <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
+                </div>
+                <div class="flex-1 flex flex-row gap-2 items-center">
+                  <Textbox class="w-[100px]" placeholder="Text" v-model="item.text" />
+                </div>
+                <div>
+                  <button type="button" @click="output.params.buttons.splice(index, 1)">
+                    <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
+                  </button>
+                </div>
+              </div>
+            </template>
+          </ListItem>
+        </div>
+
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+export default{
+
+  computed: {
+
+    replyTextItems(){
+      return [
+        { text:"Mobile Number", value:"{mobileNumber}" },
+        { text:"Name", value:"{name}" },
+        { text:"Created At", value:"{createdAt}" },
+      ]
+    },
+
+    tabItems(){
+      return [
+        { text:"Text", value:1 },
+        this.getWhatsappTemplateSrc() ? { text:"Template", value:2 } : null,
+      ]
+      .filter(_ => _)
+    }
+
+  },
+
+  data(){
+    return {
+      whatsappTemplates: null
+    }
+  },
+
+  inject: [ 'getWhatsappTemplateSrc', 'socket' ],
+
+  methods: {
+
+    loadWhatsappTemplate(){
+      const src = this.getWhatsappTemplateSrc()
+
+      if(src){
+        this.socket.send(src, {})
+            .then(templates => this.whatsappTemplates = templates)
+      }
+    }
+
+  },
+
+  mounted() {
+    this.loadWhatsappTemplate()
+  },
+
+  props: {
+
+    output: Object
+
+  }
+
+}
+
+</script>

package/src/widgets/UserActionBuilder/UserActionProps.vue

@@ -0,0 +1,213 @@
+<template>
+  <div v-if="instance" class="p-6 flex flex-col gap-6" @dblclick="log(instance)">
+
+    <div class="flex flex-row gap-5">
+      <div class="flex-1">
+        <label>Name</label>
+        <Textbox v-model="instance.name" class="mt-2"/>
+      </div>
+      <div v-if="instance.parentId > 0">
+        <label>Enabled</label>
+        <Switch v-model="instance.enabled" class="mt-2"/>
+      </div>
+    </div>
+
+    <div>
+      <label>Type</label>
+      <div class="flex flex-row gap-3 mt-2">
+        <Dropdown v-model.number="instance.type" class="w-full">
+          <option :value="1">Event</option>
+          <option :value="2">Time Based</option>
+          <option :value="3">Fallback</option>
+        </Dropdown>
+      </div>
+    </div>
+
+    <div v-if="instance.type === 1">
+      <label>Event</label>
+      <div class="flex flex-row gap-3 mt-2">
+        <Dropdown v-model.number="instance.key" class="w-full">
+          <option value="onNewMessage">On New Message</option>
+        </Dropdown>
+      </div>
+    </div>
+
+    <div v-if="instance.type === 1" class="flex flex-col gap-6">
+
+      <div>
+        <div class="flex flex-row items-center gap-2">
+          <label class="flex-1">Condition</label>
+          <button type="button" class="text-primary"
+                  @click="$refs.userActionCondition.open({}, addCondition)">
+            Add Condition
+          </button>
+        </div>
+        <ListItem :items="instance.conditions"
+                  class="mt-2 bg-transparent border-[1px] border-text-200 rounded-xl overflow-hidden"
+                  container-class="flex flex-col gap-2"
+                  @reorder="(from, to) => { instance.conditions.splice(to, 0, instance.conditions.splice(from, 1)[0]); }">
+          <template v-slot="{ item, index }">
+            <div class="flex flex-row items-center gap-2 px-3 bg-base-500 p-2">
+              <div data-reorder>
+                <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
+              </div>
+
+              <div class="flex-1 flex flex-row gap-2" @click="$refs.userActionCondition.open(item, _ => Object.assign(item, _))">
+                <label>{{ item.key }}</label>
+                <p class="text-text-400 flex-1 text-ellipsis whitespace-nowrap overflow-hidden">{{ item.op }}</p>
+                <p class="text-text-400 flex-1 text-ellipsis whitespace-nowrap overflow-hidden">{{ item.value }}</p>
+              </div>
+
+              <div>
+                <button type="button" @click="instance.conditions.splice(index, 1)">
+                  <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
+                </button>
+              </div>
+            </div>
+          </template>
+
+          <template #empty>
+            <div class="flex justify-center p-2 bg-base-300 rounded-xl border-[1px] rounded-xl border-text-200">
+              <p class="text-text-400">{{ $t('All conditions') }}</p>
+            </div>
+          </template>
+        </ListItem>
+      </div>
+
+    </div>
+
+    <div>
+      <div class="flex flex-row items-center gap-2">
+        <label class="flex-1">Output</label>
+        <button type="button" class="text-primary" @click="$refs.userActionOutput.create()">Add Output</button>
+      </div>
+      <ListItem :items="instance.outputs"
+                class="mt-2 border-[1px] rounded-xl border-text-200"
+                container-class="divide-y divide-text-200"
+                @reorder="(from, to) => { instance.outputs.splice(to, 0, instance.outputs.splice(from, 1)[0]); }">
+        <template v-slot="{ item, index }">
+          <div class="flex flex-row items-center gap-3 px-3">
+            <div data-reorder>
+              <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
+            </div>
+            <div class="flex-1 p-2 flex flex-row items-center gap-2" @click="$refs.userActionOutput.open(item, index)">
+              <p>{{ item.text }}</p>
+              <p class="flex-1 text-text-300 text-ellipsis whitespace-nowrap overflow-hidden"></p>
+            </div>
+            <button type="button" @click="instance.outputs.splice(index, 1)">
+              <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
+            </button>
+          </div>
+        </template>
+
+        <template #empty>
+          <div class="flex justify-center p-2 bg-base-300 rounded-xl">
+            <p class="text-text-400">{{ $t('No actions') }}</p>
+          </div>
+        </template>
+      </ListItem>
+
+      <UserActionOutput ref="userActionOutput"
+                        :outputs="outputs"
+                        @apply="(instance, index) => addOutput(instance, index)" />
+
+      <UserActionCondition ref="userActionCondition" />
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+import UserActionOutput from "./UserActionOutput.vue";
+import UserActionCondition from "./UserActionCondition.vue";
+
+export default{
+
+  components: {UserActionCondition, UserActionOutput},
+
+  computed: {
+
+    conditions(){
+      return (this.eventOpt[this.instance.event]?.conditions ?? [])
+          .reduce((acc, cur) => {
+            acc[cur.key] = cur
+            return acc
+          }, {})
+    },
+
+    outputs(){
+      return [
+        { type: "log", text:"Log" },
+        { type: "reply", text:"Reply" },
+        { type: "delay", text:"Delay" },
+        { type: "reset", text:"Reset" },
+        { type: "endChat", text:"End Chat" },
+        { type: "startChat", text:"Start Chat" },
+        { type: "endConversation", text:"End Conversation" },
+      ]
+      return this.eventOpt[this.instance.key]?.outputs ?? []
+    },
+
+  },
+
+  data(){
+    return {
+    }
+  },
+
+  methods: {
+
+    addCondition(condition){
+      this.$util.push(this.instance.conditions, condition)
+    },
+
+    addOutput(output, idx){
+      if(!this.instance) return
+
+      if(!Array.isArray(this.instance.outputs))
+        this.instance.outputs = []
+
+      typeof idx === 'number' ?
+          Object.assign(this.instance.outputs[idx], output) :
+          this.instance.outputs.push(output)
+    },
+
+  },
+
+  props: {
+    instance: Object,
+
+    eventOpt: {
+      type: Object,
+      default: () => ({
+
+        'onNewMessage': {
+          text: 'On message create',
+          conditions: [
+            { key:"{message.body}", text:"Text", type:"string", operators:[ [ 'contains', 'Contains' ], [ 'startsWith', 'Starts With' ] ] },
+            { key:"{message.direction}", text:"Direction", type:"enum", enum:[ [ 1, 'In' ], [ 2, 'Out' ] ] },
+            { key:"{message.channelId}", text:"Channel", type:"enum", enum:[ [ 1, 'Whatsapp' ] ] },
+            { key:"{message.inbox.mobileNumber}", text:"Mobile Number" }
+          ],
+          outputs: [
+            { type: "log", text:"Log" },
+            { type: "reply", text:"Reply" },
+            { type: "delay", text:"Delay" },
+          ]
+        }
+
+      })
+    },
+  }
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>