<commit_before><script>
  import Modal from 'app/components/common/Modal'
  import Clan from 'models/Clan'

  export default Vue.extend({
    components: {
      Modal
    },
    props: {
      // If you want to edit an existing clan's name/description/type, pass it as a prop:
      clan: {
        type: Object,
        default: null
      }
    },
    data: () => ({
      name: '',
      description: '',
      isPublic: true
    }),

    mounted () {
      if (this.clan !== null) {
        this.name = this.clan.name
        this.description = this.clan.description
        this.isPublic = this.clan.type === undefined ? true : this.clan.type === 'public'
      }
    },

    computed: {
      modalTitle() {
        if (this.clan === null) {
          return 'Create team'
        } else {
          return 'Edit team'
        }
      }
    },

    methods: {
      async submit () {
        if (!this.isPublic && !me.isPremium()) {
          noty({ type: 'error', text: 'Must be a subscriber to create private teams', timeout: 3000 })
          return
        } else if (this.name.length < 2) {
          noty({ type: 'error', text: 'Must have at least 2 letters for the team name', timeout: 3000 })
          return
        }

        if (this.clan) {
          await this.updateClan()
        } else {
          await this.createNewClan()
        }
      },
      async createNewClan () {
        try {
          // NOTE: Would prefer to move these to Vuex, keeping it simple for now:
          const clan = new Clan()
          clan.set('type', this.isPublic ? 'public' : 'private')
          clan.set('name', this.name)
          clan.set('description', this.description)
          // Assume this will fail if the clan name exists
          const savedClan = await clan.save({})

          this.$emit('close')
          application.router.navigate(`/league/${savedClan._id}`, { trigger: true })
        } catch (e) {
          if (e.errorName === 'Conflict' || e.code === 409) {
            noty({ type: 'error', text: 'Team name already exists', timeout: 3000 })
            return
          } else {
            throw e
          }
        }
      },

      async updateClan () {
        try {
          const clan = new Clan({ _id: this.clan._id })
          clan.set('type', this.isPublic ? 'public' : 'private')
          clan.set('name', this.name)
          clan.set('description', this.description)

          // NOTE: May not not need to set these. Would prefer to move these to Vuex:
          clan.set('ownerID', this.clan.ownerID)
          clan.set('dashboardType', this.clan.dashboardType)
          await clan.save({})
          this.$emit('close')
        } catch (e) {
          if (e.errorName === 'Conflict' || e.code === 409) {
            noty({ type: 'error', text: 'Team name already exists', timeout: 3000 })
            return
          } else {
            throw e
          }
        }
      }

    }
  })
</script>

<template>
  <modal @close="$emit('close')" :title="modalTitle" id="clan-creation-modal">
    <div class="container">
      <div>
        <label for="input-name">Team name:</label>
        <input id="input-name" type="text" v-model="name" />
      </div>

      <div>
        <label for="input-description">Description:</label>
        <textarea id="input-description" type="text" rows=2 v-model="description" />
      </div>

      <div>
        <label for="input-is-public">Public:</label>
        <input id="input-is-public" type="checkbox" v-model="isPublic" />
      </div>

      <button @click.prevent="submit">{{ modalTitle }}</button>
    </div>
  </modal>
</template>

<style scoped><commit_msg>Update Team edit modal to use displayName (#6215)<commit_after><script>
  import Modal from 'app/components/common/Modal'
  import Clan from 'models/Clan'

  export default Vue.extend({
    components: {
      Modal
    },
    props: {
      // If you want to edit an existing clan's name/description/type, pass it as a prop:
      clan: {
        type: Object,
        default: null
      }
    },
    data: () => ({
      name: '',
      description: '',
      isPublic: true
    }),

    mounted () {
      if (this.clan !== null) {
        this.name = this.clan.displayName || this.clan.name
        this.description = this.clan.description
        this.isPublic = this.clan.type === undefined ? true : this.clan.type === 'public'
      }
    },

    computed: {
      modalTitle() {
        if (this.clan === null) {
          return 'Create team'
        } else {
          return 'Edit team'
        }
      }
    },

    methods: {
      async submit () {
        if (!this.isPublic && !me.isPremium()) {
          noty({ type: 'error', text: 'Must be a subscriber to create private teams', timeout: 3000 })
          return
        } else if (this.name.length < 2) {
          noty({ type: 'error', text: 'Must have at least 2 letters for the team name', timeout: 3000 })
          return
        }

        if (this.clan) {
          await this.updateClan()
        } else {
          await this.createNewClan()
        }
      },
      async createNewClan () {
        try {
          // NOTE: Would prefer to move these to Vuex, keeping it simple for now:
          const clan = new Clan()
          clan.set('type', this.isPublic ? 'public' : 'private')
          clan.set('name', this.name)
          clan.set('description', this.description)
          clan.set('displayName', this.name)
          // Assume this will fail if the clan name exists
          const savedClan = await clan.save({})

          this.$emit('close')
          application.router.navigate(`/league/${savedClan._id}`, { trigger: true })
        } catch (e) {
          if (e.errorName === 'Conflict' || e.code === 409) {
            noty({ type: 'error', text: 'Team name already exists', timeout: 3000 })
            return
          } else {
            throw e
          }
        }
      },

      async updateClan () {
        try {
          const clan = new Clan(this.clan)
          // TODO: Cannot edit privacy from client side
          // clan.set('type', this.isPublic ? 'public' : 'private')
          clan.set('displayName', this.name)
          clan.set('description', this.description)

          await clan.save({})
          this.$emit('close')
          document.location.reload()
        } catch (e) {
          if (e.errorName === 'Conflict' || e.code === 409) {
            noty({ type: 'error', text: 'Team name already exists', timeout: 3000 })
            return
          } else {
            throw e
          }
        }
      }

    }
  })
</script>

<template>
  <modal @close="$emit('close')" :title="modalTitle" id="clan-creation-modal">
    <div class="container">
      <div>
        <label for="input-name">Team name:</label>
        <input id="input-name" type="text" v-model="name" />
      </div>

      <div>
        <label for="input-description">Description:</label>
        <textarea id="input-description" type="text" rows=2 v-model="description" />
      </div>

      <div v-if="!clan">
        <label for="input-is-public">Public:</label>
        <input id="input-is-public" type="checkbox" v-model="isPublic" />
      </div>

      <button @click.prevent="submit">{{ modalTitle }}</button>
    </div>
  </modal>
</template>

<style scoped>
{'fraction_non_alphanumeric': 0.14846625766871166, 'fraction_numerical': 0.007361963190184049, 'mean_word_length': 1.8118052893829053, 'pattern_counts': {'":': 0, '<': 57, '<?xml version=': 0, '>': 57, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '531478', 'n_tokens_mistral': 2238, 'n_tokens_neox': 2170, 'n_words': 564}