activity_notification 2.4.1 → 2.5.0

data/spec/rails_app/app/javascript/components/subscriptions/Index.vue

@@ -1,279 +0,0 @@
-<template>
-  <div class="subscription_wrapper">
-    <div class="subscription_header">
-      <h1>Subscriptions for {{ currentTarget.printable_target_name }}</h1>
-    </div>
-
-    <div v-if="subscriptions">
-      <div class="subscription_header">
-        <h2>Configured subscriptions</h2>
-      </div>
-      <div class="subscriptions" id="subscriptions">
-        <div v-if="subscriptions.length" class="fields_area">
-          <div v-for="subscription in subscriptions" :key="`${subscription.id}_${subscription.updated_at}`">
-            <subscription :targetSubscription="subscription" :targetApiPath="targetApiPath" @getSubscriptions="getSubscriptions" />
-          </div>
-        </div>
-        <div v-else class="fields_area">
-          <div class="fields_wrapper">
-            No subscriptions are available.
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div v-if="notificationKeys">
-      <div class="subscription_header">
-        <h2>Unconfigured notification keys</h2>
-      </div>
-      <div class="notification_keys" id="notification_keys">
-        <div v-if="notificationKeys.length" class="fields_area">
-          <div v-for="notificationKey in notificationKeys" :key="notificationKey">
-            <notification-key :notificationKey="notificationKey" :targetApiPath="targetApiPath" @getSubscriptions="getSubscriptions" />
-          </div>
-        </div>
-        <div v-else class="fields_area">
-          <div class="fields_wrapper">
-            No notification keys are available.
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="subscription_header">
-      <h2>Create a new subscription</h2>
-    </div>
-    <div class="subscription_form" id="subscription_form">
-      <div class="fields_area">
-        <new-subscription :targetApiPath="targetApiPath" @getSubscriptions="getSubscriptions" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-import Subscription from './Subscription.vue'
-import NotificationKey from './NotificationKey.vue'
-import NewSubscription from './NewSubscription.vue'
-
-export default {
-  name: 'SubscriptionsIndex',
-  components: {
-    Subscription,
-    NotificationKey,
-    NewSubscription
-  },
-  props: {
-    target_type: {
-      type: String
-    },
-    target_id: {
-      type: [String, Number]
-    },
-    targetApiPath: {
-      type: String,
-      default: function () { 
-        if (this.target_type && this.target_id) {
-          return '/' + this.target_type + '/' + this.target_id;
-        } else {
-          return '';
-        }
-      }
-    },
-    target: {
-      type: Object
-    }
-  },
-  data () {
-    return {
-      currentTarget: { printable_target_name: '' },
-      subscriptions: [],
-      notificationKeys: []
-    }
-  },
-  mounted () {
-    if (this.target) {
-      this.currentTarget = this.target;
-    } else {
-      this.getCurrentTarget();
-    }
-    this.getSubscriptions();
-  },
-  methods: {
-    getCurrentTarget () {
-      axios
-        .get(this.targetApiPath)
-        .then(response => (this.currentTarget = response.data))
-    },
-    getSubscriptions () {
-      axios
-        .get(this.targetApiPath + '/subscriptions')
-        .then(response => {
-          this.subscriptions = response.data.subscriptions;
-          this.notificationKeys = response.data.unconfigured_notification_keys;
-        })
-        .catch (error => {
-          if (error.response.status == 401) {
-            this.$router.push('/logout');
-          }
-        })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.subscription_header h1 {
-  margin-bottom: 30px;
-}
-
-.fields_area {
-  border: 1px solid #e5e5e5;
-  width: 600px;
-  box-sizing: border-box;
-  margin-bottom: 30px;
-}
-</style>
-
-<style>
-.fields_area .fields_wrapper {
-  position: relative;
-  background-color: #fff;
-  padding: 20px;
-  box-sizing: border-box;
-  border-bottom: 1px solid #e5e5e5;
-}
-.fields_area .fields_wrapper.configured {
-  background-color: #f8f9fb;
-}
-
-.fields_area .fields_wrapper .fields_title_wrapper {
-  margin-bottom: 16px;
-  border-bottom: none;
-}
-
-.fields_area .fields_wrapper .fields_title_wrapper .fields_title {
-  font-size: 16px;
-  font-weight: bold;
-}
-
-.fields_area .fields_wrapper .fields_title_wrapper p {
-  position: absolute;
-  top: 15px;
-  right: 15px;
-}
-
-.fields_area .fields_wrapper .field_wrapper {
-  margin-bottom: 16px;
-}
-
-.fields_area .fields_wrapper .field_wrapper:last-child {
-  margin-bottom: 0;
-}
-
-.fields_area .fields_wrapper .field_wrapper.hidden {
-  display: none;
-}
-
-.fields_area .fields_wrapper .field_wrapper .field_label {
-  margin-bottom: 8px;
-}
-
-.fields_area .fields_wrapper .field_wrapper .field_label label {
-  font-size: 14px;
-}
-
-.ui label {
-  font-size: 14px;
-}
-
-/* button */
-.ui.button button,
-.ui.button .button {
-  cursor: pointer;
-  color: #4f4f4f;
-  font-weight: bold;
-  font-size: 12px;
-  padding: 10px 14px;
-  margin-left: 10px;
-  border: 1px solid #e5e5e5;
-  background-color: #fafafa;
-}
-
-.ui.button button:first-child,
-.ui.button .button:first-child {
-  margin-left: 0;
-}
-
-.ui.text_field input {
-  margin: 0;
-  outline: 0;
-  padding: 10px;
-  font-size: 14px;
-  border: 1px solid #e5e5e5;
-  border-radius: 3px;
-  box-shadow: 0 0 0 0 transparent inset;
-}
-
-/* checkbox */
-.ui.checkbox {
-  position: relative;
-  left: 300px;
-  margin-top: -26px;
-  width: 40px;
-}
-
-.ui.checkbox input {
-  position: absolute;
-  margin-left: -9999px;
-  visibility: hidden;
-}
-
-.ui.checkbox .slider {
-  display: block;
-  position: relative;
-  cursor: pointer;
-  outline: none;
-  user-select: none;
-
-  padding: 2px;
-  width: 36px;
-  height: 20px;
-  background-color: #dddddd;
-  border-radius: 20px;
-}
-
-.ui.checkbox .slider:before,
-.ui.checkbox .slider:after {
-  display: block;
-  position: absolute;
-  top: 1px;
-  left: 1px;
-  bottom: 1px;
-  content: "";
-}
-
-.ui.checkbox .slider:before {
-  right: 1px;
-  background-color: #f1f1f1;
-  border-radius: 20px;
-  transition: background 0.4s;
-}
-
-.ui.checkbox .slider:after {
-  width: 20px;
-  background-color: #fff;
-  border-radius: 100%;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
-  transition: margin 0.4s;
-}
-
-.ui.checkbox input:checked + .slider:before {
-  background-color: #8ce196;
-}
-
-.ui.checkbox input:checked + .slider:after {
-  margin-left: 18px;
-}
-</style>

data/spec/rails_app/app/javascript/components/subscriptions/NewSubscription.vue

@@ -1,112 +0,0 @@
-<template>
-  <div class="fields_wrapper">
-    <form class="new_subscription" @submit.prevent="createSubscription">
-      <div class="field_wrapper subscribing">
-        <div class="field_label">
-          <label>
-            Notification key
-          </label>
-        </div>
-
-        <div class="field">
-          <div class="ui text_field">
-            <input type="text" v-model="subscriptionParams.key" placeholder="Notification key" />
-          </div>
-        </div>
-      </div>
-
-      <div class="field_wrapper subscribing">
-        <div class="field_label">
-          <label>
-            Notification
-          </label>
-        </div>
-
-        <div class="field">
-          <div class="ui checkbox">
-            <label>
-              <input type="checkbox" v-model="subscriptionParams.subscribing" v-on:click="arrangeSubscription()" />
-              <div class="slider" />
-            </label>
-          </div>
-        </div>
-      </div>
-
-      <div v-bind:class="[subscriptionParams.subscribing ? '' : 'hidden', 'field_wrapper subscribing_to_email']">
-        <div class="field_label">
-          <label>
-            Email notification
-          </label>
-        </div>
-        <div class="field">
-          <div class="ui checkbox">
-            <label>
-              <input type="checkbox" v-model="subscriptionParams.subscribing_to_email" />
-              <div class="slider" />
-            </label>
-          </div>
-        </div>
-      </div>
-
-      <div class="ui button">
-        <button type="submit">Create subscription</button>
-      </div>
-    </form>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-
-export default {
-  name: 'Subscription',
-  props: {
-    targetApiPath: {
-      type: String,
-      required: true
-    }
-  },
-  data () {
-    return {
-      baseURL: axios.defaults.baseURL + this.targetApiPath,
-      subscriptionParams: {
-        key: "",
-        subscribing: true,
-        subscribing_to_email: true,
-        optional_targets: {}
-      }
-    }
-  },
-  methods: {
-    createSubscription () {
-      axios
-        .post(this.targetApiPath + '/subscriptions', { subscription: this.subscriptionParams })
-        .then(response => {
-          if (response.status == 201) {
-            this.$emit('getSubscriptions');
-            this.resetSubscriptionParams();
-          }
-        })
-        .catch (error => {
-          if (error.response.status == 401) {
-            this.$router.push('/logout');
-          }
-        })
-    },
-    arrangeSubscription () {
-      this.subscriptionParams.subscribing_to_email = !this.subscriptionParams.subscribing;
-    },
-    resetSubscriptionParams () {
-      this.subscriptionParams = {
-        key: "",
-        subscribing: true,
-        subscribing_to_email: true,
-        optional_targets: {}
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-</style>

data/spec/rails_app/app/javascript/components/subscriptions/NotificationKey.vue

@@ -1,141 +0,0 @@
-<template>
-  <div class="fields_wrapper">
-    <form class="new_subscription" @submit.prevent="createSubscription">
-      <div class="fields_title_wrapper">
-        <h3 class="fields_title">
-          {{ notificationKey }}
-        </h3>
-
-        <p>
-          <router-link v-bind:to="{ path : $route.path.replace('subscriptions', 'notifications') + '?filtered_by_key=' + notificationKey }">Notifications</router-link>
-        </p>
-      </div>
-
-      <div class="field_wrapper subscribing">
-        <div class="field_label">
-          <label>
-            Notification
-          </label>
-        </div>
-
-        <div class="field">
-          <div class="ui checkbox">
-            <label>
-              <input type="checkbox" v-model="subscriptionParams.subscribing" v-on:click="arrangeSubscription()" />
-              <div class="slider" />
-            </label>
-          </div>
-        </div>
-      </div>
-
-      <div v-bind:class="[subscriptionParams.subscribing ? '' : 'hidden', 'field_wrapper subscribing_to_email']">
-        <div class="field_label">
-          <label>
-            Email notification
-          </label>
-        </div>
-        <div class="field">
-          <div class="ui checkbox">
-            <label>
-              <input type="checkbox" v-model="subscriptionParams.subscribing_to_email" />
-              <div class="slider" />
-            </label>
-          </div>
-        </div>
-      </div>
-
-      <div v-bind:class="[subscriptionParams.subscribing ? '' : 'hidden', 'field_wrapper subscribing_to_optional_targets']">
-        <div v-for="optionalTargetName in configuredOptionalTargetNames" :key="optionalTargetName">
-          <div class="field_label">
-            <label>
-              Optional tagret ({{ optionalTargetName }})
-            </label>
-          </div>
-          <div class="field">
-            <div class="ui checkbox">
-              <label>
-                <input type="checkbox" v-model="subscriptionParams.optional_targets[optionalTargetName].subscribing" />
-                <div class="slider" />
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="ui button">
-        <button type="submit">Configure subscription</button>
-      </div>
-    </form>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-
-export default {
-  name: 'Subscription',
-  props: {
-    notificationKey: {
-      type: String,
-      required: true
-    },
-    targetApiPath: {
-      type: String,
-      required: true
-    }
-  },
-  data () {
-    return {
-      baseURL: axios.defaults.baseURL + this.targetApiPath,
-      configuredOptionalTargetNames: [],
-      subscriptionParams: {
-        key: this.notificationKey,
-        subscribing: true,
-        subscribing_to_email: true,
-        optional_targets: {}
-      }
-    }
-  },
-  mounted () {
-    axios
-      .get(this.targetApiPath + '/subscriptions/optional_target_names?key=' + this.notificationKey)
-      .then(response => {
-        this.configuredOptionalTargetNames = response.data.optional_target_names;
-        for (let optionalTargetName of this.configuredOptionalTargetNames) {
-          this.subscriptionParams.optional_targets[optionalTargetName] = {};
-          this.subscriptionParams.optional_targets[optionalTargetName].subscribing = true;
-        }
-      })
-      .catch (error => {
-        if (error.response.status == 401) {
-          this.$router.push('/logout');
-        }
-      })
-  },
-  methods: {
-    createSubscription () {
-      axios
-        .post(this.targetApiPath + '/subscriptions', { subscription: this.subscriptionParams })
-        .then(response => {
-          if (response.status == 201) {
-            this.$emit('getSubscriptions');
-          }
-        })
-        .catch (error => {
-          if (error.response.status == 401) {
-            this.$router.push('/logout');
-          }
-        })
-    },
-    arrangeSubscription () {
-      this.subscriptionParams.subscribing_to_email = !this.subscriptionParams.subscribing;
-      for (let optionalTargetName of this.configuredOptionalTargetNames) {
-        this.subscriptionParams.optional_targets[optionalTargetName].subscribing = !this.subscriptionParams.subscribing;
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-</style>