- proper handling of quill editor content for custom bounty description

  - using quill editor for acceptance criteria and resources

Author: Gerald Iakobinyi-Pich

app/assets/v2/js/pages/bounty_details2.js

@@ -10,6 +10,9 @@ const loadingState = {
 
 document.result = bounty;
 
+Vue.use(VueQuillEditor);
+Vue.component('v-select', VueSelect.VueSelect);
+
 Vue.mixin({
   methods: {
     fetchBounty: function(newData) {

app/assets/v2/js/pages/change_bounty.js

@@ -23,6 +23,26 @@ const bountyTypes = [
 
 Vue.use(VueQuillEditor);
 Vue.component('v-select', VueSelect.VueSelect);
+Vue.component('quill-editor-ext', {
+  props: [ 'initial', 'options' ],
+  template: '#quill-editor-ext',
+  data() {
+    return {
+    };
+  },
+  methods: {
+    onUpdate: function(event) {
+      this.$emit('change', {
+        text: event.text,
+        delta: event.quill.getContents()
+      });
+    }
+  },
+  mounted() {
+    this.$refs.quillEditor.quill.setContents(this.initial);
+  }
+});
+
 Vue.mixin({
   data() {
     return {
@@ -401,7 +421,7 @@ Vue.mixin({
             ret['title'] = 'Please input bounty title';
           }
 
-          if (!vm.form.description.trim()) {
+          if (!vm.form.richDescriptionText.trim()) {
             ret['description'] = 'Please input bounty description';
           }
 
@@ -803,13 +823,14 @@ Vue.mixin({
         'web3_type': vm.web3Type(),
         'activity': metadata.activity,
         'bounty_owner_address': vm.form.funderAddress,
-        'acceptance_criteria': vm.form.acceptanceCriteria,
-        'resources': vm.form.resources,
+        'acceptance_criteria': JSON.stringify(vm.form.richAcceptanceCriteria),
+        'resources': JSON.stringify(vm.form.richResources),
         'contact_details': vm.nonEmptyContactDetails,
         'bounty_source': vm.form.bountyInformationSource,
         'peg_to_usd': vm.form.peg_to_usd,
         'amount_usd': vm.form.amountusd,
-        'owners': vm.form.bounty_owners.map(owner => owner.id)
+        'owners': vm.form.bounty_owners.map(owner => owner.id),
+        'custom_issue_description': JSON.stringify(vm.form.richDescriptionContent)
       };
 
       vm.sendBounty(JSON.stringify(params));
@@ -891,8 +912,19 @@ Vue.mixin({
       });
     },
 
-    quilUpdated({ quill, text }) {
-      this.form.description = text;
+    updateCustomDescription({text, delta}) {
+      this.form.richDescriptionText = text;
+      this.form.richDescriptionContent = delta;
+    },
+
+    updateAcceptanceCriteria({ text, delta }) {
+      this.form.richAcceptanceCriteria = delta;
+      this.form.richAcceptanceCriteriaText = text;
+    },
+
+    updateResources({ text, delta }) {
+      this.form.richResources = delta;
+      this.form.richResourcesText = text;
     },
 
     popover(elementId) {
@@ -1119,6 +1151,8 @@ Vue.mixin({
 if (document.getElementById('gc-hackathon-new-bounty')) {
   let bounty = document.result;
 
+  console.log('geri bounty.custom_issue_description', bounty.custom_issue_description);
+
 
   appFormBounty = new Vue({
     delimiters: [ '[[', ']]' ],
@@ -1192,8 +1226,10 @@ if (document.getElementById('gc-hackathon-new-bounty')) {
             type: 'Discord',
             value: ''
           }],
-          resources: bounty.resources,
-          acceptanceCriteria: bounty.acceptance_criteria,
+          richResources: bounty.resources ? JSON.parse(bounty.resources) : null,
+          richResourcesText: bounty.resources ? bounty.resources : null,
+          richAcceptanceCriteria: bounty.acceptance_criteria ? JSON.parse(bounty.acceptance_criteria) : null,
+          richAcceptanceCriteriaText: bounty.acceptance_criteria ? bounty.acceptance_criteria : null,
           organisationUrl: bounty.funding_organisation ? 'https://github.com/' + bounty.funding_organisation : '',
           title: bounty.title,
           description: bounty.issue_description,
@@ -1205,7 +1241,9 @@ if (document.getElementById('gc-hackathon-new-bounty')) {
           reserved_for_user: {
             text: bounty.bounty_reserved_for_user.handle,
             avatar_url: bounty.bounty_reserved_for_user.avatar_url
-          }
+          },
+          richDescriptionContent: bounty.custom_issue_description ? JSON.parse(bounty.custom_issue_description) : null,
+          richDescriptionText: bounty.custom_issue_description ? bounty.custom_issue_description : ''
         },
         editorOptionPrio: {
           modules: {

app/assets/v2/js/pages/new_bounty.js

@@ -23,6 +23,27 @@ const bountyTypes = [
 
 Vue.use(VueQuillEditor);
 Vue.component('v-select', VueSelect.VueSelect);
+
+Vue.component('quill-editor-ext', {
+  props: [ 'initial', 'options' ],
+  template: '#quill-editor-ext',
+  data() {
+    return {
+    };
+  },
+  methods: {
+    onUpdate: function(event) {
+      this.$emit('change', {
+        text: event.text,
+        delta: event.quill.getContents()
+      });
+    }
+  },
+  mounted() {
+    this.$refs.quillEditor.quill.setContents(this.initial);
+  }
+});
+
 Vue.mixin({
   data() {
     return {
@@ -401,7 +422,7 @@ Vue.mixin({
             ret['title'] = 'Please input bounty title';
           }
 
-          if (!vm.form.description.trim()) {
+          if (!vm.form.richDescriptionText.trim()) {
             ret['description'] = 'Please input bounty description';
           }
 
@@ -878,6 +899,7 @@ Vue.mixin({
         'raw_data': {}, // ETC-TODO REMOVE ?
         'network': vm.network,
         'issue_description': metadata.issueDescription,
+        'custom_issue_description': JSON.stringify(vm.form.richDescriptionContent),
         'funding_organisation': metadata.fundingOrganisation,
         'balance': vm.form.amount * 10 ** vm.form.token.decimals, // ETC-TODO REMOVE ?
         'project_type': vm.form.project_type,
@@ -898,8 +920,8 @@ Vue.mixin({
         'web3_type': vm.web3Type(),
         'activity': metadata.activity,
         'bounty_owner_address': vm.form.funderAddress,
-        'acceptance_criteria': vm.form.acceptanceCriteria,
-        'resources': vm.form.resources,
+        'acceptance_criteria': JSON.stringify(vm.form.richAcceptanceCriteria),
+        'resources': JSON.stringify(vm.form.richResources),
         'contact_details': JSON.stringify(vm.nonEmptyContactDetails),
         'bounty_source': vm.form.bountyInformationSource,
         'peg_to_usd': vm.form.peg_to_usd,
@@ -985,8 +1007,19 @@ Vue.mixin({
       });
     },
 
-    quilUpdated({ quill, text }) {
-      this.form.description = text;
+    updateCustomDescription({text, delta}) {
+      this.form.richDescriptionText = text;
+      this.form.richDescriptionContent = delta;
+    },
+
+    updateAcceptanceCriteria({ text, delta }) {
+      this.form.richAcceptanceCriteria = delta;
+      this.form.richAcceptanceCriteriaText = text;
+    },
+
+    updateResources({ text, delta }) {
+      this.form.richResources = delta;
+      this.form.richResourcesText = text;
     },
 
     popover(elementId) {
@@ -1190,6 +1223,7 @@ Vue.mixin({
       deep: true,
       handler(newVal, oldVal) {
         this.dirty = true;
+        console.log('geri model richDescriptionContent', newVal.richDescriptionContent);
       }
 
     },
@@ -1282,14 +1316,18 @@ if (document.getElementById('gc-hackathon-new-bounty')) {
             type: 'Discord',
             value: ''
           }],
-          resources: '',
-          acceptanceCriteria: '',
+          richResources: '',
+          richResourcesText: '',
+          richAcceptanceCriteria: '',
+          richAcceptanceCriteriaText: '',
           organisationUrl: '',
           title: '',
           description: '',
           richDescription: '',
           bounty_owners: [],
-          never_expires: false
+          never_expires: false,
+          richDescriptionContent: null,
+          richDescriptionText: ''
         },
         editorOptionPrio: {
           modules: {

app/dashboard/migrations/0205_auto_20220517_0745.py

@@ -0,0 +1,28 @@
+# Generated by Django 2.2.24 on 2022-05-17 07:45
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('dashboard', '0204_merge_20220510_1917'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='bounty',
+            name='custom_issue_description',
+            field=models.TextField(blank=True, default=''),
+        ),
+        migrations.AlterField(
+            model_name='bounty',
+            name='owners',
+            field=models.ManyToManyField(blank=True, to='dashboard.Profile'),
+        ),
+        migrations.AlterField(
+            model_name='bounty',
+            name='project_type',
+            field=models.CharField(choices=[('traditional', 'traditional'), ('contest', 'contest - deprecated'), ('cooperative', 'cooperative - deprecated'), ('multiple', 'multiple')], db_index=True, default='traditional', max_length=50),
+        ),
+    ]

app/dashboard/models.py

@@ -440,6 +440,9 @@ class Bounty(SuperModel):
     # This contains a list of IDs to dashboard.Profile
     owners = models.ManyToManyField("Profile", blank=True)
 
+    # Issue description for custom bounties, not related to a GitHUB issue
+    custom_issue_description = models.TextField(default='', blank=True)
+
     class Meta:
         """Define metadata associated with Bounty."""
 

app/dashboard/router.py

@@ -191,7 +191,7 @@ class Meta:
             'featuring_date', 'repo_type', 'funder_last_messaged_on', 'can_remarket', 'is_reserved',
             'contact_details', 'usd_pegged_value_in_token_now', 'usd_pegged_value_in_token', 
             'value_true_usd', 'peg_to_usd', 'owners', 'payout_date', 'acceptance_criteria', 'resources',
-            'bounty_source', 'bounty_owner_profile', 'never_expires'
+            'bounty_source', 'bounty_owner_profile', 'never_expires', 'custom_issue_description'
         )
 
     def create(self, validated_data):

app/dashboard/templates/bounty/change.html

@@ -68,6 +68,9 @@
         <input class="form__input" type="text" v-model="pickDate" placeholder="04/01/2022" :disabled="disabled"/>
       </div>
     </script>
+    <script type="text/x-template" id="quill-editor-ext">
+      <quill-editor ref="quillEditor" id="new-bounty-custom-editor" @change="onUpdate($event)" :options="options"></quill-editor>
+    </script>
 
     {% include 'shared/footer.html' %}
     {% include 'shared/footer_scripts.html' with slim=1 %}

app/dashboard/templates/bounty/details2.html

@@ -290,15 +290,16 @@ <h4 id="title" class="font-title p-0 text-center text-lg-left">[[ bounty.title ]
             <div class="row">
               <div class="col-12 mt-2">
                 <h5 class="bounty-heading mt-0 pt-4" id="description">{% trans "Description" %}</h5>
-                <div class="issue_description" :inner-html.prop="bounty.issue_description | markdownit"></div>
+                <div v-if="bounty.bounty_source === 'github'" class="issue_description" :inner-html.prop="bounty.issue_description | markdownit"></div>
+                <render-quill v-else class="issue_description" :delta="bounty.custom_issue_description"></render-quill>
               </div>
             </div>
 
             <div v-if="bounty.acceptance_criteria" class="row">
               <div class="col-12 mt-2">
                 <h5 class="bounty-heading mt-0 pt-4">{% trans "Acceptance Criteria" %}</h5>
                 <div class="acceptance_criteria">
-                  <pre>[[ bounty.acceptance_criteria ]]</pre>
+                  <render-quill :delta="bounty.acceptance_criteria"></render-quill>
                 </div>
               </div>
             </div>
@@ -307,7 +308,7 @@ <h5 class="bounty-heading mt-0 pt-4">{% trans "Acceptance Criteria" %}</h5>
               <div class="col-12 mt-2">
                 <h5 class="bounty-heading mt-0 pt-4">{% trans "Resources" %}</h5>
                 <div class="resources">
-                  <pre>[[ bounty.resources ]]</pre>
+                  <render-quill :delta="bounty.resources"></render-quill>
                 </div>
               </div>
             </div>
@@ -1214,6 +1215,9 @@ <h3>{{ noscript.keywords }}</h3>
       {% include 'shared/current_profile.html' %}
     </div>
 
+    <script src='https://cdn.jsdelivr.net/npm/quill@1.3.6/dist/quill.min.js'></script>
+    <script src='https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js'></script>
+
     {% bundle merge_js file bounty_details2_libs %}
       <script src="highlight.min.js" base-dir="/node_modules/@highlightjs/cdn-assets/"></script>
       <script src="markdown-it.min.js" base-dir="/node_modules/markdown-it/dist/"></script>

app/dashboard/templates/bounty/new_bounty.html

@@ -100,6 +100,9 @@
         <input class="form__input" type="text" v-model="pickDate" placeholder="04/01/2022" :disabled="disabled"/>
       </div>
     </script>
+    <script type="text/x-template" id="quill-editor-ext">
+      <quill-editor ref="quillEditor" id="new-bounty-custom-editor" @change="onUpdate($event)" :options="options"></quill-editor>
+    </script>
 
     {% include 'shared/footer.html' %}
     {% include 'shared/footer_scripts.html' with vue=True %}

app/dashboard/templates/bounty/new_bounty_step_2.html

@@ -108,9 +108,9 @@ <h4>Bounty Details</h4>
   <div class="row ml-0" v-if="form.bountyInformationSource === 'custom'">
     <!-- Custom Bounty Details Editor -->
     <div class="new-border-mid col-12 col-md-9">
-      <quill-editor id="new-bounty-custom-editor" @change="quilUpdated($event)"
-        :class="`editor ${step2Errors.description && !(form.richDescription && form.richDescription.length) ? 'invalid' : ''}`"
-        :options="editorOptionPrio" v-model="form.richDescription"></quill-editor>
+      <quill-editor-ext id="new-bounty-custom-editor-ext" :options="editorOptionPrio" @change="updateCustomDescription($event)" :initial="form.richDescriptionContent"
+      :class="`editor ${step2Errors.description && !(form.richDescription && form.richDescription.length) ? 'invalid' : ''}`"
+      ></quill-editor-ext>
       <div class="text-danger" v-if="step2Errors.description && !form.richDescription.trim()">
         [[step2Errors.description]]
       </div>
@@ -145,9 +145,9 @@ <h4>Bounty Details</h4>
   <div class="row ml-0" v-if="form.bountyInformationSource !== null">
     <div class="new-border-mid col-12 col-md-9">
       <!-- Acceptance Criteria -->
-      <textarea id="new-bounty-acceptace-criteria" class="form-control" name='acceptanceCriteria'
-        v-model="form.acceptanceCriteria" placeholder="What is the deliverable and acceptance criteria for this bounty?"
-        rows="5" required></textarea>
+      <quill-editor-ext id="new-bounty-acceptace-criteria-editor-ext" :options="editorOptionPrio" @change="updateAcceptanceCriteria($event)" :initial="form.richAcceptanceCriteria"
+      :class="`editor`"
+      ></quill-editor-ext>
     </div>
 
 
@@ -157,22 +157,16 @@ <h4>Bounty Details</h4>
       </div>
     </div>
 
-    <div class="d-none d-md-block col-md-3">
-      <div class="bounty-creation-help p-3">
-        Check out <a href="https://support.gitcoin.co/gitcoin-bounties/bounty-guidelines">great examples</a> of acceptance criteria from some of our past successful bounties!
-      </div>
-    </div>
-
     <div class="new-border-mid col-12 col-md-9 pb-4"></div>
   </div>
 
   <div class="row ml-0" v-if="form.bountyInformationSource !== null">
     <!-- Resources -->
     <div class="new-border-mid col-12 col-md-9 pb-4">
       <label class="mb-1 font-subheader font-weight-normal letter-spacing">Resources</label>
-      <textarea id="new-bounty-resources" class="form-control" name='resources' v-model="form.resources"
-        placeholder="Useful resources for working on this bounty (documentations, tutorials, etc.)" rows="5"
-        required></textarea>
+      <quill-editor-ext id="new-bounty-resources-editor-ext" :options="editorOptionPrio" @change="updateResources($event)" :initial="form.richResources"
+      :class="`editor`"
+      ></quill-editor-ext>
     </div>
   </div>