Clean branch of projects v2

app/assets/v2/css/dashboard-vue-hackathon.css

@@ -18,7 +18,7 @@
   position: absolute;
   display: block;
   width: 225px;
-  padding: 15px 0;
+  padding: 8px 0;
   background-color: #25E899;
   box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
   color: #000;

app/assets/v2/js/hackathon-projects.js

@@ -54,6 +54,10 @@ const projectModal = (bountyId, projectId, callback) => {
     let data = $('.team-users').data('initial') ? $('.team-users').data('initial').split(', ') : [];
 
     userSearch('.team-users', false, '', data, true, false);
+    $('.project__tags').select2({
+      tags: true,
+      tokenSeparators: [ ',', ' ' ]
+    });
     $('#modalProject').bootstrapModal('show');
     $('[data-toggle="tooltip"]').bootstrapTooltip();
     $('#looking-members').on('click', function() {
@@ -68,6 +72,15 @@ const projectModal = (bountyId, projectId, callback) => {
     });
   });
 
+  $('#videodemo-url').keyup(function(event) {
+    const url = $('#videodemo-url').val();
+    const metadata = getVideoMetadata(url);
+
+    if (metadata) {
+      $('#videodemo-provider').val(metadata.provider);
+    }
+  });
+
   $(document).on('change', '#project_logo', function() {
     previewFile($(this));
   });

app/assets/v2/js/pages/fulfill_bounty/token.js

@@ -47,6 +47,13 @@ fulfillBounty = data => {
     'projectId': data.projectId
   };
 
+  if (data.videoDemoLink) {
+    const metadata = getVideoMetadata(data.videoDemoLink);
+
+    params['videoDemoLink'] = data.videoDemoLink;
+    params['videoDemoProvider'] = metadata ? metadata['provider'] : null;
+  }
+
   $.post(url, params, function(response) {
     if (200 <= response.status && response.status <= 204) {
       // redirect to bounty page

app/assets/v2/js/pages/project-page.js

@@ -30,6 +30,15 @@
           let newUrl = `/hackathon/${vm.hackathon['slug']}/projects/${vm.project.id}/${vm.project.name}/${newPathName}?${window.location.search}`;
 
           history.pushState({}, `${vm.hackathon['slug']} - ${newPathName}`, newUrl);
+        },
+        getVideoId(videoURL) {
+          const metadata = getVideoMetadata(videoURL);
+
+          if (metadata) {
+            return metadata['id'];
+          }
+
+          return '';
         }
       },
       data: function() {

app/assets/v2/js/shared.js

@@ -1272,3 +1272,69 @@ const get_UUID = () => {
 
   return uuid;
 };
+
+const isVimeoProvider = (videoURL) => {
+  let vimeoId = null;
+
+  $.ajax({
+    url: `https://vimeo.com/api/oembed.json?url=${videoURL}`,
+    async: false,
+    success: function(response) {
+      if (response.video_id) {
+        vimeoId = response.video_id;
+      }
+    }
+  });
+
+  return vimeoId;
+};
+
+function isValidUrl(string) {
+  try {
+    // eslint-disable-next-line no-new
+    new URL(string);
+  } catch (_) {
+    return false;
+  }
+
+  return true;
+}
+
+const getVideoMetadata = (videoURL) => {
+  const youtube_re = /(?:https?:\/\/|\/\/)?(?:www\.|m\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))([\w-]{11})(?![\w-])/;
+  const loom_re = /(?:https?:\/\/|\/\/)?(?:www\.)?(?:loom\.com\/share\/)([\w]{32})/;
+
+  if (!videoURL || !isValidUrl(videoURL)) {
+    return null;
+  }
+
+  const youtube_match = videoURL.match(youtube_re);
+  const vimeoId = isVimeoProvider(videoURL);
+  const loom_match = videoURL.match(loom_re);
+
+  if (youtube_match !== null && youtube_match[1].length === 11) {
+    return {
+      'provider': 'youtube',
+      'id': youtube_match[1],
+      'url': videoURL
+    };
+  } else if (vimeoId) {
+    return {
+      'provider': 'vimeo',
+      'id': vimeoId,
+      'url': videoURL
+    };
+  } else if (loom_match !== null) {
+    return {
+      'provider': 'loom',
+      'id': loom_match[1],
+      'url': videoURL
+    };
+  }
+
+  return {
+    'provider': 'generic',
+    'id': null,
+    'url': videoURL
+  };
+};

app/dashboard/helpers.py

@@ -216,8 +216,9 @@ def issue_details(request):
         response['message'] = 'invalid arguments'
         return JsonResponse(response)
 
+    url_dict = get_url_dict(clean_bounty_url(url))
+
     try:
-        url_dict = get_url_dict(clean_bounty_url(url))
         if url_dict:
             response = get_gh_issue_details(token=token, **url_dict)
         else:

app/dashboard/migrations/0154_auto_20201008_0213.py

@@ -0,0 +1,24 @@
+# Generated by Django 2.2.4 on 2020-10-08 02:13
+
+import django.contrib.postgres.fields
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('dashboard', '0153_hackathonevent_use_circle'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='hackathonproject',
+            name='categories',
+            field=django.contrib.postgres.fields.ArrayField(base_field=models.CharField(max_length=200), blank=True, default=list, size=None),
+        ),
+        migrations.AddField(
+            model_name='hackathonproject',
+            name='tech_stack',
+            field=django.contrib.postgres.fields.ArrayField(base_field=models.CharField(max_length=200), blank=True, default=list, size=None),
+        ),
+    ]

app/dashboard/models.py

@@ -5100,6 +5100,8 @@ class HackathonProject(SuperModel):
     chat_channel_id = models.CharField(max_length=255, blank=True, null=True)
     winner = models.BooleanField(default=False)
     extra = JSONField(default=dict, blank=True, null=True)
+    categories = ArrayField(models.CharField(max_length=200), blank=True, default=list)
+    tech_stack = ArrayField(models.CharField(max_length=200), blank=True, default=list)
 
     class Meta:
         ordering = ['-name']

app/dashboard/router.py

@@ -209,12 +209,15 @@ class HackathonProjectSerializer(serializers.ModelSerializer):
     bounty = BountySerializer()
     profiles = ProfileSerializer(many=True)
     hackathon = HackathonEventSerializer()
+    comments = serializers.SerializerMethodField()
 
     class Meta:
         model = HackathonProject
-        fields = ('pk', 'chat_channel_id', 'status', 'badge', 'bounty', 'name', 'summary', 'work_url', 'profiles', 'hackathon', 'summary', 'logo', 'message', 'looking_members', 'winner', 'admin_url')
+        fields = ('pk', 'chat_channel_id', 'status', 'badge', 'bounty', 'name', 'summary', 'work_url', 'profiles', 'hackathon', 'summary', 'logo', 'message', 'looking_members', 'winner', 'admin_url', 'comments',)
         depth = 1
 
+    def get_comments(self, obj):
+        return Activity.objects.filter(activity_type='wall_post', project=obj).count()
 
 class HackathonProjectsPagination(PageNumberPagination):
     page_size = 10

app/dashboard/templates/addinterest.html

@@ -124,6 +124,18 @@ <h5 class="text-center font-title">{% trans "Submit a Plan" %}</h5>
                 <input type="url" class="form-control" name="work_url" id="work_url" placeholder="https://github.com/gitcoinco/web" required>
               </div>
 
+              <div class="form-group mt-4">
+                <label class="font-weight-semibold" for="videodemo_url">Select video provider</label>
+                <select name="videodemo-provider">
+                  <option value=""><i class="fa fa-youtube"></i> Youtube</option>
+                  <option value=""><i class="fa fa-vimeo">Vimeo</option>
+                  <option value=""><i class="fa fa-loom">Loom</option>
+                  <option value=""><i class="fa fa-video">HTML5 video</option>
+                </select>>
+                <label class="font-weight-semibold" for="videodemo-url">Link to Video Demo</label>
+                <input type="url" class="form-control" name="work_url" id="work_url" placeholder="https://github.com/gitcoinco/web" required>
+              </div>
+
               <div class="from-group mb-3 mt-4">
                 <label class="font-weight-semibold" for="project_profiles">Team members</label>
                 <div class="form__select2 g-multiselect">

app/dashboard/templates/bounty/fulfill.html

@@ -92,6 +92,13 @@ <h4 class="text-center mb-4">{% trans "Submit Work" %}</h4>
                         {% endfor %}
                       </select>
                     </div>
+                    <div class="mt-2">
+                      <label class="form__label" for="videoDemoLink">{% trans "Video demo Link" %}</label>
+                      <input name='videoDemoLink' id='videoDemoLink' class="form__input font-body" type="text"
+                        placeholder="https://youtu.be/DJartWzDn0E" value=""
+                        required
+                      />
+                    </div>
                   {% endif %}
 
                   {% if bounty.web3_type == 'fiat' %}

app/dashboard/templates/dashboard/hackathon/project_new.html

@@ -70,6 +70,40 @@ <h2 class="h5 text-center font-weight-bold mb-4">Let's Get Started!</h2>
               <div class="form-group mt-4">
                 <label  class="font-weight-semibold" for="work_url">Project Github Repository or Link to Pull Request</label>
                 <input type="url" class="form-control" name="work_url" id="work_url" value="{{project_selected.work_url}}" placeholder="https://github.com/gitcoinco/web" required>
+              </div>
+                            <div class="form-group mt-4">
+                <label class="font-weight-semibold" for="videodemo-url">Link to Video Demo</label>
+                <div class="d-flex">
+                  <select class="form-control col-3 mr-2" name="videodemo-provider" id="videodemo-provider">
+                    <option value="youtube" {% if project_selected.extra.video_provider == 'youtube' %}selected{% endif %}>Youtube</option>
+                    <option value="vimeo" {% if project_selected.extra.video_provider == 'vimeo' %}selected{% endif %}>Vimeo</option>
+                    <option value="loom" {% if project_selected.extra.video_provider == 'loom' %}selected{% endif %}>Loom</option>
+                    <option value="generic" {% if project_selected.extra.video_provider == 'generic' %}selected{% endif %}>HTML5 video</option>
+                  </select>
+                  <input type="url" class="form-control" name="videodemo-url" id="videodemo-url" value="{{project_selected.extra.video_url}}" placeholder="https://www.youtube.com/watch?v=DJartWzDn0E">
+                </div>
+              </div>
+
+              <div class="from-group mb-3 mt-4">
+                <label  class="font-weight-semibold" for="project_stack">Built With <small>Add Tech Stack</small></label>
+                <div class="form__select2 g-multiselect">
+                  <select id="project_stack" class="project__tags" name="tech-stack[]" multiple="multiple" aria-describedby="profilesHelp" required>
+                    {% for stack in project_selected.tech_stack %}
+                      <option selected="selected"  value="{{ stack }}">{{ stack }}</option>
+                    {% endfor %}
+                  </select>
+                </div>
+              </div>
+
+              <div class="from-group mb-3 mt-4">
+                <label  class="font-weight-semibold" for="project_categories">Categories <small>Add Categories</small></label>
+                <div class="form__select2 g-multiselect">
+                  <select id="project_categories" class="project__tags" name="categories[]" multiple="multiple" aria-describedby="profilesHelp" required>
+                    {% for category in project_selected.categories %}
+                      <option selected="selected"  value="{{ category }}">{{ category }}</option>
+                    {% endfor %}
+                  </select>
+                </div>
               </div>
               <div class="from-group mb-3 mt-4">
                 <label  class="font-weight-semibold" for="project_profiles">Team Members (Optional) <small>Add Gitcoin Usernames</small></label>