Apply previous changes: slack webhooks, date range issue, 12h am/pm format, today preifl, api-keys

resources/js/components/forms/DateInput.vue

@@ -11,7 +11,8 @@
                   :style="inputStyle" :name="name" :fixed-classes="fixedClasses" :range="dateRange"
                   :placeholder="placeholder" :timepicker="useTime" 
                   :date-format="useTime?'Z':'Y-m-d'" 
-                  :user-format="useTime?'F j, Y - H:i':'F j, Y'"
+                  :user-format="useTime ? amPm ? 'F j, Y - G:i K' : 'F j, Y - H:i' : 'F j, Y'"
+                  :amPm="amPm"
     />
     <small v-if="help" :class="theme.default.help">
       <slot name="help">{{ help }}</slot>
@@ -30,7 +31,8 @@ export default {
 
   props: {
     withTime: { type: Boolean, default: false },
-    dateRange: { type: Boolean, default: false }
+    dateRange: { type: Boolean, default: false },
+    amPm: { type: Boolean, default: false }
   },
 
   data: () => ({

resources/js/components/forms/FlatSelectInput.vue

@@ -1,86 +1,84 @@
 <template>
-    <div :class="wrapperClass">
-        <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>
-        </label>
+  <div :class="wrapperClass">
+    <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>
+    </label>
 
-        <loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
-        <div v-else v-for="option in options" :key="option[optionKey]" class="flex border mb-4 p-3 cursor-pointer rounded-2xl" @click="onSelect(option[optionKey])">
-            <p class="flex-grow">
-              {{ option[displayKey] }}
-            </p>
-            <span v-if="isSelected(option[optionKey])" class="float-right">
-              <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd"
-                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                      clip-rule="evenodd"
-                />
-              </svg>
-            </span>
-        </div>
-
-        <small v-if="help" :class="theme.SelectInput.help">
-            <slot name="help">{{ help }}</slot>
-        </small>
-        <has-error v-if="hasValidation" :form="form" :field="name" />
+    <loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
+    <div v-for="(option, index) in options" v-else :key="option[optionKey]"
+         :class="[theme.default.input,'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 flex',{ 'mb-2': index !== options.length,'ring-red-500 ring-2': hasValidation && form.errors.has(name), 'cursor-not-allowed bg-gray-200':disabled }]"
+         @click="onSelect(option[optionKey])"
+    >
+      <p class="flex-grow">
+        {{ option[displayKey] }}
+      </p>
+      <div v-if="isSelected(option[optionKey])" class="flex items-center">
+        <svg :color="color" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+        </svg>
+      </div>
     </div>
-  </template>
 
-  <script>
-  import inputMixin from '~/mixins/forms/input'
+    <small v-if="help" :class="theme.SelectInput.help">
+      <slot name="help">{{ help }}</slot>
+    </small>
+    <has-error v-if="hasValidation" :form="form" :field="name" />
+  </div>
+</template>
 
-  /**
-   * Options: {name,value} objects
-   */
-  export default {
-    name: 'FlatSelectInput',
-    mixins: [inputMixin],
+<script>
+import inputMixin from '~/mixins/forms/input'
 
-    props: {
-      options: { type: Array, required: true },
-      optionKey: { type: String, default: 'value' },
-      emitKey: { type: String, default: 'value' },
-      displayKey: { type: String, default: 'name' },
-      loading: { type: Boolean, default: false },
-      multiple: { type: Boolean, default: false },
-    },
-    data () {
-      return {
+/**
+ * Options: {name,value} objects
+ */
+export default {
+  name: 'FlatSelectInput',
+  mixins: [inputMixin],
+
+  props: {
+    options: { type: Array, required: true },
+    optionKey: { type: String, default: 'value' },
+    emitKey: { type: String, default: 'value' },
+    displayKey: { type: String, default: 'name' },
+    loading: { type: Boolean, default: false },
+    multiple: { type: Boolean, default: false }
+  },
+  data () {
+    return {}
+  },
+  computed: {},
+  methods: {
+    onSelect (value) {
+      if (this.multiple) {
+        const emitValue = Array.isArray(this.compVal) ? [...this.compVal] : []
+
+        // Already in value, remove it
+        if (this.isSelected(value)) {
+          this.compVal = emitValue.filter((item) => {
+            return item !== value
+          })
+          return
+        }
+
+        // Otherwise add value
+        emitValue.push(value)
+        this.compVal = emitValue
+      } else {
+        this.compVal = (this.compVal === value) ? null : value
       }
     },
-    computed: {
-    },
-    methods: {
-      onSelect (value) {
-        if (this.multiple) {
-          const emitValue = Array.isArray(this.compVal) ? [...this.compVal] : []
+    isSelected (value) {
+      if (!this.compVal) return false
 
-          // Already in value, remove it
-          if (this.isSelected(value)) {
-            this.compVal = emitValue.filter((item) => {
-              return item !== value
-            })
-            return
-          }
-
-          // Otherwise add value
-          emitValue.push(value)
-          this.compVal = emitValue
-        } else {
-          this.compVal = (this.compVal === value) ? null : value
-        }
-      },
-      isSelected (value) {
-        if(!this.compVal) return false
-
-        if (this.multiple) {
-          return this.compVal.includes(value)
-        }
-        return this.compVal === value
+      if (this.multiple) {
+        return this.compVal.includes(value)
       }
+      return this.compVal === value
     }
   }
-  </script>
+}
+</script>