0351d front end linting (#377)

* feat: disable custom script for trial users * after lint fix * frontend linting --------- Co-authored-by: Julien Nahum <julien@nahum.net>
2024-04-15 18:39:03 +01:00
parent 8d35fc8b1a
commit bcd45ce8a6
228 changed files with 17036 additions and 8744 deletions
--- a/client/components/open/forms/components/templates/FormTemplateModal.vue
+++ b/client/components/open/forms/components/templates/FormTemplateModal.vue
@@ -1,10 +1,21 @@
 <template>
-  <modal :show="show" @close="emit('close')">
+  <modal
+    :show="show"
+    @close="emit('close')"
+  >
    <template #icon>
-      <svg class="w-10 h-10 text-blue" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg
+        class="w-10 h-10 text-blue"
+        viewBox="0 0 48 48"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
        <path
          d="M17 27C16.0681 27 15.6022 27 15.2346 26.8478C14.7446 26.6448 14.3552 26.2554 14.1522 25.7654C14 25.3978 14 24.9319 14 24V17.2C14 16.0799 14 15.5198 14.218 15.092C14.4097 14.7157 14.7157 14.4097 15.092 14.218C15.5198 14 16.0799 14 17.2 14H24C24.9319 14 25.3978 14 25.7654 14.1522C26.2554 14.3552 26.6448 14.7446 26.8478 15.2346C27 15.6022 27 16.0681 27 17M24.2 34H30.8C31.9201 34 32.4802 34 32.908 33.782C33.2843 33.5903 33.5903 33.2843 33.782 32.908C34 32.4802 34 31.9201 34 30.8V24.2C34 23.0799 34 22.5198 33.782 22.092C33.5903 21.7157 33.2843 21.4097 32.908 21.218C32.4802 21 31.9201 21 30.8 21H24.2C23.0799 21 22.5198 21 22.092 21.218C21.7157 21.4097 21.4097 21.7157 21.218 22.092C21 22.5198 21 23.0799 21 24.2V30.8C21 31.9201 21 32.4802 21.218 32.908C21.4097 33.2843 21.7157 33.5903 22.092 33.782C22.5198 34 23.0799 34 24.2 34Z"
-          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
        />
      </svg>
    </template>
@@ -18,37 +29,99 @@
    </template>
    <div class="p-4">
      <p v-if="!template">
-        New template will be create from your form: <span class="font-semibold">{{ form.title }}</span>.
+        New template will be create from your form:
+        <span class="font-semibold">{{ form.title }}</span>.
      </p>

-      <form v-if="templateForm" class="mt-6" @submit.prevent="onSubmit" @keydown="templateForm.onKeydown($event)">
+      <form
+        v-if="templateForm"
+        class="mt-6"
+        @submit.prevent="onSubmit"
+        @keydown="templateForm.onKeydown($event)"
+      >
        <div class="-m-6">
          <div class="border-t py-4 px-6">
-            <toggle-switch-input v-if="user && (user.admin || user.template_editor)" name="publicly_listed" :form="templateForm" class="mt-4" label="Publicly Listed?" />
-            <text-input name="name" :form="templateForm" class="mt-4" label="Title" :required="true" />
-            <text-input name="slug" :form="templateForm" class="mt-4" label="Slug" :required="true" />
-            <text-area-input name="short_description" :form="templateForm" class="mt-4" label="Short Description"
-                             :required="true"
+            <toggle-switch-input
+              v-if="user && (user.admin || user.template_editor)"
+              name="publicly_listed"
+              :form="templateForm"
+              class="mt-4"
+              label="Publicly Listed?"
            />
-            <rich-text-area-input name="description" :form="templateForm" class="mt-4" label="Description"
-                                  :required="true"
+            <text-input
+              name="name"
+              :form="templateForm"
+              class="mt-4"
+              label="Title"
+              :required="true"
            />
-            <text-input name="image_url" :form="templateForm" class="mt-4" label="Image" :required="true" />
-            <select-input name="types" :form="templateForm" class="mt-4" label="Types" :options="typesOptions"
-                          :multiple="true" :searchable="true"
+            <text-input
+              name="slug"
+              :form="templateForm"
+              class="mt-4"
+              label="Slug"
+              :required="true"
            />
-            <select-input name="industries" :form="templateForm" class="mt-4" label="Industries"
-                          :options="industriesOptions" :multiple="true" :searchable="true"
+            <text-area-input
+              name="short_description"
+              :form="templateForm"
+              class="mt-4"
+              label="Short Description"
+              :required="true"
            />
-            <select-input name="related_templates" :form="templateForm" class="mt-4" label="Related Templates"
-                          :options="templatesOptions" :multiple="true" :searchable="true"
+            <rich-text-area-input
+              name="description"
+              :form="templateForm"
+              class="mt-4"
+              label="Description"
+              :required="true"
            />
-            <questions-editor name="questions" :questions="templateForm.questions" class="mt-4"
-                              label="Frequently asked questions"
+            <text-input
+              name="image_url"
+              :form="templateForm"
+              class="mt-4"
+              label="Image"
+              :required="true"
+            />
+            <select-input
+              name="types"
+              :form="templateForm"
+              class="mt-4"
+              label="Types"
+              :options="typesOptions"
+              :multiple="true"
+              :searchable="true"
+            />
+            <select-input
+              name="industries"
+              :form="templateForm"
+              class="mt-4"
+              label="Industries"
+              :options="industriesOptions"
+              :multiple="true"
+              :searchable="true"
+            />
+            <select-input
+              name="related_templates"
+              :form="templateForm"
+              class="mt-4"
+              label="Related Templates"
+              :options="templatesOptions"
+              :multiple="true"
+              :searchable="true"
+            />
+            <questions-editor
+              name="questions"
+              :questions="templateForm.questions"
+              class="mt-4"
+              label="Frequently asked questions"
            />
          </div>
          <div class="flex justify-end mt-4 pb-5 px-6">
-            <v-button class="mr-2" :loading="templateForm.busy">
+            <v-button
+              class="mr-2"
+              :loading="templateForm.busy"
+            >
              <template v-if="template">
                Update
              </template>
@@ -56,12 +129,23 @@
                Create
              </template>
            </v-button>
-            <v-button v-if="template" color="red" class="mr-2"
-                      @click.prevent="useAlert().confirm('Do you really want to delete this template?', deleteFormTemplate)"
+            <v-button
+              v-if="template"
+              color="red"
+              class="mr-2"
+              @click.prevent="
+                useAlert().confirm(
+                  'Do you really want to delete this template?',
+                  deleteFormTemplate,
+                )
+              "
            >
              Delete
            </v-button>
-            <v-button color="white" @click.prevent="emit('close')">
+            <v-button
+              color="white"
+              @click.prevent="emit('close')"
+            >
              Close
            </v-button>
          </div>
@@ -72,68 +156,73 @@
 </template>

 <script setup>
-import { ref, defineProps, defineEmits, computed } from 'vue'
-import QuestionsEditor from './QuestionsEditor.vue'
+import { ref, defineProps, defineEmits, computed } from "vue"
+import QuestionsEditor from "./QuestionsEditor.vue"

 const props = defineProps({
  show: { type: Boolean, required: true },
  form: { type: Object, required: true },
-  template: { type: Object, required: false, default: () => {} }
+  template: { type: Object, required: false, default: () => {} },
 })

 const authStore = useAuthStore()
 const templatesStore = useTemplatesStore()
 const router = useRouter()
-let user = computed(() => authStore.user)
-let templates = computed(() => [...templatesStore.content.values()])
-let industries = computed(() => [...templatesStore.industries.values()])
-let types = computed(() => [...templatesStore.types.values()])
+const user = computed(() => authStore.user)
+const templates = computed(() => [...templatesStore.content.values()])
+const industries = computed(() => [...templatesStore.industries.values()])
+const types = computed(() => [...templatesStore.types.values()])

-let templateForm = ref(null)
-const emit = defineEmits(['close'])
+const templateForm = ref(null)
+const emit = defineEmits(["close"])

 onMounted(() => {
-  templateForm.value = useForm(props.template ?? {
-    publicly_listed: false,
-    name: '',
-    slug: '',
-    short_description: '',
-    description: '',
-    image_url: '',
-    types: null,
-    industries: null,
-    related_templates: null,
-    questions: []
-  })
+  templateForm.value = useForm(
+    props.template ?? {
+      publicly_listed: false,
+      name: "",
+      slug: "",
+      short_description: "",
+      description: "",
+      image_url: "",
+      types: null,
+      industries: null,
+      related_templates: null,
+      questions: [],
+    },
+  )
 })

-watch(() => props.show, () => {
-  if (props.show) {
-    loadAllTemplates(templatesStore)
-  }
-})
+watch(
+  () => props.show,
+  () => {
+    if (props.show) {
+      loadAllTemplates(templatesStore)
+    }
+  },
+)

-let typesOptions = computed(() => {
+const typesOptions = computed(() => {
  return Object.values(types.value).map((type) => {
    return {
      name: type.name,
-      value: type.slug
+      value: type.slug,
    }
  })
 })
-let industriesOptions = computed(() => {
+const industriesOptions = computed(() => {
  return Object.values(industries.value).map((industry) => {
    return {
      name: industry.name,
-      value: industry.slug
+      value: industry.slug,
    }
  })
 })
-let templatesOptions = computed(() => {
+const templatesOptions = computed(() => {
  return Object.values(templates.value).map((template) => {
    return {
      name: template.name,
-      value: template.slug
+      value: template.slug,
    }
  })
 })
@@ -147,33 +236,37 @@ const onSubmit = () => {
 }
 const createFormTemplate = async () => {
  templateForm.value.form = props.form
-  await templateForm.value.post('/templates').then((data) => {
+  await templateForm.value.post("/templates").then((data) => {
    if (data.message) {
      useAlert().success(data.message)
    }
    templatesStore.save(data.data)
-    emit('close')
+    emit("close")
  })
 }
 const updateFormTemplate = async () => {
  templateForm.value.form = props.form
-  await templateForm.value.put('/templates/' + props.template.id).then((data) => {
-    if (data.message) {
-      useAlert().success(data.message)
-    }
-    templatesStore.save(data.data)
-    emit('close')
-  })
+  await templateForm.value
+    .put("/templates/" + props.template.id)
+    .then((data) => {
+      if (data.message) {
+        useAlert().success(data.message)
+      }
+      templatesStore.save(data.data)
+      emit("close")
+    })
 }
 const deleteFormTemplate = async () => {
  if (!props.template) return
-  opnFetch('/templates/' + props.template.id, {method:'DELETE'}).then((data) => {
-    if (data.message) {
-      useAlert().success(data.message)
-    }
-    router.push({ name: 'templates' })
-    templatesStore.remove(props.template)
-    emit('close')
-  })
+  opnFetch("/templates/" + props.template.id, { method: "DELETE" }).then(
+    (data) => {
+      if (data.message) {
+        useAlert().success(data.message)
+      }
+      router.push({ name: "templates" })
+      templatesStore.remove(props.template)
+      emit("close")
+    },
+  )
 }
 </script>
--- a/client/components/open/forms/components/templates/QuestionsEditor.vue
+++ b/client/components/open/forms/components/templates/QuestionsEditor.vue
@@ -1,77 +1,148 @@
 <template>
  <div :class="wrapperClass">
-    <label v-if="label" :for="id?id:name"
-           :class="[theme.default.label,{'uppercase text-xs':uppercaseLabels, 'text-sm':!uppercaseLabels}]"
+    <label
+      v-if="label"
+      :for="id ? id : name"
+      :class="[
+        theme.default.label,
+        { 'uppercase text-xs': uppercaseLabels, 'text-sm': !uppercaseLabels },
+      ]"
    >
      {{ label }}
-      <span v-if="required" class="text-red-500 required-dot">*</span>
+      <span
+        v-if="required"
+        class="text-red-500 required-dot"
+      >*</span>
    </label>

-    <Loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
-    <div v-else class="my-3">
-      <div v-for="(questionForm, quesKey) in allQuestions" :key="quesKey" class="bg-gray-100 p-2 mb-4">
-          <v-button color="red" size="small" class="mb-2" @click.prevent="onRemove(quesKey)">
-            <svg class="h-4 w-4 text-white inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M3 6H5M5 6H21M5 6V20C5 20.5304 5.21071 21.0391 5.58579 21.4142C5.96086 21.7893 6.46957 22 7 22H17C17.5304 22 18.0391 21.7893 18.4142 21.4142C18.7893 21.0391 19 20.5304 19 20V6H5ZM8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M10 11V17M14 11V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-            Remove
-          </v-button>
-          <text-input name="question" :form="questionForm" placeholder="Question title" />
-          <rich-text-area-input name="answer" :form="questionForm" class="mt-4" placeholder="Question response" />
+    <Loader
+      v-if="loading"
+      key="loader"
+      class="h-6 w-6 text-nt-blue mx-auto"
+    />
+    <div
+      v-else
+      class="my-3"
+    >
+      <div
+        v-for="(questionForm, quesKey) in allQuestions"
+        :key="quesKey"
+        class="bg-gray-100 p-2 mb-4"
+      >
+        <v-button
+          color="red"
+          size="small"
+          class="mb-2"
+          @click.prevent="onRemove(quesKey)"
+        >
+          <svg
+            class="h-4 w-4 text-white inline mr-1 -mt-1"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M3 6H5M5 6H21M5 6V20C5 20.5304 5.21071 21.0391 5.58579 21.4142C5.96086 21.7893 6.46957 22 7 22H17C17.5304 22 18.0391 21.7893 18.4142 21.4142C18.7893 21.0391 19 20.5304 19 20V6H5ZM8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M10 11V17M14 11V17"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          Remove
+        </v-button>
+        <text-input
+          name="question"
+          :form="questionForm"
+          placeholder="Question title"
+        />
+        <rich-text-area-input
+          name="answer"
+          :form="questionForm"
+          class="mt-4"
+          placeholder="Question response"
+        />
      </div>
-      <v-button v-if="addNew" color="green" size="small" nativeType="button" class="mt-2 flex" @click.prevent="onAdd">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-1 inline" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+      <v-button
+        v-if="addNew"
+        color="green"
+        size="small"
+        native-type="button"
+        class="mt-2 flex"
+        @click.prevent="onAdd"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-6 w-6 mr-1 inline"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
        </svg>
        Add New
      </v-button>
    </div>

-    <small v-if="help" :class="theme.SelectInput.help">
+    <small
+      v-if="help"
+      :class="theme.SelectInput.help"
+    >
      <slot name="help">{{ help }}</slot>
    </small>
-    <has-error v-if="hasValidation" :form="form" :field="name" />
+    <has-error
+      v-if="hasValidation"
+      :form="form"
+      :field="name"
+    />
  </div>
 </template>

 <script>
-import inputMixin from '~/mixins/forms/input.js'
+import inputMixin from "~/mixins/forms/input.js"

 export default {
-  name: 'QuestionsEditor',
+  name: "QuestionsEditor",
  mixins: [inputMixin],

  props: {
    loading: { type: Boolean, default: false },
    addNew: { type: Boolean, default: true },
-    questions: { type: Array, default: [] },
+    questions: { type: Array, default: ()=>[] },
  },

-  data () {
+  data() {
    return {
      allQuestions: null,
      newQuestion: {
-        question: '',
-        answer: '',
-      }
+        question: "",
+        answer: "",
+      },
    }
  },

-  mounted () {
-    this.allQuestions = (this.questions.length > 0) ? this.questions : [this.newQuestion]
+  computed: {},
+
+  watch: {},
+
+  mounted() {
+    this.allQuestions =
+      this.questions.length > 0 ? this.questions : [this.newQuestion]
  },

-  watch: { },
-
-  computed: { },
-
  methods: {
    onAdd() {
      this.allQuestions.push(this.newQuestion)
    },
-    onRemove(key){
+    onRemove(key) {
      this.allQuestions.splice(key, 1)
-    }
-  }
+    },
+  },
 }
 </script>